/* ---------- polices ---------- */
@font-face{font-family:'PPRader';src:url('assets/PPRader-Free for personal use v1.0/PPRader-Regular.otf') format('opentype');font-weight:400;font-style:normal;}
@font-face{font-family:'PPRader';src:url('assets/PPRader-Free for personal use v1.0/PPRader-Bold.otf') format('opentype');font-weight:700;font-style:normal;}
@font-face{font-family:'PPRader';src:url('assets/PPRader-Free for personal use v1.0/PPRader-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;}
@font-face{font-family:'PPRader';src:url('assets/PPRader-Free for personal use v1.0/PPRader-Thin.otf') format('opentype');font-weight:100;font-style:normal;}

/* ---------- variables ---------- */
:root{
  --kraft-900:#161310;
  --kraft-800:#1d1916;
  --kraft-700:#2a241f;
  --paper:#efe7d6;
  --paper-2:#e3d8c0;
  --ink:#1b1813;
  --ocean:#2f6f9e;
  --ocean-deep:#1f4a6b;
  --burnt:#c0492b;
  --burnt-2:#e2683f;
  --amber:#d99a3a;
  --zero:#f4ede0;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--paper);
  background:var(--kraft-900);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.025), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,.02), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
.serif{font-family:'PPRader',Georgia,serif;}

/* ---------- structure scène ---------- */
.scene{
  max-width:1000px;
  margin:0 auto;
  padding:14vh 26px;
  position:relative;
}
.scene + .scene{border-top:1px dashed rgba(239,231,214,.18);}
.tag{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);font-weight:600;margin:0 0 18px;
  display:inline-block;
}
.tag::before{content:"✂  ";opacity:.7;}
h2.title{
  font-family:'PPRader',serif;font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.08;
  margin:0 0 22px;color:var(--paper);
}
p.lede{
  font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.62;
  max-width:62ch;color:#e7ddca;margin:0 0 14px;
}
p.lede b{color:#fff;}
.hl-hot{color:var(--burnt-2);font-weight:600;}
.hl-cold{color:#7fb5d8;font-weight:600;}

/* ---------- carte graphique ---------- */
.card{
  margin-top:40px;background:var(--paper);color:var(--ink);
  border-radius:3px;padding:26px 22px 14px;
  box-shadow:
     0 1px 0 rgba(0,0,0,.4),
     0 22px 40px -22px rgba(0,0,0,.8);
  transform:rotate(-.5deg);
  position:relative;
}
.card.r{transform:rotate(0deg);}
.card::after{
  content:"";position:absolute;top:-12px;left:50%;
  width:120px;height:26px;transform:translateX(-50%) rotate(-2deg);
  background:rgba(217,154,58,.32);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.card h3{
  font-family:'PPRader',serif;font-weight:600;color:var(--ink);
  font-size:1.15rem;margin:4px 0 2px;
}
.card .why{
  font-size:.82rem;color:#6a5d49;margin:0 0 10px;font-style:italic;
}
.chart{width:100%;}

/* ---------- ACCUEIL ---------- */
.accueil{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:0 26px;position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(192,73,43,.30), transparent 55%),
    linear-gradient(180deg, var(--kraft-900), var(--kraft-800));
}
.accueil .kicker{color:var(--amber);letter-spacing:.3em;text-transform:uppercase;
  font-size:.8rem;margin-bottom:26px;}
.accueil h1{
  font-family:'PPRader',serif;font-weight:700;
  font-size:clamp(2.6rem,8vw,6rem);line-height:.98;margin:0;
  color:var(--paper);
  text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.accueil h1 .b{color:var(--ocean);}
.accueil h1 .r{color:var(--burnt-2);}
.accueil .sub{margin-top:30px;font-size:1.15rem;color:#d8cdb8;max-width:48ch;
  margin-left:auto;margin-right:auto;line-height:1.6;}
.islands{display:flex;gap:14px;justify-content:center;margin-top:46px;flex-wrap:wrap;max-width:640px;margin-left:auto;margin-right:auto;}
.isl{width:26px;height:18px;background:var(--paper-2);
  clip-path:polygon(15% 70%,0 100%,100% 100%,85% 65%,70% 80%,55% 55%,40% 78%,28% 58%);
  opacity:0;animation:pop .5s ease forwards;}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.6)}to{opacity:.9;transform:none}}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:#bdae93;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;}
.scroll-hint span{display:block;font-size:1.3rem;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- bandeau révélation ---------- */
.reveal{
  background:linear-gradient(180deg,var(--kraft-800),var(--ocean-deep));
}
.key-badge{
  display:inline-block;background:var(--burnt);color:#fff;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 12px;border-radius:2px;margin-bottom:14px;transform:rotate(-1deg);
}

/* ---------- verdict ---------- */
.verdict{background:linear-gradient(180deg,var(--burnt),#7e2d1a);text-align:center;position:relative;}
.verdict::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arractverdic.jpg') center/cover no-repeat;
  z-index:0;
}
.verdict>*{position:relative;z-index:1;}
.verdict .big{font-family:'PPRader',serif;font-weight:700;
  font-size:clamp(3rem,12vw,8rem);line-height:1;color:#fff;margin:10px 0;}
.verdict .big small{font-size:.32em;vertical-align:super;font-weight:600;}
.verdict p.lede{margin-left:auto;margin-right:auto;color:#ffe9e0;}

/* ---------- conclusion ---------- */
.outro{background:var(--kraft-900);position:relative;padding-bottom:220px;}
.outro::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arriere-plan3.webp') center/cover no-repeat;
  z-index:0;
}
.outro>*{position:relative;z-index:1;}
.takeaways{display:grid;gap:18px;margin-top:34px;}
@media(min-width:720px){.takeaways{grid-template-columns:repeat(3,1fr);}}
.take{background:var(--kraft-700);border-left:3px solid var(--amber);
  padding:20px 18px;border-radius:2px;}
.take .n{font-family:'PPRader',serif;font-size:2rem;color:var(--amber);line-height:1;}
.take p{font-size:.96rem;line-height:1.55;color:#e7ddca;margin:8px 0 0;}
.source{font-size:.8rem;color:#9b8e76;margin-top:40px;border-top:1px dashed rgba(239,231,214,.18);padding-top:18px;position:relative;z-index:2;}
.source-link{color:#9b8e76;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;transition:color .2s;}
.source-link:hover{color:var(--amber);}

/* ---------- progress bar ---------- */
#prog{position:fixed;top:0;left:0;height:4px;width:0;z-index:50;
  background:linear-gradient(90deg,var(--ocean),var(--burnt));transition:width .1s;}

/* ---------- reveal on scroll ---------- */
.fade{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.fade.in{opacity:1;transform:none;}
.fade-right{opacity:0;transform:translateX(90px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1);}
.fade-right.in{opacity:1;transform:translateX(0);}

/* ---------- motion assets ---------- */
.motion-asset{position:absolute;pointer-events:none;user-select:none;}

/* héro */
.accueil-bg{inset:0;z-index:-1;
  background:url('assets/accueil-archipel.webp') center 38%/cover no-repeat;
  opacity:.28;filter:saturate(.85);}
.accueil-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--kraft-900) 0%,rgba(22,19,16,.45) 38%,var(--kraft-900) 96%);}
.ride-mer{left:0;right:0;bottom:-2px;width:100%;height:auto;z-index:-1;opacity:.92;}
.cloud{z-index:-1;width:170px;height:auto;opacity:.45;}
.cloud.gauche{top:9%;left:-50px;animation:drift-g 26s ease-in-out infinite;}
.cloud.droite{top:16%;right:-40px;width:140px;animation:drift-d 22s ease-in-out infinite;}
@keyframes drift-g{0%,100%{transform:translateX(0)}50%{transform:translateX(22px)}}
@keyframes drift-d{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
.bird{z-index:-1;width:30px;height:auto;opacity:.6;animation:bob3 5s ease-in-out infinite;}
@keyframes bob3{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-3deg)}}

/* ---------- Acte 1 ---------- */
.acte1-sticky-wrapper{height:260vh;}
.scene-acte1{position:sticky;top:0;isolation:isolate;padding-top:3vh;padding-bottom:3vh;min-height:100vh;}
.scene-acte1 .card{
  opacity:0;margin-top:16px;
  transform:rotate(-.5deg) translateX(110px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.scene-acte1 .card.in{opacity:1;transform:rotate(-.5deg) translateX(0);}
.scene-acte1 .frise{opacity:0;transition:opacity .6s .4s;}
.scene-acte1 .frise.in{opacity:.85;}
.scene-acte1::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arriere-plan3.webp') center/cover no-repeat;
  z-index:-1;
}
.acte1-recif{
  position:absolute;
  bottom:10px;right:-100px;
  width:465px;height:auto;
  z-index:1;opacity:.95;
  transform:scaleX(-1);
}

/* ---------- Acte 2 ---------- */
.acte2-sticky-wrapper{height:240vh;}
.scene-acte2{position:sticky;top:0;isolation:isolate;padding-top:3vh;padding-bottom:3vh;min-height:100vh;}
.scene-acte2 .card{
  opacity:0;margin-top:16px;
  transform:rotate(.6deg) translateX(-110px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.scene-acte2 .card.in{opacity:1;transform:rotate(.6deg) translateX(0);}
.scene-acte2::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arriere-plan4.webp') center/cover no-repeat;
  z-index:-1;
}
.acte2-bird{z-index:1;width:72px;height:auto;top:50%;left:-24px;opacity:.72;animation:bob3 6s ease-in-out infinite;animation-delay:.8s;}
.acte2-cloud{z-index:1;width:230px;height:auto;top:3%;right:-60px;opacity:.55;animation:drift-d 24s ease-in-out infinite;}
.acte2-thermo{z-index:1;width:85px;height:auto;top:28%;right:-20px;opacity:.92;transform:rotate(2deg);}

/* ---------- Page intro (décor) ---------- */
.scene-decor{position:relative;isolation:isolate;}
.scene-decor::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arriere-plan2.webp') center/cover no-repeat;
  z-index:-1;
}
.instruments-wrap{float:right;width:min(280px,40%);margin:6px 0 18px 28px;shape-outside:margin-box;}
.instruments-wrap img{width:100%;height:auto;display:block;border-radius:2px;box-shadow:0 18px 30px -18px rgba(0,0,0,.7);transform:rotate(1.2deg);}
.fil-rouge{display:block;width:min(420px,100%);height:auto;margin:6px 0 4px;opacity:.8;}
.frise{display:block;width:100%;max-width:640px;height:auto;margin:28px auto 0;opacity:.85;}
.algue-corner{z-index:1;width:84px;height:auto;top:-18px;right:6px;opacity:.9;transform:rotate(6deg);}

/* ---------- Graphique clé (G3) ---------- */
.reveal-sticky-wrapper{height:240vh;}
.reveal{position:relative;}
.reveal::before{
  content:"";position:absolute;
  top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  z-index:0;
  background:url('assets/arriere plancr.jpg') center/cover no-repeat;
  pointer-events:none;
}
.reveal>*{position:relative;z-index:1;}
.scene-g3{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:3vh;padding-bottom:3vh;}
.scene-g3 .card{margin-top:16px;}
.g3-vagues{
  position:absolute;bottom:-30px;
  left:calc(-50vw + 50%);width:100vw;height:auto;
  z-index:3;opacity:0;
  transform:translateY(200px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.g3-vagues.in{opacity:1;transform:translateY(25px);}
.g3-oiseau{z-index:2;width:200px;height:auto;top:-70px;left:-90px;opacity:.95;}
.g3-recif{z-index:2;width:420px;height:auto;bottom:-50px;right:-100px;opacity:.95;}

/* ---------- Acte 3 (heatmap) ---------- */
.acte3-sticky-wrapper{height:360vh;}
.scene-acte3{position:sticky;top:0;padding-top:3vh;padding-bottom:3vh;min-height:100vh;}
.scene-acte3 .card{margin-top:16px;}
.scene-acte3::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arrplan3cr.webp') center/cover no-repeat;
  z-index:-1;
}
.acte3-bordemer{
  position:absolute;left:calc(-50vw + 50%);top:0;bottom:0;
  height:100%;width:auto;z-index:2;opacity:0;
  transform:translateX(-150%);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.acte3-bordemer.in{opacity:1;transform:translateX(-50%);}
.acte3-bordemer.in2{opacity:1;transform:translateX(-30%);}
.acte3-bordemer2{
  position:absolute;right:calc(-50vw + 50%);top:0;bottom:0;
  height:100%;width:auto;z-index:2;opacity:0;
  transform:translateX(150%);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.acte3-bordemer2.in{opacity:1;transform:translateX(50%);}
.acte3-bordemer2.in2{opacity:1;transform:translateX(30%);}

/* ---------- Acte 4 (barres) ---------- */
.acte4-sticky-wrapper{height:240vh;}
.scene-acte4{position:sticky;top:0;padding-top:3vh;padding-bottom:3vh;min-height:100vh;}
.scene-acte4::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arract4.jpg') center/cover no-repeat;
  z-index:-1;
}
.scene-acte4 .card{
  opacity:0;margin-top:16px;
  transform:rotate(-.5deg) translateX(110px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.scene-acte4 .card.in{opacity:1;transform:rotate(-.5deg) translateX(0);}
.acte4-rocher{position:absolute;left:calc(-50vw + 44%);bottom:-25px;width:280px;height:auto;z-index:2;opacity:1;}
.acte4-rocher2{position:absolute;right:calc(-50vw + 44%);bottom:-40px;width:252px;height:auto;z-index:2;opacity:1;}
.acte4-recif{position:absolute;bottom:5px;left:40%;transform:translateX(-50%);width:400px;height:auto;z-index:2;opacity:1;}
.acte4-vague{
  position:absolute;bottom:0;
  left:calc(-50vw + 50%);width:100vw;height:auto;
  z-index:3;opacity:1;
  transform:translateY(50%);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}

/* ---------- Épilogue ---------- */
.scene-focus{padding-bottom:4vh;position:relative;}
.scene-focus::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arepilog.jpg') center/cover no-repeat;
  z-index:0;
}
.scene-focus>*{position:relative;z-index:1;}
.scene-focus .focus-item{display:flex;gap:26px;align-items:center;margin:34px 0;}
.scene-focus .focus-item:nth-child(even){flex-direction:row-reverse;}
.focus-img{
  width:42%;border-radius:3px;object-fit:cover;aspect-ratio:4/3;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.8);
  transform:rotate(-1deg);flex-shrink:0;
}
.scene-focus .focus-item:nth-child(even) .focus-img{transform:rotate(1.2deg);}
.focus-text h3{font-family:'PPRader',serif;font-weight:700;font-size:1.25rem;margin:0 0 8px;color:var(--paper);}
.focus-text p{font-size:1.02rem;line-height:1.6;color:#e7ddca;margin:0;}

/* ---------- Citation ---------- */
.scene-citation{text-align:center;padding-top:2vh;padding-bottom:4vh;position:relative;}
.scene-citation::before{
  content:"";
  position:absolute;top:0;bottom:0;
  left:calc(-50vw + 50%);width:100vw;
  background:url('assets/arepilog v2.jpg') center/cover no-repeat;
  z-index:0;
}
.scene-citation>*{position:relative;z-index:1;}
.citation-rule{display:flex;align-items:center;gap:18px;margin:12px 0;}
.citation-rule::before,.citation-rule::after{content:"";flex:1;border-top:1px dashed rgba(239,231,214,.35);}
.citation-label{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--burnt-2);font-weight:600;white-space:nowrap;}
.citation-quote{font-family:'PPRader',serif;font-weight:700;font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.08;color:var(--paper);margin:0 auto 18px;}
.citation-author{font-size:.88rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);}

/* ---------- responsive ---------- */
@media(max-width:680px){
  .instruments-wrap{float:none;width:min(240px,70%);margin:0 auto 22px;}
  .cloud,.bird,.acte2-bird,.acte2-cloud,.acte2-thermo{display:none;}
  .scene-focus .focus-item,
  .scene-focus .focus-item:nth-child(even){flex-direction:column;}
  .focus-img{width:100%;}
}