/* =======================================================
   SOMBRE & CINÉMA — palette unique, assumée
   ======================================================= */
:root{
  --black:      #07090B;
  --black-2:    #0C1013;
  --black-3:    #121719;
  --white:      #F4F7F6;
  --grey:       #9AA6AB;
  --grey-dim:   #5E6A70;
  --hair:       rgba(244,247,246,.13);
  --hair-soft:  rgba(244,247,246,.07);
  --ice:        #6FD8CD;
  --gm:         #E8A03C;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:"Source Serif 4",Georgia,serif;font-size:17.5px;line-height:1.62;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,.disp{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;margin:0;text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ice);outline-offset:4px}

.wrap{width:min(1280px,90vw);margin-inline:auto}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--grey-dim);margin:0;
}
.eyebrow.ice{color:var(--ice)}
.eyebrow.gm{color:var(--gm)}

/* révélation au scroll */
.js .rv{opacity:0;transform:translateY(28px)}
.js .rv.in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.js .rv.d1.in{transition-delay:.10s}.js .rv.d2.in{transition-delay:.20s}
.js .rv.d3.in{transition-delay:.30s}.js .rv.d4.in{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* =============== NAV =============== */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
header.nav.stuck{background:rgba(7,9,11,.86);backdrop-filter:blur(14px);border-bottom-color:var(--hair-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;
  width:min(1280px,90vw);margin-inline:auto}
.brand{font-family:Archivo,sans-serif;font-weight:900;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
nav.links{display:flex;gap:30px}
nav.links a{font-family:Archivo,sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);transition:color .2s}
nav.links a:hover{color:var(--white)}
@media (max-width:1080px){nav.links{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:Archivo,sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--white);color:var(--white);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.btn:hover{background:var(--white);color:var(--black);transform:translateY(-2px)}
.btn.fill{background:var(--white);color:var(--black)}
.btn.fill:hover{background:transparent;color:var(--white)}
.btn.ghost{border-color:var(--hair);color:var(--grey)}
.btn.ghost:hover{border-color:var(--white);background:transparent;color:var(--white)}
.btn.gmfill{background:var(--gm);border-color:var(--gm);color:#0B0E10}
.btn.gmfill:hover{background:transparent;color:var(--gm)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* =============== HERO =============== */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;
  transform:scale(1.06);animation:drift 26s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.hero-img{animation:none}}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(to top,var(--black) 2%,rgba(7,9,11,.72) 26%,rgba(7,9,11,.15) 58%,rgba(7,9,11,.42) 100%),
  linear-gradient(to right,rgba(7,9,11,.72) 0%,rgba(7,9,11,.05) 60%)}
.hero-in{position:relative;z-index:3;width:min(1280px,90vw);margin-inline:auto;padding-bottom:clamp(48px,8vh,96px)}
h1{
  font-size:clamp(56px,13.5vw,190px);font-weight:900;line-height:.80;letter-spacing:-.055em;
  text-transform:uppercase;margin:18px 0 0;
}
h1 em{display:block;font-style:normal;color:var(--ice);
  font-size:clamp(40px,9vw,128px);letter-spacing:-.05em;margin-top:.06em}
.hero-lede{font-size:clamp(17px,1.5vw,20px);color:var(--grey);max-width:44ch;margin:26px 0 0;line-height:1.5}
.hero-lede b{color:var(--white);font-weight:400}
.hero-in .cta-row{margin-top:34px}
.scroll-cue{position:absolute;right:5vw;bottom:clamp(48px,8vh,96px);z-index:3;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey-dim);writing-mode:vertical-rl;display:flex;align-items:center;gap:14px}
.scroll-cue::after{content:"";width:1px;height:64px;background:linear-gradient(var(--grey-dim),transparent)}
@media (max-width:900px){.scroll-cue{display:none}}
.credit{position:absolute;right:5vw;bottom:14px;z-index:4;font-family:"JetBrains Mono",monospace;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,247,246,.32)}

/* =============== SECTIONS =============== */
section{position:relative}
.pad{padding-block:clamp(84px,12vh,168px)}
.sec-title{font-size:clamp(34px,6.4vw,86px);font-weight:900;line-height:.92;letter-spacing:-.045em;text-transform:uppercase}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head p.sub{margin:0;color:var(--grey);max-width:40ch;font-size:16.5px}
.rule{height:1px;background:var(--hair-soft);border:0;margin:0}

/* =============== CARNET DE ROUTE / PROFIL =============== */
.route{background:var(--black-2);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.route-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:26px}
.route h2{font-size:clamp(20px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
svg.prof{display:block;width:100%;height:auto;overflow:visible}
.prof-line{fill:none;stroke:var(--ice);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.prof-fill{fill:url(#ice-grad)}
.prof-grid{stroke:rgba(244,247,246,.10);stroke-width:1}
.prof-lbl{font-family:"JetBrains Mono",monospace;font-size:9px;fill:var(--grey-dim);letter-spacing:.14em}
.prof-lbl.hi{fill:var(--ice);font-weight:700;font-size:10px}
.prof-dot{fill:var(--black-2);stroke:var(--ice);stroke-width:2}
.js .prof-line{stroke-dasharray:1500;stroke-dashoffset:1500}
.js .in .prof-line{animation:draw 2.6s cubic-bezier(.35,0,.15,1) forwards}
.js .prof-fill,.js .prof-dot,.js .prof-lbl.hi{opacity:0}
.js .in .prof-fill,.js .in .prof-dot,.js .in .prof-lbl.hi{animation:appear .9s ease 2.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js .prof-line{stroke-dasharray:none;stroke-dashoffset:0}
  .js .prof-fill,.js .prof-dot,.js .prof-lbl.hi{opacity:1}
}
.waypoints{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft);margin-top:34px}
@media (max-width:760px){.waypoints{grid-template-columns:repeat(2,1fr)}}
.wp{background:var(--black-2);padding:20px 18px}
.wp .no{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;color:var(--grey-dim)}
.wp .pl{font-family:Archivo,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;margin-top:8px;text-transform:uppercase}
.wp .al{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--ice);margin-top:4px}

/* =============== CHIFFRES =============== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft);
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--black);padding:clamp(28px,4vw,48px) clamp(20px,2.5vw,32px)}
.stat .n{font-family:Archivo,sans-serif;font-weight:900;font-size:clamp(38px,5.4vw,74px);
  line-height:.9;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.stat .n span{font-size:.36em;font-weight:700;letter-spacing:0;margin-left:.28em;color:var(--grey)}
.stat .k{margin-top:16px;font-size:15px;color:var(--grey);line-height:1.45;max-width:24ch}

/* =============== CARTES ACTU =============== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media (max-width:920px){.cards{grid-template-columns:1fr}}
.card{display:block;position:relative;overflow:hidden;background:var(--black-2);border:1px solid var(--hair-soft)}
.card .frame{position:relative;aspect-ratio:4/3;overflow:hidden}
.card .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.card:hover .frame img{transform:scale(1.06)}
.card .frame.empty{display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(135deg,#0F1417 0 12px,#0C1013 12px 24px);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-dim);padding:20px}
.card-body{padding:26px 26px 30px}
.card .tag{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim)}
.card .tag.live{color:var(--ice)}
.card .tag.gmc{color:var(--gm)}
.card h3{font-size:clamp(20px,1.9vw,25px);font-weight:800;line-height:1.12;letter-spacing:-.025em;margin:14px 0 0}
.card p{margin:12px 0 0;font-size:15.5px;color:var(--grey)}
.card .more{display:inline-block;margin-top:20px;font-family:Archivo,sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
.card .more::after{content:" →";color:var(--ice)}

/* =============== FEATURE BISTARAI =============== */
.feature{display:grid;grid-template-columns:44% 1fr;align-items:stretch;gap:0}
@media (max-width:920px){.feature{grid-template-columns:1fr}}
.feature .shot{position:relative;min-height:min(88vh,760px);overflow:hidden}
.feature .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .txt{padding:clamp(48px,7vw,110px) clamp(28px,5vw,88px);display:flex;flex-direction:column;justify-content:center}
.feature h2{font-size:clamp(38px,6.4vw,92px);font-weight:900;line-height:.88;letter-spacing:-.05em;text-transform:uppercase;margin-top:20px}
.feature h2 em{display:block;font-style:normal;color:var(--grey-dim);font-size:.42em;letter-spacing:.02em;margin-top:.5em;font-weight:700}
.pull{margin:34px 0 0;font-size:clamp(19px,2.1vw,26px);line-height:1.32;font-style:italic;color:var(--white);max-width:26ch;
  padding-left:26px;border-left:1px solid var(--ice)}
.feature p.body{margin:28px 0 0;color:var(--grey);max-width:52ch}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:0;margin-top:40px;justify-content:start}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{padding-right:36px;margin-right:36px;border-right:1px solid var(--hair-soft)}
.fact:last-child{border-right:0;padding-right:0;margin-right:0}
.fact dt{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim)}
.fact dd{margin:8px 0 0;font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.02em}
.feature .cta-row{margin-top:44px}

/* =============== BANDE GLACIER =============== */
.glacier{position:relative;min-height:min(96svh,880px);display:grid;place-items:center;overflow:hidden}
.glacier-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.glacier-veil{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 55%,rgba(7,9,11,.30) 0%,rgba(7,9,11,.74) 62%,var(--black) 100%)}
.glacier-in{position:relative;z-index:3;text-align:center;width:min(900px,88vw);padding-block:80px}
.glacier-in p.line{font-size:clamp(26px,4.4vw,58px);font-weight:900;font-family:Archivo,sans-serif;
  line-height:1.02;letter-spacing:-.04em;text-transform:uppercase;margin:20px 0 0}
.glacier-in p.sub{color:var(--grey);margin:22px auto 0;max-width:44ch;font-size:16.5px}

/* =============== GALERIE PLEINE LARGEUR =============== */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
@media (max-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;position:relative;overflow:hidden;aspect-ratio:2/3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1),filter .6s ease;filter:saturate(.88)}
.gal figure:hover img{transform:scale(1.07);filter:saturate(1)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
  background:linear-gradient(transparent,rgba(7,9,11,.88));
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--white);
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.gal figure:hover figcaption{opacity:1;transform:none}

/* =============== PALMARÈS =============== */
.race{display:grid;grid-template-columns:92px 1fr 250px 150px;gap:24px;align-items:center;
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--hair-soft);position:relative;transition:padding-left .35s ease}
.race:first-child{border-top:1px solid var(--hair-soft)}
.race:hover{padding-left:18px}
.race::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ice);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s ease}
.race:hover::before{transform:scaleY(1);transform-origin:top}
.race .yr{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--grey-dim)}
.race .nm{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(19px,2.1vw,28px);
  letter-spacing:-.03em;text-transform:uppercase;line-height:1.05}
.race .ds{color:var(--grey);font-size:14.5px}
.race .rs{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--ice);text-align:right}
.race .rs.none{color:var(--grey-dim)}
@media (max-width:920px){
  .race{grid-template-columns:70px 1fr;gap:4px 18px}
  .race .ds,.race .rs{grid-column:2}.race .rs{text-align:left;margin-top:6px}
}

/* =============== GRAVELMAN =============== */
.gmb{position:relative;overflow:hidden;background:#0A0D0F;padding-bottom:0}
.gmb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.gmb-veil{position:absolute;inset:0;background:
  linear-gradient(to right,rgba(8,11,13,.96) 0%,rgba(8,11,13,.90) 46%,rgba(8,11,13,.66) 100%),
  linear-gradient(to bottom,rgba(8,11,13,.85) 0%,rgba(8,11,13,.35) 40%,rgba(8,11,13,.95) 100%)}
.gmb-in{position:relative;z-index:3}
.gm-word{font-size:clamp(44px,10.6vw,152px);font-weight:900;line-height:.84;letter-spacing:-.055em;text-transform:uppercase}
.gm-word em{display:block;font-style:normal;color:var(--gm);font-size:.42em;letter-spacing:.16em;font-weight:700;margin-top:.7em}
.gm-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(30px,4vw,52px)}
@media (max-width:920px){.gm-grid{grid-template-columns:1fr}}
.gm-lede{color:var(--grey);max-width:46ch;margin:0;font-size:17px}
.fmts{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.fmt{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;
  border:1px solid var(--hair);padding:8px 12px;color:var(--grey)}
.cal{border-top:1px solid var(--hair)}
.cal-row{display:grid;grid-template-columns:104px 1fr auto;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hair-soft);transition:padding-left .3s ease}
.cal-row:hover{padding-left:12px}
.cal-row .d{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--gm)}
.cal-row .e{font-family:Archivo,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;text-transform:uppercase}
.cal-row .l{font-size:14px;color:var(--grey-dim)}
.cal-note{margin-top:18px;font-size:14px;color:var(--grey-dim);max-width:46ch}
.gm-strip{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:clamp(48px,6vw,84px)}
.gm-strip figure{margin:0;overflow:hidden;aspect-ratio:3/4}
.gm-strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03);transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .5s}
.gm-strip figure:hover img{transform:scale(1.06);filter:saturate(1)}
@media (max-width:700px){.gm-strip{grid-template-columns:repeat(2,1fr)}}

/* =============== OFFRES =============== */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-soft);
  border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
@media (max-width:920px){.offers{grid-template-columns:1fr}}
.offer{background:var(--black);padding:clamp(34px,4vw,54px) clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:14px;
  transition:background .35s ease}
.offer:hover{background:var(--black-3)}
.offer .num{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;color:var(--grey-dim)}
.offer h3{font-size:clamp(24px,2.6vw,34px);font-weight:900;letter-spacing:-.035em;text-transform:uppercase;line-height:1}
.offer p{margin:0;color:var(--grey);font-size:15.5px}
.offer .more{margin-top:auto;padding-top:18px;font-family:Archivo,sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase}
.offer .more::after{content:" →";color:var(--ice)}

/* =============== PRESSE / PARTENAIRES =============== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
@media (max-width:920px){.quotes{grid-template-columns:1fr}}
.q p{margin:0;font-size:clamp(18px,1.8vw,23px);font-style:italic;line-height:1.34}
.q cite{display:block;margin-top:16px;font-style:normal;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim)}
.marquee{margin-top:clamp(48px,6vw,86px);overflow:hidden;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);padding-block:22px}
.marquee-track{display:flex;gap:52px;white-space:nowrap;animation:slide 38s linear infinite;width:max-content}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;white-space:normal}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee span{font-family:Archivo,sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey-dim)}
.partners{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:34px}
.partners span{font-family:Archivo,sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;
  color:var(--grey-dim);border:1px solid var(--hair-soft);padding:10px 15px}

/* =============== CONTACT =============== */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:start}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}
.contact h2{font-size:clamp(34px,5.6vw,74px);font-weight:900;line-height:.92;letter-spacing:-.045em;text-transform:uppercase}
.contact p.sub{color:var(--grey);max-width:40ch;margin-top:26px}
.mailto{display:inline-block;margin-top:26px;font-family:"JetBrains Mono",monospace;font-size:15px;
  border-bottom:1px solid var(--ice);padding-bottom:4px}
.form{display:flex;flex-direction:column;gap:18px}
.form label{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim)}
.form input,.form select,.form textarea{
  font-family:inherit;font-size:16px;padding:13px 0;width:100%;color:var(--white);
  background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;
}
.form select{font-family:Archivo,sans-serif}
.form select option{background:var(--black-2);color:var(--white)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-bottom-color:var(--ice)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.form button{margin-top:8px;align-self:flex-start;cursor:pointer;font-family:Archivo,sans-serif}

footer{border-top:1px solid var(--hair-soft);padding-block:44px 56px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.foot nav a{font-family:Archivo,sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-dim)}
.foot nav a:hover{color:var(--white)}
.foot small{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--grey-dim)}

/* =======================================================
   PAGES INTÉRIEURES
   ======================================================= */
.page-hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  padding-block:clamp(128px,17vh,190px) clamp(44px,6vh,76px);
  border-bottom:1px solid var(--hair-soft);
  background:radial-gradient(130% 110% at 10% 0%,var(--black-3) 0%,var(--black) 64%);
}
.page-hero.with-img{
  min-height:clamp(440px,66svh,680px);
  padding-block:clamp(150px,20vh,220px) clamp(44px,7vh,84px);
  background:var(--black);border-bottom:0;
}
.page-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.page-hero .veil{position:absolute;inset:0;background:
  linear-gradient(to top,var(--black) 3%,rgba(7,9,11,.76) 30%,rgba(7,9,11,.24) 66%,rgba(7,9,11,.52) 100%),
  linear-gradient(to right,rgba(7,9,11,.78) 0%,rgba(7,9,11,.08) 62%)}
.page-hero .inner{position:relative;z-index:3;width:min(1280px,90vw);margin-inline:auto}
.page-title{
  font-size:clamp(40px,8.4vw,112px);font-weight:900;line-height:.88;letter-spacing:-.05em;
  text-transform:uppercase;margin:16px 0 0;
}
.page-title em{display:block;font-style:normal;color:var(--ice);
  font-size:.46em;letter-spacing:-.025em;line-height:1;margin-top:.2em}
.page-lede{font-size:clamp(16.5px,1.4vw,19.5px);color:var(--grey);max-width:54ch;margin:24px 0 0;line-height:1.52}

/* ---------- Corps de texte long ---------- */
.prose{max-width:70ch;margin-inline:auto}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.15em;color:#D6DEDC}
.prose p.big{font-size:clamp(20px,2.2vw,27px);line-height:1.42;color:var(--white);
  font-weight:400;margin-bottom:1.5em;text-wrap:pretty}
.prose h2{font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1.06;margin:2.2em 0 .7em;padding-top:1.1em;
  border-top:1px solid var(--hair-soft)}
.prose h3{font-size:clamp(17px,1.8vw,21px);font-weight:800;letter-spacing:-.02em;margin:1.8em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.15em;color:#D6DEDC}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--grey-dim)}
.prose a:not(.btn):not(.backlink):not(.mailto){
  color:var(--white);border-bottom:1px solid var(--ice);padding-bottom:1px;transition:color .2s}
.prose a:not(.btn):not(.backlink):not(.mailto):hover{color:var(--ice)}
.prose blockquote{margin:1.6em 0;padding-left:22px;border-left:2px solid var(--ice);
  font-style:italic;color:var(--white)}
.backlink{display:inline-block;margin-bottom:26px;font-family:"JetBrains Mono",monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim);transition:color .2s}
.backlink:hover{color:var(--ice)}

/* ---------- Chiffres clés ---------- */
.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft);
  border:1px solid var(--hair-soft);margin:0 0 clamp(44px,6vw,72px)}
.keyfacts>div{background:var(--black);padding:clamp(20px,2.4vw,30px)}
.keyfacts dt{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey-dim)}
.keyfacts dd{margin:10px 0 0;font-family:Archivo,sans-serif;font-weight:800;
  font-size:clamp(18px,2vw,25px);letter-spacing:-.03em;line-height:1.05}
@media (max-width:760px){.keyfacts{grid-template-columns:repeat(2,1fr)}}

/* ---------- Encadré « à compléter » ---------- */
.todo{display:none;margin:40px 0 0;padding:20px 22px;border:1px dashed var(--hair);
  background:rgba(232,160,60,.05);color:var(--grey);font-size:14.5px;line-height:1.55}
.todo b{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gm);font-weight:400;margin-bottom:9px}

/* ---------- Grille de cartes (actualités, matériel…) ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-soft);
  border:1px solid var(--hair-soft)}
@media (max-width:920px){.cardgrid{grid-template-columns:1fr}}
.pcard{background:var(--black);padding:clamp(28px,3.2vw,44px);display:flex;flex-direction:column;gap:12px;
  transition:background .35s ease}
.pcard:hover{background:var(--black-3)}
.pcard .k{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-dim)}
.pcard h3{font-size:clamp(19px,2vw,25px);font-weight:900;letter-spacing:-.035em;line-height:1.1;
  text-transform:uppercase}
.pcard p{margin:0;color:var(--grey);font-size:15px}
.pcard::after{content:"Lire →";margin-top:auto;padding-top:16px;font-family:Archivo,sans-serif;
  font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice)}

/* =======================================================
   NAVIGATION MOBILE — les liens restent accessibles
   ======================================================= */
@media (max-width:1080px){
  header.nav{background:rgba(7,9,11,.9);backdrop-filter:blur(14px);border-bottom-color:var(--hair-soft)}
  .nav-in{flex-wrap:wrap;height:auto;gap:12px 18px;padding-top:14px;padding-bottom:2px}
  .nav-in .btn{padding:11px 18px;font-size:10.5px}
  nav.links{
    display:flex;order:3;flex:1 0 100%;gap:22px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    padding-bottom:11px;margin-bottom:-1px;
  }
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{white-space:nowrap;font-size:10.5px;letter-spacing:.14em}
}
@media (max-width:1080px){
  .hero-in,.page-hero .inner,.glacier-in{padding-top:12px}
  .page-hero{padding-top:clamp(150px,20vh,200px)}
}

/* =======================================================
   GARDE-FOUS — jamais de débordement horizontal
   ======================================================= */
html,body{max-width:100%}
img,svg,video,iframe{max-width:100%}
.prose img{height:auto;margin:1.6em 0}
table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
pre{overflow-x:auto}
h1,h2,h3,.page-title,.sec-title,.gm-word{overflow-wrap:break-word}

/* petits écrans : on desserre la typo géante */
@media (max-width:420px){
  h1{letter-spacing:-.04em}
  .page-title{letter-spacing:-.04em}
  .race{grid-template-columns:56px 1fr;gap:3px 14px}
  .cal-row{grid-template-columns:80px 1fr;gap:4px 14px}
  .cal-row .l{grid-column:2}
}


/* ---------- Encadrés de travail : privés (stevenlehyaric.com/?todo) ---------- */
.todo-on .todo{display:block}
.todo-on .todo::after{content:"Visible uniquement pour toi \2014 ajoute #no-todo à l\2019URL pour masquer";
  display:block;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey-dim)}

/* ---------- Derniers ajustements typographiques ---------- */
@media (max-width:560px){
  .eyebrow{letter-spacing:.16em;font-size:10px}
  .credit{letter-spacing:.1em}
}
.hero{height:auto;min-height:100svh}
.credit,.glacier .credit{text-shadow:0 1px 6px rgba(7,9,11,.85)}
.gal figcaption,.gm-strip figcaption{will-change:opacity}

/* ---------- Barre de navigation : opaque une fois collée (plus de texte qui transparaît) ---------- */
header.nav.stuck{background:rgba(7,9,11,.97);backdrop-filter:blur(20px) saturate(1.15)}
@supports not (backdrop-filter:blur(2px)){header.nav.stuck{background:#07090B}}
@media (max-width:1080px){
  header.nav{background:rgba(7,9,11,.97);backdrop-filter:blur(20px) saturate(1.15)}
}

/* ---------- Hero : jamais de collision avec la barre de navigation ---------- */
.hero{align-items:flex-end;padding-top:clamp(104px,14vh,150px)}
.hero-in{padding-top:0}
h1{font-size:clamp(46px,min(13.5vw,19svh),190px)}
h1 em{font-size:clamp(32px,min(9vw,12.5svh),128px)}
.brand{white-space:nowrap;flex:0 0 auto}
.nav-in>nav.links{min-width:0;flex:1 1 auto;justify-content:center}
.nav-in>.btn{flex:0 0 auto}
@media (max-width:1080px){
  .hero{padding-top:clamp(132px,18vh,170px)}
  .nav-in>nav.links{justify-content:flex-start}
}
/* écrans larges mais bas (portables 13") : on garde le hero lisible d'un coup d'œil */
@media (max-height:820px) and (min-width:1081px){
  .hero-lede{font-size:16.5px;margin-top:20px}
  .hero-in{padding-bottom:clamp(36px,6vh,64px)}
}

/* ---------- Lisibilité de la nav par-dessus une photo claire ---------- */
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,9,11,.78) 0%,rgba(7,9,11,.34) 62%,rgba(7,9,11,0) 100%);
  transition:opacity .4s ease}
header.nav.stuck::before{opacity:0}
nav.links a{color:rgba(244,247,246,.8)}
nav.links a:hover{color:var(--white)}
.brand,nav.links a,.credit,.scroll-cue{text-shadow:0 1px 8px rgba(7,9,11,.55)}
header.nav.stuck .brand,header.nav.stuck nav.links a{text-shadow:none}

/* ---------- Barre de nav : espacement garanti entre marque, liens et bouton ---------- */
.nav-in{gap:clamp(14px,2vw,28px)}
.nav-in>nav.links{justify-content:center;gap:clamp(14px,1.7vw,30px);padding-inline:clamp(10px,1.6vw,28px)}
@media (min-width:1081px) and (max-width:1460px){
  nav.links a{font-size:10.5px;letter-spacing:.11em}
  .nav-in>.btn{padding:13px 20px;font-size:10.5px}
}

/* ---------- Page courante dans la navigation ---------- */
nav.links a[aria-current="page"]{color:var(--white)}
nav.links a[aria-current="page"]::after{content:"";display:block;height:1px;margin-top:5px;
  background:var(--ice);opacity:.9}

/* ---------- Réseaux sociaux en pied de page ---------- */
.foot .social{display:flex;flex-wrap:wrap;gap:18px;order:2}
.foot .social a{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);border-bottom:1px solid transparent;
  padding-bottom:2px;transition:color .2s,border-color .2s}
.foot .social a:hover{color:var(--white);border-bottom-color:var(--ice)}
.foot small{order:3;flex-basis:100%}
@media (max-width:700px){.foot .social{gap:14px}}