/* =========================================================================
   cm-intro.css — CM Transport, l'entrée du calculateur (02.11.2026).
   Deux questions (pièces, service), puis la démonstration : le camion se
   remplit avec le logement type du moteur, trois ou quatre phrases, « comment
   ça marche » en trois étapes, et le parcours détaillé pré-rempli.
   Se charge après cm-v2.css. Angles droits, aucune pilule, AUCUNE ombre
   floue (règle de Jhonno) : les surfaces se séparent par un filet net.
   Corrige aussi trois défauts vus sur iPhone le 02.11 : barre du bas sous
   l'indicateur d'accueil (zone de sécurité), bascule du récapitulatif qui
   recouvrait le premier choix, ombres floues sous les choix.
   ========================================================================= */

/* ------------------------------------------------------- 0. Qui s'affiche */
.cm-intro, .cm-hud, .cm-demo-passer, .cm-nett, .cm-rappel-intro { display: none; }

html[data-intro] .bandeau-trajet,
html[data-intro] .bandeau-demo,
html[data-intro] .calc .calc-form { display: none !important; }
html[data-intro] .cm-intro { display: block; }

/* la scène : la carte reste, le trajet et le chiffre du parcours laissent la place à la démonstration */
html[data-intro] .plateau-hud,
html[data-intro] .plateau-ville,
html[data-intro] .plateau-carte .trajet { display: none !important; }
html[data-intro] .cm-hud { display: block; }
/* la phrase de la bande (« Ça ne tient pas dans un camion… ») est dite dans la liste de la démonstration : pas deux fois */
html[data-intro] .calc .plateau-scene .b3-phrase { display: none; }
html[data-intro="demo"]:not([data-intro-fini]) .cm-demo-passer { display: inline-flex; }
/* tant que le script de l'entrée n'est pas là (réseau lent), ses boutons attendent */
html[data-intro="demo"]:not([data-intro-pret]) .cm-demo-passer,
html[data-intro="demo"]:not([data-intro-pret]) .cm-intro-demo .cm-intro-actions { visibility: hidden; }

/* ------------------------------------------------------- 1. La disposition */
.cm-intro { order: 1; min-width: 0; }
.cm-intro-ecran[hidden] { display: none; }

/* téléphone et tablette : les questions d'abord, la scène n'apparaît qu'à la démonstration */
@media (max-width: 1079px) {
  html[data-intro="questions"] .calc .plateau-scene { display: none; }
  html[data-intro="demo"] .calc .plateau-scene { height: clamp(270px, 40vh, 330px); height: clamp(270px, 40svh, 330px); }
  html[data-intro="demo"] .calc .plateau-scene .bande3d { height: calc(78% - 16px); }
}
@media (min-width: 600px) and (max-width: 1079px) {
  html[data-intro="demo"] .calc .plateau-scene { height: clamp(340px, 46vh, 460px); }
}

/* bureau : l'entrée à gauche, la scène à droite sur toute la hauteur (le carnet attend le parcours) */
@media (min-width: 1080px) {
  .cm-intro { grid-column: 1; grid-row: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 56px clamp(32px, 4vw, 64px) 96px; }
  html[data-intro] .calc .plateau { top: 0; }
  html[data-intro] .calc .plateau .recap { display: none; }
  html[data-intro] .calc .plateau-scene { flex: 1 1 auto; height: auto; min-height: 420px; }
  html[data-intro] .calc .plateau-scene .bande3d { height: calc(58% - 22px); }
}

/* grands écrans (3440) : la scène de la démonstration s'élargit, les véhicules ne restent pas des vignettes */
@media (min-width: 1800px) { html[data-intro] { --cm-plateau-l: min(46vw, 1280px); } }

/* ------------------------------------------------------- 2. L'en-tête de l'entrée */
.cm-intro-surtitre {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--v2-acier);
}
.cm-intro-titre {
  margin: 6px 0 0;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--v2-ardoise);
}
.cm-intro-titre:focus { outline: none; }
.cm-intro-titre:focus-visible { outline: 2px solid var(--v2-acier); outline-offset: 4px; }
.cm-intro-texte { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: var(--v2-encre-2); max-width: 46ch; }
@media (min-width: 1080px) { .cm-intro-titre { font-size: 46px; } .cm-intro-texte { font-size: 17px; } }

/* sur téléphone, l'en-tête se prolonge : un bandeau ardoise, puis les questions sur le bleu glace */
@media (max-width: 1079px) {
  .cm-intro-tete { padding: 18px 16px 22px; background: var(--v2-ardoise); }
  .cm-intro-tete .cm-intro-surtitre { color: var(--v2-acier-clair); }
  .cm-intro-tete .cm-intro-titre { color: var(--v2-glace); font-size: 32px; }
  .cm-intro-tete .cm-intro-texte { color: var(--v2-acier-clair); font-size: 15px; }
  .cm-intro-corps { padding: 22px 16px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .cm-intro-demo .cm-intro-corps { padding-top: 20px; }
}
@media (min-width: 600px) and (max-width: 1079px) {
  .cm-intro-tete, .cm-intro-corps { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1080px) { .cm-intro-corps { margin-top: 36px; } .cm-intro-demo .cm-intro-corps { margin-top: 0; } }

/* ------------------------------------------------------- 3. Les deux questions
   Mêmes pastilles que le parcours (mêmes classes : le prochain lot de boutons
   les reprendra), mises en grille pleine largeur. */
.cm-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.cm-q + .cm-q { margin-top: 26px; }
.calc .cm-q .cm-q-titre {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--v2-ardoise);
}
.cm-q-aide { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.4; }
.cm-q-erreur { margin-top: 10px; }

.cm-intro .pastilles-liste.cm-pieces {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 480px;
}
.cm-intro .cm-pieces .pastille label { width: 100%; height: 60px; box-sizing: border-box; }
.cm-intro .cm-pieces .pastille-chiffre { font-size: 20px; }

.cm-intro .pastilles-liste.cm-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 600px;
}
.cm-intro .cm-services .pastille-large label {
  width: 100%;
  height: 64px;
  box-sizing: border-box;
  padding: 0 8px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  font-size: 15px;
}
@media (max-width: 359px) {
  .cm-intro .cm-services .pastille-large label { font-size: 14px; padding: 0 4px; }
}

/* aucune ombre floue sous un choix (Jhonno, 02.11) : la pastille choisie est un aplat ardoise net */
.calc .pastille input:checked + label { box-shadow: none; }

.cm-intro-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 480px; }
@media (min-width: 1080px) { .cm-intro-actions { flex-direction: row; align-items: center; gap: 20px; max-width: none; } .cm-intro-actions .spm-btn--bloc { width: auto; padding: 0 32px; } }
.cm-intro-actions .spm-btn--fantome { align-self: flex-start; min-height: 44px; padding: 0 2px; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgba(32, 45, 54, .4); }

/* ------------------------------------------------------- 4. La démonstration : les phrases */
.cm-demo-titre { margin-top: 4px; font-size: 30px; }
@media (min-width: 1080px) { .cm-demo-titre { font-size: 40px; } }
.cm-phrases { margin: 16px 0 0; padding: 0; list-style: none; max-width: 56ch; }
.cm-phrases:empty { min-height: 190px; }
@media (max-width: 599px) { .cm-phrases:empty { min-height: 240px; } }   /* le temps que le moteur pose sa liste : la place est déjà là */
.cm-phrase {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 18px;
  border-top: 1px solid var(--v2-trait-doux);
  font-size: 16px;
  line-height: 1.45;
  color: var(--v2-encre);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 320ms var(--v2-sortie), transform 420ms var(--v2-sortie), visibility 0s linear 320ms;
}
.cm-phrase::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; background: var(--v2-grenat); }
.cm-phrase.est-vue { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--v2-sortie), transform 420ms var(--v2-sortie), visibility 0s; }
.cm-phrase strong { font-family: var(--police-chiffre); font-weight: 600; font-size: 1.12em; letter-spacing: .01em; }
.cm-phrase--cle { font-weight: 600; }

/* ------------------------------------------------------- 5. Comment ça marche */
.cm-etapes { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--v2-trait); }
.cm-etapes-titre { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: 20px; line-height: 1.1; color: var(--v2-ardoise); }
.cm-etapes-liste { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: none; }
@media (min-width: 600px) { .cm-etapes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.cm-etape { display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; }
@media (min-width: 600px) { .cm-etape { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 16px; background: var(--v2-blanc); border: 1px solid var(--v2-trait-doux); } }
.cm-etape-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  font-family: var(--police-chiffre); font-weight: 600; font-size: 18px;
  color: var(--v2-glace); background: var(--v2-ardoise);
}
.cm-etape-texte { font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--v2-ardoise); }

/* ------------------------------------------------------- 6. Dans la scène : compteur, « Passer », plan du nettoyage */
.cm-hud {
  position: absolute;
  z-index: 3;
  top: 12px; left: 12px;
  margin: 0;
  padding: 10px 14px 10px;
  background: rgba(23, 33, 41, .72);
  border: 1px solid var(--v2-verre-bord);
  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, 56%);
}
@media (min-width: 1080px) { .cm-hud { top: 18px; left: 18px; padding: 12px 18px 12px; } }
.cm-hud p { margin: 0; max-width: none; }
.cm-hud .hud-chiffre { font-variant-numeric: tabular-nums; }

.calc .cm-demo-passer {
  position: absolute;
  z-index: 4;
  top: 12px; right: 12px;
  min-height: 40px; height: 40px;
  padding: 0 12px;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v2-glace);
  background: rgba(23, 33, 41, .72);
  border: 1px solid var(--v2-verre-bord);
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}
.calc .cm-demo-passer:hover { background: var(--v2-nuit); border-color: var(--v2-acier-clair); }
.calc .cm-demo-passer:focus-visible { outline: 2px solid var(--v2-glace); outline-offset: 2px; }
@media (min-width: 1080px) { .calc .cm-demo-passer { top: 18px; right: 34px; } }

/* nettoyage seul : pas de camion, le plan du logement se nettoie pièce par pièce */
html[data-intro="demo"][data-intro-service="nettoyage"] .cm-nett { display: flex; }
html[data-intro="demo"][data-intro-service="nettoyage"] .calc .plateau-scene .bande3d,
html[data-intro="demo"][data-intro-service="nettoyage"] .plateau-route,
html[data-intro="demo"][data-intro-service="nettoyage"] .plateau-squelette { visibility: hidden; }
html[data-intro][data-intro-service="nettoyage"] .cm-hud .hud-volume { display: none; }
.cm-nett {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 18px; top: 92px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cm-nett svg { display: block; width: min(92%, 460px); height: auto; max-height: 100%; overflow: visible; }
.cm-nett .piece-cadre { fill: rgba(23, 33, 41, .78); stroke: rgba(164, 182, 198, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cm-nett .piece-propre { fill: rgba(236, 244, 247, .16); transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform 520ms var(--v2-sortie); }
.cm-nett .piece-coche { fill: none; stroke: var(--v2-glace); stroke-width: 2; stroke-linecap: square; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 200ms 300ms linear; }
.cm-nett .piece-nom { fill: var(--v2-acier-clair); font-family: var(--police-texte); font-size: 11px; }
.cm-nett .est-propre .piece-propre { transform: scaleX(1); }
.cm-nett .est-propre .piece-coche { opacity: 1; }
.cm-nett .est-propre .piece-cadre { stroke: var(--v2-glace); }

/* ------------------------------------------------------- 7. Le parcours après l'entrée */
html[data-intro-fait] .cm-rappel-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 10px 0 0;
  padding: 10px 0;
  border-top: 1px solid var(--v2-trait-doux);
  border-bottom: 1px solid var(--v2-trait-doux);
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-ardoise);
}
.calc .cm-rappel-modifier { min-height: 44px; height: 44px; padding: 0 2px; font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgba(32, 45, 54, .4); }
/* sur téléphone, après l'entrée, le titre de la page (déjà lu) se replie pour les lecteurs d'écran seulement :
   la première question du parcours monte au-dessus de la barre du bas, même sur 660 px utiles */
@media (max-width: 767px) {
  html[data-intro-fait] .calc .calc-titre,
  html[data-intro-fait] .calc .calc-benefice {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  html[data-intro-fait] .cm-rappel-intro { margin-top: 0; margin-bottom: -16px; padding: 2px 0; }   /* la question suivante remonte de 16 px */
  html[data-intro-fait] .calc .calc-form { padding-top: 14px; }
}
/* les deux réponses de l'entrée ne se reposent pas : le rappel les montre, « Modifier » y ramène */
html[data-intro-fait] #grp-prestation,
html[data-intro-fait] #grp-pieces { display: none; }

/* ------------------------------------------------------- 8. Les trois défauts de la capture du 02.11
   (a) La barre du bas passait sous l'indicateur d'accueil de l'iPhone : la zone
       de sécurité n'était jamais lue (viewport sans viewport-fit=cover). La
       balise est corrigée ; la barre garde sa hauteur utile et y ajoute la zone.
   (b) La bascule « Voir le récapitulatif » (le tiroir et son chevron, à
       droite) recouvrait le premier choix à l'arrivée : la barre fixe du bas
       couvrait le haut du formulaire sur un écran de 660 px utiles. L'entrée
       en deux questions n'a plus de barre fixe ; dans le parcours, le bas du
       formulaire garde la place de la barre ET de la zone de sécurité.
   (c) Aucune ombre floue : choix, boutons, champs, panneaux. */
@media (max-width: 767px) {
  .calc .arret-actions {
    height: calc(85px + env(safe-area-inset-bottom, 0px));   /* 84 + le filet du haut : le bouton finit pile au bord de la zone */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .calc .calc-form { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  .calc .plateau .recap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.calc .spm-btn--primaire,
.calc .spm-btn--primaire:hover,
.calc .spm-champ:focus,
.calc .spm-champ:focus-visible,
.calc .pastille input:focus-visible + label,
.calc .recherche-collante,
.calc .plateau .recap { box-shadow: none; }
.calc .spm-btn--primaire:focus-visible { box-shadow: 0 0 0 3px var(--v2-acier); }
.calc .spm-champ:focus, .calc .spm-champ:focus-visible { box-shadow: 0 0 0 3px rgba(92, 120, 150, .3); }
.calc .pastille input:focus-visible + label { box-shadow: 0 0 0 5px rgba(92, 120, 150, .18); }
.calc .recherche-collante { box-shadow: inset 0 0 0 1px var(--v2-verre-bord); }
@media (max-width: 767px) {
  .calc #arret-2 .tiroir { box-shadow: 0 -1px 0 rgba(92, 120, 150, .3); }
  .calc .plateau .recap { box-shadow: inset 0 1px 0 var(--v2-verre-bord), 0 -1px 0 rgba(92, 120, 150, .4); }
}
@media (min-width: 1080px) { .calc .plateau .recap { box-shadow: inset 0 0 0 1px var(--v2-verre-bord); } }

/* ------------------------------------------------------- 9. Mouvement réduit : l'état final, tout de suite */
@media (prefers-reduced-motion: reduce) {
  .cm-phrase, .cm-phrase.est-vue { transition: none; transform: none; }
  .cm-nett .piece-propre, .cm-nett .piece-coche { transition: none; }
}