/* ═══════════════════════════════════════════════════════════════════════════
 * LA VITRINE DE VENTE — l'identité « encre et papier ».
 *
 * Le site vend une maison sérieuse : l'esthétique est celle d'une belle
 * étude française — papier crème, encre profonde, filets fins, cachet rouge,
 * Latin Modern pour les titres. AUCUNE image externe (la CSP l'interdit, et
 * c'est tant mieux) : les dessins sont des SVG tracés dans la page, les
 * photographies et le cachet sont servis par le site (`/vente/img/`). La
 * réglure d'écolier de base.css ne couvre PLUS la page : elle ne
 * revit que DANS la carte famille, où elle redevient un clin d'œil.
 *
 * base.css reste chargée pour les fontes et les jetons ; tout le reste est
 * redéfini ici. Dans ce fichier comme dans app.css : le bas gagne.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  --nuit: #0d1526;
  --nuit-2: #142036;
  --creme: #faf7f0;
  --creme-2: #f3eee2;
  --or: #c2a25e;
  --or-doux: #d8c391;
  --encre-nuit: #dee7f4;
  --encre-nuit-pale: #8ea2c2;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vente * { animation: none !important; transition: none !important; }
}

body.vente {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.vente h1, .vente h2, .vente h3 { font-family: var(--doc); font-weight: 700; }
.vente ::selection { background: var(--or-doux); color: var(--nuit); }

/* ── la barre ───────────────────────────────────────────────────────────── */
.barre-vente {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
  height: 64px;
  color: var(--encre-nuit);
  background: color-mix(in srgb, var(--nuit) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.marque {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.08em;   /* la marque « Léo - Teleadmin » est en casse mixte : l'espacement fort du wordmark tout-majuscules l'étirerait */
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.marque .point { color: var(--or); }
.barre-vente nav {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
  font-family: var(--etiquette);
  font-size: 14px;
}
.barre-vente nav a {
  color: var(--encre-nuit-pale);
  text-decoration: none;
  transition: color var(--transition);
}
.barre-vente nav a:hover { color: #fff; }
.barre-vente .cta-barre {
  border: 1px solid var(--or);
  color: var(--or-doux);
  border-radius: 999px;
  padding: 7px 18px;
}
.barre-vente .cta-barre:hover { background: var(--or); color: var(--nuit); }
/* Sur téléphone la barre garde ses DEUX portes : commander, et entrer chez
 * soi. Cacher « Se connecter » ici refabriquait « Se déconnecter hors
 * d'atteinte », déjà payé sur l'atelier. */
@media (max-width: 820px) { .barre-vente nav a:not(.cta-barre):not(.nav-connexion) { display: none; } }

/* ── le héros ───────────────────────────────────────────────────────────── */
.heros {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% 8%, #21335a 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 100%, #182849 0%, transparent 55%),
    var(--nuit);
  color: var(--encre-nuit);
  padding: calc(64px + clamp(3rem, 9vh, 6rem)) 0 clamp(3rem, 8vh, 5.5rem);
}
.heros .colonne {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .heros .colonne { grid-template-columns: 1fr; } }
.sur-titre {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 1.2rem;
}
.heros h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  margin: 0 0 1.3rem;
  color: #fff;
  text-wrap: balance;
}
.heros h1 em { font-style: italic; color: var(--or-doux); }
.heros .chapeau-heros {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  color: var(--encre-nuit-pale);
  max-width: 34rem;
  margin: 0 0 2.2rem;
}
.heros .chapeau-heros strong { color: var(--encre-nuit); font-weight: 600; }
.boutons-heros { display: flex; gap: 1rem; flex-wrap: wrap; }
.b-plein, .b-ligne {
  display: inline-block;
  font-family: var(--etiquette);
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 28px;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.b-plein { background: var(--or); color: var(--nuit); font-weight: 700; }
.b-plein:hover { background: var(--or-doux); transform: translateY(-1px); }
.b-ligne { border: 1px solid rgba(255, 255, 255, 0.28); color: var(--encre-nuit); }
.b-ligne:hover { border-color: var(--or); color: var(--or-doux); }
.heros svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .heros .dessin-heros { max-width: 26rem; margin: 0 auto; } }
.lueur { animation: lueur 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes lueur { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── la maçonnerie commune ──────────────────────────────────────────────── */
.colonne { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
.tranche { padding: clamp(3.2rem, 8vh, 6rem) 0; }
.tranche-nuit { background: var(--nuit); color: var(--encre-nuit); }
.tranche-creme-2 { background: var(--creme-2); }
.entete-tranche { max-width: 46rem; margin-bottom: clamp(2rem, 4vh, 3.2rem); }
.entete-tranche .sur-titre { color: var(--cachet); }
.tranche-nuit .entete-tranche .sur-titre { color: var(--or); }
.entete-tranche h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.tranche-nuit h2 { color: #fff; }
.entete-tranche p { margin: 0; color: var(--encre-doux); font-size: 1.05rem; }
.tranche-nuit .entete-tranche p { color: var(--encre-nuit-pale); }

/* L'apparition douce — armée par vente.js, et VRAIMENT inerte sans lui :
 * l'opacité 0 n'existe que sous `html.js`, que le script pose. La première
 * version cachait les sections dans la feuille et comptait sur un observateur
 * jamais écrit — toute la page sous le héros était invisible, mesuré à
 * l'écran. Une section ne doit jamais pouvoir rester cachée par défaut. */
html.js .appar { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .appar.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .appar { opacity: 1; transform: none; } }

/* ── la bande de garanties ──────────────────────────────────────────────── */
.garanties {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--nuit-2);
  color: var(--encre-nuit-pale);
}
.garanties .colonne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.6rem;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  font-family: var(--etiquette);
  font-size: 14px;
}
.garanties span::before { content: '— '; color: var(--or); }

/* ── les cartes du siège ────────────────────────────────────────────────── */
.grille-siege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 980px) { .grille-siege { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grille-siege { grid-template-columns: 1fr; } }
.carte-siege {
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: 10px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 1px 2px rgba(22, 35, 58, 0.05);
  position: relative;
  transition: transform var(--transition);
}
.carte-siege::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  box-shadow: 0 10px 26px -14px rgba(22, 35, 58, 0.35);
  opacity: 0; transition: opacity var(--transition); pointer-events: none;
}
.carte-siege:hover { transform: translateY(-3px); }
.carte-siege:hover::after { opacity: 1; }
.carte-siege svg { width: 44px; height: 44px; display: block; margin-bottom: 0.9rem; }
.carte-siege h3 { font-size: 1.12rem; margin: 0 0 0.45rem; }
.carte-siege p { margin: 0; font-size: 0.94rem; color: var(--encre-doux); line-height: 1.55; }

/* ── le canevas ─────────────────────────────────────────────────────────── */
.deux-volets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .deux-volets { grid-template-columns: 1fr; } }
/* La paire image-portrait + vignettes : la colonne de l'image se borne à sa
 * largeur réelle, sinon la grille 50/50 laisse un creux au centre. */
.volets-serres { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
@media (max-width: 900px) { .volets-serres { grid-template-columns: 1fr; } .ambiance-nuit { margin: 0 auto; } }
.panneau-dessin {
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: var(--ombre-page);
}
.panneau-dessin svg { width: 100%; height: auto; display: block; }
.tranche-nuit .panneau-dessin { background: var(--nuit-2); border-color: rgba(255, 255, 255, 0.1); }
.points-forts { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.points-forts li {
  position: relative;
  padding-left: 1.7rem;
  margin: 0.85rem 0;
  color: var(--encre-doux);
  font-size: 0.98rem;
}
.tranche-nuit .points-forts li { color: var(--encre-nuit-pale); }
.points-forts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--or);
}
.points-forts strong { color: var(--encre); }
.tranche-nuit .points-forts strong { color: var(--encre-nuit); }

/* ── les images d'ambiance : accrochées comme des tableaux ──────────────── */
.ambiance {
  margin: 0 auto clamp(2rem, 4vh, 3rem);
  max-width: 56rem;
}
.ambiance img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 50px -18px rgba(13, 21, 38, 0.45);
}
.ambiance-nuit { margin: 0; max-width: 26rem; }
.ambiance-nuit img {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
}
/* L'image du héros famille : dans la colonne droite du héros nuit. */
.ambiance-heros { margin: 0; max-width: none; }
.ambiance-heros img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}
/* La grande carte famille de /famille : seule, centrée, à l'aise. */
.tarif-famille-grande { max-width: 40rem; margin: 0 auto; }
.sceau-barre {
  height: 22px;
  width: auto;
  vertical-align: -5px;
  margin-left: 7px;
}

/* ── les vignettes du compagnon ─────────────────────────────────────────── */
.vignettes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.4rem;
}
@media (max-width: 900px) { .vignettes { grid-template-columns: 1fr; } }
.vignette {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.4rem 1.3rem;
}
.vignette h3 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--or-doux); }
.vignette p { margin: 0; font-size: 0.92rem; color: var(--encre-nuit-pale); line-height: 1.55; }
.vignettes-pile { grid-template-columns: 1fr; margin-top: 0; }
.badge-bientot {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nuit);
  background: var(--or);
  border-radius: 999px;
  padding: 3px 12px;
  vertical-align: 0.35em;
  margin-left: 0.7rem;
}

/* ── les tarifs ─────────────────────────────────────────────────────────── */
.grille-tarifs {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 1.6rem;
  align-items: stretch;
}
@media (max-width: 900px) { .grille-tarifs { grid-template-columns: 1fr; } }
.carte-tarif {
  border-radius: 14px;
  padding: 2rem 1.9rem;
  display: flex;
  flex-direction: column;
}
.tarif-entreprise {
  background: var(--nuit);
  color: var(--encre-nuit);
  border: 1px solid rgba(194, 162, 94, 0.5);
  box-shadow: 0 18px 50px -18px rgba(13, 21, 38, 0.55);
}
.tarif-entreprise h3, .tarif-famille h3 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.tarif-entreprise h3 { color: #fff; }
.filet-titre { flex: 1; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.tarif-famille .filet-titre { border-color: var(--filet-fort); }
.prix-grand {
  font-family: var(--doc);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--or-doux);
  margin: 1.1rem 0 0;
  line-height: 1;
}
.prix-petit {
  font-family: var(--etiquette);
  font-size: 0.95rem;
  color: var(--encre-nuit-pale);
  margin: 0.35rem 0 1.4rem;
}
.liste-tarif { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.liste-tarif li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  font-size: 0.94rem;
  color: var(--encre-nuit-pale);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.liste-tarif li:first-child { border-top: 0; }
.liste-tarif li::before { content: '✓'; position: absolute; left: 0; color: var(--or); }
.liste-tarif li.option::before { content: '+'; font-weight: 700; }
.liste-tarif strong { color: var(--encre-nuit); font-weight: 600; }
.tarif-entreprise .b-plein { text-align: center; margin-top: auto; }

/* LA CARTE FAMILLE : la réglure Seyès revient ICI, et seulement ici — le
 * cahier d'écolier est le clin d'œil de l'offre famille, pas l'habit du site. */
.tarif-famille {
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 7px, var(--seyes-doux) 7px, var(--seyes-doux) 8px),
    linear-gradient(#fff, #fff);
  border: 1px solid var(--filet-fort);
  overflow: hidden;
}
.tarif-famille::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 2.2rem;
  width: 1px;
  background: rgba(166, 38, 47, 0.35);
}
.tarif-famille > * { position: relative; padding-left: 1.6rem; }
.tarif-famille h3 { color: var(--encre); }
.prix-famille { margin: 1.1rem 0 1.2rem; }
.prix-famille .ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--filet-fort);
  font-size: 0.97rem;
  color: var(--encre-doux);
}
.prix-famille .ligne strong { font-family: var(--doc); font-size: 1.35rem; color: var(--encre); white-space: nowrap; }
.tarif-famille .note-famille { font-size: 0.88rem; color: var(--encre-pale); margin: 0 0 1.4rem; }
.b-famille {
  display: inline-block;
  text-align: center;
  font-family: var(--etiquette);
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 26px;
  border: 1px solid var(--encre);
  color: var(--encre);
  margin-top: auto;
  transition: background var(--transition), color var(--transition);
}
.b-famille:hover { background: var(--encre); color: #fff; }

.a-votre-charge {
  margin-top: 1.8rem;
  border: 1px dashed var(--filet-fort);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  font-size: 0.92rem;
  color: var(--encre-doux);
  background: rgba(255, 255, 255, 0.6);
}
.a-votre-charge strong { color: var(--encre); }
.a-votre-charge a { color: var(--cachet); }

/* ── la FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 50rem; }
.faq details {
  border-bottom: 1px solid var(--filet);
  padding: 0.35rem 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.75rem 0;
  font-family: var(--doc);
  font-size: 1.12rem;
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '+';
  font-family: var(--mono);
  color: var(--cachet);
}
.faq details[open] summary::before { content: '−'; }
.faq details p { margin: 0 0 1rem 1.9rem; color: var(--encre-doux); font-size: 0.97rem; }

/* ── la commande ────────────────────────────────────────────────────────── */
.commande-cadre {
  max-width: 40rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--filet);
  border-top: 4px solid var(--cachet);
  border-radius: 12px;
  box-shadow: var(--ombre-page);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.commande-cadre .champ label {
  font-family: var(--etiquette);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.commande-cadre .champ input,
.commande-cadre .champ select {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  font-family: var(--ui);
  color: var(--encre);
  background: var(--creme);
  border: 1px solid var(--filet-fort);
  border-radius: 8px;
  padding: 11px 13px;
}
.commande-cadre .champ select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* la flèche, dessinée en fond — pas d'image externe (CSP img-src 'self') */
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-doux) 50%), linear-gradient(135deg, var(--encre-doux) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.commande-cadre .champ input:focus,
.commande-cadre .champ select:focus {
  outline: none;
  border-color: var(--encre-doux);
  box-shadow: 0 0 0 3px rgba(59, 78, 107, 0.14);
  background-color: #fff;
}
.vente-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 540px) { .vente-deux { grid-template-columns: 1fr; } }
/* « (facultatif) » à l'encre pâle, jamais en opacité : à 0,6 sur le blanc du
 * cadre, il faisait 3,40:1 — sous le seuil de 4,5 d'un texte de 12 px ;
 * `--encre-pale` y fait 6,02:1 (mesuré le 1/10/2026). */
.vente-opt { font-weight: normal; color: var(--encre-pale); text-transform: none; letter-spacing: 0; }
.commande-cadre .entrer {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--etiquette);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--encre);
  border-radius: 999px;
  padding: 14px;
  margin-top: 0.4rem;
  transition: background var(--transition);
}
.commande-cadre .entrer:hover { background: var(--nuit); }
.commande-cadre .entrer[disabled] { opacity: 0.55; cursor: default; }
.avis { min-height: 1.3em; color: var(--cachet); font-size: 0.95rem; margin: 0.8rem 0 0; }
.vente-note { font-size: 0.88rem; color: var(--encre-pale); line-height: 1.5; margin: 1rem 0 0; }
/* Le honeypot : hors de l'écran, jamais display:none (les robots regardent). */
.hp { position: absolute; left: -9999px; top: -9999px; }

/* ── le récapitulatif avant paiement (VAD) ──────────────────────────────── */
.recap-voile {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(13, 21, 38, 0.78);
  backdrop-filter: blur(4px);
}
.recap-boite {
  max-width: 26rem;
  background: var(--creme);
  border-radius: 14px;
  border-top: 5px solid var(--registre);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.6);
  padding: 1.8rem;
}
.recap-boite h2 { margin: 0 0 0.9rem; font-size: 1.4rem; }
.recap-ligne {
  font-family: var(--doc);
  font-size: 1.15rem;
  font-weight: 700;
  border-top: 1px dashed var(--filet-fort);
  border-bottom: 1px dashed var(--filet-fort);
  padding: 0.8rem 0;
  margin: 0 0 0.9rem;
}
.recap-note { font-size: 0.9rem; color: var(--encre-doux); margin: 0 0 1.2rem; }
.recap-boite .entrer {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--etiquette);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--encre);
  border-radius: 999px;
  padding: 13px;
}
.recap-boite .entrer:hover { background: var(--nuit); }
.recap-annuler {
  width: 100%;
  margin-top: 0.6rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--etiquette);
  font-size: 14px;
  color: var(--encre-doux);
  text-decoration: underline;
  padding: 8px;
}

/* ── le pied ────────────────────────────────────────────────────────────── */
.pied-vente {
  background: var(--nuit);
  color: var(--encre-nuit-pale);
  padding: 3rem 0 2.2rem;
  font-size: 0.92rem;
}
.pied-vente .colonne {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 3rem;
  align-items: baseline;
}
.pied-vente .marque { font-size: 14px; }
.pied-vente a { color: var(--encre-nuit-pale); text-decoration: none; }
.pied-vente a:hover { color: #fff; }
.pied-vente .droite { margin-left: auto; font-family: var(--etiquette); font-size: 13px; }

/* ── les pages annexes (merci, cgv) ─────────────────────────────────────── */
.page-annexe {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(64px + 2rem) 1.2rem 3rem;
  background:
    radial-gradient(1000px 500px at 75% 0%, #21335a 0%, transparent 60%),
    var(--nuit);
}
.carte-annexe {
  max-width: 34rem;
  background: var(--creme);
  border-radius: 14px;
  border-top: 5px solid var(--cachet);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.55);
  padding: clamp(1.8rem, 5vw, 3rem);
}
.carte-annexe.large { max-width: 44rem; }
.carte-annexe svg { width: 64px; height: 64px; margin-bottom: 1.1rem; }
/* Le cachet d'état du retour de paiement : sa couleur EST l'état. */
.sceau-etat { color: var(--cachet); }
.retour-ok { border-top-color: var(--registre); }
.retour-ok .sceau-etat { color: var(--registre); }
.retour-refus { border-top-color: var(--cachet); }
.retour-attente { border-top-color: var(--or); }
.retour-attente .sceau-etat { color: #a8862f; }
.carte-annexe h1 { font-size: 1.9rem; margin: 0 0 0.8rem; }
.carte-annexe p { color: var(--encre-doux); margin: 0 0 1rem; }
.carte-annexe a { color: var(--cachet); }
.carte-annexe .b-retour {
  display: inline-block;
  margin-top: 0.6rem;
  text-decoration: none;
  font-family: var(--etiquette);
  font-size: 14px;
  color: var(--encre);
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  padding: 9px 22px;
}
.carte-annexe .b-retour:hover { background: var(--encre); color: #fff; border-color: var(--encre); }

/* ── LES PAGES JURIDIQUES (cgv, mentions, confidentialité) ─────────────────
 * La carte-annexe, en plus long : des h2 d'articles, une date, un tableau qui
 * défile dans son cadre (jamais la page — la règle générale). */
.carte-annexe.juridique { text-align: left; }
.carte-annexe.juridique h2 { font-family: var(--doc); font-size: 1.15rem;
  margin: 1.6rem 0 .5rem; color: var(--encre); }
.juridique-date { font-size: .85rem; color: var(--encre-doux); font-style: italic; }
.tableau-defile { overflow-x: auto; }
.carte-annexe.juridique table { border-collapse: collapse; font-size: .88rem; margin: .4rem 0 1rem; }
.carte-annexe.juridique th, .carte-annexe.juridique td { border: 1px solid rgba(22,35,58,.18);
  padding: .45rem .6rem; text-align: left; vertical-align: top; }
.carte-annexe.juridique th { background: rgba(194,162,94,.12); }

/* La case des CGV du formulaire de commande : une ligne, la case à sa taille
 * (le :not() global du site ne couvre pas cette feuille — on le dit ici). */
.accepte-cgv { display: flex; gap: .55rem; align-items: baseline; font-size: .9rem;
  color: var(--encre-doux); margin: .2rem 0 .9rem; }
.accepte-cgv input[type="checkbox"] { width: auto; flex: none; }
.accepte-cgv a { color: var(--cachet); }

/* ═══ LA VIE DE LA PAGE — un seul moment orchestré, et des gestes qui disent
 * le produit (PRESENTATION.md, lentille « mouvement »). Discipline tenue :
 * transform/opacity seulement, chaque animation POSE son état final sous
 * prefers-reduced-motion (la massue de tête tue l'animation, pas l'état — un
 * tracé non redressé resterait INVISIBLE pour qui a demandé du calme). ═══ */

/* Le héros s'ENCRE au chargement : pathLength="1" normalise tous les traits,
 * une seule règle dessine le court comme le long. Les fils d'or suivent les
 * traits d'encre, puis le POULS parcourt les fils de veille — la seule boucle
 * infinie de la page, parce que c'est la seule chose du produit qui tourne
 * en permanence. Même durée que la lueur : ils battent ensemble. */
.dessin-heros .encre path { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: encrer 0.9s ease-out forwards; }
@keyframes encrer { to { stroke-dashoffset: 0; } }
/* Les fils d'or gardent leur POINTILLÉ — c'est un signe de la marque, le
 * tracé plein le mangeait. Ils lèvent en fondu après l'encre bleue. */
.dessin-heros .fils-or { opacity: 0; animation: fils-or 0.7s ease-out 0.7s forwards; }
@keyframes fils-or { to { opacity: 0.8; } }
.dessin-heros .pouls path {
  stroke-dasharray: 3 60; stroke-dashoffset: 63; opacity: 0;
  animation: pouls-trait 4.5s linear 1.4s infinite, pouls-entree 0.4s ease-out 1.4s forwards;
}
@keyframes pouls-trait { to { stroke-dashoffset: 0; } }
@keyframes pouls-entree { to { opacity: 0.9; } }

/* Le CACHET se presse — une fois, à la clôture de la page, jamais dans la
 * barre (présent partout, il deviendrait un tic). Un sceau se presse, il
 * n'apparaît pas en fondu. */
.cloture { display: flex; justify-content: center; padding: 0 0 3.2rem; }
.cachet-presse { opacity: 0.92; }
html.js .appar.vu .cachet-presse { animation: presser 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes presser {
  from { transform: scale(1.35) rotate(-4deg); opacity: 0; }
  60% { transform: scale(0.97) rotate(0.5deg); opacity: 1; }
  to { transform: scale(1) rotate(0); opacity: 0.92; }
}

/* Un bouton s'enfonce sous le doigt — sur téléphone il n'y a pas de survol
 * pour rassurer. La micro-interaction la plus rentable : elle est sur le
 * bouton qui vend. */
:where(.b-plein, .b-famille, .entrer, .cta-barre):active { transform: scale(0.985); }

/* Les crans d'échelle qui manquaient — trois styles inline les avouaient. */
.h2-moyen { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.18; margin: 0 0 0.9rem; }
.entete-tranche.centre { max-width: 40rem; margin-left: auto; margin-right: auto; text-align: center; }

/* Les pages de la vitrine glissent l'une dans l'autre, le sceau reste
 * accroché : « vous êtes toujours dans la même maison, dans une autre
 * pièce ». Une at-rule inconnue est ignorée — pas de @supports à écrire. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.sceau-barre { view-transition-name: sceau; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

/* Les états FINALS sous mouvement réduit : on ne tue jamais une animation
 * sans reposer là où elle menait. */
@media (prefers-reduced-motion: reduce) {
  .dessin-heros .encre path { stroke-dashoffset: 0 !important; }
  .dessin-heros .fils-or { opacity: 0.8 !important; }
  .dessin-heros .pouls path { opacity: 0 !important; }
  .cachet-presse { opacity: 0.92 !important; transform: none !important; }
}

/* ── LA FINALISATION ET LE SUIVI (self-service, 20/08/2026) ──────────────── */
/* Le bloc « votre espace est prêt » de /merci, rempli par suivi.js. */
.suivi-espace { border-top: 1px solid var(--filet-fort); margin-top: 1.4rem; padding-top: 1.2rem; }
.suivi-espace h2 { margin: 0 0 0.5rem; }
.suivi-ou { color: var(--encre-doux); margin: 0.9rem 0 0.5rem; }
.suivi-note { font-size: 0.85rem; color: var(--encre-doux); margin-top: 0.9rem; }
/* `.entrer` (base.css) est taillé pour un <button> : sur un LIEN il faut le
 * bloc (sinon width:100% ne s'applique pas) ET la couleur — vu au neko : le
 * rouge des liens de la vitrine gagnait sur le blanc du bouton. */
a.suivi-finaliser, #carte a.entrer, .suivi-espace a.entrer {
  display: block; text-align: center; text-decoration: none; box-sizing: border-box;
  color: #fff;
}
/* La page /finaliser : le QR, la saisie manuelle, les codes de secours. */
.qr-cadre { text-align: center; margin: 1rem 0; }
.qr-cadre img { border: 1px solid var(--filet-fort); border-radius: 8px; background: #fff; padding: 8px; }
.totp-manuel { margin: 0 0 1rem; font-size: 0.9rem; color: var(--encre-doux); }
.totp-manuel code { word-break: break-all; }
.codes-secours {
  font-family: var(--mono, monospace); font-size: 1.05rem; line-height: 1.7;
  background: var(--creme); border: 1px dashed var(--filet-fort); border-radius: 8px;
  padding: 0.9rem 1.1rem; column-count: 2; margin: 0.8rem 0 1.2rem;
}
#carte .b-ligne {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  background: none; border: 1px solid var(--filet-fort); border-radius: 999px;
  padding: 12px; font-size: 15px; font-weight: 600; color: var(--encre); cursor: pointer;
}
#carte form .champ { text-align: left; }