/* =========================================================================
   MUSLIMA WORK — ACCUEIL, LES QUELQUES RÈGLES QUE style.css N'A PAS

   L'accueil est resté celui du site d'origine, et style.css le porte presque
   entièrement. Presque : trois éléments lui sont postérieurs, ajoutés pour les
   petits écrans. Sans règle, ils s'affichent partout et en double.

   Rien d'autre ne doit entrer ici. Cette feuille comble un manque, elle ne
   redessine pas la page — le jour où l'accueil rejoindra la seconde direction,
   elle disparaît avec le reste.
   ========================================================================= */

/* --- Statistiques : deux longueurs pour un même libellé -------------------
   « des offres inclusives et accessibles » ne tient pas à 390 px, où le bloc
   passe sur deux colonnes. Une seule des deux versions paraît à la fois. */
.trust__l--sm{display:none}

/* --- Bandeau défilant : le libellé du bouton pause ------------------------
   L'icône seule ne se comprend pas au doigt. Sur grand écran, l'aria-label
   suffit et le libellé alourdirait l'en-tête de section. */
.mq__pause-t{display:none}

/* Même seuil que style.css : les trois bascules appartiennent à la même mise
   en page mobile. L'état du bouton suit aria-pressed, comme les icônes que
   style.css bascule déjà — aucun script à modifier. */
@media (max-width:760px){
  .trust__l--lg{display:none}
  .trust__l--sm{display:inline}
  .mq__pause .mq__pause-t{display:inline}
  .mq__pause .mq__pause-t--play{display:none}
  .mq__pause[aria-pressed="true"] .mq__pause-t--pause{display:none}
  .mq__pause[aria-pressed="true"] .mq__pause-t--play{display:inline}
}

/* =========================================================================
   MOUVEMENT RÉDUIT

   style.css est la feuille du site d'origine, écrite avant que la question ne
   se pose : elle ne prévoit rien pour prefers-reduced-motion sinon le
   défilement. Les scripts, eux, la respectent déjà — les compteurs ne comptent
   pas, les apparitions sont posées d'emblée ; le fil d'annonces, lui, est
   traité dans style.css avec le reste de son dessin. Ce qui reste est en CSS,
   et boucle sans fin.

   Le bandeau défilant d'abord : il traverse la page en continu, c'est le
   mouvement le plus long et le plus difficile à ignorer. Puis les brillances
   et les halos, et les entrées du hero — elles ne jouent qu'une fois, mais une
   fois suffit à gêner. Les éléments concernés reprennent alors leur état
   normal : sans l'animation, ils sont simplement là.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .mq--ltr .mq__track,
  .mq--rtl .mq__track{animation:none}
  .mq::before{animation:none}
  .btn--shine::after{animation:none}
  .demo__row.is-typing .demo__val::after{animation:none}
  .hsearch{animation:none;opacity:1;transform:none}
}

/* =========================================================================
   DIRECTION ARTISTIQUE — LA PALETTE DE « PUBLIER UNE ANNONCE »

   L'accueil garde son dessin d'origine et prend les couleurs du formulaire,
   aux mêmes valeurs : un seul rose, un seul bordeaux, pour tout le site.

   L'alternance, de haut en bas :

     hero                       la photographie, sous ses voiles rose et prune
     bandeau défilant           bordeaux
     les dernières annonces     blanc
     les secteurs               rose pâle
     « Vous recrutez ? »        blanc, et sa grande carte en bordeaux profond
     « ouvert à toutes »        bordeaux
     questions fréquentes       rose pâle
     l'inscription              blanc
     pied de page               bordeaux

   Rien n'est mis en blanc par défaut, et le rose franc ne prend qu'une valeur :
   les sections rosées portent toutes var(--mw-rose). Le hero fait exception et
   reste beaucoup plus clair — voir sa règle, plus bas.
   ========================================================================= */
:root{
  /* Les valeurs du formulaire, reprises telles quelles. */
  --mw-rose:#F8E7EF;
  --mw-rose-fondu:#FCF3F7;   /* le milieu de la bande, entre le rose et le blanc */
  --mw-filet-rose:#F4E4EC;
  --mw-framboise:#951753;
  --mw-bordeaux:#68153D;
  --mw-accent:#C92D78;
  --mw-blanc:#FFFBFD;

  /* Les deux fonds alternés du site, ramenés à cette palette. Les sections
     n'ont pas à changer de classe : « sec--tint » est le rose, « sec--plum »
     le bordeaux, comme avant — seules leurs valeurs changent. */
  --bg-tint:#F8E7EF;
  --bg-plum:linear-gradient(115deg,#951753 0%,#7C1648 55%,#68153D 100%);

  /* Le dégradé de marque, plus franc : il porte « son hijab » dans le titre,
     le filet du pied de page et les fonds d'accent. */
  --grad-rose:linear-gradient(105deg,#68153D 0%,#951753 42%,#C92D78 100%);
}

/* --- La grille éditoriale, sur toute la page ------------------------------
   Le header et la carte de recherche l'utilisaient déjà ; les sections, elles,
   étaient restées sur la colonne de 1240 px de la feuille d'origine. Elles
   suivaient donc leurs propres lignes verticales, décalées de celles du haut
   de page.

   Le fond des sections reste en pleine largeur — c'est leur contenu, et lui
   seul, qui s'arrête à 1400 px. Les valeurs viennent des variables définies
   dans style.css : une seule grille, une seule source.
   ------------------------------------------------------------------------ */
.wrap{
  width:calc(100% - (2 * var(--grille-marge)));
  max-width:var(--grille-max);
  margin-inline:auto;
}

/* --- Le hero -------------------------------------------------------------
   Il n'a plus de fond de couleur : la photographie tient toute la section, et
   ses trois voiles sont dans style.css avec le reste de la scène. Ne reste ici
   que le filet qui la ferme en bas. */
/* Aucun filet en bas : la carte de recherche remonte par-dessus le hero, et
   ce trait passait derrière elle en dépassant de part et d'autre. Les deux
   blocs se rejoignent par le chevauchement, pas par une ligne. */
.hero{border-bottom:0}

/* --- Les sections rosées ------------------------------------------------- */
.sec--tint{background:var(--mw-rose);border-block:1px solid var(--mw-filet-rose)}

/* --- Le bandeau défilant : bordeaux, cerné de rose -----------------------
   Le fond garde sa diagonale, du framboise clair au bordeaux profond : c'est
   elle qui donne au bandeau son relief, et le halo rose sa profondeur. */
.mq{background:var(--bg-plum);border-block:1px solid var(--mw-filet-rose)}
.mq::before{background:radial-gradient(45% 55% at 50% 50%,rgba(201,45,120,.30),transparent 70%)}
.mq__hl{color:#F3A8CE}
/* Les cartes restent claires sur ce fond : un filet rose plutôt qu'un liseré
   blanc, et une ombre bordeaux plutôt que noire. */
.mq__card{
  background:#fff;border:1px solid var(--mw-filet-rose);
  box-shadow:0 6px 18px rgba(50,21,37,.18);
}

/* --- La grande carte des entreprises : le bordeaux profond de la page ----- */
.rec{
  background:linear-gradient(120deg,#4E0F2D 0%,#7C1648 55%,var(--mw-framboise) 100%);
  box-shadow:0 12px 32px rgba(50,21,37,.16);
}

/* --- Le pied de page ----------------------------------------------------- */
.footer{background:var(--bg-plum)}
.footer::after{background:radial-gradient(circle,rgba(201,45,120,.20),transparent 66%)}

/* Le titre du hero n'a plus besoin de rien ici : le jambage du « j » n'est
   plus coupé depuis que la ligne ne masque plus son débordement, et le dégradé
   du mot est dans style.css avec le reste du texte clair. */

/* =========================================================================
   « LES DERNIÈRES OPPORTUNITÉS »

   Six cartes identiques rangées trois par trois, séparées des repères par un
   grand blanc : c'était une grille de gabarit. La section montre maintenant
   cinq annonces et leur donne des poids différents — la plus récente sur une
   grande carte prune, les quatre suivantes en lignes compactes à côté d'elle.

   Le fond est un rose poudré presque blanc, réchauffé par deux lueurs très
   diffuses, l'une prune et l'autre rose. Elles n'ont pas de contour : leurs
   bords s'éteignent bien avant ceux de la section, et rien n'y dessine de
   forme.
   ========================================================================= */
.offres{
  position:relative;isolation:isolate;
  /* Le rembourrage vient de la mesure commune, plus bas dans cette feuille. */
  background:
    radial-gradient(58% 46% at 12% 6%,rgba(120,32,80,.055),rgba(120,32,80,0) 72%),
    radial-gradient(52% 44% at 88% 88%,rgba(214,83,154,.05),rgba(214,83,154,0) 74%),
    #FFF9FB;
}

/* --- L'en-tête, éditorial ------------------------------------------------- */
.ofhead{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;
  margin-bottom:32px;
}
.ofhead__txt{min-width:0}
/* La mention : fine, espacée, en petites capitales — elle situe la section
   sans faire un second titre. */
.ofhead__sur{
  margin:0 0 10px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#A0567E;
}
.ofhead h2{margin:0}
.ofhead__p{margin:12px 0 0;max-width:52ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ofhead__cta{flex:none;white-space:nowrap}

/* --- Le bento -------------------------------------------------------------
   La grande carte à gauche, les quatre lignes à droite sur deux colonnes. Les
   deux blocs font la même hauteur : c'est la carte qui la donne, et les lignes
   s'y répartissent. */
.ofbento{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.28fr);gap:22px;align-items:stretch}
.ofbento__suite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:stretch}
/* Sans annonce publiée, la carte Formation reste seule : elle prend la ligne
   entière, et un peu plus de hauteur pour que l'image ne devienne pas un
   bandeau. Les petits écrans gardent leurs propres règles. */
.ofbento--seule{grid-template-columns:minmax(0,1fr)}
@media (min-width:1081px){.ofbento--seule .fmt{min-height:420px}}

/* --- La grande carte ------------------------------------------------------ */
.ofmev{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  padding:30px;border-radius:16px;
  color:#FFFFFF;
  background:linear-gradient(146deg,#4E0F2D 0%,#6B1440 38%,#8C1E56 72%,#A82A69 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(62,12,40,.20);
  transition:transform 260ms var(--ease),box-shadow 260ms var(--ease);
}
@media (hover:hover){
.ofmev:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(62,12,40,.26)}
}
/* Le reflet : une lumière posée en haut à gauche, comme sur une plaque de
   verre. Elle ne bouge pas — c'est une texture, pas une animation. */
.ofmev__reflet{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(72% 56% at 16% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 62%),
    radial-gradient(46% 40% at 92% 96%,rgba(255,168,206,.16),rgba(255,168,206,0) 70%);
}
.ofmev > *{position:relative;z-index:1}

.ofmev__haut{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.ofmev__mention{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
/* Sur le prune, le badge devient un contour clair : son framboise s'y
   perdrait. La règle qui décide à qui il va n'est pas touchée. */
.ofmev .badge{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  color:#FFFFFF;box-shadow:none;
}
.ofmev__t{
  margin:0;font-size:clamp(24px,2vw,32px);line-height:1.2;letter-spacing:-.022em;
  color:#FFFFFF;
}
.ofmev__t a{color:inherit;text-decoration:none}
@media (hover:hover){
.ofmev__t a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
}
.ofmev__co{margin:12px 0 0;font-size:16px;font-weight:500;color:rgba(255,255,255,.90)}
.ofmev__meta{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.74)}
.ofmev__meta .dept{color:rgba(255,255,255,.58)}
/* Le pied est poussé en bas : la carte fait la hauteur du bloc voisin, et son
   bouton reste à son pied quelle que soit la longueur de l'intitulé. */
.ofmev__pied{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:auto;padding-top:26px;
}
.ofmev__date{font-size:14px;color:rgba(255,255,255,.62)}
/* Sur le prune, le dégradé du bouton principal se perdrait dans le fond : il
   passe en blanc, comme dans le hero et pour la même raison. */
.ofmev .ofmev__cta{
  --h:46px;
  background-image:linear-gradient(135deg,#FFFFFF 0%,#FFF7FB 42%,#FDE9F2 100%);
  background-color:#FFF7FB;color:#4E0F2D;border-color:rgba(255,255,255,.7);
  box-shadow:0 6px 20px rgba(30,6,20,.22);
}
@media (hover:hover){
.ofmev .ofmev__cta:hover{
  background-image:linear-gradient(135deg,#FFFBFD 0%,#FDEDF4 42%,#FADCE9 100%);
  box-shadow:0 10px 26px rgba(30,6,20,.28);
}
}

/* --- Les cartes secondaires -----------------------------------------------
   Une ligne, et rien de plus : le pictogramme, l'intitulé, l'entreprise, les
   repères, la flèche. Pas de pied, pas de vide à remplir. */
.ofl{
  /* Une grille plutôt qu'une rangée souple, pour deux raisons à la fois : la
     rangée se centre dans la carte — les lignes s'étirent à la hauteur de la
     carte Formation, et leur contenu restait collé en haut — tandis que ses
     trois éléments continuent de s'aligner par le haut les uns sur les autres.
     Un `align-items:center` sur une rangée souple aurait centré chacun d'eux
     séparément, et défait cet alignement. */
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-content:center;align-items:start;gap:13px;
  /* Un peu plus de marge en bas qu'en haut : la rangée, centrée dans ce qui
     reste, remonte d'autant. Elle se tient donc au-dessus du milieu de la
     carte, sans être collée au bord. */
  padding:20px 15px 46px;border-radius:12px;
  background:#FFFFFF;border:1px solid #F3E5EC;
  color:inherit;text-decoration:none;
  transition:background-color 200ms var(--ease),border-color 200ms var(--ease),
             transform 200ms var(--ease);
}
@media (hover:hover){
.ofl:hover{background:#FFF6FA;border-color:#EAD2DF;transform:translateY(-2px)}
}
.ofl__ico{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  background:var(--rose-pale);border:1px solid #F6DCE9;border-radius:9px;color:var(--rose);
}
.ofl__ico svg{width:19px;height:19px}
.ofl__txt{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
/* La première ligne de la carte s'aligne par le haut, sur l'arête supérieure
   de la boîte du pictogramme : l'intitulé, le badge de contrat et la flèche y
   commencent tous. Les centrer sur la hauteur du pictogramme faisait descendre
   le titre au milieu de la vignette, alors qu'il doit partir d'en haut. */
.ofl__haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ofl__t{
  font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.014em;color:var(--plum);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ofl__co{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofl__meta{
  margin:0;font-size:13px;line-height:1.4;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ofl__arw{
  flex:none;display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line-2);border-radius:8px;color:var(--plum);
  transition:border-color 200ms var(--ease),transform 200ms var(--ease);
}
.ofl__arw svg{width:14px;height:14px}
@media (hover:hover){
.ofl:hover .ofl__arw{border-color:var(--rose);transform:translateX(3px)}
}
/* La date de publication ferme la ligne. Elle remplace le badge « Nouveau » —
   même information, mais chiffrée, et sans rien qui clignote. Elle suit les
   repères, dont elle reprend la graisse et la casse. */
.ofl__date{
  margin-top:5px;font-size:12.5px;line-height:1.3;color:#8A6C7B;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Le badge des lignes : petit, et il ne pousse jamais l'intitulé. */
.ofl .badge{flex:none;height:22px;padding:0 8px;font-size:11px}

/* =========================================================================
   PETITS ÉCRANS

   Tout s'empile : l'en-tête, puis son bouton, puis la grande carte, puis les
   lignes. Aucune grille à deux colonnes — à cette largeur, elle serrerait.
   ========================================================================= */
@media (max-width:1080px){
  .ofbento{grid-template-columns:minmax(0,1fr);gap:18px}
  .ofbento__suite{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .offres{padding:28px 0 24px}
  .ofhead{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;margin-bottom:24px}
  /* Un lien ne s'étire pas : il reste calé à gauche, sous le titre. */
  .ofhead__cta{justify-self:start;margin-left:-4px}
  .ofbento__suite{grid-template-columns:minmax(0,1fr);gap:12px}
  .ofmev{padding:24px 20px;border-radius:14px}
  .ofmev__haut{margin-bottom:18px}
  .ofmev__pied{padding-top:22px}
  .ofmev .ofmev__cta{width:100%}
  .ofl{padding:14px 13px}
}

/* =========================================================================
   LA FORMATION WEBMASTER, EN TÊTE DES DERNIÈRES OPPORTUNITÉS

   Elle occupe la grande place de gauche du bento. La vidéo tient tout le fond,
   un voile prune se pose dessus, et le texte se lit dans la partie basse — la
   plus calme de l'image, où le plan reste fixe.

   Le voile n'est pas là pour assombrir : il est dense au bas et sur la gauche,
   là où passe le texte, et il s'efface en haut à droite pour qu'on continue de
   voir ce qui se passe. Une carte de mise en avant qui cache sa propre image
   n'aurait pas besoin d'image.
   ========================================================================= */
.fmt{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:340px;
  padding:30px;border-radius:16px;
  color:#FFFFFF;
  background:#3E0C26;   /* le fond avant que la vidéo ne soit peinte */
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(62,12,40,.20);
  transition:transform 260ms var(--ease),box-shadow 260ms var(--ease);
}
@media (hover:hover){
.fmt:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(62,12,40,.26)}
}

/* La carte ne rogne plus ce qui la dépasse — le médaillon est posé à cheval
   sur son bord. Ce sont les deux calques du fond qui se rognent eux-mêmes,
   chacun sur le rayon de la carte. */
.fmt__fond{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.fmt__fond img{
  width:100%;height:100%;object-fit:cover;
  /* La photo (18/10/2026) : l'ordinateur à gauche, les mains au centre, la
     veste à droite. Dans une carte étroite — à côté des annonces, sur
     téléphone —, un cadrage centré ne gardait que la veste : il est calé à
     gauche du centre, pour que l'ordinateur et les mains restent dans le
     champ. En pleine largeur, la photo tient presque sans rogner. */
  object-position:40% 30%;
  display:block;
}
/* Le voile, en deux pentes qui se croisent en bas à gauche — là où se trouve
   le texte. En haut à droite, il ne reste presque rien : la dentelle, la main
   et l'ordinateur gardent leur lumière et leurs couleurs. */
/* Le voile ne couvre que ce qu'il doit couvrir : le texte. Dans une carte
   étroite (à côté de plusieurs annonces, sur téléphone), le texte occupe le
   bas sur toute la largeur — le voile monte du bas et s'arrête à mi-hauteur,
   le haut de la photo reste lumineux. Dans une carte large (seule, sans
   annonce), le texte n'occupe que la gauche — le voile s'y
   concentre et laisse la moitié droite intacte (règle plus bas). */
.fmt__voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(180deg,
      rgba(48,10,30,0) 0%,
      rgba(48,10,30,0) 28%,
      rgba(52,11,32,.42) 52%,
      rgba(58,12,36,.80) 76%,
      rgba(62,13,38,.90) 100%),
    linear-gradient(90deg,
      rgba(48,10,30,.34) 0%,
      rgba(48,10,30,0) 60%);
}
@media (min-width:761px){
  .ofbento--seule .fmt__voile{
    background:
      linear-gradient(90deg,
        rgba(46,9,28,.84) 0%,
        rgba(46,9,28,.70) 30%,
        rgba(46,9,28,.28) 52%,
        rgba(46,9,28,0) 68%),
      linear-gradient(0deg,
        rgba(46,9,28,.42) 0%,
        rgba(46,9,28,0) 46%);
  }
}
/* Le corps ne commence plus par le badge — celui-ci est sorti du flux et posé
   sur le bord. La place qu'il occupait n'a donc plus à être réservée. */
.fmt__corps{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}

/* --- L'ÉTIQUETTE « FORMATION À LA UNE » ----------------------------------
   Une petite fiche framboise posée à cheval sur le bord supérieur gauche de la
   carte, et un trombone qui l'y accroche.

   Le trombone est retiré en attendant une image détourée : le dessiner au
   trait ne donnait pas le résultat attendu. Une étoile fine ouvre la fiche à
   sa place, et la marge qui lui était réservée à gauche revient à celle de
   droite — la fiche est de nouveau d'aplomb.

   L'empilement, lui, reste : le papier est porté par ::before, sous le texte,
   de sorte qu'une couche puisse un jour se glisser derrière lui sans rien
   réécrire.
   ------------------------------------------------------------------------- */
.fmt__etiq{
  position:absolute;top:-13px;left:26px;z-index:3;
  isolation:isolate;
  display:inline-flex;align-items:center;
  height:34px;padding:0 17px;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;white-space:nowrap;color:#FFFFFF;
  /* Une ombre prune très diluée : elle assoit les lettres sur le framboise
     sans les cerner. */
  text-shadow:0 1px 1.5px rgba(74,12,42,.34);
  transform:rotate(-2deg);
  transform-origin:22% 50%;
  /* La fiche descend se poser. Le fil avant la suit, un peu après. */
  animation:fmtEtiqPose 640ms cubic-bezier(.2,.72,.3,1.06) 260ms both;
}
/* L'étoile. Elle suit la couleur du texte, et son ombre : les deux forment
   une seule ligne, non un pictogramme posé à côté d'un mot. */
.fmt__etiq-etoile{
  position:relative;flex:none;
  filter:drop-shadow(0 1px 1.5px rgba(74,12,42,.34));
}

/* Le papier. */
.fmt__etiq::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:3px;
  background:linear-gradient(135deg,#C42A61 0%,#DD3873 48%,#E85A8E 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 6px 16px rgba(221,56,115,.30),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.fmt__etiq-txt{position:relative}

@keyframes fmtEtiqPose{
  from{opacity:0;transform:translateY(-16px) rotate(-7deg)}
  to  {opacity:1;transform:translateY(0)     rotate(-2deg)}
}

/* Le corps ne commence plus par le badge — celui-ci est sorti du flux et posé
   sur le bord. La place qu'il occupait n'a donc plus à être réservée. */
.fmt__corps{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}

.fmt__t{
  margin:26px 0 0;max-width:20ch;
  font-size:clamp(23px,1.9vw,30px);line-height:1.22;letter-spacing:-.022em;
  color:#FFFFFF;
}
.fmt__p{
  margin:12px 0 0;max-width:44ch;
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.88);
}

/* --- La mention CPF -------------------------------------------------------
   Le logo est officiel : il garde ses proportions, ses couleurs et son cadre.
   Il est petit et posé à côté du texte, non au-dessus de lui — c'est une
   mention, pas une signature. */
.fmt__cpf{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 0;
  font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.78);
}
.fmt__cpf-logo{
  /* Le logo porte du texte : sous une quarantaine de pixels, « Mon Compte
     Formation » cesse d'être lisible et il ne reste qu'une vignette bleue. Il
     garde ses proportions — seule sa hauteur est fixée. */
  flex:none;width:auto;height:46px;
  border-radius:7px;background:#FFFFFF;padding:3px;
}
.fmt__cta{margin-top:22px}

/* =========================================================================
   LA FENÊTRE D'INSCRIPTION

   Du verre, comme le reste du site : un fond blanc translucide, un flou
   d'arrière-plan, un filet clair. Elle est centrée sur un grand écran et
   presque pleine largeur sur un téléphone, avec ses seize pixels de marge.
   ========================================================================= */
.fmtx{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;
  padding:24px;
  background:rgba(40,10,26,.52);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:fmtxFond 200ms ease both;
}
@keyframes fmtxFond{from{opacity:0}to{opacity:1}}

/* Un rectangle paysage, et non une colonne : le formulaire est découpé en
   trois écrans courts, chacun tient largement dans cette largeur, et la
   fenêtre n'a jamais à s'allonger. Le panneau de gauche occupe la place que
   les champs n'utilisent pas. */
.fmtx__boite{
  position:relative;
  display:grid;grid-template-columns:296px minmax(0,1fr);
  width:min(100%,940px);
  /* Un rectangle paysage : la hauteur est bornée, et c'est le corps qui
     défile si un écran demande davantage. */
  max-height:min(calc(100vh - 48px),580px);
  border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.97) 0%,rgba(255,246,250,.95) 100%);
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
          backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 24px 64px rgba(73,19,48,.22);
  animation:fmtxBoite 260ms cubic-bezier(.22,.68,.28,1) both;
}
/* Seul le corps défile : le panneau reste en place, et la fenêtre garde sa
   hauteur quoi qu'il arrive. */
.fmtx__corps{
  position:relative;min-width:0;
  padding:34px 36px 30px;
  overflow-y:auto;overscroll-behavior:contain;
}

/* --- Le panneau de gauche ------------------------------------------------- */
.fmtx__aside{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px 26px;
  background:#3D0620 url(/assets/img/formation-webmaster-poster.jpg) center/cover no-repeat;
}
.fmtx__aside-voile{
  position:absolute;inset:0;
  background:linear-gradient(168deg,rgba(61,6,32,.74) 0%,rgba(103,15,58,.9) 52%,rgba(149,23,83,.86) 100%);
}
.fmtx__aside-txt{position:relative}
.fmtx__aside .fmtx__sur{color:#F6C7DC}
.fmtx__aside-t{
  margin:0;font-size:20px;line-height:1.28;letter-spacing:-.015em;
  font-weight:600;color:#fff;
}
.fmtx__aside-p{
  margin:14px 0 0;
  font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.87);
}
.fmtx__aside-cpf{
  display:inline-block;margin:20px 0 0;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;
}
@keyframes fmtxBoite{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* Au-dessus des deux colonnes : le panneau de gauche est positionné lui aussi
   et, sans cette couche, son fond le recouvrirait dès qu'il passe en tête. */
.fmtx__x{
  position:absolute;top:16px;right:16px;z-index:2;
  display:grid;place-items:center;width:34px;height:34px;
  background:transparent;border:1px solid var(--line-2);border-radius:9px;
  color:var(--ink-2);cursor:pointer;
}
@media (hover:hover){
.fmtx__x:hover{border-color:var(--plum);color:var(--plum)}
}

.fmtx__sur{
  margin:0 0 8px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#A0567E;
}
.fmtx__t{margin:0;font-size:23px;line-height:1.25;letter-spacing:-.02em;color:var(--plum)}
.fmtx__p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}


/* --- L'avancement ---------------------------------------------------------
   Trois barres, et la phrase qui les dit. Les barres franchies se remplissent
   du même dégradé que les boutons ; celles qui restent gardent le filet clair
   du reste de la fenêtre. */
.fmtx__pas{margin-top:16px}
.fmtx__pas-barres{display:flex;gap:6px}
.fmtx__pas-b{
  flex:1;height:4px;border-radius:999px;background:#F0DCE6;
  transition:background 260ms ease;
}
.fmtx__pas-b.est-fait{background:linear-gradient(90deg,#951753,#C92D78)}
.fmtx__pas-txt{
  margin:9px 0 0;font-size:12.5px;letter-spacing:.01em;color:var(--ink-3);
}
.fmtx__pas-txt strong{font-weight:600;color:var(--plum)}

.fmtx__form{display:flex;flex-direction:column;gap:16px;margin-top:20px}
/* Chaque écran est une colonne à lui seul : c'est lui qui règle l'air entre
   ses propres champs, et le formulaire n'espace plus que les écrans. */
.fmtx__ecran{display:flex;flex-direction:column;gap:14px}
/* `display:flex` bat le `display:none` que le navigateur attache à `hidden` —
   sans cette ligne, les trois écrans s'affichent en même temps. */
.fmtx__ecran[hidden]{display:none}
.fmtx__form .field{gap:6px}
.fmtx__form .input,.fmtx__form .select{height:48px}
.fmtx__form .input{padding-left:16px}
.fmtx__select{padding-left:16px}
.fmtx__opt{font-weight:400;color:var(--ink-3)}

/* --- Une question à réponse unique ---------------------------------------
   Le `fieldset` ne sert qu'à relier la question à ses réponses : il n'a ni
   cadre ni marge propre, tout cela est repris ici. */
.fmtx__groupe{margin:0;padding:0;border:0;min-width:0}
.fmtx__q{
  padding:0;margin-bottom:9px;
  font-size:13.5px;font-weight:600;line-height:1.4;color:var(--plum);
}
.fmtx__choix{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:8px}
.fmtx__choix-o{
  display:flex;align-items:center;gap:10px;
  /* De l'air en haut et en bas, et non seulement une hauteur minimale :
     « Indépendante / auto-entrepreneuse » passe sur deux lignes, et celles-ci
     venaient buter contre les bords. */
  min-height:46px;padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.6);border:1px solid var(--line-2);
  font-size:14px;line-height:1.4;color:var(--ink-2);cursor:pointer;
  transition:border-color 160ms ease,background 160ms ease,color 160ms ease;
}
.fmtx__choix-o input{flex:none;width:17px;height:17px;margin:0;accent-color:#951753}
@media (hover:hover){
.fmtx__choix-o:hover{border-color:#E4BCCE;background:rgba(255,255,255,.9)}
}
/* La réponse retenue se voit sans qu'on ait à chercher le petit rond. */
.fmtx__choix-o:has(input:checked){
  border-color:#C98DAC;background:linear-gradient(120deg,#FFF6FA,#FDEBF3);
  color:var(--plum);font-weight:500;
}
.fmtx__choix-o:focus-within{outline:2px solid rgba(149,23,83,.34);outline-offset:2px}

/* --- Aller et venir ------------------------------------------------------- */
.fmtx__nav{display:flex;align-items:center;gap:12px;margin-top:2px}
.fmtx__nav .fmtx__envoi{flex:1}
.fmtx__retour{
  flex:none;min-height:44px;padding:0 16px;border-radius:10px;
  background:transparent;border:1px solid var(--line-2);
  font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:border-color 160ms ease,color 160ms ease;
}
@media (hover:hover){
.fmtx__retour:hover{border-color:var(--plum);color:var(--plum)}
}

/* Le champ que personne ne voit. Il n'est pas en `display:none` : certains
   robots l'écartent alors. Il est simplement hors du champ visible. */
.fmtx__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fmtx__consent{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;line-height:1.5;color:var(--ink-2);cursor:pointer;
}
.fmtx__consent input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:#951753}

.fmtx__err{
  margin:0;padding:11px 13px;border-radius:9px;
  background:#FDF0F4;border:1px solid #F3D3DE;
  font-size:14px;line-height:1.5;color:#8C1140;
}
.fmtx__envoi[disabled]{opacity:.72;cursor:progress}

/* --- La réussite ---------------------------------------------------------- */
.fmtx__ok{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0}
.fmtx__ok-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(140deg,#F7E4EE,#FBEFF5);color:#951753;
}
.fmtx__ok .fmtx__t{margin:0}
.fmtx__ok .fmtx__p{margin:0}
.fmtx__ok-btn{margin-top:6px}

/* =========================================================================
   PETITS ÉCRANS
   ========================================================================= */

/* Sous 880 pixels, le panneau ne tient plus à côté des champs : il passe
   au-dessus, réduit à son titre — les trois points et le sceau CPF sont déjà
   sur la carte qui a ouvert la fenêtre, les répéter ici volerait la hauteur
   dont le formulaire a besoin. */
@media (max-width:880px){
  .fmtx__boite{grid-template-columns:minmax(0,1fr);width:min(100%,560px)}
  .fmtx__aside{justify-content:flex-start;padding:20px 24px}
  .fmtx__aside-t{font-size:17px}
  /* Le paragraphe et le sceau CPF s'effacent : la carte qui a ouvert la
     fenêtre les a déjà dits, et la hauteur revient au formulaire. */
  .fmtx__aside-p,.fmtx__aside-cpf{display:none}
  /* La croix se retrouve sur le prune : elle s'y éclaircit, sans quoi elle
     disparaîtrait. */
  .fmtx__x{border-color:rgba(255,255,255,.4);color:#fff}
  .fmtx__x:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.14)}
}
@media (max-width:560px){
  /* Une réponse par ligne : à deux de front, les libellés se coupent. */
  .fmtx__choix{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1080px){
  .fmt{min-height:320px}
}
@media (max-width:760px){
  /* La respiration au-dessus du texte venait de la marge du badge ; celui-ci
     est maintenant hors du flux, et c'est la carte qui la porte. */
  .fmt{min-height:0;padding:170px 20px 24px;border-radius:14px}
  /* La fiche se resserre, sans perdre son débord ni sa lisibilité, et les
     deux fils gardent leurs proportions. */
  .fmt__etiq{
    left:18px;top:-11px;height:29px;padding:0 13px;gap:7px;
    font-size:10px;letter-spacing:.13em;
  }
  .fmt__etiq-etoile{width:10px;height:10px}
  .fmt__t{margin-top:20px}
  .fmt__cpf{gap:9px;font-size:12px}
  .fmt__cpf-logo{height:40px}
  .fmt__cta{width:100%;margin-top:18px}

  .fmtx{padding:16px}
  .fmtx__boite{max-height:calc(100vh - 32px);border-radius:14px}
  .fmtx__corps{padding:22px 20px 20px}
  .fmtx__t{font-size:20px}
  /* La question de disponibilité est longue : elle respire mal en 20 pixels de
     marge, et ses réponses se serrent. */
  .fmtx__choix-o{padding:10px 12px}
}

/* --- Mouvement refusé -----------------------------------------------------
   La vidéo n'est pas même montée — c'est le composant qui le décide, et son
   affiche prend sa place. Ici, les entrées de la fenêtre s'arrêtent. */
@media (prefers-reduced-motion:reduce){
  .fmtx,.fmtx__boite{animation:none}
  .fmtx__pas-b{transition:none}
  .fmt{transition:none}
  /* La fiche et son trombone sont posés d'emblée : aucune entrée. */
  .fmt__etiq{animation:none}
}

/* =========================================================================
   LES DEUX PUBLICS — 01 LES CANDIDATES, 02 LES ENTREPRISES

   Deux sections qui se suivent, et non plus deux onglets. Rien ne se remplace
   au clic, rien n'est épinglé : le défilement est celui de la page.

   Aucune couleur nouvelle — le blanc de la page, le prune du texte, le rose de
   la marque, le dégradé des boutons et le dégradé sombre du pied de page.
   ========================================================================= */
/* --- Le rail ---------------------------------------------------------------
   Les deux panneaux partagent un parent : c'est lui que ScrollTrigger épingle
   sous la barre, et c'est la piste qu'il fait glisser d'une largeur de vue.

   Le mécanisme précédent — la première section collée sous la barre pendant
   que la seconde remontait par-dessus — est retiré : les deux panneaux ne se
   recouvrent plus, ils se succèdent latéralement. Le défilement reste
   vertical ; seul le mouvement des panneaux est horizontal.

   Rien de tout cela n'existe sous 1024 px, ni quand le mouvement est refusé :
   la piste redevient un simple bloc et les deux sections se suivent, chacune
   avec le rythme de la page. C'est l'état de base de la feuille — le rail est
   l'exception, non l'inverse : sans script, les deux sections sont là. */
/* La hauteur réelle de la barre du site. Le rail s'y arrête, et la hauteur
   d'un panneau s'en déduit. */
:root{--hauteur-header:86px}

.rail{position:relative}
.pro{position:relative;overflow:hidden}
.pro--c{background:var(--bg-white)}
/* Chaque panneau porte son propre fond : c'est ce qui fait entrer le prune
   avec le mouvement, sans qu'aucun dégradé ne soit ajouté par-dessus. */
.pro--e{
  position:relative;
  padding-top:max(96px,var(--rythme));
}

/* Le repère d'avancement n'existe que sur le rail. */
.rail__reperes{display:none}

/* --- Le rail, à partir de 1024 px et si le mouvement est accepté -----------
   Deux panneaux côte à côte dans une piste deux fois plus large que la vue.
   La piste est mesurée en pourcentage du rail, non en `vw` : `100vw` compte
   la barre de défilement verticale, et le second panneau se serait arrêté à
   quinze pixels du bord. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  :root{
    /* Ce que le rail montre réellement : la vue, moins la barre. */
    --vue-rail:calc(100svh - var(--hauteur-header));
    /* L'air au-dessus et au-dessous du contenu d'un panneau. Il suit la
       hauteur de l'écran : le rythme de la page, calculé sur la largeur,
       déborderait la vue sur un portable. */
    --gouttiere-rail:clamp(16px,3.4vh,64px);
    /* Le corps commun aux deux panneaux : leurs colonnes se calent dessus, et
       leurs boutons tombent donc à la même hauteur d'écran. Plafonné à 600px
       — au-delà, la vidéo devenait plus haute que large sans rien montrer de
       plus. */
    --corps-rail:min(600px,calc(var(--vue-rail) - 2 * var(--gouttiere-rail)));
  }
  /* Sur un écran peu haut, les gouttières se resserrent d'elles-mêmes ; le
     contenu, lui, n'est jamais masqué. */

  .rail{overflow:hidden}
  .rail__piste{display:flex;flex-wrap:nowrap;will-change:transform}
  .rail__piste > .pro{
    flex:0 0 100%;width:100%;
    height:var(--vue-rail);min-height:0;
    padding-block:var(--gouttiere-rail);
    display:flex;align-items:center;
  }
  .rail__piste > .pro--e{padding-top:var(--gouttiere-rail)}
  /* Pas de « width:100% » ici : le corps garde la colonne éditoriale du site,
     celle de « .wrap » — trente-deux pixels de marge, mille quatre cents au
     plus. C'est exactement la colonne du header, et c'est ce qui empêchait le
     texte de venir se coller à douze pixels du bord. */
  .rail__piste > .pro > .pro__in{min-height:var(--corps-rail)}
  /* --- Une seule grille pour les deux panneaux ----------------------------
     Même conteneur, mêmes marges, mêmes colonnes, même écart : le texte des
     entreprises tombe exactement sur la ligne verticale du texte des
     candidates, et le bord gauche de la carte du dépôt sur celui de la vidéo.

     Chaque panneau avait ses propres colonnes — .92/1.04 d'un côté,
     1.08/.86 de l'autre — et les deux compositions ne partageaient plus une
     seule ligne. Elles n'en font maintenant qu'une. */
  .rail__piste > .pro > .pro__in{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:clamp(64px,5.4vw,96px);
    /* Les deux colonnes commencent sur la même ligne : le haut du sur-titre
       est celui du média d'en face. Rien n'est centré de son côté. */
    align-items:start;
  }

  /* --- La structure verticale, identique dans les deux panneaux -----------
     Le bloc éditorial occupe toute la hauteur du corps — la même pour les
     deux — et s'organise de la même façon : sur-titre et titre, paragraphe,
     liste, puis la zone de boutons qu'une marge automatique pousse en bas.

     C'est cette marge, et non un calage par le bas ni une valeur écrite à la
     main, qui met les quatre boutons sur la même ligne : les deux zones ont
     le même bas et la même hauteur, donc le même haut. */
  .pro__txt{
    align-self:stretch;min-height:var(--corps-rail);
    display:flex;flex-direction:column;
  }
  /* Trois niveaux dans le sélecteur, non un seul : « .pro__actions » reçoit
     plus loin dans cette feuille une marge haute de trente-deux pixels — le
     rythme intérieur des sections — et à poids égal c'est la dernière règle
     qui l'emporte. Sans cela la marge automatique ne s'appliquait pas, et les
     boutons restaient collés à la liste. */
  .rail__piste > .pro .pro__actions{margin-top:auto;gap:16px}
  /* Le média part du haut, comme le sur-titre d'en face. */
  .pro__media{align-self:start}
  /* Les quatre boutons : même hauteur, même rembourrage vertical. */
  .pro__actions .pro__cta,
  .pro__actions .pro__cta2,
  .pro__actions .pro__lien{height:48px;padding-block:0;line-height:1}
  /* La vidéo prend le corps commun : sans cela c'est elle qui dicterait la
     hauteur de la grille des candidates, et d'elles seules. Elle est cadrée en
     `cover` — elle se recadre, elle ne se déforme pas. */
  .pro--c .pro__video{
    height:var(--corps-rail);max-height:none;aspect-ratio:auto;width:100%;
  }

  /* --- Le repère : 01 Candidates — 02 Entreprises -------------------------
     En bas du rail, sur la même colonne éditoriale que le reste de la page.
     Il ne recouvre rien : la gouttière basse d'un panneau lui laisse la
     place. Il est informatif, et n'est pas un jeu de boutons — aucun de ses
     éléments n'est cliquable, et il est retiré de l'arbre d'accessibilité. */
  .rail__reperes{
    position:absolute;left:0;right:0;bottom:clamp(12px,2.2vh,26px);z-index:3;
    display:flex;justify-content:center;pointer-events:none;
  }
  .rail__reperes-in{
    /* Exactement la colonne éditoriale de la page — les mêmes deux variables
       que « .wrap » : le repère s'aligne sur la barre et sur les sections. */
    width:calc(100% - (2 * var(--grille-marge)));max-width:var(--grille-max);
    margin-inline:auto;
    display:flex;align-items:center;gap:14px;
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    font-variant-numeric:tabular-nums;
  }
  .rail__etape{display:flex;align-items:center;gap:7px;white-space:nowrap}
  .rail__etape-n{font-weight:700}
  /* La couleur des deux libellés est conduite par GSAP, chacun à son heure —
     voir DeuxProfils.tsx. Ces valeurs sont l'état de départ, celui du premier
     panneau, et celui qu'on voit si le script ne se charge pas. */
  .rail__etape--c{color:rgba(50,23,42,.86)}
  .rail__etape--e{color:rgba(50,23,42,.34)}

  /* --- La barre ------------------------------------------------------------
     Quatre pixels, deux bouts ronds. Le fond du fil doit se voir sur le blanc
     comme sur le prune : un mauve à mi-chemin des deux, plutôt qu'un blanc
     transparent qui disparaîtrait sur le premier panneau ou un prune qui
     disparaîtrait sur le second. */
  .rail__fil{
    position:relative;flex:1;height:4px;border-radius:999px;
    background:rgba(168,124,150,.42);
  }
  /* Le remplissage : nacré à la naissance, rose pâle au milieu, rose poudré
     plus soutenu au bout. Le dégradé est porté par l'élément mis à l'échelle,
     donc il s'étire avec lui : la teinte la plus soutenue reste toujours à
     l'extrémité active, celle qui avance. C'est elle qui rend la barre lisible
     sur le panneau blanc, où le nacré ne se voit pas ; et c'est le nacré qui
     la rend lisible sur le prune, où le rose s'assombrirait. */
  .rail__fil-part{
    position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
    border-radius:999px;
    background:linear-gradient(90deg,#FFFFFF 0%,#FCEBF3 44%,#F2B9D4 100%);
    /* Une lueur, non une ombre : sept pixels de diffusion, rien de plus. */
    box-shadow:0 0 7px rgba(233,150,190,.55);
  }
  /* La tête : un point de largeur nulle, que GSAP déplace le long du fil. Ses
     deux enfants sont posés par rapport à lui. */
  .rail__fil-tete{position:absolute;left:0;top:50%;width:0;height:0}
  /* L'éclat : un halo blanc diffus qui accompagne l'extrémité. Il ne bat pas,
     il n'a aucune animation propre — il n'avance qu'avec le défilement. */
  /* Le reflet traîne un peu derrière le losange : son centre est décalé de
     huit pixels vers l'arrière, de sorte que la lumière le suit au lieu de
     l'entourer. */
  .rail__fil-eclat{
    position:absolute;left:-40px;top:-11px;width:64px;height:22px;border-radius:999px;
    background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,0));
    filter:blur(3px);
  }
  /* Le losange, à l'extrémité active. Dix pixels de côté tournés d'un quart
     de tour : c'est la forme des petits repères de la marque, reprise ici à
     la plus petite taille possible.

     Il n'a pas de cercle autour, pas de pictogramme dedans, et il ne se pose
     pas sur la ligne — il en fait partie : son cœur est du même nacré que le
     remplissage, et son halo la même lumière, en un peu plus dense.

     La rotation est posée par la propriété « rotate », séparée de
     « transform » : le déplacement est porté par la tête, au-dessus, et les
     deux ne se marchent pas dessus. */
  .rail__fil-diamant{
    position:absolute;left:-5px;top:-5px;width:10px;height:10px;
    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(255,255,255,.62),0 0 10px rgba(240,179,210,.62);
    transition:box-shadow 140ms var(--ease-out);
  }
  /* L'arrivée : la lumière s'affirme, moins de trois dixièmes de seconde. Ni
     rebond, ni grossissement — seul le halo change. */
  .rail__fil-diamant.est-arrivee{
    box-shadow:0 0 9px rgba(255,255,255,.85),0 0 16px rgba(240,179,210,.85);
  }
}

.pro__in{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.04fr);
  align-items:center;column-gap:70px;
}

/* --- Le grand numéro -------------------------------------------------------
   Derrière la colonne de texte, coupé par le bord de la section. La
   transparence est dans la couleur : GSAP se sert de l'opacité pour l'entrée,
   et les deux se seraient écrasées. */
.pro__num{
  position:absolute;top:50%;z-index:0;
  transform:translateY(-52%);
  font-size:clamp(160px,21vw,340px);
  font-weight:800;line-height:.82;letter-spacing:-.06em;
  pointer-events:none;user-select:none;
}
.pro__txt{position:relative;z-index:1}
.pro__media{position:relative;z-index:1;min-width:0}

/* --- 01 · les candidates : clair, le texte à gauche ------------------------ */
.pro--c > .pro__in{position:relative}
.pro--c .pro__num{left:-64px;color:rgba(195,35,113,.08)}
.pro--c .pro__txt{grid-column:1}
.pro--c .pro__media{grid-column:2}

/* --- 02 · les entreprises : le prune du site, l'aperçu à gauche ------------ */
.pro--e{background:var(--bg-plum);color:#FFFFFF}
/* Aucun raccord entre les deux fonds : le blanc s'arrête, le prune commence.
   C'est la coupure franche qui fait le rythme — un dégradé entre les deux
   n'aurait fait qu'une bande trouble. */
/* Les deux colonnes du panneau des entreprises sont inversées : le texte à
   gauche, l'aperçu du dépôt à droite. Les colonnes elles-mêmes ne sont plus
   redéfinies ici : les deux panneaux partagent désormais la même grille, plus
   bas dans le bloc du rail. Sans quoi le texte des entreprises ne tombait pas
   sur la même ligne verticale que celui des candidates. */
/* Le grand « 02 » passe à gauche avec le texte : resté à droite, il se serait
   retrouvé entièrement derrière la carte blanche du formulaire, qui l'aurait
   recouvert. Son opacité ne change pas. */
.pro--e .pro__num{left:-52px;right:auto;color:rgba(255,255,255,.07)}
/* La rangée est dite, non déduite : dans le document l'aperçu vient avant le
   texte, et l'auto-placement d'une grille ne revient jamais en arrière — le
   texte, envoyé en première colonne après un aperçu déjà posé en seconde,
   descendait d'une rangée et le panneau doublait de hauteur. */
.pro--e .pro__txt{grid-column:1;grid-row:1}
.pro--e .pro__media{grid-column:2;grid-row:1}
/* La carte du dépôt occupe sa colonne, sans être élargie ni collée au bord. */
.pro--e .pro__media{justify-self:stretch;width:100%}

/* --- Le texte -------------------------------------------------------------- */
.pro__sur{
  margin:0 0 16px;
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);
}
.pro--e .pro__sur{color:rgba(255,255,255,.58)}
.pro__t{
  margin:0;max-width:15ch;
  font-size:clamp(28px,2.7vw,40px);line-height:1.12;letter-spacing:-.026em;
  font-weight:600;color:var(--plum);
}
.pro--e .pro__t{color:#FFFFFF}
.pro__p{
  margin:22px 0 0;max-width:44ch;
  font-size:15.5px;line-height:1.75;color:var(--ink-2);
}
.pro--e .pro__p{color:rgba(255,255,255,.78)}

/* Trois lignes, un petit losange rose devant chacune. */
.pro__pts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.pro__pt{
  display:flex;align-items:baseline;gap:14px;
  font-size:15px;line-height:1.5;font-weight:500;color:var(--plum);
}
.pro--e .pro__pt{color:rgba(255,255,255,.90)}
.pro__repere{
  flex:none;width:7px;height:7px;transform:rotate(45deg) translateY(-2px);
  background:var(--rose);
}
.pro--e .pro__repere{background:#F3A8CE}

.pro__actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:36px}
.pro--c .pro__actions{gap:26px}
/* Le lien secondaire prend la hauteur du bouton : sans cela sa boîte se
   centrait sept pixels plus bas. */
/* « Découvrir les formations » n'est plus un lien nu posé à côté d'un bouton :
   c'était un texte sans boîte, d'une taille et d'une graisse différentes, et
   sa ligne ne tombait donc jamais sur celle de « Voir les opportunités ».
   Il prend la même boîte que « Nous contacter » du panneau des entreprises —
   même hauteur, même rembourrage, même rayon, même taille de texte — mais en
   contour sombre, puisqu'il est sur fond clair. */
.pro .lien-sect{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 24px;gap:9px;
  border:1px solid var(--line-2);border-radius:8px;
  background:transparent;
  font-size:15px;font-weight:600;letter-spacing:-.008em;line-height:1;
  color:var(--plum);
  transition:border-color 220ms var(--ease-out),color 220ms var(--ease-out),
             background 220ms var(--ease-out);
}
/* Le filet qui se tirait au survol s'en va.

   « .lien-sect » est d'abord un lien de section — « Voir toutes les offres »,
   par exemple —, et boutons.css lui donne un ::after : une barre rose de un
   pixel et demi, posée à cinq pixels du bas, qui passe de scaleX(0) à
   scaleX(1) au survol. Sur un lien nu, c'est un soulignement qui se tire. Ici,
   le lien est devenu un bouton à part entière : la barre s'affichait donc à
   l'intérieur de la boîte, au-dessus de sa bordure basse, et n'y ressemblait
   plus qu'à une rayure.

   Elle est retirée pour les seuls boutons du panneau — les autres
   « .lien-sect » du site gardent leur filet, c'est leur dessin. */
.pro .lien-sect::after{content:none}

/* Au survol : le filet se densifie d'un ton et le fond passe à un blanc à
   peine teinté. Rien d'autre — pas de changement de couleur du texte, pas
   d'ombre, pas de soulignement. */
@media (hover:hover){
.pro .lien-sect:hover{
  border-color:#E3C4D5;background:#FFFCFD;color:var(--plum);
}
}
.pro .lien-sect:active{border-color:#D8BCCC;background:#FEF8FB}
/* L'anneau de focus est posé à deux pixels de la bordure : l'écart le
   distingue d'un second contour. */
.pro .lien-sect:focus-visible{
  outline:2px solid var(--rose);outline-offset:2px;
  border-color:var(--line-2);
}
/* La flèche suit le texte, comme dans les deux boutons d'en face. */
.pro .lien-sect svg{width:16px;height:16px;transition:transform 200ms var(--ease-out)}
@media (hover:hover){
.pro .lien-sect:hover svg{transform:translateX(3px)}
}

/* --- Les deux boutons du fond sombre ---------------------------------------
   Sur le prune, le rose saturé se confondait avec le fond. Le principal passe
   au rose pâle du site, dégradé vers le blanc, texte en prune ; le second est
   un contour, de même hauteur et de même rayon. */
/* Trois classes, non pas deux : boutons.css est chargé après cette feuille et
   y repeint « .btn.btn--primary » en bordeaux, fond, texte et ombre compris.
   À poids égal c'est lui qui l'emportait, et « Publier une annonce » sortait
   framboise sur le prune. Le hero règle le même problème de la même façon. */
.pro--e .pro__actions .pro__cta{
  background-image:linear-gradient(105deg,#FBEAF2 0%,#FFFFFF 46%,#FBEAF2 100%);
  background-size:200% 100%;background-position:0% 0;
  background-color:#FBEAF2;
  border:0;color:var(--plum);box-shadow:none;
  transition:background-position 520ms var(--ease-out),box-shadow 260ms var(--ease-out),
             transform 200ms var(--ease-out);
}
@media (hover:hover){
.pro--e .pro__actions .pro__cta:hover{
  background-position:100% 0;
  box-shadow:0 0 0 1px rgba(255,255,255,.30),0 6px 18px rgba(255,255,255,.14);
  transform:translateY(-1px);
}
}
.pro--e .pro__actions .pro__cta:active{transform:translateY(0)}
/* Le reflet qui balaie les boutons du site est blanc : sur un bouton déjà
   blanc il ne se voit pas. Il passe en rose très pâle, comme sur le hero. */
.pro--e .pro__actions .pro__cta::after{
  background:linear-gradient(96deg,
    rgba(255,255,255,0) 0%,
    rgba(255,222,238,.34) 34%,
    rgba(255,255,255,.82) 50%,
    rgba(255,222,238,.34) 66%,
    rgba(255,255,255,0) 100%);
}
/* La flèche suit la couleur du texte, non le blanc des boutons sombres. */
.pro--e .pro__actions .pro__cta svg{color:var(--plum)}
.pro__cta2{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 24px;gap:9px;border-radius:8px;
  /* Un bouton blanc, texte et flèche prune foncé : sur l'aplat de la
     section, il se lit comme le second choix sans disparaître. Le filet est
     un prune très dilué — visible, jamais appuyé. */
  background:#FFFFFF;
  border:1px solid rgba(50,23,42,.16);
  font-size:15px;font-weight:600;letter-spacing:-.008em;color:var(--plum);
  transition:background 220ms var(--ease-out),border-color 220ms var(--ease-out);
}
.pro__cta2 svg{color:var(--plum)}
@media (hover:hover){
.pro__cta2:hover{background:#FBF4F8;border-color:rgba(50,23,42,.30);color:var(--plum)}
}
/* Le focus clavier : l'anneau rose du site, décollé du bouton blanc. */
.pro__cta2:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-color:rgba(50,23,42,.30)}
.pro__cta svg,.pro__cta2 svg{width:16px;height:16px;transition:transform 200ms var(--ease-out)}
@media (hover:hover){
.pro__cta:hover svg,.pro__cta2:hover svg{transform:translateX(3px)}
}

/* --- Les médias ------------------------------------------------------------
   La vidéo est nue : ni carte, ni ombre. Un rayon léger, et c'est tout. */
.pro__video{
  position:relative;aspect-ratio:4 / 3.3;border-radius:16px;overflow:hidden;
  background:var(--plum);
}
.pro__video .fondv{position:absolute;inset:0}
.pro__video .fondv__img,
.pro__video .fondv__v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;
}
.pro__video .fondv__v{z-index:1}

.pro__apercu{
  width:100%;max-width:520px;
  padding:24px;border-radius:16px;
  background:var(--bg-white);
  border:1px solid var(--line);
  box-shadow:none;
}

@media (max-width:980px){
  /* La superposition n'est posée qu'au-dessus de 980px : il n'y a rien à
     défaire ici. Sur un petit écran, une section qui tient sous la barre
     mangerait toute la lecture — les deux se suivent, chacune avec le
     rembourrage confortable du rythme de la page. */
  .pro--e{box-shadow:none}

  /* Le texte passe avant le média, dans les deux sections. */
  .pro__in,
  .pro--e .pro__in{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .pro__t{max-width:none}
  .pro--c .pro__txt,
  .pro--e .pro__txt{grid-column:1;grid-row:1}
  .pro--c .pro__media,
  .pro--e .pro__media{grid-column:1;grid-row:2}
  /* Les grands numéros deviennent une signature, non plus un décor : ils
     perdent un tiers de leur taille et la moitié de leur encre. Sur une
     tablette ils traversaient le titre. */
  .pro__num{font-size:clamp(88px,20vw,150px)}
  .pro--c .pro__num{color:rgba(195,35,113,.055)}
  .pro--e .pro__num{color:rgba(255,255,255,.05)}
  .pro--c .pro__num{left:-32px}
  .pro--e .pro__num{right:-26px}
  .pro__apercu{max-width:none}
  .pro__actions,.pro--c .pro__actions{gap:14px}
  .pro__cta,.pro__cta2{width:100%;justify-content:center}
}

/* =========================================================================
   « DES RETOURS QUI COMPTENT. »

   La section qui précède est le grand fond prune des entreprises. Celle-ci
   reste claire, et c'est sa clarté qui fait la respiration : rien de foncé,
   rien de coloré en aplat.

   Deux colonnes inégales : le titre tient la gauche, un tiers, aligné à
   gauche ; la parole occupe les deux tiers de droite, écrite en grand et
   posée à même le fond. Il n'y a ni carte, ni cadre, ni ombre, ni pastille —
   un seul filet rose au-dessus du message, et rien d'autre.

   Un message à la fois. Les trois occupent la même case de grille : le fondu
   est possible, et la page ne saute pas d'une hauteur à l'autre. La hauteur
   est celle du plus long des trois, jamais une valeur écrite ici.

   Ce qui a été essayé et retiré, pour ne pas y revenir : trois cartes de
   front, une grande carte et deux empilées, des guillemets géants, des
   pastilles, des ombres, un ruban qui défile au doigt.
   ========================================================================= */
.temo{background:#FDFAFB}
/* La mesure de section commune — « .offres, .pro, .temo… » plus bas — est
   celle des grandes sections. Deux classes : c'est ce qu'il faut pour passer
   après la règle groupée, qui vient plus loin dans la feuille. */
.sec.temo{padding-block:clamp(64px,5.2vw,90px)}

/* --- Les deux colonnes ---------------------------------------------------- */
.temo__grille{
  display:grid;grid-template-columns:minmax(0,32fr) minmax(0,68fr);
  gap:clamp(32px,4vw,64px);
  align-items:start;
}

/* --- La colonne du titre, à gauche ---------------------------------------- */
.temo__head{text-align:left}
.temo__sur{
  margin:0;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#A0567E;                                  /* le rose foncé des sur-titres du site */
}
.temo__head h2{
  margin:0;max-width:11ch;
  font-size:clamp(28px,2.8vw,38px);line-height:1.12;letter-spacing:-.026em;
}
/* Sur-titre → titre : la mesure des autres sections de la page. */
.sec.temo .temo__head .temo__sur{margin-bottom:14px}

/* --- La colonne de la parole, à droite ------------------------------------ */
.temo__scene{min-width:0}
/* Le seul trait de la section. */
.temo__pile{
  display:grid;
  padding-top:26px;border-top:1px solid var(--mw-filet-rose);
}
/* La hauteur est posée par le composant, qui mesure le message affiché. Elle
   n'est conduite qu'une fois la première mesure faite — sinon la case se
   replierait sous les yeux à l'ouverture de la page. Le débordement est coupé
   le temps du passage : pendant les quatre cent vingt millisecondes, le
   message qui arrive est encore presque transparent. */
.temo__pile.est-mesuree{
  overflow:hidden;
  transition:height 420ms var(--ease-out);
}
/* Les trois messages dans une même case : c'est la grille qui les superpose,
   et non un positionnement absolu — la case garde ainsi la hauteur du plus
   long, sans qu'aucune hauteur ne soit écrite. */
.temo__mot{
  grid-area:1 / 1;align-self:start;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity 420ms var(--ease-out),visibility 0s linear 420ms;
}
.temo__mot.est-la{
  opacity:1;visibility:visible;
  transition:opacity 420ms var(--ease-out);
}
.temo__mot blockquote{margin:0}
.temo__mot p{
  margin:0;max-width:40ch;
  font-size:clamp(20px,1.6vw,23px);line-height:1.48;letter-spacing:-.012em;
  font-weight:400;color:var(--plum);
  /* Le message se lit droit : mis en italique d'un bout à l'autre, il se
     lisait comme une légende. Seuls les chevrons restent penchés — ils disent
     la citation, ils n'en sont pas. Espaces insécables : sans elles, le
     chevron fermant tombait seul sur la dernière ligne. */
  font-style:normal;
}
.temo__mot p::before{content:"\00AB\00A0";font-style:italic;color:var(--ink-3)}
.temo__mot p::after{content:"\00A0\00BB";font-style:italic;color:var(--ink-3)}

/* Le métier, puis ce qui a abouti : deux lignes de texte, sans fond ni filet. */
.temo__qui{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  margin-top:22px;
}
.temo__poste{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--plum)}
.temo__issue{font-size:13.5px;line-height:1.4;color:var(--rose)}

/* --- La pagination et les deux flèches ------------------------------------ */
.temo__barre{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:28px;
}
.temo__num{
  margin:0;font-size:13px;letter-spacing:.1em;font-variant-numeric:tabular-nums;
  color:var(--ink-3);
}
.temo__num-a{font-weight:600;color:var(--plum)}
.temo__fls{display:flex;gap:8px}
.temo__fl{
  display:grid;place-items:center;width:38px;height:38px;
  border-radius:999px;cursor:pointer;
  background:none;border:1px solid var(--mw-filet-rose);
  color:var(--rose);
  transition:border-color 180ms var(--ease-out),color 180ms var(--ease-out);
}
@media (hover:hover){
.temo__fl:hover{border-color:var(--rose)}
}
.temo__fl:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* --- Tablette : les deux colonnes se rééquilibrent ------------------------- */
/* À cette largeur, un tiers ne suffit plus au titre — il tomberait en quatre
   lignes de deux mots. La colonne de gauche en reprend un peu. */
@media (max-width:1180px){
  .temo__grille{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:36px}
  .temo__head h2{max-width:13ch}
}

/* --- Téléphone : le titre, puis la parole --------------------------------- */
@media (max-width:760px){
  .temo__grille{grid-template-columns:minmax(0,1fr);gap:26px}
  .temo__head h2{max-width:16ch}
  .temo__pile{padding-top:22px}
  /* Un cran plus petit qu'en grand écran, et la mesure tombe : d'un message
     à l'autre l'écart de hauteur passe de cent cinquante pixels à soixante,
     et le blanc sous les deux plus courts cesse de se voir. */
  .temo__mot p{font-size:18.5px;line-height:1.56;max-width:none}
  .temo__qui{margin-top:18px}
  .temo__barre{margin-top:24px}
  /* Quarante-quatre pixels : c'est la taille d'un doigt. */
  .temo__fl{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .temo__mot,.temo__mot.est-la,.temo__pile.est-mesuree{transition:none}
  .temo__fl{transition:none}
}

/* =========================================================================
   LE BAS DE PAGE — MÊMES COULEURS, MÊMES RAYONS, MÊME PAS

   Le bloc recruteur, la FAQ et la lettre d'information se suivaient chacun
   avec son propre habillage : un dégradé magenta, une bande rose, un fond
   blanc. Ils partagent maintenant les quatre couleurs de la section
   précédente, le même rayon et le même espacement.
   ========================================================================= */
/* --- La FAQ et la lettre, sur un même sol ivoire -------------------------- */
.zone-ivoire{background:#FFF9F7;border-block:0}
.zone-ivoire + .zone-ivoire{padding-top:0}
/* La FAQ se resserre : la mesure des grandes sections lui donnait cent pixels
   de chaque côté pour quatre questions. Deux classes, pour passer après la
   règle groupée du rythme, plus bas. */
.sec.faq{
  padding-block:clamp(56px,4.4vw,80px);
  /* Le rose poudré de « Les dernières opportunités », repris à l'identique —
     c'est la valeur de « .offres », plus haut dans cette feuille. L'ivoire de
     « .zone-ivoire » tirait vers le gris et cassait la suite des sections. */
  background:#FFF9FB;
}
.zone-ivoire .faq__item{
  background:#FFFFFF;border:1px solid rgba(215,160,170,.30);border-radius:12px;
  box-shadow:none;
}
/* La question ouverte reprend le cadre du site en ligne : filet rose franc et
   halo très léger. Ce sont les valeurs de style.css, réécrites ici parce que
   la règle du dessus — « .zone-ivoire .faq__item », même poids mais plus
   loin dans la cascade — repose la couleur du filet pour les quatre. */
.zone-ivoire .faq__item.is-open{
  border-color:var(--rose);box-shadow:0 8px 22px rgba(195,35,113,.10);
}
/* --- L'accordéon : le dessin d'origine, conduit par GSAP -------------------
   Le losange framboise et la bordure rose de la question ouverte sont ceux de
   style.css, et ils restent : c'est le dessin du site en ligne. Un essai de
   carré corail, puis de rond, les avait remplacés — les deux sont retirés.

   Seules deux choses sont reprises ici, et ce sont des mécaniques, non des
   couleurs. La première : le panneau s'ouvre en hauteur et non en rangée de
   grille, parce que c'est cette hauteur que GSAP anime, et la feuille garde
   les deux états pour que la première réponse reste lisible sans script. */
.zone-ivoire .faq__a{display:block;grid-template-rows:none;height:0;overflow:hidden;transition:none}
.zone-ivoire .faq__item.is-open .faq__a{height:auto}
/* La seconde : « transform » sort de la transition du losange. GSAP écrit la
   rotation image par image ; une transition CSS sur la même propriété la
   ferait traîner d'un cinquième de seconde derrière lui. Le reste — le fond,
   le filet, la couleur du signe — garde la sienne. */
.zone-ivoire .faq__ico{
  transition:background-color 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease);
}

/* --- La colonne de gauche : sobre, dans la seule sans-serif du site --------
   Trois compositions ont été essayées ici et retirées : un panneau mauve monté
   à la hauteur des accordéons, un très grand point d'interrogation en fond, et
   un titre en deux polices dont l'italique tirait vers le manuscrit. Il ne
   reste que du texte, dans la police de la page.

   Le bloc commence sur la même ligne que la première question — la grille est
   déjà calée en haut — et l'appel au contact suit la phrase sans le moindre
   vide. La grille elle-même, ses colonnes et sa gouttière, ne bouge pas : elle
   est en parts, et la resserrer élargirait les accordéons d'autant. */
.faq__grid{
  grid-template-columns:minmax(0,36fr) minmax(0,64fr);
  /* La gouttière se resserre d'une vingtaine de pixels : elle en faisait
     soixante-douze sur un grand écran, et le vide entre les deux colonnes se
     lisait comme une séparation. Les accordéons gagnent d'autant. */
  gap:clamp(32px,3.2vw,52px);
  align-items:start;
}
@media (max-width:1180px){.faq__grid{gap:36px}}

.aide{
  /* « top » est repris à zéro : la feuille d'origine cale « .faq__intro » en
     collant à cent quatre pixels, et cette valeur décalait la colonne d'autant
     vers le bas alors qu'elle n'a plus rien à quoi coller. */
  position:relative;top:auto;
  background:none;border:0;box-shadow:none;padding:0;
  /* Une mesure de lecture, non la largeur de la colonne. La grille, elle, ne
     bouge pas — elle est en parts, et la resserrer élargirait les accordéons
     d'autant. */
  max-width:340px;
  /* La colonne prend la hauteur de sa rangée — donc celle des accordéons —
     et devient une colonne souple : le titre en haut, la relance poussée au
     bas par « margin-top:auto ». Aucune hauteur n'est écrite nulle part, et
     rien ne casse si la liste des questions s'allonge ou raccourcit.

     `align-self` ne vaut que pour cet élément : la grille garde son
     « align-items:start », et la colonne des accordéons n'est pas touchée. */
  align-self:stretch;
  display:flex;flex-direction:column;
}

.aide__sur{
  margin:0 0 12px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#A0567E;                                  /* le rose des sur-titres du site */
}
/* Le titre : une seule police, une seule graisse, une seule couleur — celle du
   site, en gras, en prune foncé. Il a porté un temps deux polices, dont une
   serif italique en framboise sur « question ? » ; il n'en reste rien.

   Sur grand écran il tient sur une ligne : « Une question ? » mesure deux cent
   soixante pixels à trente-huit, dans une colonne qui en fait trois cent
   quarante. Le repli reste possible en dessous, là où la colonne se resserre —
   c'est le comportement normal du texte, rien ne l'interdit. */
.aide__t{
  margin:0;
  font-size:clamp(30px,2.7vw,38px);line-height:1.1;letter-spacing:-.022em;
  font-weight:700;color:var(--plum);
  text-wrap:balance;
}
@media (min-width:901px){
  /* Sur grand écran, la ligne ne se coupe pas : elle a la place. */
  .aide__t{white-space:nowrap}
}
.aide__p{
  margin:16px 0 0;
  font-size:16px;line-height:1.65;color:var(--ink-2);
}

/* --- La relance -----------------------------------------------------------
   Un filet rose très pâle, une question, une adresse. Pas de carte, pas de
   fond, pas d'ombre : c'est la suite de la colonne, non un encart posé dedans.

   « margin-top:auto » la pousse au bas de la colonne, qui fait la hauteur des
   accordéons ; « margin-top » minimal au cas où la rangée serait courte. */
.aide__contact{
  margin-top:auto;padding-top:28px;
  border-top:1px solid #F4E4EC;
}
.aide__relance{
  margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-3);
}
.aide__mail{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:9px;
  font-size:15.5px;font-weight:600;letter-spacing:-.008em;
  color:var(--rose);text-decoration:none;
  transition:color 180ms var(--ease);
}
.aide__fleche{
  display:inline-flex;flex:none;
  transition:transform 180ms var(--ease);
}
.aide__fleche svg{width:15px;height:15px}
@media (hover:hover){
.aide__mail:hover{color:#951753}
}
@media (hover:hover){
.aide__mail:hover .aide__fleche{transform:translateX(3px)}
}
.aide__mail:focus-visible{
  outline:2px solid var(--rose);outline-offset:4px;border-radius:3px;
}

/* La colonne garde vingt-huit pixels entre la phrase et le filet quand la
   rangée est courte — sans cela, « margin-top:auto » les collerait. */
.aide__p + .aide__contact{margin-top:max(auto,28px)}

/* =========================================================================
   TABLETTE — le hero cesse de se remplir de vide

   Entre 761 et 980 px, le hero gardait la mesure du grand écran : une hauteur
   plancher et un contenu centré dedans. Ce qui se lit comme un rembourrage
   énorme n'en est pas un — c'est la place qui reste une fois le bloc centré
   dans une boîte trop haute. Mesuré à 768 px : cent cinquante-deux pixels
   au-dessus du badge, cent vingt-huit sous le dernier bouton, pour un hero de
   sept cent trente-deux.

   La hauteur plancher tombe, et le rembourrage devient réel : les
   quatre-vingt-dix premiers pixels du haut sont repris par la barre — le hero
   remonte d'autant pour passer dessous —, et il reste cinquante-six pixels
   d'air de chaque côté. Le téléphone en a trente-six, le grand écran garde les
   siens : la tablette se range entre les deux.
   ========================================================================= */
@media (min-width:761px) and (max-width:980px){
  .hero{padding:146px 0 56px;min-height:0}
  /* style.css cale le bloc au premier tiers sur une tablette tenue à la
     verticale — « padding-top:13vh » — et c'était juste : le hero y faisait
     plus de mille pixels, et le contenu centré dedans tombait sous le pli.
     Il n'en fait plus six cent soixante-dix : ces treize pour cent d'écran,
     cent dix pixels sur un iPad, ne font plus que rajouter du vide au-dessus
     du badge. Le rembourrage du hero suffit désormais. */
  .hero__bloc{padding-top:0}
}

/* --- Téléphone : le bloc au-dessus des questions --------------------------- */
/* L'ordre du document le place déjà avant elles : il n'y a rien à déplacer,
   seulement une colonne au lieu de deux, et trente-deux pixels entre les
   deux. Les marges latérales restent celles de la page. */
@media (max-width:900px){
  .faq__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  /* Sur une colonne, plus rien à équilibrer : la colonne reprend la hauteur de
     son contenu, et la relance suit la phrase de près. */
  .aide{max-width:none;display:block;align-self:auto}
  .aide__p{max-width:44ch}
  .aide__t{font-size:clamp(27px,7.2vw,34px)}
  .aide__contact{margin-top:22px;padding-top:20px}
  /* L'adresse tient en entier, même à trois cent vingt pixels. */
  .aide__mail{font-size:15px;flex-wrap:nowrap}
}

/* --- Les accordéons : plus fins, plus nets --------------------------------
   La classe « card » que portait chaque question ajoutait vingt-quatre pixels
   de rembourrage tout autour du bouton, et la portait à cent vingt-six. Elle
   est retirée du composant : la question fait la hauteur de son bouton, et le
   bouton se resserre d'un cran. */
.zone-ivoire .faq__list{gap:10px}
.zone-ivoire .faq__q{padding:20px 24px;font-size:15.5px}
.zone-ivoire .faq__item.is-open .faq__q{padding-bottom:2px}
.zone-ivoire .faq__a p{padding:0 24px 20px;margin-top:12px;max-width:62ch}
.zone-ivoire .faq__a p + p{margin-top:12px}
/* Aucune ombre, jamais — au repos comme au survol. */
@media (hover:hover){
.zone-ivoire .faq__item:hover{border-color:rgba(215,160,170,.52);box-shadow:none}
}

.zone-ivoire .news{
  background:var(--mw-ivoire);border:1px solid rgba(215,160,170,.30);
  border-radius:16px;box-shadow:0 1px 3px rgba(50,21,34,.05);
}

@media (max-width:900px){
}

/* =========================================================================
   LE RYTHME VERTICAL DE LA PAGE

   Une seule mesure pour toutes les grandes sections : c'est elle qui écarte
   les blocs, et non les marges des titres. Auparavant chaque section avait son
   propre rembourrage — de vingt-quatre à quatre-vingt-huit pixels — et les
   changements de fond arrivaient contre le sur-titre.

   Les valeurs suivent la largeur : la page respire davantage sur un grand
   écran, et se resserre sur un téléphone sans se coller.
   ========================================================================= */
/* Les trois mesures, nommées : c'est `--rythme` qui les porte jusqu'aux
   sections, mais ce sont ces trois-là qui se règlent.

   La bascule du mobile passe de 700px à 760px : c'est la largeur à laquelle
   toute la page change déjà de mise en page — le hero, la recherche, les
   boutons. Une section qui gardait le rythme de la tablette jusqu'à 700px se
   retrouvait seule à ne pas suivre. */
:root{
  --espace-section-desktop:clamp(88px,7vw,120px);
  --espace-section-tablette:72px;
  --espace-section-mobile:56px;
  --rythme:var(--espace-section-desktop);
}
@media (max-width:1024px){:root{--rythme:var(--espace-section-tablette)}}
@media (max-width:760px){:root{--rythme:var(--espace-section-mobile)}}

/* --- Le plancher typographique du téléphone --------------------------------
   Sur un petit écran, ce qui se lit vraiment ne descend pas sous seize
   pixels : l'intitulé d'une annonce, le texte d'une carte, les avantages des
   deux sections, les libellés de la recherche. Ce qui accompagne — la ligne de
   lieu et de contrat, la mention CPF — reste plus petit, mais remonte tout de
   même d'un point : à treize pixels sur un téléphone, une ligne grise n'est
   plus une information, c'est une texture.

   Les interlignes suivent d'un demi-cran : à taille égale, c'est l'air entre
   les lignes qui fait qu'un paragraphe se lit sur un écran tenu à la main. */
/* Les liens de section — « Voir toutes les offres », « Découvrir les
   formations » — sont du texte nu : leur boîte fait la hauteur d'une ligne.
   Sur un écran tactile — la tablette comprise — on leur donne la hauteur d'une
   cible, sans rien changer à leur dessin. */
@media (max-width:1024px){
  .lien-sect{min-height:44px;display:inline-flex;align-items:center}
}

@media (max-width:760px){
  .ofl__t{font-size:16px;line-height:1.34}
  .ofl__co{font-size:14.5px}
  .ofl__meta{font-size:14px;line-height:1.45}
  /* Elle prenait un écran et demi à elle seule. La bande d'image reste, mais
     elle est ramenée à ce qu'il faut pour reconnaître la scène ; le texte se
     resserre d'un point et d'un dixième d'interligne — deux lignes de moins à
     lire, la même chose de dite. */
  .fmt{padding:112px 20px 22px}
  .fmt__t{margin-top:16px}
  .fmt__p{margin-top:10px;font-size:15px;line-height:1.55}
  /* Le logo garde ses quarante pixels : en dessous, « Mon Compte Formation »
     cesse de se lire. Ce sont les marges qui se resserrent, pas lui. */
  .fmt__cpf{margin-top:14px;font-size:12.5px}
  .fmt__cta{margin-top:16px}
  .pro__p{font-size:16px;line-height:1.78}
  .pro__pt{font-size:16px;line-height:1.55}
  .trust__l{font-size:15px}
  .field > label{font-size:15px}
}

/* Chaque grande section de l'accueil prend cette mesure, en haut comme en
   bas : un sur-titre n'arrive jamais contre la limite d'un fond. */
.offres,
.pro,
.temo,
.zone-ivoire{padding-block:var(--rythme)}
/* La FAQ et la lettre partagent un même sol : elles ne se séparent pas. */
.zone-ivoire + .zone-ivoire{padding-top:0}

/* --- Le hero, la recherche et les repères : un même ensemble --------------
   La carte de recherche reste en chevauchement sur le hero — c'est la seule
   marge négative de la page. Elle respire davantage à l'intérieur, et les
   repères s'en écartent avant que la section suivante ne commence. */
/* Quarante pixels sous le bandeau. La section n'en avait aucun : les chiffres
   n'étaient que du texte sur le blanc, et la section rosée qui suit pouvait
   commencer juste après sans que rien ne se touche. Le bandeau, lui, a un
   cadre — et ce cadre tombait exactement sur la limite des deux fonds. */
.herosuite{padding-bottom:40px}
.herosuite .hsearch{padding:38px}
.herosuite .trust__card{margin-top:clamp(34px,3.4vw,48px)}

/* --- Le bandeau de réassurance -------------------------------------------
   Les quatre chiffres flottaient : quarante-huit pixels de blanc les
   séparaient du formulaire, sans cadre ni fond, au milieu d'une section
   blanche. Rien ne disait qu'ils appartenaient à la recherche.

   Ils en deviennent le pied. Trente pixels d'écart, la largeur du formulaire
   au pixel près — les deux blocs sont dans le même « .wrap » —, et le même
   rembourrage latéral que lui : le contenu du bandeau commence donc à
   l'abscisse où commencent les champs. Un fond rose à peine nommé et un filet
   d'un pixel suffisent à le rattacher ; une ombre en aurait fait une seconde
   carte posée à côté de la première. */
.herosuite .trust__card{
  margin-top:30px;
  padding:16px 38px;
  background:#FDF9FB;
  border:1px solid var(--mw-filet-rose);
  border-radius:var(--r-lg);
}

/* Les séparateurs : un filet pleine hauteur, dans le gris des bordures du
   site, découpait le bandeau en quatre cases. Un trait court, centré sur la
   hauteur du texte et pris dans le rose du cadre, sépare sans découper. */
.herosuite .trust__item{
  position:relative;
  gap:12px;padding:2px 26px;
  border-left:0;
}
.herosuite .trust__item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--mw-filet-rose);
}
.herosuite .trust__item:first-child{padding-left:0}
.herosuite .trust__item:first-child::before{content:none}
.herosuite .trust__item:last-child{padding-right:0}

/* Les icônes perdent leur carré rose. Quarante-quatre pixels de pastille
   pleine autour d'un tracé de vingt : c'était le plus gros objet de la zone,
   et il ne portait aucune information. Ne reste que le tracé, en rose, d'un
   trait plus fin que celui des icônes du site — la finesse fait ici la
   discrétion, à une taille où la lisibilité n'est pas en jeu. */
.herosuite .trust__ico{
  width:22px;height:22px;
  background:none;border:0;border-radius:0;
  color:var(--rose);
}
.herosuite .trust__ico svg{width:22px;height:22px;stroke-width:1.4}

/* La hiérarchie du bandeau tient en deux crans, et non plus en quatre.
   L'information principale : seize pixels, six cents — le plafond de la zone.
   Le libellé : treize et demi, quatre cents, dans l'encre secondaire. C'est
   l'écart entre les deux qui se lit, non le poids de chacun.

   Le sélecteur passe par « .trust__card » : sans lui, la règle de style.css,
   à poids égal et déclarée avant, l'emporterait sur la tablette. */
.trust__card .trust__n,
.trust__card .trust__item .strong{
  font-size:16px;line-height:1.3;font-weight:600;
  color:var(--plum);letter-spacing:-.014em;
}
.herosuite .trust__l{font-size:13.5px;line-height:1.45;font-weight:400;color:var(--ink-2)}

/* --- Et le formulaire lui-même, allégé d'autant --------------------------
   Trois graisses de six cents se suivaient dans la zone : l'étiquette de
   chaque champ, le mot « Recherches rapides », et le lien qui les termine.
   Avec le bouton, cela faisait quatre appuis pour un seul bloc. Les
   étiquettes descendent à cinq cents, la mention des recherches rapides à
   quatre cents — elle nomme, elle n'annonce pas —, et le lien à cinq cents.
   Le bouton reste seul en six cents : c'est l'action. */
.herosuite .field > label{font-size:13.5px;font-weight:500}
.herosuite .hsearch__quick .lbl{font-weight:400;color:var(--ink-3)}
.herosuite .hsearch__quick .chip--go{font-weight:500}

/* En deux colonnes — style.css bascule le bandeau à 1080 px —, le trait ne
   sépare plus que les deux de droite de celles de gauche, et le filet qui
   passe sous la première rangée s'allège comme les autres. */
@media (max-width:1080px){
  .herosuite .trust__card{padding:14px 26px}
  .herosuite .trust__item{padding:10px 22px}
  .herosuite .trust__item:nth-child(odd){padding-left:0}
  .herosuite .trust__item:nth-child(odd)::before{content:none}
  .herosuite .trust__item:nth-child(even){padding-right:0}
  .herosuite .trust__item:nth-child(n+3){border-top:1px solid var(--mw-filet-rose)}
}

/* --- Le rythme intérieur d'une section ------------------------------------
   Sur-titre → titre : quatorze pixels. Titre → introduction : vingt-deux.
   Introduction → contenu : quarante. Contenu → boutons : trente-deux. */
.pro__sur,.temo__sur,.duo__sur{margin-bottom:14px}
.pro__p{margin-top:22px}
.pro__pts{margin-top:40px}
.pro__actions{margin-top:32px}
.temo__head{margin-bottom:40px}
.temo__p{margin-top:22px}

@media (max-width:980px){
  .herosuite .hsearch{padding:26px}
}
@media (max-width:700px){
  .herosuite .hsearch{padding:22px}
  .pro__pts{margin-top:30px}
  .pro__actions{margin-top:26px}
  .temo__head{margin-bottom:28px}
}

/* =========================================================================
   LES REPÈRES DE CONFIANCE, SUR UN TÉLÉPHONE

   Un seul bloc, et rien dedans qui ait son propre cadre. La feuille d'origine
   posait quatre cases séparées par un filet en croix ; les quatre repères
   tiennent maintenant sur un même fond rose très pâle, aux angles adoucis.

   En haut, les deux chiffres, chacun centré sur sa moitié : « + de 300 » et
   « 20 », leur libellé dessous, en petit. Entre eux, un trait vertical de
   trente-quatre pixels — court, rose clair, il sépare sans encadrer.

   Dessous, les deux promesses en texte nu : une petite icône rose et un mot.
   Ni fond, ni filet, ni pastille — ce sont des informations, pas des boutons.

   Tout ce qui suit tient dans la mise en page mobile du site, à 760 px : le
   dessin de bureau ne change pas d'un pixel.
   ========================================================================= */
@media (max-width:760px){
  /* Le conteneur n'est plus une carte : il n'est que la grille. Le grand fond
     rose et les filets qui séparaient les quatre informations sont retirés —
     c'est chaque information qui porte désormais son propre cadre, et l'écart
     entre les cadres remplace les séparateurs. */
  .herosuite .trust__card{
    display:grid;grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:30px;
    padding:0;
    background:none;
    border:0;border-radius:0;
  }
  /* L'air autour du bloc, et non seulement dedans. Au-dessus : quarante
     pixels le séparent de la carte de recherche, là où la feuille d'origine
     n'en posait que trente-quatre. Le sélecteur reprend celui de la règle
     générale, plus haut — sans « .herosuite », il ne l'emporterait pas.

     Au-dessous : rien du tout jusqu'ici. La section suivante est rosée, et
     l'angle arrondi du bloc tombait pile sur la limite des deux. Trente-huit
     pixels de blanc l'en détachent. */
  .herosuite{padding-bottom:38px}

  /* --- Les quatre mini-cartes -------------------------------------------- */
  /* Une même carte pour les quatre : un chiffre et deux promesses se valent,
     rien ne justifie que deux d'entre elles aient un cadre et les autres non.

     Le fond est un rose qu'on ne nomme pas — deux points au-dessus du blanc
     de la section. C'est le filet qui dessine la carte ; le fond ne fait que
     l'asseoir. Aucune ombre : sur quatre cartes de cette taille, elle ferait
     quatre bandes grises et le tableau de bord qu'on veut éviter.

     Les formes ciblées de la feuille d'origine — filets de gauche, filet de
     la seconde rangée, rembourrages — sont reprises une à une, sans quoi la
     croix resterait par-dessus les cartes. */
  .herosuite .trust__item,
  .herosuite .trust__item:first-child,
  .herosuite .trust__item:last-child,
  .herosuite .trust__item:nth-child(odd),
  .herosuite .trust__item:nth-child(even),
  .herosuite .trust__item:nth-child(n+3){
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:0;min-width:0;border-top:0;
    padding:15px 11px 14px;
    background:#FDF8FB;
    border:1px solid #F4E4EC;
    border-radius:14px;
    box-shadow:none;
    text-align:center;
  }
  /* Les séparateurs n'ont plus d'objet : ce sont les dix pixels entre les
     cartes qui séparent, maintenant. Aucune des quatre n'en porte — ni celui
     qui séparait les deux chiffres, ni ceux du bandeau de grand écran. */
  .herosuite .trust__item::before{content:none}

  /* L'icône : rose, petite, sans pastille ni filet. Elle ouvre la carte et ne
     la remplit pas. Les deux premières l'avaient perdue quand les chiffres se
     passaient de cadre — les quatre la retrouvent, c'est ce qui fait de ces
     cartes une série. */
  .herosuite .trust__item .trust__ico,
  .herosuite .trust__item:nth-child(-n+2) .trust__ico,
  .herosuite .trust__item:nth-child(n+3) .trust__ico{
    display:grid;place-items:center;
    width:26px;height:26px;margin-bottom:9px;
    background:none;border:0;border-radius:0;
    color:var(--rose);
  }
  .herosuite .trust__item .trust__ico svg{width:24px;height:24px;stroke-width:1.4}

  /* La donnée principale : le chiffre pour les deux premières, la promesse
     pour les deux autres. Une seule taille pour les quatre, et un poids moyen
     — les dix-huit pixels en gras des deux chiffres et les quatorze des deux
     promesses faisaient deux rangs là où il n'y en a qu'un. Quinze pixels
     tiennent « 100 % gratuit » et « Annonces vérifiées » sur une ligne dès
     360 px de large, et c'est l'icône, maintenant, qui porte l'accent. */
  .herosuite .trust__item:nth-child(-n+2) .trust__n,
  .herosuite .trust__item:nth-child(n+3) .strong{
    display:block;
    font-size:15px;line-height:1.26;font-weight:600;
    color:var(--plum);letter-spacing:-.014em;
  }

  /* Le libellé : plus petit, plus clair, et il paraît sur les quatre cartes.
     Les deux promesses le masquaient — leur ligne ne portait qu'un mot, et la
     carte restait vide sous lui. */
  .herosuite .trust__item .trust__l,
  .herosuite .trust__item:nth-child(-n+2) .trust__l,
  .herosuite .trust__item:nth-child(n+3) .trust__l{
    display:block;margin-top:5px;
    font-size:11.5px;line-height:1.38;font-weight:400;color:var(--ink-2);
  }
  /* Le libellé commence la ligne : il prend la majuscule que le texte de
     bureau, posé après le chiffre dans la même phrase, n'a pas. Les quatre,
     et non les deux premières seulement — sur une série de cartes, deux
     majuscules et deux minuscules se voient. C'est la casse qui est posée
     ici, en feuille de style : aucun des quatre textes n'est retouché. */
  .trust__item .trust__l::first-letter{text-transform:uppercase}
}

/* Sous 360 px, les quatre cartes gardent leur grille : une carte peut porter
   son intitulé sur deux lignes — c'est ce que fait « Annonces vérifiées », qui
   demandait 121 px là où la colonne n'en offre que 108 — et les quatre gardent
   la même hauteur, la grille s'en charge. C'est la rangée pleine largeur, elle,
   qui rompait la série. Ne reste qu'un rembourrage un peu plus serré. */
@media (max-width:359px){
  .trust__card{gap:8px}
  .trust__item{padding:13px 8px 12px}
}

/* =========================================================================
   L'ACCUEIL SUR TÉLÉPHONE — LE RYTHME

   Ce bloc ne fait qu'une chose : donner à la page mobile son propre souffle.
   Rien de ce qui suit ne touche au grand écran — tout est sous 760 px — et
   rien n'y change le contenu, l'ordre des sections ni une fonctionnalité.

   Le principe : chaque section est un chapitre. Une entrée, un contenu, une
   sortie. Quarante-huit pixels de rembourrage haut et bas — donc au moins
   quatre-vingt-seize entre deux contenus —, vingt-quatre de marge latérale,
   vingt-quatre à trente-deux entre un titre et ce qui le suit, seize à vingt
   entre les éléments d'un même groupe.

   Aucun dégradé, aucun halo, aucune forme n'est ajouté : ce sont des
   espacements, des tailles et des interlignes.
   ========================================================================= */
@media (max-width:760px){

  /* --- 0. L'échelle ------------------------------------------------------
     Une seule suite de tailles pour toute la page, au lieu des quinze valeurs
     qui s'étaient accumulées section par section — trente, vingt-huit et
     vingt-six pour trois titres de même rang, quatre corps différents dans
     une seule carte d'annonce.

     Elle est plus courte et plus contrastée que l'ancienne : l'écart se joue
     entre le sur-titre et le titre, non entre deux paragraphes voisins. Les
     titres perdent du poids autant que de la taille — sept cents partout
     faisait des blocs noirs ; six cents laisse la forme des lettres se voir.

     Les paragraphes, eux, ne descendent pas sous quinze pixels et demi : ce
     sont eux qu'on lit vraiment. Ce sont les mentions qui cèdent. */
  :root{
    /* L'accroche du hero, et la seule taille de l'échelle qui suive la
       largeur : les deux lignes du titre sont posées par le balisage et
       aucune ne doit se replier d'elle-même. Les bornes sont mesurées sur
       « son hijab, c'est possible ! », la plus longue des deux ; le détail est
       avec la règle « .hero h1 », plus bas. */
    --m-h1:clamp(22px,calc(8.46vw - 4.06px),34px);  /* l'accroche du hero */
    --m-h2:25px;        /* les titres de section */
    --m-h3:21px;        /* les titres de carte, les chiffres */
    --m-sur:11px;       /* les sur-titres en capitales */
    --m-p:15.5px;       /* les paragraphes de section */
    --m-carte:14.5px;   /* les textes de carte */
    --m-note:13px;      /* les mentions, repères et dates */
    --m-btn:14px;       /* l'intitulé des boutons */
    --m-h-btn:42px;     /* leur hauteur */
    --m-btn-poids:500;  /* leur graisse */
  }

  /* --- 1. La colonne et le rythme des sections ---------------------------- */
  /* Deux fois « :root » : header.css, chargé après cette feuille, ramène la
     marge à seize pixels sur téléphone. Le poids double la remporte. */
  :root:root{--grille-marge:24px}
  :root{--rythme:48px}
  .sec{padding:48px 0}
  .offres,.pro,.temo,.zone-ivoire{padding-block:48px}

  /* Les titres de rang deux, tous à la même mesure et au même poids : la
     hiérarchie ne se joue plus à trois pixels près d'une section à l'autre. */
  h2,.ofhead h2,.pro__t,.aide__t,.faq h2{
    font-size:var(--m-h2);line-height:1.24;font-weight:600;letter-spacing:-.024em;
  }
  /* Les sur-titres : plus petits, plus espacés, moins appuyés. C'est leur
     forme — les capitales, l'interlettrage — qui les signale, non leur corps.

     Et un seul écart sous eux, partout : dix, quatorze puis douze pixels
     d'une section à l'autre, cela ne se lit pas comme une hiérarchie, cela se
     lit comme une inattention. */
  .ofhead__sur,.pro__sur,.aide__sur{
    font-size:var(--m-sur);letter-spacing:.15em;font-weight:600;
    margin-bottom:12px;
  }
  /* Le même écart d'un titre à ce qui le suit, partout : seize pixels. */
  .ofhead__p,.pro__p,.aide__p{margin-top:16px}
  /* Les intitulés de bouton, partout : un demi-point de moins et quatre
     pixels de hauteur en moins. Ils cessent d'être des barres.

     « body » en tête : boutons.css est chargé après cette feuille et repose
     le corps et la hauteur à poids égal. Le grand format, qui montait à
     cinquante-deux pixels et seize points, rejoint les autres. */
  body .btn,
  body .btn.btn--primary,
  body .btn.btn--secondary,
  body .btn.btn--lg,
  body .hero .hero__actions .btn{
    --h:var(--m-h-btn);height:var(--m-h-btn);font-size:var(--m-btn);
    font-weight:var(--m-btn-poids);
  }
  body .btn.btn--sm{--h:40px;height:40px;font-size:13.5px}

  /* --- 2. Le hero -------------------------------------------------------- */
  /* La hauteur du hero mobile est celle de son contenu, et rien d'autre : pas
     de fraction d'écran, qui donne un hero différent sur chaque téléphone et
     comprime le bloc dès que l'écran est court. Le plancher ne sert qu'à
     empêcher un hero rabougri là où le texte se replie peu — le haut de cette
     tranche, où le titre tient sur une ligne et le paragraphe sur deux. Sur les
     quatre téléphones de référence il ne commande rien : le contenu en demande
     de cinq cent quarante-six à cinq cent quatre-vingt-huit, et le hero est
     donc bien celui de son contenu. Il est pris sur la plus petite des deux mesures, donc
     il ne dépasse jamais l'écran et ne repousse pas la carte de recherche hors
     de vue.

     Le rembourrage du haut porte deux choses : les quatre-vingts pixels que la
     barre collante mange au hero — il remonte de quatre-vingt-dix et le premier
     pixel de la page tombe quatorze au-dessus de l'écran, voir style.css —, et
     l'air qu'on veut au-dessus du badge. Mesuré : la plaque de l'en-tête finit
     à soixante-six, et cent trente-quatre de rembourrage posent le badge à cent
     vingt — cinquante-quatre pixels d'air entre les deux. Quarante en bas, sous
     le second bouton.

     Le rembourrage est celui du hero, donc intérieur : la photographie reste
     visible tout autour du contenu, et aucune bande ne s'intercale entre la
     barre et lui. */
  .hero{padding:134px 0 40px;min-height:min(540px,100svh)}

  /* Le trop-plein était surtout sur les côtés. Le bloc de texte se calait sur
     l'axe du logo — vingt-quatre de marge, un pixel de filet, vingt-quatre de
     rembourrage de plaque, soit quarante-neuf à gauche contre vingt-quatre à
     droite. Sur un téléphone, cet axe n'aligne plus rien : la plaque de
     l'en-tête a sa propre marge, et tout le reste de la page — la recherche,
     les chiffres, les annonces — commence à vingt-quatre. Le hero les
     rejoint, des deux côtés.

     La valeur est écrite ici plutôt que prise sur « --grille-marge » : le
     hero descend à vingt pixels sur les écrans les plus étroits, et la marge
     de la grille, elle, commande toute la page. Ce qui suit le hero n'a pas à
     bouger avec lui. */
  .hero__bloc{padding-inline:24px}

  /* Les quatre intervalles du bloc, et non plus un pas unique.

     Douze partout donnait une pile régulière mais sans hiérarchie : le badge
     collait au titre autant que le titre au paragraphe, et les deux boutons
     paraissaient appartenir au texte. L'écart dit maintenant le rang — court
     du badge à son titre, plus franc du titre à sa glose, plus franc encore du
     texte aux actions, et resserré entre deux boutons qui vont ensemble. */
  .hero__txt{
    --m-hero-badge:16px;   /* du badge au titre */
    --m-hero-titre:20px;   /* du titre au paragraphe */
    --m-hero-actions:26px; /* du paragraphe au premier bouton */
    --m-hero-btn:12px;     /* d'un bouton à l'autre */
  }

  /* --- Le titre, en deux lignes sur téléphone --------------------------
     Le balisage en pose trois, et il ne change pas : c'est le dessin de bureau,
     où les trois lignes tiennent largement. Sur téléphone, les deux dernières
     se rejoignent — « son hijab, » et « c'est possible ! » sur une seule ligne.

     Deux « display:inline » suffisent. Les deux blocs redeviennent du texte
     dans le flux du titre, la largeur pleine et l'alignement que style.css leur
     pose n'ont plus d'effet, et la marge qui séparait deux lignes voisines non
     plus — une marge verticale ne s'applique pas à une boîte en ligne.

     Reste l'espace entre les deux : le balisage n'en met pas, les trois « span »
     se suivent sans blanc dans le JSX. C'est le pseudo-élément qui le pose. Une
     espace ordinaire, et non une insécable : elle est aussi le seul endroit où
     la ligne peut encore se replier. Sur un écran plus étroit que ceux qu'on
     vise, elle cède et le titre revient à trois lignes — là où une insécable
     aurait fait déborder le texte hors de l'écran. */
  .hero h1 .line:nth-child(2),
  .hero h1 .line:nth-child(3){display:inline}
  /* Et le mot qu'elles contiennent redevient une boîte en ligne. Il ne suffit
     pas d'ouvrir les deux lignes : style.css met les mots en bloc — « .hero h1
     .line > span », tout en bas de la feuille — pour que le trait de coupe de
     GSAP ait un bord net. Deux blocs dans une ligne ouverte restent deux
     blocs, chacun sur sa ligne, et le titre ne bougeait pas d'un pixel.

     « inline-block » leur rend leur largeur de texte sans rien retirer à
     l'ouverture : la coupe se fait au « clip-path », qui s'applique aussi bien
     à l'une qu'à l'autre. La sélection pèse une classe de plus que la règle
     qu'elle reprend, et elle ne vaut que pour les deux dernières lignes. */
  .hero h1 .line:nth-child(2) > span,
  .hero h1 .line:nth-child(3) > span{display:inline-block}
  .hero h1 .line:nth-child(2)::after{content:" "}

  /* Et la taille suit la largeur de l'écran, parce que la ligne à loger a
     changé : ce n'est plus « Travailler avec » mais « son hijab, c'est
     possible ! », qui demande onze fois et demie son corps en largeur là où
     l'autre n'en demandait que sept.

     Les bornes sont mesurées en navigateur, pas choisies : pour chaque
     largeur, on a cherché par dichotomie le plus grand corps qui garde les deux
     mots sur une ligne. La ligne demande onze fois et demie son corps, et la
     colonne offre la largeur de l'écran moins deux fois le rembourrage —
     vingt-quatre, vingt sous 360. Les plafonds : vingt-quatre et deux à 320,
     vingt-huit et deux à 375, vingt-neuf et demi à 390, trente-trois à 430.

     La pente « 8,46 vw moins 4,06 pixels » s'y tient deux pour cent en dessous,
     ce qui laisse de quoi absorber une police rendue un peu plus large qu'ici —
     vingt-trois et sept à 320, vingt-sept et sept à 375, vingt-huit et neuf à
     390, trente-deux et trois à 430. C'est le maximum disponible sur deux
     lignes : au-delà, la ligne se replie et le titre en fait trois.

     Une pente distincte est posée sous 360 px, où le rembourrage tombe à vingt
     et rend huit pixels à la colonne — voir tout en bas de la feuille.

     L'interlettrage passe de trois à quatre centièmes de cadratin. C'est un
     resserrement ordinaire pour un titre de cette taille, et il rend deux pour
     cent de largeur à la ligne : c'est autant de corps gagné.

     La graisse suit la taille, comme pour les titres de section plus haut :
     sept cents faisait une masse blanche pleine, six cents laisse la forme des
     lettres se voir. C'est le même réglage que les h2, pour la même raison. */
  .hero h1{font-size:var(--m-h1);line-height:1.12;letter-spacing:-.04em;font-weight:600}

  /* Le paragraphe reprend le corps des paragraphes de la page — quinze et
     demi, l'échelle posée en tête de ce bloc — au lieu des quatorze auxquels
     il avait été descendu pour faire tenir le hero. C'est le texte qu'on lit
     vraiment : ce n'est pas lui qui devait céder.

     Il prend toute la colonne. Une borne à trois cent quarante pixels lui
     laissait une gouttière vide à droite dès que l'écran s'élargissait —
     quarante-deux pixels à 430 —, et le bloc paraissait rentré d'un côté alors
     que le titre et les deux boutons, eux, vont d'un bord à l'autre. La borne
     ne sert plus qu'au haut de cette tranche : à sept cent soixante pixels, la
     colonne en offrirait sept cent douze, et la ligne deviendrait illisible de
     longueur. Quatre cent quarante ne mord sur aucun téléphone.

     Et l'interligne monte à 1,7, le haut de la fourchette : cinq lignes
     serrées faisaient un pavé, c'est l'air entre elles qui les rend lisibles à
     bout de bras.

     « width » est reposée : style.css l'ouvre à 580 px hors media, et une
     « max-width » seule laisserait la ligne s'étendre jusque-là. */
  .hero .hero__lede{
    margin-top:var(--m-hero-titre);
    width:min(100%,440px);max-width:440px;
    font-size:var(--m-p);line-height:1.7;
    color:rgba(255,255,255,.96);
  }
  /* Les deux actions, l'une sous l'autre et de la même boîte. Elles étaient
     côte à côte dès qu'elles tenaient : à trois cent quatre-vingt-dix pixels,
     cela donnait deux boutons de cent soixante-quatre, aux intitulés serrés et
     au texte plus petit que le reste. Empilées, chacune a toute la largeur. */
  .hero .hero__actions{
    margin-top:var(--m-hero-actions);gap:var(--m-hero-btn);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    /* La rangée se dimensionnait sur son contenu — deux cent onze pixels, la
       largeur du plus long intitulé. En colonne, « width:100% » sur les
       boutons ne servait donc à rien : c'est la boîte qui devait s'ouvrir. */
    width:100%;
  }
  .hero .hero__actions .btn{flex:none;width:100%;min-width:0;justify-content:center}
  /* Quarante-huit pixels, et non les quarante-deux du reste de la page : ce
     sont les deux seules actions du hero, et une cible tactile de quarante-huit
     est le plancher confortable. « min-height » double la hauteur parce que
     boutons.css, chargé après cette feuille, repose « height » — et parce
     qu'un intitulé qui se replierait ne doit pas pouvoir écraser la boîte.

     Le sélecteur reprend exactement celui de l'échelle des boutons, plus haut
     dans ce même bloc, et vient après lui : il l'emporte à poids égal. */
  body .hero .hero__actions .btn{
    --h:48px;height:48px;min-height:48px;
  }
  /* La seconde : transparente, un filet clair, la même hauteur que la
     première. Elle ne lui dispute rien. */
  body .hero .hero__actions .btn.btn--secondary{
    background:transparent;
    border:1px solid rgba(255,255,255,.42);
    color:#FFFFFF;
    box-shadow:none;
  }

  /* Le badge se fait mention : il annonce le titre, il ne le concurrence pas.
     Plus bas, plus court, moins contrasté — le verre s'efface presque, et le
     chiffre cesse de peser autant que le titre. */
  .hero .hero__badge{
    height:26px;padding:0 11px;margin-bottom:var(--m-hero-badge);
    font-size:11px;font-weight:500;letter-spacing:.005em;gap:6px;
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.22);
    color:rgba(255,255,255,.80);
  }
  .hero .hero__badge .n{font-weight:600}

  /* Le voile s'allège, mais pas uniformément : la pente se creuse.

     Le haut reste dense — c'est là que passent le badge et les trois lignes du
     titre, et « son hijab, » y est en rose clair sur la partie la plus
     lumineuse de la photographie. En dessous, il tombe de moitié : à mi-hauteur
     il passe de cinquante et un pour cent à quarante, et au bas de trente et un
     à vingt-deux. C'est là qu'était le « gros voile prune » — sous le
     paragraphe et les boutons, où la scène disparaissait sans que rien ne le
     demande. On y voit maintenant le bureau, la main qui écrit et le bois du
     sol.

     Ce que le voile ne tient plus, l'ombre le tient : une ombre portée douce,
     posée sur le titre et le paragraphe seuls, garde le texte lisible sur les
     zones claires de l'image sans réassombrir toute la scène. C'est la
     contrepartie exacte des opacités retirées ci-dessus. */
  .hero .hero__prune{
    background:
      /* Le renfort, et il est local : une ellipse posée sur le bas de la
         colonne de texte — la fin du paragraphe et les deux boutons —, là où
         la pente du voile est à son plus clair et où la photographie montre le
         parquet et la nappe de lumière des fenêtres. C'est le seul endroit du
         hero où le blanc manquait d'assise, et « Publier une annonce » est le
         seul texte du bloc qui n'ait pas d'ombre portée pour le tenir.

         Elle est calée à gauche et au trois quarts de la hauteur, et elle est
         nulle avant quatre-vingts pour cent de son rayon : le côté droit — le
         bureau, la main qui écrit, le carnet — n'en reçoit rien, et le bas du
         cadre non plus. La scène n'est pas assombrie, sa partie la plus claire
         l'est. */
      radial-gradient(128% 52% at 27% 73%,
        rgba(37,11,26,.42),
        rgba(37,11,26,.19) 48%,
        rgba(37,11,26,0) 77%),
      radial-gradient(120% 60% at 50% 8%,rgba(201,45,120,.10),rgba(201,45,120,0) 70%),
      linear-gradient(174deg,
        rgba(41,13,28,.68) 0%,
        rgba(43,14,30,.65) 16%,
        rgba(46,15,32,.59) 30%,
        rgba(50,17,35,.50) 43%,
        rgba(55,18,38,.40) 55%,
        rgba(61,20,42,.30) 66%,
        rgba(68,22,47,.22) 76%,
        rgba(76,25,52,.15) 86%,
        rgba(85,28,58,.10) 100%);
  }
  /* Le voile ayant perdu près d'un quart de sa densité, c'est l'ombre portée
     qui tient la lisibilité — posée sur le titre, le paragraphe et le badge
     seuls, non sur toute la scène. Deux ombres : une courte et dense qui
     détoure les lettres, une longue et douce qui assied le bloc. */
  /* Trois ombres, et la première n'a presque pas de flou : c'est elle qui fait
     le travail. Une ombre diffuse pose le texte sur l'image mais ne le détoure
     pas — sur une photographie où le clair et le sombre se touchent, comme ici
     le mur et le hijab, il faut un liseré. Les deux autres restent pour
     asseoir le bloc. */
  .hero h1,
  .hero .hero__lede{
    text-shadow:
      0 0 1px rgba(28,7,19,.72),
      0 1px 4px rgba(28,7,19,.62),
      0 2px 18px rgba(28,7,19,.42);
  }
  /* « son hijab, » garde son dégradé d'origine — le blanc rosé de style.css,
     découpé sur le texte.

     Et il faut lui retirer l'ombre, explicitement. « text-shadow » s'hérite :
     celle posée sur le h1 juste au-dessus descendait donc aussi dans ce span.
     Sur un texte dont le remplissage est transparent, une ombre portée se
     peint derrière les lettres et se voit au travers — le mot s'affichait gris
     sombre au lieu du blanc rosé, et n'avait plus la couleur qu'il a sur grand
     écran. Les deux autres lignes du titre, elles, sont en blanc plein : elles
     gardent la leur. */
  .hero h1 .grad{text-shadow:none}

  /* Le blanc du bas se retire. Il raccorde le hero à la carte de recherche,
     qui est blanche — mais il montait à vingt-six pour cent de la hauteur et
     finissait en blanc plein : sous les deux boutons, on voyait un voile posé
     par-dessus la photographie, et l'image s'y perdait avant son bord.

     Dix-sept pour cent en laissaient encore trop : le hero ayant grandi, la
     bande valait cent six pixels et remontait donc sur les deux boutons —
     c'est elle, autant que la photographie, qui délavait « Publier une
     annonce ». Neuf pour cent la ramènent à cinquante-six : elle commence sous
     le second bouton et ne blanchit plus que les quarante pixels de
     rembourrage. Le raccord tient quand même — le voile prune n'est plus qu'à
     quinze pour cent à cet endroit, les deux fonds sont déjà proches.

     L'opacité, elle, n'est pas touchée ici — c'est la chorégraphie qui la
     conduit au défilement (voir HeroScene). */
  .hero .hero__pied{
    height:9%;
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.30) 58%,
      rgba(255,255,255,.76) 100%);
  }

  /* Le cadrage mobile, et il n'a rien à voir avec celui du bureau : le hero y
     est deux fois plus haut que large, la couverture ne rogne donc que sur
     l'horizontale, et c'est le seul réglage qui compte.

     Elle se tenait au milieu du cadre — soixante-quatre pour cent y plaçait son
     épaule —, c'est-à-dire exactement sous le titre et le paragraphe. Les trois
     lignes de l'accroche tombaient sur la masse sombre du hijab, et le reste de
     la scène sortait du champ : on ne voyait plus ni le bureau, ni la main qui
     écrit, ni la pièce.

     Cinquante-six ouvre la fenêtre de huit points vers la gauche. La scène
     glisse d'autant vers la droite : le profil et le hijab prennent le tiers
     droit, le bureau et la main qui écrit reparaissent à leur droite, et la
     colonne de texte retrouve sous elle la pièce claire — les tables, les
     chaises, la plante — au lieu du drapé. Le sujet est toujours là, il n'est
     plus derrière les mots.

     L'agrandissement tombe à deux pour cent. Il en fallait seize quand le hero
     était court : la couverture rognait peu et la scène s'éloignait. Le hero a
     maintenant sa hauteur, la couverture agrandit donc d'elle-même, et deux
     pour cent ne servent plus qu'à sortir le sol par le bas. L'origine reste en
     haut : c'est la seule qui garde le bord supérieur de l'image collé à celui
     du hero. */
  .hero__fond img{object-position:56% top;transform:scale(1.02);transform-origin:56% 0}

  /* --- 3. La recherche --------------------------------------------------- */
  /* La carte s'allège : moins de rembourrage, un filet plutôt qu'un bloc.

     Et elle cesse de coller au hero. Elle remontait de vingt-quatre pixels
     par-dessus lui (style.css) : sur un grand écran ce chevauchement lie les
     deux blocs, mais sur un téléphone il ne restait que vingt-quatre pixels
     entre le bas de la photographie et le premier champ. Huit pixels de
     remontée au lieu de vingt-quatre en laissent quarante : la carte reste
     posée sur le hero, elle n'y est plus enfoncée. */
  .herosuite .hsearch{padding:20px 18px;border-radius:14px;margin-top:-8px}
  .hsearch__grid{gap:12px}
  /* Les étiquettes cessent d'être des titres : elles nomment le champ, et
     c'est le champ qu'on regarde. */
  .hsearch label,.hsearch .lbl{font-size:13px;font-weight:600;letter-spacing:.01em}
  /* Les champs, eux, gardent leurs seize pixels : en dessous, iOS agrandit la
     page dès qu'on met le doigt dedans, et on ne la ramène jamais. */
  .hsearch .field-ctl,.hsearch .input,.hsearch .select{height:48px;font-size:16px}
  /* Trois niveaux : boutons.css, chargé après cette feuille, repose la hauteur
     des boutons du site. */
  .hsearch .btn.hsearch__submit{--h:48px;height:48px;margin-top:4px;font-size:var(--m-btn)}
  .hsearch > h2 + .hsearch__grid,.hsearch__grid{margin-top:0}
  /* Les recherches rapides défilent au doigt, sur une seule rangée : à six
     entrées, elles occupaient cent quatre-vingt-douze pixels de haut. Le
     dégradé du bord droit dit qu'il y a une suite. */
  .hsearch__quick{
    display:flex;flex-wrap:nowrap;align-items:center;gap:9px;
    margin-top:18px;padding-top:16px;
    overflow-x:auto;overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .hsearch__quick::-webkit-scrollbar{display:none}
  .hsearch__quick .lbl{flex:0 0 auto;margin:0 2px 0 0;font-size:var(--m-note)}
  .hsearch__quick .chip{flex:0 0 auto;height:32px;padding:0 12px;font-size:13px}

  /* --- 4. Les chiffres de confiance -------------------------------------- */
  .herosuite .trust__card{margin-top:30px}
  .sec.herosuite{padding-bottom:48px}
  /* Le dessin des quatre cartes est posé plus haut, d'un seul tenant. Cette
     section ne reprend ici que ce qui relève du rythme de la page : l'écart
     au bloc qui précède, et celui qui la sépare du suivant. Les tailles, les
     rembourrages et le trait d'autrefois n'y sont plus repris — ils s'y
     contredisaient. */

  /* --- 5. Les dernières opportunités ------------------------------------- */
  /* Sous un titre plus petit, le paragraphe se rapproche : c'est l'écart au
     sur-titre qui porte la hiérarchie, non celui-ci. */
  .ofhead{margin-bottom:26px}
  .ofhead__p{font-size:var(--m-p);line-height:1.62}
  /* Le lien de section : lui aussi vient de boutons.css, chargé après cette
     feuille — « body » suffit à le reprendre. */
  body .lien-sect,body .ofhead__cta{font-size:var(--m-btn)}
  /* La grande carte se détache franchement de la liste qui la suit ; les
     annonces, elles, cessent d'être empilées bord à bord. */
  .ofbento{gap:24px;margin-bottom:8px}
  .ofbento__suite{gap:18px}

  /* La carte Formation : la bande d'image est ramenée à ce qu'il faut pour
     reconnaître la scène, et le texte se resserre d'un point. */
  .fmt{padding:112px 20px 22px}
  .fmt__etiq{height:26px;padding:0 12px;font-size:var(--m-sur);letter-spacing:.15em}
  .fmt__t{margin-top:14px;font-size:var(--m-h3);line-height:1.24;letter-spacing:-.022em}
  .fmt__p{margin-top:10px;font-size:var(--m-carte);line-height:1.6}
  /* Le logo garde ses quarante pixels : en dessous, « Mon Compte Formation »
     cesse de se lire. Ce sont les marges qui se resserrent, pas lui. */
  .fmt__cpf{margin-top:14px;font-size:12.5px}
  .fmt__cta{margin-top:16px;height:var(--m-h-btn)}

  /* Les annonces : quatre corps de texte différents dans une carte de cent
     cinquante pixels, c'était une hiérarchie qu'on ne voyait pas. Le titre
     porte, le reste est une mention. */
  .ofl{padding:16px 15px;gap:13px}
  .ofl__txt{gap:4px}
  .ofl__t{font-size:15px;line-height:1.35}
  .ofl__co{font-size:var(--m-carte)}
  .ofl__meta{font-size:var(--m-note);line-height:1.5}
  .ofl__ico{width:34px;height:34px}
  .ofl__ico svg{width:17px;height:17px}

  /* --- 6. Les candidates -------------------------------------------------- */
  .pro--c .pro__in{row-gap:30px}
  .pro--c .pro__p{font-size:var(--m-p);line-height:1.68}
  .pro--c .pro__pts{margin-top:26px;gap:16px}
  /* --- Les deux actions, empilées et de même boîte -----------------------
     « Voir les opportunités » tenait toute la largeur, et « Découvrir les
     formations » était un texte souligné posé dessous : deux poids, deux
     mesures, pour deux actions du même ordre. Ce sont maintenant deux boutons
     du même gabarit — même largeur, même hauteur, même rayon, même
     rembourrage —, l'un plein et l'autre en contour.

     Le texte est centré dans chacun, et la flèche est détachée du flux, calée
     à dix-huit pixels du bord droit : elle tombe donc au même endroit dans les
     deux, ce qu'un simple `gap` n'aurait pas donné — il l'aurait collée au
     texte, et le texte n'a pas la même longueur. */
  .pro--c .pro__actions{
    margin-top:26px;gap:11px;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
  }
  /* Trois classes, et il en faut trois : boutons.css pose
     « .btn.btn--primary{--h:48px;padding-inline:26px} », qui en vaut deux et
     qui est chargée après cette feuille. Sans cela, le bouton plein gardait
     son rembourrage et son rayon, et les deux boîtes n'étaient plus
     identiques. */
  .pro--c .pro__actions .pro__cta,
  .pro--c .pro__actions .pro__lien{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    width:100%;height:48px;min-height:48px;padding:0 42px;
    border-radius:10px;
    font-size:var(--m-btn);font-weight:600;line-height:1;letter-spacing:-.008em;
    text-align:center;
  }
  /* La flèche, au même endroit dans les deux. `translateY` plutôt qu'une marge
     négative : la taille de l'icône peut changer, le centrage non. */
  .pro--c .pro__actions .pro__cta > svg,
  .pro--c .pro__actions .pro__lien > svg{
    position:absolute;right:18px;top:50%;
    transform:translateY(-50%);
  }
  .pro--c .pro__actions .pro__cta:hover > svg,
  .pro--c .pro__actions .pro__lien:hover > svg{transform:translateY(-50%) translateX(3px)}

  /* Le secondaire : blanc, un filet rose très pâle, le texte en prune et la
     seule flèche en rose. Il appartient au même groupe que le principal sans
     lui disputer le regard — pas de soulignement, pas d'ombre. */
  .pro--c .pro__actions .pro__lien{
    border:1px solid #F0DDE7;background:#FFFFFF;color:var(--plum);
    text-decoration:none;box-shadow:none;
  }
  .pro--c .pro__actions .pro__lien > svg{color:var(--rose)}
  /* Le survol et l'appui doivent être redits ici, et ce n'est pas une redite
     inutile : la règle de repos juste au-dessus pèse trois classes, autant que
     « .pro .lien-sect:hover », et elle vient après elle dans la feuille. Sans
     ces deux lignes, le bouton ne réagissait plus du tout sur un écran
     tactile. Les valeurs sont celles du dessin commun, à la lettre. */
  .pro--c .pro__actions .pro__lien:hover{border-color:#E3C4D5;background:#FFFCFD}
  .pro--c .pro__actions .pro__lien:active{border-color:#D8BCCC;background:#FEF8FB}
  /* L'image se fait panoramique : plus large que haute, elle laisse la parole
     au texte au lieu de lui prendre un demi-écran. */
  .pro--c .pro__video{height:auto;aspect-ratio:16 / 10;max-height:none}

  /* --- 7. Les entreprises ------------------------------------------------- */
  /* Le fond sombre reste, mais il respire : le rembourrage l'empêche de
     devenir un tunnel. Cinquante-six en haut comme en bas — le bas en portait
     soixante-quatre, sans que rien ne le demande. */
  .pro.pro--e{padding-block:56px}
  .pro--e .pro__in{row-gap:36px}
  .pro--e .pro__p{font-size:var(--m-p);line-height:1.7}
  .pro--e .pro__pts{margin-top:26px;gap:16px}
  .pro--e .pro__actions{margin-top:28px;gap:12px}
  /* La carte du dépôt s'allège : moins de rembourrage, un rayon plus doux. */
  .pro--e .rec__panel{padding:20px 18px;border-radius:14px}

  /* Les points de repère des deux panneaux, dans la même mesure que les
     cartes : un intitulé, une glose. */
  .pro__pts li b,.pro__pt-t{font-size:var(--m-carte)}
  .pro__pts li p,.pro__pt-p{font-size:var(--m-note);line-height:1.55}

  /* --- 8. Les questions fréquentes ---------------------------------------- */
  /* Soixante-douze pixels de rembourrage quand toutes les autres sections en
     portent quarante-huit : la FAQ se détachait sans raison. */
  .sec.faq{padding-block:56px}
  .faq__grid{gap:28px}
  .aide__p{font-size:var(--m-p);line-height:1.62}
  .zone-ivoire .faq__list{gap:12px}
  .zone-ivoire .faq__q{padding:20px 18px;font-size:15px;line-height:1.4}
  .faq__a p{font-size:var(--m-carte);line-height:1.62}
  .faq__ico{width:28px;height:28px}

  /* --- 9. Le pied de page --------------------------------------------------
     « body » en tête du sélecteur : footer.css est chargé après cette feuille
     et repose ces valeurs à poids égal. */
  body .footer{padding-top:48px}
  body .footer .footer__grid{gap:34px;padding-bottom:36px}
  body .footer .footer__col + .footer__col{margin-top:0}
  body .footer .footer__t{font-size:var(--m-sur);letter-spacing:.15em}
  body .footer li a{font-size:var(--m-carte)}
  body .footer .footer__brand p{font-size:var(--m-carte);line-height:1.6}
  body .footer .footer__bar{font-size:var(--m-note);padding-block:22px}
  /* Le lien de réalisation garde la couleur de la barre, et se souligne au
     survol comme les autres liens du pied. */
  body .footer .footer__bar a{color:inherit;text-decoration:underline;text-underline-offset:3px}
  body .footer .footer__bar a:hover{color:#FFFFFF}

  /* --- 10. Le plancher des mentions ---------------------------------------
     Les étiquettes de contrat et les dates restent des mentions secondaires,
     mais elles doivent se lire à bout de bras : douze pixels et demi, pas
     moins, et un peu plus d'air autour du texte qu'à leur taille d'origine. */
  .ofl .badge{height:22px;padding:0 8px;font-size:11.5px}
  .ofl__meta .t-meta,.ofl__date{font-size:12.5px}
}

/* =========================================================================
   L'ACCUEIL SOUS 360 PIXELS — LE HERO

   Ce bloc vient après celui de 760 px, et c'est la seule raison pour laquelle
   il est ici plutôt qu'avec les quatre cartes de confiance, plus haut : à
   poids de sélecteur égal, c'est le dernier écrit qui l'emporte.

   Il ne fait qu'une chose : rendre au texte les huit pixels que la marge lui
   prend de chaque côté. Sur un écran de trois cent vingt, vingt-quatre de
   rembourrage ne laissent que deux cent soixante-douze à la colonne, et
   « Travailler avec » — la plus longue des trois lignes du titre, qui ne doit
   se replier sur aucun écran — en demande deux cent quarante-trois. La marge
   tient, mais de justesse, et le bloc paraît à l'étroit. Vingt en laissent
   deux cent quatre-vingts.

   La marge de la grille, elle, n'est pas touchée : tout ce qui suit le hero —
   la recherche, les chiffres, les annonces — garde ses vingt-quatre pixels.
   ========================================================================= */
@media (max-width:359px){
  .hero__bloc{padding-inline:20px}
  /* Et le titre reprend les huit pixels rendus à la colonne : même pente, même
     marge de deux pour cent, seule l'ordonnée change — trois et trente-neuf au
     lieu de quatre et zéro six. Vingt-trois et sept à 320, pour un plafond
     mesuré à vingt-quatre et dix-huit. */
  :root{--m-h1:clamp(22px,calc(8.46vw - 3.39px),34px)}
}

/* =========================================================================
   LA RECHERCHE ET SA RÉASSURANCE, EN BLANC PUR

   La section, la carte de recherche et la réassurance sont blanches, sans
   l'inflexion rosée ni le flou de la carte : le rose est réservé à la
   section des offres, qui suit. L'ombre diffuse est retirée ; la carte n'est
   plus dessinée que par son filet prune très dilué, qui reste. Les quarante
   pixels de blanc sous la réassurance (.herosuite, plus haut) ne bougent pas.
   ========================================================================= */
.herosuite{background:#FFFFFF}
.herosuite .hsearch{
  background:#FFFFFF;
  box-shadow:none;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}
.herosuite .trust__card{background:#FFFFFF}
@media (max-width:760px){
  /* Sur téléphone, la réassurance est faite de quatre mini-cartes : leur
     fond passe au blanc, leur filet reste. */
  .herosuite .trust__card{background:none}
  .herosuite .trust__item,
  .herosuite .trust__item:first-child,
  .herosuite .trust__item:last-child,
  .herosuite .trust__item:nth-child(odd),
  .herosuite .trust__item:nth-child(even),
  .herosuite .trust__item:nth-child(n+3){background:#FFFFFF}
}

/* =========================================================================
   LE HERO ALLÉGÉ, SUR TÉLÉPHONE

   Le paragraphe long reste celui de l'ordinateur ; le téléphone lit une
   phrase courte. « Trouver un emploi » reste le seul bouton : « Publier une
   annonce » devient un lien blanc, sous lui, sur une cible de quarante-huit
   pixels. Les écarts s'ouvrent d'un cran pour que l'ensemble respire.
   ========================================================================= */
.hero__lede-court{display:none}
@media (max-width:760px){
  .hero__lede-long{display:none}
  .hero__lede-court{display:inline}

  .hero__txt{
    --m-hero-titre:22px;   /* du titre au paragraphe (20) */
    --m-hero-actions:30px; /* du paragraphe au bouton (26) */
    --m-hero-btn:6px;      /* du bouton au lien : la cible du lien fait l'air */
  }
  .hero{padding-bottom:44px}

  /* Le sélecteur reprend celui du bouton secondaire, plus haut, avec la
     classe « .btn » doublée : il l'emporte sans « !important ». */
  body .hero .hero__actions .btn.btn.btn--secondary{
    align-self:center;width:auto;
    height:48px;min-height:48px;padding:0 12px;
    background:none;border:0;box-shadow:none;
    /* Le verre dépoli du bouton secondaire laissait un rectangle flou sous le lien. */
    -webkit-backdrop-filter:none;backdrop-filter:none;
    color:#FFFFFF;
    font-weight:600;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:5px;
    text-decoration-color:rgba(255,255,255,.62);
    text-shadow:0 1px 3px rgba(28,7,19,.55);
  }
  body .hero .hero__actions .btn.btn.btn--secondary::before,
  body .hero .hero__actions .btn.btn.btn--secondary::after{content:none}
  body .hero .hero__actions .btn.btn.btn--secondary:hover{
    background:none;transform:none;text-decoration-color:#FFFFFF;
  }
  body .hero .hero__actions .btn.btn.btn--secondary:focus-visible{
    outline:2px solid #FFFFFF;outline-offset:2px;border-radius:6px;
  }
}

/* =========================================================================
   CONSEILS ET INSPIRATION

   Entre les deux profils et la FAQ, sur le blanc de la page : trois cartes,
   une photographie, un titre prune, une mention. Aucune ombre — un filet
   suffit à poser la carte, comme pour la réassurance plus haut. L'en-tête
   reprend celui des offres (« .ofhead ») : même sur-titre, même titre.

   Une carte qui n'a pas encore d'article n'est pas un lien : elle ne réagit
   pas au survol, et sa mention se dit sans flèche.
   ========================================================================= */
.conseils{background:#FFFFFF;padding-block:var(--rythme)}
.cons__grille{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin:0;padding:0;list-style:none;
}
.cons__carte{
  display:flex;flex-direction:column;min-width:0;
  background:#FFFFFF;
  border:1px solid rgba(50,23,42,.10);
  border-radius:16px;overflow:hidden;
}
.cons__lien{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.cons__photo{position:relative;aspect-ratio:4 / 3;background:#F6EEF2}
.cons__photo img{object-fit:cover}
.cons__corps{display:flex;flex-direction:column;flex:1;gap:14px;padding:22px 24px 24px}
.cons__t{margin:0;font-size:19px;line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--plum)}
/* La mention se cale en bas : trois titres de longueurs différentes ne
   doivent pas faire trois hauteurs de pied. */
.cons__lire{margin-top:auto;font-size:14px;font-weight:600;color:var(--plum)}
.cons__lire--attente{font-weight:500;color:var(--ink-3)}
/* Le jour où la carte est un lien : la photographie s'avance d'un rien, le
   filet se fonce. Rien ne bouge tant qu'il n'y a pas d'article. */
.cons__lien .cons__lire::after{content:" →"}
.cons__photo img{transition:transform 400ms var(--ease-out)}
@media (hover:hover){
.cons__carte:has(.cons__lien):hover{border-color:rgba(50,23,42,.22)}
}
@media (hover:hover){
.cons__carte:has(.cons__lien):hover .cons__photo img{transform:scale(1.03)}
}
.cons__lien:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:16px}

@media (max-width:1080px){
  .cons__grille{gap:18px}
  .cons__corps{padding:18px 18px 20px}
  .cons__t{font-size:17px}
}
/* Sur téléphone, une colonne : la photographie s'abaisse pour que les trois
   cartes ne fassent pas trois écrans. */
@media (max-width:760px){
  .cons__grille{grid-template-columns:minmax(0,1fr);gap:16px}
  .cons__photo{aspect-ratio:16 / 9}
  .cons__corps{gap:10px;padding:16px 18px 18px}
  .cons__t{font-size:var(--m-p,16px);line-height:1.4}
}
@media (prefers-reduced-motion:reduce){
  .cons__photo img{transition:none}
}

/* =========================================================================
   LA ZONE DE RECHERCHE — refonte (18/10/2026)

   Une vraie zone de recherche, et non plus un formulaire posé sur du blanc.
   Trois niveaux, dans cet ordre d'importance :

   1. LA CARTE DE RECHERCHE. Blanche, posée à cheval sur le bas du hero, une
      ombre douce et courte — elle se détache sans flotter. Les champs sont
      généreux (58 px), sur un fond à peine teinté qui les fait lire comme des
      champs ; au focus, un anneau framboise. Le bouton « Rechercher les
      offres » a la hauteur des champs et le dégradé du site : c'est lui
      qu'on voit.
   2. LES RECHERCHES RAPIDES, sous un filet : un intitulé en petites
      capitales, puis des pastilles blanches au trait fin. Elles proposent,
      elles ne rivalisent pas avec le bouton.
   3. LES REPÈRES, hors de la carte et sans cadre commun : chaque icône
      dans un petit carré rose pâle aux coins arrondis, son texte à côté.
      Ils accompagnent la recherche sans s'en faire une seconde carte.

   Le blanc de la section se teinte vers le bas jusqu'au rose de « Les
   dernières opportunités » : plus d'arête entre les deux sections.

   Le balisage n'a pas changé : mêmes champs, mêmes filtres, mêmes textes,
   mêmes liens. Les sélecteurs passent par « body .herosuite » parce que
   boutons.css, chargé après cette feuille, repose la hauteur des boutons.
   ========================================================================= */
body .herosuite{
  position:relative;
  /* La carte remonte sur le hero par une marge négative. Sans ce contexte de
     formatage, la marge traversait la section : c'était toute la section,
     fond blanc compris, qui remontait et coupait la photo d'un aplat net. */
  display:flow-root;
  padding-bottom:80px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 58%,#FFF9FB 100%);
}

/* --- 1. La carte -------------------------------------------------------- */
body .herosuite .hsearch{
  position:relative;z-index:2;
  margin-top:-72px;
  padding:34px 36px 28px;
  background:#FFFFFF;
  border:1px solid rgba(125,27,79,.08);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(50,21,37,.04),0 24px 52px -26px rgba(62,12,40,.32);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body .herosuite .hsearch__grid{
  grid-template-columns:minmax(0,1.45fr) minmax(0,1.15fr) minmax(0,1fr) auto;
  gap:16px;align-items:end;
}
body .herosuite .field{gap:9px}
body .herosuite .field > label{color:var(--plum);letter-spacing:.005em}
body .herosuite .input,
body .herosuite .select{
  height:58px;padding-left:46px;
  background-color:#FCF9FB;
  border:1px solid #E8DCE4;border-radius:12px;
}
@media (hover:hover){
body .herosuite .input:hover,
body .herosuite .select:hover{background-color:#FFFFFF;border-color:#CDB6C4}
}
body .herosuite .input:focus,
body .herosuite .select:focus{
  background-color:#FFFFFF;border-color:#B22065;
  box-shadow:0 0 0 4px rgba(178,32,101,.12);
}
body .herosuite .field-ctl .ico{left:17px;color:#9C8291}
body .herosuite .hsearch .btn.hsearch__submit{
  --h:58px;height:58px;min-height:58px;
  padding:0 30px;border-radius:12px;
  box-shadow:0 12px 26px -10px rgba(149,23,83,.50);
}

/* --- 2. Les recherches rapides ------------------------------------------ */
body .herosuite .hsearch__quick{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:26px;padding-top:22px;
  border-top:1px solid #F1E7ED;
  overflow:visible;-webkit-mask:none;mask:none;
}
body .herosuite .hsearch__quick .lbl{
  margin-right:10px;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}
body .herosuite .hsearch__quick .chip{
  height:34px;padding:0 14px;
  background:#FFFFFF;border:1px solid #EADFE6;border-radius:999px;
  color:var(--ink-2);
}
@media (hover:hover){
body .herosuite .hsearch__quick .chip:hover{
  background:#FDF6FA;border-color:#D9BCCD;color:var(--plum);transform:none;
}
}
body .herosuite .hsearch__quick .chip--go{
  border-color:transparent;background:none;padding:0 8px;color:var(--plum);font-weight:600;
}
@media (hover:hover){
body .herosuite .hsearch__quick .chip--go:hover{background:none;border-color:transparent;text-decoration:underline;text-underline-offset:3px}
}

/* --- 3. Les repères ----------------------------------------------------- */
body .herosuite .trust__card{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
  margin-top:44px;padding:0 10px;
  background:none;border:0;border-radius:0;box-shadow:none;
}
body .herosuite .trust__card .trust__item,
body .herosuite .trust__card .trust__item:first-child,
body .herosuite .trust__card .trust__item:last-child,
body .herosuite .trust__card .trust__item:nth-child(n){
  gap:14px;padding:0;border:0;background:none;box-shadow:none;
}
body .herosuite .trust__card .trust__item::before{content:none}
body .herosuite .trust__card .trust__ico,
body .herosuite .trust__card .trust__item:nth-child(n) .trust__ico{
  width:40px;height:40px;border-radius:12px;
  background:#FDF1F7;border:0;color:#B22065;
}

/* --- Tablette ------------------------------------------------------------ */
@media (max-width:1080px){
  body .herosuite .hsearch__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body .herosuite .hsearch__grid > .field:first-child,
  body .herosuite .hsearch__grid > .hsearch__submit{grid-column:1 / -1}
  body .herosuite .hsearch .btn.hsearch__submit{width:100%}
  body .herosuite .trust__card{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
}

/* --- Téléphone ----------------------------------------------------------- */
@media (max-width:760px){
  body .herosuite{padding-bottom:60px}
  /* Remontée plus courte : le lien « Publier une annonce » du hero reste
     dégagé au-dessus de la carte. */
  body .herosuite .hsearch{margin-top:-20px;padding:22px 18px 20px;border-radius:18px}
  body .herosuite .hsearch__grid{grid-template-columns:minmax(0,1fr);gap:14px}
  body .herosuite .hsearch__grid > *{grid-column:1 / -1}
  /* Seize pixels dans les champs : en dessous, iOS agrandit la page au toucher. */
  body .herosuite .input,
  body .herosuite .select{height:52px;font-size:16px}
  body .herosuite .hsearch .btn.hsearch__submit{--h:54px;height:54px;min-height:54px;width:100%;margin-top:4px}
  body .herosuite .hsearch__quick{gap:8px;margin-top:22px;padding-top:18px}
  body .herosuite .hsearch__quick .lbl{flex:1 0 100%;margin:0 0 4px}
  /* Des raccourcis faciles à toucher : quarante pixels de haut. */
  body .herosuite .hsearch__quick .chip{height:40px;padding:0 15px}
  /* Deux colonnes, l'icône à gauche de son texte, comme sur ordinateur. */
  body .herosuite .trust__card{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin-top:34px;padding:0 2px}
  body .herosuite .trust__card .trust__item,
  body .herosuite .trust__card .trust__item:nth-child(n){
    flex-direction:row;align-items:flex-start;text-align:left;gap:10px;padding:0;
  }
  body .herosuite .trust__card .trust__ico,
  body .herosuite .trust__card .trust__item:nth-child(n) .trust__ico{width:36px;height:36px;border-radius:10px;margin:0;flex:none}
}

/* « Les dernières opportunités » selon le nombre d'annonces (ofbento--nN) :
   essayé le 18/10/2026 puis retiré à la demande de Faty — la carte
   Formation y devenait trop grande. La grille d'origine vaut pour tous les
   cas ; la classe reste posée par DernieresOffres.tsx, sans effet. */

/* =========================================================================
   02 · ENTREPRISES — L'APERÇU DE L'ESPACE RECRUTEUR (18/10/2026)

   L'aperçu (apercu-espace.css) remplace la démonstration du formulaire. Ici,
   il occupe toute la colonne de droite, à une taille où ses textes se lisent,
   et les deux colonnes se centrent l'une sur l'autre : un média plus haut
   que le texte ne doit pas laisser celui-ci accroché en haut d'un grand vide.
   La version compacte de la page de dépôt n'est pas concernée.
   ========================================================================= */
.pro--e .pro__in,
.rail__piste > .pro--e > .pro__in{align-items:center}
.pro--e .pro__media{align-self:center}
.rail__piste > .pro--e .pro__actions{margin-top:32px}

.pro--e .apx{max-width:none;font-size:14px;border-radius:18px}
.pro--e .apx__barre{padding:12px 16px}
.pro--e .apx__adresse{font-size:12.5px}
.pro--e .apx__bandeau{margin:14px 14px 6px;padding:20px 22px}
.pro--e .apx__sur{font-size:11px}
.pro--e .apx__t{font-size:21px}
.pro--e .apx__n{font-size:22px}
.pro--e .apx__n span,
.pro--e .apx__detail{font-size:12.5px}
.pro--e .apx__liste{padding:6px 14px 4px}
.pro--e .apx__ligne{padding:14px 8px;gap:14px;grid-template-columns:minmax(0,1fr) auto minmax(110px,auto)}
.pro--e .apx__titre{font-size:15px}
.pro--e .apx__meta{font-size:12.5px}
.pro--e .apx__etiq{height:26px;font-size:12.5px;padding:0 10px 0 8px}
.pro--e .apx__cand{font-size:13px}
.pro--e .apx__cand b{font-size:19px}
.pro--e .apx__nouvelle{font-size:11px}
.pro--e .apx__fictif{font-size:11.5px;padding:8px 22px 14px}

@media (max-width:760px){
  .pro--e .apx{font-size:13px;border-radius:14px}
  .pro--e .apx__bandeau{margin:10px 10px 4px;padding:14px 16px}
  .pro--e .apx__t{font-size:17px}
  .pro--e .apx__n{font-size:18px}
  .pro--e .apx__liste{padding:4px 10px}
  .pro--e .apx__ligne{grid-template-columns:minmax(0,1fr) auto;padding:12px 4px;gap:5px 10px}
  .pro--e .apx__titre{font-size:14px}
  .pro--e .apx__etiq{height:24px;font-size:11.5px}
  .pro--e .apx__cand b{font-size:16px}
  .pro--e .apx__fictif{padding:6px 16px 12px}
}

/* =========================================================================
   LA CARTE FORMATION WEBMASTER — refonte claire (18/10/2026)
   components/accueil/CarteFormation.tsx

   La photo seule en haut, lumineuse : ni texte posé dessus, ni voile prune.
   Le contenu dessous, sur fond blanc : le badge « Formation à la une » au-
   dessus du titre, le titre en prune foncé, la description, la mention CPF
   et le bouton au dégradé du site. Les anciennes règles « .fmt* » restent
   dans ce fichier, sans plus rien qui les porte.

   La grille s'aligne en haut : les cartes d'annonces voisines gardent leur
   hauteur naturelle au lieu d'être étirées à celle de la formation.
   ========================================================================= */
/* La carte Formation prend la hauteur de la rangée — celle des annonces
   voisines — et c'est sa photo qui s'ajuste (plus courte ou plus longue) :
   les bas de cartes tombent sur la même ligne. Les annonces, elles, gardent
   leur hauteur naturelle : la colonne d'annonces n'est jamais étirée. */
.ofbento{align-items:stretch}
.ofbento__suite{align-self:start;align-content:start;align-items:start}

.fmc{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:#FFFFFF;border:1px solid #F1E3EA;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(50,21,37,.04), 0 18px 40px -30px rgba(50,21,37,.35);
}
.fmc__photo{position:relative;width:100%;flex:1 1 180px;min-height:170px;background:#F4ECEF}
.fmc__photo img{object-fit:cover;object-position:40% 52%}

.fmc__corps{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px 24px}
/* La pancarte d'origine (« .fmt__etiq », plus haut dans ce fichier),
   reprise telle quelle et posée sur la jonction photo / fond blanc : centrée
   sur le bord haut du contenu. Le contenu lui laisse la place. */
.fmc__corps{position:relative;padding-top:34px}
.fmc .fmc__pancarte{top:-17px;left:22px}
.fmc__t{
  margin:2px 0 0;font-size:clamp(20px,1.75vw,24px);font-weight:700;line-height:1.25;
  letter-spacing:-.018em;color:#3A0E25;
}
.fmc__p{margin:0;max-width:56ch;font-size:15px;line-height:1.65;color:#5F5058}
.fmc__cpf{display:flex;align-items:center;gap:10px;margin:2px 0 0;font-size:13px;line-height:1.45;color:#6B5560}
.fmc__cpf-logo{flex:none;width:40px;height:40px;object-fit:contain;border-radius:8px;border:1px solid #EEE3E8;background:#fff;padding:2px}
.fmc .fmc__cta{
  margin-top:6px;
  background:linear-gradient(105deg,#68153D 0%,#951753 46%,#C92D78 100%);
  color:#FFFFFF;border-color:transparent;
}

/* Sans annonce, la carte occupe toute la largeur : la photo devient un
   bandeau, sans prendre toute la hauteur de l'écran. */
.ofbento--seule .fmc__photo{flex:none;height:clamp(220px,26vw,340px)}
.ofbento--seule .fmc__corps{padding:36px 32px 30px}

@media (max-width:760px){
  .fmc{border-radius:14px}
  .fmc__photo,.ofbento--seule .fmc__photo{flex:none;height:auto;min-height:0;aspect-ratio:4 / 3}
  .fmc__corps,.ofbento--seule .fmc__corps{padding:30px 18px 20px;gap:10px}
  .fmc .fmc__pancarte{top:-13px;left:16px}
  .fmc__t{font-size:20px}
  .fmc__p{font-size:14.5px}
  .fmc .fmc__cta{width:100%;justify-content:center}
}

/* =========================================================================
   HERO EN TABLETTE (21/10/2026)
   Entre 761 et 1000 px, la carte de recherche remonte de 40 px sous le hero
   (style.css, « .herosuite .hsearch{margin-top:-40px} ») alors que le bas du
   hero ne laissait qu'une vingtaine de pixels sous les boutons : la carte
   recouvrait « Trouver un emploi » et « Publier une annonce ». Le hero garde
   assez d'air en bas pour que la carte s'arrête sous les boutons.
   ========================================================================= */
@media (min-width:761px) and (max-width:1000px){
  body .hero{padding-bottom:100px}
}

/* =========================================================================
   02 · ENTREPRISES EN TABLETTE (21/10/2026)
   Une seule colonne entre 561 et 980 px : le titre gardait la mesure de la
   colonne étroite d'ordinateur (16 caractères) et se cassait en trois
   lignes ; le texte restait bridé ; les deux boutons s'empilaient en pleine
   largeur. Ici : une largeur de lecture confortable, le titre sur deux
   lignes, les boutons côte à côte (ils passent à la ligne d'eux-mêmes s'ils
   ne tiennent plus), et l'aperçu aligné sur les bords du texte. Les tailles
   de police ne changent pas.
   ========================================================================= */
@media (min-width:561px) and (max-width:980px){
  body .pro--e .pro__p{max-width:62ch}
  body .pro--e .pro__actions{flex-wrap:wrap;gap:12px 14px}
  body .pro--e .pro__actions .pro__cta,
  body .pro--e .pro__actions .pro__cta2{width:auto;flex:0 0 auto}
  body .pro--e .pro__media{margin-inline:0;width:100%}
}

/* 02 · Entreprises, sur ordinateur : « Recrutez des talents, simplement. »
   tient sur deux lignes (même taille que le titre des candidates). */
@media (min-width:981px){
  .pro--e .pro__t{max-width:22ch;text-wrap:balance}
}