/* AlloAccueil — tableau de bord.
   Même identité que la vitrine alloaccueil.fr : papier, encre, Archivo et
   Source Serif 4, filets d'un pixel plutôt que cartes arrondies.

   Deux règles tiennent toute la couleur, ne pas les diluer :
     le JAUNE   ne marque QUE ce que l'appel rapporte (appel en cours,
                rendez-vous pris, valeur du lead) ;
     la ROUILLE ne marque QUE ce qui alerte ou détruit (urgence, suppression,
                échec).
   Le bleu signale ce sur quoi on peut cliquer, l'encre dit tout le reste.
   Deux ajouts du 2 octobre 2026, pour le guide de l'espace client :
     le VERT    ne marque QUE ce qui est fait (étape validée, progression) ;
     l'AMBRE    ne marque QUE ce qui est à vérifier (conseil) — distinct du
                jaune, qui reste à ce que l'appel rapporte.

   Deux familles, deux rôles :
     Archivo        — l'outil : titres, libellés, boutons, chiffres ;
     Source Serif 4 — la parole : transcription, fiche remplie, SMS, compte
                      rendu. Ce qu'un humain a dit ou lira est en romain. */

:root {
  --papier:  #FBFAF6;
  --creme:   #F2F0E9;
  --blanc:   #FFFFFF;
  --encre:   #16283F;
  --bleu:    #2C5A8C;
  --jaune:   #F2B705;
  --rouille: #A6402C;
  --gris:    #5E6A78;
  --trait:   #D9D5CA;
  --trait-clair: #E7E3D9;

  /* Fonds teintés — un seul jaune, un seul rouille, dilués. */
  --jaune-fond:    #FCF3D8;
  --jaune-trait:   #E8CE7A;
  --rouille-fond:  #F6ECE9;
  --rouille-trait: #DCB3A9;
  --bleu-fond:     #EDF1F6;
  --vert:          #3D7A57;
  --vert-fond:     #E7F1EA;
  --vert-trait:    #A9CDB6;
  --ambre:         #9A6B12;
  --ambre-fond:    #FBF1DE;
  --ambre-trait:   #E2C48A;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Source Serif 4", Georgia, "Times New Roman", serif;

  --r: 2px;
}

/* Échelle d'affichage générale : tout le tableau de bord est en rem, changer
   cette seule valeur agrandit l'ensemble. 106% ou 112% si l'écran est loin. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* `main { display: grid }` écrase sinon l'attribut hidden. */
[hidden] { display: none !important; }

body {
  font-family: var(--display);
  font-size: 0.9375rem;
  line-height: 1.55;
  background: var(--papier);
  color: var(--encre);
  min-height: 100vh;
  padding: 1.5rem 1.75rem 2.5rem;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 1px; }

/* ── Bandeau ─────────────────────────────────────────────── */
.bandeau {
  max-width: 74rem; margin: 0 auto 1.5rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--trait);
}
.marque { display: flex; align-items: center; gap: 0.7rem; }
.marque .sortir { padding: 0; font-size: 0.75rem; color: var(--gris); }
.pastille {
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--trait); border: 1px solid var(--trait-clair);
  flex-shrink: 0; transition: background .3s;
}
/* Un appel est en cours : c'est le seul voyant jaune de l'écran. */
.pastille.live {
  background: var(--jaune); border-color: #D9A404;
  animation: battement 1.9s ease-in-out infinite;
}
@keyframes battement { 50% { box-shadow: 0 0 0 0.32rem rgba(242,183,5,.22); } }

h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; }
#sousTitre { font-family: var(--serif); font-style: italic; font-size: 0.875rem; color: var(--gris); }

.etats { display: flex; gap: 0.4rem; }
.etat {
  font-size: 0.75rem; font-weight: 500; color: var(--gris);
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 0.22rem 0.55rem; white-space: nowrap; background: var(--blanc);
}
.etat.ok { color: var(--bleu); border-color: #BACADB; }
.etat.ko { color: var(--rouille); border-color: var(--rouille-trait); }

/* ── Pilotage : fiche active + onglets ───────────────────── */
.pilotage { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
#selectClient {
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  color: var(--encre); background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 0.4rem 0.6rem; max-width: 18rem;
}
#selectClient:focus-visible { border-color: var(--bleu); }

/* Onglets : le filet sous le mot, comme la navigation de la vitrine. */
.onglets { display: flex; gap: 1.1rem; }
.onglets button {
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--gris);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0.15rem 0 0.3rem; cursor: pointer; transition: color .15s, border-color .15s;
}
.onglets button:hover { color: var(--encre); border-bottom-color: var(--jaune); }
.onglets button.actif { color: var(--encre); border-bottom-color: var(--encre); }

/* Un rendez-vous vient d'être pris pendant que le patron regardait un autre
   onglet : une pastille le signale, et disparaît dès qu'il ouvre l'agenda. */
.onglets button.bouge { color: var(--encre); }
.onglets button.bouge::after {
  content: ""; display: inline-block; width: 0.4rem; height: 0.4rem;
  margin-left: 0.4rem; vertical-align: 0.1em;
  border-radius: 50%; background: var(--jaune);
  animation: clignote 1.6s ease-in-out infinite;
}
@keyframes clignote { 50% { opacity: .3; } }

/* ── Grille ──────────────────────────────────────────────── */
main {
  max-width: 74rem; margin: 0 auto; display: grid;
  grid-template-columns: 1.05fr .95fr; gap: 1.75rem; align-items: start;
}
@media (max-width: 60rem) { main { grid-template-columns: 1fr; } }
/* Sans ceci, une colonne refuse de se comprimer sous sa largeur minimale
   et la page deborde lateralement entre 960 px et 1240 px. */
main > section { min-width: 0; }

.carte {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 1.25rem 1.35rem 1.35rem;
  display: flex; flex-direction: column;
}
/* L'appel se déroule à même le papier : rien ne l'encadre. */
.carte.appel { background: none; border: 0; padding: 0; }

.entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }
.sousEntete { font-family: var(--serif); font-style: italic; font-size: 0.8125rem; color: var(--gris); }
.minuteur { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gris); }

/* ── Transcription ───────────────────────────────────────── */
.transcript {
  min-height: 19rem; max-height: 46vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.7rem; padding-right: 0.25rem;
}
.vide {
  margin: auto; text-align: center; color: var(--gris);
  font-family: var(--serif); font-size: 0.9375rem; max-width: 26ch; line-height: 1.6;
}
.vide strong { color: var(--encre); font-weight: 600; }
.astuce { font-size: 0.8125rem; margin-top: 0.6rem; color: var(--gris); }

.bulle {
  max-width: 86%; padding: 0.6rem 0.85rem; border-radius: var(--r);
  animation: apparait .25s ease;
}
@keyframes apparait { from { opacity: 0; transform: translateY(0.35rem); } }
.bulle .contenu { font-family: var(--serif); font-size: 1rem; line-height: 1.5; display: block; }
.bulle .qui {
  display: block; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0; margin-bottom: 0.2rem; opacity: .75;
}
/* La standardiste parle sur papier blanc, l'appelant sur fond d'encre. */
.bulle.ia { background: var(--blanc); border: 1px solid var(--trait); align-self: flex-start; }
.bulle.ia .qui { color: var(--gris); }
.bulle.client { background: var(--encre); color: var(--papier); align-self: flex-end; }
.bulle.client .qui { color: #9DB0C6; }
.bulle.provisoire { opacity: .55; }
.bulle.provisoire .contenu { font-style: italic; }

/* Un outil a tourné : un événement de la machine, pas une parole. */
.outil {
  align-self: center; font-size: 0.75rem; font-weight: 500; color: var(--gris);
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  padding: 0.3rem 0.7rem; margin: 0.15rem 0;
}
.reflexion { align-self: flex-start; display: flex; gap: 0.25rem; padding: 0.7rem 0.85rem; }
.reflexion i { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--gris); animation: rebond 1.3s infinite; }
.reflexion i:nth-child(2) { animation-delay: .18s; }
.reflexion i:nth-child(3) { animation-delay: .36s; }
@keyframes rebond { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-0.25rem); } }

/* ── Suggestions + commandes ─────────────────────────────── */
.scenarios { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 1rem 0 0; }
.libelleScenario { font-size: 0.8125rem; font-weight: 500; color: var(--gris); margin-right: 0.15rem; }
.scenarios button {
  font: inherit; font-size: 0.8125rem; color: var(--bleu); background: none;
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 0.3rem 0.65rem; cursor: pointer; transition: .15s;
}
.scenarios button:hover { border-color: var(--bleu); background: var(--bleu-fond); }

.commandes {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--trait);
  display: flex; gap: 0.55rem; flex-wrap: wrap;
}
button { font: inherit; cursor: pointer; }

.principal, .secondaire, .micro, .danger {
  font-family: var(--display); font-size: 0.9375rem; font-weight: 700;
  letter-spacing: -0.005em; border-radius: var(--r);
  padding: 0.65rem 1.25rem; transition: .15s;
}
.principal { background: var(--encre); color: var(--papier); border: 1px solid var(--encre); }
.principal:hover { background: var(--bleu); border-color: var(--bleu); }
.principal.raccrocher { background: var(--rouille); border-color: var(--rouille); }
.principal.raccrocher:hover { background: #8E3524; border-color: #8E3524; }

.secondaire, .micro { background: transparent; color: var(--encre); border: 1px solid var(--encre); }
.secondaire:hover, .micro:hover:not(:disabled) { background: var(--encre); color: var(--papier); }
.micro { display: inline-flex; align-items: center; gap: 0.5rem; }
.micro:disabled { opacity: .35; cursor: not-allowed; }
.principal:disabled { opacity: .4; cursor: not-allowed; }
.micro.actif { background: var(--rouille); border-color: var(--rouille); color: var(--papier); }
.micro.actif:hover { background: #8E3524; border-color: #8E3524; }
/* Micro coupé : l'appel continue, l'assistante n'entend plus. */
.micro.coupe { background: transparent; border-color: var(--trait); color: var(--gris); }
.micro.coupe:hover { background: var(--creme); color: var(--gris); }

.ondes { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.8rem; }
.ondes i { width: 2.5px; height: 4px; background: currentColor; border-radius: 1px; opacity: .45; }
.micro.actif .ondes i { animation: onde .7s ease-in-out infinite; opacity: 1; }
.micro.actif .ondes i:nth-child(2) { animation-delay: .15s; }
.micro.actif .ondes i:nth-child(3) { animation-delay: .3s; }
@keyframes onde { 50% { height: 0.8rem; } }

.danger { background: transparent; color: var(--rouille); border: 1px solid var(--rouille-trait); }
.danger:hover { background: var(--rouille); border-color: var(--rouille); color: var(--papier); }

.saisie { display: flex; gap: 0.4rem; flex: 1; min-width: 12rem; }
.saisie input {
  flex: 1; font-family: var(--serif); font-size: 0.9375rem;
  background: var(--creme); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r); padding: 0.6rem 0.8rem;
}
.saisie input::placeholder { color: var(--gris); opacity: .8; }
.saisie input:focus-visible { border-color: var(--bleu); outline-offset: 0; }
.saisie button {
  background: var(--creme); color: var(--gris); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 0 0.9rem; font-size: 1rem;
}
.saisie button:hover:not(:disabled) { border-color: var(--bleu); color: var(--bleu); }
.saisie input:disabled, .saisie button:disabled { opacity: .4; }

/* ── Le bloc : ce que le patron reçoit ───────────────────── */
/* Seule pièce de l'écran coiffée de jaune : c'est le butin de l'appel, et
   c'est ce que le prospect doit regarder pendant la démonstration. */
.carte.tableau { border-top: 3px solid var(--jaune); }

.alerte {
  background: var(--rouille-fond); border: 1px solid var(--rouille-trait);
  border-left: 3px solid var(--rouille); border-radius: var(--r);
  padding: 0.75rem 0.9rem; margin-bottom: 1.1rem; animation: apparait .3s;
}
.alerteTitre { font-size: 0.8125rem; font-weight: 700; color: var(--rouille); margin-bottom: 0.25rem; }
.alerte p { font-family: var(--serif); font-size: 0.9375rem; color: #7A2E1F; }

.bloc { margin-bottom: 1.15rem; }
h3 { font-size: 0.8125rem; font-weight: 600; color: var(--gris); margin-bottom: 0.5rem; }

/* Fiche : un formulaire de bloc-notes, points de conduite compris. */
.fiche > div { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.32rem 0; }
dt {
  color: var(--gris); font-size: 0.8125rem; font-weight: 500;
  flex: 1 1 auto; display: flex; align-items: baseline; gap: 0.4rem;
}
dt::after { content: ""; flex: 1; border-bottom: 1px dotted var(--trait); transform: translateY(-0.22em); }
dd { font-family: var(--serif); font-size: 0.9375rem; flex: 0 1 auto; text-align: right; max-width: 62%; }
dd.rempli { animation: encre 1.3s ease; }
@keyframes encre { from { background: var(--jaune-fond); box-shadow: 0 0 0 0.2rem var(--jaune-fond); } }

.balise {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--r);
  font-family: var(--display); font-size: 0.75rem; font-weight: 600;
}
.balise.urgent { background: var(--rouille-fond); border: 1px solid var(--rouille-trait); color: var(--rouille); }
.balise.normal { background: var(--creme); border: 1px solid var(--trait); color: var(--gris); }

/* Le rendez-vous est ce que l'appel rapporte : il porte le jaune. */
.rdv { background: var(--jaune-fond); border: 1px solid var(--jaune-trait); border-radius: var(--r); padding: 0.7rem 0.9rem; }
.quand { font-family: var(--display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }

.sms {
  background: var(--creme); border: 1px solid var(--trait); border-left: 3px solid var(--bleu);
  border-radius: var(--r); padding: 0.7rem 0.85rem;
  font-family: var(--serif); font-size: 0.9375rem; color: var(--encre); max-width: 62ch;
}
.resume { font-family: var(--serif); font-size: 0.9375rem; line-height: 1.6; color: var(--encre); max-width: 62ch; }

.metriques {
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--trait);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.metriques > div { display: flex; flex-direction: column; gap: 0.1rem; text-align: center; padding: 0 0.4rem; }
.metriques > div + div { border-left: 1px solid var(--trait-clair); }
.valeur { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.valeurPlus { color: #B08303; }
.etiq { font-family: var(--serif); font-size: 0.75rem; color: var(--gris); }

/* ── Configuration ───────────────────────────────────────── */
main#vueConfig { grid-template-columns: 1fr; }
.config { max-width: 100%; }

.prospection {
  background: var(--bleu-fond); border: 1px solid #C9D6E4; border-left: 3px solid var(--bleu);
  border-radius: var(--r); padding: 0.9rem 1rem; margin-bottom: 1.25rem;
}
.prospection label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--encre); margin-bottom: 0.5rem; }
.ligneProspect { display: flex; gap: 0.5rem; }
.ligneProspect input {
  font-family: var(--serif); font-size: 0.9375rem; color: var(--encre); background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r); padding: 0.55rem 0.7rem; flex: 1; min-width: 0;
}
.ligneProspect input:focus-visible { border-color: var(--bleu); outline-offset: 0; }
.prospection .aide { margin-bottom: 0; }

.etatProspect { font-family: var(--serif); font-size: 0.875rem; margin: 0.7rem 0 0; line-height: 1.5; }
.etatProspect.encours { color: var(--gris); }
.etatProspect.ok { color: var(--bleu); }
.etatProspect.ko { color: var(--rouille); }

.aVerifier {
  background: var(--creme); border: 1px dashed var(--gris);
  border-radius: var(--r); padding: 0.75rem 0.9rem; margin-top: 0.85rem;
}
.aVerifier h3 { font-size: 0.8125rem; color: var(--encre); margin: 0 0 0.45rem; }
.aVerifier ul { margin: 0; padding-left: 1.1rem; }
.aVerifier li { font-family: var(--serif); font-size: 0.875rem; line-height: 1.55; margin-bottom: 0.25rem; }
.aVerifier b { font-family: var(--display); font-size: 0.8125rem; font-weight: 600; color: var(--encre); }
.aVerifier b::after { content: " — "; color: var(--gris); font-weight: 400; }
.aVerifier span { color: var(--gris); }

.brief { margin-top: 0.75rem; }
.brief summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--bleu); }
.brief summary:hover { text-decoration: underline; text-underline-offset: 0.14em; }
.brief dl { margin: 0.65rem 0 0; }
.brief dt { font-size: 0.75rem; color: var(--gris); margin-top: 0.6rem; display: block; }
.brief dt::after { content: none; }
.brief dd { margin: 0.15rem 0 0; font-size: 0.9375rem; line-height: 1.55; text-align: left; max-width: 68ch; }
.brief .aide { margin-top: 0.8rem; word-break: break-word; }

.accesTel {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 0.6rem 0.9rem; margin-bottom: 1.15rem; font-size: 0.875rem;
}
.accesTel a { color: var(--bleu); font-weight: 600; text-decoration: none; }
.accesTel a:hover { text-decoration: underline; text-underline-offset: 0.14em; }
.accesTel .aide { margin: 0; }

fieldset {
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 0.5rem 1rem 1rem; min-width: 0;
  break-inside: avoid; margin-bottom: 1.1rem;
}
legend { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.012em; color: var(--encre); padding: 0 0.4rem; }
fieldset label {
  display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.75rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--gris);
}
fieldset label.ligne { flex-direction: row; align-items: flex-start; gap: 0.5rem; color: var(--encre); font-size: 0.875rem; }
fieldset label.ligne input { width: auto; margin-top: 0.18em; accent-color: var(--bleu); }
fieldset input, fieldset textarea, fieldset select {
  font-family: var(--serif); font-size: 0.9375rem; color: var(--encre); background: var(--creme);
  border: 1px solid var(--trait); border-radius: var(--r); padding: 0.5rem 0.7rem; width: 100%;
}
fieldset input::placeholder, fieldset textarea::placeholder { color: var(--gris); opacity: .75; }
fieldset textarea { resize: vertical; line-height: 1.55; }
fieldset input:focus-visible, fieldset textarea:focus-visible { border-color: var(--bleu); outline-offset: 0; }

.aide { font-family: var(--serif); font-size: 0.8125rem; color: var(--gris); margin: 0.45rem 0 0.25rem; line-height: 1.55; }
.aide code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.75rem;
  background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r); padding: 0.05rem 0.3rem;
}
.horaires { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.horaires > div { display: flex; align-items: center; gap: 0.6rem; }
.horaires span { font-size: 0.8125rem; font-weight: 500; color: var(--gris); min-width: 5rem; }
.horaires input { flex: 1; }

#etatSauvegarde { font-family: var(--display); font-style: normal; font-size: 0.8125rem; font-weight: 600; color: var(--bleu); }

/* ── Agenda ──────────────────────────────────────────────── */
main#vueAgenda { grid-template-columns: 1fr; }
.legende { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.pastilleEtat { width: 0.8rem; height: 0.8rem; border-radius: var(--r); display: inline-block; }
.pastilleEtat + .pastilleEtat { margin-left: 0.6rem; }
.agenda { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.9rem; }
.jourAgenda h4 {
  font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; color: var(--encre);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--trait);
}
.jourAgenda h4::first-letter { text-transform: uppercase; }
.creneauxJour { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.creneau {
  font-family: var(--display); font-size: 0.8125rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 3.6rem; padding: 0.5rem 0.6rem; border-radius: var(--r); transition: .12s;
}
.creneau:hover:not(:disabled) { border-color: var(--bleu); color: var(--bleu); }
.creneau:disabled { opacity: .55; cursor: default; }

/* Un état = une apparence, partagée par la légende et la grille.
   Le jaune est pris par le rendez-vous ; un blocage se hachure plutôt que
   d'inventer une couleur de plus. */
.pastilleEtat.libre, .creneau.libre { background: var(--blanc); border: 1px solid var(--trait); color: var(--encre); }
.pastilleEtat.ferme, .creneau.ferme { background: transparent; border: 1px dashed var(--trait); color: #A9A398; }
.pastilleEtat.pause, .creneau.pause { background: var(--creme); border: 1px solid var(--trait); color: var(--gris); text-decoration: line-through; }
.pastilleEtat.exceptionnel, .creneau.exceptionnel { background: var(--bleu-fond); border: 1px solid var(--bleu); color: var(--bleu); font-weight: 700; }
.pastilleEtat.blocage, .creneau.blocage {
  border: 1px solid var(--gris); color: var(--gris); text-decoration: line-through;
  background: repeating-linear-gradient(-45deg, var(--creme) 0 4px, #E2DED2 4px 8px);
}
.pastilleEtat.rendez-vous, .creneau.rendez-vous { background: var(--jaune-fond); border: 1px solid var(--jaune-trait); color: var(--encre); font-weight: 700; }

/* ── Panneau d'un créneau ────────────────────────────────── */
/* Pas de jaune ici : le jaune ne marque que ce que l'appel rapporte, et un
   creneau qu'on regarde n'a encore rien rapporte. */
.panneau {
  width: min(30rem, calc(100vw - 1.8rem));
  max-height: 88vh; overflow-y: auto;
  margin: auto;
  padding: 1.2rem 1.4rem 1.35rem;
  background: var(--blanc); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r);
  position: relative;
}
.panneau::backdrop { background: rgba(22, 40, 63, .45); }
.panneau h2 { margin-bottom: 0.3rem; padding-right: 1.5rem; outline: none; }
.panneau h2::first-letter { text-transform: uppercase; }
.etatDuCreneau { font-family: var(--serif); font-size: 0.9375rem; color: var(--gris); line-height: 1.5; }
.panneau .fiche { margin-top: 1rem; }
.blocSms { margin-top: 1.1rem; }
.blocSms .aide { margin-top: 0.4rem; }
.panneau .commandes { flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.9rem; }
.panneau .commandes button { flex: 1 1 auto; }
.panneau form label {
  display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.55rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--gris);
}
.panneau form input, .panneau form select {
  font-family: var(--serif); font-size: 0.9375rem; color: var(--encre);
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 0.45rem 0.65rem; width: 100%;
}
.panneau form select { font-variant-numeric: tabular-nums; }
.cibleChoisie { font-family: var(--display); font-weight: 600; font-size: 0.9375rem; margin-top: 0.45rem; }
.cibleChoisie::first-letter { text-transform: uppercase; }
.panneau form optgroup { font-family: var(--display); font-size: 0.8125rem; }
.panneau form option { font-family: var(--serif); }
.panneau form input:focus-visible,
.panneau form select:focus-visible { border-color: var(--bleu); outline-offset: 0; }
.panneau .fermer {
  position: absolute; top: 0.6rem; right: 0.7rem;
  background: none; border: 0; color: var(--gris);
  font-size: 1.5rem; line-height: 1; padding: 0.1rem 0.35rem; border-radius: var(--r);
}
.panneau .fermer:hover { color: var(--encre); background: var(--creme); }
#panneauMessage { margin-top: 0.8rem; }

/* ── Sur l'écran d'accueil ───────────────────────────────── */
.installer {
  max-width: 74rem; margin: -0.5rem auto 1.25rem;
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--jaune-fond); border: 1px solid var(--jaune-trait);
  border-radius: var(--r); padding: 0.7rem 0.6rem 0.7rem 0.95rem;
}
.installer[hidden] { display: none; }
.installer p { flex: 1; margin: 0; font-size: 0.875rem; line-height: 1.45; }
.installer .principal { padding: 0.5rem 1rem; flex: none; min-width: 0; }
.installer .fermer {
  flex: none; background: none; border: 0; color: var(--gris);
  font-size: 1.4rem; line-height: 1; padding: 0.1rem 0.4rem; border-radius: var(--r);
}
.installer .fermer:hover { color: var(--encre); background: var(--blanc); }

/* ── Téléphone ───────────────────────────────────────────── */
@media (max-width: 40rem) {
  body { padding: 0.9rem 0.9rem 2rem; }
  .bandeau { gap: 0.7rem; align-items: flex-start; }
  .pilotage { width: 100%; justify-content: space-between; }
  #selectClient { flex: 1; max-width: none; }
  .etats { width: 100%; }
  .transcript { max-height: 42vh; min-height: 14rem; }
  .bulle { max-width: 92%; }
  .commandes { gap: 0.45rem; }
  .principal, .micro, .secondaire, .danger { flex: 1; min-width: 8rem; padding: 0.8rem 0.9rem; }
  .saisie { width: 100%; }
  .metriques { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 0; }
  .metriques > div:nth-child(3) { border-left: 0; }
  .creneau { flex: 1 0 auto; min-width: 4rem; padding: 0.7rem 0.5rem; }
  dd { max-width: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── La console ───────────────────────────────────────────
 *
 * Quatre soldes qui ne mesurent pas la meme chose : un quota de caracteres,
 * deux soldes en dollars, et un fournisseur qui n'expose rien. On les montre
 * pour ce qu'ils sont — la carte muette d'Anthropic est aussi informative que
 * les autres, a condition de ne pas ressembler a une panne.
 */
.soldes {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.solde {
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--blanc); padding: 14px 16px;
}
.solde--bas { border-color: var(--rouille-trait); background: var(--rouille-fond); }
.solde--muet { background: var(--creme); border-style: dashed; }
.soldeNom {
  font-family: var(--display); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris);
}
.soldeValeur {
  font-family: var(--display); font-size: 1.75rem; font-weight: 700;
  color: var(--encre); line-height: 1.15; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.solde--bas .soldeValeur { color: var(--rouille); }
.soldeValeur span { font-size: 0.8125rem; font-weight: 400; color: var(--gris); }
.soldeDetail { font-size: 0.8125rem; color: var(--gris); margin-top: 2px; }
.soldeDate { font-size: 0.6875rem; color: #9AA4AE; margin-top: 8px; }
.soldeRien {
  font-family: var(--serif); font-style: italic; font-size: 0.875rem;
  color: var(--gris); margin-top: 6px; line-height: 1.45;
}

table.clients { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.clients th {
  text-align: left; font-family: var(--display); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris);
  border-bottom: 1px solid var(--trait); padding: 0 8px 8px;
}
table.clients td {
  padding: 10px 8px; border-bottom: 1px solid var(--trait-clair); vertical-align: middle;
}
table.clients .ptit { font-size: 0.75rem; color: var(--gris); }
table.clients .attente { color: var(--rouille); }
table.clients select, table.clients input {
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 5px 7px; font: inherit; background: var(--papier); color: var(--encre);
}
table.clients input.mensuel { width: 74px; text-align: right; }
/* Une confirmation d'une seconde : il faut savoir que c'est parti, pas plus. */
table.clients .enregistre { border-color: var(--bleu); background: var(--bleu-fond); }

/* ── Accueil et voix ──────────────────────────────────────
 *
 * La phrase qui annonce la machine est FIXE et se lit comme telle : grise,
 * non modifiable, encadrant le seul mot que le client choisit. C'est ce qui
 * nous met en regle, et cela doit se voir sans avoir a le lire.
 */
.accueilCompose {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 10px 12px;
}
.accueilCompose .fixe {
  font-family: var(--serif); font-size: 0.9375rem; color: var(--gris);
}
.accueilCompose input {
  flex: 1; min-width: 130px; border: 1px solid var(--bleu);
  border-radius: var(--r); padding: 5px 8px; font: inherit;
  background: var(--blanc); color: var(--encre);
}

.voix { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.uneVoix {
  display: grid; gap: 4px; cursor: pointer;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--blanc); padding: 10px 12px;
}
.uneVoix--choisie { border-color: var(--bleu); background: var(--bleu-fond); }
.uneVoix input[type="radio"] { margin: 0; justify-self: start; }
.voixNom { font-family: var(--display); font-weight: 700; color: var(--encre); }
.voixTimbre { font-size: 0.75rem; color: var(--gris); }
.uneVoix audio { width: 100%; height: 30px; margin-top: 4px; }

/* Les prestations : trois colonnes nommées valent mieux qu'un « nom | tarif |
   durée » qu'il faut se rappeler dans le bon ordre. */
.prestations { display: grid; gap: 6px; margin-bottom: 8px; }
.prestaEntete, .prestaLigne {
  display: grid; grid-template-columns: 1.6fr 1fr 0.9fr 28px; gap: 6px; align-items: center;
}
.prestaEntete span {
  font-family: var(--display); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--gris);
}
.prestaLigne input {
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 6px 8px; font: inherit; background: var(--blanc); color: var(--encre); width: 100%;
}
.pRetirer {
  border: 1px solid var(--trait); border-radius: var(--r); background: var(--creme);
  color: var(--gris); cursor: pointer; font-size: 1rem; line-height: 1; padding: 5px 0;
}
.pRetirer:hover { border-color: var(--rouille-trait); background: var(--rouille-fond); color: var(--rouille); }
@media (max-width: 620px) {
  .prestaEntete { display: none; }
  .prestaLigne { grid-template-columns: 1fr 1fr 28px; }
  .prestaLigne .pNom { grid-column: 1 / -1; }
}

/* ══ Mode client : ce qui reste a l'administration ═══════ */
/* Masquer n'est pas proteger : le serveur ignore ces champs pour un client
   (inscription.js, MODIFIABLES). Ceci ne fait que ne pas les montrer. */
.modeClient .adminSeul { display: none !important; }

/* ══ Le compte : etat et bilan d'essai ═══════════════════ */
.compteClient { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.etatCompte { font-family: var(--serif); font-size: 0.9375rem; line-height: 1.55; margin: 0; color: var(--encre); }
.etatCompte strong { font-family: var(--display); font-weight: 700; }
/* Le bilan de l'essai : ce que l'appel a rapporte, donc en jaune. */
.conseils { border-radius: var(--r); padding: 0.75rem 0.9rem; background: var(--jaune-fond); border: 1px solid var(--jaune-trait); }
.conseils h3 { font-size: 0.8125rem; color: var(--encre); margin: 0 0 0.45rem; }
.conseils ul { margin: 0; padding-left: 1.1rem; }
.conseils li { font-family: var(--serif); font-size: 0.875rem; line-height: 1.55; margin-bottom: 0.25rem; }

/* Le champ concerne, dans le formulaire */
.champManque input, .champManque textarea, .champManque.horaires, .champManque.prestations {
  outline: 2px solid var(--rouille-trait); outline-offset: 1px;
}
.champConseil input, .champConseil textarea, .champConseil.horaires {
  outline: 2px dashed var(--ambre-trait); outline-offset: 1px;
}

.paliers { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.palier {
  flex: 1 1 12rem; display: flex; gap: 0.55rem; align-items: flex-start;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 0.65rem 0.8rem; cursor: pointer;
}
.palier:has(input:checked) { border-color: var(--encre); }
.palier strong { display: block; font-size: 0.9375rem; }
.palier span { font-family: var(--serif); font-size: 0.8125rem; color: var(--gris); }

/* ══ Page d'inscription ══════════════════════════════════ */
.inscription { max-width: 34rem; margin: 2rem auto; padding: 0 1rem; display: block; }
.inscription .carte { padding: 1.4rem 1.3rem; }
.inscription h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 0.35rem; }
.inscription form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.inscription label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; }
.inscription input { font: inherit; padding: 0.55rem 0.65rem; border: 1px solid var(--trait); border-radius: var(--r); background: var(--blanc); }
.inscription .etapes { font-family: var(--serif); font-size: 0.875rem; color: var(--gris); padding-left: 1.1rem; margin: 0.8rem 0 0; line-height: 1.6; }
.inscription .erreur { color: var(--rouille); font-family: var(--serif); font-size: 0.875rem; margin: 0; }
.inscription .attente { font-family: var(--serif); color: var(--gris); font-size: 0.9375rem; }

/* Le rythme de paiement, au-dessus des formules. */
.periodes { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 0.25rem; }

/* ══ Le guide de l'espace client ═════════════════════════
   Une étape à la fois pour un client (app.js, afficherEtapes) : le fil en
   haut, la carte de l'étape, Précédent / Suivant en bas. L'admin voit toutes
   les cartes empilées (.guide.toutVoir). */

/* Le fil : une pastille par étape, reliées par un trait. */
.filEtapes { margin: 0.25rem 0 1.25rem; }
.ouEnEst { margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu); }
.ouEnEst:empty { display: none; }
#filEtapes { list-style: none; margin: 0; padding: 0; display: flex; }
#filEtapes li { flex: 1; position: relative; min-width: 0; }
/* le trait qui relie une pastille à la suivante */
#filEtapes li + li::before {
  content: ""; position: absolute; top: 1rem; right: 50%; width: 100%; height: 2px;
  background: var(--trait); z-index: 0;
}
#filEtapes li[data-ton="fait"] + li::before,
#filEtapes li[data-ton="fait"] + li[data-ton="courante"]::before { background: var(--vert); }
#filEtapes button {
  position: relative; z-index: 1; width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font: inherit;
}
#filEtapes button:disabled { cursor: not-allowed; }
.puce {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 700; color: var(--gris);
  background: var(--papier); border: 2px solid var(--trait);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.nomEtape { font-size: 0.75rem; font-weight: 600; color: var(--gris); text-align: center; line-height: 1.25; }
#filEtapes button:not(:disabled):hover .puce { border-color: var(--bleu); }
li[data-ton="fait"] .puce { color: var(--blanc); background: var(--vert); border-color: var(--vert); }
li[data-ton="fait"] .nomEtape { color: var(--vert); }
li[data-ton="manque"] .puce { color: var(--rouille); border-color: var(--rouille); background: var(--rouille-fond); }
li[data-ton="courante"] .puce {
  color: var(--blanc); background: var(--bleu); border-color: var(--bleu);
  transform: scale(1.12); box-shadow: 0 0 0 4px var(--bleu-fond);
}
li[data-ton="courante"] .nomEtape { color: var(--encre); font-weight: 700; }

/* La carte de l'étape */
.guide { margin-bottom: 0.5rem; }
.etape {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r);
  box-shadow: 0 1px 0 var(--trait-clair), 0 12px 28px -18px rgba(22, 40, 63, .35);
  overflow: hidden;
}
.guide.toutVoir { display: flex; flex-direction: column; gap: 1rem; }
.enteteEtape {
  display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem;
  background: linear-gradient(90deg, var(--bleu-fond), var(--blanc) 85%);
  border-bottom: 1px solid var(--trait-clair);
}
.enteteEtape .numeroEtape {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 700; color: var(--blanc); background: var(--bleu);
}
.etapeFinale .enteteEtape { background: linear-gradient(90deg, var(--vert-fond), var(--blanc) 85%); }
.etapeFinale .numeroEtape { background: var(--vert); }
.enteteEtape h3 { margin: 0; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--encre); outline: none; }
.sousTitreEtape { margin: 0.15rem 0 0; font-family: var(--serif); font-size: 0.9375rem; color: var(--gris); }
.corpsEtape { padding: 1.1rem 1.25rem 1.3rem; }

/* L'entrée d'une étape : elle glisse depuis le côté où l'on va. */
@keyframes entreDroite { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes entreGauche { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
.etape.entreDroite { animation: entreDroite .34s cubic-bezier(.2, .8, .2, 1); }
.etape.entreGauche { animation: entreGauche .34s cubic-bezier(.2, .8, .2, 1); }

.etape fieldset {
  border: 0; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1.1rem;
}
.etape fieldset > :is(p, div, details, label.ligne, label.large, button) { grid-column: 1 / -1; }
.etape fieldset > button { justify-self: start; margin-top: 0.5rem; }

/* Les messages : sous leur champ, et seulement une fois le champ quitté. */
@keyframes apparait { from { opacity: 0; transform: translateY(-0.2rem); } to { opacity: 1; transform: none; } }
.messageChamp {
  margin: 0.35rem 0 0; padding: 0.4rem 0.6rem; border-radius: var(--r); border-left: 3px solid;
  font-family: var(--serif); font-size: 0.8125rem; font-weight: 400; line-height: 1.45;
  animation: apparait .2s ease;
}
.messageChamp.manque  { color: #7E2F20; background: var(--rouille-fond); border-color: var(--rouille); }
.messageChamp.conseil { color: #6B4A0C; background: var(--ambre-fond); border-color: var(--ambre); }
.messagesEtape { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.messagesEtape li {
  font-family: var(--serif); font-size: 0.875rem; line-height: 1.5;
  padding: 0.5rem 0.75rem; border-left: 3px solid; border-radius: var(--r);
}
.messagesEtape li.manque  { background: var(--rouille-fond); border-color: var(--rouille); }
.messagesEtape li.conseil { background: var(--ambre-fond); border-color: var(--ambre); }
.prerempli {
  margin: 0 0 1rem; padding: 0.55rem 0.8rem; border-radius: var(--r);
  font-family: var(--serif); font-size: 0.875rem; line-height: 1.5; color: var(--encre);
  background: var(--bleu-fond); border-left: 3px solid var(--bleu);
}

details.avance { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--trait); }
details.avance > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--bleu); }
.grilleChamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }

/* Le code d'un nouveau numéro, sous le numéro. */
.codeNumero {
  margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--r);
  background: var(--bleu-fond); border: 1px solid #C9D6E6; animation: apparait .25s ease;
}
.codeTitre { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--encre); }
.ligneCode { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; margin-top: 0.6rem; }
.etape fieldset .ligneCode input#cCodeNumero {
  width: 11rem; flex: none; text-align: center; font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.4em; padding: 0.5rem 0.4rem 0.5rem 0.8rem; background: var(--blanc); border: 2px solid var(--bleu);
}
.erreurCode { margin: 0.5rem 0 0; font-family: var(--serif); font-size: 0.875rem; color: var(--rouille); }

/* Précédent / Suivant */
.navEtapes {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
}
.navEtapes #btnSuivant { margin-left: auto; min-width: 9rem; }
.navEtapes #btnAllerFin { order: 0; }
.lien {
  background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
  font-family: var(--display); font-size: 0.8125rem; font-weight: 600; color: var(--bleu);
  text-decoration: underline; text-underline-offset: 0.14em;
}

/* La dernière étape : l'essai en bandeau, puis les formules. */
.cgv {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.6rem 0.8rem;
  font-size: 0.875rem; background: var(--creme); border-radius: var(--r);
}
.cgv input { margin-top: 0.18em; accent-color: var(--bleu); }
.lancement { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.9rem; }
.choixLancement { padding: 0.9rem 1rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); }
.choixLancement h3 { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--encre); }
.essaiGratuit { background: var(--vert-fond); border-color: var(--vert-trait); }
.essaiGratuit .principal { background: var(--vert); border-color: var(--vert); }
.essaiGratuit .principal:hover:not(:disabled) { background: #2F6346; border-color: #2F6346; }
.exigences {
  margin: 0 0 0.7rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--ambre); border-radius: var(--r);
  font-family: var(--serif); font-size: 0.875rem; line-height: 1.5; background: var(--ambre-fond);
}
.exigences .lien { font-size: inherit; }

/* Le paiement dans la page, et sa confirmation. */
.paiementIntegre { margin-top: 0.4rem; animation: apparait .25s ease; }
.enteteIntegre {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap;
  margin-bottom: 0.8rem; font-size: 0.875rem; font-weight: 600; color: var(--encre);
}
#checkoutStripe { min-height: 24rem; }
@keyframes coche { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.paiementRecu {
  display: flex; gap: 0.9rem; align-items: flex-start; margin-top: 0.4rem; padding: 1rem 1.1rem;
  background: var(--vert-fond); border: 1px solid var(--vert-trait); border-radius: var(--r);
}
.paiementRecu .coche {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 700; color: var(--blanc); background: var(--vert);
  animation: coche .35s cubic-bezier(.2, .8, .2, 1);
}
.paiementRecu strong { font-size: 1rem; color: var(--encre); }
.paiementRecu p { margin: 0.2rem 0 0; font-family: var(--serif); font-size: 0.9375rem; color: var(--encre); }

@media (max-width: 40rem) {
  /* Sur un téléphone, le fil garde ses pastilles ; seul le nom de l'étape en cours reste. */
  .nomEtape { display: none; }
  li[data-ton="courante"] .nomEtape { display: none; }
  .puce { width: 1.7rem; height: 1.7rem; font-size: 0.75rem; }
  #filEtapes li + li::before { top: 0.85rem; }
  .enteteEtape { padding: 0.9rem 0.9rem; gap: 0.7rem; }
  .enteteEtape .numeroEtape { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
  .enteteEtape h3 { font-size: 1.1rem; }
  .corpsEtape { padding: 0.9rem 0.9rem 1.1rem; }
  .navEtapes { position: sticky; bottom: 0; background: var(--papier); padding: 0.6rem 0; margin-bottom: 0;
    border-top: 1px solid var(--trait); }
  .navEtapes #btnAllerFin { order: 3; width: 100%; text-align: center; }
  .navEtapes #btnPrecedent { flex: 0 1 auto; min-width: 0; }
}

/* ══ Console : à mettre en service ═══════════════════════ */
.miseEnService { border-color: var(--jaune-trait); box-shadow: inset 4px 0 0 var(--jaune); }
.aMettre { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; align-items: center;
  padding: 0.8rem 0; border-top: 1px solid var(--trait-clair); }
.aMettre:first-child { border-top: 0; }
.quiAttend { display: flex; flex-direction: column; gap: 0.15rem; }
.ligneMettre { display: flex; gap: 0.5rem; }
.numeroAchete { font-family: var(--serif); font-size: 0.9375rem; padding: 0.5rem 0.7rem; width: 12rem;
  background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r); }
.resultatMettre { grid-column: 1 / -1; margin: 0; }
.resultatMettre:empty { display: none; }
.aMettre.fait .resultatMettre { color: var(--vert); font-weight: 600; }
.aMettre.aFinir .resultatMettre { color: var(--rouille); font-weight: 600; }
.deuxGestes { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; line-height: 1.6; font-family: var(--serif); }
.aRegler { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--trait); font-size: 0.875rem; }
.aRegler summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
.aRegler ol { margin: 0.6rem 0 0; padding-left: 1.2rem; line-height: 1.6; font-family: var(--serif); }
.aRegler code { font-size: 0.8125rem; background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r); padding: 0.05rem 0.3rem; word-break: break-all; }
@media (max-width: 40rem) {
  .aMettre { grid-template-columns: 1fr; }
  .ligneMettre { flex-wrap: wrap; }
  .numeroAchete { flex: 1; width: auto; }
}

/* ══ Console : apporteurs d'affaires ═════════════════════ */
.miseEnService .ptit, #carteApporteurs .ptit { font-size: 0.75rem; color: var(--gris); }
.formApporteur {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 1rem;
  margin: 0.8rem 0 1rem; padding: 1rem; background: var(--bleu-fond); border-radius: var(--r);
}
.formApporteur label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8125rem; font-weight: 500; color: var(--gris); }
.formApporteur label.ligne { flex-direction: row; align-items: center; grid-column: 1 / -1; color: var(--encre); }
.formApporteur input:not([type=checkbox]) {
  font-family: var(--serif); font-size: 0.9375rem; padding: 0.45rem 0.6rem;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r);
}
.formApporteur .commandes, .formApporteur .aide { grid-column: 1 / -1; margin: 0; }
.apporteur { padding: 1rem 0; border-top: 1px solid var(--trait-clair); }
.apporteur:first-child { border-top: 0; }
.enteteApporteur { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.chiffresApporteur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0.8rem 0; }
.chiffresApporteur div { padding: 0.55rem 0.7rem; background: var(--creme); border-radius: var(--r); display: flex; flex-direction: column; gap: 0.15rem; }
.chiffresApporteur span { font-size: 0.75rem; color: var(--gris); }
.chiffresApporteur strong { font-size: 1.05rem; }
.chiffresApporteur .du { background: var(--vert-fond); }
.chiffresApporteur .du strong { color: var(--vert); }
.liensApporteur { display: grid; gap: 0.5rem; }
.liensApporteur label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--gris); }
.ligneLien { display: flex; gap: 0.4rem; }
.ligneLien input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 0.8125rem;
  padding: 0.4rem 0.55rem; background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r); }
.releveApporteur { margin-top: 0.8rem; }
.releveApporteur > summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--bleu); }
.releveApporteur h4 { margin: 0.9rem 0 0.3rem; font-size: 0.875rem; }
table.releve { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.875rem; }
table.releve td, table.releve th { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--trait-clair); text-align: left; }
table.releve .moisReleve th { padding-top: 0.8rem; text-transform: capitalize; border-bottom: 1px solid var(--trait); }
table.releve .montant { text-align: right; white-space: nowrap; }
.versements { margin: 0; padding-left: 1.1rem; font-family: var(--serif); font-size: 0.875rem; }
.formVersement { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.formVersement input { font-family: var(--serif); padding: 0.45rem 0.6rem; background: var(--creme);
  border: 1px solid var(--trait); border-radius: var(--r); }
.formVersement input[name=montantEur] { width: 8rem; }
.formVersement input[name=note] { flex: 1; min-width: 10rem; }
@media (max-width: 40rem) {
  .chiffresApporteur { grid-template-columns: repeat(2, 1fr); }
}
/* Le tableau des clients a gagné une colonne : il défile plutôt que de déborder. */
#tableClients { overflow-x: auto; }

/* ══ Espace apporteur (apporteur.html) ═══════════════════
   Pensé pour le téléphone : une fiche par prospect, ouverte d'un toucher,
   « Appeler » en grand, l'issue de l'appel en un geste. */
.espaceApporteur .bandeau { flex-wrap: wrap; }
.ongletsApporteur { flex-wrap: wrap; }
.ongletsApporteur .nb:empty { display: none; }
.ongletsApporteur .nb { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem;
  margin-left: 0.2rem; border-radius: 999px; font-size: 0.7rem; color: var(--blanc); background: var(--bleu); }
.contenuApporteur { display: block; max-width: 46rem; margin: 0 auto; padding: 1rem; }
.contenuApporteur .carte { margin-bottom: 1rem; }
.listeProspects { display: flex; flex-direction: column; gap: 0.6rem; }
.vide { font-family: var(--serif); color: var(--gris); text-align: center; padding: 2rem 1rem; }
.prospect { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
.prospect.ouverte { border-color: var(--bleu); box-shadow: inset 3px 0 0 var(--bleu); }
.enteteProspect { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.85rem 1rem; cursor: pointer; }
.enteteProspect:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
.nomProspect { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--encre); }
.metaProspect, .dirigeant { font-family: var(--serif); font-size: 0.875rem; color: var(--gris); }
.dirigeant { color: var(--encre); }
.badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-family: var(--display); font-size: 0.72rem;
  font-weight: 600; color: var(--gris); background: var(--creme); border: 1px solid var(--trait); }
.badge.seul { color: var(--vert); background: var(--vert-fond); border-color: var(--vert-trait); }
.badge.statut-interesse, .badge.statut-demo, .badge.statut-inscrit { color: var(--vert); background: var(--vert-fond); border-color: var(--vert-trait); }
.badge.statut-rappeler { color: var(--ambre); background: var(--ambre-fond); border-color: var(--ambre-trait); }
.badge.statut-pas_interesse, .badge.statut-ne_plus { color: var(--rouille); background: var(--rouille-fond); border-color: var(--rouille-trait); }
.rappel { margin: 0.2rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--ambre); }
.corpsProspect { display: none; padding: 0 1rem 1rem; border-top: 1px solid var(--trait-clair); }
.prospect.ouverte .corpsProspect { display: block; }
.appeler { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-top: 0.9rem; }
.boutonAppel { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem;
  text-decoration: none; font-size: 1rem; background: var(--vert); border-color: var(--vert); }
.boutonAppel:hover { background: #2F6346; border-color: #2F6346; }
.petitChamp { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.7rem; font-size: 0.8125rem; color: var(--gris); }
.appeler .petitChamp { margin-top: 0; flex: 1; min-width: 10rem; }
.petitChamp input, .petitChamp textarea { font-family: var(--serif); font-size: 0.9375rem; padding: 0.5rem 0.65rem;
  background: var(--creme); border: 1px solid var(--trait); border-radius: var(--r); color: var(--encre); }
.petitChamp .enregistre { border-color: var(--vert); background: var(--vert-fond); }
.etiquette { margin: 1rem 0 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gris); }
.statuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.statut { min-height: 2.75rem; padding: 0.4rem; border: 1px solid var(--trait); border-radius: var(--r); background: var(--blanc);
  font-family: var(--display); font-size: 0.8125rem; font-weight: 600; color: var(--encre); cursor: pointer; }
.statut:hover { border-color: var(--bleu); }
.statut.choisi { color: var(--blanc); background: var(--bleu); border-color: var(--bleu); }
.statut[data-statut="ne_plus"] { color: var(--rouille); }
.action { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--trait); }
.action > summary { cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--bleu); padding: 0.3rem 0; }
.action .principal, .action .secondaire { margin-top: 0.6rem; margin-right: 0.4rem; }
.action label.ligne { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; font-size: 0.875rem; }
.resultat { margin: 0.6rem 0 0; font-family: var(--serif); font-size: 0.9375rem; }
.resultat:empty { display: none; }
.clientsApporteur { list-style: none; margin: 0; padding: 0; }
.clientsApporteur li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; padding: 0.7rem 0;
  border-top: 1px solid var(--trait-clair); }
.script h3 { margin: 1.4rem 0 0.4rem; font-size: 1rem; }
.script ul { padding-left: 1.2rem; font-family: var(--serif); line-height: 1.6; }
.script p { font-family: var(--serif); line-height: 1.6; }
.script blockquote { margin: 0.6rem 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--bleu); background: var(--bleu-fond);
  font-family: var(--serif); font-size: 1rem; line-height: 1.6; }
.objections dt { margin-top: 0.9rem; font-family: var(--display); font-weight: 700; }
.objections dd { margin: 0.25rem 0 0; font-family: var(--serif); line-height: 1.6; color: var(--encre); }
@media (max-width: 40rem) {
  .statuts { grid-template-columns: repeat(2, 1fr); }
  .contenuApporteur { padding: 0.6rem; }
}
.formListe { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem 1rem; margin-top: 0.8rem; }
.formListe label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: var(--gris); }
.formListe input:not([type=checkbox]) { font-family: var(--serif); padding: 0.45rem 0.6rem; background: var(--creme);
  border: 1px solid var(--trait); border-radius: var(--r); }
.metiersListe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; border: 1px solid var(--trait);
  border-radius: var(--r); padding: 0.5rem 0.8rem 0.7rem; }
.metiersListe label.ligne { flex-direction: row; align-items: center; gap: 0.35rem; color: var(--encre); }
.formListe .resultatListe { grid-column: 1 / -1; margin: 0; }
.autreCompte p { font-family: var(--serif); line-height: 1.6; } .autreCompte .lien { margin-left: 1rem; }
.ligneDemo { margin: 0 0 0.8rem; padding: 0.65rem 0.85rem; border-left: 3px solid var(--bleu); border-radius: var(--r);
  background: var(--bleu-fond); font-family: var(--serif); font-size: 0.9rem; line-height: 1.5; }
.ligneDemo[hidden] { display: none; }

/* La conversation d'un appel, dans le journal de la console. */
.conversation summary { cursor: pointer; color: var(--bleu, #16283F); font-size: 0.8125rem; }
.conversation p { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.4; max-width: 38rem; }
.conversation p b { font-weight: 700; margin-right: 0.3rem; }
.conversation .lui { color: var(--gris); }
.conversation .lui b { color: inherit; }