/* =====================================================================
   VISION PME — Outil de prospection téléphonique
   Rien d'inventé ici : uniquement des tokens de tokens.css, pour que le
   thème sombre suive sans une seule règle en double.

   Conçu pour être utilisé PENDANT un appel : cibles tactiles larges,
   contraste fort, aucune animation qui distrait, et une seule colonne sur
   mobile — un agent qui appelle d'un cellulaire tient le téléphone d'une
   main et coche de l'autre.
   ===================================================================== */

.prospect-wrap { max-width: 820px; margin: 0 auto; }

/* ---------- Bandeau d'appel : minuterie + progression + issues ----------
   Un seul bloc collant pour les deux rangées : la minuterie et la sortie
   rapide doivent rester ensemble à l'écran, sinon l'agent qui tombe sur un
   répondeur au milieu d'un écran doit remonter pour raccrocher. */
.appel-entete {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
}
.appel-barre {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-3);
}
.appel-minuterie {
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 600;
  color: var(--text); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 14px; min-width: 92px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.appel-minuterie.on { border-color: var(--green); color: var(--green-text); }
.appel-progress { flex: 1; min-width: 0; }
.appel-progress .rail {
  height: 8px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.appel-progress .fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green-deep), var(--green-bright));
  border-radius: var(--r-pill); transition: width var(--dur) var(--ease);
}
.appel-progress .lbl {
  font-size: var(--fs-xs); color: var(--text-subtle);
  margin-top: 5px; display: flex; justify-content: space-between;
}

/* Score de qualification — toujours visible, jamais bloquant. L'agent voit
   où il en est sans quitter le script des yeux. */
.appel-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px; padding: 5px 12px; line-height: 1.15; text-align: center;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-pill); color: var(--text);
}
.appel-score b {
  font-family: var(--font-display); font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.appel-score small { font-size: var(--fs-2xs); color: var(--text-subtle); }
.appel-score.ok { border-color: var(--green); color: var(--green-text); }
.appel-score.dq { border-color: var(--danger); color: var(--danger); }

/* ---------- Sortie rapide : les issues, tout le temps ----------
   Discrètes tant qu'on ne les regarde pas — ce sont des boutons de
   secours, pas la voie normale — mais jamais repliées derrière un menu :
   ce qui ne se voit pas ne se clique pas pendant un appel qui tourne mal. */
.issues {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  padding-bottom: var(--s-4);
}
.issues-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle); margin-right: 2px;
}
.issues-lbl svg { width: 13px; height: 13px; }
.issue-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted); background: var(--surface-1);
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 7px 13px; min-height: 36px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.issue-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.issue-btn:hover { border-color: var(--warn); color: var(--text); }
.issue-btn.on { border-color: var(--warn); background: var(--warn-soft); color: var(--text); }

/* La confirmation : hors du bloc collant, parce qu'elle peut porter deux
   champs et qu'un en-tête haut de 300 px sur un cellulaire ne laisse plus
   rien voir de l'appel. */
.issue-panneau {
  background: var(--warn-soft); border: 1.5px solid var(--warn);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
}
.issue-tete { display: flex; align-items: flex-start; gap: var(--s-3); }
.issue-tete .ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-1); color: var(--warn);
}
.issue-tete .ico svg { width: 18px; height: 18px; }
.issue-tete b { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.issue-tete span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.issue-qui {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; margin-top: var(--s-3);
}
.issue-qui svg { width: 14px; height: 14px; color: var(--text-subtle); }
.issue-champs { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.issue-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* Identité de l'agent : plus de saisie, c'est la session qui signe. */
.agent-ligne { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.agent-ligne svg { width: 14px; height: 14px; flex-shrink: 0; }
.agent-ligne.manquant { color: var(--warn); font-weight: 600; }

/* ---------- Écrans ---------- */
.ecran { display: none; }
.ecran.actif { display: block; animation: ecranEntre var(--dur) var(--ease-out); }
@keyframes ecranEntre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ecran h2 {
  font-size: var(--fs-h2); margin-bottom: var(--s-1);
}
.ecran .intro { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); }

/* ---------- Le script à lire ---------- */
/* Bloc volontairement très lisible : c'est la seule chose que l'agent
   regarde pendant qu'il parle. Poppins, 1.15 rem, interligne large. */
.script {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
  box-shadow: var(--sh-sm);
}
.script .tag {
  display: block; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-text); margin-bottom: var(--s-2);
}
.script p {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.15rem; line-height: 1.55; color: var(--text);
}
.script p + p { margin-top: var(--s-3); }
.script.secondaire { border-left-color: var(--info); }
.script.secondaire .tag { color: var(--info); }
/* La pause : ce n'est pas une phrase à lire, c'est le moment où on se tait.
   Elle doit donc se distinguer du script au premier coup d'œil. */
.script .attente {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: var(--fs-sm); color: var(--text-subtle);
  margin-top: var(--s-2);
}
.script .attente::before { content: '⏸ '; }
/* Le prénom réel injecté dans le script : souligné en pointillé, parce que
   l'agent doit voir d'un coup d'œil ce qui vient de la fiche et ce qui est
   écrit d'avance. */
.jeton-prenom {
  font-weight: 700; color: var(--green-text);
  text-decoration: underline dotted var(--green); text-underline-offset: 3px;
}

.conseil {
  font-size: var(--fs-sm); color: var(--text-muted);
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); margin: calc(var(--s-3) * -1) 0 var(--s-4);
  border-left: 3px solid var(--warn);
}

.groupe-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle);
  margin: var(--s-5) 0 var(--s-3);
}
.groupe-label .oblig { color: var(--danger); margin-left: 4px; }

/* ---------- Pastilles de réponse ---------- */
.pastilles { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pastille {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  text-align: left; line-height: 1.3;
  background: var(--surface-1); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--r-md);
  padding: 11px 16px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
  min-height: 44px;                 /* cible tactile confortable */
}
.pastille:hover { border-color: var(--green); }
.pastille small {
  display: block; font-weight: 500; font-size: var(--fs-2xs);
  opacity: 0.72; margin-top: 2px;
}
.pastille.on {
  background: var(--green); border-color: var(--green); color: var(--green-ink);
}
.pastille.on small { opacity: 0.8; }
.pastille.multi.on { background: var(--info); border-color: var(--info); color: #fff; }

/* ---------- Champs ---------- */
.champs { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champs .plein { grid-column: 1 / -1; }
.champ label {
  display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px;
}
.champ input, .champ select, .champ textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base);
  padding: 12px 14px; color: var(--text);
  background: var(--field); border: 1.5px solid var(--field-border);
  border-radius: var(--r-sm);
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--ok-soft);
}
.champ .aide { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 5px; }
.champ .aide.attention { color: var(--warn); font-weight: 600; }

/* ---------- Étoiles ---------- */
.etoiles { display: flex; gap: var(--s-2); }
.etoile {
  font-size: 2rem; line-height: 1; background: none; border: none;
  color: var(--surface-3); cursor: pointer; padding: 2px;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.etoile:hover { transform: scale(1.12); }
.etoile.on { color: var(--warn); }

/* ---------- Fiches de référence (offre, objections) ---------- */
.fiches { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.fiche {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-4);
}
.fiche .titre {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--green-text); margin-bottom: 4px;
}
.fiche .prix { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); }
.fiche .prix span { font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle); }
.fiche ul { margin: var(--s-2) 0 0; padding-left: 18px; }
.fiche li { font-size: var(--fs-xs); color: var(--text-muted); margin: 3px 0; }

.objection { border-left: 3px solid var(--warn); }
.objection .titre { color: var(--warn); }
.objection p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }

/* ---------- Objections repliées ----------
   À un clic, jamais entre l'agent et sa prochaine question : dépliées en
   permanence, six fiches poussaient le script hors de l'écran. */
.objections-repli { margin: var(--s-4) 0 var(--s-5); }
.objections-repli > summary {
  display: inline-flex; align-items: center; gap: 7px; list-style: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--green-text);
  cursor: pointer; padding: 8px 0;
}
.objections-repli > summary::-webkit-details-marker { display: none; }
.objections-repli > summary svg { width: 15px; height: 15px; }
.objections-repli > summary::after {
  content: '▾'; font-size: var(--fs-xs); color: var(--text-subtle);
  transition: transform var(--dur-fast) var(--ease);
}
.objections-repli[open] > summary::after { transform: rotate(180deg); }
.objections-repli > summary:hover { text-decoration: underline; }
.objections-repli .fiches { margin-top: var(--s-2); }

/* ---------- Verdict de qualification ---------- */
.verdict {
  display: flex; align-items: flex-start; gap: var(--s-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 4px solid var(--text-subtle);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
}
.verdict .ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2);
}
.verdict .ico svg { width: 22px; height: 22px; }
.verdict b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); }
.verdict .pts { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.verdict p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; margin-top: 4px; }
.verdict.ok { border-left-color: var(--green); }
.verdict.ok .ico { background: var(--ok-soft); color: var(--green-text); }
.verdict.ok b { color: var(--green-text); }
.verdict.bof { border-left-color: var(--warn); }
.verdict.bof .ico { background: var(--warn-soft); color: var(--warn); }
.verdict.bof b { color: var(--warn); }
.verdict.dq { border-left-color: var(--danger); }
.verdict.dq .ico { background: var(--danger-soft); color: var(--danger); }
.verdict.dq b { color: var(--danger); }

/* ---------- Récapitulatif ---------- */
/* Les 8 px horizontaux sont repris sur le conteneur : les lignes cliquables
   ont de quoi respirer au survol sans que rien ne se décale. */
.recap {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5) calc(var(--s-5) - 8px);
}
.recap-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 9px 8px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
}
.recap-ligne:last-child { border-bottom: none; }
.recap-ligne .k { color: var(--text-subtle); font-weight: 600; flex-shrink: 0; }
.recap-ligne .v { text-align: right; font-weight: 600; }

/* Une ligne du récap ramène à l'écran d'où vient la donnée — c'est le chemin
   le plus court entre repérer une erreur et la corriger. Un <button>, pas un
   <div> : l'agent doit pouvoir y arriver au clavier. */
button.recap-ligne {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--border);
  border-radius: var(--r-sm);
}
button.recap-ligne > svg {
  width: 14px; height: 14px; flex-shrink: 0; opacity: 0;
  color: var(--green-text); transition: opacity var(--dur-fast) var(--ease);
}
button.recap-ligne:hover { background: var(--surface-2); }
button.recap-ligne:hover > svg, button.recap-ligne:focus-visible > svg { opacity: 1; }

/* ---------- Navigation ---------- */
.ecran-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--border);
}
.ecran-nav .btn-suite { flex: 1; }
/* « Suivant » n'apparaît qu'après un retour : il ramène là où on en était,
   sans revalider — la pile est vidée dès qu'une réponse change. */
.ecran-nav .btn-fwd { flex-shrink: 0; }

/* ---------- Brouillon retrouvé ---------- */
.brouillon {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
}
.brouillon .grow { flex: 1; min-width: 180px; }

/* ---------- Fin d'appel ---------- */
.fin { text-align: center; padding: var(--s-8) var(--s-3); }
.fin .pastille-ok {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto var(--s-4);
  background: var(--green); color: var(--green-ink);
  display: grid; place-items: center;
}
.fin .pastille-ok svg { width: 38px; height: 38px; }
.fin .detail { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--s-2); }

/* ---------- Séquence de close ---------- */
/* Elle vit dans .fin, qui centre tout : le close, lui, se lit — on reprend
   l'alignement à gauche dès le conteneur. */
.close-zone { text-align: left; margin-top: var(--s-6); }
.close-seq { display: grid; gap: var(--s-3); }

.close-tete {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--ok-soft); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.close-tete .ico { display: grid; place-items: center; flex-shrink: 0; color: var(--green-text); }
.close-tete .ico svg { width: 24px; height: 24px; }
.close-tete b { display: block; font-family: var(--font-display); font-size: var(--fs-base); color: var(--green-text); }
.close-tete span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Une étape : numérotée, franchie, ou pas encore ouverte. Les trois états
   se distinguent au premier coup d'œil — un agent au téléphone ne relit pas. */
.close-etape {
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 3px solid var(--surface-3);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  opacity: 0.62; transition: opacity var(--dur-fast) var(--ease);
}
.close-etape.active { opacity: 1; border-left-color: var(--green); box-shadow: var(--sh-sm); }
.close-etape.faite { opacity: 1; border-left-color: var(--green-text); }
.close-etape-h {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
  margin-bottom: var(--s-2);
}
.close-num {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
}
.close-etape.active .close-num { background: var(--green); color: var(--green-ink); }
.close-etape.faite .close-num { background: var(--ok-soft); color: var(--green-text); }
.close-num svg { width: 15px; height: 15px; }

.close-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-3); line-height: 1.5; }
/* Ce que l'agent lit à voix haute : même traitement que le bloc « Dis : ». */
.close-dit {
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
  line-height: 1.5; color: var(--text); margin-bottom: var(--s-3);
}
.close-fine { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--s-2); line-height: 1.45; }
.close-verrou { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-subtle); }
.close-verrou svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Le bouton d'avantage : le sous-titre est le texte que l'agent prononce,
   donc il est lisible, pas décoratif. */
.close-appliquer {
  display: flex; align-items: flex-start; gap: var(--s-3); width: 100%;
  text-align: left; font-family: var(--font-body); color: var(--text);
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: var(--r-md); padding: 13px 16px; cursor: pointer;
  margin-bottom: var(--s-2);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.close-appliquer:hover { border-color: var(--green); background: var(--surface-1); }
.close-appliquer .ico { display: grid; place-items: center; flex-shrink: 0; color: var(--green-text); }
.close-appliquer .ico svg { width: 20px; height: 20px; }
.close-appliquer .txt { flex: 1; min-width: 0; }
.close-appliquer b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.close-appliquer small {
  display: block; font-size: var(--fs-xs); color: var(--text-muted);
  margin-top: 3px; line-height: 1.45;
}

.close-fait {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--green-text); font-weight: 600;
  background: var(--ok-soft); border-radius: var(--r-sm);
  padding: 10px 14px; margin-bottom: var(--s-2); line-height: 1.45;
}
.close-fait svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

.close-opts { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.close-opt {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  text-align: left; line-height: 1.3; color: var(--text);
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: var(--r-md); padding: 11px 14px; cursor: pointer; min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease);
}
.close-opt:hover { border-color: var(--green); }
.close-opt small { display: block; font-weight: 500; font-size: var(--fs-2xs); opacity: 0.72; margin-top: 2px; }
/* Coché pendant l'appel : un rappel, pas une présélection — « ça m'intéresse »
   n'est pas « je m'inscris ». */
.close-opt.suggere { border-color: var(--info); }
.close-opts-inline { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

.close-lien-doux {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-subtle); background: none; border: none; cursor: pointer;
  padding: 6px 0; display: inline-flex; align-items: center; gap: 5px;
}
.close-lien-doux:hover { color: var(--text); text-decoration: underline; }
.close-lien-doux svg { width: 13px; height: 13px; }

/* L'avertissement de remplacement : il doit être lu, donc il coupe la page. */
.close-alerte {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--warn-soft); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-3);
  font-size: var(--fs-sm); color: var(--text); line-height: 1.5;
}
.close-alerte svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--warn); margin-top: 1px; }
.close-alerte.fort { background: var(--danger-soft); }
.close-alerte.fort svg { color: var(--danger); }

.close-final {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  background: var(--surface-2); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); font-size: var(--fs-sm);
}
.close-final svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green-text); }
.close-final > div { flex: 1; min-width: 180px; }

/* ---------- Le lien du dossier ---------- */
/* L'adresse est affichée en clair : l'agent la copie, l'ouvre, ou la dicte. */
.lien-boite {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-4);
}
.lien-etiquette {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--s-2);
}
.lien-etiquette svg { width: 13px; height: 13px; }
.lien-url {
  width: 100%; font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 10px 12px; color: var(--text);
  background: var(--field); border: 1.5px solid var(--field-border);
  border-radius: var(--r-sm);
}
.lien-url:focus { outline: none; border-color: var(--green); }
.lien-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
/* Un jeton de 32 caractères se dicte par paquets de quatre, jamais d'un trait. */
.lien-dicter { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--s-3); }
.lien-dicter b {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text); letter-spacing: 0.04em; word-break: break-all;
}

/* ---------- File d'appels ---------- */
.file-appels { display: grid; gap: var(--s-3); }
.file-titre { font-size: var(--fs-h3); margin: var(--s-8) 0 var(--s-1); }
.file-sous { margin-bottom: var(--s-4); }
.file-carte {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-4); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.file-carte:hover { border-color: var(--green); }
.file-carte .grow { flex: 1; min-width: 160px; }
.file-carte .nm { font-weight: 700; }
.file-carte .meta { font-size: var(--fs-xs); color: var(--text-subtle); }
/* Un dossier à finaliser ne se rappelle pas d'un clic sur la carte : ses
   actions sont explicites, et rien d'autre n'est cliquable. */
.file-carte.sans-clic { cursor: default; }
.file-carte.sans-clic:hover { border-color: var(--border); }
.file-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.file-lien { flex-shrink: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .champs { grid-template-columns: 1fr; }
  .script p { font-size: 1.05rem; }
  .ecran h2 { font-size: 1.4rem; }
  .pastille { width: 100%; }        /* une réponse par ligne : moins d'erreurs de doigt */
  .ecran-nav { position: sticky; bottom: 0; background: var(--bg); padding-bottom: var(--s-3); }
  .appel-minuterie { min-width: 78px; font-size: var(--fs-base); }
  /* Le bandeau d'appel garde trois blocs : on coupe le superflu plutôt que
     de laisser la minuterie et le score se marcher dessus. */
  .appel-score { min-width: 0; padding: 5px 10px; }
  .appel-score small { display: none; }
  /* Les quatre issues passent en grille 2 × 2 : le titre saute, les
     boutons restent — c'est eux qu'on doit pouvoir atteindre au pouce. */
  .issues { display: grid; grid-template-columns: 1fr 1fr; }
  .issues-lbl { display: none; }
  /* 44 px : on raccroche d'un pouce, avec le téléphone dans l'autre main. */
  .issue-btn { justify-content: center; min-height: 44px; }
  .issue-actions .btn { width: 100%; }
  .recap-ligne { gap: var(--s-3); }
  /* Le close se fait souvent depuis un cellulaire, l'appel en cours dans
     l'autre main : une cible par ligne, et pas d'adresse tronquée. */
  .close-etape { padding: var(--s-4); }
  .close-opts { grid-template-columns: 1fr; }
  .close-opts-inline .btn, .lien-actions .btn, .lien-actions .btn-sm { width: 100%; }
  .file-actions { width: 100%; }
  .file-actions .btn { flex: 1; }
  .file-lien { width: 100%; }
}