/* app.css — SUF-B. Refonte graphique du 27/08/2026.
 *
 * Référence : les maquettes validées par Pierre — `work/design/Etape1.dc.html`,
 * `Main.dc.html`, `Recap.dc.html`. Les valeurs ci-dessous en sont RELEVÉES, pas
 * approchées. (`Tactile` et `Efficace` sont les directions écartées.)
 *
 * Ce qui a changé depuis la version du 26/08, et pourquoi c'est plus qu'un ravalement :
 *   · le corps passe de 11–14 px à 15–16 px. La page se lit debout, à bout de bras,
 *     à la sortie d'une réunion — pas sur un bureau ;
 *   · les cibles tactiles passent à 44 px (les +/− font 38 px dans un conteneur de 44) ;
 *   · les titres passent en Fraunces : une page de groupe scout n'est pas un
 *     back-office, et la sobriété n'oblige pas à la sécheresse.
 *
 * ⚠️ CE N'EST TOUJOURS PAS LA CHARTE OFFICIELLE DES SCOUTS UNITAIRES DE FRANCE,
 * et rien ici ne prétend l'être. Le marine et l'or viennent de la maquette
 * validée par Pierre ; le marine #002080 était lui-même relevé au pixel le
 * 26/08 dans les captures de `sources/_extrait-docx-badges/`. À confirmer.
 */
[hidden]{display:none !important}

:root{
  /* relevés dans les maquettes du 27/08/2026 */
  --marine:#002080; --marine-fonce:#001657;
  --or:#e2c169;            /* accent SUR fond marine */
  --or-fonce:#c08000;      /* le même rôle sur fond clair, contraste suffisant */
  --encre:#15181f; --encre-douce:#3d4453;
  --gris:#5a6373; --gris-clair:#8a919e;
  --bord:#dfe3ea; --sep:#eef0f4; --panneau:#f3f6fb;
  --ciel:#9fb3dd;          /* texte secondaire sur marine */
  --rouge:#b00000; --vert:#007060; --ok:#0a6b3d;
  --r:10px; --r-vign:8px; --r-pastille:999px;
  --pad:20px;
  --titre:Fraunces, Georgia, 'Times New Roman', serif;
  --corps:'Public Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:400 16px/1.5 var(--corps);
  color:var(--encre); background:#fff;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(104px + env(safe-area-inset-bottom));
}
h1,h2,h3{margin:0;font-family:var(--titre);font-weight:600;line-height:1.15}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--or);outline-offset:2px}

/* ---------------------------------------------------------------- bandeau */
.bandeau{background:var(--marine);color:#fff;padding-top:env(safe-area-inset-top)}
.bandeau-in{max-width:560px;margin:0 auto;padding:20px var(--pad) 16px;
            display:flex;flex-direction:column;gap:10px}
.bandeau-groupe{margin:0;display:flex;align-items:center;gap:10px;
  color:var(--ciel);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.lys{flex:none;color:var(--or)}
.bandeau h1{font-size:26px;color:#fff}
.bandeau-sous{margin:0;color:var(--ciel);font-size:13.5px}

.fil-ligne{display:flex;gap:6px;align-items:center;margin-top:2px}
.fil{flex:1;display:flex;gap:6px;list-style:none;margin:0;padding:0}
.fil li{flex:1;height:3px;background:#ffffff2e;border-radius:2px}
.fil li[aria-current],.fil li[data-fait]{background:var(--or)}
.fil li span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fil-compte{color:var(--ciel);font-size:12px;margin-left:6px;flex:none}

/* ------------------------------------------------------------------ blocs */
main{max-width:560px;margin:0 auto;padding:28px var(--pad) 0;
     display:flex;flex-direction:column;gap:26px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ-tete{display:flex;align-items:baseline;gap:8px}
label{font-size:16px;font-weight:600;color:var(--encre)}
label .opt{font-size:13px;font-weight:400;color:var(--gris)}
.aide{font-size:13.5px;color:var(--gris);line-height:1.45;margin:0}

input[type=text],input[type=email],input[type=tel],input[type=search],select{
  width:100%;font:400 16px/1.3 var(--corps);color:var(--encre);background:#fff;
  border:1px solid var(--bord);border-radius:var(--r);padding:14px 15px;min-height:52px}
input::placeholder{color:var(--gris-clair)}
input:focus{border-color:var(--marine);border-width:1.5px;padding:13.5px 14.5px}
input[data-rempli]{border-color:var(--marine);border-width:1.5px;padding:13.5px 14.5px}
.err{color:var(--rouge);font-size:13.5px;margin:2px 0 0}

/* Le panneau d'information — même objet dans les trois maquettes. */
.note{background:var(--panneau);border-radius:var(--r);padding:15px 16px;
      display:flex;gap:12px;align-items:flex-start;margin:0}
.note svg{flex:none;margin-top:1px;color:var(--marine)}
.note span{font-size:14px;color:var(--encre-douce);line-height:1.5}

.alerte{max-width:560px;margin:14px auto 0;padding:12px 15px;border-radius:var(--r);
        background:#fff4d6;border:1px solid var(--or);color:#5a4300;font-size:14px}
.alerte[data-ton="erreur"]{background:#fdecec;border-color:#e4a3a3;color:#7a1414}

/* ---------------------------------------------------------------- boutons */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border:1.5px solid var(--bord);background:#fff;color:var(--encre-douce);
    border-radius:var(--r);min-height:50px;padding:0 18px;
    font-size:16px;font-weight:500;cursor:pointer}
.bt-prim{background:var(--marine);border-color:var(--marine);color:#fff;
         font-size:16.5px;font-weight:600;min-height:52px}
.bt-prim[disabled]{opacity:.42}
.bt-large{width:100%}
/* Le bouton qui PORTE l'information au lieu de la laisser flotter à côté
   (Pierre, 28/08). Deux lignes empilées ; la cible reste bien au-delà des 44 px
   de la direction A — `min-height` passe à 58 px pour que la seconde ligne ne
   rogne pas la première. */
.bt-empile{flex-direction:column;gap:2px;line-height:1.18;min-height:58px;padding:9px 14px}
.bt-mention{font-size:12px;font-weight:500;opacity:.88;text-align:center}
.bt-lien{border:none;background:none;color:var(--marine);text-decoration:underline;
         min-height:44px;padding:0;font-weight:500;font-size:15px}

/* ---------------------------------------------------------------- filtres */
.filtres{position:sticky;top:0;z-index:5;background:#fff;
         padding:16px 0 10px;margin:-28px 0 0}
.recherche{position:relative;display:flex;align-items:center}
.recherche svg{position:absolute;left:13px;color:var(--gris);pointer-events:none}
.recherche input{padding-left:40px}
.puces{display:flex;gap:7px;overflow-x:auto;padding:12px 0 2px;-webkit-overflow-scrolling:touch}
.puce{flex:none;display:inline-flex;align-items:center;gap:6px;
      border:1px solid var(--bord);background:#fff;color:var(--encre-douce);
      border-radius:var(--r-pastille);padding:7px 13px;min-height:44px;
      font-size:13.5px;cursor:pointer;white-space:nowrap}
.puce[aria-pressed=true]{background:var(--marine);border-color:var(--marine);
                         color:#fff;font-weight:600}
.pastille{width:9px;height:9px;border-radius:50%;flex:none}
.pastille-jaune{background:#f2c200}.pastille-verte{background:var(--vert)}
.pastille-rouge{background:var(--rouge)}
.compte{font-size:13px;color:var(--gris);margin:2px 0 0}

/* ------------------------------------------------------- lignes d'articles */
.groupe{margin:0}
.groupe > h2{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
             color:var(--gris);margin:0 0 2px;font-family:var(--corps)}
.grille{display:flex;flex-direction:column}

.art{display:flex;align-items:center;gap:14px;padding:14px 0;
     border-bottom:1px solid var(--sep)}
.art:last-child{border-bottom:none}
.vign{flex:none;width:52px;height:52px;border-radius:var(--r-vign);
      background:var(--panneau);object-fit:contain}
.vign-abs{display:grid;place-items:center;font-size:12px;font-weight:600;
          color:var(--marine);text-align:center;line-height:1.1;padding:2px}
.art-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.art-nom{font-size:15.5px;font-weight:500;color:var(--encre);line-height:1.3;margin:0}
.art-meta{font-size:13px;color:var(--gris);margin:0;line-height:1.4}
.art-sous{font-size:13px;color:var(--gris);margin:0;line-height:1.4}
.prix-nc{color:var(--rouge);font-weight:600}

/* La rangée d'un kit porte une ligne de plus que celle d'un article — la bande
   de ses pièces. Sans cet air supplémentaire les six kits se touchent, et sur un
   téléphone on ne voit plus où l'un finit et où le suivant commence. */
.art-kit{padding:17px 0}

/* ── les pièces d'un kit, en images (Pierre, 28/08/2026) ───────────────────
   Une bande de tuiles sous le prix du kit. Elle s'enroule (`wrap`) : sur un
   téléphone tenu debout, un kit de quatre pièces passe à la ligne au lieu de
   pousser le compteur hors de l'écran.
   ⚠️ 40 px et non 52 : ce sont des pièces, pas des articles. La hiérarchie
   doit se voir sans lire — la vignette de l'article commande, celles du kit
   l'illustrent. Le fichier servi reste le même (104 px), donc les tuiles
   restent nettes sur écran à forte densité, et il n'y a rien de plus à
   télécharger : ce sont les images que la page charge déjà.
   ⚠️ Aucune cible tactile ici : rien n'y est cliquable — la règle des 44 px
   vaut pour ce qu'on touche, et l'ajouter à une image inerte volerait de la
   place au compteur, qui, lui, se touche. */
.kit-pieces{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.kit-piece{position:relative;display:inline-flex;flex:none}
.kit-vign{width:40px;height:40px;border-radius:6px;
          background:var(--panneau);object-fit:contain;
          border:1px solid var(--bord)}
.kit-vign-abs{display:grid;place-items:center;font-size:10px;font-weight:600;
              color:var(--marine);text-align:center;line-height:1.05;padding:2px;
              box-sizing:border-box}
/* le compteur : marine plein, chiffre or — lisible sur n'importe quelle
   vignette, y compris les plus claires (bandes beiges, fleurs blanches). */
.kit-qte{position:absolute;right:-4px;bottom:-4px;
         min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
         display:grid;place-items:center;
         background:var(--marine);color:var(--or);
         font-size:11px;font-weight:700;line-height:1;
         border-radius:var(--r-pastille);border:1.5px solid #fff}

@media print{
  /* Le récapitulatif s'imprime ; la page de choix, non. Si elle l'était tout
     de même, ces tuiles sont de la couleur pour rien sur du papier. */
  .kit-pieces{display:none}
}

/* pastille de couleur de flot — texte court, ordre conservé (titre complet en survol) */
.etiq-flot{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:#6b4700;background:#fff4d6;padding:2px 7px;border-radius:4px;margin-top:2px}
.flot{display:inline-flex;height:13px;border-radius:2px;overflow:hidden;
      border:1px solid #00000022}
.flot-bande{display:block;height:100%}

/* compteur : 44 px de cible, 38 px de bouton — valeurs de la maquette */
.qte{flex:none;display:flex;align-items:center;gap:2px;
     border:1px solid var(--bord);border-radius:var(--r-pastille);padding:2px}
.qte button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
            border:none;background:none;color:var(--marine);font-size:19px;line-height:1;
            cursor:pointer;border-radius:50%}
.qte button[disabled]{color:var(--gris-clair);cursor:default}
.qte output{min-width:22px;text-align:center;font-size:15.5px;font-weight:600;color:var(--encre)}
.qte output[data-zero]{font-weight:400;color:var(--gris-clair)}
.qte .pour{margin-left:6px;min-height:38px;padding:0 8px;font-size:14px}

.var{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.var button{border:1px solid var(--bord);background:#fff;border-radius:var(--r-pastille);
            padding:6px 12px;font-size:13px;cursor:pointer;min-height:38px}
.var button[aria-pressed=true]{background:var(--marine);border-color:var(--marine);color:#fff}
/* ── le visuel de la variante CHOISIE (Pierre, 28/08/2026) ─────────────────
   Matin : « si selection cordelette […] ajouter un visuel de cordelette ».
   Soir  : « la cordelette, il faut la mettre au dessus des flots concernés si
            prise, l'effacer si décochée ».
   Nuit : « il faut la mettre au dessus de la representation visuelle des
            flots. dans la zone d'image ».
   ⚠️ IL A CHANGÉ DE PLACE TROIS FOIS, PAS DE NATURE — et `align-self` a suivi
   à chaque fois, parce que sa valeur ne veut rien dire hors de son parent :
     · dans la rangée `.var` (une LIGNE) → `center` = centré VERTICALEMENT
       entre deux boutons de 38 px ;
     · en tête de `.art-corps` (une COLONNE) → `center` aurait centré
       HORIZONTALEMENT, d'où `flex-start` ;
     · dans `.art-visuels` (une COLONNE de 52 px de large, `align-items:center`)
       → **plus besoin d'aucun `align-self`** : le visuel et la vignette ont la
       MÊME largeur, donc il n'y a rien à aligner. La déclaration est retirée
       plutôt que laissée à une valeur inerte — *un réglage qui ne règle plus
       rien se lit comme un réglage qui compte.*
   🔴 ET LA VRAIE CONTRAINTE EST AILLEURS, MAINTENANT QU'ILS SONT EMPILÉS : la
   largeur du visuel doit être ÉGALE à celle de la vignette. Inégales, la pile
   est en escalier. Ce n'est plus une valeur libre, c'est un INVARIANT entre
   deux règles — et `outils/rendu.mjs` le vérifie, avec un témoin qui refuse
   une largeur différente.
   ⚠️ IL N'EXISTE QUE QUAND LA VALEUR CHOISIE EN A UN. Il n'y a donc AUCUNE
   règle de repli ici, ni cadre, ni fond visible, ni dimension réservée : quand
   la variante « sans » est choisie, la vue ne pose rien dans le DOM et cette
   règle ne s'applique à personne. Une boîte vide de 52 px laissée en place
   dirait « il manque quelque chose », ce qui est faux.
   ⚠️ 52 × 22 ET NON 52 × 52, et le second nombre est CONTRAINT par une mesure :
   le fichier servi est carré (104 px, comme toutes les vignettes de ce projet)
   mais son ENCRE ne fait que 88 × 22 px — une cordelette est un objet allongé.
   À la largeur d'affichage, cette encre occupe 11 px de haut ; une boîte de
   22 px la contient avec de la marge, et `object-fit:cover` retire le blanc
   au-dessus et en dessous au lieu de le faire payer en hauteur de rangée.
   Le rapport encre/boîte est vérifié par `outils/preuves.mjs` : si le dessin
   s'épaississait, la boîte devrait suivre, et on le saurait. */
.var-vign{flex:none;width:52px;height:22px;
          object-fit:cover;border-radius:4px}

/* ── LA ZONE D'IMAGE d'une ligne, quand elle porte PLUS D'UNE image.
   Pierre, 28/08/2026 (nuit) : « dans la zone d'image ».
   ⚠️ ELLE N'EXISTE QUE DANS CE CAS. Une ligne ordinaire garde `.vign` comme
   enfant DIRECT de `.art` — 88 des 98 lignes ne voient pas passer cette règle,
   et c'est délibéré : on ne restructure pas toute une page pour dix lignes.
   `align-items:center` cale les deux images l'une sur l'autre ; comme elles ont
   la même largeur (52 px, invariant vérifié), il n'a rien à corriger — il est
   là pour que ça reste vrai si l'une des deux changeait. */
.art-visuels{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}

.doublon{background:#fff4d6;border:1px solid var(--or);border-radius:var(--r);
         padding:13px 15px;font-size:14px;color:#5a4300;line-height:1.5;margin:0 0 4px}
.doublon b{display:block;margin-bottom:2px}
.reserve{font-size:13.5px;color:#5a4300;background:#fff4d6;border:1px solid var(--or);
         border-radius:var(--r);padding:11px 13px;margin:0 0 6px;line-height:1.45}

/* --------------------------------------------------------------- récap */
.recap-tete{display:flex;align-items:baseline;justify-content:space-between;
            padding-bottom:10px}
.recap-tete h2{font-family:var(--corps);font-size:12px;font-weight:600;
               letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
.recap-tete span{font-size:13px;color:var(--gris)}
.ligne{display:flex;align-items:baseline;gap:12px;padding:12px 0;
       border-top:1px solid var(--sep)}
.ligne:last-of-type{border-bottom:1px solid var(--sep)}
.ligne-qte{font-size:15.5px;font-weight:600;color:var(--marine);min-width:26px}
.ligne-corps{flex:1;display:flex;flex-direction:column;gap:2px}
.ligne-nom{font-size:15.5px;color:var(--encre);line-height:1.35}
.ligne-sous{font-size:13px;color:var(--gris);line-height:1.4}
.ligne-prix{font-size:15.5px;color:var(--encre);white-space:nowrap}
.total{display:flex;align-items:baseline;justify-content:space-between;padding:18px 0 20px}
.total-lib{font-family:var(--titre);font-size:18px;font-weight:600;color:var(--encre)}
.total-val{font-family:var(--titre);font-size:28px;font-weight:600;color:var(--encre);line-height:1}
.total-note{font-size:13.5px;color:var(--rouge);font-weight:500;margin:-12px 0 16px;text-align:right}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
/* `.ref` a été retirée le 27/08 : la refonte a déplacé la référence de commande
   dans le bandeau (`#bandeau-sous`). Trouvée par le SENS INVERSE de la garde de
   SUF-D — du CSS mort qui traîne après une refonte. Les deux qui restent non
   employées ici (`err`, `pour`) le sont dans des états que le banc n'exerce pas :
   l'erreur de saisie, et le bloc enfants éteint par Q22. */

/* ------------------------------------------------- écran de validation */
/* L'espacement des blocs d'un écran est décidé ICI, une fois, et plus dans
   trois attributs `style` posés dans trois vues — c'est ce qui a permis au
   formulaire et au récapitulatif de fusionner sans que leurs écarts se
   contredisent. */
.ecran{display:flex;flex-direction:column;gap:22px}

/* Le bloc d'engagement, en FIN DE FLUX (28/08, soir).
   `scroll-margin-bottom` est la moitié discrète de la décision sur le bouton
   flottant : l'ascenseur amène ce bloc en bas de fenêtre, et sans cette marge
   il s'arrêterait DERRIÈRE la barre fixe. La valeur couvre la barre (bouton
   52 px + 14 px + 20 px = 86 px) et un peu d'air.
   ⚠️ Elle ne remplace PAS `body{padding-bottom}` : celui-là empêche la barre de
   masquer la fin de la page quand on défile à la main, celle-ci place le bloc
   quand c'est le bouton qui défile. Deux gestes, deux garde-fous. */
.engagement{scroll-margin-bottom:104px;margin-top:2px}

/* --------------------------------------------------------------- barre */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;
       border-top:1px solid var(--sep);display:flex;align-items:center;gap:14px;
       padding:14px var(--pad) calc(20px + env(safe-area-inset-bottom));
       box-shadow:0 -2px 16px #00000010}
.barre-total{display:flex;flex-direction:column;gap:1px;flex:none}
.barre-lib{font-size:12.5px;color:var(--gris)}
.barre-total strong{font-family:var(--titre);font-size:23px;font-weight:600;
                    color:var(--encre);line-height:1.1}
.barre-total em{font-size:12px;color:var(--rouge);font-style:normal;font-weight:600}
.barre .bt{flex:1}

.pied{max-width:560px;margin:0 auto;padding:28px var(--pad) 28px;
      color:var(--gris);font-size:13px;line-height:1.5}
.pied p{margin:.5em 0}
/* `.pied-src` retirée le 28/08/2026 avec la ligne qu'elle habillait : une
   règle qui ne s'applique plus à rien se lit comme une règle qui compte. */
.pied-empreinte{font-size:11px;color:var(--gris-clair);opacity:.65;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ impression */
@media print{
  .bandeau .fil-ligne,.barre,.filtres,.bt,.engagement,.doublon,.pied-empreinte{display:none !important}
  body{padding:0}
  .bandeau{background:#fff;color:#000}
  .bandeau h1,.bandeau-groupe,.bandeau-sous{color:#000}
  main{max-width:none;padding-top:16px}
}