/* ========================================================================
   Baccus — 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 bordeaux 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; }

/* --- Le menu du téléphone -------------------------------------------------
   Fermé sur grand écran par `display: none` : la rangée de liens le remplace.
   Il ne s'agit pas d'un doublon décoratif — sous 980 px, c'est le SEUL accès
   aux sections et à la connexion. */
.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;
}
/* Safari dessine son propre triangle ; on le retire des deux façons connues. */
.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 pose sur l ETAT OUVERT, jamais sur le panneau seul.
   Le navigateur ferme un `<details>` avec `details:not([open]) > *:not(summary)
   { display: none }` -- une regle de FEUILLE UA. Or une regle d auteur bat
   toujours une regle UA, quelle que soit sa specificite : un simple
   `display: flex` ici rouvrait le panneau pour de bon. Mesure le 04.09.2026,
   menu ferme : 248 px de panneau suspendus au-dessus du hero.
   Le meme piege a frappe `.modules-grille` le meme jour. */
.site-menu[open] > .site-menu-panneau { display: flex; }
/* Et on FERME explicitement. S en remettre a la feuille du navigateur
   ne suffit pas : sa regle de fermeture cede devant n importe quelle
   declaration d auteur, et les implementations divergent (`display:
   none` sur les enfants hier, `content-visibility` sur
   `::details-content` aujourd hui). Mesure : le panneau restait
   suspendu au-dessus du hero, volet ferme. Explicite vaut mieux
   qu astucieux quand trois navigateurs doivent tomber d accord. */
.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: 208px;
  padding: 8px; background: var(--fond); border: 1px solid var(--bordure);
  /* La charte interdit l'ombre pour SÉPARER deux surfaces — c'est le rôle du
     filet. Ici la surface flotte au-dessus du contenu qui défile dessous : sans
     un voile, on lit les deux l'un dans l'autre. */
  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. Les liens de section faisaient 18 px de
   haut, ce qui se vise mal et se rate souvent. */
.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); }
/* « Se connecter » est l'entrée la plus importante du menu : sur un téléphone
   c'est le seul chemin vers la démonstration, et la démonstration est
   l'argument d'un produit qu'on règle six mois d'avance. Le style discret le
   rendait plus pâle que les ancres de section au-dessus — l'inverse du poids
   qu'il porte. */
.site-menu-panneau .btn-discret {
  justify-content: flex-start; min-height: 44px; margin-top: 6px; padding: 0 12px;
  border: 0; border-top: 1px solid var(--bordure); border-radius: 0;
  color: var(--primaire); font-size: 14px; font-weight: 500;
}
.site-menu-panneau .btn-discret:hover { background: var(--primaire-tint); color: var(--primaire); }
.site-menu-panneau .site-langue { justify-content: flex-start; margin: 4px 0 0; padding: 0 6px; }
/* 44 px dans les DEUX sens : ils sortaient a 42 de haut, et deux pixels
   manquants restent deux pixels manquants. */
.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;
}
/* 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-bordeaux); }
.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; }
/* L'ENCRE PLEINE, et non l'encre douce — la seule règle de la vitrine dont la
   raison ne se voit pas dans la feuille de style. Ce paragraphe est le seul du
   site posé sur une PHOTOGRAPHIE : le motif y monte jusque sous ses deux
   dernières lignes, et le fond y descend à #A19F9A dans son vingtième le plus
   sombre. --encre-douce y tient 2.68:1, hors AA ; --encre y tient 6.58:1.
   Le contraste d'un jeton n'est garanti que sur le fond pour lequel il a été
   choisi, et --encre-douce a été choisie sur du blanc.
   Mesuré par `scripts/banc_vitrine.py`, qui refuse la régression. */
.hero-public-intro { max-width: 560px; color: var(--encre); 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; }
/* La flèche hérite de l'encre du lien plutôt que de l'or : posée sur la
   photographie de feuille d'or, elle sortait à 1,65:1 en mobile, noyée sur
   toute sa boîte. Une flèche qu'on ne voit pas ne dit pas qu'on peut suivre. */
.lien-fleche span { margin-left: 6px; color: inherit; }

.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(0, 0, 0, .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(--bordeaux-profond); color: var(--sur-bordeaux); }
.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); }
/* La page de l'aperçu REPOSE son encre, et c'est indispensable : elle est une
   surface CLAIRE posée au milieu d'une section sombre, dont elle héritait la
   couleur de texte. Les trois indicateurs, le salut et les titres de cartes
   s'écrivaient donc en --sur-bordeaux sur du blanc — 1.2:1, illisible. Le
   défaut existait déjà à l'époque du noir et se voyait moins : un beige pâle
   sur blanc a l'air d'un gris clair, un rose pâle a l'air d'une erreur.
   Règle générale : une surface qui change de fond redit sa couleur de texte. */
.apercu-page { padding: 25px 26px; background: var(--fond); color: var(--encre); }
.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-bordeaux); background: var(--bordeaux-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-baccus { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.parcours-baccus article { position: relative; min-height: 270px; padding: 30px 26px; border-right: 1px solid var(--bordure); }
.parcours-baccus article:last-child { border-right: 0; }
/* `--bordure` est une couleur de TRAIT : à 26 px elle rendait ces numéros
   à 1,28:1 quand le seuil du grand texte est 3:1. Ils numérotent les quatre
   étapes du parcours — on doit pouvoir les lire, pas seulement les deviner. */
.parcours-baccus article > b { position: absolute; right: 20px; top: 20px; color: var(--encre-attenuee); font: 26px var(--police-marque); }
.parcours-baccus .icone { width: 27px; height: 27px; color: var(--primaire); }
.parcours-baccus h3, .fonctionnalites-public h3 { margin: 52px 0 12px; font: 400 22px var(--police-marque); }
.parcours-baccus 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(--bordeaux-profond); color: white; border-color: var(--bordeaux-profond); }
.fonctionnalites-public .fonction-large p { color: var(--sur-bordeaux); }
/* Le titre AUSSI, et pas seulement par heritage. baccus.css pose
   `h1, h2, h3, h4 { color: var(--encre) }` : cette regle CIBLE le h3, donc elle
   bat le `color: white` pose sur la carte, qui n'est qu'un heritage. Le titre
   sortait a 1.07:1 sur l'aplat bordeaux - illisible, sur la carte la plus large
   de la grille. Les trois autres blocs sombres ont chacun leur correctif
   explicite ; celui-ci avait ete oublie au passage au bordeaux du 04.09. */
.fonctionnalites-public .fonction-large h3 { color: #FFFFFF; }
.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); }
.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-bouteille { 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(--bordeaux-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-bordeaux); 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); }
/* Le tarif croisé de la gamme. Il porte le LAVIS DORÉ et non le lavis bleu de
   `.apercu-local` : ce n'est pas une information de service mais une offre, et
   deux encadrés de même couleur au-dessus du même formulaire se lisent comme un
   seul bloc qu'on saute. L'or est la couleur des montants mis en scène. */
.reduction-gamme { margin-bottom: 16px; padding: 12px 14px; background: var(--accent-tint); border-left: 2px solid var(--accent); }
.reduction-gamme strong { display: block; color: var(--accent-texte); font-size: 11px; }
.reduction-gamme p { margin: 4px 0 0; color: var(--encre-douce); font-size: 10px; line-height: 1.5; }

.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;
}
/* La bordure MARQUE le champ actif, elle ne remplace pas l'anneau : retirer
   `outline` faisait perdre le fil au clavier sur le seul formulaire du site
   où l'on saisit ses coordonnées avant de payer. Mesuré le 04.09.2026 —
   il ne restait qu'un trait d'un pixel, là où tout le site en pose deux. */
.champ-apercu input:focus { border-color: var(--primaire); }
.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(--bordeaux-profond); }
.recapitulatif-offre .legende { color: var(--sur-bordeaux); }
.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-bordeaux); 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-bordeaux); }
.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-bordeaux); 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(--bordeaux-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-bordeaux);
  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-bordeaux);
  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(--bordeaux-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-bordeaux);
  font-size: 13px;
}

.offre-unique-prix small {
  color: var(--sur-bordeaux);
  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 ;
   - `bordeaux_*` sur fond SOMBRE — tranche des sections bordeaux, sceau du tarif.

   Se tromper de jeu donne un rectangle blanc sur du bordeaux, 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 bordeaux. Un hero sombre 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"); }
}
/* Sous 760 px, la variante 1280 pesait 154 Ko pour une surface qui n en
   demande que 56. La marche existait vers le haut (1920) et pas vers le
   bas : le telephone payait le prix de l ordinateur.
   ATTENTION : toute marche ajoutee ici doit l etre AUSSI dans le bloc
   `preload` de accueil.html, sans quoi le navigateur precharge une
   variante qu il n affichera jamais -- et le gain est annule. */
@media (max-width: 760px) {
  .vd-fond { background-image: url("/static/img/motif/or_fond-760.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 BORDEAUX, 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/bordeaux_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 bordeaux du tarif :
     d'où le jeu bordeaux, et pas de `--clair` réservé au blanc galerie. */
  width: 76px; height: 76px;
  background: url("/static/img/motif/bordeaux_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 BORDEAUX, 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-bordeaux); background: var(--bordeaux-profond); overflow: hidden;
}
.section-preuve h2 { color: white; }
.section-preuve .site-section-entete > p { color: var(--sur-bordeaux); }
.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-bordeaux); 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(0, 0, 0, .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; }

/* La rangée de liens s'efface AU PROFIT du menu, jamais dans le vide : les
   deux règles vont ensemble et se lisent ensemble. 1180 px et non 980 depuis
   la gamme dans la barre (26.09.2026) : à sept liens la rangée débordait. */
@media (max-width: 1180px) {
  .site-navigation { display: none; }
  .site-menu { display: block; }
}
@media (max-width: 980px) {
  /* Le lien quitte la barre DÈS que le menu le porte, sinon il y paraît deux
     fois entre 680 et 980 px — et deux « Se connecter » sur une même barre
     font hésiter au lieu d'aider.

     `>` et non un descendant quelconque : le menu est lui-même dans
     `.site-actions`, et la règle sans le chevron masquait la copie qu'elle
     venait d'y déplacer. Le panneau s'ouvrait alors sur trois entrées
     invisibles — mesurées à 0 × 0 le 04.09.2026. */
  .site-actions > .btn-discret { 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-baccus { grid-template-columns: 1fr 1fr; }
  .parcours-baccus article:nth-child(2) { border-right: 0; }
  .parcours-baccus 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; gap: 12px; }
  /* Mesure a 375 px : marque 117 + langue 57 + menu 44 + bouton 116 = 334, plus
     36 de marges = 370 pour 375 disponibles. Il ne restait rien pour les
     espaces. Le choix de langue passe donc dans le menu, ou il garde ses 44 px
     au lieu des 25 qu'il avait ici. */
  .site-actions > .site-langue { display: none; }  /* la barre, pas le menu */
  /* 44 px de haut, seuil du doigt. Le bouton mesurait 32 px : a 375 px de large
     c'est la cible la plus importante de la page, et la plus ratee. */
  .site-actions .btn-primaire { min-height: 44px; padding: 0 13px; 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. */
  /* 345 Ko pour une bande de 56 px de haut, mesures le 04.09.2026 : a elle
     seule la moitie du poids de la page sur un telephone. La variante 900
     couvre un ecran de 375 px en double densite. */
  .vd-tranche {
    height: 56px;
    background-image: url("/static/img/motif/bordeaux_tranche-alpha-900.webp");
  }
  .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-baccus, .fonctionnalites-public { grid-template-columns: 1fr; }
  .parcours-baccus 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 baccus.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-baccus 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; }

/* Le bloc final propose deux issues : la démonstration d'abord, le
   parcours d'achat ensuite. Elles s'empilent sous 780 px plutôt que de se
   serrer — deux boutons à l'étroit sur un téléphone ne se visent plus. */
.site-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.site-cta-actions .lien-fleche { color: var(--sur-bordeaux); }
@media (max-width: 780px) {
  .site-cta-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .site-cta-actions .lien-fleche { text-align: center; }
}

/* L'identité de l'éditeur, en pied. Une `<address>` et non un paragraphe : ce
   sont les coordonnées du responsable de la page, et c'est exactement ce que
   cette balise désigne. Les séparateurs sont des pseudo-éléments — un « · »
   tapé dans le gabarit se ferait lire à voix haute entre chaque champ. */
.site-pied-editeur {
  grid-column: 1 / -1; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--bordure);
  color: var(--encre-attenuee); font-size: 12px; font-style: normal; line-height: 1.7;
}
.site-pied-editeur > * + *::before { content: " · "; color: var(--bordure); }
.site-pied-editeur a { color: var(--encre-attenuee); text-decoration: underline; }
.site-pied-editeur a:hover { color: var(--primaire); }
@media (max-width: 680px) {
  /* Empilé : trois champs et un courriel sur une ligne de 375 px se coupent
     n'importe où, et une adresse coupée n'est plus une adresse. */
  .site-pied-editeur { display: flex; flex-direction: column; gap: 3px; }
  .site-pied-editeur > * + *::before { content: none; }
  .site-pied-editeur a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- Les 27 modules, un par un -------------------------------------------
   Repliee : elle repond a celui qui la cherche sans imposer vingt-sept lignes
   a celui qui lit le recit au-dessus. */
.modules-tous { margin-top: 46px; border-top: 1px solid var(--bordure); }
.modules-tous > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 6px 2px;
  color: var(--primaire); font-size: 14px; font-weight: 500;
  cursor: pointer; list-style: none;
}
.modules-tous > summary::-webkit-details-marker { display: none; }
.modules-tous > summary::marker { content: ""; }
.modules-tous > summary .icone { transform: rotate(90deg); transition: transform var(--site-duree-court) var(--site-entree); }
.modules-tous[open] > summary .icone { transform: rotate(-90deg); }
/* Meme regle que pour le menu, et pour la meme raison : posee sur la grille
   seule, la declaration `display` battait la feuille UA et laissait 459 px de
   liste deroulee sous un volet ferme. Le banc l a vue en chevauchement avec le
   titre de la section suivante -- pas a l oeil, au pixel. */
.modules-tous[open] > .modules-grille { display: grid; }
/* Fermeture explicite, meme raison que pour le menu : le banc mesurait
   459 px de liste deroulee sous un volet ferme, a cheval sur le titre
   de la section suivante. */
.modules-tous:not([open]) > .modules-grille { display: none; }
.modules-grille {
  /* La piste est PLAFONNEE (piege CSS-3 de la recette, deja paye ailleurs) :
     `1fr` sans maximum etale huit groupes sur toute la largeur d un grand
     ecran, et « Administration », qui n a qu une entree, se retrouve seul au
     milieu d une case de 560 px. On veut des colonnes de liste, pas des
     colonnes de journal. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
  justify-content: start;
  gap: 26px 30px; padding: 6px 0 30px;
}
.modules-grille h3 {
  margin: 0 0 9px; padding-bottom: 7px; border-bottom: 1px solid var(--bordure);
  color: var(--encre-attenuee); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
.modules-grille ul { margin: 0; padding: 0; list-style: none; }
.modules-grille li { padding: 3px 0; color: var(--encre-douce); font-size: 13.5px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .modules-tous > summary .icone { transition: none; }
}

/* ======================= 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-height: 540px) {
  .annonce-rappel { display: none; }
}
@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; }
}
@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, .offre-essai 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 Baccus, 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 (baccus.css), relevées comme Mydas les avait
   relevées pour sa page /baccus.

   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(62, 16, 25, .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: #3E1019; 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(62, 16, 25, .9); border: 1px solid var(--filet-or-faible);
}
.film-cartouche strong { font: 400 16px var(--police-marque); }
.film-cartouche small { color: rgba(223, 209, 211, .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: #3E1019;
  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; }
}

.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). */

/* --- 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 bordeaux ici : ses filets et ses textes lisent `--sur-bordeaux`. */
.recapitulatif-offre .recap-suite { margin: 10px 0 0; color: var(--sur-bordeaux); 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-bordeaux); }
.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; }
}