/* ==========================================================================
   Autonero - systeme visuel des pages atelier.
   Lectures numeriques sobres, grille de prestations, bloc immatriculation,
   panneaux directionnels. Une couleur n'a qu'un sens ; un etat n'est jamais
   porte par la couleur seule.
   ========================================================================== */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("/polices/barlow-condensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("/polices/barlow-condensed-700.woff2") format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-weight:400;font-display:swap;
  src:url("/polices/overpass-400.woff2") format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-weight:700;font-display:swap;
  src:url("/polices/overpass-700.woff2") format("woff2")}
@font-face{font-family:"DSEG7 Classic";font-style:normal;font-weight:400;font-display:swap;
  src:url("/polices/dseg7-classic.woff2") format("woff2")}

.cm{
  --cm-noir:#0F1113;      /* noir : blocs et grille de prestations, jamais toute la page */
  --cm-noir-2:#1A1D20;    /* fond des cases de voyant */
  --cm-blanc:#F1EFE8;     /* blanc cadran : graduations, panneaux, sections de lecture */
  --cm-vert:#3ADB6C;      /* temoin : fait, confirme, disponible */
  --cm-ambre:#FFB000;     /* temoin : selectionne, a prevoir, prix en cours */
  --cm-rouge:#FF2E1F;     /* temoin : urgence documentee ou erreur, jamais un bouton */
  --cm-bleu:#0B4AA2;      /* autoroute : acces, panneaux, livraison */
  --cm-gris:#9AA0A6;      /* prestation au repos et libelles secondaires : 6,4:1 sur le noir */
  --cm-gris-2:#8F959B;    /* second niveau, 5,6:1 */
  --cm-titre:"Barlow Condensed","Archivo","Helvetica Neue",Arial,sans-serif;
  --cm-corps:"Overpass","Archivo","Helvetica Neue",Arial,sans-serif;
  --cm-seg:"DSEG7 Classic","Plex Mono","SF Mono",Menlo,monospace;
  --cm-r:10px;            /* le seul arrondi : celui des panneaux et des cases */
  font-family:var(--cm-corps);
}
.cm h1,.cm h2,.cm h3,.cm .cm-t{font-family:var(--cm-titre);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;line-height:1}
.cm h1{font-size:clamp(34px,5vw,58px);letter-spacing:.01em}
.cm h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.cm .cm-lbl{font-family:var(--cm-titre);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cm-gris)}
.cm .cm-seg{font-family:var(--cm-seg);font-size:28px;color:var(--cm-ambre);font-variant-numeric:tabular-nums}
.cm h3{font-size:17px;letter-spacing:.04em}
.cm .kicker{font-family:var(--cm-titre);font-weight:600;font-size:13px;letter-spacing:.2em}
.cm .num{font-family:var(--cm-titre);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cm .t td b.num{font-size:22px}
.cm .trust span,.cm .atp-somm a{font-family:var(--cm-titre);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;border-radius:0}
.cm .btn{font-family:var(--cm-titre);font-weight:700;font-size:14px;letter-spacing:.12em}
.cm .faq summary{font-family:var(--cm-titre);font-weight:600;font-size:17px;letter-spacing:.02em}

/* --------------------------------------------------------------- combine */
.cm-combine{position:relative;background:var(--cm-noir);color:var(--cm-blanc);border-radius:14px;
  padding:22px 24px;margin-top:22px;display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"obd lect";gap:20px 30px;
  align-items:stretch;box-shadow:inset 0 0 0 1px #2a2e33,inset 0 0 0 4px #14171a}
/* les quatre vis de lunette, volontairement pas tout a fait alignees */
.cm-combine::before,.cm-combine::after,.cm-combine .cm-vis::before,.cm-combine .cm-vis::after{
  content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#8d9298,#3b4045 65%);
  box-shadow:inset 0 0 0 1px #202428}
.cm-combine::before{top:9px;left:10px;transform:rotate(12deg)}
.cm-combine::after{top:10px;right:9px}
.cm-combine .cm-vis::before{bottom:9px;left:11px}
.cm-combine .cm-vis::after{bottom:10px;right:10px;transform:rotate(-8deg)}
.cm-combine .cm-vis::before,.cm-combine .cm-vis::after{
  background:radial-gradient(circle at 40% 35%,#8d9298,#3b4045 65%) ,linear-gradient(90deg,transparent 45%,#202428 45%,#202428 55%,transparent 55%)}
.cm-obd{grid-area:obd}.cm-lectures{grid-area:lect}

/* -------------------------------------------------------------- lectures */
/* Une lecture = un libelle, une valeur a segments et une barre graduee qui se
   remplit en ambre. Sobre, comme l'afficheur d'un combine numerique. */
@property --cm-pct{syntax:"<number>";inherits:false;initial-value:0}
.cm-lectures{display:flex;flex-direction:column;justify-content:center;gap:18px;
  padding:4px 0 4px 28px;border-left:1px solid #2a2e33;min-width:0}
.cm-lect{--cm-pct:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl val" "barre barre";
  align-items:end;column-gap:14px;row-gap:9px}
.cm-lect .cm-lbl{grid-area:lbl;color:#9aa0a6;padding-bottom:5px;line-height:1.3}
.cm-lect .cm-seg{grid-area:val;font-size:30px;line-height:1;text-align:right;white-space:nowrap}
.cm-seg small{font:600 12px var(--cm-titre);color:var(--cm-blanc);letter-spacing:.12em;margin-left:8px;vertical-align:baseline}
.cm-seg small:first-child{margin:0 8px 0 0}
.cm-barre{grid-area:barre;display:block;height:12px;border-radius:2px;
  background:linear-gradient(90deg,var(--cm-ambre) 0 calc(var(--cm-pct)*1%),#2a2e33 calc(var(--cm-pct)*1%) 100%);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 3px),transparent calc(5% - 3px) 5%);
  mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 3px),transparent calc(5% - 3px) 5%);
  transition:--cm-pct .6s cubic-bezier(.2,.8,.3,1)}
.cm-lect.est-vide .cm-seg{color:#3a3f45}
.cm-lect.est-vide .cm-seg small{color:#5c6167}

/* ----------------------------------------------------- bloc immatriculation */
.cm-obd{background:#000;border-radius:var(--cm-r);padding:18px 18px 16px;
  box-shadow:inset 0 0 0 1px #2a2e33,inset 0 0 22px #000}
.cm-obd-lbl{display:block;font:600 11px var(--cm-titre);letter-spacing:.22em;text-transform:uppercase;
  color:var(--cm-ambre);margin-bottom:10px}
.cm-plaque{display:flex;align-items:stretch;background:#fff;border:3px solid #0a0a0a;border-radius:8px;
  overflow:hidden;height:64px}
.cm-plaque-f,.cm-plaque-dep{flex:0 0 40px;display:grid;place-items:center;background:var(--cm-bleu);
  color:#fff;font:700 16px var(--cm-corps);font-style:normal;letter-spacing:.04em}
.cm-plaque-f::before{content:"";display:block;width:16px;height:16px;border-radius:50%;
  border:1px dotted #ffd84a;margin-bottom:2px}
.cm-plaque input{flex:1 1 0;width:0;min-width:0;border:0;background:#fff;color:#111;text-align:center;
  font:700 clamp(24px,4vw,34px) var(--cm-corps);letter-spacing:.12em;text-transform:uppercase;outline:0}
.cm-plaque input::placeholder{color:#b8b8b2;letter-spacing:.08em;font-weight:400;font-size:.6em}
.cm-plaque:focus-within{box-shadow:0 0 0 3px var(--cm-ambre)}
.cm-obd .cm-contact{width:100%;margin-top:12px;background:var(--cm-blanc);color:#111;border-color:var(--cm-blanc);
  font-family:var(--cm-titre);font-weight:700;font-size:15px;letter-spacing:.14em}
.cm-obd .cm-contact:hover{background:#fff}
.cm-obd-etat{margin:10px 0 0;font:600 12px var(--cm-titre);letter-spacing:.14em;text-transform:uppercase;
  color:#9aa0a6;min-height:1.4em}
.cm-obd-etat.est-ok{color:var(--cm-vert)}
.cm-obd-etat.est-ambre{color:var(--cm-ambre)}

/* ------------------------------------------- lecture chiffree sur fond noir */
.cm-rouleau{display:inline-flex;gap:3px;font-family:var(--cm-seg);font-size:28px;color:var(--cm-blanc);
  background:#000;padding:6px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px #2a2e33;letter-spacing:.06em}
.cm-rouleau[data-cm-vide]{color:#3a3f45}

/* --------------------------------------------------------------- voyants */
.cm-voyants{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px;
  background:var(--cm-noir);padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1px #2a2e33}
.cm-voyant{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:118px;padding:14px 8px 12px;border-radius:var(--cm-r);background:var(--cm-noir-2);
  color:var(--cm-gris);text-decoration:none;text-align:center;border:1px solid #262a2e;
  transition:color .15s,background .15s,box-shadow .15s}
.cm-voyant svg{width:34px;height:34px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cm-voyant b{font:700 13px var(--cm-titre);letter-spacing:.12em;text-transform:uppercase;color:inherit;line-height:1.1}
.cm-voyant small{font:600 11px var(--cm-titre);letter-spacing:.08em;color:var(--cm-gris-2)}
.cm-voyant .cm-voyant-prix{font:700 13px var(--cm-corps);font-style:normal;color:#C8CCD0;margin-top:2px}
.cm-voyant:hover,.cm-voyant:focus-visible{color:#ffd166;background:#22251f;outline:0}
.cm-voyant:focus-visible{box-shadow:0 0 0 2px var(--cm-ambre)}
.cm-voyant[aria-pressed="true"],.cm-voyant.est-allume{color:var(--cm-ambre);background:#2a2208;
  box-shadow:0 0 0 1px var(--cm-ambre),0 0 18px rgba(255,176,0,.35)}
.cm-voyant[aria-pressed="true"] .cm-voyant-prix,.cm-voyant.est-allume .cm-voyant-prix{color:var(--cm-ambre)}
.cm-voyant.est-confirme{color:var(--cm-vert);background:#0f2a18;box-shadow:0 0 0 1px var(--cm-vert)}
.cm-voyant.est-off{color:#868C92;background:#15181b;cursor:not-allowed}
.cm-voyant.est-off::after{content:"SUR DEVIS";position:absolute;top:8px;right:8px;font:700 9px var(--cm-titre);
  letter-spacing:.14em;color:var(--cm-gris-2)}
.cm-voyant .cm-pos{position:absolute;top:8px;left:10px;font:700 10px var(--cm-titre);letter-spacing:.14em;color:#8b9097}
.cm-voyant-plus{border-style:dashed}
.cm-voyant-plus span{font:600 30px var(--cm-titre);line-height:1}

/* ---------------------------------------------------------------- etapes */
.cm-etapes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:26px 0 0;padding:0;
  background:var(--cm-noir);border-radius:var(--cm-r);box-shadow:inset 0 0 0 1px #2a2e33}
.cm-etapes li{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#9aa0a6;
  border-right:1px solid #2a2e33;background-image:repeating-linear-gradient(90deg,#2a2e33 0 1px,transparent 1px 12px);
  background-size:100% 6px;background-repeat:no-repeat;background-position:0 100%}
.cm-etapes li:last-child{border-right:0}
.cm-etapes i{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font:700 13px var(--cm-titre);background:#1a1d20;color:var(--cm-gris-2);box-shadow:0 0 0 1px #3a3f45}
.cm-etapes span{font:700 13px var(--cm-titre);letter-spacing:.1em;text-transform:uppercase;line-height:1.15}
.cm-etapes li.est-courant{color:var(--cm-ambre)}
.cm-etapes li.est-courant i{background:#2a2208;color:var(--cm-ambre);box-shadow:0 0 0 1px var(--cm-ambre),0 0 12px rgba(255,176,0,.35)}
.cm-etapes li.est-fait{color:var(--cm-vert)}
.cm-etapes li.est-fait i{background:#0f2a18;color:var(--cm-vert);box-shadow:0 0 0 1px var(--cm-vert)}
.cm-etapes li[role="button"]{cursor:pointer}
.cm-etapes li[role="button"]:focus-visible{outline:2px solid var(--cm-ambre);outline-offset:-2px}
.cm-etapes-haut{margin:0 0 22px}
.cm-hero h1{font-size:clamp(30px,3.4vw,46px)}
.cm-hero .lede{margin-top:12px}

/* barre de synthese : apparait des qu'un voyant est allume, colle en bas de l'ecran */
.cm-sticky{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:12px;padding:10px 12px 10px 20px;background:var(--cm-noir);color:var(--cm-blanc);
  border-radius:var(--cm-r);box-shadow:0 0 0 1px #2a2e33,0 10px 24px rgba(0,0,0,.35)}
.cm-sticky>div{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;min-width:0}
.cm-sticky b{font:700 14px var(--cm-titre);letter-spacing:.1em;text-transform:uppercase;color:#c8ccd0}
.cm-sticky .cm-seg{font-size:28px;white-space:nowrap}
.cm-sticky .btn{background:var(--cm-blanc);color:#111;border-color:var(--cm-blanc);
  font-family:var(--cm-titre);font-weight:700;letter-spacing:.14em;flex:0 0 auto}
.cm-sticky .btn:hover{background:#fff}

/* --------------------------------------------------------------- panneaux */
.cm-panneau{display:inline-flex;align-items:center;gap:16px;background:#fff;color:#111;
  border:6px solid #111;border-radius:var(--cm-r);padding:14px 20px;font-family:var(--cm-corps)}
.cm-panneau b{font:700 22px var(--cm-corps);letter-spacing:.02em;text-transform:uppercase}
.cm-panneau span{font:400 15px var(--cm-corps);color:#333}
.cm-panneau .cm-fleche{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;
  border-left:22px solid #111}
.cm-panneau-bleu{background:var(--cm-bleu);color:#fff;border-color:#fff;box-shadow:0 0 0 2px var(--cm-bleu)}
.cm-panneau-bleu span{color:#e6edf8}
.cm-panneau-bleu .cm-fleche{border-left-color:#fff}
.cm-panneau-grand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 26px}
.cm-panneau-grand b{font-size:clamp(24px,3.4vw,40px)}

/* ------------------------------------------------------------ horloge de bord */
.cm-horloge{background:var(--cm-noir);border-radius:14px;padding:16px;box-shadow:inset 0 0 0 1px #2a2e33}
.cm-plaque input:focus-visible,.cm-obd .cm-contact:focus-visible,.cm-sticky .btn:focus-visible,.cm-jour:focus-visible,.cm-heure:focus-visible{outline:2px solid var(--cm-blanc);outline-offset:2px}
.cm-jours{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.cm-jour{flex:0 0 auto;min-width:78px;padding:10px 8px;border-radius:8px;background:#000;color:#9aa0a6;
  border:1px solid #2a2e33;text-align:center;cursor:pointer;font:700 13px var(--cm-titre);letter-spacing:.12em}
.cm-jour small{display:block;font:400 11px var(--cm-corps);letter-spacing:0;text-transform:none;color:var(--cm-gris-2);margin-top:3px}
.cm-jour:hover{color:#ffd166}
.cm-jour[aria-pressed="true"]{color:var(--cm-ambre);box-shadow:0 0 0 1px var(--cm-ambre)}
.cm-jour:disabled{color:#3a3f45;cursor:not-allowed;text-decoration:line-through}
.cm-heures{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cm-heure{padding:8px 12px;border-radius:8px;background:#000;border:1px solid #2a2e33;color:#d9dbd4;
  font-family:var(--cm-seg);font-size:28px;cursor:pointer}
.cm-heure:hover{color:#ffd166}
.cm-heure[aria-pressed="true"]{color:var(--cm-vert);box-shadow:0 0 0 1px var(--cm-vert)}
.cm-heure:disabled{color:#3a3f45;cursor:not-allowed}

/* ------------------------------------------------------------- start et compte */
.cm-start{display:inline-grid;place-items:center;width:150px;height:150px;border-radius:50%;
  background:#000;color:#fff;border:0;cursor:pointer;font-family:var(--cm-titre);text-transform:uppercase;
  box-shadow:0 0 0 6px #14171a,0 0 0 9px var(--cm-vert),0 8px 22px rgba(0,0,0,.35);
  transition:transform .08s ease,box-shadow .08s ease}
.cm-start b{display:block;font-size:26px;letter-spacing:.2em;margin-bottom:4px}
.cm-start span{font-size:12px;letter-spacing:.14em;color:#c8ccd0}
.cm-start:active{transform:scale(.97);box-shadow:0 0 0 6px #14171a,0 0 0 9px var(--cm-vert),0 3px 8px rgba(0,0,0,.35)}
.cm-start:focus-visible{outline:3px solid var(--cm-ambre);outline-offset:6px}
.cm-start:disabled{opacity:.45;cursor:not-allowed}
.cm-compte{font-family:var(--cm-seg);font-size:28px;color:var(--cm-ambre);letter-spacing:.06em}
.cm-compte.est-fini{color:var(--cm-rouge)}

/* ------------------------------------------------- pages prestation (compact) */
.cm-prest{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start}
.cm-combine-mini{margin-top:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"obd obd" "voy lect";gap:16px 22px}
.cm-combine-mini .cm-voyant{grid-area:voy;min-height:150px;pointer-events:none}
.cm-combine-mini .cm-lectures{grid-area:lect;padding-left:22px}
@media(max-width:900px){.cm-prest{grid-template-columns:minmax(0,1fr)}
  .cm-combine-mini{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"obd obd" "voy lect"}}
@media(max-width:560px){.cm-combine-mini{grid-template-columns:minmax(0,1fr);grid-template-areas:"obd" "voy" "lect"}
  .cm-combine-mini .cm-lectures{padding:16px 0 0;border-left:0;border-top:1px solid #2a2e33}}
.cm-obd-seul{max-width:520px;margin:0 auto}

/* ----------------------------------------------------------- lecture (blanc) */
.cm-lecture{background:var(--cm-blanc);border-radius:14px;padding:22px 24px;margin-top:22px}
.cm-lecture p{max-width:70ch}
.cm-kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #d6d4cc;font-size:15px}
.cm-kv b{font-family:var(--cm-titre);font-weight:700;letter-spacing:.04em}

/* ----------------------------------------------------------------- mouvements */

/* ------------------------------------------------------------------ mobile */
@media(max-width:900px){
  .cm-combine:not(.cm-combine-mini){grid-template-columns:minmax(0,1fr);grid-template-areas:"obd" "lect";padding:20px 16px;gap:18px}
  .cm-combine:not(.cm-combine-mini) .cm-lectures{padding:16px 0 0;border-left:0;border-top:1px solid #2a2e33}
  .cm-voyants{grid-template-columns:repeat(3,1fr)}
  .cm-etapes{grid-template-columns:1fr 1fr}
  .cm-etapes li{border-right:0;border-bottom:1px solid #2a2e33}
}
@media(max-width:560px){
  .cm-voyants{grid-template-columns:repeat(2,1fr);gap:6px;padding:10px}
  .cm-voyant{min-height:104px}
  .cm-etapes{grid-template-columns:1fr 1fr}
  .cm-etapes li{padding:12px 12px;gap:10px}
  .cm-etapes span{font-size:12px}
  .cm-plaque{height:58px}
  .cm-start{width:130px;height:130px}
}
@media(prefers-reduced-motion:reduce){
  .cm-barre{transition:none}
  .cm-obd-etat::after{animation:none}
  .cm-voyant[aria-pressed="true"],.cm-voyant.est-allume{box-shadow:0 0 0 1px var(--cm-ambre)}
  .cm-sticky{box-shadow:0 0 0 1px #2a2e33}
  .cm-etapes li.est-courant i{box-shadow:0 0 0 1px var(--cm-ambre)}
}

/* ===== tunnel ===== */
/* Prise de rendez-vous a l'atelier : /atelier/rendez-vous/, servie par
   atelier.php. Tout est porte par .cm-tunnel, pose sur la section : rien ici
   ne peut deborder sur le hub, les pages prestation, le devis detaille ou le
   retour de paiement, qui partagent les memes composants. */

.cm-tunnel [hidden]{display:none!important}
/* Colonne de tunnel : une prise de rendez-vous se lit comme un formulaire de
   commande, en une colonne tenue, pas etalee sur toute la largeur d'un ecran
   de bureau. Le bandeau d'etapes suit la meme laisse, sinon il flotte seul. */
.cm-tunnel .wrap,.cm-tunnel>.wrap{max-width:980px}
.cm-tunnel h2{margin:34px 0 10px}
/* le titre d'ecran recoit le focus au changement d'etape, pour les lecteurs
   d'ecran : c'est une annonce, pas une cible cliquable */
.cm-tunnel .cm-ecran>h2:focus{outline:0}
.cm-tunnel .cm-hero .lede{max-width:66ch}
.cm-tunnel .cm-note{color:var(--ink-2);font-size:15px;line-height:1.55;max-width:70ch;margin:0}
.cm-tunnel .cm-note a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* un ecran a la fois quand le script mene le parcours ; sans lui, les quatre
   ecrans se suivent et le formulaire reste envoyable d'un seul tenant */
.cm-form.est-js .cm-ecran{display:none}
.cm-form.est-js .cm-ecran.est-courant{display:block}

/* --------------------------------------------------------- bloc immatriculation */
.cm-tunnel .cm-obd-aide{margin:10px 0 0;font-size:13px;color:#9aa0a6;line-height:1.5}
.cm-tunnel .cm-obd-aide button{background:0;border:0;padding:0;font:inherit;color:var(--cm-ambre);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cm-tunnel .cm-obd-aide button:focus-visible{outline:2px solid var(--cm-ambre);outline-offset:2px}
.cm-tunnel .cm-obd[aria-busy="true"] .cm-plaque input,
.cm-tunnel .cm-obd[aria-busy="true"] .cm-contact{opacity:.6}
/* vehicules deja connus du client : rappel d'une immatriculation en un geste */
.cm-tunnel .cm-connus{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.cm-tunnel .cm-connus button{background:#000;color:#c8ccd0;border:1px solid #2a2e33;border-radius:6px;
  padding:7px 10px;cursor:pointer;font:700 12px var(--cm-titre);letter-spacing:.1em;text-transform:uppercase}
.cm-tunnel .cm-connus button:hover{color:#ffd166}
.cm-tunnel .cm-connus button:focus-visible{outline:2px solid var(--cm-ambre);outline-offset:2px}
/* vehicule reconnu : la fiche revient sous la plaque, avec sa sortie de secours */
.cm-tunnel .cm-veh{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:12px 14px;
  background:#0f2a18;border-radius:var(--cm-r);box-shadow:inset 0 0 0 1px var(--cm-vert)}
.cm-tunnel .cm-veh-ok{color:var(--cm-vert);font-size:18px;line-height:1.2}
.cm-tunnel .cm-veh-txt{display:block;min-width:0}
.cm-tunnel .cm-veh-txt b{display:block;font:700 15px var(--cm-titre);letter-spacing:.06em;
  text-transform:uppercase;color:var(--cm-blanc)}
.cm-tunnel .cm-veh-txt span{display:block;font-size:13px;color:#bfe8cb;margin-top:2px}
.cm-tunnel .cm-veh-txt button{margin-top:6px;background:0;border:0;padding:0;font:inherit;font-size:13px;
  color:#bfe8cb;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cm-tunnel .cm-veh-txt button:focus-visible{outline:2px solid var(--cm-vert);outline-offset:2px}

/* --------------------------------------------------- champs sur blanc cadran */
.cm-tunnel .cm-lecture .ct-f{margin:0 0 14px}
.cm-tunnel .cm-lecture .ct-f:last-child{margin-bottom:0}
.cm-tunnel .cm-lecture .ct-f>label,.cm-tunnel .cm-lecture .ct-lab{display:block;
  font:600 12px var(--cm-titre);letter-spacing:.18em;text-transform:uppercase;color:var(--cm-gris);
  margin-bottom:7px}
.cm-tunnel .cm-lecture .ct-f input,.cm-tunnel .cm-lecture .ct-f select{width:100%;border-radius:6px}
.cm-tunnel .cm-lecture .ct-f input:focus,.cm-tunnel .cm-lecture .ct-f select:focus{
  border-color:#111;box-shadow:0 0 0 3px var(--cm-ambre);outline:0}
.cm-tunnel .cm-lecture .cm-choisi{font:700 17px var(--cm-titre);letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 14px}

/* cartes a cocher : energie, puis classe de motorisation en dernier recours */
.cm-tunnel .cm-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cm-tunnel .cm-opt{position:relative;display:block;cursor:pointer}
.cm-tunnel .cm-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cm-tunnel .cm-opt span{display:block;padding:12px 14px;border:1px solid #9a9a92;border-radius:6px;
  background:#fff;line-height:1.35}
.cm-tunnel .cm-opt b{display:block;font:700 14px var(--cm-titre);letter-spacing:.06em;text-transform:uppercase}
.cm-tunnel .cm-opt em{display:block;font-style:normal;font-size:12.5px;color:var(--mute);margin-top:3px}
.cm-tunnel .cm-opt input:checked+span{border-color:#111;box-shadow:inset 0 0 0 1px #111}
.cm-tunnel .cm-opt input:focus-visible+span{border-color:#111;box-shadow:0 0 0 3px var(--cm-ambre)}

/* ------------------------------------------------------------- prestations */
/* La case porte l'etat pour le serveur, la tuile le montre. Les couleurs
   viennent du systeme : rien a surcharger ici, sinon deux verites. */
.cm-tunnel .cm-voyant{cursor:pointer}
.cm-tunnel .cm-case{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cm-tunnel .cm-voyant:has(.cm-case:checked){color:var(--cm-ambre);background:#2a2208;
  box-shadow:0 0 0 1px var(--cm-ambre),0 0 18px rgba(255,176,0,.35)}
.cm-tunnel .cm-voyant:has(.cm-case:checked) .cm-voyant-prix,
.cm-tunnel .cm-voyant[aria-pressed="true"] .cm-voyant-prix{color:var(--cm-ambre)}
.cm-tunnel .cm-voyant:has(.cm-case:checked) small,
.cm-tunnel .cm-voyant[aria-pressed="true"] small{color:#e8c46a}
.cm-tunnel .cm-voyant:has(.cm-case:focus-visible){outline:2px solid var(--cm-ambre);outline-offset:2px}
.cm-tunnel .cm-voyant.est-off{cursor:default}
.cm-tunnel .cm-voyant.est-off small,.cm-tunnel .cm-voyant.est-off .cm-voyant-prix{color:var(--cm-gris-2)}
/* prestation non tarifee pour cette classe : la seule issue est le devis */
.cm-tunnel .cm-voyant-devis{display:none;margin-top:4px;font:700 11px var(--cm-titre);letter-spacing:.12em;
  text-transform:uppercase;color:#c8ccd0;text-decoration:underline;text-underline-offset:3px;
  position:relative;z-index:1}
.cm-tunnel .cm-voyant.est-off .cm-voyant-devis{display:block}
/* sans objet : une prestation de moteur thermique sur un electrique ne se
   chiffre pas, elle ne se fait pas. Le badge le dit, aucun devis a demander. */
.cm-tunnel .cm-voyant.est-sans-objet::after{content:"SANS OBJET"}
.cm-tunnel .cm-voyant.est-sans-objet .cm-voyant-devis{display:none}
.cm-tunnel .cm-voyant-devis:hover,.cm-tunnel .cm-voyant-devis:focus-visible{color:#fff}

/* barre de synthese : le compte, le total, la suite */
.cm-tunnel .cm-sticky .cm-seg{color:var(--cm-ambre)}
.cm-tunnel .cm-sticky [data-cm-count]{white-space:nowrap}

/* ----------------------------------------------------------------- creneau */
.cm-tunnel .cm-sem{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:10px;margin-bottom:12px}
.cm-tunnel .cm-sem b{font:700 13px var(--cm-titre);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cm-blanc);text-align:center;min-width:0}
.cm-tunnel .cm-sem button{background:#000;border:1px solid #2a2e33;border-radius:6px;color:#c8ccd0;
  padding:7px 12px;cursor:pointer;font:700 12px var(--cm-titre);letter-spacing:.12em;text-transform:uppercase}
.cm-tunnel .cm-sem button:hover:not(:disabled){color:#ffd166}
.cm-tunnel .cm-sem button:disabled{color:#3a3f45;cursor:not-allowed}
.cm-tunnel .cm-sem button:focus-visible{outline:2px solid var(--cm-ambre);outline-offset:2px}
.cm-tunnel .cm-jours{gap:6px}
.cm-tunnel .cm-jour{flex:1 1 0;min-width:0;display:block;line-height:1.2}
.cm-tunnel .cm-jour i{display:block;font-style:normal;font:600 11px var(--cm-corps);letter-spacing:.04em;
  text-transform:none;color:#9aa0a6}
.cm-tunnel .cm-jour b{display:block;font:700 20px var(--cm-titre);letter-spacing:.02em;margin:2px 0 1px}
.cm-tunnel .cm-jour[aria-pressed="true"] i,.cm-tunnel .cm-jour[aria-pressed="true"] small{color:var(--cm-ambre)}
.cm-tunnel .cm-jour:disabled i,.cm-tunnel .cm-jour:disabled small{color:#3a3f45}
.cm-tunnel .cm-jour:disabled{text-decoration:none}
.cm-tunnel .cm-heures:empty{display:none}
.cm-tunnel .cm-heure[aria-busy="true"]{opacity:.55}
.cm-tunnel .cm-heures-lbl{display:block;margin:16px 0 0;font:600 12px var(--cm-titre);letter-spacing:.18em;
  text-transform:uppercase;color:#9aa0a6}

/* ------------------------------------------------------- validation et prix */
.cm-tunnel .cm-panneau-grand{width:100%;align-items:stretch;gap:0}
.cm-tunnel .cm-panneau-grand h2{font:700 clamp(20px,2.4vw,26px)/1.05 var(--cm-corps);letter-spacing:.02em;
  text-transform:uppercase;margin:0 0 12px}
/* Le panneau directionnel met ses b en 22px capitales : dans un recapitulatif,
   c'est la valeur qui doit se lire, pas crier. */
.cm-tunnel .cm-panneau-grand .cm-kv b{font:700 16px var(--cm-titre);letter-spacing:.04em;
  text-transform:none;text-align:right}
.cm-tunnel .cm-panneau-grand .cm-kv span{flex:1 1 auto}
.cm-tunnel .cm-panneau-grand .cm-kv{border-bottom-color:#d6d4cc}
.cm-tunnel .cm-panneau-grand .cm-kv:last-child{border-bottom:0}
.cm-tunnel .cm-kv-tot{border-top:2px solid #111;margin-top:6px;padding-top:12px}
.cm-tunnel .cm-panneau-grand .cm-kv-tot b{font-size:22px}
.cm-tunnel .cm-kv-sec{color:var(--mute);font-size:13px}
.cm-tunnel .cm-renonce{display:flex;gap:12px;align-items:flex-start;margin-top:18px;
  background:var(--cm-blanc);border-radius:var(--cm-r);padding:16px 18px;line-height:1.55;font-size:14px}
.cm-tunnel .cm-renonce input{margin-top:3px;flex:0 0 auto;width:18px;height:18px;accent-color:#111}
.cm-tunnel .cm-renonce b{display:block;margin-bottom:4px}

/* Bouton de validation : l'anneau vert du systeme, mais un libelle qui dit
   l'action reelle et son montant. Un disque ne peut pas la porter. */
.cm-tunnel .cm-start{width:auto;height:auto;min-height:64px;border-radius:999px;padding:16px 34px;
  place-items:center;text-align:center;margin-top:22px;max-width:100%}
.cm-tunnel .cm-start b{font-size:clamp(15px,2vw,19px);letter-spacing:.1em;margin-bottom:2px;
  display:block;overflow-wrap:anywhere}
.cm-tunnel .cm-start span{font-size:11px;letter-spacing:.12em}
.cm-tunnel .cm-compte-bande{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
  padding:12px 20px;background:var(--cm-noir);color:var(--cm-blanc);border-radius:var(--cm-r);
  box-shadow:inset 0 0 0 1px #2a2e33}
.cm-tunnel .cm-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}
/* une action refusee se voit : la duree depasse la matinee, le devis prend le relais */
.cm-tunnel .btn:disabled{opacity:.4;cursor:not-allowed}
.cm-tunnel .btn:disabled:hover{background:var(--ink)}
.cm-tunnel .cm-sticky .btn:disabled:hover{background:var(--cm-blanc)}
.cm-tunnel .cm-retour{background:0;border:0;padding:8px 0;font:600 13px var(--cm-corps);color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cm-tunnel .cm-retour:focus-visible{outline:2px solid var(--cm-ambre);outline-offset:2px}

/* ------------------------------------------------------------------ alertes */
/* Le rouge et l'ambre ne portent jamais seuls le sens : un mot les double. */
.cm-tunnel .cm-alerte{border:1px solid var(--cm-rouge);border-left-width:8px;background:#fff;color:#111;
  padding:14px 16px;margin:20px 0 0;font-size:15px;line-height:1.55;border-radius:6px}
.cm-tunnel .cm-alerte b{display:block;font:700 13px var(--cm-titre);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:4px}
.cm-tunnel .cm-alerte a:not(.btn){color:#111;text-decoration:underline;text-underline-offset:3px}
.cm-tunnel .cm-alerte-ambre{border-color:var(--cm-ambre)}
.cm-tunnel .cm-alerte-aide{display:block;margin-top:8px;font-size:13.5px;color:var(--mute)}
.cm-tunnel .cm-alerte .cm-actions{margin-top:12px}

/* --------------------------------------------------- ecran de paiement (lg) */
.cm-tunnel .lg h2::before{content:none}
.cm-tunnel .lg{margin-top:22px}
.cm-tunnel #valider{margin-top:18px}

/* ------------------------------------------------------------------ mobile */
@media(max-width:760px){
  .cm-tunnel .cm-jours{overflow-x:auto}
  .cm-tunnel .cm-jour{flex:0 0 auto;min-width:72px}
  .cm-tunnel .cm-heure{font-size:22px;padding:8px 10px}
  .cm-tunnel .cm-start{width:100%;padding:16px 18px}
  .cm-tunnel .cm-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .cm-tunnel .cm-voyant:has(.cm-case:checked){box-shadow:0 0 0 1px var(--cm-ambre)}
}

/* ------------------------------------------------------------------- avoir */
/* Un avoir se saisit rarement : le champ reste replie sous une ligne discrete
   et ne s'ouvre que pour qui en a un. Le bloc est une section de lecture comme
   les autres, aucun composant de plus, aucun cadran. */
.cm-tunnel .cm-avoir{padding-top:14px;padding-bottom:14px}
.cm-tunnel .cm-avoir[open]{padding-bottom:22px}
.cm-tunnel .cm-avoir>summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;
  font:600 12px var(--cm-titre);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.cm-tunnel .cm-avoir>summary::-webkit-details-marker{display:none}
.cm-tunnel .cm-avoir>summary::before{content:"+";flex:0 0 24px;height:24px;display:grid;
  place-items:center;border:1px solid #9a9a92;border-radius:50%;color:#111;
  font:700 16px/1 var(--cm-titre)}
.cm-tunnel .cm-avoir[open]>summary::before{content:"-"}
.cm-tunnel .cm-avoir>summary:hover{color:#111}
.cm-tunnel .cm-avoir>summary:focus-visible{outline:2px solid var(--cm-ambre);outline-offset:3px}
.cm-tunnel .cm-avoir[open]>summary{margin-bottom:16px}
.cm-tunnel .cm-avoir-corps .ct-f input{text-transform:uppercase;letter-spacing:.14em;
  font-family:var(--cm-titre);font-weight:700}
.cm-tunnel .cm-avoir-go{margin:0}
.cm-tunnel .cm-avoir .cm-alerte{margin-top:14px}
.cm-tunnel .cm-avoir .cm-note{margin-top:14px;font-size:13.5px}
/* vert : accepte, confirme. Le mot le dit aussi, la couleur ne porte rien seule. */
.cm-tunnel .cm-alerte-vert{border-color:var(--cm-vert)}
@media(max-width:760px){
  .cm-tunnel .cm-avoir-go .btn{width:100%}
}