/*
Theme Name: Space Event
Theme URI: https://space-event.fr
Author: Space Sport Art Culture Event
Description: Theme du site Space Event — Martinique. Sport, art et culture : camps, combines, Hoops 4 Women, All-Star Game, Sport-Sante et insertion par le sport.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: space-event
*/

:root{
  --photo-dunk: url(assets/img/photo-dunk.jpg);
  --photo-asg-game: url(assets/img/photo-asg-game.jpg);
  --photo-sky: url(assets/img/photo-sky.jpg);
  --photo-wide: url(assets/img/photo-wide.jpg);
  --photo-outdoor: url(assets/img/photo-outdoor.jpg);
  --photo-gym-wide: url(assets/img/photo-gym-wide.jpg);
  --photo-shoot: url(assets/img/photo-shoot.jpg);
  --photo-cover-a: url(assets/img/photo-cover-a.jpg);
  --photo-cover-b: url(assets/img/photo-cover-b.jpg);
  --photo-h4w-a: url(assets/img/photo-h4w-a.jpg);
  --photo-h4w-b: url(assets/img/photo-h4w-b.jpg);
  --photo-h4w-c: url(assets/img/photo-h4w-c.jpg);
  --photo-h4w-d: url(assets/img/photo-h4w-d.jpg);
  --photo-h4w-e: url(assets/img/photo-h4w-e.jpg);
  --photo-h4w-box: url(assets/img/photo-h4w-box.jpg);
  --photo-h4w-coach: url(assets/img/photo-h4w-coach.jpg);
  --photo-derond: url(assets/img/photo-derond.jpg);
  --photo-moise: url(assets/img/photo-moise.jpg);
  --photo-coach: url(assets/img/photo-coach.jpg);
  --photo-promo: url(assets/img/photo-promo.jpg);
  --photo-sj-b1: url(assets/img/photo-sj-b1.jpg);
  --photo-sj-b2: url(assets/img/photo-sj-b2.jpg);
  --photo-sj-b3: url(assets/img/photo-sj-b3.jpg);
  --photo-sj-b4: url(assets/img/photo-sj-b4.jpg);
  --photo-sj-i1: url(assets/img/photo-sj-i1.jpg);
  --photo-sj-i2: url(assets/img/photo-sj-i2.jpg);
  --photo-sj-i3: url(assets/img/photo-sj-i3.jpg);
  --photo-sj-i4: url(assets/img/photo-sj-i4.jpg);
  --photo-camille: url(assets/img/photo-camille.jpg);
  --photo-antonin: url(assets/img/photo-antonin.jpg);
  --photo-board: url(assets/img/photo-board.jpg);
  --photo-waks-row: url(assets/img/photo-waks-row.jpg);
  --photo-waks-0: url(assets/img/photo-waks-0.jpg);
  --photo-waks-1: url(assets/img/photo-waks-1.jpg);
  --photo-waks-2: url(assets/img/photo-waks-2.jpg);
  --photo-waks-3: url(assets/img/photo-waks-3.jpg);
  --photo-waks-4: url(assets/img/photo-waks-4.jpg);
  --photo-waks-5: url(assets/img/photo-waks-5.jpg);
  --photo-waks-6: url(assets/img/photo-waks-6.jpg);
  --photo-waks-7: url(assets/img/photo-waks-7.jpg);
  --photo-waks-8: url(assets/img/photo-waks-8.jpg);
  --photo-bbk-row: url(assets/img/photo-bbk-row.jpg);
  --photo-bbk-0: url(assets/img/photo-bbk-0.jpg);
  --photo-bbk-1: url(assets/img/photo-bbk-1.jpg);
  --photo-bbk-2: url(assets/img/photo-bbk-2.jpg);
  --photo-bbk-3: url(assets/img/photo-bbk-3.jpg);
  --photo-bbk-4: url(assets/img/photo-bbk-4.jpg);
  --photo-bbk-5: url(assets/img/photo-bbk-5.jpg);
  --photo-bbk-6: url(assets/img/photo-bbk-6.jpg);
  --photo-bbk-7: url(assets/img/photo-bbk-7.jpg);
  --photo-bbk-8: url(assets/img/photo-bbk-8.jpg);
}


/* ───────── Charte Space Event ────────────────────────────
   Couleurs relevées sur le logo : le dégradé va du jaune
   au bleu en passant par le lime et le cyan. Fond noir.
   Parti pris assumé : un seul thème, tout est peint. */
:root{
  /* dégradé du logo, en 8 paliers */
  --s1:#F7E63A;  --s2:#D8E141;  --s3:#A9DC4B;  --s4:#63D08D;
  --s5:#35C7BE;  --s6:#1CBEEA;  --s7:#149FE6;  --s8:#0B86DC;

  --y:    var(--s1);
  --lime: var(--s3);
  --teal: var(--s5);
  --cyan: var(--s6);
  --blue: var(--s8);
  --grad: linear-gradient(102deg, var(--s1), var(--s3) 34%, var(--s5) 60%, var(--s6) 78%, var(--s8));

  /* sous-marque Hoops 4 Women */
  --pop:    #A78BFA;
  --violet: #A78BFA;

  /* alias hérités : tout le document passe par eux */
  --sky:   var(--s6);
  --flame: var(--s1);
  --sun:   var(--s2);
  --palm:  var(--s3);
  --amber: var(--s2);
  --green: var(--s3);

  --bg:       #04070A;
  --void:     #04070A;
  --void-2:   #0A0F14;
  --surf:     #0A0F14;
  --surf-2:   #101820;
  --line:     #1B2630;
  --fg:       #ECF4F7;
  --fg-soft:  #92A6B1;
  --fg-faint: #5F7480;

  --spine:  78px;
  --maxw:   1240px;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Chivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
h1,h2,h3,h4{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  font-weight:900; line-height:.85; letter-spacing:-.012em;
  text-transform:uppercase; text-wrap:balance; margin:0;
}
p{ margin:0; }
.serif{
  font-family:"Fraunces",Georgia,serif; font-weight:300;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  line-height:1.42; letter-spacing:-.01em;
}
.mono{
  font-family:"Chivo Mono",ui-monospace,monospace;
  font-size:.685rem; letter-spacing:.19em; text-transform:uppercase; font-weight:600;
}
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px; }
.sec{ padding-block:clamp(80px,10vw,150px); }

/* les ancres ne passent plus sous la barre collante */
[id]{ scroll-margin-top:86px; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

::selection{ background:var(--cyan); color:#04070A; }

/* grain : le noir n'est jamais tout à fait plat */
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* progression de lecture, aux couleurs du logo */
.prog-bar{
  position:fixed; left:0; top:0; height:2px; width:100%; z-index:200;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  pointer-events:none;
}

/* filet de séparation dégradé */
.rule{ height:1px; border:0; margin:0; background:linear-gradient(90deg, var(--line), var(--cyan), var(--line)); opacity:.5; }

/* ───────── Dos du programme (rail vertical) ─────────────── */
.spine{
  position:fixed; left:0; top:0; bottom:0; width:var(--spine); z-index:70;
  border-right:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  display:none; flex-direction:column; align-items:center;
  padding-block:20px; gap:20px;
}
@media (min-width:1180px){ .spine{ display:flex; } body{ padding-left:var(--spine); } }
.spine__idx{
  writing-mode:vertical-rl; text-orientation:mixed;
  display:flex; gap:26px; margin-block:auto;
  font-family:"Chivo Mono",monospace; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600;
}
.spine__idx a{ text-decoration:none; color:var(--fg-faint); transition:color .25s; position:relative; padding-left:13px; }
.spine__idx a:hover{ color:var(--fg-soft); }
.spine__idx a.on{ color:var(--fg); }
.spine__idx a::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-3px;
  width:6px; height:6px; border-radius:50%; background:var(--grad);
  opacity:0; transform:scale(.3); transition:opacity .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.spine__idx a.on::before{ opacity:1; transform:scale(1); }
.spine__mark{ writing-mode:vertical-rl; color:var(--fg-faint); }
.spine__line{
  position:absolute; left:50%; margin-left:-.5px; top:60px; bottom:60px; width:1px;
  background:var(--line); overflow:hidden;
}
.spine__line i{ display:block; width:100%; height:100%; background:var(--grad); transform:scaleY(0); transform-origin:top; }

/* ───────── Barre haute ──────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.top__in{ display:flex; align-items:center; gap:20px; height:62px; }
.mark{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.mark__emblem{ height:34px; width:34px; object-fit:contain; display:block; flex:none; }
.mark__txt{
  font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:1.35rem;
  text-transform:uppercase; line-height:1; letter-spacing:.01em; color:var(--fg);
}
.mark__txt em{
  font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
@media (max-width:520px){ .mark__txt{ display:none; } }
.brandmark{ height:clamp(52px,6.2vw,78px); width:auto; align-self:flex-start; flex:none; }
.brandmark--foot{ height:34px; width:auto; flex:none; }
.top__nav{ display:flex; gap:20px; }
.top__nav a{
  position:relative; text-decoration:none; color:var(--fg-soft);
  font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  transition:color .2s; padding-block:4px;
}
.top__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.top__nav a:hover{ color:var(--fg); }
.top__nav a:hover::after{ transform:scaleX(1); }
.top__shop{ color:var(--fg) !important; display:inline-flex; align-items:center; gap:7px; }
.top__shop::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--grad); flex:none;
}
@media (max-width:1000px){ .top__nav{ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:900; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 20px; border:2px solid transparent; border-radius:2px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s, background .18s, color .18s, border-color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--sky{ background:var(--grad); color:#04070A; }
.btn--sky:hover{ filter:brightness(1.08) saturate(1.08); }
.btn--flame{ background:var(--grad); color:#04070A; }
.btn--flame:hover{ filter:brightness(1.08) saturate(1.08); }
.btn--edge{ border-color:var(--line); color:var(--fg); }
.btn--edge:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn--light{ border-color:rgba(236,244,247,.45); color:var(--fg); }
.btn--light:hover{ background:var(--fg); color:#04070A; border-color:var(--fg); }

/* ───────── Traitement photo commun ──────────────────────── */
.ph{ position:relative; overflow:hidden; background:var(--void-2); isolation:isolate; }
.ph__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04);
}
.ph__grade{
  position:absolute; inset:0; background:var(--grade,var(--sky));
  mix-blend-mode:soft-light; opacity:.5;
}
.ph__dim{ position:absolute; inset:0; background:linear-gradient(190deg, rgba(4,7,10,.12), rgba(4,7,10,.74)); }

/* ───────── Ouverture ────────────────────────────────────── */
.open{ position:relative; background:var(--bg); color:var(--fg); overflow:hidden; }
.open::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-14%; top:-24%; width:62%; height:96%;
  background:radial-gradient(closest-side, rgba(28,190,234,.16), transparent 72%);
  filter:blur(6px);
}
.open::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:16%; bottom:-30%; width:46%; height:80%;
  background:radial-gradient(closest-side, rgba(247,230,58,.10), transparent 72%);
}
.open__grid{
  display:grid; grid-template-columns:1.04fr .96fr; align-items:stretch;
  min-height:min(94vh,880px); position:relative; z-index:1;
}
@media (max-width:900px){ .open__grid{ grid-template-columns:1fr; } }
.open__type{
  display:flex; flex-direction:column; justify-content:center; gap:26px;
  padding:clamp(52px,7vw,90px) clamp(26px,5vw,64px);
  position:relative; z-index:2;
}
.gradline{ height:3px; width:148px; background:var(--grad); border-radius:2px; }
.open h1{ font-size:clamp(3.4rem,8.6vw,7.6rem); letter-spacing:-.022em; }
.open h1 span{ display:block; }
.open h1 .b{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; width:max-content; max-width:100%;
}
.open h1 .c{ color:transparent; -webkit-text-stroke:1.6px rgba(236,244,247,.42); }
.open__lede{ max-width:44ch; font-size:1.22rem; color:#B9CBD4; }
.open__cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:2px; }
.open__ph{ position:relative; min-height:440px; }
.open__ph .ph__img{ background-position:center 20%; }
.open__ph .ph__grade{ opacity:.34; }
.open__ph .ph__dim{ background:linear-gradient(100deg, var(--bg) 0%, rgba(4,7,10,.30) 44%, rgba(4,7,10,.05) 72%); }
@media (max-width:900px){ .open__ph .ph__dim{ background:linear-gradient(0deg, var(--bg) 4%, rgba(4,7,10,.18) 70%); } }
.open__credit{
  position:absolute; right:18px; bottom:16px; z-index:3;
  color:rgba(236,244,247,.55);
  display:flex; align-items:center; gap:8px;
}
.open__credit::before{ content:""; width:16px; height:1px; background:var(--cyan); }

/* ───────── Bandeau chiffres ─────────────────────────────── */
.tally{ background:var(--void-2); color:var(--fg); position:relative; }
.tally::before{ content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--grad); }
.tally__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.tally__c{ padding:28px 24px; border-right:1px solid var(--line); }
.tally__c:last-child{ border-right:0; }
.tally__n{
  font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:3.1rem; line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; width:max-content;
}
.tally__l{ margin-top:6px; color:var(--fg-faint); }

/* ───────── Titres de section ────────────────────────────── */
.hd{ display:flex; flex-wrap:wrap; gap:22px 48px; align-items:flex-end; margin-bottom:clamp(38px,5vw,64px); }
.hd__l{ flex:1 1 420px; }
.hd__r{ flex:1 1 320px; max-width:44ch; color:var(--fg-soft); }
.hd h2{ font-size:clamp(2.5rem,6.2vw,4.8rem); }
.kick{ display:block; color:var(--flame); margin-bottom:13px; }

/* ───────── Programmes : lignes numérotées ───────────────── */
.rows{ border-top:1px solid var(--line); }
.row{
  --c:var(--sky);
  display:grid; grid-template-columns:96px 300px 1fr auto;
  gap:0 30px; align-items:center;
  border-bottom:1px solid var(--line);
  padding:0; position:relative; text-decoration:none;
  transition:background .3s ease;
}
.row:hover{ background:color-mix(in srgb, var(--c) 9%, transparent); }
.row__n{
  font-family:"Big Shoulders Display",sans-serif; font-weight:900;
  font-size:2.6rem; line-height:1; color:var(--c); opacity:.45;
  font-variant-numeric:tabular-nums; padding-left:6px;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.row:hover .row__n{ opacity:1; transform:translateX(3px); }
.row__ph{ height:168px; position:relative; }
.row__ph .ph__grade{ opacity:.42; }
.row__ph .ph__dim{ background:linear-gradient(180deg, transparent 40%, rgba(4,7,10,.4)); }
.row__ph .ph__img{ transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.row__ph .ph__grade{ background:var(--c); }
.row::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c); transform:scaleY(0); transform-origin:top;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.row:hover::after{ transform:scaleY(1); }
.row__ph--logo{ display:grid; place-items:center; background:var(--void-2); }
.row__badge{ max-height:74%; max-width:64%; width:auto; transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.row:hover .row__badge{ transform:scale(1.07); }
.row:hover .row__ph .ph__img{ transform:scale(1.11); }
.row__txt{ padding-block:26px; display:flex; flex-direction:column; gap:7px; }
.row__tag{ color:var(--c); }
.row__txt h3{ font-size:2.15rem; }
.row__txt p{ color:var(--fg-soft); font-size:.95rem; max-width:56ch; }
.row__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:4px; color:var(--fg-faint); }
.row__go{
  padding-right:8px; font-size:1.7rem; color:var(--c);
  transition:transform .25s; font-family:"Big Shoulders Display",sans-serif;
}
.row:hover .row__go{ transform:translateX(7px); }
@media (max-width:960px){
  .row{ grid-template-columns:66px 1fr; gap:0 18px; }
  .row__ph{ grid-column:1 / -1; height:200px; order:-1; }
  .row__go{ display:none; }
  .row__txt{ padding-block:20px 26px; }
  .row__n{ font-size:2rem; padding-top:22px; align-self:start; }
}

/* ───────── Les camps en portraits ───────────────────────── */
.camps{ background:var(--surf); border-block:1px solid var(--line); }
.camp__note{ color:var(--fg-faint); margin:16px 0 14px; }
.banner{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border-radius:3px; overflow:hidden; padding:0; cursor:zoom-in;
  background:#000; border:1px solid var(--line);
  transition:border-color .3s ease;
}
.banner:hover{ border-color:var(--k, var(--cyan)); }
.banner__i{
  position:absolute; inset:0; display:block;
  background-size:cover; background-position:center 32%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.banner:hover .banner__i{ transform:scale(1.03); }
.banner__tag{
  position:absolute; left:14px; bottom:12px; z-index:2;
  color:var(--fg); display:flex; align-items:center; gap:8px;
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.banner__tag::before{ content:""; width:18px; height:2px; background:var(--k, var(--cyan)); }
@media (max-width:640px){ .banner{ aspect-ratio:16/9; } }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } }
.card{
  position:relative; aspect-ratio:3/4; border-radius:3px; overflow:hidden;
  background:#000; border:1px solid var(--line); padding:0; cursor:zoom-in;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.card:hover{ transform:translateY(-4px); border-color:var(--k, var(--cyan)); }
.card__i{
  position:absolute; inset:0; display:block;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__i{ transform:scale(1.045); }
.card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--k, var(--cyan)); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.card:hover::after{ transform:scaleX(1); }

/* agrandissement */
.lbx{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background-color:#030507;
  padding:clamp(56px,6vw,72px) clamp(20px,8vw,110px);
  animation:lbxIn .22s ease both;
}
@keyframes lbxIn{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .lbx{ animation:none } }
.lbx__img{
  width:100%; height:100%;
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.lbx__btn{
  position:absolute; z-index:2; cursor:pointer;
  background:rgba(10,15,20,.8); border:1px solid var(--line); color:var(--fg);
  border-radius:50%; display:grid; place-items:center; line-height:1;
  transition:border-color .2s, color .2s, background .2s;
}
.lbx__btn:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(10,15,20,.95); }
.lbx__x{ top:18px; right:20px; width:44px; height:44px; font-size:1.6rem; }
.lbx__prev,.lbx__next{ top:50%; margin-top:-24px; width:48px; height:48px; font-size:1.35rem; }
.lbx__prev{ left:clamp(10px,2vw,26px); }
.lbx__next{ right:clamp(10px,2vw,26px); }
.lbx__count{
  position:absolute; left:50%; transform:translateX(-50%); bottom:20px; z-index:2;
  color:var(--fg-faint); font-variant-numeric:tabular-nums;
}
.lbx__count b{ color:var(--fg); font-weight:600; }

/* ───────── Le combine en vidéo ──────────────────────────── */
.reel{ background:var(--surf); border-block:1px solid var(--line); }
.reel__grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(20px,3vw,38px); align-items:start; }
@media (max-width:880px){ .reel__grid{ grid-template-columns:1fr; } }
.reel__v{ margin:0; position:relative; }
.reel__v video{
  width:100%; aspect-ratio:9/16; object-fit:cover; display:block;
  background:var(--void); border-radius:3px;
}
.reel__btn{
  position:absolute; inset:0; width:100%; height:100%;
  background:linear-gradient(0deg, rgba(4,7,10,.5), rgba(4,7,10,.12));
  border:0; cursor:pointer; display:grid; place-items:center;
  border-radius:3px; transition:opacity .3s ease;
}
.reel__btn.hide{ opacity:0; pointer-events:none; }
.reel__tri{
  width:72px; height:72px; border-radius:50%;
  background:color-mix(in srgb, var(--sky) 92%, transparent);
  display:grid; place-items:center; transition:transform .2s ease;
}
.reel__tri::after{
  content:""; border-style:solid; border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #04070A; margin-left:5px;
}
.reel__btn:hover .reel__tri{ transform:scale(1.09); }
.reel__v figcaption{ margin-top:10px; color:var(--fg-faint); }
.reel__side{ display:flex; flex-direction:column; gap:clamp(20px,3vw,32px); }
.reel__stills{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .reel__stills{ grid-template-columns:1fr; } }
.reel__still{ aspect-ratio:4/3; border-radius:3px; }
.reel__note p{ color:var(--fg); }
.reel__list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--line); }
.reel__list li{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding-block:13px; border-bottom:1px solid var(--line); font-size:.92rem; }
.reel__list b{ font-family:"Chivo Mono",monospace; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--flame); font-weight:600; padding-top:4px; }
.reel__list span{ color:var(--fg-soft); }
@media (max-width:520px){ .reel__list li{ grid-template-columns:1fr; gap:3px; } }

/* ───────── Panneau photo pleine largeur ─────────────────── */
.panel{ position:relative; min-height:min(78vh,720px); display:flex; align-items:flex-end; color:#fff; }
.panel .ph__img{ background-position:center 40%; }
.panel .ph__grade{ opacity:.3; }
.panel .ph__dim{ background:linear-gradient(0deg, rgba(4,7,10,.94) 4%, rgba(4,7,10,.55) 48%, rgba(4,7,10,.30)); }
.panel__in{ position:relative; z-index:2; padding-block:clamp(46px,6vw,84px); width:100%; }
.panel h2{ font-size:clamp(2.6rem,7vw,5.6rem); }
.panel__lede{ max-width:46ch; margin-top:20px; color:#C6D8E0; font-size:1.18rem; }

/* ───────── Space Camp : trois temps ─────────────────────── */
.temps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:clamp(34px,4vw,52px); border:1px solid rgba(255,255,255,.22); }
.temp{ padding:26px 24px 30px; border-right:1px solid rgba(255,255,255,.22); display:flex; flex-direction:column; gap:11px; }
.temp:last-child{ border-right:0; }
@media (max-width:860px){ .temp{ border-right:0; border-bottom:1px solid rgba(255,255,255,.22); } .temp:last-child{ border-bottom:0; } }
.temp__d{ font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:2.7rem; line-height:1; color:var(--sky); font-variant-numeric:tabular-nums; }
.temp h3{ font-size:1.5rem; }
.temp ul{ margin:2px 0 0; padding-left:17px; display:flex; flex-direction:column; gap:5px; font-size:.9rem; color:#BCCFD8; }
.temp ul li::marker{ color:var(--flame); }

/* ───────── Le premier séjour : deux temps ───────────────── */
.sejour{ background:var(--surf); border-block:1px solid var(--line); }
.halves{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); }
@media (max-width:820px){ .halves{ grid-template-columns:1fr; gap:38px; } }
.half__h{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:11px; margin-bottom:14px; border-bottom:2px solid var(--k, var(--cyan));
}
.half__h span:first-child{ color:var(--fg); }
.half__n{ color:var(--fg-faint); }
.half__g{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.card__i--fill{ background-size:cover; }

/* ───────── Hoops 4 Women : bande de portraits ───────────── */
.h4w{ background:var(--surf); border-block:1px solid var(--line); }
.h4w__badge{
  display:inline-grid; place-items:center; margin-bottom:22px;
  background:#fff; border-radius:10px; padding:12px 16px;
  box-shadow:0 10px 34px -14px rgba(167,139,250,.55);
}
.h4w__badge img{ height:clamp(58px,7vw,78px); width:auto; display:block; }
.strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  margin-top:clamp(34px,4vw,54px);
}
.strip figure{ margin:0; }
.strip .ph{ aspect-ratio:4/5; border-radius:2px; }
.strip .ph__grade{ background:var(--pop); opacity:.24; mix-blend-mode:soft-light; }
.strip .ph__dim{ background:linear-gradient(180deg, transparent 55%, rgba(30,6,20,.42)); }
.strip figure:nth-child(even){ transform:translateY(26px); }
.strip figcaption{ margin-top:9px; color:var(--fg-faint); }
@media (max-width:900px){
  .strip{ grid-template-columns:repeat(2,1fr); }
  .strip figure:nth-child(even){ transform:none; }
  .strip figure:nth-child(5){ grid-column:1 / -1; }
  .strip figure:nth-child(5) .ph{ aspect-ratio:16/9; }
}

.beyond{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px); align-items:start;
  margin-top:clamp(46px,5vw,72px); padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--line);
}
@media (max-width:880px){ .beyond{ grid-template-columns:1fr 1fr; } .beyond__txt{ grid-column:1 / -1; } }
@media (max-width:520px){ .beyond{ grid-template-columns:1fr; } }
.beyond__txt h3{ font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:12px; }
.beyond__txt p{ color:var(--fg-soft); font-size:.95rem; }
.beyond__f{ margin:0; }
.beyond__f .ph{ aspect-ratio:4/3; border-radius:3px; }
.beyond__f .ph__grade{ opacity:.26; }
.beyond__f .ph__dim{ background:linear-gradient(180deg, transparent 55%, rgba(4,7,10,.5)); }
.beyond__f figcaption{ margin-top:9px; color:var(--fg-faint); }

/* ───────── Vision ───────────────────────────────────────── */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,70px); align-items:start; }
@media (max-width:900px){ .two{ grid-template-columns:1fr; } }
.pull{ font-size:clamp(1.5rem,2.9vw,2.15rem); }
.pull b{ font-weight:600; font-style:normal; color:var(--flame); }
.creed{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.creed__i{ display:grid; grid-template-columns:52px 1fr; gap:16px; padding-block:20px; border-bottom:1px solid var(--line); }
.creed--wide .creed__i{ grid-template-columns:112px 1fr; }
@media (max-width:520px){ .creed--wide .creed__i{ grid-template-columns:1fr; gap:5px; } }
.creed__n{ font-family:"Chivo Mono",monospace; font-size:.68rem; letter-spacing:.15em; color:var(--flame); font-weight:600; padding-top:5px; }
.creed__i h4{ font-family:"Chivo",sans-serif; font-weight:900; font-size:1rem; text-transform:none; letter-spacing:0; line-height:1.3; margin-bottom:4px; }
.creed__i p{ font-size:.92rem; color:var(--fg-soft); }

/* ───────── Le fil conducteur ────────────────────────────── */
.chain__list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.chain__list li{
  background:var(--bg); display:grid; grid-template-columns:64px 190px 1fr; align-items:center;
  gap:0 22px; padding:18px 22px 18px 0; position:relative; transition:background .3s;
}
.chain__list li::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--k); }
.chain__list li:hover{ background:color-mix(in srgb, var(--k) 8%, var(--bg)); }
.chain__n{ color:var(--k); padding-left:22px; font-variant-numeric:tabular-nums; }
.chain__list b{
  font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:1.7rem;
  text-transform:uppercase; line-height:1; color:var(--fg);
}
.chain__list li span:last-child{ color:var(--fg-soft); font-size:.94rem; }
@media (max-width:760px){
  .chain__list li{ grid-template-columns:56px 1fr; row-gap:4px; padding-block:16px; }
  .chain__list li span:last-child{ grid-column:2; }
}

/* ───────── Insertion / Sport-Santé ──────────────────────── */
.emploi{ background:var(--surf); border-block:1px solid var(--line); }
.emploi .temps{ border-color:var(--line); }
.emploi .temp{ border-color:var(--line); }
.emploi .temp ul{ color:var(--fg-soft); }
.emploi .temp__d{ font-size:2.2rem; }
.sante .factbar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line); margin-bottom:clamp(34px,4vw,52px);
}
.sante .factbar > div{ padding:18px 20px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.sante .factbar > div:last-child{ border-right:0; }
@media (max-width:620px){ .sante .factbar > div{ border-right:0; border-bottom:1px solid var(--line); } .sante .factbar > div:last-child{ border-bottom:0; } }
.factbar b{
  font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:2.3rem; line-height:1;
  letter-spacing:0; font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; width:max-content;
}
.factbar span{ color:var(--fg-faint); }
.seance{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.seance li{ display:grid; grid-template-columns:88px 1fr; gap:16px; padding-block:13px; border-bottom:1px solid var(--line); font-size:.95rem; }
.seance__t{ color:var(--cyan); font-variant-numeric:tabular-nums; padding-top:3px; }
.seance li span:last-child{ color:var(--fg-soft); }
.mini{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:clamp(40px,5vw,64px); }
.mini__c{ border:1px solid var(--line); border-top:3px solid var(--k, var(--cyan)); border-radius:2px; padding:22px 22px 26px; background:var(--surf); }
.mini__c .mono{ color:var(--k, var(--cyan)); }
.mini__c h3{ font-size:1.6rem; margin:9px 0 8px; }
.mini__c p{ color:var(--fg-soft); font-size:.92rem; }
.mini__c--star{ background:var(--surf-2); }
.mini__c--star b{ color:var(--fg); font-weight:700; }
.mini__link{
  display:inline-block; margin-top:14px; color:var(--k, var(--cyan));
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s;
}
.mini__link:hover{ border-bottom-color:currentColor; }

/* ───────── Type rempli de photo ─────────────────────────── */
.fill{ padding-block:clamp(56px,7vw,104px); text-align:center; }
.fill__w{
  font-family:"Big Shoulders Display",sans-serif; font-weight:900;
  font-size:clamp(3.6rem,15vw,13rem); line-height:.82; text-transform:uppercase;
  letter-spacing:-.02em;
  background-image:var(--photo-wide);
  background-size:cover; background-position:center 42%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .fill__w{ color:var(--fg); -webkit-text-fill-color:currentColor; }
}
.fill p{ margin-top:20px; color:var(--fg-soft); max-width:52ch; margin-inline:auto; }

/* ───────── All-Star Game filles, en vidéo ───────────────── */
.asgvid{ background:var(--surf); border-block:1px solid var(--line); }
.asgvid__grid{ display:grid; grid-template-columns:1fr minmax(0,.62fr); gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:860px){ .asgvid__grid{ grid-template-columns:1fr; } }
.asgvid__txt h2{ font-size:clamp(2.3rem,5.4vw,4rem); }
.asgvid__k{ display:flex; flex-wrap:wrap; gap:0; margin-top:30px; border-top:1px solid var(--line); }
.asgvid__k > div{ display:flex; flex-direction:column; gap:4px; padding:16px 30px 0 0; margin-right:30px; border-right:1px solid var(--line); }
.asgvid__k > div:last-child{ border-right:0; margin-right:0; padding-right:0; }
.asgvid__k b{
  font-family:"Big Shoulders Display",sans-serif; font-size:2.4rem; font-weight:900;
  line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; width:max-content;
}
.asgvid__k span{ color:var(--fg-faint); }
.asgvid__v{ margin:0; position:relative; }
.asgvid__v video{
  width:100%; aspect-ratio:9/16; object-fit:cover; display:block;
  background:var(--void); border-radius:3px;
}
.asgvid__v figcaption{ margin-top:10px; color:var(--fg-faint); }

/* ───────── Feuille de match All-Star ────────────────────── */
.roster{ background:var(--void); color:#ECF4F7; }
.roster .hd h2{ color:#fff; }
.roster .hd__r{ color:#92A6B1; }
.roster .kick{ color:var(--flame); }
.tabs{ display:flex; gap:0; margin-bottom:clamp(24px,3vw,34px); border-bottom:1px solid rgba(255,255,255,.16); }
.tab{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1; text-transform:uppercase;
  color:#5F7480; padding:0 26px 14px 0; margin-right:8px;
  border-bottom:3px solid transparent; margin-bottom:-1px;
  display:flex; align-items:baseline; gap:9px;
  transition:color .2s, border-color .2s;
}
.tab b{ font-family:"Chivo Mono",monospace; font-size:.68rem; font-weight:600; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.tab:hover{ color:#A9BCC6; }
.tab.is-on{ color:#fff; border-bottom-color:var(--flame); }
.tab.is-on b{ color:var(--flame); }
.roster__bar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid rgba(255,255,255,.16); margin-bottom:clamp(30px,4vw,46px);
}
.roster__s{ padding:18px 20px; border-right:1px solid rgba(255,255,255,.16); }
.roster__s:last-child{ border-right:0; }
@media (max-width:620px){ .roster__s{ border-right:0; border-bottom:1px solid rgba(255,255,255,.16); } .roster__s:last-child{ border-bottom:0; } }
.roster__sn{ font-family:"Big Shoulders Display",sans-serif; font-weight:900; font-size:2.2rem; line-height:1; color:var(--sky); font-variant-numeric:tabular-nums; }
.roster__sl{ color:#5F7480; margin-top:4px; }

.roster__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); }
.pos{ background:var(--void); padding:20px 20px 24px; }
.pos__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:12px; margin-bottom:12px; border-bottom:2px solid var(--flame); }
.pos__h span:first-child{ color:#fff; }
.pos__n{ font-family:"Chivo Mono",monospace; font-size:.66rem; color:#5F7480; font-variant-numeric:tabular-nums; }
.pos ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.pl{ display:flex; flex-direction:column; gap:2px; }
.pl__name{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.32rem; line-height:1.05; text-transform:uppercase; color:#ECF4F7; }
.pl__club{
  font-family:"Chivo Mono",monospace; font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:#5F7480; display:flex; align-items:center; gap:7px;
}
.pl__club::before{ content:""; width:5px; height:5px; border-radius:50%; background:#3A4C57; flex:none; }
.pl--hex .pl__club{ color:var(--sky); }
.pl--hex .pl__club::before{ background:var(--sky); }
.pl__tbc{ color:var(--flame); }
.pl__note{
  display:inline-flex; align-items:center; gap:6px; margin-top:3px;
  font-size:.58rem; letter-spacing:.14em; color:var(--s1);
  text-decoration:none; width:max-content;
}
.pl__note::before{ content:""; width:10px; height:1px; background:var(--s1); }
.pl__note:hover{ color:#fff; }
.roster__key{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px; color:#5F7480; align-items:center; }
.staff{ margin-top:clamp(30px,4vw,44px); border-top:1px solid rgba(255,255,255,.16); padding-top:18px; }
.staff__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.staff__h span:first-child{ color:#fff; }
.staff__n{ color:#5F7480; }
.staff ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 20px; }
.staff li{ display:flex; flex-direction:column; gap:2px; padding-left:12px; border-left:2px solid var(--pop); }
.staff b{ font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:1.2rem; text-transform:uppercase; color:#ECF4F7; line-height:1.05; }
.staff span{ color:#5F7480; }
.staff--add li{ border-left-color:var(--sky); }
.roster__key i{ width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:7px; vertical-align:middle; }

/* ───────── Encadrement ──────────────────────────────────── */
.crew{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .crew{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .crew{ grid-template-columns:1fr; } }
.crew__c{ border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--surf); }
.crew__c .ph{ aspect-ratio:1/1; }
.crew__c .ph__grade{ opacity:.3; }
.crew__b{ padding:16px 17px 20px; }
.crew__r{ color:var(--sky); display:block; margin-bottom:7px; }
.crew__c h4{ font-size:1.4rem; margin-bottom:6px; line-height:1.02; }
.crew__c p{ font-size:.86rem; color:var(--fg-soft); }

.promo{ margin:clamp(30px,4vw,48px) 0 0; }
.promo .ph{ aspect-ratio:2/1; border-radius:3px; }
.promo figcaption em{ font-style:italic; color:var(--fg); }
.promo .ph__grade{ opacity:.22; }
.promo .ph__dim{ background:linear-gradient(180deg, transparent 58%, rgba(4,7,10,.55)); }
@media (max-width:700px){ .promo .ph{ aspect-ratio:16/9; } }
.promo figcaption{
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:10px 34px; align-items:start; margin-top:14px;
}
@media (max-width:700px){ .promo figcaption{ grid-template-columns:1fr; } }
.promo figcaption .mono{ color:var(--fg-faint); padding-top:3px; }
.promo figcaption p{ color:var(--fg-soft); font-size:.95rem; max-width:60ch; }

/* ───────── Partenaires ──────────────────────────────────── */
.allies{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:44px; }
@media (max-width:1000px){ .allies{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .allies{ grid-template-columns:repeat(2,1fr); } }
.ally{
  background:#fff; height:120px; border-radius:3px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:12px 16px;
  border:1px solid var(--line);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.ally:hover{ transform:translateY(-3px); box-shadow:0 12px 30px -16px rgba(28,190,234,.65); }
.ally img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.ally--dark{ background:var(--void-2); }
.ally--name span{
  font-family:"Big Shoulders Display",sans-serif; font-weight:900;
  font-size:1.5rem; line-height:1; text-transform:uppercase;
  color:#0A1218; text-align:center; letter-spacing:-.01em;
}
.ally--empty{
  background:none; border-style:dashed; color:var(--fg-faint);
  border-color:var(--line);
}
.ally--empty:hover{ transform:none; box-shadow:none; border-color:var(--cyan); color:var(--cyan); }
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:16px; }
.tier{ border:1px solid var(--line); border-radius:2px; padding:24px 22px 28px; display:flex; flex-direction:column; gap:13px; background:var(--surf); }
.tier--k{ background:var(--void); border-color:var(--void); color:#ECF4F7; }
.tier--k p,.tier--k li{ color:#A9BCC6; }
.tier__k{ color:var(--flame); }
.tier--k .tier__k{ color:var(--sky); }
.tier h3{ font-size:1.8rem; }
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--fg-soft); }
.tier li{ display:flex; gap:9px; }
.tier li::before{ content:"→"; color:var(--flame); font-weight:700; flex:none; }
.tier--k li::before{ color:var(--sky); }
.tier .btn{ margin-top:auto; align-self:flex-start; }

/* ───────── Suite ────────────────────────────────────────── */
.next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.step{ border-top:3px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:8px; }
.step--a{ border-top-color:var(--flame); }
.step--b{ border-top-color:var(--sky); }
.step__w{ color:var(--fg-faint); }
.step h3{ font-size:1.5rem; }
.step p{ font-size:.9rem; color:var(--fg-soft); }

/* ───────── Fin ──────────────────────────────────────────── */
.end{ position:relative; color:#fff; text-align:center; min-height:min(80vh,760px); display:flex; align-items:center; }
.end .ph__grade{ opacity:.28; }
.end .ph__dim{
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(4,7,10,.86), transparent 76%),
    linear-gradient(0deg, rgba(4,7,10,.95) 3%, rgba(4,7,10,.34) 45%, rgba(4,7,10,.55));
}
.end__in{ position:relative; z-index:2; padding-block:clamp(80px,10vw,140px); display:flex; flex-direction:column; align-items:center; gap:22px; }
.end h2{ font-size:clamp(2.7rem,8vw,6.2rem); }
.end h2 i{ font-style:normal; color:var(--sky); }
.end p{ color:#BCCFD8; max-width:50ch; }
.end__cta{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }
.endmail{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:8px; }
.endmail__a{
  font-family:"Chivo Mono",monospace; font-size:clamp(.86rem,2.2vw,1.05rem);
  letter-spacing:.02em; color:var(--fg); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent;
  background:linear-gradient(var(--grad)) bottom / 100% 2px no-repeat;
  word-break:break-word; text-align:center;
}
.endmail__a:hover{ color:var(--cyan); }
.endmail .mono{ color:rgba(236,244,247,.55); text-align:center; }
.endmail .mono a{ color:rgba(236,244,247,.8); text-decoration:none; }
.endmail .mono a:hover{ color:var(--cyan); }

.foot{ background:var(--void); color:#5F7480; border-top:1px solid rgba(255,255,255,.1); }
.foot__in{ padding-block:30px; display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; }
.foot a{ color:#A9BCC6; text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot__r{ margin-left:auto; }

/* ───────── Apparition ──────────────────────────────────── */
/* Le contenu est visible par défaut : il ne disparaît que si le
   script a pris la main (classe posée par JS). Sans JS, sans
   IntersectionObserver ou si le script échoue, rien n'est masqué. */
.rv{ transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
.js-rv .rv{ opacity:0; transform:translateY(20px); }
.js-rv .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-rv .rv{ opacity:1; transform:none; transition:none; }
  .ph__img{ transform:none !important; }
}