/* ══════════════════════════════════════════════════════════════════════════
   CHROME DE TUNNEL — la progression en haut, la commande en bas.
   ══════════════════════════════════════════════════════════════════════════

   ══ POURQUOI CE FICHIER EXISTE ══
   Deux tunnels publics posent le même problème et méritent la même réponse :

     /demande      — une page, les étapes commutées par le script ;
     /consultation — une étape par chargement, formulaires classiques.

   Leurs contenus n'ont rien en commun et le resteront : `.dmd-*` d'un côté,
   `.cw-*` de l'autre. Ce qui est commun, c'est le CADRE — la barre de
   progression collante, la barre d'actions collante, le résumé du choix, la
   réserve d'encoche, le décalage de la bulle d'assistance. Ces quinze règles
   étaient écrites dans le gabarit de /demande ; les recopier dans celui de
   /consultation aurait garanti qu'elles divergent au premier correctif.

   ══ CE QUE CE FICHIER NE FAIT PAS ══
   Il n'habille aucun bouton, aucune carte, aucun champ. Il ne connaît ni
   `.dmd-`, ni `.cw-`. Chaque tunnel garde son apparence et n'emprunte ici que
   la mécanique du cadre. Étendre ce fichier au-delà de ça le transformerait en
   système de design partagé — un chantier qui n'est pas ouvert, et dont le
   risque dépasserait de loin le gain.

   ══ POURQUOI STICKY ET NON FIXED ══
   `position: sticky` s'arrête à la fin du bloc parent. La barre suit donc le
   lecteur pendant tout le tunnel, puis LIBÈRE le pied de page du site —
   newsletter, liens, mentions — au lieu de le masquer à demeure.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── En-tête : la progression suit le regard ───────────────────────────── */
/* Aucune marge négative ici. Le premier jet en posait une pour éviter un
   liseré aux angles arrondis, et faisait déborder le document de 3 px —
   mesuré. Le fond blanc sur fond blanc rend ce liseré invisible de toute
   façon : la marge ne réglait rien et coûtait un débordement. */
.wz-head {
  position: sticky; top: 0; z-index: 20;
  background: #fff;
  padding: .85rem 0 .6rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #eef1ee;
}

/* ── Pied : la commande de l'étape ─────────────────────────────────────── */
.wz-foot {
  position: sticky; bottom: 0; z-index: 25;
  margin-top: 1.75rem;
  background: #fff;
  border-top: 1px solid #eef1ee;
  /* Sur iOS, la barre d'adresse mange le bas de l'écran : sans cette réserve
     le bouton se retrouve dessous, donc intouchable. */
  padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 24px -22px rgba(11, 61, 46, .55);
}
.wz-foot__in  { display: flex; align-items: center; gap: .9rem; }
.wz-foot__act { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.wz-foot__save{ margin-top: .35rem; text-align: right; min-height: 1rem; }

/* ── Résumé de la sélection ────────────────────────────────────────────── */
.wz-sum       { min-width: 0; flex: 1 1 auto; font-size: .85rem; }
.wz-sum__hint { color: #94a3b8; }
.wz-sum__box  { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.wz-sum__ck   {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: #0b3d2e; color: #fff; display: grid; place-items: center; font-size: .62rem;
}
.wz-sum__txt  { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.wz-sum__k    { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
                color: #94a3b8; font-weight: 700; }
.wz-sum__v    { font-weight: 700; color: #0b3d2e;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-sum__d    { font-size: .72rem; color: #64748b; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Le résumé passe au-dessus quand les deux ne tiennent pas côte à côte ;
     au-delà, ils restent sur une seule ligne. */
  .wz-foot__in  { flex-wrap: wrap; gap: .5rem; }
  .wz-foot__act { width: 100%; margin-left: 0; }
  .wz-head      { padding-top: .6rem; }
}

/* ══ DEUX ÉLÉMENTS FLOTTANTS, UN SEUL COIN ══
   L'assistant du site (`#csbot-btn`) est fixé en bas à droite, à 18 px du
   bord, par-dessus tout (z-index 9998). Mesuré : son cercle de 56 px
   recouvrait le bouton principal sur téléphone comme sur bureau — le geste
   central du tunnel se trouvait sous un bouton d'aide.

   La règle s'accroche à la PRÉSENCE de la barre d'actions, pas au nom d'un
   tunnel : tout écran qui adopte ce cadre décale la bulle sans avoir à
   modifier ce fichier, et les pages ordinaires n'y touchent pas.

   ══ LA POSITION EST MESURÉE, PLUS DEVINÉE ══
   Deux tentatives ont échoué avant celle-ci, et elles méritent d'être écrites
   pour qu'on ne les refasse pas :

   1. Une constante de 4,75 rem. Fausse dès que le résumé passe à la ligne —
      la barre fait 71 px sur bureau, 99 px sur téléphone, jusqu'à 121 px à
      320 px de large. La bulle retombait sur le bouton.
   2. La HAUTEUR réelle de la barre. Exacte tant que la barre est COLLÉE au
      bas de la fenêtre, mais `position: sticky` la libère quand elle atteint
      la fin de sa carte : mesuré à 390 px, un choix fait en bas de liste
      plaçait la barre à 193 px du bas, et la bulle atterrissait dessus.

   `--wz-bot-lift` est donc publiée par `public_wizard.js` à partir de la
   POSITION de la barre à l'instant présent, collée ou libérée. La valeur de
   repli reste généreuse pour le cas — sans conséquence fonctionnelle — où le
   script ne s'exécute pas.

   ══ AUCUNE TRANSITION ICI ══
   Le premier jet animait ce déplacement sur 180 ms. La position de la bulle
   n'est pas un état à célébrer : elle découle de la mise en page, et l'animer
   la ferait glisser à chaque défilement. */
body:has(.wz-foot) #csbot-btn {
  bottom: calc(var(--wz-bot-lift, 9rem) + env(safe-area-inset-bottom, 0px));
}