/* =====================================================================
   Human Talent Consulting — Feuille de style principale
   Cabinet de recrutement & conseil RH
   ---------------------------------------------------------------------
   Sommaire
   01. Tokens (couleurs, typo, espacements, ombres)
   02. Reset & base
   03. Utilitaires & layout
   04. Boutons, badges, pills
   05. Topbar + Header / Navigation
   06. Hero & bandeaux de page
   07. Sections & titres
   08. Cartes (expertises, offres, articles, publications)
   09. Chiffres clés, process, témoignages, logos
   10. Offres d'emploi : filtres, liste, fiche
   11. Formulaires (contact, dépôt de CV multi-étapes)
   12. Accordéon FAQ, compte à rebours, programme salon
   13. Pagination, fil d'ariane, alertes
   14. Footer
   15. Animations & reveal
   16. Responsive
   ===================================================================== */

/* ==== 01. TOKENS ==================================================== */
@import "tokens-196SSYQ.css";

/* ==== 02. RESET & BASE ============================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--topbar-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }

/* Taille par défaut de toute icône SVG inline (faible spécificité : toute
   règle plus précise — .btn svg, .card__icon svg, etc. — garde priorité).
   Sans ce filet, une icône déposée sans conteneur dimensionné (ex. dans
   une liste de pied de page ou un lien de pagination) s'affiche à sa
   taille intrinsèque et casse la mise en page. */
svg[aria-hidden="true"] {
  width: 1.15em; height: 1.15em; flex: none;
  display: inline-block; vertical-align: -0.2em;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy-900);
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -.02em;
  font-weight: 800;
}

h1 { font-size: clamp(2.15rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 700; }
h4 { font-size: 1.08rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sky-700); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--navy-700); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

strong { color: var(--navy-800); font-weight: 650; }
small { font-size: .84rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--sky-200); color: var(--navy-900); }

/* Les adresses e-mail et URL longues ne doivent jamais casser la grille */
a[href^="mailto:"], a[href^="http"] { overflow-wrap: anywhere; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-900); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==== 03. UTILITAIRES & LAYOUT ====================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }
.container--wide { max-width: 1360px; }
/* Barre de navigation : le menu + CTA "Nous contacter" regroupés et centrés
   (voir .site-header__menu) ont besoin de plus de place que le contenu
   éditorial classique — avec le --container standard (1340px), leur
   contenu centré déborde parfois par-dessus le logo. Largeur illimitée ici,
   seul le padding-inline (gutter) est conservé pour garder le même alignement
   visuel que le reste du site. */
.container--fluid { max-width: none; }

.grid { display: grid; gap: 28px; }
/* Empilement vertical sûr : la colonne ne peut pas dépasser son conteneur */
.stack { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.stack--sm { gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 10px; }
.gap-md { gap: 18px; }
.gap-lg { gap: 32px; }
.wrap { flex-wrap: wrap; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 26px; }
.mt-lg { margin-top: 48px; }
.mb-0 { margin-bottom: 0 !important; }
.no-list { list-style: none; padding: 0; margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.lead { font-size: 1.14rem; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.accent { color: var(--sky-600); }

.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.on-dark .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }

/* ==== 04. BOUTONS, BADGES ========================================== */
.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: .96rem; letter-spacing: -.01em;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer;
  text-align: center;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
  position: relative; overflow: hidden;
  will-change: transform;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-3px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Le remplissage en dégradé est peint sur un calque ::before légèrement
   surdimensionné (inset négatif) puis rogné par le overflow:hidden du
   bouton : ça évite le liseré d'une autre couleur qui peut apparaître aux
   deux extrémités d'une pilule très arrondie (écart d'anti-aliasing entre
   le rectangle du dégradé et la courbe du border-radius). */
.btn--primary { background: none; box-shadow: var(--sh-sky); }
.btn--primary::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: var(--grad-brand);
}
.btn--primary:hover { box-shadow: 0 22px 46px rgba(33, 167, 224, .38); }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .75s var(--ease); pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }

/* CTA principal du hero : légère pulsation pour attirer l'œil sans gêner
   la lecture (respecte prefers-reduced-motion, voir section 15). */
.hero__cta .btn--primary { animation: cta-pulse 2.6s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: var(--sh-sky); }
  50% { box-shadow: 0 22px 50px rgba(33, 167, 224, .5); }
}

.btn--sky { background: var(--sky-500); }
.btn--sky:hover { background: var(--sky-600); }

.btn--ghost {
  background: transparent; color: var(--navy-800);
  border-color: rgba(11, 43, 71, .18);
}
.btn--ghost:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.btn--light { background: #fff; color: var(--navy-800); }
.btn--light:hover { color: var(--navy-900); }

/* Même logique que .hero__card : fond sombre plus opaque plutôt qu'un
   voile blanc à peine visible, pour que le bouton se détache nettement du
   décor animé du hero (seul usage actuel — voir home/index.html.twig). */
.btn--outline-light {
  background: rgba(6, 18, 33, .5); color: #fff;
  border-color: rgba(255, 255, 255, .34);
  backdrop-filter: blur(10px);
}
.btn--outline-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

.btn--sm { padding: 10px 20px; font-size: .88rem; }
.btn--lg { padding: 18px 36px; font-size: 1.03rem; }
.btn--block { width: 100%; }

.btn-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; color: var(--sky-700);
}
.btn-link svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.btn-link:hover svg { transform: translateX(5px); }

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--font-display);
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--sky-100); color: var(--sky-700);
}
.badge--navy { background: rgba(11, 43, 71, .08); color: var(--navy-700); }
.badge--success { background: rgba(18, 163, 123, .12); color: var(--success); }
.badge--warn { background: rgba(226, 149, 43, .14); color: #a76a12; }
.badge--light { background: rgba(255, 255, 255, .13); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.badge--dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.badge--sm { font-size: 15px; padding: 4px 12px; gap: 5px; letter-spacing: .03em; }
/* Priorité renforcée : le badge posé sur une image de carte (post__media,
   job-card...) doit toujours rester ce format, quel que soit l'ordre des
   règles ailleurs dans ce fichier. */
.post__media .badge.badge--sm { font-size: 15px; padding: 4px 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sky-600); margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 34px; height: 2px; border-radius: 2px;
  background: var(--grad-sky);
}
.on-dark .eyebrow { color: var(--sky-300); }
/* Repère seul (ex. "Nos solutions", page Découvrez-nous) : même style que
   les eyebrows "Solution #01" etc., juste un peu plus affirmé. Pas de
   marge propre : il tient lieu de titre de toute sa section (qui n'a pas
   d'autre contenu), le rythme avec la section suivante vient donc du
   padding-top standard de cette dernière, pas d'un cumul des deux. */
.eyebrow--lg { font-size: 1.05rem; margin-bottom: 0; }
.eyebrow--lg::before { width: 44px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-xs);
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: .74rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}

/* ==== 05. TOPBAR + HEADER ========================================== */
.topbar {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .78);
  font-size: .84rem;
  height: var(--topbar-h);
  display: flex; align-items: center;
  /* --alert-bar-h (0px par défaut, mesurée en JS voir app.js:alertBar) :
     laisse la place au bandeau d'annonce au-dessus quand il est actif, lui
     aussi sticky — sans ça les deux se disputeraient top:0 et le bandeau
     d'annonce recouvrirait la barre du haut dès qu'on scrolle. */
  position: sticky; top: var(--alert-bar-h, 0px); z-index: 101;
}
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: #fff; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar__list { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.topbar__list li { margin: 0; display: flex; align-items: center; gap: 7px; }
.topbar__list svg { width: 15px; height: 15px; opacity: .8; }
.topbar__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .2); }
.topbar .social-btn { width: 27px; height: 27px; background: rgba(255, 255, 255, .12); }
.topbar .social-btn svg { width: 13px; height: 13px; }
.topbar .social-btn:hover { background: var(--sky-500); transform: none; }
.topbar__socials { display: flex; gap: 7px; }

.site-header {
  position: sticky; top: calc(var(--alert-bar-h, 0px) + var(--topbar-h)); z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 30px rgba(11, 43, 71, .09); background: rgba(255, 255, 255, .96); }

.site-header__inner {
  /* Logo + menu (nav + CTA) forment un seul bloc de taille naturelle,
     centré sur toute la largeur (voir .container--fluid) — pas de "flex:1"
     ici qui étirerait le menu et laisserait le logo collé à gauche. Repasse
     en logo-à-gauche/burger-à-droite sous 1340px, voir ce breakpoint plus bas. */
  display: flex; align-items: center; justify-content: center;
  gap: 24px; height: var(--header-h);
}

/* Logo — wordmark SVG unique (pictogramme + texte intégrés au tracé, voir
   partials/_logo.html.twig) : .logo__mark ne pilote que la hauteur, la
   largeur suit automatiquement le viewBox (ratio 2:1). */
.logo { display: inline-flex; align-items: center; flex: none; }
/* Sélecteur .logo .logo__mark (et non .logo__mark seul) : nécessaire pour
   passer devant svg[aria-hidden="true"] (taille par défaut des icônes,
   voir plus haut) qui matcherait sinon en premier — le SVG du logo porte
   aria-hidden="true" comme n'importe quelle icône décorative. */
.logo .logo__mark { height: 64px; width: auto; flex: none; }

/* Navigation principale */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { margin: 0; position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 650; font-size: .84rem;
  color: var(--navy-800); padding: 11px 8px; border-radius: var(--r-sm);
  white-space: nowrap; position: relative;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--grad-sky);
  transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease);
}
.nav__link:hover { color: var(--sky-700); background: var(--sky-050); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__item.is-active > .nav__link { color: var(--sky-700); }
.nav__item.is-active > .nav__link::after { transform: scaleX(1); }

/* Item optionnel (Salon de l'emploi) : l'espace est prévu, l'affichage est piloté par la config */
.nav__item--optional > .nav__link { }

/* "Découvrez-nous" : un peu plus voyant que les autres liens texte pour
   inciter les entreprises à cliquer, sans rivaliser avec le bouton plein
   "Nous contacter" (voir .nav__contact-cta). */
.nav__link--highlight {
  font-weight: 800; color: var(--sky-700);
  background: var(--sky-050); border: 1px solid var(--sky-100);
}
.nav__link--highlight:hover { background: var(--sky-100); }
.nav__item.is-active > .nav__link--highlight { background: var(--sky-100); }
.nav__flag {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sky-500); box-shadow: 0 0 0 4px rgba(33, 167, 224, .18);
  animation: pulse 2.4s infinite;
}

/* Menu de l'événement en cours (libellé = titre de l'événement, voir
   partials/_header.html.twig) : actif/survol et le point animé reprennent
   la couleur dominante de l'événement plutôt que le bleu de marque, quand
   elle est définie (repli sur ce même bleu sinon — voir --event-accent). */
.nav__link--event-accent:hover,
.nav__item.is-active > .nav__link--event-accent { color: var(--event-accent, var(--sky-700)); }
.nav__link--event-accent:hover { background: color-mix(in srgb, var(--event-accent, var(--sky-500)) 8%, transparent); }
.nav__link--event-accent::after { background: var(--event-accent, var(--grad-sky)); }
.nav__flag--event-accent {
  background: var(--event-accent, var(--sky-500));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--event-accent, var(--sky-500)) 18%, transparent);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(33, 167, 224, .18); }
  50% { box-shadow: 0 0 0 8px rgba(33, 167, 224, 0); }
}

/* Sous-menu */
.nav__submenu {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 246px; padding: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .28s var(--ease);
}
.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__submenu li { margin: 0; }
.nav__submenu a {
  display: block; padding: 10px 14px; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 600; color: var(--navy-800);
}
.nav__submenu a:hover { background: var(--sky-050); color: var(--sky-700); }
.nav__caret { width: 13px; height: 13px; opacity: .5; }

/* Regroupe la navigation et le CTA "Nous contacter" à côté du logo : les
   deux ensemble forment le bloc centré par .site-header__inner (voir
   ci-dessus). Pas de "flex:1"/"min-width:0" ici en desktop : ce bloc garde
   sa taille naturelle pour que le centrage porte sur logo+menu ensemble,
   pas sur le menu seul étiré dans tout l'espace restant. Redevient
   extensible (aligné à droite, à côté du burger) une fois la nav masquée,
   voir le breakpoint 1340px plus bas. */
.site-header__menu { display: flex; align-items: center; justify-content: center; gap: 24px; flex: none; }

/* CTA "Nous contacter" mis en avant dans le header, distinct des liens de
   navigation classiques : c'est l'action qu'on veut le plus inciter. */
.nav__contact-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: .87rem;
  color: #fff; background: var(--grad-brand);
  padding: 11px 20px; border-radius: var(--r-pill);
  box-shadow: 0 10px 24px rgba(33, 167, 224, .28);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  white-space: nowrap;
}
.nav__contact-cta svg { width: 16px; height: 16px; flex: none; }
.nav__contact-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(33, 167, 224, .36); }
.nav__contact-cta.is-active { background: var(--navy-800); }

.social-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--sky-500); color: #fff;
  transition: transform .28s var(--ease), background-color .28s var(--ease);
}
.social-btn svg { width: 17px; height: 17px; }
.social-btn:hover { background: var(--navy-800); color: #fff; transform: translateY(-3px); }
.social-btn--outline {
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}
.social-btn--outline:hover { background: var(--sky-500); border-color: var(--sky-500); }

/* Couleurs de marque : identifie Facebook/LinkedIn au premier coup d'œil
   plutôt qu'une même pastille bleu ciel générique pour les deux réseaux. */
.social-btn--facebook { background: #1877f2; }
.social-btn--facebook:hover { background: #0d5dc7; }
.social-btn--linkedin { background: #0a66c2; }
.social-btn--linkedin:hover { background: #084e94; }
.social-btn--outline.social-btn--facebook { background: rgba(24, 119, 242, .16); border-color: rgba(24, 119, 242, .4); }
.social-btn--outline.social-btn--facebook:hover { background: #1877f2; border-color: #1877f2; }
.social-btn--outline.social-btn--linkedin { background: rgba(10, 102, 194, .16); border-color: rgba(10, 102, 194, .4); }
.social-btn--outline.social-btn--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.topbar .social-btn--facebook { background: rgba(24, 119, 242, .28); }
.topbar .social-btn--facebook:hover { background: #1877f2; }
.topbar .social-btn--linkedin { background: rgba(10, 102, 194, .28); }
.topbar .social-btn--linkedin:hover { background: #0a66c2; }

/* Burger */
.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line);
  background: #fff; border-radius: var(--r-sm); cursor: pointer;
  position: relative; flex: none;
}
.burger span {
  position: absolute; left: 13px; width: 20px; height: 2px; border-radius: 2px;
  background: var(--navy-800); transition: all .3s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* Drawer mobile */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw);
  background: #fff; z-index: 200; padding: 26px 24px 40px;
  transform: translateX(100%); transition: transform .42s var(--ease);
  overflow-y: auto; box-shadow: -20px 0 60px rgba(11, 43, 71, .18);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.drawer__close {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--navy-800);
}
.drawer__close svg { width: 18px; height: 18px; }
.drawer__list { list-style: none; margin: 0 0 28px; padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--line-2); }
.drawer__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 4px; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--navy-900);
}
.drawer__list a:hover, .drawer__list li.is-active a { color: var(--sky-600); }
.overlay {
  position: fixed; inset: 0; background: rgba(4, 18, 32, .48);
  backdrop-filter: blur(3px); z-index: 150; opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.overlay.is-open { opacity: 1; visibility: visible; }

/* ==== 06. HERO & BANDEAUX ========================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-deep);
  color: rgba(255, 255, 255, .84);
  padding: clamp(40px, 5vw, 68px) 0 clamp(56px, 7vw, 92px);
}
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero__inner { position: relative; z-index: 2; }
.hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center;
}
.hero__title { margin-bottom: 22px; }
.hero__title .gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.hero__text { font-size: 1.16rem; max-width: 34em; color: rgba(255, 255, 255, .92); }
.hero__sep { color: var(--sky-400); font-weight: 700; margin: 0 2px; }

/* Même principe que .hero__sep ci-dessus, pour un titre de section classique
   (voir page/expertises.html.twig, "Nos valeurs") plutôt qu'un h1 sur fond
   sombre : liste de valeurs séparées par des puces colorées au lieu de
   phrases ponctuées de points. */
.value-sep { display: inline-block; color: var(--sky-400); margin: 0 4px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Slogan mis en évidence, utilisé sur des fonds sombres (héros de l'accueil,
   bandeau "Découvrez-nous") : plus affirmé qu'un simple .lead pour porter la
   promesse de marque, sans aller jusqu'au poids visuel du titre. */
.slogan {
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  line-height: 1.4; letter-spacing: -.01em; color: var(--sky-300); margin: 0 0 18px;
}

/* décor : halos + particules */
.hero__glow {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
.hero__glow--1 {
  width: 560px; height: 560px; background: rgba(33, 167, 224, .34); top: -180px; right: -120px;
  animation: drift-1 16s ease-in-out infinite;
}
.hero__glow--2 {
  width: 420px; height: 420px; background: rgba(70, 188, 237, .18); bottom: -200px; left: -140px;
  animation: drift-2 20s ease-in-out infinite;
}
/* Touche chaleureuse ("humaine") au milieu du duo de halos bleu ciel,
   réservée au hero de l'accueil (voir home/index.html.twig). */
.hero__glow--3 {
  width: 300px; height: 300px; background: rgba(226, 149, 43, .16); top: 38%; right: 24%;
  animation: drift-3 24s ease-in-out infinite;
}
@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 26px) scale(1.08); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(26px, -22px) scale(1.06); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18px, 22px) scale(1.1); }
}
.hero__dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 72%);
}
/* Remplace .hero__dots (repli statique, laissé dans le HTML pour le cas où
   JS est désactivé/désactive l'effet — voir app.js:heroParticles) par un
   champ de particules animées en canvas, qui réagissent au passage de la
   souris. */
/* Fondu centré neutre : sert aussi bien la bannière large à deux colonnes de
   l'accueil (.hero) que celles, plus courtes et à une seule colonne, de
   toutes les autres pages (.pagehead). */
.hero__particles {
  position: absolute; inset: 0; pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%);
}
.hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.hero__wave svg { width: 100%; height: 70px; }

/* Réseau humain animé : réservé au hero de l'accueil (home/index.html.twig),
   traduit le cœur de métier — des talents reliés entre eux — plutôt qu'un
   décor purement géométrique. Estompé derrière le bloc de texte via le
   masque radial pour ne jamais nuire à la lisibilité. */
.hero__network {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* Repli générique (bandeaux pagehead, texte pleine hauteur sur fond
     court) : large zone centrale masquée. Le hero de l'accueil affine ce
     masque ci-dessous, avec la vraie position de son bloc de texte. */
  mask-image: radial-gradient(ellipse 68% 78% at 20% 52%, transparent 0%, transparent 40%, #000 68%);
  -webkit-mask-image: radial-gradient(ellipse 68% 78% at 20% 52%, transparent 0%, transparent 40%, #000 68%);
}
/* Hero de l'accueil : disposition à deux colonnes connue (texte à gauche,
   carte "dernières offres" à droite), donc masque rectangulaire précis
   plutôt que le halo générique ci-dessus — seule la bande occupée par le
   titre + slogan + liste de services est occultée (union de deux
   dégradés : visible dès qu'on sort de la plage en X OU en Y). Tout le
   reste du bandeau — colonne de gauche sous le texte, marge tout à
   gauche, colonne de droite — peut recevoir des nœuds sans jamais passer
   "derrière" une lettre. */
.hero .hero__network {
  mask-image:
    linear-gradient(to right, transparent 0%, transparent 44%, #000 58%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 16%, transparent 26%, transparent 40%, #000 50%, #000 100%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 44%, #000 58%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 16%, transparent 26%, transparent 40%, #000 50%, #000 100%);
}
.hero__network svg { width: 100%; height: 100%; display: block; }
.hero__network .hero__network-line {
  opacity: .32; stroke-dasharray: 5 9; animation: network-flow 6s linear infinite;
}
.hero__network .hero__network-node {
  animation: node-float 7s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes network-flow {
  to { stroke-dashoffset: -140; }
}
@keyframes node-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Recherche d'offres dans le hero */
.searchbar {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  background: rgba(255, 255, 255, .97); padding: 12px;
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); margin-top: 38px;
}
.searchbar__field { position: relative; display: flex; align-items: center; }
.searchbar__field svg {
  position: absolute; left: 15px; width: 18px; height: 18px; color: var(--sky-600); pointer-events: none;
}
.searchbar input, .searchbar select {
  width: 100%; border: 0; background: transparent;
  padding: 14px 14px 14px 44px; font: inherit; font-size: .95rem; color: var(--ink);
  border-radius: var(--r-sm); appearance: none;
}
.searchbar input:focus, .searchbar select:focus { outline: none; background: var(--sky-050); }
.searchbar input::placeholder { color: var(--ink-3); }

/* Carte flottante hero */
/* Fond nettement moins transparent qu'un simple voile blanc (l'ancien
   rgba(255,255,255,.07) laissait trop deviner le décor animé derrière) :
   verre dépoli sombre, plus opaque, qui se détache clairement du hero tout
   en gardant un léger flou du fond visible en transparence. */
.hero__card {
  position: relative; overflow: hidden;
  background: rgba(6, 18, 33, .58);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(20px);
  border-radius: var(--r-xl); padding: 30px;
  box-shadow: 0 30px 80px rgba(4, 18, 32, .38);
}
.hero__card h3 { font-size: 1.1rem; margin-bottom: 20px; }
/* Badge "Le conseil RH" : couleur ambre (au lieu du blanc translucide
   générique) pour trancher avec le bleu dominant du bloc et attirer l'œil
   en premier, avant le titre — étoile en repère visuel du repère "conseil". */
.hero__card-badge {
  font-size: .92rem; padding: 8px 18px; gap: 8px;
  background: linear-gradient(120deg, #f5b544, var(--warning));
  color: var(--navy-950); font-weight: 800;
  box-shadow: 0 10px 26px rgba(226, 149, 43, .38);
}
.hero__card-badge svg { width: 15px; height: 15px; flex: none; }
/* Filigrane décoratif en haut à droite de la carte — assez d'opacité pour
   vraiment se voir, tout en restant nettement en retrait du texte au
   premier plan (icône/badge/titre, tous centrés, restent lisibles).
   z-index négatif (et non 0) : .hero__card crée déjà son propre contexte
   d'empilement via backdrop-filter, donc un enfant positionné en z-index:0
   peinturerait par-dessus le texte normal (non positionné) plutôt que
   derrière — seul un z-index négatif le repasse sous le contenu. */
.hero__card-watermark {
  position: absolute; right: 0; top: 0; z-index: -1;
  width: 150px; opacity: 1; pointer-events: none;
  border-radius: 0 var(--r-xl) 0 var(--r-md);
}
/* Titre centré, en capitales avec un léger espacement des lettres pour un
   rendu plus affirmé qu'un simple h3 — la première ligne ("Le conseil RH")
   revient à la ligne pour créer un vrai temps fort avant le complément. */
.hero__card-title {
  margin: 0; font-size: 1.28rem; line-height: 1.38; color: #fff;
  text-align: center; text-transform: uppercase; letter-spacing: .02em;
}
.hero__card-rule {
  display: block; width: 44px; height: 3px; margin: 16px auto 22px;
  border-radius: var(--r-pill); background: var(--grad-sky);
}
.hero__card-cta {
  margin-top: 4px; font-size: 1rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.mini-job {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
  margin-bottom: 12px;
}
.mini-job:hover { transform: translateX(6px); background: rgba(255, 255, 255, .16); }
.mini-job__logo {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center; background: var(--grad-sky);
  font-family: var(--font-display); font-weight: 800; color: var(--navy-900); font-size: .95rem;
}
.mini-job__logo svg { width: 20px; height: 20px; }
.mini-job__body { flex: 1; min-width: 0; }
.mini-job__title { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: .97rem; }
.mini-job__meta { font-size: .82rem; color: rgba(255, 255, 255, .62); }
/* Ni localisation réelle, ni contrat, ni mode de travail (offres importées
   sans ces informations, voir templates/home/index.html.twig) : la ligne
   meta est masquée, le titre seul se recentre verticalement à la place. */
.mini-job--title-only { align-items: center; }
.mini-job--title-only .mini-job__title { font-size: 1.05rem; }
/* Flèche "voir l'offre" : même icône que les boutons "Voir l'offre" des
   cartes (voir _job_card.html.twig), en repli sur cette carte flottante où
   toute la ligne est déjà cliquable. */
.mini-job__view { flex: none; align-self: center; margin-left: auto; padding-left: 6px; color: rgba(255, 255, 255, .45); transition: color .3s var(--ease), transform .3s var(--ease); }
.mini-job__view svg { width: 16px; height: 16px; display: block; }
.mini-job:hover .mini-job__view { color: #fff; transform: translateX(3px); }

/* Bandeau de page interne */
.pagehead {
  position: relative; overflow: hidden;
  background: var(--grad-deep); color: rgba(255, 255, 255, .8);
  padding: clamp(30px, 3.6vw, 48px) 0 clamp(26px, 3vw, 40px);
}
.pagehead h1 { color: #fff; margin-bottom: 16px; }
.pagehead__inner { position: relative; z-index: 2; max-width: 960px; }
.pagehead__text { font-size: 1.08rem; color: rgba(255, 255, 255, .76); }
.pagehead__text strong { color: #fff; }

/* Bannière événement, systématiquement affichée à la largeur du conteneur et
   jamais recadrée (l'image garde son ratio d'origine, voir .event-banner
   img ci-dessous) — sur la page événement elle-même (event/show.html.twig)
   comme sur la fiche d'une offre événement, son formulaire de candidature
   ou le bloc événement de l'accueil (job_offer/show.html.twig,
   job_application/new.html.twig, home/index.html.twig). Ces trois derniers
   ont besoin d'afficher du texte (titre, badges...) : plutôt que de le
   superposer sur l'image (ce qui forcerait à la recadrer pour garantir un
   fond assez haut), il prend place dans un grand bandeau plein-couleur sous
   l'image (.event-banner__footer), à la couleur dominante de l'événement. */
.event-banner__footer {
  position: relative; z-index: 1;
  background: var(--event-accent, var(--navy-800));
  color: rgba(255, 255, 255, .88);
  padding: clamp(22px, 3.4vw, 36px) clamp(22px, 4vw, 44px);
}
.event-banner__footer h1, .event-banner__footer h2 { color: #fff; margin-bottom: 8px; }

/* L'espace restant à gauche/droite du conteneur reçoit un dégradé animé à
   la couleur dominante de l'événement plutôt qu'une bande vide, pour un
   effet plus soigné. */
.event-banner-wrap {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-950), var(--event-accent, var(--sky-700)) 160%);
  padding: clamp(28px, 4vw, 48px) 0;
}
.event-banner-wrap__glow {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  background: var(--event-accent, var(--sky-400));
  animation: event-glow-float 9s ease-in-out infinite;
  pointer-events: none;
}
.event-banner-wrap__glow--1 { width: 380px; height: 380px; top: -160px; left: -120px; }
.event-banner-wrap__glow--2 { width: 300px; height: 300px; bottom: -140px; right: -80px; animation-delay: -4.5s; }
@keyframes event-glow-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, -24px) scale(1.18); }
}
.event-banner {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -24px rgba(4, 18, 32, .5);
  border-bottom: 5px solid var(--event-accent, var(--sky-500));
}
.event-banner img {
  display: block; width: 100%; height: auto;
  animation: event-banner-in 1.1s var(--ease) both;
}
@keyframes event-banner-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

/* Thème événement (voir .event-themed, posé sur un conteneur avec
   --event-accent défini en style inline à partir de la couleur dominante
   de l'événement) : les étapes de candidature et les blocs reprennent
   cette couleur plutôt que le bleu de marque par défaut. */
.event-themed .stepper__item.is-done .stepper__dot { background: var(--event-accent); border-color: var(--event-accent); }
.event-themed .stepper__item.is-current .stepper__dot { border-color: var(--event-accent); color: var(--event-accent); box-shadow: none; }
.event-themed .stepper__bar::after { background: var(--event-accent); }
.event-themed .form-card, .event-themed .aside-card {
  border-top: 4px solid var(--event-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--event-accent) 7%, #fff), #fff);
}
/* "Offre événement", "L'essentiel" et "Comment ça marche" sont tous des
   .aside-card (voir job_offer/show.html.twig et job_application/new.html.twig) :
   leurs icônes reprennent aussi la couleur dominante plutôt que le bleu de
   marque par défaut. */
.event-themed .spec-list svg, .event-themed .check-list svg { color: var(--event-accent); }
/* .btn--primary est transparent ("background: none") : son remplissage
   visible est peint par le calque ::before (voir section 04), pas par sa
   propre couleur de fond — c'est donc ::before qu'il faut teinter ici. */
.event-themed .btn--primary::before { background: var(--event-accent); }
.event-themed .eyebrow::before { background: var(--event-accent); }
/* "X offres" + "Les postes à pourvoir" (voir event/show.html.twig) : la
   couleur dominante de l'événement plutôt que le bleu de marque par défaut
   (.eyebrow) ou le navy par défaut (h2, voir section 07). */
.event-themed .section-head .eyebrow { color: var(--event-accent); }
.event-themed .section-head h2 { color: var(--event-accent); }

/* Offre événement mise en évidence (voir partials/_job_card.html.twig) :
   le bleu par défaut de .job-card--featured est remplacé par la couleur
   dominante de l'événement, sans dépendre d'un wrapper .event-themed —
   utile dans les grilles où toutes les cartes ne sont pas des offres
   événement (accueil, offres similaires...). Repli sur le même bleu que les
   autres offres mises en évidence quand aucune couleur n'est définie. */
.job-card--featured.job-card--event {
  border-color: var(--event-accent, var(--sky-300));
  background: linear-gradient(180deg, color-mix(in srgb, var(--event-accent, var(--sky-400)) 12%, #fff), #fff);
}
.job-card--event .btn--primary::before { background: var(--event-accent, var(--sky-500)); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  list-style: none; padding: 0; margin: 0 0 20px; font-size: .86rem;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .6); }
.breadcrumb a { color: rgba(255, 255, 255, .78); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li + li::before { content: "/"; opacity: .45; }

/* ==== 07. SECTIONS ================================================= */
.section { padding: clamp(46px, 6vw, 80px) 0; }
.section--sm { padding: clamp(34px, 4vw, 54px) 0; }
.section--tint { background: var(--paper-2); }
.section--sky { background: linear-gradient(180deg, var(--sky-050), #fff); }
.section--dark {
  background: var(--grad-deep); color: rgba(255, 255, 255, .8);
  position: relative; overflow: hidden;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, .74); }

/* "Nos packs" (accueil) : même principe que .section--dark, dégradé de
   marque (bleu ciel -> marine) plutôt que le marine profond, pour se
   distinguer visuellement de la section "Chiffres" plus bas sur la page. */
.section--brand {
  background: var(--grad-brand); color: rgba(255, 255, 255, .85);
  position: relative; overflow: hidden;
}
.section--brand h2, .section--brand h3, .section--brand h4 { color: #fff; }
.section--brand .eyebrow { color: rgba(255, 255, 255, .92); }
.section--brand .eyebrow::before { background: #fff; }

.packs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pack-card {
  position: relative; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: 34px 34px; display: flex; flex-direction: column; align-items: center;
  text-align: center; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* Filet d'accent qui se révèle au survol, même principe que .card::before. */
.pack-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.pack-card:hover { transform: translateY(-10px); box-shadow: 0 34px 70px rgba(11, 43, 71, .18); }
.pack-card:hover::before { transform: scaleX(1); }
/* Réaffirme la couleur par défaut des titres : .section--brand h3 (plus
   haut) les met en blanc pour le fond dégradé de la section, ce qui rendait
   ce titre invisible sur le fond blanc de la carte elle-même. */
.pack-card h3 { margin: 8px 0 6px; color: var(--navy-900); }
/* Petit séparateur sous le titre de chaque pack, même langage que
   .eyebrow::before (barre courte au dégradé de marque). */
.pack-card__title-sep {
  display: block; width: 36px; height: 3px; border-radius: var(--r-pill);
  background: var(--grad-brand); margin: 0 0 14px;
}
.pack-card p { width: 100%; margin: 0; color: var(--ink-2); text-align: left; }

/* Icône illustrée (voir home/index.html.twig, images/packs/) présentée
   directement sur le fond blanc de la carte — pas de badge circulaire
   derrière, qui écraserait ses propres couleurs. Volontairement grande pour
   bien ressortir en haut de carte. */
.pack-card__icon {
  width: 96px; height: 96px; flex: none;
  transition: transform .45s var(--ease);
}
.pack-card:hover .pack-card__icon { transform: scale(1.08) rotate(-4deg); }

/* margin: auto 0 0 (pas seulement margin-top) : une balise <hr> a une
   margin-bottom par défaut du navigateur (~.5em) — en ne réinitialisant que
   margin-top précédemment, cette marge basse restait et s'ajoutait au <br>
   qui suit dans le gabarit, creusant un grand vide avant le premier item de
   la liste de coches malgré margin-top:0 ci-dessous sur .check-list. */
.pack-card__divider { width: 100%; border: none; border-top: 1px solid var(--line); margin: auto 0 0; padding-top: 34px; }
/* Le filet est ainsi ancré en bas de chaque carte (marge automatique en
   flex column) : les 3 cartes ont la même hauteur (étirées par .packs-grid)
   mais des textes de longueurs différentes au-dessus — sans cette ancre, le
   début de la liste ne tombait pas sur la même ligne d'une carte à l'autre. */
.pack-card .check-list { width: 100%; margin-top: 0; }
/* Coches plus affirmées que le bleu ciel discret utilisé ailleurs
   (.check-list par défaut) : couleur de marque plus foncée + texte en
   navy semi-gras plutôt que le gris-bleu neutre de .pack-card p, pour que
   la liste ressorte davantage que le paragraphe d'intro. */
.pack-card .check-list li { text-align: left; }
.pack-card .check-list svg { color: var(--sky-600); }
.pack-card .check-list span { color: var(--navy-800); font-weight: 500; }

/* CTA "Ça m'intéresse" : pilule pleine largeur au dégradé de marque, avec
   une pastille pour l'icône plutôt qu'une simple icône nue — renvoie vers
   le formulaire de contact avec l'objet pré-rempli ET verrouillé (voir
   home/index.html.twig et ContactController::index, même mécanisme que les
   CTA "Recruter avec nous" / "Décrire mon besoin"). */
.pack-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin-top: 22px; padding: 14px 22px;
  border-radius: var(--r-pill); background: var(--grad-brand); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .96rem;
  box-shadow: var(--sh-sky);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pack-card__cta:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(33, 167, 224, .38); color: #fff; }
.pack-card__cta-icon {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22);
}
.pack-card__cta-icon svg { width: 17px; height: 17px; }

.section-head { max-width: 720px; margin-bottom: 38px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { margin-bottom: 0; }

/* Page "Découvrez-nous" (nos expertises) : sections plus resserrées que le
   rythme vertical par défaut du site, propre à cette page uniquement. */
.page-expertises .section { padding: clamp(28px, 3.4vw, 46px) 0; }
.page-expertises .section--sm { padding: clamp(20px, 2.6vw, 32px) 0; }
/* Titre de bannière un peu long sur cette page : réduit par rapport à la
   taille par défaut de h1 pour rester lisible en une ou deux lignes. */
.page-expertises .pagehead h1 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }

/* Page d'accueil : elle empile déjà beaucoup de sections (offres, cabinet,
   expertises, chiffres, méthode...), donc un rythme vertical resserré évite
   l'impression de défilement sans fin. */
.page-home .section { padding: clamp(30px, 3.6vw, 50px) 0; }
.page-home .section--sm { padding: clamp(22px, 2.8vw, 34px) 0; }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.split--media-first > .split__media { order: -1; }

.media-frame { position: relative; }
.media-frame__img {
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 3; background: var(--grad-brand);
  display: grid; place-items: center; color: rgba(255,255,255,.55);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; font-size: .8rem;
  text-transform: uppercase; text-align: center; padding: 20px;
}
.media-frame__badge {
  position: absolute; bottom: -26px; left: -26px;
  background: #fff; border-radius: var(--r-lg); padding: 20px 24px;
  box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 14px;
  max-width: 260px;
}
.media-frame__badge strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-900); line-height: 1; }
.media-frame__badge span { font-size: .82rem; color: var(--ink-3); }

/* Vidéo YouTube "lite" : miniature + bouton play, l'iframe (et son
   tracking) n'est chargée qu'au clic. Voir App\Service\SiteSettings et le
   filtre Twig youtube_id. */
.video-embed {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--sh-lg); cursor: pointer;
  background: var(--grad-brand);
}
.video-embed img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s var(--ease); }
.video-embed:hover img, .video-embed:focus-visible img { opacity: 1; }
.video-embed__play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.video-embed__play-circle {
  width: 78px; height: 78px; flex: none; border-radius: 50%; background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(4, 18, 32, .35);
  transition: transform .3s var(--ease);
}
.video-embed__play-circle svg { width: 34px; height: 34px; color: var(--navy-900); }
.video-embed:hover .video-embed__play-circle, .video-embed:focus-visible .video-embed__play-circle { transform: scale(1.1); }

/* Recouvrement plein écran de chargement (voir app.js:showBrandLoadingOverlay
   et admin.js:loadingOverlay) : bloque les clics et affiche le logo animé
   jusqu'à ce que la nouvelle page remplace celle-ci — un seul et même
   recouvrement pour toute navigation qui recharge la page (menus
   principaux, filtres/tri/recherche des offres, pagination). */
.page-loading-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .6); backdrop-filter: blur(1px);
  opacity: 0; transition: opacity .2s var(--ease);
}
.page-loading-overlay.is-visible { opacity: 1; }

.page-loading-overlay--brand {
  /* Fond clair (et non le dégradé marine de la marque) : le logo garde ses
     couleurs fixes (bleu ciel + marine, voir _logo.html.twig) — le texte
     "CONSULTING" en marine serait quasi invisible sur un fond marine foncé. */
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
}
/* La marque (place-items: center du parent) est déjà centrée à la lettre
   près sur toute la hauteur de l'écran — vérifié en mesurant sa position
   réelle. Le pictogramme (plus "lourd" visuellement, en haut) et le texte
   sur deux lignes (en bas) donnent malgré tout une impression de logo posé
   trop haut : léger décalage optique vers le bas pour compenser. */
.page-loading-overlay__brand { display: grid; place-items: center; transform: translateY(8px); }
.page-loading-overlay__mark {
  height: 88px; width: auto;
  animation: page-loading-mark-pulse 1.1s ease-in-out infinite;
}
@keyframes page-loading-mark-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.86); opacity: .75; }
}

/* Popup de lecture : injecté en JS (voir app.js:videoEmbed) au clic sur la
   miniature, plutôt que de remplacer la miniature en place. */
.video-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
}
.video-modal__backdrop {
  position: absolute; inset: 0; background: rgba(4, 18, 32, .84);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease);
}
.video-modal__box {
  position: relative; width: min(920px, 100%); aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-lg);
  transform: scale(.94); opacity: 0;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}
.video-modal.is-open .video-modal__backdrop { opacity: 1; }
.video-modal.is-open .video-modal__box { transform: scale(1); opacity: 1; }
.video-modal__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close {
  position: absolute; top: -48px; right: 0; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
  transition: background-color .25s var(--ease);
}
.video-modal__close:hover { background: rgba(255, 255, 255, .26); }
.video-modal__close svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .video-modal__close { top: -44px; }
}
.media-frame::after {
  content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1;
  border-radius: var(--r-xl); border: 2px dashed var(--sky-200);
}

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 13px; align-items: flex-start; margin: 0; }
.check-list svg { width: 22px; height: 22px; flex: none; color: var(--sky-500); margin-top: 3px; }
.on-dark .check-list svg, .section--dark .check-list svg { color: var(--sky-300); }

/* ==== 08. CARTES =================================================== */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--grad-sky); transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: var(--sky-200); }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: 12px; }
.card p:last-child { margin-bottom: 0; }
/* Dans une grille (ex. "Six façons de vous accompagner"), chaque carte
   s'étire pour matcher la hauteur de la ligne (grid), et le lien "En savoir
   plus" reste collé en bas quelle que soit la longueur du texte au-dessus —
   sinon les liens se retrouvent à des hauteurs différentes d'une carte à
   l'autre. Restreint à .grid .card (et non .card seul) : une carte isolée
   hors grille (ex. "Bienvenue" du tableau de bord BO) n'a pas de ligne à
   matcher — hériter height:100% l'étirait alors sur toute la hauteur
   disponible de son conteneur (jusqu'à faire déborder la page). */
.grid .card { display: flex; flex-direction: column; height: 100%; }
.grid .card .btn-link { margin-top: auto; padding-top: 18px; }

.card__icon {
  width: 58px; height: 58px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 22px;
  background: var(--sky-100); color: var(--sky-700);
  transition: background .38s var(--ease), color .38s var(--ease), transform .38s var(--ease);
}
.card__icon svg { width: 27px; height: 27px; }
.card:hover .card__icon { background: var(--grad-brand); color: #fff; transform: rotate(-6deg) scale(1.06); }

.card--glass {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, .78);
}
.card--glass:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.card--glass .card__icon { background: rgba(255, 255, 255, .12); color: var(--sky-300); }

.card--flat { border: 0; box-shadow: var(--sh-sm); }
.card--pad-sm { padding: 24px; }

.card__num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
  line-height: 1; color: var(--sky-200); margin-bottom: 14px;
}

/* Article / actualité */
.post {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .38s var(--ease), box-shadow .38s var(--ease);
}
.post:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.post__media {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: var(--grad-brand); display: grid; place-items: center;
}
.post__media span {
  font-family: var(--font-display); font-weight: 800; font-size: 2.2rem;
  color: rgba(255, 255, 255, .32); letter-spacing: -.03em;
}
.post__media .badge { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.92); color: var(--navy-800); }
.post__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--ink-3); margin-bottom: 12px; }
.post__meta span { display: flex; align-items: center; gap: 6px; }
.post__meta svg { width: 15px; height: 15px; opacity: .7; }
.post__title { font-size: 1.14rem; margin-bottom: 12px; }
.post__title a { color: var(--navy-900); }
.post__title a:hover { color: var(--sky-600); }
.post__body .btn-link { margin-top: auto; padding-top: 16px; }

.post--h { flex-direction: row; }
.post--h .post__media { aspect-ratio: auto; flex: 0 0 46%; }
.post--h .post__body { padding: 34px; }

/* Publication / ressource */
.resource {
  display: flex; gap: 22px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  height: 100%;
}
.resource:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.resource__doc {
  width: 76px; height: 96px; flex: none; border-radius: 8px;
  background: var(--grad-deep); position: relative; overflow: hidden;
  display: grid; place-items: end center; padding-bottom: 12px;
  box-shadow: var(--sh-sm);
}
.resource__doc span {
  font-family: var(--font-display); font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; color: var(--sky-300);
}
.resource__doc::before {
  content: ""; position: absolute; top: 12px; left: 12px; right: 12px; height: 3px;
  border-radius: 3px; background: rgba(255, 255, 255, .3);
  box-shadow: 0 9px 0 rgba(255, 255, 255, .22), 0 18px 0 rgba(255, 255, 255, .14);
}
.resource h3 { font-size: 1.05rem; margin-bottom: 8px; }

/* Partenaire */
.partner-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.partner-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--sky-200); }
.partner-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.partner-logo {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--sky-050);
  border: 1px solid var(--line); font-family: var(--font-display);
  font-weight: 800; color: var(--navy-700); font-size: 1.05rem;
}
.partner-card__name { font-family: var(--font-display); font-weight: 750; color: var(--navy-900); }
.partner-card__sector { font-size: .84rem; color: var(--ink-3); }

/* Cartes "Nos valeurs" (voir page/expertises.html.twig) : plus étroites et
   plus affirmées qu'une carte générique .card — une couleur d'accent par
   valeur (barre du haut + pastille d'icône), centrées, avec un vrai
   soulèvement au survol pour attirer l'œil. */
.values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.value-card {
  position: relative; overflow: hidden; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 22px 26px;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.value-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: var(--value-accent, var(--sky-500));
}
.value-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.value-card__icon {
  width: 62px; height: 62px; margin: 6px auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--value-accent, var(--sky-500)) 14%, #fff);
  color: var(--value-accent, var(--sky-500));
  transition: transform .35s var(--ease);
}
.value-card__icon svg { width: 28px; height: 28px; }
.value-card:hover .value-card__icon { transform: scale(1.08) rotate(-4deg); }
.value-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.value-card p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.value-card--sky { --value-accent: var(--sky-500); }
.value-card--amber { --value-accent: var(--warning); }
.value-card--green { --value-accent: var(--success); }
.value-card--navy { --value-accent: var(--navy-700); }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .values-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Carte "avantages" (voir page/expertises.html.twig, Solution #02) : même
   esprit que .value-card (accent + icône en pastille) mais en pleine
   largeur, avec une liste à puces plutôt qu'un texte court. */
.perk-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: 32px 28px;
}
.perk-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: var(--grad-brand);
}
.perk-card__icon {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 14px;
  display: grid; place-items: center; background: var(--sky-100); color: var(--sky-700);
}
.perk-card__icon svg { width: 26px; height: 26px; }
.perk-card h3 { margin: 0 0 18px; text-align: center; }

/* Case à cocher simple (contour + coche colorée) plutôt qu'un pavé plein
   au dégradé : moins tape-à-l'œil que .check-list par défaut tout en
   restant plus affirmée qu'un simple SVG de contour. */
.simple-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.simple-check-list li { display: flex; align-items: flex-start; gap: 14px; }
.simple-check-list__box {
  width: 22px; height: 22px; flex: none; border-radius: 6px; margin-top: 1px;
  display: grid; place-items: center; background: #fff;
  border: 1.5px solid var(--sky-300); color: var(--sky-600);
}
.simple-check-list__box svg { width: 13px; height: 13px; }
.simple-check-list span { color: var(--navy-800); font-weight: 500; line-height: 1.5; }

/* Texte mis en évidence au sein d'un paragraphe narratif (voir Solution
   #03) : plus affirmé qu'un simple .lead, avec un filet d'accent pour le
   distinguer nettement des paragraphes voisins. */
.callout-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.14rem;
  line-height: 1.5; color: var(--navy-900);
  padding-left: 18px; border-left: 3px solid var(--sky-400);
}
/* Variante avec une icône devant le texte (voir Solution #05) : le filet
   d'accent encadre l'icône ET le texte, alignés sur la première ligne. */
.callout-text--icon { display: flex; align-items: flex-start; gap: 12px; }
.callout-text--icon svg { width: 25px; height: 25px; flex: none; margin-top: 2px; color: var(--sky-500); }

/* Titre secondaire volontairement plus compact qu'un h2 par défaut (voir
   home/index.html.twig, section "Le cabinet") : mis en évidence par le
   poids et la couleur plutôt que par la taille. */
.title-compact {
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem;
  line-height: 1.3; color: var(--navy-900); margin: 0 0 20px;
}

/* Variante de .lead pour une phrase de section-head qu'on veut faire
   ressortir par la couleur (voir "Nos valeurs") plutôt que par un
   traitement encadré comme .callout-text. */
.lead--accent { color: var(--navy-900); font-weight: 600; }

/* Carte "Objectifs" (voir page/expertises.html.twig, Solution #03) :
   recomposition maison — sur le même principe que .value-card — d'un
   visuel fourni par le client (pastilles rondes, grille 2x2 icône +
   texte), plutôt qu'une image importée telle quelle : chaque icône a son
   propre halo coloré (comme les pastilles de .value-card) pour un rendu
   plus vivant qu'une déclinaison monochrome, et le tout reste un simple
   bloc HTML — jamais recadré, contrairement à une image dans un cadre à
   ratio fixe. */
.objectives-card {
  position: relative; overflow: hidden;
  background: var(--grad-deep); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); padding: clamp(28px, 3vw, 38px);
}
/* Halos décoratifs, même principe que .hero__glow, pour rompre le fond uni
   sans nuire à la lisibilité du texte blanc. */
.objectives-card::before, .objectives-card::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.objectives-card::before { width: 220px; height: 220px; background: rgba(33, 167, 224, .35); top: -80px; right: -60px; }
.objectives-card::after { width: 180px; height: 180px; background: rgba(226, 149, 43, .22); bottom: -60px; left: -40px; }
.objectives-card__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.objectives-card__badge {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--grad-sky); color: var(--navy-900);
  box-shadow: var(--sh-sky);
}
.objectives-card__badge svg { width: 27px; height: 27px; }
.objectives-card__bar { width: 3px; align-self: stretch; background: rgba(255, 255, 255, .3); border-radius: 2px; }
.objectives-card__head h3 {
  margin: 0; font-size: 1.3rem; letter-spacing: .03em; text-transform: uppercase;
  color: #fff;
}
/* En-tête "Offre technique et financière / L'administration RH" (Solution
   #04) ou "Proposition de mission / Évaluation feedback 360°" (Solution
   #05, variante --sm à côté du badge) : repris des visuels fournis par le
   client. Sélecteur qualifié par le tag pour l'emporter sur
   .objectives-card__head h3 quand le titre est niché dans l'en-tête. */
.objectives-card__eyebrow {
  position: relative; z-index: 1; margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-300);
}
h3.objectives-card__title {
  position: relative; z-index: 1; margin: 0 0 26px;
  font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: #fff;
}
h3.objectives-card__title--sm { margin: 0; font-size: 1.05rem; }
.objectives-card__venn { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.objectives-card__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px;
}
/* Icône centrée sur la largeur de son texte plutôt qu'alignée à gauche. */
.objectives-card__item { text-align: center; }
.objectives-card__icon {
  position: relative; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: var(--sky-300);
}
.objectives-card__icon::before {
  content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 50%;
  background: var(--item-accent, var(--sky-400)); opacity: .3; filter: blur(12px);
}
.objectives-card__icon svg { width: 26px; height: 26px; }
.objectives-card__item p {
  margin: 0; font-weight: 700; color: #fff; font-size: .94rem; line-height: 1.45;
}
.objectives-card__item--sky { --item-accent: var(--sky-500); }
.objectives-card__item--amber { --item-accent: var(--warning); }
.objectives-card__item--green { --item-accent: var(--success); }
.objectives-card__item--navy { --item-accent: var(--navy-700); }
/* Variante 3 colonnes (voir Solution #04 : Administratif / Relations
   sociales / Salaires et déclarations — 3 pôles plutôt que 4 objectifs). */
.objectives-card__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .objectives-card__grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .objectives-card__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Illustration "Évaluation 360°" (voir page/expertises.html.twig, Solution
   #05) : même carte sombre à halos que .objectives-card (Solution #03),
   pour une famille visuelle cohérente entre les 3 illustrations générées
   de la page — le SVG garde son propre ratio (width:100%, height:auto),
   jamais recadré. */
.eval360-card {
  position: relative; overflow: hidden;
  background: var(--grad-deep); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); padding: clamp(20px, 3vw, 32px);
}
.eval360-card::before, .eval360-card::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.eval360-card::before { width: 200px; height: 200px; background: rgba(33, 167, 224, .3); top: -70px; left: -50px; }
.eval360-card::after { width: 170px; height: 170px; background: rgba(18, 163, 123, .22); bottom: -60px; right: -40px; }
/* Sélecteur d'enfant direct : seul le diagramme (le grand <svg> racine)
   doit être mis à 100% de largeur — pas les petites icônes imbriquées
   (badge, personnages...) qui sont aussi des svg descendants. */
.eval360-card > svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; }

/* "Nos solutions de gestion RH" (accueil) : les .card restent des .card
   (même structure, même grille responsive) mais chaque carte reçoit une
   couleur d'accent tournante (icône + filet du haut, voir .card::before)
   plutôt que la déclinaison bleu ciel uniforme utilisée par défaut — le
   rendu était jugé trop plat/uniforme. */
.solutions-grid .card {
  text-align: center;
  border-color: color-mix(in srgb, var(--solution-accent, var(--sky-400)) 32%, var(--line));
  background: linear-gradient(165deg, color-mix(in srgb, var(--solution-accent, var(--sky-500)) 6%, #fff) 0%, #fff 60%);
}
.solutions-grid .card::before { background: var(--solution-accent, var(--grad-sky)); }
.solutions-grid .card__icon {
  position: relative; margin-inline: auto;
  background: color-mix(in srgb, var(--solution-accent, var(--sky-500)) 16%, #fff);
  color: var(--solution-accent, var(--sky-500));
}
.solutions-grid .card__icon::before {
  content: ""; position: absolute; inset: -8px; z-index: -1; border-radius: var(--r-md);
  background: var(--solution-accent, var(--sky-500)); opacity: .18; filter: blur(10px);
}
/* Titre centré (avec l'icône ci-dessus), paragraphe et lien laissés alignés
   à gauche : plus lisible qu'un paragraphe entier centré. */
.solutions-grid .card h3 { text-align: center; }
.solutions-grid .card p { text-align: left; }
.solutions-grid .card:nth-child(6n+1) { --solution-accent: var(--sky-500); }
.solutions-grid .card:nth-child(6n+2) { --solution-accent: var(--warning); }
.solutions-grid .card:nth-child(6n+3) { --solution-accent: var(--success); }
.solutions-grid .card:nth-child(6n+4) { --solution-accent: var(--navy-700); }
.solutions-grid .card:nth-child(6n+5) { --solution-accent: var(--sky-700); }
.solutions-grid .card:nth-child(6n+6) { --solution-accent: color-mix(in srgb, var(--warning) 65%, var(--sky-500)); }

/* Bouton pilule incitatif réutilisable (voir "Déposer des offres
   partenaires" ci-dessus) — même recette que .pack-card__cta. Dans une
   grille de cartes, il rejoint le bas de la carte comme .btn-link. */
.cta-pill {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin-top: 22px; padding: 14px 22px;
  border-radius: var(--r-pill); background: var(--grad-brand); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .96rem;
  box-shadow: var(--sh-sky);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta-pill:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(33, 167, 224, .38); color: #fff; }
.cta-pill__icon {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22);
}
.cta-pill__icon svg { width: 17px; height: 17px; }
.grid .card .cta-pill { margin-top: auto; }

/* "Pourquoi nous faire confiance" (accueil) : cartes verre dépoli sur fond
   sombre — même halo par icône que .objectives-card__icon (Découvrez-nous)
   pour une famille visuelle cohérente entre les deux pages, réservée ici à
   une section que le client veut particulièrement mettre en avant. */
.trust-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.trust-card {
  position: relative; overflow: hidden; text-align: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg); padding: 34px 26px; backdrop-filter: blur(6px);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.trust-card:hover { transform: translateY(-8px); background: rgba(255, 255, 255, .1); }
.trust-card__icon {
  position: relative; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--trust-accent, var(--sky-300));
}
.trust-card__icon::before {
  content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: 50%;
  background: var(--trust-accent, var(--sky-400)); opacity: .3; filter: blur(14px);
}
.trust-card__icon svg { width: 28px; height: 28px; }
.trust-card p { color: rgba(255, 255, 255, .75); font-size: .94rem; margin: 0; }
.trust-card--sky { --trust-accent: var(--sky-400); }
.trust-card--amber { --trust-accent: var(--warning); }
.trust-card--green { --trust-accent: var(--success); }
@media (max-width: 780px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==== 09. CHIFFRES, PROCESS, TÉMOIGNAGES, LOGOS ==================== */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.stat { background: #fff; padding: 34px 26px; text-align: center; }
.stat__value {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1; color: var(--navy-900); letter-spacing: -.04em;
}
.stat__value .unit { color: var(--sky-500); }
.stat__label { font-size: .9rem; color: var(--ink-3); margin-top: 10px; }

.stats--dark { background: rgba(255, 255, 255, .13); }
.stats--dark .stat { background: transparent; }
.stats--dark .stat__value { color: #fff; }
.stats--dark .stat__label { color: rgba(255, 255, 255, .66); }

.stats--bare { background: none; gap: 28px; }
.stats--bare .stat {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

/* 2 cartes seulement (voir page/expertises.html.twig) : centrées, pas
   étirées sur les 4 colonnes par défaut de .stats. */
.stats--2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; margin: 0 auto; }

.stats--5 { grid-template-columns: repeat(5, 1fr); }
.stats--5 .stat__label { font-size: .84rem; }
@media (max-width: 1200px) { .stats--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .stats--5 { grid-template-columns: repeat(2, 1fr); } }

/* Carte de présence internationale (page "Nos expertises") : un défilement
   horizontal propre en dessous de sa largeur de conception plutôt que de
   réduire le texte du SVG jusqu'à le rendre illisible sur mobile. */
.world-map { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.world-map svg { display: block; width: 100%; min-width: 720px; height: auto; }

/* Process / étapes */
.steps { display: grid; gap: 28px; grid-template-columns: repeat(5, 1fr); position: relative; }
.steps::before {
  content: ""; position: absolute; top: 30px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--sky-200) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
/* Numéros "allumés" directement (couleur pleine dès l'affichage, pas
   seulement au survol) pour que les 5 étapes se distinguent d'un coup
   d'œil — une couleur d'accent différente par étape, cycle repris du
   même jeu de teintes que le reste du site (bleu ciel / ambre / vert /
   bleu marine). */
.step__num {
  width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--step-accent, var(--sky-500)); color: #fff;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--step-accent, var(--sky-500)) 45%, transparent);
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.step:hover .step__num { box-shadow: 0 16px 34px color-mix(in srgb, var(--step-accent, var(--sky-500)) 55%, transparent); transform: scale(1.08); }
.step:nth-child(1) { --step-accent: var(--sky-500); }
.step:nth-child(2) { --step-accent: var(--warning); }
.step:nth-child(3) { --step-accent: var(--success); }
.step:nth-child(4) { --step-accent: var(--sky-700); }
.step:nth-child(5) { --step-accent: var(--navy-700); }
.step h3 { font-size: 1.06rem; margin-bottom: 10px; }
.step p { font-size: .95rem; margin: 0; }

/* Timeline verticale (programme, parcours) */
.timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--sky-300), var(--sky-100));
}
.timeline > li { position: relative; margin: 0 0 30px; }
.timeline > li::before {
  content: ""; position: absolute; left: -34px; top: 7px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 3px solid var(--sky-500);
}
.timeline__time {
  font-family: var(--font-display); font-weight: 800; color: var(--sky-600);
  font-size: .9rem; letter-spacing: .04em;
}
.timeline h3 { font-size: 1.05rem; margin: 4px 0 8px; }
.timeline p { margin: 0; font-size: .95rem; }
/* .check-list n'a pas de taille de police propre (hérite du body, plus
   grand que .timeline p) : alignée ici sur le reste du contenu de la
   timeline — voir Solution #06, sous-thèmes 3 et 4. */
.timeline .check-list span { font-size: .95rem; }

/* Témoignages : défilement horizontal automatique en boucle, même principe
   que "Nos opportunités du moment" (voir .jobs-scroll) plutôt qu'un slider
   à flèches. */
.testimonials {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.testi-track {
  display: flex; gap: 28px; width: max-content;
  padding: 6px 4px 22px;
  animation: jobs-scroll-horizontal 140s linear infinite;
}
.testimonials:hover .testi-track { animation-play-state: paused; }
.testi {
  flex: none; width: min(430px, 84vw);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px; position: relative;
}
.testi__quote {
  font-family: var(--font-display); font-size: 3.4rem; line-height: .8;
  color: var(--sky-200); margin-bottom: 8px;
}
.testi p { font-size: 1.02rem; color: var(--ink-2); }
.testi__author { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.testi__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--grad-brand); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem;
}
.testi__name { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); line-height: 1.3; }
.testi__role { font-size: .84rem; color: var(--ink-3); }
.testi__stars { color: var(--warning); letter-spacing: 2px; font-size: .95rem; margin-bottom: 14px; }

/* Bandeau logos clients (liste statique, ex. exposants d'un salon) */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.logo-chip {
  padding: 14px 26px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 750; color: var(--ink-3);
  letter-spacing: -.01em; font-size: 1.02rem;
  transition: all .3s var(--ease);
}
.logo-chip:hover { color: var(--navy-800); border-color: var(--sky-200); transform: translateY(-4px); box-shadow: var(--sh-sm); }
.logos--dark .logo-chip {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .72);
}

/* Marquee générique (une seule ligne) */
.marquee { overflow: hidden; position: relative; padding: 8px 0; }
.marquee__track { display: flex; gap: 18px; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------
   Mur de logos clients — plusieurs lignes qui défilent en continu,
   pensé pour accueillir un grand nombre de clients sans s'écrouler.
   Chaque .logo-card affiche uniquement l'image du logo, en grand : le
   nom du client n'apparaît qu'en attribut alt (accessibilité/SEO), pas
   visuellement. .logo-card__mark est le repli tant qu'aucune image n'a
   été téléversée en back-office (voir ClientLogo::displayInitials).
   ------------------------------------------------------------------ */
/* "Ils nous font confiance" : bandeau légèrement teinté et cerné de
   liserés, avec un repère (icône + couleur d'accent) plus affirmé que le
   texte discret d'origine — pour que la preuve sociale s'impose davantage
   au défilement plutôt que de se fondre dans le blanc environnant. */
.logo-wall-section {
  background: linear-gradient(180deg, var(--sky-050), #fff 85%);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.logo-wall-section__label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--sky-700);
}
.logo-wall-section__icon {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--sky-100); color: var(--sky-700);
}
.logo-wall-section__icon svg { width: 17px; height: 17px; }

/* Volontairement hors du .container (voir home/index.html.twig) : occupe
   toute la largeur de la fenêtre pour que la piste défile sur un tracé
   plus long (plus de logos visibles à la fois). padding-inline reprend
   juste le gutter du .container pour ne pas coller aux bords. */
.logo-wall {
  display: grid; gap: 3px; padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Peu de clients cités (≤ 6, voir HomeController::buildLogoWall) : un
   défilement en boucle sur si peu d'éléments a l'air cassé (piste plus
   étroite que le conteneur, alignée à gauche). On affiche à la place une
   seule ligne statique et centrée, sans fondu sur les bords. */
.logo-wall--static { -webkit-mask-image: none; mask-image: none; }
.logo-wall--static .logo-row { overflow: visible; }
.logo-wall--static .logo-row__track {
  animation: none; flex-wrap: wrap; justify-content: center; width: 100%;
}
.logo-row { overflow: hidden; position: relative; }
.logo-row__track {
  display: flex; gap: 4px; width: max-content;
  animation: logo-scroll var(--logo-speed, 48s) linear infinite;
}
.logo-row--reverse .logo-row__track { animation-direction: reverse; }
.logo-row:hover .logo-row__track { animation-play-state: paused; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }

.logo-card {
  display: flex; align-items: center; justify-content: center; flex: none;
  min-width: 170px; height: 108px; padding: 14px 16px;
  transition: transform .3s var(--ease);
}
.logo-card:hover { transform: translateY(-3px); }
.logo-card img { max-height: 76px; max-width: 100%; width: auto; }
.logo-card__mark {
  width: 64px; height: 64px; flex: none; border-radius: 14px;
  display: grid; place-items: center; background: var(--sky-050); color: var(--sky-700);
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
}

.logo-wall--dark .logo-card__mark { background: rgba(255, 255, 255, .1); color: var(--sky-300); }

/* Variante réduite (voir home/index.html.twig, section "Ils nous font
   confiance") : bandeau plus discret que la taille par défaut. */
.logo-wall--sm .logo-card { min-width: 128px; height: 76px; padding: 10px 14px; }
.logo-wall--sm .logo-card img { max-height: 52px; }
.logo-wall--sm .logo-card__mark { width: 44px; height: 44px; font-size: .9rem; }

@media (max-width: 640px) {
  .logo-card { min-width: 148px; height: 84px; padding: 10px 18px; }
  .logo-card img { max-height: 48px; }
  .logo-card__mark { width: 48px; height: 48px; font-size: .95rem; }
  .logo-row:nth-child(3) { display: none; } /* 2 lignes suffisent sur petit écran */
}

/* Bandeau CTA */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--grad-deep); color: rgba(255, 255, 255, .82);
  padding: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .76); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-band::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 167, 224, .38), transparent 68%);
  right: -120px; top: -160px; pointer-events: none; z-index: 0;
}

/* Deux espaces (candidat / entreprise) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.duo__panel {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: 44px; min-height: 340px;
  display: flex; flex-direction: column;
  color: #fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.duo__panel:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.duo__panel--candidat { background: var(--grad-deep); }
.duo__panel--entreprise { background: linear-gradient(150deg, var(--sky-600), var(--sky-700) 55%, var(--navy-700)); }
.duo__panel h3 { color: #fff; font-size: 1.6rem; }
.duo__panel p { color: rgba(255, 255, 255, .82); max-width: 34ch; }
.duo__panel .badge { align-self: flex-start; margin-bottom: 22px; }
/* Le titre démarre toujours au même point (juste après le badge, à
   hauteur fixe) dans les deux panneaux, quelle que soit la longueur du
   texte ; le CTA, lui, reste ancré en bas grâce à ce conteneur étiré. */
.duo__panel-content { flex: 1; display: flex; flex-direction: column; }
.duo__panel-content .btn--light { color: var(--navy-900); margin-top: auto; align-self: flex-start; }
.duo__panel:hover .btn--light { transform: translateX(4px); }
.duo__panel::after {
  content: ""; position: absolute; inset: auto -60px -80px auto; width: 260px; height: 260px;
  border-radius: 50%; border: 30px solid rgba(255, 255, 255, .07);
}

/* ==== 10. OFFRES D'EMPLOI ========================================== */
.jobs-layout { display: grid; grid-template-columns: 306px 1fr; gap: 36px; align-items: start; }

/* Variante « contenu + colonne latérale » (dépôt de CV, pages internes) */
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.split--60-40 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
/* Fiche candidature (aperçu CV à gauche vs. panneau de traitement compact à
   droite, voir admin/job_application/show.html.twig). */
.split--75-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }

/* BO : formulaire + panneau d'éléments associés (candidatures, offres liées).
   Card de formulaire volontairement plus étroite que .split--60-40 (inversé,
   gap resserré) pour laisser assez de place au panneau de droite et y tenir
   2 blocs par ligne (voir .grid-2 dans _associated_applications.html.twig). */
.split--form-panel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; }

.filters {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 24px);
  box-shadow: var(--sh-xs);
}
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.filters__head h2 { font-size: 1.1rem; margin: 0; }
/* Bouton plier/déplier : masqué en desktop (les filtres y restent toujours
   dépliés), affiché uniquement en mobile (voir media query plus bas). */
.filters__toggle {
  display: none; width: 32px; height: 32px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--navy-700);
  align-items: center; justify-content: center; transition: transform .3s var(--ease);
}
.filters__toggle svg { width: 16px; height: 16px; }
.filters.is-open .filters__toggle { transform: rotate(180deg); }
.filter-group { border-top: 1px solid var(--line-2); padding: 18px 0 4px; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group__title {
  font-family: var(--font-display); font-weight: 750; font-size: .84rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--navy-800);
  margin-bottom: 14px;
}
.check {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  font-size: .92rem; margin-bottom: 11px; color: var(--ink-2);
  user-select: none;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  border: 1.6px solid var(--line); background: #fff;
  display: grid; place-items: center; transition: all .25s var(--ease);
}
.check__box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: all .25s var(--ease); }
.check input:checked + .check__box { background: var(--sky-500); border-color: var(--sky-500); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 3px solid var(--sky-300); outline-offset: 2px; }
.check:hover .check__box { border-color: var(--sky-400); }
.check__count { margin-left: auto; font-size: .8rem; color: var(--ink-3); }
/* Option de filtre sans aucun résultat possible compte tenu des autres
   filtres actifs (voir JobOfferRepository::findAvailableFacetValues) :
   grisée et non cliquable plutôt que retirée, pour que l'utilisateur
   comprenne qu'elle existe mais ne mène nulle part ici. */
.check--disabled { cursor: not-allowed; opacity: .45; }
.check--disabled .check__box { background: var(--paper-2); }

.jobs-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.jobs-toolbar__count { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); }
.select-inline {
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 18px; font: inherit; font-size: .9rem; background: #fff;
  color: var(--ink-2); cursor: pointer;
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--sky-100); color: var(--sky-700);
  font-size: .84rem; font-weight: 650; border: 0; cursor: pointer;
  font-family: var(--font-body);
}
.chip svg { width: 13px; height: 13px; }
.chip:hover { background: var(--sky-200); }

.job-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 28px; margin-bottom: 18px; position: relative;
  transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.job-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--sky-200); }
.job-card__top { display: flex; gap: 18px; align-items: flex-start; }
/* Titre seul, sans sous-titre (client ou "Réf.", voir _job_card.html.twig) :
   une seule ligne de texte à centrer verticalement contre le pictogramme,
   plus haut qu'elle. */
.job-card__top--centered { align-items: center; }
.job-card__logo {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--sky-050);
  border: 1px solid var(--line); font-family: var(--font-display);
  font-weight: 800; color: var(--navy-700);
}
.job-card__logo svg { width: 26px; height: 26px; }
/* Vrai logo client (offres partenaires/événement, ex. listes Salon et
   Offres partenaires) : plus visible que le pictogramme générique. */
.job-card__logo--client { width: 72px; height: 72px; }
.job-card__title { font-size: 1.16rem; margin: 0 0 6px; }
.job-card__title a { color: var(--navy-900); }
.job-card__title a:hover { color: var(--sky-600); }
.job-card__company { font-size: .96rem; font-weight: 700; color: var(--navy-700); margin: 0; }
.job-card__excerpt { margin-bottom: 0; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.job-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-2);
}

/* Offre interne mise "à la une" : carte un peu plus voyante que ses
   voisines, pour que le regard s'y arrête d'abord dans une liste/grille.
   Le ruban est collé au coin haut-droit du bloc (hors de la zone de texte)
   plutôt qu'à côté du titre, pour ne jamais chevaucher le contenu. */
.job-card--featured {
  border-color: var(--sky-300);
  background: linear-gradient(180deg, var(--sky-050), #fff);
  box-shadow: var(--sh-sm);
}
.job-card--featured:hover { box-shadow: var(--sh-md); }
.job-card__featured-badge {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 0 var(--r-lg) 0 var(--r-md);
}

/* Dans une grille (accueil, offres similaires, offres partenaires), les
   cartes doivent toutes avoir la même hauteur, quelle que soit la longueur
   de l'extrait : c'est l'extrait qui absorbe l'espace disponible (flex:1),
   pour que les pastilles restent toujours juste au-dessus du séparateur.
   En liste simple (page de recherche), la carte garde sa hauteur naturelle. */
.grid .job-card {
  height: 100%; display: flex; flex-direction: column; margin-bottom: 0;
}
.grid .job-card__excerpt { flex: 1; }
/* Les cartes de candidature du back-office n'ont pas de .job-card__excerpt
   pour absorber la hauteur restante (les cartes d'offre, elles, en ont bien
   un depuis peu — voir admin/job_offer/_offer_card.html.twig) : le pied
   (boutons, date) doit donc être collé en bas par lui-même, pour que toutes
   les cartes d'une même grille restent alignées quelle que soit la hauteur
   du contenu au-dessus. Sans cette marge minimale, la carte la plus haute de
   la grille (celle qui ne laisse aucun espace disponible pour le
   margin-top:auto) se retrouvait avec les pastilles collées au séparateur
   du pied. */
.grid .job-card__meta { margin-bottom: 16px; }
.grid .job-card__foot { margin-top: auto; }
.job-card__date { font-size: .84rem; color: var(--ink-3); }
.job-card__fav {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; cursor: pointer; display: grid; place-items: center;
  color: var(--ink-3); transition: all .28s var(--ease); flex: none;
}
.job-card__fav svg { width: 18px; height: 18px; }
.job-card__fav:hover, .job-card__fav.is-on { color: var(--sky-600); border-color: var(--sky-300); background: var(--sky-050); }
.empty-state {
  text-align: center; padding: 64px 24px; border: 2px dashed var(--line);
  border-radius: var(--r-lg); color: var(--ink-3);
}

/* "Nos opportunités du moment" : 10 offres au lieu de 3, dans un bandeau qui
   défile horizontalement en boucle plutôt que d'allonger la page (même
   principe que le mur de logos clients). */
.jobs-scroll {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.jobs-scroll__track {
  display: flex; gap: 24px; width: max-content;
  animation: jobs-scroll-horizontal 120s linear infinite;
}
.jobs-scroll:hover .jobs-scroll__track { animation-play-state: paused; }
.jobs-scroll__item { flex: none; width: min(360px, 88vw); }
.jobs-scroll__item .job-card { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.jobs-scroll__item .job-card__excerpt { flex: 1; }
@keyframes jobs-scroll-horizontal { to { transform: translateX(-50%); } }
.empty-state svg { width: 52px; height: 52px; color: var(--sky-300); margin: 0 auto 18px; }

/* ------------------------------------------------------------------
   Pages d'erreur (404, 500...) — voir templates/bundles/TwigBundle/
   Exception/. Volontairement autonomes (pas de header/footer, pas
   d'appel à site_settings) : une vraie panne (base de données hors
   service, par exemple) doit pouvoir afficher cette page sans dépendre
   du service qui a justement planté.
   ------------------------------------------------------------------ */
.error-page {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
  /* Reste dans les tons navy-950/900 (comme .site-footer), sans jamais
     approcher navy-800 : le logo (voir partials/_logo.html.twig) a son
     petit triangle et son texte "CONSULTING" dans cette exacte teinte
     (#1A3661 = --navy-800), qui deviendrait invisible dessus. */
  background: linear-gradient(150deg, var(--navy-950) 0%, var(--navy-900) 100%);
}
.error-page__inner { position: relative; z-index: 1; max-width: 560px; }
.error-page__code {
  display: block;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(64px, 12vw, 108px); margin: 0 0 6px;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.error-page__icon {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--sky-300);
}
.error-page__icon svg { width: 30px; height: 30px; }
.error-page h1 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 14px; }
.error-page p { color: rgba(255, 255, 255, .76); font-size: 1.05rem; margin: 0 0 30px; }
.error-page__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Fiche offre */
.job-detail { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.job-aside {
  position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 24px);
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr);
}
.aside-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--sh-xs);
}
.aside-card h3 { font-size: 1.03rem; margin-bottom: 16px; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--line-2); margin: 0;
}
.spec-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list svg { width: 19px; height: 19px; color: var(--sky-600); flex: none; margin-top: 3px; }
.spec-list__label { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.spec-list__value { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: .96rem; }

.rich-text h2 { font-size: 1.5rem; margin-top: 2.2em; }
.rich-text h3 { font-size: 1.16rem; margin-top: 1.8em; }
.rich-text > :first-child { margin-top: 0; }
.rich-text ul { padding-left: 0; list-style: none; }
.rich-text ul li { position: relative; padding-left: 30px; }
.rich-text ul li::before {
  content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--grad-sky); transform: rotate(45deg);
}
.rich-text blockquote {
  margin: 2em 0; padding: 24px 28px; border-left: 4px solid var(--sky-400);
  background: var(--sky-050); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.06rem; color: var(--navy-800);
}
.rich-text blockquote p:last-child { margin-bottom: 0; }
.rich-text figure { margin: 2.2em 0; }
.rich-text figcaption { font-size: .85rem; color: var(--ink-3); margin-top: 10px; text-align: center; }
.rich-text img, .rich-text .ph { border-radius: var(--r-md); }
/* Galerie d'un article (voir templates/article/show.html.twig,
   Article::$images) : petites vignettes carrées éparpillées, qui s'ouvrent
   en grand dans une visionneuse plein écran au clic (voir .img-lightbox et
   app.js:imageLightbox) — un survol qui zoomait "sur place" sans agrandir
   réellement l'image (recadrée par overflow:hidden du petit conteneur)
   n'apportait rien de plus qu'un effet de survol discret. */
.article-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin: 2em 0;
}
.article-gallery__item {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  cursor: zoom-in; background: var(--paper-2);
  border: 0; padding: 0; display: block; width: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.article-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.article-gallery__item:hover, .article-gallery__item:focus-visible {
  transform: scale(1.05); box-shadow: 0 14px 30px rgba(10, 20, 40, .25); z-index: 2;
}
.article-gallery__zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10, 20, 40, .28); color: #fff;
  opacity: 0; transition: opacity .25s var(--ease);
}
.article-gallery__item:hover .article-gallery__zoom,
.article-gallery__item:focus-visible .article-gallery__zoom { opacity: 1; }
.article-gallery__zoom svg { width: 26px; height: 26px; }

/* Visionneuse plein écran (voir app.js:imageLightbox), même principe que
   .video-modal ci-dessus mais pour une image (ratio naturel, pas 16/9). */
.img-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
}
.img-lightbox__backdrop {
  position: absolute; inset: 0; background: rgba(4, 18, 32, .88);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease);
}
.img-lightbox__box {
  position: relative; max-width: min(1100px, 92vw); max-height: 88vh;
  transform: scale(.94); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.img-lightbox.is-open .img-lightbox__backdrop { opacity: 1; }
.img-lightbox.is-open .img-lightbox__box { transform: scale(1); opacity: 1; }
.img-lightbox__box img {
  display: block; max-width: 100%; max-height: 88vh;
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.img-lightbox__close {
  position: absolute; top: -48px; right: 0; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
  transition: background-color .25s var(--ease);
}
.img-lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.img-lightbox__close svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .img-lightbox__close { top: -44px; }
}
.ph {
  aspect-ratio: 16 / 9; background: var(--grad-brand); display: grid; place-items: center;
  color: rgba(255, 255, 255, .5); font-family: var(--font-display); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; font-size: .8rem;
}

/* ==== 11. FORMULAIRES ============================================== */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 44px); box-shadow: var(--sh-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field[hidden] { display: none; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display); font-weight: 650; font-size: .88rem; color: var(--navy-800);
}
.field label .req { color: var(--danger); }
/* Symfony ajoute déjà la classe "required" aux <label> des champs
   obligatoires : on s'appuie dessus plutôt que de marquer chaque champ à
   la main dans chaque formulaire public (contact, newsletter, candidature). */
label.required::after { content: " *"; color: var(--danger); font-weight: 800; }
.field .hint { font-size: .8rem; color: var(--ink-3); }

.input, .textarea, .select {
  width: 100%; max-width: 100%; font: inherit; font-size: .96rem; color: var(--ink);
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper-2);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--sky-400); background: #fff;
  box-shadow: 0 0 0 4px rgba(33, 167, 224, .14);
}
.textarea { min-height: 148px; resize: vertical; }
.select { appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b708a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 17px;
}

.dropzone {
  border: 2px dashed var(--sky-200); border-radius: var(--r-lg);
  background: var(--sky-050); padding: 40px 24px; text-align: center;
  cursor: pointer; transition: all .3s var(--ease);
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--sky-500); background: var(--sky-100); }
.dropzone svg { width: 46px; height: 46px; color: var(--sky-500); margin: 0 auto 14px; }
.dropzone strong { display: block; font-family: var(--font-display); color: var(--navy-900); font-size: 1.04rem; }
.dropzone__files { margin-top: 18px; display: grid; gap: 10px; text-align: left; }
.file-item {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; font-size: .9rem;
}
.file-item svg { width: 18px; height: 18px; color: var(--sky-600); flex: none; }
.file-item .size { margin-left: auto; color: var(--ink-3); font-size: .82rem; }

.consent {
  display: flex; gap: 13px; align-items: flex-start; font-size: .88rem;
  color: var(--ink-3); line-height: 1.6; cursor: pointer;
}
.consent input { margin-top: 4px; accent-color: var(--sky-500); width: 18px; height: 18px; flex: none; }
/* Retour visuel sur un champ requis manquant (voir assets/app.js:multiStep
   validate()) : sur .consent en particulier, la case à cocher native est
   trop petite pour qu'un simple changement de bordure se voie — on met en
   plus toute la ligne en évidence. */
.field.has-error label, .consent.has-error { color: var(--danger); }
.consent.has-error input { outline: 2px solid var(--danger); outline-offset: 3px; }

/* Stepper */
.stepper { display: flex; align-items: center; margin-bottom: 36px; }
.stepper__item { display: flex; align-items: center; flex: 1; }
.stepper__item:last-child { flex: none; }
.stepper__dot {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--paper-2);
  border: 2px solid var(--line); color: var(--ink-3);
  font-family: var(--font-display); font-weight: 800; font-size: .92rem;
  transition: all .35s var(--ease);
}
.stepper__label {
  margin-left: 12px; font-family: var(--font-display); font-weight: 650;
  font-size: .88rem; color: var(--ink-3); white-space: nowrap;
}
.stepper__bar {
  flex: 1; height: 2px; background: var(--line); margin: 0 16px; border-radius: 2px;
  position: relative; overflow: hidden;
}
.stepper__bar::after {
  content: ""; position: absolute; inset: 0; background: var(--grad-sky);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.stepper__item.is-done .stepper__dot { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }
.stepper__item.is-done .stepper__bar::after { transform: scaleX(1); }
.stepper__item.is-current .stepper__dot {
  background: #fff; border-color: var(--sky-500); color: var(--sky-700);
  box-shadow: 0 0 0 5px rgba(33, 167, 224, .16);
}
.stepper__item.is-current .stepper__label, .stepper__item.is-done .stepper__label { color: var(--navy-900); }

.form-step { display: none; animation: fadeUp .5s var(--ease); }
.form-step.is-active { display: block; }
.form-actions {
  display: flex; justify-content: space-between; gap: 14px; margin-top: 32px;
  padding-top: 26px; border-top: 1px solid var(--line-2);
}

.form-success {
  text-align: center; padding: 30px 10px;
}
.form-success__icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center; background: rgba(18, 163, 123, .12); color: var(--success);
}
.form-success__icon svg { width: 36px; height: 36px; }

/* Message de remerciement personnalisé (voir job_application/success.html.twig) :
   mis en évidence dans une carte plutôt qu'un simple paragraphe, sur le
   modèle de .aside-card/.notice déjà utilisées ailleurs sur le site. */
.thankyou-card {
  display: flex; gap: 20px; align-items: flex-start; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 32px; box-shadow: var(--sh-xs); margin-top: 28px;
}
.thankyou-card__icon {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--sky-100); color: var(--sky-600);
}
.thankyou-card__icon svg { width: 22px; height: 22px; }
.thankyou-card p { margin: 0; line-height: 1.75; color: var(--ink-2); }
@media (max-width: 560px) {
  .thankyou-card { flex-direction: column; align-items: center; text-align: center; padding: 26px 22px; }
}

/* Bloc contact */
.contact-item { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.contact-item > div { min-width: 0; }
.contact-item p, .footer__links li { overflow-wrap: anywhere; }
.contact-item__icon {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--sky-100); color: var(--sky-700);
}
.contact-item__icon svg { width: 23px; height: 23px; }
.contact-item h3 { font-size: 1rem; margin-bottom: 5px; }
.contact-item p { margin: 0; font-size: .95rem; }

.map-frame {
  border-radius: var(--r-xl); overflow: hidden; min-height: 340px;
  background:
    linear-gradient(115deg, rgba(33, 167, 224, .12), transparent 60%),
    repeating-linear-gradient(0deg, var(--line-2) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 44px),
    var(--paper-2);
  border: 1px solid var(--line);
  display: grid; place-items: center; position: relative;
}
.map-pin {
  display: grid; place-items: center; gap: 8px; text-align: center;
  font-family: var(--font-display); font-weight: 700; color: var(--navy-800);
}
.map-pin__dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sky-500);
  box-shadow: 0 0 0 8px rgba(33, 167, 224, .2), 0 0 0 18px rgba(33, 167, 224, .1);
  animation: pulse-pin 2.6s infinite;
}
@keyframes pulse-pin {
  50% { box-shadow: 0 0 0 12px rgba(33, 167, 224, .14), 0 0 0 26px rgba(33, 167, 224, 0); }
}

/* ==== 12. ACCORDÉON, COUNTDOWN, PROGRAMME ========================== */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; color: var(--navy-900);
}
.acc-head:hover { color: var(--sky-600); }
.acc-icon {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--sky-050); color: var(--sky-700);
  display: grid; place-items: center; transition: all .32s var(--ease);
}
.acc-icon svg { width: 16px; height: 16px; }
.acc-item.is-open .acc-icon { background: var(--sky-500); color: #fff; transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { padding: 0 4px 24px; margin: 0; }

.countdown { display: flex; gap: 14px; flex-wrap: wrap; }
.cd-box {
  min-width: 92px; padding: 18px 14px; text-align: center;
  border-radius: var(--r-md); background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px);
}
.cd-box strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 2.1rem; line-height: 1; color: #fff; letter-spacing: -.03em;
}
.cd-box span {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .64); margin-top: 8px; display: block;
}

.info-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--line);
}
.info-strip > div { background: #fff; padding: 26px; display: flex; gap: 16px; align-items: flex-start; }
.info-strip svg { width: 24px; height: 24px; color: var(--sky-600); flex: none; margin-top: 3px; }
.info-strip strong { display: block; font-family: var(--font-display); color: var(--navy-900); }
.info-strip span { font-size: .9rem; color: var(--ink-3); }

.notice {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; border-radius: var(--r-md);
  background: var(--sky-050); border: 1px solid var(--sky-200); color: var(--navy-800);
}
.notice svg { width: 22px; height: 22px; color: var(--sky-600); flex: none; margin-top: 3px; }
.notice p { margin: 0; font-size: .95rem; }
.notice--warn { background: #fff9ef; border-color: #f3dcae; }
.notice--warn svg { color: var(--warning); }

/* ==== 13. PAGINATION, ALERTES ====================================== */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 44px; }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; padding: 0 16px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--navy-800);
  background: #fff; white-space: nowrap; transition: all .28s var(--ease);
}
.pagination a svg, .pagination span svg { width: 15px; height: 15px; flex: none; }
.pagination a:hover { border-color: var(--sky-400); color: var(--sky-700); }
.pagination .is-current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.pagination .is-dots { border: 0; background: none; color: var(--ink-3); }

/* Bandeau d'annonce : couleur distincte du bleu de marque (utilisé partout
   ailleurs) pour qu'un événement à venir ou une actualité importante saute
   vraiment aux yeux — un vert émeraude engageant plutôt qu'un orange/rouge
   qui évoquerait plutôt une alerte ou un problème à corriger. */
.alert-bar {
  background: linear-gradient(90deg, #059669, #10b981);
  color: #fff; text-align: center;
  padding: 14px 46px; font-size: .96rem; font-weight: 700; letter-spacing: .01em;
  /* Fixe en haut au scroll, comme .topbar juste en dessous (voir
     --alert-bar-h, mesurée en JS et consommée par .topbar/.site-header) —
     z-index au-dessus des deux pour rester visible par-dessus. */
  position: sticky; top: 0; z-index: 102;
  box-shadow: 0 2px 16px rgba(5, 150, 105, .4);
}
.alert-bar .container { display: flex; align-items: center; justify-content: center; gap: 10px; }
.alert-bar__icon { flex: none; width: 19px; height: 19px; animation: alert-bar-ring 2.6s ease-in-out infinite; }
@keyframes alert-bar-ring {
  0%, 40%, 100% { transform: rotate(0); }
  10% { transform: rotate(-12deg); }
  20% { transform: rotate(10deg); }
  30% { transform: rotate(-6deg); }
}
.alert-bar a { color: #fff; text-decoration: underline; font-weight: 800; }
.alert-bar__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; cursor: pointer; opacity: .85; padding: 6px;
}
.alert-bar__close svg { width: 16px; height: 16px; }

/* ==== 14. FOOTER =================================================== */
.site-footer {
  background: var(--navy-950); color: rgba(255, 255, 255, .62);
  padding: clamp(56px, 6vw, 84px) 0 0; position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33, 167, 224, .16), transparent 70%);
  pointer-events: none;
}
.site-footer h4 {
  color: #fff; font-size: .86rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 22px;
}
.site-footer a { color: rgba(255, 255, 255, .62); }
.site-footer a:hover { color: var(--sky-300); }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 44px;
  position: relative; z-index: 1;
}
/* Le logo garde ses couleurs fixes (bleu ciel + marine, voir _logo.html.twig)
   même sur fond sombre : "CONSULTING" et le petit bonhomme (marine) sont
   quasi invisibles sur le marine foncé du footer sans ce fond clair (même
   traitement que .admin-sidebar__brand en back-office). width: fit-content
   (sans margin-inline: auto) : le cadre blanc n'entoure que le logo, aligné
   à gauche comme le reste de la colonne, sans s'étirer sur toute sa largeur.
   Coins asymétriques (haut-gauche/bas-droite très arrondis, haut-droit/bas-
   gauche resserrés) plutôt qu'un simple rectangle : même principe "pastille"
   que le panneau du visuel de partage (assets/images/og-share.png). */
.footer__brand {
  background: #fff;
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm);
  box-shadow: var(--sh-md);
  padding: 14px 18px;
  display: flex;
  width: fit-content;
}
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin-bottom: 11px; font-size: .93rem; }
.footer__about { font-size: .95rem; max-width: 32ch; }
.footer__socials { display: flex; gap: 10px; margin-top: 22px; }

/* Coordonnées du footer : icône + texte proprement alignés, quelle que
   soit la longueur du texte (adresse sur plusieurs lignes, e-mail long…) */
.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px; font-size: .93rem; line-height: 1.5;
}
.footer-contact li > svg {
  width: 18px; height: 18px; flex: none; margin-top: 3px;
  color: var(--sky-300);
}
.footer-contact li > span, .footer-contact li > a { min-width: 0; overflow-wrap: anywhere; }
/* Remplace l'ancienne carte des pays d'intervention (voir historique) : le
   visuel "Développons vos talents !" fourni est un PNG à fond transparent,
   donc pas de fond/bordure de carte ici — juste un léger cadrage. */
.footer-talents-badge { width: 100%; max-width: 220px; margin-top: 18px; border-radius: var(--r-md); }

.newsletter { display: flex; gap: 10px; margin-top: 16px; }
.newsletter input {
  flex: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05); color: #fff;
  padding: 13px 16px; border-radius: var(--r-pill); font: inherit; font-size: .92rem;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .42); }
.newsletter input:focus { outline: none; border-color: var(--sky-400); background: rgba(255, 255, 255, .09); }

/* Aperçu de la page Facebook dans le footer (colonne "Suivez-nous") */
.fb-preview {
  border-radius: var(--r-md); overflow: hidden; max-width: 280px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.fb-preview iframe { display: block; width: 100%; }
.fb-preview--empty {
  padding: 26px 20px; text-align: center; color: rgba(255, 255, 255, .5);
}
.fb-preview--empty svg { width: 30px; height: 30px; margin: 0 auto 10px; }
.fb-preview--empty p { margin: 0; font-size: .86rem; }

.footer__bottom {
  margin-top: 58px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  align-items: center; font-size: .86rem; position: relative; z-index: 1;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }

.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy-800); color: #fff; display: grid; place-items: center;
  box-shadow: var(--sh-md); opacity: 0; visibility: hidden;
  transform: translateY(12px); transition: all .35s var(--ease);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--sky-500); }

/* ==== 15. ANIMATIONS & REVEAL ====================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }
[data-reveal-delay="5"] { transition-delay: .45s; }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  50% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==== 16. RESPONSIVE ============================================== */
/* Sur écrans intermédiaires, on compacte le bloc logo pour laisser
   respirer les 8 entrées de menu. */
@media (max-width: 1500px) {
  .site-header .logo__mark { height: 50px; }
}

/* Bascule vers le menu mobile : la barre de navigation compte jusqu'à
   8 entrées, on passe au tiroir avant tout risque de débordement. */
@media (max-width: 1340px) {
  :root { --header-h: 70px; }
  .nav, .topbar__list--left { display: none; }
  .burger { display: block; }
  /* Logo à gauche / burger à droite (convention mobile standard) : la nav
     desktop disparaît, plus besoin de centrer logo+menu comme un seul bloc —
     .site-header__menu redevient extensible pour combler l'espace restant. */
  .site-header__inner { justify-content: space-between; }
  .site-header__menu { flex: 1; justify-content: flex-end; min-width: 0; }
}

@media (max-width: 1140px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__grid > :nth-child(3) { display: none; }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packs-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .jobs-layout, .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; }
  /* Panneau de filtres replié par défaut dès que la mise en page passe en
     une colonne (les filtres se retrouvent au-dessus des résultats plutôt
     qu'à côté) — même mécanique grid-template-rows que .acc-body, ouverte
     via la classe .is-open posée par #filtersToggle (voir app.js). */
  .filters__toggle { display: inline-flex; }
  .filters__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
  .filters__body > div { overflow: hidden; }
  .filters.is-open .filters__body { grid-template-rows: 1fr; }
  .job-detail { grid-template-columns: 1fr; }
  .job-aside { position: static; }
  .cta-band { grid-template-columns: 1fr; }
  .info-strip { grid-template-columns: 1fr; }
  .post--h { flex-direction: column; }
  .post--h .post__media { aspect-ratio: 16 / 9; flex: none; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .topbar { display: none; }
  .site-header { top: var(--alert-bar-h, 0px); }
  .split, .split--60-40, .split--form-panel, .duo, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  /* .split__media est en tête du DOM pour passer en premier en desktop
     (voir order:-1 plus haut) ; en mobile, il doit au contraire suivre le
     texte plutôt que le précéder (Solutions #02 et #04, page
     Découvrez-nous), d'où l'ordre inversé une fois les colonnes empilées. */
  .split--media-first > .split__media { order: 1; }
  /* "Le cabinet" (accueil) : la vidéo est première dans le DOM (donc déjà
     affichée en premier en desktop), mais doit passer après le texte une
     fois les colonnes empilées en mobile. */
  .split--media-mobile-last > .split__media { order: 1; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .searchbar { grid-template-columns: 1fr; padding: 14px; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__grid > :nth-child(3) { display: block; }
  .stats { grid-template-columns: 1fr 1fr; }
  .media-frame__badge { position: static; margin-top: 20px; max-width: none; }
  .media-frame::after { display: none; }
  .stepper__label { display: none; }
  .stepper__bar { margin: 0 8px; }
  .card { padding: 26px; }
  .resource { flex-direction: column; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cta-band { padding: 30px 24px; }
  .duo__panel { padding: 30px; }
  .hero__cta .btn { width: 100%; }
}

/* Impression */
@media print {
  .site-header, .topbar, .site-footer, .to-top, .drawer, .overlay, .hero__glow { display: none !important; }
  body { color: #000; }
}

/* ==== 17. MESSAGES FLASH (Symfony) ================================== */
.flash-message {
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
}
.flash-message--success { background: rgba(18, 163, 123, .1); color: var(--success); border-color: rgba(18, 163, 123, .25); }
.flash-message--error { background: rgba(217, 83, 79, .1); color: var(--danger); border-color: rgba(217, 83, 79, .25); }
.flash-message--info { background: var(--sky-050); color: var(--sky-700); border-color: var(--sky-200); }

/* Formulaires Symfony génériques (contact, newsletter, candidature) :
   alignement sur les classes déjà stylées .input/.select du template. */
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 650; font-size: .9rem; color: var(--navy-800); margin-bottom: 8px; }
.form-row .form-error { color: var(--danger); font-size: .84rem; margin-top: 6px; display: block; }
.form-row--checkbox { display: flex; align-items: flex-start; gap: 10px; }
.form-row--checkbox label { margin: 0; font-weight: 500; }

/* ==== 18. ANTI-SPAM (honeypot) ======================================
   Champ piège invisible pour un visiteur humain, mais rempli par la
   plupart des robots qui soumettent les formulaires sans exécuter le CSS.
   Voir App\Form\HoneypotTrait / App\Service\AntiSpamGuard. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}