/* =========================================================================
   MUSLIMA WORK — Administration
   Le cockpit éditorial. Même identité que le site public : l'ivoire, le
   prune, le rose d'accent, et les angles nets de la refonte — quatre pixels
   de rayon, jamais davantage.

   Trois règles tiennent toute la feuille :

     1. la couleur dit quelque chose. Le rose est réservé aux actions, le
        vert à ce qui va bien, l'ambre à ce qui demande un regard. Une
        surface n'est jamais rose « pour faire joli » ;
     2. le verre est rare. Deux panneaux du tableau de bord, une fenêtre.
        Une carte ordinaire est blanche et bordée, point ;
     3. aucune ombre portée lourde. Ce qui sépare, c'est une ligne.

   Sommaire
     0. Jetons et base
     1. Coquille, barre latérale, en-tête mobile
     2. En-tête de page, fil d'Ariane
     3. Boutons et liens
     4. Surfaces : carte, panneau prune, verre
     5. Tableau de bord : chiffres, file, activité, raccourcis
     6. Filtres et onglets
     7. Tableaux desktop et listes mobiles
     8. Étiquettes de statut
     9. Menu d'actions
    10. Formulaires
    11. États : vide, succès, erreur, pagination
    12. Connexion et installation
   ========================================================================= */

:root{
  /* --- Palette -----------------------------------------------------------
     Les mêmes valeurs que le site public, plus l'ivoire de fond que
     l'administration seule utilise : il détache les surfaces blanches sans
     rien teinter en rose. */
  --a-prune:#321525;
  --a-prune-clair:#4A2338;
  --a-framboise:#951753;
  --a-accent:#C92D78;
  --a-rose:#F8E7EF;
  --a-rose-pale:#FDF4F8;

  /* Le fond de toute l'administration : un blanc chaud, uni, presque blanc.
     Aucun gris, aucune texture, aucun dégradé — c'est lui qui fait ressortir
     la barre prune, le verre du panneau et les capsules roses. */
  --a-fond:#FFFDFC;
  --a-ivoire:var(--mw-info-fond);      /* encadrés d'information (teintes.css) */
  --a-surface:#FFFFFF;                /* blanc : il était crème */
  --a-blanc:#FFFFFF;

  /* --- Bordures ----------------------------------------------------------
     Une seule bordure pour toute l'administration, et elle est neutre : ni
     rose, ni grise. Les réceptacles d'icône teintés ont disparu avec les
     petits carrés qui les portaient — une icône est un trait. */
  --a-bord-verre:rgba(255,255,255,.92);
  --a-bord-nacre:#E9E1E6;
  --a-ombre-carte:0 10px 24px -22px rgba(84,32,60,.30);

  --a-ligne:#EDE6EA;
  --a-ligne-forte:#DCCFD7;
  --a-gris:#6B6069;
  /* 3,95:1 sur blanc : sous le seuil. Il porte les en-têtes de colonne des
     tableaux et les mentions secondaires. Deux points plus foncé, il tient à
     4,7:1 sans cesser d'être un gris. */
  --a-gris-clair:#7C6873;

  /* --- Onglets -----------------------------------------------------------
     Les quatre états d'un onglet, écrits une fois : deux groupes les
     partagent — la barre de filtres des listes et la bascule du panneau de
     modération —, et ils doivent se ressembler. Le survol est un voile, pas
     une capsule : c'est tout l'objet de ces valeurs. */
  --a-onglet-txt:#55324A;        /* prune adouci, lisible sur blanc */
  --a-onglet-survol:#FAF3F8;     /* rose-violet extrêmement pâle */
  --a-onglet-actif:#F4EAF2;      /* violet très pâle */
  --a-t-onglet:180ms cubic-bezier(.22,.68,.28,1);

  --a-vert:#1E6B41;      --a-vert-fond:#E7F4EC;  --a-vert-ligne:#CBE6D6;
  --a-ambre:#8A5A16;     --a-ambre-fond:#FBF0DA; --a-ambre-ligne:#EEDCB6;
  --a-rouge:#8A1B33;     --a-rouge-fond:#FDECEF; --a-rouge-ligne:#F3CFD7;
  --a-bleu:#1F4C8F;      --a-bleu-fond:#E4EDFB;

  /* --- Angles ------------------------------------------------------------
     Trois valeurs seulement. Plus douces que celles du site public, qui est
     volontairement tranchant : une surface de verre à angles vifs paraît
     découpée, et c'est l'arrondi qui lui donne son épaisseur. */
  /* L'échelle du site public : --r-md pour les champs et les boutons, un
     rayon court pour les panneaux. Muslima Work est volontairement franc —
     l'administration ne s'arrondit pas plus que lui. */
  --a-r-xs:4px;
  --a-r:6px;       /* boutons et champs, comme --r-md */
  --a-r-lg:10px;   /* panneaux */
  /* La capsule est réservée aux vrais badges : un compteur, jamais une
     surface. Elle n'a donc pas de jeton — c'est « 999px », écrit là où un
     badge se dessine, et nulle part ailleurs. */

  /* --- Rythme ------------------------------------------------------------ */
  --a-gout:16px;           /* gouttière commune  */
  --a-menu:264px;          /* largeur de la barre latérale */
  --a-max:1560px;          /* largeur maximale du contenu */
  --a-bord:clamp(16px,3vw,40px);

  /* --- Mouvement ---------------------------------------------------------
     Court, jamais décoratif : 140 ms pour un survol, 220 ms pour un
     panneau qui s'ouvre. */
  /* Les durées et les courbes du site : --t et --ease de style.css. */
  --a-t:200ms cubic-bezier(.22,.68,.28,1);
  --a-t-long:320ms cubic-bezier(.16,1,.3,1);

  /* --- Emprunts au site public -------------------------------------------
     Le dégradé du bouton principal, le prune du voile du hero, et l'ivoire
     de sa partie éditoriale. Mêmes valeurs que style.css : une seule
     identité, pas deux interprétations. */
  --a-grad-rose:linear-gradient(110deg,#901E56 0%,#C32371 55%,#D3458C 100%);
  --a-voile:#3D0620;
  --a-hero-ivoire:var(--mw-avant-fond); /* mise en avant (teintes.css) */
}

*{box-sizing:border-box}

/* Le fond est uni. Pas de grain, pas de trame, pas de grand dégradé rose :
   une page d'administration passée en revue toute la journée n'a rien à
   gagner à une texture, et le blanc chaud fait ressortir tout le reste. La
   seule lumière rose de la page est celle du panneau d'accueil, contenue
   dans ses propres bords. */
.adm{
  margin:0;color:var(--a-prune);
  background:var(--a-fond);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Une page d'administration ne défile jamais de côté. */
  overflow-x:hidden;
}
.adm a{color:inherit;text-decoration:none}
.adm h1{font-size:clamp(22px,2.4vw,27px);line-height:1.2;margin:0;letter-spacing:-.025em;font-weight:600}
.adm h2{font-size:17px;line-height:1.3;margin:0;letter-spacing:-.015em;font-weight:600}
.adm h3{font-size:15px;line-height:1.35;margin:0;font-weight:600}
.adm-sec{color:var(--a-gris);font-size:14px;margin:5px 0 0}
.adm-note{margin-top:24px;font-size:13.5px;line-height:1.6;color:var(--a-gris);max-width:70ch}

/* Le focus est visible partout, et toujours de la même façon. */
.adm :focus-visible{outline:2px solid var(--a-accent);outline-offset:2px;border-radius:var(--a-r-xs)}
/* Sur la photographie du hero, le magenta se perd dans le prune : le contour
   passe au rose nacré, qui tient sur les deux. */
.adm-hero :focus-visible{outline-color:#FFC9DF}

/* Lu par les lecteurs d'écran, invisible à l'œil : l'intitulé d'un bouton à
   icône, la précision d'un compteur. Jamais un message qu'il faudrait voir. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* --- Marque --------------------------------------------------------------- */
.adm-marque{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.03em}
.adm-marque img{display:block;border-radius:var(--a-r)}

/* =========================================================================
   1. COQUILLE, BARRE LATÉRALE, EN-TÊTE MOBILE
   ========================================================================= */
.adm-coquille{display:grid;grid-template-columns:var(--a-menu) minmax(0,1fr);min-height:100dvh}

/* --- La barre latérale ---------------------------------------------------- */
.adm-menu{
  position:sticky;top:0;align-self:start;
  display:flex;flex-direction:column;
  height:100dvh;padding:22px 14px 18px;
  /* Un prune profond, mais nuancé : le haut tire vers la prune chaude, le
     bas vers le bordeaux, et une lueur rose très diffuse tient l'angle
     supérieur. L'ancien fond, presque noir, écrasait la page. */
  background:
    radial-gradient(120% 46% at 0% 0%,rgba(233,150,190,.22) 0%,rgba(233,150,190,0) 62%),
    linear-gradient(172deg,#6B1640 0%,#571236 46%,#440F2A 100%);
  color:#fff;
  border-right:1px solid rgba(255,226,240,.10);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05);
}
/* Le logo est simplement posé : aucun liseré, aucun halo. Ce qui le détache,
   c'est l'air autour de lui. */
.adm-menu .adm-marque{
  position:relative;color:#fff;padding:2px 10px 0;margin-bottom:30px;
}
.adm-menu .adm-marque span{opacity:1}

/* La navigation. Une ligne par destination : icône, libellé, et pour
   l'entrée active un fond translucide et un losange rose sur l'arête. */
.adm-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.adm-nav__l{
  /* Dix pixels de rembourrage et neuf d'écart, au lieu de douze et onze :
     « Annonces proposées » demandait 154 px et n'en avait que 147, et son
     dernier mot se coupait. Les huit pixels rendus ici lui suffisent, et le
     badge garde sa place — il est « flex:none ». */
  position:relative;display:flex;align-items:center;gap:9px;
  min-height:44px;padding:0 10px;border-radius:var(--a-r);
  font-size:14.5px;font-weight:500;color:rgba(255,255,255,.72);
  transition:background var(--a-t),color var(--a-t);
}
.adm-nav__l:hover{background:rgba(255,255,255,.07);color:#fff}
.adm-nav__l svg{flex:none;opacity:.9}
.adm-nav__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La notification d'une entrée : une vraie capsule framboise, blanche et
   dense. Elle ne remplace pas le libellé — le nombre est doublé en toutes
   lettres pour les lecteurs d'écran — et elle n'existe qu'au-dessus de
   zéro : c'est le composant qui ne la rend pas, pas le style qui la cache. */
.adm-nav__n{
  position:relative;margin-left:auto;flex:none;
  display:inline-grid;place-items:center;
  min-width:24px;height:22px;padding:0 7px;border-radius:999px;
  background:linear-gradient(140deg,#C42C76 0%,#951753 62%,#7A143F 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
  font-size:12px;font-weight:700;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
/* Le point de lumière, en haut de la capsule : deux pixels de haut, floutés.
   C'est lui qui lui donne son épaisseur — pas un halo. */
.adm-nav__n::after{
  content:"";position:absolute;top:2.5px;left:50%;
  width:11px;height:3.5px;margin-left:-5.5px;border-radius:999px;
  background:rgba(255,255,255,.5);filter:blur(1.2px);
}

/* L'entrée active : du verre, comme les panneaux du site — un blanc dilué,
   un flou court, un reflet d'arête — et une barre rose lumineuse sur
   l'arête gauche. Pas de contour rose, pas de halo sur le reste. */
/* L'entrée active : un fond blanc translucide, et rien d'autre.
   Elle n'a jamais porté de bordure — ce qui en dessinait une était la
   combinaison de deux ombres : le halo rose de son filet, huit pixels de
   diffusion, et le reflet blanc de son arête haute. Ensemble, ils cernaient
   l'entrée d'un double liseré. Les deux sont retirés ; il reste le fond et
   un filet rose net de deux pixels. */
.adm-nav__l--actif{
  background:rgba(255,255,255,.12);
  color:#fff;font-weight:600;
}
.adm-nav__l--actif::before{
  content:"";position:absolute;left:0;top:50%;
  width:2px;height:22px;margin-top:-11px;border-radius:0 2px 2px 0;
  background:#EE8FC2;
}
/* Le survol reste un fond, plus léger que l'actif : les deux ne se
   confondent pas, et aucun des deux ne ressemble au focus, qui est un
   contour. */
.adm-nav__l--actif:hover{background:rgba(255,255,255,.17)}
/* Le contour ne paraît qu'au clavier — « :focus-visible », jamais « :focus ».
   Sur le prune de la barre, le magenta se perd : c'est le rose nacré du hero
   qui le porte. */
.adm-menu :focus-visible{outline:2px solid #FFC9DF;outline-offset:2px}

.adm-menu__section{
  margin:26px 0 8px;padding:0 12px;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}

/* --- Le bas de la barre ---------------------------------------------------
   Le compte ne se colle pas au bord : une ligne le sépare, et il garde ses
   marges. */
.adm-menu__bas{
  margin-top:auto;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;gap:4px;
}
/* Le bloc du compte.
   Mesuré : « agencepassion1@gmail.com » demande 181 px, et la colonne de
   texte n'en donnait que 171. Les dix qui manquaient sont repris sans
   toucher à la largeur de la barre — quatre de chaque côté sur le
   rembourrage, deux sur l'écart, deux sur la pastille. L'adresse tient
   maintenant sur une ligne, avec deux pixels de marge. */
.adm-compte{display:flex;align-items:center;gap:8px;padding:8px 6px 12px}
.adm-compte__ini{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--a-r);
  background:linear-gradient(140deg,var(--a-accent),var(--a-framboise));
  font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.adm-compte__txt{min-width:0;flex:1 1 auto}
.adm-compte__q{display:block;font-size:12px;color:rgba(255,255,255,.45);line-height:1.3}
/* Une seule ligne, jamais une lettre reportée.
   « word-break:break-all » coupait l'adresse n'importe où — au milieu d'un
   mot, parfois sur une lettre seule — pour éviter une troncature. C'était le
   mauvais compromis : une adresse hachée en deux morceaux ne se lit pas mieux
   qu'une adresse suivie de points de suspension, et elle mange une ligne de
   plus. L'ellipse ne sert que de filet, pour une adresse plus longue que
   celles qu'on connaît ; l'attribut « title » la rend alors entière. */
.adm-compte__mail{
  display:block;font-size:12.5px;color:rgba(255,255,255,.88);line-height:1.35;
  word-break:normal;overflow-wrap:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.adm-menu__lien{
  display:flex;align-items:center;gap:10px;
  width:100%;min-height:44px;padding:0 10px;border:0;border-radius:var(--a-r);
  background:none;color:rgba(255,255,255,.66);
  font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
  transition:background var(--a-t),color var(--a-t);
}
.adm-menu__lien:hover{background:rgba(255,255,255,.07);color:#fff}
.adm-menu__lien svg{flex:none;opacity:.85}

/* --- Le contenu ----------------------------------------------------------
   Fluide, borné, et jamais un grand vide à droite : la largeur maximale est
   généreuse, et les marges suivent la taille de l'écran. */
.adm-contenu{
  min-width:0;
  /* Un peu d'air sur les côtés, pas davantage : « --a-bord » va de 16 px sur
     un téléphone à 40 px sur un grand écran. C'est la gouttière, ce n'est
     pas une marge de composition. */
  padding:var(--a-bord) var(--a-bord) 72px;
  padding-right:max(var(--a-bord),env(safe-area-inset-right));
  padding-left:max(var(--a-bord),env(safe-area-inset-left));
}
/* La colonne de droite : l'en-tête mobile, puis le contenu. */
.adm-colonne{min-width:0;display:flex;flex-direction:column}
/* « minmax(0,1fr) », et non la piste « auto » par défaut : une grille à une
   colonne se dimensionne sinon sur le contenu le plus large — un intitulé
   sans espace, une adresse e-mail — et entraîne toute la page avec elle. La
   mesure l'a montré : à 320 px, la page faisait 528 px de large. */
.adm-page{
  width:100%;max-width:var(--a-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr);gap:22px;
}
.adm-section,.adm-bloc,.adm-nav,.adm-menu__bas,.adm-file,.adm-activite,
.adm-listem,.adm-raccourcis,.adm-fichem,.adm-signal__c,
.adm-second__c,.adm-menuact__p{grid-template-columns:minmax(0,1fr)}

/* --- L'en-tête mobile et son tiroir ---------------------------------------
   Au-dessus de 860 px il n'existe pas ; en dessous il remplace entièrement
   la barre latérale, qui n'occupe alors plus une seule colonne. */
.adm-tete{display:none}
.adm-voile{display:none}

@media (max-width:860px){
  .adm-coquille{grid-template-columns:minmax(0,1fr)}

  .adm-tete{
    position:sticky;top:0;z-index:60;
    display:flex;align-items:center;gap:12px;
    padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
    padding-top:max(10px,env(safe-area-inset-top));
    /* La même matière que la barre latérale, et pas seulement une teinte
       proche : les deux dégradés sont ceux de « .adm-menu », dessinés sur une
       hauteur d'écran. L'en-tête montre donc littéralement les soixante-quatre
       premiers pixels du tiroir — quand celui-ci s'ouvre, les deux surfaces
       se rejoignent sans marche. */
    background:
      radial-gradient(120% 46% at 0% 0%,rgba(233,150,190,.22) 0%,rgba(233,150,190,0) 62%),
      linear-gradient(172deg,#6B1640 0%,#571236 46%,#440F2A 100%);
    background-size:100% 100dvh;
    background-repeat:no-repeat;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .adm-tete__b{
    flex:none;display:grid;place-items:center;width:44px;height:44px;
    border:1px solid rgba(255,255,255,.16);border-radius:var(--a-r);
    background:rgba(255,255,255,.06);color:#fff;cursor:pointer;
  }
  .adm-tete__b:active{background:rgba(255,255,255,.14)}
  .adm-tete__marque{flex:none;display:flex;align-items:center}
  .adm-tete__marque img{display:block;border-radius:var(--a-r)}
  .adm-tete__t{
    min-width:0;margin:0;flex:1;
    font-size:15px;font-weight:600;letter-spacing:-.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* La barre latérale devient un tiroir. Hors écran, elle ne prend aucune
     place et n'est plus atteignable au clavier. */
  .adm-menu{
    position:fixed;top:0;left:0;z-index:80;
    width:min(86vw,300px);height:100dvh;
    padding-top:max(22px,env(safe-area-inset-top));
    transform:translateX(-100%);
    transition:transform var(--a-t-long);
    box-shadow:0 0 0 100vmax rgba(0,0,0,0);
  }
  .adm-menu[data-ouvert="oui"]{transform:none}
  .adm-menu[hidden]{display:flex}

  .adm-voile{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(30,8,20,.44);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    border:0;padding:0;
    animation:admVoile var(--a-t-long) both;
  }
  @keyframes admVoile{from{opacity:0}to{opacity:1}}

  .adm-menu__fermer{
    position:absolute;top:max(14px,env(safe-area-inset-top));right:12px;
    display:grid;place-items:center;width:44px;height:44px;
    border:1px solid rgba(255,255,255,.16);border-radius:var(--a-r);
    background:rgba(255,255,255,.06);color:#fff;cursor:pointer;
  }

  .adm-contenu{padding:18px max(16px,env(safe-area-inset-right)) 56px max(16px,env(safe-area-inset-left))}
  .adm-page{gap:18px}
}

/* Sur tablette, la barre se resserre : le contenu garde sa largeur.

   Et c'est là que « Propositions reçues » ne tenait plus : la barre fait deux
   cent huit pixels, l'intitulé en demandait cent trente-cinq et n'en avait que
   cent sept — son dernier mot se coupait. La barre n'est pas élargie pour
   autant : on lui reprend les pixels là où ils ne servaient à rien.

     · le rembourrage de la barre, dix → quatre        (+12)
     · celui du lien, dix → sept, et l'écart, neuf → sept  (+8)
     · la capsule du compteur, un peu plus serrée      (+4)
     · le corps, treize et demi → treize               (le reste)

   Mesuré après coup : cent trente-trois disponibles pour cent trente
   demandés. Trois pixels de marge, et c'est voulu : à un seul, une police
   rendue un cheveu plus large ailleurs recouperait le mot. Aucun autre
   intitulé n'approche sa limite. */
@media (min-width:861px) and (max-width:1180px){
  :root{--a-menu:208px}
  .adm-menu{padding:18px 4px 16px}
  .adm-nav__l{font-size:13px;gap:7px;padding:0 7px}
  .adm-nav__n{min-width:20px;padding:0 5px}
  .adm-menu .adm-marque{font-size:15.5px;margin-bottom:20px}
}

@media (prefers-reduced-motion:reduce){
  .adm-menu,.adm-voile{transition:none;animation:none}
}

/* =========================================================================
   2. EN-TÊTE DE PAGE
   Le même bloc sur toutes les pages : fil d'Ariane, titre, précision, et
   les actions alignées à droite.
   ========================================================================= */
.adm-entete{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px 24px;flex-wrap:wrap;
}
.adm-entete__txt{min-width:0;flex:1 1 min(420px,100%)}
.adm-entete__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-entete__titre{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* La précision sous le titre de page : 12 px, la respiration commune des
   en-têtes. « .adm-sec » garde ses 5 px partout ailleurs — c'est ce
   composant-ci, et lui seul, qui s'écarte. */
.adm-entete__txt > .adm-sec{margin-top:12px}

/* Le total, à côté du titre : un fait, pas une décoration. */
.adm-compteur{
  padding:3px 9px;border-radius:var(--a-r);
  background:var(--a-rose);color:var(--a-framboise);
  font-size:12.5px;font-weight:600;white-space:nowrap;
}

.adm-fil{
  margin:0 0 8px;font-size:12.5px;color:var(--a-gris-clair);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.adm-fil a{color:var(--a-framboise)}
.adm-fil a:hover{text-decoration:underline}
.adm-fil__m{display:inline-flex;align-items:center}
.adm-fil__sep{color:var(--a-ligne-forte);margin-right:7px}

@media (max-width:640px){
  .adm-entete{align-items:stretch}
  .adm-entete__actions{width:100%}
  .adm-entete__actions .adm-bouton{flex:1 1 auto;justify-content:center}
}

/* =========================================================================
   3. BOUTONS ET LIENS
   ========================================================================= */
.adm-bouton{
  --h:42px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--h);padding:0 18px;border:1px solid transparent;border-radius:var(--a-r);
  background:var(--a-accent);color:#fff;
  font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background var(--a-t),border-color var(--a-t),color var(--a-t);
}
.adm-bouton:hover{background:var(--a-framboise)}
.adm-bouton svg{flex:none}

.adm-bouton--sobre{background:var(--a-blanc);color:var(--a-prune);border-color:var(--a-ligne-forte)}
.adm-bouton--sobre:hover{background:var(--a-rose-pale);border-color:var(--a-accent);color:var(--a-framboise)}

.adm-bouton--prune{background:var(--a-prune);color:#fff}
.adm-bouton--prune:hover{background:var(--a-prune-clair)}

.adm-bouton--fantome{background:transparent;color:var(--a-framboise);border-color:transparent}
.adm-bouton--fantome:hover{background:var(--a-rose-pale)}

.adm-bouton--petit{--h:34px;padding:0 12px;font-size:13px}
.adm-bouton--bloc{width:100%}
.adm-bouton[disabled],.adm-bouton[aria-disabled="true"]{opacity:.5;cursor:default}

.adm-bouton--rouge{background:var(--a-blanc);color:var(--a-rouge);border-color:var(--a-rouge-ligne)}
.adm-bouton--rouge:hover{background:var(--a-rouge-fond);border-color:var(--a-rouge);color:var(--a-rouge)}
.adm-bouton--danger{background:#A3203F;color:#fff;border-color:transparent}
.adm-bouton--danger:hover{background:var(--a-rouge)}

/* Le bouton à icône seule garde sa cible tactile. */
.adm-bouton--ico{width:var(--h);padding:0}

/* « .adm a { color: inherit } » est plus spécifique qu'une classe seule : un
   bouton qui se trouve être un lien y perdait sa couleur de texte — du prune
   sur du prune, illisible. Elle lui est rendue variante par variante, à
   spécificité égale. */
.adm a.adm-bouton{color:#fff}
.adm a.adm-bouton--sobre{color:var(--a-prune)}
.adm a.adm-bouton--sobre:hover{color:var(--a-framboise)}
.adm a.adm-bouton--fantome{color:var(--a-framboise)}
.adm a.adm-bouton--rouge{color:var(--a-rouge)}

.adm-lien{
  background:none;border:0;padding:0;
  font:inherit;font-size:13.5px;color:var(--a-framboise);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.adm-lien:hover{color:var(--a-accent)}
.adm .adm-lien-net{color:var(--a-framboise)}
.adm .adm-lien-net:hover{text-decoration:underline}

/* Sur téléphone, aucune cible ne descend sous 44 px. */
@media (max-width:860px){
  .adm-bouton{--h:46px}
  /* Sur téléphone, « petit » ne veut pas dire moins de 44 px : c'est la
     taille minimale d'une cible touchée au doigt. */
  .adm-bouton--petit{--h:44px;padding:0 14px}
}

/* =========================================================================
   4. SURFACES
   Une carte blanche et bordée par défaut, et rien d'autre : ni fond teinté,
   ni ombre portée. Ce qui sépare, c'est une ligne.
   ========================================================================= */
.adm-carte{
  background:var(--a-blanc);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  padding:20px;
}
/* Une carte qui ne contient qu'une liste : ce sont les lignes qui portent
   leur espacement, la carte n'ajoute pas le sien par-dessus. */
.adm-carte--liste{padding:0;overflow:hidden}

/* Le verre, réservé aux fenêtres : un blanc translucide et un flou. */
.adm-verre{
  background:linear-gradient(150deg,rgba(255,255,255,.78) 0%,rgba(255,247,251,.58) 100%);
  border:1px solid var(--a-bord-verre);
  border-radius:var(--a-r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
          backdrop-filter:blur(14px) saturate(130%);
}

/* Le titre d'un bloc. */
.adm-bloc{display:grid;gap:6px;align-content:start;min-width:0}
.adm .adm-bloc__titre{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-gris-clair);
}
.adm .adm-bloc__titre--suite{margin-top:22px;padding-top:18px;border-top:1px solid var(--a-ligne)}
.adm .adm-bloc__titre--seul{margin:26px 0 6px}

/* L'en-tête d'une section : son titre à gauche, un lien à droite. */
.adm-section{display:grid;gap:12px;min-width:0}
.adm-section__tete{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.adm .adm-section__t{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:600;letter-spacing:-.018em;color:var(--a-prune);
}

/* =========================================================================
   5. TABLEAU DE BORD
   ========================================================================= */

/* --- LE HERO IMMERSIF -----------------------------------------------------
   La photographie officielle couvre toute la scène. Le voile prune descend
   en pente continue de la gauche vers la droite — celui du hero public,
   #3D0620, dont seule l'opacité varie : c'est ce qui fait qu'on ne voit
   jamais de couture, et surtout pas deux colonnes.

   Sa hauteur est celle de son contenu, entre trois cent trente et trois cent
   quatre-vingts pixels sur ordinateur. Aucune hauteur fixe.
   ------------------------------------------------------------------------ */
.adm-hero{position:relative;display:grid;padding-bottom:clamp(4px,.6vw,8px)}
/* Le hero garde la gouttière de la zone de contenu, comme toute autre page.
   Il a été remonté un temps pour poser son surtitre sur la ligne du logo :
   c'était une fausse bonne idée. Le logo appartient à la barre latérale, le
   surtitre au hero — deux zones, deux rythmes —, et les faire coïncider
   plaquait toute la composition contre le haut de l'écran. */
/* La composition : deux colonnes, et un filet qui conduit au ruban.
   À gauche, un seul bloc éditorial — la date, la salutation, la phrase, puis
   le compteur : ils se lisent d'affilée, sur le même axe, sans rien qui les
   coupe. À droite, le panneau d'actions, centré sur la hauteur de ce bloc
   plutôt que collé en haut. Le filet, lui, est passé dessous : il ne sépare
   plus le titre du chiffre, il fait la transition vers le ruban.
   L'ordre du balisage reste salutation → filet → compteur → actions. Les
   zones déplacent, elles ne réécrivent pas le document : le seul élément
   qu'elles font voyager est le filet, qui est décoratif et aria-hidden.
   L'ordre lu à voix haute — salutation, compteur, actions — est donc celui
   de l'écran. */
.adm-hero__scene{
  --pad:clamp(22px,2.8vw,40px);
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "txt     actions"
    "signal  actions"
    "avance  actions"
    "fil     fil";
  /* La gouttière n'est pas décorative : sans elle, les deux colonnes sont
     jointives, et la phrase d'introduction vient mourir contre l'arête du
     panneau. Mesuré à 768 px, où la colonne de texte est la plus serrée. */
  column-gap:clamp(24px,3vw,48px);
  /* La dernière rangée prend ce qui reste, et le filet se pose à son pied.
     Avec « align-content:start », les rangées se tassaient en haut et la
     hauteur minimale laissait son mou SOUS le filet : réduire le padding bas
     ne changeait rien, le mou grandissait d'autant. Mesuré : vingt-neuf
     pixels jusqu'au ruban au lieu de vingt-deux. */
  grid-template-rows:auto auto auto 1fr;
  /* Une hauteur minimale, jamais fixe : si la date s'allonge ou si le
     compteur passe à quatre chiffres, la scène grandit au lieu de rogner. */
  min-height:clamp(280px,21vw,310px);
  /* Le bas est large parce que le ruban y mord de trente pixels : ce qui
     reste visible entre le filet et lui, ce sont les vingt-deux pixels
     demandés — pas le padding écrit ici. */
  padding:clamp(17px,1.9vw,23px) var(--pad) clamp(30px,2.6vw,36px);
  border-radius:var(--a-r-lg);
}
@media (min-width:901px){
  .adm-hero__scene{
    --pad:clamp(32px,2.8vw,40px);
    /* Ce padding descend le bloc éditorial entier — date, titre, phrase,
       compteur, « Tout voir » — sans toucher à un seul de ses écarts
       internes : ils sont posés par les marges des éléments, pas d'ici. Ce
       qu'il prend en haut, la dernière rangée le rend en bas, puisque la
       hauteur de la scène est fixée par son plancher : le grand vide entre le
       compteur et le filet se referme d'autant, et ni le filet ni le ruban ne
       se déplacent.

       Le rapport visé : un peu moins d'air au-dessus de la date qu'en dessous
       du compteur — cinquante-huit contre un peu plus de soixante-dix à
       1440 —, pour que la composition paraisse posée dans l'espace au-dessus
       du filet plutôt que collée à son bord haut. */
    padding-top:clamp(34px,4vw,58px);
    padding-bottom:52px;
    /* La hauteur rendue en haut est reprise ici : le hero reste plus haut
       qu'avant, et la photographie monte jusqu'au niveau du logo. Le plancher
       passe au-dessus de ce que le contenu demande, et son mou se loge dans
       la dernière rangée — au-dessus du filet, donc dans l'image. L'écart
       sous le filet, lui, reste exact. */
    min-height:clamp(300px,26.5vw,392px);
  }
}
.adm-hero__img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:64% 30%;
}
/* Le voile. Trois couches, dans cet ordre :
     1. la pente horizontale — dense derrière le texte, ouverte sur la pièce.
        Seize arrêts, comme le hero public : une pente qui ne montre jamais
        son bord ;
     2. un assombrissement de pied, pour le bandeau de verre ;
     3. une nuance de rose poudré, très diluée, qui réchauffe le prune. */
.adm-hero__voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(61,6,32,.91) 0%,
      rgba(61,6,32,.90) 8%,
      rgba(61,6,32,.88) 15%,
      rgba(61,6,32,.86) 21%,
      rgba(61,6,32,.83) 27%,
      rgba(61,6,32,.79) 33%,
      rgba(61,6,32,.74) 38%,
      rgba(61,6,32,.68) 43%,
      rgba(61,6,32,.61) 47%,
      rgba(61,6,32,.53) 51%,
      rgba(61,6,32,.40) 55%,
      rgba(61,6,32,.33) 59%,
      rgba(61,6,32,.27) 63%,
      rgba(61,6,32,.21) 68%,
      rgba(61,6,32,.16) 74%,
      rgba(61,6,32,.12) 100%),
    linear-gradient(180deg,
      rgba(45,5,24,0) 46%,rgba(45,5,24,.28) 78%,rgba(45,5,24,.52) 100%),
    radial-gradient(50% 46% at 76% 26%,rgba(232,132,178,.15),rgba(232,132,178,0) 78%);
}

/* --- La salutation -------------------------------------------------------- */
/* La largeur est bornée : sans cela, la phrase d'introduction irait toucher
   le panneau d'actions dès que la fenêtre se resserre. */
.adm-hero__txt{grid-area:txt;position:relative;z-index:3;min-width:0;max-width:46ch}
/* Le surtitre : un losange minuscule, puis la date en capitales. Aucun fond,
   aucune capsule, aucun contour — c'est une ligne de texte, pas une
   étiquette. Elle reste sous le titre en importance : onze pixels et demi,
   contre trente-cinq. */
.adm-hero__jour{
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;
  font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,236,244,.75);
}
/* Le même losange que le filet et le compteur, en tout petit : cinq pixels,
   un halo court, et il ne brille pas plus que le reste. */
.adm-hero__jour-los{
  flex:none;width:5px;height:5px;border-radius:1px;transform:rotate(45deg);
  background:linear-gradient(105deg,#FFC9DF,#FFFFFF);
  box-shadow:0 0 6px rgba(255,201,223,.62);
}
.adm-hero__jour-c{display:none}
@media (max-width:560px){
  /* « DIM. · 13 SEPT. 2026 » : la ligne tient jusqu'à 320 px sans se couper. */
  .adm-hero__jour-l{display:none}
  .adm-hero__jour-c{display:inline}
}
.adm .adm-hero__t{
  margin:0;font-size:clamp(26px,2.7vw,35px);line-height:1.04;
  letter-spacing:-.036em;font-weight:600;color:#FFFBFD;
}
.adm-hero__p{
  /* Douze pixels sous le titre, la respiration commune des en-têtes : la
     phrase lui appartient, sans s'y coller. */
  margin:12px 0 0;max-width:52ch;line-height:1.5;
  /* La taille suit la largeur pour que la phrase tienne sur une seule ligne
     jusqu'à 320 px, sans largeur écrite en dur et sans jamais descendre sous
     treize pixels et demi. */
  font-size:clamp(12.4px,3.8vw,15px);
  color:rgba(255,255,255,.86);
}

/* --- Le filet nacré -------------------------------------------------------
   Deux pixels : un blanc nacré qui vire au rose à son départ, et s'efface
   dans la profondeur de la pièce. Il ne croise aucun texte — il est posé
   dans le flux, entre la salutation et le compteur. Rien ne scintille.
   ------------------------------------------------------------------------ */
.adm-hero__fil{
  grid-area:fil;
  position:relative;z-index:2;pointer-events:none;
  align-self:end;
  /* Il ne coupe plus rien : posé sous la composition, il conduit le regard
     au ruban. Il part de l'axe du texte et s'arrête au bord intérieur droit,
     où son masque l'a de toute façon déjà effacé. Vingt-deux pixels au-dessus,
     et autant en dessous — ceux-là viennent du bas de la scène, dont le ruban
     mange trente. */
  margin:22px 0 0;
  height:1.5px;border-radius:999px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,.5) 68%,rgba(0,0,0,0) 92%);
          mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,.5) 68%,rgba(0,0,0,0) 92%);
}
.adm-hero__fil-part{
  position:absolute;inset:0;border-radius:999px;transform-origin:left center;
  background:linear-gradient(90deg,
    rgba(246,198,221,.85) 0%,rgba(253,233,242,.92) 22%,
    rgba(255,255,255,.95) 52%,rgba(255,255,255,.82) 74%,rgba(255,255,255,.42) 100%);
  box-shadow:0 0 5px rgba(233,150,190,.38);
}
/* Le losange : un cœur blanc, des arêtes rose poudré, deux halos très
   courts. C'est celui des barres de progression du site, d'un pixel plus
   grand pour se voir sur la photographie. */
.adm-hero__fil-los{
  position:absolute;left:16%;top:50%;
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  rotate:45deg;border-radius:2px;
  background:radial-gradient(62% 62% at 33% 29%,
    #FFFFFF 0%,#FFF4F9 42%,#FFDCEC 72%,#FFC6DE 100%);
  /* L'arête rose : sans elle, un losange blanc posé sur un filet blanc ne se
     distingue plus. C'est la bordure de .rail__fil-diamant, du site. */
  border:1px solid rgba(233,150,190,.78);
  box-shadow:
    0 0 5px rgba(255,255,255,.65),
    0 0 10px rgba(240,179,210,.55),
    inset 0 1px 0 rgba(255,255,255,.92);
}

/* --- Le compteur ---------------------------------------------------------- */
.adm-signal{
  grid-area:signal;
  /* Le compteur occupe la largeur de ce qu'il dit, pas celle de sa colonne :
     « Tout voir » reste contre l'intitulé, et la zone cliquable ne s'étend
     pas sur la moitié de la photographie. */
  justify-self:start;
  position:relative;z-index:3;
  /* Le nombre, son losange et son libellé se tiennent de près : ils forment
     un mot, pas trois blocs. */
  display:flex;align-items:center;gap:clamp(14px,1.5vw,18px);
  /* Trente pixels sous la phrase d'introduction : le compteur clôt le bloc
     éditorial de gauche au lieu de flotter sous un trait. */
  margin:clamp(24px,2.2vw,30px) 0 0;
}
.adm-signal__n{
  position:relative;flex:none;
  /* Correction optique. Les trois textes au-dessus — la date, le titre,
     l'introduction — commencent leur encre à zéro ; le chiffre, lui, porte un
     approche gauche de quatre centièmes de cadratin (trois pixels à
     soixante-seize). Sans cette compensation, le bloc ne tombe pas sur le
     même axe que le reste du hero. La marge de droite la rend au texte : le
     libellé, lui, ne bouge pas d'un pixel. */
  margin-left:-.04em;margin-right:.04em;
  font-size:clamp(58px,5.4vw,76px);font-weight:700;letter-spacing:-.062em;line-height:.82;
  color:#FFFBFD;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 26px rgba(45,5,24,.50);
}
/* Le losange du compteur : celui du panneau de story, à son épaule. Douze
   pixels plutôt que quinze, et un halo court — net et lumineux, jamais un
   néon. */
.adm-signal__losange{
  position:absolute;top:5px;right:-13px;
  width:12px;height:12px;border-radius:3px;transform:rotate(45deg);
  background:linear-gradient(105deg,#FFC9DF,#FFFFFF);
  box-shadow:0 0 9px rgba(255,201,223,.52),inset 0 1px 0 rgba(255,255,255,.9);
}
.adm-signal__c{display:grid;gap:7px;min-width:0}
/* Une seule ligne, partout. « actions à traiter » demande cent vingt-cinq
   pixels ; même à 320 px il en reste plus de cent soixante à côté du nombre.
   Sur un écran plus étroit encore, c'est l'écart horizontal qui cède le
   premier — le retour à la ligne reste le dernier recours, et il est
   disponible puisque rien n'est écrit en dur dans le texte. */
.adm-signal__l{
  white-space:nowrap;font-size:15.5px;font-weight:600;line-height:1.22;color:#FFFBFD;
}
.adm-signal__voir{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:#FFC9DF;
}
.adm-signal__voir svg{transition:transform var(--a-t)}
a.adm-signal:hover .adm-signal__voir svg{transform:translateX(3px)}
/* L'état calme : rien n'attend, ou la base s'est tue. */
.adm-signal--calme{
  align-items:center;gap:10px;font-size:14.5px;color:rgba(255,255,255,.86);
}
.adm-signal__ico{flex:none;display:grid;place-items:center;color:#FFC9DF}

/* --- Le bandeau de verre --------------------------------------------------
   Fin, très transparent, un flou franc : c'est l'épaisseur du verre qui le
   détache, pas une plaque opaque. Les valeurs sont celles du panneau de
   story, allégées — un bandeau n'est pas une plaque.
   ------------------------------------------------------------------------ */
/* Le panneau d'actions : en haut à droite, dans l'image.
   Un panneau vertical et court, pas une barre. Il flotte sur la partie de la
   photographie que le voile ouvre — la pièce, à droite —, et laisse la
   silhouette dégagée. Deux boutons empilés : celui qui importe domine, celui
   qui ajoute est du verre en creux. */
.adm-hero__verre{
  grid-area:actions;
  position:relative;z-index:3;
  justify-self:end;
  /* Centré sur la hauteur du bloc de gauche — la salutation et le compteur
     réunis — plutôt qu'accroché au bord supérieur : c'est ce qui l'empêche de
     paraître isolé dans l'angle. */
  align-self:center;
  margin:0;
  width:clamp(272px,21vw,306px);max-width:100%;
  display:grid;gap:9px;
  padding:11px;border-radius:var(--a-r-lg);
  /* Prune translucide : le panneau est dans l'image, il en prend la
     profondeur plutôt que de poser un rectangle blanc dessus. */
  background:
    linear-gradient(166deg,rgba(61,6,32,.36) 0%,rgba(74,30,54,.26) 100%),
    linear-gradient(0deg,rgba(255,255,255,.05),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
          backdrop-filter:blur(16px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
}

/* Le reflet de l'arête haute : très léger, et rien d'autre. */
.adm-hero__reflet{
  position:absolute;left:16px;right:16px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.24) 18%,
    rgba(255,255,255,.52) 48%,rgba(255,201,223,.62) 70%,
    rgba(255,255,255,0) 100%);
}
/* Empilés, donc pleine largeur du panneau — et c'est la largeur du panneau
   qui est bornée, jamais celle du hero. */
.adm-hero__verre .adm-bouton{--h:46px;width:100%;font-size:14px}

/* --- Les deux boutons du bandeau ------------------------------------------
   L'import domine. Il était un aplat prune sombre percé d'une boule floue :
   deux boutons foncés l'un sur l'autre dans un panneau foncé, et rien ne
   désignait l'action vedette.

   C'est maintenant une perle : un dégradé nacré — blanc, rose poudré, un
   souffle de violet glacé —, un texte prune, une icône framboise. Sur un
   panneau de verre prune, c'est le seul objet clair de la scène, et c'est ce
   qui le fait voir avant tout le reste. L'ajout, lui, reste du verre fumé.

   Le mouvement tient en une phrase : une lumière traverse la nacre en
   diagonale, une fois toutes les six secondes. Rien ne pulse, rien ne
   scintille en boucle. */
.adm-bouton--eclat{
  position:relative;overflow:hidden;isolation:isolate;
  /* La nacre. Cinq arrêts, du blanc au rose poudré en passant par un violet
     glacé : c'est l'écart entre eux qui fait la matière, pas leur
     saturation. */
  background:linear-gradient(118deg,
    #FFFFFF 0%,#FCF0F7 24%,#F5E2F0 48%,#ECE1F7 72%,#FFF7FB 100%);
  color:var(--a-prune);
  border-color:rgba(255,255,255,.88);
  font-weight:600;
  /* Un reflet intérieur sur l'arête haute, une profondeur d'un pixel, et un
     halo rose très dilué derrière. Pas d'ombre portée : une perle posée sur
     du verre ne projette pas un bloc. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(195,35,113,.08),
    0 1px 2px rgba(58,12,38,.10),
    0 6px 22px -12px rgba(214,96,158,.58);
  transition:background 240ms var(--a-ease,ease),border-color 240ms ease,
             box-shadow 240ms ease,transform 240ms ease;
}
.adm a.adm-bouton--eclat{color:var(--a-prune)}

/* La teinte qui monte au passage de la lumière : le dégradé se rosit d'un
   souffle, puis revient. Elle est sous le texte — « isolation » et l'ordre
   d'empilement s'en chargent. */
.adm-bouton--eclat::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,
    rgba(255,214,236,0) 0%,rgba(255,205,231,.46) 46%,rgba(226,206,246,.32) 100%);
  opacity:0;
  animation:admNacreTeinte 6.2s ease-in-out 1.4s infinite;
}

/* La bande de lumière. Elle est large, floutée et inclinée : ce qui doit se
   lire, c'est un glissement sur une matière liquide, pas un balayage. Un aller
   en 1,2 s, puis cinq secondes d'immobilité. */
.adm-bouton--eclat::after{
  content:"";position:absolute;top:-70%;bottom:-70%;left:0;width:46%;
  pointer-events:none;
  /* Un creux avant la crête, un cœur blanc, un frangé violet après. Sur une
     surface déjà claire, une bande blanche seule ne se voit pas : c'est
     l'ombre qui la précède qui la fait exister, comme sur une vraie perle. */
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,rgba(182,136,168,.20) 15%,
    rgba(255,214,236,.58) 32%,rgba(255,255,255,1) 49%,rgba(255,253,254,1) 55%,
    rgba(222,198,246,.62) 72%,rgba(182,136,168,.12) 86%,
    rgba(255,255,255,0) 100%);
  filter:blur(6px);
  transform:rotate(18deg) translateX(-240%);
  animation:admNacreOnde 6.2s cubic-bezier(.4,0,.25,1) 1.4s infinite;
}
/* 1,2 s de traversée sur 6,2 s de cycle : 19,4 % du temps, et rien ensuite. */
@keyframes admNacreOnde{
  0%{transform:rotate(18deg) translateX(-240%)}
  19.4%,100%{transform:rotate(18deg) translateX(340%)}
}
@keyframes admNacreTeinte{
  0%,5%{opacity:0}
  12%{opacity:.52}
  22%,100%{opacity:0}
}
/* Une seule traversée, déclenchée par le survol : changer de nom d'animation
   la relance depuis son début. */
@keyframes admNacreOndeUne{
  from{transform:rotate(18deg) translateX(-240%)}
  to{transform:rotate(18deg) translateX(340%)}
}

/* --- L'icône et son éclat -------------------------------------------------
   Le pictogramme d'import, et un losange rose à son épaule. Net, petit, et
   seul : une étincelle, pas une poignée de paillettes. */
.adm-eclat__ico{
  position:relative;z-index:1;display:inline-flex;flex:none;
  color:var(--a-framboise);
}
.adm-eclat__t{position:relative;z-index:1}
.adm-eclat__los{
  position:absolute;top:-4px;right:-6px;
  width:7px;height:7px;border-radius:1.6px;
  transform:rotate(45deg);
  background:linear-gradient(120deg,#C32371,#F09AC6);
  box-shadow:0 0 5px rgba(195,35,113,.40);
  animation:admNacreLos 6.2s ease-in-out 1.4s infinite;
}
/* Quatre pour cent, pas davantage : à l'œil c'est un éclat, pas un saut. */
@keyframes admNacreLos{
  0%,7%{transform:rotate(45deg) scale(1);box-shadow:0 0 5px rgba(195,35,113,.40)}
  13%{transform:rotate(45deg) scale(1.04);box-shadow:0 0 10px rgba(195,35,113,.66)}
  21%,100%{transform:rotate(45deg) scale(1);box-shadow:0 0 5px rgba(195,35,113,.40)}
}

/* --- Le survol ------------------------------------------------------------
   Le rose se renforce, le halo s'ouvre, le bouton monte d'un pixel et demi,
   et la lumière traverse une fois. */
.adm-bouton--eclat:hover{
  background:linear-gradient(118deg,
    #FFFFFF 0%,#FCE9F3 22%,#F4D6EA 50%,#E8DAF5 74%,#FFF2F8 100%);
  border-color:#fff;
  transform:translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(195,35,113,.10),
    0 2px 4px rgba(58,12,38,.10),
    0 10px 30px -12px rgba(214,96,158,.80);
}
.adm-bouton--eclat:hover::after{
  animation:admNacreOndeUne 1.2s cubic-bezier(.4,0,.25,1) both;
}
.adm-bouton--eclat:hover::before{animation:admNacreTeinte 1.2s ease-in-out both}
.adm-bouton--eclat:hover .adm-eclat__los{animation:admNacreLos 1.2s ease-in-out both}

/* Le focus se voit sur un fond clair comme sur un fond sombre : c'est le
   contour framboise qui le dit, doublé de blanc pour tenir sur la photo. */
.adm-bouton--eclat:focus-visible{
  outline:2px solid var(--a-framboise);outline-offset:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 0 0 4px rgba(255,255,255,.55);
}

/* --- Le clic --------------------------------------------------------------
   Le bouton se comprime, l'icône jette un éclat bref, et le parcours d'import
   part — celui d'avant, inchangé. */
.adm-bouton--eclat:active{transform:translateY(0) scale(.985);transition-duration:90ms}
.adm-bouton--eclat:active .adm-eclat__los{animation:admNacreClic 420ms ease-out both}
@keyframes admNacreClic{
  0%{transform:rotate(45deg) scale(1.04);box-shadow:0 0 14px rgba(195,35,113,.85)}
  100%{transform:rotate(45deg) scale(1);box-shadow:0 0 5px rgba(195,35,113,.40)}
}

/* L'ajout : du verre fumé, et rien de plus. Il ne monte pas au survol — un
   seul objet bouge dans ce panneau, et c'est la perle. */
.adm-bouton--verre{
  background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.adm-bouton--verre:hover{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.56);
}
.adm a.adm-bouton--verre{color:#fff}

/* --- Le ruban des quatre mesures ------------------------------------------
   Il chevauche à peine le bas de la photographie : assez pour en sortir,
   trop peu pour y être collé. Chiffres prune, filets fins, intitulés
   lisibles.

   Une seule ligne par mesure : le nombre, l'intitulé juste à sa droite, et
   plus rien après. Le ruban tient en soixante-douze pixels au lieu de
   quatre-vingt-dix — la flèche de fin de colonne poussait l'intitulé contre
   le bord et ouvrait un vide que rien ne venait remplir, alors que toute la
   colonne était déjà le lien. Le survol le dit à sa place, d'un fond à
   peine posé.
   ------------------------------------------------------------------------ */
.adm-ruban{
  position:relative;z-index:4;
  /* Le nombre de colonnes suit le nombre de mesures : trois au quotidien,
     quatre le jour où des archives existent. « auto-fit » évite d'écrire la
     règle deux fois. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  grid-auto-flow:column;
  margin:-30px clamp(18px,2.2vw,34px) 0;
  background:var(--a-blanc);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  box-shadow:0 16px 34px -26px rgba(60,20,44,.34);
  overflow:hidden;
}
.adm-ruban__c{
  /* La hauteur est portée par la colonne, pas par des marges intérieures :
     le contenu se centre alors tout seul, quelle que soit la longueur de
     l'intitulé.

     Centré dans sa colonne, et non calé à gauche : les colonnes doivent
     rester d'égale largeur, or « 13 annonces publiées » est bien plus court
     qu'un tiers de ruban. Calé à gauche, tout le reste s'entassait en un
     vide unique à droite ; centré, il se partage de part et d'autre et ne
     se lit plus comme un manque. */
  display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;
  min-height:72px;padding:8px clamp(14px,1.4vw,18px);
  box-shadow:inset 1px 0 0 var(--a-ligne);
  transition:background var(--a-t);
}
.adm-ruban__c:first-child{box-shadow:none}
/* Un fond à peine posé : c'est la seule marque du survol depuis que la
   flèche est partie, elle doit rester une nuance, pas un bouton. */
.adm-ruban__c:hover{background:var(--mw-avant-fond)}
.adm-ruban__n{
  flex:none;
  font-size:clamp(22px,2vw,27px);font-weight:700;letter-spacing:-.042em;line-height:1;
  color:var(--a-prune);font-variant-numeric:tabular-nums;
}
.adm-ruban__l{min-width:0;font-size:13px;line-height:1.3;color:var(--a-gris)}

/* --- Le ruban, posé dans le flux -----------------------------------------
   Sur le tableau de bord, il remonte de trente pixels pour mordre le bas de la
   photographie. Ailleurs — sur les statistiques — il n'y a pas d'image sous
   laquelle se glisser : il se pose, et ses gouttières sont celles de la page.
   Le dessin, lui, ne change pas d'un pixel. */
.adm-ruban--pose{margin:0}
/* La seconde bande d'une page en porte deux : un peu moins haute, pour que la
   première garde le pas sur elle. */
.adm-ruban--compact .adm-ruban__c{min-height:62px}

/* La variation, sous le couple chiffre + libellé.

   Elle passe à la ligne toute seule : le segment est déjà en flex, il suffit
   de l'autoriser à se replier et de donner à la variation toute la largeur.
   Aucun élément n'est ajouté au balisage — le tableau de bord, qui n'en pose
   jamais, rend exactement ce qu'il rendait. */
.adm-ruban__c:has(.adm-ruban__var){flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.adm-ruban__var{
  flex:0 0 100%;text-align:center;margin-top:2px;
  font-size:11.5px;line-height:1.35;
}

@media (max-width:900px){
  /* Sur téléphone : la photographie reste en fond, le cadrage se resserre sur
     la silhouette — elle est vue de dos, aucun visage n'est montré. Le texte
     tient le haut, le compteur suit, les deux actions s'empilent. */
  .adm-hero__scene{
    min-height:0;padding:24px var(--pad) clamp(34px,7vw,42px);
  }
  /* Le cadrage se resserre sur la silhouette — elle est vue de dos, aucun
     visage n'est montré — et le voile s'allège au centre : la photographie
     doit rester une photographie, pas un aplat prune. */
  .adm-hero__img{object-position:56% 20%}
  .adm-hero__voile{
    background:
      linear-gradient(172deg,
        rgba(61,6,32,.90) 0%,rgba(61,6,32,.78) 30%,
        rgba(61,6,32,.66) 56%,rgba(45,5,24,.74) 82%,rgba(45,5,24,.84) 100%),
      radial-gradient(58% 44% at 16% 6%,rgba(232,132,178,.18),rgba(232,132,178,0) 76%);
  }
  .adm .adm-hero__t{font-size:clamp(27px,7.4vw,34px)}
  /* Le filet est passé sous la composition : il part de l'axe du texte et
     s'arrête au bord intérieur droit, ici comme sur grand écran. */
  .adm-hero__fil{margin:22px 0 0}
  .adm-hero__fil-los{left:44%}
  /* Sur un écran étroit, l'intitulé passe sur deux lignes : il lui faut un
     peu plus d'air que le chiffre ne lui en laisse. */
  /* Plus de marge basse : ce qui sépare le compteur des actions est écrit
     une seule fois, sur le panneau. */
  /* Vingt pixels : le losange est à l'épaule du chiffre et déborde de
     quatorze, il lui faut ce qui reste pour ne pas toucher le libellé. */
  .adm-signal{margin:24px 0 0;gap:20px}
  .adm-signal__l{max-width:none}
  .adm-signal__n{font-size:clamp(64px,19vw,88px)}
  .adm-signal__losange{right:-14px;width:13px;height:13px}
  /* Le ruban passe en deux colonnes, et garde son léger chevauchement. */
  .adm-ruban{
    grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;
    margin:-14px 14px 0;
  }
  .adm-ruban__c:nth-child(odd){box-shadow:none}
  .adm-ruban__c:nth-child(even){box-shadow:inset 1px 0 0 var(--a-ligne)}
  .adm-ruban__c:nth-child(n+3){box-shadow:inset 0 1px 0 var(--a-ligne)}
  .adm-ruban__c:nth-child(n+3):nth-child(even){
    box-shadow:inset 0 1px 0 var(--a-ligne),inset 1px 0 0 var(--a-ligne);
  }
}
@media (max-width:560px){
  /* À deux colonnes sur un téléphone, une colonne fait moins de cent
     soixante-dix pixels : « annonces publiées » à côté du nombre y casse en
     deux lignes contre le bord. L'intitulé repasse donc sous le nombre. */
  .adm-ruban__c{
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:3px;min-height:0;padding:11px 13px;
  }
  .adm-ruban__n{font-size:23px}
}
/* --- Sous 900 px : une seule colonne ------------------------------------
   L'ordre demandé, et c'est celui du balisage à un élément près : salutation,
   compteur, actions, puis le filet juste avant le ruban. Le panneau prend
   toute la largeur — à cette échelle, un panneau de trois cents pixels calé à
   droite laisserait un vide, pas de l'air. */
@media (max-width:900px){
  /* La barre prend la largeur disponible : à cette échelle, trois cents
     pixels calés à gauche laisseraient un vide. */
  .adm-avance{width:100%}
  .adm-hero__scene{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"txt" "signal" "avance" "actions" "fil";
    /* Cinq rangées ici, et c'est toujours la dernière qui absorbe le mou. */
    grid-template-rows:auto auto auto auto 1fr;
  }
  .adm-hero__txt{max-width:none}
  .adm-hero__verre{
    justify-self:stretch;align-self:auto;width:auto;
    /* Le compteur ne porte plus de marge basse : les vingt-huit pixels sont
       écrits ici, en entier. */
    margin:28px 0 0;padding:9px;gap:9px;
    border-color:rgba(255,255,255,.18);
    background:
      linear-gradient(166deg,rgba(61,6,32,.30) 0%,rgba(74,30,54,.20) 100%),
      linear-gradient(0deg,rgba(255,255,255,.04),rgba(255,255,255,.04));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  }
}

@media (max-width:400px){
  /* Quatre pixels de marge en moins de chaque côté : c'est exactement ce qu'il
     manque au sous-titre pour tenir sur une seule ligne à 320 px sans
     descendre sous douze pixels et demi. */
  .adm-hero__scene{--pad:18px}
  /* Sur les écrans les plus étroits, l'écart cède avant le texte. */
  .adm-signal{gap:14px}
}
@media (max-width:300px){
  /* En dernier recours seulement : sous trois cents pixels, mieux vaut deux
     lignes qu'un débordement. */
  .adm-signal__l{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  a.adm-signal:hover .adm-signal__voir svg,
  .adm-bouton--eclat:hover,
  .adm-bouton--eclat:active{transform:none}
  /* Il ne reste que la nacre, fixe : aucune lumière ne traverse, aucune
     teinte ne monte, le losange ne scintille pas. Le bouton garde sa matière,
     son contraste et sa cible — il perd seulement son mouvement. */
  .adm-bouton--eclat::after,
  .adm-bouton--eclat:hover::after{animation:none;opacity:0}
  .adm-bouton--eclat::before,
  .adm-bouton--eclat:hover::before{animation:none;opacity:0}
  .adm-eclat__los,
  .adm-bouton--eclat:hover .adm-eclat__los,
  .adm-bouton--eclat:active .adm-eclat__los{animation:none}
}

/* --- Le compteur du contenu ------------------------------------------------
   Un petit rectangle, pas une pastille : la capsule arrondie est le réflexe
   de tous les tableaux de bord, et ce n'en est pas un. Un bijou compact —
   prune rosé profond, chiffre blanc, un liseré presque blanc, un reflet dans
   l'angle haut gauche et un losange minuscule accroché à l'angle opposé.

   « adm-compteur » et non « adm-badge » : ce dernier nom appartient déjà aux
   étiquettes de l'aperçu d'import (voir ApercuAnnonce.tsx), et les deux se
   marchaient dessus.

   Il ne se pose jamais sur un compteur à zéro : c'est le composant qui ne le
   rend pas. Aucun halo, aucun néon, aucune animation, aucune ombre portée.
   ------------------------------------------------------------------------ */
.adm-compteur{
  position:relative;flex:none;
  display:inline-grid;place-items:center;
  min-width:30px;height:26px;padding:0 7px;border-radius:7px;
  background:linear-gradient(152deg,#8A1E52 0%,#6B1640 56%,#551230 100%);
  border:1px solid rgba(255,224,240,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  font-size:13px;font-weight:700;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
/* Le reflet : une lumière douce dans l'angle haut gauche, rien de plus. */
.adm-compteur::before{
  content:"";position:absolute;top:1px;left:1px;width:16px;height:11px;
  border-radius:6px 2px 8px 2px;pointer-events:none;
  background:linear-gradient(142deg,rgba(255,255,255,.30),rgba(255,255,255,0) 78%);
}
/* Le losange, accroché à l'angle haut droit : il dépasse de trois pixels. */
.adm-compteur::after{
  content:"";position:absolute;top:-3px;right:-3px;
  width:7px;height:7px;rotate:45deg;border-radius:1.5px;pointer-events:none;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFE3F1 46%,#F3A8CD 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
}

/* --- « À traiter aujourd'hui » --------------------------------------------
   Une seule section : les quatre états en tête, les éléments en dessous, et
   les accès rapides en panneau collant à droite. Le grand nombre du hero ne
   se répète plus trois fois.
   ------------------------------------------------------------------------ */
.adm-jour{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,25%,340px);
  gap:var(--a-gout);align-items:start;
}
/* Le ruban du hero est juste au-dessus : la section n'a pas besoin de toute
   la gouttière de la page pour respirer. */
.adm-jour .adm-section{gap:11px}
/* Deux colonnes : à quatre, dans une colonne qui partage la largeur avec le
   panneau collant, les intitulés se coupaient. */
.adm-etats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:1500px){.adm-etats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.adm-etat{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:13px 14px;border-radius:var(--a-r);
  background:var(--a-blanc);border:1px solid var(--a-bord-nacre);
  transition:transform var(--a-t),border-color var(--a-t),box-shadow var(--a-t),background var(--a-t);
}
/* Le mouvement des cartes du site : deux pixels, une ombre courte. */
.adm-etat:hover{
  transform:translateY(-2px);background:var(--mw-avant-fond);border-color:#DFD2D9;
  box-shadow:0 4px 14px rgba(60,40,52,.08);
}
.adm-etat__l{
  min-width:0;font-size:13px;font-weight:600;line-height:1.3;color:var(--a-prune);
}
/* Le compteur à zéro : neutre, de la largeur de la capsule pour que les
   quatre états restent alignés. */
.adm-etat__zero{
  flex:none;min-width:27px;text-align:center;
  font-size:15px;font-weight:600;color:var(--a-gris-clair);
  font-variant-numeric:tabular-nums;
}

/* --- Les accès rapides ----------------------------------------------------
   Un panneau éditorial, collant tant qu'il y a de quoi défiler à côté. */
/* --- Les accès rapides ---------------------------------------------------
   La colonne portait un titre ORDINAIRE, à l'intérieur de la garniture d'une
   carte. « Priorités du jour », à gauche, est un titre nu posé sur le fond.
   Les deux colonnes commençaient donc bien à la même hauteur — mesuré, 0 px
   d'écart — mais leurs TITRES se lisaient à quinze pixels l'un de l'autre.
   C'est ce décalage-là qu'on voyait, et il ne venait pas de la grille.

   Le titre devient une étiquette posée sur le bord du panneau, comme celle
   de la formation Webmaster sur l'accueil — voir « fmt__etiq » dans
   accueil.css, dont les valeurs sont reprises ici : même papier dégradé,
   même inclinaison de deux degrés, même ombre prune diluée sous les lettres.
   Elle sort du cadre, et c'est ce qui la fait tomber à la hauteur du titre
   d'en face. */
.adm-rapides{
  /* Collant tant qu'il reste de la liste à défiler à côté. Il est élément de
     grille de « .adm-jour » : c'est ce conteneur qui le borne, il ne peut donc
     ni passer sous le hero ni dépasser sur l'activité récente. Aucun
     « fixed », aucune hauteur imposée. Désactivé sous 1080 px. */
  position:sticky;top:24px;
  display:grid;justify-items:start;
  /* Aucun fond ni bordure ici : c'est la liste, à l'intérieur, qui les porte
     — sinon l'étiquette serait rognée par le cadre qu'elle doit mordre. */

  /* Le panneau descend se poser au niveau de la PREMIÈRE CARTE de « Priorités
     du jour », et non au niveau de son titre. La valeur n'est pas devinée :
     c'est la hauteur de la ligne du titre — « .adm h2 », 17 px sur 1,3 —
     plus la gouttière de la section, 11 px. Si l'une des deux change, la
     ligne se lit et se corrige ; un « 33px » écrit en dur, non. */
  margin-top:calc(17px * 1.3 + 11px);
}
/* « .adm h2 » — une classe et un élément — l'emporterait sur une simple
   classe et imposerait ses 17 px à l'étiquette. Le sélecteur reprend donc ce
   poids. C'est la troisième fois que cette règle générale reprend la main sur
   un titre habillé dans cette feuille ; elle mériterait d'être resserrée un
   jour, mais pas au détour de cette correction. */
.adm h2.adm-rapides__t{
  position:relative;z-index:3;isolation:isolate;
  /* Elle est posée À CHEVAL sur le bord haut du panneau : la moitié dessus,
     la moitié au-dessus. C'est ce qui fait une étiquette collée sur un
     carton, plutôt qu'un badge flottant à côté. */
  margin:-16px 0 -16px 20px;
  display:inline-flex;align-items:center;
  height:32px;padding:0 15px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;white-space:nowrap;color:#fff;
  /* Une ombre prune très diluée : elle assoit les lettres sur le framboise
     sans les cerner. */
  text-shadow:0 1px 1.5px rgba(74,12,42,.34);
  transform:rotate(-2deg);transform-origin:22% 50%;
}
/* Le papier de l'étiquette. */
.adm h2.adm-rapides__t::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;
  background:linear-gradient(135deg,#C42A61 0%,#DD3873 48%,#E85A8E 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(221,56,115,.30),inset 0 1px 0 rgba(255,255,255,.42);
}
/* Le panneau : un rose très pâle en dégradé, et non le blanc franc des
   cartes voisines. C'est la seule surface teintée de cette colonne — elle
   dit « raccourcis », pas « contenu ». */
.adm-rapides .adm-raccourcis{
  width:100%;
  padding:20px 8px 6px;
  background:linear-gradient(152deg,#FDEFF6 0%,#FDF6FA 46%,#FFFDFE 100%);
  border:1px solid #F2DCE8;border-radius:var(--a-r-lg);
}
.adm-rapides .adm-raccourci{padding:11px 12px;gap:12px}
.adm-rapides .adm-raccourci:hover{background:rgba(255,255,255,.62)}
/* Les filets entre raccourcis se teintent : un gris neutre sur du rose pâle
   fait une rayure. */
.adm-rapides .adm-raccourci{box-shadow:inset 0 1px 0 #F3DFEA}
.adm-rapides .adm-raccourci:first-child{box-shadow:none}
.adm-rapides .adm-raccourci__ico{color:var(--a-framboise)}
.adm-rapides .adm-raccourci__t{font-size:14.5px}
/* Deux lignes plutôt qu'une coupée. La règle générale tronque à l'ellipse —
   « Les annonces envoyées par l… » —, ce qui n'a de sens que sur une ligne
   pleine largeur. Dans cette colonne étroite, elle mangeait la moitié de
   chaque phrase. */
.adm-rapides .adm-raccourci__p{
  margin-top:2px;font-size:12px;line-height:1.45;
  white-space:normal;overflow:visible;text-overflow:clip;
}

/* 1024 px, et non 1080 : « .adm-jour » est redéfini plus bas dans cette
   feuille — voir « LA COLONNE DES ACCÈS RAPIDES, ALLÉGÉE » — avec sa propre
   requête média à 1024 px, et c'est elle qui l'emporte puisqu'elle vient
   après. Entre 1025 et 1080 px, la règle qui était écrite ici décollait le
   panneau et annulait son décalage alors que les deux colonnes étaient
   toujours côte à côte : le panneau remontait d'un cran, seul, sans raison
   visible. Les deux seuils disent maintenant la même chose.

   Le doublon lui-même reste à résoudre un jour ; le corriger au passage
   déplacerait bien plus que cette colonne. */
@media (max-width:1024px){
  .adm-jour{grid-template-columns:minmax(0,1fr)}
  /* Les colonnes s'empilent : le décalage qui alignait le panneau sur la
     première carte n'a plus d'objet — il ne serait plus qu'un blanc de
     trente-trois pixels dont personne ne saurait la raison. */
  .adm-rapides{position:static;margin-top:0}
}
@media (max-width:420px){
  .adm-etats{grid-template-columns:minmax(0,1fr)}
}

/* --- Le panneau secondaire ------------------------------------------------
   Les quatre chiffres qui n'appellent pas d'action immédiate, en une seule
   bande ivoire translucide — pas en quatre cartes de plus. */
.adm-second{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:linear-gradient(150deg,rgba(255,252,250,.86) 0%,rgba(251,244,248,.76) 100%);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
  overflow:hidden;
}
.adm-second--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.adm-second__c{
  display:grid;gap:2px;padding:15px 18px;
  /* Une séparation douce : un filet nacré, non une ligne grise. */
  box-shadow:inset 1px 0 0 rgba(240,226,234,.9);
  transition:background var(--a-t);
}
.adm-second__c:first-child{box-shadow:none}
a.adm-second__c:hover{background:rgba(255,255,255,.82)}
.adm-second__n{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--a-prune)}
.adm-second__l{font-size:12.5px;color:var(--a-gris);line-height:1.35}
@media (max-width:860px){
  .adm-second{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-second--trois{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-second__c:nth-child(odd){box-shadow:none}
  .adm-second__c:nth-child(n+3){box-shadow:inset 0 1px 0 rgba(240,226,234,.9)}
  .adm-second__c:nth-child(n+3):not(:nth-child(odd)){
    box-shadow:inset 0 1px 0 rgba(240,226,234,.9),inset 1px 0 0 rgba(240,226,234,.9);
  }
}
@media (max-width:380px){
  .adm-second,.adm-second--trois{grid-template-columns:minmax(0,1fr)}
  .adm-second__c{box-shadow:inset 0 1px 0 rgba(240,226,234,.9)}
  .adm-second__c:first-child{box-shadow:none}
}

/* --- La file « à traiter » ------------------------------------------------
   Des lignes aérées sur du blanc chaud. L'état se lit à l'étiquette, jamais
   à un fond coloré : une ligne entièrement teintée rend son texte moins
   lisible et transforme la liste en damier.
   ------------------------------------------------------------------------ */
.adm-file{
  list-style:none;margin:0;padding:0;display:grid;
  background:var(--a-blanc);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  overflow:hidden;
}
.adm-file__e{box-shadow:inset 0 1px 0 var(--a-ligne)}
.adm-file__e:first-child{box-shadow:none}
.adm-file__l{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;
  padding:16px 20px;transition:background var(--a-t);
}
.adm-file__l:hover{background:#FFFAFC}
/* L'icône dit de quelle famille relève la ligne, par sa seule couleur :
   ambre pour ce qui s'examine, vert pour ce qui est prêt, rose pour ce qui
   arrive. Aucun carré, aucun fond. */
.adm-file__ico{display:grid;place-items:center;width:20px;color:var(--a-accent)}
.adm-file__ico--ambre{color:var(--a-ambre)}
.adm-file__ico--vert{color:var(--a-vert)}
.adm-file__ico--rose{color:var(--a-accent)}
.adm-file__corps{min-width:0}
.adm-file__q{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-gris-clair);
}
.adm-file__t{
  display:block;margin-top:2px;font-size:15px;font-weight:600;color:var(--a-prune);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-file__d{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--a-gris)}
/* L'action de la ligne se voit : un cartouche quartz, non un simple mot. */
.adm-file__aller{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 12px;border-radius:var(--a-r);
  background:var(--a-blanc);border:1px solid var(--a-ligne-forte);
  font-size:13px;font-weight:600;color:var(--a-framboise);
  transition:background var(--a-t),border-color var(--a-t),color var(--a-t);
}
.adm-file__l:hover .adm-file__aller{
  background:var(--a-accent);border-color:var(--a-accent);color:#fff;
}
@media (max-width:560px){
  .adm-file__l{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px}
  .adm-file__aller{grid-column:2;justify-content:center;min-height:44px}
  .adm-file__t{white-space:normal}
}

/* --- L'activité récente ---------------------------------------------------
   « adm-cellule » est une règle de tableau : sa largeur maximale nulle y
   force l'ellipse. Ici, dans une grille, elle réduisait le titre à rien —
   la colonne est rendue à son contenu. */
.adm-activite{
  list-style:none;margin:0;padding:0;display:grid;
  background:var(--a-blanc);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  overflow:hidden;
}
.adm-activite .adm-cellule{max-width:none}
.adm-activite__e{box-shadow:inset 0 1px 0 var(--a-ligne)}
.adm-activite__e:first-child{box-shadow:none}
.adm-activite__l{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:12px 16px;
  padding:13px 20px;transition:background var(--a-t);
}
.adm-activite__l:hover .adm-arw{
  border-color:var(--a-accent);color:var(--a-accent);transform:translateX(3px);
}
.adm-activite__l:hover{background:#FFFAFC}
.adm-activite__t{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-activite__e2{display:block;margin-top:1px;font-size:12.5px;color:var(--a-gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-activite__d{font-size:12.5px;color:var(--a-gris-clair);white-space:nowrap}
@media (max-width:560px){
  .adm-activite__l{grid-template-columns:minmax(0,1fr) auto}
  .adm-activite__d{grid-column:1/-1;order:3}
  .adm-activite .adm-arw{display:none}
}

/* --- Les accès rapides ----------------------------------------------------
   Un panneau blanc, des lignes séparées par un filet : ce sont des lignes
   d'une même liste, pas six petites cartes. Les icônes sont des traits, sans
   réceptacle et sans couleur de fond. */
.adm-raccourcis{
  display:grid;
  background:var(--a-blanc);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  overflow:hidden;
}
.adm-raccourci{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:13px 16px;
  box-shadow:inset 0 1px 0 var(--a-ligne);
  transition:background var(--a-t);
}
.adm-raccourci:first-child{box-shadow:none}
.adm-raccourci:hover{background:#FFFAFC}
.adm-raccourci__ico{
  position:relative;display:grid;place-items:center;width:20px;color:var(--a-gris-clair);
}
.adm-raccourci__t{display:block;font-size:14.5px;font-weight:600;color:var(--a-prune)}
/* La description tient sur une ligne : elle précise, elle n'explique pas. */
.adm-raccourci__p{
  display:block;margin-top:2px;font-size:12px;color:var(--a-gris);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-raccourci .adm-arw{width:28px;height:28px}
.adm-raccourci:hover .adm-arw{
  border-color:var(--a-accent);color:var(--a-accent);transform:translateX(3px);
}


/* L'apparition : un fondu et dix pixels, une fois, à l'arrivée sur la page.
   Elle est faite en CSS et non en JavaScript — une animation d'entrée pilotée
   par un script laisse la page vide quand le script tarde ou ne vient pas. */
@keyframes admLeve{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.adm-leve{animation:admLeve 460ms cubic-bezier(.22,.68,.28,1) both}
.adm-leve--2{animation-delay:80ms}
.adm-leve--3{animation-delay:160ms}
.adm-leve--4{animation-delay:240ms}
@media (prefers-reduced-motion:reduce){
  .adm-leve{animation:none}
}

/* =========================================================================
   6. FILTRES ET ONGLETS
   ========================================================================= */
.adm-barre-filtres{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;
  background:linear-gradient(150deg,rgba(255,255,255,.86) 0%,rgba(252,246,250,.76) 100%);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.adm-onglets{display:flex;gap:4px;flex-wrap:wrap;min-width:0}

/* --- Les quatre états d'un onglet ----------------------------------------
   Repos : rien. Pas de fond, pas de bordure, pas d'ombre — le texte seul,
   en prune. C'est ce qui permet au survol d'être léger : il n'a rien à
   recouvrir.

   Survol : un voile rose-violet, et le texte qui se fonce d'un cran. Aucune
   dimension ne change — ni la graisse, ni le rembourrage, ni la position —
   pour qu'un onglet survolé ne pousse pas ses voisins.

   Actif : un fond violet très pâle et un filet rose de deux pixels sous le
   texte. Un seul marqueur de plus que le survol, pas quatre : l'onglet
   portait un fond prune plein, une bordure de la même couleur et une
   graisse différente — trois façons de dire la même chose, et une capsule
   opaque au milieu d'une barre claire.

   Focus : le contour de l'administration, à distance de l'onglet. Il ne se
   confond pas avec l'actif — l'un est un trait qui entoure, l'autre un fond
   qui remplit. */
.adm-onglet{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;
  border-radius:var(--a-r);
  font-size:13.5px;font-weight:500;color:var(--a-onglet-txt);white-space:nowrap;
  transition:background var(--a-t-onglet),color var(--a-t-onglet);
}
.adm-onglet:hover{background:var(--a-onglet-survol);color:var(--a-prune)}
.adm .adm-onglet{color:var(--a-onglet-txt)}
.adm .adm-onglet:hover{color:var(--a-prune)}

/* Le compteur suit le texte : un cran plus net au survol, jamais plus gros. */
.adm-onglet__n{
  padding:1px 6px;border-radius:var(--a-r-xs);background:var(--a-ivoire);
  font-size:12px;font-weight:700;color:var(--a-gris-clair);
  transition:background var(--a-t-onglet),color var(--a-t-onglet);
}
.adm-onglet:hover .adm-onglet__n{color:var(--a-onglet-txt)}
/* Le compteur à zéro : le même gabarit, une encre plus pâle. Il ne disparaît
   pas — un filtre dont le nombre s'efface laisse croire qu'il est cassé. */
.adm-onglet__n--nul{background:transparent;color:#B9AEB5;font-weight:500}

/* Les actions d'une ligne, espacées. Elles se touchaient — « VoirDupliquer
   Clôturer » se lisait comme un seul mot —, et sur un écran tactile deux
   cibles jointives sont deux erreurs de plus par jour. */
.adm-actions-rangee{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* La glose sous les chiffres d'un en-tête : une phrase qui dit à quoi sert la
   page, posée sur sa propre ligne et d'un ton en dessous. */
.adm-entete__glose{display:block;margin-top:4px;color:var(--a-gris-clair);font-size:12.5px}

.adm-onglet--actif,.adm .adm-onglet--actif{
  background:var(--a-onglet-actif);color:var(--a-prune);font-weight:600;
}
.adm-onglet--actif:hover,.adm .adm-onglet--actif:hover{background:var(--a-onglet-actif)}
/* Le filet : deux pixels, sous le texte, dans la largeur de l'onglet. */
.adm-onglet--actif::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  border-radius:999px;background:var(--a-accent);
}
.adm-onglet--actif .adm-onglet__n{background:rgba(201,45,120,.12);color:var(--a-framboise)}

/* La recherche, poussée à droite quand la place le permet. */
.adm-recherche{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 1 340px;min-width:0}
.adm-recherche .adm-champ{flex:1 1 auto;min-width:0}
/* La recherche principale d'une page sans onglets (Recruteurs, Candidatures) :
   elle prend la place, à gauche, et le compteur de résultats suit. */
.adm-recherche--large{margin-left:0;flex:1 1 560px;max-width:720px}
.adm-barre-filtres > .adm-resultats{margin:0 0 0 auto;white-space:nowrap}
.adm-filtres{display:flex;gap:10px;flex-wrap:wrap}
.adm-filtres .adm-champ:first-child{flex:1 1 280px}
.adm-filtres .adm-lien{align-self:center}

@media (max-width:860px){
  /* « nowrap » n'est pas décoratif : en colonne, un conteneur qui enroule
     donne à sa ligne la largeur du plus large de ses enfants, et les étire
     dessus — la rangée d'onglets emmenait ainsi la barre à 1 100 px sur un
     écran de 320. Sans enroulement, la ligne fait la largeur de la barre, et
     ce sont les onglets qui défilent dans leur boîte. */
  .adm-barre-filtres{align-items:stretch;flex-direction:column;flex-wrap:nowrap;gap:10px;padding:12px}
  /* Les onglets défilent horizontalement plutôt que de casser la mise en
     page — et ce défilement-là ne déborde pas de la page. */
  .adm-onglets{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    margin:-2px;padding:2px;scrollbar-width:none;
  }
  .adm-onglets::-webkit-scrollbar{display:none}
  .adm-onglet{min-height:44px}
  .adm-onglet--actif::after{left:13px;right:13px;bottom:6px}
  .adm-recherche{margin-left:0;flex:1 1 auto}
  /* Sur téléphone, le champ ne peut pas porter « Rechercher un titre ou une
     entreprise » à côté de son bouton : le texte d'aide était coupé. Le
     bouton passe donc sous le champ, qui prend toute la largeur. */
  .adm-recherche{flex-wrap:wrap}
  .adm-recherche .adm-champ{flex:1 1 100%}
}

/* =========================================================================
   7. TABLEAUX ET LISTES MOBILES
   ========================================================================= */
.adm-tableau{
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  background:linear-gradient(178deg,rgba(255,255,255,.94) 0%,rgba(255,252,254,.86) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--a-ombre-carte);
  overflow:hidden;
}
.adm-tableau__defile{overflow-x:auto;overscroll-behavior-x:contain}
/* « table-layout: fixed » : les colonnes ont la largeur qu'on leur donne, et
   un intitulé de trois lignes ne vient plus voler la place des autres. La
   largeur minimale, elle, garde le tableau lisible : en dessous, c'est la
   boîte qui défile — jamais la page. */
.adm-tableau table{
  /* 626 px de colonnes fixes sur les annonces proposées, plus de quoi lire un
     intitulé et une entreprise : en dessous, c'est la boîte qui défile — et
     c'est seulement là que la colonne d'action se colle. */
  width:100%;min-width:930px;table-layout:fixed;
  border-collapse:separate;border-spacing:0;font-size:14px;
}
.adm-tableau th{
  position:sticky;top:0;z-index:2;
  padding:11px 14px;text-align:left;
  background:var(--a-ivoire);border-bottom:1px solid var(--a-ligne);
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--a-gris-clair);
  white-space:nowrap;
}
.adm-tableau td{padding:12px 14px;border-top:1px solid var(--a-ligne);vertical-align:middle}
.adm-tableau tbody tr:first-child td{border-top:0}
.adm-tableau tbody tr{transition:background var(--a-t)}
.adm-tableau tbody tr:hover{background:var(--a-rose-pale)}

.adm-titre{display:block;font-weight:600;color:var(--a-prune)}
.adm-tableau a.adm-titre:hover{color:var(--a-accent);text-decoration:underline}
.adm-slug{
  display:block;margin-top:2px;font-size:12px;color:var(--a-gris-clair);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-cellule{min-width:0;max-width:0}   /* laisse l'ellipse opérer dans une cellule */
.adm-nowrap{white-space:nowrap}

/* --- La colonne des actions ----------------------------------------------
   Par défaut, c'est une cellule comme les autres : même fond que la ligne,
   mêmes paddings, un filet de séparation, et rien de plus.

   Elle était collée en permanence, et c'était l'erreur. Une colonne collante
   ne se déplace pas tant qu'il n'y a rien à faire défiler — mais son fond
   opaque et son ombre sont peints quand même. D'où le voile blanc vertical,
   l'ombre sur toute la hauteur du tableau, et la colonne qui paraissait
   détachée. Le comportement collant ne revient que sous « data-colle », que
   CadreTableau pose quand le tableau déborde réellement de sa boîte. */
.adm-col-actions{
  /* Cent trente-cinq pixels, et des gouttières plus courtes que les autres
     cellules : les annonces portent « Ouvrir » ET le menu à trois points, et
     cent vingt-huit les faisaient passer à la ligne l'un sous l'autre. */
  width:135px;white-space:nowrap;text-align:center;
  border-left:1px solid var(--a-ligne);
}
.adm-tableau td.adm-col-actions,.adm-tableau th.adm-col-actions{padding-left:10px;padding-right:10px}
.adm-actions-cel{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
/* Un refus de publication s'affiche dans la cellule, en clair : la colonne
   s'élargit le temps de le lire plutôt que de le tronquer. */
.adm-actions-cel .adm-erreur{
  flex:1 1 100%;max-width:280px;margin-bottom:6px;
  padding:7px 9px;font-size:12px;line-height:1.45;white-space:normal;text-align:left;
}

/* --- Les largeurs ---------------------------------------------------------
   Les colonnes courtes et celle des actions sont en pixels : ce qu'elles
   contiennent ne s'étire pas. Ce qui reste va à l'intitulé et à l'entreprise,
   dans un rapport de trois cinquièmes contre deux — c'est le calc() qui le
   dit, parce qu'un pourcentage se calculerait sur la table entière et non sur
   le reste.

   « --fixes » s'ajuste au tableau : la colonne des cases n'existe que sur les
   annonces proposées, et deux de ses colonnes ont leur mesure propre.

   LE STATUT se raccourcit. Il valait 220 px pour loger « Renvoyée par
   l'entreprise », qui en demandait 187. Ce statut s'appelle maintenant
   « Réponse reçue », et la plus longue étiquette est « Modification
   demandée » : 150 px mesurés, plus 28 de gouttières. Cent quatre-vingts
   suffisent, et la mention « Offre : En ligne » qui se range dessous est plus
   courte encore.

   LE HIJAB s'allonge. « Déclaré » tenait dans les 116 px des colonnes
   courtes ; « Compatible déclaré » en demande 143, et la colonne suivante lui
   passait dessus — les deux étiquettes se chevauchaient à l'écran. Cent
   soixante-dix lui laissent ses gouttières.

   Les quarante pixels repris au statut paient donc presque tout
   l'élargissement du hijab : la table n'a gagné que quatorze pixels. */
.adm-tableau{--c-case:0px;--c-statut:116px;--c-hijab:116px}
.adm-tableau:has(.adm-c-case){--c-case:46px}
.adm-tableau:has(.adm-c-statut){--c-statut:180px}
.adm-tableau:has(.adm-c-hijab){--c-hijab:170px}
.adm-tableau table{
  --fixes:calc(var(--c-case) + 116px + var(--c-hijab) + var(--c-statut) + 135px);
}
.adm-c-titre{width:calc((100% - var(--fixes)) * .6)}
.adm-c-moyen{width:calc((100% - var(--fixes)) * .4)}
.adm-c-court{width:116px}
.adm-c-hijab{width:170px}
.adm-c-statut{width:180px}
.adm-tableau th.adm-col-actions{width:135px}

/* --- Le mode collant, quand il y a vraiment de quoi défiler ---------------
   Fond opaque identique à celui de la ligne, un filet d'un pixel, et une
   ombre très courte et très pâle — quatre pixels, six centièmes d'opacité —
   au lieu des douze pixels à vingt-deux centièmes d'avant. */
.adm-tableau[data-colle="oui"] .adm-col-actions{
  position:sticky;right:0;z-index:1;
  background:var(--a-surface);
  box-shadow:-4px 0 4px -4px rgba(50,21,37,.06);
}
.adm-tableau[data-colle="oui"] th.adm-col-actions{background:var(--a-ivoire);z-index:3}
.adm-tableau[data-colle="oui"] tbody tr:hover .adm-col-actions{background:#FDF6FA}

/* Un texte qui dépasse se coupe d'un point de suspension, dans sa cellule. */
/* Une étiquette qui ne tiendrait toujours pas revient à la ligne plutôt que
   de sortir de sa cellule : rien ne doit jamais glisser sous la colonne
   voisine, collée ou non. */
.adm-tableau td.adm-c-statut,.adm-tableau td.adm-c-court{overflow:hidden}
.adm-tableau td.adm-c-statut .adm-etiq{white-space:normal;text-align:left}

.adm-tronque{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-cellule{min-width:0}

@media (max-width:1180px){
  .adm-tableau td,.adm-tableau th{padding:11px 12px}
}

/* --- La liste mobile ------------------------------------------------------
   Le tableau ne se comprime pas : chaque ligne devient un bloc dense. Les
   deux ne coexistent jamais. */
.adm-listem{display:none}
/* Les cartes mobiles sont une « ul » de « li » et de « p » : sans remise à
   zéro, le navigateur leur rendait son retrait de liste (40 px à gauche, la
   bande rose) et les marges de paragraphe (les grands vides entre lignes). */
.adm-listem{margin:0;padding:0;list-style:none}
.adm-fichem p{margin:0}
/* Une étiquette longue (« Vérification manuelle nécessaire ») revient à la
   ligne dans une liste de faits plutôt que de sortir de la carte. */
.adm-liste dd .adm-etiq{max-width:100%;white-space:normal}
@media (max-width:860px){
  .adm-tableau{display:none}
  .adm-listem{
    display:grid;gap:1px;background:var(--a-ligne);
    border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);overflow:hidden;
  }
  .adm-fichem{display:grid;gap:9px;padding:14px;background:var(--a-surface)}
  .adm-fichem__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  /* La boîte du titre, dans la tête d'une carte.

     « .adm-cellule » porte « max-width:0 », et c'est juste dans un tableau :
     c'est ce qui permet à l'ellipse d'opérer dans une cellule. Dans cette
     rangée souple, la même déclaration l'écrasait à zéro — le titre passait
     alors à la ligne à chaque mot, et « Coordinatrice pédagogique 102 » se
     lisait sur sept lignes d'un mot. Ici, elle prend toute la place que
     l'étiquette de statut lui laisse. */
  .adm-fichem__tete .adm-cellule{flex:1;min-width:0;max-width:none}
  .adm-fichem__t{font-size:15px;font-weight:600;line-height:1.35;color:var(--a-prune)}
  .adm-fichem__e{margin-top:3px;font-size:13px;color:var(--a-gris)}
  .adm-fichem__meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--a-gris-clair)}
  .adm-fichem__pied{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
  /* L'action principale prend la largeur restante, le menu garde la sienne. */
  .adm-fichem__pied .adm-actions-cel{flex:1 1 100%;justify-content:flex-start}
  .adm-fichem__pied .adm-bouton{flex:1 1 auto}
  .adm-fichem__pied .adm-menuact{flex:none;margin-left:auto}
  .adm-fichem__q{font-weight:600;color:var(--a-gris)}
}

/* =========================================================================
   8. ÉTIQUETTES DE STATUT
   Une seule forme, sept couleurs, et jamais la couleur seule : le mot est
   toujours écrit.
   ========================================================================= */
.adm-etiq,.adm-etat,.adm-cand,.adm-soum,.adm-hijab,.adm-jauge--puce{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:var(--a-r);
  font-size:12px;font-weight:600;white-space:nowrap;
  border:1px solid transparent;
}
/* La petite puce d'une étiquette : une forme, en plus de la couleur. */
.adm-etiq::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:currentColor;opacity:.8}

.adm-etiq--neutre{background:#F1EDF0;color:var(--a-gris);border-color:#E4DCE2}
.adm-etiq--vert{background:var(--a-vert-fond);color:var(--a-vert);border-color:var(--a-vert-ligne)}
.adm-etiq--ambre{background:var(--a-ambre-fond);color:var(--a-ambre);border-color:var(--a-ambre-ligne)}
.adm-etiq--rose{background:var(--a-rose);color:var(--a-framboise);border-color:#F0D6E3}
.adm-etiq--rouge{background:var(--a-rouge-fond);color:var(--a-rouge);border-color:var(--a-rouge-ligne)}
.adm-etiq--bleu{background:var(--a-bleu-fond);color:var(--a-bleu);border-color:#CFDCF3}
.adm-etiq--prune{background:var(--a-prune);color:#fff;border-color:var(--a-prune)}
/* Les deux verts du journal des e-mails. « Accepté par Resend » ne confirme
   pas la livraison : vert pâle, texte vert foncé (6,3:1) et une coche fine.
   « Distribué au serveur » est le fait le plus fort : vert plein, texte
   blanc (6,6:1). */
.adm-etiq--vert-pale{background:#F2F8F4;color:var(--a-vert);border-color:#D3E9DB}
.adm-etiq--vert-pale::before{
  width:7px;height:3.5px;background:none;opacity:1;
  border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-1px) rotate(-45deg);
}
.adm-etiq--vert-plein{background:var(--a-vert);color:#FFFFFF;border-color:var(--a-vert)}
.adm-etiq--grande{padding:7px 14px;font-size:14px}

/* Les anciennes classes, conservées : mêmes couleurs, même forme. */
.adm-etat--brouillon{background:var(--a-rose);color:var(--a-framboise);border-color:#F0D6E3}
.adm-etat--publiee{background:var(--a-vert-fond);color:var(--a-vert);border-color:var(--a-vert-ligne)}
.adm-etat--archivee{background:#F1EDF0;color:var(--a-gris);border-color:#E4DCE2}

.adm-cand--nouvelle{background:var(--a-rouge-fond);color:var(--a-rouge);border-color:var(--a-rouge-ligne)}
.adm-cand--consultee{background:var(--a-rose);color:var(--a-framboise);border-color:#F0D6E3}
.adm-cand--transmise{background:var(--a-vert-fond);color:var(--a-vert);border-color:var(--a-vert-ligne)}
.adm-cand--archivee{background:#F1EDF0;color:var(--a-gris);border-color:#E4DCE2}

.adm-soum--soumise{background:var(--a-ambre-fond);color:var(--a-ambre);border-color:var(--a-ambre-ligne)}
.adm-soum--en_examen{background:var(--a-bleu-fond);color:var(--a-bleu);border-color:#CFDCF3}
.adm-soum--modification_demandee{background:#FBE6D4;color:#93490D;border-color:#F0D5BC}
.adm-soum--resoumise{background:var(--a-vert-fond);color:var(--a-vert);border-color:var(--a-vert-ligne)}
.adm-soum--acceptee{background:var(--a-vert-fond);color:var(--a-vert);border-color:var(--a-vert-ligne)}
.adm-soum--refusee{background:#F3E7EB;color:#7A4055;border-color:#E7D5DC}

.adm-hijab--oui{background:var(--a-vert-fond);color:var(--a-vert);border-color:var(--a-vert-ligne)}
.adm-hijab--non{background:#F3E7EB;color:#7A4055;border-color:#E7D5DC}
.adm-hijab--a_confirmer{background:var(--a-ambre-fond);color:var(--a-ambre);border-color:var(--a-ambre-ligne)}
.adm-hijab--grand{font-size:14px;padding:7px 14px}

/* La ligne « à examiner » : un liseré ambre à gauche, pas une ligne teintée. */
.adm-tableau tr.adm-tr--attention td:first-child{box-shadow:inset 3px 0 0 var(--a-ambre)}
.adm-fichem--attention{box-shadow:inset 3px 0 0 var(--a-ambre)}
/* Une candidature non lue : un liseré prune, et un point rose sur le nom. */
.adm-tableau tr.adm-tr--neuve td:first-child{box-shadow:inset 3px 0 0 var(--a-prune)}
.adm-fichem--neuve{box-shadow:inset 3px 0 0 var(--a-prune)}
.adm-neuf{
  display:inline-block;width:7px;height:7px;margin-right:7px;vertical-align:middle;
  background:var(--a-accent);transform:rotate(45deg);
  box-shadow:0 0 7px rgba(201,45,120,.5);
}

/* =========================================================================
   9. MENU D'ACTIONS
   Un bouton à trois points, un panneau, et rien qui sorte de l'écran.
   ========================================================================= */
.adm-menuact{position:relative;display:inline-flex}
.adm-menuact__b{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  background:var(--a-blanc);color:var(--a-gris);cursor:pointer;
  transition:border-color var(--a-t),color var(--a-t),background var(--a-t);
}
.adm-menuact__b:hover,.adm-menuact__b[aria-expanded="true"]{
  border-color:var(--a-accent);color:var(--a-framboise);background:var(--a-rose-pale);
}
/* Le panneau est porté dans « document.body » : il est donc placé en
   « fixed », à partir du rectangle du bouton, et plus aucun overflow ne le
   rogne. La couche 80 est la plus haute de l'administration — au-dessus de
   la colonne collante des actions (1), de l'en-tête du tableau (3), de la
   barre de sélection (6) et de la barre du bas sur téléphone (40). */
.adm-menuact__p{
  position:fixed;z-index:80;
  min-width:232px;max-width:min(300px,calc(100vw - 16px));padding:5px;
  background:var(--a-blanc);
  /* Une bordure rose très pâle plutôt que la nacre grise : le panneau flotte
     au-dessus du tableau, il lui faut son propre bord. */
  border:1px solid #F1D9E5;border-radius:var(--a-r-lg);
  box-shadow:0 10px 28px rgba(50,21,37,.14);
  display:grid;gap:1px;text-align:left;
  animation:admMenu 120ms ease both;
}
@keyframes admMenu{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.adm-menuact__p--haut{animation-name:admMenuHaut}
@keyframes admMenuHaut{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* --- Sous 640 px : une feuille ancrée en bas ------------------------------
   Un panneau flottant de deux cent trente pixels n'a nulle part où aller sur
   un écran de trois cent vingt. La feuille prend la largeur, respecte la
   zone sûre, et ses entrées gardent leurs 44 px. */
.adm-menuact__voile{
  position:fixed;inset:0;z-index:79;
  background:rgba(61,6,32,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.adm-menuact__feuille{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  max-height:82dvh;overflow-y:auto;
  display:grid;gap:1px;text-align:left;
  padding:6px 10px calc(10px + env(safe-area-inset-bottom));
  background:var(--a-blanc);
  border-top:1px solid #F1D9E5;
  border-radius:var(--a-r-lg) var(--a-r-lg) 0 0;
  box-shadow:0 -10px 28px -18px rgba(50,21,37,.32);
  animation:admFeuille 160ms ease both;
}
@keyframes admFeuille{from{transform:translateY(14px)}to{transform:none}}
.adm-menuact__titre{
  margin:4px 6px 6px;padding-bottom:8px;border-bottom:1px solid var(--a-ligne);
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--a-gris-clair);
}
.adm-menuact__feuille .adm-menuact__i{min-height:48px;font-size:14.5px}
.adm-menuact__fermer{
  margin-top:6px;justify-content:center;font-weight:600;
  border:1px solid var(--a-ligne-forte);
}
.adm-menuact__i{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:38px;padding:0 10px;border:0;border-radius:var(--a-r);
  background:none;color:var(--a-prune);
  font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
  transition:background var(--a-t),color var(--a-t);
}
.adm-menuact__i span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-menuact__i:hover{background:var(--a-rose-pale);color:var(--a-framboise)}
.adm-menuact__i svg{flex:none;opacity:.7}
.adm-menuact__i--rouge{color:var(--a-rouge)}
.adm-menuact__i--rouge:hover{background:var(--a-rouge-fond);color:var(--a-rouge)}
.adm-menuact__i[disabled]{opacity:.4;cursor:default}
.adm-menuact__sep{height:1px;margin:4px 6px;background:var(--a-ligne)}
.adm-menuact__q{padding:8px 10px 6px;font-size:12.5px;line-height:1.45;color:var(--a-gris)}

@media (max-width:860px){
  .adm-menuact__b{width:44px;height:44px}
  .adm-menuact__i{min-height:44px}
}

/* Publier, dépublier, archiver : la rangée de boutons de la page d'annonce. */
.adm-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-actions--compact{gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.adm-actions .adm-erreur{flex:1 1 100%;margin:0 0 6px}
.adm-actions--erreur{width:100%;justify-content:flex-end}
.adm-actions--erreur.adm-actions--compact{flex-wrap:wrap}
.adm-confirme{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--a-rouge)}

/* =========================================================================
   10. FORMULAIRES
   Champs blancs, bordures gris-prune, focus rose. Aucun fond rose.
   ========================================================================= */
.adm-champ{
  width:100%;height:42px;padding:0 12px;
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  background:var(--a-blanc);color:var(--a-prune);
  font:inherit;font-size:14px;
  transition:border-color var(--a-t),box-shadow var(--a-t);
}
textarea.adm-champ{height:auto;padding:10px 12px;line-height:1.6;resize:vertical}
select.adm-champ{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B6069' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.adm-champ::placeholder{color:#B4A4AE}
.adm-champ:hover{border-color:var(--a-gris-clair)}
.adm-champ:focus{outline:none;border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(201,45,120,.13)}
.adm-champ[readonly]{background:#F6F2F4;color:var(--a-gris);cursor:not-allowed}

.adm-form{display:grid;gap:20px}
.adm-form__grille{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:start}
.adm-form__paire{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adm-bloc label{display:block;font-size:13px;font-weight:600;margin-top:14px;color:var(--a-prune)}
.adm-bloc .adm-form__paire label{margin-top:0}
.adm-bloc .adm-form__paire{margin-top:12px}
.adm-bloc .adm-champ{width:100%}
.adm-bloc--prive{background:#FFFAFC;border-color:#F0D6E3}
.adm-prive{
  display:inline-block;padding:2px 7px;border-radius:var(--a-r-xs);
  background:var(--a-rose);color:var(--a-framboise);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.adm-aide{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--a-gris)}
.adm-aide code{background:var(--a-rose);padding:1px 5px;border-radius:var(--a-r-xs)}
.adm-aide--large{max-width:70ch;margin-bottom:12px}
.adm-case{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-weight:400 !important;font-size:14px !important}
.adm-case input{margin-top:3px;accent-color:var(--a-accent);width:17px;height:17px;flex:none}

.adm-verrou{
  margin-top:10px;padding:10px 12px;border-radius:var(--a-r);
  background:var(--a-ambre-fond);border:1px solid var(--a-ambre-ligne);
  font-size:12.5px;line-height:1.55;color:var(--a-ambre);
}
.adm-verrou .adm-case{margin-top:8px;font-size:12.5px !important;color:var(--a-ambre)}

/* Publiable ou non. */
.adm-jauge{margin:14px 0 0;padding:10px 12px;border-radius:var(--a-r);font-size:13px;line-height:1.5}
.adm-jauge--ok{background:var(--a-vert-fond);color:var(--a-vert);border:1px solid var(--a-vert-ligne)}
.adm-jauge--non{background:var(--a-ambre-fond);color:var(--a-ambre);border:1px solid var(--a-ambre-ligne)}
.adm-jauge--puce{margin:0;border-width:1px;border-style:solid}
.adm-jauge--puce.adm-jauge--ok{border-color:var(--a-vert-ligne)}
.adm-jauge--puce.adm-jauge--non{border-color:var(--a-ambre-ligne)}

/* La barre d'enregistrement, collée en bas : elle ne masque jamais un champ
   puisqu'elle se pose après le formulaire. */
.adm-barre{
  position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:4px;padding:12px 16px;
  background:rgba(255,252,250,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}
.adm-barre__actions{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:1080px){.adm-form__grille{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .adm-form__paire{grid-template-columns:minmax(0,1fr)}
  .adm-barre{position:static}
  .adm-barre__actions{width:100%}
  .adm-barre__actions .adm-bouton{flex:1 1 auto}
}

/* =========================================================================
   11. ÉTATS
   ========================================================================= */
.adm-vide{
  display:grid;justify-items:center;gap:6px;
  padding:38px 24px;text-align:center;
  border:1px dashed var(--mw-info-bord-fort);border-radius:var(--a-r-lg);
  background:var(--mw-info-fond);color:var(--mw-info-texte);
}
.adm-vide__t{font-size:15px;font-weight:600;color:var(--a-prune)}
.adm-vide__p{margin:0;font-size:13.5px;max-width:44ch}
.adm-vide__ico{
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:4px;
  border-radius:var(--a-r);background:var(--a-vert-fond);border:1px solid var(--a-vert-ligne);color:var(--a-vert);
}
.adm-vide code{background:var(--a-rose);padding:1px 5px;border-radius:var(--a-r-xs)}

.adm-succes{
  margin:0;padding:11px 14px;border-radius:var(--a-r);
  background:var(--a-vert-fond);border:1px solid var(--a-vert-ligne);
  color:var(--a-vert);font-size:13.5px;font-weight:500;
}
.adm-erreur{
  margin:0;padding:11px 14px;border-radius:var(--a-r);
  background:var(--a-rouge-fond);border:1px solid var(--a-rouge-ligne);
  color:var(--a-rouge);font-size:13.5px;font-weight:500;
}
.adm-alerte{
  margin:0 0 10px;padding:11px 14px;border-radius:var(--a-r);
  background:var(--a-ambre-fond);border:1px solid var(--a-ambre-ligne);
  color:var(--a-ambre);font-size:13.5px;
}

.adm-pages{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.adm-pages__etat{font-size:13.5px;color:var(--a-gris)}
.adm-pages [aria-disabled="true"]{opacity:.45;pointer-events:none}

/* =========================================================================
   12. CONNEXION ET INSTALLATION
   ========================================================================= */
.adm-connexion{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:var(--a-fond);
}
.adm-connexion__form{width:min(100%,400px);display:grid;gap:8px;padding:30px}
.adm-connexion__form h1{margin-top:16px;font-size:23px}
.adm-connexion__form label{font-size:13px;font-weight:600;margin-top:10px}
.adm-connexion__form .adm-bouton{margin-top:16px;width:100%}
.adm-etapes{margin:14px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.55}
.adm-etapes code{background:var(--a-rose);padding:1px 5px;border-radius:var(--a-r-xs);font-size:12.5px}

/* Divers repris des pages de détail. */
.adm-message{margin:6px 0 0;white-space:pre-wrap;line-height:1.65;font-size:14.5px}
.adm-defs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:8px 0 0;font-size:14px}
.adm-defs dt{color:var(--a-gris);font-size:13px}
.adm-defs dd{margin:0}

/* --- Aperçu du CV --------------------------------------------------------- */
.adm-cvbloc{margin-top:0}
.adm-cvbloc__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.adm-cvbloc__actions{display:flex;gap:8px;margin:0;flex-wrap:wrap}
.adm-cv{
  width:100%;height:min(78vh,900px);margin-top:12px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r);background:var(--a-blanc);
}
.adm-cv__repli{
  display:grid;gap:12px;justify-items:center;text-align:center;padding:36px 22px;color:var(--a-gris);
}
.adm-cv__boutons{display:flex;gap:10px;margin:0;flex-wrap:wrap;justify-content:center}
.adm-cv__mobile{display:none}

@media (max-width:860px){
  /* Le lecteur intégré des navigateurs mobiles n'affiche souvent que la
     première page, sans défilement : mieux vaut un onglet dédié. */
  .adm-cv{display:none}
  .adm-cv__mobile{
    display:grid;gap:12px;justify-items:center;text-align:center;
    margin-top:14px;padding:24px;
    border:1px dashed var(--a-ligne-forte);border-radius:var(--a-r);background:var(--a-blanc);
  }
  .adm-cvbloc__actions{display:none}
}

/* =========================================================================
   IMPORT PAR IA
   Le panneau doit être beau à filmer autant qu'à utiliser : la séquence
   dépôt → analyse → carte est pensée pour tenir dans une largeur de
   téléphone, 390 à 430 px, et se lire en quatre à six secondes.
   Palette : blanc, rose poudré, framboise, le dégradé de la marque, et une
   pointe d'or réservée à ce qui demande un second regard.
   ========================================================================= */

.adm-ia{
  margin-bottom:22px;padding:22px;
  background:#fff;border:1px solid #F3DCE9;border-radius:var(--a-r-lg);
}
.adm-ia__marque{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0 0 18px;font-size:17px;font-weight:600;letter-spacing:-.035em;color:var(--a-prune);
}
.adm-ia__marque img{display:block;width:26px;height:26px}

/* --- 1. La zone de dépôt -------------------------------------------------
   Le champ natif reste dans le document — c'est lui qui part avec le
   formulaire — mais il est retiré de la vue : sa boîte grise ruinerait
   l'ensemble. Le clic passe par le bouton, le glisser-déposer par le cadre. */
.adm-depot{
  display:grid;justify-items:center;text-align:center;gap:9px;
  padding:34px 22px;border:1.5px solid #F0D3E3;border-radius:var(--a-r-lg);
  background:linear-gradient(180deg,#FFF9FC 0%,#FDF2F7 100%);
  transition:border-color 180ms ease,background 180ms ease,transform 180ms ease;
}
.adm-depot--survol{border-color:var(--a-accent);background:#FCEBF3;transform:scale(1.006)}
.adm-depot__champ{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.adm-depot__ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--a-r-lg);
  background:linear-gradient(135deg,#FBE3EE,#F8D2E4);color:var(--a-framboise);
}
/* --- La démonstration du principe -----------------------------------------
   Une capture à gauche, un balayage, une annonce à droite. Tout est en
   barres : rien de lisible, rien d'inventé, juste le geste. Une seule
   horloge de 5 s tient l'ensemble, chaque pièce y prend son tour. */
.adm-demo{
  position:relative;display:flex;align-items:center;gap:14px;
  margin-bottom:4px;padding:4px;
}
.adm-demo__capture,
.adm-demo__carte{
  position:relative;display:flex;flex-direction:column;gap:5px;
  width:74px;padding:9px 8px;border-radius:var(--a-r);background:#fff;
  border:1px solid #F0D3E3;overflow:hidden;
}
.adm-demo__capture{height:92px;justify-content:flex-start}
.adm-demo__capture i{display:block;height:4px;border-radius:2px;background:#E9DCE4}
.adm-demo__capture i:nth-child(1){width:70%;height:6px;background:#D9C3D0}
.adm-demo__capture i:nth-child(2){width:92%}
.adm-demo__capture i:nth-child(3){width:80%}
.adm-demo__capture i:nth-child(4){width:88%}
.adm-demo__capture i:nth-child(5){width:60%}

.adm-demo__ligne{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#E0308C,transparent);
  box-shadow:0 0 8px 1px rgba(224,48,140,.65);
  animation:mw-demo-balaye 5s ease-in-out infinite;
}
@keyframes mw-demo-balaye{
  0%{top:6%;opacity:0}
  6%{opacity:1}
  30%{top:88%;opacity:1}
  36%{top:88%;opacity:0}
  100%{top:88%;opacity:0}
}

.adm-demo__fleche{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--a-rose);color:var(--a-framboise);
  animation:mw-demo-fleche 5s ease-in-out infinite;
}
@keyframes mw-demo-fleche{
  0%,28%{opacity:.35;transform:scale(.86)}
  38%{opacity:1;transform:scale(1.12)}
  52%,100%{opacity:.35;transform:scale(.86)}
}

/* L'annonce se compose : la vignette, puis le titre, puis les lignes, puis
   le bouton — le même ordre que la vraie carte. */
.adm-demo__carte{height:92px;opacity:0;animation:mw-demo-carte 5s ease-in-out infinite}
@keyframes mw-demo-carte{
  0%,36%{opacity:0;transform:translateY(7px)}
  48%{opacity:1;transform:none}
  88%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(7px)}
}
.adm-demo__carte b{
  display:block;width:20px;height:20px;border-radius:var(--a-r-xs);
  background:var(--mw-avant-fond);border:1px solid var(--mw-avant-bord);
}
.adm-demo__carte u{display:block;width:86%;height:6px;border-radius:3px;background:#C9B3C0}
.adm-demo__carte i{display:block;height:4px;border-radius:2px;background:#E9DCE4}
.adm-demo__carte i:nth-of-type(1){width:64%}
.adm-demo__carte i:nth-of-type(2){width:50%}
.adm-demo__carte em{
  display:block;margin-top:auto;height:13px;border-radius:4px;
  background-image:linear-gradient(90deg,#A21050,#E0308C);
}

.adm .adm-depot__t{margin:6px 0 0;font-size:19px;line-height:1.3;color:var(--a-prune)}
.adm-depot__p{margin:0;max-width:34ch;font-size:14px;line-height:1.55;color:var(--a-gris)}
.adm-depot__note{margin:2px 0 0;font-size:12.5px;color:#A2909A}

/* Les captures choisies, retirables une à une. */
.adm-vignettes{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.adm-vignette{position:relative;width:96px}
.adm-vignette img{
  display:block;width:96px;height:120px;object-fit:cover;object-position:top;
  border-radius:var(--a-r);border:1px solid var(--a-ligne);background:#fff;
}
.adm-vignette__nom{
  display:block;margin-top:5px;font-size:11px;line-height:1.3;color:#A2909A;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm-vignette__x{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--a-prune);color:#fff;
}
.adm-vignette__x:hover{background:var(--a-framboise)}

.adm-ia__garde{
  margin:18px 0 14px;padding:11px 13px;border-radius:var(--a-r);
  background:var(--a-rose);color:var(--a-framboise);
  font-size:13.5px;font-weight:600;line-height:1.5;
}

/* Le bouton de la marque. Un dégradé, pas d'ombre lourde. */
.adm-bouton--ia{
  width:100%;border:0;color:#fff;
  background-color:#C51F72;
  background-image:linear-gradient(90deg,#A21050 0%,#E0308C 100%);
}
.adm-bouton--ia:hover{background-image:linear-gradient(90deg,#8E0E46 0%,#D0277F 100%)}
.adm-bouton--ia:disabled{opacity:.5;background-image:none;background-color:#D9AFC5}

.adm-ia__mode{
  display:inline-flex;align-items:center;gap:6px;margin:14px auto 0;
  padding:6px 12px;border:1px solid var(--a-ligne);border-radius:var(--a-r);
  background:#fff;color:var(--a-gris);font-size:12.5px;cursor:pointer;
  transition:color 160ms ease,border-color 160ms ease;
}
.adm-ia__mode:hover{color:var(--a-framboise);border-color:#F0D3E3}
.adm-ia > .adm-ia__mode{display:flex}

/* --- 2. L'analyse ---------------------------------------------------------
   Une ligne lumineuse parcourt les captures, un halo respire autour de la
   carte, quelques scintillements fins. Pas de pourcentage : l'avancement
   réel n'est pas connu, la barre est donc indéterminée. */
.adm-scan{display:grid;justify-items:center;gap:18px;padding:30px 20px}
.adm-scan__pile{position:relative;display:flex;gap:10px;padding:14px 18px;border-radius:var(--a-r-lg)}
.adm-scan__img{
  width:150px;height:190px;object-fit:cover;object-position:top;
  border-radius:var(--a-r);border:1px solid #F0D3E3;background:#fff;
  --pente:0deg;
  transform:rotate(var(--pente));
  animation:mw-respire 2.4s ease-in-out infinite;
  animation-delay:calc(var(--n) * .12s);
}
.adm-scan__pile:not(:has(.adm-scan__img:only-of-type)) .adm-scan__img{
  --pente:calc((var(--n) - 1) * 2.5deg);
}
@keyframes mw-respire{0%,100%{transform:rotate(var(--pente)) translateY(0)}
  50%{transform:rotate(var(--pente)) translateY(-4px)}}

.adm-scan__ligne{
  position:absolute;left:10px;right:10px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#E0308C 25%,#FFFFFF 50%,#E0308C 75%,transparent);
  box-shadow:0 0 14px 3px rgba(224,48,140,.7),0 0 40px 8px rgba(224,48,140,.28);
  animation:mw-balaye 1.7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mw-balaye{0%{top:5%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:95%;opacity:0}}

.adm-scan__halo{
  position:absolute;inset:-46px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(224,48,140,.15) 0%,rgba(224,48,140,.06) 45%,transparent 70%);
  animation:mw-halo 2.4s ease-in-out infinite;
}
@keyframes mw-halo{0%,100%{opacity:.45}50%{opacity:.95}}

.adm-scan__etincelle{
  position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;
  background:#F5C86B;box-shadow:0 0 6px 1px rgba(245,200,107,.8);
  top:calc(6% + var(--n) * 16%);
  left:calc(-7% + var(--n) * 22%);
  opacity:0;animation:mw-scintille 2.1s ease-in-out infinite;
  animation-delay:calc(var(--n) * .28s);
}
@keyframes mw-scintille{0%,100%{opacity:0;transform:scale(.4)}
  45%{opacity:.9;transform:scale(1)}}

.adm-scan__msg{margin:0;font-size:15px;font-weight:600;color:var(--a-prune);text-align:center;
  animation:mw-monte 320ms cubic-bezier(.22,1,.36,1)}
.adm-scan__barre{
  display:block;width:min(280px,80%);height:3px;border-radius:3px;overflow:hidden;
  background:#F6E3EE;
}
.adm-scan__barre i{
  display:block;width:38%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#A21050,#E0308C);
  animation:mw-indetermine 1.25s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes mw-indetermine{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}

/* L'éclat, très bref, entre l'analyse et la carte. */
.adm-scan--eclat .adm-scan__pile::after{
  content:"";position:absolute;inset:-30px;border-radius:30px;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(224,48,140,.35),transparent 70%);
  animation:mw-eclat 450ms ease-out forwards;
}
@keyframes mw-eclat{0%{opacity:0;transform:scale(.7)}35%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

/* --- 3. Le résultat ------------------------------------------------------- */
.adm-resultat{position:relative;display:grid;gap:14px;justify-items:center}
.adm .adm-resultat__t{
  margin:4px 0 0;font-size:21px;line-height:1.25;color:var(--a-prune);text-align:center;
  animation:mw-monte 420ms cubic-bezier(.22,1,.36,1);
}
.adm-resultat__p{
  margin:0;max-width:42ch;font-size:14px;line-height:1.55;color:var(--a-gris);text-align:center;
  animation:mw-monte 420ms cubic-bezier(.22,1,.36,1) 60ms backwards;
}
@keyframes mw-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Quelques scintillements, moins d'une seconde, roses et dorés. */
.adm-resultat__etincelles{position:absolute;inset:0;margin:0;pointer-events:none}
.adm-resultat__etincelles span{
  position:absolute;width:5px;height:5px;border-radius:50%;
  top:calc(4% + var(--n) * 9%);
  left:calc(6% + var(--n) * 12%);
  background:var(--a-accent);box-shadow:0 0 8px 2px rgba(201,45,120,.6);
  opacity:0;animation:mw-eclate 900ms ease-out forwards;
  animation-delay:calc(var(--n) * 45ms);
}
.adm-resultat__etincelles span:nth-child(2n){
  background:#E8B85C;box-shadow:0 0 8px 2px rgba(232,184,92,.65);
}
@keyframes mw-eclate{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.6) translateY(-14px)}}

/* La carte, à l'image de celles du site public. Les éléments paraissent
   l'un après l'autre : icône, intitulé, entreprise, lieu, modalité, bouton. */
.adm-carte-apercu{
  width:100%;max-width:390px;padding:20px;
  background:#fff;border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  animation:mw-monte 460ms cubic-bezier(.22,1,.36,1);
}
.adm-carte-apercu > *,
.adm-carte-apercu__haut{opacity:0;transform:translateY(8px)}
.adm-carte-apercu.r1 .adm-carte-apercu__haut,
.adm-carte-apercu.r2 .adm-carte-apercu__haut,
.adm-carte-apercu.r3 .adm-carte-apercu__haut,
.adm-carte-apercu.r4 .adm-carte-apercu__haut,
.adm-carte-apercu.r5 .adm-carte-apercu__haut,
.adm-carte-apercu.r6 .adm-carte-apercu__haut,
.adm-carte-apercu.r2 .adm-carte-apercu__titre,
.adm-carte-apercu.r3 .adm-carte-apercu__titre,
.adm-carte-apercu.r4 .adm-carte-apercu__titre,
.adm-carte-apercu.r5 .adm-carte-apercu__titre,
.adm-carte-apercu.r6 .adm-carte-apercu__titre,
.adm-carte-apercu.r3 .adm-carte-apercu__ent,
.adm-carte-apercu.r4 .adm-carte-apercu__ent,
.adm-carte-apercu.r5 .adm-carte-apercu__ent,
.adm-carte-apercu.r6 .adm-carte-apercu__ent,
.adm-carte-apercu.r4 .adm-carte-apercu__meta,
.adm-carte-apercu.r5 .adm-carte-apercu__meta,
.adm-carte-apercu.r6 .adm-carte-apercu__meta,
.adm-carte-apercu.r5 .adm-carte-apercu__mod,
.adm-carte-apercu.r6 .adm-carte-apercu__mod,
.adm-carte-apercu.r5 .adm-alerte,
.adm-carte-apercu.r6 .adm-alerte{
  opacity:1;transform:none;transition:opacity 300ms ease,transform 300ms cubic-bezier(.22,1,.36,1);
}

.adm-carte-apercu__haut{display:flex;align-items:center;gap:11px;margin-bottom:14px}
/* La vignette du métier est redéfinie ici : .pastille appartient à la feuille
   du site public, que l'administration ne charge pas. Mêmes valeurs, pour que
   l'aperçu ressemble vraiment à la carte qu'il annonce. */
.adm-carte-apercu__ico{
  flex:none;display:grid;place-items:center;
  width:48px;height:48px;border-radius:var(--a-r);
  background:var(--mw-avant-fond);border:1px solid var(--mw-avant-bord);color:#C32371;
}
.adm-carte-apercu__ico svg{width:21px;height:21px}
.adm-carte-apercu__secteur{font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#A2909A}
.adm .adm-carte-apercu__titre{margin:0;font-size:19px;line-height:1.3;color:var(--a-prune)}
.adm-carte-apercu__ent{margin:5px 0 0;font-size:14.5px;color:var(--a-prune)}
.adm-carte-apercu__meta{margin:2px 0 0;font-size:14px;color:var(--a-gris)}
.adm-vide{font-style:normal;color:#B9A6B0}

.adm-carte-apercu__mod{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--a-ligne);
}
.adm-carte-apercu__modt{margin:0;font-size:14px;font-weight:700;color:var(--a-prune)}
.adm-carte-apercu__modp{margin:5px 0 12px;font-size:13.5px;line-height:1.55;color:var(--a-gris)}
.adm-carte-apercu__bouton{
  display:block;padding:12px 18px;border-radius:var(--a-r);text-align:center;
  color:#fff;font-size:14.5px;font-weight:600;
  background-color:#C51F72;background-image:linear-gradient(90deg,#A21050 0%,#E0308C 100%);
}
.adm-carte-apercu__quitter{margin:10px 0 0;font-size:12px;line-height:1.5;color:#A2909A}

/* --- Ce qui a été lu ------------------------------------------------------ */
.adm-badges{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:2px 0 0}
.adm-badge{padding:4px 11px;border-radius:var(--a-r);font-size:12.5px;font-weight:600}
.adm-badge--ok{background:#E7F4EC;color:#1E6B41}
.adm-badge--or{background:#FBF0DA;color:#8A6314}
.adm-badge--vide{background:var(--mw-info-fond);color:var(--mw-info-texte)}

.adm-detail{display:grid;gap:7px;width:100%;max-width:520px;margin-top:4px}
.adm-detail__l{
  display:flex;align-items:flex-start;gap:9px;margin:0;
  padding:9px 12px;border-radius:var(--a-r);font-size:13.5px;line-height:1.5;color:var(--a-gris);
}
.adm-detail__l--or{background:#FDF8EC}
.adm-detail__l--vide{background:var(--mw-info-fond);color:var(--mw-info-texte)}
.adm-detail__l--ok{background:#F1F8F3;color:#1E6B41}
.adm-detail__l strong{color:var(--a-prune);font-weight:600}

.adm-alerte{
  margin:16px 0 0;padding:12px 14px;border-radius:var(--a-r);
  background:#FDECEF;color:#8E1C33;font-size:13.5px;line-height:1.55;
}

.adm-suite{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:390px}
.adm-suite .adm-bouton{flex:1 1 160px}
.adm-resultat__pied{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:6px 0 0;
}
.adm-resultat__cout{font-size:12px;color:#A2909A}

/* --- 4. L'échec ----------------------------------------------------------- */
.adm-echec{display:grid;justify-items:center;text-align:center;gap:10px;padding:34px 22px;
  border:1px solid #F2D6DC;border-radius:var(--a-r-lg);background:#FEFAFB}

/* =========================================================================
   MODE PRÉSENTATION
   Pour filmer : plus de carte, plus de marges, plus de décor
   d'administration. La démonstration prend l'écran entier, centrée, sur le
   fond rosé de la marque — ce qui est enregistré est exactement ce qui sera
   publié. Aucune coordonnée privée n'est à l'écran : l'aperçu ne montre que
   ce qui serait public de toute façon.
   ========================================================================= */
.mw-presentation .adm-menu,
.mw-presentation .adm-entete,
.mw-presentation .adm-form,
.mw-presentation .adm-erreur,
.mw-presentation .adm-fil{display:none !important}

.mw-presentation,
.mw-presentation body{background:#FDF1F6}
.mw-presentation .adm-coquille{
  display:block;min-height:100dvh;
  background:radial-gradient(120% 80% at 50% 0%,#FFF9FC 0%,#FDF1F6 55%,#FBE7F1 100%);
}
.mw-presentation .adm-contenu{padding:0;max-width:none}

/* Le panneau n'est plus une carte : il est la page. */
.adm-ia--presentation{
  width:100%;max-width:none;min-height:100dvh;margin:0;padding:24px 20px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  display:grid;align-content:center;justify-items:center;gap:8px;
}
/* La démonstration tient dans une colonne de largeur téléphone, centrée sur
   toute la hauteur. C'est le cadrage d'une story : sur un écran de 1920 px,
   étirer la carte donnerait un bouton de deux mètres de long ; sur un
   téléphone, 430 px, c'est déjà l'écran entier. */
.adm-ia--presentation > form,
.adm-ia--presentation > .adm-scan,
.adm-ia--presentation > .adm-resultat,
.adm-ia--presentation > .adm-echec{width:100%;max-width:430px}

.mw-presentation .adm-ia__marque{margin-bottom:24px;font-size:19px}
.mw-presentation .adm-ia__marque img{width:30px;height:30px}

/* La capture occupe la hauteur disponible plutôt qu'une taille fixe : le
   cadrage d'une story est haut, autant s'en servir. */
.mw-presentation .adm-scan{padding:0;gap:26px}
/* La capture est floutée pendant la démonstration.
   Ce n'est pas un effet : l'image source est une vraie annonce, et une vraie
   annonce porte l'adresse ou le numéro du recruteur. Notre interface a beau
   masquer les coordonnées, elles resteraient lisibles dans les pixels de la
   capture. Le flou garde la silhouette de l'annonce — on voit qu'on lit un
   document — et rend le texte fin illisible à l'enregistrement. */
.mw-presentation .adm-scan__img{
  width:auto;height:min(46dvh,380px);max-width:78vw;
  filter:blur(1.6px);
}
.mw-presentation .adm-scan__msg{font-size:17px}
.mw-presentation .adm-scan__barre{width:min(300px,72vw)}

.mw-presentation .adm-resultat{gap:16px;width:100%}
.mw-presentation .adm-resultat__t{font-size:25px}
.mw-presentation .adm-carte-apercu{width:100%;padding:24px 22px;border-radius:var(--a-r-lg)}
.mw-presentation .adm-carte-apercu__ico{width:56px;height:56px;border-radius:var(--a-r)}
.mw-presentation .adm-carte-apercu__ico svg{width:25px;height:25px}
.mw-presentation .adm-carte-apercu__titre{font-size:23px}
.mw-presentation .adm-carte-apercu__ent{font-size:16px;margin-top:7px}
.mw-presentation .adm-carte-apercu__meta{font-size:15px}
.mw-presentation .adm-carte-apercu__mod{margin-top:22px;padding-top:20px}
.mw-presentation .adm-carte-apercu__bouton{padding:15px 20px;font-size:16px}
.mw-presentation .adm-suite{width:100%;max-width:none}
/* Deux boutons côte à côte tiennent mal dans 430 px : ils s'empilent. */
.mw-presentation .adm-suite .adm-bouton{flex:1 1 100%}
.mw-presentation .adm-depot{width:100%;padding:38px 22px}

/* =========================================================================
   PETITS ÉCRANS — la séquence doit tenir dans un cadre de story, 390 à 430 px
   ========================================================================= */
@media (max-width:520px){
  .adm-ia{padding:16px;border-radius:var(--a-r-lg)}
  .adm-depot{padding:26px 16px}
  .adm .adm-depot__t{font-size:17.5px}
  .adm-vignette,.adm-vignette img{width:80px}
  .adm-vignette img{height:100px}
  .adm-scan{padding:22px 8px;gap:16px}
  .adm-scan__img{width:122px;height:156px}
  .adm-carte-apercu{padding:17px}
  .adm .adm-carte-apercu__titre{font-size:17.5px}
  .adm-suite{max-width:none}
  .adm-suite .adm-bouton{flex:1 1 100%}
}

/* =========================================================================
   MOUVEMENT RÉDUIT
   Les états restent, le mouvement disparaît. Rien n'est masqué au passage :
   la carte s'affiche entière, d'emblée.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .adm-scan__img,.adm-scan__ligne,.adm-scan__halo,.adm-scan__etincelle,
  .adm-scan__barre i,.adm-scan__msg,.adm-resultat__t,.adm-resultat__p,
  .adm-carte-apercu,.adm-scan--eclat .adm-scan__pile::after{
    animation:none !important;transition:none !important;transform:none !important;
  }
  .adm-scan__ligne{top:50%;opacity:.5}
  .adm-scan__halo,.adm-scan__etincelle,.adm-resultat__etincelles{display:none}
  .adm-scan__barre i{width:100%}
  .adm-carte-apercu > *,.adm-carte-apercu__haut{opacity:1 !important;transform:none !important}
  .adm-demo__ligne,.adm-demo__fleche,.adm-demo__carte{animation:none !important}
  .adm-demo__ligne{display:none}
  .adm-demo__carte{opacity:1;transform:none}
  .adm-demo__fleche{opacity:1;transform:none}
}

/* =========================================================================
   MODÉRATION DES ANNONCES PROPOSÉES
   Le dossier d'une entreprise : ce qu'elle a écrit, ce qu'elle déclare, les
   décisions et l'historique. Les cartes, les champs et les boutons sont ceux
   de l'administration — ce bloc ne pose que ce qui n'existait pas.
   ========================================================================= */
.adm-colonnes{
  display:grid;gap:16px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
/* Dans une colonne, le libellé ne prend jamais plus de 40 % : sans plafond,
   « Raison sociale déclarée » réduisait la valeur à un mot par ligne. */
.adm-colonnes .adm-liste{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
.adm-colonnes > .adm-bloc{margin:0}

/* Une liste de faits : le terme à gauche, la valeur à droite. */
.adm-liste{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14.5px}
.adm-liste dt{color:#8A7681;font-weight:500}
.adm-liste dd{margin:0;color:var(--a-prune);word-break:break-word}

/* Une liste d'éléments liés (Recruteurs : annonces, autres comptes) — un par
   ligne, séparés d'un filet, l'étiquette et la précision à la suite. */
.adm-liste-simple{list-style:none;margin:0;padding:0;display:grid;font-size:14.5px}
.adm-liste-simple li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  padding:10px 0;border-bottom:1px solid var(--a-ligne);color:var(--a-prune)}
.adm-liste-simple li:last-child{border-bottom:0}

.adm-citation{
  margin:12px 0 0;padding:14px 16px;border-left:3px solid var(--a-rose);
  background:#FDF7FA;border-radius:0 var(--a-r) var(--a-r) 0;
  font-size:14.5px;line-height:1.65;color:var(--a-gris);font-style:italic;
}


/* --- Le bloc de décision ------------------------------------------------ */
.adm-moderation__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.adm-moderation__form{
  display:grid;gap:8px;margin-top:18px;padding-top:18px;
  border-top:1px dashed var(--a-ligne,#F0E4EC);
}
.adm-moderation__form label{font-size:14px;font-weight:600;color:var(--a-prune)}
.adm-moderation__form .adm-bouton{justify-self:start;margin-top:4px}

/* --- L'historique -------------------------------------------------------- */
.adm-histo{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.adm-histo__e{
  display:grid;gap:2px;padding:12px 0 12px 16px;
  border-left:2px solid #EFE3EB;
}
.adm-histo__e--administration{border-left-color:var(--a-framboise)}
.adm-histo__e--recruteur{border-left-color:#C9A227}
.adm-histo__q{font-size:14.5px;font-weight:600;color:var(--a-prune)}
.adm-histo__d{font-size:12.5px;color:#A2909A}
.adm-histo__m{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--a-gris);white-space:pre-wrap}

.adm .adm-bloc__titre--seul{margin:26px 0 6px}
.adm-aide--large{max-width:70ch;margin-bottom:12px}

/* =========================================================================
   ÉLÉMENTS DEMANDÉS ET PIÈCES TRANSMISES
   Le choix de ce qu'une annonce demande, et la liste de ce qui est arrivé.
   Aucune couleur nouvelle : les cartes, les cases et les boutons sont ceux
   du reste de l'administration.
   ========================================================================= */
.adm-elements{display:grid;gap:10px}
.adm-element{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:12px 14px;border:1px solid var(--a-ligne);border-radius:var(--a-r);
  background:#FFF;
}
.adm-element--actif{border-color:#E7D3E0;background:#FFFDFE}
.adm-element__nom{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--a-prune)}
.adm-element__nom--large{flex:1;flex-direction:column;align-items:stretch;gap:5px;font-weight:500}
.adm-element__l{font-size:12.5px;font-weight:600;color:#8A7681}
.adm-element__reglages{display:flex;align-items:center;gap:14px;margin-left:auto}
.adm-element__reglages .adm-champ{height:38px;padding:0 10px}
.adm-element__fixe{font-size:13.5px;color:#8A7681}
.adm-element__obl{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--a-gris)}

/* --- Ce que la candidate a transmis -------------------------------------- */
.adm-pieces{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.adm-piece{
  display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:6px 18px;
  align-items:center;padding:12px 14px;border:1px solid var(--a-ligne);border-radius:var(--a-r);
}
.adm-piece__q{font-size:14px;font-weight:600;color:var(--a-prune)}
.adm-piece__v{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px}
.adm-piece__f{color:var(--a-gris)}
.adm-piece__t{grid-column:1 / -1;margin:0}

@media (max-width:760px){
  .adm-element__reglages{margin-left:0;width:100%}
  .adm-piece{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   TRAITEMENT EN MASSE — cases, barre contextuelle, fenêtres
   Les annonces proposées se traitent par lot. Rien de neuf en couleur : le
   rose pâle de la marque pour ce qui est choisi, le prune pour l'action qui
   publie, le rouge sourd de l'administration pour ce qui ne se défait pas.
   Aucune capsule noire, aucune ombre portée lourde — ce qui sépare reste
   une ligne.
   ========================================================================= */

.adm-masse{display:grid;gap:var(--a-gout);min-width:0}

/* --- La case -------------------------------------------------------------
   Une case native, agrandie et teintée : « accent-color » suffit, et elle
   garde son état intermédiaire, son focus système et son comportement au
   clavier. Une fausse case en <span> perdrait les trois. */
/* La case de sélection d'une ligne. Elle s'est appelée « .adm-case » un
   temps, et c'était une collision : ce nom désignait déjà, dans les
   formulaires, une case suivie de son libellé. Un libellé enfermé dans une
   boîte de trente-quatre pixels se plie mot par mot — « Le », « veux »,
   « hijab ». Deux rôles, deux noms. */
.adm-selec{
  /* « flex:none » n'est pas décoratif : dans la carte du téléphone, la case
     est un élément de boîte flexible, et elle se laissait comprimer à 29 px
     par le titre à côté d'elle — sous les 44 px d'une cible tactile. */
  flex:none;
  display:inline-grid;place-items:center;
  width:34px;height:34px;margin:-6px;   /* la cible déborde de la colonne */
  border-radius:var(--a-r-xs);cursor:pointer;
}
.adm-selec:hover{background:var(--a-rose-pale)}
.adm-selec__i{
  width:17px;height:17px;margin:0;cursor:pointer;
  accent-color:var(--a-accent);
}
.adm-selec__i:disabled{cursor:default;opacity:.45}

/* La colonne des cases : étroite, et elle ne participe pas au tri visuel. */
.adm-c-case{width:46px;text-align:left}
.adm-tableau th.adm-c-case{padding-right:0}
.adm-tableau td.adm-c-case{padding-right:0}

/* La ligne choisie : un fond rose très pâle, et un trait rose sur l'arête.
   Le liseré ambre de « à examiner » lui cède la place le temps du choix —
   le statut reste écrit dans la ligne, rien ne se perd. */
.adm-tableau tbody tr:has(.adm-selec__i:checked){background:var(--a-rose-pale)}
.adm-tableau tbody tr:has(.adm-selec__i:checked):hover{background:#FCEDF4}
.adm-tableau tbody tr:has(.adm-selec__i:checked) td:first-child{
  box-shadow:inset 3px 0 0 var(--a-accent);
}
.adm-tableau[data-colle="oui"] tbody tr:has(.adm-selec__i:checked) .adm-col-actions{
  background:var(--a-rose-pale);
}
.adm-fichem:has(.adm-selec__i:checked){
  background:var(--a-rose-pale);box-shadow:inset 3px 0 0 var(--a-accent);
}

/* --- La barre contextuelle -----------------------------------------------
   Elle paraît sous les filtres dès qu'une case est cochée. Collante sur
   grand écran, jamais « fixed » : elle reste dans le flux, suit le tableau,
   et ne recouvre rien quand la page est courte. */
.adm-masse__barre{
  position:sticky;top:0;z-index:6;
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:9px 12px;
  background:linear-gradient(150deg,rgba(255,255,255,.94) 0%,rgba(253,244,248,.90) 100%);
  border:1px solid #F1D9E5;border-radius:var(--a-r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
          backdrop-filter:blur(12px) saturate(130%);
}
/* L'en-tête du tableau n'est pas décalé pour laisser passer la barre, et
   c'est une correction, pas un oubli. « .adm-tableau__defile » porte
   « overflow-x:auto », ce qui en fait aussi un conteneur de défilement
   vertical : l'en-tête collant s'y accroche, et non à la fenêtre. Lui donner
   « top:56px » ne le faisait donc pas passer sous la barre — cela le
   poussait de cinquante-six pixels vers le bas, en permanence, et la
   première ligne du tableau disparaissait dessous. L'en-tête reste à zéro,
   il défile avec le tableau, et la barre passe par-dessus.

*/

.adm-masse__n{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:13.5px;font-weight:600;color:var(--a-prune);white-space:nowrap;
}
/* Le compteur : la capsule framboise de la barre latérale, son reflet
   d'arête compris. C'est le seul endroit de la barre qui brille. */
.adm-masse__pastille{
  position:relative;display:inline-grid;place-items:center;
  min-width:26px;height:24px;padding:0 8px;border-radius:999px;
  background:linear-gradient(140deg,#C42C76 0%,#951753 62%,#7A143F 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 3px rgba(122,20,63,.22);
  font-size:12.5px;font-weight:700;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.adm-masse__pastille::after{
  content:"";position:absolute;top:2.5px;left:50%;
  width:12px;height:3.5px;margin-left:-6px;border-radius:999px;
  background:rgba(255,255,255,.5);filter:blur(1.2px);
}
.adm-masse__hors{font-weight:500;color:var(--a-gris);font-size:12.5px}

.adm-masse__actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto}
.adm-masse__annuler{margin-left:4px;white-space:nowrap}
.adm-masse__annuler[disabled]{opacity:.5;cursor:default}

/* « Accepter et publier » : la seule action de la barre qui met en ligne,
   et la seule à porter le prune plein. */
.adm-bouton--publier{
  background:linear-gradient(150deg,#6B1640 0%,#951753 100%);color:#fff;border-color:transparent;
}
.adm-bouton--publier:hover{background:linear-gradient(150deg,#7E1A4C 0%,#A81A5E 100%)}
.adm a.adm-bouton--publier{color:#fff}

/* La portée de la sélection, écrite en toutes lettres sur sa propre ligne. */
.adm-masse__portee{flex:1 1 100%;margin:0;font-size:12.5px;color:var(--a-gris)}
.adm-masse__plafond{color:var(--a-gris-clair)}
.adm-masse__ferme{margin-left:10px}

/* --- Téléphone : la barre du bas, et le panneau ---------------------------
   « fixed » est ici légitime : c'est une barre d'écran, pas une barre de
   tableau. Elle respecte la zone sûre de l'iPhone, et ses trois cibles font
   44 px. */
.adm-masse__mob{display:none}
@media (max-width:860px){
  .adm-masse__barre{display:none}
  .adm-masse__mob{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,253,252,.96);
    border-top:1px solid #F1D9E5;
    box-shadow:0 -6px 18px -16px rgba(84,32,60,.45);
    -webkit-backdrop-filter:blur(12px) saturate(130%);
            backdrop-filter:blur(12px) saturate(130%);
  }
  .adm-masse__mobn{
    display:flex;align-items:center;gap:8px;margin:0;margin-right:auto;
    min-width:0;font-size:13.5px;font-weight:600;color:var(--a-prune);
  }
  /* Le compteur cède avant les boutons : c'est le nombre qui compte, et il
     est dans la pastille. */
  .adm-masse__mobn span:last-child{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* La page garde de quoi défiler sous la barre : sans cela, la dernière
     carte de la liste reste dessous. */
  .adm-masse:has(.adm-masse__mob){padding-bottom:84px}
  .adm-selec{width:44px;height:44px;margin:-4px}
  .adm-selec__i{width:20px;height:20px}
}

/* À 320 px, trois cibles de 44 px et leurs écarts ne tiennent qu'en serrant
   les marges. Mesuré : sans cela, le dernier bouton dépasse de cinq pixels. */
@media (max-width:400px){
  .adm-masse__mob{gap:7px;padding-left:10px;padding-right:10px}
  .adm-masse__mob .adm-bouton--petit{padding:0 11px}
  .adm-masse__mobn{gap:6px;font-size:12.5px}
}

/* Le panneau d'actions du téléphone : une action par ligne, jamais cinq
   boutons comprimés. */
.adm-masse__liste{display:grid;gap:4px}
.adm-masse__choix{
  display:flex;align-items:center;gap:11px;
  min-height:48px;padding:0 12px;width:100%;
  background:none;border:1px solid transparent;border-radius:var(--a-r);
  font:inherit;font-size:14.5px;font-weight:500;color:var(--a-prune);
  text-align:left;cursor:pointer;
  transition:background var(--a-t),border-color var(--a-t);
}
.adm-masse__choix:hover{background:var(--a-rose-pale);border-color:#F1D9E5}
.adm-masse__choix svg{flex:none;color:var(--a-gris)}
.adm-masse__choix--rouge{color:var(--a-rouge)}
.adm-masse__choix--rouge:hover{background:var(--a-rouge-fond);border-color:var(--a-rouge-ligne)}
.adm-masse__choix--rouge svg{color:var(--a-rouge)}
/* Ce qui est irréversible est séparé du reste, et le dit. */
.adm-masse__sep{
  margin:10px 0 2px;padding-top:10px;border-top:1px solid var(--a-ligne);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-gris-clair);
}

/* --- La fenêtre de confirmation ------------------------------------------ */
.adm-modale{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:20px;
  background:rgba(61,6,32,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.adm-modale__b{
  width:min(560px,100%);max-height:min(86dvh,780px);
  display:flex;flex-direction:column;
  border-radius:var(--a-r-lg);
  /* Le verre de l'administration, posé sur un blanc franc : une fenêtre doit
     rester lisible même par-dessus un tableau dense. */
  background:linear-gradient(150deg,rgba(255,255,255,.97) 0%,rgba(255,247,251,.94) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -28px rgba(84,32,60,.55);
}
.adm-modale__tete{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 18px 12px;border-bottom:1px solid var(--a-ligne);
}
.adm .adm-modale__t{flex:1 1 auto;font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0}
.adm-modale__x{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  background:none;border:1px solid transparent;border-radius:var(--a-r);
  color:var(--a-gris);cursor:pointer;
}
.adm-modale__x:hover{background:var(--a-rose-pale);border-color:var(--a-ligne);color:var(--a-framboise)}
.adm-modale__c{padding:16px 18px;overflow-y:auto;display:grid;gap:10px;align-content:start}
.adm-modale__p{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--a-ligne);
}
.adm-modale__phrase{margin:0;font-size:14.5px;line-height:1.55;color:var(--a-prune)}
.adm-modale__phrase strong{font-weight:700}
.adm-modale__l{
  margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-gris-clair);
}

/* Le choix « la proposition seule / aussi l'annonce » : deux réponses
   possibles, aucune cochée d'avance au-delà de la plus sûre. */
.adm-modale__choixs{margin:4px 0 0;padding:0;border:0;display:grid;gap:6px}
.adm-modale__radio{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border:1px solid var(--a-ligne);border-radius:var(--a-r);
  background:var(--a-blanc);cursor:pointer;font-size:13.5px;
}
.adm-modale__radio:hover{border-color:var(--a-ligne-forte)}
.adm-modale__radio input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--a-accent)}
.adm-modale__radio:has(input:checked){border-color:var(--a-accent);background:var(--a-rose-pale)}
.adm-modale__radio span{display:block;min-width:0}
.adm-modale__radio .adm-aide{margin-top:3px}

/* Le rappel qu'une annonce est en ligne, et la case qui l'assume. */
.adm-modale__garde{
  padding:11px 13px;border-radius:var(--a-r);font-size:13px;line-height:1.5;
  background:var(--a-ambre-fond);border:1px solid var(--a-ambre-ligne);color:var(--a-ambre);
}
.adm-modale__garde--vive{
  background:var(--a-rouge-fond);border-color:var(--a-rouge-ligne);color:var(--a-rouge);
}
.adm-modale__garde p{margin:0}
.adm-modale__coche{
  display:flex;align-items:flex-start;gap:9px;margin-top:9px;
  font-weight:600;cursor:pointer;
}
.adm-modale__coche input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--a-rouge)}

.adm-modale__det{font-size:13px;color:var(--a-gris)}
.adm-modale__det summary{cursor:pointer;font-weight:600;color:var(--a-framboise)}
.adm-modale__motifs{
  margin:8px 0 0;padding:0 0 0 2px;list-style:none;
  display:grid;gap:6px;font-size:12.5px;line-height:1.5;color:var(--a-gris);
}
.adm-modale__motifs li{padding-left:11px;border-left:2px solid var(--a-ligne-forte)}
.adm-modale__ref{font-weight:700;color:var(--a-prune)}

@media (max-width:560px){
  .adm-modale{padding:0;place-items:end stretch}
  /* Sur téléphone, la fenêtre monte du bas : le pouce l'atteint, et la zone
     sûre est respectée. */
  .adm-modale__b{
    width:100%;max-height:92dvh;border-radius:var(--a-r-lg) var(--a-r-lg) 0 0;
  }
  .adm-modale__p{
    flex-direction:column-reverse;align-items:stretch;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .adm-modale__p .adm-bouton{width:100%}
}

/* Le mouvement réduit : la fenêtre paraît, elle ne glisse pas. */
@media (prefers-reduced-motion:reduce){
  .adm-masse__barre,.adm-masse__mob,.adm-modale__b{transition:none}
}

/* =========================================================================
   PANNEAU DE MODÉRATION
   Le dossier, ouvert par la droite, sans quitter la liste. C'est une fenêtre
   — elle recouvre la page —, donc « fixed » : la règle des barres collantes
   ne la concerne pas. Trois zones, et deux d'entre elles ne bougent pas :
   l'en-tête et la barre d'actions restent, le contenu défile entre les deux.
   ========================================================================= */
.adm-panneau{
  position:fixed;inset:0;z-index:70;
  display:flex;justify-content:flex-end;
  background:rgba(61,6,32,.38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:admVoile var(--a-t-long) both;
}
.adm-panneau__b{
  display:flex;flex-direction:column;
  width:min(68vw,1180px);height:100dvh;
  background:var(--a-fond);
  border-left:1px solid var(--a-bord-nacre);
  box-shadow:-24px 0 48px -40px rgba(50,21,37,.45);
  animation:admPanneau var(--a-t-long) both;
}
@keyframes admPanneau{from{transform:translateX(22px);opacity:.6}to{transform:none;opacity:1}}

/* --- 1. L'en-tête ---------------------------------------------------------
   Collé en haut, sur un fond opaque : le dossier peut défiler, on sait
   toujours lequel on tranche. */
.adm-panneau__tete{
  position:sticky;top:0;z-index:2;flex:none;
  padding:16px clamp(18px,2vw,26px) 14px;
  background:linear-gradient(150deg,rgba(255,255,255,.96) 0%,rgba(253,244,248,.94) 100%);
  border-bottom:1px solid var(--a-ligne);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.adm-panneau__fil{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.adm-panneau__type{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-gris-clair);
}
.adm-panneau__rang{font-size:12.5px;color:var(--a-gris)}
.adm-panneau__nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.adm-panneau__fl,.adm-panneau__x{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  background:var(--a-blanc);color:var(--a-gris);font:inherit;font-size:14px;cursor:pointer;
  transition:border-color var(--a-t),color var(--a-t),background var(--a-t);
}
.adm-panneau__fl:hover:not([disabled]),.adm-panneau__x:hover{
  border-color:var(--a-accent);color:var(--a-framboise);background:var(--a-rose-pale);
}
.adm-panneau__fl[disabled]{opacity:.4;cursor:default}
.adm .adm-panneau__t{
  margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.25;
  letter-spacing:-.02em;font-weight:600;color:var(--a-prune);
}
.adm-panneau__meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:7px 0 0;font-size:13px;color:var(--a-gris);
}
.adm-panneau__enligne{font-size:12px;color:var(--a-vert);font-weight:600}

/* --- 2. Le contenu -------------------------------------------------------- */
.adm-panneau__c{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:grid;gap:12px;align-content:start;
  padding:16px clamp(18px,2vw,26px) 22px;
}
.adm-panneau__cols{
  display:grid;gap:14px;align-items:start;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
}
.adm-panneau__principal,.adm-panneau__cote{display:grid;gap:12px;min-width:0;align-content:start}

/* La bascule « Données reçues » / « Aperçu public ». */
.adm-panneau__bascule{
  display:inline-flex;gap:4px;padding:4px;width:fit-content;
  background:var(--a-ivoire);border:1px solid var(--mw-info-bord);border-radius:var(--a-r);
}
/* La bascule du panneau emploie les mêmes jetons que la barre de filtres :
   deux groupes d'onglets qui ne se ressembleraient pas seraient deux
   grammaires dans la même interface. Elle garde son rembourrage propre — elle
   vit dans un rail, pas sur un fond blanc. */
.adm-panneau__onglet{
  position:relative;
  /* « border:0 » explicitement : un <button> porte une bordure par défaut du
     navigateur, et retirer la règle qui la neutralisait la faisait
     reparaître — deux pixels noirs autour de chaque onglet. */
  min-height:34px;padding:0 14px;border:0;border-radius:var(--a-r-xs);
  background:none;font:inherit;font-size:13.5px;font-weight:500;
  color:var(--a-onglet-txt);cursor:pointer;
  transition:background var(--a-t-onglet),color var(--a-t-onglet);
}
.adm-panneau__onglet:hover{background:var(--a-onglet-survol);color:var(--a-prune)}
.adm-panneau__onglet.est-actif{
  background:var(--a-blanc);color:var(--a-prune);font-weight:600;
}
.adm-panneau__onglet.est-actif::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  border-radius:999px;background:var(--a-accent);
}
.adm-panneau__texte{margin:4px 0 0;font-size:14px;line-height:1.6;white-space:pre-wrap}

/* Les points à vérifier : une coche ou un manque, et le mot est toujours
   écrit — la couleur n'informe personne toute seule. */
.adm-panneau__points{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.adm-panneau__points li{
  position:relative;padding-left:20px;font-size:13px;line-height:1.5;color:var(--a-gris);
}
.adm-panneau__points li::before{
  content:"";position:absolute;left:0;top:6px;
  width:8px;height:8px;border-radius:2px;transform:rotate(45deg);
}
.adm-panneau__points .est-ok::before{background:var(--a-vert)}
.adm-panneau__points .est-manquant::before{background:var(--a-ambre)}
.adm-panneau__points .est-manquant{color:var(--a-ambre);font-weight:500}

/* --- L'aperçu public ------------------------------------------------------
   La fiche telle qu'une visiteuse la verrait. Ivoire et bordée, comme les
   cartes du site : elle doit se distinguer des cartes d'administration qui
   l'entourent. */
.adm-apercu{display:grid;gap:8px}
.adm-apercu__note{margin:0;font-size:12.5px;color:var(--a-gris-clair)}
.adm-apercu__fiche{
  display:grid;gap:9px;padding:20px;
  background:var(--a-hero-ivoire);
  border:1px solid var(--mw-avant-bord);border-radius:var(--a-r-lg);
}
.adm-apercu__entreprise{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--a-framboise);
}
.adm .adm-apercu__t{
  margin:0;font-size:clamp(19px,1.6vw,24px);line-height:1.2;
  letter-spacing:-.022em;font-weight:600;color:var(--a-prune);
}
.adm-apercu__faits{
  list-style:none;margin:2px 0 0;padding:0;display:flex;gap:7px;flex-wrap:wrap;
}
.adm-apercu__faits li{
  padding:3px 10px;border-radius:999px;
  background:var(--a-blanc);border:1px solid var(--a-bord-nacre);
  font-size:12.5px;color:var(--a-gris);
}
.adm-apercu__hijab{
  margin:0;padding:5px 11px;width:fit-content;border-radius:var(--a-r);
  background:var(--a-vert-fond);border:1px solid var(--a-vert-ligne);
  font-size:12.5px;font-weight:600;color:var(--a-vert);
}
.adm-apercu__accroche{margin:0;font-size:15px;line-height:1.55;color:var(--a-prune)}
.adm-apercu__texte{margin:0;font-size:14px;line-height:1.65;white-space:pre-wrap;color:var(--a-gris)}
.adm-apercu__pied{
  margin:4px 0 0;padding-top:12px;border-top:1px solid var(--a-ligne);
  font-size:13px;color:var(--a-gris);
}

/* --- 3. La barre d'actions ------------------------------------------------
   Collée en bas. « Accepter et publier » domine, « Refuser » se tient à
   l'écart, à gauche : quatre boutons de même poids ne sont pas une
   hiérarchie. */
.adm-panneau__pied{
  position:sticky;bottom:0;z-index:2;flex:none;
  padding:13px clamp(18px,2vw,26px) calc(13px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(255,255,255,.97) 0%,rgba(253,244,248,.94) 100%);
  border-top:1px solid var(--a-ligne);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.adm-panneau__boutons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.adm-panneau__complet{margin-right:auto}
/* Le refus est séparé des deux actions qui font avancer le dossier. */
.adm-panneau__refus{color:var(--a-rouge)}
.adm-panneau__refus:hover{background:var(--a-rouge-fond);color:var(--a-rouge)}
.adm-panneau__form{display:grid;gap:8px}
.adm-panneau__l{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-gris-clair);
}
.adm-panneau__suite{margin:9px 0 0;text-align:right;font-size:13px}
.adm-panneau__suite .adm-lien{display:inline-flex;align-items:center;gap:6px}

/* --- Tablette : une seule colonne de contenu ----------------------------- */
@media (max-width:1100px){
  .adm-panneau__b{width:min(86vw,900px)}
  .adm-panneau__cols{grid-template-columns:minmax(0,1fr)}
}

/* --- Téléphone : plein écran -------------------------------------------- */
@media (max-width:860px){
  .adm-panneau__b{
    width:100vw;max-width:100vw;border-left:0;
  }
  .adm .adm-panneau__t{font-size:17px}
  .adm-panneau__c{padding:14px 16px 18px}
  .adm-panneau__tete{padding:12px 16px 12px}
  .adm-panneau__pied{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  /* Une action par ligne plutôt que quatre boutons comprimés. */
  .adm-panneau__boutons{flex-direction:column-reverse;align-items:stretch}
  .adm-panneau__boutons .adm-bouton{width:100%}
  .adm-panneau__complet{margin:8px 0 0;text-align:center}
  .adm-panneau__fl,.adm-panneau__x{width:44px;height:44px}
  .adm-panneau__onglet{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .adm-panneau,.adm-panneau__b{animation:none}
}

/* =========================================================================
   CE QUE L'ANNONCE DEMANDERA — dans l'administration
   ElementsDemandes est partagé avec le site public, et ses classes « elts__ »
   ne sont dessinées que dans refonte.css : une feuille que l'administration
   ne charge pas. Le composant y paraissait donc nu — cases système, et deux
   <span> côte à côte que rien ne séparait, d'où « CVParcours et expériences ».
   Le balisage était juste ; il lui manquait sa mise en forme ici.

   Une ligne par document : la case, une icône fine, le nom, ce qu'il est en
   dessous, puis ses réglages une fois retenu.
   ========================================================================= */
.adm .elts{display:grid;gap:10px}
.adm .elts__compte{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--a-gris-clair);
}
.adm .elts__grille{display:grid;gap:11px}

.adm .elts__carte{
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r);
  background:var(--a-blanc);
  transition:border-color var(--a-t),background var(--a-t);
}
.adm .elts__carte.est-retenu{border-color:#F1D9E5;background:var(--a-rose-pale)}

/* La ligne : une colonne pour la case, une pour l'icône, le reste au texte.
   Les colonnes sont nommées en dur — c'est ce qui garantit qu'aucun des trois
   ne vient toucher son voisin. */
.adm .elts__tete{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  align-items:start;gap:11px;
  min-height:52px;padding:11px 13px;cursor:pointer;
}
.adm .elts__tete input[type="checkbox"]{
  width:18px;height:18px;margin:1px 0 0;accent-color:var(--a-accent);cursor:pointer;
}
.adm .elts__ico{
  display:grid;place-items:center;width:22px;height:22px;
  color:var(--a-gris-clair);
}
.adm .elts__ico svg{width:17px;height:17px}
.adm .elts__carte.est-retenu .elts__ico{color:var(--a-framboise)}

/* Le nom et sa description : deux blocs, l'un sous l'autre. C'est ici que se
   réglait la concaténation — deux <span> en ligne se suivaient sans espace. */
.adm .elts__dire{display:grid;gap:5px;min-width:0}
.adm .elts__nom{
  display:block;font-size:14.5px;font-weight:600;line-height:1.25;color:var(--a-prune);
}
.adm .elts__quoi{
  display:block;font-size:12.5px;line-height:1.45;color:var(--a-gris);
}
/* La coche décorative du site public n'a pas lieu d'être ici : la case
   système est visible, et deux marques de sélection se contrediraient. */
.adm .elts__coche{display:none}

/* Les réglages, sous la ligne, une fois le document retenu. */
.adm .elts__reglages{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 13px 11px;padding-top:10px;
  border-top:1px solid var(--a-ligne);
}
.adm .elts__forme{display:flex;align-items:center;gap:8px;font-size:13px}
.adm .elts__l{font-size:12.5px;color:var(--a-gris)}
.adm .elts__select{
  height:36px;padding:0 10px;
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  background:var(--a-blanc);font:inherit;font-size:13px;color:var(--a-prune);cursor:pointer;
}
.adm .elts__select:focus{outline:none;border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(201,45,120,.13)}
.adm .elts__fixe{
  padding:3px 9px;border-radius:var(--a-r-xs);
  background:var(--a-ivoire);border:1px solid var(--mw-info-bord);
  font-size:12.5px;color:var(--a-gris);
}
/* « Obligatoire » appartient au document de sa ligne, et se touche au doigt. */
.adm .elts__obl{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;margin-left:auto;padding:0 2px;
  font-size:13px;color:var(--a-prune);cursor:pointer;
}
.adm .elts__obl input{width:17px;height:17px;margin:0;accent-color:var(--a-accent);cursor:pointer}

/* Le document à intitulé libre : même ligne, mais son nom se saisit. */
.adm .elts__tete--libre{grid-template-columns:auto minmax(0,1fr);cursor:default}
.adm .elts__intitule{
  width:100%;height:38px;padding:0 11px;
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  background:var(--a-blanc);font:inherit;font-size:14px;color:var(--a-prune);
}
.adm .elts__intitule:focus{outline:none;border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(201,45,120,.13)}

/* Ajouter un document : une action secondaire, et elle le dit. */
.adm .elts__ajout{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 14px;width:100%;
  border:1px dashed var(--a-ligne-forte);border-radius:var(--a-r);
  background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--a-framboise);
  cursor:pointer;transition:border-color var(--a-t),background var(--a-t);
}
.adm .elts__ajout:hover{border-color:var(--a-accent);background:var(--a-rose-pale)}
.adm .elts__ajout::before{content:"+";font-size:16px;line-height:1}
.adm .soum__aide{margin:0;font-size:12.5px;line-height:1.5;color:var(--a-gris)}

/* --- La case suivie de son libellé --------------------------------------
   Sa cible fait quarante-quatre pixels de haut : c'est une ligne qu'on coche
   au doigt, pas une case perdue devant un texte. */
.adm-case{min-height:44px;padding:4px 0}
.adm-case > span{flex:1 1 auto;min-width:0;line-height:1.5}
.adm-case em{font-style:normal}

/* =========================================================================
   LA PROGRESSION DU JOUR, DANS LE HERO
   Elle vivait dans un bandeau prune sous le ruban, et ce bandeau répétait le
   hero : même teinte, même journée, même destination, et un second compteur.
   Il n'y a plus qu'un espace de pilotage — celui-ci. Le grand nombre dit ce
   qui reste, la barre dit ce qui a été fait ; les deux se complètent au lieu
   de se répéter.
   ========================================================================= */
.adm-avance{
  grid-area:avance;
  position:relative;z-index:3;
  display:grid;gap:9px;justify-items:start;
  margin-top:18px;
  /* La barre reste courte : elle accompagne le compteur, elle ne traverse pas
     la photographie. */
  width:clamp(300px,26vw,380px);max-width:100%;
}
/* Une ligne, deux bouts : ce que c'est, et où l'on en est. Elle occupe toute
   la largeur de la barre pour que le compte tombe juste au-dessus de sa fin
   de course. */
.adm-avance__l{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;margin:0;
  font-size:13px;line-height:1.3;
}
.adm-avance__t{font-weight:500;color:rgba(255,236,244,.80)}
/* La part, en clair : ce que la barre montre, écrit. Les chiffres sont
   tabulaires — « 40 % » ne doit pas décaler l'intitulé en passant à
   « 100 % ». */
.adm-avance__n{
  flex:none;font-weight:600;letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,246,250,.94);
}
.est-fini .adm-avance__n{color:#FFE2EF}

/* --- La barre ------------------------------------------------------------
   Sept pixels sur un rail blanc très dilué : elle est posée sur une
   photographie, pas sur une carte, et c'est la translucidité qui l'y tient. */
.adm-avance__b{
  position:relative;width:100%;height:7px;border-radius:999px;
  /* « visible » : le losange fait neuf pixels sur un rail de sept, il doit
     pouvoir déborder en haut et en bas. Le remplissage porte son propre
     arrondi — il n'a jamais eu besoin d'être rogné par le rail. */
  overflow:visible;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.adm-avance__plein{
  position:relative;display:block;height:100%;width:var(--part);
  border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,#C42C76 0%,#EE8FC2 62%,#FFD9EC 100%);
  box-shadow:0 0 10px -2px rgba(238,143,194,.55);
  /* Le geste entier — la poussée, le glissement du losange, le scintillement
     — tient en six cents millisecondes. Au-delà, on attend la barre au lieu
     de lire la page. */
  animation:admAvancePousse 560ms cubic-bezier(.22,.68,.28,1) both;
}
@keyframes admAvancePousse{from{transform:scaleX(0);transform-origin:left}to{transform:none}}
/* Le reflet ne traverse que la partie remplie, une fois. Une lumière qui
   repasse indéfiniment cesse d'être un signal et devient un décor. */
.adm-avance__reflet{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-120%);
  animation:admAvanceReflet 620ms cubic-bezier(.3,.1,.2,1) 380ms both;
}
@keyframes admAvanceReflet{to{transform:translateX(120%)}}
/* Rien de rempli, rien à faire briller. */
.est-vide .adm-avance__reflet{display:none}

/* --- Le losange, au bout de ce qui est fait ------------------------------
   Neuf pixels tournés d'un quart, un cœur blanc rosé, un halo court. Il avance
   avec la progression parce qu'il lit la même variable que le remplissage. Le
   « clamp » l'empêche de sortir du rail à zéro comme à cent : il reste
   toujours à demi-diagonale des bouts. Il scintille une fois, quand le reflet
   le rejoint, puis se tait. */
.adm-avance__los{
  position:absolute;top:50%;
  left:clamp(5px,var(--part),calc(100% - 5px));
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:2px;
  background:radial-gradient(62% 62% at 34% 30%,
    #FFFFFF 0%,#FFF4F9 44%,#FFDCEC 76%,#FFC6DE 100%);
  box-shadow:0 0 7px rgba(255,201,223,.78);
  transform:rotate(45deg);
  /* Il glisse avec le remplissage — même durée, même courbe —, puis
     scintille une fois. Le scintillement n'est pas une animation permanente :
     il arrive, il passe, et le losange se tait. */
  animation:admAvanceGlisse 560ms cubic-bezier(.22,.68,.28,1) both,
            admAvanceEclat 460ms ease-out 480ms both;
}
@keyframes admAvanceGlisse{from{left:5px}}
@keyframes admAvanceEclat{
  0%{transform:rotate(45deg) scale(1);box-shadow:0 0 7px rgba(255,201,223,.78)}
  44%{transform:rotate(45deg) scale(1.2);box-shadow:0 0 13px rgba(255,214,232,.96)}
  100%{transform:rotate(45deg) scale(1);box-shadow:0 0 7px rgba(255,201,223,.78)}
}
/* À zéro, le losange tient le début de la barre : c'est un repère, pas une
   réussite — son halo se fait très discret, et il ne scintille pas. */
.est-vide .adm-avance__los{
  box-shadow:0 0 5px rgba(255,201,223,.32);
  animation:none;
}

/* La journée est close : un mot, à la place où se tenait le bouton. Il n'a
   pas la couleur d'un lien — il ne mène nulle part, et c'est voulu. */
.adm-avance__bravo{
  margin:0;min-height:34px;display:flex;align-items:center;
  font-size:13.5px;font-weight:500;color:rgba(255,236,244,.82);
}

/* L'action, discrète : un lien qui ressemble à un lien. Elle remplace
   définitivement « Tout voir ». */
.adm-avance .adm-pilote__cta,.adm-avance button,.adm-avance a{
  display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0;
  background:none;border:0;
  font:inherit;font-size:13.5px;font-weight:600;color:#FFC9DF;cursor:pointer;
}
.adm .adm-avance a{color:#FFC9DF}
.adm-avance button:hover,.adm .adm-avance a:hover{color:#FFFBFD}
.adm-avance button::after,.adm-avance a::after{content:"→";font-size:14px}

@media (prefers-reduced-motion:reduce){
  /* Les valeurs sont posées d'un coup : la barre est à sa longueur, le
     losange à sa place, et rien ne scintille. Le losange reste — c'est un
     repère, pas une animation. */
  .adm-avance__plein,.adm-avance__los{animation:none}
  .adm-avance__reflet{display:none}
}

/* =========================================================================
   LES TROIS ÉLÉMENTS PRIORITAIRES
   Des cartes horizontales, sobres : une ligne de lecture, pas un tableau.
   ========================================================================= */
.adm-prio{display:grid;gap:10px}
.adm-prio__l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.adm-prio__c{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:14px;
  padding:14px 16px;
  background:var(--a-blanc);
  border:1px solid var(--a-bord-nacre);border-radius:var(--a-r-lg);
  transition:border-color var(--a-t),transform var(--a-t);
}
.adm-prio__c:hover{border-color:var(--a-ligne-forte);transform:translateY(-1px)}
.adm-prio__ico{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:var(--a-r);
}
.adm-prio__ico--ambre{background:var(--a-ambre-fond);color:var(--a-ambre)}
.adm-prio__ico--rose{background:var(--a-rose);color:var(--a-framboise)}
.adm-prio__ico--vert{background:var(--a-vert-fond);color:var(--a-vert)}
.adm-prio__corps{display:grid;gap:3px;min-width:0}
.adm-prio__genre{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--a-gris-clair);
}
.adm-prio__t{
  font-size:15px;font-weight:600;line-height:1.3;color:var(--a-prune);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adm .adm-prio__t:hover{color:var(--a-accent)}
.adm-prio__meta{
  display:flex;align-items:center;gap:7px;min-width:0;
  font-size:12.5px;color:var(--a-gris-clair);
}
.adm-prio__act{flex:none}

/* --- Le lien du groupe ---------------------------------------------------
   Un seul, rattaché à ce qu'il ouvre, et il porte son nombre. Même
   typographie, même flèche, partout. */
.adm-voir{
  display:inline-flex;align-items:center;gap:7px;
  justify-self:start;min-height:36px;
  font-size:13.5px;font-weight:600;color:var(--a-framboise);
}
.adm .adm-voir{color:var(--a-framboise)}
.adm-voir:hover{color:var(--a-accent)}
.adm-voir svg{transition:transform var(--a-t)}
.adm-voir:hover svg{transform:translateX(3px)}
/* Sur la ligne d'un titre de section. */
.adm-voir--tete{justify-self:end;min-height:0}

/* =========================================================================
   LA COLONNE DES ACCÈS RAPIDES, ALLÉGÉE
   Plus de carte flottante : un titre, puis des liens séparés d'un filet.
   ========================================================================= */
.adm-jour{
  display:grid;gap:var(--a-gout);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
}
.adm-jour__principal{min-width:0;display:grid;gap:var(--a-gout);align-content:start}

@media (max-width:1024px){
  .adm-jour{grid-template-columns:minmax(0,1fr)}
  /* Deux par deux : le filet vertical ne sépare plus que les colonnes, et
     une ligne horizontale marque le passage à la seconde rangée. */
  .adm-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-cats > li + li{border-left:0}
  .adm-cats > li:nth-child(even){border-left:1px solid rgba(255,255,255,.10)}
  .adm-cats > li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.10)}
  .adm-cats > li:nth-child(odd) .adm-cat{padding-left:0}
  .adm-cats > li:nth-child(n+3) .adm-cat{padding-top:8px}
}

/* Le bandeau raccourcit son bouton sur grand écran ; au doigt, il reprend la
   cible de quarante-quatre pixels que toute l'administration respecte. */
@media (max-width:860px){
  .adm-pilote__cta{--h:46px}
}

@media (max-width:700px){
  /* Empilés : le titre, puis le taux et le bouton sur leur propre ligne. */
  .adm-pilote{padding:22px 16px;gap:13px}
  .adm-pilote__tete{align-items:flex-start;flex-direction:column;gap:12px}
  .adm-pilote__droite{width:100%;justify-content:space-between;gap:12px}
  .adm-pilote__cta{flex:0 1 auto}
  /* La carte passe en deux rangées : l'action sous le contenu, pleine
     largeur, plutôt que comprimée à droite. */
  .adm-prio__c{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"ico corps" "etiq etiq" "act act";
    gap:10px 12px;
  }
  .adm-prio__ico{grid-area:ico}
  .adm-prio__corps{grid-area:corps}
  .adm-prio__c > .adm-etiq{grid-area:etiq;justify-self:start}
  .adm-prio__act{grid-area:act}
  .adm-prio__act .adm-bouton{width:100%}
  .adm-prio__t{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  /* La barre paraît remplie, sans course ni reflet. */
  /* Le losange reste — c'est un repère, pas une animation. Seul son
     scintillement disparaît, avec la course du remplissage et le reflet. */
  .adm-jauge-j__plein{animation:none}
  .adm-jauge-j__reflet{display:none}
  .adm-jauge-j__los{animation:none}
  .adm-prio__c:hover{transform:none}
  .adm-voir:hover svg{transform:none}
}

/* --- Les onglets, sans mouvement ------------------------------------------
   Le survol reste : c'est une information, pas une animation. Seule la
   transition disparaît. */
@media (prefers-reduced-motion:reduce){
  .adm-onglet,.adm-onglet__n,.adm-panneau__onglet{transition:none}
}

/* =========================================================================
   L'IDENTITÉ DE LA STRUCTURE
   Le bloc privé du dossier de modération : ce que l'entreprise a déclaré, ce
   que le registre officiel a répondu, et de quoi vérifier soi-même.
   ========================================================================= */

.adm-verif__etat{margin:0 0 14px}

/* Un numéro se lit chiffre par chiffre : les chasses fixes évitent qu'un « 1 »
   et un « 7 » se ressemblent, et alignent les groupes d'une ligne à l'autre. */
.adm-verif__num{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;letter-spacing:.02em;
}

.adm-verif__siret{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Le bouton de copie se tient contre le numéro, et reste discret : il double
   un geste que la souris sait déjà faire. */
.adm-verif__copie{
  padding:2px 9px;border:1px solid var(--adm-filet,#E4DDE1);border-radius:3px;
  background:#fff;font:inherit;font-size:12px;color:var(--adm-encre-3,#7D6F76);
  cursor:pointer;
}
.adm-verif__copie:hover{border-color:#C6BABF;color:var(--adm-encre,#321525)}
.adm-verif__copie:focus-visible{outline:2px solid var(--mw-bordeaux,#68153D);outline-offset:2px}

.adm-verif__actions{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;
}

/* La zone d'annonce du presse-papier : présente en permanence pour qu'un
   lecteur d'écran l'ait déjà quand son contenu change, invisible à l'œil. */
.adm-verif__sr{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;margin:0;
}

@media (max-width:560px){
  .adm-verif__actions{gap:12px}
  .adm-verif__siret{gap:8px}
}

/* =========================================================================
   LA CONFIRMATION RENFORCÉE
   Publier une annonce dont l'identité n'est pas confirmée. La fenêtre nomme
   le problème — « SIRET introuvable » se lit, « êtes-vous sûre ? » se coche
   sans réfléchir — et le bouton reste éteint tant que la case ne l'est pas.
   ========================================================================= */

.adm-renforce{
  padding:16px 18px;border-radius:5px;
  background:#FFF9F0;border:1px solid #F0DFC2;border-left:3px solid #C9892B;
}
.adm-renforce__t{
  margin:0 0 6px;font-size:14.5px;font-weight:700;color:#7A4B0E;
}
.adm-renforce__p{margin:0 0 14px;font-size:14px;line-height:1.6;color:#6B5844}

.adm-renforce__case{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;
  font-size:13.5px;line-height:1.55;color:#5D4C3A;cursor:pointer;
}
.adm-renforce__case input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:#C9892B}

@media (max-width:560px){
  .adm-renforce{padding:14px}
  .adm-renforce__p{font-size:13.5px}
}

/* =========================================================================
   L'ESPACE RECRUTEUR
   Ajouts, jamais reprises : rien de ce qui précède n'est modifié. L'espace
   recruteur emprunte tout le reste — grille, barre latérale, cartes,
   tableaux, étiquettes, boutons, champs — aux règles de cette même feuille.
   C'est ce qui garantit une seule direction artistique : une seule source.
   ========================================================================= */

/* --- La porte de l'espace recruteur ---------------------------------------
   Connexion et attente du courriel. Deux pages dans le code, un seul écran à
   l'œil : le même bloc, dont seul le panneau de droite change de contenu.

   Elle remplace « adm-seul », la petite carte centrée qui servait ces deux
   pages et rien d'autre — une carte de 460 px perdue au milieu d'un écran de
   1440. Rien d'autre dans cette feuille n'y faisait référence : le bloc a été
   retiré, pas laissé à côté du nouveau. Deux mises en page pour un même écran,
   c'est la collision de la semaine prochaine.

   L'administration, elle, garde la sienne — « adm-connexion » — et n'est pas
   touchée.

   Trois libertés prises sur la charte de cette feuille, et elles sont
   assumées : un arrondi de 16 px là où l'administration s'arrête à 10, une
   ombre portée là où la règle dit « ce qui sépare, c'est une ligne », et un
   dégradé de surface. Ce sont les trois choses qui font qu'une page de
   connexion ressemble à une entrée plutôt qu'à un panneau de gestion — et
   elles ne valent que dans ce bloc, qui ne voisine avec rien. */
.rec-porte{
  --rp-r:16px;                       /* l'arrondi du bloc */
  --rp-clair:#F3E3EC;                /* le texte courant du panneau prune */
  min-height:100dvh;
  display:flex;
  padding:clamp(20px,4vh,44px) 20px;
  /* Ni blanc — trop dur, l'ombre prune y faisait une tache — ni l'ivoire gris
     de l'administration. Deux tons chauds du site, du rose très pâle vers
     l'ivoire du hero, sur toute la hauteur. Ils sont assez proches pour
     qu'on ne voie pas le dégradé, assez distincts pour que le fond ait une
     profondeur, et assez pâles pour que le panneau blanc reste blanc. */
  background:linear-gradient(180deg,var(--a-rose-pale) 0%,var(--a-hero-ivoire) 100%);
}
/* « margin:auto » plutôt qu'un centrage par « place-items » : sur une fenêtre
   basse, le second rogne le haut du bloc et le rend inatteignable au défilement.
   Celui-ci se contente de le descendre quand il y a la place. */
.rec-porte__in{
  margin:auto;width:100%;max-width:1060px;
  display:grid;gap:14px;
}

/* Le retour au site, au-dessus du bloc et aligné sur son bord gauche. Discret
   par la taille, pas par le contraste : un lien qu'on ne lit pas n'est pas
   discret, il est absent. La couleur est reprise explicitement — « .adm a »
   remet tous les liens de la coquille en « inherit », et gagnerait ici. */
.adm a.rec-porte__retour{
  justify-self:start;
  display:inline-flex;align-items:center;gap:7px;
  /* 44 px de haut : c'est une cible tactile avant d'être un lien, et elle est
     posée tout en haut de l'écran, là où le pouce arrive de travers. */
  min-height:44px;padding:4px 2px;
  font-size:13px;font-weight:500;color:var(--a-gris);
  transition:color var(--a-t);
}
.adm a.rec-porte__retour:hover{color:var(--a-framboise)}
.rec-porte__retour svg{flex:none;transition:transform var(--a-t)}
.adm a.rec-porte__retour:hover svg{transform:translateX(-2px)}

.rec-porte__bloc{
  display:grid;grid-template-columns:42% 1fr;
  border-radius:var(--rp-r);overflow:hidden;
  background:var(--a-blanc);
  /* Une seule ombre, sur la composition entière, et elle est PRUNE — pas
     grise. Une ombre grise sur du blanc fait un halo sale ; celle-ci reprend
     la couleur du panneau et paraît projetée par lui. Deux couches : une
     large et basse qui porte le bloc, une courte qui dessine son bord. */
  box-shadow:
    0 26px 64px -28px rgba(50,21,37,.34),
    0 8px 22px -16px rgba(50,21,37,.24);
}

/* --- Panneau gauche : l'univers de marque -------------------------------- */
.rec-porte__marque{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,3.2vw,44px);
  /* Une photographie de bureau, et par-dessus un voile prune à 80 %. Trois
     couches, de bas en haut :

       1. une couleur unie — le point le plus clair du dégradé. Elle sert de
          repli tant que l'image n'est pas arrivée, et empêche le panneau de
          clignoter en blanc pendant ce temps ;
       2. la photographie, recadrée en « cover » ;
       3. le voile, qui est le dégradé de la marque avec 80 % d'opacité à
          chacune de ses quatre étapes — la teinte varie, jamais la densité.

     Dans « background-image », la première couche listée est celle du
     DESSUS : le voile est donc écrit avant l'image, et non après. */
  background-color:#6E1B49;
  background-image:
    linear-gradient(158deg,
      rgba(44,18,32,.80) 0%, rgba(50,21,37,.80) 34%,
      rgba(84,24,58,.80) 78%, rgba(110,27,73,.80) 100%),
    url(/assets/img/espace-recruteur-bureau.webp);
  /* LE CADRAGE. La photographie fait 900 x 1500, et elle est presque
     entièrement occupée par un mur de pierre : les locaux — la cloison de
     noyer, la paroi vitrée, la salle de réunion et la vue — tiennent dans
     ses trois cents derniers pixels de largeur.

     En « cover », le panneau étant plus large que haut par rapport à la
     photo, c'est la LARGEUR qui s'ajuste exactement : toute l'image entre
     dans le cadre, et « background-position » sur l'axe horizontal ne
     déplace plus rien. On voyait donc le mur en grand et les locaux
     réduits à une bande sombre au bord droit — avec, sous le voile prune,
     l'impression d'une porte fermée plutôt que d'un bureau.

     D'où un agrandissement explicite, et un ancrage à DROITE : le panneau
     montre les 38 % droits de la photographie, c'est-à-dire la cloison, la
     verrière et la pièce derrière. La proportion étant exprimée en
     pourcentage de la zone de fond, le cadrage est le même à toutes les
     largeurs.

     Le texte reste lisible parce que le tiers gauche du nouveau cadrage est
     encore du mur et du bois — la zone calme s'est déplacée avec lui. */
  background-size:260% auto;
  background-position:right center;
  background-repeat:no-repeat;
  color:#fff;
}
/* Le monogramme, agrandi jusqu'à sortir du cadre. À cette opacité on ne le
   voit pas : on sent que le fond n'est pas uni. */
.rec-porte__filigrane{
  position:absolute;right:-.34em;bottom:-.50em;
  font-size:clamp(230px,26vw,330px);font-weight:700;line-height:.7;
  letter-spacing:-.06em;color:#fff;opacity:.05;
  user-select:none;pointer-events:none;
}
.rec-porte__marque-in{position:relative;display:grid;gap:18px;justify-items:start}

.rec-porte__logo{display:inline-flex;align-items:center;gap:10px}
.rec-porte__mono{display:block;width:38px;height:38px;flex:none}
.rec-porte__nom{
  font-size:22px;font-weight:600;line-height:1;letter-spacing:-.035em;
  color:#fff;white-space:nowrap;
}

.rec-porte__surtitre{
  margin:0;font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  color:#E4A9C6;
}
/* Le titre éditorial : la seule grande phrase de la page. Il descend jusqu'à
   22 px sur petit écran, où il devient l'en-tête du bandeau compact. */
.rec-porte__titre{
  margin:0;max-width:15ch;
  font-size:clamp(22px,2.5vw,31px);font-weight:700;line-height:1.16;
  letter-spacing:-.02em;color:#fff;
}
.rec-porte__texte{
  margin:0;max-width:34ch;
  font-size:14px;line-height:1.7;color:var(--rp-clair);
}

.rec-porte__atouts{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.rec-porte__atout{
  display:flex;align-items:center;gap:11px;
  font-size:13.5px;font-weight:500;color:#F7EAF1;
}
.rec-porte__atout svg{flex:none;color:#E4A9C6}

/* --- Panneau droit : l'action -------------------------------------------- */
.rec-porte__panneau{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(30px,3.2vw,48px);
  background:var(--a-blanc);
}
.rec-porte__contenu{width:100%;max-width:440px}

/* LA SPÉCIFICITÉ. Le sélecteur est « .adm .rec-porte__t » et non
   « .rec-porte__t », et ce n'est pas une précaution : c'est une correction.

   Le <body> porte la classe « adm », et « .adm h1 » (ligne 136) vaut une
   classe PLUS un élément, là où « .rec-porte__t » ne vaut qu'une classe.
   La règle générale gagnait donc, et tout ce bloc était mort : le titre
   s'affichait à 27 px, en graisse 600, et surtout avec « margin:0 ». Le
   paragraphe touchait le titre, sans un pixel entre les deux.

   Rien ne le signalait : le fichier disait « margin:0 0 9px », l'écran
   montrait zéro. C'est la mesure dans le navigateur qui l'a établi, pas la
   lecture du code.

   Une classe de plus suffit à remettre les deux dans le bon ordre. Pas de
   « !important » : l'espace recruteur n'en contient aucun, et ce n'est pas
   ici qu'il faut commencer. */
.adm .rec-porte__t{
  /* Dix-huit pixels : sous un titre de 25 px en gras, il faut cet écart pour
     que le titre et sa phrase se lisent comme deux lignes distinctes. Il
     reste plus petit que celui qui sépare le paragraphe du formulaire
     (26 px) : le titre et sa phrase forment un groupe, et c'est cette
     différence-là qui fait la hiérarchie. */
  margin:0 0 18px;
  font-size:clamp(21px,2vw,25px);font-weight:700;line-height:1.25;
  letter-spacing:-.015em;color:var(--a-prune);
}
/* Vingt-six pixels sous le paragraphe, contre dix-huit sous le titre : sans
   cet écart, le titre, sa phrase et le formulaire s'espaçaient pareil et ne
   formaient plus de groupes. */
.rec-porte__p{margin:0 0 26px;font-size:14.5px;line-height:1.68;color:var(--a-gris)}

/* Le sceau de l'écran de confirmation : une enveloppe cochée, posée dans un
   disque rose très pâle. Un seul de la page — c'est ce qui en fait un signe
   plutôt qu'un motif. */
.rec-porte__sceau{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;margin:0 0 18px;border-radius:50%;
  background:var(--a-rose);color:var(--a-framboise);
}
.rec-porte__adresse{
  margin:0 0 20px;padding:11px 14px;border-radius:var(--a-r);
  background:var(--a-rose-pale);
  font-size:13.5px;color:var(--a-prune);
  /* Une adresse longue ne doit ni élargir le panneau ni sortir du cadre. */
  overflow-wrap:anywhere;
}
.rec-porte__adresse strong{font-weight:600}

/* --- Les messages d'état -------------------------------------------------
   Trois tons, chacun avec son icône : la couleur seule ne dit rien à qui ne
   la distingue pas. */
.rec-porte__mot{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 20px;padding:12px 14px;border-radius:var(--a-r);
  font-size:13.5px;line-height:1.55;
}
.rec-porte__mot svg{flex:none;margin-top:1px}
.rec-porte__mot--info{background:var(--a-rose-pale);color:var(--a-framboise)}
.rec-porte__mot--attention{background:var(--a-ambre-fond);color:var(--a-ambre)}
.rec-porte__mot--bien{background:var(--a-vert-fond);color:var(--a-vert)}

/* --- Le formulaire ------------------------------------------------------- */
.rec-porte__form{display:grid;gap:7px}
.rec-porte__l{font-size:13px;font-weight:600;color:var(--a-prune)}
.rec-porte__champ{
  width:100%;height:50px;padding:0 14px;
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  background:var(--a-blanc);color:var(--a-prune);
  font:inherit;font-size:15px;
  transition:border-color var(--a-t),box-shadow var(--a-t);
}
.rec-porte__champ::placeholder{color:#B4A4AE}
.rec-porte__champ:focus-visible{
  outline:none;
  border-color:var(--a-accent);
  box-shadow:0 0 0 3px rgba(201,45,120,.16);
}
/* L'erreur se voit au trait ET se lit en toutes lettres : un champ rouge sans
   phrase ne dit pas ce qui ne va pas. */
.rec-porte__champ[aria-invalid="true"]{border-color:var(--a-rouge)}
.rec-porte__champ[aria-invalid="true"]:focus-visible{
  box-shadow:0 0 0 3px rgba(138,27,51,.15);
}
/* La zone occupe sa hauteur même vide : le bouton ne saute pas d'un cran
   quand le message arrive. */
.rec-porte__erreur{
  display:flex;align-items:center;gap:7px;
  min-height:19px;margin:1px 0 0;
  font-size:13px;line-height:1.45;color:var(--a-rouge);
}
.rec-porte__erreur svg{flex:none}

.rec-porte__envoyer{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:52px;margin:11px 0 0;
  border:0;border-radius:var(--a-r);
  /* Le dégradé officiel du site, celui des actions principales. */
  background:var(--a-grad-rose);color:#fff;
  font:inherit;font-size:15px;font-weight:600;line-height:1;
  cursor:pointer;
  transition:filter var(--a-t),box-shadow var(--a-t);
  box-shadow:0 8px 18px -12px rgba(147,23,83,.9);
}
.rec-porte__envoyer:hover:not(:disabled){filter:brightness(1.07)}
.rec-porte__envoyer:focus-visible{
  outline:2px solid var(--a-prune);outline-offset:2px;
}
/* La largeur du bouton ne dépend pas de son texte — il fait toute la colonne.
   L'état de chargement peut donc changer le mot sans rien déplacer. */
.rec-porte__envoyer:disabled{cursor:progress;filter:saturate(.72) brightness(.97)}
.rec-porte__envoyer svg{flex:none}
.rec-porte__tourne{animation:rec-tourne 900ms linear infinite}
@keyframes rec-tourne{to{transform:rotate(360deg)}}

.rec-porte__etat{
  min-height:18px;margin:6px 0 0;
  font-size:12.5px;line-height:1.45;color:var(--a-gris);text-align:center;
}

/* --- Sous le formulaire --------------------------------------------------
   Deux phrases et une mention, posées à même le panneau. Elles étaient dans
   un encadré : cela faisait une boîte, dans un panneau, dans une carte. */
.rec-porte__note{
  margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--a-ligne);
  font-size:13px;line-height:1.65;color:var(--a-gris);
}
.rec-porte__note strong{color:var(--a-prune);font-weight:600}

.rec-porte__sceau-txt{
  display:flex;align-items:flex-start;gap:7px;
  margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--a-gris-clair);
}
.rec-porte__sceau-txt svg{flex:none;margin-top:3px;color:var(--a-framboise)}

/* --- L'écran de confirmation : reprendre la main -------------------------- */
.rec-porte__suite{margin:0}
.adm a.rec-porte__second,
.rec-porte__second{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;padding:0 16px;
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  background:var(--a-blanc);color:var(--a-prune);
  font:inherit;font-size:14.5px;font-weight:600;line-height:1;
  cursor:pointer;
  transition:background var(--a-t),border-color var(--a-t),color var(--a-t);
}
.adm a.rec-porte__second:hover,
.rec-porte__second:hover{
  background:var(--a-rose-pale);border-color:var(--a-accent);color:var(--a-framboise);
}

.rec-porte__renvoi{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 12px;margin:14px 0 0;
}
.rec-porte__texte-bouton{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 4px;
  border:0;background:none;color:var(--a-framboise);
  font:inherit;font-size:13.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  transition:color var(--a-t);
}
.rec-porte__texte-bouton:hover:not(:disabled){color:var(--a-accent)}
.rec-porte__texte-bouton:disabled{
  color:var(--a-gris-clair);text-decoration:none;cursor:default;
}
.rec-porte__texte-bouton svg{flex:none}
.rec-porte__compte{font-size:12.5px;color:var(--a-gris-clair)}

/* Dit aux synthèses vocales, jamais montré. */
.rec-porte__hors-vue{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- Tablette : le bloc de marque se resserre ---------------------------- */
@media (max-width:1040px){
  .rec-porte__bloc{grid-template-columns:40% 1fr}
  .rec-porte__titre{font-size:24px;max-width:17ch}
  .rec-porte__texte{font-size:13.5px}
}

/* --- En dessous : une seule colonne --------------------------------------
   Le seuil est celui où le panneau de marque descendrait sous 360 px : à
   cette largeur il ne porte plus une composition, il porte une colonne de
   mots coupés. Mieux vaut un bandeau franc que deux panneaux à l'étroit. */
@media (max-width:900px){
  /* Plus de hauteur imposée : sur mobile, « 100dvh » plus un clavier ouvert
     donne un bloc qui se recentre à chaque frappe. */
  .rec-porte{min-height:auto;padding:24px 20px 36px}
  .rec-porte__bloc{grid-template-columns:1fr}

  /* Le panneau de marque devient un en-tête compact : le logo, le surtitre,
     la phrase. Le paragraphe long et les trois atouts s'en vont — ils
     pousseraient le formulaire sous la ligne de flottaison, et c'est le
     formulaire qu'on est venu chercher. */
  .rec-porte__marque{padding:26px 22px 24px}
  .rec-porte__marque-in{gap:14px}
  .rec-porte__texte,
  .rec-porte__atouts{display:none}
  .rec-porte__titre{font-size:21px;max-width:22ch}
  .rec-porte__filigrane{font-size:190px;right:-.36em;bottom:-.54em}

  .rec-porte__panneau{padding:26px 22px 30px}
  .rec-porte__contenu{max-width:460px}
}

@media (max-width:420px){
  .rec-porte{padding:16px 16px 28px}
  /* Le libellé du bouton passe sur deux lignes en dessous de 360 px. Une
     hauteur fixe le rognerait : elle devient un minimum, et le texte pousse
     le bouton au lieu d'être coupé par lui. */
  .rec-porte__envoyer{
    height:auto;min-height:52px;padding:13px 16px;
    font-size:14.5px;line-height:1.3;
  }
  .rec-porte__mono{width:34px;height:34px}
  .rec-porte__nom{font-size:20px}
  .rec-porte__titre{font-size:19.5px}
  /* Même raison qu'au-dessus : « .adm h1 » gagnerait sur « .rec-porte__t ». */
  .adm .rec-porte__t{font-size:20px}
  .rec-porte__p{font-size:14px}
}

/* Le seul mouvement de la page est la rotation du bouton pendant l'envoi.
   Quand le système demande le calme, elle s'arrête : le bouton reste éteint
   et porte « Envoi en cours… », ce qui suffit à le dire. */
@media (prefers-reduced-motion:reduce){
  .rec-porte__tourne{animation:none}
  .adm a.rec-porte__retour:hover svg{transform:none}
}

/* Un bouton qui occupe toute la largeur de sa colonne : sur ces pages, il
   n'y a qu'une action, elle n'a pas à chercher sa place. */
.adm-bouton--large{width:100%;justify-content:center}

/* --- « Publier une annonce », dans la barre latérale ----------------------
   L'action principale de l'espace, posée au-dessus de la navigation. Le
   dégradé officiel, celui des actions principales du site. */
.adm-menu__publier{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:18px 14px 6px;padding:11px 14px;border-radius:7px;
  background:linear-gradient(94deg,var(--a-framboise) 0%,var(--a-accent) 100%);
  color:#fff;font-size:14px;font-weight:600;text-decoration:none;
}
.adm-menu__publier:hover{filter:brightness(1.06)}
.adm-menu__publier:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}

/* --- L'en-tête d'une page de l'espace ------------------------------------ */
.adm-bonjour{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin:0 0 26px;
}
/* « .adm h1 { margin:0 } » l'emportait sur cette marge : la phrase d'accueil
   se collait au titre. Deux classes, et 12 px — la respiration commune. */
.adm .adm-bonjour__t,.adm-bonjour__t{margin:0 0 12px;font-size:25px;line-height:1.25;font-weight:700}
.adm-bonjour__p{margin:0;font-size:14.5px;line-height:1.6;color:var(--a-gris)}

/* --- Les chiffres de la vue d'ensemble ------------------------------------

   « adm-stat », et surtout PAS « adm-compteur ».

   Ce nom-là est déjà pris deux fois dans cette feuille : le total posé à côté
   d'un titre de page (plus haut), et le bijou prune du tableau de bord
   d'administration. Le second impose « height:26px », « display:inline-grid »,
   un dégradé prune foncé, « color:#fff » et deux pseudo-éléments absolus — de
   quoi écraser n'importe quelle carte en bande violette de vingt-six pixels,
   chiffre coupé et intitulé blanc sur prune. C'est exactement ce qui s'est
   produit ici.

   La correction est un renommage, pas une surcharge : gagner en spécificité
   aurait laissé la collision en place, prête à frapper le prochain qui
   emploiera ce nom.

   Cinq cartes sobres : une icône fine, un nombre lisible sans être énorme, et
   l'intitulé dessous. Aucun aplat, aucun dégradé, aucune ombre — ce sont des
   faits, pas des tuiles de tableau de bord.
   ------------------------------------------------------------------------ */
.adm-stats{
  display:grid;gap:12px;margin:0 0 28px;
  /* Cinq colonnes sur grand écran, et le nombre descend par paliers écrits
     en toutes lettres plus bas. « auto-fit » aurait étiré la carte restée
     seule en fin de ligne sur toute la largeur libre. */
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.adm-stat{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  /* Aucune hauteur imposée : la carte fait la taille de ce qu'elle contient,
     et « align-items:stretch » de la grille les met toutes à la hauteur de la
     plus haute. Une hauteur fixe aurait recoupé le jour où un intitulé passe
     sur trois lignes. */
  min-height:0;
  padding:16px 17px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r);
  background:var(--a-blanc);
  color:var(--a-prune);text-decoration:none;
  transition:border-color var(--a-t),background var(--a-t);
}
.adm-stat:hover{border-color:#F0D8E4;background:var(--a-rose-pale)}
.adm-stat:focus-visible{
  outline:2px solid var(--a-accent);outline-offset:2px;
}

.adm-stat__ico{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:var(--a-r-xs);
  background:var(--a-rose-pale);color:var(--a-framboise);
}
.adm-stat__ico svg{width:16px;height:16px}

.adm-stat__n{
  display:block;font-size:26px;font-weight:700;line-height:1.05;
  color:var(--a-prune);font-variant-numeric:tabular-nums;
}
.adm-stat__q{
  display:block;font-size:12.5px;line-height:1.45;color:var(--a-gris);
  /* Deux mots qui ne tiennent pas se coupent proprement plutôt que de
     déborder : une carte étroite ne doit jamais pousser une barre de
     défilement horizontale. */
  overflow-wrap:anywhere;
}
/* La précision « via Muslima Work », plus discrète que l'intitulé. */
.adm-stat__p{display:block;margin-top:3px;font-size:11.5px;color:var(--a-gris-clair)}

/* Une seule carte porte l'accent, et seulement quand elle appelle une action :
   deux nombres en ambre ne désignent plus rien. Le nombre change de couleur,
   pas le fond — un aplat teinté ferait une tuile d'alerte pour une annonce
   qui expire dans six jours. */
.adm-stat--agir .adm-stat__n{color:var(--a-ambre)}
.adm-stat--agir .adm-stat__ico{background:var(--a-ambre-fond);color:var(--a-ambre)}

/* Les paliers. Écrits, et non déduits : on sait ce qui se passe à chaque
   largeur, et une carte n'est jamais comprimée sous sa lisibilité. */
@media (max-width:1240px){
  .adm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  /* La barre latérale est devenue un tiroir : la largeur revient au contenu,
     mais l'écran est plus étroit. Trois colonnes deviennent deux. */
  .adm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .adm-stats{gap:10px}
  .adm-stat{padding:14px 15px}
  .adm-stat__n{font-size:23px}
}
/* En dessous de 360 px, deux colonnes donneraient 150 px par carte : le
   nombre et son intitulé s'y superposeraient. Une seule colonne, et tout
   reste lisible. */
@media (max-width:359px){
  .adm-stats{grid-template-columns:1fr}
}

/* --- La phrase qui accompagne un statut ---------------------------------- */
.adm-etat-phrase{
  margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--a-gris);
}

/* --- Les cartes d'annonce sur téléphone ----------------------------------
   Au-dessus de 720 px c'est un tableau ; en dessous, des cartes. Jamais les
   deux, et jamais un tableau qui déborde : un tableau à six colonnes sur un
   écran de 390 px se lit en le faisant glisser, ce qui revient à ne pas le
   lire. */
.adm-cartes{display:none}
.adm-carte-annonce{
  padding:16px;border:1px solid var(--a-ligne);border-radius:8px;
  background:var(--a-blanc);margin-bottom:12px;
}
.adm-carte-annonce__t{
  margin:0 0 8px;font-size:15.5px;font-weight:600;line-height:1.4;
  color:var(--a-prune);
}
.adm-carte-annonce__t a{color:inherit;text-decoration:none}
.adm-carte-annonce__t a:hover{text-decoration:underline}
.adm-carte-annonce__meta{
  margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--a-gris);
}
.adm-carte-annonce__actions{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--a-ligne);
  display:flex;flex-wrap:wrap;gap:8px;
}

@media (max-width:720px){
  .adm-tableau-annonces{display:none}
  .adm-cartes{display:block}
  .adm-compteurs{grid-template-columns:repeat(2,1fr)}
  .adm-compteur{border-bottom:1px solid var(--a-ligne)}
  .adm-compteur:nth-child(2n){border-right:0}
  .adm-bonjour__t{font-size:21px}
}

/* --- Les formulaires de l'espace recruteur -------------------------------
   Le pendant, en classes « adm-* », de ce que « field » et « soum__* » font
   côté public. Les deux jeux habillent le MÊME composant — voir
   components/public/IdentiteStructure.tsx, dont l'apparence est une donnée.
   Les champs eux-mêmes restent « adm-champ » : rien n'est redéfini ici, on
   ne pose que ce qui les entoure.

   --- POURQUOI « .esp » DEVANT LA GRILLE ---------------------------------

   « .adm-form » était déclarée DEUX fois dans ce fichier : ligne 1994 pour
   le formulaire d'annonce de l'administration — une colonne, dont
   « .adm-form__grille » fait les deux colonnes intérieures — et ici, pour
   l'espace recruteur, en deux colonnes.

   La seconde gagnait, puisqu'elle vient après. Le formulaire d'annonce se
   retrouvait donc dans une grille à deux colonnes qu'il n'attendait pas :
   tout son contenu tassé dans la colonne de gauche, et une grande carte
   vide à droite avec les deux boutons au milieu. C'est ce qui rendait la
   page « cassée et bizarre ».

   La grille est donc portée sur « .esp », la classe du <body> de l'espace
   recruteur — où elle est la seule employée. Le reste du bloc ne dispute
   rien : « __champ », « __req », « __aide » n'existent que là. */
.esp .adm-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.adm-form__champ{display:grid;gap:6px;align-content:start;min-width:0}
.adm-form__champ--pleine{grid-column:1 / -1}
.adm-form__champ label{font-size:13px;font-weight:600;color:var(--a-prune)}
.adm-form__req{color:var(--a-accent)}
.adm-form__opt{font-weight:400;font-size:12.5px;color:var(--a-gris-clair)}
.adm-form__aide{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--a-gris)}
.adm-form__err{
  margin:2px 0 0;padding:7px 11px;border-radius:4px;
  background:var(--a-rouge-fond);border-left:2px solid var(--a-rouge);
  font-size:12.5px;line-height:1.5;color:var(--a-rouge);font-weight:500;
}
.adm-form__sortie{margin:8px 0 0}
.adm-form__lien{
  padding:0;border:0;background:none;font:inherit;font-size:12.5px;
  color:var(--a-gris);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.adm-form__lien:hover{color:var(--a-framboise)}
.adm-form__lien:focus-visible{outline:2px solid var(--a-framboise);outline-offset:3px;border-radius:2px}
.adm-form__suite{display:grid;gap:8px;margin-top:4px}
.adm-form__mention{
  margin:0;padding:12px 14px;border-radius:5px;
  background:var(--a-fond);border:1px solid var(--a-ligne);
  font-size:12.5px;line-height:1.6;color:var(--a-gris);
}
.adm-form textarea.adm-champ{min-height:84px}
.adm-form__pied{
  grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:6px;padding-top:18px;border-top:1px solid var(--a-ligne);
}

/* Les trois familles de champs du profil : publiques, privées, vérification.
   Un titre par famille, et une phrase qui dit où va l'information — c'est la
   seule façon qu'une entreprise sache ce qui paraîtra sur son annonce. */
.adm-famille{margin:0 0 30px}
/* Même collision avec « .adm h2 { margin:0 } » : deux classes. */
.adm .adm-famille__t,.adm-famille__t{
  margin:0 0 10px;font-size:15px;font-weight:700;color:var(--a-prune);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.adm-famille__p{margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--a-gris)}

@media (max-width:640px){
  /* Même raison qu'au-dessus : cette adaptation est celle de l'espace
     recruteur, pas celle du formulaire d'annonce. */
  .esp .adm-form{grid-template-columns:1fr;gap:16px}
  .adm-form__champ--pleine{grid-column:auto}
}

/* --- La colonne d'actions du tableau recruteur ----------------------------
   « Voir » et le menu des trois points tiennent sur UNE ligne.

   « .adm-actions-cel » porte « flex-wrap:wrap », ce qui convient à
   l'administration, où la cellule est large et peut recevoir trois boutons.
   Ici la colonne est étroite : le retour à la ligne empilait le menu sous le
   bouton, et la rangée doublait de hauteur sans raison.

   « nowrap » sur la cellule, et la colonne prend la largeur dont elle a
   besoin — c'est le tableau qui s'ajuste, pas les boutons qui se plient. En
   dessous de 720 px la question ne se pose plus : le tableau laisse la place
   aux cartes.
   ------------------------------------------------------------------------ */
/* La spécificité est calculée, non forcée : « .adm-tableau th.adm-col-actions »
   fixe déjà 135 px plus haut, et 135 px ne suffisent pas à « Voir » plus le
   menu. On ajoute le conteneur du tableau recruteur pour passer devant, sans
   « !important » — qui aurait gagné ici et fait perdre ailleurs. */
.adm-tableau-annonces .adm-tableau th.adm-col-actions,
.adm-tableau-annonces .adm-tableau td.adm-col-actions{
  /* Une largeur CALCULÉE, pas « 1% ».
     « width:1% » demande à la colonne d'être aussi étroite que possible ; avec
     « nowrap », le contenu débordait alors du cadre arrondi du tableau et
     emportait l'en-tête avec lui. 165 px, c'est ce que demandent « Voir »
     (~86), l'écart (8), le menu (~34) et les marges de cellule (2 × 10) —
     mesuré, pas deviné. */
  width:165px;white-space:nowrap;text-align:right;vertical-align:middle;
}
.adm-tableau-annonces .adm-col-actions .adm-actions-cel{
  flex-wrap:nowrap;justify-content:flex-end;gap:8px;
}
/* Le message d'erreur, lui, a le droit de prendre toute la cellule : il est
   plus long que deux boutons et ne doit pas les pousser hors de l'écran. */
.adm-tableau-annonces .adm-col-actions .adm-erreur{
  flex-basis:100%;white-space:normal;text-align:left;
}

/* --- Les actions dans les cartes mobiles ---------------------------------
   Sous 720 px, chaque ligne devient une carte. Les actions y reprennent
   leur place naturelle : à gauche, alignées, avec des surfaces d'au moins
   44 px — c'est un doigt qui vise, pas une souris. */
.adm-carte-annonce__actions .adm-actions-cel{
  justify-content:flex-start;gap:10px;flex-wrap:wrap;
}
.adm-carte-annonce__actions .adm-bouton--petit{--h:40px;padding:0 14px;font-size:13.5px}
@media (pointer:coarse){
  .adm-carte-annonce__actions .adm-bouton--petit{--h:44px}
}

/* --- Les candidatures non lues -------------------------------------------
   Une ligne non lue se distingue de deux façons, jamais d'une seule : un fond
   rose très pâle, et une pastille qui l'écrit. La couleur seule ne se voit
   pas de tout le monde, et un fond légèrement teinté sur un écran mal réglé
   ne se voit de personne.
   ------------------------------------------------------------------------ */
.adm-tableau tr.est-non-lue > td{background:var(--a-rose-pale)}
.adm-tableau tr.est-non-lue > td:first-child{box-shadow:inset 3px 0 0 var(--a-accent)}

.adm-nouvelle{
  display:inline-flex;align-items:center;gap:6px;
  margin:0 0 5px;padding:2px 8px 2px 7px;border-radius:999px;
  background:var(--a-rose);color:var(--a-framboise);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.adm-nouvelle__point{
  width:6px;height:6px;border-radius:50%;background:var(--a-accent);flex:none;
}

/* =========================================================================
   LE DOSSIER DE CANDIDATURE
   ========================================================================= */

/* --- « À vous de prendre le relais » --------------------------------------
   Un bloc doux, jamais une alerte : il explique le partage des rôles, il ne
   signale pas un problème. D'où le rose très pâle plutôt qu'un ambre, et le
   filet fin plutôt qu'une barre de couleur. */
.adm-relais{
  display:flex;gap:16px;align-items:flex-start;
  margin:0 0 20px;padding:18px 20px;
  border:1px solid #F0DCE8;border-radius:var(--a-r);
  background:var(--a-rose-pale);
}
.adm-relais__ico{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:var(--a-r);background:var(--a-blanc);color:var(--a-framboise);
}
.adm-relais__txt{min-width:0}
.adm-relais__t{margin:0 0 7px;font-size:15.5px;font-weight:700;color:var(--a-prune)}
.adm-relais__p{margin:0;font-size:14px;line-height:1.65;color:var(--a-prune)}
.adm-relais__note{
  margin:9px 0 0;font-size:12.5px;line-height:1.55;color:var(--a-gris);
}

/* --- Les coordonnées et leurs actions -------------------------------------
   L'adresse d'abord, en toutes lettres et sur sa propre ligne ; les boutons
   dessous. Une adresse longue revient à la ligne au lieu de pousser la page,
   ce que « anywhere » garantit sur un téléphone. */
.adm-contact__valeur{
  display:block;font-size:14.5px;color:var(--a-prune);overflow-wrap:anywhere;
}
.adm-contact__actions{
  display:flex;gap:9px;flex-wrap:wrap;margin-top:9px;
}
/* Sur un écran tactile, aucune cible sous 44 px. */
@media (pointer:coarse){
  .adm-contact__actions .adm-bouton--petit{--h:44px;padding:0 15px}
}

/* --- Le suivi ------------------------------------------------------------- */
.adm-suivi__etat{margin:0 0 16px}
.adm-suivi__reglage{max-width:320px}
.adm-suivi__mention{
  display:flex;align-items:flex-start;gap:8px;
  margin:14px 0 0;padding:11px 13px;border-radius:var(--a-r-xs);
  background:var(--a-ivoire);border:1px solid var(--mw-info-bord);
  font-size:12.5px;line-height:1.55;color:var(--a-gris);
}
.adm-suivi__mention svg{flex:none;margin-top:1px;color:var(--a-gris-clair)}

/* --- La mention de protection des données --------------------------------- */
.adm-mention-rgpd{
  margin:-6px 0 20px;padding:0 2px;
  font-size:12px;line-height:1.55;color:var(--a-gris-clair);
}

/* --- Les candidatures non lues, dans la liste -----------------------------
   Trois marques, jamais une seule : la pastille qui l'écrit, le fond très
   pâle, et la graisse du nom. La couleur seule ne se voit pas de tout le
   monde, et un fond légèrement teinté sur un écran mal réglé ne se voit de
   personne. */
.adm-tableau tr.est-non-lue > td{background:var(--a-rose-pale)}
.adm-tableau tr.est-non-lue > td:first-child{box-shadow:inset 3px 0 0 var(--a-accent)}
.adm-tableau tr.est-non-lue strong{color:var(--a-prune);font-weight:700}

.adm-nouvelle{
  display:inline-flex;align-items:center;gap:6px;
  margin:0 0 5px;padding:2px 9px 2px 7px;border-radius:999px;
  background:var(--a-rose);color:var(--a-framboise);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.adm-nouvelle__point{
  width:6px;height:6px;border-radius:50%;background:var(--a-accent);flex:none;
}

@media (max-width:720px){
  .adm-relais{flex-direction:column;gap:12px}
  .adm-suivi__reglage{max-width:none}
}

/* =========================================================================
   LES LARGEURS DE L'ESPACE RECRUTEUR

   L'espace héritait de « --a-max » : 1 560 px, la mesure de l'administration.
   Elle y est justifiée — des tableaux denses, des aperçus côte à côte, une
   modération qui compare deux versions d'une annonce. Ici elle étalait des
   formulaires sur toute la largeur d'un écran de 1 920 px : des champs
   devenus des barres, des phrases d'une seule ligne, deux colonnes si
   éloignées qu'elles ne se lisaient plus ensemble.

   Trois mesures, décidées dans lib/recruteur/navigation.ts d'après le chemin.
   Les valeurs reprennent celles qui existent déjà : 1 180 px est la largeur
   du formulaire public (« .soum-page > .wrap » dans refonte.css), et les
   largeurs de lecture en « ch » sont celles de ses paragraphes.
   ========================================================================= */
:root{
  /* Les trois pages prennent toute la largeur disponible : c'est le choix
     qui a été fait, et les gouttières de « adm-contenu » suffisent à ce
     qu'elles ne touchent pas les bords. Le plafond reste celui de toute
     l'administration — « --a-max », 1 560 px — au-delà duquel un tableau
     cesse d'être lisible sur un écran très large.

     Les trois jetons ne sont pas supprimés : ils sont ce qui rend le retour
     en arrière possible en une ligne, et ils documentent ce qu'était chaque
     famille de page. */
  --r-max-liste:var(--a-max);
  --r-max-lecture:var(--a-max);
  --r-max-form:var(--a-max);
  /* La mesure de lecture d'un paragraphe. Au-delà, l'œil perd la ligne en
     revenant à gauche — c'est mesurable, et c'est pour cela qu'on la compte
     en caractères et non en pixels. */
  --r-lecture:68ch;
}

.adm-page--liste{max-width:var(--r-max-liste)}
.adm-page--lecture{max-width:var(--r-max-lecture)}
.adm-page--form{max-width:var(--r-max-form)}

/* --- La longueur des phrases ---------------------------------------------
   Un bloc peut être large ; son texte, non. La règle porte sur les
   paragraphes, jamais sur leur conteneur : le cadre garde sa largeur, la
   phrase revient à la ligne où il faut. */
.adm-page--liste .adm-bonjour__p,
.adm-page--lecture .adm-bonjour__p,
.adm-page--form .adm-bonjour__p,
.adm-page--form .adm-famille__p,
.adm-page--form .adm-sous__p,
.adm-page--lecture .adm-relais__p,
.adm-page--lecture .adm-relais__note,
.adm-page--form .adm-form__mention{
  max-width:var(--r-lecture);
}
/* Les aides de champ suivent la largeur de leur champ, pas celle du bloc :
   une aide plus large que ce qu'elle explique se détache de son objet. */
.adm-page--form .adm-form__aide,
.adm-page--lecture .adm-form__aide{max-width:56ch}
/* Dans les cartes d'information — « Vérification de votre identité » — le
   bloc garde sa largeur et le texte se borne. C'est le cas que le cahier des
   charges nomme.

   La liste vise « .adm-aide » partout où elle sert de phrase explicative :
   dans une carte, sous un formulaire, à côté d'un bouton. Celle du pied de
   formulaire manquait, et la phrase sur la remise en vérification traversait
   l'écran d'un bord à l'autre. */
.adm-page--form .adm-bloc .adm-aide,
.adm-page--lecture .adm-bloc .adm-aide,
.adm-page--form .adm-form__pied .adm-aide,
.adm-page--lecture .adm-form__pied .adm-aide,
.adm-page--liste .adm-vide__p,
.adm-page--lecture .adm-vide__p,
.adm-page--form .adm-vide__p{max-width:var(--r-lecture)}

/* Un pied de formulaire garde son bouton et sa phrase côte à côte tant qu'il
   y a la place, et les empile quand la phrase devient trop longue pour la
   moitié restante. « align-items:center » les aligne sur leur milieu : une
   phrase de deux lignes à côté d'un bouton de 42 px flottait autrement. */
.adm-page--form .adm-form__pied{align-items:center}

/* --- Les espacements ------------------------------------------------------
   Rien n'est comprimé : l'air qui séparait les sections était juste, celui
   qui suivait le titre et celui des colonnes étaient trop grands pour une
   page moins large. */
.adm-page--form .adm-bonjour,
.adm-page--lecture .adm-bonjour{margin-bottom:22px}
.adm-page--form .adm-famille{margin-bottom:26px}
.adm-page--form .adm-form{gap:16px 18px}

/* --- Les paliers ----------------------------------------------------------
   Progressifs, et non un seuil unique qui laisserait la page trop large
   juste avant le mobile. */
@media (max-width:1100px){
  .adm-page--liste,.adm-page--lecture,.adm-page--form{max-width:none}
}
@media (max-width:640px){
  /* Le contenu reprend toute la largeur moins ses marges, qui se resserrent
     à leur tour : à 320 px, seize pixels de chaque côté suffisent. */
  .adm-contenu{padding-left:16px;padding-right:16px}
}
@media (max-width:380px){
  .adm-contenu{padding-left:13px;padding-right:13px}
}


/* =========================================================================
   L'ESPACE RECRUTEUR — LES PAGES
   Ce qui suit habille les pages de l'espace, et rien d'autre. L'administration
   n'y touche pas : elle a son cockpit, ses tableaux et son hero, et ces règles
   ne portent que des classes « rec-* » ou des ajouts à « adm-famille », qui
   n'existe que dans les deux formulaires de l'espace.
   ========================================================================= */

/* --- L'en-tête de page ---------------------------------------------------
   Un panneau prune, à la place d'un titre posé sur le fond. Il répond à deux
   questions avant toute autre : où suis-je, et où en suis-je. La barre de
   progression y tient parce qu'elle a été dessinée pour un fond sombre — son
   rail est du blanc dilué, et sur une carte claire il ne se verrait pas. */
.rec-tete{
  position:relative;overflow:hidden;
  /* Deux colonnes : ce qu'on est à gauche, où l'on en est à droite. En une
     seule, le panneau pleine largeur laissait un grand vide sous le titre.
     « end » aligne les deux colonnes par le bas, pour que la barre et la
     phrase d'introduction reposent sur la même ligne. */
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  gap:20px 44px;
  margin:0 0 22px;padding:26px 30px 28px;
  border-radius:var(--a-r-lg);
  background-color:#6E1B49;
  background-image:linear-gradient(152deg,#2C1220 0%,var(--a-prune) 36%,#54183A 80%,#6E1B49 100%);
  color:#fff;
}
/* Le monogramme agrandi, coupé par le coin. Cinq pour cent : on ne le voit
   pas, on sent que le fond n'est pas uni. */
.rec-tete__filigrane{
  position:absolute;right:-.16em;bottom:-.52em;
  font-size:230px;font-weight:700;line-height:.7;letter-spacing:-.06em;
  color:#fff;opacity:.038;user-select:none;pointer-events:none;
}
.rec-tete__dire{position:relative;display:grid;gap:5px;justify-items:start}
.rec-tete__sur{
  margin:0;font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:#E4A9C6;
}
.rec-tete__t{
  margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:700;line-height:1.2;
  letter-spacing:-.018em;color:#fff;
  /* Une raison sociale de quarante caractères ne doit pas élargir le panneau. */
  overflow-wrap:anywhere;
}
.rec-tete__p{margin:2px 0 0;font-size:14px;line-height:1.6;color:#F3E3EC;max-width:56ch}

/* La barre du tableau de bord, reprise telle quelle. On ne redéfinit ici que
   sa place : sa marge haute lui venait d'un hero, et sa largeur d'une photo
   qu'elle ne devait pas traverser. */
/* « grid-area:avance » lui vient du hero du tableau de bord, où une zone de
   ce nom existe. Ici elle n'existe pas : la barre se plaçait alors toute
   seule dans une colonne implicite, à droite et loin du reste. On lui rend
   un placement ordinaire. */
.rec-tete__avance{grid-area:auto;margin-top:0;width:clamp(260px,24vw,360px)}
.rec-tete__geste{
  margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,236,244,.80);
}
.est-fini .rec-tete__geste{color:#FFE2EF}

/* --- La carte de vérification --------------------------------------------
   Une icône, un titre avec son état, une phrase. Trois choses sur une ligne
   de lecture, plutôt qu'un libellé en capitales grises suivi d'un badge
   perdu au milieu du vide. */
.rec-verif{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  align-items:start;margin:0 0 22px;
}
.rec-verif__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--a-ambre-fond);color:var(--a-ambre);
}
.rec-verif__ico.est-ok{background:var(--a-vert-fond);color:var(--a-vert)}
.rec-verif__dire{display:grid;gap:7px;min-width:0}
.rec-verif__t{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0;font-size:15px;font-weight:700;color:var(--a-prune);
}
.rec-verif__p{margin:0;font-size:13.5px;line-height:1.65;color:var(--a-gris);max-width:72ch}

/* --- Les familles de champs deviennent des cartes -------------------------
   Elles étaient des titres posés sur le fond : un seul long défilement où
   l'on ne savait ni où l'on en était, ni ce qu'il restait. Le numéro n'est
   pas un ornement — c'est lui qui dit « une sur trois ». */
.adm-famille{
  margin:0 0 20px;padding:24px 26px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  background:var(--a-blanc);
}
.adm-famille__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;flex:none;border-radius:50%;
  background:var(--a-rose);color:var(--a-framboise);
  font-size:12px;font-weight:700;line-height:1;
}
/* Le paragraphe de la famille garde une mesure de lecture : dans une carte
   de 1 000 px, une phrase qui va d'un bord à l'autre se relit deux fois. */
.adm-famille__p{max-width:74ch}

/* --- La barre d'enregistrement -------------------------------------------
   Collée au bas de la fenêtre. La page fait plus de 1 500 px : un bouton
   qu'il faut aller chercher est un bouton sur lequel on n'appuie pas.

   Elle n'est pas dans un conteneur à elle : c'est le dernier enfant du
   formulaire, et « position:sticky » avec « bottom » le maintient en vue
   tant que le formulaire défile, puis le laisse se poser à sa place. */
.rec-enreg{
  position:sticky;bottom:0;z-index:4;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin:0;padding:14px 18px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  background:rgba(255,253,252,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 -6px 22px -18px rgba(50,21,37,.5);
}
.rec-enreg__b{--h:44px;flex:none}
.rec-enreg__aide{
  margin:0;flex:1 1 320px;min-width:0;
  font-size:12.5px;line-height:1.55;color:var(--a-gris);
}
/* La barre est translucide : le contenu défile DESSOUS. Sans cette réserve,
   la fin de la dernière carte resterait derrière elle, lisible à moitié. */
.rec-form{display:block;padding-bottom:16px}

@media (max-width:900px){
  .rec-tete{grid-template-columns:minmax(0,1fr);padding:22px 20px 24px;gap:18px}
  .rec-tete__filigrane{font-size:170px}
  .rec-tete__avance{width:100%}
  .rec-verif{gap:13px}
  .adm-famille{padding:20px 18px}
  /* Sous cette largeur, une barre collante mange le tiers de l'écran quand le
     clavier est ouvert. Elle redevient un pied de formulaire ordinaire. */
  .rec-enreg{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
  .rec-enreg__b{width:100%}
}

@media (max-width:480px){
  .rec-verif{grid-template-columns:1fr;gap:12px}
}

/* --- Le bouton principal, dans l'en-tête prune ---------------------------
   Le bouton rose de l'administration disparaîtrait sur un fond prune : même
   famille de couleur, presque même valeur. Celui-ci est clair sur sombre,
   l'inverse exact — c'est ce qui le fait ressortir. */
.adm a.rec-tete__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;margin-top:12px;padding:0 20px;
  border-radius:var(--a-r);
  background:#fff;color:var(--a-framboise);
  font-size:14.5px;font-weight:600;line-height:1;
  transition:background var(--a-t),color var(--a-t);
}
.adm a.rec-tete__cta:hover{background:#FFEAF3;color:var(--a-prune)}
.adm a.rec-tete__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Le lien sous la barre : il mène là où l'on répare ce qu'elle signale. */
.adm a.rec-tete__lien{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  font-size:13px;font-weight:600;color:#FFC9DF;
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--a-t);
}
.adm a.rec-tete__lien::after{content:"→"}
.adm a.rec-tete__lien:hover{color:#FFFBFD}

/* --- Les chiffres, en un seul bandeau ------------------------------------
   Cinq cartes flottantes et hautes, dont trois à zéro, faisaient une rangée
   de vide. Un bandeau, des filets, et le zéro s'efface. */
.rec-chiffres{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0 0 22px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  background:var(--a-blanc);overflow:hidden;
}
.adm a.rec-chiffre{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ico n" "ico q";
  align-items:center;column-gap:13px;row-gap:1px;
  padding:18px 20px;
  border-left:1px solid var(--a-ligne);
  transition:background var(--a-t);
}
/* Le poids compte : la règle du dessus est « .adm a.rec-chiffre » — une
   classe, un élément, une classe. Un simple « .rec-chiffre:first-child »
   pesait moins et laissait un filet à gauche de la PREMIÈRE cellule, contre
   le bord du bandeau. Toutes les règles de filet qui suivent reprennent donc
   ce même poids ; c'est fastidieux, et c'est la seule façon de ne pas écrire
   « !important ». */
.adm a.rec-chiffre:first-child{border-left:0}
.adm a.rec-chiffre:hover{background:var(--a-rose-pale)}
.adm a.rec-chiffre:focus-visible{outline:2px solid var(--a-accent);outline-offset:-2px}
.rec-chiffre__ico{
  grid-area:ico;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--a-rose);color:var(--a-framboise);
}
.rec-chiffre__ico svg{width:19px;height:19px}
.rec-chiffre__n{
  grid-area:n;align-self:end;
  font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--a-prune);
}
.rec-chiffre__q{
  grid-area:q;align-self:start;
  font-size:12.5px;line-height:1.35;color:var(--a-gris);
}
.rec-chiffre__p{display:block;font-size:11.5px;color:var(--a-gris-clair)}

/* Rien à ce compteur : il s'efface, mais reste lisible et cliquable. Le gris
   n'est pas une punition — c'est la hiérarchie qui fait son travail. */
.rec-chiffre.est-zero .rec-chiffre__ico{background:var(--a-fond);color:#C3B2BB}
.rec-chiffre.est-zero .rec-chiffre__n{color:#C3B2BB}
.rec-chiffre.est-zero .rec-chiffre__q{color:var(--a-gris-clair)}

/* Il appelle un geste, et il n'est pas nul : l'ambre, celui de tout ce qui
   demande un regard dans cette feuille. */
.rec-chiffre.est-agir .rec-chiffre__ico{background:var(--a-ambre-fond);color:var(--a-ambre)}
.rec-chiffre.est-agir .rec-chiffre__n{color:var(--a-ambre)}

/* --- Un panneau qui porte son titre --------------------------------------
   Le tableau était posé sous un libellé en capitales grises, seul sur le
   fond : il avait l'air d'un reste. */
.rec-panneau{
  margin:0 0 22px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  background:var(--a-blanc);overflow:hidden;
}
.rec-panneau__tete{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--a-ligne);
}
.rec-panneau__t{margin:0;font-size:15px;font-weight:700;color:var(--a-prune)}
.adm a.rec-panneau__lien{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  font-size:13px;font-weight:600;color:var(--a-framboise);
  transition:color var(--a-t);
}
.adm a.rec-panneau__lien::after{content:"→"}
.adm a.rec-panneau__lien:hover{color:var(--a-accent)}
/* Le tableau remplit le panneau : ses propres bords feraient un cadre dans
   un cadre. */
.rec-panneau .adm-tableau-bloc,
.rec-panneau .adm-carte{border:0;border-radius:0;margin:0;background:none}

/* Trois colonnes : la 4e et la 5e passent à la ligne. Elles prennent un filet
   au-dessus, et celle qui ouvre la seconde rangée en perd un à gauche. */
@media (max-width:1100px){
  .rec-chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .adm a.rec-chiffre:nth-child(n+4){border-top:1px solid var(--a-ligne)}
  .adm a.rec-chiffre:nth-child(4){border-left:0}
}
/* Deux colonnes : les impairs ouvrent une rangée, les deux premiers sont sur
   la première ligne. La quatrième reprend son filet de gauche, que la règle
   à trois colonnes lui avait retiré. */
@media (max-width:760px){
  .rec-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm a.rec-chiffre{border-top:1px solid var(--a-ligne)}
  .adm a.rec-chiffre:nth-child(odd){border-left:0}
  .adm a.rec-chiffre:nth-child(-n+2){border-top:0}
  .adm a.rec-chiffre:nth-child(4){border-left:1px solid var(--a-ligne)}
}
/* Une colonne : chaque cellule est une rangée. « :nth-child(n) » n'est pas un
   caprice — il donne à la règle le même poids que « :nth-child(-n+2) » du
   palier au-dessus, qui sans cela l'emporterait et laisserait les deux
   premiers chiffres collés l'un à l'autre. */
@media (max-width:420px){
  .rec-chiffres{grid-template-columns:minmax(0,1fr)}
  .adm a.rec-chiffre:nth-child(n){border-left:0;border-top:1px solid var(--a-ligne)}
  .adm a.rec-chiffre:first-child{border-top:0}
}

/* =========================================================================
   LE FORMULAIRE D'ANNONCE DE L'ESPACE RECRUTEUR
   Ces dix-neuf classes étaient dans le balisage depuis le début, et aucune
   n'avait de règle : les boutons radio retombaient donc sur l'aspect natif du
   navigateur — une pastille grise, le texte collé contre, les trois réponses
   sur une seule ligne, et la légende du groupe à cheval sur sa bordure.

   Les valeurs qui suivent sont celles du formulaire PUBLIC — voir
   « soum__option » dans refonte.css. Les deux palettes sont les mêmes au
   pixel près (#C92D78, #951753, #321525) : c'est la même direction
   artistique, transcrite dans le vocabulaire de cette feuille, et non une
   seconde interprétation.
   ========================================================================= */

/* --- Le groupe de choix --------------------------------------------------
   Un « fieldset » : c'est ce qu'un lecteur d'écran attend d'un choix entre
   plusieurs options. Ses trois valeurs natives — bordure, marge, garniture —
   sont remises à zéro, sinon le cadre gris du navigateur reparaît. */
.adm-choix{
  border:0;margin:0;padding:0;min-width:0;
  display:grid;gap:12px;
}
/* La légende visible. « float:none » et « padding:0 » l'empêchent de se poser
   SUR la bordure du groupe, qui est le comportement natif et la première
   chose qui trahissait un formulaire non habillé. Elle occupe toute la
   largeur pour que la question se lise avant les réponses. */
.adm-choix__legende{
  float:none;display:block;width:100%;padding:0;margin:0 0 8px;
  font-size:14px;font-weight:600;line-height:1.4;color:var(--a-prune);
}
.adm-choix--question{margin-top:4px}

/* --- Une option ----------------------------------------------------------
   Toute la surface est cliquable : c'est un <label> qui enveloppe son
   <input>. Aucun script, et le clavier fonctionne tout seul. */
.adm-choix__o{
  position:relative;display:grid;align-items:center;gap:4px 13px;
  grid-template-columns:auto minmax(0,1fr);
  padding:15px 18px 15px 46px;cursor:pointer;
  background:var(--a-blanc);
  border:1px solid var(--a-ligne-forte);border-radius:var(--a-r);
  transition:border-color var(--a-t),background-color var(--a-t);
}
.adm-choix__o:hover{border-color:#C6BABF}
/* Le vrai bouton reste dans le document — il porte le nom, la valeur, la
   validation et le parcours au clavier. Il est seulement invisible : le
   masquer par « display:none » le sortirait de la tabulation. */
.adm-choix__o input{position:absolute;opacity:0;width:1px;height:1px}

/* La pastille, dessinée. Quinze pixels, comme celle du formulaire public. */
.adm-choix__puce{
  position:absolute;left:18px;top:50%;margin-top:-7.5px;
  width:15px;height:15px;border-radius:50%;
  border:1.5px solid #C6BABF;background:var(--a-blanc);
  transition:border-color var(--a-t),box-shadow var(--a-t);
}
.adm-choix__o.est-choisi{
  border-color:var(--a-accent);
  background:linear-gradient(100deg,#FCF2F7 0%,#FEFAFC 45%,#fff 100%);
}
.adm-choix__o.est-choisi .adm-choix__puce{
  border-color:var(--a-accent);box-shadow:inset 0 0 0 4px var(--a-accent);
}
/* Le focus est porté par la carte, puisque le bouton est invisible. Sans
   cela, un parcours au clavier avancerait sans qu'on voie où il en est. */
.adm-choix__o:focus-within{
  border-color:var(--a-framboise);box-shadow:0 0 0 3px rgba(104,21,61,.09);
}

.adm-choix__ico{
  grid-row:1 / -1;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;border-radius:50%;
  background:var(--a-rose);color:var(--a-framboise);
}
.adm-choix__o.est-choisi .adm-choix__ico{background:#F6DCE9}
/* Sans icône — le groupe du hijab —, le texte prend les deux colonnes. */
.adm-choix__txt{grid-column:2;display:grid;gap:3px;min-width:0}
.adm-choix__o:not(:has(.adm-choix__ico)) .adm-choix__txt{grid-column:1 / -1}
.adm-choix__t{font-size:14.5px;font-weight:600;color:var(--a-prune);line-height:1.4}
.adm-choix__p{font-size:13px;line-height:1.55;color:var(--a-gris)}

/* Le champ qui s'ouvre sous une option choisie. */
.adm-form--suite{margin-top:14px}

/* Un sous-titre à l'intérieur d'une famille. */
.adm-sous{margin:22px 0 14px}
.adm-sous__t{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--a-prune)}

/* Un avertissement qui informe sans alarmer : il dit « relisez », pas
   « quelque chose ne va pas ». */
.adm-alerte.adm-alerte--douce{
  background:var(--a-rose-pale);color:var(--a-framboise);
  border:1px solid #F0D6E3;
}

/* --- L'envoi -------------------------------------------------------------
   Une carte à part, détachée des familles : c'est le dernier geste, et il ne
   doit pas ressembler à une section de plus qu'on peut faire défiler sans
   voir. */
.adm-envoi{
  display:grid;gap:18px;
  margin:0 0 20px;padding:22px 26px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  background:var(--a-blanc);
}
/* La case et son texte sont alignés dès la PREMIÈRE ligne : une case centrée
   sur quatre lignes de texte flotte au milieu de nulle part. */
.adm-envoi__consent{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:12px;cursor:pointer;
}
.adm-envoi__consent input{position:absolute;opacity:0;width:1px;height:1px}
.adm-envoi__case{
  width:18px;height:18px;margin-top:2px;flex:none;border-radius:3px;
  border:1.5px solid var(--a-ligne-forte);background:var(--a-blanc);
  transition:border-color var(--a-t),background var(--a-t);
}
.adm-envoi__consent input:checked ~ .adm-envoi__case{
  border-color:var(--a-accent);background:var(--a-accent);
  /* La coche est dessinée dans le fond : pas de second élément à placer, et
     elle suit la case si sa taille change. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.adm-envoi__consent input:focus-visible ~ .adm-envoi__case{
  outline:2px solid var(--a-framboise);outline-offset:2px;
}
/* La mesure est bornée : sans cela la phrase traverse 1 400 px et personne
   ne la lit. */
.adm-envoi__txt{font-size:13.5px;line-height:1.65;color:var(--a-gris);max-width:var(--r-lecture)}

.adm-envoi__agir{display:grid;gap:10px;justify-items:start}
.adm-bouton--envoi{--h:46px;padding:0 24px;font-size:15px;background:var(--a-grad-rose)}
.adm-bouton--envoi:hover:not(:disabled){filter:brightness(1.07);background:var(--a-grad-rose)}
.adm-bouton--envoi:disabled{cursor:not-allowed;filter:saturate(.6) brightness(1.04)}
/* Sous le bouton, jamais à côté : c'est une promesse qu'on lit après avoir vu
   ce sur quoi on s'apprête à cliquer. */
.adm-envoi__note{
  display:flex;align-items:center;gap:7px;margin:0;
  font-size:12.5px;color:var(--a-gris);
}
.adm-envoi__note svg{flex:none;color:var(--a-vert)}

@media (max-width:640px){
  .adm-envoi{padding:18px 16px}
  .adm-bouton--envoi{width:100%}
  .adm-envoi__agir{justify-items:stretch}
  .adm-choix__o{padding:14px 15px 14px 43px}
}

/* =========================================================================
   L'ENTRÉE DE PAGE

   Une seule classe, et elle est NEUVE : aucune règle existante n'est
   touchée, donc aucun écran validé ne change d'apparence. Elle ne porte que
   sur la zone de contenu — la barre latérale n'est jamais animée.

   Deux cent dix millisecondes, six pixels, une opacité : c'est ce qu'il
   faut pour que le changement de page se lise comme un mouvement plutôt
   que comme un clignotement. Rien ne rebondit, rien ne dure.

   « animation-fill-mode:both » garde l'état final, où « transform » vaut
   « none » : la page ne reste donc pas un bloc conteneur, et les panneaux
   en « position:fixed » — le menu d'actions, les fenêtres du studio, le
   nœud d'export — se placent bien par rapport à la fenêtre.
   ========================================================================= */
@keyframes adm-entree{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.adm-entree{animation:adm-entree 210ms cubic-bezier(.22,.68,.28,1) both}
@media (prefers-reduced-motion:reduce){
  .adm-entree{animation:none}
}

/* =========================================================================
   CANDIDATURES WEBMASTER — la fiche et la liste
   Voir app/(admin)/admin/(protege)/candidatures-webmaster/. Préfixes
   « adm-wm- » et « adm-wa- » : rien ici ne touche la barre latérale.
   ========================================================================= */
.adm-onglets--periode{margin:-4px 0 18px}
.adm-onglets--periode .adm-onglet{min-height:36px}

.adm-wm-col{display:grid;gap:20px;min-width:0}
.adm-wm-defs{grid-template-columns:minmax(0,max-content) minmax(0,1fr);row-gap:10px}
.adm-wm-defs dd{overflow-wrap:anywhere}
.adm-wm-defs--reponses dd{font-weight:500;color:var(--a-prune)}

/* Le numéro : grand, lisible, et ses deux gestes juste dessous. */
.adm-wa{margin:6px 0 18px;padding:18px;border-radius:var(--a-r-lg);
  background:var(--a-rose-pale);border:1px solid #F0D6E3}
.adm-wa__lisible{margin:0;font-size:24px;font-weight:600;letter-spacing:.01em;
  color:var(--a-prune);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.adm-wa__norme{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:6px 0 0;font-size:13px;color:var(--a-gris)}
.adm-wa__norme code{font:600 14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--a-prune-clair);
  user-select:all}
.adm-wa__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.adm-wa__actions .adm-bouton{min-height:44px;gap:8px}
.adm-wa__ico{display:inline-grid;place-items:center;width:16px;height:16px}
.adm-wa__copie.est-copie{color:var(--a-vert);border-color:var(--a-vert-ligne);background:var(--a-vert-fond)}
.adm-wa__annonce{margin:10px 0 0;min-height:0;font-size:13px;line-height:1.5}
.adm-wa__annonce.est-echec{color:var(--a-ambre)}
.adm-wa__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.adm-wm-suivi{display:grid;gap:16px;margin-top:14px}
.adm-wm-suivi textarea.adm-champ{min-height:140px}
.adm-wm-suivi__pied{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.adm-wm-suivi__pied .adm-bouton{min-height:44px}
.adm-wm-suivi__etat{margin:0;font-size:13.5px;color:var(--a-vert)}

@media (max-width:620px){
  .adm-wa__actions .adm-bouton{flex:1 1 100%;justify-content:center}
  .adm-wm-defs{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .adm-wm-defs dd{margin-bottom:10px}
  .adm-wm-suivi__pied .adm-bouton{width:100%;justify-content:center}
}

/* Les deux familles de candidatures, en tête de « Candidatures ». Un filet
   sous la rangée, et l'onglet courant qui s'y pose en prune : ce sont des
   rubriques, non des filtres — elles ne ressemblent pas aux onglets de
   statut, qui viennent dessous. */
.adm-rubriques{display:flex;gap:4px 22px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--a-ligne)}
.adm-rubrique{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 2px;margin-bottom:-1px;
  font-size:14.5px;font-weight:600;color:var(--a-gris);text-decoration:none;
  border-bottom:2px solid transparent;
}
.adm-rubrique:hover{color:var(--a-prune)}
.adm-rubrique:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px;border-radius:4px}
.adm-rubrique--actif{color:var(--a-prune);border-bottom-color:var(--a-prune)}
.adm-rubrique__n{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  font-size:11.5px;font-weight:700;color:#FFFFFF;background:var(--a-framboise);
}

/* =========================================================================
   LES SUPPRESSIONS DÉFINITIVES
   Voir components/admin/SuppressionOffre.tsx et FenetreSuppression.tsx.
   La suppression est une action à part : un bouton discret en rouge, isolé
   des actions ordinaires ; une fenêtre qui dit les conséquences avant de
   proposer quoi que ce soit ; l'action destructive en dernier.
   ========================================================================= */

/* Le bouton : rouge discret, sans fond — il ne doit pas ressembler à une
   action de tous les jours. */
.adm-bouton--texte-rouge{color:var(--a-rouge);gap:6px}
.adm-bouton--texte-rouge:hover{background:var(--a-rouge-fond);color:var(--a-rouge)}
.adm-bouton--texte-rouge svg{width:15px;height:15px}

/* Sur la page d'une annonce ou d'une candidature : un filet, puis le bouton. */
.adm-actions__zone-sensible{display:inline-flex;align-items:center;margin-left:6px;padding-left:12px;
  border-left:1px solid var(--a-ligne-forte)}
.adm-zone-sensible{border-color:var(--a-rouge-ligne)}
.adm-zone-sensible .adm-bloc__titre{color:var(--a-rouge)}
.adm-zone-sensible .adm-bouton{margin-top:12px}

/* La fenêtre. */
.adm-modale__b--danger{width:min(600px,100%);border-top:3px solid #A3203F}
.adm-sup{display:grid;gap:14px}
.adm-sup__p{margin:0;font-size:14.5px;line-height:1.6;color:var(--a-prune)}
.adm-sup__note{margin:0;font-size:13.5px;line-height:1.55;color:var(--a-gris)}
.adm-sup__charge{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--a-gris)}
.adm-sup__erreur{margin:0 0 10px;flex:1 1 100%;padding:11px 14px;border-radius:var(--a-r);
  font-size:13.5px;line-height:1.5;color:var(--a-rouge);background:var(--a-rouge-fond);border:1px solid var(--a-rouge-ligne)}
.adm-sup__actes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;width:100%}
.adm-sup__actes .adm-bouton,.adm-sup__choix .adm-bouton{min-height:44px}

/* Les deux choix, nettement séparés : le recommandé d'abord, le destructif
   ensuite, sous un filet rouge. */
.adm-sup__choix{display:grid;gap:10px;padding:16px;border-radius:var(--a-r-lg);border:1px solid var(--a-ligne)}
.adm-sup__choix--conseil{background:var(--a-rose-pale);border-color:#F0D6E3}
.adm-sup__choix--danger{margin-top:6px;background:#FFFAFA;border-color:var(--a-rouge-ligne)}
.adm-sup__choix .adm-bouton{justify-self:start}
.adm-sup__badge{justify-self:start;margin:0;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--a-vert);background:var(--a-vert-fond)}
.adm-sup__t{margin:0;font-size:15px;font-weight:700;color:var(--a-prune)}
.adm-sup__choix--danger .adm-sup__t{color:var(--a-rouge)}
.adm-sup__d{margin:0;font-size:13.5px;line-height:1.6;color:var(--a-prune-clair)}
.adm-sup__l{font-size:13px;font-weight:600;color:var(--a-prune)}
.adm-sup__saisie{width:100%}
.adm-sup__etat{margin:-4px 0 0;font-size:12.5px;color:var(--a-gris);overflow-wrap:anywhere}
.adm-sup__final[disabled]{opacity:.55;cursor:not-allowed}

.adm-sup__roue{display:inline-block;width:15px;height:15px;margin-right:8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:adm-sup-roue .8s linear infinite;vertical-align:-2px}
.adm-sup__roue--sombre{border-color:rgba(50,21,37,.18);border-top-color:var(--a-prune)}
@keyframes adm-sup-roue{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.adm-sup__roue{animation-duration:2s}}

@media (max-width:620px){
  .adm-sup__actes{flex-direction:column-reverse}
  .adm-sup__actes .adm-bouton,.adm-sup__choix .adm-bouton{width:100%;justify-content:center;justify-self:stretch}
  .adm-actions__zone-sensible{margin-left:0;padding-left:0;border-left:0}
}

/* =========================================================================
   LA CONSOMMATION DE L'IA — voir components/admin/ia/ConsommationIA.tsx
   Une barre fine, un reflet nacré à peine visible : pas un compteur de jeu.
   ========================================================================= */
.ia-estim{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--stu-encre-2, #5C4A53);min-height:1.45em}
.ia-estim--alerte{color:#8A1B33;font-weight:600}
.ia-estim--reel{color:#1E6B41;font-weight:600}
.ia-estim__note{font-weight:400;color:var(--stu-encre-3, #8A7A83)}

/* =========================================================================
   L'ESTIMATION PRÈS DES BOUTONS — voir components/admin/ia/ConsommationIA.tsx
   ========================================================================= */
.ia-estim__l{margin:0}
.ia-estim__part{margin-top:2px;font-size:12px}
.ia-estim__prov{font-weight:500;color:#8A5A16}
.ia-estim__squelette{display:inline-block;color:transparent;border-radius:4px;background:linear-gradient(90deg,#F1E6EC 0%,#FBF4F7 50%,#F1E6EC 100%);background-size:200% 100%;animation:iaSquelette 1.2s ease-in-out infinite}
@keyframes iaSquelette{from{background-position:100% 0}to{background-position:-100% 0}}
.ia-confirme{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--a-encre,#2A1020)}
.ia-confirme__sec{margin:0;font-size:13px;line-height:1.5;color:#5C4A53}

/* =========================================================================
   « CRÉDITS CLAUDE » — le module du bas de la barre latérale
   Voir components/admin/ia/ModuleCredits.tsx. Un prune un peu plus clair que
   la barre, un filet rose poudré, un losange nacré. Le reflet de la barre ne
   passe qu'à une actualisation — jamais en boucle.
   ========================================================================= */
.adm-cc{
  display:grid;gap:6px;width:100%;margin:0 0 6px;padding:10px 11px 9px;text-align:left;cursor:pointer;
  border-radius:calc(var(--a-r) + 2px);border:1px solid rgba(255,201,223,.22);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  color:#FFF6FA;font:inherit;transition:background var(--a-t),border-color var(--a-t);
}
.adm-cc:hover{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border-color:rgba(255,201,223,.34)}
.adm-cc__tete{display:flex;align-items:center;gap:8px;min-width:0}
.adm-cc__losange{
  flex:none;display:inline-block;width:7px;height:7px;rotate:45deg;border-radius:1.5px;
  background:#FFF4F9;box-shadow:0 0 0 2px rgba(255,201,223,.14),0 0 8px rgba(255,201,223,.55);
}
.adm-cc__t{flex:1;min-width:0;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,236,245,.78)}
.adm-cc__pc{flex:none;font-size:11.5px;font-weight:600;color:rgba(255,236,245,.72);font-variant-numeric:tabular-nums}
.adm-cc__corps{display:grid;gap:5px;min-width:0}
.adm-cc__principal{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;line-height:1.25}
.adm-cc__principal b{font-size:15px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.adm-cc__principal span{font-size:11.5px;color:rgba(255,236,245,.72)}
.adm-cc__rail,.adm-ccp__rail{position:relative;display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden}
.adm-cc__plein{
  position:relative;display:block;height:100%;border-radius:inherit;overflow:hidden;
  background:linear-gradient(90deg,#B8437F 0%,#E27AAE 70%,#F6B3D3 100%);
  transition:width .6s cubic-bezier(.22,.68,.28,1);
}
.adm-cc__plein::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  animation:admCcReflet 1.1s ease-out .15s 1 both;
}
@keyframes admCcReflet{from{left:-40%}to{left:110%}}
.adm-cc__sec{font-size:11.5px;line-height:1.35;color:rgba(255,236,245,.74);font-variant-numeric:tabular-nums}
.adm-cc__maj{font-size:10.5px;color:rgba(255,236,245,.55)}
.adm-cc__erreur{font-size:12px;color:#FFD9A8}
.adm-cc[data-etat="alerte"] .adm-cc__plein{background:linear-gradient(90deg,#C9803A,#F0B45E)}
.adm-cc[data-etat="epuise"] .adm-cc__plein{background:linear-gradient(90deg,#B3261E,#E0605A)}
.adm-cc__squelette{display:grid;gap:6px}
.adm-cc__squelette i{display:block;height:9px;border-radius:4px;background:rgba(255,255,255,.1)}
.adm-cc__squelette i:nth-child(1){width:62%;height:13px}
.adm-cc__squelette i:nth-child(2){height:5px}
.adm-cc__squelette i:nth-child(3){width:80%}
.adm-cc__squelette--grand i{background:#F1E6EC}

/* Le panneau détaillé : collé à la barre sur grand écran, en feuille sur mobile. */
.adm-ccp-voile{position:fixed;inset:0;z-index:95}
.adm-ccp{
  position:fixed;left:calc(var(--a-menu) + 12px);bottom:16px;z-index:96;
  display:grid;gap:14px;width:min(380px,calc(100vw - var(--a-menu) - 24px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  padding:18px;border-radius:14px;background:#fff;border:1px solid #F0E7EE;
  box-shadow:0 14px 36px rgba(42,16,32,.16);color:#2A1020;font-size:13.5px;
}
.adm-ccp__tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.adm-ccp__tete h2{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;font-weight:600}
.adm-ccp__tete h2:focus{outline:none}
.adm-ccp__tete .adm-cc__losange{background:#C92D78;box-shadow:0 0 8px rgba(201,45,120,.4)}
.adm-ccp__x{width:36px;height:36px;border:0;border-radius:8px;background:none;cursor:pointer;color:#5C4A53;font-size:14px}
.adm-ccp__x:hover{background:#F8F3F7}
.adm-ccp__bloc{display:grid;gap:8px;padding-top:12px;border-top:1px solid #F0E7EE}
.adm-ccp__bloc h3{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#951753}
.adm-ccp__grand{margin:0;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.adm-ccp__sec{margin:0;font-size:12.5px;line-height:1.5;color:#5C4A53}
.adm-ccp__rail{background:#F1E6EC}
.adm-ccp__chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:2px 0 0}
.adm-ccp__chiffres div{min-width:0}
.adm-ccp__chiffres dt{font-size:11.5px;color:#7C6873}
.adm-ccp__chiffres dd{margin:1px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.adm-ccp__hist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.adm-ccp__hist li{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:8px;background:#FBF7FA;font-size:12.5px}
.adm-ccp__hist small{color:#7C6873}
.adm-ccp__hist em{font-style:normal;color:#8A1B33}
.adm-ccp__cout{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.adm-ccp__pied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid #F0E7EE;font-size:12px;color:#5C4A53}
.adm-ccp__note{margin:0;font-size:11.5px;line-height:1.5;color:#7C6873}
.adm-ccp__alerte{margin:0;font-size:12.5px;color:#8A1B33}
.adm-ccp__lien{justify-self:start;min-height:32px;padding:0 4px;border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:#951753}
.adm-ccp__lien:hover{text-decoration:underline}
.adm-ccp__lien:disabled{opacity:.5;cursor:progress}
.adm-ccp__form{display:grid;gap:8px;padding:10px;border-radius:10px;background:#FBF7FA}
.adm-ccp__form label{display:grid;gap:4px;font-size:12px;color:#5C4A53}
.adm-ccp__form input{min-height:38px;padding:6px 10px;border:1px solid #E4D7E0;border-radius:8px;font:inherit;font-size:13.5px;color:#2A1020;background:#fff;width:100%}
.adm-ccp__actes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.adm-ccp__ok{min-height:36px;padding:0 14px;border:0;border-radius:8px;background:#951753;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.adm-ccp__ok:disabled{opacity:.6;cursor:progress}
.adm-ccp :focus-visible{outline:2px solid #C92D78;outline-offset:2px}
@media (max-width:860px){
  .adm-ccp-voile{background:rgba(30,8,20,.44)}
  .adm-ccp{left:0;right:0;bottom:0;width:auto;max-height:88dvh;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
/* Sur un écran bas, la barre latérale défile plutôt que de couper le compte. */
@media (min-width:861px) and (max-height:760px){.adm-menu{overflow-y:auto}}
@media (prefers-reduced-motion:reduce){
  .adm-cc__plein{transition:none}
  .adm-cc__plein::after{animation:none;display:none}
  .ia-estim__squelette{animation:none}
}

/* =========================================================================
   OUVERTURE DU SITE — la carte du tableau de bord (components/admin/OuvertureSite.tsx)
   ========================================================================= */
.adm-ouv{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;
  margin:0 0 16px;padding:20px 24px;
}
.adm-ouv__etat{display:grid;gap:6px;min-width:0;flex:1 1 380px}
.adm-ouv__t{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--a-gris)}
.adm-ouv__statut{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;font-weight:600;color:var(--a-prune)}
.adm-ouv__point{width:10px;height:10px;border-radius:50%;flex:none}
.adm-ouv__statut--ferme .adm-ouv__point{background:#C77700;box-shadow:0 0 0 4px #FFF1DC}
.adm-ouv__statut--ouvert .adm-ouv__point{background:#1F8A5B;box-shadow:0 0 0 4px #E3F5EC}
.adm-ouv__p{margin:0;font-size:14.5px;line-height:1.55;color:var(--a-gris)}
.adm-ouv__alerte{margin:4px 0 0;padding:10px 12px;border-radius:8px;background:var(--a-rose-pale);font-size:14px;color:var(--a-framboise)}
.adm-ouv__actes{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.adm-ouv__note{flex:1 1 100%;margin:0;font-size:13.5px;color:var(--a-framboise)}
@media (max-width:640px){
  .adm-ouv{padding:18px}
  .adm-ouv__actes{justify-content:stretch;width:100%}
  .adm-ouv__actes .adm-bouton{flex:1 1 auto}
}

/* =========================================================================
   LE JOURNAL DES E-MAILS (/admin/courriels)

   Rien de neuf dans le vocabulaire : onglets, tableau, fiches mobiles,
   cartes et définitions sont ceux des autres listes. Ne s'ajoutent que la
   rangée de filtres — recherche, type, période —, l'historique et le cadre
   de l'aperçu.
   ========================================================================= */
.adm-recherche.adm-courriels__filtres{
  flex:none;margin:0 0 18px;flex-wrap:wrap;align-items:flex-end;gap:10px;
}
.adm-courriels__filtres .adm-champ{flex:0 1 auto;min-width:0}
.adm-courriels__filtres .adm-courriels__q{flex:1 1 240px}
.adm-courriels__date{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--a-gris)}
@media (max-width:760px){
  .adm-courriels__filtres > *{flex:1 1 100%}
  .adm-courriels__date .adm-champ{flex:1 1 auto}
}

.adm-courriels__adresse{overflow-wrap:anywhere}
.adm-courriels__code{font-size:12.5px;overflow-wrap:anywhere;color:var(--a-prune-clair)}
.adm-courriels__erreur{color:var(--a-rouge);overflow-wrap:anywhere}
.adm-courriels__note{margin:10px 0 0;font-size:13px}

/* L'historique : une ligne par fait, l'heure à gauche, un filet qui les
   relie. Un échec prend le rouge des étiquettes, rien de plus. */
.adm-courriels__histo{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--a-ligne-forte)}
.adm-courriels__histo li{position:relative;display:grid;gap:2px;padding:0 0 12px}
.adm-courriels__histo li::before{
  content:"";position:absolute;left:-18.5px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--a-blanc);border:1.5px solid var(--a-framboise);
}
.adm-courriels__histo time{font-size:12.5px;color:var(--a-gris);font-variant-numeric:tabular-nums}
.adm-courriels__histo-quoi{font-weight:600;color:var(--a-prune)}
.adm-courriels__histo-detail{font-size:13px;color:var(--a-gris);overflow-wrap:anywhere}
.adm-courriels__histo--rouge::before{border-color:var(--a-rouge)!important}
.adm-courriels__histo--rouge .adm-courriels__histo-quoi{color:var(--a-rouge)}

/* L'aperçu : un cadre blanc, à la largeur d'un e-mail, sur le fond nacré
   des panneaux. Il défile en lui-même plutôt que d'allonger la page. */
.adm-courriels__apercu{
  display:block;width:100%;height:640px;margin-top:12px;
  border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);background:#FFFFFF;
}
@media (max-width:760px){ .adm-courriels__apercu{height:520px} }
.adm-courriels__indispo{
  padding:28px 20px;border:1px dashed var(--a-ligne-forte);border-radius:var(--a-r-lg);
  text-align:center;background:var(--a-rose-pale);
}
.adm-courriels__indispo-t{margin:0 0 4px;font-weight:600;color:var(--a-prune)}
.adm-courriels__texte{margin-top:14px}
.adm-courriels__texte summary{cursor:pointer;font-weight:600;color:var(--a-prune)}
.adm-courriels__texte pre{
  margin:10px 0 0;padding:14px;max-height:360px;overflow:auto;
  white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.55;
  background:var(--a-surface);border:1px solid var(--a-ligne);border-radius:var(--a-r);
}
.adm-courriels__aide{display:block;margin-top:2px;font-size:12.5px;color:var(--a-gris)}

/* --- La consommation Resend (/admin/statistiques/resend) ------------------
   Deux cartes, un chiffre, une jauge. La jauge garde la framboise de la
   marque jusqu'à 80 % ; l'ambre puis le rouge des étiquettes prennent le
   relais — la couleur dit le seuil, le texte le redit. */
.adm-resend__tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.adm-resend__chiffre{margin:6px 0 12px;font-size:30px;font-weight:600;color:var(--a-prune);font-variant-numeric:tabular-nums}
.adm-resend__sur{font-size:16px;font-weight:500;color:var(--a-gris)}
.adm-resend__jauge{height:10px;border-radius:999px;background:var(--a-rose);overflow:hidden;margin-bottom:14px}
.adm-resend__jauge > span{display:block;height:100%;border-radius:inherit;background:var(--a-framboise)}
.adm-resend__jauge--80 > span{background:var(--a-ambre)}
.adm-resend__jauge--95 > span,.adm-resend__jauge--100 > span{background:var(--a-rouge)}
.adm-resend__note{margin:0 0 12px;font-size:13px}
.adm-resend__avert{
  margin:12px 0 0;padding:10px 12px;border-radius:var(--a-r);font-size:13.5px;
  color:var(--a-ambre);background:var(--a-ambre-fond);border:1px solid var(--a-ambre-ligne);
}

/* --- Le tableau du journal -------------------------------------------------
   Ses colonnes ne suivent pas le calcul commun des autres listes (« --fixes ») :
   elles sont posées par <colgroup>. La date tient en 104 px sur deux lignes ;
   le statut garde 224 px pour « Non envoyé — mode local » (188 px mesurés) et
   ses gouttières ; le
   type 176 px ; le destinataire prend un quart du reste, l'objet le solde. */
.adm-tableau table.adm-courriels__table{min-width:880px}
.adm-courriels__col-date{width:104px}
.adm-courriels__col-a{width:24%}
.adm-courriels__col-type{width:176px}
.adm-courriels__col-statut{width:224px}
.adm-courriels__table .adm-etiq{white-space:nowrap}
.adm-courriels__quand{display:flex;flex-direction:column;line-height:1.3;font-variant-numeric:tabular-nums}
.adm-courriels__heure{font-size:12.5px;color:var(--a-gris)}
.adm-courriels__table .adm-tronque{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La rangée des filtres : une grille, non plus des champs qui s'étirent au
   hasard. Destinataire et objet se partagent la largeur ; type, période et
   bouton gardent leur mesure. Sur téléphone, un champ par ligne, la période
   sur deux colonnes. */
.adm-recherche.adm-courriels__filtres{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,220px) auto auto auto auto;
  align-items:center;gap:10px;margin:0 0 14px;
}
.adm-courriels__filtres > .adm-champ,
.adm-courriels__filtres .adm-courriels__q{width:100%;min-width:0;flex:none}
@media (max-width:1180px){
  .adm-recherche.adm-courriels__filtres{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .adm-recherche.adm-courriels__filtres{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .adm-courriels__filtres > .adm-courriels__q,
  .adm-courriels__filtres > select{grid-column:1 / -1}
  .adm-courriels__filtres > *{flex:none}
  .adm-courriels__date{flex-direction:column;align-items:stretch;gap:4px}
}
.adm-courriels__objet-m{overflow-wrap:anywhere}
/* Le type passe à la ligne plutôt que d'être coupé : « Hors site (connu par
   Resend) » est le plus long, deux lignes au plus. */
.adm-courriels__table td:nth-child(4) .adm-tronque{white-space:normal;line-height:1.35}
.adm-resend__detail{margin:8px 0 0;font-size:13px}

/* --- « Tester un e-mail » (journal des e-mails) ------------------------------
   La fenêtre commune (Modale) ; à l'intérieur, le choix du modèle, l'objet et
   l'aperçu dans son cadre isolé. Sur téléphone, le cadre raccourcit et les
   deux boutons du pied prennent chacun la largeur. */
.adm-test{display:grid;gap:12px}
.adm-test__choix{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--a-prune)}
.adm-test__infos{margin:0}
.adm-test__note{margin:0;font-size:13px}
/* La fenêtre s'élargit pour cette seule fenêtre : 640 px de cadre et ses
   marges. Les autres fenêtres de l'administration gardent leurs 560 px. */
.adm-modale__b:has(.adm-test){width:min(720px,100%);max-height:min(92dvh,900px)}
.adm-test__vues{display:inline-flex;gap:4px;padding:4px;justify-self:start;
  border:1px solid var(--a-ligne);border-radius:var(--a-r);background:var(--a-surface)}
.adm-test__vue{min-height:36px;padding:6px 12px;border:0;border-radius:4px;background:none;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--a-onglet-txt);cursor:pointer}
.adm-test__vue--actif{background:var(--a-blanc);color:var(--a-prune);box-shadow:0 1px 2px rgba(50,21,37,.12)}
.adm-test__vue:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px}
.adm-test__px{font-weight:400;color:var(--a-gris)}
.adm-test__cadre{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px;
  background:#F8F6FC;border:1px solid var(--a-ligne);border-radius:var(--a-r-lg)}
.adm-test__apercu{display:block;height:520px;margin:0 auto;border:0;border-radius:0;max-width:none}
.adm-test__pied{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
@media (max-width:760px){
  .adm-test__apercu{height:380px}
  .adm-test__pied > .adm-bouton{flex:1 1 100%}
}

/* =========================================================================
   DEMANDES DE PROJET DIGITAL — /admin/candidatures/projets/ (18/10/2026)
   Une carte par demande : qui, quoi, le besoin, puis le suivi.
   ========================================================================= */
.adm-projets{list-style:none;margin:var(--a-4, 16px) 0 0;padding:0;display:grid;gap:14px}
.adm-projet{display:grid;gap:10px}
.adm-projet--neuve{border-color:rgba(201,45,120,.35)}
.adm-projet__tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.adm-projet__t{margin:0;font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.adm-projet__type{font-weight:500;color:var(--a-framboise, #951753)}
.adm-projet__meta{margin:0;font-size:13px;color:#7A6670}
.adm-projet__besoin{
  margin:0;padding:12px 14px;border-radius:10px;white-space:pre-wrap;
  font-size:14px;line-height:1.6;background:#FDF6FA;border:1px solid #F3E2EB;
}
.adm-projet__suivi{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px 14px;align-items:start}
.adm-projet__l{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:#5F5058}
.adm-projet__actions{grid-column:1 / -1;display:flex;align-items:center;gap:12px}
@media (max-width:700px){.adm-projet__suivi{grid-template-columns:minmax(0,1fr)}}

/* --- La mention sous le bouton de connexion recruteur (21/10/2026) -------- */
.rec-porte__mention{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--a-gris,#6E646B)}
.rec-porte__mention a{color:var(--a-framboise,#C32371);text-decoration:underline;text-underline-offset:2px}

/* =========================================================================
   CANDIDATURES — indicateurs, filtres, états (22/10/2026)
   Les composants de toujours : cartes blanches à filet nacré, prune pour le
   texte, rose pâle pour l'état choisi. Aucune nouvelle teinte.
   ========================================================================= */
.adm-indics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.adm-indic{
  display:flex;align-items:baseline;gap:10px;padding:12px 16px;
  background:var(--a-surface);border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
  color:var(--a-prune);text-decoration:none;box-shadow:var(--a-ombre-carte);
  transition:border-color var(--a-t),background var(--a-t);
}
.adm-indic__n{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1}
.adm-indic__l{font-size:13.5px;color:var(--a-gris)}
.adm-indic--actif{background:var(--a-rose-pale);border-color:var(--a-accent)}
.adm-indic--alerte .adm-indic__n{color:var(--a-rouge)}
@media (hover:hover){.adm-indic:hover{border-color:var(--a-ligne-forte);background:var(--a-rose-pale)}}
.adm-indic:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px}

.adm-filtres{
  display:grid;gap:10px 12px;align-items:end;margin:0 0 16px;padding:14px 16px;
  grid-template-columns:minmax(260px,2.2fr) repeat(4,minmax(130px,1fr));
  background:var(--a-surface);border:1px solid var(--a-ligne);border-radius:var(--a-r-lg);
}
.adm-filtres label{display:grid;gap:5px;min-width:0}
.adm-filtres__l{font-size:12px;font-weight:600;color:var(--a-gris)}
.adm-filtres .adm-champ{width:100%;min-width:0}
.adm-filtres__actions{display:flex;gap:8px;align-items:center;grid-column:1 / -2}
.adm-filtres__n{margin:0;justify-self:end;align-self:center}
@media (max-width:1180px){
  .adm-filtres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-filtres__q{grid-column:1 / -1}
  .adm-filtres__actions{grid-column:auto}
}
@media (max-width:560px){
  /* Trois indicateurs côte à côte, le chiffre au-dessus du mot : la liste
     reste visible sans défiler un écran entier. */
  .adm-indics{gap:6px}
  .adm-indic{flex-direction:column;align-items:flex-start;gap:4px;padding:9px 10px}
  .adm-indic__n{font-size:20px}
  .adm-indic__l{font-size:12px;line-height:1.25}
  .adm-filtres{padding:12px;gap:8px 10px}
  .adm-filtres__actions{grid-column:1 / -1}
  .adm-filtres__n{grid-column:1 / -1;justify-self:start}
}

.adm-etats{display:inline-flex;flex-wrap:wrap;gap:5px}
/* Une candidature non lue : le nom en gras, en plus du losange et du mot. */
.adm-titre--nonlu{font-weight:700}
.adm-apc__pdf{min-height:62vh}