/* Assistant Comptoir · interface vendeur
   Habillage « menu en haut » retenu par Karl le 14/10 (maquette docs/maquettes/visuel_comptoir.html) : barre blanche
   horizontale, page pleine largeur, accent indigo pour la sélection et l'information, vert pour l'action principale,
   ambre pour ce qui demande attention, violet pour tout ce qui est interne ; cartes sans bord avec une ombre légère ;
   police Figtree. Tailles pensées pour un écran de comptoir lu à un mètre : texte courant 16 px, rien sous 13 px. */

[hidden] { display: none !important; }

:root {
  --menu: #FFFFFF; --menu-actif: #EEF0FB; --menu-texte: #2C2F3A; --menu-attenue: #666B7B; --menu-trait: #E3E5EC; --menu-marque: #1D2030; --menu-filet: #4F5BD5;
  --fond: #F6F7FA; --surface: #FFFFFF; --surface-2: #F3F4F8; --encre: #1D2030; --attenue: #60657A; --trait: #E1E3EA; --trait-leger: #ECEEF3; --champ-trait: #BFC3D0;
  --bleu: #4F5BD5; --bleu-fonce: #3A44A6; --bleu-clair: #EEF0FB; --bleu-trait: #C9CDF2;
  --vert: #1F8A5B; --vert-fonce: #176A46; --vert-clair: #E4F5EC; --vert-trait: #B3E0C8;
  --ambre: #74500A; --ambre-icone: #D18F0A; --ambre-clair: #FFF5DF; --ambre-trait: #F0D79A;
  --rouge: #A3271F; --rouge-clair: #FCE8E6; --rouge-trait: #F1C0BB;
  --interne: #6B4FBB; --interne-clair: #F2EEFB; --interne-trait: #D8CDF0;
  --connexion-fond: #1D2030;
  --rayon: 12px; --rayon-petit: 8px; --carte-trait: transparent; --ombre: 0 1px 2px rgba(29, 32, 48, 0.06), 0 4px 14px rgba(29, 32, 48, 0.05);
  --bouton-rayon: 999px;
  --titres: Figtree, system-ui, sans-serif; --courant: Figtree, system-ui, sans-serif; --mono: 'IBM Plex Mono', Consolas, monospace;
  --texte: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: var(--texte)/1.5 var(--courant); }
::selection { background: var(--bleu-clair); color: var(--encre); }
input, select, textarea, progress { accent-color: var(--bleu); }
h1, h2, h3 { font-family: var(--titres); letter-spacing: -0.01em; margin: 0; font-weight: 700; }
h1 { font-size: 32px; line-height: 1.15; }
h2 { font-size: 20px; line-height: 1.25; }
h3 { font-size: 17px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.faible { color: var(--attenue); font-size: 14px; }
.grandit { flex-grow: 1; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Structure : barre de menu en haut, colonne « À suivre » à gauche, page à droite ---------- */
/* grid-template-rows : la barre garde sa hauteur quand la page est courte (sinon la grille l'étirait sur la moitié de l'écran) */
.appli { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.corps { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; min-width: 0; }
.corps.replie { grid-template-columns: 60px minmax(0, 1fr); }
.menu { background: var(--menu); color: var(--menu-texte); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 5; min-height: 66px; padding: 0 28px; border-bottom: 1px solid var(--menu-trait); }
.marque { padding: 0 24px 0 0; display: flex; flex-direction: row; align-items: baseline; gap: 10px; }
.marque strong { color: var(--menu-marque); font-family: var(--titres); font-size: 21px; }
.marque span { font-size: 14px; color: var(--menu-attenue); }
.liens { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
.lien { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: var(--menu-texte); text-decoration: none; cursor: pointer; font-size: 16px; font-weight: 500; text-align: left; }
.lien svg { flex-shrink: 0; }
.lien:hover { color: var(--menu-marque); background: var(--surface-2); }
.lien.actif { background: var(--menu-actif); color: var(--menu-marque); font-weight: 600; }
.pastille { background: #E0452F; color: #FFFFFF; font-size: 14px; font-weight: 700; border-radius: 999px; min-width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 7px; }
.pied-menu { margin: 0 0 0 auto; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 14px; }
.pied-menu label { font-size: 14px; color: var(--menu-attenue); }
.pied-menu select { height: 42px; border-radius: var(--rayon-petit); border: 1px solid var(--trait); background: var(--surface); color: var(--encre); padding: 0 10px; font-size: 16px; }
.etat { font-size: 14px; color: var(--menu-attenue); display: flex; align-items: center; gap: 8px; }
.etat::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--menu-attenue); }
.etat.ok { color: var(--vert-fonce); } .etat.ok::before { background: #3DBB6B; }
.etat.ko { color: var(--ambre); } .etat.ko::before { background: var(--ambre-icone); }

main { padding: 22px 36px 40px; min-width: 0; width: 100%; max-width: 1480px; margin: 0 auto; }
.entete { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.date-jour { margin: 0; color: var(--attenue); font-size: 16px; }
.colonne { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.carte { background: var(--surface); border: 1px solid var(--carte-trait); border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); }
.carte > h2 { margin-bottom: 12px; }
.titre-carte { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.titre-carte svg { flex-shrink: 0; }

/* ---------- Boutons ---------- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bouton { min-height: 50px; padding: 0 22px; border: 0; border-radius: var(--bouton-rayon); background: var(--bleu); color: #FFFFFF; font-weight: 600; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.bouton:hover { background: var(--bleu-fonce); }
.bouton:disabled { opacity: 0.55; cursor: wait; }
.bouton.action { background: var(--vert); }
.bouton.action:hover { background: var(--vert-fonce); }
.bouton.secondaire { background: var(--surface); color: var(--encre); border: 1px solid var(--champ-trait); }
.bouton.secondaire:hover { background: var(--bleu-clair); border-color: var(--bleu-trait); }
.bouton.petit { min-height: 42px; padding: 0 16px; font-size: 15px; }
.bouton.large { width: 100%; min-height: 64px; font-size: 21px; }

/* ---------- Saisie ---------- */
.saisie { background: var(--surface); border: 1px solid var(--carte-trait); border-radius: var(--rayon); padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--ombre); }
.ligne-champs { display: grid; grid-template-columns: 250px 190px 190px minmax(0, 1fr); gap: 16px; align-items: end; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label { font-size: 15px; font-weight: 600; }
.optionnel { font-weight: 400; color: var(--attenue); font-size: 14px; }
.champ input, .champ textarea, .avec-unite { border: 1px solid #AEB9C6; border-radius: 8px; background: #FFFFFF; min-height: 54px; }
.champ input, .champ textarea { padding: 0 14px; font-size: 18px; width: 100%; }
.champ textarea { padding: 13px 14px; resize: vertical; line-height: 1.4; }
.champ input:focus, .champ textarea:focus, .avec-unite:focus-within, .plaque-saisie:focus-within { outline: 3px solid var(--bleu-trait); outline-offset: 0; border-color: var(--bleu); }
.avec-unite { display: flex; align-items: center; padding-right: 14px; }
.avec-unite input { border: 0; min-height: 52px; outline: none; }
.avec-unite span { color: var(--attenue); }

/* Plaque : bande bleue et caractères noirs sur fond blanc, reconnaissable d'un coup d'œil */
.plaque-saisie { display: flex; align-items: stretch; border: 2px solid var(--encre); border-radius: 8px; overflow: hidden; background: #FFFFFF; min-height: 58px; }
.plaque-saisie .bande { width: 26px; background: #1E4FB5; color: #FFFFFF; font: 700 13px/1 var(--titres); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; flex-shrink: 0; }
.plaque-saisie input { border: 0; outline: none; min-height: 54px; text-align: center; text-transform: uppercase; font: 700 25px/1 var(--titres); letter-spacing: 0.05em; padding: 0 6px; }
.plaque-saisie input::placeholder { color: #8E95A3; }

.ligne-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.ligne-actions .actions { margin-left: auto; }
/* « Compris » en trois étages (V0.49) : puces et source, actions, puis questions et compléments */
.comprehension { display: flex; flex-direction: column; gap: 8px; font-size: 16px; flex: 1 1 400px; }
.compris-puces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.compris-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.compris-details > p { margin: 4px 0 0; }
.comprehension > p { margin: 4px 0 0; }
.puce { background: var(--bleu-clair); color: var(--bleu-fonce); border: 1px solid var(--bleu-trait); border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: 15px; }
.puce.orange { background: var(--ambre-clair); color: var(--ambre); border-color: var(--ambre-trait); }

.badge { display: inline-block; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 2px 9px; margin-left: 6px; vertical-align: middle; }
.badge.simule { background: var(--ambre-clair); color: var(--ambre); border: 1px solid var(--ambre-trait); }
.badge.reel { background: var(--vert-clair); color: var(--vert-fonce); border: 1px solid var(--vert-trait); }

/* ---------- Étapes du calcul ---------- */
.etapes { list-style: none; display: flex; align-items: center; gap: 0; padding: 12px 20px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--carte-trait); border-radius: var(--rayon); overflow-x: auto; box-shadow: var(--ombre); }
.etapes li { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--attenue); font-size: 15px; }
.etapes li + li::before { content: ""; width: 34px; height: 2px; background: var(--trait); margin: 0 12px; }
.etapes li.fait + li.fait::before { background: var(--vert-trait); }
.etapes .rond-etape { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--trait); display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.etapes li.fait { color: var(--encre); }
.etapes li.fait .rond-etape { background: var(--vert); border-color: var(--vert); color: #FFFFFF; }
.etapes li.encours .rond-etape { border-color: var(--bleu); border-top-color: transparent; animation: tourne 0.8s linear infinite; }
.etapes .duree { margin-left: auto; padding-left: 20px; }
.etapes li.duree::before { display: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .etapes li.encours .rond-etape { animation: none; } }

.message { margin: 0 0 14px; color: var(--attenue); }
.message.alerte { color: var(--ambre); background: var(--ambre-clair); border: 1px solid var(--ambre-trait); border-radius: var(--rayon); padding: 14px 16px; font-size: 16px; }

/* ---------- Brouillon ---------- */
.grille { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.tete-brouillon { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sous-titre { margin: 0 0 12px; }
.bascule-vue { display: inline-flex; border: 1px solid #B9C4D1; border-radius: 8px; overflow: hidden; }
.bascule-vue button { min-height: 44px; padding: 0 18px; border: 0; background: var(--surface); color: var(--attenue); font-weight: 600; cursor: pointer; }
.bascule-vue button + button { border-left: 1px solid #B9C4D1; }
.bascule-vue button[aria-pressed="true"] { background: var(--bleu); color: #FFFFFF; }
.bascule-vue button#vue-interne[aria-pressed="true"] { background: var(--interne); }
.bandeau-interne { background: var(--interne-clair); color: var(--interne); border: 1px solid var(--interne-trait); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600; margin: 0 0 12px; }

.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-size: 14px; color: var(--attenue); font-weight: 600; padding: 10px; border-bottom: 2px solid var(--trait); }
td { padding: 10px; border-top: 1px solid var(--trait-leger); vertical-align: top; }
td.code { font-family: var(--mono); font-size: 14px; color: var(--attenue); white-space: nowrap; }
.detail-ligne { display: block; color: var(--attenue); font-size: 14px; margin-top: 2px; }
.section-titre td { background: var(--surface-2); color: var(--encre); font-family: var(--titres); font-weight: 700; font-size: 17px; border-top: 0; padding: 8px 10px; }
.incluse td { color: var(--attenue); }
.barre { text-decoration: line-through; color: var(--attenue); font-size: 14px; margin-right: 8px; }
td.achat, th.achat { background: var(--interne-clair); color: var(--interne); }
.pied-brouillon { display: flex; justify-content: flex-end; align-items: stretch; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.totaux { display: grid; grid-template-columns: auto auto; gap: 4px 30px; font-size: 16px; align-content: start; }
.totaux .ttc { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 30px; background: var(--bleu); color: #FFFFFF; border-radius: var(--rayon-petit); padding: 10px 14px; margin-top: 6px; font-family: var(--titres); font-weight: 700; font-size: 26px; }
.bloc-marge { background: var(--interne-clair); border: 1px solid var(--interne-trait); color: var(--interne); border-radius: 8px; padding: 10px 18px; display: flex; flex-direction: column; justify-content: center; min-width: 180px; }
.bloc-marge strong { font-family: var(--titres); font-size: 26px; }
.alerte-section { color: var(--ambre); background: var(--ambre-clair); }

/* Pneus */
.choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choix button { text-align: left; border: 2px solid var(--trait); border-radius: var(--rayon); background: var(--surface); padding: 0 0 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.choix button:hover { border-color: var(--bleu-trait); }
.choix button[aria-pressed="true"] { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu); }
.choix .gamme { font-size: 14px; font-weight: 700; padding: 6px 14px; margin-bottom: 6px; }
.choix .gamme.premium { background: var(--bleu); color: #FFFFFF; }
.choix .gamme.milieu { background: var(--bleu-clair); color: var(--bleu-fonce); }
.choix .gamme.entree { background: var(--vert-clair); color: var(--vert-fonce); }
.choix .nom { padding: 0 14px; font-weight: 600; font-size: 16px; }
.choix .prix { padding: 0 14px; font-family: var(--titres); font-size: 28px; font-weight: 700; color: var(--bleu-fonce); }
.choix .prix small { font-family: var(--courant); font-size: 14px; font-weight: 500; color: var(--attenue); }
.choix .info { padding: 0 14px; font-size: 14px; color: var(--attenue); }
.stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; padding: 0 14px; }
.stock.ok { color: var(--vert); } .stock.attention { color: var(--ambre); }
.choix .achat-pneu { margin: 4px 14px 0; background: var(--interne-clair); color: var(--interne); border-radius: 6px; padding: 2px 8px; font-size: 14px; align-self: flex-start; }

/* ---------- Colonne de droite ---------- */
.plaque-affichee { display: inline-flex; align-items: stretch; border: 2px solid var(--encre); border-radius: 6px; overflow: hidden; font: 700 24px/1 var(--titres); letter-spacing: 0.05em; margin-bottom: 10px; }
.plaque-affichee .bande { width: 20px; background: #1E4FB5; }
.plaque-affichee span:not(.bande) { padding: 8px 12px; }
.vehicule-nom { font-size: 20px; margin-bottom: 8px; }
.infos { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; font-size: 15px; margin: 0; }
.infos dt { color: var(--attenue); } .infos dd { margin: 0; font-weight: 500; }

.carte.attention { background: var(--ambre-clair); border-color: var(--ambre-trait); }
.carte.attention h2 { color: var(--ambre); }
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; color: #3D2B00; }
.points .icone { width: 22px; height: 22px; border-radius: 50%; background: var(--ambre-icone); color: #FFFFFF; font-weight: 700; font-size: 14px; display: grid; place-items: center; margin-top: 1px; }
.points .icone.info { background: var(--bleu); }

.creneaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.creneau { border: 2px solid var(--bleu-trait); border-radius: 8px; background: var(--surface); padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--bleu-fonce); }
.creneau .jour { font-size: 14px; font-weight: 600; }
.creneau .heure { font-family: var(--titres); font-size: 26px; font-weight: 700; line-height: 1.1; }
.creneau:hover { background: var(--bleu-clair); }
.creneau[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #FFFFFF; }
.explication { margin: 10px 0 0; }

.valide { background: var(--vert-clair); color: var(--vert-fonce); border: 1px solid var(--vert-trait); border-radius: 8px; padding: 12px 14px; font-size: 15px; margin: 10px 0 0; }
.reponse { white-space: pre-line; background: #F6F8FB; border: 1px solid var(--trait-leger); border-radius: 8px; padding: 14px; font-size: 15px; line-height: 1.6; margin: 10px 0; }

/* ---------- Demandes mail ---------- */
.bandeau { border-radius: var(--rayon); padding: 12px 16px; font-size: 15px; margin: 0 0 14px; display: flex; gap: 10px; align-items: flex-start; }
.bandeau.reel { background: var(--bleu-clair); color: var(--bleu-fonce); border: 1px solid var(--bleu-trait); }
.bandeau.simule { background: var(--ambre-clair); color: var(--ambre); border: 1px solid var(--ambre-trait); }
.bandeau.ok { background: var(--vert-clair); color: var(--vert-fonce); border: 1px solid var(--vert-trait); }
.barre-outils { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.barre-outils label { font-weight: 600; }
.barre-outils select { min-height: 50px; border-radius: 8px; border: 1px solid #AEB9C6; background: var(--surface); padding: 0 12px; min-width: 230px; font-size: 16px; }
.barre-outils input[type=search] { min-height: 50px; border-radius: 8px; border: 1px solid #AEB9C6; background: var(--surface); padding: 0 12px; min-width: 280px; font-size: 16px; text-transform: uppercase; }
.barre-outils input[type=search]::placeholder { text-transform: none; }

/* Liste des demandes (V0.99.32, concept 2 de Karl) : liste en pleine largeur, détail en dessous */
.grille-mails { display: flex; flex-direction: column; gap: 18px; }
.liste-mails { padding: 0; overflow: hidden; }
.defilement-mails { max-height: 440px; overflow-y: auto; }
.entete-liste, .ligne-mail { display: grid; grid-template-columns: 120px minmax(0, 1fr) 250px; gap: 14px; align-items: center; }
.entete-liste { padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--attenue); border-bottom: 2px solid var(--trait); background: #F6F8FB; }
/* La ligne entière prend la couleur de son état (Karl 14/10) ; un accord client à finaliser clignote doucement */
.ligne-mail { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--trait-leger); background: color-mix(in srgb, var(--couleur-etat, var(--surface)) 9%, var(--surface)); padding: 10px 20px 10px 16px; cursor: pointer; min-height: 64px; box-shadow: inset 5px 0 0 var(--couleur-etat, transparent); }
.ligne-mail.ignoree, .ligne-mail.refus { background: var(--surface); }
.ligne-mail:hover { background: color-mix(in srgb, var(--couleur-etat, var(--surface)) 16%, var(--surface)); }
.ligne-mail[aria-pressed="true"] { background: color-mix(in srgb, var(--couleur-etat, var(--bleu)) 22%, var(--surface)); box-shadow: inset 5px 0 0 var(--couleur-etat, var(--bleu)), inset 0 0 0 1px var(--couleur-etat, var(--bleu)); }
.ligne-mail.accord { animation: ligne-accord 1.8s ease-in-out infinite; }
@keyframes ligne-accord { 0%, 100% { background-color: color-mix(in srgb, var(--etat-accord) 9%, var(--surface)); } 50% { background-color: color-mix(in srgb, var(--etat-accord) 26%, var(--surface)); } }
.carte-suivi.accord { animation: carte-accord 1.8s ease-in-out infinite; }
@keyframes carte-accord { 0%, 100% { background-color: color-mix(in srgb, var(--etat-accord) 7%, #FFFFFF); } 50% { background-color: color-mix(in srgb, var(--etat-accord) 22%, #FFFFFF); } }
@media (prefers-reduced-motion: reduce) { .ligne-mail.accord, .carte-suivi.accord { animation: none; } }
.ligne-mail.ignoree, .ligne-mail.refus { color: var(--attenue); }
.ligne-mail.ignoree strong, .ligne-mail.refus strong { font-weight: 500; }
.ligne-mail .quand { font-size: 14px; line-height: 1.3; color: var(--attenue); }
.ligne-mail .quand b { display: block; font-size: 16px; color: inherit; }
.ligne-mail.nouvelle .quand b, .ligne-mail.accord .quand b, .ligne-mail.encours .quand b { color: var(--encre); }
.ligne-mail .resume-mail { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ligne-mail .resume-mail > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-mail .qui { display: flex; align-items: center; gap: 8px; }
.ligne-mail .quoi { font-size: 16px; }
.ligne-mail .apercu { color: var(--attenue); font-size: 14px; }
.ligne-mail .colonne-etat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.code-magasin { border: 1px solid var(--trait); background: #F6F8FB; border-radius: 6px; padding: 1px 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.code-magasin.inconnu { color: var(--ambre); background: var(--ambre-clair); border-color: var(--ambre-trait); }
.vide { padding: 22px 16px; margin: 0; color: var(--attenue); }

.etiquette { justify-self: start; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 3px 11px; border: 1px solid transparent; white-space: nowrap; }
.etiquette.pret { background: var(--vert-clair); color: var(--vert-fonce); border-color: var(--vert-trait); }
.etiquette.partiel, .etiquette.a_completer { background: var(--ambre-clair); color: var(--ambre); border-color: var(--ambre-trait); }
.etiquette.erreur { background: var(--rouge-clair); color: var(--rouge); border-color: var(--rouge-trait); }
.etiquette.attente, .etiquette.statut { background: #EEF1F5; color: var(--attenue); border-color: var(--trait); }

.tete-mail { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tete-mail .titre-mail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.tete-mail h2 { font-size: 22px; }
.expediteur { margin: 4px 0 14px; font-size: 15px; color: var(--attenue); }
.expediteur strong { font-weight: 600; color: var(--encre); }
.corps-mail { white-space: pre-line; font-size: 16px; line-height: 1.6; background: var(--surface-2); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; }
.pieces { margin: 0; font-size: 14px; color: var(--attenue); }
/* Détail en deux cartes : la demande du client à gauche, la réponse envoyée et les prestations identifiées à droite */
.detail-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.detail-grille > .carte, .detail-grille .colonne > .carte { border: 1px solid var(--trait); box-shadow: none; }
.carte-demande h3, .carte-reponse h3 { font-size: 18px; margin: 0; }
.carte-demande .source, .carte-reponse .source { margin: 2px 0 12px; color: var(--attenue); font-size: 14px; }
.carte-reponse h3 { display: flex; align-items: center; gap: 8px; color: var(--vert-fonce); }
.champs-formulaire { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 14px; margin: 0 0 12px; font-size: 16px; }
.champs-formulaire dt { color: var(--attenue); } .champs-formulaire dd { margin: 0; font-weight: 500; }
.commentaire-client { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }
.commentaire-client .faible { display: block; }
.reponse-courte { max-height: 280px; overflow: hidden; position: relative; }
.reponse-courte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--surface-2)); }
.lire-reponse > summary { cursor: pointer; font-size: 15px; color: var(--bleu-fonce); font-weight: 600; }
.lire-reponse[open] > summary { margin-bottom: 8px; }
.lire-reponse[open] + .reponse-courte, .lire-reponse[open] .reponse-courte { max-height: none; } .lire-reponse[open] .reponse-courte::after { display: none; }
.ligne-messagerie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info-lecture { display: inline-flex; align-items: center; gap: 6px; color: var(--attenue); font-size: 14px; cursor: help; }
.info-lecture::before { content: "i"; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--attenue); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
/* Onglets par état, au-dessus de la liste */
.onglets-etat { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.onglets-etat button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 16px; font-weight: 500; }
.onglets-etat button:hover { border-color: var(--bleu-trait); }
.onglets-etat button[aria-pressed="true"] { background: var(--bleu-clair); border-color: var(--bleu-trait); font-weight: 600; }
.onglets-etat .compte { color: var(--attenue); font-variant-numeric: tabular-nums; }
.onglets-etat button[aria-pressed="true"] .compte { color: var(--bleu-fonce); }

.compris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.compris .infos { font-size: 16px; grid-template-columns: 170px minmax(0, 1fr); }
.compris-detail { margin-top: 10px; font-size: 15px; }
.compris-detail p { margin: 6px 0; }

@media (max-width: 1400px) {
  .ligne-champs { grid-template-columns: 240px 170px 170px minmax(0, 1fr); }
  .detail-grille { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .menu { position: static; padding: 10px 14px; }
  .marque span { display: none; }
  main { padding: 18px; }
  .corps, .corps.replie { grid-template-columns: 1fr; }
  .a-suivre { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--menu-trait); }
  .corps.replie .a-suivre { width: auto; }
  .grille { grid-template-columns: 1fr; }
  .ligne-champs { grid-template-columns: 1fr 1fr; }
  .choix { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ligne-champs { grid-template-columns: 1fr; }
  .entete-liste { display: none; }
  .ligne-mail { grid-template-columns: 1fr; }
  .ligne-mail .apercu { display: none; }
}

.choix-forfait { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choix-forfait .bouton { font-family: var(--mono); }
.section-titre.hors td { background: var(--ambre-clair); color: var(--ambre); }

/* Synthèse de la demande */
.synthese { border-radius: var(--rayon); padding: 14px 20px; margin-bottom: 18px; border: 1px solid; }
.synthese.complet { background: var(--vert-clair); border-color: var(--vert-trait); color: var(--vert-fonce); }
.synthese.incomplet { background: var(--ambre-clair); border-color: var(--ambre-trait); color: var(--ambre); }
.synthese-titre { display: flex; align-items: center; gap: 10px; }
.synthese-titre h2 { font-size: 21px; }
.synthese-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.synthese-liste li { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--trait); border-radius: 8px; padding: 6px 12px; font-size: 15px; color: var(--encre); }
.synthese-liste li span:last-child { color: var(--attenue); }
.synthese-liste .marque-etat { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #FFFFFF; font-weight: 700; font-size: 14px; }
.synthese-liste li.ok .marque-etat { background: var(--vert); }
.synthese-liste li.manque { border-color: var(--ambre-trait); }
.synthese-liste li.manque .marque-etat { background: var(--ambre-icone); }
/* Ajouter une prestation depuis la synthèse (V0.99.66) */
.synthese-liste li.ajout { padding: 0; border-style: dashed; background: transparent; }
.synthese-liste li.ajout button { min-height: 38px; padding: 0 14px; border: 0; background: transparent; color: var(--bleu); font-weight: 600; cursor: pointer; border-radius: 8px; }
.synthese-liste li.ajout button:hover { background: var(--bleu-clair); }
.form-ajout { margin: 10px 0 0; }
.form-ajout .ligne-ajout { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.form-ajout input { flex: 1 1 260px; min-height: 46px; border: 1px solid var(--champ-trait); border-radius: 10px; padding: 0 12px; background: var(--surface); color: var(--encre); font-size: 16px; }
.synthese.complet .form-ajout .faible, .synthese.incomplet .form-ajout .faible { color: var(--attenue); margin: 0; }
.synthese .faible { margin: 10px 0 0; color: var(--ambre); }

/* Connexion */
.ecran-connexion { position: fixed; inset: 0; background: var(--connexion-fond); display: grid; place-items: center; padding: 20px; z-index: 50; }
.boite-connexion { background: var(--surface); border-radius: 14px; padding: 32px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px; }
.boite-connexion h1 { font-size: 28px; }
.boite-connexion .champ input { text-transform: none; }
#cx-id { text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.08em; }
.utilisateur { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--encre); }
.utilisateur button { background: transparent; border: 1px solid var(--trait); color: var(--attenue); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 14px; }
.utilisateur button:hover { color: var(--encre); border-color: var(--bleu); }

/* Journal */
.base-test { display: inline-block; background: var(--ambre-clair); color: var(--ambre); border: 1px solid var(--ambre-trait); border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 700; }
.etat-journal { font-size: 14px; font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; white-space: nowrap; }
.etat-journal.non-valide { background: var(--surface); color: var(--attenue); border-color: var(--trait); border-style: dashed; }
.etat-journal.valide { background: #EEF1F5; color: var(--attenue); border-color: var(--trait); }
.etat-journal.winpro { background: var(--bleu-clair); color: var(--bleu-fonce); border-color: var(--bleu-trait); }
.etat-journal.commande { background: var(--vert-clair); color: var(--vert-fonce); border-color: var(--vert-trait); }
.etat-journal.alerte { background: var(--ambre-clair); color: var(--ambre); border-color: var(--ambre-trait); }

/* Recalcul discret (changement de gamme) : le devis reste affiché, légèrement estompé */
#resultat.recalcul { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* Recherche d'un forfait pour un besoin hors catalogue (V0.22) */
.zone-recherche:empty { display: none; }
.panneau-recherche { margin-top: 10px; padding: 12px; border: 1px solid #d5dbe5; border-radius: 8px; background: #f7f9fc; }
.panneau-recherche label { display: block; font-weight: 600; margin-bottom: 6px; }
.ligne-recherche { display: flex; gap: 8px; flex-wrap: wrap; }
.ligne-recherche input { flex: 1 1 220px; min-height: 44px; font-size: 16px; padding: 0 10px; }
.resultats-forfaits { list-style: none; margin: 8px 0 0; padding: 0; }
.resultats-forfaits li { padding: 6px 0; border-top: 1px solid #e6eaf0; }
.bloc-hors { margin-top: 12px; }
.bloc-hors ul { list-style: none; padding: 0; }
.bloc-hors li { padding: 8px 0; }

/* Apprendre une prestation (V0.23) */
.form-prestation label { display: block; margin: 10px 0 4px; font-weight: 600; }
.form-prestation label.option { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.form-prestation input, .form-prestation select { min-height: 44px; font-size: 16px; padding: 0 8px; }
.form-prestation label > input:not([type=checkbox]), .form-prestation label > select { display: block; width: 100%; margin-top: 4px; }
.form-prestation fieldset { border: 1px solid #d5dbe5; border-radius: 8px; margin: 12px 0; padding: 8px 12px; }
.form-prestation legend { font-weight: 600; padding: 0 4px; }
.ligne-regle { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; align-items: flex-end; }
.ligne-regle > input, .ligne-regle > select { flex: 1 1 160px; }
.saisie-quantite td { background: #fff8e6; }
.saisie-quantite input { width: 110px; min-height: 44px; font-size: 16px; margin: 0 8px; }

/* Suggestions de forfaits (V0.24) */
.suggestions-auto { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suggestions-auto:empty { display: none; }
.suggestions-auto .suggestion { text-align: left; }
.choix-rapides { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qte-conso { width: 80px; min-height: 44px; font-size: 16px; text-align: right; }

/* ---------- Où en est l'estimation (V0.99.31) : carte sous le devis ---------- */
.suite { margin-top: 18px; }
.suite .titre-carte { margin-bottom: 8px; }
.suite .valide { margin: 0; }
.creneaux.nombreux { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.autre-date { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trait-leger); }
.autre-date label { font-weight: 600; }
.autre-date .heure-souhaitee { margin-left: 6px; }
.autre-date input { min-height: 50px; border: 1px solid #AEB9C6; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 17px; }
.message.ok { color: var(--vert-fonce); background: var(--vert-clair); border: 1px solid var(--vert-trait); border-radius: var(--rayon); padding: 14px 16px; font-size: 16px; }
#reponse-client > .carte { margin-top: 18px; }

/* ---------- Pneus : liste complète et autres choix (V0.31) ---------- */
.liste-pneus { margin-top: 16px; }
.liste-pneus summary { min-height: 50px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 17px; color: var(--bleu-fonce); }
.liste-pneus tr.retenu td { background: var(--bleu-clair); }
.liste-pneus .num small { color: var(--attenue); font-size: 14px; }
.dispo-ok { color: var(--vert); font-weight: 600; } .dispo-attention { color: var(--ambre); font-weight: 600; }
.actions-pneu { white-space: nowrap; }
.actions-pneu .bouton + .bouton { margin-left: 6px; }
.actions-pneu .bouton[aria-pressed="true"] { background: var(--vert-clair); border-color: var(--vert-trait); color: var(--vert-fonce); }
.etiquette-retenu, .etiquette-option { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 700; }
.etiquette-retenu { background: var(--bleu); color: #FFFFFF; }
.etiquette-option { background: var(--ambre-clair); color: var(--ambre); border: 1px solid var(--ambre-trait); }
.autre-choix td { color: var(--attenue); font-style: italic; }
.autres-proposes { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.retirer-option { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; min-width: 32px; min-height: 32px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1180px) {
  .creneaux.nombreux { grid-template-columns: 1fr 1fr; }
}

/* ---------- Ajouter / choisir un article (V0.32) ---------- */
.panneau-article { margin-top: 10px; padding: 12px; border: 2px solid var(--bleu-trait); border-radius: var(--rayon); background: var(--surface); color: var(--encre); font: 400 16px/1.5 var(--courant); }
.panneau-article label { display: block; font-weight: 600; }
.panneau-article input { display: block; width: 100%; max-width: 520px; min-height: 50px; margin-top: 6px; border: 1px solid #AEB9C6; border-radius: 8px; padding: 0 12px; font: inherit; }
.resultats-article { margin-top: 10px; }
.resultats-article td { vertical-align: middle; }

/* ---------- Pneus au choix du client (V0.33) ---------- */
.choix-pneu-titre td { background: #F4F7FB; border-top: 2px solid var(--trait); }
.choix-pneu-titre.retenu td { background: var(--bleu-clair); }
.arguments { display: block; margin-top: 4px; font-size: 14px; font-style: italic; color: var(--vert-fonce); }
.choix .arguments { padding: 0 14px; font-size: 14px; }
.totaux .ttc.autre { background: var(--surface-2); color: var(--encre); font-size: 22px; margin-top: 4px; }
.marge-choix { display: flex; flex-direction: column; }
.marge-choix + .marge-choix { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--interne-trait); }
.marge-choix strong { font-size: 22px; }
.question-vendeur td { background: var(--ambre-clair); color: var(--ambre); font-size: 15px; border-top: 0; padding: 6px 10px; }
.choix-raz .bouton[aria-pressed="true"] { background: var(--bleu); color: #FFFFFF; border-color: var(--bleu); }

/* ---------- Historique du véhicule (V0.35.5) ---------- */
.fenetre { width: min(1100px, 94vw); max-height: 88vh; border: 0; border-radius: var(--rayon); padding: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.fenetre::backdrop { background: rgba(0, 0, 0, 0.5); }
.fenetre-tete { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--trait); z-index: 1; }
.fenetre-tete h2 { margin: 0; }
.fenetre-corps { padding: 6px 20px 20px; }
.fenetre-corps h3 { margin: 18px 0 8px; }
.doc-historique { border: 1px solid var(--trait); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.doc-tete { margin: 0 0 4px; }
.liste-simple { margin: 0; padding-left: 20px; }
.titre-carte #ouvrir-historique { margin-left: auto; }
.source-vehicule { background: var(--bleu-clair); color: var(--bleu-fonce); border-radius: 6px; padding: 4px 10px; font-size: 14px; margin: 0 0 8px; }
/* Autres marques (V0.42.5) : un bouton qui déplie la liste des marques de la famille */
.choix-marque { display: inline-block; margin-left: 4px; }
.choix-marque summary { list-style: none; cursor: pointer; display: inline-flex; }
.choix-marque summary::-webkit-details-marker { display: none; }
.choix-marque[open] > span { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Apprendre aux règles ce que l'IA a compris (V0.44) */
.bandeau-apprendre { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #EEF4FF; border: 1px solid #C9D8F5; }
.bandeau-apprendre p { margin: 0 0 6px; }
.bandeau-apprendre .expr-apprendre { min-width: 18em; max-width: 100%; font-size: 16px; padding: 6px 8px; }

/* « Expliquer à l'outil » (V0.47) */
.expliquer { margin-top: 14px; }
.expliquer h2 { margin: 0 0 6px; font-size: 18px; }
.fil-explication { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fil-explication li { padding: 8px 12px; border-radius: 8px; max-width: 80ch; font-size: 16px; }
.fil-explication li.vendeur { background: #F2F4F7; align-self: flex-end; }
.fil-explication li.outil { background: #EEF4FF; border: 1px solid #C9D8F5; }
.form-expliquer { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.form-expliquer textarea { font-size: 16px; padding: 8px; width: 100%; box-sizing: border-box; }
.form-expliquer .actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Bilan d'entretien (V0.48) */
.bilan-entretien { margin: 0 0 16px; }
.bilan-entretien h2 { margin: 0 0 6px; font-size: 18px; }
.table-bilan td, .table-bilan th { font-size: 16px; vertical-align: middle; }
.table-bilan tr.a-faire td:first-child { box-shadow: inset 3px 0 0 var(--ambre-icone); }
.table-bilan tr.ok td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
.table-bilan tr.inconnu td:first-child { box-shadow: inset 3px 0 0 var(--trait); }

/* Étapes réelles (V0.52) : étape en panne */
.etapes li.panne { color: var(--rouge, #B3261E); font-weight: 600; }
.etapes li.panne .rond-etape { background: var(--rouge, #B3261E); border-color: var(--rouge, #B3261E); color: #FFFFFF; }

/* Pièces écartées par véhicule (V0.53) */
.pieces-ecartees { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--trait); }
.pieces-ecartees h3 { margin: 0 0 6px; font-size: 16px; }
.pieces-ecartees ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bouton.attention { border-color: var(--ambre-trait); background: var(--ambre-clair); color: var(--ambre); }

/* Types de demande dans la liste des mails (V0.54) */
.types-demande { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: middle; }
.type-demande { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--bleu-clair); color: var(--bleu-fonce); border: 1px solid var(--bleu-trait); }

/* Conseils d'intervention repliés (V0.56.2) */
.bilan-entretien details > summary { cursor: pointer; font-size: 16px; padding: 4px 0; }
.bilan-entretien details[open] > summary { margin-bottom: 8px; }

/* Points d'attention en deux blocs et synthèse compacte (V0.60) */
.attention .compte { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--ambre); color: #FFFFFF; font-size: 13px; text-align: center; margin-left: 6px; vertical-align: middle; }
.attention .compte.faible { background: var(--trait); color: var(--attenue); }
.bon-a-savoir { margin-top: 10px; }
.bon-a-savoir > summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--attenue); }
.exemples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 15px; color: var(--attenue); }
.exemples button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bleu-trait); background: var(--bleu-clair); color: var(--bleu-fonce); font-size: 15px; cursor: pointer; }
.exemples button:hover { background: #DCE8FB; }
.entete-impression { display: none; }

/* Estimation sans immatriculation (V0.62) */
.encadre-attention { background: var(--ambre-clair); border: 1px solid var(--ambre-trait); border-radius: var(--rayon); padding: 10px 14px; margin: 0 0 10px; font-size: 15px; }

/* Message d'origine d'un formulaire de site (V0.64) */
.original-mail { margin-top: 10px; }
.original-mail > summary { cursor: pointer; font-size: 15px; color: var(--attenue); font-weight: 600; }
.original-mail .corps-mail { margin-top: 8px; font-size: 14px; color: var(--attenue); }

/* Choix de la boîte d'envoi quand le magasin en a plusieurs (V0.65) */
.choix-boite { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.choix-boite select { min-height: 40px; font-size: 15px; }

/* Conversation d'un mail (V0.71) */
.nb-echanges { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--bleu-clair); color: var(--bleu-fonce); font-size: 13px; font-weight: 600; }
.conversation { margin: 0 0 12px; }
.conversation > summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--attenue); margin-bottom: 8px; }
.echange { box-shadow: inset 2px 0 0 var(--trait); padding: 6px 0 6px 12px; margin: 0 0 10px; }
.echange.outil { box-shadow: inset 2px 0 0 var(--bleu); background: var(--bleu-clair); border-radius: 0 8px 8px 0; padding-right: 10px; }
.echange .qui, .dernier-message { font-size: 14px; color: var(--attenue); font-weight: 600; margin: 0 0 4px; }
.echange .corps-mail { font-size: 15px; }

/* Journal : estimation envoyée par mail (V0.76) */
.etat-journal.mail { background: var(--bleu-clair); color: var(--bleu-fonce); margin-top: 4px; display: inline-block; }

/* Promotion de vente sur une carte de pneu (V0.87) */
.choix .promo { display: block; margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: var(--vert-clair); color: var(--vert-fonce); font-size: 14px; font-weight: 600; }

/* ---------- Tutoriel du vendeur (V0.91) : zone mise en évidence, explication fixe en bas de l'écran ---------- */
.tutoriel { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; width: min(560px, calc(100% - 24px)); background: var(--surface); color: var(--encre);
  border: 2px solid var(--bleu); border-radius: var(--rayon); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); padding: 16px 20px; }
.tutoriel:focus { outline: none; }
.tutoriel h2 { margin: 2px 0 6px; font: 700 20px/1.25 var(--titres); }
.tutoriel p { margin: 0 0 8px; }
.tutoriel-rang { font-size: 14px; color: var(--attenue); }
.tutoriel-note { background: var(--ambre-clair); border: 1px solid var(--ambre-trait); color: var(--ambre); border-radius: 8px; padding: 8px 12px; }
.tutoriel-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.tutoriel-actions .bouton { min-height: 50px; }
.tutoriel-cible { outline: 4px solid var(--ambre-icone) !important; outline-offset: 4px; border-radius: var(--rayon); scroll-margin: 120px; }
@media print { .tutoriel { display: none; } .tutoriel-cible { outline: 0 !important; } }

/* Confirmation de rendez-vous par le client (V0.94) */
.type-demande.confirme { background: var(--vert-clair); color: var(--vert-fonce); border-color: var(--vert-trait); font-weight: 600; }

/* Demande en cours chez un vendeur (V0.95) */
.etiquette.encours { background: var(--bleu-clair); color: var(--bleu-fonce); border-color: var(--bleu-trait); }

.alerte-texte { color: #b3261e; font-weight: 600; }

/* Nouveau client à créer dans l'ERP avec le devis (V0.99.18) */
.nouvelle-personne { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface-2); }
.nouvelle-personne label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.nouvelle-personne input, .nouvelle-personne select { min-height: 46px; font-size: 16px; font-weight: 400; padding: 0 10px; border: 1px solid #AEB9C6; border-radius: 8px; background: var(--surface); }
.nouvelle-personne .obligatoire { font-weight: 400; color: #b3261e; font-size: 13px; }
.nouvelle-personne .conseille { font-weight: 400; color: var(--ambre, #8a5a00); font-size: 13px; }
.nouvelle-personne p { grid-column: 1 / -1; margin: 0; }
#personnes-trouvees { margin-top: 6px; }
.resultats-personnes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.resultat-personne { width: 100%; text-align: left; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); padding: 8px 12px; cursor: pointer; font-size: 15px; display: flex; flex-direction: column; }
.resultat-personne:hover { border-color: var(--bleu); background: var(--bleu-clair); }
.nouvelle-personne .titre-fiche { grid-column: 1 / -1; margin: 0; font-weight: 600; }

/* ---------- Fenêtre « Valider le devis » (V0.99.31, capture de Karl du 14/10) ---------- */
.actions-brouillon { margin-right: auto; align-self: center; }
.lien-texte { background: none; border: 0; color: var(--bleu); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; font-size: inherit; }
.fenetre-validation { border: 0; border-radius: 14px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 60px rgba(29, 32, 48, 0.28); color: var(--encre); background: var(--surface); }
.fenetre-validation::backdrop { background: rgba(29, 32, 48, 0.45); }
.fenetre-validation .fen-corps { padding: 24px 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.fenetre-validation .fen-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fenetre-validation .fen-tete h2 { font-size: 22px; }
.fenetre-validation .fen-tete p { margin: 4px 0 0; color: var(--attenue); font-size: 15px; }
.fenetre-validation .fermer { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--attenue); padding: 4px 10px; border-radius: 8px; min-width: 44px; min-height: 44px; }
.fenetre-validation .fermer:hover { background: var(--surface-2); color: var(--encre); }
.fenetre-validation .fen-total { display: flex; justify-content: space-between; background: var(--bleu-clair); color: var(--bleu-fonce); border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 17px; }
.fenetre-validation .options { display: flex; flex-direction: column; gap: 10px; }
.fenetre-validation .option { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.fenetre-validation .option.coche { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 0 0 1px var(--bleu); }
.fenetre-validation .option.discret { border-style: dashed; }
.fenetre-validation .option.inactif { opacity: 0.6; cursor: not-allowed; }
.fenetre-validation .option input { margin-top: 5px; flex-shrink: 0; width: 18px; height: 18px; }
.fenetre-validation .option .texte strong { display: block; }
.fenetre-validation .option .texte span { color: var(--attenue); font-size: 14px; }
.fenetre-validation .bloc { border-top: 1px solid var(--trait-leger); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.fenetre-validation .bloc h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--attenue); }
.fenetre-validation .creneau { border-radius: 10px; }
.fenetre-validation .creneau .heure { font-size: 24px; }
.fenetre-validation .autre-date { margin-top: 0; padding-top: 0; border-top: 0; font-size: 14px; gap: 8px 10px; }
.fenetre-validation .autre-date input { min-height: 44px; font-size: 15px; padding: 0 8px; }
.fenetre-validation .message { margin: 0; }
.fenetre-validation .motifs { display: flex; gap: 6px; flex-wrap: wrap; }
.fenetre-validation .motifs button { border: 1px solid var(--champ-trait); background: var(--surface); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 15px; min-height: 42px; }
.fenetre-validation .motifs button[aria-pressed="true"] { background: var(--encre); color: #FFFFFF; border-color: var(--encre); }
.fenetre-validation .personne { display: flex; align-items: center; gap: 12px; border: 1px solid var(--trait); border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; }
.fenetre-validation .personne .texte { flex: 1 1 200px; min-width: 0; }
.fenetre-validation .personne .texte strong { display: block; }
.fenetre-validation .personne .texte span { color: var(--attenue); font-size: 14px; }
.fenetre-validation .personne select, .fenetre-validation .ligne-intervenant select { min-height: 44px; border: 1px solid var(--champ-trait); border-radius: 8px; padding: 0 8px; font-size: 15px; background: var(--surface); max-width: 100%; }
.fenetre-validation .ligne-fiche { margin: 0; }
.fenetre-validation .ligne-intervenant { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.fenetre-validation .ligne-intervenant select { flex: 1; font-weight: 400; }
.fenetre-validation .erp-note { background: var(--surface-2); border-radius: 8px; padding: 8px 12px; font-size: 14px; color: var(--attenue); }
.fenetre-validation .erp-note strong { color: var(--encre); }
.fenetre-validation .fen-pied { display: flex; justify-content: flex-end; gap: 10px; align-items: center; padding-top: 6px; flex-wrap: wrap; }
.fenetre-validation .fen-pied .faible { margin-right: auto; }
.fenetre-validation .liste-fin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fenetre-validation .liste-fin li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; }
.fenetre-validation .liste-fin .coche { width: 26px; height: 26px; border-radius: 50%; background: var(--vert); color: #FFFFFF; display: grid; place-items: center; font-weight: 700; }
.fenetre-validation .liste-fin .coche.attente { background: var(--ambre-icone); }
.fenetre-validation .liste-fin .coche.outil { background: var(--bleu); }

/* ---------- États d'une demande (V0.99.32, concepts de Karl du 14/10) : une couleur par état, la même partout ----------
   à traiter (bleu), en cours (indigo), accord du client à finaliser (orange, pastille qui pulse), en attente du client ou
   à relancer (ambre), traitée (vert), ignorée (gris). Pastille + libellé, jamais la couleur seule. */
:root {
  --etat-nouvelle: #3B8BEA; --etat-encours: #4F5BD5; --etat-accord: #F0731A; --etat-attente: #F2A41B; --etat-traitee: #0E9AA7; --etat-rdv: #22A356; --etat-ignoree: #A6ABB8;
}
.nouvelle { --couleur-etat: var(--etat-nouvelle); } .encours { --couleur-etat: var(--etat-encours); } .accord { --couleur-etat: var(--etat-accord); }
.attente { --couleur-etat: var(--etat-attente); } .traitee { --couleur-etat: var(--etat-traitee); } .rdv { --couleur-etat: var(--etat-rdv); } .ignoree { --couleur-etat: var(--etat-ignoree); }
.point-etat { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--couleur-etat, var(--attenue)); flex-shrink: 0; }
.accord .point-etat { background: var(--surface); border: 3px solid var(--couleur-etat); width: 14px; height: 14px; animation: pulsation 1.6s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 115, 26, 0.55); } 60% { box-shadow: 0 0 0 7px rgba(240, 115, 26, 0); } }
@media (prefers-reduced-motion: reduce) { .accord .point-etat { animation: none; } }
.etat-demande { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 3px 12px 3px 9px; white-space: nowrap; background: color-mix(in srgb, var(--couleur-etat, var(--attenue)) 12%, #FFFFFF); color: color-mix(in srgb, var(--couleur-etat, var(--attenue)) 70%, #1D2030); max-width: 100%; }
.etat-demande.nu { background: transparent; padding-left: 0; color: var(--encre); font-weight: 500; }
.etat-demande.vide { opacity: 0.45; }
.legende-couleurs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; }
.legende-couleurs .titre-legende { font-weight: 700; margin-right: 4px; }
.legende-page { margin-top: 18px; padding: 12px 20px; }
.legende-page .faible { margin-left: auto; }

/* ---------- Colonne « À suivre » (V0.99.32) : à gauche de toutes les pages, repliable ---------- */
.a-suivre { background: var(--surface); border-right: 1px solid var(--menu-trait); padding: 18px 18px 24px; position: sticky; top: 66px; max-height: calc(100vh - 66px); overflow-y: auto; min-width: 0; }
.tete-suivi { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tete-suivi h2 { font-size: 22px; flex: 1; }
.tete-suivi .compte-replie { display: none; }
.replier-suivi { border: 1px solid var(--trait); background: var(--surface); color: var(--attenue); border-radius: 999px; width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.replier-suivi:hover { color: var(--encre); border-color: var(--bleu); }
.depuis-suivi { margin: 0 0 8px; }
.kpi-suivi { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi-suivi li { background: var(--surface-2); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; line-height: 1.25; }
.kpi-suivi strong { font-family: var(--titres); font-size: 22px; }
.kpi-suivi span { font-size: 13px; color: var(--attenue); }
.kpi-suivi li.important { background: var(--bleu-clair); } .kpi-suivi li.important strong { color: var(--bleu-fonce); }
.section-suivi { border-top: 1px solid var(--trait-leger); padding: 6px 0; }
.section-suivi > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-weight: 700; font-size: 16px; }
.section-suivi > summary::-webkit-details-marker { display: none; }
.section-suivi > summary::after { content: "›"; font-size: 22px; color: var(--attenue); transform: rotate(90deg); transition: transform .15s; }
.section-suivi:not([open]) > summary::after { transform: rotate(0); }
.section-suivi > summary .etat-demande { padding: 0; background: transparent; }
.compte-suivi { font-variant-numeric: tabular-nums; color: var(--attenue); font-weight: 600; }
.carte-suivi { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--couleur-etat) 7%, #FFFFFF); box-shadow: inset 4px 0 0 var(--couleur-etat); font-size: 15px; }
.ligne-suivi { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ligne-suivi strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-suivi { color: var(--attenue); }
.detail-suivi.plaque-texte { font-family: var(--mono); color: var(--encre); letter-spacing: 0.04em; }
.montant-suivi { font-family: var(--titres); font-size: 18px; }
.carte-suivi .bouton { align-self: flex-start; margin-top: 6px; background: var(--surface); }
.vide-suivi { margin: 4px 0 8px; }
.pied-suivi { margin: 10px 0 14px; padding-top: 10px; border-top: 1px solid var(--trait-leger); }
.a-suivre .legende-couleurs { flex-direction: column; align-items: flex-start; gap: 4px; }
/* Repliée : une bande de 60 px avec le compte et le bouton pour déplier */
.corps.replie .a-suivre { padding: 14px 10px; }
.corps.replie .tete-suivi { flex-direction: column; margin: 0; }
.corps.replie .tete-suivi h2, .corps.replie .contenu-suivi { display: none; }
.corps.replie .tete-suivi .compte-replie { display: inline-grid; }

/* Suivi des devis : la même pastille devant l'état */
.etat-journal:not(.mail)::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; background: var(--couleur-etat, var(--attenue)); }
.etat-journal.non-valide { --couleur-etat: var(--etat-ignoree); }
.etat-journal.valide { --couleur-etat: var(--etat-nouvelle); }
.etat-journal.winpro { --couleur-etat: var(--etat-encours); }
.etat-journal.commande { --couleur-etat: var(--etat-traitee); }
.etat-journal.alerte { --couleur-etat: var(--etat-attente); }

/* Finaliser l'accord du client (V0.99.33) : mail de confirmation proposé dans « C'est fait » */
.fenetre-validation .confirmation-mail textarea { width: 100%; min-height: 200px; font: inherit; font-size: 15px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--champ-trait); border-radius: 8px; resize: vertical; }
.fenetre-validation .etapes { margin: 0; box-shadow: none; padding: 8px 0; }
.actions-suivi { margin-top: 6px; }
.actions-suivi .bouton { margin-top: 0; }
.bandeau .bouton { margin-left: auto; flex-shrink: 0; }

/* Fiche client dans la fenêtre (V0.99.35) : fiche obligatoire, recherche par le nom sous le champ, relance automatique */
.refus { --couleur-etat: var(--etat-ignoree); }
.nouvelle-personne .champ-nom { position: relative; }
.nouvelle-personne .sous-champ { grid-column: 1 / -1; }
.nouvelle-personne .sous-champ .resultats-personnes { margin-top: 4px; max-height: 200px; }
.nouvelle-personne .sous-champ > .faible { margin: 4px 0 0; }
.fenetre-validation .ligne-relance { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; }
.fenetre-validation .ligne-relance input[type=checkbox] { width: 20px; height: 20px; }
.fenetre-validation .ligne-relance input[type=number] { width: 70px; min-height: 40px; border: 1px solid var(--champ-trait); border-radius: 8px; padding: 0 8px; font-size: 15px; text-align: center; }
.fenetre-validation .bloc.relance { padding-top: 10px; }
.fenetre-validation .bloc.relance .faible { margin: 0; }
.fenetre-validation p.ligne-intervenant { margin: 0; }

/* ---------- Dictée (V0.99.39) ---------- */
.champ .entete-champ { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bouton-dicter { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--champ-trait); background: var(--surface); color: var(--encre); font-size: 14px; font-weight: 600; cursor: pointer; }
.bouton-dicter:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.bouton-dicter.ecoute { background: var(--rouge-clair); border-color: var(--rouge-trait); color: var(--rouge); animation: pulsation 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bouton-dicter.ecoute { animation: none; } }

/* ---------- Tablette et téléphone (V0.99.39, Karl 14/10) : même écran, qui se replie ---------- */
@media (max-width: 1000px) {
  .menu { position: static; padding: 8px 12px; gap: 6px; }
  .marque { padding-right: 8px; }
  .marque strong { font-size: 18px; }
  .lien { min-height: 42px; padding: 0 12px; font-size: 15px; gap: 8px; }
  .pied-menu { margin: 0; width: 100%; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--menu-trait); }
  .pied-menu select { max-width: 48vw; }
  main { padding: 14px 12px 28px; }
  h1 { font-size: 26px; }
  .entete { margin-bottom: 12px; gap: 10px; }
  .a-suivre { padding: 12px; }
  .kpi-suivi { grid-template-columns: repeat(4, 1fr); }
  .pied-brouillon { flex-direction: column; align-items: stretch; }
  .actions-brouillon { margin-right: 0; }
  .totaux { grid-template-columns: 1fr auto; }
  .creneaux, .creneaux.nombreux { grid-template-columns: 1fr 1fr; }
  .barre-outils select, .barre-outils input[type=search] { min-width: 0; flex: 1 1 160px; }
  .onglets-etat button { min-height: 42px; padding: 0 12px; font-size: 15px; }
  .defilement-mails { max-height: 50vh; }
  .ligne-mail { grid-template-columns: 86px minmax(0, 1fr); }
  .ligne-mail .colonne-etat { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .entete-liste { display: none; }
  .fenetre-validation { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .fenetre-validation .fen-corps { padding: 16px; }
  .fenetre { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .tutoriel { bottom: 8px; }
}
@media (max-width: 700px) {
  .lien .grandit { display: none; }
  .lien.actif .grandit { display: inline; }
  .lien { padding: 0 10px; }
  .kpi-suivi { grid-template-columns: 1fr 1fr; }
  .creneaux, .creneaux.nombreux { grid-template-columns: 1fr; }
  .ligne-mail { grid-template-columns: 1fr; }
  .ligne-mail .quand { display: flex; gap: 6px; align-items: baseline; }
  .ligne-mail .quand b { display: inline; }
  .fenetre-validation, .fenetre { width: 100vw; max-height: 100vh; border-radius: 0; }
  .fenetre-validation .fen-pied { flex-direction: column; align-items: stretch; }
  .fenetre-validation .fen-pied .faible { margin-right: 0; }
  .infos, .champs-formulaire { grid-template-columns: 1fr; gap: 2px 0; }
  .infos dt, .champs-formulaire dt { margin-top: 6px; }
  .legende-page { padding: 10px 12px; }
  .exemples { display: none; }
}

/* ---------- Facturée (V0.99.40) : le vert du rendez-vous, quadrillé ---------- */
.facturee { --couleur-etat: var(--etat-rdv); }
.ligne-mail.facturee, .etat-demande.facturee:not(.nu), .carte-suivi.facturee { background-image: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--etat-rdv) 18%, transparent) 7px 11px); }
.facturee .point-etat, .etat-journal.facturee::before { background: repeating-linear-gradient(45deg, var(--etat-rdv) 0 2px, #FFFFFF 2px 4px); border: 1px solid var(--etat-rdv); }
.etat-journal.facturee { background-image: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--etat-rdv) 18%, transparent) 7px 11px); }

/* Lignes retirées par le vendeur (V0.99.44) : rappelées sous la prestation */
.lignes-retirees td { background: var(--surface-2); border-top: 0; padding: 6px 10px; }

/* Dimension des pneus à saisir sous la prestation (V0.99.45) */
.saisie-dimension { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; color: var(--encre); }
.saisie-dimension label { font-weight: 600; }
.saisie-dimension input { min-height: 46px; width: 200px; font: inherit; font-size: 17px; padding: 0 12px; border: 1px solid var(--champ-trait); border-radius: 8px; background: var(--surface); text-transform: uppercase; }
.saisie-dimension input::placeholder { text-transform: none; }

/* Offres de vente à l'écran (V0.99.47) : sur la ligne du pneu et en note au vendeur sous le brouillon */
.promo-ligne { display: block; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: var(--vert-clair); color: var(--vert-fonce); font-size: 14px; font-weight: 600; width: fit-content; }
.note-offre { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--vert-clair); border: 1px solid var(--vert-trait); color: var(--vert-fonce); font-size: 15px; }

/* Chiffres de la colonne « À suivre » cliquables (V0.99.48) */
.kpi-suivi li { padding: 0; }
.kpi-suivi button { width: 100%; height: 100%; text-align: left; border: 0; background: transparent; padding: 8px 12px; border-radius: 10px; display: flex; flex-direction: column; line-height: 1.25; cursor: pointer; color: inherit; }
.kpi-suivi button:hover { background: var(--bleu-clair); }
.kpi-suivi button:hover span { color: var(--bleu-fonce); }

/* Suivi des devis : la ligne entière prend la couleur de l'état (V0.99.51), comme les demandes */
tr.ligne-journal td { background: color-mix(in srgb, var(--couleur-etat, var(--surface)) 9%, var(--surface)); }
tr.ligne-journal td:first-child { box-shadow: inset 5px 0 0 var(--couleur-etat, transparent); }
tr.ligne-journal.facturee td { background-image: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--etat-rdv) 18%, transparent) 7px 11px); }
tr.ligne-journal.refus td { background: var(--surface); color: var(--attenue); }