/* ========================================================================
   Mydas — 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,
#packs,
#ecosysteme,
#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-mydas` — 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 Mydas, 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 : `midas.css` --primaire #006039, `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 Mydas, et elles n'ont rien
     à faire ailleurs dans la feuille. */
  --maison-mydas:  #006039;
  --maison-kronos: #131110;
  --maison-baccus: #5A1A26;
  /* `oikos.css` --primaire #9A5F30, le cuivre d'Oikos (25.09.2026, ADR 0015). */
  --maison-oikos:  #9A5F30;
  /* `deimos.css` --primaire #0A5A9E, le bleu de Deimos : cinquième
     spécialiste de l'écosystème depuis le 27.09.2026. */
  --maison-deimos: #0A5A9E;
  /* `phoss-theme.css` --primaire #0a0a0a : Phoss, le généraliste, est neutre,
     noir et blanc, avec un seul accent ambre qu'aucun texte ne porte. Le
     noir de Kronos est CHAUD (#131110), celui-ci est franc — deux noirs,
     jamais côte à côte : le généraliste a son propre rang (27.09.2026). */
  --maison-phoss:  #0a0a0a;
}
[data-maison="mydas"]  { --maison: var(--maison-mydas); }
[data-maison="kronos"] { --maison: var(--maison-kronos); }
[data-maison="baccus"] { --maison: var(--maison-baccus); }
[data-maison="oikos"]  { --maison: var(--maison-oikos); }
[data-maison="deimos"] { --maison: var(--maison-deimos); }
[data-maison="phoss"]  { --maison: var(--maison-phoss); }

.gamme-hbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Quatre produits le jour où Oikos est servi (ADR 0015, lot 3) : une rangée
   de quatre au bureau, deux par deux entre 981 et 1180 px ; sous 980 px la
   colonne unique reste la règle. Bornées par des requêtes, jamais posées
   seules : `:has()` pèse plus lourd que la règle du téléphone et l'aurait
   battue. */
@media (min-width: 1181px) {
  .gamme-hbs:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .gamme-hbs:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
/* Cinq spécialistes (27.09.2026) : une rangée de cinq au bureau — c'est ce
   qu'on doit lire d'un regard, « cinq » —, trois puis deux entre 981 et
   1180 px ; sous 980 px la colonne unique reste la règle. Écrites APRÈS les
   règles à quatre, à spécificité égale : cinq enfants satisfont aussi
   `:nth-child(4)`, et c'est l'ordre qui tranche. À cinq, l'écart et le
   rembourrage se resserrent : 222 px par carte dans les 1184 du cadre. */
@media (min-width: 1181px) {
  .gamme-hbs:has(> :nth-child(5)) { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .gamme-hbs:has(> :nth-child(5)) > .gamme-produit { padding: 24px 20px; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .gamme-hbs:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
}
/* 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(0, 96, 57, .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;
}

/* --- Temps 7, second dessin (27.09.2026) : un généraliste, cinq spécialistes.
   Johann : « il faut séparer les choses ». Deux groupes dans la même section,
   chacun sous son étiquette : Phoss, le généraliste, seul et large, sur son
   propre domaine ; puis les cinq spécialistes en rangée. Même carte, même
   facture : c'est la disposition qui sépare, pas une seconde grammaire. */
.gamme-groupe { margin-top: 48px; }
.site-section-entete + .gamme-groupe { margin-top: 0; }
.gamme-groupe-entete { min-width: 0; }
.gamme-groupe-entete p { max-width: 480px; margin: 12px 0 0; color: var(--encre-douce); font-size: 13px; line-height: 1.7; }
/* --- Temps 7, troisième dessin (27.09.2026, retour de Johann : « l'espace
   pourrait être mieux employé ; il faut montrer que tout est en vie et en
   plein développement, c'est un écosystème, pas une page figée ») --------
   Au bureau la section devient une grille de deux colonnes : à gauche le
   titre, puis, calée en bas, l'étiquette et la phrase des spécialistes ; à
   droite, à hauteur du titre, le généraliste et sa carte. Les cinq cartes
   puis la feuille de route prennent toute la largeur. L'ordre du document ne
   change pas (titre, généraliste, spécialistes) : la grille replace, et sous
   980 px tout s'empile dans cet ordre. Le groupe des spécialistes s'efface
   (`display: contents`) pour que son étiquette et sa rangée se placent
   chacune dans la grille. La carte du généraliste, seule en colonne sur une
   tablette, garde la mesure d'une carte : 60 caractères, cadre de 460 px. */
.gamme-groupe-generaliste .site-eyebrow { margin-bottom: 18px; }
.gamme-groupe-generaliste .gamme-produit p { max-width: 60ch; }
.gamme-groupe-generaliste .apercu-mini { max-width: 460px; }
@media (min-width: 981px) {
  .ecosysteme { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 80px; row-gap: 0; align-items: start; }
  .ecosysteme > * { grid-column: 1 / -1; min-width: 0; }
  .ecosysteme > .site-section-entete { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; margin-bottom: 0; }
  .ecosysteme > .gamme-groupe-generaliste { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .ecosysteme > .gamme-groupe-specialistes { display: contents; }
  /* Trois classes et non deux : la règle de l'en-tête (grille à deux colonnes, plus bas dans la
     feuille) gagnerait sinon à spécificité égale, et la phrase se mettrait à droite de son étiquette. */
  .ecosysteme .gamme-groupe-specialistes > .gamme-groupe-entete { display: block; grid-column: 1; grid-row: 2; align-self: end; margin: 40px 0 0; }
  .ecosysteme .gamme-groupe-specialistes > .gamme-groupe-entete p { margin-top: 12px; }
  .gamme-groupe-specialistes > .gamme-hbs { grid-column: 1 / -1; grid-row: 3; margin-top: 34px; }
  .ecosysteme > .feuille-route-entete { grid-row: 4; }
  .ecosysteme > .feuille-route { grid-row: 5; }
}
/* Le picto de la maison, en haut à droite de sa carte, dans sa couleur : les
   logos des ERP, ceux de leurs dépôts (partials/icones.html, picto_maison).
   Discret au repos, plein au survol ; le nom garde sa place à gauche, sans
   passer dessous. */
/* À la hauteur du nom, qui lui réserve sa place à droite : posé plus haut, il frôlait la fin
   des mentions datées (« … le 30.09.2026 ») à cinq colonnes. */
.gamme-picto { position: absolute; top: 50px; right: 18px; color: var(--maison); opacity: .6; transition: opacity var(--site-duree-court) var(--site-sortie); }
.gamme-picto svg { display: block; width: 40px; height: 40px; }
.gamme-produit:hover .gamme-picto { opacity: 1; }
.gamme-produit strong { padding-right: 56px; }
.gamme-groupe-generaliste .gamme-picto { top: 46px; right: 22px; }
.gamme-groupe-generaliste .gamme-picto svg { width: 52px; height: 52px; }
.gamme-groupe-generaliste .gamme-produit strong { padding-right: 72px; }
/* Les spécialistes : l'étiquette à gauche, la phrase de Johann à droite, comme
   l'en-tête de la feuille de route ; les cinq cartes dessous. */
.gamme-groupe-specialistes > .gamme-groupe-entete { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 26px; }
.gamme-groupe-specialistes > .gamme-groupe-entete p { margin-top: 0; }
/* Le partenaire se nomme, dans la phrase : lien en ligne, la phrase porte la
   cible (WCAG 2.5.8) ; il ne se coupe pas au milieu de son nom. */
.gamme-partenaire { color: var(--accent-texte); font-weight: 600; text-decoration: underline; text-decoration-color: var(--bordure); text-underline-offset: 3px; white-space: nowrap; }
.gamme-partenaire:hover, .gamme-partenaire:focus-visible { text-decoration-color: currentColor; }
/* L'état de chaque carte, en tête, avec un point qui bat : « En accès
   anticipé » (vert, jalon tenu), « Accès anticipé le 30.09.2026 » (or, jalon
   à venir), « En développement » (or, sans jalon), « Vitrine en création »
   (or, Phoss). Lu dans la feuille de route, jamais écrit ici
   (app/marketing/gamme.py, etat_de). Le battement n'existe que sous la marque
   du script et s'éteint sous prefers-reduced-motion ; au repos le point est
   plein : l'état se lit sans mouvement. */
.gamme-etat {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 4px 9px 4px 8px;
  color: var(--encre-douce); background: var(--fond); border: 1px solid var(--bordure);
  font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.gamme-etat > i { flex: none; width: 6px; height: 6px; border-radius: 50%; color: var(--or); background: currentColor; }
.gamme-etat[data-ton="livre"] { color: var(--succes); }
.gamme-etat[data-ton="livre"] > i { color: var(--succes); }

/* 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; }
  /* Les deux groupes s'empilent : étiquette, phrase, carte(s) (27.09.2026). */
  .gamme-groupe-specialistes > .gamme-groupe-entete { grid-template-columns: 1fr; gap: 18px; }
  .gamme-groupe { margin-top: 40px; }
}

@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; }
.hero-public-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.lien-fleche { color: var(--encre); font-size: 13px; font-weight: 500; text-decoration: none; }
.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-mydas { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.parcours-mydas article { position: relative; min-height: 270px; padding: 30px 26px; border-right: 1px solid var(--bordure); }
.parcours-mydas article:last-child { border-right: 0; }
.parcours-mydas article > b { position: absolute; right: 20px; top: 20px; color: var(--bordure); font: 26px var(--police-marque); }
.parcours-mydas .icone { width: 27px; height: 27px; color: var(--primaire); }
.parcours-mydas h3, .fonctionnalites-public h3 { margin: 52px 0 12px; font: 400 22px var(--police-marque); }
.parcours-mydas 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; }
/* midas.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-gemme { 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. */
.vd-fond {
  background-image: url("/static/img/motif/web_fond-1280.webp");
  background-size: cover; background-position: center;
}
@media (min-width: 1281px) {
  .vd-fond { background-image: url("/static/img/motif/web_fond-1920.webp"); }
}
.vd-veine {
  width: 160px; height: 20px;
  background-image: url("/static/img/motif/web_veine-1000.webp");
  background-size: cover; background-position: center;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.vd-veine--centree { width: 240px; margin: 0 auto; }
.vd-tranche {
  position: absolute; left: 0; right: 0; bottom: 0; height: 84px;
  background-image: url("/static/img/motif/web_tranche-alpha-1800.webp");
  background-size: cover; background-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
  pointer-events: none;
}
.vd-sceau {
  width: 76px; height: 76px; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 70%);
  mask-image: radial-gradient(circle, #000 45%, transparent 70%);
}

/* --- 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 (midas.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). */
.tarif-public .vd-sceau { margin: 0 auto 34px; }

/* 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-navigation { display: none; }
  .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-mydas { grid-template-columns: 1fr 1fr; }
  .parcours-mydas article:nth-child(2) { border-right: 0; }
  .parcours-mydas 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-mydas, .fonctionnalites-public { grid-template-columns: 1fr; }
  .parcours-mydas 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; }
}

@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 midas.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 — « Mydas 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-mydas { position: relative; }
.parcours-mydas::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-mydas::before { background-size: 0% 2px; }
html[data-mouvement] .parcours-mydas.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 pierre a une histoire. Mydas 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-mydas 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 Mydas, 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, Mydas 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; }

/* --- 12 (extension, 27.09.2026) · Les intérieurs vivent ----------------------
   Johann : « c'est un écosystème, pas une page figée ». Une fois révélé, chaque
   cadre minuscule tourne : toutes les trois secondes le module actif passe au
   suivant — la ligne s'éclaire, son point prend la couleur de la maison, le
   trait du menu s'allume en or — et le point d'état de la carte bat lentement.
   Rien ne se déplace (aucune translation, aucune échelle : la charte plafonne
   à 12 px et interdit l'échelle sur un bloc révélé) : des couleurs et un halo
   qui respirent. Tout vit sous la marque du script et s'arrête net sous
   prefers-reduced-motion, où l'état de repos — premier module actif, point
   plein — est déjà complet. */
@keyframes gamme-vie-ligne { 0%, 31% { color: var(--encre); } 34%, 100% { color: var(--encre-attenuee); } }
@keyframes gamme-vie-point { 0%, 31% { background-color: var(--maison); } 34%, 100% { background-color: var(--bordure); } }
@keyframes gamme-vie-menu { 0%, 31% { background-color: var(--or); } 34%, 100% { background-color: rgba(255, 255, 255, .28); } }
@keyframes gamme-pouls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
html[data-mouvement] .rvl.vu .apercu-mini-page > span { animation: gamme-vie-ligne 9s ease-in-out infinite; }
html[data-mouvement] .rvl.vu .apercu-mini-page > span > i { animation: gamme-vie-point 9s ease-in-out infinite; }
html[data-mouvement] .rvl.vu .apercu-mini-menu > i { animation: gamme-vie-menu 9s ease-in-out infinite; }
html[data-mouvement] .rvl.vu .apercu-mini-page > span:nth-child(2),
html[data-mouvement] .rvl.vu .apercu-mini-page > span:nth-child(2) > i,
html[data-mouvement] .rvl.vu .apercu-mini-menu > i:nth-child(2) { animation-delay: 3s; }
html[data-mouvement] .rvl.vu .apercu-mini-page > span:nth-child(3),
html[data-mouvement] .rvl.vu .apercu-mini-page > span:nth-child(3) > i,
html[data-mouvement] .rvl.vu .apercu-mini-menu > i:nth-child(3) { animation-delay: 6s; }
html[data-mouvement] .gamme-etat > i { animation: gamme-pouls 2.6s ease-out infinite; }

/* 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-mydas::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; }
  /* Les intérieurs et les points d'état de l'écosystème (27.09.2026) : au repos. */
  .gamme-etat > i, .apercu-mini-page > span, .apercu-mini-page > span > i, .apercu-mini-menu > i { animation: 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-mydas`, `.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; }
}


/* --- Les pages de la gamme — /kronos, /baccus ------------------------------
   Décidées le 17.09.2026 (app/marketing/pages_gamme.py). La page d'un ERP
   voisin reprend les temps de la landing ; ce qui change, c'est la MAISON :
   ses aplats sombres, son jeu du motif, son signe. Tout passe par l'enveloppe
   `.page-maison[data-maison]`, qui redéfinit les jetons que la feuille lit
   déjà (`--primaire`, `--vert-profond`, `--sur-vert`) — la barre et le pied,
   hors de l'enveloppe, restent ceux de Mydas : on n'a pas changé de site.

   Les valeurs sont relevées dans le `:root` de chaque produit (kronos.css,
   baccus.css), jamais choisies ici. Le nom `--vert-profond` reste : c'est le
   rôle « aplat sombre des moments », et renommer un jeton dans deux mille
   lignes pour deux pages ferait plus de régressions que de clarté. */
.page-maison[data-maison="kronos"] {
  --primaire: #131110; --primaire-fonce: #3A342E; --primaire-tint: #EFEBE3;
  --vert-profond: #0B0A09; --sur-vert: #D8D1C4;
  --maison-ombre: rgba(11, 10, 9, .35); --maison-voile: rgba(11, 10, 9, .9);
}
.page-maison[data-maison="baccus"] {
  --primaire: #5A1A26; --primaire-fonce: #45121D; --primaire-tint: #F7EDEF;
  --vert-profond: #3E1019; --sur-vert: #DFD1D3;
  --maison-ombre: rgba(62, 16, 25, .35); --maison-voile: rgba(62, 16, 25, .9);
}
/* Les ombres et voiles de la feuille sont écrits en vert (rgba(4,51,31,…)) :
   sous l'enveloppe ils prennent l'ombre de la maison. */
.page-maison .apercu-produit { box-shadow: 0 26px 70px var(--maison-ombre); }
.page-maison .film-declencheur::before { background: transparent; }
.page-maison .film-declencheur:hover::before,
.page-maison .film-declencheur:focus-visible::before { background: var(--maison-ombre); }
.page-maison .film-cartouche { background: var(--maison-voile); }
.page-maison .gamme-produit--ici { box-shadow: 0 10px 30px -14px var(--maison-ombre); }
.page-maison .mention-exemple { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.72); }
.page-maison .site-bande-metier span { color: rgba(255,255,255,.55); }
.page-maison .film-video { background: var(--vert-profond); }

/* Le jeu OR du motif — dorure sur marbre pâle, sans turquoise — est celui que
   la vitrine du produit emploie ; la tranche vient du jeu SOMBRE de la
   maison, détouré en alpha (MOTIF-VEINE-DOR.md, règle 3 : jamais une image à
   fond blanc sur du sombre). Mobile d'abord, comme `.vd-fond` ; le
   préchargement de `produit.html` recopie ces trois requêtes. */
.page-maison .vd-fond { background-image: url("/static/img/motif/or_fond-760.webp"); }
@media (min-width: 761px) {
  .page-maison .vd-fond { background-image: url("/static/img/motif/or_fond-1280.webp"); }
}
@media (min-width: 1281px) {
  .page-maison .vd-fond { background-image: url("/static/img/motif/or_fond-1920.webp"); }
}
.page-maison .vd-veine { background-image: url("/static/img/motif/or_veine-1000.webp"); }
.page-maison[data-maison="kronos"] .vd-tranche { background-image: url("/static/img/motif/noir_tranche-alpha-1800.webp"); }
.page-maison[data-maison="baccus"] .vd-tranche { background-image: url("/static/img/motif/bordeaux_tranche-alpha-1800.webp"); }

/* L'objet de la fiche miniature (temps 5) : une icône de trait, pas le picto
   de Mydas — c'est une montre ou une bouteille qu'on montre. */
.mini-objet { width: 30px; height: 30px; }

/* Temps 6 — le pack. Deux cartes : le pack du produit, au filet de la maison,
   et ce qu'il comprend, au filet neutre. Un seul prix sur la page. */
.packs-maison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pack-maison {
  display: flex; flex-direction: column; padding: 30px 28px 28px;
  background: var(--surface); border: 1px solid var(--bordure); border-top: 3px solid var(--bordure);
}
.pack-maison--pack { border-top-color: var(--primaire); }
.pack-maison-eyebrow { color: var(--accent-texte); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.pack-maison-nom { display: block; margin-top: 10px; color: var(--primaire); font: 400 26px var(--police-marque); }
.pack-maison-prix { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 0; }
.pack-maison-prix b { color: var(--encre); font: 400 52px/1 var(--police-marque); font-variant-numeric: tabular-nums; }
.pack-maison-prix span { color: var(--encre-douce); font-size: 13px; }
.pack-maison-texte { margin: 14px 0 0; color: var(--encre-douce); font-size: 13px; line-height: 1.65; }
.pack-maison-points { margin: 18px 0 0; padding: 0; list-style: none; }
.pack-maison-points li {
  position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--bordure);
  color: var(--encre); font-size: 13px; line-height: 1.5;
}
.pack-maison-points li::before {
  content: ""; position: absolute; left: 2px; top: 16px; width: 5px; height: 5px;
  background: var(--or); transform: rotate(45deg);
}
.pack-maison > .btn { align-self: flex-start; margin-top: 26px; }
.pack-maison--contenu .pack-maison-points { margin-top: 12px; }
.pack-maison--contenu .pack-maison-points li:first-child { border-top: 0; }
.pack-maison--contenu .lien-fleche { align-self: flex-start; margin-top: auto; padding: 14px 0 0; }
.pack-maison-attente { margin: 26px 0 0; padding: 12px 14px; color: var(--encre-douce); background: var(--fond); border-left: 2px solid var(--or); font-size: 12px; line-height: 1.6; }
/* Le lien tient 24 px de haut au doigt (banc responsive, 17.09.2026 : 19 px
   au premier passage) : la ligne se donne du pas, elle ne grossit pas. */
.pack-maison-attente a { display: inline-block; margin-top: 2px; padding: 5px 0; color: var(--primaire); font-weight: 500; }
.packs-maison-note { max-width: 720px; margin: 22px 0 0; color: var(--encre-attenuee); font-size: 11px; line-height: 1.6; }

/* Temps 7 — la carte d'un produit voisin mène à sa vitrine ET à ses
   abonnements (décision de Johann du 25.09.2026). Un lien ne peut pas en
   contenir un autre : la carte est un <article>, le lien de la vitrine
   s'étend sur toute la carte par son `::after`, celui des abonnements passe
   au-dessus. Le filet de la maison s'épaissit au survol, comme avant. */
.gamme-produit { position: relative; }
.gamme-produit:has(.gamme-lien:hover), .gamme-produit:has(.gamme-lien:focus-visible) { border-color: var(--maison); }
.gamme-produit:has(.gamme-lien:focus-visible) { outline: 2px solid var(--or); outline-offset: 2px; }
/* 24 px au doigt (banc responsive, 25.09.2026 : 17 px au premier passage) :
   le lien se donne du pas, la carte garde son rythme (10 + 5 = 15 px). */
.gamme-lien { display: inline-block; margin-top: 10px; padding: 5px 0; color: var(--accent-texte); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.gamme-lien::after { content: ""; position: absolute; inset: 0; }
.gamme-lien:focus-visible { outline: none; }
.gamme-lien span { display: inline-block; margin-left: 4px; transition: transform var(--site-duree-court) var(--site-entree); }
.gamme-produit:has(.gamme-lien:hover) .gamme-lien span { transform: translateX(3px); }
/* 24 px au doigt au moins (banc responsive) : le lien se donne du pas, il ne
   grossit pas. Au-dessus du lien étendu, sinon il ne recevrait aucun clic. */
.gamme-abonnements {
  position: relative; z-index: 1; display: block; width: fit-content;
  margin-top: 8px; padding: 6px 0;
  color: var(--encre-douce); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-decoration: underline; text-decoration-color: var(--bordure); text-underline-offset: 3px;
}
.gamme-abonnements:hover, .gamme-abonnements:focus-visible { color: var(--maison); text-decoration-color: currentColor; }
.gamme-produit--ici .gamme-abonnements { margin-top: 10px; }

/* Temps 8 — le mot de la fin reprend l'aplat de la maison : la landing finit
   au clair parce que son tarif est déjà sombre ; ici les packs sont clairs,
   et la page se referme sur l'outil qu'elle présente. */
.site-cta--maison { color: white; background: var(--vert-profond); border-top: 0; }
.site-cta--maison h2 { color: #fff; }
.site-cta--maison p { color: var(--sur-vert); }
.site-cta--maison .site-cta-picto { color: rgba(194, 154, 75, .12); }
.site-cta--maison .site-eyebrow.clair { color: var(--sur-vert); }
.site-cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.lien-fleche--clair { color: white; }
.lien-fleche--clair span { color: var(--or); }

@media (max-width: 780px) {
  .packs-maison { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .pack-maison { padding: 24px 20px 22px; }
  .pack-maison-prix b { font-size: 44px; }
  .pack-maison > .btn { width: 100%; height: auto; min-height: 44px; padding: 10px 16px; text-align: center; white-space: normal; }
  .site-cta-actions { width: 100%; }
  .site-cta-actions .btn { width: 100%; height: auto; min-height: 44px; padding: 10px 16px; text-align: center; white-space: normal; }
}


/* --- Les trois pages de la gamme dans le menu (17.09.2026) -----------------
   Mydas, Kronos, Baccus : un groupe à part dans la rangée — ce sont des
   PAGES, les autres sont des sections. UN seul pas pour toute la rangée
   (`--pas-menu`) : entre deux liens, de part et d'autre du filet, et dans le
   groupe. Un premier jet mêlait trois écarts (30, 26, 22) et deux polices ;
   Johann l'a lu le jour même comme « pas harmonieux », à raison : dans une
   barre, c'est le rythme qui fait l'ordre, pas la variété.
   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, celui du cartouche. */
.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 980 px, c'est
   le SEUL accès aux sections et aux pages 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, 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. */
.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; }
}


/* --- « Se connecter » : le choix de l'outil (25.09.2026) ----------------------
   ADR 0015, décision M4 : une connexion par produit, chacun à sa porte. Même
   patron que le menu du téléphone : `display` posé sur l'ÉTAT, jamais sur le
   panneau seul (payé sur Baccus le 04.09.2026). Le bouton garde la forme et
   la taille de « Se connecter » d'avant, à toute largeur. */
.site-connexion { position: relative; }
.site-connexion > summary { list-style: none; cursor: pointer; }
.site-connexion > summary::-webkit-details-marker { display: none; }
.site-connexion > summary::marker { content: ""; }
.site-connexion[open] > summary { color: var(--primaire); }
.site-connexion[open] > .site-connexion-panneau { display: flex; }
.site-connexion:not([open]) > .site-connexion-panneau { display: none; }
.site-connexion-panneau {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 20;
  flex-direction: column; min-width: 232px;
  padding: 8px; background: var(--fond); border: 1px solid var(--bordure);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
}
/* 44 px : un doigt, pas un curseur. Le filet de gauche est celui de la
   maison, comme le filet du haut de sa carte au temps 7. */
.site-connexion-panneau a {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-height: 44px; padding: 4px 12px 4px 14px;
  color: var(--encre); font-size: 14px; font-weight: 500; text-decoration: none;
  border-left: 2px solid var(--maison);
}
.site-connexion-panneau a + a { margin-top: 4px; }
.site-connexion-panneau a small {
  color: var(--encre-attenuee); font-size: 10px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
}
.site-connexion-panneau a:hover, .site-connexion-panneau a:focus-visible { background: var(--primaire-tint); }
/* Au téléphone, le panneau s'aligne sur la barre et non sur le bouton : à
   360 px, 232 px accrochés à droite d'un bouton placé au milieu sortiraient
   de l'écran par la gauche. La barre est collante, donc positionnée. */
@media (max-width: 680px) {
  .site-connexion { position: static; }
  .site-connexion-panneau { top: 100%; left: 16px; right: 16px; min-width: 0; }
}

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