/* IRL Comptoir — même direction artistique que l'app grand public, et depuis le 24/09 le
   même SYSTÈME D'INTERFACE (base.css) : plans anthracite, bouton de 48, rond de Fermer,
   icônes tracées, titres de section de l'app. Un tableau de bord reste dense : les
   tableaux perdent leurs filets durs plutôt que leur lisibilité. */

body{background:var(--n0)}
.desk{max-width:1180px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

/* ---------- en-tete ---------- */
.desk-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:calc(18px + env(safe-area-inset-top)) 22px 18px}
.marque{font-family:var(--display);font-weight:900;font-style:italic;font-size:22px;
  letter-spacing:-.01em;text-transform:uppercase}
.marque i{color:var(--or);font-style:italic}
.sous-marque{font-size:13px;color:var(--fumee)}
/* ⚠️⚠️ LE NOM DE L'ÉTABLISSEMENT SE COMPRIME, LES BOUTONS JAMAIS. `.tag` est
   en `white-space: nowrap` — ce qui est juste pour une pastille — et les trois
   enfants de cette rangée gardent `min-width: auto` : la rangée mesurait donc
   375 px dans les 339 disponibles, et « Fermer » sortait de l'écran de 18 px.
   Mesuré à 375 le 17/09/2026 avec « Robert la Frite (rail local) » ; en
   production « Centre de Culture Scientifique de l'ULB » ferait pire.
   ⛔ C'est le NOM qui cède, jamais un bouton : un bouton à demi coupé ne se
   touche pas, un nom tronqué se lit encore. */
.tete-actions{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.tete-actions .tag{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tete-actions button{flex:0 0 auto}
.tag{font-size:12px;font-weight:800;color:#191100;background:var(--jaune);
  padding:0 12px;height:30px;line-height:30px;border-radius:999px;white-space:nowrap}
.tag.or{color:#191100;background:var(--jaune)}
/* « Scanner » et « Quitter » sont des `.bouton.compact` (base.css) : 44 px, rayon plein. */
.btn-scan{min-height:44px}
.btn-sortir{min-height:44px}
/* ⚠️ Sous 400 px « Quitter » garde son tracé et perd son mot (son nom reste lu : `aria-label`) :
   avec les deux mots, le nom de l'établissement tombait à « R… » à 320 px. C'est toujours le
   NOM qui cède — mais il doit encore se lire. */
@media (max-width:400px){ .btn-sortir .txt{display:none} .btn-sortir{width:44px;padding:0} }

/* ---------- navigation en pilules ---------- */
/* La pilule de l'app (`.pilule` d'app/app.css) : 44 px, capitales 800, actif en ambre plein —
   et une icône TRACÉE de 16 px à la place de l'emoji de 15. */
.desk-nav{display:flex;gap:8px;padding:0 22px 18px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%)}
.desk-nav::-webkit-scrollbar{display:none}
.desk-nav a{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;min-height:44px;border-radius:999px;
  color:var(--craie2);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;background:var(--n2);border:1px solid var(--trait)}
.desk-nav a .i{width:16px;height:16px;stroke-width:2}
.desk-nav a.on{background:var(--ambre);border-color:var(--ambre);color:#191100}
/* ⭐ SUR UN TÉLÉPHONE, LA GRILLE 2 × 2 (20/09 — contrat : docs/mockups/comptoir-atelier-telephone.html § 01, « A »).
   La rangée défilait de côté, barre masquée : à 375 on lisait « CLIENTS · MA FICHE · HOR », à 320 deux onglets —
   « Offres » n'était NULLE PART, et rien ne disait qu'il fallait glisser. Sous 640 px les quatre onglets tiennent
   sur deux lignes de 44 ; la barre passe de 59 à 112 px de haut, le prix des deux onglets qu'on ne voyait pas.
   Le masque de fondu part avec le défilement : il annoncerait une suite qui n'existe plus. */
@media (max-width:640px){
  .desk-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;-webkit-mask-image:none;mask-image:none;padding:0 18px 16px}
  .desk-nav a{justify-content:center;min-height:44px;padding:10px 12px}
}
.desk-main{padding:0 22px 32px;min-width:0;flex:1}
/* ⭐ AU BUREAU, UN FORMULAIRE A LA LARGEUR D'UN FORMULAIRE (24/09) : à 1280 px, Ma fiche,
   Horaires et Offres s'étiraient sur 1 136 px — un champ d'heure de 420 px, une ligne de
   texte de 180 signes. Le tableau des clients garde toute la largeur ; eux, 680 px. */
@media (min-width:900px){
  #vue-fiche,#vue-horaires,#vue-offres{max-width:680px}
}

/* ---------- titres ---------- */
/* Le titre d'un écran : celui de l'app (`.ecran-tete h1`), droit et non plus penché. */
.titre-desk{font-family:var(--display);font-weight:900;font-size:26px;
  text-transform:uppercase;letter-spacing:-.02em;margin:0 0 6px;line-height:1.05}
.chapeau{color:var(--fumee);font-size:14px;font-style:italic;margin:0 0 22px;max-width:62ch}
/* ⭐ Le titre de section de l'app (`.f-sec`) : Montserrat 900 italique, capitales, 13 px, l'ambre. */
.h2{font-family:var(--display);font-weight:900;font-style:italic;font-size:13px;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.25;color:var(--ambre);margin:26px 0 12px}

/* ---------- statistiques en cartes ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{background:var(--n1);border:1px solid var(--trait);border-radius:var(--rayon);padding:18px 20px}
.stat .tuile{margin-bottom:12px}
.stat .v{font-family:var(--display);font-weight:900;font-size:32px;line-height:1;
  display:block;margin-bottom:6px;font-variant-numeric:tabular-nums}
.stat .l{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fumee)}
.stat .d{display:block;font-size:13px;color:var(--fumee2);margin-top:5px}
.stat.ve .v{color:var(--vert)} .stat.or .v{color:var(--or)} .stat.cu .v{color:var(--cuivre)}
.stat.ve .tuile{color:var(--vert)} .stat.cu .tuile{color:var(--cuivre)}

/* ---------- entonnoir ---------- */
.entonnoir{background:var(--n1);border:1px solid var(--trait);border-radius:var(--rayon);padding:20px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:12px}
.ent-l{display:grid;grid-template-columns:minmax(130px,160px) 1fr 70px;gap:14px;align-items:center;font-size:13px}
.ent-b{height:30px;background:rgba(255,255,255,.06);border-radius:999px;position:relative;overflow:hidden}
.ent-b i{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;justify-content:center;
  padding:0 12px;font-family:var(--display);font-weight:900;font-size:14px;border-radius:999px;
  background:var(--jaune);color:#191100;min-width:44px;font-variant-numeric:tabular-nums;font-style:normal}
.ent-b i.f2{background:var(--or-sourd);color:#fff}
.ent-b i.f3{background:var(--vert-fond);color:#04220F}
.ent-l .pct{text-align:right;font-size:13px;color:var(--fumee);font-variant-numeric:tabular-nums}

/* ---------- journal ---------- */
.journal{background:var(--n1);border:1px solid var(--trait);border-radius:var(--rayon);padding:8px 6px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fumee2);padding:10px 14px}
td{padding:12px 14px;border-top:1px solid var(--trait)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.quand{white-space:nowrap;font-variant-numeric:tabular-nums}
.defile{overflow-x:auto}
.etat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;white-space:nowrap}
.etat .i{width:15px;height:15px;stroke-width:2.2}
.etat.ok{color:var(--vert)} .etat.ko{color:var(--cuivre)}
/* ⚠️ Sous 640 px la colonne « Offre » part (24/09) : une offre par fiche depuis le 14/09, elle
   disait « Passage » sur chaque ligne — et, mot entier, elle poussait le tableau hors de sa
   carte à 375 px, coupée en « Pass ». L'identifiant technique qu'elle portait avant se coupait,
   lui, sur trois lignes. */
@media (max-width:640px){ .journal .offre{display:none} }

/* ---------- scan ---------- */
/* ⚠️⚠️ `minmax(0, 1fr)`, ET PAS LA PISTE `auto` PAR DÉFAUT. Une piste auto se
   dimensionne sur le MIN-CONTENT de son contenu et ne descend pas en dessous :
   `.scan` mesurait donc 420 px (son `max-width`) dans un écran de 375, et le
   bouton « Valider » du code à six chiffres était coupé — le seul moyen de
   valider sans caméra, c'est-à-dire le chemin de secours du comptoir.
   `minmax(0, 1fr)` autorise la piste à rétrécir ; `place-items: center` centre
   toujours. Mesuré le 17/09/2026 : 420 → 357, bouton entier. */
.voile{position:fixed;inset:0;background:rgba(4,4,5,.82);display:grid;
  grid-template-columns:minmax(0,1fr);place-items:center;padding:18px;z-index:50}
/* Le panneau du scan : le plan d'une feuille, son arrondi — plus de filet d'or en tête, que
   rien d'autre ne portait. */
.scan{width:100%;max-width:420px;background:var(--n3);border-radius:var(--rayon);
  border:1px solid var(--trait);padding:20px 22px 22px;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.scan-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
/* Le titre d'une fenêtre, comme celui d'une feuille : droit, sans pictogramme — celui du bouton
   qui l'ouvre suffit. À 18 px « Scanner un code » tient sa ligne jusqu'à 320. */
.scan-tete h2{font-family:var(--display);font-weight:900;font-size:18px;line-height:1.1;
  margin:0;text-transform:uppercase;letter-spacing:-.01em}
@media (max-width:400px){ .voile{padding:12px} .scan{padding:18px 18px 20px} }
.fermer{width:44px;height:44px}
.viseur{position:relative;aspect-ratio:1;background:#000;border-radius:var(--r-ctl);
  overflow:hidden;margin-bottom:14px}
.viseur video{width:100%;height:100%;object-fit:cover;display:block}
.viseur .cadre{position:absolute;inset:16%;border:3px solid var(--jaune);border-radius:var(--r-ctl);pointer-events:none}
.viseur .msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:22px;color:var(--fumee);font-size:14px}
.saisie{display:flex;gap:10px}
.saisie input{flex:1;min-width:0;height:56px;background:var(--n2);border:1px solid var(--trait-fort);color:var(--craie);
  font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:.16em;padding:0 14px;
  text-align:center;border-radius:var(--r-ctl);font-variant-numeric:tabular-nums}
.saisie .bouton{height:56px}
/* Les six chiffres tiennent leur champ à 320 : ils sortaient à droite, « 00000( ». La bascule est
   MESURÉE : à 26 px les six chiffres font 133 px et tiennent jusqu'à ~330 de large. ⚠️⚠️ APRÈS la
   règle de base : posé avant elle, à spécificité égale, ce correctif PERDAIT — la planche du
   24/09 montrait encore « 00000( » sous la légende qui le disait réglé. La garde `CASCADE` le tient. */
@media (max-width:340px){ .saisie input{font-size:22px;letter-spacing:.1em;padding:0 10px} }
.verdict{margin-top:14px;border-radius:var(--r-ctl);padding:16px 18px;font-size:14px}
.verdict.ok{background:rgba(34,197,94,.15);color:#86EFAC}
.verdict.ko{background:rgba(239,68,68,.15);color:#FCA5A5}
.verdict > b:first-child{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:900;font-size:18px;
  margin-bottom:4px;color:var(--craie);text-transform:uppercase}
.verdict > b:first-child .i{width:22px;height:22px;stroke-width:2.2}
.verdict.ok > b:first-child .i{color:#4ADE80} .verdict.ko > b:first-child .i{color:#FCA5A5} .verdict.du > b:first-child .i{color:var(--jaune)}

/* ---------- connexion ---------- */
.connexion{max-width:420px;margin:0 auto;padding:70px 22px}
.connexion h1{font-family:var(--display);font-weight:900;font-style:italic;font-size:32px;
  margin:0 0 8px;text-transform:uppercase}
.connexion h1 i{color:var(--or);font-style:italic}
/* La saisie de l'app : 48 px, 16 px de texte — sous 16, iOS zoome sur le champ et ne dézoome
   jamais. L'adresse était en police à chasse fixe, à 13 px. */
.connexion input{display:block;width:100%;height:var(--h-btn);background:var(--n2);border:1px solid var(--trait-fort);
  color:var(--craie);font-family:var(--corps);font-size:16px;padding:0 14px;margin:18px 0 12px;border-radius:var(--r-ctl)}
.connexion input::placeholder{color:var(--fumee2);opacity:1}
.err-connexion{font-size:13px;color:var(--cuivre);margin:12px 0 0}
/* Ce que les styles en ligne portaient (24/09) : une règle, sous garde, plutôt qu'un `style=`. */
.connexion .intro{margin:0}
.connexion #perime-msg{margin-bottom:14px}   /* L18 : la raison du refus ne colle pas au bouton du renvoi */
.connexion .note{margin:12px 0 0}
.attente-txt{text-align:center}
#attente .bouton{margin-top:16px}
.tete-marque{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.note-bas{margin:14px 0 0}
.scan .note{margin:10px 0 0}

@media (max-width:640px){
  .desk-tete{padding-left:18px;padding-right:18px}
  .desk-main{padding:0 18px 28px}
  .titre-desk{font-size:24px}
  .ent-l{grid-template-columns:1fr;gap:5px}
  .ent-l .pct{text-align:left}
}

/* ═══════════ LA PORTE D'ENTRÉE ═══════════
   Suit `docs/mockups/lien-magique.html`, qui fait contrat. */
/* Le lien de l'app (24/09) : l'or du texte, sans soulignement — la zone de 44 et la place du
   contrat du 20/09 ne bougent pas. */
.lien-nu{display:flex;align-items:center;justify-content:center;min-height:44px;margin:6px auto 0;background:none;border:none;color:var(--accent);
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;gap:4px;padding:0 4px}
.lien-nu .i{width:16px;height:16px;stroke-width:2.2}
.attente-rond{width:56px;height:56px;border-radius:999px;background:rgba(255,215,0,.12);
  border:1px solid rgba(255,215,0,.3);display:flex;align-items:center;justify-content:center;
  margin:6px auto 18px;color:var(--accent)}
.attente-rond .i{width:24px;height:24px}
.attente-titre{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:20px;
  letter-spacing:-.3px;text-align:center;margin:0 0 10px}
.attente-adr{font-family:var(--corps);font-size:14px;
  color:var(--or);word-break:break-all}

/* ═══ L'ESPACE COMMERÇANT (14/09/2026) — contrat : docs/mockups/espace-commercant.html ═══
   Ce qu'un patron tient lui-même : l'état du moment, Ma fiche, Horaires, Offres.
   Les valeurs viennent de base.css (la palette du Comptoir) ; les gabarits
   sont ceux du mockup, mesurés à 375 et 320 px. */
.etat-commerce{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 22px 16px;background:var(--n1);border:1px solid var(--trait);border-radius:var(--rayon);padding:14px 16px}
.etat-commerce .l{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1 1 170px}
.etat-commerce .pt{width:10px;height:10px;border-radius:50%;background:var(--vert);flex:none;margin-top:6px;
  box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.etat-commerce.ferme .pt{background:var(--cuivre);box-shadow:0 0 0 4px rgba(251,146,60,.18)}
.etat-commerce.flou .pt{background:var(--fumee2);box-shadow:none}
.etat-commerce b{display:block;font-size:15px;overflow-wrap:anywhere}
.etat-commerce span{display:block;font-size:13px;color:var(--fumee2)}
.etat-commerce .bouton{flex:1 1 auto}
@media (min-width:641px){ .etat-commerce .bouton{flex:0 0 auto} }
@media (max-width:640px){ .etat-commerce{margin:0 18px 16px} }
.c-carte{background:var(--n1);border:1px solid var(--trait);border-radius:var(--rayon);padding:18px;margin-bottom:12px}
.c-carte h4{margin:0 0 4px;font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.c-carte p{margin:0;font-size:14px;color:var(--fumee)}
.c-carte p+p{margin-top:8px}
.c-carte .bouton.large{margin:4px 0 12px}
.mini-fiche{background:var(--n1);border:1px solid var(--trait);border-radius:var(--rayon);padding:18px;margin-bottom:14px}
.mini-fiche .cat{margin:0 0 4px}
.mini-fiche .nom{font-size:18px}
.mini-fiche .punch{color:var(--or);margin:0 0 8px}
.mini-fiche .meta{font-size:13px;color:var(--fumee2);margin:0}
.mini-fiche .meta.ferme{color:var(--cuivre)}
.groupe{margin:22px 0 6px}
.groupe .gt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin:0 0 4px;color:var(--vert)}
.groupe .gt.jamais{color:var(--fumee2)}
.groupe .gs{font-size:13px;color:var(--fumee2);margin:0 0 12px}
.ligne-c{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--trait)}
.ligne-c.bloc{display:block}
.ligne-c .q{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--fumee2);font-weight:800;margin:0 0 3px}
.ligne-c .r{font-size:15px;overflow-wrap:anywhere;margin:0}
.ligne-c .r.vide{color:var(--fumee2);font-style:italic}
/* Le geste d'une ligne — Modifier, Ajouter, Proposer… — est le lien de l'app : l'or, pas un soulignement blanc. */
.ligne-c .g{color:var(--accent);font-size:14px;font-weight:800;text-decoration:none;
  white-space:nowrap;flex:none;min-height:44px;display:inline-flex;align-items:center;gap:4px;background:none;border:none;
  cursor:pointer;font-family:var(--corps);padding:0 2px}
.ligne-c .aide{font-size:13px;color:var(--fumee2);margin:6px 0 0}
/* ⭐⭐ LES PHOTOS DU COMMERCE (25/09, contrat docs/mockups/commercant-autonome.html, § 1) : les vignettes de la
   fiche, « La une » sur la première, une croix de 44 pour la retirer, un toucher pour mettre une autre en premier. */
.entete-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.entete-l .q{margin:0}
.entete-l .mini{font-size:13px;color:var(--fumee2)}
.vignettes{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vignette{position:relative;width:96px;height:72px;border-radius:12px;background:var(--n2);overflow:hidden}
.vignette img{width:100%;height:100%;object-fit:cover;display:block}
.vignette .une{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  background:rgba(0,0,0,.55);color:#fff;padding:2px 6px;border-radius:999px}
.vignette .mettre-une{position:absolute;inset:0;border:0;background:none;cursor:pointer;padding:0}
.vignette .retirer{position:absolute;right:0;top:0;z-index:1;width:44px;height:44px;border:0;background:none;display:flex;
  align-items:flex-start;justify-content:flex-end;padding:5px;cursor:pointer}
.vignette .retirer span{width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.vignette .retirer .i{width:14px;height:14px;stroke-width:2.4}
.ajout{width:96px;height:72px;border-radius:12px;border:1.5px dashed var(--trait-fort);background:none;color:var(--accent);font-family:var(--corps);
  font-size:13px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.ajout .i{width:20px;height:20px}
/* Un refus du rail — l'adresse que la carte ne trouve pas — se dit SOUS le champ, et rien n'a changé. */
.erreur{font-size:13px;color:var(--cuivre);margin:8px 0 0;line-height:1.45}
.inline input.faux{border-color:rgba(253,168,90,.6)}
/* ⭐ UNE LIGNE EN ÉDITION n'est plus qu'un champ : la valeur et « Modifier » s'effacent le temps de la
   saisie — sinon le numéro s'écrivait deux fois, et « Modifier » restait à côté du champ qu'on modifie.
   Le champ prend la largeur, les deux boutons se partagent la ligne dessous. */
.ligne-c.edition{display:block}
.ligne-c.edition .r,.ligne-c.edition > .g,.ligne-c.edition > div > .aide{display:none}
.inline{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.inline input{flex:1 1 100%;min-width:0;height:var(--h-btn);background:var(--n2);border:1px solid var(--trait-fort);border-radius:var(--r-ctl);
  color:var(--craie);font-size:16px;padding:0 14px;font-family:var(--corps)}
.inline .bouton{flex:1 1 0}
/* Un choix parmi trois — « Un fauteuil roulant passe ? », la nature des horaires : le segment de l'app. */
.trois,.h-nat{display:flex;gap:6px}
.h-nat{margin-bottom:14px}
.trois button,.h-nat button{flex:1;min-height:44px;padding:8px 6px;border-radius:var(--r-ctl);border:1px solid var(--trait);
  font-size:13px;font-weight:700;line-height:1.2;text-align:center;color:var(--craie2);background:var(--n2);cursor:pointer;font-family:var(--corps)}
/* « Je ne sais pas » ne se coupe pas : trois réponses courtes, chacune à sa largeur — le reste se partage. */
.trois button{flex:1 1 auto;white-space:nowrap;padding:8px 10px}
.trois button[aria-pressed="true"],.h-nat button[aria-pressed="true"]{background:var(--ambre);color:#191100;border-color:var(--ambre);font-weight:800}
/* la grille d'horaires — jamais un champ libre */
.h-jour{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:10px 0;border-top:1px solid var(--trait);align-items:start}
.h-jour:first-of-type{border-top:0}
.h-jour .j{font-weight:800;font-size:15px;padding-top:12px}
.h-serv{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.h-in{flex:1;min-width:0;background:var(--n2);border:1px solid var(--trait-fort);border-radius:var(--r-ctl);padding:8px 6px;
  text-align:center;font-size:16px;color:var(--craie);font-family:var(--corps);font-variant-numeric:tabular-nums;min-height:44px;color-scheme:dark}
.h-in.nuit{color:var(--or)}
.h-x{width:44px;height:44px;display:grid;place-items:center;color:var(--fumee);flex:none;background:none;border:none;cursor:pointer;border-radius:50%}
.h-x .i{width:18px;height:18px;stroke-width:2.2}
.h-plus{font-size:13px;font-weight:800;color:var(--accent);text-decoration:none;padding:6px 0;display:inline-flex;align-items:center;gap:4px;position:relative;
  background:none;border:none;cursor:pointer;font-family:var(--corps);min-height:32px}
.h-plus .i{width:15px;height:15px;stroke-width:2.4}
/* « + un service » garde son dessin (un lien court) et prend sa zone de 44 par un ::before — le geste des
   vignettes de l'app (`.cible::before`), pour que la rangée du jour ne grandisse pas de 12 px × 7 jours. */
.h-plus::before{content:"";position:absolute;inset:-6px 0}
.h-ferme{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.h-ferme span{font-size:14px;color:var(--fumee2);font-style:italic}
.bascule{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--fumee);white-space:nowrap;background:none;
  border:none;cursor:pointer;font-family:var(--corps);padding:4px 0;min-height:44px}
.bascule i{width:40px;height:24px;border-radius:99px;background:rgba(255,255,255,.14);position:relative;flex:none;transition:background .15s}
.bascule i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.bascule[aria-pressed="true"] i{background:var(--vert-fond)} .bascule[aria-pressed="true"] i::after{left:19px}
.lecture{font-family:var(--mono);font-size:12px;color:var(--fumee);background:var(--n2);border:1px solid var(--trait);border-radius:var(--r-ctl);padding:12px 14px;
  margin:14px 0 12px;overflow-wrap:anywhere;line-height:1.6}
.lecture b{color:var(--or);font-family:var(--corps);font-size:11px;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:4px}
.lecture.rate{color:var(--cuivre)}
.compteur{font-size:12px;color:var(--fumee2);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}
.compteur.trop{color:var(--cuivre)}
.apercu{background:var(--n2);border:1px dashed var(--trait-fort);border-radius:var(--r-ctl);padding:12px 14px;margin:14px 0}
.apercu .t{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--fumee2);font-weight:800;margin:0 0 6px}
.apercu p{margin:0;font-size:14px}
.apercu .ligne-apercu{margin-top:8px}
.apercu .ligne-apercu.free{color:#86EFAC} .apercu .ligne-apercu.fid{color:var(--or)}
.champ-c{margin-bottom:14px}
.champ-c label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--fumee2);font-weight:800;margin-bottom:6px}
.champ-c input,.champ-c textarea{width:100%;box-sizing:border-box;background:var(--n2);border:1px solid var(--trait-fort);border-radius:var(--r-ctl);
  color:var(--craie);font-size:16px;padding:0 14px;height:var(--h-btn);font-family:var(--corps)}
.champ-c textarea{height:auto;min-height:110px;padding:12px 14px;line-height:1.45;resize:vertical}
.champ-c input::placeholder,.champ-c textarea::placeholder,.inline input::placeholder{color:var(--fumee2);opacity:1}
.p-pied{font-size:13px;color:var(--fumee2);margin:10px 0 0;text-align:center}
.pied-note{font-size:13px;color:var(--fumee2);margin:10px 0 0;text-align:center;line-height:1.5}
.bandeau{margin:0 0 14px;padding:11px 14px;border-radius:var(--r-ctl);font-size:13px;line-height:1.5;
  display:flex;align-items:flex-start;gap:10px;background:rgba(251,146,60,.12);border:1px solid rgba(251,146,60,.35);color:#FDBA74}
.bandeau .i{width:18px;height:18px;flex:none;margin-top:1px}
.bandeau.info{background:rgba(255,255,255,.06);border-color:var(--trait-fort);color:var(--fumee)}
/* la feuille — celle de l'app : son plan, son arrondi de 22, sa poignée */
.feuille-voile{align-items:flex-end;padding:0}
.feuille{width:100%;max-width:480px;max-height:92dvh;overflow:auto;background:var(--n3);border-radius:22px 22px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom));position:relative;box-shadow:0 -12px 44px rgba(0,0,0,.62),0 0 0 1px var(--trait)}
.feuille .poignee{width:40px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);margin:4px auto 16px}
.feuille .croix{position:absolute;right:10px;top:8px;width:44px;height:44px}
.feuille .c-cat{font-size:11px;font-weight:800;color:var(--ambre);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;padding-right:48px}
/* Le titre d'une feuille : celui de l'app (`.f-nom`), droit. */
.feuille h2{font-family:var(--display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 6px;line-height:1.05;padding-right:48px}
.feuille .chapeau{margin-bottom:14px}
.feuille .h2{margin:18px 0 8px}
.feuille .c-carte{background:var(--n2)}
.radio{display:flex;align-items:center;gap:12px;padding:12px 0;min-height:48px;border-top:1px solid var(--trait);font-size:15px;width:100%;
  background:none;border-left:0;border-right:0;border-bottom:0;color:var(--craie);cursor:pointer;font-family:var(--corps);text-align:left}
.radio:first-of-type{border-top:0}
/* Le rond d'une réponse se VOIT éteint : le filet du plan disparaissait sur la feuille. */
.radio i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--fumee2);flex:none;background:none}
.radio[aria-checked="true"] i{border-color:var(--ambre);background:radial-gradient(circle,var(--ambre) 42%,transparent 47%)}
.radio span{display:block;font-size:13px;color:var(--fumee2)}
.pilules{display:flex;gap:8px;flex-wrap:wrap}
/* La pilule de l'app, en casse de phrase : ce sont des phrases (« Ce soir — jusqu'à 01:00 »), pas des filtres. */
.pilule{padding:10px 14px;border-radius:999px;border:1px solid var(--trait);font-size:14px;font-weight:700;color:var(--craie2);white-space:nowrap;
  background:var(--n2);cursor:pointer;font-family:var(--corps);min-height:44px;display:inline-flex;align-items:center}
.pilule[aria-pressed="true"]{background:var(--ambre);color:#191100;border-color:var(--ambre);font-weight:800}
/* 16 px : sous 16, iOS zoome sur le champ — une date comprise. */
.pilule input{margin-left:8px;background:transparent;border:none;color:inherit;font-family:var(--corps);font-size:16px;min-height:36px;color-scheme:dark}
/* La date dans sa pilule : 22 px de haut dans une pilule de 44 — deux cibles, deux gestes (la pilule pose
   l'horizon, la date le choisit). L'entrée prend 36, la pilule rend 7 de rembourrage pour rester à 44. */
.pilule:has(input){padding-top:3px;padding-bottom:3px}
.case{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 14px;border-radius:var(--r-ctl);border:1px solid var(--trait-fort);
  background:var(--n2);text-align:left;color:var(--craie2);font-size:14px;line-height:1.45;cursor:pointer;font-family:var(--corps);margin:12px 0}
.case .coche{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--trait-fort);flex:0 0 auto;margin-top:0;display:grid;place-items:center}
.case .coche .i{width:14px;height:14px;stroke-width:3;color:#191100;opacity:0}
.case[aria-pressed="true"]{border-color:var(--ambre);color:var(--craie)}
.case[aria-pressed="true"] .coche{background:var(--ambre);border-color:var(--ambre)}
.case[aria-pressed="true"] .coche .i{opacity:1}
.vignette-c{display:flex;align-items:center;gap:12px;margin:12px 0}
.vignette-c img{width:72px;height:72px;object-fit:cover;border-radius:12px;background:#000}
.vignette-c span{font-size:13px;color:var(--fumee2)}
/* ⭐ EN HAUT, comme les toasts de l'app (20/09 — contrat : docs/mockups/toast-et-files-telephone.html § 01). Ancré en
   bas et au-dessus de la feuille (60 contre 50), il couvrait « Envoyer » de la feuille de la photo pendant quatre
   secondes chez un patron qui venait d'envoyer une phrase — mesuré à 375. Il ne peut pas passer SOUS la feuille :
   c'est lui qui dit « Il manque la proposition » pendant qu'elle est ouverte. Les feuilles vivent en bas ; lui en haut.
   ⭐ Et depuis le 24/09 il a le DESSIN de celui de l'app : la barre sombre, une icône tracée, le texte blanc. */
.toast-c{position:fixed;left:12px;right:12px;top:calc(16px + env(safe-area-inset-top));bottom:auto;max-width:480px;margin:0 auto;
  display:flex;align-items:flex-start;gap:11px;min-height:50px;box-sizing:border-box;
  background:var(--toast-fond);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:13px 16px;font-size:14px;z-index:60;
  box-shadow:0 14px 36px rgba(0,0,0,.45);color:var(--craie)}
.toast-c .i{width:20px;height:20px;flex:0 0 20px;color:#4ADE80;margin-top:1px}
.toast-c.rate .i{color:var(--cuivre)}
.toast-c b{display:block;color:var(--craie);font-weight:800;margin-bottom:2px}
.toast-c span{display:block;color:var(--fumee);font-size:13px;line-height:1.45}

/* ══ TES CLIENTS, LE VERDICT NOMMÉ, LA CARTE QUI SE RÈGLE (14/09 soir) ═══════
   Contrat : docs/mockups/clients-comptoir.html. Les points d'une carte : or =
   posé, vert = celui qui va se poser quand c'est le Nᵉ, gris = à venir. */
.h2-clients{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.h2-clients small{font-family:var(--corps);font-weight:600;font-style:normal;font-size:13px;color:var(--fumee2);text-transform:none;letter-spacing:0}
.liste-clients{padding:4px 16px}
/* ⭐ LA LIGNE D'UN CLIENT EST UNE GRILLE (24/09) : le nom et son compte en tête, le passage
   DESSOUS sur toute la largeur, la carte au troisième rang. En rangée, les points de la carte
   (117 px pour dix passages) laissaient 45 px au texte à 320 : « aujourd'hui » sortait de sa
   colonne, le prénom se coupait en deux, et chaque renvoi à la ligne laissait un « · » en bout
   de ligne. Mesuré sur les pires données (prénom composé, carte de dix et de douze,
   « récompensé ×2 ») : `docs/mockups/systeme-comptoir.html`. */
.cl{display:grid;grid-template-columns:38px minmax(0,1fr) auto 18px;
  grid-template-areas:"av nom d chev" "av meta meta chev" "av tp tp chev";
  column-gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--trait);width:100%;
  background:none;border-left:0;border-right:0;border-bottom:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cl:first-child{border-top:0}
.cl:focus-visible{outline-offset:-3px;border-radius:10px}
/* L'initiale : l'avatar de l'app, ambre plein. Sur la feuille d'un client elle était peinte du
   fond même de la feuille (#262631 sur #262631) : un « C » d'or flottant sans son rond. */
.cl .av{grid-area:av;width:38px;height:38px;border-radius:50%;background:var(--ambre);display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:16px;color:#191100}
.cl .t{display:contents}
.cl .t b{grid-area:nom;align-self:baseline;font-size:15px;overflow-wrap:break-word;hyphens:manual;line-height:1.2}
/* ⭐ DES MORCEAUX SÉPARÉS D'UN POINT (« aujourd'hui 10:02 · [cadeau] pris · récompensé ×2 »),
   chacun d'un bloc. Le point vit dans l'écart et le bord de la ligne l'avale : un morceau renvoyé à
   la ligne ne commence jamais par « · », et aucune ligne ne finit par lui — écrit dans le texte, il
   finissait une ligne à chaque renvoi. ⚠️ Alignés à GAUCHE seulement : c'est le bord gauche qui
   avale le point. */
.morceaux{display:flex;align-items:center;flex-wrap:wrap;column-gap:13px;row-gap:1px;overflow:hidden}
.morceaux > .m{position:relative;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.morceaux > .m + .m::before{content:"·";position:absolute;left:-9px}
.cl .meta{grid-area:meta;font-size:13px;color:var(--fumee2);margin-top:3px}
.cl .meta .i{width:14px;height:14px;stroke-width:2}
.cl .d{grid-area:d;align-self:baseline;text-align:right;font-size:13px;color:var(--fumee);font-variant-numeric:tabular-nums;white-space:nowrap}
.cl .d b{color:var(--craie)}
.cl > .tp{grid-area:tp;justify-self:start;margin-top:8px}
.cl .chev{grid-area:chev;color:var(--fumee2);width:18px;height:18px}
.tp{display:inline-flex;gap:3px;vertical-align:middle}
.tp i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);display:block}
.tp i.on{background:var(--jaune)} .tp i.due{background:var(--vert-fond)}
.vide-c{text-align:center;padding:22px 10px 16px;color:var(--fumee)}
.vide-c > .i{width:30px;height:30px;display:block;margin:0 auto 10px;color:var(--fumee2)}
.vide-c b{display:block;color:var(--craie);font-size:15px;margin-bottom:6px}
.vide-c p{font-size:14px;margin:0}
/* le verdict nommé */
.verdict.du{background:rgba(255,215,0,.14);color:#FDE68A}
.verdict .qui{display:flex;align-items:center;gap:10px;margin:10px 0 6px;color:var(--craie);font-size:15px;font-weight:700}
.verdict .qui .av{width:30px;height:30px;border-radius:50%;background:var(--ambre);display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:13px;color:#191100;flex:none}
.verdict .tp i{width:10px;height:10px}
.verdict .donne{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);color:var(--craie)}
.verdict .donne > b{display:block;font-size:12px;letter-spacing:.08em;color:inherit;margin-bottom:6px;text-transform:uppercase}
.verdict .donne p{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px}
.verdict .donne p .i{width:17px;height:17px;flex:none;margin-top:1px}
.verdict .donne p.fort{font-size:16px;font-weight:800}
.verdict .donne p+p{margin-top:4px;opacity:.85}
.verdict .fin{margin:8px 0 0;font-size:13px;opacity:.8}
/* la feuille d'un client */
.f-av{width:56px;height:56px;border-radius:50%;background:var(--ambre);display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:24px;color:#191100;margin:0 0 12px}
.f-nom{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:22px;margin:0 0 4px;line-height:1.05;overflow-wrap:anywhere;padding-right:48px}
.f-sous{color:var(--fumee2);font-size:14px;margin:0 0 16px}
.f-bloc{background:var(--n2);border:1px solid var(--trait);border-radius:var(--r-ctl);padding:14px;margin-bottom:10px}
.f-bloc .l{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fumee2);margin:0 0 8px}
.f-bloc p{margin:0;font-size:14px;color:var(--craie)} .f-bloc p+p{margin-top:6px}
.f-bloc p.don{display:flex;align-items:flex-start;gap:8px}
.f-bloc p.don .i{width:17px;height:17px;flex:none;margin-top:1px;color:var(--accent)}
.f-bloc .tp{gap:4px} .f-bloc .tp i{width:14px;height:14px}
.f-liste{font-size:14px;color:var(--fumee);margin:0;padding:0;list-style:none}
/* Un passage : le jour et l'heure sur une ligne, ce qu'il a donné DESSOUS. Sur la même ligne,
   « vendredi 18/09 · 19:02 · récompense · freebie » sortait de la feuille à 320. */
.f-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--trait)}
.f-liste li:first-child{border-top:0}
.f-liste li b{color:var(--craie);font-weight:600}
.f-liste li .h{font-variant-numeric:tabular-nums}
.f-liste li .dons{grid-column:1/-1;margin-top:3px;font-size:13px}
.f-liste li .dons .i{width:14px;height:14px;stroke-width:2;color:var(--accent)}
/* la carte qui se règle */
.c-carte.manque{border:1px solid rgba(251,146,60,.45)}
.pas{display:inline-flex;align-items:center;border:1px solid var(--trait-fort);border-radius:var(--r-ctl);overflow:hidden;background:var(--n2)}
.pas button{width:44px;height:44px;display:grid;place-items:center;color:var(--craie);background:none;border:0;cursor:pointer;font-family:inherit}
.pas button .i{width:18px;height:18px;stroke-width:2.2}
.pas b{width:52px;height:44px;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:20px;
  background:rgba(255,255,255,.04);border-left:1px solid var(--trait);border-right:1px solid var(--trait)}
.aide-c{font-size:13px;color:var(--fumee2);margin:6px 0 0}
/* Ce que les gabarits de comptoir.js écrivaient en `style=` (24/09) : des classes, sous garde. */
.renvoi{margin-top:4px}
.ent-l b{color:var(--craie);font-weight:800}
.c-carte p.sous{margin-bottom:12px}
.c-carte p.alerte-c,.c-carte p.alerte-c b{color:var(--cuivre)}
.champ-c.serre{margin-bottom:6px}
.f-bloc p.suite{margin-top:8px}
.f-bloc p.doux{color:var(--fumee)}
.pied-note.gauche{text-align:left}

/* ═══════════ « SUR LE CHEMIN DE… » (23/09) ═══════════
   Contrat : docs/mockups/balades-comptoir.html. La carte des balades dans
   « Ma fiche », et le rappel d'une ligne au-dessus de la grille des horaires.
   ⛔ Aucune couleur d'alerte : le pied dit ce que change une fermeture, il ne
   reproche rien. Le bouton « Partager la balade » fait 44 — le plancher. */
.c-carte.balades-c{border:1px solid rgba(255,215,0,.22)}
.c-carte.balades-c .bc-tete{display:flex;align-items:center;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--or);margin:0 0 4px}
.c-carte.balades-c .bc-tete .i{width:15px;height:15px;stroke-width:2}
.c-carte.balades-c .bc-chapo{font-size:14px;color:var(--fumee);margin:0 0 4px}
.bc-b{border-top:1px solid var(--trait);padding:12px 0 2px;margin-top:10px}
.bc-l1{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bc-l1 b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:15px;color:var(--craie)}
.bc-jour{display:block;font-size:13px;color:var(--or);margin-top:3px}
.bc-av{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:8px 0 2px;font-size:14px}
.bc-av dt{color:var(--fumee2);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;padding-top:3px}
.bc-av dd{margin:0;color:var(--craie);overflow-wrap:anywhere}
.bc-av dd i{color:var(--fumee2);font-style:normal}
.bc-part{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--accent);font-size:14px;font-weight:800;
  text-decoration:none;background:none;border:0;padding:0 2px;cursor:pointer;font-family:var(--corps)}
.bc-part .i{width:17px;height:17px;stroke-width:2}
.c-carte.balades-c .bc-pied{font-size:13px;color:var(--fumee2);border-top:1px solid var(--trait);padding-top:10px;margin-top:8px}
.c-carte.balades-c .bc-pied b{color:var(--craie)}
.h-rappel{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--fumee2);background:var(--n1);border:1px solid rgba(255,215,0,.22);border-radius:var(--r-ctl);padding:12px 14px;margin:0 0 14px}
.h-rappel .i{width:16px;height:16px;flex:none;margin-top:1px;color:var(--or);stroke-width:2}
.h-rappel b{color:var(--craie)}