/* =========================================================
   UNION DU RECRUTEMENT - Charte respectée (blanc + bleus)
   Blanc + #2D71D3 + #102F54 + neutres froids - Lexend Giga + DM Sans
   ========================================================= */

:root{
  --blue:        #2D71D3;
  --blue-700:    #235ca9;
  --blue-300:    #6c9be0;
  --blue-200:    #a8c4ed;
  --blue-50:     #e9f0fb;
  --navy:        #102F54;
  --navy-deep:   #0b223d;

  --ink:         #0f1d31;
  --text:        #3c4757;
  --muted:       #5d6b7c;
  --line:        #e4e9f1;
  --line-2:      #cfd9e6;

  --bg:          #ffffff;
  --bg-2:        #f4f8fc;
  --surface:     #ffffff;

  --grad: linear-gradient(120deg, #2d71d3 0%, #6c9be0 100%);

  --maxw: 1400px;
  --maxw-narrow: 820px;
  --radius: 16px;
  --radius-lg: 24px;
  --pad-section: clamp(40px, 5vw, 80px);

  --shadow-sm: 0 1px 2px rgba(16,47,84,.05), 0 4px 14px rgba(16,47,84,.05);
  --shadow-md: 0 14px 34px rgba(16,47,84,.10), 0 3px 10px rgba(16,47,84,.06);
  --shadow-lg: 0 34px 70px rgba(16,47,84,.15), 0 10px 24px rgba(16,47,84,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"DM Sans", system-ui, -apple-system, sans-serif;
  font-size:18px; line-height:1.68;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:"Lexend Giga", sans-serif;
  color:var(--navy); font-weight:600; letter-spacing:0;
  line-height:1.12; margin:0; text-wrap:balance;
}
p{ margin:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }
.narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--pad-section); position:relative; }
.section--soft{ background:var(--bg-2); }
.section--navy{ background:var(--navy); color:#cdd9e8; }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{ color:#fff; }
/* Évite le doublement des marges entre deux sections claires consécutives */
.section:not(.section--navy):not(.section--soft) + .section:not(.section--navy):not(.section--soft){ padding-top:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:"DM Sans",sans-serif; font-weight:600;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--blue); border-radius:2px; }
.section--navy .eyebrow{ color:var(--blue-200); }
.section--navy .eyebrow::before{ background:var(--blue-200); }

.h-display{ font-size:clamp(1.9rem,3.2vw,2.8rem); line-height:1.06; }
.h-1{ font-size:clamp(1.7rem,3vw,2.45rem); }
.h-2{ font-size:clamp(1.4rem,2.1vw,1.9rem); }
.lead{ font-size:clamp(1.06rem,1.5vw,1.3rem); color:var(--muted); line-height:1.62; }
.section--navy .lead{ color:#9fb2c9; }

/* Boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"DM Sans",sans-serif; font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:999px; border:1.5px solid transparent; line-height:1;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--clay,.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(45,113,211,.26); }
.btn--clay:hover,.btn--primary:hover{ background:var(--blue-700); transform:translateY(-2px); box-shadow:0 16px 32px rgba(45,113,211,.32); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn--light{ background:#fff; color:var(--navy); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--lg{ padding:14px 28px; font-size:16px; }

/* Header */
.header{ position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; height:80px;
  transition:height .3s var(--ease), background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; }
/* La barre du haut occupe toute la largeur de l'ecran (pas de colonne centree) */
.header__bar{ display:flex; align-items:center; justify-content:space-between; width:100%; max-width:none; gap:24px; }
.header.scrolled{ height:66px; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line); box-shadow:0 1px 18px rgba(16,47,84,.05); }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:46px; width:auto; transition:height .3s var(--ease); }
.header.scrolled .brand img{ height:38px; }
.brand__wm{ font-family:"Lexend Giga",sans-serif; font-weight:600; font-size:15px; color:var(--navy); letter-spacing:.01em; line-height:1; }
.nav{ display:flex; align-items:center; gap:22px; }
.nav a{ position:relative; font-weight:500; font-size:15.5px; color:var(--navy); padding:6px 0; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); border-radius:2px; }
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); }
.nav a.active{ color:var(--blue); }
.header__cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--navy); border-radius:2px; transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Hero */
.hero{ position:relative; padding-top:150px; padding-bottom:clamp(56px,7vw,96px); overflow:hidden; }
.hero__blob{ position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(70px); }
.hero__blob--1{ width:540px; height:540px; right:-130px; top:-90px; background:radial-gradient(circle, rgba(108,155,224,.30), transparent 70%); }
.hero__blob--2{ width:460px; height:460px; left:-160px; bottom:-180px; background:radial-gradient(circle, rgba(45,113,211,.14), transparent 70%); }
.hero__inner{ position:relative; z-index:2; }
.hero__grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:48px; align-items:center; }
.hero h1{ margin-top:22px; }
.hero h1 em{ font-style:normal; color:var(--blue); }
.hero__lead{ margin-top:24px; max-width:620px; }
.hero__cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero__note{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-size:14.5px; color:var(--muted); }
.hero__note .dot{ width:9px; height:9px; border-radius:50%; background:#2bb673; box-shadow:0 0 0 4px rgba(43,182,115,.16); animation:pulse 2.6s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(43,182,115,.16);} 50%{ box-shadow:0 0 0 8px rgba(43,182,115,.04);} }

.hero__media{ position:relative; }
.ph{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:
   repeating-linear-gradient(135deg, #eef3fa 0 14px, #e4ecf7 14px 28px); border:1px solid var(--line); }
.ph__label{ position:absolute; inset:14px 14px auto 14px; font-family:"DM Mono", ui-monospace, monospace; font-size:12px; letter-spacing:.02em; color:#7e8ba0; background:rgba(255,255,255,.74); padding:8px 12px; border-radius:10px; backdrop-filter:blur(3px); }
.hero__photo{ aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.hero__badge{ position:absolute; left:-26px; bottom:34px; display:flex; align-items:center; gap:13px; background:#fff; padding:15px 19px; border-radius:16px; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.hero__badge img{ width:46px; height:46px; }
.hero__badge b{ font-family:"Lexend Giga",sans-serif; color:var(--navy); font-size:1.3rem; display:block; line-height:1; }
.hero__badge span{ font-size:12.5px; color:var(--muted); }

/* Bandeau chiffres (carte titrée) */
.statband{ position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,#f7faff,#fff); box-shadow:var(--shadow-sm); overflow:hidden; }
.statband::before{ content:""; position:absolute; left:0; top:0; right:0; height:4px; background:var(--grad); }
.statband__head{ padding:26px 30px 0; }
.statband__head h3{ font-size:1.3rem; margin-top:10px; }
.statband__grid{ display:grid; grid-template-columns:repeat(4,1fr); padding:22px 30px 28px; }
.stat{ position:relative; padding:6px 22px; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line); }
.stat__n{ font-family:"Lexend Giga",sans-serif; font-weight:600; font-size:2rem; color:var(--navy); line-height:1; white-space:nowrap; }
.stat__pre{ font-size:.55em; font-weight:500; color:var(--muted); }
.stat__n .unit{ color:var(--blue); }
.stat__l{ margin-top:9px; font-size:13.5px; color:var(--muted); line-height:1.5; }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }

/* Frictions (pas de hover, non cliquables) */
.friction{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px; padding:26px 24px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.friction__ic{ width:44px; height:44px; border-radius:13px; background:var(--blue-50); color:var(--blue); display:grid; place-items:center; }
.friction__ic svg{ width:22px; height:22px; }
.friction h3{ font-size:1.08rem; }
.friction p{ grid-column:1 / -1; font-size:15px; color:var(--muted); line-height:1.58; margin-top:12px; }

/* Panneau de marque (remplace les photos dans les héros) */

/* Visuel de marque : logo + anneaux pointillés (héros) */
.heroviz{ position:relative; display:grid; place-items:center; min-height:440px; }
.heroviz__mark{ width:min(64%,270px); position:relative; z-index:2; filter:drop-shadow(0 24px 50px rgba(45,113,211,.30)); animation:floaty 7s ease-in-out infinite; }
.heroviz__ring{ position:absolute; border-radius:50%; z-index:1; aspect-ratio:1; }
.heroviz__ring--a{ width:min(78%,340px); border:1.5px dashed rgba(45,113,211,.30); animation:spin 40s linear infinite; }
.heroviz__ring--b{ width:min(96%,420px); border:1.5px dashed rgba(45,113,211,.18); animation:spin 64s linear infinite reverse; }
.heroviz__ring--c{ width:min(58%,250px); border:1.5px dotted rgba(45,113,211,.35); animation:spin 30s linear infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Avatar à initiales (page fondateurs, sans photo) */
.avatar{ aspect-ratio:4/3; display:grid; place-items:center; background:linear-gradient(150deg,#eaf1fb,#dbe7f8); border-bottom:1px solid var(--line); }
.avatar span{ width:96px; height:96px; border-radius:50%; background:linear-gradient(150deg,#1c52a0,#2d71d3); color:#fff; font-family:"Lexend Giga",sans-serif; font-weight:600; font-size:1.9rem; letter-spacing:.02em; display:grid; place-items:center; box-shadow:0 12px 28px rgba(45,113,211,.3); }

/* Piliers (SANS élévation au survol - non cliquables) */
.pillar{ position:relative; padding:28px 26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.pillar:not(.pillar--link){ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:15px; }
.pillar__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--blue-50); color:var(--blue); }
.pillar__ic svg{ width:23px; height:23px; }
.pillar h3{ font-size:1.12rem; margin-bottom:10px; }
.pillar:not(.pillar--link) h3{ margin-bottom:0; }
.pillar p{ font-size:15px; color:var(--muted); line-height:1.6; }
.pillar:not(.pillar--link) p{ grid-column:1 / -1; margin-top:13px; }
.pillar--link{ background:var(--navy); color:#fff; display:flex; flex-direction:column; justify-content:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.pillar--link h3{ color:#fff; }
.pillar--link:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.pillar__go{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--blue-200); margin-top:18px; }
.pillar__go svg{ width:17px; height:17px; transition:transform .25s var(--ease); }
.pillar--link:hover .pillar__go svg{ transform:translateX(4px); }

/* Portes (cliquables → elles s'élèvent) */
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px; }
.door{ position:relative; display:flex; flex-direction:column; gap:13px; padding:26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.door::before{ content:""; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--grad); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease); }
.door:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.door:hover::before{ transform:scaleY(1); }
.door__icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--blue-50); color:var(--blue); }
.door__icon svg{ width:24px; height:24px; }
.door__k{ font-family:"Lexend Giga",sans-serif; font-weight:600; font-size:1.12rem; color:var(--navy); }
.door__d{ font-size:14.5px; color:var(--muted); line-height:1.55; }
.door__go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:var(--blue); }
.door__go svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.door:hover .door__go svg{ transform:translateX(4px); }

/* "Ce que nous ne sommes pas" */
.nots{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.not{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:13px; padding:24px 22px; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.not__x{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(168,196,237,.16); color:var(--blue-200); }
.not__x svg{ width:16px; height:16px; }
.not h3{ font-size:1.05rem; color:#fff; }
.not p{ grid-column:1 / -1; font-size:14px; color:#9fb2c9; line-height:1.52; margin-top:11px; }
.nots__foot{ margin-top:36px; text-align:center; font-family:"Lexend Giga",serif; font-size:clamp(1.15rem,2vw,1.6rem); color:#fff; }
.nots__foot b{ color:var(--blue-200); font-weight:600; }

/* Split cible */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.panel{ position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:46px 42px; min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.panel--recruteur{ background:linear-gradient(150deg,#1c52a0 0%,#2d71d3 100%); }
.panel--entreprise{ background:linear-gradient(150deg,#102F54 0%,#1d4a82 100%); }
.panel:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.panel__tag{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); font-weight:600; }
.panel h3{ color:#fff; font-size:clamp(1.5rem,2.4vw,2rem); margin:13px 0 12px; }
.panel p{ color:rgba(255,255,255,.9); font-size:16px; max-width:42ch; }
.panel .btn{ margin-top:26px; align-self:flex-start; }
.panel__mark{ position:absolute; right:-24px; top:-24px; width:180px; opacity:.15; }

/* Secteurs */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ display:inline-flex; align-items:center; gap:9px; padding:11px 19px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:15px; font-weight:500; color:var(--navy);
  transition:transform .22s var(--ease), border-color .22s, color .22s, box-shadow .22s; }
.chip:hover{ transform:translateY(-3px); border-color:var(--blue); color:var(--blue); box-shadow:var(--shadow-sm); }
.chip i{ width:7px; height:7px; border-radius:50%; background:var(--blue); display:inline-block; }

/* Fondateurs */
.founder{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--navy); color:#cdd9e8; padding:clamp(40px,6vw,74px); }
.founder__glow{ position:absolute; width:480px; height:480px; right:-120px; top:-160px; background:radial-gradient(circle,rgba(45,113,211,.45),transparent 70%); filter:blur(40px); pointer-events:none; }
.founder__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
.fstep{ padding:24px; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.fstep__n{ font-family:"Lexend Giga",sans-serif; font-weight:600; color:var(--blue-200); font-size:1.4rem; }
.fstep p{ margin-top:11px; font-size:15px; color:#a9bace; line-height:1.55; }

/* CTA */
.cta{ text-align:center; }
.cta h2{ font-size:clamp(1.9rem,3.6vw,3rem); }
.cta .lead{ margin:18px auto 0; max-width:58ch; }
.cta__row{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

/* Footer */
.footer{ background:var(--navy); color:#9fb2c9; padding-block:clamp(56px,7vw,84px) 30px; }
.footer__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:40px; }
.footer__brand img{ height:62px; margin-bottom:18px; }
.footer__brand p{ font-size:15px; color:#8499b0; max-width:34ch; line-height:1.6; }
.footer h4{ font-family:"DM Sans",sans-serif; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.footer__col a{ display:block; padding:7px 0; font-size:15px; color:#9fb2c9; transition:color .2s, transform .2s var(--ease); }
.footer__col a:hover{ color:#fff; transform:translateX(3px); }
.footer__bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.10); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:#7f93aa; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__note .dot{ animation:none; }
  .heroviz__mark,.heroviz__ring{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* Menu mobile */
.mobile-menu{ position:fixed; inset:0; z-index:55; background:rgba(255,255,255,.98); backdrop-filter:blur(8px); transform:translateY(-100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; padding:104px 28px 40px; gap:6px; }
.mobile-menu.open{ transform:none; }
.mobile-menu a{ font-family:"Lexend Giga",sans-serif; font-size:1.4rem; color:var(--navy); padding:14px 0; border-bottom:1px solid var(--line); }
.mobile-menu .btn{ margin-top:24px; }

/* Responsive */
/* Largeurs intermediaires : on masque le texte du logo pour que la nav tienne sans deborder */
@media (max-width:1200px){
  .brand__wm{ display:none; }
  .nav{ gap:18px; }
}
@media (max-width:1024px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .grid-4,.nots{ grid-template-columns:1fr 1fr; }
  .statband__grid{ grid-template-columns:1fr 1fr; row-gap:22px; }
  .stat + .stat::before{ display:none; }
}
@media (max-width:980px){
  .nav,.header__cta .btn{ display:none; }
  .burger{ display:flex; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ display:none; }
  .grid-3,.split,.grid-2,.founder__steps{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .brand__wm{ display:none; }
  .grid-4,.nots,.doors{ grid-template-columns:1fr; }
  .statband__grid{ grid-template-columns:1fr; }
  .stat{ padding-block:22px; }
}

/* Zones tactiles : liens de pied de page plus hauts au doigt sur mobile
   (audit 2026-06-03, bloc additif). */
@media (max-width:760px){
  .footer__col a{ padding-top:12px; padding-bottom:12px; }
}