/* Démonstrations animées de l'application (site vitrine, phase 11).
   Dessinées en HTML et CSS, jetons de la charte seulement. Le minutage vit dans
   src/components/demos/Demo.tsx : la démo porte les classes e1 … eN des étapes atteintes, et
   chaque état se décrit ici par une transition. Sans classe, l'étape 0 ; avec toutes, l'image
   finale (rendu serveur, mouvement réduit). `data-des="k"` : visible dès l'étape k ;
   `data-jusqua="k"` : masqué dès l'étape k. Aucune image clé, aucun dégradé. */

/* ---------- Cadre commun ---------- */
.demo { margin: 0; container-type: inline-size; min-width: 0; }
.demo-ecran { position: relative; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; font-size: var(--text-xs); line-height: 1.35; color: var(--color-text); }
.demo-decor { display: contents; }
.demo-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.demo-barre strong { font-size: var(--text-sm); }
.demo-icone { color: var(--color-accent); font-size: var(--text-xl); }
.demo-muted { color: var(--color-text-muted); }
.demo-droite { margin-left: auto; }
.demo-legende { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.demo-legende-interne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-divider); color: var(--color-text-muted); }
.pastille-pole { display: inline-block; width: var(--space-3); height: var(--space-3); border: 1px solid var(--color-neutral-600); border-radius: var(--radius-sm); }
.pastille-pole + .pastille-pole { margin-left: var(--space-1); }
.pile { display: inline-grid; }
.pile > * { grid-area: 1 / 1; }
.pile > .tag { justify-self: start; }
.demo-ecran .tag { font-size: var(--text-tag); white-space: nowrap; }

/* Boutons dessinés : jamais de vrais boutons (décor, hors tabulation). Cyan = action. */
.demo-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); align-self: flex-start; padding: var(--space-1) var(--space-3); min-height: var(--space-6); background: var(--color-action-fill); color: var(--color-on-action); border: 1px solid var(--color-action-fill); border-radius: var(--radius-md); font-weight: 600; transition: background-color .2s, scale .2s; }
.demo-btn-sec { background: var(--color-surface); color: var(--color-link); border-color: var(--color-accent); }

/* Encadré de l'action mise en avant (accent-100, bordure cyan). */
.demo-encadre { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--color-accent-100); border: 1px solid var(--color-accent); border-radius: var(--radius-md); }
.demo-encadre-titre { font-size: var(--text-sm); }
.demo-raison { display: flex; gap: var(--space-1); align-items: flex-start; color: var(--color-text-muted); }
.demo-raison i { color: var(--color-accent-700); font-size: var(--text-base); flex: none; }
.demo-bandeau { display: flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-3) var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.demo-bandeau i { font-size: var(--text-lg); flex: none; }

/* Curseur dessiné : il glisse jusqu'à sa cible quand il apparaît. */
.curseur { position: absolute; right: var(--space-2); bottom: calc(var(--space-2) * -1); z-index: 2; font-size: var(--text-2xl); line-height: 1; color: var(--color-text); pointer-events: none; }
.curseur[data-des] { translate: var(--space-4) var(--space-4); transition: opacity .3s ease, translate .5s ease; }

/* ---------- Étapes ---------- */
[data-des], [data-jusqua] { transition: opacity .35s ease, scale .35s ease, translate .5s ease; }
.demo-ecran [data-des] { opacity: 0; }
.demo-ecran .pop[data-des] { scale: .7; }
.demo-ecran.e1 [data-des="1"], .demo-ecran.e2 [data-des="2"], .demo-ecran.e3 [data-des="3"], .demo-ecran.e4 [data-des="4"],
.demo-ecran.e5 [data-des="5"], .demo-ecran.e6 [data-des="6"], .demo-ecran.e7 [data-des="7"], .demo-ecran.e8 [data-des="8"],
.demo-ecran.e9 [data-des="9"], .demo-ecran.e10 [data-des="10"], .demo-ecran.e11 [data-des="11"], .demo-ecran.e12 [data-des="12"],
.demo-ecran.e13 [data-des="13"], .demo-ecran.e14 [data-des="14"] { opacity: 1; scale: 1; translate: 0 0; }
.demo-ecran.e1 [data-jusqua="1"], .demo-ecran.e2 [data-jusqua="2"], .demo-ecran.e3 [data-jusqua="3"], .demo-ecran.e4 [data-jusqua="4"],
.demo-ecran.e5 [data-jusqua="5"], .demo-ecran.e6 [data-jusqua="6"], .demo-ecran.e7 [data-jusqua="7"], .demo-ecran.e8 [data-jusqua="8"],
.demo-ecran.e9 [data-jusqua="9"], .demo-ecran.e10 [data-jusqua="10"], .demo-ecran.e11 [data-jusqua="11"], .demo-ecran.e12 [data-jusqua="12"],
.demo-ecran.e13 [data-jusqua="13"], .demo-ecran.e14 [data-jusqua="14"] { opacity: 0; }

/* ---------- 1. Un dossier de bout en bout ---------- */
.dossier-corps { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
.frise { position: relative; }
.frise ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
.frise li { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-tag); transition: color .3s; }
.frise-point { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-neutral-400); transition: background-color .3s, border-color .3s; }
.frise-point i { opacity: 0; font-size: var(--text-base); color: var(--color-neutral-800); transition: opacity .3s; }
.frise-piste { position: absolute; left: 10%; right: 10%; top: calc(var(--space-6) / 2 - 1px); height: 2px; background: var(--color-neutral-300); }
.frise-rempli { display: block; height: 100%; width: 0; background: var(--color-accent-400); transition: width .6s ease; }
.demo-dossier.e1 .frise-rempli { width: 25%; }
.demo-dossier.e2 .frise-rempli { width: 50%; }
.demo-dossier.e3 .frise-rempli { width: 75%; }
.demo-dossier.e4 .frise-rempli { width: 100%; }
/* Étape en cours : fond cyan clair, bordure cyan (statut « En cours »). */
.demo-dossier:not(.e1) .frise li:nth-child(1), .demo-dossier.e1:not(.e2) .frise li:nth-child(2), .demo-dossier.e2:not(.e3) .frise li:nth-child(3),
.demo-dossier.e3:not(.e4) .frise li:nth-child(4), .demo-dossier.e4:not(.e5) .frise li:nth-child(5) { color: var(--color-text); font-weight: 600; }
.demo-dossier:not(.e1) .frise li:nth-child(1) .frise-point, .demo-dossier.e1:not(.e2) .frise li:nth-child(2) .frise-point, .demo-dossier.e2:not(.e3) .frise li:nth-child(3) .frise-point,
.demo-dossier.e3:not(.e4) .frise li:nth-child(4) .frise-point, .demo-dossier.e4:not(.e5) .frise li:nth-child(5) .frise-point { background: var(--color-accent-100); border-color: var(--color-accent); }
/* Étape faite : fond et bordure du statut « Terminé », coche. */
.demo-dossier.e1 .frise li:nth-child(1), .demo-dossier.e2 .frise li:nth-child(2), .demo-dossier.e3 .frise li:nth-child(3),
.demo-dossier.e4 .frise li:nth-child(4), .demo-dossier.e5 .frise li:nth-child(5) { color: var(--color-text); }
.demo-dossier.e1 .frise li:nth-child(1) .frise-point, .demo-dossier.e2 .frise li:nth-child(2) .frise-point, .demo-dossier.e3 .frise li:nth-child(3) .frise-point,
.demo-dossier.e4 .frise li:nth-child(4) .frise-point, .demo-dossier.e5 .frise li:nth-child(5) .frise-point { background: var(--color-neutral-200); border-color: var(--color-neutral-400); }
.demo-dossier.e1 .frise li:nth-child(1) i, .demo-dossier.e2 .frise li:nth-child(2) i, .demo-dossier.e3 .frise li:nth-child(3) i,
.demo-dossier.e4 .frise li:nth-child(4) i, .demo-dossier.e5 .frise li:nth-child(5) i { opacity: 1; }
.demo-encadre-fini { background: var(--color-bg); border-color: var(--color-divider); }
.demo-encadre-fini .tag { align-self: flex-start; }
.dossier-historique { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-divider); }
.dossier-historique li { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier-historique li[data-des] { translate: 0 calc(var(--space-2) * -1); }

/* ---------- 2. La carte du Pilotage ---------- */
.carte-corps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.carte-fond { position: relative; min-height: calc(var(--space-8) * 7); border-right: 1px solid var(--color-divider); overflow: hidden; }
.carte-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-sol { fill: var(--color-neutral-100); }
.carte-ilot { fill: var(--color-neutral-200); }
.carte-eau { fill: var(--color-accent-100); }
.carte-route-bord { fill: none; stroke: var(--color-neutral-300); stroke-width: 7px; }
.carte-route { fill: none; stroke: var(--color-surface); stroke-width: 5px; }
.repere { display: inline-grid; place-items: center; min-width: var(--space-6); height: var(--space-6); padding-inline: var(--space-1); border: 2px solid var(--color-neutral-600); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); transition: opacity .35s ease, scale .35s ease, border-color .4s, outline-color .3s; }
.carte-fond .repere { position: absolute; translate: -50% -50%; outline: 2px solid transparent; outline-offset: 2px; }
.repere.rond { border-radius: 999px; }
.repere.carre { border-radius: var(--radius-sm); }
.pole-premiere-visite { background-color: var(--color-pole-premiere-visite); }
.pole-devis { background-color: var(--color-pole-devis); }
.pole-travaux { background-color: var(--color-pole-travaux); }
.repere.statut-en-cours { border-color: var(--color-accent); }
.repere.statut-termine { border-color: var(--color-neutral-400); }
.demo-carte.e7 .repere.r4 { border-color: var(--color-accent-2); }
.demo-carte.e9 .repere.r3 { outline-color: var(--color-text); }
.carte-liste { list-style: none; margin: 0; padding: 0; }
.carte-ligne { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border-bottom: 1px solid var(--color-neutral-300); border-left: 3px solid transparent; background: var(--color-bg); transition: opacity .35s, background-color .4s, border-color .4s; }
.carte-ligne .repere { min-width: var(--space-4); height: var(--space-4); border-width: 1px; font-size: var(--text-tag); }
.carte-ligne-l1 { display: flex; align-items: center; gap: var(--space-2); }
.carte-ligne-l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-muted); }
.carte-ligne-l2 strong { color: var(--color-text); font-weight: 600; }
.demo-carte.e7 .carte-ligne.l4 { border-left-color: var(--color-accent-2); }
.demo-carte.e9 .carte-ligne.l3 { background: var(--color-accent-100); border-left-color: var(--color-accent); }
@container (max-width: 560px) {
  .carte-corps { grid-template-columns: 1fr; }
  .carte-fond { min-height: calc(var(--space-8) * 6); border-right: 0; border-bottom: 1px solid var(--color-divider); }
}

/* ---------- 3. Le calendrier ---------- */
.mini-seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.mini-seg > span { padding: calc(var(--space-1) / 2) var(--space-2); }
.mini-seg > span + span { border-left: 1px solid var(--color-divider); }
.mini-seg .actif { background: var(--color-action-fill); color: var(--color-on-action); }
.cal-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.cal-fleche { position: relative; display: inline-grid; place-items: center; width: var(--space-6); height: var(--space-6); border: 1px solid var(--color-divider); border-radius: var(--radius-md); color: var(--color-accent); font-size: var(--text-base); transition: background-color .2s; }
.cal-periode { min-width: calc(var(--space-8) * 4.6); text-align: center; font-weight: 600; }
.cal-puces { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.mini-puce { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); padding: calc(var(--space-1) / 2) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); white-space: nowrap; transition: background-color .25s, border-color .25s, color .25s; }
.mini-puce .num { font-weight: 600; }
.cal-grille { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); margin: 0 var(--space-3) var(--space-2); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-sm); }
.cal-tetes-pile { grid-column: 2; display: grid; }
.cal-tetes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--color-bg); border-bottom: 1px solid var(--color-neutral-300); }
.cal-tetes > span { padding: var(--space-1); text-align: center; font-size: var(--text-tag); }
.cal-tetes > span + span { border-left: 1px solid var(--color-neutral-300); }
.cal-heures { display: grid; grid-template-rows: repeat(9, var(--space-6)); background: var(--color-bg); border-right: 1px solid var(--color-neutral-400); }
.cal-heures > span { font-size: var(--text-tag); color: var(--color-neutral-700); text-align: right; padding-right: var(--space-1); line-height: 1; }
.cal-jours { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(9, var(--space-6)); }
.cal-case { border-top: 1px solid var(--color-neutral-200); border-left: 1px solid var(--color-neutral-300); }
.cal-case:nth-child(5n + 1) { border-left: 0; }
.cal-case:nth-child(-n + 5) { border-top: 0; }
.cal-semaine { position: absolute; inset: 0; transition: opacity .35s; }
.rdv-place { position: absolute; width: 20%; padding: calc(var(--space-1) / 5) calc(var(--space-1) / 2.5); transition: opacity .3s; }
.rdv { position: relative; display: block; height: 100%; padding: 0 var(--space-1); border: 2px solid var(--color-neutral-600); border-radius: var(--radius-sm); font-size: var(--text-tag); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: box-shadow .2s; }
.rdv.statut-termine { border-color: var(--color-neutral-400); }
.rdv.statut-garde { border-style: dashed; }
.cal-cible { position: absolute; left: 60%; top: calc(100% / 9 * 6); width: 20%; height: calc(100% / 9); background: var(--color-accent-100); }
@container (max-width: 520px) {
  .rdv-nom { display: none; }
  .rdv { padding: 0 calc(var(--space-1) / 2); }
  .cal-grille { grid-template-columns: var(--space-6) minmax(0, 1fr); margin-inline: var(--space-2); }
  .cal-heures > span { padding-right: calc(var(--space-1) / 2); font-size: var(--text-tag); letter-spacing: -0.02em; }
  .cal-periode { min-width: 0; }
}
/* Semaine suivante (étapes 2 et 3), puis retour. */
.demo-cal .sem2 { opacity: 0; }
.demo-cal.e2:not(.e4) .sem1 { opacity: 0; }
.demo-cal.e2:not(.e4) .sem2 { opacity: 1; transition-delay: .25s; }
.demo-cal.e4 .sem1 { transition-delay: .25s; }
.demo-cal.e2:not(.e3) .fleche-suiv, .demo-cal.e4:not(.e5) .fleche-prec { background: var(--color-accent-100); }
/* Puce « Première visite » (étapes 6) : choisie, les autres pôles masqués. */
.demo-cal.e6:not(.e7) .puce-pv { background: var(--color-accent-100); border-color: var(--color-accent); color: var(--color-accent-800); }
.demo-cal.e6:not(.e7) .rdv-place:not(.pole-premiere-visite-filtre) { opacity: 0; }
/* Glisser-déposer (étapes 9 à 11) : saisi, déplacé de deux jours et quatre heures, déposé. */
.demo-cal.e9 .rdv-deplace { z-index: 1; }
.demo-cal.e9:not(.e11) .rdv-deplace .rdv { box-shadow: var(--shadow-md); }
.demo-cal.e10 .rdv-deplace { translate: 200% 400%; transition: translate 1.1s ease-in-out, opacity .3s; }
.rdv-deplace .curseur { right: var(--space-1); bottom: calc(var(--space-3) * -1); }

/* ---------- 4. Confier ---------- */
.confier-corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); background: var(--color-bg); }
.confier-panneau { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.confier-suite { display: flex; flex-direction: column; gap: var(--space-3); }
.confier-titre { display: flex; align-items: center; gap: var(--space-2); }
.confier-titre strong { font-size: var(--text-sm); }
.confier-mail { display: flex; flex-direction: column; padding: var(--space-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); }
.confier-champs { margin: 0; display: grid; gap: calc(var(--space-1) / 2); }
.confier-champs > div { display: grid; grid-template-columns: calc(var(--space-8) * 2.4) minmax(0, 1fr); gap: var(--space-2); }
.confier-champs dt { color: var(--color-text-muted); }
.confier-champs dd { margin: 0; font-weight: 600; }
.confier-qui { display: flex; flex-direction: column; gap: var(--space-1); }
.confier-question { font-weight: 600; }
.candidat { display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); transition: background-color .3s, border-color .3s; }
.candidat > span:last-child { display: flex; flex-direction: column; }
.candidat-dot { width: var(--space-4); height: var(--space-4); margin-top: calc(var(--space-1) / 2); border-radius: 50%; border: 2px solid var(--color-neutral-500); background: var(--color-surface); transition: border-color .3s, border-width .3s; }
.demo-confier.e5 .candidat-karim { background: var(--color-accent-100); border-color: var(--color-accent); }
.demo-confier.e5 .candidat-karim .candidat-dot { border: 5px solid var(--color-accent); }
.confier-encadre .demo-btn { align-self: stretch; }
.demo-confier.e6:not(.e7) .bouton-garder { scale: .97; background: var(--color-accent-800); border-color: var(--color-accent-800); }
.confier-ligne { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-bg); }
.tag-garde { border-style: dashed; }
.confier-etape { display: flex; flex-direction: column; gap: var(--space-1); }
.confier-sms { display: flex; flex-direction: column; gap: var(--space-2); }
.confier-sms-qui { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
.confier-sms-qui i { font-size: var(--text-lg); }
.sms-bulle { display: block; max-width: 92%; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-lg); transform-origin: left top; }
@container (max-width: 640px) {
  .confier-corps { grid-template-columns: 1fr; }
}

/* ---------- 5. Le téléphone de l'intervenant ---------- */
.tel-scene { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-4); background: var(--color-bg); }
.tel { display: flex; flex-direction: column; width: calc(var(--space-8) * 6.5); padding: var(--space-2); background: var(--color-neutral-200); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-lg); }
.tel-haut { align-self: center; width: var(--space-8); height: var(--space-1); margin-bottom: var(--space-2); border-radius: 999px; background: var(--color-neutral-400); }
.tel-ecrans { display: grid; }
.tel-ecran { display: flex; flex-direction: column; gap: var(--space-2); min-height: calc(var(--space-8) * 9.5); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.tel-titre { font-size: var(--text-lg); }
.tel-progression { display: flex; flex-direction: column; gap: var(--space-1); }
.tel-segments { display: flex; gap: var(--space-1); }
.tel-segments > span { flex: 1; height: var(--space-1); border-radius: var(--radius-sm); background: var(--color-neutral-300); }
.tel-segments > .fait { background: var(--color-accent); }
.tel-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.tel-photo { display: block; aspect-ratio: 1; border-radius: var(--radius-md); }
.tel-photo svg { display: block; width: 100%; height: 100%; }
.photo-mur { fill: var(--color-neutral-300); }
.photo-sol { fill: var(--color-neutral-500); }
.photo-fenetre { fill: var(--color-neutral-100); }
.photo-tache { fill: var(--color-neutral-600); }
.tel-photos .tel-photo:nth-child(2) { transition-delay: .15s; }
.tel-photos .tel-photo:nth-child(3) { transition-delay: .3s; }
.tel-photos[data-des] { transition: opacity .2s; }
.tel-photos .tel-photo { scale: .7; opacity: 0; transition: scale .35s ease, opacity .35s ease; }
.demo-tel.e1 .tel-ecran:nth-child(1) .tel-photo, .demo-tel.e4 .tel-ecran:nth-child(2) .tel-photo { scale: 1; opacity: 1; }
.tel-signature { position: relative; display: block; height: calc(var(--space-8) * 2.5); border: 1px dashed var(--color-neutral-500); border-radius: var(--radius-md); background: var(--color-bg); }
.tel-signature svg { position: absolute; inset: var(--space-2); width: calc(100% - var(--space-4)); height: calc(100% - var(--space-6)); }
.tel-signature path { fill: none; stroke: var(--color-text); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease-in-out; }
.demo-tel.e7 .tel-signature path { stroke-dashoffset: 0; }
.tel-signataire { position: absolute; left: var(--space-2); bottom: var(--space-1); color: var(--color-text-muted); font-size: var(--text-tag); }
.tel-btn { margin-top: auto; display: grid; place-items: center; min-height: var(--touch-action); padding: 0 var(--space-2); background: var(--color-action-fill); color: var(--color-on-action); border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm); text-align: center; transition: background-color .2s, scale .2s; }
.demo-tel.e2:not(.e3) .tel-ecran:nth-child(1) .tel-btn, .demo-tel.e5:not(.e6) .tel-ecran:nth-child(2) .tel-btn, .demo-tel.e8:not(.e9) .tel-ecran:nth-child(3) .tel-btn { background: var(--color-accent-800); scale: .97; }
.tel-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.tel-ligne .tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.tel-toast { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-weight: 600; }
.tel-toast i { font-size: var(--text-lg); flex: none; }
.tel-suivi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: calc(var(--space-8) * 7); font-size: var(--text-sm); }
/* Rond vide (::before) sous la coche, qui apparaît à son étape (fond et bordure du statut « Terminé »). */
.tel-suivi li { position: relative; display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-2); align-items: center; }
.tel-suivi li::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: var(--space-6); height: var(--space-6); border-radius: 50%; border: 1px solid var(--color-neutral-400); background: var(--color-surface); }
.tel-suivi-coche { position: relative; display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--color-neutral-200); border: 1px solid var(--color-neutral-400); color: var(--color-neutral-800); }

/* ---------- 6. Pilotage : tableau de bord du jour et chiffres de la semaine ---------- */
/* Bleu clair (accent-100 à 400) = neutre ; magenta = retard, hors délai ; ambre = attente. */
.pilot-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); background: var(--color-bg); }
.pilot-panneau { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.pilot-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.pilot-tete strong { font-size: var(--text-sm); }
.pilot-cartes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.pilot-carte, .pilot-pole { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-accent-100); }
.pilot-retard { background: var(--color-accent-2-100); border-left: 3px solid var(--color-accent-2); }
.pilot-attente { background: var(--color-attention-100); border-left: 3px solid var(--color-attention); }
.pilot-carte-titre { font-weight: 600; }
.pilot-chiffre { font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; }
.pilot-ligne { display: flex; flex-direction: column; padding-top: var(--space-1); border-top: 1px solid var(--color-divider); }
.pilot-nouvelle[data-des] { translate: 0 calc(var(--space-2) * -1); }
.pilot-sous-titre { margin-top: var(--space-1); font-size: var(--text-sm); }
.pilot-poles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); align-items: start; }
.pilot-poles .pilot-pole:nth-child(2) { transition-delay: .15s; }
.pilot-poles .pilot-pole:nth-child(3) { transition-delay: .3s; }
.pilot-etape { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-1); padding: calc(var(--space-1) / 2) 0; border-bottom: 1px solid var(--color-neutral-300); }
.pilot-etape > span:first-child { display: flex; flex-direction: column; }
.pilot-ambre { color: var(--color-attention-700); font-weight: 600; }
.pilot-dont { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.pilot-kpis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.pilot-kpi { display: flex; flex-direction: column; padding: var(--space-2); }
.pilot-kpi:nth-child(odd) { border-right: 1px solid var(--color-divider); }
.pilot-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
.pilot-kpi-valeur { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; }
.pilot-ecart { font-size: var(--text-xs); font-weight: 400; color: var(--color-text); }
.pilot-hors { color: var(--color-accent-2); }
.pilot-graphique { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }
.pilot-barres { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); align-items: end; }
.pilot-colonne { display: flex; flex-direction: column; align-items: center; gap: calc(var(--space-1) / 2); white-space: nowrap; }
.pilot-pile { display: flex; flex-direction: column-reverse; width: 60%; height: calc(var(--space-8) * 2); border-bottom: 1px solid var(--color-neutral-300); }
.pilot-seg { display: block; background: var(--color-accent-400); scale: 1 0; transform-origin: bottom; transition: scale .7s ease; }
.pilot-seg-hors { background: var(--color-accent-2); transition-delay: .5s; }
.demo-pilotage.e5 .pilot-seg { scale: 1 1; }
.pilot-echantillon { display: inline-block; width: var(--space-2); height: var(--space-2); background: var(--color-accent-400); }
.pilot-echantillon-hors { background: var(--color-accent-2); }
.pilot-jauge { display: grid; grid-template-columns: calc(var(--space-8) * 2.4) minmax(0, 1fr) calc(var(--space-8) * 4.4); align-items: center; gap: var(--space-2); }
.pilot-piste { position: relative; height: var(--space-3); background: var(--color-accent-100); }
.pilot-remplie { position: absolute; inset: 0 auto 0 0; background: var(--color-accent-400); scale: 0 1; transform-origin: left; transition: scale .9s ease; }
.demo-pilotage.e6 .pilot-remplie { scale: 1 1; }
.pilot-repere { position: absolute; left: 50%; top: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); border-left: 2px solid var(--color-text); }
@container (max-width: 820px) {
  .pilot-corps { grid-template-columns: 1fr; }
}
@container (max-width: 480px) {
  .pilot-cartes, .pilot-poles { grid-template-columns: 1fr; }
  .pilot-corps { padding: var(--space-2); }
  .pilot-jauge { grid-template-columns: 1fr auto; }
  .pilot-colonne > :last-child { min-height: 2lh; white-space: normal; text-align: center; font-size: var(--text-tag); }
  .pilot-jauge .pilot-piste { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Mouvement réduit : l'image finale, sans transition ---------- */
@media (prefers-reduced-motion: reduce) {
  .demo-ecran, .demo-ecran * { transition: none !important; }
}