/* ================================================================
   PFAS : Scandale ou Surmédia — Feuille de style principale
   ESIEE Paris · Les Totally Spies · 2024–2025
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
/* Palette extraite de la photo de couverture :
   ciel industriel sombre, eau trouble, brume atmosphérique, berges vertes */
:root {
  --gold:        #C9841A;   /* ambre/or — texte couverture */
  --gold-light:  #E8A520;
  --gold-dark:   #9A6010;
  --sky-deep:    #080E18;   /* ciel nuit industriel */
  --sky-mid:     #10202E;   /* haze industrielle */
  --water:       #132030;   /* eau trouble */
  --water-light: #1C3545;   /* reflet */
  --haze:        rgba(80,130,160,.08); /* brume atmosphérique */
  --vegetation:  #1E3020;   /* berges vertes sombres */
  --bg:          #080E18;
  --bg2:         #0E1A26;
  --bg3:         #162030;
  --glass:       rgba(255,255,255,0.05);
  --glass-b:     rgba(255,255,255,0.08);
  --glass-brd:   rgba(255,255,255,0.10);
  --txt:         #EEF0F5;
  --txt2:        #8A9AAE;
  --txt3:        #4A5A6A;
  --green:       #2ECC71;
  --red:         #E74C3C;
  --blue:        #3498DB;
  --purple:      #9B59B6;
  --teal:        #1ABC9C;
  --orange:      #E67E22;
  --yellow:      #F1C40F;
  --r:           14px;
  --r-sm:        8px;
  --r-lg:        22px;
  --sh:          0 8px 32px rgba(0,0,0,.55);
  --sh-gold:     0 4px 20px rgba(201,132,26,.35);
  --tr:          .35s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none;transition:color var(--tr)}
a:hover{color:var(--gold-light)}
img{max-width:100%;height:auto}
ul{list-style:none}
button{cursor:pointer;border:none;background:none}

/* Scrollbar invisible */
::-webkit-scrollbar{width:0;height:0;display:none}
html{scrollbar-width:none}
body{-ms-overflow-style:none}

/* ── Couches parallaxe globales ─────────────────────────────────── */
.px-layer{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.px-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
}
/* Blob 1 — or chaud, haut gauche */
.px-b1{
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(201,132,26,.13) 0%,transparent 65%);
  top:-200px;left:-200px;
}
/* Blob 2 — vert sombre, milieu droit */
.px-b2{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(20,80,50,.12) 0%,transparent 65%);
  top:40vh;right:-150px;
}
/* Blob 3 — or pâle, bas gauche */
.px-b3{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(201,132,26,.08) 0%,transparent 65%);
  top:110vh;left:10%;
}
/* Blob 4 — bleu-nuit, bas droit */
.px-b4{
  width:650px;height:650px;
  background:radial-gradient(circle,rgba(30,60,120,.09) 0%,transparent 65%);
  top:190vh;right:5%;
}

/* ── Particle canvas ────────────────────────────────────────────── */
#particles-canvas{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
}

/* ── Loader ─────────────────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s,visibility .6s;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}

.loader-inner{text-align:center}

/* Molecule spinner */
.loader-molecule{
  position:relative;width:80px;height:80px;margin:0 auto 20px;
}
.mol-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:14px;height:14px;
  background:var(--gold);border-radius:50%;
  box-shadow:0 0 12px var(--gold);
}
.mol-orbit{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(201,132,26,.3);
  animation:spin 2s linear infinite;
}
.mol-o2{animation-duration:3s;transform:rotateX(60deg)}
.mol-o3{animation-duration:2.5s;transform:rotateY(60deg)}
.mol-atom{
  position:absolute;top:-4px;left:50%;
  transform:translateX(-50%);
  width:8px;height:8px;
  background:var(--gold);border-radius:50%;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loader-title{
  font-family:'Montserrat',sans-serif;
  font-size:2.5rem;font-weight:900;
  color:var(--gold);letter-spacing:.15em;
}
.loader-sub{color:var(--txt2);font-size:.9rem;margin-bottom:20px}
.loader-bar-wrap{
  width:180px;height:3px;background:var(--bg3);
  border-radius:3px;margin:0 auto;overflow:hidden;
}
.loader-bar-fill{
  height:100%;width:0%;background:var(--gold);
  border-radius:3px;
  animation:loadFill 1.8s ease forwards;
}
@keyframes loadFill{to{width:100%}}

/* ── Navbar ─────────────────────────────────────────────────────── */
#navbar{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  background:rgba(12,12,16,.0);
  backdrop-filter:blur(0px);
  transition:background var(--tr),backdrop-filter var(--tr),
             box-shadow var(--tr),padding var(--tr);
  padding:18px 0;
}
#navbar.scrolled{
  background:rgba(12,12,16,.88);
  backdrop-filter:blur(18px);
  box-shadow:0 2px 20px rgba(0,0,0,.4);
  padding:10px 0;
}

.nav-wrap{
  max-width:1200px;margin:0 auto;
  padding:0 24px;
  display:flex;align-items:center;gap:32px;
}
.nav-logo{
  display:flex;align-items:center;gap:8px;
  font-family:'Montserrat',sans-serif;
  flex-shrink:0;
}
.nl-pfas{
  font-size:1.25rem;font-weight:900;
  color:var(--gold);letter-spacing:.08em;
}
.nl-sep{color:var(--txt3);font-weight:300;font-size:1rem}
.nl-sub{font-size:.8rem;color:var(--txt2);font-weight:500;letter-spacing:.06em}

.nav-links{
  display:flex;align-items:center;gap:4px;
  margin-left:auto;
}
.nl{
  padding:7px 13px;border-radius:var(--r-sm);
  font-size:.87rem;font-weight:500;
  color:var(--txt2);
  transition:color var(--tr),background var(--tr);
  position:relative;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.nl .fas,.nl .far,.nl .fab{ font-size:.8rem; }
.nl:hover,.nl.active{color:var(--txt);background:var(--glass)}

/* Dropdown */
.has-sub{position:relative}
.subnav{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:rgba(18,18,26,.96);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-brd);
  border-radius:var(--r);
  padding:8px;
  min-width:180px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--tr),transform var(--tr),visibility var(--tr);
}
.has-sub:hover .subnav{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.subnav li a{
  display:block;padding:8px 14px;
  border-radius:var(--r-sm);
  font-size:.85rem;color:var(--txt2);
  transition:color var(--tr),background var(--tr);
}
.subnav li a:hover{color:var(--gold);background:var(--glass)}

/* Burger — caché sur desktop */
.nav-burger{
  display:none;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:5px;width:44px;height:44px;
  flex-shrink:0;
}
.nav-burger span{
  display:block;width:20px;height:2px;
  background:#E8ECF0;
  border-radius:2px;transition:transform .3s,opacity .3s,background .3s;
}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--gold)}
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--gold)}

/* ── Container ──────────────────────────────────────────────────── */
.container{
  max-width:1160px;margin:0 auto;padding:0 24px;
}

/* ── Sections ───────────────────────────────────────────────────── */
.section{
  position:relative;z-index:1;
  padding:100px 0;
}
.section-alt{background:var(--bg2)}

/* Section header */
.sec-header{text-align:center;margin-bottom:64px}
.sec-tag{
  display:inline-block;
  padding:5px 16px;border-radius:30px;
  background:rgba(201,132,26,.18);
  color:var(--gold);
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:16px;
}
.sec-tag-green{background:rgba(46,204,113,.18);color:var(--green)}
.sec-tag-red{background:rgba(231,76,60,.18);color:var(--red)}
.sec-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:800;line-height:1.2;
  color:var(--txt);margin-bottom:20px;
  text-align:center;
}
.sec-line{
  width:60px;height:3px;background:var(--gold);
  border-radius:3px;margin:0 auto 20px;
}
.sec-line-green{background:var(--green)}
.sec-line-red{background:var(--red)}
.sec-desc{color:var(--txt2);font-size:1rem;max-width:640px;margin:0 auto}

/* ── Glass Card ─────────────────────────────────────────────────── */
.glass-card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r);
  padding:28px;
  backdrop-filter:blur(12px);
  transition:transform var(--tr),background var(--tr),box-shadow var(--tr),border-color var(--tr);
}
.glass-card:hover{
  background:var(--glass-b);
  transform:translateY(-4px);
  box-shadow:var(--sh);
  border-color:rgba(201,132,26,.3);
}

/* ── Reveal Animations ──────────────────────────────────────────── */
/* Fallback CSS : si JS échoue, tout devient visible après 2.5s */
@keyframes cssReveal{to{opacity:1;transform:translateY(0)}}

.reveal-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease calc(var(--d,0s)),
             transform .7s ease calc(var(--d,0s));
  /* Filet de sécurité pur CSS */
  animation:cssReveal .6s ease calc(2.5s + var(--d,0s)) both;
}
.reveal-up.visible{
  opacity:1;
  transform:translateY(0);
  animation:none; /* JS a pris le relais, annuler le fallback CSS */
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow:hidden;
  background:#050A12; /* base sombre — tout le reste est dans .hero-bg-img */
}

/* ── Image de fond avec Ken Burns ── */
.hero-bg-wrap{
  position:absolute;
  top:-30%;bottom:-30%;left:-5%;right:-5%;
  z-index:0;
}
.hero-bg-img{
  width:100%;height:100%;
  /* Gradient visible + photo quand hero-bg.jpg est présent */
  background:
    url('hero-bg.jpg') center 40% / cover no-repeat,
    radial-gradient(ellipse 80% 60% at 30% 60%, rgba(18,40,28,.95) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 75% 30%, rgba(201,132,26,.18) 0%, transparent 60%),
    linear-gradient(160deg, #06100e 0%, #0d1a2a 40%, #1a0a06 70%, #050A12 100%);
  transform-origin:center center;
  animation:kenBurns 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenBurns{
  0%  { transform:scale(1.00) translate(  0px,  0px); }
  25% { transform:scale(1.04) translate( -8px,  5px); }
  50% { transform:scale(1.07) translate(  6px, -4px); }
  75% { transform:scale(1.05) translate( -5px,  7px); }
  100%{ transform:scale(1.10) translate(  3px, -6px); }
}

/* Overlay assombrit la photo pour lisibilité du texte */
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(5,10,20,.55) 0%,
      rgba(8,15,25,.30) 40%,
      rgba(5,10,20,.70) 100%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 35%, rgba(0,0,0,.65) 100%);
  z-index:1;
}

/* ── Brume atmosphérique ── */
.hero-fog{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;overflow:hidden;
}
.fog-layer{
  position:absolute;
  width:220%;height:100%;
  left:-60%;
}
.fog-1{
  background:radial-gradient(ellipse 70% 35% at 40% 55%,
    rgba(80,130,160,.12) 0%, transparent 70%);
  animation:fogDrift1 18s ease-in-out infinite;
}
.fog-2{
  background:radial-gradient(ellipse 60% 25% at 65% 65%,
    rgba(60,100,80,.08) 0%, transparent 65%);
  animation:fogDrift1 24s ease-in-out infinite reverse;
  top:15%;
}
.fog-3{
  background:radial-gradient(ellipse 80% 20% at 50% 80%,
    rgba(40,80,100,.10) 0%, transparent 60%);
  animation:fogDrift2 14s ease-in-out infinite;
  top:40%;
}
@keyframes fogDrift1{
  0%,100%{transform:translateX(-8%) scaleX(1.0)}
  50%{transform:translateX(4%) scaleX(.96)}
}
@keyframes fogDrift2{
  0%,100%{transform:translateX(5%) scaleY(1.0);opacity:.8}
  50%{transform:translateX(-6%) scaleY(1.1);opacity:1}
}

/* ── Reflet d'eau en bas ── */
.hero-water{
  position:absolute;bottom:0;left:0;right:0;
  height:220px;z-index:1;
  background:linear-gradient(to top,
    rgba(10,30,45,.7) 0%,
    rgba(15,35,55,.3) 40%,
    transparent 100%);
  animation:waterShimmer 6s ease-in-out infinite;
}
.hero-water::after{
  content:'';position:absolute;
  left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(201,132,26,.15) 30%,
    rgba(201,132,26,.30) 50%,
    rgba(201,132,26,.15) 70%,
    transparent 100%);
  animation:waterLine 4s ease-in-out infinite;
}
@keyframes waterShimmer{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
@keyframes waterLine{
  0%,100%{opacity:.4;transform:scaleX(.8)}
  50%{opacity:1;transform:scaleX(1)}
}

/* ── Contenu hero ── */
.hero-body{
  position:relative;z-index:3;
  text-align:center;
  padding:110px 24px 100px;
  max-width:860px;
  width:100%;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 18px;border-radius:30px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:var(--txt2);font-size:.82rem;font-weight:500;
  letter-spacing:.05em;margin-bottom:28px;
  backdrop-filter:blur(8px);
}

/* ── Titre principal — calqué sur la couverture ── */
.hero-title{
  display:flex;flex-direction:column;
  align-items:center;
  line-height:1;
  margin-bottom:24px;
  gap:0;
}

/* "PFAS" en écriture manuscrite — comme sur la couverture */
.ht-script{
  font-family:'Dancing Script',cursive;
  font-size:clamp(3.2rem,9vw,5.5rem);
  font-weight:700;
  color:#fff;
  letter-spacing:.04em;
  transform:rotate(-3deg) translateX(-5%);
  display:block;
  margin-bottom:-8px;
  text-shadow:
    0 0 40px rgba(255,255,255,.2),
    0 2px 8px rgba(0,0,0,.8);
  filter:drop-shadow(0 0 20px rgba(255,255,255,.15));
}

/* "SCANDALE" / "SURMÉDIA" en condensé lourd — Bebas Neue */
.ht-block{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(5rem,16vw,10rem);
  color:var(--gold);
  letter-spacing:.06em;
  line-height:.88;
  display:block;
  text-shadow:
    0 0 80px rgba(201,132,26,.5),
    0 0 160px rgba(201,132,26,.2),
    0 4px 12px rgba(0,0,0,.9);
  animation:goldPulse 4s ease-in-out infinite;
}
@keyframes goldPulse{
  0%,100%{text-shadow:0 0 80px rgba(201,132,26,.5),0 0 160px rgba(201,132,26,.2),0 4px 12px rgba(0,0,0,.9)}
  50%{text-shadow:0 0 100px rgba(201,132,26,.7),0 0 200px rgba(201,132,26,.3),0 4px 12px rgba(0,0,0,.9)}
}

/* "— ou —" en italique élégant */
.ht-ou{
  font-family:'Playfair Display',serif;
  font-size:clamp(1rem,3vw,1.6rem);
  font-weight:400;font-style:italic;
  color:rgba(255,255,255,.55);
  letter-spacing:.15em;
  display:block;
  margin:6px 0;
}
.hero-question{
  font-size:clamp(1rem,2.5vw,1.3rem);
  color:var(--txt2);
  max-width:640px;margin:0 auto 16px;
  font-style:italic;
}
.hero-desc{
  font-size:clamp(.9rem,2vw,1.05rem);
  color:rgba(200,210,225,.72);
  max-width:580px;margin:0 auto 40px;
}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.btn-primary{
  padding:14px 28px;border-radius:var(--r-sm);
  background:var(--gold);color:#fff;
  font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;gap:8px;
  transition:background var(--tr),transform var(--tr),box-shadow var(--tr);
  box-shadow:var(--sh-gold);
}
.btn-primary:hover{
  background:var(--gold-light);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(201,132,26,.45);
}
.btn-ghost{
  padding:13px 28px;border-radius:var(--r-sm);
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:var(--txt);
  font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color var(--tr),background var(--tr),transform var(--tr);
}
.btn-ghost:hover{
  border-color:var(--gold);background:rgba(201,132,26,.1);color:var(--gold);
  transform:translateY(-2px);
}
.hero-chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.chip{
  padding:6px 14px;border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  font-size:.82rem;color:var(--txt2);
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--tr),border-color var(--tr);
}
.chip:hover{background:rgba(201,132,26,.15);border-color:rgba(201,132,26,.4);color:var(--gold)}
.team-chip{background:rgba(201,132,26,.1);border-color:rgba(201,132,26,.3);color:var(--gold)}
.hero-scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.7);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  z-index:4;
  animation:scrollBob 2s ease-in-out infinite;
}
.scroll-icon{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes scrollBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Stats Bar ──────────────────────────────────────────────────── */
.stats-bar{
  position:relative;z-index:1;
  background:rgba(201,132,26,.06);
  border-top:1px solid rgba(201,132,26,.15);
  border-bottom:1px solid rgba(201,132,26,.15);
  padding:36px 0;
}
.stats-row{
  display:flex;align-items:center;justify-content:space-around;
  gap:24px;flex-wrap:wrap;
}
.stat{text-align:center;flex:1 1 150px}
.stat-val{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2rem,5vw,3rem);font-weight:900;
  color:var(--gold);line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.stat-sym{font-size:1.5rem;font-weight:700}
.stat-lbl{color:var(--txt2);font-size:.82rem;margin-top:6px;max-width:160px;margin-inline:auto}
.stat-sep{width:1px;height:48px;background:rgba(255,255,255,.1);flex-shrink:0}

/* ── Cards 2x2 ──────────────────────────────────────────────────── */
.cards-2x2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.gc-icon{
  font-size:1.8rem;margin-bottom:16px;
  display:block;
}
.glass-card h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.1rem;font-weight:700;
  margin-bottom:10px;color:var(--txt);
}
.glass-card p{color:var(--txt2);font-size:.92rem;line-height:1.7}

/* ── Controversy Layout ─────────────────────────────────────────── */
.ct-layout{display:flex;flex-direction:column;gap:48px}
.ct-text p{
  color:var(--txt2);margin-bottom:14px;font-size:.97rem;line-height:1.75;
  max-width:800px;
}
.ct-text .lead{
  font-size:1.08rem;color:var(--txt);font-weight:500;
  border-left:3px solid var(--gold);padding-left:20px;
  margin-bottom:20px;
}
.cq-box{text-align:center;max-width:640px;margin:0 auto}
.cq-icon{font-size:2.5rem;color:var(--gold);margin-bottom:16px;display:block}
.cq-box h3{font-family:'Montserrat',sans-serif;font-size:1.25rem;font-weight:700;margin-bottom:12px}
.cq-box p{color:var(--txt2);font-size:1rem;line-height:1.7}
.cq-box strong{color:var(--txt)}

.ct-versus{
  display:flex;align-items:stretch;gap:16px;
  flex-wrap:wrap;
}
.ctv-side{
  flex:1;min-width:240px;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);padding:24px;
}
.ctv-for{border-left:3px solid var(--green)}
.ctv-against{border-left:3px solid var(--red)}
.ctv-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ctv-for .ctv-head i{color:var(--green);font-size:1.2rem}
.ctv-against .ctv-head i{color:var(--red);font-size:1.2rem}
.ctv-head h4{font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:700}
.ctv-side ul li{
  padding:5px 0;color:var(--txt2);font-size:.88rem;
  display:flex;align-items:center;gap:8px;
}
.ctv-side ul li i{color:var(--gold);font-size:.7rem}
.ctv-arg{
  margin-top:14px;padding:8px 14px;border-radius:var(--r-sm);
  font-size:.82rem;font-style:italic;
  background:rgba(255,255,255,.04);color:var(--txt2);
}
.ctv-vs{
  align-self:center;
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem;font-weight:900;color:var(--txt3);
  flex-shrink:0;
}

/* ── Terms Grid ─────────────────────────────────────────────────── */
.terms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  justify-content:center;
}
.term-card{padding:22px;cursor:default}
.tc-ico{font-size:1.4rem;color:var(--gold);margin-bottom:10px;display:block}
.term-card h4{
  font-size:.95rem;font-weight:700;
  margin-bottom:8px;color:var(--txt);
  font-family:'Montserrat',sans-serif;
}
.term-card p{color:var(--txt2);font-size:.84rem;line-height:1.6}

/* ── Timeline ───────────────────────────────────────────────────── */
.timeline{
  position:relative;max-width:900px;margin:0 auto;
  padding:0 24px;
}
.timeline::before{
  content:'';
  position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);
  width:2px;background:linear-gradient(to bottom,transparent,var(--gold) 5%,var(--gold) 95%,transparent);
  opacity:.35;
}

.tl-item{
  position:relative;width:50%;
  padding:0 48px 56px 0;
}
.tl-right{margin-left:50%;padding:0 0 56px 48px}
.tl-left{padding:0 48px 56px 0}

.tl-dot{
  position:absolute;top:14px;
  width:14px;height:14px;border-radius:50%;
  background:var(--c);
  box-shadow:0 0 0 3px rgba(12,12,16,.8),0 0 10px var(--c);
  z-index:2;
}
.tl-left .tl-dot{right:-7px}
.tl-right .tl-dot{left:-7px}
.tl-pulse{animation:tlPulse 2s ease-in-out infinite}
@keyframes tlPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(12,12,16,.8),0 0 10px var(--c)}
  50%{box-shadow:0 0 0 3px rgba(12,12,16,.8),0 0 20px var(--c),0 0 30px var(--c)}
}

.tl-card{transition:transform var(--tr),background var(--tr),box-shadow var(--tr)}
.tl-card-active{border-color:rgba(201,132,26,.4)}
.tl-year{
  font-family:'Montserrat',sans-serif;
  font-size:1.8rem;font-weight:900;color:var(--gold);
  margin-bottom:6px;
}
.tl-badge{
  display:inline-block;
  padding:3px 10px;border-radius:20px;
  background:rgba(0,0,0,.3);
  color:#fff;font-size:.75rem;font-weight:600;
  margin-bottom:10px;
  border:1px solid var(--bc);
}
.tl-card h4{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;font-weight:700;
  margin-bottom:8px;color:var(--txt);
}
.tl-card p{color:var(--txt2);font-size:.88rem;line-height:1.65}

/* ── Tabs ───────────────────────────────────────────────────────── */
.tabs-wrap{}
.tabs-head{
  display:flex;gap:8px;margin-bottom:32px;
  border-bottom:1px solid var(--glass-brd);
  padding-bottom:0;
  flex-wrap:wrap;
}
.tab-btn{
  padding:12px 22px;border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:.9rem;font-weight:600;
  color:var(--txt2);
  background:transparent;
  border:1px solid transparent;
  border-bottom:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:color var(--tr),background var(--tr),border-color var(--tr);
}
.tab-btn:hover{color:var(--txt);background:var(--glass)}
.tab-btn.tab-active{
  color:var(--gold);
  background:var(--glass);
  border-color:var(--glass-brd);
  border-bottom:2px solid var(--gold);
}
.tab-panel{display:none}
.tab-panel.tab-visible{display:block}
/* Forcer la visibilité des éléments reveal-up dans un onglet actif */
.tab-panel.tab-visible .reveal-up{
  opacity:1 !important;
  transform:translateY(0) !important;
  animation:none !important;
}

/* ── Actors Grid ────────────────────────────────────────────────── */
.actors-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  justify-content:center;
}
.actor-card{padding:24px}
.ac-logo-wrap{
  height:44px;display:flex;align-items:center;
  margin-bottom:14px;
}
.ac-logo-img{
  max-height:38px;max-width:130px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.85;
}
.ac-blue{background:rgba(0,114,188,.15);color:#0072BC}
.ac-icon{
  width:44px;height:44px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;margin-bottom:14px;
}
.ac-green{background:rgba(46,204,113,.15);color:var(--green)}
.ac-blue{background:rgba(52,152,219,.15);color:var(--blue)}
.ac-purple{background:rgba(155,89,182,.15);color:var(--purple)}
.ac-orange{background:rgba(230,126,34,.15);color:var(--orange)}
.ac-teal{background:rgba(26,188,156,.15);color:var(--teal)}
.ac-red{background:rgba(231,76,60,.15);color:var(--red)}
.ac-yellow{background:rgba(241,196,15,.15);color:var(--yellow)}
.ac-gray{background:rgba(150,150,170,.15);color:#9A9AAE}
.actor-card h4{font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:700;margin-bottom:4px}
.ac-role{font-size:.8rem;color:var(--gold);font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em}
.actor-card p{color:var(--txt2);font-size:.87rem;line-height:1.65;margin-bottom:12px}
.ac-enjeu{
  font-size:.8rem;color:var(--txt3);padding-top:12px;
  border-top:1px solid var(--glass-brd);
}
.ac-enjeu b{color:var(--gold)}

/* ── Arguments Grid ─────────────────────────────────────────────── */
.args-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  justify-content:center;
}
.arg-card{position:relative;padding:24px;padding-top:36px;overflow:hidden}
.arg-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
}
.arg-green::before{background:var(--green)}
.arg-red::before{background:var(--red)}
.arg-num{
  position:absolute;top:16px;right:18px;
  font-size:2rem;font-weight:900;
  font-family:'Montserrat',sans-serif;
  color:rgba(255,255,255,.06);
  line-height:1;
}
.arg-ico{
  font-size:1.6rem;margin-bottom:12px;
  display:block;
}
.arg-green .arg-ico{color:var(--green)}
.arg-red .arg-ico{color:var(--red)}
.arg-card h4{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;font-weight:700;
  margin-bottom:10px;color:var(--txt);
}
.arg-card p{color:var(--txt2);font-size:.87rem;line-height:1.65;margin-bottom:12px}
.arg-src{
  font-size:.77rem;color:var(--txt3);
  padding-top:10px;border-top:1px solid var(--glass-brd);
  font-style:italic;
}

/* ── Data Grid ──────────────────────────────────────────────────── */
.data-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin-bottom:60px;
  justify-content:center;
}
.data-card{padding:32px 24px;text-align:center}
.dc-icon{font-size:1.8rem;color:var(--gold);margin-bottom:14px;display:block}
.dc-val{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2rem,5vw,3rem);font-weight:900;
  color:var(--gold);line-height:1;margin-bottom:10px;
  display:flex;align-items:baseline;justify-content:center;gap:2px;
  white-space:nowrap;
}
.dc-inf{font-size:3rem}
.dc-label{color:var(--txt2);font-size:.85rem;line-height:1.5}

/* Events */
.events-section h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.4rem;font-weight:700;
  margin-bottom:28px;color:var(--txt);
  padding-left:16px;border-left:3px solid var(--gold);
}
.events-list{display:flex;flex-direction:column;gap:0}
.ev-item{
  display:flex;gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--glass-brd);
}
.ev-item:last-child{border-bottom:none}
.ev-date{
  flex-shrink:0;
  min-width:120px;
  font-family:'Montserrat',sans-serif;
  font-size:.9rem;font-weight:700;color:var(--gold);
  padding-top:2px;
}
.ev-content h4{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;font-weight:700;margin-bottom:6px;
}
.ev-content p{color:var(--txt2);font-size:.88rem;line-height:1.65}

/* ── Bilan ──────────────────────────────────────────────────────── */
.bilan-quote{
  max-width:720px;margin:0 auto 56px;
  text-align:center;
}
blockquote{
  font-family:'Playfair Display',serif;
  font-size:clamp(1rem,2.5vw,1.2rem);
  font-style:italic;
  color:var(--txt2);
  line-height:1.75;
  padding:24px;
  background:rgba(201,132,26,.06);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  text-align:left;
}
.bq-icon{color:var(--gold);margin-right:12px;font-size:1.5rem;vertical-align:middle}
.bilan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;margin-bottom:48px;
  justify-content:center;
}
.bilan-card{padding:28px}
.bl-icon{font-size:1.8rem;color:var(--gold);margin-bottom:14px;display:block}
.bilan-card h4{
  font-family:'Montserrat',sans-serif;
  font-size:1.05rem;font-weight:700;margin-bottom:10px;
}
.bilan-card p{color:var(--txt2);font-size:.9rem;line-height:1.7}

.conclusion-box{
  background:rgba(201,132,26,.08);
  border:1px solid rgba(201,132,26,.25);
  border-radius:var(--r-lg);
  padding:40px;
  text-align:center;
  max-width:800px;margin:0 auto;
}
.conclusion-box h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.4rem;font-weight:800;
  margin-bottom:20px;color:var(--gold);
}
.conclusion-box h3 i{margin-right:10px}
.conclusion-box p{
  color:var(--txt2);font-size:.97rem;line-height:1.8;
  max-width:680px;margin:0 auto 14px;
}

/* ── Bibliography ───────────────────────────────────────────────── */
.biblio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  justify-content:center;
}
.bib-card{padding:24px}
.bib-type{
  font-family:'Montserrat',sans-serif;
  font-size:.9rem;font-weight:700;color:var(--gold);
  margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.bib-card ul li{
  padding:6px 0;color:var(--txt2);font-size:.87rem;
  display:flex;align-items:flex-start;gap:8px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.bib-card ul li:last-child{border-bottom:none}
.bib-card ul li i{color:var(--gold);margin-top:4px;flex-shrink:0;font-size:.7rem}

/* ── Team ───────────────────────────────────────────────────────── */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;margin-bottom:48px;
  justify-content:center;
}
.team-card{
  padding:32px;text-align:center;
  position:relative;
}
.featured-card{
  border-color:rgba(201,132,26,.4);
  box-shadow:0 0 30px rgba(201,132,26,.12);
}
.tc-featured-badge{
  position:absolute;top:-1px;left:50%;
  transform:translateX(-50%);
  background:var(--gold);color:#fff;
  font-size:.72rem;font-weight:700;
  padding:3px 12px;border-radius:0 0 var(--r-sm) var(--r-sm);
  letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.tc-abandoned-badge{
  position:absolute;top:-1px;left:50%;
  transform:translateX(-50%);
  background:#5a2020;color:#f08080;
  font-size:.72rem;font-weight:700;
  padding:3px 12px;border-radius:0 0 var(--r-sm) var(--r-sm);
  letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(240,128,128,.3);border-top:none;
}
.abandoned-card{
  opacity:.6;
  border-color:rgba(90,32,32,.5) !important;
  filter:grayscale(40%);
}
.tc-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;
  font-size:1.6rem;font-weight:900;color:#fff;
  margin:0 auto 16px;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.team-card h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.2rem;font-weight:800;
  margin-bottom:4px;
}
.tc-nick{color:var(--txt3);font-size:.85rem;margin-bottom:10px}
.tc-nick em{color:var(--gold)}
.tc-role{
  font-size:.8rem;color:var(--txt2);
  margin-bottom:14px;
  display:flex;align-items:center;gap:6px;justify-content:center;
}
.tc-role i{color:var(--gold)}
.team-card p{
  color:var(--txt2);font-size:.87rem;
  line-height:1.65;margin-bottom:16px;
}
.tc-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.tc-tags span{
  padding:4px 12px;border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-size:.78rem;color:var(--txt2);
}

.team-motto{
  text-align:center;max-width:640px;margin:0 auto;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  padding:36px;
}
.team-motto i{font-size:1.5rem;color:var(--gold);margin-bottom:14px;display:block}
.team-motto p{
  font-family:'Playfair Display',serif;
  font-style:italic;color:var(--txt2);
  font-size:1rem;line-height:1.8;margin-bottom:12px;
}
.tm-sig{color:var(--txt3);font-size:.82rem;font-weight:600}

/* ── Footer ─────────────────────────────────────────────────────── */
.footer-top{background:var(--bg2);border-top:1px solid var(--glass-brd);padding:64px 0 40px}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:40px;
}
.fg-brand{
  font-family:'Montserrat',sans-serif;
  font-size:1.2rem;font-weight:900;
  color:var(--gold);margin-bottom:12px;line-height:1.3;
}
.fg-desc{color:var(--txt2);font-size:.87rem;line-height:1.7;margin-bottom:24px}
.fg-logos{display:flex;gap:12px;flex-wrap:wrap}
.flogo{
  padding:10px 16px;border-radius:var(--r-sm);
  border:1px solid var(--glass-brd);
  font-family:'Montserrat',sans-serif;
  font-size:.75rem;font-weight:900;
  text-align:center;line-height:1.3;
  letter-spacing:.06em;
}
.flogo small{font-weight:400;font-size:.7rem;letter-spacing:.04em;opacity:.8}
.flogo-esiee{border-color:rgba(201,132,26,.4);color:var(--gold);background:rgba(201,132,26,.08)}
.flogo-uge{border-color:rgba(52,152,219,.3);color:var(--blue);background:rgba(52,152,219,.06)}
.footer-grid h4{
  font-family:'Montserrat',sans-serif;
  font-size:.9rem;font-weight:700;
  color:var(--txt);margin-bottom:14px;
  text-transform:uppercase;letter-spacing:.06em;
}
.fg-links li a{
  display:flex;align-items:center;gap:7px;
  padding:5px 0;color:var(--txt2);
  font-size:.87rem;
  border-bottom:1px solid transparent;
  transition:color var(--tr);
}
.fg-links li a:hover{color:var(--gold)}
.fg-links li a i{color:var(--gold);width:14px;font-size:.8rem;flex-shrink:0}
.fg-team{display:flex;flex-direction:column;gap:14px}
.fg-member{display:flex;align-items:center;gap:12px}
.fgm-av{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:900;color:#fff;
  flex-shrink:0;
}
.fgm-name{font-size:.85rem;font-weight:600;color:var(--txt)}
.fgm-school{font-size:.78rem;color:var(--txt3)}

.footer-bottom{
  background:var(--bg);
  border-top:1px solid rgba(255,255,255,.05);
  padding:20px 0;
}
.fb-inner{
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.fb-copy p{color:var(--txt3);font-size:.8rem;line-height:1.8}
.fb-site{
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;color:var(--txt3);
}
.fb-site a{color:var(--gold);font-weight:600}
.fb-site a:hover{color:var(--gold-light)}

/* ── Back to top ─────────────────────────────────────────────────── */
#backToTop{
  position:fixed;bottom:28px;right:28px;
  width:44px;height:44px;border-radius:50%;
  background:var(--gold);color:#fff;
  font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-gold);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(12px);
  transition:opacity var(--tr),visibility var(--tr),transform var(--tr),background var(--tr);
  z-index:900;
}
#backToTop.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
#backToTop:hover{background:var(--gold-light);transform:translateY(-2px)}

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .timeline::before{left:24px}
  .tl-item,.tl-left,.tl-right{width:100%;margin-left:0;padding:0 0 40px 56px}
  .tl-left .tl-dot,.tl-right .tl-dot{left:-7px;right:auto}
  .tl-left,.tl-right{margin-left:0}
}

@media(max-width:768px){
  /* styles non-nav déjà dans le bloc plus bas — on garde juste le reste ici */
  .hero-title{gap:4px}
  .ht-script{font-size:clamp(2.4rem,8vw,4rem)}
  .ht-block{font-size:clamp(3.5rem,12vw,7rem)}
  .stats-row{gap:32px}
  .stat-sep{display:none}
  .ct-versus{flex-direction:column}
  .ctv-vs{text-align:center}
  .timeline{padding:0 0 0 20px}
  .timeline::before{left:14px}
  .tl-item{padding:0 0 40px 44px}
  .tl-dot{left:-6px !important;right:auto !important}
  .footer-grid{grid-template-columns:1fr}
  .section{padding:72px 0}
  .ev-item{flex-direction:column;gap:8px}
  .ev-date{min-width:auto}
}

@media(max-width:480px){
  .hero-cta{flex-direction:column;align-items:center}
  .btn-primary,.btn-ghost{width:100%;max-width:280px;justify-content:center}
  .terms-grid{grid-template-columns:1fr 1fr}
  .cards-2x2{grid-template-columns:1fr}
  .bilan-grid{grid-template-columns:1fr}
  .args-grid{grid-template-columns:1fr}
  .actors-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .biblio-grid{grid-template-columns:1fr}
  .data-grid{grid-template-columns:1fr 1fr}
  .tabs-head{flex-direction:column}
  .tab-btn{width:100%;border-radius:var(--r-sm);border:1px solid var(--glass-brd) !important}
  .ht-script{font-size:clamp(2rem,10vw,3rem)}
  .ht-block{font-size:clamp(2.8rem,14vw,5.5rem)}
  .sec-title{font-size:clamp(1.4rem,6vw,2rem)}
  .section{padding:56px 0}
  .data-grid{grid-template-columns:1fr}
}

/* ================================================================
   ANIMATIONS SUPPLÉMENTAIRES
   ================================================================ */

/* Scintillement sur les chiffres des compteurs au moment où ils apparaissent */
@keyframes counterPop {
  0%   { transform:scale(1) }
  40%  { transform:scale(1.18) }
  70%  { transform:scale(.94) }
  100% { transform:scale(1) }
}
.dc-val.popped { animation:counterPop .5s cubic-bezier(.34,1.56,.64,1) forwards }
.stat-val.popped { animation:counterPop .5s cubic-bezier(.34,1.56,.64,1) forwards }

/* Glow pulsant sur les valeurs stat */
@keyframes statGlow {
  0%,100%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 24px rgba(201,132,26,.55)}
}

/* Cartes : animation d'entrée staggerée gérée par reveal-up + --d */
/* Les cartes glass ont déjà le hover 3D, on ajoute un shimmer au survol */
@keyframes shimmer {
  0%   { background-position:-200% 0 }
  100% { background-position: 200% 0 }
}
.glass-card::after{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.04) 50%,
    transparent 60%);
  background-size:200% 100%;
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.glass-card:hover::after{
  opacity:1;
  animation:shimmer 1.2s linear infinite;
}
.glass-card{position:relative;overflow:hidden}

/* Entrée des sections — fade-up renforcé */
@keyframes sectionIn{
  from{opacity:0;transform:translateY(48px)}
  to  {opacity:1;transform:translateY(0)}
}
.section > .container > .sec-header.visible{
  animation:sectionIn .7s cubic-bezier(.22,1,.36,1) both;
}

/* Timeline dot pulse plus visible */
@keyframes tlPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,132,26,.6)}
  50%    {box-shadow:0 0 0 10px rgba(201,132,26,0)}
}
.tl-pulse{animation:tlPulse 1.8s ease-in-out infinite !important}

/* Barre de progression dorée en haut (déjà en JS, renforcement visuel) */
/* Argument cards : bordure gauche animée */
@keyframes borderGrow{from{max-height:0}to{max-height:100%}}

/* Stats bar chiffres */
.stat-val .counter{display:inline-block}

/* DONNÉES — icone tourne légèrement au reveal */
@keyframes iconSpin{
  0%  {transform:rotate(-8deg) scale(.8);opacity:0}
  100%{transform:rotate(0deg) scale(1);opacity:1}
}
.data-card.visible .dc-icon{
  animation:iconSpin .6s cubic-bezier(.34,1.56,.64,1) both;
}
.data-card:nth-child(2).visible .dc-icon{animation-delay:.1s}
.data-card:nth-child(3).visible .dc-icon{animation-delay:.2s}
.data-card:nth-child(4).visible .dc-icon{animation-delay:.3s}
.data-card:nth-child(5).visible .dc-icon{animation-delay:.4s}
.data-card:nth-child(6).visible .dc-icon{animation-delay:.5s}

/* Arg cards : barre colorée en haut s'étend au reveal */
.arg-card::before{
  max-height:0;
  transition:max-height .8s cubic-bezier(.22,1,.36,1);
}
.arg-card.visible::before{max-height:100%}

/* Hero : léger effet de parallax déjà en JS, on ajoute du depth sur l'overlay */
.hero-overlay{transition:opacity .4s}

/* ================================================================
   MOBILE COMPLET — 768px (navigation + hero + grids)
   ================================================================ */
@media(max-width:768px){
  .nav-wrap{
    padding:0 16px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  /* Sur desktop le burger est avant le logo → on le remet après visuellement */
  .nav-logo{ margin-right:auto; }

  /* ── Burger button ── */
  .nav-burger{
    display:flex !important;
    order:-1; /* toujours en premier à gauche sur mobile */
    flex-direction:column;
    align-items:center;justify-content:center;
    gap:5px;
    width:44px;height:44px;
    min-width:44px;
    background:rgba(201,132,26,.15);
    border:1.5px solid rgba(201,132,26,.55) !important;
    border-radius:10px;
    cursor:pointer;
    flex-shrink:0;
    margin-left:0;
    transition:background .2s,border-color .2s;
    z-index:1001;position:relative;
  }
  .nav-burger span{
    display:block;
    width:20px;height:2px;
    background:#E8ECF0;
    border-radius:2px;
    transition:transform .3s ease,opacity .3s ease,background .3s;
  }
  .nav-burger.open{ background:rgba(201,132,26,.22); border-color:rgba(201,132,26,.6) !important; }
  .nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--gold); }
  .nav-burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
  .nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--gold); }

  /* ── Overlay menu ── */
  .nav-links{
    position:fixed;
    top:0;right:0;
    width:min(88vw, 340px);
    height:100vh;
    background:rgba(6,10,18,.97);
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    border-left:1px solid rgba(201,132,26,.25);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    /* padding: haut | DROITE (safe zone) | bas | gauche */
    padding:100px 28px 60px 32px;
    gap:0;
    display:none;
    z-index:1000;
    animation:none;
    overflow-y:auto;
    overflow-x:hidden;
    box-sizing:border-box;
  }
  .nav-links.open{
    display:flex !important;
    animation:menuSlideIn .32s cubic-bezier(.22,.68,0,1.2) both;
  }
  @keyframes menuSlideIn{
    from{ transform:translateX(100%); opacity:.4; }
    to  { transform:translateX(0);    opacity:1;  }
  }

  /* Fond semi-transparent à gauche quand le menu est ouvert */
  .nav-links::before{
    content:'';
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.55);
    z-index:-1;
    pointer-events:none;
  }

  /* Items du menu */
  .nl{
    font-size:1.15rem;font-weight:600;
    padding:13px 0;
    width:100%;
    max-width:100%;
    color:rgba(220,225,235,.85);
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;align-items:center;gap:10px;
    transition:color .2s,padding-left .2s;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing:border-box;
  }
  .nl:hover,.nl.active{ color:var(--gold); padding-left:6px; }
  .nl .fas{ width:18px;flex-shrink:0;font-size:.9rem;color:var(--gold);opacity:.7; }

  /* Sous-menu — caché par défaut, visible au clic */
  .has-sub .subnav{
    display:none;
    position:static;transform:none;
    opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:none;backdrop-filter:none;
    box-shadow:none;padding:4px 0 4px 28px;min-width:auto;
    animation:subOpen .22s ease both;
  }
  .has-sub.sub-open .subnav{ display:block; }
  @keyframes subOpen{
    from{ opacity:0;transform:translateY(-6px); }
    to  { opacity:1;transform:translateY(0); }
  }
  .subnav li a{
    font-size:.95rem;padding:8px 0;color:var(--txt2);
    display:flex;align-items:center;gap:8px;transition:color .2s;
  }
  .subnav li a:hover{ color:var(--gold); }
  /* Chevron tourne quand sous-menu ouvert */
  .has-sub .fa-chevron-down{
    transition:transform .25s ease;
    margin-left:4px;
  }
  .has-sub.sub-open .fa-chevron-down{ transform:rotate(180deg); }

  /* Hero */
  .hero-body{padding:90px 20px 80px}
  .ht-script{font-size:clamp(2.2rem,9vw,3.8rem)}
  .ht-block{font-size:clamp(3.2rem,13vw,6.5rem)}
  .hero-question{font-size:clamp(.95rem,3vw,1.1rem);padding:0 8px}
  .hero-desc{font-size:.9rem;padding:0 8px}
  .hero-chips{flex-wrap:wrap;gap:8px}
  .chip{font-size:.78rem;padding:5px 12px}

  /* Tabs */
  .tabs-head{flex-direction:column;gap:4px}
  .tab-btn{
    width:100%;
    border-radius:var(--r-sm) !important;
    border:1px solid var(--glass-brd) !important;
    border-bottom:1px solid var(--glass-brd) !important;
    justify-content:center;
  }
  .tab-btn.tab-active{
    border-color:rgba(201,132,26,.5) !important;
    border-bottom:2px solid var(--gold) !important;
  }

  /* Data grid */
  .data-grid{grid-template-columns:1fr 1fr}
  .data-card{padding:24px 16px}
  .dc-val{font-size:clamp(1.8rem,7vw,2.5rem)}

  /* Stats */
  .stats-row{flex-direction:column;gap:24px}
  .stat-sep{display:none}
  .stat{width:100%;max-width:300px;margin:0 auto}

  /* Args */
  .args-grid,.actors-grid,.bilan-grid,.biblio-grid{grid-template-columns:1fr}

  /* Timeline */
  .timeline{padding:0 0 0 16px}
  .timeline::before{left:10px;width:2px}
  .tl-item{padding:0 0 36px 36px}
  .tl-dot{left:-5px !important;right:auto !important;width:10px;height:10px}
  .tl-card{padding:16px}
  .tl-year{font-size:1.5rem}

  /* Sections */
  .section{padding:64px 0}
  .sec-header{margin-bottom:40px}
  .sec-title{font-size:clamp(1.5rem,5vw,2.2rem)}

  /* Bilan */
  .bilan-quote blockquote{padding:20px}
  .bilan-quote blockquote p{font-size:1rem}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-logo{justify-content:center}
  .footer-links{align-items:center}
}