/* =========================================================
   L'Afrim — Auto-école à Sion  ·  Maquette Studio Riviera
   Design system : bleu de marque #018DD2 / #2694F3
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Couleurs marque (reprises du site existant) */
  --blue:        #018DD2;   /* primaire */
  --blue-bright: #2694F3;   /* accent vif */
  --blue-deep:   #0B6FA8;   /* hover */
  --blue-light:  #C2DEF4;
  --blue-pale:   #EAF4FC;
  --navy:        #0C2438;   /* sections sombres */
  --navy-2:      #103253;
  --ink:         #14202B;   /* charbon titres */
  --slate:       #51626F;   /* corps (AA sur blanc) */
  --slate-soft:  #7A8694;
  --paper:       #FFFFFF;
  --paper-2:     #F4F8FB;
  --line:        #E4ECF3;

  /* Typo */
  --f-display: "Poppins", system-ui, sans-serif;
  --f-text:    "Inter", system-ui, sans-serif;

  /* Échelle d'espacement (base 8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(12,36,56,.06);
  --shadow:    0 18px 40px -18px rgba(12,36,56,.22);
  --shadow-lg: 0 40px 80px -32px rgba(12,36,56,.32);
  --shadow-blue: 0 18px 38px -12px rgba(1,141,210,.45);

  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overscroll-behavior-y:none; }
/* Smooth natif uniquement si JS absent (sinon Lenis/JS gèrent → évite le conflit/bug de scroll) */
html:not(.js){ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--f-text);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  color:var(--slate);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:3px; border-radius:6px; }

/* ---------- Typo ---------- */
h1,h2,h3,h4{ font-family:var(--f-display); color:var(--ink); line-height:1.1; font-weight:700; letter-spacing:-.02em; }
.h-eyebrow{
  font-family:var(--f-display);
  font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:.55rem;
}
.h-eyebrow::before{ content:""; width:26px; height:2px; background:var(--blue); border-radius:2px; }
h2.section-title{ font-size:clamp(1.9rem,3.6vw,3rem); margin-top:var(--s-3); text-align:center; }
.lead{ font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--slate); max-width:62ch; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding-block:clamp(64px,9vw,128px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.section--pale{ background:var(--paper-2); }
.section--navy{ background:var(--navy); color:#cdd9e4; }
.section--navy h2,.section--navy h3{ color:#fff; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.stack-head{ max-width:760px; }
.center .stack-head,.center.stack-head{ margin-inline:auto; }

/* ---------- Boutons ---------- */
.btn{
  --bg:var(--blue); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:15px 28px; border-radius:999px; font-family:var(--f-display); font-weight:600;
  font-size:.98rem; background:var(--bg); color:var(--fg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  min-height:52px; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:linear-gradient(135deg,var(--blue),var(--blue-bright)); box-shadow:var(--shadow-blue); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 24px 46px -12px rgba(1,141,210,.55); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn--light{ background:#fff; color:var(--blue); box-shadow:var(--shadow); }
.btn--light:hover{ transform:translateY(-3px); }
.btn--outline-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn--outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--block{ width:100%; }

/* ---------- Header / Nav ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s, box-shadow .35s, padding .35s;
  padding-block:14px;
}
.header.scrolled{
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm); padding-block:8px;
}
/* En haut de page (au-dessus du hero sombre) : logo + nav en blanc */
.header:not(.scrolled) .brand img{ filter:brightness(0) invert(1); }
.header:not(.scrolled) .nav-links a{ color:#fff; }
.header:not(.scrolled) .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.15); }
.header:not(.scrolled) .nav-phone{ color:#fff; }
.header:not(.scrolled) .nav-phone svg{ color:#9fd4f4; }
.header:not(.scrolled) .nav-toggle span,
.header:not(.scrolled) .nav-toggle span::before,
.header:not(.scrolled) .nav-toggle span::after{ background:#fff; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ height:46px; width:auto; transition:height .35s; }
.header.scrolled .brand img{ height:40px; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family:var(--f-display); font-weight:500; font-size:.94rem; color:var(--ink);
  padding:10px 14px; border-radius:999px; position:relative; transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--blue); background:var(--blue-pale); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-phone{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display);
  font-weight:600; color:var(--ink); font-size:.95rem; padding:8px 6px;
}
.nav-phone svg{ width:18px; height:18px; color:var(--blue); }
.nav-phone span{ transition:color .2s; }
.nav-phone:hover span{ color:var(--blue); }
.nav-toggle{ display:none; width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; }
.nav-toggle span{ position:relative; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }
body.menu-open .nav-toggle span{ background:transparent; }
body.menu-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:96px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,24,40,.45) 0%, rgba(8,24,40,.30) 48%, rgba(8,24,40,.58) 100%),
    linear-gradient(105deg, rgba(12,36,56,.85) 0%, rgba(11,80,140,.58) 50%, rgba(1,141,210,.32) 100%);
}
.hero__inner{ max-width:680px; color:#fff; padding-block:48px; }
.hero .h-eyebrow{ color:#9fd4f4; }
.hero .h-eyebrow::before{ background:#9fd4f4; }
.hero h1{
  color:#fff; font-size:clamp(2.4rem,5.6vw,4.3rem); line-height:1.04; margin:18px 0 20px;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero h1 em{ font-style:normal; color:#7fc8f2; }
.hero__sub{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:#dce8f2; max-width:54ch; line-height:1.6; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__cta .nav-phone{ color:#fff; }
.hero__cta .nav-phone svg{ color:#7fc8f2; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:24px 32px; margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.18); }
.hero__trust .ti{ display:flex; flex-direction:column; gap:2px; }
.hero__trust .ti b{ font-family:var(--f-display); font-size:1.5rem; color:#fff; font-weight:700; line-height:1; }
.hero__trust .ti span{ font-size:.8rem; color:#aecbe0; letter-spacing:.02em; }
.hero__langs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.lang-pill{ font-size:.78rem; font-weight:500; color:#dce8f2; padding:6px 13px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.05); }
.scroll-hint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#cfe3f2; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint::after{ content:""; width:1px; height:34px; background:linear-gradient(#cfe3f2,transparent); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- Stats bar ---------- */
.stats{ position:relative; margin-top:-1px; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.stat{ background:#fff; padding:36px 24px; text-align:center; }
.stat b{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,3.4vw,2.9rem); color:var(--blue); line-height:1; letter-spacing:-.02em; }
.stat span{ display:block; margin-top:8px; font-size:.9rem; color:var(--slate); }

/* ---------- À propos ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:4/5; object-fit:cover; }
.media-badge{
  position:absolute; left:-22px; bottom:28px; background:#fff; border-radius:var(--radius);
  padding:18px 22px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; max-width:240px;
}
.media-badge .mb-num{ font-family:var(--f-display); font-weight:700; font-size:2rem; color:var(--blue); line-height:1; }
.media-badge .mb-txt{ font-size:.82rem; color:var(--slate); line-height:1.35; }
.values{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.value-pill{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:500; font-size:.9rem; color:var(--ink); background:var(--blue-pale); padding:9px 16px; border-radius:999px; }
.value-pill svg{ width:16px; height:16px; color:var(--blue); }
/* École : colonne de texte centrée (pour aligner le titre H2 centré) */
#ecole .split__body{ text-align:center; }
#ecole .split__body .lead{ margin-inline:auto; }
#ecole .split__body .values{ justify-content:center; }
#ecole .split__body .hero__cta{ justify-content:center; }

/* ---------- Cours (grille services) ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:var(--s-6); }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
  display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card__icon{ width:58px; height:58px; border-radius:16px; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; color:var(--blue); transition:.35s; }
.card:hover .card__icon{ background:var(--blue); color:#fff; transform:rotate(-6deg); }
.card__icon svg{ width:30px; height:30px; }
.card h3{ font-size:1.22rem; }
.card p{ font-size:.94rem; color:var(--slate); flex-grow:1; }
.card__links{ display:flex; align-items:center; gap:18px; padding-top:6px; }
.card__links a{ font-family:var(--f-display); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; }
.card__links .lk-book{ color:var(--blue); }
.card__links .lk-more{ color:var(--slate-soft); }
.card__links a svg{ width:15px; height:15px; transition:transform .25s; }
.card__links a:hover svg{ transform:translateX(3px); }

/* ---------- Étapes (timeline) ---------- */
.steps{ position:relative; margin-top:var(--s-7); }
.steps__line{ position:absolute; top:34px; left:0; right:0; height:2px; background:var(--navy-2); }
.steps__progress{ position:absolute; top:34px; left:0; height:2px; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); width:0; }
.steps__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; }
.step{ text-align:center; }
.step__num{
  width:68px; height:68px; margin:0 auto 18px; border-radius:50%; background:var(--navy-2);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display);
  font-weight:700; font-size:1.5rem; color:#7fa6c5; border:2px solid transparent; position:relative; z-index:2;
  transition:.4s var(--ease);
}
.step.active .step__num{ background:linear-gradient(135deg,var(--blue),var(--blue-bright)); color:#fff; box-shadow:0 0 0 8px rgba(38,148,243,.15); }
.step h3{ color:#fff; font-size:1.1rem; margin-bottom:6px; }
.step p{ font-size:.86rem; color:#9fb3c4; max-width:22ch; margin-inline:auto; }

/* ---------- Pourquoi nous (comparatif) ---------- */
.reasons{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:var(--s-6); }
.reason{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; gap:18px; align-items:flex-start; transition:.3s; }
.reason:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.reason__ic{ flex:none; width:48px; height:48px; border-radius:14px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.reason__ic svg{ width:26px; height:26px; }
.reason h3{ font-size:1.08rem; margin-bottom:4px; }
.reason p{ font-size:.92rem; }
.compare{ margin-top:26px; display:flex; flex-wrap:wrap; gap:20px; align-items:stretch; }
.compare__card{ flex:1; min-width:220px; border-radius:var(--radius); padding:26px 28px; }
.compare__card.us{ background:linear-gradient(135deg,var(--blue),var(--blue-bright)); color:#fff; box-shadow:var(--shadow-blue); }
.compare__card.them{ background:#fff; border:1px solid var(--line); }
.compare__card .pct{ font-family:var(--f-display); font-weight:700; font-size:2.6rem; line-height:1; }
.compare__card.them .pct{ color:var(--slate); }
.compare__card .lbl{ font-size:.9rem; margin-top:6px; opacity:.92; }
.compare__card.us .lbl{ color:#eaf6ff; }

/* ---------- Témoignages ---------- */
.reviews-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.google-rating{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 20px; box-shadow:var(--shadow-sm); }
.google-rating .g-num{ font-family:var(--f-display); font-weight:700; font-size:2rem; color:var(--ink); line-height:1; }
.stars{ display:flex; gap:2px; color:#FFB400; }
.stars svg{ width:16px; height:16px; }
.google-rating .g-sub{ font-size:.8rem; color:var(--slate); }
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:var(--s-6); }
.review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:16px; }
.review .stars{ margin-bottom:-4px; }
.review p{ font-size:.96rem; color:var(--ink); line-height:1.6; flex-grow:1; }
.review__who{ display:flex; align-items:center; gap:12px; }
.review__av{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-bright)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:600; }
.review__who b{ display:block; font-family:var(--f-display); font-size:.95rem; color:var(--ink); }
.review__who span{ font-size:.8rem; color:var(--slate-soft); }

/* ---------- Dates des cours ---------- */
.dates{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:var(--s-6); }
.date-col{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.date-col__head{ background:linear-gradient(135deg,var(--blue),var(--blue-bright)); color:#fff; padding:18px 24px; display:flex; align-items:center; gap:12px; }
.date-col__head svg{ width:24px; height:24px; }
.date-col__head h3{ color:#fff; font-size:1.12rem; }
.date-col ul{ padding:8px 24px 24px; }
.date-col li{ padding:13px 0; border-bottom:1px dashed var(--line); font-size:.9rem; color:var(--ink); display:flex; flex-direction:column; gap:2px; }
.date-col li:last-child{ border-bottom:none; }
.date-col li b{ font-family:var(--f-display); font-weight:600; }
.date-col li span{ font-size:.82rem; color:var(--slate); }
.dates-note{ text-align:center; margin-top:26px; font-size:.9rem; color:var(--slate); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:var(--s-6) auto 0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding:24px 4px; font-family:var(--f-display); font-weight:600; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--ink); }
.faq-q:hover{ color:var(--blue); }
.faq-ic{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; transition:.35s; }
.faq-ic svg{ width:18px; height:18px; transition:transform .35s; }
.faq-item.open .faq-ic{ background:var(--blue); color:#fff; }
.faq-item.open .faq-ic svg{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.faq-a__inner{ padding:0 4px 26px; color:var(--slate); font-size:.98rem; max-width:70ch; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:stretch; }
.contact-info{ display:flex; flex-direction:column; gap:18px; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; padding:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:.3s; }
.contact-row:hover{ box-shadow:var(--shadow); border-color:transparent; }
.contact-row__ic{ flex:none; width:46px; height:46px; border-radius:13px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.contact-row__ic svg{ width:24px; height:24px; }
.contact-row b{ font-family:var(--f-display); color:var(--ink); display:block; font-size:1rem; }
.contact-row span,.contact-row a{ font-size:.94rem; color:var(--slate); }
.contact-row a:hover{ color:var(--blue); }
.contact-socials{ display:flex; gap:12px; margin-top:4px; }
.contact-socials a{ width:46px; height:46px; border-radius:13px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.3s; }
.contact-socials a:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-3px); }
.contact-socials svg{ width:20px; height:20px; }
.map-wrap{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); min-height:340px; }
.map-wrap iframe{ width:100%; height:100%; min-height:440px; border:0; display:block; }

/* ---------- CTA finale ---------- */
.cta-band{ background:linear-gradient(120deg,var(--navy),var(--navy-2)); color:#fff; border-radius:var(--radius-lg); padding:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; width:420px; height:420px; right:-120px; top:-160px; background:radial-gradient(circle,rgba(38,148,243,.4),transparent 65%); }
.cta-band::after{ content:""; position:absolute; width:360px; height:360px; left:-120px; bottom:-180px; background:radial-gradient(circle,rgba(1,141,210,.3),transparent 65%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.7rem); }
.cta-band p{ color:#bcd2e4; max-width:52ch; margin:16px auto 30px; }
.cta-band .hero__cta{ justify-content:center; }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#9fb3c4; padding-block:64px 28px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer__brand img{ height:54px; margin-bottom:18px; filter:brightness(0) invert(1); }
.footer__brand p{ font-size:.92rem; max-width:32ch; }
.footer h4{ color:#fff; font-size:.95rem; letter-spacing:.04em; margin-bottom:16px; font-family:var(--f-display); }
.footer ul li{ margin-bottom:10px; }
.footer ul a{ font-size:.92rem; transition:color .2s; }
.footer ul a:hover{ color:var(--blue-bright); }
.footer__contact div{ display:flex; gap:10px; margin-bottom:12px; font-size:.92rem; }
.footer__contact svg{ width:18px; height:18px; color:var(--blue-bright); flex:none; margin-top:3px; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:.82rem; color:#7a93a8; }
.footer__bottom a:hover{ color:#fff; }
.footer__credit b{ color:#cdd9e4; font-weight:600; }

/* ---------- Mobile menu panel ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:99; background:rgba(12,36,56,.98); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; padding:32px; transform:translateX(100%); transition:transform .4s var(--ease); }
body.menu-open .mobile-menu{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--f-display); font-weight:600; font-size:1.6rem; color:#fff; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu a:last-of-type{ border-bottom:none; }
.mobile-menu .btn{ margin-top:24px; }

/* ---------- Reveal animations (masquées uniquement si JS actif) ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .scroll-hint::after{ animation:none; }
}

/* ---------- Préchargeur (loading) ---------- */
#preloader{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%);
  transition:opacity .6s ease, visibility .6s ease;
}
html:not(.js) #preloader{ display:none; }
#preloader.loaded{ opacity:0; visibility:hidden; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; padding:24px; }
.preloader__logo{ height:72px; width:auto; filter:brightness(0) invert(1); animation:preLogo 1s var(--ease) both; }
.preloader__bar{ width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.15); overflow:hidden; }
.preloader__bar span{ display:block; height:100%; width:100%; border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); transform:translateX(-100%); animation:preBar 1.05s var(--ease) forwards; }
@keyframes preLogo{ 0%{ opacity:0; transform:translateY(12px) scale(.95); } 100%{ opacity:1; transform:none; } }
@keyframes preBar{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(0); } }

/* ---------- Intro du hero (jouée après le préchargeur) ---------- */
html.js .hero__inner > *{ opacity:0; }
body.ready .hero__inner > *{ animation:heroIn .85s var(--ease) forwards; }
body.ready .hero__inner > *:nth-child(1){ animation-delay:.05s; }
body.ready .hero__inner > *:nth-child(2){ animation-delay:.16s; }
body.ready .hero__inner > *:nth-child(3){ animation-delay:.28s; }
body.ready .hero__inner > *:nth-child(4){ animation-delay:.40s; }
body.ready .hero__inner > *:nth-child(5){ animation-delay:.52s; }
body.ready .hero__inner > *:nth-child(6){ animation-delay:.64s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* ---------- Lenis : compat smooth scroll (corrige les saccades au swipe) ---------- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .preloader__logo,.preloader__bar span{ animation:none !important; opacity:1; transform:none; }
  html.js .hero__inner > *{ opacity:1; }
  body.ready .hero__inner > *{ animation:none; }
}

/* ============ Centrage global du contenu (PC + mobile) ============ */
/* Hero centré */
.hero__inner{ max-width:800px; margin-inline:auto; text-align:center; }
.hero__sub{ margin-inline:auto; }
.hero__cta{ justify-content:center; }
.hero__trust{ justify-content:center; }
.hero__langs{ justify-content:center; }

/* Cartes de cours centrées */
.card{ align-items:center; text-align:center; }
.card__links{ justify-content:center; }

/* Raisons « pourquoi nous » centrées (icône au-dessus du texte) */
.reason{ flex-direction:column; align-items:center; text-align:center; }

/* Comparatif centré */
.compare__card{ text-align:center; }
.compare__card .btn{ align-self:center; }

/* Avis centrés */
.review{ align-items:center; text-align:center; }
.review .stars{ justify-content:center; }
.review__who{ justify-content:center; }

/* Dates centrées */
.date-col__head{ justify-content:center; }
.date-col li{ align-items:center; text-align:center; }

/* FAQ : questions + réponses centrées */
.faq-q{ justify-content:center; text-align:center; gap:14px; }
.faq-a__inner{ text-align:center; margin-inline:auto; }

/* Contact centré (icône au-dessus du texte) */
.contact-row{ flex-direction:column; align-items:center; text-align:center; }
.contact-socials{ justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .cards,.reviews,.dates{ grid-template-columns:repeat(2,1fr); }
  .steps__grid{ grid-template-columns:repeat(2,1fr); gap:36px; }
  .steps__line,.steps__progress{ display:none; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:860px){
  .nav-links,.nav-phone{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-actions .btn--primary{ display:none; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split--reverse .split__media{ order:0; }
  .split__media img{ aspect-ratio:16/11; }
  .reasons{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .container{ padding-inline:18px; }
  .cards,.reviews,.dates,.steps__grid{ grid-template-columns:1fr; }
  .compare{ flex-direction:column; }
  .footer__top{ grid-template-columns:1fr; }
  .hero__trust{ gap:18px 26px; }
  .media-badge{ left:0; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
}