/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Page « Communication »
   ───────────────────────────────────────────────────────────────────────
   Suppose base.css puis page.css chargés avant.

   Même pièce que l'accueil et que la page « Site web » : un sol nocturne
   traversé du haut en bas, de la lumière orange, du verre. Ici la pièce
   sert de plateau de tournage — d'où le vocabulaire : viseur, faisceau,
   socle, projecteur.

   Le geste signature de l'accueil (des éléments posés sur des socles que
   la lumière fait tourner) est repris en CSS 3D dans « La vitrine » :
   `transform: rotateY` suffit et coûte cent fois moins cher qu'une
   scène complète. Le seul WebGL de la page est le drone du hero
   (communication-drone.js), chargé paresseusement après `load`.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --cm-r: 300px;                 /* rayon du carrousel, recalculé en JS */
  --cm-collant: 104px;
}
@media (max-width: 860px) { :root { --cm-collant: 20px; } }

/* ═══════════════════════════════════════════════════════════════════════
   1. HERO — le viseur
   ═══════════════════════════════════════════════════════════════════════ */
.cm-hero {
  position: relative;
  min-height: calc(100svh - 66px);
  display: flex;
  align-items: center;
  padding-block: clamp(52px, 6.5vw, 88px);
  overflow: hidden;
}

/* Nappe de lumière qui suit le curseur — même principe que la torche de
   la page « Site web », en fusion additive.                            */
.cm-torche {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(500px circle at var(--tx, 50%) var(--ty, 40%),
    rgba(233,78,26,.26) 0%, rgba(233,78,26,.09) 38%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease;
}
.cm-hero:hover .cm-torche { opacity: 1; }

/* ─── HERO — le drone ─────────────────────────────────────────────────
   Conteneur du canvas WebGL de communication-drone.js : même étage que
   la torche (z-index 1), sous le contenu (.cm-hero__inner, z-index 2).
   Sans JavaScript, sans WebGL ou en mouvement réduit, il reste vide et
   le hero actuel est complet.                                        */
.cm-drone {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cm-drone canvas { width: 100%; height: 100%; }

/* ─── Le viseur : quatre équerres + télémétrie, comme un retour caméra ─
   Purement décoratif : aria-hidden, aucune information ne s'y trouve
   qui ne soit ailleurs en texte.                                      */
.cm-viseur {
  position: absolute;
  inset: clamp(18px, 3vw, 46px) clamp(14px, 3vw, 46px);
  z-index: 1;
  pointer-events: none;
}
.cm-viseur i {
  position: absolute;
  width: clamp(22px, 3vw, 40px);
  height: clamp(22px, 3vw, 40px);
  border: 1px solid rgba(233,78,26,.55);
}
.cm-viseur i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cm-viseur i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cm-viseur i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cm-viseur i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Ligne de balayage : elle descend lentement, comme un capteur qui lit. */
.cm-viseur::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,78,26,.5), transparent);
}
.js .cm-viseur::after { animation: cmScan 7s var(--scr-ease) infinite; }
@keyframes cmScan { 0%,8% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Télémétrie : mono, discrète, en haut du hero */
.cm-tele {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 26px;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.cm-tele span { display: inline-flex; align-items: center; gap: 8px; }
.cm-tele span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--scr-orange);
  box-shadow: 0 0 8px rgba(233,78,26,.9);
}
.js .cm-tele span:first-child::before { animation: cmRec 1.9s steps(1) infinite; }
@keyframes cmRec { 50% { opacity: .15; box-shadow: none; } }
.cm-tele b { font-weight: 500; color: var(--scr-on-night); font-variant-numeric: tabular-nums; }

.cm-hero .scr-wrap { max-width: 1320px; }
.cm-hero__inner { position: relative; z-index: 2; width: 100%; }

.cm-hero h1 {
  margin: 0 0 26px;
  font-size: clamp(26px, 5vw, 72px);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--scr-on-night);
}
.cm-hero h1 .cm-l { display: block; overflow: hidden; }
.cm-hero h1 .cm-l > span { display: block; }
.js .cm-hero h1 .cm-l > span {
  transform: translateY(108%);
  animation: cmMonte 1.05s var(--scr-ease) forwards;
}
.js .cm-hero h1 .cm-l:nth-child(2) > span { animation-delay: .13s; }
@keyframes cmMonte { to { transform: translateY(0); } }

.cm-hero h1 em {
  font-style: normal;
  color: var(--scr-orange);
  text-shadow: 0 0 38px rgba(233,78,26,.55), 0 0 90px rgba(233,78,26,.25);
}

.js .cm-hero .scr-lede,
.js .cm-hero__actions,
.js .cm-preuve { opacity: 0; animation: cmApparait .9s ease .45s forwards; }
.js .cm-hero__actions { animation-delay: .58s; }
.js .cm-preuve { animation-delay: .7s; }
@keyframes cmApparait { to { opacity: 1; } }

.cm-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.cm-preuve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin: clamp(32px, 4vw, 50px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--scr-bord);
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.cm-preuve span { display: inline-flex; align-items: center; gap: 11px; }
.cm-preuve span::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--scr-orange);
  box-shadow: 0 0 9px rgba(233,78,26,.9);
}
.cm-preuve b { font-weight: 500; color: var(--scr-on-night); font-variant-numeric: tabular-nums; }

.cm-descendre {
  position: absolute;
  left: 50%; bottom: 26px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
  pointer-events: none;
}
.cm-descendre i {
  display: block;
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--scr-orange));
}
.js .cm-descendre i { animation: cmDesc 2.1s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes cmDesc { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-height: 780px), (max-width: 860px) { .cm-descendre { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   2. RELANCES — le rappel d'action entre deux stations
   ═══════════════════════════════════════════════════════════════════════ */
.cm-relance {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-top: clamp(40px, 5vw, 66px);
  padding: 30px 34px;
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 20px 20px 4px;
  background: var(--scr-verre-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cm-relance p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--scr-on-night-soft); }
.cm-relance p b { font-weight: 400; color: var(--scr-on-night); }
.cm-relance .scr-btn { flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════
   3. CE QUE LA COMMUNICATION DOIT CHANGER — quatre rôles
   ═══════════════════════════════════════════════════════════════════════ */
.cm-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--scr-bord);
  border-radius: 20px;
  overflow: hidden;
}
@media (min-width: 720px)  { .cm-roles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .cm-roles { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.cm-role {
  position: relative;
  padding: clamp(26px, 2.8vw, 38px);
  background: #1B1512;
  transition: background-color .35s ease;
}
.cm-role:hover { background: #221A15; }
.cm-role h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 300;
  color: var(--scr-on-night);
}
.cm-role p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }
.cm-role::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--scr-orange);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .7s var(--scr-ease);
}
.cm-role.is-in::before { transform: scaleY(1); }
.cm-role.is-in:nth-child(2)::before { transition-delay: .1s; }
.cm-role.is-in:nth-child(3)::before { transition-delay: .2s; }
.cm-role.is-in:nth-child(4)::before { transition-delay: .3s; }

/* ═══════════════════════════════════════════════════════════════════════
   4. LES PRESTATIONS — grille bento
   ───────────────────────────────────────────────────────────────────────
   Neuf métiers, tailles inégales : la vue drone et les réseaux sociaux
   occupent deux cases, parce que ce sont les deux portes d'entrée les
   plus fréquentes. Chaque carte porte un dessin au trait animé — aucune
   photographie n'est requise pour que la page tienne debout.
   ═══════════════════════════════════════════════════════════════════════ */
.cm-bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  grid-template-columns: 1fr;
}
/* Trois colonnes au maximum : a quatre, la ligne de mots-cles en
   capitales se hachait sur cinq lignes dans les cartes etroites.  */
@media (min-width: 620px)  { .cm-bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .cm-bento { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.cm-presta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 232px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--scr-verre-2), rgba(var(--scr-matiere-rgb),.5));
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color .35s ease, transform .5s var(--scr-ease), box-shadow .5s ease;
}
.cm-presta:hover {
  border-color: var(--scr-bord-vif);
  box-shadow: 0 24px 60px -30px rgba(233,78,26,.55);
}
/* Balayage de lumière au survol, comme sur les dalles de la page site web */
.cm-presta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(var(--scr-encre-rgb),.09) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 1.1s var(--scr-ease);
}
.cm-presta:hover::after { transform: translateX(130%); }

/* Deux cases pour les deux prestations d'appel */
@media (min-width: 620px) {
  .cm-presta--large { grid-column: span 2; }
}

.cm-presta__num {
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--scr-on-night-faint);
}
.cm-presta h3 {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 300;
  color: var(--scr-on-night);
}
.cm-presta p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--scr-on-night-soft); }
.cm-presta p.cm-presta__pt {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--scr-encre-rgb),.09);
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-orange);
}

/* Le dessin : SVG au trait, en filigrane dans le coin haut droit */
.cm-presta__dessin {
  position: absolute;
  top: -14px; right: -14px;
  width: 118px; height: 118px;
  color: var(--scr-orange);
  opacity: .22;
  pointer-events: none;
  transition: opacity .45s ease, transform .6s var(--scr-ease);
}
.cm-presta:hover .cm-presta__dessin { opacity: .5; transform: scale(1.06) rotate(-4deg); }
.cm-presta__dessin svg { width: 100%; height: 100%; }
/* Les hélices tournent, le reste est fixe. */
.js .cm-presta:hover .cm-helice {
  animation: cmTourne 1.1s linear infinite;
  transform-origin: center;
  /* fill-box : chaque hélice tourne autour de son propre centre, pas
     de celui du dessin entier.                                       */
  transform-box: fill-box;
}
/* La lueur qui suit le pointeur : le span est injecté par inclinaison()
   — donc jamais au tactile ni en mouvement réduit. ::after est déjà
   pris par le balayage de lumière.                                   */
.cm-presta__lueur {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(var(--scr-encre-rgb),.09), rgba(233,78,26,.05) 45%, transparent 65%);
  opacity: 0;
  transition: opacity .4s ease;
}
.cm-presta:hover .cm-presta__lueur { opacity: 1; }
@keyframes cmTourne { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════
   5. LA VITRINE — le carrousel à projecteurs
   ───────────────────────────────────────────────────────────────────────
   Le geste de l'accueil, en CSS : des éléments posés sur un anneau que la
   lumière fait tourner. Trois collections (comptes, logos, magazines),
   des EMPLACEMENTS à remplir tant que les visuels ne sont pas fournis.

   Sans JavaScript, l'anneau n'existe pas : les emplacements s'affichent
   en grille, ce qui reste parfaitement lisible.
   ═══════════════════════════════════════════════════════════════════════ */
.cm-vitrine { position: relative; }

/* Sélecteur de collection */
.cm-collections { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 40px); }
.cm-collection {
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: transparent;
  color: var(--scr-on-night-soft);
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.cm-collection:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.cm-collection[aria-selected="true"] {
  background: var(--scr-orange-d);
  border-color: var(--scr-orange-d);
  color: #fff;
}
.cm-collection em { font-style: normal; opacity: .62; font-variant-numeric: tabular-nums; }

/* ─── La scène ────────────────────────────────────────────────────────── */
.cm-scene {
  position: relative;
  height: 470px;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  /* Les pieces laterales depassent la largeur du contenu sur petit
     ecran : sans ce clip, la page gagne une barre de defilement
     horizontale. L'anneau sort du cadre, ce qui est le comportement
     attendu d'un plateau.                                         */
  overflow: hidden;
}
@media (max-width: 760px) { .cm-scene { height: 400px; } }
.cm-scene[hidden] { display: none; }

/* Sol : la nappe de lumière sous l'anneau */
.cm-scene::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 44px;
  width: min(760px, 92%);
  height: 190px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(233,78,26,.20) 0%, rgba(233,78,26,.05) 45%, transparent 72%);
  pointer-events: none;
}
/* Le sol réactif : quand une pièce arrive sous le projecteur, la nappe
   « respire » — classe posée 500 ms par placer() dans communication.js. */
.js .cm-scene::before { transition: transform .5s ease; }
.js .cm-scene.is-tourne::before {
  transform: translateX(-50%) scale(1.12);
  background:
    radial-gradient(ellipse at center, rgba(233,78,26,.14) 0%, transparent 52%),
    radial-gradient(ellipse at center, rgba(233,78,26,.22) 0%, rgba(233,78,26,.06) 45%, transparent 72%);
}

/* Sans JS : grille simple, aucun 3D, tout est visible */
.cm-anneau {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
}
.js .cm-anneau {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform .95s var(--scr-ease);
}
.js .cm-piece {
  position: absolute;
  top: 50%; left: 50%;
  width: 214px;
  margin: -150px 0 0 -107px;
  transform-style: preserve-3d;
  /* Sans cela, les pieces du fond de l'anneau se voient par l'arriere :
     leur texte apparait en miroir a travers la piece de devant.     */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity .6s ease, filter .6s ease;
  /* Profondeur de champ graduée : --prof (0 devant, 1 à l'opposé) est
     posée par placer() dans communication.js. Sans elle, le repli
     vaut l'ancien rendu en retrait.                                  */
  opacity: calc(1 - var(--prof, 1) * .55);
  filter: blur(calc(var(--prof, 1) * 2.4px)) saturate(calc(1 - var(--prof, 1) * .45));
}
.js .cm-piece.is-front { opacity: 1; filter: none; }
/* La piece sous le projecteur : bord vif et halo, pour qu'on sache tout
   de suite laquelle on regarde.                                     */
.js .cm-piece.is-front .cm-slot {
  border-color: rgba(233,78,26,.85);
  box-shadow: 0 0 55px -12px rgba(233,78,26,.6), 0 30px 60px -40px #000;
}
@media (max-width: 760px) { .js .cm-piece { width: 178px; margin-left: -89px; } }

/* Le faisceau du projecteur : il ne s'allume que sur la pièce de devant */
.cm-piece__faisceau {
  position: absolute;
  left: 50%; bottom: 6px;
  width: 250px; height: 300px;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(233,78,26,.46), rgba(233,78,26,.10) 45%, transparent 78%);
  clip-path: polygon(38% 100%, 62% 100%, 96% 0%, 4% 0%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.js .cm-piece.is-front .cm-piece__faisceau { opacity: 1; }

/* Le socle, comme sur l'accueil */
.cm-piece__socle {
  position: relative;
  margin-top: 14px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(233,78,26,.55), rgba(233,78,26,0) 70%);
}
.cm-piece__socle::before {
  content: "";
  position: absolute;
  left: 50%; top: 2px;
  width: 74%; height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(var(--scr-encre-rgb),.28);
}

/* Le reflet sous la pièce éclairée : un écho de lumière injecté par le
   script — le repli en grille sans JavaScript reste identique.       */
.cm-piece__reflet {
  position: absolute;
  left: 9%; top: 100%;
  width: 82%; height: 54px;
  margin-top: 4px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(233,78,26,.18), rgba(var(--scr-encre-rgb),.05) 40%, transparent 75%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.js .cm-piece.is-front .cm-piece__reflet { opacity: .9; }

/* La poussière du faisceau : canvas décoratif posé par le script sur la
   scène visible, arrêté avec la rotation.                            */
.cm-vitrine__poussiere {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ─── L'emplacement : une dalle en pointillés, à remplir ──────────────── */
.cm-slot {
  position: relative;
  display: block;
  border: 1px dashed rgba(233,78,26,.5);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(var(--scr-encre-rgb),.11), rgba(var(--scr-matiere-rgb),.88));
  overflow: hidden;
  transition: border-color .5s ease, box-shadow .5s ease;
}
.cm-slot__todo {
  position: absolute;
  left: 10px; top: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  /* Fond a .12 et texte #FF7A3D : 4,9:1 — l'orange vif n'y donnait que 3,2. */
  background: rgba(233,78,26,.12);
  border: 1px solid rgba(233,78,26,.45);
  font-family: var(--scr-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FF7A3D;
}
/* Trame en diagonale : on lit tout de suite « rien n'est encore posé là ». */
.cm-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(var(--scr-encre-rgb),.045) 0 8px, transparent 8px 17px);
  pointer-events: none;
}
.cm-slot__legende {
  padding: 12px 14px 14px;
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.cm-slot__legende b { display: block; font-weight: 500; font-size: 12.5px; letter-spacing: .06em; color: var(--scr-on-night); text-transform: none; }

/* Variante « compte social » : un profil en fil de fer */
.cm-slot--compte .cm-slot__vue { padding: 34px 14px 12px; }
.cm-compte__tete { display: flex; align-items: center; gap: 10px; }
.cm-compte__ava {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(var(--scr-encre-rgb),.28);
  background: rgba(var(--scr-encre-rgb),.06);
}
.cm-compte__id { display: grid; gap: 5px; flex: 1 1 auto; }
.cm-compte__id i { display: block; height: 7px; border-radius: 4px; background: rgba(var(--scr-encre-rgb),.20); }
.cm-compte__id i:last-child { width: 55%; height: 6px; background: rgba(var(--scr-encre-rgb),.11); }
.cm-compte__stats {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-family: var(--scr-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  /* .55 = 5,1:1 sur la carte verre-2 — .45 ne donnait que 3,9:1
     pour du mono 9,5 px non decoratif.                               */
  color: var(--scr-on-night-faint);
}
.cm-compte__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 12px;
}
.cm-compte__grille span {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(var(--scr-encre-rgb),.07);
}
.js .cm-piece.is-front .cm-compte__grille span:nth-child(2) { background: rgba(233,78,26,.28); }
.js .cm-piece.is-front .cm-compte__grille span:nth-child(6) { background: rgba(233,78,26,.16); }

/* Variante « logo » : un carré de marque */
.cm-slot--logo .cm-slot__vue {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 20px;
}
.cm-logo__mono {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  border: 1px solid rgba(var(--scr-encre-rgb),.22);
  border-radius: 50%;
  font-family: var(--scr-mono);
  font-size: 22px;
  letter-spacing: .06em;
  color: rgba(var(--scr-encre-rgb),.36);
}
.js .cm-piece.is-front .cm-logo__mono { border-color: rgba(233,78,26,.6); color: var(--scr-orange); }

/* Variante « magazine » : une couverture debout */
.cm-slot--mag .cm-slot__vue {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 30px 16px 16px;
}
.cm-mag__titre { display: block; height: 12px; border-radius: 3px; background: rgba(var(--scr-encre-rgb),.22); }
.cm-mag__bloc { display: block; margin-top: 9px; height: 7px; border-radius: 3px; background: rgba(var(--scr-encre-rgb),.13); }
.cm-mag__bloc--court { width: 58%; }
.cm-mag__image {
  margin-top: 14px;
  height: 46%;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, rgba(var(--scr-encre-rgb),.07) 0 6px, transparent 6px 13px);
  border: 1px solid rgba(var(--scr-encre-rgb),.12);
}
.cm-mag__pli {
  position: absolute;
  left: 10px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(var(--scr-encre-rgb),.18), transparent);
}

/* ─── Commandes du carrousel ──────────────────────────────────────────── */
.cm-commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}
.cm-fleche {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--scr-bord);
  border-radius: 50%;
  background: transparent;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, transform .3s var(--scr-ease);
}
.cm-fleche:hover { border-color: var(--scr-orange); color: var(--scr-on-night); transform: scale(1.06); }
.cm-fleche svg { width: 17px; height: 17px; }

.cm-pips { display: flex; align-items: center; gap: 9px; }
.cm-pip {
  width: 26px; height: 24px;
  padding: 11px 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cm-pip::before {
  content: "";
  display: block;
  height: 2px;
  background: rgba(var(--scr-encre-rgb),.55);
  transition: background-color .4s ease, transform .4s ease;
}
.cm-pip[aria-current="true"]::before { background: var(--scr-orange); transform: scaleY(2); }
.cm-pip:hover::before { background: var(--scr-on-night); }


.cm-vitrine__hint {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}

/* Consigne de remplissage, sous la vitrine */
.cm-consigne {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: 20px 24px;
  border: 1px dashed rgba(233,78,26,.45);
  border-radius: 14px;
  background: rgba(233,78,26,.05);
  font-size: 15px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}
.cm-consigne b { font-weight: 400; color: var(--scr-on-night); }
.cm-consigne code {
  font-family: var(--scr-mono);
  font-size: 13px;
  color: var(--scr-orange);
}

/* ─── Le pont vers les réalisations ───────────────────────────────────
   Sous la vitrine : les clients qui ont aussi leur site sur le mur de
   la page Site web. La matière des relances (verre, liseré orange à
   gauche) parce que c'en est une, vers une autre page plutôt que vers
   le devis. Deux colonnes au-delà de 900 px ; en dessous, le texte,
   la liste puis le bouton, dans l'ordre du HTML.                    */
.cm-pont {
  display: grid;
  gap: 22px clamp(28px, 4vw, 60px);
  margin-top: clamp(40px, 5vw, 66px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 20px 20px 4px;
  background: var(--scr-verre-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (min-width: 900px) {
  .cm-pont {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "tete liste" "btn liste";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .cm-pont__tete { grid-area: tete; }
  .cm-pont__liste { grid-area: liste; }
  .cm-pont__btn { grid-area: btn; }
}
.cm-pont__tete { min-width: 0; }
.cm-pont__surtitre {
  margin: 0 0 12px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.cm-pont__titre {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 300;
  line-height: 1.24;
  color: var(--scr-on-night);
  text-wrap: balance;
}
.cm-pont__tete > p:last-child {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--scr-on-night-soft);
}
.cm-pont__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.cm-pont__liste li {
  padding: 14px 0 14px 22px;
  border-top: 1px solid var(--scr-bord);
  font-family: var(--scr-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.cm-pont__liste li:first-child { padding-top: 0; border-top: 0; }
.cm-pont__liste li:last-child { padding-bottom: 0; }
/* Un point orange par client : le même repère que les puces de la
   page, pour dire « ceci est un nom », pas une prestation de plus.  */
.cm-pont__liste b {
  position: relative;
  display: block;
  margin-bottom: 4px;
  font-family: var(--scr-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.cm-pont__liste b::before {
  content: "";
  position: absolute;
  left: -22px;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--scr-orange);
}
.cm-pont__btn { justify-self: start; max-width: 100%; }

@media print {
  .cm-pont__titre, .cm-pont__tete p, .cm-pont__liste li, .cm-pont__liste b { color: var(--scr-ink); }
  .cm-pont__btn { display: none; }
}
@media (forced-colors: active) {
  .cm-pont__liste b::before { forced-color-adjust: none; background: CanvasText; }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. LE TOURNAGE — plan de vol
   ═══════════════════════════════════════════════════════════════════════ */
.cm-vol { list-style: none; margin: 0; padding: 0; position: relative; }
.cm-vol::before {
  content: "";
  position: absolute;
  left: 17px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--scr-orange), rgba(233,78,26,.08));
}
.cm-etape { position: relative; padding: 0 0 clamp(34px, 4vw, 58px) 58px; }
.cm-etape:last-child { padding-bottom: 0; }
.cm-etape__n {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 35px; height: 35px;
  border: 1px solid var(--scr-bord);
  border-radius: 50%;
  background: var(--scr-sol);
  font-family: var(--scr-mono);
  font-size: 12px;
  color: var(--scr-on-night-mute);
  transition: border-color .5s ease, color .5s ease, box-shadow .5s ease;
}
.cm-etape.is-in .cm-etape__n {
  border-color: var(--scr-orange);
  color: var(--scr-orange);
  box-shadow: 0 0 22px rgba(233,78,26,.4);
}
.cm-etape h3 { margin: 4px 0 8px; font-size: 21px; font-weight: 300; color: var(--scr-on-night); }
.cm-etape p { margin: 0; font-size: 16.5px; line-height: 1.66; color: var(--scr-on-night-soft); }
.cm-etape__meta {
  margin: 0 0 8px;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scr-orange);
}

/* ─── La trajectoire se dessine au défilement ─────────────────────────
   Fil et tête sont injectés par trajectoire() dans communication.js ;
   --cm-avancee (0 → 1) et --cm-h (hauteur en px) sont posées par le
   script. Sans JavaScript, seul le ::before statique existe.         */
.cm-vol--fil::before { opacity: .18; }   /* l'ancien rail devient fantôme */
.cm-vol__fil {
  position: absolute;
  left: 17px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--scr-orange), rgba(233,78,26,.25));
  transform: scaleY(var(--cm-avancee, 0));
  transform-origin: 50% 0;
}
.cm-vol__tete {
  position: absolute;
  left: 13.5px; top: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--scr-orange);
  box-shadow: 0 0 18px rgba(233,78,26,.9);
  transform: translateY(calc(var(--cm-avancee, 0) * var(--cm-h, 0px)));
}

/* ═══════════════════════════════════════════════════════════════════════
   7. RÉSEAUX SOCIAUX — le téléphone et le calendrier
   ═══════════════════════════════════════════════════════════════════════ */
.cm-social {
  display: grid;
  gap: clamp(30px, 4.5vw, 64px);
  align-items: center;
}
@media (min-width: 940px) { .cm-social { grid-template-columns: 1fr 340px; } }

.cm-tel {
  position: relative;
  width: 300px;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 9 / 17;
  padding: 12px;
  border: 1px solid rgba(var(--scr-encre-rgb),.18);
  border-radius: 34px;
  background: linear-gradient(160deg, rgba(var(--scr-encre-rgb),.08), rgba(var(--scr-matiere-rgb),.9));
  box-shadow: 0 40px 90px -40px rgba(233,78,26,.5);
  overflow: hidden;
}
.cm-tel::before {
  content: "";
  position: absolute;
  left: 50%; top: 12px;
  width: 74px; height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(var(--scr-encre-rgb),.2);
}
.cm-tel__ecran {
  height: 100%;
  border-radius: 24px;
  background: #191411;
  border: 1px solid rgba(var(--scr-encre-rgb),.08);
  overflow: hidden;
  padding: 26px 12px 12px;
}
.cm-tel__post {
  position: absolute;
  inset: 38px 12px 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(var(--scr-encre-rgb),.05);
  border: 1px solid rgba(var(--scr-encre-rgb),.1);
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .6s ease, transform .7s var(--scr-ease);
}
.cm-tel__post.is-vu { opacity: 1; transform: none; }
.cm-tel__format {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  /* Meme cure que .cm-slot__todo : fond .12, texte #FF7A3D — 5,5:1. */
  background: rgba(233,78,26,.12);
  border: 1px solid rgba(233,78,26,.45);
  font-family: var(--scr-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FF7A3D;
}
.cm-tel__zone {
  height: 46%;
  border-radius: 12px;
  border: 1px dashed rgba(var(--scr-encre-rgb),.18);
  background: repeating-linear-gradient(135deg, rgba(var(--scr-encre-rgb),.05) 0 7px, transparent 7px 15px);
}
.cm-tel__ligne { display: block; height: 7px; margin-top: 10px; border-radius: 4px; background: rgba(var(--scr-encre-rgb),.16); }
.cm-tel__ligne--court { width: 52%; }
.cm-tel__actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  color: rgba(var(--scr-encre-rgb),.4);
}
.cm-tel__actions svg { width: 15px; height: 15px; }
.cm-tel__actions svg:first-child { color: var(--scr-orange); }

/* ─── Le téléphone en vraie perspective, piloté par le défilement ─────
   Même technique progressive que la barre .scr-progress de page.css :
   sans animation-timeline, le téléphone est strictement identique à
   aujourd'hui. Restreint aux écrans où .cm-social est en deux
   colonnes, pour qu'aucune rotation ne déborde à 390 px.             */
@media (min-width: 940px) {
  @supports (animation-timeline: view()) {
    .cm-tel {
      animation: cmTelOrbite linear both;
      animation-timeline: view();
      animation-range: entry 15% exit 85%;
    }
    /* Reflet d'écran (le ::before est pris par l'encoche) : une nappe
       claire qui glisse sur la vitre pendant l'orbite.               */
    .cm-tel::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 30%, rgba(var(--scr-encre-rgb),.10) 45%, transparent 60%);
      background-size: 250% 100%;
      background-position: 100% 0;
      animation: cmTelReflet linear both;
      animation-timeline: view();
      animation-range: entry 15% exit 85%;
    }
  }
}
@keyframes cmTelOrbite {
  from { transform: perspective(1100px) rotateY(24deg) rotateX(5deg) translateY(18px); }
  50%  { transform: perspective(1100px) rotateY(0deg) rotateX(0deg); }
  to   { transform: perspective(1100px) rotateY(-13deg) rotateX(-4deg) translateY(-12px); }
}
@keyframes cmTelReflet {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}


/* Le calendrier éditorial : une grille de cases qui s'allument.
   Bride a 420 px : sans elle, les cases faisaient 90 px de cote et le
   dessin ne ressemblait plus a un calendrier.                      */
/* ─── Le calendrier éditorial ─────────────────────────────────────────
   « Il faut qu'on voie que c'est un calendrier, avec des jours et des
   dates de publication » : la grille de carrés vides ne le disait pas.
   Elle porte maintenant l'en-tête des jours, les numéros, et une
   légende qui nomme ce que la couleur signifie. Les jours publiés
   s'allument à l'entrée dans le champ, en cascade.                   */
.cm-calendrier {
  max-width: 420px;
  margin-top: 30px;
}
.cm-calendrier__mois {
  margin: 0 0 12px;
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.cm-calendrier__jours,
.cm-calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cm-calendrier__jours {
  margin-bottom: 6px;
}
.cm-calendrier__jours b {
  font-family: var(--scr-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
  color: rgba(242,239,234,.42);
}
.cm-calendrier__grille span {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: rgba(var(--scr-encre-rgb),.06);
  transition: background-color .5s ease, box-shadow .5s ease, color .5s ease;
}
.cm-calendrier__grille i {
  font-style: normal;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(242,239,234,.34);
  transition: color .5s ease;
}
/* Un jour publié : la case s'allume et le chiffre reprend sa lisibilité. */
.cm-calendrier.is-in .cm-calendrier__grille span[data-post] {
  background: rgba(233,78,26,.55);
  box-shadow: 0 0 12px rgba(233,78,26,.5);
}
.cm-calendrier.is-in .cm-calendrier__grille span[data-post] i { color: var(--scr-paper); }
.cm-calendrier.is-in .cm-calendrier__grille span[data-post="2"] {
  background: rgba(233,78,26,.28);
  box-shadow: none;
}
.cm-calendrier.is-in .cm-calendrier__grille span:nth-child(2)  { transition-delay: .05s; }
.cm-calendrier.is-in .cm-calendrier__grille span:nth-child(6)  { transition-delay: .12s; }
.cm-calendrier.is-in .cm-calendrier__grille span:nth-child(11) { transition-delay: .2s; }
.cm-calendrier.is-in .cm-calendrier__grille span:nth-child(14) { transition-delay: .26s; }
.cm-calendrier.is-in .cm-calendrier__grille span:nth-child(16) { transition-delay: .32s; }
.cm-calendrier.is-in .cm-calendrier__grille span:nth-child(21) { transition-delay: .38s; }
.cm-calendrier.is-in .cm-calendrier__grille span:nth-child(25) { transition-delay: .44s; }
.cm-calendrier__legende {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.cm-calendrier__puce {
  width: 11px; height: 11px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: rgba(233,78,26,.55);
  box-shadow: 0 0 10px rgba(233,78,26,.5);
}
@media (prefers-reduced-motion: reduce) {
  .cm-calendrier__grille span, .cm-calendrier__grille i { transition: none; }
}

.cm-social__liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.cm-social__liste li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}
.cm-social__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 11px; height: 1px;
  background: var(--scr-orange);
}

/* ═══════════════════════════════════════════════════════════════════════
   8. AFFICHAGE & ÉDITION — le mur de supports en 3D
   ═══════════════════════════════════════════════════════════════════════ */
.cm-supports {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  perspective: 1200px;
}
.cm-support {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--scr-bord);
  border-radius: 18px;
  background: var(--scr-verre-1);
  transform-style: preserve-3d;
  transition: transform .6s var(--scr-ease), border-color .4s ease, box-shadow .5s ease;
}
.cm-support:hover {
  border-color: var(--scr-bord-vif);
  transform: rotateY(-8deg) rotateX(4deg) translateZ(24px);
  box-shadow: -30px 30px 70px -40px rgba(0,0,0,.9), 0 0 60px -30px rgba(233,78,26,.6);
}
.cm-support h3 { margin: 0 0 8px; font-size: 19px; font-weight: 300; color: var(--scr-on-night); }
.cm-support p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--scr-on-night-soft); }
/* La maquette du support, dessinée en CSS : proportions réelles */
.cm-support__vue {
  position: relative;
  margin-bottom: 18px;
  border: 1px solid rgba(var(--scr-encre-rgb),.18);
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, rgba(var(--scr-encre-rgb),.05) 0 7px, transparent 7px 15px);
}
.cm-support__vue--panneau { aspect-ratio: 4 / 3; }
.cm-support__vue--kake    { aspect-ratio: 1 / 3; width: 34%; }  /* 46 % rendait la maquette deux fois plus haute que les autres */
.cm-support__vue--mag     { aspect-ratio: 3 / 4; width: 54%; }
.cm-support__vue--vitrine { aspect-ratio: 16 / 9; }
.cm-support__vue::after {
  content: attr(data-format);
  position: absolute;
  right: 7px; bottom: 6px;
  font-family: var(--scr-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--scr-on-night-faint);
}
/* Pied du kakémono, pour qu'on le reconnaisse au premier coup d'œil */
.cm-support__vue--kake::before {
  content: "";
  position: absolute;
  left: -18%; right: -18%; bottom: -5px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--scr-encre-rgb),.28);
}

/* ═══════════════════════════════════════════════════════════════════════
   9. LE MATÉRIEL — la valise
   ═══════════════════════════════════════════════════════════════════════ */
.cm-valise {
  display: grid;
  gap: 1px;
  background: var(--scr-bord);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  overflow: hidden;
}
@media (min-width: 700px)  { .cm-valise { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .cm-valise { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.cm-outil {
  display: flex;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  background: #1B1512;
  transition: background-color .35s ease;
}
.cm-outil:hover { background: #221A15; }
.cm-outil__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(233,78,26,.4);
  border-radius: 12px;
  color: var(--scr-orange);
}
.cm-outil__ic svg { width: 20px; height: 20px; }
.cm-outil h3 { margin: 0 0 5px; font-size: 17px; font-weight: 300; color: var(--scr-on-night); }
.cm-outil p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-soft); }
.cm-outil__marque {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border: 1px solid rgba(var(--scr-encre-rgb),.18);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}

/* ═══════════════════════════════════════════════════════════════════════
   10. CAMPAGNE — l'entonnoir
   ═══════════════════════════════════════════════════════════════════════ */
.cm-entonnoir { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cm-etage {
  position: relative;
  padding: 20px 26px;
  border: 1px solid var(--scr-bord);
  border-radius: 14px;
  background: var(--scr-verre-1);
  overflow: hidden;
}
.cm-etage::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--cm-part, 100%);
  /* .24 et non .30 : le tag orange doit garder 4,5:1 par-dessus la nappe. */
  background: linear-gradient(90deg, rgba(233,78,26,.24), rgba(233,78,26,.05));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--scr-ease);
}
.cm-entonnoir.is-in .cm-etage::before { transform: scaleX(1); }
.cm-entonnoir.is-in .cm-etage:nth-child(2)::before { transition-delay: .12s; }
.cm-entonnoir.is-in .cm-etage:nth-child(3)::before { transition-delay: .24s; }
.cm-entonnoir.is-in .cm-etage:nth-child(4)::before { transition-delay: .36s; }
.cm-etage > * { position: relative; }
.cm-etage h3 { margin: 0 0 4px; font-size: 18px; font-weight: 300; color: var(--scr-on-night); }
.cm-etage p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-soft); }
.cm-etage__tag {
  display: block;
  margin-bottom: 6px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* #FF7A3D : le tag est posé SUR la nappe orange de l'entonnoir — le
     vif #E94E1A n'y tenait plus le 4,5:1.                             */
  color: #FF7A3D;
}

.cm-avertissement {
  margin-top: clamp(26px, 3vw, 40px);
  padding: 18px 22px;
  border-left: 2px solid rgba(var(--scr-encre-rgb),.28);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--scr-on-night-mute);
}

/* ═══════════════════════════════════════════════════════════════════════
   11. LE DEVIS — le formulaire commun aux quatre pages
   ───────────────────────────────────────────────────────────────────────
   Même objet que .ct-devis (contact), .sw-devis (site web) et .ia-devis
   (intelligence artificielle) : mêmes champs, dans le même ordre. Au
   premier regard, trois tuiles de pôle cumulables, le message, le nom,
   l'e-mail, la commune — obligatoire sur cette page seulement — et
   l'accord. Le reste attend dans un <details> natif.

   Le secteur est un vrai groupe de boutons radio, replié, sans choix
   d'avance. Sans JavaScript, :has() n'affiche que le panneau du
   secteur coché (fin de section) ; sans :has(), tous s'affichent. Avec
   JavaScript, seuls les champs du secteur choisi sont actifs — les
   autres sont `disabled`, donc jamais transmis.

   Préfixes : .cm-mention, .cm-poles/.cm-pole, .cm-plus, .cm-secteurs/
   .cm-secteur, .cm-panneau, .cm-champs/.cm-champ, .cm-cases/.cm-case,
   .cm-consentement, .cm-miel, .cm-envoi, .cm-bilan, .cm-oblig,
   .cm-erreur.
   ═══════════════════════════════════════════════════════════════════════ */
.cm-devis { position: relative; }
.cm-devis__cadre {
  position: relative;
  padding: clamp(26px, 3.6vw, 54px);
  border: 1px solid var(--scr-bord);
  border-radius: 24px;
  background: linear-gradient(170deg, var(--scr-verre-2), rgba(var(--scr-matiere-rgb),.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
/* Halo orange derrière le formulaire : c'est la zone éclairée de la pièce */
.cm-devis__cadre::before {
  content: "";
  position: absolute;
  left: 50%; top: -180px;
  width: 620px; height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(233,78,26,.20), transparent 68%);
  pointer-events: none;
}
.cm-devis__cadre > * { position: relative; }

/* Les fieldsets du formulaire perdent le cadre natif : seuls les
   panneaux sectoriels en gardent un, le leur. `:where` ramène la règle
   à une spécificité nulle, pour que .cm-panneau reprenne la main.
   `min-width: 0` : sans lui, un fieldset s'élargit à son contenu et
   pousse la page de côté sur mobile.                                */
:where(.cm-form fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }

/* « * = obligatoire », dit une fois, en tête : le chemin le plus court
   (nom, e-mail, commune, accord) se voit avant le premier champ.    */
.cm-mention { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--scr-on-night-mute); }
.cm-mention .cm-oblig { color: var(--scr-orange); }

.cm-champs { display: grid; gap: 20px; }
@media (min-width: 720px) { .cm-champs--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cm-champs--espace { margin-top: 20px; }

/* `align-content: start` : sans elle, un champ voisin plus haut (parce
   qu'il porte une ligne d'aide) étirerait la ligne et décalerait le
   contrôle vers le bas. Les deux colonnes restent alignées en tête. */
.cm-champ { display: grid; align-content: start; gap: 7px; }
/* Les questions se lisent comme des questions : police de texte, casse
   normale. La capitale mono reste aux étiquettes (surtitre, pastille). */
.cm-champ > label {
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.cm-champ > label .cm-oblig { color: var(--scr-orange); }
.cm-champ input,
.cm-champ select,
.cm-champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid rgba(var(--scr-encre-rgb),.16);
  border-radius: 12px;
  /* Verre clair, PLUS clair que le panneau qui le porte : le champ se
     présente comme une surface qui attend la main, pas comme un puits. */
  background: rgba(var(--scr-encre-rgb),.07);
  color: var(--scr-on-night);
  font-family: var(--scr-font);
  font-weight: 300;
  font-size: 16px;               /* 16px : iOS ne zoome pas au focus */
  line-height: 1.5;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.cm-champ textarea { min-height: 128px; resize: vertical; }
.cm-champ select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--scr-encre-rgb),.6) 50%),
                    linear-gradient(135deg, rgba(var(--scr-encre-rgb),.6) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* Le menu déroulant natif emprunte les couleurs du système : sans cette
   ligne, du texte clair sur fond clair sur certains navigateurs. Le
   jeton matière suit seul le thème clair ; les intitulés de groupe du
   budget (optgroup) prennent le même fond, sans l'italique natif.   */
.cm-champ optgroup,
.cm-champ option { background: rgb(var(--scr-matiere-rgb)); color: var(--scr-on-night); font-style: normal; }
.cm-champ input::placeholder,
.cm-champ textarea::placeholder { color: var(--scr-on-night-faint); }
.cm-champ input:hover,
.cm-champ select:hover,
.cm-champ textarea:hover { border-color: rgba(var(--scr-encre-rgb),.3); }
.cm-champ input:focus,
.cm-champ select:focus,
.cm-champ textarea:focus {
  /* Le focus ÉCLAIRE le champ : on écrit dans la lumière.
     `background-color` et non `background` : la forme courte remettrait
     `background-image` à `none` et effacerait la flèche du menu
     déroulant à l'instant précis où il reçoit le focus.           */
  background-color: rgba(var(--scr-encre-rgb),.1);
  box-shadow: 0 0 0 4px rgba(233,78,26,.16);
}
.cm-champ__aide { font-size: 14px; line-height: 1.55; color: var(--scr-on-night-mute); }

/* État d'erreur : couleur ET texte, jamais la couleur seule */
.cm-champ input[aria-invalid="true"],
.cm-champ select[aria-invalid="true"],
.cm-champ textarea[aria-invalid="true"] { border-color: #FF7A4D; }
.cm-erreur {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #FFA98B;
}
.cm-erreur::before { content: "▲"; font-size: 9px; }
.cm-champ.is-erreur .cm-erreur { display: flex; }

/* ─── Les pôles — trois tuiles cumulables ─────────────────────────────
   Le dessin des tuiles de .ct-poles (contact), avec un repère CARRÉ :
   ce sont des cases à cocher, plusieurs choix restent possibles.     */
.cm-poles { margin: 0 0 26px; }
.cm-poles > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.cm-poles__aide { margin: -6px 0 12px; font-size: 14px; color: var(--scr-on-night-mute); }
.cm-poles__liste { display: grid; gap: 10px; }
@media (min-width: 760px) { .cm-poles__liste { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.cm-pole { position: relative; }
/* L'input reste dans le flux mais invisible : le focus clavier se voit
   sur le label grâce à `:focus-visible + label`.                      */
.cm-pole input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.cm-pole label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  height: 100%;
  padding: 14px 22px;
  border: 1px solid var(--scr-bord);
  border-radius: 16px;
  background: rgba(var(--scr-matiere-rgb),.35);
  font-family: var(--scr-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.cm-pole label::before {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid currentColor;
  transition: background-color .3s ease;
}
.cm-pole label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.cm-pole input:checked + label {
  border-color: var(--scr-orange);
  background: color-mix(in srgb, var(--scr-orange) 16%, transparent);
  color: var(--scr-on-night);
}
.cm-pole input:checked + label::before { background: var(--scr-orange); }
.cm-pole input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ─── Le repli — « Ajouter des précisions » ───────────────────────────
   Un <details> natif : il s'ouvre au clavier sans script. Le triangle
   du navigateur cède la place au chevron de la FAQ (§ 12), en ::after,
   posé dans le flux plutôt qu'en absolu : le titre peut passer sur
   deux lignes sans le recouvrir.                                     */
.cm-plus { margin: 26px 0 0; border-top: 1px solid var(--scr-bord); border-bottom: 1px solid var(--scr-bord); }
.cm-plus > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--scr-on-night);
  transition: color .3s ease;
}
.cm-plus > summary::-webkit-details-marker { display: none; }
.cm-plus > summary:hover { color: var(--scr-orange); }
.cm-plus > summary:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: 2px; border-radius: 6px; }
.cm-plus > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--scr-orange);
  border-bottom: 1.5px solid var(--scr-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .35s var(--scr-ease);
}
.cm-plus[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.cm-plus__quoi { display: block; margin-top: 3px; font-size: 14px; color: var(--scr-on-night-mute); }
.cm-plus__corps { padding: 6px 0 24px; }
/* Le questionnaire propre à la page, sous le bloc commun. */
.cm-plus__detail { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--scr-bord); }

/* ─── Le sélecteur de secteur ─────────────────────────────────────────── */
.cm-secteurs > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.cm-secteurs__liste { display: flex; flex-wrap: wrap; gap: 9px; }
.cm-secteur { position: relative; }
/* L'input reste dans le flux mais invisible : le focus clavier se voit
   sur le label grâce à `:focus-visible + label`.                      */
.cm-secteur input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.cm-secteur label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  font-family: var(--scr-font);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.cm-secteur label::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.cm-secteur label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.cm-secteur input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.14);
  color: var(--scr-on-night);
}
.cm-secteur input:checked + label::before {
  background: var(--scr-orange);
  box-shadow: 0 0 10px rgba(233,78,26,.9);
}
.cm-secteur input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ─── Le panneau sectoriel ────────────────────────────────────────────── */
/* L'écart est porté par le haut du panneau : sans choix, aucun panneau,
   et le repli se referme juste sous les pastilles.                  */
.cm-panneau {
  margin: 22px 0 0;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 18px 18px 4px;
  background: rgba(var(--scr-matiere-rgb),.45);
}
.cm-panneau[hidden] { display: none; }
.js .cm-panneau.is-swap { animation: cmBascule .5s var(--scr-ease); transform-origin: 0 50%; }
@keyframes cmBascule {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.cm-panneau > legend,
.cm-panneau__titre {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-orange);
}
.cm-panneau__phrase { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }

/* Cases à cocher : de vraies cibles, pas des puces décoratives */
.cm-cases { display: flex; flex-wrap: wrap; gap: 9px; }
.cm-case { position: relative; }
.cm-case input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.cm-case label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(var(--scr-encre-rgb),.16);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.cm-case label::before {
  content: "";
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 1px solid rgba(var(--scr-encre-rgb),.4);
  border-radius: 4px;
  transition: background-color .25s ease, border-color .25s ease;
}
.cm-case label:hover { border-color: rgba(233,78,26,.55); color: var(--scr-on-night); }
.cm-case input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.12);
  color: var(--scr-on-night);
}
.cm-case input:checked + label::before {
  background: var(--scr-orange) linear-gradient(transparent, transparent);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 2px rgba(var(--scr-matiere-rgb),.8);
}
.cm-case input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ─── Consentement, envoi, réponses ───────────────────────────────────── */
.cm-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--scr-on-night-soft);
}
/* La case est enveloppée dans un .cm-champ : sans ces remises à zéro,
   elle hériterait du gabarit des champs de saisie (50 px de haut,
   13 px de renfoncement) et s'afficherait en rectangle vertical.

   Le DESSIN garde les 20 px de la famille, mais la CIBLE fait 44 px :
   les marges négatives font déborder la zone sensible autour du dessin
   sans déplacer d'un pixel ce que l'œil voit. Un contrôle natif ne sait
   pas avoir de cible plus grande que son dessin, d'où le
   `appearance: none` et la case redessinée en ::before — même idiome
   que .cm-case plus haut. Le mode couleurs forcées rend la main au
   contrôle natif (Préférences système).                           */
.cm-consentement input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  width: 44px; height: 44px;
  min-height: 0;
  margin: -10px -12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.cm-consentement input::before {
  content: "";
  width: 20px; height: 20px;
  border: 1px solid rgba(var(--scr-encre-rgb),.4);
  border-radius: 5px;
  transition: background-color .25s ease, border-color .25s ease;
}
.cm-consentement input:hover::before { border-color: rgba(233,78,26,.55); }
.cm-consentement input:checked::before {
  background: var(--scr-orange);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 3px rgba(var(--scr-matiere-rgb),.85);
}
/* Le champ de saisie s'éclaire au focus ; la case, elle, n'a pas de
   fond à éclairer — sans ces deux remises à zéro, la règle commune
   peindrait un rectangle de 44 px et son halo autour du dessin.   */
.cm-consentement input:focus { background-color: transparent; box-shadow: none; }
.cm-consentement input:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: -8px; }
/* La bordure d'alerte de l'état d'erreur passe au dessin : l'élément
   lui-même n'a plus de bordure à colorer.                        */
.cm-consentement input[aria-invalid="true"]::before { border-color: #FF7A4D; }
.cm-consentement a { color: var(--scr-orange); }
.cm-consentement .cm-oblig { color: var(--scr-orange); }

/* Pot de miel : invisible pour l'humain, tentant pour le robot. */
.cm-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.cm-envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--scr-bord);
}
.cm-envoi .scr-btn { flex: 0 0 auto; }
.cm-envoi__rassure {
  margin: 0;
  padding: 8px 18px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: var(--scr-verre-1);
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}

/* Récapitulatif d'erreurs, en tête du formulaire. role="alert" et
   tabindex="-1" sont posés dans le HTML ; le script y met le focus. */
.cm-bilan {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid rgba(255,122,77,.5);
  border-radius: 12px;
  background: rgba(255,122,77,.08);
  font-size: 15px;
  line-height: 1.6;
  color: #FFC3AC;
}
.cm-bilan[hidden] { display: none; }
.cm-bilan ul { margin: 8px 0 0; padding-left: 20px; }
.cm-bilan a { color: inherit; }

.cm-merci {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid rgba(233,78,26,.45);
  border-radius: 18px;
  background: rgba(233,78,26,.07);
}
.cm-merci[hidden] { display: none; }
.cm-merci h3 { margin: 0 0 10px; color: var(--scr-on-night); }
.cm-merci p { color: var(--scr-on-night-soft); }

/* ─── Sans JavaScript ─────────────────────────────────────────────────
   <html> garde sa classe `no-js` tant que le script en ligne du <head>
   ne l'a pas remplacée par `js`. Le CSS fait alors la bascule seul :
   aucun panneau sans choix, puis celui du secteur coché. Un navigateur
   sans :has() ignore le bloc entier et montre les neuf panneaux —
   c'est sans risque, chaque champ porte un nom qui lui est propre.  */
@supports selector(:has(*)) {
  .no-js .cm-panneau[data-secteur] { display: none; }
  .no-js .cm-form:has(#sec-btp:checked) .cm-panneau[data-secteur="btp"],
  .no-js .cm-form:has(#sec-immo:checked) .cm-panneau[data-secteur="immo"],
  .no-js .cm-form:has(#sec-tourisme:checked) .cm-panneau[data-secteur="tourisme"],
  .no-js .cm-form:has(#sec-commerce:checked) .cm-panneau[data-secteur="commerce"],
  .no-js .cm-form:has(#sec-event:checked) .cm-panneau[data-secteur="event"],
  .no-js .cm-form:has(#sec-sante:checked) .cm-panneau[data-secteur="sante"],
  .no-js .cm-form:has(#sec-formation:checked) .cm-panneau[data-secteur="formation"],
  .no-js .cm-form:has(#sec-collectivite:checked) .cm-panneau[data-secteur="collectivite"],
  .no-js .cm-form:has(#sec-autre:checked) .cm-panneau[data-secteur="autre"] { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. FAQ
   ═══════════════════════════════════════════════════════════════════════ */
.cm-faq { border-top: 1px solid var(--scr-bord); }
.cm-faq details { border-bottom: 1px solid var(--scr-bord); }
.cm-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 46px 24px 0;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  color: var(--scr-on-night);
  cursor: pointer;
  list-style: none;
  transition: color .3s ease;
}
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary:hover { color: var(--scr-orange); }
.cm-faq summary:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: -3px; border-radius: 6px; }
.cm-faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--scr-orange);
  border-bottom: 1.5px solid var(--scr-orange);
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  transition: transform .35s var(--scr-ease);
}
.cm-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.cm-faq__rep {
  margin: 0;
  padding: 0 46px 24px 0;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--scr-on-night-soft);
}
.cm-faq__rep + .cm-faq__rep { padding-top: 0; margin-top: -12px; }

/* ═══════════════════════════════════════════════════════════════════════
   13. APPEL FINAL & BARRE COLLANTE
   ═══════════════════════════════════════════════════════════════════════ */
.cm-cta { text-align: center; }
.cm-cta h2 { max-width: 900px; margin-inline: auto; font-size: clamp(26px, 3.6vw, 50px); }
.cm-cta .scr-lede { max-width: 78ch; margin-inline: auto; text-align: center; }
.cm-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }

/* Rappel d'action permanent sur petit écran : c'est là que se perd le
   plus de demandes. Il n'apparaît qu'une fois le hero passé, et
   disparaît quand le formulaire est à l'écran.                        */
.cm-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px clamp(14px, 4vw, 24px);
  background: rgba(var(--scr-matiere-rgb),.92);
  border-top: 1px solid var(--scr-bord);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%);
  transition: transform .45s var(--scr-ease);
}
.cm-barre.is-la { transform: none; }
.cm-barre p {
  margin: 0;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.cm-barre .scr-btn { padding: 11px 20px; min-height: 44px; }
/* position: fixed est répété ici : page.css pose `position: relative`
   sur tous les enfants directs de .scr-nuit avec une spécificité plus
   forte que .cm-barre seul.                                           */
@media (max-width: 860px) { .js .cm-barre { display: flex; position: fixed; } }
/* Sur grand écran, la barre devient une pastille flottante en bas à
   droite — mêmes contenus, même logique d'apparition que barre() (elle
   ne recouvre jamais le formulaire, qui la fait disparaître).        */
@media (min-width: 861px) {
  .js .cm-barre {
    display: flex;
    position: fixed;
    left: auto;
    right: 24px;
    bottom: 24px;
    width: auto;
    border: 1px solid var(--scr-bord);
    border-radius: 999px;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
    transform: translateY(calc(110% + 24px));
  }
  .js .cm-barre.is-la { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Préférences système
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .cm-hero h1 .cm-l > span { transform: none; animation: none; }
  .js .cm-hero .scr-lede, .js .cm-hero__actions, .js .cm-preuve { opacity: 1; animation: none; }
  .js .cm-descendre i, .js .cm-viseur::after, .js .cm-tele span:first-child::before { animation: none; }
  .cm-torche { display: none; }
  .cm-presta::after { display: none; }
  .cm-presta__dessin { transition: none; }
  /* La mise en retrait des pieces du fond n'est pas du mouvement :
     on ne supprime que les transitions.                          */
  .js .cm-anneau, .js .cm-piece { transition: none; }
  .cm-support:hover { transform: none; }
  .cm-etage::before, .cm-calendrier span { transition: none; }
  .js .cm-panneau.is-swap { animation: none; }
  /* Le devis : les tuiles et les pastilles ne se soulèvent plus au
     survol, le chevron du repli bascule sans pivoter.              */
  .cm-pole label:hover,
  .cm-secteur label:hover { transform: none; }
  .cm-pole label,
  .cm-secteur label,
  .cm-case label,
  .cm-plus > summary,
  .cm-plus > summary::after,
  .cm-consentement input::before,
  .cm-champ input,
  .cm-champ select,
  .cm-champ textarea { transition: none; }
  .cm-tel__post { transition: none; }
  .cm-barre { transition: none; }
  /* Les décorations nouvelles : la lueur, la poussière et la tête du
     fil disparaissent ; le fil, lui, reste (c'est du dessin) et le
     script le pose entièrement tracé.                                */
  .cm-presta__lueur, .cm-vitrine__poussiere, .cm-vol__tete { display: none; }
  .cm-vol__fil { transition: none; }
  .js .cm-scene::before { transition: none; }
  .cm-tel { animation: none; transform: none; }
  .cm-tel::after { animation: none; }
}

@media (forced-colors: active) {
  .cm-torche, .cm-viseur, .cm-piece__faisceau, .cm-piece__socle,
  .cm-presta__dessin, .cm-scene::before,
  .cm-drone, .cm-piece__reflet, .cm-vitrine__poussiere,
  .cm-vol__fil, .cm-vol__tete, .cm-presta__lueur, .cm-tel::after { display: none; }
  .js .cm-piece { opacity: 1; filter: none; }
  .cm-devis__cadre::before { display: none; }
  .cm-pole input:checked + label,
  .cm-secteur input:checked + label,
  .cm-case input:checked + label,
  .cm-collection[aria-selected="true"] { border: 3px solid ButtonText; }
  /* La case de consentement redevient un contrôle natif : un dessin
     maison en ::before ne serait plus visible ici. La cible retombe
     à 20 px, mais son libellé reste cliquable sur toute la ligne. */
  .cm-consentement input {
    appearance: auto;
    -webkit-appearance: auto;
    width: 20px; height: 20px;
    margin: 2px 0 0;
  }
  .cm-consentement input::before { display: none; }
}

@media print {
  .cm-hero { min-height: 0; }
  .cm-torche, .cm-viseur, .cm-descendre, .cm-barre,
  .cm-commandes, .cm-collections, .cm-scene::before,
  .cm-drone, .cm-plus > summary::after,
  .cm-vitrine__poussiere, .cm-piece__reflet,
  .cm-vol__fil, .cm-vol__tete { display: none; }
  .js .cm-anneau { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: none; }
  .js .cm-piece { position: static; width: auto; margin: 0; opacity: 1; filter: none; transform: none; }
  .cm-scene { height: auto; perspective: none; }
  .cm-piece__faisceau { display: none; }
  .cm-presta, .cm-support, .cm-devis__cadre { background: #fff; color: #000; border-color: #999; }
  .cm-presta h3, .cm-support h3, .cm-etape h3 { color: #000; }
  .cm-presta p, .cm-support p, .cm-etape p, .cm-role p { color: #222; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RÉUNION DU 24/08/2026
   ───────────────────────────────────────────────────────────────────────
   Les marques des réseaux à la place des noms écrits, et les deux
   relances ramenées à leur seule question.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Les réseaux que nous tenons ─────────────────────────────────────
   « Au lieu de marquer Facebook, Instagram, LinkedIn, on n'intégrerait
   pas les logos ? » Les noms en toutes lettres formaient une ligne
   qu'on ne lisait pas. Les marques se reconnaissent d'un coup d'œil ;
   chacune garde son nom en texte masqué pour les lecteurs d'écran.
   Monochromes : elles empruntent la couleur du texte, donc elles
   restent lisibles quel que soit le fond, et aucune charte de marque
   n'est trahie par une couleur approximative.                        */
.cm-reseaux {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 16px 0 0;
  padding: 0;
}
.cm-reseau {
  display: inline-flex;
  color: var(--scr-on-night-faint);
  transition: color .35s ease, transform .35s var(--scr-ease);
}
.cm-reseau svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
.cm-presta:hover .cm-reseau { color: var(--scr-on-night-mute); }
.cm-reseau:hover { color: var(--scr-orange); transform: translateY(-2px); }

/* ─── Les relances, ramenées à leur question ──────────────────────────
   « Vous ne savez pas par où commencer, on enlève le reste, juste la
   phrase en plus gros et demandez un devis. »                        */
.cm-relance__titre {
  margin: 0 0 4px;
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 300;
  line-height: 1.24;
  color: var(--scr-on-night);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .cm-reseau { transition: none; }
  .cm-reseau:hover { transform: none; }
}
@media print {
  .cm-reseau { color: #000; }
  .cm-relance__titre { color: #000; }
}
@media (forced-colors: active) {
  .cm-reseau svg { fill: CanvasText; }
}

/* ─── Les deux courbes ────────────────────────────────────────────────
   Elles remplacent le paragraphe qui expliquait qu'on ne promet pas de
   résultat chiffré. Le propos reste, en note sous le graphe.

   Le cadre emprunte le langage de la page : crochets de visée aux
   angles comme les projecteurs de l'accueil, trame de balayage comme
   le hero, lueur orange montant du sol. Ce n'est pas un widget de
   tableau de bord, c'est un écran de contrôle.                      */
.cm-progression {
  position: relative;
  margin: clamp(44px, 5vw, 72px) 0 0;
}
.cm-progression__tete { margin: 0 0 clamp(20px, 2.4vw, 28px); }
.cm-progression__etiquette {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.cm-progression__titre {
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 200;
  line-height: 1.16;
  color: var(--scr-on-night);
  text-wrap: balance;
}
.cm-progression__titre em { font-style: normal; color: var(--scr-orange); }
.cm-progression__tete p {
  margin: 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.62;
  color: var(--scr-on-night-soft);
}

/* Le choix de l'indicateur */
.cm-progression__intro {
  margin: 0 0 12px;
  font-family: var(--scr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.cm-progression__kpis {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  padding: 0;
}
/* Sans JavaScript, les éléments restent une énumération lisible. */
.cm-progression__kpis li { font-size: 14.5px; color: var(--scr-on-night-soft); }
.cm-progression__kpis li:not(:last-child)::after { content: " ·"; color: rgba(var(--scr-encre-rgb),.3); }
.cm-progression__kpis li:has(.cm-progression__kpi)::after { content: none; }
.cm-progression__kpi {
  padding: 9px 17px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.cm-progression__kpi:hover { color: var(--scr-on-night); border-color: rgba(233,78,26,.5); }
.cm-progression__kpi[aria-pressed="true"] {
  border-color: rgba(233,78,26,.65);
  background: rgba(233,78,26,.13);
  color: var(--scr-on-night);
  box-shadow: 0 0 22px -8px rgba(233,78,26,.8);
}

/* ── Le cadre de contrôle ─────────────────────────────────────────── */
.cm-progression__cadre {
  position: relative;
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgba(var(--scr-encre-rgb),.10);
  border-radius: 4px;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(233,78,26,.10), transparent 62%),
    rgba(var(--scr-encre-rgb),.022);
  overflow: hidden;
}
/* Trame de balayage, comme le hero. Décorative. */
.cm-progression__cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(var(--scr-encre-rgb),.03) 0 1px, transparent 1px 4px);
  opacity: .6;
}
/* Crochets de visée : le masque n'en laisse que les angles. */
.cm-progression__cadre::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(233,78,26,.42);
  -webkit-mask:
    linear-gradient(to right, #000 22px, transparent 22px calc(100% - 22px), #000 calc(100% - 22px)),
    linear-gradient(to bottom, #000 22px, transparent 22px calc(100% - 22px), #000 calc(100% - 22px));
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, #000 22px, transparent 22px calc(100% - 22px), #000 calc(100% - 22px)),
    linear-gradient(to bottom, #000 22px, transparent 22px calc(100% - 22px), #000 calc(100% - 22px));
  mask-composite: intersect;
}

.cm-progression__mesure {
  position: relative;
  margin: 0 0 6px;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.cm-progression__mesure::before { content: "\25B8  "; opacity: .65; }

/* ── Le tracé ─────────────────────────────────────────────────────── */
.cm-progression__graphe { position: relative; }
/* Le SVG est dessiné à l'échelle 1:1, en pixels mesurés : plus de
   viewBox étiré, donc plus de tirets fractionnés ni d'épaisseurs
   déformées. Le JS le redessine au redimensionnement.              */
.cm-progression__svg { display: block; overflow: visible; }
.cm-progression__grille {
  stroke: rgba(var(--scr-encre-rgb),.06);
  stroke-width: 1;
}
/* Celle qui ne diffuse pas : un trait plein, fin et sourd. Les tirets
   la faisaient passer pour un défaut d'affichage plutôt que pour une
   ligne voulue.                                                     */
.cm-progression__sans {
  fill: none;
  stroke: rgba(var(--scr-encre-rgb),.30);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* La verticale qui matérialise l'écart au dernier point. */
.cm-progression__delta {
  stroke: rgba(233,78,26,.5);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity .5s ease 1.35s;
}
.cm-progression.is-in .cm-progression__delta { opacity: 1; }
.cm-progression__avec {
  fill: none;
  stroke: var(--scr-orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(233,78,26,.6));
}
.cm-progression__ecart { opacity: 0; transition: opacity 1s ease .5s; }
.cm-progression.is-in .cm-progression__ecart { opacity: 1; }
.cm-progression__halo {
  fill: rgba(233,78,26,.18);
  opacity: 0;
  transition: opacity .5s ease 1.5s;
}
.cm-progression.is-in .cm-progression__halo { opacity: 1; }
.cm-progression__bout {
  fill: var(--scr-orange);
  stroke: #FFE8DC;
  stroke-width: 1.6;
  opacity: 0;
  transition: opacity .4s ease 1.5s;
  filter: drop-shadow(0 0 10px rgba(233,78,26,.95));
}
.cm-progression.is-in .cm-progression__bout { opacity: 1; }

/* Libellés en HTML : le viewBox est étiré, il déformerait tout texte. */
.cm-progression__lib {
  position: absolute;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.cm-progression.is-in .cm-progression__lib { opacity: 1; }
.cm-progression__lib--avec {
  transform: translate(-100%, -190%);
  color: var(--scr-on-night);
  font-weight: 500;
  transition-delay: 1.5s;
}
.cm-progression__lib--sans {
  transform: translate(-100%, 70%);
  color: var(--scr-on-night-faint);
  transition-delay: .3s;
}
.cm-progression__lib--gain {
  transform: translate(-50%, -50%);
  padding: 5px 11px;
  border: 1px solid rgba(233,78,26,.4);
  border-radius: 999px;
  background: rgba(11,10,10,.72);
  color: #FF7A3D;
  font-size: 10px;
  transition-delay: 1s;
}

.cm-progression__axe {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 14px 0 0;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(242,239,234,.42);
}

.cm-progression__note {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 78ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--scr-on-night-faint);
}

@media (max-width: 620px) {
  /* Trop serré pour trois libellés : celui du milieu s'efface. */
  .cm-progression__lib--gain { display: none; }
  .cm-progression__lib { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-progression__ecart,
  .cm-progression__bout,
  .cm-progression__lib { transition: none; opacity: 1; }
  .cm-progression__kpi { transition: none; }
}
@media print {
  .cm-progression__cadre { background: #fff; border-color: #ccc; }
  .cm-progression__cadre::before,
  .cm-progression__cadre::after { display: none; }
  .cm-progression__titre, .cm-progression__titre em, .cm-progression__tete p,
  .cm-progression__note, .cm-progression__etiquette, .cm-progression__intro,
  .cm-progression__mesure, .cm-progression__kpis li, .cm-progression__kpi,
  .cm-progression__axe, .cm-progression__lib { color: #000; }
  .cm-progression__avec { stroke: #000; filter: none; }
  .cm-progression__sans { stroke: #999; }
}
@media (forced-colors: active) {
  .cm-progression__avec { stroke: LinkText; filter: none; }
  .cm-progression__sans { stroke: GrayText; }
  .cm-progression__bout { fill: Canvas; stroke: LinkText; filter: none; }
  .cm-progression__kpi[aria-pressed="true"] { border: 2px solid Highlight; }
  .cm-progression__cadre::after { border-color: CanvasText; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME CLAIR — le plateau en plein jour
   ───────────────────────────────────────────────────────────────────────
   Même plateau, mêmes motifs : seules la matière et la lumière changent.
   Les jetons de base.css et page.css font l'essentiel ; ce bloc règle
   ce qu'ils ne peuvent pas dire.

   · Les lueurs orange étaient les lampes de la salle de nuit. Sur le
     papier, une lueur floute le texte et salit le fond : elles tombent
     presque à rien, sauf là où elles désignent quelque chose (la pièce
     sous le projecteur, le jour publié, l'étape atteinte).
   · Les dalles de verre deviennent des feuilles un peu plus blanches
     que le sol, posées sur une ombre chaude et courte — jamais noire.
   · Les oranges clairs (#FF7A3D, #FFA98B…) ne tenaient le contraste que
     sur la nuit : sur le papier, ils passent à l'orange profond.
   · Le téléphone reste sombre : c'est un objet, et un écran de
     téléphone est noir de jour comme de nuit. Ses jetons sont épinglés
     à leurs valeurs sombres, comme le fait promo.css pour le bandeau.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Hero ────────────────────────────────────────────────────────────
   La torche en fusion « screen » n'ajoute rien à du blanc : elle devient
   une ombre colorée (multiply), deux fois plus légère.                */
:root[data-theme="light"] .cm-torche {
  background: radial-gradient(500px circle at var(--tx, 50%) var(--ty, 40%),
    rgba(233,78,26,.13) 0%, rgba(233,78,26,.045) 38%, transparent 72%);
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .cm-hero h1 em { text-shadow: none; }
:root[data-theme="light"] .cm-tele span::before,
:root[data-theme="light"] .cm-preuve span::before { box-shadow: 0 0 6px rgba(233,78,26,.35); }

/* ─── Les feuilles ─────────────────────────────────────────────────── */
:root[data-theme="light"] .cm-role,
:root[data-theme="light"] .cm-outil { background: #FBF9F5; }
:root[data-theme="light"] .cm-role:hover,
:root[data-theme="light"] .cm-outil:hover { background: #FFFFFF; }

:root[data-theme="light"] .cm-presta,
:root[data-theme="light"] .cm-support,
:root[data-theme="light"] .cm-relance,
:root[data-theme="light"] .cm-pont,
:root[data-theme="light"] .cm-devis__cadre,
:root[data-theme="light"] .cm-progression__cadre { box-shadow: 0 24px 60px -36px rgba(60,35,20,.28); }
/* Le survol garde son accent orange, en ombre portée plutôt qu'en halo. */
:root[data-theme="light"] .cm-presta:hover { box-shadow: 0 28px 60px -32px rgba(193,61,18,.34); }
:root[data-theme="light"] .cm-support:hover {
  box-shadow: -26px 30px 60px -40px rgba(60,35,20,.45), 0 0 50px -30px rgba(233,78,26,.3);
}
/* Balayage et lueur de pointeur : un voile clair ne se voit pas sur une
   feuille blanche, un voile d'encre la salit — ils deviennent orange. */
:root[data-theme="light"] .cm-presta::after {
  background: linear-gradient(105deg, transparent 38%, rgba(233,78,26,.07) 50%, transparent 62%);
}
:root[data-theme="light"] .cm-presta__lueur {
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(233,78,26,.08), rgba(233,78,26,.03) 45%, transparent 65%);
}

/* ─── Vitrine ─────────────────────────────────────────────────────────
   Le projecteur devient un lavis : même trapèze, deux fois plus léger. */
:root[data-theme="light"] .cm-piece__faisceau {
  background: linear-gradient(to top, rgba(233,78,26,.23), rgba(233,78,26,.05) 45%, transparent 78%);
}
:root[data-theme="light"] .cm-piece.is-front .cm-slot {
  box-shadow: 0 0 40px -14px rgba(233,78,26,.35), 0 26px 44px -30px rgba(60,35,20,.45);
}
:root[data-theme="light"] .cm-slot__todo { color: var(--scr-orange-d); }
/* Le compteur des onglets : à .62 d'opacité, l'encre douce tombait sous
   le seuil sur le papier. À .8, il reste en retrait mais se lit.     */
:root[data-theme="light"] .cm-collection em { opacity: .8; }

/* ─── Plan de vol ─────────────────────────────────────────────────── */
:root[data-theme="light"] .cm-etape.is-in .cm-etape__n { box-shadow: 0 0 14px rgba(233,78,26,.22); }
:root[data-theme="light"] .cm-vol__tete { box-shadow: 0 0 10px rgba(233,78,26,.4); }

/* ─── Le téléphone reste un objet sombre ──────────────────────────────
   Voiles et traits épinglés à leurs valeurs de nuit. Le corps devient
   opaque (son dégradé translucide laissait voir le papier au travers)
   et l'ombre orange devient une ombre portée chaude.                 */
:root[data-theme="light"] .cm-tel {
  --scr-encre-rgb: 242,239,234;
  --scr-matiere-rgb: 23,18,15;
  --scr-orange: #E94E1A;
  background: linear-gradient(160deg, #2B2521, #17120F 62%);
  box-shadow: 0 40px 80px -42px rgba(60,35,20,.6), 0 0 60px -30px rgba(233,78,26,.25);
}

/* ─── Calendrier ──────────────────────────────────────────────────────
   Les chiffres des jours restent discrets mais lisibles ; le jour
   publié devient un aplat plein, qui porte son chiffre en blanc.     */
:root[data-theme="light"] .cm-calendrier__jours b,
:root[data-theme="light"] .cm-calendrier__grille i { color: var(--scr-on-night-faint); }
:root[data-theme="light"] .cm-calendrier.is-in .cm-calendrier__grille span[data-post] {
  background: var(--scr-orange);
  box-shadow: 0 4px 10px -5px rgba(193,61,18,.55);
}
:root[data-theme="light"] .cm-calendrier.is-in .cm-calendrier__grille span[data-post="2"] {
  background: rgba(233,78,26,.2);
  box-shadow: none;
}
:root[data-theme="light"] .cm-calendrier.is-in .cm-calendrier__grille span[data-post="2"] i { color: var(--scr-orange-d); }
:root[data-theme="light"] .cm-calendrier__puce { background: var(--scr-orange); box-shadow: none; }

/* ─── Entonnoir ───────────────────────────────────────────────────── */
:root[data-theme="light"] .cm-etage__tag { color: var(--scr-orange-d); }

/* ─── Devis ───────────────────────────────────────────────────────── */
:root[data-theme="light"] .cm-devis__cadre::before {
  background: radial-gradient(ellipse at center, rgba(233,78,26,.10), transparent 68%);
}
/* Le champ reste la surface la plus claire du panneau : blanc franc,
   au repos comme au focus (l'anneau orange suffit à le désigner).
   La case d'accord est exclue : son dessin vit dans ::before, et un
   fond blanc peindrait sa cible de 44 px.                          */
:root[data-theme="light"] .cm-champ input:not([type="checkbox"]),
:root[data-theme="light"] .cm-champ select,
:root[data-theme="light"] .cm-champ textarea { background-color: #FFFFFF; }
:root[data-theme="light"] .cm-champ input[aria-invalid="true"],
:root[data-theme="light"] .cm-champ select[aria-invalid="true"],
:root[data-theme="light"] .cm-champ textarea[aria-invalid="true"],
:root[data-theme="light"] .cm-consentement input[aria-invalid="true"]::before { border-color: var(--scr-orange); }
:root[data-theme="light"] .cm-erreur { color: var(--scr-orange-d); }
:root[data-theme="light"] .cm-secteur input:checked + label::before { box-shadow: 0 0 6px rgba(233,78,26,.35); }
:root[data-theme="light"] .cm-bilan {
  border-color: rgba(193,61,18,.45);
  background: rgba(233,78,26,.06);
  color: #8A2E0E;
}
@media (min-width: 861px) {
  :root[data-theme="light"] .cm-barre { box-shadow: 0 20px 50px -24px rgba(60,35,20,.35); }
}

/* ─── Les deux courbes ────────────────────────────────────────────── */
:root[data-theme="light"] .cm-progression__kpi[aria-pressed="true"] { box-shadow: 0 6px 16px -10px rgba(193,61,18,.5); }
:root[data-theme="light"] .cm-progression__cadre {
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(233,78,26,.07), transparent 62%),
    rgba(255,255,255,.55);
}
:root[data-theme="light"] .cm-progression__avec { filter: drop-shadow(0 2px 3px rgba(193,61,18,.2)); }
:root[data-theme="light"] .cm-progression__bout { filter: drop-shadow(0 0 4px rgba(233,78,26,.3)); }
:root[data-theme="light"] .cm-progression__lib--gain { background: rgba(251,249,245,.92); color: var(--scr-orange-d); }
:root[data-theme="light"] .cm-progression__axe { color: var(--scr-on-night-faint); }

/* Contraste forcé : les ombres du thème clair ne doivent pas y revenir. */
@media (forced-colors: active) {
  :root[data-theme="light"] .cm-progression__avec,
  :root[data-theme="light"] .cm-progression__bout { filter: none; }
}