/* ============================================================
   Simon Gauthier — feuille de style
   Structure : 1) Thèmes  2) Base  3) Mise en page  4) Composants
   Pour changer une couleur, modifie les variables du thème (section 1).
   ============================================================ */

/* ---------- 1) THÈMES (couleurs + polices) ---------- */
:root[data-theme="editorial"] {
  --bg:#F3EEE4; --panel:#FBF7EF; --header-bg:rgba(243,238,228,.82);
  --ink:#211B14; --sub:#6C6154; --accent:#B0511E; --accent-ink:#FBF7EF;
  --line:rgba(33,27,20,.14); --faint:rgba(33,27,20,.06);
  --on-dark-line:rgba(243,238,228,.28); --on-dark-soft:rgba(243,238,228,.10);
  --disp:"Newsreader", Georgia, serif;
  --body:"Libre Franklin", system-ui, sans-serif;
  --disp-weight:500;
}
:root[data-theme="ardoise"] {
  --bg:#E8EAE7; --panel:#F3F4F2; --header-bg:rgba(232,234,231,.82);
  --ink:#171B18; --sub:#59615B; --accent:#2E5C4D; --accent-ink:#F3F4F2;
  --line:rgba(23,27,24,.14); --faint:rgba(23,27,24,.06);
  --on-dark-line:rgba(232,234,231,.24); --on-dark-soft:rgba(232,234,231,.10);
  --disp:"IBM Plex Sans", system-ui, sans-serif;
  --body:"IBM Plex Sans", system-ui, sans-serif;
  --disp-weight:600;
}
:root[data-theme="chaleur"] {
  --bg:#FAF4EA; --panel:#FFFFFF; --header-bg:rgba(250,244,234,.82);
  --ink:#26201A; --sub:#6F6456; --accent:#BB7C24; --accent-ink:#FFFDF9;
  --line:rgba(38,32,26,.13); --faint:rgba(38,32,26,.05);
  --on-dark-line:rgba(250,244,234,.26); --on-dark-soft:rgba(250,244,234,.10);
  --disp:"Spectral", Georgia, serif;
  --body:"Libre Franklin", system-ui, sans-serif;
  --disp-weight:500;
}

/* ---------- 2) BASE ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  transition:background .45s ease, color .45s ease;
}
::selection { background:rgba(0,0,0,.12); }
img { max-width:100%; }

.container { max-width:1160px; margin:0 auto; padding-left:72px; padding-right:72px; }

.display { font-family:var(--disp); font-weight:var(--disp-weight); }

.eyebrow {
  font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:22px;
}

/* Boutons & liens réutilisables */
.btn {
  display:inline-block; cursor:pointer; text-decoration:none;
  font-size:16px; font-weight:600; padding:15px 28px; border-radius:999px;
  border:none; font-family:inherit; transition:opacity .2s, background .2s;
}
.btn--accent { background:var(--accent); color:var(--accent-ink); }
.btn--accent:hover { opacity:.88; }
.btn--ghost { background:transparent; border:1px solid var(--on-dark-line); color:var(--bg); }
.btn--ghost:hover { background:var(--on-dark-soft); }
.link-underline {
  font-size:16px; font-weight:500; color:var(--ink); text-decoration:none;
  padding:15px 6px; border-bottom:1.5px solid var(--line); transition:border-color .2s;
}
.link-underline:hover { border-color:var(--accent); }

/* Blocs de texte communs */
.section { padding-top:104px; padding-bottom:104px; }
.section__title {
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.08; letter-spacing:-.02em;
  margin:0 0 44px; max-width:22ch;
}
.lead-xl {
  font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.18; letter-spacing:-.015em;
  margin:0 0 34px; max-width:840px; text-wrap:pretty;
}
.lead-md {
  font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); margin:0;
}
.strong { font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; font-weight:600; margin:0 0 22px; }
.prose { font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.55; color:var(--sub); max-width:62ch; margin:0 0 22px; }

/* ---------- 3) MISE EN PAGE : SECTIONS ---------- */
.section--panel {
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section--panel-top { border-bottom:none; }

/* En-tête */
.header {
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner {
  height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand {
  font-family:var(--disp); font-weight:var(--disp-weight); font-size:19px;
  letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav { display:flex; align-items:center; gap:28px; }
.nav__link {
  font-size:14px; font-weight:500; letter-spacing:.005em; color:var(--sub);
  text-decoration:none; transition:color .2s;
}
.nav__link:hover, .nav__link.is-active { color:var(--accent); }
.nav__toggle {
  display:none; border:1px solid var(--line); background:transparent; color:var(--ink);
  width:40px; height:40px; border-radius:10px; cursor:pointer; font-size:17px;
}
.header__right { display:flex; align-items:center; gap:20px; }
.lang { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; }
.lang__opt { color:var(--sub); text-decoration:none; transition:color .2s; }
.lang__opt:hover { color:var(--ink); }
.lang__opt.is-active { color:var(--accent); }
.lang span { color:var(--sub); opacity:.4; }
.mobile-menu {
  border-top:1px solid var(--line); padding:10px 72px 18px;
  flex-direction:column; gap:2px;
}
.mobile-menu[hidden] { display:none; }
.mobile-menu__link {
  font-size:16px; font-weight:500; padding:12px 0; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--faint);
}
.mobile-menu__cta { margin-top:12px; text-align:center; padding:13px; }

/* Hero */
.hero {
  padding-top:80px; padding-bottom:104px;
  display:flex; gap:64px; align-items:center;
}
.hero__text { flex:1; min-width:0; }
.hero__title {
  font-size:clamp(2.5rem,5.6vw,4.9rem); line-height:1.02; letter-spacing:-.02em;
  margin:0 0 24px; text-wrap:balance;
}
.hero__lead {
  font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.25; letter-spacing:-.01em;
  color:var(--accent); margin:0 0 20px;
}
.hero__sub {
  font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; color:var(--sub);
  max-width:34ch; margin:0 0 34px;
}
.hero__actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__portrait { flex:0 0 380px; width:380px; max-width:100%; }
.hero__portrait img {
  width:100%; height:460px; object-fit:cover; object-position:50% 22%;
  display:block; border:1px solid var(--line); border-radius:10px; background:var(--panel);
}

/* Animation « Mise en ordre » du hero (CSS pur, sans JS) */
@keyframes c-align {
  0%   { transform:translate(var(--dx),var(--dy)) rotate(var(--dr)); opacity:.25; }
  30%  { transform:translate(0,0) rotate(0); opacity:1; }
  86%  { transform:translate(0,0) rotate(0); opacity:1; }
  100% { transform:translate(var(--dx),var(--dy)) rotate(var(--dr)); opacity:.25; }
}
@keyframes c-fill {
  0%,26% { width:6%; }
  44%    { width:100%; }
  86%    { width:100%; }
  100%   { width:6%; }
}
.hero-anim {
  width:100%; aspect-ratio:380/440;
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:22px; padding:0 46px;
}
.hero-anim .row { display:flex; align-items:center; gap:16px; animation:c-align 7s cubic-bezier(.22,1,.36,1) infinite; }
.hero-anim .dot { flex:none; width:12px; height:12px; border-radius:999px; }
.hero-anim .track { flex:1; height:8px; border-radius:999px; background:rgba(33,27,20,.08); overflow:hidden; }
.hero-anim .bar { height:100%; border-radius:999px; background:var(--accent); animation:c-fill 7s cubic-bezier(.22,1,.36,1) infinite; }
@media (prefers-reduced-motion:reduce) {
  .hero-anim .row { animation:none; transform:none; opacity:1; }
  .hero-anim .bar { animation:none; width:100%; }
}

/* À propos : photo + bio côte à côte */
.apropos__top { display:flex; gap:48px; align-items:flex-start; margin-bottom:56px; }
.apropos__photo { flex:0 0 300px; max-width:100%; }
.apropos__photo img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.apropos__bio { flex:1; min-width:0; }
.apropos__bio .section__title { max-width:none; margin:0 0 20px; }
.apropos__bio .prose { font-size:1.05rem; line-height:1.6; margin:0 0 20px; }

/* Problème */
.dots { list-style:none; padding:0; margin:0 0 34px; max-width:64ch; display:flex; flex-direction:column; gap:16px; }
.dots li {
  display:flex; gap:16px; align-items:flex-start;
  font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.5; color:var(--sub);
}
.dots li::before {
  content:""; flex:none; width:8px; height:8px; border-radius:999px;
  background:var(--accent); margin-top:.6em;
}

/* Méthode : formats */
.formats { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:64px; }
.whys { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.terrains { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.card {
  border:1px solid var(--line); border-radius:12px; padding:32px; background:var(--panel);
  transition:transform .2s, box-shadow .2s;
}
.card:hover { transform:translateY(-3px); }
.card__tag { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:14px; }
.card__title { font-size:1.55rem; letter-spacing:-.01em; margin:0 0 12px; }
.card__body { font-size:1rem; line-height:1.55; color:var(--sub); margin:0; }

/* Méthode : sélecteur d'étapes */
.stepper__head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.stepper__title { font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.01em; margin:0; }
.stepper__hint { font-size:14px; color:var(--sub); }
.stepper { display:flex; gap:28px; }
.stepper__rail { flex:0 0 320px; display:flex; flex-direction:column; gap:4px; }
.step {
  text-align:left; cursor:pointer; background:transparent; border:none;
  border-left:2px solid transparent; padding:14px 16px; border-radius:0 8px 8px 0;
  display:flex; align-items:center; gap:14px; transition:background .2s; font-family:inherit;
}
.step.is-active { background:var(--faint); border-left-color:var(--accent); }
.step__num {
  flex:none; width:30px; height:30px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; font-family:var(--disp);
  background:transparent; color:var(--sub); border:1px solid var(--line);
}
.step.is-active .step__num { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.step__label { font-size:16px; font-weight:500; color:var(--sub); }
.step.is-active .step__label { font-weight:600; color:var(--ink); }
.stepper__panel {
  flex:1; border:1px solid var(--line); border-radius:12px; padding:36px; background:var(--panel);
  display:flex; flex-direction:column; justify-content:center; min-height:180px;
}
.stepper__count { margin-bottom:16px; }
.stepper__body {
  font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.3; letter-spacing:-.01em;
  margin:0; text-wrap:pretty;
}

/* Parcours */
.parcours__intro { display:flex; gap:64px; margin-bottom:56px; }
.parcours__intro .section__title { flex:1; max-width:16ch; margin:0; line-height:1.1; }
.parcours__text { flex:1; max-width:52ch; }
.parcours__text .prose { font-size:1.05rem; line-height:1.6; margin:0 0 20px; }
.quote {
  font-size:1.05rem; line-height:1.6; color:var(--ink); margin:0;
  padding-left:18px; border-left:2px solid var(--accent);
}
.reals { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.real {
  border:1px solid var(--line); border-radius:12px; padding:28px; background:var(--bg);
  display:flex; flex-direction:column; min-height:230px;
}
.real__cat {
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); line-height:1.35; margin-bottom:16px;
}
.real__big {
  font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.02em; color:var(--ink);
  line-height:1.02; margin-bottom:12px;
}
.real__label { font-size:1.02rem; font-weight:600; line-height:1.35; margin-bottom:8px; }
.real__note { font-size:.92rem; line-height:1.5; color:var(--sub); margin-bottom:18px; }
.real__foot { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.real__role { font-size:.86rem; font-weight:600; line-height:1.35; color:var(--ink); }
.real__company { font-size:.86rem; line-height:1.35; color:var(--sub); margin-top:2px; }

/* Traits */
.traits { display:flex; flex-wrap:wrap; gap:12px; }
.trait {
  font-size:15px; font-weight:600; padding:12px 20px; border-radius:999px;
  border:1px solid var(--accent); color:var(--accent);
}

/* Contact */
.cta { max-width:1000px; margin:0 auto; background:var(--ink); border-radius:20px; padding:64px 60px; color:var(--bg); }
.cta__title {
  font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.2; letter-spacing:-.02em;
  margin:0 0 20px; max-width:22ch; text-wrap:pretty;
}
.cta__sub { font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; opacity:.82; margin:0 0 30px; max-width:46ch; }
.cta__actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.cta__linkedin {
  font-size:16px; font-weight:500; padding:15px 6px; color:var(--bg); text-decoration:none;
  opacity:.75; border-bottom:1.5px solid var(--on-dark-line); transition:opacity .2s;
}
.cta__linkedin:hover { opacity:1; }

/* Formulaire de contact (sur la carte foncée) */
.cta__form { margin:8px 0 28px; max-width:560px; display:flex; flex-direction:column; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--bg); opacity:.75; }
.cta__form input, .cta__form textarea {
  font-family:inherit; font-size:1rem; color:var(--bg);
  background:var(--on-dark-soft); border:1px solid var(--on-dark-line);
  border-radius:10px; padding:13px 15px; width:100%; transition:border-color .2s, background .2s;
}
.cta__form textarea { resize:vertical; min-height:110px; }
.cta__form input::placeholder, .cta__form textarea::placeholder { color:var(--bg); opacity:.4; }
.cta__form input:focus, .cta__form textarea:focus {
  outline:none; border-color:var(--accent); background:rgba(255,255,255,.08);
}
.cta__form-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:4px; }
.cta__form button[disabled] { opacity:.6; cursor:default; }
.cta__form-status { font-size:.95rem; line-height:1.4; opacity:.85; }
.cta__form-status.is-ok { color:#8fd6a8; opacity:1; }
.cta__form-status.is-error { color:#f2a58c; opacity:1; }

/* Pied de page */
.footer { border-top:1px solid var(--line); }
.footer__inner { padding-top:40px; padding-bottom:20px; display:flex; gap:20px; justify-content:space-between; align-items:center; }
.footer__note { font-size:.95rem; line-height:1.55; color:var(--sub); margin:0; max-width:56ch; }
.footer__links { display:flex; gap:24px; flex:none; }
.footer__links a { font-size:.95rem; font-weight:500; color:var(--ink); text-decoration:none; }
.footer__copy { padding-bottom:40px; font-size:.82rem; color:var(--sub); opacity:.7; }

/* Bannière de consentement aux témoins */
.consent {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:100;
  max-width:760px; margin:0 auto;
  background:var(--ink); color:var(--bg);
  border-radius:14px; padding:18px 20px;
  box-shadow:0 10px 40px rgba(0,0,0,.28);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
}
.consent[hidden] { display:none; }
.consent__text { flex:1; min-width:240px; margin:0; font-size:.9rem; line-height:1.5; opacity:.9; }
.consent__actions { display:flex; gap:10px; flex-wrap:wrap; }
.consent__btn {
  cursor:pointer; font-family:inherit; font-size:.9rem; font-weight:600;
  padding:10px 20px; border-radius:999px; border:none; transition:opacity .2s, background .2s;
}
.consent__btn--accept { background:var(--accent); color:var(--accent-ink); }
.consent__btn--accept:hover { opacity:.88; }
.consent__btn--refuse { background:transparent; border:1px solid var(--on-dark-line); color:var(--bg); }
.consent__btn--refuse:hover { background:var(--on-dark-soft); }

/* ---------- 4) RESPONSIVE ---------- */
@media (max-width:860px) {
  .container { padding-left:32px; padding-right:32px; }
  .section { padding-top:60px; padding-bottom:60px; }
  .nav { display:none; }
  .nav__toggle { display:flex; align-items:center; justify-content:center; }
  .header__right { gap:14px; }
  .mobile-menu { padding-left:32px; padding-right:32px; }

  .hero { flex-direction:column; gap:44px; padding-top:48px; padding-bottom:60px; }
  .hero__portrait { display:none; } /* animation masquée sur mobile */

  .formats { grid-template-columns:1fr; }
  .whys { grid-template-columns:1fr; }
  .terrains { grid-template-columns:1fr; }
  .stepper { flex-direction:column; gap:20px; }
  .stepper__rail { flex:0 0 auto; }
  .parcours__intro { flex-direction:column; gap:44px; }
  .apropos__top { flex-direction:column; gap:32px; }
  .apropos__photo { flex:0 0 auto; width:100%; max-width:360px; }
  .parcours__intro .section__title { max-width:none; }
  .reals { grid-template-columns:1fr 1fr; }
  .cta { padding:48px 40px; }
  .footer__inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width:600px) {
  .container { padding-left:20px; padding-right:20px; }
  .mobile-menu { padding-left:20px; padding-right:20px; }
  .hero__portrait img { height:340px; }
  .reals { grid-template-columns:1fr; }
  .cta { padding:36px 26px; }
}