/* =============================================================================
   components.css — JEU FERMÉ de composants réutilisables (charte §5 et §11).

   Règles : une seule classe par sélecteur, ~2 niveaux maximum, jamais d'ID, jamais
   d'`!important`, aucune valeur en dur (tout vient de tokens.css).
   Avant d'ajouter quoi que ce soit ici : vérifier que le composant n'existe pas déjà,
   puis justifier l'ajout (« est-ce nécessaire ? »).
   ============================================================================= */

/* --- conteneur ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--l-vitrine);
  margin: 0 auto;
  padding: 0 clamp(var(--e-16), 4vw, var(--e-32));
}

/* Rythme vertical UNIQUEMENT.
   ⚠️ Ne jamais écrire `padding: X 0` ici : la notation raccourcie écraserait le padding
   latéral de .container et supprimerait les marges (bug constaté sur la maquette). */
.section {
  padding-block: clamp(var(--e-24), 5vw, var(--e-56));
}

/* --- marque ---------------------------------------------------------------- */
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
}

.wordmark-dot {
  color: var(--accent);
}

/* --- intitulé (eyebrow) ---------------------------------------------------- */
.eyebrow {
  font-size: var(--t-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-ink);
}

/* --- boutons (charte §5) --------------------------------------------------- */
.btn {
  font-family: var(--sans);
  font-size: var(--t-15);
  font-weight: 600;
  border-radius: var(--r-md);
  padding: var(--e-12) var(--e-16);
  min-height: var(--cible-min);
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-8);
  /* Aucune transition : le site est SANS ANIMATION [DÉCIDÉ 2026-07-30].
     Le changement d'état au survol est immédiat. Ce parti pris rend `prefers-reduced-motion`
     inutile — donc aucun `!important` nulle part (charte §11 règle 2, respectée à la lettre). */
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--primary-h);
}

/* Fantôme : fond en lavis bleuté (et non transparent) — se distingue mieux de la surface. */
.btn-ghost {
  background: var(--primary-wash);
  color: var(--primary);
  border-color: var(--line);
}
.btn-ghost:hover {
  background: var(--primary-wash-h);
  border-color: var(--accent);
}

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-accent:hover {
  background: var(--accent-h);
}

/* Action destructive : lavis rouge, texte danger. */
.btn-danger {
  background: var(--danger-wash);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn-danger:hover {
  background: var(--danger-wash-h);
  border-color: var(--danger);
}

.btn-sm {
  padding: var(--e-8) var(--e-12);
  min-height: 38px;
  font-size: var(--t-13);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- carte ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--e-20);
}

/* --- chip sémantique (état) ------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-12);
  font-weight: 600;
  padding: 6px 11px;
  border-radius: var(--r-pilule);
  border: 1px solid transparent;
}

.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.chip-ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 26%, transparent);
}
.chip-warn {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}
.chip-err {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 26%, transparent);
}
.chip-info {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 26%, transparent);
}

/* --- champs de formulaire (charte §5) -------------------------------------- */
.field {
  margin-bottom: var(--e-16);
}

.label {
  display: block;
  font-size: var(--t-13);
  font-weight: 600;
  margin-bottom: 6px;
}

.input {
  width: 100%;
  /* ⚠️ 15 px et non 16 : un champ n'est pas du texte à lire, c'est une commande. L'aligner sur
     le bouton qui le valide donne une échelle cohérente — et gagne une ligne sur un formulaire
     dense. ⚠️ Ne pas descendre plus bas : sous 16 px, iOS zoome à la mise au point du champ, et
     un champ à 14 px ferait sauter la page à chaque saisie. 15 px reste au-dessus de ce seuil
     pour les tailles de police par défaut. */
  font-size: var(--t-15);
  padding: var(--e-12);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  min-height: var(--cible-min);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.input-err {
  border-color: var(--danger);
}

.hint {
  /* ⚠️ Annule le `max-width: 68ch` de `base.css` : cette limite vise le **confort de lecture**
     d'un paragraphe pleine page. Dans un encart ou sous un champ, le conteneur borne déjà la
     ligne, et la limite ne fait plus que créer un vide à droite. */
  max-width: none;
  font-size: var(--t-13);
  color: var(--muted);
  margin-top: 6px;
}

.msg-err {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-12);
  color: var(--danger);
  margin-top: 6px;
}

/* --- bandeau de résultat (succès ou échec d'une action) ----------------------
   ⚠️ **À ne pas confondre avec `.msg-err` ci-dessus**, et c'est toute la raison d'être de ces
   deux classes. Un message sous un champ dit « CE champ ne va pas » : il est court, collé à
   l'input, et la charte §5 lui donne pour tout signal la bordure rouge du champ. Un bandeau dit
   « votre action a abouti / a échoué » : il concerne l'écran entier, arrive après une
   redirection, et doit se voir avant qu'on ait cherché à le lire.

   Poser un fond sur `.msg-err` aurait donné un pavé coloré à chaque champ invalide — un
   formulaire d'intake avec quatre erreurs en aurait affiché quatre.

   ⚠️ **Fond teinté, jamais un aplat plein** : le motif du produit pour un fond sémantique
   (charte §5, chips à 12 % ; `--danger-wash`). Un aplat rouge pour une adresse mal saisie crie
   plus fort que ne le mérite la faute, et rivaliserait avec le bleu nuit de l'action principale.

   ⚠️ `.msg-ok` était employée dans **onze** gabarits sans avoir jamais existé dans le CSS
   [découvert le 2026-08-06] : les confirmations s'affichaient en paragraphe nu, indiscernables
   du texte courant. Une classe absente ne produit aucune erreur — elle ne fait simplement rien. */
.msg-ok,
.msg-err-bandeau {
  /* Annule le `max-width: 68ch` de `base.css` : un bandeau borde son écran, il ne se lit pas
     comme un paragraphe. */
  max-width: none;
  padding: var(--e-12) var(--e-16);
  border-radius: var(--r-md);
  font-size: var(--t-14);
  font-weight: 600;
  margin-bottom: var(--e-16);
}

.msg-ok {
  background: var(--success-wash);
  color: var(--success);
}

.msg-err-bandeau {
  background: var(--danger-wash);
  color: var(--danger);
}

/* Un bandeau peut porter PLUSIEURS causes — les obstacles à l'envoi d'une convention, par exemple
   (C5.3) : mentions légales absentes ET signature de l'avocat manquante. Les afficher en autant de
   bandeaux donnerait une pile de pavés rouges ; une liste dans un seul bandeau les énumère sans
   crier deux fois. Même forme que `.privacy-box ul` ci-dessous : les puces se calent dans le
   retrait du bandeau au lieu de déborder à sa gauche. */
.msg-ok ul,
.msg-err-bandeau ul {
  margin: var(--e-8) 0 0;
  padding-left: var(--e-20);
  font-weight: 400;
}

/* --- encadré de réassurance ------------------------------------------------ */
.privacy-box {
  background: var(--primary-wash);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--e-16) var(--e-20);
}

.privacy-box ul {
  margin: 0;
  padding-left: var(--e-20);
}

.privacy-box-titre {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: var(--t-14);
  color: var(--primary);
  margin: 0 0 var(--e-12);
}

/* --- page d'état centrée (attente, 404, 503) ------------------------------- */
.etat {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--e-24);
}

.etat-contenu {
  max-width: var(--l-formulaire);
}

/* ⚠️ **Le surtitre d'un écran d'état n'a pas de largeur de lecture** [corrigé le 2026-08-07].
   `base.css` donne `max-width: 68ch` à TOUT paragraphe — une largeur de confort pour du texte
   courant. Le surtitre en héritait : son bloc restait collé à gauche, et son texte se centrait
   dans ces 68ch au lieu de l'écran. Résultat, « Erreur 404 » apparaissait décalé d'environ 80 px
   sous un titre, lui, parfaitement centré.

   ⚠️ Le défaut valait pour les **six** écrans d'état, pas seulement la 404 : les deux pages
   d'erreur, les deux écrans de connexion — où c'est le nom du cabinet qui glissait — et les deux
   pages d'accueil. Personne ne l'avait vu, parce qu'un décalage ne saute aux yeux que lorsqu'un
   élément voisin donne l'axe : ici, le filet et le titre.

   `.etat-texte` compense déjà par `margin: 0 auto` ; ici la limite n'a simplement pas lieu d'être
   — un surtitre fait trois mots, jamais soixante-huit caractères. */
.etat .eyebrow {
  max-width: none;
}

.etat-titre {
  font-size: clamp(var(--t-24), 5vw, var(--t-38));
  margin: var(--e-12) 0;
}

.etat-texte {
  color: var(--muted);
  margin: 0 auto var(--e-24);
}

.etat-filet {
  height: 1px;
  background: var(--line);
  margin: var(--e-24) auto;
  max-width: var(--l-formulaire);
}

/* --- mention de sécurité (cadenas + texte) --------------------------------- */
.secure {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
  font-size: var(--t-13);
  color: var(--muted);
}

/* --- badges de statut de dossier (vocabulaire métier, charte §5) ------------
   Distinct des `.chip` : un badge qualifie l'ÉTAT d'un dossier dans sa machine à états
   (spec-modules B.3), un chip qualifie un retour d'interface. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-12);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-pilule);
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-invitation {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}
.badge-a-valider {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
}
.badge-attente {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, var(--surface));
}
.badge-signe {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.badge-erreur {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}
/* ⚠️ **Manquait, alors que `utilisateurs.html` l'employait** [2026-08-06]. Le badge « Désactivé »
   rendait donc `.badge` seul : ni teinte, ni couleur de texte, et une pastille prenant celle du
   texte voisin. Rien ne l'aurait signalé — une classe absente ne fait pas d'erreur, elle ne fait
   rien. C'est le neutre volontairement : un compte désactivé n'est ni un échec ni une alerte, il
   est hors service. */
.badge-neutre {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}

/* --- tuile de synthèse (back-office) ---------------------------------------
   Mobile : libellé et valeur sur une ligne — en version haute, ces tuiles repoussent
   la liste hors de l'écran (constat de la revue de maquette). */
.tuile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--e-12);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-8);
}

.tuile-libelle {
  font-size: var(--t-12);
  color: var(--muted);
  font-weight: 600;
}

.tuile-valeur {
  font-size: var(--t-18);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tuile-alerte .tuile-valeur {
  color: var(--warning);
}

/* --- stepper (parcours de saisie) ------------------------------------------ */
.stepper {
  display: flex;
  gap: 6px;
  margin-bottom: var(--e-20);
}

.stepper-etape {
  flex: 1;
}

.stepper-barre {
  height: 5px;
  border-radius: var(--r-pilule);
  background: var(--line);
}

.stepper-etape-faite .stepper-barre {
  background: var(--accent);
}
.stepper-etape-courante .stepper-barre {
  background: var(--primary);
}

.stepper-libelle {
  font-size: var(--t-12);
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}

/* --- tuile de formule sélectionnable (souscription, abonnement) -------------
   Sélection en CSS pur : la CSP interdit le JavaScript en ligne, et un choix de formule
   n'a pas besoin de script. */
.formule {
  display: block;
  cursor: pointer;
  position: relative;
}

.formule-choix {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.formule-carte {
  display: block;
  height: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--e-12);
  background: var(--surface);
}

.formule-choix:checked + .formule-carte {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.formule-carte > * {
  display: block;
}

.formule-nom {
  font-size: var(--t-12);
  color: var(--muted);
  font-weight: 600;
}

.formule-prix {
  font-family: var(--serif);
  font-size: var(--t-18);
  font-weight: 600;
}

.formule-volume {
  font-size: var(--t-12);
  color: var(--muted);
}

/* --- filet de séparation ---------------------------------------------------- */
.filet {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--e-20) 0;
}

/* --- bandeau du cabinet (façade client) -------------------------------------
   Distillé de la maquette (écran « espace client »), charte §11 : à la validation
   d'une maquette, on la distille ici plutôt que d'écrire du style de page.

   ⚠️ Ce bandeau porte l'**anti-confusion** (macro §2, B.0) : l'URL n'est pas une
   frontière de sécurité, c'est le nom et la marque affichés qui disent au client
   chez quel cabinet il se trouve. Il est donc présent sur CHAQUE page du parcours,
   jamais optionnel. */
.chead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* ⚠️ **Une seule source de largeur pour le bandeau ET le contenu.** Tant qu'ils avaient
   chacun leur `max-width` et leur padding, le contenu ne s'alignait pas sur le bandeau —
   invisible en mobile, flagrant sur écran large. Toute page du parcours client emploie
   cette colonne : c'est ce qui garantit que les bords coïncident. */
.colonne-lecture {
  width: 100%;
  max-width: var(--l-lecture);
  margin-inline: auto;
  padding-inline: clamp(var(--e-16), 4vw, var(--e-24));
}

/* --- Contenu légal rendu depuis un Markdown (CL.3) -------------------------------------------

   ⚠️ **Deux classes, et deux seulement.** Le HTML est produit par un moteur restreint
   (`shared/contenu/markdown.py`) qui n'émet aucune classe : on ne peut donc styler que par
   éléments, à l'intérieur d'un conteneur nommé. C'est l'unique endroit du produit où l'on descend
   sous les éléments — d'où la borne : tout vit sous `.prose`, rien n'en sort.

   ⚠️ **Sans ces règles, une page légale est un mur de texte.** Ce sont des documents qu'on lit
   pour y chercher une durée de conservation ou une adresse : le rythme vertical et la lisibilité
   des tableaux ne sont pas de l'ornement, ils sont la fonction. */
.prose > * + * {
  margin-block-start: var(--e-16);
}

.prose h2 {
  margin-block-start: var(--e-32);
}

.prose ul {
  padding-inline-start: var(--e-24);
}

.prose li + li {
  margin-block-start: var(--e-8);
}

.prose blockquote {
  border-inline-start: 3px solid var(--line);
  padding-inline-start: var(--e-16);
  color: var(--muted);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  /* Un tableau de durées déborde sur téléphone : il défile dans sa propre boîte, jamais la page. */
  display: block;
  overflow-x: auto;
}

.prose th,
.prose td {
  border-block-end: 1px solid var(--line);
  padding: var(--e-8);
  text-align: start;
  vertical-align: top;
}

/* Le pied légal — présent sur toute page où le service est proposé (accès « facile, direct et
   permanent », LCEN). */
.pied-legal {
  margin-block-start: var(--e-32);
  padding-block: var(--e-16);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-14);
}

.pied-legal a + a {
  margin-inline-start: var(--e-16);
}

.chead-inner {
  padding-block: var(--e-12);
  display: flex;
  align-items: center;
  gap: var(--e-12);
}

/* Le **logo du cabinet**, au-dessus du titre d'accueil — ou son initiale sur aplat s'il n'en a
   pas déposé. L'initiale n'est pas un pis-aller : beaucoup de cabinets n'ont pas de logo, et une
   initiale vaut mieux qu'un vide ou qu'une marque générique qui ne serait celle de personne.
   ⚠️ La **boîte a la même taille dans les deux cas**, pour que le dépôt d'un logo ne déplace rien. */
.logo-cabinet {
  width: 72px;
  height: 72px;
  border-radius: var(--r-lg);
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-30);
}

.cab-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-16);
  line-height: 1.1;
}

.cab-sub {
  font-size: var(--t-12);
  color: var(--muted);
}

/* « propulsé par » — repoussé à droite. La marque de la plateforme reste discrète :
   le client est chez SON avocat, pas chez nous. */
.powered {
  margin-left: auto;
  font-size: var(--t-12);
  color: var(--muted);
  text-align: right;
}

/* --- hero du parcours client ------------------------------------------------
   ⚠️ Le texte reste COURT au-dessus du bouton : sur un téléphone, tout ce qui
   précède l'action repousse celle-ci hors de l'écran. Les explications viennent
   après, pour qui veut les lire. */
.client-hero {
  text-align: center;
}

.client-hero h1 {
  font-size: clamp(var(--t-24), 6.4vw, var(--t-38));
  margin: var(--e-12) 0;
  text-wrap: balance;
}

.client-hero p {
  color: var(--muted);
  margin: 0 auto var(--e-20);
  max-width: var(--l-formulaire);
}


/* --- emplacement à remplir (donnée pas encore modélisée) ---------------------
   ⚠️ Rendu **visiblement provisoire**, à dessein : un placeholder qui ressemble à du
   contenu réel finit en production sans que personne ne le remarque. Ici on veut le
   contraire — qu'il saute aux yeux tant que la donnée n'existe pas. */
.placeholder {
  color: var(--muted);
  font-style: italic;
  border-bottom: 1px dashed var(--line);
}


/* --- lien de texte -----------------------------------------------------------
   ⚠️ `base.css` neutralise volontairement `a` (couleur héritée, sans soulignement) : c'est
   ce qu'il faut pour un bouton ou une carte entièrement cliquable. Un lien **dans du texte**
   doit au contraire se distinguer — et pas seulement par la couleur, qui exclurait les
   daltoniens (charte §8). D'où le soulignement, conservé. */
.lien {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.lien:hover {
  color: var(--primary-h);
}

/* ⚠️ `.lien` doit aussi tenir sur un `<button>`. Certaines actions **ressemblent** à un lien mais
   ne peuvent pas en être un : annuler une saisie détruit des données, et un `<a>` serait
   déclenché par le préchargement d'un navigateur ou par un antivirus qui suit les liens d'un
   email. On habille donc un bouton — d'où la remise à zéro des styles que le navigateur applique
   d'office (fond, bordure, police, alignement). */
button.lien {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Variante de l'encart de réassurance, sur fond blanc — pour deux encarts successifs qu'il
   faut distinguer sans les opposer. */
.privacy-box-blanc {
  background: var(--surface);
}

/* --- liste de documents à venir ---------------------------------------------
   Emplacements des pages légales que le client est en droit de consulter. Rendus comme du
   texte, **jamais comme des liens** : un lien mort est pire qu'une mention « à venir », il
   se clique et ne mène nulle part. */
.docs-a-venir {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-a-venir li {
  padding: var(--e-8) 0;
  border-bottom: 1px solid var(--line);
}

/* --- en-tête des écrans de saisie -------------------------------------------
   Distillé de la maquette (écran « formulaire »). ⚠️ **Distinct du bandeau `chead`** :
   en saisie, la place à l'écran est comptée et le client sait déjà où il est. On garde
   l'identité du cabinet, en plus compact, et l'on remplace « propulsé par » par le repère
   d'étape — plus utile à ce moment du parcours. */
.form-top {
  display: flex;
  align-items: center;
  gap: var(--e-12);
  margin-bottom: var(--e-16);
}

.form-top .secure {
  margin-left: auto;
}

/* Version réduite du monogramme, pour l'en-tête de saisie. Deux tailles plutôt qu'une
   classe paramétrée : ce sont deux usages distincts (identité en grand sur l'accueil,
   repère discret en saisie), et une seule taille irait mal à l'un des deux. */
.monogram {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-16);
  flex: none;
}

/* --- le logo réel, quand le cabinet en a déposé un -------------------------
   ⚠️ **L'aplat disparaît sous une image, et c'est délibéré.** Le carré coloré tient lieu de marque
   en l'absence de logo ; le garder derrière un logo qui porte déjà la sienne superposerait deux
   marques — et beaucoup de logos ont un fond blanc, qui formerait un rectangle clair dans un carré
   bleu nuit. La boîte, elle, garde ses dimensions : le dépôt d'un logo ne déplace rien. */
.logo-cabinet.est-image,
.monogram.est-image {
  background: none;
}

/* ⚠️ **La boîte d'un logo n'est pas le carré d'une initiale** [2026-08-07]. Une lettre est carrée ;
   un logo de cabinet, presque jamais — il est le plus souvent large et bas. Enfermé dans un carré,
   il est réduit à la hauteur de ce carré pour tenir en largeur, et paraît minuscule. La boîte
   s'efface donc devant l'image : c'est l'image elle-même qui porte ses bornes.

   ⚠️ **Les bornes sont en PIXELS et posées sur l'`<img>`, jamais en pourcentage sur le conteneur.**
   Première version écrite ainsi, et elle ne fonctionnait pas : `max-height: 100%` sur une image
   centrée dans une grille ne se résout pas de façon fiable — l'image gardait sa taille intrinsèque
   et débordait par-dessus le titre. C'est exactement ce que `.bo-logo` (back-office) documentait
   déjà : « la borne de hauteur n'est décisive que parce que `base.css` laisse `height: auto` à
   toutes les images ». Le motif qui marche existait à dix lignes d'ici ; on le reprend.

   **Deux échelles, un rapport de 2 :**

   | Emplacement | Hauteur | Pourquoi |
   |---|---|---|
   | Bandeau d'identité et en-tête de saisie | `--l-logo-h` | accompagnent un nom, sur toutes les pages |
   | Accueil | **2 ×** `--l-logo-h` | cette page-là présente le cabinet |

   ⚠️ Le rapport est écrit en `calc()` plutôt que recopié en chiffres : la même image lue à deux
   échelles sans rapport d'un écran à l'autre se remarque immédiatement, et c'est ce qui arriverait
   au premier ajustement fait d'un seul côté. */
.logo-cabinet.est-image,
.monogram.est-image {
  width: auto;
  height: auto;
  border-radius: 0;
}

.chead-logo img,
.monogram.est-image img {
  display: block;
  max-height: var(--l-logo-h);
  /* La moitié de la largeur admise sur l'accueil : un logo panoramique ne doit pas repousser le
     nom du cabinet hors de l'écran sur un téléphone — c'est le nom qui porte l'anti-confusion. */
  max-width: calc(var(--l-logo-l) / 2);
}

.logo-cabinet.est-image img {
  display: block;
  max-height: calc(2 * var(--l-logo-h));
  max-width: var(--l-logo-l);
}

/* Le bandeau ne fixe plus de boîte : il laisse l'image se dimensionner et l'empêche seulement de
   s'étirer avec ses voisins dans la barre en `flex`. */
.chead-logo {
  display: flex;
  align-items: center;
  flex: none;
}

/* --- fil de progression de l'intake ------------------------------------------
   Cinq étapes : email, coordonnées, adverses, situation, récapitulatif.

   ⚠️ **Sur mobile, les barres seules.** Cinq libellés sur 375 px seraient illisibles —
   la couleur porte alors l'information. Mais `display: none` retirerait aussi le texte
   aux lecteurs d'écran : le repère leur est donné par l'`aria-label` du conteneur, qui
   énonce « étape N sur 5 ». Masquer visuellement ne doit jamais revenir à masquer tout court. */
.stepper {
  display: flex;
  gap: var(--e-4);
  margin: 0 0 var(--e-24);
}

.stepper-etape {
  flex: 1;
}

.stepper-barre {
  height: 5px;
  border-radius: var(--r-pilule);
  background: var(--line);
}

.stepper-etape.est-faite .stepper-barre {
  background: var(--accent);
}

.stepper-etape.est-courante .stepper-barre {
  background: var(--primary);
}

.stepper-libelle {
  display: none;
  font-size: var(--t-12);
  color: var(--muted);
  font-weight: 600;
  margin-top: var(--e-4);
}

.stepper-etape.est-courante .stepper-libelle {
  color: var(--primary);
}

@media (min-width: 680px) {
  .stepper-libelle {
    display: block;
  }
}


/* --- info-bulle --------------------------------------------------------------
   Information de second plan attachée à un champ : une précision utile, jamais une
   erreur ni une action.

   ⚠️ **Pas de carte blanche.** Une carte est un objet de premier plan ; l'employer ici
   donnait à une note plus de poids qu'au champ qu'elle commente. Fond teinté, padding
   resserré, icône : la note se lit comme un aparté.

   ⚠️ Distincte de `.hint` (une ligne sous un champ) : l'info-bulle porte plusieurs
   phrases et mérite d'être vue — c'est ici qu'on dit ce qui ne pourra plus être corrigé. */
.infobulle {
  display: flex;
  gap: var(--e-8);
  background: var(--primary-wash);
  border-radius: var(--r-md);
  padding: var(--e-12);
  font-size: var(--t-13);
  color: var(--ink);
}

/* `flex: none` : sans lui, l'icône se comprime quand le texte est long. */
.infobulle-icone {
  flex: none;
}

.infobulle p {
  margin: 0;
  max-width: none;
}

/* ⚠️ **Une note se rattache à ce qu'elle explique — donc elle en est PLUS PROCHE que de la suite.**
   C'est la règle de proximité, et elle décide seule de la lecture : à espacement égal des deux
   côtés, l'œil ne sait plus si la note commente le champ du dessus ou annonce celui du dessous.

   - marge **haute réduite** : la note colle au champ qu'elle commente ;
   - marge **basse généreuse** : elle se détache nettement du champ suivant.

   `:not(:first-child)` pour la marge haute : une note placée **en tête** d'un bloc n'a rien
   au-dessus dont se détacher — elle introduit ce qui suit, et sa seule marge utile est la basse. */
.infobulle {
  margin-bottom: var(--e-24);
}

.infobulle:not(:first-child) {
  margin-top: var(--e-8);
}


/* --- barre d'actions d'un formulaire -----------------------------------------
   Deux boutons de **largeur strictement égale**, occupant toute la place.

   ⚠️ `1fr 1fr` et non `flex` : en flex, chaque bouton prend la largeur de son texte, et
   « Retour » se retrouve deux fois plus étroit que « Continuer ». Or l'action secondaire
   n'est pas plus petite parce que son libellé est plus court.

   ⚠️ Le `gap` vaut le **padding de `.card`** : c'est ce qui rend l'écart entre les deux
   boutons identique à celui qui les sépare des bords de la carte. Toute autre valeur se
   voit immédiatement, sans qu'on sache dire pourquoi. */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-20);
}


/* --- en-tête d'un bloc répété ------------------------------------------------
   Titre d'un bloc (une personne du dossier) et son action de retrait, sur une ligne.

   ⚠️ Distinct de `.form-top`, qui aligne l'identité du cabinet et dont la règle enfant
   (`.form-top .secure`) ne vaut que là. Deux usages différents, deux composants — les
   confondre ferait dépendre l'un des évolutions de l'autre.

   `justify-content: space-between` plutôt qu'un `margin-left: auto` sur le bouton : le
   bouton est ici optionnel (il n'existe pas sur le premier bloc), et la règle doit tenir
   qu'il soit présent ou non. */
.bloc-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-12);
}


/* --- deux champs sur une ligne -----------------------------------------------
   Distillé de la maquette V1 (écran de saisie client). ⚠️ **Ce n'est pas un choix
   esthétique** : à une colonne, un bloc client tenait sur deux écrans de téléphone et
   l'utilisateur perdait de vue ce qu'il remplissait. On apparie les champs courts —
   civilité/nationalité, nom/prénom, email/téléphone — et l'on garde pleine largeur ce qui
   est long (adresse postale).

   Mobile d'abord : une colonne par défaut, deux au-delà de 560 px. Apparier deux champs
   sur 375 px les rendrait tous deux inutilisables. */
.paire {
  display: grid;
  gap: var(--e-12);
}

@media (min-width: 560px) {
  .paire {
    grid-template-columns: 1fr 1fr;
  }
}

/* ⚠️ Dans un empilement ou une paire, l'espacement vient du `gap` — **uniquement**. La
   marge propre de `.field` s'y ajoutait, doublant l'écart entre deux champs : c'est la
   même faute que celle déjà corrigée sur `.stack > p`. */
.stack > .field,
.paire > .field {
  margin-bottom: 0;
}

/* --- sélecteur segmenté -------------------------------------------------------
   Deux options exclusives de même poids, rendues comme un interrupteur — distillé de la
   maquette V1 (« Personne physique / Personne morale »).

   ⚠️ **De vrais boutons radio**, simplement masqués : ils restent annoncés par un lecteur
   d'écran, atteignables au clavier et soumis avec le formulaire. Des `<div>` cliquables
   auraient exigé du JavaScript pour fonctionner — et n'auraient rien fonctionné sans lui.

   ⚠️ Deux options **de même largeur**, jamais une case à cocher « c'est une société » :
   une case laisserait croire qu'il existe un cas par défaut plus légitime que l'autre. */
.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.segment-choix {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.segment-option {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--e-12);
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--muted);
  background: var(--ground);
  cursor: pointer;
  min-height: var(--cible-min);
}

.segment-choix:checked + .segment-option {
  background: var(--primary);
  color: var(--on-primary);
}

/* Le focus doit rester visible alors que la commande qui le porte est masquée : sans cette
   règle, un utilisateur au clavier ne saurait pas où il se trouve. */
.segment-choix:focus-visible + .segment-option {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* --- marqueur de champ obligatoire --------------------------------------------
   ⚠️ Marquer les **obligatoires** plutôt que les facultatifs, comme en V1 : ils sont moins
   nombreux, et « (facultatif) » répété sous huit champs allonge un écran qu'on cherche
   justement à raccourcir. L'astérisque est doublé d'un `aria-label` côté gabarit — une
   couleur seule ne porte aucune information pour qui ne la voit pas. */
.requis {
  color: var(--danger);
  font-weight: 700;
}


/* --- échelle typographique des écrans de saisie -------------------------------
   Posée sur `<body class="saisie">`. Trois tailles, pas une de plus :

   | rôle                      | taille | police |
   |---------------------------|--------|--------|
   | titre de bloc, du cabinet | 16 px  | serif  |
   | commandes (boutons, champs)| 15 px | sans   |
   | tout le texte courant     | 13 px  | sans   |

   ⚠️ **Le corps du site est à 16 px sans-serif, et c'est ce qui créait le défaut** : un
   paragraphe paraissait plus lourd que le titre de la carte qui le contenait, alors que les
   deux faisaient la même taille — le serif d'un titre occupe moins de place visuelle que le
   sans-serif d'un paragraphe. Ramener le texte courant à 13 px rétablit la hiérarchie.

   ⚠️ **Limité aux écrans de saisie**, volontairement. L'accueil et la notice sont des pages
   qui se **lisent** : y descendre le corps à 13 px les rendrait pénibles. Un formulaire, lui,
   se parcourt — le texte y est de la signalisation, pas de la lecture. */
.saisie p {
  font-size: var(--t-13);
}

/* --- zone de signature manuscrite (B.1.2, C5.4) -----------------------------
   Le cadre où le client trace sa signature au doigt ou à la souris.

   ⚠️ **`touch-action: none` est indispensable, pas cosmétique** : sans lui, un doigt qui trace
   fait défiler la page — et l'écran devient inutilisable sur téléphone, c'est-à-dire là où la
   plupart des clients signeront.

   ⚠️ Le trait est en **pointillé** et l'invite au centre : un cadre plein se confondrait avec un
   champ de saisie, et l'on attendrait un clavier. */
.signature-zone {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.signature-canvas {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
}

/* L'invite disparaît au premier trait (attribut `hidden` posé par le script) — elle ne doit donc
   pas intercepter le pointeur, sans quoi le tracé commencerait par un clic mort. */
.signature-invite {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-14);
  pointer-events: none;
}