/* =====================================================
   COMPRENDRE.CSS — OLFACT (/comprendre-le-parfum)
   Les six sections éducatives qui vivaient sur l'accueil : histoire,
   pyramide, familles, concentrations, gammes, FAQ. Déplacées telles quelles
   pour que l'accueil se consacre au diagnostic — la mise en forme d'origine
   est conservée, seule la page d'arrivée change.
   Header / footer / tokens : voir layout.css (chargé APRÈS ce fichier).
   ===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Cormorant Upright", serif;
  background: var(--cream);
  color: var(--ink);
  counter-reset: sec;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: "Cormorant Upright", serif; font-weight: 500; }

::selection { background: rgba(135, 104, 48, 0.18); }

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Ancres de section : compense le header fixe (~76px). */
.cp section[id] { scroll-margin-top: 92px; }

/* =====================================================
   INTRODUCTION DE PAGE
   ===================================================== */
.cp-intro {
  padding: calc(74px + 96px) max(40px, calc((100% - 1200px) / 2)) 80px;
  text-align: center;
}
.cp-intro__over {
  font-family: "DM Sans", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 22px;
}
.cp-intro__title {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.05;
  color: var(--ink);
}
.cp-intro__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold-text);
}
.cp-intro__lead {
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(var(--ink-rgb), 0.78);
  max-width: 60ch;
  margin: 26px auto 0;
}

/* =====================================================
   GABARIT DES SECTIONS
   Fond crème unifié, rythme par numéro d'index. Le filet à losange vient de
   la classe partagée `.filet` (public/layout.css), posée sur chacune des six
   sections ; il ne reste ici que le compteur de sections et le rythme
   vertical.
   ===================================================== */
.second-section,
.third-section,
.fourth-section,
.fifth-section,
.sixth-section,
.faq-section {
  position: relative;
  counter-increment: sec;
  padding-block: 130px;
  padding-inline: max(40px, calc((100% - 1200px) / 2));
}

/* =====================================================
   PRIMITIVES ÉDITORIALES (kicker, titres, leads, liens)
   ===================================================== */
.kicker {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 20px;
}
.kicker::before {
  content: counter(sec, decimal-leading-zero);
  margin-right: 0.85em;
  padding-right: 0.85em;
  border-right: 1px solid rgba(135, 104, 48, 0.4);
  font-weight: 600;
}

.section-head { max-width: 720px; margin-bottom: 70px; }
.section-head h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  color: var(--ink);
}
.section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-lead {
  font-family: "DM Sans", sans-serif;
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(var(--ink-rgb), 0.74);
  max-width: 58ch;
  margin-top: 22px;
}
.section-head--center .section-lead { margin-left: auto; margin-right: auto; }

/* Lien fléché réutilisable */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--gold-deep);
  transition: color 0.25s, gap 0.25s;
}
.link-arrow span { transition: transform 0.25s; }
.link-arrow:hover { color: var(--gold-text); gap: 18px; }
.link-arrow:hover span { transform: translateX(4px); }

/* Repli de section — mobile uniquement.
   Sur desktop il ne se passe rien : le `<details>` reste `open` et son
   `summary` est masqué. Sous 900 px, script.js referme les plis et le résumé
   devient le bouton d'un accordéon : la section se réduit à son titre et son
   chapô. Dans les deux cas le contenu reste dans le DOM — c'est de la mise en
   forme, jamais de la troncature : le texte long est ce qui fait vivre cette
   page dans la recherche. */
.sec-fold__sum { display: none; }

/* Boutons éditoriaux réutilisables */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 34px;
  border-radius: 2px;
  text-decoration: none;
  transition: 0.25s ease;
}
.btn--solid { background-color: var(--plum); color: #fff; border: 1px solid var(--plum); }
.btn--solid:hover { background-color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }

/* =====================================================
   01 — HISTOIRE (split éditorial + timeline + galerie)
   ===================================================== */
.second-section {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 92px;
  align-items: center;
}
.histoire__text { max-width: 560px; }
.histoire__text h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.3rem);
  line-height: 1.08;
  color: var(--ink);
}

/* Timeline verticale (3 jalons) */
.timeline {
  list-style: none;
  margin: 44px 0 8px;
  border-left: 1px solid var(--line);
}
.timeline__item { position: relative; padding: 0 0 30px 30px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--cream);
}
.timeline__era {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 7px;
}
.timeline__era sup { font-size: 0.62em; }
.timeline__item h3 {
  font-size: 1.5rem;
  color: var(--plum);
  margin-bottom: 7px;
}
.timeline__item p {
  font-family: "DM Sans", sans-serif;
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.72;
  color: rgba(var(--ink-rgb), 0.72);
}
.histoire__text .link-arrow { margin-top: 38px; }

/* Galerie asymétrique */
.histoire__gallery {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  aspect-ratio: 1 / 1.04;
}
.histoire__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 22px 48px -22px rgba(var(--ink-rgb), 0.4);
}
.histoire__gallery .g-main { grid-row: span 2; }

/* =====================================================
   02 — PYRAMIDE OLFACTIVE
   ===================================================== */
.pyramide {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
}

.pyramide__chart svg { width: 100%; height: auto; overflow: visible; }
.pyr-band {
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: filter 0.3s ease, transform 0.3s ease;
  transform-origin: center;
}
/* Diagramme décoratif : couleurs FIXES (contraste calé palier↔label), donc
   indépendantes du thème — sinon en sombre le palier Fond vire au blanc. */
.pyr-band--tete { fill: #d8cbe1; }
.pyr-band--coeur { fill: var(--midplum); }
.pyr-band--fond { fill: #2f1847; }
.pyramide__chart:hover .pyr-band { filter: saturate(1.05); }
.pyr-label {
  font-family: "Cormorant Upright", serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 2px;
  text-anchor: middle;
  fill: #2f1847; /* label « Tête » : foncé, lisible sur le palier clair (2 thèmes) */
}
.pyr-label--light { fill: #f4ecdb; }

/* Notes décrites, calées sur les 3 étages */
.pyramide__notes { list-style: none; }
.note {
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.note:first-child { border-top: none; padding-top: 0; }
.note:last-child { padding-bottom: 0; }
.note__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.note__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
}
.note--tete .note__dot { background: #d8cbe1; }
.note--coeur .note__dot { background: var(--midplum); }
.note--fond .note__dot { background: var(--ink); }
.note__head h3 { font-size: 1.55rem; color: var(--plum); }
.note__dur {
  margin-left: auto;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  white-space: nowrap;
}
.note p {
  font-family: "DM Sans", sans-serif;
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(var(--ink-rgb), 0.74);
}

/* Facteurs influençant la tenue */
.facteurs {
  max-width: 880px;
  margin: 86px auto 0;
  text-align: center;
}
.facteurs__intro {
  font-family: "DM Sans", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 26px;
}
.facteurs__grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.facteurs__grid li {
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--plum);
  padding: 12px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.facteurs__note {
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(var(--ink-rgb), 0.68);
  margin-top: 26px;
}

/* =====================================================
   03 — FAMILLES OLFACTIVES (grille + zoom au survol)
   ===================================================== */
.familles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 42px;
}
.famille {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s var(--ease-olfact);
}
.famille__media {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 18px 40px -16px rgba(var(--ink-rgb), 0.22);
}
.famille__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease-olfact);
}
.famille:hover { transform: translateY(-6px); }
.famille:hover .famille__media img { transform: scale(1.06); }
.famille h3 {
  margin-top: 22px;
  font-size: 1.45rem;
  color: var(--ink);
  display: inline-block;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--gold-deep), var(--gold-deep));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease;
}
.famille:hover h3 { background-size: 100% 1px; }
.famille p {
  margin-top: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  color: #6a5c74;
  line-height: 1.6;
}

/* =====================================================
   04 — CONCENTRATIONS (comparatif + jauge d'intensité)
   ===================================================== */
.fifth-section .section-head { margin-bottom: 30px; }

.conc-scale {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto 56px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}
.conc-scale__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(135,104,48,0.25), var(--gold-deep));
}

.conc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.conc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 34px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.conc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -26px rgba(var(--ink-rgb), 0.34);
}
.conc-card--peak { border-color: rgba(135, 104, 48, 0.5); }
.conc-card--peak::after {
  content: "Le plus pur";
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.conc-meter { display: inline-flex; gap: 6px; margin-bottom: 26px; }
.conc-meter i {
  width: 28px;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--ink-rgb), 0.14);
}
.conc-meter i.on {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

.conc-card h3 { font-size: 1.85rem; color: var(--ink); margin-bottom: 12px; }
.conc-card > p {
  font-family: "DM Sans", sans-serif;
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(var(--ink-rgb), 0.74);
  margin-bottom: 26px;
}
.conc-meta {
  display: flex;
  gap: 28px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.conc-meta dt {
  font-family: "DM Sans", sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 5px;
}
.conc-meta dd {
  font-family: "Cormorant Upright", serif;
  font-size: 1.3rem;
  color: var(--plum);
}

/* =====================================================
   05 — TYPES DE PARFUMS (index éditorial)
   ===================================================== */
.types-list { list-style: none; }
.type-row {
  display: grid;
  grid-template-columns: 80px 230px 1fr;
  gap: 40px;
  align-items: start;
  padding: 38px 24px;
  border-top: 1px solid var(--line);
  border-radius: 4px;
  transition: background 0.3s ease;
}
.type-row:last-child { border-bottom: 1px solid var(--line); }
.type-row:hover { background: var(--paper); }
.type-row__num {
  font-family: "Cormorant Upright", serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-text);
}
.type-row__head h3 { font-size: 1.85rem; color: var(--ink); margin-bottom: 8px; }
.type-row__tag {
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.type-row__points {
  list-style: none;
  font-family: "DM Sans", sans-serif;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(var(--ink-rgb), 0.76);
}
.type-row__points li { position: relative; padding-left: 22px; }
.type-row__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 10px;
  height: 1px;
  background: var(--gold-deep);
}

/* =====================================================
   06 — FAQ
   ===================================================== */
.faq-section { padding-inline: max(40px, calc((100% - 860px) / 2)); }
.faq-container { max-width: 860px; margin: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-question {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 28px 48px 28px 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: "Cormorant Upright", serif;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.25s;
}
.faq-question:hover { color: var(--plum); }
.faq-question::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-text);
  font-size: 1.6rem;
  transition: transform 0.3s;
}
.faq-question[aria-expanded="true"]::after { content: "\2013"; }
.faq-reponse { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-reponse p {
  padding: 0 0 30px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(var(--ink-rgb), 0.76);
  max-width: 70ch;
}

/* =====================================================
   CTA FINAL (retour au diagnostic)
   ===================================================== */
.cp-cta {
  padding: 88px 40px 100px;
  background: var(--cream);
  text-align: center;
}
.cp-cta__kicker {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.cp-cta__title {
  font-family: "Cormorant Upright", serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--ink);
  margin: 8px 0 16px;
}
.cp-cta__lead {
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.82;
  max-width: 48ch;
  margin: 0 auto 30px;
}
.cp-cta__hint {
  margin-top: 16px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  color: rgba(var(--ink-rgb), 0.68);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 980px) {
  .second-section,
  .pyramide { grid-template-columns: 1fr; gap: 56px; }
  .histoire__text { max-width: none; }
  .histoire__gallery { aspect-ratio: 16 / 10; max-width: 620px; }
  .conc-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .cp-intro { padding: calc(74px + 56px) 24px 56px; }

  .second-section,
  .third-section,
  .fourth-section,
  .fifth-section,
  .sixth-section,
  .faq-section { padding-block: 90px; }

  .section-head { margin-bottom: 52px; }

  /* Les neuf familles passent en rangée qui défile. Empilées en colonne, elles
     coûtaient à elles seules ~3 850 px pour environ 90 mots. Le défilement
     horizontal ramène la section à ~420 px sans retirer une seule carte : les
     neuf liens restent dans le DOM, donc le maillage interne vers
     /famille/[slug] est intact. Défilement natif : opérant sans JS, au doigt
     comme au clavier, et sans rotation automatique.
     Pas de `tabindex` : la rangée ne contient que des liens, déjà
     focalisables — le navigateur y fait défiler le focus tout seul. En
     ajouter un créerait un arrêt de tabulation inutile. */
  .familles-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Moins de 100 % : la carte suivante est visible en amorce, ce qui montre
       que la rangée continue. C'est ce débord qui tient lieu d'affordance.
       Le plafond en pixels n'est pas décoratif : sans lui, à 900 px de large
       une carte ferait 650 px et la rangée n'aurait plus de sens. */
    grid-auto-columns: min(74%, 320px);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Le rail déborde des marges de section : la carte suivante reste amorcée
       au bord de l'écran, faute de quoi un carrousel tactile passe inaperçu.
       Le padding rend au contenu ce que la marge négative lui retire, donc
       rien ne dépasse à l'arrivée.
       40 px = le `padding-inline` de la section à cette largeur. */
    margin-inline: -40px;
    padding-inline: 40px;
    /* Laisse respirer l'ombre des vignettes et le léger soulèvement au
       survol, que `overflow-x` couperait sinon. */
    padding-block: 6px 10px;
  }
  .familles-grid::-webkit-scrollbar { display: none; }
  .famille { scroll-snap-align: start; min-width: 0; }

  /* Le bouton du repli. Même langage que l'accordéon de la FAQ plus bas
     (« + » doré qui devient « – ») pour que les deux se lisent pareil. */
  .sec-fold__sum {
    display: block;
    position: relative;
    /* Le texte seul ferait 24 px de haut : le padding porte la cible tactile
       à ~44 px, au-dessus du minimum de 40 px du projet. */
    padding: 10px 44px 10px 0;
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    /* Retire le triangle natif — `list-style` pour Chrome et Firefox, le
       pseudo-élément WebKit pour Safari. */
    list-style: none;
  }
  .sec-fold__sum::-webkit-details-marker { display: none; }
  .sec-fold__sum::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold-text);
    font-family: "Cormorant Upright", serif;
    font-size: 1.6rem;
  }
  .sec-fold[open] > .sec-fold__sum::after { content: "\2013"; }
  /* L'écart n'existe que déplié : refermé, le pli ne doit pas laisser un
     blanc au bas de la section. */
  .sec-fold[open] > .sec-fold__sum { margin-bottom: 44px; }

  .type-row {
    grid-template-columns: 56px 1fr;
    gap: 14px 26px;
    padding: 30px 14px;
  }
  .type-row__num { font-size: 2rem; }
  .type-row__points { grid-column: 1 / -1; }

  .cp-cta { padding-inline: 22px; }
}

@media (max-width: 560px) {
  .cp-intro { padding-inline: 22px; }

  .second-section,
  .third-section,
  .fourth-section,
  .fifth-section,
  .sixth-section,
  .faq-section { padding-inline: 22px; padding-block: 72px; }

  /* Écran plus étroit : la carte prend proportionnellement plus de place,
     sinon la vignette devient trop petite pour se lire. L'amorce de la
     suivante reste visible.
     Le `padding-inline` de section tombe à 22 px ici : le débord du rail doit
     suivre, sinon il ne rejoint plus le bord de l'écran. */
  .familles-grid {
    grid-auto-columns: min(80%, 300px);
    margin-inline: -22px;
    padding-inline: 22px;
  }
  .histoire__gallery { aspect-ratio: 4 / 3; }
  .conc-meta { flex-direction: column; gap: 14px; }
  .facteurs__grid { gap: 12px; }
  .type-row__head { grid-column: 2; }
}

/* =====================================================
   MOTION — révélations au scroll
   États masqués posés uniquement si .has-motion (motion.js, qui observe ces
   mêmes sélecteurs). Coupé si prefers-reduced-motion: reduce. On anime
   « translate » (et non « transform ») pour ne pas casser les survols.
   L'introduction n'est pas masquée : elle est le premier écran.
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {
  .has-motion .histoire__text,
  .has-motion .histoire__gallery,
  .has-motion .third-section .section-head,
  .has-motion .pyramide,
  .has-motion .facteurs,
  .has-motion .fourth-section .section-head,
  .has-motion .famille,
  .has-motion .fifth-section .section-head,
  .has-motion .conc-scale,
  .has-motion .conc-card,
  .has-motion .sixth-section .section-head,
  .has-motion .type-row,
  .has-motion .faq-section .section-head,
  .has-motion .faq-item {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 0.8s var(--ease-olfact),
                translate 0.8s var(--ease-olfact),
                transform 0.45s ease;
  }

  .has-motion .is-visible {
    opacity: 1 !important;
    translate: 0 !important;
  }
}

/* Les cartes familles ne sont plus masquées à l'entrée dès qu'elles passent en
   rangée qui défile : l'IntersectionObserver de motion.js ne se déclenche que
   sur le viewport, or les cartes 3 à 9 sont hors écran HORIZONTALEMENT. Elles
   resteraient à `opacity: 0` jusqu'au filet de sécurité de 2,5 s — soit, pour
   qui fait défiler la rangée aussitôt, des cartes vides. Le masquage saute
   donc sous 900 px ; la révélation de la section reste portée par son titre.
   Placé après le bloc ci-dessus : à spécificité égale, c'est la dernière
   règle qui l'emporte. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .has-motion .famille {
    opacity: 1;
    translate: none;
  }
}