/* =========================================================================
   M2.AGENCY — LE CONFIGURATEUR
   Feuille UNIQUE des trois parcours : particulier, entreprise, apporteur.

   Reecrite d'un bloc le 2026-08-24. Les versions precedentes s'etaient
   empilees en couches successives qui se contredisaient : c'est de la que
   revenait le « bloc noir » sur telephone, une regle de survol posee tot
   reprenant la main sur les correctifs poses ensuite. Ici il n'y a plus
   qu'une seule declaration par cas.

   Les regles tenues :
     · tout est centre a l'ecran, question et blocs de reponse ;
     · aucun numero, ni sur les reponses ni sur les questions ;
     · AUCUN changement de fond au survol, au focus ou apres un tap : c'est
       la seule maniere de garantir qu'aucune reponse ne « reste allumee »
       sur ecran tactile, ou l'etat de survol reste colle au doigt ;
     · la reponse retenue se signale par une barre claire a gauche ;
     · un avancement en haut, en segments, plus un simple fil tout en bas.
   ========================================================================= */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2-variations"),
       url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"),
       url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root{
  /* Essai du theme clair mene le 2026-08-24, puis abandonne : on revient au
     sombre. Tout tient dans ce bloc, aucune couleur n'est ecrite ailleurs. */
  --f:#0a0a0b;          /* le fond */
  --c:#121215;          /* les blocs */
  --t:#242429;          /* les filets */
  --t2:#3a3a44;         /* les filets, au survol */
  --i:#f4f4f2;          /* le texte */
  --i2:#8e8e97;         /* le texte secondaire */
  --acc:#f4f4f2;        /* l'accent : blanc */
  --acc-txt:#0a0a0b;
  --e:cubic-bezier(.2,.9,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
html{ overflow-x:hidden; }
body{
  background:var(--f); color:var(--i);
  font-family:Archivo,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }

/* ============================================================== charpente */
.appli{ height:100dvh; display:flex; flex-direction:column; }

.tete{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px clamp(14px,3.4vw,40px); }
.tete .nom{ font-family:Jost,sans-serif; font-size:clamp(17px,2vw,21px);
  font-weight:600; letter-spacing:.01em; }
.tete nav{ display:flex; gap:clamp(12px,2vw,22px); }
.tete nav a{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--i2); }
.tete nav a:hover{ color:var(--i); }

/* ================================================================ ecrans */
.scene{ flex:1; position:relative; min-height:0; }
.ecran{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center;
  /* « safe center » : centre tant que ca rentre, et repart du HAUT des que le
     contenu deborde. Sans ce mot-cle, un ecran plus haut que la fenetre
     s'ouvre a mi-hauteur et son debut devient inatteignable : c'est ce qui
     arrivait sur l'ecran des coordonnees. */
  justify-content:safe center;
  text-align:center; padding:14px clamp(14px,3.4vw,40px) 34px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s linear, transform .26s var(--e), visibility .18s;
}
.ecran.actif{ opacity:1; visibility:visible; transform:none; }

.question{
  font-family:Jost,sans-serif; font-weight:500;
  font-size:clamp(29px,4.2vw,46px); letter-spacing:-.03em; line-height:1.06;
  max-width:18ch; margin:0 auto clamp(16px,2.6vh,26px);
}
.question .compte{ display:none; }
.aide{ font-size:14.5px; color:var(--i2); max-width:42ch; margin:-10px auto 18px; }

/* ============================================================= les blocs */
.choix{ display:grid; gap:8px; width:100%; max-width:520px; min-width:0; margin:0 auto; }
.choix.serre, .choix.large{ grid-template-columns:1fr; }

.opt{
  position:relative;
  display:flex; align-items:center; gap:12px; width:100%; min-width:0;
  min-height:62px; padding:16px 18px; text-align:left;
  background:var(--c);                       /* UNE seule declaration de fond */
  border:1px solid var(--t); border-radius:12px;
  transition:border-color .16s linear;
}
/* Le fond ne bouge dans AUCUN etat : survol, focus, appui, selection.
   C'est ce qui rend impossible la reapparition du « bloc noir ». */
.opt:hover, .opt:focus, .opt:active, .opt.vu{ background:var(--c); }
.opt:hover{ border-color:var(--t2); }
.opt:focus{ outline:none; }
.opt:focus-visible{ outline:2px solid var(--i2); outline-offset:2px; }

/* la reponse retenue : une barre claire a gauche, rien d'autre */
.opt.vu{ border-color:var(--t2); }
.opt.vu::before{ content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:2px; border-radius:2px; background:var(--i); }

.opt .cle{ display:none; }                   /* plus aucune numerotation */
.opt .txt{ flex:1; min-width:0; }
.opt .t{ display:block; font-family:Jost,sans-serif; font-size:18px;
  font-weight:500; letter-spacing:-.015em; }
.opt .d{ display:block; margin-top:3px; font-size:14px; color:var(--i2); line-height:1.4; }
.opt .p{ flex:0 0 auto; font-family:Jost,sans-serif; font-size:16px;
  color:var(--i2); white-space:nowrap; }

/* ============================================================ les champs */
.champs{ display:grid; gap:13px; width:100%; max-width:520px; min-width:0;
  margin:0 auto; text-align:left; }
.champ{ min-width:0; }
.etiq{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--i2); margin-bottom:6px; }
.champ input, .champ textarea{
  width:100%; max-width:100%; min-width:0;
  font:400 16px/1.45 Archivo,sans-serif; color:var(--i);
  background:var(--f); border:1px solid var(--t); border-radius:10px;
  padding:12px 13px; resize:vertical;
}
.champ input:focus, .champ textarea:focus{ outline:0; border-color:var(--t2); }
input[type="date"]{ -webkit-appearance:none; appearance:none; max-width:100%; }
.deux-col{ display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0; }
@media (max-width:560px){ .deux-col{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- la date, refaite
   « Une date en tete ? » et « Moment de la journee » etaient deux etiquettes
   grises empilees, sans forme. Ici : un seul bloc, la date sur une ligne avec
   son icone, les trois moments en segments accoles, comme un selecteur. */
.bloc-date{ display:grid; gap:10px; width:100%; max-width:520px; margin:0 auto;
  padding:14px; border:1px solid var(--t); border-radius:12px; background:var(--c); }
.bloc-date .ligne-date{ position:relative; display:flex; align-items:center; gap:10px;
  min-height:48px; padding:0 2px; }
.bloc-date .ligne-date .icone{ flex:0 0 auto; width:18px; height:18px; color:var(--i2);
  pointer-events:none; }
/* Le champ occupe TOUTE la ligne : c'est lui qu'on touche, pas un fragment. */
.bloc-date .ligne-date input{
  flex:1; min-width:0; width:100%; min-height:48px;
  border:0; background:transparent; padding:0;
  font:400 16px/1.3 Archivo,sans-serif; color:var(--i);
}
.bloc-date .ligne-date input:focus{ outline:0; }
.bloc-date .ligne-date input::-webkit-calendar-picker-indicator{
  margin-left:auto; opacity:.55; filter:invert(1); cursor:pointer;
  width:22px; height:22px;
}
/* L'etiquette ne doit jamais recouvrir la zone tactile du champ. */
/* Le gabarit jj/mm/aaaa doit rester lisible : c'est lui qui dit qu'on attend
   une date. Sur les navigateurs qui ne l'affichent pas, l'etiquette au-dessus
   prend le relais. */
.bloc-date .ligne-date input::-webkit-datetime-edit{ color:var(--i2); }
.bloc-date .ligne-date input:valid::-webkit-datetime-edit{ color:var(--i); }
.bloc-date .etiq{ margin:0 0 2px; }
.bloc-date .segments{ margin-top:4px; }
.bloc-date .sep{ height:1px; background:var(--t); }

/* les trois moments : un segment chacun, colles, comme un interrupteur */
.segments{ display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--t); border-radius:10px; overflow:hidden; }
.segments .creneau{ border:0; border-right:1px solid var(--t); border-radius:0;
  text-align:center; padding:10px 6px; background:transparent; }
.segments .creneau:last-child{ border-right:0; }
.segments .creneau.vu{ background:var(--acc); color:var(--acc-txt); }
.segments .creneau.vu .sous{ color:var(--acc-txt); opacity:.7; }

/* les creneaux : meme regle, le fond ne bouge jamais */
.creneaux{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.creneaux.heures:empty{ display:none; }
.creneau{
  padding:9px 13px; border:1px solid var(--t); border-radius:10px;
  background:var(--f); color:var(--i2); font-family:Jost,sans-serif; font-size:14px;
  text-align:left; transition:border-color .16s linear, color .16s linear;
  -webkit-tap-highlight-color:transparent;
}
.creneau:hover, .creneau:active, .creneau.vu{ background:var(--f); }
.creneau:hover{ border-color:var(--t2); color:var(--i); }
.creneau.vu{ border-color:var(--i); color:var(--i); }
.creneau .sous{ display:block; font-family:Archivo,sans-serif; font-size:10.5px; margin-top:2px; }
.creneau.mince{ border-radius:99px; }

/* ======================================================== recapitulatif */
.recap{ display:grid; width:100%; max-width:520px; min-width:0; margin:0 auto 18px;
  text-align:left; }
.recap .l{ display:flex; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--t); }
.recap .k{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--i2); }
.recap .v{ font-family:Jost,sans-serif; font-size:17px; text-align:right; }

.envoyer{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  margin:0 auto; background:var(--acc); color:var(--acc-txt);
  font-family:Jost,sans-serif; font-size:17.5px; font-weight:600;
  padding:14px 26px; border-radius:99px; transition:filter .16s linear;
}
.envoyer:hover{ filter:brightness(.93); }
.etat{ margin-top:12px; font-size:13px; color:var(--i2); }
.etat[hidden]{ display:none; }
.apres{ margin:12px auto 0; font-size:13.5px; color:var(--i2); text-align:center; }
.urgent{ display:inline-flex; align-items:center; gap:8px; margin:10px auto 0;
  padding:10px 16px; border:1px solid var(--t); border-radius:99px;
  font-size:13.5px; color:var(--i2); }
.urgent:hover{ border-color:var(--t2); color:var(--i); }
.urgent svg{ width:15px; height:15px; }

/* ================================================================= socle */
.socle{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px clamp(14px,3.4vw,40px) 16px; }
.retour{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--i2); }
.retour:hover{ color:var(--i); }
.retour[hidden]{ visibility:hidden; display:inline; }
.pas{ font-size:10.5px; color:var(--i2); font-variant-numeric:tabular-nums; }

/* le fil du bas : deux pixels, colle au bord de l'ecran */
.jauge{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:block; height:2px; background:var(--t); }
.jauge i{ display:block; height:100%; width:0; background:var(--acc);
  transition:width .4s var(--e); }

/* ============================================================= telephone */
@media (max-width:760px){
  .ecran{ padding:10px 16px 26px; }
  .question{ font-size:clamp(26px,7.2vw,34px); max-width:16ch; margin-bottom:18px; }
  .aide{ font-size:12.5px; margin-bottom:14px; }
  .choix, .champs, .recap{ max-width:100%; }
  .opt{ min-height:58px; padding:15px 16px; }
  .opt .t{ font-size:17px; }
  .tete{ padding:12px 16px; }
  .tete nav{ gap:12px; }
  .socle{ padding:8px 16px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .ecran, .opt, .creneau, .jauge i{ transition:none; }
}


/* --------------------------------------------------- l'en-tete, une ligne
   Rien ne doit passer a la ligne ni depasser : le menu se resserre au lieu
   de s'empiler, et le nom de l'agence s'efface des la premiere reponse pour
   rendre l'espace a la question. */
.tete{ flex-wrap:nowrap; }
.tete nav a{ white-space:nowrap; }
.tete .nom{ white-space:nowrap; transition:opacity .25s linear, max-width .3s var(--e); }

.tete nav .avis-lien{ color:var(--i); }
.tete nav .avis-lien:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:420px){
  .tete{ padding:10px 14px; }
  .tete nav{ gap:10px; }
  .tete nav a{ font-size:10.5px; letter-spacing:.08em; }
}


/* Le prix estime ferme le recapitulatif : c'est la ligne qu'on lit en dernier
   et celle qui decide. Elle se detache des autres. */
.recap .l:last-child .k{ color:var(--i); font-weight:700; }
.recap .l:last-child .v{ font-size:19px; }


/* ---------------------------------------------------------- le compteur
   Un seul objet : une gelule bordee qui tient le moins, le chiffre et le
   plus. Le chiffre et son unite sont a l'interieur, pas empiles dessous :
   on lit « 4 personnes » d'un bloc, comme sur un selecteur de voyageurs. */
.bloc-nombre{ width:100%; max-width:360px; margin:0 auto; }

.compteur{
  display:grid; grid-template-columns:52px 1fr 52px; align-items:center;
  gap:6px; padding:8px; border:1px solid var(--t); border-radius:99px;
  background:var(--c);
}
.compteur .pas{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--t); background:var(--f); color:var(--i);
  font:400 24px/1 Jost,sans-serif; display:flex; align-items:center;
  justify-content:center; -webkit-tap-highlight-color:transparent;
  transition:border-color .16s linear, opacity .16s linear;
}
.compteur .pas:hover:not(:disabled){ border-color:var(--t2); }
.compteur .pas:disabled{ opacity:.28; cursor:default; }
.compteur .pas:focus{ outline:none; }
.compteur .pas:focus-visible{ outline:2px solid var(--i2); outline-offset:2px; }

.compteur .lecture{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
.compteur .valeur{
  font:500 40px/1 Jost,sans-serif; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.compteur .unite{ font-size:15px; color:var(--i2); }

/* Les raccourcis evitent quinze appuis pour une equipe de quinze. */
.raccourcis{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
.rac{
  height:40px; border:1px solid var(--t); border-radius:10px;
  background:transparent; color:var(--i2);
  font:400 15px/1 Archivo,sans-serif; font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .16s linear, color .16s linear;
}
.rac:hover{ border-color:var(--t2); }
.rac.vu{ border-color:var(--i); color:var(--i); }
.rac:focus{ outline:none; }
.rac:focus-visible{ outline:2px solid var(--i2); outline-offset:2px; }

/* Le bouton de suite est l'action principale de l'ecran : centre et plein,
   il ne se confond pas avec une option a choisir. */
.opt-plein{
  justify-content:center; text-align:center; min-height:56px; margin-top:18px;
  background:var(--acc); border-color:var(--acc);
}
.opt-plein:hover, .opt-plein:focus, .opt-plein:active{ background:var(--acc); }
.opt-plein .txt{ flex:0 0 auto; }
.opt-plein .t{ color:var(--acc-txt); font-weight:600; font-size:17px; }


/* ================================================ Liquid Glass · 25/08/2026
   Deux photos du studio, floutees au loin, donnent la matiere ; les surfaces
   la laissent transparaitre. Le flou d'arriere-plan coute cher en GPU : il
   est reserve aux DEUX barres fixes. Les cartes, elles, imitent le verre par
   un degrade et un lisere haut, sans aucun flou : meme lecture, cout nul.
   C'est ce qui permet d'avoir l'effet sur un telephone de trois ans. */
:root{
  --verre:rgba(255,255,255,.05);
  --verre-haut:rgba(255,255,255,.10);
  --verre-bord:rgba(255,255,255,.13);
  --verre-bord-fort:rgba(255,255,255,.30);
  --lisere:inset 0 1px 0 rgba(255,255,255,.10);
}

/* Le decor : deux images de 10 ko, agrandies et floutees. L'agrandissement
   fait la moitie du travail, le flou n'a plus qu'a finir : 40px au lieu de
   90 pour le meme rendu, et une passe GPU bien plus courte. */
.decor{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:var(--f); }
.decor span{
  position:absolute; display:block; width:72vmax; height:72vmax; border-radius:50%;
  background-size:cover; background-position:center;
  filter:blur(4px) saturate(.9); opacity:.66;
  transform:translateZ(0);
}
.decor .l1{ top:-24vmax; left:-20vmax; }
.decor .l2{ bottom:-28vmax; right:-22vmax; opacity:.5; }
/* Un voile sombre garde le texte lisible quoi qu'il y ait derriere. */
.decor::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.44), rgba(10,10,11,.62) 50%, rgba(10,10,11,.82)); }

.appli{ position:relative; z-index:1; }

/* --- les surfaces de verre. Meme fond dans TOUS les etats : l'invariant qui
       empeche le bloc noir de revenir tient toujours, il porte seulement une
       valeur de verre au lieu d'un gris plein. */
.opt, .opt:hover, .opt:focus, .opt:active, .opt.vu,
.bloc-date, .compteur, .segments,
.champ input, .champ textarea, .urgent, .fiche{
  background:linear-gradient(180deg, var(--verre-haut), var(--verre));
  border-color:var(--verre-bord);
  box-shadow:var(--lisere);
}
.creneau, .creneau:hover, .creneau:active, .creneau.vu,
.compteur .pas, .rac{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color:var(--verre-bord);
}
.segments .creneau{ box-shadow:none; }
.opt:hover, .creneau:hover, .rac:hover, .compteur .pas:hover:not(:disabled){
  border-color:var(--verre-bord-fort); }
.opt.vu, .rac.vu, .creneau.vu{ border-color:var(--verre-bord-fort); }
.segments .creneau.vu{ background:var(--acc); }
.opt-plein, .opt-plein:hover, .opt-plein:focus, .opt-plein:active{
  background:var(--acc); border-color:var(--acc); box-shadow:none; }

/* --- les deux seules surfaces a vrai flou d'arriere-plan */
.tete, .socle{
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
          backdrop-filter:blur(16px) saturate(1.5);
  background:linear-gradient(180deg, rgba(10,10,11,.55), rgba(10,10,11,.25));
}
.socle{ background:linear-gradient(0deg, rgba(10,10,11,.55), rgba(10,10,11,.25)); }

/* --- l'en-tete : le nom et le menu quittent les bords. Un site qui colle ses
       angles a l'air d'une page brute ; une gouttiere large a l'air tenu. */

.tete, .socle{
  width:100%; max-width:1140px; margin-inline:auto;
  padding-inline:clamp(22px,6vw,72px);
}

/* --- le mouvement : les options montent l'une apres l'autre, tres court. */
@keyframes pose{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.ecran.actif .choix > *, .ecran.actif .bloc-nombre, .ecran.actif .rang-nombre,
.ecran.actif .bloc-date, .ecran.actif .fiche{ animation:pose .32s var(--e) backwards; }
.ecran.actif .choix > *:nth-child(1){ animation-delay:.02s; }
.ecran.actif .choix > *:nth-child(2){ animation-delay:.06s; }
.ecran.actif .choix > *:nth-child(3){ animation-delay:.10s; }
.ecran.actif .choix > *:nth-child(4){ animation-delay:.14s; }
.ecran.actif .choix > *:nth-child(5){ animation-delay:.18s; }
.ecran.actif .choix > *:nth-child(6){ animation-delay:.22s; }
.opt, .rac, .creneau, .compteur .pas{ transition:border-color .16s linear, transform .12s var(--e); }
.opt:active, .rac:active, .creneau:active, .compteur .pas:active{ transform:scale(.985); }

/* ------------------------------------------------- le nombre, plus simple
   Un rang de pastilles : on touche le chiffre, l'ecran passe. Plus de
   compteur ni de bouton Continuer pour un a cinq, c'est-a-dire pour la
   quasi-totalite des demandes. Au-dela, le compteur apparait. */
.rang-nombre{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  width:100%; max-width:360px; margin:0 auto; }
@media (min-width:520px){ .rang-nombre{ grid-template-columns:repeat(6,1fr); } }
.nb{
  min-height:58px; border:1px solid var(--verre-bord); border-radius:12px;
  background:linear-gradient(180deg, var(--verre-haut), var(--verre));
  box-shadow:var(--lisere); color:var(--i);
  font:500 20px/1 Jost,sans-serif; font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .16s linear, transform .12s var(--e);
}
.nb:hover{ border-color:var(--verre-bord-fort); }
.nb:active{ transform:scale(.97); }
.nb.plus{ font-size:15px; letter-spacing:.01em; }
.nb:focus{ outline:none; }
.nb:focus-visible{ outline:2px solid var(--i2); outline-offset:2px; }

/* ------------------------------------------------- la fiche de fin, serree
   Elle occupait un ecran et demi. Tout tient maintenant dans une seule carte
   de verre : coordonnees, recapitulatif, bouton. */
.fiche{ width:100%; max-width:520px; margin:0 auto; padding:16px;
  border:1px solid var(--verre-bord); border-radius:16px; text-align:left; }
.fiche .champs{ gap:10px; margin-bottom:14px; }
.fiche .champ input{ padding:10px 12px; font-size:16px; }
.fiche .etiq{ font-size:10.5px; margin-bottom:4px; }
.fiche .recap{ margin:0 0 14px; }
.fiche .recap .l{ padding:8px 0; border-bottom-color:var(--verre-bord); }
.fiche .recap .l:first-child{ border-top:1px solid var(--verre-bord); }
.fiche .recap .v{ font-size:15.5px; }
.fiche .recap .l:last-child .v{ font-size:17px; }
.fiche .envoyer{ display:flex; width:100%; padding:13px 20px; font-size:16.5px; }
.pied-fin{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 14px; margin-top:12px; }
.pied-fin .apres{ margin:0; font-size:12px; line-height:1.45; max-width:44ch; }
.pied-fin .urgent{ margin:0; padding:8px 13px; font-size:12.5px; }
[data-fin] .question{ font-size:clamp(24px,3.4vw,34px); margin-bottom:16px; }

@media (prefers-reduced-motion:reduce){
  .ecran.actif .choix > *, .ecran.actif .bloc-nombre, .ecran.actif .rang-nombre,
  .ecran.actif .bloc-date, .ecran.actif .fiche{ animation:none; }
  .opt:active, .rac:active, .nb:active, .creneau:active{ transform:none; }
}
/* Certains appareils annoncent qu'ils ne veulent pas de transparence : on
   rend alors des surfaces pleines, sans rien casser d'autre. */
/* Windows signale « transparence reduite » des que l'utilisateur coupe les
   effets du systeme, ce qui est frequent. On ne supprime donc PAS la matiere
   du fond : une image floutee n'est pas de la transparence. On retire
   seulement ce qui coute et ce qui rend l'interface reellement traversante :
   le flou d'arriere-plan des barres, remplace par un fond plein. */
@media (prefers-reduced-transparency:reduce){
  .tete, .socle{ -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(10,10,11,.92); }
}


/* Sur un telephone, le nom et le menu ne tiennent pas ensemble a taille
   pleine : plutot que de laisser le menu deborder du bord droit, on resserre
   le texte. La gouttiere reste, c'est elle qui donne l'air tenu. */
@media (max-width:480px){
  
.tete, .socle{ padding-inline:18px; }
  .tete .nom{ font-size:16px; }
  .tete nav{ gap:9px; }
  .tete nav a{ font-size:10px; letter-spacing:.06em; }
}

/* La sortie « aucune personne » : discrete, sous le rang, jamais une
   pastille de meme poids que les chiffres. */
.sans-personne{
  display:block; margin:14px auto 0; padding:8px 4px;
  font:400 13px/1.4 Archivo,sans-serif; color:var(--i2);
  border-bottom:1px solid var(--verre-bord);
  -webkit-tap-highlight-color:transparent;
}
.sans-personne:hover{ color:var(--i); border-bottom-color:var(--verre-bord-fort); }


/* ------------------------------------------------- le nombre, au tambour
   Meme mecanique que l'accueil : defilement natif, calage natif, et un
   habillage en profondeur calcule a partir d'une geometrie relevee une
   seule fois. Trois crans visibles, celui du centre en clair. */
.roue-nb{
  --cran:54px; --ecart:6px; --pas:calc(var(--cran) + var(--ecart));
  position:relative; width:100%; max-width:300px; margin:0 auto;
  height:calc(var(--pas) * 3.4); perspective:700px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
}
/* La bande centrale dit ou se lit la valeur, comme sur un selecteur iOS. */
.roue-nb .bande{
  position:absolute; left:0; right:0; top:50%; height:var(--cran);
  transform:translateY(-50%); pointer-events:none; z-index:2;
  border-top:1px solid var(--verre-bord-fort);
  border-bottom:1px solid var(--verre-bord-fort);
  background:linear-gradient(180deg, var(--verre-haut), var(--verre));
  border-radius:12px;
}
.piste-nb{
  height:100%; overflow-y:scroll; overscroll-behavior:contain;
  scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; transform-style:preserve-3d;
  display:flex; flex-direction:column; gap:var(--ecart);
  padding-block:calc((var(--pas) * 3.4 - var(--cran)) / 2);
}
.piste-nb::-webkit-scrollbar{ width:0; height:0; display:none; }
.piste-nb:focus{ outline:none; }
.piste-nb:focus-visible{ outline:2px solid var(--i2); outline-offset:4px; border-radius:12px; }
.cran{
  flex:0 0 var(--cran); height:var(--cran);
  scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center;
  font:500 30px/1 Jost,sans-serif; font-variant-numeric:tabular-nums;
  color:var(--i2); backface-visibility:hidden; will-change:transform;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cran[aria-selected="true"]{ color:var(--i); }
.legende-nb{ margin:2px 0 0; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--i2); }
.roue-nb + .legende-nb + .opt-plein{ margin-top:16px; max-width:300px; }

@media (prefers-reduced-motion:reduce){
  .cran{ transform:none !important; opacity:1 !important; }
}


/* Verre fume : la part sombre garde le texte lisible quand la photo derriere
   est claire, le reflet clair garde l'aspect verre. Sans les deux, c'est
   soit illisible, soit plat. */
.opt, .opt:hover, .opt:focus, .opt:active, .opt.vu,
.bloc-date, .compteur, .segments, .fiche, .roue-nb .bande,
.champ input, .champ textarea, .urgent{
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
             rgba(12,12,14,.55);
}
.opt-plein, .opt-plein:hover, .opt-plein:focus, .opt-plein:active{
  background:var(--acc); }
.segments .creneau.vu{ background:var(--acc); }


/* -------------------------------------------------- le haut, colle au bord
   Une barre d'avancement morte laissait un bandeau d'image entre le bord
   de l'ecran et l'en-tete : le haut flottait. L'en-tete est maintenant un
   bloc de verre pose sur le bord, sur toute la largeur.
   Le verre est en plein ecran (position fixe), le CONTENU reste tenu a
   1140 px : sur grand ecran la barre ne se coupe pas en plein milieu. */
.appli::before{
  content:""; position:fixed; top:0; left:0; right:0; z-index:0;
  height:var(--haut-verre, 96px);
  background:linear-gradient(180deg, rgba(10,10,11,.72), rgba(10,10,11,.34));
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
          backdrop-filter:blur(16px) saturate(1.5);
  pointer-events:none;
}
.tete{
  position:relative; z-index:1; padding-top:28px;
  background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
@media (max-width:760px){ .appli{ --haut-verre:82px; } }
@media (max-width:480px){ .appli{ --haut-verre:74px; } }
@media (prefers-reduced-transparency:reduce){
  .appli::before{ -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(10,10,11,.94); }
}


/* ==================================================== 2026-08-25 · matiere
   Relevé fait sur les sites que produisent les studios de ce niveau, puis
   transposé ici. Quatre leviers, dans l'ordre d'effet :
     1. UNE seule grotesque, crénage très serré. La géométrique Jost
        (Futura, 1927, remise partout dans les années 80) datait tout
        l'écran : c'est elle qui donnait l'impression de vieux site.
        Elle ne sert plus qu'au logotype.
     2. Des bordures qu'on devine au lieu de les voir, et une ombre portée
        douce qui décolle la carte du fond. Un liseré blanc net à 16 %,
        c'est la signature d'une interface de 2010.
     3. Des angles beaucoup plus ronds, et des commandes en gélule.
     4. Une barre d'action flottante en bas, comme une application, au lieu
        d'un pied de page collé aux bords.                                   */

:root{ --grot:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif; }

/* --- 1. typographie ---------------------------------------------------- */
.question, .opt .t, .opt .p, .opt .d, .cran, .compteur .valeur, .compteur .unite,
.recap .v, .envoyer, .opt-plein .t, .creneau, .legende-nb, .rac, .nb{
  font-family:var(--grot);
}
.question{ font-weight:600; letter-spacing:-.038em; font-size:clamp(28px,4vw,44px);
  line-height:1.04; }
.aide{ letter-spacing:-.012em; }
.opt .t{ font-weight:600; letter-spacing:-.024em; font-size:17px; }
.opt .d{ letter-spacing:-.012em; color:rgba(255,255,255,.52); }
.opt .p{ letter-spacing:-.02em; font-size:15px; color:rgba(255,255,255,.62); }
.recap .v{ font-weight:600; letter-spacing:-.024em; }
.recap .k{ letter-spacing:.08em; }
.envoyer, .opt-plein .t{ font-weight:600; letter-spacing:-.024em; }
.cran, .compteur .valeur{ font-weight:600; letter-spacing:-.045em; }

/* --- 2 et 3. le verre : moins de contraste, plus de rayon --------------- */
.opt, .opt:hover, .opt:focus, .opt:active, .opt.vu,
.bloc-date, .compteur, .segments, .fiche, .roue-nb .bande,
.champ input, .champ textarea{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
             rgba(16,16,19,.46);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 12px 32px -20px rgba(0,0,0,.95);
}
.opt{ border-radius:20px; min-height:64px; padding:17px 20px; }
.fiche{ border-radius:26px; padding:20px; }
.bloc-date{ border-radius:22px; }
.champ input, .champ textarea{ border-radius:14px; }
.roue-nb .bande{ border-radius:18px; border-color:rgba(255,255,255,.14); }
.opt:hover{ border-color:rgba(255,255,255,.17); }
.opt.vu{ border-color:rgba(255,255,255,.32); }
/* La barre de la réponse retenue rentre dans l'angle arrondi au lieu d'être
   coupée par lui. */
.opt.vu::before{ left:9px; top:17px; bottom:17px; border-radius:2px; }

/* commandes en gélule */
.opt-plein, .envoyer, .urgent, .sans-personne, .rac, .creneau, .nb{ border-radius:999px; }
.opt-plein{ min-height:58px; }
.creneau.mince{ border-radius:999px; }
.segments{ border-radius:999px; }
.segments .creneau{ border-radius:0; }

/* --- 4. le socle flottant ---------------------------------------------- */
.socle{
  align-self:center; width:auto; max-width:none;
  margin:0 auto 16px; padding:9px 18px;
  gap:18px; border-radius:999px;
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
             rgba(16,16,19,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px -22px rgba(0,0,0,1);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
          backdrop-filter:blur(16px) saturate(1.5);
}
.socle .retour, .socle .pas{ font-family:var(--grot); letter-spacing:.06em; font-size:10.5px; }

@media (max-width:480px){
  .socle{ padding:8px 16px; gap:14px; }
}


/* ------------------------------------------------- le socle, plus lisible
   Il etait trop petit et flottait sans repere : deux mentions minuscules
   dans une gelule etroite. On lui donne une vraie assise — la largeur d'un
   pouce, du texte a taille lisible, et un ecart au bord qui le pose au lieu
   de le coller. « Etape 2 sur 6 » remplace « 2 / 6 », qui se lisait comme
   un score. */
.socle{
  min-width:min(300px, calc(100% - 32px));
  justify-content:space-between;
  padding:12px 22px; gap:22px; margin-bottom:26px;
}
.socle .retour{ font-size:12px; letter-spacing:.09em; color:rgba(255,255,255,.62); }
.socle .retour:hover{ color:var(--i); }
.socle .pas{ font-size:12.5px; letter-spacing:-.01em; color:rgba(255,255,255,.78);
  font-family:var(--grot); text-transform:none; }

/* Le fil du bas se cale sous le socle plutot qu'au ras de l'ecran : il
   accompagne le socle au lieu de vivre a part. */
.jauge{ height:3px; background:rgba(255,255,255,.10); }

@media (max-width:480px){
  .socle{ min-width:calc(100% - 28px); padding:11px 18px; margin-bottom:22px; }
  .socle .retour{ font-size:11.5px; }
  .socle .pas{ font-size:12px; }
}


/* Le socle : une vraie assise. Quand « Retour » n'existe pas encore, l'etape
   se centre au lieu de rester plaquee a droite. */
.socle{ justify-content:center; padding:14px 22px; }
.socle .retour{ margin-right:auto; }
.socle .retour[hidden]{ display:none; }
.socle .pas{ font-size:13px; }
@media (max-width:480px){
  .socle{ padding:13px 20px; }
  .socle .pas{ font-size:12.5px; }
}


/* =============================================== le socle-jauge · 25/08/2026
   Le bandeau du bas est supprime : c'est la gelule elle-meme qui se remplit.
   Un seul objet a regarder au lieu de deux, et l'avancement se lit la ou on
   lit deja l'etape. */
.jauge{ display:none; }              /* l'ancien fil, hors service */

.socle{ position:relative; overflow:hidden; }
.socle .remplissage{
  position:absolute; left:0; top:0; bottom:0; width:0; z-index:0;
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border-right:1px solid rgba(255,255,255,.14);
  transition:width .45s var(--e);
  pointer-events:none;
}
.socle .retour, .socle .pas{ position:relative; z-index:1; }
/* Inerte, pas absent : la gelule ne change jamais de largeur. */
.socle .retour.inerte{ opacity:.28; pointer-events:none; }

/* Le bouton principal reste BLANC en toutes circonstances. Les regles de
   verre s'appliquent a « .opt » et il porte cette classe : sans cette
   redeclaration finale, il redevenait une carte de verre. */
.opt-plein, .opt-plein:hover, .opt-plein:focus, .opt-plein:active,
.envoyer, .envoyer:hover{
  background:var(--acc) !important;
  border-color:var(--acc) !important;
  box-shadow:none !important;
}
.opt-plein .t{ color:var(--acc-txt); }


/* ================================================= le calendrier · 25/08/2026
   Plus de champ date natif, plus de segments de journee : un vrai calendrier
   au theme, puis l'heure choisie au tambour comme sur le reveil d'un
   telephone. Le calendrier est du texte et des cercles, rien d'autre. */
.bloc-date{ max-width:340px; padding:16px 14px 14px; }

.cal-tete{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px; }
.cal-mois{ font-family:var(--grot); font-size:16px; font-weight:600;
  letter-spacing:-.02em; text-transform:capitalize; }
.cal-fleche{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.09); color:var(--i);
  background:rgba(255,255,255,.04);
  transition:border-color .16s linear, opacity .16s linear;
}
.cal-fleche svg{ width:16px; height:16px; }
.cal-fleche:hover{ border-color:rgba(255,255,255,.2); }
.cal-fleche:disabled{ opacity:.22; pointer-events:none; }

.cal-semaine{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  margin-bottom:4px; }
.cal-semaine span{ text-align:center; font-size:11px; letter-spacing:.06em;
  color:rgba(255,255,255,.42); }

.cal-grille{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-jour{
  aspect-ratio:1/1; width:100%; border:0; border-radius:999px;
  background:transparent; color:rgba(255,255,255,.86);
  font:500 15px/1 var(--grot); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s linear, color .16s linear, transform .12s var(--e);
}
.cal-jour:hover{ background:rgba(255,255,255,.08); }
.cal-jour:active{ transform:scale(.92); }
.cal-jour.passe{ opacity:.2; pointer-events:none; }
.cal-jour.vu{ background:var(--acc); color:var(--acc-txt); font-weight:600; }
.cal-jour:focus{ outline:none; }
.cal-jour:focus-visible{ outline:2px solid var(--i2); outline-offset:1px; }

/* La sortie « sans date » : au meme niveau de lecture que le calendrier,
   jamais cachee dans une case a cocher. */
.sans-date{
  display:block; margin:12px auto 0; padding:10px 18px;
  border:1px solid rgba(255,255,255,.09); border-radius:999px;
  background:rgba(255,255,255,.03); color:rgba(255,255,255,.66);
  font:400 13.5px/1 var(--grot); letter-spacing:-.012em;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .16s linear, color .16s linear;
}
.sans-date:hover{ border-color:rgba(255,255,255,.2); color:var(--i); }
.sans-date.vu{ background:var(--acc); border-color:var(--acc); color:var(--acc-txt);
  font-weight:600; }

/* --------------------------------------------------------------- le reveil */
.roue-nb .colonnes{ display:flex; height:100%; }
.roue-nb.reveil{ max-width:220px; margin-top:6px; }
.roue-nb.reveil .colonnes{ gap:0; }
.roue-nb.reveil .piste-nb{ flex:1; }
.roue-nb.reveil .cran{ font-size:26px; }
/* Le deux-points vit au centre de la bande, entre les deux colonnes. */
.roue-nb.reveil .bande::after{
  content:":"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-52%); font:600 22px/1 var(--grot);
  color:rgba(255,255,255,.55);
}
.legende-nb + .roue-nb.reveil{ margin-top:2px; }

/* Le geste doit rester libre : « scroll-snap-stop: always » obligeait le
   doigt a s'arreter sur chaque cran, ce qui rendait le tambour poussif. */
.cran{ scroll-snap-stop:normal; }


/* L'ecran de date tient sur une hauteur de telephone : calendrier compact,
   reveil sur deux crans et demi au lieu de trois et demi. */
.roue-nb.reveil{ height:calc(var(--pas) * 2.6); max-width:200px; }
.roue-nb.reveil .piste-nb{ padding-block:calc((var(--pas) * 2.6 - var(--cran)) / 2); }
.bloc-date{ padding:14px 12px 12px; }
.bloc-date + .sans-date{ margin-top:10px; }
.sans-date + .legende-nb{ margin-top:14px; }
[data-cle] .bloc-date ~ .opt-plein{ margin-top:14px; }


/* Journee deja reservee : barree, jamais cliquable. */
.cal-jour.pris{ opacity:.34; pointer-events:none; position:relative; }
.cal-jour.pris::after{
  content:""; position:absolute; left:26%; right:26%; top:50%; height:1px;
  background:rgba(255,255,255,.55); transform:rotate(-18deg);
}
.creneau-pris{ margin:8px auto 0; font-size:12.5px; color:#ff9a8a;
  font-family:var(--grot); letter-spacing:-.012em; }
.creneau-pris[hidden]{ display:none; }
.opt-plein.bloque{ opacity:.35; pointer-events:none; }

/* Avec soixante minutes, la colonne des minutes defile beaucoup : on la
   rend un peu plus etroite que celle des heures, comme sur un reveil. */
.roue-nb.reveil{ max-width:210px; }


/* Une colonne seule doit occuper toute la largeur du tambour, sinon le
   chiffre se colle a gauche au lieu de tomber au centre. */
.roue-nb .colonnes{ width:100%; }
.roue-nb .colonnes > .piste-nb{ flex:1 1 0; min-width:0; }

/* La jauge blanchit avec l'avancement : de 12 % a 100 % d'opacite. */
.socle .remplissage{
  background:linear-gradient(90deg,
    rgba(255,255,255,calc(.10 + var(--avance, 0) * .55)),
    rgba(255,255,255,calc(.04 + var(--avance, 0) * .34)));
  border-right-color:rgba(255,255,255,calc(.10 + var(--avance, 0) * .70));
}

/* Le champ de details, discret : il ne doit pas peser autant qu'un champ
   obligatoire, mais rester visible. */
.champ-details{ margin-bottom:14px; }
.champ-details textarea{
  min-height:56px; font-size:15px; line-height:1.4;
  border-radius:14px; resize:vertical;
}
.champ-details textarea::placeholder{ color:rgba(255,255,255,.38); }


/* Le double-appui ne doit jamais zoomer : « manipulation » supprime la
   detection du double-tap, donc aussi le delai de 300 ms qui allait avec. */
.sans-zoom, .sans-zoom *{ touch-action:manipulation; }

/* La jauge finit en BLANC PUR : c'est la derniere etape qui doit tirer. */
.socle .remplissage{
  background:linear-gradient(90deg,
    rgba(255,255,255,calc(.12 + var(--avance, 0) * .88)),
    rgba(255,255,255,calc(.06 + var(--avance, 0) * .60)));
  border-right-color:rgba(255,255,255,calc(.12 + var(--avance, 0) * .88));
}

/* « Vos coordonnées » etait colle sous l'en-tete. */
[data-fin]{ padding-top:26px; }
@media (max-width:480px){ [data-fin]{ padding-top:20px; } }


/* ============================================ l'ecran de date, sans defilement
   Quand cet ecran depassait la hauteur du telephone, le geste sur le tambour
   partait au defilement de la PAGE une fois sur deux : deux zones qui
   defilent l'une dans l'autre, c'est toujours l'une qui vole l'autre. On le
   fait donc tenir en entier. */
[data-cle="quand"] .question{ font-size:clamp(22px,5.6vw,30px); margin-bottom:10px; }
[data-cle="quand"] .aide{ display:none; }
.bloc-date{ padding:12px 10px 10px; max-width:320px; }
.cal-tete{ margin-bottom:6px; }
.cal-fleche{ width:30px; height:30px; }
.cal-jour{ font-size:14px; }
.cal-grille{ gap:1px; }
.cal-semaine{ margin-bottom:2px; }
.sans-date{ margin-top:8px; padding:8px 16px; font-size:12.5px; }
.legende-nb{ margin-top:8px; }
.roue-nb.reveil{ height:calc(var(--pas) * 2.2); }
.roue-nb.reveil .piste-nb{ padding-block:calc((var(--pas) * 2.2 - var(--cran)) / 2); }
.roue-nb.reveil .cran{ font-size:23px; }
[data-cle="quand"] .opt-plein{ margin-top:10px; min-height:52px; }

/* Le tambour reclame explicitement le geste vertical : sans cette ligne, le
   navigateur peut le donner au conteneur parent. */
.piste-nb{ touch-action:pan-y; overscroll-behavior:contain; }


/* Le socle : un remplissage discret derriere le texte, et un filet en bas
   qui va, lui, jusqu'au blanc pur. Un fond a 88 % de blanc rendait
   « RETOUR » illisible. */
.socle .remplissage{
  background:linear-gradient(90deg,
    rgba(255,255,255,calc(.05 + var(--avance, 0) * .16)),
    rgba(255,255,255,calc(.02 + var(--avance, 0) * .10)));
  border-right-color:rgba(255,255,255,calc(.08 + var(--avance, 0) * .22));
}
.socle .remplissage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,calc(.25 + var(--avance, 0) * .75));
}


/* ======================================== le fond des sections · 26/08/2026
   On enleve les deux halos flous : maintenant que le fond est une photo,
   deux ronds flous par-dessus ne font que salir. Une seule image plein
   cadre, cadrée comme sur l'accueil, et le voile qui garde le texte
   lisible. */
.decor span{ display:none; }
.decor{
  background-size:cover; background-position:center;
  background-repeat:no-repeat; background-color:var(--f);
}
.decor::after{
  background:linear-gradient(180deg, rgba(10,10,11,.58), rgba(10,10,11,.72) 50%, rgba(10,10,11,.88));
}

/* Le bandeau de verre du haut se voyait plus que ce qu'il portait : moins
   haut, moins flou, moins opaque. Il doit tenir le nom, pas occuper l'ecran. */
.appli{ --haut-verre:74px; }
@media (max-width:760px){ .appli{ --haut-verre:64px; } }
@media (max-width:480px){ .appli{ --haut-verre:58px; } }
.appli::before{
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
          backdrop-filter:blur(10px) saturate(1.25);
  background:linear-gradient(180deg, rgba(10,10,11,.48), rgba(10,10,11,0));
}
.tete{ padding-top:16px; }

/* Un passage d'ecran plus coulant. */
.ecran{ transition:opacity .24s linear, transform .34s var(--e), visibility .24s; }


/* ================================================= le fond, refloute · 26/08
   Le flou revient, mais sur l'IMAGE seule et non sur des ronds poses
   par-dessus : c'est ce qui salissait. Le calque est agrandi de 4 % pour que
   le flou ne laisse pas de bord transparent, et le voile reste net au-dessus
   de lui. */
.decor{ background-image:none !important; }
.decor span{
  display:block; position:absolute; inset:-4%;
  width:auto; height:auto; border-radius:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:blur(7px); opacity:1; transform:none;
}

/* Le bandeau du haut prend le meme flou que l'image, a peine plus fort : il
   doit se fondre dans le fond, pas s'annoncer comme une barre. */
.appli::before{
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
          backdrop-filter:blur(9px) saturate(1.1);
  background:linear-gradient(180deg, rgba(10,10,11,.42), rgba(10,10,11,0));
}

/* ------------------------------------------------ le socle, version propre
   Le bloc gris qui grandissait derriere le texte faisait bricolage. On garde
   la gelule nette et c'est un filet arrondi, colle au bas, qui porte
   l'avancement — du gris au blanc pur. */
.socle .remplissage{
  left:14px; right:14px; top:auto; bottom:7px; width:auto; height:3px;
  border-radius:999px; border:0;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.socle .remplissage::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  transform-origin:left center; transform:scaleX(var(--avance, 0));
  background:rgba(255,255,255,calc(.45 + var(--avance, 0) * .55));
  transition:transform .45s var(--e), background .45s linear;
}
.socle{ padding-bottom:17px; }


/* Le filet est un element a part entiere, pas un pseudo : c'est lui que le
   script met a l'echelle. */
.socle .remplissage::after{ content:none; }
.socle .remplissage .fil{
  position:absolute; inset:0; border-radius:999px;
  transform-origin:left center; transform:scaleX(0);
  background:rgba(255,255,255,.45);
  transition:transform .45s var(--e), background .45s linear;
}


/* ============================================ Liquid Glass II · 26/08/2026
   Ce qui separe un verre de 2022 d'un verre de 2026, c'est l'arete.
   Un bord d'un seul gris tout autour, c'est du plastique. Le verre reel
   attrape la lumiere EN HAUT et la perd en bas : on dessine donc un anneau
   en degrade, clair au sommet, nul en bas, decoupe par un masque pour ne
   garder que le trait. Trois autres details completent : une saturation
   poussee sous le flou, un reflet interieur haut, et une ombre portee tres
   etalee qui decolle la carte sans la souligner. */

.opt, .fiche, .bloc-date, .compteur, .roue-nb .bande, .socle, .sans-date,
.sans-personne, .urgent{
  position:relative;
  border-color:transparent;                 /* l'anneau remplace la bordure */
}
.opt::after, .fiche::after, .bloc-date::after, .compteur::after,
.roue-nb .bande::after, .socle::after, .sans-date::after,
.sans-personne::after, .urgent::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.10) 34%,
    rgba(255,255,255,.03) 70%,
    rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* Le reveil garde son deux-points : on ne lui vole pas son pseudo-element. */
.roue-nb.reveil .bande::after{
  content:":"; padding:0; background:none; -webkit-mask:none; mask:none;
}

/* La matiere elle-meme : un peu plus claire au sommet, un rien plus sombre
   au pied, et un reflet interieur qui suit l'arete. */
.opt, .opt:hover, .opt:focus, .opt:active, .opt.vu,
.fiche, .bloc-date, .compteur, .roue-nb .bande{
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 55%,
             rgba(255,255,255,.03)), rgba(14,14,17,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
             inset 0 -1px 0 rgba(0,0,0,.35),
             0 16px 40px -24px rgba(0,0,0,1);
}
.opt:hover::after{
  background:linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.12) 40%,
             rgba(255,255,255,0));
}
.opt.vu::after{
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.16) 45%,
             rgba(255,255,255,.04));
}

/* Les deux surfaces a vrai flou gagnent la saturation qui fait la couleur du
   verre : sans elle, le flou grise tout ce qu'il traverse. */
.appli::before{
  -webkit-backdrop-filter:blur(12px) saturate(1.7);
          backdrop-filter:blur(12px) saturate(1.7);
}
.socle{
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
          backdrop-filter:blur(18px) saturate(1.7);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
             rgba(12,12,15,.42);
}


/* ========================================= Liquid Glass III · 26/08/2026
   Releve sur ce que publie Apple pour iOS 26, et non sur mon idee du verre.
   Trois regles y sont explicites, et mes deux versions precedentes les
   violaient toutes les trois :

     1. « Ne simulez pas de bordures ni de biseaux. » Mon anneau en degrade
        a 30 % de blanc etait precisement le biseau interdit : c'est ce qui
        donnait l'air d'un plastique moule.
     2. Le materiau est TRANSLUCIDE : le contenu derriere doit se lire au
        travers. Un fond a 44 % d'opacite n'est plus du verre, c'est une
        vitre depolie.
     3. Il appartient a la couche de NAVIGATION, pose au-dessus du contenu.
        On ne l'etale pas partout.

   Donc : presque rien. Un voile clair a 4 %, un liseré d'un demi-pixel, une
   ombre d'ambiance, et c'est tout. La photo derriere fait le travail. */

.opt::after, .fiche::after, .bloc-date::after, .compteur::after,
.roue-nb .bande::after, .socle::after, .sans-date::after,
.sans-personne::after, .urgent::after{ content:none; }
.roue-nb.reveil .bande::after{ content:":"; }

.opt, .opt:hover, .opt:focus, .opt:active, .opt.vu,
.fiche, .bloc-date, .compteur, .roue-nb .bande,
.champ input, .champ textarea, .sans-date, .sans-personne, .urgent{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.10),
             0 10px 26px -22px rgba(0,0,0,.9);
}
/* Sous les surfaces qui portent du texte long, on ajoute juste ce qu'il faut
   de fond pour garder le contraste — jamais plus. */
.fiche, .bloc-date{ background:rgba(12,12,15,.30); }
.opt:hover{ border-color:rgba(255,255,255,.20); }
.opt.vu{ border-color:rgba(255,255,255,.34); }

/* La couche de navigation : c'est elle, et elle seule, qui porte le flou. */
.appli::before{
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
          backdrop-filter:blur(20px) saturate(1.6);
  background:linear-gradient(180deg, rgba(10,10,11,.34), rgba(10,10,11,0));
}
.socle{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.10),
             0 12px 30px -24px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
          backdrop-filter:blur(20px) saturate(1.6);
}

/* Transparence reduite : le systeme demande du plein, on donne du plein. */
@media (prefers-reduced-transparency:reduce){
  .opt, .fiche, .bloc-date, .compteur, .roue-nb .bande, .socle{
    background:rgba(18,18,21,.96);
  }
}


/* ============================================ la jauge, pleine · 26/08/2026
   Un filet de trois pixels se remarquait a peine. C'est la gelule entiere
   qui se remplit maintenant. Le remplissage reste sous 22 % de blanc : au
   dela, « RETOUR » passait blanc sur blanc — c'est le mur contre lequel
   j'avais bute la premiere fois. */
.socle .remplissage{
  left:0; right:0; top:0; bottom:0; width:auto; height:auto;
  border-radius:999px; overflow:hidden; background:transparent;
}
.socle .remplissage .fil{
  position:absolute; inset:0; border-radius:0;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.09));
}


/* ======================================== la jauge, jusqu'au blanc · 27/08/2026
   Elle restait grise d'un bout a l'autre : une barre qui avance sans changer
   d'etat ne recompense rien. Elle va maintenant au blanc plein.

   Le probleme que ca posait la premiere fois — « RETOUR » devenant blanc sur
   blanc — se regle sans compromis : le texte du socle passe en mode
   difference. Sur le fond sombre il reste blanc, sur le remplissage clair il
   devient noir. Aucun reglage a maintenir, l'inversion est automatique. */
.socle .remplissage .fil{
  background:rgba(255,255,255,.12);
  transition:transform .45s var(--e), background .45s linear;
}
.socle .retour, .socle .pas{
  mix-blend-mode:difference; color:#fff;
}

/* ============================================ le tambour, jusqu'au dernier cran
   On n'arrivait pas a poser 23 h : le dernier cran ne pouvait pas atteindre
   la ligne de mire faute de place sous lui. Les marges hautes et basses
   valent desormais exactement la moitie de la fenetre, moins un demi-cran —
   c'est la seule valeur qui permet au PREMIER comme au DERNIER d'arriver au
   centre. */
.roue-nb{ --fenetre:3.4; }
.roue-nb.reveil{ --fenetre:2.2; }
.piste-nb{
  padding-top:calc((var(--pas) * var(--fenetre) - var(--cran)) / 2);
  padding-bottom:calc((var(--pas) * var(--fenetre) - var(--cran)) / 2);
  scroll-padding-top:calc((var(--pas) * var(--fenetre) - var(--cran)) / 2);
}


/* ================================== la bande reprend sa place · 27/08/2026
   En posant l'anneau de verre, j'avais passe « .roue-nb .bande » en
   position:relative pour lui donner un pseudo-element. Consequence : la
   bande cessait d'etre hors flux, elle occupait la hauteur d'un cran et
   poussait toute la colonne d'exactement un cran vers le bas. La valeur
   retenue s'affichait donc SOUS la vitre au lieu d'etre dedans.
   Elle redevient absolue : c'est un reperage, pas un element de la pile. */
.roue-nb .bande{ position:absolute; }


/* ================================== l'en-tete des sections · 29/08/2026
   Une barre pleine largeur trace une ligne en travers de l'ecran, et une
   ligne droite est exactement ce qu'on evite partout ailleurs. L'en-tete
   prend la capsule de l'accueil, adaptee : plus basse, parce qu'ici elle
   surplombe un parcours et non une page d'ouverture. */
.appli::before{ display:none; }

.tete{
  width:calc(100% - 24px); max-width:560px;
  margin:12px auto 0; padding:10px 20px 11px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
             rgba(10,10,12,.34);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.06),
             0 18px 40px -34px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(2px) saturate(1.2);
          backdrop-filter:blur(2px) saturate(1.2);
}
@media (max-width:480px){
  .tete{ width:calc(100% - 20px); padding:9px 16px 10px; }
}

/* Le premier avis, sous la capsule : une preuve avant la premiere question.
   Il n'apparait QUE si un avis reel existe — jamais de place vide, jamais de
   temoignage fabrique. */
.preuve{
  display:block; width:calc(100% - 24px); max-width:560px;
  margin:8px auto 0; padding:9px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  font-family:var(--grot); font-size:12.5px; line-height:1.45;
  letter-spacing:-.012em; color:rgba(255,255,255,.62);
  text-align:center;
}
.preuve b{ color:rgba(255,255,255,.9); font-weight:600; }
.preuve .etoiles{ color:#f0c26a; letter-spacing:.06em; margin-right:6px; }
.preuve[hidden]{ display:none; }