/* ========================================================================
   Oikos — vitrine publique
   Complément isolé du shell applicatif. La section tarif reprend le pack
   unique validé dans la maquette commerciale, sans activer de paiement.
   ======================================================================== */

/* L'en-tête est collant (60 px condensé) : sans marge d'ancre, la section
   visée arrive le titre à moitié mangé sous la barre. */
#solution,
#metiers,
#preuve,
#securite,
#tarif,
#souscription {
  scroll-margin-top: 84px;
}

/* --- 8 · Défilement doux vers l'ancre ------------------------------------- */
/* En CSS et non au script : le geste doit marcher même sans lui. Sous
   `prefers-reduced-motion`, le saut redevient instantané — c'est le
   comportement demandé, pas une dégradation. */
/* --- Temps 7 · l'écosystème et la feuille de route ------------------------
   Ajouté le 04.09.2026. Deux blocs dans une seule section claire teintée : les
   trois produits de la gamme, puis le calendrier qui les date.

   Rien ici n'invente une grammaire : la carte de produit reprend la facture de
   `.base-isolee` (surface, filet, la sienne mise en avant en vert), et la
   feuille de route reprend celle de `.parcours-oikos` — un fil d'or sur le
   bord haut, des filets verticaux entre les cases, l'ordre pour information.
   Une seconde grammaire visuelle aurait fait deux sites.

   AMENDEMENT DU 04.09.2026, second jet — la veine évolue au fil de la route.
   Le fil d'or ne change jamais : c'est ce que les trois maisons ont en commun,
   et les trois dépôts déclarent le MÊME `--or: #C29A4B`. Ce qui change, c'est
   le fond sur lequel il court. La feuille de route le montre en le faisant :
   la veine traverse le vert de Oikos, le noir de Kronos, le bordeaux de
   Baccus, puis recommence — et la roche s'arrête à la dernière case, où seul
   l'or continue de s'éteindre.

   Ce n'est pas la MATIÈRE Veine d'Or (aucun `.vd-*` ici, aucun fichier du
   motif) : c'est un aplat et un dégradé, donc ils ont le droit de se tracer.
   La distinction porte toute la règle 4 de MOTIF-VEINE-DOR.md — le motif ne
   bouge jamais, un fil dessiné en CSS le peut. */
.ecosysteme {
  /* Les trois identités, relevées dans le `:root` de chaque produit et non
     choisies ici : `oikos.css` --primaire #0A5A9E, `kronos.css` --primaire
     #131110 (le noir CHAUD du 25.08 — le noir pur éteindrait l'or), et
     `baccus.css` --primaire #5A1A26 (le bordeaux du 04.09, teinte 349°).
     Elles ne servent QUE dans cette section : ce sont les couleurs des
     maisons voisines, pas des jetons de la charte Oikos, et elles n'ont rien
     à faire ailleurs dans la feuille. */
  --maison-oikos:  #0A5A9E;
  /* L'application est passée à un accent sobre (10.09.2026) ; la vitrine
     garde l'or de la gamme, partagé avec Mydas et Kronos. */
  --accent:         #A8792B;
  --accent-texte:   #8A6220;
  --accent-tint:    #F7F1E4;
  --maison-kronos: #131110;
  --maison-baccus: #5A1A26;
}
[data-maison="oikos"]  { --maison: var(--maison-oikos); }
[data-maison="kronos"] { --maison: var(--maison-kronos); }
[data-maison="baccus"] { --maison: var(--maison-baccus); }

.gamme-hbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Le filet du haut est celui de la maison : la carte et son segment de la
   feuille de route portent la même couleur, sinon le lecteur a deux codes à
   tenir au lieu d'un. */
.gamme-produit {
  padding: 26px 24px; background: var(--surface);
  border: 1px solid var(--bordure); border-top: 3px solid var(--maison);
}
/* Le produit dont c'est la page se distingue comme « votre base » au temps 6 :
   même vert, même ombre. Un visiteur qui découvre une gamme de trois noms doit
   voir en un regard lequel il est en train de lire. `border-color` repeindrait
   les quatre côtés, filet de maison compris : il se rattrape ligne suivante. */
.gamme-produit--ici { border-color: var(--primaire); box-shadow: 0 10px 30px -14px rgba(10, 90, 158, .3); }
.gamme-produit--ici { border-top-color: var(--maison); }
.gamme-produit strong { display: block; color: var(--maison); font: 400 24px var(--police-marque); }
.gamme-metier { display: block; margin-top: 7px; color: var(--accent-texte); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.gamme-produit p { margin: 15px 0 0; color: var(--encre-douce); font-size: 13px; line-height: 1.6; }
.gamme-ici {
  display: inline-block; margin-top: 15px; padding: 4px 9px;
  color: var(--primaire); background: var(--primaire-tint);
  font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
}

/* L'entête de la feuille de route reprend la grille de `.site-section-entete`
   sans son `h2` : ce n'est pas une seconde section, c'est le second temps de
   celle-ci. Un titre de plus l'aurait coupée en deux. */
.feuille-route-entete {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px;
  align-items: end; margin: 68px 0 42px;
}
.feuille-route-entete p { max-width: 480px; margin: 0; color: var(--encre-douce); font-size: 13px; line-height: 1.7; }

.feuille-route {
  position: relative;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
}
/* Le fil du temps, et il passe AU-DESSUS des fonds de maison (z-index 2 contre
   1) : une veine court sur la roche, elle ne passe pas dessous. L'état FINAL
   vit dans cette règle — sans script, le fil est déjà tracé. */
.feuille-route::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; z-index: 2;
  background-image: linear-gradient(90deg, var(--or), var(--filet-or));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  pointer-events: none;
}
html[data-mouvement] .feuille-route::before { background-size: 0% 2px; }
html[data-mouvement] .feuille-route.vu::before {
  background-size: 100% 2px;
  transition: background-size var(--site-duree-long) var(--site-sortie) 120ms;
}
.feuille-route > li {
  position: relative; min-height: 176px;
  padding: 30px 16px 26px;
  border-right: 1px solid var(--bordure);
}
.feuille-route > li:last-child { border-right: 0; }
/* Le fond de la maison : six pixels de roche, dont deux dépassent de part et
   d'autre du fil. C'est ce dépassement qui fait lire « l'or court SUR le
   fond » plutôt que « deux traits l'un sous l'autre ». */
.feuille-route > li::before {
  content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 6px; z-index: 1;
  background: var(--maison);
  pointer-events: none;
}
/* Le losange se pose SUR le fil (top: -4px pour un côté de 7 px), pas sous lui :
   c'est ce qui accroche le jalon à la ligne du temps. Posé dessous, chaque date
   flottait dans sa case et la grille redevenait un tableau. Sa diagonale fait
   dix pixels : il dépasse donc de la roche des deux côtés, et reste lisible
   sur le vert comme sur le noir. */
.feuille-route > li > i {
  position: absolute; top: -4px; left: 16px; z-index: 3;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--fond); border: 1px solid var(--filet-or);
}
.feuille-route > li[data-etat="livre"] > i,
.feuille-route > li[data-etat="prochain"] > i { background: var(--or); border-color: var(--or); }
.feuille-route b {
  display: block; color: var(--encre-attenuee);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.feuille-route > li[data-etat="livre"] b,
.feuille-route > li[data-etat="prochain"] b { color: var(--accent-texte); }
.feuille-route strong { display: block; margin-top: 13px; font: 400 21px var(--police-marque); }
.feuille-route span { display: block; margin-top: 7px; color: var(--encre-douce); font-size: 12px; line-height: 1.5; }
/* La mention n'existe QUE sur un jalon tenu — le drapeau est levé à la main,
   jamais déduit du calendrier (app/marketing/feuille_de_route.py). */
.feuille-route em {
  display: block; margin-top: 11px; color: var(--succes);
  font-size: 10px; font-style: normal; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
/* La dernière case n'est pas un jalon : la roche s'y arrête net, son losange
   reste creux et son texte s'atténue. Rien n'y est daté, donc rien n'y attire
   l'œil — et l'or, lui, continue seul. */
.feuille-route-suite::before { display: none; }
.feuille-route-suite > i { border-color: var(--filet-or-faible); }
.feuille-route-suite b { color: var(--encre-attenuee); }
.feuille-route-suite strong { color: var(--encre-douce); }

/* Au-delà de 1080 px, et là seulement, l'or s'éteint sur la dernière case :
   à sept colonnes elle commence à 85,7 %, la roche s'y arrête déjà, et la
   feuille de route continue au-delà du cadre. Aux dispositions plus étroites
   la dernière case n'est plus au bord droit — un dégradé qui s'y éteindrait
   couperait le fil au milieu d'une rangée. */
@media (min-width: 1081px) {
  .feuille-route::before {
    background-image: linear-gradient(90deg, var(--or), var(--or) 78%,
                                      var(--filet-or) 88%, transparent);
  }
}

/* Sept colonnes ne tiennent pas sous 1080 px : quatre, puis une. La borne
   basse est écrite dans CETTE requête et non dans une seconde `max-width` plus
   loin — sans elle, `:nth-last-child(-n+3)` (plus spécifique que `> li`)
   continuerait d'effacer des filets dans la disposition en colonne. */
@media (min-width: 721px) and (max-width: 1080px) {
  .feuille-route { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feuille-route > li { border-bottom: 1px solid var(--bordure); }
  .feuille-route > li:nth-child(4n) { border-right: 0; }
  .feuille-route > li:nth-last-child(-n+3) { border-bottom: 0; }
  /* Le fil ne longe plus que la première rangée : le fond de maison, lui,
     reste sur chaque case et devient l'étiquette de la maison. Quatre pixels
     et non six — sans l'or dessus, six feraient une barre. */
  .feuille-route > li::before { top: -1px; height: 4px; }
  .feuille-route > li:nth-child(-n+4)::before { top: -4px; height: 6px; }
  .feuille-route-entete { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 980px) {
  .gamme-hbs { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .feuille-route { grid-template-columns: 1fr; }
  .feuille-route > li {
    min-height: 0; padding: 22px 0 20px 26px;
    border-right: 0; border-bottom: 1px solid var(--bordure);
  }
  .feuille-route > li:last-child { border-bottom: 0; }
  /* En colonne, la roche se dresse : chaque case porte son fond de maison sur
     le bord gauche, et les six se touchent — on lit la même évolution, de haut
     en bas. Le fil d'or reste le trait qui ouvre la liste : le basculer à la
     verticale demanderait d'inverser `background-size` partout, y compris dans
     la règle `!important` de prefers-reduced-motion, où l'erreur serait muette. */
  .feuille-route > li::before {
    top: 0; bottom: 0; left: 0; right: auto; width: 4px; height: auto;
  }
  /* Le losange se centre sur la roche (4 px de large, donc l'axe à 2 px) au
     lieu de pointer un fil horizontal qui n'est plus à sa hauteur. */
  .feuille-route > li > i { left: -2px; top: 22px; }
  .feuille-route-entete { grid-template-columns: 1fr; gap: 16px; margin: 48px 0 32px; }
}

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

/* --- Structure de la vitrine -------------------------------------------- */
.site-public { margin: 0; background: var(--surface); color: var(--encre); }
.site-public h1, .site-public h2, .site-public h3, .site-public p { margin-top: 0; }
.site-entete {
  position: relative; z-index: 10; max-width: 1240px; height: 76px; margin: 0 auto;
  padding: 0 28px; display: flex; align-items: center; gap: 36px;
  border-bottom: 1px solid var(--bordure);
}
.site-marque {
  display: inline-flex; align-items: center; gap: 10px; color: var(--primaire);
  font: 400 24px/1 var(--police-marque); letter-spacing: .025em; text-decoration: none;
}
.site-marque:hover { color: var(--primaire); text-decoration: none; }
.site-marque .picto { color: var(--accent); }
.site-navigation { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-navigation a { color: var(--encre-douce); font-size: 13px; font-weight: 500; text-decoration: none; }
.site-navigation a:hover { color: var(--primaire); }
.site-actions { display: flex; align-items: center; gap: 4px; }
/* Sélecteur de langue — deux liens, jamais un menu : à deux entrées, un menu
   demande deux gestes là où un lien en demande un. */
.site-langue { display: inline-flex; align-items: center; margin-right: 10px; }
.site-langue a {
  /* 32 px de côté au moins : deux lettres de 11 px font une cible de 23 px,
     sous le minimum tactile. La boîte grandit, le dessin ne change pas. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
  padding: 0 6px; color: var(--encre-douce); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-decoration: none;
}
.site-langue a:hover { color: var(--primaire); text-decoration: none; }
.site-langue a[aria-current] { color: var(--primaire); }
/* Le filet séparateur est décoratif : il ne doit rien ajouter à la lecture
   d'un lecteur d'écran, d'où le pseudo-élément plutôt qu'un caractère. */
.site-langue a + a { border-left: 1px solid var(--bordure); }
.site-eyebrow {
  display: flex; align-items: center; gap: 10px; color: var(--primaire);
  font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
}
/* Le filet est un dégradé et non un aplat : c'est ce qui lui permet de se
   tracer à la révélation (emploi 7, section mouvement). L'état de base reste
   le filet ENTIER — sans script, il est simplement là. */
.site-eyebrow > span {
  display: block; width: 28px; height: 1px;
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 50%; background-size: 100% 1px;
}
.site-eyebrow.clair { color: var(--sur-vert); }
.site-eyebrow.clair > span { background-image: linear-gradient(90deg, var(--or), var(--or)); }
.btn-grand { height: 42px; padding: 0 20px; }
.btn-clair { background: var(--surface); border-color: var(--surface); color: var(--primaire); }
.btn-clair:hover { background: var(--primaire-tint); color: var(--primaire-fonce); }

.hero-public {
  max-width: 1240px; min-height: 650px; margin: 0 auto; padding: 74px 28px 90px;
  display: grid; grid-template-columns: minmax(390px, .82fr) minmax(520px, 1.18fr);
  align-items: center; gap: 64px; overflow: hidden;
}
.hero-public-texte h1 {
  margin: 24px 0 24px; color: var(--encre);
  font: 400 clamp(44px, 5.1vw, 72px)/1.02 var(--police-marque);
  letter-spacing: 0;
}
.hero-public-texte h1 em { color: var(--primaire); font-style: normal; }
.hero-public-intro { max-width: 560px; color: var(--encre-douce); font-size: 17px; line-height: 1.7; }
/* Le héros porte trois actions depuis le 17.09.2026 (le film en plus) : les liens se replient
   ensemble plutôt que de casser leurs libellés en deux lignes chacun. */
.hero-public-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.lien-fleche { color: var(--encre); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.lien-fleche span { margin-left: 6px; color: var(--accent-texte); }

.apercu-produit {
  position: relative; width: 720px; height: 470px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: 7px;
  box-shadow: 0 26px 70px rgba(4, 51, 31, .13);
  transform: perspective(1500px) rotateY(-3deg) rotateX(1deg);
}
.apercu-produit::before {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px;
  right: -80px; top: -85px; border: 1px solid var(--filet-or-faible);
  transform: rotate(45deg);
}
.apercu-barre { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--bordure); }
.apercu-logo { display: flex; align-items: center; gap: 7px; color: var(--primaire); font: 15px var(--police-marque); }
.apercu-logo .picto { color: var(--accent); }
.apercu-points { display: flex; gap: 5px; }
.apercu-points i { width: 6px; height: 6px; border: 1px solid var(--bordure); border-radius: 50%; }
.apercu-corps { display: grid; grid-template-columns: 132px 1fr; height: calc(100% - 40px); }
.apercu-menu { padding: 19px 10px; background: var(--vert-profond); color: var(--sur-vert); }
.apercu-menu span { display: flex; align-items: center; gap: 7px; height: 33px; padding: 0 9px; margin-bottom: 3px; font-size: 9px; border-radius: 3px; }
.apercu-menu .icone { width: 13px; }
.apercu-menu span.actif { color: white; background: rgba(255,255,255,.10); }
.apercu-page { padding: 25px 26px; background: var(--fond); }
.apercu-salut { display: flex; flex-direction: column; margin-bottom: 18px; }
.apercu-salut small { color: var(--encre-attenuee); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.apercu-salut strong { margin-top: 4px; font: 20px var(--police-marque); }
.apercu-kpis { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border: 1px solid var(--bordure); }
.apercu-kpis > div { padding: 13px; border-right: 1px solid var(--bordure); }
.apercu-kpis > div:last-child { border-right: 0; }
.apercu-kpis small, .apercu-kpis strong, .apercu-kpis span { display: block; }
.apercu-kpis small { color: var(--encre-attenuee); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.apercu-kpis strong { margin: 8px 0 4px; font-size: 14px; font-weight: 500; }
.apercu-kpis span { color: var(--succes); font-size: 8px; }
.apercu-grille { display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; margin-top: 11px; }
.apercu-graphique, .apercu-alertes { min-height: 210px; padding: 14px; background: var(--surface); border: 1px solid var(--bordure); }
.apercu-graphique > div { display: flex; justify-content: space-between; font-size: 9px; }
.apercu-graphique small { color: var(--encre-attenuee); }
.apercu-graphique svg { width: 100%; height: 145px; margin-top: 12px; overflow: visible; }
.apercu-graphique .zone { fill: var(--primaire-tint); }
.apercu-graphique .courbe { fill: none; stroke: var(--primaire); stroke-width: 2; }
.apercu-alertes > strong { display: block; margin-bottom: 10px; font-size: 10px; }
.apercu-alertes p { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 0; border-top: 1px solid var(--bordure); font-size: 8px; }
.apercu-alertes p i { flex: 0 0 auto; width: 6px; height: 6px; background: var(--info); border-radius: 50%; }
.apercu-alertes p i.orange { background: var(--avert); }
.apercu-alertes p i.vert { background: var(--succes); }
.apercu-alertes p span { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.apercu-alertes p small { color: var(--encre-attenuee); font-size: 7px; }
.apercu-alertes p b { font-size: 7px; font-weight: 500; color: var(--encre-douce); }

.site-bande-metier { min-height: 88px; padding: 20px 32px; display: flex; align-items: center; justify-content: center; gap: 26px; color: var(--sur-vert); background: var(--vert-profond); }
.site-bande-metier span { color: rgba(201,220,209,.62); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.site-bande-metier strong { color: white; font: 400 17px var(--police-marque); }
.site-bande-metier i { width: 3px; height: 3px; background: var(--or); transform: rotate(45deg); }
.site-section { max-width: 1240px; margin: 0 auto; padding: 105px 28px; }
.site-section-teintee { max-width: none; padding-left: max(28px, calc((100vw - 1184px) / 2)); padding-right: max(28px, calc((100vw - 1184px) / 2)); background: var(--fond); }
.site-section-entete { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 55px; }
.site-section-entete h2, .site-cta h2, .souscription-contenu h2 {
  margin: 16px 0 0; font: 400 clamp(34px, 4vw, 52px)/1.12 var(--police-marque);
  letter-spacing: 0;
}
.site-section-entete > p { max-width: 480px; margin-bottom: 4px; color: var(--encre-douce); line-height: 1.7; }
.parcours-oikos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.parcours-oikos article { position: relative; min-height: 270px; padding: 30px 26px; border-right: 1px solid var(--bordure); }
.parcours-oikos article:last-child { border-right: 0; }
.parcours-oikos article > b { position: absolute; right: 20px; top: 20px; color: var(--bordure); font: 26px var(--police-marque); }
.parcours-oikos .icone { width: 27px; height: 27px; color: var(--primaire); }
.parcours-oikos h3, .fonctionnalites-public h3 { margin: 52px 0 12px; font: 400 22px var(--police-marque); }
.parcours-oikos p, .fonctionnalites-public p { margin: 0; color: var(--encre-douce); font-size: 13px; line-height: 1.65; }
.fonctionnalites-public { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fonctionnalites-public article { min-height: 260px; padding: 28px; background: var(--surface); border: 1px solid var(--bordure); }
.fonctionnalites-public article.fonction-large { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; background: var(--vert-profond); color: white; border-color: var(--vert-profond); }
.fonctionnalites-public .fonction-large p { color: var(--sur-vert); }
.fonctionnalites-public h3 { margin-top: 40px; }
/* oikos.css teinte tous les h1–h4 à l'encre : sur un aplat vert profond, le
   blanc posé sur le conteneur ne les atteint jamais par héritage. Sans cette
   règle, chaque titre écrit sur fond sombre naît noir sur vert — constaté en
   production sur « Un stock qui raconte les mouvements ». Tout nouveau bloc
   sombre s'ajoute ici (la sonde de test_responsive_mobile.py balaye). */
.fonction-large h3, .site-cta h2, .tarif-public h2, .section-preuve h2 { color: #fff; }
.numero-public { color: var(--accent-texte); font-size: 11px; letter-spacing: .12em; }
.fonction-large .numero-public { color: var(--or); }
.mini-inventaire { align-self: center; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 15px; padding: 18px; color: var(--encre); background: var(--surface); border: 1px solid var(--filet-or); }
.mini-objet { display: flex; align-items: center; justify-content: center; height: 72px; color: var(--accent); background: var(--accent-tint); }
.mini-inventaire div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.mini-inventaire small { color: var(--encre-attenuee); font-size: 9px; letter-spacing: .08em; }
.mini-inventaire strong { font: 15px var(--police-marque); }
.mini-inventaire div span { color: var(--encre-douce); font-size: 10px; }
.mini-statut { grid-column: 2; width: max-content; padding: 3px 7px; color: var(--succes); background: var(--succes-tint); font-size: 8px; }
.site-cta { position: relative; min-height: 310px; padding: 70px max(28px, calc((100vw - 1184px) / 2)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; color: white; background: var(--vert-profond); overflow: hidden; }
.site-cta > div:not(.site-cta-picto) { position: relative; z-index: 1; max-width: 750px; }
.site-cta h2 { margin: 16px 0 15px; }
.site-cta p { max-width: 620px; margin: 0; color: var(--sur-vert); line-height: 1.65; }
.site-cta-picto { position: absolute; right: 25%; top: -24px; color: rgba(194,154,75,.1); transform: rotate(18deg); }
.site-cta > a { position: relative; z-index: 1; }
.site-pied { min-height: 120px; max-width: 1240px; margin: 0 auto; padding: 32px 28px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }
.site-pied p { margin: 0; color: var(--encre-attenuee); font-size: 11px; }
.site-pied > div { display: flex; gap: 24px; color: var(--encre-attenuee); font-size: 11px; }
.site-pied a { color: inherit; }

/* --- Offres et aperçu de paiement --------------------------------------- */
.offres-intro { max-width: 850px; margin: 0 auto; padding: 70px 28px 45px; text-align: center; }
.offres-intro .site-eyebrow { justify-content: center; }
.offres-intro h1 {
  margin: 20px 0 16px; font: 400 clamp(42px, 5vw, 62px)/1.08 var(--police-marque);
  letter-spacing: 0;
}
.offres-intro > p { max-width: 650px; margin: 0 auto; color: var(--encre-douce); line-height: 1.7; }
.retour-site { display: inline-block; margin-bottom: 30px; color: var(--encre-attenuee); font-size: 12px; text-decoration: none; }
.souscription-apercu { max-width: 1040px; margin: 0 auto 90px; display: grid; grid-template-columns: 1.4fr .8fr; border: 1px solid var(--bordure); background: var(--surface); }
.souscription-contenu { padding: 44px 48px; }
.souscription-contenu h2 { margin-bottom: 28px; font-size: 36px; }
.etapes-paiement { display: flex; align-items: center; margin-bottom: 28px; }
.etapes-paiement span { display: flex; align-items: center; gap: 7px; color: var(--encre-attenuee); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.etapes-paiement span b { display: flex; width: 23px; height: 23px; align-items: center; justify-content: center; border: 1px solid var(--bordure); border-radius: 50%; font-size: 9px; }
.etapes-paiement span.active { color: var(--primaire); }
.etapes-paiement span.active b { color: white; background: var(--primaire); border-color: var(--primaire); }
.etapes-paiement i { width: 28px; height: 1px; margin: 0 9px; background: var(--bordure); }
.apercu-local { margin-bottom: 24px; padding: 12px 14px; background: var(--info-tint); border-left: 2px solid var(--info); }
.apercu-local strong { color: var(--info); font-size: 11px; }
.apercu-local p { margin: 4px 0 0; color: var(--encre-douce); font-size: 10px; line-height: 1.5; }
.champ-apercu { margin-bottom: 13px; }
.champ-apercu label { display: block; margin-bottom: 4px; color: var(--encre-douce); font-size: 11px; font-weight: 500; }
.champ-apercu > div { min-height: 36px; padding: 9px 11px; color: var(--encre-attenuee); background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon); font-size: 11px; }
.champ-apercu input {
  width: 100%; min-height: 40px; padding: 9px 11px;
  color: var(--encre); background: var(--fond);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  font: inherit; font-variant-numeric: tabular-nums;
}
.champ-apercu input:focus { border-color: var(--primaire); outline: none; }
.champ-apercu p { margin: 6px 0 0; color: var(--encre-attenuee); font-size: 10px; line-height: 1.45; }
.champs-apercu-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champs-coordonnees {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-bottom: 4px;
}
.souscription-contenu .btn-grand { width: 100%; justify-content: center; margin-top: 6px; }
.formule-abonnement { margin: 0; }
/* Le choix de durée n'avait aucune règle : ajouté en même temps que
   l'engagement de six ou douze mois, il était resté au style par défaut du
   navigateur. Le choix le plus engageant de la page — 894 ou 1'788 CHF — était
   donc le seul bloc étriqué du formulaire, juste au-dessus de deux options de
   mise en place bien plus présentes que lui. Mêmes règles qu'elles, avec un peu
   plus d'air et un prix un point plus grand. */
.choix-duree { margin: 18px 0 16px; padding: 0; border: 0; }
.choix-duree legend {
  margin-bottom: 8px; color: var(--encre-douce);
  font-size: 11px; font-weight: 500;
}
.choix-duree label {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  margin-bottom: 8px; padding: 14px;
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--rayon); cursor: pointer;
}
/* `align-self: start` : le libellé est une grille, et un élément de grille
   s'étire par défaut à la hauteur de sa rangée. Le bouton radio mesurait donc
   13 × 34 px, son point peint au milieu de cette boîte — onze pixels SOUS le
   nom de la formule qu'il choisit, et le `margin-top: 3px` qui suit ne servait
   à rien. Même défaut et même correctif que `.accepter-conditions input` plus
   bas, qui le tient par `flex: none` parce que son libellé est en flex. */
.choix-duree input { margin-top: 3px; accent-color: var(--primaire); align-self: start; }
.choix-duree span {
  min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
}
.choix-duree strong { color: var(--encre); font-size: 12px; }
.choix-duree b { color: var(--primaire); font-size: 12px; font-weight: 600; }
.choix-duree small {
  grid-column: 1 / -1; color: var(--encre-attenuee);
  font-size: 10px; line-height: 1.45;
}
.choix-mise-en-place {
  margin: 18px 0 16px; padding: 0; border: 0;
}
.choix-mise-en-place legend {
  margin-bottom: 8px; color: var(--encre-douce);
  font-size: 11px; font-weight: 500;
}
.choix-mise-en-place label {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  margin-bottom: 8px; padding: 12px;
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--rayon); cursor: pointer;
}
/* Même grille, même étirement : 13 × 48 px et le point dix-huit pixels sous
   le nom de l'option. Voir `.choix-duree input`. */
.choix-mise-en-place input { margin-top: 3px; accent-color: var(--primaire); align-self: start; }
.choix-mise-en-place span {
  min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
}
.choix-mise-en-place strong { color: var(--encre); font-size: 12px; }
.choix-mise-en-place b { color: var(--primaire); font-size: 11px; font-weight: 600; }
.choix-mise-en-place small {
  grid-column: 1 / -1; color: var(--encre-attenuee);
  font-size: 10px; line-height: 1.45;
}
.recapitulatif-offre { padding: 44px 34px; color: white; background: var(--vert-profond); }
.recapitulatif-offre .legende { color: var(--sur-vert); }
.recap-marque { display: flex; align-items: center; gap: 13px; margin: 25px 0; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.13); color: var(--or); }
.recap-marque div { display: flex; flex-direction: column; gap: 4px; color: white; }
.recap-marque strong { font: 18px var(--police-marque); }
.recap-marque small { color: var(--sur-vert); font-size: 9px; }
.recapitulatif-offre dl { margin: 0; }
.recapitulatif-offre dl div { display: flex; justify-content: space-between; margin-bottom: 13px; font-size: 11px; }
.recapitulatif-offre dt { color: var(--sur-vert); }
.recapitulatif-offre dd { margin: 0; }
.recap-total { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.recap-total strong { color: var(--or); font: 19px var(--police-marque); }
/* Deux classes ici aussi : `.recapitulatif-offre > p` gagnerait sinon, et la
   ligne du calendrier tomberait à la taille du pied de bloc. */
.recapitulatif-offre .recap-suite { margin: 10px 0 0; color: var(--sur-vert); font-size: 10px; line-height: 1.5; }
.recapitulatif-offre > p { margin: 22px 0 0; color: var(--sur-vert); font-size: 9px; line-height: 1.55; }
.offres-aide { max-width: 1040px; margin: 0 auto 90px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; background: var(--fond); border: 1px solid var(--bordure); }
.offres-aide > div { display: flex; align-items: center; gap: 14px; }
.offres-aide > div > span { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--primaire); border: 1px solid var(--primaire); border-radius: 50%; font: 18px var(--police-marque); }
.offres-aide strong { font-size: 12px; }
.offres-aide p { margin: 4px 0 0; color: var(--encre-attenuee); font-size: 10px; }
.offres-aide .reference-paiement { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.note-mode-test { max-width: 650px; margin: 18px auto 0; padding: 8px 14px;
  border: 1px dashed var(--bordure); color: var(--encre-attenuee); font-size: 11px; }

/* --- Pack unique sur la one-page ---------------------------------------- */
.tarif-public {
  padding: clamp(24px, 4vw, 54px);
  color: white;
  background: var(--vert-profond);
}

.tarif-public-cadre {
  max-width: 1184px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 88px) clamp(22px, 7vw, 88px);
  border: 1px solid var(--filet-or);
  text-align: center;
}

.tarif-public-marque {
  margin-bottom: 20px;
  color: var(--or);
}

.tarif-public-prix {
  display: grid;
  grid-template-columns: auto auto;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  align-items: end;
  justify-content: center;
  column-gap: 10px;
}

.tarif-public-prix strong {
  color: var(--or);
  font: 400 clamp(76px, 10vw, 126px)/.82 var(--police-marque);
  letter-spacing: 0;
}

.tarif-public-prix > span {
  padding-bottom: 8px;
  color: var(--or);
  font: 400 clamp(24px, 3vw, 36px)/1 var(--police-marque);
}

.tarif-public-prix p {
  grid-column: 1 / -1;
  margin: 22px 0 0;
  color: var(--sur-vert);
  font-size: 13px;
}

.tarif-public h2 {
  max-width: 900px;
  margin: 42px auto 36px;
  color: white;
  font: 400 clamp(24px, 3.2vw, 38px)/1.25 var(--police-marque);
  letter-spacing: .015em;
  text-transform: uppercase;
}

.tarif-public-avantages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0 auto 32px;
  border-top: 1px solid var(--filet-or-faible);
  border-bottom: 1px solid var(--filet-or-faible);
}

.tarif-public-avantages article {
  padding: 24px 22px;
  border-left: 1px solid var(--filet-or-faible);
}

.tarif-public-avantages article:first-child {
  border-left: 0;
}

.tarif-public-avantages strong,
.tarif-public-avantages p {
  display: block;
}

.tarif-public-avantages strong {
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
}

.tarif-public-avantages p,
.tarif-public-repere,
.tarif-public-prestations {
  color: var(--sur-vert);
  font-size: 11px;
  line-height: 1.65;
}

.tarif-public-avantages p,
.tarif-public-repere {
  margin: 0;
}

.tarif-public-prestations {
  max-width: 760px;
  margin: 8px auto 26px;
}

.tarif-public-prestations strong {
  color: white;
}

.tarif-public .btn {
  justify-content: center;
}

/* --- Détail du pack et aperçu de souscription --------------------------- */
.offre-unique {
  max-width: 1040px;
  margin: 12px auto 72px;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  border: 1px solid var(--bordure);
  background: var(--surface);
}

.offre-unique-prix {
  position: relative;
  min-height: 500px;
  padding: 54px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  background: var(--vert-profond);
  text-align: center;
}

.offre-unique-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 5px 8px;
  color: var(--or);
  border: 1px solid var(--filet-or);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.offre-unique-marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-bottom: 34px;
  color: var(--or);
}

.offre-unique-marque span {
  color: white;
  font: 24px var(--police-marque);
  letter-spacing: .08em;
}

.offre-unique-montant {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: var(--or);
}

.offre-unique-montant strong {
  font: 400 clamp(72px, 9vw, 102px)/.8 var(--police-marque);
  letter-spacing: 0;
}

.offre-unique-montant span {
  padding-bottom: 6px;
  font: 26px var(--police-marque);
}

.offre-unique-prix p {
  margin: 22px 0 9px;
  color: var(--sur-vert);
  font-size: 13px;
}

.offre-unique-prix small {
  color: var(--sur-vert);
  font-size: 10px;
}

/* Les trois cadences, sous le prix mensuel. Ce `<ul>` n'avait AUCUNE règle :
   il rendait des puces de navigateur dans une carte sombre. À deux lignes
   ça passait inaperçu ; à trois, non. */
.offre-unique-durees {
  width: 100%;
  /* 288 px et non 264 : à 264, « prélevé tous les six mois, 6 % de rabais »
     passait à deux lignes — cette cadence-là seulement, ce qui désalignait
     les trois. Élargir tient le libellé explicite ; le raccourcir en
     « −6 % » aurait tenu la largeur en perdant le mot qui vend. */
  max-width: 288px;
  margin: 16px 0 14px;
  padding: 0;
  display: grid;
  list-style: none;
  border: 1px solid var(--filet-or);
}

.offre-unique-durees li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  text-align: left;
}

/* Le filet naît ENTRE deux lignes : `+ li` évite le trait en tête de liste,
   qui doublerait la bordure du cadre. Et aucun fond n'est peint ici — le bloc
   parent est déjà en vert profond. Repeindre la même couleur créerait un bloc
   sombre de plus, à qui la charte réclamerait ses règles de titres clairs :
   c'est exactement ce que le garde-fou du 02.09 a refusé. */
.offre-unique-durees li + li {
  border-top: 1px solid var(--filet-or);
}

.offre-unique-durees strong {
  color: var(--or);
  font: 15px var(--police-marque);
  white-space: nowrap;
}

.offre-unique-durees span {
  color: var(--sur-vert);
  font-size: 9px;
  line-height: 1.4;
}

/* Sélecteur en deux classes, et non `.offre-unique-engagement` seul :
   `.offre-unique-prix p` porte déjà une taille et une couleur, et une classe
   simple perd contre classe + élément. */
.offre-unique-prix .offre-unique-engagement {
  margin: 0 0 10px;
  padding: 6px 12px;
  color: var(--or);
  border: 1px solid var(--filet-or);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* L'essai gratuit se demande, il ne se clique pas : le bloc porte une adresse
   et pas un bouton. Le trait tireté le distingue des deux blocs pleins qui
   l'entourent sans lui donner le poids d'une seconde action principale. */
.offre-essai {
  margin: 18px 0 0;
  padding: 14px 16px;
  display: grid;
  gap: 4px;
  border: 1px dashed var(--bordure);
}

.offre-essai strong { color: var(--encre); font-size: 12px; }
.offre-essai a { color: var(--primaire); font-size: 11px; }
.offre-essai small { color: var(--encre-douce); font-size: 10px; line-height: 1.55; }

.offre-unique-detail {
  padding: 48px;
}

.offre-unique-detail h2 {
  margin: 17px 0 28px;
  font: 400 clamp(30px, 4vw, 43px)/1.12 var(--police-marque);
  letter-spacing: 0;
}

.offre-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offre-modules li {
  position: relative;
  padding-left: 20px;
  color: var(--encre-douce);
  font-size: 12px;
  line-height: 1.45;
}

.offre-modules li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--succes);
}

.offre-engagements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 30px 0 0;
  background: var(--bordure);
  border: 1px solid var(--bordure);
}

.offre-engagements span {
  min-width: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--encre-attenuee);
  background: var(--fond);
  font-size: 10px;
  line-height: 1.45;
}

.offre-engagements strong {
  color: var(--encre);
  font-size: 11px;
}

.offre-prestations {
  margin: 22px 0;
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  background: var(--accent-tint);
}

.offre-prestations strong {
  color: var(--accent-texte);
  font-size: 11px;
}

.offre-prestations p {
  margin: 5px 0 0;
  color: var(--encre-douce);
  font-size: 10px;
  line-height: 1.55;
}

.offre-unique-detail > .btn {
  justify-content: center;
}

/* --- Le Pack Solo (11.09.2026) --------------------------------------------
   Même grille que le bloc principal, colonne de prix plus courte : il n'a ni
   liste de modules ni bloc d'essai, et un min-height de 500 px laisserait un
   fond vert vide sous trois lignes de prix. */
.offre-solo { margin-top: -36px; }
.offre-solo .offre-unique-prix { min-height: 0; padding: 48px 36px 40px; }
.offre-solo .offre-unique-detail h2 { margin-bottom: 18px; }
.offre-solo-texte { margin: 0 0 24px; color: var(--encre-douce); font-size: 12px; line-height: 1.7; }
.offre-solo .offre-engagements { margin-bottom: 28px; }

/* Le pack retenu : la carte d'une cadence (`.choix-duree label`), sans bouton
   radio — il s'affiche, il ne se coche pas, c'est le nombre d'utilisateurs
   au-dessus qui le désigne. Remplacé hors bande à chaque saisie. */
.pack-retenu { margin: 0 0 16px; }
.pack-retenu-legende { display: block; margin-bottom: 8px; color: var(--encre-douce); font-size: 11px; font-weight: 500; }
.pack-retenu-carte {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  padding: 14px; background: var(--fond); border: 1px solid var(--primaire);
  border-radius: var(--rayon);
}
.pack-retenu-carte svg { width: 20px; height: 20px; color: var(--primaire); }
.pack-retenu-carte > span { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.pack-retenu-carte strong { color: var(--encre); font-size: 12px; }
.pack-retenu-carte b { color: var(--primaire); font-size: 12px; font-weight: 600; }
.pack-retenu-carte small { grid-column: 1 / -1; color: var(--encre-attenuee); font-size: 10px; line-height: 1.45; }
.pack-retenu p { margin: 6px 0 0; color: var(--encre-attenuee); font-size: 10px; line-height: 1.45; }
.recapitulatif-offre .recap-refus dd { color: white; font-size: 11px; line-height: 1.55; }

.souscription-apercu:target {
  border-color: var(--primaire);
}

.souscription-contenu button[disabled] {
  cursor: not-allowed;
  opacity: .58;
}

/* --- Veine d'Or — seules classes autorisées ------------------------------
   `docs/MOTIF-VEINE-DOR.md` fait autorité. Le motif est une matière STATIQUE :
   aucune de ces classes ne porte d'animation, de transition ni de transform,
   et aucune ne vit dans un conteneur révélé au défilement — une révélation
   porte une translation, et le motif se mettrait à glisser. Un test tient les
   deux règles.
   Les fichiers du fond sont servis en mobile d'abord : le préchargement de
   `accueil.html` porte les mêmes media queries, sans quoi la variante 1920
   serait téléchargée pour rien sous 1280 px. */
/* Les classes de la Veine d'Or (.vd-fond, .vd-veine, .vd-tranche, .vd-sceau)
   sont retirées avec leurs images : la colonne ionique les remplace
   (docs/MOTIF-COLONNE.md, classes .col-* dans oikos.css). */

/* --- Le rythme en neuf temps --------------------------------------------
   Amendement du 24.08.2026 à MOTIF-VEINE-DOR.md. Trois blocs sombres, jamais
   deux qui se touchent : bande métier (2), la preuve (4), le tarif (7). */

/* Temps 1 — le hero porte le motif pleine page, et le TEXTE SEUL. L'aperçu
   produit descend au temps 4 : la spec demande « texte en zone calme ». */
.hero-public {
  max-width: none; min-height: 600px;
  padding: 96px max(28px, calc((100vw - 1184px) / 2)) 104px;
  display: block; overflow: hidden;
}
.hero-public-texte { max-width: 660px; }

/* Temps 4 — la preuve. Vert profond, tranche kintsugi en pied. Le contenu
   garde ses 96 px au-dessus des veines, comme la charte l'exige. */
.site-section.section-preuve {
  position: relative; max-width: none;
  /* 84 px de tranche + les 96 px que la charte exige entre le contenu et les
     veines : mesure faite, 156 px n'en laissaient que 72. */
  padding: 105px max(28px, calc((100vw - 1184px) / 2)) 180px;
  color: var(--sur-vert); background: var(--vert-profond); overflow: hidden;
}
.section-preuve h2 { color: white; }
.section-preuve .site-section-entete > p { color: var(--sur-vert); }
.preuve-grille { display: grid; grid-template-columns: 320px 1fr; gap: 60px; align-items: center; }
.preuve-chiffres { display: grid; gap: 30px; }
.preuve-chiffres > div > b {
  display: block; color: var(--or); font-variant-numeric: tabular-nums;
  font: 400 clamp(38px, 4vw, 54px)/1 var(--police-marque);
}
.preuve-chiffres > div > span { display: block; margin-top: 8px; color: var(--sur-vert); font-size: 13px; line-height: 1.5; }
/* Les chiffres du faux tableau de bord sont inventés : on le dit, plutôt que
   de les présenter comme un fait (règle « aucune valeur métier inventée »). */
.mention-exemple {
  display: inline-block; margin-top: 20px; padding: 5px 11px;
  border: 1px solid rgba(201,220,209,.3); color: rgba(201,220,209,.82);
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
}
.section-preuve .apercu-produit {
  width: 100%; height: auto; min-height: 470px; transform: none;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 30px 70px -18px rgba(0,0,0,.55);
}
/* Le losange doré en fuite se perdait sur le vert et sortait du cadre, que
   la tranche oblige à garder en overflow:hidden. */
.section-preuve .apercu-produit::before { display: none; }

/* --- Le film ---------------------------------------------------------------
   Le film occupe LE CADRE DE L'APERÇU, pas un bloc de plus : la page garde ses
   neuf temps, et le temps 4 gagne sa preuve filmée sans rien pousser.

   Trois règles portent tout le comportement :
   1. le déclencheur couvre le cadre entier — c'est l'aperçu qui répond au clic
      (emploi 5, « réservé à ce qui répond réellement au clic ») ;
   2. il ne pose AUCUN voile au repos : le dessin reste lisible, l'invitation
      tient dans la pastille et son cartouche ;
   3. le cadre ne prend les proportions du film qu'à `data-etat="lecture"`,
      c'est-à-dire à la première image réellement affichée. Avant, le dessin
      tient la place ; après, le cadre est en 16/9 et le film le remplit sans
      une bande noire. */
.film { position: relative; }
.film-declencheur {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 14px;
  padding: 24px; margin: 0;
  font: inherit; color: white; text-align: left;
  background: transparent; border: 0; cursor: pointer;
}
/* L'outline global est vert (oikos.css) : invisible sur le vert profond. Le
   doré est la couleur de focus des moments forts, et ce cadre en est un. */
.film-declencheur:focus-visible { outline-color: var(--or); outline-offset: -3px; }
/* Le voile de survol est un `::before` et non un fond : posé sur le bouton
   lui-même, il passerait AU-DESSUS de la pastille et du cartouche. */
.film-declencheur::before {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  background: rgba(4, 51, 31, 0);
  transition: background var(--site-duree-court) var(--site-entree);
}
.film-declencheur:hover::before,
.film-declencheur:focus-visible::before { background: rgba(4, 51, 31, .16); }
.film-pastille, .film-cartouche { position: relative; }
.film-pastille {
  flex: 0 0 auto; width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  color: var(--vert-profond); background: var(--or); border-radius: 50%;
  transition: background var(--site-duree-court) var(--site-entree);
}
.film-declencheur:hover .film-pastille,
.film-declencheur:focus-visible .film-pastille { background: #D8B368; }
/* Comme partout dans cette feuille, l'emploi fixe la taille du picto. Le
   triangle plein pèse à gauche : deux pixels le recentrent optiquement. */
.film-triangle { width: 21px; height: 21px; margin-left: 2px; }
.film-cartouche {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 15px;
  background: rgba(4, 51, 31, .9); border: 1px solid var(--filet-or-faible);
}
.film-cartouche strong { font: 400 16px var(--police-marque); }
.film-cartouche small { color: rgba(201, 220, 209, .85); font-size: 11px; }

/* Le film hérite du cadre de l'aperçu — même bordure, même ombre, même rayon.
   Les trois valeurs sont recopiées de `.section-preuve .apercu-produit` : le
   dessin disparaît en lecture, le cadre doit rester. Le fond est la teinte
   exacte du film, relevée dans ses cartons d'ouverture (#0E1311).

   Aucun fondu, et c'est la règle de cette feuille : un état final ne dépend
   jamais d'une animation qui aboutit. Le film est posé SOUS le dessin, à pleine
   opacité, dès le clic ; le dessin est opaque et occupe la même boîte, donc il
   le couvre entièrement jusqu'à ce qu'il y ait une image à montrer. À cet
   instant le dessin s'efface — rien ne s'anime, rien ne peut rester à mi-chemin. */
.film-video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: contain; background: #0E1311;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px;
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .55);
}
/* Plein écran : la bordure et le rayon d'une fenêtre n'ont plus de sens. */
.film-video:fullscreen { border: 0; border-radius: 0; box-shadow: none; }
.film .apercu-produit { z-index: 1; }
.film[data-etat] .film-declencheur { display: none; }
/* Tant que le dessin tient la place, le cadre garde SA hauteur. À la première
   image, il prend celle du film : 16/9, sans une bande noire. */
.film[data-etat="lecture"] { aspect-ratio: 16 / 9; }
.film[data-etat="lecture"] .apercu-produit { display: none; }

/* Temps 6 — la sécurité. Claire : le schéma des bases cloisonnées suffit,
   le motif n'y a rien à joindre. */
.bases-isolees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.base-isolee { padding: 24px; background: var(--surface); border: 1px solid var(--bordure); }
.base-isolee--votre { border-color: var(--primaire); box-shadow: 0 10px 30px -14px rgba(0, 96, 57, .3); }
.base-isolee strong { display: block; font: 400 19px var(--police-marque); }
.base-isolee--votre strong { color: var(--primaire); }
.base-isolee small { display: block; color: var(--encre-attenuee); font-size: 12px; }
.base-isolee small + small { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--bordure); }
.socle-ovh {
  margin-top: 18px; padding: 15px 20px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--encre-douce); background: var(--fond); border: 1px solid var(--bordure); font-size: 13px;
}
/* Comme partout dans cette feuille, l'emploi fixe la taille du picto : sans
   cette regle le bouclier se rendait en 1142 px de cote et etirait la section
   a 1852 px de haut. */
.socle-ovh .icone { flex: 0 0 auto; width: 16px; height: 16px; color: var(--primaire); }
.trois-mots { display: flex; gap: 28px; margin-top: 24px; color: var(--encre-attenuee); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.trois-mots b { color: var(--accent-texte); font-weight: 600; }

/* Temps 7 — le sceau remplace le picto au-dessus du prix : deux ors au même
   endroit s'annulent, la leçon est consignée au 22.08. */
/* 34 px, et non les 14 d'origine : à quatorze, l'îlot d'or et le 149 se
   lisaient comme un seul bloc. Mesure relevée sur les planches du teaser et
   validée par Johann le 31.08.2026 (docs/V2-HOTEL-DES-VENTES.md). */

/* Temps 8 — le mot de la fin passe au CLAIR. Il suivait le tarif en vert
   profond : deux blocs sombres collés font une masse, pas une alternance. */
.site-cta {
  color: var(--encre); background: var(--surface);
  border-top: 1px solid var(--bordure);
}
.site-cta p { color: var(--encre-douce); }
.site-cta-picto { color: rgba(168, 121, 43, .09); }

/* Temps 9 — la veine signe le pied, une fois, centrée. */
.site-pied-veine { padding-top: 40px; }

@media (max-width: 980px) {
  .site-actions { margin-left: auto; }
  .hero-public { min-height: auto; padding-top: 60px; }
  .hero-public-texte { max-width: 700px; }
  .apercu-produit { width: min(720px, 100%); transform: none; }
  .preuve-grille { grid-template-columns: 1fr; gap: 40px; }
  .bases-isolees { grid-template-columns: 1fr; }
  .site-section-entete { grid-template-columns: 1fr; gap: 18px; }
  .parcours-oikos { grid-template-columns: 1fr 1fr; }
  .parcours-oikos article:nth-child(2) { border-right: 0; }
  .parcours-oikos article:nth-child(-n+2) { border-bottom: 1px solid var(--bordure); }
  .fonctionnalites-public { grid-template-columns: 1fr 1fr; }
  .fonctionnalites-public article.fonction-large { grid-column: 1 / -1; }
  .souscription-apercu { margin-left: 28px; margin-right: 28px; }
}

@media (max-width: 680px) {
  .site-entete { height: 66px; padding: 0 14px; gap: 10px; }
  /* « Se connecter » reste visible : le masquer retirait le seul chemin
     vers /connexion depuis la vitrine en portrait. La barre se resserre
     pour que tout tienne sur 360 px. */
  .site-marque { font-size: 20px; gap: 8px; }
  .site-actions { gap: 2px; }
  .site-langue { margin-right: 2px; }
  .site-langue a { padding: 4px 5px; }
  .site-actions .btn-discret { height: 34px; padding: 0 6px; font-size: 12px; }
  .site-actions .btn-primaire { height: 34px; padding: 0 9px; font-size: 12px; }
  .hero-public { padding: 48px 20px 65px; }
  /* Charte : sous 720 px la tranche tombe à 56 px et la veine à 120 px.
     On retire, on n'ajoute jamais. */
  .vd-tranche { height: 56px; }
  .vd-veine { width: 120px; }
  .vd-veine--centree { width: 160px; }
  .site-section.section-preuve { padding: 72px 20px 152px; }  /* 56 px de tranche + 96 */
  .section-preuve .apercu-produit { min-height: 360px; }
  .trois-mots { flex-wrap: wrap; gap: 12px 22px; }
  .hero-public-texte h1 { font-size: 43px; }
  .hero-public-actions { align-items: flex-start; flex-direction: column; }
  .apercu-produit { height: 360px; }
  /* Le cadre tombe à 360 px : la pastille et son cartouche se resserrent pour
     ne pas manger le dessin qu'ils invitent à remplacer. */
  .film-declencheur { padding: 16px; gap: 11px; }
  .film-pastille { width: 44px; height: 44px; }
  .film-triangle { width: 17px; height: 17px; }
  .film-cartouche { padding: 7px 12px; }
  .film-cartouche strong { font-size: 14px; }
  .film-cartouche small { font-size: 10px; }
  .apercu-corps { grid-template-columns: 92px 1fr; }
  .apercu-menu { padding: 14px 7px; }
  .apercu-menu span { padding: 0 5px; font-size: 0; }
  .apercu-menu .icone { width: 15px; }
  .apercu-page { padding: 17px 14px; }
  .apercu-kpis { grid-template-columns: 1fr 1fr; }
  .apercu-kpis > div:last-child { display: none; }
  .apercu-grille { grid-template-columns: 1fr; }
  .apercu-alertes { display: none; }
  .site-bande-metier { flex-wrap: wrap; gap: 12px 17px; }
  .site-bande-metier span { width: 100%; text-align: center; }
  .site-section { padding: 72px 20px; }
  .parcours-oikos, .fonctionnalites-public { grid-template-columns: 1fr; }
  .parcours-oikos article { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--bordure); }
  .fonctionnalites-public article.fonction-large { grid-template-columns: 1fr; }
  .mini-inventaire { display: none; }
  .site-cta { padding: 60px 20px; grid-template-columns: 1fr; }
  .site-pied { padding: 30px 20px; grid-template-columns: 1fr; gap: 15px; }
  .offres-intro { padding-top: 48px; }
  .souscription-apercu { grid-template-columns: 1fr; margin: 0 20px 65px; }
  .souscription-contenu { padding: 32px 22px; }
  .etapes-paiement span { font-size: 0; }
  .recapitulatif-offre { padding: 32px 24px; }
  .offres-aide { margin: 0 20px 65px; flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Sous 420 px (Android courant : 360), la barre du site se resserre encore
   d'un cran — mesuré : sans ceci, elle déborde de 21 px à 360 px. */
@media (max-width: 420px) {
  .site-entete { padding: 0 10px; gap: 6px; }
  .site-marque { font-size: 18px; gap: 6px; }
  /* La cible garde ses 32 px de haut ; en largeur, 26 px suffisent à deux
     lettres et laissent la barre tenir dans 360 px (mesuré : 386 avec 32). */
  .site-langue a { min-width: 26px; padding: 0 3px; }
  .site-actions .btn-discret { padding: 0 5px; font-size: 11px; }
  .site-actions .btn-primaire { padding: 0 8px; font-size: 11px; }
}
/* Sous 380 px (Android courant, 360) la barre débordait encore de 6 px : le
   bouton « Découvrir le pack » sortait du cadre et la page défilait de côté.
   Mesuré au banc le 09.09.2026 sur les quatre pages publiques. On resserre ce
   qui n'est pas une cible : les marges, pas les boutons. */
@media (max-width: 380px) {
  .site-entete { padding: 0 8px; gap: 4px; }
  .site-marque { font-size: 17px; gap: 5px; }
  .site-langue { margin-right: 4px; }
  .site-actions .btn-primaire { padding: 0 7px; }
}

@media (max-width: 780px) {
  .tarif-public-avantages {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .tarif-public-avantages article {
    border-left: 0;
    border-top: 1px solid var(--filet-or-faible);
  }

  .tarif-public-avantages article:first-child {
    border-top: 0;
  }

  .offre-unique {
    grid-template-columns: 1fr;
    margin-right: 28px;
    margin-left: 28px;
  }

  .offre-unique-prix {
    min-height: 350px;
  }
}

@media (max-width: 520px) {
  .tarif-public {
    padding: 14px;
  }

  .tarif-public-cadre {
    padding: 50px 18px;
  }

  .tarif-public h2 {
    margin-top: 34px;
    font-size: 25px;
  }

  .tarif-public-prix strong {
    font-size: 76px;
  }

  .tarif-public-prix > span {
    font-size: 23px;
  }

  .offre-unique {
    margin: 4px 20px 56px;
  }

  .offre-unique-prix {
    min-height: 310px;
    padding: 50px 22px 38px;
  }

  .offre-unique-detail {
    padding: 32px 22px;
  }

  .offre-modules,
  .offre-engagements,
  .champs-apercu-double,
  .champs-coordonnees {
    grid-template-columns: 1fr;
  }

  .offre-unique-detail > .btn {
    width: 100%;
    min-height: 44px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .souscription-apercu:target {
    transition: border-color var(--duree-moyen) var(--sortie);
  }
}

/* ============================================================================
   Mouvement du site — DESIGN.md, section « Mouvement du site »
   ----------------------------------------------------------------------------
   Liste FERMÉE de dix emplois. Rien d'autre ne bouge sur la vitrine.

   1 apparition d'une section au défilement   5 états d'interaction
     (variante `rvl-seq` : les enfants        6 condensation de l'en-tête
     paraissent en cascade, la translation    7 tracé du fil (hero, parcours,
     reste portée par le conteneur)             filets d'eyebrow)
   2 séquençage du hero à l'ouverture         8 défilement doux vers l'ancre
   3 compteur chiffré (preuves, prix)         9 fil de lecture sous la barre
   4 tracé de la courbe d'activité,          10 repère de section dans la
     puis remplissage de sa zone                navigation

   Les emplois 9 et 10 suivent le GESTE DU LECTEUR : le fil se déroule avec le
   défilement, le repère suit la section visible. Rien n'y boucle, rien n'y
   part tout seul — c'est ce qui les distingue d'un décor.

   LE MOTIF NE BOUGE JAMAIS. Aucune classe `.vd-*` ne porte `animation`,
   `transition`, `transform` ni `will-change`, et aucune ne vit dans un
   conteneur révélé — une apparition porte une translation de douze pixels,
   donc la faire subir au motif l'anime, quel que soit le nom de la classe.
   Un test tient les deux (MOTIF-VEINE-DOR.md règle 4, ADR 0007 décision 2).

   L'ÉTAT CACHÉ N'EXISTE QUE SI LE SCRIPT A MARQUÉ LA RACINE. Si `opacity: 0`
   vivait ici au repos, un visiteur dont le script n'a pas tourné — réseau,
   extension, CSP mal réglée — recevrait une page blanche. Sans script, tout
   est visible, la page est simplement sans mouvement.
   ========================================================================= */

:root {
  /* Les durées de oikos.css (120/180/260 ms) sont taillées pour un outil, où
     180 ms rassurent. Sur une vitrine, la même durée se lit comme un sursaut. */
  --site-duree-court: 220ms;
  --site-duree-moyen: 480ms;
  --site-duree-long:  900ms;
  --site-decalage:     70ms;
  --site-sortie: cubic-bezier(.16, 1, .3, 1);
  --site-entree: cubic-bezier(.4, 0, .2, 1);
}

/* --- 6 · Condensation de l'en-tête ---------------------------------------- */
/* Le fond se pose sur l'en-tête lui-même, borné à 1240 px comme son filet du
   dessous : c'est déjà la largeur de la marque dans cette page.
   Une première version le faisait déborder jusqu'aux bords par un
   pseudo-élément en `100vw`. Mesuré : `100vw` compte la barre de défilement,
   `clientWidth` non — la page gagnait cinq pixels de défilement horizontal.
   Deux contournements ont été essayés (`overflow-x: clip` sur `body`, puis sur
   `html`) et aucun n'a tenu, l'overflow de `body` se propageant au viewport.
   Supprimer le débordement valait mieux que de le rattraper. */
.site-entete {
  position: sticky; top: 0;
  background: rgba(255, 255, 255, 0);
  transition: height var(--site-duree-court) var(--site-entree),
              background var(--site-duree-court) var(--site-entree);
}
.site-entete[data-condense] {
  height: 60px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  /* L'ombre dit que la barre flotte au-dessus du contenu — le filet du bas ne
     suffit plus quand le fond de page défile derrière. */
  box-shadow: 0 4px 24px -12px rgba(4, 51, 31, .18);
}

/* --- 1 et 2 · Apparitions et séquençage ----------------------------------- */
html[data-mouvement] .rvl { opacity: 0; transform: translateY(12px); }
html[data-mouvement] .rvl.vu {
  opacity: 1; transform: none;
  transition: opacity var(--site-duree-moyen) var(--site-sortie),
              transform var(--site-duree-moyen) var(--site-sortie);
}
html[data-mouvement] .seq > * { opacity: 0; transform: translateY(12px); }
html[data-mouvement] .seq.vu > * {
  opacity: 1; transform: none;
  transition: opacity var(--site-duree-moyen) var(--site-sortie),
              transform var(--site-duree-moyen) var(--site-sortie);
}
html[data-mouvement] .seq.vu > *:nth-child(1) { transition-delay: 0ms; }
html[data-mouvement] .seq.vu > *:nth-child(2) { transition-delay: 70ms; }
html[data-mouvement] .seq.vu > *:nth-child(3) { transition-delay: 140ms; }
html[data-mouvement] .seq.vu > *:nth-child(4) { transition-delay: 210ms; }
html[data-mouvement] .seq.vu > *:nth-child(5) { transition-delay: 280ms; }

/* Variante séquencée d'une apparition (`rvl rvl-seq`). La translation de douze
   pixels reste portée par le conteneur — les enfants ne font que PARAÎTRE, en
   opacité seule : deux translations empilées feraient vingt-quatre pixels, et
   la charte plafonne à douze. */
html[data-mouvement] .rvl-seq > * { opacity: 0; }
html[data-mouvement] .rvl-seq.vu > * {
  opacity: 1;
  transition: opacity var(--site-duree-moyen) var(--site-sortie);
}
html[data-mouvement] .rvl-seq.vu > *:nth-child(1) { transition-delay: 60ms; }
html[data-mouvement] .rvl-seq.vu > *:nth-child(2) { transition-delay: 150ms; }
html[data-mouvement] .rvl-seq.vu > *:nth-child(3) { transition-delay: 240ms; }
html[data-mouvement] .rvl-seq.vu > *:nth-child(4) { transition-delay: 330ms; }
html[data-mouvement] .rvl-seq.vu > *:nth-child(5) { transition-delay: 420ms; }
html[data-mouvement] .rvl-seq.vu > *:nth-child(6) { transition-delay: 510ms; }
/* Sept : la feuille de route porte six jalons et la case du « et apres ».
   Sans cette ligne, la derniere paraissait sans delai — donc AVANT ses
   voisines, ce qui inverse la lecture d'une ligne du temps. */
html[data-mouvement] .rvl-seq.vu > *:nth-child(7) { transition-delay: 600ms; }

/* --- 7 · Tracé du fil ------------------------------------------------------ */
/* Le fil est l'argument central de la page — « Oikos en garde le fil », « un
   fil continu ». Deux traits d'or le matérialisent au moment où il se lit :
   sous la promesse du hero, et en tête du parcours en quatre temps. Tous deux
   sont des dégradés CSS, jamais la matière Veine d'Or : le motif ne bouge pas.
   L'état FINAL vit dans la règle de base : sans script et sous
   `prefers-reduced-motion`, le fil est simplement là, déjà tracé. */
.hero-public-texte h1 em {
  background-image: linear-gradient(90deg, var(--or), var(--filet-or));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% 2px;
  padding-bottom: 4px;
}
html[data-mouvement] .seq h1 em { background-size: 0% 2px; }
html[data-mouvement] .seq.vu h1 em {
  background-size: 100% 2px;
  /* Le fil part une fois le titre posé : dernier temps du séquençage. */
  transition: background-size var(--site-duree-long) var(--site-sortie) 650ms;
}

.parcours-oikos { position: relative; }
.parcours-oikos::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background-image: linear-gradient(90deg, var(--or), var(--filet-or));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  pointer-events: none;
}
html[data-mouvement] .parcours-oikos::before { background-size: 0% 2px; }
html[data-mouvement] .parcours-oikos.vu::before {
  background-size: 100% 2px;
  transition: background-size var(--site-duree-long) var(--site-sortie) 120ms;
}

/* Extension de l'emploi 7 — les filets d'eyebrow. Chaque section commence par
   le même geste que le hero : son filet se trace, à l'échelle d'un mot. Le
   dessin gagne une signature commune, et l'entrée des sections cesse d'être
   huit fois la même fondue. L'état FINAL vit dans la règle de base plus haut :
   sans script, le filet est entier. */
html[data-mouvement] .rvl .site-eyebrow > span,
html[data-mouvement] .seq .site-eyebrow > span { background-size: 0% 1px; }
html[data-mouvement] .rvl.vu .site-eyebrow > span,
html[data-mouvement] .seq.vu .site-eyebrow > span {
  background-size: 100% 1px;
  transition: background-size var(--site-duree-long) var(--site-sortie) 150ms;
}

/* --- 4 · Tracé de la courbe ----------------------------------------------- */
html[data-mouvement] .apercu-graphique .courbe.trace {
  stroke-dasharray: var(--longueur); stroke-dashoffset: var(--longueur);
}
html[data-mouvement] .apercu-graphique .courbe.trace.vu {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--site-duree-long) var(--site-sortie);
}
/* La zone se peint APRÈS le tracé : la courbe est une donnée qui s'écrit,
   la surface arrive comme une conséquence. Deux temps, un seul mouvement. */
html[data-mouvement] .rvl .apercu-graphique .zone { opacity: 0; }
html[data-mouvement] .rvl.vu .apercu-graphique .zone {
  opacity: 1;
  transition: opacity var(--site-duree-moyen) var(--site-entree) 700ms;
}

/* --- 9 · Fil de lecture ---------------------------------------------------- */
/* « Chaque feuille a une histoire. Oikos en garde le fil. » Le fil d'or se
   déroule sous la barre à mesure qu'on lit la page : l'argument central,
   tenu au pied de la lettre. Il suit la position de défilement — le geste du
   lecteur — jamais une boucle. Caché par défaut : sans script, pas de fil
   mort à zéro. Un dégradé CSS, jamais la matière Veine d'Or. */
.fil-lecture {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background-image: linear-gradient(90deg, var(--or), var(--filet-or));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
  display: none;
}
html[data-mouvement] .fil-lecture { display: block; }

/* --- 10 · Repère de section ------------------------------------------------ */
/* Le lien de la section visible garde son filet tracé : la barre dit où l'on
   est, pas seulement où l'on peut aller. Même geste que le survol — le filet
   d'or — mais comme un état, posé par le script avec `aria-current`. */
.site-navigation a[data-actif] {
  color: var(--primaire);
  background-size: 100% 1px;
}

/* --- 5 · États d'interaction ---------------------------------------------- */
/* Réservés à ce qui répond RÉELLEMENT au clic : liens et boutons. Une carte
   qui se soulève sans être cliquable promet un clic qu'elle ne tient pas. */
.site-navigation a, .parcours-oikos article, .fonctionnalites-public article {
  transition: color var(--site-duree-court) var(--site-entree),
              border-color var(--site-duree-court) var(--site-entree);
}
/* Les liens de navigation tracent leur filet au survol — même geste que le
   fil du hero, à l'échelle d'un lien. */
.site-navigation a {
  padding-bottom: 3px;
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--site-duree-court) var(--site-entree),
              background-size var(--site-duree-court) var(--site-entree);
}
.site-navigation a:hover,
.site-navigation a:focus-visible { background-size: 100% 1px; }
/* Les boutons de la vitrine répondent sous le pointeur : un soulèvement d'un
   pixel, une ombre qui suit, et le chevron qui indique la direction. */
.site-public .btn {
  transition: background var(--site-duree-court) var(--site-entree),
              color var(--site-duree-court) var(--site-entree),
              border-color var(--site-duree-court) var(--site-entree),
              box-shadow var(--site-duree-court) var(--site-entree),
              transform var(--site-duree-court) var(--site-entree);
}
.site-public .btn-primaire:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(0, 96, 57, .5);
}
.site-public .btn-clair:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4);
}
.site-public .btn:active { transform: translateY(0); box-shadow: none; }
.site-public .btn .icone { transition: transform var(--site-duree-court) var(--site-entree); }
.site-public .btn:hover .icone { transform: translateX(3px); }
.lien-fleche span {
  display: inline-block;
  transition: transform var(--site-duree-court) var(--site-entree);
}
.lien-fleche:hover span,
.lien-fleche:focus-visible span { transform: translateX(3px); }
.lien-fleche--bas:hover span,
.lien-fleche--bas:focus-visible span { transform: translateY(3px); }
.site-cta .lien-fleche { display: inline-block; margin-top: 18px; }
/* La sélection de texte porte aussi la marque : le vert Oikos, pas le bleu du
   navigateur. Petit, mais c'est le genre de détail qui dit qu'une page a été
   dessinée et non assemblée. */
.site-public ::selection { background: var(--primaire); color: #fff; }

/* --- Révision « vitrine vivante II » du 04.09.2026 --------------------------
   Références de Johann : Slack (un mouvement « physique » plutôt qu'un fondu
   plat, un seul easing pour tout, les cadres de l'outil qui portent le poids
   visuel) et Pirsch (encre sur papier, filets, aucune ombre au repos). Le
   second, Oikos l'avait déjà. Le premier entre ici en deux emplois neufs et
   deux extensions — et surtout par UNE grammaire, déclinée : le fil. Un titre
   s'écrit sous une ligne, une boîte se pose, un cadre s'ouvre de l'intérieur,
   la roche se peint et l'or la suit. Rien ne boucle, rien ne part tout seul,
   et l'état final vit toujours dans la règle de base : sans script, tout est
   là, immobile et entier. */
:root {
  --site-duree-titre: 760ms;   /* le lever d'un mot */
  --site-pas-mot:      26ms;   /* d'un mot au suivant — recopié dans vitrine.js */
}

/* --- 11 · Lever de titre ---------------------------------------------------
   Chaque mot d'un titre monte de sous une ligne invisible, dans l'ordre de
   lecture : le titre S'ÉCRIT. Les enveloppes `.mot` sont posées par le script
   et n'existent pas sans lui — le HTML servi porte le texte nu.

   Le masque est un `clip-path` à marges NÉGATIVES et non un `overflow: hidden` :
   l'overflow rognerait les jambages, le clip laisse .2em au-dessus et .25em
   au-dessous, et ne cache que ce qui est encore sous la ligne. Le mot descend
   de 125 % — plus bas que les .25em laissés au masque, donc invisible tant
   qu'il n'est pas monté. C'est la SEULE exception à l'amplitude de douze
   pixels (DESIGN.md, amendement du 04.09) : l'œil ne suit pas un déplacement,
   il lit une ligne qui s'écrit. Le retard de chaque mot est écrit sur son
   enveloppe par le script, jamais ici : un titre de trois mots et un titre
   de dix ne partagent aucune cadence écrite d'avance. */
.mot { display: inline-block; clip-path: inset(-.2em 0 -.25em 0); }
.mot > span { display: inline-block; }
html[data-mouvement] .mot > span { transform: translateY(125%); }
html[data-mouvement] .vu .mot > span {
  transform: none;
  transition-property: transform;
  transition-duration: var(--site-duree-titre);
  transition-timing-function: var(--site-sortie);
}

/* --- 1 (extension) · La boîte se pose ---------------------------------------
   Une carte qui paraît en cascade arrive de douze pixels ET d'une ombre — celle
   d'une carte soulevée, qui s'éteint en se posant. C'est la physique que les
   références appellent « motion over flat fades », tenue dans les jetons de la
   maison : rien ne grandit, rien ne tourne. L'ombre n'existe QUE dans l'état
   caché du script ; au repos, une carte n'a pas d'ombre, comme la charte
   l'exige. Les deux cartes qui en portent une pour de bon (« votre base »,
   « vous êtes ici ») sont exclues : elles gardent la leur, elles ne se
   posent pas. Longhands et non raccourci `transition` : le raccourci
   remettrait `transition-delay` à zéro et effacerait la cascade des
   `:nth-child` écrite plus haut. */
html[data-mouvement] .rvl-seq > article:not(.fonction-large),
html[data-mouvement] .rvl-seq > .base-isolee:not(.base-isolee--votre),
html[data-mouvement] .rvl-seq > .gamme-produit:not(.gamme-produit--ici) {
  box-shadow: 0 26px 36px -22px rgba(4, 51, 31, .34);
}
html[data-mouvement] .rvl-seq.vu > article:not(.fonction-large),
html[data-mouvement] .rvl-seq.vu > .base-isolee:not(.base-isolee--votre),
html[data-mouvement] .rvl-seq.vu > .gamme-produit:not(.gamme-produit--ici) {
  box-shadow: 0 0 0 0 rgba(4, 51, 31, 0);
  transition-property: opacity, box-shadow;
  transition-duration: var(--site-duree-moyen), var(--site-duree-long);
  transition-timing-function: var(--site-sortie), var(--site-sortie);
}

/* --- 7 (extension) · La roche se peint, l'or court, les losanges tombent ----
   Sur la feuille de route, trois temps pour un seul geste : chaque fond de
   maison se peint de gauche à droite, l'or le suit (le tracé existant part
   120 ms après), et le losange de chaque jalon tombe sur le fil au moment où
   l'or l'atteint. Les retards sont ceux du fil — 900 ms pour sept cases, un
   losange toutes les 128 ms. Un losange n'est pas un bloc de texte : il a le
   droit de grandir depuis zéro. */
html[data-mouvement] .feuille-route > li::before { transform: scaleX(0); transform-origin: 0 50%; }
html[data-mouvement] .feuille-route.vu > li::before {
  transform: none;
  transition: transform var(--site-duree-moyen) var(--site-sortie);
}
html[data-mouvement] .feuille-route > li > i { transform: rotate(45deg) scale(0); }
html[data-mouvement] .feuille-route.vu > li > i {
  transform: rotate(45deg) scale(1);
  transition: transform 320ms var(--site-sortie);
}
html[data-mouvement] .feuille-route.vu > li:nth-child(1)::before { transition-delay: 0ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(2)::before { transition-delay: 110ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(3)::before { transition-delay: 220ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(4)::before { transition-delay: 330ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(5)::before { transition-delay: 440ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(6)::before { transition-delay: 550ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(1) > i { transition-delay: 140ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(2) > i { transition-delay: 268ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(3) > i { transition-delay: 396ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(4) > i { transition-delay: 524ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(5) > i { transition-delay: 652ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(6) > i { transition-delay: 780ms; }
html[data-mouvement] .feuille-route.vu > li:nth-child(7) > i { transition-delay: 908ms; }
/* En colonne la roche est debout : elle se peint de haut en bas, pas de
   gauche à droite — sinon quatre pixels de large « grandiraient » sur place. */
@media (max-width: 720px) {
  html[data-mouvement] .feuille-route > li::before { transform: scaleY(0); transform-origin: 50% 0; }
}

/* --- 12 · L'outil de l'intérieur --------------------------------------------
   Le cadre du temps 4 n'est plus une image de l'outil : il s'ouvre COMME
   l'outil. Le menu paraît, l'accueil salue, les indicateurs se posent et
   comptent (emploi 3), la courbe se trace (emploi 4), puis les alertes
   arrivent une à une. Un seul séquençage, dans l'ordre où un utilisateur
   découvre réellement l'écran — c'est ce qui le distingue d'un décor, et
   c'est pourquoi il compte pour UNE chose qui bouge. Huit pixels et non
   douze : à l'intérieur d'un cadre déjà révélé, douze feraient tanguer la
   fenêtre. */
html[data-mouvement] .rvl .apercu-menu > span { opacity: 0; transform: translateX(-8px); }
html[data-mouvement] .rvl .apercu-salut,
html[data-mouvement] .rvl .apercu-kpis > div { opacity: 0; transform: translateY(8px); }
html[data-mouvement] .rvl .apercu-alertes > strong,
html[data-mouvement] .rvl .apercu-alertes > p { opacity: 0; transform: translateX(8px); }
html[data-mouvement] .rvl.vu .apercu-menu > span,
html[data-mouvement] .rvl.vu .apercu-salut,
html[data-mouvement] .rvl.vu .apercu-kpis > div,
html[data-mouvement] .rvl.vu .apercu-alertes > strong,
html[data-mouvement] .rvl.vu .apercu-alertes > p {
  opacity: 1; transform: none;
  transition: opacity var(--site-duree-moyen) var(--site-sortie),
              transform var(--site-duree-moyen) var(--site-sortie);
}
html[data-mouvement] .rvl.vu .apercu-menu > span:nth-child(1) { transition-delay: 60ms; }
html[data-mouvement] .rvl.vu .apercu-menu > span:nth-child(2) { transition-delay: 120ms; }
html[data-mouvement] .rvl.vu .apercu-menu > span:nth-child(3) { transition-delay: 180ms; }
html[data-mouvement] .rvl.vu .apercu-menu > span:nth-child(4) { transition-delay: 240ms; }
html[data-mouvement] .rvl.vu .apercu-menu > span:nth-child(5) { transition-delay: 300ms; }
html[data-mouvement] .rvl.vu .apercu-menu > span:nth-child(6) { transition-delay: 360ms; }
html[data-mouvement] .rvl.vu .apercu-salut { transition-delay: 260ms; }
html[data-mouvement] .rvl.vu .apercu-kpis > div:nth-child(1) { transition-delay: 380ms; }
html[data-mouvement] .rvl.vu .apercu-kpis > div:nth-child(2) { transition-delay: 460ms; }
html[data-mouvement] .rvl.vu .apercu-kpis > div:nth-child(3) { transition-delay: 540ms; }
/* Les alertes attendent la courbe (900 ms de tracé, puis la zone) : un écran
   qui alerte avant d'avoir montré l'activité ne se lit pas dans le bon sens. */
html[data-mouvement] .rvl.vu .apercu-alertes > strong { transition-delay: 1150ms; }
html[data-mouvement] .rvl.vu .apercu-alertes > p:nth-of-type(1) { transition-delay: 1250ms; }
html[data-mouvement] .rvl.vu .apercu-alertes > p:nth-of-type(2) { transition-delay: 1350ms; }
html[data-mouvement] .rvl.vu .apercu-alertes > p:nth-of-type(3) { transition-delay: 1450ms; }
/* La pastille du film répond au pointeur en grandissant d'un rien : ce n'est
   pas un bloc de texte, et c'est le seul contrôle du cadre (emploi 5). */
.film-pastille { transition: background var(--site-duree-court) var(--site-entree), transform var(--site-duree-court) var(--site-entree); }
.film-declencheur:hover .film-pastille,
.film-declencheur:focus-visible .film-pastille { transform: scale(1.06); }

/* --- 12 · Les trois intérieurs (temps 7) ------------------------------------
   Chaque carte de la gamme porte un cadre minuscule de l'outil de sa maison :
   la barre, le menu dans la couleur de la maison, et trois de ses modules —
   des vrais, ceux de sa fiche segment — qui arrivent l'un après l'autre. Même
   grammaire que le cadre du temps 4, à l'échelle d'une carte : c'est ce que
   Johann appelle « les cadres montrant l'application de l'intérieur », et
   c'est la preuve visuelle que les trois outils partagent un seul socle. */
.apercu-mini {
  margin-top: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 5px;
}
.apercu-mini-barre {
  display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px;
  border-bottom: 1px solid var(--bordure);
}
.apercu-mini-barre i { width: 5px; height: 5px; border: 1px solid var(--bordure); border-radius: 50%; }
.apercu-mini-corps { display: grid; grid-template-columns: 30px 1fr; min-height: 72px; }
/* Le menu porte la couleur de la maison — comme `.apercu-menu` porte le vert
   profond au temps 4. Trois traits : trois entrées, la première allumée en or. */
.apercu-mini-menu { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 9px; background: var(--maison); }
.apercu-mini-menu i { width: 12px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .28); }
.apercu-mini-menu i:first-child { background: var(--or); }
.apercu-mini-page { padding: 6px 10px 7px; background: var(--fond); }
.apercu-mini-page > span {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 0; border-bottom: 1px solid var(--bordure);
  color: var(--encre-attenuee); font-size: 9px; letter-spacing: .04em;
}
.apercu-mini-page > span:last-child { border-bottom: 0; }
.apercu-mini-page > span > i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--bordure); }
.apercu-mini-page > span.actif { color: var(--encre); }
.apercu-mini-page > span.actif > i { background: var(--maison); }
html[data-mouvement] .rvl .apercu-mini-page > span { opacity: 0; transform: translateX(6px); }
html[data-mouvement] .rvl.vu .apercu-mini-page > span {
  opacity: 1; transform: none;
  transition: opacity var(--site-duree-moyen) var(--site-sortie),
              transform var(--site-duree-moyen) var(--site-sortie);
}
html[data-mouvement] .rvl.vu .apercu-mini-page > span:nth-child(1) { transition-delay: 420ms; }
html[data-mouvement] .rvl.vu .apercu-mini-page > span:nth-child(2) { transition-delay: 520ms; }
html[data-mouvement] .rvl.vu .apercu-mini-page > span:nth-child(3) { transition-delay: 620ms; }

/* La bande métier entre en cascade elle aussi (temps 2) : huit enfants, le
   libellé puis quatre métiers et leurs trois losanges. */
html[data-mouvement] .rvl-seq.vu > *:nth-child(8) { transition-delay: 690ms; }


/* --- Neutralisation totale ------------------------------------------------ */
/* Pas seulement les déplacements : le script n'installe alors aucun
   observateur et ne pose aucune marque, et ces règles coupent le reste. Un
   compteur affiche sa valeur finale, une courbe est tracée, tout est visible. */
@media (prefers-reduced-motion: reduce) {
  .site-entete { transition: none; }
  .site-entete::before { transition: none; }
  .rvl, .seq > *, .rvl-seq > * { opacity: 1 !important; transform: none !important; }
  .courbe.trace { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  /* Le fil est tracé d'emblée, jamais absent : c'est un élément du dessin,
     pas une récompense du mouvement. Les filets d'eyebrow et la zone de la
     courbe suivent la même règle. */
  .hero-public-texte h1 em,
  .parcours-oikos::before,
  .feuille-route::before { background-size: 100% 2px !important; }
  .site-eyebrow > span { background-size: 100% 1px !important; }
  .apercu-graphique .zone { opacity: 1 !important; }
  /* Révision du 04.09.2026 : le lever des titres, la boîte qui se pose, la
     roche et les losanges de la feuille de route, l'outil de l'intérieur.
     Chaque état caché ci-dessus retombe ici sur son état final — et le losange
     garde sa rotation : `transform: none` en ferait un carré. */
  .mot > span { transform: none !important; transition: none !important; }
  .feuille-route > li::before { transform: none !important; transition: none !important; }
  .feuille-route > li > i { transform: rotate(45deg) !important; transition: none !important; }
  .apercu-menu > span, .apercu-salut, .apercu-kpis > div, .apercu-alertes > strong,
  .apercu-alertes > p, .apercu-mini-page > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rvl-seq > article, .rvl-seq > .base-isolee, .rvl-seq > .gamme-produit { transition: none !important; }
  .film-pastille { transform: none !important; }
  /* Le film ne bouge pas de lui-même — il n'a donc rien à neutraliser côté
     lecture, et le passage du dessin au film ne s'anime pas. Restent ses états
     d'interaction, et eux seuls. Le BOUTON, lui, reste entier : un film qu'on
     demande doit se jouer, quelle que soit la préférence de mouvement (voir
     vitrine.js, fermeture du film). */
  .film-declencheur::before, .film-pastille { transition: none; }
}

/* ==========================================================================
   Documents contractuels — /conditions-generales, /remboursement
   ==========================================================================
   Une page de CGV a un seul travail : être lue jusqu'au bout, y compris par
   quelqu'un qui n'en a pas envie. Colonne étroite (une mesure de 70 signes),
   interligne large, numérotation visible. Aucun motif Veine d'Or : la matière
   marque une jonction, et il n'y a rien à joindre sur un contrat. */
.doc-legal { max-width: 760px; margin: 0 auto; padding: 70px 28px 90px; }
.doc-legal-entete { border-bottom: 1px solid var(--bordure); padding-bottom: 26px; margin-bottom: 12px; }
.doc-legal-entete h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.25; }
.doc-legal-reference { margin: 0; color: var(--encre-douce); font-size: 12.5px; line-height: 1.6; }
.doc-legal-reference a { color: var(--primaire); }

/* Un document contractuel qui ne désigne personne n'engage personne. Le dire
   à l'écran vaut mieux qu'afficher un contrat qui paraîtrait complet. */
.doc-legal-incomplet {
  margin: 26px 0 0; padding: 12px 16px; border-left: 3px solid var(--or);
  background: var(--primaire-tint); color: var(--primaire-fonce);
  font-size: 12.5px; line-height: 1.6;
}

.doc-legal-corps section { margin-top: 42px; }
.doc-legal-corps h2 {
  margin: 0 0 14px; color: var(--primaire); font-size: 15px; font-weight: 600;
  letter-spacing: .01em;
}
.doc-legal-corps p, .doc-legal-corps li { color: var(--encre); font-size: 14px; line-height: 1.85; }
.doc-legal-corps p { margin: 0 0 14px; }
.doc-legal-corps ul { margin: 0 0 14px; padding-left: 20px; }
.doc-legal-corps li { margin-bottom: 8px; }
.doc-legal-corps strong { font-weight: 600; }
.doc-legal-corps a { color: var(--primaire); text-decoration: underline; text-underline-offset: 2px; }

/* Le journal des versions n'est pas du contrat : il aide à relire, il ne
   s'oppose à personne. Il se distingue donc de ce qui engage. */
.doc-legal-historique { border-top: 1px solid var(--bordure); padding-top: 34px; }
.doc-legal-historique h2 { color: var(--encre-douce); }
.doc-legal-historique li { color: var(--encre-douce); font-size: 13px; }

.doc-legal-pied { margin-top: 56px; border-top: 1px solid var(--bordure); padding-top: 30px; }
.doc-legal-pied h2 { margin: 0 0 12px; color: var(--primaire); font-size: 15px; font-weight: 600; }
.doc-legal-pied address { color: var(--encre); font-size: 13.5px; font-style: normal; line-height: 1.9; }
.doc-legal-pied a { color: var(--primaire); }

@media (max-width: 720px) {
  .doc-legal { padding: 44px 20px 60px; }
  .doc-legal-entete h1 { font-size: 24px; }
}

/* --- Ce qui se lit au doigt et à bout de bras --------------------------
   Sur un téléphone, 9 ou 10 px de corps ne se lisent pas : le plancher du
   texte qui porte une information (récapitulatif d'offre, aide, pied,
   engagements) monte à 12 px. Les maquettes de l'outil dans le héros et la
   preuve gardent leurs tailles : elles se regardent, elles ne se lisent pas. */
@media (max-width: 720px) {
  .recapitulatif-offre > p, .recapitulatif-offre .recap-suite, .recap-marque small,
  .offres-aide p, .offre-essai small, .champ-apercu p, .champ-apercu label,
  .apercu-local p, .site-pied p, .site-pied > div, .offre-engagements span,
  .gamme-metier { font-size: 12px; }
}
/* Un <fieldset> naît avec `min-width: min-content` (feuille du navigateur) :
   le choix de durée forçait le parcours de souscription à 349 px dans un
   écran de 360, et la page défilait de côté. Une seule règle, pour tous. */
.site-public fieldset { min-width: 0; }
/* Les deux pistes du parcours de souscription valent `minmax(auto, 1fr)` :
   un bouton en `nowrap` de 305 px y fixait une largeur minimale de 349 px
   dans un écran de 360. `min-width: 0` sur les pistes, et le bouton passe à
   la ligne sous 420 px au lieu de pousser la page. */
.souscription-apercu > * { min-width: 0; }
@media (max-width: 420px) {
  .souscription-contenu .btn-grand { white-space: normal; height: auto; min-height: 44px; padding: 10px 14px; line-height: 1.3; }
}
/* Les liens de navigation du site : 23 px de haut, sous la cible tactile d'un
   iPad couché — la seule largeur où ils sont visibles au doigt. */
.site-navigation a { display: inline-flex; align-items: center; min-height: 32px; }
/* La case d'acceptation des conditions : 13 px natifs, 18 px ici, 24 au doigt. */
.site-public input[type="checkbox"], .site-public input[type="radio"] { width: 18px; height: 18px; flex: none; vertical-align: middle; }
/* Les liens posés en bloc (flèches, retour, pied) gagnent la hauteur d'une
   cible tactile ; le dessin ne change pas, seule la boîte cliquable grandit. */
@media (pointer: coarse) {
  .site-public input[type="checkbox"], .site-public input[type="radio"] { width: 24px; height: 24px; }
  .lien-fleche, .retour-site, .site-pied > div a, .offres-aide a, .offre-essai a {
    display: inline-flex; align-items: center; min-height: 32px;
  }
  .site-pied > div { flex-wrap: wrap; gap: 6px 24px; }
}

/* La page s'imprime : un juriste travaille sur papier. */
@media print {
  .site-entete, .site-pied, .site-pied-veine, .evitement, .retour-site { display: none; }
  .doc-legal { max-width: none; padding: 0; }
  .doc-legal-corps section { break-inside: avoid; }
}

/* Acceptation des documents contractuels, au pied du formulaire de
   souscription. Elle est délibérément lisible et non repliée en petits
   caractères : une case qu'on ne voit pas est une case qu'on n'a pas acceptée,
   quoi qu'en dise le journal. */
.accepter-conditions {
  display: flex; align-items: flex-start; gap: 11px; margin: 6px 0 22px;
  color: var(--encre); font-size: 13px; line-height: 1.65;
}
.accepter-conditions input { flex: none; margin-top: 3px; accent-color: var(--primaire); }
.accepter-liens { display: block; margin-top: 4px; }
.accepter-liens a { margin-right: 18px; color: var(--primaire); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }

/* --- Teaser v2 · l'Hôtel des ventes -----------------------------------------
   Trois annonces et un compte à rebours (docs/V2-HOTEL-DES-VENTES.md, décisions
   du 31.08.2026). Elles s'AJOUTENT au site : aucun bloc existant ne change de
   place, et le jour de l'ouverture tout ce bloc s'enlève d'une pièce.

   Rien n'y bouge — ni fondu, ni glissement, ni boucle. Ce n'est donc pas un
   onzième emploi du mouvement : ce sont trois liens et un nombre. */

/* CTA A · le bandeau, au-dessus de l'en-tête, sur toutes les pages sauf la
   sienne. Il reste dans le flux et n'est pas fixé : deux barres fixées l'une
   sous l'autre mangeraient un cinquième de l'écran d'un portable. */
.annonce-bandeau {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; min-height: 46px; padding: 8px 28px;
  background: var(--vert-profond); border-bottom: 1px solid var(--filet-or-faible);
  text-decoration: none;
}
.annonce-bandeau i { flex: none; width: 3px; height: 3px; background: var(--or); transform: rotate(45deg); }
.annonce-bandeau strong { color: white; font: 400 15px var(--police-marque); }
.annonce-etat {
  color: rgba(201,220,209,.62); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
}
.annonce-lien { color: var(--or); font-size: 13px; font-weight: 500; white-space: nowrap; }
.annonce-bandeau:hover strong, .annonce-bandeau:focus-visible strong { color: var(--or); }

/* CTA B · le cartouche du hero, dans la zone calme du motif. Fond blanc à 85 %
   et non opaque : la Veine d'Or doit rester devinée dessous, sinon le cartouche
   se lit comme une étiquette collée sur la photographie. */
.annonce-cartouche {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 26px; padding: 9px 16px;
  background: rgba(255,255,255,.85); border: 1px solid var(--filet-or);
  color: var(--encre); text-decoration: none;
}
.annonce-cartouche i { flex: none; width: 3px; height: 3px; background: var(--or); transform: rotate(45deg); }
.annonce-cartouche .annonce-etat, .annonce-cartouche .annonce-lien { color: var(--accent-texte); }
.annonce-filet { width: 1px; height: 14px; background: var(--bordure); }
.annonce-titre { font: 400 14px var(--police-marque); }
.annonce-cartouche:hover, .annonce-cartouche:focus-visible { border-color: var(--or); background: white; }

/* CTA C · le rappel flottant. Le seul des trois qui suive le défilement : la
   landing est longue, et l'annonce ne doit pas rester en haut avec le hero. */
.annonce-rappel {
  position: fixed; right: 28px; bottom: 28px; z-index: 40;
  display: flex; align-items: flex-start; gap: 6px; padding: 12px;
  color: white; background: rgba(4,51,31,.93); border: 1px solid var(--filet-or);
  box-shadow: 0 18px 44px -16px rgba(4,51,31,.5);
}
.annonce-rappel > a { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.annonce-rappel-sceau {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; color: var(--vert-profond); background: var(--or);
}
.annonce-rappel-mots { display: flex; flex-direction: column; gap: 3px; }
.annonce-rappel-mots strong { font: 400 15px var(--police-marque); }
.annonce-rappel-mots small { color: rgba(201,220,209,.85); font-size: 11px; }
/* Le bouton naît caché et c'est `vitrine.js` qui le découvre : sans script il
   ne fermerait rien, et un bouton qui ne ferme rien est pire que pas de bouton. */
.annonce-rappel-fermer {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin: -8px -8px -8px 0; line-height: 1;
  font: 12px var(--police); color: rgba(201,220,209,.6);
  background: none; border: 0; cursor: pointer;
}
/* Téléphone couché : 390 px de haut, et la carte fixée recouvrait la moitié
   du titre du héros. Le bandeau et le cartouche portent déjà l'annonce. */
@media (max-height: 540px) {
  .annonce-rappel { display: none; }
}
.annonce-rappel-fermer:hover, .annonce-rappel-fermer:focus-visible { color: white; }

/* Le compte à rebours — sombre, encadré d'or, une seule fois avant le pied. */
.rebours { padding: clamp(24px, 4vw, 54px); color: white; background: var(--vert-profond); }
.rebours-cadre {
  max-width: 1184px; margin: 0 auto; padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--filet-or); text-align: center;
}
.site-eyebrow--centre { justify-content: center; }
/* Tout l'espacement de ce bloc se prend par le BAS. `.site-public h1, h2, h3, p`
   remet `margin-top` à zéro sur toute la vitrine, et ce sélecteur-là est plus
   spécifique qu'une classe : un `margin-top` posé ici serait écrit, servi, et
   annulé en silence. C'est ce qui a collé « Compte à rebours jusqu'au… » sous
   « JOURS » à la première pose. */
.rebours-chiffres {
  --rebours-chiffre: clamp(52px, 8vw, 96px);
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(18px, 3vw, 34px); margin: 40px 0 34px;
}
.rebours-chiffres > span { display: flex; flex-direction: column; gap: 12px; }
.rebours-chiffres b {
  color: var(--or); font-variant-numeric: tabular-nums;
  font: 400 var(--rebours-chiffre)/.82 var(--police-marque);
}
.rebours-chiffres small {
  color: var(--sur-vert); font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
}
/* Les losanges sont centrés sur la HAUTEUR DES CHIFFRES et non posés sur leur
   ligne de base : à la baseline ils venaient se coller au pied des chiffres et
   se lisaient comme une salissure. La moitié de la boîte de ligne vaut .82 / 2,
   d'où le .41 — il suit la taille quand elle rétrécit à l'écran étroit. */
.rebours-chiffres i {
  flex: none; width: 5px; height: 5px; background: var(--or); transform: rotate(45deg);
  margin-top: calc(var(--rebours-chiffre) * .41 - 2.5px);
}
.rebours-repere {
  margin: 0 0 26px; color: rgba(201,220,209,.7);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.rebours-date { margin: 0 0 8px; color: white; font: 400 22px var(--police-marque); letter-spacing: .02em; }
.rebours-lien { color: var(--or); font-size: 13px; font-weight: 500; text-decoration: none; }
.rebours-lien:hover, .rebours-lien:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* La page de l'Hôtel des ventes. Elle emprunte tout ce qu'elle peut à la
   landing — `.site-section`, `.parcours-oikos`, `.preuve-grille`, `.apercu-*` —
   et n'ajoute que ce qui n'existait pas : les piliers, la fiche en salle et le
   déroulé. Une seconde grammaire visuelle aurait fait deux sites. */
.hv-piliers { display: grid; gap: 30px; }
.hv-piliers > div > b { display: block; color: var(--or); font: 400 26px/1.2 var(--police-marque); }
.hv-piliers > div > span { display: block; margin-top: 8px; color: var(--sur-vert); font-size: 13px; line-height: 1.5; }
.apercu-logo em {
  margin-left: 4px; color: var(--encre-attenuee); font: 400 11px var(--police);
  font-style: normal; letter-spacing: .1em; text-transform: uppercase;
}
/* L'aperçu du tableau de bord impose 470 px de haut pour tenir ses graphiques ;
   la fiche en salle, elle, n'a que ce qu'elle dit. Sans cette remise à zéro,
   la carte gardait quatre-vingt-dix pixels de blanc sous le prix. */
.section-preuve .hv-fiche { min-height: 0; }
.hv-fiche-corps { padding: 26px 28px; color: var(--encre); background: var(--fond); }
.hv-fiche-tete { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 18px; }
.hv-fiche-pierre {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; color: var(--accent); background: var(--accent-tint);
}
.hv-fiche-pierre .icone { width: 34px; height: 34px; }
.hv-fiche-tete small { display: block; color: var(--encre-attenuee); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hv-fiche-tete strong { display: block; margin-top: 4px; font: 400 24px var(--police-marque); }
.hv-fiche-tete > div > span { display: block; margin-top: 4px; color: var(--encre-douce); font-size: 12px; }
.hv-fiche-preuves { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hv-jeton { padding: 4px 9px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hv-jeton--or { color: var(--accent-texte); background: var(--accent-tint); }
.hv-jeton--vert { color: var(--succes); background: #EAF5EF; }
.hv-fiche-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--bordure); }
.hv-fiche-champs p {
  display: flex; justify-content: space-between; gap: 14px; margin: 0;
  padding: 9px 0; border-bottom: 1px solid var(--bordure); font-size: 12px;
}
.hv-fiche-champs p > span:first-child { color: var(--encre-attenuee); }
.hv-fiche-champs p > span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.hv-fiche-pied { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.hv-fiche-pied > span { color: var(--encre-attenuee); font-size: 11px; }
.hv-fiche-pied strong { font: 400 22px var(--police-marque); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-deroule { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hv-deroule article { padding: 28px; background: var(--surface); border: 1px solid var(--bordure); }
.hv-deroule h3 { margin: 8px 0; font: 400 20px var(--police-marque); }
.hv-deroule p { margin: 0; color: var(--encre-douce); font-size: 13px; line-height: 1.65; }
.hv-fin { text-align: center; }
.hv-fin .site-eyebrow { justify-content: center; }
.hv-fin h2 { margin: 16px 0 15px; font: 400 clamp(30px, 4vw, 52px)/1.12 var(--police-marque); }
.hv-fin p { max-width: 620px; margin: 0 auto 28px; color: var(--encre-douce); line-height: 1.7; }

@media (max-width: 980px) {
  .hv-deroule { grid-template-columns: repeat(2, 1fr); }
  .hv-fiche-champs { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Le bandeau se replie sur l'essentiel : l'annonce et son lien. L'étiquette
     d'état et les losanges sont du décor, et le décor part le premier. */
  .annonce-bandeau { gap: 10px; padding: 8px 16px; }
  .annonce-bandeau i, .annonce-bandeau .annonce-etat { display: none; }
  .annonce-bandeau strong { font-size: 13px; }
  .annonce-cartouche { flex-wrap: wrap; gap: 8px; }
  .annonce-cartouche .annonce-filet { display: none; }
  /* Le rappel flottant sort sur téléphone : une carte fixée y couvrirait le
     texte qu'elle interrompt. Le bandeau et le cartouche portent l'annonce. */
  .annonce-rappel { display: none; }
  .rebours-chiffres { gap: 14px; }
  .hv-deroule { grid-template-columns: 1fr; }
  .hv-fiche-tete { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .hv-fiche-pierre { width: 64px; height: 64px; }
  .hv-fiche-pied { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ========================================================================
   La vitrine d'Oikos — 14.09.2026
   La grammaire de la landing de Mydas, transposée à la Colonne
   (docs/MOTIF-COLONNE.md § 6). Le dessin du motif vit dans oikos.css, dans ses
   sept classes ; ici ne vivent que leurs POSITIONS sur le site. Sélecteurs à
   deux classes : vitrine-espace.css est chargée après cette feuille, et une
   règle à une classe y perdrait à égalité.
   ======================================================================== */

#ecosysteme { scroll-margin-top: 84px; }

/* La marge de défilement de l'application (oikos.css : `html { scroll-padding-top }`,
   posée le 13.09.2026 pour le bandeau collant des écrans de travail) s'ajoutait à
   celle des ancres de la vitrine : chaque section arrivait à 140 px sous une barre
   de 60, une bande vide de 80 px au-dessus du titre — mesuré au parcours
   navigateur du 14.09.2026. La vitrine n'a pas de bandeau : elle n'en garde que
   ses propres marges d'ancre. */
html:has(> body.site-public) { scroll-padding-top: 0; }

/* --- Temps 1 · le héros sous le portique ---------------------------------
   `.col-portique` est fixe à la connexion, où rien ne défile. Fixe sur une
   landing, il resterait derrière chaque section claire : un geste pour toute
   la page au lieu d'un geste par section. Il se pose donc DANS le héros, en
   absolu, et le texte se tient dans le calme entre les colonnes — 47 % de la
   largeur du portique, entre l'entablement (22 % de sa hauteur) et les degrés.
   Sous 1100 px ou sur un écran plus haut que large, le calme devient trop
   étroit pour un titre : le portique se retire (§ 7 : on retire, on n'ajoute
   jamais), le texte reste. */
/* Une seule colonne : le héros d'origine en déclarait deux (texte et aperçu),
   et le titre se rangeait dans la première, à gauche, par-dessus un fût —
   vu sur la planche du 14.09.2026, que le banc, lui, déclarait sans constat. */
.hero-public.hero-portique {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  min-height: 0; padding: 72px 28px 80px; text-align: center;
}
.hero-portique .hero-public-texte h1 { text-wrap: balance; }
.hero-portique .col-portique { display: none; }
.hero-portique .hero-public-texte { position: relative; max-width: 700px; margin: 0 auto; }
.hero-portique .hero-public-intro { margin-left: auto; margin-right: auto; }
.hero-portique .hero-public-actions { justify-content: center; }

@media (min-width: 1100px) and (min-aspect-ratio: 5/4) {
  .hero-public.hero-portique {
    --hauteur-heros: clamp(640px, calc(100svh - 76px), 940px);
    min-height: var(--hauteur-heros);
    /* Le calme est plus bas que le milieu : l'entablement pèse plus que les
       degrés. Dix pour cent en haut, quatre en bas, et le titre s'y pose. */
    padding: calc(var(--hauteur-heros) * .1) var(--marge, 28px) calc(var(--hauteur-heros) * .04);
  }
  .hero-portique .col-portique { display: block; position: absolute; inset: 0; }
  .hero-portique .hero-public-texte {
    display: block;
    /* Le calme entre les fûts : 42 % de la fenêtre quand la largeur borne le
       portique, 68 % de la hauteur du héros quand c'est la hauteur. */
    max-width: min(640px, 42vw, calc(var(--hauteur-heros) * .68));
  }
  .hero-portique .hero-public-texte h1 {
    max-width: none; margin-left: auto; margin-right: auto;
    font-size: clamp(40px, 4vw, 62px);
  }
  .hero-portique .hero-public-intro { max-width: none; font-size: 16px; }
}

/* --- Temps 3 et 5 · l'ouverture sous le titre --------------------------- */
.site-section-entete .col-ouverture { margin-top: 26px; }

/* --- Temps 4 · la preuve et son stylobate -------------------------------
   L'aperçu est une fenêtre claire posée sur le profond : sans encre à lui, il
   héritait la pierre de la section, et ses titres, ses montants et ses
   chantiers s'écrivaient clair sur blanc (planche du 14.09.2026). */
.section-preuve .apercu-produit { color: var(--encre); }
.section-preuve .apercu-grille { grid-template-columns: 1.2fr 1fr; }
.section-preuve .apercu-alertes p b { white-space: nowrap; }

/* --- Temps 6 · les ombres de la maison ----------------------------------
   Les deux ombres « à soi » portaient le vert de Mydas et le bleu de Deimos. */
.base-isolee--votre { box-shadow: 0 10px 30px -14px rgba(154, 95, 48, .3); }

/* --- Temps 7 · la gamme, et une feuille de route sans dates --------------
   La copie du socle peignait Oikos du bleu de Deimos (#0A5A9E) et gardait
   l'or de la gamme pour les accents de la section : Oikos n'a qu'une couleur,
   la terre cuite (DESIGN.md § 2). Les valeurs sont celles du `:root`
   d'oikos.css — une variable ne peut pas se relire elle-même ici. */
.site-section.ecosysteme {
  --maison-oikos: #BA7A45;
  --accent:       #BA7A45;
  --accent-texte: #7F4D26;
  --accent-tint:  #F8F0E8;
}
.ecosysteme .gamme-produit--ici { box-shadow: 0 10px 30px -14px rgba(154, 95, 48, .3); }

/* --- Temps 8 · le chapiteau en écho du prix ------------------------------
   Sur le profond, le trait est pierre (charte, règle 7), jamais terre cuite. */
.tarif-public .col-chapiteau { display: block; margin: 0 auto 26px; color: var(--pierre); }
/* Quatre avantages sur la grille de trois, et le quatrième tombait seul sur
   une seconde rangée. Sous 781 px, la règle d'origine (une colonne) reprend. */
@media (min-width: 981px) {
  .tarif-public-avantages { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; }
}
@media (min-width: 781px) and (max-width: 980px) {
  .tarif-public-avantages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarif-public-avantages article:nth-child(3) { border-left: 0; }
  .tarif-public-avantages article:nth-child(n+3) { border-top: 1px solid var(--filet-or-faible); }
}

/* Le lien vers le Pack Solo, sur le profond : la couleur des liens de
   l'application (terre cuite foncée) y tombait sous 3:1. */
.tarif-public-avantages a { color: var(--pierre); text-decoration: underline; text-underline-offset: 2px; }

/* --- Temps 9 · le mot de la fin est CLAIR --------------------------------
   `.site-cta h2` hérite du blanc posé pour les blocs profonds (règle des
   titres sur fond sombre, plus haut) ; le mot de la fin est passé au clair, et
   son titre s'écrivait blanc sur blanc — invisible sur la planche du
   14.09.2026, alors que le banc ne relevait rien. */
.site-cta h2 { color: var(--encre); }

/* --- Pied · l'ouverture signe la page, 240 px, centrée (§ 6) ------------ */
.site-pied-veine { display: flex; justify-content: center; }
.site-pied-veine .col-ouverture { width: 240px; height: 36px; }
/* --- Le tutoriel filmé (17.09.2026) -------------------------------------- */
/* Le film tient dans la largeur du texte de la vitrine et garde son rapport
   16/9 : posé pleine largeur, il dépassait le cadre sur un téléphone couché. */
.tutoriel-film { max-width: 1184px; margin: 0 auto; padding: 10px 28px 40px; }
.tutoriel-film video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--encre); border: 1px solid var(--bordure); border-radius: 4px;
}
.tutoriel-chapitres { max-width: 900px; margin: 0 auto; padding: 0 28px 70px; }
.tutoriel-chapitres h2 { margin: 0 0 18px; }
.tutoriel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tutoriel-liste > li { padding: 16px 18px; border: 1px solid var(--bordure); border-radius: 4px; background: var(--surface); }
.tutoriel-liste p { margin: 8px 0 0; color: var(--encre-attenuee); line-height: 1.6; }
/* La cible tactile fait 44 px de haut : le chapitre se touche au doigt sur le chantier. */
.tutoriel-chapitre {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 0;
  border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.tutoriel-horodatage { color: var(--accent); font-variant-numeric: tabular-nums; min-width: 48px; }
.tutoriel-titre { font-weight: 500; }
.tutoriel-chapitre:hover .tutoriel-titre { color: var(--accent); }
.tutoriel-chapitre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* --- La gamme entière dans la barre (26.09.2026) ---------------------------
   Mydas, Kronos, Baccus, Oikos : un groupe à part dans la rangée — ce sont des
   PAGES, les autres sont des sections. Repris de la landing de Mydas
   (marketing.css, 17.09.2026) : UN seul pas pour toute la rangée
   (`--pas-menu`), entre deux liens, de part et d'autre du filet, et dans le
   groupe. Même corps, même graisse que les sections ; le groupe se distingue
   par l'encre pleine et par un filet court de 14 px. */
.site-navigation { --pas-menu: 30px; gap: var(--pas-menu); }
.site-navigation-gamme {
  position: relative; display: flex; align-items: center;
  gap: var(--pas-menu); padding-left: var(--pas-menu);
}
.site-navigation-gamme::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 14px; margin-top: -7px; background: var(--bordure);
}
.site-navigation-gamme a { color: var(--encre); }
.site-navigation a[aria-current="page"] { color: var(--primaire); background-size: 100% 1px; }
/* Sous 1320 px le pas se resserre d'un bloc — partout à la fois. */
@media (max-width: 1320px) {
  .site-navigation { --pas-menu: 22px; }
}

/* --- Le menu du téléphone --------------------------------------------------
   Fermé sur grand écran : la rangée de liens le remplace. Sous 1180 px, c'est
   le SEUL accès aux sections et aux vitrines de la gamme. */
.site-menu { display: none; position: relative; }
.site-menu > summary {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: 4px;
  border: 1px solid var(--bordure); border-radius: 2px;
  color: var(--encre); cursor: pointer; list-style: none;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary::marker { content: ""; }
.site-menu[open] > summary { border-color: var(--primaire); color: var(--primaire); }
.site-menu > summary .icone { width: 20px; height: 20px; }
/* `display` est posé sur l'ÉTAT, jamais sur le panneau seul : une règle
   d'auteur bat la feuille du navigateur, et un simple `display: flex` ici
   laisserait le panneau suspendu, volet fermé (payé sur Baccus, 04.09.2026). */
.site-menu[open] > .site-menu-panneau { display: flex; }
.site-menu:not([open]) > .site-menu-panneau { display: none; }
.site-menu-panneau {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 20;
  flex-direction: column; min-width: 216px;
  padding: 8px; background: var(--fond); border: 1px solid var(--bordure);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
}
.site-menu-panneau nav { display: flex; flex-direction: column; }
/* 44 px : un doigt, pas un curseur. */
.site-menu-panneau nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--encre); font-size: 14px; font-weight: 500; text-decoration: none;
}
.site-menu-panneau nav a:hover { color: var(--primaire); background: var(--primaire-tint); }
.site-menu-panneau .site-navigation-gamme {
  flex-direction: column; align-items: stretch; gap: 0;
  margin-top: 6px; padding: 6px 0 0; border-top: 1px solid var(--bordure);
}
.site-menu-panneau .site-navigation-gamme::before { display: none; }
.site-menu-panneau a[aria-current="page"] { color: var(--primaire); background: var(--primaire-tint); }
/* La rangée s'efface AU PROFIT du menu, jamais dans le vide : les deux règles
   vont ensemble. 1180 px et non 980 : à sept liens la rangée débordait de
   58 px à 1024 (banc responsive de Mydas, 17.09.2026). */
@media (max-width: 1180px) {
  .site-navigation { display: none; }
  .site-menu { display: block; }
}
/* Le choix de langue vit dans la barre, sauf au téléphone où il passe dans le
   panneau : la barre débordait de 10 px à 390 et de 41 px à 360 (Mydas). */
.site-menu-panneau .site-langue { display: none; }
@media (max-width: 680px) {
  .site-actions > .site-langue { display: none; }
  .site-menu-panneau .site-langue {
    display: flex; justify-content: flex-start; margin: 6px 0 0; padding: 6px 6px 0;
    border-top: 1px solid var(--bordure);
  }
  .site-menu-panneau .site-langue a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 12px;
  }
}
/* Sous 420 px la barre est comptée au pixel (360 : marque, langue, connexion,
   pack). Le bouton du menu se resserre en largeur, pas en hauteur. */
@media (max-width: 420px) {
  .site-menu > summary { width: 36px; margin-left: 2px; }
}

/* --- Le héros au téléphone couché (27.09.2026) ---------------------------------
   Mesuré à 844 × 390 : l'action du héros tombait à 520 px sur Mydas et Deimos,
   484 sur Kronos, 455 sur Baccus, 392 sur Oikos — toujours sous le pli, avec
   un bandeau et un en-tête qui prennent déjà 122 px. À 667 × 375, la règle
   « actions en colonne » du téléphone debout s'appliquait aussi couché et
   empilait 98 à 164 px de boutons là où 42 suffisent. Sous 540 px de haut, au
   doigt : le cartouche se tait (le bandeau porte déjà l'annonce, comme pour le
   rappel flottant), le rythme du héros se règle en vh, le titre descend d'un
   rang et les actions reviennent côte à côte. Le bureau, même bas, ne bouge pas. */
@media (max-height: 540px) and (pointer: coarse) {
  .hero-public { min-height: auto; padding-top: 3vh; padding-bottom: 8vh; }
  .hero-public .annonce-cartouche { display: none; }
  .hero-public-texte h1 { margin: 10px 0 12px; font-size: clamp(26px, 7.5vh, 34px); }
  .hero-public-intro { font-size: 15px; line-height: 1.5; }
  .hero-public-actions {
    margin-top: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  }
}