/* MT Players : feuille commune (accueil, joueurs, contact) */
@font-face{font-family:"Big Shoulders";src:url(../fonts/bigshoulders-var.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/generalsans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/generalsans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/generalsans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Signature";src:url(../fonts/saintdelafield.woff2) format("woff2");font-display:swap}

:root{
  --noir:#0B0D0C; --noir-2:#131614; --noir-3:#1C201D;
  --blanc:#F4F4F1; --blanc-2:#E6E7E2; --blanc-3:#D6D8D1;
  --gris-c:#5B605B; --gris-s:#8F958F;
  --vert:#52C745; --vert-v:rgba(82,199,69,.55); --vert-d:rgba(82,199,69,.18);
  --courbe:cubic-bezier(.16,1,.3,1);
  --bord:clamp(16px,3.2vw,48px);
  --tete:100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--noir);-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--blanc);color:var(--noir);font-family:"General Sans",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
html[lang=fr] .en,html[lang=en] .fr{display:none!important}
::selection{background:var(--vert);color:var(--noir)}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px}

/* ---------- typographie ---------- */
.titre{font-family:"Big Shoulders";font-weight:900;line-height:.86;letter-spacing:-.005em}
.t-geant{font-size:clamp(84px,15.5vw,290px);line-height:.8}
.t-xl{font-size:clamp(60px,8.6vw,150px)}
.t-l{font-size:clamp(44px,5.4vw,92px)}
.t-m{font-family:"Big Shoulders";font-weight:800;font-size:clamp(26px,2.4vw,40px);line-height:1}
.etiquette{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500}

.vert{color:var(--vert)}
.l{display:block;overflow:hidden;padding:.12em 0 .09em;margin:-.12em 0 -.09em}
.l>span{display:inline-block}
.lien{background:linear-gradient(var(--vert),var(--vert)) 0 100%/100% 2px no-repeat;padding-bottom:3px;transition:background-size .5s var(--courbe)}
@media (hover:hover) and (pointer:fine){.lien:hover{background-size:0 2px;background-position:100% 100%}}

/* états de départ : posés seulement si le script a ajouté .js-anime */
html.js-anime [data-lignes] .l>span{transform:translate3d(0,112%,0)}
html.js-anime [data-monte]{opacity:0;transform:translate3d(0,28px,0)}
html.js-anime [data-image]{clip-path:inset(100% 0 0 0)}
html.js-anime [data-image] .zoom{transform:scale(1.22)}
html.js-anime .registre .signe{clip-path:inset(-40% 100% -40% 0)}
html.js-anime .hero-bas .l>span,html.js-anime .devise .l>span{transform:translate3d(0,112%,0)}
html.js-anime .hero-cote,html.js-anime .pause,html.js-anime .devise cite{opacity:0}

/* ---------- menu ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px var(--bord);color:var(--blanc);background-color:rgba(11,13,12,.002);transition:color .35s,background-color .35s}
html.nav-pleine .nav{background-color:var(--noir)}
.marque{display:flex;align-items:center;gap:11px;font-family:"Big Shoulders";font-weight:800;font-size:23px;line-height:1;letter-spacing:.005em}
.marque img{width:auto;height:40px}
.nav ul{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);list-style:none;font-size:15px;font-weight:500}
.nav ul a{position:relative;padding:4px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--vert);transition:right .45s var(--courbe)}
.nav ul a[aria-current=page]::after{right:0}
@media (hover:hover) and (pointer:fine){.nav ul a:hover::after{right:0}}
.langues{display:flex;gap:2px;font-size:14px}
.langues button{padding:4px 6px;opacity:.5;transition:opacity .3s}
.langues button[aria-pressed=true]{opacity:1}
.ouvrir-menu{display:none;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:6px 0}
.ouvrir-menu{width:44px;height:44px;justify-content:flex-end;margin-right:-6px}
.ouvrir-menu i{position:relative;display:block;width:24px;height:2px;background:currentColor;margin-right:6px;transition:background-color .2s}
.ouvrir-menu i::before,.ouvrir-menu i::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform .4s var(--courbe)}
.ouvrir-menu i::before{top:-7px}.ouvrir-menu i::after{top:7px}
@media (max-width:820px){
  .nav ul{display:none}
  .ouvrir-menu{display:inline-flex}
  .nav{padding-top:14px;padding-bottom:14px}
  .marque{font-size:21px}
  .marque img{height:36px}
}
.menu{position:fixed;inset:0;z-index:39;background:var(--noir);color:var(--blanc);display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px var(--bord) calc(28px + env(safe-area-inset-bottom));visibility:hidden;opacity:0;transition:opacity .45s var(--courbe),visibility 0s .45s;overflow:hidden}

html.menu-ouvert .menu{visibility:visible;opacity:1;transition:opacity .45s var(--courbe)}
html.menu-ouvert .ouvrir-menu i{background-color:transparent}
html.menu-ouvert .ouvrir-menu i::before{transform:translateY(7px) rotate(45deg)}
html.menu-ouvert .ouvrir-menu i::after{transform:translateY(-7px) rotate(-45deg)}
.menu nav{display:grid;gap:6px;position:relative}
.menu nav a{font-family:"Big Shoulders";font-weight:900;font-size:clamp(54px,15vw,84px);line-height:.95}
.menu .bas{display:flex;justify-content:space-between;align-items:flex-end;margin-top:40px;font-size:15px;color:var(--gris-s);position:relative}
.menu .bas a{color:var(--blanc)}

/* ---------- rideau de transition entre pages ---------- */
#rideau{position:fixed;inset:0;z-index:100;background:var(--noir);display:grid;place-items:center;transform:translate3d(0,100%,0);pointer-events:none;visibility:hidden}

#rideau img{position:relative;width:clamp(120px,15vw,190px);mix-blend-mode:screen}
html.rideau-arrivee #rideau{transform:none;visibility:visible}

/* ---------- boutons ---------- */
/* le bouton principal reprend le ballon du logo : un cercle sombre éclairé en vert par la gauche */
.ballon-btn{display:inline-flex;align-items:center;gap:12px;padding:13px 20px 13px 22px;border-radius:999px;
  background:var(--noir);color:var(--blanc);
  font-family:"Big Shoulders";font-weight:800;font-size:20px;line-height:1;white-space:nowrap;
  box-shadow:inset 2px 0 0 var(--vert);transition:box-shadow .5s var(--courbe)}
.ballon-btn i{font-style:normal;color:var(--vert);transition:transform .5s var(--courbe)}
@media (hover:hover) and (pointer:fine){
  .ballon-btn:hover{box-shadow:inset 3px 0 0 var(--vert)}
  .ballon-btn:hover i{transform:translateX(5px)}
}
/* barre partagée du hero : deux moitiés séparées par 3 px, comme les colonnes vidéo */
.duo{display:flex!important;align-items:stretch!important;gap:3px!important;width:420px;max-width:100%;height:58px;border-radius:999px;overflow:hidden;margin-top:0!important;
  font-family:"Big Shoulders";font-weight:800;font-size:22px;line-height:1;letter-spacing:.01em}
.duo a{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--noir);transition:background-color .4s var(--courbe),transform .2s}
.duo a:first-child{background:var(--blanc);padding-left:6px}
.duo a:last-child{background:var(--vert);padding-right:6px}
.duo i{font-style:normal;transition:transform .5s var(--courbe)}
.duo a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .duo a:first-child:hover{background:#fff}
  .duo a:last-child:hover{background:#63D656}
  .duo a:last-child:hover i{transform:translateX(5px)}
}
/* ---------- hero (accueil) ---------- */
.hero{position:relative;height:100svh;min-height:600px;background:#050605;color:var(--blanc);overflow:hidden}
.colonnes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#050605}
.colonne{position:relative;overflow:hidden}
.colonne video,.colonne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.colonne.logo{background:#050605}

.hero .mobile{display:none}
.hero-voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,6,5,.55),rgba(5,6,5,0) 18%,rgba(5,6,5,0) 52%,rgba(5,6,5,.9))}
.intro{position:absolute;inset:0;background:#050605;opacity:0;pointer-events:none}
html.intro-on .intro{opacity:1}
.embleme{position:absolute;left:50%;top:44%;width:clamp(230px,25vw,420px);transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}
.embleme img{width:100%;position:relative}
.lueur{display:none}
html.intro-on .embleme img{opacity:0}
html.intro-on .lueur{display:none}
.hero-bas{position:absolute;z-index:3;left:var(--bord);right:var(--bord);bottom:clamp(22px,5vh,52px);display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.hero h1 .etiquette{color:var(--blanc-2);margin-bottom:14px}
.hero h1 .nom{display:block;font-family:"Big Shoulders";font-weight:900;font-size:clamp(54px,6.6vw,112px);line-height:.86}
.hero h1 .ligne{display:block;margin-top:12px;font-family:"General Sans";font-size:clamp(15px,1.2vw,18px);font-weight:500;line-height:1.45;color:var(--blanc-2);max-width:34ch}
.hero-cote{text-align:right;font-size:14px;color:var(--blanc-2)}
.hero-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:14px 24px;margin-top:14px}
.hero-actions .lien{font-family:"Big Shoulders";font-weight:800;font-size:22px;color:var(--blanc)}
.pause{position:absolute;z-index:3;right:var(--bord);top:84px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(244,244,241,.35);display:grid;place-items:center;color:var(--blanc)}
.pause svg{width:12px;height:12px}
@media (max-width:760px){
  .colonnes{grid-template-columns:1fr}
  .colonne:not(:first-child){display:none}
  .hero-voile{background:radial-gradient(ellipse 60% 30% at 50% 31%,rgba(5,6,5,.6),rgba(5,6,5,0) 100%),linear-gradient(to bottom,rgba(5,6,5,.55),rgba(5,6,5,0) 18%,rgba(5,6,5,0) 48%,rgba(5,6,5,.92))}
  .hero .ordi{display:none}
  .hero .mobile{display:block}
  .embleme{top:31%;width:54vw}
  .hero-bas{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-cote{text-align:left}
  .hero-actions{justify-content:flex-start}
  .pause{top:72px}
}

/* ---------- manifeste + table de signature (accueil, clair) ---------- */
.manifeste{padding:var(--tete) var(--bord) clamp(40px,6vh,72px);overflow:hidden}
.manifeste .t-geant{margin-left:-.04em;white-space:nowrap}
.manifeste .etiquette{color:var(--gris-c)}
.remplir{margin-top:0;max-width:29ch;font-size:clamp(30px,4.1vw,66px);font-weight:500;line-height:1.16;letter-spacing:-.01em}
.remplir .mot{opacity:.16}
html:not(.js-anime) .remplir .mot{opacity:1}
.marque-trait{position:relative;white-space:nowrap}
.marque-trait svg{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.4em;overflow:visible}
.marque-trait path{fill:none;stroke:var(--vert);stroke-width:2.4;stroke-linecap:round}
.titre .marque-trait svg{bottom:-.08em;height:.22em}
.titre .marque-trait path{stroke-width:4}

.manifeste>.titre{margin-bottom:clamp(22px,4vh,40px)}
.services{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,4vw,64px);margin-top:clamp(40px,7vh,80px);max-width:1200px}
.services b{display:inline-block;font-family:"Big Shoulders";font-weight:800;font-size:clamp(26px,2.2vw,34px);line-height:1;margin-bottom:10px}
.services b svg{bottom:-.3em;height:.32em}
.services b path{stroke-width:3}
.services li>span{margin-top:6px;font-size:16px;color:var(--gris-c);max-width:32ch;display:block}
@media (max-width:760px){.services{grid-template-columns:1fr;gap:22px}}
.table{padding:48px 0 0}
.table-entete{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(22px,4vh,44px)}
.table-entete .etiquette{color:var(--gris-c)}
.table-entete p:last-child{font-size:14px;color:var(--gris-c);max-width:34ch;text-align:right}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,24px);align-items:start}
.trois figure:nth-child(2){margin-top:clamp(40px,10vh,120px)}
.trois figure:nth-child(3){margin-top:clamp(16px,4vh,48px)}
.cadre{position:relative;overflow:hidden;background:var(--blanc-2)}
.cadre .px{position:relative}
.cadre img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
figure figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px}
figure figcaption b{font-family:"Big Shoulders";font-weight:800;font-size:22px;line-height:1}
figure figcaption span{color:var(--gris-c)}
@media (max-width:760px){
  .table-entete{flex-direction:column}
  .table-entete p:last-child{text-align:left}
  .trois{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--bord));padding:0 var(--bord);scrollbar-width:none}
  .trois::-webkit-scrollbar{display:none}
  .trois figure{flex:0 0 78vw;scroll-snap-align:start;margin-top:0!important}
}

/* ---------- joueurs (accueil, sombre) ---------- */
.joueurs{position:relative;background:var(--noir);color:var(--blanc);padding:var(--tete) var(--bord) clamp(64px,10vh,130px);overflow:hidden}

.entete{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,5vh,56px)}
.entete .note{font-size:14px;color:var(--gris-s);max-width:28ch;text-align:right}
.entete .note a{display:inline-block;margin-top:10px;color:var(--blanc);font-weight:600}
.grille{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px) clamp(10px,1.4vw,20px)}
.carte{display:block}
.carte .cadre{background:var(--noir-2)}

.carte .zoom{transition:transform 1.2s var(--courbe)}
.carte b{display:block;margin-top:14px;font-family:"Big Shoulders";font-weight:800;font-size:clamp(23px,2vw,31px);line-height:1}
.carte small{display:block;margin-top:7px;font-size:13.5px;line-height:1.4;color:var(--gris-s)}
.carte .fleche{display:inline-block;color:var(--vert);transition:transform .5s var(--courbe)}
@media (hover:hover) and (pointer:fine){
  .carte:hover .cadre::after{opacity:1}
  .carte:hover .zoom{transform:scale(1.05)}
  .carte:hover .fleche{transform:translateX(6px)}
}
@media (max-width:900px){.grille{grid-template-columns:repeat(2,minmax(0,1fr))}.entete{flex-direction:column;align-items:flex-start}.entete .note{text-align:left}}

/* ---------- devise : grande image de transition ---------- */
.devise{position:relative;height:170vh;background:var(--noir);color:var(--blanc)}
.devise .colle{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.devise .fond{position:absolute;inset:0;clip-path:inset(10% 12% 10% 12%)}
.devise .fond picture{display:block;height:100%}
.devise .fond img{width:100%;height:100%;object-fit:cover;transform:scale(1.18)}
.devise .fond::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,5,.82),rgba(5,6,5,.25) 55%,rgba(5,6,5,.45))}
.devise blockquote{position:relative;z-index:2;padding:0 var(--bord) clamp(36px,8vh,80px)}
.devise blockquote p{font-family:"Big Shoulders";font-weight:900;font-size:clamp(64px,11vw,200px);line-height:.84;text-transform:none}
.devise cite{display:block;margin-top:22px;font-style:normal;font-size:14px;color:var(--blanc-2)}
@media (max-width:760px){
  .devise{height:auto}
  .devise .colle{position:relative;height:auto;min-height:88svh}
  .devise .fond{clip-path:none}
  .devise .fond img{transform:none}
}

/* ---------- fondateur (accueil, clair) ---------- */
.fondateur{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);padding:var(--tete) var(--bord) clamp(70px,11vh,140px);align-items:end}
.fondateur figure{margin-left:calc(-1 * var(--bord))}
.fondateur figcaption{margin-left:var(--bord)}
.fondateur .etiquette{color:var(--gris-c);margin-bottom:20px}
.fondateur .chapeau{margin-top:26px;font-size:clamp(17px,1.45vw,21px);max-width:36ch}
.direct{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:24px;font-weight:600}
.equipe{margin-top:clamp(40px,7vh,76px);list-style:none;border-top:1px solid var(--noir)}
.equipe li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--blanc-3)}
.equipe b{font-family:"Big Shoulders";font-weight:800;font-size:27px;line-height:1}
.equipe span{font-size:14px;color:var(--gris-c);text-align:right}
@media (max-width:860px){
  .fondateur{grid-template-columns:1fr}
  .fondateur figure{margin-right:calc(-1 * var(--bord))}
}

/* ---------- signatures (accueil, sombre) ---------- */
.signatures{position:relative;background:var(--noir);color:var(--blanc);padding:var(--tete) var(--bord) clamp(70px,11vh,140px);overflow:hidden}

.registre{position:relative;list-style:none;border-top:1px solid #2A2F2B}
.registre li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,2fr) minmax(0,1.5fr);gap:18px;align-items:center;padding:clamp(20px,2.8vw,34px) 0;border-bottom:1px solid #2A2F2B}
.registre li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--vert);transition:width .7s var(--courbe)}
.registre time{font-family:"Big Shoulders";font-weight:700;font-size:22px;color:var(--gris-s)}
.registre .qui{font-family:"Big Shoulders";font-weight:900;font-size:clamp(36px,3.8vw,62px);line-height:.9}
.registre .signe{display:block;width:max-content;margin:.05em 0 -.15em .5em;font-family:"Signature";font-weight:400;font-size:.8em;line-height:1;color:var(--vert);
  white-space:nowrap;transform:rotate(-4deg);transform-origin:left center;pointer-events:none}
.registre .trajet{font-size:16px;font-weight:500}
.registre .trajet s{color:var(--gris-s);text-decoration-thickness:1px}
.registre .trajet i{font-style:normal;color:var(--vert);margin:0 8px}
.registre .note{font-size:14px;color:var(--gris-s)}
.registre .vignette{display:none}
@media (hover:hover) and (pointer:fine){.registre li:hover::before{width:100%}}
@media (max-width:860px){
  .registre li{grid-template-columns:76px 1fr;grid-template-areas:"v d" "v q" "v t" "v n";gap:4px 16px;align-items:start}
  .registre .vignette{display:block;grid-area:v;width:76px;aspect-ratio:4/5;object-fit:cover}
  .registre time{grid-area:d;font-size:17px}.registre .qui{grid-area:q}.registre .trajet{grid-area:t;margin-top:8px}.registre .note{grid-area:n}
}
/* aperçu photo qui suit le pointeur (signatures, index des joueurs) */
.apercu{position:fixed;left:0;top:0;z-index:30;width:clamp(220px,18vw,300px);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85)}
.apercu img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 30px 60px rgba(0,0,0,.45)}

/* ---------- famille : une photo qui respire, le logo, la signature ---------- */
.famille{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--noir);color:var(--blanc);display:grid;place-items:center;text-align:center}
.famille-fond{position:absolute;inset:0}
.famille-fond picture{display:block;height:100%}
.famille-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;animation:respire 18s ease-in-out infinite alternate}
@keyframes respire{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.famille-fond::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(11,13,12,.5),rgba(11,13,12,.86))}
.famille-texte{position:relative;z-index:2;display:grid;justify-items:center;padding:0 var(--bord)}
.famille-logo{width:clamp(64px,6vw,90px);height:auto;margin-bottom:14px}
.famille h2{display:grid;justify-items:center}
.famille .petit{font-family:"Big Shoulders";font-weight:800;font-size:clamp(28px,3vw,44px);line-height:1}
.famille .sig{display:block;font-family:"Signature";font-weight:400;font-size:clamp(80px,10.5vw,165px);line-height:1.2;color:var(--vert);padding:0 .25em;margin:.08em 0 -.02em}
html.js-anime .famille .sig{clip-path:inset(-30% 100% -30% 0)}
html.js-anime .famille.signe .sig{clip-path:inset(-30% -10% -30% 0);transition:clip-path 2.2s cubic-bezier(.6,0,.3,1) .4s}
.famille-texte .envoyer{width:auto;display:inline-flex;padding:0 30px;margin-top:clamp(24px,4vh,40px)}
.famille-legende{position:absolute;z-index:2;left:var(--bord);bottom:calc(20px + env(safe-area-inset-bottom));font-size:13px;color:var(--blanc-2);text-align:left}
.famille-legende b{font-family:"Big Shoulders";font-weight:800;font-size:16px;color:var(--blanc);margin-right:6px}
@media (max-width:760px){.famille{height:92svh;align-items:end}.famille-texte{padding-bottom:64px}}
@media (prefers-reduced-motion:reduce){.famille-fond img{animation:none}}

/* ---------- pied de page (toutes les pages) ---------- */
.pied{position:relative;background:var(--noir);color:var(--blanc);padding:var(--tete) var(--bord) calc(24px + env(safe-area-inset-bottom));overflow:hidden}

.pied-haut{position:relative}
.pied-haut img{width:clamp(150px,18vw,260px);mix-blend-mode:screen}
.pied-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;font-size:15px}
.pied-cols h3{font-size:13px;font-weight:500;color:var(--gris-s);margin-bottom:10px}
.pied-cols a,.pied-cols p{display:block;line-height:1.75}
.pied .geant{position:relative;display:block;margin:clamp(30px,6vh,70px) calc(-.02em - 4px) 0;padding-bottom:.06em;font-family:"Big Shoulders";font-weight:900;font-size:22.6vw;line-height:.9;letter-spacing:-.01em;white-space:nowrap;
  background:linear-gradient(to bottom,var(--blanc) 45%,rgba(244,244,241,.3));-webkit-background-clip:text;background-clip:text;color:transparent}
.pied-legal{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:22px;padding-top:18px;border-top:1px solid #2A2F2B;font-size:13px;color:var(--gris-s)}
.pied-legal a{color:var(--blanc)}
@media (max-width:760px){.pied-haut{grid-template-columns:1fr}.pied-cols{grid-template-columns:1fr 1fr}}

/* ---------- page joueurs ---------- */
.jp-tete{position:relative;background:var(--noir);color:var(--blanc);padding:calc(70px + var(--tete)) var(--bord) clamp(56px,9vh,110px);overflow:hidden}

.jp-tete img.embleme-coin{position:absolute;right:var(--bord);top:clamp(90px,14vh,150px);width:clamp(120px,16vw,240px);mix-blend-mode:screen;opacity:.95}
.jp-tete h1,.ct-tete h1{margin-top:0}
.jp-tete .intro-txt{position:relative;margin-top:26px;font-size:clamp(17px,1.45vw,21px);max-width:44ch;color:var(--blanc-2)}
.jp-bandes{position:relative;display:flex;gap:4px;height:clamp(420px,64vh,680px);margin:clamp(36px,6vh,64px) calc(-1 * var(--bord)) 0}
.bande{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--noir-2);transition:flex-grow .8s var(--courbe)}
.bande img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.78);transition:filter .6s,transform 1.2s var(--courbe)}
.bande>span{position:absolute;left:0;right:0;bottom:0;padding:60px 16px 18px;background:linear-gradient(transparent,rgba(5,6,5,.85))}
.bande b{display:block;font-family:"Big Shoulders";font-weight:800;font-size:clamp(20px,1.7vw,28px);line-height:.95}
.bande small{display:block;margin-top:6px;font-size:13px;color:var(--blanc-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){
  .jp-bandes:hover .bande:hover{flex-grow:2.4}
  .bande:hover img{filter:none;transform:scale(1.04)}
}
@media (max-width:760px){
  .jp-bandes{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--bord);scroll-padding:0 var(--bord);gap:10px;scrollbar-width:none}
  .jp-bandes::-webkit-scrollbar{display:none}
  .bande{flex:0 0 58vw;aspect-ratio:4/5;scroll-snap-align:start}
  .bande img{filter:none}
}

.rangee{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,30px);align-items:stretch;padding:var(--tete) var(--bord);scroll-margin-top:20px}
.rangee:nth-of-type(odd){background:var(--blanc)}
.rangee:nth-of-type(even){background:var(--noir);color:var(--blanc)}
.rangee:nth-of-type(even) .gris,.rangee:nth-of-type(even) dt{color:var(--gris-s)}
.rangee.inverse .r-photo{order:3}
.rangee.inverse .r-fiche{order:1}
.rangee.inverse .r-citation{order:2}
.r-photo .cadre img{aspect-ratio:4/5}
.r-citation{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(22px,2.6vw,40px);background:#080A09;color:var(--blanc);overflow:hidden}

.r-citation blockquote{position:relative}
.r-citation blockquote p{font-family:"Big Shoulders";font-weight:900;font-size:clamp(40px,4.3vw,76px);line-height:.88;text-transform:uppercase}
.r-citation.longue blockquote p{font-size:clamp(30px,2.9vw,52px)}
.r-citation cite{display:block;margin-top:16px;font-style:normal;font-size:13px;color:var(--gris-s)}
.r-citation .second{position:relative;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:end;font-size:13px;color:var(--blanc-2)}
.r-citation .second img{width:96px;aspect-ratio:4/5;object-fit:cover}
.r-fiche{display:flex;flex-direction:column}
.r-fiche .poste{font-size:14px;font-weight:500;color:var(--gris-c);margin-bottom:12px}
.r-fiche h2{font-size:clamp(48px,5vw,90px)}
.r-fiche .resume{margin-top:16px;font-size:16px;font-weight:500}
.plus{margin-top:clamp(20px,3vh,32px);border-top:1px solid var(--blanc-3);border-bottom:1px solid var(--blanc-3)}
.rangee:nth-of-type(even) .plus{border-color:#2A2F2B}
.plus summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:15px;font-weight:600;cursor:pointer}
.plus summary::-webkit-details-marker{display:none}
.plus summary::after{content:"+";font-size:24px;line-height:1;font-weight:400;color:var(--vert);transition:transform .4s var(--courbe)}
.plus[open] summary::after{transform:rotate(45deg)}
.plus dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;padding:2px 0 16px;font-size:15px}
.plus dt{color:var(--gris-c)}
.plus dd{font-weight:500}
.plus .sources{padding-bottom:16px;font-size:14px;color:var(--gris-c)}
.plus .sources a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.rangee:nth-of-type(even) .poste,.rangee:nth-of-type(even) .plus dt,.rangee:nth-of-type(even) .plus .sources{color:var(--gris-s)}
.r-fiche .parler{margin-top:auto;padding-top:24px;font-weight:600}
@media (max-width:900px){
  .rangee,.rangee.inverse{grid-template-columns:1fr}
  .rangee,.rangee.inverse{padding-top:0!important;row-gap:28px}
  .rangee .r-photo,.rangee.inverse .r-photo{grid-area:1/1;margin:0 calc(-1 * var(--bord))}
  .rangee .r-citation,.rangee.inverse .r-citation{grid-area:1/1;align-self:end;z-index:2;margin:0 calc(-1 * var(--bord));padding:90px var(--bord) 22px;background:linear-gradient(transparent,rgba(5,6,5,.82));pointer-events:none}
  .rangee .r-fiche,.rangee.inverse .r-fiche{grid-area:2/1}
  .r-citation .second{display:none}
  .r-citation blockquote p{font-size:clamp(34px,10vw,48px)}
  .r-citation.longue blockquote p{font-size:clamp(24px,6.6vw,32px)}
  .r-fiche h2{font-size:clamp(44px,12vw,58px)}
  .r-fiche .parler{padding-top:20px}
}

/* ---------- page contact ---------- */
.ct-tete{position:relative;background:var(--noir);color:var(--blanc);padding:calc(70px + var(--tete)) var(--bord) clamp(48px,8vh,90px);overflow:hidden}

.ct-tete .intro-txt{position:relative;margin-top:24px;font-size:clamp(17px,1.45vw,21px);max-width:42ch;color:var(--blanc-2)}
.canaux{position:relative;display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:clamp(28px,5vh,48px);font-family:"Big Shoulders";font-weight:800;font-size:clamp(26px,2.4vw,38px);line-height:1.1}
.ct-corps{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,90px);padding:var(--tete) var(--bord) clamp(70px,11vh,140px)}
.formulaire fieldset{border:0}
.formulaire legend,.champs label>span{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.champs label>span em{font-style:normal;color:var(--gris-c);font-weight:400}
.champs label{display:block}
.choix{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,4vh,40px)}
.choix label{position:relative}
.choix input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choix label>span{display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 16px;border-radius:999px;border:1px solid var(--blanc-3);background:#fff;font-weight:600;font-size:15px;transition:border-color .3s,background .3s,color .3s}
.choix label>span::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--gris-c);transition:background .3s,border-color .3s,box-shadow .3s}
.choix input:checked+span{background:var(--noir);color:var(--blanc);border-color:var(--noir)}
.choix input:checked+span::before{background:var(--vert);border-color:var(--vert);box-shadow:0 0 10px var(--vert)}
.choix input:focus-visible+span{outline:2px solid var(--vert);outline-offset:3px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px}
.champs .large{grid-column:1/-1}
.formulaire input[type=text],.formulaire input[type=email],.formulaire input[type=tel],.formulaire input[type=url],.formulaire input[type=number],.formulaire select,.formulaire textarea{
  width:100%;padding:14px 15px;font-size:16px;border:1px solid var(--blanc-3);border-radius:0;background:#fff;appearance:none;-webkit-appearance:none;transition:border-color .3s,box-shadow .3s}
.formulaire select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0D0C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center;padding-right:40px}
.formulaire textarea{min-height:150px;resize:vertical}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{outline:none;border-color:var(--noir);box-shadow:0 0 0 3px var(--vert-d)}
.formulaire .bloc{display:contents}
.formulaire .bloc[hidden]{display:none}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:14px;color:var(--gris-c)}
.consent>span{font-weight:400}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--vert);flex:none}
.envoi{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.envoi .etat{font-size:15px;font-weight:500}
.envoi .etat.erreur{color:#B3261E}
.formulaire .piege{position:absolute;left:-9999px}
.merci{display:none;padding:clamp(28px,4vw,48px);background:var(--noir);color:var(--blanc);position:relative;overflow:hidden}

.merci>*{position:relative}
.merci h2{font-size:clamp(44px,5vw,80px)}
.merci p{margin-top:16px;color:var(--blanc-2);max-width:40ch}
.formulaire.envoye form{display:none}
.formulaire.envoye .merci{display:block}
.ct-aside{align-self:start;position:sticky;top:96px;display:grid;gap:26px}
.ct-aside .cadre img{aspect-ratio:4/5}
.ct-aside dl{display:grid;gap:4px 0;font-size:15px}
.ct-aside dt{font-size:13px;color:var(--gris-c);margin-top:12px}
.ct-aside dd{font-weight:500}
@media (max-width:900px){.ct-corps{grid-template-columns:1fr}.ct-aside{position:static}.champs{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html.js-anime [data-lignes] .l>span,html.js-anime [data-monte],html.js-anime [data-image] .zoom{transform:none;opacity:1}
  html.js-anime [data-image],html.js-anime .registre .signe{clip-path:none}
  .remplir .mot{opacity:1}
}

/* Épure : rythme commun, hiérarchie conservée, aucune animation ajoutée. */
.etiquette{gap:0}
.pied-cols a,.ct-aside dd{overflow-wrap:anywhere}
html.menu-ouvert,html.menu-ouvert body{overflow:hidden}
html.menu-ouvert .nav{color:var(--blanc);background:var(--noir)}
.menu{overflow-y:auto;overscroll-behavior:contain}
@media(max-width:900px){
  :root{--tete:52px}
  .manifeste,.joueurs,.fondateur,.signatures,.famille,.ct-corps{padding-bottom:52px}
  .jp-tete,.ct-tete{padding-top:calc(58px + var(--tete));padding-bottom:52px}
  .rangee{padding-top:52px;padding-bottom:52px}
  .fondateur .equipe{margin-top:32px}
}
@media(max-width:760px){
  .hero{height:100svh;min-height:0}
  .hero .embleme{display:none}
  .hero-voile{background:linear-gradient(to bottom,rgba(11,13,12,.55),transparent 22%,transparent 50%,rgba(11,13,12,.92))}
  .hero-bas{bottom:calc(24px + env(safe-area-inset-bottom));gap:20px}
  .hero h1 .nom{font-size:clamp(54px,16vw,76px)}
  .hero h1 .ligne{max-width:32ch;font-size:15px}
  .hero-cote{width:100%}
  .hero-actions{margin-top:0;gap:12px 18px;justify-content:space-between}
  .duo{width:100%}
  .hero-actions .lien{font-size:20px;min-height:44px;display:inline-flex;align-items:center}
  .hero-actions .ballon-btn{font-size:18px;padding:14px 16px}
  .pause{width:44px;height:44px;top:72px}
  .table{padding-top:32px}
  .devise .colle{min-height:0;height:48svh}
  .devise blockquote{padding-bottom:32px}
  .devise blockquote p{font-size:clamp(52px,13vw,80px)}
  .devise blockquote .vert{color:var(--blanc)}
  .fondateur figure{margin:0;max-width:360px}
  .fondateur figure .cadre img{aspect-ratio:1;object-position:50% 30%}
  .famille figure{margin:0;max-width:360px;justify-self:start}
  .famille figure img{aspect-ratio:1;object-position:50% 30%}
  .pied-cols{grid-template-columns:1fr;gap:24px}
  .pied-legal{margin-top:32px}
}

/* ---------- menu mobile : liens qui montent, barre WhatsApp / Appeler ---------- */
.menu{justify-content:space-between;padding-top:110px}
.menu-embleme{position:absolute;right:-12vw;top:9vh;width:78vw;max-width:420px;mix-blend-mode:screen;opacity:.22;pointer-events:none}
.menu nav{gap:0;border-top:1px solid #2A2F2B;margin-top:auto}
.menu nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 0 10px;border-bottom:1px solid #2A2F2B;font-size:clamp(52px,14vw,80px);
  opacity:0;transform:translate3d(0,40px,0);transition:opacity .5s var(--courbe),transform .7s var(--courbe),color .3s}
.menu nav a i{font-style:normal;font-family:"General Sans";font-weight:400;font-size:28px;color:var(--vert);opacity:.0;transition:opacity .3s}
.menu nav a[aria-current=page]{color:var(--vert)}
.menu nav a[aria-current=page] i,.menu nav a:active i{opacity:1}
html.menu-ouvert .menu nav a{opacity:1;transform:none}
html.menu-ouvert .menu nav a:nth-child(2){transition-delay:.06s}
html.menu-ouvert .menu nav a:nth-child(3){transition-delay:.12s}
.menu .bas{flex-direction:column;align-items:stretch;gap:22px;margin-top:32px;opacity:0;transition:opacity .6s .2s}
html.menu-ouvert .menu .bas{opacity:1}
.menu .bas .duo{width:100%}
.menu .bas .duo a{color:var(--noir)}
.menu .langues{align-self:center;font-size:15px;font-weight:600}

/* ---------- contact : formulaire clair, barre de profil sombre ---------- */
.ct-corps{align-items:start}
.formulaire{max-width:760px}
.formulaire legend,.champs label>span{font-size:13px;font-weight:500;color:var(--gris-c);margin-bottom:4px;transition:color .3s}
.champs label:focus-within>span{color:var(--noir)}
.choix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;border-radius:999px;overflow:hidden;margin-bottom:clamp(26px,4vh,40px)}
.choix label>span{display:flex;justify-content:center;gap:0;height:52px;padding:0 6px;border:0;border-radius:0;background:var(--noir);color:var(--blanc);
  font-family:"Big Shoulders";font-weight:800;font-size:clamp(17px,1.5vw,21px)}
.choix label>span::before{display:none}
.choix input:checked+span{background:var(--vert);color:var(--noir);border:0}
.choix input:focus-visible+span{outline-offset:-4px;outline-color:var(--blanc)}
.champs{grid-template-columns:1fr 1fr;gap:22px 20px}
.formulaire input[type=text],.formulaire input[type=email],.formulaire input[type=tel],.formulaire input[type=url],.formulaire input[type=number],.formulaire select,.formulaire textarea{
  background:transparent;color:var(--noir);border:0;border-bottom:1px solid var(--blanc-3);padding:8px 0 11px;font-size:17px}
.formulaire select{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0D0C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 2px center;padding-right:28px}
.formulaire textarea{min-height:96px}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{border-color:var(--vert);box-shadow:0 1px 0 var(--vert)}
.formulaire ::placeholder{color:var(--gris-s)}
.consent{margin-top:26px;color:var(--gris-c)}
.envoi{margin-top:28px}
.envoyer{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:60px;border-radius:999px;background:var(--vert);color:var(--noir);
  font-family:"Big Shoulders";font-weight:800;font-size:23px;transition:background-color .4s var(--courbe),transform .2s}
.envoyer i{font-style:normal;transition:transform .5s var(--courbe)}
.envoyer:active{transform:scale(.98)}
.envoyer:disabled{opacity:.6}
@media (hover:hover) and (pointer:fine){.envoyer:hover{background:#63D656}.envoyer:hover i{transform:translateX(5px)}}
.envoi .etat:empty{display:none}
.envoi .etat.erreur{color:#B3261E}
.merci{padding:0;background:none}
.ct-aside{gap:18px}
.ct-aside .cadre{border-radius:20px}
.ct-aside .qui b{display:block;font-family:"Big Shoulders";font-weight:800;font-size:28px;line-height:1}
.ct-aside .qui span{font-size:14px;color:var(--gris-c)}
.direct-liste{list-style:none;border-top:1px solid var(--blanc-3)}
.direct-liste a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--blanc-3)}
.direct-liste span{font-size:13px;color:var(--gris-c)}
.direct-liste b{grid-row:2;font-weight:600;font-size:16px;overflow-wrap:anywhere}
.direct-liste i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;color:var(--vert);transition:transform .5s var(--courbe)}
@media (hover:hover) and (pointer:fine){.direct-liste a:hover i{transform:translateX(5px)}}
@media (max-width:900px){
  .ct-tete{padding-bottom:36px}
  .champs{grid-template-columns:1fr 1fr!important;gap:20px 14px}
  .ct-aside .cadre{display:none}
}

/* ---------- cartes joueurs de l'accueil : nom sur la photo, données en rangée ---------- */
.carte .cadre{position:relative}
.carte .sur{position:absolute;left:0;right:0;bottom:0;padding:70px 14px 14px;background:linear-gradient(transparent,rgba(5,6,5,.82));color:var(--blanc)}
.carte .sur small{display:block;font-size:12.5px;font-weight:500;color:var(--blanc-2);margin:0 0 6px}
.carte .sur b{display:block;margin:0;font-family:"Big Shoulders";font-weight:800;font-size:clamp(24px,2.2vw,34px);line-height:.92}
.specs{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr);border-bottom:1px solid #2A2F2B}
.specs>div{padding:11px 12px 12px;border-left:1px solid #2A2F2B;min-width:0}
.specs>div:first-child{border-left:0;padding-left:0}
.specs dt{font-size:11.5px;color:var(--gris-s);margin-bottom:3px}
.specs dd{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.specs dd[data-nu]{font-family:"Big Shoulders";font-weight:800;font-size:22px;line-height:1}
@media (max-width:900px){.specs{grid-template-columns:auto minmax(0,1fr)}.specs .nat{display:none}.carte .sur{padding:50px 10px 10px}}
@media (hover:hover) and (pointer:fine){.carte:hover .specs{border-bottom-color:var(--vert)}}

/* ---------- citations des joueurs : texte net, casse naturelle ---------- */
.r-citation blockquote p{font-family:"General Sans";font-weight:600;text-transform:none;letter-spacing:-.025em;line-height:1.08;font-size:clamp(30px,3vw,52px)}
.r-citation.longue blockquote p{font-size:clamp(22px,2vw,34px)}
.r-citation blockquote p::first-letter{color:var(--vert)}
@media (max-width:900px){.r-citation blockquote p{font-size:clamp(28px,8vw,38px)}.r-citation.longue blockquote p{font-size:clamp(20px,5.6vw,26px)}}

/* ---------- fonds : le document est noir (bas d'écran iOS), chaque section claire porte son blanc ---------- */
body{background:var(--noir)}
[data-fond=clair]{background:var(--blanc);color:var(--noir)}
main{background:var(--blanc)}
.pied{border-top:1px solid #262B27;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.merci{color:var(--noir)}.merci p{color:var(--gris-c)}

/* ---------- hero ordinateur : tout dans la colonne du logo, les vidéos restent libres ---------- */
@media (min-width:761px){
  .hero .hero-voile{background:linear-gradient(to bottom,rgba(5,6,5,.5),rgba(5,6,5,0) 16%)}
  /* le logo est dans le même bloc que le texte : ils ne peuvent plus se chevaucher */
  .hero .hero-bas{left:33.4%;right:33.4%;top:70px;bottom:0;padding:0 24px;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px}
  .hero .hero-bas{mix-blend-mode:screen}
  .hero .embleme{position:relative;left:auto;top:auto;transform:none;mix-blend-mode:normal;width:clamp(150px,min(15vw,28vh),280px);margin-bottom:-6px}
  .hero h1 .nom{font-size:clamp(54px,5.4vw,92px)}
  .hero h1 .ligne{margin:12px auto 0;max-width:30ch}
  .hero .hero-cote{width:100%;display:flex;justify-content:center}
  .hero .duo{width:100%;max-width:400px}
}
/* « MT Players » prend le vert du ballon : clair là où la lumière tape, profond dans l'ombre */
.hero h1 .nom{filter:drop-shadow(0 0 28px rgba(82,199,69,.28))}
.hero h1 .nom .l>span{background:linear-gradient(160deg,#B4F0A6 0%,#7EDD6C 32%,#52C745 60%,#2F8F26 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em .2em 0;margin-bottom:-.2em}