/* =========================================================================
   MUSLIMA WORK — LE SITE PUBLIC, DEUXIÈME DIRECTION

   CETTE FEUILLE N'EST PLUS CHARGÉE PAR AUCUNE PAGE.

   Elle avait porté l'accueil dans une seconde direction ; l'accueil est
   revenu à son premier dessin, et le lien a été retiré des deux mises en
   page — app/(accueil)/layout.tsx et app/(offre)/layout.tsx. Elle est
   conservée telle quelle : c'est ce qu'il faudra reprendre le jour où la
   direction sera reprise, page par page, avec une Preview et des captures
   avant chaque propagation.

   Attention si elle est rebranchée : au-delà de l'accueil (« .acc- »), elle
   redéfinit la typographie, les boutons, l'en-tête et le pied de page pour
   toutes les pages de la mise en page qui la charge.

   Chargée en dernier, après style.css et refonte.css. Rien n'est
   supprimé de ces feuilles : les pages qui ne sont pas encore refaites
   gardent exactement ce qu'elles avaient.

   La direction vient de « Publier une annonce » : du blanc, un rose crème
   très léger, du bordeaux et du framboise par touches, une typographie forte,
   des filets fins, presque aucune ombre. Pas de dégradé décoratif, pas de
   surtitre en capitales espacées, pas d'accumulation de pastilles.

   Sommaire
     0. Fondations — palette, rythme, typographie, boutons, liens
     1. En-tête
     2. Pied de page
     3. Accueil
   ========================================================================= */

/* =========================================================================
   0. FONDATIONS
   ========================================================================= */
:root{
  /* --- L'encre. Trois valeurs, pas davantage : un titre, un texte, une
     mention. Au-delà, la hiérarchie se lit moins bien, pas mieux. */
  --v-encre:#2A1220;
  --v-encre-2:#5E4E57;
  --v-encre-3:#8B7E85;

  /* --- La marque, avec parcimonie. Le bordeaux porte les titres accentués
     et les boutons ; le framboise, les traits actifs ; l'accent ne sert
     qu'aux très petites surfaces. */
  --v-bordeaux:#68153D;
  --v-framboise:#951753;
  --v-accent:#C92D78;

  /* --- Les fonds. Le blanc domine ; le rose crème pose les respirations. */
  --v-blanc:#FFFFFF;
  --v-creme:#FDF7FA;
  --v-creme-2:#FBF0F6;

  /* --- Les filets. Ils font la structure : c'est pourquoi il n'y a presque
     pas d'ombre. Un filet neutre, un filet rosé pour ce qui touche la marque. */
  --v-filet:#EDE5E9;
  --v-filet-2:#F4EEF1;
  --v-filet-rose:#F1DCE8;

  /* --- Le rythme. Une seule échelle, employée partout. */
  --v-1:8px; --v-2:16px; --v-3:26px; --v-4:44px; --v-5:66px; --v-6:88px;
  --v-large:min(1180px,calc(100% - 48px));
}

/* La largeur commune du site public. Une seule mesure : les sections ne
   décident pas chacune de leur laize. */
.header .wrap,.footer .wrap,main .wrap{width:var(--v-large)}

/* --- La typographie ------------------------------------------------------
   Poppins, déjà chargée. Ce qui change est l'échelle et le resserrement :
   des titres plus grands, plus serrés, plus sombres ; un texte plus calme. */
body{color:var(--v-encre);background:var(--v-blanc)}
h1,h2,h3,h4{color:var(--v-encre);letter-spacing:-.026em;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;font-weight:700}
h2{font-size:clamp(26px,3.1vw,38px);line-height:1.14;font-weight:700}
h3{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.016em}

/* --- Les boutons ---------------------------------------------------------
   Rectangulaires à peine adoucis, sans ombre ni brillance. Le plein est
   bordeaux, le second n'est qu'un filet, le fantôme n'est qu'un mot. */
.btn{
  --h:48px;height:var(--h);padding:0 24px;border-radius:6px;
  font-size:15px;font-weight:600;letter-spacing:0;
  box-shadow:none;background-image:none;transition:background 180ms ease,border-color 180ms ease,color 180ms ease;
}
.btn--sm{--h:42px;padding:0 18px;font-size:14px}
.btn--lg{--h:52px;padding:0 28px;font-size:15.5px}
.btn--primary{background:var(--v-bordeaux);border:1px solid var(--v-bordeaux);color:#fff}
.btn--primary:hover{background:#571032;border-color:#571032;transform:none}
.btn--secondary{background:#fff;border:1px solid var(--v-filet);color:var(--v-encre)}
.btn--secondary:hover{border-color:var(--v-bordeaux);color:var(--v-bordeaux);background:#fff;transform:none}
.btn--ghost{background:transparent;border:1px solid transparent;color:var(--v-bordeaux)}
.btn--ghost:hover{background:var(--v-creme);transform:none}
/* La brillance appartenait à l'ancienne direction. */
.btn--shine::after,.btn--shine::before{display:none!important}

/* Le lien-bouton : un mot, une flèche, un soulignement au survol. */
.btn-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--v-bordeaux);text-decoration:none;
}
.btn-link:hover{text-decoration:underline;text-underline-offset:4px}
.btn-link svg{width:15px;height:15px}

/* =========================================================================
   1. L'EN-TÊTE
   Blanc, un filet en bas, rien d'autre. Il ne se pose pas sur la page comme
   une barre flottante : il en est la première ligne.
   ========================================================================= */
.header{
  position:sticky;top:0;z-index:200;
  background:var(--v-blanc);border-bottom:1px solid var(--v-filet);
  box-shadow:none;backdrop-filter:none;
}
.header.is-stuck,.header.is-scrolled{box-shadow:none;background:var(--v-blanc)}
.header__in{
  display:flex;align-items:center;gap:var(--v-4);
  height:76px;padding:0;
}
.header__logo{flex:none;display:flex;align-items:center}
.header__logo svg{height:30px;width:auto}

.nav{margin-right:auto}
.nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav a{
  position:relative;display:block;padding:4px 0;
  font-size:15px;font-weight:500;color:var(--v-encre-2);text-decoration:none;
  transition:color 180ms ease;
}
.nav a:hover{color:var(--v-encre)}
/* Le trait actif est framboise, et il est fin : c'est un repère, pas un
   surlignage. */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--v-framboise);transform:scaleX(0);transform-origin:left;
  transition:transform 200ms ease;
}
.nav a:hover::after{transform:scaleX(1)}

.header__cta{display:flex;align-items:center;gap:12px;flex:none}
.burger{
  display:none;width:42px;height:42px;place-items:center;
  background:none;border:1px solid var(--v-filet);border-radius:6px;color:var(--v-encre);
}

/* Le menu déroulé sur petit écran : une liste, pas un panneau. */
.mmenu{
  background:var(--v-blanc);border-bottom:1px solid var(--v-filet);
  padding:var(--v-2) 24px var(--v-3);
}
.mmenu ul{list-style:none;margin:0;padding:0;display:grid}
.mmenu a{
  display:block;padding:14px 0;border-bottom:1px solid var(--v-filet-2);
  font-size:16px;font-weight:500;color:var(--v-encre);text-decoration:none;
}
.mmenu__cta{display:grid;gap:10px;margin-top:var(--v-3)}

@media (max-width:980px){
  .nav{display:none}
  .header__in{height:68px;gap:var(--v-2)}
  .burger{display:grid}
  .header__cta .btn--secondary{display:none}
}

/* =========================================================================
   2. LE PIED DE PAGE
   Le prune profond de la marque, une seule fois sur la page. Des filets, des
   colonnes, et l'inscription en tête — jamais une carte posée dessus.
   ========================================================================= */
.footer{background:var(--v-encre);color:#E8DDE3;padding:0}
.footer .wrap{padding:0}

/* L'inscription : deux colonnes, séparée du reste par un filet clair. */
.footer__news{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--v-4);align-items:start;
  padding:var(--v-5) 0;border-bottom:1px solid rgba(255,255,255,.1);
  background:none;border-radius:0;
}
.footer__news-txt h2{margin:0;color:#fff;font-size:clamp(24px,2.6vw,32px);max-width:16ch}
.footer__news-txt p{margin:12px 0 0;max-width:42ch;font-size:15.5px;line-height:1.65;color:#C9B8C1}
.footer__news-form{display:grid;gap:12px}
.footer__news-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px}
.footer__news-form .input{
  height:50px;border-radius:6px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);color:#fff;font-size:15px;
}
.footer__news-form .input::placeholder{color:#A8949F}
.footer__news-form .input:focus{border-color:var(--v-accent);background:rgba(255,255,255,.09);outline:none}
.footer__news-form .btn--primary{background:var(--v-accent);border-color:var(--v-accent)}
.footer__news-form .btn--primary:hover{background:#B32468;border-color:#B32468}
.footer__news-legal{margin:2px 0 0;font-size:12.5px;line-height:1.6;color:#A8949F}
.footer__news-legal a{color:#E8DDE3;text-decoration:underline;text-underline-offset:3px}

.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:var(--v-4);padding:var(--v-5) 0 var(--v-4);
}
.footer__brand p{margin:16px 0 0;max-width:32ch;font-size:14.5px;line-height:1.7;color:#B7A5AE}
.footer__brand svg{height:28px;width:auto}
/* Les titres de colonne étaient en capitales espacées. Un titre se lit
   mieux écrit comme un titre. */
.footer h4{
  margin:0 0 16px;font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;color:#fff;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer li{margin:0}
.footer a{color:#C9B8C1;text-decoration:none;font-size:14.5px;transition:color 160ms ease}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding:var(--v-3) 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:#A8949F;
}

@media (max-width:900px){
  .footer__news{grid-template-columns:minmax(0,1fr);gap:var(--v-3);padding:var(--v-4) 0}
  .footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--v-3);padding:var(--v-4) 0 var(--v-3)}
}
@media (max-width:560px){
  .footer__news-row{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   3. L'ACCUEIL
   ========================================================================= */
.acc-sec{padding:var(--v-6) 0}
.acc-sec--creme{background:var(--v-creme);border-block:1px solid var(--v-filet-rose)}

/* L'en-tête de section : un titre, une ligne, et le lien qui va plus loin
   posé à droite sur le même axe. */
.acc-tete{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:var(--v-2) var(--v-4);
  margin-bottom:var(--v-4);padding-bottom:var(--v-3);
  border-bottom:1px solid var(--v-filet);
}
.acc-tete h2{margin:0;max-width:22ch}
.acc-tete__p{margin:14px 0 0;max-width:56ch;font-size:16.5px;line-height:1.65;color:var(--v-encre-2)}
.acc-tete__lien{white-space:nowrap}

/* --- Le hero -------------------------------------------------------------
   Deux colonnes, aucune carte : le titre à gauche, les dernières annonces à
   droite dans un cadre à filet. Le fond est un aplat rose crème qui s'éteint
   vers le blanc — une bande, pas un halo. */
.acc-hero{
  background:var(--v-creme);border-bottom:1px solid var(--v-filet-rose);
  padding:var(--v-6) 0 var(--v-5);
}
.acc-hero__in{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--v-5);align-items:center;
}
.acc-hero h1{margin:0;max-width:15ch}
/* Le mot qui porte la promesse est bordeaux. Pas de dégradé : une couleur
   pleine se lit à toutes les tailles, et se recopie sans mentir. */
.acc-hero h1 em{font-style:normal;color:var(--v-bordeaux)}
.acc-hero__p{margin:var(--v-3) 0 0;max-width:52ch;font-size:17px;line-height:1.68;color:var(--v-encre-2)}
.acc-hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--v-4)}
/* Les chiffres en une ligne de texte, séparés par des points médians : trois
   pastilles auraient dit la même chose en occupant trois fois la place. */
.acc-hero__chiffres{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:var(--v-4) 0 0;padding-top:var(--v-3);border-top:1px solid var(--v-filet-rose);
  font-size:14.5px;color:var(--v-encre-3);
}
.acc-hero__chiffres b{color:var(--v-encre);font-weight:600}
.acc-hero__sep{color:var(--v-filet-rose)}

/* Les dernières annonces : une liste tenue par des filets, pas une pile qui
   tourne. On lit les quatre d'un coup, et l'on clique celle qu'on veut. */
.acc-recentes{
  background:var(--v-blanc);border:1px solid var(--v-filet-rose);border-radius:4px;
  overflow:hidden;
}
.acc-recentes__tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:20px 24px;border-bottom:1px solid var(--v-filet-2);
}
.acc-recentes__t{margin:0;font-size:15px;font-weight:600;color:var(--v-encre)}
.acc-recentes__n{font-size:13.5px;color:var(--v-encre-3)}
.acc-recentes__l{list-style:none;margin:0;padding:0}
.acc-recentes__l li + li{border-top:1px solid var(--v-filet-2)}
.acc-recentes__a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:17px 24px;text-decoration:none;transition:background 160ms ease;
}
.acc-recentes__a:hover{background:var(--v-creme)}
.acc-recentes__ti{
  display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--v-encre);
  letter-spacing:-.012em;
}
.acc-recentes__me{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--v-encre-3)}
.acc-recentes__go{flex:none;color:var(--v-bordeaux);display:grid;place-items:center}
.acc-recentes__go svg{width:16px;height:16px}
.acc-recentes__pied{padding:16px 24px;border-top:1px solid var(--v-filet-2);background:var(--v-creme)}

@media (max-width:1024px){
  .acc-hero{padding:var(--v-5) 0 var(--v-4)}
  .acc-hero__in{grid-template-columns:minmax(0,1fr);gap:var(--v-4)}
  .acc-hero h1{max-width:18ch}
}

/* --- La recherche --------------------------------------------------------
   Une barre, posée à cheval sur la limite du hero. Quatre champs à filet,
   un bouton plein, et les recherches rapides en dessous, en toutes lettres. */
.acc-rech{padding:0;position:relative;z-index:2;margin-top:calc(var(--v-4) * -1)}
.acc-rech__in{
  background:var(--v-blanc);border:1px solid var(--v-filet);border-radius:4px;
  padding:var(--v-3) var(--v-3) var(--v-2);
}
.acc-rech__grille{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) auto;
  gap:14px;align-items:end;
}
.acc-rech .field{display:grid;gap:7px;min-width:0}
.acc-rech label{font-size:13px;font-weight:600;color:var(--v-encre-2)}
.acc-rech .field-ctl{position:relative;display:block}
.acc-rech .ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;color:var(--v-encre-3);pointer-events:none;
}
.acc-rech .ico svg{width:17px;height:17px}
.acc-rech .input,.acc-rech .select{
  width:100%;height:50px;padding:0 14px 0 40px;
  background:var(--v-blanc);border:1px solid var(--v-filet);border-radius:6px;
  font-size:15px;color:var(--v-encre);appearance:none;
  transition:border-color 160ms ease;
}
.acc-rech .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B7E85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
  padding-right:38px;
}
.acc-rech .input:focus,.acc-rech .select:focus{border-color:var(--v-framboise);outline:none}
.acc-rech .select.is-set{border-color:var(--v-filet-rose);color:var(--v-bordeaux);font-weight:500}
.acc-rech__submit{height:50px;white-space:nowrap}
.acc-rech__rapide{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:var(--v-3);padding-top:var(--v-2);border-top:1px solid var(--v-filet-2);
}
.acc-rech__lbl{font-size:13px;color:var(--v-encre-3)}
/* Des liens, pas des pastilles : le mot suffit, et il se lit. */
.acc-rech__rapide a{
  font-size:14px;color:var(--v-encre-2);text-decoration:none;
  border-bottom:1px solid var(--v-filet-rose);padding-bottom:2px;
  transition:color 160ms ease,border-color 160ms ease;
}
.acc-rech__rapide a:hover{color:var(--v-bordeaux);border-color:var(--v-bordeaux)}
.acc-rech__rapide a.est-tout{color:var(--v-bordeaux);font-weight:600}

@media (max-width:1024px){
  .acc-rech{margin-top:calc(var(--v-3) * -1)}
  .acc-rech__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .acc-rech__submit{grid-column:1 / -1}
}
@media (max-width:600px){
  .acc-rech__grille{grid-template-columns:minmax(0,1fr)}
}

/* --- Les repères ---------------------------------------------------------
   Quatre faits, séparés par des filets verticaux. Aucune carte, aucune
   pastille : une icône fine, un nombre, une ligne. */
.acc-reperes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:var(--v-4) 0 var(--v-2);
}
.acc-repere{display:grid;gap:6px;padding:0 var(--v-3);border-left:1px solid var(--v-filet)}
.acc-repere:first-child{border-left:0;padding-left:0}
.acc-repere__ico{color:var(--v-framboise)}
.acc-repere__ico svg{width:20px;height:20px}
.acc-repere__n{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--v-encre);margin-top:4px}
.acc-repere__l{font-size:14.5px;line-height:1.55;color:var(--v-encre-2)}

@media (max-width:820px){
  .acc-reperes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--v-3) 0;padding:var(--v-4) 0}
  .acc-repere:nth-child(odd){border-left:0;padding-left:0}
}

/* --- Les annonces --------------------------------------------------------
   Trois colonnes de cartes à filet. Pas d'ombre, pas de grand rayon : ce qui
   les tient est la ligne, et l'espace entre elles. */
.acc-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--v-3)}
.acc-carte{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:24px;background:var(--v-blanc);
  border:1px solid var(--v-filet);border-radius:4px;
  transition:border-color 180ms ease;
}
.acc-carte:hover{border-color:var(--v-filet-rose)}
.acc-carte__tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc-carte__ico{
  display:grid;place-items:center;width:40px;height:40px;border-radius:8px;
  background:var(--v-creme);color:var(--v-bordeaux);
}
.acc-carte__ico svg{width:19px;height:19px}
.acc-carte__t{margin:6px 0 0;font-size:17px;line-height:1.32;font-weight:600;letter-spacing:-.016em}
.acc-carte__t a{color:var(--v-encre);text-decoration:none}
/* Toute la carte est cliquable, sans imbriquer les liens. */
.acc-carte__t a::after{content:"";position:absolute;inset:0}
.acc-carte:hover .acc-carte__t a{color:var(--v-bordeaux)}
.acc-carte__co{margin:0;font-size:14.5px;color:var(--v-encre-2)}
.acc-carte__me{margin:0;font-size:13.5px;color:var(--v-encre-3)}
.acc-carte__pied{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--v-filet-2);
  font-size:13px;color:var(--v-encre-3);
}
.acc-carte__pied .go{color:var(--v-bordeaux);display:grid;place-items:center}
.acc-carte__pied .go svg{width:15px;height:15px}
/* Un seul repère par carte, et seulement quand il dit quelque chose. */
.acc-marque{
  font-size:12px;font-weight:600;letter-spacing:0;color:var(--v-bordeaux);
  background:var(--v-creme-2);border-radius:4px;padding:5px 11px;white-space:nowrap;
}

@media (max-width:980px){ .acc-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .acc-grille{grid-template-columns:minmax(0,1fr)} }

/* --- Les secteurs --------------------------------------------------------
   Une liste en deux colonnes, tenue par des filets. Huit cartes arrondies
   disaient huit fois la même chose ; huit lignes se parcourent. */
.acc-secteurs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--v-5);
  border-top:1px solid var(--v-filet);
}
.acc-secteur{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:19px 0;border-bottom:1px solid var(--v-filet);text-decoration:none;
  transition:padding-left 200ms ease;
}
.acc-secteur:hover{padding-left:8px}
.acc-secteur__ico{
  display:grid;place-items:center;width:38px;height:38px;border-radius:8px;
  background:var(--v-blanc);border:1px solid var(--v-filet);color:var(--v-bordeaux);
}
.acc-secteur__ico svg{width:18px;height:18px}
.acc-secteur__n{font-size:16px;font-weight:600;color:var(--v-encre);letter-spacing:-.012em}
.acc-secteur__c{font-size:14px;color:var(--v-encre-3);white-space:nowrap}
.acc-secteur:hover .acc-secteur__n{color:var(--v-bordeaux)}

@media (max-width:820px){ .acc-secteurs{grid-template-columns:minmax(0,1fr);column-gap:0} }

/* --- Ce que nous sommes --------------------------------------------------
   Trois colonnes de texte, un filet au-dessus de chacune. */
.acc-triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--v-4)}
.acc-mot{display:grid;align-content:start;gap:12px;padding-top:var(--v-3);border-top:2px solid var(--v-bordeaux)}
.acc-mot__ico{color:var(--v-framboise)}
.acc-mot__ico svg{width:22px;height:22px}
.acc-mot h3{margin:0}
.acc-mot p{margin:0;font-size:15.5px;line-height:1.7;color:var(--v-encre-2)}

@media (max-width:900px){ .acc-triple{grid-template-columns:minmax(0,1fr);gap:var(--v-3)} }

/* --- Les recruteurs ------------------------------------------------------
   Une bande crème, deux colonnes, aucune démonstration animée : ce qu'il y a
   à montrer, c'est la page de dépôt elle-même. */
.acc-recrut__in{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--v-5);align-items:center;
}
.acc-recrut h2{margin:0;max-width:18ch}
.acc-recrut__p{margin:var(--v-3) 0 0;max-width:52ch;font-size:16.5px;line-height:1.68;color:var(--v-encre-2)}
.acc-recrut__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--v-4)}
.acc-etapes{list-style:none;margin:0;padding:0;display:grid;gap:0;background:var(--v-blanc);
  border:1px solid var(--v-filet-rose);border-radius:4px}
.acc-etape{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:22px 24px;
}
.acc-etape + .acc-etape{border-top:1px solid var(--v-filet-2)}
.acc-etape__ico{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--v-creme-2);color:var(--v-bordeaux);
}
.acc-etape__ico svg{width:18px;height:18px}
.acc-etape strong{display:block;font-size:15px;font-weight:600;color:var(--v-encre);line-height:1.35}
.acc-etape span{display:block;margin-top:3px;font-size:14px;line-height:1.55;color:var(--v-encre-2)}

@media (max-width:1024px){ .acc-recrut__in{grid-template-columns:minmax(0,1fr);gap:var(--v-4)} }

/* --- La FAQ --------------------------------------------------------------
   Deux colonnes : la question posée à gauche, les réponses à droite, en
   lignes séparées par des filets. */
.acc-faq__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--v-5)}
.acc-faq__dire h2{margin:0;max-width:14ch}
.acc-faq__p{margin:var(--v-3) 0 0;max-width:40ch;font-size:16px;line-height:1.68;color:var(--v-encre-2)}
.acc-faq__note{margin:var(--v-3) 0 0;font-size:14.5px;line-height:1.6;color:var(--v-encre-3)}
.acc-faq__note a{color:var(--v-bordeaux);text-decoration:underline;text-underline-offset:3px}
.acc-faq__liste{border-top:1px solid var(--v-filet)}
.faq__item{border-bottom:1px solid var(--v-filet);background:none;border-radius:0;padding:0}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;font-size:16.5px;font-weight:600;line-height:1.4;color:var(--v-encre);
  letter-spacing:-.014em;
}
.faq__q:hover{color:var(--v-bordeaux)}
.faq__ico{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--v-creme);color:var(--v-bordeaux);transition:transform 220ms ease;
}
.faq__ico svg{width:15px;height:15px}
.faq__item.is-open .faq__ico,
.faq .faq__item.is-open .faq__ico{
  transform:rotate(45deg);background:var(--v-creme-2);color:var(--v-bordeaux);
}
.faq__a{overflow:hidden;max-height:0;transition:max-height 280ms ease}
.faq__item.is-open .faq__a{max-height:600px}
.faq__a > div{padding:0 0 24px;max-width:62ch}
.faq__a p{margin:0 0 12px;font-size:15.5px;line-height:1.72;color:var(--v-encre-2)}
.faq__a p:last-child{margin-bottom:0}

@media (max-width:900px){ .acc-faq__in{grid-template-columns:minmax(0,1fr);gap:var(--v-4)} }

/* --- Le rythme sur petit écran ------------------------------------------- */
@media (max-width:760px){
  :root{--v-large:calc(100% - 32px)}
  .acc-sec{padding:var(--v-5) 0}
  .acc-hero{padding:var(--v-4) 0 var(--v-3)}
  .acc-tete{grid-template-columns:minmax(0,1fr)}
  .acc-tete__lien{justify-self:start}
  .acc-hero__act .btn,.acc-recrut__act .btn{width:100%;justify-content:center}
  .acc-rech__in{padding:var(--v-2)}
  .acc-recentes__a{padding:15px 18px}
  .acc-recentes__tete,.acc-recentes__pied{padding:15px 18px}
}

/* Ce qui apparaît au défilement reste discret, et disparaît si l'on préfère
   moins de mouvement. */
@media (prefers-reduced-motion:reduce){
  .acc-secteur,.acc-carte,.nav a::after,.faq__ico,.faq__a{transition:none}
}