/* Charte DISTILIBRE — implémentation des jetons du contrat DESIGN.md
   (ux-site-distilibre-2026-07-13, amendé 2026-07-15/16). Chaque valeur est
   traçable à un jeton ; le contrat prime en cas de conflit. Noir et blanc
   d'imprimeur, un accent bleu daltonisme-sûr, aucune ombre, coins quasi droits.
   Tailles de police en rem (équivalents px du contrat sur base 16 px) pour
   respecter le zoom texte du navigateur (WCAG 1.4.4). */

/* ── Jetons ─────────────────────────────────────────────────────────── */
:root {
  /* colors */
  --papier: #ffffff;
  --encre: #000000;
  --gris-90: #1a1a1a;
  --gris-60: #575757;
  --gris-40: #8c8c8c;   /* bordures et éléments désactivés — JAMAIS du texte (3,36:1) */
  --gris-20: #d4d4d4;
  --gris-10: #ebebeb;
  --gris-05: #f5f5f5;
  --accent: #009DE0;        /* 3,04:1 sur blanc : conforme 1.4.11 mais sans marge */
  --accent-fonce: #006d9c;  /* 5,3:1 — liserés de focus, liens, fond des boutons */
  --accent-survol: #005a80; /* 7,6:1 — le même bleu, un cran plus sombre */
  --erreur: #E3001B;
  --erreur-fond: #F7B9A0;
  /* typography (contrat en px, servi en rem base 16) */
  --police-titre: 'EB Garamond', Georgia, serif;
  --police-corps: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Une seule taille de titre, celle du mobile : le bandeau doit avoir la
     même hauteur sur tous les écrans (décision du 2026-08-14). */
  /* Échelle reprise d'apple.com (essai du 2026-08-17, pour comparaison) :
     titres nettement plus grands, corps et petits textes déjà identiques —
     17 px, 14 px et 12 px étaient déjà les nôtres. */
  /* Calé sur la hauteur des capitales (2026-08-17, second essai) : un titre
     commence par une majuscule, c'est elle qui donne l'échelle perçue.
     EB Garamond monte à 0,650 em contre 0,700 pour la linéale de la
     référence, soit un facteur de 1,077 — bien plus sage que les 1,27 de la
     hauteur d'x, qui donnaient des titres trop gros. */
  --taille-titre-xl: 3.25rem;        /* 52px ≈ 48px de la référence */
  --taille-titre-xl-mobile: 3.25rem; /* même taille partout */
  --taille-titre-md: 2.6875rem;      /* 43px ≈ 40px de la référence */
  --taille-montant: 4rem;            /* 64px — 56px auparavant */
  --taille-corps: 1.0625rem;         /* 17px — inchangé */
  --taille-corps-sm: 0.875rem;       /* 14px — inchangé */
  --taille-etiquette: 0.75rem;       /* 12px — inchangé */
  --taille-conversation: 1rem;       /* 16px */
  --taille-menu: 0.75rem;            /* 12px — la barre d'apple.com */
  /* rounded */
  --rayon-none: 0px;
  --rayon-sm: 2px;
  --rayon: 4px;
  --rayon-plein: 9999px;
  /* Photos et icônes de la barre : un rayon franc, seule dérogation aux
     « coins quasi droits » — à 4 px, l'adoucissement ne se voyait pas sur une
     image pleine largeur. Les boutons d'appel, eux, sont passés à la pilule
     (--rayon-plein) le même jour (2026-08-17). */
  --rayon-doux: 10px;
  /* Les cartes de la galerie sont plus rondes encore, sur le modèle demandé
     le 2026-08-17 : à 10 px, le coin restait sec sur un visuel de cette
     taille. */
  --rayon-carte: 28px;
  /* spacing */
  --unite: 8px;
  --gouttiere: 24px;
  --marge-mobile: 20px;
  --espace-entete: 0.75rem;  /* 12 px — écart sous la barre de navigation,
                                identique en mobile et sur bureau */
  --marge-desktop: 64px;
  --respiration: 24px;   /* 96 px à l’origine, 64 px le 2026-08-15 — encore trop
                            large entre sections (2026-08-17) */
  --largeur-carte: 620px;   /* largeur d'une carte de la galerie */
  --largeur-lecture: 68ch;
  --largeur-max: 1080px;
}

/* ── Police (auto-hébergée, licence OFL dans fonts/OFL.txt — NFR-4) ──── */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/eb-garamond-v33-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/eb-garamond-v33-latin-600.woff2') format('woff2');
}

/* ── Base ───────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  overflow-x: clip;
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  line-height: 1.47;          /* apple.com : 1,47 pour le corps de texte */
  color: var(--encre);
  background: var(--papier);
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 500;
}
/* Interligne resserrée le 2026-08-21 (1,08 → 0,98) : sur deux lignes, le
   titre se lisait comme deux titres. */
h1 { font-size: var(--taille-titre-xl); line-height: 0.98; letter-spacing: -0.003em; }
h2 { font-size: var(--taille-titre-md); line-height: 1.1; letter-spacing: 0; }
/* Les titres de section respiraient à peine : la remise à zéro des
   marges les collait au texte précédent comme au suivant. Beaucoup
   d'air au-dessus, peu en dessous — un titre appartient à ce qui le
   suit (2026-08-15). Valeurs en rem : elles suivent le zoom texte. */
main h2 { margin: 0.875rem 0 0.625rem; }   /* 14 px / 10 px — 30 px au-dessus
                                              creusait un trou une fois la
                                              respiration ramenée à 24 px
                                              (2026-08-17) */

a { color: var(--accent-fonce); text-decoration: underline; }

/* Focus visible partout — accent FONCÉ (5,3:1) : l'accent clair fait 3,04:1
   sur blanc, conforme WCAG 1.4.11 mais sans marge (mesure du 2026-07-15). */
:focus-visible {
  outline: 3px solid var(--accent-fonce);
  outline-offset: 2px;
}

.page {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--marge-desktop);
}
.lecture { max-width: var(--largeur-lecture); margin-left: auto; margin-right: auto; }
.section { padding: var(--respiration) 0; }
/* Première section d'une page : pas de respiration au-dessus. Sur les
   pages intérieures, le titre se retrouvait à 96 px de la barre de
   navigation sur bureau et 48 en mobile, quand l'accueil s'en tient à
   l'écart de l'en-tête. Même entrée partout (2026-08-14). */
main > .section:first-child { padding-top: 0; }

/* Un titre qui suit une étiquette garde toujours le même écart : l'accueil
   le réglait pour lui seul, les autres pages n'en avaient aucun (2026-08-17). */
.etiquette + h1, .etiquette + h2 { margin-top: 16px; }
.etiquette {
  font-size: var(--taille-etiquette);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-60);
  line-height: 1.4;
}
.secondaire { color: var(--gris-60); }
.filet { border-top: 1px solid var(--gris-20); }
/* Section détachée du reste par son fond plutôt que par un filet : le
   tourniquet des cas y gagne un cadre, et les cartes blanches s'en détachent.
   Le fond déborde la colonne de lecture pour occuper toute la largeur — d'où
   le décalage négatif, la marge de page étant portée par .page (2026-08-17). */
.section-grise {
  background: var(--gris-05);
  /* Le fond va d'un bord à l'autre de la fenêtre, quelle que soit la largeur
     d'écran : les marges négatives annulent la colonne de page, le rembourrage
     symétrique remet le contenu à sa place. Rien en bas — la galerie s'arrête
     sur son fond, sans liseré ni blanc (2026-08-17). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-bottom: 0;
  border: 0;
}
/* Utilitaires : remplacent les styles inline des gabarits (une future CSP
   style-src 'self' ne doit rien casser — revue du 2026-07-16). */
.centre { text-align: center; }
.espace-haut { margin-top: var(--gouttiere); }

/* ── En-tête / pied ─────────────────────────────────────────────────── */
/* La barre reste en place, qu'on monte ou qu'on descende : la rétractation
   faisait disparaître la navigation au moment précis où le visiteur cherchait
   à s'orienter (2026-08-17). Le contenu glisse dessous derrière un fond
   translucide et flouté ; là où le flou n'existe pas, le fond reste opaque et
   rien ne se lit par transparence. */
.entete {
  margin-bottom: var(--espace-entete);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--gris-05);
}
/* Le fond translucide reprend le gris de la barre, pas le blanc de la page :
   sans bordure, c'est lui seul qui la détache du contenu (2026-08-17). */
/* Le panneau déplié reçoit le même traitement que la barre : ils ne doivent
   pas faire deux surfaces différentes. Un peu plus opaque cependant — c'est
   du texte qui s'y pose, pas seulement une ligne de liens (2026-08-18). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete {
    background: rgba(245, 245, 245, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .entete--compacte .entete-liens,
  .entete-liens.deploye {
    background: rgba(245, 245, 245, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
/* Pose de l'état initial : aucun mouvement au chargement de la page. */
.sans-transition, .sans-transition * { transition: none !important; }
.entete nav {
  display: flex;
  flex-wrap: nowrap;            /* le logo garde sa colonne : les liens ne
                                   passent jamais dessous, ils se replient
                                   dans leur propre cellule, à sa droite */
  align-items: center;          /* tout sur la même ligne médiane. Le logo
                                   était calé en haut du temps où les liens
                                   se repliaient sous lui ; depuis le menu
                                   escamotable, ils quittent la barre en
                                   mobile et ne la font plus grandir. */
  gap: 12px 28px;
  padding: 6px 0;               /* barre basse : 14 px l'épaississaient sans
                                   rien ajouter (2026-08-17) */
}
/* Aucun repli : les liens tiennent sur une ligne ou débordent, et c'est
   précisément ce débordement que le script mesure pour basculer en menu
   escamotable. Avec `wrap`, « Contact » passait tranquillement à la ligne sans
   que rien ne le signale — la barre grandissait, la mesure ne voyait rien
   (2026-08-17). flex-shrink: 0 empêche les liens de se comprimer au lieu de
   déborder ; white-space: nowrap les empêche de se couper en deux. */
.entete-liens {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 8px 28px;
}
.entete-liens a { white-space: nowrap; }
.entete .logo { height: 40px; display: block; flex-shrink: 0; }
.entete a { color: var(--encre); text-decoration: none; font-size: var(--taille-menu); }
.entete a[aria-current="page"] { border-bottom: 2px solid var(--encre); }
/* Sauf le logo : un trait sous une image n’indique rien, il la salit.
   L’attribut `aria-current` reste posé — l’information demeure pour qui
   navigue au lecteur d’écran, elle cesse seulement d’être dessinée. */
.entete a.lien-accueil[aria-current="page"] { border-bottom: none; }

/* Actions à droite de la barre : recherche, offre, et le menu en mobile.
   La loupe ouvrira la recherche conversationnelle — inerte pour l'instant, et
   dite telle quelle plutôt que muette (2026-08-17). */
.entete-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  margin-left: auto;
}
.entete-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--rayon-doux);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
}
.entete-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.entete-icone:hover { background: var(--gris-10); }
.entete-icone:disabled { color: var(--gris-60); cursor: default; }
.entete-icone:disabled:hover { background: transparent; }
/* Le contenu d'un bouton doit rester lisible aux lectures d'écran sans
   occuper la barre : on le sort du flux visuel, pas de l'arbre d'accessibilité. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Le bouton de menu n'apparaît que si les liens ne tiennent plus sur la
   ligne : ce n'est pas une affaire de téléphone mais de place disponible, et
   le seuil dépend de la longueur des libellés (2026-08-17). C'est le script
   qui mesure et pose .entete--compacte ; sans lui, la media query de repli
   prend le relais sous 720 px. */
.entete-bascule { display: none; }
.entete--compacte .entete-bascule { display: inline-flex; }
.entete--compacte nav { position: relative; }
.entete--compacte .entete-liens {
  display: none;
  flex-wrap: wrap;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px var(--marge-mobile) 16px;
  background: var(--gris-05);
  border-bottom: 1px solid var(--gris-20);
}
.entete--compacte .entete-liens.deploye { display: flex; }
.entete--compacte .entete-liens a { padding: 12px 0; font-size: var(--taille-corps); }
.entete--compacte .entete-liens a + a { border-top: 1px solid var(--gris-10); }
/* Les deux barres se croisent quand le menu s'ouvre — même geste que la
   plupart des barres mobiles, sans image à charger. */
.entete-bascule svg path { transition: transform 240ms ease, opacity 160ms ease; transform-origin: center; }
.entete-bascule[aria-expanded="true"] .barre-haute { transform: translateY(3px) rotate(45deg); }
.entete-bascule[aria-expanded="true"] .barre-basse { transform: translateY(-3px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .entete-bascule svg path { transition: none; }
}
/* Notes de bas de page : le renvoi se colle au montant, la précision attend
   au-dessus du pied. Le prix reste ainsi lisible d'un coup d'œil, sans que la
   mention de franchise disparaisse de la page (2026-08-17). */
.renvoi {
  font-size: 0.75em;
  text-decoration: none;
  padding: 0 1px;
}
.renvoi-marque { color: var(--gris-60); }
.notes {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--respiration) var(--marge-desktop) 0;
  font-size: var(--taille-etiquette);
  line-height: 1.33;
  color: var(--gris-60);
}
/* Chaque note se lit comme un élément de liste : la marque reste en marge et
   le texte s'aligne sous lui-même, jamais sous le numéro. Cinq notes collées
   les unes aux autres formaient un pavé où l'on ne retrouvait pas la sienne —
   d'où l'air entre elles (retour du 2026-09-11, référence : apple.com). */
.notes p {
  scroll-margin-top: 96px;   /* le renvoi ne cache pas la note sous la barre */
  /* Aucune largeur de lecture ici : une note occupe toute la bande, jusqu'à
     la marge de droite. La contraindre laissait un vide à droite que rien ne
     justifiait (retour du 2026-09-11). */
  padding-left: 1.7em;
  text-indent: -1.7em;
  margin-bottom: 0.55em;
}
.notes p:last-child { margin-bottom: 0; }
/* Largeur fixe pour la marque : les numéros s'alignent entre eux, quel que
   soit le signe — chiffre, astérisque ou double croix. */
.notes .renvoi-marque {
  display: inline-block;
  min-width: 1.2em;
  text-indent: 0;
}
.notes a { color: var(--gris-60); }

/* Pied de page ordinaire, en fin de document. Il a été collant et escamotable
   jusqu'au 2026-08-17 : deux bandeaux mobiles pour une page qui n'en demandait
   aucun, et un mouvement de plus à comprendre. */
.pied {
  background: var(--papier);
  border-top: 1px solid var(--gris-20);
  padding: var(--gouttiere) 0;
  /* Le pied suit l'échelle de la référence : 12 px, interligne 1,33 — un cran
     sous le petit texte courant (essai du 2026-08-17). */
  font-size: var(--taille-etiquette);
  line-height: 1.33;
  color: var(--gris-60);
}
.pied a { color: var(--gris-60); }
/* L'identité, puis les liens empilés dessous, tous alignés à gauche. Ils se
   suivaient sur une seule phrase, où « CGV/CGU » et le tarif d'accompagnement
   se lisaient comme sa suite (2026-08-17). Une colonne unique : renvoyés à
   droite, ils formaient une seconde masse de texte qui déséquilibrait le pied
   (2026-08-17, second avis). */
.pied-identite { margin: 0 0 8px; max-width: var(--largeur-lecture); }
.pied-liens { list-style: none; margin: 0; padding: 0; }

/* Listes à puces : la PUCE s'aligne sur le texte courant, pas le texte des
   items. Avec le retrait par défaut du navigateur, la liste partait en
   saillie à gauche du paragraphe qui la précède et cassait la colonne de
   lecture. Le retrait négatif ramène le marqueur au bord, tout en gardant
   les lignes suivantes d'un même item alignées sur son texte. */
main ul:not([class]) {
  /* La puce tombe à l'aplomb du paragraphe, et TOUT le texte de l'item —
     lignes suivantes comprises — s'aligne sur un même alinéa.
     Le marqueur natif ne le permet pas : posé dans le retrait, il place le
     texte de la première ligne à sa suite et les autres à l'alinéa, si bien
     que les deux ne s'accordent jamais. On le remplace donc par un
     pseudo-élément, qu'on positionne exactement. */
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

main ul:not([class]) > li {
  position: relative;
  padding-left: 1.4em;
}

main ul:not([class]) > li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gris-60);
}

main ol:not([class]) {
  /* Les listes numérotées gardent leur marqueur natif — un compteur reproduit
     à la main se désynchronise au premier saut de numérotation. Le retrait
     ramène simplement le numéro à l'aplomb du texte courant. */
  padding-left: 1.6em;
  margin-left: -1.6em;
}

.pied-liens li + li { margin-top: 4px; }

/* ── Composants ─────────────────────────────────────────────────────── */
.bouton-primaire, .bouton-secondaire {
  display: inline-flex;          /* min-height + repli : le texte long ou
                                    zoomé ne sort plus du cadre */
  align-items: center;
  justify-content: center;
  /* Gabarit repris des boutons d'apple.com (2026-08-17) : pilule pleine,
     padding serré, corps de texte à 17 px. Seules les couleurs restent
     nôtres — noir et blanc d'imprimeur, pas le bleu de la référence.
     min-height garde les 48 px de cible tactile : la pilule d'origine tombe
     à 46 px, sous le seuil que le site tient partout ailleurs. */
  min-height: 48px;
  padding: 12px 22px;
  font-size: var(--taille-corps);
  line-height: 1.17;
  font-weight: 600;
  font-family: var(--police-corps);
  border-radius: var(--rayon-plein);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.bouton-primaire {                 /* un seul par écran (Do's DESIGN.md) */
  background: var(--accent-fonce);
  color: var(--papier);
  border: 1.5px solid var(--accent-fonce);
}
/* Survol repris de paypal.com : la couleur ne s'inverse pas, elle fonce d'un
   cran, et une ombre courte décolle le bouton. C'est la seule ombre du site —
   la charte n'en veut nulle part ailleurs (2026-08-18). */
.bouton-primaire:hover {
  background: var(--accent-survol);
  border-color: var(--accent-survol);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.bouton-secondaire {
  background: var(--papier);
  color: var(--accent-fonce);
  border: 1.5px solid var(--accent-fonce);
}
.bouton-secondaire:hover {
  color: var(--accent-survol);
  border-color: var(--accent-survol);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.bouton-primaire[aria-disabled="true"], .bouton-secondaire[aria-disabled="true"] {
  background: var(--gris-20);
  color: var(--gris-60);
  border: none;
  cursor: not-allowed;
}

.champ { margin-bottom: var(--gouttiere); }
.champ label {
  display: block;                  /* étiquette AU-DESSUS, jamais placeholder */
  font-weight: 600;
  margin-bottom: 6px;
}
.champ input, .champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  border: 1.5px solid var(--gris-40);
  border-radius: var(--rayon-sm);
  background: var(--papier);
}
.champ textarea { min-height: 96px; }
/* Focus par outline : la bordure (dont le rouge d'erreur) reste visible,
   et rien ne bouge d'un demi-pixel. */
.champ input:focus-visible, .champ textarea:focus-visible {
  outline: 3px solid var(--accent-fonce);
  outline-offset: 1px;
}
.champ.en-erreur input, .champ.en-erreur textarea { border-color: var(--erreur); }
.champ .message-erreur {
  color: var(--erreur);
  font-size: var(--taille-corps-sm);
  line-height: 1.5;
  margin-top: 4px;
}
.champ .message-erreur::before { content: "✗ "; }

.bulle-visiteur, .bulle-distilibre {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: var(--rayon);
  margin-bottom: 14px;
  font-size: var(--taille-conversation);
  line-height: 1.55;
  overflow-wrap: anywhere;       /* URL ou libellé CIEL long sans espace */
}
.bulle-visiteur {
  background: var(--gris-10);
  color: var(--gris-90);
  margin-left: auto;
}
.bulle-distilibre {
  background: var(--papier);
  border: 1px solid var(--gris-20);
}
.badge-humain {
  display: inline-block;
  border: 1px solid var(--encre);
  border-radius: var(--rayon-plein);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  padding: 1px 10px;
  margin-bottom: 6px;
  background: var(--papier);
}

.carte-chiffrage {                 /* l'objet le plus important du site */
  border: 2px solid var(--encre);
  border-radius: var(--rayon);
  padding: 48px 48px 32px;
  text-align: center;
}
.carte-chiffrage .montant {
  font-family: var(--police-titre);
  font-size: var(--taille-montant);
  font-weight: 600;
  line-height: 1.1;
}
.carte-chiffrage .approx {
  font-size: var(--taille-corps-sm);
  line-height: 1.5;
  color: var(--gris-60);
}
.carte-chiffrage table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--taille-corps-sm);
  text-align: right;
  margin-top: var(--gouttiere);
}
.carte-chiffrage th {
  font-size: var(--taille-etiquette);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-60);
  border-bottom: 1px solid var(--gris-20);
  padding: 8px 6px;
}
.carte-chiffrage th:first-child, .carte-chiffrage td:first-child { text-align: left; }
.carte-chiffrage td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--gris-10);
  overflow-wrap: anywhere;
}
.carte-chiffrage .sources {
  font-size: var(--taille-etiquette);
  line-height: 1.5;
  color: var(--gris-60);
  margin-top: var(--gouttiere);
  border-top: 1px solid var(--gris-20);
  padding-top: 16px;
  text-align: left;
}

.zone-televersement {
  background: var(--gris-05);
  border: 2px dashed var(--gris-40);
  border-radius: var(--rayon);
  padding: var(--respiration) var(--gouttiere);
  text-align: center;
}
.zone-televersement.active { border-color: var(--accent); }
/* Au survol, l'ombre se pose — même traitement que le bouton, pour que tout ce
   qui répond au geste réponde de la même façon.
   Pas de `:focus-within` ici : la bande n'est pas focalisable, et une ombre
   sans liseré ne vaudrait pas repère de focus (UX-DR5). Au clavier, c'est le
   bouton qui prend le focus, avec son contour d'accent — et c'est lui
   l'élément actionnable annoncé. */
.zone-televersement.depot:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Pendant le glisser, le même liseré d'un cran plus sombre : le geste est
   engagé, la cible se confirme sans rien changer d'autre. */
/* Pendant le glisser, le fond passe d'un cran : le geste est engagé, la bande
   se confirme sans rien changer d'autre. */
.zone-televersement.depot.active {
  background: var(--gris-10);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Ce que le dépôt a retenu : nom des fichiers, et rien d'inventé autour. */
.depot-retenus { margin: 16px 0 0; font-size: var(--taille-petit); }
.depot-retenus li { list-style: none; }
.depot-apercu-note {
  margin: 8px 0 0;
  font-size: var(--taille-petit);
  color: var(--gris-60);
}

/* --- Zone de dépôt de la démo (récit 2.2, maquette du 2026-08-21) ---------
   La page montre ce qu'elle attend : deux pages d'une DRM côte à côte, l'icône
   de dépôt par-dessus. Les vignettes s'empilent d'elles-mêmes quand la fenêtre
   n'est plus assez large (flex-wrap) — aucune requête média nécessaire, donc
   aucun seuil à maintenir. */
/* Pas de cadre autour du bloc : la maquette ne montre que les deux vignettes
   encadrées. Un second cadre englobant ferait deux boîtes emboîtées, et la
   zone de dépôt se lit déjà comme telle. */
/* TOUT le bloc est la cible du glisser-déposer — vignettes, icône et consigne
   comprises. Une cible réduite au seul cadre des images obligerait à viser. */
/* Une BANDE pleine largeur, du gris de la barre de menu, sans liseré : la
   cible du dépôt traverse la fenêtre, ce qui la rend impossible à manquer avec
   un fichier en main. Le contenu, lui, reste dans la colonne de lecture.
   `margin-inline` négatif et `padding-inline` symétrique : la technique tient
   sans `100vw`, qui compterait la barre de défilement, et `body { overflow-x:
   clip }` couvre le reste. */
.zone-televersement.depot {
  background: var(--gris-05);
  border: none;
  border-radius: 0;
  margin-top: var(--respiration);
  margin-inline: calc(50% - 50vw);
  padding: var(--respiration) calc(50vw - 50%);
  text-align: center;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

/* Deux vignettes à leur taille propre, calées à gauche de la colonne : la
   bande s'étend, pas les images — étirées, elles seraient floues, et le dépôt
   se centrerait loin du texte qui l'annonce. */
.depot-colonne {
  max-width: 556px;
  margin-right: auto;
}

.depot-vignettes {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Ni liseré, ni fond : les vignettes sont un DÉCOR de fond, pas des images à
   regarder. Le voile les met en retrait pour que l'icône et la consigne
   passent devant — c'est la zone qui compte, pas les documents montrés. */
.depot-vignette {
  flex: 0 1 256px;
  max-width: 100%;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
}

/* L'icône chevauche les deux vignettes, au centre du bloc — y compris une fois
   les vignettes empilées, où le centre reste le centre. */
.depot-icone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  opacity: 0.38;          /* le trait du SVG est noir : l'opacité le pose en gris */
  pointer-events: none;
}

/* La classe n'est posée que par l'îlot : sans JavaScript, la zone n'est pas
   cliquable, et un curseur de main mentirait. */
.depot-cliquable { cursor: pointer; }

/* Les tableaux de restitution montrent leurs cellules : ce sont des lignes de
   déclaration, lues et rendues telles quelles — un filet par cellule aide à
   suivre une ligne de balance sur six colonnes, là où l'interligne seul laisse
   glisser l'œil. Le filet reste discret (gris-20, comme les autres du site). */
/* La barre est collante : sans marge de défilement, le titre visé après un
   dépôt se range dessous. Même correctif que pour les notes. */
[data-lecture] { scroll-margin-top: 96px; }

/* L'ancrage automatique du navigateur corrige la position quand la hauteur du
   contenu change — utile en lecture, désastreux pendant un glissé : les
   tableaux de la lecture finissent de se peindre, l'ancrage rattrape, et le
   défilement fait un bond de trois cents pixels au milieu de sa course
   (mesuré image par image le 2026-08-21). La démo s'en passe. */
main { overflow-anchor: none; }

/* La lecture ne surgit pas : elle monte doucement à sa place. Le calcul dure
   une seconde ou deux, et un résultat qui apparaît d'un bloc donne
   l'impression d'un rechargement — c'est justement ce qu'on a évité. */
@keyframes lecture-apparait {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

section[id^="lecture-"] { animation: lecture-apparait 360ms ease-out both; }

/* L'analyse qui s'en va : fondu, et non disparition sèche. `animation: none`
   est nécessaire — l'apparition, posée en `both`, maintiendrait l'opacité à 1
   et l'emporterait sur la transition. */
.sortante {
  animation: none !important;
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  section[id^="lecture-"] { animation: none; }
  .sortante { transition: none; }
}

.table-lecture { border-collapse: collapse; width: 100%; }
.table-lecture th,
.table-lecture td {
  border: 1px solid var(--gris-20);
  padding: 6px 10px;
}
.table-lecture thead th { background: var(--gris-05); }

/* Colonnes de chiffres : alignées à droite, insécables, et en chiffres de
   même chasse. Sans `tabular-nums`, les colonnes de la police ondulent d'une
   ligne à l'autre — un 1 est plus étroit qu'un 8 — et deux volumes du même
   ordre ne se comparent plus à l'œil. Le nombre et son unité ne se séparent
   jamais : l'espace qui les lie est insécable dans le gabarit. */
.table-lecture td.nombre,
.table-lecture th.nombre {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* Tableau d'identification : les intitulés se rangent à droite, contre la
   valeur qu'ils annoncent — la colonne de lecture se fait ainsi au ras du
   deux-points, et l'œil n'a plus à traverser un blanc variable. */
.table-identification th[scope="row"] {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  width: 1%;
}

/* Une ligne sur deux sur fond clair : sur six colonnes de balance, l'œil
   glisse d'une ligne à l'autre sans ce repère. */
.table-lecture tbody tr:nth-child(even) { background: var(--gris-05); }
.table-lecture caption { text-align: left; padding-bottom: 6px; }

/* De l'air entre le titre et la promesse, comme sur la maquette. */
.depot-promesse { margin-top: 24px; }
.depot-remplace { margin: 0 0 16px; font-size: var(--taille-petit); }

/* Habilitations lues chez la douane : la coche dit d'un coup d'œil que le
   numéro est reconnu, la liste dit ce qu'il autorise — un code seul
   n'apprend rien à qui découvre. */
.habilitations-verdict { margin: 8px 0 4px; }
.coche { color: #1a7f37; font-weight: 700; }
.habilitations { margin: 0; padding-left: 1.2em; font-size: var(--taille-petit); }
.habilitations li { margin-bottom: 2px; }

.depot-action { margin: 0 0 var(--gouttiere); }
.depot-action .bouton-primaire { border-radius: 999px; padding: 14px 32px; }

/* Sans JavaScript, le champ de fichier fait tout le travail ; avec, l'îlot le
   masque et le bouton l'ouvre (progressive enhancement, NFR-4). */
.depot-champ { margin: 0 0 16px; }
.depot-champ[hidden] { display: none; }

/* Appel de note et note de bas de page : le renvoi doit rester lisible et
   cliquable sans être un pavé. */
.renvoi-note { font-size: 0.9em; text-decoration: none; }
.note-bas { font-size: var(--taille-petit); color: var(--gris-60); margin-top: 24px; }

/* Le formulaire de vérification du numéro d'accise vit DANS la cellule qui
   porte ce numéro : le sortir du flux le couperait de ce qu'il vérifie. */
.en-ligne { display: inline; }
.en-ligne p { display: inline; margin: 0; }

.etape-tunnel {
  display: flex;
  gap: 32px;
  justify-content: center;
  font-size: var(--taille-corps-sm);
  line-height: 1.5;
  list-style: none;
}
/* Trois signes DISTINCTS — jamais la couleur seule (daltonisme).
   « À venir » en gris-60 : gris-40 ferait 3,36:1, sous le seuil AA
   (constat de revue du 2026-07-15, contrat amendé). */
.etape-tunnel .faite { color: var(--encre); font-weight: 600; }
.etape-tunnel .faite::before { content: "✓ "; }
.etape-tunnel .courante {
  color: var(--accent-fonce);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.etape-tunnel .avenir { color: var(--gris-60); }
.etape-tunnel-mobile {
  display: none;
  font-size: var(--taille-corps-sm);
  line-height: 1.5;
  font-weight: 600;
  color: var(--accent-fonce);
  text-align: center;
}

/* ── Accueil et vitrine ─────────────────────────────────────────────── */
/* Le CTA vit dans son propre bloc (.accueil-cta) hors du bandeau héros :
   en mobile il passe AVANT le démonstrateur (CA-5, revue du 2026-07-16),
   en desktop il suit le titre — d'où le padding scindé héros/CTA. */
/* Bandeau d'accueil : mêmes valeurs sur bureau et en mobile — c'est le
   rendu mobile qui fait référence (décision du 2026-08-14). Aucune
   respiration au-dessus : l'écart sous la navigation suffit. */
.accueil-hero { padding: 0 0 var(--gouttiere); }
/* Plus d'air sous le titre que dessus : il reste attaché à son étiquette, et
   se détache des boutons qui le suivent. Égaliser les deux, essayé le même
   jour, resserrait l'ensemble sans le clarifier (2026-08-18). */
.accueil-hero h1 { max-width: 17ch; margin: 16px auto 32px; }
/* Pas de marge basse ici : la section suivante apporte déjà sa
   respiration, et les deux se cumulaient (192 px). */
.accueil-cta { margin-bottom: 0; }
/* Les boutons étaient séparés par une simple espace de texte : en s'empilant,
   ils se touchaient. Une grille les sépare de la même valeur dans les deux
   directions (2026-08-14). Règle GÉNÉRALE depuis le 2026-09-12 — l'accueil la
   portait pour lui seul, et les autres pages se retrouvaient avec deux boutons
   collés dès que l'écran les empilait. */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gouttiere) / 2);
}
.centre .boutons, .boutons.centre { justify-content: center; }
.accueil-demo .demo-conversation {
  background: var(--gris-05);
  border-radius: var(--rayon);
  padding: 40px;
  margin-bottom: var(--respiration);
}
.trois-colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  margin-top: var(--gouttiere);
}
.piliers {
  max-width: var(--largeur-lecture);
  margin: var(--gouttiere) auto 0;
  padding-left: 1.2em;
}
.piliers li { margin-bottom: 16px; }
/* Les quatre travaux réglementaires : deux par deux, pour que chaque bloc
   garde une largeur lisible là où .trois-colonnes les serrerait 3 + 1. */
.briques {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gouttiere);
  margin-top: var(--gouttiere);
}
/* FAQ : sélecteurs scopés — un futur <details> hors FAQ ne doit pas hériter
   de ces filets (revue du 2026-07-16). Les questions sont des h3 DANS les
   summaries (navigation par titres au lecteur d'écran), rendus inline pour
   garder l'aspect d'une ligne pliable. */
.faq details {
  border-top: 1px solid var(--gris-20);
  padding: 12px 0;
}
.faq summary { font-weight: 600; cursor: pointer; }
.faq summary h3 { display: inline; font: inherit; }
.faq details p { margin-top: 8px; }
.prix-unique { margin: var(--gouttiere) 0; }
.montant-prix {
  font-family: var(--police-titre);
  font-size: var(--taille-montant);
  font-weight: 600;
  line-height: 1.1;
}

/* ── Responsive : point de rupture unique (contrat) ─────────────────── */
/* Splash d'accueil : le dessin suit le chapô, à toutes les largeurs — il se
   réduit avec la colonne (décision du 2026-08-14). */
.accueil-splash { margin: var(--gouttiere) auto; max-width: 900px; }
.accueil-splash img { width: 100%; height: auto; display: block; }

/* Tourniquet des cas clients : défilement horizontal par à-coups, sans une
   ligne de script (le seul script du site pilote la barre, pas le contenu).
   Chaque cas s'aligne sur le bord gauche, et un seul cas s'affiche comme un
   bloc normal.
   Le conteneur porte tabindex="0" dans le gabarit : une zone défilante n'est
   pas focusable partout, et sans lui les quatre derniers cas restaient hors
   d'atteinte au clavier (2026-08-16). Le focus doit donc se voir. */
.tourniquet {
  display: flex;
  gap: var(--gouttiere);
  overflow-x: auto;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* anciens Edge */
  scroll-snap-type: x mandatory;
  list-style: none;
  /* Rembourrage latéral : sans lui, la première et la dernière carte ne
     peuvent pas venir au centre de la galerie. */
  padding: 0 calc((100% - min(100%, var(--largeur-carte))) / 2) var(--gouttiere);
  margin-top: var(--gouttiere);
}
/* Liseré rentré : posé à l'extérieur, il serait rogné par le débordement.
   La couleur est redite ici — le verrou de contraste veut la voir dans
   chaque bloc de focus, et la règle se lit seule. */
.tourniquet::-webkit-scrollbar { display: none; }   /* WebKit, Blink */
.tourniquet:focus-visible {
  outline: 3px solid var(--accent-fonce);
  outline-offset: -3px;
}
/* La case est plus étroite que la galerie : les cartes voisines dépassent de
   part et d'autre, et disent qu'il y a une suite (2026-08-17). */
.tourniquet li {
  flex: 0 0 min(84%, var(--largeur-carte));
  scroll-snap-align: center;
}

/* Commandes du tourniquet : deux disques sous les cas. Le gris 20 % est le
   fond, le gris 40 % la réponse au survol — les deux nuances de la charte,
   sans nouvelle couleur. La flèche reste à l'encre : 11:1 sur le gris clair.
   Sans script, les boutons ne servent à rien : le gabarit ne les affiche
   qu'après le tourniquet, qui reste défilable au doigt et au clavier. */
.tourniquet-commandes {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 4px;
}
.tourniquet-fleche {
  width: 44px;                 /* cible tactile de 44 px (WCAG 2.5.8) */
  height: 44px;
  border: 0;
  border-radius: var(--rayon-plein);
  background: var(--gris-20);
  color: var(--encre);
  font-size: var(--taille-corps);   /* glyphe de flèche, pas du texte courant */
  line-height: 1;
  cursor: pointer;
}
.tourniquet-fleche:hover { background: var(--gris-40); }
.tourniquet-fleche:focus-visible {
  outline: 3px solid var(--accent-fonce);
  outline-offset: 2px;
}
/* Cas en carte : le visuel porte l'étiquette et le titre, l'explication suit
   dessous. Le texte de tête posé sur la photo tient sur un voile sombre —
   sans lui, un ciel clair le rendrait illisible (2026-08-17). */
.cas { height: 100%; }
.cas-visuel {
  position: relative;
  overflow: hidden;                /* le voile et la photo suivent les coins */
  border-radius: var(--rayon-carte);
  margin-bottom: 12px;
}
.cas-photo {
  display: block;
  width: 100%;
  height: auto;
}
.cas-tete {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 20px 28px;
  color: var(--papier);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
}
.cas-tete h3 { color: var(--papier); }
/* L'étiquette passe au blanc sur le voile : le gris-60 des étiquettes de page
   n'aurait pas tenu le contraste par-dessus une photo. */
.cas-etiquette {
  font-size: var(--taille-etiquette);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--papier);
  margin-bottom: 4px;
}

/* Ces titres ont la taille des titres de section : ils en prennent aussi
   l'interligne. Sans cette ligne, ils héritaient des 1.65 du corps de texte et
   s'étalaient sur deux lignes trop espacées (2026-08-17). */
.tourniquet h3 {
  font-size: var(--taille-titre-md);
  line-height: 1.1;
  margin-bottom: 12px;
}
.tourniquet p { margin-bottom: 12px; }

@media (max-width: 720px) {
  .page { padding: 0 var(--marge-mobile); }
  /* Les notes suivent la même marge que la page : leur padding de bureau
     (64 px) laissait, sur un écran étroit, deux bandes vides plus larges que
     l'espace restant au texte (2026-09-12). */
  .notes { padding-left: var(--marge-mobile); padding-right: var(--marge-mobile); }

  /* La taille mobile vaut celle du bureau (jeton conservé, le contrat le
     nomme) et l'interligne ne se desserre plus : à 1,2, le titre de l'accueil
     — seul à tenir sur plusieurs lignes — s'écartait de ceux des autres
     pages (2026-08-17). */
  h1 { font-size: var(--taille-titre-xl-mobile); }
  /* Le mobile resserrait la respiration à 48 px quand le bureau tenait 64.
     À 24, il n'y a plus rien à resserrer : la règle donnait au téléphone deux
     fois l'air du bureau. La variable seule fait foi (2026-08-17). */
  /* La barre garde exactement sa mise en page de bureau — même hauteur, même
     logo (2026-08-17). Seul `position: relative` est utile ici : le menu
     escamotable se déplie par rapport à elle. */
  .entete nav { position: relative; }
  /* Sans JavaScript, aucune classe n'est posée : sous cette largeur, les liens
     ne tiendraient de toute façon pas sur une ligne. */
  .entete-bascule { display: inline-flex; }
  .entete-liens {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--marge-mobile) 16px;
    background: var(--gris-05);
    border-bottom: 1px solid var(--gris-20);
  }
  .entete-liens.deploye { display: flex; }
  .entete-liens a { padding: 12px 0; font-size: var(--taille-corps); }
  .entete-liens a + a { border-top: 1px solid var(--gris-10); }
  /* Filet sans JavaScript : sous 720 px, les liens ne tiendraient de toute
     façon pas. Avec le script, la bascule se fait plus tôt si besoin —
     .entete--compacte, posée dès que la barre déborde. */
  .carte-chiffrage { padding: 28px 20px; }
  .bulle-visiteur, .bulle-distilibre { max-width: 92%; }
  /* Ordre naturel du document, comme sur bureau : titre, puis appel à
     l'action, puis démonstrateur (décision du 2026-08-14, qui remplace
     l'inversion de juillet — le titre dit ce que fait l'outil, le reléguer
     laissait le visiteur mobile devant un bouton sans contexte). */
  .accueil-cta { padding-top: 0; }
  .trois-colonnes, .briques { grid-template-columns: 1fr; }
  .accueil-demo .demo-conversation { padding: 20px; margin-bottom: 24px; }

  /* Fil d'étapes : « Étape n/m — Libellé » (contrat EXPERIENCE.md) */
  .etape-tunnel { display: none; }
  .etape-tunnel-mobile { display: block; }
  /* Tableau du chiffrage empilé (contrat EXPERIENCE.md) */
  .carte-chiffrage thead { display: none; }
  .carte-chiffrage tr { display: block; border-bottom: 1px solid var(--gris-20); padding: 8px 0; }
  .carte-chiffrage td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: none;
    padding: 2px 0;
    text-align: right;
  }
  /* La restitution d'une DRM (récit 2.3) reprend le même empilement : six
     colonnes de balances ne tiennent sur aucun téléphone, et un tableau qui
     déborde n'est pas une lecture. */
  .table-lecture thead { display: none; }
  .table-lecture tr { display: block; border-bottom: 1px solid var(--gris-20); padding: 8px 0; }
  .table-lecture td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    /* Empilé, chaque cellule devient une ligne : le filet passe dessous, sinon
       chaque valeur serait enfermée dans sa propre boîte. */
    border: none;
    border-bottom: 1px solid var(--gris-10);
    padding: 4px 0;
    text-align: right;
  }
  .table-lecture td::before {
    content: attr(data-titre);
    font-size: var(--taille-etiquette);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris-60);
  }

  .carte-chiffrage td::before {
    content: attr(data-titre);
    font-size: var(--taille-etiquette);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris-60);
  }
}


/* ── Page de démonstration ───────────────────────────────────────────────
   Le reset met toutes les marges à zéro et rien ne les rendait aux
   paragraphes : les blocs de la démo — action, bande de dépôt, lecture,
   franchise — se touchaient (retour de Jean-Martial du 2026-09-11).
   L'air se pose ENTRE frères, jamais avant le premier : un bloc garde ainsi
   son calage sur le titre qui l'annonce. */
.demo > * + *,
.demo form > * + *,
.demo section > * + * { margin-top: var(--gouttiere); }

/* Chaque résultat est un bloc à part entière : le filet le sépare, et l'air
   de part et d'autre le rend lisible comme tel. */
.demo > section.filet {
  margin-top: 40px;
  padding-top: var(--respiration);
}

/* Le volume de franchise est le chiffre que la page est venue donner : même
   traitement que le montant de la carte de chiffrage. */
.demo .montant {
  font-family: var(--police-titre);
  font-size: var(--taille-montant);
  font-weight: 600;
  line-height: 1.1;
}
.demo .approx {
  font-size: var(--taille-corps-sm);
  line-height: 1.5;
  color: var(--gris-60);
}

/* La rubrique qui fournit l'assiette, sous le nombre : une mention de
   traçabilité, jamais un second chiffre à comparer. */
.assiette-source {
  display: inline-block;
  font-size: var(--taille-petit);
  font-weight: 400;
  text-align: right;
  white-space: normal;
}