/* ESPACE CLIENT AMORCE : le côté client (app/static/app.css).
   Structure : « Le pense-bête », validée au Gate A bis le 23/09/2026 (gate-a2/pense-bete.html, gate-a2/gate-a2.css).
   Habillage : DA d'amorce.dev, jetons et composants dans commun.css (partagé avec l'admin, on n'y touche pas).
   Une seule colonne partout, bureau compris. Mobile d'abord (375px). Deux gestes : demander, valider.
   États : CATALOGUE-8 §8.7, vide / clairsemé / dense / erreur, jamais de cul-de-sac. */

:root{
  --col-max: 32rem;
  --barre-h: 5.25rem;       /* hauteur de la barre d'action fixée en bas */
  --touche: 3.25rem;        /* un bouton qu'on vise au pouce */
}

/* --- 0. Socle ------------------------------------------------------------------------------------ */

#app{min-height:100vh}
.page{padding-bottom:calc(var(--barre-h) + 2rem)}
.colonne{width:100%;max-width:var(--col-max);margin-inline:auto;padding-inline:var(--pad);box-sizing:border-box}
.attente-chargement{margin:2.4rem 0;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;color:rgb(var(--c-muted))}

/* Bandeau de connexion perdue */
.hors-ligne{position:fixed;left:0;right:0;top:0;z-index:var(--z-modal);display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:center;padding:.6rem var(--pad);background:rgb(var(--c-ink));color:rgb(var(--c-paper));
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;border-radius:0 0 var(--r-ctl) var(--r-ctl);
  transform:translateY(-100%);transition:transform var(--d) var(--e-out)}
.hors-ligne.visible{transform:translateY(0)}
.hors-ligne button{min-height:2.25rem;padding:.2rem .8rem;border:1px solid rgb(var(--c-paper) / .6);border-radius:var(--r-ctl);
  background:transparent;color:inherit;font:inherit;cursor:pointer}

/* --- 1. Barre du haut, réduite : qui on est, ou le retour -------------------------------------- */

.haut{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;min-height:3.4rem;
  padding:.5rem var(--pad);background:var(--veil);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne-2)}
.haut svg{width:1.15rem;height:1.15rem;flex:none;color:rgb(var(--c-ink))}
.haut .nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-disp);font-weight:800;
  font-size:var(--fs-h3);letter-spacing:-.01em;color:rgb(var(--c-ink))}
.haut .site{margin-left:auto;flex:none;font-size:var(--fs-small);color:rgb(var(--c-muted));text-decoration:none;
  border-bottom:1px solid var(--ligne)}
.haut span.site{border-bottom:none;text-align:right}
.haut .site.vide{border:none}
.haut .retour{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;text-decoration:none;
  font-size:var(--fs-small);color:rgb(var(--c-ink))}
.haut .retour::before{content:"←";font-family:var(--f-mono)}
.haut .tbtn{flex:none}

/* --- 2. Titres : des phrases, pas des rubriques ------------------------------------------------ */

.salut{margin:1.6rem 0 .35rem;font-size:var(--fs-h2);overflow-wrap:anywhere}
.sous{margin:0 0 1.4rem;color:rgb(var(--c-body))}
.rubrique{display:flex;align-items:baseline;gap:.6rem;margin:1.8rem 0 .7rem;font-family:var(--f-mono);font-weight:400;
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:rgb(var(--c-muted))}
.rubrique .n{margin-left:auto;letter-spacing:.04em}
.rubrique.vous{color:rgb(var(--c-accent))}
.salut + .etapes{margin:.9rem 0 .4rem}
.salut + .statut{margin-bottom:.8rem}
.salut + .demandes{margin-top:1.1rem}

/* --- 3. Ce qui attend le client : une carte, un verbe, un bouton ------------------------------- */

.attente{position:relative;display:grid;gap:.75rem;padding:1rem;margin-bottom:.8rem;border-radius:var(--r-carte);
  background:var(--surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgb(118 79 184 / .45);box-shadow:0 0 0 4px var(--anneau)}
.attente .quoi{margin:0;font-weight:500;color:rgb(var(--c-ink));line-height:1.35;overflow-wrap:anywhere}
.attente .detail{margin:0;font-size:var(--fs-small);color:rgb(var(--c-body))}
.attente .ent,.compris .ent,.mot .ent{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;color:rgb(var(--c-muted))}
.attente .tete{display:grid;grid-template-columns:1fr 5.5rem;gap:.9rem;align-items:start}
.attente .tete .quoi{margin-top:.45rem}
.attente .vignette{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;border:var(--hair)}
.attente.creuse{border-color:var(--ligne);box-shadow:none}
.attente textarea,.corriger textarea,.apercu textarea{min-height:var(--touche)}
.corriger{display:grid;gap:.5rem}
.corriger:empty{display:none}
.planche{display:flex;gap:.4rem}
.planche img{display:block;flex:1 1 0;min-width:0;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:var(--hair)}

/* Un mot de Christopher qui ne tient à aucune demande */
.mot{display:grid;gap:.35rem;margin:0 0 .8rem;padding:.85rem 1rem;border-left:3px solid rgb(var(--c-ink) / .5);
  background:var(--surface);border-radius:0 var(--r-carte) var(--r-carte) 0}
.mot p{margin:0;color:rgb(var(--c-ink));white-space:pre-wrap}

/* --- 4. Boutons à la taille du pouce, empilés sur téléphone ------------------------------------ */

.choix{display:grid;gap:.5rem}
@media (min-width:420px){ .choix.deux{grid-template-columns:1fr 1fr} }
.b{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--touche);padding:.7rem 1rem;
  border-radius:var(--r-ctl);border:1px solid var(--ligne);background:rgb(var(--c-sheet));color:rgb(var(--c-ink));
  font-family:var(--f-disp);font-weight:700;font-size:var(--fs-body);letter-spacing:.02em;text-decoration:none;
  text-align:center;line-height:1.15;box-sizing:border-box;cursor:pointer;
  transition:border-color .35s var(--e-out),background-color .35s var(--e-out),box-shadow .35s var(--e-out)}
.b:hover{border-color:rgb(var(--c-accent))}
.b.fort{background:rgb(var(--btn-bg));color:rgb(var(--btn-fg));border-color:rgb(var(--btn-bg))}
.b.fort:hover{box-shadow:inset 0 0 0 1px rgb(var(--c-accent))}
.b.valider{background:rgb(118 79 184);border-color:rgb(118 79 184);color:#F1EEE8}
.b.valider:hover{background:rgb(104 66 168)}
.b.discret{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:.2em;
  font-family:var(--f-text);font-weight:500;min-height:2.75rem}
.b.actif,.rond.actif{background:rgb(118 79 184);border-color:rgb(118 79 184);color:#F1EEE8}
.b[disabled],.rond[disabled]{opacity:.55;cursor:not-allowed}
.b[aria-busy="true"]{cursor:progress}

/* --- 5. Une demande = une ligne, son état en mots ---------------------------------------------- */

.demandes{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.dem{display:grid;gap:.45rem;padding:.85rem 1rem;border-radius:var(--r-carte);border:var(--hair);
  background:var(--surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:none;color:inherit;
  transition:border-color .35s var(--e-out)}
a.dem:hover{border-color:rgb(var(--c-accent))}
.dem .quoi{margin:0;color:rgb(var(--c-ink));font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.dem .meta{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;margin:0;font-size:var(--fs-small);color:rgb(var(--c-muted))}
.dem .meta .num{margin-left:auto}
.num{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-muted))}
.urgent{display:inline-block;margin-right:.5rem;padding:.05rem .4rem;border-radius:4px;background:rgb(var(--c-ink));
  color:rgb(var(--c-paper));font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;
  vertical-align:.1em}

/* Deux listes tenues par Christopher sur l'accueil : de votre côté, nos idées pour la suite */
.notes{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.notes li{position:relative;padding:.85rem 1rem .85rem 1.9rem;border-radius:var(--r-carte);border:var(--hair);
  background:var(--surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:rgb(var(--c-ink));line-height:1.4;overflow-wrap:anywhere}
.notes li::before{content:"";position:absolute;left:1rem;top:1.15rem;width:.4rem;height:.4rem;border-radius:50%;
  background:rgb(var(--c-muted))}

/* L'état en mots, une forme par état (jamais quatre pastilles jumelles) */
.statut{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-small);font-weight:500;color:rgb(var(--c-ink))}
.statut::before{content:"";flex:none;width:.6rem;height:.6rem;box-sizing:border-box}
.statut[data-s="recue"]::before{border:1.5px solid rgb(var(--c-muted));border-radius:50%}
.statut[data-s="cours"]::before{border-radius:50%;background:conic-gradient(rgb(var(--c-ink)) 0 50%, transparent 0);
  border:1.5px solid rgb(var(--c-ink))}
.statut[data-s="valider"]{color:rgb(var(--c-accent))}
.statut[data-s="valider"]::before{background:rgb(var(--c-accent));border-radius:2px;transform:rotate(45deg)}
.statut[data-s="ligne"]{color:rgb(var(--c-muted))}
.statut[data-s="ligne"]::before{content:"✓";width:auto;height:auto;font-size:var(--fs-small);line-height:1}

/* Les quatre étapes, lisibles d'un coup d'œil */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}
.etapes li{display:grid;gap:.3rem;font-size:var(--fs-label);font-family:var(--f-mono);letter-spacing:.02em;color:rgb(var(--c-muted))}
.etapes li::before{content:"";height:4px;border-radius:2px;background:var(--ligne)}
.etapes li.fait::before{background:rgb(var(--c-ink) / .55)}
.etapes li.ici{color:rgb(var(--c-ink))}
.etapes li.ici::before{background:rgb(var(--c-ink))}

.lien-bas{margin:1.4rem 0 0;text-align:center}
.lien-bas a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:var(--fs-small);color:rgb(var(--c-body))}
.pied{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1rem;margin-top:2.4rem;
  padding-top:1rem;border-top:1px solid var(--ligne-2);font-size:var(--fs-small);color:rgb(var(--c-muted))}

/* Cas creux : le calme, dit en une phrase */
.calme{display:grid;gap:.6rem;margin:0 0 1rem}
.calme .sous{margin:0}
.calme .gros{margin:0;font-family:var(--f-disp);font-weight:800;font-size:var(--fs-h2);line-height:1;color:rgb(var(--c-ink))}
.promesse{margin:0;font-size:var(--fs-small);color:rgb(var(--c-muted))}

/* --- 5 bis. Vos demandes : À vous, En cours, En ligne (Gate A ter, Les onglets, 23/09) ---------- */
/* Seul le soulignement désigne l'onglet courant, les onglets ne bougent pas (catalogue 4.91, 11.22) */
.resume{margin:0 0 1.1rem;color:rgb(var(--c-body))}
.resume b{font-weight:500;color:rgb(var(--c-ink))}
.onglets{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 .9rem;border-bottom:1px solid var(--ligne)}
.onglets[hidden]{display:none}
.onglets a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.9rem;text-decoration:none;
  font-family:var(--f-disp);font-weight:700;font-size:var(--fs-body);color:rgb(var(--c-muted));
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s var(--e-out),border-color .15s var(--e-out)}
.onglets a:hover{color:rgb(var(--c-ink))}
.onglets a .n{font-family:var(--f-mono);font-weight:400;font-size:var(--fs-label)}
.onglets a[aria-current="page"]{color:rgb(var(--c-ink));border-bottom-color:rgb(var(--c-ink))}
.onglets a.vous .n{color:rgb(var(--c-accent))}
/* la recherche : un champ, qui cherche dans les trois onglets à la fois */
/* un label est en mono dans commun.css : la loupe et le champ reprennent la fonte du texte */
.recherche{display:flex;align-items:center;gap:.55rem;min-height:var(--touche);margin:0 0 1rem;padding:0 .9rem;font-family:var(--f-text);
  border-radius:var(--r-ctl);border:1px solid var(--ligne);background:rgb(var(--c-sheet));color:rgb(var(--c-muted));cursor:text}
.recherche:focus-within{border-color:rgb(var(--c-accent));box-shadow:0 0 0 3px rgb(118 79 184 / .14)}
.recherche svg{width:1.05rem;height:1.05rem;flex:none}
/* doublé en spécificité : commun.css habille input[type="search"] et input:focus (0,1,1) d'une bordure, d'un fond et d'un anneau */
.recherche .recherche-champ, .recherche input:focus{flex:1;min-width:0;min-height:calc(var(--touche) - 2px);padding:0;border:none;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;outline:none;
  font-family:var(--f-text);font-weight:300;font-size:max(16px, var(--fs-body));letter-spacing:0;text-transform:none;color:rgb(var(--c-ink))}
.recherche input::placeholder{color:rgb(var(--c-muted))}
.zone-onglet{display:grid;gap:.5rem}
.zone-onglet > .resume{margin-bottom:.4rem}
.groupe{margin:1.1rem 0 .1rem;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:rgb(var(--c-muted))}
.groupe:first-child{margin-top:0}
.dem .etiq{padding:.05rem .45rem;border-radius:4px;border:var(--hair);font-family:var(--f-mono);font-size:var(--fs-label);
  letter-spacing:.04em;color:rgb(var(--c-body))}
.dem .delai{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.03em;color:rgb(var(--c-body))}
.dem .extrait{margin:0;font-size:var(--fs-small);color:rgb(var(--c-muted));overflow-wrap:anywhere}
/* un onglet vide, une recherche sans résultat : dire la portée, jamais de cul-de-sac (catalogue 8.7, 8.13) */
.aucune{display:grid;gap:.6rem;margin:.4rem 0;padding:1.1rem 1rem;border-radius:var(--r-carte);border:1px dashed var(--ligne);
  color:rgb(var(--c-body));text-align:center}
.aucune p{margin:0}
.aucune .b{justify-self:center}
/* depuis l'accueil */
.entree-centre{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:3rem;margin-top:1.4rem;
  padding:0 1rem;border-radius:var(--r-carte);border:var(--hair);background:var(--surface);text-decoration:none;
  color:rgb(var(--c-ink));font-weight:500;transition:border-color .35s var(--e-out)}
.entree-centre:hover{border-color:rgb(var(--c-accent))}
.entree-centre .fl{font-family:var(--f-mono);font-size:var(--fs-label);color:rgb(var(--c-muted))}
/* une demande : ce qui a été fait, puis ses dates */
.realise{display:grid;gap:.35rem;margin:1rem 0;padding:.85rem .95rem;border-radius:var(--r-carte);background:var(--surface);border:var(--hair)}
.realise .ent{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;color:rgb(var(--c-muted))}
.realise p{margin:0;color:rgb(var(--c-ink));line-height:1.45}
.temps{list-style:none;margin:1rem 0 1.2rem;padding:0}
.temps li{position:relative;display:grid;gap:.1rem;padding:0 0 1rem 1.6rem}
.temps li::before{content:"";position:absolute;left:.3rem;top:.35rem;width:.55rem;height:.55rem;border-radius:50%;
  background:rgb(var(--c-ink));box-sizing:border-box}
.temps li::after{content:"";position:absolute;left:.55rem;top:1rem;bottom:0;width:1px;background:var(--ligne)}
.temps li:last-child{padding-bottom:0}
.temps li:last-child::after{display:none}
.temps li.a-venir::before{background:transparent;border:1.5px solid rgb(var(--c-muted))}
.temps .quand{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-muted))}
.temps .quoi{margin:0;color:rgb(var(--c-ink));font-weight:500}
.temps li.a-venir .quoi{color:rgb(var(--c-muted));font-weight:400}
.salut + .statut{margin-bottom:.2rem}

/* --- 6. La barre d'action fixée en bas : UN geste ---------------------------------------------- */

.barre{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:.75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
  background:var(--veil);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--ligne-2)}
.barre .colonne{display:grid;gap:.4rem;padding-inline:0}
.barre .b{width:100%}
.barre .aide{display:block;text-align:center;font-size:var(--fs-label);font-family:var(--f-mono);
  letter-spacing:.04em;color:rgb(var(--c-muted))}

/* --- 7. Demander un changement ------------------------------------------------------------------ */

.feuille-dem{display:grid;gap:.8rem;margin-top:1.2rem}
.feuille-dem .salut{margin-top:.4rem}
.feuille-dem .sous{margin:0}
textarea.saisie{min-height:7.5rem;padding:.9rem;border-radius:var(--r-carte);border:1px solid rgb(var(--c-accent));
  box-shadow:0 0 0 3px rgb(118 79 184 / .14);background:rgb(var(--c-sheet));color:rgb(var(--c-ink));line-height:1.45;resize:vertical}
.outils{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.outils.deux{grid-template-columns:repeat(2,1fr)}
.outils .b{font-size:var(--fs-small);flex-direction:column;gap:.2rem;min-height:4rem;padding:.5rem}
.lien-urgence{justify-self:center;min-height:2.75rem;padding:0 .4rem;border:none;background:none;cursor:pointer;
  font:inherit;font-size:var(--fs-small);color:rgb(var(--c-muted));text-decoration:underline;text-underline-offset:.2em}
body.mode-urgent textarea.saisie{border-color:rgb(var(--c-ink));box-shadow:0 0 0 3px rgb(var(--c-ink) / .12)}
.note-micro{margin:0;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-muted))}
.note-micro:empty{display:none}

/* Pièces en cours d'envoi */
.vignettes{display:flex;flex-wrap:wrap;gap:.5rem}
.vignettes:empty{display:none}
.vignette{position:relative;display:flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.25rem .3rem .25rem .5rem;
  border:var(--hair);border-radius:var(--r-ctl);background:var(--veil);font-family:var(--f-mono);font-size:var(--fs-label)}
.vignette img{width:2rem;height:2rem;object-fit:cover;border-radius:4px}
.vignette .retirer{min-width:2.25rem;min-height:2.25rem;border:none;background:none;cursor:pointer;font:inherit;
  font-size:var(--fs-body);color:rgb(var(--c-muted))}
.vignette.en-cours{color:rgb(var(--c-muted))}
.vignette.en-erreur{border-color:rgb(var(--c-accent));color:rgb(var(--c-accent))}

/* --- 8. Conversation : la reformulation, et les échanges d'une demande ------------------------ */

.fil{display:grid;gap:.55rem;margin:1rem 0}
.jour{justify-self:center;margin:.8rem 0 .2rem;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;
  color:rgb(var(--c-muted))}
.bulle{max-width:85%;padding:.6rem .8rem;border-radius:14px;line-height:1.4;font-size:var(--fs-body);overflow-wrap:anywhere}
.bulle.seb{justify-self:end;background:rgb(var(--btn-bg));color:rgb(var(--btn-fg));border-bottom-right-radius:4px}
.bulle.lui{justify-self:start;margin:0;background:var(--surface);border:var(--hair);border-bottom-left-radius:4px;color:rgb(var(--c-ink))}
.bulle .qui{display:block;margin-bottom:.15rem;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;opacity:.7}
.bulle .h{display:block;margin-top:.2rem;font-family:var(--f-mono);font-size:var(--fs-label);opacity:.6;text-align:right}
.bulle span{white-space:pre-wrap}
.bulle .qui,.bulle .h,.bulle .vocal{white-space:normal}
.bulle .lien-apercu{display:inline-block;margin-top:.4rem;font-weight:500;color:rgb(var(--c-accent))}
.note-systeme{justify-self:center;margin:.1rem 0;max-width:90%;text-align:center;font-family:var(--f-mono);
  font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-muted))}
.compris{justify-self:start;width:100%;display:grid;gap:.6rem;padding:.85rem .9rem;border-radius:var(--r-carte);
  background:rgb(var(--c-sheet));border:1px solid var(--ligne);box-sizing:border-box}
.compris .quoi{margin:0;font-weight:500;color:rgb(var(--c-ink));line-height:1.35;overflow-wrap:anywhere}
.compris .meta{margin:0;font-size:var(--fs-small);color:rgb(var(--c-muted))}
.fil .attente{margin-bottom:0}

.pieces{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.pieces img{display:block;width:100%;height:auto;max-width:14rem;border-radius:8px}
.pieces audio{width:100%;max-width:16rem}
.pj{display:inline-block;padding:.2rem .5rem;border:var(--hair);border-radius:var(--r-ctl);background:var(--veil);
  color:inherit;font-size:var(--fs-small);text-decoration:none}
.vocal{display:flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;opacity:.8}
.vocal svg{width:1rem;height:1rem}
.transcrit{display:block;margin-top:.3rem;font-style:italic}

/* Ce que le client a montré sur son site */
.etiquette{display:grid;gap:.3rem;margin-bottom:.5rem;padding:.6rem .8rem;border-radius:10px;border:1px dashed var(--ligne);
  font-size:var(--fs-small)}
.etiquette .quoi{margin:0;color:rgb(var(--c-ink))}
.etiquette .capture{display:block;width:100%;height:auto;margin-top:.3rem;border-radius:6px;border:var(--hair)}

/* Composeur d'une demande : photo, texte, vocal, envoyer */
.compo{display:flex;align-items:flex-end;gap:.45rem}
.compo textarea.champ{flex:1;min-width:0;min-height:var(--touche);max-height:9rem;padding:.8rem .95rem;border-radius:1.6rem;
  resize:none;line-height:1.35}
.rond{flex:none;display:grid;place-items:center;width:var(--touche);height:var(--touche);padding:0;border-radius:50%;
  border:1px solid var(--ligne);background:rgb(var(--c-sheet));color:rgb(var(--c-ink));cursor:pointer;
  transition:border-color .35s var(--e-out)}
.rond:hover{border-color:rgb(var(--c-accent))}
.rond.fort{background:rgb(var(--btn-bg));color:rgb(var(--btn-fg));border-color:rgb(var(--btn-bg))}

/* pictos au trait, jamais d'emoji */
.b svg,.rond svg{width:1.3rem;height:1.3rem;flex:none}

/* --- 9. L'aperçu : le pic, pleine largeur de la colonne ---------------------------------------- */

.apercu{display:grid;gap:1rem;margin-top:1.2rem}
.apercu > .statut{justify-self:start}
.apercu h1{margin:0;font-size:var(--fs-h2);overflow-wrap:anywhere}
.change{margin:0;padding:.7rem .9rem;border-left:3px solid rgb(118 79 184);background:var(--surface);border-radius:0 8px 8px 0;
  color:rgb(var(--c-ink))}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.duo figure,.seule figure{margin:0;display:grid;gap:.35rem}
.duo figcaption,.seule figcaption{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;
  color:rgb(var(--c-muted))}
.duo figure.apres figcaption,.seule figure.apres figcaption{color:rgb(var(--c-accent))}
.duo a,.seule a{display:block}
.duo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;border:var(--hair)}
.seule img{display:block;width:100%;height:auto;border-radius:8px;border:var(--hair)}
.duo figure.apres img,.seule figure.apres img{outline:2px solid rgb(118 79 184);outline-offset:3px}
.lien-page{justify-self:start;min-height:2.75rem;padding:0;border:none;background:none;cursor:pointer;font:inherit;
  font-size:var(--fs-small);color:rgb(var(--c-body));text-decoration:underline;text-underline-offset:.2em}
.fait-ok{display:grid;gap:.4rem;margin:0;padding:1rem;border-radius:var(--r-carte);background:var(--surface);border:var(--hair);
  color:rgb(var(--c-ink))}
.fait-ok .quoi{margin:0;color:rgb(var(--c-ink));font-weight:500}
.consigne{margin:0;color:rgb(var(--c-body))}

/* Montrer ce qui ne va pas : toucher l'image, une pastille, un mot */
.pointable{position:relative;line-height:0}
.pointable img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid rgb(var(--c-accent));cursor:crosshair}
.calque{position:absolute;inset:0;pointer-events:none}
.pastille-marque{position:absolute;width:1.5rem;height:1.5rem;border-radius:50%;transform:translate(-50%,-50%);
  background:rgb(118 79 184);border:2px solid #F1EEE8;box-shadow:0 0 0 5px rgb(118 79 184 / .22),0 2px 8px rgb(20 20 16 / .25)}
.pastille-marque.provisoire{background:rgb(var(--c-ink));animation:pulse-marque var(--d-slow) var(--e-in-out) infinite alternate}
@keyframes pulse-marque{to{transform:translate(-50%,-50%) scale(1.15)}}
/* la bulle s'ouvre à côté du doigt (top ou bottom posés en JS), jamais sous une image haute de plusieurs écrans */
.bulle-marque{position:absolute;left:.5rem;right:.5rem;z-index:3;max-width:26rem;margin-inline:auto;display:grid;gap:.5rem;
  padding:.9rem;border-radius:var(--r-carte);border:1px solid rgb(118 79 184 / .45);line-height:1.5;
  background:rgb(var(--c-sheet));box-shadow:0 0 0 4px var(--anneau),0 12px 32px rgb(20 20 16 / .22);
  scroll-margin:5rem 0 calc(var(--barre-h) + 1.5rem)}   /* scrollIntoView tient compte de l'en-tête et de la barre fixes */
.zone-texte{display:grid;gap:.6rem}
.zone-texte[hidden]{display:none}

/* --- 9 bis. Montrer sur le site : la page photographiée, pleine largeur sur téléphone --------- */

.montrer .sous{margin-bottom:1rem}
/* Le menu déroulant de la DA, à la place du <select> natif (app.js § 16, menuDeroulant ; catalogue 4.31).
   Couche supérieure par popover ; sur téléphone, une feuille en bas de l'écran avec la recherche en tête. */
.md{margin-bottom:1rem}
.md-bouton{display:grid;grid-template-columns:1fr auto;row-gap:.15rem;column-gap:.8rem;width:100%;min-height:var(--touche);
  padding:.6rem .95rem;border-radius:var(--r-ctl);border:1px solid var(--ligne);background:rgb(var(--c-sheet));color:rgb(var(--c-ink));
  text-align:left;cursor:pointer;font-family:var(--f-text);transition:border-color .2s var(--e-out),box-shadow .2s var(--e-out)}
.md-bouton:hover,.md-bouton[aria-expanded="true"]{border-color:rgb(var(--c-accent))}
.md-bouton[aria-expanded="true"]{box-shadow:0 0 0 4px var(--anneau)}
.md-bouton:focus-visible{outline:2px solid rgb(var(--c-accent));outline-offset:2px}
.md-etiquette{grid-column:1;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--c-muted))}
.md-choix{grid-column:1;display:flex;align-items:baseline;gap:.6rem;min-width:0}
.md-valeur{min-width:0;font-family:var(--f-disp);font-weight:700;font-size:var(--fs-h3);line-height:1.15;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.md-groupe{flex:none;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-muted))}
.md-chevron{grid-column:2;grid-row:1 / span 2;align-self:center;width:.55rem;height:.55rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform .18s var(--e-out)}
.md-bouton[aria-expanded="true"] .md-chevron{transform:translateY(20%) rotate(225deg)}
.md-panneau{position:fixed;inset:auto;margin:0;padding:.4rem;box-sizing:border-box;display:flex;flex-direction:column;gap:.3rem;
  border-radius:var(--r-carte);border:1px solid var(--ligne);background:rgb(var(--c-sheet));color:rgb(var(--c-ink));
  box-shadow:0 22px 60px -20px rgb(0 0 0 / .45);overflow:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .14s cubic-bezier(.55,0,1,.45),transform .14s cubic-bezier(.55,0,1,.45),overlay .14s allow-discrete,display .14s allow-discrete}
.md-panneau:not(:popover-open){display:none}
.md-panneau:popover-open{opacity:1;transform:none;transition-duration:.18s;transition-timing-function:var(--e-out)}
@starting-style{.md-panneau:popover-open{opacity:0;transform:translateY(-4px)}}
.md-panneau.feuille{left:0;right:0;bottom:0;top:auto;width:auto;max-height:78vh;border-radius:var(--r-carte) var(--r-carte) 0 0;
  border-bottom:none;padding-bottom:calc(.4rem + env(safe-area-inset-bottom));transform:translateY(16px)}
.md-panneau.feuille:popover-open{transform:none}
@starting-style{.md-panneau.feuille:popover-open{transform:translateY(16px)}}
.md-panneau::backdrop{background:transparent}
.md-panneau.feuille::backdrop{background:rgb(0 0 0 / .35)}
.md-recherche{flex:none;display:flex;align-items:center;gap:.5rem;min-height:2.9rem;padding:0 .75rem;border-radius:calc(var(--r-carte) - .3rem);
  border:1px solid var(--ligne);font-family:var(--f-text);color:rgb(var(--c-muted))}
.md-recherche:focus-within{border-color:rgb(var(--c-accent))}
.md-recherche svg{width:1rem;height:1rem;flex:none}
/* doublé en spécificité : commun.css habille input[type="search"] (0,1,1) d'une bordure et d'un fond */
.md-recherche .md-chercher{flex:1;min-width:0;min-height:0;padding:0;border:none;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;outline:none;font-family:var(--f-text);font-weight:300;
  font-size:max(16px, var(--fs-body));letter-spacing:0;text-transform:none;color:rgb(var(--c-ink))}
.md-liste{flex:1;min-height:0;list-style:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;outline:none}
/* commun.css entoure [tabindex]:focus-visible (0,2,0) : la liste prend le focus sur téléphone, l'option active suffit */
.md-panneau .md-liste:focus-visible{outline:none}
.md-titre-groupe{position:sticky;top:0;z-index:1;padding:.75rem .75rem .3rem;background:rgb(var(--c-sheet));font-family:var(--f-mono);
  font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--c-muted))}
.md-option{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:2.75rem;padding:.35rem .75rem;
  border-radius:calc(var(--r-carte) - .35rem);cursor:pointer;line-height:1.25}
.md-option.actif{background:var(--anneau)}
.md-option[aria-selected="true"]{color:rgb(var(--c-accent));font-weight:500}
.md-option[aria-selected="true"]::after{content:"✓";flex:none;font-family:var(--f-mono);font-size:var(--fs-small)}
.md-vide{margin:.4rem .75rem .8rem;font-size:var(--fs-small);color:rgb(var(--c-muted))}
.large{width:100%;max-width:min(72rem, 100% - 2 * var(--pad));margin-inline:auto}
@media (max-width:600px){
  .large{max-width:none}
  .large .pointable img{border-radius:0;border-left:none;border-right:none}
}
.zone-cliche{min-height:12rem}
.zone-cliche .zone-erreur{padding-inline:var(--pad)}
/* squelette à la géométrie de la page attendue, balayage dérivé du texte courant : juste en clair comme en foncé (8.12) */
.squelette-page{position:relative;overflow:hidden;display:grid;place-items:center;width:100%;max-height:70vh;
  border-radius:8px;background:color-mix(in srgb, rgb(var(--c-ink)) 6%, transparent)}
.squelette-page::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb, rgb(var(--c-ink)) 8%, transparent) 50%,transparent 100%);
  animation:balayage 1.6s ease-in-out infinite}
@keyframes balayage{to{transform:translateX(200%)}}
.attente-texte{position:relative;z-index:1;margin:0;padding:0 1rem;text-align:center;font-family:var(--f-mono);
  font-size:var(--fs-label);letter-spacing:.06em;color:rgb(var(--c-muted))}

/* Christopher regarde l'espace d'un client : un bandeau le dit, rien ne part.
   Base à 100 % + 2 marges : avec ses marges négatives, un 100 % seul laisse la place du logo sur la même ligne. */
.bandeau-voir{flex:0 0 calc(100% + 2 * var(--pad));order:-1;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:space-between;
  margin:-.5rem calc(-1 * var(--pad)) .2rem;padding:.45rem var(--pad);background:rgb(var(--c-ink));color:rgb(var(--c-paper));
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em}
.bandeau-voir a{color:inherit}
.haut:has(.bandeau-voir){flex-wrap:wrap}

/* Vos données */
.donnees .bloc-donnees p{margin:0 0 .6rem;color:rgb(var(--c-body))}
.donnees .bloc-donnees a{color:rgb(var(--c-ink))}
.liste-services{margin:0 0 .6rem;padding-left:1.1rem;display:grid;gap:.35rem;color:rgb(var(--c-body))}
.donnees .b{margin-top:.4rem}
.liens-auth{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem}
/* un bouton centre son texte dans sa hauteur, un lien non : sans ça, « Vos données » flotte plus haut */
.liens-auth > *{display:inline-flex;align-items:center}
.pied a{color:inherit}

/* --- 10. Choisir entre des propositions (planche contact : l'écartée reste visible) ----------- */

.proposition{display:grid;gap:.6rem;margin-bottom:1rem;padding:.8rem;border-radius:var(--r-carte);border:var(--hair);
  background:var(--surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.proposition img{display:block;width:100%;height:auto;border-radius:8px;border:var(--hair)}
.proposition .quoi{margin:0;font-family:var(--f-disp);font-weight:800;font-size:var(--fs-h3);line-height:1;color:rgb(var(--c-ink))}
.proposition > .statut{justify-self:start}
.proposition.choisie{border-color:rgb(118 79 184 / .6);box-shadow:0 0 0 4px var(--anneau)}
.proposition.ecartee{opacity:.5}
.proposition.ecartee a{position:relative}
.proposition.ecartee a::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(to bottom right,
  transparent calc(50% - 1px),rgb(var(--c-ink) / .6) calc(50% - 1px),rgb(var(--c-ink) / .6) calc(50% + 1px),transparent calc(50% + 1px))}

/* --- 11. Connexion, invitation, mot de passe --------------------------------------------------- */

.ecran-auth{display:grid;place-items:center;min-height:calc(100vh - 8rem);padding-block:2rem}
.form-auth{position:relative;width:100%;display:grid;gap:1rem;padding:1.75rem 1.5rem;box-sizing:border-box;
  background:var(--surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:var(--hair);border-radius:var(--r-carte)}
.form-auth::before,.form-auth::after{content:"";position:absolute;width:12px;height:12px;border:1px solid rgb(var(--c-ink));
  opacity:.22;pointer-events:none;transition:border-color .6s var(--e-out),opacity .6s var(--e-out)}
.form-auth::before{top:-1px;left:-1px;border-right:none;border-bottom:none;border-top-left-radius:3px}
.form-auth::after{bottom:-1px;right:-1px;border-left:none;border-top:none;border-bottom-right-radius:3px}
.form-auth:focus-within::before,.form-auth:focus-within::after{border-color:rgb(118 79 184);opacity:.75}
.form-auth .salut{margin:0}
.form-auth .sous{margin:0}
.champ-ligne{display:grid;gap:.35rem}
.champ-aide{margin:0;font-family:var(--f-mono);font-size:var(--fs-label);color:rgb(var(--c-muted))}
.champ-erreur{margin:0;font-size:var(--fs-small);font-weight:500;color:rgb(var(--c-accent))}
.champ-erreur:empty{display:none}
.lien-secondaire{justify-self:start;min-height:2.75rem;padding:0;border:none;background:none;cursor:pointer;font:inherit;
  font-size:var(--fs-small);color:rgb(var(--c-muted));text-decoration:underline;text-underline-offset:.2em}
.form-mdp-oublie{display:grid;gap:.75rem;padding-top:1rem;border-top:1px solid var(--ligne-2)}
.form-mdp-oublie form{display:grid;gap:.75rem}
.msg-neutre{margin:0;font-size:var(--fs-small)}

/* Erreur de chargement : dire quoi, proposer de réessayer, jamais de cul-de-sac (8.7) */
.zone-erreur{display:grid;gap:.8rem}
.zone-erreur p{margin:0;color:rgb(var(--c-body))}

/* --- 12. Les quatre portes et le compte (Gate A quater validé le 23/09, gate-a4/portes.html) ---------- */

/* la barre du bas : cinq portes, Demander au centre ; ce qui bouge est l'indicateur de la porte ouverte (4.91) */
.portes{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
  padding:.35rem max(.5rem, calc((100% - 34rem) / 2)) calc(.35rem + env(safe-area-inset-bottom));background:var(--veil);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--ligne-2)}
.portes a{position:relative;display:grid;justify-items:center;gap:.2rem;padding:.35rem 0 .2rem;text-decoration:none;
  color:rgb(var(--c-muted));font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.02em;transition:color .25s var(--e-out)}
.portes a:hover{color:rgb(var(--c-ink))}
.portes a:focus-visible{outline:2px solid rgb(var(--c-accent));outline-offset:-2px;border-radius:8px}
.portes a svg{width:1.35rem;height:1.35rem}
.portes a[aria-current="page"]{color:rgb(var(--c-ink))}
.portes a[aria-current="page"]::before{content:"";position:absolute;top:-.4rem;left:28%;right:28%;height:2px;background:rgb(var(--c-ink))}
.portes a.demander{color:rgb(var(--c-ink))}
.portes a.demander .plus{display:grid;place-items:center;width:3rem;height:3rem;margin-top:-1.3rem;border-radius:50%;
  background:rgb(var(--btn-bg));color:rgb(var(--btn-fg));font-family:var(--f-mono);font-size:1.5rem;line-height:1;
  box-shadow:0 8px 20px -8px rgb(0 0 0 / .5)}
.portes a .pastille{position:absolute;top:.1rem;left:calc(50% + .45rem);min-width:1.05rem;height:1.05rem;padding:0 .2rem;
  box-sizing:border-box;border-radius:999px;display:grid;place-items:center;background:rgb(var(--c-accent));color:#F1EEE8;font-size:.62rem}

/* titres de rubrique d'un compte */
.sec{margin:1.8rem 0 .6rem;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:rgb(var(--c-muted));scroll-margin-top:5.5rem}
/* une carte de lignes, la brique de tout le compte */
.lignes{list-style:none;margin:0;padding:0;border-radius:var(--r-carte);border:var(--hair);background:var(--surface);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}
.lignes > li{display:grid;gap:.3rem;padding:.8rem .95rem;border-top:1px solid var(--ligne)}
.lignes > li:first-child{border-top:none}
.lignes .l{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;min-height:2.2rem;
  text-decoration:none;color:rgb(var(--c-ink))}
a.l:hover .t{text-decoration:underline;text-underline-offset:.2em}
.lignes .l svg{width:1.2rem;height:1.2rem;color:rgb(var(--c-body))}
.lignes .fl{font-family:var(--f-mono);font-size:var(--fs-label);color:rgb(var(--c-muted));white-space:nowrap}
.lignes .fl.vous{color:rgb(var(--c-accent))}
.lignes .v{font-size:var(--fs-small);color:rgb(var(--c-muted));text-align:right}
.lignes .t{font-weight:500;color:rgb(var(--c-ink));line-height:1.3;min-width:0;overflow-wrap:anywhere}
.lignes .d{margin:0;font-size:var(--fs-small);color:rgb(var(--c-body));line-height:1.45}
.lignes .avatar{width:2.2rem;height:2.2rem;font-size:var(--fs-label)}
.action-ligne{justify-self:start;display:inline-flex;align-items:center;min-height:2.75rem;padding:0;border:none;background:none;
  cursor:pointer;font:inherit;font-size:var(--fs-small);color:rgb(var(--c-ink));text-decoration:underline;text-underline-offset:.2em}
.lit{margin:.8rem 0 0;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.02em;line-height:1.5;color:rgb(var(--c-muted))}
.lit a{color:rgb(var(--c-ink))}
.fait-ici{margin:0 0 .5rem;color:rgb(var(--c-ink))}

/* clé et valeur, chiffres alignés */
.kv{display:grid;grid-template-columns:minmax(6.5rem,auto) 1fr;gap:.2rem .9rem;align-items:baseline;margin:0}
.kv dt{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-muted))}
.kv dd{margin:0;color:rgb(var(--c-ink));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kv dd.adresse{white-space:pre-line}
.manque{color:rgb(var(--c-muted))}
.form-compte{display:grid;gap:.8rem}

/* un abonnement ou un devis : quoi, combien, à qui, et ce qu'il a produit ce mois (8.98) */
.abo .l1{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.prix{font-family:var(--f-disp);font-weight:800;font-size:var(--fs-h3);color:rgb(var(--c-ink));white-space:nowrap;
  font-variant-numeric:tabular-nums}
.prix small{font-family:var(--f-text);font-weight:300;font-size:var(--fs-small);color:rgb(var(--c-body))}
.abo .bas{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;margin-top:.15rem}
.abo.propose{background:repeating-linear-gradient(135deg, transparent 0 9px, rgb(var(--c-ink) / .035) 9px 10px)}
.usage{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:var(--fs-label);
  letter-spacing:.03em;color:rgb(var(--c-body))}
.jauge{display:grid;grid-template-columns:repeat(4,1.6rem);gap:.2rem}
.jauge span{height:6px;border-radius:2px;background:var(--ligne)}
.jauge span.on{background:rgb(var(--c-ink))}
.signer{display:grid;gap:.5rem;margin-top:.3rem}
.signer .b{justify-self:start}
.signer .choix .b{justify-self:stretch}

/* une facture = une ligne de relevé */
.lignes > li.facture{grid-template-columns:4.4rem 1fr auto;align-items:baseline;column-gap:.7rem}
.facture .date{white-space:nowrap;font-family:var(--f-mono);font-size:var(--fs-label);color:rgb(var(--c-muted))}
.facture .m{font-variant-numeric:tabular-nums;font-weight:500;color:rgb(var(--c-ink));text-align:right;white-space:nowrap}
.facture .bas{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .6rem}
.facture .bas a{font-family:var(--f-mono);font-size:var(--fs-label);color:rgb(var(--c-ink))}
.prochaine{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.2rem .8rem;margin:1rem 0 0;padding:.9rem .95rem;
  border-radius:var(--r-carte);border:1px solid var(--ligne);background:rgb(var(--c-sheet))}
.prochaine .lib{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;color:rgb(var(--c-muted))}
.prochaine .gros{font-family:var(--f-disp);font-weight:800;font-size:var(--fs-h2);line-height:1;color:rgb(var(--c-ink))}
.prochaine .quand{grid-column:1 / -1;font-size:var(--fs-small);color:rgb(var(--c-body))}

/* interrupteurs de notifications : une vraie case à cocher, rôle switch */
/* commun.css habille tout label en étiquette mono capitale : l'interrupteur est une phrase, on la remet à plat */
.bascule{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem;min-height:2.2rem;cursor:pointer;
  font-family:var(--f-text);font-size:var(--fs-body);letter-spacing:normal;text-transform:none;color:rgb(var(--c-ink))}
input.sw{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:2.6rem;height:1.5rem;margin:0;border-radius:999px;
  background:var(--ligne);cursor:pointer;transition:background-color .2s var(--e-out)}
input.sw::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:rgb(var(--c-sheet));box-shadow:0 1px 2px rgb(0 0 0 / .2);transition:transform .2s var(--e-out)}
input.sw:checked{background:rgb(var(--c-ink))}
input.sw:checked::after{transform:translateX(1.1rem)}
input.sw:focus{box-shadow:none}
input.sw:focus-visible{outline:none;box-shadow:0 0 0 3px var(--anneau)}
input.sw:disabled{opacity:.55;cursor:default}
.force{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:var(--fs-small);color:rgb(var(--c-body))}
.force li::before{content:"✓";margin-right:.5rem;font-family:var(--f-mono);color:rgb(var(--c-ink))}
.force li.non{color:rgb(var(--c-muted))}
.force li.non::before{content:"·"}

/* questions : chaque réponse dit d'où elle vient */
.bulle .source{display:block;margin-top:.45rem;padding-top:.4rem;border-top:1px dashed var(--ligne);font-family:var(--f-mono);
  font-size:var(--fs-label);letter-spacing:.02em;color:rgb(var(--c-muted))}
.bulle.envoi{opacity:.6}
.suggestions{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.suggestions[hidden]{display:none}
.suggestions button{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 .85rem;border-radius:999px;
  border:1px solid var(--ligne);background:rgb(var(--c-sheet));cursor:pointer;font:inherit;font-size:var(--fs-small);color:rgb(var(--c-ink))}
.suggestions button:hover{border-color:rgb(var(--c-accent))}
.lien-demande{justify-self:start;display:inline-flex;align-items:center;min-height:2.5rem;font-size:var(--fs-small);color:rgb(var(--c-ink))}
.questions .compo{margin-top:1rem}

/* identité du compte, en tête */
.qui-compte{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:center;margin:1.4rem 0 .4rem}
.avatar{display:grid;place-items:center;flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:rgb(var(--btn-bg));
  color:rgb(var(--btn-fg));font-family:var(--f-disp);font-weight:800;font-size:var(--fs-body);letter-spacing:.04em}
.qui-compte .avatar{grid-row:span 2;width:3.6rem;height:3.6rem;font-size:var(--fs-h3)}
.qui-compte .n1{font-family:var(--f-disp);font-weight:800;font-size:var(--fs-h2);line-height:1;color:rgb(var(--c-ink))}
.qui-compte .n2{font-size:var(--fs-small);color:rgb(var(--c-body))}
.compte-resume{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.8rem 0 0}
.compte-resume a{display:grid;align-content:start;gap:.15rem;min-width:0;padding:.8rem .9rem;border-radius:var(--r-carte);border:var(--hair);
  background:var(--surface);text-decoration:none;color:inherit;transition:border-color .35s var(--e-out)}
.compte-resume a:hover{border-color:rgb(var(--c-accent))}
.compte-resume .lib{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-muted));overflow-wrap:anywhere}
.compte-resume .gros{font-family:var(--f-disp);font-weight:800;font-size:var(--fs-h3);color:rgb(var(--c-ink));line-height:1.1}
.deconnexion{display:block;margin:1.6rem auto 0;min-height:2.75rem;padding:0 1rem;border:none;background:none;cursor:pointer;
  font:inherit;font-size:var(--fs-small);color:rgb(var(--c-body));text-decoration:underline;text-underline-offset:.2em}

/* --- 13. Payer, régler, s'aider : virement à copier, paramètres de l'appareil, aide ---------------------- */

.mono{font-family:var(--f-mono);font-size:var(--fs-small);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* copier au clic (4.22) : un petit bouton à côté de ce qu'on recopie à la main, jamais la valeur elle-même */
.copier{display:inline-flex;align-items:center;gap:.35rem;min-height:2.25rem;padding:0 .7rem;border-radius:999px;
  border:1px solid var(--ligne);background:rgb(var(--c-sheet));cursor:pointer;font-family:var(--f-mono);
  font-size:var(--fs-label);letter-spacing:.04em;color:rgb(var(--c-ink));transition:border-color .25s var(--e-out)}
.copier svg{width:.95rem;height:.95rem}
.copier:hover{border-color:rgb(var(--c-accent))}
.copier.fait-copie{border-color:rgb(var(--c-accent));color:rgb(var(--c-accent))}
.a-copier{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem}
.virement{gap:.5rem}
.virement .kv{margin-top:.2rem}
.prochaine .reference{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin-top:.3rem;
  font-size:var(--fs-small);color:rgb(var(--c-body))}
.prochaine .action-ligne{grid-column:1 / -1;min-height:2.25rem}

/* sélecteur segmenté (4.30) : la surbrillance mesurée glisse, le contenu ne s'anime pas */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto;justify-self:start;margin:.35rem 0 .1rem;
  padding:.2rem;border-radius:var(--r-ctl);border:1px solid var(--ligne);background:rgb(var(--c-sheet));max-width:100%}
.seg button{position:relative;z-index:1;min-height:2.5rem;padding:0 .9rem;border:none;background:none;border-radius:calc(var(--r-ctl) - .2rem);
  cursor:pointer;font:inherit;font-size:var(--fs-small);color:rgb(var(--c-body))}
.seg button[aria-checked="true"]{color:rgb(var(--btn-fg))}
.seg button:focus-visible{outline:2px solid rgb(var(--c-accent));outline-offset:2px}
.seg-surbrillance{position:absolute;top:.2rem;bottom:.2rem;left:0;border-radius:calc(var(--r-ctl) - .2rem);background:rgb(var(--btn-bg));
  will-change:transform}
.seg[data-pret] .seg-surbrillance{transition:transform 250ms cubic-bezier(.23,1,.32,1), width 250ms cubic-bezier(.23,1,.32,1)}

/* installer sur l'écran d'accueil : des étapes numérotées, ou le vrai bouton quand Chrome le propose */
.installer{display:grid;gap:.7rem}
.installer .b{justify-self:start}
.etapes-install{margin:0;padding-left:1.2rem;display:grid;gap:.4rem;font-size:var(--fs-small);color:rgb(var(--c-body));line-height:1.45}
.etapes-install li::marker{font-family:var(--f-mono);color:rgb(var(--c-muted))}

/* aide : des questions qui s'ouvrent sur place */
.faqs > details{border-top:1px solid var(--ligne)}
.faqs > details:first-child{border-top:none}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:3rem;padding:.4rem .95rem;cursor:pointer;
  list-style:none;font-weight:500;color:rgb(var(--c-ink))}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:rgb(var(--c-muted));transition:transform .25s var(--e-out)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid rgb(var(--c-accent));outline-offset:-2px}
.faq p{margin:0;padding:0 .95rem .9rem;font-size:var(--fs-small);color:rgb(var(--c-body));line-height:1.5}
.faq a,.lit a{color:rgb(var(--c-ink))}

@media (prefers-reduced-motion:reduce){
  .pastille-marque.provisoire{animation:none}
  .squelette-page::after{animation:none}
  .hors-ligne,.b,.rond,.dem,.onglets a,.entree-centre,.md-bouton,.md-chevron,.md-panneau,.portes a,.compte-resume a{transition:none}
  input.sw,input.sw::after,.copier,.faq summary::after{transition:none}
  .seg[data-pret] .seg-surbrillance{transition:none}
}

/* Connexion unique (Gate A six, la porte) : la phrase d'après et les liens légaux, visibles avant tout mot de passe saisi. */
.bloc-auth{width:100%;display:grid;gap:0}
.apres-connexion{margin:0;font-size:var(--fs-small);line-height:1.5;color:rgb(var(--c-body))}
.liens-legaux{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.25rem;margin-top:.75rem;font-size:var(--fs-small)}
.liens-legaux a{display:inline-flex;align-items:center;min-height:2.75rem;color:rgb(var(--c-muted));text-decoration:underline;text-underline-offset:3px}
.liens-legaux a:hover{color:rgb(var(--c-ink))}
.liens-legaux a:focus-visible{outline:2px solid rgb(118 79 184);outline-offset:2px;border-radius:3px}