/* Registre — feuille commune.
   Memes jetons que les maquettes : ce sont ceux de l'extension Marteau.
   Aucun style en ligne dans les pages : la politique de securite de contenu
   les interdit (style-src 'self'). */

/* ------------------------------------------------------------- polices
   Servies ici, sous-ensemble latin (accents, œ, €, guillemets compris). Les
   polices Google bloquaient le rendu et obligeaient a ouvrir la CSP. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/polices/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/polices/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/polices/plex-sans-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/polices/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/polices/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/polices/plex-mono-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/polices/plex-mono-700.woff2) format("woff2")}

:root{
  color-scheme:light dark;
  --ground:#F4F6F8; --surface:#FFF; --surface2:#EDF1F5; --line:#DCE3EA;
  --ink:#141D26; --ink2:#48576A; --dim:#5F6E7F;
  --accent:#B3132C; --accent-wash:#FBEDEF; --on-accent:#FFF;
  --ok:#1B6647; --ok-wash:#E7F3EE; --on-ok:#FFF;
  --warn:#8A5300; --warn-wash:#FBF1E1;
  --stop:#A3162B; --stop-wash:#FAE9EC;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* Zones de securite (encoche, barre d'accueil). --bas est la place prise en bas
     par la barre d'onglets : voir le bloc telephone, en fin de fichier. */
  --haut:env(safe-area-inset-top,0px);
  --bas:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0E141B; --surface:#151D26; --surface2:#1C2530; --line:#28323E;
    --ink:#E6EBF1; --ink2:#B4C0CD; --dim:#8494A5;
    /* Texte fonce sur les aplats clairs du mode sombre : le blanc tombait a
       2,9:1 sur l'accent et 2:1 sur le vert. */
    --accent:#FF6178; --accent-wash:#2A1219; --on-accent:#141D26;
    --ok:#5FCB9B; --ok-wash:#0F241C; --on-ok:#141D26;
    --warn:#E0A34B; --warn-wash:#241B0D;
    --stop:#FF7085; --stop-wash:#2A1319;
  }
}
*{box-sizing:border-box}
/* L'attribut hidden doit toujours l'emporter sur un display d'auteur. */
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Tirer-pour-actualiser coupe seulement sur les ecrans de tache (classe posee par coquille.js). */
:root.sans-barre-bas{overscroll-behavior-y:none}
body{
  -webkit-tap-highlight-color:transparent;
  background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.discret{color:var(--dim);font-size:13px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:where(button,a,label,summary){touch-action:manipulation}
/* Texte pour les lecteurs d'ecran seulement. */
.cache-visuel{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------------------------- entree */
.entree{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr;place-items:center;padding:24px 16px}
@media(min-width:900px){ .entree{grid-template-columns:1fr 1fr;place-items:stretch;padding:24px} }

.entree .cote{
  display:none;flex-direction:column;justify-content:space-between;
  background:#141D26;color:#E6EBF1;padding:40px 44px;border-radius:16px;
}
@media(min-width:900px){ .entree .cote{display:flex} }
.cote h1{font-size:34px;letter-spacing:-.03em;margin:0;font-weight:700}
.cote p{color:#B4C0CD;max-width:34ch;line-height:1.6;margin:14px 0 0}
.cote .pipe{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.cote .pipe div{display:flex;align-items:center;gap:11px;font-size:13px;color:#A3B1C0}
.cote .pipe b{font-family:var(--mono);font-size:11px;color:#E6EBF1;width:22px;text-align:right}

.boite{width:100%;max-width:400px;justify-self:center;align-self:center;padding:0 8px}
.boite h2{font-size:23px;letter-spacing:-.02em;margin:0 0 6px;font-weight:700}
.boite .sous{color:var(--ink2);margin:0 0 26px;font-size:14px;line-height:1.5}

label{display:block;margin-bottom:16px}
label > span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
input,select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px;
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
input[aria-invalid="true"]{border-color:var(--stop)}
input[readonly]{background:var(--surface2);color:var(--ink2)}

button{font:inherit;cursor:pointer}
button.primaire{
  width:100%;padding:12px;border:none;border-radius:9px;
  background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;
  min-height:46px;
}
button.primaire:active{filter:brightness(.94)}
@media (hover:hover){ button.primaire:hover{filter:brightness(.94)} }
button:disabled{opacity:.55;cursor:default;filter:none}
button.primaire:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

button.second{
  padding:7px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;min-height:34px;
}
button.second:active{background:var(--surface2)}
@media (hover:hover){ button.second:hover{background:var(--surface2)} }
button.danger{color:var(--stop);border-color:var(--stop)}
/* Lien en forme de bouton (page hors ligne, accueil) : accueil.css le precise. */
a.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 16px;
  border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);
  font-size:13px;font-weight:600;text-decoration:none}
a.bouton:active{background:var(--surface2)}
@media (hover:hover){ a.bouton:hover{background:var(--surface2)} }
button.ok{background:var(--ok);color:var(--on-ok);border-color:var(--ok)}

/* Bouton de suite apres un succes : meme forme que le bouton primaire, mais
   c'est un lien, donc il porte sa mise en forme ici et pas en ligne. */
a.suite{
  display:block;text-align:center;text-decoration:none;
  padding:12px;border-radius:9px;background:var(--ok);color:var(--on-ok);
  font-weight:600;font-size:15px;
}
a.suite:active{filter:brightness(.94)}
@media (hover:hover){ a.suite:hover{filter:brightness(.94)} }

.lien{display:inline-block;margin-top:16px;color:var(--accent);font-size:13.5px;text-decoration:none}
.lien:active{text-decoration:underline}
@media (hover:hover){ .lien:hover{text-decoration:underline} }

/* Zone de message : toujours presente dans la page, pour que les lecteurs
   d'ecran annoncent son contenu quand il change. Vide, elle ne prend pas de
   place. */
.message{padding:11px 13px;border-radius:9px;font-size:13.5px;line-height:1.45;margin-bottom:18px}
.message:empty{display:none}
.message:focus{outline:none}
.message.mal{background:var(--stop-wash);color:var(--stop);border:1px solid var(--stop)}
.message.bien{background:var(--ok-wash);color:var(--ok);border:1px solid var(--ok)}
.message.info{background:var(--surface2);color:var(--ink2);border:1px solid var(--line)}

.regles{margin:0 0 18px;padding:11px 13px;border-radius:9px;background:var(--surface2);
  color:var(--ink2);font-size:12.5px;line-height:1.6}
.regles ul{margin:5px 0 0;padding-left:17px}

/* --------------------------------------------------------- application */
.appli{display:flex;min-height:100vh;min-height:100dvh}
.rail{
  width:212px;flex:none;background:#141D26;color:#E6EBF1;
  display:flex;flex-direction:column;padding:16px 0;
}
.rail .tete{display:flex;align-items:center;padding:0 18px 20px}
.rail .marque{font-weight:700;font-size:16px;letter-spacing:-.02em;color:#E6EBF1;text-decoration:none}
.rail .menu{display:none;margin-left:auto;background:none;border:1px solid #28323E;color:#E6EBF1;
  border-radius:8px;padding:5px 10px;font-size:12.5px}
.rail .titre{padding:14px 18px 7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:#8494A5}
.rail a.item,.rail .bientot{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:12.5px;
  color:#B4C0CD;text-decoration:none}
.rail a.item:active{background:#1C2530}
@media (hover:hover){ .rail a.item:hover{background:#1C2530} }
.rail a.item[aria-current="page"]{background:var(--accent);color:var(--on-accent);font-weight:600}
/* Ecrans pas encore construits : visibles pour montrer la suite, mais inertes
   — ni lien, ni focus. */
.rail .bientot{color:#7C8B9C;cursor:default}
.rail .bientot small{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:#7C8B9C}
.rail .bas{margin-top:auto;padding:14px 18px;border-top:1px solid #28323E}
.rail .qui{display:flex;align-items:center;gap:9px;min-width:0}
.rail .qui .nom{font-size:13px;font-weight:600}
.rail .qui .role{font-size:11px;color:#8494A5}
.pastille{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:600;color:#fff;flex:none;background:#48576A}
.rail .deco{background:none;border:none;color:#A3B1C0;font-size:11.5px;padding:0;margin-top:9px}
.rail .deco:active{color:#E6EBF1}
@media (hover:hover){ .rail .deco:hover{color:#E6EBF1} }

.contenu{flex:1;min-width:0;display:flex;flex-direction:column}
.entete{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:14px 24px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.entete h1{font-size:17px;letter-spacing:-.02em;margin:0;font-weight:700}
.entete .lbl{overflow-wrap:anywhere;min-width:0}
.corps{padding:24px;display:flex;flex-direction:column;gap:16px;max-width:980px}
.corps.plein{max-width:none}
.carte{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:18px 20px}
.carte h2,.carte h3{margin:0 0 8px;font-size:15px}
.carte p{margin:0 0 8px;color:var(--ink2);font-size:13.5px;line-height:1.55}
.carte p:last-child{margin-bottom:0}
.carte.alerte{border-color:var(--warn);background:var(--warn-wash)}
.carte.alerte h2{color:var(--warn)}
.carte form{max-width:420px}
.carte .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Liste de sessions */
.session{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.session:last-child{border-bottom:none}
.session .quand{color:var(--dim);flex:none}
.session .quoi{flex:1;min-width:12ch;color:var(--ink2)}
.session .ici{color:var(--ok)}

/* Membres */
.membre{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.membre:last-child{border-bottom:none}
.membre .ident{min-width:0}
.membre .ident b{font-size:14px}
.membre .ident .courriel{display:block;color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
.membre .etats{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:6px}
.membre .boutons{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.membre.inactif .ident{opacity:.6}
.badge{font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:99px;
  background:var(--surface2);color:var(--ink2);white-space:nowrap}
.badge.ok{background:var(--ok-wash);color:var(--ok)}
.badge.warn{background:var(--warn-wash);color:var(--warn)}
.badge.stop{background:var(--stop-wash);color:var(--stop)}
.edition{grid-column:1 / 4;padding:12px 0 4px}
.edition .champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 12px}
.lien-emis{margin-top:12px}
.lien-emis .copie{display:flex;gap:8px}
.lien-emis input{font-family:var(--mono);font-size:12.5px}

/* Page introuvable */
.introuvable{max-width:420px;margin:18vh auto 0;padding:0 16px}

/* ------------------------------------------------ composants des ecrans
   Partages par tous les modules. Mesures reprises des maquettes validees
   (registre/design/mvp). Un module ajoute ses regles propres dans
   /css/<module>.css, jamais ici. */

.rail .navigation{display:flex;flex-direction:column}
.rail .separateur{height:1px;background:#28323E;margin:14px 18px}
.rail .item .n{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;
  min-width:22px;text-align:right;color:#8494A5}
.rail .item[aria-current="page"] .n{color:var(--on-accent)}
.rail .n.chaud{color:#E0A34B}
.rail .n.bon{color:#5FCB9B}
.rail .vac .point{width:6px;height:6px;border-radius:50%;border:1px solid #4E5D6E;flex:none}
.rail .vac[aria-current="page"] .point{background:var(--on-accent);border-color:var(--on-accent)}
.rail .vac .etat{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:#8494A5}
.rail .nouvelle{display:block;margin:6px 18px 2px;padding:7px;border:1px dashed #3A4757;border-radius:7px;
  color:#B4C0CD;font-size:12px;text-align:center;text-decoration:none}
.rail .nouvelle:active{background:#1C2530}
@media (hover:hover){ .rail .nouvelle:hover{background:#1C2530} }
.rail .pill-lu{margin-left:auto;font-family:var(--mono);font-size:10px;padding:1px 7px;border-radius:9px;
  background:#B3132C;color:#fff}
.rail .argent{padding:14px 18px 0}
.rail .argent .valeur{font-family:var(--mono);font-size:20px;font-weight:700;margin-top:3px}
.rail .argent .detail{font-size:11px;color:#A3B1C0;margin-top:2px}

/* Barre d'outils au-dessus d'un contenu */
.outils{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.outils .espace{flex:1}
.entete .outils{margin-left:auto}

/* Tuiles de chiffres */
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tuile{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.tuile .valeur{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:21px;font-weight:700;margin-top:4px}
.tuile .detail{font-size:12px;color:var(--dim);margin-top:2px}
.tuile.chaud .valeur{color:var(--warn)}
.tuile.bon .valeur{color:var(--ok)}

/* Pipeline en colonnes */
.kanban{display:grid;grid-template-columns:repeat(var(--colonnes,4),minmax(210px,1fr));gap:14px;align-items:start;
  overflow-x:auto;padding-bottom:6px}
.colonne{display:flex;flex-direction:column;gap:8px;min-width:0}
.colonne > .tete{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:8px;
  border-bottom:2px solid var(--line)}
.colonne > .tete .lbl{font-size:9.5px}
.colonne > .tete .compte{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--dim)}
.colonne.chaud > .tete{border-bottom-color:var(--warn)}
.colonne.chaud > .tete .lbl,.colonne.chaud > .tete .compte{color:var(--warn)}
.colonne.bon > .tete{border-bottom-color:var(--ok)}
.colonne.bon > .tete .lbl,.colonne.bon > .tete .compte{color:var(--ok)}
.fiche{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:10px 11px;min-width:0;color:var(--ink);font:inherit;font-size:13px;text-decoration:none}
button.fiche{cursor:pointer}
button.fiche:active,a.fiche:active{border-color:var(--dim)}
@media (hover:hover){ button.fiche:hover,a.fiche:hover{border-color:var(--dim)} }
.fiche .titre-fiche{font-size:12.5px;line-height:1.35;color:var(--ink2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fiche .ligne{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fiche .origine{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:4px}
.vignette{width:44px;height:44px;border-radius:6px;flex:none;object-fit:cover;
  background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 7px,var(--line) 7px,var(--line) 14px)}
.vide{background:var(--surface2);border:1px dashed var(--line);border-radius:9px;padding:16px 13px;
  text-align:center;font-size:12.5px;color:var(--ink2);line-height:1.45}

/* Pastilles de verdict et d'etat */
.pill{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:9px;white-space:nowrap;
  background:var(--surface2);color:var(--ink2)}
.pill.ACHETER,.pill.bon{background:var(--ok-wash);color:var(--ok)}
.pill.LIMITE,.pill.chaud{background:var(--warn-wash);color:var(--warn)}
.pill.PASSER,.pill.stop{background:var(--stop-wash);color:var(--stop)}
.pill.A_VOIR{background:var(--surface2);color:var(--ink2)}
.pill.moi{background:var(--accent-wash);color:var(--accent)}

/* Tableau de liste */
table.liste{width:100%;border-collapse:collapse;font-size:13px}
table.liste th{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.liste td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.liste td.nombre,table.liste th.nombre{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.liste tr:last-child td{border-bottom:none}
.defile{overflow-x:auto}

/* Onglets */
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.onglets [role="tab"]{background:none;border:none;border-bottom:2px solid transparent;padding:9px 12px;
  color:var(--ink2);font-size:13.5px;white-space:nowrap}
.onglets [role="tab"][aria-selected="true"]{border-bottom-color:var(--accent);color:var(--ink);font-weight:600}

/* Formulaires en grille */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 12px}
.grille .large{grid-column:1 / -1}
textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:14px;min-height:84px;resize:vertical}
textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.champ-aide{display:block;font-size:12px;color:var(--dim);margin-top:4px;font-weight:400}

/* Fenetre de dialogue */
dialog{border:1px solid var(--line);border-radius:13px;padding:0;background:var(--surface);color:var(--ink);
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
dialog::backdrop{background:rgba(14,20,27,.55)}
dialog .dialogue-tete{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0}
dialog .dialogue-tete h2{margin:0;font-size:17px}
dialog .dialogue-corps{padding:14px 20px}
dialog .dialogue-pied{display:flex;justify-content:flex-end;gap:8px;padding:0 20px 18px}
dialog .fermer{background:none;border:none;color:var(--dim);font-size:20px;line-height:1;padding:4px 8px}

/* Barre d'avancement */
.barre{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--surface2)}
.barre > span{display:block;height:100%}

/* Etiquette de montant */
.montant{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.montant.negatif{color:var(--stop)}
.montant.positif{color:var(--ok)}

.carte .actions .lien{margin-top:0}

/* ------------------------------------------- composants du mode telephone
   Hors media : ils restent invisibles ou inertes a 760 px et plus. */

/* Bandeau « hors ligne » (pose par pwa.js) : colle en haut, dans le flux (ne recouvre pas le bouton Menu), sous la zone de
   securite, au-dessus de la barre du bas ; une fenetre modale passe devant. */
.bandeau-hors-ligne{position:sticky;top:0;z-index:50;
  padding:calc(8px + var(--haut)) 16px 8px;background:var(--warn-wash);color:var(--warn);
  border-bottom:1px solid var(--warn);font-size:13px;line-height:1.4;text-align:center}

/* Barre d'onglets du bas, feuille « Menu » et son fond : absents a 760 px et plus. */
.onglets-bas,.fond-menu,.rail.feuille-menu{display:none}

/* --------------------------------------------------------- telephone
   Sous 760 px : barre du bas, cibles tactiles de 44 px, textes lisibles,
   zones de securite. A 760 px et plus, rien de ce bloc ne s'applique. */
@media (max-width:759px){
  :root{--bas:calc(56px + env(safe-area-inset-bottom,0px))}
  /* Ecrans de tache (tri, estimation, messagerie) : pas de barre du bas. */
  :root.sans-barre-bas{--bas:env(safe-area-inset-bottom,0px)}

  .appli{flex-direction:column;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .entree{padding-top:calc(24px + var(--haut));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  nav.rail{width:auto;padding:calc(10px + var(--haut)) 0 10px}
  .rail .tete{padding:0 16px}
  .rail .menu{display:block;min-height:44px;padding:5px 14px;font-size:14px}
  /* La navigation passe dans la feuille « Menu » (coquille.js) : le rail du haut
     ne garde que la marque et le bouton. */
  nav.rail .navigation,nav.rail .argent,nav.rail .bas{display:none}
  .kanban{grid-template-columns:repeat(var(--colonnes,4),minmax(230px,82vw));
    scroll-snap-type:x mandatory}
  .colonne{scroll-snap-align:start}
  .entete{padding:12px 16px}
  .corps{padding:14px 16px calc(var(--bas) + 16px)}
  .carte{padding:14px 16px}
  .membre{grid-template-columns:auto 1fr}
  .membre .etats,.membre .boutons{grid-column:1 / 3;justify-content:flex-start}
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .message:not(:empty){position:sticky;top:calc(8px + var(--haut));z-index:30}

  /* Zoom iOS : un champ sous 16 px fait zoomer la page au focus. */
  input,select,textarea,.lien-emis input{font-size:16px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;flex:none;padding:0}

  /* Cibles de 44 px. :where() garde une specificite nulle : un ecran peut surcharger. */
  :where(button,a.bouton,a.lien-bouton,a.action,.onglets [role=tab],summary,.lien){min-height:44px}
  :where(a.lien-bouton){display:inline-flex;align-items:center}
  :where(.choix,label:has(>input[type=checkbox]),label:has(>input[type=radio])){
    min-height:44px;display:flex;align-items:center;gap:10px}
  button.second{padding:10px 14px;font-size:14px}
  dialog .fermer{min-width:44px;min-height:44px;font-size:24px}

  /* Textes : aucun libelle sous 11 px, aucun texte d'information sous 13 px. */
  .lbl,table.liste th,.rail .titre,.colonne > .tete .lbl{font-size:11px}
  .pill,.badge{font-size:11.5px}
  .rail .vac .etat,.rail .bientot small,.rail .pill-lu,.fiche .origine{font-size:11px}
  .champ-aide,.tuile .detail,.regles,.vide,.fiche .titre-fiche{font-size:13px}

  /* Barre d'onglets du bas : 5 cases de 56 px. */
  .onglets-bas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;
    bottom:0;z-index:40;height:var(--bas);
    padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
    background:#141D26;border-top:1px solid #28323E}
  .onglets-bas a,.onglets-bas button{position:relative;display:flex;align-items:center;justify-content:center;
    min-height:56px;padding:0 2px;border:none;border-radius:0;background:none;color:#B4C0CD;font:inherit;
    font-size:12px;font-weight:600;text-decoration:none}
  .onglets-bas a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
  .onglets-bas button[aria-expanded="true"]{background:#1C2530;color:#E6EBF1}
  .onglets-bas .pastille-bas{margin-left:5px;min-width:18px;padding:1px 5px;border-radius:9px;
    background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:11px;line-height:1.4;text-align:center}
  .onglets-bas a[aria-current="page"] .pastille-bas{background:var(--on-accent);color:var(--accent)}

  /* Feuille « Menu » : la navigation du rail, fixe au-dessus de la barre. */
  .fond-menu{display:block;position:fixed;inset:0;z-index:44;background:rgba(14,20,27,.55)}
  .rail.feuille-menu{display:flex;position:fixed;inset:auto 0 var(--bas) 0;width:auto;
    max-height:75vh;max-height:75dvh;overflow:auto;overscroll-behavior:contain;z-index:45;
    padding:8px 0 0;border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
  .feuille-menu:focus{outline:none}
  .feuille-menu .navigation{display:flex}
  .feuille-menu a.item,.feuille-menu .bientot{min-height:44px;font-size:14px}
  .feuille-menu .nouvelle{padding:12px;font-size:13px}
  .feuille-menu .bas{margin-top:8px}
  .feuille-menu .deco{display:block;min-height:44px;font-size:14px;margin-top:4px}
}

/* Tableaux : sous 640 px, une ligne devient une fiche (chaque cellule porte son
   intitule, data-label). Copie de reglages.css, que son ecran retirera. */
@media (max-width:640px){
  table.empilable,table.empilable tbody,table.empilable tr,table.empilable td,table.empilable caption{display:block;width:100%}
  table.empilable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.empilable tr{padding:10px 0;border-bottom:1px solid var(--line)}
  table.empilable tr:last-child{border-bottom:none}
  table.empilable td{border:none;padding:3px 0;text-align:left}
  table.empilable td.nombre{text-align:left}
  table.empilable td .sous{display:inline;margin-left:8px}
  table.empilable td[data-label]::before{content:attr(data-label);display:inline-block;min-width:8.5em;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  table.empilable td:first-child::before{display:none}
  table.empilable td:first-child .sous{display:block;margin-left:0}
  table.empilable td.actions{width:auto;text-align:left;padding-top:8px}
}

/* Tableau qui defile : un degrade a droite dit qu'il y a une suite, et disparait
   quand on est au bout (le cache « local » suit le contenu). */
@media (max-width:759px){
  .defile{background:
    linear-gradient(to left,var(--surface),var(--surface)) right center / 20px 100% no-repeat local,
    linear-gradient(to left,rgba(20,29,38,.22),rgba(20,29,38,0)) right center / 16px 100% no-repeat scroll}
}

/* Fenetres : plein ecran sous 600 px. Toujours dialog[open], jamais dialog seul : une
   fenetre fermee s'afficherait. « html » releve la specificite au-dessus des
   dialog.large et dialog .dialogue-pied des feuilles d'ecran, chargees apres celle-ci. */
@media (max-width:599px){
  html dialog[open]{width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
    margin:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
  html dialog > form.fenetre{display:flex;flex-direction:column;flex:1;min-height:0}
  html dialog .dialogue-tete{padding-top:calc(16px + var(--haut));flex:none}
  html dialog .dialogue-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  html dialog .dialogue-pied{flex:none;flex-direction:column-reverse;flex-wrap:nowrap;gap:8px;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  html dialog .dialogue-pied button{width:100%;min-height:48px}
  body:has(dialog[open]){overflow:hidden}
}

/* Visionneuse de photos : plein ecran a toutes les largeurs, fond fixe sombre (clair comme
   sombre). « html dialog.visionneuse[open] » passe devant « html dialog[open] » ci-dessus. */
.lot-photos .lot-photo{display:block;width:100%;padding:0;border:0;background:none;border-radius:7px;cursor:zoom-in}
html dialog.visionneuse[open]{position:fixed;inset:0;width:100%;max-width:100%;height:100vh;height:100dvh;
  max-height:100vh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;display:flex;flex-direction:column;
  overflow:hidden;background:#0B1016;color:#E6EBF1;touch-action:none;overscroll-behavior:contain}
/* Ni la page derriere ne defile (molette au bureau), ni le pincement ne zoome toute la page. */
body:has(dialog.visionneuse[open]){overflow:hidden}
.vis-zone:focus{outline:none}
dialog.visionneuse::backdrop{background:#0B1016}
.visionneuse :focus-visible{outline-color:#FFF}
.vis-tete{flex:none;display:flex;align-items:flex-start;gap:6px;
  padding:calc(6px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 6px calc(14px + env(safe-area-inset-left,0px))}
.vis-infos{flex:1;min-width:0}
.vis-ligne{display:flex;align-items:center;gap:10px;min-height:44px;min-width:0}
.vis-titre{margin:0;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vis-compteur{flex:none;font-size:13px;color:#B4C0CC}
.vis-legende{margin:0 0 4px;font-size:13px;color:#C9D3DD;overflow-wrap:anywhere}
.vis-originale{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:13px;
  color:#E6EBF1;white-space:nowrap}
.vis-originale[hidden],.vis-btn[hidden]{display:none}
.vis-originale:active{text-decoration:underline}
@media (hover:hover){ .vis-originale:hover{text-decoration:underline} }
.vis-btn{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;
  padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#FFF;font-size:28px;line-height:1}
.vis-btn:active{background:rgba(255,255,255,.32)}
@media (hover:hover){ .vis-btn:hover{background:rgba(255,255,255,.26)} }
.vis-scene{position:relative;flex:1;min-height:0;display:flex;
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.vis-zone{flex:1;min-width:0;position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.vis-photo{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;will-change:transform;
  transform-origin:50% 50%;transition:transform .15s ease-out}
.vis-zone.en-geste .vis-photo{transition:none}
.vis-nav{position:absolute;top:50%;margin-top:-22px;z-index:1}
.vis-prec{left:calc(8px + env(safe-area-inset-left,0px))}
.vis-suiv{right:calc(8px + env(safe-area-inset-right,0px))}
@media (pointer:fine){ .vis-zone{cursor:zoom-in} }
@media (pointer:fine){ .vis-zone.zoomee{cursor:grab} }
@media (pointer:fine){ .vis-zone.zoomee.en-geste{cursor:grabbing} }
@media (prefers-reduced-motion:reduce){ .vis-photo{transition:none} }

/* Impression : ni barre, ni feuille, ni bandeau. */
@media print{ .onglets-bas,.fond-menu,.feuille-menu,.bandeau-hors-ligne{display:none!important} }

/* Carte Marteau (compte) : repliable au telephone, toujours ouverte au bureau. */
#marteau > summary{list-style:none}
#marteau > summary::-webkit-details-marker{display:none}
@media (min-width:760px){ #marteau > summary{pointer-events:none} #marteau > summary .discret{display:none} }
@media (max-width:759px){
  #marteau > summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;cursor:pointer}
  #marteau > summary::after{content:'+';margin-left:auto;font-size:20px;line-height:1;color:var(--dim)}
  #marteau[open] > summary::after{content:'−'}
  /* Connexion : le formulaire en haut, le clavier ne le cache pas. */
  .entree{place-items:start center;align-content:start}
}