/* ===========================================================================
   COMPOSANTS LABO DAYCO
   Navigation, héros, sections collantes, comparateurs, accordéons, galeries.
   Tout s'appuie sur les jetons de dayco.css : aucune couleur en dur ici.
   =========================================================================== */

/* ============================================================== EN-TÊTE === */

/* ⚠️ Le fond et le flou sont portés par un pseudo-élément, PAS par `.entete`.
   Un `backdrop-filter` (comme `filter`, `transform` ou `perspective`) fait de
   l'élément le BLOC CONTENEUR de ses descendants en `position: fixed`. Posé sur
   `.entete`, il enfermait le panneau de menu mobile dans les 68 px du bandeau :
   `inset: var(--header-h) 0 0 0` donnait alors une hauteur nulle, et le menu
   s'ouvrait dans le vide dès que la page avait défilé de 40 px. */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
}
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 13, 13, .94);
  border-bottom: 1px solid var(--or-10);
  transition: background var(--transition), border-color var(--transition);
}
.entete.est-defile::before {
  background: rgba(13, 13, 13, .82);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--or-18);
}
.entete__zone {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--or-texte);
  flex: 0 0 auto;
}
.logo svg, .logo img { height: 42px; width: auto; }
.logo__mot { line-height: 1; }

.nav { display: flex; align-items: center; gap: var(--e-6); }
.nav__lien {
  font-size: var(--t-petit);
  color: var(--creme);
  padding: 8px 0;
  position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--or-texte); }
.nav__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--or);
}

.nav__bouton-espace {
  border: 1px solid var(--or);
  color: var(--or-texte);
  border-radius: var(--r-xs);
  padding: 9px 20px;
  font-size: var(--t-mention);
  font-weight: 500;
  letter-spacing: .4px;
  transition: var(--transition);
  white-space: nowrap;
}
.nav__bouton-espace:hover { background: var(--or); color: var(--encre); }

/* ---------------------------------------------------------- Méga-menu --- */

.megamenu-hote { position: relative; }

.megamenu-declencheur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-petit);
  color: var(--creme);
  padding: 8px 0;
  transition: color var(--transition);
}
.megamenu-declencheur:hover,
.megamenu-declencheur[aria-expanded="true"] { color: var(--or-texte); }
.megamenu-declencheur svg {
  width: 12px; height: 12px;
  transition: transform var(--transition);
}
.megamenu-declencheur[aria-expanded="true"] svg { transform: rotate(180deg); }

.megamenu {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--encre-alt);
  border-bottom: 1px solid var(--or-18);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 999;
}
.megamenu.est-ouvert { opacity: 1; visibility: visible; transform: none; }

.megamenu__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr) .9fr;
  gap: var(--e-7);
  padding-block: var(--e-8);
}
.megamenu__famille-titre {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--or-texte);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--trait);
}
.megamenu__liste { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.megamenu__lien {
  display: block;
  font-size: var(--t-petit);
  color: var(--creme-doux);
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: var(--r-xs);
  transition: var(--transition);
}
.megamenu__lien:hover { color: var(--creme); background: var(--or-06); }
.megamenu__lien--parent { color: var(--creme); font-weight: 500; }

.megamenu__promo {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.megamenu__promo-titre { font-family: var(--serif); font-size: 1.1rem; }
.megamenu__promo-texte { font-size: var(--t-mention); color: var(--creme-doux); line-height: 1.7; }

/* ------------------------------------------------------ Menu mobile --- */

.bascule-menu {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  /* `position: relative` est indispensable : sans elle, `z-index` est ignoré
     et le bouton passe SOUS le panneau de menu ouvert, qui est positionné.
     Le menu devenait alors impossible à refermer. */
  position: relative;
  z-index: 1001;
}
.bascule-menu span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--creme);
  transition: var(--transition);
}
.bascule-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bascule-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .bascule-menu { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--encre);
    padding: var(--e-6) clamp(20px, 5vw, 40px) var(--e-10);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    visibility: hidden;
    z-index: 1000;
  }
  .nav.est-ouvert { transform: none; visibility: visible; }

  .nav__lien, .megamenu-declencheur {
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--trait);
    font-size: 1.05rem;
    justify-content: space-between;
    width: 100%;
  }
  .nav__bouton-espace { margin-top: var(--e-6); text-align: center; }

  /* Sur mobile le méga-menu devient un accordéon dans le flux : un panneau
     survolé n'a aucun sens au doigt. */
  .megamenu-hote { width: 100%; }
  .megamenu {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .megamenu.est-ouvert { display: block; }
  .megamenu__grille {
    grid-template-columns: 1fr;
    gap: var(--e-5);
    padding-block: var(--e-5);
  }
  .megamenu .zone { padding-inline: 0; }
  .megamenu__promo { display: none; }
}

/* ================================================================ HÉROS === */

/* Le héros n'est jamais animé à l'entrée : il porte le LCP. */

.heros {
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 120px));
  padding-bottom: clamp(56px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}

.heros__fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--t-mention);
  color: var(--creme-doux);
  margin-bottom: var(--e-6);
  list-style: none;
}
.sur-blanc .heros__fil, .sur-creme .heros__fil { color: var(--texte-doux); }
.heros__fil li { display: flex; align-items: center; gap: 8px; }
.heros__fil li + li::before { content: "/"; opacity: .45; }
.heros__fil a:hover { color: var(--or-texte); }
.heros__fil [aria-current] { color: var(--or-texte); }

.heros__titre { font-size: var(--t-h1); margin-bottom: var(--e-5); max-width: 16ch; }
.heros__titre--long { max-width: 20ch; }
.heros__chapo { font-size: var(--t-corps-l); line-height: 1.8; max-width: 56ch; color: var(--creme-doux); }
.sur-blanc .heros__chapo, .sur-creme .heros__chapo { color: var(--texte-doux); }

/* Positionnement : une phrase courte, en serif, sous le chapô. */
.heros__position {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--or-texte);
  margin-top: var(--e-6);
  padding-left: var(--e-5);
  border-left: 2px solid var(--or-32);
  max-width: 46ch;
}

.heros__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-6) var(--e-8);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--trait);
}
.sur-blanc .heros__reperes, .sur-creme .heros__reperes { border-top-color: var(--trait-clair); }
.repere__cle {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--or-texte);
  margin-bottom: 6px;
}
.repere__valeur { font-family: var(--serif); font-size: 1.05rem; }

/* Héros en duo : texte + visuel. */
.heros__duo {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.heros__visuel {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}
.heros__visuel img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .heros__duo { grid-template-columns: 1fr; }
  .heros__visuel { aspect-ratio: 3 / 2; }
}

/* ================================================ NAVIGATION DE PAGE === */

/* Barre d'ancres collante des pages longues. Elle se colle sous l'en-tête. */
.ancres {
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: rgba(13, 13, 13, .9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-block: 1px solid var(--trait);
}
.ancres__piste {
  display: flex;
  gap: var(--e-6);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.ancres__piste::-webkit-scrollbar { display: none; }
.ancres__lien {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 18px 0;
  font-size: var(--t-mention);
  letter-spacing: .4px;
  color: var(--creme-doux);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}
.ancres__lien:hover { color: var(--creme); }
.ancres__lien.est-actif { color: var(--or-texte); border-bottom-color: var(--or-texte); }

/* Sur mobile la piste doit pouvoir déborder de la zone sans casser la mise en
   page : elle reprend le padding de .zone en marge interne. */
@media (max-width: 760px) {
  .ancres .zone { padding-inline: 0; }
  .ancres__piste { padding-inline: 20px; gap: var(--e-5); }
}

/* =========================================== SECTIONS COLLANTES (STICKY) === */

/* Modèle A — visuel collant à gauche, contenu qui défile à droite.
   Le collant est posé sur un enfant direct de la grille, pas sur la grille
   elle-même : sur un élément de grille, `position: sticky` casse dans Safari
   si le parent n'a pas `align-items: start`. */
.collant {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.collant--inverse { grid-template-columns: 1.08fr .92fr; }
.collant--inverse .collant__ancre { order: 2; }

/* Hauteur de la barre d'ancres, quand la page en a une : le visuel collant doit
   venir se caler SOUS elle. La valeur ci-dessous n'est qu'un repli : le script
   mesure la barre au chargement et au redimensionnement, et écrase la variable.
   Une hauteur figée se serait décalée au moindre changement de police. */
:root { --h-ancres: 0px; }
body:has(.ancres) { --h-ancres: 62px; }

.collant__ancre {
  position: sticky;
  top: calc(var(--header-h) + var(--h-ancres) + var(--e-5));
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Un visuel collant occupe toute la hauteur utile de la fenêtre et se centre
   dedans : il reste ainsi au milieu de l'écran pendant tout le défilement du
   texte, quelle que soit la taille de l'écran. Un `top` fixe, lui, le plaçait
   trop haut sur un grand écran et trop bas sur un petit.

   Réservé aux sections marquées `collant--visuel` : sur une colonne de texte,
   une hauteur figée ferait déborder un propos un peu long hors de sa boîte. */
.collant--visuel .collant__ancre {
  top: calc(var(--header-h) + var(--h-ancres));
  height: calc(100dvh - var(--header-h) - var(--h-ancres));
  padding-block: var(--e-5);
}

/* Sans plafond, un visuel en 3/4 dépasse la fenêtre sur un écran bas et
   déborde du collant. `object-fit: cover` recadre alors au lieu d'étirer. */
.collant--visuel .collant__ancre > .collant__visuel,
.collant--visuel .collant__ancre > .pile-visuels {
  max-height: 100%;
}

.collant__panneaux { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 112px); }
.collant__panneau { scroll-margin-top: calc(var(--header-h) + 120px); }

/* Coller ne suffit pas : encore faut-il que ça dure. La course d'un élément
   collant vaut la hauteur de son conteneur moins la sienne. Avec des panneaux
   courts, la section faisait 812 px pour une ancre de 769 px : l'image restait
   immobile 43 px et défilait avec la page tout le reste du temps.

   On donne donc à chaque panneau la hauteur utile de la fenêtre. Le texte défile
   alors panneau par panneau pendant que l'image, elle, ne bouge plus : elle se
   contente de changer. La bande de bascule du script (les 20 % centraux de la
   fenêtre) tombe pile au milieu de chaque panneau.

   L'espacement passe à zéro : la hauteur du panneau fait déjà la respiration, et
   un intervalle en plus décalerait la bascule par rapport à la lecture. */
.collant--visuel .collant__panneaux { gap: 0; }
.collant--visuel .collant__panneau {
  min-height: calc(100dvh - var(--header-h) - var(--h-ancres));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.collant__panneau-num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--or-texte);
  display: block;
  margin-bottom: var(--e-3);
}
.collant__panneau h3 { font-size: var(--t-h3); margin-bottom: var(--e-4); }

.collant__visuel {
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border: 1px solid var(--trait);
}
.collant__visuel img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .collant, .collant--inverse { grid-template-columns: 1fr; gap: var(--e-7); }
  .collant--inverse .collant__ancre { order: 0; }
  /* Le collant n'a plus de sens en colonne unique : il resterait figé au-dessus
     du contenu pendant tout le défilement. La hauteur de fenêtre et la marge
     interne tombent avec lui. */
  .collant__ancre,
  .collant--visuel .collant__ancre {
    position: static;
    height: auto;
    min-height: 0;
    padding-block: 0;
  }
  .collant__visuel { aspect-ratio: 16 / 10; }
  .collant__panneaux { gap: var(--e-8); }
  /* En colonne unique rien n'est épinglé : le rythme plein écran n'aurait plus
     d'objet et n'ajouterait que du vide entre les paragraphes. */
  .collant--visuel .collant__panneaux { gap: var(--e-8); }
  .collant--visuel .collant__panneau { min-height: 0; display: block; }
}

/* Modèle B — le visuel change au fil du défilement des panneaux.
   Le format par défaut est vertical ; `--ratio-pile` permet à une section de
   suivre le format réel de ses images plutôt que de les rogner. Une macro
   d'armature de bridge, par exemple, est large : la rogner en portrait en
   couperait les deux extrémités. */
.pile-visuels { position: relative; width: 100%; aspect-ratio: var(--ratio-pile, 3 / 4); }
.pile-visuels__item {
  position: absolute;
  inset: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.pile-visuels__item.est-actif { opacity: 1; transform: none; }
.pile-visuels__item img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .pile-visuels { aspect-ratio: var(--ratio-pile-mobile, 16 / 10); }
  /* Sans collant, seule la première image reste : les autres accompagnent
     leur propre panneau (voir .panneau__visuel-mobile). */
}

.panneau__visuel-mobile { display: none; }
@media (max-width: 900px) {
  .panneau__visuel-mobile {
    display: block;
    border-radius: var(--r-m);
    overflow: hidden;
    aspect-ratio: var(--ratio-pile-mobile, 16 / 10);
    margin-bottom: var(--e-5);
    background: var(--surface);
  }
  .panneau__visuel-mobile img { width: 100%; height: 100%; object-fit: cover; }
  .pile-visuels { display: none; }
}

/* ======================================================== COMPARATEUR === */

/* Tableau de matériaux. Il déborde horizontalement sur petit écran plutôt que
   de compresser les colonnes jusqu'à l'illisible. */
.tableau-hote {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  -webkit-overflow-scrolling: touch;
}
.sur-blanc .tableau-hote, .sur-creme .tableau-hote { border-color: var(--trait-clair); }

.tableau {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--t-petit);
}
.tableau caption {
  text-align: left;
  padding: var(--e-5) var(--e-5) 0;
  font-size: var(--t-mention);
  color: var(--creme-doux);
}
.sur-blanc .tableau caption, .sur-creme .tableau caption { color: var(--texte-doux); }
.tableau th, .tableau td {
  padding: var(--e-4) var(--e-5);
  text-align: left;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.sur-blanc .tableau th, .sur-blanc .tableau td,
.sur-creme .tableau th, .sur-creme .tableau td { border-bottom-color: var(--trait-clair); }
.tableau thead th {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--or-texte);
  white-space: nowrap;
}
.tableau tbody th {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--creme);
  white-space: nowrap;
}
.sur-blanc .tableau tbody th, .sur-creme .tableau tbody th { color: var(--texte-sombre); }
.tableau td { color: var(--creme-doux); }
.sur-blanc .tableau td, .sur-creme .tableau td { color: var(--texte-doux); }
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--or-06); }

.tableau-note {
  font-size: var(--t-mention);
  color: var(--creme-doux);
  margin-top: var(--e-3);
}
.sur-blanc .tableau-note, .sur-creme .tableau-note { color: var(--texte-doux); }

/* ========================================================= ACCORDÉON === */

.accordeon { border-top: 1px solid var(--trait); }
.sur-blanc .accordeon, .sur-creme .accordeon { border-top-color: var(--trait-clair); }

.accordeon__item { border-bottom: 1px solid var(--trait); }
.sur-blanc .accordeon__item, .sur-creme .accordeon__item { border-bottom-color: var(--trait-clair); }

.accordeon__bouton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-5) 0;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: inherit;
  transition: color var(--transition);
}
.accordeon__bouton:hover { color: var(--or-texte); }
.accordeon__signe {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  position: relative;
  margin-top: 4px;
}
.accordeon__signe::before, .accordeon__signe::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--or-texte);
  transition: transform var(--transition);
}
.accordeon__signe::after { transform: rotate(90deg); }
.accordeon__bouton[aria-expanded="true"] .accordeon__signe::after { transform: rotate(0); }

.accordeon__panneau {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1);
}
.accordeon__panneau.est-ouvert { grid-template-rows: 1fr; }
.accordeon__contenu { overflow: hidden; }
.accordeon__contenu > * { padding-bottom: var(--e-5); }
.accordeon__contenu p {
  font-size: var(--t-petit);
  line-height: 1.85;
  color: var(--creme-doux);
  max-width: var(--max-texte);
}
.sur-blanc .accordeon__contenu p, .sur-creme .accordeon__contenu p { color: var(--texte-doux); }

/* ====================================================== LISTE ORNÉE === */

.liste-cochee { list-style: none; display: flex; flex-direction: column; gap: var(--e-4); }
.liste-cochee li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--t-petit);
  line-height: 1.7;
  color: var(--creme-doux);
}
.sur-blanc .liste-cochee li, .sur-creme .liste-cochee li { color: var(--texte-doux); }
.liste-cochee svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--or-texte); margin-top: 3px; }

/* Liste en colonnes minces, pour les indications. */
.liste-indications { list-style: none; display: grid; gap: 0; }
.liste-indications li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--e-5);
  padding: var(--e-5) 0;
  border-bottom: 1px solid var(--trait);
  align-items: baseline;
}
.sur-blanc .liste-indications li, .sur-creme .liste-indications li { border-bottom-color: var(--trait-clair); }
.liste-indications li:first-child { border-top: 1px solid var(--trait); }
.sur-blanc .liste-indications li:first-child, .sur-creme .liste-indications li:first-child { border-top-color: var(--trait-clair); }
.liste-indications__cle { font-family: var(--serif); color: var(--or-texte); font-size: .95rem; }
.liste-indications__titre { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 6px; display: block; }
.liste-indications__texte { font-size: var(--t-petit); line-height: 1.75; color: var(--creme-doux); }
.sur-blanc .liste-indications__texte, .sur-creme .liste-indications__texte { color: var(--texte-doux); }

/* Variante « intitulé large » : pour les listes dont la colonne de gauche
   porte un libellé et non un numéro. Déclarée en classe, PAS en style en ligne :
   un style en ligne l'emporterait sur le repli mobile ci-dessous. */
.liste-indications--intitules li { grid-template-columns: minmax(0, 15rem) 1fr; }

@media (max-width: 560px) {
  .liste-indications li,
  .liste-indications--intitules li { grid-template-columns: 1fr; gap: var(--e-2); }
}

/* ================================================== CAS D'UTILISATION === */

.cas-usage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  overflow: hidden;
}
.sur-blanc .cas-usage, .sur-creme .cas-usage { background: var(--trait-clair); border-color: var(--trait-clair); }

.cas-usage__item {
  background: var(--encre);
  padding: var(--e-7) var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.sur-blanc .cas-usage__item, .sur-creme .cas-usage__item { background: var(--blanc); }

.cas-usage__num {
  font-family: var(--serif);
  font-size: .9rem;
  letter-spacing: 2px;
  color: var(--or-texte);
}
.cas-usage__titre { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.cas-usage__ligne { display: flex; flex-direction: column; gap: 4px; }
.cas-usage__cle {
  font-size: var(--t-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--or-texte);
}
.cas-usage__val { font-size: var(--t-petit); line-height: 1.7; color: var(--creme-doux); }
.sur-blanc .cas-usage__val, .sur-creme .cas-usage__val { color: var(--texte-doux); }

@media (max-width: 900px) { .cas-usage { grid-template-columns: 1fr; } }

/* ========================================================== GALERIE === */

.galerie { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e-4); }
.galerie__item {
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--surface);
  position: relative;
}
.galerie__item img { width: 100%; height: 100%; object-fit: cover; }
.galerie__item--large { grid-column: span 8; aspect-ratio: 16 / 10; }
.galerie__item--petit { grid-column: span 4; aspect-ratio: 4 / 5; }
.galerie__item--tiers { grid-column: span 4; aspect-ratio: 1; }
.galerie__legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e-5);
  background: linear-gradient(transparent, rgba(13, 13, 13, .88));
  font-size: var(--t-mention);
  color: var(--creme);
}
@media (max-width: 760px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie__item--large, .galerie__item--petit, .galerie__item--tiers {
    grid-column: span 2; aspect-ratio: 16 / 10;
  }
}

/* Emplacement d'image en attente : jamais une photo d'illustration présentée
   comme une photo du laboratoire. */
/* ⚠️ `width: 100%` est indispensable, pas décoratif. Avec un `aspect-ratio` et
   un `min-height`, la hauteur devient définie et le navigateur en DÉDUIT la
   largeur : 180 px × 16/10 = 288 px, quelle que soit la place disponible. Sur
   mobile, l'emplacement débordait donc de son conteneur et de la page. Une
   largeur explicite rend l'inline size définie, et le ratio ne pilote plus que
   la hauteur. */
.emplacement-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  text-align: center;
  padding: var(--e-6);
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 180px;
  background:
    repeating-linear-gradient(-45deg,
      var(--or-06) 0 10px, transparent 10px 20px),
    var(--surface);
  border: 1px dashed var(--or-32);
  border-radius: var(--r-m);
  color: var(--creme-doux);
}
.sur-blanc .emplacement-photo, .sur-creme .emplacement-photo {
  background:
    repeating-linear-gradient(-45deg,
      var(--or-06) 0 10px, transparent 10px 20px),
    var(--surface-claire);
  color: var(--texte-doux);
}
.emplacement-photo__cle {
  font-size: var(--t-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--or-texte);
}
.emplacement-photo__texte { font-size: var(--t-mention); line-height: 1.6; max-width: 34ch; }

/* ======================================================= AVANT / APRÈS === */

.avant-apres {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface);
  touch-action: pan-y;
  user-select: none;
}
.avant-apres__couche { position: absolute; inset: 0; }
.avant-apres__couche img { width: 100%; height: 100%; object-fit: cover; }
.avant-apres__couche--apres { clip-path: inset(0 0 0 var(--position, 50%)); }
.avant-apres__poignee {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--position, 50%);
  width: 2px;
  background: var(--or);
  cursor: ew-resize;
}
.avant-apres__poignee::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: var(--ombre-or);
}
.avant-apres__etiquette {
  position: absolute;
  top: var(--e-4);
  padding: 4px 12px;
  border-radius: var(--r-xs);
  background: rgba(13, 13, 13, .75);
  font-size: var(--t-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--creme);
}
.avant-apres__etiquette--avant { left: var(--e-4); }
.avant-apres__etiquette--apres { right: var(--e-4); }
.avant-apres input[type="range"] {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  opacity: 0;
  height: 100%;
  cursor: ew-resize;
  margin: 0;
}

/* ======================================================== BANDE CTA === */

.appel {
  border: 1px solid var(--or-18);
  border-radius: var(--r-l);
  padding: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--or-10), transparent 62%),
    var(--surface);
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.sur-blanc .appel, .sur-creme .appel {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--or-10), transparent 62%),
    var(--surface-claire);
}
.appel__titre { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: var(--e-4); }
.appel__actions { display: flex; flex-direction: column; gap: var(--e-3); }

@media (max-width: 860px) {
  .appel { grid-template-columns: 1fr; }
}

/* ========================================================= FORMULAIRE === */

.formulaire { display: flex; flex-direction: column; gap: var(--e-5); }
.formulaire__rangee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ__etiquette {
  font-size: var(--t-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.sur-encre .champ__etiquette { color: var(--creme-doux); }
.champ__aide { font-size: var(--t-mention); color: var(--texte-doux); }
.champ input, .champ textarea, .champ select {
  padding: 14px 18px;
  border-radius: var(--r-s);
  border: 1px solid var(--trait-clair);
  background: var(--surface-claire);
  color: var(--texte-sombre);
  font-size: .95rem;
  transition: var(--transition);
  width: 100%;
}
.sur-encre .champ input, .sur-encre .champ textarea, .sur-encre .champ select {
  background: var(--surface);
  border-color: var(--trait);
  color: var(--creme);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-color: var(--or-texte);
  box-shadow: 0 0 0 3px var(--or-10);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ[data-erreur="oui"] input, .champ[data-erreur="oui"] textarea { border-color: #d8563f; }
.champ__erreur { font-size: var(--t-mention); color: #d8563f; }

.formulaire__succes {
  display: none;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--or-32);
  border-radius: var(--r-s);
  background: var(--or-06);
  color: var(--or-texte);
  font-size: var(--t-petit);
}
.formulaire__succes.est-visible { display: block; }

@media (max-width: 640px) { .formulaire__rangee { grid-template-columns: 1fr; } }

/* ============================================================== FILTRES === */

.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.filtre {
  padding: 8px 18px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: var(--t-mention);
  color: var(--creme-doux);
  transition: var(--transition);
}
.sur-blanc .filtre, .sur-creme .filtre { border-color: var(--trait-clair); color: var(--texte-doux); }
.filtre:hover { border-color: var(--or-32); color: var(--or-texte); }
.filtre[aria-pressed="true"] { background: var(--or); border-color: var(--or-texte); color: var(--encre); font-weight: 500; }

/* ================================================================ PIED === */

.pied { background: var(--encre); border-top: 1px solid var(--trait); padding-block: var(--e-10) var(--e-6); }
.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--e-7);
  padding-bottom: var(--e-8);
  border-bottom: 1px solid var(--trait);
}
.pied__titre {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--or-texte);
  margin-bottom: var(--e-5);
}
.pied__liste { list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.pied__liste a, .pied__liste span { font-size: var(--t-petit); color: var(--creme-doux); transition: color var(--transition); }
.pied__liste a:hover { color: var(--or-texte); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-4);
  padding-top: var(--e-6);
  font-size: var(--t-mention);
  color: var(--creme-doux);
}
.pied__bas a:hover { color: var(--or-texte); }

@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; gap: var(--e-6); } }