/* =========================================================================
   MUSLIMA WORK — L'ESPACE RECRUTEUR
   Phase 1 : les jetons, la coquille, la navigation.
   Phase 2 : la grammaire des composants partagés.
   Phase 3 : la vue d'ensemble, première page recomposée.

   POURQUOI CETTE FEUILLE EXISTE

   L'espace recruteur n'en avait pas. Son layout chargeait admin.css et ses
   composants portaient des classes « adm-* » : une entreprise travaillait
   donc dans l'habillage d'un outil d'administration interne. De là venait
   tout le reste — les tableaux froids, les grands blocs cernés, la colonne
   de navigation massive, l'absence de rythme.

   Le comptage a décidé de la méthode : sur les 117 classes « adm-* »
   employées par l'espace recruteur, 59 sont partagées avec l'administration.
   Une règle sur deux. Retoucher admin.css aurait donc changé une interface
   validée en tentant d'en réparer une autre.

   D'où cette feuille, et une règle sans exception : tout ce qui est propre à
   l'espace recruteur s'appelle « esp-* » et vit ici. admin.css n'est pas
   touchée, pas même d'un caractère.

   CE QUE CETTE FEUILLE NE FAIT PAS

   Elle ne recopie pas 4 840 lignes. Elle écrit une GRAMMAIRE — un bouton,
   un champ, une étiquette, une surface — et les pages viennent s'y ranger.
   Pendant la transition, le CONTENU des pages non encore migrées garde ses
   classes « adm-* » et continue d'être habillé par admin.css.

   La hiérarchie ne vient pas des bordures. Sur les cinq niveaux de surface
   du chapitre 10, quatre n'en ont pas : c'est l'espace, le rythme et la
   typographie qui structurent. L'interface d'avant cernait tout, et une page
   faite de rectangles cernés n'a plus de hiérarchie du tout.

   Un seul élément porte volontairement les deux familles de classes :
   l'enveloppe de page. « adm-page » y reste tant que le contenu est en
   « adm-* », parce qu'une vingtaine de règles d'admin.css règlent depuis
   elle la mesure des paragraphes et des aides. La règle « esp-page », plus
   tardive dans la cascade et de même poids, impose la nouvelle largeur sans
   un seul « !important ». Cette double classe part avec la dernière page
   migrée.

   AUCUN « !important » DANS CE FICHIER. S'il en apparaît un, c'est que deux
   systèmes se disputent un élément — et c'est le signe qu'il faut finir la
   migration de cet élément, pas ajouter un poids.

   PORTÉE

   Tous les sélecteurs sont préfixés « esp- » et les jetons sont posés sur
   « .esp », la classe du <body> de l'espace recruteur — jamais sur « :root ».
   Cette feuille ne peut donc rien changer au site public ni à
   l'administration, même si elle y était chargée par erreur.

   Sommaire
     0. Les jetons
     1. La coquille
     2. La barre latérale
     3. L'en-tête mobile et le tiroir
     5. Les boutons et les liens d'action
     6. Les champs
     7. Les cases à cocher et les boutons radio
     8. Les étiquettes de statut
     9. Les alertes et les messages
    10. Les surfaces
    11. Les lignes interactives
    12. Le menu d'actions
    13. Les modales
    14. Accordéon, toast, état vide, squelette
    15. La vue d'ensemble
    99. Mouvement réduit
   ========================================================================= */

/* =========================================================================
   0. LES JETONS

   Posés sur « .esp » et non sur « :root » : c'est ce qui garantit qu'ils ne
   peuvent pas fuir. Les valeurs de couleur sont celles de la marque, écrites
   en clair plutôt qu'empruntées à « --a-* » — emprunter aurait recréé le
   lien qu'on vient de couper, et un ajustement de l'administration aurait
   déteint ici.
   ========================================================================= */
.esp{
  /* --- Le prune, du plus profond au plus clair ------------------------- */
  --esp-prune:#321525;           /* le texte, et le fond de la navigation */
  --esp-prune-2:#45122F;
  --esp-prune-3:#5A1339;
  --esp-bordeaux:#68153D;
  --esp-framboise:#951753;
  --esp-accent:#C92D78;

  /* --- Les roses, tous très pâles -------------------------------------- */
  --esp-rose:#F8E7EF;
  --esp-rose-pale:#FDF4F8;
  --esp-rose-voile:#FEFAFC;

  /* --- Les fonds : ivoire chaud, blanc cassé --------------------------- */
  --esp-fond:#FDFAF8;            /* le sol de l'espace */
  --esp-surface:#FFFCFD;         /* une carte posée dessus */
  --esp-ivoire:var(--mw-avant-fond);    /* mise en avant (teintes.css) */
  --esp-blanc:#FFFFFF;

  /* --- Les gris, tous teintés de prune : aucun gris neutre ------------- */
  --esp-encre:#321525;
  --esp-encre-2:#5F5058;         /* texte secondaire, contraste 7:1 sur ivoire */
  --esp-encre-3:#7C6873;         /* mentions, jamais un texte à lire */
  --esp-ligne:#F0E7EC;           /* le filet courant */
  --esp-ligne-2:#E4D7DE;         /* un filet qui doit se voir */

  /* --- Les états. Le vert ne sert QU'aux validations. ------------------ */
  --esp-vert:#1E6B41;   --esp-vert-fond:#E9F4ED;  --esp-vert-ligne:#C9E4D4;
  --esp-ambre:#875614;  --esp-ambre-fond:#FCF2DE; --esp-ambre-ligne:#EEDCB6;
  --esp-bleu:#1F4C8F;   --esp-bleu-fond:#E6EEFB;  --esp-bleu-ligne:#CBDCF4;
  --esp-rouge:#8A1B33;  --esp-rouge-fond:#FDECEF; --esp-rouge-ligne:#F3CFD7;
  --esp-neutre:#6B5560; --esp-neutre-fond:#F4EFF2;--esp-neutre-ligne:#E4D7DE;

  /* --- L'échelle d'espacement, base 4 ----------------------------------
     Une seule suite, et des noms d'usage en dessous. Les noms d'usage sont
     ce qu'on écrit dans les règles : « l'air sous un titre » se relit,
     « 10px » ne se relit pas. */
  --esp-1:4px;   --esp-2:8px;   --esp-3:12px;  --esp-4:16px;
  --esp-5:20px;  --esp-6:24px;  --esp-7:32px;  --esp-8:40px;
  --esp-9:48px;  --esp-10:64px;

  --esp-surtitre-titre:8px;      /* entre un surtitre et son titre */
  --esp-titre-intro:12px;        /* entre un titre et son introduction */
  --esp-tete-contenu:32px;       /* entre l'en-tête d'une page et la suite */
  --esp-section:48px;            /* entre deux sections principales */
  --esp-lies:16px;               /* entre deux éléments d'un même groupe */
  --esp-carte:28px;              /* rembourrage d'une carte, grand écran */
  --esp-carte-mobile:20px;

  /* --- Les mesures des contrôles --------------------------------------- */
  --esp-champ-h:48px;            /* hauteur confortable d'un champ */
  --esp-bouton-h:44px;           /* jamais moins : c'est la taille d'un doigt */
  --esp-cible:44px;              /* toute cible tactile */

  /* --- Les rayons. Rien de capsulaire, rien d'excessif. ----------------- */
  --esp-r-xs:4px;
  --esp-r:8px;                   /* champs et boutons */
  --esp-r-lg:12px;               /* cartes et panneaux */

  /* --- Les largeurs ----------------------------------------------------
     La colonne principale ne s'étire plus jusqu'à 1 560 px. Trois mesures,
     selon ce qu'on fait sur la page : une liste a besoin de largeur, un
     formulaire n'en a pas besoin, un texte y perd. La bascule est décidée
     par lib/recruteur/navigation.ts, d'après le chemin.

     « --a-max » et « --a-menu » ne sont pas touchés : ils appartiennent à
     l'administration. */
  --esp-max:1360px;              /* la mesure de référence */
  --esp-max-liste:1360px;        /* tableaux, listes, tableau de bord */
  --esp-max-lecture:1040px;      /* une fiche, un dossier, l'aide */
  --esp-max-form:860px;          /* un formulaire ne s'étire pas */
  --esp-lecture:68ch;            /* la mesure d'un paragraphe */

  --esp-menu:248px;              /* la barre latérale */
  --esp-gout:clamp(16px,2.6vw,48px);   /* la gouttière du contenu */

  /* --- Le mouvement. Court, et jamais élastique. ------------------------ */
  --esp-t:180ms cubic-bezier(.22,.68,.28,1);
  --esp-t-long:320ms cubic-bezier(.16,1,.3,1);

  /* --- Les ombres : diluées, teintées de prune, jamais grises ---------- */
  --esp-ombre:0 1px 2px rgba(50,21,37,.03),0 12px 28px -24px rgba(70,20,50,.24);
  --esp-ombre-haute:0 1px 2px rgba(50,21,37,.04),0 20px 44px -30px rgba(70,20,50,.30);

  /* La zone que les éléments flottants doivent laisser libre en bas. */
  --esp-garde-basse:88px;
}

/* Le sol de l'espace. Un ivoire chaud plutôt qu'un blanc : les surfaces
   posées dessus se détachent alors sans qu'on ait à les cerner. */
body.esp{
  margin:0;
  background:var(--esp-fond);
  color:var(--esp-encre);
}

/* Un anneau de focus unique pour tout l'espace, visible sur ivoire comme sur
   prune. Il n'est jamais retiré : il est déplacé quand il gêne. */
.esp :focus-visible{
  outline:2px solid var(--esp-accent);
  outline-offset:2px;
  border-radius:var(--esp-r-xs);
}

/* --- REPRISE DE SPÉCIFICITÉ, le temps de la transition -------------------
   admin.css pose « .adm a { color: inherit } ». Ce sélecteur vaut (0,1,1) :
   une classe ET un élément. Une classe seule — « .esp-lien » — vaut (0,1,0)
   et PERD, quelle que soit la place des feuilles dans la cascade : la
   spécificité passe avant l'ordre.

   Le <body> porte les deux familles tant que des pages ne sont pas migrées,
   donc « .adm a » s'applique ici. Les règles de couleur portées par un lien
   sont donc écrites « .esp .esp-lien » — (0,2,0), deux classes, qui l'emporte
   sans un seul « !important ».

   Ce préfixe part avec la classe « adm » du <body>, à la fin du chantier.
   Il n'est pas une habitude à prendre : c'est une dette datée.
   ------------------------------------------------------------------------ */

/* =========================================================================
   1. LA COQUILLE
   Une grille à deux colonnes au-dessus de 860 px, une seule en dessous.
   Le seuil est celui d'avant : le changer aurait désaccordé le composant,
   qui écoute la même valeur en JavaScript.
   ========================================================================= */
.esp-coquille{
  display:grid;
  grid-template-columns:var(--esp-menu) minmax(0,1fr);
  min-height:100dvh;
}

/* La colonne de droite : l'en-tête mobile s'il existe, puis le contenu. */
.esp-colonne{min-width:0;display:flex;flex-direction:column}

.esp-contenu{
  min-width:0;
  /* La gouttière, pas une marge de composition : de 16 px sur un téléphone
     à 48 px sur un grand écran. Le bas réserve la garde basse, pour qu'aucune
     barre flottante ne puisse recouvrir la dernière ligne d'une page. */
  padding:var(--esp-gout) var(--esp-gout) var(--esp-garde-basse);
  padding-right:max(var(--esp-gout),env(safe-area-inset-right));
  padding-left:max(var(--esp-gout),env(safe-area-inset-left));
}

/* L'enveloppe de page. « minmax(0,1fr) » et non la piste « auto » : une
   grille à une colonne se dimensionne sinon sur son contenu le plus large —
   une adresse e-mail, un intitulé sans espace — et entraîne toute la page
   avec elle. */
/* La page est un CONTENEUR DE REQUÊTE. Les blocs qui s'y trouvent se
   règlent sur la largeur dont ils disposent réellement, et non sur celle de
   l'écran — deux choses très différentes ici, puisque la barre latérale en
   prend 248 px au-dessus de 860 px.

   Le défaut que cela corrige : à 1024 px, l'écran est large mais le contenu
   ne fait que ~730 px, et le tableau à cinq colonnes s'y écrasait — chaque
   cellule sur deux lignes, les actions empilées. Un seuil en « media »
   n'aurait pas pu le voir. */
.esp-page{
  container-type:inline-size;
  container-name:page;
  width:100%;max-width:var(--esp-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--esp-6);
}
/* Trois mesures, selon ce qu'on fait sur la page. */
.esp-page--liste{max-width:var(--esp-max-liste)}
.esp-page--lecture{max-width:var(--esp-max-lecture)}
.esp-page--form{max-width:var(--esp-max-form)}

/* =========================================================================
   2. LA BARRE LATÉRALE

   Deux cent quarante-huit pixels, un prune profond à peine nuancé, et de
   l'air. Ce qui la faisait paraître massive n'était pas sa largeur : c'était
   l'absence de respiration entre ses blocs, et l'état actif dessiné comme un
   grand cadre clair posé sur le prune.

   L'état actif est maintenant fait de trois riens qui suffisent : une
   surface translucide très basse, un losange rose sur l'arête gauche — le
   signe de la marque — et le libellé qui passe en blanc franc.
   ========================================================================= */
.esp-menu{
  position:sticky;top:0;align-self:start;
  display:flex;flex-direction:column;
  height:100dvh;
  /* Le rembourrage bas est celui de la garde : le bloc du compte ne peut pas
     se retrouver collé à l'arête, ni passer sous quoi que ce soit. */
  padding:var(--esp-6) var(--esp-4) var(--esp-5);
  /* Un dégradé vertical franc mais ton sur ton, et une lumière diffuse en
     haut. La colonne était trop uniforme : un aplat presque plat, où rien ne
     distinguait le haut du bas. Ici le prune s'éclaircit vers le sommet,
     s'assombrit vers le pied, et la lueur rose tient l'angle — de la
     profondeur par la lumière, pas par une bordure. */
  background:
    radial-gradient(140% 38% at 8% 0%,rgba(240,168,204,.22) 0%,rgba(240,168,204,0) 62%),
    linear-gradient(178deg,#57153C 0%,#43112D 38%,#350D22 72%,#2B0A1B 100%);
  color:#fff;
  border-right:1px solid rgba(255,226,240,.08);
  /* Sur un écran bas, la colonne défile plutôt que de rogner son pied.
     « overscroll-behavior » empêche le geste de se propager à la page. */
  overflow-y:auto;overscroll-behavior:contain;
}
.esp-menu::-webkit-scrollbar{width:6px}
.esp-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}

/* L'anneau de focus, en rose pâle : l'accent framboise disparaîtrait sur le
   prune. */
.esp-menu :focus-visible{outline:2px solid #FFC9DF;outline-offset:2px}

/* --- Le logo -------------------------------------------------------------
   Posé, sans liseré ni halo : ce qui le détache est l'air autour de lui. */
.esp .esp-marque{
  display:inline-flex;align-items:center;gap:var(--esp-2);
  padding:0 var(--esp-2);
  margin-bottom:var(--esp-7);
  color:#fff;text-decoration:none;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
}
.esp-marque img{display:block;border-radius:var(--esp-r-xs)}

/* --- L'action principale -------------------------------------------------
   Une entreprise vient ici pour publier. Le bouton est donc dans la barre,
   présent sur tous les écrans de l'espace, et il reste atteignable dans le
   tiroir sur téléphone.

   Il avait été affaibli jusqu'à une surface translucide, et il disparaissait
   dans le prune. Il reprend le DÉGRADÉ OFFICIEL du site, celui de
   « .btn--primary » : c'est l'action première de l'espace, elle doit se voir
   d'un coup d'œil. Un halo framboise très bas le décolle du fond sans en
   faire un néon.

   Le survol glisse la rampe et soulève d'UN pixel, jamais deux. */
.esp .esp-menu__publier{
  display:flex;align-items:center;justify-content:center;gap:var(--esp-2);
  min-height:var(--esp-bouton-h);
  margin-bottom:var(--esp-7);
  padding:0 var(--esp-4);
  border:1px solid transparent;
  border-radius:var(--esp-r);
  color:#fff;text-decoration:none;
  font-size:14.5px;font-weight:600;letter-spacing:-.008em;
  background-image:linear-gradient(105deg,#7C1648 0%,#951753 30%,#B22065 66%,#C92D78 100%);
  background-size:180% 100%;background-position:100% 0;
  background-origin:border-box;background-color:#951753;
  box-shadow:0 6px 18px -8px rgba(201,45,120,.62);
  transition:background-position 380ms cubic-bezier(.22,.68,.28,1),
             transform var(--esp-t),box-shadow var(--esp-t);
}
.esp .esp-menu__publier:hover{
  background-position:0% 0;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(201,45,120,.74);
}
.esp .esp-menu__publier:active{transform:none}
.esp-menu__publier svg{flex:none}

/* --- La navigation ------------------------------------------------------- */
.esp-menu__section{
  margin:0 0 var(--esp-2);padding:0 var(--esp-3);
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,236,246,.46);
}

.esp-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}

.esp .esp-nav__l{
  position:relative;
  display:flex;align-items:center;gap:var(--esp-3);
  min-height:var(--esp-cible);padding:0 var(--esp-3);
  border-radius:var(--esp-r);
  font-size:14.5px;font-weight:500;letter-spacing:-.006em;
  color:rgba(255,255,255,.74);text-decoration:none;
  transition:background var(--esp-t),color var(--esp-t);
}
.esp-nav__l svg{flex:none;opacity:.86;transition:opacity var(--esp-t)}
.esp .esp-nav__l:hover{background:rgba(255,255,255,.06);color:#fff}
.esp .esp-nav__l:hover svg{opacity:1}

/* L'état actif : une surface très basse, le libellé en blanc franc, et le
   losange de la marque sur l'arête. Aucun cadre. */
.esp .esp-nav__l--actif{
  background:rgba(255,255,255,.10);
  color:#fff;font-weight:600;
}
.esp-nav__l--actif svg{opacity:1}
.esp .esp-nav__l--actif::before{
  content:"";position:absolute;left:-7px;top:50%;
  width:7px;height:7px;
  translate:0 -50%;rotate:45deg;border-radius:1.5px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6FA 60%,#FDEAF3 100%);
  border:1px solid rgba(233,150,190,.72);
  box-shadow:0 0 6px rgba(240,179,210,.44);
}

.esp-nav__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La pastille double le libellé, elle ne le remplace pas — d'où le texte
   « à consulter », lu par les lecteurs d'écran et masqué à l'œil. */
.esp-nav__n{
  flex:none;margin-left:auto;
  min-width:20px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:var(--esp-accent);color:#fff;
  font-size:11.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}

/* --- Le pied : le compte, le site public, la sortie ----------------------
   « margin-top:auto » le pousse en bas quand la place le permet, et le
   laisse suivre le flux quand elle manque — c'est ce qui, avec le défilement
   de la colonne, empêche le pied d'être rogné sur un écran bas. */
.esp-menu__bas{
  margin-top:auto;
  padding-top:var(--esp-5);
  border-top:1px solid rgba(255,226,240,.10);
  display:grid;gap:var(--esp-1);
}

.esp-compte{
  display:flex;align-items:center;gap:var(--esp-3);
  padding:var(--esp-2) var(--esp-3) var(--esp-4);
  min-width:0;
}
.esp-compte__ini{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:var(--esp-r);
  background:linear-gradient(135deg,var(--esp-framboise) 0%,var(--esp-accent) 100%);
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.esp-compte__txt{min-width:0;display:grid;gap:1px}
.esp-compte__q{
  font-size:13px;font-weight:600;color:rgba(255,255,255,.94);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* L'adresse tient sur une ligne, quoi qu'il arrive : coupée par des points
   de suspension plutôt qu'en débordant ou en cassant la colonne. L'attribut
   « title » rend l'adresse entière au survol. */
.esp-compte__mail{
  font-size:12px;color:rgba(255,236,246,.58);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Les deux liens de pied. Discrets par défaut — ce ne sont pas des actions
   de travail — et jamais plus hauts qu'une cible tactile. */
.esp .esp-menu__lien{
  display:flex;align-items:center;gap:var(--esp-3);
  width:100%;min-height:var(--esp-cible);padding:0 var(--esp-3);
  border:0;border-radius:var(--esp-r);background:none;
  font-family:inherit;font-size:13.5px;font-weight:500;
  color:rgba(255,236,246,.62);text-decoration:none;text-align:left;
  cursor:pointer;
  transition:background var(--esp-t),color var(--esp-t);
}
.esp-menu__lien svg{flex:none;opacity:.8}
.esp .esp-menu__lien:hover{background:rgba(255,255,255,.06);color:#fff}
.esp .esp-menu__lien:hover svg{opacity:1}
.esp-menu__bas form{margin:0}

/* =========================================================================
   3. L'EN-TÊTE MOBILE ET LE TIROIR
   Au-dessus de 860 px ils n'existent pas. En dessous, l'en-tête remplace
   ENTIÈREMENT la barre latérale : jamais les deux à la fois, pas de colonne
   résiduelle qui rognerait un téléphone.
   ========================================================================= */
.esp-tete{display:none}
.esp-voile{display:none}

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

  /* --- L'en-tête compact ------------------------------------------------ */
  .esp-tete{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;gap:var(--esp-3);
    min-height:56px;
    padding:var(--esp-2) max(var(--esp-4),env(safe-area-inset-right))
            var(--esp-2) max(var(--esp-4),env(safe-area-inset-left));
    background:rgba(253,250,248,.92);
    -webkit-backdrop-filter:blur(10px) saturate(118%);
    backdrop-filter:blur(10px) saturate(118%);
    border-bottom:1px solid var(--esp-ligne);
  }
  .esp-tete__b{
    flex:none;display:grid;place-items:center;
    width:var(--esp-cible);height:var(--esp-cible);
    margin-left:-10px;
    border:0;border-radius:var(--esp-r);background:none;
    color:var(--esp-prune);cursor:pointer;
    transition:background var(--esp-t);
  }
  .esp-tete__b:hover{background:var(--esp-rose-pale)}
  .esp-tete__marque{flex:none;display:inline-flex}
  .esp-tete__marque img{display:block;border-radius:var(--esp-r-xs)}
  .esp-tete__t{
    margin:0;min-width:0;
    font-size:15px;font-weight:600;letter-spacing:-.012em;
    color:var(--esp-encre);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* --- Le tiroir --------------------------------------------------------
     Il se SUPERPOSE, il ne pousse rien : la page reste où elle est, et le
     contenu ne descend pas sous le menu. */
  .esp-menu{
    position:fixed;inset:0 auto 0 0;z-index:60;
    width:min(300px,86vw);height:100dvh;
    padding-top:var(--esp-5);
    translate:-100% 0;
    transition:translate var(--esp-t-long);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  .esp-menu[data-ouvert="oui"]{
    translate:0 0;
    box-shadow:24px 0 60px -30px rgba(40,10,26,.55);
  }

  .esp-menu__fermer{
    position:absolute;top:var(--esp-3);right:var(--esp-3);
    display:grid;place-items:center;
    width:var(--esp-cible);height:var(--esp-cible);
    border:0;border-radius:var(--esp-r);
    background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
    transition:background var(--esp-t);
  }
  .esp-menu__fermer:hover{background:rgba(255,255,255,.16)}
  /* Le logo s'écarte de la croix. */
  .esp-menu .esp-marque{margin-right:52px}

  /* Le voile : un prune très transparent, et un flou modéré. On doit
     continuer de reconnaître la page qu'on quitte des yeux. */
  .esp-voile{
    position:fixed;inset:0;z-index:50;
    display:block;width:100%;height:100%;
    border:0;padding:0;
    background:rgba(46,18,32,.34);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    cursor:pointer;
  }

  .esp-contenu{padding-bottom:var(--esp-garde-basse)}
  .esp-page{gap:var(--esp-5)}
  /* Sur téléphone, les trois mesures ne veulent plus rien dire : c'est la
     largeur de l'écran qui décide. */
  .esp-page--liste,.esp-page--lecture,.esp-page--form{max-width:none}
}

/* =========================================================================
   5. LES BOUTONS ET LES LIENS D'ACTION

   Sept variantes, une seule mesure. Tout ce qui se clique fait au moins
   44 px de haut — la taille d'un doigt — et le dit dans « --esp-bouton-h ».

   La règle de sémantique n'est pas décorative : un changement de page est un
   lien, une action est un bouton. Les deux prennent les mêmes classes pour
   que rien ne pousse à choisir la mauvaise balise par souci d'apparence.
   ========================================================================= */
.esp .esp-b{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);
  min-height:var(--esp-bouton-h);
  padding:var(--esp-2) var(--esp-5);
  border:1px solid transparent;border-radius:var(--esp-r);
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.25;
  letter-spacing:-.008em;text-align:center;text-decoration:none;
  cursor:pointer;
  transition:background-color var(--esp-t),border-color var(--esp-t),
             color var(--esp-t),box-shadow var(--esp-t),transform var(--esp-t);
}
.esp-b svg{flex:none}
.esp .esp-b:disabled,.esp-b[aria-disabled="true"]{
  cursor:not-allowed;opacity:.55;
  /* Ni soulèvement ni ombre : un bouton éteint ne réagit pas. */
  transform:none;box-shadow:none;
}

/* --- Principal -----------------------------------------------------------
   Le dégradé officiel du site, celui de « .btn--primary ». Il est réservé à
   l'action principale d'un écran : deux dégradés côte à côte n'en font plus
   aucun. Le survol fait glisser la rampe vers le bordeaux et soulève d'un
   pixel — pas deux, et jamais de rebond. */
.esp .esp-b--1{
  color:#fff;
  background-image:linear-gradient(105deg,#68153D 0%,#7C1648 26%,#951753 52%,#B22065 76%,#C92D78 100%);
  background-size:180% 100%;background-position:100% 0;
  background-origin:border-box;
  background-color:#951753;      /* le repli, si le dégradé n'est pas peint */
  box-shadow:0 4px 14px -6px rgba(149,23,83,.34);
  transition:background-position 380ms cubic-bezier(.22,.68,.28,1),
             transform var(--esp-t),box-shadow var(--esp-t);
}
.esp .esp-b--1:hover:not(:disabled){
  background-position:0% 0;
  transform:translateY(-1px);
  box-shadow:0 8px 20px -8px rgba(178,32,101,.40);
}
.esp .esp-b--1:active:not(:disabled){transform:none}

/* --- Secondaire ----------------------------------------------------------
   Un contour sur ivoire. Elle accompagne la principale sans lui disputer le
   regard, et ne ressemble jamais au bouton gris d'un navigateur. */
.esp .esp-b--2{
  background:var(--esp-surface);
  border-color:var(--esp-ligne-2);
  color:var(--esp-encre);
}
.esp .esp-b--2:hover:not(:disabled){
  background:var(--esp-rose-pale);
  border-color:rgba(201,45,120,.34);
  color:var(--esp-framboise);
}

/* --- Discret -------------------------------------------------------------
   Ni fond ni contour au repos. Pour ce qui doit rester atteignable sans
   peser : « Annuler », « Tout voir », les actions d'une ligne. */
.esp .esp-b--3{
  background:none;border-color:transparent;color:var(--esp-encre-2);
  padding-inline:var(--esp-3);
}
.esp .esp-b--3:hover:not(:disabled){background:var(--esp-rose-pale);color:var(--esp-framboise)}

/* --- Danger --------------------------------------------------------------
   Contour rouge rosé, jamais un aplat : une action destructive doit se
   distinguer, pas crier. Le rouge plein est réservé à la confirmation, dans
   la modale qui la demande. */
.esp .esp-b--danger{
  background:var(--esp-surface);
  border-color:var(--esp-rouge-ligne);
  color:var(--esp-rouge);
}
.esp .esp-b--danger:hover:not(:disabled){
  background:var(--esp-rouge-fond);
  border-color:var(--esp-rouge);
}

/* --- Icône seule ---------------------------------------------------------
   Carrée, et jamais sans nom : « aria-label » ou un « sr-only » à
   l'intérieur. Une icône sans texte n'existe pas pour un lecteur d'écran. */
.esp .esp-b--ico{
  width:var(--esp-cible);min-width:var(--esp-cible);
  padding:0;
  background:var(--esp-surface);
  border-color:var(--esp-ligne-2);
  color:var(--esp-encre-2);
}
.esp .esp-b--ico:hover:not(:disabled){
  background:var(--esp-rose-pale);
  border-color:rgba(201,45,120,.34);
  color:var(--esp-framboise);
}

/* --- Tailles -------------------------------------------------------------
   Elles ne changent que le rembourrage et le corps ; la hauteur minimale
   reste celle d'une cible tactile, y compris pour « petit ». */
.esp-b--petit{padding-inline:var(--esp-3);font-size:13.5px}
.esp-b--large{min-height:52px;padding-inline:var(--esp-7);font-size:15.5px}
.esp-b--bloc{display:flex;width:100%}

/* --- Chargement ----------------------------------------------------------
   Le libellé RESTE. C'est ce qui empêche le bouton de changer de largeur au
   clic — un bouton qui rétrécit sous le doigt se rate. L'icône de tête cède
   sa place à un rond qui tourne, et la boîte ne bouge pas d'un pixel. */
.esp-b[data-charge="oui"]{pointer-events:none}
.esp-b[data-charge="oui"] .esp-b__ico{display:none}
.esp-b__attente{
  flex:none;width:16px;height:16px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;opacity:.7;
  animation:esp-tourne 700ms linear infinite;
}
@keyframes esp-tourne{to{rotate:360deg}}

/* --- Le lien d'action ----------------------------------------------------
   Un vrai lien, souligné à distance : dans une page dense, un lien qui ne se
   distingue que par sa couleur se rate. */
.esp .esp-lien{
  /* « inline-flex » et une hauteur minimale : un lien AUTONOME — « Compléter
     mon profil », « Voir mes 5 annonces » — est une cible, et une cible fait
     24 px au moins. La règle des cibles tactiles dispense les liens posés
     DANS une phrase ; ceux-là n'y sont pas, ils sont seuls sur leur ligne.

     Le flux en ligne est conservé : un « inline-flex » se place comme un
     mot, il ne casse pas le paragraphe qui l'entoure. */
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--esp-framboise);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(149,23,83,.32);
  transition:color var(--esp-t),text-decoration-color var(--esp-t);
}
.esp .esp-lien:hover{color:var(--esp-accent);text-decoration-color:currentColor}

/* =========================================================================
   6. LES CHAMPS

   Une base unique : 48 px de haut, le label au-dessus, l'aide dessous,
   l'erreur au plus près. La hauteur ne change JAMAIS d'un état à l'autre —
   c'est ce qui empêche la page de sauter quand une erreur paraît.
   ========================================================================= */
.esp-form{display:grid;gap:var(--esp-5)}
/* Deux colonnes seulement quand elles se justifient : deux données courtes
   et de même nature. Une donnée longue prend la ligne entière. */
.esp-form--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-5) var(--esp-5)}
.esp-form__pleine{grid-column:1/-1}

.esp-champ{display:grid;gap:var(--esp-2);min-width:0}

.esp-l{
  display:flex;align-items:baseline;gap:var(--esp-2);
  font-size:13.5px;font-weight:600;letter-spacing:-.004em;
  color:var(--esp-encre);
}
/* « facultatif » est une mention, pas une étiquette : même ligne, moins de
   poids, et jamais en majuscules. */
.esp-l__opt{font-weight:400;font-size:12.5px;color:var(--esp-encre-3)}
/* L'astérisque est décoratif : le nom accessible porte « requis » par
   « aria-required » sur le champ, pas par ce caractère. */
.esp-l__req{color:var(--esp-accent);font-weight:600}

.esp-i,
.esp-select,
.esp-zone{
  width:100%;min-width:0;
  min-height:var(--esp-champ-h);
  padding:var(--esp-2) var(--esp-4);
  border:1px solid var(--esp-ligne-2);border-radius:var(--esp-r);
  background:var(--esp-blanc);
  font-family:inherit;font-size:15px;line-height:1.5;
  color:var(--esp-encre);
  transition:border-color var(--esp-t),box-shadow var(--esp-t),background-color var(--esp-t);
}
.esp-zone{min-height:120px;padding-top:var(--esp-3);resize:vertical}
.esp-i::placeholder,.esp-zone::placeholder{color:var(--esp-encre-3)}

/* Le focus : un filet framboise et un halo très bas. Pas d'« outline » ici —
   il doublerait le halo — mais le clavier garde le sien, plus bas. */
.esp-i:focus,.esp-select:focus,.esp-zone:focus{
  outline:none;
  border-color:var(--esp-accent);
  box-shadow:0 0 0 3px rgba(201,45,120,.14);
}
.esp-i:focus-visible,.esp-select:focus-visible,.esp-zone:focus-visible{outline:none}

.esp-i:disabled,.esp-select:disabled,.esp-zone:disabled{
  background:var(--esp-neutre-fond);
  color:var(--esp-encre-2);
  cursor:not-allowed;
}

/* Le remplissage automatique du navigateur. Sans cela, Chrome pose un fond
   bleu pâle qui n'appartient à aucune charte. L'ombre intérieure est le seul
   moyen de le recouvrir — « background-color » est ignoré. */
.esp-i:-webkit-autofill,
.esp-i:-webkit-autofill:hover,
.esp-i:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--esp-encre);
  -webkit-box-shadow:0 0 0 40px var(--esp-blanc) inset;
  caret-color:var(--esp-encre);
}

/* La liste déroulante : le chevron est dessiné en fond, la flèche native
   retirée. Le rembourrage droit lui réserve sa place. */
.esp-select{
  appearance:none;
  padding-right:var(--esp-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C6873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--esp-4) center;
  cursor:pointer;
}

/* L'aide vit sous le champ, et se lit : elle n'est pas une note de bas de
   page. Sa mesure est limitée — une aide de douze mots sur 860 px se lit
   mal. */
.esp-aide{
  margin:0;font-size:13px;line-height:1.55;
  color:var(--esp-encre-2);max-width:62ch;
}

/* L'erreur est au plus près, en rouge rosé, et elle est ANNONCÉE : le champ
   porte « aria-describedby » vers elle, et « aria-invalid ». La couleur ne
   porte rien seule. */
.esp-erreur{
  display:flex;align-items:flex-start;gap:var(--esp-2);
  margin:0;font-size:13px;line-height:1.5;font-weight:500;
  color:var(--esp-rouge);
}
.esp-erreur::before{
  content:"";flex:none;
  width:6px;height:6px;margin-top:6px;
  rotate:45deg;border-radius:1px;
  background:var(--esp-rouge);
}
.esp-champ[data-erreur="oui"] .esp-i,
.esp-champ[data-erreur="oui"] .esp-select,
.esp-champ[data-erreur="oui"] .esp-zone{border-color:var(--esp-rouge)}
.esp-champ[data-erreur="oui"] .esp-i:focus{box-shadow:0 0 0 3px rgba(138,27,51,.14)}

/* =========================================================================
   7. LES CASES À COCHER ET LES BOUTONS RADIO

   De VRAIS contrôles. L'input reste dans le document, reste focalisable,
   reste lu par un lecteur d'écran : il est seulement rendu transparent et
   posé sur la marque qu'on dessine à sa place. Aucune fausse case en
   « div », aucun contrôle natif minuscule isolé.

   C'est le label qui porte la cible : toute la ligne se clique, et elle fait
   au moins 44 px de haut. C'est ce qui règle les trois cibles sous 24 px
   mesurées dans le formulaire de publication.
   ========================================================================= */
.esp-choix{display:grid;gap:var(--esp-2)}

.esp-o{
  position:relative;
  display:flex;align-items:flex-start;gap:var(--esp-3);
  min-height:var(--esp-cible);
  padding:var(--esp-3);
  border:1px solid var(--esp-ligne);border-radius:var(--esp-r);
  background:var(--esp-surface);
  cursor:pointer;
  transition:border-color var(--esp-t),background-color var(--esp-t);
}
.esp-o:hover{border-color:rgba(201,45,120,.30);background:var(--esp-rose-voile)}

/* L'input : présent, focalisable, invisible. « opacity:0 » et non
   « display:none » — un contrôle retiré du rendu sort aussi du parcours
   clavier et du lecteur d'écran. */
.esp-o__i{
  position:absolute;width:1px;height:1px;
  margin:0;padding:0;border:0;opacity:0;
  pointer-events:none;
}

/* La marque dessinée. Le carré pour une case, le rond pour un radio. */
.esp-o__m{
  flex:none;position:relative;
  width:20px;height:20px;margin-top:1px;
  border:1.5px solid var(--esp-ligne-2);border-radius:var(--esp-r-xs);
  background:var(--esp-blanc);
  transition:border-color var(--esp-t),background-color var(--esp-t);
}
.esp-o--radio .esp-o__m{border-radius:50%}

/* Cochée : le dégradé de marque et le signe en blanc. Le signe est dessiné
   en CSS — une coche pour la case, un point pour le radio. */
.esp-o__i:checked + .esp-o__m{
  border-color:transparent;
  background:linear-gradient(135deg,var(--esp-framboise) 0%,var(--esp-accent) 100%);
}
.esp-o__i:checked + .esp-o__m::after{
  content:"";position:absolute;
  left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;
  rotate:45deg;
}
.esp-o--radio .esp-o__i:checked + .esp-o__m::after{
  left:50%;top:50%;width:7px;height:7px;
  translate:-50% -50%;rotate:0deg;
  border:0;border-radius:50%;background:#fff;
}

/* L'option choisie se voit aussi par son cadre : la couleur de la marque ne
   suffit pas à qui ne la distingue pas. */
.esp-o:has(.esp-o__i:checked){
  border-color:var(--esp-accent);
  background:var(--esp-rose-pale);
}

/* Le focus clavier est porté par la ligne entière, pas par l'input
   invisible : c'est la ligne qu'on voit. */
.esp-o:has(.esp-o__i:focus-visible){
  outline:2px solid var(--esp-accent);outline-offset:2px;
}

.esp-o__t{min-width:0;display:grid;gap:2px}
.esp-o__q{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--esp-encre)}
.esp-o__p{margin:0;font-size:13px;line-height:1.5;color:var(--esp-encre-2)}

/* =========================================================================
   8. LES ÉTIQUETTES DE STATUT

   Une seule forme pour tous les états, d'annonce comme de candidature : même
   hauteur, même rembourrage, même corps, même rayon, même losange. Seule la
   couleur change, et elle n'ajoute rien au mot — le libellé est toujours
   écrit, et c'est lui qui fait foi.
   ========================================================================= */
.esp-etiq{
  display:inline-flex;align-items:center;gap:var(--esp-2);
  height:24px;padding:0 var(--esp-2) 0 7px;
  border:1px solid transparent;border-radius:var(--esp-r-xs);
  font-size:12px;font-weight:600;line-height:1;letter-spacing:.002em;
  white-space:nowrap;
}
/* Le losange de la marque, à la taille d'une ponctuation. */
.esp-etiq::before{
  content:"";flex:none;
  width:6px;height:6px;rotate:45deg;border-radius:1px;
  background:currentColor;opacity:.85;
}
.esp-etiq--grande{height:28px;padding:0 var(--esp-3) 0 var(--esp-2);font-size:13px}

.esp-etiq--vert  {color:var(--esp-vert);  background:var(--esp-vert-fond);  border-color:var(--esp-vert-ligne)}
.esp-etiq--ambre {color:var(--esp-ambre); background:var(--esp-ambre-fond); border-color:var(--esp-ambre-ligne)}
.esp-etiq--bleu  {color:var(--esp-bleu);  background:var(--esp-bleu-fond);  border-color:var(--esp-bleu-ligne)}
.esp-etiq--rouge {color:var(--esp-rouge); background:var(--esp-rouge-fond); border-color:var(--esp-rouge-ligne)}
.esp-etiq--rose  {color:var(--esp-framboise);background:var(--esp-rose-pale);border-color:rgba(201,45,120,.22)}
.esp-etiq--prune {color:var(--esp-prune);background:#F3ECF1;border-color:#E4D7DE}
.esp-etiq--neutre{color:var(--esp-neutre);background:var(--esp-neutre-fond);border-color:var(--esp-neutre-ligne)}

/* La phrase qui accompagne l'étiquette : un badge dit ce qui se passe, il ne
   dit pas ce qu'on attend de vous. */
.esp-etat-phrase{
  margin:var(--esp-2) 0 0;
  font-size:13.5px;line-height:1.6;color:var(--esp-encre-2);
  max-width:var(--esp-lecture);
}

/* =========================================================================
   9. LES ALERTES ET LES MESSAGES

   Pas de grands blocs colorés. Un fond très pâle, un filet d'accent à
   gauche, et le texte. Une alerte doit s'apercevoir sans repeindre l'écran.
   ========================================================================= */
.esp-note{
  display:flex;align-items:flex-start;gap:var(--esp-3);
  padding:var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5);
  border:1px solid var(--esp-ligne);
  border-left:3px solid var(--esp-encre-3);
  border-radius:var(--esp-r);
  background:var(--esp-surface);
  font-size:14px;line-height:1.6;color:var(--esp-encre-2);
}
.esp-note svg{flex:none;margin-top:2px}
.esp-note p{margin:0}
.esp-note p + p{margin-top:var(--esp-2)}
.esp-note strong{color:var(--esp-encre);font-weight:600}

.esp-note--info   {border-left-color:var(--esp-bleu);  background:var(--esp-bleu-fond);  color:#1B3B6B}
.esp-note--succes {border-left-color:var(--esp-vert);  background:var(--esp-vert-fond);  color:#14512F}
.esp-note--attente{border-left-color:var(--esp-ambre); background:var(--esp-ambre-fond); color:#6B4410}
.esp-note--erreur {border-left-color:var(--esp-rouge); background:var(--esp-rouge-fond); color:#6E1428}

/* =========================================================================
   10. LES SURFACES

   Cinq niveaux, et quatre d'entre eux n'ont PAS de bordure. C'est le point :
   l'interface d'avant cernait tout, et une page faite de rectangles cernés
   n'a plus de hiérarchie. Ici, la hiérarchie vient des proportions, du
   rythme et de la typographie ; la bordure est le dernier recours.
   ========================================================================= */

/* 1 · nue — le contenu posé sur le sol, séparé par l'espace seul. */
.esp-nu{display:grid;gap:var(--esp-4)}

/* 2 · séparée — un filet entre les éléments, aucun cadre autour. */
.esp-sep{display:grid}
.esp-sep > * + *{
  padding-top:var(--esp-5);margin-top:var(--esp-5);
  border-top:1px solid var(--esp-ligne);
}

/* 3 · teintée — un fond à peine posé, sans filet. Pour un aparté. */
.esp-teinte{
  padding:var(--esp-carte);
  border-radius:var(--esp-r-lg);
  background:var(--esp-rose-voile);
}

/* 4 · carte — une vraie surface, avec son ombre très diluée et un filet
       presque invisible. À réserver à ce qui est un objet : une annonce, un
       dossier. Pas à chaque paragraphe. */
.esp-carte{
  padding:var(--esp-carte);
  border:1px solid var(--esp-ligne);border-radius:var(--esp-r-lg);
  background:var(--esp-surface);
  box-shadow:var(--esp-ombre);
}

/* 5 · carte interactive — la même, qui répond. Le soulèvement est d'un
       pixel : au-delà, une liste de cartes se met à flotter. */
.esp .esp-carte--clic{
  display:block;text-decoration:none;color:inherit;
  transition:border-color var(--esp-t),box-shadow var(--esp-t),transform var(--esp-t);
}
.esp .esp-carte--clic:hover{
  border-color:rgba(201,45,120,.26);
  box-shadow:var(--esp-ombre-haute);
  transform:translateY(-1px);
}

/* Le bloc d'information important : prune profond, texte ivoire. Un par
   écran au maximum — c'est sa rareté qui lui donne son poids. */
.esp-bloc-fort{
  padding:var(--esp-carte);
  border-radius:var(--esp-r-lg);
  background:
    radial-gradient(120% 60% at 0% 0%,rgba(233,150,190,.16) 0%,rgba(233,150,190,0) 62%),
    linear-gradient(140deg,#4A1230 0%,#3C0F27 58%,#310C20 100%);
  color:#FFFBFD;
}

/* Les titres de surface. Un seul corps, une seule graisse, partout. */
.esp-t2{
  margin:0;font-size:17px;font-weight:600;line-height:1.35;
  letter-spacing:-.014em;color:var(--esp-encre);
}
.esp-t3{
  margin:0;font-size:14.5px;font-weight:600;line-height:1.4;
  letter-spacing:-.008em;color:var(--esp-encre);
}
.esp-p{
  margin:0;font-size:14.5px;line-height:1.65;color:var(--esp-encre-2);
  max-width:var(--esp-lecture);
}
.esp-mention{
  margin:0;font-size:12.5px;line-height:1.5;color:var(--esp-encre-3);
}

/* =========================================================================
   11. LES LIGNES INTERACTIVES

   Une liste n'est pas un tableau administratif. Les lignes ont de l'air, le
   survol est doux, et rien n'y est concaténé : chaque donnée a sa place et
   son alignement.

   La ligne entière n'est cliquable que lorsqu'elle ne contient AUCUNE autre
   action — sinon l'un des deux clics gagnerait sans qu'on sache lequel.
   ========================================================================= */
.esp-lignes{list-style:none;margin:0;padding:0;display:grid}
.esp-ligne{
  display:grid;align-items:center;gap:var(--esp-4);
  padding:var(--esp-4) var(--esp-2);
  border-top:1px solid var(--esp-ligne);
  transition:background-color var(--esp-t);
}
.esp-lignes > :first-child .esp-ligne{border-top:0}
.esp-ligne:hover{background:var(--esp-rose-voile)}
/* La ligne non lue : un accent framboise sur l'arête, et rien d'autre. */
.esp-ligne--neuve{position:relative}
.esp-ligne--neuve::before{
  content:"";position:absolute;left:-2px;top:50%;
  width:6px;height:6px;translate:0 -50%;rotate:45deg;border-radius:1px;
  background:var(--esp-accent);
}
.esp-ligne__t{
  font-size:15px;font-weight:600;line-height:1.35;
  letter-spacing:-.01em;color:var(--esp-encre);
}
.esp-ligne__s{font-size:13px;line-height:1.5;color:var(--esp-encre-2)}

/* =========================================================================
   12. LE MENU D'ACTIONS

   Le comportement vient de components/partages/MenuActions.tsx, qui accepte
   désormais un préfixe de classes. C'est un partage voulu : ce composant
   sait déjà se fermer sur Échap et au clic à côté, rendre le focus au
   bouton, se parcourir aux flèches, se porter dans « document.body » pour ne
   pas être rogné par le défilement d'un tableau, et devenir une feuille qui
   monte du bas sous 640 px. Le réécrire aurait fait un second menu, moins
   éprouvé — et l'administration garde exactement le sien, le préfixe valant
   « adm » par défaut.

   Ce chapitre n'habille donc QUE ce que le composant dessine. La structure
   des classes lui est imposée ; les valeurs sont celles de l'espace.

   Le panneau est en « position:fixed » et placé par le composant à partir du
   rectangle du bouton : aucune règle ici ne doit lui donner de position, ou
   elle se battrait avec le calcul.
   ========================================================================= */
.esp-menuact{position:relative;display:inline-flex}

.esp-menuact__b{
  display:grid;place-items:center;
  width:var(--esp-cible);height:var(--esp-cible);
  border:1px solid var(--esp-ligne-2);border-radius:var(--esp-r);
  background:var(--esp-surface);color:var(--esp-encre-2);cursor:pointer;
  transition:border-color var(--esp-t),color var(--esp-t),background-color var(--esp-t);
}
.esp-menuact__b:hover,
.esp-menuact__b[aria-expanded="true"]{
  border-color:rgba(201,45,120,.34);
  color:var(--esp-framboise);
  background:var(--esp-rose-pale);
}

/* La couche 80 est la plus haute de l'espace : au-dessus de la colonne
   collante des actions, de l'en-tête d'un tableau et du tiroir. */
.esp-menuact__p{
  position:fixed;z-index:80;
  min-width:232px;max-width:min(300px,calc(100vw - 16px));
  padding:var(--esp-1);
  border:1px solid var(--esp-ligne);border-radius:var(--esp-r-lg);
  background:var(--esp-blanc);
  box-shadow:var(--esp-ombre-haute);
  display:grid;gap:1px;text-align:left;
  animation:esp-menu 140ms cubic-bezier(.22,.68,.28,1) both;
}
/* L'origine suit le bouton : le panneau s'ouvre depuis lui, jamais depuis le
   milieu de l'écran. */
@keyframes esp-menu{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.esp-menuact__p--haut{animation-name:esp-menu-haut}
@keyframes esp-menu-haut{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.esp .esp-menuact__i{
  display:flex;align-items:center;gap:var(--esp-3);width:100%;
  min-height:var(--esp-cible);padding:0 var(--esp-3);
  border:0;border-radius:var(--esp-r);background:none;
  font:inherit;font-size:14px;font-weight:500;
  color:var(--esp-encre);text-align:left;text-decoration:none;
  cursor:pointer;
  transition:background-color var(--esp-t),color var(--esp-t);
}
.esp-menuact__i span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esp-menuact__i svg{flex:none;opacity:.7;transition:opacity var(--esp-t)}
.esp .esp-menuact__i:hover{background:var(--esp-rose-pale);color:var(--esp-framboise)}
.esp .esp-menuact__i:hover svg{opacity:1}
.esp-menuact__i[disabled]{opacity:.45;cursor:default;background:none;color:var(--esp-encre-2)}

/* L'action sans retour, mise à part : rouge rosé, et jamais collée à celle
   du dessus — le séparateur l'en détache. */
.esp .esp-menuact__i--rouge{color:var(--esp-rouge)}
.esp .esp-menuact__i--rouge:hover{background:var(--esp-rouge-fond);color:var(--esp-rouge)}

.esp-menuact__sep{height:1px;margin:var(--esp-1) var(--esp-2);background:var(--esp-ligne)}

/* La question de confirmation, posée DANS le menu : une fenêtre du
   navigateur bloquerait la page et ne se lirait pas comme le reste. */
.esp-menuact__q{
  padding:var(--esp-2) var(--esp-3) var(--esp-1);
  font-size:12.5px;line-height:1.5;color:var(--esp-encre-2);
}

/* --- 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. */
.esp-menuact__voile{
  position:fixed;inset:0;z-index:79;
  background:rgba(46,18,32,.34);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.esp-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:var(--esp-2) var(--esp-3) calc(var(--esp-3) + env(safe-area-inset-bottom));
  background:var(--esp-blanc);
  border-top:1px solid var(--esp-ligne);
  border-radius:var(--esp-r-lg) var(--esp-r-lg) 0 0;
  box-shadow:0 -12px 32px -20px rgba(70,20,50,.34);
  animation:esp-feuille 180ms cubic-bezier(.22,.68,.28,1) both;
}
@keyframes esp-feuille{from{transform:translateY(16px)}to{transform:none}}
.esp-menuact__titre{
  margin:var(--esp-1) var(--esp-2) var(--esp-2);
  padding-bottom:var(--esp-2);
  border-bottom:1px solid var(--esp-ligne);
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--esp-encre-3);
}
.esp-menuact__feuille .esp-menuact__i{min-height:48px;font-size:15px}
.esp-menuact__fermer{
  margin-top:var(--esp-2);justify-content:center;font-weight:600;
  border:1px solid var(--esp-ligne-2);
}

/* --- La cellule d'actions d'une ligne -------------------------------------
   Une GRILLE À DEUX EMPLACEMENTS FIXES, et non une rangée souple.

   En rangée souple, une ligne sans menu voyait son bouton « Voir » glisser
   à droite pour occuper la place laissée libre : d'une ligne à l'autre, le
   bord gauche du bouton sautait de quarante-quatre pixels, et la colonne
   entière paraissait instable.

   Les deux emplacements existent maintenant sur TOUTES les lignes : une
   largeur constante pour « Voir », un carré de 44 px pour le menu. Quand le
   menu n'a rien à proposer, le carré reste vide — voir ActionsLigne.tsx.
   Aucune marge n'est réglée ligne par ligne : c'est la grille qui aligne. */
.esp-actions-cel{
  display:grid;
  grid-template-columns:var(--esp-voir) var(--esp-cible);
  gap:var(--esp-2);
  justify-content:end;align-items:center;
}
/* La largeur de « Voir ». Constante, et écrite une seule fois : c'est elle
   qui fixe le bord gauche de la colonne sur toute la liste. */
.esp{--esp-voir:96px}
.esp-actions-cel .esp-b{width:100%;padding-inline:var(--esp-3)}
/* L'emplacement vide. Il n'est ni cliquable, ni focalisable, ni lu : il
   occupe, et c'est tout. */
.esp-actions-cel__vide{
  display:block;width:var(--esp-cible);height:var(--esp-cible);
  pointer-events:none;
}
/* L'erreur prend la largeur des deux emplacements, au-dessus d'eux. */
.esp-actions-cel .esp-erreur{grid-column:1 / -1;justify-content:flex-end}

/* =========================================================================
   13. LES MODALES
   Voile prune très léger, panneau ivoire, largeur tenue par le contenu.
   Aucune grande ombre grise, aucun effet de verre.
   ========================================================================= */
.esp-modale-fond{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:var(--esp-5);
  background:rgba(46,18,32,.32);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  overscroll-behavior:contain;
}
.esp-modale{
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  padding:var(--esp-7);
  border:1px solid rgba(201,45,120,.14);border-radius:var(--esp-r-lg);
  background:var(--esp-ivoire);
  box-shadow:0 1px 2px rgba(50,21,37,.03),0 24px 56px -34px rgba(70,20,50,.32);
}
.esp-modale--large{max-width:640px}
.esp-modale__t{
  margin:0 var(--esp-8) var(--esp-2) 0;
  font-size:19px;font-weight:600;line-height:1.3;
  letter-spacing:-.016em;color:var(--esp-encre);
}
.esp-modale__p{
  margin:0 0 var(--esp-6);
  font-size:14.5px;line-height:1.65;color:var(--esp-encre-2);
}
/* Les actions : la principale à droite, comme partout dans le système. */
.esp-modale__actions{
  display:flex;flex-wrap:wrap;gap:var(--esp-3);justify-content:flex-end;
}
.esp-modale__x{
  position:absolute;top:var(--esp-4);right:var(--esp-4);
}

/* =========================================================================
   14. ACCORDÉON, TOAST, ÉTAT VIDE, SQUELETTE
   ========================================================================= */

/* --- Accordéon -----------------------------------------------------------
   Un vrai bouton par question, « aria-expanded » porté par lui, et le signe
   qui pivote : le losange de la marque, comme dans la FAQ publique. */
.esp-acc{display:grid}
.esp-acc__item{border-top:1px solid var(--esp-ligne)}
.esp-acc__item:last-child{border-bottom:1px solid var(--esp-ligne)}
.esp .esp-acc__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);
  width:100%;min-height:56px;padding:var(--esp-4) var(--esp-2);
  border:0;background:none;
  font-family:inherit;font-size:15px;font-weight:600;line-height:1.4;
  letter-spacing:-.01em;color:var(--esp-encre);text-align:left;
  cursor:pointer;
  transition:color var(--esp-t);
}
.esp .esp-acc__q:hover{color:var(--esp-framboise)}
.esp-acc__s{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:var(--esp-r-xs);
  border:1px solid var(--esp-ligne-2);background:var(--esp-blanc);
  color:var(--esp-encre-2);
  transition:rotate var(--esp-t),background-color var(--esp-t),
             border-color var(--esp-t),color var(--esp-t);
}
.esp-acc__q[aria-expanded="true"] .esp-acc__s{
  rotate:45deg;border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--esp-framboise) 0%,var(--esp-accent) 100%);
}
.esp-acc__r{padding:0 var(--esp-2) var(--esp-5)}
.esp-acc__r p{margin:0 0 var(--esp-3);font-size:14.5px;line-height:1.7;
  color:var(--esp-encre-2);max-width:var(--esp-lecture)}
.esp-acc__r p:last-child{margin-bottom:0}

/* --- Toast ---------------------------------------------------------------
   En bas, au-dessus de la garde basse, et annoncé par « aria-live ». Il ne
   recouvre jamais une action : la garde lui est réservée. */
.esp-toast{
  position:fixed;left:50%;bottom:var(--esp-5);z-index:300;
  translate:-50% 0;
  display:flex;align-items:center;gap:var(--esp-3);
  max-width:min(440px,calc(100vw - 32px));
  padding:var(--esp-3) var(--esp-5);
  border:1px solid var(--esp-ligne);border-radius:var(--esp-r-lg);
  background:var(--esp-blanc);
  box-shadow:var(--esp-ombre-haute);
  font-size:14px;font-weight:500;color:var(--esp-encre);
}
.esp-toast--succes{border-left:3px solid var(--esp-vert)}
.esp-toast--erreur{border-left:3px solid var(--esp-rouge)}

/* --- L'état vide ---------------------------------------------------------
   Il n'est pas une erreur : c'est un écran qui n'a rien à montrer ENCORE. Il
   dit quoi faire, et il le dit sans illustration générique. */
.esp-vide{
  display:grid;justify-items:start;gap:var(--esp-3);
  padding:var(--esp-9) 0;
  max-width:var(--esp-lecture);
}
.esp-vide__los{
  width:22px;height:22px;rotate:45deg;border-radius:3px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6FA 60%,#FDEAF3 100%);
  border:1px solid rgba(233,150,190,.72);
  box-shadow:0 0 10px rgba(240,179,210,.42);
  margin-bottom:var(--esp-2);
}
.esp-vide__t{
  margin:0;font-size:17px;font-weight:600;line-height:1.35;
  letter-spacing:-.014em;color:var(--esp-encre);
}
.esp-vide__p{margin:0;font-size:14.5px;line-height:1.65;color:var(--esp-encre-2)}

/* --- Le squelette --------------------------------------------------------
   Il a la forme de ce qui arrive, jamais une forme générique : un squelette
   qui ne ressemble pas au contenu fait sauter la page à l'arrivée.
   Le balayage est lent et très pâle — c'est une attente, pas un spectacle. */
.esp-sq{
  border-radius:var(--esp-r-xs);
  background:linear-gradient(90deg,#F2EAEE 0%,#F9F3F6 40%,#F2EAEE 80%);
  background-size:280% 100%;
  animation:esp-balai 1500ms ease-in-out infinite;
}
.esp-sq--t{height:18px;width:60%}
.esp-sq--p{height:13px;width:100%;margin-top:var(--esp-2)}
.esp-sq--b{height:var(--esp-bouton-h);width:160px;border-radius:var(--esp-r)}
@keyframes esp-balai{
  0%{background-position:120% 0}
  100%{background-position:-20% 0}
}

/* --- Petits écrans -------------------------------------------------------- */
@media (max-width:640px){
  .esp-form--2{grid-template-columns:minmax(0,1fr)}
  .esp-carte,.esp-teinte,.esp-bloc-fort{padding:var(--esp-carte-mobile)}
  .esp-modale{padding:var(--esp-5)}
  .esp-modale__actions{flex-direction:column-reverse}
  .esp-modale__actions .esp-b{width:100%}
  .esp-vide{padding:var(--esp-7) 0}
  /* Le menu d'actions n'a pas la place de s'ouvrir en flottant : il prend la
     largeur sous son bouton. */
  .esp-menuact__p{min-width:min(260px,calc(100vw - 48px))}
}

/* =========================================================================
   15. LA VUE D'ENSEMBLE

   Deux essais ont été refusés, et il faut dire pourquoi, sinon le troisième
   refera l'un des deux.

   L'ANCIENNE version était riche mais mal construite : une bannière prune,
   puis cinq cartes identiques flottant en dessous, puis un tableau dans une
   carte bordée. Trois blocs empilés sans rapport entre eux.

   Ma PREMIÈRE correction a supprimé la bannière et les cadres. Elle a réglé
   la construction et tué l'identité : une page beige, plate, un wireframe
   propre. Le minimalisme n'était pas le problème de l'ancienne page, il
   n'en était donc pas la solution.

   CE QUI EST FAIT ICI : la richesse de la première, la construction de la
   seconde. La profondeur revient par la LUMIÈRE et la COMPOSITION, jamais
   par des bordures :

     · un hero prune profond, dégradé vers le framboise sombre, deux
       lumières radiales, et un immense losange coupé par le bord — le signe
       de la marque agrandi jusqu'à devenir une texture ;
     · la progression DANS le hero, sur une surface teintée, avec une barre
       que le reflet traverse UNE fois au chargement ;
     · les indicateurs sur UNE surface ivoire qui CHEVAUCHE le bas du hero.
       Le chevauchement est ce qui les rattache : posés en dessous avec un
       écart, ils flottaient ;
     · le tableau dans une surface premium, et non nu sur le fond.

   Rien ne bouge en permanence. Les deux seuls mouvements — le satiné du
   bouton et le reflet de la barre — passent une fois et ne reviennent pas.
   Tous deux en CSS : aucun GSAP n'a été ajouté pour cela.
   ========================================================================= */

/* --- LE HERO --------------------------------------------------------------
   Le point fort de l'écran, et le seul bloc prune de la page.

   Son rembourrage bas est volontairement grand : la surface des indicateurs
   remonte dessus de vingt-huit pixels, et sans cette réserve elle
   recouvrirait le texte. */
.esp-hero{
  position:relative;overflow:hidden;
  padding:var(--esp-8) var(--esp-9) calc(var(--esp-7) + 28px);
  border-radius:18px;
  color:#FFFBFD;
  /* Trois couches. Deux lumières radiales — une rose en haut à gauche, une
     framboise à droite —, puis le dégradé prune. Aucune n'est franche : ce
     qui donne la profondeur est leur superposition, pas leur intensité. */
  background:
    radial-gradient(74% 120% at 2% 0%,rgba(233,150,190,.24) 0%,rgba(233,150,190,0) 58%),
    radial-gradient(60% 130% at 100% 40%,rgba(201,45,120,.34) 0%,rgba(201,45,120,0) 62%),
    linear-gradient(142deg,#54143A 0%,#40102A 46%,#2E0B1D 100%);
  box-shadow:
    0 1px 2px rgba(50,21,37,.06),
    0 24px 56px -34px rgba(58,12,36,.52);
}

/* Le reflet du bord supérieur : un filet clair le long de l'arête,
   immobile. C'est ce qui donne au bloc son épaisseur. */
.esp-hero::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,
    rgba(255,214,235,0) 0%,rgba(255,214,235,.34) 30%,
    rgba(255,255,255,.44) 52%,rgba(255,214,235,.28) 74%,rgba(255,214,235,0) 100%);
}

/* L'immense losange, coupé par le bord droit. Un signe agrandi jusqu'à
   devenir une texture : on ne le lit pas comme un pictogramme, on le sent.
   Le filet fait un pixel, quelle que soit sa taille. */
.esp-hero__los{
  position:absolute;top:50%;right:-120px;
  width:380px;height:380px;
  translate:0 -50%;rotate:45deg;
  border-radius:44px;
  border:1px solid rgba(255,214,235,.14);
  background:linear-gradient(135deg,rgba(255,214,235,.07) 0%,rgba(255,214,235,0) 62%);
  pointer-events:none;
}
/* Un second, plus petit et décalé : deux losanges font une profondeur qu'un
   seul ne fait pas. */
.esp-hero__los--2{
  top:auto;bottom:-140px;right:120px;
  width:230px;height:230px;
  translate:0 0;border-radius:28px;
  border-color:rgba(255,214,235,.10);
  background:none;
}

.esp-hero__in{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  gap:var(--esp-9);
  align-items:start;
}
.esp-hero__in--seul{grid-template-columns:minmax(0,1fr)}

.esp-hero__sur{
  margin:0 0 var(--esp-surtitre-titre);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,214,235,.72);
}
/* Le nom de l'entreprise, entier. Il peut être long : il passe à la ligne
   plutôt que d'être coupé. */
/* Deux classes : « .adm h1 { margin:0 } » (admin.css, chargée ici aussi)
   l'emportait sur la marge du titre, et l'introduction venait s'y coller. */
.esp .esp-hero__t,.esp-hero__t{
  margin:0 0 var(--esp-titre-intro);
  font-size:clamp(27px,1.8vw + 18px,38px);
  font-weight:600;line-height:1.1;letter-spacing:-.028em;
  color:#FFFBFD;text-wrap:balance;overflow-wrap:break-word;
}
.esp-hero__p{
  margin:0 0 var(--esp-6);
  font-size:15px;line-height:1.65;color:rgba(255,236,246,.78);
  max-width:44ch;
}

/* --- Le bouton du hero ----------------------------------------------------
   Sur un fond prune, le dégradé framboise du site se fond dans la masse. Le
   bouton prend donc l'ivoire, texte prune : c'est le contraste maximal
   disponible, et c'est ce qui en fait l'action principale sans ambiguïté.
   Son satiné passe UNE fois au chargement. */
.esp .esp-hero__cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);
  min-height:var(--esp-bouton-h);
  padding:var(--esp-2) var(--esp-6);
  border:1px solid rgba(255,255,255,.72);border-radius:var(--esp-r);
  background:linear-gradient(140deg,#FFFFFF 0%,#FFF6FA 58%,#FDEAF3 100%);
  color:var(--esp-prune);
  font-size:15px;font-weight:600;letter-spacing:-.008em;text-decoration:none;
  box-shadow:0 6px 18px -10px rgba(20,4,12,.60);
  transition:transform var(--esp-t),box-shadow var(--esp-t);
}
.esp .esp-hero__cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px -12px rgba(20,4,12,.70);
}
.esp .esp-hero__cta:active{transform:none}
.esp-hero__cta::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:36%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(255,255,255,0) 0%,rgba(255,236,246,.50) 40%,
    rgba(255,255,255,.90) 52%,rgba(255,236,246,.50) 64%,rgba(255,255,255,0) 100%);
  filter:blur(3px);
  animation:esp-satin 1200ms cubic-bezier(.4,0,.2,1) 700ms 1 both;
}
@keyframes esp-satin{
  from{transform:translateX(-180%) rotate(16deg)}
  to{transform:translateX(320%) rotate(16deg)}
}

/* --- La progression, DANS le hero -----------------------------------------
   Elle était à côté, séparée par une grande ligne verticale : deux contenus
   voisins plutôt qu'un module. Elle est maintenant posée sur une surface
   teintée à l'intérieur du bandeau — ni verre dépoli, ni carte : un aplat
   blanc à six pour cent et un filet rose, qui suffisent à la détacher du
   dégradé sans la découper. */
.esp-avance{
  display:grid;gap:var(--esp-3);
  padding:var(--esp-5);
  border:1px solid rgba(255,214,235,.16);
  border-radius:var(--esp-r-lg);
  background:rgba(255,255,255,.06);
}
.esp-avance__tete{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-3)}
.esp-avance__l{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,214,235,.72);
}
.esp-avance__n{
  font-size:30px;font-weight:600;line-height:1;letter-spacing:-.024em;
  color:#FFFBFD;font-variant-numeric:tabular-nums;
}

/* Le rail : une trace translucide, un remplissage en dégradé framboise →
   rose, et le losange au point atteint. */
.esp-avance__rail{
  position:relative;height:6px;border-radius:3px;
  background:rgba(255,255,255,.14);
}
.esp-avance__plein{
  position:absolute;inset:0 auto 0 0;
  width:var(--part,0%);
  border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,#A81A5E 0%,#C92D78 52%,#F0A8CC 100%);
  box-shadow:0 0 14px -2px rgba(233,150,190,.48);
}
/* Le reflet traverse la partie REMPLIE, une seule fois. Il est enfermé en
   elle — « overflow:hidden » juste au-dessus — donc il ne court jamais sur
   la trace vide, ce qui ferait croire à un chargement sans fin. */
.esp-avance__plein::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  animation:esp-passe 1400ms cubic-bezier(.4,0,.2,1) 900ms 1 both;
}
@keyframes esp-passe{
  from{transform:translateX(-120%)}
  to{transform:translateX(220%)}
}
/* Le losange, rentré d'un demi-côté aux deux bouts : sans cela il déborde
   du rail à 0 % comme à 100 %. */
.esp-avance__los{
  position:absolute;top:50%;
  left:clamp(6px,var(--part,0%),calc(100% - 6px));
  width:12px;height:12px;
  translate:-50% -50%;rotate:45deg;border-radius:2px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6FA 60%,#FDEAF3 100%);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 0 12px rgba(240,179,210,.72);
}
.esp-avance__geste{
  margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,236,246,.76);
}
/* Le lien du hero : ivoire souligné. Le framboise disparaîtrait sur ce fond. */
.esp .esp-avance__lien{
  display:inline-flex;align-items:center;min-height:24px;
  color:#FFFBFD;font-weight:600;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,214,235,.42);
  transition:text-decoration-color var(--esp-t);
}
.esp .esp-avance__lien:hover{text-decoration-color:#FFFBFD}

/* --- LES INDICATEURS ------------------------------------------------------
   UNE surface, et non cinq cartes. Elle remonte de vingt-huit pixels sur le
   hero : c'est ce chevauchement qui les rattache à lui. Posés en dessous
   avec un écart, ils flottaient dans le vide — c'était le reproche, et il
   était juste. */
.esp-chiffres{
  position:relative;z-index:2;
  margin:-28px var(--esp-6) 0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid rgba(201,45,120,.12);
  border-radius:16px;
  background:var(--esp-surface);
  box-shadow:
    0 1px 2px rgba(50,21,37,.04),
    0 18px 40px -28px rgba(70,20,50,.30);
  overflow:hidden;
}
/* Le fin reflet supérieur, immobile : l'arête d'une surface posée. */
.esp-chiffres::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:1;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.90) 50%,rgba(255,255,255,0) 100%);
}

.esp-chiffre{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:var(--esp-2) var(--esp-3);
  min-height:var(--esp-cible);
  padding:var(--esp-5);
  border-left:1px solid var(--esp-ligne);
  color:inherit;text-decoration:none;
  transition:background-color var(--esp-t);
}
.esp-chiffre:first-child{border-left:0}
.esp-chiffre:hover{background:var(--esp-rose-voile)}
.esp-chiffre__ico{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(140deg,#FDEAF3 0%,#F8E0EC 100%);
  color:var(--esp-framboise);
}
.esp-chiffre__n{
  grid-column:2;
  font-size:27px;font-weight:600;line-height:1;letter-spacing:-.022em;
  color:var(--esp-encre);font-variant-numeric:tabular-nums;
}
.esp-chiffre__q{
  grid-column:1 / -1;
  font-size:13px;line-height:1.4;color:var(--esp-encre-2);
}
.esp-chiffre__p{display:block;font-size:12px;color:var(--esp-encre-3)}

/* Un zéro reste parfaitement lisible, mais cesse de se disputer l'attention. */
.esp-chiffre.est-zero .esp-chiffre__n{color:var(--esp-encre-3)}
.esp-chiffre.est-zero .esp-chiffre__ico{background:var(--esp-neutre-fond);color:var(--esp-encre-3)}
/* Ce qui attend un geste prend le framboise, et un halo minuscule. */
.esp-chiffre.est-agir .esp-chiffre__n{color:var(--esp-accent)}
.esp-chiffre.est-agir .esp-chiffre__ico{box-shadow:0 0 0 3px rgba(201,45,120,.08)}

/* --- LES ANNONCES RÉCENTES ------------------------------------------------
   Dans une surface, et non nues sur le fond. Le titre et le lien vivent
   dans un en-tête légèrement teinté, qui sépare sans filet lourd. */
/* Vingt pixels ici, et la grille de page en ajoute vingt-quatre : quarante-
   quatre au total entre deux sections importantes. Quarante en ajoutait
   soixante-quatre, au-delà de ce que le rythme autorise. */
.esp-recentes{
  margin-top:var(--esp-5);
  border:1px solid var(--esp-ligne);
  border-radius:16px;
  background:var(--esp-surface);
  box-shadow:0 1px 2px rgba(50,21,37,.03),0 14px 32px -28px rgba(70,20,50,.26);
  overflow:hidden;
}
/* Le titre de la section s'aligne sur la première colonne du tableau : le
   rembourrage de l'en-tête et celui du corps sont le même. */
.esp-recentes__tete{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--esp-4);flex-wrap:wrap;
  padding:var(--esp-5) var(--esp-6);
  background:linear-gradient(180deg,var(--esp-rose-voile) 0%,var(--esp-surface) 100%);
  border-bottom:1px solid var(--esp-ligne);
}
.esp-recentes__corps{padding:0 var(--esp-6)}

/* --- Le tableau ----------------------------------------------------------
   Léger — aucun cadre de cellule, un en-tête discret, des filets entre les
   lignes — mais RÉGULIER, ce qui demande des largeurs déclarées.

   « table-layout:fixed » est ce qui rend la liste stable : sans lui, le
   navigateur répartit les colonnes d'après leur contenu, et un titre long
   sur une ligne déplace les dates et les actions de TOUTES les autres. Les
   cinq largeurs sont donc posées, et la colonne d'actions reçoit exactement
   la place de ses deux emplacements. */
.esp-tableau{width:100%;border-collapse:collapse;table-layout:fixed}
.esp-tableau col.esp-c-titre{width:auto}
.esp-tableau col.esp-c-statut{width:124px}
/* Assez large pour « Publiée le 18 septembre 2026 » d'un seul tenant : une
   date principale qui passe à la ligne donne deux lignes de même longueur,
   et la hiérarchie entre la principale et la mention s'efface. */
.esp-tableau col.esp-c-dates{width:248px}
/* 104 px suffisaient à un chiffre ; ils ne suffisent plus à « 2
   candidatures », qui se coupait en deux lignes et venait toucher la
   colonne des actions. Le libellé ne se coupe plus. */
/* 152 px moins les gouttières laissaient 112 px : « Aucune candidature »
   se coupait en deux lignes. Le mot tient maintenant sur la sienne. */
.esp-tableau col.esp-c-cand{width:184px}
/* Les deux emplacements, plus leur écart : la colonne ne peut pas les
   comprimer. */
.esp-tableau col.esp-c-actions{
  width:calc(var(--esp-voir) + var(--esp-cible) + var(--esp-2));
}

.esp-tableau th{
  padding:var(--esp-4) var(--esp-3) var(--esp-3);
  text-align:left;vertical-align:bottom;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--esp-encre-3);
  border-bottom:1px solid var(--esp-ligne-2);
}
/* Une hauteur de ligne régulière, quelles que soient les actions : c'est le
   contenu le plus haut d'une ligne — deux dates — qui la fixe, et non la
   présence ou l'absence d'un menu. */
.esp-tableau td{
  height:72px;
  padding:var(--esp-3);
  vertical-align:middle;
  border-bottom:1px solid var(--esp-ligne);
}
.esp-tableau tbody tr:last-child td{border-bottom:0}
.esp-tableau tbody tr{transition:background-color var(--esp-t)}
.esp-tableau tbody tr:hover{background:var(--esp-rose-voile)}
.esp-tableau th:first-child,.esp-tableau td:first-child{padding-left:0}
.esp-tableau th:last-child,.esp-tableau td:last-child{padding-right:0;text-align:right}
/* Les nombres s'alignent sur le même axe, et le tiret d'absence avec eux. */
.esp-tableau td:nth-child(4),.esp-tableau th:nth-child(4){text-align:left}

/* Le titre : même graisse partout, deux lignes au maximum, et des points de
   suspension au-delà. Sa taille ne se réduit jamais — un titre rapetissé
   dans une liste se lit moins bien qu'un titre coupé. */
.esp .esp-tableau__t{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  /* Le titre est un lien, donc une cible : 24 px au moins, même quand il
     tient sur une seule ligne. La règle des cibles tactiles dispense les
     liens posés dans une phrase ; celui-ci est seul dans sa cellule. */
  min-height:24px;
  font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.01em;
  color:var(--esp-encre);text-decoration:none;
}
.esp .esp-tableau__t:hover{color:var(--esp-framboise)}
.esp-date{font-size:13.5px;line-height:1.4;color:var(--esp-encre)}
.esp-date__s{display:block;font-size:12.5px;line-height:1.45;color:var(--esp-encre-3)}
.esp-nb{font-size:15px;font-weight:600;color:var(--esp-encre);font-variant-numeric:tabular-nums}
.esp-nb--zero{font-weight:400;color:var(--esp-encre-3)}

/* Les cartes du téléphone. Les deux rendus coexistent dans le document et la
   feuille n'en montre qu'un : le serveur ne connaît pas la largeur de
   l'écran, et une bascule en JavaScript afficherait d'abord le mauvais. */
.esp-cartes{display:none}
.esp-carte-annonce{
  display:grid;gap:var(--esp-3);
  padding:var(--esp-5) 0;
  border-bottom:1px solid var(--esp-ligne);
}
.esp-carte-annonce:last-child{border-bottom:0}
.esp-carte-annonce__t{
  margin:0;font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;
}
.esp .esp-carte-annonce__t a{color:var(--esp-encre);text-decoration:none}
.esp .esp-carte-annonce__t a:hover{color:var(--esp-framboise)}
.esp-carte-annonce__meta{margin:0;font-size:13.5px;line-height:1.55;color:var(--esp-encre-2)}
.esp-carte-annonce__actions{display:flex;justify-content:flex-start}
/* Sur téléphone, les deux emplacements restent alignés — mais l'emplacement
   vide ne laisse pas un trou : la grille se réduit à sa première colonne
   quand il n'y a rien à mettre dans la seconde. Un carré vide au bout d'une
   carte se remarque, alors qu'il passe inaperçu dans une colonne. */
.esp-carte-annonce__actions .esp-actions-cel{justify-content:start}
.esp-carte-annonce__actions .esp-actions-cel:has(.esp-actions-cel__vide){
  grid-template-columns:var(--esp-voir);
}
.esp-carte-annonce__actions .esp-actions-cel__vide{display:none}

/* --- Tablette ------------------------------------------------------------- */
@media (max-width:1024px){
  .esp-hero{padding:var(--esp-7) var(--esp-7) calc(var(--esp-7) + 28px)}
  .esp-hero__in{grid-template-columns:minmax(0,1fr);gap:var(--esp-7)}
  .esp-hero__los{right:-180px;width:300px;height:300px}
  .esp-hero__los--2{display:none}
}

/* Cinq indicateurs demandent environ 900 px de CONTENU pour tenir sans que
   leurs libellés s'écrasent sur trois lignes. En dessous : deux colonnes, et
   le cinquième prend la rangée entière — c'est aussi le seul qui ne parle
   pas d'annonces mais de candidates. */
@container page (max-width:900px){
  .esp-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:var(--esp-4)}
  .esp-chiffre{border-left:0;border-top:1px solid var(--esp-ligne)}
  .esp-chiffre:nth-child(2n){border-left:1px solid var(--esp-ligne)}
  .esp-chiffre:first-child,.esp-chiffre:nth-child(2){border-top:0}
  .esp-chiffre:last-child{grid-column:1 / -1;border-left:0}
}

/* Le tableau à cinq colonnes demande environ 780 px de contenu. En dessous,
   chaque cellule passe sur deux lignes et les actions s'empilent : un
   tableau qu'on lit en accordéon n'est plus un tableau. Les cartes portent
   la même information, dans le même ordre. */
@container page (max-width:780px){
  .esp-tableau-annonces{display:none}
  .esp-cartes{display:block}
}

@media (max-width:640px){
  .esp-hero{padding:var(--esp-6) var(--esp-5) calc(var(--esp-7) + 26px);border-radius:14px}
  .esp-hero__los{right:-200px;width:260px;height:260px}
  .esp-hero__p{margin-bottom:var(--esp-5)}
  .esp .esp-hero__cta{width:100%}
  .esp-avance{padding:var(--esp-4)}
  .esp-avance__n{font-size:26px}
  .esp-chiffres{margin-inline:var(--esp-2);border-radius:14px}
  .esp-chiffre{padding:var(--esp-4)}
  .esp-recentes{margin-top:var(--esp-7);border-radius:14px}
  .esp-recentes__tete{padding:var(--esp-4) var(--esp-5)}
  .esp-recentes__corps{padding:0 var(--esp-5)}
}

/* Très petits écrans : une colonne, plutôt que deux libellés écrasés sur
   trois lignes chacun. */
@media (max-width:380px){
  .esp-chiffres{grid-template-columns:minmax(0,1fr)}
  .esp-chiffre,.esp-chiffre:nth-child(2n){border-left:0;border-top:1px solid var(--esp-ligne)}
  .esp-chiffre:first-child{border-top:0}
}

/* =========================================================================
   99. MOUVEMENT RÉDUIT
   Le tiroir s'ouvre et se ferme toujours — c'est un état, pas un effet —
   mais il n'y met plus de trajet.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .esp-menu,.esp-voile,.esp-nav__l,.esp-menu__lien,
  .esp-menu__publier,.esp-tete__b,
  .esp-hero__cta,
  .esp-b,.esp-i,.esp-select,.esp-zone,.esp-o,.esp-o__m,
  .esp-carte--clic,.esp-ligne,.esp-menuact__a,.esp-acc__q,.esp-acc__s,
  .esp-lien{transition:none}
  /* Le soulèvement disparaît ; l'état, lui, reste visible par la couleur. */
  .esp-b--1:hover,.esp-carte--clic:hover,
  .esp .esp-menu__publier:hover{transform:none}
  /* Les deux seules animations en boucle du système s'arrêtent. Le rond
     d'attente devient un disque fixe : il dit toujours « ça travaille ». */
  .esp-b__attente{animation:none;border-top-color:currentColor;opacity:.45}
  .esp-sq{animation:none;background:#F2EAEE}
  /* Le menu paraît d'un coup : c'est un état, pas un trajet. */
  .esp-menuact__p,.esp-menuact__feuille{animation:none}
  .esp-menuact__b,.esp-menuact__i,.esp-menuact__i svg{transition:none}
  .esp-chiffre,.esp-tableau tbody tr{transition:none}
  /* Les deux seuls mouvements de la page — le satiné du bouton et le reflet
     de la barre — ne jouent pas. Ce qu'ils soulignaient reste visible : le
     bouton est là, la barre est remplie. */
  .esp-hero__cta::after,.esp-avance__plein::after{animation:none;opacity:0}
  .esp .esp-hero__cta:hover{transform:none}
}

/* =========================================================================
   MON ENTREPRISE — la page de gestion d'identité

   Elle vivait dans une colonne de 860 px, avec un petit bandeau, trois
   grandes cartes blanches bordées et une barre d'enregistrement collée au
   bas de la fenêtre qui recouvrait le dernier champ. Elle parlait encore
   la langue de l'administration — des classes « adm-* » — alors que la vue
   d'ensemble avait reçu la sienne.

   Rien ici ne touche la vue d'ensemble : « .esp-hero » et « .esp-avance »
   sont RÉEMPLOYÉS, pas redéfinis. Ce qui suit n'ajoute que ce qui manquait.
   ========================================================================= */

/* --- Le bandeau : la seule différence avec celui du tableau de bord -----
   Un nom de structure n'est pas un « Bonjour ». Il est plus long, souvent
   en capitales, et il doit pouvoir se couper sans déborder. */
.esp-hero__t--nom{
  text-wrap:balance;overflow-wrap:anywhere;hyphens:auto;
  max-width:18ch;
}
@media (min-width:1100px){.esp-hero__t--nom{max-width:22ch}}

/* --- La ligne de confiance ----------------------------------------------
   La vérification tenait dans une grande carte blanche presque vide. Ici,
   une ligne basse : un filet vert à gauche, un fond à peine teinté, et
   l'information sur une seule rangée sur grand écran. */
.esp-confiance{
  display:flex;align-items:flex-start;gap:var(--esp-4);
  /* Aucune marge : « .esp-page » est une grille dont la gouttière vaut déjà
     24 px. Une marge s'y AJOUTE — mesuré 44 px au lieu de 20. */
  padding:var(--esp-4) var(--esp-5);
  border:1px solid var(--esp-ligne);
  border-left:3px solid var(--esp-ligne-2);
  border-radius:var(--esp-r-lg);
  background:var(--esp-rose-voile);
}
.esp-confiance.est-ok{
  border-left-color:var(--esp-vert-ligne);
  background:var(--esp-vert-fond);
  border-color:var(--esp-vert-ligne);
}
.esp-confiance__ico{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--esp-blanc);color:var(--esp-encre-2);
  box-shadow:inset 0 0 0 1px var(--esp-ligne);
}
.esp-confiance.est-ok .esp-confiance__ico{color:var(--esp-vert)}
.esp-confiance__dire{min-width:0;display:grid;gap:var(--esp-1)}
.esp-confiance__t{
  display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;
  color:var(--esp-encre);
}
.esp-confiance__badge{
  flex:none;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  background:var(--esp-blanc);color:var(--esp-encre-2);
  box-shadow:inset 0 0 0 1px var(--esp-ligne-2);
}
.esp-confiance.est-ok .esp-confiance__badge{
  background:var(--esp-blanc);color:var(--esp-vert);
  box-shadow:inset 0 0 0 1px var(--esp-vert-ligne);
}
.esp-confiance__p{
  margin:0;font-size:13.5px;line-height:1.6;
  color:var(--esp-encre-2);max-width:86ch;
}

/* --- Les deux colonnes --------------------------------------------------
   Le formulaire, et l'aperçu qui l'accompagne. La colonne de l'aperçu est
   collante : on garde sous les yeux ce qu'on est en train de modifier. */
.esp-entreprise{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--esp-7);
  /* 24 px de gouttière, plus 8 : 32 px sous la vérification. */
  margin-top:var(--esp-2);
}
@media (min-width:1080px){
  .esp-entreprise{grid-template-columns:minmax(0,1fr) 340px}
}
.esp-entreprise__form{min-width:0}
.esp-entreprise__cote{min-width:0}
@media (min-width:1080px){
  .esp-entreprise__cote{position:sticky;top:var(--esp-5);align-self:start}
}

/* --- Les chapitres ------------------------------------------------------
   Pas deux gros rectangles bordés : une surface presque nue, un filet fin
   au-dessus, et de l'air. La hiérarchie vient des proportions et de la
   typographie — c'était la consigne, et c'est ce qui distingue une page
   éditoriale d'un formulaire administratif. */
/* « minmax(0,1fr) », et non la piste implicite « auto » : une piste
   automatique se dimensionne sur la contribution de son contenu, et un
   chapitre restait à 463,75 px dans un parent de 288 — mesuré aux quatre
   largeurs de téléphone. C'est la même correction que « .adm-page » a déjà
   reçue, pour la même raison. */
.esp-chapitres{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-8)}
@media (min-width:768px){.esp-chapitres{gap:56px}}
.esp-chapitre{display:grid;gap:var(--esp-6)}
.esp-chapitre__tete{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:var(--esp-3) var(--esp-4);
  padding-top:var(--esp-5);
  border-top:1px solid var(--esp-ligne);
}
.esp-chapitre__n{
  grid-row:1/3;
  font-size:13px;font-weight:600;letter-spacing:.08em;
  color:var(--esp-encre-3);font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.esp-chapitre__t{
  margin:0;font-size:20px;font-weight:600;letter-spacing:-.022em;
  color:var(--esp-encre);
}
.esp-chapitre__p{
  margin:var(--esp-titre-intro) 0 0;       /* 12 px sous le titre */
  font-size:13.5px;line-height:1.62;
  color:var(--esp-encre-2);max-width:64ch;
}
/* L'étiquette de destination : elle passe sous le texte tant qu'il n'y a
   pas la place à côté, plutôt que d'écraser le titre. */
/* Elle s'appelait « .esp-marque ». C'était DÉJÀ le nom de la marque de la
   barre latérale — « .esp .esp-marque », avec son logo —, et ce sélecteur,
   plus spécifique, l'emportait : le badge héritait de l'habillage du menu
   et perdait sa couleur. Deux choses différentes, deux noms. */
.esp-destination{
  grid-column:2;justify-self:start;
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
.esp-destination::before{
  content:"";width:6px;height:6px;rotate:45deg;border-radius:1px;
  background:currentColor;
}
/* Les fonds étaient trop pâles pour se voir : un vert à 4 % et un rose à
   2 % sur de l'ivoire ne dessinent aucune étiquette. On garde des teintes
   non saturées — ce sont des repères, pas des alertes — mais on leur donne
   un filet, qui est ce qui les fait exister sur un fond clair. */
.esp-destination--public{
  background:var(--esp-vert-fond);color:var(--esp-vert);
  box-shadow:inset 0 0 0 1px var(--esp-vert-ligne);
}
.esp-destination--prive{
  background:var(--esp-rose);color:#951753;
  box-shadow:inset 0 0 0 1px rgba(149,23,83,.22);
}
@media (min-width:900px){
  .esp-chapitre__tete{grid-template-columns:auto minmax(0,1fr) auto}
  .esp-destination{grid-column:3;grid-row:1;align-self:center}
}
/* Le chapitre privé : un fond rosé très pâle, et rien de plus. Pas de
   grande alerte, pas de bloc massif — l'information est rassurante, elle
   n'a pas à être inquiétante. */
.esp-chapitre--prive{
  padding:0 var(--esp-5) var(--esp-6);
  border-radius:var(--esp-r-lg);
  background:linear-gradient(180deg,var(--esp-rose-voile) 0%,rgba(254,250,252,0) 62%);
}
.esp-chapitre--prive .esp-chapitre__tete{padding-left:0}

/* --- L'enregistrement ---------------------------------------------------
   À la fin du formulaire, dans sa colonne. Il ne masque plus rien. */
.esp-enreg{
  display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap;
  padding-top:var(--esp-6);
  border-top:1px solid var(--esp-ligne);
}
/* « .esp .esp-b » pose « inline-flex » et l'emporte sur une classe seule :
   les deux libellés se plaçaient donc CÔTE À CÔTE, le gabarit invisible
   poussant le texte à droite. D'où un bouton deux fois trop large, avec son
   mot décentré. Le sélecteur reprend le même préfixe pour faire jeu égal. */
.esp .esp-enreg__b{flex:none;display:inline-grid;place-items:center}
/* Le gabarit réserve la largeur du libellé le plus long : le bouton ne
   rétrécit pas en passant à « Enregistrement… ». */
.esp-enreg__gabarit,.esp-enreg__mot{grid-area:1/1;white-space:nowrap}
.esp-enreg__gabarit{visibility:hidden;pointer-events:none}
.esp-enreg__aide{
  margin:0;flex:1 1 280px;min-width:0;
  font-size:12.5px;line-height:1.55;color:var(--esp-encre-3);max-width:62ch;
}

/* --- L'aperçu du profil -------------------------------------------------
   La finition de la vue d'ensemble : le prune, un filet shiny, un losange
   nacré, une profondeur très basse. Aucun verre dépoli, aucune grande
   ombre grise. */
.esp-apercu{display:grid;gap:var(--esp-4)}
.esp-apercu__t{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--esp-encre-3);
}
.esp-apercu__carte{
  position:relative;overflow:hidden;isolation:isolate;
  padding:var(--esp-6) var(--esp-5) var(--esp-5);
  border-radius:var(--esp-r-lg);
  background:
    radial-gradient(70% 46% at 84% 0%,rgba(255,92,168,.20) 0%,rgba(255,92,168,0) 100%),
    linear-gradient(158deg,var(--esp-prune-3) 0%,var(--esp-prune-2) 48%,var(--esp-prune) 100%);
  color:#FFF6FA;
  box-shadow:0 12px 30px -24px rgba(50,21,37,.5);
}
.esp-apercu__fil{
  position:absolute;left:var(--esp-5);right:var(--esp-5);top:0;height:2px;
  background:linear-gradient(90deg,
    rgba(255,201,223,0) 0%,rgba(255,201,223,.62) 34%,
    rgba(255,255,255,.9) 52%,rgba(255,201,223,.5) 68%,rgba(255,201,223,0) 100%);
}
.esp-apercu__los{
  position:absolute;right:20px;top:14px;width:9px;height:9px;
  rotate:45deg;border-radius:1px;
  background:radial-gradient(62% 62% at 33% 29%,#FFFFFF 0%,#FFEAF4 44%,#FFC6DE 100%);
  box-shadow:0 0 10px rgba(255,150,196,.4);
}
.esp-apercu__mono{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:12px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,214,235,.28);
  font-size:16px;font-weight:700;letter-spacing:.02em;color:#FFF6FA;
}
.esp-apercu__nom{
  margin:var(--esp-4) 0 0;font-size:17px;font-weight:600;
  line-height:1.3;letter-spacing:-.018em;color:#FFFDFE;
  overflow-wrap:anywhere;
}
.esp-apercu__liste{margin:var(--esp-4) 0 0;display:grid;gap:var(--esp-3)}
.esp-apercu__ligne{display:grid;gap:2px}
.esp-apercu__ligne dt{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,214,235,.72);
}
.esp-apercu__ligne dd{
  margin:0;font-size:13.5px;line-height:1.5;color:#FFF6FA;
  overflow-wrap:anywhere;
}
.esp-apercu__vide{color:rgba(255,235,244,.66);font-style:italic}
.esp-apercu__mention{
  margin:var(--esp-5) 0 0;padding-top:var(--esp-3);
  border-top:1px solid rgba(255,214,235,.18);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:rgba(255,214,235,.78);
}
/* La légende : elle explique les deux marques des chapitres. */
.esp-legende{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--esp-2);
}
.esp-legende li{
  display:flex;align-items:center;gap:var(--esp-2);
  font-size:12.5px;line-height:1.4;color:var(--esp-encre-2);
}
.esp-legende svg{flex:none;color:var(--esp-encre-3)}

@media (max-width:640px){
  .esp-confiance{padding:var(--esp-4);gap:var(--esp-3)}
  .esp-chapitre--prive{padding:0 var(--esp-4) var(--esp-5)}
  .esp-enreg__b{width:100%}
  .esp-enreg__aide{flex:1 1 100%}
}

/* --- Le débordement à 320 px -------------------------------------------
   Mesuré : 160 px de trop. Deux causes, et aucune n'est le formulaire.

   1. « .esp-hero__los » est un losange décoratif de 368 px posé en absolu.
      Sur un téléphone il sort du bandeau et pousse le document. On le
      coupe — au bandeau de CETTE page seulement, pour ne rien changer à
      celui de la vue d'ensemble, qui est validé.
   2. l'en-tête de chapitre est une grille « auto minmax(0,1fr) » : la
      colonne « auto » du numéro plus un titre long dépassaient la mesure
      disponible. Le titre peut se couper, et la grille se réduire. */
.esp-hero--entreprise{overflow:hidden}
.esp-chapitre,
.esp-chapitre__tete,
.esp-chapitre__tete > div{min-width:0}
.esp-chapitre__t{overflow-wrap:anywhere;text-wrap:balance}
@media (max-width:520px){
  /* Le numéro passe au-dessus : à 320 px, une colonne de plus coûte trop. */
  .esp-chapitre__tete{grid-template-columns:minmax(0,1fr)}
  .esp-chapitre__n{grid-row:auto}
  .esp-destination{grid-column:auto}
}

/* La sortie du bloc d'identité — « je ne dispose pas de numéro SIRET » et
   ce qu'elle ouvre. La classe était mappée mais n'avait aucune règle : le
   bouton retombait sur l'habillage natif du navigateur, avec sa bordure. */
.esp-sortie{margin:var(--esp-2) 0 0}
.esp .esp-lien--discret,
.esp-sortie button{
  padding:0;border:0;background:none;font:inherit;font-size:12.5px;
  color:var(--esp-encre-3);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.esp-sortie button:hover{color:var(--esp-framboise,#951753)}
.esp-sortie button:focus-visible{
  outline:2px solid var(--esp-accent);outline-offset:3px;border-radius:2px;
}

/* --- Ce que dit le registre, proposé sous le champ ---------------------- */
.esp-registre{
  display:flex;align-items:baseline;gap:var(--esp-2);flex-wrap:wrap;
  color:var(--esp-encre-2);
}
.esp-registre b{font-weight:600;color:var(--esp-encre)}
.esp-registre__b{
  padding:0;border:0;background:none;font:inherit;font-weight:600;
  color:var(--esp-accent);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.esp-registre__b:hover{color:#951753}
.esp-registre__b:focus-visible{
  outline:2px solid var(--esp-accent);outline-offset:3px;border-radius:2px;
}
.esp-registre--fait{color:var(--esp-vert)}

/* =========================================================================
   MES ANNONCES — la page de pilotage

   Première version : un titre isolé dans un grand vide, un petit trait rose
   sous lui, un bouton framboise décroché à l'autre bout, une recherche
   longue comme la page, un tri dans sa boîte, et un tableau. Réorganisé,
   mais froid.

   Ici, la MATIÈRE de la vue d'ensemble, à une autre échelle : un bandeau
   prune compact, une synthèse translucide, une zone de commandes qui
   CHEVAUCHE le bandeau, et des lignes éditoriales dans une surface.
   Rien n'est copié de la vue d'ensemble : ses classes ne sont pas touchées,
   seules « .esp-hero__los » et « .esp-hero__cta » sont réemployées — le
   losange de fond et le bouton clair, qui sont la signature.
   ========================================================================= */

/* --- 1. LE BANDEAU ------------------------------------------------------ */
.esp-bandeau{
  position:relative;overflow:hidden;
  /* Compact : environ 200 px, contre 400 pour la vue d'ensemble. Mesuré à
     264 px avec « --esp-7 » en haut et en bas ; « --esp-6 » le ramène dans
     la fourchette. La dernière valeur réserve le chevauchement. */
  padding:var(--esp-6) var(--esp-8) calc(var(--esp-6) + 26px);
  border-radius:18px;
  color:#FFFBFD;
  background:
    radial-gradient(74% 120% at 2% 0%,rgba(233,150,190,.24) 0%,rgba(233,150,190,0) 58%),
    radial-gradient(60% 130% at 100% 40%,rgba(201,45,120,.34) 0%,rgba(201,45,120,0) 62%),
    linear-gradient(142deg,#54143A 0%,#40102A 46%,#2E0B1D 100%);
  box-shadow:
    0 1px 2px rgba(50,21,37,.06),
    0 24px 56px -34px rgba(58,12,36,.52);
}
.esp-bandeau::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,
    rgba(255,214,235,0) 0%,rgba(255,214,235,.34) 30%,
    rgba(255,255,255,.44) 52%,rgba(255,214,235,.28) 74%,rgba(255,214,235,0) 100%);
}
/* Les losanges de la vue d'ensemble, à l'échelle de ce bandeau. */
.esp-bandeau__los{transform:scale(.72)}
.esp-bandeau__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px);
  gap:var(--esp-8);align-items:center;
}
.esp-bandeau__dire{min-width:0;display:grid;gap:var(--esp-2);justify-items:start}
.esp-bandeau__sur{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,214,235,.74);
}
.esp-bandeau__t{
  margin:0;font-size:clamp(26px,2.6vw,34px);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:#FFFBFD;
}
.esp-bandeau__p{
  margin:0 0 var(--esp-3);font-size:14.5px;line-height:1.55;
  color:rgba(255,246,250,.82);max-width:46ch;
}

/* --- La synthèse : UN panneau, comme « Profil complété » ---------------- */
.esp-synthese{
  display:grid;gap:var(--esp-2);
  padding:var(--esp-5);
  border:1px solid rgba(255,214,235,.16);
  border-radius:var(--esp-r-lg);
  background:rgba(255,255,255,.06);
}
.esp-synthese__l{
  display:flex;align-items:center;gap:var(--esp-2);margin:0;
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,214,235,.72);
}
/* LE losange nacré. Un seul, et c'est tout le shiny de ce panneau. */
.esp-synthese__los{
  width:9px;height:9px;rotate:45deg;border-radius:1px;flex:none;
  background:radial-gradient(62% 62% at 33% 29%,#FFFFFF 0%,#FFEAF4 44%,#FFC6DE 100%);
  box-shadow:0 0 10px rgba(255,150,196,.46);
}
.esp-synthese__n{
  display:flex;align-items:baseline;gap:var(--esp-2);margin:0;
  font-size:34px;font-weight:600;line-height:1;letter-spacing:-.026em;
  color:#FFFBFD;font-variant-numeric:tabular-nums;
}
.esp-synthese__u{
  font-size:13.5px;font-weight:500;letter-spacing:-.006em;
  color:rgba(255,214,235,.78);
}
.esp-synthese__detail{
  display:flex;align-items:center;gap:var(--esp-3);margin:var(--esp-2) 0 0;
  font-size:13px;color:rgba(255,246,250,.82);flex-wrap:wrap;
}
.esp-synthese__detail b{font-weight:600;color:#FFFBFD;font-variant-numeric:tabular-nums}
.esp-synthese__sep{
  width:1px;height:12px;background:rgba(255,214,235,.28);flex:none;
}

/* --- 2. LA ZONE DE COMMANDES, qui chevauche le bandeau ------------------ */
.esp-commandes{
  position:relative;z-index:2;
  margin:-26px var(--esp-6) 0;
  border:1px solid rgba(201,45,120,.12);
  border-radius:16px;
  background:var(--esp-surface);
  box-shadow:
    0 1px 2px rgba(50,21,37,.04),
    0 18px 40px -28px rgba(70,20,50,.30);
  overflow:hidden;
}
.esp-commandes__arete{
  position:absolute;inset:0 0 auto;height:1px;z-index:1;
  background:linear-gradient(90deg,
    rgba(201,45,120,0) 0%,rgba(201,45,120,.20) 34%,
    rgba(255,255,255,.60) 52%,rgba(201,45,120,.14) 70%,rgba(201,45,120,0) 100%);
}
.esp-commandes__in{
  display:grid;
  /* Deux cinquièmes pour la recherche, le reste aux statuts, le tri à sa
     mesure. La recherche n'occupe plus presque toute la largeur. */
  grid-template-columns:minmax(0,42fr) minmax(0,38fr) auto;
  align-items:center;
}
/* Les filets verticaux, comme entre les indicateurs de la vue d'ensemble. */
.esp-commandes__zone{
  min-width:0;padding:var(--esp-3) var(--esp-4);
  border-left:1px solid var(--esp-ligne);
}
.esp-commandes__zone:first-of-type{border-left:0}
.esp-commandes__zone--tri{
  display:flex;align-items:center;gap:var(--esp-3);flex:none;
}
.esp-commandes__tri{width:auto;min-width:198px;border-color:transparent;background:transparent}
.esp-commandes__tri:hover{border-color:var(--esp-ligne-2);background:var(--esp-blanc)}
.esp-commandes__raz{
  font-size:13px;font-weight:600;color:var(--esp-encre-3);
  text-decoration:underline;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;
}
.esp-commandes__raz:hover{color:var(--esp-accent)}

/* La recherche : sans cadre à elle, elle appartient à la surface. */
.esp-rech{position:relative;min-width:0}
.esp-rech__ico{
  position:absolute;left:var(--esp-3);top:50%;translate:0 -50%;
  display:grid;place-items:center;color:var(--esp-encre-3);pointer-events:none;
}
.esp-rech__i{
  padding-left:42px;border-color:transparent;background:transparent;
}
.esp-rech__i:hover{border-color:var(--esp-ligne-2);background:var(--esp-blanc)}

/* --- Les statuts -------------------------------------------------------- */
.esp-statuts{display:flex;align-items:center;gap:var(--esp-1);flex-wrap:wrap}
.esp-statut{
  display:inline-flex;align-items:center;gap:var(--esp-2);
  min-height:44px;padding:0 var(--esp-3);
  border-radius:var(--esp-r);
  font-size:13.5px;font-weight:600;letter-spacing:-.006em;
  color:var(--esp-encre-2);text-decoration:none;
  transition:background-color var(--esp-t),color var(--esp-t);
}
.esp-statut:hover{background:var(--esp-rose-voile);color:var(--esp-encre)}
.esp-statut__n{
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--esp-encre-3);
}
/* L'actif : une surface rose très pâle et un petit losange. Pas un gros
   bouton rempli. */
.esp-statut[aria-current="page"]{
  background:var(--esp-rose-pale);color:var(--esp-encre);
  box-shadow:inset 0 0 0 1px rgba(201,45,120,.16);
}
.esp-statut[aria-current="page"]::before{
  content:"";width:6px;height:6px;rotate:45deg;border-radius:1px;flex:none;
  background:var(--esp-accent);
}
.esp-statut[aria-current="page"] .esp-statut__n{color:var(--esp-accent)}

/* --- 3. LA LISTE -------------------------------------------------------- */
.esp-liste{
  position:relative;overflow:hidden;
  margin-top:var(--esp-6);
  border:1px solid var(--esp-ligne);border-radius:20px;
  background:var(--esp-blanc);
}
.esp-liste__barre{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);
  padding:var(--esp-4) var(--esp-5);
  border-bottom:1px solid var(--esp-ligne);
  background:var(--esp-rose-voile);
}
.esp-liste__n{margin:0;font-size:14.5px;font-weight:600;color:var(--esp-encre)}
.esp-liste__tri{margin:0;font-size:12.5px;color:var(--esp-encre-3)}

/* --- Les lignes éditoriales ---------------------------------------------
   La structure du tableau est conservée — elle est juste, et elle aligne —
   mais son habillage de tableur ne l'est plus : plus de fond d'en-tête, un
   filet très léger entre les lignes, et de la hauteur. */
.esp-liste .esp-tableau{border:0;border-radius:0;background:none}
.esp-liste .esp-tableau thead th{
  padding:var(--esp-3) var(--esp-5);
  border-bottom:1px solid var(--esp-ligne);
  background:none;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--esp-encre-3);
}
.esp-liste .esp-tableau tbody td{
  /* 88 à 100 px : la hauteur vient du rembourrage, pas d'une règle fixe —
     une référence longue ou deux lignes de dates ne doivent pas couper. */
  padding:var(--esp-4) var(--esp-5);
  border-top:1px solid var(--esp-ligne);
  vertical-align:middle;
}
.esp-liste .esp-tableau tbody tr:first-child td{border-top:0}
/* La teinte alternée, à peine perceptible : ce n'est pas un tableau rayé,
   c'est une respiration. */
.esp-liste .esp-tableau tbody tr:nth-child(even){background:rgba(253,244,248,.44)}
.esp-liste .esp-tableau tbody tr{
  position:relative;
  transition:background-color var(--esp-t);
}
.esp-liste .esp-tableau tbody tr:hover{background:var(--esp-rose-voile)}
/* L'arête framboise au survol : trois pixels, sur la première cellule. */
.esp-liste .esp-tableau tbody tr td:first-child{
  box-shadow:inset 3px 0 0 transparent;
  transition:box-shadow var(--esp-t);
}
.esp-liste .esp-tableau tbody tr:hover td:first-child{
  box-shadow:inset 3px 0 0 var(--esp-accent);
}
.esp-liste .esp-tableau__t{
  font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--esp-encre);
  transition:color var(--esp-t);
}
.esp-liste .esp-tableau tbody tr:hover .esp-tableau__t{color:var(--esp-framboise,#951753)}
/* La référence, précédée de son losange discret. */
.esp-tableau__m{
  display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;
  margin-top:4px;font-size:12.5px;color:var(--esp-encre-3);
}
.esp-ref{
  display:inline-flex;align-items:center;gap:6px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.esp-ref::before{
  content:"";width:5px;height:5px;rotate:45deg;border-radius:1px;flex:none;
  background:var(--esp-rose);box-shadow:inset 0 0 0 1px rgba(201,45,120,.24);
}

/* --- Les candidatures : un nombre, puis son mot ------------------------- */
.esp-cand{display:grid;gap:1px;line-height:1.2}
.esp-cand__n{
  font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--esp-encre);
  font-variant-numeric:tabular-nums;
}
.esp-cand__m{font-size:12px;color:var(--esp-encre-3);white-space:nowrap}
.esp-cand--sans .esp-cand__n{color:var(--esp-encre-3);font-weight:500}
.esp-cand--lien{text-decoration:none;color:inherit}
.esp-cand--lien:hover .esp-cand__n{color:var(--esp-accent)}
.esp-cand--lien:hover .esp-cand__m{color:var(--esp-encre-2)}

/* --- Ce qui appelle une action ------------------------------------------
   Une annonce à corriger reçoit un accent plus visible — et seulement
   celle-là, parce que son statut réel le justifie. */
.esp-liste .esp-tableau tbody tr[data-agir="oui"]{background:rgba(255,248,236,.62)}
.esp-liste .esp-tableau tbody tr[data-agir="oui"] td:first-child{
  box-shadow:inset 3px 0 0 var(--esp-ambre,#B4761A);
}

@media (max-width:1100px){
  .esp-commandes__in{grid-template-columns:minmax(0,1fr)}
  .esp-commandes__zone{border-left:0;border-top:1px solid var(--esp-ligne)}
  .esp-commandes__zone:first-of-type{border-top:0}
  .esp-commandes__zone--tri{justify-content:space-between}
  .esp-commandes__tri{flex:1 1 auto;min-width:0}
}
@media (max-width:860px){
  .esp-bandeau{padding:var(--esp-6) var(--esp-5) calc(var(--esp-6) + 26px)}
  .esp-bandeau__in{grid-template-columns:minmax(0,1fr);gap:var(--esp-5)}
  .esp-bandeau__dire{justify-items:stretch}
  .esp .esp-bandeau .esp-hero__cta{width:100%}
  .esp-commandes{margin-inline:0}
  /* Les statuts défilent, et le défilement se voit. */
  .esp-statuts{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding:2px 0;
    mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  }
  .esp-statuts::-webkit-scrollbar{display:none}
  .esp-statut{flex:none}
  .esp-liste__barre{padding:var(--esp-3) var(--esp-4)}
}

/* =========================================================================
   LA VISIONNEUSE DE DOCUMENT

   « Ouvrir le CV » sortait du parcours et téléchargeait le fichier. Le
   document s'examine maintenant ici, et le téléchargement est un geste
   qu'on décide.
   ========================================================================= */
/* --- LE VOILE ------------------------------------------------------------
   Il était gris-violet et trop transparent : la plateforme restait lisible
   derrière le document, la barre latérale se reconnaissait encore, et
   l'ensemble donnait l'impression d'une capture floue posée sous le PDF.

   Il est maintenant PRUNE — la teinte de la marque, jamais un gris —, plus
   opaque, et son flou est très modéré. La plateforme reste perceptible,
   juste assez pour garder le contexte ; elle ne se lit plus.

   Le flou vient UNIQUEMENT du « backdrop-filter » de ce voile. Jamais d'un
   « filter » posé sur l'application : celui-là déforme l'interface, crée
   des contextes d'empilement parasites et produit exactement l'effet sale
   qui était reproché. La saturation abaissée retire au fond ce qui
   concurrence le document, sans le teinter davantage.

   « 100vw » et « 100dvh » en plus de « inset:0 » : sur un téléphone, la
   barre d'adresse change la hauteur de la fenêtre en cours de route, et
   « dvh » suit ce mouvement. */
.esp-vis-voile{
  position:fixed;inset:0;width:100vw;height:100dvh;
  z-index:var(--mw-z-voile,1000);
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(43,12,31,.70);
  -webkit-backdrop-filter:blur(3px) saturate(.78);
  backdrop-filter:blur(3px) saturate(.78);
  overscroll-behavior:contain;
  animation:esp-vis-para 240ms ease-out both;
}
@keyframes esp-vis-para{from{opacity:0}to{opacity:1}}

.esp-vis{
  position:relative;z-index:var(--mw-z-dialogue,1010);
  display:flex;flex-direction:column;overflow:hidden;
  width:min(1180px,100%);
  /* Elle est large, mais pas plus large que ce qui se lit : un document A4
     à 1180 px est déjà confortable. */
  /* Une HAUTEUR, et pas seulement un plafond : sans elle, la boîte se
     dimensionne sur son contenu, le cadre du PDF — « flex:1 1 auto » sans
     base — s'effondre, et le document s'affiche sur cent cinquante pixels.
     Mesuré. Une visionneuse a une taille, elle ne suit pas le document. */
  /* Une marge de sécurité de seize pixels de chaque côté, et une hauteur
     qui suit la fenêtre visible. Le lecteur ne touche jamais le bord. */
  min-width:0;
  max-width:min(1180px,calc(100vw - 32px));
  height:min(calc(100dvh - 32px),1000px);
  max-height:calc(100dvh - 32px);
  border:1px solid rgba(255,214,235,.30);border-radius:var(--esp-r-lg);
  background:var(--esp-blanc);
  /* Une ombre PRUNE et diffuse, pas une masse grise. */
  box-shadow:0 30px 90px -44px rgba(43,12,31,.78);
  animation:esp-vis-monte 260ms cubic-bezier(.22,.68,.28,1) both;
}
/* Un fondu, huit pixels de montée, une échelle qui part de 0,99. Pas de
   rebond, pas de zoom de la plateforme, pas de flou animé. */
@keyframes esp-vis-monte{
  from{opacity:0;transform:translateY(8px) scale(.99)}
  to{opacity:1;transform:none}
}
@media (min-width:1100px){.esp-vis{width:min(1180px,calc(100vw - 32px))}}

/* Le reflet : UN passage, à l'ouverture, puis plus rien. */
.esp-vis__shiny{
  position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 30%,rgba(255,214,235,.34) 46%,
    rgba(255,255,255,0) 62%);
  transform:translateX(-120%);
  animation:esp-vis-shiny 900ms cubic-bezier(.4,0,.25,1) 160ms both;
}
@keyframes esp-vis-shiny{to{transform:translateX(120%)}}

.esp-vis__tete{
  flex:none;display:flex;align-items:center;gap:var(--esp-3);
  padding:var(--esp-4) var(--esp-5);
  border-bottom:1px solid var(--esp-ligne);
  background:var(--esp-rose-voile);
}
.esp-vis__ico{
  flex:none;display:grid;place-items:center;width:36px;height:36px;
  border-radius:var(--esp-r);background:var(--esp-blanc);
  color:var(--esp-encre-2);box-shadow:inset 0 0 0 1px var(--esp-ligne);
}
.esp-vis__dire{min-width:0;flex:1 1 auto}
.esp-vis__t{margin:0;font-size:14.5px;font-weight:600;color:var(--esp-encre)}
/* Un nom long ne pousse PAS les actions hors de l'écran : il se coupe. */
.esp-vis__n{
  margin:2px 0 0;font-size:12.5px;color:var(--esp-encre-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.esp-vis__poids{font-variant-numeric:tabular-nums}
.esp-vis__actes{flex:none;display:flex;align-items:center;gap:var(--esp-2)}
.esp .esp-vis__b,.esp .esp-vis__fermer{min-height:44px}
.esp .esp-vis__fermer{width:44px;padding:0}

/* La zone du document : un gris neutre très clair, pour que le papier du
   PDF se détache. Pas de carte dans la carte. */
.esp-vis__corps{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  /* Le cadre du PDF a besoin d'une base pour occuper la place. */
  height:100%;
  background:#F4F2F3;
}
.esp-vis__pdf{flex:1 1 auto;width:100%;min-height:0;border:0;display:block}
.esp-vis__img{
  flex:1 1 auto;min-height:0;width:100%;
  object-fit:contain;padding:var(--esp-5);
}

.esp-vis__attente{
  flex:1 1 auto;display:grid;gap:var(--esp-4);place-content:center;
  padding:var(--esp-7);
}
.esp-vis__sq{width:min(560px,70vw);height:200px;border-radius:var(--esp-r)}

.esp-vis__vide{
  flex:1 1 auto;display:grid;gap:var(--esp-3);place-content:center;
  justify-items:center;text-align:center;padding:var(--esp-7) var(--esp-5);
}
.esp-vis__vide-t{margin:0;font-size:16px;font-weight:600;color:var(--esp-encre)}
.esp-vis__vide-p{margin:0;font-size:13.5px;color:var(--esp-encre-2);max-width:52ch}
.esp-vis__vide-actes{display:flex;gap:var(--esp-3);flex-wrap:wrap;justify-content:center}

/* Le nom du fichier, sous le bouton. */
.esp-fichier{
  display:flex;align-items:center;gap:var(--esp-2);
  margin:var(--esp-3) 0 0;font-size:12.5px;color:var(--esp-encre-3);
}
.esp-fichier svg{flex:none}
.esp-fichier__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le poids, après le nom : il ne se coupe jamais. */
.esp-fichier__t{flex:none;color:var(--esp-encre-3);opacity:.8}

@media (max-width:860px){
  /* Presque plein écran, safe areas comprises. */
  .esp-vis-voile{
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
            max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .esp-vis{width:100%;max-width:100%;max-height:100%;height:100%}
  .esp-vis__tete{padding:var(--esp-3) var(--esp-4);gap:var(--esp-2)}
  .esp-vis__ico{display:none}
  /* Le mot disparaît, l'icône reste : le bouton garde sa cible de 44 px. */
  .esp-vis__mot{display:none}
  .esp .esp-vis__b{width:44px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .esp-vis-voile,.esp-vis,.esp-vis__shiny{animation:none}
  .esp-vis__shiny{display:none}
}

/* =========================================================================
   CANDIDATURES — la page de suivi

   Première version : un titre isolé, une phrase technique — « les
   candidatures déposées sur le formulaire Muslima Work » —, un sélecteur et
   son bouton « Filtrer », puis le tableau générique de l'administration.

   Ici, la grammaire de « Mes annonces », sans une retouche à ses classes :
   le bandeau et sa synthèse, la zone de commandes qui chevauche, la liste
   dans sa surface. Ce qui est propre aux candidatures s'appelle
   « esp-cands-* » et ne sort pas de cette section.
   ========================================================================= */

/* --- La synthèse : un nombre, puis deux précisions sous un filet --------- */
.esp-cands-bilan__l{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:var(--esp-2) 0 0;padding-top:var(--esp-3);
  border-top:1px solid rgba(255,214,235,.16);
}
.esp-cands-bilan__i{
  display:grid;grid-template-rows:1fr auto;gap:3px;min-width:0;padding-right:var(--esp-3);
}
.esp-cands-bilan__i + .esp-cands-bilan__i{
  padding:0 0 0 var(--esp-4);border-left:1px solid rgba(255,214,235,.16);
}
.esp-cands-bilan__i dt{font-size:12px;line-height:1.3;color:rgba(255,214,235,.74)}
.esp-cands-bilan__i dd{
  margin:0;font-size:20px;font-weight:600;line-height:1.1;letter-spacing:-.02em;
  color:#FFFBFD;font-variant-numeric:tabular-nums;
}

/* --- La zone de travail : deux rangées ----------------------------------
   Ce qu'on cherche sur la première — une personne, une annonce, un ordre —,
   où en est le suivi sur la seconde, sous un filet. */
.esp-cands-commandes__in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto}
.esp-cands-commandes__statuts{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);
  border-left:0;border-top:1px solid var(--esp-ligne);
}
.esp-cands-commandes__statuts .esp-statuts{flex:1 1 auto;min-width:0}
.esp-cands-commandes__select{
  width:100%;border-color:transparent;background-color:transparent;
  text-overflow:ellipsis;
}
.esp-cands-commandes__select:hover{border-color:var(--esp-ligne-2);background-color:var(--esp-blanc)}

/* Les statuts sont ici des boutons : même habillage que les liens de
   « Mes annonces », l'état actif lu sur « aria-pressed ». */
.esp-cands-commandes .esp-statut{
  border:0;background:none;font-family:inherit;cursor:pointer;
}
.esp-cands-commandes .esp-statut:hover{background:var(--esp-rose-voile);color:var(--esp-encre)}
.esp-cands-commandes .esp-statut[aria-pressed="true"]{
  background:var(--esp-rose-pale);color:var(--esp-encre);
  box-shadow:inset 0 0 0 1px rgba(201,45,120,.16);
}
.esp-cands-commandes .esp-statut[aria-pressed="true"]::before{
  content:"";width:6px;height:6px;rotate:45deg;border-radius:1px;flex:none;
  background:var(--esp-accent);
}
.esp-cands-commandes .esp-statut[aria-pressed="true"] .esp-statut__n{color:var(--esp-accent)}
.esp-cands-commandes__raz{
  flex:none;border:0;background:none;padding:0;font-family:inherit;cursor:pointer;
}

/* --- Le tableau -----------------------------------------------------------
   Cinq colonnes déclarées, comme celui des annonces : un nom long ne
   déplace ni les statuts, ni les dates, ni les boutons des autres lignes. */
.esp-cands-tableau col.esp-cands-c-qui{width:auto}
.esp-cands-tableau col.esp-cands-c-annonce{width:27%}
.esp-cands-tableau col.esp-cands-c-suivi{width:150px}
/* « 20 septembre 2026 » d'un seul tenant, rembourrage compris. */
.esp-cands-tableau col.esp-cands-c-date{width:184px}
/* Le bouton « Voir le dossier » (166 px) et les deux rembourrages de
   cellule : la colonne ne peut pas le comprimer contre le bord. */
.esp-cands-tableau col.esp-cands-c-dossier{width:212px}
.esp-cands-tableau .esp-date{white-space:nowrap}

/* Un dossier jamais ouvert : l'arête rose de la première cellule, au repos.
   Le mot « Nouvelle » est dans la colonne Suivi — l'arête ne fait que
   l'appuyer. */
.esp-cands .esp-tableau tbody tr[data-neuve="oui"] td:first-child{
  box-shadow:inset 3px 0 0 rgba(201,45,120,.38);
}
.esp-cands .esp-tableau tbody tr[data-neuve="oui"]:hover td:first-child{
  box-shadow:inset 3px 0 0 var(--esp-accent);
}

/* La candidate : un monogramme, puis trois niveaux. */
.esp-cands-qui{display:flex;align-items:center;gap:var(--esp-3);min-width:0;text-align:left}
.esp-cands-mono{
  position:relative;flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(201,45,120,.16);
  background:linear-gradient(145deg,#FFFFFF 0%,var(--esp-rose-pale) 100%);
  color:var(--esp-framboise);
  font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1;
}
/* Le losange des dossiers non ouverts. Sur fond clair : prune dégradé, un
   reflet intérieur, et un anneau blanc qui le détache du monogramme — jamais
   un losange rose posé sur du rose. */
.esp-cands-mono__neuf{
  position:absolute;top:-4px;right:-4px;
  width:10px;height:10px;rotate:45deg;border-radius:2px;
  background:linear-gradient(135deg,#9B1F5C 0%,#5A1339 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.38),0 0 0 2px var(--esp-blanc);
}
.esp-cands-qui__dire{display:grid;gap:1px;min-width:0}
.esp-cands-qui__nom{
  font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.01em;
  color:var(--esp-encre);overflow-wrap:anywhere;
}
.esp-cands-qui__mel{font-size:12.5px;line-height:1.45;color:var(--esp-encre-2);overflow-wrap:break-word}
.esp-cands-qui__tel{
  font-size:12px;line-height:1.45;color:var(--esp-encre-3);font-variant-numeric:tabular-nums;
}

/* L'annonce : entière, jamais coupée. */
.esp-cands-annonce{display:grid;gap:2px;min-width:0;text-align:left}
.esp-cands-annonce__t{
  font-size:14px;font-weight:500;line-height:1.45;color:var(--esp-encre);
  overflow-wrap:break-word;
}
.esp-cands-annonce__etat{color:var(--esp-encre-3)}

/* « Voir le dossier » : la largeur du libellé, jamais moins. */
.esp .esp-cands-voir{white-space:nowrap}

/* --- Les deux rendus -------------------------------------------------------
   Même mécanique que « Mes annonces » : les deux sont dans le document, la
   largeur RÉELLE de la page décide lequel paraît. */
.esp-cands-cartes{display:none;margin:0;padding:0;list-style:none}
@container page (max-width:780px){
  .esp-cands-tableau{display:none}
  .esp-cands-cartes{display:block}
}

/* Une ligne compacte par candidature : le monogramme ancre la ligne, le
   reste s'aligne sur le nom. */
.esp-cands-carte{
  display:grid;gap:var(--esp-2);
  padding:var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-4);
  border-top:1px solid var(--esp-ligne);
}
.esp-cands-carte:first-child{border-top:0}
.esp-cands-carte[data-neuve="oui"]{box-shadow:inset 3px 0 0 rgba(201,45,120,.38)}
.esp-cands-carte__annonce{padding-left:50px}
.esp-cands-carte__annonce .esp-cands-annonce__t{font-size:13.5px}
.esp-cands-carte__pied{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);
  padding-left:50px;
}
.esp-cands-carte__tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--esp-3);min-width:0;
}
.esp-cands-carte__date{
  flex:none;padding-top:2px;
  font-size:12px;color:var(--esp-encre-3);white-space:nowrap;
}
.esp-cands-carte__pied .esp-cands-voir{margin-left:auto}

/* Les états vides, alignés sur la barre de la liste. */
.esp-cands-vide{padding:0 var(--esp-6)}
.esp-cands-vide__in{padding:0 var(--esp-5)}

/* Sous 1100 px, « Mes annonces » empile ses zones ; la grille propre aux
   candidatures, déclarée plus haut, doit suivre — sans cette règle elle
   gardait trois colonnes et écrasait la recherche en une loupe. */
@media (max-width:1100px){
  .esp-cands-commandes__in{grid-template-columns:minmax(0,1fr)}
  .esp-cands-commandes__annonce{border-top:1px solid var(--esp-ligne)}
}
@media (max-width:860px){
  .esp-cands-commandes__statuts{flex-wrap:wrap}
}
@media (max-width:420px){
  .esp-cands-carte{padding-inline:var(--esp-3)}
  .esp-cands-carte__annonce,.esp-cands-carte__pied{padding-left:0}
  .esp-cands-vide{padding:0 var(--esp-4)}
  .esp-cands-bilan__i + .esp-cands-bilan__i{padding-left:var(--esp-3)}
}

/* =========================================================================
   AIDE — le centre d'aide

   Première version : six cartes blanches ouvertes en entier, la liste des
   dix statuts étalée en tête, un titre posé dans le vide. Les textes n'ont
   pas bougé d'un mot ; leur rangement, si.

   Le bandeau est de la même matière que ceux des pages de travail — prune,
   deux lumières, filet d'arête — mais il n'en reprend pas les losanges :
   son signe est un point d'interrogation TRACÉ, coupé par le bas.
   ========================================================================= */

/* --- 1. LE BANDEAU ------------------------------------------------------ */
.esp-bandeau--aide{padding:var(--esp-8) var(--esp-8)}
.esp-aide-signe{
  position:absolute;right:5%;bottom:-.3em;z-index:0;
  font-size:clamp(220px,24vw,360px);font-weight:600;line-height:1;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(255,214,235,.24);
  background:linear-gradient(165deg,rgba(255,214,235,.12) 0%,rgba(255,214,235,0) 64%);
  -webkit-background-clip:text;background-clip:text;
  pointer-events:none;user-select:none;
}
.esp-aide-tete{position:relative;z-index:1;max-width:640px}
.esp-aide-tete__sur{display:flex;align-items:center;gap:var(--esp-2)}
.esp-aide-tete__contact{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,236,246,.72)}
.esp .esp-aide-tete__contact a{
  color:#FFFBFD;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,214,235,.45);
  overflow-wrap:anywhere;
}
.esp .esp-aide-tete__contact a:hover{text-decoration-color:#FFFBFD}
.esp .esp-aide-tete__contact a:focus-visible{outline:2px solid #FFC9DF;outline-offset:3px}

/* --- 2. LES DEUX COLONNES ------------------------------------------------ */
.esp-centre-aide{
  display:grid;grid-template-columns:216px minmax(0,1fr);
  gap:var(--esp-9);align-items:start;
  margin-top:var(--esp-4);
}

/* Le sommaire : un filet, des liens, la rubrique lue marquée d'un trait
   framboise. Pas de carte autour. */
.esp-aide-sommaire{position:sticky;top:var(--esp-6)}
.esp-aide-sommaire__t{
  margin:0 0 var(--esp-3);
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--esp-encre-3);
}
.esp-aide-sommaire__l{
  display:grid;margin:0;padding:0;list-style:none;
  border-left:1px solid var(--esp-ligne-2);
}
.esp .esp-aide-sommaire__a{
  display:flex;align-items:center;min-height:40px;
  margin-left:-1px;padding:var(--esp-2) 0 var(--esp-2) var(--esp-4);
  border-left:2px solid transparent;
  font-size:14px;font-weight:500;line-height:1.35;color:var(--esp-encre-2);
  text-decoration:none;
  transition:color var(--esp-t),border-color var(--esp-t);
}
.esp .esp-aide-sommaire__a:hover{color:var(--esp-encre)}
.esp .esp-aide-sommaire__a[aria-current="true"]{
  border-left-color:var(--esp-framboise);color:var(--esp-encre);font-weight:600;
}

/* --- 3. LES RUBRIQUES ---------------------------------------------------- */
.esp-centre-aide__corps{display:grid;gap:var(--esp-8);min-width:0}
.esp-aide-rubrique{scroll-margin-top:var(--esp-6);min-width:0}
/* Le titre de rubrique, précédé du losange des fonds clairs : prune
   dégradé et reflet intérieur. */
.esp .esp-aide-rubrique__t{
  display:flex;align-items:center;gap:var(--esp-3);
  margin:0 0 var(--esp-2);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--esp-framboise);
}
.esp .esp-aide-rubrique__t::before{
  content:"";flex:none;width:8px;height:8px;rotate:45deg;border-radius:1.5px;
  background:linear-gradient(135deg,#9B1F5C 0%,#5A1339 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.38);
}

/* --- Les questions --------------------------------------------------------
   « .esp-acc » tel quel ; seuls le signe et la hauteur animée sont propres
   à cette page. */
.esp .esp-aide-acc__h{margin:0;font:inherit}
.esp .esp-aide-acc .esp-acc__q{
  min-height:60px;padding:var(--esp-4) var(--esp-1);
  font-size:16px;text-align:left;
}
.esp .esp-aide-acc .esp-acc__q:focus-visible{outline-offset:-2px}
/* Le signe est TOUJOURS un losange : clair au repos, prune quand la
   réponse est ouverte. La croix, à l'intérieur, est redressée et se replie
   en trait. */
.esp-aide-acc .esp-acc__s{
  rotate:45deg;width:24px;height:24px;border-radius:5px;
  border-color:rgba(90,19,57,.22);
  background:linear-gradient(145deg,#FFFFFF 0%,var(--esp-rose-pale) 100%);
  color:var(--esp-prune-3);
}
.esp-aide-acc .esp-acc__q:hover .esp-acc__s{border-color:rgba(149,23,83,.45);color:var(--esp-framboise)}
.esp-aide-acc .esp-acc__q[aria-expanded="true"] .esp-acc__s{
  rotate:45deg;border-color:transparent;color:#FFFBFD;
  background:linear-gradient(135deg,#8E1B55 0%,#45122F 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.32),0 6px 14px -8px rgba(69,18,47,.7);
}
.esp-aide-acc__plus{position:relative;width:10px;height:10px;rotate:-45deg}
.esp-aide-acc__plus::before,.esp-aide-acc__plus::after{
  content:"";position:absolute;left:0;top:50%;width:10px;height:1.6px;margin-top:-.8px;
  border-radius:1px;background:currentColor;
  transition:transform var(--esp-t);
}
.esp-aide-acc__plus::after{transform:rotate(90deg)}
.esp-acc__q[aria-expanded="true"] .esp-aide-acc__plus::after{transform:rotate(90deg) scaleX(0)}

/* La hauteur s'anime de « 0fr » à « 1fr » : aucune mesure en JavaScript,
   aucune hauteur fixe. La réponse fermée est « inert » dans le balisage. */
.esp-aide-acc__env{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 260ms cubic-bezier(.22,.68,.28,1);
}
.esp-acc__item[data-ouvert="oui"] > .esp-aide-acc__env{grid-template-rows:1fr}
.esp .esp-aide-acc__r{
  min-height:0;overflow:hidden;padding:0 var(--esp-1);
  opacity:0;transform:translateY(-4px);
  transition:opacity 220ms ease,transform 260ms cubic-bezier(.22,.68,.28,1);
}
.esp-acc__item[data-ouvert="oui"] .esp-aide-acc__r{opacity:1;transform:none}
.esp-aide-acc__r > :first-child{margin-top:0}
.esp-aide-acc__r > :last-child{margin-bottom:var(--esp-6)}

.esp .esp-centre-aide__p{
  margin:0 0 var(--esp-3);
  font-size:15px;line-height:1.7;color:var(--esp-encre-2);max-width:72ch;
}
.esp .esp-centre-aide__lien{
  color:var(--esp-framboise);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(149,23,83,.35);
}
.esp .esp-centre-aide__lien:hover{color:var(--esp-accent);text-decoration-color:currentColor}

/* La légende des statuts : étiquette à gauche, phrase à droite, un filet
   entre les lignes. Pas une carte par statut. */
.esp-aide-etats{display:grid;margin:0 0 var(--esp-6);max-width:880px}
.esp-aide-etats__l{
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--esp-4);
  align-items:start;
  padding:var(--esp-3) 0;
  border-top:1px solid var(--esp-ligne);
}
.esp-aide-etats__l:first-child{border-top:0;padding-top:var(--esp-1)}
.esp-aide-etats dt{margin:0}
.esp-aide-etats dd{
  margin:0;padding-top:2px;
  font-size:14px;line-height:1.6;color:var(--esp-encre-2);
}

/* --- 4. LE CONTACT -------------------------------------------------------
   Une ligne, sous un filet dont l'arête prend la lumière — la même que la
   zone de commandes des listes. */
.esp-aide-contact{
  position:relative;scroll-margin-top:var(--esp-6);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--esp-5) var(--esp-8);flex-wrap:wrap;
  padding-top:var(--esp-7);
}
.esp-aide-contact::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,
    var(--esp-ligne-2) 0%,rgba(201,45,120,.30) 30%,
    rgba(201,45,120,.10) 70%,var(--esp-ligne) 100%);
}
.esp-aide-contact__dire{min-width:0;flex:1 1 380px}
.esp .esp-aide-contact__t{
  margin:0 0 var(--esp-2);
  font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.016em;color:var(--esp-encre);
}
.esp-aide-contact__p{
  margin:0;font-size:14.5px;line-height:1.65;color:var(--esp-encre-2);max-width:62ch;
}
.esp-aide-contact__actes{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-3);flex:0 1 auto;
}
.esp .esp-aide-contact__adresse{
  display:inline-flex;align-items:center;min-height:var(--esp-bouton-h);
  padding:0 var(--esp-4);
  border:1px solid rgba(201,45,120,.18);border-radius:var(--esp-r);
  background:var(--esp-rose-voile);
  font-size:15.5px;font-weight:600;letter-spacing:-.006em;color:var(--esp-prune);
  text-decoration:none;white-space:nowrap;
  transition:border-color var(--esp-t),color var(--esp-t);
}
.esp .esp-aide-contact__adresse:hover{border-color:rgba(201,45,120,.42);color:var(--esp-framboise)}

.esp-aide-copier__pile{display:grid}
.esp-aide-copier__pile > span{grid-area:1 / 1}
.esp-aide-copier__gabarit{visibility:hidden}
.esp .esp-aide-copier[data-etat="copiee"]{
  border-color:var(--esp-vert-ligne);background:var(--esp-vert-fond);color:var(--esp-vert);
}
.esp-aide-copier__aide{flex-basis:100%;font-size:12.5px;color:var(--esp-encre-3)}

/* --- Tablette et téléphone ----------------------------------------------- */
@media (max-width:1100px){
  .esp-centre-aide{grid-template-columns:188px minmax(0,1fr);gap:var(--esp-7)}
  .esp-aide-etats__l{grid-template-columns:200px minmax(0,1fr)}
}
@media (max-width:860px){
  .esp-bandeau--aide{padding:var(--esp-7) var(--esp-5)}
  .esp-aide-signe{right:-4%;font-size:220px;-webkit-text-stroke-color:rgba(255,214,235,.18)}

  /* Le sommaire devient une rangée qu'on fait défiler du doigt. */
  .esp-centre-aide{grid-template-columns:minmax(0,1fr);gap:var(--esp-6);margin-top:var(--esp-2)}
  .esp-aide-sommaire{position:static;min-width:0}
  .esp-aide-sommaire__t{margin-bottom:var(--esp-2)}
  .esp-aide-sommaire__l{
    display:flex;gap:var(--esp-2);border-left:0;
    overflow-x:auto;scrollbar-width:none;padding:2px 0;
    mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
  }
  .esp-aide-sommaire__l::-webkit-scrollbar{display:none}
  .esp-aide-sommaire__l li{flex:none}
  .esp .esp-aide-sommaire__a{
    margin:0;padding:0 var(--esp-3);min-height:40px;
    border:1px solid var(--esp-ligne-2);border-radius:var(--esp-r);
    background:var(--esp-surface);white-space:nowrap;
  }
  .esp .esp-aide-sommaire__a[aria-current="true"]{
    border-color:rgba(201,45,120,.30);background:var(--esp-rose-pale);
  }
  /* L'en-tête mobile colle en haut : 56 px, plus de l'air. */
  .esp-aide-rubrique,.esp-aide-contact{scroll-margin-top:76px}
  .esp-centre-aide__corps{gap:var(--esp-7)}
}
@media (max-width:560px){
  .esp-aide-signe{font-size:190px;right:-10%;bottom:-.34em}
  .esp .esp-aide-acc .esp-acc__q{font-size:15px}
  .esp-aide-etats__l{grid-template-columns:minmax(0,1fr);gap:var(--esp-2)}
  .esp-aide-contact__actes{width:100%}
  .esp .esp-aide-contact__adresse{flex:1 1 auto;justify-content:center}
  .esp .esp-aide-copier{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .esp-aide-acc__env,.esp .esp-aide-acc__r,.esp-aide-acc__plus::before,
  .esp-aide-acc__plus::after,.esp .esp-aide-sommaire__a,
  .esp .esp-aide-contact__adresse{transition:none}
  .esp .esp-aide-acc__r{transform:none}
}

/* =========================================================================
   16. LA CRÉATION DE L'ESPACE — /espace-recruteur/bienvenue

   Le premier écran d'un compte neuf. Il était un long formulaire posé sur
   une page blanche, sans rien de l'espace autour : on pouvait croire être
   ailleurs. Il reprend désormais les pièces du tableau de bord, telles
   quelles — « .esp-hero », « .esp-avance » et leurs losanges —, et n'ajoute
   que ce qui lui est propre : le sommaire des étapes, la carte, l'aperçu,
   le récapitulatif.

   LES MESURES. Une page de 1 000 px au plus : le bandeau en occupe toute la
   largeur, et dessous, deux colonnes — le sommaire (236 px) et la carte
   (660 px au plus). Un formulaire n'a jamais besoin de plus ; au-delà, un
   champ « Ville » s'étire sur 800 px et ne se lit pas mieux.

   Le mouvement vient de GSAP (déjà présent), piloté par le composant : un
   fondu de 8 px entre deux étapes, une pulsation du losange. Rien de
   permanent, et rien du tout sous « prefers-reduced-motion ».
   ========================================================================= */
.esp-onb{min-height:100vh;min-height:100dvh;background:var(--esp-fond)}

/* L'évitement : invisible jusqu'au premier Tab. */
.esp .esp-onb__evitement{
  position:absolute;left:var(--esp-4);top:-60px;z-index:10;
  padding:var(--esp-2) var(--esp-4);border-radius:var(--esp-r);
  background:var(--esp-prune);color:#FFFBFD;font-weight:600;text-decoration:none;
}
.esp .esp-onb__evitement:focus{top:var(--esp-3)}

/* --- La barre haute -------------------------------------------------------
   Le logo et le compte. Pas de navigation : tant que l'espace n'existe pas,
   il n'y a nulle part où aller. */
.esp-onb__barre{border-bottom:1px solid var(--esp-ligne);background:var(--esp-surface)}
.esp-onb__barre-in{
  box-sizing:border-box;max-width:1000px;margin:0 auto;
  min-height:60px;padding:var(--esp-2) var(--esp-6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);
}
.esp-onb__marque{
  display:inline-flex;align-items:center;gap:var(--esp-2);min-width:0;
  font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--esp-prune);
}
.esp-onb__marque img{flex:none;display:block}
.esp-onb__marque-sous{
  padding-left:var(--esp-3);margin-left:var(--esp-1);
  border-left:1px solid var(--esp-ligne-2);
  font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--esp-encre-3);
}
.esp-onb__compte{display:flex;align-items:center;gap:var(--esp-2);min-width:0}
.esp-onb__compte form{margin:0}
.esp-onb__email{
  min-width:0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;color:var(--esp-encre-2);
}

/* --- La page ------------------------------------------------------------- */
.esp-onb__page{
  box-sizing:border-box;max-width:1000px;margin:0 auto;
  padding:var(--esp-7) var(--esp-6) var(--esp-10);
}

/* --- Le bandeau -----------------------------------------------------------
   Le « .esp-hero » du tableau de bord. Une seule différence : son rembourrage
   bas était réservé aux indicateurs qui le chevauchent ; il n'y en a pas ici. */
.esp-onb__hero{padding:var(--esp-8) var(--esp-9)}
.esp-onb__hero-in{grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:var(--esp-8);align-items:center}
.esp-onb__hero-p{margin-bottom:0;max-width:46ch}

/* Les petits losanges lumineux : trois, fixes, jamais animés en boucle. */
.esp-onb__eclat{
  position:absolute;width:7px;height:7px;rotate:45deg;border-radius:1.5px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FDEAF3 100%);
  box-shadow:0 0 10px rgba(240,179,210,.8);pointer-events:none;
}
.esp-onb__eclat--1{top:26px;right:34%;opacity:.8}
.esp-onb__eclat--2{bottom:30px;left:44%;width:5px;height:5px;opacity:.55}
.esp-onb__eclat--3{top:44%;right:22px;width:5px;height:5px;opacity:.5}

/* La jauge : les pièces du « Profil complété », et le nom de l'étape. */
.esp-onb__avance{position:relative;z-index:1;gap:var(--esp-2)}
.esp-onb__avance .esp-avance__rail{margin-top:var(--esp-2)}
.esp-onb__avance-nom{margin:0;font-size:15px;font-weight:600;color:#FFFBFD;letter-spacing:-.01em}
.esp-onb__avance .esp-avance__plein{transition:width 480ms cubic-bezier(.22,.68,.28,1)}
.esp-onb__avance .esp-avance__los{transition:left 480ms cubic-bezier(.22,.68,.28,1)}

/* --- Le corps : le sommaire, puis la carte -------------------------------- */
.esp-onb__corps{
  display:grid;grid-template-columns:236px minmax(0,660px);
  justify-content:center;gap:var(--esp-9);
  margin-top:var(--esp-8);
}

/* --- Le sommaire des étapes ------------------------------------------------
   Vertical, relié par un filet ; il suit le défilement. La page n'a pas
   d'en-tête fixe : 24 px au-dessus suffisent. */
.esp-onb__etapes{position:sticky;top:var(--esp-6);align-self:start}
.esp-onb__liste{list-style:none;margin:0;padding:0}
.esp-onb__etape{position:relative;padding-bottom:var(--esp-5)}
.esp-onb__etape:last-child{padding-bottom:0}
.esp-onb__etape:not(:last-child)::before{
  content:"";position:absolute;left:16px;top:38px;bottom:2px;width:1px;
  background:var(--esp-ligne-2);
}
.esp-onb__etape[data-etat="faite"]:not(:last-child)::before{
  background:linear-gradient(180deg,rgba(201,45,120,.55) 0%,rgba(201,45,120,.18) 100%);
}
.esp .esp-onb__pas{
  display:flex;align-items:center;gap:var(--esp-3);
  width:100%;min-height:var(--esp-cible);padding:0;border:0;background:none;
  font:inherit;text-align:left;color:var(--esp-encre-2);cursor:pointer;
  border-radius:var(--esp-r);
}
.esp .esp-onb__pas:disabled{cursor:default}
.esp-onb__n{
  position:relative;flex:none;display:grid;place-items:center;
  width:33px;height:33px;border-radius:50%;
  border:1px solid var(--esp-ligne-2);background:var(--esp-surface);
  font-size:13px;font-weight:600;color:var(--esp-encre-3);font-variant-numeric:tabular-nums;
  transition:background-color var(--esp-t),border-color var(--esp-t),color var(--esp-t),box-shadow var(--esp-t);
}
.esp-onb__pas-txt{display:grid;gap:1px;min-width:0}
.esp-onb__pas-t{font-size:14px;font-weight:500;color:var(--esp-encre-2);line-height:1.3}
.esp-onb__pas-etat{font-size:12px;color:var(--esp-encre-3)}

/* Active : le prune du bandeau, et un petit losange lumineux à son épaule. */
.esp-onb__etape[data-etat="active"] .esp-onb__n{
  border-color:transparent;color:#FFFBFD;
  background:linear-gradient(142deg,#7C1648 0%,#54143A 60%,#40102A 100%);
  box-shadow:0 0 0 4px rgba(201,45,120,.12),0 6px 16px -8px rgba(84,20,58,.6);
}
.esp-onb__etape[data-etat="active"] .esp-onb__n::after{
  content:"";position:absolute;top:-2px;right:-3px;width:7px;height:7px;
  rotate:45deg;border-radius:1.5px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FDEAF3 100%);
  border:1px solid rgba(201,45,120,.35);
  box-shadow:0 0 8px rgba(240,179,210,.9);
}
.esp-onb__etape[data-etat="active"] .esp-onb__pas-t{color:var(--esp-encre);font-weight:600}
.esp-onb__etape[data-etat="active"] .esp-onb__pas-etat{color:var(--esp-framboise)}

/* Terminée : une coche framboise sur un rose pâle. */
.esp-onb__etape[data-etat="faite"] .esp-onb__n{
  border-color:rgba(201,45,120,.30);background:var(--esp-rose);color:var(--esp-framboise);
}
.esp-onb__etape[data-etat="faite"] .esp-onb__pas-t{color:var(--esp-encre)}
.esp .esp-onb__pas:not(:disabled):hover .esp-onb__pas-t{color:var(--esp-framboise)}
.esp .esp-onb__pas:not(:disabled):hover .esp-onb__n{border-color:rgba(201,45,120,.5)}
.esp-onb__etape[data-etat="avenir"] .esp-onb__pas:disabled{opacity:.72}

/* --- La carte -------------------------------------------------------------
   Une seule, un filet rosé, pas d'ombre lourde. Rien d'imbriqué dedans qui
   refasse une carte : l'aperçu et le récapitulatif sont des aplats. */
.esp-onb__carte{
  min-width:0;
  padding:var(--esp-8) var(--esp-8) var(--esp-7);
  border:1px solid rgba(201,45,120,.16);border-radius:var(--esp-r-lg);
  background:var(--esp-surface);
  box-shadow:0 1px 2px rgba(50,21,37,.03),0 18px 40px -34px rgba(70,20,50,.30);
}
.esp-onb__carte form{display:grid;gap:var(--esp-6);margin:0}
.esp-onb__legende{margin:var(--esp-3) 0 0;font-size:12.5px;color:var(--esp-encre-3)}
.esp-onb__alerte{margin:0}
.esp-onb__section{display:grid;gap:var(--esp-6);min-width:0}
.esp-onb__section[hidden]{display:none}

.esp-onb__tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--esp-4);
  flex-wrap:wrap;
}
.esp-onb__tete > div{min-width:0;flex:1 1 320px}
.esp-onb__sur{
  margin:0 0 var(--esp-surtitre-titre);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--esp-framboise);
}
.esp-onb__t{
  margin:0;font-size:clamp(21px,1vw + 15px,25px);font-weight:600;line-height:1.2;
  letter-spacing:-.024em;color:var(--esp-encre);text-wrap:balance;
}
.esp-onb__t:focus{outline:none}
.esp-onb__t:focus-visible{outline:2px solid var(--esp-accent);outline-offset:4px}
.esp-onb__p{margin:var(--esp-titre-intro) 0 0;font-size:14.5px;line-height:1.62;color:var(--esp-encre-2);max-width:54ch}
/* Le badge, dans la tête et non perdu à droite de la carte. */
.esp-onb__badge{grid-column:auto;flex:none;margin-top:2px;align-self:flex-start}

/* Les champs : jamais plus larges que la carte, et les courts restent courts. */
.esp-onb .esp-champ--court .esp-i{max-width:180px}
.esp-onb [aria-invalid="true"]{border-color:var(--esp-rouge)}
.esp-onb [aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(138,27,51,.14)}
.esp-onb__identite{align-items:start}

/* La sortie « sans SIRET » en bouton secondaire, et non en lien gris :
   c'est une issue réelle. Même habillage pour son retour. */
.esp .esp-sortie--bouton button{
  display:inline-flex;align-items:center;min-height:40px;
  padding:var(--esp-2) var(--esp-4);
  border:1px solid var(--esp-ligne-2);border-radius:var(--esp-r);
  background:var(--esp-surface);
  font:inherit;font-size:13.5px;font-weight:600;
  color:var(--esp-encre);text-decoration:none;cursor:pointer;
  transition:background-color var(--esp-t),border-color var(--esp-t),color var(--esp-t);
}
.esp .esp-sortie--bouton button:hover{
  background:var(--esp-rose-pale);border-color:rgba(201,45,120,.34);color:var(--esp-framboise);
}

/* --- L'aperçu de la fiche ------------------------------------------------- */
.esp-onb__apercu{
  display:grid;gap:var(--esp-3);
  padding:var(--esp-4) var(--esp-5);
  border-radius:var(--esp-r-lg);
  background:linear-gradient(180deg,var(--esp-rose-voile) 0%,var(--esp-ivoire) 100%);
  border:1px dashed rgba(201,45,120,.22);
}
.esp-onb__apercu-l{
  margin:0;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--esp-encre-3);
}
.esp-onb__fiche{display:flex;align-items:center;gap:var(--esp-4);min-width:0}
.esp-onb__initiales{
  position:relative;flex:none;display:grid;place-items:center;
  width:48px;height:48px;border-radius:12px;overflow:hidden;
  background:
    radial-gradient(80% 90% at 10% 0%,rgba(233,150,190,.35) 0%,rgba(233,150,190,0) 60%),
    linear-gradient(142deg,#54143A 0%,#40102A 55%,#2E0B1D 100%);
  color:#FFFBFD;font-size:17px;font-weight:600;letter-spacing:.02em;
}
/* Sans nom encore : un losange clair à la place des initiales. */
.esp-onb__initiales[data-vide="oui"]::after{
  content:"";width:12px;height:12px;rotate:45deg;border-radius:2px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FDEAF3 100%);
  box-shadow:0 0 10px rgba(240,179,210,.7);
}
.esp-onb__fiche-txt{min-width:0}
.esp-onb__fiche-nom{
  margin:0;font-size:16px;font-weight:600;letter-spacing:-.014em;color:var(--esp-encre);
  overflow-wrap:anywhere;
}
.esp-onb__fiche-nom[data-vide="oui"]{color:var(--esp-encre-3);font-weight:500}
.esp-onb__fiche-meta{margin:2px 0 0;font-size:13px;color:var(--esp-encre-2);overflow-wrap:anywhere}

/* --- Le récapitulatif ------------------------------------------------------ */
.esp-onb__recap{display:grid;gap:var(--esp-5)}
.esp-onb__bloc{padding-top:var(--esp-4);border-top:1px solid var(--esp-ligne)}
.esp-onb__bloc:first-child{padding-top:0;border-top:0}
.esp-onb__bloc-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);margin-bottom:var(--esp-2)}
.esp-onb__bloc-t{margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--esp-encre)}
.esp-onb__dl{margin:0;display:grid;gap:var(--esp-2)}
.esp-onb__ligne{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:var(--esp-4)}
.esp-onb__ligne dt{font-size:13.5px;color:var(--esp-encre-3)}
.esp-onb__ligne dd{margin:0;font-size:14px;color:var(--esp-encre);overflow-wrap:anywhere}
.esp-onb__ligne dd[data-vide="oui"]{color:var(--esp-encre-3);font-style:italic}

/* Les libellés du bloc d'identité sont des <label> nus : l'apparence
   « recruteur » ne leur donnait pas la graisse des autres. Même tenue que
   « .esp-l », ici comme dans « Mon entreprise ». */
.esp .esp-champ > label:not(.esp-l){
  font-size:13.5px;font-weight:600;letter-spacing:-.004em;color:var(--esp-encre);
}

/* La ligne « Étape 2 sur 4 — … », pour les petits écrans seulement. */
.esp-onb__ou{display:none}

/* --- Le pied de carte ------------------------------------------------------ */
.esp-onb__pied{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);
  padding-top:var(--esp-6);border-top:1px solid var(--esp-ligne);
}
.esp .esp-onb__suivant{min-width:200px;min-height:48px;padding-inline:var(--esp-6)}
.esp .esp-onb__suivant svg{transition:transform var(--esp-t)}
.esp .esp-onb__suivant:hover:not(:disabled) svg{transform:translateX(2px)}
.esp .esp-onb__suivant[data-charge="oui"]{opacity:.8;cursor:progress}

/* --- Tablette : le sommaire passe au-dessus, en ligne ---------------------- */
@media (max-width:899px){
  .esp-onb__corps{grid-template-columns:minmax(0,1fr);gap:var(--esp-5);margin-top:var(--esp-6)}
  .esp-onb__etapes{position:static}
  .esp-onb__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .esp-onb__etape{padding-bottom:0}
  .esp-onb__etape:not(:last-child)::before{
    left:calc(50% + 24px);right:calc(-50% + 24px);top:16px;bottom:auto;width:auto;height:1px;
  }
  .esp-onb__etape[data-etat="faite"]:not(:last-child)::before{
    background:linear-gradient(90deg,rgba(201,45,120,.55) 0%,rgba(201,45,120,.18) 100%);
  }
  .esp .esp-onb__pas{flex-direction:column;gap:var(--esp-1);text-align:center;min-height:0}
  .esp-onb__pas-t{font-size:12px;line-height:1.25}
  .esp-onb__pas-etat{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:1024px){
  .esp-onb__hero{padding:var(--esp-7)}
  .esp-onb__hero-in{grid-template-columns:minmax(0,1fr);gap:var(--esp-6)}
}

/* --- Téléphone -------------------------------------------------------------- */
@media (max-width:640px){
  .esp-onb__barre-in{padding-inline:var(--esp-4)}
  .esp-onb__marque-sous,.esp-onb__email{display:none}
  .esp-onb__page{padding:var(--esp-4) var(--esp-4) var(--esp-9)}
  .esp-onb__hero{padding:var(--esp-6) var(--esp-5);border-radius:14px}
  .esp-onb__hero .esp-hero__t{font-size:25px}
  .esp-onb__hero-p{font-size:14px}
  .esp-onb__carte{padding:var(--esp-6) var(--esp-5) var(--esp-5)}
  .esp-onb__ligne{grid-template-columns:minmax(0,1fr);gap:0}
  .esp-onb .esp-champ--court .esp-i{max-width:none}
  .esp-onb__pied{flex-direction:column-reverse;align-items:stretch}
  .esp .esp-onb__suivant,.esp .esp-onb__retour{width:100%}
  .esp .esp-sortie--bouton button{min-height:44px}
  .esp-onb__eclat--2{display:none}
  .esp-onb__eclat--1{top:14px;right:22px}
  .esp-onb__marque,.esp .esp-onb__compte .esp-b{white-space:nowrap}
}
@media (max-width:480px){
  .esp-onb__pas-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .esp-onb__ou{
    display:block;margin:var(--esp-3) 0 0;text-align:center;
    font-size:13px;font-weight:600;color:var(--esp-encre);
  }
}
@media (max-width:380px){
  .esp-onb__n{width:30px;height:30px}
  .esp-onb__etape:not(:last-child)::before{top:15px;left:calc(50% + 21px);right:calc(-50% + 21px)}
}

@media (prefers-reduced-motion:reduce){
  .esp-onb__avance .esp-avance__plein,.esp-onb__avance .esp-avance__los,
  .esp-onb__n,.esp .esp-onb__suivant svg,.esp .esp-sortie--bouton button{transition:none}
}

/* =========================================================================
   LA CARTE WEBDESIGN PASSION — components/recruteur/CarteWebdesignPassion.tsx
   (18/10/2026)

   Rose pâle sur le prune de la barre, texte prune : elle se distingue de la
   navigation sans la concurrencer. La photo ronde et la signature d'abord,
   puis la question, deux lignes, le bouton et la mention de la prestation.
   Sur téléphone (« --page »), elle vient sous le contenu, à la mesure de la
   page.
   ========================================================================= */
.esp-wp{
  margin:0 0 var(--esp-3);padding:14px 14px 12px;border-radius:14px;
  background:linear-gradient(160deg,#FFF7FB 0%,#FBEAF3 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 26px -18px rgba(20,4,12,.55);
  color:#4A1230;
}
.esp-wp__qui{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.esp-wp__photo{
  flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(201,45,120,.25);
}
.esp-wp__photo--provisoire{
  display:grid;place-items:center;font-size:17px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#951753 0%,#C92D78 100%);
}
.esp-wp__signature{margin:0;display:grid;gap:1px;min-width:0;line-height:1.25}
.esp-wp__nom{font-size:13px;font-weight:700;color:#3A0E25}
.esp-wp__role{font-size:11.5px;color:#7A4A63}
.esp-wp__t{margin:0 0 4px;font-size:14px;font-weight:700;line-height:1.3;color:#3A0E25}
.esp-wp__p{margin:0 0 12px;font-size:12px;line-height:1.5;color:#6B3A55}
.esp-wp__b{
  display:flex;align-items:center;justify-content:center;
  min-height:38px;padding:8px 12px;border-radius:10px;
  font-size:13px;font-weight:600;color:#fff;text-decoration:none;
  background:linear-gradient(105deg,#68153D 0%,#951753 46%,#C92D78 100%);
  box-shadow:0 6px 14px -8px rgba(149,23,83,.7);
  transition:transform .18s ease, box-shadow .18s ease;
}
.esp-wp__b:hover{transform:translateY(-1px);box-shadow:0 9px 18px -9px rgba(149,23,83,.75)}
.esp-wp__b:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Blanc, et à poids suffisant : « .adm a { color:inherit } » (admin.css,
   0,1,1) l'emportait et peignait le texte du bouton en prune. */
.esp .esp-wp__b,.esp .esp-wp__b:hover,.esp .esp-wp__b:visited{color:#FFFFFF}
.esp-wp__mention{margin:8px 0 0;font-size:10.5px;text-align:center;color:#8A5A73}
@media (prefers-reduced-motion:reduce){.esp-wp__b{transition:none}.esp-wp__b:hover{transform:none}}

.esp-wp--page{
  margin:var(--esp-6) auto var(--esp-5);max-width:560px;padding:18px 18px 14px;
  border-color:#F1DDE8;box-shadow:0 1px 2px rgba(50,21,37,.04);
}
.esp-wp--page .esp-wp__t{font-size:15px}
.esp-wp--page .esp-wp__p{font-size:13px}
.esp-wp--page .esp-wp__b{min-height:44px;font-size:14px}

/* --- La page « Parlons de votre projet » --------------------------------- */
.esp-projet{margin-top:var(--esp-5)}
.esp-projet__intro{margin:0 0 var(--esp-4);font-size:14px;line-height:1.6;color:var(--esp-encre-2)}
.esp-projet__form{display:grid;gap:var(--esp-4)}
.esp-projet__types{border:0;margin:0;padding:0;min-width:0}
.esp-projet__choix{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.esp-projet__opt{position:relative;cursor:pointer}
.esp-projet__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.esp-projet__opt span{
  display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--esp-encre-2);
  background:#fff;border:1px solid #E7D9E1;transition:border-color .15s, background .15s, color .15s;
}
.esp-projet__opt input:checked + span{background:#FDF1F7;border-color:#C92D78;color:#7E1650;font-weight:600}
.esp-projet__opt input:focus-visible + span{outline:2px solid #C92D78;outline-offset:2px}
.esp-projet__zone{min-height:140px;resize:vertical}
.esp-projet__mention{
  margin:0;padding:12px 14px;border-radius:10px;
  font-size:13px;line-height:1.55;color:#6B4A5C;background:#FDF6FA;border:1px solid #F3E2EB;
}
.esp-projet__mention strong{color:#7E1650}
.esp-projet__erreur{
  margin:0;padding:12px 14px;border-radius:10px;font-size:14px;
  color:#8E1B2E;background:#FDECEF;border:1px solid #F4C9D1;
}
.esp-projet__pied{display:flex;justify-content:flex-end}
.esp-projet__succes{display:grid;gap:10px;justify-items:start;padding:var(--esp-4) 0}
.esp-projet__succes-t{margin:0;font-size:18px;font-weight:700;color:var(--esp-encre)}
.esp-projet__succes-p{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--esp-encre-2)}
@media (max-width:700px){
  .esp-projet__pied .esp-b{width:100%;justify-content:center}
}

/* --- L'acceptation des CGU, à la création de l'espace (21/10/2026) --------
   Un encadré d'information (teintes.css), au-dessus des boutons. */
.esp-onb__cgu{
  display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:12px 14px;
  border-radius:var(--esp-r,10px);
  background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);
  font-size:13.5px;line-height:1.55;color:var(--mw-info-texte);cursor:pointer;
}
.esp-onb__cgu input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:#C32371}
.esp-onb__cgu a{color:var(--mw-avant-titre);text-decoration:underline;text-underline-offset:2px}