/* =========================================================================
   cm-v2.css — CM Transport, « le calculateur international » (02.11.2026).
   Se charge en DERNIER. Peau propre à CM : rien du gabarit Swiss Pro
   (disposition, fonds, gris chauds, typographie, forme du récapitulatif).
   Le moteur de rangement (plan-chargement, chargement.js, bande3d.js) ne
   change pas : cette feuille ne fait que l'habiller.

   Principes
   1. La scène est le produit : un plateau ardoise, lumineux, à droite (en
      haut sur téléphone) où le trajet se trace et les véhicules se chargent.
   2. Un seul accent, le grenat : le tracé, le bouton d'action, le focus.
   3. Le verre n'existe que sur l'ardoise, toujours la même recette.
   4. Des angles droits et un chanfrein en haut à droite. Jamais d'arrondi.
   ========================================================================= */

:root {
  --v2-ardoise: #202D36;
  --v2-nuit: #172129;          /* ardoise plus profonde, même teinte (238°) */
  --v2-glace: #ECF4F7;
  --v2-acier: #5C7896;
  --v2-acier-clair: #A4B6C6;
  --v2-grenat: #800C1F;
  --v2-grenat-appui: #6B0A1A;
  --v2-blanc: #FFFFFF;
  --v2-encre: #202D36;
  --v2-encre-2: #4D5960;       /* 6,47:1 sur bleu glace */
  --v2-trait: rgba(92, 120, 150, .38);
  --v2-trait-doux: rgba(92, 120, 150, .2);

  /* le verre : une seule recette */
  --v2-verre: rgba(236, 244, 247, .065);
  --v2-verre-fort: rgba(236, 244, 247, .1);
  --v2-verre-bord: rgba(164, 182, 198, .24);
  --v2-verre-flou: blur(18px) saturate(140%);

  --v2-ch-s: 8px;   /* boutons */
  --v2-ch-m: 12px;  /* panneaux */
  --v2-ch-l: 22px;  /* plateau */

  --v2-sortie: cubic-bezier(.16, 1, .3, 1);
  --v2-ressort: cubic-bezier(.34, 1.42, .64, 1);
  --v2-trace: cubic-bezier(.12, .82, .22, 1);   /* départ rapide, arrivée douce */

  --cm-rail-h: 56px;
  --cm-entete-h: 56px;
  --cm-plateau-l: clamp(440px, 43vw, 660px);

  /* la marque v1 relue avec les valeurs CM */
  --fond: var(--v2-glace);
  --texte: var(--v2-encre);
  --texte-secondaire: var(--v2-encre-2);
  --texte-faible: var(--v2-encre-2);
  --marque: var(--v2-grenat);
  --focus: var(--v2-acier);
  --police-texte: Barlow, "Helvetica Neue", Arial, sans-serif;
  --police-titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --police-chiffre: "Barlow Condensed", Barlow, Arial, sans-serif;
}

@media (min-width: 768px) { :root { --cm-rail-h: 72px; --cm-entete-h: 64px; } }

html { background: var(--v2-glace); scroll-padding-top: calc(var(--cm-rail-h) + 16px); }
body {
  background: var(--v2-glace);
  color: var(--v2-encre);
  font-family: var(--police-texte);
  -webkit-font-smoothing: antialiased;
}
.chiffre, .compteur-valeur { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 1. L'en-tête */
.spm-entete.bande {
  display: block;
  position: relative;
  z-index: 6;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--v2-ardoise);
  border: 0;
}
.spm-entete .entete-corps {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;
  height: var(--cm-entete-h);
  margin: 0;
  padding: 0 16px;
}
@media (min-width: 768px) { .spm-entete .entete-corps { padding: 0 40px; } }
.spm-entete .spm-entete__logo { margin-right: auto; display: flex; }
.spm-entete .spm-entete__logo img { width: auto; height: 34px; }
@media (min-width: 768px) { .spm-entete .spm-entete__logo img { height: 40px; } }
.spm-entete .entete-appel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--v2-glace);
  border: 1px solid var(--v2-verre-bord);
}
.spm-entete .entete-appel svg { stroke: currentColor; }
.spm-entete .spm-btn--secondaire {
  height: 44px; padding: 0 18px;
  background: transparent; color: var(--v2-glace);
  border: 1px solid var(--v2-verre-bord);
}
.spm-entete .spm-btn--secondaire:hover,
.spm-entete .entete-appel:hover { background: var(--v2-verre-fort); border-color: var(--v2-acier-clair); }

/* ------------------------------------------------------- 2. La démonstration */
.bandeau-demo {
  background: var(--v2-nuit);
  border: 0;
  color: var(--v2-acier-clair);
  padding: 2px 16px;
  min-height: 0;
}
@media (min-width: 768px) { .bandeau-demo { padding: 6px 40px; } }
.bandeau-demo .bandeau-demo-texte { color: var(--v2-acier-clair); font-size: 13px; }
.bandeau-demo .spm-btn--fantome { color: var(--v2-glace); min-height: 32px; height: 32px; padding: 0 4px; text-decoration: underline; text-underline-offset: .2em; }

/* ------------------------------------------------------- 3. La ligne De → À
   Le parcours en cinq arrêts devient le trajet lui-même : la ville de départ
   à gauche, la ville d'arrivée à droite, un tracé épais qui avance en grenat,
   des arrêts carrés. */
.bandeau-trajet.bandeau-calc {
  position: sticky;
  top: 0;
  z-index: 7;
  height: var(--cm-rail-h);
  padding: 0 16px;
  background: var(--v2-ardoise);
  border: 0;
  box-shadow: 0 1px 0 rgba(164, 182, 198, .14);
}
@media (min-width: 768px) { .bandeau-trajet.bandeau-calc { padding: 0 40px; } }
.bandeau-calc .rail { height: 100%; }
.bandeau-calc .rail-piste {
  left: 0; right: 0;
  top: 22px;
  height: 4px;
  background: rgba(164, 182, 198, .22);
}
@media (max-width: 767px) { .bandeau-calc .rail-piste { top: 30px; } }
.bandeau-calc .rail-parcouru {
  position: relative;
  height: 4px;
  background: var(--v2-grenat);
  box-shadow: 0 0 0 1px rgba(236, 244, 247, .55);
  transition: width 900ms var(--v2-trace);
}
/* la tête du tracé : un petit camion de face, carré, qui suit l'avancement */
.bandeau-calc .rail-parcouru::after {
  content: "";
  position: absolute;
  right: -7px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background: var(--v2-glace);
  box-shadow: inset 0 0 0 3px var(--v2-grenat);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
}
.bandeau-calc .rail-depart {
  left: 0; top: 24px;
  width: 10px; height: 10px; margin: -5px 0 0 0;
  border-radius: 0;
  background: var(--v2-glace);
}
@media (max-width: 767px) { .bandeau-calc .rail-depart { top: 32px; } }
.bandeau-calc .rail-arret {
  top: 24px;
  left: calc(var(--t, 0) * 100%);
  width: 40px; height: 40px;
}
@media (max-width: 767px) { .bandeau-calc .rail-arret { top: 32px; } }
.bandeau-calc .rail-arret::before {
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 0;
  border: 2px solid rgba(164, 182, 198, .7);
  background: var(--v2-ardoise);
  transition: background-color 300ms var(--v2-sortie), border-color 300ms var(--v2-sortie), transform 300ms var(--v2-ressort);
}
.bandeau-calc .rail-arret.est-franchi::before { background: var(--v2-glace); border-color: var(--v2-glace); }
.bandeau-calc .rail-arret:not(:disabled):hover::before { transform: scale(1.3); }
.bandeau-calc .rail-arret:focus-visible { outline: 2px solid var(--v2-glace); outline-offset: -8px; }
.bandeau-calc .rail-arrivee {
  right: 0; top: 24px;
  width: 16px; height: 16px; margin: -8px -2px 0 0;
}
@media (max-width: 767px) { .bandeau-calc .rail-arrivee { top: 32px; } }
/* l'arrivée : un repère carré au coin coupé (le chanfrein CM), plus grand que
   les arrêts. Au repos, le même trait acier que les arrêts à venir ; quand le
   parcours est complet, le trait glace se dessine autour et le fond passe au
   grenat. */
.bandeau-calc .rail-arrivee path { stroke-width: 3; stroke-linejoin: miter; }
.bandeau-calc .rail-arrivee .cm-arrivee-fond {
  fill: var(--v2-ardoise);
  stroke: rgba(164, 182, 198, .7);
  transition: fill 300ms var(--v2-sortie);
}
.bandeau-calc .rail-arrivee .cm-arrivee-trait {
  fill: none;
  stroke: var(--v2-glace);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 600ms var(--v2-trace);
}
.bandeau-calc .rail-arrivee.est-complet .cm-arrivee-fond { fill: var(--v2-grenat); }
.bandeau-calc .rail-arrivee.est-complet .cm-arrivee-trait { stroke-dashoffset: 0; }
.bandeau-calc .rail-libelles {
  top: 38px;
  height: 18px;
  font-family: var(--police-texte);
  font-size: 12.5px;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--v2-acier-clair);
}
@media (max-width: 767px) { .bandeau-calc .rail-libelles { top: 4px; } }
.bandeau-calc .rail-lieu {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 16px;
  color: var(--v2-glace);
  letter-spacing: .01em;
}
@media (min-width: 768px) {
  .bandeau-calc .rail-libelles { top: 36px; }
  .bandeau-calc .rail-lieu { top: -36px; font-size: 15px; }
  .bandeau-calc .rail-nom { left: calc(var(--t, 0) * 100%); }
  .bandeau-calc .rail-nom.est-courant { color: var(--v2-glace); font-weight: 600; }
  .bandeau-calc .rail-lieu { max-width: 40%; }
}

/* ------------------------------------------------------- 4. La disposition
   À partir de 1080 px : le formulaire à gauche sur le bleu glace, le plateau
   à droite, collé, de toute la hauteur de l'écran. */
main.calc.bande { display: block; max-width: none; margin: 0; padding: 0; background: var(--v2-glace); }
/* la bande 3D a quitté l'arrêt 2 : la marge de D (pousse) n'a plus rien à compenser */
.calc #arret-2.d-actif { --d-pousse: 0px; --d-bande-marge: 0px; }
.calc #arret-2.d-actif .recherche-bloc > .recherche { margin-top: 24px; }
.calc .calc-corps { display: flex; flex-direction: column; max-width: none; margin: 0; padding: 0; }
.calc .calc-form { order: 1; min-width: 0; padding: 24px 16px 140px; }
.calc .plateau { display: contents; }
.calc .plateau-scene { order: 0; }
.calc .plateau .recap { order: 2; }

@media (min-width: 768px) {
  .calc .calc-form { padding: 40px 40px 64px; }
}

@media (min-width: 1080px) {
  .calc .calc-corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cm-plateau-l);
    column-gap: 0;
    align-items: start;
  }
  .calc .calc-form {
    grid-column: 1;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 48px clamp(32px, 4vw, 64px) 96px;
  }
  .calc .plateau {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--cm-rail-h);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--cm-rail-h));
    height: calc(100dvh - var(--cm-rail-h));
    padding: 14px 14px 14px 0;
    background: var(--v2-glace);
  }
}

/* ------------------------------------------------------- 5. Le plateau */
.calc .plateau-scene {
  position: relative;
  overflow: hidden;
  height: 260px;
  background:
    radial-gradient(70% 55% at 50% 86%, rgba(164, 182, 198, .26), rgba(164, 182, 198, 0) 70%),
    radial-gradient(120% 80% at 50% 0%, #26343f 0%, rgba(38, 52, 63, 0) 60%),
    linear-gradient(180deg, var(--v2-ardoise) 0%, var(--v2-nuit) 100%);
  color: var(--v2-glace);
  isolation: isolate;
}
@media (min-width: 600px) and (max-width: 1079px) { .calc .plateau-scene { height: 340px; } }
@media (min-width: 1080px) {
  .calc .plateau-scene {
    flex: 0 0 auto;
    height: clamp(340px, calc((100vh - var(--cm-rail-h)) * .48), 560px);
    clip-path: polygon(0 0, calc(100% - var(--v2-ch-l)) 0, 100% var(--v2-ch-l), 100% 100%, 0 100%);
  }
}
/* sous 1080 px, à l'arrêt 2 : la scène reste en haut, sous la ligne de trajet */
@media (max-width: 1079px) {
  html[data-arret-courant="2"] .calc .plateau-scene { position: sticky; top: var(--cm-rail-h); z-index: 5; }
}
@media (max-width: 599px) {
  html[data-arret-courant="2"] .calc .plateau-scene { height: 318px; }
  .plateau-hud { padding: 8px 12px 8px; }
  .hud-chiffre { font-size: 30px; }
}

/* la carte stylisée : discrète, effacée vers le bas, là où roulent les camions */
.plateau-carte {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, .25) 70%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, .25) 70%, transparent 86%);
}
.plateau-carte image { opacity: .9; }
.trajet-gaine, .trajet-ligne {
  fill: none;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.trajet-gaine { stroke: rgba(236, 244, 247, .85); stroke-width: 7; }
.trajet-ligne { stroke: var(--v2-grenat); stroke-width: 3.5; }
.trajet.est-trace .trajet-gaine,
.trajet.est-trace .trajet-ligne { stroke-dashoffset: 0; transition: stroke-dashoffset 1700ms var(--v2-trace); }
.trajet-depart { fill: var(--v2-glace); }
.trajet-arrivee { fill: var(--v2-ardoise); stroke: var(--v2-glace); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: 0; }
.trajet.est-trace .trajet-arrivee { opacity: 1; transition: opacity 300ms 1300ms linear; }
.trajet.sans-arrivee .trajet-gaine, .trajet.sans-arrivee .trajet-ligne, .trajet.sans-arrivee .trajet-arrivee { display: none; }

.plateau-ville {
  position: absolute;
  z-index: 2;
  margin: 0;
  max-width: 46%;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--v2-glace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: translate(-50%, 12px);
  text-shadow: 0 1px 2px rgba(23, 33, 41, .9), 0 0 8px rgba(23, 33, 41, .8);
}
.plateau-ville:empty { display: none; }
.plateau-ville small { display: block; font-family: var(--police-texte); font-weight: 400; font-size: 11px; color: var(--v2-acier-clair); letter-spacing: 0; }
.plateau-ville--a { opacity: 0; }
.trajet-pret .plateau-ville--a { opacity: 1; transition: opacity 400ms 1200ms linear; }

/* le chiffre du volume : un verre posé dans le coin, les chiffres défilent */
.plateau-hud {
  position: absolute;
  z-index: 3;
  top: 12px; left: 12px;
  margin: 0;
  padding: 10px 14px 10px;
  background: var(--v2-verre);
  border: 1px solid var(--v2-verre-bord);
  -webkit-backdrop-filter: var(--v2-verre-flou);
  backdrop-filter: var(--v2-verre-flou);
  clip-path: polygon(0 0, calc(100% - var(--v2-ch-s)) 0, 100% var(--v2-ch-s), 100% 100%, 0 100%);
  max-width: min(260px, 52%);
}
@media (min-width: 1080px) { .plateau-hud { top: 18px; left: 18px; padding: 12px 18px 12px; } }
.plateau-hud p { margin: 0; max-width: none; }
.hud-libelle { font-size: 11.5px; line-height: 1.2; color: var(--v2-acier-clair); }
.hud-volume {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--police-chiffre);
  font-weight: 600;
  line-height: 1;
  color: var(--v2-glace);
}
.hud-chiffre { display: inline-flex; font-size: 34px; letter-spacing: .005em; font-variant-numeric: tabular-nums; }
@media (min-width: 1080px) { .hud-chiffre { font-size: 46px; } }
.hud-unite { font-size: 18px; color: var(--v2-acier-clair); }
@media (min-width: 1080px) { .hud-unite { font-size: 22px; } }
.hud-objets { margin-top: 4px !important; font-size: 12px; line-height: 1.3; color: var(--v2-acier-clair); }

/* odomètre : chaque chiffre est une colonne 0-9 qui glisse */
.odo { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: top; }
.odo-col { display: flex; flex-direction: column; transition: transform 620ms var(--v2-ressort); }
.odo-col > span { display: block; height: 1em; }
.odo-sep { display: inline-block; }

/* la route sous les véhicules */
.plateau-route {
  position: absolute;
  z-index: 0;
  left: -10%; right: -10%;
  bottom: 4%;
  height: 34%;
  transform: perspective(520px) rotateX(58deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(236, 244, 247, .34) 0 34px, transparent 34px 72px) center 50% / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(236, 244, 247, .16), rgba(236, 244, 247, .16)) center 6% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(236, 244, 247, .16), rgba(236, 244, 247, .16)) center 94% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(10, 16, 21, .0), rgba(10, 16, 21, .38) 30%, rgba(10, 16, 21, .38) 70%, rgba(10, 16, 21, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

/* le squelette, tant que la 3D n'est pas là */
.plateau-squelette {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 16%;
  display: flex; justify-content: center; align-items: flex-end; gap: 6%;
  height: 42%;
  transition: opacity 400ms linear;
}
.plateau-squelette span {
  display: block;
  width: 34%; height: 78%;
  background: linear-gradient(100deg, rgba(164, 182, 198, .10) 30%, rgba(164, 182, 198, .24) 50%, rgba(164, 182, 198, .10) 70%) 0 0 / 300% 100%;
  clip-path: polygon(0 26%, 24% 26%, 24% 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  animation: v2-lueur 1.6s linear infinite;
}
.plateau-squelette span + span { width: 26%; height: 64%; }
@keyframes v2-lueur { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.plateau-scene.est-3d .plateau-squelette,
.plateau-scene:has(.bande3d-canvas) .plateau-squelette,
.plateau-scene:not(.attente-3d):has(.b3-repli) .plateau-squelette { opacity: 0; pointer-events: none; }
.plateau-scene.attente-3d .b3-repli,
.plateau-scene.attente-3d .b3-etq,
.plateau-scene.attente-3d .b3-phrase { visibility: hidden; }
.plateau-scene.est-3d .plateau-squelette span { animation: none; }

/* la bande 3D du moteur, posée sur la route (bande3d.js ne change pas) */
.calc .plateau-scene .bande3d {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 22px;
  top: auto !important;
  height: calc(66% - 22px);
  margin: 0 !important;
  width: auto !important;
  background: transparent;
  border: 0;
  clip-path: none;
  overflow: visible;
}
@media (max-width: 599px) { .calc .plateau-scene .bande3d { height: calc(74% - 16px); bottom: 16px; } }
.calc .plateau-scene .bande3d.est-repliee { height: 64%; }
.calc .plateau-scene .bande3d.est-repliee .bande3d-scene { visibility: visible; height: auto; bottom: 0; }
.calc .plateau-scene .bande3d.est-repliee .bande3d-ligne { display: none; }
.calc .plateau-scene .bande3d.sans-webgl { height: auto; min-height: 0; top: auto !important; bottom: 18px; display: block; }
.calc .plateau-scene .b3-etq,
.calc .plateau-scene .b3-etq .b3-nom { color: var(--v2-acier-clair); text-shadow: none; font-size: 12.5px; }
.calc .plateau-scene .b3-etq .b3-m3 { color: var(--v2-glace); }
.calc .plateau-scene .b3-phrase {
  padding: 0 0 0 14px;
  border: 0;
  color: var(--v2-glace);
  text-shadow: 0 1px 3px rgba(23, 33, 41, .9);
  font-size: 12.5px;
}
.calc .plateau-scene .b3-phrase::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 7px; height: 7px;
  background: var(--v2-grenat);
  box-shadow: 0 0 0 1px rgba(236, 244, 247, .6);
}
.calc .plateau-scene .b3-phrase .b3-detail { color: var(--v2-acier-clair); }
.calc .plateau-scene .b3-repli { padding: 0 18px; }
.calc .plateau-scene .b3-repli-flotte { color: var(--v2-glace); font-weight: 600; }
.calc .plateau-scene .b3-repli-phrase { color: var(--v2-acier-clair); }
@media (max-width: 599px) {
  .calc .plateau-scene .b3-phrase { top: auto !important; bottom: -15px; left: 14px !important; right: 14px; font-size: 12px; line-height: 14px; }
  .calc .plateau-scene .b3-phrase .b3-detail { display: none; }
  .calc .plateau-scene .b3-etq { font-size: 11px; }
}

/* ------------------------------------------------------- 6. Le carnet de route
   Le récapitulatif quitte la colonne claire : un verre sur l'ardoise, en
   tuiles (De → À, puis les chiffres), plus de liste à puces verticale. */
.calc .plateau .recap {
  position: relative;
  margin: 0;
  padding: 18px 18px 20px;
  max-height: none;
  background:
    linear-gradient(var(--v2-verre), var(--v2-verre)),
    linear-gradient(180deg, var(--v2-nuit), var(--v2-ardoise));
  border: 0;
  color: var(--v2-glace);
  border-radius: 0;
  clip-path: none;
}
@media (min-width: 1080px) {
  .calc .plateau .recap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 10px;
    padding: 20px 22px 22px;
    display: block;
    top: auto;
    background: var(--v2-ardoise);
    box-shadow: inset 0 0 0 1px var(--v2-verre-bord);
    scrollbar-width: thin;
    scrollbar-color: rgba(164, 182, 198, .35) transparent;
  }
}
.calc .plateau .recap::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 100% 0%, rgba(164, 182, 198, .10), transparent 70%);
  pointer-events: none;
}
.calc .recap .recap-titre {
  margin: 0 0 14px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  color: var(--v2-glace);
  letter-spacing: .01em;
}
.calc .recap .recap-corps { overflow: visible; }
.calc .recap .etat-vide { padding: 10px 0 4px; border: 0; background: none; text-align: left; }
.calc .recap .etat-vide-icone { display: none; }
.calc .recap .etat-vide-titre { color: var(--v2-glace); font-size: 15px; font-weight: 600; }
.calc .recap .etat-vide-texte { color: var(--v2-acier-clair); font-size: 13.5px; }

/* De → À : deux colonnes reliées par une flèche */
.calc .recap .recap-lignes { margin: 0; padding: 0; border: 0; }
.calc .recap .recap-trajet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(164, 182, 198, .18);
}
.calc .recap .recap-trajet .recap-ligne { grid-row: 1; display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.calc .recap .recap-trajet #recap-depart { grid-column: 1; }
.calc .recap .recap-trajet #recap-arrivee { grid-column: 3; }
.calc .recap .recap-trajet::after {
  content: "";
  grid-column: 2; grid-row: 1;
  align-self: start;
  justify-self: center;
  width: 16px; height: 10px;
  margin-top: 24px;
  background: var(--v2-acier-clair);
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
}
.calc .recap .recap-point, .calc .recap .recap-anneau { display: none; }
.calc .recap .recap-ligne .recap-libelle,
.calc .recap .recap-ligne .recap-libelle .spm-btn--fantome {
  display: block;
  min-height: 0;
  padding: 0;
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--v2-acier-clair);
  text-decoration: none;
  text-align: left;
  letter-spacing: 0;
}
.calc .recap .recap-ligne .recap-libelle .spm-btn--fantome:hover { color: var(--v2-glace); text-decoration: underline; text-underline-offset: .2em; }
.calc .recap .recap-ligne .recap-valeur {
  display: block;
  margin-top: 3px;
  text-align: left;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--v2-glace);
  overflow-wrap: anywhere;
}
.calc .recap .recap-valeur-note {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 12px;
  color: var(--v2-acier-clair);
}

/* les chiffres : des tuiles */
.calc .recap .recap-lignes:not(.recap-trajet) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  margin-top: 6px;
  background: none;
  border: 0;
}
.calc .recap .recap-lignes:not(.recap-trajet) .recap-ligne {
  display: block;
  margin: 0;
  padding: 10px 0 11px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(164, 182, 198, .16);
  min-width: 0;
}
.calc .recap .recap-lignes:not(.recap-trajet) .recap-ligne[hidden] { display: none; }
.calc .recap #recap-volume .recap-valeur,
.calc .recap #recap-logement .recap-valeur {
  font-family: var(--police-chiffre);
  font-size: 20px;
  line-height: 1.15;
}
.calc .recap #recap-camion { grid-column: 1 / -1; }

.calc .recap .recap-total {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(164, 182, 198, .18);
  background: none;
}
.calc .recap .recap-total-libelle { font-size: 12px; color: var(--v2-acier-clair); margin: 0; }
.calc .recap .recap-devis {
  margin: 2px 0 6px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  color: var(--v2-glace);
}
.calc .recap .recap-rappel,
.calc .recap .recap-notes,
.calc .recap .recap-notes li { font-size: 12.5px; line-height: 1.45; color: var(--v2-acier-clair); }
.calc .recap .recap-notes { padding-left: 0; list-style: none; margin: 6px 0 0; }
.calc .recap .recap-notes li + li { margin-top: 4px; }
.calc .recap .recap-portee summary { color: var(--v2-glace); font-size: 13px; cursor: pointer; margin-top: 8px; }
.calc .recap .recap-portee summary::marker { color: var(--v2-acier-clair); }
.calc .recap .spm-btn:focus-visible,
.calc .recap summary:focus-visible { outline: 2px solid var(--v2-glace); outline-offset: 2px; box-shadow: none; }

/* ------------------------------------------------------- 7. Douane incluse */
.cm-douane[hidden] { display: none !important; }
.cm-douane {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 16px 15px;
  color: var(--v2-glace);
  background: rgba(236, 244, 247, .05);
  box-shadow: inset 0 0 0 1px rgba(164, 182, 198, .3);
  clip-path: polygon(0 0, calc(100% - var(--v2-ch-m)) 0, 100% var(--v2-ch-m), 100% 100%, 0 100%);
}
.cm-douane-tete { display: flex; align-items: center; gap: 12px; }
.cm-pays {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 32px; padding: 0 6px;
  font-family: var(--police-chiffre);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--v2-ardoise);
  background: var(--v2-glace);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.cm-pays + .cm-pays { margin-left: -6px; }
.cm-douane-titre { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: 19px; line-height: 1.1; color: inherit; }
.cm-douane-sens { margin: 1px 0 0; font-size: 12px; color: var(--v2-acier-clair); }
.cm-douane-phrase { margin: 10px 0 0; font-size: 14px; line-height: 1.45; font-weight: 600; max-width: 60ch; }
.cm-douane-sous { margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--v2-acier-clair); }
.cm-douane-liste { margin: 0; padding: 0; list-style: none; }
.cm-douane-liste li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.4; }
.cm-douane-liste li + li { margin-top: 4px; }
@media (min-height: 1000px) and (min-width: 1080px) { .calc .plateau-scene { height: clamp(340px, calc((100vh - var(--cm-rail-h)) * .54), 600px); } }
.cm-douane-liste li::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px;
  border: 1.5px solid var(--v2-acier-clair);
}
.cm-douane-lien {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-glace);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-color: rgba(236, 244, 247, .5);
}
.cm-douane-lien:hover { text-decoration-color: currentColor; }
.cm-douane-lien:focus-visible { outline: 2px solid var(--v2-glace); outline-offset: 3px; }
/* dans le formulaire clair (sous 1080 px, et toujours à l'arrêt 5) */
.cm-douane--flux {
  margin: 28px 0 0;
  padding: 18px 20px 20px;
  color: var(--v2-ardoise);
  background: var(--v2-blanc);
  box-shadow: inset 0 0 0 1px var(--v2-trait-doux);
}
.cm-douane--flux .cm-pays { background: var(--v2-ardoise); color: var(--v2-glace); }
.cm-douane--flux .cm-douane-sens,
.cm-douane--flux .cm-douane-sous { color: var(--v2-encre-2); }
.cm-douane--flux .cm-douane-liste li::before { border-color: var(--v2-acier); }
.cm-douane--flux .cm-douane-lien { color: var(--v2-ardoise); text-decoration-color: rgba(32, 45, 54, .45); }
.cm-douane--flux .cm-douane-lien:focus-visible { outline-color: var(--v2-acier); }
@media (min-width: 1080px) { .calc .cm-douane--flux { display: none; } }
@media (max-width: 1079px) { .calc .recap .cm-douane:not(.cm-douane--flux) { display: none; } }   /* sous 1080 px, le bloc est dans l'arrêt */   /* à partir de 1080 px, le carnet du plateau le montre déjà */

/* ------------------------------------------------------- 8. Le formulaire */
.calc .calc-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(30px, 2.2vw + 18px, 46px);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--v2-ardoise);
  text-wrap: balance;
}
.calc .calc-benefice { margin-top: 8px; font-size: 16px; color: var(--v2-encre-2); }
html[data-arret-courant]:not([data-arret-courant="1"]) .calc .calc-titre,
html[data-arret-courant]:not([data-arret-courant="1"]) .calc .calc-benefice { display: none; }

.calc .arret-entete { margin: 0 0 6px; }
.calc .arret-retour.spm-btn--secondaire {
  min-height: 36px; height: 36px;
  padding: 0 10px 0 4px;
  background: transparent;
  border: 0;
  color: var(--v2-encre-2);
  font-weight: 600;
  font-size: 14px;
}
.calc .arret-retour.spm-btn--secondaire:hover { color: var(--v2-ardoise); background: rgba(92, 120, 150, .1); }
.calc .arret-compte {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--v2-encre-2);
  letter-spacing: 0;
  text-transform: none;
}
.calc .arret-titre {
  margin-top: 4px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(32px, 1.6vw + 22px, 44px);
  line-height: 1.04;
  letter-spacing: -.005em;
  color: var(--v2-ardoise);
}
.calc .arret-mesure { font-size: .62em; color: var(--v2-acier); font-weight: 600; }
.calc .arret-aide { color: var(--v2-encre-2); }
.calc .arret-resume { color: var(--v2-encre-2); }
.calc .arret::before, .calc .arret::after { display: none; }   /* plus de repère de couloir */

.calc legend, .calc .spm-etiquette {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 15px;
  color: var(--v2-ardoise);
  letter-spacing: 0;
}
.calc .spm-aide { color: var(--v2-encre-2); }

/* les champs s'allument au focus */
.calc .spm-champ {
  background-color: var(--v2-blanc);
  border: 1px solid var(--v2-trait);
  border-radius: 0;
  color: var(--v2-ardoise);
  transition: border-color 220ms var(--v2-sortie), box-shadow 320ms var(--v2-sortie), background-color 220ms linear;
}
.calc .spm-champ::placeholder { color: #66737B; }
.calc .spm-champ:hover { border-color: var(--v2-acier); }
.calc .spm-champ:focus,
.calc .spm-champ:focus-visible {
  outline: none;
  border-color: var(--v2-acier);
  background-color: #FBFDFE;
  box-shadow: 0 0 0 4px rgba(92, 120, 150, .2), 0 8px 24px -12px rgba(32, 45, 54, .35);
}
.calc .spm-groupe:focus-within > .spm-etiquette,
.calc .spm-groupe:focus-within .spm-etiquette { color: var(--v2-ardoise); }

/* les choix : des touches carrées ; la touche choisie passe en ardoise */
.calc .pastille label {
  background: var(--v2-blanc);
  border: 1px solid var(--v2-trait);
  border-radius: 0;
  color: var(--v2-ardoise);
  transition: background-color 220ms var(--v2-sortie), border-color 220ms var(--v2-sortie), color 220ms var(--v2-sortie), transform 380ms var(--v2-ressort), box-shadow 220ms var(--v2-sortie);
}
.calc .pastille label:hover { border-color: var(--v2-acier); }
.calc .pastille label:active { transform: scale(.94); }
.calc .pastille input:checked + label {
  background: var(--v2-ardoise);
  border-color: var(--v2-ardoise);
  color: var(--v2-glace);
  box-shadow: 0 10px 22px -14px rgba(32, 45, 54, .9);
}
.calc .pastille input:checked + label .carre-vide { stroke: var(--v2-acier-clair); }
.calc .pastille input:focus-visible + label { outline: 2px solid var(--v2-acier); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(92, 120, 150, .18); }

/* les boutons : à ressort */
.calc .spm-btn, .spm-entete .spm-btn {
  border-radius: 0;
  transition: background-color 180ms linear, color 180ms linear, border-color 180ms linear, transform 420ms var(--v2-ressort), box-shadow 220ms var(--v2-sortie);
}
.calc .spm-btn:active, .spm-entete .spm-btn:active { transform: scale(.965); transition-duration: 90ms; }
.calc .spm-btn--primaire {
  background: var(--v2-grenat);
  color: var(--v2-glace);
  border: 0;
  font-weight: 600;
  box-shadow: 0 14px 28px -18px rgba(128, 12, 31, .95);
}
.calc .spm-btn--primaire:hover { background: var(--v2-grenat-appui); transform: translateY(-1px); box-shadow: 0 18px 30px -18px rgba(128, 12, 31, 1); }
.calc .spm-btn--primaire:focus-visible { outline: 2px solid var(--v2-glace); outline-offset: -5px; box-shadow: 0 0 0 3px var(--v2-acier); }
.calc .spm-btn--secondaire {
  background: var(--v2-blanc);
  color: var(--v2-ardoise);
  border: 1px solid var(--v2-ardoise);
}
.calc .spm-btn--secondaire:hover { background: var(--v2-ardoise); color: var(--v2-glace); }
.calc .spm-btn--fantome { color: var(--v2-ardoise); }

/* la recherche d'objets : un verre ardoise, qui colle sous le trajet */
.calc .recherche .spm-etiquette { font-family: var(--police-titre); font-size: 22px; font-weight: 600; }
.calc .recherche-collante {
  padding: 10px 10px 8px;
  background: rgba(32, 45, 54, .94);
  -webkit-backdrop-filter: var(--v2-verre-flou);
  backdrop-filter: var(--v2-verre-flou);
  box-shadow: inset 0 0 0 1px var(--v2-verre-bord), 0 18px 34px -24px rgba(23, 33, 41, .9);
  clip-path: polygon(0 0, calc(100% - var(--v2-ch-m)) 0, 100% var(--v2-ch-m), 100% 100%, 0 100%);
  color: var(--v2-glace);
}
.calc .recherche-collante.est-active,
#arret-2.d-actif .calc-recherche-fix { top: var(--haut-collant, var(--cm-rail-h)); }
@media (min-width: 1080px) {
  .calc #arret-2.d-actif .recherche-collante,
  .calc .recherche-collante.est-active { top: var(--cm-rail-h); }
}
.calc .recherche-collante .spm-champ {
  height: 50px;
  background-color: rgba(236, 244, 247, .08);
  border-color: rgba(164, 182, 198, .34);
  color: var(--v2-glace);
}
.calc .recherche-collante .spm-champ::placeholder { color: #9FB0BE; }
.calc .recherche-collante .spm-champ:focus {
  background-color: rgba(236, 244, 247, .12);
  border-color: var(--v2-acier-clair);
  box-shadow: 0 0 0 4px rgba(164, 182, 198, .22);
}
.calc .recherche-collante .picto-champ { color: var(--v2-acier-clair); }
.calc .recherche-collante .spm-btn--secondaire { background: transparent; color: var(--v2-glace); border-color: rgba(164, 182, 198, .4); }
.calc .recherche-collante .spm-btn--fantome { color: var(--v2-glace); }
.calc .recherche-collante .recherche-confirmation,
.calc #arret-2.d-actif .recherche-collante .recherche-confirmation {
  color: var(--v2-glace);
  background: rgba(236, 244, 247, .1);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(164, 182, 198, .26);
  font-weight: 600;
}
.calc .recherche-collante .recherche-annuler { color: var(--v2-glace); }
.calc .propositions {
  background: var(--v2-nuit);
  border: 1px solid var(--v2-verre-bord);
  color: var(--v2-glace);
}
.calc .propositions .proposition { color: var(--v2-glace); border-left: 0; background: transparent; }
.calc .propositions .proposition[aria-selected="true"],
.calc .propositions .proposition:hover { background: rgba(236, 244, 247, .1); border-left: 0; }
.calc .propositions * { color: inherit; }

/* les pièces : des touches, la pièce ouverte en clair sur l'ardoise */
.calc .onglets-cadre { margin-top: 8px; border: 0; background: none; }
.calc .onglets { gap: 6px; border: 0; padding: 2px 0; }
.calc .onglet {
  height: 36px;
  padding: 0 12px;
  background: rgba(236, 244, 247, .06);
  color: #C8D4DE;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(164, 182, 198, .22);
  transition: background-color 200ms linear, color 200ms linear, transform 380ms var(--v2-ressort);
}
.calc .onglet:hover { background: rgba(236, 244, 247, .12); color: var(--v2-glace); }
.calc .onglet:active { transform: scale(.95); }
.calc .onglet[aria-selected="true"] { background: var(--v2-glace); color: var(--v2-ardoise); box-shadow: none; }
.calc .onglet .onglet-compte { color: inherit; opacity: .75; font-weight: 600; }
.calc .onglet:focus-visible { outline: 2px solid var(--v2-glace); outline-offset: 2px; }
.calc .onglets-suite { background: linear-gradient(90deg, rgba(32, 45, 54, 0), rgba(32, 45, 54, .95) 40%); color: var(--v2-glace); }

/* Ma liste / Tous les objets */
.calc .voies-liste { gap: 0; box-shadow: inset 0 0 0 1px var(--v2-trait); display: inline-flex; }
.calc .voie-lien label {
  padding: 8px 16px;
  font-weight: 600;
  color: var(--v2-encre-2);
  border: 0;
  box-shadow: none;
  transition: background-color 200ms linear, color 200ms linear;
}
.calc .voie-lien input:checked + label { background: var(--v2-ardoise); color: var(--v2-glace); box-shadow: none; }

/* les objets : des tuiles blanches, l'image sur le bleu glace */
.calc .planche { gap: 12px; }
.calc .case-objet {
  padding: 0 0 10px;
  background: linear-gradient(var(--v2-glace), var(--v2-glace)) 0 0 / 100% 96px no-repeat, var(--v2-blanc);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(92, 120, 150, .2);
  clip-path: polygon(0 0, calc(100% - var(--v2-ch-m)) 0, 100% var(--v2-ch-m), 100% 100%, 0 100%);
  transition: box-shadow 220ms var(--v2-sortie), transform 420ms var(--v2-ressort);
}
.calc .case-objet:hover { box-shadow: inset 0 0 0 1px var(--v2-acier); }
.calc .case-objet .case-image {
  width: 100%;
  height: 96px;
  padding: 8px;
  background: none;
  mix-blend-mode: multiply;
  object-fit: contain;
}
.calc .case-objet .case-nom { margin: 8px 10px 0; min-height: 36px; font-size: 14.5px; font-weight: 600; color: var(--v2-ardoise); }
.calc .case-objet .case-volume { margin: 1px 10px 0; font-size: 13px; color: var(--v2-encre-2); }
.calc .case-objet .compteur { margin: auto 8px 0; }
.calc .case-objet.est-comptee {
  border: 0;
  padding: 0 0 10px;
  box-shadow: inset 0 0 0 2px var(--v2-ardoise);
}
.calc .case-objet.est-comptee::after {
  top: 0; right: 0;
  width: var(--v2-ch-m); height: var(--v2-ch-m);
  background: var(--v2-grenat);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.calc .case-objet.est-comptee .case-nom { color: var(--v2-ardoise); }
.calc .compteur-moins, .calc .compteur-plus {
  background: var(--v2-glace);
  border: 0;
  color: var(--v2-ardoise);
  transition: background-color 160ms linear, color 160ms linear, transform 380ms var(--v2-ressort);
}
.calc .compteur-moins:hover, .calc .compteur-plus:hover { background: var(--v2-ardoise); color: var(--v2-glace); }
.calc .compteur-moins:active, .calc .compteur-plus:active { transform: scale(.88); }
.calc .compteur-valeur { font-family: var(--police-chiffre); font-weight: 600; color: var(--v2-ardoise); }
.calc .case-objet.est-comptee .compteur-plus { background: var(--v2-ardoise); color: var(--v2-glace); }
.calc .case-objet.b3-carte-active { outline: 2px solid var(--v2-grenat); outline-offset: 2px; background: var(--v2-blanc); }
.calc .case-objet.b3-carte-active::after {
  background: var(--v2-grenat); color: var(--v2-glace);
  border-radius: 0; clip-path: none;
  width: auto; height: auto;
}
.calc button.case-objet, .calc .case-libre { clip-path: none; box-shadow: inset 0 0 0 1px var(--v2-trait); background: transparent; }
.calc .planche-titre { font-family: var(--police-titre); font-weight: 600; color: var(--v2-ardoise); }

/* l'en-tête de la liste : « 58 objets chargés · Tout enlever » */
.calc .d-entete .d-compte { font-family: var(--police-titre); font-weight: 600; font-size: 18px; color: var(--v2-ardoise); }

/* la liste « d'après le logement » */
.calc .type-ligne { background: var(--v2-blanc); border-color: var(--v2-trait-doux); }

/* ------------------------------------------------------- 9. L'inventaire en tiroir
   Sous 768 px, l'inventaire est un panneau qui monte depuis le bas, sous la
   scène qui reste en haut. Il défile avec la page (les gestes de la liste ne
   changent pas) ; il entre en glissant quand on arrive au chargement.
   Pas de poignée : le panneau ne se tire pas au doigt, il ne doit pas le
   promettre (contrôle du 02.11). */
.tiroir { position: relative; }
@media (max-width: 767px) {
  .calc #arret-2 .tiroir {
    margin: 18px -16px 0;
    padding: 22px 16px 28px;
    background: var(--v2-blanc);
    box-shadow: 0 -18px 34px -22px rgba(23, 33, 41, .55), 0 -1px 0 rgba(92, 120, 150, .2);
    clip-path: polygon(0 0, calc(100% - var(--v2-ch-l)) 0, 100% var(--v2-ch-l), 100% 100%, 0 100%);
  }
  .calc #arret-2.tiroir-entre .tiroir { animation: v2-tiroir 640ms var(--v2-sortie) both; }
  .calc #arret-2 .recherche-collante { margin-left: -6px; margin-right: -6px; }
  .calc .case-objet .case-image { height: 84px; }
  .calc .case-objet { background-size: 100% 84px, auto; }
}
@keyframes v2-tiroir { from { transform: translateY(56vh); } to { transform: none; } }

/* ------------------------------------------------------- 10. La fin du parcours */
.cm-final { margin-top: 28px; }
.cm-titre { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--v2-ardoise); }
.cm-texte { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--v2-encre-2); max-width: 62ch; }
.cm-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--v2-encre-2); max-width: 62ch; }
.cm-plan {
  margin-top: 24px;
  padding: 20px 20px 18px;
  background: var(--v2-blanc);
  box-shadow: inset 0 0 0 1px var(--v2-trait-doux);
  clip-path: polygon(0 0, calc(100% - var(--v2-ch-m)) 0, 100% var(--v2-ch-m), 100% 100%, 0 100%);
}
.cm-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.calc .cm-btn-plan { min-height: 52px; padding: 0 22px; clip-path: polygon(0 0, calc(100% - var(--v2-ch-s)) 0, 100% var(--v2-ch-s), 100% 100%, 0 100%); }
.cm-btn-json {
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-ardoise);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-color: rgba(32, 45, 54, .4);
  cursor: pointer;
}
.cm-btn-json:hover { text-decoration-color: currentColor; }
.cm-btn-json:focus-visible { outline: 2px solid var(--v2-acier); outline-offset: 4px; }

.cm-suivi { margin-top: 32px; }
.cm-suivi-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 600px) { .cm-suivi-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-suivi-etape {
  position: relative;
  margin: 0;
  background: var(--v2-ardoise);
  color: var(--v2-glace);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.cm-suivi-etape img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.cm-suivi-etape--objet img { object-position: 22% 78%; transform: scale(1.35); transform-origin: 22% 78%; }
.cm-suivi-etape:has(img) { overflow: hidden; }
.cm-suivi-n {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  font-family: var(--police-chiffre); font-weight: 600; font-size: 15px;
  color: var(--v2-ardoise);
  background: var(--v2-glace);
}
.cm-suivi-texte { display: block; padding: 8px 10px 10px; font-size: 13px; line-height: 1.35; font-weight: 600; min-height: 3.2em; }

/* ------------------------------------------------------- 11. Les actions du bas */
@media (max-width: 767px) {
  .calc .arret-actions {
    background: rgba(32, 45, 54, .96);
    -webkit-backdrop-filter: var(--v2-verre-flou);
    backdrop-filter: var(--v2-verre-flou);
    border-top: 1px solid var(--v2-verre-bord);
    z-index: 8;
  }
  .calc .arret-actions .recap-bascule { color: var(--v2-glace); font-weight: 600; }
  .calc .arret-actions .recap-bascule .picto { color: var(--v2-acier-clair); }
  /* le carnet, ouvert au-dessus de la barre */
  .calc .plateau .recap {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 8;
    display: none;
    max-height: 64dvh;
    overflow-y: auto;
    background: var(--v2-ardoise);
    box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .6), inset 0 1px 0 var(--v2-verre-bord);
    clip-path: polygon(0 0, calc(100% - var(--v2-ch-l)) 0, 100% var(--v2-ch-l), 100% 100%, 0 100%);
  }
  .calc .plateau .recap[data-ouvert="1"] { display: block; animation: v2-monte 420ms var(--v2-sortie); }
}
@keyframes v2-monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) and (max-width: 1079px) {
  .calc .plateau .recap { margin: 0 40px 48px; clip-path: polygon(0 0, calc(100% - var(--v2-ch-m)) 0, 100% var(--v2-ch-m), 100% 100%, 0 100%); }
}
.calc .arret-actions { border-top-color: transparent; }
@media (min-width: 768px) {
  .calc .arret-actions { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--v2-trait-doux); }
}

/* ------------------------------------------------------- 12. Le pied de page */
.spm-pied.bande { display: block; max-width: none; margin: 0; background: var(--v2-ardoise); color: var(--v2-acier-clair); border: 0; padding: 40px 16px 120px; }
@media (min-width: 768px) { .spm-pied.bande { padding: 48px 40px; } }
.spm-pied .pied-titre { color: var(--v2-glace); font-family: var(--police-titre); font-weight: 600; }
.spm-pied a { color: var(--v2-glace); }
.spm-pied .spm-pied__legal, .spm-pied .spm-mention, .spm-pied li, .spm-pied address { color: var(--v2-acier-clair); }

/* ------------------------------------------------------- 12 bis. Pas d'arrondi hérité
   Trois éléments du gabarit Swiss Pro gardaient leur pilule ou leur coin
   arrondi (calculateur.css : bulle « On a réorganisé le camion… », bouton
   « Voir le chargement » du bandeau mobile, vignette qui vole vers la 3D). */
.chargement .vt-reorg,
.bandeau-chargement .vt-reorg--bandeau,
.bandeau-chargement .bandeau-chargement-voir,
.b3-vignette { border-radius: 0; }

/* ------------------------------------------------------- 13. Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .trajet.est-trace .trajet-gaine, .trajet.est-trace .trajet-ligne,
  .trajet.est-trace .trajet-arrivee, .trajet-pret .plateau-ville--a { transition: none; }
  .odo-col { transition: none; }
  .plateau-squelette span { animation: none; }
  .calc #arret-2.tiroir-entre .tiroir { animation: none; }
  .calc .plateau .recap[data-ouvert="1"] { animation: none; }
  .calc .spm-btn, .calc .pastille label, .calc .case-objet, .calc .onglet,
  .calc .compteur-moins, .calc .compteur-plus, .bandeau-calc .rail-parcouru,
  .bandeau-calc .rail-arret::before, .bandeau-calc .rail-arrivee path { transition: none; }
  .calc .spm-btn:active, .calc .pastille label:active, .calc .onglet:active,
  .calc .compteur-moins:active, .calc .compteur-plus:active { transform: none; }
}