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

#tarif,
#souscription {
  scroll-margin-top: 24px;
}

/* --- 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; }
/* La BARRE : pleine largeur, sans borne. Elle porte le fond, le filet et le
   collant. La RANGÉE, elle, borne le contenu.
   Les deux étaient un seul élément borné à 1240 px : en se condensant, l'en-tête
   devenait une dalle blanche translucide de 1240 px flottant au centre, avec
   l'aplat noir de la section à sa gauche et à sa droite, et son filet gris
   suspendu dans le vide. Nul à 1280 px, grotesque au-delà de 2000. */
.site-entete-barre {
  position: relative; z-index: 10;
  border-bottom: 1px solid var(--bordure);
}
.site-entete {
  max-width: 1240px; height: 76px; margin: 0 auto;
  padding: 0 28px; display: flex; align-items: center; gap: 36px;
}
.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;
}
.site-eyebrow > span { display: block; width: 28px; height: 1px; background: var(--accent); }
.site-eyebrow.clair { color: var(--sur-noir); }
.site-eyebrow.clair > span { background: 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-survol); }

.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(19, 17, 16, .16);
  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(--noir-profond); color: var(--sur-noir); }
.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-noir); background: var(--noir-profond); }
.site-bande-metier span { color: rgba(216,209,196,.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-kronos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.parcours-kronos article { position: relative; min-height: 270px; padding: 30px 26px; border-right: 1px solid var(--bordure); }
.parcours-kronos article:last-child { border-right: 0; }
.parcours-kronos article > b { position: absolute; right: 20px; top: 20px; color: var(--bordure); font: 26px var(--police-marque); }
.parcours-kronos .icone { width: 27px; height: 27px; color: var(--primaire); }
.parcours-kronos h3, .fonctionnalites-public h3 { margin: 52px 0 12px; font: 400 22px var(--police-marque); }
.parcours-kronos 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(--noir-profond); color: white; border-color: var(--noir-profond); }
.fonctionnalites-public .fonction-large p { color: var(--sur-noir); }
.fonctionnalites-public h3 { margin-top: 40px; }
.numero-public { color: var(--accent-texte); font-size: 11px; letter-spacing: .12em; }
.fonction-large .numero-public { color: var(--or); }
/* La carte noire redéfinit l'encre du bloc sans ré-encrer son titre : « Un
   stock qui raconte son histoire » se lisait noir sur noir (planche du
   08.09.2026). Restater la couleur au même endroit, comme Mydas et Baccus. */
.fonctionnalites-public .fonction-large h3 { color: #FFFFFF; }
.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-montre { 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(--noir-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-noir); 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-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.
   Rétroporté de Mydas le 31.08.2026. */
.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(--noir-profond); }
.recapitulatif-offre .legende { color: var(--sur-noir); }
.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-noir); 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-noir); }
.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); }
.recapitulatif-offre > p { margin: 22px 0 0; color: var(--sur-noir); 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(--noir-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-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-noir);
  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-noir);
  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(--noir-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-noir);
  font-size: 13px;
}

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

.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;
}

.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.

   Refonte du 25.08.2026 — les masters sont RECOLORÉS, pas redessinés
   (`scripts/recolorer_motif.py`). Deux jeux, et le choix n'est pas cosmétique :

   - `or_*`   sur fond CLAIR — hero, ouvertures de section, pied ;
   - `noir_*` sur fond SOMBRE — tranche des sections noires, sceau du tarif.

   Se tromper de jeu donne un rectangle blanc sur du noir, ou l'inverse : le
   « bord d'image visible » que la charte interdit depuis le premier jour.

   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 {
  /* Le hero reste CLAIR, et c'est une décision, pas un oubli. Le rythme en
     neuf temps interdit deux sections sombres qui se touchent ; le temps 2
     (bande métier) est un aplat noir. Un hero noir en aurait fait six cents
     pixels d'affilée — le défaut même que l'amendement du 24.08 corrigeait. */
  background-image: url("/static/img/motif/or_fond-1280.webp");
  background-size: cover; background-position: center;
}
@media (min-width: 1281px) {
  .vd-fond { background-image: url("/static/img/motif/or_fond-1920.webp"); }
}
.vd-veine {
  width: 160px; height: 20px;
  background-image: url("/static/img/motif/or_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;
  /* Le jeu NOIR, et le master est détouré en alpha : les veines flottent sur
     l'aplat de la section et émergent de l'ombre par le masque. Le jeu clair
     y poserait le marbre pâle, c'est-à-dire une bande blanche en pied de
     section sombre. */
  background-image: url("/static/img/motif/noir_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 {
  /* Le sceau ne se pose qu'au-dessus du prix, sur l'aplat noir du tarif :
     d'où le jeu noir, et pas de `--clair` qui était réservé au blanc galerie. */
  width: 76px; height: 76px;
  background: url("/static/img/motif/noir_sceau-alpha-300.webp") center / contain no-repeat;
}

/* --- 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. Aplat NOIR, 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-noir); background: var(--noir-profond); overflow: hidden;
}
.section-preuve h2 { color: white; }
.section-preuve .site-section-entete > p { color: var(--sur-noir); }
.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-noir); 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(216,209,196,.3); color: rgba(216,209,196,.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 l'aplat sombre et sortait du cadre, que
   la tranche oblige à garder en overflow:hidden. */
.section-preuve .apercu-produit::before { 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(19, 17, 16, .32); }
.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. */
.tarif-public .vd-sceau { margin: 0 auto 14px; }

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

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

@media (max-width: 980px) {
  .site-actions { margin-left: auto; }
  .hero-public { min-height: auto; padding-top: 60px; }
  .hero-public-texte { max-width: 700px; }
  .apercu-produit { width: min(720px, 100%); transform: none; }
  .preuve-grille { grid-template-columns: 1fr; gap: 40px; }
  .bases-isolees { grid-template-columns: 1fr; }
  .site-section-entete { grid-template-columns: 1fr; gap: 18px; }
  .parcours-kronos { grid-template-columns: 1fr 1fr; }
  .parcours-kronos article:nth-child(2) { border-right: 0; }
  .parcours-kronos 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 18px; }
  .site-actions .btn-discret { display: none; }
  .site-actions .btn-primaire { height: 32px; padding: 0 11px; font-size: 11px; }
  .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; }
  .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-kronos, .fonctionnalites-public { grid-template-columns: 1fr; }
  .parcours-kronos 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; }
}

@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-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 six emplois. Rien d'autre ne bouge sur la vitrine.

   1 apparition d'une section au défilement   4 tracé de la courbe d'activité
   2 séquençage du hero à l'ouverture         5 états d'interaction
   3 compteur chiffré                         6 condensation de l'en-tête

   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 kronos.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-barre {
  position: sticky; top: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--site-duree-court) var(--site-entree);
}
.site-entete {
  transition: height var(--site-duree-court) var(--site-entree);
}
/* L'attribut reste posé sur la RANGÉE par vitrine.js — le fond appartient à la
   barre, la hauteur à la rangée. `:has()` évite de toucher au script pour un
   changement qui est purement de mise en page. */
.site-entete-barre:has(.site-entete[data-condense]) {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-entete[data-condense] { height: 60px; }

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

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

/* --- 5 · États d'interaction ---------------------------------------------- */
.site-navigation a, .parcours-kronos article, .fonctionnalites-public article {
  transition: color var(--site-duree-court) var(--site-entree),
              border-color var(--site-duree-court) var(--site-entree);
}

/* --- 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, .site-entete-barre { transition: none; }
  .site-entete::before { transition: none; }
  .rvl, .seq > * { opacity: 1 !important; transform: none !important; }
  .courbe.trace { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

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

/* La page s'imprime : un juriste travaille sur papier. */
@media print {
  .site-entete, .site-entete-barre, .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; }

/* ======================= Révision responsive du 08.09.2026 ===============
   Portée depuis Mydas ; mesurée par scripts/banc_responsive.py. */
.site-public fieldset { min-width: 0; }
.site-navigation a { display: inline-flex; align-items: center; min-height: 32px; }
.site-public input[type="checkbox"], .site-public input[type="radio"] { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.souscription-apercu > * { min-width: 0; }
@media (max-width: 720px) {
  .recapitulatif-offre > p, .recap-marque small, .offres-aide p,
  .champ-apercu p, .champ-apercu label, .apercu-local p, .site-pied p,
  .site-pied > div, .offre-engagements span { font-size: 12px; }
}
@media (max-width: 420px) {
  .site-langue a { min-width: 26px; padding: 0 3px; }
  .souscription-contenu .btn-grand { white-space: normal; height: auto; min-height: 44px; padding: 10px 14px; line-height: 1.3; }
}
@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 {
    display: inline-flex; align-items: center; min-height: 32px;
  }
  .site-pied > div { flex-wrap: wrap; gap: 6px 24px; }
}


/* === Le film du temps 4 — 25.09.2026 ==========================================
   Le film de Kronos, montré jusqu'ici sur la page que Mydas lui consacrait, rejoint la vitrine du
   produit, dans le cadre de l'aperçu (décision de Johann du 25.09.2026, lot 4
   de l'ADR 0015 de Mydas). Transposé de la feuille de Mydas, « Le film » ; les
   teintes sont celles de la maison (kronos.css), relevées comme Mydas les avait
   relevées pour sa page /kronos.

   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 ;
   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, 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;
}
/* 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: transparent;
  transition: background var(--site-duree-court) var(--site-entree);
}
.film-declencheur:hover::before,
.film-declencheur:focus-visible::before { background: rgba(11, 10, 9, .35); }
.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: #0B0A09; background: var(--or); border-radius: 50%;
  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 { background: #D8B368; transform: scale(1.06); }
/* 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(11, 10, 9, .9); border: 1px solid var(--filet-or-faible);
}
.film-cartouche strong { font: 400 16px var(--police-marque); }
.film-cartouche small { color: rgba(216, 209, 196, .85); font-size: 11px; }
/* Le film hérite du cadre de l'aperçu — même bordure, même rayon. Aucun fondu :
   le film est posé SOUS le dessin dès le clic, le dessin opaque le couvre
   jusqu'à la première image, puis s'efface — rien ne peut rester à mi-chemin. */
.film-video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: contain; background: #0B0A09;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px;
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .55);
}
.film-video:fullscreen { border: 0; border-radius: 0; box-shadow: none; }
.film .apercu-produit { z-index: 1; }
.film[data-etat] .film-declencheur { display: none; }
.film[data-etat="lecture"] { aspect-ratio: 16 / 9; }
.film[data-etat="lecture"] .apercu-produit { display: none; }
/* Le cadre tombe à 360 px : la pastille et son cartouche se resserrent pour
   ne pas manger le dessin qu'ils invitent à remplacer. */
@media (max-width: 680px) {
  .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; }
}
/* Le film ne bouge pas de lui-même : restent ses états d'interaction, et eux
   seuls. Le BOUTON reste entier — un film qu'on demande doit se jouer, quelle
   que soit la préférence de mouvement (vitrine.js, fermeture du film). */
@media (prefers-reduced-motion: reduce) {
  .film-pastille { transform: none !important; }
  .film-declencheur::before, .film-pastille { transition: none; }
}


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

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

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

/* --- Pack Solo et récapitulatif calculé par le serveur (grille de Mydas, 27.09.2026) ---
   Repris de Deimos, où ces règles sont mesurées aux sept formats. Le fond du
   récapitulatif est noir ici : ses filets et ses textes lisent `--sur-noir`. */
.recapitulatif-offre .recap-suite { margin: 10px 0 0; color: var(--sur-noir); font-size: 10px; line-height: 1.5; }
/* 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;
}
.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-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; }
.choix-pack { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; }
.choix-pack legend { grid-column: 1 / -1; }
.recapitulatif-offre dl .recap-refus { display: block; padding: 10px 12px; border: 1px solid var(--sur-noir); }
.recapitulatif-offre .recap-refus dt { margin-bottom: 4px; }
.recapitulatif-offre .recap-refus dd { color: white; font-size: 11px; line-height: 1.55; }
@media (max-width: 520px) {
  .choix-pack { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .recapitulatif-offre .recap-suite, .offre-essai small { font-size: 12px; }
  .offre-essai a { display: inline-flex; align-items: center; min-height: 32px; }
}