/* =========================================================================
   MUSLIMA WORK — Refonte visuelle de la page d'accueil
   Une seule feuille, chargée après style.css, qui remplace les quatre
   feuilles de correctifs accumulées. style.css reste identique à la
   référence Python : rien n'y est modifié.

   Trois ancrages sombres seulement : le hero, la bande animée, le footer.
   Palette : prune très foncé, blanc, rose poudré très pâle, magenta d'accent.

   Sommaire
     0. Échelle d'espacement et règles communes
     1. Header
     2. Hero
     3. Bande animée des annonces
     4. Sections claires
     5. Statistiques
     6. Footer
   ========================================================================= */

/* =========================================================================
   0. ÉCHELLE D'ESPACEMENT ET RÈGLES COMMUNES
   ========================================================================= */
:root{
  --e-1:8px; --e-2:16px; --e-3:24px; --e-4:40px; --e-5:64px; --e-6:96px;
  --sec-y:var(--e-6);

  /* --- Palette Muslima Work ------------------------------------------------
     Les fonds foncés étaient presque noirs : ils reviennent au framboise et
     au bordeaux de l'identité. */
  --mw-framboise:#951753;
  --mw-bordeaux:#68153D;
  --mw-accent:#C92D78;
  --mw-rose:#F8E7EF;
  --mw-blanc:#FFFBFD;
  --plum:#321525;

  --mw-fonce:linear-gradient(115deg,#951753 0%,#7c1648 55%,#68153d 100%);

  /* --- Échelle des rayons ------------------------------------------------
     Une seule échelle pour tout le site. Ces variables sont déjà employées
     partout dans style.css : les redéfinir suffit, aucune surcharge au cas
     par cas n'est nécessaire.
       petits éléments et icônes   7px
       champs et boutons          11px
       cartes                     15px
       grands conteneurs          19px
       badges                     complètement arrondis  */
  /* Mêmes valeurs que style.css : un seul système d'angles pour le site. */
  --r-xs:4px;
  --r-md:6px;
  --r-card:4px;
  --r-lg:4px;
  --r-pill:6px;
}

/* --- Boutons : plus fins, moins hauts, sans ombre ------------------------
   La largeur suit le contenu ; seuls les boutons de formulaire (btn--block)
   restent pleine largeur. Le survol garde un mouvement d'un pixel. */
.btn{--h:44px;padding:0 20px;font-size:14.5px}
.btn--sm{--h:40px;padding:0 15px;font-size:13.5px}
.btn--lg{--h:48px;padding:0 24px;font-size:15px}
@media (hover:hover){
.btn--primary:hover,
.btn--secondary:hover,
.btn--ghost:hover{transform:translateY(-1px);box-shadow:none}
}
.btn:active{transform:none}

/* Les porte-icônes suivent le rayon des petits éléments, pas celui des champs. */
.pastille,.trust__ico,.m-card__ico,.mq__ini,.faq__ico,.panel__pause,.rec__mail-ico{
  border-radius:var(--r-xs);
}

/* --- Icônes de métier dans les vignettes de cartes -----------------------
   Les initiales de l'entreprise ont laissé la place à une icône de secteur.
   La vignette, elle, ne bouge pas : mêmes dimensions, même rayon, même
   place dans la carte. Seul le contenu change, et il faut lui donner une
   taille — les initiales, elles, se réglaient au font-size.
   L'icône occupe un peu moins de la moitié de la vignette, dans les trois
   tailles, pour que le rapport reste le même d'une carte à l'autre. */
.mq__ini{display:grid;place-items:center}
.mq__ini svg{width:21px;height:21px}
.pastille--lg svg{width:24px;height:24px}

/* Fond crème très clair, icône framboise. Le crème réchauffe la carte sans
   la teinter : le rose reste au titre, au badge et au bouton, là où il
   signale quelque chose. Cette classe ne vaut que pour les vignettes des
   cartes d'annonce — les pastilles de secteurs gardent leur rose. */
.pastille.ico-metier,
.mq__ini.ico-metier{
  background:var(--mw-avant-fond);
  border:1px solid var(--mw-avant-bord);
  color:var(--rose);
}

/* Le bouton de recherche avait une hauteur fixe : il suit l'échelle. */
.hsearch__submit{height:var(--h);padding:0 22px}
/* Le hero pose quatre filtres depuis que la région s'y trouve : le métier
   prend sa ligne, les trois menus et le bouton la suivante. Les points de
   rupture de style.css sont repris ici — sans quoi cette règle, chargée
   après, l'emporterait aussi sur mobile. */
.hsearch__grid{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.hsearch__grid > .field:first-child{grid-column:1 / -1}
@media (max-width:1080px){
  .hsearch__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hsearch__submit{grid-column:span 2}
}
@media (max-width:760px){
  .hsearch__grid{grid-template-columns:minmax(0,1fr)}
  .hsearch__submit{grid-column:auto}
}

/* Sur mobile, la cible tactile ne descend pas sous 46px. */
@media (max-width:760px){
  .btn{--h:47px}
  .btn--sm{--h:46px}
  .btn--lg{--h:50px}
  .hsearch__submit{height:var(--h)}
}

/* Sections claires : blanc cassé et rose poudré, en alternance. */
.sec--white,body{background:var(--mw-blanc)}
.sec--tint{background:var(--mw-rose)}

/* Accent des boutons, hors header où « Trouver un emploi » reste prune uni. */
.btn--primary{background:var(--mw-accent);background-image:none;color:#fff}
@media (hover:hover){
.btn--primary:hover{background:#D83584}
}

/* Un seul rayon pour toutes les cartes du site. */
.hsearch,.mq__card,.trust__item,.faq__item,.rec,.news,
.temo,.jcard,.dom,.m-card,.rec__panel{border-radius:var(--r-card)}

/* Plus d'ombre colorée : le relief vient du fond, pas d'un halo rose. */
.btn--primary{box-shadow:none}
@media (hover:hover){
.btn--primary:hover{box-shadow:none}
}

/* =========================================================================
   1. HEADER
   ========================================================================= */
/* Le bouton principal du hero n'existe qu'en mobile. */
.hero__cta-m{display:none}

/* --- Barre : blanc cassé légèrement rosé, trait rose poudré -------------- */
.header{
  background:#FFFAFC;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--mw-rose);
}
.header.is-stuck{box-shadow:0 1px 4px rgba(50,23,42,.05)}
.header__in{height:78px;align-items:center}

/* --- Bloc de marque -----------------------------------------------------
   Le monogramme reste l'asset d'origine. Le nom est écrit en vrai texte avec
   la police du site : il reste net à toutes les tailles, sans image agrandie.
   Même bloc dans le header et le footer. */
.marque{display:inline-flex;align-items:center;gap:11px}
.marque .marque__mono{display:block;width:40px;height:40px;flex:none}
/* L'arrondi du monogramme n'est plus ici : il est dans le SVG du pack
   officiel, posé sur le rectangle de fond (215 sur 1024, soit 21 %). Un
   « border-radius » par-dessus l'aurait rogné une seconde fois, et les deux
   rayons n'auraient pas coïncidé. Voir components/Marque.tsx. */
.marque__mot{
  font-size:25px;font-weight:600;line-height:1;
  letter-spacing:-.035em;
  color:var(--plum);
  white-space:nowrap;
}
.marque__mot--clair{color:#fff}

/* La capsule rose disparaît, dans le header comme dans la barre des fiches :
   le monogramme porte déjà la couleur. */
.header__logo,
.ofbar__logo{padding:0;background:none;box-shadow:none;border-radius:0;max-width:none}

/* Barre des fiches : boutons à 42px, comme les autres cibles tactiles. */
.ofbar__in{grid-template-columns:42px minmax(0,1fr) 42px}
.ofbar__back,.ofbar__share{width:42px;height:42px;border-radius:var(--r-md)}

/* La place est comptée dans cette barre : le bloc de marque y est resserré. */
.ofbar__logo.marque{gap:8px}
.ofbar__logo .marque__mono{width:28px;height:28px}
.ofbar__logo .marque__mot{font-size:18px}

/* Navigation en prune, mieux contrastée ; le survol pose un fond rose très
   discret et le trait magenta déjà prévu par style.css. */
.nav a{color:var(--plum);font-weight:500}
@media (hover:hover){
.nav a:hover{color:var(--plum);background:rgba(248,231,239,.7)}
}
.nav a::after{background:var(--mw-accent)}

/* « Publier une annonce » : contour prune. */
.header__cta .btn--secondary{background:transparent;border-color:var(--plum);color:var(--plum)}
@media (hover:hover){
.header__cta .btn--secondary:hover{background:transparent;border-color:var(--plum);transform:none}
}

/* « Trouver un emploi » : framboise de la palette. */
.header__cta .btn--primary{background:var(--mw-framboise);background-image:none;color:#fff;box-shadow:none}
@media (hover:hover){
.header__cta .btn--primary:hover{background:var(--mw-accent);box-shadow:none;transform:none}
}
.header__cta .btn--shine::after{display:none}   /* pas de brillance sur un aplat */

@media (max-width:760px){
  /* Le header partage exactement le conteneur du reste de la page. */
  .header__in{height:66px;gap:12px;justify-content:space-between}
  /* Bloc de marque resserré, sans rien écraser. */
  .marque{gap:10px}
  .marque .marque__mono{width:35px;height:35px}
  .marque__mot{font-size:21px}

  .header__cta{margin-left:auto;gap:0}
  .burger{
    width:44px;height:44px;flex:none;
    border:0;background:var(--bg-tint);color:var(--plum);
    border-radius:var(--r-md);box-shadow:none;
  }
  .burger svg{display:block}   /* sinon la ligne de base décale l'icône */

  /* Menu déroulant : style.css pose .mmenu{display:none} sans jamais le
     rétablir en mobile — le bouton ouvrait un menu invisible. */
  .mmenu{
    display:block;
    padding:var(--e-1) 20px var(--e-3);
    background:var(--bg-white);
    border-top:1px solid var(--line);
  }
  .mmenu[hidden]{display:none}
  .mmenu a:not(.btn){padding:14px 2px}
  .mmenu__cta{margin-top:var(--e-2)}
  /* « .mmenu a » imposait aux boutons display:block, un texte prune et un
     alignement à gauche : on leur rend leur apparence habituelle. */
  .mmenu a.btn{display:flex;height:var(--h);padding:0 24px;justify-content:center;font-size:15px;font-weight:600}
  .mmenu a.btn--primary{color:#fff}
  .mmenu a.btn--secondary{color:var(--plum)}
}

/* Sans prise en charge des masques, on revient au logo d'origine. */
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  @media (max-width:760px){
    .header__typo{display:none}
    .header__logo img{display:block;height:18px}
    .header__logo{background:var(--grad-rose);padding:8px 12px;border-radius:var(--r-md)}
  }
}

/* =========================================================================
   2. HERO — le premier des trois blocs sombres
   ========================================================================= */
.hero{
  padding:calc(76px + var(--e-5)) 0 var(--e-5);
  background:
    radial-gradient(54% 58% at 82% 32%,rgba(255,255,255,.10),transparent 66%),
    var(--mw-fonce);
}

/* « son hijab » : une couleur pleine. Le texte masqué par un dégradé
   (background-clip:text) casse dès qu'une règle touche au fond — le mot
   disparaissait ou virait au rectangle rose. */
.hero h1 .dark{color:#fff}
.hero h1 .grad{
  background:none;
  color:#FFA6CF;
  -webkit-text-fill-color:#FFA6CF;
}

.hero__lede{color:rgba(255,255,255,.80)}
.hero__badge{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.88);
}
.hero__badge .n{color:#fff}
.hero__proof-txt{color:rgba(255,255,255,.74)}
.hero__proof-txt b{color:#fff}
.hero__proof .btn-link{color:#fff}
.hero .avatars img{border-color:rgba(255,255,255,.9)}

/* Le hero : une seule ombre, et pas de cadre dans le cadre. */
.hero .hsearch{background:var(--bg-white);border-color:transparent;box-shadow:none}

/* =========================================================================
   3. BANDE ANIMÉE — bloc clair
   Elle suivait immédiatement le hero foncé : deux grands aplats sombres
   d'affilée. Elle passe au rose poudré très pâle, et la respiration en haut
   marque la sortie du hero sans laisser un grand vide.
   ========================================================================= */
.mq{padding:80px 0 var(--e-5);background:var(--mw-rose)}
.mq::before{display:none}          /* plus de halo sombre */
.mq__head{margin-bottom:var(--e-3)}
.mq h2{color:var(--plum)}
.mq__hl{color:var(--mw-accent)}    /* « domaines » en magenta */
.mq__p{color:var(--ink-2)}
.mq__pause{
  background:var(--bg-white);
  border-color:var(--line-2);
  color:var(--plum);
}
@media (hover:hover){
.mq__pause:hover{background:var(--bg-white);border-color:var(--plum);color:var(--plum)}
}
/* Une seule rangée : la seconde faisait doublon et allongeait la section. */
.mq__row:last-child{display:none}
.mq__wrap{row-gap:0}
.mq__card{
  width:460px;min-width:460px;
  background:var(--bg-white);
  border:1px solid var(--line);
  box-shadow:none;
}
.mq__ini{border:0}
/* Sur fond clair, les badges de la bande sont tous prune. « Nouveau » n'en
   est plus un : c'est un point et un mot, et il garde son dégradé. */
.mq__card .badge{background:var(--plum);background-image:none;border:0;color:#fff}

/* =========================================================================
   4. SECTIONS CLAIRES
   ========================================================================= */
/* « Pourquoi Muslima Work » passe au clair : tout son habillage était prévu
   pour un fond sombre. */
.sec--white .mission__n::before{display:none}
.mission__n > span:first-child{
  background:none;
  color:var(--rose);
  -webkit-text-fill-color:var(--rose);
}
.mission__nl{color:var(--ink-2)}
.m-card{background:var(--bg-white);border:var(--card-bd)}
.m-card__ico{background:var(--rose-pale);color:var(--rose)}
.m-card h3{color:var(--plum)}
.m-card p{color:var(--ink-2)}

/* L'espace recruteur suit les témoignages : il ne doit plus rivaliser avec
   le hero. Même dégradé d'identité, disposition inchangée. */
.rec{background:var(--mw-fonce);box-shadow:none}
.rec__panel{box-shadow:none}

/* Moins de doubles bordures sur les pictogrammes décoratifs. */
.dom .pastille{border:0}

/* =========================================================================
   5. STATISTIQUES
   ========================================================================= */
.trust__l--sm{display:none}
.mq__pause-t{display:none}

@media (min-width:761px){
  .trust__item{border-left-color:rgba(255,255,255,.16)}
  .trust__n,.trust__item .strong{color:#fff}
  .trust__l{color:rgba(255,255,255,.72)}
  /* Le pictogramme perd son cadre : moins de petits cadres partout. */
  .trust__ico{background:transparent;border:0;color:#FFB3D4}
}

/* =========================================================================
   6. FOOTER — le troisième et dernier bloc sombre
   ========================================================================= */
.footer{background:var(--mw-fonce)}

/* =========================================================================
   MOBILE — disposition propre, pas le desktop empilé
   ========================================================================= */
@media (max-width:760px){
  :root{--sec-y:var(--e-5)}

  /* --- Hero : ordre mobile ------------------------------------------------
     badge, titre, introduction, témoignages, annonce, bouton, recherche.
     display:contents fait remonter les enfants du bloc texte au niveau de la
     colonne : ils peuvent alors être ordonnés avec la carte d'annonce. */
  .hero{margin-top:-66px;padding:calc(66px + var(--e-4)) 0 var(--e-4)}
  .hero__top{display:flex;flex-direction:column;gap:0}
  .hero__txt{display:contents}
  .hero__badge{order:1;margin-bottom:0}
  .hero h1{order:2;margin-top:var(--e-2)}
  .hero__lede{order:3;margin-top:var(--e-2)}
  .hero__proof{order:4;margin-top:var(--e-3)}
  .hero__visual{order:5;margin-top:var(--e-4)}
  .hero__cta-m{order:6;margin-top:var(--e-3)}
  .hsearch{margin-top:var(--e-4)}

  /* Titre : 38px à 320px, environ 42px au-delà. */
  .hero h1{
    font-size:clamp(38px,calc(4.6vw + 24.7px),42px);
    line-height:1;
    letter-spacing:-.022em;
  }
  /* overflow:hidden sert à l'animation d'entrée : sans marge, le jambage du
     « j » de hijab et du « p » de possible serait coupé. */
  .hero h1 .line{padding-block:.16em;margin-block:-.16em}
  .hero__lede{font-size:16.5px;line-height:1.6}
  .hero__cta-m{display:flex;width:100%}

  /* Halo resserré pour un écran étroit. */
  .hero{
    background:
      radial-gradient(72% 26% at 84% 40%,rgba(255,255,255,.08),transparent 68%),
      var(--mw-fonce);
  }

  /* --- Statistiques : quatre cartes, deux colonnes ---------------------- */
  .trust__card{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:1fr;gap:12px;margin-top:var(--e-4);padding:0;
  }
  .trust__item,
  .trust__item:nth-child(odd),
  .trust__item:nth-child(even),
  .trust__item:nth-child(n+3){
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-1);
    padding:14px 12px;border:1px solid var(--line);
    background:var(--bg-white);box-shadow:none;
  }
  .trust__ico{width:32px;height:32px;background:transparent;border:0;color:var(--rose)}
  .trust__ico svg{width:18px;height:18px}
  /* Deux lignes réservées à la valeur : le libellé tombe au même endroit
     dans les quatre cartes. */
  .trust__n{font-size:17px;line-height:1.25}
  .trust__item .strong{font-size:15px;line-height:1.42}
  .trust__n,.trust__item .strong{display:block;min-height:43px}
  .trust__l{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
  .trust__l--lg{display:none}
  .trust__l--sm{display:inline}

  /* Curseur simulé du bloc recruteur : décoratif, et il débordait de sa
     section sur un écran étroit. */
  .demo__cursor{display:none}

  /* --- Bande animée ----------------------------------------------------- */
  .mq{padding:var(--e-5) 0}
  .mq__head{grid-template-columns:minmax(0,1fr) auto;gap:14px;margin-bottom:var(--e-3);align-items:start}
  .mq h2{font-size:26px;line-height:1.2}
  .mq__p{margin-top:var(--e-1);font-size:14.5px;line-height:1.55}

  .mq__pause{
    width:auto;height:40px;padding:0 14px;gap:7px;
    display:inline-flex;align-items:center;border-radius:var(--r-pill);
    font-size:13px;font-weight:600;white-space:nowrap;
  }
  .mq__pause svg{width:13px;height:13px;display:block}
  /* Une seule icône à la fois : celle de l'état courant. */
  .mq__pause .ic-pause{display:grid;place-items:center}
  .mq__pause .ic-play{display:none}
  .mq__pause[aria-pressed="true"] .ic-pause{display:none}
  .mq__pause[aria-pressed="true"] .ic-play{display:grid;place-items:center}
  .mq__pause .mq__pause-t{display:inline}
  .mq__pause .mq__pause-t--play{display:none}
  .mq__pause[aria-pressed="true"] .mq__pause-t--pause{display:none}
  .mq__pause[aria-pressed="true"] .mq__pause-t--play{display:inline}
  @media (max-width:340px){
    .mq__head{gap:10px}
    .mq__pause{height:40px;padding:0 10px;gap:5px;font-size:11.5px}
    .mq__pause svg{width:12px;height:12px}
  }

  /* La première carte part de la marge de page : jamais coupée au départ.
     Le retrait est porté par la rangée, pas par la piste, pour ne pas
     fausser la boucle. */
  .mq__row{padding-left:20px}
  .mq__track{gap:12px}
  .mq__wrap{
    /* Le fondu de gauche s'arrête juste avant la marge de page : la première
       carte est entière au départ, et celles qui sortent s'effacent au lieu
       d'être tranchées net. */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 78%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 78%,transparent 100%);
  }
  .mq__card{
    display:flex;align-items:center;gap:12px;
    width:min(82vw,320px);min-width:0;height:auto;min-height:88px;padding:14px;
  }
  .mq__ini{flex:none;width:42px;height:42px}
  .mq__ini svg{width:19px;height:19px}
  .mq__txt{flex:1 1 auto;min-width:0}
  .mq__t{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    white-space:normal;overflow:hidden;font-size:14.5px;line-height:1.25;
  }
  .mq__s{margin-top:4px;font-size:12.5px}
  .mq__card .badge{flex:none;align-self:center}
  .mq__arw{display:none}   /* la carte entière est déjà cliquable */
}

/* Mouvement réduit : plus rien ne bouge tout seul. */
@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none !important}
  .mq::before{animation:none !important}
}

/* =========================================================================
   7. NEWSLETTER DANS LE PIED DE PAGE
   Elle formait une section blanche à part, précédée d'un grand vide. Elle
   ouvre désormais le footer, sur le même dégradé, séparée du reste par un
   simple filet.
   ========================================================================= */
.footer .marque{margin-bottom:14px}
.footer .marque .marque__mono{width:36px;height:36px}
.footer .marque__mot{font-size:22px}

.footer__news{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:var(--e-5);
  align-items:start;
  padding-bottom:var(--e-4);
  margin-bottom:var(--e-4);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.footer__news h2{color:#fff;font-size:30px;line-height:1.2;letter-spacing:-.02em}
.footer__news-txt p{margin-top:10px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.76)}

.footer__news-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.footer__news .input{
  background:var(--bg-white);
  border-color:transparent;
  color:var(--plum);
}
.footer__news .input::placeholder{color:var(--ink-3)}
.footer__news .btn--primary{background:var(--mw-accent);box-shadow:none}
@media (hover:hover){
.footer__news .btn--primary:hover{background:#D83584;transform:none}
}

.footer__news-legal{
  margin-top:12px;
  font-size:12.5px;line-height:1.5;
  color:rgba(255,255,255,.62);
}
.footer__news-legal a{color:rgba(255,255,255,.85);text-decoration:underline}

@media (max-width:760px){
  /* Titre, champs et bouton empilés sur toute la largeur. */
  .footer .marque{margin-bottom:14px}
.footer .marque .marque__mono{width:36px;height:36px}
.footer .marque__mot{font-size:22px}

.footer__news{
    grid-template-columns:minmax(0,1fr);
    gap:var(--e-3);
    padding-bottom:var(--e-3);
    margin-bottom:var(--e-3);
  }
  .footer__news h2{font-size:24px}
  .footer__news-row{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   8. FAQ — éditoriale, sans cartes
   Les questions formaient des cartes blanches arrondies, et l'ouverture
   posait un contour rose. Elles deviennent de simples lignes séparées d'un
   filet, sur un fond blanc cassé.
   ========================================================================= */
.sec--faq{background:#FFFDFC}
.faq{padding:var(--e-5) 0}
.faq__grid{gap:var(--e-5)}
.faq__intro{top:96px}
.faq__lede{font-size:15.5px}

/* « Nous contacter » : un lien, plus un bouton. */
.faq__lien{margin-top:18px;color:var(--mw-accent);font-weight:600}
.faq__note{margin-top:14px}
.faq__note a{color:var(--mw-accent)}

.faq__list{display:block}
.faq__item,
.faq__item:hover,
.faq__item.is-open{
  background:transparent;
  border:0;
  border-top:1px solid rgba(50,21,37,.10);
  border-radius:0;
  box-shadow:none;
}
.faq__item:first-child{border-top:0}

.faq__q{padding:20px 0;font-size:16.5px;gap:24px}
.faq__item.is-open .faq__q{padding-bottom:2px}

/* L'icône garde le carré qui pivote en losange à l'ouverture : c'est le
   geste d'origine, conservé tel quel. Seule sa couleur suit la palette. */
.faq__item.is-open .faq__ico{background:var(--mw-accent);border-color:transparent;color:#fff}

.faq__a p{padding:0 0 20px;margin-top:0;max-width:70ch}

@media (max-width:900px){
  /* Le titre passe au-dessus des questions. */
  .faq__grid{grid-template-columns:minmax(0,1fr);gap:var(--e-3)}
  .faq__intro{position:static}
}

/* =========================================================================
   9. PIED DE PAGE — prune uni, structuré et compact
   ========================================================================= */
.footer{
  background:#4F1834;
  border-radius:0;                 /* bord supérieur droit, pleine largeur */
  padding:var(--e-4) 0 0;
  overflow:visible;
}
.footer::before,
.footer::after{display:none}       /* filet dégradé et halo supprimés */

/* --- Newsletter : une seule rangée compacte ----------------------------- */
.footer__news{
  grid-template-columns:minmax(0,1fr) minmax(0,540px);
  gap:var(--e-4);
  align-items:center;
  padding-bottom:var(--e-3);
  margin-bottom:var(--e-3);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer__news h2{font-size:21px;line-height:1.3}
.footer__news-txt p{margin-top:5px;font-size:14px;color:rgba(255,255,255,.7)}

/* Prénom, e-mail et bouton sur la même ligne. */
.footer__news-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px}
.footer__news-row{display:contents}
.footer__news .input{height:46px;border-radius:var(--r-md)}
.footer__news .btn{width:auto;height:46px;padding:0 22px;font-size:14.5px}
.footer__news-legal{grid-column:1 / -1;margin-top:2px;font-size:12px;color:rgba(255,255,255,.55)}

/* --- Identité et liens --------------------------------------------------- */
.footer__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--e-4);padding-bottom:var(--e-4)}
.footer__brand p{color:rgba(255,255,255,.7);font-size:14.5px}
.footer h4{color:rgba(255,255,255,.55)}
.footer li a{color:rgba(255,255,255,.7)}
@media (hover:hover){
.footer li a:hover{color:#fff}
}
.footer__bar{padding:18px 0;font-size:13px;color:rgba(255,255,255,.5);border-top-color:rgba(255,255,255,.12)}

@media (max-width:920px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4)}
}

@media (max-width:760px){
  .footer{padding-top:var(--e-3)}
  .footer__news{grid-template-columns:minmax(0,1fr);gap:var(--e-3);align-items:start}
  .footer__news-form{grid-template-columns:minmax(0,1fr)}
  .footer__news .btn{width:100%}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:var(--e-3)}
}

/* =========================================================================
   7. PAGE « TOUTES LES ANNONCES »
   Aucune direction nouvelle : la carte, les badges, les champs et les
   boutons sont ceux de l'accueil. Ce bloc ne pose que ce qui n'existait
   pas encore — la barre de filtres hors du hero, la pagination et
   l'écran vide.
   ========================================================================= */
.ann__head{margin-bottom:var(--e-3)}
.ann__head h1{font-size:clamp(30px,4vw,44px);line-height:1.12;color:var(--plum)}

/* La barre de filtres reprend la carte de recherche du hero, sans son
   animation d'entrée : ici elle n'arrive pas, elle est déjà là. */
.ann-filtres{padding:24px;border-radius:var(--r-lg);border-color:var(--line-2);box-shadow:var(--sh-key)}

/* Quatre temps plutôt qu'une file de menus : le métier, ce qu'on cherche, où,
   et l'action. Chaque ligne se répartit d'elle-même — la ligne du lieu porte
   deux, trois ou quatre menus selon ce que la visiteuse a déjà choisi, et
   « Tous les secteurs » n'est jamais coupé au milieu. */
.ann-filtres__ligne{
  display:grid;gap:16px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.ann-filtres__ligne + .ann-filtres__ligne{margin-top:16px}
/* Le lieu forme un groupe : un filet le sépare de ce qui précède. */
.ann-filtres__ligne--lieu{padding-top:18px;border-top:1px dashed var(--line)}

.ann-filtres__actions{
  display:flex;align-items:center;gap:22px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
}
.ann-filtres__ok{height:var(--h,54px);padding:0 26px;white-space:nowrap}

/* Le décompte : la réponse à la recherche, avant les cartes. */
.ann__compte{margin:var(--e-3) 0 var(--e-2);font-size:15px;color:var(--ink-3)}
.ann__compte strong{color:var(--plum)}

/* --- Pagination ---------------------------------------------------------- */
.ann-pages{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:var(--e-4);padding-top:var(--e-3);border-top:1px solid var(--line);
}
.ann-pages__etat{font-size:14.5px;font-weight:600;color:var(--plum)}

/* --- Aucun résultat ------------------------------------------------------ */
.ann__vide{
  display:grid;justify-items:center;gap:12px;
  padding:var(--e-4) var(--e-3);text-align:center;border-color:var(--line-2);
}
.ann__vide-t{margin:0;font-size:19px;font-weight:600;color:var(--plum)}
.ann__vide-p{margin:0;max-width:46ch;font-size:15px;line-height:1.6;color:var(--ink-3)}
.ann__vide .btn{margin-top:8px}

@media (max-width:760px){
  .ann-filtres{padding:18px}
  .ann-filtres__ligne{grid-template-columns:minmax(0,1fr)}
  .ann-filtres__actions{flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .ann-filtres__ok{width:100%}
  .ann-pages{flex-direction:column;align-items:stretch;text-align:center}
  .ann-pages .btn{width:100%}
}
/* Le mot qui remplace les menus de lieu quand le mode n'en a pas. */
.ann-filtres__note{
  margin:18px 0 0;padding-top:18px;border-top:1px dashed var(--line);
  font-size:14.5px;line-height:1.55;color:var(--ink-3);
}

/* =========================================================================
   8. PROPOSER UNE ANNONCE
   Le formulaire d'une entreprise. Même carte, mêmes champs, mêmes boutons
   que le reste du site : ce bloc ne pose que ce qui n'existait pas — les
   étapes du haut, les options à cocher, et l'écran de confirmation.
   ========================================================================= */
.soum-page__head{margin-bottom:var(--e-3)}
.soum-page__head h1{font-size:clamp(30px,4vw,44px);line-height:1.12;color:var(--plum)}

/* Les trois temps du parcours, dits avant de commencer. */
.soum-page__etapes{
  display:grid;gap:16px;margin:0 0 var(--e-3);padding:0;list-style:none;
  grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:etape;
}
.soum-page__etape{display:grid;gap:6px;padding:22px;border-color:var(--line-2)}
.soum-page__n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--mw-rose);color:var(--mw-framboise);font-size:14px;font-weight:700;
}
.soum-page__et{font-size:16px;font-weight:600;color:var(--plum);margin-top:4px}
.soum-page__ep{font-size:14.5px;line-height:1.6;color:var(--ink-3)}

.soum-page__note{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 var(--e-3);font-size:14.5px;line-height:1.6;color:var(--ink-3);
}
.soum-page__note--fin{margin:var(--e-3) 0 0}
.soum-page__ico{flex:none;width:18px;height:18px;color:var(--mw-framboise)}
.soum-page__ico svg{width:18px;height:18px}

/* --- Le formulaire ------------------------------------------------------- */
.soum{display:grid;gap:20px}
.soum__bloc{padding:26px;border-color:var(--line-2)}
/* Le bloc du hijab : le seul mis en avant, parce qu'il porte la question
   qui distingue Muslima Work de n'importe quel site d'annonces. */
.soum__bloc--cle{border-color:#F0D3E3;background:#FFFDFE}
.soum__t{margin:0 0 6px;font-size:20px;line-height:1.3;color:var(--plum)}
.soum__p{margin:0 0 18px;font-size:14.5px;line-height:1.65;color:var(--ink-3)}
.soum__grille{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.soum__pleine{grid-column:1 / -1}
/* L'espacement ne vaut qu'entre les blocs de premier niveau : appliqué aussi
   dans la grille, il décalait d'une ligne le champ de droite. */
.soum__bloc > .field + .field,
.soum__bloc > .field + .soum__grille,
.soum__bloc > .soum__grille + .field,
.soum__bloc > .soum__grille + .soum__grille,
.soum__bloc > .soum__t + .field,
.soum__bloc > .soum__t + .soum__grille,
.soum__bloc > .soum__t + .soum__fieldset{margin-top:16px}
.soum__zone{height:auto;padding:12px 14px;line-height:1.6;resize:vertical}
.soum__aide{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.soum__req{color:var(--mw-framboise)}
.soum__opt{font-weight:400;font-size:13px;color:var(--ink-3)}

/* Le champ piège n'est pas « display:none » : certains robots ignorent ce
   qui est masqué ainsi. Il est sorti de l'écran, et retiré du parcours. */
.soum__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Les choix à cocher -------------------------------------------------- */
.soum__fieldset{margin:0;padding:0;border:0}
.soum__legende{
  padding:0;margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.4;color:var(--plum);
}
.soum__choix{display:grid;gap:12px}
/* Les cartes de choix vivent maintenant en section 10, dans la nouvelle
   direction. Ce qui restait ici les mettait en deux colonnes — « grid-column:2 »
   sur le paragraphe —, si bien que le titre se repliait sur trois lignes
   étroites et que la description lui passait par-dessus. Une règle morte qui
   décide encore est pire qu'une règle absente : elle est retirée.
   Ces classes ne servent qu'au formulaire de dépôt, rien d'autre n'en dépend. */

.soum__consent{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:14.5px;line-height:1.65;color:var(--ink-3);
}
.soum__consent input{margin-top:3px;accent-color:var(--mw-accent);width:18px;height:18px}
.soum__envoi{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
}
.soum__envoi .soum__aide{margin:0}

/* --- Après l'envoi ------------------------------------------------------- */


@media (max-width:920px){
  .soum-page__etapes{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  .soum__bloc{padding:20px}
  .soum__grille{grid-template-columns:minmax(0,1fr)}
  .soum__envoi{flex-direction:column;align-items:stretch;text-align:center}
  .soum__envoi .btn{width:100%}
  
  
}

/* =========================================================================
   9. LES ÉLÉMENTS D'UNE CANDIDATURE
   Ce que l'entreprise demande dans le formulaire de proposition, et les
   champs que la candidate remplit. Mêmes cartes, mêmes champs que le reste.
   ========================================================================= */
.soum__element{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:11px 0;border-top:1px solid var(--line);
}
.soum__element:first-of-type{border-top:0}
.soum__case{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--plum);font-weight:600}
.soum__case--petit{font-weight:400;font-size:14px;color:var(--ink-3)}
.soum__element-reglages{display:flex;align-items:center;gap:14px;margin-left:auto}
.soum__element-fixe{font-size:14px;color:var(--ink-3)}
.input--court{height:42px;max-width:200px}

/* --- Le formulaire de candidature ---------------------------------------- */
.cand-aide--alerte{color:#B4245A;font-weight:600}
.cand-total{
  margin:4px 0 0;padding:12px 14px;border-radius:var(--r-md);
  background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);
  font-size:14px;line-height:1.6;color:var(--mw-info-texte);
}

@media (max-width:760px){
  .soum__element-reglages{margin-left:0;width:100%}
}

/* =========================================================================
   10. DÉPOSER UNE ANNONCE — DIRECTION ÉDITORIALE

   Du blanc, des filets, de la typographie. Le bordeaux et le rose de la
   marque n'interviennent qu'à quatre endroits : l'étape en cours du
   sommaire, le focus d'un champ, le choix retenu, le bouton d'action. Partout
   ailleurs, du gris chaud et du prune.

   Presque aucune ombre. Aucun dégradé de fond, aucun halo, aucune pilule.
   Ce qui structure la page, ce sont des lignes et des blancs.
   ========================================================================= */
/* Le fond, porté par la page entière plutôt que par la section : il commence
   au premier pixel, sous la barre du site, et rien ne le coupe.

   Il est ivoire, pas rose. Le rose du site tenait tout le haut de l'écran et
   la barre avait l'air posée sur une grande surface colorée ; ici c'est un
   gris chaud très clair, assez sourd pour ne pas se voir et assez marqué pour
   que la carte blanche s'en détache. La seule chose qui porte encore la
   couleur, en haut, c'est la plaque de verre de la barre — et elle flotte.

   La barre, elle, n'a plus de fond du tout sur cette page : le sien, crème,
   aurait tranché sur celui-ci au pixel où elle s'arrête. */
/* La page de reprise porte la même classe et garde son fond blanc : ce qui
   suit ne vaut que pour le dépôt. */
.soum-page{background:#fff}
body:has(.soum-page--depot){background:#FAF8F9}
/* Il y avait ici « body:has(.soum-page--depot) .header{background:transparent} ».
   Même raison que pour les pages juridiques : la règle l'emportait sur la
   règle globale et vidait la barre. Le fond de la page de dépôt vient du
   jeton « --fond-publier ». Voir header.css. */
/* Deux classes, pour passer devant la règle de padding de la section 12,
   écrite plus bas dans ce fichier. */
.soum-page.soum-page--depot{background:transparent;padding:0 0 var(--e-5)}
.soum-page > .wrap{width:min(1180px,calc(100% - 48px))}

/* --- La carte du dépôt ---------------------------------------------------
   Une seule plaque blanche : l'introduction en tête, le formulaire dessous.
   Son rayon est celui de la barre du site (12 px, voir header.css) — deux
   plaques blanches sur la même page, deux fois le même angle.
   L'ombre est presque nulle : elle détache la carte de l'ivoire, elle ne la
   fait pas flotter. */
.soum-carte{
  /* La barre porte déjà 14 px de rembourrage sous sa plaque de verre : la
     marge d'ici s'y ajoute. Quarante-quatre pixels séparent donc le bas de la
     plaque du haut de la carte sur un écran d'ordinateur, vingt-huit sur un
     téléphone — assez pour que la carte se pose sous la barre au lieu de s'y
     accrocher. */
  margin:30px 0 0;
  background:#fff;border:1px solid #F1E8ED;border-radius:12px;
  box-shadow:0 1px 2px rgba(50,21,37,.03), 0 14px 34px -30px rgba(50,21,37,.2);
}

/* --- L'introduction, en tête de la carte ---------------------------------
   Elle dit ce qu'on propose et ce qu'on garantit, en moins de deux cents
   pixels. Ce n'était pas une introduction mais une page d'accueil : un titre
   de cinquante pixels, un paragraphe au large et trois garanties dans leur
   propre carte, le tout sur une bande de couleur. Il n'en reste que le
   nécessaire, et un filet pour séparer du formulaire. */
.soum-hero{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:44px;align-items:center;
  padding:34px 48px 30px;
  border-bottom:1px solid #F3ECEF;
}
.soum-hero h1{
  margin:0;max-width:24ch;
  font-size:clamp(24px,2.2vw,29px);line-height:1.16;letter-spacing:-.022em;
  color:var(--plum);
}
.soum-hero__p{
  margin:9px 0 0;max-width:62ch;
  font-size:14.5px;line-height:1.55;color:#6B5C64;
}
/* Les trois garanties : trois lignes, aucun cadre. Elles accompagnent le
   titre, elles ne lui répondent pas. */
.soum-hero__gages{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;justify-items:start;
}
.soum-hero__gages li{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;
  font-size:14px;line-height:1.4;color:#4A3A42;
}
/* La coche seule, en rose de la marque : pas de pastille pleine. Sur trois
   lignes sans cadre, trois disques foncés pesaient plus que le texte. */
.soum-hero__gages svg{
  width:16px;height:16px;flex:none;color:var(--mw-accent);stroke-width:2.6;
}

/* --- Le corps : une carte, sommaire à gauche, étape à droite --------------
   Le formulaire était posé à plat sur la page, loin sous le hero : il avait
   l'air d'une section secondaire. Il est maintenant dans une carte blanche
   qui remonte de 64 px sur la bande rose — les deux parties se tiennent, et
   c'est la carte qu'on voit en arrivant.
   Le rayon est celui de la barre du site (12 px, voir header.css) : deux
   plaques blanches sur la même page, deux fois le même angle. */
.soum{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:0 72px;align-items:start;
  padding:var(--e-4) 0;
}
/* Le formulaire de reprise n'a pas de sommaire : sans cette ligne, il
   héritait des deux colonnes du dépôt et une rubrique sur deux tombait dans
   la colonne de 230 px, texte coupé. Une seule colonne, blocs empilés. */
.soum--reprise{grid-template-columns:minmax(0,1fr);gap:20px}
/* Le corps de la carte : le sommaire à gauche, l'étape à droite. La plaque
   blanche, elle, est portée par « .soum-carte » — le formulaire n'est plus
   une carte posée sur la page, il est ce qu'il y a dans celle-ci.
   Ces règles ne valent que pour ce formulaire-ci : celui de reprise partage
   les classes des champs sans avoir ni étapes ni carte. */
.soum--depot{
  grid-template-columns:224px minmax(0,1fr);
  gap:0 56px;
  margin:0;
  padding:34px 48px 44px;
}
/* Chaque colonne dit où elle va. Le placement automatique déduisait la
   position du rang de l'enfant : il suffisait qu'un bloc s'ajoute avant le
   sommaire — une alerte, un message — pour que tout glisse d'une cellule et
   que le formulaire hérite des 230 px du sommaire. */
.soum__colonne{grid-column:1;position:sticky;top:96px;min-width:0;padding-top:4px}
.soum__panneau{grid-column:2;min-width:0}

/* Le sommaire, comme celui d'un dossier. */
.soum-somm__compact{display:none}
.soum-somm__liste{list-style:none;margin:0;padding:0;display:grid}
.soum-somm__bouton{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  width:100%;padding:11px 0 11px 18px;margin-left:-1px;
  background:none;border:0;border-left:1px solid #ECE7EA;
  font:inherit;text-align:left;cursor:pointer;
  transition:border-color 200ms ease,color 200ms ease;
}
.soum-somm__bouton:disabled{cursor:default}
.soum-somm__n{
  font-size:12px;font-weight:600;letter-spacing:.04em;color:#B4A8AE;
  font-variant-numeric:tabular-nums;line-height:1.5;
}
.soum-somm__titre{font-size:14.5px;line-height:1.5;color:#6E646B}
.est-faite .soum-somm__n{color:var(--mw-bordeaux)}
.est-faite .soum-somm__titre{color:#5F5158}
.est-ici .soum-somm__bouton{
  border-left:2px solid var(--mw-bordeaux);padding-left:17px;
  background:linear-gradient(90deg,var(--mw-rose),transparent 82%);
}
.est-ici .soum-somm__n,.est-ici .soum-somm__titre{color:var(--mw-bordeaux);font-weight:600}
.est-a-venir .soum-somm__titre,.est-a-venir .soum-somm__n{color:#7A6F78}
@media (hover:hover){
.soum-somm__bouton:not(:disabled):hover .soum-somm__titre{color:var(--plum)}
}
.soum-somm__bouton:focus-visible{outline:2px solid var(--mw-bordeaux);outline-offset:2px}

/* --- La jauge, en tête du formulaire -------------------------------------
   Un cinquième par étape. Elle avance et recule avec la navigation, sans
   rechargement : c'est la même valeur d'état qui décide de l'étape affichée
   et de la largeur du trait. */
.soum-jauge{display:grid;gap:10px;margin-bottom:26px}
.soum-jauge__mention{
  margin:0;font-size:14px;font-weight:600;color:#5F5158;
}
.soum-jauge__rail{
  display:block;height:5px;border-radius:4px;background:#F3EDF0;overflow:hidden;
}
.soum-jauge__rail i{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--mw-bordeaux),var(--mw-accent));
  transition:width 480ms cubic-bezier(.22,1,.36,1);
}

/* --- Une étape ----------------------------------------------------------- */
.soum-etape{display:grid;gap:26px;outline:none}
.soum-etape[hidden]{display:none}
.soum-etape--entre{animation:soum-entre 240ms cubic-bezier(.22,1,.36,1)}
@keyframes soum-entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Titre et description d'une étape : 12 px, la respiration commune des
   en-têtes du site (titre → description 12–16 px, puis 24–32 px avant les
   champs — ici le « gap » de 26 px de l'étape). */
.soum-etape__tete{display:grid;gap:12px}
.soum-etape__t{
  margin:0;font-size:clamp(21px,2vw,26px);line-height:1.2;letter-spacing:-.02em;
  color:var(--plum);
}
.soum-etape__p{margin:0;max-width:58ch;font-size:14.5px;line-height:1.6;color:#6B5C64}

/* --- Les groupes de champs ------------------------------------------------
   La section 8 donnait à chaque bloc 26 px de rembourrage et posait des
   marges entre ses enfants : il y était une carte. Ici les champs se suivent
   dans une seule carte, celle du formulaire — le rembourrage creusait le
   bloc, et les marges s'ajoutaient au « gap », si bien qu'un même écart
   valait tantôt 18 px, tantôt 34. Les deux sont annulés, l'espacement ne
   vient plus que d'ici. */
.soum__bloc{display:grid;gap:22px}
.soum--depot .soum__bloc{gap:18px;padding:0;border:0}
.soum--depot .soum__bloc > .field + .field,
.soum--depot .soum__bloc > .field + .soum__grille,
.soum--depot .soum__bloc > .soum__grille + .field,
.soum--depot .soum__bloc > .soum__grille + .soum__grille,
.soum--depot .soum__bloc > .soum__t + .field,
.soum--depot .soum__bloc > .soum__t + .soum__grille,
.soum--depot .soum__bloc > .soum__t + .soum__fieldset{margin-top:0}
.soum__bloc + .soum__bloc{padding-top:34px;border-top:1px solid #ECE7EA}
.soum--depot .soum__bloc + .soum__bloc{padding-top:24px;border-top-color:#F1ECEE}
.soum__t{
  margin:0;font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--plum);
  padding-left:14px;border-left:2px solid var(--mw-accent);
}
.soum__p{margin:-10px 0 0;font-size:14px;line-height:1.6;color:#7D6F76}
/* Dans un bloc du dépôt, la grille met 18 px partout. L'en-tête d'un bloc
   se resserre : surtitre → titre 8 px, titre → description 12 px, puis 24 px
   avant les champs. Les marges négatives ne font que retirer de ce « gap ». */
.soum--depot .soum__bloc > .soum__sur{margin-bottom:-10px}
.soum--depot .soum__bloc > .soum__p{margin:-6px 0 6px}
.soum__sur{
  display:block;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mw-bordeaux);margin-bottom:4px;
}
.soum__grille{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.soum--depot .soum__grille{gap:18px 20px}
.soum__pleine{grid-column:1 / -1}

/* --- Les champs -----------------------------------------------------------
   « align-content:start » n'est pas un détail : sans lui, « Votre nom » et
   « E-mail professionnel » ne commencent pas à la même hauteur.

   Le champ est une grille de deux lignes — l'étiquette, la saisie — et il est
   lui-même une case de « soum__grille ». Une case de grille est étirée sur
   toute la hauteur de sa ligne ; à l'intérieur, « align-content » vaut
   « stretch » par défaut, et le surplus est alors réparti dans les lignes
   automatiques. Le champ de gauche grandissait donc pour suivre celui de
   droite — qui porte un paragraphe d'aide — et c'est son ÉTIQUETTE qui
   absorbait la différence : 57 px de haut au lieu de 23, et sa saisie
   repoussée 34 px plus bas que sa voisine.

   Avec « start », les deux lignes gardent leur hauteur naturelle et le
   surplus tombe en bas de la case, où il ne déplace rien. */
.soum .field{display:grid;gap:8px;align-content:start}
.soum--depot .field{gap:7px}
.soum label{font-size:14px;font-weight:600;color:#2E1420;letter-spacing:-.003em}
.soum__opt{font-weight:400;color:#6E646B;font-size:13px}
.soum__req{color:var(--mw-framboise)}
.soum .input,.soum .select{
  width:100%;height:52px;padding:0 15px;
  background:#fff;border:1px solid #DDD5D9;border-radius:6px;
  font-size:15.5px;color:var(--plum);
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.soum textarea.input,.soum .soum__zone{height:auto;padding:14px 15px;line-height:1.65;resize:vertical}
.soum .input::placeholder{color:#B4A8AE}
@media (hover:hover){
.soum .input:hover,.soum .select:hover{border-color:#C6BABF}
}
.soum .input:focus,.soum .select:focus{
  outline:none;border-color:var(--mw-bordeaux);
  box-shadow:0 0 0 3px rgba(104,21,61,.09);
}
.soum__aide{margin:0;font-size:13px;line-height:1.55;color:#6E646B}
.input--court{max-width:220px}

/* --- Les choix ------------------------------------------------------------ */
.soum__choix{display:grid;gap:10px}
.soum__option{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;
  padding:17px 20px 17px 48px;cursor:pointer;
  background:#fff;border:1px solid #DDD5D9;border-radius:6px;
  transition:border-color 160ms ease, background-color 160ms ease;
}
@media (hover:hover){
.soum__option:hover{border-color:#C6BABF}
}
.soum__option input{position:absolute;opacity:0;width:1px;height:1px}
.soum__option::before{
  content:"";position:absolute;left:19px;top:20px;width:15px;height:15px;border-radius:50%;
  border:1.5px solid #C6BABF;background:#fff;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.soum__option.is-choisi{
  border-color:var(--mw-accent);
  background:linear-gradient(100deg,#FCF2F7 0%,#FEFAFC 45%,#fff 100%);
}
.soum__option.is-choisi::before{
  border-color:var(--mw-accent);box-shadow:inset 0 0 0 4px var(--mw-accent);
}
.soum__option:focus-within{border-color:var(--mw-bordeaux);box-shadow:0 0 0 3px rgba(104,21,61,.09)}
.soum__option-t{font-size:15px;font-weight:600;color:var(--plum)}
.soum__option-p{font-size:13.5px;line-height:1.55;color:#7D6F76}

.soum__fieldset{border:0;margin:0;padding:0;display:grid;gap:14px}
.soum__legende{padding:0;font-size:15px;font-weight:600;color:var(--plum);line-height:1.4}
.soum__suite{margin-top:2px}

/* Le hijab : un filet bordeaux à gauche, rien d'autre.

   Le second sélecteur n'est pas une redite. Dans le formulaire de dépôt,
   « .soum--depot .soum__bloc » remet tous les blocs à « padding:0;border:0 »
   — deux classes contre une, il l'emportait —, et
   « .soum--depot .soum__bloc + .soum__bloc » y ajoutait un « padding-top »
   de 24 px. Résultat : le cadre rose s'affichait bien, mais son texte
   collait au bord, sans un pixel à gauche, à droite ni en bas. Le filet
   bordeaux avait disparu avec le reste.

   Le « !important » qui était posé sur « border-top » soignait un seul
   symptôme de cette collision ; il n'a plus lieu d'être. Les deux sélecteurs
   d'une même liste gardent chacun leur poids : le premier sert partout
   ailleurs, le second — trois classes — reprend la main dans le dépôt. */
.soum__bloc--cle,
.soum--depot .soum__bloc.soum__bloc--cle{
  padding:28px 30px;
  border:1px solid #EFDCE6;border-left:3px solid var(--mw-accent);
  border-top:1px solid #F2E1EA;
  border-radius:4px;
  background:linear-gradient(100deg,#FCF2F7 0%,#FEFAFC 40%,#fff 100%);
}
.soum__bloc--doux{
  padding:26px 0 0;border-top:1px solid #ECE7EA;
}

/* --- Les éléments demandés ------------------------------------------------ */
.soum__element{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:14px 0;border-top:1px solid #F2EDEF;
}
.soum__element:first-of-type{border-top:0;padding-top:0}
.soum__case{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--plum);font-weight:500}
.soum__case--petit{font-size:13.5px;color:#7D6F76;font-weight:400}
.soum__element-reglages{display:flex;align-items:center;gap:16px;margin-left:auto}
.soum__element-fixe{font-size:13.5px;color:#6E646B}
.soum__case input[type=checkbox],.soum__consent input[type=checkbox]{
  width:17px;height:17px;accent-color:var(--mw-bordeaux);flex:none;
}

/* --- Le récapitulatif ------------------------------------------------------
   Un seul bloc blanc, une bordure très légère, et dedans une grille de deux
   rubriques par ligne. Pas d'empilement de cartes arrondies : les rubriques
   sont séparées par des filets, comme les colonnes d'un tableau qu'on lit.
   ========================================================================= */
.soum-recap{
  border:1px solid #ECE7EA;border-radius:4px;background:#fff;overflow:hidden;
}
.soum-recap__grille{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
}
.soum-recap__bloc{
  display:grid;align-content:start;gap:5px;
  padding:26px 28px;min-width:0;
  border-top:1px solid #F2EDEF;border-left:1px solid #F2EDEF;
}
/* Les filets ne cernent pas le bloc : ils le divisent. Première ligne sans
   filet haut, première colonne sans filet gauche. */
.soum-recap__grille > :nth-child(-n+2){border-top:0}
.soum-recap__grille > :nth-child(odd){border-left:0}

.soum-recap__tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:3px;
}
.soum-recap__q{
  margin:0;font-size:14px;font-weight:600;color:#8A7C83;letter-spacing:0;
}
.soum-recap__v{
  margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--plum);
  letter-spacing:-.012em;overflow-wrap:anywhere;
}
.soum-recap__d{margin:0;font-size:13.5px;line-height:1.55;color:#8A7C83;overflow-wrap:anywhere}
.soum-recap__vide{font-weight:400;font-style:italic;color:#B4A8AE}

/* « Modifier » à l'angle de sa rubrique, avec son crayon. */
.soum-recap__modif{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:none;border:0;padding:2px;cursor:pointer;font:inherit;
  font-size:13px;color:var(--mw-bordeaux);
}
@media (hover:hover){
.soum-recap__modif:hover{text-decoration:underline;text-underline-offset:3px}
}
.soum-recap__modif svg{flex:none}

/* Le hijab : un bandeau rose très pâle, une coche bordeaux, toute la largeur. */
.soum-recap__hijab{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:22px 28px;border-top:1px solid #F2EDEF;background:#FDF7FA;
}
.soum-recap__coche{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid #EFDCE6;color:var(--mw-bordeaux);
}
.soum-recap__hijab .soum-recap__q{margin-bottom:2px}
.soum-recap__hijab .soum-recap__v{font-size:15.5px;font-weight:500}

/* --- Le bloc de confirmation ---------------------------------------------- */
.soum-confirme{
  margin-top:22px;padding:22px 24px;
  border:1px solid var(--mw-avant-bord);border-radius:4px;background:var(--mw-avant-fond);
}
.soum__consent{
  display:flex;gap:13px;align-items:flex-start;margin:0;
  font-size:14px;line-height:1.65;color:#5F5158;cursor:pointer;
}

/* --- La navigation --------------------------------------------------------- */
.soum-nav{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-top:2px;padding-top:22px;border-top:1px solid #F1ECEE;
}
.soum-nav__suite{margin-left:auto}
.soum .btn{
  height:50px;padding:0 26px;border-radius:6px;
  font-size:15.5px;font-weight:600;display:inline-flex;align-items:center;gap:10px;
  transition:background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.soum .btn--primary{
  background:var(--mw-bordeaux);color:#fff;border:1px solid var(--mw-bordeaux);
  background-image:none;
}
@media (hover:hover){
.soum .btn--primary:hover{background:#571032;border-color:#571032}
}
/* « Retour » est un bouton de texte : il ne doit pas rivaliser. */
.btn--secondaire{
  background:none;border:0;color:#7D6F76;padding:0 4px;height:auto;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:#DDD5D9;
}
@media (hover:hover){
.btn--secondaire:hover{color:var(--plum);text-decoration-color:#B4A8AE}
}
.btn--secondaire:disabled{opacity:.45;cursor:default}
.soum__final{height:54px;padding:0 30px;font-size:16px}
.soum__envoi{
  display:grid;gap:9px;justify-items:end;margin-left:auto;text-align:right;
  /* La section 8 lui posait un filet et une marge : ici le filet est celui de
     la navigation, un seul suffit. */
  border-top:0;padding-top:0;margin-top:0;
}

.soum__annonce{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.soum__erreur{
  margin:0 0 24px;padding:15px 18px;border-radius:4px;
  background:#FDF6F9;border:1px solid #EFD9E4;border-left:2px solid var(--mw-framboise);
  font-size:14.5px;line-height:1.55;color:#7A1B45;
}
.soum__attente{
  display:flex;align-items:center;gap:12px;font-size:15px;color:var(--plum);font-weight:600;
}
.soum__attente small{display:block;font-size:13px;font-weight:400;color:#8A7C83;margin-top:2px}
.soum__attente i{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid #ECE7EA;border-top-color:var(--mw-bordeaux);
  animation:soum-tourne 720ms linear infinite;
}
@keyframes soum-tourne{to{transform:rotate(360deg)}}

/* --- Sous 1024 px : une seule colonne -------------------------------------
   Deux colonnes tenaient jusqu'à 1180 px et pas au-delà : à 900 px le
   sommaire mangeait 190 px et les champs tombaient à 263 px — la largeur
   d'une case, pas d'un champ de formulaire. Le sommaire passe donc en tête,
   sous sa forme compacte, et le formulaire reprend toute la largeur. */
@media (max-width:1024px){
  .soum{grid-template-columns:minmax(0,1fr);gap:30px;padding:var(--e-3) 0 var(--e-4)}
  .soum--depot{
    grid-template-columns:minmax(0,1fr);gap:20px;
    margin:0;padding:28px 32px 36px;
  }
  .soum-hero{gap:30px;padding:30px 32px 26px}
  .soum__colonne,.soum__panneau{grid-column:1}
  .soum__colonne{position:static;padding-top:0}
  .soum-somm__liste{display:none}
  /* Le sommaire vertical cède la place à un indicateur d'une ligne : le rang,
     le nom de l'étape, et la barre dessous. La jauge du panneau disait la
     même chose deux centimètres plus bas — deux voix pour une information.
     C'est celle-ci qui reste, parce qu'elle porte aussi le nom de l'étape. */
  .soum-somm__compact{
    display:grid;gap:9px;padding-bottom:18px;border-bottom:1px solid #F3EDF0;
  }
  .soum-somm__compact-t{
    margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  }
  .soum-somm__compact-t span{
    display:inline;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#8A7C83;
  }
  .soum-somm__compact-t strong{font-size:16px;font-weight:600;color:var(--plum)}
  .soum-somm__filet{
    display:block;height:5px;border-radius:4px;background:#F3EDF0;overflow:hidden;
  }
  .soum-somm__filet i{
    display:block;height:100%;border-radius:4px;
    background:linear-gradient(90deg,var(--mw-bordeaux),var(--mw-accent));
    transition:width 480ms cubic-bezier(.22,1,.36,1);
  }
  .soum-jauge{display:none}
  .soum-hero{gap:32px;padding:36px 0 78px}
}

/* --- Sous 760 px : une colonne de champs ---------------------------------- */
@media (max-width:760px){
  /* Vingt pixels de chaque côté : une seule gouttière du haut de la page au
     bas de la carte. */
  .soum-page > .wrap{width:calc(100% - 40px)}
  .soum-carte{margin-top:14px}
  .soum-hero{
    grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;
    padding:24px 24px 22px;
  }
  .soum-hero h1{max-width:24ch;font-size:clamp(21px,5.6vw,25px);line-height:1.2}
  .soum-hero__p{margin:8px 0 0;font-size:14.5px;line-height:1.5}
  /* Les trois garanties en lignes serrées : elles se rangent d'elles-mêmes
     sur une ou deux lignes selon la largeur, et ne coûtent plus que quelques
     dizaines de pixels. */
  .soum-hero__gages{display:flex;flex-wrap:wrap;gap:7px 14px;margin:0}
  .soum-hero__gages li{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;line-height:1.3;color:#5F5158;
  }
  .soum-hero__gages svg{width:13px;height:13px}
  .soum--depot{margin:0;padding:24px 24px 32px}
  /* Seize pixels dans les champs, pas quinze et demi : en dessous, iOS
     grossit la page au premier appui dans un champ et ne la redescend
     jamais. La hauteur reste au-dessus des 48 px du bout du doigt. */
  .soum--depot .input,.soum--depot .select,
  .soum--depot textarea.input,.soum--depot .soum__zone{font-size:16px}
  .soum--depot .input,.soum--depot .select{height:50px}
  .soum-etape{gap:22px}
  .soum__grille{grid-template-columns:minmax(0,1fr)}
  .soum-nav .btn--primary{flex:1 1 auto;justify-content:center}
  .soum__envoi{width:100%;justify-items:stretch;text-align:left}
  .soum__envoi .btn{justify-content:center}
  /* Une colonne : les filets verticaux n'ont plus lieu d'être. */
  .soum-recap__grille{grid-template-columns:minmax(0,1fr)}
  .soum-recap__bloc{border-left:0;padding:22px 20px}
  .soum-recap__grille > :nth-child(2){border-top:1px solid #F2EDEF}
  .soum-recap__hijab{grid-template-columns:auto 1fr;padding:20px}
  .soum-recap__hijab .soum-recap__modif{grid-column:2;justify-self:start;margin-top:4px}
  .soum-confirme{padding:18px 20px}
  /* Même poids que la règle de base, sinon elle ne passerait pas. */
  .soum__bloc--cle,
  .soum--depot .soum__bloc.soum__bloc--cle{padding:24px 20px}
}

@media (prefers-reduced-motion:reduce){
  .soum-etape--entre{animation:none}
  .soum-somm__filet i,.soum .input,.soum .btn,.soum__option{transition:none}
  .soum__attente i{animation:none;border-top-color:#ECE7EA}
}

/* =========================================================================
   11. CONFIRMATION DU DÉPÔT
   Un fond rose crème, un seul bloc blanc, deux colonnes. Ce qui s'est passé
   à gauche, ce qui va se passer à droite — et les actions dessous, sur toute
   la largeur.
   ========================================================================= */
.soum-fin{background:#FDF9FB;padding:var(--e-4) 0 var(--e-5)}
.soum-fin > .wrap{width:min(1020px,calc(100% - 48px))}

.fin{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:0 56px;align-items:start;
  padding:46px 48px 38px;
  background:#fff;border:1px solid #EFE7EB;border-radius:4px;
}
.fin__dire{display:grid;justify-items:start;gap:18px;min-width:0}
/* « Renvoyé » n'a pas de colonne « La suite » : une seule colonne. */
.fin--seule{grid-template-columns:minmax(0,1fr)}
/* La grande coche : bordeaux sur rose pâle, dans la palette de la marque.
   Elle est large et posée au-dessus du titre — c'est sa taille qui dit que
   tout s'est bien passé, pas une couleur empruntée ailleurs. */
.fin__ico,.soum-fin__ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#FBEDF4;border:1px solid #F2DEE9;color:var(--mw-bordeaux);
}
.fin__ico svg,.soum-fin__ico svg{width:24px;height:24px;stroke-width:2.4}
.fin h1{
  margin:0;max-width:18ch;
  font-size:clamp(26px,3vw,34px);line-height:1.18;letter-spacing:-.024em;color:var(--plum);
}
.fin__p{margin:0;max-width:48ch;font-size:16px;line-height:1.65;color:#5F5158}
.fin__note{margin:2px 0 0;max-width:52ch;font-size:13.5px;line-height:1.6;color:#6E646B}

/* Le numéro de dossier : compact, pas une grande zone rose. */
.fin-ref{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  width:100%;max-width:420px;padding:14px 16px;
  border:1px solid var(--mw-avant-bord);border-radius:4px;background:var(--mw-avant-fond);
}
.fin-ref__dire{display:grid;gap:1px;min-width:0}
.fin-ref__q{font-size:12.5px;color:#6E646B}
.fin-ref__v{
  font-size:19px;font-weight:600;letter-spacing:.05em;color:var(--mw-bordeaux);
  font-variant-numeric:tabular-nums;
}
.fin-ref__b{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:8px 13px;border:1px solid #DDD5D9;border-radius:4px;background:#fff;
  font:inherit;font-size:13.5px;color:var(--plum);cursor:pointer;
  transition:border-color 160ms ease, color 160ms ease;
}
@media (hover:hover){
.fin-ref__b:hover{border-color:var(--mw-bordeaux);color:var(--mw-bordeaux)}
}
.fin-ref__b svg{width:15px;height:15px;flex:none}

/* La suite : une chronologie, un filet, trois icônes. Aucun numéro. */
/* La colonne de droite est un panneau, non une liste posée sur le blanc.
   Un filet et trois pastilles de 31 px ne faisaient pas une colonne : ils
   faisaient un vide avec des miettes dedans. Le fond rose crème lui donne sa
   surface, et le filet vertical n'a plus rien à porter.
   Le panneau déborde des marges de la carte pour en toucher les bords —
   d'où les marges négatives, qui valent exactement ses paddings. */
.fin__suite{
  align-self:stretch;display:grid;gap:22px;align-content:start;min-width:0;
  margin:-46px -48px -38px 0;padding:46px 40px 38px;
  background:#FDF7FA;border-radius:0 12px 0 0;
}
.fin__suite-t{margin:0;font-size:16px;font-weight:600;color:var(--plum)}
.fin-suite{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.fin-suite__l{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;align-items:start;
}
.fin-suite__ico{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#F8E7F0;color:var(--mw-bordeaux);
}
.fin-suite__ico svg{width:18px;height:18px}
.fin-suite__dire{display:grid;gap:3px;min-width:0;padding-top:3px}
.fin-suite__dire strong{font-size:15px;font-weight:600;line-height:1.35;color:var(--plum)}
.fin-suite__dire span{font-size:14px;line-height:1.55;color:#6E6068}

.fin__actions{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  margin-top:38px;padding-top:26px;border-top:1px solid #F2EDEF;
}
.fin__lien{font-size:14.5px;color:var(--mw-bordeaux);text-decoration:underline;text-underline-offset:3px}
.fin__lien--pale{color:#8A7C83;text-decoration-color:#DDD5D9}
@media (hover:hover){
.fin__lien--pale:hover{color:var(--plum)}
}
.soum-fin .btn{
  height:50px;padding:0 26px;border-radius:6px;font-size:15.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--mw-bordeaux);color:#fff;border:1px solid var(--mw-bordeaux);background-image:none;
}
@media (hover:hover){
.soum-fin .btn:hover{background:#571032;border-color:#571032}
}

@media (max-width:860px){
  .soum-fin > .wrap{width:calc(100% - 32px)}
  .fin{grid-template-columns:minmax(0,1fr);gap:32px;padding:30px 22px 26px}
  .fin__suite{margin:4px -22px -26px;padding:26px 22px;border-radius:0}
  .fin__actions{margin-top:28px}
  .soum-fin .btn{width:100%;justify-content:center}
  .fin-ref{max-width:none}
}

/* La séquence d'arrivée — le vocabulaire de l'import par captures.
   Mêmes tracés, mêmes durées, mêmes courbes que .adm-scan dans admin.css :
   la carte respire, une ligne rose la balaie, un halo bat, six scintillements
   dorés passent, un éclat, puis la confirmation. Ce n'est pas une imitation,
   c'est le même geste — le site n'a pas à parler deux langues. */
/* La séquence couvre l'écran, centrée dessus.
   Elle était posée dans le flux de la page, et l'on comptait sur un retour en
   haut pour la voir. Cela ne tient pas : on envoie depuis le bas d'un
   formulaire de plusieurs écrans, et la position de défilement est rétablie
   par le navigateur après notre remontée. Sur un téléphone, la séquence se
   jouait donc au-dessus de la ligne de flottaison, et il fallait remonter
   pour la regarder. Un voile n'a pas ce problème : où que l'on soit dans la
   page, il est devant. Au-dessus de l'en-tête collant (200), sous le lien
   d'évitement (300). */
.soum-scan{
  position:fixed;inset:0;z-index:250;
  display:grid;align-content:center;justify-items:center;gap:22px;
  padding:24px;background:#FDF9FB;
}
.soum-scan__pile{position:relative;display:flex;padding:14px 18px;border-radius:4px}

.soum-scan__carte{
  position:relative;display:grid;gap:6px;padding:26px 30px;min-width:min(360px,84vw);
  border-radius:4px;border:1px solid #F0D3E3;background:#fff;
  --pente:0deg;transform:rotate(var(--pente));
  animation:soum-respire 2.4s ease-in-out infinite;
}
@keyframes soum-respire{0%,100%{transform:rotate(var(--pente)) translateY(0)}
  50%{transform:rotate(var(--pente)) translateY(-4px)}}
.soum-scan__etiquette{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mw-accent);
}
.soum-scan__titre{font-size:18px;line-height:1.3;color:var(--plum);letter-spacing:-.012em}
.soum-scan__co{font-size:14.5px;color:#5F5158}
.soum-scan__lieu{font-size:13.5px;color:#6E646B}

.soum-scan__ligne{
  position:absolute;left:10px;right:10px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#E0308C 25%,#FFFFFF 50%,#E0308C 75%,transparent);
  box-shadow:0 0 14px 3px rgba(224,48,140,.7),0 0 40px 8px rgba(224,48,140,.28);
  animation:soum-balaye 1.7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes soum-balaye{0%{top:5%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:95%;opacity:0}}

.soum-scan__halo{
  position:absolute;inset:-46px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(224,48,140,.15) 0%,rgba(224,48,140,.06) 45%,transparent 70%);
  animation:soum-halo 2.4s ease-in-out infinite;
}
@keyframes soum-halo{0%,100%{opacity:.45}50%{opacity:.95}}

.soum-scan__etincelle{
  position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;
  background:#F5C86B;box-shadow:0 0 6px 1px rgba(245,200,107,.8);
  top:calc(6% + var(--n) * 16%);
  left:calc(-7% + var(--n) * 22%);
  opacity:0;animation:soum-scintille 2.1s ease-in-out infinite;
  animation-delay:calc(var(--n) * .28s);
}
@keyframes soum-scintille{0%,100%{opacity:0;transform:scale(.4)}
  45%{opacity:.9;transform:scale(1)}}

.soum-scan__msg{
  margin:0;font-size:15px;font-weight:600;color:var(--plum);text-align:center;
  animation:soum-monte 320ms cubic-bezier(.22,1,.36,1);
}
@keyframes soum-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.soum-scan__barre{
  display:block;width:min(280px,80%);height:3px;border-radius:3px;overflow:hidden;
  background:#F6E3EE;
}
.soum-scan__barre i{
  display:block;width:38%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#A21050,#E0308C);
  animation:soum-indetermine 1.25s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes soum-indetermine{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}

/* L'éclat, très bref, entre l'analyse et la confirmation. */
.soum-scan--eclat .soum-scan__pile::after{
  content:"";position:absolute;inset:-30px;border-radius:4px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(224,48,140,.35),transparent 70%);
  animation:soum-eclat 450ms ease-out forwards;
}
@keyframes soum-eclat{0%{opacity:0;transform:scale(.7)}35%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

@media (max-width:820px){
  .soum-fin > .wrap{width:calc(100% - 32px)}
  
  .soum-fin__actions .btn{width:100%;justify-content:center}
  .soum-scan__carte{min-width:0;width:100%}
  .soum-scan__pile{padding:14px 6px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .soum-scan__carte,.soum-scan__ligne,.soum-scan__halo,
  .soum-scan__etincelle,.soum-scan__msg,.soum-scan__barre i{animation:none}
  .soum-scan__halo,.soum-scan__etincelle,.soum-scan__ligne{display:none}
}

/* La section elle-même : la marge haute vient du hero, pas d'un padding de
   section. Sans cela, la page s'ouvrait sur deux cents pixels de vide. */
.soum-page{padding-top:0;padding-bottom:var(--e-3)}
.soum-fin{padding-top:var(--e-4);padding-bottom:var(--e-4)}

/* =========================================================================
   12. LES ÉLÉMENTS DEMANDÉS, EN CARTES
   Compact, éditorial : une icône, un nom, ce que c'est. Les réglages
   n'apparaissent qu'une fois la carte retenue — sinon on lit dix réglages
   pour deux choix.
   ========================================================================= */
.elts{display:grid;gap:14px}
.elts__compte{margin:0;font-size:13px;color:#6E646B}
.elts__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.elts__carte{
  display:grid;align-content:start;
  border:1px solid #E7DFE3;border-radius:4px;background:#fff;
  transition:border-color 160ms ease, background-color 160ms ease;
}
@media (hover:hover){
.elts__carte:hover{border-color:#D6C8CF}
}
.elts__carte.est-retenu{border-color:var(--mw-bordeaux);background:#FDF7FA}

.elts__tete{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:13px;padding:15px 16px;cursor:pointer;min-width:0;
}
.elts__tete--libre{cursor:default;grid-template-columns:auto 1fr}
.elts__tete input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}

.elts__ico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:8px;flex:none;
  background:var(--mw-rose);color:var(--mw-bordeaux);
}
.est-retenu .elts__ico{background:#fff}

.elts__dire{display:grid;gap:2px;min-width:0}
.elts__nom{font-size:14.5px;font-weight:600;color:var(--plum);line-height:1.3}
.elts__quoi{font-size:12.5px;color:#8A7C83;line-height:1.4}
.elts__l{font-size:11.5px;font-weight:600;color:#6E646B}

/* La coche d'angle : rien tant que la carte n'est pas retenue. */
.elts__coche{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none;
  border:1px solid #DDD5D9;background:#fff;color:transparent;
  transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.elts__coche svg{width:12px;height:12px}
.est-retenu .elts__coche{background:var(--mw-bordeaux);border-color:var(--mw-bordeaux);color:#fff}
.elts__tete:focus-within .elts__coche{box-shadow:0 0 0 3px rgba(104,21,61,.14)}

.elts__reglages{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:0 16px 14px 63px;
}
.elts__forme{display:flex;align-items:center;gap:8px}
.elts__select{
  height:34px;padding:0 9px;border:1px solid #DDD5D9;border-radius:6px;
  background:#fff;font-size:13.5px;color:var(--plum);
}
.elts__select:focus{outline:none;border-color:var(--mw-bordeaux)}
.elts__fixe{font-size:13px;color:#6E646B}
.elts__obl{display:flex;align-items:center;gap:8px;font-size:13px;color:#5F5158;cursor:pointer}
.elts__obl input{width:16px;height:16px;accent-color:var(--mw-bordeaux)}
.elts__intitule{
  width:100%;height:36px;padding:0 10px;border:1px solid #DDD5D9;border-radius:6px;
  background:#fff;font-size:14px;color:var(--plum);
}
.elts__intitule:focus{outline:none;border-color:var(--mw-bordeaux)}
.elts__ajout{
  justify-self:start;background:none;border:1px dashed #D6C8CF;border-radius:6px;
  padding:9px 16px;font:inherit;font-size:13.5px;color:var(--mw-bordeaux);cursor:pointer;
}
@media (hover:hover){
.elts__ajout:hover{border-color:var(--mw-bordeaux);background:#FDF7FA}
}

@media (max-width:760px){
  .elts__grille{grid-template-columns:minmax(0,1fr)}
  .elts__reglages{padding-left:16px}
}
@media (prefers-reduced-motion:reduce){
  .elts__carte,.elts__coche{transition:none}
}

/* --- Le refus : la seule réponse qui arrête le parcours ------------------- */
.soum-refus{
  display:grid;gap:10px;justify-items:start;margin-top:18px;
  padding:22px 24px;border:1px solid #E7C9D6;border-left:3px solid var(--mw-bordeaux);
  border-radius:4px;background:#FDF6F9;
}
.soum-refus__t{margin:0;font-size:16px;font-weight:600;color:var(--mw-bordeaux);line-height:1.35}
.soum-refus__p{margin:0;max-width:60ch;font-size:14.5px;line-height:1.65;color:#5F5158}
.soum-refus__b{
  margin-top:2px;background:none;border:1px solid #DDD5D9;border-radius:4px;
  padding:9px 16px;font:inherit;font-size:14px;color:var(--plum);cursor:pointer;
}
@media (hover:hover){
.soum-refus__b:hover{border-color:var(--mw-bordeaux);background:#fff}
}

/* =========================================================================
   L'IDENTITÉ DE LA STRUCTURE
   Type, pays d'immatriculation, SIRET. Quatre classes seulement : le reste
   du bloc emprunte « field », « input », « select » et « soum__aide » au
   formulaire qui l'accueille — c'est la même saisie, elle doit se ressembler.
   ========================================================================= */

/* L'erreur sous le champ, et non en tête de page : elle parle d'un numéro à
   quatorze chiffres, elle doit être lue à côté du numéro. Le filet à gauche
   la rattache au champ plutôt qu'à la page. */
.soum__err-champ{
  margin:8px 0 0;padding:8px 12px;border-radius:3px;
  background:#FDF6F9;border-left:2px solid var(--mw-framboise);
  font-size:13.5px;line-height:1.5;color:#7A1B45;font-weight:500;
}

/* « Je ne dispose pas de numéro SIRET » : une sortie, pas une option. Elle se
   tient sous le champ, en retrait, et ne prétend pas au même rang que lui. */
.soum__sortie{margin:10px 0 0}
.soum__lien-discret{
  padding:0;border:0;background:none;
  font:inherit;font-size:13px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  cursor:pointer;
}
@media (hover:hover){
.soum__lien-discret:hover{color:var(--mw-bordeaux)}
}
.soum__lien-discret:focus-visible{
  outline:2px solid var(--mw-bordeaux);outline-offset:3px;border-radius:2px;
}

/* La mention d'information. Elle n'est pas une aide de champ — elle vaut pour
   tout le bloc —, d'où le fond et la largeur pleine. */
.soum__mention{
  margin:4px 0 0;padding:12px 14px;border-radius:4px;
  background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);
  font-size:13px;line-height:1.6;color:var(--mw-info-texte);
}

/* Un champ désactivé — le SIRET, quand « je n'en ai pas » est déclaré — doit
   se voir comme tel : il garde sa place pour qu'on puisse revenir dessus. */
.soum input:disabled{background:#F7F4F5;color:#A99DA3;cursor:not-allowed}

@media (max-width:640px){
  .soum__mention{padding:11px 12px;font-size:12.5px}
}

/* L'accès à l'espace recruteur, en tête du dépôt : il était ici une grande
   carte avec un aperçu de l'espace. C'est désormais un rappel d'une ligne,
   dans la carte du formulaire — voir « .rec-rappel » dans parcours.css. */

/* Ce qui se passera après l'envoi, annoncé avant le bouton. Un encadré doux,
   pas un avertissement : c'est une suite proposée, pas une condition. */
.soum__apres{
  margin:0 0 18px;padding:14px 16px;border-radius:5px;
  background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);
  font-size:13.5px;line-height:1.65;color:var(--mw-info-texte);max-width:72ch;
}

/* --- L'activation de l'espace, sur la page de remerciement ----------------
   Un bloc à part, après le récapitulatif : l'annonce est transmise, ceci est
   une suite proposée. « Je le ferai plus tard » a le même poids visuel que le
   bouton — rien ici n'est une condition. */
.fin__espace{
  margin:26px 0 0;padding:22px 24px;border-radius:8px;
  background:var(--mw-avant-fond);border:1px solid var(--mw-avant-bord);text-align:left;
}
.fin__espace-t{
  margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.35;color:var(--plum);
}
.fin__espace-p{
  margin:0 0 18px;font-size:14.5px;line-height:1.65;color:var(--ink-3);max-width:68ch;
}
.fin__espace-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fin__plus-tard-b{
  padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
@media (hover:hover){
.fin__plus-tard-b:hover{color:var(--mw-bordeaux)}
}
.fin__plus-tard-b:focus-visible{outline:2px solid var(--mw-bordeaux);outline-offset:3px;border-radius:2px}

.fin__active{
  display:flex;align-items:flex-start;gap:13px;
  margin:26px 0 0;padding:20px 22px;border-radius:8px;
  background:#F2F9F4;border:1px solid #D6EADD;text-align:left;
}
.fin__active-ico{
  display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;
  background:#1E6B41;color:#fff;
}
.fin__active-ico svg{width:15px;height:15px}
.fin__active-t{margin:0;font-size:14.5px;line-height:1.65;color:#1E4D31;max-width:64ch}

.fin__plus-tard{
  margin:26px 0 0;padding:16px 18px;border-radius:6px;
  background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);text-align:left;
  font-size:14px;line-height:1.65;color:var(--mw-info-texte);
}

@media (max-width:600px){
  .fin__espace{padding:18px 16px}
  .fin__espace-actions{gap:14px}
  .fin__espace-actions .btn{width:100%;justify-content:center}
}