/* ==========================================================================
   Lyrge UI · composants
   Se charge après jetons.css et base.css. Aucune valeur en dur.
   Sommaire
     1  Primitives du site      icon, btn, link-arrow, hl, badge, chip, card,
                                icon-bubble, eyebrow, brand, note
     2  Coquille de l’outil     app, side, main, page, mtop, bnav, seul, auth
     3  En-têtes et grilles     phead, hello, fhead, shead, retour, section, duo…
     4  Commandes               icon-btn, lien, lien-fleche
     5  Formulaires             champs, select, cases, interrupteur, segments…
     6  Pastilles               st, stsel, cl, ring, score-pill, tag, sig, tabs
     7  Tableaux                table, cellnom, lot, pagination
     8  Retours                 notice, info, alerte, empty, squelette,
                                progression, spin, tip, toasts
     9  Pipeline (kanban)       board, col, kcard
    10  Mode tri                tri, tcard, facts
    11  Fiche prospect          stepper, timeline, why, contact, vp, scripts
    12  Tableau de bord         todo, mini, kpi, funnel, feed, fichier-strip
    13  Surcouches              dialog, palette, aide, dialogue, menu
    14  Mode appel              sbloc, dit, aparte, qs, obj, chrono, issues
    15  Appels                  lecteur, coach, besoins, objections, rattache
    16  Audit                   doc
    17  Pages publiques         public, etapes, signature, consentement,
                                legal-facts, paiement, avatar, monogram
    18  Animations · 19 Écrans · 20 Impression · 21 Couleurs forcées
   ========================================================================== */

/* 1. Primitives du site (mêmes noms et mêmes rôles que lyrge.fr) ------------ */

/* Pictogrammes : <svg class="icon" aria-hidden="true"><use href="/assets/ui/icones.svg#nom"></use></svg>
   .ic est le nom historique de l’outil : même rendu, taille fixe. */
.icon, .ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon { width: 1.25em; height: 1.25em; vertical-align: middle; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--md { width: 1.25rem; height: 1.25rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.ic { width: 1.125rem; height: 1.125rem; flex: none; vertical-align: middle; }
.ic--xs { display: inline-block; width: .8125rem; height: .8125rem; margin-left: .1875rem; vertical-align: -.0625rem; }
.ic--avant { margin-left: 0; margin-right: .3125rem; }     /* pictogramme posé devant son libellé (« Voir l’audit ») */
/* Flèche d’un titre (« À trier → À contacter ») et étoile d’une note : les polices de la marque n’ont ni → ni ★ */
.ic--fleche, .ic--etoile { display: inline-block; width: .875em; height: .875em; vertical-align: -.125em; }
.ic--fleche { margin: 0 .3em; stroke-width: 2; color: var(--muted); }
.ic--etoile { margin-left: .1875em; color: var(--muted); }

/* Boutons. Rôles du site : --primary (vert sur fond clair, menthe en sombre),
   --mint (sur vert), --outline (secondaire). Sans modificateur : secondaire. */
.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  --btn-line: var(--line-strong);
  --btn-shadow: var(--shadow-xs);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--ctl-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--btn-line);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-sans);
  font-size: var(--fs-ui); font-weight: 600; line-height: 1.1;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--dur-rapide) var(--ease-out),
    background-color var(--dur-rapide) var(--ease),
    border-color var(--dur-rapide) var(--ease),
    box-shadow var(--dur-rapide) var(--ease),
    color var(--dur-rapide) var(--ease);
}
:where(.btn):hover { --btn-bg: var(--surface-2); --btn-line: var(--line-control); }
.btn:active { transform: translateY(1px); }
.btn .icon, .btn .ic { width: 1rem; height: 1rem; stroke-width: 2; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn:hover .icon--arrow-down { transform: translateY(2px); }
.btn kbd { margin-left: var(--sp-1); border-color: currentColor; background: transparent; color: inherit; opacity: .7; }

.btn--primary { --btn-bg: var(--accent); --btn-ink: var(--on-accent); --btn-line: var(--accent); --btn-shadow: var(--shadow-btn-primary-sm); }
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-line: var(--accent-hover); transform: translateY(-1px); }
.btn--primary.btn--lg { --btn-shadow: var(--shadow-btn-primary-lg); }
.btn--mint { --btn-bg: var(--mint); --btn-ink: var(--green-deep); --btn-line: var(--mint); --btn-shadow: var(--shadow-btn-mint); }
.btn--mint:hover { --btn-bg: var(--mint-light); --btn-line: var(--mint-light); transform: translateY(-1px); }
.btn--outline { --btn-bg: transparent; --btn-line: var(--line-strong); --btn-shadow: none; }
.btn--outline:hover { --btn-bg: var(--hover); --btn-line: var(--ink); }
.btn--ghost, .btn--quiet { --btn-bg: transparent; --btn-ink: var(--text-2); --btn-line: transparent; --btn-shadow: none; }
.btn--ghost:hover, .btn--quiet:hover { --btn-bg: var(--hover); --btn-ink: var(--ink); --btn-line: transparent; }
.btn--danger { --btn-bg: var(--erreur); --btn-ink: var(--on-erreur); --btn-line: var(--erreur); }
.btn--danger:hover { --btn-bg: var(--erreur-hover); --btn-line: var(--erreur-hover); }
.btn--danger-soft { --btn-ink: var(--erreur-ink); }
.btn--danger-soft:hover { --btn-bg: var(--erreur-bg); --btn-line: var(--erreur-line); }
.btn--ok { --btn-ink: var(--succes-ink); }
.btn--ok:hover { --btn-bg: var(--succes-bg); --btn-line: var(--succes-line); }

.btn--sm { min-height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-petit); border-radius: var(--radius-xs); }
.btn--xs { min-height: var(--ctl-h-xs); padding: 0 var(--sp-2); gap: var(--sp-1); font-size: var(--fs-xs); border-radius: var(--radius-2xs); }
.btn--xs .icon, .btn--xs .ic { width: .875rem; height: .875rem; }
.btn--lg { min-height: var(--ctl-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-corps); border-radius: var(--radius-md); }
.btn--lg .icon, .btn--lg .ic { width: 1.125rem; height: 1.125rem; }
.btn--block { width: 100%; }
.btn--icon { width: var(--ctl-h); padding: 0; }
.btn--icon.btn--sm { width: var(--ctl-h-sm); }
.btn--icon.btn--xs { width: var(--ctl-h-xs); }
.btn--icon.btn--lg { width: var(--ctl-h-lg); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* Chargement : <button class="btn" aria-busy="true"> garde sa taille, le libellé s’efface */
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1rem; height: 1rem;
  border: 2px solid var(--btn-ink); border-top-color: transparent; border-radius: 50%;
  animation: tourne var(--dur-rotation) linear infinite;
}

/* Lien fléché (maquette : « Voir une démonstration → ») */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1.5px; text-underline-offset: .42em;
  text-wrap: balance;
  transition: text-decoration-color var(--dur-base) var(--ease);
}
.link-arrow .icon, .link-arrow .ic { width: 1.05rem; height: 1.05rem; stroke-width: 2; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow:hover .icon, .link-arrow:hover .ic { transform: translateX(3px); }

/* Surlignage menthe des mots clés */
.hl {
  padding: 0 .12em .03em; margin-inline: -.02em;
  border-radius: var(--radius-hl);
  color: var(--green-deep);
  background-image: var(--degrade-hl); background-repeat: no-repeat; background-size: 100% 100%;
  box-shadow: var(--shadow-hl);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Pastilles d’autonomie : Automatique / Avec votre validation / Vous reprenez la main */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3125rem .625rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; letter-spacing: .005em;
  white-space: nowrap;
}
.badge .icon, .badge .ic { width: .875rem; height: .875rem; stroke-width: 2.25; }
.badge--auto { background: var(--auto-bg); color: var(--auto-fg); }
.badge--validate { background: var(--validate-bg); color: var(--validate-fg); }
.badge--human { background: var(--human-bg); color: var(--human-fg); }
.badge--neutral { background: var(--badge-neutre-bg); color: var(--muted); }

/* Puces : outils et étiquettes (site), filtres (outil) */
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: var(--ctl-h-sm);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--fs-petit); font-weight: 500; line-height: 1.3;
  white-space: nowrap;
  transition: background-color var(--dur-rapide) var(--ease), border-color var(--dur-rapide) var(--ease), color var(--dur-rapide) var(--ease);
}
.chip .icon, .chip .ic { width: .9375rem; height: .9375rem; color: var(--accent-ink); }
:where(a, button, label).chip { cursor: pointer; }
:where(a, button, label).chip:hover { border-color: var(--line-control); color: var(--ink); }
.chip[aria-current="true"], .chip[aria-pressed="true"], .chip.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.chip[aria-current="true"] .ic, .chip[aria-pressed="true"] .ic, .chip.is-on .ic { color: inherit; }
.chip__n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip[aria-current="true"] .chip__n, .chip[aria-pressed="true"] .chip__n, .chip.is-on .chip__n { color: inherit; opacity: .8; }
.chips--sm .chip { min-height: 1.75rem; padding: 0 .625rem; font-size: var(--fs-xs); }
.chip--ghost { border-style: dashed; background: transparent; }
.chip--date { padding: 0 .625rem; }
.chip--date input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.chip--date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chip--date:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Cartes */
.card {
  position: relative;
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.card__head .card__title { margin: 0; }
.stack > .card__title { margin-bottom: 0; }   /* dans une carte en pile, l'écart vient de la pile */
.duo--haut { align-items: start; }             /* colonnes de hauteurs libres (Réglages) */
.cluster:has(> .field) { align-items: flex-end; }  /* un bouton à côté d'un champ s'aligne sur la saisie, pas sur le libellé */
:is(.coach-suite, .transcription, .rattache-msg__autre, .tl-suite) > summary { display: inline-flex; align-items: center; gap: .375rem; min-height: 1.5rem; list-style: none; }   /* 24 px : cible minimale (WCAG 2.5.8) */
:is(.coach-suite, .transcription, .rattache-msg__autre, .tl-suite, .tl__plie) > summary::-webkit-details-marker { display: none; }
.deplier { width: 1rem; height: 1rem; flex: none; transition: transform var(--dur-rapide) var(--ease); }
details[open] > summary .deplier { transform: rotate(90deg); }
.card__intro { margin: calc(var(--sp-2) * -1) 0 var(--sp-4); color: var(--muted); font-size: var(--fs-petit); line-height: var(--lh-corps); }
.card__title {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-family: var(--font-sans); font-size: var(--fs-carte); font-weight: 600;
  line-height: var(--lh-ui); letter-spacing: var(--ls-carte);
  color: var(--ink);
}
.card__title .icon, .card__title .ic { width: 1rem; height: 1rem; color: var(--muted); }
.card__text { margin-top: var(--sp-2); color: var(--text-2); }
.card__more { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); font-weight: 600; color: var(--lien); }
.card__more .icon, .card__more .ic { width: 1.05rem; height: 1.05rem; stroke-width: 2; transition: transform var(--dur-base) var(--ease-out); }
.card--link { display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.card--link:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow-card); }
.card--link:hover .card__more .icon, .card--link:hover .card__more .ic { transform: translateX(4px); }
.card--link:focus-visible { outline-offset: 4px; }

/* Bulle menthe autour d’un pictogramme */
.icon-bubble {
  --size: 4rem;
  display: inline-grid; place-items: center;
  width: var(--size); height: var(--size); flex: none;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--degrade-bulle);
  box-shadow: var(--shadow-bubble);
}
.icon-bubble .icon, .icon-bubble .ic { width: calc(var(--size) * .44); height: calc(var(--size) * .44); stroke-width: 1.6; }
.icon-bubble--md { --size: 3rem; }
.icon-bubble--sm { --size: 2.5rem; }
.icon-bubble--xs { --size: 2rem; }

/* Surtitre en capitales espacées */
.eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); row-gap: .375rem;
  font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 600;
  line-height: 1.3; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}

/* Marque : <a class="brand" aria-label="Lyrge, accueil"><svg class="brand__logo">…</svg></a> */
.brand { --logo-h: 1.75rem; display: inline-flex; align-items: center; min-height: var(--cible); color: var(--logo); border-radius: var(--radius-2xs); transition: opacity var(--dur-base) var(--ease); }
.brand:hover { opacity: .78; }
.brand__logo { display: block; width: auto; height: var(--logo-h); aspect-ratio: 857.5 / 342.7; flex: none; }

/* Ligne de réassurance (motif .control__note du site) */
.note { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-petit); line-height: var(--lh-corps); }
.note .icon, .note .ic { width: 1.0625rem; height: 1.0625rem; margin-top: .1em; color: var(--accent-ink); }

/* Cibles tactiles : au doigt, zone de clic portée à 44 px sans changer le dessin */
@media (pointer: coarse) {
  .chips--sm .chip { min-height: var(--ctl-h-xs); }
  .chips, .stepper__sorties { gap: var(--sp-2); }
  :is(.coach-suite, .transcription, .rattache-msg__autre, .tl-suite) > summary { position: relative; }
  .btn::before, .icon-btn::before, .chip::before, .tab::before, .stsel::before, .kcard__move::before, .menu__item::before,
  :is(.coach-suite, .transcription, .rattache-msg__autre, .tl-suite) > summary::before {
    content: ""; position: absolute;
    top: min(0px, (100% - var(--cible)) / 2); bottom: min(0px, (100% - var(--cible)) / 2);
    left: min(0px, (100% - var(--cible)) / 2); right: min(0px, (100% - var(--cible)) / 2);
  }
}

/* 2. Coquille de l’outil -------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.main { min-width: 0; }
/* Une seule colonne bornée à la largeur de la page : un tableau large défile dans son cadre au lieu d’élargir la page */
.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-content: start; max-width: var(--page-max); margin: 0 auto; padding: var(--sp-8) var(--sp-10) var(--sp-16); }

.side {
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
  height: 100vh; height: 100dvh;
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  background: var(--side-bg);
  border-right: 1px solid var(--line);
}
.side__logo {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--cible); padding: 0 var(--sp-2); margin-bottom: var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--logo);
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em;
}
.side__logo img { width: 1.75rem; height: 1.75rem; }
.side__logo .brand__logo { height: 1.625rem; }
.side__search {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: var(--ctl-h);
  padding: 0 var(--sp-2) 0 var(--sp-3); margin-bottom: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-xs);
  color: var(--muted); font-size: var(--fs-ui); text-align: left;
  transition: border-color var(--dur-rapide) var(--ease), color var(--dur-rapide) var(--ease);
}
.side__search:hover { border-color: var(--line-control); color: var(--text-2); }
.side__search span { flex: 1; }
.side__search .ic, .side__search .icon { width: 1rem; height: 1rem; }
.side__nav { display: grid; gap: 2px; }
.side__nav a, .side__btn {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--sp-9);
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--fs-ui); font-weight: 500; text-align: left;
  transition: background-color var(--dur-rapide) var(--ease), color var(--dur-rapide) var(--ease);
}
.side__nav .ic, .side__btn .ic, .side__nav .icon, .side__btn .icon { width: 1.125rem; height: 1.125rem; color: var(--muted); transition: color var(--dur-rapide) var(--ease); }
.side__nav a:hover, .side__btn:hover { background: var(--hover); color: var(--ink); }
.side__nav a:hover .ic, .side__btn:hover .ic { color: var(--text-2); }
.side__nav a[aria-current="page"], .side__foot a.side__btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.side__nav a[aria-current="page"] .ic, .side__foot a.side__btn[aria-current="page"] .ic { color: var(--accent-ink); }
.side__nav a > span:first-of-type, .side__btn > span { flex: 1; }
.side__nav a.side__sec { margin-top: var(--sp-3); font-size: var(--fs-petit); }
.side__badge {
  display: inline-grid; place-items: center;
  min-width: 1.375rem; height: 1.25rem; padding: 0 .375rem;
  border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.side__badge--discret { background: var(--chip-bg); color: var(--muted); font-weight: 600; }
.side__nav a[aria-current="page"] .side__badge--discret { background: var(--surface); }
.side__foot { display: grid; gap: 2px; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.side__foot .side__btn { font-size: var(--fs-petit); }
.side__foot kbd { flex: none; }

.mtop, .bnav { display: none; }
.mtop__logo { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--cible); margin-right: auto; color: var(--logo); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.mtop__logo .brand__logo { height: 1.5rem; }

/* Messages flash : transformés en notifications par le script de l’outil */
.flash { display: none; }

/* Écrans hors connexion (connexion, installation) */
.seul__page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--sp-6) var(--sp-4); background: var(--degrade-page), var(--bg); }
.auth { display: grid; gap: var(--sp-3); width: min(25rem, 100%); padding: var(--sp-10) var(--sp-8) var(--sp-8); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); }
.auth__logo { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); color: var(--logo); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.auth__logo .brand__logo { height: 2rem; }
.auth form { margin-top: var(--sp-3); }
/* Champ mot de passe et son bouton « Afficher » (révélé par le script), posé dans le champ */
.mdp { position: relative; }
.mdp > input { width: 100%; padding-right: 5.5rem; }
.mdp__voir { position: absolute; top: 50%; right: var(--sp-1); min-height: 2rem; padding: 0 var(--sp-3); border-radius: var(--radius-xs); color: var(--lien); font-size: var(--fs-petit); font-weight: 600; transform: translateY(-50%); }
.mdp__voir:hover { background: var(--hover); }
.mdp__voir[aria-pressed="true"] { background: var(--hover); color: var(--ink); }
.mdp__voir { display: inline-flex; align-items: center; gap: .375rem; }
.mdp__voir .ic { width: 1rem; height: 1rem; }
.mdp__voir .mdp__oeil-barre, .mdp__voir[aria-pressed="true"] .mdp__oeil { display: none; }
.mdp__voir[aria-pressed="true"] .mdp__oeil-barre { display: inline-block; }
.lien-bouton { color: var(--lien); font: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* Double authentification : clé à recopier, étapes, codes de secours */
.etapes-2fa { display: grid; gap: var(--sp-5); padding: 0; font-size: var(--fs-ui); list-style: none; }
.etapes-2fa > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); }
.etapes-2fa__num { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.ajout-2fa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-4); }
.qr { width: 10rem; height: 10rem; border: 1px solid var(--line); border-radius: var(--radius-xs); }
@media (max-width: 640px) {
  .ajout-2fa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) and (pointer: coarse) {
  .ajout-2fa .qr { order: 1; }   /* sur le téléphone même, « Ouvrir dans l'application » d'abord */
}
.appareils { display: grid; gap: var(--sp-3); padding: 0; list-style: none; }
.appareils > li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.appareils__nom { font-size: var(--fs-ui); font-weight: 600; }
.avant-tout__liste { display: grid; gap: var(--sp-3); padding: 0; list-style: none; }
.avant-tout__liste > li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-ui); }
.avant-tout__liste .ic { margin-top: .1em; color: var(--attente-ink); }
.avant-tout__liste .lien { white-space: nowrap; }   /* « La déclarer » ne se coupe pas */
/* Repli discret (« Retirer la double authentification », actions secondaires d'un contrat) : notre chevron, pas le triangle natif */
.repli > summary { display: inline-flex; align-items: center; gap: .375rem; min-height: 1.5rem; color: var(--muted); font-size: var(--fs-petit); list-style: none; cursor: pointer; }
.repli > summary::-webkit-details-marker { display: none; }
.repli[open] > summary { margin-bottom: var(--sp-3); }
.cle-2fa code, .codes-secours code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 1rem; letter-spacing: .06em; }
.cle-2fa code { display: inline-block; padding: var(--sp-1) var(--sp-2); line-height: 1.7; }
.field__aide code { white-space: nowrap; }      /* une commande ne se coupe pas à son tiret */
.duo--seul { grid-template-columns: minmax(0, 40rem); }
.codes-secours { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0; padding: 0; list-style: none; }

/* 3. En-têtes de page et grilles ------------------------------------------ */
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.phead p { margin-top: .375rem; }
.hello { display: grid; gap: .375rem; padding: var(--sp-2) 0 var(--sp-1); }
.hello__date { color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hello h1 { font-size: var(--fs-kpi); letter-spacing: -.028em; }
.hello__sub { color: var(--text-2); font-size: 1rem; }
.fhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.fhead__id { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.fhead h1 { font-size: 1.625rem; }
.fhead__id p { margin-top: var(--sp-1); }
.fhead__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.retour { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; margin-bottom: calc(var(--sp-2) * -1); color: var(--muted); font-size: var(--fs-ui); font-weight: 600; transition: color var(--dur-rapide) var(--ease); }
.retour:hover { color: var(--ink); }
.retour .ic, .retour .icon { width: 1rem; height: 1rem; transition: transform var(--dur-base) var(--ease-out); }
.retour:hover .ic, .retour:hover .icon { transform: translateX(-2px); }
.section { display: grid; gap: var(--sp-4); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.duo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-5); }
.duo--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sp-3); }
.rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); }
.rang--gauche { justify-content: flex-start; }
.perf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sp-4); }
.perf__kpis { display: grid; align-content: space-around; gap: var(--sp-4); }

/* 4. Commandes --------------------------------------------------------------- */
.icon-btn {
  position: relative;
  display: inline-grid; place-items: center; flex: none;
  width: var(--sp-9); height: var(--sp-9);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: background-color var(--dur-rapide) var(--ease), color var(--dur-rapide) var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn--sm { width: 1.875rem; height: 1.875rem; }
.icon-btn--sm .ic, .icon-btn--sm .icon { width: 1rem; height: 1rem; }
/* Lien dans une phrase : souligné, jamais distingué par la seule couleur */
.lien { color: var(--lien); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lien-trait); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color var(--dur-rapide) var(--ease); }
.lien:hover { text-decoration-color: currentColor; }
.lien-fleche { display: inline-flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: var(--sp-3); color: var(--lien); font-size: var(--fs-ui); font-weight: 600; }
.lien-fleche .ic, .lien-fleche .icon { width: .9375rem; height: .9375rem; transition: transform var(--dur-rapide) var(--ease); }
.lien-fleche:hover .ic, .lien-fleche:hover .icon { transform: translateX(3px); }

/* 5. Formulaires --------------------------------------------------------------- */
input:where([type="text"], [type="search"], [type="password"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]),
input:where(:not([type])), select, textarea {
  width: 100%;
  min-height: var(--ctl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-champ);
  font-weight: 400;
  line-height: var(--lh-ui);
  transition: border-color var(--dur-rapide) var(--ease), box-shadow var(--dur-rapide) var(--ease), background-color var(--dur-rapide) var(--ease);
}
input:where([type="text"], [type="search"], [type="password"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], :not([type])):hover,
select:hover, textarea:hover { border-color: var(--line-control-hover); }
input:where([type="text"], [type="search"], [type="password"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], :not([type])):focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px var(--halo-focus);
}
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--erreur); }
:is(input, select, textarea)[aria-invalid="true"]:focus-visible { border-color: var(--erreur); box-shadow: 0 0 0 1px var(--erreur), 0 0 0 4px var(--erreur-line); }
:is(input, select, textarea):disabled { border-color: var(--line); background-color: var(--surface-3); color: var(--muted); }
:is(input, textarea):read-only:not(:disabled, [type="checkbox"], [type="radio"]) { background-color: var(--surface-2); }
::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: calc(var(--ctl-h) * 2); padding: var(--sp-2) var(--sp-3); line-height: var(--lh-corps); resize: vertical; }
/* Flèche des listes dessinée par deux dégradés : suit la couleur du thème, sans image */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--sp-8);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.0625rem) 52%, calc(100% - .78rem) 52%;
  background-size: .29rem .29rem, .29rem .29rem;
  background-repeat: no-repeat;
}
select[multiple], select[size]:not([size="1"]) { padding: var(--sp-1); background-image: none; }
select option { background-color: var(--surface); color: var(--ink); }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; transition: opacity var(--dur-rapide) var(--ease); }
input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* Cases à cocher et boutons radio */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  display: inline-grid; place-content: center; flex: none;
  width: 1.125rem; height: 1.125rem; margin: 0;
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius-3xs);
  background: var(--surface) no-repeat center / .75rem;
  vertical-align: -.1875rem;
  cursor: pointer;
  transition: background-color var(--dur-rapide) var(--ease), border-color var(--dur-rapide) var(--ease);
}
input[type="radio"] { border-radius: 50%; }
input:is([type="checkbox"], [type="radio"]):hover { border-color: var(--line-control-hover); }
input[type="checkbox"]:checked { border-color: var(--accent); background-color: var(--accent); background-image: var(--coche); }
input[type="checkbox"]:indeterminate { border-color: var(--accent); background-color: var(--accent); background-image: var(--tiret); }
input[type="radio"]:checked { border-color: var(--accent); background-image: radial-gradient(circle closest-side, var(--accent) 0 52%, transparent 60%); background-size: 100% 100%; }
input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input:is([type="checkbox"], [type="radio"]):disabled { opacity: .5; }
/* Libellé cliquable : <label class="case"><input type="checkbox"><span>…</span></label> */
.case { display: inline-flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-ui); line-height: var(--lh-ui); cursor: pointer; }
.case input { margin-top: .0625rem; }

/* Interrupteur : <label class="switch"><input type="checkbox" role="switch"><span>…</span></label> */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-ui); cursor: pointer; }
.switch input[type="checkbox"] {
  width: 2.25rem; height: 1.25rem;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle closest-side, var(--line-control) 0 66%, transparent 74%) 0 50% / 1.0625rem 1.0625rem no-repeat, var(--surface);
  transition: background-position var(--dur-base) var(--ease-out), border-color var(--dur-rapide) var(--ease);
}
.switch input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: radial-gradient(circle closest-side, var(--on-accent) 0 66%, transparent 74%) 100% 50% / 1.0625rem 1.0625rem no-repeat, var(--accent);
}

/* Contrôle segmenté : <div class="segments" role="radiogroup"><label><input type="radio" name="v"><span>…</span></label>…</div> */
.segments { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.segments label {
  position: relative;
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: calc(var(--ctl-h-sm) - var(--sp-1));
  padding: 0 var(--sp-3);
  border-radius: var(--radius-xs);
  color: var(--text-2); font-size: var(--fs-petit); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-rapide) var(--ease), color var(--dur-rapide) var(--ease), box-shadow var(--dur-rapide) var(--ease);
}
.segments input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segments label:hover { color: var(--ink); }
.segments label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs), 0 0 0 1px var(--line); }
.segments label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.segments .ic, .segments .icon { width: 1rem; height: 1rem; }

/* Champs et groupes */
.field { display: grid; align-content: start; gap: .375rem; color: var(--ink); font-size: var(--fs-ui); font-weight: 600; }
.field > .ic, .field > .icon { display: inline-block; margin-right: .375rem; color: var(--accent-ink); vertical-align: -.1875rem; }
.field__aide { order: 1; color: var(--muted); font-size: var(--fs-petit); font-weight: 400; }   /* sous la saisie : les champs voisins restent alignés */
.field__erreur { display: flex; align-items: flex-start; gap: .375rem; color: var(--erreur-ink); font-size: var(--fs-petit); font-weight: 500; }
.field__erreur .ic, .field__erreur .icon { width: 1rem; height: 1rem; margin-top: .0625rem; }
.field-ic { position: relative; display: flex; align-items: center; }
.field-ic > .ic, .field-ic > .icon { position: absolute; left: var(--sp-3); width: 1rem; height: 1rem; color: var(--muted); pointer-events: none; }
.field-ic input { padding-left: var(--sp-9); }
.erreur { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-xs); background: var(--erreur-bg); color: var(--erreur-ink); font-size: var(--fs-ui); font-weight: 600; }
.fset { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.fset > .btn { justify-self: start; }
.fset legend { padding: 0 .375rem; font-family: var(--font-display); font-size: var(--fs-corps); font-weight: 700; letter-spacing: -.01em; }
.objs, .rep { display: grid; gap: .375rem; }
.objs__l { display: grid; gap: var(--sp-1); padding: .5625rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2); }
.rep { margin-bottom: .375rem; padding: .5625rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); }
.composer { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.composer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.toolbar .field-ic { flex: 1 1 15rem; }
.toolbar select { flex: 0 1 auto; width: auto; }
.toolbar--card { padding: var(--sp-3); }
/* Filtres d’une liste : <details class="filtres"><summary>Filtres</summary><select>…</select>…</details>.
   Sur ordinateur, le tiroir s’efface et les listes se rangent dans la barre ; au téléphone (§ 19), elles se replient. */
.filtres { display: contents; }
.filtres::details-content { display: contents; }
.filtres > summary { display: none; list-style: none; }
.filtres > summary::-webkit-details-marker { display: none; }
.filtres__n { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.filtres__chev { transition: transform var(--dur-rapide) var(--ease); }
.filtres[open] .filtres__chev { transform: rotate(180deg); }
.edition { gap: var(--sp-5); }

/* 6. Pastilles -------------------------------------------------------------- */
/* Statut du pipeline : point + libellé écrit (la couleur n’est jamais seule) */
.st {
  display: inline-flex; align-items: center; gap: .375rem;
  height: 1.5rem; padding: 0 .5625rem 0 .5rem;
  border-radius: var(--radius-pill);
  background: var(--st-bg, var(--chip-bg)); color: var(--st-ink, var(--text-2));
  font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.st__dot { width: .4375rem; height: .4375rem; flex: none; border-radius: 50%; background: var(--st, var(--muted)); }
.st--fichier { --st: var(--st-fichier); --st-bg: var(--st-fichier-bg); --st-ink: var(--st-fichier-ink); }
.st--nouveau { --st: var(--st-nouveau); --st-bg: var(--st-nouveau-bg); --st-ink: var(--st-nouveau-ink); }
.st--a_contacter { --st: var(--st-a_contacter); --st-bg: var(--st-a_contacter-bg); --st-ink: var(--st-a_contacter-ink); }
.st--contacte { --st: var(--st-contacte); --st-bg: var(--st-contacte-bg); --st-ink: var(--st-contacte-ink); }
.st--repondu { --st: var(--st-repondu); --st-bg: var(--st-repondu-bg); --st-ink: var(--st-repondu-ink); }
.st--rdv { --st: var(--st-rdv); --st-bg: var(--st-rdv-bg); --st-ink: var(--st-rdv-ink); }
.st--proposition { --st: var(--st-proposition); --st-bg: var(--st-proposition-bg); --st-ink: var(--st-proposition-ink); }
.st--signe { --st: var(--st-signe); --st-bg: var(--st-signe-bg); --st-ink: var(--st-signe-ink); }
.st--refus { --st: var(--st-refus); --st-bg: var(--st-refus-bg); --st-ink: var(--st-refus-ink); }
.st--ne_pas_contacter { --st: var(--st-ne_pas_contacter); --st-bg: var(--st-ne_pas_contacter-bg); --st-ink: var(--st-ne_pas_contacter-ink); }
.st--ecarte { --st: var(--st-ecarte); --st-bg: var(--st-ecarte-bg); --st-ink: var(--st-ecarte-ink); }
/* États hors pipeline (analyse, envoi, paiement…) */
.st--succes { --st: var(--succes); --st-bg: var(--succes-bg); --st-ink: var(--succes-ink); }
.st--attente { --st: var(--attente); --st-bg: var(--attente-bg); --st-ink: var(--attente-ink); }
.st--erreur { --st: var(--erreur); --st-bg: var(--erreur-bg); --st-ink: var(--erreur-ink); }
.st--info { --st: var(--info); --st-bg: var(--info-bg); --st-ink: var(--info-ink); }
.st.st--fichier, .stsel.st--fichier { box-shadow: inset 0 0 0 1px var(--line-strong); }
.st--fichier .st__dot, .st__dot.st--fichier { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st); }
.st__dot.st--signe { background: var(--st-signe-point); box-shadow: 0 0 0 3px var(--st-signe-halo); }

/* Sélecteur d’étape dans une ligne (même dessin que la pastille) */
.stsel {
  position: relative;
  display: inline-flex; align-items: center; gap: .375rem;
  height: 1.75rem; padding: 0 .5rem 0 .5625rem;
  border-radius: var(--radius-pill);
  background: var(--st-bg, var(--chip-bg)); color: var(--st-ink, var(--text-2));
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--dur-rapide) var(--ease), opacity var(--dur-rapide) var(--ease);
}
.stsel:hover { box-shadow: inset 0 0 0 1px var(--st); }
.stsel select { width: auto; min-height: 0; height: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; box-shadow: none; cursor: pointer; }
.stsel select:focus-visible { outline: none; box-shadow: none; }
.stsel:has(select:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.stsel .ic, .stsel .icon { width: .875rem; height: .875rem; opacity: .75; pointer-events: none; }
.stsel.is-saving { opacity: .6; }

/* Classe de prospect A / B / C / ? : sans modificateur, le dessin de C, le plus discret */
.cl {
  display: inline-grid; place-items: center; flex: none;
  width: 1.625rem; height: 1.625rem;
  border: 1px solid var(--cl-c-line);
  border-radius: var(--radius-2xs);
  background: var(--cl-c-bg); color: var(--cl-c-ink);
  font-family: var(--font-display); font-size: var(--fs-petit); font-weight: 700; line-height: 1;
}
.cl--a { border-color: var(--cl-a-bg); background: var(--cl-a-bg); color: var(--cl-a-ink); }
.cl--b { border-color: var(--cl-b-line); background: var(--cl-b-bg); color: var(--cl-b-ink); }
.cl--n { border-style: dashed; background: transparent; color: var(--muted); }
.cl--xs { width: 1.25rem; height: 1.25rem; font-size: .6875rem; border-radius: var(--radius-3xs); }
.cl--sm { width: 1.5rem; height: 1.5rem; font-size: var(--fs-xs); }
.cl--lg { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; border-radius: var(--radius-md); }

/* Jauge de score (SVG, sans style en ligne) */
.ring { position: relative; display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.2; }
.ring__bg { stroke: var(--chip-bg); }
.ring__val { stroke: var(--accent); stroke-linecap: round; }
.ring--pre .ring__val { stroke: var(--muted); }
.ring__txt { position: relative; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-petit); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ring--lg { width: 4rem; height: 4rem; }
.ring--lg .ring__txt { font-size: 1.125rem; }
.score-pill { display: inline-block; min-width: 2.25rem; padding: .125rem var(--sp-2); border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--ink); font-size: var(--fs-petit); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.score-pill .muted { font-size: var(--fs-xs); font-weight: 500; }
.score-pill--pre { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.score-pill--gros { padding: .375rem var(--sp-3); font-size: 1rem; }

/* Étiquettes */
.tag { display: inline-flex; align-items: center; gap: var(--sp-1); height: 1.375rem; padding: 0 .4375rem; border-radius: var(--radius-2xs); background: var(--chip-bg); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.tag .ic, .tag .icon { width: .75rem; height: .75rem; stroke-width: 2; }
.tag--warn, .tag--attente { background: var(--attente-bg); color: var(--attente-ink); }
.tag--danger, .tag--erreur { background: var(--erreur-bg); color: var(--erreur-ink); }
.tag--succes { background: var(--succes-bg); color: var(--succes-ink); }
.tag--info { background: var(--info-bg); color: var(--info-ink); }

/* Signaux observés */
.sigs { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--sp-4); }
.sig { display: inline-flex; align-items: center; gap: .375rem; height: 1.75rem; padding: 0 .625rem; border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--muted); font-size: var(--fs-petit); font-weight: 600; }
.sig .ic, .sig .icon { width: .875rem; height: .875rem; }
.sig--bon { background: var(--succes-bg); color: var(--succes-ink); }

/* Onglets */
.tabs { display: flex; gap: var(--sp-1); margin-bottom: calc(var(--sp-2) * -1); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .625rem var(--sp-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted); font-size: var(--fs-ui); font-weight: 600; white-space: nowrap;
  transition: color var(--dur-rapide) var(--ease), border-color var(--dur-rapide) var(--ease);
}
.tab:hover { border-bottom-color: var(--line-strong); color: var(--ink); }
.tab:focus-visible { outline-offset: -3px; }   /* la rangée défile : l’anneau de focus reste à l’intérieur */
.tab[aria-current="true"], .tab[aria-current="page"], .tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.tab__n { padding: 1px .4375rem; border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.tab[aria-current="true"] .tab__n, .tab[aria-current="page"] .tab__n, .tab[aria-selected="true"] .tab__n { background: var(--accent-soft); color: var(--accent-ink); }

/* 7. Tableaux -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table-wrap.card { padding: 0; }
/* Tableau long dans sa propre zone de défilement : l’en-tête reste visible */
.table-wrap--haut { max-height: min(70vh, 45rem); overflow: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); }
.table th {
  position: sticky; top: 0; z-index: 1;
  padding: .625rem var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-label); text-align: left; text-transform: uppercase; white-space: nowrap;
}
.card:not(.table-wrap) .table th { padding-top: var(--sp-1); background: var(--surface); }
.table td { padding: .6875rem var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-rapide) var(--ease); }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr[data-href] { cursor: pointer; }
.table tr.is-selected, .table tr[aria-selected="true"] { background: var(--selected); }
.table tr.is-selected:hover, .table tr[aria-selected="true"]:hover { background: var(--accent-soft-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .check { width: var(--cible); padding-right: 0; }
.table--compact th, .table--compact td { padding: .5625rem .625rem; }
.table--compact td a { font-weight: 600; }
.table--fichier td:nth-child(2) { min-width: 15rem; }
/* Liste des prospects : le nom se lit d’un tenant, l’e-mail est tronqué (adresse complète au survol), la date reste entière */
.table--prospects :is(th, td) { padding-inline: var(--sp-3); }
.table--prospects .cellnom { min-width: 14rem; }
.table--prospects .tronque { display: block; max-width: 11rem; }
.table--prospects .cell--activite { white-space: nowrap; }
.table th button { display: inline-flex; align-items: center; gap: var(--sp-1); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.table th[aria-sort] { color: var(--ink); }
.cellnom { display: flex; align-items: center; gap: var(--sp-3); min-width: 10rem; }
.cellnom__nom { color: var(--ink); font-weight: 600; }
.cellnom__nom:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--lien-trait); text-underline-offset: .2em; }
.cellnom__sub { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-petit); }
.classes { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.classes .cl { margin-left: var(--sp-1); }

/* Barre d’actions groupées : îlot vert flottant (voir jetons 2.5) */
.lot {
  position: fixed; right: 0; bottom: var(--sp-6); left: var(--side); z-index: var(--z-lot);
  display: flex; align-items: center; gap: var(--sp-2);
  width: fit-content; max-width: calc(100% - var(--side) - var(--sp-8));
  margin-inline: auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--green); color: var(--ink);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-ui);
  animation: monte var(--dur-base) var(--ease-out);
}
.lot[hidden] { display: none; }
.lot strong { color: var(--mint); font-variant-numeric: tabular-nums; }
.lot .btn { --btn-shadow: none; }
.lot select { width: auto; min-height: var(--ctl-h-sm); font-size: var(--fs-petit); }
.lot .icon-btn { width: var(--ctl-h-sm); height: var(--ctl-h-sm); color: inherit; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }

/* 8. Retours -------------------------------------------------------------- */
/* Avis : <div class="notice notice--succes" role="status"><svg class="icon">…</svg><div><p class="notice__titre">…</p><p>…</p></div></div> */
.notice {
  --n-bg: var(--info-bg); --n-ink: var(--info-ink); --n-accent: var(--info); --n-line: var(--info-line);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--n-line);
  border-radius: var(--radius-md);
  position: relative;
  background: var(--n-bg); color: var(--n-ink);
  font-size: var(--fs-ui); line-height: var(--lh-corps);
}
.notice::before, .alerte::before { content: ""; position: absolute; top: var(--sp-2); bottom: var(--sp-2); left: -1px; width: 3px; border-radius: var(--radius-pill); background: var(--n-accent); }
.alerte::before { --n-accent: var(--erreur); }
.notice > .icon, .notice > .ic { width: 1.125rem; height: 1.125rem; margin-top: .1875rem; color: var(--n-accent); }
.notice__titre { font-weight: 600; }
.notice__corps > * + * { margin-top: var(--sp-1); }
.notice__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.notice .icon-btn { width: 1.75rem; height: 1.75rem; margin: -.125rem -.375rem 0 0; color: inherit; }
.notice--succes { --n-bg: var(--succes-bg); --n-ink: var(--succes-ink); --n-accent: var(--succes); --n-line: var(--succes-line); }
.notice--attente { --n-bg: var(--attente-bg); --n-ink: var(--attente-ink); --n-accent: var(--attente); --n-line: var(--attente-line); }
.notice--erreur { --n-bg: var(--erreur-bg); --n-ink: var(--erreur-ink); --n-accent: var(--erreur); --n-line: var(--erreur-line); }
.notice--info { --n-bg: var(--info-bg); --n-ink: var(--info-ink); --n-accent: var(--info); --n-line: var(--info-line); }

/* Bandeau d’information de l’outil */
.info {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--text-2); font-size: var(--fs-ui);
}
.info p { flex: 1 1 20rem; line-height: var(--lh-corps); }
.info strong { color: var(--ink); }
.info__ic { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-ink); }
.info__ic .ic, .info__ic .icon { width: 1.0625rem; height: 1.0625rem; }
.info__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; padding-left: calc(2rem + var(--sp-4)); }
.info--ok { border-color: var(--succes-line); }
.info--ok .info__ic { background: var(--succes-bg); color: var(--succes-ink); }
/* Texte et <strong> coulent comme dans un paragraphe ; le pictogramme est en retrait */
.alerte {
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 1.125rem + var(--sp-3));
  border: 1px solid var(--erreur-line); border-radius: var(--radius-md);
  background: var(--erreur-bg); color: var(--erreur-ink);
  font-size: var(--fs-ui); font-weight: 600;
}
.alerte > .ic, .alerte > .icon { position: absolute; top: calc(var(--sp-3) + .1875rem); left: var(--sp-4); width: 1.125rem; height: 1.125rem; color: var(--erreur); }

/* État vide */
.empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-14) var(--sp-6); text-align: center; }
.empty__ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--sp-2); border-radius: 50%; background: var(--degrade-bulle); box-shadow: var(--shadow-bubble); color: var(--accent-ink); }
.empty__ic .ic, .empty__ic .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.empty :is(h1, h2, h3) { font-family: var(--font-display); font-size: var(--fs-section); }
.empty p { max-width: 32rem; }

/* Rendez-vous (réservations Cal.com) : fiche, page « Aujourd'hui » */
.rdv-liste { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.rdv { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.rdv:first-child { border-top: 0; padding-top: 0; }
.rdv__quand { display: grid; align-content: start; gap: 2px; }
.rdv__jour { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.rdv__heure { font-family: var(--font-display); font-size: var(--fs-section); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rdv__corps { display: grid; gap: var(--sp-2); min-width: 0; }
.rdv__titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: 600; }
.rdv__titre a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.rdv__titre a:hover { text-decoration-color: currentColor; }
.rdv__tache, .rdv__issue { color: var(--text-2); font-size: var(--fs-ui); }
.rdv__corps > .muted > .ic--xs:first-child { margin: 0 .3125rem 0 0; }
.rdv__brief { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-ui); }
.rdv__brief summary { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; cursor: pointer; }
.rdv__brief summary .ic { width: 1rem; height: 1rem; color: var(--accent-ink); }
.rdv__brief h4 { margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.rdv__brief p, .rdv__brief ul { margin-top: var(--sp-2); }
.rdv__brief ul { padding-left: var(--sp-5); list-style: disc; }
.rdv__brief li + li { margin-top: var(--sp-1); }
.rdv--compact { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; }
.rdv-jour { border-color: var(--accent-line); background: var(--degrade-focus); }

/* Messages à rattacher */
.rattache-liste { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.rattache-msg { display: grid; gap: var(--sp-4); }
.rattache-msg__tete { display: grid; gap: var(--sp-2); justify-items: start; }
.rattache-msg__resume { font-weight: 600; }
.rattache-msg__choix { display: grid; gap: var(--sp-3); }
.rattache-msg__etiquette { font-size: var(--fs-ui); font-weight: 600; }
.rattache-msg__suggestions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rattache-msg__suggestions form { display: contents; }
.rattache-msg__lieu { font-weight: 500; opacity: .8; }
.rattache-msg__cherche { display: grid; gap: var(--sp-2); max-width: 32rem; }
.rattache-msg__autre summary { color: var(--muted); font-size: var(--fs-petit); cursor: pointer; }
.rattache-msg__autre form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-top: var(--sp-3); }
.rattache-msg__creer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .rdv { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

/* Squelettes de chargement (le reflet ne tourne que pendant le chargement) */
.squelette {
  display: block; height: 1em;
  border-radius: var(--radius-2xs);
  background: var(--squelette) linear-gradient(90deg, transparent 0%, var(--squelette-reflet) 50%, transparent 100%) no-repeat;
  background-size: 40% 100%; background-position: -60% 0;
  animation: reflet var(--dur-reflet) var(--ease-in-out) infinite;
}
.squelette--texte { height: .75rem; margin: .375rem 0; }
.squelette--titre { width: 55%; height: 1.25rem; }
.squelette--cercle { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.squelette--bloc { height: 6rem; border-radius: var(--radius-md); }

/* Barres de progression : <div class="progression"><span data-w="40"></span></div> ou <progress class="progression"> */
.progression { display: block; width: 100%; height: .5rem; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--accent); }
.progression > span { display: block; width: var(--w, 0); height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-barre) var(--ease-out); }
progress.progression { appearance: none; -webkit-appearance: none; }
progress.progression::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--surface-3); }
progress.progression::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--accent); }
progress.progression::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--accent); }
.progression--menthe > span { background: linear-gradient(90deg, var(--mint) 0%, var(--mint-bright) 100%); }

/* Indicateur de chargement en ligne */
.spin { display: inline-block; flex: none; width: .875rem; height: .875rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; vertical-align: -.125em; animation: tourne var(--dur-rotation) linear infinite; }

/* Infobulle (placée par le script) */
.tip {
  position: absolute; z-index: var(--z-infobulle);
  max-width: 17.5rem; padding: .375rem .625rem;
  border-radius: var(--radius-xs);
  background: var(--green); color: var(--ink);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-petit); font-weight: 500; line-height: var(--lh-ui);
  pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-rapide) var(--ease), transform var(--dur-rapide) var(--ease);
}
.tip--on { opacity: 1; transform: none; }
.tip--on.tip--survol { pointer-events: auto; }   /* information introuvable ailleurs : on peut la survoler (WCAG 1.4.13) */

/* Notifications (avec « Annuler ») */
.toasts { position: fixed; right: 0; bottom: var(--sp-6); left: var(--side); z-index: var(--z-toast); display: grid; justify-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); pointer-events: none; }
body:has(.tcard) .toasts { bottom: 6.875rem; }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--cible); max-width: min(35rem, calc(100vw - var(--sp-8)));
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--green); color: var(--ink);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-ui); font-weight: 500;
  pointer-events: auto;
  animation: monte var(--dur-base) var(--ease-out);
}
.toast > span { flex: 1; }
.toast .ic, .toast .icon { width: 1.125rem; height: 1.125rem; color: var(--succes); }
.toast--erreur .ic, .toast--erreur .icon { color: var(--erreur-ink); }
.toast--erreur { border-left: 4px solid var(--erreur-ink); }     /* une erreur se distingue au premier regard */
.toast--info .ic, .toast--info .icon { color: var(--mint); }
.toast button { min-height: 1.875rem; padding: 0 var(--sp-3); border-radius: var(--radius-xs); background: var(--hover); color: var(--mint); font-size: var(--fs-petit); font-weight: 700; }
.toast button:hover { background: var(--press); }
.toast.is-out { animation: descend var(--dur-base) var(--ease) forwards; }

/* 9. Pipeline (kanban) ------------------------------------------------------- */
/* Colonnes d’au moins 15rem, pour des cartes lisibles ; une colonne vide se fait étroite. Quand tout ne tient pas,
   le kanban défile et un fondu l’annonce (§ 18). */
.board { display: flex; align-items: flex-start; gap: var(--sp-3); padding-bottom: var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; }
.board > .col { flex: 1 0 15rem; min-width: 0; }
.board > .col:not(:has(.kcard)) { flex: .5 0 8.5rem; }
.col { display: flex; flex-direction: column; min-height: 15rem; border-radius: var(--radius); background: var(--surface-3); scroll-snap-align: start; transition: background-color var(--dur-rapide) var(--ease), box-shadow var(--dur-rapide) var(--ease); }
.col__head { display: flex; align-items: center; gap: .5625rem; padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4); }
.col__head .st__dot { width: .5625rem; height: .5625rem; }
.col__head :is(h2, h3) { flex: 1; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0; }
.col__count { color: var(--muted); font-size: var(--fs-petit); font-weight: 600; font-variant-numeric: tabular-nums; }
.col__body { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; align-content: start; gap: var(--sp-2); min-height: 7.5rem; padding: 0 var(--sp-2) var(--sp-2); border-radius: var(--radius-md); }
.col__empty { display: none; padding: var(--sp-4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--muted); font-size: var(--fs-petit); text-align: center; }
.col__body:not(:has(.kcard)) .col__empty { display: block; }
.col.is-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.board__foot { text-align: center; }
.kcard {
  display: grid; gap: .375rem;
  padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: grab;
  transition: box-shadow var(--dur-rapide) var(--ease), border-color var(--dur-rapide) var(--ease), transform var(--dur-rapide) var(--ease), opacity var(--dur-rapide) var(--ease);
}
.kcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.kcard:active { cursor: grabbing; }
.kcard.is-dragging { opacity: .5; transform: rotate(1.5deg); }
.kcard.is-moved { animation: pose var(--dur-lent) var(--ease-out); }
.kcard__top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.kcard__nom { flex: 1; min-width: 0; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.kcard__nom:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--lien-trait); text-underline-offset: .2em; }
.kcard__score { flex: none; padding: 0 .375rem; border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.kcard__foot .kcard__score { margin-left: auto; }   /* colonnes étroites : le score descend au pied, le nom garde la largeur */
.kcard__score + .kcard__move { margin-left: 0; }
.kcard__sub { color: var(--muted); font-size: var(--fs-xs); }
.kcard__rappel { display: flex; }
.kcard__foot { display: flex; align-items: center; gap: .375rem; margin-top: 2px; }
.kcard__age { display: inline-flex; align-items: center; gap: .1875rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.kcard__age .ic, .kcard__age .icon { width: .75rem; height: .75rem; }
.kcard__move { position: relative; display: grid; place-items: center; width: var(--ctl-h-xs); height: var(--ctl-h-xs); margin-left: auto; border-radius: var(--radius-2xs); color: var(--muted); transition: background-color var(--dur-rapide) var(--ease), color var(--dur-rapide) var(--ease); }
.kcard__move:hover { background: var(--hover); color: var(--ink); }
.kcard__move select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.kcard__move:has(select:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.kcard__move .ic, .kcard__move .icon { width: 1rem; height: 1rem; pointer-events: none; }

/* 10. Mode tri ------------------------------------------------------------- */
.tri { display: grid; gap: var(--sp-5); width: 100%; max-width: 57.5rem; margin: 0 auto; }
.tri__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.tri__keys { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.tri__keys kbd { margin-left: .375rem; }
.tri__stage { position: relative; }
.tcard { display: grid; gap: var(--sp-6); padding: var(--sp-7); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.tcard.is-sortie-gauche { animation: sortGauche var(--dur-moyen) var(--ease) forwards; }
.tcard.is-sortie-droite { animation: sortDroite var(--dur-moyen) var(--ease) forwards; }
.tcard.is-sortie-bas { animation: sortBas var(--dur-moyen) var(--ease) forwards; }
.tcard.is-entree { animation: entree var(--dur-moyen) var(--ease-out); }
.tcard__head { display: flex; align-items: center; gap: var(--sp-4); }
.tcard__titre { flex: 1; min-width: 0; }
.tcard__titre :is(h2, h3) { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.022em; }
.tcard__titre p { margin-top: var(--sp-1); }
.tcard__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-7); }
.tcard h3:not([class]), .fiche h3:not([class]) { margin-bottom: .625rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.tcard h3:not([class]):not(:first-child) { margin-top: var(--sp-5); }
/* Actions toujours à portée : collées au bas de l’écran tant que la carte défile */
.tcard__actions {
  position: sticky; bottom: 0; z-index: var(--z-collant);
  display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .625rem;
  margin: 0 calc(var(--sp-7) * -1) calc(var(--sp-7) * -1);
  padding: var(--sp-4) var(--sp-7) var(--sp-5);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); }
.fact { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); }
.fact__label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.fact__val { font-size: var(--fs-corps); font-weight: 600; }
.tri__vide { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-16) var(--sp-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.tri__vide :is(h2, h3) { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }
.tri__vide-ic { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--degrade-bulle); box-shadow: var(--shadow-bubble); color: var(--accent-ink); }
.tri__vide-ic .ic, .tri__vide-ic .icon { width: 1.75rem; height: 1.75rem; }

/* 11. Fiche prospect ------------------------------------------------------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 23.75rem; align-items: start; gap: var(--sp-5); }
.fiche__main, .fiche__side { display: grid; gap: var(--sp-5); }
.fiche__side { position: sticky; top: var(--sp-5); }
.stepper-card { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
/* 8 px de marge dans la zone qui défile : le halo de l’étape actuelle et l’anneau de focus ne sont plus rognés */
.stepper { display: flex; align-items: center; margin: calc(var(--sp-2) * -1); padding: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.stepper__nouveau { flex: none; margin-right: var(--sp-4); }
.stepper__step { position: relative; flex: 1; min-width: 7.5rem; }
.stepper__step:not(:last-child)::after { content: ""; position: absolute; top: .9375rem; left: calc(50% + 1.125rem); right: calc(-50% + 1.125rem); height: 2px; border-radius: var(--radius-pill); background: var(--line-strong); }
.stepper__step--fait::after { background: var(--accent) !important; }
.stepper__step button { display: grid; justify-items: center; gap: .375rem; width: 100%; padding: 0 var(--sp-1); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-petit); font-weight: 600; }
.stepper__step button:hover { color: var(--ink); }
.stepper__step button:hover .stepper__dot { border-color: var(--accent); }
.stepper__dot { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--on-accent); transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.stepper__dot .ic, .stepper__dot .icon { width: 1rem; height: 1rem; stroke-width: 3; }
.stepper__step--fait .stepper__dot { border-color: var(--accent); background: var(--accent); }
.stepper__step--fait button { color: var(--text-2); }
.stepper__step--actuel .stepper__dot { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.stepper__step--actuel .stepper__dot::after { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: var(--accent); }
.stepper__step--actuel button { color: var(--ink); font-weight: 700; }
/* Prospect sorti du parcours : la frise s’efface, les libellés restent lisibles */
.stepper--sorti .stepper__dot, .stepper--sorti .stepper__step::after { opacity: .45; }
.stepper__sorties { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; padding-top: var(--sp-3); border-top: 1px solid var(--line); }

.timeline { display: grid; }
.tl { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--sp-3); padding-bottom: var(--sp-4); }
.tl:not(:last-child)::before { content: ""; position: absolute; left: .8125rem; top: 1.875rem; bottom: .125rem; width: 2px; border-radius: var(--radius-pill); background: var(--line); }
.tl__dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--chip-bg); color: var(--muted); }
.tl__dot .ic, .tl__dot .icon { width: .875rem; height: .875rem; }
.tl--statut .tl__dot { background: var(--accent-soft); color: var(--accent-ink); }
.tl--note .tl__dot { background: var(--attente-bg); color: var(--attente-ink); }
.tl--appel .tl__dot { background: var(--succes-bg); color: var(--succes-ink); }
.tl--origine .tl__dot { background: var(--info-bg); color: var(--info-ink); }
.tl__body { min-width: 0; padding-top: var(--sp-1); }
.tl__titre { font-size: var(--fs-ui); font-weight: 600; }
.tl__txt { margin-top: var(--sp-1); padding: .625rem var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.tl__meta { margin-top: .1875rem; color: var(--muted); font-size: var(--fs-xs); }
.tl__plie { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-1); }
.tl__plie > summary { order: 2; display: grid; justify-items: start; gap: var(--sp-1); list-style: none; cursor: pointer; }
.tl__plie .tl__txt { margin-top: 0; }
.tl__apercu { padding: .625rem var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.tl__bascule { display: inline-flex; align-items: center; gap: .25rem; border-radius: var(--radius-3xs); color: var(--lien); font-size: var(--fs-petit); font-weight: 600; }
.tl__bascule .deplier { width: .875rem; height: .875rem; }
.tl__plie[open] .tl__apercu, .tl__plie[open] .tl__plus, .tl__plie:not([open]) .tl__moins { display: none; }
.tl__vp { display: grid; gap: .125rem; }
.tl__vp dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.tl__vp dd + dt { margin-top: var(--sp-2); }
.tl__vp dd { color: var(--ink-soft); }
.tl-suite > summary { margin: 0 0 var(--sp-3) calc(1.75rem + var(--sp-3)); color: var(--lien); font-size: var(--fs-petit); font-weight: 600; cursor: pointer; }
.tl__meta a { color: var(--lien); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lien-trait); text-underline-offset: .2em; }
.tl.is-new { animation: entree var(--dur-moyen) var(--ease-out); }

.why { display: grid; gap: .4375rem; }
.why li { display: flex; align-items: baseline; gap: .625rem; color: var(--muted); font-size: var(--fs-ui); line-height: 1.45; }
.why li:not(.why--plus)::before { content: ""; flex: none; width: 2.125rem; }
.why--plus { color: var(--ink) !important; }
.why__pts { flex: none; width: 2.125rem; color: var(--succes-ink); font-size: var(--fs-petit); font-weight: 700; font-variant-numeric: tabular-nums; }
.contact { display: grid; gap: .625rem; }
.contact li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--fs-ui); overflow-wrap: anywhere; }
.contact .ic, .contact .icon { width: 1rem; height: 1rem; margin-top: .125rem; color: var(--muted); }
.contact a { color: var(--lien); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lien-trait); text-underline-offset: .2em; }
.contact a:hover { text-decoration-color: currentColor; }
.angles, .excl { display: grid; gap: var(--sp-2); }
.angles li, .excl li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--fs-ui); }
.angles .ic, .angles .icon, .excl .ic, .excl .icon { width: 1rem; height: 1rem; margin-top: .125rem; }
.angles .ic, .angles .icon { color: var(--accent-ink); }
.excl .ic, .excl .icon { color: var(--muted); }
.vp { display: grid; gap: var(--sp-1); }
.vp dd + dt { margin-top: var(--sp-3); }
.vp dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.vp dd { color: var(--ink); line-height: var(--lh-corps); }
.dl { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: .5625rem var(--sp-3); font-size: var(--fs-ui); }
.dl dt { color: var(--muted); }
.dl dd { font-weight: 600; overflow-wrap: anywhere; }
.rappel__val { color: var(--text-2); font-size: var(--fs-ui); font-weight: 600; }
.scripts { display: grid; gap: .625rem; }
.script-tuile {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: .8125rem var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-2); color: inherit;
  transition: border-color var(--dur-rapide) var(--ease), background-color var(--dur-rapide) var(--ease), transform var(--dur-rapide) var(--ease);
}
.script-tuile:hover { border-color: var(--accent-line); background: var(--hover); transform: translateX(2px); }
.script-tuile__n { display: grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-size: var(--fs-corps); font-weight: 700; }
.script-tuile__txt { display: grid; flex: 1; gap: 2px; min-width: 0; }
.script-tuile__txt strong { font-size: var(--fs-corps); }
.script-tuile__go { color: var(--muted); }

/* 12. Tableau de bord ------------------------------------------------------ */
/* 2 × 2 : à quatre colonnes, les noms des mini-listes étaient tronqués */
.todo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.todo__card { display: flex; flex-direction: column; gap: .375rem; }
.todo__card--focus { border-color: var(--accent-line); background: var(--degrade-focus), var(--surface); }
.todo__head { display: flex; align-items: center; gap: .625rem; margin-bottom: .375rem; }
.todo__head :is(h2, h3) { flex: 1; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0; }
.todo__count { color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.todo__ic { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-xs); }
.todo__ic .ic, .todo__ic .icon { width: 1.0625rem; height: 1.0625rem; }
.todo__ic--brand { background: var(--accent); color: var(--on-accent); }
.todo__ic--warn { background: var(--attente-bg); color: var(--attente-ink); }
.todo__ic--info { background: var(--info-bg); color: var(--info-ink); }
.todo__ic--ok { background: var(--succes-bg); color: var(--succes-ink); }
.todo__ic--neutre { background: var(--chip-bg); color: var(--text-2); }
.todo__big { font-family: var(--font-display); font-size: var(--fs-kpi-lg); font-weight: 700; line-height: 1; letter-spacing: var(--ls-kpi); font-variant-numeric: tabular-nums; }
.todo__empty { color: var(--text-2); font-weight: 600; }
.todo__cta { align-self: flex-start; margin-top: auto; }
.todo__card--focus .todo__cta { margin-top: var(--sp-3); }
.mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 calc(var(--sp-2) * -1); }
.mini a { display: flex; align-items: center; gap: .5625rem; padding: .375rem var(--sp-2); border-radius: var(--radius-xs); transition: background-color var(--dur-rapide) var(--ease); }
.mini a:hover { background: var(--hover); }
.mini__nom { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-ui); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mini__entete { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: -.125rem; padding-left: calc(1.25rem + .5625rem); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.mini__meta { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi { display: grid; gap: 2px; }
.kpi + .kpi { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.kpi__label { color: var(--muted); font-size: var(--fs-petit); font-weight: 500; }
.kpi__val { font-family: var(--font-display); font-size: var(--fs-kpi); font-weight: 700; line-height: 1.1; letter-spacing: var(--ls-kpi); font-variant-numeric: tabular-nums; }
.kpi__sub { color: var(--muted); font-size: var(--fs-xs); }
.kpi__semaine { color: var(--text-2); font-size: var(--fs-petit); line-height: var(--lh-corps); }
.kpi__semaine strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi__evol { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi__evol--hausse { color: var(--succes-ink); }
.kpi__evol--baisse { color: var(--erreur-ink); }
.kpi__evol .ic, .kpi__evol .icon { width: .875rem; height: .875rem; stroke-width: 2.25; }
/* Entonnoir : une série, barres fines, bouts arrondis, valeurs écrites */
.funnel { display: grid; gap: var(--sp-3); }
.funnel__row { display: grid; grid-template-columns: 5.125rem minmax(0, 1fr) 2.75rem 3rem; align-items: center; gap: var(--sp-3); border-radius: var(--radius-xs); outline-offset: 4px; cursor: default; }
.funnel__label { color: var(--text-2); font-size: var(--fs-petit); font-weight: 600; }
.funnel__track { height: .625rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); }
.funnel__bar { display: block; width: var(--w, 0); height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dur-barre) var(--ease-out), background-color var(--dur-rapide) var(--ease); }
.funnel__row:hover .funnel__bar, .funnel__row:focus-visible .funnel__bar { background: var(--accent-hover); }
.funnel__val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.funnel__conv { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.page--appels .funnel__row { grid-template-columns: 10.625rem minmax(0, 1fr) 2.75rem 0; }
.feed { display: grid; gap: var(--sp-3); }
.feed__item { display: grid; grid-template-columns: .625rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-ui); }
.feed__item p { position: relative; min-width: 0; }   /* relative : le texte réservé aux lecteurs d’écran reste dans la ligne */
.feed__item a { font-weight: 600; }
.feed__nom, .feed__quoi { display: block; }
.feed__quoi { color: var(--muted); }
.feed__item a:hover { color: var(--accent-ink); }
.feed__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); transform: translateY(-1px); }
.feed__item--statut .feed__dot { background: var(--accent); }
.feed__item--note .feed__dot { background: var(--attente); }
.feed__item--appel .feed__dot { background: var(--succes); }
.feed__time { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.fichier-strip { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); transition: border-color var(--dur-rapide) var(--ease), box-shadow var(--dur-rapide) var(--ease); }
.fichier-strip:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.fichier-strip__txt { display: grid; flex: 1; gap: 2px; min-width: 0; font-size: var(--fs-ui); }
.fichier-strip__txt .muted { overflow: hidden; font-size: var(--fs-petit); text-overflow: ellipsis; white-space: nowrap; }
.fichier-strip .lien-fleche { margin: 0; padding: 0; white-space: nowrap; }
.avance { display: grid; gap: .375rem; width: 100%; padding-left: calc(2rem + var(--sp-4)); }
.avance__barre { height: .5rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); }
.avance__barre span { display: block; width: var(--w, 0); height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-barre) var(--ease-out); }

/* 13. Surcouches ----------------------------------------------------------- */
dialog { max-width: none; max-height: none; padding: 0; border: 0; background: none; color: var(--ink); }
dialog::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* Palette de recherche (Ctrl K) */
.palette { position: fixed; inset: 12vh 0 auto; width: min(40rem, calc(100% - var(--sp-8))); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); }
.palette[open] { animation: pop var(--dur-base) var(--ease-out); }
.palette__field { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); transition: box-shadow var(--dur-rapide) var(--ease); }
.palette__field:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.palette__field .ic, .palette__field .icon { width: 1.25rem; height: 1.25rem; color: var(--muted); }
.palette__field input { flex: 1; width: auto; min-width: 0; height: var(--sp-14); min-height: 0; padding: 0; border: 0; background: none; font-size: 1.0625rem; }
.palette__field input:focus-visible { box-shadow: none; }
.palette__list { max-height: 50vh; padding: var(--sp-2); overflow-y: auto; }
.palette__group { padding: var(--sp-3) .625rem .375rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.palette__item { display: flex; align-items: center; gap: var(--sp-3); padding: .5625rem .625rem; border-radius: var(--radius-sm); font-size: var(--fs-ui); cursor: pointer; }
.palette__item[aria-selected="true"] { background: var(--accent-soft); }
.palette__item .ic, .palette__item .icon { color: var(--muted); }
.palette__item[aria-selected="true"] .ic, .palette__item[aria-selected="true"] .icon { color: var(--accent-ink); }
.palette__nom { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.palette__sous { color: var(--muted); font-size: var(--fs-petit); white-space: nowrap; }
.palette__vide { padding: var(--sp-5) .625rem; color: var(--muted); text-align: center; }
.palette__foot { display: flex; gap: var(--sp-4); margin: 0; padding: .625rem var(--sp-4); border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); }
.palette__foot span { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* Aide des raccourcis */
.aide, .dialogue { position: fixed; inset: 0; height: fit-content; max-height: calc(100% - var(--sp-8)); margin: auto; padding: var(--sp-6); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); }
.aide { width: min(47.5rem, calc(100% - var(--sp-8))); }
.aide[open], .dialogue[open] { animation: pop var(--dur-base) var(--ease-out); }
.aide__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.aide__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.aide h3 { margin-bottom: .625rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.aide dl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-ui); }
.aide dt { white-space: nowrap; }
/* Dialogue de confirmation */
.dialogue { width: min(30rem, calc(100% - var(--sp-8))); }
.dialogue__corps { margin-top: var(--sp-2); color: var(--text-2); }
.dialogue__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-6); }
/* Menu déroulant : <div class="menu-ancre"><button aria-expanded>…</button><div class="menu" role="menu">…</div></div> */
.menu-ancre { position: relative; display: inline-block; }
.menu { position: absolute; top: calc(100% + var(--sp-1)); left: 0; z-index: var(--z-menu); display: grid; gap: 1px; min-width: 13rem; padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-pop); transform-origin: top left; animation: pop var(--dur-rapide) var(--ease-out); }
.menu--droite { right: 0; left: auto; transform-origin: top right; }
.menu--haut { top: auto; bottom: calc(100% + var(--sp-2)); transform-origin: bottom left; }
.menu--haut.menu--droite { transform-origin: bottom right; }
.menu__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.menu__compte { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.menu[hidden] { display: none; }
.menu__item { position: relative; display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--sp-9); padding: 0 var(--sp-3); border-radius: var(--radius-xs); color: var(--ink); font-size: var(--fs-ui); text-align: left; }
.menu__item:hover { background: var(--hover); }
.menu__item:focus-visible { outline: none; background: var(--hover); box-shadow: inset 0 0 0 2px var(--focus); }
.menu__item .ic, .menu__item .icon { width: 1rem; height: 1rem; color: var(--muted); }
.menu__item kbd { margin-left: auto; }
.menu__item--danger, .menu__item--danger .ic, .menu__item--danger .icon { color: var(--erreur-ink); }
.menu__sep { height: 1px; margin: var(--sp-1) 0; background: var(--line); }
.menu__titre { padding: var(--sp-2) var(--sp-3) var(--sp-1); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }

/* 14. Mode appel ----------------------------------------------------------- */
.shead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.shead__id { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.shead__num { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-btn-primary); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.shead h1 { font-size: 1.375rem; letter-spacing: -.015em; }
.shead__sous { color: var(--muted); font-weight: 600; }
.shead__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.appel-vue { display: grid; grid-template-columns: minmax(0, 1fr) 19.75rem; align-items: start; gap: var(--sp-5); }
.script { display: grid; gap: var(--sp-4); }
.sbloc { padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.sbloc__head { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); align-items: center; gap: var(--sp-1) .625rem; margin-bottom: var(--sp-3); }
.sbloc__n { display: grid; place-items: center; grid-row: span 2; align-self: start; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--chip-bg); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.sbloc__head :is(h2, h3) { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: var(--ls-carte); }
.sbloc__head :is(h2, h3) :is(.ic, .icon) { width: 1.0625rem; height: 1.0625rem; color: var(--accent-ink); }
.sbloc__aide { grid-column: 2; color: var(--muted); font-size: var(--fs-petit); }
.sbloc--objectif { border-color: var(--accent-line); background: var(--degrade-focus), var(--surface); }   /* l’objectif ressort sans filet latéral */
.sbloc p + p { margin-top: .625rem; }
.sbloc .txt { color: var(--text-2); line-height: 1.65; }
/* Ce qui se dit mot à mot se distingue de ce qu’on fait */
.dit { padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.7; }
.aparte { color: var(--muted); font-size: var(--fs-ui); line-height: 1.6; }
.qs { display: grid; gap: var(--sp-1); }
.q { display: flex; align-items: flex-start; gap: .6875rem; padding: .5625rem .6875rem; border-radius: var(--radius-sm); line-height: var(--lh-corps); cursor: pointer; transition: background-color var(--dur-rapide) var(--ease); }
.q:hover { background: var(--hover); }
.q input { margin-top: .1875rem; }
.q input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.objections-acc { display: grid; gap: .375rem; }
.obj { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.obj summary { display: flex; align-items: center; gap: var(--sp-2); padding: .625rem var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-corps); font-weight: 600; list-style: none; cursor: pointer; }
.obj summary::-webkit-details-marker { display: none; }
.obj__chev { color: var(--muted); transition: transform var(--dur-rapide) var(--ease); }
.obj[open] .obj__chev { transform: rotate(90deg); }
.obj[open] summary { color: var(--accent-ink); }
.obj .dit { margin: 0 var(--sp-3) var(--sp-3); font-size: 1rem; }
.cote { position: sticky; top: var(--sp-4); display: grid; gap: var(--sp-4); }
.chrono { display: grid; justify-items: center; gap: .625rem; text-align: center; }
.chrono__val { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.chrono--long .chrono__val { color: var(--attente-ink); }
.issues { display: grid; gap: .4375rem; }
.issues .btn { justify-content: flex-start; }

/* 15. Appels --------------------------------------------------------------- */
.lecteur { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.lecteur__titre { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-petit); font-weight: 600; }
.lecteur__titre .ic { width: 1rem; height: 1rem; color: var(--accent-ink); }
/* Lecteur natif aux couleurs du thème : accent de la marque, panneau posé sur la carte */
.lecteur audio { display: block; width: 100%; height: var(--sp-10); border-radius: var(--radius-pill); accent-color: var(--accent); }
.lecteur audio::-webkit-media-controls-panel { background-color: var(--surface-2); }
.coach { display: grid; gap: .625rem; }
.coach li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--fs-ui); line-height: var(--lh-corps); }
.coach .ic, .coach .icon { flex: none; width: 1rem; height: 1rem; margin-top: .1875rem; color: var(--attente); }
.coach--bon .ic, .coach--bon .icon { color: var(--succes); }
.sous { margin: var(--sp-4) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.card__title + .sous, .sous:first-child { margin-top: 0; }
.besoins { display: grid; gap: var(--sp-4); }
.besoins li { display: grid; justify-items: start; gap: .3125rem; }
.besoins p { font-size: var(--fs-ui); }
.besoins blockquote { padding: var(--sp-2) var(--sp-3); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--surface-2); box-shadow: inset 2px 0 0 var(--line-strong); color: var(--text-2); font-size: var(--fs-petit); }
.objections { display: grid; gap: var(--sp-4); }
.objections li { display: grid; gap: .3125rem; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-ui); }
.objections li:last-child { padding-bottom: 0; border-bottom: 0; }
.objections__o { font-weight: 600; }
.objections__mieux { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-ink); }
.objections__mieux .ic, .objections__mieux .icon { flex: none; width: .9375rem; height: .9375rem; margin-top: .125rem; }
.actions { display: grid; gap: .625rem; }
.actions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .625rem; font-size: var(--fs-ui); }
.resume { font-size: 1rem; line-height: 1.6; }
.transcription summary { width: fit-content; border-radius: var(--radius-3xs); color: var(--lien); font-weight: 600; cursor: pointer; }
.transcription p { max-height: 26rem; margin-top: var(--sp-3); overflow-y: auto; color: var(--text-2); line-height: 1.7; }
.rattache { display: grid; gap: .625rem; }
.rattache__res { display: grid; gap: var(--sp-1); }
.rattache__item { display: flex; align-items: center; gap: .625rem; width: 100%; padding: var(--sp-2) .625rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); text-align: left; transition: border-color var(--dur-rapide) var(--ease), background-color var(--dur-rapide) var(--ease); }
.rattache__item:hover { border-color: var(--accent); background: var(--hover); }
.rattache__nom { flex: 1; font-weight: 600; }
.liste-appels { display: grid; gap: .625rem; }
.liste-appels li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui); }
/* Page Appels : chaque carte garde sa hauteur (le tableau reste en vue) ; le coaching se déplie au-delà de trois points */
.page--appels .duo { align-items: start; }
.bilan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-6); }
.bilan__col { min-width: 0; }
.bilan__col + .bilan__col { padding-left: var(--sp-6); border-left: 1px solid var(--line); }
.table--appels td:nth-child(3) { min-width: 16rem; }
/* Appels au téléphone : quand et avec qui à gauche, score et analyse à droite ; le résumé se lit sur la fiche */
@media (max-width: 640px) {
  .table--appels, .table--appels tbody { display: block; }
  .table--appels thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table--appels tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
  .table--appels tbody tr:last-child { border-bottom: 0; }
  .table--appels td { padding: 0; border: 0; }
  .table--appels td:nth-child(3) { display: none; }
  .table--appels td:nth-child(4) { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  .table--appels td:nth-child(5) { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
}
.liste-appels .coupe-2 { flex-basis: 100%; }
.coach-suite { margin-top: .625rem; }
.coach-suite summary { border-radius: var(--radius-3xs); color: var(--lien); font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
.coach-suite[open] summary { margin-bottom: .625rem; }

/* 16. Audit : le document montré au client -------------------------------- */
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; max-width: 52.5rem; margin: 0 auto var(--sp-4); }
.doc-actions .retour { margin: 0; }
.doc { max-width: 52.5rem; margin: 0 auto; padding: var(--sp-11) var(--sp-12) var(--sp-9); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.doc__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 2px solid var(--accent); }
.doc__marque { --logo-h: 1.75rem; color: var(--logo); }
.doc__marque--texte { color: var(--accent-ink); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.doc__titre { margin: .375rem 0 var(--sp-1); font-family: var(--font-display); font-size: var(--fs-kpi); font-weight: 800; line-height: 1.1; letter-spacing: -.028em; }
.doc__pour { color: var(--text-2); font-weight: 600; }
.doc__pour--sec { color: var(--muted); font-size: var(--fs-petit); font-weight: 500; }
.doc__meta { color: var(--muted); font-size: var(--fs-petit); line-height: 1.7; text-align: right; }
.doc__chapeau { margin: var(--sp-6) 0 .375rem; color: var(--text-2); font-size: 1.0625rem; line-height: 1.7; }
.doc__sec { margin-top: var(--sp-8); }
.doc__sec > :is(h2, h3) { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.012em; }
.doc__num { display: grid; place-items: center; flex: none; width: 1.625rem; height: 1.625rem; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-size: var(--fs-petit); font-weight: 800; }
.constats { display: grid; gap: var(--sp-4); }
.constats li { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.constats__t { font-weight: 600; line-height: var(--lh-corps); }
.constats blockquote { margin-top: var(--sp-2); padding-left: var(--sp-3); box-shadow: inset 2px 0 0 var(--accent-line); color: var(--text-2); }
/* Ce que ça coûte : texte doux, flèche verte (la marque n’a pas de rouge, et le client n’est pas en faute) */
.constats__c { display: flex; align-items: flex-start; gap: .4375rem; margin-top: .5625rem; color: var(--ink-soft); font-size: var(--fs-ui); line-height: var(--lh-corps); }
.constats__c .ic, .constats__c .icon { width: .9375rem; height: .9375rem; margin-top: .1875rem; color: var(--accent-ink); }
.constats__s { margin-top: .4375rem; color: var(--muted); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; }
.solutions { display: grid; gap: var(--sp-3); }
.sol { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.sol__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.sol__head :is(h3, h4) { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: var(--ls-carte); }
.sol__delai { flex: none; padding: .1875rem .625rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 700; }
.sol p { margin-top: .4375rem; color: var(--text-2); line-height: 1.6; }
.sol__gain { display: flex; align-items: flex-start; gap: .4375rem; color: var(--succes-ink) !important; font-weight: 600; }
.sol__gain .ic, .sol__gain .icon { width: 1rem; height: 1rem; margin-top: .125rem; }
.plan { display: grid; gap: 2px; }
.plan li { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: var(--sp-4); padding: .6875rem 0; border-bottom: 1px solid var(--line); }
.plan li:last-child { border-bottom: 0; }
.plan__quand { color: var(--accent-ink); font-size: var(--fs-ui); font-weight: 700; }
.plan__quoi { color: var(--text-2); line-height: var(--lh-corps); }
.invest { font-size: 1.0625rem; font-weight: 600; }
.doc__suite { display: flex; align-items: flex-start; gap: .625rem; margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); line-height: 1.6; }
.doc__suite .ic, .doc__suite .icon { margin-top: 2px; color: var(--accent-ink); }
.doc__pied { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-petit); line-height: 1.7; }
.doc-note { max-width: 52.5rem; margin: var(--sp-3) auto 0; text-align: center; }

/* 17. Pages publiques (signature, paiement) ------------------------------- */
/* <body class="public"><header class="public__entete">…</header><main class="public__main">…</main><footer class="public__pied">…</footer></body> */
.public { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100dvh; background: var(--degrade-page), var(--bg); }
.public__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: min(100% - 2 * var(--sp-5), var(--carte-publique-large)); margin: 0 auto; padding: var(--sp-4) 0; }
.public__entete .brand { --logo-h: 2rem; }
.public__contexte { color: var(--muted); font-size: var(--fs-petit); font-weight: 500; text-align: right; }
.public__main { display: grid; align-content: start; justify-items: center; gap: var(--sp-6); padding: var(--sp-2) var(--sp-4) var(--sp-12); }
.public__carte { display: grid; gap: var(--sp-6); width: min(100%, var(--carte-publique)); padding: clamp(var(--sp-6), 4vw, var(--sp-10)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.public__carte--large { width: min(100%, var(--carte-publique-large)); }
.public__carte > .btn { justify-self: start; }
.public__main:has(> .public__carte:only-child) { align-content: center; }   /* page message : carte au centre */
.public:has(.public__main > .public__carte:only-child) .public__entete { width: min(100% - 2 * var(--sp-5), var(--carte-publique)); }
.public__suite { display: flex; justify-content: center; width: min(100%, var(--carte-publique-large)); }
.public__titre { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -.025em; }
.public__intro { margin-top: var(--sp-2); color: var(--text-2); font-size: 1rem; }
.public__pied { padding: var(--sp-6) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-petit); text-align: center; }
.public__pied p + p { margin-top: var(--sp-1); }
.public__pied a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.public__pied a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Étapes du client : Signer, Payer, Terminé */
.etapes { display: flex; align-items: flex-start; width: 100%; }
.public__main > .etapes { max-width: 30rem; }
.etapes__item { position: relative; display: grid; flex: 1; justify-items: center; gap: var(--sp-2); min-width: 0; color: var(--muted); font-size: var(--fs-petit); font-weight: 600; text-align: center; }
.etapes__item + .etapes__item::before { content: ""; position: absolute; top: .9375rem; right: calc(50% + 1.375rem); left: calc(-50% + 1.375rem); height: 2px; border-radius: var(--radius-pill); background: var(--line-strong); }
.etapes__item--fait + .etapes__item::before { background: var(--accent); }
.etapes__pastille { display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--muted); font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 700; font-variant-numeric: tabular-nums; }
.etapes__pastille .ic, .etapes__pastille .icon { width: 1rem; height: 1rem; stroke-width: 2.75; }
.etapes__item--fait { color: var(--text-2); }
.etapes__item--fait .etapes__pastille { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.etapes__item[aria-current="step"] { color: var(--ink); }
.etapes__item[aria-current="step"] .etapes__pastille { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Zone de signature */
.signature { display: grid; gap: var(--sp-3); }
.signature__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.signature__titre { font-size: var(--fs-ui); font-weight: 600; }
.signature__zone { position: relative; height: 11rem; overflow: hidden; border: 1.5px dashed var(--line-control); border-radius: var(--radius-md); background: var(--surface); touch-action: none; transition: border-color var(--dur-rapide) var(--ease); }
.signature__zone:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.signature__zone.is-signee { border-style: solid; border-color: var(--accent-line); }
.signature__toile { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.signature__toile:focus-visible { outline: none; }
.signature__ligne { position: absolute; left: var(--sp-6); right: var(--sp-6); bottom: 26%; height: 1px; background: var(--line-strong); pointer-events: none; }
.signature__ligne::before { content: "×"; position: absolute; left: 0; bottom: var(--sp-1); color: var(--muted); font-size: 1.125rem; line-height: 1; }
.signature__aide { position: absolute; top: 34%; right: 0; left: 0; color: var(--muted); font-size: var(--fs-petit); text-align: center; pointer-events: none; transition: opacity var(--dur-base) var(--ease); }
.signature__zone.is-signee .signature__aide { opacity: 0; }
.signature__meta { color: var(--muted); font-size: var(--fs-xs); }
/* Consentement juridique : <label class="consentement"><input type="checkbox" required><span>…</span></label> */
.consentement { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-soft); font-size: var(--fs-ui); line-height: var(--lh-corps); cursor: pointer; transition: border-color var(--dur-rapide) var(--ease), background-color var(--dur-rapide) var(--ease); }
.consentement input { margin-top: .1875rem; }
.consentement:hover { border-color: var(--line-strong); }
.consentement:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }

/* Fiche de faits juridiques (motif .legal-facts du site) : <dl class="legal-facts"><div><dt>…</dt><dd>…</dd></div></dl> */
.legal-facts { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-corps); line-height: var(--lh-corps); container-type: inline-size; }
.legal-facts > div { display: grid; gap: var(--sp-1) var(--sp-6); padding: .875rem clamp(var(--sp-4), .7rem + 1vw, var(--sp-6)); }
.legal-facts > div + div { border-top: 1px solid var(--line); }
.legal-facts dt { color: var(--ink); font-size: var(--fs-ui); font-weight: 600; }
.legal-facts dd { color: var(--ink-soft); }
.legal-facts__note { color: var(--muted); font-size: var(--fs-ui); }
.legal-facts__liste { display: grid; gap: var(--sp-1); margin: 0; padding-left: 1.125rem; list-style: disc; }   /* puces : la remise à zéro de base les retire */
.legal-facts__liste > li::marker { color: var(--accent); }
.legal-facts__liste + .legal-facts__note { display: block; margin-top: var(--sp-1); }

/* Paiement : récapitulatif et emplacement du formulaire Stripe */
.paiement { display: grid; gap: var(--sp-4); }
.paiement__recap { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--fs-ui); }
.paiement__ligne { display: flex; justify-content: space-between; gap: var(--sp-4); color: var(--text-2); }
.paiement__ligne dd { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paiement__total { padding-top: var(--sp-2); border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.paiement__total dd { font-family: var(--font-display); font-size: var(--fs-section); font-weight: 700; letter-spacing: -.01em; }
.paiement__cadre { min-height: 12rem; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.paiement__cadre[aria-busy="true"] { display: grid; align-content: start; gap: var(--sp-3); }

/* Avatar à initiales et médaillon de marque */
.avatar { --size: 2.25rem; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size); overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-size: calc(var(--size) * .4); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --size: 1.75rem; }
.avatar--lg { --size: 3rem; }
.monogram { --size: 3rem; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%; background: var(--degrade-monogram); box-shadow: var(--shadow-monogram); color: var(--green); font-family: var(--font-display); font-size: calc(var(--size) * .36); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.monogram--sm { --size: 2.25rem; }
.monogram--lg { --size: 4rem; }

/* 18. Animations ------------------------------------------------------------ */
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }
@keyframes descend { to { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-6px); } }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } }
@keyframes pose { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--shadow-xs); } }
@keyframes sortGauche { to { opacity: 0; transform: translateX(-40px) rotate(-2deg); } }
@keyframes sortDroite { to { opacity: 0; transform: translateX(40px) rotate(2deg); } }
@keyframes sortBas { to { opacity: 0; transform: translateY(24px); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes reflet { to { background-position: 160% 0; } }
/* Rangées qui défilent à l’horizontale (kanban, onglets, frise d’étapes, tableaux posés dans une carte,
   puces au téléphone) : un fondu annonce ce qui dépasse, du côté où il reste à voir. Il suit le
   défilement ; sans débordement, la chronologie de défilement est inactive et rien n’est masqué. */
@property --fondu-g { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fondu-d { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes fondu-bords {
  0% { --fondu-g: 0px; --fondu-d: 2.5rem; }
  6% { --fondu-g: 2.5rem; }
  94% { --fondu-d: 2.5rem; }
  100% { --fondu-g: 2.5rem; --fondu-d: 0px; }
}
@supports (animation-timeline: scroll()) {
  .board, .tabs, .stepper, .table-wrap:not(.card) {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--masque-opaque) var(--fondu-g), var(--masque-opaque) calc(100% - var(--fondu-d)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--masque-opaque) var(--fondu-g), var(--masque-opaque) calc(100% - var(--fondu-d)), transparent);
    animation: fondu-bords linear both;
    animation-timeline: scroll(self inline);
  }
  @media (max-width: 640px) {
    .phead .chips {
      -webkit-mask-image: linear-gradient(to right, transparent, var(--masque-opaque) var(--fondu-g), var(--masque-opaque) calc(100% - var(--fondu-d)), transparent);
      mask-image: linear-gradient(to right, transparent, var(--masque-opaque) var(--fondu-g), var(--masque-opaque) calc(100% - var(--fondu-d)), transparent);
      animation: fondu-bords linear both;
      animation-timeline: scroll(self inline);
    }
  }
}

/* 19. Écrans --------------------------------------------------------------- */
@container (min-width: 30rem) {
  .legal-facts > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}
/* Accueil : le tableau par segment (huit colonnes) prend toute la largeur tant que deux colonnes l’écraseraient */
@media (max-width: 1440px) { .page--aujourdhui .duo { grid-template-columns: minmax(0, 1fr); } }
/* Tableau des prospects : les colonnes secondaires s’effacent avant qu’il ne déborde (le détail reste sur la fiche) */
@media (max-width: 1365px) { .table--prospects .cell--contact { display: none; } }
@media (max-width: 1280px) { .table--prospects .cell--avis { display: none; } }
@media (min-width: 901px) and (max-width: 1000px) { .table--prospects .cell--effectif { display: none; } }
@media (max-width: 1280px) {
  .fiche { grid-template-columns: minmax(0, 1fr) 21.25rem; }
}
@media (max-width: 1100px) {
  .duo, .perf, .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche__side { position: static; order: -1; }
  .bilan { grid-template-columns: minmax(0, 1fr); }
  .bilan__col + .bilan__col { padding: var(--sp-5) 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .hide-md { display: none; }
}
@media (max-width: 1080px) {
  .appel-vue { grid-template-columns: minmax(0, 1fr); }
  .cote { position: static; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: calc(var(--mtop-h) + var(--sp-4)); }   /* une ancre ne glisse pas sous la barre du haut */
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .mtop {
    position: sticky; top: 0; z-index: var(--z-mtop);
    display: flex; align-items: center; gap: var(--sp-1);
    height: var(--mtop-h); padding: 0 var(--sp-2) 0 var(--sp-4);
    border-bottom: 1px solid var(--line);
    background: var(--frost);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  }
  .bnav {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-bnav);
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    min-height: var(--bnav-h);
    padding: .375rem var(--sp-1) calc(.375rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--frost);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  }
  .bnav > a, .bnav__plus > button { display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 0; min-height: var(--cible); color: var(--muted); font-size: var(--fs-nav); font-weight: 600; line-height: 1.2; text-align: center; }
  .bnav__plus > button { width: 100%; height: 100%; }
  .bnav > a > span:last-child, .bnav__plus > button > span:last-child { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bnav > a[aria-current="page"], .bnav__plus > button[aria-current="page"] { color: var(--accent-ink); }
  .bnav__plus { display: grid; }
  .bnav__plus .menu { min-width: 14rem; }
  .bnav__ic { position: relative; display: grid; place-items: center; width: 3rem; height: 1.75rem; border-radius: var(--radius-pill); transition: background-color var(--dur-rapide) var(--ease); }
  .bnav > a[aria-current="page"] .bnav__ic, .bnav__plus > button[aria-current="page"] .bnav__ic, .bnav__plus > button[aria-expanded="true"] .bnav__ic { background: var(--accent-soft); }
  .bnav__badge { position: absolute; top: -.1875rem; right: .125rem; display: grid; place-items: center; min-width: 1.0625rem; height: 1.0625rem; padding: 0 .25rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: .625rem; font-weight: 700; }
  .page { gap: var(--sp-5); padding: var(--sp-5) var(--sp-4) calc(var(--bnav-h) + var(--sp-8) + env(safe-area-inset-bottom)); }
  .lot, .toasts { bottom: calc(var(--bnav-h) + var(--sp-4) + env(safe-area-inset-bottom)); }
  .tcard__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}
@media (max-width: 720px) {
  .doc { padding: var(--sp-7) var(--sp-5); }
  .doc__meta { text-align: left; }
  .doc__titre { font-size: 1.625rem; }
  .plan li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .shead__actions { width: 100%; }
  .shead__actions .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .grille2, .duo--tight { grid-template-columns: minmax(0, 1fr); }
  .hello h1 { font-size: 1.625rem; }
  .phead h1, .tri__head h1, .fhead h1 { font-size: 1.375rem; }
  .todo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .card { padding: var(--sp-4); border-radius: var(--radius-md); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcard { gap: var(--sp-5); padding: var(--sp-5); border-radius: var(--radius); }
  .tcard__titre :is(h2, h3) { font-size: 1.1875rem; }
  .tcard__actions { grid-template-columns: 1fr 1fr; bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius) var(--radius); }
  .tcard__actions [data-tri-action="a_contacter"] { grid-column: 1 / -1; grid-row: 1; }
  .tcard__actions kbd, .tri__keys { display: none; }
  .ring--lg { width: 3.25rem; height: 3.25rem; }
  .fhead__actions { width: 100%; }
  .fhead__actions .btn { flex: 1; }
  .hide-sm { display: none; }
  .board { margin: 0 calc(var(--sp-4) * -1); padding: 0 var(--sp-4) var(--sp-2); }
  .board > .col { flex: 0 0 85%; }
  .board > .col:not(:has(.kcard)) { flex-basis: 60%; }
  .phead { display: grid; grid-template-columns: minmax(0, 1fr); }
  .phead .chips { flex-wrap: nowrap; margin: calc(var(--sp-2) * -1) calc(var(--sp-4) * -1); padding: var(--sp-2) var(--sp-4); overflow-x: auto; scrollbar-width: none; }
  .phead .chip { flex: none; }
  .toolbar select { flex: 1 1 45%; }
  .toolbar .field-ic { flex-basis: 10rem; }
  .filtres > summary { display: inline-flex; }
  .filtres:not([open])::details-content { display: none; }
  .filtres[open]::details-content { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--sp-2); }
  /* Liste des prospects : chaque ligne s’empile (nom, étape, score), sans défilement horizontal */
  .table--pile, .table--pile thead, .table--pile tbody { display: block; }
  .table--pile tr { display: grid; grid-template-columns: var(--cible) minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .table--pile tbody tr:last-child { border-bottom: 0; }
  .table--pile :is(th, td) { padding: 0; border: 0; }
  .table--pile thead tr { padding-block: var(--sp-2); background: var(--surface-2); }
  .table--pile th:not(.check, .cell--nom) { display: none; }
  .table--pile .check { justify-self: center; width: auto; }
  .table--pile tbody .check { grid-row: 1 / span 2; }
  .table--pile .cellnom { min-width: 0; }
  .table--pile .cell--score { grid-column: 3; grid-row: 1 / span 2; }
  .table--pile .cell--etape { grid-column: 2; grid-row: 2; padding: var(--sp-2) 0 0 calc(1.5rem + var(--sp-3)); }
  .carte-vp .card__head { flex-direction: column; align-items: flex-start; }
  .funnel__row { grid-template-columns: 5.5rem minmax(0, 1fr) 2.125rem 2.5rem; gap: var(--sp-2); }
  .page--appels .funnel__row { grid-template-columns: 6.875rem minmax(0, 1fr) 2.125rem 0; }
  .aide__grid { grid-template-columns: minmax(0, 1fr); }
  .stepper__step { min-width: 5.75rem; }
  .lot { right: var(--sp-4); left: var(--sp-4); flex-wrap: wrap; width: auto; max-width: none; margin: 0; }
  .fichier-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .feed__time { grid-column: 2; margin-top: -.375rem; }   /* au téléphone, l’heure passe sous l’événement : le texte garde la largeur */
  .fichier-strip .lien-fleche { grid-column: 1 / -1; }
  .fichier-strip__txt .muted { white-space: normal; }
  .info__actions, .avance { padding-left: 0; }
  .public__entete { flex-wrap: wrap; }
  .etapes__item { font-size: var(--fs-xs); }
}

/* 20. Impression : l’audit s’imprime tel quel, seul le document reste ----------- */
@media print {
  .side, .mtop, .bnav, .doc-actions, .doc-note, .flash, .toasts, .tip, .lot, .palette, .aide, .skip-link { display: none !important; }
  body, .app, .main, .page { display: block !important; margin: 0 !important; padding: 0 !important; background: var(--paper) !important; }
  .doc { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc__sec, .constats li, .sol, .doc__suite { break-inside: avoid; }
  .doc a { color: inherit; text-decoration: none; }
}

/* 21. Couleurs forcées (contraste élevé de Windows) ----------------------------- */
@media (forced-colors: active) {
  input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; }
  .st, .stsel, .badge, .tag, .sig, .chip, .cl, .score-pill, .notice, .alerte, .info, .toast, .tip, .lot, .side__badge { border: 1px solid CanvasText; }
  .st__dot, .feed__dot, .funnel__bar, .ring__val, .progression > span, .avance__barre span { forced-color-adjust: none; }
  .side__nav a[aria-current="page"], .bnav > a[aria-current="page"], .chip[aria-current="true"], .palette__item[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}