/* ==========================================================================
   MUSLIMA WORK — Design system de la page d'accueil
   1. Tokens          2. Base & typographie   3. Conteneur & sections
   4. Boutons         5. Champs               6. Cartes (3 variantes)
   7. Header          8. Hero                 9. Marquee
  10. Offres         11. Secteurs            12. Manifeste
  13. Recruteurs     14. Témoignages         15. FAQ
  16. Newsletter     17. Footer              18. Animations   19. Responsive
   ========================================================================== */

/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
  /* Fonds : trois seulement */
  --bg-white:#FFFFFF;
  --bg-tint:#FCF8FB;
  /* Les anciens jetons crème, sans emploi : ils pointent désormais sur le
     rose pâle des encadrés mis en avant (teintes.css). */
  --cream:var(--mw-avant-fond);
  --cream-2:var(--mw-avant-fond);
  --cream-line:var(--mw-avant-bord);
  --bg-plum:linear-gradient(135deg,#291020 0%,#481B3A 100%);

  /* Texte */
  --ink:#171217;
  --plum:#32172A;
  --plum-d:#25101F;
  --ink-2:#5A5058;
  /* Relevé par la recette : 4,07:1 sur blanc, sous le seuil AA de 4,5. Il
     porte cinquante-deux textes du site — les mentions, les gloses, les aides
     de champ. Assombri de trois points, il passe à 5,3:1 et reste un gris
     discret : à l'œil, la nuance ne se voit pas ; au contrôle, elle change
     tout. */
  --ink-3:#736874;

  /* Marque */
  --rose:#C32371;
  --rose-lum:#D3458C;
  --rose-pale:#FBEAF2;
  --grad-rose:linear-gradient(110deg,#901E56 0%,#C32371 55%,#D3458C 100%);

  /* Traits */
  --line:#ECE8EA;
  --line-2:#E1DCE0;

  /* Rayons : quatre valeurs, pas une de plus */
  /* Le système d'angles du site : presque carré. Les blocs et les cartes
     à 4px, les champs et les boutons à 6px. La douceur vient du rose
     pâle, du crème, des filets d'un pixel et des blancs — pas des
     formes. Seules les pastilles, les portraits et les icônes restent
     ronds, et ils le sont en 50%, non par cette variable. */
  --r-xs:4px;
  --r-md:6px;
  --r-card:4px;
  --r-lg:4px;
  --r-pill:6px;

  /* Cartes : une seule apparence */
  --card-bd:1px solid var(--line);
  --sh-hover:0 8px 22px rgba(50,23,42,.06);   /* uniquement au survol */
  --sh-key:0 10px 28px rgba(50,23,42,.07);    /* réservée aux 4 éléments clés */
  --bd-hover:rgba(195,35,113,.25);

  /* La grille éditoriale, commune à l'en-tête et au hero.

     `--grille-bord` est l'abscisse où commence la plaque de l'en-tête : la
     marge minimale tant que la fenêtre est étroite, puis ce qui reste de part
     et d'autre de la largeur maximale. `--grille-axe` y ajoute le rembourrage
     intérieur de la plaque : c'est l'abscisse du logo, et donc celle sur
     laquelle le texte du hero se cale. Les deux blocs sont ainsi construits
     sur une seule grille, et non chacun sur la sienne. */
  --grille-max:1400px;
  --grille-marge:32px;
  --grille-pad:24px;                                     /* le rembourrage de la plaque */
  --grille-bord:max(var(--grille-marge),calc((100vw - var(--grille-max)) / 2));
  /* Le filet d'un pixel de la plaque entre dans l'axe : sans lui, le titre du
     hero commençait un pixel avant le nom dans la barre. */
  --grille-axe:calc(var(--grille-bord) + 1px + var(--grille-pad));

  /* Espacements */
  --sec-y:88px;
  --gap:20px;
  --card-p:24px;
  --head-gap:36px;      /* en-tête → contenu */
  --title-gap:12px;     /* titre → introduction */

  /* Mouvement */
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:200ms;
  --t-slow:560ms;
}

/* =========================================================
   2. BASE & TYPOGRAPHIE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg-white);color:var(--ink);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
p{margin:0}

h1,h2,h3,h4{margin:0;color:var(--plum);font-weight:700}
h1{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(27px,2.9vw,36px);line-height:1.15;letter-spacing:-.024em}
h3{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.016em}

.t-body{font-size:16px;line-height:1.65;font-weight:400}
.t-sec{font-size:14px;line-height:1.55;font-weight:400;color:var(--ink-2)}
.t-meta{font-size:13px;line-height:1.4;font-weight:500;color:var(--ink-3)}
.pink{color:var(--rose)}
.grad{background:var(--grad-rose);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:20px;top:-70px;z-index:300;background:var(--plum);color:#fff;padding:12px 22px;border-radius:var(--r-md);transition:top var(--t) var(--ease)}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:6px}

/* =========================================================
   3. CONTENEUR & SECTIONS
   ========================================================= */
.wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}

.sec{padding:var(--sec-y) 0}
.sec--white{background:var(--bg-white)}
.sec--tint{background:var(--bg-tint)}
.sec--plum{background:var(--bg-plum);color:#fff}

/* En-tête de section : titre à gauche, intro dessous, action à droite */
.shead{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;column-gap:32px;row-gap:var(--title-gap);
  margin-bottom:var(--head-gap);
}
.shead h2{grid-column:1;max-width:22ch}
.shead__p{grid-column:1;max-width:62ch;font-size:16px;line-height:1.65;color:var(--ink-2)}
.shead__cta{grid-column:2;grid-row:1;justify-self:end;align-self:start;margin-top:2px}
.shead--center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.shead--center h2,.shead--center .shead__p{max-width:52ch}
.sec--plum .shead h2{color:#fff}
.sec--plum .shead__p{color:rgba(255,255,255,.78)}
.sec__cta{display:flex;justify-content:center;margin-top:44px}

/* Grilles */
.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* =========================================================
   4. BOUTONS
   ========================================================= */
.btn{
  --h:48px;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--h);padding:0 24px;
  border:1px solid transparent;border-radius:var(--r-md);
  font-size:15px;line-height:1;font-weight:600;letter-spacing:-.008em;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
             background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.btn .arw{width:17px;height:17px;flex:none;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.btn:hover .arw{transform:translateX(4px)}
}
.btn--sm{--h:42px;padding:0 18px;font-size:14px}
.btn--lg{--h:54px;padding:0 30px;font-size:16px}
.btn--block{display:flex;width:100%}

.btn--primary{background:var(--grad-rose);color:#fff;box-shadow:0 6px 18px rgba(195,35,113,.26)}
@media (hover:hover){
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(195,35,113,.34)}
}
/* reflet très fin, uniquement sur les trois boutons clés, toutes les 8 s */
.btn--shine::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-130%);
  animation:shine 8s var(--ease-out) infinite;
}
.btn--primary:active{transform:translateY(0)}
@keyframes shine{0%{transform:translateX(-130%)}12%{transform:translateX(130%)}100%{transform:translateX(130%)}}

.btn--secondary{background:var(--bg-white);color:var(--plum);border-color:var(--line-2)}
@media (hover:hover){
.btn--secondary:hover{transform:translateY(-2px);border-color:var(--plum);background:var(--bg-tint)}
}

.btn-link{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:4px 0;font-size:15px;font-weight:600;color:var(--plum);
  background:none;border:0;cursor:pointer;
}
.btn-link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.btn-link:hover::after{transform:scaleX(1)}
}
.btn-link .arw{width:16px;height:16px;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.btn-link:hover .arw{transform:translateX(4px)}
}

/* =========================================================
   5. CHAMPS
   ========================================================= */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field > label{font-size:14px;font-weight:600;color:var(--plum)}
.field-ctl{position:relative;display:flex;align-items:center}
.field-ctl .ico{position:absolute;left:16px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.input,.select{
  width:100%;height:54px;padding:0 16px 0 44px;
  background:var(--bg-white);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  font-family:inherit;font-size:16px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.select{
  appearance:none;padding-right:42px;cursor:pointer;font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23857B83' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.input::placeholder{color:#A79FA5}
@media (hover:hover){
.input:hover,.select:hover{border-color:var(--ink-3)}
}
.input:focus,.select:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(195,35,113,.12)}
/* --- Un filtre renseigné ---------------------------------------------------
   La teinte de marque, et rien de plus. Une pastille de coche se posait ici,
   à droite du champ fermé : elle se superposait au texte — « Auvergne-Rhône-
   Alpes » passait dessous — et le champ portait alors trois signes pour dire
   une seule chose. Le champ fermé n'a plus que ce qu'il lui faut : l'icône du
   lieu à gauche, le chevron à droite, et tout l'espace entre les deux pour le
   nom de la région.

   La coche appartenait à la liste ouverte, où elle aurait dit quelle option
   est choisie. Mais cette liste est dessinée par le système, non par la page :
   un `<select>` déroulé n'accepte aucune règle de style. Il n'y a donc rien à
   y poser — et rien à y perdre, le système marque déjà l'option retenue. */
.select.is-set{
  border-color:var(--bd-hover);background-color:#FFF9FC;color:var(--plum);
  transition:border-color 180ms var(--ease),background-color 180ms var(--ease);
}

/* --- Le nom de la région, en entier tant qu'il tient -----------------------
   Le texte va d'une icône à l'autre et s'arrête net avant le chevron. Quand la
   place vient à manquer — un écran étroit, un nom long — il se coupe sur des
   points de suspension, jamais sous une icône. */
.select{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
/* état de chargement du bouton de recherche */
.btn.is-loading{pointer-events:none}
.btn.is-loading .arw{opacity:0}
.btn.is-loading::before{
  content:"";position:absolute;right:26px;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin 620ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.chip{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;
  background:var(--bg-white);border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--ink-2);font-size:14px;font-weight:500;cursor:pointer;
  transition:all var(--t) var(--ease);
}
@media (hover:hover){
.chip:hover{border-color:var(--plum);color:var(--plum);background:var(--bg-tint);transform:translateY(-1px)}
}
.chip--go{border-color:var(--line-2);color:var(--plum);font-weight:600}
.chip--go .arw{width:15px;height:15px;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.chip--go:hover .arw{transform:translateX(3px)}
}

/* =========================================================
   6. CARTES — trois variantes, une seule apparence
   ========================================================= */
.card{
  position:relative;display:flex;flex-direction:column;
  padding:var(--card-p);
  background:var(--bg-white);
  border:var(--card-bd);
  border-radius:var(--r-card);
  box-shadow:none;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
@media (hover:hover){
.card--hover:hover{transform:translateY(-2px);border-color:var(--bd-hover);box-shadow:var(--sh-hover)}
}

/* pastille d'initiales / d'icône, commune à toutes les cartes */
.pastille{
  flex:none;display:grid;place-items:center;
  width:48px;height:48px;border-radius:var(--r-md);
  background:var(--rose-pale);border:1px solid #F6DCE9;color:var(--rose);
  font-size:15px;font-weight:700;letter-spacing:-.02em;
  transition:transform var(--t) var(--ease);
}
.pastille--neutre{background:var(--bg-tint);border-color:var(--line);color:var(--plum)}
.pastille svg{width:21px;height:21px}
.pastille--sm{width:40px;height:40px;border-radius:var(--r-xs);font-size:13px}
.pastille--lg{width:56px;height:56px;font-size:17px}

.badge{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r-xs);
  font-size:13px;line-height:1;font-weight:600;
  background:var(--plum);border:0;color:#fff;white-space:nowrap;
  background-origin:border-box;
}

/* -------------------------------------------------------------------------
   « NOUVEAU » — un signal, non une étiquette

   L'or est parti, et la pastille avec lui : « Nouveau » n'a plus de fond ni de
   bordure. Un point qui respire, le mot à côté, et c'est tout. Le point est
   dessiné par des dégradés — blanc rosé au centre, poudré, framboise, prune au
   bord — avec un reflet blanc en haut à gauche ; les deux ondes sont ses
   pseudo-éléments, hors du flux, de sorte qu'aucune carte ne bouge quand elles
   s'agrandissent.
   ------------------------------------------------------------------------- */
.neuf{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.03em;
  white-space:nowrap;
  /* Le mot prend le dégradé framboise → prune. Le repli, pour un moteur qui
     ne découpe pas l'arrière-plan sur le texte, est le prune plein. */
  color:#951753;
  background-image:linear-gradient(92deg,#C92D78 0%,#951753 55%,#68153D 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .neuf{color:transparent}
}

.neuf__pt{
  position:relative;flex:none;width:8px;height:8px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 20%,rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 52%,#FFF3F8 0%,#F7B8D3 26%,#C92D78 64%,#68153D 100%);
  /* La lueur rose, courte : elle entoure le point sans peser sur le fond. */
  box-shadow:0 0 7px 1px rgba(201,45,120,.32);
}
/* Les deux ondes. Elles partent de la taille du point et s'ouvrent jusqu'à
   une vingtaine de pixels, puis s'effacent ; le temps mort en fin de cycle
   donne la respiration, et évite le clignotement. */
.neuf__pt::before,
.neuf__pt::after{
  content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,0) 54%,
    rgba(247,184,211,.55) 62%,
    rgba(201,45,120,.42) 76%,
    rgba(104,21,61,0) 100%);
  pointer-events:none;
  animation:neufOnde 2.4s cubic-bezier(.22,.62,.36,1) infinite;
}
/* L'ampleur de l'onde tient dans une variable : c'est elle, et non le mot, qui
   se resserre sur les petits écrans. */
.neuf__pt{--onde:2.6}
.neuf__pt::after{animation-delay:.62s}
@keyframes neufOnde{
  0%   {transform:scale(1);          opacity:.75}
  60%  {opacity:.28}
  78%  {transform:scale(var(--onde)); opacity:0}
  100% {transform:scale(var(--onde)); opacity:0}
}
@media (max-width:600px){
  .neuf__pt{--onde:2.1}
}
/* Mouvement refusé : le point et le mot restent, les ondes s'arrêtent — et
   disparaissent, plutôt que de laisser un anneau figé autour du point. */
@media (prefers-reduced-motion:reduce){
  .neuf__pt::before,.neuf__pt::after{animation:none;opacity:0}
}

/* flèche d'action, identique partout */
.go{
  position:relative;z-index:3;flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:var(--bg-white);color:var(--plum);
  transition:all var(--t) var(--ease);
}
.go svg{width:17px;height:17px;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.card--hover:hover .go,.dom:hover .go{background:var(--grad-rose);border-color:transparent;color:#fff}
}
@media (hover:hover){
.card--hover:hover .go svg,.dom:hover .go svg{transform:translateX(2px)}
}

.ph{
  background:var(--bg-tint);border:1px dashed var(--line-2);border-radius:var(--r-md);
  display:grid;place-items:center;text-align:center;padding:20px;
  color:var(--ink-3);font-size:13px;font-weight:600;line-height:1.6;
}

/* =========================================================
   7. HEADER
   ========================================================= */
.header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t) var(--ease),background-color var(--t) var(--ease);
}
.header.is-stuck{background:rgba(255,255,255,.95);box-shadow:0 4px 18px rgba(50,23,42,.06)}
.header__in{display:flex;align-items:center;gap:32px;height:76px}
.header__logo{
  display:inline-flex;align-items:center;flex:none;padding:11px 17px;border-radius:var(--r-md);
  background:var(--grad-rose);box-shadow:0 4px 12px rgba(146,30,86,.20);
}
.header__logo img{height:24px;width:auto}
.nav{display:flex;margin-inline:auto}
.nav ul{display:flex;gap:4px}
.nav a{
  position:relative;display:block;padding:10px 16px;border-radius:var(--r-xs);
  font-size:15px;font-weight:500;color:var(--ink-2);
  transition:color var(--t) var(--ease),background-color var(--t) var(--ease);
}
@media (hover:hover){
.nav a:hover{color:var(--plum);background:var(--bg-tint)}
}
.nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
@media (hover:hover){
.nav a:hover::after{transform:scaleX(1)}
}
.header__cta{display:flex;align-items:center;gap:12px}
.sm-only{display:none}
.lg-only{display:inline}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:var(--bg-white);border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;color:var(--plum)}
.burger__close{display:none}
.burger[aria-expanded="true"] .burger__open{display:none}
.burger[aria-expanded="true"] .burger__close{display:grid}

/* menu mobile : liens puis les deux boutons */
.mmenu{display:none}
.mmenu ul{display:flex;flex-direction:column}
.mmenu li + li{border-top:1px solid var(--line)}
.mmenu a{display:block;padding:14px 0;font-size:16px;font-weight:500;color:var(--plum)}
.mmenu__cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* =========================================================
   8. HERO — fond rose très pâle, deux colonnes, recherche dessous
   ========================================================= */
/* =========================================================
   LE HERO — UNE SCÈNE

   La photographie tient tout le fond de la section, d'un bord à l'autre. Le
   texte se lit à gauche, le fil des annonces est une plaque de verre posée à
   droite, devant l'image. Trois couches s'intercalent entre les deux, et elles
   sont empilées dans cet ordre :

     0  la photographie
     1  la superposition prune, dense à gauche, nulle à droite
     4  le bas qui s'éclaircit vers la section suivante (au défilement)
     5  le texte et le panneau
     9  le rideau de l'ouverture

   Le parti pris de la superposition : elle est franche là où se lit le texte,
   et elle s'efface entièrement sur la femme. On doit reconnaître la pièce, le
   drapé du hijab et la lumière des fenêtres — c'est une photographie d'un vrai
   bureau, pas une texture. Les valeurs sont réglées sur le contraste du texte,
   mesuré, et non à l'œil.

   L'ouverture est chorégraphiée par GSAP (components/accueil/HeroScene.tsx).
   Rien ici ne masque quoi que ce soit au départ : sans script, ou quand le
   mouvement est refusé, le hero est déjà dans son état final. C'est le script
   qui pose les états de départ, à la dernière seconde.
   ========================================================= */
.hero{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  /* Le hero remonte de la hauteur de la barre — 66 px et ses deux marges de
     14 — et la reprend aussitôt en remplissage : la photographie passe donc
     derrière la plaque de verre, qui flotte dedans au lieu de la trancher.

     Cette remontée annule la hauteur que la barre occupait dans le flux : le
     hero commence donc au tout premier pixel de la page.

     Sa hauteur n'est plus celle de l'écran : le bandeau qu'il fallait loger en
     bas n'existe plus, et un écran entier pour une accroche et deux boutons
     laissait un grand vide sous eux. Elle est bornée — assez pour que l'image
     ait de l'ampleur, pas au point de repousser la recherche hors de vue.

     Le rembourrage du bas fait la place à la moitié haute de la carte de
     recherche, qui remonte par-dessus (voir `.herosuite`).

     Ces 90 px suivent la hauteur de la barre : si elle change, ils changent. */
  margin-top:-90px;
  /* Le hero s'était fait lourd : cent cinquante pixels en haut, cent
     quarante-quatre en bas et près de neuf dixièmes d'écran de hauteur. Il
     garde son ampleur avec un peu moins de tout — la photographie respire
     autant, l'accroche pèse moins, et la recherche arrive plus tôt.

     `--hero-pas` est la respiration entre le badge, le titre, le texte et les
     boutons : une seule mesure pour les trois intervalles, au lieu de vingt-
     quatre, vingt-deux et vingt-huit. */
  --hero-pas:24px;
  padding:132px 0 128px;
  min-height:clamp(620px,82svh,860px);
  overflow:hidden;overflow:clip;
  background:#F7EDF3;   /* la couleur du fond avant que l'image ne soit peinte */
}
/* La photographie est en 16:9 et le hero à peine plus large : à `inset:0`, la
   couverture ne rogne donc que verticalement, et `object-position` n'a plus
   aucune prise sur l'horizontale. Or il en faut une — la femme se tient au
   centre de cette image, et le panneau de verre, posé à droite, tombait
   exactement sur sa main et son carnet.

   Le cadre est donc un peu plus large que le hero et calé sur son bord droit :
   la scène glisse vers la gauche de la différence, et la main qui écrit passe
   devant le panneau plutôt que dessous. Le décalage reste faible — huit pour
   cent : au-delà, l'image est agrandie d'autant, le rognage vertical suit, et
   c'est le sommet du hijab qui se coupe. */
/* Plus de débord : les huit pour cent supplémentaires servaient à la
   parallaxe du pointeur, qui n'existe plus. Ils ne faisaient qu'agrandir la
   photographie — et l'agrandir, c'est l'adoucir. */
.hero__fond{position:absolute;inset:0;z-index:0}
.hero__fond img{
  object-fit:cover;
  /* Vertical seulement, et vers le haut : le sommet du hijab est près du bord
     haut de l'image et ne doit pas être coupé. */
  object-position:center 40%;
}
/* 1 — la superposition.

   Elle n'est franche que sur les tout premiers pour cent, là où l'image n'est
   de toute façon qu'un mur. Derrière le texte elle s'allège déjà — on doit
   sentir la pièce au travers, ses meubles, sa lumière crème — puis elle tombe
   vite entre 35 % et 52 %, et il n'en reste rien avant le hijab et le visage.
   Ce n'est pas une moitié prune collée à une moitié photographie : c'est une
   pente continue, sur seize arrêts, qui ne montre jamais son bord.

   La couleur est un prune profond, #3D0620, et elle ne change jamais : seule
   son opacité descend le long du dégradé. C'est ce qui fait qu'on ne voit
   aucune bascule de teinte — un dégradé qui change de couleur en même temps
   que d'opacité laisse toujours voir une couture.

   Elle est foncée pour que le voile puisse rester léger : à opacité égale, une
   couleur claire oblige à en mettre davantage pour tenir le contraste du
   texte, et c'est alors la photographie qui disparaît. Ici le voile plafonne à
   0,86 et laisse voir la pièce d'un bout à l'autre.

   S'y ajoute une nuance de rose poudré, très diluée, qui réchauffe le prune
   sans faire de masse ni de forme.

   Les valeurs sont réglées sur le contraste mesuré du paragraphe, le plus
   petit texte du hero : c'est lui qui fixe le plancher, non l'œil. */
.hero__prune{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(46% 58% at 16% 46%,rgba(232,132,178,.13),rgba(232,132,178,.04) 54%,rgba(232,132,178,0) 80%),
    linear-gradient(94deg,
      rgba(61,6,32,.86) 0%,
      rgba(61,6,32,.845) 8%,
      rgba(61,6,32,.825) 15%,
      rgba(61,6,32,.80) 21%,
      rgba(61,6,32,.775) 27%,
      rgba(61,6,32,.74) 33%,
      rgba(61,6,32,.695) 38%,
      rgba(61,6,32,.63) 43%,
      rgba(61,6,32,.545) 47%,
      rgba(61,6,32,.44) 51%,
      rgba(61,6,32,.325) 55%,
      rgba(61,6,32,.22) 59%,
      rgba(61,6,32,.135) 63%,
      rgba(61,6,32,.07) 68%,
      rgba(61,6,32,.025) 74%,
      rgba(61,6,32,0) 80%);
}

/* 4 — le bas de la section, qui s'éclaircit jusqu'au blanc de la recherche.
   Posé à zéro : c'est le défilement qui le lève. */
.hero__pied{
  position:absolute;left:0;right:0;bottom:0;height:26%;z-index:4;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 62%,#FFFFFF 100%);
}
/* Le rideau de l'ouverture. Au repos il est hors champ : sans script, il n'a
   jamais été visible, et il quitte le document une fois la scène jouée. */
.hero__rideau{
  position:absolute;inset:0;z-index:9;pointer-events:none;
  clip-path:ellipse(150% 130% at -160% 50%);
  background:linear-gradient(103deg,#4E0F2D 0%,#7C1648 58%,#951753 100%);
}

/* --- L'armement de l'ouverture -------------------------------------------
   Le HTML est peint avant que React ne s'hydrate : sans cela, le hero
   paraîtrait une fraction de seconde dans son état final, puis sauterait à
   l'état de départ de l'animation. `data-armed` est donc rendu par le serveur,
   avec la page, et c'est la chorégraphie qui le retire une fois qu'elle a posé
   ses propres états — un minuteur sert de filet si elle ne prend jamais la
   main. Le mouvement refusé est traité juste en dessous, et l'absence de
   scripts par le `noscript` de la page : dans les deux cas, rien n'est masqué
   et aucun script n'est nécessaire.

   Ces règles ne masquent que ce que la timeline rallume aussitôt, et
   uniquement par l'opacité : la mise en page, elle, ne bouge pas d'un pixel. */
.hero[data-armed] [data-hero="badge"],
.hero[data-armed] [data-hero="lede"],
.hero[data-armed] [data-hero="actions"],
.hero[data-armed] [data-hero="bande"]{opacity:0}
.hero[data-armed] h1 .mot{clip-path:inset(0 100% 0 0)}
.hero[data-armed] [data-hero="rideau"]{clip-path:ellipse(150% 130% at 6% 50%)}
/* Le mouvement refusé se passe de tout script : la feuille de style annule
   l'armement elle-même, et le hero est là dès la première peinture. */
@media (prefers-reduced-motion:reduce){
  .hero[data-armed] [data-hero]{opacity:1}
  .hero[data-armed] h1 .mot{clip-path:none}
  .hero[data-armed] [data-hero="rideau"]{display:none}
}

/* --- La zone de contenu ---------------------------------------------------
   Elle occupe les 48 % de gauche du hero — la partie où la photographie est
   vide, avant la femme — et le contenu s'y centre. Pas dans le hero entier :
   centré sur toute la largeur, le bloc lui serait passé dessus.

   Un seul conteneur, un seul axe. Le badge, le titre, le paragraphe et les
   deux actions descendent tous de ce `align-items:flex-start` : aucun d'eux ne
   porte de marge automatique qui le recentrerait, et leurs bords gauches
   tombent donc sur la même verticale, au pixel près.

   Cette verticale est celle de la grille éditoriale — la même que celle de
   l'en-tête : le texte commence exactement à l'abscisse où commence le nom
   dans la barre, et non contre le bord de la fenêtre. Voir `--grille-axe`.

   `flex:1` lui donne toute la hauteur restant au-dessus de la bande, et le
   contenu s'y centre : le bloc n'est pas remonté d'une valeur choisie à la
   main, il est centré dans ce qui lui reste. */
.hero__bloc{
  position:relative;z-index:5;
  flex:1;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  /* La femme se tient un peu après la moitié de la largeur : la colonne
     s'arrête avant elle. Son bord gauche, lui, est celui du logo — le titre
     commence exactement sous le nom dans l'en-tête, à toutes les largeurs. */
  width:48%;
  padding-inline:var(--grille-axe) 24px;
  text-align:left;
}
/* La colonne de lecture, à l'intérieur de la zone. */
.hero__txt{display:flex;flex-direction:column;align-items:flex-start;width:100%}

.hero__badge{
  display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px;margin-bottom:var(--hero-pas,24px);
  background:var(--bg-white);border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:13px;font-weight:500;color:var(--ink-2);
}
.hero__badge .n{font-weight:700;color:var(--plum)}
/* Pas d'`overflow:hidden` : il servait à l'ancienne animation, où chaque ligne
   montait de sous son propre bord, et il coupait le jambage du « j » de
   « hijab ». La chorégraphie actuelle ouvre le titre par un `clip-path`
   horizontal posé sur le mot : la ligne n'a plus rien à masquer. */
.hero h1 .line{display:block}

.hero__lede{margin-top:20px;max-width:52ch;font-size:16px;line-height:1.65;color:var(--ink-2)}
.hero__proof{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.avatars{display:flex}
.avatars img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--bg-white);margin-left:-12px}
.avatars img:first-child{margin-left:0}
.hero__proof-txt{font-size:14px;line-height:1.55;color:var(--ink-2)}
.hero__proof-txt b{display:block;font-size:15px;font-weight:600;color:var(--plum)}

/* =========================================================
   LE TEXTE DU HERO, EN CLAIR

   Le fond est une photographie sous une superposition prune dense : tout le
   bloc passe en clair. Ces règles viennent après celles du site — même
   sélecteur, page suivante dans la cascade — et ne valent que dans le hero.
   Partout ailleurs, le texte reste prune sur blanc.
   ========================================================= */
/* Le titre tient sur ses trois lignes, et « Travailler avec » n'est jamais
   coupé : la taille est bornée par la largeur du bloc, non par celle de la
   fenêtre, et chaque ligne refuse de se rompre. */
.hero h1{
  width:min(100%,620px);
  /* Trente-sept pixels au plus petit, cinquante-sept au plus grand. Le
     plancher ne se lit qu'en dessous de 1050px de large : c'est là que le
     titre était le plus lourd — quarante-quatre pixels sur une tablette. */
  font-size:clamp(2.3rem,3.5vw,3.6rem);
  font-weight:700;
  line-height:1.1;letter-spacing:-.028em;
}
/* Un seul titre, trois lignes : chaque ligne est un bloc de la largeur du
   titre, donc toutes calées sur le même bord, et le mot qu'elle contient ne se
   rompt pas. Ce ne sont pas trois blocs de largeurs différentes. */
.hero h1 .line{width:100%;text-align:left}
.hero h1 .mot{display:inline-block;white-space:nowrap}
.hero h1 .dark{color:#FFFFFF}

/* « son hijab » : un dégradé très clair, d'un rose pâle vers le blanc. Rien de
   foncé — le mot est la lumière de la phrase, posé sur le prune du fond.

   Le dégradé est fixe. À l'ouverture, c'est le mot lui-même qui se révèle, en
   sortant d'un flou (voir HeroScene). */
.hero h1 .grad{
  background:linear-gradient(96deg,
    #FFC9DF 0%,
    #FFD6E6 22%,
    #FFE4EE 44%,
    #FFF1F6 68%,
    #FFFAFC 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Une respiration entre les lignes, en plus de l'interligne : trois lignes
   courtes et hautes se serrent sinon les unes contre les autres. */
.hero h1 .line + .line{margin-top:.07em}

.hero .hero__lede{
  margin:var(--hero-pas,24px) 0 0;   /* aucune marge automatique : elle recentrerait le bloc */
  /* Plus large que le titre : trois lignes pleines valent mieux que cinq
     lignes courtes, et le bloc y gagne en horizontale ce qu'il perd en
     hauteur. Il s'arrête bien avant la femme. */
  width:min(100%,580px);max-width:none;
  /* Un demi-point de moins, et une ligne plus aérée : le paragraphe se lit
     mieux en pesant moins. */
  font-size:16.5px;line-height:1.62;
  color:rgba(255,255,255,.93);
}
/* La mention chiffrée : du verre, non plus une pastille blanche pleine. Sur le
   prune, un aplat blanc se détachait plus que le titre qu'il annonce. */
.hero .hero__badge{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.32);
  color:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero .hero__badge .n{font-weight:700;color:#FFFFFF}

/* Le dessin des deux actions est dans boutons.css, avec celui de tous les
   boutons du site : l'action principale y prend le dégradé prune-framboise
   comme partout ailleurs, et la seconde le verre clair qu'exige une
   photographie. Ne reste ici que leur rangement. */
.hero .hero__actions{
  display:inline-flex;flex-wrap:nowrap;align-items:center;
  gap:12px;margin-top:var(--hero-pas,24px);
}

/* --- La recherche, à cheval sur le hero -----------------------------------
   La carte remonte de 80 px sur l'image : c'est ce qui coud les deux blocs
   l'un à l'autre, sans bande ni rectangle entre eux. La section elle-même n'a
   pas de fond — elle laisserait un liseré blanc au-dessus de la carte — et
   c'est le fond blanc de la page qui reprend dessous.

   Les quatre repères suivent aussitôt : la suite se lit hero, recherche,
   repères, sans vide entre les trois. */
.herosuite{position:relative;z-index:10;background:none;padding:0 0 8px}
.herosuite > .wrap{
  width:calc(100% - (2 * var(--grille-marge)));
  max-width:var(--grille-max);
  margin-inline:auto;
}
.herosuite .hsearch{
  margin-top:-80px;
  /* Le blanc domine : le rose n'est qu'une inflexion en fin de course, à peine
     lisible. Une carte franchement rosée aurait fait une seconde couleur là où
     la page n'en veut qu'une. */
  background:linear-gradient(150deg,rgba(255,255,255,.94) 0%,rgba(255,246,249,.90) 100%);
  /* Un filet prune très dilué plutôt qu'un liseré blanc : il pose le bord de
     la carte sans l'éclaircir. */
  border:1px solid rgba(125,27,79,.08);
  border-radius:14px;
  -webkit-backdrop-filter:blur(18px) saturate(130%);
          backdrop-filter:blur(18px) saturate(130%);
  /* Une ombre courte et près de la carte. La précédente s'étalait sur
     cinquante-cinq pixels : elle faisait une large nappe grise sous le bloc,
     qui flottait au lieu d'être posé. */
  box-shadow:0 12px 35px rgba(74,20,49,.07);
}
/* Les quatre repères, juste dessous, à la même largeur. */
.herosuite .trust__card{margin-top:28px}

/* =========================================================
   LE BANDEAU DES DERNIÈRES ANNONCES — EN BAS DU HERO

   Une bande de verre teinté qui traverse la scène sous le texte, et des cartes
   qui défilent dessus, de droite à gauche. Le verre n'est pas blanc : il est
   prune et rosé, comme la lumière qui le traverse — un verre blanc, posé sur
   une photographie déjà claire à droite, n'aurait été qu'un voile.

   Le flou d'arrière-plan n'est jamais animé : `backdrop-filter` est ce qu'un
   navigateur peint le plus cher, et le faire varier image par image coûterait
   la fluidité de toute la page. Ce qui bouge est en `transform` et en
   `opacity` — le reflet qui traverse une fois, la bande qui monte à
   l'ouverture.

   La boucle : la liste est écrite deux fois et c'est le défilement du cadre
   qui avance, poussé image par image (voir app.js). Quand il a parcouru la
   première écriture, il revient de sa largeur — la seconde est alors
   exactement à sa place, et rien ne se voit. C'est aussi ce qui permet de
   faire glisser la bande au doigt, ce qu'une animation de transformation
   interdit.
   ========================================================= */
.hmq{
  position:relative;z-index:5;
  flex:none;height:72px;
  display:flex;align-items:center;
  /* Aucun fond, aucun contour : la bande ne barre pas la photographie et ne
     forme pas un pied de page. Ce sont les cartes, et elles seules, qui
     portent le verre. */
  background:none;
  /* Un fondu court aux deux extrémités : juste de quoi qu'une carte ne soit
     pas tranchée net par le bord de la fenêtre. Plus large, il creusait un
     vide de chaque côté. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
}
.hmq__cadre{width:100%}
/* Le reflet liquide qui traverse la bande, une fois, à l'ouverture. Au repos
   il est invisible et hors du cadre. */
.hmq__reflet{
  position:absolute;top:0;bottom:0;left:0;width:24%;z-index:3;
  pointer-events:none;opacity:0;
  transform:translateX(-140%) rotate(6deg);
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 34%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.10) 66%,
    rgba(255,255,255,0) 100%);
}
.hmq__cadre{
  position:relative;z-index:1;
  overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hmq__cadre::-webkit-scrollbar{display:none}
/* Aucun retrait latéral : les cartes partent du bord de la fenêtre et y
   reviennent. Ce retrait faisait deux choses à la fois, et les deux étaient
   fausses — un vide au démarrage, et une boucle décalée d'autant, puisque la
   période se mesure du début de la piste au début de sa seconde écriture. */
.hmq__piste{display:flex;width:max-content;padding-inline:0}
.hmq__copie{display:flex}

/* --- Une carte ------------------------------------------------------------
   Fine, teintée, et cliquable d'un bout à l'autre. Chacune est sa propre
   plaque de verre : un fond translucide dans l'une des trois nuances de la
   maison, un flou léger, un filet blanc et un reflet sur son bord haut. C'est
   ce qui leur donne l'air de flotter sur la photographie plutôt que d'être
   posées sur une barre.

   La marge est portée par la carte elle-même, la dernière comprise : c'est ce
   qui fait que la moitié de la piste tombe pile au début de la seconde
   écriture. Une gouttière `gap` la manquerait d'une demi-gouttière, et la
   bande sursauterait à chaque tour. */
.hmq__carte{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:10px;flex:none;
  width:252px;height:52px;padding:0 11px;margin-right:14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.30);
  color:#FFFFFF;text-decoration:none;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 6px 18px rgba(40,12,28,.20);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
/* Le reflet du bord haut : une lumière rasante, pas un liseré. */
.hmq__carte::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.46) 30%,
    rgba(255,255,255,.46) 70%,rgba(255,255,255,0) 100%);
}
@media (hover:hover){
.hmq__carte:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.52);
  box-shadow:0 10px 24px rgba(40,12,28,.28);
}
}
/* Trois nuances de la maison, en rotation : prune profond, vieux rose, rose
   poudré. Elles se suivent sans jamais se répéter côte à côte, et la seconde
   écriture de la liste reprend la même suite — la couture ne se voit pas. */
.hmq__carte:nth-child(3n+1){background:linear-gradient(135deg,rgba(124,42,86,.74),rgba(94,28,66,.72))}
.hmq__carte:nth-child(3n+2){background:linear-gradient(135deg,rgba(160,70,114,.72),rgba(120,42,82,.70))}
.hmq__carte:nth-child(3n+3){background:linear-gradient(135deg,rgba(190,104,146,.70),rgba(144,62,104,.68))}

.hmq__ico{
  flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:6px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);
  color:#FFFFFF;
}
.hmq__ico svg{width:16px;height:16px}
/* Le texte prend ce qui reste et n'en sort jamais : `min-width:0` défait la
   largeur minimale que le contenu impose sinon à un élément flexible, sans
   laquelle un intitulé long pousserait la flèche hors de la carte. */
.hmq__txt{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0}
.hmq__t{
  font-size:13px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#FFFFFF;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hmq__meta{
  font-size:12px;line-height:1.3;color:rgba(255,255,255,.84);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hmq__meta .dept{color:rgba(255,255,255,.66)}
/* La flèche, de contour : elle dit où va la carte, elle ne la double pas d'un
   bouton. */
.hmq__arw{
  flex:none;display:grid;place-items:center;width:26px;height:26px;
  border:1px solid rgba(255,255,255,.36);border-radius:6px;color:#FFFFFF;
  transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.hmq__arw svg{width:13px;height:13px}
@media (hover:hover){
.hmq__carte:hover .hmq__arw{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.18)}
}

/* --- Quand le mouvement est refusé ---------------------------------------
   Le script ne démarre pas — c'est lui qui lit la préférence. Reste la seconde
   écriture de la liste, qui n'avait de sens que pour fermer la boucle : sans
   boucle, elle doublerait la liste sous le doigt. Le reflet ne traverse pas.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hmq__copie{display:none}
  .hmq__reflet{display:none}
}

/* recherche : carte blanche normale, sous les deux colonnes */
.hsearch{margin-top:48px;padding:32px;border-radius:var(--r-lg);box-shadow:var(--sh-key);border-color:var(--line-2)}
/* Les trois champs et le bouton. La part du métier a été rendue à la région :
   les noms de région sont les plus longs du formulaire — « Auvergne-Rhône-
   Alpes », « Provence-Alpes-Côte d'Azur » — et ils se coupaient là où le
   champ de saisie, lui, n'avait qu'un exemple à montrer. */
.hsearch__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.25fr) minmax(0,1fr) auto;gap:16px;align-items:end}
.hsearch__submit{height:54px;padding:0 30px}
.hsearch__quick{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.hsearch__quick .lbl{font-size:14px;font-weight:600;color:var(--ink-3);margin-right:4px}

/* chiffres de confiance, dans le hero */
.trust__card{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:transparent;border:none;box-shadow:none;border-radius:0;
  margin-top:32px;padding-block:20px;
}
.trust__item{display:flex;align-items:center;gap:16px;padding:8px 28px;border-left:1px solid var(--line);min-width:0}
.trust__item:first-child{border-left:0;padding-left:0}
.trust__item:last-child{padding-right:0}
.trust__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--rose-pale);border:1px solid #F6DCE9;color:var(--rose)}
.trust__ico svg{width:20px;height:20px}
.trust__n{display:block;font-size:20px;font-weight:700;color:var(--plum);letter-spacing:-.03em;line-height:1.2}
.trust__l{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}
.trust__item .strong{display:block;font-size:15px;font-weight:600;color:var(--plum);line-height:1.35}


/* =========================================================
   9. MARQUEE — section foncée
   ========================================================= */
.mq{
  position:relative;padding:76px 0;overflow:hidden;overflow:clip;
  background:linear-gradient(135deg,#291020 0%,#481B3A 100%);
}
/* halo rose très diffus, dérive lente et indépendante des cartes */
.mq::before{
  content:"";position:absolute;inset:-30% -20%;z-index:0;pointer-events:none;
  background:radial-gradient(45% 55% at 50% 50%,rgba(211,69,140,.26),transparent 70%);
  filter:blur(40px);
  animation:mqHalo 18s ease-in-out infinite alternate;
}
@keyframes mqHalo{
  from{transform:translate3d(14%,-6%,0) scale(1)}
  to  {transform:translate3d(-10%,8%,0) scale(1.12)}
}
.mq > *{position:relative;z-index:1}

/* en-tête : titre + description à gauche, pause alignée en haut à droite */
.mq__head{
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:32px;
  margin-bottom:40px;
}
.mq__txt-head{min-width:0}
.mq h2{color:#fff}
.mq__hl{color:var(--rose-lum)}
.mq__p{margin-top:12px;max-width:620px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.72)}
.mq__pause{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-md);
  color:rgba(255,255,255,.82);cursor:pointer;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background-color var(--t) var(--ease);
}
@media (hover:hover){
.mq__pause:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08)}
}
.mq__pause .ic-play{display:none}
.mq__pause[aria-pressed="true"] .ic-pause{display:none}
.mq__pause[aria-pressed="true"] .ic-play{display:grid}

/* Les deux rangées suivent la même grille. Aux bords, les cartes s'effacent
   plutôt que d'être tranchées par le bord de la fenêtre.

   Ce fondu était brutal : trois arrêts, et la carte passait du plein au vide
   sur quelques dizaines de pixels — une carte à demi effacée sur le bordeaux
   prend une couleur qui n'est ni la sienne ni celle du fond, et c'est cela
   qu'on voyait. Il est maintenant plus long et progresse par paliers, de sorte
   qu'une carte s'en aille sans jamais montrer cet entre-deux. */
.mq__wrap{
  display:grid;row-gap:20px;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 3%,rgba(0,0,0,.45) 6.5%,rgba(0,0,0,.78) 10%,#000 14%,#000 86%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.45) 93.5%,rgba(0,0,0,.16) 97%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 3%,rgba(0,0,0,.45) 6.5%,rgba(0,0,0,.78) 10%,#000 14%,#000 86%,rgba(0,0,0,.78) 90%,rgba(0,0,0,.45) 93.5%,rgba(0,0,0,.16) 97%,rgba(0,0,0,0) 100%);
}
.mq__row{overflow:hidden}
.mq__track{display:flex;width:max-content;gap:18px;will-change:transform}
/* décalage d'une demi-carte (210 + 9 de gouttière). Appliqué à la piste et non
   à la rangée : un translateX sur la rangée laisserait 219px de vide à droite. */
.mq--rtl .mq__track{margin-left:-219px}
.mq--ltr .mq__track{animation:mqLeft var(--dur) linear infinite}
.mq--rtl .mq__track{animation:mqRight var(--dur) linear infinite}
@keyframes mqLeft {from{transform:translate3d(0,0,0)}    to{transform:translate3d(-50%,0,0)}}
@keyframes mqRight{from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)}}
.mq__wrap.is-paused .mq__track{animation-play-state:paused}

/* toutes les cartes ont exactement la même géométrie */
.mq__card{
  flex:none;
  width:420px;min-width:420px;height:90px;padding:18px 20px;
  display:grid;grid-template-columns:48px minmax(0,1fr) auto 24px;
  align-items:center;gap:14px;
  background:var(--bg-white);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card);
  box-shadow:0 6px 18px rgba(18,5,14,.16);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
@media (hover:hover){
.mq__card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(18,5,14,.22)}
}
.mq__ini{
  width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-md);
  font-size:15px;font-weight:700;letter-spacing:-.02em;
}
.mq--rose{background:var(--rose-pale);border:1px solid #F6DCE9;color:var(--rose)}
.mq--plum{background:var(--bg-tint);border:1px solid var(--line);color:var(--plum)}
.mq--champ{background:var(--rose-pale);border:1px solid #F6DCE9;color:var(--rose)}
/* le texte ne doit jamais pousser le badge ni la flèche hors de la carte */
.mq__txt{display:flex;flex-direction:column;min-width:0}
.mq__t,.mq__s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mq__t{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--plum)}
.mq__s{font-size:14px;color:var(--ink-3);margin-top:3px}
.mq__card .badge{justify-self:end}
.mq__arw{width:20px;height:20px;justify-self:end;color:var(--ink-3);transition:transform var(--t) var(--ease)}
@media (hover:hover){
.mq__card:hover .mq__arw{transform:translateX(3px);color:var(--rose)}
}


/* =========================================================
   10. OFFRES — JobCard
   ========================================================= */
.jcard{min-height:268px}
.jcard--mev{border-color:var(--rose)}
/* Le fond crème des annonces « Nouveau » accompagnait le badge doré : il s'en
   va avec lui, et la carte reste blanche comme les autres. C'est le badge qui
   signale la nouveauté, pas la carte entière. */
.jcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.jcard__t{
  font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.016em;color:var(--plum);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--t) var(--ease);
}
@media (hover:hover){
.jcard:hover .jcard__t{color:var(--plum-d)}
}
.jcard__t a::after{content:"";position:absolute;inset:0;z-index:2}
.jcard__co{margin-top:8px;font-size:15px;font-weight:500;color:var(--ink-2)}
.jcard__meta{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.jcard__meta .dept{color:var(--ink-3)}
.jcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.jcard__date{font-size:13px;line-height:1.4;font-weight:500;color:var(--ink-3)}

/* =========================================================
   11. SECTEURS — InfoCard
   ========================================================= */
.dom{min-height:116px;padding:var(--card-p);cursor:pointer}
.dom__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
@media (hover:hover){
.dom:hover .pastille{transform:translateY(-2px) scale(1.05) rotate(-3deg)}
}
.dom__n{font-size:16px;font-weight:600;line-height:1.3;color:var(--plum)}
.dom__c{margin-top:4px;font-size:13px;font-weight:500;color:var(--ink-3)}
.dom__foot{display:flex;justify-content:flex-end;margin-top:auto;padding-top:16px}

/* =========================================================
   12. MANIFESTE
   ========================================================= */
.sec--plum .reveal.is-in{transition-delay:calc(var(--i,0) * 90ms)}
.mission__n{position:relative;margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:4px}
.mission__n::before{
  content:"";position:absolute;left:50%;top:50%;width:320px;height:180px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(211,69,140,.22),transparent 70%);
  filter:blur(30px);
}
.mission__n > span:first-child{
  font-size:clamp(36px,4vw,52px);line-height:1;font-weight:700;letter-spacing:-.04em;
  background:linear-gradient(110deg,#E58ABA 0%,#F3A8CE 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.mission__nl{font-size:15px;color:rgba(255,255,255,.75)}
.m-card{
  display:flex;flex-direction:column;padding:28px;min-height:200px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);
}
.m-card__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-md);margin-bottom:20px;background:rgba(255,255,255,.14);color:#fff}
.m-card__ico svg{width:21px;height:21px}
.m-card h3{color:#fff;margin-bottom:10px}
.m-card p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.82)}

/* =========================================================
   13. ENTREPRISES — grande carte prune-framboise
   ========================================================= */
.rec{
  position:relative;overflow:hidden;
  min-height:320px;padding:44px;border-radius:var(--r-lg);
  color:#fff;
  background:
    radial-gradient(circle at 88% 12%,rgba(211,69,140,.30),transparent 42%),
    linear-gradient(120deg,#291020 0%,#5A1C46 55%,#8A2059 100%);
  box-shadow:0 12px 32px rgba(41,16,32,.14);
}
.rec__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:48px;align-items:center;
}
.rec h2{color:#fff;font-size:clamp(26px,2.7vw,34px);line-height:1.18}
.rec__txt > p{margin-top:var(--title-gap);font-size:16px;line-height:1.65;color:rgba(255,255,255,.78);max-width:46ch}
.rec__pts{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.rec__pts li{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.92)}
.rec__pts .ck{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff}
.rec__pts svg{width:13px;height:13px}
.rec__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
@media (hover:hover){
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
}

/* carte blanche de publication */
.rec__panel{
  display:flex;flex-direction:column;
  padding:28px;border-radius:var(--r-card);
  background:var(--bg-white);border:var(--card-bd);
  box-shadow:0 8px 22px rgba(20,6,15,.16);
}
.rec__panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rec__panel-t{font-size:18px;font-weight:600;line-height:1.3;color:var(--plum)}
.rec__panel-p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-2)}
/* aperçu animé de publication */
.demo{margin:20px 0;display:flex;flex-direction:column;gap:10px}
.demo__row{
  display:flex;align-items:center;gap:10px;min-height:44px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-tint);
  transition:border-color 180ms var(--ease),background-color 180ms var(--ease);
}
.demo__row.is-done{border-color:var(--bd-hover);background:#FFF9FC}
.demo__lbl{font-size:13px;color:var(--ink-3);flex:none}
.demo__val{
  font-size:14px;font-weight:600;color:var(--plum);min-width:0;flex:1 1 auto;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo__val::after{
  content:"";display:inline-block;width:1.5px;height:14px;margin-left:2px;vertical-align:-2px;
  background:var(--rose);opacity:0;
}
.demo__row.is-typing .demo__val::after{opacity:1;animation:caret 900ms steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.demo__ck{
  flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--rose);color:#fff;
  opacity:0;transform:scale(.6);
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out);
}
.demo__ck svg{width:11px;height:11px}
.demo__row.is-done .demo__ck{opacity:1;transform:none}
.demo__prog{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:2px}
.demo__bar{display:block;height:100%;width:0%;background:var(--grad-rose);transition:width 420ms var(--ease-out)}
.demo__state{display:flex;align-items:center;gap:8px;justify-content:center;min-height:28px;margin-top:2px}
.demo__pill,.demo__badge{
  opacity:0;transform:translateY(6px);
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
}
.demo.is-ready .demo__pill,.demo.is-ready .demo__badge{opacity:1;transform:none}
.demo.is-ready .demo__badge{transition-delay:140ms}
/* curseur simulé de la démonstration — décoratif, sans interaction réelle */
.rec__panel{position:relative}
.demo__cursor{
  position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  opacity:0;transform:translate3d(0,0,0) scale(1);
  filter:drop-shadow(0 4px 10px rgba(41,16,32,.32));
  transition:opacity 300ms var(--ease-out),transform 760ms var(--ease-out);
}
.demo__cursor.is-click{
  transition:opacity 300ms var(--ease-out),transform 140ms var(--ease);
}
.demo__cursor.no-anim{transition:none}
.demo__cursor.is-visible{opacity:1}
/* onde au moment du clic */
.demo__cursor::after{
  content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;
  border:2.5px solid var(--rose);opacity:0;
}
.demo__cursor.is-click::after{animation:onde 460ms var(--ease-out)}
@keyframes onde{from{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(2.6)}}
/* enfoncement visuel du bouton, sans navigation */
#demoCta{transition:transform 160ms var(--ease),box-shadow 160ms var(--ease)}
#demoCta.is-press{transform:translateY(2px) scale(.985);box-shadow:0 2px 10px rgba(195,35,113,.26)}

.demo__pill{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-xs);background:var(--plum);color:#fff;font-size:13px;font-weight:600}
/* « Vérifiée » : vert clair */
.demo__badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:var(--r-xs);background:#E3FCEC;border:1px solid #A7EEC7;color:#0B8046;font-size:13px;font-weight:600}
.rec__panel-m{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink-3);
}
.rec__mail-ico{display:grid;place-items:center;flex:none;color:var(--ink-3)}
.rec__mail-ico svg{width:15px;height:15px}
.rec__panel-m a{color:var(--rose);font-weight:600}

/* =========================================================
   14. TÉMOIGNAGES — TestimonialCard
   ========================================================= */
.temo{min-height:250px}
.temo--mev{background:linear-gradient(160deg,#FFFFFF 0%,#FDF6FA 100%);border-color:#F3DCE9}
.temo__mark{display:block;font-size:52px;line-height:.7;font-weight:700;color:var(--rose);opacity:.22;margin-bottom:16px}
.temo__quote{font-size:17px;line-height:1.75;color:var(--ink)}
.temo__quote .hl{color:var(--rose);font-weight:500}
.temo__who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:24px}
.temo__who img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.temo__name{display:block;font-size:16px;font-weight:600;color:var(--plum)}
.temo__role{display:block;font-size:14px;color:var(--ink-3)}
.temo__link{margin-top:18px;align-self:flex-start}

/* =========================================================
   15. FAQ — grille 4fr / 8fr
   ========================================================= */
.faq{padding-top:72px;padding-bottom:88px}
.faq__grid{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}

/* colonne gauche : titre, introduction, bouton, note */
.faq__intro{position:sticky;top:104px}
.faq__lede{margin-top:var(--title-gap);font-size:16px;line-height:1.65;color:var(--ink-2)}
.faq__intro .btn{margin-top:24px}
.faq__note{margin-top:18px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.faq__note a{color:var(--rose);font-weight:600}

/* colonne droite : l'accordéon occupe toute la largeur */
.faq__list{display:grid;gap:12px}
.faq__item{
  background:#FFFFFF;border:1px solid #ECE8EA;border-radius:4px;box-shadow:none;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
@media (hover:hover){
.faq__item:hover{border-color:var(--bd-hover);box-shadow:var(--sh-hover)}
}
/* la question ouverte ressort comme un rectangle actif */
.faq__item.is-open{border-color:var(--rose);box-shadow:0 8px 22px rgba(195,35,113,.10)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.012em;color:var(--plum);
  transition:color var(--t) var(--ease),padding-bottom var(--t) var(--ease);
}
@media (hover:hover){
.faq__q:hover{color:var(--plum-d)}
}
.faq__item.is-open .faq__q{padding-bottom:4px}

/* même bouton dans les deux états : seule la rotation change */
.faq__ico{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-xs);
  border:1px solid var(--line-2);background:#FFFFFF;color:var(--plum);
  transition:transform 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease);
}
.faq__ico svg{width:14px;height:14px}
/* ouvert : le carré pivote en losange framboise */
.faq__item.is-open .faq__ico{
  transform:rotate(45deg);
  background:var(--grad-rose);border-color:transparent;color:#fff;
}

.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease-out)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 24px 22px;margin-top:18px;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:680px}
.faq__a p + p{margin-top:14px}


/* =========================================================
   16. NEWSLETTER — bande finale
   ========================================================= */
.news{
  min-height:220px;padding:44px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,#FFF6FB 0%,#FFFFFF 55%,#FDF3F9 100%);
  border-color:#F3E3EE;box-shadow:var(--sh-key);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:center;
}
.news h2{font-size:28px;line-height:1.2}
.news__txt p{margin-top:var(--title-gap);font-size:16px;line-height:1.65;color:var(--ink-2);max-width:44ch}
.news__form{display:grid;gap:14px}
.news__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.news__legal{font-size:13px;line-height:1.5;color:var(--ink-3)}
.news__legal a{color:var(--rose);font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* =========================================================
   17. FOOTER
   ========================================================= */
.footer{
  position:relative;overflow:hidden;color:#fff;
  padding:64px 0 0;border-radius:0;
  background:
    radial-gradient(circle at 88% 10%,rgba(211,69,140,.30),transparent 42%),
    linear-gradient(120deg,#291020 0%,#5A1C46 55%,#8A2059 100%);
}
.footer::before{                                   /* filet de marque, en haut */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-rose);
}
.footer::after{                                    /* halo bas-gauche, très discret */
  content:"";position:absolute;left:-130px;bottom:-160px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(195,35,113,.20),transparent 66%);pointer-events:none;
}
.footer .wrap{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:48px}
.footer__brand .brandmark{display:inline-flex;align-items:center;margin-bottom:20px}
.footer__brand .brandmark img{height:26px;width:auto}
.footer__brand p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.74);max-width:34ch}
.footer h4{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
.footer li + li{margin-top:12px}
.footer li a{display:inline-block;font-size:14.5px;color:rgba(255,255,255,.76);
  transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
@media (hover:hover){
.footer li a:hover{color:#fff;transform:translateX(3px)}
}
.footer__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.55)}

/* =========================================================
   18. ANIMATIONS
   ========================================================= */
/* trois variantes seulement : fadeUp (défaut), fade, staggerGrid via --i */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal--fade{transform:none}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms);
}
/* Entrée du hero — animations CSS autonomes (pas de dépendance au JS),
   une seule cadence de 100 ms entre les éléments. */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* L'entrée du hero n'est plus en CSS : elle est chorégraphiée par GSAP, et
   ses états de départ sont posés par le script au moment où il prend la main.
   Une règle d'animation ici masquerait le titre tant que le script n'a pas
   chargé — et pour toujours s'il ne charge pas. Le hero est donc, au repos,
   dans son état final. Voir components/accueil/HeroScene.tsx.
   Le débordement des lignes reste masqué : c'est lui qui donne au trait de
   coupe de GSAP un bord net. */
.hero h1 .line > span{display:block}
.hsearch{animation:fadeUp 640ms var(--ease-out) both;animation-delay:200ms}
.hero.is-done .hsearch{animation:none;opacity:1;transform:none}

/* apparition au scroll : trois variantes seulement */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =========================================================
   19. RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .header__in{gap:20px}
  .header__cta .btn--secondary{display:none}
  .nav a{padding:10px 12px}
  .nav a::after{left:12px;right:12px}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mq__card{width:340px;min-width:340px}
  .mq--rtl .mq__track{margin-left:-179px}
}

@media (max-width:1080px){
  /* La zone vide de gauche se resserre avec la fenêtre : le bloc de texte
     suit, pour ne pas déborder sur la femme. */
  .hero__bloc{width:min(56%,660px);padding-inline:var(--grille-axe) 24px}
  .hsearch__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hsearch__submit{grid-column:span 2;width:100%}
  .trust__card{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__item{padding:16px 22px}
  .trust__item:nth-child(odd){border-left:0;padding-left:0}
  .trust__item:nth-child(even){padding-right:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line)}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news{grid-template-columns:minmax(0,1fr);gap:32px}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}

/* Sous 900 px, la photographie ne laisse plus de zone vide utilisable à
   gauche : le cadre est trop étroit pour montrer la pièce à côté de la femme.
   Le bloc prend alors toute la largeur, centré, et la superposition passe du
   dégradé horizontal au dégradé vertical — c'est le même principe, dans
   l'autre sens. */
/* Le chevauchement de la carte de recherche suit la largeur : 80 px sur un
   grand écran, 40 sur une tablette, 24 sur un petit téléphone — au-delà, la
   carte mordrait sur les boutons du hero. */
@media (max-width:900px){
  .herosuite .hsearch{margin-top:-40px}
}
/* Une tablette tenue à la verticale : le hero y fait plus de 1000 px de haut,
   et le contenu, centré dans toute cette hauteur, se retrouvait au milieu d'un
   grand vide — l'accroche arrivait sous le pli du regard. Il se cale au
   premier tiers, ce qui est aussi la place qu'il occupe sur un téléphone : la
   composition ne change pas d'un format à l'autre, seule sa hauteur change. */
@media (min-width:761px) and (max-width:1080px) and (orientation:portrait){
  .hero__bloc{justify-content:flex-start;padding-top:13vh}
}

@media (max-width:900px){
  /* Le bloc prend toute la largeur, mais son bord gauche reste celui de la
     grille — donc celui du logo, comme sur grand écran. C'est la marge de la
     grille qui change à cette taille, pas la façon de s'y aligner. */
  .hero__bloc{width:100%;padding-inline:var(--grille-axe) var(--grille-bord)}
  .hero__prune{
    background:
      radial-gradient(90% 46% at 50% 30%,rgba(214,83,154,.16),rgba(214,83,154,0) 74%),
      linear-gradient(176deg,
        rgba(61,6,32,.86) 0%,
        rgba(61,6,32,.845) 14%,
        rgba(61,6,32,.825) 26%,
        rgba(61,6,32,.80) 37%,
        rgba(61,6,32,.765) 47%,
        rgba(61,6,32,.72) 56%,
        rgba(61,6,32,.665) 65%,
        rgba(61,6,32,.60) 74%,
        rgba(61,6,32,.53) 82%,
        rgba(61,6,32,.46) 90%,
        rgba(61,6,32,.40) 100%);
  }
}

@media (max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  /* cibles tactiles : 40 px minimum */
  .mq__pause{width:40px;height:40px}
  /* le badge écrasait le titre : on garde titre, entreprise et flèche */
  .mq__card .badge{display:none}
  .mq__card{grid-template-columns:48px minmax(0,1fr) 24px}
  /* FAQ : une seule colonne, texte puis accordéon */
  .faq__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .faq__intro{position:static}
  .shead{grid-template-columns:minmax(0,1fr)}
  .shead__cta{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}
  .shead--center .shead__cta{justify-self:center}
  /* le bloc entreprises garde ses deux colonnes tant qu'elles tiennent */
  .rec__in{grid-template-columns:minmax(0,1fr);gap:32px}
  .rec{padding:32px}
}

@media (max-width:760px){
  /* ---------- Règles globales ---------- */
  :root{--sec-y:56px;--gap:16px;--card-p:20px}
  .wrap{width:min(100% - 40px,1240px)}          /* padding-inline: 20px */
  .sec{padding:56px 0}
  h1{font-size:38px;line-height:1.08}
  h2{font-size:30px;line-height:1.18}
  h3{font-size:19px}
  body{font-size:15px}
  .t-meta,.jcard__date,.dom__c,.temo__role,.news__legal,.faq__note{font-size:13px}
  .card,.jcard,.dom,.temo,.m-card{width:100%;max-width:100%;min-height:0}

  /* ---------- 2. Header ---------- */
  .header__in{height:70px;gap:12px}
  .header__logo{padding:9px 13px}
  .header__logo img{height:20px}
  .nav{display:none}
  .burger{display:flex;margin-left:auto}
  .header__cta .btn{display:none}                /* aucun gros bouton dans la barre */
  .nav.is-open{display:flex}
  .nav.is-open .btn{display:flex;width:100%;margin-top:6px}

  /* ---------- 3. Hero ---------- */
  /* Une seule colonne : le texte d'abord, la plaque de verre dessous. La
     photographie reste au fond, recadrée sur celle qui écrit — le cadre est
     bien plus haut que large, c'est donc sur les côtés qu'il rogne, et la
     femme se tient à droite de l'image. Le voile est un peu plus dense : le
     texte passe ici sur toute la largeur, au-dessus de la pièce entière. */
  /* Le hero garde la hauteur de l'écran ; si le contenu demande davantage, il
     grandit — c'est un plancher, pas un plafond. */
  /* Le rembourrage du bas fait la place au chevauchement de la carte, comme
     sur grand écran, mais dans la mesure de cet écran-ci. */
  .hero{padding:114px 0 64px}
  /* La colonne prend toute la largeur : il n'y a plus de zone vide à côté de
     la femme, elle occupe l'image entière. Son bord gauche reste celui de la
     grille — le titre commence sous le nom dans la barre, ici comme ailleurs.
     Les deux actions s'empilent pleine largeur. */
  .hero__bloc{width:100%;padding-inline:var(--grille-axe) var(--grille-bord)}
  .hero__txt{max-width:none}
  .hero__actions{margin-top:20px}
  .hero__actions .btn{flex:1 1 100%}
  /* Le paragraphe garde son corps et son interligne : ce sont ceux du grand
     écran, et rien ne justifie qu'ils changent. */
  .hero .hero__lede{margin-top:20px}
  /* Le titre, lui, doit céder : à 46 px — le plancher du `clamp` — la ligne
     « Travailler avec » mesure quatre cents pixels et ne tiendrait pas dans
     les trois cent trente disponibles. Elle se romprait, ou déborderait. */
  /* Trente-cinq à quarante pixels, au prorata de la largeur. Mesuré : à
     360px, la plus longue des trois lignes tient jusqu'à 41,8px — le plancher
     garde donc une marge, et aucune ligne ne se rompt ni ne se coupe. */
  .hero h1{font-size:clamp(35px,9.6vw,40px)}
  /* Recadré sur la femme et son geste : le cadre est bien plus haut que large,
     c'est donc sur les côtés qu'il rogne, et elle se tient au centre-droit de
     l'image. Le sommet du hijab reste dans le cadre, et le visage n'en montre
     pas plus que la photographie d'origine. */
  /* Le cadre reprend la largeur du hero : ici, il est bien plus haut que
     large, la couverture rogne sur les côtés et `object-position` retrouve sa
     prise. */
  .hero__fond{width:100%}
  .hero__fond img{object-position:68% center}
  /* La même superposition qu'en grand écran — mêmes opacités, même lueur
     rose — mais tournée : le texte passe ici sur toute la largeur, au-dessus
     de la pièce entière, et la pente descend au lieu d'aller vers la droite.
     Seule l'orientation change ; la matière est la même. */
  .hero__prune{
    background:
      radial-gradient(120% 60% at 50% 8%,rgba(201,45,120,.14),rgba(201,45,120,0) 70%),
      linear-gradient(174deg,
        rgba(41,13,28,.93) 0%,
        rgba(43,14,30,.91) 16%,
        rgba(46,15,32,.87) 30%,
        rgba(50,17,35,.81) 43%,
        rgba(55,18,38,.72) 55%,
        rgba(61,20,42,.60) 66%,
        rgba(68,22,47,.47) 76%,
        rgba(76,25,52,.35) 86%,
        rgba(85,28,58,.26) 100%);
  }

  /* Le bandeau : une carte pleine et le cinquième de la suivante — assez pour
     qu'on comprenne que la bande continue, et que le doigt sache où la
     prendre. Le défilement automatique, lui, a lieu ici comme ailleurs. */
  /* La bande garde son dessin, en plus court : une carte pleine et le
     cinquième de la suivante — assez pour qu'on comprenne qu'elle continue, et
     que le doigt sache où la prendre. */
  .hmq{height:66px}
  .hmq__carte{width:min(74vw,268px);height:50px;margin-right:12px}
  /* Les deux actions s'empilent franchement : côte à côte, elles seraient
     illisibles à cette largeur. */
  .hero .hero__actions{flex-wrap:wrap;margin-top:22px}
  .hero .hero__actions .btn{flex:1 1 100%}
  .mq__pause{width:40px;height:40px}
  /* Le chevauchement se réduit avec la largeur : à cette taille, la carte est
     bien plus haute et mordrait sur le texte du hero. Le rembourrage de
     section est repris à zéro — « .sec » en pose 56 à cette taille, et ils
     annulaient la remontée de la carte. */
  .herosuite{padding:0 0 8px}
  .herosuite .hsearch{margin-top:-40px;border-radius:12px}
  .herosuite .trust__card{margin-top:20px}

  /* ---------- 4. Recherche ---------- */
  .hsearch{margin-top:32px;padding:20px;border-radius:var(--r-card)}
  .hsearch__grid{display:grid;grid-template-columns:1fr;gap:14px}
  .hsearch__submit{grid-column:auto;width:100%;height:52px}
  /* Les recherches rapides passent à la ligne. Elles défilaient
     horizontalement : sur un téléphone, une rangée qui se pousse hors de
     l'écran cache la moitié de ses entrées à qui ne pense pas à la tirer. */
  .hsearch__quick{
    margin-top:18px;padding-top:16px;flex-wrap:wrap;overflow-x:visible;
  }
  .hsearch__quick .chip{flex:0 1 auto}
  .hsearch__quick .lbl{flex:1 0 100%;margin-bottom:2px}

  /* ---------- 5. Statistiques : 2 × 2 ---------- */
  .trust__card{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px;padding-block:12px}
  .trust__item{gap:12px;padding:16px 12px;align-items:flex-start}
  .trust__item:nth-child(odd){border-left:0;padding-left:0}
  .trust__item:nth-child(even){padding-right:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line)}
  .trust__ico{width:38px;height:38px}
  .trust__ico svg{width:18px;height:18px}
  .trust__n{font-size:19px}
  .trust__item .strong{font-size:14px}
  .trust__l{display:none}                        /* pas de longues phrases ici */

  /* ---------- 6. Marquee : une seule ligne ---------- */
  .mq{padding:56px 0}
  .mq__head{grid-template-columns:1fr auto;gap:16px;margin-bottom:24px}
  .mq h2{font-size:28px}
  .mq__p{font-size:15px;max-width:none}
  .mq__row:last-child{display:none}
  .mq__wrap{row-gap:0}
  .mq__card{
    width:300px;min-width:300px;height:86px;padding:16px;gap:12px;
    grid-template-columns:44px minmax(0,1fr) 18px;
  }
  .mq__ini{width:44px;height:44px}
  .mq__ini svg{width:19px;height:19px}
  .mq__t{font-size:15px}
  .mq__s{font-size:13px}
  .mq__arw{width:18px;height:18px}

  /* ---------- 7. Offres : une colonne, CTA après les cartes ---------- */
  .grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .shead{grid-template-columns:minmax(0,1fr);row-gap:10px;margin-bottom:24px}
  .shead__cta{display:none}
  .sec__cta--m{display:flex;margin-top:24px}
  .jcard{min-height:0}
  .jcard__t{font-size:19px}
  .jcard__co{font-size:14px}

  /* ---------- 8. Secteurs : 2 colonnes ---------- */
  .doms .grid--4,
  .sec--tint .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dom{padding:16px;min-height:150px}
  .dom__head{margin-bottom:12px}
  .dom .pastille{width:38px;height:38px}
  .dom .pastille svg{width:18px;height:18px}
  .dom__n{font-size:15px}
  .dom__foot{padding-top:12px}
  .dom .go{width:32px;height:32px}

  /* ---------- 9. Bloc entreprises ---------- */
  .rec{padding:24px;min-height:0;border-radius:var(--r-card)}
  .rec__in{grid-template-columns:minmax(0,1fr);gap:28px}
  .rec h2{font-size:26px}
  .rec__txt p{font-size:15px;max-width:none}
  .rec__cta{flex-direction:column;align-items:stretch;gap:12px}
  .rec__cta .btn{width:100%}
  .rec__panel{width:100%;max-width:100%;padding:20px}
  .demo__row{padding:9px 11px;gap:8px}
  .demo__lbl{font-size:13px}
  .demo__val{font-size:13px}
  .demo__cursor{display:none}

  /* ---------- 10. Section violette ---------- */
  .sec--plum .shead{margin-bottom:28px}
  .mission__n{margin-top:16px}
  .m-card{padding:20px;min-height:0}
  .m-card p{font-size:14.5px}
  .m-card__ico{width:42px;height:42px;margin-bottom:14px}
  .sec__cta{margin-top:28px}

  /* ---------- 11. Témoignages ---------- */
  .temo{padding:22px}
  .temo__quote{font-size:15.5px}
  .temo__who img{width:50px;height:50px}

  /* ---------- 12. FAQ ---------- */
  .faq{padding-top:56px;padding-bottom:56px}
  .faq__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq__intro{position:static}
  .faq__q{padding:18px 18px;font-size:15.5px;gap:14px}
  .faq__item.is-open .faq__q{padding-bottom:4px}
  .faq__a p{padding:0 18px 18px;font-size:14.5px;max-width:none}
  .faq__ico{width:30px;height:30px}

  /* ---------- 13. Newsletter ---------- */
  .news{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px;min-height:0}
  .news h2{font-size:26px}
  .news__row{grid-template-columns:minmax(0,1fr)}
  .news__form .btn{width:100%}

  /* ---------- 14. Footer ---------- */
  .footer{padding:48px 0 0;border-radius:0}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:36px}
  .footer__bar{justify-content:flex-start;gap:8px;font-size:13px}

  /* ---------- 15. Animations allégées ---------- */
  .reveal{transform:translateY(10px)}
  .hsearch{animation-duration:520ms}
}

@media (max-width:430px){
  .mq h2{font-size:26px}
  .doms .grid--4,
  .sec--tint .grid--4{grid-template-columns:minmax(0,1fr)}   /* titres trop longs à 2 colonnes */
  .dom{min-height:0}
  .trust__item{padding:14px 10px}
  .mq__card{width:290px;min-width:290px}
}

@media (max-width:360px){
  h1{font-size:34px}
  h2{font-size:27px}
}

/* Sur un petit téléphone, la carte ne remonte plus que de 24 px : au-delà,
   elle mordrait sur les deux boutons du hero. Cette règle est en fin de
   feuille parce qu'elle doit passer après le bloc des 760 px, qui pose la
   valeur des tablettes et des grands téléphones. */
@media (max-width:480px){
  .herosuite .hsearch{margin-top:-24px}
}