/* ==========================================================================
   Massilia Optic : direction « L'Écaille »
   Papier chaud, encre acétate, ambre de charnière. Young Serif + Hanken Grotesk.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Hanken+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Fragment+Mono&display=swap');

:root {
  --paper: #FAF8F4;
  --paper-2: #F1EDE7;
  --paper-3: #E9E4DC;
  --ink: #23211E;
  --ink-soft: #5A5650;
  --amber: #A23730;      /* accents de marque = rouge de la façade */
  --amber-deep: #872A24;
  --gold: #B98A2F;       /* réservé aux étoiles d'avis */
  --rouge: #A23730;
  --rouge-deep: #872A24;
  --anthra: #3F4245;     /* le bandeau bas de la vitrine */
  --anthra-deep: #303336;
  --rade: #2F5B60;
  --line: rgba(35, 33, 30, 0.16);
  --line-soft: rgba(35, 33, 30, 0.09);

  --display: 'Young Serif', 'Georgia', serif;
  --text: 'Hanken Grotesk', 'Segoe UI', sans-serif;
  --accent: 'Instrument Serif', 'Georgia', serif;
  --mono: 'Fragment Mono', 'Consolas', monospace;

  /* 1140 étranglait la page sur un grand écran : près de 400 px de marge morte de
     chaque côté en 1920. Divine tourne à 1600, Maison Brusco entre 1150 et 1280. */
  --wrap: 1500px;
  --radius: 10px;
  --s-1: 8px; --s0: 16px; --s1: 24px; --s2: 40px; --s3: 64px; --s4: 104px; --s5: 160px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* l'attribut hidden gagne sur tout display */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); }
/* Le conteneur est large pour que les grilles et les images respirent, mais une
   ligne de texte de 1500 px serait illisible : les paragraphes posés directement
   dans le conteneur restent en colonne. Ceux qui sont déjà dans une grille ou une
   carte ne sont pas concernés. */
.wrap > p, .wrap > .reveal > p { max-width: 70ch; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4.2rem); line-height: 1.04; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1.14; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; }
h1 em, h2 em { font-family: var(--accent); font-style: italic; font-weight: 400; color: var(--amber-deep); letter-spacing: 0; }

p { margin: 0 0 1em; }
a { color: var(--rade); text-underline-offset: 3px; }
a:hover { color: var(--amber-deep); }
strong { font-weight: 600; }
img, svg { max-width: 100%; height: auto; }

::selection { background: rgba(162, 55, 48, 0.22); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin: 0 0 var(--s0);
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; }

/* Séparateur « ligne pupillaire » */
.pupil-rule {
  border: 0; height: 14px; margin: 0 auto; max-width: var(--wrap);
  background:
    radial-gradient(circle 3.5px at 32% 50%, var(--amber) 98%, transparent),
    radial-gradient(circle 3.5px at 68% 50%, var(--amber) 98%, transparent),
    repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 14px) 0 50% / 100% 1.5px no-repeat;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--text); font-weight: 600; font-size: 1rem;
  padding: 14px 24px; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--amber-deep); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-deep); }
.btn-amber { background: var(--rouge); color: #fff; }
.btn-amber:hover { background: var(--rouge-deep); color: #fff; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  background: var(--rouge);
}
/* Sur les pages qui ouvrent sur un hero sombre, la barre se pose SUR l'image :
   on arrive sur la devanture, pas sur un bandeau. Elle reprend son fond dès que
   la page défile. Le léger dégradé n'est pas une couleur de fond, c'est ce qui
   garde le logo et les liens lisibles sur une image en plein soleil. */
.nav.sur-hero:not(.is-scrolled) {
  background: linear-gradient(to bottom, rgba(18, 17, 16, 0.55) 0%,
                              rgba(18, 17, 16, 0.18) 62%, transparent 100%);
}
.nav.is-scrolled {
  box-shadow: 0 2px 14px -6px rgba(0, 0, 0, 0.35);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav-in { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 32px); padding-block: 14px; }
.brand { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.brand-logo { height: 36px; width: auto; display: block; }
.nav-links { display: flex; gap: clamp(12px, 1.8vw, 26px); margin-left: auto; }
.nav-links a {
  color: rgba(255, 255, 255, 0.88); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: rgba(255, 255, 255, 0.7); color: #fff; }
.nav-links a.is-vto { color: #fff; font-weight: 600; }
.nav-call { padding: 10px 18px; min-height: 42px; font-variant-numeric: tabular-nums; white-space: nowrap; background: #fff; color: var(--rouge); }
.nav-call:hover { background: var(--anthra); color: #fff; }
.nav-call-short { display: none; }
.nav-burger { display: none; }
@media (max-width: 560px) {
  .nav-call-num { display: none; }
  .nav-call-short { display: inline; }
  .brand-logo { height: 29px; }
}

@media (max-width: 880px) {
  .nav-links {
    display: none;
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--rouge);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 0 16px;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav.is-open { background: var(--rouge); }
  .nav-links a { padding: 13px clamp(18px, 4vw, 32px); border-bottom: 0; font-size: 1.05rem; }
  .nav-call { margin-left: auto; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius); cursor: pointer;
  }
  .nav-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
}

/* ---------- Barre d'action mobile ---------- */
.actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 55;
  display: none;
  background: rgba(135, 42, 36, 0.98);
  padding: 10px max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.actionbar.is-visible { transform: translateY(0); }
.actionbar-in { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.actionbar a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 0.92rem;
  padding: 12px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.12);
  min-height: 46px;
}
.actionbar a.is-rdv { background: #fff; color: var(--rouge); }
.actionbar svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 880px) {
  .actionbar { display: block; }
  body { padding-bottom: 0; }
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(120px, 18vh, 170px) 0 clamp(48px, 8vh, 84px); position: relative; overflow: hidden;
  /* le dégradé reste le fond de repli : il s'affiche tant que la vidéo n'est pas
     là, et il est de la couleur de la façade, donc le raccord est invisible */
  background: linear-gradient(168deg, var(--rouge) 0%, #93312B 58%, var(--rouge-deep) 100%);
  color: #FDF9F3;
  /* Plein écran à l'arrivée : la vidéo est cadrée en 16/9 pour occuper tout
     l'écran. La plafonner en hauteur la ferait rogner dans un conteneur trop
     plat, et laisserait une bande sous le hero. */
  min-height: 100vh;
  min-height: 100svh;      /* évite le saut quand la barre du navigateur mobile se replie */
  display: flex; align-items: center;
}

/* ---------- la devanture en fond ---------- */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
/* Voile : la façade est DÉJÀ rouge. Un voile rouge par-dessus sature l'image et
   noie l'enseigne. On assombrit donc dans un neutre profond, ce qui laisse le
   rouge de la devanture ressortir tel qu'il est. Dense à gauche pour le texte,
   transparent à droite sur l'enseigne. */
.hero-voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, rgba(18, 17, 16, 0.88) 0%, rgba(18, 17, 16, 0.66) 36%,
                    rgba(18, 17, 16, 0.24) 66%, rgba(18, 17, 16, 0.06) 100%),
    linear-gradient(to top, rgba(18, 17, 16, 0.42), transparent 38%);
}
/* .hero est en flex : sans width:100%, le wrap se rétrécit à son contenu et son
   margin-inline:auto le recentre, ce qui décale tout le texte vers la droite. */
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-dire { max-width: 620px; }
/* la phrase et le texte courant restent en colonne étroite, mais les preuves et
   les boutons ont besoin de toute la largeur pour tenir sur une ligne */
.hero-dire h1 { max-width: 16ch; }
.hero-dire .lede { max-width: 44ch; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }

@media (max-width: 880px) {
  /* en portrait le texte passe au-dessus de toute la largeur : le voile doit
     couvrir uniformément, sinon la fin des lignes devient illisible */
  .hero-voile {
    background:
      linear-gradient(180deg, rgba(88, 26, 22, 0.62) 0%, rgba(88, 26, 22, 0.86) 55%,
                      rgba(88, 26, 22, 0.94) 100%);
  }
  .hero-dire { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero .eyebrow { color: rgba(255, 255, 255, 0.75); }
.hero h1 { color: #FDF9F3; }
.hero h1 em { color: #F3D9A9; }
.hero .lede { color: rgba(253, 249, 243, 0.85); }
.hero .hero-proof { color: rgba(253, 249, 243, 0.88); }
.hero .hero-proof a:hover { color: #fff; }
.hero .stars { color: #F3D9A9; }
.hero .btn-primary { background: #fff; color: var(--rouge); }
.hero .btn-primary:hover { background: var(--anthra); color: #fff; }
.hero .btn-ghost { color: #FDF9F3; border-color: rgba(255, 255, 255, 0.45); }
.hero .btn-ghost:hover { border-color: #fff; color: #fff; }
/* la colonne image a disparu : la vidéo occupe tout le fond */
.hero-grid { display: block; }

/* ---------- Les marques : bandeau défilant + familles ---------- */
.marques { padding-bottom: clamp(32px, 5vh, 56px); }
.marquee {
  margin: clamp(28px, 5vh, 48px) 0 clamp(24px, 4vh, 40px);
  overflow: hidden; position: relative;
  border-block: 1px solid var(--line-soft);
  padding-block: 22px; background: var(--paper-2);
}
/* les bords s'estompent : le défilement n'a ni début ni fin visibles */
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px);
  z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper-2), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--paper-2), transparent); }

.marquee-piste { display: flex; width: max-content; animation: defile 68s linear infinite; }
.marquee:hover .marquee-piste { animation-play-state: paused; }
.marquee-lot { display: flex; align-items: center; gap: clamp(38px, 6vw, 76px); padding-right: clamp(38px, 6vw, 76px); }
.marquee-lot img {
  height: 30px; width: auto; max-width: 160px; object-fit: contain; display: block;
  /* une seule encre pour tout le monde : sinon la ligne part dans tous les sens */
  filter: grayscale(1) brightness(0) opacity(0.55);
  transition: filter 0.25s;
}
.marquee-lot img:hover { filter: grayscale(0) brightness(1) opacity(1); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

.familles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.famille { border-top: 2px solid var(--rouge); padding-top: 14px; }
.famille h3 { font-size: 1.08rem; margin-bottom: 8px; }
.famille p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.famille b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .familles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .familles { grid-template-columns: 1fr; } }
@media (max-width: 880px) {
  .hero { padding-top: 104px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-art { max-width: 320px; margin-inline: auto; }
  .hero-art-caption { text-align: center; }
}
.hero h1 { margin-bottom: 20px; }
.hero .focus-in { animation: focusIn 0.9s ease-out 0.15s both; }
@keyframes focusIn {
  from { filter: blur(9px); opacity: 0.4; }
  to { filter: blur(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero .focus-in { animation: none; } }

.hero-proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin: 0 0 26px; font-weight: 500; color: var(--ink-soft); font-size: 0.98rem;
}
.hero-proof a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-proof a:hover { color: var(--amber-deep); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; }
.open-badge { display: inline-flex; align-items: center; gap: 8px; }
.open-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #7FD695;
}
.open-badge.is-closed::before { background: #F0B9A0; }

.hero-art { position: relative; }
.hero-art img {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55);
}
.hero-art-caption {
  font-family: var(--mono); font-size: 0.72rem; color: rgba(253, 249, 243, 0.7);
  text-align: right; margin-top: 10px; letter-spacing: 0.04em;
}

/* tracé des montures */
.draw-path { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.is-in .draw-path, .hero-art .draw-path { animation: draw 1.4s ease-out forwards; }
.is-in .draw-path { animation-delay: 0.15s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .draw-path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
}

/* ---------- Bandeau confiance (liste éditoriale) ---------- */
.strip { padding: clamp(28px, 5vh, 48px) 0; border-top: 1px solid var(--line-soft); }
.strip-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.strip-list li { border-left: 1px solid var(--line); padding-left: 18px; }
.strip-num { font-family: var(--mono); font-size: 0.72rem; color: var(--amber-deep); display: block; margin-bottom: 6px; }
.strip-list b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.12rem; margin-bottom: 3px; }
.strip-list span { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; display: block; }
@media (max-width: 880px) { .strip-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .strip-list { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Sections génériques ---------- */
.section { padding: clamp(64px, 11vh, 130px) 0; }
.section-tight { padding: clamp(48px, 8vh, 88px) 0; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Teaser essayage ---------- */
.vteaser { background: var(--anthra); color: #F5F3EF; overflow: hidden; }
.vteaser .eyebrow { color: #E9B9B2; }
.vteaser h2 { color: #F5F3EF; }
.vteaser h2 em { color: #E9B9B2; }
.vteaser-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.vteaser-copy .lede { color: rgba(245, 243, 239, 0.8); }
.vteaser-privacy {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.92rem; color: rgba(245, 243, 239, 0.7);
  border-left: 2px solid #E9B9B2; padding-left: 14px; margin: 22px 0 26px; max-width: 46ch;
}
.vteaser-note { font-family: var(--mono); font-size: 0.75rem; color: rgba(245, 243, 239, 0.55); margin-top: 14px; }
.vteaser-photo { position: relative; max-width: 460px; margin-inline: auto; }
.vteaser-photo img {
  width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
.vteaser-photo figcaption {
  font-family: var(--mono); font-size: 0.72rem; color: rgba(245, 243, 239, 0.6); margin-top: 10px;
}
@media (max-width: 880px) {
  .vteaser-grid { grid-template-columns: 1fr; }
  .vteaser-photo { max-width: 380px; }
}

/* ---------- Collection ---------- */
.collection { overflow: hidden; }
.collection-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: var(--s2); }
.collection-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26vw, 320px);
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  margin-inline: calc(-1 * clamp(18px, 4vw, 32px));
  padding-inline: clamp(18px, 4vw, 32px);
  scrollbar-width: thin; scrollbar-color: var(--amber) transparent;
}
.fcard {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0 0 18px;
  display: flex; flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(35, 33, 30, 0.35); }
.fcard-art { padding: 0; min-height: 186px; position: relative; }
.fcard-art img { width: 100%; height: 186px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; display: block; }
.fcard-body { padding: 14px 18px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fcard-name { font-family: var(--display); font-size: 1.22rem; }
.fcard-style { color: var(--ink-soft); font-size: 0.9rem; }
.fcard-try {
  margin: 14px 18px 0; align-self: start;
  font-size: 0.92rem; font-weight: 600; color: var(--amber-deep); text-decoration: none;
  border-bottom: 1.5px solid rgba(169, 106, 50, 0.4); padding-bottom: 2px;
}
.fcard-try:hover { border-bottom-color: var(--amber-deep); }
.collection-brands {
  margin-top: var(--s2); color: var(--ink-soft); font-size: 0.95rem;
}
.collection-brands b { font-family: var(--display); font-weight: 400; color: var(--ink); }

/* ---------- Ordonnance ---------- */
.ordo { background: var(--paper-2); }
.ordo-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); }
.ordo-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ordo-steps li {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.ordo-steps li:last-child { border-bottom: 1px solid var(--line); }
.ordo-num { font-family: var(--mono); font-size: 1.6rem; color: rgba(169, 106, 50, 0.55); line-height: 1.1; }
.ordo-steps h3 { margin-bottom: 4px; }
.ordo-steps p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }
.ordo-aside .microquote {
  font-family: var(--accent); font-style: italic; font-size: 1.25rem; color: var(--ink);
  border-left: 2px solid var(--amber); padding-left: 16px; margin: 26px 0 6px;
}
.ordo-aside .microquote-src { font-size: 0.85rem; color: var(--ink-soft); padding-left: 18px; }
@media (max-width: 880px) { .ordo-grid { grid-template-columns: 1fr; } }

/* ---------- Avis ---------- */
.avis { text-align: center; }
.avis-big {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 2.9rem); line-height: 1.2;
  max-width: 21ch; margin: var(--s2) auto var(--s0);
}
.avis-big::before { content: "« "; color: var(--amber); }
.avis-big::after { content: " »"; color: var(--amber); }
.avis-src { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: var(--s3); }
.avis-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 28px); text-align: left; }
.avis-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 22px 22px 18px;
}
.avis-card p { font-size: 0.98rem; margin-bottom: 12px; }
.avis-card p::before { content: "« "; color: var(--amber); }
.avis-card p::after { content: " »"; color: var(--amber); }
.avis-meta { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--ink-soft); }
.avis-link { display: inline-block; margin-top: var(--s2); font-weight: 600; }
@media (max-width: 880px) { .avis-row { grid-template-columns: 1fr; } }

/* ---------- Manifeste acuité ---------- */
.manifeste { background: var(--paper-2); position: relative; }
.manifeste-in { max-width: 760px; margin-inline: auto; text-align: center; position: relative; }
.acuity { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.acuity-line { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; width: 100%; }
.acuity-ref { font-family: var(--mono); font-size: 0.62rem; color: rgba(87, 73, 58, 0.55); letter-spacing: 0.08em; }
.acuity-ref:first-child { text-align: right; }
.acuity-ref:last-child { text-align: left; }
.acuity-text { font-family: var(--display); line-height: 1.18; }
.acuity-1 .acuity-text { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.acuity-2 .acuity-text { font-size: clamp(1.35rem, 3.2vw, 2.1rem); }
.acuity-3 .acuity-text { font-size: clamp(1.05rem, 2.3vw, 1.5rem); }
.acuity-4 .acuity-text { font-size: clamp(0.9rem, 1.7vw, 1.08rem); font-family: var(--text); color: var(--ink-soft); }
.acuity-5 .acuity-text { font-size: 0.8rem; font-family: var(--text); color: var(--ink-soft); }
.manifeste-badge {
  margin: var(--s2) auto 0; width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 1.5px solid var(--rouge); color: var(--rouge);
  font-family: var(--display); font-size: 0.95rem; line-height: 1.25;
  background: #fff;
}

/* ---------- Étudiants / quartier ---------- */
.quartier-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.quartier-points { margin: 18px 0 26px; padding: 0; list-style: none; }
.quartier-points li { padding: 10px 0 10px 26px; position: relative; color: var(--ink-soft); }
.quartier-points li::before {
  content: ""; position: absolute; left: 2px; top: 19px;
  width: 9px; height: 9px; border: 1.5px solid var(--amber); border-radius: 50%;
}
.quartier-photo { margin: 0; }
.quartier-photo img { width: 100%; border-radius: var(--radius); display: block; border: 1px solid var(--line-soft); }
.quartier-photo figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 880px) { .quartier-grid { grid-template-columns: 1fr; } }

/* ---------- Accès / infos pratiques ---------- */
.acces { background: var(--anthra); color: #F5F3EF; }
.acces .eyebrow { color: #E9B9B2; }
.acces h2 { color: #F5F3EF; }
.acces-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.acces-card { display: flex; flex-direction: column; gap: 20px; }
.acces-block { border-top: 1px solid rgba(245, 243, 239, 0.16); padding-top: 16px; }
.acces-block .k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #E9B9B2; display: block; margin-bottom: 8px; }
.acces-block p { margin: 0; color: rgba(245, 243, 239, 0.88); }
.acces-block a { color: #fff; }
.acces-tel { font-size: clamp(1.5rem, 3vw, 2rem); font-family: var(--display); text-decoration: none; font-variant-numeric: tabular-nums; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours td { padding: 5px 0; color: rgba(245, 243, 239, 0.88); font-size: 0.97rem; }
.hours td:last-child { text-align: right; }
.hours tr.is-today td { color: #fff; font-weight: 600; }
.acces-visu { display: flex; flex-direction: column; gap: 16px; }
.acces-photo { margin: 0; }
.acces-photo img { width: 100%; border-radius: var(--radius); display: block; border: 1px solid rgba(245, 243, 239, 0.18); }
.acces-photo figcaption { font-family: var(--mono); font-size: 0.72rem; color: rgba(245, 243, 239, 0.65); margin-top: 8px; }
.acces-map {
  border-radius: var(--radius); overflow: hidden; min-height: 280px; flex: 1;
  border: 1px solid rgba(245, 243, 239, 0.18); background: var(--anthra-deep);
}
.acces-map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; filter: sepia(0.22) saturate(0.85); }
.acces-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.acces .btn-ghost { color: #F5F3EF; border-color: rgba(245, 243, 239, 0.35); }
.acces .btn-ghost:hover { border-color: #fff; color: #fff; }
.acces .btn-primary { background: var(--rouge); }
.acces .btn-primary:hover { background: #B4483F; }
@media (max-width: 880px) { .acces-grid { grid-template-columns: 1fr; } }

/* ---------- RDV ---------- */
.rdv-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.rdv-form {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  display: grid; gap: 16px;
}
.rdv-form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.92rem; }
.rdv-form input, .rdv-form select, .rdv-form textarea {
  font: inherit; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px;
  padding: 12px 14px; min-height: 48px;
}
.rdv-form input:focus, .rdv-form select:focus, .rdv-form textarea:focus {
  outline: 2px solid var(--rouge); outline-offset: 1px; border-color: transparent;
}
.rdv-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rdv-alt { margin-top: 14px; color: var(--ink-soft); font-size: 0.95rem; }
.rdv-ok { border-left: 3px solid #3E7A4C; background: rgba(62, 122, 76, 0.08); padding: 16px 18px; border-radius: 0 8px 8px 0; }
.rdv-demo-note { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 880px) { .rdv-grid, .rdv-2col { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot {
  background: var(--anthra-deep); color: rgba(245, 243, 239, 0.85);
  position: relative; margin-top: 0; padding: clamp(44px, 7vh, 72px) 0 96px;
}
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(20px, 3vw, 40px); position: relative; }
.foot-logo { height: 46px; width: auto; display: block; margin-bottom: 14px; }
.foot-h { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #E9B9B2; margin-bottom: 10px; }
.foot-col p { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.55; }
.foot-col a { color: #fff; }
.foot-legal {
  position: relative; margin-top: var(--s2); padding-top: 22px;
  border-top: 1px solid rgba(245, 243, 239, 0.14);
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
  font-size: 0.82rem; color: rgba(245, 243, 239, 0.55);
}
.foot-legal p { margin: 0; }
.foot-legal a { color: rgba(245, 243, 239, 0.78); }
@media (max-width: 880px) { .foot-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-in { grid-template-columns: 1fr; } }

/* ==========================================================================
   Page essayage virtuel
   ========================================================================== */
.vto-head { padding: clamp(110px, 16vh, 150px) 0 clamp(20px, 4vh, 36px); }
.vto-head h1 { max-width: 18ch; }

.vto-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.vto-grid > * { min-width: 0; }
@media (max-width: 960px) { .vto-grid { grid-template-columns: 1fr; } }

.vto-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--anthra-deep);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
}
.vto-stage canvas { width: 100%; height: 100%; object-fit: contain; display: none; }
.vto-stage.is-live canvas { display: block; }
.vto-stage.is-live .vto-empty { display: none; }
.vto-empty { text-align: center; color: rgba(245, 243, 239, 0.65); padding: 24px; }
.vto-empty-art { width: min(300px, 62%); margin: 0 auto 10px; opacity: 0.9; }
.vto-empty p { font-family: var(--mono); font-size: 0.8rem; margin: 0; }
.vto-stage.is-loading .vto-empty-art { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.vto-status {
  position: absolute; inset: auto 12px 12px;
  margin: 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(48, 51, 54, 0.9); color: #F5F3EF;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.45;
}
.vto-status[data-kind="warn"] { background: rgba(140, 62, 30, 0.92); }

.vto-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vto-current-line { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); margin: 12px 0 0; }
.vto-privacy {
  margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft);
  border-left: 2px solid var(--amber); padding-left: 14px; max-width: 60ch;
}

.vto-side-title { margin-bottom: 6px; }
.vto-side-sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 16px; }
.vto-frames { display: flex; flex-direction: column; gap: 6px; }
.vto-group-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber-deep); margin: 12px 0 8px;
}
.vto-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vto-chip.is-real .vto-chip-name::after {
  content: "boutique"; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.06em;
  color: #fff; background: var(--rouge); border-radius: 999px; padding: 2px 7px;
  margin-left: 6px; vertical-align: 2px;
}
.vto-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 1.5px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 10px 10px; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative; overflow: hidden;
}
.vto-chip:hover { transform: translateY(-2px); border-color: var(--rouge); }
.vto-chip.is-active { border-color: var(--rouge); background: #fff; }
.vto-chip img { width: 86%; height: auto; margin-bottom: 4px; }
.vto-chip-name { font-family: var(--display); font-size: 0.98rem; }
.vto-chip-style { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-soft); letter-spacing: 0.02em; }
@media (max-width: 960px) {
  .vto-chip-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .vto-chip { scroll-snap-align: start; }
}

.vto-shots-wrap { margin-top: var(--s3); }
.vto-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.vto-shot { margin: 0; position: relative; }
.vto-shot img { width: 100%; border-radius: 8px; border: 1px solid var(--line-soft); display: block; }
.vto-shot figcaption { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); margin-top: 5px; }
.vto-shot-del {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border-radius: 50%; border: 0; background: rgba(34, 26, 18, 0.75); color: var(--paper);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
/* ---------- Le studio (flux 2 temps) ---------- */
.studio-stage img { cursor: zoom-in; }
.studio-loading {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 8px;
  background: rgba(48, 51, 54, 0.9); color: #F5F3EF;
  text-align: center; padding: 24px;
}
.studio-loading p { margin: 0; font-size: 1rem; }
.studio-loading-sub { font-family: var(--mono); font-size: 0.72rem; color: rgba(245, 243, 239, 0.6); }
.studio-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(245, 243, 239, 0.25); border-top-color: #fff;
  animation: spin 0.9s linear infinite; margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .studio-spinner { animation-duration: 2.5s; } }
body.studio-busy .frame-card, body.studio-busy .vto-controls .btn { pointer-events: none; opacity: 0.6; }

/* ---------- Labo 3D ---------- */
.labo-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--anthra-deep);
  aspect-ratio: 4 / 3;
  max-height: min(74vh, 640px);
  margin-inline: auto;
}
.labo-stage video, .labo-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1);           /* miroir : vidéo ET rendu 3D, ensemble */
}
.labo-stage canvas { z-index: 2; }
.labo-stage .vto-status {
  position: absolute; inset: auto 12px 12px; z-index: 3;
  margin: 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(48, 51, 54, 0.92); color: #F5F3EF;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.45;
}
.labo-stage .vto-status[data-kind="warn"] { background: rgba(135, 42, 36, 0.94); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: none; place-items: center;
  background: rgba(20, 18, 16, 0.92);
  padding: 18px;
}
.lightbox.is-open { display: grid; }
.lightbox figure { margin: 0; max-width: min(94vw, 900px); }
.lightbox img {
  max-width: 94vw; max-height: 82vh; width: auto; height: auto;
  display: block; border-radius: var(--radius); margin-inline: auto;
}
.lightbox figcaption {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; font-family: var(--mono); font-size: 0.78rem; color: rgba(245, 243, 239, 0.85);
}
.lightbox-dl { color: #fff; font-weight: 600; }
.lightbox-close {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.3rem; line-height: 1;
}
.lightbox-close:hover { background: var(--rouge); }
.vto-shot img { cursor: zoom-in; }
.vto-shot figcaption { display: flex; justify-content: space-between; gap: 10px; }
.vto-shot-dl { color: var(--rouge); font-weight: 600; text-decoration: none; }

.studio-step {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 1.25rem; margin: 0 0 12px;
}
.studio-step span {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--rouge); color: #fff;
  font-family: var(--mono); font-size: 0.85rem;
}
.studio-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--anthra-deep);
  aspect-ratio: 4 / 3;              /* ajusté en JS au format réel du flux/photo */
  max-height: min(72vh, 620px);
  margin-inline: auto;
  display: grid; place-items: center;
}
.studio-stage video, .studio-stage img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.studio-stage video { transform: scaleX(-1); }  /* aperçu miroir naturel */
.studio-empty { text-align: center; color: rgba(245, 243, 239, 0.7); padding: 24px; font-size: 0.97rem; }
.studio-stage .vto-status {
  position: absolute; inset: auto 12px 12px;
  margin: 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(48, 51, 54, 0.92); color: #F5F3EF;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.45;
}
.studio-stage .vto-status[data-kind="warn"] { background: rgba(135, 42, 36, 0.94); }
.studio-stage[data-result="1"]::after {
  content: "rendu studio · indicatif";
  position: absolute; top: 10px; left: 10px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.92); color: var(--rouge);
  padding: 4px 10px; border-radius: 999px;
}

.studio-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frame-card {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1.5px solid var(--line-soft); border-radius: var(--radius);
  padding: 10px; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.frame-card:hover { transform: translateY(-2px); border-color: var(--rouge); }
.frame-card.is-active { border-color: var(--rouge); box-shadow: 0 0 0 1px var(--rouge); }
.frame-card-art {
  display: grid; place-items: center; height: 64px; margin-bottom: 6px;
}
.frame-card-art img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.frame-card-name { font-family: var(--display); font-size: 0.95rem; line-height: 1.2; }
.frame-card-style { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-soft); }
.studio-gen { width: 100%; margin-top: 16px; }
.studio-gen-note { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin: 10px 0 0; }
@media (max-width: 960px) {
  .studio-frames { grid-template-columns: 1fr 1fr; }
}

.vto-labo { margin-top: var(--s3); }
.vto-labo-line {
  font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 18px; max-width: 68ch;
}
.vto-labo-line a { color: var(--rouge); text-underline-offset: 3px; }

.vto-next { background: var(--paper-2); padding: clamp(48px, 8vh, 88px) 0; margin-top: var(--s3); }
.vto-next h2 { max-width: 20ch; }
.vto-next p { max-width: 58ch; color: var(--ink-soft); }

/* ---------- Divers ---------- */
.skip-note { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }

/* ==========================================================================
   Boutique en ligne des solaires (DÉMONSTRATION)
   ========================================================================== */
.shop-head { padding-bottom: clamp(12px, 2vh, 24px); }
.shop-demo-note {
  margin-top: 22px; max-width: 72ch;
  background: var(--paper-2); border-left: 3px solid var(--rouge); border-radius: 0 8px 8px 0;
  padding: 14px 18px; font-size: 0.92rem; color: var(--ink-soft);
}
.shop-demo-note b { color: var(--ink); }

.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; margin-bottom: var(--s1);
}
.shop-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-chip {
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 16px; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.shop-chip:hover { border-color: var(--rouge); color: var(--rouge-deep); }
.shop-chip.is-active { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.shop-count { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }

.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.pcard {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(35, 33, 30, 0.35); }
.pcard-art { height: 190px; }
.pcard-art img { width: 100%; height: 190px; object-fit: cover; display: block; }
.pcard-art.is-packshot { display: grid; place-items: center; background: #fff; border-bottom: 1px solid var(--line-soft); padding: 18px; }
.pcard-art.is-packshot img { width: auto; height: auto; max-height: 150px; object-fit: contain; }
.pcard-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pcard-name { font-family: var(--display); font-size: 1.12rem; }
.pcard-prix { font-family: var(--mono); font-size: 0.95rem; white-space: nowrap; }
.pcard-prix sup { color: var(--ink-soft); }
.pcard-style { color: var(--ink-soft); font-size: 0.88rem; }
.pcard-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: #3E7A4C; margin-top: 2px; }
.pcard-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3E7A4C; }
.pcard-stock.is-unique { color: var(--amber-deep); }
.pcard-stock.is-unique::before { background: var(--amber-deep); }
.pcard-actions { margin-top: auto; padding-top: 12px; }
.pcard-btn { width: 100%; padding: 11px 16px; min-height: 44px; font-size: 0.95rem; }
.pcard .fcard-try { margin: 12px 0 0; align-self: start; }
.shop-price-note { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin-top: var(--s1); }

.shop-how { background: var(--paper-2); }
.shop-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: var(--s1); }
.shop-how-step { border-top: 1px solid var(--line); padding-top: 16px; }
.shop-how-step h3 { font-size: 1.12rem; margin: 8px 0 6px; }
.shop-how-step p { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }
@media (max-width: 760px) { .shop-how-grid { grid-template-columns: 1fr; } }

/* panier */
.cart-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rouge); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px -12px rgba(135, 42, 36, 0.7);
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.cart-fab:hover { background: var(--rouge-deep); transform: translateY(-2px); }
.cart-fab svg { width: 24px; height: 24px; }
.cart-fab-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; border-radius: 999px; padding: 0 6px;
  background: var(--anthra-deep); color: #fff;
  font-size: 0.75rem; font-weight: 700; display: grid; place-items: center;
}
@media (max-width: 880px) { .cart-fab { bottom: 76px; } }

.cart-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 18, 16, 0.5);
}
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
  width: min(420px, 94vw);
  background: var(--paper); box-shadow: -18px 0 50px -30px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
}
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
}
.cart-head h2 { margin: 0; font-size: 1.35rem; }
.cart-close {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink); font-size: 1.3rem; line-height: 1;
}
.cart-close:hover { background: var(--rouge); color: #fff; }
.cart-lines { flex: 1; overflow-y: auto; padding: 16px 22px; }
.cart-empty { color: var(--ink-soft); font-size: 0.95rem; }
.cart-line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line-art { height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-soft); }
.cart-line-art img { width: 100%; height: 60px; object-fit: cover; display: block; }
.cart-line-art.is-packshot { display: grid; place-items: center; background: #fff; padding: 6px; }
.cart-line-art.is-packshot img { width: auto; height: auto; max-height: 46px; object-fit: contain; }
.cart-line-name { font-family: var(--display); font-size: 0.98rem; display: block; }
.cart-line-prix { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }
.cart-qty { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cart-qty button {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink);
}
.cart-qty button:hover { border-color: var(--rouge); color: var(--rouge-deep); }
.cart-qty .cart-del {
  width: auto; height: auto; border: 0; background: none;
  font-size: 0.8rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px;
  margin-left: auto;
}
.cart-foot { border-top: 1px solid var(--line-soft); padding: 16px 22px 20px; background: #fff; }
.cart-ship { display: grid; gap: 8px; margin-bottom: 14px; }
.cart-ship label { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; }
.cart-ship input { accent-color: var(--rouge); width: 17px; height: 17px; }
.cart-ship b { color: var(--ink); }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.05rem; margin-bottom: 12px; }
.cart-total b { font-family: var(--display); font-size: 1.45rem; }
.cart-pay { width: 100%; }
.cart-demo { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); margin: 10px 0 0; }
body.cart-open { overflow: hidden; }

/* modale checkout / réservation */
.shop-modal {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  background: rgba(20, 18, 16, 0.55);
  padding: 18px;
}
.shop-modal-card {
  position: relative; width: min(560px, 96vw); max-height: 90vh; overflow-y: auto;
  background: var(--paper); border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}
.shop-modal-close { position: absolute; top: 14px; right: 14px; }
.shop-modal-sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 16px; }
.shop-form { padding: 0; border: 0; background: none; }
.shop-pay-box {
  background: var(--paper-2); border-radius: 8px; padding: 14px 16px; font-size: 0.9rem;
}
.shop-pay-box p { margin: 6px 0 0; color: var(--ink-soft); }
.shop-resa-note { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 16px; }
.shop-confirm { margin: 6px 0 18px; }
.shop-confirm p { font-size: 0.97rem; color: var(--ink-soft); }
.shop-confirm p b { color: var(--ink); }

/* bandeau monture pré-sélectionnée (arrivée via ?monture= depuis boutique/home) */
.studio-pref {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid var(--rouge); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 16px;
}
.studio-pref-art { flex: none; width: 84px; display: grid; place-items: center; }
.studio-pref-art img { max-height: 44px; width: auto; }
.studio-pref-txt { display: grid; gap: 1px; }
.studio-pref-txt b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.studio-pref-txt span { color: var(--ink-soft); font-size: 0.85rem; }
.studio-pref > a { margin-left: auto; font-size: 0.88rem; color: var(--rouge); white-space: nowrap; }
@media (max-width: 560px) {
  .studio-pref { flex-wrap: wrap; gap: 10px 14px; }
  .studio-pref-art { width: 64px; }
}