/* ══ LA CHARTE DES BOUTONS (tour 5, 15/10/2026) ═══════════════════════════════════════════════════════════════
   Source : « DecoScale App Boutons.dc.html » (Claude Design, export du 15/10), relevée valeur par valeur dans
   `out/design_claude_2026-10-15/INVENTAIRE_BOUTONS.md` § 1. UN SEUL fichier pour les deux pages de l'app
   (`index.html`, `envoi.html`) : deux copies de la même charte auraient divergé (CLAUDE.md, D1).

   Sept niveaux, une classe chacun, toujours posée avec `.btn` :
     .btn.plein      principal (vert) — un seul par écran
     .btn.encre      foncé — le principal d'un encadré, d'un panneau, d'un bandeau
     .btn.vide       secondaire — contour, fond de carte
     .btn.tertiaire  pastille sur une surface douce : se voit sans soulignement
     .btn.retirer    destructif RÉVERSIBLE — pastille, texte rouge, × ; a son « Remettre »
     .btn.couper     destructif SANS PERTE — coupe un lien, n'efface rien (contour fin)
     .btn.effacer    destructif DÉFINITIF — contour rouge épais, corbeille ; ne se rattrape pas
   Trois tailles : normale (par défaut) · .compacte (34 px dessinés, 44 px de cible au téléphone) · .large (pleine
   largeur, au pied d'un écran téléphone). Six états : repos, survol, focus (anneau DÉCOLLÉ, distinct du survol),
   appuyé, désactivé (`:disabled` ou `aria-disabled="true"`), en cours (`.en-cours`, posé par `boutonEnCours`,
   boutons.js : même largeur, un cercle qui tourne à la place de l'icône, pas de second clic).
   Dans un bandeau, le bouton prend la TEINTE du bandeau : `.ton-rouge` (brique, contour rouge), `.ton-ambre`
   (ocre), `.ton-neutre` (le foncé et le cerclé habituels).

   ⚠️ UN SEUL ROUGE (décision du tour 5) : `--bt-rouge` est le rouge de l'app. `index.html` et `envoi.html` en
   font leur `--rouge` ; l'ancienne paire de rouges des erreurs et de l'adresse non confirmée (Mesure, Compte) est partie.
   ⚠️ Aucun nom de jeton ne porte de chiffre (`tests/test_app_theme.py` les lit par `--[a-z-]+`). */
:root{
  --bt-texte:#1a1f1b;--bt-anneau:#2f6d4f;--bt-anneau-ecart:#f7f6f2;
  --bt-principal:#2f6d4f;--bt-principal-survol:#275c43;--bt-principal-presse:#214e39;
  --bt-fonce:#1a1f1b;--bt-fonce-texte:#f7f6f2;--bt-fonce-survol:#2f3632;--bt-fonce-presse:#0a0d0b;
  --bt-second:#ffffff;--bt-second-trait:#7a817c;--bt-second-survol:#efede7;--bt-second-presse:#dedcd4;
  --bt-tert:#efede7;--bt-tert-survol:#dedcd4;--bt-tert-presse:#7a817c;
  --bt-rouge:#b03a2e;--bt-rouge-voile:#fbecea;
  --bt-off-fond:#e6e4de;--bt-off-texte:#6f7671;--bt-off-trait:#dedcd4;
  /* la photo assombrie d'une case (9n) : le foncé y est INVERSÉ dans les deux thèmes */
  --bt-photo:#e7ece7;--bt-photo-texte:#0f1411;
  --bt-photo-second:#161d18;--bt-photo-second-texte:#e7ece7;--bt-photo-second-trait:#6b776f;
  /* les bandeaux (§ 3 de la planche) — en clair, le bandeau rouge est un fond de carte cerné de rouge */
  --bt-bandeau-rouge:#ffffff;--bt-bandeau-rouge-trait:#b03a2e;--bt-bandeau-rouge-epaisseur:1.5px;
  --bt-brique:#8f2f25;--bt-brique-texte:#ffffff;
  --bt-rouge-contour:#ffffff;--bt-rouge-contour-texte:#8f2f25;--bt-rouge-contour-trait:#b03a2e;
  --bt-bandeau-ambre:#f6ecd9;--bt-bandeau-ambre-trait:#e6cf9f;
  --bt-ocre:#7a5410;--bt-ocre-texte:#ffffff;
  --bt-ambre-tert:#ecdcbc;--bt-ambre-tert-texte:#4a3208;
  --bt-ambre-second:#fbf4e6;--bt-ambre-second-texte:#5c3f0c;--bt-ambre-second-trait:#b9944f;
  --bt-bandeau-neutre:#efede7;--bt-bandeau-neutre-trait:#dedcd4;
  /* survol des teintes de bandeau : NON DESSINÉ par Claude Design — un voile, dit au journal */
  --bt-voile-survol:rgba(0,0,0,.08)}
@media(prefers-color-scheme:dark){:root{
  --bt-texte:#e7ece7;--bt-anneau:#7cc39a;--bt-anneau-ecart:#0f1411;
  --bt-fonce:#e7ece7;--bt-fonce-texte:#0f1411;--bt-fonce-survol:#ffffff;--bt-fonce-presse:#cfd6cf;
  --bt-second:#161d18;--bt-second-trait:#6b776f;--bt-second-survol:#1b231e;--bt-second-presse:#27312b;
  --bt-tert:#1b231e;--bt-tert-survol:#27312b;--bt-tert-presse:#6b776f;
  --bt-rouge:#f0897c;--bt-rouge-voile:#3a1d1a;
  --bt-off-fond:#1a2a21;--bt-off-texte:#7d8a81;--bt-off-trait:#27312b;
  --bt-bandeau-rouge:#3a1d1a;--bt-bandeau-rouge-trait:#8a4a42;--bt-bandeau-rouge-epaisseur:1px;
  --bt-brique:#f0897c;--bt-brique-texte:#2a0f0c;
  --bt-rouge-contour:transparent;--bt-rouge-contour-texte:#f6c4bd;--bt-rouge-contour-trait:#c56a5f;
  --bt-bandeau-ambre:#2c2414;--bt-bandeau-ambre-trait:#6b5226;
  --bt-ocre:#e3b66a;--bt-ocre-texte:#1f1608;
  --bt-ambre-tert:#3d321c;--bt-ambre-tert-texte:#f0dcb4;
  --bt-ambre-second:transparent;--bt-ambre-second-texte:#f0dcb4;--bt-ambre-second-trait:#a07f43;
  --bt-bandeau-neutre:#1b231e;--bt-bandeau-neutre-trait:#27312b;
  --bt-voile-survol:rgba(255,255,255,.12)}}

/* ── le moule commun ── */
.btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  border:1px solid transparent;border-radius:12px;padding:12px 16px;margin:0;
  font:600 14px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center;
  white-space:nowrap;text-decoration:none;cursor:pointer;background:var(--bt-second);color:var(--bt-texte);
  -webkit-tap-highlight-color:transparent;transition:background-color .12s,border-color .12s,color .12s}
/* ⚠️ `display` ci-dessus écraserait l'attribut `hidden` (la feuille du navigateur ne pèse rien contre une classe) :
   l'app cache des boutons par `hidden` partout — il doit rester souverain. */
.btn[hidden]{display:none!important}
.btn>svg{flex:none;display:block;width:16px;height:16px}
.btn>svg.forme{width:22px;height:16px}
a.btn,a.btn:hover{text-decoration:none}
.btn:focus{outline:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bt-anneau-ecart),0 0 0 4.5px var(--bt-anneau)}
.btn:active{transform:translateY(1px)}

/* ── les sept niveaux, au repos puis survolés puis appuyés ── */
.btn.plein{background:var(--bt-principal);color:#fff;min-width:132px}
.btn.plein:hover{background:var(--bt-principal-survol)}
.btn.plein:active{background:var(--bt-principal-presse)}
.btn.encre{background:var(--bt-fonce);color:var(--bt-fonce-texte)}
.btn.encre:hover{background:var(--bt-fonce-survol)}
.btn.encre:active{background:var(--bt-fonce-presse)}
.btn.vide{background:var(--bt-second);color:var(--bt-texte);border-color:var(--bt-second-trait)}
.btn.vide:hover{background:var(--bt-second-survol)}
.btn.vide:active{background:var(--bt-second-presse)}
.btn.tertiaire{background:var(--bt-tert);color:var(--bt-texte);border-radius:999px;font-weight:500}
.btn.tertiaire:hover{background:var(--bt-tert-survol)}
.btn.tertiaire:active{background:var(--bt-tert-presse)}
.btn.retirer{background:var(--bt-tert);color:var(--bt-rouge);border-radius:999px;font-weight:500}
.btn.couper{background:var(--bt-second);color:var(--bt-rouge);border-color:var(--bt-rouge)}
.btn.effacer{background:transparent;color:var(--bt-rouge);border:1.5px solid var(--bt-rouge)}
.btn.retirer:hover,.btn.couper:hover,.btn.effacer:hover,
.btn.retirer:active,.btn.couper:active,.btn.effacer:active{background:var(--bt-rouge-voile)}

/* ── désactivé : pleins et pastilles grisés, cerclés éteints (le définitif garde son fond transparent) ── */
.btn.btn:disabled:not(.en-cours),.btn.btn[aria-disabled="true"]:not(.en-cours){cursor:not-allowed;transform:none;
  background:var(--bt-off-fond);color:var(--bt-off-texte);border-color:transparent}
.btn.btn.vide:disabled:not(.en-cours),.btn.btn.vide[aria-disabled="true"]:not(.en-cours),.btn.btn.couper:disabled:not(.en-cours),
.btn.btn.couper[aria-disabled="true"]:not(.en-cours),.btn.btn.effacer:disabled:not(.en-cours),.btn.btn.effacer[aria-disabled="true"]:not(.en-cours){background:transparent;color:var(--bt-off-texte);
  border:1px solid var(--bt-off-trait)}
a.btn[aria-disabled="true"]{pointer-events:none}

/* ── en cours : même largeur (boutons.js la fige), le cercle à la place de l'icône, aucun second clic ── */
/* ⚠️ Il GARDE la teinte de son niveau (planche § 1.3 : opacité .88 et le cercle, rien d'autre). `boutonEnCours` pose
   `disabled` (pas de second clic) : le désactivé ci-dessus s'écrit donc `:not(.en-cours)` — relevé par les agents Compte
   (12g, 12l, 12o) et Dépôt (9p) du tour 5. */
.btn.en-cours{opacity:.88;pointer-events:none;cursor:progress}
.btn.en-cours>svg{display:none}
.btn.en-cours::before{content:"";flex:none;width:16px;height:16px;box-sizing:border-box;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;opacity:.85;animation:bt-tourne .8s linear infinite}
@keyframes bt-tourne{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.en-cours::before{animation-duration:2.4s}}

/* ── les tailles ── */
.btn.compacte{padding:8px 12px;font-size:13px;border-radius:10px}
.btn.compacte.tertiaire,.btn.compacte.retirer{border-radius:999px}
.btn.compacte>svg{width:14px;height:14px}
.btn.compacte.en-cours::before{width:14px;height:14px}
.btn.large{display:flex;flex:1;align-self:stretch;width:100%;padding:17px 20px;font-size:16px;border-radius:12px}
/* au téléphone, une compacte DESSINE 34 px mais sa zone tactile fait 44 px : elle dépasse le dessin.
   Les libellés passent à la ligne plutôt que d'être coupés (l'anglais est plus long : § 4 de la planche). */
@media(max-width:900px){
  .btn.compacte{position:relative}
  .btn.compacte::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;min-height:100%;
    transform:translateY(-50%)}
  .btn{white-space:normal}
}
/* la case d'une photo assombrie : le foncé y est inversé (9n), le secondaire garde l'allure SOMBRE (9o), dans les deux thèmes */
.btn.sur-photo{background:var(--bt-photo);color:var(--bt-photo-texte)}
.btn.vide.sur-photo{background:var(--bt-photo-second);color:var(--bt-photo-second-texte);border-color:var(--bt-photo-second-trait);
  white-space:normal}

/* ── dans un bandeau : la teinte du bandeau ── */
.ton-rouge{background:var(--bt-bandeau-rouge);border:var(--bt-bandeau-rouge-epaisseur) solid var(--bt-bandeau-rouge-trait);
  color:var(--bt-texte)}
.ton-rouge .btn.plein,.ton-rouge .btn.encre{background:var(--bt-brique);color:var(--bt-brique-texte);min-width:0}
.ton-rouge .btn.vide,.ton-rouge .btn.tertiaire{background:var(--bt-rouge-contour);color:var(--bt-rouge-contour-texte);
  border:1px solid var(--bt-rouge-contour-trait);border-radius:10px;font-weight:600}
.ton-ambre{background:var(--bt-bandeau-ambre);border:1px solid var(--bt-bandeau-ambre-trait);color:var(--bt-texte)}
.ton-ambre .btn.plein,.ton-ambre .btn.encre{background:var(--bt-ocre);color:var(--bt-ocre-texte);min-width:0}
.ton-ambre .btn.tertiaire{background:var(--bt-ambre-tert);color:var(--bt-ambre-tert-texte)}
.ton-ambre .btn.vide{background:var(--bt-ambre-second);color:var(--bt-ambre-second-texte);
  border-color:var(--bt-ambre-second-trait)}
.ton-rouge .btn:hover,.ton-ambre .btn:hover{background-image:linear-gradient(var(--bt-voile-survol),var(--bt-voile-survol))}
.ton-neutre{background:var(--bt-bandeau-neutre);border:1px solid var(--bt-bandeau-neutre-trait);color:var(--bt-texte)}
.ton-rouge .btn.btn:disabled:not(.en-cours),.ton-ambre .btn.btn:disabled:not(.en-cours),
.ton-rouge .btn.btn[aria-disabled="true"]:not(.en-cours),.ton-ambre .btn.btn[aria-disabled="true"]:not(.en-cours){
  background:var(--bt-off-fond);color:var(--bt-off-texte);border-color:transparent;background-image:none}


/* ── tour 6 · depot ── */
/* 15/10 (tour 6 n° 1 et 4) : un libellé n'est JAMAIS rogné. Le moule posait `white-space:nowrap` à l'ordinateur et
   rien ne bornait la largeur : un bouton étiré dans une colonne plus étroite que son libellé (« Générer un nouveau code »,
   « Se connecter pour afficher le code », carte du téléphone, 9e) débordait de sa propre boîte. Le bouton ne dépasse
   plus son conteneur et son libellé passe à la ligne, équilibré — comme il le faisait déjà au téléphone. Un bouton
   qui tient sur une ligne ne change pas : `normal` et `nowrap` ne diffèrent que lorsque la place manque. */
.btn{white-space:normal;max-width:100%;text-wrap:balance}
/* Un RUBAN de cases qui défile (tour 6 n° 3, `rubanCharte` de boutons.js) : trois cases visibles (la page dit la
   largeur), le doigt, le pavé tactile, le clavier, et deux flèches de la charte aux bords — secondaires compactes,
   chevron, posées sur les photos, à mi-hauteur de la première (boutons.js), seulement quand il y a à voir de leur côté. */
.ruban-cases{position:relative;min-width:0}
.ruban-cases:has(> .ruban-defile:empty),.ruban-cases:has(> .ruban-defile[hidden]){display:none}
.ruban-defile{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ruban-defile::-webkit-scrollbar{display:none}
.ruban-defile > *{scroll-snap-align:start}
.ruban-defile:focus{outline:none}
.ruban-defile:focus-visible{border-radius:14px;box-shadow:0 0 0 2px var(--bt-anneau-ecart),0 0 0 4.5px var(--bt-anneau)}
.btn.ruban-fleche{position:absolute;z-index:3;top:50%;margin-top:-17px;width:34px;height:34px;padding:0}
.btn.ruban-fleche.prec{left:8px}
.btn.ruban-fleche.suiv{right:8px}
.btn.ruban-fleche.suiv>svg{transform:scaleX(-1)}
/* ── fin tour 6 · depot ── */