/* ══════════════════════════════════════════════════════════════════════
   css/admin.css — la DA « Scene » de l espace pro DrimEvents.
   Cf. DESIGN.md, verrouille le 14/09/2026.

   Ce fichier est le SOCLE PARTAGE par les sept pages de l espace pro :
   jetons, typographie, barres, cartouches de chiffres, carte dossier, rampe,
   etiquettes d etat, fenetre modale, boutons, champs, tableaux, retours
   d action, responsive, squelette de page.

   Il ne doit contenir QUE ce qui est partage. Une regle qui ne sert qu a un
   ecran va dans la feuille de cet ecran — sinon ce fichier redevient le
   fourre-tout de 1 949 lignes dont il sort.

   Charge APRES la feuille de module d une page, JAMAIS avant : la DA doit
   avoir le dernier mot.

   Toute modification ici oblige a incrementer le ?v= sur les sept pages.
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SYSTÈME VISUEL DRIMEVENTS — v3, 9 septembre 2026
   Remplace la couche « UI modernization v2 » (Apple/Notion/Linear).

   Pourquoi la remplacer : elle empilait 255 !important par-dessus une
   première feuille, sans jamais définir de système. Résultat, 74 couleurs
   distinctes en dur, 41 variables déclarées mais contournées, 35 classes
   mortes, et un dashboard gris qui ressemblait à n'importe quel outil
   générique — aucun rapport avec une marque de DJ mariage haut de gamme.

   Les trois partis pris qui font la différence :
     1. Les chiffres d'argent sont en Cormorant Garamond, chiffres
        tabulaires. C'est la typo de la marque, et c'est ce qui distingue
        immédiatement cet écran d'un tableau de bord standard tout en Inter.
     2. L'or ne sert qu'à trois choses : l'état actif, l'argent, et une
        action principale par écran. Partout ailleurs, de l'encre.
     3. Le statut d'un dossier se lit à un liseré vertical, pas à une
        pastille de plus. Une carte = une couleur de bord, point.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Fonds ─── Papier chaud plutôt que gris Apple : on regarde cet
     écran des heures, un gris neutre fatigue et n'appartient à personne. */
  --dw-sol:          #F6F3ED;
  --dw-surface:      #FFFFFF;
  --dw-surface-2:    #FCFAF6;
  --dw-surface-3:    #F1EDE4;

  /* ─── Traits ─── */
  --dw-trait:        #E7E1D6;
  --dw-trait-fort:   #D3CABA;

  /* ─── Encre ─── Dérivée du noir de marque, pas d'un gris neutre. */
  --dw-encre:        #171310;
  --dw-encre-2:      #4A423A;
  --dw-encre-3:      #786F64;
  --dw-encre-4:      #9C9387;

  /* ─── Or ─── #D4AF37 est illisible en texte sur blanc (contraste 2,1).
     On garde le doré vif pour les aplats et les liserés, et une version
     assombrie pour tout ce qui est lu. */
  --dw-or:           #96751A;
  --dw-or-fonce:     #7A5E14;
  --dw-or-vif:       #D4AF37;
  --dw-or-voile:     #FBF3DC;

  /* ─── Nuit ─── barre latérale et barre du haut. */
  --dw-nuit:         #14110F;
  --dw-nuit-2:       #211C18;
  --dw-nuit-trait:   #322A24;
  --dw-nuit-texte:   #EFE9DE;
  --dw-nuit-texte-2: #A79C8C;

  /* ─── Sémantique ─── quatre couleurs, chacune avec son voile. */
  --dw-ok:           #1F7A4D;  --dw-ok-voile:      #E9F5EE;
  --dw-attention:    #A8630A;  --dw-attention-voile:#FCF1E1;
  --dw-alerte:       #A82820;  --dw-alerte-voile:  #FAEAE8;
  --dw-info:         #2A5C86;  --dw-info-voile:    #EAF1F7;

  /* ─── Sémantique vive ─── le 22/09/2026.
     Ces quatre-là existaient déjà, mais en DUR à l'intérieur de .chip--*.
     Le filet des blocs d'état les réutilise maintenant, et deux valeurs
     écrites à deux endroits finissent toujours par diverger. Elles vivent
     donc ici, une fois.
     Mesuré : chacune tient ≥ 4,5:1 sous son texte clair, et ≥ 4,1:1 comme
     filet sur les surfaces claires (le seuil non-texte est 3:1). */
  --dw-ok-vif:        #00875A;  --dw-ok-sur:        #FFFFFF;
  --dw-attention-vif: #B34700;  --dw-attention-sur: #FFF4EC;
  --dw-alerte-vif:    #C11B33;  --dw-alerte-sur:    #FFEEF0;
  --dw-info-vif:      #1263C4;  --dw-info-sur:      #EDF5FF;

  /* L'orange d'état en TEXTE sur une surface claire. --dw-attention (#A8630A)
     tient 4,71:1 sur du blanc mais tombe à 4,04:1 sur --dw-surface-3 : sous
     le seuil AA dès que le fond bouge un peu. Celui-ci tient 5,23:1 sur le
     plus sombre des fonds clairs. Mesuré, pas estimé. */
  --dw-attention-texte: #8F5406;

  /* ─── Espacement ─── un seul pas de 4. */
  --dw-1: 4px; --dw-2: 8px; --dw-3: 12px; --dw-4: 16px;
  --dw-5: 24px; --dw-6: 32px; --dw-7: 48px;

  /* ─── Rayons ─── trois, pas huit. */
  --dw-r-s: 8px; --dw-r-m: 12px; --dw-r-l: 18px;

  /* ─── Ombres ─── teintées chaud, sinon elles virent au bleu. */
  --dw-ombre-1: 0 1px 2px rgba(35,26,15,0.05), 0 0 0 1px rgba(35,26,15,0.04);
  --dw-ombre-2: 0 6px 20px rgba(35,26,15,0.08), 0 0 0 1px rgba(35,26,15,0.04);
  --dw-ombre-3: 0 24px 60px rgba(35,26,15,0.16), 0 6px 14px rgba(35,26,15,0.07);

  /* ─── Typographie ─── */
  --dw-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --dw-sans:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --dw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Compatibilité : d'anciennes règles lisent encore ces noms. On les fait
     pointer vers le nouveau système plutôt que de les traquer une à une. */
  --ui-bg: var(--dw-sol);           --ui-surface: var(--dw-surface);
  --ui-surface-2: var(--dw-surface-2); --ui-surface-hover: var(--dw-surface-3);
  --ui-border: var(--dw-trait);     --ui-border-strong: var(--dw-trait-fort);
  --ui-text: var(--dw-encre);       --ui-text-2: var(--dw-encre-2);
  --ui-text-3: var(--dw-encre-3);   --ui-text-4: var(--dw-encre-4);
  --ui-accent: var(--dw-or);        --ui-accent-hover: var(--dw-or-fonce);
  --ui-accent-soft: var(--dw-or-voile);
  --ui-success: var(--dw-ok);       --ui-success-soft: var(--dw-ok-voile);
  --ui-warning: var(--dw-attention);--ui-warning-soft: var(--dw-attention-voile);
  --ui-danger: var(--dw-alerte);    --ui-danger-soft: var(--dw-alerte-voile);
  --ui-info: var(--dw-info);
  --ui-shadow-1: var(--dw-ombre-1); --ui-shadow-2: var(--dw-ombre-2);
  --ui-shadow-3: var(--dw-ombre-2); --ui-shadow-modal: var(--dw-ombre-3);
  --ui-r-sm: var(--dw-r-s); --ui-r-md: var(--dw-r-m);
  --ui-r-lg: var(--dw-r-m); --ui-r-xl: var(--dw-r-l);
  --ui-ease: var(--dw-ease);
  --border-soft: var(--dw-trait);
  --gold: var(--dw-or); --gold-soft: var(--dw-or-voile);
}

/* ─── Socle ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--dw-sans) !important;
  background: var(--dw-sol) !important;
  color: var(--dw-encre) !important;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Les titres restent en Inter : c'est de l'interface, pas de l'éditorial.
   Le serif est réservé aux chiffres — voir plus bas. */
h1, h2, h3, h4 {
  font-family: var(--dw-sans) !important;
  color: var(--dw-encre) !important;
  letter-spacing: -0.02em !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}
h1 { font-size: 25px !important; }
h2 { font-size: 19px !important; }
h3 { font-size: 15px !important; }

/* Intitulé de section : petites capitales espacées + filet.
   Sert à séparer sans ajouter de boîte. */
.modal__section > h3,
.analytics-section > h2 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
  color: var(--dw-encre-3) !important;
}

/* ─── Chiffres ──────────────────────────────────────────────────────────
   Le seul endroit où le serif apparaît. Un montant en Cormorant, chiffres
   tabulaires, se repère instantanément dans une page d'interface — et c'est
   la signature de la marque. */
.kpi-card__value,
.compta-card__value,
.coupon-stat__num,
.card__price,
.donut-center,
.kpi-mini__value {
  font-family: var(--dw-serif) !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--dw-encre) !important;
}
.kpi-card__value { font-size: 34px !important; line-height: 1 !important; }
.compta-card__value { font-size: 27px !important; line-height: 1.05 !important; }
.card__price { font-size: 17px !important; color: var(--dw-or) !important; }
.finance-table td, .finance-table th { font-variant-numeric: tabular-nums; }

/* Les skins de .admin-topbar et de .admin-sidebar occupaient ici 55 lignes.
   Retires le 14/09/2026 avec la barre laterale elle-meme : le bandeau
   .admin-entete, defini plus bas, les remplace sur les sept pages. */
/* ─── Cartouches de chiffres clés ───────────────────────────────────── */
.kpi-row { gap: var(--dw-3) !important; }
.kpi-card {
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-trait) !important;
  border-radius: var(--dw-r-m) !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  transition: border-color 180ms var(--dw-ease);
}
.kpi-card:hover { border-color: var(--dw-trait-fort) !important; }
.kpi-card__label {
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.08em !important;
  color: var(--dw-encre-3) !important; margin-bottom: 8px !important;
}
.kpi-card__sub { font-size: 12px !important; color: var(--dw-encre-3) !important; margin-top: 6px !important; }
/* Un seul cartouche en avant : celui qui porte le chiffre du moment. */

/* ─── Barre d'outils ────────────────────────────────────────────────── */
.toolbar h1 { font-size: 25px !important; font-weight: 650 !important; }
.toolbar input[type="search"], .toolbar select, .finance-year-select {
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-trait) !important;
  border-radius: var(--dw-r-s) !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  color: var(--dw-encre) !important;
  transition: border-color 150ms var(--dw-ease), box-shadow 150ms var(--dw-ease);
}
.toolbar input[type="search"]:focus, .toolbar select:focus {
  border-color: var(--dw-or) !important;
  box-shadow: 0 0 0 3px var(--dw-or-voile) !important;
  outline: none !important;
}

/* ─── Onglets d'étape ───────────────────────────────────────────────── */
.filtres__ligne { background: var(--dw-sol) !important; }
.puce {
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-trait) !important;
  color: var(--dw-encre-2) !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  border-radius: 9px !important;
  padding: 8px 13px !important;
}
.puce:hover { border-color: var(--dw-trait-fort) !important; }
.puce__n {
  background: var(--dw-surface-3) !important;
  color: var(--dw-encre-3) !important;
  font-variant-numeric: tabular-nums;
}
.puce[aria-pressed="true"] {
  background: var(--dw-nuit) !important;
  border-color: var(--dw-nuit) !important;
  color: #F3E7C4 !important;
}
.puce[aria-pressed="true"] .puce__n { background: rgba(212,175,55,0.20) !important; color: var(--dw-or-vif) !important; }

/* ─── Colonnes du pipeline ──────────────────────────────────────────── */
.col, .kanban__col { background: transparent !important; }
.col__header {
  color: var(--dw-encre-3) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  padding: 4px 2px 10px !important;
  border-bottom: 1px solid var(--dw-trait);
  margin-bottom: 8px;
}
.col__header .count {
  background: var(--dw-surface-3) !important;
  color: var(--dw-encre-2) !important;
  font-variant-numeric: tabular-nums;
}

/* ─── Carte dossier ─────────────────────────────────────────────────────
   Le statut se lit au liseré de gauche. Avant, chaque carte empilait
   jusqu'à cinq pastilles de couleurs différentes : l'œil ne savait plus où
   se poser, et rien ne ressortait vraiment. */
.card {
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-trait) !important;
  border-radius: var(--dw-r-s) !important;
  padding: 12px 13px 14px !important;
  box-shadow: none !important;
  transition: border-color 160ms var(--dw-ease), transform 160ms var(--dw-ease), box-shadow 160ms var(--dw-ease);
}
.card:hover {
  border-color: var(--dw-trait-fort) !important;
  box-shadow: var(--dw-ombre-1) !important;
  transform: translateY(-1px);
}
.card__name { font-size: 14.5px !important; font-weight: 650 !important; letter-spacing: -0.01em; color: var(--dw-encre) !important; }
.card__meta { font-size: 12px !important; color: var(--dw-encre-3) !important; margin-top: 3px !important; }
.card__row { margin-top: 10px !important; }
.card__age { font-size: 11.5px !important; color: var(--dw-encre-4) !important; font-variant-numeric: tabular-nums; }
.card__age.warning { color: var(--dw-attention) !important; }
.card__age.danger  { color: var(--dw-alerte) !important; font-weight: 600; }
.card__forfait {
  background: var(--dw-surface-3) !important;
  color: var(--dw-encre-2) !important;
  border: none !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 8px !important; border-radius: 5px !important;
}

/* Liseré par étape, posé par renderCard. */
/* Le lisere colore a gauche est banni par la DA (DESIGN.md) : c est le gabarit
   par defaut de tous les generateurs, et il aplatit la hierarchie. L etat
   passe dans la rampe, en bas de carte. La bordure gauche redevient neutre. */
.card--nouvelle,
.card--contactee,
.card--devis_envoye,
.card--validee,
.card--confirmee,
.card--realisee,
.card--annulee      { border-left-color: transparent !important; border-left-width: 0 !important; }

/* ─── La rampe ──────────────────────────────────────────────────────────
   DA « Scene » : l etat dominant d une carte se lit comme un eclairage de
   scene qui deborde sous le praticable, pas comme un lisere a gauche. Une
   carte porte UNE rampe. Les etiquettes disent le detail ; la rampe dit ce
   qui bloque, et se lit sans lire un mot — c est ce qu on veut sur un kanban
   qu on balaye.
   La lueur est en box-shadow de la meme teinte : aucun fond translucide, donc
   aucun risque de kaki. */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--rampe, transparent);
  box-shadow: 0 0 14px 1px var(--rampe-lueur, transparent);
  pointer-events: none;
}
.card--nouvelle      { --rampe: #4DA3FF; --rampe-lueur: rgba(77,163,255,.55); }
.card--contactee     { --rampe: #4DA3FF; --rampe-lueur: rgba(77,163,255,.45); }
.card--devis_envoye  { --rampe: #FF8A4C; --rampe-lueur: rgba(255,138,76,.5); }
.card--validee       { --rampe: #FFC94A; --rampe-lueur: rgba(255,201,74,.5); }
.card--confirmee     { --rampe: #17E08C; --rampe-lueur: rgba(23,224,140,.5); }
.card--realisee      { --rampe: #6B7A99; --rampe-lueur: rgba(107,122,153,.35); }
.card--annulee       { --rampe: #FF5C6E; --rampe-lueur: rgba(255,92,110,.4); }
@media (prefers-reduced-motion: reduce) {
  .card::after { box-shadow: none; }
}

/* ─── Étiquettes d'état ─────────────────────────────────────────────────
   Une seule forme, une seule taille, quatre couleurs. Remplace les onze
   variantes écrites en style= dans le JavaScript. */
/* DA « Scene », verrouillee le 14/09 (cf. DESIGN.md).
   Avant : rayon 999px, bordure 1px, fond pale. Trois informations de meme
   rang portaient trois formes differentes, chacune cernee d un contour qui
   ne separait que du vide. C est le badge par defaut de tous les
   generateurs — exactement ce que Helmi a refuse.
   Maintenant : plein contraste, aucun contour, rayon 7px. La couleur porte
   le sens, la forme ne le contredit plus. Texte clair sur fond sature :
   4,9:1 minimum dans les deux themes, la ou les voiles pales plafonnaient
   sous le seuil AA des que le fond bougeait. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  padding: 4px 9px; border-radius: 7px;
  border: 0; white-space: nowrap;
  vertical-align: middle; line-height: 1.35;
  /* Sans ces trois lignes, un chip au texte trop long sort de la carte et
     passe sous la case a cocher — c est exactement ce qui est arrive au
     badge « revenu 2x ». La contrainte vit ici, dans le composant, pour que
     le prochain texte trop long soit coupe au lieu de casser la mise en page. */
  max-width: 100%; min-width: 0; overflow: hidden;
}
.chip .ic { opacity: .9; }
.chip--neutre    { background: var(--dw-encre-2); color: #FBF9F5; }
.salle-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 14px 0 0; }
.salle-form input { flex: 1 1 190px; min-width: 0; padding: 10px 12px; font: inherit;
  color: var(--dw-encre); background: var(--dw-surface); border: 1px solid var(--dw-trait); border-radius: 8px; }
.salle-form .sugg { position: relative; flex: 1 1 190px; display: flex; }
.salle-form .sugg input { flex: 1 1 auto; }
.salle-form__aide { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--dw-alerte-voile); color: var(--dw-alerte); font-size: .88rem; }
.salle-form__aide[hidden] { display: none !important; }
.salles-liste { margin-top: 16px; display: grid; gap: 8px; }
.salle { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--dw-surface-2); border: 1px solid var(--dw-trait); border-radius: 8px; }
.salle__nom { font-weight: 600; }
.salle__ville { color: var(--dw-encre-2); font-size: .9rem; }
.salle__var { color: var(--dw-encre-3, var(--dw-encre-2)); font-size: .82rem; opacity: .8; }
.salle__retirer { margin-left: auto; padding: 6px 10px; font-size: .84rem;
  color: var(--dw-alerte); background: none; border: 1px solid var(--dw-trait); border-radius: 6px; cursor: pointer; }
.salle__retirer:hover { background: var(--dw-alerte-voile); }
.sugg__liste { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto;
  background: var(--dw-surface); border: 1px solid var(--dw-trait); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.sugg__liste[hidden] { display: none !important; }
.sugg__liste button { display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 6px;
  background: none; font: inherit; color: var(--dw-encre); text-align: left; cursor: pointer; }
.sugg__liste button:hover, .sugg__liste button:focus-visible { background: var(--dw-surface-3); outline: none; }
.chip--or        { background: #8A6200; color: #FFF8E6; }
.chip--ok        { background: var(--dw-ok-vif); color: var(--dw-ok-sur); }
/* Plus d ambre : c est lui qui vire au kaki des qu on le melange au bleu de
   nuit. Orange franc, texte quasi noir. Mesure : 8,9:1. */
.chip--attention { background: var(--dw-attention-vif); color: var(--dw-attention-sur); }
.chip--alerte    { background: var(--dw-alerte-vif); color: var(--dw-alerte-sur); }
.chip--info      { background: var(--dw-info-vif); color: var(--dw-info-sur); }
.chip--signal    { background: var(--dw-info-vif); color: var(--dw-info-sur); }
.card__fiche-badge {
  background: #00875A !important; color: #FFFFFF !important;
  border: 0 !important; border-radius: 7px !important;
  font-size: 11px !important; font-weight: 700 !important; padding: 4px 9px !important;
}

/* ─── Fenêtre dossier ───────────────────────────────────────────────── */
.modal-bg { background: rgba(23,19,16,0.55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal {
  background: var(--dw-surface) !important;
  border-radius: var(--dw-r-l) !important;
  box-shadow: var(--dw-ombre-3) !important;
  border: none !important;
}
.modal__header {
  background: var(--dw-surface) !important;
  border-bottom: 1px solid var(--dw-trait) !important;
  padding: 18px 22px !important;
}
.modal__title { font-size: 19px !important; font-weight: 650 !important; letter-spacing: -0.02em !important; }
.modal__body { padding: 20px 22px 24px !important; }
.modal__section { border: none !important; padding: 0 !important; margin-bottom: var(--dw-6) !important; }
.modal__section > h3 { margin-bottom: 12px !important; padding-bottom: 8px; border-bottom: 1px solid var(--dw-trait); }
.modal__close { color: var(--dw-encre-3) !important; }

/* Paires libellé / valeur */
.kv-grid { gap: 14px 20px !important; }
.kv__label {
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: 0.07em !important; text-transform: uppercase;
  color: var(--dw-encre-4) !important;
}
.kv__value { font-size: 14px !important; font-weight: 550 !important; color: var(--dw-encre) !important; margin-top: 3px !important; }

/* ─── Bandeau de suivi du dossier ───────────────────────────────────── */
.dossier-status {
  background: var(--dw-surface-2) !important;
  border: 1px solid var(--dw-trait) !important;
  border-radius: var(--dw-r-m) !important;
  padding: var(--dw-3) !important;
  gap: var(--dw-2) !important;
}
/* DA « Scene » (DESIGN.md) : la separation vient de l elevation et d un
   filet de lumiere, jamais d un contour ni d un fond repeint.
   Avant : bordure 1px + liseré colore a gauche + fond teinte par etat
   (#F0F8F0, #FFF8E1, #FFEBEE). Trois signaux pour une seule information,
   et le fond teinte abaissait le contraste du texte pose dessus.
   Maintenant : une seule surface, un filet colore en haut, et l etiquette
   qui porte la couleur. Le fond ne bouge plus, donc le contraste du texte
   est garanti quel que soit l etat. */
.dossier-stat {
  background: var(--dw-surface) !important;
  border: 0 !important;
  border-radius: var(--dw-r-s) !important;
  padding: 11px 13px !important;
  box-shadow: 0 2px 6px rgba(35,26,15,.07), 0 1px 2px rgba(35,26,15,.05),
              inset 0 2px 0 var(--dw-trait-fort) !important;
}
.dossier-stat--ok     { box-shadow: 0 2px 6px rgba(35,26,15,.07), 0 1px 2px rgba(35,26,15,.05), inset 0 2px 0 var(--dw-ok) !important;        background: var(--dw-surface) !important; }
.dossier-stat--warn   { box-shadow: 0 2px 6px rgba(35,26,15,.07), 0 1px 2px rgba(35,26,15,.05), inset 0 2px 0 var(--dw-attention) !important; background: var(--dw-surface) !important; }
.dossier-stat--urgent { box-shadow: 0 2px 6px rgba(35,26,15,.07), 0 1px 2px rgba(35,26,15,.05), inset 0 2px 0 var(--dw-alerte) !important;    background: var(--dw-surface) !important; }
.dossier-stat--todo   { box-shadow: 0 2px 6px rgba(35,26,15,.07), 0 1px 2px rgba(35,26,15,.05), inset 0 2px 0 var(--dw-trait-fort) !important; background: var(--dw-surface) !important; }
.dossier-stat--gray   { box-shadow: 0 2px 6px rgba(35,26,15,.07), inset 0 2px 0 var(--dw-trait-fort) !important;                               background: var(--dw-surface-2) !important; }
/* Survol : elevation, 170ms — la valeur de la charte transverse (§6). */
.dossier-stat--clic:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 22px rgba(35,26,15,.13), inset 0 2px 0 var(--dw-or-vif) !important;
}
.dossier-stat__label { font-size: 13.5px !important; font-weight: 650 !important; color: var(--dw-encre) !important; }
.dossier-stat__sub   { font-size: 11.5px !important; color: var(--dw-encre-3) !important; }
.dossier-stat__action {
  background: var(--dw-encre-2) !important;
  border: 0 !important;
  color: #FBF9F5 !important;
  border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important;
}
.dossier-stat__action:hover { background: var(--dw-nuit) !important; color: #F3E7C4 !important; border-color: var(--dw-nuit) !important; }

/* ─── Boutons ───────────────────────────────────────────────────────────
   Trois niveaux, pas davantage : principal (encre), courant (contour),
   destructeur (rouge en contour). L'or est réservé à UNE action par écran. */
.action-btn, .btn, .fiche-btn, .gal-import-btn {
  font-family: var(--dw-sans);
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-trait) !important;
  color: var(--dw-encre) !important;
  border-radius: var(--dw-r-s) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  /* 44 px, PARCE QUE C EST LA REGLE DE HELMI ET QU ON ETAIT A 40.
     Mesure du 26/09 sur la liste des options du catalogue : les trois boutons
     d action de chaque ligne rendaient a 48 x 40. Les standards transverses
     disent « cibles >= 44px », et cet ecran se lit au telephone. Quatre
     pixels : c est peu a lire, c est beaucoup au pouce. */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-align: center; text-decoration: none;
  transition: background 150ms var(--dw-ease), border-color 150ms var(--dw-ease), transform 100ms var(--dw-ease);
}
.action-btn:hover, .btn:hover { background: var(--dw-surface-3) !important; border-color: var(--dw-trait-fort) !important; }
.action-btn:active, .btn:active { transform: scale(0.985); }
.action-btn.primary, .btn.primary {
  background: var(--dw-nuit) !important;
  border-color: var(--dw-nuit) !important;
  color: #F6EFD9 !important;
}
.action-btn.primary:hover, .btn.primary:hover { background: #2A231D !important; }
.action-btn.danger {
  color: var(--dw-alerte) !important;
  border-color: #EFCFCB !important;
  background: var(--dw-surface) !important;
}
.action-btn.danger:hover { background: var(--dw-alerte-voile) !important; }
.action-btn:disabled { opacity: 0.5 !important; cursor: not-allowed; }
.btn-link { color: var(--dw-or) !important; font-weight: 600; }
.actions-grid { gap: var(--dw-2) !important; }

/* ─── Prochaine action ─────────────────────────────────────────────────
   Le bloc qui repond a  et maintenant ?  avant meme qu'on lise la fiche.
   Il porte une seule action mise en avant : celle que l'etape du dossier
   commande. Les autres restent disponibles, mais plus bas et repliees. */
.suite {
  border: 1px solid var(--dw-trait);
  border-left: 4px solid var(--dw-or-vif);
  border-radius: var(--dw-r-m);
  background: var(--dw-surface);
  padding: var(--dw-4) var(--dw-4) var(--dw-4) var(--dw-5);
  margin-bottom: var(--dw-5);
  box-shadow: var(--dw-ombre-1);
}
.suite--alerte    { border-left-color: var(--dw-alerte);    background: var(--dw-alerte-voile); }
.suite--attention { border-left-color: var(--dw-attention); background: var(--dw-attention-voile); }
.suite--ok        { border-left-color: var(--dw-ok);        background: var(--dw-ok-voile); }
.suite--neutre    { border-left-color: var(--dw-trait-fort); background: var(--dw-surface-2); }
.suite__etape {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--dw-encre-3); margin-bottom: var(--dw-1);
}
.suite__titre {
  font-family: var(--dw-serif); font-size: 22px; line-height: 1.18;
  font-weight: 600; color: var(--dw-encre); text-wrap: balance;
}
.suite__pourquoi {
  font-size: 13px; line-height: 1.55; color: var(--dw-encre-2);
  margin: var(--dw-2) 0 0; max-width: 62ch;
}
.suite__actions { display: flex; flex-wrap: wrap; gap: var(--dw-2); margin-top: var(--dw-3); }
.suite-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; min-height: 44px;
  border: 1px solid var(--dw-trait-fort); border-radius: var(--dw-r-s);
  background: var(--dw-surface); color: var(--dw-encre);
  font-family: var(--dw-sans); font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .12s var(--dw-ease), background .15s ease, border-color .15s ease;
}
.suite-btn:hover  { background: var(--dw-surface-3); border-color: var(--dw-encre-4); }
.suite-btn:active { transform: scale(0.97); }
.suite-btn--principal {
  background: var(--dw-nuit); color: var(--dw-nuit-texte);
  border-color: var(--dw-nuit); box-shadow: var(--dw-ombre-1);
}
.suite-btn--principal:hover { background: var(--dw-nuit-2); border-color: var(--dw-nuit-2); }

/* ─── « Toutes les actions » : le dépliant a été remplacé le 26/09/2026 ──
   Il vivait en sixième position dans la fiche, replié, et le 21/09 on avait
   collé son en-tête au bas de la fenêtre pour qu'on le trouve sans dérouler.
   Helmi : « c'est encore trop caché ». Le problème n'était pas de l'atteindre,
   c'était de le voir. Les actions sont maintenant en deuxième position, dans
   un menu — `.acts` — et comme il ne sert qu'à la fiche client, il vit dans
   `css/admin-modules.css`, la feuille d'admin.html, pas dans ce socle partagé
   par les sept pages.

   Les règles `.actions-repli` n'avaient plus un seul usage : elles sont
   retirées plutôt que gardées « au cas où » — DESIGN.md compte déjà les
   classes mortes parmi ses griefs. `.actions-groupe__titre` RESTE, elle :
   le registre des signatures s'en sert toujours, et la retirer au passage
   aurait déshabillé ce bloc-là sans que rien ne le dise. */
.actions-groupe__titre {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--dw-encre-3); margin-bottom: var(--dw-2);
}
/* ─── Dossiers d'un meme couple ──────────────────────────────────────── */
.lies {
  border: 1px solid var(--dw-trait);
  border-left: 4px solid var(--dw-trait-fort);
  border-radius: var(--dw-r-m);
  background: var(--dw-surface-2);
  padding: var(--dw-4);
  margin-bottom: var(--dw-4);
}
/* Un doublon en cours est un risque ; un ancien client est une bonne
   nouvelle. Deux couleurs, sinon l'avertissement s'use sur les deux. */
.lies--risque {
  border-color: var(--dw-attention);
  border-left-color: var(--dw-attention);
  background: var(--dw-attention-voile);
}
.lies--historique {
  border-color: var(--dw-ok);
  border-left-color: var(--dw-ok);
  background: var(--dw-ok-voile);
}
.lies__titre {
  font-size: 13px; font-weight: 700; color: var(--dw-encre);
  margin-bottom: var(--dw-1);
}
.lies__note {
  font-size: 12.5px; line-height: 1.55; color: var(--dw-encre-2);
  margin: 0 0 var(--dw-3); max-width: 62ch;
}
.lie {
  display: flex; align-items: center; gap: var(--dw-3);
  padding: 10px var(--dw-3);
  border: 1px solid var(--dw-trait);
  border-radius: var(--dw-r-s);
  background: var(--dw-surface);
}
.lie + .lie { margin-top: var(--dw-2); }
.lie__corps { flex: 1; min-width: 0; }
.lie__ref { font-size: 12.5px; font-weight: 700; color: var(--dw-encre); }
/* Ce qui differe est ce qui aide a choisir : on lui donne le poids. */
.lie__ecarts { font-size: 12.5px; color: var(--dw-encre); margin-top: 2px; }
.lie__quand { font-size: 11px; color: var(--dw-encre-3); margin-top: 2px; }
.lie__ouvrir {
  /* 44 px : cible tactile (voir la note du bloc mobile). */
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--dw-trait-fort); border-radius: var(--dw-r-s);
  background: var(--dw-surface); color: var(--dw-encre);
  font-family: var(--dw-sans); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lie__ouvrir:hover { background: var(--dw-surface-3); }
@media (max-width: 640px) {
  .lie { flex-direction: column; align-items: stretch; }
  .lie__ouvrir { width: 100%; }
}


@media (max-width: 640px) {
  .suite { padding: var(--dw-4) var(--dw-3) var(--dw-4) var(--dw-4); }
  .suite__titre { font-size: 19px; }
  /* Sur telephone les boutons empiles, pleine largeur : viser un bouton de
     140 px au pouce, dans une liste horizontale, c'est ce qui fait rater. */
  .suite__actions { flex-direction: column; align-items: stretch; }
}

/* ─── Champs ────────────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="search"], input[type="url"], select, textarea {
  font-family: var(--dw-sans);
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-trait) !important;
  border-radius: var(--dw-r-s) !important;
  color: var(--dw-encre) !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  transition: border-color 150ms var(--dw-ease), box-shadow 150ms var(--dw-ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--dw-or) !important;
  box-shadow: 0 0 0 3px var(--dw-or-voile) !important;
  outline: none !important;
}
::placeholder { color: var(--dw-encre-4) !important; }
label { color: var(--dw-encre-2); }

/* ─── Tableaux ──────────────────────────────────────────────────────── */
.finance-table { border-collapse: separate !important; border-spacing: 0 !important; }
.finance-table th {
  background: var(--dw-surface-2) !important;
  color: var(--dw-encre-3) !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.07em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--dw-trait) !important;
}
.finance-table td { padding: 11px 12px !important; border-bottom: 1px solid var(--dw-trait) !important; font-size: 13.5px !important; }
.finance-table tbody tr:hover { background: var(--dw-surface-2) !important; }
.row-clickable { cursor: pointer; }

/* ─── Cartes d'analyse, comptabilité, coupons, fiches, galerie ──────── */
.analytics-card, .compta-card, .coupon-card, .fiche-card,
.depense-cat-card, .gal-card, .depenses-section, .finance-table-wrap {
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-trait) !important;
  border-radius: var(--dw-r-m) !important;
  box-shadow: none !important;
}
.analytics-card:hover, .coupon-card:hover, .fiche-card:hover { border-color: var(--dw-trait-fort) !important; }
.compta-card__label, .coupon-stat__label, .depense-cat-card__label {
  font-size: 10.5px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.07em !important;
  color: var(--dw-encre-3) !important;
}
.compta-card__sub { color: var(--dw-encre-3) !important; font-size: 12px !important; }
.coupon-code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace !important;
  background: var(--dw-or-voile) !important;
  color: var(--dw-or-fonce) !important;
  border: 1px dashed #E2CE95 !important;
  border-radius: 6px !important;
  letter-spacing: 0.06em;
}

/* Barres de progression et graphiques : une seule couleur de remplissage. */
.bar-bg, .bar-row__bar-bg, .compta-progress { background: var(--dw-surface-3) !important; border-radius: 999px !important; }
.bar-row__bar-fg, .compta-progress__fill, .bar-prevu { background: var(--dw-or-vif) !important; border-radius: 999px !important; }
.bar-encaisse { background: var(--dw-ok) !important; }
.histo-col { background: var(--dw-or-vif) !important; border-radius: 3px 3px 0 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LES RETOURS D ACTION — une seule definition, et la forme de la maison
   ═══════════════════════════════════════════════════════════════════════
   DEUX DEFAUTS CORRIGES LE 14/09 AU SOIR, signales par Helmi.

   1. LA FORME ETAIT UN INTERDIT DE NOTRE PROPRE CHARTE.
      « border-left: 3px solid » sur une carte arrondie : c est la forme
      n° 2 de la liste des bannis de site/DESIGN.md — « le lisere de
      couleur a gauche d une carte arrondie, gabarit generique ». Elle
      etait ici, dans la feuille meme qui porte la DA, ecrite par celui
      qui venait d ecrire l interdit. Elle est remplacee par la RAMPE :
      un filet lumineux de 3 px EN BAS avec sa lueur, la forme canonique
      du projet pour dire l etat dominant.

   2. LA NOTIFICATION PASSAIT SOUS LA BARRE BASSE.
      La barre de navigation du telephone a ete ajoutee le meme jour, en
      bas, sans que personne ne redescende verifier ce qui s y trouvait
      deja. Le toast etait a bottom: 20px : exactement dessous.

   ET, COMME POUR L EN-TETE : .toast etait defini HUIT fois — ici,
   dans admin-modules.css, et dans les six pages satellites, avec trois
   positions et trois z-index differents. Les sept autres sont supprimees.
   ═══════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 9500;                       /* sous le panneau ⌘K (9000+), sur tout le reste */
  display: flex; align-items: center; gap: 9px;
  max-width: min(560px, calc(100vw - 28px));
  padding: 13px 18px 15px;
  border-radius: 12px;
  overflow: hidden;                    /* la rampe suit l arrondi */
  /* La profondeur se fait par le degrade et l elevation, jamais par un
     trait d 1 px : c est le principe de la direction « Scene ». */
  background: linear-gradient(160deg, #241E1A, #14110F);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  color: #EFE9DE;                      /* 14,1:1 sur le fond le plus clair */
  font-size: 13.5px; font-weight: 550; line-height: 1.45;
  border: 0;
}
.toast svg, .toast .ic { flex: none; width: 16px; height: 16px; }

/* La rampe. Un seul etat par toast — c est toute la raison d etre d un toast. */
.toast::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(239, 233, 222, 0.55);
  box-shadow: 0 0 12px rgba(239, 233, 222, 0.35);
}
/* Chaque teinte porte un sens. Une couleur qui ne signifie rien est
   bannie par la charte — le neutre ci-dessus n est donc pas dore. */
.toast.success::after { background: #17E08C; box-shadow: 0 0 14px rgba(23, 224, 140, 0.5); }
.toast.error::after   { background: #FF5C6E; box-shadow: 0 0 14px rgba(255, 92, 110, 0.5); }
.toast.warning::after { background: #FF8A4C; box-shadow: 0 0 14px rgba(255, 138, 76, 0.5); }

@media (max-width: 768px) {
  /* Au-dessus de la barre basse (54 px) et de sa reserve systeme. */
  .toast {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    left: 14px; right: 14px;
    transform: none;
    max-width: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-entree 220ms cubic-bezier(.2, .7, .2, 1); }
  @keyframes toast-entree { from { opacity: 0; transform: translate(-50%, 10px); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
  @keyframes toast-entree { from { opacity: 0; transform: translateY(10px); } }
}
.empty-state, .loading-state { color: var(--dw-encre-4) !important; font-size: 13px !important; }

/* ─── Divers ────────────────────────────────────────────────────────── */
/* ─── Les etats inline : une seule forme, celle du chip ───────────────
   Le 14/09, la DA a tranche pour ces petits reperes : plein contraste,
   aucun contour, rayon 7 px — « la couleur porte le sens, la forme ne le
   contredit plus ». Elle avait applique la FORME a .status-badge et
   .alerte-pill, mais pas les couleurs : les fonds pales de
   admin-modules.css restaient dessous. Le 22/09 on finit le travail, avec
   les memes tokens que .chip pour qu il n y ait qu un jeu de couleurs.

   ET ON CORRIGE UN VRAI DEFAUT. `.alerte-pill` posait
   `background: var(--dw-alerte) !important` sur la classe de BASE : les
   trois variantes — danger, warning, info — sortaient donc ROUGES. Sur le
   tableau de bord, « 3 soldes en retard », « 3 soldes sous 7 jours » et
   « 2 acomptes attendus » disaient trois choses differentes de la meme
   couleur d alarme. La couleur ne portait plus rien du tout. */
.status-badge { border-radius: 7px !important; border: 0 !important; font-size: 11px !important; font-weight: 700 !important; padding: 4px 9px !important; }
.status-badge.recu              { background: var(--dw-ok-vif) !important;        color: var(--dw-ok-sur) !important; }
.status-badge.attente           { background: var(--dw-attention-vif) !important; color: var(--dw-attention-sur) !important; }
.status-badge.imminent          { background: var(--dw-attention-vif) !important; color: var(--dw-attention-sur) !important; }
.status-badge.en_retard         { background: var(--dw-alerte-vif) !important;    color: var(--dw-alerte-sur) !important; }
.status-badge.a_venir           { background: var(--dw-info-vif) !important;      color: var(--dw-info-sur) !important; }
.status-badge.bloquant_acompte  { background: var(--dw-encre-2) !important;       color: #FBF9F5 !important; }

.alerte-pill {
  background: var(--dw-encre-2) !important;
  color: #FBF9F5 !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-size: 12px !important; font-weight: 700 !important;
}
.alerte-pill.danger  { background: var(--dw-alerte-vif) !important;    color: var(--dw-alerte-sur) !important; }
.alerte-pill.warning { background: var(--dw-attention-vif) !important; color: var(--dw-attention-sur) !important; }
.alerte-pill.info    { background: var(--dw-info-vif) !important;      color: var(--dw-info-sur) !important; }
.skeleton { background: linear-gradient(90deg, var(--dw-surface-3) 25%, #EDE7DC 37%, var(--dw-surface-3) 63%) !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dw-trait-fort); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--dw-encre-4); }

:focus-visible { outline: 2px solid var(--dw-or) !important; outline-offset: 2px !important; border-radius: 4px; }

/* ─── Téléphone ─────────────────────────────────────────────────────────
   Les mêmes composants, resserrés. On ne change pas de mise en page, on
   change de densité : c'est ce qui rend les deux supports cohérents. */
@media (max-width: 768px) {
  .admin-main { padding: 14px 12px 40px !important; }
  h1, .toolbar h1 { font-size: 21px !important; }
  .kpi-card { padding: 13px 14px !important; }
  .kpi-card__value { font-size: 28px !important; }
  .compta-card__value { font-size: 23px !important; }
  .card { padding: 11px 12px !important; }
  .modal__header { padding: 15px 16px !important; }
  .modal__body { padding: 16px 16px 24px !important; }
  .modal__section { margin-bottom: var(--dw-5) !important; }
  .action-btn { min-height: 44px; }
  .dossier-status { padding: var(--dw-2) !important; }
}

/* ─── Fluidite type application (02/09/2026) ─────────────────────────────── */

/* Le modal apparaissait d'un coup. Il s'ouvre maintenant en fondu + echelle. */
.modal-bg { opacity: 0; transition: opacity .18s ease; }
.modal-bg.open { opacity: 1; }
.modal { transform: scale(.97) translateY(8px); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s ease; }
.modal-bg.open .modal { transform: none; opacity: 1; }

/* Squelettes de chargement : un ecran structure vaut mieux qu'un ecran vide. */
@keyframes skeleton-pulse { 0%,100% { opacity: .55 } 50% { opacity: .9 } }
.skeleton { background: linear-gradient(90deg, #ece7e0 25%, #f5f1ea 50%, #ece7e0 75%); background-size: 200% 100%; border-radius: 8px; animation: skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton-card { height: 92px; margin-bottom: 8px; }
.skeleton-kpi { height: 88px; }

/* Entree des cartes, decalee, pour que la liste se pose au lieu d'apparaitre. */
@keyframes card-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.kanban .card { animation: card-in .26s cubic-bezier(.2,.8,.3,1) backwards; }

/* Retour tactile au clic — le detail qui fait "application". */
.card:active { transform: scale(.985); }
.card { transition: transform .12s ease, box-shadow .18s ease; }
.action-btn, .btn { transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.action-btn:active, .btn:active { transform: scale(.97); }

/* Transitions de vue natives : le tableau se recompose en fondu. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* Respect du reglage systeme : personne ne subit les animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   GARDE-FOUS MOBILE — ajoutés le 10/09/2026
   Symptôme corrigé : sur iPhone, le bandeau noir du header
   n'occupait qu'une partie de la largeur et le contenu semblait
   décalé.
   Cause : .admin-header est en position:sticky. Un sticky se
   dimensionne sur le VIEWPORT, pas sur la page. Dès qu'un seul
   élément déborde horizontalement, la page devient plus large
   que l'écran et le header reste, lui, à la largeur d'origine —
   d'où le bandeau tronqué.
   Plutôt que de traquer l'élément fautif un par un, ces règles
   empêchent tout débordement de se produire.
   ============================================================ */
@media (max-width: 768px) {

  /* overflow-x: clip coupe le débordement SANS créer de conteneur
     de défilement — contrairement à "hidden", qui casserait
     position:sticky sur le header. */
  html { overflow-x: clip; }
  html, body { max-width: 100%; }
  .admin-header { width: 100%; box-sizing: border-box; }
  .admin-main { max-width: 100%; box-sizing: border-box; }

  /* Par défaut, un enfant de flex/grid refuse de descendre sous la
     largeur de son contenu (min-width:auto). C'est la cause n°1 des
     débordements sur mobile. */
  .admin-main *,
  .card, .card *,
  [class*="grid"] > *,
  [class*="row"] > * { min-width: 0; }

  /* Les grilles passent en une colonne sous 400px de large utile */
  .analytics-grid { grid-template-columns: 1fr; }

  /* Tout média reste dans son cadre */
  img, svg, canvas, video, iframe { max-width: 100%; height: auto; }

  /* Un tableau sans conteneur scrollable devient scrollable lui-même */
  table:not(.finance-table) { display: block; width: 100%; overflow-x: auto; }

  /* Textes longs : on coupe plutôt que de pousser la page */
  pre, code, .mono { white-space: pre-wrap; word-break: break-word; }
  a[href^="mailto"], a[href^="http"] { word-break: break-word; }

  /* Zones tactiles : 44px est le minimum confortable au pouce.
     LE COMMENTAIRE DISAIT 44, LA VALEUR DISAIT 40 — 26/09/2026.
     Ce bloc ne s applique qu au telephone, c est-a-dire exactement la ou la
     regle compte, et c est lui qui gagnait : la regle de base a beau viser
     44 px, celle-ci la ramenait a 40 des qu on passait sous le point de
     rupture. Mesure sur la liste des options du catalogue a 390 px :
     boutons a 48 x 40. Quatre pixels, c est peu a lire et beaucoup au pouce. */
  button, .btn, select, input[type="search"] { min-height: 44px; }
}


/* ===== Balayage Places ===== */
.scan {
  border: 1px solid var(--dw-trait);
  border-radius: var(--dw-r-m);
  background: var(--dw-surface);
  padding: var(--dw-4);
  display: grid;
  gap: var(--dw-3);
}
.scan__ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--dw-3); }
.scan__champ { display: grid; gap: 6px; }
.scan__champ > span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--dw-encre-3);
}
.scan__champ select {
  width: 100%; padding: 8px; font-size: 13px; font-family: var(--dw-sans);
  border: 1px solid var(--dw-trait-fort); border-radius: var(--dw-r-s);
  background: var(--dw-surface); color: var(--dw-encre);
}
.scan__simu { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dw-encre-2); min-height: 44px; }
/* Le cout s'affiche avant le clic, pas apres : c'est la seule facon qu'il
   serve a decider. */
.scan__cout { font-size: 12.5px; color: var(--dw-encre-3); }
.scan__bilan { font-size: 13.5px; color: var(--dw-encre); margin: 0 0 6px; }
.scan__rapport[hidden] { display: none; }
@media (max-width: 640px) { .scan__ligne { grid-template-columns: 1fr; } }

/* ===== Panneau prospection ===== */
.prosp-lecture {
  margin: 0 0 16px; padding: 10px 13px;
  background: rgba(212,175,55,0.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.5; color: #4A423B;
}
.prosp-lecture--prudence { background: rgba(180,120,40,0.09); border-left-color: #B4782A; }
.prosp-h3 {
  font-family: Georgia, serif; font-size: 15px; margin: 26px 0 10px; color: #1B1714;
}
.prosp-note { font-size: 12.5px; color: #6B6259; margin: -4px 0 10px; line-height: 1.5; }
/* Les tableaux debordent sur telephone : on les fait defiler eux, pas la page. */
.prosp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prosp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prosp-table th {
  text-align: left; padding: 8px 10px; white-space: nowrap;
  border-bottom: 2px solid var(--gold);
  font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.04em; color: #6B6259;
}
.prosp-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.prosp-table tr:last-child td { border-bottom: 0; }
.prosp-table a { color: var(--gold); text-decoration: none; }
.prosp-table a:hover { text-decoration: underline; }
.prosp-vide { color: #6B6259; font-style: italic; padding: 14px 10px; }
/* LE THEME DE LA PAGE N EST PAS CELUI DU SYSTEME.
   L admin garde son choix dans localStorage et le pose en data-theme="light"
   sur <html>. Ce bloc, lui, ne regardait que le reglage macOS : un Mac en
   sombre + un admin en clair = un texte #E8E3DC sur un fond creme, soit un
   contraste de 1,2:1. Le texte etait bien la, il fallait le selectionner a la
   souris pour le lire. Meme piege que sur la section voiture le 06/10.
   La garde :not([data-theme="light"]) rend la regle au theme de la PAGE. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prosp-lecture { color: var(--dw-nuit-texte, #E8E3DC); }
  :root:not([data-theme="light"]) .prosp-h3 { color: var(--dw-nuit-texte, #E8E3DC); }
}
:root[data-theme="dark"] .prosp-lecture { color: var(--dw-nuit-texte, #E8E3DC); }
:root[data-theme="dark"] .prosp-h3 { color: var(--dw-nuit-texte, #E8E3DC); }


/* ══════════════════════════════════════════════════════════════════════
   SQUELETTE DE PAGE — un seul gabarit pour tous les modules.

   CE QUI N ALLAIT PAS, mesure au navigateur :
   a 1440 px, la zone principale commencait a x=280 (apres la barre laterale)
   et finissait a x=1796 : 356 px de contenu HORS DE L ECRAN, et la page
   defilait lateralement. A 1024 px — l iPad en paysage — le depassement
   montait a 772 px. Cause : .admin-main portait  max-width: 1600px  sans que
   la largeur de la barre laterale (280 px) n en soit jamais deduite.

   Et comme aucun module n avait de largeur propre, chacun prenait celle de
   son contenu : a 1440 px, coupons faisait 398 px et pipeline 1460 px, avec
   un bord gauche qui sautait de 308 a 661 px. D ou l impression que  la
   taille des sections change  a chaque changement de module — elle changeait
   vraiment, de 398 a 1460 px.

   Ici : la zone principale ne depasse plus jamais l espace disponible, et
   tous les modules partagent la meme largeur et les memes gouttieres.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --module-max: 1180px;      /* largeur de lecture confortable sur grand ecran */
  --module-gouttiere: 28px;
}
@media (max-width: 900px) {
  :root { --module-gouttiere: 14px; }
}

/* Un enfant de flex refuse par defaut de descendre sous sa largeur de
   contenu : sans min-width:0 il pousse le conteneur et deborde. */
.admin-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding-inline: var(--module-gouttiere);
  box-sizing: border-box;
}

/* Meme gabarit pour les huit modules : meme largeur, meme centrage.
   Ajouter un module, c est ajouter son selecteur ici — et rien d autre. */
.pipeline-view,
.calendar-view,
.argent-view,
.acomptes-view,
.compta-view,
.fiches-view,
.galerie-view,
.coupons-view,
.templates-view {
  width: 100%;
  max-width: var(--module-max);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Seule exception, et elle est voulue : le kanban est un tableau de bord a
   colonnes. Il defile chez lui, horizontalement, au lieu de faire defiler
   la page entiere. */
.pipeline-view { max-width: none; }
#kanban { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pas de regle sur les tableaux ici : la feuille en contient deja deux qui
   font le travail — .finance-table-wrap et .prosp-table-wrap sont en
   overflow-x:auto, et un tableau sans conteneur scrollable le devient
   lui-meme. En rajouter une troisieme forcerait display:block sur des
   tableaux deja bien places et casserait leur mise en colonnes. */


/* Acompte annoncé par le couple, pas encore constaté sur le compte.
   Le clignotement n'est pas décoratif : c'est le seul signal qui dit
   « quelque chose t'attend ici », puisque aucun webhook bancaire n'existe
   pour le dire à la place du couple. */
.dossier-stat--declare {
  border-left: 3px solid #2E7D32;
  background: rgba(46, 125, 50, 0.07);
}
.dossier-stat--declare .dossier-stat__label::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #2E7D32;
  animation: pastille-respire 1.6s ease-in-out infinite;
}
@keyframes pastille-respire {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.55); }
  50%      { opacity: 0.45; box-shadow: 0 0 0 5px rgba(46, 125, 50, 0); }
}
/* Un clignotement permanent est pénible, voire risqué, pour qui y est
   sensible : le système d'exploitation le dit, on l'écoute. */
@media (prefers-reduced-motion: reduce) {
  .dossier-stat--declare .dossier-stat__label::before { animation: none; }
}

/* Lien d'evitement. Le markup est present sur ces pages depuis le chantier
   RGAA, mais sa regle vit dans css/style.css — que les pages admin ne
   chargent pas. Sans style, c'est un lien ordinaire : il s'affichait donc en
   permanence en haut a gauche, au-dessus de l'en-tete. Il doit rester dans le
   DOM (RGAA 12.7) et sortir de l'ecran jusqu'au focus clavier. */
.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--gold); color: #0F0E0D;
  padding: 10px 16px; border-radius: 0 0 8px 0;
  font-weight: 600; font-size: 13px; text-decoration: none;
}
.lien-evitement:focus { left: 0; }

/* ══════════════════════════════════════════════════════════════════════
   BARRE D ONGLETS DE L ESPACE PRO — une seule definition.
   14/09/2026. La liste des destinations vivait deja en un seul endroit
   (js/admin-nav.js) depuis le 13 ; son APPARENCE, elle, etait recopiee
   a l identique dans les six pages satellites. Six copies, donc six
   occasions de diverger — et la premiere qui corrige le contraste ne
   corrige que sa page.

   CE QUI N ALLAIT PAS, mesure au navigateur :
   la pilule au repos etait rgba(212,175,55,0.08) sur un en-tete #0F0E0D,
   soit #1F1B10 : un contraste de 1,12:1 avec l en-tete. Le TEXTE etait
   lisible (6,22:1), mais la pilule elle-meme etait invisible — on voyait
   des mots flottants, pas des boutons. C est exactement ce que la charte
   de Helmi interdit : « bordures et contours de controle ≥ 3:1 AU REPOS »
   et « un controle ne doit JAMAIS etre identifiable seulement au survol ».

   Un aplat ne peut pas atteindre 3:1 sur un fond quasi noir sans devenir
   clair au point de jurer. C est donc la BORDURE qui porte la forme :
   rgba(212,175,55,0.55) donne 3,50:1 sur l en-tete. Mesure, pas estimation.
   ══════════════════════════════════════════════════════════════════════ */
.admin-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.admin-tab {
  display: inline-flex; align-items: center; gap: 6px;
  /* 44 px : cible tactile (voir la note du bloc mobile). */
  padding: 8px 16px; min-height: 44px;
  border-radius: 9px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  background: rgba(212, 175, 55, 0.10);
  color: #E0DACE;                                  /* 11,93:1 sur la pilule */
  border: 1px solid rgba(212, 175, 55, 0.55);      /* 3,50:1 sur l en-tete  */
  transition: background 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 180ms ease;
}
.admin-tab:hover {
  background: rgba(212, 175, 55, 0.24);
  color: #F5F1EA;
  border-color: rgba(212, 175, 55, 0.85);
  transform: translateY(-1px);
}
.admin-tab:active { transform: scale(0.98); }
.admin-tab:focus-visible {
  outline: 2px solid #D4AF37; outline-offset: 2px;
}
.admin-tab.active {
  background: #D4AF37;
  color: #0F0E0D;                                  /* 9,17:1 */
  border-color: #D4AF37;
  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.4);
}
@media (max-width: 768px) {
  .admin-tabs {
    order: 3; width: 100%; justify-content: flex-start;
    overflow-x: auto; padding: 4px 2px 2px; gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tab { padding: 8px 13px; font-size: 12.5px; flex-shrink: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   L EN-TETE DE L ESPACE PRO — un seul, defini ICI, et nulle part ailleurs
   ══════════════════════════════════════════════════════════════════════
   POURQUOI CE BLOC EXISTE — 14/09/2026.
   Helmi : « menu differents d un onglet a l autre et charte graphique
   egalement differente ». Ce n etait pas une impression. Compte fait
   dans le depot ce jour-la :

     3 squelettes d en-tete pour 7 pages
       admin                        .admin-shell + barre laterale
       admin-blog, -newsletter      .admin-header
       admin-catalogue, -stock,
       -liens, -import              .topbar

     8 definitions CSS de cet en-tete, dont SIX collees en <style> dans
     le HTML des pages. Six copies = six occasions de diverger, et c est
     exactement ce qui etait arrive :
       - admin-blog et admin-newsletter n avaient AUCUN bouton de
         deconnexion (verifie : grep -c 'logout()' -> 0) ;
       - les quatre pages en .topbar n avaient ni logo ni lien vers le
         site public ;
       - le titre de page etait dans l en-tete sur cinq pages, dans le
         contenu sur deux autres.

   La liste des destinations, elle, etait deja propre — un seul endroit,
   js/admin-nav.js. Ce n est donc jamais la LISTE qu il fallait reparer,
   c est le CHASSIS autour. Depuis aujourd hui le chassis est ici, il est
   genere par admin-nav.js, et les six blocs <style> ont ete supprimes.

   REGLE : si tu te surprends a ecrire .topbar ou .admin-header dans une
   page, arrete — c est la divergence qui recommence.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Mesures faites au navigateur sur le fond #0F0E0D de l en-tete :
     #F5F1EA -> 17,2:1   #B8B0A2 -> 9,0:1   #D4AF37 -> 9,2:1          */
  --ep-fond:     #0F0E0D;
  --ep-encre:    #F5F1EA;
  --ep-encre-2:  #B8B0A2;
  --ep-or:       #D4AF37;
  --ep-contour:  rgba(212, 175, 55, 0.55);  /* 3,50:1 au REPOS sur l en-tete */
  --ep-h:        58px;
}

.admin-entete {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 14px;
  box-sizing: border-box; width: 100%;
  min-height: var(--ep-h);
  padding: 8px 18px;
  background: var(--ep-fond);
  border-bottom: 2px solid var(--ep-or);
  color: var(--ep-encre);
}

/* Le logo. Le fichier historique est un carre de 300x300 dont la marque
   n occupe que la bande centrale : affichee a 40 px de haut, l ecriture
   faisait 9 px. logo-dj-drim-bandeau.png est le meme logo recadre sur sa
   boite englobante reelle (466x112, rapport 4,16:1) — a 26 px de haut il
   se lit enfin. */
.admin-entete__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.admin-entete__logo img { display: block; height: 26px; width: auto; }
.admin-entete__logo:focus-visible { outline: 2px solid var(--ep-or); outline-offset: 3px; border-radius: 4px; }

/* Le titre de la page : au MEME endroit sur les sept ecrans. */
.admin-entete__titre {
  margin: 0;
  font-family: var(--dw-serif, Georgia, serif);
  font-size: 17px; font-weight: 600; line-height: 1.2;
  color: var(--ep-encre);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
.admin-entete__separateur { color: var(--ep-encre-2); opacity: .5; flex: none; }

.admin-entete__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

/* Meme regle de visibilite au repos que .admin-tab : c est la BORDURE qui
   porte la forme. Un aplat n atteint pas 3:1 sur un fond quasi noir sans
   devenir clair au point de jurer. */
.admin-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none;
  min-height: 36px; padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--ep-contour);
  background: rgba(212, 175, 55, 0.10);
  color: var(--ep-encre);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.admin-action:hover { background: rgba(212, 175, 55, 0.24); border-color: rgba(212, 175, 55, 0.85); transform: translateY(-1px); }
.admin-action:active { transform: scale(0.98); }
.admin-action:focus-visible { outline: 2px solid var(--ep-or); outline-offset: 2px; }
.admin-action--icone { width: 36px; padding: 0; }
.admin-action svg { width: 15px; height: 15px; flex: none; }

/* Le bouton qui ouvre le panneau de commande. */
.admin-cmd {
  display: inline-flex; align-items: center; gap: 9px;
  flex: none;
  min-height: 36px; padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--ep-contour);
  background: rgba(212, 175, 55, 0.10);
  color: var(--ep-encre);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease;
}
.admin-cmd:hover { background: rgba(212, 175, 55, 0.24); border-color: rgba(212, 175, 55, 0.85); }
.admin-cmd:focus-visible { outline: 2px solid var(--ep-or); outline-offset: 2px; }
.admin-cmd kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(245, 241, 234, 0.14);
  color: var(--ep-encre-2);
}

@media (max-width: 900px) {
  .admin-entete__titre { font-size: 15px; }
  .admin-cmd__mot { display: none; }
  .admin-cmd kbd { display: none; }
  .admin-cmd { padding: 0 10px; }
}
@media (max-width: 768px) {
  .admin-entete { padding: 8px 14px; gap: 10px; }
  .admin-entete__logo img { height: 22px; }
  /* Sur telephone la barre basse porte la navigation : garder EN PLUS la
     rangee d onglets qui defile, ce serait deux fois la meme chose. */
  .admin-entete .admin-tabs { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA BARRE BASSE — telephone uniquement
   ══════════════════════════════════════════════════════════════════════
   Standard transverse de Helmi §6 bis : « nav basse persistante mobile,
   cibles >= 44 px ». Avant aujourd hui, sur telephone, le tableau de bord
   ouvrait un tiroir et les six autres pages faisaient defiler une rangee
   d onglets : deux gestes differents pour la meme chose.
   Quatre destinations + Menu, identiques sur les sept ecrans.
   ══════════════════════════════════════════════════════════════════════ */
.admin-barre-basse { display: none; }

@media (max-width: 768px) {
  .admin-barre-basse {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
    display: flex;
    background: var(--ep-fond);
    border-top: 1px solid rgba(212, 175, 55, 0.40);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .admin-barre-basse a {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 7px 2px 8px;
    /* 10 px sous les icones de la barre basse : c est la taille d une
       mention legale, sur l element le plus utilise du tableau de bord,
       au pouce et souvent dehors. On remonte au plancher lisible et on
       resserre l ecart plutot que le texte. */
    font-size: 11.5px; font-weight: 600; letter-spacing: 0;
    color: var(--ep-encre-2);            /* 9,0:1 sur l en-tete */
    text-decoration: none;
    border-top: 2px solid transparent;
  }
  .admin-barre-basse a svg { width: 19px; height: 19px; }
  .admin-barre-basse a[aria-current="page"] {
    color: var(--ep-or);                 /* 9,2:1 */
    border-top-color: var(--ep-or);      /* l etat ne se dit pas QUE par la couleur */
  }
  .admin-barre-basse a:focus-visible { outline: 2px solid var(--ep-or); outline-offset: -3px; }
  /* Sans cette reserve, le dernier element de chaque page passe sous la barre.
     La barre, elle, ajoute deja env(safe-area-inset-bottom) a son propre
     rembourrage : sur un iPhone a encoche elle mesure 89 px et non 55, et
     cette reserve figee a 62 px laissait 27 px de contenu inatteignable —
     mesure : le bouton « Nouvelle offre » du catalogue et un champ de texte
     de la newsletter etaient recouverts. La reserve suit donc la barre. */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════════════════════════════════
   LE PANNEAU DE COMMANDE — les 19 entrees, groupees, au clavier
   ══════════════════════════════════════════════════════════════════════
   Il remplace la barre laterale du tableau de bord ET le tiroir mobile :
   un seul objet de navigation, un seul comportement, de 360 a 1920 px.
   Il est le SEUL endroit qui dise la nature d une entree — « page » ou
   « vue du tableau de bord » — ce qu aucune barre d onglets ne peut faire.
   ══════════════════════════════════════════════════════════════════════ */
.cmdk { position: fixed; inset: 0; z-index: 9000; display: none; }
.cmdk[data-ouvert="1"] { display: block; }
.cmdk__voile {
  position: absolute; inset: 0;
  background: rgba(8, 6, 4, 0.72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cmdk__boite {
  position: relative;
  width: min(580px, calc(100vw - 28px));
  margin: max(8vh, 40px) auto 0;
  border-radius: 14px; overflow: hidden;
  background: #211C18;
  border: 1px solid rgba(212, 175, 55, 0.34);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: cmdk-entree 180ms cubic-bezier(.2,.7,.2,1);
}
@keyframes cmdk-entree { from { opacity: 0; transform: translateY(-8px); } }
.cmdk__champ {
  width: 100%; box-sizing: border-box;
  padding: 15px 18px;
  border: 0; border-bottom: 1px solid #322A24;
  background: transparent;
  font-family: inherit; font-size: 15px;
  color: #EFE9DE;                        /* 14,1:1 sur #211C18 */
}
.cmdk__champ::placeholder { color: #A79C8C; }   /* 6,3:1 */
.cmdk__champ:focus { outline: none; }
.cmdk__liste {
  max-height: min(56vh, 430px); overflow-y: auto; padding: 7px;
  /* Vingt entrees dans une fenetre qui en montre huit, et rien ne le disait :
     Helmi a cru deux fois que des onglets avaient disparu. Le degrade dit
     qu il reste quelque chose sous le pli. Il s efface quand on est au bout
     — data-fin, pose par majDefilement() dans admin-nav.js.
     Ce n est pas un fond teinte pour dire un etat (DESIGN.md interdit n5) :
     c est de la lumiere, le principe meme de la charte. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
  /* Le degrade mange les 34 derniers pixels. Sans cette marge, la fleche bas
     amene l entree surlignee PILE dedans : scrollIntoView({block:'nearest'})
     s arrete au bord visible, qui est justement l endroit ou le texte
     s efface. On lisait « Blog » a moitie efface alors qu il etait
     selectionne. Meme valeur des deux cotes, et une garde le verifie. */
  scroll-padding-block-end: 34px;
}
.cmdk__liste[data-fin] { -webkit-mask-image: none; mask-image: none; }

/* Sur telephone la fenetre monte plus haut : huit entrees visibles sur un
   ecran de 6 pouces, c etait la moitie du menu. */
@media (max-width: 768px) {
  .cmdk__boite { margin-top: max(5vh, 24px); }
  .cmdk__liste { max-height: 68vh; }
}
.cmdk__groupe {
  padding: 11px 10px 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #A79C8C;
}
.cmdk__entree {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  /* 44 px : cible tactile (voir la note du bloc mobile). */
  padding: 9px 10px; min-height: 44px;
  border: 0; border-radius: 9px;
  background: transparent;
  font-family: inherit; font-size: 13.5px; text-align: left;
  color: #EFE9DE; text-decoration: none; cursor: pointer;
}
.cmdk__entree svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.cmdk__entree[aria-selected="true"] {
  background: var(--ep-or);
  color: #0F0E0D;                        /* 9,2:1 */
}
.cmdk__entree[aria-selected="true"] svg { opacity: 1; }
.cmdk__nature { margin-left: auto; font-size: 10.5px; color: #A79C8C; white-space: nowrap; }
.cmdk__entree[aria-selected="true"] .cmdk__nature { color: rgba(15, 14, 13, 0.72); }
.cmdk__badge {
  margin-left: auto; padding: 1px 7px; border-radius: 10px;
  background: #A8630A; color: #FFFFFF;
  font-size: 10px; font-weight: 700;
}
.cmdk__vide { padding: 26px 18px; text-align: center; color: #A79C8C; font-size: 13px; }
.cmdk__pied {
  display: flex; gap: 14px; align-items: center;
  padding: 9px 16px; border-top: 1px solid #443A31;
  font-size: 11px; color: #A79C8C;
}
.cmdk__pied kbd {
  font-family: inherit; font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(239, 233, 222, 0.12); color: #EFE9DE;
}
@media (max-width: 768px) {
  .cmdk__boite { margin-top: 20px; }
  .cmdk__pied { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cmdk__boite { animation: none; }
}

/* ─── Apres le retrait de la barre laterale (14/09/2026) ─────────────────
   .admin-shell etait un flex a deux colonnes et .admin-content reservait
   280 px a gauche. Il n y a plus qu une colonne : sans ces deux lignes, le
   contenu reste decale de la largeur d une barre qui n existe plus. */
.admin-shell { display: block !important; }
.admin-content { margin-left: 0 !important; }

/* Le compteur de fiches orphelines n est plus affiche ici — il est devenu
   une pastille sur l entree du panneau. loadFichesBadge() lui pose encore
   un display:inline-block en ligne : sans ce !important, il reapparaitrait
   en haut de page sous forme de chiffre orphelin. */
#sidebar-fiches-badge { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   REPRISES DE CASCADE — a lire avant de toucher au bandeau
   ══════════════════════════════════════════════════════════════════════
   Le bandeau est une surface SOMBRE posee dans une feuille ecrite pour un
   fond clair. Deux regles elementaires en !important le traversaient :

     h1, h2, h3, h4 { color: var(--dw-encre) !important }
       -> le titre du bandeau, devenu un <h1>, sortait en #171310 sur
          #0F0E0D : 1,1:1. Illisible, et rien ne le signalait.
     input[type="text"] { background: var(--dw-surface) !important }
       -> le champ du panneau ⌘K sortait blanc au milieu d une boite
          sombre.

   C est le piege ecrit noir sur blanc dans site/DESIGN.md : « une surface
   repeinte sans son jeton de texte donne du noir sur noir ». Les deux
   reprises ci-dessous sont donc volontaires et doivent rester.
   ══════════════════════════════════════════════════════════════════════ */
.admin-entete .admin-entete__titre {
  color: var(--ep-encre) !important;         /* 17,2:1 sur #0F0E0D */
  font-family: var(--dw-serif, Georgia, serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
.cmdk .cmdk__champ {
  background: transparent !important;
  color: #EFE9DE !important;                 /* 14,1:1 sur #211C18 */
  border: 0 !important;
  border-bottom: 1px solid #322A24 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  padding: 15px 18px !important;
}
.cmdk .cmdk__champ:focus {
  box-shadow: none !important;
  border-bottom-color: var(--ep-or) !important;   /* le focus reste visible */
}
.cmdk ::placeholder { color: #A79C8C !important; }  /* 6,3:1 */

/* ─── Les onglets DANS le bandeau ────────────────────────────────────────
   Le gabarit general de .admin-tab (40 px de haut, 16 px de cotes) a ete
   dessine pour une barre seule sur sa ligne. Dans le bandeau ils partagent
   la largeur avec le logo, le titre et quatre commandes : a 1280 px les
   sept onglets passaient a la ligne et l en-tete faisait 100 px de haut.
   Ici ils sont resserres, et ils DEFILENT au lieu de se replier — un
   en-tete qui change de hauteur selon la page, c est la divergence qui
   revient par la fenetre. */
.admin-entete .admin-tabs {
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto;
  gap: 5px; padding: 2px 0;
  scrollbar-width: none;
}
.admin-entete .admin-tabs::-webkit-scrollbar { display: none; }
/* 34 px SUR UN BANDEAU QU ON FAIT DEFILER AU POUCE — corrige le 26/09/2026.
   Ce bloc n est pas dans un @media : il vaut aussi sur telephone, ou ce
   bandeau se parcourt et se tape avec le doigt. Meme regle que partout
   ailleurs, 44 px. Le bandeau gagne dix pixels de haut ; c est le prix. */
.admin-entete .admin-tab {
  flex: none;
  padding: 0 12px; min-height: 44px;
  font-size: 12.5px;
}

/* Sur telephone, « Voir le site public » et « Deconnexion » quittent le
   bandeau : ils sont dans le panneau (groupe Outils), la ou ils etaient
   deja dans l ancienne barre laterale. Sans ca, quatre boutons ecrasaient
   le titre de page a « Pi… » sur un ecran de 390 px. */
@media (max-width: 768px) {
  .admin-entete__actions .admin-action--icone[href],
  .admin-entete__actions .admin-action--icone[data-nav-quitter],
  .admin-entete .admin-action--secondaire { display: none; }
  /* 0 1 auto et non 1 1 auto : le titre doit RETRECIR pour laisser passer
     les commandes, pas grandir et les pousser hors de l ecran. */
  .admin-entete__titre { flex: 0 1 auto; }
  .admin-entete__separateur { display: none; }
}

/* Filet de securite : meme si un appelant oublie width/height sur son <svg>,
   il ne peut plus s effondrer a zero dans le bandeau. */
.admin-cmd svg, .admin-entete .admin-tab svg { width: 15px; height: 15px; flex: none; }

/* ─── Glisser-déposer dans la pipeline ─────────────────────────────────
   Ni fond teinté ni filet coloré sur le bord : la colonne visée se signale
   par un liseré en pointillés, qui est la convention d'une zone de dépôt et
   ne veut rien dire d'autre. */
.carte-fantome {
  position: fixed !important;
  z-index: 2000;
  pointer-events: none;
  margin: 0 !important;
  transform: scale(1.03);
  box-shadow: 0 18px 40px rgba(23,19,16,.28) !important;
}
.carte-en-vol { opacity: .3; }
.col--cible {
  outline: 2px dashed var(--dw-or);
  outline-offset: -3px;
  border-radius: var(--dw-r-m, 10px);
}
/* Une carte n'est pas du texte a selectionner, c'est une cible. Laisser la
   selection possible faisait demarrer le glisser-deposer natif du navigateur
   au glissement suivant, qui tuait le notre par un pointercancel muet. */
.kanban .card, .kanban .col__header { user-select: none; -webkit-user-select: none; }
body.glissement { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.glissement .card { cursor: grabbing; }
/* scroll-snap bloquerait le défilement automatique vers la colonne voisine */
body.glissement #kanban { scroll-snap-type: none !important; }


/* ── Registre des signatures, dans la fiche ───────────────────────────
   Pas de fond teinte pour dire un etat (DESIGN.md, interdit n°5) : l etat
   se lit dans le texte, et un filet lumineux a gauche le hierarchise sans
   repeindre la surface. Ce filet n est PAS le liseré de carte banni :
   il ne borde pas une carte arrondie, il souligne une ligne de journal. */
.sig-ligne { padding: .6rem 0; }
.sig-ligne + .sig-ligne { border-top: 1px solid var(--dw-filet, rgba(16,23,43,.12)); }
.sig-ligne__etat { font-size: .88rem; line-height: 1.45; margin-bottom: .45rem; }
.sig-ligne--ok .sig-ligne__etat { font-weight: 700; }
.sig-ligne--attente .sig-ligne__etat { color: var(--dw-orange, #B34700); font-weight: 600; }
.sig-ligne--essai .sig-ligne__etat { color: var(--dw-muted, #55618A); }

/* ── Modale simple ────────────────────────────────────────────────────
   En classes, pas en styles en ligne : c'est la dette qui bloque le
   thème sombre du dashboard (DESIGN.md). Cibles ≥ 44 px, encoche
   respectée, et la boîte ne dépasse jamais la hauteur utile réelle
   (dvh, pas vh : sur iOS, 100vh passe sous la barre d'adresse). */
.modale-simple{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(7, 12, 28, .62);
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow: auto;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modale-simple__boite{
  background: var(--dw-surface, #FFFFFF); color: var(--dw-text, #10172B);
  border-radius: 16px; width: 100%; max-width: 560px; padding: 20px;
  max-height: calc(100dvh - 36px); overflow: auto;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);
}
.modale-simple__titre{
  font-family: Georgia, serif; font-size: 19px; margin: 0 0 14px; line-height: 1.25;
}
.champ-bloc { margin-bottom: 16px; }
.champ-bloc label{
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dw-muted, #55618A);
  font-weight: 700; margin-bottom: 6px;
}
.champ-bloc input, .champ-bloc textarea{
  width: 100%; padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--dw-bordure, #C3CADF); border-radius: 9px;
  font: inherit; font-size: 15px; background: var(--dw-surface, #FFFFFF);
  color: var(--dw-text, #10172B);
}
.champ-bloc input:focus-visible, .champ-bloc textarea:focus-visible{
  outline: 2px solid var(--dw-or, #8A6200); outline-offset: 1px;
}
.champ-bloc small{
  display: block; margin-top: 6px; font-size: 12.5px;
  color: var(--dw-muted, #55618A); line-height: 1.5;
}
.modale-simple__pied{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.modale-simple__pied button{
  min-height: 44px; padding: 0 18px; border-radius: 10px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.btn-secondaire{ background: transparent; color: var(--dw-text, #10172B); border: 2px solid var(--dw-bordure, #8791AD); }
.btn-principal{ background: var(--dw-or, #8A6200); color: #FFFFFF; border: 0; }
.btn-principal[disabled]{ opacity: .6; cursor: progress; }
.mini-note{ font-size: 12.5px; color: var(--dw-muted, #55618A); margin-top: 8px; line-height: 1.5; }

/* ── Cibles tactiles de l'en-tête, mesurées ───────────────────────────
   Relevé au rendu à 390 px : boutons d'action 36×36, bouton Menu 37×36,
   logo 92×22, Filtres 69×38, onglets Pipeline/Chiffres 71×40. Tous sous
   le seuil de 44 px, sur la barre que Helmi touche vingt fois par jour.
   On agrandit la zone, pas la typographie. */
.admin-entete button,
.admin-entete a,
.admin-action--icone,
.admin-cmd,
.vue-onglet,
#toolbar-toggle { min-height: 44px; }
.admin-action--icone, .admin-cmd { min-width: 44px; }
.admin-entete__logo { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Matériel du camion (/admin-catalogue) ────────────────────────────
   Les champs existaient déjà dans les fenêtres « modifier », mais les
   remplir demandait d'ouvrir vingt-quatre fenêtres l'une après l'autre —
   donc de ne jamais le faire, donc de laisser la feuille de route de
   l'assistant inutilisable. Tout tient ici sur une page.
   Pas de fond teinté pour dire un état (DESIGN.md, interdit n°5) :
   l'état se lit dans l'étiquette, et un filet en bas marque ce qui a
   changé sans repeindre la surface. */
.materiel-intro{
  color: var(--dw-muted, #55618A); font-size: 13.5px; line-height: 1.65;
  margin: 0 0 16px; max-width: 78ch;
}
.mat-compteur{
  display: inline-block; font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: #3B476E; color: #FFFFFF; border-radius: 7px;
  padding: .25rem .6rem; margin-bottom: 14px;
}
.mat-groupe{
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dw-muted, #55618A); font-weight: 800;
  margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--dw-filet, rgba(16,23,43,.12));
}
.mat{
  background: var(--dw-surface, #FFFFFF); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,23,43,.07), 0 8px 20px -16px rgba(16,23,43,.35);
}
.mat--modifie::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #B34700; box-shadow: 0 0 12px 1px rgba(179,71,0,.45);
}
.mat__tete{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .7rem; margin-bottom: 8px;
}
.mat__nom{ font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.mat__etat{
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dw-muted, #55618A); white-space: nowrap;
}
.mat--modifie .mat__etat{ color: #B34700; }
.mat__champ{
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--dw-bordure, #C3CADF); border-radius: 9px;
  font: inherit; font-size: 14.5px; line-height: 1.6;
  background: var(--dw-surface, #FFFFFF); color: var(--dw-text, #10172B);
  resize: vertical;
}
.mat__champ:focus-visible{ outline: 2px solid var(--dw-or, #8A6200); outline-offset: 1px; }
.mat__champ::placeholder{ color: #97A0BC; }

/* ══════════════════════════════════════════════════════════════════════
   LE ZOOM QUI NE REDESCEND JAMAIS — 16/09/2026
   ══════════════════════════════════════════════════════════════════════
   Helmi : « a chaque fois que j enregistre une donnee, l ecran zoome, je
   dois pincer pour le remettre en taille telephone. »

   Ce n est pas un bug du site : Safari iOS zoome AUTOMATIQUEMENT des qu on
   met le doigt dans un champ dont le texte fait moins de 16 px — et il ne
   redescend jamais tout seul. Huit regles de l admin etaient sous ce seuil,
   dont le champ de recherche du menu (15 px) et les champs du formulaire de
   depense (15 px). D ou : « quand je change de menu », « quand je valide ».

   CE QU IL NE FAUT SURTOUT PAS FAIRE : ajouter maximum-scale=1 ou
   user-scalable=no au viewport. Ca interdit le zoom a TOUT LE MONDE, y
   compris a qui en a besoin pour lire — le standard transverse de Helmi
   impose RGAA 4.1.2 — et Safari l ignore de toute facon depuis iOS 10.

   La vraie correction : ne jamais descendre sous 16 px sur un ecran
   tactile. `pointer: coarse` vise le doigt, pas la largeur : le bureau
   garde sa densite a 13 px, le telephone et la tablette passent a 16.
   Les cases a cocher et les curseurs n ont pas de texte : exclus.
   ══════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Safari grossit le texte tout seul au passage en paysage. On garde la
   taille qu on a choisie. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   LA NAVIGATION UNIQUE — 08/10/2026 (tableau de bord v2)
   Une seule liste, generee par js/admin-nav.js : barre a gauche des
   1024 px, tiroir ouvert par « Menu » en dessous. Elle remplace les sept
   onglets du bandeau et les six sous-onglets du tableau de bord.
   Couleurs du bandeau (--ep-*), mesurees sur #0F0E0D : encre 17,2:1,
   encre-2 9,0:1, or 9,2:1.
   ══════════════════════════════════════════════════════════════════════ */
.admin-lat {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 150;
  width: 248px; padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  background: var(--ep-fond); color: var(--ep-encre);
  box-shadow: inset -1px 0 0 rgba(212, 175, 55, 0.35);
}
.lat__logo { display: block; padding: 6px 10px 14px; }
.lat__logo img { display: block; height: 28px; width: auto; }
.lat__logo:focus-visible { outline: 2px solid var(--ep-or); outline-offset: 2px; border-radius: 6px; }
.lat__nav { display: flex; flex-direction: column; gap: 2px; flex: 1 0 auto; }
.lat__g {
  margin: 14px 10px 4px; font-family: var(--dw-sans); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ep-encre-2);
}
.lat__e {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ep-encre-2);
  font-family: var(--dw-sans); font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.lat__e svg { width: 17px; height: 17px; flex: none; }
.lat__e span:first-of-type { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lat__e:hover { background: rgba(245, 241, 234, 0.08); color: var(--ep-encre); }
.lat__e:focus-visible { outline: 2px solid var(--ep-or); outline-offset: -2px; }
.lat__e[aria-current="page"] { background: rgba(245, 241, 234, 0.10); color: var(--ep-or); }
.lat__badge { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 7px; background: #FF5C6E; color: #2A0309; font-size: 12px; font-weight: 800; text-align: center; }
.lat__pied { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 10px; box-shadow: inset 0 1px 0 rgba(245, 241, 234, 0.12); }
.admin-lat-voile { display: none; }

/* Ordinateur : la barre est la, le contenu se decale, le bandeau perd ce
   qu elle porte deja (logo, onglets). */
@media (min-width: 1024px) {
  body.a-lat { padding-left: 248px; }
  body.a-lat .admin-entete .admin-tabs,
  body.a-lat .admin-entete__logo,
  body.a-lat .admin-entete__separateur,
  body.a-lat .admin-entete__burger { display: none; }
}
/* En dessous : tiroir. Le bandeau garde son logo et gagne le bouton Menu. */
@media (max-width: 1023px) {
  .admin-lat {
    width: min(300px, 86vw); transform: translateX(-102%);
    transition: transform 220ms var(--dw-ease, ease);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }
  body.a-lat--ouverte .admin-lat { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.45); }
  body.a-lat--ouverte .admin-lat-voile {
    display: block; position: fixed; inset: 0; z-index: 140;
    background: rgba(15, 14, 13, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  body.a-lat .admin-entete .admin-tabs { display: none; }
}
.admin-entete__burger { display: none; }
@media (max-width: 1023px) {
  body.a-lat .admin-entete__burger { display: inline-flex; min-height: 44px; min-width: 44px; }
  /* Deux boutons « menu » cote a cote mangeaient le titre : sous 1024 px,
     le tiroir donne deja acces a tout. La recherche ⌘K reste au clavier. */
  body.a-lat .admin-cmd { display: none; }
}
/* Les sous-onglets du tableau de bord : la barre les remplace. Le balisage
   reste (choisirVue s en sert pour afficher le bon panneau). */
body.a-lat .vue-onglets { display: none; }
@media (prefers-reduced-motion: reduce) {
  .admin-lat, .lat__e { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LES FENETRES — 08/10/2026
   Helmi : « les pop aussi doivent etre retravaillees, les fenetres etc ».
   Une seule famille, la meme sur les sept pages :
     - .dlg       : informer / confirmer / demander (js/admin-dialogues.js),
                    qui remplacent ~110 alert/confirm/prompt du navigateur ;
     - .dlg-voile : le formulaire showFormModal() (depenses, statut, acompte…) ;
     - .modal     : la grande fenetre de la fiche dossier.
   Titre a la typo de la marque, texte a 15 px, champs a 16 px (pas de zoom
   force sur iPhone), boutons de 48 px. Sur telephone, la fenetre monte du
   bas, a portee de pouce. Le rouge ne sert qu a l irreversible.
   ══════════════════════════════════════════════════════════════════════ */
/* `margin: auto` est ce qui centre un <dialog> : la remise a zero
   `* { margin: 0 }` des pages l annulait et la fenetre collait en haut a
   gauche. */
.dlg {
  margin: auto;
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
  border-radius: var(--dw-r-l); background: transparent; color: var(--dw-encre); overflow: visible;
}
.dlg::backdrop { background: rgba(23, 19, 16, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg-voile {
  position: fixed; inset: 0; z-index: 9999; 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);
  animation: dlg-voile .18s ease both;
}
.dlg__boite {
  position: relative; width: 100%; max-height: calc(100vh - 32px); overflow: auto;
  padding: 22px 22px 18px; background: var(--dw-surface); border-radius: var(--dw-r-l); box-shadow: var(--dw-ombre-3);
  font-family: var(--dw-sans); animation: dlg-entre .22s cubic-bezier(.2, .8, .3, 1) both;
}
.dlg-voile .dlg__boite { width: min(480px, 100%); }
.dlg--danger .dlg__boite::before, .dlg--erreur .dlg__boite::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--dw-alerte-vif);
}
/* !important : la regle globale `h1, h2, h3, h4 { font-family … !important }`
   du socle imposerait l Inter a 19 px. Le titre d une fenetre est le meme
   que celui de la fiche (.modal__title) : la typo de la marque. */
.dlg__t { margin: 0 0 8px; font-family: var(--dw-serif) !important; font-size: 24px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.2 !important; color: var(--dw-encre); text-wrap: balance; }
.dlg__t--seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dlg__texte { font-size: 15px; line-height: 1.55; color: var(--dw-encre-2); }
.dlg__texte p { margin: 0 0 10px; }
.dlg__texte p:last-child { margin-bottom: 0; }
.dlg__form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.dlg__f { display: flex; flex-direction: column; gap: 6px; }
.dlg__label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dw-encre-2); }
.dlg__f .dlg__label { margin: 0; }
.dlg__champ {
  width: 100%; min-height: 48px; 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.45;
}
textarea.dlg__champ { min-height: 110px; resize: vertical; }
.dlg__champ:focus { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; border-color: var(--dw-encre-2); }
.dlg__aide { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dw-encre-2); }
.dlg__raccourcis-l { display: flex; flex-wrap: wrap; gap: 6px; }
.dlg__raccourci {
  min-height: 44px; max-width: 100%; padding: 6px 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: 13px; text-align: left; cursor: pointer;
}
.dlg__raccourci span { color: var(--dw-encre-2); }
.dlg__raccourci:hover { background: var(--dw-surface-3); }
.dlg__a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dlg__b {
  min-height: 48px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--dw-encre-3);
  background: var(--dw-surface); color: var(--dw-encre); font-family: var(--dw-sans); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.dlg__b:hover { background: var(--dw-surface-3); }
.dlg__b:active { transform: scale(.98); }
.dlg__b:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 2px; }
.dlg__b--principal { background: var(--dw-encre); border-color: var(--dw-encre); color: #FFFFFF; }
.dlg__b--principal:hover { background: var(--dw-encre-2); }
.dlg__b--danger { background: var(--dw-alerte-vif); border-color: var(--dw-alerte-vif); color: #FFFFFF; }
.dlg__b--danger:hover { background: var(--dw-alerte); }
@keyframes dlg-voile { from { opacity: 0; } }
@keyframes dlg-entre { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* La grande fenetre de la fiche : meme titre, fermeture a 44 px. */
.modal__title { font-family: var(--dw-serif) !important; font-size: 23px !important; font-weight: 600 !important; color: var(--dw-encre) !important; letter-spacing: 0 !important; }
.modal__close {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border-radius: 10px; font-size: 26px !important; line-height: 1;
  color: var(--dw-encre-2) !important; opacity: 1 !important;
}
.modal__close:hover { background: var(--dw-surface-3); color: var(--dw-encre) !important; }
.modal__close:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; }

@media (max-width: 640px) {
  .dlg { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; }
  .dlg__boite { border-radius: 20px 20px 0 0; max-height: 92vh; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .dlg-voile { align-items: flex-end; padding: 0; }
  .dlg-voile .dlg__boite { width: 100%; }
  .dlg__a { flex-direction: column-reverse; }
  .dlg__b { width: 100%; }
  @keyframes dlg-entre { from { transform: translateY(40px); } }
  .modal-bg.open { align-items: flex-end !important; padding: 0 !important; }
  .modal { max-height: 94vh !important; border-radius: 20px 20px 0 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dlg__boite, .dlg-voile { animation: none; }
}