/* ── Composants de l'app Timbre. Registre du site : silence visuel,
      typo qui porte, violet dépensé avec parcimonie. ── */

/* ─────────── boutons (repris du site) ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:1px solid transparent;border-radius:999px;
  font:500 13px/1 var(--sans);cursor:pointer;white-space:nowrap;
  background:transparent;
  transition:background-color .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),transform .28s var(--ease),opacity .2s;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn--encre{background:var(--encre);color:var(--creme)}
.btn--encre:hover:not(:disabled){background:var(--violet)}
.btn--violet{background:var(--violet);color:#fff;box-shadow:0 12px 30px -10px #8E7BFFcc}
.btn--violet:hover:not(:disabled){background:var(--violet-fonce)}
.btn--ligne{border-color:#0E111733}
.btn--ligne:hover:not(:disabled){background:var(--encre);color:var(--creme);border-color:var(--encre)}
.btn--danger{border-color:#C0392B4d;color:var(--alerte)}
.btn--danger:hover:not(:disabled){background:var(--alerte);color:#fff;border-color:var(--alerte)}
.btn--nu{padding:8px 10px;color:var(--texte-2)}
.btn--nu:hover:not(:disabled){color:var(--encre)}

/* ─────────── en-tête d'app ─────────── */
.entete[hidden]{display:none}
.entete{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--entete-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--marge);
  background:#F7F6F2d9;
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 #0E11170f;
}
.marque{display:flex;align-items:center;gap:10px}
.marque img{height:18px;width:auto}
.marque span{font-family:var(--serif);font-size:24px;line-height:1}
.entete__nav{display:flex;gap:28px;font:400 13px/1 var(--sans)}
.entete__nav a{opacity:.62;padding:6px 0;transition:opacity .25s var(--ease);border-bottom:1px solid transparent}
.entete__nav a:hover{opacity:1}
.entete__nav a[aria-current="page"]{opacity:1;border-bottom-color:var(--violet)}
.entete__fin{display:flex;align-items:center;gap:14px}
.entete__tenant{font:400 12px/1 var(--mono);color:var(--texte-3);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─────────── page ─────────── */
.page{
  max-width:1080px;margin:0 auto;
  padding:calc(var(--entete-h) + clamp(34px,6vw,64px)) var(--marge) 120px;
}
.page--etroite{max-width:760px}
.page__tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,44px);flex-wrap:wrap}
.page__titre{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,58px);line-height:1.02;text-wrap:balance}
.page__sous{margin-top:10px;font:300 15px/1.6 var(--sans);color:var(--texte-2);max-width:520px;text-wrap:pretty}
.oeil{font:500 11px/1 var(--sans);letter-spacing:.3em;color:var(--violet-fonce);text-transform:uppercase;margin-bottom:14px}

/* ─────────── cartes / grilles ─────────── */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.carte{
  border-radius:var(--rayon);
  background:var(--creme-carte);border:1px solid var(--bord);
  padding:24px 26px;
  display:flex;flex-direction:column;gap:10px;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
a.carte,button.carte{cursor:pointer;text-align:left}
a.carte:hover,button.carte:hover{background:var(--violet-pale);border-color:#8E7BFF3d}
.carte__titre{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.15}
.carte__sous{font:300 14px/1.55 var(--sans);color:var(--texte-2)}
.carte__pied{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.1em;color:var(--texte-3)}
.carte--vide{
  align-items:center;justify-content:center;text-align:center;gap:14px;
  border-style:dashed;border-color:#0E111726;background:transparent;min-height:170px;
}
.carte--encre{background:var(--encre);border-color:transparent;color:var(--creme)}
.carte--encre .carte__sous{color:#F7F6F299}

/* pastilles d'état */
.pastille{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  font:500 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  background:#0E11170a;color:var(--texte-2);
}
.pastille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pastille--ok{background:#3D8B6014;color:var(--ok)}
.pastille--attente{background:#B07C2214;color:var(--ambre)}
.pastille--off{background:#0E11170a;color:var(--texte-3)}
.pastille--erreur{background:#C0392B12;color:var(--alerte)}
.pastille--violet{background:var(--violet-pale);color:var(--violet-fonce)}

/* ─────────── sections / listes ─────────── */
.section{margin-top:clamp(36px,5vw,56px)}
.section__tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.section__titre{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.1}
.section__note{font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--texte-3)}

.tableau{width:100%;border-collapse:collapse;background:var(--creme-carte);border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden}
.tableau-cadre{border-radius:var(--rayon);overflow-x:auto;border:1px solid var(--bord)}
.tableau-cadre .tableau{border:0;border-radius:0}
.tableau th{
  text-align:left;padding:14px 20px;
  font:400 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-3);
  border-bottom:1px solid var(--bord-2);
}
.tableau td{padding:15px 20px;border-bottom:1px solid var(--bord);font:300 14px/1.5 var(--sans);vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau .mono{font:400 13px/1.4 var(--mono)}
.tableau tr[data-lien]{cursor:pointer;transition:background-color .2s var(--ease)}
.tableau tr[data-lien]:hover{background:#8E7BFF0d}

/* ─────────── formulaires ─────────── */
.champ{display:flex;flex-direction:column;gap:8px}
.champ label{font:500 12px/1 var(--sans);letter-spacing:.04em;color:var(--texte-2)}
.champ input,.champ select,.champ textarea{
  padding:13px 16px;border:1px solid #0E111721;border-radius:12px;
  background:#fff;font:300 15px/1.4 var(--sans);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.champ textarea{resize:vertical;min-height:96px;line-height:1.6}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:#8E7BFF99;box-shadow:0 0 0 3px #8E7BFF21}
.champ__aide{font:300 12px/1.5 var(--sans);color:var(--texte-3)}
.form{display:flex;flex-direction:column;gap:18px}
.form__rang{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.form__rang{grid-template-columns:1fr}}
.form__erreur{min-height:18px;font:400 13px/1.5 var(--sans);color:var(--alerte)}
.form__erreur:empty{display:none}

/* grande zone « décrivez » (usine — le geste Lovable) */
.decrire{
  width:100%;border:1px solid #0E111721;border-radius:22px;background:#fff;
  padding:22px 24px;min-height:160px;resize:vertical;
  font:300 17px/1.65 var(--sans);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.decrire:focus{outline:none;border-color:#8E7BFF99;box-shadow:0 0 0 4px #8E7BFF1c}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  padding:9px 16px;border-radius:999px;border:1px solid #0E111721;background:transparent;
  font:400 13px/1 var(--sans);color:var(--texte-2);cursor:pointer;
  transition:all .25s var(--ease);
}
.chip:hover{border-color:var(--violet);color:var(--violet-fonce);background:var(--violet-pale)}

/* ─────────── barre de demande (édition NL, façon chat) ─────────── */
.demande{
  position:sticky;bottom:24px;z-index:50;
  display:flex;gap:10px;align-items:center;
  padding:7px 7px 7px 22px;border-radius:999px;
  background:var(--encre);border:1px solid #ffffff1f;color:var(--creme);
  box-shadow:0 24px 60px -24px #0E111766;
  transition:border-color .3s var(--ease);
}
.demande:focus-within{border-color:#8E7BFF80}
.demande input{flex:1;min-width:0;border:0;background:transparent;font:300 15px/1 var(--sans);color:var(--creme)}
.demande input::placeholder{color:#F7F6F259}
.demande input:focus{outline:none}
.demande__micro{
  flex:0 0 auto;width:44px;height:44px;border:1px solid #ffffff1f;border-radius:50%;
  background:transparent;color:var(--creme);font-size:17px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.demande__micro:hover{border-color:#8E7BFF80}
.demande__micro--actif{
  background:var(--violet);border-color:var(--violet);
  animation:micro-pulse 1.2s ease-in-out infinite;
}
@keyframes micro-pulse{0%,100%{box-shadow:0 0 0 0 #8E7BFF66}50%{box-shadow:0 0 0 9px #8E7BFF00}}

/* ─────────── diff de config ─────────── */
.diff{display:flex;flex-direction:column;gap:2px;border-radius:var(--rayon);overflow:hidden;border:1px solid var(--bord)}
.diff__ligne{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:14px 20px;background:var(--creme-carte)}
.diff__champ{font:400 11px/1.7 var(--mono);letter-spacing:.08em;color:var(--texte-3);word-break:break-word}
.diff__val{font:300 14px/1.6 var(--sans)}
.diff__avant{color:var(--alerte);text-decoration:line-through;text-decoration-color:#C0392B66;margin-right:10px}
.diff__apres{color:var(--ok)}
@media (max-width:640px){.diff__ligne{grid-template-columns:1fr;gap:6px}}

/* ─────────── config en sections lisibles ─────────── */
.fiche{display:flex;flex-direction:column;gap:14px}
.fiche__bloc{border-radius:var(--rayon);background:var(--creme-carte);border:1px solid var(--bord);padding:20px 24px}
.fiche__bloc h3{font-family:var(--display);font-weight:500;font-size:16px;margin-bottom:12px}
.fiche__ligne{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:7px 0;font:300 14px/1.6 var(--sans)}
.fiche__ligne dt{color:var(--texte-3);font-size:13px}
.fiche__ligne dd{margin:0}
.fiche__liste li{padding:5px 0 5px 18px;position:relative;font:300 14px/1.6 var(--sans)}
.fiche__liste li::before{content:"";position:absolute;left:2px;top:14px;width:5px;height:5px;border-radius:50%;background:var(--violet)}
@media (max-width:640px){.fiche__ligne{grid-template-columns:1fr;gap:2px}}

/* ─────────── aperçu « il dira » ─────────── */
.apercu{border-radius:var(--rayon);background:var(--encre);color:var(--creme);padding:26px 28px;display:flex;flex-direction:column;gap:16px}
.apercu h3{font-family:var(--display);font-weight:500;font-size:16px;color:#F7F6F2a6}
.apercu__dira li{padding:8px 0 8px 20px;position:relative;font:300 15px/1.6 var(--sans)}
.apercu__dira li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--violet)}
.apercu__jamais li{padding:6px 0 6px 20px;position:relative;font:300 13px/1.6 var(--sans);color:#F7F6F273}
.apercu__jamais li::before{content:"×";position:absolute;left:0;top:6px;color:#F0928C}

/* ─────────── modale ─────────── */
.voile{position:fixed;inset:0;z-index:200;background:#0E111766;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:var(--marge)}
.modale{width:min(560px,100%);max-height:86vh;overflow:auto;border-radius:22px;background:var(--creme);padding:30px 32px;display:flex;flex-direction:column;gap:18px;box-shadow:0 40px 90px -30px #0E111780}
.modale__titre{font-family:var(--display);font-weight:500;font-size:22px}
.modale__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* ─────────── toast ─────────── */
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  padding:13px 22px;border-radius:999px;
  background:var(--encre);color:var(--creme);
  font:400 13px/1.4 var(--sans);box-shadow:0 18px 40px -18px #0E111799;
  animation:toast-in .4s var(--ease);max-width:min(520px,86vw);text-align:center;
}
.toast--erreur{background:#3A1210;color:#F5C6C2}
.toast--ok{background:var(--encre)}
.toast--ok b{color:var(--violet)}
@keyframes toast-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ─────────── écrans vides / chargement ─────────── */
.vide{
  padding:clamp(48px,8vw,90px) 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.vide__titre{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,44px);line-height:1.05;text-wrap:balance}
.vide__texte{max-width:420px;font:300 15px/1.65 var(--sans);color:var(--texte-2);text-wrap:pretty}
.squelette{border-radius:var(--rayon);background:linear-gradient(100deg,#EFEDE7 40%,#F5F3EE 50%,#EFEDE7 60%);background-size:200% 100%;animation:brille 1.4s infinite linear;min-height:120px}
@keyframes brille{to{background-position:-200% 0}}

/* ─────────── auth (plein écran) ─────────── */
.auth{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:var(--marge)}
.auth__carte{width:min(440px,100%);display:flex;flex-direction:column;gap:26px}
.auth__marque{display:flex;align-items:center;gap:10px;justify-content:center}
.auth__marque img{height:20px}
.auth__marque span{font-family:var(--serif);font-size:28px}
.auth__titre{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,44px);text-align:center;line-height:1.05}
.auth__panneau{border-radius:22px;background:var(--creme-carte);border:1px solid var(--bord);padding:28px}
.auth__bascule{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:#0E11170a;margin-bottom:22px}
.auth__bascule button{padding:10px;border:0;border-radius:999px;background:transparent;font:500 13px/1 var(--sans);color:var(--texte-2);cursor:pointer;transition:all .25s var(--ease)}
.auth__bascule button[aria-selected="true"]{background:var(--encre);color:var(--creme)}
.auth__pied{text-align:center;font:300 13px/1.6 var(--sans);color:var(--texte-3)}
.auth__pied a,.lien{color:var(--violet-fonce);cursor:pointer;background:none;border:0;padding:0;font:inherit}
.auth__pied a:hover,.lien:hover{text-decoration:underline}

/* ─────────── essai in-app (registre du lecteur d'appel du site) ─────────── */
.essai{
  width:min(640px,100%);max-height:88vh;
  display:flex;flex-direction:column;gap:18px;
  border-radius:22px;background:var(--encre-2);border:1px solid #ffffff14;
  color:var(--creme);padding:28px 30px;
  box-shadow:0 40px 90px -30px #0E1117cc;
}
.essai__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.essai__titre{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,40px);line-height:1}
.essai__etat{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:999px;border:1px solid #ffffff1f;
  font:400 12px/1 var(--mono);letter-spacing:.08em;color:#F7F6F2a6;white-space:nowrap;
}
.essai__points{width:8px;height:8px;border-radius:50%;background:#F7F6F259;transition:background-color .3s}
.essai__etat[data-mode="connexion"] .essai__points{background:var(--ambre);animation:essai-pulse 1s infinite}
.essai__etat[data-mode="ecoute"] .essai__points{background:var(--violet)}
.essai__etat[data-mode="parle"] .essai__points{background:var(--violet);animation:essai-pulse .8s infinite}
@keyframes essai-pulse{0%,100%{opacity:1}50%{opacity:.3}}

.essai__transcript{
  min-height:200px;max-height:44vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
  padding:6px 2px;
}
.essai__accueil{margin:auto;max-width:380px;text-align:center;font:300 15px/1.65 var(--sans);color:#F7F6F280;text-wrap:pretty}
.essai__bulle{
  display:grid;grid-template-columns:84px 1fr;gap:18px;align-items:baseline;
  padding:12px 16px;border-radius:10px;border-left:2px solid transparent;
}
.essai__bulle[data-qui="ia"]{background:#ffffff0a;border-left-color:var(--violet)}
.essai__qui{font:400 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#F7F6F259}
.essai__bulle[data-qui="ia"] .essai__qui{color:var(--violet)}
.essai__bulle p{font:300 15px/1.6 var(--sans);color:var(--creme);text-wrap:pretty}
@media (max-width:640px){.essai__bulle{grid-template-columns:1fr;gap:4px;padding:10px 12px}}

.essai__systeme{
  margin:10px auto 2px;padding:10px 18px;border-radius:999px;
  background:#ffffff0f;border:1px solid #ffffff1a;
  font:400 13px/1.5 var(--sans);color:#F7F6F2a6;text-align:center;max-width:92%;
}
.essai__aide{font:300 13px/1.6 var(--sans);color:#F0928C;text-align:center;min-height:0}
.essai__aide:empty{display:none}
.essai__code{
  display:block;margin:10px auto;padding:10px 14px;border-radius:10px;
  background:#0E1117;border:1px solid #ffffff1f;
  font:400 12px/1.5 var(--mono);color:var(--creme);
  user-select:all;max-width:100%;overflow-x:auto;white-space:nowrap;
}
.essai__actions{display:flex;align-items:center;gap:10px}

/* divers */
.rang{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pousse{flex:1}
.mono{font-family:var(--mono)}
.discret{color:var(--texte-3)}
.separateur{border:0;border-top:1px solid var(--bord-2);margin:26px 0}

/* ── JARVIS : l'usine vocale (carte Théo + transcript de construction) ── */
.jarvis{display:flex;align-items:center;gap:18px;margin:6px 0 22px;padding:18px 20px;
  background:linear-gradient(135deg,var(--violet-pale),transparent 70%);
  border:1px solid var(--violet);border-radius:16px}
.jarvis__orbe{width:44px;height:44px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff9,transparent 45%),var(--violet);
  animation:jarvis-respire 2.6s ease-in-out infinite}
.jarvis__texte{flex:1;min-width:200px}
.jarvis__texte h3{margin:0 0 4px}
@keyframes jarvis-respire{
  0%,100%{box-shadow:0 0 0 0 rgba(142,123,255,.45);transform:scale(1)}
  50%{box-shadow:0 0 0 14px rgba(142,123,255,0);transform:scale(1.06)}}
.jarvis__transcript{border:1px solid var(--bord-2);border-radius:12px;padding:10px 14px}
.jarvis__transcript summary{cursor:pointer;color:var(--texte-3);font:400 13px/1.4 var(--sans)}
.jarvis__transcript pre{margin:10px 0 4px;white-space:pre-wrap;
  font:300 13px/1.6 var(--sans);color:var(--texte-2);max-height:260px;overflow-y:auto}
@media (prefers-reduced-motion: reduce){.jarvis__orbe{animation:none}}
@media (max-width:640px){.jarvis{flex-direction:column;align-items:flex-start}}

/* ── L'interview vocale en empreinte : plein écran, aucun texte pendant
      l'appel. Rien ici ne touche au panneau d'essai classique
      (.essai sans --empreinte). ── */

.voile:has(.essai--empreinte){
  background:var(--creme);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;
  place-items:stretch;
}

.essai--empreinte{
  position:relative;
  width:100%;max-width:none;height:100vh;height:100svh;max-height:none;
  border:0;border-radius:0;
  background:var(--creme);color:var(--encre);
  padding:30px 44px;
  display:flex;flex-direction:column;gap:0;
  box-shadow:none;
}

/* L'empreinte occupe tout le fond ; le texte vit au-dessus. Le :not() est
   indispensable : sans lui la règle suivante repasserait la toile en
   position:relative (même spécificité, déclarée après) et l'objet
   disparaîtrait. */
.essai--empreinte .empreinte{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;
}

.essai--empreinte > *:not(.empreinte){position:relative;z-index:2}

/* En-tête : la marque s'efface pendant l'appel, l'état chiffré disparaît. */
.essai--empreinte .essai__tete{align-items:center;margin:0}
.essai--empreinte .essai__titre{
  font:400 20px/1 var(--serif);
  color:var(--encre);opacity:.34;
}
.essai--empreinte .essai__tete .oeil{display:none}
.essai--empreinte .essai__etat{display:none}

/* La transcription n'est jamais affichée — elle continue d'alimenter
   surTranscript() pour la construction de l'agent. */
.essai--empreinte .essai__transcript{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;min-height:0;padding:0;
}

/* Le mot du moment : avant l'appel, et à la fin. */
.essai--empreinte .essai__scene{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  padding:0 140px 90px;text-align:center;min-height:0;
  transition:opacity .5s var(--ease);
}
.essai--empreinte .essai__accueil{
  margin:0;max-width:520px;
  font:300 17px/1.65 var(--sans);
  color:var(--texte-2);text-wrap:pretty;
}
.essai--empreinte .essai__titre-scene{
  font:400 clamp(40px,4.6vw,60px)/1.04 var(--serif);
  max-width:760px;margin-bottom:18px;text-wrap:balance;
}
.essai--empreinte .essai__systeme{
  max-width:520px;margin:0;padding:0;border:0;background:none;
  font:300 17px/1.65 var(--sans);
  color:var(--texte-2);text-wrap:pretty;
}
.essai--empreinte .essai__aide{
  max-width:520px;margin:0 auto 14px;
  font:300 15px/1.6 var(--sans);color:var(--alerte);
}

.essai--empreinte .essai__actions{
  justify-content:center;gap:14px;
  padding:0 140px 64px;margin:0;border:0;
}
/* .pousse (flex:1) écarte les deux boutons aux extrémités dans le panneau
   classique — en empreinte ils se tiennent ensemble. */
.essai--empreinte .essai__actions .pousse{flex:0}
/* Le bouton « Fermer » porte un style en ligne clair (panneau sombre) :
   sur la crème il faut le forcer, sinon il devient invisible. */
.essai--empreinte .essai__actions .btn--nu{color:var(--texte-2) !important}
.essai--empreinte .essai__actions .btn--nu:hover{color:var(--encre) !important}

.essai--empreinte[data-en-ligne] .essai__scene{opacity:0;pointer-events:none}
.essai--empreinte[data-en-ligne] .essai__actions{
  padding:0 44px 30px;justify-content:flex-end;
}

@media (max-width:720px){
  .essai--empreinte{padding:22px 20px}
  .essai--empreinte .essai__scene{padding:0 20px 60px}
  .essai--empreinte .essai__actions{padding:0 20px 40px}
  .essai--empreinte[data-en-ligne] .essai__actions{padding:0 20px 30px}
}
/* ── Parcours v3 : la création en trois gestes, la plaque comme fil visuel,
      le sceau comme identité d'agent. À coller à la fin de webapp/css/app.css.
      Rien ici ne modifie les classes existantes. ── */

/* ══ La plaque : fond des écrans de création (plaque.js) ══ */
.plaque{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;pointer-events:none;z-index:0;
}
.page--creation{position:relative;min-height:calc(100vh - 68px)}
.page--creation > *:not(.plaque){position:relative;z-index:1}

/* En création, l'app s'efface : la marque en filigrane, une seule sortie. */
.creation__tete{
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 0;
}
.creation__marque{display:flex;align-items:center;gap:11px;opacity:.4}
.creation__marque img{height:15px;width:auto;display:block}
.creation__marque span{font:400 20px/1 var(--serif)}

/* ══ Écrans centrés (site · il lit · construction · il est né) ══ */
.centre{
  min-height:min(620px,calc(100vh - 240px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 40px 60px;
}
.centre--bas{justify-content:flex-end;padding-bottom:96px}
.centre__titre{
  font:400 clamp(38px,4.4vw,60px)/1.04 var(--serif);
  max-width:820px;text-wrap:balance;
}
.centre__sous{
  margin-top:18px;max-width:500px;
  font:300 17px/1.65 var(--sans);color:var(--texte-2);text-wrap:pretty;
}

/* Le champ « votre site » : une seule ligne, pas un formulaire. */
.url{
  margin-top:44px;width:min(560px,100%);
  display:flex;align-items:center;gap:14px;
  border-bottom:1px solid #0E111726;padding-bottom:12px;
}
.url__schema{font:400 15px/1 var(--mono);color:var(--texte-3)}
.url input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;padding:0;
  font:300 28px/1.2 var(--sans);color:var(--encre);
}
.saut{
  padding:0;border:0;background:transparent;cursor:pointer;
  font:400 13px/1.4 var(--sans);color:var(--texte-3);
  border-bottom:1px solid #0E111721;
}
.saut:hover{color:var(--encre)}

/* La barre de progression d'un moment d'attente (il lit · il construit). */
.file{margin-top:32px;width:240px;height:2px;background:#0E11170f;border-radius:2px;overflow:hidden}
.file__barre{width:30%;height:100%;background:var(--violet);animation:file 1.7s cubic-bezier(.4,0,.6,1) infinite}
@keyframes file{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* ══ Le choix : parler ou écrire ══ */
.voies{margin-top:46px;display:flex;gap:20px;align-items:stretch;flex-wrap:wrap;justify-content:center}
.voie{
  width:min(400px,100%);text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:12px;
  padding:32px 34px 30px;border-radius:20px;
  border:1px solid #0E111714;background:var(--creme-carte);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s;
}
.voie:hover{transform:translateY(-3px);border-color:#0E111733}
.voie--vive{border-color:var(--violet);background:var(--violet-pale)}
.voie--vive:hover{box-shadow:0 26px 60px -26px #8E7BFFb3;border-color:var(--violet)}
.voie__oeil{
  display:flex;align-items:center;gap:10px;
  font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--texte-3);
}
.voie--vive .voie__oeil{color:var(--violet-fonce)}
.voie__oeil::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.voie__titre{font:400 34px/1.1 var(--serif);color:var(--encre)}
.voie__texte{font:300 15px/1.6 var(--sans);color:var(--texte-2);text-wrap:pretty}
.voie__suite{
  margin-top:6px;display:inline-flex;align-items:center;gap:9px;
  font:500 14px/1 var(--sans);color:var(--encre);
}
.voie--vive .voie__suite{color:var(--violet-fonce)}

/* Ce que le site a donné, avant le choix. */
.trouve{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;
  padding:8px 16px;border-radius:999px;
  background:var(--violet-pale);color:var(--violet-fonce);
  font:500 12px/1 var(--sans);
}
.trouve::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ══ La liste d'agents : le sceau porte l'identité ══ */
.agent{
  display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;
  padding:24px 28px;border:1px solid #0E111714;border-radius:18px;
  background:var(--creme-carte);cursor:pointer;text-align:left;width:100%;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.agent:hover{transform:translateY(-2px);border-color:#8E7BFF66}
.agent__nom{font:500 24px/1.1 var(--display)}
.agent__corps{display:flex;flex-direction:column;gap:7px;min-width:0}
.agent__metier{font:300 14px/1.55 var(--sans);color:var(--texte-2)}
.agent__pied{font:400 13px/1.4 var(--mono);color:var(--texte-3)}
.agent__fin{display:flex;align-items:center;gap:16px}
.agent__fleche{font:400 20px/1 var(--mono);color:#0E111733}
@media (max-width:720px){
  .agent{grid-template-columns:64px 1fr;gap:18px}
  .agent__fin{grid-column:1 / -1;justify-content:flex-start}
}

/* La santé globale (7 jours, /observabilite) sous le titre. */
.sante{display:flex;align-items:center;gap:12px;margin-bottom:34px;flex-wrap:wrap}
.sante__texte{font:300 14px/1.5 var(--sans);color:var(--texte-3)}

/* ══ La fiche : le sceau en tête ══ */
.fiche__tete{display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:center}
.fiche__actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
@media (max-width:720px){
  .fiche__tete{grid-template-columns:80px 1fr}
  .fiche__actions{grid-column:1 / -1}
}

/* ══ L'essai en plein écran : on lit pour vérifier ══ */
.essai--plein{
  position:relative;width:100%;max-width:none;height:100vh;max-height:none;
  border:0;border-radius:0;padding:0;
  background:var(--creme);color:var(--encre);box-shadow:none;
  display:flex;flex-direction:column;gap:0;
}
.voile:has(.essai--plein){background:var(--creme);backdrop-filter:none;padding:0;align-items:stretch}

.essai__plein-tete{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:820px;width:100%;margin:0 auto;padding:20px 40px 0;
}
.essai__plein-nom{font:400 40px/1 var(--serif)}
.essai__plein-corps{flex:1;min-height:0;overflow-y:auto;max-width:820px;width:100%;margin:0 auto;padding:0 40px 70px}

/* Un tour de parole : qui, puis ce qui est dit. */
.tour{
  display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid #0E11170f;
}
.tour__qui{
  font:400 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--texte-3);
}
.tour[data-qui="ia"] .tour__qui{color:var(--violet-fonce)}
.tour__corps{display:flex;flex-direction:column;gap:10px;min-width:0}
.tour__texte{font:300 18px/1.6 var(--sans);color:var(--encre);text-wrap:pretty}
@media (max-width:720px){
  .tour{grid-template-columns:1fr;gap:6px}
}

/* Signaler une réponse, sans quitter l'appel. */
.tour__signaler{
  align-self:flex-start;padding:8px 14px;
  border:1px solid #0E111714;border-radius:999px;background:transparent;
  font:400 12px/1 var(--sans);color:var(--texte-3);cursor:pointer;
  transition:color .25s,border-color .25s,background-color .25s;white-space:nowrap;
}
.tour__signaler:hover{color:var(--violet-fonce);border-color:#8E7BFF66;background:var(--violet-pale)}

.correction{
  align-self:stretch;padding:20px 22px;border-radius:16px;
  border:1px solid #8E7BFF3d;background:var(--violet-pale);
  animation:monte .35s cubic-bezier(.16,1,.3,1);
}
.correction__invite{font:400 13px/1.4 var(--sans);color:var(--violet-fonce);margin-bottom:12px}
.correction__saisie{display:flex;align-items:flex-start;gap:12px}
.correction textarea{
  flex:1;min-width:0;padding:14px 16px;resize:none;outline:none;
  border:1px solid #8E7BFF3d;border-radius:12px;background:#fff;
  font:300 16px/1.5 var(--sans);color:var(--encre);
}
.correction__micro{
  width:48px;height:48px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid #8E7BFF3d;background:#fff;color:var(--violet-fonce);
  font:400 16px/1 var(--sans);transition:background-color .25s,color .25s,border-color .25s;
}
.correction__micro:hover,.correction__micro--actif{background:var(--violet);color:#fff;border-color:var(--violet)}
.correction__pied{margin-top:12px;display:flex;align-items:center;gap:12px}

/* Une correction retenue, posée sous la phrase qu'elle remplace. */
.aLaPlace{
  align-self:stretch;display:flex;flex-direction:column;gap:5px;
  padding:13px 17px;border-left:2px solid var(--violet);background:#EDE9FF80;
}
.aLaPlace__oeil{
  font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet-fonce);
}
.aLaPlace__texte{font:300 16px/1.5 var(--sans);color:var(--encre);text-wrap:pretty}

/* Le bilan au raccrochage. */
.bilan{margin-top:32px;animation:monte .5s cubic-bezier(.16,1,.3,1)}
.bilan__titre{font:400 34px/1.1 var(--serif)}
.bilan__ligne{display:flex;flex-direction:column;gap:7px;padding:16px 0;border-bottom:1px solid #0E11170f}
.bilan__dit{font:300 15px/1.5 var(--sans);color:var(--texte-3);text-decoration:line-through;text-wrap:pretty}
.bilan__voulu{font:300 17px/1.55 var(--sans);color:var(--encre);text-wrap:pretty}
.bilan__actions{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

@keyframes monte{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ══ Numéros : des cartes plutôt qu'un tableau ══ */
.numero{
  display:grid;grid-template-columns:1fr 220px auto;gap:24px;align-items:center;
  padding:22px 26px;border:1px solid #0E111714;border-radius:18px;
  background:var(--creme-carte);
}
.numero__e164{font:400 21px/1 var(--mono)}
.numero__note{font:300 14px/1.55 var(--sans);color:var(--texte-2)}
.numero__sens{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-3)}
.numero__agent{display:flex;flex-direction:column;gap:7px}
.numero__actions{display:flex;align-items:center;gap:16px}
@media (max-width:900px){
  .numero{grid-template-columns:1fr}
  .numero__actions{flex-wrap:wrap}
}
.etiquette{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3)}

/* Les codes de renvoi : quatre cas, pas un. */
.renvoi__ligne{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid #0E11170f;
}
.renvoi__cas{font:300 15px/1.4 var(--sans);color:var(--encre)}
.renvoi__codes{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.renvoi__activer{font:400 16px/1 var(--mono);color:var(--encre)}
.renvoi__annuler{font:400 12px/1 var(--mono);color:var(--texte-3)}

/* Le diff : un libellé lisible, jamais le chemin brut de la config. */
.diff__ligne{grid-template-columns:200px minmax(0,1fr)}
.diff__champ{min-width:0;overflow-wrap:break-word}

/* Le sceau de l'état vide : une forme en filigrane, pas une illustration. */
.vide canvas{opacity:.24;margin-bottom:32px}

/* Mode plein : les commandes et l'état MIGRENT dans .essai__plein-tete —
   l'ancienne tête et la barre d'actions n'ont plus rien à porter. */
.essai--plein .essai__tete{display:none}
.essai--plein .essai__actions{display:none}
/* Sans ceci, .essai__transcript garderait sa max-height de modale (44vh). */
.essai--plein .essai__plein-corps{max-height:none;min-height:0;padding-top:26px}
.essai--plein .essai__aide{max-width:820px;width:100%;margin:0 auto;padding:0 40px 12px}
.essai--plein .essai__plein-tete .essai__etat{
  border-color:#0E111721;color:var(--texte-2);background:transparent;
}
.essai--plein .essai__plein-tete .essai__points{background:#0E111733}
@media (max-width:720px){
  .essai__plein-tete{padding:16px 20px 0}
  .essai--plein .essai__plein-corps{padding-left:20px;padding-right:20px}
  .essai--plein .essai__aide{padding:0 20px 12px}
}

/* En création, l'app s'efface POUR DE BON : l'en-tête applicative doublait la
   marque et offrait une deuxième sortie (le tunnel pose la sienne). */
body:has(.page--creation) .entete{display:none}
/* Pleine largeur : la plaque tient tout l'écran et le choix « parler ou
   écrire » se lit d'un coup d'œil (deux colonnes, pas deux étages). Les
   écrans qui ont besoin d'une colonne de lecture posent .creation__colonne. */
.page--creation{padding-top:0;padding-bottom:0;min-height:100vh;max-width:none}
.creation__tete,.creation__colonne{
  max-width:1080px;width:100%;margin-left:auto;margin-right:auto;
}
.creation__colonne{max-width:760px}



/* ══ La fiche d'agent, d'après la maquette « App v3 » ══════════════════════
   La demande est l'action principale : elle vit dans un panneau violet sous
   l'en-tête, elle annonce ce qui va se passer, et le diff s'ouvre juste en
   dessous. La config se lit en deux colonnes de phrases, pas en tableau. */

.retour{
  display:inline-block;margin-bottom:26px;padding:0;border:0;background:transparent;
  font:400 13px/1 var(--sans);color:var(--texte-3);cursor:pointer;
}
.retour:hover{color:var(--encre)}

.demandeur{
  margin-top:40px;padding:26px 28px;
  border:1px solid #8E7BFF3d;border-radius:20px;background:var(--violet-pale);
}
.demandeur__rang{display:flex;align-items:center;gap:12px}
.demandeur__champ{
  flex:1;min-width:0;padding:16px 20px;
  border:1px solid #8E7BFF3d;border-radius:14px;background:#fff;
  font:300 16px/1.4 var(--sans);color:var(--encre);outline:none;
}
.demandeur__champ:focus{border-color:var(--violet)}
.demandeur .demande__micro{
  width:52px;height:52px;flex:none;border-radius:50%;
  border:1px solid #8E7BFF3d;background:#fff;color:var(--violet-fonce);
  font:400 17px/1 var(--sans);cursor:pointer;display:grid;place-items:center;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.demandeur .demande__micro:hover,
.demandeur .demande__micro--actif{background:var(--violet);color:#fff;border-color:var(--violet)}
.demandeur__note{margin-top:14px;font:300 13px/1.5 var(--sans);color:var(--texte-3)}
.demandeur__note--essai{color:var(--violet-fonce)}

.propose{
  margin-top:22px;padding:26px 28px;
  border:1px solid #0E111714;border-radius:20px;background:#fff;
  animation:monte .4s var(--ease);
}
.propose__tete{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.propose__titre{font:500 20px/1.1 var(--display)}
.propose__note{font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--texte-3)}
.propose__note--essai{color:var(--violet-fonce)}
.propose .diff{border:0;border-radius:0;gap:0;background:transparent}
.propose .diff__ligne{
  background:transparent;padding:13px 0;align-items:baseline;
  border-bottom:1px solid #0E11170f;
}
.propose .diff__val{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;min-width:0}
.propose__actions{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.propose__version{font:300 13px/1.5 var(--sans);color:var(--texte-3)}

/* Les suggestions viennent AVANT la config : ce qu'il rate se voit dans ses
   appels, pas dans sa fiche. */
.suggest{margin-top:40px;padding-top:24px;border-top:1px solid #0E11170f}
.suggest__tete{display:flex;align-items:center;gap:18px}
.suggest__titre{font:500 20px/1.1 var(--display)}
.suggest__vide{margin-top:14px;font:300 14px/1.6 var(--sans);color:var(--texte-3)}
.suggest__liste{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.suggest__item{
  text-align:left;padding:11px 17px;border-radius:14px;
  border:1px solid #8E7BFF3d;background:var(--violet-pale);
  font:400 14px/1.4 var(--sans);color:var(--encre);cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.suggest__item:hover{background:#fff;border-color:var(--violet)}

/* Sa config, en clair : deux colonnes de phrases. */
.briefing{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;align-items:start}
.briefing__bloc{display:flex;flex-direction:column;gap:12px}
.briefing__titre{
  font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--texte-3);
}
.briefing__ligne{
  font:300 16px/1.6 var(--sans);color:var(--encre);
  padding-bottom:11px;border-bottom:1px solid #0E11170f;text-wrap:pretty;
}
.briefing__ligne select{
  margin-left:8px;padding:6px 10px;border:1px solid #0E111721;border-radius:9px;
  background:#fff;font:300 15px/1.3 var(--sans);
}
@media (max-width:820px){.briefing{grid-template-columns:1fr}}

/* L'historique : une grille, pas un tableau — chaque changement est une version. */
.histo{margin-top:46px;padding-top:24px;border-top:1px solid #0E11170f}
.histo__tete{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.histo__titre{font:500 20px/1.1 var(--display)}
.histo__ligne{
  display:grid;grid-template-columns:90px 1fr 190px 190px;gap:20px;align-items:center;
  padding:13px 0;border-bottom:1px solid #0E11170f;
}
.histo__ligne--tete{padding:0 0 10px;border-bottom:1px solid #0E111721}
.histo__col{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3)}
.histo__num{font:400 13px/1 var(--mono)}
.histo__origine{font:300 14px/1.5 var(--sans);color:var(--texte-2)}
.histo__date{font:300 14px/1.5 var(--sans);color:var(--texte-3)}
.histo__revenir{
  padding:0;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font:400 13px/1 var(--sans);color:var(--violet-fonce);border-bottom:1px solid #7B5CF64d;
}
@media (max-width:820px){
  .histo__ligne{grid-template-columns:70px 1fr;gap:8px 14px}
  .histo__ligne--tete{display:none}
  .histo__date,.histo__ligne > span:last-child{grid-column:2}
}

/* Supprimer ne se met pas à côté des actions courantes : c'est définitif. */
.fiche__fin{margin-top:36px;display:flex;align-items:center}

/* Le point qui dit « ça décroche » : sur les boutons d'appel de la maquette. */
.point-blanc{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ══ « Il est né » : la preuve en deux colonnes ══════════════════════════════
   Ce qu'il a trouvé sur le site (à cocher) d'un côté, ce qu'on a vérifié pour
   vous de l'autre. Séparé du titre par un filet : le haut célèbre, le bas
   prouve. */
.preuve{
  margin-top:56px;padding:56px 0 0;border-top:1px solid #0E11170f;
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
  text-align:left;
}
.preuve__bloc{display:flex;flex-direction:column;gap:16px}
.preuve__tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.preuve__titre{font:500 20px/1.1 var(--display)}
.preuve__note{font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--texte-3)}
.preuve__texte{font:300 14px/1.6 var(--sans);color:var(--texte-2);text-wrap:pretty}
.preuve__faits{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.preuve__fait{
  display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-radius:12px;
  background:var(--creme-carte);cursor:pointer;transition:background-color .25s var(--ease);
}
.preuve__fait:hover{background:var(--violet-pale)}
.preuve__fait input{margin-top:2px;accent-color:var(--violet-fonce);width:15px;height:15px}
.preuve__fait span{font:300 14px/1.55 var(--sans);color:var(--encre)}
.preuve__verifs{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.preuve__verif{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #0E11170f}
.preuve__coche{margin-top:1px;font:400 13px/1.4 var(--mono);color:var(--ok)}
.preuve__coche--rate{color:var(--ambre)}
.preuve__verif span:last-child{font:300 14px/1.55 var(--sans);color:var(--texte-2)}
@media (max-width:820px){.preuve{grid-template-columns:1fr;gap:36px}}
/* La preuve a besoin de plus de large que la colonne de lecture du titre. */
.creation__colonne--large{max-width:1060px}
/* Sans site lu, il ne reste que la vérification : elle prend toute la largeur
   et se lit en deux colonnes plutôt que de laisser un vide à droite. */
.preuve__bloc:only-child{grid-column:1 / -1}
.preuve__bloc:only-child .preuve__verifs{columns:2;column-gap:44px}
.preuve__bloc:only-child .preuve__verif{break-inside:avoid}

/* ── L'essai plein écran : les détails de la maquette ── */
.essai__sortie{
  max-width:820px;width:100%;margin:0 auto;padding:20px 40px 0;
  display:flex;justify-content:flex-end;
}
.essai__fermer{
  padding:10px 17px;border:1px solid #0E111714;border-radius:999px;
  background:#F7F6F2b3;color:var(--texte-3);font:400 12px/1 var(--sans);
}
.essai__fermer:hover{color:var(--encre);border-color:#0E111733}
.essai--plein .essai__plein-tete{padding-top:6px}

/* L'état pendant l'appel : trois points qui respirent, dans une pastille
   violette — le même signal que l'onde de l'interview. */
.essai--plein .essai__plein-tete .essai__etat{
  padding:11px 18px;border:0;border-radius:999px;
  background:var(--violet-pale);color:var(--violet-fonce);
  font:400 13px/1 var(--sans);letter-spacing:0;
}
.essai--plein .essai__plein-tete .essai__points{
  position:relative;width:4px;height:4px;margin:0 7px;
  background:currentColor;animation:essai-points 1s ease-in-out infinite;
}
.essai--plein .essai__plein-tete .essai__points::before,
.essai--plein .essai__plein-tete .essai__points::after{
  content:"";position:absolute;top:0;width:4px;height:4px;border-radius:50%;
  background:currentColor;animation:essai-points 1s ease-in-out infinite;
}
.essai--plein .essai__plein-tete .essai__points::before{left:-7px;animation-delay:-.18s}
.essai--plein .essai__plein-tete .essai__points::after{left:7px;animation-delay:.18s}
@keyframes essai-points{0%,100%{opacity:.85}50%{opacity:.1}}
/* Au repos, les points ne clignotent pas : rien ne se passe. */
.essai--plein .essai__etat[data-mode="repos"] .essai__points,
.essai--plein .essai__etat[data-mode="repos"] .essai__points::before,
.essai--plein .essai__etat[data-mode="repos"] .essai__points::after{animation:none;opacity:.4}
.essai--plein .essai__etat[data-mode="repos"]{background:#0E11170a;color:var(--texte-3)}
@media (prefers-reduced-motion: reduce){
  .essai--plein .essai__points,
  .essai--plein .essai__points::before,
  .essai--plein .essai__points::after{animation:none}
}
@media (max-width:720px){.essai__sortie{padding:12px 20px 0}}
/* Le bilan précède l'échange : il lui faut un souffle avant la transcription. */
.essai--plein .bilan{margin-top:20px;padding-bottom:34px;border-bottom:1px solid #0E11170f}

/* ══ Numéros : les actions sont des liens, pas des boutons ══════════════════
   Trois actions par carte : celle qui sert (les codes) est violette, les deux
   autres restent en retrait. */
.numero__actions .btn--nu{padding:0;border:0;background:transparent;white-space:nowrap;
  font:400 13px/1 var(--sans);color:var(--texte-3)}
.numero__actions .btn--nu:first-child{
  color:var(--violet-fonce);border-bottom:1px solid #7B5CF64d;
}
.numero__actions .btn--nu:hover{color:var(--encre)}
.numero__agent select{
  padding:12px 14px;border:1px solid #0E111721;border-radius:12px;background:#fff;
  font:300 15px/1 var(--sans);outline:none;width:100%;
}

/* Les codes de renvoi : un titre qui dit vers OÙ, et quatre cas lisibles. */
.renvoi__cible{font:400 26px/1.2 var(--mono)}

/* ══ Numéros : les blocs d'action, au registre de la maquette ══════════════ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.bloc{
  display:flex;flex-direction:column;gap:12px;
  padding:26px 28px;border:1px solid #0E111714;border-radius:18px;
  background:var(--creme-carte);
}
.bloc__titre{font:500 18px/1.15 var(--display)}
.bloc__texte{font:300 14px/1.55 var(--sans);color:var(--texte-2);text-wrap:pretty}
.bloc__rang{margin-top:4px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bloc__rang input,.bloc__rang select{
  flex:1;min-width:0;padding:14px 16px;border:1px solid #0E111721;border-radius:12px;
  background:#fff;font:300 15px/1 var(--sans);outline:none;
}
.bloc__rang input{font:400 15px/1 var(--mono)}
.bloc__rang input:focus,.bloc__rang select:focus{border-color:#8E7BFF99}
.bloc .champ input,.bloc .champ select,.bloc .champ textarea{border-radius:12px}
.bloc textarea{
  padding:12px 14px;border:1px solid #0E111721;border-radius:12px;background:#fff;
  font:400 14px/1.6 var(--mono);resize:none;outline:none;
}
.bloc textarea:focus{border-color:#8E7BFF99}
.bloc__lien{
  align-self:flex-start;padding:0;border:0;background:transparent;cursor:pointer;
  font:400 13px/1 var(--sans);color:var(--texte-3);
}
.bloc__lien:hover{color:var(--encre)}

/* ══════════════════════════════════════════════════════════════════════════
   v5 « Sans friction » — la coquille : un rail à gauche, la page au centre,
   un panneau à droite quand on écoute un agent. Plus d'en-tête horizontale :
   la navigation ne bouge plus quand on descend dans une page.
   ══════════════════════════════════════════════════════════════════════════ */
.app{display:flex;min-height:100vh;background:var(--creme)}
.app #contenu{flex:1;min-width:0;background:var(--creme)}
body:has(.rail:not([hidden])) #contenu{max-height:100vh;overflow-y:auto}

.rail{
  width:var(--rail);flex:none;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;padding:16px 0 0;
  background:var(--carte);border-right:1px solid var(--bord-2);
}
.rail[hidden]{display:none}
.rail__marque{display:flex;align-items:center;gap:10px;padding:0 18px 16px}
.rail__marque img{height:15px;width:auto;display:block}
.rail__marque span{font:400 20px/1 var(--serif)}

.rail__espace{
  margin:0 10px 12px;display:flex;align-items:center;gap:10px;min-height:38px;
  padding:8px 11px;border:1px solid var(--bord-2);border-radius:9px;
  background:#0E111705;color:var(--encre);cursor:pointer;text-align:left;
  transition:background-color .18s var(--ease);
}
.rail__espace:hover{background:#0E11170a}
.rail__initiales{
  width:22px;height:22px;flex:none;border-radius:6px;background:var(--action);
  display:grid;place-items:center;font:500 11px/1 var(--sans);color:#fff;
}
.rail__espace-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rail__entreprise{font:500 12px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail__plan{font:400 10px/1.2 var(--sans);color:var(--gris)}
.rail__chevron{font:400 9px/1 var(--mono);color:var(--gris)}

.rail__creer{
  margin:0 10px 16px;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:10px 12px;border-radius:9px;
  background:var(--action);color:#fff;font:500 13px/1 var(--sans);
  transition:background-color .18s var(--ease);
}
.rail__creer:hover{background:var(--action-fonce);color:#fff}

.rail__nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:0 10px}
.rail__section{
  padding:14px 11px 6px;font:500 9px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gris);
}
.rail__lien{
  display:flex;align-items:center;gap:10px;width:100%;min-height:34px;
  padding:8px 11px;border:0;border-radius:8px;background:transparent;
  color:var(--texte-2);font:400 13px/1.2 var(--sans);cursor:pointer;text-align:left;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.rail__lien:hover{background:#0E11170a;color:var(--encre)}
.rail__lien[aria-current="page"]{background:var(--action-pale);color:var(--encre);font-weight:500}
.rail__nom{flex:1;min-width:0}
.rail__compteur{font:400 11px/1 var(--sans);color:var(--gris)}
.rail__lien[aria-current="page"] .rail__compteur{font-weight:500;color:var(--action)}
.rail__alerte{
  min-width:18px;padding:2px 6px;border-radius:5px;text-align:center;
  background:var(--ambre-fond);color:var(--ambre-encre);font:500 11px/1.3 var(--sans);
}

.rail__pied{padding:12px 10px;border-top:1px solid var(--bord);display:flex;flex-direction:column;gap:9px}
.rail__compte{display:flex;align-items:center;gap:9px;padding:0 3px}
.rail__avatar{
  width:24px;height:24px;flex:none;border-radius:50%;background:var(--bord);
  display:grid;place-items:center;font:500 10px/1 var(--sans);color:var(--texte-2);
}
.rail__email{
  flex:1;min-width:0;font:400 11px/1.3 var(--sans);color:var(--texte-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rail__sortie{
  flex:none;width:34px;height:34px;margin:-4px;display:grid;place-items:center;
  border:0;border-radius:7px;background:transparent;cursor:pointer;
  font:400 12px/1 var(--mono);color:var(--gris);transition:background-color .18s var(--ease);
}
.rail__sortie:hover{background:var(--bord);color:var(--encre)}
.rail__quota{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 3px}
.rail__quota[hidden]{display:none}
.rail__quota span{font:400 10px/1.3 var(--sans);color:var(--gris)}
.rail__recharger{
  min-height:34px;padding:9px 8px;margin:-9px -8px;display:inline-flex;align-items:center;
  border-radius:7px;font:500 10px/1 var(--sans);color:var(--action);white-space:nowrap;
  transition:background-color .18s var(--ease);
}
.rail__recharger:hover{background:var(--action-pale);color:var(--action)}

/* La page, dans la coquille : plus de padding d'en-tête fixe. */
.app .page{max-width:880px;margin:0;padding:44px 44px 70px}
.app .page--large{max-width:940px}
.app .page--etroite{max-width:800px}

@media (max-width:900px){
  .app{flex-direction:column}
  .rail{width:auto;position:static;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:10px;padding:10px 14px;border-right:0;
    border-bottom:1px solid var(--bord-2)}
  .rail__marque{padding:0}
  .rail__espace,.rail__creer{margin:0}
  .rail__nav{flex:1 0 100%;flex-direction:row;overflow-x:auto;padding:0}
  .rail__section{display:none}
  .rail__pied{flex:1 0 100%;border-top:0;padding:0}
  .app .page{padding:26px 20px 60px}
}

/* ── Les composants passent à la v5 : rayons courts, cartes blanches, violet
      d'action plus dense. Les classes ne changent pas de nom pour que les
      pages restent lisibles d'une version à l'autre. ── */
.btn{border-radius:10px;padding:13px 20px;min-height:46px;font:500 14px/1 var(--sans)}
.btn--violet{background:var(--action);box-shadow:none}
.btn--violet:hover:not(:disabled){background:var(--action-fonce)}
.btn--encre{background:var(--encre);color:var(--creme)}
.btn--encre:hover:not(:disabled){background:var(--encre);opacity:.86}
.btn--ligne{border-color:#0E111733;background:var(--carte)}
.btn--danger{border-color:#C0392B40;color:var(--rouge)}
.btn--nu{min-height:40px;padding:10px 12px;border-radius:8px;color:var(--gris)}
.btn--nu:hover:not(:disabled){background:#0E11170a;color:var(--encre)}
.btn--petit{min-height:42px;padding:11px 18px;font:500 13px/1 var(--sans)}

.carte{background:var(--carte);border-color:var(--bord-2);border-radius:16px;padding:22px 24px}
a.carte:hover,button.carte:hover{background:var(--carte);border-color:#0E111733}
.carte__titre{font:500 17px/1.2 var(--sans)}
.carte__sous{font:400 14px/1.55 var(--sans);color:var(--texte-2)}

.pastille{
  padding:4px 10px;border-radius:5px;text-transform:none;letter-spacing:0;
  font:500 12px/1.3 var(--sans);
}
.pastille--ok{background:var(--vert-fond);color:var(--vert)}
.pastille--attente{background:var(--ambre-fond);color:var(--ambre-encre)}
.pastille--erreur{background:#C0392B12;color:var(--rouge)}
.pastille--violet{background:var(--action-pale);color:var(--action)}
.pastille--off{background:#0E11170a;color:var(--texte-2)}

.oeil{font:500 11px/1 var(--sans);letter-spacing:.24em;color:var(--action);margin-bottom:12px}
.page__titre{font:400 40px/1.05 var(--serif)}
.page__sous{font:400 15px/1.5 var(--sans);color:var(--gris);margin-top:8px}
.section__titre{font:500 20px/1.2 var(--sans)}
.section__note{font:400 13px/1.4 var(--sans);letter-spacing:0;color:var(--gris)}
.discret{color:var(--gris)}
.toast{border-radius:11px;font:400 14px/1.5 var(--sans)}

/* Le titre d'un écran de compte : œil violet, titre serif, sous-titre gris. */
.tete{margin-bottom:28px}
.tete__rang{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.tete__rang > :first-child{flex:1;min-width:260px}

/* ══ Le panneau de droite : l'essai en direct, ou un appel passé ══════════ */
.panneau{
  width:var(--panneau-l);flex:none;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;background:var(--carte);
  border-left:1px solid var(--bord-2);animation:glisse .4s var(--ease);
}
.panneau[hidden]{display:none}
@keyframes glisse{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.panneau__tete{
  flex:none;display:flex;align-items:center;gap:13px;
  padding:18px 22px;border-bottom:1px solid var(--bord);
}
.panneau__qui{display:flex;flex-direction:column;gap:3px;min-width:0}
.panneau__moment{font:400 13px/1.2 var(--sans);color:var(--gris)}
.panneau__nom{font:500 16px/1.2 var(--sans)}
.panneau__fermer{
  width:36px;height:36px;flex:none;border:0;border-radius:9px;background:transparent;
  color:var(--gris);font:400 17px/1 var(--mono);cursor:pointer;
  transition:background-color .2s var(--ease);
}
.panneau__fermer:hover{background:var(--bord)}
.panneau__corps{flex:1;min-height:0;overflow-y:auto;padding:22px}
.panneau__pied:not(:empty){
  flex:none;display:flex;align-items:center;gap:12px;
  padding:16px 22px;border-top:1px solid var(--bord);
}
.panneau__entete-appel{
  margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--bord);
  display:flex;flex-direction:column;gap:7px;
}
.panneau__quand{font:400 14px/1.4 var(--sans);color:var(--gris)}
.panneau__objet{font:400 17px/1.45 var(--sans);text-wrap:pretty}
.panneau__vide{font:400 15px/1.65 var(--sans);color:var(--gris);text-wrap:pretty}

/* Le fil : un tour de parole après l'autre, qui parle en petites capitales. */
.essai__fil,.fil{display:flex;flex-direction:column;gap:0;max-height:none;min-height:0;padding:0}
.panneau .tour,.fil__tour{
  display:flex;flex-direction:column;gap:9px;padding:14px 0;
  border-bottom:1px solid var(--bord);
}
.panneau .tour__qui,.fil__qui{
  font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.panneau .tour[data-qui="ia"] .tour__qui,.fil__qui--lui{color:var(--action)}
.panneau .tour__texte,.fil__texte{font:400 16px/1.65 var(--sans);text-wrap:pretty}
.panneau .tour__corps{display:flex;flex-direction:column;gap:9px;min-width:0}
.panneau .tour__signaler{
  align-self:flex-start;min-height:42px;padding:11px 15px;border-radius:9px;
  border:1px solid var(--bord-2);background:transparent;color:var(--gris);
  font:400 14px/1 var(--sans);cursor:pointer;white-space:nowrap;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.panneau .tour__signaler:hover{color:var(--action);border-color:#8E7BFF66;background:var(--action-pale)}
.panneau .correction{padding:16px;border-radius:12px;gap:12px}
.panneau .correction textarea{font:400 15px/1.55 var(--sans);border-radius:9px}
.panneau .correction__micro{width:44px;height:44px;border-radius:9px}
.panneau .aLaPlace{padding:12px 15px}
.panneau .bilan{margin-top:0;padding-bottom:0;border-bottom:0}
.panneau .bilan__titre{font:400 28px/1.15 var(--serif)}
.panneau .essai__aide{padding:0;margin-top:12px}
.panneau .essai__etat{
  padding:10px 15px;border:0;border-radius:9px;background:var(--action-pale);
  color:var(--action);font:400 14px/1 var(--sans);letter-spacing:0;
}
.panneau .essai__etat[data-mode="repos"]{background:#0E11170a;color:var(--gris)}
.panneau .essai__points{
  position:relative;width:5px;height:5px;margin:0 8px;background:currentColor;
  animation:battement 1s ease-in-out infinite;
}
.panneau .essai__points::before,.panneau .essai__points::after{
  content:"";position:absolute;top:0;width:5px;height:5px;border-radius:50%;
  background:currentColor;animation:battement 1s ease-in-out infinite;
}
.panneau .essai__points::before{left:-8px;animation-delay:-.18s}
.panneau .essai__points::after{left:8px;animation-delay:.18s}
.panneau .essai__etat[data-mode="repos"] .essai__points,
.panneau .essai__etat[data-mode="repos"] .essai__points::before,
.panneau .essai__etat[data-mode="repos"] .essai__points::after{animation:none;opacity:.4}
@keyframes battement{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .panneau .essai__points,.panneau .essai__points::before,
  .panneau .essai__points::after{animation:none}
}
@media (max-width:1100px){
  .panneau{position:fixed;inset:0;width:auto;z-index:200;border-left:0}
}

/* ══ La liste d'agents, et le premier écran quand il n'y en a aucun ══════ */
.liste{display:flex;flex-direction:column;gap:12px}
.agent{
  display:grid;grid-template-columns:64px minmax(0,1fr) 22px;gap:22px;align-items:center;
  padding:22px 24px;border:1px solid var(--bord-2);border-radius:16px;background:var(--carte);
  cursor:pointer;text-align:left;
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.agent:hover{transform:translateY(-2px);border-color:#0E111733}
.agent__corps{display:flex;flex-direction:column;gap:7px;min-width:0}
.agent__nom{font:500 21px/1.2 var(--sans);color:var(--encre)}
.agent__role{font:400 14px/1.4 var(--sans);color:var(--gris)}
.agent__etat{display:inline-flex;align-items:center;gap:8px;font:400 14px/1.4 var(--sans);color:var(--vert)}
.agent__point{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.agent__etat--manque{color:var(--ambre-encre)}
.agent__etat--manque .agent__point{background:transparent;border:1.5px solid currentColor}
.agent__fleche{font:400 20px/1 var(--mono);color:#0E111740}
@media (max-width:640px){
  .agent{grid-template-columns:48px minmax(0,1fr);gap:16px}
  .agent__fleche{display:none}
}

.bienvenue{padding-top:26px;max-width:640px}
.bienvenue__titre{font:400 52px/1.08 var(--serif);max-width:600px;text-wrap:balance}
.bienvenue__sous{margin-top:18px;max-width:500px;font:400 17px/1.65 var(--sans);color:var(--texte-2);text-wrap:pretty}
.btn--grand{min-height:52px;padding:16px 30px;border-radius:11px;font:500 16px/1 var(--sans);margin-top:34px}
.bienvenue__comment{margin-top:48px;padding-top:30px;border-top:1px solid var(--bord)}
.bienvenue__comment h2{font:500 14px/1 var(--sans);color:var(--gris);margin-bottom:20px}
.bienvenue__etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.etape{display:flex;flex-direction:column;gap:8px}
.etape__n{font:400 15px/1.2 var(--mono);color:var(--action)}
.etape__titre{font:500 16px/1.3 var(--sans)}
.etape__texte{font:400 14px/1.6 var(--sans);color:var(--gris);text-wrap:pretty}
.bienvenue__pied{margin-top:32px;max-width:520px;font:400 14px/1.6 var(--sans);color:var(--gris);text-wrap:pretty}
@media (max-width:720px){.bienvenue__etapes{grid-template-columns:1fr;gap:20px}}

/* ══ La fiche d'un agent (v5) ═══════════════════════════════════════════ */
.retour{
  display:inline-flex;align-items:center;gap:8px;min-height:42px;
  font:400 14px/1 var(--sans);color:var(--gris);margin-bottom:22px;
}
.retour:hover{color:var(--encre)}
.fiche5__tete{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fiche5__qui{display:flex;flex-direction:column;gap:6px;min-width:0}
.fiche5__nom{font:400 38px/1 var(--serif)}
.fiche5__role{font:400 15px/1.4 var(--sans);color:var(--gris)}

/* Le statut du numéro : la première phrase de la fiche, avec son action. */
.statut{
  margin-top:30px;padding:26px 28px;border-radius:16px;
  display:flex;align-items:flex-start;gap:14px;
}
.statut--ok{border:1px solid var(--vert-bord);background:#3D8B600a}
.statut--manque{border:1px solid var(--ambre-bord);background:#B07C220a}
.statut__point{width:11px;height:11px;flex:none;margin-top:8px;border-radius:50%}
.statut--ok .statut__point{background:var(--vert)}
.statut--manque .statut__point{border:2px solid var(--ambre-encre)}
.statut__corps{flex:1;min-width:0}
.statut__titre{font:400 24px/1.35 var(--sans);text-wrap:pretty}
.statut__num{font:400 24px/1.35 var(--mono)}
.statut__texte{margin-top:10px;max-width:560px;font:400 15px/1.6 var(--sans);color:var(--texte-2);text-wrap:pretty}
.statut__actions{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.statut__note{font:400 14px/1.5 var(--sans);color:var(--gris)}

.bloc5{margin-top:44px}
.bloc5__titre{font:500 20px/1.2 var(--sans);margin-bottom:6px}
.bloc5__sous{font:400 15px/1.55 var(--sans);color:var(--gris);margin-bottom:20px;text-wrap:pretty}
.bloc5__rang{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.lien-doux{
  min-height:40px;padding:10px 12px;margin:-10px -12px;display:inline-flex;
  align-items:center;border-radius:8px;color:var(--action);font:400 14px/1 var(--sans);
  cursor:pointer;transition:background-color .2s var(--ease);
}
.lien-doux:hover{background:#0E11170a;color:var(--action)}
.pointille{
  padding:20px 22px;border:1px dashed #0E111721;border-radius:14px;
  font:400 15px/1.6 var(--sans);color:var(--gris);text-wrap:pretty;
}

/* La demande : un champ dans un cadre violet clair, et le résultat dessous. */
.demandeur{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid #8E7BFF3d;border-radius:14px;background:var(--action-pale);
}
.demandeur__rang{display:flex;align-items:center;gap:12px;width:100%}
.demandeur__champ{
  flex:1;min-width:0;min-height:46px;padding:12px 15px;
  border:1px solid #8E7BFF3d;border-radius:9px;background:var(--carte);
  font:400 15px/1.3 var(--sans);color:var(--encre);outline:none;
}
.demandeur__champ:focus{border-color:var(--action)}
.demandeur .demande__micro{
  width:46px;height:46px;flex:none;border:1px solid #8E7BFF3d;border-radius:9px;
  background:var(--carte);color:var(--action);font:400 16px/1 var(--sans);
  cursor:pointer;display:grid;place-items:center;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.demandeur .demande__micro:hover,.demandeur .demande__micro--actif{
  background:var(--action);color:#fff;border-color:var(--action);
}

.propose5{
  margin-top:16px;border:1px solid #0E111721;border-radius:14px;background:var(--carte);
  overflow:hidden;animation:monte .35s var(--ease);
}
.propose5__tete{padding:18px 22px;border-bottom:1px solid var(--bord)}
.propose5__tete h3{font:500 17px/1.2 var(--sans)}
.propose5__tete p{margin-top:5px;font:400 14px/1.5 var(--sans);color:var(--gris)}
.propose5__ligne{padding:16px 22px;border-bottom:1px solid #0E11170a;display:flex;flex-direction:column;gap:7px}
.propose5__rang{display:flex;align-items:baseline;gap:10px}
.propose5__eti{font:400 12px/1.5 var(--sans);color:var(--gris);flex:none;width:52px}
.propose5__eti--apres{color:var(--vert)}
.propose5__avant{font:400 15px/1.5 var(--sans);color:var(--gris);text-decoration:line-through;text-wrap:pretty}
.propose5__apres{font:400 16px/1.5 var(--sans);color:var(--encre);text-wrap:pretty}
.propose5__actions{padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.propose5__note{font:400 14px/1.5 var(--sans);color:var(--gris)}

.briefs{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;align-items:start}
.brief{display:flex;flex-direction:column;gap:10px}
.brief__tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brief__tete h3{font:500 14px/1.2 var(--sans)}
.brief__ligne{
  font:400 15px/1.6 var(--sans);color:var(--encre);padding-bottom:10px;
  border-bottom:1px solid #0E11170a;text-wrap:pretty;
}
.brief__ligne select{
  margin-left:8px;padding:6px 10px;border:1px solid #0E111721;border-radius:8px;
  background:var(--carte);font:400 15px/1.3 var(--sans);
}
@media (max-width:820px){.briefs{grid-template-columns:1fr}}

.capacites{display:flex;flex-direction:column;gap:12px}
.capacite{
  padding:22px 24px;border:1px solid var(--bord-2);border-radius:16px;
  background:var(--carte);display:flex;flex-direction:column;gap:10px;
}
.capacite__tete{display:flex;align-items:center;gap:12px}
.capacite__tete h3{font:500 16px/1.2 var(--sans)}
.capacite__texte{font:400 14px/1.6 var(--sans);color:var(--texte-2);text-wrap:pretty}
.capacite__actions{display:flex;flex-wrap:wrap;align-items:center;gap:11px;padding-top:2px}

.appels5{display:flex;flex-direction:column;border-top:1px solid var(--bord)}
.appel5{
  display:grid;grid-template-columns:160px minmax(0,1fr) 160px 22px;gap:18px;
  align-items:center;width:100%;min-height:56px;padding:14px 6px;
  border:0;border-bottom:1px solid var(--bord);background:transparent;
  cursor:pointer;text-align:left;transition:background-color .18s var(--ease);
}
.appel5:hover{background:#0E11170a}
.appel5__quand{font:400 14px/1.3 var(--sans);color:var(--gris)}
.appel5__objet{min-width:0;font:400 15px/1.4 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appel5__issue{display:inline-flex;align-items:center;gap:8px;font:400 14px/1.3 var(--sans);white-space:nowrap}
.appel5__point{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.est-ok{color:var(--vert)}
.est-attente{color:var(--ambre-encre)}
.est-echec{color:var(--rouge)}
.appel5__fleche{font:400 16px/1 var(--mono);color:#0E111740}
@media (max-width:720px){
  .appel5{grid-template-columns:1fr;gap:6px}
  .appel5__fleche{display:none}
}

.histo5{margin-top:44px;padding-top:24px;border-top:1px solid var(--bord)}
.histo5__bascule{
  display:flex;align-items:center;gap:11px;min-height:44px;padding:0;
  border:0;background:transparent;cursor:pointer;text-align:left;
}
.histo5__libelle{font:500 17px/1.2 var(--sans)}
.histo5__compte{font:400 13px/1 var(--sans);color:var(--gris)}
.histo5__liste{margin-top:14px;display:flex;flex-direction:column;animation:monte .35s var(--ease)}
.histo5__liste[hidden]{display:none}
.histo5__ligne{
  display:grid;grid-template-columns:minmax(0,1fr) 170px 180px;gap:18px;align-items:center;
  min-height:52px;padding:12px 6px;border-bottom:1px solid var(--bord);
}
.histo5__origine{font:400 15px/1.5 var(--sans)}
.histo5__date{font:400 14px/1.3 var(--sans);color:var(--gris)}
@media (max-width:720px){.histo5__ligne{grid-template-columns:1fr;gap:6px}}

/* ══ Les guides plein écran : attribuer un numéro, rediriger le sien ══════ */
.guide{
  position:fixed;inset:0;z-index:300;background:var(--creme);
  display:flex;flex-direction:column;animation:monte .3s var(--ease);
}
.guide__tete{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 40px}
.guide__moment{font:400 14px/1 var(--sans);color:var(--gris)}
.guide__jalons{display:flex;align-items:center;gap:12px}
.guide__etape{font:400 14px/1 var(--sans);color:var(--gris)}
.guide__barres{display:flex;gap:5px}
.guide__barre{width:26px;height:4px;border-radius:2px;background:#0E111721}
.guide__barre.est-fait{background:var(--action)}
.guide__centre{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 60px 40px;gap:0;
}
.guide__titre{font:400 46px/1.06 var(--serif);max-width:700px;text-wrap:balance}
.guide__sous{margin-top:16px;max-width:480px;font:400 16px/1.6 var(--sans);color:var(--texte-2);text-wrap:pretty}
.guide__note{margin-top:22px;max-width:440px;font:400 14px/1.6 var(--sans);color:var(--gris);text-wrap:pretty}
.guide__villes{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.guide__ville{
  min-height:44px;padding:12px 19px;border:1px solid #0E111721;border-radius:10px;
  background:var(--carte);color:var(--texte-2);font:400 14px/1 var(--sans);cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.guide__ville:hover{border-color:#0E111759;color:var(--encre)}
.guide__ville.est-actif{background:var(--encre);border-color:var(--encre);color:var(--creme);font-weight:500}
.guide__carte{
  margin-top:28px;padding:32px 44px;border-radius:20px;background:var(--carte);
  border:1px solid var(--bord-2);display:flex;flex-direction:column;align-items:center;gap:16px;
}
.guide__eti{font:400 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.guide__numero{font:400 36px/1.1 var(--mono);color:var(--encre)}
.guide__attente{font:400 16px/1.5 var(--sans);color:var(--gris)}
.guide__texte{max-width:380px;font:400 15px/1.6 var(--sans);color:var(--texte-2);text-wrap:pretty}
.guide__champ{margin-top:40px;width:min(440px,100%);border-bottom:1px solid #0E111726;padding-bottom:12px}
.guide__saisie{
  width:100%;border:0;outline:none;background:transparent;padding:0;text-align:center;
  font:400 34px/1.2 var(--mono);color:var(--encre);
}
.guide__actions{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.guide__actions--colonne{flex-direction:column;gap:18px}
.guide .btn--grand{margin-top:0}
.guide__centre > .btn--grand{margin-top:26px}
.guide__lien{
  min-height:40px;padding:0 6px;border:0;background:transparent;cursor:pointer;
  font:400 14px/1.4 var(--sans);color:var(--gris);
  text-decoration:underline;text-decoration-color:#0E111733;
}
.guide__roue{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--bord-2);
  border-top-color:var(--action);animation:tourne .9s linear infinite;margin-bottom:28px;
}
@keyframes tourne{to{transform:rotate(360deg)}}
.guide__coche{
  width:52px;height:52px;border-radius:50%;background:var(--vert-fond);
  display:grid;place-items:center;margin-bottom:26px;
  font:400 22px/1 var(--sans);color:var(--vert);
}
.guide__coche--tiede{background:var(--ambre-fond);color:var(--ambre-encre)}
.guide__autres{
  margin-top:26px;width:min(560px,100%);text-align:left;padding:22px 26px;
  border:1px solid var(--bord-2);border-radius:14px;background:var(--creme-carte);
  animation:monte .3s var(--ease);
}
.guide__autres[hidden]{display:none}
.guide__autres p{font:400 14px/1.55 var(--sans);color:var(--texte-2);margin-bottom:14px}
.guide__cas-ligne{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--bord);font:400 15px/1.4 var(--sans);
}
@media (prefers-reduced-motion: reduce){.guide__roue{animation:none}}
@media (max-width:720px){
  .guide__tete{padding:16px 20px}
  .guide__centre{padding:0 20px 30px}
  .guide__titre{font-size:32px}
}

/* ══ Aujourd'hui : le débrief ═══════════════════════════════════════════ */
.journal__phrase{font:400 44px/1.05 var(--serif);text-wrap:balance}
.journal__detail{max-width:600px;font:400 16px/1.6 var(--sans);color:var(--texte-2);margin-bottom:30px;text-wrap:pretty}
.bascule{display:flex;gap:4px;padding:4px;border-radius:11px;background:#0E11170a}
.bascule__b{
  min-height:36px;padding:9px 14px;border:0;border-radius:8px;background:transparent;
  color:var(--texte-2);font:400 13px/1 var(--sans);cursor:pointer;white-space:nowrap;
  transition:color .18s var(--ease);
}
.bascule__b:hover{color:var(--encre)}
.bascule__b.est-actif{background:var(--carte);color:var(--encre);font-weight:500;box-shadow:0 1px 3px var(--bord-2)}

.attente{
  padding:24px 26px;border:1px solid var(--ambre-bord);border-radius:16px;
  background:#B07C220a;margin-bottom:32px;
}
.attente h2{font:500 17px/1.2 var(--sans);margin-bottom:16px}
.attente--etape{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.attente__oeil{
  display:inline-flex;align-items:center;gap:9px;font:500 13px/1 var(--sans);
  color:var(--ambre-encre);
}
.attente__oeil::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid currentColor}
.attente p{max-width:520px;font:400 16px/1.65 var(--sans);text-wrap:pretty}

.journal__liste{display:flex;flex-direction:column;border-top:1px solid var(--bord)}
.jour{
  display:grid;grid-template-columns:120px minmax(0,1fr) 22px;gap:20px;align-items:start;
  width:100%;padding:18px 6px;border:0;border-bottom:1px solid var(--bord);
  background:transparent;cursor:pointer;text-align:left;
  transition:background-color .18s var(--ease);
}
.jour:hover{background:#0E111708}
.jour--alerte{border-bottom-color:#7E58141f}
.jour--alerte:hover{background:#B07C2214}
.jour__quand{display:flex;flex-direction:column;gap:5px;padding-top:2px}
.jour__jour{font:500 11px/1.2 var(--sans);color:var(--action);white-space:nowrap}
.jour__heure{font:400 15px/1.2 var(--mono);white-space:nowrap}
.jour__duree{font:400 12px/1.2 var(--mono);color:var(--gris)}
.jour__agent{margin-top:3px;font:500 12px/1.3 var(--sans);color:var(--action);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jour__corps{min-width:0;display:flex;flex-direction:column;gap:5px}
.jour__issue{display:inline-flex;align-items:center;gap:8px;font:400 16px/1.5 var(--sans)}
.jour__detail{font:400 15px/1.5 var(--sans);color:var(--gris);text-wrap:pretty}
.jour__sens{font:400 13px/1.4 var(--sans);color:var(--gris)}
.pointille--centre{text-align:center;padding:44px 36px}
@media (max-width:720px){
  .jour{grid-template-columns:1fr;gap:8px}
  .jour__quand{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
}

/* ══ Le registre des appels ═════════════════════════════════════════════ */
.sante5{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 26px}
.sante5__texte{font:400 14px/1.5 var(--sans);color:var(--gris)}
.registre{border-top:1px solid var(--bord)}
.registre__tete,.registre__ligne{
  display:grid;grid-template-columns:150px 74px 104px 84px minmax(0,1fr) 22px;gap:16px;
}
.registre__tete{
  padding:0 6px 9px;border-bottom:1px solid var(--bord-2);
  font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.registre__ligne{
  align-items:center;width:100%;min-height:60px;padding:15px 6px;
  border:0;border-bottom:1px solid var(--bord);background:transparent;
  cursor:pointer;text-align:left;transition:background-color .18s var(--ease);
}
.registre__ligne:hover{background:#0E11170a}
.registre__quand,.registre__sens{font:400 14px/1.3 var(--sans);color:var(--gris)}
.registre__agent{font:500 14px/1.3 var(--sans)}
.registre__duree{font:400 14px/1 var(--mono);color:var(--texte-2)}
.registre__issue{min-width:0;display:flex;flex-direction:column;gap:4px}
.registre__detail{
  min-width:0;font:400 13px/1.4 var(--sans);color:var(--gris);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:820px){
  .registre__tete{display:none}
  .registre__ligne{grid-template-columns:1fr 1fr;gap:6px 14px;padding:14px 6px}
  .registre__issue{grid-column:1 / -1}
}

/* ══ Facturation ════════════════════════════════════════════════════════ */
.facture{
  padding:28px 30px;border-radius:18px;background:var(--encre);color:var(--creme);
  display:flex;flex-direction:column;
}
.facture .carte__titre{font:500 20px/1.2 var(--sans)}
.facture .carte__sous{color:#F7F6F2a6}
.facture .pastille--ok{background:#7ED9A81f;color:#7ED9A8}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.plans .carte{gap:12px}
.plans .carte__pied{padding-top:6px;border:0;margin-top:6px}
.plans .fiche__liste{display:flex;flex-direction:column;gap:7px;padding-top:4px}
.plans .fiche__liste li{font:400 14px/1.5 var(--sans);color:var(--encre);padding:0;border:0}
.facture__note{margin-top:18px;max-width:620px;font:400 14px/1.6 var(--sans);color:var(--gris);text-wrap:pretty}
.facture__pied{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--bord);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
}
.facture__pied span{flex:1;min-width:260px;font:400 14px/1.6 var(--sans);color:var(--texte-2);text-wrap:pretty}
@media (max-width:820px){.plans{grid-template-columns:1fr}}

/* ══ Réglages ═══════════════════════════════════════════════════════════ */
.panneau-blanc{padding:22px 24px;border:1px solid var(--bord-2);border-radius:16px;background:var(--carte)}
.cle-valeur{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid #0E11170a;
}
.cle-valeur > :first-child{font:400 14px/1.4 var(--sans);color:var(--gris)}
.cle-valeur > :last-child{min-width:0;font:400 15px/1.5 var(--sans);overflow-wrap:break-word}
@media (max-width:640px){.cle-valeur{grid-template-columns:1fr;gap:4px}}

/* ══ Mes numéros ════════════════════════════════════════════════════════ */
.numero5{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  padding:20px 24px;border:1px solid var(--bord-2);border-radius:16px;background:var(--carte);
}
.numero5__corps{display:flex;flex-direction:column;gap:7px;min-width:0}
.numero5__rang{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.numero5__e164{font:400 20px/1 var(--mono)}
.numero5__sens{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.numero5__note{font:400 14px/1.5 var(--sans);color:var(--texte-2)}
.kyc__form{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kyc__form select,.kyc__form input{
  padding:12px 14px;border:1px solid #0E111721;border-radius:10px;background:var(--carte);
  font:400 14px/1 var(--sans);
}
.campagne{display:flex;flex-direction:column;gap:12px}
.campagne__tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.campagne__etat{font:400 14px/1.4 var(--sans);color:var(--gris)}
.jauge{height:5px;border-radius:3px;background:var(--bord);overflow:hidden}
.jauge__barre{width:0;height:100%;background:var(--action);transition:width .4s var(--ease)}
.campagne__form{display:flex;flex-direction:column;gap:12px}
.campagne__form label{display:flex;flex-direction:column;gap:7px}
.campagne__form input,.campagne__form select,.campagne__form textarea{
  padding:12px 14px;border:1px solid #0E111721;border-radius:10px;background:var(--carte);
  font:400 15px/1.3 var(--sans);outline:none;resize:none;
}
.campagne__form textarea{font:400 14px/1.6 var(--mono)}
.campagne__form input:focus,.campagne__form select:focus,.campagne__form textarea:focus{border-color:#8E7BFF99}
.campagne__rang{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.etiquette{font:400 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.pointille--rang{display:flex;align-items:center;gap:16px;margin-top:26px;padding:18px 22px}
.pointille--rang span{flex:1}
@media (max-width:640px){
  .numero5{grid-template-columns:1fr;gap:14px}
  .campagne__rang{grid-template-columns:1fr}
}
/* La création prend tout l'écran : la largeur de lecture de la coquille ne
   doit pas la border (spécificité de .app .page). */
.app .page--creation{max-width:none;padding:0;min-height:100vh}

/* ══ Le compte rendu d'un appel ═════════════════════════════════════════ */
.jour__demande{font:400 16px/1.5 var(--sans);color:var(--encre);text-wrap:pretty}
.jour__appelant{font:400 13px/1.5 var(--mono);color:var(--gris);white-space:nowrap}
.jour__fait{font:400 15px/1.5 var(--sans);color:var(--gris);text-wrap:pretty}
.jour__suite{
  align-self:flex-start;margin-top:3px;padding:4px 10px;border-radius:6px;
  background:var(--ambre-fond);color:var(--ambre-encre);font:500 13px/1.4 var(--sans);
}
.rendu{
  margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--bord);
  display:flex;flex-direction:column;gap:10px;
}
.rendu__fait{font:400 16px/1.6 var(--sans);text-wrap:pretty}
.rendu__suite{
  display:flex;flex-direction:column;gap:5px;padding:12px 15px;
  border-left:2px solid var(--ambre-encre);background:var(--ambre-fond);
  font:400 15px/1.55 var(--sans);color:var(--encre);text-wrap:pretty;
}
.rendu__oeil{
  font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambre-encre);
}

/* Dans le panneau, l'accueil et le message d'aide s'EMPILENT : hérité de la
   modale, l'accueil était centré par « margin:auto » dans un conteneur sans
   hauteur, et l'aide venait se dessiner par-dessus. */
.panneau .essai__accueil{
  margin:0;max-width:none;text-align:left;
  font:400 16px/1.65 var(--sans);color:var(--texte-2);
}
.panneau .essai__transcript{min-height:0;display:flex;flex-direction:column;gap:14px}
.panneau .essai__aide{
  margin-top:16px;padding:0;text-align:left;color:var(--rouge);
  font:400 15px/1.6 var(--sans);
}
.panneau .essai__code{
  display:block;margin:10px 0;padding:12px 14px;max-width:100%;
  border-radius:10px;background:var(--encre);border:0;color:var(--creme);
  font:400 12px/1.5 var(--mono);
  /* Une commande à recopier se lit en entier : on la replie plutôt que de
     la faire défiler dans un panneau de 428 px. */
  white-space:pre-wrap;word-break:break-all;user-select:all;
}

/* ── suppression d'agent (fiche, tout en bas — discret mais trouvable) ── */
.detail__fin {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait, rgba(0, 0, 0, .08));
  display: flex;
  justify-content: flex-end;
}
.detail__supprimer { color: var(--danger, #b3261e); }
.detail__supprimer:hover { text-decoration: underline; }

/* ── champ mot de passe : l'œil affiche/masque ── */
.champ__mdp { position: relative; display: flex; align-items: center; }
.champ__mdp input { flex: 1; padding-right: 2.6rem; }
.champ__oeil {
  position: absolute; right: .5rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: .3rem;
  opacity: .65;
}
.champ__oeil:hover { opacity: 1; }

/* ── bandeau « vérifiez votre email » ── */
.bandeau-verif {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .8rem; justify-content: center;
  padding: .55rem 2.2rem .55rem 1rem;
  background: var(--violet, #8E7BFF); color: #fff; font-size: .92rem;
}
.bandeau-verif .lien { color: #fff; text-decoration: underline; }
.bandeau-verif__x {
  position: absolute; right: .6rem;
  background: none; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer;
}

/* ── écran « vérifiez votre boîte » ── */
.attenteverif__actions { display: flex; gap: 1rem; align-items: center; margin-top: .6rem; }