/* ==========================================================
   APTIA — Direction C « Mouvement »
   Système : marine profond / indigo électrique / azur clair
   ========================================================== */
:root{
  --navy-950:#131832;
  --navy:#1E2447;
  --indigo:#2B6DE5;
  --indigo-300:#5B8DEF;
  --azure:#8FB8F0;
  --paper:#F4F5FA;
  --white:#FFFFFF;
  --ink:#131832;
  --ink-soft:#4A5068;
  --dark-ink:#EDEFFA;
  --dark-soft:#A7ADCE;
  --line-dark:rgba(143,184,240,.16);
  --line-light:#E1E4F0;
  --radius:22px;
  --focus:var(--azure);
  /* Rythme vertical */
  --s-section:clamp(4.5rem, 9vw, 7.5rem);
  --s-3:clamp(2rem, 4vw, 3rem);
  --s-2:clamp(1.25rem, 2.5vw, 2rem);
  --header-h:110px;
  --ease:cubic-bezier(.22,.65,.25,1);
  /* Courbe des apparitions : départ vif, atterrissage très doux. Réglage du
     31.07.2026 pour un rendu plus ample, façon grandes marques. */
  --ease-pose:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:105%} /* léger agrandissement global du texte (retouche client 22.07) */
body{
  margin:0;
  font-family:'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:1.125rem;
  line-height:1.6;
  background:var(--navy-950);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--indigo);color:var(--white)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}

.wrap{width:min(clamp(1160px, 66vw, 1440px), calc(100% - 2.75rem));margin-inline:auto}
section{scroll-margin-top:calc(var(--header-h) + 1rem)}

/* ---------- Thèmes de sections (rythme sombre / clair) ---------- */
.theme-deep{background:var(--navy-950);color:var(--dark-ink);--focus:var(--azure)}
.theme-dark{background:var(--navy);color:var(--dark-ink);--focus:var(--azure)}
.theme-light{background:var(--paper);color:var(--ink);--focus:var(--indigo)}
.theme-indigo{background:var(--indigo);color:var(--white);--focus:var(--white)}

/* ---------- Typographie ---------- */
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-0.015em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(2.5rem, 6.4vw, 5.5rem);line-height:.98}
h2{font-size:clamp(1.9rem, 3.8vw, 3rem)}
h3{font-size:1.25rem;font-weight:700;letter-spacing:0}
p{margin:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.95rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--azure);
}
.hero .eyebrow{font-size:1.15rem}
.hero .eyebrow .ast{width:30px;height:30px}
.theme-light .eyebrow{color:#2969DB} /* indigo assombri d'un cran : 4.66:1 sur papier */
/* Le pictogramme officiel d'Aptia, posé en masque sur la couleur du texte : il
   suit donc automatiquement la teinte de son contexte, clair ou sombre, comme le
   faisait l'ancien astérisque en trait. Un seul fichier chargé et mis en cache,
   au lieu de 61 blocs SVG répétés dans le HTML.
   La règle porte sur .ast et non sur .eyebrow .ast : la classe sert aussi dans la
   citation du fondateur, les notices de formulaire, les atouts entreprises et le
   message d'absence d'offre. Chaque contexte ne redéfinit que sa taille. */
.ast{
  display:inline-block;flex:none;
  background:currentColor;
  -webkit-mask:url(logo/aptia-ast.svg) center/contain no-repeat;
  mask:url(logo/aptia-ast.svg) center/contain no-repeat;
}
/* Les traits du pictogramme sont plus fins que ceux de l'ancien astérisque :
   les tailles sont relevées d'environ 20 % pour un poids visuel équivalent. */
.eyebrow .ast{width:18px;height:18px}

.grad{
  color:var(--azure);
}
@supports (-webkit-background-clip:text){
  .grad{
    background:linear-gradient(95deg, var(--azure) 10%, var(--indigo-300) 90%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

.section-head{display:grid;gap:1rem;margin-bottom:var(--s-3);max-width:44ch}
.lead{font-size:clamp(1.05rem, 1.6vw, 1.25rem);line-height:1.55}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;
  font-weight:700;font-size:1rem;line-height:1;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:background-color .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease),
             box-shadow .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .22s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

.btn-light{background:var(--white);color:var(--navy-950)}
.btn-light:hover{background:var(--azure);color:var(--navy-950)}

.btn-ghost-dark{border-color:rgba(237,239,250,.4);color:var(--dark-ink)}
.btn-ghost-dark:hover{border-color:var(--white);background:rgba(255,255,255,.08)}

.btn-indigo{background:var(--indigo);color:var(--white)}
.btn-indigo:hover{background:var(--navy-950);color:var(--white)}


.btn-sm{padding:.7rem 1.3rem;font-size:.92rem}

/* Lien fléché */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;text-decoration:none;
}
.link-arrow .arr{transition:transform .22s var(--ease)}
.link-arrow:hover .arr{transform:translateX(6px)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:.35em}

/* ---------- Lien d'évitement ---------- */
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  background:var(--white);color:var(--navy-950);
  padding:.75rem 1.25rem;border-radius:999px;font-weight:700;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

/* ==========================================================
   1. HEADER
   ========================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;
  color:var(--dark-ink);--focus:var(--azure);
  background:transparent;
  transition:background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.site-header.is-scrolled{
  background:var(--white);color:var(--ink);--focus:var(--indigo);
  box-shadow:0 1px 0 var(--line-light), 0 10px 30px rgba(19,24,50,.08);
}

.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:84px;width:auto;margin-left:-16px} /* compense la zone de protection interne du SVG */
.brand .logo-navy{display:none}
.site-header.is-scrolled .logo-white{display:none}
.site-header.is-scrolled .logo-navy{display:block}

.main-nav{display:flex;align-items:center;gap:2rem}
.main-nav ul{display:flex;gap:1.75rem;margin:0;padding:0;list-style:none}
.main-nav a:not(.btn){
  position:relative;text-decoration:none;font-weight:500;font-size:.98rem;
  padding:.35rem 0;
}
.main-nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.main-nav a:not(.btn):hover::after{transform:scaleX(1)}
.main-nav a:not(.btn):hover{color:var(--azure)}
.site-header.is-scrolled .main-nav a:not(.btn):hover{color:var(--indigo)}

.btn-nav{background:var(--indigo-300);color:var(--white);padding:.7rem 1.35rem;font-size:.95rem}
.btn-nav:hover{background:var(--azure);color:var(--navy-950)}
.site-header.is-scrolled .btn-nav{background:var(--indigo)}
.site-header.is-scrolled .btn-nav:hover{background:var(--navy-950);color:var(--white)}

/* Bouton MyAptia de l'en-tête : l'entrée des collaborateurs, mise en valeur
   par le dégradé de la marque et le pictogramme. Remplace l'ancien
   « Déposer mon CV » (décision du propriétaire, 01.08.2026) ; la candidature
   reste accessible par le menu Candidats et les boutons des pages. */
.btn-myaptia{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.35rem;border-radius:999px;
  font-size:.95rem;font-weight:700;color:var(--white);
  /* « La pointe de rose », variante 1 retenue par le propriétaire le 01.08.2026
     (voir evolutions/maquette-bouton-myaptia.html). Le rose #D94E93 n'atteint que
     le bord droit du bouton, au-delà de 100 % : sous le libellé, le fond reste
     entre #1F55C9 et l'indigo, donc le blanc tient les 4.5:1 (WCAG AA). Le rose
     seul ne les tiendrait pas (2.85 mesuré), c'est pourquoi il reste en pointe. */
  background:linear-gradient(120deg, #1F55C9 0%, var(--indigo) 55%, #D94E93 135%);
  border:0;
  box-shadow:0 6px 18px rgba(120,80,200,.35);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.btn-myaptia:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(43,109,229,.5);filter:saturate(1.15)}
.btn-myaptia .ast{width:19px;height:19px;flex:none}

/* Passage a la ligne au milieu des boutons du heros : les deux actions
   candidats restent cote a cote, l'action entreprises vient en dessous. */
.saut-ligne{flex-basis:100%;height:0}

/* État actif de la navigation — règle unique pour tout le site
   (chaque page pose aria-current="page" sur sa propre entrée ;
   offre.html pose aria-current="true" sur « Offres d'emploi ») */
.main-nav a:not(.btn)[aria-current]{color:var(--azure)}
.main-nav a:not(.btn)[aria-current]::after{transform:scaleX(1)}
.site-header.is-scrolled .main-nav a:not(.btn)[aria-current]{color:var(--indigo)}
.menu-overlay ul a[aria-current]{color:var(--azure)}

/* Burger */
.nav-toggle{
  display:none;background:none;border:1.5px solid currentColor;border-radius:999px;
  color:inherit;padding:.6rem .9rem;cursor:pointer;
  font:inherit;font-weight:700;font-size:.9rem;
  align-items:center;gap:.5rem;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:4px}
.nav-toggle .bars span{width:16px;height:2px;background:currentColor;border-radius:2px}

/* Menu mobile plein écran */
.menu-overlay{
  position:fixed;inset:0;z-index:60;
  background:var(--navy-950);color:var(--dark-ink);--focus:var(--azure);
  display:flex;flex-direction:column;
  padding:1.1rem 1.4rem 2.5rem;
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s;
}
.menu-overlay.is-open{opacity:1;visibility:visible}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:calc(var(--header-h) - 1.1rem)}
.menu-top img{height:58px;width:auto}
.menu-close{
  background:none;border:1.5px solid rgba(237,239,250,.4);border-radius:999px;
  color:inherit;font:inherit;font-weight:700;font-size:.9rem;
  padding:.6rem 1.1rem;cursor:pointer;
}
.menu-close:hover{border-color:var(--white)}
.menu-overlay ul{list-style:none;margin:1.4rem 0 auto;padding:0;display:grid;gap:.15rem}
.menu-overlay ul a{
  display:inline-block;text-decoration:none;font-weight:900;letter-spacing:-0.01em;
  font-size:clamp(1.55rem, 6.4vw, 2.1rem);padding:.28rem 0;
}
.menu-overlay ul a:hover{color:var(--azure)}
.menu-overlay .btn{align-self:flex-start}
/* Bouton MyAptia en tete du menu mobile : premier element sous le logo,
   halo reduit pour un contour net sur le fond marine. */
.menu-overlay .menu-myaptia{margin-top:1.2rem;box-shadow:0 4px 12px rgba(6,10,30,.4)}

/* ==========================================================
   MENUS DÉROULANTS (23.07.2026) — sous-sections par entrée
   ========================================================== */
/* --- Desktop : panneau au survol et au focus clavier --- */
.main-nav .has-dropdown{position:relative}
.nav-caret{
  display:inline-block;width:0;height:0;margin-left:.3rem;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.65;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.main-nav .has-dropdown:hover .nav-caret,
.main-nav .has-dropdown:focus-within .nav-caret{transform:rotate(180deg);opacity:1}

.main-nav .nav-sub{
  display:block;gap:0;
  position:absolute;top:calc(100% + .55rem);left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:236px;margin:0;padding:.5rem;list-style:none;
  background:var(--white);border:1px solid var(--line-light);border-radius:14px;
  box-shadow:0 18px 44px rgba(19,24,50,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:70;
}
.main-nav .nav-sub::before{content:"";position:absolute;top:-.7rem;left:0;right:0;height:.7rem}
.main-nav .has-dropdown:hover .nav-sub,
.main-nav .has-dropdown:focus-within .nav-sub{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* Fermeture au clavier (Échap) : la classe l'emporte sur :focus-within
   tant que l'utilisateur ne revient pas sur l'entrée. */
.main-nav .has-dropdown.nav-ferme .nav-sub{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(6px);
}
.main-nav .nav-sub li{display:block}
.main-nav .nav-sub a{
  display:block;padding:.55rem .8rem;border-radius:9px;
  font-size:.92rem;font-weight:600;color:var(--ink);white-space:nowrap;
}
.main-nav .nav-sub a::after{content:none}
.main-nav .nav-sub a:hover{background:#EAF0FC;color:var(--indigo)}

/* --- Mobile : sous-listes compactes sous chaque grande entrée --- */
.menu-overlay{overflow-y:auto}
.menu-sub{list-style:none;margin:0 0 .35rem;padding:0;display:grid;gap:0}
.menu-overlay .menu-sub a{
  font-size:clamp(1rem, 4vw, 1.15rem);font-weight:600;letter-spacing:0;
  color:var(--dark-soft);
  /* Cible tactile de 44 px minimum : la norme d'accessibilité pour le doigt,
     obtenue par la hauteur du lien et non par l'espacement entre les lignes. */
  display:flex;align-items:center;min-height:44px;padding:.15rem 0;
}
.menu-overlay .menu-sub a:hover{color:var(--azure)}

/* ==========================================================
   PAGE 404 — contenu centré, plein écran
   ========================================================== */
.erreur-404{text-align:center}
.erreur-404 .wrap{justify-items:center}
.erreur-404-texte{align-items:center;max-width:44rem}
.erreur-404 .lead{margin-inline:auto}
.erreur-404 .hero-actions{justify-content:center}
.erreur-404-liens{
  list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center;
  font-size:.95rem;
}
.erreur-404-liens a{color:var(--dark-soft);text-decoration:none;position:relative}
.erreur-404-liens a:hover{color:var(--azure)}
.erreur-404-liens li:not(:last-child)::after{content:"·";margin-left:1.6rem;color:var(--indigo-300)}

/* ==========================================================
   2. HÉRO — un seul écran, marine profond
   ========================================================== */
.hero{
  position:relative;overflow:hidden;
  /* Plein écran (retouche client 22.07) : l'accueil occupe toute la
     hauteur de la fenêtre à l'arrivée sur le site */
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 1.5rem) 0 3rem;
  background:
    radial-gradient(52rem 34rem at 82% 8%, rgba(43,109,229,.42), transparent 62%),
    radial-gradient(40rem 30rem at -8% 100%, rgba(91,141,239,.2), transparent 60%),
    var(--navy-950);
}
.hero-shape{
  position:absolute;top:50%;right:4%;z-index:0;
  width:min(56vw, 640px);aspect-ratio:1;
  transform:translateY(-50%);
  animation:shape-in 1.2s var(--ease) both;
  pointer-events:none;
}
.hero-shape img{
  width:100%;height:100%;
  filter:brightness(0) invert(1);
  opacity:.13;
  animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shape-in{from{opacity:0}to{opacity:1}}

.hero .wrap{position:relative;z-index:1;display:grid;gap:var(--s-2);max-width:clamp(1160px, 66vw, 1440px)}
.hero-text{max-width:46rem;display:grid;gap:1.35rem;justify-items:start}
.hero .lead{color:var(--dark-soft);max-width:38rem}

.badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem 1.05rem;border-radius:999px;
  border:1px solid rgba(143,184,240,.4);background:rgba(143,184,240,.08);
  font-size:.92rem;font-weight:500;color:var(--dark-ink);
}
.badge .check{color:var(--azure);font-weight:900}

/* Les badges vivent d'ordinaire dans les heros sombres. Sur une section claire
   (candidature, documents MyAptia), ils reprennent l'encre fonce du theme. */
.theme-light .badge{color:var(--ink);border-color:rgba(43,109,229,.35);background:rgba(43,109,229,.08)}
.theme-light .badge .check{color:#2969DB}

/* Boutons du héro à largeur égale : chaque bouton adopte la largeur
   du plus grand (retouche client 22.07) */
.hero-actions{
  display:flex;flex-wrap:wrap;align-items:stretch;
  max-width:100%;
  gap:.9rem;margin-top:.3rem;
}

/* Entrée orchestrée — une seule fois au chargement */
/* Apparitions : les éléments montent de plus loin, plus lentement, avec un
   atterrissage feutré. L'échelonnement des délais est légèrement élargi pour
   que la cascade se lise. Réglage du 31.07.2026. */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.anim{animation:rise .9s var(--ease-pose) both}
.d1{animation-delay:.06s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}
.d4{animation-delay:.46s}.d5{animation-delay:.6s}

/* ==========================================================
   4. DOUBLE PARCOURS (cartes .duo-* définies plus bas)
   ========================================================== */
.parcours{padding-block:var(--s-section)}

/* ==========================================================
   5. DERNIÈRES OFFRES
   ========================================================== */
.offres{padding-block:var(--s-section)}
.offres-list{display:grid;gap:.9rem;font-variant-numeric:tabular-nums}
.offre{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;
  padding:1.35rem 1.6rem;
  border:1px solid var(--line-dark);border-radius:18px;
  background:rgba(255,255,255,.02);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.offre:hover{transform:translateX(6px);border-color:rgba(143,184,240,.5);background:rgba(91,141,239,.12)}
.offre-main{display:grid;gap:.4rem;min-width:min(100%, 20rem)}
.offre-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;
  font-size:.95rem;color:var(--dark-soft);
}
.offre-meta .dot{color:var(--indigo-300);font-weight:900}
/* Mention imposée par l'art. 18 LSE sur les annonces en location de services.
   Lisible sans être criarde : c'est une information contractuelle, pas un argument. */
.offre-lse{
  margin-top:.9rem;max-width:56ch;
  font-size:.9rem;line-height:1.45;color:var(--dark-soft);
  padding-left:.85rem;border-left:2px solid var(--indigo-300);
}
.pill{
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--azure);
  border:1px solid rgba(143,184,240,.35);background:rgba(91,141,239,.16);
  padding:.22rem .7rem;border-radius:999px;
}
.offre-side{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.offre-date{font-size:.9rem;color:var(--dark-soft);white-space:nowrap}
.btn-postuler{border-color:rgba(143,184,240,.45);color:var(--dark-ink)}
.btn-postuler:hover{background:var(--azure);border-color:var(--azure);color:var(--navy-950)}
.offres-more{margin-top:var(--s-2)}
.offres-more .link-arrow{color:var(--azure);font-size:1.05rem}

/* ==========================================================
   6. SECTEURS
   ========================================================== */
.secteurs{padding-block:var(--s-section)}
.secteurs-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.1rem}
@media (max-width: 1120px){.secteurs-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 560px){.secteurs-grid{grid-template-columns:1fr}}
.secteur{
  background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:1.8rem 1.6rem;display:grid;gap:.7rem;align-content:start;
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.secteur:hover{transform:translateY(-5px);border-color:var(--indigo);box-shadow:0 18px 36px rgba(43,109,229,.12)}
/* La carte .secteur sait desormais vivre sur fond sombre, calquee sur le
   modele des atouts entreprises : fond en transparence, texte adouci clair. */
.theme-dark .secteur, .theme-deep .secteur{
  background:rgba(255,255,255,.03);border-color:var(--line-dark);
}
.theme-dark .secteur p, .theme-deep .secteur p{color:var(--dark-soft)}
.theme-dark .secteur:hover, .theme-deep .secteur:hover{
  border-color:var(--azure);box-shadow:0 18px 36px rgba(6,10,30,.35);
}
.secteur p{color:var(--ink-soft);font-size:.98rem}

/* ==========================================================
   7. PROCESSUS
   ========================================================== */
.processus{padding-block:var(--s-section)}
.process-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:2rem 1.5rem;
  list-style:none;margin:0;padding:0;
}
.step{
  display:grid;gap:.7rem;align-content:start;
  padding-top:1.4rem;border-top:1px solid var(--line-dark);
  transition:border-color .25s var(--ease);
}
.step:hover{border-top-color:var(--azure)}
.step p{color:var(--dark-soft);font-size:.98rem}

/* ==========================================================
   8. FONDATEUR
   ========================================================== */
.fondateur{padding-block:var(--s-section)}
/* Bloc « Notre histoire » de la page À propos, seul utilisateur de cette grille
   depuis le retrait du bloc fondateur de l'accueil : portrait à gauche, citation
   et biographie à droite. En dessous de 940 px, tout s'empile et le portrait se
   centre. Demande du propriétaire du 31.07.2026 : photo plus petite, à gauche. */
.fondateur-grid{
  display:grid;grid-template-columns:minmax(200px, 300px) 1fr;
  gap:clamp(1.6rem, 4vw, 3.2rem);align-items:start;
}
.fondateur-quote{display:grid;gap:1.4rem;justify-items:start;text-align:left;max-width:62ch}
.fondateur-quote figure{margin:0;display:grid;gap:1.4rem;justify-items:start}
@media (max-width: 940px){
  .fondateur-grid{grid-template-columns:1fr}
  .apropos-portrait{justify-self:center}
  .apropos-portrait img{max-width:260px}
}
.fondateur-quote .ast{width:40px;height:40px;color:var(--indigo)}
.fondateur-quote blockquote{
  margin:0;font-size:clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight:700;line-height:1.35;letter-spacing:-0.01em;text-wrap:balance;
}
.fondateur-quote figcaption{font-weight:700;color:var(--indigo)}
.fondateur-appui{color:var(--ink-soft)}
.fondateur-appui a{color:var(--ink);font-weight:700;text-decoration-thickness:2px;text-underline-offset:.25em;font-variant-numeric:tabular-nums}
.fondateur-appui a:hover{color:var(--indigo)}

/* ==========================================================
   9. APPEL FINAL — indigo électrique
   ========================================================== */
.cta{position:relative;overflow:hidden;padding-block:var(--s-section)}
.cta-shape{
  position:absolute;top:50%;left:-16%;z-index:0;
  width:min(56vw, 560px);aspect-ratio:1;transform:translateY(-50%);
  pointer-events:none;
}
.cta-shape img{
  width:100%;height:100%;
  filter:brightness(0) invert(1);opacity:.14;
  animation:spin 90s linear infinite reverse;
}
.cta .wrap{position:relative;z-index:1;display:grid;gap:var(--s-2);justify-items:center;text-align:center}
.cta h2{font-size:clamp(2.1rem, 4.6vw, 3.6rem);max-width:18ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta .btn-ghost-dark{border-color:rgba(255,255,255,.55);color:var(--white)}
.cta .btn-ghost-dark:hover{border-color:var(--white);background:rgba(255,255,255,.12)}

/* ==========================================================
   10. FOOTER
   ========================================================== */
.site-footer{color:var(--dark-ink);--focus:var(--azure)}
.footer-grid{
  display:grid;grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap:var(--s-3);padding-block:var(--s-section) var(--s-3);
}
.footer-brand{display:grid;gap:1.2rem;align-content:start;justify-items:start}
.footer-brand img{height:88px;width:auto;margin-left:-17px} /* compense la zone de protection interne du SVG pour aligner le logo visible sur le texte */
.footer-brand p{color:var(--dark-soft);max-width:26rem;font-size:.98rem}
.footer-h{
  font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--azure);margin:0 0 1.1rem;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.site-footer ul a{
  text-decoration:none;color:var(--dark-soft);
  transition:color .18s var(--ease);
}
.site-footer ul a:hover{color:var(--white);text-decoration:underline;text-underline-offset:.3em}
.site-footer address{font-style:normal;color:var(--dark-soft)}
.footer-bottom{
  border-top:1px solid var(--line-dark);
  padding-block:1.6rem 2.2rem;
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;align-items:center;justify-content:space-between;
  font-size:.88rem;color:var(--dark-soft);
}
.footer-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem !important}
.footer-bottom p{margin:0}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 940px){
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
  .stats dl{grid-template-columns:repeat(2, 1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width: 640px){
  :root{--header-h:88px}
  .brand img{height:62px;margin-left:-12px}
  .hero{padding-bottom:2.25rem}
  .hero-text{gap:1.1rem}
  .hero-actions{display:flex;flex-wrap:wrap;width:100%}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .hero-shape{width:120vw;right:-52%;opacity:.8}
  .offre{flex-direction:column;align-items:stretch}
  .offre-side{justify-content:space-between;width:100%}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ==========================================================
   MOUVEMENT RÉDUIT — tout est coupé
   ========================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==========================================================
   11. FORMULAIRES
   Même langage graphique — jetons clair (défaut) / sombre
   ========================================================== */
:root{
  --field-bg:var(--white);
  --field-border:var(--line-light);
  --field-border-hover:#C6CBE0;
  --field-ink:var(--ink);
  --field-muted:var(--ink-soft);
  --field-placeholder:#667089; /* 4.95:1 sur champ blanc (WCAG AA) */
  --field-accent:var(--indigo);
  --field-ring:rgba(43,109,229,.14);
  --field-check:var(--white);
  --field-error:#B3213A;
  --field-error-ring:rgba(179,33,58,.12);
}
.theme-deep,.theme-dark,.theme-indigo{
  --field-bg:rgba(255,255,255,.05);
  --field-border:rgba(143,184,240,.3);
  --field-border-hover:rgba(143,184,240,.55);
  --field-ink:var(--dark-ink);
  --field-muted:var(--dark-soft);
  --field-placeholder:#8F99C2; /* 5.45:1 sur champ sombre (WCAG AA) */
  --field-accent:var(--azure);
  --field-ring:rgba(143,184,240,.2);
  --field-check:var(--navy-950);
  --field-error:#FF9FB0;
  --field-error-ring:rgba(255,159,176,.16);
}

.form{display:grid;gap:1.4rem}
.form-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1.4rem 1.5rem}
.form-field-full{grid-column:1 / -1}
.form fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:1.4rem}
.form legend{padding:0;margin:0 0 .2rem;font-weight:900;font-size:1.2rem;letter-spacing:-0.01em}

.form-field{display:grid;gap:.5rem;align-content:start}
.form-label{font-weight:700;font-size:.95rem}
.form-label .req{color:var(--field-accent);font-weight:900;margin-left:.15rem}
.form-hint{font-size:.88rem;color:var(--field-muted)}

.form-input,.form-select,.form-textarea{
  width:100%;font:inherit;font-size:1rem;line-height:1.4;
  color:var(--field-ink);background:var(--field-bg);
  border:1.5px solid var(--field-border);border-radius:14px;
  padding:.85rem 1.1rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--field-placeholder);opacity:1}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--field-border-hover)}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--field-accent);box-shadow:0 0 0 4px var(--field-ring);
}
.form-textarea{min-height:9rem;resize:vertical}

.form-select{
  appearance:none;-webkit-appearance:none;
  padding-right:2.9rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23131832' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;background-size:14px;
}
.theme-deep .form-select,.theme-dark .form-select,.theme-indigo .form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23EDEFFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}
.form-select option{color:var(--ink);background:var(--white)}

/* Upload de fichier stylé (CV, dossier) — géré par site.js */
.form-file{
  position:relative;display:grid;gap:.3rem;justify-items:center;text-align:center;
  padding:1.7rem 1.4rem;
  border:1.5px dashed var(--field-border);border-radius:14px;background:var(--field-bg);
  cursor:pointer;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.form-file:hover{border-color:var(--field-border-hover)}
.form-file:focus-within{border-color:var(--field-accent);box-shadow:0 0 0 4px var(--field-ring)}
.form-file input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.form-file-label{font-weight:700;color:var(--field-accent)}
.form-file-name{font-size:.88rem;color:var(--field-muted)}
.form-file.has-file{border-style:solid;border-color:var(--field-accent)}
.form-file.has-file .form-file-name{color:inherit;font-weight:500}

/* Cases à cocher / boutons radio (consentement nLPD, préférences) */
.form-check{display:flex;align-items:flex-start;gap:.8rem;font-size:.93rem;line-height:1.5;color:var(--field-muted);cursor:pointer}
.form-check input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:22px;height:22px;margin:.05rem 0 0;
  border:1.5px solid var(--field-border);border-radius:7px;background:var(--field-bg);
  display:grid;place-content:center;cursor:pointer;
  transition:background-color .18s var(--ease), border-color .18s var(--ease);
}
.form-check input::before{
  content:"";width:12px;height:12px;transform:scale(0);
  background:var(--field-check);
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transition:transform .15s var(--ease);
}
.form-check input[type="radio"]{border-radius:50%}
.form-check input[type="radio"]::before{clip-path:none;border-radius:50%;width:10px;height:10px}
.form-check input:hover{border-color:var(--field-border-hover)}
.form-check input:checked{background:var(--field-accent);border-color:var(--field-accent)}
.form-check input:checked::before{transform:scale(1)}
.form-check a{color:inherit;font-weight:700;text-underline-offset:.2em}
.form-check a:hover{color:var(--field-accent)}

/* Erreurs de champ */
.form-error{font-size:.88rem;font-weight:500;color:var(--field-error)}
.form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea{border-color:var(--field-error)}
.form-field.has-error .form-input:focus,
.form-field.has-error .form-select:focus,
.form-field.has-error .form-textarea:focus{box-shadow:0 0 0 4px var(--field-error-ring)}

/* Messages de formulaire (info / succès / erreur) */
.form-notice{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1.05rem 1.25rem;border-radius:14px;
  border:1.5px solid var(--field-border);background:var(--field-bg);
  font-size:.97rem;line-height:1.5;
}
/* Pictogramme en rotation pendant l'envoi d'un formulaire : le seul moment du
   site où l'attente est réelle (téléversement d'un CV ou de photos). Sa symétrie
   d'ordre trois rend la rotation parfaitement fluide à l'œil. */
.btn .ast{width:17px;height:17px;vertical-align:-2px;margin-right:.45rem}
@keyframes ast-rotation{to{transform:rotate(360deg)}}
.ast-tourne{animation:ast-rotation 1s linear infinite}
@media (prefers-reduced-motion: reduce){
  .ast-tourne{animation:none}
}
/* Champ piège anti-robots : hors écran pour les humains, rempli par les robots. */
.champ-piege{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Résultat d'envoi : succès en vert doux, échec en rouge doux, sur les deux thèmes. */
.form-notice-ok{--notice-accent:#2e9e5b;border-color:rgba(46,158,91,.4)}
.form-notice-erreur{--notice-accent:#c4453c;border-color:rgba(196,69,60,.4)}
.form-notice-erreur a{color:inherit;text-decoration:underline}
.form-notice .ast{width:20px;height:20px;flex:none;margin-top:.2rem;color:var(--notice-accent, var(--field-accent))}
.form-notice p{margin:0}
.form-notice strong{color:var(--notice-accent, var(--field-accent))}

.form-notice-info{--notice-accent:var(--indigo);border-color:rgba(43,109,229,.32);background:rgba(43,109,229,.06)}
.theme-deep .form-notice-info,.theme-dark .form-notice-info,.theme-indigo .form-notice-info{
  --notice-accent:var(--azure);border-color:rgba(143,184,240,.42);background:rgba(91,141,239,.16);
}
.form-notice-success{--notice-accent:#0E7A4F;border-color:rgba(14,122,79,.35);background:rgba(14,122,79,.07)}
.theme-deep .form-notice-success,.theme-dark .form-notice-success,.theme-indigo .form-notice-success{
  --notice-accent:#7FE0B4;border-color:rgba(127,224,180,.4);background:rgba(127,224,180,.1);
}
.form-notice-error{--notice-accent:#B3213A;border-color:rgba(179,33,58,.35);background:rgba(179,33,58,.06)}
.theme-deep .form-notice-error,.theme-dark .form-notice-error,.theme-indigo .form-notice-error{
  --notice-accent:#FF9FB0;border-color:rgba(255,159,176,.42);background:rgba(255,159,176,.1);
}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:.3rem}

@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr}
}

/* ==========================================================
   12. HÉRO DE PAGE INTÉRIEURE — même ADN, format compact
   ========================================================== */
.page-hero{
  position:relative;overflow:hidden;
  min-height:48vh;min-height:48svh;
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(44rem 28rem at 85% -12%, rgba(43,109,229,.42), transparent 62%),
    radial-gradient(32rem 24rem at -10% 115%, rgba(91,141,239,.18), transparent 60%),
    var(--navy-950);
  color:var(--dark-ink);--focus:var(--azure);
}
.page-hero-shape{
  position:absolute;top:50%;right:3%;z-index:0;
  width:min(46vw, 520px);aspect-ratio:1;
  transform:translateY(-50%);
  animation:shape-in 1.2s var(--ease) both;
  pointer-events:none;
}
.page-hero-shape img{
  width:100%;height:100%;
  filter:brightness(0) invert(1);opacity:.2;
  animation:spin 90s linear infinite;
}
.page-hero .wrap{position:relative;z-index:1;display:grid;gap:1.15rem;justify-items:start}
.page-hero h1{font-size:clamp(2.2rem, 5vw, 3.9rem);line-height:1.02;max-width:22ch}
.page-hero .lead{color:var(--dark-soft);max-width:42rem}

@media (max-width: 640px){
  .page-hero{min-height:42vh;min-height:42svh}
  .page-hero-shape{width:90vw;right:-45%;opacity:.8}
}

/* Première section après le héro de page : espacement resserré
   (retouche client 22.07 — l'écart standard faisait un grand vide) */
.page-hero + section{padding-top:clamp(2.4rem, 4.5vw, 3.4rem)}

/* ==========================================================
   13. RÉVÉLATION AU DÉFILEMENT — jouée une seule fois
   (.reveal + .d1….d5 ; .is-revealed ajouté par site.js)
   ========================================================== */
html.js .reveal{opacity:0}
html.js .reveal.is-revealed{animation:rise .95s var(--ease-pose) both}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1}
}

/* ==========================================================
   page: OFFRE-EXEMPLE — détail d'une offre d'emploi
   Classes préfixées .offre-exemple- ; section autonome,
   ajoutée en parallèle des autres pages intérieures.
   ========================================================== */

/* Bandeau discret « maquette » glissé sous le header fixe */
.offre-exemple-bandeau{
  position:absolute;top:var(--header-h);left:0;right:0;z-index:2;
  margin:0;padding:.5rem 1.4rem;
  text-align:center;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azure);
  background:rgba(143,184,240,.07);
  border-block:1px solid var(--line-dark);
}

/* Héro de l'offre : place pour le bandeau, méta plus lisible */
.offre-exemple-hero{padding-top:calc(var(--header-h) + 5.5rem)}
.offre-exemple-hero .offre-meta{font-size:1rem}

/* Fil d'Ariane */
.offre-exemple-crumb{font-size:.92rem;color:var(--dark-soft)}
.offre-exemple-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .65rem}
.offre-exemple-crumb li{display:inline-flex;align-items:center;gap:.65rem}
.offre-exemple-crumb li + li::before{content:"→";color:var(--indigo-300)}
.offre-exemple-crumb a{color:inherit;text-decoration:none}
.offre-exemple-crumb a:hover{color:var(--azure);text-decoration:underline;text-underline-offset:.3em}
.offre-exemple-crumb [aria-current="page"]{color:var(--dark-ink);font-weight:700}

/* Corps : description + carte latérale collante */
.offre-exemple-corps{padding-block:var(--s-section)}
.offre-exemple-grid{
  display:grid;grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  gap:var(--s-3);align-items:start;
}
.offre-exemple-desc{display:grid;gap:var(--s-2)}
.offre-exemple-bloc{display:grid;gap:.95rem;justify-items:start}
.offre-exemple-bloc h2{font-size:clamp(1.4rem, 2.2vw, 1.8rem)}
.offre-exemple-bloc p{color:var(--ink-soft)}
.offre-exemple-bloc .lead{color:var(--ink)}
.offre-exemple-bloc ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.offre-exemple-bloc ul li{position:relative;padding-left:1.55rem;color:var(--ink-soft)}
.offre-exemple-bloc ul li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:.8rem;height:3px;border-radius:2px;
  background:linear-gradient(90deg, var(--azure), var(--indigo));
}
.offre-exemple-bloc .link-arrow{color:var(--indigo)}

/* Carte latérale récapitulative */
.offre-exemple-side{
  position:sticky;top:calc(var(--header-h) + 1.5rem);
  display:grid;gap:1.1rem;
}
.offre-exemple-card{
  background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:clamp(1.5rem, 2.6vw, 2rem);
  display:grid;gap:1.25rem;align-content:start;
}
.offre-exemple-card h2{font-size:1.15rem}
.offre-exemple-card .btn{justify-self:stretch}
.offre-exemple-recap{margin:0;display:grid;gap:.75rem;font-variant-numeric:tabular-nums}
.offre-exemple-recap > div{
  display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.75rem;border-bottom:1px solid var(--line-light);
}
.offre-exemple-recap > div:last-child{padding-bottom:0;border-bottom:0}
.offre-exemple-recap dt{color:var(--ink-soft);font-size:.92rem}
.offre-exemple-recap dd{margin:0;font-weight:700;text-align:right}
.offre-exemple-contact{display:grid;gap:.5rem}
.offre-exemple-contact p{color:var(--ink-soft);font-size:.95rem}
.offre-exemple-contact a{
  color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;
  text-decoration-thickness:2px;text-underline-offset:.25em;
}
.offre-exemple-contact a:hover{color:var(--indigo)}
.offre-exemple-promesse{
  display:flex;align-items:flex-start;gap:.6rem;margin:0;
  padding:.85rem 1.05rem;border-radius:14px;
  border:1px solid rgba(43,109,229,.25);background:rgba(43,109,229,.05);
  font-size:.92rem;color:var(--ink-soft);
}
.offre-exemple-promesse .check{color:var(--indigo);font-weight:900}

/* Formulaire de candidature */
.offre-exemple-candidature{padding-block:var(--s-section)}
.offre-exemple-form{max-width:46rem}
.offre-exemple-form button.btn{font-family:inherit}

@media (max-width: 940px){
  .offre-exemple-grid{grid-template-columns:1fr}
  .offre-exemple-side{position:static}
}

/* ==========================================================
   page: entreprises
   ========================================================== */
/* Rythme vertical des sections propres à la page */
.entreprises-section{padding-block:var(--s-section)}

/* Fiches services — cartes claires (.secteur) en 2 × 2 */
.entreprises-services{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap:1.1rem;
}

/* Atouts de la proximité — cartes sombres */
.entreprises-atouts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap:1.1rem;
}
.entreprises-atout{
  border:1px solid var(--line-dark);border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:1.8rem 1.6rem;display:grid;gap:.7rem;align-content:start;
  transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.entreprises-atout:hover{transform:translateY(-5px);border-color:rgba(143,184,240,.5);background:rgba(91,141,239,.12)}
.entreprises-atout .ast{width:21px;height:21px;color:var(--azure)}
.entreprises-atout p{color:var(--dark-soft);font-size:.98rem}

/* Formulaire « Confier un recrutement » */
.entreprises-form{max-width:56rem}
.entreprises-promesse{font-size:.95rem;font-weight:500}

/* ==========================================================
   page: candidats
   Styles propres à candidats.html — préfixe .candidats-
   ========================================================== */

/* Rythme des sections propres à la page */
.candidats-section{padding-block:var(--s-section)}

/* Candidature spontanée : intro et formulaire côte à côte */
.candidats-candidature-grid{
  display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
  gap:var(--s-3);align-items:start;
}
.candidats-candidature-intro{display:grid;gap:1.15rem;justify-items:start;align-content:start}
.candidats-candidature-intro .lead{color:var(--ink-soft)}
.candidats-candidature-intro a{font-weight:700;text-underline-offset:.25em}
.candidats-candidature-intro a:hover{color:var(--azure)}
.candidats-form button{font-family:inherit}

/* FAQ candidats en accordéon */
.candidats-faq{display:grid;gap:.85rem;max-width:48rem}
.candidats-faq details{
  background:var(--white);border:1px solid var(--line-light);border-radius:16px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.candidats-faq details[open]{border-color:var(--indigo);box-shadow:0 16px 32px rgba(43,109,229,.1)}
.candidats-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;cursor:pointer;list-style:none;
}
.candidats-faq summary::-webkit-details-marker{display:none}
/* Les questions ne sont plus des h3 : un titre dans un summary perd sa
   semantique selon les lecteurs d’ecran, le summary est deja le bouton. */
.candidats-faq summary .faq-question{font-size:1.08rem;font-weight:700;color:var(--ink)}
.candidats-faq summary::after{
  content:"+";flex:none;width:30px;height:30px;
  display:grid;place-content:center;
  border:1.5px solid var(--line-light);border-radius:50%;
  font-size:1.2rem;font-weight:500;line-height:1;color:var(--indigo);
  transition:transform .22s var(--ease), background-color .22s var(--ease),
             border-color .22s var(--ease), color .22s var(--ease);
}
.candidats-faq details[open] summary::after{
  transform:rotate(45deg);
  background:var(--indigo);border-color:var(--indigo);color:var(--white);
}
.candidats-faq-body{display:grid;gap:.6rem;padding:0 1.4rem 1.35rem;color:var(--ink-soft)}
.candidats-faq-body a{color:var(--ink);font-weight:700;text-underline-offset:.25em}
.candidats-faq-body a:hover{color:var(--indigo)}

@media (max-width: 940px){
  .candidats-candidature-grid{grid-template-columns:1fr}
}

/* ==========================================================
   page: offres — barre de filtres, compteur, accroches,
   état vide et état actif du menu
   ========================================================== */

/* Barre de filtres */
/* Moteur de recherche des postes : trois menus déroulants compacts qui
   remplacent l'ancienne barre de puces (secteur, région, type), jugée trop
   étalée. Les régions ont disparu : elles évoluent avec les mandats. */
.offres-recherche{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr);
  gap:1rem;margin-bottom:1.6rem;
}
@media (max-width:820px){.offres-recherche{grid-template-columns:1fr}}
.offres-champ{display:grid;gap:.45rem}
.offres-poste-ligne{display:flex;gap:.6rem;align-items:stretch}
.offres-poste-ligne select{flex:1;min-width:0}
.offres-poste-voir{flex:none;padding:.65rem 1.1rem;font-size:.9rem}
.offres-poste-voir:disabled{opacity:.45;cursor:not-allowed;transform:none}
.offres-champ label{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark-soft);
}
.offres-champ select{
  appearance:none;-webkit-appearance:none;
  width:100%;padding:.85rem 2.6rem .85rem 1.05rem;
  font:inherit;font-weight:500;color:var(--dark-ink);
  background:rgba(255,255,255,.06);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238FB8F0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  border:1px solid rgba(143,184,240,.35);border-radius:12px;
  cursor:pointer;transition:border-color .22s var(--ease), background-color .22s var(--ease);
}
.offres-champ select:hover{border-color:rgba(143,184,240,.7)}
.offres-champ select:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.offres-champ select option{color:#131832;background:#fff}

.offres-resultats{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.6rem 1.5rem;margin-bottom:1.1rem;
}
.offres-compteur{font-weight:700;color:var(--azure);font-variant-numeric:tabular-nums}
.offres-reset{
  background:none;border:0;padding:.2rem 0;cursor:pointer;
  font:inherit;font-size:.92rem;font-weight:700;color:var(--dark-soft);
  text-decoration:underline;text-underline-offset:.3em;
  transition:color .18s var(--ease);
}
.offres-reset:hover{color:var(--white)}

/* Accroche courte dans la carte d'offre */
.offres-accroche{font-size:.95rem;color:var(--dark-soft);max-width:54ch}

/* Le display des composants prime sur [hidden] : on le rétablit ici */
.offres-list .offre[hidden]{display:none}
.offres-vide[hidden]{display:none}

/* État vide */
.offres-vide{
  display:grid;gap:1rem;justify-items:center;text-align:center;
  padding:clamp(2.2rem, 5vw, 3.5rem) clamp(1.4rem, 3vw, 2.5rem);
  border:1.5px dashed rgba(143,184,240,.35);border-radius:var(--radius);
}
.offres-vide .ast{width:36px;height:36px;color:var(--azure)}
.offres-vide p{color:var(--dark-soft);max-width:46ch}
.offres-vide-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:.4rem}

/* Paragraphe d'appui du bloc final indigo */
.offres-cta-lead{color:var(--white);max-width:52ch} /* blanc pur : 4.75:1 sur indigo */

/* ==========================================================
   page: a-propos
   ========================================================== */
/* Section générique de la page (padding standard) */
.apropos-section{padding-block:var(--s-section)}

/* Biographie du fondateur : le bloc parent est centré (héritage de la citation),
   mais un récit en plusieurs paragraphes se lit aligné à gauche. */
.apropos-bio{display:grid;gap:.95rem;text-align:left;justify-self:stretch}
.apropos-bio p{color:var(--ink-soft)}

/* Portrait du fondateur, format vertical, note de remplacement.
   Centré : depuis que la grille fondateur est en colonne unique (retrait de la
   poignée de main sur l'accueil), le portrait se pose au-dessus de la citation
   centrée et doit suivre le même axe. */
.apropos-portrait{margin:0;display:grid;gap:.7rem;justify-items:start;align-content:start}
/* Le cadre est porté par <picture>, l'élément réellement posé dans la grille :
   posé sur l'image seule, le ratio était écrasé par l'étirement de la grille.
   Même montage que .fondateur-photo et .duo-photo, qui fonctionne partout. */
.apropos-portrait picture{
  display:block;width:min(100%, 340px);aspect-ratio:3/4;
  overflow:hidden;border-radius:var(--radius);
}
.apropos-portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* Marqueur de pre-publication : surligne en jaune pour la derniere relecture. */
.apropos-photo-note{font-size:.85rem;color:#4a3b00;background:#ffe977;padding:.3rem .6rem;border-radius:8px;display:inline-block}

/* Espace réservé visible « À COMPLÉTER » — lisible sur fond clair et sombre */
.apropos-a-completer{
  border:1.5px dashed #D9A400;border-radius:14px;
  padding:.85rem 1.05rem;
  font-size:.93rem;line-height:1.5;color:#6B5A00;background:#FFF7D6;
}
.theme-deep .apropos-a-completer,
.theme-dark .apropos-a-completer{
  border-color:rgba(143,184,240,.35);background:rgba(255,255,255,.04);color:var(--dark-soft);
}

/* Cartes d'engagement (section sombre) */
.apropos-engagements{display:grid;grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));gap:1.1rem}
.apropos-engagement{
  border:1px solid var(--line-dark);border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:1.8rem 1.6rem;
  display:grid;gap:.75rem;align-content:start;justify-items:start;
  transition:transform .22s var(--ease), border-color .22s var(--ease);
}
.apropos-engagement:hover{transform:translateY(-5px);border-color:rgba(143,184,240,.5)}
.apropos-engagement .check{
  width:36px;height:36px;border-radius:999px;
  display:grid;place-content:center;
  border:1px solid rgba(143,184,240,.4);background:rgba(143,184,240,.1);
  color:var(--azure);font-weight:900;
}
.apropos-engagement p{color:var(--dark-soft);font-size:.98rem}
.apropos-engagement .link-arrow{color:var(--azure);font-size:.95rem;margin-top:.2rem}

/* ==========================================================
   page: contact
   ========================================================== */

/* Deux colonnes : coordonnées + formulaire */
.contact-section{padding-block:var(--s-section)}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.contact-col{
  display:grid;gap:var(--s-2);align-content:start;
  scroll-margin-top:calc(var(--header-h) + 1rem);
}
.contact-col .section-head{margin-bottom:0}

/* Coordonnées en grand corps */
.contact-list{margin:0;display:grid;gap:1.45rem}
.contact-item{display:grid;gap:.35rem}
.contact-item dt{
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#2969DB; /* indigo assombri d'un cran : 4.66:1 sur papier */
}
.contact-item dd{
  margin:0;
  font-size:clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight:700;letter-spacing:-0.01em;line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.contact-item dd a{
  color:inherit;text-decoration-thickness:2px;text-underline-offset:.22em;
  transition:color .18s var(--ease);
}
.contact-item dd a:hover{color:var(--indigo)}
.contact-item address{font-style:normal}
.contact-note{display:block;margin-top:.2rem;font-size:.85rem;font-weight:500;color:var(--ink-soft)}

/* Carte Google Maps */
.contact-map{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-light);background:var(--white);
  aspect-ratio:16/10;
}
.contact-map iframe{display:block;width:100%;height:100%;border:0}
/* État d'attente de la carte : aucune requête vers Google avant le clic. */
.contact-map-attente{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:1.6rem;text-align:center;
  background:linear-gradient(160deg, var(--gris, #F4F5FA), #fff);
}
.contact-map-attente .ast{width:26px;height:26px;color:var(--indigo)}
.contact-map-attente p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:40ch}
.contact-map-note{font-size:.8rem}
.contact-map-note a{color:var(--indigo)}

/* Carte du formulaire */
.contact-form-card{
  background:var(--white);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:clamp(1.6rem, 3.4vw, 2.5rem);
  display:grid;gap:1.4rem;
}

@media (max-width: 940px){
  .contact-grid{grid-template-columns:1fr}
}

/* ==========================================================
   page: politique-confidentialite
   ========================================================== */

/* Lien de pied de page actif (aria-current) — règle générique
   volontairement non préfixée : un doublon identique venu d'une
   autre page légale est inoffensif. */
.footer-legal a[aria-current="page"]{color:var(--white)}

.confidentialite-section{padding-block:var(--s-section)}
.confidentialite-banniere{margin-bottom:var(--s-3)}

/* Deux colonnes : sommaire collant + article */
.confidentialite-layout{
  display:grid;
  grid-template-columns:minmax(0, .55fr) minmax(0, 1.45fr);
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.confidentialite-sommaire{
  position:sticky;top:calc(var(--header-h) + 1.5rem);
  display:grid;gap:1.1rem;align-content:start;
}
.confidentialite-sommaire ol{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.1rem;
  border-left:2px solid var(--line-light);
}
.confidentialite-sommaire a{
  display:flex;align-items:baseline;gap:.7rem;
  padding:.42rem 0 .42rem 1.05rem;
  margin-left:-2px;border-left:2px solid transparent;
  text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink-soft);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.confidentialite-sommaire a:hover{color:var(--ink);border-left-color:var(--indigo)}

/* Article : blocs titrés, corps de texte confortable */
.confidentialite-article{display:grid;gap:clamp(2.4rem, 4vw, 3.4rem);max-width:70ch}
.confidentialite-bloc{display:grid;gap:.9rem;align-content:start}
.confidentialite-bloc h2{font-size:clamp(1.35rem, 2.3vw, 1.75rem);letter-spacing:-0.01em}
.confidentialite-bloc p,
.confidentialite-bloc li{color:var(--ink-soft)}
.confidentialite-bloc strong{color:var(--ink)}
.confidentialite-bloc ul{margin:0;padding-left:1.25rem;display:grid;gap:.55rem}
.confidentialite-bloc li::marker{color:var(--indigo)}
.confidentialite-bloc a{
  color:var(--ink);font-weight:700;
  text-decoration-thickness:2px;text-underline-offset:.22em;
  transition:color .18s var(--ease);
}
.confidentialite-bloc a:hover{color:var(--indigo)}
.confidentialite-adresse{
  font-style:normal;font-weight:700;color:var(--ink);line-height:1.55;
  padding-left:1.05rem;border-left:2px solid var(--indigo);
}

/* Espace réservé visible « À COMPLÉTER » */
.confidentialite-a-completer{
  border:1.5px dashed #D9A400;border-radius:14px;
  padding:.85rem 1.05rem;
  font-size:.93rem;line-height:1.5;color:#6B5A00;background:#FFF7D6;
}
.confidentialite-maj{font-size:.9rem}

/* page: mentions-legales */
span.confidentialite-a-completer{display:inline-block;padding:.15rem .55rem;border-radius:8px;margin:.15rem 0;}

/* ==========================================================
   Pictogrammes (les touches roses de l'essai du 21.07 ont été
   retirées le 23.07.2026 à la demande du client)
   ========================================================== */

/* Pictogrammes des étapes du processus */
.step-icon{width:26px;height:26px;color:var(--azure);margin-bottom:.85rem}

/* (Essai « héro images » du 21.07.2026 retiré le 22.07 — code mort supprimé) */

/* Retouche client 22.07.2026 : titre du héro d'accueil un peu plus contenu */
.hero h1{font-size:clamp(2.2rem, 5.2vw, 4.5rem)}

/* Suivez-nous (footer) — LinkedIn uniquement */
.footer-social{margin-top:1.6rem}
.footer-social .footer-h{margin-bottom:.7rem}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:rgba(143,184,240,.14);color:var(--dark-ink);
  transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.footer-social a:hover{background:var(--indigo);color:#fff;transform:translateY(-2px)}
.footer-social svg{width:22px;height:22px;fill:currentColor}

/* Horaires (page contact) : petit tableau aligné, façon fiche Google */
.contact-horaires{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;max-width:22rem}
.contact-horaires li{display:flex;justify-content:space-between;align-items:first baseline;gap:1.25rem}
.contact-horaires li span:first-child{color:var(--ink-soft);white-space:nowrap}
.contact-horaires li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}

/* Affiliations (footer) — swissstaffing & temptraining */
.footer-labels{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.75rem;padding-block:1.5rem;border-top:1px solid var(--line-dark)}
.footer-labels ul{display:flex;align-items:center;flex-wrap:wrap;gap:1.1rem;margin:0;padding:0;list-style:none}
.footer-labels a{display:inline-flex;border-radius:12px}
.label-carte{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:.55rem 1rem}
.label-carte img{height:26px;width:auto;display:block}
.label-blanc{height:34px;width:auto;display:block;opacity:.95}
.footer-labels-note{font-size:.82rem;line-height:1.5;color:var(--dark-soft);max-width:56ch;margin:0}

/* ==========================================================
   ÉVOLUTION MAQUETTE CLIENT — 21.07.2026
   Cartes entreprise/candidat, approche en colonnes, bandeau secteurs
   ========================================================== */

/* Cartes double parcours */
.duo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media (max-width:940px){.duo-grid{grid-template-columns:1fr}}
.duo-card{
  background:#EAF0FC;border-radius:var(--radius);
  padding:clamp(1.4rem,2.5vw,2rem);
  display:flex;flex-direction:column;gap:1.15rem;
}
.duo-head{display:grid;grid-template-columns:minmax(0,1fr) 42%;gap:1.2rem;align-items:stretch}
@media (max-width:560px){.duo-head{grid-template-columns:1fr}.duo-photo{display:none}}
.duo-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--indigo);color:var(--white);margin-bottom:.85rem;
}
.duo-badge svg{width:24px;height:24px}
.duo-card h2{font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.15}
.duo-text > p{margin-top:.6rem;color:var(--ink-soft);font-size:.97rem}
.duo-photo{
  margin:0;border-radius:16px;overflow:hidden;min-height:220px;
  clip-path:polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.duo-photo img{width:100%;height:100%;object-fit:cover}
.duo-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.duo-list li{display:flex;gap:.6rem;align-items:center;font-size:.95rem;font-weight:500}
.duo-list svg{width:18px;height:18px;color:var(--indigo);flex:none}
.duo-card > .btn{align-self:flex-start;margin-top:.2rem}

/* Notre approche */
.approche{padding:var(--s-section) 0 var(--s-3)}
.approche-grid{display:grid;grid-template-columns:minmax(180px,230px) 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media (max-width:940px){.approche-grid{grid-template-columns:1fr}}
.approche-intro h2{font-size:clamp(1.55rem,2.6vw,2.1rem)}
.approche-trait{display:block;width:44px;height:3px;background:var(--indigo);border-radius:2px;margin:.9rem 0}
.approche-intro p{color:var(--ink-soft)}
.approche-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.approche-etapes{grid-template-columns:repeat(2,1fr);gap:1.6rem 0}}
@media (max-width:560px){.approche-etapes{grid-template-columns:1fr;gap:1.4rem}}
.approche-etapes li{padding:0 1.25rem;border-left:1px solid var(--line-light);display:grid;gap:.45rem;align-content:start}
.approche-etapes li:first-child{border-left:none;padding-left:0}
@media (max-width:940px){.approche-etapes li:nth-child(3){border-left:none;padding-left:0}}
@media (max-width:560px){.approche-etapes li{border-left:none;padding:0}}
.approche-etapes .step-icon{color:var(--indigo);width:30px;height:30px;margin-bottom:.25rem}
.approche-etapes h3{font-size:1.05rem}
.approche-etapes p{font-size:.92rem;color:var(--ink-soft)}

/* Bandeau secteurs */
.secteurs-strip{padding:var(--s-3) 0 var(--s-section)}
.secteurs-strip .strip{
  background:var(--navy-950);color:var(--dark-ink);
  border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.3rem) clamp(1.6rem,3.5vw,2.8rem);
  display:grid;grid-template-columns:minmax(190px,250px) 1fr;
  gap:clamp(1.5rem,3vw,2.8rem);align-items:center;
}
@media (max-width:940px){.secteurs-strip .strip{grid-template-columns:1fr}}
.strip-titre{font-weight:700;font-size:1.1rem;line-height:1.4;margin:0}
.strip-trait{display:block;width:36px;height:3px;background:var(--azure);border-radius:2px;margin-top:.7rem}
.strip-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5, 1fr);gap:.9rem}
@media (max-width: 1120px){.strip-liste{grid-template-columns:repeat(3, 1fr)}}
@media (max-width: 640px){.strip-liste{grid-template-columns:repeat(2, 1fr)}}
.strip-liste li{
  display:grid;justify-items:center;align-content:center;gap:.6rem;
  text-align:center;font-size:.95rem;font-weight:500;line-height:1.3;
  padding:1.15rem .9rem;
  border:1px solid var(--line-dark);border-radius:14px;
  background:rgba(255,255,255,.03);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.strip-liste li:hover{transform:translateY(-3px);border-color:rgba(143,184,240,.5);background:rgba(91,141,239,.12)}
.strip-liste svg{width:26px;height:26px;color:var(--azure)}

@media (max-width: 940px){
  .confidentialite-layout{grid-template-columns:1fr}
  .confidentialite-sommaire{position:static}
}

/* ==========================================================
   page: OFFRE — détail d'une offre : la page Eolia est
   encastrée dans le site (iframe). Son bandeau d'en-tête gris
   est masqué par recadrage (--crop) ; notre héro affiche le
   titre à sa place. Le visiteur ne quitte jamais le site.
   ========================================================== */
.offre-detail-hero{min-height:0;padding-bottom:clamp(2rem, 4vw, 3rem)}
.offre-detail-hero .offre-meta{font-size:1.05rem}
.offre-detail-retour{font-size:.95rem;margin:0}
.offre-detail-retour a{color:var(--dark-soft);text-decoration:none;transition:color .18s var(--ease)}
.offre-detail-retour a:hover{color:var(--azure);text-decoration:underline;text-underline-offset:.3em}
/* (l'ancien affichage par iframe .offre-embed a été remplacé le 23.07.2026
   par le rendu natif .offre-detail-* défini plus bas) */

/* ==========================================================
   ÉVOLUTION 22.07.2026 — nouveaux services
   Payrolling & Try + Hire (entreprises) ; programme de
   recommandation (candidats).
   ========================================================== */

/* Panneau payrolling — bandeau marine sous les cartes services,
   même ADN que le bandeau secteurs de l'accueil */
.payroll-strip{
  scroll-margin-top:calc(var(--header-h) + 1rem);
  margin-top:clamp(2.6rem, 4.5vw, 4rem);
  background:var(--navy-950);color:var(--dark-ink);--focus:var(--azure);
  border-radius:var(--radius);
  padding:clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3.5vw, 2.8rem);
  display:grid;grid-template-columns:minmax(240px, 1.1fr) 1.6fr;
  gap:clamp(1.5rem, 3vw, 2.8rem);align-items:center;
}
@media (max-width: 940px){.payroll-strip{grid-template-columns:1fr}}
.payroll-intro h3{font-size:clamp(1.3rem, 2.2vw, 1.7rem);line-height:1.15}
.payroll-intro p{color:var(--dark-soft);margin-top:.8rem;font-size:.97rem}
.payroll-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, 1fr);gap:.9rem 1.6rem}
@media (max-width: 640px){.payroll-points{grid-template-columns:1fr}}
.payroll-points li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;font-weight:500}
.payroll-points svg{width:18px;height:18px;color:var(--azure);flex:none;margin-top:.15rem}
.payroll-note{
  grid-column:1 / -1;margin:0;
  font-size:.85rem;line-height:1.55;color:var(--dark-soft);
  border-top:1px solid var(--line-dark);padding-top:1.1rem;
}

/* Grands écrans (≥ 1800 px) : contenu plus large (voir .wrap) et
   texte légèrement agrandi pour garder les proportions */
@media (min-width: 1800px){
  html{font-size:112%}
}

/* Étapes : flèche à la place du grand numéro (retouche client 22.07).
   Au survol, la flèche glisse vers la droite : l'aptitude en mouvement. */
.step .step-fleche{
  font-size:clamp(2.2rem, 3.4vw, 3rem);font-weight:900;line-height:1;
  color:var(--indigo-300);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.step:hover .step-fleche{color:var(--azure);transform:translateX(8px)}

/* page: CARRIERE — postes internes chez Aptia */
.carriere-poste .btn{justify-self:start;margin-top:.5rem}
.carriere-note{margin-top:1.3rem;font-size:.95rem;color:var(--dark-soft);max-width:60ch}
.carriere-note a{color:var(--dark-ink)}
.carriere-form{max-width:56rem}

/* Recommandation (page candidats) — étapes compactes numérotées */
.reco-grid{
  display:grid;grid-template-columns:minmax(240px, 1.05fr) 1.5fr;
  gap:clamp(1.8rem, 4vw, 3.5rem);align-items:start;
}
@media (max-width: 940px){.reco-grid{grid-template-columns:1fr}}
.reco-intro p{color:var(--dark-soft);margin-top:.8rem}
.reco-etapes{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.reco-etapes li{
  display:flex;gap:1rem;align-items:flex-start;
  border:1px solid var(--line-dark);border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:1.05rem 1.25rem;
}
/* Flèche à la place du numéro, comme les étapes des processus */
.reco-etapes li::before{
  content:'→';
  font-size:1.1rem;font-weight:900;
  color:var(--azure);
  margin-top:.1rem;
}
.reco-etapes h3{font-size:1.02rem;margin-bottom:.25rem}
.reco-etapes p{color:var(--dark-soft);font-size:.93rem}
.reco-note{margin-top:1.1rem;font-size:.85rem;color:var(--dark-soft)}
.reco-intro .btn{margin-top:1.3rem}

/* ==========================================================
   Bandeaux visuels (images d'ambiance) — ajoutés le 23.07.2026
   ========================================================== */
/* Ancrage (à propos) : vue aérienne d'OASSIS entre le texte et les secteurs */
.ancrage-visuel{margin:clamp(1.6rem, 3vw, 2.6rem) 0 clamp(2rem, 4vw, 3rem)}
.ancrage-image{
  display:block;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16 / 9;
  box-shadow:0 22px 60px rgba(19,24,50,.12);
}
.ancrage-image img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}
.ancrage-visuel figcaption{
  margin-top:.85rem;font-size:.9rem;color:var(--ink-soft);text-align:center;
}

/* Accès & mobilité (page contact) : icônes des cartes */
.acces-icon{width:30px;height:30px;color:var(--azure);margin-bottom:.9rem}

/* Carrière : image d'équipe en bandeau, à cheval sur le héro sombre */
.carriere-visuel{
  /* La remontee doit rester INFERIEURE au padding bas du hero
     (clamp 2.5rem/5vw/4rem), sinon la photo recouvre les boutons. */
  margin:calc(-1 * clamp(1.5rem, 3.5vw, 3rem)) 0 0;
  position:relative;z-index:2;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16 / 6;
  box-shadow:0 22px 60px rgba(19,24,50,.18);
}
.carriere-visuel img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width: 640px){
  .ancrage-image, .carriere-visuel{aspect-ratio:16 / 9}
  .carriere-visuel{margin-top:1.5rem}
}

/* ==========================================================
   OFFRE NATIVE (démo 23.07.2026) — fiche d'emploi affichée
   dans notre design, sans iframe. Candidature = lien direct.
   ========================================================== */
.offre-detail-corps{padding-block:clamp(2.5rem, 5vw, 4rem) var(--s-section)}
.offre-detail-grid{
  display:grid;grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
  gap:clamp(2rem, 4vw, 3.5rem);align-items:start;
}
@media (max-width: 940px){.offre-detail-grid{grid-template-columns:1fr}}

/* Colonne principale : description + profil */
.offre-detail-bloc{margin-bottom:2.2rem}
.offre-detail-bloc h2{
  font-size:clamp(1.25rem, 2.2vw, 1.6rem);color:var(--indigo);
  margin-bottom:.9rem;letter-spacing:-0.01em;
}
.offre-detail-bloc p{color:var(--ink-soft);margin-bottom:.8rem;line-height:1.65}
.offre-detail-bloc strong{color:var(--ink);font-weight:700}
/* Intitulés de sections des annonces Eolia (« VOTRE MISSION »…), convertis
   en vrais h3 par la synchro pour être navigables au lecteur d'écran. */
.offre-soustitre{font-size:1rem;font-weight:700;color:var(--ink);margin:1.5rem 0 .55rem;letter-spacing:.02em}
.offre-detail-bloc ul{margin:0 0 .8rem;padding-left:1.3rem;display:grid;gap:.5rem}
.offre-detail-bloc li{color:var(--ink-soft);line-height:1.55}
.offre-detail-bloc li::marker{color:var(--indigo)}

/* Colonne latérale : carte collante avec faits + candidature */
.offre-detail-aside{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1.2rem}
.offre-detail-carte{
  background:#EAF0FC;border-radius:var(--radius);
  padding:clamp(1.4rem, 2.5vw, 1.9rem);
}
.offre-detail-faits{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.85rem}
.offre-detail-faits li{display:grid;gap:.1rem}
.offre-detail-faits .cle{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.offre-detail-faits .val{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.offre-detail-carte .btn{width:100%;justify-content:center}
.offre-detail-carte-note{margin-top:.9rem;font-size:.85rem;color:var(--ink-soft);line-height:1.5;text-align:center}
.offre-detail-partage{font-size:.9rem;color:var(--ink-soft)}
.offre-detail-partage a{color:var(--indigo);font-weight:600}

/* Titre ou libellé présent pour les lecteurs d'écran et les moteurs, invisible à l'écran */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================
   FINITIONS PREMIUM (26.07.2026)
   Verre dépoli, lueurs et élévation, inspirés de la maquette
   maquettes/presentation-premium.html. Retour arrière : tag
   git socle-seo-v1.
   ========================================================== */

/* 1) Header en verre dépoli une fois la page défilée */
.site-header.is-scrolled{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.is-scrolled{background:var(--white)}
}

/* 2) Boutons principaux : lueur azur au survol */
.btn-indigo:hover{box-shadow:0 14px 34px rgba(43,109,229,.42)}
.btn-light:hover{box-shadow:0 14px 34px rgba(143,184,240,.35)}

/* 3) Cartes sombres : ombre d'élévation plus riche au survol */
.offre{transition:transform .22s var(--ease), border-color .22s var(--ease),
       background-color .22s var(--ease), box-shadow .22s var(--ease)}
.entreprises-atout{transition:transform .22s var(--ease), border-color .22s var(--ease),
       background-color .22s var(--ease), box-shadow .22s var(--ease)}
.offre:hover{box-shadow:0 18px 40px rgba(6,10,30,.35)}
.entreprises-atout:hover{box-shadow:0 20px 44px rgba(6,10,30,.4)}

/* 4) Liseré lumineux en haut des cartes sombres */
.offre, .entreprises-atout{position:relative}
.offre::before, .entreprises-atout::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(143,184,240,.55), transparent);
  border-radius:1px;pointer-events:none;
}