/* FUNBODYFIT — shared styles
   Police de marque : Coalition (TracerTong), licence commerciale fournie
   par le client, self-hosted en woff2 dans /fonts.
   Coalition est une police display très texturée : elle est réservée au
   logo et au grand titre du hero (--font-hero). Bebas Neue reste la
   police des titres de section (--font-display), plus lisible en usage
   courant — même esprit condensé/costaud, meilleure lisibilité au quotidien. */

@font-face{
  font-family:'Coalition';
  src:url('fonts/Coalition.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-hero:'Coalition', 'Bebas Neue', sans-serif;
  --font-display:'Bebas Neue', sans-serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --forest:#1F3A2E;
  --pine:#122419;
  --moss:#5B8A66;
  --moss-light:#8FB89A;
  --chalk:#F4F1E6;
  --chalk-dim:#E7E2D2;
  --concrete:#86807A;
  --ember:#E85C2B;
  --ember-dark:#C4471E;
  --ink:#151F17;
  --radius:2px;
  --maxw:1180px;

  /* theme-controlled tokens (overridden per activity below) */
  --accent:var(--ember);
  --accent-dark:var(--ember-dark);
  --dark-bg:var(--pine);
}

/* Plein air = nature forward, vert dominant */
body.theme-outdoor{
  --accent:var(--moss);
  --accent-dark:#3F6B4A;
  --dark-bg:var(--forest);
}

/* Salle Hyrox = urbain / brut, orange dominant sur fond quasi noir */
body.theme-salle{
  --accent:var(--ember);
  --accent-dark:var(--ember-dark);
  --dark-bg:var(--ink);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--chalk);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
h1,h2,h3{font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:0.01em; line-height:0.92;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow .borne{
  width:26px; height:26px;
  border:1.5px solid var(--accent);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  flex:none;
}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ===== TRAIL LINE (signature element) ===== */
.trail-svg{position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1;}
#trailPath{fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:10 9; opacity:0.5;}

/* ===== HEADER ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
}
.logo{font-family:var(--font-hero); font-size:28px; letter-spacing:0.03em; color:var(--chalk);}
.logo span{color:var(--ember);}
.logo.dark{color:var(--ink);}
.logo.dark span{color:var(--ember-dark);}
nav{display:flex; align-items:center; gap:26px;}
nav a{font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--chalk-dim); transition:color 0.2s;}
nav a.active, nav a:hover{color:var(--accent);}
nav.on-light a{color:var(--concrete);}
nav.on-light a.active, nav.on-light a:hover{color:var(--accent-dark);}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 20px; border-radius:var(--radius);
  border:1.5px solid var(--accent); color:var(--accent);
  background:transparent; transition:all 0.2s ease; cursor:pointer;
}
.btn:hover{background:var(--accent); color:var(--chalk);}
.btn-solid{background:var(--accent); color:var(--chalk); border-color:var(--accent);}
.btn-solid:hover{background:var(--accent-dark); border-color:var(--accent-dark);}
.btn-light{border-color:var(--chalk); color:var(--chalk);}
.btn-light:hover{background:var(--chalk); color:var(--ink);}
header .btn{padding:10px 18px; display:none;}
@media(min-width:720px){ header .btn{display:inline-flex;} }

/* ===== HERO (generic, reused per page) ===== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--chalk); padding:140px 0 70px; overflow:hidden;
}
.hero-outdoor{
  background:
    linear-gradient(180deg, rgba(18,36,25,0.35) 0%, rgba(18,36,25,0.55) 55%, var(--forest) 100%),
    repeating-linear-gradient(115deg, #1c3527 0 2px, #203c2b 2px 42px);
}
.hero-salle{
  background:
    linear-gradient(180deg, rgba(10,10,8,0.35) 0%, rgba(10,10,8,0.6) 55%, var(--ink) 100%),
    repeating-linear-gradient(115deg, #1c1815 0 2px, #221c17 2px 42px);
}
.hero-hub{
  background:
    linear-gradient(180deg, rgba(15,20,16,0.4) 0%, rgba(15,20,16,0.6) 55%, var(--pine) 100%),
    repeating-linear-gradient(115deg, #182620 0 2px, #1d2c25 2px 42px);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(232,92,43,0.14), transparent 40%),
    radial-gradient(circle at 82% 15%, rgba(91,138,102,0.22), transparent 45%);
}
.hero-inner{position:relative; z-index:2;}
.hero h1{font-family:var(--font-hero); font-size:clamp(52px, 9vw, 130px); max-width:16ch; letter-spacing:0.005em;}
.hero h1 em{font-style:normal; color:var(--accent);}
.mword{display:inline-block;}
.hero-sub{max-width:520px; font-size:18px; color:var(--chalk-dim); margin:22px 0 38px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:56px;}
.hero-stats{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid rgba(244,241,230,0.25); padding-top:26px;}
.stat{padding-right:38px; margin-right:38px; border-right:1px solid rgba(244,241,230,0.2);}
.stat:last-child{border-right:none;}
.stat .num{font-family:var(--font-display); font-size:38px; color:var(--accent);}
.stat .lbl{font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--chalk-dim); margin-top:4px;}

/* ===== SECTIONS ===== */
section{position:relative; z-index:2; padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(34px, 5vw, 60px); color:var(--forest);}
.section-head p{color:var(--concrete); font-size:16.5px; margin-top:18px; max-width:52ch;}
.light-on-dark .section-head h2{color:var(--chalk);}
.light-on-dark .section-head p{color:var(--chalk-dim);}
.bg-light{background:var(--chalk);}
.bg-dark{background:var(--dark-bg); color:var(--chalk);}

/* ===== HUB PILLARS ===== */
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ink); perspective:1200px;}
@media(max-width:820px){ .pillars{grid-template-columns:1fr;} }
.pillar{
  position:relative; padding:70px 44px; min-height:520px;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--chalk); overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
}
.pillar-outdoor{background:linear-gradient(160deg, var(--forest), #0f1f16);}
.pillar-salle{background:linear-gradient(160deg, #1c1814, var(--ink));}
.pillar::before{content:""; position:absolute; inset:0; opacity:0.5;}
.pillar-outdoor::before{background:repeating-linear-gradient(115deg, transparent 0 40px, rgba(91,138,102,0.12) 40px 42px);}
.pillar-salle::before{background:repeating-linear-gradient(115deg, transparent 0 40px, rgba(232,92,43,0.10) 40px 42px);}
.pillar .eyebrow{position:relative; z-index:2;}
.pillar h2{position:relative; z-index:2; font-family:var(--font-hero); font-size:clamp(38px,5vw,64px); margin-bottom:14px;}
.pillar p{position:relative; z-index:2; color:var(--chalk-dim); max-width:38ch; margin-bottom:28px;}
.pillar .btn{position:relative; z-index:2; align-self:flex-start;}
.pillar-outdoor .btn{border-color:var(--moss); color:var(--moss-light);}
.pillar-outdoor .btn:hover{background:var(--moss); color:var(--ink);}
.pillar-salle .btn{border-color:var(--ember); color:var(--ember);}
.pillar-salle .btn:hover{background:var(--ember); color:var(--chalk);}

/* ===== LIST / CARD PATTERNS (reused) ===== */
.concept-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;}
@media(max-width:860px){ .concept-grid{grid-template-columns:1fr;} }
.concept-card{background:var(--dark-bg); color:var(--chalk); padding:34px 30px; border-radius:var(--radius);}
.concept-card h3{font-size:26px; margin-bottom:10px; color:var(--chalk);}
.concept-card p{color:var(--chalk-dim); font-size:15px;}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.tag{font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; padding:7px 12px; border:1px solid rgba(244,241,230,0.35); border-radius:20px; color:var(--chalk-dim);}
.concept-list{list-style:none;}
.concept-list li{display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--chalk-dim);}
.concept-list li:first-child{padding-top:0;}
.concept-list .kmark{font-family:var(--font-mono); font-size:13px; color:var(--accent-dark); flex:none; width:52px; padding-top:3px;}
.concept-list h4{font-family:var(--font-body); font-weight:700; font-size:16px; margin-bottom:4px;}
.concept-list p{font-size:14.5px; color:var(--concrete);}

.prog-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--chalk-dim); border:1px solid var(--chalk-dim);}
@media(max-width:960px){ .prog-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .prog-grid{grid-template-columns:1fr;} }
.prog-card{background:var(--chalk); padding:32px 26px; transition:background 0.25s;}
.prog-card:hover{background:#fff;}
.prog-card .borne{width:30px; height:30px; border-radius:50%; border:1.5px solid var(--accent-dark); color:var(--accent-dark); font-family:var(--font-mono); font-size:12px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.prog-card h3{font-size:19px; font-family:var(--font-body); font-weight:800; text-transform:none; margin-bottom:8px;}
.prog-card p{font-size:14px; color:var(--concrete); margin-bottom:14px;}
.prog-card .meta{font-family:var(--font-mono); font-size:11.5px; color:var(--accent-dark); letter-spacing:0.04em;}

.tarif-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:860px){ .tarif-grid{grid-template-columns:1fr;} }
.tarif-card{background:#fff; border:1px solid var(--chalk-dim); border-radius:var(--radius); padding:34px 28px; display:flex; flex-direction:column;}
.tarif-card.featured{background:var(--dark-bg); color:var(--chalk); border-color:var(--dark-bg);}
.tarif-card .plan-name{font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:14px;}
.tarif-card.featured .plan-name{color:var(--accent);}
.tarif-card .price{font-family:var(--font-display); font-size:48px; margin-bottom:6px;}
.tarif-card .price small{font-family:var(--font-mono); font-size:13px; text-transform:none; opacity:0.6;}
.tarif-card .desc{font-size:14px; color:var(--concrete); margin-bottom:24px;}
.tarif-card.featured .desc{color:var(--chalk-dim);}
.tarif-card ul{list-style:none; margin-bottom:28px; flex:1;}
.tarif-card li{font-size:14px; padding:10px 0; border-top:1px solid var(--chalk-dim); display:flex; align-items:center; gap:10px;}
.tarif-card.featured li{border-top:1px solid rgba(244,241,230,0.15); color:var(--chalk-dim);}
.tarif-card li::before{content:"—"; color:var(--accent); flex:none;}

.coach-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media(max-width:820px){ .coach-grid{grid-template-columns:1fr;} }
.coach-photo{aspect-ratio:3/4; background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(0,0,0,0.2)); border-radius:var(--radius); margin-bottom:18px; position:relative; overflow:hidden;}
.coach-photo::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(232,92,43,0.06) 0 2px, transparent 2px 18px);}
.coach-card h3{font-family:var(--font-body); font-weight:800; text-transform:none; font-size:19px;}
.coach-card .role{font-family:var(--font-mono); font-size:11.5px; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; margin:6px 0 10px;}
.coach-card p{font-size:14px; color:var(--chalk-dim);}

.lieu-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media(max-width:860px){ .lieu-grid{grid-template-columns:1fr;} }
.map-frame{
  aspect-ratio:4/3; border-radius:var(--radius); border:1px solid rgba(244,241,230,0.18);
  background:radial-gradient(circle at 30% 40%, rgba(91,138,102,0.3), transparent 55%), repeating-linear-gradient(60deg, #17281c 0 3px, #1c3225 3px 30px);
  position:relative;
}
.map-frame .pin{position:absolute; top:44%; left:38%; width:16px; height:16px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(232,92,43,0.22);}
.lieu-list{list-style:none; margin:26px 0 32px;}
.lieu-list li{display:flex; gap:14px; padding:12px 0; font-size:15px; color:var(--chalk-dim); border-top:1px solid rgba(244,241,230,0.12);}
.lieu-list li:first-child{border-top:none; padding-top:0;}
.lieu-list b{color:var(--chalk); font-weight:700; min-width:110px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase;}
/* Variante sur fond clair (ex: section contact du hub) — corrige le contraste */
.lieu-list.on-light li{color:var(--ink); border-top:1px solid var(--chalk-dim);}
.lieu-list.on-light li a{color:var(--forest); text-decoration:underline;}
.lieu-list.on-light b{color:var(--forest);}

.sportigo-box{margin-top:32px; padding:22px 24px; background:rgba(244,241,230,0.06); border:1px solid rgba(244,241,230,0.18); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.sportigo-box p{font-size:13.5px; color:var(--chalk-dim); max-width:34ch;}
.soon-badge{font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); border:1px dashed var(--accent); padding:5px 10px; border-radius:20px;}

.cta-band{background:var(--accent); color:var(--chalk); padding:70px 0; text-align:center;}
.cta-band h2{font-size:clamp(32px,5vw,54px); margin-bottom:20px;}
.cta-band-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.cta-band .btn-light{border-color:var(--chalk); color:var(--chalk);}
.cta-band .btn-light:hover{background:var(--chalk); color:var(--accent-dark);}
.cta-band .btn-outline{border:1.5px solid var(--chalk); color:var(--chalk);}
.cta-band .btn-outline:hover{background:rgba(244,241,230,0.15);}

/* ===== FOOTER ===== */
footer{background:var(--ink); color:var(--chalk-dim); padding:56px 0 28px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:44px;}
@media(max-width:720px){ .foot-grid{grid-template-columns:1fr; gap:30px;} }
.foot-logo{font-family:var(--font-hero); font-size:28px; color:var(--chalk); margin-bottom:14px;}
.foot-logo span{color:var(--ember);}
footer h4{font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--moss-light); margin-bottom:16px;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:14.5px;}
footer li a:hover{color:var(--ember);}
.foot-bottom{border-top:1px solid rgba(244,241,230,0.1); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--concrete); font-family:var(--font-mono);}

/* Le contenu est visible par défaut : l'animation d'apparition est un
   bonus ajouté par script.js si GSAP charge correctement, jamais une
   condition d'affichage. Si le JS ne se charge pas, tout reste visible. */
.reveal{opacity:1;}

/* ===== TOOLS HUB CARDS ===== */
.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--chalk-dim); border:1px solid var(--chalk-dim);}
@media(max-width:960px){ .tools-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .tools-grid{grid-template-columns:1fr;} }
.tool-card{background:var(--chalk); padding:34px 28px; transition:background 0.2s; display:flex; flex-direction:column;}
.tool-card:hover{background:#fff;}
.tool-card .borne{width:32px; height:32px; border-radius:50%; border:1.5px solid var(--accent-dark); color:var(--accent-dark); font-family:var(--font-mono); font-size:12px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.tool-card h3{font-family:var(--font-body); font-weight:800; text-transform:none; font-size:19px; margin-bottom:8px;}
.tool-card p{font-size:14px; color:var(--concrete); margin-bottom:20px; flex:1;}

/* ===== CALCULATORS ===== */
.calc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:820px){ .calc-grid{grid-template-columns:1fr;} }
.calc-card{background:#fff; border:1px solid var(--chalk-dim); border-radius:var(--radius); padding:30px 28px;}
.calc-card h3{font-family:var(--font-body); font-weight:800; text-transform:none; font-size:19px; margin-bottom:6px;}
.calc-card .calc-note{font-size:13px; color:var(--concrete); margin-bottom:20px;}
.calc-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px;}
.calc-field label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--concrete); margin-bottom:6px;}
.calc-field input, .calc-field select{
  width:100%; padding:11px 12px; border:1px solid var(--chalk-dim); border-radius:var(--radius);
  font-family:var(--font-body); font-size:15px; background:var(--chalk);
}
.calc-field input:focus, .calc-field select:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.calc-card .btn{width:100%; justify-content:center; margin-top:6px;}
.calc-result{
  margin-top:18px; padding:16px 18px; border-radius:var(--radius);
  background:var(--chalk); border:1px dashed var(--chalk-dim);
  font-family:var(--font-mono); font-size:14px; min-height:20px; display:none;
}
.calc-result.show{display:block;}
.calc-result .big{font-family:var(--font-display); font-size:30px; color:var(--accent-dark); display:block; margin-bottom:4px;}
.calc-disclaimer{font-size:12px; color:var(--concrete); margin-top:40px; max-width:70ch;}

/* ===== EXERCISE / MACHINE GUIDE ===== */
.exo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media(max-width:820px){ .exo-grid{grid-template-columns:1fr;} }
.exo-card{background:rgba(244,241,230,0.05); border:1px solid rgba(244,241,230,0.15); border-radius:var(--radius); padding:26px;}
.exo-card h3{font-family:var(--font-body); font-weight:800; text-transform:none; font-size:18px; color:var(--chalk); margin-bottom:4px;}
.exo-card .muscles{font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;}
.exo-card p{font-size:14px; color:var(--chalk-dim); margin-bottom:10px;}
.exo-card .example{font-size:13px; color:var(--moss-light); border-top:1px solid rgba(244,241,230,0.12); padding-top:10px; margin-top:10px;}

/* ===== PROGRAMS ===== */
.prog-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.prog-tab{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase;
  padding:10px 18px; border:1.5px solid var(--chalk-dim); border-radius:20px; color:var(--concrete); cursor:pointer;
}
.prog-tab.active{border-color:var(--accent); color:var(--accent-dark); background:rgba(232,92,43,0.08);}
.program-block{display:none;}
.program-block.active{display:block;}
.program-day{background:#fff; border:1px solid var(--chalk-dim); border-radius:var(--radius); padding:24px 26px; margin-bottom:16px;}
.program-day h4{font-family:var(--font-body); font-weight:800; text-transform:none; font-size:16px; margin-bottom:10px; color:var(--forest);}
.program-day ul{list-style:none;}
.program-day li{font-size:14.5px; padding:7px 0; border-top:1px solid var(--chalk-dim); color:var(--ink);}
.program-day li:first-child{border-top:none;}

/* ===== SEASONAL NUTRITION ===== */
.season-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.season-grid{display:none; grid-template-columns:repeat(3,1fr); gap:20px;}
.season-grid.active{display:grid;}
@media(max-width:820px){ .season-grid.active{grid-template-columns:1fr;} }
.season-card{background:#fff; border:1px solid var(--chalk-dim); border-radius:var(--radius); padding:24px;}
.season-card h4{font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:14px;}
.season-card ul{list-style:none;}
.season-card li{font-size:14px; padding:6px 0; color:var(--ink);}


/* ============================================================
   MOBILE — navigation & mise en page
   ============================================================ */

/* Bouton burger (masqué sur desktop) */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  background:transparent; border:none; cursor:pointer;
  position:relative; z-index:80;
}
.nav-toggle span{
  display:block; width:100%; height:2px; border-radius:2px;
  background:var(--chalk); transition:transform 0.3s ease, opacity 0.2s ease;
}
nav.on-light ~ .nav-toggle span, header:has(nav.on-light) .nav-toggle span{background:var(--ink);}
body.nav-open .nav-toggle span{background:var(--chalk) !important;}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:719px){
  .nav-toggle{display:flex;}

  /* La nav devient un panneau plein écran */
  header nav{
    position:fixed; inset:0; z-index:70;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:6px; padding:100px 32px 60px;
    background:
      radial-gradient(circle at 80% 15%, rgba(232,92,43,0.16), transparent 45%),
      linear-gradient(180deg, #16251d 0%, var(--pine, #16251d) 100%);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  body.nav-open header nav{opacity:1; visibility:visible; transform:translateY(0);}

  header nav a, header nav.on-light a{
    font-family:var(--font-display); font-size:38px; letter-spacing:0.02em;
    text-transform:uppercase; color:var(--chalk);
    padding:8px 0; opacity:0; transform:translateY(14px);
    transition:opacity 0.35s ease, transform 0.35s ease, color 0.2s;
  }
  body.nav-open header nav a{opacity:1; transform:translateY(0);}
  body.nav-open header nav a:nth-child(1){transition-delay:0.08s;}
  body.nav-open header nav a:nth-child(2){transition-delay:0.14s;}
  body.nav-open header nav a:nth-child(3){transition-delay:0.20s;}
  body.nav-open header nav a:nth-child(4){transition-delay:0.26s;}
  header nav a.active, header nav.on-light a.active{color:var(--ember);}

  /* Logo lisible sur le panneau sombre quand le menu est ouvert */
  body.nav-open .logo, body.nav-open .logo.dark{color:var(--chalk); position:relative; z-index:80;}
  body.nav-open .logo span, body.nav-open .logo.dark span{color:var(--ember);}
  body.nav-open{overflow:hidden;}
}

/* Ajustements généraux petits écrans */
@media(max-width:640px){
  .wrap{padding:0 20px;}
  header{padding:14px 20px;}
  .logo{font-size:22px;}

  .hero{padding:110px 0 44px; min-height:88svh;}
  .hero h1{font-size:clamp(38px, 11.5vw, 130px);}
  .hero-ctas{gap:12px; margin-bottom:38px;}
  .hero-ctas .btn{flex:1 1 100%; justify-content:center; text-align:center;}
  .hero-stats{padding-top:20px;}
  .stat{padding-right:20px; margin-right:20px;}
  .stat .num{font-size:28px;}

  section{padding:60px 0;}
  .section-head h2{font-size:clamp(28px, 8vw, 60px);}

  .pillar{min-height:380px; padding:44px 22px;}
  .cta-band{padding:52px 0;}

  .prog-card, .tarif-card, .tool-card, .calc-card{padding:24px 20px;}
  .exo-card{padding:20px 16px;}
  .prog-tab{flex:1 1 calc(50% - 10px); text-align:center;}

  .map-frame{aspect-ratio:1/1;}
  .trail-svg{display:none;} /* le tracé décoratif gêne plus qu'il n'apporte sur petit écran */
}

/* Le tilt 3D n'a de sens qu'avec une souris */
@media(hover:none){
  .pillars{perspective:none;}
}