/* ==========================================================================
 *  LE PARCOURS D'ENTRÉE
 * ==========================================================================
 *
 *  CE QUE CETTE PAGE DOIT FAIRE, ET CE N'EST PAS « COLLECTER DES DONNÉES »
 *  ----------------------------------------------------------------------
 *  C'est le premier contact. Avant d'avoir vu une seule réponse, la personne
 *  se fait une idée de ce qu'O.R.I.O.N est — soigneuse ou bâclée, rapide ou
 *  laborieuse, sûre d'elle ou hésitante. Un formulaire en quatre écrans gris
 *  dit « logiciel administratif » et aucune réponse brillante ne le rattrape
 *  ensuite.
 *
 *  D'où le travail d'animation. Il n'est pas décoratif : il est le premier
 *  argument.
 *
 *  LES TROIS GESTES
 *  ----------------
 *  1. LA MATÉRIALISATION. Chaque volet n'apparaît pas : il se condense. Flou
 *     qui se dissipe, échelle qui se pose, et les enfants arrivent en
 *     cascade. C'est ce décalage entre les enfants qui fait la différence
 *     entre « ça s'affiche » et « ça arrive ».
 *
 *  2. LA CONSTELLATION. L'avancement est un tracé d'Orion qui se dessine.
 *     Une barre rectangulaire aurait fait le même travail sans rien raconter.
 *
 *  3. L'ACTIVATION. Trois anneaux qui partent de l'orbe au moment où le
 *     compte s'ouvre. C'est le seul instant du parcours qui mérite une
 *     célébration, et il ne dure qu'une seconde et demie.
 *
 *  Tout hérite de `app.css` : mêmes variables de ciel, même verre, même
 *  charte. Rien ici ne redéfinit une couleur.
 * ========================================================================== */

body.accueil-orion {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ========================= LA CONSTELLATION ========================= */
.constellation {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 16px 10px;
  pointer-events: none;
}

/*  CE QUI PASSE DESSOUS DOIT S'EFFACER, PAS SE SUPERPOSER.
 *
 *  La constellation est fixe : dès qu'un volet dépasse la hauteur de l'écran
 *  — sur un téléphone, c'est le cas courant — le contenu défile DERRIÈRE
 *  elle. Sans rien entre les deux, « TA CONSOMMATION » se posait exactement
 *  sur « COMPRIS CHAQUE MOIS » et les deux devenaient illisibles.
 *
 *  On ne peut pas peindre une barre opaque : le ciel a son propre dégradé,
 *  ses nuages et ses étoiles, et un bandeau plat se verrait comme une
 *  cicatrice au milieu. On FLOUTE donc l'arrière-plan au lieu de le couvrir —
 *  le ciel garde ses couleurs, le texte qui passe dessous se dissout — et le
 *  flou lui-même s'efface vers le bas, pour qu'il n'y ait aucune ligne de
 *  démarcation à voir.
 */
.constellation::before {
  content: '';
  /*  Il DÉBORDE sous le nom de l'étape (-22px) : le dégradé doit finir de
   *  s'éteindre APRÈS le dernier texte de la barre, sinon le nom de l'étape
   *  se retrouve justement dans la zone déjà redevenue transparente — et il
   *  se pose alors en clair sur le contenu, ce qu'on voulait éviter. */
  position: absolute; inset: -1px 0 -22px; z-index: -1;
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  pointer-events: none;
}
.constellation svg { width: min(420px, 84vw); height: 64px; overflow: visible; }

.trait-fond {
  stroke: var(--ciel-bord, rgba(255,255,255,.14));
  stroke-width: 1.2;
}
/*  Le trait parcouru se DESSINE : on anime la longueur du tiret, ce qui donne
 *  un tracé qui avance au lieu d'un segment qui apparaît. */
.trait-fait {
  stroke: var(--ciel-accent, #6ee7ff);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--ciel-accent, #6ee7ff));
  transition: stroke-dashoffset .9s var(--elan);
}

.etoile { transition: r .5s var(--elan), opacity .5s var(--elan); }
.etoile .halo { fill: var(--ciel-accent, #6ee7ff); opacity: 0; transition: opacity .5s var(--elan); }
.etoile .coeur { fill: var(--ciel-texte-doux, rgba(238,243,248,.35)); transition: fill .5s var(--elan); }
.etoile.faite .coeur { fill: var(--ciel-accent, #6ee7ff); }
.etoile.ici .coeur { fill: #fff; }
.etoile.ici .halo { opacity: .22; animation: pulseEtoile 2.4s ease-in-out infinite; }
@keyframes pulseEtoile {
  0%, 100% { opacity: .16; transform: scale(1); }
  50%      { opacity: .34; transform: scale(1.25); }
}

.etape-nom {
  margin-top: 2px;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ciel-texte-doux, rgba(238,243,248,.55));
  transition: opacity .35s var(--elan);
}

/* ============================= LES VOLETS ============================= */
.scene-accueil {
  position: relative; z-index: 1;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 116px 20px 64px;
}

.volet {
  grid-area: 1 / 1;            /* tous empilés : un seul est visible */
  width: 100%; max-width: 560px;
  display: none;
  flex-direction: column;
  align-items: stretch;
}
.volet.actif { display: flex; }
.volet.centre { align-items: center; text-align: center; }

.volet h1 {
  font-size: clamp(1.6rem, 4.4vw, 2.1rem);
  font-weight: 660; letter-spacing: -.02em; line-height: 1.2;
  color: var(--ciel-texte, #fff);
}
.volet .sous {
  margin-top: 10px; font-size: .98rem; line-height: 1.55;
  color: var(--ciel-texte-doux, rgba(238,243,248,.72));
}
.volet-orbe { display: flex; justify-content: center; margin-bottom: 18px; }
.orbe-accueil { width: clamp(150px, 19vh, 190px); aspect-ratio: 1; height: auto; }
.orbe-accueil.grand { width: 160px; height: 160px; margin-bottom: 20px; }

/*  LA MATÉRIALISATION.
 *
 *  Le flou qui se dissipe est ce qui distingue « ça arrive » de « ça
 *  apparaît ». Le décalage entre enfants (`--n`) est posé en JavaScript : une
 *  cascade fixe en CSS obligerait à écrire un `nth-child` par élément, et
 *  chaque volet a un nombre différent d'enfants. */
.apparait {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(7px);
}
.volet.actif .apparait {
  animation: condenser .62s var(--elan) forwards;
  animation-delay: calc(var(--n, 0) * 90ms + 60ms);
}
@keyframes condenser {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/*  La sortie : l'inverse, en deux fois plus rapide. Une sortie aussi lente
 *  que l'entrée donne l'impression d'un logiciel qui traîne. */
.volet.sortie { display: flex; animation: dissoudre .28s var(--elan) forwards; }
@keyframes dissoudre {
  to { opacity: 0; transform: translateY(-16px) scale(.99); filter: blur(6px); }
}

/* ============================ LES CHAMPS ============================ */
.formulaire { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.champ-hote { display: flex; flex-direction: column; gap: 6px; }
.champ-hote > span {
  font-size: .8rem; font-weight: 560;
  color: var(--ciel-texte-doux, rgba(238,243,248,.72));
}
.champ-hote input {
  padding: 13px 15px; border-radius: var(--r-m);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.15));
  background: var(--ciel-verre, rgba(0,0,0,.24));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ciel-texte, #eef3f8);
  font: inherit; font-size: 1rem;
  transition: border-color .2s var(--elan), box-shadow .2s var(--elan);
}
.champ-hote input:focus {
  outline: 0;
  border-color: var(--ciel-accent-trait, rgba(110,231,255,.55));
  box-shadow: 0 0 0 4px var(--ciel-accent-doux, rgba(110,231,255,.12));
}
.champ-hote .aide {
  font-size: .78rem; font-style: normal;
  color: var(--ciel-texte-doux, rgba(238,243,248,.5));
}

.jauge-mdp { display: flex; gap: 4px; margin-top: 2px; }
.jauge-mdp i {
  flex: 1; height: 3px; border-radius: 99px;
  background: var(--ciel-bord, rgba(255,255,255,.14));
  transition: background .3s var(--elan);
}
.jauge-mdp.n1 i:nth-child(1) { background: #ff7a7a; }
.jauge-mdp.n2 i:nth-child(-n+2) { background: #f0b429; }
.jauge-mdp.n3 i:nth-child(-n+3) { background: #6ee7ff; }
.jauge-mdp.n4 i { background: #3ddc97; }

/* ----------------------------- LA CASE À COCHER ------------------------- */
/*
 *  `accent-color` ne fait que TEINTER la case du système : elle garde sa
 *  forme, son bleu de bordure et son coin carré, et jure avec tout le reste
 *  de l'écran. On la dessine donc, sans rien perdre de ce qu'elle sait faire.
 *
 *  ON NE REMPLACE PAS LA CASE, ON LA REND INVISIBLE.
 *  La vraie `<input type="checkbox">` reste en place, à sa taille, par-dessus
 *  le dessin : le clavier l'atteint par Tab, la barre d'espace la coche, les
 *  lecteurs d'écran l'annoncent, `required` bloque l'envoi du formulaire, et
 *  le clic sur le libellé fonctionne comme toujours. Une case redessinée en
 *  `<div>` perd tout cela d'un coup, et personne ne s'en aperçoit avant qu'un
 *  utilisateur au clavier ne puisse plus créer de compte.
 */
.case { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem;
        color: var(--ciel-texte-doux, rgba(238,243,248,.75));
        cursor: pointer; user-select: none; }
.case a { color: var(--ciel-accent, #6ee7ff); }

.case input {
  appearance: none; -webkit-appearance: none;
  margin: 2px 0 0; width: 19px; height: 19px; flex: none;
  border-radius: 6px; cursor: pointer;
  border: 1.5px solid rgba(238, 243, 248, .32);
  background: rgba(255, 255, 255, .04);
  display: grid; place-content: center;
  transition: background .18s var(--elan, ease), border-color .18s var(--elan, ease),
              box-shadow .18s var(--elan, ease);
}
.case input:hover { border-color: var(--ciel-accent-trait, rgba(110,231,255,.55)); }

/*  La coche est dessinée par un ::before, et RÉVÉLÉE par `clip-path` plutôt
 *  qu'apparue d'un bloc : elle se trace de gauche à droite, comme une main
 *  qui la pose. */
.case input::before {
  content: ''; width: 11px; height: 11px;
  clip-path: polygon(14% 46%, 0 60%, 39% 100%, 100% 22%, 86% 8%, 38% 70%);
  transform: scale(0); transform-origin: center;
  background: var(--ciel-encre, #05070c);
  transition: transform .16s var(--elan, ease);
}
.case input:checked {
  background: var(--ciel-accent, #6ee7ff);
  border-color: var(--ciel-accent, #6ee7ff);
}
.case input:checked::before { transform: scale(1); }
.case input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(110, 231, 255, .32);
  border-color: var(--ciel-accent, #6ee7ff);
}
/*  Un formulaire envoyé sans la case cochée : le navigateur la signale. On
 *  rend ce signal visible au lieu de le laisser au style par défaut. */
.case input:invalid:not(:focus) { border-color: rgba(255, 122, 122, .5); }
@media (prefers-reduced-motion: reduce) {
  .case input, .case input::before { transition: none }
}

.erreur {
  padding: 11px 14px; border-radius: var(--r-m);
  border: 1px solid rgba(255,122,122,.36);
  background: rgba(255,90,90,.10);
  color: #ffc0c0; font-size: .87rem;
  animation: secouer .38s var(--elan);
}
/*  L'erreur SECOUE. Trois pixels, deux allers-retours : assez pour qu'on la
 *  voie apparaître même si le regard était ailleurs, trop peu pour agacer. */
@keyframes secouer {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.duo-boutons { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.duo-boutons .btn-plein { flex: 1; }

.btn-plein.large {
  padding: 14px 24px; font-size: .96rem;
  text-align: center; text-decoration: none;
  display: inline-block;
}
.btn-plein:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }

.btn-fantome {
  padding: 13px 20px; border-radius: var(--r-m);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.16));
  background: none; color: var(--ciel-texte-doux, rgba(238,243,248,.72));
  font: inherit; font-size: .92rem; cursor: pointer;
  transition: background .18s var(--elan), color .18s var(--elan);
}
.btn-fantome:hover {
  background: var(--ciel-accent-doux, rgba(255,255,255,.07));
  color: var(--ciel-texte, #fff);
}

/* ============================== LES PLANS ============================== */
.plans { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }

.plan {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 15px 18px; border-radius: var(--r-l);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.13));
  background: var(--ciel-verre, rgba(255,255,255,.035));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: transform .22s var(--elan), border-color .22s var(--elan),
              background .22s var(--elan);
}
.plan:hover { transform: translateY(-2px); border-color: var(--ciel-accent-trait, rgba(110,231,255,.4)); }
.plan[aria-pressed="true"] {
  border-color: var(--pc, var(--ciel-accent, #6ee7ff));
  background: var(--ciel-accent-doux, rgba(110,231,255,.10));
  box-shadow: 0 0 0 1px var(--pc, var(--ciel-accent, #6ee7ff)) inset;
}

.plan .pastille {
  width: 11px; height: 11px; border-radius: 99px; flex: none;
  background: var(--pc, var(--ciel-accent, #6ee7ff));
  box-shadow: 0 0 12px var(--pc, var(--ciel-accent, #6ee7ff));
}
/*  Le titre et l'accroche s'EMPILENT.
 *
 *  Sans `display: block`, deux <span> côte à côte dans un conteneur en grille
 *  restent sur la même ligne et se collent : « GRATUITPour voir ce que ça
 *  fait ». Ça se lit comme un défaut de données alors que c'est une ligne de
 *  CSS manquante. */
.plan .titre {
  display: block; font-weight: 660; font-size: 1rem;
  color: var(--ciel-texte, #fff);
}
.plan .accroche {
  display: block; font-size: .83rem; margin-top: 2px;
  color: var(--ciel-texte-doux, rgba(238,243,248,.66));
}
.plan .prix {
  text-align: right; font-weight: 660; font-size: 1.04rem; white-space: nowrap;
  color: var(--pc, var(--ciel-accent, #6ee7ff));
}
.plan .prix small {
  display: block; font-weight: 450; font-size: .7rem;
  color: var(--ciel-texte-doux, rgba(238,243,248,.5));
}

/* ============================= LES CRÉDITS ============================= */
.cadran {
  margin-top: 26px; padding: 24px 22px; border-radius: var(--r-xl);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.13));
  background: var(--ciel-verre, rgba(255,255,255,.035));
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
/*  LA BASE est l'information principale de l'écran : c'est ce qui est compris,
 *  et ce que la plupart des gens garderont tel quel. Le supplément, lui, est
 *  une option — il a donc un traitement plus discret, plus bas. */
.etiquette-base {
  display: block; margin-bottom: 4px;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ciel-texte-doux, rgba(238,243,248,.5));
}
.montant { text-align: center; }
.montant.petit output { font-size: clamp(1.5rem, 5vw, 2rem); }
.montant output {
  display: block;
  font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 680; letter-spacing: -.03em;
  color: var(--ciel-accent, #6ee7ff);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px var(--ciel-accent-doux, rgba(110,231,255,.5));
}
.montant .par-mois {
  font-size: .82rem; color: var(--ciel-texte-doux, rgba(238,243,248,.55));
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin: 22px 0 8px;
  height: 4px; border-radius: 99px;
  background: var(--ciel-bord, rgba(255,255,255,.16));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 99px;
  background: var(--ciel-accent, #6ee7ff);
  border: 3px solid var(--ciel-surface, #0b1119);
  box-shadow: 0 0 16px var(--ciel-accent, #6ee7ff);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 99px;
  background: var(--ciel-accent, #6ee7ff);
  border: 3px solid var(--ciel-surface, #0b1119);
  box-shadow: 0 0 16px var(--ciel-accent, #6ee7ff);
  cursor: grab;
}
.bornes {
  display: flex; justify-content: space-between;
  font-size: .76rem; color: var(--ciel-texte-doux, rgba(238,243,248,.5));
}

.traduction {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--ciel-bord, rgba(255,255,255,.09));
  display: grid; gap: 9px; list-style: none;
}
.traduction li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: .88rem; color: var(--ciel-texte-doux, rgba(238,243,248,.75));
}
.traduction li b {
  color: var(--ciel-texte, #fff); font-variant-numeric: tabular-nums;
  min-width: 68px; text-align: right;
  flex: none;                 /* sinon « ~26 400 » se coupe sur un téléphone */
}
/*  Le moteur gratuit n'annonce pas un nombre mais son absence de limite. Le
 *  signe reprend l'accent pour qu'on le lise comme une bonne nouvelle et non
 *  comme une donnée manquante. */
.traduction li b.sans-fin {
  color: var(--ciel-accent, #6ee7ff); font-size: 1.2em; line-height: 1;
}

.note-echange {
  margin-top: 14px; font-size: .78rem; line-height: 1.5;
  color: var(--ciel-texte-doux, rgba(238,243,248,.5));
}

.total { margin-top: 20px; text-align: center; font-size: .95rem;
         color: var(--ciel-texte-doux, rgba(238,243,248,.72)); }
.total b { color: var(--ciel-texte, #fff); font-size: 1.12rem; }
.total em {
  display: block; margin-top: 3px; font-style: normal; font-size: .8rem;
  color: var(--ciel-texte-doux, rgba(238,243,248,.5));
}

/* ------------------------------ le supplément ------------------------------ */
.supplement {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r-l);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.12));
  background: var(--ciel-verre, rgba(255,255,255,.025));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bascule-sup {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  cursor: pointer;
}
.bascule-sup input { position: absolute; opacity: 0; width: 44px; height: 25px; margin: 0; cursor: pointer; }
.bascule-sup .piste-b {
  position: relative; flex: none; width: 44px; height: 25px; margin-top: 2px;
  border-radius: 99px; background: var(--ciel-bord, rgba(255,255,255,.16));
  transition: background .24s var(--elan);
}
.bascule-sup .bille {
  position: absolute; left: 3px; top: 5px;
  width: 19px; height: 19px; border-radius: 99px; background: #fff;
  transition: transform .26s var(--elan);
}
.bascule-sup input:checked ~ .piste-b { background: var(--ciel-accent, #6ee7ff); }
.bascule-sup input:checked ~ .bille { transform: translateX(19px); }
.bascule-sup input:focus-visible ~ .piste-b {
  box-shadow: 0 0 0 3px var(--ciel-accent-doux, rgba(110,231,255,.4));
}
.txt-sup b { display: block; font-size: .93rem; color: var(--ciel-texte, #eef3f8); }
.txt-sup em {
  display: block; margin-top: 3px; font-style: normal; font-size: .82rem;
  color: var(--ciel-texte-doux, rgba(238,243,248,.6));
}

/*  Le corps se DÉPLIE : il n'apparaît pas d'un coup, il pousse le reste vers
 *  le bas. Un panneau qui surgit déplace le regard ; un panneau qui s'ouvre
 *  l'emmène. */
.sup-corps {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--ciel-bord, rgba(255,255,255,.09));
  animation: deplier .34s var(--elan);
}
@keyframes deplier {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================ L'ACTIVATION ============================ */
.activation { position: relative; width: 190px; height: 190px; margin-bottom: 26px; }
.orbe-activation { position: absolute; inset: 22px; }

/*  TROIS ANNEAUX qui partent de l'orbe. Décalés d'un tiers de cycle pour
 *  qu'il y en ait toujours un en train de naître pendant qu'un autre
 *  s'éteint — sans ce décalage, on obtient un battement, c'est-à-dire un
 *  clignotement. */
.anneaux { position: absolute; inset: 0; }
.anneaux i {
  position: absolute; inset: 0;
  border: 1.5px solid var(--ciel-accent, #6ee7ff);
  border-radius: 99px;
  opacity: 0;
  animation: onde 2.4s var(--elan-doux) infinite;
}
.anneaux i:nth-child(2) { animation-delay: .8s; }
.anneaux i:nth-child(3) { animation-delay: 1.6s; }
@keyframes onde {
  0%   { transform: scale(.42); opacity: 0; }
  12%  { opacity: .58; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============================ LE QUESTIONNAIRE ============================ */
.questions { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.question-bloc > .libelle-q {
  display: block; margin-bottom: 10px;
  font-size: .94rem; font-weight: 580; color: var(--ciel-texte, #eef3f8);
}
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille-choix {
  padding: 9px 15px; border-radius: 99px;
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.14));
  background: var(--ciel-verre, rgba(255,255,255,.03));
  color: var(--ciel-texte-doux, rgba(238,243,248,.78));
  font: inherit; font-size: .87rem; cursor: pointer;
  transition: transform .18s var(--elan), border-color .18s var(--elan),
              background .18s var(--elan), color .18s var(--elan);
}
.pastille-choix:hover { transform: translateY(-2px); }
.pastille-choix[aria-pressed="true"] {
  border-color: var(--ciel-accent, #6ee7ff);
  background: var(--ciel-accent-doux, rgba(110,231,255,.14));
  color: var(--ciel-texte, #fff);
}
.question-bloc input[type="text"], .question-bloc textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-m);
  border: 1px solid var(--ciel-bord, rgba(255,255,255,.14));
  background: var(--ciel-verre, rgba(0,0,0,.22));
  color: var(--ciel-texte, #eef3f8);
  font: inherit; font-size: .93rem; resize: vertical;
}
.question-bloc input:focus, .question-bloc textarea:focus {
  outline: 0; border-color: var(--ciel-accent-trait, rgba(110,231,255,.5));
}

/* ================================ TÉLÉPHONE ================================ */
@media (max-width: 620px) {
  .scene-accueil { padding: 104px 16px 48px; align-items: start; }
  .duo { grid-template-columns: 1fr; }
  .duo-boutons { flex-direction: column-reverse; align-items: stretch; }
  .duo-boutons .btn-fantome { width: 100%; }
  .constellation svg { height: 52px; }
  .orbe-accueil { width: clamp(124px, 28vw, 150px); height: auto; }
  .activation { width: 156px; height: 156px; }
  /*  16 px minimum : en dessous, iOS zoome à la mise au point et décale toute
   *  la page au moment précis où l'on remplit un formulaire. */
  .champ-hote input, .question-bloc input, .question-bloc textarea { font-size: 16px; }
  .plan { grid-template-columns: auto 1fr; }
  .plan .prix { grid-column: 2; text-align: left; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .apparait, .volet.actif .apparait { animation: none; opacity: 1; transform: none; filter: none; }
  .anneaux i { animation: none; opacity: .2; }
  .etoile.ici .halo { animation: none; opacity: .25; }
}

/* ---------------------------- LES CONFETTIS ----------------------------- */
/*  ILS VIVENT ICI, ET NULLE PART AILLEURS.
 *
 *  Ces règles étaient dans `app.css`, la feuille partagée, où l'application
 *  s'en servait pour fêter CHAQUE réponse terminée. Une réponse qui se
 *  termine arrive vingt fois par heure : la fête y était devenue du bruit, et
 *  elle a été remplacée par une simple vrille de la bulle.
 *
 *  Terminer son installation, en revanche, n'arrive qu'une fois. C'est
 *  exactement l'événement rare que des confettis sont faits pour marquer. Ils
 *  restent donc — mais sur la page qui les emploie, pour que personne ne les
 *  reprenne ailleurs sans se demander si l'occasion le mérite. */
.confetti {
  position: absolute; width: 7px; height: 11px; border-radius: 2px;
  animation: tomber var(--duree, 1.5s) var(--elan-doux, cubic-bezier(.22,.61,.36,1)) forwards;
}
@keyframes tomber {
  0%   { opacity: 0; transform: translate3d(0,0,0) rotate(0deg) scale(.6); }
  12%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate3d(var(--dx, 0), var(--dy, 240px), 0)
                    rotate(var(--rot, 420deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
}

/*  La couche où ils tombent. Elle était dans `app.css` du temps où
 *  l'application fêtait aussi ; elle n'a plus qu'un seul usage, elle vit donc
 *  auprès de lui. */
#fete { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/*  L'essai déjà utilisé (même adresse, même appareil) : la carte reste
 *  visible — on dit pourquoi — mais ne se choisit plus. */
.plan:disabled, .plan.indisponible {
  cursor: not-allowed; opacity: .55; transform: none;
  border-style: dashed;
}
.plan:disabled:hover { transform: none; border-color: var(--ciel-bord, rgba(255,255,255,.13)); }