/* css/admin-socle.css — le socle commun de l espace pro (13/10/2026).

   POURQUOI CE FICHIER. Les composants de la refonte v2 (cartes, boutons,
   barre de periode, tuiles de chiffres, tableaux, graphes, fiche dossier)
   etaient dans admin-modules.css, que seul admin.html charge. Les six pages
   separees (blog, newsletter, tarifs, stock, liens, import) recopiaient
   chacune leur propre CSS — 57 a 154 lignes — et divergeaient. Ce fichier
   est charge par les SEPT pages, toujours AVANT admin.css, comme dans
   admin.html : l ordre des regles est le meme partout.

   Mode d emploi : docs/SOCLE-ESPACE-PRO.md.
   Les blocs ci-dessous ont ete DEPLACES tels quels depuis admin-modules.css
   (ils en etaient la fin) : rien n a change pour le tableau de bord. */

/* ══ LE JOUR ET LA NUIT — 13/10/2026 ══
   Le dernier point du plan du 08/10 : « theme nuit/jour en dernier ».

   Les jetons --dw-* vivent dans admin.css (:root). Ceux d ici nomment ce qui
   etait ecrit EN DUR jusqu a aujourd hui : le blanc pose sur un aplat
   d encre, l or des montants, la barre pale de l annee precedente. En mode
   jour ils valent exactement l ancienne valeur : rien ne bouge.

   La nuit se choisit dans l en-tete (js/admin-nav.js), se garde sur
   l appareil (localStorage drim_theme_admin) et pose data-theme="dark" sur
   <html> AVANT le premier rendu (une ligne dans le <head> de chaque page).
   Ce n est pas un negatif : le papier chaud s assombrit, l encre s eclaircit,
   l or s eclaircit pour rester lisible, et les couleurs d etat aussi — assez
   pour qu un texte FONCE pose dessus tienne 4,5:1 (garde :
   scripts/theme-nuit.test.mjs, qui mesure chaque paire). */
:root {
  --dw-sur-encre: #FFFFFF;
  --dw-sur-encre-2: #E8E2D6;
  --dw-or-texte: #8A6200;
  --dw-prec: #BFE3D2;
  --dw-prec-neutre: #DCD6CC;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --dw-sol: #15120F; --dw-surface: #1F1B17; --dw-surface-2: #26211C; --dw-surface-3: #2F2923;
  --dw-trait: #3A332C; --dw-trait-fort: #51473D;
  --dw-encre: #F2ECE2; --dw-encre-2: #CBBFAF; --dw-encre-3: #9E9384; --dw-encre-4: #7F7569;
  --dw-or: #E3C25E; --dw-or-fonce: #D4AF37; --dw-or-vif: #D4AF37; --dw-or-voile: #2E2716;
  --dw-nuit: #0E0C0A; --dw-nuit-2: #191512; --dw-nuit-trait: #2C251F;
  --dw-ok: #72CF9C; --dw-ok-voile: #15281E;
  --dw-attention: #EEA95A; --dw-attention-voile: #2E2212;
  --dw-alerte: #F58A80; --dw-alerte-voile: #301816;
  --dw-info: #8BBCEC; --dw-info-voile: #142334;
  --dw-ok-vif: #3DB883; --dw-ok-sur: #0E0C0A;
  --dw-attention-vif: #E8853A; --dw-attention-sur: #0E0C0A;
  --dw-alerte-vif: #EE5A5F; --dw-alerte-sur: #0E0C0A;
  --dw-info-vif: #5B9BF0; --dw-info-sur: #0E0C0A;
  --dw-attention-texte: #EEA95A;
  --dw-ombre-1: 0 0 0 1px rgba(255, 244, 228, 0.07);
  --dw-ombre-2: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 244, 228, 0.07);
  --dw-ombre-3: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 244, 228, 0.09);
  --dw-sur-encre: #15120F;
  --dw-sur-encre-2: #4A423A;
  --dw-or-texte: #E3C25E;
  --dw-prec: #2E4C3E;
  --dw-prec-neutre: #4A433B;
}
/* Ce qu admin.css ecrit en dur sur un aplat qui, la nuit, devient clair. */
:root[data-theme="dark"] .dlg__b--principal { color: var(--dw-sur-encre); }
:root[data-theme="dark"] .dlg__b--danger { color: var(--dw-alerte-sur); }
:root[data-theme="dark"] .chip--neutre { color: var(--dw-sur-encre); }

/* Les icones du sprite (assets/icones.svg). Le poids de deux elements, pas
   plus : toute regle de composant (une classe) l emporte, et la regle .ic
   d admin-modules.css reste la reference dans admin.html. Pas moins non plus :
   sous 768 px, admin.css donne « height: auto » a tout svg (poids d UN
   element, et chargee apres) — avec :where(), une icone sans taille propre
   montait a 150 px sur les pages qui ne chargent pas admin-modules.css. */
html svg:where(.ic) { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════
   LA FICHE DOSSIER v2 — 08/10/2026
   Maquette validee : docs/maquettes/dashboard-v2.html

   Remplace le menu « Actions sur ce dossier » (34 points d entree en sept
   groupes) et les six tuiles d etat. La fiche se lit de haut en bas :
   en-tete, frise des etapes, prochaine etape, six blocs repliables.

   Charte (DESIGN.md) : aucune pastille bordee, aucun lisere colore a gauche
   d une carte, aucun fond teinte pour dire un etat. L etat se dit par une
   pastille pleine ET un mot. L or reste a l argent, a l etape active de la
   frise et a l action de « Prochaine etape ». Les boutons d action des blocs
   sont a l encre.
   Contrastes : contour des boutons --dw-encre-3 (4,26:1 sur blanc, seuil
   3:1 des controles) ; textes secondaires --dw-encre-2 (9,85:1).
   ══════════════════════════════════════════════════════════════════════ */
.fiche2 { display: flex; flex-direction: column; gap: 14px; }

/* ── L en-tete ── */
.f2-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.f2-hd__meta {
  display: flex; flex-wrap: wrap; gap: 2px 14px; flex: 1 1 300px; min-width: 0;
  font-size: 13.5px; color: var(--dw-encre-2);
}
.f2-hd__a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Le bouton de la fiche ── */
.fbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--dw-encre-3); border-radius: 10px;
  background: var(--dw-surface); color: var(--dw-encre);
  font-family: var(--dw-sans); font-size: 13.5px; font-weight: 650; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, transform .12s var(--dw-ease);
}
.fbtn:hover { background: var(--dw-surface-3); }
.fbtn:active { transform: scale(0.98); }
.fbtn:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 2px; }
.fbtn[disabled] { opacity: .55; cursor: default; }
.fbtn .ic { width: 16px; height: 16px; flex: none; }
.fbtn--plein { background: var(--dw-encre); border-color: var(--dw-encre); color: var(--dw-sur-encre); }
.fbtn--plein:hover { background: var(--dw-encre-2); }
.fbtn--icone { width: 44px; padding: 0; }
.fbtn.is-attente { cursor: progress; opacity: .7; }

/* ── Le menu « … » : le rare et l irreversible ── */
.f2-plus { position: relative; }
.f2-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 280px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--dw-surface); border-radius: var(--dw-r-m); box-shadow: var(--dw-ombre-3);
}
.f2-menu[hidden] { display: none; }
.f2-menu__i {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  min-height: 48px; padding: 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dw-encre);
  font-family: var(--dw-sans); font-size: 14px; font-weight: 600; cursor: pointer;
}
.f2-menu__i .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.f2-menu__i small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--dw-encre-2); }
.f2-menu__i:hover, .f2-menu__i:focus-visible { background: var(--dw-surface-3); outline: none; }
.f2-menu__i[disabled] { opacity: .6; cursor: default; }
.f2-menu__i--danger, .f2-menu__i--danger .ic { color: var(--dw-alerte); }

/* ── La frise : toucher une etape, c est y passer ── */
.f2-frise__l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px;
}
.f2-frise__e {
  width: 100%; min-height: 44px; padding: 0 0 4px; border: 0; border-radius: 6px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
  background: transparent; color: var(--dw-encre-2);
  font-family: var(--dw-sans); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.f2-frise__e::before {
  content: ""; display: block; height: 6px; border-radius: 3px;
  background: var(--dw-trait-fort); transition: background .2s ease;
}
.f2-frise__e:hover { color: var(--dw-encre); }
.f2-frise__e:hover::before { background: var(--dw-encre-3); }
.f2-frise__e:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 2px; }
.f2-frise__e.is-fait { color: var(--dw-ok); }
.f2-frise__e.is-fait::before { background: var(--dw-ok-vif); }
.f2-frise__e.is-ici { color: var(--dw-encre); }
.f2-frise__e.is-ici::before { background: var(--dw-or-vif); }
.f2-frise__aide { margin: 4px 0 0; font-size: 12.5px; color: var(--dw-encre-2); }

/* La confirmation d un changement d etape : elle dit ce que ca declenche. */
.f2-conf { padding: 12px 14px; border-radius: var(--dw-r-m); background: var(--dw-surface-2); box-shadow: var(--dw-ombre-2); }
.f2-conf[hidden] { display: none; }
.f2-conf p { margin: 0 0 10px; font-size: 14px; color: var(--dw-encre); }
.f2-conf p span { display: block; margin-top: 3px; font-size: 13px; color: var(--dw-encre-2); }
.f2-conf__a { display: flex; flex-wrap: wrap; gap: 8px; }

/* « Prochaine etape » dans la fiche : la rampe sous la carte remplace le
   lisere de gauche (interdit n°2), le fond reste neutre (interdit n°5). */
.fiche2 .suite {
  position: relative; margin-bottom: 0;
  border-left-width: 1px; border-left-color: var(--dw-trait);
  background: var(--dw-surface-2);
  padding: var(--dw-4);
}
.fiche2 .suite::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 3px; border-radius: 3px; background: var(--dw-or-vif);
}
.fiche2 .suite--alerte::after    { background: var(--dw-alerte-vif); }
.fiche2 .suite--attention::after { background: var(--dw-attention-vif); }
.fiche2 .suite--ok::after        { background: var(--dw-ok-vif); }
.fiche2 .suite--neutre::after    { background: var(--dw-trait-fort); }

/* ── Les six blocs ── */
.f2-blocs { background: var(--dw-surface); border-radius: var(--dw-r-l); box-shadow: var(--dw-ombre-2); overflow: hidden; }
.f2-bloc + .f2-bloc { box-shadow: inset 0 1px 0 var(--dw-trait); }
.f2-bloc__h { margin: 0; font: inherit; border: 0; padding: 0; }
.f2-bloc__hd {
  width: 100%; min-height: 58px; padding: 12px 16px;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center;
  border: 0; background: transparent; color: var(--dw-encre); text-align: left; cursor: pointer;
}
.f2-bloc__hd:hover { background: var(--dw-surface-2); }
.f2-bloc__hd:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: -3px; }
.f2-bloc__hd > .ic { width: 20px; height: 20px; color: var(--dw-encre-2); }
.f2-bloc__t { min-width: 0; font-family: var(--dw-sans); font-size: 15px; font-weight: 700; line-height: 1.25; }
.f2-bloc__t small {
  display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--dw-encre-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.f2-bloc__chev { color: var(--dw-encre-2); transition: transform .2s var(--dw-ease); }
.f2-bloc__hd[aria-expanded="true"] .f2-bloc__chev { transform: rotate(180deg); }
.f2-bloc__b { padding: 2px 16px 16px 50px; }

/* Une ligne d etat : pastille pleine + mot, puis ses actions. */
.f2-lig { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 9px 0; }
.f2-lig + .f2-lig { box-shadow: inset 0 1px 0 var(--dw-trait); }
.f2-lig__t { display: flex; gap: 9px; align-items: center; font-size: 14px; font-weight: 650; color: var(--dw-encre); }
.f2-lig__s { margin: 2px 0 0 31px; font-size: 12.8px; line-height: 1.45; color: var(--dw-encre-2); }
.f2-lig__a { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.f2-pt { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; }
.f2-pt .ic { width: 13px; height: 13px; stroke-width: 3; }
.f2-pt--ok        { background: var(--dw-ok-vif);        color: var(--dw-ok-sur); }
.f2-pt--attention { background: var(--dw-attention-vif); color: var(--dw-attention-sur); }
.f2-pt--alerte    { background: var(--dw-alerte-vif);    color: var(--dw-alerte-sur); }
.f2-pt--neutre    { background: var(--dw-surface-3);     color: var(--dw-encre-2); }
.f2-argent { font-family: var(--dw-serif); font-size: 1.15em; font-weight: 700; color: var(--dw-or-texte); font-variant-numeric: tabular-nums lining-nums; }

/* La barre des paiements : acompte puis solde, a l echelle des montants. */
.f2-pleg { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--dw-encre-2); }
.f2-pbar { display: flex; gap: 3px; height: 10px; margin: 4px 0 6px; }
.f2-pbar i { display: block; height: 100%; border-radius: 5px; background: var(--dw-surface-3); }
.f2-pbar i.ok  { background: var(--dw-ok-vif); }
.f2-pbar i.att { background: var(--dw-attention-vif); }

.f2-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.f2-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dw-encre-2); }
.f2-note--att { color: var(--dw-attention-texte); font-weight: 600; }
.f2-label {
  display: block; margin: 14px 0 6px;
  font-family: var(--dw-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dw-encre-2);
}
.f2-notes {
  width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--dw-encre-3); border-radius: 10px;
  background: var(--dw-surface); color: var(--dw-encre);
  font-family: var(--dw-sans); font-size: 16px; line-height: 1.5;
}
.f2-notes:focus { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; }
.f2-histo { list-style: none; margin: 0; padding: 0; }
.f2-histo li {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 7px 0;
  font-size: 13.5px; color: var(--dw-encre); box-shadow: inset 0 -1px 0 var(--dw-trait);
}
.f2-histo time { font-size: 12.5px; color: var(--dw-encre-2); font-variant-numeric: tabular-nums; }
.f2-histo em { font-style: normal; color: var(--dw-encre-2); }
.f2-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13.8px; }
.f2-kv dt { color: var(--dw-encre-2); }
.f2-kv dd { margin: 0; min-width: 0; font-weight: 600; color: var(--dw-encre); overflow-wrap: anywhere; }
.f2-citation { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--dw-surface-2); font-size: 13.5px; color: var(--dw-encre); }

/* ── Le flux d envoi unique ── */
.envoi2-bg {
  position: fixed; inset: 0; z-index: 1100; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 19, 16, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.envoi2 {
  width: min(540px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px;
  background: var(--dw-surface); border-radius: var(--dw-r-l); box-shadow: var(--dw-ombre-3);
}
.envoi2__hd { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.envoi2__hd h2 { margin: 0; font-family: var(--dw-serif); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--dw-encre); }
.envoi2__hd p { margin: 2px 0 0; font-size: 13.5px; color: var(--dw-encre-2); }
.envoi2__msg { min-height: 160px; }
.envoi2__canaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.envoi2__canaux .fbtn { min-height: 48px; white-space: normal; text-align: center; }

@media (max-width: 640px) {
  .f2-bloc__b { padding: 2px 14px 14px; }
  .f2-lig { grid-template-columns: 1fr; }
  .f2-lig__a { justify-content: flex-start; }
  .f2-kv { grid-template-columns: 1fr; gap: 2px; }
  .f2-kv dd { margin-bottom: 6px; }
  .f2-histo li { grid-template-columns: 1fr; gap: 0; }
  .envoi2-bg { align-items: flex-end; padding: 0; }
  .envoi2 { max-height: 92vh; border-radius: 20px 20px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .envoi2__canaux { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fbtn, .f2-bloc__chev, .f2-frise__e::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   L ACCUEIL v2 — 08/10/2026 (docs/maquettes/dashboard-v2.html)
   La saison de l annee (tous les jours ou les week-ends), « A faire » trie
   par urgence, le prochain mariage, quatre chiffres. Memes regles que la
   fiche : etat dit par une forme pleine et un mot, or reserve a l argent.
   ══════════════════════════════════════════════════════════════════════ */
.acc2 { display: flex; flex-direction: column; gap: 18px; }
.acc2-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.acc2-top h1 { margin: 0; font-family: var(--dw-serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--dw-encre); }
.acc2-top p { margin: 4px 0 0; font-size: 14.5px; color: var(--dw-encre-2); }
.acc2-top p strong { color: var(--dw-alerte); }
.acc2-carte { background: var(--dw-surface); border-radius: var(--dw-r-l); box-shadow: var(--dw-ombre-2); padding: 18px 20px; min-width: 0; }
.acc2-carte__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.acc2-carte__hd h2 { margin: 0; font-family: var(--dw-serif); font-size: 22px; font-weight: 600; color: var(--dw-encre); }
.acc2-carte__hd span { font-size: 12.5px; color: var(--dw-encre-2); }
.acc2-surtitre { margin: 0; font-family: var(--dw-sans); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dw-encre-2); }
.acc2-grand { font-family: var(--dw-serif); font-size: 46px; font-weight: 600; line-height: 1; color: var(--dw-encre); font-variant-numeric: lining-nums; margin-top: 4px; }
.acc2-grand small { margin-left: 8px; font-family: var(--dw-sans); font-size: 14px; font-weight: 600; color: var(--dw-encre-2); }

/* La saison */
.acc2-saison__hd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin-bottom: 16px; }
.sai-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 340px; }
.sai-stat { font-size: 12.5px; line-height: 1.25; color: var(--dw-encre-2); }
.sai-stat b { display: block; font-size: 20px; font-weight: 700; color: var(--dw-encre); font-variant-numeric: tabular-nums; }
.acc2-seg-l { display: flex; flex-wrap: wrap; gap: 8px; }
.acc2-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--dw-encre-3); border-radius: 10px; background: var(--dw-surface); }
.acc2-seg button {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  font-family: var(--dw-sans); font-size: 13px; font-weight: 700; color: var(--dw-encre-2); cursor: pointer;
}
.acc2-seg button[aria-pressed="true"] { background: var(--dw-encre); color: var(--dw-sur-encre); }
.acc2-seg button:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; }
.sai-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.sai-mois { min-width: 0; }
.sai-mois__l { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dw-encre-2); }
.sai-mois__l b { color: var(--dw-ok); }
.sai-mois__g { display: grid; gap: 3px; }
.sai-mois__g--we { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sai-mois__g--tous { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sai-h { font-size: 9.5px; font-weight: 700; text-align: center; color: var(--dw-encre-2); line-height: 1.3; }
.sai-j {
  position: relative; display: block; min-width: 0; height: 18px; padding: 0; border: 0; border-radius: 4px;
  background: var(--dw-surface-3); cursor: pointer; font: 700 9px/18px var(--dw-sans); color: var(--dw-sur-encre); text-align: center;
}
.sai-mois__g--tous .sai-j { height: 12px; line-height: 12px; }
.sai-j--we { background: var(--dw-trait-fort); }
.sai-j--ok { background: var(--dw-ok-vif); color: var(--dw-ok-sur); }
.sai-j--att { background: var(--dw-attention-vif); color: var(--dw-attention-sur); }
.sai-j--bl { background: repeating-linear-gradient(135deg, var(--dw-encre-3) 0 3px, var(--dw-trait-fort) 3px 6px); }
.sai-j--passe { opacity: .4; }
.sai-j--auj { box-shadow: 0 0 0 2px var(--dw-encre); }
.sai-j--vide { background: transparent; cursor: default; }
.sai-j[aria-pressed="true"] { outline: 2px solid var(--dw-encre); outline-offset: 2px; z-index: 1; }
.sai-j:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 2px; z-index: 1; }
.sai-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 12.5px; color: var(--dw-encre-2); }
.sai-leg span { display: inline-flex; align-items: center; gap: 6px; }
.sai-leg .sai-j { display: inline-block; width: 13px; height: 13px; cursor: default; }
.sai-pop { margin-top: 12px; padding: 12px 14px; border-radius: var(--dw-r-m); background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1); }
.sai-pop__d { font-family: var(--dw-serif); font-size: 19px; font-weight: 600; color: var(--dw-encre); margin-bottom: 6px; }
.sai-pop__l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0; font-size: 14px; color: var(--dw-encre-2); }
.sai-pop__l strong { color: var(--dw-encre); }

/* A faire + colonne de droite */
.acc2-grille { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.acc2-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.acc2-groupe { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-family: var(--dw-sans); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dw-encre-2); }
.acc2-groupe__pt { width: 9px; height: 9px; border-radius: 50%; }
.acc2-groupe__pt--alerte { background: var(--dw-alerte-vif); }
.acc2-groupe__pt--or { background: var(--dw-or-vif); }
.acc2-groupe__pt--ok { background: var(--dw-ok-vif); }
.acc2-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 4px 0; }
.acc2-act + .acc2-act { box-shadow: inset 0 1px 0 var(--dw-trait); }
.acc2-act__corps {
  display: flex; flex-direction: column; gap: 2px; min-height: 52px; justify-content: center;
  padding: 6px 8px; margin-left: -8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; min-width: 0;
}
.acc2-act__corps:hover { background: var(--dw-surface-2); }
.acc2-act__corps:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 0; }
.acc2-act__t { font-size: 14.5px; font-weight: 700; color: var(--dw-encre); line-height: 1.3; }
.acc2-act__qui { font-weight: 600; color: var(--dw-encre-2); }
.acc2-act__m { font-size: 12.8px; color: var(--dw-encre-2); }
.acc2-act__a { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.acc2-tout { margin-top: 10px; }
.acc2-prochain { position: relative; overflow: hidden; }
.acc2-prochain::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px; background: var(--dw-ok-vif); }
.acc2-prochain--attention::after { background: var(--dw-attention-vif); }
.acc2-prochain--alerte::after { background: var(--dw-alerte-vif); }
.acc2-prochain__c { margin: 4px 0 2px; font-family: var(--dw-serif); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--dw-encre); }
.acc2-prochain__l { font-size: 13.5px; color: var(--dw-encre-2); }
.acc2-check { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acc2-check li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dw-encre); }
.acc2-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acc2-kpi { background: var(--dw-surface); border-radius: var(--dw-r-m); box-shadow: var(--dw-ombre-1); padding: 14px 16px; min-width: 0; }
.acc2-kpi__l { font-size: 12.5px; font-weight: 700; color: var(--dw-encre-2); }
.acc2-kpi__v { margin-top: 4px; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--dw-encre); font-variant-numeric: tabular-nums; }
.acc2-kpi__s { margin-top: 3px; font-size: 12.5px; color: var(--dw-encre-2); }

@media (max-width: 1100px) {
  .acc2-grille { grid-template-columns: 1fr; }
  .sai-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 640px) {
  .acc2-top h1 { font-size: 25px; }
  .acc2-carte { padding: 16px 14px; }
  .sai-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .sai-mois__g--tous .sai-j { height: 14px; }
  .acc2-act { grid-template-columns: 1fr; }
  .acc2-act__a { justify-content: flex-start; }
  .acc2-check { grid-template-columns: 1fr; }
  .acc2-grand { font-size: 38px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA LISTE + FICHE v2 — 08/10/2026
   Une ligne par dossier, la fiche a droite sans quitter la liste. Sous
   900 px, la ligne ouvre la fiche en grand (pas la place pour deux colonnes).
   ══════════════════════════════════════════════════════════════════════ */
.kanban[hidden] { display: none; }
.mode-pipeline { flex: none; }
.lst2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 16px; align-items: start; margin-top: 4px; }
.lst2[hidden] { display: none; }
.lst2__liste { background: var(--dw-surface); border-radius: var(--dw-r-l); box-shadow: var(--dw-ombre-2); overflow: hidden; min-width: 0; }
.lst2__h, .lst2__l {
  display: grid; grid-template-columns: 78px minmax(0, 1.3fr) 96px minmax(0, 1.4fr) 116px;
  gap: 12px; align-items: center; padding: 0 14px;
}
.lst2__h {
  min-height: 38px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dw-encre-2); box-shadow: inset 0 -1px 0 var(--dw-trait);
}
.lst2__h-m { text-align: right; }
.lst2__l {
  width: 100%; min-height: 62px; border: 0; background: transparent; text-align: left; cursor: pointer;
  color: var(--dw-encre); font-family: var(--dw-sans); box-shadow: inset 0 -1px 0 var(--dw-trait);
}
.lst2__l:hover { background: var(--dw-surface-2); }
.lst2__l[aria-selected="true"] { background: var(--dw-surface-3); }
.lst2__l[aria-selected="true"] .lst2__c { font-weight: 800; }
.lst2__l:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: -3px; }
.lst2__d { font-size: 13px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lst2__d small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--dw-encre-2); }
.lst2__c { min-width: 0; font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst2__c small { display: block; font-size: 12.5px; font-weight: 500; color: var(--dw-encre-2); overflow: hidden; text-overflow: ellipsis; }
.lst2__m { text-align: right; }
.lst2__nx { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.3px; color: var(--dw-encre); }
.lst2__nx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst2__nx .ic { width: 16px; height: 16px; flex: none; }
.lst2__nx--alerte .ic { color: var(--dw-alerte); }
.lst2__nx--attention .ic { color: var(--dw-attention-texte); }
.lst2__nx--ok .ic { color: var(--dw-ok); }
.lst2__nx--or .ic, .lst2__nx--neutre .ic { color: var(--dw-encre-2); }
.lst2__l .chip { justify-self: start; white-space: nowrap; }
.lst2__vide { padding: 18px; }
.lst2__fiche {
  position: sticky; top: calc(var(--ep-h, 58px) + 12px);
  max-height: calc(100vh - var(--ep-h, 58px) - 24px); overflow: auto;
  padding: 16px; background: var(--dw-surface); border-radius: var(--dw-r-l); box-shadow: var(--dw-ombre-2);
}
@media (max-width: 1180px) {
  .lst2__h, .lst2__l { grid-template-columns: 70px minmax(0, 1fr) 92px 112px; }
  .lst2__nx, .lst2__h-nx { display: none; }
}
@media (max-width: 900px) {
  .lst2 { grid-template-columns: 1fr; }
  .lst2__fiche { display: none; }
}
@media (max-width: 640px) {
  .lst2__h { display: none; }
  .lst2__l { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "d c m" "d s s"; row-gap: 3px; padding: 10px 12px; min-height: 66px; }
  .lst2__d { grid-area: d; } .lst2__c { grid-area: c; } .lst2__m { grid-area: m; } .lst2__l .chip { grid-area: s; justify-self: start; }
  .lst2__c small { display: none; }
}
.lst2__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 12px; }
.lst2__titre h2 { margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--dw-serif); font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--dw-encre); }
.lst2__titre span { font-size: 12.5px; color: var(--dw-encre-2); }

/* ══════════════════════════════════════════════════════════════════════
   L ONGLET ARGENT — 08/10/2026 (maquette argent-ABC : C + le graphe de A)
   L annee precedente se lit en barre PALE derriere celle de l annee (pas de
   pointilles). Vert = encaisse, rouge = depense, or = argent et cumul.
   ══════════════════════════════════════════════════════════════════════ */
.argent-view { display: none; }
.argent-view.active { display: block; }
.arg2 .acc2-top h1 { font-size: 32px; }
.per2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px;
  background: var(--dw-surface); border-radius: var(--dw-r-m); box-shadow: var(--dw-ombre-1);
}
.per2__presets { display: flex; flex-wrap: wrap; gap: 2px; }
.per2__presets button {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent;
  font-family: var(--dw-sans); font-size: 13.5px; font-weight: 650; color: var(--dw-encre-2); cursor: pointer;
}
.per2__presets button[aria-pressed="true"] { background: var(--dw-encre); color: var(--dw-sur-encre); }
.per2__presets button:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; }
.per2__dates { display: flex; flex-wrap: wrap; gap: 6px; }
.per2__dates label, .per2__cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dw-encre-2); }
.per2__dates input {
  min-height: 44px; padding: 0 10px; border: 1px solid var(--dw-encre-3); border-radius: 9px;
  background: var(--dw-surface); color: var(--dw-encre); font-family: var(--dw-sans); font-size: 16px;
}
.per2__cmp input { width: 20px; height: 20px; accent-color: var(--dw-encre); }
.arg-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.arg-delta { font-weight: 800; }
.arg-delta--ok { color: var(--dw-ok); }
.arg-delta--ko { color: var(--dw-alerte); }

/* Les graphes */
.arg-g svg { display: block; width: 100%; height: auto; }
.arg-g text { font-family: var(--dw-sans); font-size: 11px; font-weight: 600; fill: var(--dw-encre-2); }
.arg-g__grille { stroke: var(--dw-trait); stroke-width: 1; }
.arg-g__zone { fill: transparent; cursor: pointer; }
.arg-g__mois:hover .arg-g__zone, .arg-g__mois.is-choisi .arg-g__zone { fill: var(--dw-surface-2); }
.arg-g__mois:focus-visible { outline: 3px solid var(--dw-info-vif); }
.arg-g__prec { fill: var(--dw-prec); }
.arg-g__enc { fill: var(--dw-ok-vif); }
.arg-g__dep { fill: var(--dw-alerte-vif); }
.arg-g__prev { fill: var(--dw-info-vif); }
.arg-g__cumul { stroke: var(--dw-or-texte); stroke-width: 2.5; }
.arg-g__point { fill: var(--dw-or-texte); }
.arg-g__fin { font-weight: 800 !important; fill: var(--dw-or-texte) !important; font-size: 13px !important; }
.arg-g__detail { margin: 8px 0 0; font-size: 14px; color: var(--dw-encre); }
.arg-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12.5px; color: var(--dw-encre-2); }
.arg-leg span { display: inline-flex; align-items: center; gap: 6px; }
.arg-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.arg-leg__enc { background: var(--dw-ok-vif); }
.arg-leg__dep { background: var(--dw-alerte-vif); }
.arg-leg__prec { background: var(--dw-prec); }
.arg-leg__prev { background: var(--dw-info-vif); }
.arg-leg__cumul { background: var(--dw-or-texte); height: 3px !important; }
.arg-leg__aide { color: var(--dw-encre-2); }

/* Rentabilite par mariage */
.arg-r {
  display: grid; grid-template-columns: minmax(0, 1.5fr) 88px 80px 88px minmax(120px, 1fr);
  gap: 6px 12px; align-items: center; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--dw-trait);
}
.arg-r--h { padding: 4px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dw-encre-2); }
.arg-r__qui {
  display: flex; flex-direction: column; min-width: 0; min-height: 44px; justify-content: center;
  padding: 2px 6px; margin-left: -6px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer;
  font-family: var(--dw-sans); font-size: 14px; color: var(--dw-encre);
}
.arg-r__qui:hover { background: var(--dw-surface-2); }
.arg-r__qui:focus-visible { outline: 3px solid var(--dw-info-vif); }
.arg-r__qui small { font-size: 12px; color: var(--dw-encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arg-r__n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arg-r__cout { color: var(--dw-alerte); font-weight: 700; font-variant-numeric: tabular-nums; }
.arg-r__b small { display: block; font-size: 12px; color: var(--dw-encre-2); margin-top: 3px; }
.arg-barre { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--dw-surface-3); }
.arg-barre i { display: block; height: 100%; }
.arg-barre .ok { background: var(--dw-ok-vif); }
.arg-barre .ko { background: var(--dw-alerte-vif); }
.arg-r__sugg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--dw-encre-2); }
.arg-h { display: grid; grid-template-columns: 120px 1fr 90px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13.5px; }
.arg-h small { color: var(--dw-encre-2); }
.arg-h__b { height: 12px; border-radius: 6px; background: var(--dw-surface-3); overflow: hidden; }
.arg-h__b i { display: block; height: 100%; border-radius: 6px; background: var(--dw-ok-vif); }
.arg-h .f2-argent { text-align: right; }
.arg-alertes { display: flex; flex-direction: column; gap: 8px; }
.arg-alerte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13.5px; color: var(--dw-encre); }
.arg-alerte > span:nth-child(2) { flex: 1 1 200px; }

/* Le detail en onglets */
.arg-onglets { display: flex; gap: 2px; overflow-x: auto; margin: -6px -20px 10px; padding: 0 14px; box-shadow: inset 0 -1px 0 var(--dw-trait); }
.arg-onglets button {
  position: relative; min-height: 48px; padding: 0 12px; border: 0; background: transparent; white-space: nowrap; cursor: pointer;
  font-family: var(--dw-sans); font-size: 14px; font-weight: 700; color: var(--dw-encre-2);
}
.arg-onglets button span { font-size: 12px; font-weight: 600; }
.arg-onglets button[aria-selected="true"] { color: var(--dw-encre); }
.arg-onglets button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--dw-or-vif); }
.arg-onglets button:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: -3px; }
.arg-t { display: flex; flex-direction: column; }
.arg-t__l {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 120px; gap: 6px 12px; align-items: center;
  width: 100%; min-height: 56px; padding: 6px 4px; border: 0; background: transparent; text-align: left; cursor: pointer;
  font-family: var(--dw-sans); font-size: 13.8px; color: var(--dw-encre); box-shadow: inset 0 -1px 0 var(--dw-trait);
}
.arg-t__l--fixe { cursor: default; }
button.arg-t__l:hover { background: var(--dw-surface-2); }
button.arg-t__l:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: -3px; }
.arg-t__d { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.arg-t__c { min-width: 0; }
.arg-t__c strong { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arg-t__c small { display: block; font-size: 12px; color: var(--dw-encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arg-t__m { text-align: right; font-variant-numeric: tabular-nums; }
.arg-t__m small { display: block; font-size: 12px; color: var(--dw-encre-2); }
.arg-t__a { display: flex; gap: 6px; }
.arg-t__total { padding: 10px 4px 0; text-align: right; font-weight: 700; }
.arg-cats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 13px; color: var(--dw-encre-2); }
.arg-cat strong { color: var(--dw-encre); }

@media (max-width: 1100px) {
  .arg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .arg-kpis { grid-template-columns: 1fr 1fr; }
  .arg-r { grid-template-columns: minmax(0, 1fr) 88px; }
  .arg-r--h { display: none; }
  .arg-r__n:nth-of-type(1), .arg-r__cout { display: none; }
  .arg-r__b { grid-column: 1 / -1; }
  .arg-t__l { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .arg-t__l > span:nth-child(3) { grid-column: 2; }
  .arg-onglets { margin: -6px -14px 10px; }
  .arg-h { grid-template-columns: 96px 1fr 80px; }
}

/* ══════════════════════════════════════════════════════════════════════
   L ECRAN STATISTIQUES — 10/10/2026 (remplace Chiffres + Analytics)
   Memes briques que l onglet Argent (.per2, .arg-kpis, .acc2-carte).
   Les trois couleurs d etat sont MESUREES : le vert et le rouge habituels
   se confondent pour un daltonien (ecart 5,7 sous le plancher de 6).
   Vert = signee, bleu = en cours, orange = perdue, beige pale = l an
   dernier. Garde : scripts/palette-statistiques.test.mjs.
   ══════════════════════════════════════════════════════════════════════ */
.st2 { --st-sig: #00875A; --st-cours: #1263C4; --st-perdu: #B34700; --st-prec: #DCD6CC; }
/* La nuit : les memes etats, eclaircis ; mesures eux aussi par
   scripts/palette-statistiques.test.mjs (daltonisme compris). */
:root[data-theme="dark"] .st2 { --st-sig: #3DB883; --st-cours: #5B9BF0; --st-perdu: #E8853A; --st-prec: #4A433B; }
/* Les cartes se mettent en page selon LEUR largeur, pas celle de l ecran :
   la meme carte vit en pleine largeur ou dans une colonne de 300 px. */
.st2 .acc2-carte { container-type: inline-size; }
.st-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.st-h3 {
  margin: 16px 0 6px; font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: .1em !important; text-transform: uppercase; color: var(--dw-encre-2) !important;
}

/* Mois par mois : une colonne par mois, en HTML pour garder des libelles
   lisibles sur telephone. */
.st-g { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 2px; }
/* Les colonnes se partagent la largeur ; au-dela de douze mois (periode
   libre), elles gardent 22 px et la carte defile. */
.st-g__m {
  flex: 1 1 0; min-width: 22px; display: flex; flex-direction: column; min-height: 196px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-family: var(--dw-sans);
}
.st-g__m:hover, .st-g__m.is-choisi { background: var(--dw-surface-2); }
.st-g__m:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: -3px; }
.st-g__zone { position: relative; height: 150px; margin-top: 20px; display: flex; align-items: flex-end; justify-content: center; }
.st-g__prec {
  position: absolute; bottom: 0; left: 50%; width: 82%; max-width: 44px; transform: translateX(-50%);
  border-radius: 5px 5px 0 0; background: var(--st-prec);
}
.st-g__pile {
  position: relative; display: flex; flex-direction: column; width: 56%; max-width: 30px; min-height: 3px;
  border-radius: 4px 4px 0 0; overflow: hidden;
}
.st-g__pile i { display: block; flex: 1 1 0; min-height: 2px; }
/* 2 px de fond entre deux etats : la frontiere ne tient pas qu a la couleur. */
.st-g__pile i + i { margin-top: 2px; }
.st-g__s, .st-barre__s, .st-leg--s { background: var(--st-sig); }
.st-g__c, .st-barre__c, .st-leg--c, .arg-h__b .st-i--c { background: var(--st-cours); }
.st-g__p, .st-barre__p, .st-leg--p, .arg-h__b .st-i--p { background: var(--st-perdu); }
.st-leg--prec { background: var(--st-prec); }
.st-g__v {
  position: absolute; left: 0; right: 0; margin-bottom: 3px; text-align: center;
  font-size: 12px; font-weight: 800; color: var(--dw-encre); font-variant-numeric: tabular-nums;
}
.st-g__l { padding: 6px 0 4px; font-size: 11.5px; font-weight: 650; line-height: 1.2; text-align: center; white-space: nowrap; color: var(--dw-encre-2); }

/* Une barre signees / en cours / perdues. */
.st-barre { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--dw-surface-3); }
.st-barre i { display: block; height: 100%; }
.st-barre i + i { margin-left: 2px; }
.st-barre--grande { height: 18px; border-radius: 9px; margin: 6px 0 10px; }

/* Les tableaux par canal, type, forfait : empiles dans une carte etroite,
   en colonnes des que la carte fait 560 px. */
.st-t {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom n" "b b";
  gap: 4px 12px; align-items: center; padding: 9px 0; box-shadow: inset 0 -1px 0 var(--dw-trait); font-size: 14px;
}
.st-t--h { display: none; }
.st-t__nom { grid-area: nom; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--dw-encre); }
.st-t__n { grid-area: n; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-t__b { grid-area: b; min-width: 0; }
.st-t__n small, .st-t__b small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--dw-encre-2); }
.st-t__ca { display: none; }
@container (min-width: 560px) {
  .st-t { grid-template-columns: minmax(0, 1.1fr) 92px minmax(0, 1.7fr) 88px; grid-template-areas: "nom n b ca"; }
  .st-t--h { display: grid; padding: 4px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dw-encre-2); }
  .st-t--h .st-t__nom { font-weight: 700; color: var(--dw-encre-2); }
  .st-t__ca { display: block; grid-area: ca; text-align: right; }
  .st-t__cacompact { display: none; }
}

/* Ce qu elles deviennent */
.st-dev { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 48px; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.st-dev i { width: 12px; height: 12px; border-radius: 3px; }
.st-dev strong { font-variant-numeric: tabular-nums; }
.st-dev small { text-align: right; font-size: 12.5px; color: var(--dw-encre-2); }
.st-dev__sous { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: -2px 0 6px 24px; font-size: 12.5px; color: var(--dw-encre-2); }
.st-h__n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.st-h__n small { font-weight: 500; color: var(--dw-encre-2); }

/* Les motifs de perte : le libelle sur sa ligne, la barre dessous. */
.st-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.st-m strong { font-variant-numeric: tabular-nums; }
.st-m .st-barre { grid-column: 1 / -1; height: 8px; }

/* Les villes */
.st-v { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.st-v__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le site */
.st-site { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; }
@container (min-width: 760px) { .st-site { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.st-ent { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.st-ent__l { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.st-ent__v { min-width: 64px; text-align: right; }
.st-ent__v strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.st-ent__v small { display: block; font-size: 12px; color: var(--dw-encre-2); white-space: nowrap; }
.st-ent__b { height: 14px; border-radius: 7px; background: var(--dw-surface-3); overflow: hidden; }
.st-ent__b i { display: block; height: 100%; border-radius: 7px; background: var(--st-cours); }
.st-spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 4px 0 2px; }
.st-spark i { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--st-cours); }
.st-spark__l { display: flex; justify-content: space-between; font-size: 12px; color: var(--dw-encre-2); }
.st-porte span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 22px; }
.st-li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--dw-trait); font-size: 13.5px; }
.st-li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dw-encre); }
.st-li strong { font-variant-numeric: tabular-nums; }

/* Le reclassement des types */
.st-reclass { margin-top: 18px; }
.st-rc { padding: 12px 0; box-shadow: inset 0 -1px 0 var(--dw-trait); }
.st-rc__hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 14px; }
.st-rc__hd small { font-size: 12.5px; color: var(--dw-encre-2); }
.st-rc__s { margin: 4px 0 8px; font-size: 13px; color: var(--dw-encre-2); }
.st-rc .acc2-seg button .ic { width: 14px; height: 14px; vertical-align: -2px; }

/* Les notifications (Reglages) */
.notif2__etat { margin: 12px 0; font-size: 14px; line-height: 1.55; }

/* L aide d un chiffre sur l accueil : un vrai bouton de 44 px, sans
   bousculer la ligne. */
.acc2-kpi .kpi-aide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -14px -14px -14px -8px; padding: 0; color: var(--dw-encre-2);
}
.acc2-kpi__al { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--dw-encre-2); }
/* Une tuile qui porte des alertes prend toute la ligne : a cote d une tuile
   courte, elle laissait un grand vide. */
.acc2-kpi:has(.acc2-kpi__al) { grid-column: 1 / -1; }
.acc2-kpis { grid-auto-flow: row dense; }
.acc2-kpi__al--alerte { color: var(--dw-alerte); font-weight: 650; }
.acc2-kpi__al--attention { color: var(--dw-attention-texte); font-weight: 650; }

@media (max-width: 640px) {
  .st-g { gap: 2px; }
  .st-v { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; }
  .st-ent__l { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   L AGENDA — 13/10/2026 (docs/maquettes/agenda-ABC.html)
   « Verifier une date » en tete, puis trois vues : Liste (telephone),
   Mois (ordinateur), Annee. Etats : reserve (vert), option (orange),
   joue (encre), bloque (hachure), demandee (point bleu : la date reste
   libre). Vert et orange : ecart 8,3 pour un daltonien (seuil 6).
   ══════════════════════════════════════════════════════════════════════ */
.ag2 { --ag-res: var(--dw-ok-vif); --ag-opt: var(--dw-attention-vif); --ag-joue: var(--dw-encre-2); --ag-dem: var(--dw-info-vif);
  --ag-res-sur: var(--dw-ok-sur); --ag-opt-sur: var(--dw-attention-sur); --ag-dem-sur: var(--dw-info-sur); }
.ag2 .acc2-carte { container-type: inline-size; }

/* Verifier une date */
.ag-verif { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.ag-verif__champ label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dw-encre-2); }
.ag-verif__champ input {
  width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--dw-encre-3); border-radius: 12px;
  background: var(--dw-surface); color: var(--dw-encre); font-family: var(--dw-sans); font-size: 18px;
}
.ag-verdict { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--dw-encre); }
.ag-verdict .f2-pt { width: 28px; height: 28px; }
.ag-verdict .f2-pt .ic { width: 15px; height: 15px; }
.ag-proches { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.ag-msg {
  width: 100%; min-height: 96px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--dw-encre-3); border-radius: 10px;
  background: var(--dw-surface-2); color: var(--dw-encre); font-family: var(--dw-sans); font-size: 16px; line-height: 1.5; resize: vertical;
}
@container (max-width: 560px) { .ag-verif { grid-template-columns: 1fr; } }

/* La bande des vues */
.ag-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ag-barre .sp { flex: 1; }
.ag-barre label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--dw-encre-2); }
.ag-barre input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--dw-encre); }

/* A — la liste */
.ag-mois {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 12px 0 6px; background: var(--dw-surface);
}
.ag-mois h3 { margin: 0; font-family: var(--dw-serif) !important; font-size: 22px !important; font-weight: 600 !important; }
.ag-mois small { font-size: 12.5px; color: var(--dw-encre-2); }
.ag-l {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; min-height: 64px; padding: 8px 6px; border: 0; border-radius: 12px; background: transparent;
  text-align: left; cursor: pointer; font-family: var(--dw-sans); color: var(--dw-encre); box-shadow: inset 0 -1px 0 var(--dw-trait);
}
.ag-l:hover, .ag-l[aria-pressed="true"] { background: var(--dw-surface-3); }
.ag-l:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: -3px; }
.ag-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 12px; background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1); line-height: 1.05;
}
.ag-date b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ag-date small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dw-encre-2); }
.ag-c { min-width: 0; }
.ag-c strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-c span { display: block; font-size: 12.5px; color: var(--dw-encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-d { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ag-d small { font-size: 12px; font-weight: 650; color: var(--dw-encre-2); white-space: nowrap; }
.ag-l--libre { min-height: 48px; color: var(--dw-encre-2); }
.ag-l--libre .ag-date { height: 38px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--dw-trait-fort); }
.ag-l--libre .ag-date b { font-size: 15px; }
.ag-l--libre .ag-c strong { font-size: 14px; font-weight: 600; color: var(--dw-encre-2); }

/* B — le mois */
.ag-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ag-nav h2 { margin: 0 6px !important; min-width: 170px; font-family: var(--dw-serif) !important; font-size: 26px !important; font-weight: 600 !important; }
.ag-mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-mh { padding: 4px 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--dw-encre-2); }
.ag-mc {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 100px; padding: 6px;
  border: 0; border-radius: 10px; background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1);
  text-align: left; cursor: pointer; font-family: var(--dw-sans);
}
.ag-mc--hors { background: transparent; box-shadow: none; opacity: .45; }
.ag-mc--auj { box-shadow: 0 0 0 2px var(--dw-encre); }
.ag-mc[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--dw-info-vif); }
.ag-mc:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; }
.ag-mn { font-size: 13px; font-weight: 800; color: var(--dw-encre-3); font-variant-numeric: tabular-nums; }
.ag-mc--we .ag-mn { color: var(--dw-encre); }
.ag-ev { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 6px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--dw-sur-encre); }
.ag-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev .ic { width: 12px; height: 12px; flex: none; }
.ag-ev--res { background: var(--ag-res); color: var(--ag-res-sur); }
.ag-ev--opt { background: var(--ag-opt); color: var(--ag-opt-sur); }
.ag-ev--joue { background: var(--ag-joue); }
.ag-ev--bl { background: var(--dw-encre-3); }
.ag-ev--dem { background: var(--ag-dem); color: var(--ag-dem-sur); }
.ag-pts { display: none; justify-content: center; gap: 3px; }
.ag-pts i { width: 7px; height: 7px; border-radius: 50%; }
.ag-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ag-mini button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; line-height: 1.2;
  border: 0; border-radius: 9px; background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1); cursor: pointer;
  font-family: var(--dw-sans); font-size: 12.5px; font-weight: 700; color: var(--dw-encre);
}
.ag-mini button small { font-size: 11px; font-weight: 650; color: var(--dw-encre-2); }
.ag-mini button[aria-pressed="true"] { background: var(--dw-encre); color: var(--dw-sur-encre); }
.ag-mini button[aria-pressed="true"] small { color: var(--dw-sur-encre-2); }

/* C — l annee */
.ag-an { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
.ag-am h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .05em !important; text-transform: uppercase; }
.ag-am h3 small { font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--dw-ok); }
.ag-aj { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ag-aj--we { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-ah { font-size: 10px; font-weight: 800; text-align: center; color: var(--dw-encre-2); }
.ag-j {
  position: relative; min-width: 0; height: 26px; padding: 0; border: 0; border-radius: 5px; background: var(--dw-surface-3);
  cursor: pointer; font: 700 11px/26px var(--dw-sans); text-align: center; color: var(--dw-encre-2);
}
.ag-aj--we .ag-j { height: 30px; line-height: 30px; font-size: 12px; }
.ag-j--we { background: var(--dw-trait-fort); color: var(--dw-encre); }
.ag-j--res { background: var(--ag-res); color: var(--ag-res-sur); }
.ag-j--opt { background: var(--ag-opt); color: var(--ag-opt-sur); }
.ag-j--joue { background: var(--ag-joue); color: var(--dw-sur-encre); }
.ag-j--bl { background: repeating-linear-gradient(135deg, var(--dw-encre-3) 0 3px, var(--dw-trait-fort) 3px 6px); color: var(--dw-sur-encre); }
/* Une date demandee reste libre : un point, pas une couleur de fond. */
.ag-j--dem::after, .ag-mc--dem::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-dem);
}
.ag-j--passe { opacity: .45; }
.ag-j--auj { box-shadow: 0 0 0 2px var(--dw-encre); }
.ag-j--vide { background: transparent; cursor: default; }
.ag-j[aria-pressed="true"] { outline: 2px solid var(--dw-info-vif); outline-offset: 1px; z-index: 1; }
.ag-j:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; z-index: 1; }
.ag-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 14px; }
.ag-stats div { font-size: 12.5px; line-height: 1.25; color: var(--dw-encre-2); }
.ag-stats b { display: block; font-size: 22px; font-weight: 800; color: var(--dw-encre); font-variant-numeric: tabular-nums; }

/* La legende (commune) */
.ag-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--dw-encre-2); }
.ag-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ag-leg i { position: relative; display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.ag-leg .l-res { background: var(--ag-res); }
.ag-leg .l-opt { background: var(--ag-opt); }
.ag-leg .l-joue { background: var(--ag-joue); }
.ag-leg .l-bl { background: repeating-linear-gradient(135deg, var(--dw-encre-3) 0 3px, var(--dw-trait-fort) 3px 6px); }
.ag-leg .l-libre { background: var(--dw-surface-3); }
.ag-leg .l-dem { background: var(--dw-surface-3); }
.ag-leg .l-dem::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--ag-dem); }

/* La fiche du jour */
.ag-fj__t { margin: 0 0 4px; font-family: var(--dw-serif); font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--dw-encre); }
.ag-fj__t small { display: block; margin-top: 2px; font-family: var(--dw-sans); font-size: 12.5px; font-weight: 650; color: var(--dw-encre-2); }
.ag-fj__m { padding: 12px 0; box-shadow: inset 0 -1px 0 var(--dw-trait); }
.ag-fj__m:last-child { box-shadow: none; }
.ag-fj__qui { margin: 6px 0 2px; font-family: var(--dw-serif); font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--dw-encre); }
.ag-fj__s { margin: 0; font-size: 13px; color: var(--dw-encre-2); }
.ag-fj .acc2-check { margin: 10px 0; }

@media (max-width: 1100px) {
  .ag-an { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ag-l { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; }
  .ag-date { width: 48px; height: 48px; }
  .ag-mc { min-height: 54px; align-items: center; padding: 4px 2px; }
  .ag-ev { display: none; }
  .ag-pts { display: flex; }
  .ag-nav h2 { min-width: 0; font-size: 22px !important; }
  .ag-an { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ag-fort { font-weight: 700; }
.ag-fj__s--sep { margin-top: 8px; }
.ag-pts i.l-res { background: var(--ag-res); }
.ag-pts i.l-opt { background: var(--ag-opt); }
.ag-pts i.l-joue { background: var(--ag-joue); }
.ag-pts i.l-bl { background: var(--dw-encre-3); }
.ag-pts i.l-dem { background: var(--ag-dem); }

/* La saison de l accueil, alignee sur l Agenda (13/10/2026) : une date
   seulement DEMANDEE reste libre, avec un point bleu — pas une couleur de
   fond, qui dirait « prise ». */
.sai-j--dem::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--dw-info-vif); }
.sai-leg .sai-j--dem { background: var(--dw-surface-3); }

/* ══ Utilitaires communs (13/10/2026) ══ */
/* Lu par les lecteurs d ecran, invisible a l ecran. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Les boutons d en-tete d un ecran : sans la marge des rangees de boutons
   (ce que chaque ecran ecrivait jusque-la en style en ligne). */
.acc2-top .f2-acts { margin: 0; }
/* Un champ de recherche avec sa loupe, en 16 px (sinon iOS zoome). */
.cherche2 { position: relative; display: inline-flex; align-items: center; flex: 1 1 220px; min-width: 0; max-width: 360px; }
.cherche2 .ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--dw-encre-2); }
.cherche2 input {
  width: 100%; min-height: 44px; padding: 0 12px 0 36px; border: 1px solid var(--dw-encre-3); border-radius: 10px;
  background: var(--dw-surface); color: var(--dw-encre); font-family: var(--dw-sans); font-size: 16px;
}

/* Quatre tuiles de chiffres (coupons, galerie…). */
.kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .kpis4 { grid-template-columns: 1fr 1fr; } }

/* ══ LES COUPONS — 13/10/2026 ══ */
.cp-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.cp-l { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto auto; }
.cp-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--dw-encre); }
@media (max-width: 640px) {
  .cp-l { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code etat" "c c" "a a"; }
  .cp-l .cp-code { grid-area: code; }
  .cp-l .cp-etat { grid-area: etat; }
  .cp-l .arg-t__c { grid-area: c; }
  .cp-l .arg-t__a { grid-area: a; }
}

/* ══ LA GALERIE — 13/10/2026 ══ */
.gal2-cats { flex-wrap: wrap; }
.gal2-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.gal2-carte { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--dw-r-m); background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1); }
.gal2-carte--cache .gal2-media { opacity: .5; }
.gal2-media { position: relative; background: var(--dw-encre); }
.gal2-media--landscape { aspect-ratio: 16 / 9; }
.gal2-media--portrait { aspect-ratio: 9 / 16; }
.gal2-media--square { aspect-ratio: 1 / 1; }
.gal2-media img, .gal2-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal2-corps { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.gal2-etats { display: flex; flex-wrap: wrap; gap: 6px; }
.gal2-alt { margin: 0; font-size: 13px; line-height: 1.45; color: var(--dw-encre-2); }
.gal2-corps .f2-acts { margin: 0; }

/* Une fenetre de lecture large (une fiche technique…). */
/* .dlg.dlg--large : plus precis que la largeur de .dlg dans admin.css, chargee apres. */
.dlg.dlg--large { width: min(760px, calc(100vw - 32px)); }

/* ══ LES FICHES TECHNIQUES — 13/10/2026 ══ */
.fi-l { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
.fi-contenu { display: flex; flex-direction: column; gap: 4px; }
.fi-bloc .st-h3 { margin-top: 12px; }
.fi-ligne { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 14px; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--dw-trait); font-size: 14px; }
.fi-ligne span { color: var(--dw-encre-2); }
.fi-ligne strong { font-weight: 600; color: var(--dw-encre); overflow-wrap: anywhere; }
.fi-cherche { max-width: none; width: 100%; margin: 8px 0 10px; }
.fi-resultats { max-height: 360px; overflow-y: auto; }
@media (max-width: 640px) {
  .fi-l { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d etat" "c c" "a a"; }
  .fi-l .arg-t__d { grid-area: d; }
  .fi-l .fi-etat { grid-area: etat; }
  .fi-l .arg-t__c { grid-area: c; }
  .fi-l .arg-t__a { grid-area: a; flex-wrap: wrap; }
  .fi-ligne { grid-template-columns: 1fr; gap: 0; }
}

/* ══ LA PROSPECTION — 13/10/2026 ══ */
.prosp-l { grid-template-columns: minmax(0, 1fr) auto minmax(0, 130px); }
.prosp-l--action { grid-template-columns: minmax(0, 1fr) auto; }
.prosp-l .arg-t__a { flex-wrap: wrap; justify-content: flex-end; }
.prosp-diag { white-space: pre-wrap; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1); }
#ecran-prospection .scan select { font-size: 16px; }
@media (max-width: 640px) {
  .prosp-l, .prosp-l--action { grid-template-columns: minmax(0, 1fr); }
  .prosp-l .arg-t__a { justify-content: flex-start; }
  .prosp-l .arg-t__m { text-align: left; }
}
/* Colonne etroite (territoires, agences ou lieux) : le detail passe a la ligne
   au lieu d etre coupe, et le chiffre garde sa colonne, telephone compris. */
.prosp-l.prosp-l--etroit { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.prosp-l--etroit .arg-t__c small { white-space: normal; }
.prosp-l.prosp-l--etroit .arg-t__m { text-align: right; }

/* ══ LA METEO DU JOUR J — 13/10/2026 ══ */
.meteo-rapport { margin-top: 10px; }
.meteo-mail { max-width: 420px; }
#ecran-meteo .salle-form input { font-size: 16px; min-height: 44px; }
.col-l .arg-t__c small + small { margin-top: 2px; }
/* Le telephone et l adresse passent a la ligne plutot que d etre coupes. */
.col-l .arg-t__c small { white-space: normal; overflow-wrap: anywhere; }

/* ══ LES MODELES D E-MAILS — 13/10/2026 ══ */
.tpl2-champ { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tpl2-champ .dlg__label { margin: 0; }
/* Colonne flexible : sans align-self, l interrupteur s etirait sur toute la largeur. */
.tpl2-champ .acc2-seg { align-self: flex-start; }
.tpl2-saisie {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--dw-encre-3); border-radius: 10px;
  background: var(--dw-surface); color: var(--dw-encre); font-family: var(--dw-sans); font-size: 16px; line-height: 1.5;
}
textarea.tpl2-saisie { min-height: 140px; resize: vertical; }
.tpl2-saisie:focus { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; }
.tpl2-apercu { display: block; width: 100%; height: 64vh; border: 0; border-radius: 10px; background: #FFFFFF; box-shadow: var(--dw-ombre-1); }
#tpl-etat:empty { display: none; }

/* LES CHAMPS DU SOCLE FACE A LA REGLE GENERALE D ADMIN.CSS — 13/10/2026.
   admin.css impose a tous les champs, en !important : 14 px, un retrait de
   10 px 12 px et une bordure --dw-trait (1,3:1 sur blanc, sous le seuil de
   3:1 d un controle). Sur la recherche, la loupe chevauchait le texte. Ces
   regles, plus precises, gardent la forme voulue par chaque composant ; le
   16 px des ecrans tactiles (pointer: coarse) reste en place. */
.cherche2 input[type] { padding: 0 12px 0 36px !important; border: 1px solid var(--dw-encre-3) !important; border-radius: 10px !important; }
.per2__dates input[type] { padding: 0 10px !important; border: 1px solid var(--dw-encre-3) !important; border-radius: 9px !important; }
.ag-verif__champ input[type] { padding: 0 14px !important; border: 1.5px solid var(--dw-encre-3) !important; border-radius: 12px !important; font-size: 18px !important; }
.tpl2-champ .tpl2-saisie { padding: 10px 12px !important; border: 1px solid var(--dw-encre-3) !important; border-radius: 10px !important; }
.ag2 textarea.ag-msg { padding: 10px 12px !important; border: 1px solid var(--dw-encre-3) !important; border-radius: 10px !important; background: var(--dw-surface-2) !important; }

/* ══ AJUSTER LA PRESTATION — 13/10/2026 ══
   La fenetre d un dossier qui change forfait, options, heures, kilometres et
   tarif convenu. Avant : 30 styles en ligne, des pastilles « Offert » a bord
   arrondi, un bandeau a fond jaune. L etat d une option se lit a son bouton
   (plein = offerte) et a son prix barre ; l ecart, a son signe et a sa couleur. */
.aj-opts { max-height: 320px; overflow: auto; border-radius: 12px; background: var(--dw-surface); box-shadow: var(--dw-ombre-1); }
.aj-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 2px 6px 2px 12px; border-bottom: 1px solid var(--dw-trait); }
.aj-opt:last-child { border-bottom: 0; }
.aj-opt__l { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.aj-opt__l input { width: 20px; height: 20px; flex: none; accent-color: var(--dw-encre); }
.aj-opt__l small { font-size: 11.5px; color: var(--dw-encre-2); }
.aj-opt--incluse .aj-opt__l { color: var(--dw-encre-2); cursor: default; }
.aj-opt__p { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aj-opt--incluse .aj-opt__p, .aj-opt--offerte .aj-opt__p { font-weight: 500; color: var(--dw-encre-2); }
.aj-offre {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--dw-encre-3); border-radius: 10px; background: var(--dw-surface); color: var(--dw-encre-2);
  font: 700 12.5px/1 var(--dw-sans); cursor: pointer;
}
.aj-offre[aria-pressed="true"] { background: var(--dw-ok-vif); border-color: var(--dw-ok-vif); color: var(--dw-ok-sur); }
.aj-offre:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 2px; }
.aj-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.aj-duo .dlg__f { margin-top: 12px; }
.aj-recap { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1); }
.aj-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 14px; }
.aj-l > span { color: var(--dw-encre-2); }
.aj-l > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aj-l--ecart { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--dw-trait); }
.aj-l--moins > strong { color: var(--dw-alerte); }
.aj-l--plus > strong { color: var(--dw-ok); }
.aj-l--offert > strong { color: var(--dw-or); }
.aj-seche { margin: 10px 0 2px; }
.aj-seche__t { display: block; margin-top: 8px; }
.aj-seche .f2-acts { margin-top: 6px; }
@media (max-width: 560px) { .aj-duo { grid-template-columns: minmax(0, 1fr); } }

/* L interrupteur du mode nuit, en bas de la barre laterale (js/admin-nav.js). */
.lat__etat { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--dw-or-vif); }

/* La dictee d une note (brancherDictee) : un bouton du socle ; la pastille
   rouge respire tant que le micro ecoute. L ancien etait une pilule a bord,
   aux couleurs ecrites dans le script. */
.dictee { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.dictee__pt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dw-encre-3); }
.dictee__b[aria-pressed="true"] { border-color: var(--dw-alerte-vif); }
.dictee__b[aria-pressed="true"] .dictee__pt { background: var(--dw-alerte-vif); animation: pastille-respire 1.2s ease-in-out infinite; }
.dictee__apercu { flex: 1; min-width: 0; font-size: 12.5px; font-style: italic; color: var(--dw-encre-2); }
@media (prefers-reduced-motion: reduce) { .dictee__b[aria-pressed="true"] .dictee__pt { animation: none; } }
.notif2__etat .chip { margin-right: 4px; }
/* Le bandeau « Masqué de la vue » des dossiers (renderMasques). */
.masques2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.masques2 .f2-note { margin: 0; }