/* ==========================================================================
   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 couvre
     uniformément, en s'épaississant vers le bas où vivent le texte et les cartes.
     ⚠️ Dans le MÊME neutre profond que le voile desktop, jamais un rouge : la
     façade est déjà rouge, un voile rouge lave la vidéo (vu à l'œil dès le
     passage en vraie qualité : l'ancienne vidéo compressée le masquait). */
  .hero-voile {
    background:
      linear-gradient(180deg, rgba(18, 17, 16, 0.42) 0%, rgba(18, 17, 16, 0.62) 52%,
                      rgba(18, 17, 16, 0.84) 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 quatre raisons, posées en bas du hero ----------
   Elles reposent sur la vidéo, en verre dépoli : on garde la devanture visible
   derrière tout en rendant le texte lisible. Le hero passe en colonne pour les
   coller en bas, sous le discours. */
.hero .wrap { display: flex; flex-direction: column; justify-content: center; }
.hero-cartes {
  list-style: none; margin: clamp(32px, 6vh, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, 0.16);      /* la gouttière fait les filets */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius); overflow: hidden;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.hero-cartes li {
  background: rgba(18, 17, 16, 0.42);
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 22px);
}
.hero-cartes .strip-num { color: #F3D9A9; }
.hero-cartes b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem); color: #FDF9F3; margin-bottom: 4px;
}
.hero-cartes > li > span:last-child {
  display: block; color: rgba(253, 249, 243, 0.82);
  font-size: 0.86rem; line-height: 1.45;
}
.hero-cartes a { color: #F3D9A9; text-decoration: underline; text-underline-offset: 3px; }
/* le badge prend sa propre ligne, sinon il se colle au texte qui suit */
.hero-cartes .open-badge { display: flex; width: fit-content; margin-bottom: 6px; }

@media (max-width: 980px) { .hero-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* Hero de téléphone ÉPURÉ (demande du 4/09 : « très chargé sur le téléphone,
     on ne garde que l'accroche et la boutique »). Ne restent que le h1 et un seul
     bouton, celui de la boutique en ligne, passé en plein : le rendez-vous et
     l'appel vivent déjà dans la barre d'action fixe du bas. La vidéo respire. */
  .hero .eyebrow, .hero .lede { display: none; }
  .hero .cta-row .btn-primary { display: none; }
  .hero .cta-row .btn-ghost {
    background: #fff; color: var(--rouge); border-color: #fff; font-weight: 600;
  }
  .hero-cartes { display: none; }
  .hero-dire h1 { max-width: none; }
}

/* Le bandeau de marques enchaîne directement sur le hero. Double sélecteur :
   la règle générique .section est déclarée plus bas dans ce fichier et
   l'emporterait à spécificité égale. */
.section.marques { padding-top: 0; }
.marques .marquee { margin-top: 0; border-top: 0; }
.marques-intro { margin-top: clamp(48px, 8vh, 96px); }

/* ---------- 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; }
}

/* ---------- La boutique en ligne, sur la page d'accueil ---------- */
/* Le rayon en fond, sous un voile sombre. Le voile est NEUTRE (jamais teinté de
   rouge) et s'épaissit vers le bas, là où arrivent les cartes blanches. La
   couleur reste en dernière couche : si l'image ne charge pas, la section garde
   son anthracite et rien ne devient illisible. */
.boutique-live {
  color: #FDF9F3;
  background:
    linear-gradient(rgba(18, 17, 16, 0.76), rgba(18, 17, 16, 0.9)),
    url("../assets/boutique/fond-boutique.jpg") center / cover no-repeat,
    var(--anthra);
}
@media (max-width: 900px) {
  .boutique-live {
    background:
      linear-gradient(rgba(18, 17, 16, 0.78), rgba(18, 17, 16, 0.92)),
      url("../assets/boutique/fond-boutique-800.jpg") center / cover no-repeat,
      var(--anthra);
  }
}
.boutique-live .eyebrow { color: rgba(255, 255, 255, 0.62); }
.boutique-live h2 { color: #FDF9F3; }
.boutique-live h2 em { color: #F3D9A9; }
.boutique-live .lede { color: rgba(253, 249, 243, 0.84); }
.bl-tete { display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 64px); align-items: start; }
.bl-atouts { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.bl-atouts p { color: rgba(253, 249, 243, 0.74); font-size: 0.92rem; margin: 0;
  border-left: 2px solid rgba(243, 217, 169, 0.5); padding-left: 14px; }
.bl-atouts b { color: #FDF9F3; }

.bl-grille { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(32px, 5vh, 56px); }
.bl-carte { display: flex; flex-direction: column; text-decoration: none;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius); overflow: hidden; transition: transform .2s, background .2s; }
.bl-carte:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.09); }
/* les visuels arrivent déjà cadrés à l'identique par la boutique : plein cadre,
   sans padding, sinon on ajoute une marge à une marge */
.bl-art { position: relative; background: #fff; display: grid; place-items: center;
  padding: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.bl-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bl-remise { position: absolute; top: 10px; left: 10px;
  background: var(--rouge); color: #fff; font-family: var(--mono); font-size: 0.68rem;
  padding: 2px 8px; border-radius: 999px; }
.bl-corps { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 16px; }
.bl-nom { font-family: var(--display); font-size: 1rem; color: #FDF9F3; }
.bl-coloris { font-size: 0.8rem; color: rgba(253, 249, 243, 0.6); }
.bl-prix { font-family: var(--mono); font-size: 0.92rem; color: #F3D9A9; margin-top: 4px; }
.bl-prix s { color: rgba(253, 249, 243, 0.66); margin-right: 7px; font-size: 0.85em; }
.bl-pied { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(28px, 4vh, 44px); }
.bl-note { font-family: var(--mono); font-size: 0.72rem; color: rgba(253, 249, 243, 0.68); }

@media (max-width: 1000px) { .bl-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .bl-tete { grid-template-columns: 1fr; } }

/* ---------- L'atelier ---------- */
.atelier { background: var(--paper-2); }
/* Le texte tient sur toute la largeur, les deux visuels se partagent la ligne en
   dessous : la colonne de texte étant plus courte que les images empilées, la mise
   en page laissait un grand vide au-dessus et au-dessous du texte. */
.atelier-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 52px); }
.atelier-dire .lede { max-width: 62ch; }
/* les trois arguments passent en colonnes : la largeur est occupée sans que les
   lignes s'allongent au point de devenir pénibles à lire */
.atelier-liste { list-style: none; margin: var(--s1) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px clamp(24px, 3vw, 44px);
  align-items: start; }
.atelier-liste li { padding-left: 22px; position: relative; color: var(--ink-soft);
  font-size: 0.95rem; }
.atelier-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--rouge);
}
.atelier-liste b { color: var(--ink); }
.atelier-photo { margin: 0; }
.atelier-photo img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.atelier-photo figcaption { font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 860px) {
  .atelier-liste { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- L'équipe ---------- */
.equipe-photo { margin: var(--s1) 0 0; }
.equipe-photo img { width: 100%; height: auto; max-height: 520px; object-fit: cover;
  object-position: center 38%; border-radius: var(--radius); display: block; }
.equipe-mots { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px); margin-top: var(--s1); }
.equipe-mots h3 { font-size: 1.15rem; margin-bottom: 2px; }
.equipe-role { font-family: var(--mono); font-size: 0.74rem; color: var(--rouge-deep);
  margin-bottom: 8px; }
/* Marque visuellement ce qui reste à écrire avec eux : on ne fait pas passer un
   texte de remplissage pour du contenu validé. */
.a-completer { color: var(--ink-soft); font-size: 0.9rem; font-style: italic;
  border-left: 2px dashed var(--line); padding-left: 12px; }
@media (max-width: 760px) { .equipe-mots { grid-template-columns: 1fr; } }

/* ---------- Le voisinage : relais et sponsors ---------- */
.voisinage-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); margin-top: var(--s1); }
.voisin { display: flex; flex-direction: column; gap: 18px; }
.voisin figure { margin: 0; }
.voisin figure img { width: 100%; height: 300px; object-fit: cover;
  border-radius: var(--radius); display: block; }
.voisin h3 { font-size: 1.2rem; margin-bottom: 8px; }
.voisin p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.voisin b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .voisinage-grid { grid-template-columns: 1fr; } }

.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; } }

/* ---------- Les services (entretien du 4/09) : même langage que les familles
   de marques, en cartes bordées pour marquer que chacun est un vrai service. */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px); margin-top: clamp(28px, 4vw, 44px); }
.service { border: 1px solid var(--line); border-top: 2px solid var(--rouge);
  border-radius: var(--radius); padding: 20px 22px; background: #fff; }
.service h3 { font-size: 1.05rem; margin-bottom: 8px; }
.service p { color: var(--ink-soft); font-size: 0.93rem; margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { 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-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rdv-erreur { color: #A23730; font-weight: 600; font-size: 0.92rem; 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.25fr 1fr 1fr 1fr 0.9fr; gap: clamp(20px, 3vw, 40px); position: relative; }
.foot-liens { display: grid; gap: 6px; }
.foot-liens a { font-size: 0.95rem; }
.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; }
}

/* ==========================================================================
   Les blocs du plan de contenu du 23 juillet
   100 % santé · conseils · FAQ · mutuelles · l'emplacement photo de l'atelier
   ========================================================================== */

/* ---------- 100 % santé ---------- */
.sante-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 34px); margin-top: var(--s1); }
.sante-card { background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); }
.sante-num { display: block; font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.06em; color: var(--rouge-deep); margin-bottom: 12px; }
.sante-card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.sante-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.sante-renouv { margin-top: clamp(26px, 3.4vw, 46px); }
.sante-renouv h3 { font-size: 1.2rem; }
.sante-renouv > p { max-width: 70ch; color: var(--ink-soft); }
/* Les trois durées se comparent d'un coup d'œil : une ligne par âge, l'âge en
   monospace comme les autres données du site (prix, calibres). */
.sante-table { width: 100%; max-width: 900px; border-collapse: collapse; margin-top: 14px; }
.sante-table th { width: 1%; white-space: nowrap; text-align: left; vertical-align: top;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 400; color: var(--ink);
  padding: 13px 24px 13px 0; border-top: 1px solid var(--line-soft); }
.sante-table td { color: var(--ink-soft); font-size: 0.95rem;
  padding: 13px 0; border-top: 1px solid var(--line-soft); }
.sante-src { max-width: 70ch; margin-top: 18px; color: var(--ink-soft); font-size: 0.9rem; }
.sante-renouv .a-completer { margin-top: 14px; }
@media (max-width: 900px) { .sante-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .sante-table, .sante-table tr, .sante-table th, .sante-table td { display: block; width: auto; }
  .sante-table th { border-top: 1px solid var(--line-soft); padding: 14px 0 2px; }
  .sante-table td { border-top: 0; padding: 0 0 14px; }
}

/* ---------- Écran de chargement (page d'accueil) ----------
   Pattern Moutet : le wordmark s'allume de gauche à droite au rythme de la mise
   en cache de la vidéo du hero, ce qui autorise une vidéo en vraie qualité.
   home.js pilote --p (part du buffer) et retire l'écran sur canplaythrough,
   avec un filet de 7 s : on ne bloque jamais la page. */
#boot { position: fixed; inset: 0; z-index: 400; background: var(--rouge);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s ease; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 24px; text-align: center; }
.boot-logo { position: relative; width: min(340px, 74vw); }
.boot-logo img { display: block; width: 100%; height: auto; }
/* deux copies du wordmark : une éteinte, une pleine que le clip-path découvre */
.boot-logo .bl-base { opacity: 0.26; }
.boot-logo .bl-fill { position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0);
  transition: clip-path 0.25s linear; }
.boot-sub { margin: 0; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
html.booting, html.booting body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #boot { display: none; } }

/* ---------- Conseils ----------
   La carte ENTIÈRE est le lien, comme dans le catalogue : un bouton « Lire » de
   plus répéterait la cible et pèserait plus que le titre. */
.conseils-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px); margin-top: var(--s1); }
.conseil { display: block; border-top: 2px solid var(--rouge); padding-top: 15px;
  color: inherit; text-decoration: none; }
a.conseil { transition: border-color 0.18s ease-out, transform 0.18s ease-out; }
a.conseil:hover { border-top-color: var(--rouge-deep); transform: translateY(-2px); }
a.conseil:hover h3 { color: var(--rouge-deep); }
a.conseil:focus-visible { outline: 2px solid var(--rouge); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { a.conseil { transition: none; }
  a.conseil:hover { transform: none; } }
.conseil-tag { display: inline-block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.conseil h3 { font-size: 1.14rem; margin: 8px 0; transition: color 0.18s ease-out; }
.conseil p { color: var(--ink-soft); font-size: 0.95rem; }
.conseil-photo { display: block; margin: 0 0 12px; border-radius: var(--radius);
  overflow: hidden; background: var(--paper-2); }
.conseil-photo img { display: block; width: 100%; aspect-ratio: 3 / 2;
  object-fit: cover; }
.conseil-plus { display: inline-block; margin-top: 10px; font-size: 0.88rem;
  color: var(--rouge); }
a.conseil:hover .conseil-plus { color: var(--rouge-deep); text-decoration: underline; }
.conseils-pied { margin-top: clamp(22px, 3vw, 34px); }
@media (max-width: 900px) { .conseils-grid { grid-template-columns: 1fr; } }

/* Un lien de suite, sobre : « Tous nos conseils », « Retour à l'accueil ». */
.lien-suite { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--rouge); text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 2px; }
.lien-suite:hover { color: var(--rouge-deep); }

/* ---------- Actualités ----------
   La section n'existe que s'il y a une actualité publiée : une rubrique vide est
   pire que pas de rubrique. */
.actus { background: var(--paper-2); }
.actus-tete { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; }
.actus-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 34px); margin-top: var(--s1); }
.actu { display: block; color: inherit; text-decoration: none;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; transition: border-color 0.18s ease-out, transform 0.18s ease-out; }
.actu:hover { border-color: var(--rouge); transform: translateY(-2px); }
.actu:focus-visible { outline: 2px solid var(--rouge); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .actu { transition: none; }
  .actu:hover { transform: none; } }
.actu-photo { display: block; background: var(--paper-2); }
.actu-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.actu-dire { display: block; padding: 16px 18px 20px; }
.actu-date { display: block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--ink-soft); }
.actu-dire b { display: block; margin: 6px 0 8px; font-family: var(--display);
  font-weight: 400; font-size: 1.08rem; line-height: 1.3; }
.actu-chapo { display: block; color: var(--ink-soft); font-size: 0.93rem; }
@media (max-width: 900px) { .actus-grid { grid-template-columns: 1fr; } }

/* ---------- Pages de contenu : liste et article ---------- */
/* La barre de menu est fixe : sur une page sans hero, il faut lui laisser sa
   hauteur, sinon le fil d'Ariane passe dessous. */
.page-tete { padding-top: clamp(104px, 14vh, 150px); padding-bottom: 0; }
.miettes { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em;
  color: var(--ink-soft); margin-bottom: 18px; }
.miettes a { color: var(--ink-soft); }
.miettes a:hover { color: var(--rouge); }
.miettes span[aria-hidden] { padding: 0 4px; opacity: 0.6; }
.liste-contenus { padding-top: clamp(28px, 4vh, 48px); }
.etat-vide { max-width: 60ch; color: var(--ink-soft); font-style: italic; }
.page-retour { margin-top: clamp(34px, 5vw, 60px); }

.article { padding-top: clamp(104px, 14vh, 150px); }
.article-wrap { max-width: 820px; }
.article-tete h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12;
  margin: 6px 0 14px; }
.article-travail { margin: 22px 0 0; }
.article-photo { margin: clamp(24px, 4vw, 40px) 0 0; }
.article-photo img { display: block; width: 100%; border-radius: var(--radius); }
.article-photo figcaption, .article-galerie figcaption { margin-top: 8px;
  font-size: 0.88rem; font-style: italic; color: var(--ink-soft); }
/* La galerie sous le texte : deux colonnes, une photo seule prend toute la largeur. */
.article-galerie { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.5vw, 26px); margin-top: clamp(26px, 4vw, 42px); }
.article-galerie figure { margin: 0; }
.article-galerie figure:only-child { grid-column: 1 / -1; }
.article-galerie img { display: block; width: 100%; border-radius: var(--radius); }
@media (max-width: 640px) { .article-galerie { grid-template-columns: 1fr; } }
.article-corps { margin-top: clamp(26px, 4vw, 42px); }
.article-corps h2 { font-size: clamp(1.24rem, 2.2vw, 1.55rem); line-height: 1.25;
  margin: clamp(30px, 4vw, 46px) 0 12px; }
.article-corps p { max-width: 68ch; margin: 0 0 16px; }
.article-corps ul { max-width: 68ch; margin: 0 0 18px; padding-left: 20px; }
.article-corps li { margin-bottom: 9px; }
.article-corps blockquote { max-width: 62ch; margin: 26px 0; padding-left: 20px;
  border-left: 2px solid var(--rouge); font-family: var(--accent);
  font-style: italic; font-size: 1.16rem; color: var(--ink); }
.article-corps b { font-weight: 600; }
.article-corps a { color: var(--rouge); }
.article-corps .a-completer { margin-top: 26px; }
.article-pied { margin-top: clamp(34px, 5vw, 56px); padding: clamp(20px, 3vw, 30px);
  background: var(--paper-2); border-radius: var(--radius); }
.article-pied p { max-width: 62ch; margin: 0 0 16px; }
.article-voisins { margin-top: clamp(44px, 6vw, 76px);
  border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 36px); }
.article-voisins h2 { font-size: 1.3rem; margin: 0; }
.article-voisins .conseils-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .article-voisins .conseils-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { background: var(--paper-2); }
.faq-liste { max-width: 900px; margin-top: var(--s1); }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { position: relative; cursor: pointer; list-style: none;
  padding: 18px 46px 18px 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem); line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--rouge-deep); }
.qa summary:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
/* Le chevron pivote pour dire l'état : c'est de la motion utile, 200 ms. */
.qa summary::after { content: ""; position: absolute; right: 10px; top: 50%;
  width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--rouge); border-bottom: 2px solid var(--rouge);
  transform: rotate(45deg); transition: transform 0.2s ease-out; }
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } }
.qa-corps { padding: 0 46px 20px 0; }
.qa-corps p { max-width: 70ch; margin: 0 0 10px; color: var(--ink-soft); font-size: 0.97rem; }
.qa-corps p:last-child { margin-bottom: 0; }
.qa-lien { display: inline-block; margin-top: 4px; font-size: 0.9rem; color: var(--rouge); }

/* ---------- Les mutuelles, dans le bloc accès (fond anthracite) ---------- */
.mutuelles { margin-top: clamp(30px, 4vw, 54px);
  border-top: 1px solid rgba(245, 243, 239, 0.16); padding-top: clamp(24px, 3vw, 36px); }
.mutuelles h3 { color: #F5F3EF; font-size: 1.2rem; }
.mutuelles > p { max-width: 70ch; margin: 0; color: rgba(245, 243, 239, 0.88); font-size: 0.97rem; }
.mutuelles b { color: #fff; font-weight: 600; }
.mutuelles-liste { list-style: none; margin: 20px 0 0; padding: 0; max-width: 940px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Une case vide qui le dit vaut mieux qu'un logo de mutuelle avec laquelle ils
   ne sont peut-être pas en tiers payant. */
.mutuelle-vide { display: grid; place-items: center; height: 62px;
  border: 1.5px dashed rgba(245, 243, 239, 0.3); border-radius: 8px;
  font-family: var(--mono); font-size: 0.68rem; color: rgba(245, 243, 239, 0.6); }
/* La liste réelle (4/09) : des noms en toutes lettres plutôt que des logos, parce
   que ce sont des organismes de tiers payant, pas des marques que l'œil connaît. */
.mutuelle-item { display: grid; place-items: center; height: 62px; padding: 0 10px;
  border: 1px solid rgba(245, 243, 239, 0.28); border-radius: 8px; text-align: center;
  background: rgba(245, 243, 239, 0.06);
  font-family: var(--display); font-size: 1.02rem; color: #F5F3EF; }
.mutuelles-note { max-width: 70ch; margin: 16px 0 0;
  color: rgba(245, 243, 239, 0.72); font-size: 0.9rem; }
.mutuelles .a-completer { margin-top: 16px; color: rgba(245, 243, 239, 0.72);
  border-left-color: rgba(245, 243, 239, 0.3); }
@media (max-width: 760px) { .mutuelles-liste { grid-template-columns: repeat(2, 1fr); } }

/* ---------- L'atelier : la photo qui manque ---------- */
.atelier-visuels { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 30px); }
@media (max-width: 700px) { .atelier-visuels { grid-template-columns: 1fr; } }
.photo-attente-cadre { display: grid; place-items: center; gap: 8px;
  min-height: 152px; padding: 18px;
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.45); color: var(--ink-soft); text-align: center; }
.photo-attente-cadre svg { width: 30px; height: 30px; }
.photo-attente-cadre p { margin: 0; font-size: 0.9rem; font-style: italic; }
/* La vidéo de l'atelier occupe le cadre laissé libre par l'ancien emplacement photo. */
.atelier-video { position: relative; }
.atelier-video video { width: 100%; height: auto; display: block;
  /* le ratio est posé d'avance : sans lui, un <video> sans poster encore chargé
     prend 300x150 et la colonne saute au moment de l'affichage */
  aspect-ratio: 900 / 676; object-fit: cover;
  border-radius: var(--radius); background: #d8d6d1; cursor: pointer; }