/* =========================================================================
   Teaser Cadences - feuille de style
   Charte : design-system/tokens.css (copié dans assets/css/tokens.css).
   Motifs repris de la plaquette 13i : masque X, chevron pointillé en dégradé
   de points, découpe diagonale, bandeau d'annotation marine à duo de carrés,
   puces chevron, fils pointillés sur les chiffres.
   Autonome file:// : aucune ressource distante.
   ========================================================================= */

/* ---------- 1. Polices (auto-hébergées, Poppins) ---------- */

@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Échelle éditoriale locale ----------
   Les tokens --t-question (5vw) et --t-reponse (6vw) sont calibrés pour un
   titre plein écran ; en acte à deux colonnes ils débordent. Échelle locale
   plus serrée, mêmes rapports (question < réponse), à remonter au DS si
   validée. */

:root {
  --te-hero: clamp(2.1rem, 3.9vw, 5.4rem);
  --te-question: clamp(1.7rem, 3.5vw, 4.6rem);
  --te-reponse: clamp(2rem, 4.2vw, 5.6rem);
  --te-chiffre: clamp(2.4rem, 5.8vw, 7rem);
  --te-corps: clamp(0.95rem, 1.05vw, 1.35rem);
  --te-petit: clamp(0.78rem, 0.82vw, 1.02rem);

  --gouttiere: clamp(1.4rem, 4.4vw, 5.5rem);
  --scene-h: 100vh;
}

@supports (height: 100svh) {
  :root { --scene-h: 100svh; }
}

/* ---------- 3. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--c-blanc);
  color: var(--c-texte);
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: var(--te-corps);
  line-height: 1.55;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
sup { font-size: 0.58em; vertical-align: super; line-height: 0; }
strong { font-weight: 500; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--c-magenta);
  outline-offset: 3px;
}

.lien-evitement {
  position: fixed;
  top: 0; left: 50%;
  z-index: 99;
  transform: translate(-50%, -140%);
  padding: 0.8rem 1.4rem;
  background: var(--c-marine);
  color: var(--c-blanc);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.lien-evitement:focus { transform: translate(-50%, 0); }

/* ---------- 4. Motifs de charte réutilisables ---------- */

/* La question : capitales magenta, Medium (relevé p4 / p8) */
.question {
  font-family: var(--font-titre);
  font-weight: var(--graisse-question);
  font-size: var(--te-question);
  line-height: 0.98;
  letter-spacing: var(--interlettre-titre);
  color: var(--c-magenta);
  text-transform: uppercase;
}
.question--clair { color: var(--c-magenta-40); }

/* La réponse : « 3 usages... » light, bas-de-casse, plus grand que la question */
.reponse {
  font-family: var(--font-titre);
  font-weight: var(--graisse-light);
  font-size: var(--te-reponse);
  line-height: 1;
  color: var(--c-magenta);
}
.reponse--clair { color: var(--c-magenta-40); }

.reponse-rang {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1.4rem);
  margin-top: 0.15em;
}

/* Chevron pointillé en dégradé de points (masque SVG teinté) */
.chevron {
  display: block;
  flex: none;
  width: clamp(2.6rem, 4.4vw, 4.6rem);
  height: clamp(2.6rem, 4.4vw, 4.6rem);
  overflow: hidden;
}
.chevron__points {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-magenta);
  -webkit-mask: var(--masque-chevron) center / contain no-repeat;
  mask: var(--masque-chevron) center / contain no-repeat;
}
.chevron--clair .chevron__points { background: var(--c-magenta-40); }

/* Puce chevron « > » (sauge par défaut, magenta en variante) */
.puce {
  display: inline-block;
  flex: none;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.7em;
  border-top: 2px solid var(--c-sauge);
  border-right: 2px solid var(--c-sauge);
  transform: translateY(-0.06em) rotate(45deg);
}
.puce--magenta { border-color: var(--c-magenta); }

/* Bandeau d'annotation marine + duo de carrés magenta / sauge */
.bandeau {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.85rem 0 0.85rem 1.4rem;
  background: var(--c-marine);
  color: var(--c-blanc);
  font-size: clamp(0.8rem, 0.95vw, 1rem);
  font-weight: 500;
  line-height: 1.3;
}
.bandeau__carres { display: flex; flex: none; align-self: stretch; }
.bandeau__carres i { display: block; width: 2.6rem; }
.bandeau__carres i:first-child { background: var(--c-magenta); }
.bandeau__carres i:last-child { background: var(--c-sauge); }

/* Fil pointillé de liaison sur les chiffres */
.fil {
  flex: 1;
  height: 0;
  border-top: 2px dotted var(--c-marine);
  opacity: 0.35;
}

.corps { font-weight: 300; line-height: 1.7; }
.corps--clair { color: var(--c-blanc); }

.intertitre {
  display: flex;
  align-items: baseline;
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  font-weight: 400;
  line-height: 1.3;
}

.sous-titre {
  display: flex;
  align-items: baseline;
  font-weight: var(--graisse-titre);
  font-size: clamp(0.95rem, 1.2vw, 1.3rem);
  color: var(--c-magenta-40);
}

/* ---------- 5. Actes et scènes ---------- */

.acte { position: relative; }
.acte__scene {
  position: relative;
  min-height: var(--scene-h);
  overflow: hidden;
}

.anime .acte--hero { height: 320vh; }
.anime .acte--projet { height: 340vh; }
.anime .acte--acces { height: 300vh; }

.anime .acte--hero .acte__scene,
.anime .acte--projet .acte__scene,
.anime .acte--acces .acte__scene {
  position: sticky;
  top: 0;
  height: var(--scene-h);
  min-height: 0;
}

/* ---------- 6. T1 : hero, le X qui s'ouvre ---------- */

.hero {
  --cx: 33vw;              /* centre du masque X dans le viewport */
  --cy: 50vh;
  --taille-x: 54vmin;
  --zoom: 1;
  /* Cadrage commun aux deux calques de la perspective : le calque masqué et
     le calque plein doivent être rigoureusement superposables, sinon le
     fondu de fin saute. Un même couple (position, échelle) pour les deux.
     L'échelle recule au scroll (JS) : la fenêtre du X montre le détail des
     quais, le plein écran rend la perspective entière. */
  --photo-cadre: center center;
  --photo-zoom: 1.28;
  --photo-x: -5%;          /* recadrage sur la rampe et la Porte Sud */
  --photo-y: -15%;
  background: var(--c-gris-fond);
}

.hero__photo { position: absolute; inset: 0; overflow: hidden; }
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-cadre);
  transform: translate(var(--photo-x, 0%), var(--photo-y, 0%)) scale(var(--photo-zoom));
}

/* Le masque X, en négatif. Le voile blanc est percé d'un X (composition de
   deux couches de masque : le plein moins le logo) ; au scroll le voile
   grandit autour du centre du X, donc le trou s'ouvre et la perspective se
   découvre en pleines couleurs, sans fondu laiteux. Transform + opacity
   seulement : aucun repaint par image. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--c-gris-fond);
  -webkit-mask-image: linear-gradient(#000, #000), var(--masque-x);
  mask-image: linear-gradient(#000, #000), var(--masque-x);
  -webkit-mask-size: 100% 100%, var(--taille-x) var(--taille-x);
  mask-size: 100% 100%, var(--taille-x) var(--taille-x);
  -webkit-mask-position: 0 0, calc(var(--cx) - var(--taille-x) / 2) calc(var(--cy) - var(--taille-x) / 2);
  mask-position: 0 0, calc(var(--cx) - var(--taille-x) / 2) calc(var(--cy) - var(--taille-x) / 2);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transform-origin: var(--cx) var(--cy);
  transform: translateX(var(--derive, 0vw)) scale(var(--zoom, 1));
  opacity: var(--voile, 1);
  /* PAS de will-change ici, et ce n'est pas un oubli.
     will-change: transform promeut ce voile en calque composite à lui seul.
     Or c'est le calque le plus lourd de la page : plein écran, porteur d'un
     masque à deux couches composées en exclusion (donc rendu dans une surface
     intermédiaire), et agrandi jusqu'à 6,4 fois. Un calque promu est rastérisé
     sur toutes ses bornes à l'échelle courante : en 2560 x 1440 la texture
     devient telle que le GPU évince, et des images sortent sans leur masque
     (viewport gris plein), sans leur calque (photo nue), parfois même sans
     leur texte. C'était le clignotement du hero, armé par la visite de T4 qui
     achevait de remplir la mémoire graphique.
     Sans promotion, le voile est peint dans le calque de document, tuilé :
     Chrome ne rastérise que les tuiles visibles, le coût est borné.
     Mesuré (_constats/teaser-fix-flash-rapport.md) : 21 puis 20 images
     dégradées sur 200 en 2560 avec will-change, 0 sans, sur deux rejeux. */
}

.hero__texte {
  position: absolute;
  z-index: 4;
  right: var(--gouttiere);
  top: 50%;
  width: min(46vw, 640px);
  transform: translateY(-50%);
  opacity: var(--texte-opacite, 1);
}

.hero__logo { width: clamp(120px, 12vw, 190px); height: auto; }

.hero__titre {
  margin-top: clamp(1.6rem, 3.4vh, 3rem);
  font-family: var(--font-titre);
  font-weight: var(--graisse-light);
  font-size: var(--te-hero);
  line-height: 1.06;
  letter-spacing: var(--interlettre-titre);
  color: var(--c-magenta);
  text-transform: uppercase;
}
.ligne { display: block; overflow: hidden; }
.ligne__mot { display: block; }

.usages {
  margin-top: clamp(1.6rem, 3.4vh, 3rem);
  font-weight: var(--graisse-titre);
  font-size: clamp(0.95rem, 1.15vw, 1.25rem);
  line-height: 1.5;
  color: var(--c-marine);
}
.usage { display: flex; align-items: center; gap: 0.85rem; }
.usage__carre {
  display: block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
}
.usage--logistique .usage__carre { color: var(--c-sauge); }
.usage--messagerie .usage__carre { color: var(--c-magenta); }
.usage--activites .usage__carre { color: var(--c-marine); }

.hero__bandeau {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
}

.indice {
  position: absolute;
  z-index: 6;
  right: var(--gouttiere);
  bottom: clamp(4.5rem, 9vh, 7rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--te-petit);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-marine);
}
.indice__trait {
  display: block;
  width: clamp(40px, 5vw, 72px);
  height: 2px;
  background: var(--c-magenta);
  transform-origin: left center;
}

/* ---------- 7. T2 : le projet, la coupe qui s'empile ---------- */

.projet {
  display: grid;
  grid-template-rows: clamp(150px, 26vh, 300px) 1fr;
  background: var(--c-blanc);
}

.projet__bande { position: relative; overflow: hidden; }
.projet__bande img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

.projet__grille {
  display: grid;
  grid-template-columns: minmax(300px, 33%) minmax(0, 1fr);
  max-width: 2040px;
  margin: 0 auto;
  width: 100%;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-content: center;
  padding: clamp(1.5rem, 4vh, 3.2rem) var(--gouttiere) clamp(1.5rem, 4vh, 3rem);
}

/* Quart de rond gris pâle, meuble de fond de la plaquette (p8) */
.projet__grille::before {
  content: "";
  position: absolute;
  left: -14vw;
  bottom: -34vh;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  background: var(--c-gris-fond);
  z-index: 0;
}
.projet__edito, .projet__coupe { position: relative; z-index: 1; }

.projet__edito .accroche {
  display: flex;
  align-items: baseline;
  margin-top: clamp(1.6rem, 4vh, 3rem);
  font-size: clamp(1rem, 1.3vw, 1.4rem);
  line-height: 1.35;
}
.projet__edito .corps { margin-top: 0.9rem; max-width: 34ch; }

.total-general {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
}
.total-general__valeur {
  font-family: var(--font-titre);
  font-weight: var(--graisse-light);
  font-size: var(--te-chiffre);
  line-height: 1;
  color: var(--c-magenta);
  white-space: nowrap;
}

.niveaux {
  margin-top: clamp(1.6rem, 4vh, 3rem);
  --u: clamp(64px, 11.4vh, 136px);
}

.niveau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(0.9rem, 1.6vw, 1.8rem);
  color: var(--c-blanc);
  border-bottom: 2px solid var(--c-blanc);
}
.niveau--rdc { height: calc(var(--u) * 1);    background: var(--c-sauge); }
.niveau--r1  { height: calc(var(--u) * 0.59); background: var(--c-magenta); }
.niveau--r2  { height: calc(var(--u) * 0.79); background: var(--c-marine); }

.niveau__nom {
  font-weight: var(--graisse-titre);
  font-size: clamp(1.19rem, 1.15vw, 1.4rem);  /* gras >= 18,66 px : grand texte */
  letter-spacing: 0.04em;
}
.niveau__surface {
  font-weight: var(--graisse-light);
  font-size: clamp(1.5rem, 1.8vw, 2rem);      /* >= 24 px : grand texte */
  white-space: nowrap;
}

/* Le sol : hachures de coupe, comme sur le plan de la plaquette */
.niveaux__sol {
  height: 14px;
  background: repeating-linear-gradient(
    45deg,
    var(--c-marine) 0 1px,
    transparent 1px 7px
  );
  opacity: 0.55;
}


/* ---------- 8. T3 : l'accessibilité ---------- */

.acces { background: var(--c-marine); }

.acces__fond { position: absolute; inset: -8% 0; }
.acces__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--parallaxe, 0) * 1px), 0);
  will-change: transform;
}

/* Panneau marine plein, bord droit en biais : la découpe de la plaquette,
   et le seul moyen de garantir le contraste AA sur une photo vivante. */
.acces__voile {
  position: absolute;
  inset: 0;
  width: 66%;
  background: var(--c-marine);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16vh) 100%, 0 100%);
}

.acces__contenu {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: clamp(1.4rem, 4vh, 3.4rem);
  height: 100%;
  padding: clamp(2rem, 6vh, 4rem) var(--gouttiere) clamp(4.5rem, 10vh, 6rem);
  width: 62%;
  max-width: 1680px;
}

.acces__colonnes {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 4rem);
}
.acces__col .corps { margin-top: 0.8rem; max-width: 38ch; }
.acces__col .intertitre { color: var(--c-blanc); }

.trajets { margin-top: 1rem; max-width: 34em; color: var(--c-blanc); }
.trajet {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.34rem 0;
  font-weight: 300;
  font-size: clamp(0.9rem, 1.05vw, 1.15rem);
}
.trajet__lieu { flex: none; max-width: 72%; }
.trajet__fil {
  flex: 1;
  height: 0;
  border-top: 2px dotted var(--c-blanc);
  opacity: 0.4;
  transform: translateY(-0.35em);
}
.trajet__temps {
  flex: none;
  min-width: 3.2em;
  text-align: right;
  font-weight: var(--graisse-titre);
  font-size: 1.1em;
}
.source {
  margin-top: 0.9rem;
  font-size: var(--te-petit);
  color: rgba(255, 255, 255, 0.65);
}

.acces__bandeau {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  background: var(--c-magenta);
}
.acces__bandeau .bandeau__carres i:first-child { background: var(--c-marine); }

/* ---------- 8 bis. Sections de site (localisation, usagers, engagements) ----------
   Les trois actes ajoutés en août ne sont pas épinglés : le scrollytelling porte
   les quatre temps du récit, ces sections-là sont celles du site. Elles
   partagent une seule scène (.site), la même entête « QUESTION ? / 3 réponses »
   que le reste, et se révèlent à l'entrée de chaque bloc. */

.site {
  position: relative;
  display: grid;
  /* colonne bornée : sans minmax(0, 1fr) la colonne implicite prend la largeur
     maximale de son contenu, et les grilles auto-fit qu'elle porte (profils,
     valeurs, proximité) se déploient en trois colonnes de 300 px sur un
     écran de 390 (mesuré le 19/08 : 939 px de contenu pour 346 disponibles). */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(1.8rem, 4.4vh, 3.6rem);
  padding: clamp(3.2rem, 8vh, 6.5rem) var(--gouttiere) clamp(6rem, 12vh, 9rem);
  background: var(--c-blanc);
}
.site--gris { background: var(--c-gris-fond); }
.site--sombre { background: var(--c-marine); }
.site > * { width: 100%; max-width: 2040px; margin-inline: auto; }

.site__entete { display: grid; justify-items: start; }
.site__entete .sous-titre { margin-top: clamp(0.6rem, 1.6vh, 1.1rem); }
.sous-titre--fonce { color: var(--c-magenta); }
.intertitre--espace { margin-top: clamp(1rem, 2.4vh, 1.8rem); }

/* Boutons : un seul composant, trois tenues (plein magenta pour l'appel
   principal, filet marine sur fond clair, filet blanc sur fond marine). */
.bouton-rang { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(1.1rem, 2.6vh, 1.9rem); }
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.95em 1.6em;
  border: 2px solid var(--c-magenta);
  background: var(--c-magenta);
  color: var(--c-blanc);
  font-family: var(--font-titre);
  font-size: clamp(0.8rem, 0.92vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 280ms var(--easing-signature),
              color 280ms var(--easing-signature),
              border-color 280ms var(--easing-signature);
}
.bouton:hover { background: var(--c-marine); border-color: var(--c-marine); }
.bouton__fleche {
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 280ms var(--easing-signature);
}
.bouton:hover .bouton__fleche { transform: translateX(0.22em) rotate(45deg); }
.bouton--fin { background: transparent; border-color: var(--c-marine); color: var(--c-marine); }
.bouton--fin:hover { background: var(--c-marine); color: var(--c-blanc); }
.bouton--clair { background: transparent; border-color: var(--c-blanc); color: var(--c-blanc); }
.bouton--clair:hover { background: var(--c-blanc); color: var(--c-marine); }

/* --- Localisation --- */

.localisation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.8rem, 4vw, 4.5rem);
  align-items: start;
}
.atouts { display: grid; gap: clamp(1rem, 2.2vh, 1.7rem); margin-top: clamp(1.1rem, 2.8vh, 2rem); }
.atout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  align-items: start;
}
.atout__rang {
  padding-right: clamp(0.7rem, 1.4vw, 1.2rem);
  border-right: 2px solid var(--c-magenta-15);
  font-family: var(--font-titre);
  font-weight: var(--graisse-light);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--c-magenta);
}
.atout .corps { max-width: 48ch; }

.mosaique {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: clamp(0.5rem, 0.9vw, 1rem);
}
.mosaique img { width: 100%; height: 100%; object-fit: cover; }
.mosaique__haute { grid-row: 1 / span 2; }
.mosaique__large { grid-column: 2 / span 2; aspect-ratio: 21 / 8; }
.mosaique__carre { aspect-ratio: 1; }
.localisation__accroche {
  margin-top: clamp(1rem, 2.4vh, 1.7rem);
  max-width: 52ch;
  font-size: clamp(1rem, 1.2vw, 1.3rem);
}

.proximite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.4rem, 3vw, 3.4rem);
  padding-top: clamp(1.4rem, 3vh, 2.4rem);
  border-top: 2px solid rgba(20, 56, 90, 0.14);
}
.proximite__titre {
  display: flex;
  align-items: baseline;
  font-weight: var(--graisse-titre);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  letter-spacing: 0.04em;
  color: var(--c-marine);
}
.proximite__titre--suite { margin-top: clamp(1.2rem, 2.6vh, 2rem); }
.liste-temps { margin-top: 0.7rem; color: var(--c-marine); }
.liste-temps .trajet { font-size: clamp(0.85rem, 0.95vw, 1rem); padding: 0.28rem 0; }
.liste-temps .trajet__fil { border-top-color: var(--c-marine); opacity: 0.3; }

.lignes { display: grid; gap: 0.8rem; margin-top: 0.8rem; }
.ligne-transport {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  color: var(--c-marine);
}
.jeton {
  padding: 0.3em 0.65em;
  background: var(--c-marine);
  color: var(--c-blanc);
  font-weight: var(--graisse-titre);
  font-size: 0.78em;
  letter-spacing: 0.1em;
}
.jeton--tram { background: var(--c-magenta); }
.jeton__nom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 0.22em 0.4em;
  border: 2px solid var(--c-marine);
  font-weight: var(--graisse-titre);
  font-size: 0.85em;
}
.ligne-transport__lieu { font-weight: 300; }

.localisation__bandeau {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: min(820px, 94vw);
}

/* --- Usagers : les trois profils --- */

.profils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}
.profil {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  background: var(--c-blanc);
  border-top: 6px solid var(--c-sauge);
}
.profil--r1 { border-top-color: var(--c-magenta); }
.profil--r2 { border-top-color: var(--c-marine); }
.profil__rang {
  font-family: var(--font-titre);
  font-weight: var(--graisse-light);
  font-size: clamp(1.6rem, 2.3vw, 2.5rem);
  line-height: 1;
  color: var(--c-magenta);
}
.profil__titre {
  /* deux lignes réservées : les trois cartes gardent leurs niveaux et leurs
     surfaces sur la même ligne, quel que soit le titre */
  min-height: 2.4em;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.55rem);
  line-height: 1.2;
  color: var(--c-marine);
}
.profil__niveau {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid rgba(20, 56, 90, 0.14);
  font-weight: var(--graisse-titre);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  letter-spacing: 0.03em;
  color: var(--c-marine);
}
.profil__pastille { flex: none; width: 1em; height: 1em; background: var(--c-sauge); }
.profil--r1 .profil__pastille { background: var(--c-magenta); }
.profil--r2 .profil__pastille { background: var(--c-marine); }
.profil__surface {
  margin-left: auto;
  font-weight: var(--graisse-light);
  font-size: 1.5em;
  line-height: 1;
  color: var(--c-magenta);
  white-space: nowrap;
}
.specs { display: grid; gap: 0.4rem; font-weight: 300; font-size: clamp(0.85rem, 0.95vw, 1rem); line-height: 1.45; }
/* Puce en position absolue, pas en colonne de grille : un <sup> (les m²)
   deviendrait sinon un élément de grille à lui seul et le chiffre partirait
   à la ligne, seul, contre la marge. */
.specs li { position: relative; padding-left: 1.25em; }
.specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.36em;
  height: 0.36em;
  border-top: 2px solid var(--c-sauge);
  border-right: 2px solid var(--c-sauge);
  transform: rotate(45deg);
}
.surfaces {
  display: grid;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 2px dotted rgba(20, 56, 90, 0.28);
  font-size: clamp(0.82rem, 0.9vw, 0.95rem);
}
.surfaces > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; }
.surfaces dt { font-weight: 300; }
.surfaces dd { margin: 0; font-weight: var(--graisse-titre); color: var(--c-marine); white-space: nowrap; }

/* --- Engagements : les trois valeurs --- */

.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}
.valeur {
  padding: clamp(1.3rem, 2.2vw, 2.1rem);
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--c-blanc);
}
.valeur--economique { border-left-color: var(--c-magenta); }
.valeur--ecologique { border-left-color: var(--c-sauge); }
.valeur__etiquette {
  font-weight: var(--graisse-titre);
  font-size: var(--te-petit);
  letter-spacing: var(--interlettre-baseline);
  text-transform: uppercase;
  color: var(--c-magenta-15);
}
.valeur__titre {
  margin-top: 0.6rem;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.6rem);
  line-height: 1.2;
  color: var(--c-blanc);
}
.valeur .corps { margin-top: 0.7rem; }

.preuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.8rem);
  padding-top: clamp(1.4rem, 3vh, 2.4rem);
  border-top: 2px solid rgba(255, 255, 255, 0.18);
}
.preuve { display: grid; gap: 0.45rem; align-content: start; }
.preuve__valeur {
  font-family: var(--font-titre);
  font-weight: var(--graisse-light);
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  line-height: 1;
  color: var(--c-magenta-40);
  white-space: nowrap;
}
.preuve__texte { font-weight: 300; font-size: clamp(0.88rem, 1vw, 1.05rem); line-height: 1.5; color: var(--c-blanc); }

.labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.9rem, 2vw, 2.2rem);
}
.label { display: grid; gap: 0.35rem; font-weight: 300; font-size: clamp(0.82rem, 0.92vw, 0.98rem); line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.label__marque {
  font-weight: var(--graisse-titre);
  font-size: var(--te-petit);
  letter-spacing: var(--interlettre-titre);
  text-transform: uppercase;
  color: var(--c-magenta-15);
}

/* --- Formulaire de contact (maquette) --- */

.site--court { min-height: 0; padding-bottom: clamp(3.2rem, 8vh, 6.5rem); }

.contact-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: start;
}
.intertitre--grand { font-size: clamp(1.3rem, 1.9vw, 2rem); line-height: 1.2; }
.contact-demo__note { margin-top: 0.9rem; max-width: 34ch; }

.champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  max-width: 760px;   /* un champ Nom de 800 px de large ne ressemble à rien */
}
.champ--large { grid-column: 1 / -1; }
.champ { display: grid; gap: 0.4rem; }
.champ__nom {
  font-weight: var(--graisse-titre);
  font-size: var(--te-petit);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-marine);
}
.champ__saisie {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 2px solid rgba(20, 56, 90, 0.22);
  background: var(--c-blanc);
  color: var(--c-marine);
  font-family: var(--font-corps);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  font-weight: 300;
  transition: border-color 240ms var(--easing-signature);
}
.champ__saisie--long { resize: vertical; line-height: 1.55; }
.champ__saisie:focus { border-color: var(--c-magenta); outline: none; }
.champ__saisie:focus-visible { outline: 3px solid var(--c-magenta); outline-offset: 2px; }

.bouton[disabled] { cursor: default; opacity: 1; }
.bouton[disabled]:hover { background: var(--c-magenta); border-color: var(--c-magenta); }
.bouton[disabled]:hover .bouton__fleche { transform: rotate(45deg); }
.etiquette-demo {
  align-self: center;
  padding: 0.35em 0.7em;
  border: 2px dotted rgba(20, 56, 90, 0.35);
  font-size: var(--te-petit);
  font-weight: var(--graisse-titre);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-marine);
}

/* ---------- 9. T4 : final ---------- */

.final {
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: var(--scene-h);
  max-width: 2040px;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) var(--gouttiere);
  background: var(--c-blanc);
}

.final__media { position: relative; aspect-ratio: 1; max-width: 760px; margin: 0 auto; width: 100%; }
.final__biais {
  position: absolute;
  inset: 0;
  background: var(--c-sauge);
  clip-path: polygon(0 100%, 100% 0, 100% 46%, 46% 100%);
  opacity: 0.22;
}
.final__x {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--masque-x) center / contain no-repeat;
  mask: var(--masque-x) center / contain no-repeat;
}
.final__x img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 26% 50%;
  transform: translateY(-7%) scale(1.3);
}

.final__contenu { max-width: 860px; }
.final__logo { width: clamp(130px, 13vw, 200px); height: auto; }

.final__titre { margin-top: clamp(1.4rem, 3vh, 2.4rem); }
.final__url {
  font-family: var(--font-titre);
  font-weight: var(--graisse-titre);
  font-size: clamp(1.5rem, 2.7vw, 2.9rem);
  line-height: 1.1;
  color: var(--c-magenta);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color 260ms var(--easing-signature);
}
.final__url:hover, .final__url:focus-visible { border-bottom-color: var(--c-magenta); }

.final__label {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  font-size: var(--te-petit);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--interlettre-baseline);
  text-transform: uppercase;
  color: var(--c-marine);
}

.final__contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.6rem);
  margin-top: 1.1rem;
}
.enseigne__nom {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--c-magenta);
  font-weight: var(--graisse-titre);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  color: var(--c-marine);
}
.contacts { display: grid; gap: 0.9rem; margin-top: 0.9rem; }
.contact { display: grid; gap: 0.1rem; font-size: clamp(0.85rem, 0.95vw, 1rem); }
.contact__nom { font-weight: var(--graisse-titre); color: var(--c-marine); }
.contact__tel { font-weight: 300; text-decoration: none; }
.contact__mail {
  font-weight: 500;
  color: var(--c-marine);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 56, 90, 0.25);
  justify-self: start;
  word-break: break-word;
}
.contact__mail:hover { border-bottom-color: var(--c-magenta); color: var(--c-magenta); }
.contact__tel:hover { color: var(--c-magenta); }

.mentions {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  font-size: var(--te-petit);
  font-weight: 300;
  color: rgba(20, 56, 90, 0.7);
}

/* ---------- 10. États animés (uniquement si JS + mouvement autorisé) ---------- */

/* Révélation générique : tout élément porteur d'un data-seuil */
.anime .revele {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 820ms var(--easing-signature), transform 820ms var(--easing-signature);
}
.anime .revele.est-pose { opacity: 1; transform: none; }

.anime .ligne__mot {
  transform: translateY(115%);
  transition: transform 1000ms var(--easing-signature);
}
.anime.pret .ligne__mot { transform: translateY(0); }
.anime.pret .ligne:nth-child(1) .ligne__mot { transition-delay: 120ms; }
.anime.pret .ligne:nth-child(2) .ligne__mot { transition-delay: 240ms; }
.anime.pret .ligne:nth-child(3) .ligne__mot { transition-delay: 360ms; }

.anime .hero__logo,
.anime .indice {
  opacity: 0;
  transition: opacity 900ms var(--easing-signature);
}
.anime.pret .hero__logo { opacity: 1; transition-delay: 60ms; }
.anime.pret .indice { opacity: 1; transition-delay: 900ms; }
.anime .indice.est-parti { opacity: 0; transition-delay: 0ms; }

.anime .usage {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--easing-signature), transform 700ms var(--easing-signature);
}
.anime .usage__carre {
  transform: scale(0.2);
  transition: transform 700ms var(--easing-signature);
}
.anime.pret .usage { opacity: 1; transform: none; }
.anime.pret .usage__carre { transform: none; }
.anime.pret .usage:nth-child(1) { transition-delay: 700ms; }
.anime.pret .usage:nth-child(1) .usage__carre { transition-delay: 700ms; }
.anime.pret .usage:nth-child(2) { transition-delay: 840ms; }
.anime.pret .usage:nth-child(2) .usage__carre { transition-delay: 840ms; }
.anime.pret .usage:nth-child(3) { transition-delay: 980ms; }
.anime.pret .usage:nth-child(3) .usage__carre { transition-delay: 980ms; }

/* T2 : les niveaux se posent l'un sur l'autre */
.anime .niveau {
  opacity: 0;
  transform: translateY(-42px);
  transition: opacity 620ms var(--easing-signature), transform 900ms var(--easing-signature);
}
.anime .niveau.est-pose { opacity: 1; transform: none; }

.anime .niveaux__sol { opacity: 0; transition: opacity 600ms var(--easing-signature); }
.anime .niveaux__sol.est-pose { opacity: 0.55; }

/* T2 : le chevron se remplit une fois, à l'arrivée de l'acte */
.anime .acte--projet .chevron__points {
  transform: translateX(-104%);
  transition: transform 900ms var(--easing-signature);
}
.anime .acte--projet .chevron__points.est-pose { transform: none; }

/* T3 : le chevron progresse au scroll */
.anime .chevron--scroll .chevron__points {
  transform: translateX(calc((var(--chevron, 0) - 1) * 104%));
}

/* Les temps de trajet de T3 entrent un à un ; ceux des listes de proximité
   (section Localisation) entrent avec leur colonne, jamais seuls : la règle
   est donc portée par l'acte, pas par la classe. */
.anime .acte--acces .trajet {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 600ms var(--easing-signature), transform 600ms var(--easing-signature);
}
.anime .acte--acces .trajet.est-pose { opacity: 1; transform: none; }

/* Le bandeau du hero est mené par le scroll (variable --bandeau), il glisse
   donc au doigt. Celui de T3 est posé par un seuil : lancé de toute sa largeur
   hors écran, il claquait à l'arrivée. Course courte et fondu, comme le
   bandeau de la Localisation : le geste s'accompagne au lieu de surgir. */
.anime .hero__bandeau {
  transform: translateX(calc((1 - var(--bandeau, 0)) * 101%));
}
.anime .acces__bandeau {
  opacity: 0;
  transform: translateX(52px);
  transition: opacity 720ms var(--easing-signature), transform 900ms var(--easing-signature);
}
.anime .acces__bandeau.est-pose { opacity: 1; transform: none; }

.anime .acte--acces .acces__titre,
.anime .acte--acces .acces__col {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--easing-signature), transform 800ms var(--easing-signature);
}
.anime .acte--acces .est-pose.acces__titre,
.anime .acte--acces .est-pose.acces__col { opacity: 1; transform: none; }

/* Sections de site : un seul geste d'entrée, opacité + montée courte, posé
   bloc par bloc à mesure que chacun franchit le bas de l'écran. */
.anime .site [data-seuil]:not(.bandeau) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--easing-signature), transform 760ms var(--easing-signature);
}
.anime .site [data-seuil]:not(.bandeau).est-pose { opacity: 1; transform: none; }

/* Le bandeau d'annotation garde son entrée latérale, accompagnée cette fois
   d'un fondu : sans lui, l'aplat marine claquait sur le fond clair. */
.anime .site .bandeau[data-seuil] {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 720ms var(--easing-signature), transform 900ms var(--easing-signature);
}
.anime .site .bandeau[data-seuil].est-pose { opacity: 1; transform: none; }

/* T4 : le final s'ouvre en deux temps. Le X entre le premier, un peu plus bas
   dans la remontée (son seuil est porté par data-io), le bloc de contacts suit
   ligne à ligne. Course allongée : l'ensemble arrivait d'un bloc. */
.anime .final__x,
.anime .final__contenu > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1000ms var(--easing-signature), transform 1000ms var(--easing-signature);
}
.anime .final__x { transform: scale(0.94); }
.anime .est-pose.final__x { opacity: 1; transform: none; }
.anime .est-pose.final__contenu > * { opacity: 1; transform: none; }
.anime .est-pose.final__contenu > *:nth-child(2) { transition-delay: 90ms; }
.anime .est-pose.final__contenu > *:nth-child(3) { transition-delay: 170ms; }
.anime .est-pose.final__contenu > *:nth-child(4) { transition-delay: 250ms; }
.anime .est-pose.final__contenu > *:nth-child(5) { transition-delay: 330ms; }
.anime .est-pose.final__contenu > *:nth-child(6) { transition-delay: 410ms; }
.anime .est-pose.final__contenu > *:nth-child(7) { transition-delay: 490ms; }

/* ---------- 11. Sans JS / mouvement réduit : version statique ---------- */

.sans-js .hero__voile { opacity: 1; }
/* Sans JS, le flipbook n'existe pas : ses boutons ne restent pas à l'écran
   pour ne rien faire. */
.sans-js [data-flip-ouvre],
.sans-js .flip { display: none; }

/* ---------- 11 bis. Flipbook : la plaquette feuilletable ----------
   Modale plein écran, montée à l'ouverture seulement. Les pages sont des
   <img> créées par le script : tant que la modale n'a pas été ouverte, aucune
   des 14 pages n'existe dans le document, donc rien n'est chargé. */

.flip {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.6rem, 1.6vh, 1.2rem);
  padding: clamp(0.8rem, 2vh, 1.6rem) clamp(0.8rem, 2vw, 2rem) clamp(0.9rem, 2.2vh, 1.6rem);
  background: rgba(9, 26, 43, 0.94);
  opacity: 0;
  transition: opacity 320ms var(--easing-signature);
}
.flip[hidden] { display: none; }
.flip.est-ouvert { opacity: 1; }

.flip__barre {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
  color: var(--c-blanc);
}
.flip__titre {
  font-weight: var(--graisse-titre);
  font-size: var(--te-petit);
  letter-spacing: var(--interlettre-baseline);
  text-transform: uppercase;
}
.flip__compteur {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  font-weight: 500;
}
.flip__page-courante { color: var(--c-magenta-15); }
.flip__sur { opacity: 0.7; }

.flip__fermer,
.flip__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.6em 0.9em;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--c-blanc);
  font-family: var(--font-titre);
  font-size: clamp(0.75rem, 0.88vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 240ms var(--easing-signature), border-color 240ms var(--easing-signature);
}
.flip__fermer:hover,
.flip__nav:hover { background: var(--c-magenta); border-color: var(--c-magenta); }
.flip__nav[disabled] { opacity: 0.25; cursor: default; }
.flip__nav[disabled]:hover { background: transparent; border-color: rgba(255, 255, 255, 0.4); }

.flip__croix { position: relative; width: 0.85em; height: 0.85em; }
.flip__croix::before,
.flip__croix::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.flip__croix::before { transform: rotate(45deg); }
.flip__croix::after { transform: rotate(-45deg); }

.flip__scene {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* rangée explicite : sans elle la rangée implicite est en auto, la hauteur
     de la boîte de lecture redevient celle de son contenu, et la page déborde
     par le bas dès que l'écran est moins haut que la page à sa taille propre */
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.4rem);
  height: 100%;
  min-height: 0;
}
.flip__nav { flex: none; padding: 1.1em 0.9em; }
.flip__chevron {
  width: 0.7em;
  height: 0.7em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.flip__nav--prec .flip__chevron { transform: translateX(0.15em) rotate(-135deg); }
.flip__nav--suiv .flip__chevron { transform: translateX(-0.15em) rotate(45deg); }

/* La boîte de lecture est étirée par la grille (largeur ET hauteur définies) :
   c'est la condition pour que le max-width / max-height des pages résolve. Une
   boîte ajustée à son contenu rendrait la contrainte circulaire, et la page
   déborderait par le bas (constaté le 19/08 en 1600 x 900). */
.flip__cadre {
  position: relative;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;      /* borne la page agrandie à la boîte de lecture */
  perspective: 2200px;
}
/* Boîte en position absolue : c'est le seul montage où la largeur et la
   hauteur de référence des pages sont franchement définies, quelle que soit
   la chaîne de grilles au-dessus. */
.flip__pages {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.flip__page {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--c-blanc);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  transform-origin: left center;
  transition: transform 360ms var(--easing-signature);
  /* cursor zoom-in retiré avec la loupe (drapeau LOUPE_ACTIVE, flipbook.js) */
  touch-action: none;
}
.flip__pages--double .flip__page { max-width: calc(50% - 1px); }
/* Loupe : la page agrandie se déplace au doigt, transformation appliquée par
   le script (translate + scale autour de son centre). */
.flip__pages--zoom .flip__page { transform-origin: center center; cursor: grab; }
.flip__pages--zoom:active .flip__page { cursor: grabbing; }
/* Feuilletage : la page qui arrive bascule sur sa reliure, dans le sens du
   geste. Une seule animation, sur l'entrée : une sortie animée obligerait à
   séquencer deux temps par timer, et un clic rapide sur la flèche laisserait
   la page à mi-course. */
.flip__pages.arrive-avant .flip__page { animation: flip-arrive-avant 420ms var(--easing-signature) both; }
.flip__pages.arrive-arriere .flip__page { animation: flip-arrive-arriere 420ms var(--easing-signature) both; }

@keyframes flip-arrive-avant {
  from { transform: rotateY(18deg) translateX(5%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes flip-arrive-arriere {
  from { transform: rotateY(-18deg) translateX(-5%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.flip__aide {
  text-align: center;
  font-size: var(--te-petit);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- 12. Responsive ---------- */

@media (max-width: 1180px) {
  .hero { --cx: 50vw; --cy: 34vh; --taille-x: 40vmin; }
  .hero__texte {
    top: auto;
    bottom: clamp(5rem, 13vh, 8rem);
    left: var(--gouttiere);
    right: var(--gouttiere);
    width: auto;
    transform: none;
  }
  .hero__logo { width: clamp(100px, 16vw, 150px); }
  /* L'invite de défilement passe à gauche, sous le bloc de titre : sur écran
     étroit la colonne de texte occupe toute la largeur, l'invite alignée à
     droite flottait dans le vide. */
  .indice {
    right: auto;
    left: var(--gouttiere);
    bottom: clamp(1.4rem, 3.4vh, 2.6rem);
  }

  .projet { grid-template-rows: clamp(110px, 18vh, 200px) 1fr; }
  .projet__grille { grid-template-columns: 1fr; gap: clamp(1.2rem, 3vh, 2rem); }

  .acces__voile {
    width: 100%;
    clip-path: polygon(0 200px, 100% 132px, 100% 100%, 0 100%);
  }
  .acces__contenu {
    width: 100%;
    max-width: none;
    align-content: start;
    padding-top: 224px;
  }

  .final { grid-template-columns: 1fr; }
  .final__media { max-width: 460px; margin: 0 auto; }

  .localisation { grid-template-columns: 1fr; }
  .localisation__accroche { max-width: none; }
  .contact-demo { grid-template-columns: 1fr; }
  .contact-demo__note { max-width: none; }
}

@media (max-width: 720px) {
  .anime .acte--hero { height: 260vh; }
  .anime .acte--projet,
  .anime .acte--acces { height: auto; }
  .anime .acte--projet .acte__scene,
  .anime .acte--acces .acte__scene {
    position: static;
    height: auto;
    min-height: var(--scene-h);
  }
  .acces__contenu { padding-bottom: 16vh; }
  .projet__grille { padding-bottom: 14vh; }

  /* Le X d'abord, le titre dessous : sur téléphone le bloc de texte n'est plus
     calé sur le bas de l'écran (il passait sous les branches du X dès que la
     hauteur utile tombait, barre d'adresse du navigateur comprise) mais accroché
     au bas du X lui-même. La fenêtre du X est bornée en hauteur pour laisser
     la place au titre et aux trois pastilles quel que soit l'écran. */
  .hero { --cy: 30vh; --taille-x: min(64vmin, 33vh); }
  .hero__texte {
    top: calc(var(--cy) + var(--taille-x) / 2 + clamp(0.8rem, 2.4vh, 1.7rem));
    bottom: auto;
  }
  .hero__titre { font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .usages { font-size: 0.9rem; }
  .bandeau { font-size: 0.72rem; padding-left: 1rem; }
  .bandeau__carres i { width: 1.5rem; }

  .projet__grille { align-content: start; }
  .niveaux { --u: clamp(68px, 9vh, 84px); }
  .niveau { padding: 0 0.6rem; }

  .acces__colonnes { grid-template-columns: 1fr; }
  .trajet { font-size: 0.85rem; }
  .trajet__lieu { max-width: 62%; }

  .final { padding-top: clamp(2rem, 6vh, 4rem); }
  .final__media { max-width: 300px; }

  /* Sections de site sur téléphone : une colonne, mosaïque recomposée en
     2 x 3 (la bande large en tête, la verticale du tramway à gauche). */
  .site { gap: clamp(1.4rem, 3.4vh, 2.4rem); padding-bottom: clamp(5rem, 12vh, 7rem); }
  .mosaique { grid-template-columns: 1fr 1fr; }
  .mosaique > :nth-child(1) { grid-area: 2 / 1 / 4 / 2; }
  .mosaique > :nth-child(2) { grid-area: 1 / 1 / 2 / 3; }
  .mosaique > :nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
  .mosaique > :nth-child(4) { grid-area: 3 / 2 / 4 / 3; }
  .proximite { grid-template-columns: 1fr; }
  .contact-demo { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .atout__rang { font-size: 1.5rem; }
  .profil__surface { margin-left: 0; }
  .bouton { width: 100%; justify-content: center; }

  /* Flipbook sur téléphone : une page, la croix seule, pas de rappel clavier.
     Les flèches passent par-dessus les bords de la page : en colonnes, elles
     lui prenaient 60 px sur 390, soit un cinquième de sa largeur. */
  .flip { padding-left: 0.5rem; padding-right: 0.5rem; }
  .flip__fermer-mot { display: none; }
  .flip__aide { display: none; }
  .flip__scene { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flip__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    padding: 0.9em 0.6em;
    background: rgba(9, 26, 43, 0.78);
    border-color: rgba(255, 255, 255, 0.55);
  }
  .flip__nav--prec { left: 0; }
  .flip__nav--suiv { right: 0; }
}

/* Téléphone à hauteur utile réduite (barre d'adresse visible, petits écrans) :
   le bloc de titre se resserre pour que les trois pastilles et l'invite de
   défilement restent dans le premier écran. */
@media (max-width: 720px) and (max-height: 740px) {
  .hero__logo { width: clamp(84px, 22vw, 108px); }
  .hero__titre {
    margin-top: clamp(0.8rem, 2.2vh, 1.5rem);
    font-size: clamp(1.6rem, 7vw, 2.3rem);
  }
  .usages { margin-top: clamp(0.8rem, 2.2vh, 1.5rem); font-size: 0.82rem; }
}

@media (max-height: 720px) and (min-width: 1181px) {
  .hero { --taille-x: 52vmin; }
  .projet { grid-template-rows: 18vh 1fr; }
}

/* ---------- 13. Mouvement réduit : tout reste lisible, rien ne bouge ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__voile { opacity: 1 !important; transform: none !important; }
  .hero__texte { opacity: 1 !important; }
  .indice { display: none; }
  .hero__bandeau { transform: none !important; }
  .acces__fond img { transform: none !important; }
  .final__url { transition: none; }
  .flip { transition: none; }
  .flip__pages.arrive-avant .flip__page,
  .flip__pages.arrive-arriere .flip__page { animation: none; }
  .bouton, .bouton__fleche, .flip__fermer, .flip__nav, .champ__saisie { transition: none; }
}

/* ---------- 14. Passe design gatée du 19/08 (verdict Julien : « je valide ») ----------
   Née sur la copie de comparaison fable.html, transportée ici à l'identique :
   ces règles vivaient dans une feuille chargée APRÈS celle-ci, leur place en
   fin de feuille reproduit la même cascade. Contenu : hero à X unique,
   chevrons signés sur les sections de site, découpe diagonale de la bande T2,
   cartes Usagers marquées par niveau, entrées en escalier, filigrane X du
   formulaire, pouls de l'invite. */

/* --- Hero : un seul X. Le logo complet quitte le bloc de titre (deux X en
   concurrence) et devient la marque de la page, discrète, en haut à gauche.
   Le titre reprend la place : échelle montée d'un cran. --- */

:root {
  --te-hero: clamp(2.2rem, 4.5vw, 6rem);
}

.hero__logo--marque {
  position: absolute;
  z-index: 6;
  top: clamp(1rem, 2.8vh, 2.1rem);
  left: var(--gouttiere);
  width: clamp(88px, 7.6vw, 126px);
}

/* bornée au desktop : en dessous de 1181 px, la section 12 étale le bloc de
   titre sur la largeur (left/right), une largeur posée ici l'écraserait
   (attrapé sur capture mobile : titre replié sur 4 lignes) */
@media (min-width: 1181px) {
  .hero__texte { width: min(48vw, 700px); }
}
/* la marge du titre compensait le logo au-dessus de lui : il n'y est plus */
.hero__texte .hero__titre { margin-top: 0; }

.anime .hero__logo--marque { opacity: 0; transition: opacity 900ms var(--easing-signature); }
.anime.pret .hero__logo--marque { opacity: 1; transition-delay: 60ms; }

@media (max-width: 1180px) {
  .hero__logo--marque { width: clamp(78px, 9vw, 104px); }
}
@media (max-width: 720px) {
  /* sous le X recentré du téléphone : la marque reste au-dessus de la branche
     haute du X (bord haut du X à --cy - taille/2, jamais avant ~112 px) */
  .hero__logo--marque { top: 0.9rem; width: 68px; }
}

/* --- Le chevron signe chaque section de site : même geste que T2, le dégradé
   de points se remplit à l'arrivée de l'entête. --- */

.anime .site__entete .chevron__points {
  transform: translateX(-104%);
  transition: transform 900ms var(--easing-signature) 180ms;
}
.anime .site__entete.est-pose .chevron__points { transform: none; }

/* --- La bande photo de T2 tranche en diagonale (la plaquette coupe ses
   images à la diagonale, p3/p9, jamais au cordeau), liseré sauge dessous. --- */

.projet__bande { position: relative; }
.projet__bande img {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
.projet__bande::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-sauge);
  clip-path: polygon(100% 70%, 100% 78%, 0 108%, 0 100%);
}

/* --- Cartes Usagers : la couleur du niveau traverse la carte, et les trois
   profils arrivent l'un après l'autre. Même escalier sur les valeurs et les
   preuves des Engagements. --- */

.profil__niveau { border-bottom: 2px solid rgba(115, 148, 128, 0.5); }
.profil--r1 .profil__niveau { border-bottom-color: rgba(230, 0, 125, 0.38); }
.profil--r2 .profil__niveau { border-bottom-color: rgba(20, 56, 90, 0.38); }

.anime .profils .profil:nth-child(2) { transition-delay: 140ms; }
.anime .profils .profil:nth-child(3) { transition-delay: 280ms; }
.anime .valeurs .valeur:nth-child(2) { transition-delay: 140ms; }
.anime .valeurs .valeur:nth-child(3) { transition-delay: 280ms; }
.anime .preuves .preuve:nth-child(2) { transition-delay: 140ms; }
.anime .preuves .preuve:nth-child(3) { transition-delay: 280ms; }

/* --- Formulaire : filigrane X marine derrière la colonne d'intro (jamais
   derrière les champs), à peine posé. --- */

.acte--contact .site { position: relative; overflow: hidden; }
.acte--contact .site::after {
  content: "";
  position: absolute;
  left: max(-72px, -6vw);
  bottom: -10%;
  width: min(46vmin, 430px);
  aspect-ratio: 1;
  background: var(--c-marine);
  opacity: 0.055;
  -webkit-mask: var(--masque-x) center / contain no-repeat;
  mask: var(--masque-x) center / contain no-repeat;
  pointer-events: none;
}

/* --- L'invite de défilement respire --- */

@keyframes fable-invite {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.5); }
}
.anime .indice__trait { animation: fable-invite 2.4s var(--easing-signature) infinite; }

/* --- Mouvement réduit : tout redevient immobile --- */

@media (prefers-reduced-motion: reduce) {
  .anime .site__entete .chevron__points { transform: none; transition: none; }
  .anime .indice__trait { animation: none; }
  .anime .profils .profil,
  .anime .valeurs .valeur,
  .anime .preuves .preuve { transition-delay: 0ms; }
}