/* =========================================================================
   LA DÉMONSTRATION DE L'ESPACE RECRUTEUR — components/public/DemoEspaceRecruteur.tsx
   (accueil, 02 · entreprises)

   Les jetons sont ceux de « .esp » (espace-recruteur.css), recopiés ici :
   cette feuille-là n'est chargée que dans l'espace. Mêmes cartes, mêmes
   étiquettes à losange, mêmes boutons, même bandeau prune, même monogramme.

   Les trois écrans sont empilés dans la même case de grille : la hauteur ne
   bouge pas d'un écran à l'autre. Les mouvements n'existent que sous
   « .dmo--anime » ; sans elle (mouvement refusé, pas de script), la liste des
   annonces reste affichée, fixe.
   ========================================================================= */
.dmo{
  --esp-prune:#321525;--esp-framboise:#951753;--esp-accent:#C92D78;
  --esp-rose-pale:#FDF4F8;--esp-fond:#FDFAF8;--esp-surface:#FFFCFD;--esp-blanc:#FFFFFF;
  --esp-encre:#321525;--esp-encre-2:#5F5058;--esp-encre-3:#7C6873;
  --esp-ligne:#F0E7EC;--esp-ligne-2:#E4D7DE;
  --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-neutre:#6B5560;--esp-neutre-fond:#F4EFF2;--esp-neutre-ligne:#E4D7DE;
  --esp-r-xs:4px;--esp-r:8px;--esp-r-lg:12px;
  --esp-ombre:0 1px 2px rgba(50,21,37,.03),0 12px 28px -24px rgba(70,20,50,.24);
  
  position:relative;width:100%;
  border-radius:18px;overflow:hidden;
  background:var(--esp-fond);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(50,21,37,.06),0 30px 60px -36px rgba(20,4,12,.55);
  font-size:14px;line-height:1.35;color:var(--esp-encre);text-align:left;
}

/* --- La barre de fenêtre ------------------------------------------------- */
.dmo__barre{
  display:flex;align-items:center;gap:6px;
  padding:12px 16px;border-bottom:1px solid var(--esp-ligne);background:#FBF8FA;
}
.dmo__barre > span{flex:none;width:8px;height:8px;border-radius:50%;background:#E8DCE3}
.dmo__adresse{
  flex:1;min-width:0;margin:0 0 0 8px;
  font-size:12.5px;font-weight:500;color:var(--esp-encre-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dmo__fictif{
  flex:none;margin:0;padding:3px 8px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--esp-framboise);background:var(--esp-rose-pale);border:1px solid rgba(201,45,120,.18);
}

/* --- La scène : trois écrans dans la même case -------------------------- */
.dmo__scene{display:grid;padding:14px}
.dmo__ecran{grid-area:1/1;min-width:0;display:grid;align-content:start;gap:10px}
.dmo__ecran:not(.is-on){visibility:hidden;opacity:0}
/* L'écran qui part glisse vers la gauche ; celui qui arrive entre par la
   droite — ou l'inverse au retour à la liste. Puis ses éléments se posent
   en cascade (« --i »). */
.dmo--anime .dmo__ecran{transition:opacity 260ms ease,transform 380ms cubic-bezier(.3,.7,.2,1),visibility 0s linear 380ms}
.dmo--anime .dmo__ecran:not(.is-on){transform:translateX(-36px)}
.dmo--anime.dmo--retour .dmo__ecran:not(.is-on){transform:translateX(36px)}
.dmo--anime .dmo__ecran.is-on{
  transition:visibility 0s;
  animation:dmo-entre 460ms cubic-bezier(.2,.9,.25,1.12) both;
}
.dmo--anime.dmo--retour .dmo__ecran.is-on{animation-name:dmo-revient}
@keyframes dmo-entre{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes dmo-revient{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.dmo--anime .is-on .dmo-ligne,
.dmo--anime .is-on .dmo-cand,
.dmo--anime .is-on .dmo-chiffres p{
  animation:dmo-pose 440ms cubic-bezier(.2,.9,.25,1.15) both;
  animation-delay:calc(120ms + var(--i,0) * 75ms);
}
@keyframes dmo-pose{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.dmo--anime .is-on .dmo-bandeau{animation:dmo-pose 420ms cubic-bezier(.2,.9,.25,1.12) both}
.dmo--anime .is-on .dmo-chiffres b{display:inline-block;animation:dmo-chiffre 520ms cubic-bezier(.2,.9,.25,1.4) both;animation-delay:calc(260ms + var(--i,0) * 75ms)}
@keyframes dmo-chiffre{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.dmo--anime .is-on .dmo-mono__neuf{animation:dmo-neuf 1.1s ease-in-out 600ms 2}
@keyframes dmo-neuf{50%{transform:scale(1.35);box-shadow:inset 1px 1px 0 rgba(255,255,255,.38),0 0 0 2px var(--esp-blanc),0 0 10px rgba(201,45,120,.6)}}

/* --- Le bandeau prune (« .esp-bandeau ») -------------------------------- */
.dmo-bandeau{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-radius:14px;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%);
}
.dmo-bandeau::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,rgba(255,214,235,0),rgba(255,255,255,.44) 52%,rgba(255,214,235,0));
}
.dmo-bandeau__los{
  position:absolute;right:-60px;top:50%;width:150px;height:150px;translate:0 -50%;rotate:45deg;
  border-radius:22px;border:1px solid rgba(255,214,235,.14);pointer-events:none;
}
.dmo-bandeau__sur{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,214,235,.74)}
.dmo-bandeau__t{margin:4px 0 0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff}
.dmo-bandeau__synthese{position:relative;text-align:right}
.dmo-bandeau__n{margin:0;font-size:21px;font-weight:600;color:#fff}
.dmo-bandeau__n span{font-size:12.5px;font-weight:500;color:rgba(255,236,246,.8)}
.dmo-bandeau__detail{margin:2px 0 0;font-size:12.5px;color:rgba(255,236,246,.8)}
.dmo-bandeau__detail b{color:#fff}

/* --- Les cartes (« .esp-carte ») ---------------------------------------- */
.dmo-carte{
  border:1px solid var(--esp-ligne);border-radius:var(--esp-r-lg);
  background:var(--esp-surface);box-shadow:var(--esp-ombre);
}
.dmo-lignes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dmo-ligne{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(104px,auto);
  align-items:center;gap:12px;padding:12px 14px;
}
.dmo-ligne__t{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--esp-encre)}
.dmo-ligne__s{margin:2px 0 0;font-size:12.5px;color:var(--esp-encre-2)}
.dmo-ligne__cand{margin:0;text-align:right;font-size:12.5px;color:var(--esp-encre-2)}
.dmo-ligne__cand b{font-size:17px;font-weight:600;color:var(--esp-encre);margin-right:3px}
.dmo-ligne__sans{color:var(--esp-encre-3)}

/* Ce qui va s'ouvrir s'éclaire : pas de curseur simulé. */
.dmo--anime .dmo-ligne,
.dmo--anime .dmo-b,
.dmo--anime .dmo-fil{transition:border-color 320ms ease,box-shadow 320ms ease,background-color 320ms ease,color 320ms ease}
.dmo-ligne.is-eclaire{
  border-color:rgba(201,45,120,.38);background:var(--esp-rose-pale);
  box-shadow:0 0 0 3px rgba(201,45,120,.10),var(--esp-ombre);
}
/* L'élément qui va s'ouvrir : un éclat, puis une pression, comme un tap. */
.dmo--anime .dmo__ecran.is-on .is-eclaire{animation:dmo-tap 700ms cubic-bezier(.3,.7,.2,1) both}
@keyframes dmo-tap{
  0%{transform:none}
  35%{transform:scale(1.025)}
  70%{transform:scale(.975)}
  100%{transform:scale(1)}
}

/* --- Les étiquettes (« .esp-etiq ») ------------------------------------- */
.dmo-etiq{
  display:inline-flex;align-items:center;gap:8px;justify-self:start;
  height:24px;padding:0 8px 0 7px;
  border:1px solid transparent;border-radius:var(--esp-r-xs);
  font-size:12px;font-weight:600;line-height:1;white-space:nowrap;
}
.dmo-etiq::before{content:"";flex:none;width:6px;height:6px;rotate:45deg;border-radius:1px;background:currentColor;opacity:.85}
.dmo-etiq--grande{height:28px;padding:0 12px 0 8px;font-size:13px}
.dmo-etiq--vert  {color:var(--esp-vert);  background:var(--esp-vert-fond);  border-color:var(--esp-vert-ligne)}
.dmo-etiq--ambre {color:var(--esp-ambre); background:var(--esp-ambre-fond); border-color:var(--esp-ambre-ligne)}
.dmo-etiq--bleu  {color:var(--esp-bleu);  background:var(--esp-bleu-fond);  border-color:var(--esp-bleu-ligne)}
.dmo-etiq--rose  {color:var(--esp-framboise);background:var(--esp-rose-pale);border-color:rgba(201,45,120,.22)}
.dmo-etiq--prune {color:var(--esp-prune);background:#F3ECF1;border-color:#E4D7DE}
.dmo-etiq--neutre{color:var(--esp-neutre);background:var(--esp-neutre-fond);border-color:var(--esp-neutre-ligne)}

/* --- L'annonce ouverte -------------------------------------------------- */
.dmo-fil{margin:0;font-size:13px;font-weight:500;color:var(--esp-encre-2);justify-self:start;padding:2px 6px;border-radius:6px}
.dmo-fil.is-eclaire{color:var(--esp-framboise);background:var(--esp-rose-pale)}
.dmo-annonce{display:grid;gap:8px;justify-items:start;padding:18px 18px 20px}
.dmo-annonce__t{margin:4px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--esp-encre)}
.dmo-annonce__s{margin:0;font-size:13px;color:var(--esp-encre-2)}
.dmo-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:6px}
.dmo-chiffres p{
  margin:0;display:grid;gap:2px;padding:10px 12px;
  border:1px solid var(--esp-ligne);border-radius:10px;background:var(--esp-blanc);
}
.dmo-chiffres b{font-size:18px;font-weight:600;color:var(--esp-encre)}
.dmo-chiffres span{font-size:11.5px;color:var(--esp-encre-2)}
.dmo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* --- Les boutons (« .esp-b--1 », « .esp-b--2 ») ------------------------- */
.dmo-b{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 16px;border:1px solid transparent;border-radius:var(--esp-r);
  font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;
}
.dmo-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;box-shadow:0 4px 14px -6px rgba(149,23,83,.34);
}
.dmo-b--1.is-eclaire{background-position:0% 0;box-shadow:0 0 0 3px rgba(201,45,120,.18),0 8px 20px -8px rgba(178,32,101,.40)}
.dmo--anime .dmo-b--1{transition:background-position 380ms ease,box-shadow 320ms ease}
.dmo-b--2{background:var(--esp-surface);border-color:var(--esp-ligne-2);color:var(--esp-encre)}

/* --- Les candidatures (« .esp-cands-qui », « .esp-cands-mono ») --------- */
.dmo-cands{padding:14px 14px 6px}
.dmo-cands__t{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--esp-encre)}
.dmo-cands__t span{font-weight:500;color:var(--esp-encre-2)}
.dmo-cands ul{list-style:none;margin:0;padding:0}
.dmo-cand{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:10px 2px;border-top:1px solid var(--esp-ligne);
}
.dmo-mono{
  position:relative;display:grid;place-items:center;width:36px;height:36px;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:12.5px;font-weight:600;letter-spacing:.04em;
}
.dmo-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);
}
.dmo-cand__qui{display:grid;gap:1px;min-width:0}
.dmo-cand__qui b{font-size:14px;font-weight:600;color:var(--esp-encre)}
.dmo-cand__qui span{font-size:12px;color:var(--esp-encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Téléphone ----------------------------------------------------------- */
@media (max-width:560px){
  .dmo{font-size:13px;border-radius:14px}
  .dmo__barre{padding:10px 12px}
  .dmo__adresse{font-size:11.5px;margin-left:4px}
  .dmo__fictif{font-size:10.5px;padding:3px 7px}
  .dmo__scene{padding:10px}
  .dmo-bandeau{padding:14px 14px;border-radius:12px}
  .dmo-bandeau__t{font-size:17px}
  .dmo-bandeau__n{font-size:18px}
  /* Une annonce par carte, en deux rangs : titre, puis statut et candidatures. */
  .dmo-ligne{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:11px 12px}
  .dmo-ligne__qui{grid-column:1 / -1}
  .dmo-ligne__cand{text-align:right}
  .dmo-annonce{padding:14px 14px 16px}
  .dmo-annonce__t{font-size:17px}
  .dmo-chiffres{gap:6px}
  .dmo-chiffres p{padding:8px}
  .dmo-chiffres b{font-size:16px}
  .dmo-chiffres span{font-size:10.5px}
  .dmo-b{min-height:38px;padding:0 12px;font-size:13px}
  .dmo-cands{padding:12px 12px 4px}
  .dmo-cand{gap:10px}
  .dmo-etiq{height:22px;font-size:11.5px}
}
@media (max-width:359.98px){
  .dmo-bandeau__synthese{display:none}
  .dmo-cand{grid-template-columns:auto minmax(0,1fr)}
  .dmo-cand .dmo-etiq{grid-column:2;justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  .dmo *,.dmo *::before{transition:none!important;animation:none!important}
}