[hidden] {
  display: none !important;
}

/* ============================================================
   Websco Démarches — Back-office
   style.css — Feuille de style partagée
   ============================================================ */

/* ── Variables & palette ─────────────────────────────────── */
:root {
  /* ── Jetons v2 · 9 août 2026 ─────────────────────────────────
     Seul bloc modifié en profondeur. Le reste du fichier reçoit
     ces valeurs par les variables qu'il citait déjà.
     Rampe neutre, un seul accent, quatre états.               */

  --couleur-primaire:      #2E5288;   /* lien, sélection, focus — rien d'autre */
  --couleur-primaire-clair:#EDF1F8;

  /* barre latérale : claire. Le texte est corrigé plus bas,
     il était écrit en dur pour un fond sombre.                */
  --couleur-sidebar:       #FFFFFF;
  --couleur-sidebar-hover: #ECEEF1;
  --couleur-sidebar-actif: #E8EDF5;

  --gris-100: #F5F6F8;
  --gris-200: #E0E3E8;
  --gris-400: #9BA1AC;
  --gris-600: #545C69;
  --gris-800: #272C34;

  --blanc: #FFFFFF;
  --texte-principal: #16191F;
  --texte-secondaire: #545C69;

  /* Badges : quatre états, chacun au-dessus de 6:1 sur son fond.
     Les six compteurs de Dossiers les reçoivent aussi.        */
  --badge-recu-bg:       #EDF1F8;  --badge-recu-texte:       #2E5288;
  --badge-incomplet-bg:  #FDF3E0;  --badge-incomplet-texte:  #8A5300;
  --badge-encours-bg:    #ECEEF1;  --badge-encours-texte:    #545C69;
  --badge-valide-bg:     #E6F4EE;  --badge-valide-texte:     #0A6C4A;
  --badge-refuse-bg:     #FDECEA;  --badge-refuse-texte:     #B3261E;
  --badge-rdv-bg:        #ECEEF1;  --badge-rdv-texte:        #545C69;

  /* Rayons : moins arrondis. Cité 132 fois dans le fichier.   */
  --rayon:       6px;
  --rayon-sm:    4px;
  --rayon-lg:    10px;
  --rayon-xl:    12px;

  /* Ombres : supprimées. Un trait suffit à séparer.           */
  --ombre:       none;
  --ombre-md:    0 8px 24px -8px rgba(22,25,31,.16);
}

/* ── Reset minimal ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--texte-principal);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  padding: 12px 0 12px 12px;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Mise en page principale ─────────────────────────────── */
.layout {
  display: flex;
  width: 100%;
  min-height: 100%;
  gap: 0;
  align-items: flex-start;
}

/* ── Barre latérale ──────────────────────────────────────── */
.sidebar {
  width: 256px;
  min-width: 256px;
  background: var(--couleur-sidebar);
  display: flex;
  flex-direction: column;
  padding: 12px;
  position: sticky;
  top: 0;
  height: calc(100vh - 24px);
  overflow-y: auto;
  gap: 4px;
  border-radius: var(--rayon-xl);
  border: 1px solid var(--gris-200);
  box-shadow: none;
}

.sidebar__logo {
  padding: 16px 12px 16px;
  border-bottom: 1px solid var(--gris-200);
  margin-bottom: 4px;
}

.sidebar__logo-titre {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texte-secondaire);
}

.sidebar__logo-soustitre {
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte-principal);
  margin-top: 2px;
}

.sidebar__nav {
  flex: 1;
  padding: 4px 0;
}

/* ── LE MENU DES DÉMARCHES, AU BOUT DE LA LIGNE DE RETOUR (lot 79b) ───────
   Recette de Philippe : déroulé sous le titre, il décalait tout le menu, et
   un contenu qui bouge sous le doigt est désagréable. La liste FLOTTE donc
   par-dessus, au motif des menus « ⋯ » du produit : rien ne bouge derrière.
   Le titre de section, lui, redevient ce qu'il était. */
.sidebar__retour-rangee {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.sidebar__retour-rangee .sidebar__retour {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar__mondes-bouton {
  /* MÊME HAUTEUR QUE LE LIEN VOISIN : la boîte se règle sur la ligne, pas sur
     un carré arbitraire — deux hauteurs différentes côte à côte se voient. */
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--rayon);
  color: var(--texte-secondaire, #475569);
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.sidebar__mondes-bouton:hover,
.sidebar__mondes-bouton[aria-expanded="true"] {
  background: var(--couleur-primaire-clair, #EDF1F8);
  color: var(--couleur-primaire, #2E5288);
}

/* L'ICÔNE TOURNE SUR SON CENTRE, dans sa propre boîte : la rotation d'un
   caractère de texte le décalait vers le haut, faute de boîte à tourner. */
.sidebar__mondes-chevron {
  width: 16px;
  height: 16px;
  display: block;
  transform-origin: 50% 50%;
  transition: transform .15s;
}

.sidebar__mondes-bouton[aria-expanded="true"] .sidebar__mondes-chevron {
  transform: rotate(180deg);
}

/* PAR-DESSUS, JAMAIS À LA PLACE : positionnement absolu dans la rangée, avec
   l'ombre et le cadre des menus flottants de la maison. */
.sidebar__mondes-popover {
  position: absolute;
  z-index: 2000;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--blanc, #fff);
  border: 1px solid var(--gris-200, #E0E3E8);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md, 0 8px 24px rgba(15, 23, 42, .12));
}

.sidebar__mondes-popover[hidden] { display: none !important; }

.sidebar__monde-lien {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: var(--rayon);
  font-size: .92rem;
  color: var(--texte-secondaire, #475569);
  text-decoration: none;
}

.sidebar__monde-lien:hover {
  background: var(--gris-100, #F1F3F7);
  color: var(--texte-principal, #0f172a);
}

.sidebar__monde-lien.est-courant {
  color: var(--texte-principal, #0f172a);
  font-weight: 600;
}

/* La coche garde sa colonne même vide : les libellés ne dansent pas. */
.sidebar__monde-coche {
  display: inline-block;
  width: 12px;
  flex: 0 0 12px;
  color: var(--couleur-primaire, #2E5288);
}

.sidebar__section-titre {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gris-400);
  padding: 12px 12px 4px;
}

.sidebar__lien {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--texte-principal);
  transition: background .15s, color .15s;
  border-radius: var(--rayon);
  cursor: pointer;
}

.sidebar__lien:hover {
  background: var(--couleur-sidebar-hover);
  color: var(--texte-principal);
}

.sidebar__lien.actif {
  background: var(--couleur-sidebar-actif);
  color: var(--couleur-primaire);
  font-weight: 600;
  box-shadow: none;
}

.sidebar__lien svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 1;
}

.sidebar__lien.actif svg,
.sidebar__lien:hover svg { opacity: 1; }

/* ── LE SÉPARATEUR DU PIED (15/08/2026) ────────────────────────────────────
   Il sépare les OUTILS DE TRAVAIL — bibliothèque, exports — de
   L'ADMINISTRATION — comptes, paramètres. Deux natures, deux fréquences.

   IL REPREND LE TRAIT DU PIED, jamais un plus marqué : c'est une respiration
   dans une liste, pas une frontière. Un trait plus fort ferait lire deux
   menus là où il n'y en a qu'un. */
.sidebar__separateur {
  height: 1px;
  margin: 8px 12px;
  background: var(--gris-200);
}

.sidebar__pied {
  padding: 12px;
  border-top: 1px solid var(--gris-200);
  font-size: .75rem;
  color: var(--gris-400);
  margin-top: 4px;

  /* ── LA MARQUE ET L'ICÔNE SUR UNE LIGNE (lot 16a, 16/08/2026) ──────────
     L'une à gauche, l'autre à droite : le pied garde sa discrétion, et
     l'information légale reste atteignable. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   L'INFORMATION LÉGALE DE L'ADMINISTRATION (lot 16a, 16/08/2026)

   Côté familles, les deux liens sont en clair : c'est une obligation, et la
   famille arrive sur un domaine qu'elle ne connaît pas.

   Côté administration, la secrétaire les consulte une fois par an. Les poser
   en clair alourdirait un pied déjà chargé pour un usage rare.

   UNE INFORMATION RARE SE RANGE, ELLE NE SE SUPPRIME PAS.

   ── « details », PAS UNE INFOBULLE ────────────────────────────────────────

   L'infobulle du produit ne s'ouvre pas au doigt — acceptable pour une phrase
   qui rassure, pas pour deux LIENS qu'on doit pouvoir atteindre. Un « details »
   s'ouvre au clic partout, et le survol l'ouvre en plus sur un écran qui en a
   un.
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar__legal {
  position: relative;
  flex-shrink: 0;
}

.sidebar__legal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rayon-sm);
  color: var(--gris-400);
  cursor: pointer;
  list-style: none;
  transition: color .15s, background .15s;
}

/* LA FLÈCHE NATIVE DE « summary » DISPARAÎT : elle doublerait l'icône. */
.sidebar__legal-btn::-webkit-details-marker { display: none; }

.sidebar__legal-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar__legal-btn:hover,
.sidebar__legal[open] .sidebar__legal-btn {
  color: var(--texte-principal);
  background: var(--gris-100);
}

/* ── LE MENU S'OUVRE VERS LE HAUT ────────────────────────────────────────
   Le pied est en bas de la barre : un menu qui descendrait sortirait de
   l'écran. */
.sidebar__legal-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
  z-index: 40;
}

.sidebar__legal-menu a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--rayon-sm);
  color: var(--texte-principal);
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar__legal-menu a:hover {
  background: var(--gris-100);
}

/* ── LE SURVOL OUVRE AUSSI, LÀ OÙ IL EXISTE ──────────────────────────────
   Sur un écran tactile, « hover » est simulé au premier toucher : le menu
   s'ouvrirait sous le doigt au moment du clic. On réserve donc le survol aux
   pointeurs fins, et le clic reste le chemin universel. */
@media (hover: hover) and (pointer: fine) {
  .sidebar__legal:hover .sidebar__legal-menu {
    display: block;
  }

  .sidebar__legal:not([open]) .sidebar__legal-menu {
    display: none;
  }

  .sidebar__legal:hover:not([open]) .sidebar__legal-menu {
    display: block;
  }
}

/* ── Zone de contenu principale ──────────────────────────── */
.contenu {
  flex: 1;
  padding: 32px 36px;
  overflow-y: auto;
}

.contenu__entete {
  margin-bottom: 28px;
}

.contenu__titre {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--texte-principal);
}

.contenu__sous-titre {
  font-size: .875rem;
  color: var(--texte-secondaire);
  margin-top: 4px;
}

/* ── Cartes ──────────────────────────────────────────────── */
.carte {
  background: var(--blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 24px;
  border: 1px solid var(--gris-200);
}

.carte__titre {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 12px;
}

/* Carte compteur (pour le dashboard) */
.carte-compteur {
  background: var(--blanc);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 22px 24px;
  border: 1px solid var(--gris-200);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .2s, transform .2s;
}

.carte-compteur:hover {
  box-shadow: var(--ombre-md);
  transform: translateY(-2px);
}

/* Grille de compteurs */
.grille-compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

/* ── Tableaux ─────────────────────────────────────────────── */
.tableau-wrapper {
  overflow-x: auto;
  border-radius: var(--rayon-lg);
  border: 1px solid var(--gris-200);
  box-shadow: var(--ombre);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  font-size: .875rem;
}

thead {
  background: var(--gris-100);
  border-bottom: 1px solid var(--gris-200);
}

thead th {
  padding: 10px 16px;
  text-align: left;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--gris-200);
  transition: background .1s;
}

tbody tr:last-child { border-bottom: none; }

tbody tr:hover { background: var(--couleur-primaire-clair); cursor: pointer; }

tbody td {
  padding: 12px 16px;
  color: var(--texte-principal);
  vertical-align: middle;
}

/* ── Badges de statut ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  gap: 5px;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge--recu          { background: var(--badge-recu-bg);      color: var(--badge-recu-texte); }
.badge--incomplet     { background: var(--badge-incomplet-bg);  color: var(--badge-incomplet-texte); }
.badge--encours,
.badge--complet      { background: var(--badge-encours-bg);    color: var(--badge-encours-texte); }
.badge--valide        { background: var(--badge-valide-bg);     color: var(--badge-valide-texte); }
.badge--refuse        { background: var(--badge-refuse-bg);     color: var(--badge-refuse-texte); }
.badge--rdv           { background: var(--badge-rdv-bg);        color: var(--badge-rdv-texte); }
.badge--ouverte      { background: var(--badge-valide-bg);     color: var(--badge-valide-texte); }
.badge--archive      { background: var(--gris-200);            color: var(--gris-700); }
.badge--programmee   { background: var(--badge-incomplet-bg);  color: var(--badge-incomplet-texte); }
.badge--terminee     { background: var(--gris-200);            color: var(--gris-700); }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--rayon);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity .15s, background .15s, box-shadow .15s, transform .1s;
}

.btn:active { transform: scale(.97); }

.btn:hover { opacity: .88; }

.btn--primaire {
  box-shadow: 0 2px 8px rgba(29,78,216,.25);
}

.btn--primaire:hover {
  box-shadow: 0 4px 14px rgba(29,78,216,.35);
  opacity: 1;
}

.btn--secondaire {
  background: var(--blanc);
  color: var(--texte-principal);
  border: 1px solid var(--gris-200);
}

/* ── Champs de formulaire (filtres) ──────────────────────── */
.champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.champ label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--texte-principal);
  text-transform: none;
  letter-spacing: normal;
}

.champ input,
.champ select,
.champ textarea {
  padding: 9px 14px;
  border: 1.5px solid var(--gris-200);
  border-radius: var(--rayon);
  font-size: .875rem;
  color: var(--texte-principal);
  background: var(--blanc);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

/* ── Utilitaires ─────────────────────────────────────────── */
.flex          { display: flex; }
.items-center  { align-items: center; }
.gap-2         { gap: 8px; }
.gap-3         { gap: 12px; }
.gap-4         { gap: 16px; }
.mb-4          { margin-bottom: 16px; }
.mb-6          { margin-bottom: 24px; }
.mt-4          { margin-top: 16px; }
.texte-secondaire { color: var(--texte-secondaire); font-size: .875rem; }
.texte-petit   { font-size: .8rem; }
.gras          { font-weight: 600; }



/* ============================================================
   Dashboard V4 — multi-campagnes
   ============================================================ */

.sidebar__bloc + .sidebar__bloc {
  margin-top: 14px;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.btn--lien {
  background: transparent;
  color: var(--couleur-primaire);
  border: 1px solid #BFDBFE;
}

.btn--lien:hover {
  background: var(--couleur-primaire-clair);
}

.dashboard-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 24px;
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 20px;
}

.pastille-campagne {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  border: 1px solid #BFDBFE;
  font-size: .82rem;
  font-weight: 600;
}

.pastille-campagne::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.resume-campagnes {
  color: var(--blanc);
  border-radius: var(--rayon-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.grille-kpi {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.kpi {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 20px;
}

.section-dashboard {
  margin-top: 24px;
}

.section-dashboard__titre {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 12px;
}

.grille-2col-dashboard {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
}

.liste-priorites {
  display: flex;
  flex-direction: column;
}

.liste-recents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
}

.recent__nom {
  font-size: 1rem;
  font-weight: 600;
}

.recent__meta {
  font-size: .79rem;
  color: var(--texte-secondaire);
  margin-top: 3px;
}

.campagne-card {
  box-shadow: var(--ombre);
}

.campagne-card__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.campagne-card__titre {
  font-size: .95rem;
  font-weight: 700;
}

.campagne-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.campagne-card__stat {
  background: var(--gris-100);
  border-radius: var(--rayon-sm);
  padding: 10px 12px;
}

.campagne-card__stat strong {
  display: block;
  font-size: 1rem;
}

.campagne-card__stat span {
  display: block;
  font-size: .74rem;
  color: var(--texte-secondaire);
  margin-top: 2px;
}

.campagne-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-200);
}

.lien-secondaire {
  font-size: .8rem;
  color: var(--couleur-primaire);
  font-weight: 600;
}

@media (max-width: 1200px) {
  .dashboard-hero,
  .grille-2col-dashboard {
    grid-template-columns: 1fr;
  }

  .grille-kpi,
  .campagnes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .grille-kpi,
  .campagnes-grid {
    grid-template-columns: 1fr;
  }

  .resume-campagnes__item,
  .recent,
  .priorite {
    align-items: flex-start;
  }
}


/* ── Dashboard V5 : version plus directe ───────────────── */
.dashboard-topline {
  /* background: var(--blanc); */
  /* border: 1px solid var(--gris-200); */
  /* border-radius: var(--rayon-lg); */
  /* box-shadow: var(--ombre); */
  padding: 0px 24px 20px;
  margin-top: 0;
}

.grille-kpi--compact {
  margin-top: 18px;
}

.grille-kpi--compact .kpi {
  padding: 18px 20px;
}

.grille-kpi--compact .kpi__meta {
  display: none;
}

.liste-actions-jour {
  display: flex;
  flex-direction: column;
}

.action-jour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-200);
}

.action-jour:first-child {
  padding-top: 0;
}

.action-jour:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.action-jour__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.action-jour__count {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  border: 1px solid #BFDBFE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .86rem;
  font-weight: 700;
  flex-shrink: 0;
}

.action-jour__label {
  font-size: 1.05rem;
  font-weight: 600;
}

.action-jour__link {
  color: var(--couleur-primaire);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.grille-dashboard-simple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.liste-recents--compacte {
  gap: 10px;
}

.recent--simple {
  padding: 12px 14px;
}

.liste-campagnes-dashboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.campagne-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
}

.campagne-ligne__nom {
  font-size: .9rem;
  font-weight: 600;
}

.campagne-ligne__meta {
  font-size: .79rem;
  color: var(--texte-secondaire);
  margin-top: 3px;
}

@media (max-width: 1100px) {
  .dashboard-topline__head,
  .grille-dashboard-simple {
    grid-template-columns: 1fr;
  }

  .grille-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .grille-dashboard-simple,
  .grille-kpi {
    grid-template-columns: 1fr;
  }

  .action-jour,
  .campagne-ligne,
  .recent--simple {
    align-items: flex-start;
    flex-direction: column;
  }
}


.dashboard-focus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.dashboard-focus .section-dashboard {
  margin-top: 0;
}

.dashboard-focus .grille-kpi--compact {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.btn--sm {
  min-width: 96px;
  justify-content: center;
}

.action-jour {
  text-decoration: none;
}

.action-jour__left {
  flex: 1;
}

.action-jour .btn {
  flex-shrink: 0;
}


.dashboard-focus {
  align-items: stretch;
}

.dashboard-focus .section-dashboard {
  display: flex;
  flex-direction: column;
}

.dashboard-focus .section-dashboard > .carte,
.dashboard-focus .section-dashboard > .grille-kpi {
  flex: 1;
}

.dashboard-focus .grille-kpi--compact {
  align-content: stretch;
  grid-auto-rows: 1fr;
}

.dashboard-focus .grille-kpi--compact .kpi {
  height: 100%;
}

@media (max-width: 1100px) {
  .dashboard-focus {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-focus .grille-kpi--compact {
    grid-template-columns: 1fr;
  }

  .action-jour .btn {
    width: 100%;
  }
}


.section-dashboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.timeline-admin {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 920px) {
  .section-dashboard__head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.page {
}

.resume-dossier-card {
  justify-content: flex-start;
  min-height: 76px;
  user-select: none;
}

/* Les cartes de résumé sont devenues des LIENS (lot 4a) : elles cadrent la
   requête au lieu de filtrer la page. Un lien porte un soulignement et une
   couleur d'ancre par défaut, qu'un bouton n'a pas — on les neutralise plutôt
   que de dupliquer toute la règle pour une seconde balise.
   NOTE pour le balayage : .resume-dossier-card:hover est déclarée DEUX FOIS
   dans cette feuille (l.1243 et l.1600). Duplication à traiter vendredi, pas
   ici — on ne retire pas du style qu'on n'a pas écrit dans un lot de
   correction. */
a.resume-dossier-card {
  text-decoration: none;
  color: inherit;
}

.filtres--primaire,
.filtres--archives {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) repeat(4, minmax(140px, 1fr)) auto;
  gap: 14px;
  align-items: end;
}

.filtres--archives {
  grid-template-columns: minmax(260px, 1.8fr) repeat(2, minmax(160px, 1fr)) auto;
}

.ligne-dossier td {
  transition: background .12s ease;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tabs > [role="tab"] {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

.tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 160px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  box-shadow: var(--ombre);
  color: var(--texte-secondaire);
  font-size: .9rem;
  font-weight: 600;
}

.tabs .tab.is-active {
  color: var(--couleur-primaire);
  border-color: #BFDBFE;
  background: var(--couleur-primaire-clair);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bandeau-info {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--rayon-lg);
  border: 1px solid #DBEAFE;
  background: #F8FBFF;
  color: var(--texte-secondaire);
  box-shadow: var(--ombre);
}

.bandeau-info svg {
  width: 20px;
  height: 20px;
  color: var(--couleur-primaire);
  flex-shrink: 0;
}

@media (max-width: 1200px) {

  .filtres--archives {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filtres--primaire .champ--large,
  .filtres--archives .champ--large {
    grid-column: 1 / -1;
  }
}


@media (max-width: 960px) {
  .dossiers-resume {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page__entete {
    flex-direction: column;
    align-items: flex-start;
  }

  .filtres--primaire,
  .filtres--archives {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .dossiers-resume,
  .filtres--primaire,
  .filtres--archives {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Dossiers v0.7 — campagnes actives uniquement
   ============================================================ */

.page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page__titre {
  line-height: 1.15;
}

.dossiers-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.resume-dossier-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 18px 20px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.resume-dossier-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--ombre-md);
  border-color: #BFD6FF;
  background: #F8FBFF;
}


.resume-dossier-card__inline {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 700;
  color: var(--texte-principal);
}

.resume-dossier-card__inline strong {
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: inherit;
}

.resume-dossier-card--info .resume-dossier-card__inline strong {
  color: var(--couleur-primaire);
}

.resume-dossier-card--warn .resume-dossier-card__inline strong {
  color: var(--badge-incomplet-texte);
}

.resume-dossier-card--follow .resume-dossier-card__inline strong {
  color: var(--badge-encours-texte);
}

.resume-dossier-card--reprise .resume-dossier-card__inline strong {
  color: var(--texte-secondaire);
}

.resume-dossier-card.is-active {
  border-color: #BFDBFE;
  background: var(--couleur-primaire-clair);
}

.resume-dossier-card:focus-visible {
  outline: 3px solid rgba(29, 78, 216, .18);
  outline-offset: 2px;
}

.carte--filtres {
  padding: 20px;
}

.section-dashboard__head--baseline {
  align-items: baseline;
}

.filtres__hint {
  font-size: .82rem;
  color: var(--texte-secondaire);
}

.filtres--primaire {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(160px, 1fr)) auto;
  gap: 14px;
  align-items: end;
}

.champ--large {
  min-width: 0;
}

.btn--reset-align {
  height: 42px;
  align-self: end;
}


.tableau-wrapper--dossiers {
  overflow-x: auto;
}

.tableau-wrapper--dossiers table {
  min-width: 1060px;
}

.cellule-principale {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cellule-ouverture {
  width: 40px;
  text-align: right;
  font-size: 1.2rem;
  color: var(--gris-400);
  font-weight: 700;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gris-100);
  color: var(--texte-secondaire);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

.tag--soft {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}

.tag--warn {
  background: #FFF7ED;
  color: var(--badge-incomplet-texte);
}

.tag-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid var(--gris-200);
  color: var(--texte-principal);
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}

.progress-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 112px;
}

.progress-inline__piste {
  width: 78px;
  height: 8px;
  border-radius: 999px;
  background: var(--gris-200);
  overflow: hidden;
}

.progress-inline__rempli {
  height: 100%;
  border-radius: inherit;
  background: #16A34A;
}

.progress-inline__rempli.incomplet {
  background: #EA580C;
}

.progress-inline__label {
  font-size: .78rem;
  color: var(--texte-secondaire);
  font-weight: 600;
}

.pagination {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pagination__meta {
  font-size: .9rem;
  color: var(--texte-secondaire);
}

.pagination__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.pagination__size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--texte-secondaire);
}

.pagination__size select {
  padding: 8px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte-principal);
  font: inherit;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.pagination__page {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
}

.pagination__page.is-active {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  border-color: #BFDBFE;
}

.is-hidden {
  display: none !important;
}

@media (max-width: 1200px) {
  .dossiers-resume {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filtres--primaire {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filtres--primaire .champ--large {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .contenu {
    padding: 24px 20px;
  }

  .page__entete,
  .liste-toolbar,
  .pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .filtres--primaire {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .dossiers-resume,
  .filtres--primaire {
    grid-template-columns: 1fr;
  }

  .page__titre {
    font-size: 1.5rem;
  }

  .resume-dossier-card {
    padding: 16px;
  }

  .tableau-wrapper--dossiers {
    border-radius: var(--rayon);
  }

  .pagination__actions,
  .pagination__pages,
  .pagination__nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


/* ── Actions groupées / édition rapide ─────────────────── */
.cellule-selection {
  width: 44px;
  text-align: center;
}

.cellule-selection input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--couleur-primaire);
  cursor: pointer;
}

.bulk-actions {
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  margin-bottom: 14px;
}

.bulk-actions__count {
  white-space: nowrap;
}

.bulk-actions__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-chip-trigger {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.status-chip-trigger .badge {
  transition: transform .12s ease, box-shadow .12s ease;
}

.status-chip-trigger:hover .badge {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

/* ── MÊME DÉFAUT, MÊME CORRECTION (lot 51a, 17/08/2026) ────────────────────
   Ce menu est placé par le même « placerMenuFlottant », en coordonnées de
   fenêtre. UN DÉFAUT SE FERME SUR TOUS SES CHEMINS. */
.status-menu {
  position: fixed;
  z-index: 40;
}

.status-menu__panel {
  min-width: 220px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
  padding: 8px;
}

.status-menu__item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--rayon-sm);
  font-size: .875rem;
  color: var(--texte-principal);
  cursor: pointer;
}

.status-menu__item:hover {
  background: var(--couleur-primaire-clair);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal-card {
  width: min(680px, 100%);
  background: var(--blanc);
  border-radius: var(--rayon-xl);
  box-shadow: var(--ombre-md);
  border: 1px solid var(--gris-200);
  overflow: hidden;
}

.modal-card__head,
.modal-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
}

.modal-card__head {
  border-bottom: 1px solid var(--gris-200);
}

.modal-card__foot {
  border-top: 1px solid var(--gris-200);
  justify-content: flex-end;
}

.modal-card__body {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.modal-card__title {
  font-size: 1.05rem;
  font-weight: 700;
}

.modal-card__text {
  font-size: .92rem;
  color: var(--texte-secondaire);
}

.modal-card__close {
  border: none;
  background: transparent;
  color: var(--texte-secondaire);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1200px) {
  .bulk-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .bulk-actions__controls {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .bulk-actions__controls {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .bulk-actions__field {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .bulk-actions__field select,
  .bulk-actions__controls .btn {
    width: 100%;
  }
}


/* --- Correctifs dossiers v2 --- */
.table-sort {
  cursor: pointer;
  user-select: none;
}

.table-sort.is-sorted {
  color: var(--texte-principal);
}

.table-sort[aria-sort="ascending"]::after {
  content: " ↑";
  color: var(--couleur-primaire);
  font-weight: 700;
}

.table-sort[aria-sort="descending"]::after {
  content: " ↓";
  color: var(--couleur-primaire);
  font-weight: 700;
}

.bulk-actions__count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--texte-principal);
}

.bulk-actions__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bulk-actions__markers {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tag--neutral {
  background: var(--gris-100);
  color: var(--texte-secondaire);
}

.toast-region {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-left: 4px solid var(--couleur-primaire);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
  pointer-events: auto;
}

.toast--success { border-left-color: #16A34A; }
.toast--info { border-left-color: var(--couleur-primaire); }
.toast--warning { border-left-color: #EA580C; }

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__text {
  font-size: .9rem;
  color: var(--texte-principal);
  line-height: 1.4;
}

.toast__action,
.toast__close {
  border: none;
  background: transparent;
  color: var(--couleur-primaire);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.toast__close {
  color: var(--texte-secondaire);
  font-size: 1.1rem;
  line-height: 1;
}

.toast--leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}



@media (max-width: 1280px) {

  .bulk-actions__markers {
    justify-content: flex-start;
  }
}


/* Dossiers v2.1 — ajustements barre d'actions groupées et préfiltres */
.resume-dossier-card[data-summary-card="all"].is-active {
  border-color: var(--gris-200);
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.bulk-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px 24px;
}

.bulk-actions__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.bulk-actions__link {
  border: none;
  background: transparent;
  color: var(--couleur-primaire);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.bulk-actions__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.bulk-actions__field {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texte-secondaire);
  font-size: .9rem;
  white-space: nowrap;
}

.bulk-actions__field select {
  min-width: 210px;
  padding: 9px 14px;
  border: 1.5px solid var(--gris-200);
  border-radius: var(--rayon);
  font-size: .875rem;
  color: var(--texte-principal);
  background: var(--blanc);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}

.bulk-actions__field select:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}



@media (max-width: 1280px) {
  .bulk-actions {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .bulk-actions__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .bulk-actions__actions {
    justify-content: flex-start;
  }

  .bulk-actions__field {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .bulk-actions__field select,
  .bulk-actions__actions .btn {
    width: 100%;
  }
}


.pagination__nav[hidden] {
  display: none !important;
}

/* ============================================================
   Fiche dossier — remise en forme v0.8
   ============================================================ */
.page--dossier {
  max-width: 1180px;
  margin: 0 auto;
}

.retour {
  font-size: .875rem;
  transition: color .15s;
}

/* ── LE LIEN NE S'ÉTIRE PLUS (lot 7l) ──────────────────────────────────────

   `.page` est un flex en COLONNE : un enfant `inline-flex` y est étiré à toute
   la largeur par `align-items: stretch`. Sa zone cliquable couvrait donc la
   ligne entière, jusqu'en haut à droite — Philippe l'a déclenchée en visant un
   toast.

   `align-self` le ramène à sa taille, quel que soit le parent.

   C'est le motif d'hier soir en miroir : UN ÉLÉMENT POSÉ DANS UN CONTENEUR
   FLEX OU GRID EN PREND LES RÈGLES. Troisième occurrence en deux jours.

   NOTE : `.retour` est déclaré DEUX FOIS dans cette feuille (l. 2399 et
   l. 9090). Doublon connu, à unifier au balayage — on ne le touche pas ici. */
.retour {
  align-self: flex-start;
}

.retour:hover { color: var(--couleur-primaire); }

.dossier-hero {
  position: sticky;
  top: 12px;
  z-index: 20;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-xl);
  box-shadow: var(--ombre);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.dossier-hero__main {
  min-width: 0;
}

.dossier-hero__kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--couleur-primaire);
  margin-bottom: 6px;
}

.dossier-hero__titleline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dossier-hero__titleline .page__titre {
  margin: 0;
  line-height: 1.1;
}

.dossier-hero__actions {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dossier-hero__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.champ--statut {
  min-width: 190px;
}

.champ--statut > span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.select-statut {
  min-height: 38px;
}

.dossier-resume {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.resume-mini {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 16px 18px;
  min-width: 0;
}

.resume-mini__label {
  display: block;
  color: var(--texte-secondaire);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.resume-mini strong {
  display: block;
  font-size: 1rem;
  color: var(--texte-principal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume-mini__meta {
  display: block;
  color: var(--texte-secondaire);
  font-size: .82rem;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.detail-grille--large {
  grid-column: 1 / -1;
}

.carte-detail {
  padding: 20px;
}

.section-titre {
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--texte-principal);
  margin-bottom: 16px;
}

.section-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-entete .section-titre {
  margin-bottom: 0;
}

.champ-lecture {
  display: grid;
  grid-template-columns: minmax(140px, .42fr) 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #EEF2F7;
  align-items: baseline;
}

.champ-lecture:last-child { border-bottom: 0; }

.champ-lecture label {
  color: var(--texte-secondaire);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.champ-lecture span {
  color: var(--texte-principal);
  font-size: .92rem;
  font-weight: 500;
  min-width: 0;
}

.liste-pieces {
  display: grid;
  gap: 10px;
}

.piece-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
}

.piece-item--alerte {
  background: #FFF7ED;
  border-color: #FED7AA;
}

.piece-nom {
  font-weight: 700;
  color: var(--texte-principal);
}

.piece-contrainte {
  color: var(--texte-secondaire);
  font-size: .82rem;
  margin-top: 2px;
}

.timeline {
  display: grid;
  gap: 18px;
}

.timeline__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  position: relative;
}

.timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: -18px;
  width: 2px;
  background: var(--gris-200);
}

.timeline__point {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.timeline__point--info {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}

.timeline__point--warn {
  background: var(--badge-incomplet-bg);
  color: var(--badge-incomplet-texte);
}

.timeline__meta,
.liste-simple__meta {
  color: var(--texte-secondaire);
  font-size: .84rem;
}

.liste-simple__titre {
  font-weight: 700;
  color: var(--texte-principal);
}

.commentaire-zone {
  margin-top: 14px;
}

.commentaire-zone textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  padding: 12px 14px;
  border: 1.5px solid var(--gris-200);
  border-radius: var(--rayon);
  font: inherit;
  color: var(--texte-principal);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.commentaire-zone textarea:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

.commentaire-zone .page__actions {
  margin-top: 14px;
}

.carte__sous-titre {
  color: var(--texte-secondaire);
  font-size: .9rem;
}

@media (max-width: 1100px) {
  .dossier-hero {
    flex-direction: column;
  }

  .dossier-hero__actions,
  .dossier-hero__buttons {
    justify-content: flex-start;
  }

  .dossier-resume {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .detail-grille {
    grid-template-columns: 1fr;
  }

  .dossier-resume {
    grid-template-columns: 1fr;
  }

  .champ-lecture {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* ============================================================
   Dossier detail V0.9 — suivi métier et documents attendus
   ============================================================ */

.resume-mini--warn {
  border-color: #FED7AA;
  background: #FFF7ED;
}

.dossier-a-traiter {
  margin-bottom: 18px;
}

.todo-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.todo-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
}

.todo-item strong {
  display: block;
  font-size: .92rem;
  color: var(--texte-principal);
  margin-bottom: 3px;
}

.todo-item span:not(.todo-item__dot) {
  display: block;
  color: var(--texte-secondaire);
  font-size: .82rem;
}

.todo-item__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
}

.section-entete--stackable {
  align-items: flex-start;
}

.liste-pieces--documents {
  gap: 12px;
}

.piece-item__content {
  min-width: 0;
}

.piece-item--verification {
  background: #F5F3FF;
  border-color: #DDD6FE;
}

.piece-item--ok {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.piece-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chip-document {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.chip-document--online {
  background: #DBEAFE;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.chip-document--check {
  background: #EDE9FE;
  color: #6D28D9;
  border-color: #DDD6FE;
}

.chip-document--missing {
  background: #FFEDD5;
  color: #C2410C;
  border-color: #FED7AA;
}

.chip-document--valid {
  background: #DCFCE7;
  border-color: #BBF7D0;
}

.piece-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 260px;
}

.btn--sm {
  padding: 6px 10px;
  font-size: .78rem;
  border-radius: var(--rayon-sm);
}

@media (max-width: 1180px) {
  .todo-list {
    grid-template-columns: 1fr;
  }

  .piece-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .piece-actions {
    min-width: 0;
    justify-content: flex-start;
  }
}


/* ============================================================
   Dossier detail V1.0 — sticky fiable et actions documents simplifiées
   ============================================================ */

.body--dossier-detail .contenu {
  overflow: visible;
}

.piece-actions--compact {
  min-width: 230px;
  flex-wrap: nowrap;
}

.btn-icon-document {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  color: var(--texte-secondaire);
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s, transform .1s;
}

.btn-icon-document:hover {
  color: var(--couleur-primaire);
  border-color: #BFDBFE;
  box-shadow: 0 0 0 3px rgba(29,78,216,.08);
}

.btn-icon-document:active {
  transform: scale(.97);
}

.select-document-action {
  min-width: 190px;
  height: 38px;
  padding: 0 36px 0 12px;
  border: 1.5px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  color: var(--texte-principal);
  font: inherit;
  font-size: .82rem;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.select-document-action:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

@media (max-width: 1180px) {
  .piece-actions--compact {
    width: 100%;
    min-width: 0;
  }

  .select-document-action {
    flex: 1;
    min-width: 0;
  }
}


/* ============================================================
   Dossier detail V1.1 — ajustements demandés
   ============================================================ */

body.body--dossier-detail {
  display: block;
  overflow-y: auto;
}

.body--dossier-detail .layout {
  min-height: calc(100vh - 24px);
}

.body--dossier-detail .contenu {
  overflow: visible !important;
}

.body--dossier-detail .page--dossier {
  overflow: visible;
}

.body--dossier-detail .dossier-hero {
  position: sticky !important;
  top: 12px;
  z-index: 100;
}

/* ============================================================
   Dossier detail V1.2 — pleine largeur
   ============================================================ */

.body--dossier-detail .page--dossier {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   Dossier detail V1.3 — bloc prioritaire normalisé
   ============================================================ */

.body--dossier-detail .dossier-a-traiter {
  border-color: var(--gris-200);
  background: var(--blanc);
  box-shadow: var(--ombre);
}

/* ============================================================
   Dossiers — Export depuis la vue et les actions groupées
   ============================================================ */
.page__entete--avec-actions {
  align-items: center;
}

.page__actions {
  align-items: center;
}

.export-menu {
  position: relative;
  display: inline-flex;
}

.export-menu__trigger {
  list-style: none;
  user-select: none;
}

.export-menu__trigger::-webkit-details-marker {
  display: none;
}

.export-menu__trigger svg {
  width: 16px;
  height: 16px;
}

.export-menu[open] .export-menu__trigger {
  border-color: #BFDBFE;
  box-shadow: 0 0 0 3px rgba(29,78,216,.08);
}

.export-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  padding: 8px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
}

.export-menu__panel--right {
  right: 0;
}

.export-menu__group-label {
  padding: 7px 10px 5px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.export-menu__panel button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--rayon-sm);
  background: transparent;
  color: var(--texte-principal);
  font: inherit;
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
}

.export-menu__panel button:hover {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}

.export-menu__separator {
  height: 1px;
  margin: 6px 4px;
  background: var(--gris-200);
}

@media (max-width: 900px) {
  .page__entete--avec-actions {
    align-items: flex-start;
  }

  .page__actions,
  .page__actions .export-menu,
  .page__actions .export-menu__trigger {
    width: 100%;
  }

  .export-menu__panel {
    left: 0;
    right: auto;
    width: min(280px, calc(100vw - 48px));
  }
}

/* ============================================================
   Dossiers — zone filtres + actions groupées sticky
   ============================================================ */
.body--dossiers .contenu {
  overflow: visible;
}

.body--dossiers .dossiers-sticky-zone {
  position: sticky;
  top: 12px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.body--dossiers .dossiers-sticky-zone .carte--filtres,
.body--dossiers .dossiers-sticky-zone .bulk-actions {
  margin-bottom: 0;
}

.body--dossiers .dossiers-sticky-zone .carte--filtres {
  box-shadow: var(--ombre-md);
}

.body--dossiers .dossiers-sticky-zone .bulk-actions {
  box-shadow: var(--ombre-md);
}

@media (max-width: 900px) {
  .body--dossiers .dossiers-sticky-zone {
    position: static;
  }
}


/* ============================================================
   Dossiers — correctif dropdown export au-dessus des filtres sticky
   ============================================================ */
.page__entete--avec-actions {
  position: relative;
  z-index: 160;
}

.export-menu {
  z-index: 170;
}

.export-menu__panel {
  z-index: 180;
}

/* ============================================================
   Campagnes — proposition v1
   ============================================================ */
.page--campagnes {
  max-width: none;
}

.page__entete--campagnes {
  align-items: flex-start;
}

.campagnes-focus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.campagnes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.campagnes-main,
.campagnes-side {
  display: grid;
  gap: 18px;
}

.carte--campagnes,
.carte--campagnes-side {
  padding: 22px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.section-sous-titre {
  margin-top: 4px;
  font-size: .86rem;
  color: var(--texte-secondaire);
}

.campagne-list {
  display: grid;
  gap: 14px;
}

.campagne-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #FFFFFF;
}

.campagne-card--open {
  border-color: #BBF7D0;
}

.campagne-card--preinscription {
  border-color: #BFDBFE;
}

.campagne-card--draft {
  background: #F8FAFC;
}

.campagne-card__topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.campagne-card__topline h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.campagne-card__meta {
  margin-top: 4px;
  font-size: .84rem;
  color: var(--texte-secondaire);
}

.campagne-card__setup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.campagne-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 132px;
  align-self: start;
  justify-content: flex-start;
}

.transfer-panel {
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
  padding: 18px;
}

.transfer-panel__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.transfer-node {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  padding: 14px;
}

.transfer-node__label {
  display: block;
  margin-bottom: 4px;
  color: var(--texte-secondaire);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.transfer-node strong {
  display: block;
  font-size: .95rem;
  color: var(--texte-principal);
}

.transfer-node small {
  display: block;
  margin-top: 4px;
  color: var(--texte-secondaire);
  font-size: .8rem;
}

.transfer-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--couleur-primaire);
  background: var(--couleur-primaire-clair);
  font-weight: 800;
}

.transfer-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.transfer-options article {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  padding: 14px;
}

.transfer-options h3 {
  font-size: .9rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.transfer-options ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  list-style: disc;
  color: var(--texte-secondaire);
  font-size: .84rem;
}

.transfer-panel__footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
}

.transfer-panel__note {
  font-size: .84rem;
  color: var(--texte-secondaire);
  max-width: 68ch;
}

.composition-list {
  display: grid;
  gap: 12px;
}

.composition-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #F8FAFC;
}

.composition-item__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  font-size: .82rem;
  font-weight: 800;
  flex: 0 0 28px;
}

.composition-item strong,
.mini-fieldset strong {
  display: block;
  color: var(--texte-principal);
  font-size: .9rem;
}

.composition-item p,
.mini-fieldset span {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: var(--texte-secondaire);
}

.mini-fieldset {
  padding: 12px 0;
  border-top: 1px solid var(--gris-200);
}

.mini-fieldset:first-of-type {
  margin-top: 12px;
}

.btn--full {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.side-actions-list {
  display: grid;
  gap: 8px;
}

.side-actions-list .btn {
  justify-content: center;
}

@media (max-width: 1180px) {
  .campagnes-grid {
    grid-template-columns: 1fr;
  }

  .campagnes-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .campagnes-focus,
  .campagnes-side,
  .transfer-options {
    grid-template-columns: 1fr;
  }

  .campagne-card {
    grid-template-columns: 1fr;
  }

  .campagne-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .transfer-panel__flow {
    grid-template-columns: 1fr;
  }

  .transfer-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .transfer-panel__footer {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ============================================================
   Campagnes — version simplifiée opérationnelle
   ============================================================ */
.campagne-list--standalone {
  margin-top: 16px;
}

.campagne-list--standalone .campagne-card {
  box-shadow: var(--ombre);
  padding: 22px;
  min-height: 150px;
}

.campagne-list--standalone .campagne-card__topline h2 {
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--texte-principal);
}

.campagne-list--standalone .campagne-card__actions {
  min-width: 120px;
}

.campagne-list--standalone .campagne-card__actions .btn {
  justify-content: center;
}

@media (max-width: 900px) {
  .campagne-list--standalone .campagne-card__actions {
    min-width: 0;
  }
}

/* ============================================================
   Campagnes V3 — actions contextuelles & création guidée
   ============================================================ */
.campagne-card__actions .btn--muted {
  color: var(--texte-secondaire);
  background: #F8FAFC;
}

.campaign-more {
  position: relative;
}

.campaign-more summary {
  list-style: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 7px 12px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--gris-200);
  background: var(--blanc);
  color: var(--texte-secondaire);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.campaign-more summary::-webkit-details-marker {
  display: none;
}

.campaign-more[open] summary,
.campaign-more summary:hover {
  color: var(--texte-principal);
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.campaign-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 220px;
  padding: 6px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre-md);
}

.campaign-more__menu button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--rayon-sm);
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: .82rem;
  color: var(--texte-principal);
  cursor: pointer;
}

.campaign-more__menu button:hover {
  background: var(--gris-100);
}

.campaign-more__menu button[disabled] {
  cursor: not-allowed;
  background: transparent;
}

.campaign-more__menu button[disabled]:hover {
  background: transparent;
}

.campaign-more__menu button.campaign-more__danger {
  color: #DC2626;
  font-weight: 600;
}
.campaign-more__menu button.campaign-more__danger:hover {
  background: #FEF2F2;
}

.tag--danger {
  background: #FEE2E2;
  color: #991B1B;
}

.archive-purge-count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #FEE2E2;
  color: #991B1B;
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}

.campaign-modal {
  width: min(820px, calc(100vw - 32px));
  border: 0;
  padding: 0;
  border-radius: var(--rayon-xl);
  background: transparent;
  color: var(--texte-principal);
}

.campaign-modal::backdrop {
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px);
}

.campaign-modal__card {
  position: relative;
  border-radius: var(--rayon-xl);
  background: var(--blanc);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  border: 1px solid var(--gris-200);
  padding: 24px;
}

.campaign-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--gris-200);
  background: #F8FAFC;
  color: var(--texte-secondaire);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.campaign-modal__close:hover {
  color: var(--texte-principal);
  background: var(--gris-100);
}

.campaign-modal__header {
  padding-right: 42px;
  margin-bottom: 18px;
}

.campaign-modal__eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--couleur-primaire);
}

.campaign-modal__header h2 {
  margin-top: 4px;
  font-size: 1.35rem;
  font-weight: 800;
}

.campaign-modal__header p,
.campaign-wizard__step p {
  margin-top: 6px;
  color: var(--texte-secondaire);
  font-size: .9rem;
}

.campaign-wizard {
  display: grid;
  gap: 14px;
}

.campaign-wizard__step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #FFFFFF;
}

.campaign-wizard__step--muted {
  background: #F8FAFC;
}

.campaign-wizard__number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  font-weight: 800;
  font-size: .86rem;
}

.campaign-wizard h3 {
  font-size: .98rem;
  font-weight: 800;
}

.campaign-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.campaign-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #F8FAFC;
  cursor: pointer;
}

.campaign-choice:has(input:checked) {
  border-color: #BFDBFE;
  background: var(--couleur-primaire-clair);
}

.campaign-choice input {
  margin-top: 3px;
}

.campaign-choice strong,
.campaign-choice small {
  display: block;
}

.campaign-choice small {
  margin-top: 4px;
  color: var(--texte-secondaire);
  line-height: 1.35;
}

.campaign-modal__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.campaign-modal__fields label {
  display: grid;
  gap: 5px;
}

.campaign-modal__fields span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--texte-secondaire);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.campaign-modal__fields input,
.campaign-modal__fields select {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  font: inherit;
  color: var(--texte-principal);
  background: var(--blanc);
}

.campaign-modal__field-wide {
  grid-column: 1 / -1;
}

.campaign-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-200);
}

@media (max-width: 720px) {
  .campaign-choice-grid,
  .campaign-modal__fields {
    grid-template-columns: 1fr;
  }

  .campaign-modal__footer {
    flex-direction: column-reverse;
  }

  .campaign-modal__footer .btn {
    justify-content: center;
  }
}


/* ============================================================
   Campagnes V4 — archives, modal centrée, wizard conditionnel
   ============================================================ */
.campaign-modal[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100vh - 32px);
  overflow: visible;
}

.campaign-modal__card {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.campaign-source-panel {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #FFFFFF;
}

.campaign-source-panel label {
  display: grid;
  gap: 5px;
}

.campaign-source-panel span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--texte-secondaire);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.campaign-source-panel select {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  font: inherit;
  color: var(--texte-principal);
  background: var(--blanc);
}

.campaign-source-panel p {
  margin-top: 8px;
  color: var(--texte-secondaire);
  font-size: .84rem;
}

.campaign-archives {
  margin-top: 18px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: var(--blanc);
  box-shadow: var(--ombre);
  overflow: visible;
}

.campaign-archives > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
}

.campaign-archives > summary::-webkit-details-marker {
  display: none;
}

.campaign-archives > summary span {
  font-size: .95rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.campaign-archives > summary small {
  color: var(--texte-secondaire);
  font-size: .82rem;
  text-align: right;
}

.campaign-archives[open] > summary {
  border-bottom: 1px solid var(--gris-200);
}

.campagne-list--archives {
  padding: 14px;
}

.campagne-card--archive {
  background: #F8FAFC;
  border-color: var(--gris-200);
}

.campagne-card--archive .campagne-card__topline h2,
.campagne-card--archive .campagne-card__meta {
  opacity: .86;
}

@media (max-width: 720px) {
  .campaign-modal[open] {
    width: min(100vw - 20px, 820px);
    max-height: calc(100vh - 20px);
  }

  .campaign-modal__card {
    max-height: calc(100vh - 20px);
  }

  .campaign-archives > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .campaign-archives > summary small {
    text-align: left;
  }
}

/* ============================================================
   Campagnes V5 — création simplifiée
   ============================================================ */
.campaign-modal--simple {
}

.campaign-modal--simple .campaign-modal__header {
  margin-bottom: 20px;
}

.campaign-create-form {
  display: grid;
  gap: 14px;
}

.campaign-create-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.campaign-create-form__field {
  display: grid;
  gap: 6px;
}

.campaign-create-form__field span,
.campaign-create-form__reuse span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--texte-secondaire);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.campaign-create-form__reuse span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte-principal);
  font-size: .88rem;
}

.campaign-create-form__field input,
.campaign-create-form__field select {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  font: inherit;
  color: var(--texte-principal);
  background: var(--blanc);
}

.campaign-create-form__reuse {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  padding: 11px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #F8FAFC;
  cursor: pointer;
}

.campaign-create-form__reuse input {
  width: 16px;
  height: 16px;
}

.campaign-source-panel--compact {
  margin-top: -2px;
  background: var(--couleur-primaire-clair);
  border-color: #BFDBFE;
}

@media (max-width: 720px) {
  .campaign-create-form__row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Campagnes V6 — création ultra simple + brouillon à finaliser
   ============================================================ */
.campaign-modal--simple {
  width: min(560px, calc(100vw - 32px));
}

.campaign-modal--simple .campaign-modal__card {
  padding: 22px;
}

.campaign-modal--simple .campaign-create-form {
  padding-top: 4px;
}

.campaign-card--new {
  border-color: #FBBF24;
  background: #FFFBEB;
  box-shadow: 0 14px 32px rgba(245, 158, 11, .16);
}

.campagne-card__setup--todo .tag,
.tag--warning {
  background: #FEF3C7;
  color: #92400E;
}

.campaign-card--new .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* ============================================================
   Campagnes V8 — aide actions et dropdown corrigé
   ============================================================ */
.campaign-card__tools {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
}

.campaign-help {
  position: relative;
}

.campaign-help__trigger {
  display: grid;
  place-items: center;
  border: 1px solid var(--gris-200);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--texte-secondaire);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: help;
}

.campaign-help__trigger:hover,
.campaign-help:focus-within .campaign-help__trigger {
  color: var(--couleur-primaire);
  border-color: #BFDBFE;
  background: var(--couleur-primaire-clair);
}

.campaign-help__bubble {
  position: absolute;
  width: 330px;
  max-width: min(330px, calc(100vw - 48px));
  padding: 12px 13px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre-md);
  color: var(--texte-secondaire);
  font-size: .78rem;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  pointer-events: none;
}

.campaign-help__bubble p + p {
  margin-top: 7px;
}

.campaign-help__bubble strong {
  color: var(--texte-principal);
  font-weight: 800;
}

.campaign-help:hover .campaign-help__bubble,
.campaign-help:focus-within .campaign-help__bubble {
  opacity: 1;
  visibility: visible;
}

.campaign-archives .campaign-more__menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.campagne-card,
.campagne-list,
.campagne-list--archives,
.campaign-archives {
  overflow: visible;
}

@media (max-width: 900px) {
  .campaign-card__tools {
    width: auto;
  }
}

@media (max-width: 720px) {
  .campaign-help__bubble {
    right: auto;
    left: 0;
    top: calc(100% + 8px);
  }

  .campaign-archives .campaign-help__bubble {
    top: auto;
    bottom: calc(100% + 8px);
  }
}

/* ============================================================
   Campagnes V9 — actions, aide et archives affinées
   ============================================================ */
.campagne-card {
  position: relative;
  z-index: 1;
}

.campagne-card:has(.campaign-more[open]) {
  z-index: 220;
}

.campaign-card__tools {
  grid-template-columns: minmax(120px, 1fr) 34px;
}

.campaign-more {
  grid-column: 1;
  grid-row: 1;
  z-index: 20;
}

.campaign-help {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.campaign-help__trigger {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.campaign-more summary {
  min-height: 34px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.campaign-archives > summary span::before {
  place-items: center;
  color: var(--texte-secondaire);
  font-size: .92rem;
  font-weight: 900;
  line-height: 1;
}

.campaign-archives[open] > summary span::before {
  transform: rotate(90deg);
  color: var(--couleur-primaire);
}

@media (max-width: 900px) {
  .campaign-card__tools {
    grid-template-columns: minmax(120px, 180px) 34px;
  }
}

/* ============================================================
   Campagnes V10 — superposition tooltip/dropdown + chevron archives
   ============================================================ */
.campagne-list,
.campagne-list--standalone,
.campagne-list--archives,
.campaign-archives {
  overflow: visible;
  isolation: isolate;
}

.campagne-card {
  position: relative;
  z-index: 1;
}

.campagne-card:hover,
.campagne-card:focus-within,
.campagne-card:has(.campaign-help:hover),
.campagne-card:has(.campaign-help:focus-within),
.campagne-card:has(.campaign-more[open]) {
  z-index: 500;
}

.campaign-card__tools {
  align-items: center;
}

.campaign-more,
.campaign-help {
  position: relative;
}

.campaign-help {
  z-index: 530;
}

.campaign-help__bubble {
  z-index: 580;
  right: 0;
  top: calc(100% + 8px);
  transform: translateY(-2px);
}

.campaign-help:hover .campaign-help__bubble,
.campaign-help:focus-within .campaign-help__bubble {
  transform: translateY(0);
}

.campaign-archives .campaign-help__bubble {
  top: auto;
  bottom: calc(100% + 8px);
}

.campaign-archives > summary {
  align-items: center;
}

.campaign-archives > summary span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.1;
}

.campaign-archives > summary span::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  border-radius: 999px;
  background: #F1F5F9;
  position: relative;
  transform: none;
  transition: background .18s ease;
}

.campaign-archives > summary span::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--texte-secondaire);
  border-bottom: 2px solid var(--texte-secondaire);
  transform: translate(5px, 0px) rotate(-45deg);
  transform-origin: center;
  transition: transform .18s ease, border-color .18s ease;
}

.campaign-archives[open] > summary span::before {
  background: var(--couleur-primaire-clair);
}

.campaign-archives[open] > summary span::after {
  border-color: var(--couleur-primaire);
  transform: translate(5px, -2px) rotate(45deg);
}

/* ============================================================
   Campagnes V11 — priorité tooltip + menus au-dessus des archives
   ============================================================ */
.page--campagnes,
.campagne-list,
.campagne-list--standalone,
.campagne-list--archives,
.campaign-archives,
.campagne-card,
.campagne-card__actions,
.campaign-card__tools {
  overflow: visible;
}

/* Évite qu'une section située plus bas repeigne par-dessus le menu de la dernière campagne. */
.campagne-list--standalone {
  position: relative;
  z-index: 20;
  isolation: auto;
}

.campaign-archives {
  position: relative;
  z-index: 5;
  isolation: auto;
}

.campagne-list--standalone:has(.campaign-more[open]),
.campagne-list--standalone:has(.campaign-help:hover),
.campagne-list--standalone:has(.campaign-help:focus-within),
.campaign-archives:has(.campaign-more[open]),
.campaign-archives:has(.campaign-help:hover),
.campaign-archives:has(.campaign-help:focus-within) {
  z-index: 900;
}

.campagne-card:has(.campaign-more[open]),
.campagne-card:has(.campaign-help:hover),
.campagne-card:has(.campaign-help:focus-within) {
  z-index: 950;
}

/* Par défaut, le menu Options passe au-dessus de la carte. */
.campaign-more[open] {
  z-index: 960;
}

.campaign-more__menu {
  z-index: 970;
}

/* Mais lorsque l'aide est affichée, le ? et son tooltip deviennent prioritaires. */
.campaign-card__tools:has(.campaign-help:hover) .campaign-more,
.campaign-card__tools:has(.campaign-help:focus-within) .campaign-more {
  z-index: 960;
}

.campaign-card__tools:has(.campaign-help:hover) .campaign-help,
.campaign-card__tools:has(.campaign-help:focus-within) .campaign-help {
  z-index: 990;
}

.campaign-card__tools:has(.campaign-help:hover) .campaign-help__bubble,
.campaign-card__tools:has(.campaign-help:focus-within) .campaign-help__bubble {
  z-index: 1000;
}

/* Empêche le bandeau Archives de repasser visuellement au-dessus du menu de la dernière campagne. */
.campagne-list--standalone:has(.campaign-more[open]) + .campaign-archives,
.campagne-list--standalone:has(.campaign-help:hover) + .campaign-archives,
.campagne-list--standalone:has(.campaign-help:focus-within) + .campaign-archives {
  z-index: 1;
}

/* ============================================================
   Fiche campagne — premier jet
   ============================================================ */
.body--fiche-campagne .contenu {
  padding-bottom: 48px;
}

.page--fiche-campagne {
  display: grid;
  gap: 18px;
}

.campaign-sheet-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-xl);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: var(--ombre);
}

.campaign-sheet-hero__kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--couleur-primaire);
}

.campaign-sheet-hero__titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.campaign-sheet-hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.campaign-state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.campaign-state-card {
  padding: 18px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.campaign-state-card__label {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 8px;
}

.campaign-state-card strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.campaign-state-card p {
  margin-top: 6px;
  color: var(--texte-secondaire);
  font-size: .84rem;
}

.campaign-state-card--todo {
  border-color: #FED7AA;
  background: #FFF7ED;
}

.campaign-state-card--ok {
  border-color: #BBF7D0;
  background: #F0FDF4;
}

.campaign-sheet-nav {
  position: sticky;
  top: 12px;
  z-index: 40;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: rgba(255,255,255,.92);
  box-shadow: var(--ombre);
  backdrop-filter: blur(8px);
}

.campaign-sheet-nav a {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--texte-secondaire);
  font-size: .82rem;
  font-weight: 700;
}

.campaign-sheet-nav a:hover {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}

.campaign-sheet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.campaign-sheet-main,
.campaign-sheet-side {
  display: grid;
  gap: 18px;
}

.campaign-sheet-side {
  position: sticky;
  top: 82px;
}

.campaign-panel,
.campaign-side-card {
  padding: 22px;
}

.campaign-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.campaign-form-grid__wide {
  grid-column: 1 / -1;
}

.form-builder-preview {
  display: grid;
  gap: 12px;
}

.form-section-preview {
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #FFFFFF;
  padding: 16px;
}

.form-section-preview--muted {
  background: #F8FAFC;
}

.form-section-preview__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.form-section-preview__number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 999px;
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  font-weight: 800;
}

.form-section-preview h2,
.notice-grid h2 {
  font-size: .98rem;
  font-weight: 800;
}

.form-section-preview p,
.notice-grid p {
  margin-top: 3px;
  font-size: .84rem;
  color: var(--texte-secondaire);
}

.form-field-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.form-field-list span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--gris-200);
  background: #F8FAFC;
  font-size: .78rem;
  font-weight: 700;
  color: var(--texte-secondaire);
}

.campaign-document-list {
  display: grid;
  gap: 10px;
}

.campaign-document-item {
    /* La carte s'ouvre au clic (lot 72c) : le curseur le dit. */
    cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #FFFFFF;
}

.campaign-document-item strong,
.mini-activity-list strong {
  display: block;
  font-size: .9rem;
  font-weight: 800;
}

.campaign-document-item span:not(.badge):not(.tag),
.mini-activity-list span {
  display: block;
  margin-top: 3px;
  color: var(--texte-secondaire);
  font-size: .82rem;
}

.notice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.notice-grid article {
  padding: 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
}

.notice-grid h2 {
  margin-top: 10px;
}

.transfer-panel--sheet {
  background: #FFFFFF;
}

.campaign-checklist {
  display: grid;
  gap: 10px;
}

.campaign-checklist li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--texte-secondaire);
  font-size: .86rem;
  font-weight: 600;
}

.campaign-checklist li span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gris-200);
  flex: 0 0 10px;
}

.campaign-checklist li.is-done span {
  background: var(--badge-valide-texte);
}

.campaign-checklist li.is-warning span {
  background: var(--badge-incomplet-texte);
}

.campaign-side-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.campaign-side-metrics div {
  padding: 12px;
  border-radius: var(--rayon);
  background: #F8FAFC;
  text-align: center;
}

.campaign-side-metrics strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 800;
}

.campaign-side-metrics span {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--texte-secondaire);
}

.mini-activity-list {
  display: grid;
  gap: 12px;
}

.mini-activity-list article {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gris-200);
}

.mini-activity-list article:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 1220px) {
  .campaign-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-sheet-layout {
    grid-template-columns: 1fr;
  }

  .campaign-sheet-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .campaign-sheet-hero {
    flex-direction: column;
  }

  .campaign-sheet-hero__actions,
  .campaign-sheet-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .campaign-state-grid,
  .campaign-form-grid,
  .campaign-sheet-side,
  .notice-grid {
    grid-template-columns: 1fr;
  }

  .campaign-document-item {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Liens dans le menu Options des campagnes */
.campaign-more__menu a {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--rayon-sm);
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: .82rem;
  color: var(--texte-principal);
  cursor: pointer;
}

.campaign-more__menu a:hover {
  background: var(--gris-100);
}

/* ============================================================
   Fiche campagne — version orientée usages / onglets
   ============================================================ */
.campaign-sheet-hero--clean {
  align-items: center;
}

.campaign-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  font-size: .84rem;
  color: var(--texte-secondaire);
}

.campaign-hero-links a {
  color: var(--couleur-primaire);
  font-weight: 700;
}

.campaign-hero-links a:hover {
  text-decoration: underline;
}

.campaign-recap-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-xl);
  box-shadow: var(--ombre);
  padding: 22px;
}

.campaign-recap-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.campaign-recap-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.campaign-recap-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
  transition: background .15s, border-color .15s, transform .15s;
}

.campaign-recap-item:hover {
  background: var(--couleur-primaire-clair);
  border-color: #BFDBFE;
  transform: translateY(-1px);
}

.campaign-recap-item strong {
  font-size: 1.55rem;
  line-height: 1;
  color: var(--texte-principal);
}

.campaign-recap-item span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--texte-secondaire);
}

.campaign-tabs {
  display: grid;
  gap: 0;
}

.campaign-tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.campaign-tabs__nav {
  position: sticky;
  top: 12px;
  z-index: 35;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
  background: rgba(255,255,255,.94);
  box-shadow: var(--ombre);
  backdrop-filter: blur(8px);
}

.campaign-tabs__nav label {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--texte-secondaire);
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.campaign-tabs__nav label:hover {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}

#tab-infos:checked ~ .campaign-tabs__nav label[for="tab-infos"],
#tab-formulaire:checked ~ .campaign-tabs__nav label[for="tab-formulaire"],
#tab-documents:checked ~ .campaign-tabs__nav label[for="tab-documents"],
#tab-notices:checked ~ .campaign-tabs__nav label[for="tab-notices"],
#tab-transfert:checked ~ .campaign-tabs__nav label[for="tab-transfert"] {
  background: var(--couleur-primaire);
  color: var(--blanc);
}

.campaign-tabs__panels {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-top: 0;
  border-radius: 0 0 var(--rayon-xl) var(--rayon-xl);
  box-shadow: var(--ombre);
  padding: 18px;
}

.campaign-tabs__panel {
  display: none;
  box-shadow: none;
  border-radius: var(--rayon-lg);
}

#tab-infos:checked ~ .campaign-tabs__panels .campaign-tabs__panel--infos,
#tab-formulaire:checked ~ .campaign-tabs__panels .campaign-tabs__panel--formulaire,
#tab-documents:checked ~ .campaign-tabs__panels .campaign-tabs__panel--documents,
#tab-notices:checked ~ .campaign-tabs__panels .campaign-tabs__panel--notices,
#tab-transfert:checked ~ .campaign-tabs__panels .campaign-tabs__panel--transfert {
  display: block;
}

.section-head--builder {
  align-items: center;
}

.section-head__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.form-builder-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.form-builder-sections {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
}

.form-builder-sections__title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 4px;
}

.form-section-pill,
.form-section-add {
  width: 100%;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background .15s, border-color .15s, color .15s;
}

.form-section-pill strong,
.form-section-pill span {
  display: block;
}

.form-section-pill strong {
  font-size: .86rem;
  color: var(--texte-principal);
}

.form-section-pill span {
  margin-top: 2px;
  font-size: .76rem;
  color: var(--texte-secondaire);
  font-weight: 700;
}

.form-section-pill.is-active,
.form-section-pill:hover {
  border-color: #BFDBFE;
  background: var(--couleur-primaire-clair);
}

.form-section-pill.is-active strong {
  color: var(--couleur-primaire);
}

.form-section-add {
  color: var(--couleur-primaire);
  font-weight: 800;
  text-align: center;
  border-style: dashed;
}

.form-builder-editor {
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: var(--blanc);
  padding: 18px;
}

.form-builder-editor__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.form-builder-editor__head h2 {
  font-size: 1.05rem;
  font-weight: 800;
}

.form-builder-editor__head p {
  margin-top: 4px;
  color: var(--texte-secondaire);
  font-size: .86rem;
}

.form-builder-editor__actions,
.form-builder-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.form-field-builder-list {
  display: grid;
  gap: 10px;
}

.form-field-builder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #FFFFFF;
}

.form-field-builder-item--muted {
  background: #F8FAFC;
}

.form-field-builder-item strong,
.form-field-builder-item span {
  display: block;
}

.form-field-builder-item strong {
  font-size: .9rem;
  font-weight: 800;
}

.form-field-builder-item span {
  margin-top: 2px;
  color: var(--texte-secondaire);
  font-size: .8rem;
}

.form-field-builder-item button {
  border: 1px solid var(--gris-200);
  background: var(--blanc);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--texte-secondaire);
  cursor: pointer;
}

.form-builder-bottom-actions {
  justify-content: flex-start;
}

.campaign-form-grid--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.campaign-form-grid--wide .campaign-form-grid__wide {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .campaign-recap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-builder-shell,
  .campaign-form-grid--wide {
    grid-template-columns: 1fr;
  }

  .form-builder-editor__head,
  .section-head--builder {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-head__actions,
  .form-builder-editor__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .campaign-recap-card__head,
  .campaign-sheet-hero--clean,
  .form-field-builder-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .campaign-recap-grid {
    grid-template-columns: 1fr;
  }

  .campaign-tabs__nav {
    position: static;
    border-radius: var(--rayon-lg);
  }

  .campaign-tabs__panels {
    border-top: 1px solid var(--gris-200);
    border-radius: var(--rayon-lg);
  }

  .section-head__actions .btn,
  .form-builder-bottom-actions .btn,
  .campaign-sheet-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Lien discret vers les dossiers filtrés depuis les cartes campagne */
.campagne-card__dossiers-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 800;
  color: var(--couleur-primaire);
}

.campagne-card__dossiers-link:hover {
  text-decoration: underline;
}


/* ============================================================
   Correctif fiche campagne v3 — simplification visuelle
   ============================================================ */
.page--fiche-campagne .campaign-recap-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page--fiche-campagne .campaign-tabs {
  gap: 0;
}

.page--fiche-campagne .campaign-tabs__nav {
  position: sticky;
  top: 12px;
  z-index: 35;
  border: 1px solid var(--gris-200);
  border-bottom: 0;
  border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
  box-shadow: none;
  background: var(--blanc);
  padding: 10px 12px;
}

.page--fiche-campagne .campaign-tabs__panels {
  border: 1px solid var(--gris-200);
  border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 24px;
  background: var(--blanc);
}

.page--fiche-campagne .campaign-tabs__panel.carte {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.page--fiche-campagne .form-builder-shell {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.page--fiche-campagne .form-builder-sections {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page--fiche-campagne .form-section-pill,
.page--fiche-campagne .form-section-add {
  border-radius: var(--rayon);
}

.page--fiche-campagne .form-builder-editor {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page--fiche-campagne .form-builder-editor__head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris-200);
}

.page--fiche-campagne .form-field-builder-item {
  box-shadow: none;
}

@media (max-width: 1180px) {
  .page--fiche-campagne .campaign-recap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page--fiche-campagne .form-builder-shell {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   Fiche campagne v0.12 — Refonte UX complète
   ============================================================ */

/* ── Hero méta (sous le titre) ──────────────────────────────── */
.campaign-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: .82rem;
  color: var(--texte-secondaire);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA PASTILLE PASSE SOUS LA DATE SUR ÉCRAN ÉTROIT (lot 14m, 16/08/2026)

   « 6 dossiers reçus · modifications limitées » tient sur une ligne à côté de
   « Dernière modification : … » sur un écran large. Sur un téléphone, les deux
   se disputent une largeur qui n'existe pas — la pastille pousse la date hors
   du cadre, ou se coupe.

   ── ON REPLIE, ON NE RÉTRÉCIT PAS ────────────────────────────────────────

   Réduire la police ou tronquer le texte rendrait la pastille illisible pour
   gagner quelques pixels. Elle dit une RESTRICTION — pourquoi certains champs
   ne se modifient plus — et une restriction qu'on ne peut pas lire ne protège
   personne.

   Elle passe donc à la ligne, entière.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .campaign-hero-meta {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 6px;
  }

  /* LA DATE PREND SA LIGNE : sans cela, la pastille remonterait à côté d'elle
     dès qu'il reste dix pixels, et on retrouverait le problème sur les
     largeurs intermédiaires. */
  .campaign-hero-meta__date {
    flex: 1 0 100%;
  }
}

.campaign-hero-meta__link {
  color: var(--couleur-primaire);
  font-weight: 600;
}

.campaign-hero-meta__link:hover { text-decoration: underline; }
.campaign-hero-meta__sep { color: var(--gris-400); }

/* ── Bouton Publier désactivé avec blockers ─────────────────── */
.btn--publier[data-blockers]:not([data-blockers="0"]) {
  background: var(--gris-200);
  color: var(--gris-400);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Blockers expandables ───────────────────────────────────── */
.campaign-blockers-toggle {
  cursor: pointer;
  border: none;
  font-family: inherit;
  gap: 6px;
  transition: background .15s;
}

.campaign-blockers-toggle:hover { background: #FFEDD5; }

.blockers-chevron {
  transition: transform .2s;
  flex-shrink: 0;
}

.campaign-blockers-toggle[aria-expanded="true"] .blockers-chevron {
  transform: rotate(180deg);
}

.campaign-blockers-list {
  margin-top: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: var(--rayon);
}

.campaign-blockers-list ul {
  display: grid;
  gap: 10px;
}

.campaign-blockers-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .84rem;
  color: var(--texte-principal);
}

.campaign-blockers-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #C2410C;
}

.campaign-blockers-list li span { flex: 1; }

.blocker-goto {
  font-size: .8rem;
  font-weight: 700;
  color: var(--couleur-primaire);
  white-space: nowrap;
  flex-shrink: 0;
}

.blocker-goto:hover { text-decoration: underline; }

.blockers-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #FED7AA;
  font-size: .8rem;
  font-style: italic;
}

/* ── Pastille d'alerte sur les onglets ──────────────────────── */
.tab-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #EA580C;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  margin-left: 6px;
  vertical-align: middle;
}

/* Quand l'onglet est actif, la pastille prend une teinte adaptée */
#tab-documents:checked ~ .campaign-tabs__nav label[for="tab-documents"] .tab-alert,
#tab-notices:checked ~ .campaign-tabs__nav label[for="tab-notices"] .tab-alert {
  background: rgba(255,255,255,.3);
  color: #fff;
}

/* ── Onglet Transfert désactivé ─────────────────────────────── */
.tab-label--disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.tab-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  vertical-align: middle;
  opacity: .7;
}

/* ── Champ avec warning ─────────────────────────────────────── */
.input--warning {
  border-color: #FCA855 !important;
  background: #FFFBF5;
}

.champ__required {
  font-size: .68rem;
  font-weight: 700;
  color: #C2410C;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-left: 4px;
}

.champ__hint {
  font-size: .78rem;
  color: var(--texte-secondaire);
  margin-top: 2px;
}

.champ__hint--warn { color: #C2410C; }

/* ── Form builder : pills avec drag handle et menu ─────────── */
.form-section-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 8px;
}

.form-section-pill__body {
  flex: 1;
  min-width: 0;
}

.form-section-pill__body strong,
.form-section-pill__body span {
  display: block;
}

.form-section-pill__body strong {
  font-size: .86rem;
  color: var(--texte-principal);
}

.form-section-pill__body span {
  margin-top: 2px;
  font-size: .76rem;
  color: var(--texte-secondaire);
  font-weight: 700;
}

.form-section-pill.is-active .form-section-pill__body strong {
  color: var(--couleur-primaire);
}

/* ── Drag handle (sections et champs) ──────────────────────── */
.drag-handle {
  color: var(--gris-400);
  /* ── LA POIGNÉE SE SAISIT DU PREMIER COUP (lot 29d, 17/08/2026) ─────────
     Philippe : elle était à .9rem, trop menue pour une cible qu'on attrape à
     la souris.

     ── « em » HÉRITE, « rem » NON ────────────────────────────────────────
     J'avais posé « 1.2em » : dans une carte dont le texte est à .8rem, cela
     donnait .96rem — soit à peine plus qu'avant. La poignée vit dans des
     contextes de tailles différentes, elle doit donc porter une taille
     ABSOLUE. */
  font-size: 1.2rem;
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
  padding: 2px 2px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}

.drag-handle:hover {
  color: var(--couleur-primaire);
  background: var(--couleur-primaire-clair);
}

/* ── Menu ··· des pills et items ────────────────────────────── */
.pill-menu-btn,
.item-menu-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gris-400);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--rayon-sm);
  line-height: 1;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}

.pill-menu-btn:hover,
.item-menu-btn:hover {
  background: var(--gris-100);
  color: var(--texte-principal);
  border-color: var(--gris-200);
}

/* ── Popover menu sections ──────────────────────────────────── */
.pill-menu-popover {
  position: fixed;
  z-index: 200;
  min-width: 210px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pill-menu-popover button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--rayon-sm);
  padding: 9px 12px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--texte-principal);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}

.pill-menu-popover button:hover { background: var(--gris-100); }

.pill-menu-danger { color: #B91C1C !important; }
.pill-menu-danger:hover { background: #FEE2E2 !important; }

.pill-menu-popover__divider {
  height: 1px;
  background: var(--gris-200);
  margin: 4px 0;
}

/* ── Champs dans l'éditeur : clic pour éditer ───────────────── */
.form-field-builder-item {
  gap: 10px;
  padding: 12px 14px;
}

.form-field-builder-item:hover {
  border-color: #BFDBFE;
  background: var(--couleur-primaire-clair);
}

.form-field-builder-item:focus {
  outline: 2px solid var(--couleur-primaire);
  outline-offset: 1px;
}

.field-info { flex: 1; min-width: 0; }
.field-info strong { display: block; font-size: .9rem; font-weight: 700; }
.field-info span { display: block; margin-top: 2px; color: var(--texte-secondaire); font-size: .8rem; }

.field-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.field-badge--required {
  background: #DBEAFE;
  color: #1D4ED8;
}

.field-badge--optional {
  background: var(--gris-100);
  color: var(--gris-600);
}

/* ── Bouton Ajouter un champ + popover ──────────────────────── */
.form-builder-bottom-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-200);
}

.add-field-wrapper { position: relative; display: inline-block; }

.btn--add-field {
  gap: 6px;
}

.add-field-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 100;
  min-width: 240px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-field-popover button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--rayon-sm);
  padding: 10px 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}

.add-field-popover button:hover { background: var(--couleur-primaire-clair); }

.add-field-popover button strong {
  display: block;
  font-size: .86rem;
  color: var(--texte-principal);
}

.add-field-popover button span {
  display: block;
  font-size: .78rem;
  color: var(--texte-secondaire);
  margin-top: 1px;
}

.add-field-popover button svg {
  flex-shrink: 0;
  color: var(--couleur-primaire);
}

/* ── Documents : icône de type ──────────────────────────────── */
.doc-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.doc-item__icon--pdf {
  background: #FEE2E2;
}

.doc-item__icon--img {
  background: #EDE9FE;
  color: #6D28D9;
}

.doc-item__body { flex: 1; min-width: 0; }

.campaign-document-item {
  gap: 12px;
  align-items: center;
}

.campaign-document-item--warn {
  border-color: #FED7AA;
  background: #FFFBF5;
}

.doc-warn {
  color: #C2410C;
  font-weight: 600;
}

/* ── Notices avec aperçu de contenu ─────────────────────────── */
.notice-card {
  padding: 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notice-card--ok {
  border-color: var(--gris-200);
}

.notice-card--empty {
  border-color: #FED7AA;
  background: #FFFBF5;
}

.notice-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notice-card h2 {
  font-size: .98rem;
  font-weight: 800;
  margin: 0;
}

.notice-card__preview {
  font-size: .82rem;
  color: var(--texte-secondaire);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-card__preview--empty {
  font-style: italic;
}

.notice-card__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  font-weight: 700;
  padding: 4px 0;
}
.notice-card__status--warn { color: #C2410C; }

/* ── Onglet Transfert verrouillé ────────────────────────────── */
.campaign-tabs__panel--locked {
  pointer-events: none;
  opacity: .5;
}

.transfer-locked-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 24px;
  text-align: center;
  color: var(--texte-secondaire);
}

.transfer-locked-state svg {
  color: var(--gris-400);
}

.transfer-locked-state p {
  max-width: 40ch;
  font-size: .9rem;
  line-height: 1.6;
}

/* ── Modale de publication ──────────────────────────────────── */
.publish-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.publish-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
}

.publish-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--blanc);
  border-radius: var(--rayon-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%;
  max-width: 480px;
  padding: 28px;
}

.publish-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.publish-modal__head h2 {
  font-size: 1.15rem;
  font-weight: 800;
}

.publish-modal__close {
  appearance: none;
  border: none;
  background: var(--gris-100);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texte-secondaire);
  flex-shrink: 0;
}

.publish-modal__close:hover { background: var(--gris-200); }

.publish-modal__intro {
  font-size: .88rem;
  color: var(--texte-secondaire);
  margin-bottom: 20px;
}

.publish-checklist {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.publish-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--rayon);
  border: 1px solid var(--gris-200);
}

.publish-checklist__item--ok {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.publish-checklist__item--ok svg { color: #16A34A; flex-shrink: 0; margin-top: 1px; }

.publish-checklist__item--warn {
  background: #FFF7ED;
  border-color: #FED7AA;
}

.publish-checklist__item--warn svg { color: #C2410C; flex-shrink: 0; margin-top: 1px; }

.publish-checklist__item strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
}

.publish-checklist__item span {
  display: block;
  font-size: .8rem;
  color: var(--texte-secondaire);
  margin-top: 2px;
}

.publish-modal__footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.publish-modal__footer .btn[disabled] {
  background: var(--gris-200);
  color: var(--gris-400);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── tag--primary (pour les notices) ───────────────────────── */
.tag--primary {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}


/* Correctif fiche campagne v5 — menu d'options discret sur chaque champ */
.field-menu-btn {
  appearance: none;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--gris-400) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  padding: 2px 6px !important;
  border-radius: var(--rayon-sm) !important;
  line-height: 1 !important;
  flex-shrink: 0;
  min-width: 28px;
}

.field-menu-btn:hover,
.field-menu-btn:focus {
  background: var(--gris-100) !important;
  color: var(--texte-principal) !important;
  border-color: var(--gris-200) !important;
  outline: none;
}


/* Correctif fiche campagne v0.13 : blockers dynamiques */
.campaign-blockers-list li.is-resolved {
  display: none;
}

.pill-menu-btn[aria-expanded="true"] {
  background: var(--gris-100);
  color: var(--texte-principal);
  border-color: var(--gris-200);
}

/* ============================================================
   Fiche campagne v7 — ajout section/champ : menus + modales
   ============================================================ */
.add-section-wrapper {
  position: relative;
  display: inline-block;
}

.add-section-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 310px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-section-popover button,
.add-field-popover button {
  min-height: 48px;
}

.add-section-popover button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--rayon-sm);
  padding: 10px 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}

.add-section-popover button:hover {
  background: var(--couleur-primaire-clair);
}

.add-section-popover button strong {
  display: block;
  font-size: .86rem;
  color: var(--texte-principal);
}

.add-section-popover button span {
  display: block;
  font-size: .78rem;
  color: var(--texte-secondaire);
  margin-top: 1px;
}

.add-section-popover button svg {
  flex-shrink: 0;
  color: var(--couleur-primaire);
}

.builder-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.builder-modal[hidden] {
  display: none !important;
}

.builder-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
}

.builder-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-xl);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
}

.builder-modal__panel--sm { width: min(100%, 520px); }
.builder-modal__panel--lg { width: min(100%, 820px); }

.builder-modal__head,
.builder-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

.builder-modal__head {
  border-bottom: 1px solid var(--gris-200);
}

.builder-modal__footer {
  border-top: 1px solid var(--gris-200);
  justify-content: flex-end;
}

.builder-modal__eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--couleur-primaire);
  margin-bottom: 3px;
}

.builder-modal__head h2 {
  font-size: 1.05rem;
  line-height: 1.2;
}

.builder-modal__close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--gris-200);
  background: var(--blanc);
  border-radius: 999px;
  color: var(--texte-secondaire);
  font-size: 1.2rem;
  cursor: pointer;
}

.builder-modal__close:hover {
  background: var(--gris-100);
  color: var(--texte-principal);
}

.builder-modal__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.builder-modal__notice {
  padding: 10px 12px;
  border: 1px solid #BFDBFE;
  border-radius: var(--rayon);
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  font-size: .84rem;
  font-weight: 600;
}

.builder-library-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-library-tools input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--gris-200);
  border-radius: var(--rayon);
  font: inherit;
}

.builder-library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.builder-library-filters button {
  border: 1px solid var(--gris-200);
  background: var(--blanc);
  color: var(--texte-secondaire);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

.builder-library-filters button.is-active,
.builder-library-filters button:hover {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
  border-color: #BFDBFE;
}

.builder-library-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #fff;
}

.builder-library-item strong {
  display: block;
  font-size: .92rem;
}

.builder-library-item span {
  display: block;
  color: var(--texte-secondaire);
  font-size: .8rem;
  margin-top: 2px;
}

.builder-library-item__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.builder-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  font-weight: 700;
  color: var(--texte-principal);
}

@media (max-width: 720px) {
  .add-section-popover {
    left: 0;
    right: auto;
    min-width: min(310px, calc(100vw - 48px));
  }

  .builder-library-item,
  .builder-library-item__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .builder-library-item__actions .btn {
    justify-content: center;
  }
}

/* ============================================================
   Fiche campagne — options dynamiques des types de champs
   ============================================================ */
.field-type-config {
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #F8FAFC;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-type-config[hidden] {
  display: none !important;
}

.field-type-config__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.field-type-config__head strong {
  display: block;
  font-size: .88rem;
  color: var(--texte-principal);
}

.field-type-config__head span,
.field-type-config__note {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--texte-secondaire);
}

.choice-list-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice-row-demo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
}

.choice-row-demo input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
  color: var(--texte-principal);
  background: transparent;
}

.choice-row-demo button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texte-secondaire);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.choice-row-demo button:hover {
  background: #FEE2E2;
  color: #B91C1C;
}

.field-config-add {
  align-self: flex-start;
}

.address-subfields-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.address-subfields-demo label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  font-size: .84rem;
  font-weight: 600;
  color: var(--texte-principal);
}

@media (max-width: 560px) {
  .address-subfields-demo {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Fiche campagne v11 — options champs/sections + conditions
   ============================================================ */
.field-menu-popover {
  position: fixed;
  z-index: 2000;
  min-width: 220px;
  padding: 6px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
}

.field-menu-popover[hidden] { display: none !important; }

.field-menu-popover button,
.pill-menu-popover button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font: inherit;
  font-size: .86rem;
  color: var(--texte-principal);
  cursor: pointer;
  text-align: left;
}

.field-menu-popover button:hover,
.pill-menu-popover button:hover {
  background: var(--gris-100);
}

.field-menu-popover__divider {
  height: 1px;
  background: var(--gris-200);
  margin: 5px 4px;
}

.field-menu-danger,
.pill-menu-danger {
  color: var(--badge-refuse-texte) !important;
}

.field-condition-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #BFDBFE;
  background: #EFF6FF;
  border-radius: var(--rayon);
}

.field-condition-box__head strong {
  display: block;
  font-size: .92rem;
  color: var(--texte-principal);
}

.field-condition-box__head span {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--texte-secondaire);
}

.field-condition-summary {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--blanc);
  border: 1px solid #DBEAFE;
  color: var(--texte-secondaire);
  font-size: .82rem;
}

/* Le résumé porte un AVERTISSEMENT (lot 3n) : un champ conditionné par une
   question facultative ne s'affichera jamais si la famille passe la question.
   Couleurs TRANSPOSÉES du récapitulatif de la fiche, qui signale exactement la
   même chose au même moment : même sens, mêmes couleurs, et un contraste déjà
   éprouvé plutôt qu'un couple inventé pour l'occasion.

   CONTRASTE MESURÉ : 6,37:1 — au-delà du seuil AA (4,5:1), sans atteindre AAA
   (7:1). Le seul couple déjà employé qui atteindrait AAA est le rouge des
   alertes, et il dirait la mauvaise chose : ce message n'est pas une erreur,
   c'est une information dont l'école juge elle-même. Gagner un seuil au prix
   d'une couleur inventée ou d'un mauvais signal n'en vaut pas la peine. */
.field-condition-summary.is-warning {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #92400E;
}

.field-condition-value[hidden] { display: none !important; }

.form-field-builder-item {
  cursor: pointer;
}

.form-field-builder-item:focus-visible {
  outline: 3px solid rgba(29,78,216,.16);
  outline-offset: 2px;
}

/* ============================================================
   Correctif v12 — fiche campagne : affichage conditionnel + scroll global
   ============================================================ */
html {
  min-height: 100%;
  overflow-y: auto;
}

body.body--fiche-campagne {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.body--fiche-campagne .layout {
  min-height: auto;
  align-items: flex-start;
}

.body--fiche-campagne .contenu {
  overflow: visible !important;
}

.builder-switch-row span small {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--texte-secondaire);
  line-height: 1.35;
}

.field-condition-box[hidden] {
  display: none !important;
}

.field-condition-box {
  margin-top: -2px;
}

/* ============================================================
   Fiche campagne v13 — options documents/notices
   ============================================================ */
.item-menu-popover {
  position: fixed;
  z-index: 2000;
  min-width: 230px;
  padding: 6px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
}

.item-menu-popover[hidden] { display: none !important; }

.item-menu-popover button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font: inherit;
  font-size: .86rem;
  color: var(--texte-principal);
  cursor: pointer;
  text-align: left;
}

.item-menu-popover button:hover { background: var(--gris-100); }

.item-menu-popover__divider {
  height: 1px;
  background: var(--gris-200);
  margin: 5px 4px;
}

.item-menu-danger { color: var(--badge-refuse-texte) !important; }

.notice-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: start;
}

.notice-editor-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.notice-editor-preview {
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
  padding: 16px;
  position: sticky;
  top: 0;
}

.notice-editor-preview span {
  display: inline-flex;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 10px;
}

.notice-editor-preview strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 8px;
}

.notice-editor-preview p {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--texte-secondaire);
}

@media (max-width: 760px) {
  .notice-editor-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Bibliothèque — éléments réutilisables
   ============================================================ */
.body--bibliotheque .contenu { overflow: visible; }

.page--bibliotheque { gap: 22px; }

.library-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
}

.library-hero__main { max-width: 780px; }
.library-hero__kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--couleur-primaire);
  margin-bottom: 8px;
}
.library-hero__titleline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.library-hero__note {
  margin-top: 12px;
  color: var(--texte-secondaire);
  font-size: .9rem;
  max-width: 72ch;
}
.library-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.library-create-menu { position: relative; }
.library-create-menu .export-menu__panel { min-width: 220px; right: 0; }

.library-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.library-kpi {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.library-kpi:hover,
.library-kpi.is-active {
  border-color: #BFDBFE;
  box-shadow: var(--ombre-md);
  transform: translateY(-1px);
}
.library-kpi.is-active { background: var(--couleur-primaire-clair); }
.library-kpi strong {
  display: block;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--texte-principal);
}
.library-kpi span {
  display: block;
  margin-top: 8px;
  color: var(--texte-secondaire);
  font-size: .82rem;
  font-weight: 700;
}

.library-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px 180px auto;
  gap: 14px;
  align-items: end;
  padding: 18px;
  position: sticky;
  top: 16px;
  z-index: 40;
}
.library-reset { height: 40px; justify-content: center; }

.library-layout {
  display: block;
}
.library-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}
.library-view-actions { display: flex; gap: 8px; }
.library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.library-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 246px;
  transition: box-shadow .15s, transform .15s;
}
.library-card:hover {
  box-shadow: var(--ombre-md);
  transform: translateY(-1px);
}
.library-card[hidden] { display: none !important; }
.library-card__top,
.library-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.library-card h2 {
  font-size: 1.05rem;
  line-height: 1.25;
  margin-top: 14px;
  color: var(--texte-principal);
}
.library-card p {
  color: var(--texte-secondaire);
  font-size: .9rem;
  margin-top: 8px;
}
.library-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.library-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  color: var(--texte-secondaire);
  font-size: .75rem;
  font-weight: 700;
}
.library-card__footer {
  margin-top: auto;
  padding-top: 16px;
  color: var(--texte-secondaire);
  font-size: .8rem;
}
.library-type {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.library-type--formulaire { background: #DBEAFE; color: #1D4ED8; }
.library-type--section { background: #EDE9FE; color: #6D28D9; }
.library-type--champ { background: #DCFCE7; color: #15803D; }
.library-type--document { background: #FFEDD5; color: #C2410C; }
.library-type--notice { background: #FCE7F3; color: #BE185D; }
.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--gris-200);
  background: var(--blanc);
  color: var(--texte-secondaire);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.icon-btn span {
  display: block;
  transform: translateY(-1px);
  font-size: .9rem;
  letter-spacing: .08em;
}
.icon-btn:hover { background: var(--gris-100); color: var(--texte-principal); }
.library-card-menu summary { list-style: none; }
.library-card-menu summary::-webkit-details-marker { display: none; }
.library-card-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  padding: 6px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
}
.library-card-menu__panel button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: .85rem;
  color: var(--texte-principal);
  cursor: pointer;
}
.library-card-menu__panel button:hover { background: var(--gris-100); }
.library-card-menu__panel button.is-danger { color: #B91C1C; }
.library-card-menu__panel button.is-danger:hover { background: #FEE2E2; }
.library-empty {
  background: var(--blanc);
  border: 1px dashed var(--gris-400);
  border-radius: var(--rayon-lg);
  color: var(--texte-secondaire);
  padding: 28px;
  text-align: center;
  font-weight: 700;
}
.library-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}
.library-guide { padding: 20px; }
.library-guide ol {
  list-style: decimal;
  padding-left: 18px;
  color: var(--texte-secondaire);
  font-size: .88rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.library-rule {
  display: grid;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-200);
}
.library-rule:last-child { border-bottom: none; padding-bottom: 0; }
.library-rule strong { font-size: .9rem; }
.library-rule span { color: var(--texte-secondaire); font-size: .84rem; }


.library-archives-card {
  margin-top: 24px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.library-archives-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.library-archives-card summary::-webkit-details-marker { display: none; }
.library-archives-card__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--texte-principal);
}
.library-archives-card__chevron {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gris-100);
  color: var(--texte-secondaire);
  transition: transform .15s;
}
.library-archives-card[open] .library-archives-card__chevron { transform: rotate(90deg); }
.library-archives-card__hint {
  color: var(--texte-secondaire);
  font-size: .88rem;
}
.library-archives-card__content {
  border-top: 1px solid var(--gris-200);
  padding: 0 20px 18px;
}
.library-archive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gris-200);
}
.library-archive-row:last-child { border-bottom: 0; padding-bottom: 0; }
.library-archive-row strong { display: block; }
.library-archive-row span {
  display: block;
  color: var(--texte-secondaire);
  font-size: .84rem;
  margin-top: 3px;
}
.library-archive-row__actions {
  flex-shrink: 0;
}
.library-import-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.library-import-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  overflow: hidden;
}
.library-import-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 16px;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-200);
}
.library-import-item:last-child { border-bottom: 0; }
.library-import-item strong { display: block; }
.library-import-item span {
  display: block;
  color: var(--texte-secondaire);
  font-size: .84rem;
  margin-top: 3px;
}

@media (max-width: 1280px) {
  .library-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-import-filters { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .library-hero { flex-direction: column; }
  .library-hero__actions { justify-content: flex-start; }
  .library-toolbar { grid-template-columns: 1fr; }
  .library-grid { grid-template-columns: 1fr; }
  .library-section-head { align-items: flex-start; flex-direction: column; }
  .library-archives-card summary,
  .library-archive-row,
  .library-import-item { align-items: flex-start; flex-direction: column; }
  .library-archive-row__actions { width: 100%; }
}

@media (max-width: 640px) {
  .library-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Bibliothèque V3 — menus, archives et page renommée
   ============================================================ */
.page--bibliotheque,
.library-grid,
.library-main,
.library-card,
.library-card__top,
.library-card-menu,
.library-archives-card {
  overflow: visible;
}

.library-grid {
  position: relative;
  isolation: isolate;
}

.library-card {
  position: relative;
  z-index: 1;
}

.library-card:hover,
.library-card:focus-within,
.library-card:has(.library-card-menu[open]) {
  z-index: 950;
}

.library-card-menu[open] {
  z-index: 960;
}

.library-card-menu .icon-btn {
  line-height: 1;
}

.library-card__footer {
  min-height: 32px;
}

.library-card__footer span {
  padding-top: 2px;
}

/* Reprise du comportement visuel de campagnes.html > Campagnes archivées */
.library-archives-card.campaign-archives {
  margin-top: 24px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: var(--blanc);
  box-shadow: var(--ombre);
  overflow: visible;
  position: relative;
  z-index: 5;
  isolation: auto;
}

.library-archives-card.campaign-archives > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
}

.library-archives-card.campaign-archives > summary::-webkit-details-marker {
  display: none;
}

.library-archives-card.campaign-archives > summary span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.1;
  font-size: .95rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.library-archives-card.campaign-archives > summary span::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  border-radius: 999px;
  background: #F1F5F9;
  transition: background .18s ease;
}

.library-archives-card.campaign-archives > summary span::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 5px;
  top: 50%;
  border-right: 2px solid var(--texte-secondaire);
  border-bottom: 2px solid var(--texte-secondaire);
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
  transition: transform .18s ease, border-color .18s ease;
}

.library-archives-card.campaign-archives[open] > summary span::before {
  background: var(--couleur-primaire-clair);
}

.library-archives-card.campaign-archives[open] > summary span::after {
  border-color: var(--couleur-primaire);
  transform: translateY(-60%) rotate(45deg);
}

.library-archives-card.campaign-archives > summary small {
  color: var(--texte-secondaire);
  font-size: .82rem;
  text-align: right;
}

.library-archives-card.campaign-archives[open] > summary {
  border-bottom: 1px solid var(--gris-200);
}

/* ============================================================
   Bibliothèque V4 — édition des modèles simples
   ============================================================ */
.library-card-menu__panel a {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: .85rem;
  color: var(--texte-principal);
  cursor: pointer;
}

.library-card-menu__panel a:hover {
  background: var(--gris-100);
}

.library-edit-modal .builder-modal__panel {
  width: min(100%, 820px);
}

.library-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.library-edit-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.library-edit-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--gris-100);
  font-size: .86rem;
  font-weight: 600;
  color: var(--texte-principal);
}


.library-edit-options__note {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--gris-100);
  font-size: .86rem;
  font-weight: 600;
  color: var(--texte-secondaire);
}

.library-edit-help {
  padding: 10px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--gris-100);
  color: var(--texte-secondaire);
  font-size: .84rem;
  font-weight: 600;
}

.library-notice-preview {
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
  padding: 14px 16px;
}

.library-notice-preview strong {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-secondaire);
  margin-bottom: 6px;
}

.library-notice-preview p {
  color: var(--texte-principal);
  font-size: .9rem;
}

@media (max-width: 760px) {
  .library-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Bibliothèque V7 — menus JS fiables + responsive mobile global
   ============================================================ */
.mobile-topbar,
.mobile-bottom-nav,
.mobile-nav-overlay,
.mobile-sidebar-close {
  display: none;
}

.library-card-menu {
  position: relative;
  flex-shrink: 0;
}

.library-card-menu__panel[hidden] {
  display: none !important;
}

.library-card-menu.is-open {
  z-index: 1200;
}

.library-card:has(.library-card-menu.is-open),
.library-card.is-menu-open {
  z-index: 1190;
}

.library-card-menu__panel {
  z-index: 1210;
}

.library-card-menu .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.library-card-menu .icon-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  transform: translateY(-1px);
  letter-spacing: .06em;
  margin-left: .06em;
}

.library-archive-list {
  margin-top: 0;
}

.library-archive-list .campagne-card--archive {
  box-shadow: none;
}

.library-archive-row__actions {
  display: flex;
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    display: block;
    padding: 0;
    padding-bottom: 72px;
    min-height: 100vh;
  }

  .layout {
    display: block;
    width: 100%;
    min-height: 100vh;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    background: var(--blanc);
    border-bottom: 1px solid var(--gris-200);
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
  }

  .mobile-topbar__menu {
    width: 38px;
    height: 38px;
    border: 1px solid var(--gris-200);
    border-radius: var(--rayon);
    background: var(--blanc);
    color: var(--texte-principal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .mobile-topbar__menu svg {
    width: 20px;
    height: 20px;
  }

  .mobile-topbar__title {
    min-width: 0;
    font-weight: 800;
    color: var(--texte-principal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 320px);
    min-width: 0;
    height: 100dvh;
    max-height: none;
    z-index: 1300;
    border-radius: 0 var(--rayon-xl) var(--rayon-xl) 0;
    transform: translateX(-108%);
    transition: transform .22s ease;
    box-shadow: 12px 0 40px rgba(15,23,42,.32);
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .mobile-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    /* ── ELLE ÉTAIT BLANCHE SUR FOND BLANC ─────────────────────────────
       Bordure, fond et texte en blanc translucide : hérités d'un menu sombre
       que le produit n'a plus. La croix était rendue, cliquable, et
       INVISIBLE — le pire des trois états, parce qu'on ne la cherche même
       pas.

       Elle reprend les couleurs du menu qu'elle habite. */
    border: 1px solid var(--gris-200);
    border-radius: 999px;
    background: var(--blanc);
    color: var(--texte-secondaire);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(15,23,42,.44);
    z-index: 1200;
  }

  .mobile-nav-overlay[hidden] {
    display: none !important;
  }

  .contenu {
    width: 100%;
    padding: 20px 14px 88px;
    overflow: visible;
  }

  .page,
  .page--bibliotheque,
  .page--fiche-campagne,
  .page--dossier {
    max-width: 100%;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    min-height: 56px;
    padding: 6px;
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--gris-200);
    box-shadow: 0 14px 34px rgba(15,23,42,.20);
    backdrop-filter: blur(12px);
  }

  .mobile-bottom-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    border-radius: 15px;
    color: var(--texte-secondaire);
    transition: background .15s, color .15s;
  }

  .mobile-bottom-nav__link svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.2;
  }

  .mobile-bottom-nav__link:hover,
  .mobile-bottom-nav__link.is-active {
    color: var(--couleur-primaire);
    background: var(--couleur-primaire-clair);
  }

  .library-toolbar,
  .dossiers-sticky-zone,
  .campaign-toolbar,
  .carte--filtres,
  .sticky-filters {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  .library-card-menu__panel {
    right: 0;
    width: min(230px, calc(100vw - 44px));
  }
}

@media (max-width: 560px) {
  .mobile-bottom-nav {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .mobile-bottom-nav__link svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================
   PATCH V8 — archives campagnes / bibliothèque
   Titres normalisés et actions alignées
   ============================================================ */
.campaign-archives .campagne-card--archive .campagne-card__topline h2,
.campaign-archives .campagne-card--archive .campagne-card__topline h3,
.library-archive-list .campagne-card--archive .campagne-card__topline h2,
.library-archive-list .campagne-card--archive .campagne-card__topline h3 {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  margin: 0;
  color: var(--texte-principal);
}

.campaign-archives .campagne-card--archive {
  min-height: auto;
  padding: 16px 18px;
}

.library-archive-list .campagne-card--archive {
  padding: 22px 24px;
  align-items: center;
  column-gap: 18px;
}

.library-archive-row .campagne-card__main {
  min-width: 0;
}

.library-archive-row .campagne-card__topline {
  gap: 10px;
}

.library-archive-row__actions {
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
  margin-left: 16px;
  padding-right: 2px;
}

.library-archive-row__actions .btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .library-archive-row {
    align-items: stretch;
  }

  .library-archive-row__actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ============================================================
   Bibliothèque V8 — simplification : sections / champs / documents / notices
   + fiche-bibliotheque dédiée aux sections réutilisables
   ============================================================ */
.btn--danger-outline {
  background: #FFFFFF;
  color: #B91C1C;
  border: 1px solid #FECACA;
}
.body--fiche-bibliotheque .contenu {
  overflow: visible;
}
.page--fiche-bibliotheque {
  gap: 20px;
}
.section-model-hero .campaign-sheet-hero__actions {
  align-items: center;
}
.library-model-notice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--rayon-lg);
  color: var(--texte-principal);
}
.library-model-notice__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--couleur-primaire);
  color: #FFFFFF;
  font-weight: 800;
  font-family: Georgia, serif;
}
.library-model-notice strong {
  display: block;
  font-size: .95rem;
}
.library-model-notice p {
  margin-top: 3px;
  color: var(--texte-secondaire);
  font-size: .88rem;
}
.section-model-recap__grid .campaign-recap-item strong {
  font-size: 1.45rem;
}
.section-model-tabs .campaign-tabs__nav {
  top: 12px;
}
.section-model-builder-head {
  margin-bottom: 18px;
}
.section-model-builder {
  grid-template-columns: 260px minmax(0, 1fr);
}
.section-model-aside .form-section-pill {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.section-model-aside-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px dashed var(--gris-200);
  border-radius: var(--rayon);
  background: #FFFFFF;
}
.section-model-aside-note strong {
  font-size: .82rem;
  color: var(--texte-principal);
}
.section-model-aside-note span {
  font-size: .78rem;
  color: var(--texte-secondaire);
}
.section-model-settings {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: #F8FAFC;
  margin-bottom: 16px;
}
.library-model-subhead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 4px 0 12px;
  padding-top: 2px;
}
.library-model-subhead strong,
.library-model-subhead span {
  display: block;
}
.library-model-subhead strong {
  font-size: .9rem;
  font-weight: 800;
}
.library-model-subhead span {
  color: var(--texte-secondaire);
  font-size: .82rem;
  margin-top: 2px;
}
.section-model-fields .form-field-builder-item {
  grid-template-columns: 18px minmax(0, 1fr) auto 34px;
  display: grid;
}
.section-model-fields .form-field-builder-item > div {
  min-width: 0;
}
.section-model-fields .field-menu-btn {
  justify-self: end;
}
.builder-switch-row--muted {
  opacity: .82;
  background: #F8FAFC;
}
.builder-switch-row--muted input {
  cursor: not-allowed;
}
.library-model-variant-note {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #BFDBFE;
  border-radius: var(--rayon-lg);
  background: #EFF6FF;
}
.library-model-variant-note strong {
  display: block;
  color: var(--texte-principal);
  font-size: .9rem;
}
.library-model-variant-note p {
  margin-top: 4px;
  color: var(--texte-secondaire);
  font-size: .86rem;
}
.library-model-list {
  display: grid;
  gap: 10px;
}
.library-model-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #FFFFFF;
}
.library-model-list-item strong,
.library-model-list-item span {
  display: block;
}
.library-model-list-item span {
  margin-top: 2px;
  color: var(--texte-secondaire);
  font-size: .8rem;
}
.library-toolbar select option[value="formulaire"] {
  display: none;
}

@media (max-width: 1100px) {
  .section-model-builder {
    grid-template-columns: 1fr;
  }
  .section-model-aside {
    position: static;
  }
}
@media (max-width: 760px) {
  .section-model-hero .campaign-sheet-hero__actions,
  .library-model-subhead,
  .library-model-list-item {
    align-items: stretch;
    flex-direction: column;
  }
  .section-model-fields .form-field-builder-item {
    grid-template-columns: 18px minmax(0, 1fr) 34px;
  }
  .section-model-fields .form-field-builder-item .tag {
    grid-column: 2 / 3;
    justify-self: flex-start;
  }
  .section-model-recap__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
   Bibliothèque V9 — simplification fiche section
   ============================================================ */
@media (min-width: 761px) {
  .library-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.section-edit-card {
  display: grid;
  gap: 22px;
}

.section-edit-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gris-200);
}

.section-edit-intro h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.section-edit-intro p {
  margin-top: 4px;
  font-size: .9rem;
  color: var(--texte-secondaire);
}

.section-edit-grid .champ--wide {
  grid-column: 1 / -1;
}

.section-condition-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #F8FAFC;
  color: var(--texte-secondaire);
  font-size: .86rem;
}

.section-condition-note strong {
  color: var(--texte-principal);
  font-size: .9rem;
}

.section-fields-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
}

.section-fields-head h3 {
  font-size: .95rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.section-fields-head p {
  margin-top: 3px;
  font-size: .84rem;
  color: var(--texte-secondaire);
}

.section-fields-list {
  display: grid;
  gap: 10px;
}

.section-field-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #FFFFFF;
}

.section-field-row--muted {
  background: #F8FAFC;
}

.section-field-row strong,
.section-field-row span {
  display: block;
}

.section-field-row strong {
  font-size: .9rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.section-field-row span {
  margin-top: 2px;
  font-size: .8rem;
  color: var(--texte-secondaire);
}

.section-edit-actions-mobile {
  display: none;
}

.body--fiche-bibliotheque .campaign-sheet-hero {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .section-edit-grid {
    grid-template-columns: 1fr;
  }
  .section-edit-intro,
  .section-fields-head {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .section-field-row {
    grid-template-columns: 18px minmax(0, 1fr) 34px;
  }
  .section-field-row .tag {
    grid-column: 2 / 3;
    justify-self: flex-start;
  }
}

/* ============================================================
   Fiche Bibliothèque v4 — édition directe des champs de section
   ============================================================ */
.body--fiche-bibliotheque .section-edit-intro {
  align-items: flex-start;
}

.body--fiche-bibliotheque .section-field-row.form-field-builder-item {
  cursor: pointer;
}

.body--fiche-bibliotheque .section-field-row.form-field-builder-item:hover {
  border-color: #BFDBFE;
  background: #F8FBFF;
}

.body--fiche-bibliotheque .section-field-row .field-menu-btn {
  justify-self: end;
}

.section-field-bottom-actions {
  justify-content: flex-start;
  margin-top: 4px;
}

.field-condition-static-note {
  margin-top: 2px;
  padding: 11px 13px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: #F8FAFC;
  color: var(--texte-secondaire);
  font-size: .86rem;
}

.field-condition-static-note strong {
  color: var(--texte-principal);
  font-weight: 800;
}


/* ============================================================
   Journal d’activité — v1
   ============================================================ */
.body--journal-activite .page--journal-activite {
  gap: 18px;
}

@media (min-width: 1025px) {
  .body--journal-activite .contenu {
    overflow: visible;
  }
}

.journal-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.journal-hero__main {
  min-width: 0;
}

.journal-hero__kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--couleur-primaire);
}

.journal-hero__titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.journal-hero__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.journal-filter-card {
  padding: 18px;
  z-index: 5;
}

.journal-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1.7fr) repeat(4, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.journal-reset {
  height: 42px;
  align-self: end;
  white-space: nowrap;
}

.journal-results-line {
  font-size: .86rem;
  color: var(--texte-secondaire);
  padding: 0 2px;
}

.journal-results-line strong {
  color: var(--texte-principal);
}

.journal-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.journal-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journal-day > h2 {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  padding-left: 2px;
}

.journal-day__items {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.journal-entry {
  display: grid;
  transition: background .15s ease;
}

.journal-entry:last-child {
  border-bottom: none;
}

.journal-entry:hover {
  background: #F8FBFF;
}

.journal-entry__time {
  font-size: .78rem;
  font-weight: 700;
  color: var(--texte-secondaire);
  white-space: nowrap;
}

.journal-entry__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  border: 1px solid currentColor;
  background: var(--gris-100);
  color: var(--texte-secondaire);
}

.journal-entry__icon--dossiers { color: var(--couleur-primaire); background: #EFF6FF; }
.journal-entry__icon--campagnes { color: #7C3AED; background: #F5F3FF; }
.journal-entry__icon--formulaires { color: #0F766E; background: #ECFDF5; }
.journal-entry__icon--documents { color: #C2410C; background: #FFF7ED; }
.journal-entry__icon--bibliotheque { color: #4338CA; background: #EEF2FF; }
.journal-entry__icon--systeme { color: #475569; background: #F8FAFC; }

.journal-entry__body {
  min-width: 0;
}

.journal-entry__topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.journal-entry__actor {
  font-size: .78rem;
  color: var(--texte-secondaire);
}

.journal-entry p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .94rem;
  color: var(--texte-principal);
}

.journal-entry__text {
  min-width: 0;
}

.journal-entry__meta {
  font-size: .8rem;
  color: var(--texte-secondaire);
  margin-top: 3px;
}

.journal-entry__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texte-secondaire);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.journal-entry__link:hover {
  color: var(--couleur-primaire);
  text-decoration: underline;
}

.journal-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 650;
  border: 1px solid transparent;
}

.journal-badge--dossiers { color: var(--couleur-primaire); background: #EFF6FF; border-color: #BFDBFE; }
.journal-badge--campagnes { color: #6D28D9; background: #F5F3FF; border-color: #DDD6FE; }
.journal-badge--formulaires { color: #0F766E; background: #ECFDF5; border-color: #A7F3D0; }
.journal-badge--documents { color: #C2410C; background: #FFF7ED; border-color: #FED7AA; }
.journal-badge--bibliotheque { color: #4338CA; background: #EEF2FF; border-color: #C7D2FE; }
.journal-badge--systeme { color: #475569; background: #F8FAFC; border-color: var(--gris-200); }

.journal-empty {
  color: var(--texte-secondaire);
  text-align: center;
}

@media (min-width: 1025px) {
  .journal-filter-card {
    position: sticky !important;
    top: 12px;
    z-index: 30;
  }
}

@media (max-width: 1320px) {
  .journal-filters {
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(130px, 1fr));
  }

  .journal-reset {
    width: fit-content;
  }
}

@media (max-width: 900px) {
  .journal-hero {
    flex-direction: column;
  }

  .journal-hero__actions,
  .journal-hero__actions .btn {
    width: 100%;
  }

  .journal-filters {
    grid-template-columns: 1fr;
  }

  .journal-reset {
    width: 100%;
  }

  .journal-entry__link {
    grid-column: 2 / 3;
    justify-content: flex-start;
  }

  .journal-entry__time,
  .journal-entry__body,
  .journal-entry__link {
    grid-column: auto;
  }

  .journal-entry__icon {
    display: none;
  }
}

/* ============================================================
   Journal d’activité — v3 : chips sous le titre + chargement progressif
   ============================================================ */
.journal-entry p {
  display: block;
  margin: 0;
  font-size: .94rem;
  line-height: 1.35;
  color: var(--texte-principal);
}

.journal-entry__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.journal-entry__chips .journal-badge,
.journal-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1;
  border: 1px solid var(--gris-200);
  background: #F8FAFC;
  color: var(--texte-secondaire);
}

.journal-entry__meta {
  display: none;
}

.journal-loadmore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--texte-secondaire);
  font-size: .84rem;
}

.journal-loadmore__meta strong {
  color: var(--texte-principal);
}

.journal-loadmore__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.journal-page-size {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: .8rem;
  color: var(--texte-secondaire);
}

.journal-page-size select {
  min-height: 34px;
  border: 1px solid var(--gris-200);
  border-radius: 10px;
  padding: 0 26px 0 10px;
  background: #F8FAFC;
  color: var(--texte-principal);
  font-weight: 650;
}

.journal-loadmore__button {
  min-height: 34px;
  padding: 8px 12px;
  font-size: .8rem;
}

@media (max-width: 900px) {
  .journal-loadmore {
    align-items: flex-start;
    flex-direction: column;
  }

  .journal-loadmore__actions,
  .journal-loadmore__button,
  .journal-page-size {
    width: 100%;
  }

  .journal-page-size {
    justify-content: space-between;
  }

  .journal-page-size select,
  .journal-loadmore__button {
    width: 100%;
  }
}

/* =========================================================
   PATCH JOURNAL ACTIVITÉ V4 — module en chip, contexte en texte
   ========================================================= */
.journal-entry__chips {
  gap: 8px;
  align-items: center;
}

.journal-entry__chips .journal-badge {
  flex: 0 0 auto;
}

.journal-entry__details {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

@media (max-width: 640px) {
  .journal-entry__chips {
    align-items: flex-start;
  }

  .journal-entry__details {
    display: block;
    width: 100%;
  }
}


/* =========================================================
   PATCH JOURNAL ACTIVITÉ V5 — timeline avec point module
   ========================================================= */
.journal-day__items {
}

.journal-entry::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 34px;
  bottom: -1px;
  width: 1px;
  background: var(--gris-200);
}

.journal-entry[data-module="dossiers"] {
  --journal-accent: var(--couleur-primaire);
  --journal-accent-soft: #DBEAFE;
}

.journal-entry[data-module="campagnes"] {
  --journal-accent: #6D28D9;
  --journal-accent-soft: #E9D5FF;
}

.journal-entry[data-module="formulaires"] {
  --journal-accent: #0F766E;
  --journal-accent-soft: #A7F3D0;
}

.journal-entry[data-module="documents"] {
  --journal-accent: #C2410C;
  --journal-accent-soft: #FED7AA;
}

.journal-entry[data-module="bibliotheque"] {
  --journal-accent: #4338CA;
  --journal-accent-soft: #C7D2FE;
}

.journal-entry[data-module="systeme"] {
  --journal-accent: #475569;
  --journal-accent-soft: #CBD5E1;
}

/* ── L'ACTE FAIT PENDANT UNE INTERVENTION SUPPORT (lot 15d, 16/08/2026) ────
   Elle se voit sans crier : c'est une PRÉCISION DE PROVENANCE, pas une alerte.
   Un acte du support n'est ni suspect ni fautif — il doit seulement être
   identifiable, parce que c'est la promesse faite au ministère.

   Le liseré à gauche suffit : il rattache la mention à sa ligne sans lui
   donner le poids d'un avertissement. */
.journal-entry__support {
  margin: 4px 0 0;
  padding-left: 8px;
  border-left: 2px solid var(--gris-300, #CBD5E1);
  font-size: .78rem;
  color: var(--texte-secondaire);
}

.journal-entry__date {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--texte-secondaire);
  font-weight: 500;
}

.journal-entry__chips {
  margin-top: 9px;
}

@media (max-width: 900px) {
}

@media (max-width: 600px) {
  .journal-entry {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 0 10px;
  }

  .journal-entry::before {
    display: block;
    margin-top: 4px;
  }

  .journal-entry::after {
    left: 22px;
  }

  .journal-entry__body,
  .journal-entry__link {
    grid-column: 2 / 3;
  }
}

/* =========================================================
   PATCH JOURNAL ACTIVITÉ V6 — timeline dashboard + couleurs modules
   ========================================================= */
.journal-day__items {
  position: relative;
  overflow: hidden;
}

.journal-day__items::before {
  content: "";
  position: absolute;
  left: 33px;
  top: 33px;
  bottom: 33px;
  width: 1px;
  background: var(--gris-200);
  z-index: 0;
}

.journal-entry {
  position: relative;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 0 14px;
  padding: 18px 18px;
  border-bottom: 0 !important;
  --journal-module-color: #64748B;
  --journal-module-ring: #CBD5E1;
  --journal-module-soft: #F8FAFC;
  --journal-module-text: #475569;
}

.journal-entry::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 30px;
  height: 30px;
  margin-top: 0;
  border-radius: 999px;
  background: var(--journal-module-color);
  border: 2px solid var(--journal-module-ring);
  box-shadow: inset 0 0 0 8px #FFFFFF;
  z-index: 2;
}

.journal-entry::after {
  display: none !important;
}

.journal-entry[data-module="dossiers"] {
  --journal-module-color: #2563EB;
  --journal-module-ring: #BFDBFE;
  --journal-module-soft: #EFF6FF;
  --journal-module-text: #1D4ED8;
}

.journal-entry[data-module="campagnes"] {
  --journal-module-color: #7C3AED;
  --journal-module-ring: #DDD6FE;
  --journal-module-soft: #F5F3FF;
  --journal-module-text: #6D28D9;
}

.journal-entry[data-module="formulaires"] {
  --journal-module-color: #0F766E;
  --journal-module-ring: #99F6E4;
  --journal-module-soft: #F0FDFA;
  --journal-module-text: #0F766E;
}

.journal-entry[data-module="documents"] {
  --journal-module-color: #D97706;
  --journal-module-ring: #FDE68A;
  --journal-module-soft: #FFFBEB;
  --journal-module-text: #B45309;
}

.journal-entry[data-module="bibliotheque"] {
  --journal-module-color: #4F46E5;
  --journal-module-ring: #C7D2FE;
  --journal-module-soft: #EEF2FF;
  --journal-module-text: #4338CA;
}

.journal-entry[data-module="systeme"] {
  --journal-module-color: #64748B;
  --journal-module-ring: #CBD5E1;
  --journal-module-soft: #F8FAFC;
  --journal-module-text: #475569;
}

.journal-entry__body {
  grid-column: 2;
  padding-top: 1px;
}

.journal-entry__chips .journal-badge {
  background: var(--journal-module-soft) !important;
  border-color: var(--journal-module-ring) !important;
  color: var(--journal-module-text) !important;
  opacity: 1;
}

.journal-entry__link {
  grid-column: 3;
  align-self: start;
  margin-top: 1px;
}

@media (max-width: 900px) {
  .journal-day__items::before {
    left: 33px;
  }

  .journal-entry {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .journal-entry__body,
  .journal-entry__link {
    grid-column: 2 / 3;
  }

  .journal-entry__link {
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .journal-day__items::before {
    left: 31px;
  }

  .journal-entry {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 0 10px;
    padding: 22px 24px;
  }

  .journal-entry::before {
    width: 26px;
    height: 26px;
    box-shadow: inset 0 0 0 7px #FFFFFF;
  }
}

/* =========================================================
   PATCH JOURNAL ACTIVITÉ V8 — trait timeline uniquement entre les points
   ========================================================= */
.journal-day__items::before {
  display: none !important;
}

.journal-entry:not(:last-child)::after {
  content: "";
  display: block !important;
  position: absolute;
  left: 33px;
  top: 48px;
  bottom: -18px;
  width: 1px;
  background: var(--gris-200);
  z-index: 0;
}

.journal-entry:last-child::after {
  display: none !important;
}

@media (max-width: 900px) {
  .journal-entry:not(:last-child)::after {
    left: 33px;
  }
}

@media (max-width: 600px) {
  .journal-entry:not(:last-child)::after {
    left: 31px;
    top: 42px;
    bottom: -16px;
  }
}

/* =========================================================
   PATCH FICHE CAMPAGNE — onglet Notices en documents téléchargeables
   ========================================================= */
.notice-helper-card {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--gris-200);
  border-radius: 14px;
  background: var(--gris-50, #F8FAFC);
}

.notice-helper-card .champ {
  margin: 0;
}

.notice-helper-card p {
  margin: 8px 0 0;
  color: var(--texte-secondaire);
  font-size: .86rem;
}

.campaign-notice-list .campaign-notice-item .doc-item__body small {
  display: block;
  margin-top: 4px;
  color: var(--texte-secondaire);
  font-size: .82rem;
  line-height: 1.35;
}

.campaign-notice-list .campaign-document-item {
  align-items: flex-start;
}

@media (max-width: 720px) {
  .notice-helper-card {
    padding: 14px;
  }
}

/* ── Patch V1.1 : création / édition manuelle des dossiers ───────── */
.champ-grid {
  display: grid;
  gap: 14px;
}

.champ-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.champ__aide {
  margin: 2px 0 0;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--texte-secondaire);
}

.champ__aide--warning {
  color: #C2410C;
  font-weight: 700;
}

@media (max-width: 720px) {
  .champ-grid--two {
    grid-template-columns: 1fr;
  }
}

/* ── Patch V1.1.1 : modales au-dessus des filtres sticky dossiers ───────── */
.modal-overlay {
  z-index: 1200;
}

.modal-card {
  position: relative;
  z-index: 1;
}


/* ── Patch V1.1.2 : édition des infos famille directement par section ───────── */
.carte-detail.is-editing {
  border-color: rgba(37, 99, 235, .28);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.champ-lecture--edition {
  align-items: center;
}

.champ-lecture__input {
  min-width: 0;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-sm);
  padding: 9px 11px;
  font: inherit;
  color: var(--texte-principal);
  background: var(--blanc);
}

.champ-lecture__input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, .55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.edition-section-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-200);
  display: grid;
  gap: 14px;
}

.edition-section-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.empty-note {
  color: var(--texte-secondaire);
  font-size: .875rem;
}

.empty-panel {
  background: var(--blanc);
  border: 1px dashed var(--gris-200);
  border-radius: var(--rayon-lg);
  padding: 18px;
  color: var(--texte-secondaire);
}

.recent__placeholder {
  color: var(--texte-secondaire);
  font-size: .82rem;
}



/* ============================================================
   Patch V2 — navigation réelle + logout sidebar + placeholders
   ============================================================ */

.sidebar__bottom {
  margin-top: auto;
  border-top: 1px solid var(--gris-200);
  padding-top: 8px;
}

.sidebar__lien--logout {
  color: var(--texte-secondaire);
}

.sidebar__lien--logout:hover {
  background: var(--couleur-sidebar-hover);
  color: var(--texte-principal);
}

.page__entete {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page__entete--avec-actions,
.page__entete--campagnes {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page__titre {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--texte-principal);
}

.page__sous-titre {
  margin-top: 6px;
  color: var(--texte-secondaire);
  font-size: .95rem;
}

.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.carte--compacte {
  padding: 20px;
}

.page-callout {
  margin-bottom: 18px;
}

.section-dashboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.empty-panel,
.tableau-empty {
  color: var(--texte-secondaire);
  font-size: .92rem;
  padding: 8px 0;
}

.table-row-link {
  cursor: pointer;
}

.tableau-primary-link a {
  font-weight: 700;
  color: var(--texte-principal);
}

.retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--couleur-primaire);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.detail-hero {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.detail-list,
.detail-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-list > div,
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gris-200);
}

.detail-list > div:last-child,
.detail-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-list strong,
.detail-item strong {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texte-secondaire);
}

.detail-list span,
.detail-item span {
  color: var(--texte-principal);
}

@media (max-width: 1200px) {
  .info-grid,
  .detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  body {
    padding: 0;
  }

  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    border-radius: 0;
    position: relative;
  }

  .contenu {
    padding: 24px 18px;
  }

  .page__entete,
  .page__entete--avec-actions,
  .page__entete--campagnes,
  .detail-hero,
  .section-dashboard__head {
    flex-direction: column;
    align-items: stretch;
  }

  .info-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   Dossier detail — patch ciblé fidèle à la maquette
   ============================================================ */

.field-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  vertical-align: middle;
}

.field-flag--required {
  color: #B45309;
}

.field-flag--admin {
  color: var(--couleur-primaire);
}

.section-edit-form {
  margin-top: 14px;
  display: grid;
  gap: 14px;
}

.section-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.section-edit-fields {
  display: grid;
  gap: 14px;
}

.section-edit-note {
  color: var(--texte-secondaire);
  font-size: .82rem;
}

.section-edit-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 2px;
}

.section-edit-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--texte-principal);
}

.section-edit-option input {
  margin: 0;
}

.champ-lecture__input {
  width: 100%;
}

.champ-lecture__input--textarea {
  min-height: 120px;
  resize: vertical;
}

.btn-icon-document.is-disabled,
.btn-icon-document:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.document-action-form {
  margin: 0;
}

.toast__action + .toast__close {
  margin-left: 2px;
}

@media (max-width: 860px) {
  .section-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Lot marquage accessible : menu d'actions de ligne + contrôles fiche
   ════════════════════════════════════════════════════════════════════════ */

/* Cellule d'actions en fin de ligne (liste dossiers) */
.cellule-actions {
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
.row-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--rayon-sm);
  background: transparent;
  color: var(--gris-400);
  cursor: pointer;
  vertical-align: middle;
}
.row-menu-trigger:hover,
.row-menu-trigger[aria-expanded="true"] {
  background: var(--gris-100);
  color: var(--texte-principal);
  border-color: var(--gris-200);
}

/* Popup du menu de ligne (calqué sur .status-menu) */
/* ── LE MENU FLOTTANT SUIT LA FENÊTRE (lot 51a, 17/08/2026) ────────────────
   Philippe, en recette : « au milieu de la liste, le menu s'affiche nulle
   part ; un peu plus bas, il s'affiche tout en haut de la page ».

   La cause était un désaccord entre deux couches. « placerMenuFlottant »
   calcule avec « getBoundingClientRect() », qui rend des coordonnées relatives
   à la FENÊTRE. Un élément en « absolute » les interprète par rapport au
   DOCUMENT : l'écart vaut exactement la hauteur de défilement.

   En haut de page, le défilement est nul et tout allait bien. C'est pourquoi
   le défaut ne se voyait qu'en descendant.

   ── LE MENU DES PASTILLES ÉTAIT DÉJÀ EN « FIXED » ────────────────────────

   Le produit avait raison ailleurs : « #pill-menu-popover » porte « fixed », et
   son commentaire JavaScript le dit — « on utilise les coordonnées viewport,
   sans ajouter le défilement ». Celui-ci ne l'avait jamais reçu.

   UN CALCUL EN COORDONNÉES DE FENÊTRE EXIGE UN ÉLÉMENT FIXE. */
.row-menu {
  position: fixed;
  z-index: 40;
}
.row-menu__panel {
  min-width: 240px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md);
  padding: 8px;
}
.row-menu__item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--rayon-sm);
  font-size: .875rem;
  color: var(--texte-principal);
  cursor: pointer;
}
.row-menu__item:hover {
  background: var(--couleur-primaire-clair);
}

/* Tag « À reprendre » de la liste : couleur dédiée (bleu info) — jusque-là gris générique */
.tag--reprise {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}

/* Fiche : pastilles de marquage cliquables dans la ligne du titre (relance / reprise) */
.marker-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  border: 1px dashed var(--gris-400);
  background: transparent;
  color: var(--texte-secondaire);
}
.marker-pill::before { content: "+"; font-weight: 700; opacity: .65; }
.marker-pill.is-on::before { content: "✓"; opacity: 1; }
.marker-pill:hover { border-color: var(--texte-secondaire); color: var(--texte-principal); }
.marker-pill:disabled { opacity: .55; cursor: default; }
/* État posé : relance = orange (comme tag--warn), reprise = bleu (comme tag--reprise) */
.marker-pill--relance.is-on {
  border-style: solid;
  border-color: transparent;
  background: #FFF7ED;
  color: var(--badge-incomplet-texte);
}
.marker-pill--reprise.is-on {
  border-style: solid;
  border-color: transparent;
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire);
}


/* ==========================================================================
   ══ BLOC DE FINITION v2 · 9 août 2026 ═════════════════════════════════════
   Ajouté en fin de fichier, à supprimer d'un bloc pour revenir en arrière.
   Ne corrige que ce que les variables n'atteignent pas.
   ========================================================================== */

/* 1 · Le canevas. La barre est blanche, la page grise : le contraste vient
       du fond, plus d'une ombre portée. */
body { background: #F2F4F7; }

/* 2 · Zéro majuscule décorative. 28 règles du fichier en posaient ;
       les libellés se lisent en minuscules, comme le reste. */
.carte__titre,
thead th,
.dashboard-hero__kicker,
.dashboard-topline__eyebrow,
.dossier-hero__kicker,
.campaign-sheet-hero__kicker,
.journal-hero__kicker,
.library-hero__kicker,
.campagne-focus-card__eyebrow,
.campaign-modal__eyebrow,
.builder-modal__eyebrow,
.resume-campagnes__titre,
.section-dashboard__titre,
.resume-mini__label,
.export-menu__group-label,
.transfer-node__label,
.campaign-state-card__label,
.form-builder-sections__title,
.journal-day > h2,
.library-type,
.library-notice-preview strong,
.notice-editor-preview span,
.campaign-modal__fields span,
.campaign-source-panel span,
.campaign-create-form__field span,
.campaign-create-form__reuse span,
.champ--statut > span,
.champ__required,
.detail-list strong,
.detail-item strong {
  text-transform: none;
  letter-spacing: normal;
}

/* Les eyebrows perdent leur bleu : ils annoncent, ils n'appellent pas. */
.dashboard-hero__kicker,
.dashboard-topline__eyebrow,
.dossier-hero__kicker,
.campaign-sheet-hero__kicker,
.journal-hero__kicker,
.library-hero__kicker,
.campagne-focus-card__eyebrow,
.campaign-modal__eyebrow,
.builder-modal__eyebrow {
  color: var(--texte-secondaire);
  font-weight: 500;
  font-size: .8125rem;
}

/* En-têtes de tableau : lisibles, discrets, non criés. */
thead th {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--texte-secondaire);
}

/* 3 · Ombres décoratives résiduelles. Les ombres de FOCUS sont conservées :
       elles sont le seul repère au clavier. */
.btn--primaire,
.btn--primaire:hover,
.campaign-modal__card,
.builder-modal__panel,
.publish-modal__panel,
.modal-card,
.campaign-card--new,
.timeline-admin__point,
.mobile-topbar,
.mobile-bottom-nav,
.export-menu[open] .export-menu__trigger,
.status-chip-trigger:hover .badge {
  box-shadow: none;
}

/* 4 · L'action principale passe en encre. Un seul aplat par écran, et il ne
       se bagarre jamais avec la couleur d'un établissement. */
.btn--primaire {
  background: #272C34;
  border-color: #272C34;
  color: #FFFFFF;
}
.btn--primaire:hover {
  background: #3C434E;
  border-color: #3C434E;
}

/* 5 · Le badge de la barre latérale : l'ancien était blanc sur fond sombre.
       Sélecteur renforcé, le calque d'admin_layout.php le déclare aussi. */
.sidebar .sidebar__badge {
  background: #ECEEF1;
  color: var(--texte-secondaire);
  box-shadow: none;
}
.sidebar .sidebar__lien.actif .sidebar__badge {
  background: #D7E0EE;
  color: var(--couleur-primaire);
}

/* 6 · Les bleus écrits en dur. Le fichier porte 21 rgba(29,78,216) et
       rgba(37,99,235) hérités de l'ancien accent : ils ne suivent pas le
       jeton. Repris ici dans la nouvelle teinte, sinon le champ au focus
       aurait une bordure marine et un halo électrique. */
.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.bulk-actions__field select:focus,
.commentaire-zone textarea:focus,
.select-document-action:focus,
.champ-lecture__input:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(46, 82, 136, .16);
}
.btn-icon-document:hover,
.export-menu[open] .export-menu__trigger {
  box-shadow: 0 0 0 3px rgba(46, 82, 136, .12);
}
.resume-dossier-card:focus-visible,
.form-field-builder-item:focus-visible {
  outline: 3px solid rgba(46, 82, 136, .22);
}
.resume-dossier-card.is-active {
  box-shadow: 0 0 0 1px var(--couleur-primaire);
}
#tab-infos:checked ~ .campaign-tabs__nav label[for="tab-infos"],
#tab-formulaire:checked ~ .campaign-tabs__nav label[for="tab-formulaire"],
#tab-documents:checked ~ .campaign-tabs__nav label[for="tab-documents"],
#tab-notices:checked ~ .campaign-tabs__nav label[for="tab-notices"],
#tab-transfert:checked ~ .campaign-tabs__nav label[for="tab-transfert"] {
  box-shadow: none;
}


/* 9 · Titres de section et de carte.
       Ils étaient en majuscules espacées et gris. Leur retirer la casse
       sans rien mettre à la place les avait aplatis au niveau du texte
       courant : « À traiter aujourd'hui », « Indicateurs clés »,
       « Dossiers récents » ne se lisaient plus comme des titres.
       Ils le redeviennent par la taille et l'encre, pas en criant. */
.section-dashboard__titre,
.resume-campagnes__titre,
.carte__titre,
.form-builder-sections__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte-principal);
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 12px;
}

/* Le sous-titre qui suit un titre de carte reste en retrait. */
.carte__titre + .carte__sous-titre,
.section-sous-titre {
  margin-top: -6px;
}


/* 10 · Le trait des surfaces, un cran plus soutenu.
        Bordure #E0E3E8 sur canevas #F5F6F8 : les cartes flottaient au lieu
        de se poser. Ciblé sur les conteneurs, pas sur le jeton --gris-200,
        qui sert aussi de fond à 17 endroits. */
.carte,
.carte-detail,
.tableau-wrapper,
.campagne-card,
.campagne-focus-card,
.library-card,
.notice-card,
.campaign-recap-card,
.notice-helper-card,
.piece-item,
.campaign-document-item,
.resume-dossier-card,
.campaign-state-card,
.campaign-side-card,
.section-edit-card,
.library-archives-card,
.journal-filter-card {
  border-color: #D6DAE1;
}

/* 11 · UN SEUL APLAT PAR ÉCRAN.
        La règle était posée, je ne l'avais pas fait respecter : Dossiers
        affichait quatre boutons noirs. L'aplat reste à l'action principale
        de la page et aux pieds de modale, où il est seul. Dans la barre
        d'actions groupées il redevient un contour — ces actions sont
        équivalentes entre elles, aucune ne mérite l'aplat. */
.bulk-actions .btn--primaire {
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  color: var(--texte-principal);
}
.bulk-actions .btn--primaire:hover {
  background: var(--gris-100);
  border-color: #D6DAE1;
  color: var(--texte-principal);
}

/* 12 · Les raccourcis « voir la suite » passent en accent : ce sont des
        départs vers un autre écran, pas des actions sur celui-ci. */
.section-dashboard__head .btn--secondaire {
  border-color: transparent;
  background: none;
  color: var(--couleur-primaire);
}
.section-dashboard__head .btn--secondaire:hover {
  background: var(--couleur-primaire-clair);
  border-color: transparent;
}




/* ==========================================================================
   13 · PAGES D'ACCÈS — connexion, mot de passe oublié, définir mot de passe
   --------------------------------------------------------------------------
   Ces trois pages ne chargeaient pas app.css du tout : elles portaient
   chacune ~110 lignes de CSS en dur et sont donc restées à l'ancienne
   charte. Elles la chargent désormais, et tout est ici.
   Portée limitée par .body--acces : aucune collision possible avec les
   9 300 lignes au-dessus.
   ========================================================================== */

.body--acces {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--gris-100);
}

.body--acces .login-card {
  width: 100%;
  max-width: 400px;
  background: var(--blanc);
  border: 1px solid #D6DAE1;
  border-radius: var(--rayon-lg);
  box-shadow: none;
  padding: 36px 32px;
}

.body--acces .login-logo {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--texte-principal);
  letter-spacing: -.01em;
}

.body--acces .login-subtitle {
  font-size: .9375rem;
  color: var(--texte-secondaire);
  margin: 2px 0 28px;
}

.body--acces .intro {
  font-size: .9375rem;
  color: var(--texte-secondaire);
  margin-bottom: 20px;
}

.body--acces .champ {
  margin-bottom: 16px;
}

.body--acces .champ label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--texte-principal);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 6px;
  display: block;
}

.body--acces input[type="email"],
.body--acces input[type="password"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #C9CDD5;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte-principal);
  font-size: .9375rem;
  transition: border-color .12s;
}

.body--acces input[type="email"]:hover,
.body--acces input[type="password"]:hover {
  border-color: var(--gris-400);
}

.body--acces input[type="email"]:focus,
.body--acces input[type="password"]:focus {
  outline: none;
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(46, 82, 136, .16);
}

/* L'aplat d'action : encre, et il est seul sur la page. */
.body--acces .btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 24px;
  border: 1px solid #272C34;
  border-radius: var(--rayon);
  background: #272C34;
  color: var(--blanc);
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}

.body--acces .btn-login:hover {
  background: #3C434E;
  border-color: #3C434E;
}

/* Message d'erreur : le trait ET le mot, jamais la couleur seule. */
.body--acces .error {
  padding: 10px 12px;
  margin-bottom: 20px;
  border: 1px solid var(--badge-refuse-bg);
  border-left: 3px solid var(--badge-refuse-texte);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--badge-refuse-bg);
  color: var(--badge-refuse-texte);
  font-size: .875rem;
}

.body--acces .notice {
  padding: 10px 12px;
  margin-bottom: 20px;
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--gris-400);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--gris-100);
  color: var(--texte-secondaire);
  font-size: .875rem;
}

.body--acces .forgot,
.body--acces .retour {
  margin-top: 20px;
  text-align: center;
  font-size: .875rem;
}

.body--acces .forgot a,
.body--acces .retour a {
  color: var(--couleur-primaire);
  text-decoration: none;
  font-weight: 500;
}

.body--acces .forgot a:hover,
.body--acces .retour a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   14 · COMPTES UTILISATEURS
   --------------------------------------------------------------------------
   La page portait ses 29 lignes dans un bloc <style> local, avec l'ancien
   bleu #1D4ED8 en dur sur ses boutons — d'où les deux boutons bleus qui
   restaient. Reprises ici, cadrées par .page--comptes.
   Aucune classe renommée : le HTML de la page ne bouge pas.
   ========================================================================== */

.page--comptes .comptes-grille {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.page--comptes .role-carte {
  background: var(--blanc);
  border: 1px solid #D6DAE1;
  border-radius: var(--rayon-lg);
  padding: 20px 22px;
}

.page--comptes .role-carte__tete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.page--comptes .role-carte__titre {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--texte-principal);
}

.page--comptes .role-carte__desc {
  font-size: .9375rem;
  color: var(--texte-secondaire);
  margin: 0 0 16px;
  line-height: 1.5;
  max-width: 62ch;
}

.page--comptes .role-carte__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.page--comptes .role-carte__email {
  font-weight: 500;
  color: var(--texte-principal);
  word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CARTE DES ADMINISTRATEURS, EN LISTE (lot 12w, 15/08/2026)

   Elle portait UN titulaire ; elle en porte plusieurs — un compte par personne
   physique, jamais de compte partagé. Chaque ligne dit qui, dans quel état, et
   ce qu'on peut faire.

   ── ELLE REPREND LA LIGNE EXISTANTE, elle n'en invente pas ────────────────

   « role-carte__ligne » est déjà un flex à ligne ; on lui ajoute une
   séparation entre comptes et pousse les gestes à droite. Une classe neuve qui
   redéfinirait la mise en page divergerait de sa sœur au premier ajustement.
   ══════════════════════════════════════════════════════════════════════════ */
.page--comptes .role-carte__ligne--compte {
  justify-content: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--gris-200);
}

/* LE PREMIER COMPTE SUIT LA DESCRIPTION : son trait ferait doublon avec elle. */
.page--comptes .role-carte__ligne--compte:first-of-type {
  border-top: 0;
}

/* LE NOM SOUS L'ADRESSE : c'est l'adresse qui identifie, le nom qui aide à
   reconnaître. L'un se lit, l'autre se cherche. */
.page--comptes .role-carte__ligne--compte .role-carte__email small {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--texte-secondaire);
}

/* LES GESTES À DROITE, sur une seule ligne : ils accompagnent le compte, ils
   ne le précèdent pas. */
.page--comptes .role-carte__gestes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.page--comptes .role-carte__gestes form {
  margin: 0;
}

/* LE MOTIF DU DERNIER ADMINISTRATEUR prend la place de son bouton absent :
   on retire le pouvoir, jamais l'information. */
.page--comptes .role-carte__hint--inline {
  font-style: italic;
  white-space: nowrap;
}

/* LA LISTE RESPIRE PLUS QUE LA CARTE SIMPLE : plusieurs comptes empilés
   demandent de l'air que deux lignes n'exigeaient pas. */
.page--comptes .role-carte--liste .role-invite {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-200);
}

.page--comptes .role-carte__meta,
.page--comptes .role-carte__hint {
  font-size: .8125rem;
  color: var(--texte-secondaire);
  line-height: 1.45;
}

.page--comptes .role-carte__hint { margin: 10px 0 0; }

.page--comptes .role-carte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.page--comptes .role-invite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* LE CONSEIL PASSE À LA LIGNE, sous le champ et son bouton : il les commente,
   il ne se dispute pas leur place. */
.page--comptes .role-invite__conseil {
  flex: 1 0 100%;
  margin: 6px 0 0;
}

/* LE LIBELLÉ PREND TOUTE LA LIGNE : le champ et son bouton se rangent en
   dessous, comme dans les autres cartes. Sans lui, les trois se disputaient
   la même ligne et le champ se réduisait à rien. */
.page--comptes .role-invite__libelle {
  flex: 1 0 100%;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--texte-secondaire);
}

.page--comptes .role-invite input[type="email"] {
  flex: 1 1 240px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #C9CDD5;
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte-principal);
  font-size: .9375rem;
}

.page--comptes .role-invite input[type="email"]:focus {
  outline: none;
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(46, 82, 136, .16);
}

/* Les états passent sur les quatre couleurs du système. */
.page--comptes .badge-etat {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--rayon-sm);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: normal;
}
.page--comptes .badge-etat--ok   { background: var(--badge-valide-bg);    color: var(--badge-valide-texte); }
.page--comptes .badge-etat--warn { background: var(--badge-incomplet-bg); color: var(--badge-incomplet-texte); }
.page--comptes .badge-etat--ko   { background: var(--badge-refuse-bg);    color: var(--badge-refuse-texte); }
.page--comptes .badge-etat--vous { background: var(--badge-encours-bg);   color: var(--badge-encours-texte); }

/* Les boutons rejoignent la grammaire du reste : l'aplat est en encre et
   il est seul par carte ; le neutre est un contour ; le danger reste
   en contour rouge. */
.page--comptes .btn-c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--texte-principal);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}
.page--comptes .btn-c:hover { background: var(--gris-100); }

.page--comptes .btn-c--primaire {
  background: #272C34;
  border-color: #272C34;
  color: var(--blanc);
}
.page--comptes .btn-c--primaire:hover {
  background: #3C434E;
  border-color: #3C434E;
}

.page--comptes .btn-c--neutre {
  background: var(--blanc);
  color: var(--texte-principal);
  border-color: var(--gris-200);
}
.page--comptes .btn-c--neutre:hover { background: var(--gris-100); }

.page--comptes .btn-c--danger {
  background: var(--blanc);
  color: var(--badge-refuse-texte);
  border-color: #F5C6C2;
}
.page--comptes .btn-c--danger:hover { background: var(--badge-refuse-bg); }


/* ==========================================================================
   15 · DOSSIERS — ex-bloc <style> de dossiers.php
   ========================================================================== */
.tag--doublon {
  background: var(--badge-incomplet-bg);
  color: var(--badge-incomplet-texte);
  border: 0;
}
.btn--bulk-delete {
  background: var(--blanc);
  color: var(--badge-refuse-texte);
  border: 1px solid #F5C6C2;
}
.btn--bulk-delete:hover {
  background: var(--badge-refuse-bg);
  color: var(--badge-refuse-texte);
  border-color: #F5C6C2;
}

/* ==========================================================================
   16 · FICHE DOSSIER — ex-blocs <style> de dossier-detail.php
   ========================================================================== */
.piece-files {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.piece-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--gris-100);
  border-radius: var(--rayon);
  font-size: .875rem;
  flex-wrap: wrap;
}
.piece-file__nom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--couleur-primaire);
  text-decoration: none;
  min-width: 0;
  word-break: break-all;
}
.piece-file__nom:hover { text-decoration: underline; }
.piece-file__meta {
  color: var(--texte-secondaire);
  font-size: .8125rem;
  flex: 1;
}
.piece-file__delete { margin-left: auto; display: inline-flex; }

.piece-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* Trait plein, pas pointillé : le pointillé annonce une zone de dépôt
   par glisser, ce qui n'est pas le cas ici. */
.piece-upload__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  font-size: .875rem;
  font-weight: 500;
  color: var(--texte-principal);
  background: var(--blanc);
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.piece-upload__btn:hover {
  background: var(--gris-100);
  border-color: #D6DAE1;
}
.piece-upload__hint {
  font-size: .8125rem;
  color: var(--texte-secondaire);
}
.piece-upload.is-busy { opacity: .55; pointer-events: none; }

.danger-zone {
  border: 1px solid #F5C6C2;
  background: var(--blanc);
  margin-top: 24px;
}
.danger-zone .section-titre { color: var(--badge-refuse-texte); }

/* ==========================================================================
   17 · EXPORTS ET ARCHIVES — ex-bloc <style> de exports.php
   ========================================================================== */
.exports-liste { display: flex; flex-direction: column; gap: 8px; }
.export-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--blanc);
  border: 1px solid #D6DAE1;
  border-radius: var(--rayon-lg);
  padding: 14px 16px;
}
.export-row__main { flex: 1 1 280px; min-width: 0; }
.export-row__titre {
  font-weight: 500;
  font-size: 1rem;
  color: var(--texte-principal);
  word-break: break-word;
}
.export-row__meta {
  margin-top: 4px;
  font-size: .8125rem;
  color: var(--texte-secondaire);
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
}
.export-row__erreur {
  margin-top: 6px;
  font-size: .8125rem;
  color: var(--badge-refuse-texte);
  word-break: break-word;
}
.export-row__aside { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   LA PASTILLE D'EXPORT CESSE DE POUSSER SON BOUTON (lot 14q, 16/08/2026)

   « Téléchargé le 11/08/2026 à 11:40 » est une pastille longue — une date et
   une heure. À côté d'un bouton « Télécharger à nouveau », elle sortait du
   cadre sur un téléphone : Philippe a vu le bouton déborder de sa carte.

   « flex-shrink: 0 » le voulait ainsi : le bloc refusait de rétrécir, et
   comme rien ne l'autorisait à passer à la ligne, il débordait.

   ── LA PASTILLE PORTE UN FAIT, LE BOUTON UN GESTE ────────────────────────

   Sur écran étroit, ils prennent chacun leur ligne : la pastille dit ce qui
   s'est passé, le bouton propose ce qu'on peut faire. Les serrer côte à côte
   sur 375 pixels ne rend service à aucun des deux.

   Le bouton prend toute la largeur — il est la seule action de la carte, et
   une cible tactile pleine largeur se touche sans viser.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .export-row__aside {
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 10px;
  }

  .export-row__aside .export-badge {
    flex: 1 0 100%;
  }

  .export-row__aside .btn {
    width: 100%;
    justify-content: center;
  }
}
.export-row--downloaded { background: var(--gris-100); }

.export-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--rayon-sm);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.export-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.export-badge--pret       { color: var(--badge-valide-texte);    background: var(--badge-valide-bg); }
.export-badge--echec      { color: var(--badge-refuse-texte);    background: var(--badge-refuse-bg); }
.export-badge--attente    { color: var(--badge-incomplet-texte); background: var(--badge-incomplet-bg); }
.export-badge--encours    { color: var(--badge-recu-texte);      background: var(--badge-recu-bg); }
.export-badge--expire,
.export-badge--telecharge { color: var(--badge-encours-texte);   background: var(--badge-encours-bg); }
.export-badge--encours::before { animation: export-pulse 1.1s ease-in-out infinite; }
.export-badge--telecharge::before {
  content: "\2713";
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-weight: 600;
}
@keyframes export-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .export-badge--encours::before { animation: none; }
}

.exports-section__note {
  margin: 2px 0 14px;
  font-size: .9375rem;
  color: var(--texte-secondaire);
  max-width: 68ch;
}
/* Trait plein : un état vide n'est pas une zone de dépôt. */
.exports-vide {
  background: var(--blanc);
  border: 1px solid #D6DAE1;
  border-radius: var(--rayon-lg);
  padding: 40px 24px;
  text-align: center;
  color: var(--texte-secondaire);
}
@media (max-width: 560px) {
  .export-row__aside { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   18 · PARAMÈTRES — ex-blocs <style> de parametres.php
   ========================================================================== */
.param-tab {
  font: inherit;
  font-weight: 500;
  font-size: .9375rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px 12px;
  cursor: pointer;
  color: var(--texte-secondaire);
  margin-bottom: -1px;
}
.param-tab:hover { color: var(--texte-principal); }
.param-tab.is-active {
  color: var(--texte-principal);
  border-bottom-color: var(--texte-principal);
  font-weight: 500;
}
.param-panel[hidden] { display: none; }

.logo-preview {
  width: 72px;
  height: 72px;
  border-radius: var(--rayon-lg);
  object-fit: contain;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
}
/* Aplat, plus de dégradé. */
.logo-fallback {
  width: 72px;
  height: 72px;
  border-radius: var(--rayon-lg);
  display: grid;
  place-items: center;
  background: var(--couleur-primaire);
  color: var(--blanc);
  font-weight: 600;
  font-size: 1.4rem;
}

.struct-liste { display: flex; flex-direction: column; margin: 6px 0 10px; }
.struct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: var(--rayon);
}
.struct-row + .struct-row { border-top: 1px solid var(--gris-200); }
.struct-row.dragging { opacity: .4; background: var(--gris-100); }
.struct-handle {
  display: inline-flex;
  align-items: center;
  cursor: grab;
  color: var(--gris-400);
  padding: 0 2px;
  user-select: none;
  touch-action: none;
}
.struct-handle:hover { color: var(--texte-secondaire); }
.struct-handle:active { cursor: grabbing; }
.struct-grip { fill: currentColor; }
.struct-libelle {
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-size: .9375rem;
  background: transparent;
}
.struct-libelle:hover { border-color: var(--gris-200); }
.struct-libelle:focus {
  border-color: var(--couleur-primaire);
  background: var(--blanc);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 82, 136, .16);
}
.struct-actif {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  color: var(--texte-secondaire);
  white-space: nowrap;
}
.struct-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gris-400);
  font-size: 1rem;
  padding: 4px 7px;
  border-radius: var(--rayon-sm);
  line-height: 1;
}
.struct-x:hover { color: var(--badge-refuse-texte); background: var(--badge-refuse-bg); }

/* Nuancier des couleurs d'établissement. Les pastilles portent des couleurs
   de tenant, pas des couleurs du système : elles restent telles quelles.
   Seul l'anneau de sélection suit l'encre. */
.wsc-colors { display: grid; gap: 18px; max-width: 540px; }
.wsc-cf__head { margin-bottom: 10px; }
.wsc-cf__head label { font-size: .9375rem; font-weight: 500; }
.wsc-cf__palette { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.wsc-sw {
  width: 26px;
  height: 26px;
  border-radius: var(--rayon);
  border: 1px solid rgba(22, 25, 31, .12);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform .1s;
}
.wsc-sw:hover { transform: scale(1.12); }
.wsc-sw.is-active,
.wsc-custom-wrap.is-active {
  box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3px #272C34;
}
.wsc-sw.is-active::after,
.wsc-custom-wrap.is-active::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--blanc);
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.wsc-custom {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px dashed var(--gris-400);
  border-radius: var(--rayon);
  cursor: pointer;
  background: var(--blanc);
}
.wsc-custom::-webkit-color-swatch-wrapper { padding: 3px; }
.wsc-custom::-webkit-color-swatch { border: none; border-radius: 4px; }
.wsc-custom::-moz-color-swatch { border: none; border-radius: 4px; }
.wsc-custom-wrap {
  position: relative;
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: var(--rayon);
}

/* ==========================================================================
   19 · BOUTONS ET TAGS D'ÉTAT restés à l'ancienne palette dans le corps du
        fichier — ils étaient masqués par les blocs locaux qu'on vient de
        retirer, donc ils redeviennent visibles.
   ========================================================================== */
.btn--danger {
  background: var(--blanc);
  color: var(--badge-refuse-texte);
  border: 1px solid #F5C6C2;
}
.btn--danger:hover { background: var(--badge-refuse-bg); }
.btn--danger-outline {
  background: var(--blanc);
  color: var(--badge-refuse-texte);
  border: 1px solid #F5C6C2;
}
.btn--danger-outline:hover { background: var(--badge-refuse-bg); opacity: 1; }
.btn--succes {
  background: var(--blanc);
  color: var(--badge-valide-texte);
  border: 1px solid #B8E0CE;
}
.btn--succes:hover { background: var(--badge-valide-bg); }

/* ==========================================================================
   20 · MASQUAGE PAR RÔLE
   --------------------------------------------------------------------------
   Repris À L'IDENTIQUE des blocs <style> de dossiers.php et
   dossier-detail.php, mêmes sélecteurs, même effet, simplement relogés ici.
   Seules ces deux pages posent body--lecture-seule / body--sans-admin, donc
   la portée réelle est inchangée.
   Un contrôle réaffiché à un compte consultation n'est pas un défaut visuel,
   c'est un trou dans les permissions. La sécurité reste serveur (403) ;
   ceci retire seulement l'interface correspondante.
   ========================================================================== */

/* Lecture seule (consultation, rang 1) — écran Dossiers */
.body--lecture-seule [data-new-dossier-open],
.body--lecture-seule .export-menu,
.body--lecture-seule .bulk-actions,
.body--lecture-seule .cellule-selection,
.body--lecture-seule th[aria-label="Ouverture du dossier"],
.body--lecture-seule .cellule-actions,
.body--lecture-seule [data-new-dossier-modal],
.body--lecture-seule [data-bulk-relance-modal],
.body--lecture-seule [data-bulk-invite-modal] { display: none !important; }

/* Statut par ligne : visible en lecture (badge) mais non cliquable, sans chevron. */
.body--lecture-seule .status-chip-trigger { pointer-events: none; cursor: default; }
.body--lecture-seule .status-chip-trigger svg { display: none; }

/* Lecture seule — fiche dossier */
.body--lecture-seule [data-marker-toggle],
.body--lecture-seule .dossier-hero__actions,
.body--lecture-seule [data-section-toggle],
.body--lecture-seule [data-section-form],
.body--lecture-seule form[action="/actions/dossier-lien-famille.php"],
.body--lecture-seule [data-viewer-validate-all],
.body--lecture-seule [data-piece-upload-form],
.body--lecture-seule [data-piece-delete-form],
.body--lecture-seule .piece-actions,
.body--lecture-seule .commentaire-zone .page__actions,
.body--lecture-seule [data-dv-valider],
.body--lecture-seule [data-dv-refuser],
.body--lecture-seule [data-dv-all],
.body--lecture-seule [data-dv-refuse-panel] { display: none !important; }

/* Le commentaire reste visible en lecture (textarea readonly) mais neutre. */
.body--lecture-seule .commentaire-zone textarea[readonly] {
  background: var(--gris-100);
  color: var(--texte-secondaire);
  cursor: default;
  resize: none;
}

/* Actions réservées à l'admin (rang 3) : masquées pour gestionnaire et consultation. */
/* LE MASQUAGE SUIT UN MARQUEUR, PLUS UNE ADRESSE (bascule du 15/08) : il
   visait « a[href="/import-eleves.php"] », et la route unique a changé
   l'adresse en « /import.php?campagne=N » — le masquage est tombé en silence
   et un gestionnaire voyait le bouton sur toute liste filtrée. Un sélecteur
   qui compare une adresse exacte survit mal au changement de cette adresse. */
/* ── LA PORTE D'IMPORT SUIT SON RANG, ET IL A CHANGÉ (15/08 au soir) ─────
   Ce masque était en « sans-admin » ce matin, parce que l'import l'était.
   L'arbitrage du soir l'a fait descendre en gestion : le secrétariat a
   désormais le DROIT d'importer, et ce masque lui cachait encore la porte.

   Un geste qui existe sans chemin n'existe pas : un chemin qu'on ne montre
   pas n'existe pas pour celui qui cherche. Le masque descend avec son geste.

   RÈGLE QUI SE DÉGAGE, et le banc la tient : le masque d'un geste suit le
   rang de ce geste. Quand le rang bouge, le masque bouge — sinon on a un
   droit sans porte, ou une porte sans droit. */
.body--lecture-seule [data-porte-import],
.body--sans-admin [data-bulk-delete],
.body--sans-admin .danger-zone,
.body--sans-admin [data-delete-dossier-modal] { display: none !important; }


/* ==========================================================================
   21 · DERNIÈRES COULEURS D'AVANT
   --------------------------------------------------------------------------
   75 règles du corps du fichier portaient encore des valeurs figées.
   Une quarantaine sont des fonds #F8FAFC, à un cran de --gris-100 : les
   changer ne se verrait pas, je les laisse. Les autres se voient, et les
   voici. Aucune n'est fonctionnelle : ce sont des couleurs, rien d'autre.
   ========================================================================== */

/* Trois dégradés subsistaient sur les en-têtes de fiche. Aplat. */
.dashboard-hero,
.dossier-hero,
.campaign-sheet-hero {
  background: var(--blanc);
}
/* Le bandeau « À traiter en priorité » gardait en plus un liseré bleu clair
   qui disait une catégorie, pas un état : trait neutre. */
.dossier-a-traiter {
  background: var(--blanc);
  border-color: var(--gris-200);
}

/* Un panneau sombre hérité de l'ancienne barre latérale. */
.resume-campagnes {
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
}

/* Pastilles de progression et d'état. */
.todo-item__dot--danger { background: var(--badge-refuse-texte); }
.todo-item__dot--warn   { background: var(--badge-incomplet-texte); }
.todo-item__dot--info   { background: var(--couleur-primaire); }

.chip-document--online,
.field-badge--required { color: var(--badge-recu-texte); }
.chip-document--valid  { color: var(--badge-valide-texte); }
.chip-document--paper {
  background: var(--badge-encours-bg);
  color: var(--badge-encours-texte);
  border-color: var(--gris-200);
}

.tag--warning,
.campagne-card__setup--todo .tag {
  background: var(--badge-incomplet-bg);
  color: var(--badge-incomplet-texte);
}
.tag--success { background: var(--badge-valide-bg); color: var(--badge-valide-texte); }
.blockers-note { color: var(--texte-secondaire); }
.notice-card__preview--empty { color: var(--badge-incomplet-texte); }
.notice-card__status--ok { color: var(--badge-valide-texte); }

.doc-item__icon--pdf { color: var(--texte-secondaire); }
.pill-menu-danger,
.library-card-menu__panel button.is-danger,
.campaign-more__menu button.campaign-more__danger,
.choice-row-demo button:hover { color: var(--badge-refuse-texte) !important; }
.campaign-more__menu button[disabled] { color: var(--texte-inerte, var(--gris-400)); }
.toast--danger { border-left-color: var(--badge-refuse-texte); }

/* Le type d'un modèle est une catégorie, pas un état : il reste neutre. */
.library-type,
.library-type--formulaire,
.library-type--champ,
.library-type--section,
.library-type--document,
.library-type--notice {
  background: var(--badge-encours-bg);
  color: var(--badge-encours-texte);
}

/* Journal : la couleur disait le module. Le module est écrit à côté,
   la pastille redevient neutre et la ligne se lit au mot. */
.journal-entry,
.journal-entry[data-module="dossiers"],
.journal-entry[data-module="campagnes"],
.journal-entry[data-module="formulaires"],
.journal-entry[data-module="documents"],
.journal-entry[data-module="bibliotheque"],
.journal-entry[data-module="systeme"] {
  --journal-accent: var(--gris-400);
  --journal-accent-soft: var(--gris-200);
  --journal-module-color: var(--texte-secondaire);
  --journal-module-ring: var(--gris-200);
  --journal-module-tint: var(--gris-100);
}
.journal-entry__details { color: var(--texte-secondaire); }
.journal-entry__icon--systeme,
.journal-badge--systeme,
.journal-entry__chips .journal-badge,
.journal-chip {
  background: var(--badge-encours-bg);
  color: var(--badge-encours-texte);
}



/* ==========================================================================
   22 · REMPLISSAGE AUTOMATIQUE DU NAVIGATEUR
   Teinte quasi invisible à la place du jaune Firefox / bleu Chrome.
   Sélecteurs séparés par famille : un sélecteur inconnu invalide la règle.
   ========================================================================== */

input:autofill,
input:autofill:hover,
input:autofill:active,
textarea:autofill,
select:autofill {
  filter: none !important;
  box-shadow: 0 0 0 1000px #F7F9FC inset !important;
  -webkit-text-fill-color: var(--texte-principal) !important;
  caret-color: var(--texte-principal);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0 1000px #F7F9FC inset !important;
  -webkit-text-fill-color: var(--texte-principal) !important;
  caret-color: var(--texte-principal);
}

/* ── LE VESTIGE « -moz-autofill » EST RETIRÉ (lot 15i, 16/08/2026) ─────────
   Firefox l'a abandonné au profit du standard « :autofill », déclaré vingt
   lignes plus haut — il criait donc « pseudo-classe inconnue » à chaque
   chargement, dans la console de Philippe.

   UN AVERTISSEMENT DANS UNE CONSOLE HABITUE À IGNORER LES AVERTISSEMENTS, et
   le jour où un vrai paraît, personne ne le voit.

   Le standard couvre le même cas : « input:autofill » est déclaré avant les
   préfixes, et Firefox le comprend depuis longtemps. */

input:autofill:focus,
textarea:autofill:focus,
select:autofill:focus {
  filter: none !important;
  box-shadow: 0 0 0 1000px #F7F9FC inset,
              0 0 0 3px rgba(46, 82, 136, .16) !important;
  -webkit-text-fill-color: var(--texte-principal) !important;
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #F7F9FC inset,
              0 0 0 3px rgba(46, 82, 136, .16) !important;
  -webkit-text-fill-color: var(--texte-principal) !important;
}

/* ==========================================================================
   23 · UN SÉLECTEUR N'ÉLARGIT JAMAIS SON CONTENEUR
   Un <select> se dimensionne sur son option la plus longue. Depuis que les
   durées de conservation portent leur explication au lieu d'un nombre nu, il
   poussait la fenêtre de création hors de son cadre (barre de défilement
   horizontale, capture du 11/08). min-width:0 lève le min-width:auto des
   éléments de grille, width:100% le ramène à la largeur de son champ.
   Vaut pour tous les menus longs à venir, pas seulement celui-là.
   ========================================================================== */

.campaign-create-form__field select,
.campaign-modal__fields select,
.campaign-source-panel select,
.champ select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* ══ FIN DU BLOC DE FINITION ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   LE MUR — écran d'accueil racine (lot 4b, 12/08/2026)

   Écrit dans la CHARTE EXISTANTE : les gris du produit, la seule couleur
   d'accent déjà en usage, aucun dégradé, aucune ombre portée. Le mur est un
   hall d'entrée, pas une vitrine.
   ══════════════════════════════════════════════════════════════════════════ */

.mur-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--gris-200);
  margin-bottom: 28px;
}

/* Le nom de l'établissement est un lien vers le mur, mais il ne doit pas
   ressembler à un lien : c'est un titre qu'on peut cliquer, pas une action. */
.mur-entete__nom {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--texte-principal);
  text-decoration: none;
}
.mur-entete__nom:hover { color: var(--couleur-primaire); }

.mur-entete__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
}
.mur-entete__actions a { color: var(--couleur-primaire); text-decoration: none; }
.mur-entete__actions a:hover { text-decoration: underline; }
.mur-entete__actions span { color: var(--gris-400); }

.mur__titre {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texte-secondaire);
  margin: 0 0 16px;
}

/* Deux colonnes à largeur normale, une seule sur mobile. Pas de troisième
   colonne : au-delà, les tuiles deviennent des vignettes qu'on ne lit plus. */
.mur__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .mur__grille { grid-template-columns: minmax(0, 1fr); }
}

.mur-tuile {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon-lg);
  background: var(--blanc);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.mur-tuile:hover {
  border-color: var(--couleur-primaire);
  background: var(--couleur-primaire-clair);
}

/* La tête porte le titre et JUSQU'À DEUX badges : l'état de la démarche et la
   pastille des échéances. Ils répondent à deux questions différentes — où en
   est-on, et qu'y a-t-il à faire — donc ils coexistent. D'où le retour à la
   ligne autorisé sur les badges, pour ne pas écraser un titre long. */
.mur-tuile__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LE TITRE DE TUILE PREND SA LIGNE SUR ÉCRAN ÉTROIT (lot 14n, 16/08/2026)

   « Guichet des demandes » se cassait sur TROIS LIGNES sur un téléphone,
   pendant que « En service » et « 1 à purger (RGPD) » occupaient la moitié de
   la largeur à côté.

   La place existait : c'est « space-between » sans repli qui la refusait.

   ── LE NOM DU MONDE D'ABORD, SES ÉTATS ENSUITE ───────────────────────────

   Sur un mur de six tuiles, on cherche un monde par son nom. Un titre coupé
   en trois se reconnaît mal, et les pastilles qui l'ont fragmenté disent des
   choses qu'on ne lit qu'après avoir trouvé la bonne tuile.

   Le titre prend donc toute la ligne, les pastilles passent dessous, alignées
   à gauche — accrochées au titre qu'elles qualifient, plus poussées au bord
   opposé où plus rien ne les retient.

   ── LE POINT DE BASCULE EST CELUI DU MUR, PAS UN AUTRE ───────────────────

   J'avais posé 640 pixels par habitude. Le mur, lui, passe à une colonne à
   900 : entre les deux, une tuile pleine largeur gardait un titre serré contre
   ses pastilles.

   ON SUIT LA BASCULE QUI EXISTE, on n'en invente pas une seconde — deux points
   de rupture pour un même objet créent une bande où rien n'est prévu.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .mur-tuile__tete {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .mur-tuile__titre {
    flex: 1 0 100%;
  }

  .mur-tuile__badges {
    justify-content: flex-start;
  }
}
.mur-tuile__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.mur-tuile__titre {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texte-principal);
}

.mur-tuile__compte {
  margin: 0 0 4px;
  color: var(--texte-principal);
  font-size: .95rem;
}

.mur-tuile__meta {
  margin: 0;
  color: var(--texte-secondaire);
  font-size: .88rem;
}

.mur-tuile__lien {
  margin: 4px 0 0;
  color: var(--couleur-primaire);
  font-size: .9rem;
}

/* ── LES DEUX GRIS, ET LEUR DIFFÉRENCE DOIT SE VOIR ────────────────────────

   « pas encore utilisé » : atténué mais CLIQUABLE. Bordure pleine, comme une
   tuile active — parce que c'en est une : elle ouvre son monde vide.

   « à venir » : pointillés et NON CLIQUABLE. La bordure discontinue dit que
   la chose n'est pas encore là.

   Ni l'un ni l'autre ne porte de cadenas, de gris mort ou de bouton grisé :
   ce ne sont pas des fonctions qu'on refuse. */
/* CONTRASTE MESURÉ AVANT LIVRAISON. Le premier jet employait --gris-400 pour
   atténuer les tuiles grises : 2,60:1, INSUFFISANT même en gros texte. Le
   jeton n'est pas en cause — il sert de bordure ailleurs — c'est l'employer
   pour du TEXTE qui l'était.

   L'atténuation se fait donc par le POIDS et la BORDURE, jamais en effaçant
   le texte : --texte-secondaire tient à 6,75:1, au-delà du seuil AA. Une tuile
   discrète doit rester lisible, sinon elle n'est pas discrète, elle est
   absente. */
.mur-tuile--vide .mur-tuile__titre { color: var(--texte-secondaire); }
.mur-tuile--vide .mur-tuile__compte { color: var(--texte-secondaire); }

.mur-tuile--avenir {
  border-style: dashed;
  background: transparent;
  cursor: default;
}
.mur-tuile--avenir .mur-tuile__titre { color: var(--texte-secondaire); font-weight: 500; }
.mur-tuile--avenir .mur-tuile__meta { color: var(--texte-secondaire); }

.mur__actions { margin-top: 24px; }

/* ── LA COLONNE D'APERÇU (lot 4f) ──────────────────────────────────────────
   Elle sert le geste du monde : dépiler sans ouvrir. Le motif en gras se lit
   d'un balayage, l'extrait en dessous dit si la demande attend une réponse.
   Tronqué côté serveur à 90 signes : on n'envoie pas un message entier pour
   en afficher une ligne. */
.cellule-apercu {
  max-width: 420px;
}
.cellule-apercu strong {
  display: block;
  font-weight: 600;
  color: var(--texte-principal);
}
.cellule-apercu__extrait {
  display: block;
  margin-top: 2px;
  color: var(--texte-secondaire);
  font-size: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cellule-apercu__vide {
  color: var(--texte-secondaire);
}

/* ── LE BOUTON « RÉINITIALISER » (lot 4h) ──────────────────────────────────
   Il occupait toute une colonne de la grille de filtres, aussi large qu'un
   champ de recherche, ce qui lui donnait le poids d'une action principale
   alors qu'il n'annule qu'un tri. Il prend maintenant la largeur de son texte
   et se cale à droite.

   NOTE pour le balayage : .btn--reset-align est déclarée DEUX FOIS dans cette
   feuille (l.1337 et l.1695). Duplication connue, à traiter vendredi. */
.filtres .btn--reset-align {
  justify-self: start;
  width: auto;
  padding-left: 18px;
  padding-right: 18px;
  white-space: nowrap;
}

/* ── LA COLONNE D'ACTIONS (lot 4h) ────────────────────────────────────────
   Sans largeur contrainte, elle prenait tout l'espace restant du tableau —
   très visible sur un guichet, où elle est vide faute de marquages. Elle se
   réduit maintenant à ce qu'elle contient : un bouton de 32 pixels, ou rien.

   La cellule reste dans tous les cas, sinon le fond gris de l'en-tête
   s'arrêterait avant le bord du tableau. */
.tableau th.cellule-actions,
.tableau td.cellule-actions {
  width: 48px;
  max-width: 48px;
  padding-left: 4px;
  padding-right: 8px;
}

/* Texte réservé aux lecteurs d'écran : présent dans le document, invisible à
   l'œil. La classe était employée sans être déclarée — le mot « Actions »
   serait apparu en clair au-dessus d'une colonne de boutons. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Le lien actif de la barre est rendu en <span> et non en <a> : il ne se
   clique pas, puisqu'il mène à la page qu'on regarde. Il doit garder son
   apparence, d'où ces deux propriétés qu'un <a> tenait de son type. */
span.sidebar__lien {
  cursor: default;
}

/* Le type fixé d'une campagne créée depuis un monde : il s'affiche comme une
   valeur, pas comme un champ à remplir — le choix est déjà fait. */
.campaign-create-form__fixe {
  margin: 0;
  padding: 10px 12px;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  color: var(--texte-principal);
  font-weight: 500;
}

/* ── LA COULEUR DES CASES À COCHER (lot 4s) ────────────────────────────────
   Elles portaient le bleu par défaut du navigateur — un bleu qui n'est pas le
   nôtre et qu'aucune charte ne choisit. Une seule règle le posait, sur les
   cases de sélection du tableau ; toutes les autres, dont celles du
   constructeur de formulaire, restaient à l'ancien.

   `accent-color` colore la case sans la reconstruire : on garde le composant
   natif, son accessibilité et son comportement clavier. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--couleur-primaire);
}


/* ── LA BARRE DU BAS SUR MOBILE (13/08) ────────────────────────────────────
   Elle était figée à CINQ colonnes alors qu'elle ne porte plus que quatre
   raccourcis depuis que « Dossiers » en est sorti — il menait à la liste non
   cadrée, seul endroit du produit qui contredisait le cadrage. Les boutons se
   massaient donc à gauche, la cinquième colonne restant vide.

   Elle compte désormais ses enfants au lieu de supposer leur nombre : le
   prochain raccourci ajouté ou retiré n'exigera pas de retoucher ce style. */
@media screen and (max-width: 900px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }

  .mobile-bottom-nav__link {
    flex: 1 1 0;
    min-height: 44px;   /* la cible tactile recommandée */
  }

  .mobile-bottom-nav__link svg {
    width: 22px;
    height: 22px;
  }
}


/* ── LA CROIX DE FERMETURE DU MENU MOBILE (13/08) ──────────────────────────
   Le JavaScript écoutait déjà son attribut, mais la croix n'existait nulle
   part : le menu ne se fermait qu'en touchant un lien ou hors de lui, deux
   gestes qu'aucun signe n'annonce.

   Elle n'existe que sur mobile : sur un bureau, la barre est permanente et
   une croix y proposerait de fermer ce qui ne s'ouvre pas. */

@media screen and (max-width: 900px) {
  /* ── LE LOGO NE SE DISPOSE PLUS AUTOUR D'UNE CROIX ABSENTE (15/08) ──────
     Il passait en « flex » avec « space-between » pour laisser sa place à un
     « .sidebar__close » — un élément que RIEN NE REND, ni le gabarit ni le
     script. Résultat : « Websco » et « Démarches » devenaient deux colonnes,
     poussées aux extrémités, et le sous-titre flottait à droite. Philippe l'a
     vu sur son téléphone.

     La vraie croix est « .mobile-sidebar-close », posée en absolu par le
     script : elle n'a jamais eu besoin qu'on lui fasse de la place.

     UNE RÈGLE ÉCRITE POUR UN ÉLÉMENT QUI N'EXISTE PAS DÉFORME CELUI QUI
     EXISTE. Elle est retirée avec ses trois sœurs — une déclaration retirée
     ferme ses surfaces. */



}
/* ══════════════════════════════════════════════════════════════════════════
   LES ICÔNES S'ANIMENT AU SURVOL (13/08, validé par Philippe)

   Chaque icône bouge selon CE QU'ELLE REPRÉSENTE : l'aiguille des minutes fait
   son tour, le couvercle du carton se soulève, la roue crantée avance d'un
   cran sans son axe, les deux silhouettes s'écartent. Une animation sans
   rapport avec l'objet est du bruit décoratif ; celle qui en a un le rend
   lisible.

   ── CE QUI A ÉTÉ APPRIS EN LES POSANT ─────────────────────────────────────

   `transform-box: fill-box` fait tourner chaque forme autour de SON PROPRE
   centre : l'aiguille pivotait sur elle-même et sortait du cadran, l'axe des
   réglages se désaxait. C'est `view-box` qu'il faut, avec l'origine au centre
   de l'icône.

   Et les animations ne PRENNENT que sur des parties nommées : les icônes du
   gabarit ont été redessinées pour porter `.ico-aiguille`, `.ico-couvercle`,
   `.ico-roue`, `.ico-gauche`, `.ico-droite`, `.ico-tete`. Sans elles, viser
   « le premier path » aurait touché presque toutes les icônes.

   ── L'ACCUEIL N'EST PAS ANIMÉ ─────────────────────────────────────────────

   Sa maison bougeait de partout — toit, murs, porte — et le mouvement d'une
   forme entière n'est pas un geste, c'est du tremblement. Mieux vaut rien.
   ══════════════════════════════════════════════════════════════════════════ */

.sidebar__lien svg *,
.mobile-bottom-nav__link svg * {
  transition: transform 200ms cubic-bezier(.25, .1, .25, 1);
  transform-box: view-box;
  transform-origin: 12px 12px;
}

/* JOURNAL : l'aiguille des minutes fait un tour complet. 500 ms lui sont
   propres — à 200 ms, un tour entier ressemble à un sursaut. */
.sidebar__lien .ico-aiguille,
.mobile-bottom-nav__link .ico-aiguille {
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.sidebar__lien:hover .ico-aiguille,
.mobile-bottom-nav__link:hover .ico-aiguille {
  transform: rotate(360deg);
}

/* EXPORTS : le couvercle du carton se soulève. */
.sidebar__lien:hover .ico-couvercle,
.mobile-bottom-nav__link:hover .ico-couvercle {
  transform: translateY(-2px);
}

/* ── ACCUEIL : L'ICÔNE NE S'ANIME PAS (15/08/2026) ─────────────────────────
   Les quatre tuiles s'écartaient au survol, en diagonale. Essayé à plusieurs
   durées et amplitudes, retiré : ça ne rendait pas bien.

   La raison tient à ce que le commentaire du haut dit déjà — « animer la forme
   entière n'est pas un geste, c'est du tremblement ». Les autres icônes
   TRANSFORMENT une partie d'elles-mêmes : la roue tourne, le couvercle se
   soulève, l'aiguille fait un tour. Le reste de la forme tient en place, et
   c'est ce contraste qui fait lire le mouvement.

   Ici les quatre tuiles SONT l'icône entière : les écarter déplace tout, et
   il n'y a plus rien d'immobile pour donner la mesure. Un mouvement sans
   point fixe se lit comme un tremblement, quelle que soit sa vitesse.

   L'ICÔNE RESTE — c'est elle qui portait la valeur, pas son animation : quatre
   carrés décrivent le mur de tuiles là où une maison le symbolisait. */

/* PARAMÈTRES : la roue avance d'un cran, son axe reste fixe. */
.sidebar__lien:hover .ico-roue,
.mobile-bottom-nav__link:hover .ico-roue {
  transform: rotate(45deg);
}

/* BIBLIOTHÈQUE : le livre s'ouvre, ses deux pages s'écartent.

   Le pivot est la reliure — 12px, le centre du carré — parce qu'un livre
   s'ouvre par son dos. La droite part avec 50ms de retard : deux pages qui
   bougent d'un bloc font un accordéon, décalées elles font un livre.

   Une couverture qui se rabat aurait été plus fidèle, mais elle sort du carré
   de 24 et mordrait sur le texte du menu. */
/* (Les règles des deux pages du livre ouvert sont parties avec lui, lot 80a :
   une règle sans porteur est un vestige qui égare le prochain lecteur.) */

/* ── BIBLIOTHÈQUE : LE LIVRE PENCHÉ SE REDRESSE (lot 80a, 24/08/2026) ─────
   Le pivot est SON PIED — un livre bascule sur l'étagère, il ne tourne pas
   sur son milieu. Par TRANSITION et non par animation : les cinq autres
   icônes de la barre fonctionnent ainsi, et une transition se rembobine
   quand la souris repart, à tout moment. Une animation en trois temps
   coupait net si l'on sortait en cours de route.
   « transform-box: fill-box » est indispensable sur un rect SVG : sans lui,
   l'origine se calcule sur le repère entier, et le livre part en biais. */
.sidebar__lien svg .ico-livre-penche,
.mobile-bottom-nav__link svg .ico-livre-penche {
  /* LA RÈGLE GÉNÉRALE DES ICÔNES IMPOSE LE PIVOT DU CENTRE (12px 12px) et
     « transform-box: view-box ». Une règle de même force placée avant dans
     le fichier l'emporterait : ce sélecteur reprend donc EXACTEMENT la même
     portée que la règle générale, plus la classe, ce qui le rend plus fort
     sans recourir à « !important » — un poids de plus se raisonne, un
     « !important » se subit. */
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(-13deg);
}

.sidebar__lien:hover svg .ico-livre-penche,
.mobile-bottom-nav__link:hover svg .ico-livre-penche {
  transform: rotate(0deg);
}

/* COMPTES : les deux silhouettes s'écartent. */
.sidebar__lien:hover .ico-gauche { transform: translateX(-1.5px); }
.sidebar__lien:hover .ico-droite { transform: translateX(1.5px); }

/* MON COMPTE : la tête seule se lève, en 120 ms — un salut, pas un mouvement. */
.sidebar__lien .ico-tete { transition-duration: 120ms; }
.sidebar__lien:hover .ico-tete { transform: translateY(-1.5px); }

/* SE DÉCONNECTER : la flèche sort par la porte. */
.sidebar__lien--logout:hover svg polyline,
.sidebar__lien--logout:hover svg line {
  transform: translateX(2.5px);
}

/* QUI A DEMANDÉ MOINS DE MOUVEMENT N'EN REÇOIT AUCUN. Ce n'est pas une
   politesse : les animations déclenchent des troubles vestibulaires. */
@media (prefers-reduced-motion: reduce) {
  .sidebar__lien svg *,
  .mobile-bottom-nav__link svg * {
    transition: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LES ICÔNES DES MONDES (13/08, validé par Philippe)

   Chaque monde a ses deux icônes, et chacune raconte son geste : l'enveloppe
   d'une demande s'ouvre, la porte d'une journée pivote, la coche d'un visiteur
   part vers l'extérieur, la chemise d'un dossier bascule.

   ── CE QUI A ÉTÉ APPRIS EN LES RÉGLANT ────────────────────────────────────

   Cinq translations verticales identiques ne racontent rien : c'est du
   tremblement uniforme. Une animation ne vaut que si elle EST le geste de son
   objet — l'aiguille tourne, la porte pivote, l'enveloppe se retourne.

   Et `transform-origin` posée dans la règle de survol est ÉCRASÉE au retour
   par la règle générale : le rabat de l'enveloppe repivotait autour du centre
   en se refermant, d'où une descente puis un retournement. L'origine vit donc
   sur la classe, valable dans les deux sens.
   ══════════════════════════════════════════════════════════════════════════ */

/* DEMANDES : le rabat de l'enveloppe se retourne, pointe vers le haut. */
.sidebar__lien .ico-pli {
  transform-origin: 12px 7px;
  transition-duration: 260ms;
}
.sidebar__lien:hover .ico-pli { transform: scaleY(-1); }

/* GUICHETS : l'auvent se relève, comme on ouvre un comptoir le matin, et la
   sonnette s'enfonce. */
.sidebar__lien:hover .ico-rideau { transform: translateY(-2.5px); }
.sidebar__lien .ico-sonnette { transform-origin: 12px 14px; }
.sidebar__lien:hover .ico-sonnette { transform: scaleY(.4); }

/* VISITEURS : la coche part vers l'extérieur — quelqu'un s'est enregistré. */
.sidebar__lien:hover .ico-coche { transform: translateX(2px); }

/* JOURNÉES : la porte s'ouvre sur son gond. « Portes ouvertes » au sens
   propre — le calendrier ne disait rien de l'événement. */
.sidebar__lien .ico-battant { transform-origin: 12px 21px; }
.sidebar__lien:hover .ico-battant { transform: rotate(-14deg); }
.sidebar__lien:hover .ico-poignee { transform: translate(-1px, -.5px); }

/* DOSSIERS : la chemise entière bascule. Agiter un seul trait ne racontait
   rien ; c'est l'objet qu'on incline. */
.sidebar__lien svg.ico-dossier { transform-origin: 12px 20px; }
.sidebar__lien:hover svg.ico-dossier { transform: rotate(-6deg); }

/* RENTRÉES : les lignes du document se décalent, comme si on le remplissait.
   Un dossier de rentrée est une pile de papiers à compléter. */
.sidebar__lien:hover .ico-ligne1 { transform: translateX(1.5px); }
.sidebar__lien:hover .ico-ligne2 { transform: translateX(2.5px); }

/* CAMPAGNES : le mégaphone, et ses ondes partent EN DÉCALÉ — la seconde
   attend soixante millisecondes. C'est ce qui fait une propagation plutôt
   qu'un gonflement.

   La cible avait été écartée : elle disait l'intention marketing du mot
   « campagne », pas l'objet. Une campagne, c'est ce que l'école ADRESSE à ses
   familles — un appel qu'on lance. */
.sidebar__lien .ico-onde1 { transform-origin: 16.5px 12px; }
.sidebar__lien .ico-onde2 { transform-origin: 19px 12px; transition-delay: 60ms; }
.sidebar__lien:hover .ico-onde1 { transform: translateX(1px) scale(1.12); }
.sidebar__lien:hover .ico-onde2 { transform: translateX(1.5px) scale(1.1); }

/* ── L'ICÔNE DE COPIE D'UNE ADRESSE (13/08) ────────────────────────────────
   Coller une adresse dans un mail sans la sélectionner à la main est le geste
   le plus fréquent sur une fiche de demande. Le bouton reste discret : il ne
   se colore qu'au survol de sa ligne, pour ne pas attirer l'œil avant qu'on
   en ait besoin. */
.champ-lecture__copiable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-copier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rayon-sm);
  background: transparent;
  color: var(--gris-400);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.champ-lecture:hover .btn-copier {
  color: var(--texte-secondaire);
  border-color: var(--gris-200);
}

.btn-copier:hover {
  color: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
}

.btn-copier svg { width: 14px; height: 14px; }

/* Confirmation brève : le bouton dit ce qu'il vient de faire, puis se tait. */
.btn-copier.est-copie {
  color: var(--badge-valide-texte);
  border-color: var(--badge-valide-texte);
}

/* La confirmation de copie : « Copié » apparaît et s'efface en fondu. Elle ne
   demande pas qu'on la ferme, et elle disparaît avant qu'on l'ait relue. */
.copie-bulle {
  margin-left: 4px;
  font-size: .82rem;
  color: var(--badge-valide-texte);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.copie-bulle.est-visible {
  opacity: 1;
  transform: translateY(0);
}

/* La colonne d'ouverture d'un dossier : une flèche, pas un texte. Elle se
   borne comme celle des actions, sinon elle prend l'espace restant. */
.tableau th.cellule-ouvrir,
.tableau td.cellule-ouvrir {
  width: 40px;
  max-width: 40px;
  padding-left: 0;
  padding-right: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LE WIZARD DE CRÉATION (lot 6b)

   Un parcours, pas un formulaire : chaque étape occupe l'écran, et la
   progression se voit sans se compter.
   ══════════════════════════════════════════════════════════════════════════ */

.page--wizard {
  max-width: 720px;
}

/* La progression : un trait par étape, rempli à mesure. Elle ne porte aucun
   texte — le titre dit déjà « étape 2 sur 3 », et le répéter ferait doublon. */
.wizard-progression {
  display: flex;
  gap: 6px;
  margin: 18px 0 26px;
}

.wizard-progression__pas {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--gris-200);
  transition: background .25s ease;
}

.wizard-progression__pas.est-fait {
  background: var(--couleur-primaire);
}

/* Les cartes de choix : type, modèle. Assez grandes pour qu'on les vise sans
   viser, assez sobres pour qu'on lise ce qu'elles disent. */
.wizard-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.wizard-carte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  text-align: left;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wizard-carte:hover {
  border-color: var(--couleur-primaire);
  box-shadow: var(--ombre-sm);
}

.wizard-carte.est-choisi {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 1px var(--couleur-primaire);
}

.wizard-carte__titre {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--texte-principal);
}

.wizard-carte__geste {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--texte-secondaire);
}

.wizard-formulaire {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── UN BOUTON NE S'ÉTIRE JAMAIS ICI (lot 8d) ──────────────────────────────

   `.wizard-actions` est un flex : tout enfant y est étiré par
   `align-items: stretch`. Trois fois le même défaut en deux jours — le bouton
   devenu cellule de grille, celui étiré par un paragraphe voisin, et celui-ci
   quand le FORMULAIRE porte la classe.

   La règle vaut mieux que trois corrections : les enfants gardent leur taille,
   quoi qu'on mette à côté d'eux. */
.wizard-actions {
  display: flex;
  align-items: center;
  /* DEUX BOUTONS NE SE COLLENT PAS : « Plus tard » et « Envoyer » se
     touchaient, et rien ne disait qu'ils sont deux choix distincts.
     La règle manquait pour tous les wizards, pas seulement l'import. */
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.wizard-actions > * {
  align-self: center;
}

/* Le retour arrière : discret, mais toujours là. Une école qui hésite doit
   pouvoir revenir sans chercher. */
.wizard-precedent {
  margin-top: 20px;
  font-size: .9rem;
}

.wizard-precedent a {
  color: var(--texte-secondaire);
  text-decoration: none;
}

.wizard-precedent a:hover {
  color: var(--couleur-primaire);
}

/* L'avis d'un re-défaut : « la conservation est revenue au défaut du type ».
   Une ligne, pas une alerte — c'est une information, pas un problème. */
.wizard-avis {
  margin: 0 0 18px;
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--badge-incomplet-texte);
  background: var(--badge-incomplet-bg);
  border-radius: var(--rayon);
}

/* L'année d'un modèle : elle distingue deux campagnes de même nom, sans peser
   autant que le titre lui-même. */
.wizard-carte__annee {
  margin-left: 6px;
  font-size: .82rem;
  font-weight: 400;
  color: var(--texte-secondaire);
}

/* La finalité du dépôt, au-dessus du bouton d'envoi. Discrète mais lisible :
   c'est un consentement, il doit se lire avant le clic, pas se cacher. */
.pf-finalite {
  margin: 0 0 14px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--texte-secondaire);
}

/* La phrase d'usage d'une tuile vide : elle dit ce que le type couvre, à
   l'école qui ne le sait pas encore. Discrète, elle ne dispute pas la place au
   titre ni à l'invitation. */
.mur-tuile__usage {
  margin: 6px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--texte-secondaire);
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL D'UN FORMULAIRE VIDE (lot 6p)

   Le fastidieux commence ici : composer champ par champ prend une heure,
   reprendre une section entière prend un clic. L'écran propose donc les
   sections d'abord, et « partir de zéro » ensuite.
   ══════════════════════════════════════════════════════════════════════════ */

.builder-depart {
  margin-top: 24px;
  padding: 28px;
  background: var(--gris-50, #FAFAFA);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
}

.builder-depart__titre {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texte-principal);
}

.builder-depart__aide {
  margin: 0 0 18px;
  font-size: .9rem;
  color: var(--texte-secondaire);
}

.builder-depart__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.builder-depart__carte {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  text-align: left;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.builder-depart__carte:hover:not(:disabled) {
  border-color: var(--couleur-primaire);
  box-shadow: var(--ombre-sm);
}

.builder-depart__carte:disabled {
  opacity: .55;
  cursor: wait;
}

.builder-depart__nom {
  font-weight: 600;
  font-size: .96rem;
  color: var(--texte-principal);
}

.builder-depart__meta {
  font-size: .82rem;
  color: var(--couleur-primaire);
}

.builder-depart__desc {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--texte-secondaire);
}

/* « Partir de zéro » en dernier, et discret : c'est le chemin long. */
.builder-depart__zero {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gris-200);
}

/* ══════════════════════════════════════════════════════════════════════════
   LE WIZARD DE COMPOSITION (lot 6r)

   Une école pense en questions à poser, pas en structures. Les blocs sont donc
   grands, lisibles, et disent ce qu'ils contiennent avant qu'on les coche.
   ══════════════════════════════════════════════════════════════════════════ */

.wizard-intro {
  margin: 0 0 20px;
  font-size: .95rem;
  color: var(--texte-secondaire);
}

.wizard-blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.wizard-bloc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wizard-bloc:hover { border-color: var(--couleur-primaire); }

.wizard-bloc.est-choisi {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 1px var(--couleur-primaire);
}

.wizard-bloc input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

.wizard-bloc__corps { display: flex; flex-direction: column; gap: 3px; }
.wizard-bloc__nom   { font-weight: 600; font-size: .98rem; color: var(--texte-principal); }
.wizard-bloc__meta  { font-size: .82rem; color: var(--couleur-primaire); }

/* L'APERÇU DU CONTENU : on ne coche pas une boîte fermée. Les quatre premières
   questions suffisent à reconnaître le bloc. */
.wizard-bloc__apercu {
  margin-top: 4px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--texte-secondaire);
}

/* L'aperçu final : le formulaire tel que la famille le verra. Les champs sont
   inertes — c'est une vue, pas une saisie. */
.wizard-apercu__bloc {
  margin: 24px 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte-principal);
}

.wizard-apercu .champ input:disabled,
.wizard-apercu .champ select:disabled,
.wizard-apercu .champ textarea:disabled {
  background: var(--gris-50, #FAFAFA);
  cursor: default;
}

/* Le rappel de l'assistant depuis un formulaire vide : en tête, parce que
   c'est le chemin qu'on recommande. */
.builder-depart__wizard {
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gris-200);
}

/* Le retour à la composition : plus visible qu'un retour ordinaire, parce que
   l'école est au milieu d'un parcours et doit savoir qu'elle peut y revenir. */
.retour--compo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 12px;
  background: var(--bleu-50, #EFF6FF);
  border-radius: var(--rayon);
  color: var(--couleur-primaire);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   LE CONSTRUCTEUR DANS LE CADRE DU WIZARD (lot 6z)

   Le même composant qu'à la fiche, dans un cadre différent. Rien ne change du
   constructeur lui-même : on lui donne seulement une carte et une largeur.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PAS DE CADRE DANS LE CADRE (lot 7b) ───────────────────────────────────

   Le constructeur porte DÉJÀ sa carte, sa colonne de sections, et une carte
   par champ. L'envelopper d'une carte de plus faisait quatre niveaux de bordure
   pour un seul contenu.

   On lui donne donc de l'air, pas un cadre : le constructeur est le contenu de
   l'étape, il n'a pas à s'y annoncer. */
.wizard-constructeur {
  margin: 0 0 20px;
  padding: 22px 24px;
  background: var(--blanc);
  border-radius: var(--rayon);
}

/* LA COLONNE DES SECTIONS PERD SON CADRE : elle est déjà distinguée par sa
   largeur et son fond. Une bordure de plus ferait la troisième sur la même
   ligne verticale. */
.page--wizard .form-builder-sections {
  border: 0;
  background: transparent;
  padding-left: 0;
}

/* L'ÉDITEUR AUSSI : la carte du constructeur lui suffit. */
.page--wizard .form-builder-editor {
  border: 0;
  background: transparent;
  padding: 0 0 0 24px;
}

/* Le wizard est plus étroit que la fiche : le constructeur s'y adapte plutôt
   que de déborder. */
/* LA MÊME LARGEUR QU'À LA FICHE. J'avais rétréci la colonne à 200px en pensant
   gagner de la place pour l'éditeur — mais « Responsable légal 1 » n'y tenait
   plus, et deux écrans qui montrent la même chose différemment sont deux
   écrans à maintenir.

   Un composant unique se rend de la même façon partout : c'est le sens du
   mot. */
.page--wizard .wizard-constructeur .form-builder-shell {
  grid-template-columns: 280px minmax(0, 1fr);
}

@media (max-width: 900px) {
  .page--wizard .wizard-constructeur .form-builder-shell {
    grid-template-columns: 1fr;
  }
}

/* ── LE WIZARD S'ÉLARGIT POUR CONSTRUIRE (lot 6z) ──────────────────────────

   720px suffisent pour cocher des blocs ou relire un aperçu. Pas pour
   composer : le constructeur a deux colonnes, des menus, des poignées de
   glissement, et l'école y passe le plus clair de son temps.

   L'étape qui construit prend donc la largeur de la fiche. */
/* ── LE WIZARD PREND LA LARGEUR DÈS QU'IL MONTRE DES CARTES ───────────────

   Composer demande de la place, mais choisir aussi : vingt-neuf blocs à trois
   colonnes tiennent sur un écran, à deux ils demandent de défiler.

   Seul le récapitulatif reste étroit — une liste de six lignes n'a rien à
   gagner à s'étaler. */
/* ── LA LARGEUR SUIT L'ÉTAPE, PAS SON CONTENU (15/08/2026) ────────────────
   Ces trois sélecteurs lisent CE QUE LA PAGE CONTIENT. L'étape des notices
   ne rend sa grille que si des notices existent : sur une bibliothèque vide,
   aucune « wizard-blocs », donc largeur étroite — et l'étape rétrécissait
   entre deux visites, selon qu'on y avait posé quelque chose ou non.

   Philippe l'a vu à l'œil, deux fois. UNE LARGEUR QUI DÉPEND DU CONTENU
   CHANGE SOUS LES PIEDS DE CELUI QUI TRAVAILLE : c'est l'étape qui décide de
   sa place, pas ce qu'on y a mis.

   L'ÉTAPE POSE DONC UN MARQUEUR, et la règle le lit — comme le masquage par
   rôle suit un marqueur et non une adresse. Les trois anciens sélecteurs
   restent : ils servent des étapes dont le contenu EST la condition, et les
   retirer casserait leur largeur. */
.page--wizard:has(.wizard-constructeur),
.page--wizard:has(.wizard-blocs),
.page--wizard:has(.apercu-grille),
.page--wizard:has([data-etape-large]) {
  max-width: none;
  padding-right: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════
   L'APERÇU EN CARTES (lot 7c)

   Une section par carte, deux par ligne. L'aperçu montre LA FORME du
   formulaire avant son détail — une colonne unique de vingt-cinq questions
   demande de défiler longtemps pour comprendre ce qu'on a composé.
   ══════════════════════════════════════════════════════════════════════════ */

.apercu-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.apercu-carte {
  padding: 20px 22px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
}

.apercu-carte__titre {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte-principal);
}

/* Le compte dit la densité d'un coup d'œil, sans avoir à lire la carte. */
.apercu-carte__compte {
  margin: 2px 0 16px;
  font-size: .82rem;
  color: var(--texte-secondaire);
}

/* Les champs de l'aperçu sont inertes : c'est une vue, pas une saisie. */
.apercu-carte .champ + .champ {
  margin-top: 12px;
}

.apercu-carte .champ input:disabled,
.apercu-carte .champ select:disabled,
.apercu-carte .champ textarea:disabled {
  background: var(--gris-50, #FAFAFA);
  cursor: default;
}

/* ── LE FILTRE DES BLOCS (lot 7f) ──────────────────────────────────────────

   Vingt-neuf blocs se cherchent, ils ne se parcourent pas. Le champ agit dans
   la page, sans rechargement.
   ══════════════════════════════════════════════════════════════════════════ */

.wizard-filtre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

/* LE MÊME STYLE QUE LE FILTRE DE LA BIBLIOTHÈQUE : je n'avais posé que la
   largeur, si bien que le champ n'avait ni bordure ni fond — invisible sur un
   fond clair, au moment où l'école cherche parmi vingt-neuf blocs.

   Deux champs de recherche qui ne se ressemblent pas sont deux champs à
   maintenir. */
.wizard-filtre input[type="search"] {
  flex: 1;
  max-width: 420px;
  padding: 10px 12px;
  border: 1.5px solid var(--gris-200);
  border-radius: var(--rayon);
  font: inherit;
  background: var(--blanc);
  color: var(--texte-principal);
}

.wizard-filtre input[type="search"]:focus {
  border-color: var(--couleur-primaire);
  outline: none;
}

.wizard-filtre__compte {
  font-size: .85rem;
  color: var(--texte-secondaire);
}

/* La note de l'étape une : elle explique une absence plutôt que de la laisser
   passer pour un oubli. */
.wizard-intro__note {
  font-size: .88rem;
  color: var(--texte-secondaire);
}

/* ══════════════════════════════════════════════════════════════════════════
   LES DEUX TEMPS DE L'ÉTAPE UNE (lot 7i)

   Choisir une base et ajouter une brique sont deux gestes de nature
   différente : ils ne se présentent pas pareil. Les bases sont larges, pleine
   ligne, une par rangée — on en choisit UNE. Les blocs restent en grille — on
   en coche autant qu'on veut.
   ══════════════════════════════════════════════════════════════════════════ */

.wizard-section-titre {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texte-principal);
}

.wizard-section-titre--second {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--gris-200);
}

.wizard-bases {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.wizard-base {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wizard-base:hover { border-color: var(--couleur-primaire); }

.wizard-base:has(input:checked) {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 1px var(--couleur-primaire);
}

.wizard-base input[type="radio"] { margin-top: 3px; flex-shrink: 0; }

.wizard-base__corps { display: flex; flex-direction: column; gap: 3px; }

.wizard-base__nom {
  font-weight: 600;
  font-size: 1rem;
  color: var(--texte-principal);
}

.wizard-base__meta { font-size: .85rem; color: var(--couleur-primaire); }

.wizard-base__desc {
  font-size: .85rem;
  line-height: 1.45;
  color: var(--texte-secondaire);
}

/* La phrase-pont du wizard de création : elle promet ce que l'étape suivante
   tiendra, là où naît la pensée « comme l'an dernier ». */
.wizard-pont {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--gris-50, #FAFAFA);
  border-radius: var(--rayon);
  font-size: .88rem;
  color: var(--texte-secondaire);
}

/* Le numéro d'un temps : il dit la succession sans mot. Discret — c'est un
   repère, pas un titre. */
.wizard-section-titre__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--couleur-primaire);
  color: var(--blanc);
  font-size: .82rem;
  font-weight: 600;
  vertical-align: 1px;
}

/* La phrase qui dit la relation entre les deux temps. */
.wizard-section-aide {
  margin: -8px 0 16px 32px;
  font-size: .88rem;
  color: var(--texte-secondaire);
}

/* La phrase de réassurance des reprises : elle lève le doute sur le sort de
   l'original, juste au-dessus des cartes qui copient. */
.wizard-bases__note {
  margin: 0 0 10px;
  font-size: .85rem;
  color: var(--texte-secondaire);
}

/* Le geste d'un état vide : la phrase dit ce qui manque, le bouton dit quoi
   faire. Un état vide sans geste n'informe pas, il bloque. */
.etat-vide__geste {
  margin: 14px 0 0;
}

/* Les documents que l'école a écrits elle-même : montrés à l'étape 3 pour
   qu'elle voie l'état réel, jamais décochables — on ne retire pas d'un geste
   ce qu'on n'a pas proposé. */
.wizard-docs-maison {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: .88rem;
  color: var(--texte-secondaire);
}

/* « facultatif » sur un titre d'étape : la grille de cartes donne l'impression
   qu'il faut en prendre une. Le mot dit le contraire, sans crier. */
.wizard-section-titre__note {
  margin-left: 8px;
  font-size: .82rem;
  font-weight: 400;
  color: var(--texte-secondaire);
}

/* Les gestes d'ajout de pièce, hors du formulaire de coches : ils ouvrent une
   fenêtre, ils ne valident pas l'étape. */
.wizard-docs-ajout {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
}

/* Les pièces que l'école a écrites elle-même : même carte que le standard,
   sans coche — on ne décoche pas ce qu'on n'a pas proposé. Le liseré dit
   qu'elles viennent d'ailleurs. */
.wizard-bloc--maison {
  border-left: 3px solid var(--couleur-primaire);
}

.wizard-bloc--maison:hover { border-color: var(--gris-200); border-left-color: var(--couleur-primaire); }

/* ══════════════════════════════════════════════════════════════════════════
   L'APERÇU DES PIÈCES (lot 8d)

   Un aperçu ne dépose rien : il dit ce que la famille devra fournir. Le nom,
   ce qui est requis, les formats. Pas le mécanisme du dépôt.
   ══════════════════════════════════════════════════════════════════════════ */

.apercu-pieces {
  margin: 0;
  padding: 0;
  list-style: none;
}

.apercu-piece {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-100, #F3F4F6);
}

.apercu-piece:last-child { border-bottom: 0; }

.apercu-piece__nom {
  font-size: .93rem;
  font-weight: 500;
  color: var(--texte-principal);
}

.apercu-piece__consigne {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--texte-secondaire);
}

.apercu-piece__formats {
  font-size: .78rem;
  color: var(--couleur-primaire);
}

/* Les pièces que l'école a demandées elle-même : mêmes cartes que le standard,
   sans coche — on ne retire pas d'un geste ce qu'on n'a pas proposé. */
.wizard-bloc--maison {
  cursor: default;
  border-color: var(--gris-200);
  box-shadow: none;
}

/* Le bouton d'options d'une pièce maison : tout à droite de sa carte, jamais à
   la suite du texte. La carte devient donc une ligne à deux bouts. */
.wizard-bloc--maison {
  justify-content: space-between;
  align-items: flex-start;
}

.wizard-bloc--maison .item-menu-btn {
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-start;
}

/* Le nom en <strong> ne doit pas peser plus que dans les autres cartes : c'est
   une marque pour le menu, pas un cri. */
strong.wizard-bloc__nom {
  font-weight: 600;
}

/* Le panier des pièces ajoutées, séparé du rayon. Le titre portait la marge ;
   en le retirant, les deux groupes se sont collés — la séparation appartient
   au groupe, pas à son titre. */
.wizard-blocs--panier {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--gris-200);
}


/* ══════════════════════════════════════════════════════════════════════════
   LA CARTE DE FIN DU WIZARD (lot 8p)

   Deux lignes et un bouton : ce qui vient après. Elle annonce, elle ne
   documente pas — le détail vit là où le geste se fait.
   ══════════════════════════════════════════════════════════════════════════ */

.carte-fin {
  margin: 24px 0 0;
  padding: 20px 22px;
  background: var(--bleu-50, #EFF6FF);
  border-radius: var(--rayon);
}

.carte-fin__titre {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte-principal);
}

.carte-fin__texte {
  margin: 0 0 14px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--texte-secondaire);
}

/* L'aide de l'écran d'import : elle documente ce que la carte annonce. */
.import-aide {
  margin-bottom: 20px;
  padding: 18px 22px;
}

.import-aide p { margin: 0 0 6px; font-size: .9rem; line-height: 1.5; }
.import-aide__titre { font-weight: 600; color: var(--texte-principal); }
.import-aide__opt { color: var(--texte-secondaire); font-size: .85rem !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LE PARCOURS D'IMPORT — QUATRE ÉCRANS (lot 10b)

   Écrans neufs, charte neuve : rien n'est repris de l'ancienne page, dont les
   41 attributs en ligne meurent avec elle.
   ══════════════════════════════════════════════════════════════════════════ */

.import-rang {
  margin: 4px 0 18px;
  font-size: .8rem;
  color: var(--texte-secondaire);
}

/* ── Écran 1 : le dépôt ─────────────────────────────────────────────────── */

.import-depot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
  margin-bottom: 18px;
}

.import-depot__nom {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
}

.import-depot__erreur {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #B45309;
}

/* ── Écran 2 : la correspondance ────────────────────────────────────────── */

.import-corr__ligne {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

/* Une cellule vide se voit : c'est souvent le signe d'une colonne mal rangée. */
.import-corr__vide {
  color: var(--texte-secondaire);
  background: var(--gris-50, #FAFAFA);
}

.import-sous-titre {
  margin: 26px 0 10px;
  font-size: .95rem;
  font-weight: 600;
}

/* ── Écran 3 : le contrôle ──────────────────────────────────────────────── */

.import-bilan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.import-bilan__fait {
  font-size: 1rem;
}

.import-bilan__fait strong {
  font-size: 1.35rem;
  margin-right: 4px;
}

.import-bilan__fait--ok strong     { color: var(--couleur-primaire); }
.import-bilan__fait--neutre strong { color: var(--texte-secondaire); }
.import-bilan__fait--alerte strong { color: #B45309; }

.import-bilan__note {
  margin: 10px 0 0;
  font-size: .85rem;
  color: var(--texte-secondaire);
}

.import-bilan__erreur {
  margin: 0;
  font-size: .92rem;
  color: #DC2626;
}

/* Chaque ligne fautive est nommée : « Ligne 12 : email invalide ». */
.import-anomalies {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.import-anomalies__item {
  padding: 9px 14px;
  margin-bottom: 6px;
  border-left: 3px solid var(--gris-200);
  background: var(--gris-50, #FAFAFA);
  border-radius: 0 6px 6px 0;
  font-size: .88rem;
}

.import-anomalies__item--erreur { border-left-color: #DC2626; }
.import-anomalies__item--ignore { border-left-color: #CBD5E1; }

/* Le geste de dépôt, sous le mode d'emploi qu'il accompagne. */
.import-depot__geste {
  margin: 18px 0 0;
}

/* La ligne d'état d'un import sans invitations : elle ne paraît que si elle
   est vraie, et disparaît dès que les mails sont partis. */
.ligne-etat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--bleu-50, #EFF6FF);
}

.ligne-etat__texte {
  margin: 0;
  font-size: .95rem;
}

.ligne-etat__texte strong {
  font-size: 1.15rem;
  margin-right: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   UN BOUTON QUI TRAVAILLE LE DIT — LOT 11e (14/08/2026)

   Relevé du 14/08 au soir : le bouton d'envoi des invitations ÉTAIT bien
   désactivé (lot 11d), mais AUCUNE règle générale ne touchait « .btn » à
   l'état désactivé. Les deux seules existantes sont portées par des
   sélecteurs d'autres écrans (« .campaign-card--new .btn[disabled] » et
   « .publish-modal__footer .btn[disabled] ») : elles ne l'atteignaient pas.

   Résultat à l'écran : curseur en main, survol qui répond, transformation au
   clic — un bouton mort qui a l'air vivant. Philippe : « il semble toujours
   cliquable ». Un état invisible n'est pas un état.

   Cette feuille s'adapte au HTML existant : aucune classe renommée, aucune
   règle antérieure modifiée, tout est ajouté ici et scopé au strict besoin.
   ══════════════════════════════════════════════════════════════════════════ */

.btn[disabled],
.btn:disabled {
  opacity: .62;
  cursor: not-allowed;
  box-shadow: none;
}

/* LE SURVOL ET LE CLIC SE TAISENT AUSSI. « .btn:hover » et « .btn:active »
   continuent de s'appliquer à un bouton désactivé — c'est ce reste de
   réponse qui le faisait paraître cliquable. */
.btn[disabled]:hover,
.btn:disabled:hover {
  opacity: .62;
  box-shadow: none;
}

.btn[disabled]:active,
.btn:disabled:active {
  transform: none;
}

/* ── LE ROUET ────────────────────────────────────────────────────────────
   La flèche en rond qui tourne sur elle-même, posée devant le texte d'état.
   Elle hérite de la couleur du bouton, donc elle suit le thème sans qu'on
   ait à la décliner par variante. */
.btn__rouet {
  flex: none;
  animation: websco-rouet .9s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes websco-rouet {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* UN BOUTON QUI TRAVAILLE GARDE SA COULEUR PLEINE : l'atténuation des
   désactivés dirait « rien ne se passe » alors qu'il se passe quelque chose.
   L'inactivité et le travail sont deux états, ils ne se peignent pas pareil. */
.btn[data-envoi-en-cours],
.btn[data-envoi-en-cours]:hover {
  opacity: 1;
  cursor: progress;
}

/* UNE ANIMATION QUI IGNORE LE RÉGLAGE SYSTÈME EST UNE AGRESSION pour qui
   souffre de troubles vestibulaires. Le rouet s'arrête, mais RESTE VISIBLE :
   il porte l'information, il ne l'illustre pas. */
@media (prefers-reduced-motion: reduce) {
  .btn__rouet {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA LIGNE D'ÉTAT AU NIVEAU DU MONDE — LOT 11f (arbitrage du 14/08/2026)

   Elle ne paraissait que sur un écran cadré sur une campagne. La règle du
   mur s'étend : plusieurs campagnes en attente, plusieurs lignes, chacune
   avec son bouton scopé — et jamais un bouton agrégé.

   La feuille s'adapte au HTML existant : « .ligne-etat » n'est pas touchée,
   on ajoute seulement ce que les nouveaux éléments demandent.
   ══════════════════════════════════════════════════════════════════════════ */

/* PLUSIEURS LIGNES SE SUIVENT : sans cela elles se collent, et l'école lit
   un bloc au lieu de trois faits distincts. */
.ligne-etat + .ligne-etat {
  margin-top: -6px;
}

/* LE TITRE DE LA CAMPAGNE distingue une ligne de sa voisine. Il ne paraît
   que hors cadre — il est donc toujours porteur, jamais redondant. */
.ligne-etat__campagne {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--gris-200);
  font-size: .8rem;
  color: var(--texte-doux, var(--gris-400));
}

/* « ET N AUTRES » : une phrase, pas une carte. Elle ne propose aucun geste
   d'envoi — elle ouvre une porte, et c'est tout ce qu'elle doit avoir l'air
   de faire. */
.ligne-etat__autres {
  margin: -8px 0 16px;
  padding: 0 20px;
  font-size: .875rem;
  color: var(--texte-doux, var(--gris-400));
}

/* L'ÉTAT VIDE D'UN MONDE À PLUSIEURS CAMPAGNES : il liste plutôt que de se
   taire, et il ne choisit pas à la place de l'école. */
.tableau-empty__choix {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.tableau-empty__choix a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--rayon);
  border: 1px solid var(--gris-200);
  text-decoration: none;
}

.tableau-empty__choix a:hover {
  border-color: var(--couleur-primaire);
}

/* ══════════════════════════════════════════════════════════════════════════
   LES GESTES DE LA LIGNE D'ÉTAT — LOT 11g (14/08/2026)

   Deux gestes de nature différente ne se présentent jamais pareil : l'envoi
   est l'action principale (aplat d'encre), l'annulation est un repentir
   (lien discret). Rien ne les met au même rang.
   ══════════════════════════════════════════════════════════════════════════ */

.ligne-etat__gestes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ligne-etat__gestes form {
  margin: 0;
}

/* Le repentir de l'écran quatre : sous les actions, discret, jamais en
   concurrence avec l'envoi qui est l'action de l'écran. */
.import-repentir {
  margin: 14px 0 0;
  text-align: center;
}

/* ── LA RÈGLE DU RACCOURCI EST RETIRÉE (lot 13e, 15/08/2026) ───────────────
   Elle masquait « [data-geste-creer] », porté par une TUILE VIDE qui menait au
   wizard. Le raccourci est mort : une tuile a une destination, la liste de son
   monde, pour tous les rangs.

   Le marqueur ne se pose plus nulle part — le grep en rend zéro. UNE
   DÉCLARATION RETIRÉE FERME SES SURFACES : garder une règle sans cible ferait
   croire à un mécanisme vivant, et le prochain qui la lira cherchera ce
   qu'elle protège. */

/* ══════════════════════════════════════════════════════════════════════════
   LES GESTES QUI RESTAIENT VISIBLES EN CONSULTATION — 15/08/2026

   Relevés par Philippe en recette, compte consultation, en partant du mur.
   Aucun n'aboutissait : le serveur refuse, les actions sont en gestion. Mais
   la preuve ② du contrat interdit le bouton mort, et ceux-ci promettaient
   d'écrire à des familles ou d'effacer un import.

   TROIS MARQUEURS, TROIS GESTES :
   · la ligne d'état de la liste et ses deux boutons, envoyer et annuler ;
   · le bloc « Écrire à ce visiteur » / « Répondre » de la fiche.

   Le masque cache, il ne garde jamais. La garde est au serveur, et elle
   tenait déjà — Philippe l'a constaté : « j'ai aucun pouvoir ».
   ══════════════════════════════════════════════════════════════════════════ */

.body--lecture-seule .ligne-etat__gestes,
.body--lecture-seule [data-geste-ecrire] {
  display: none !important;
}

/* LA LIGNE D'ÉTAT ELLE-MÊME RESTE : elle DIT un état, et lire un état est le
   métier de la consultation. Ce sont ses gestes qui partent, pas son fait —
   « 1 invitation à envoyer · 2 sans email utilisable » reste vrai et lisible.
   On retire le pouvoir, jamais l'information. */
.body--lecture-seule .ligne-etat {
  justify-content: flex-start;
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ÉCRAN DE CHOIX DE L'IMPORT — LOT 11l (15/08/2026)

   Il ne paraît que si le monde compte PLUSIEURS campagnes : à une seule, on
   entre sans poser de question — l'illusion d'un choix coûte plus qu'une
   contrainte assumée.

   Des cartes, pas un menu déroulant : deux gestes de nature différente ne se
   présentent jamais pareil, et celui-ci est un choix de destination, pas un
   réglage.
   ══════════════════════════════════════════════════════════════════════════ */

.import-choix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.import-choix__carte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  text-decoration: none;
  border: 1px solid var(--gris-200);
}

.import-choix__carte:hover {
  border-color: var(--couleur-primaire);
}

.import-choix__titre {
  font-weight: 600;
  font-size: 1rem;
}

.import-choix__meta {
  font-size: .85rem;
  color: var(--texte-secondaire);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA FENÊTRE DE SAISIE D'UN VISITEUR — LOT 11m (15/08/2026)

   Elle rend les sections du formulaire PUBLIC, par le même écrivain. Deux de
   leurs éléments n'ont pas de sens dans une fenêtre, et Philippe les a vus
   tout de suite :

   ① LE NUMÉRO DE SECTION compte les étapes d'un parcours que la famille
      traverse. Une fenêtre n'a pas d'étapes, et « 1 » posé au-dessus d'un
      titre unique est du bruit. On ne peut pas passer zéro à l'écrivain : il
      rendrait « 0 », le défaut corrigé au formulaire public. On le masque
      donc ici, où il ne sert pas.

   ② LA BANNIÈRE « Des champs obligatoires sont à compléter » est une bannière
      d'ERREUR, rendue en permanence et révélée par le script du portail au
      moment où il en trouve une. Ce script n'est pas chargé ici : elle
      s'affichait donc toujours, et ANNONÇAIT UNE ERREUR QUI N'EXISTAIT PAS.

   On ne touche ni à l'écrivain ni au formulaire public : la feuille s'adapte
   au html existant, jamais l'inverse.
   ══════════════════════════════════════════════════════════════════════════ */

[data-saisie-modal] .pf-section__num,
[data-saisie-modal] .pf-section__error-banner {
  display: none !important;
}

/* La section perd son cadre : dans une fenêtre, elle EST la fenêtre. */
[data-saisie-modal] .pf-section {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
}

[data-saisie-modal] .pf-section__head h2 {
  font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   L'INFOBULLE DU PRODUIT (lot 14s, 16/08/2026)

   L'attribut « title » du navigateur met UNE SECONDE À PARAÎTRE, s'affiche
   dans une police système qui n'est pas la nôtre, et disparaît au bout de
   quelques secondes même si l'œil est encore dessus.

   Neuf endroits du produit s'en servent. Celle-ci les sert tous.

   ── ELLE NE REMPLACE PAS « title », ELLE LE DOUBLE ───────────────────────

   Le texte reste dans « title » : les lecteurs d'écran le lisent, et un
   navigateur qui ignorerait ces règles garderait l'infobulle native. On
   ajoute une couche, on n'en retire aucune.

   Le porteur déclare « data-bulle » et le texte voyage dans « aria-label » —
   « attr() » ne sait lire que des attributs, et « title » afficherait alors
   DEUX bulles superposées, la nôtre et celle du navigateur.

   ── ELLE PARAÎT VITE, ELLE PART DOUCEMENT ────────────────────────────────

   Un délai à l'ouverture ferait douter d'avoir visé juste ; on ouvre en 90 ms.
   Une disparition sèche donnerait l'impression d'un raté ; on ferme en 160 ms.
   ══════════════════════════════════════════════════════════════════════════ */
[data-bulle] {
  position: relative;
}

[data-bulle]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);

  /* LA LARGEUR EST BORNÉE, mais le texte va à la ligne : une phrase de vingt
     mots sur une seule ligne sortirait de l'écran par la droite. */
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: left;

  padding: 8px 10px;
  border-radius: var(--rayon-sm);
  background: #16191F;
  color: #fff;
  font-size: .78rem;
  line-height: 1.4;
  font-weight: 400;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;

  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

/* LE FOCUS CLAVIER L'OUVRE AUSSI : une information qui ne s'atteint qu'à la
   souris n'existe pas pour qui navigue au clavier. */
[data-bulle]:hover::after,
[data-bulle]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .09s ease, transform .09s ease, visibility 0s;
}

/* ── SUR UN ÉCRAN TACTILE, ELLE NE PARAÎT PAS ────────────────────────────
   « hover » y est simulé au premier toucher, ce qui ferait surgir la bulle
   sous le doigt AU MOMENT DU CLIC — elle masquerait le bouton qu'on presse.

   On l'éteint franchement : le texte reste dans « title » pour les lecteurs
   d'écran, et les gestes qui portent une bulle sont réversibles. */
@media (hover: none) {
  [data-bulle]::after {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE CONTENU LÉGAL EN MODALE (lot 16c, 16/08/2026)

   La page légale vit côté familles, avec sa feuille. Injectée dans une modale
   de l'administration, elle arrive SANS SES STYLES : les titres seraient des
   lignes grasses collées les unes aux autres.

   On lui redonne ici la respiration qu'elle a là-bas — sans copier sa feuille,
   qui n'est pas chargée sur cet écran.
   ══════════════════════════════════════════════════════════════════════════ */
.legal-modal__corps {
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px 8px;
}

.legal-modal__corps h1 {
  margin: 0 0 20px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--texte-principal);
}

.legal-modal__corps h2 {
  margin: 26px 0 8px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--texte-principal);
}

.legal-modal__corps p {
  margin: 0 0 12px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--texte-secondaire);
}

/* LES LISTES DE LA PAGE LÉGALE, DANS LA MODALE : elle arrive sans la feuille
   du portail, ses listes seraient collées au bord. */
.legal-modal__corps ul {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--texte-secondaire);
}

.legal-modal__corps li { margin-bottom: 4px; }

.legal-modal__corps strong {
  color: var(--texte-principal);
  font-weight: 600;
}

/* LE MOT D'ATTENTE NE BOUSCULE PAS : il occupe la place du contenu à venir,
   pour que la modale ne saute pas de taille quand il arrive. */
.legal-modal__attente {
  padding: 24px 0;
  text-align: center;
  color: var(--gris-400);
}

/* ══════════════════════════════════════════════════════════════════════════
   LES DOSSIERS ARCHIVÉS, QUAND ON LES DEMANDE (lot 17g, 16/08/2026)

   Ils sont masqués par défaut : la liste de travail montre le travail. Le lien
   du pied les ramène, et ils doivent alors SE DISTINGUER — sans marque, ils se
   confondraient avec le vivant, et l'école cliquerait des gestes que le verrou
   refuse.

   Le liseré et le fond légèrement grisé suffisent : c'est un ÉTAT, pas une
   alerte. Un dossier archivé n'a rien d'anormal, il est rangé.
   ══════════════════════════════════════════════════════════════════════════ */
.ligne-dossier--archivee {
  background: var(--gris-100, #F7F9FC);
}

.ligne-dossier--archivee td:first-child {
  box-shadow: inset 3px 0 0 var(--gris-300, #CBD5E1);
}

/* LE LIEN DU PIED : un réglage d'affichage, pas un geste de travail — il se
   lit sans peser, à côté du compte et de la pagination. */


/* QUAND IL EST ACTIF, il porte l'état en cours : l'école doit voir d'un coup
   d'œil qu'elle regarde une liste élargie. */

/* ── LE CHOIX DU MOTIF DE REFUS (lot 21c, 17/08/2026) ──────────────────────
   Six boutons, six phrases entières : l'école LIT ce que la famille lira. Le
   libellé court sert de repère, la phrase dit le message réel. */
.motif-choix {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 4px;
}

.motif-choix__btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.motif-choix__btn:hover,
.motif-choix__btn:focus-visible {
  border-color: var(--primaire, #1e4e8c);
  background: var(--primaire-clair, #e9edf4);
}

.motif-choix__court {
  display: block;
  font-weight: 600;
  font-size: .95rem;
}

.motif-choix__phrase {
  display: block;
  margin-top: 2px;
  font-size: .85rem;
  color: var(--texte-secondaire, #475569);
}

.campaign-modal__aide {
  margin: 12px 0 0;
  font-size: .85rem;
  color: var(--texte-secondaire, #475569);
}

/* ── L'OBLIGATION SE LIT SUR LA CARTE (lot 22a, 17/08/2026) ────────────────
   Philippe cochait sans savoir qu'il rendait une pièce exigible. La mention
   suit la ligne des formats, en plus discret : l'école cherche le nom, elle
   lit l'effet une fois trouvé. */
.wizard-bloc__exige {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--secondaire-fonce, #8c5509);
}

/* ── LES CHOIX DE LA FENÊTRE D'IMPACT (lot 25a, 17/08/2026) ────────────────
   Deux cases indépendantes, avec leur aide sous le libellé : l'école doit
   comprendre ce qu'elle déclenche avant de cocher. */
.impact-choix {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
}

.impact-choix + .impact-choix {
  border-top: 1px solid var(--bordure, #e2e8f0);
}

.impact-choix input {
  margin-top: 3px;
  flex: none;
}

.impact-choix__aide {
  display: block;
  margin-top: 2px;
  font-size: .85rem;
  color: var(--texte-secondaire, #475569);
}

/* LA CASE DES VALIDÉS SE DISTINGUE : elle défait un travail fait. */
.impact-choix--valides .impact-choix__aide {
  color: var(--secondaire-fonce, #8c5509);
}

/* ── LE BANDEAU DES AJOUTS POSTÉRIEURS (lot 27b, 17/08/2026) ───────────────
   En haut de la fiche, sous l'en-tête : l'école le voit en arrivant, sans le
   chercher. Ton d'avertissement, pas d'alerte — rien n'est cassé, une décision
   est attendue. */
.ajouts-bandeau {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--secondaire, #c2760c);
  border-radius: var(--rayon, 10px);
  background: var(--secondaire-clair, #f6ecdd);
}

.ajouts-bandeau__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 260px;
  flex: 1 1 320px;
  font-size: .9rem;
}

.ajouts-bandeau__gestes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── LES DEUX CASES DU BANDEAU (lot 27c, 17/08/2026) ───────────────────────
   Elles se combinent : prévenir et remarquer sont indépendants. */
.ajouts-bandeau__choix {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 0;
  font-size: .88rem;
}

.ajouts-bandeau__case {
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

/* ── LA POIGNÉE GARDE SA TAILLE (lot 29f, 17/08/2026) ──────────────────────
   Philippe : « .form-field-builder-item span prend le dessus apparemment ».

   Il avait raison, et la cause est la SPÉCIFICITÉ : la poignée est un
   « span », et « .form-field-builder-item span » vaut une classe plus un
   élément — plus fort que ma seule classe « .drag-handle ».

   Ma règle arrivait après dans le fichier, mais l'ordre ne départage que des
   sélecteurs de MÊME poids.

   UN SÉLECTEUR PLUS PRÉCIS L'EMPORTE SUR UN SÉLECTEUR PLUS TARDIF. */
.form-field-builder-item .drag-handle,
.form-section-pill .drag-handle {
  font-size: 1.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA RECHERCHE GLOBALE DU MUR (lot 31a, 17/08/2026)

   Discrète, parce qu'elle n'est pas le sujet : le mur montre l'état des
   mondes, la recherche est un raccourci pour qui sait déjà ce qu'il veut.
   ══════════════════════════════════════════════════════════════════════════ */
.mur-recherche {
  position: relative;
  max-width: 380px;
  /* ── CENTRÉE, AU-DESSUS DU TITRE (lot 31c, 17/08/2026) ──────────────────
     Philippe la voulait en tête et centrée : elle devient le premier geste
     offert, avant même que le mur ne se présente.

     ── ET SON ARRONDI RESTE PLEIN ────────────────────────────────────────
     Le mur est un damier de cartes rectangulaires. Un champ qui prend leur
     forme s'y fond et devient une tuile de plus ; l'ovale dit « je ne suis
     pas une carte, je suis un outil ». */
  /* ── DANS L'EN-TÊTE, À DROITE DU NOM (lot 31d, 17/08/2026) ──────────────
     Centrée, elle flottait : seule chose non alignée d'une page où tout part
     de la gauche. Dans l'en-tête, elle devient un outil de la barre — comme
     les boutons d'action ailleurs dans le produit.

     ── ET SON ARRONDI RESTE PLEIN ────────────────────────────────────────
     Le mur est un damier de cartes rectangulaires. Un champ qui prend leur
     forme s'y fond ; l'ovale dit « je ne suis pas une carte, je suis un
     outil ». */
  flex: 1 1 300px;
  margin: 0;
}

/* ── LA LOUPE, ET SON TOUR COMPLET ────────────────────────────────────────
   Le produit anime déjà ses icônes : l'aiguille du journal tourne, le
   couvercle des exports se soulève. La recherche parle la même langue — même
   durée, même courbe. */
.mur-recherche__loupe {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  color: var(--texte-secondaire, #475569);
  pointer-events: none;
  transition: color .2s, transform 500ms cubic-bezier(.4, 0, .2, 1);
}

.mur-recherche:hover .mur-recherche__loupe,
.mur-recherche:focus-within .mur-recherche__loupe {
  color: var(--primaire, #1e4e8c);
  transform: rotate(360deg);
}



/* Le libellé existe pour les lecteurs d'écran : le seul repère visuel est le
   texte d'invite, qui disparaît à la frappe. */
.mur-recherche__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mur-recherche__champ {
  width: 100%;
  /* ── LE TEXTE COMMENCE APRÈS LA LOUPE (lot 31d) ────────────────────────
     Loupe à 14 px, large de 17 : le texte ne peut pas commencer avant 42.
     Une règle « padding-left » posée PLUS BAS serait écrasée par ce
     raccourci — c'est ici que le chiffre doit vivre. */
  padding: 9px 14px 9px 42px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  font-size: .92rem;
  transition: border-color .15s, box-shadow .15s;
}

.mur-recherche__champ:focus {
  outline: none;
  border-color: var(--primaire, #1e4e8c);
  box-shadow: 0 0 0 3px var(--primaire-clair, #e9edf4);
}

/* ── LES RÉSULTATS FLOTTENT AU-DESSUS DU MUR ──────────────────────────────
   Ils ne poussent pas les tuiles : l'école garde ses repères pendant qu'elle
   cherche. */
.mur-recherche__resultats {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 62vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: var(--rayon, 10px);
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}

.mur-recherche__section + .mur-recherche__section {
  margin-top: 6px;
  border-top: 1px solid var(--bordure, #e2e8f0);
  padding-top: 6px;
}

.mur-recherche__section h2 {
  margin: 4px 10px 6px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texte-secondaire, #475569);
}

.mur-recherche__section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mur-recherche__section a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.mur-recherche__section a:hover,
.mur-recherche__section a:focus-visible,
/* ── LE CLAVIER MARQUE COMME LA SOURIS (lot 31e, 17/08/2026) ──────────────
   Une école qui tape un nom a déjà les mains sur le clavier : la ligne
   choisie à la flèche doit se voir exactement comme celle qu'on survole. */
.mur-recherche__section a.est-choisi {
  background: var(--primaire-clair, #e9edf4);
}

.mur-recherche__nom {
  display: block;
  font-weight: 600;
  font-size: .92rem;
}

.mur-recherche__meta {
  display: block;
  margin-top: 1px;
  font-size: .8rem;
  color: var(--texte-secondaire, #475569);
}

/* Le vide et le cap parlent : ils ne sont pas des lignes de plus. */
.mur-recherche__vide,
.mur-recherche__cap {
  margin: 0;
  padding: 12px 12px;
  font-size: .86rem;
  color: var(--texte-secondaire, #475569);
}

.mur-recherche__cap {
  border-top: 1px solid var(--bordure, #e2e8f0);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA RECHERCHE PASSE SOUS LE NOM SUR MOBILE (lot 31d, 17/08/2026)

   Philippe : « assure-toi que sur mobile le champ passe sous le nom de
   l'établissement, qu'ils ne partagent pas la même ligne ».

   Sur une largeur de téléphone, deux éléments sur une ligne donnent deux
   éléments écrasés : le nom se coupe, le champ devient inutilisable.

   DEUX CHOSES QUI NE TIENNENT PAS CÔTE À CÔTE SE METTENT L'UNE SOUS L'AUTRE.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .mur-entete {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  /* Le nom prend la ligne entière, le champ prend la suivante. */
  .mur-entete__nom {
    flex: 1 0 100%;
  }

  .mur-recherche {
    flex: 1 0 100%;
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LES DEUX NOUVEAUTÉS DE LA TUILE (lot 32a, 17/08/2026)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LE CHIFFRE ACTIONNABLE EST UNE PORTE ────────────────────────────────
   Il se distingue sans crier : la tuile entière est déjà un lien, celui-ci
   mène ailleurs — vers la liste filtrée.

   ── « EN LIGNE », PARCE QUE LE TRAIT SUIT LE TEXTE ──────────────────────

   Philippe : « le soulignage est sur toute la largeur de la carte ».

   La classe sert aussi à l'amorce « Créer votre premier… », qui est un « p » —
   un bloc, donc large de toute la carte. Le trait s'étirait avec lui.

   « inline » ramène l'élément à la largeur de ses mots. UNE DÉCORATION SUIT
   SON TEXTE, PAS SON CONTENEUR. */
.mur-tuile__lien {
  display: inline;
  cursor: pointer;
  color: var(--primaire, #1e4e8c);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mur-tuile__lien:hover,
.mur-tuile__lien:focus-visible {
  border-bottom-color: currentColor;
}

/* ── L'ÉCHÉANCE PROCHE SE VOIT ───────────────────────────────────────────
   Orange, pas rouge : rien n'est cassé, il reste du temps — mais il faut
   regarder. Au-delà de sept jours, la ligne redevient grise.

   L'ALERTE PERMANENTE CESSE D'ÊTRE UNE ALERTE. */
.mur-tuile__echeance--proche {
  color: var(--secondaire-fonce, #8c5509);
  font-weight: 500;
}

/* ── LA PASTILLE QUI MÈNE (lot 36b, 17/08/2026) ────────────────────────────
   Philippe : « on perd le texte en rouge, on a un décalage avec la pastille
   voisine, et la bordure bleue au survol est laide ».

   Ma première classe imposait la couleur d'un lien et une bordure inférieure :
   elle écrasait le rouge du danger et désalignait la pastille.

   ── LA PASTILLE RESTE UNE PASTILLE ──────────────────────────────────────

   Elle garde sa couleur et sa forme. Seul le survol change — un assombrissement
   du fond, comme un bouton qu'on presse — parce qu'il faut bien dire qu'elle
   mène quelque part.

   AUCUNE BORDURE : elle déplacerait le texte d'un pixel et casserait
   l'alignement avec sa voisine. */
.mur-tuile__pastille-lien {
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
}

.mur-tuile__pastille-lien:hover,
.mur-tuile__pastille-lien:focus-visible {
  /* ── LE HALO SUIT LA PASTILLE (lot 39a, 17/08/2026) ────────────────────
     Il était rouge — hérité de la pastille de purge. Posé sur la pastille
     d'état, il aurait teinté d'alarme une information neutre.

     « currentColor » le fait suivre la couleur du texte : rouge sur le
     danger, gris sur l'état. UNE DÉCORATION EMPRUNTE SA COULEUR À CE QU'ELLE
     DÉCORE. */
  filter: brightness(.94);
  /* « color-mix » adoucit sans figer une teinte : le halo reste discret
     quelle que soit la pastille. */
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
  outline: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   LE SURTITRE DU MUR (lot 41a, 17/08/2026)

   La date du jour au-dessus du nom de l'établissement.

   ── UNE ÉTIQUETTE, PAS UN CONCURRENT ────────────────────────────────────

   Le nom reste le SEUL titre de la page : la date est petite, grise, de
   graisse normale. Elle situe, elle ne réclame pas.
   ══════════════════════════════════════════════════════════════════════════ */
.mur-entete__bloc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mur-entete__date {
  margin: 0;
  font-size: .78rem;
  font-weight: 400;
  color: var(--texte-secondaire, #475569);
  /* La première lettre du jour vient de PHP en majuscule ; rien à forcer ici. */
  letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA VISITE GUIDÉE (lot 52a, 18/08/2026)

   Du surlignage et une carte : six étapes ne justifient pas une bibliothèque.
   ══════════════════════════════════════════════════════════════════════════ */
.visite__voile {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(15, 23, 42, .42);
}

/* ── LA CARTE EST FIXE ────────────────────────────────────────────────────
   Son placement emploie des coordonnées de fenêtre : la leçon du lot 51a. */
.visite__carte {
  position: fixed;
  z-index: 901;
  /* ── UNE SEULE CARTE, TOUJOURS AU CENTRE (lot 53a, 18/08/2026) ─────────
     Le placement dynamique servait à suivre six cibles. Il n'y a plus de
     cible : la carte parle du produit, pas d'un élément de l'écran. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 860 px par défaut — décision de Philippe (20/08) : la frise à trois
     temps sous-titrés était étriquée à 560. Le min() garde les petits
     écrans, la media query sous 600 px empile. */
  width: min(860px, calc(100vw - 32px));

  /* ── DE L'AIR, ET SUR CETTE CARTE SEULEMENT (lot 55e, 18/08/2026) ──────
     Philippe : « les blocs bibliothèque du wizard ont changé d'apparence,
     tout est centré à l'intérieur des cartes ».

     La cause était dans mon outil, pas dans ma règle : « str.replace » de
     Python remplace TOUTES les occurrences par défaut. « padding: 22px 24px »
     vivait dans TREIZE règles du produit — cartes compteur, actions groupées,
     résumés de fiche, sommaires d'archives, blocs du wizard, bilan d'import.
     Les treize ont reçu l'air et le centrage de la carte d'accueil.

     UN REMPLACEMENT SANS BORNE TOUCHE TOUT CE QUI RESSEMBLE À SA CIBLE.

     La règle vit désormais DANS son sélecteur, où elle ne peut essaimer. */
  padding: 46px 48px 40px;
  text-align: center;
  border-radius: var(--rayon, 10px);
  background: #fff;
  box-shadow: 0 16px 48px rgba(15, 23, 42, .28);
}

.visite__rang {
  margin: 0 0 4px;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--texte-secondaire, #475569);
}

.visite__titre {
  margin: 0 0 18px;
  font-size: 1.5rem;
  line-height: 1.28;
}

.visite__texte {
  margin: 0 0 28px;
  font-size: 1.02rem;
  /* Une interligne large se lit sans effort : c'est une invitation, pas une
     consigne. */
  line-height: 1.65;
  color: var(--texte-secondaire, #475569);
}

.visite__gestes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* LE GESTE PRINCIPAL AU CENTRE : il n'y a qu'une chose à faire ici. */
  justify-content: center;
  align-items: center;
}

/* ── LE FONCTIONNEMENT EN UNE IMAGE (lot B, 20/08/2026) ───────────────────
   Trois temps titrés, entre le texte et le geste — contenus et forme
   arbitrés par Philippe (aperçus v2/v3). La frise décrit le parcours,
   jamais l'état de l'écran. Chaleur dans la charte : pastilles pleines au
   clair de la marque, chiffre en primaire, fil pointillé entre les temps
   (un pseudo-élément du pas suivant, rien de plus à maintenir). */
.visite__etapes {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 26px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.visite__etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1 1 0;
  position: relative;
}

.visite__etape + .visite__etape::before {
  content: '';
  position: absolute;
  right: calc(100% - 6px);
  top: 17px;
  width: 52px;
  border-top: 2px dotted #B9C6DB;
}

.visite__etape-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: var(--couleur-primaire-clair, #EDF1F8);
  border-radius: 50%;
  font-size: .92rem;
  font-weight: 600;
  color: var(--couleur-primaire, #2E5288);
}

.visite__etape-textes {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.visite__etape-titre {
  font-size: .92rem;
  font-weight: 600;
  color: var(--texte-principal, #0f172a);
}

.visite__etape-sous {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--texte-secondaire, #475569);
}

/* ── ET SUR UN PETIT ÉCRAN, LA FRISE S'EMPILE ─────────────────────────────
   Trois colonnes à sous-textes ne tiennent pas sous 600 px : chaque temps
   devient une ligne, pastille à gauche, textes alignés à gauche, le fil
   pointillé n'a plus de sens et disparaît. */
@media (max-width: 600px) {
  .visite__carte {
    padding: 30px 22px 26px;
  }

  .visite__etapes {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .visite__etape {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }

  .visite__etape + .visite__etape::before {
    content: none;
  }
}

/* ── LA PORTE DE SORTIE, DISCRÈTE (lot 55c, 18/08/2026) ───────────────────
   Philippe : « les deux boutons côte à côte brisent l'alignement centré ».

   DEUX BOUTONS CÔTE À CÔTE POSENT UN CHOIX ÉGAL. Il n'y en a pas : il y a un
   geste, et une porte de sortie.

   Elle est un lien, pas un bouton — et elle ne prend le soulignement qu'au
   survol, pour ne pas concurrencer le geste au repos. */
.visite__plustard {
  display: inline-block;
  margin: 16px auto 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-size: .88rem;
  color: var(--texte-secondaire, #475569);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.visite__plustard:hover,
.visite__plustard:focus-visible {
  color: var(--texte-principal, #0f172a);
  border-bottom-color: currentColor;
  outline: none;
}



/* Le fond ne défile pas pendant la visite : la carte suivrait mal. */
body.visite-ouverte {
  overflow: hidden;
}

/* ── LA TOILE DES CONFETTIS EST CELLE DE LA BIBLIOTHÈQUE (lot 54c) ────────
   « canvas-confetti » pose sa propre toile, en « fixed », sans capter les
   clics, et la retire seule. Ma règle n'avait plus d'objet. */