/* ==================================================================
   NEO PADEL MEDIA — feuille de style principale
   Direction validée par Sly : fond blanc, écriture noire,
   gris clair et bleu nuit en troisième couleur.
   Aucun dégradé métallique, aucun titre en couleur.
   Gros titres en Anton (condensé lourd, esprit Nike).
   ================================================================== */

/* ---------- police auto-hébergée (pas de CDN : RGPD) ---------- */
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* palette fixe : identique pour tous les visiteurs */
  --paper:    #FFFFFF;   /* fond principal */
  --paper-2:  #F3F4F6;   /* gris clair : bandes alternées */
  --paper-3:  #E9EBEF;   /* gris un peu plus soutenu */

  --ink:      #0A0A0C;   /* noir : titres et texte */
  --ink-2:    #3E434C;   /* texte courant secondaire */
  --ink-3:    #757B86;   /* métadonnées, mentions */

  --navy:     #101B2E;   /* bleu nuit : aplats forts, pied de page */
  --navy-2:   #1C2E4C;   /* bleu nuit éclairci : survol */

  --line:     #E2E4E9;
  --line-2:   #C7CCD5;

  --wrap: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  /* SAFARI iOS — sans ça, le téléphone « gonfle » tout seul la taille du texte
     de certains blocs sans toucher à l'interligne. Nos gros titres sont en
     interligne serré (.92), donc les lignes finissent par se chevaucher :
     c'est le fameux « les phrases s'emboîtent ». */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* Le débordement est coupé ici ET sur body : sur iOS, le couper seulement
     sur body déstabilise les éléments en position:fixed (la navigation). */
  overflow-x:hidden;
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.62; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--ink); color:var(--paper); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

.mono{ font-family:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 34px; }
section{ position:relative; }

/* ---------- typographie ----------
   Gros titres : Anton, condensé lourd, toujours d'une seule couleur. */
h1,h2,h3,h4{ margin:0; color:var(--ink); text-wrap:balance; }
h1,h2{
  font-family:"Anton","Arial Narrow",Impact,"Helvetica Neue",sans-serif;
  font-weight:400; text-transform:uppercase; letter-spacing:.005em;
}
/* INTERLIGNE DES GROS TITRES — mesuré, pas choisi au jugé.
   Dans Anton, une capitale monte à 86 % de la taille de police au-dessus de
   la ligne de base, mais un accent circonflexe (Î, Ô, Â) monte à 111 % : il
   dépasse de 25 % au-dessus des lettres. Avec un interligne inférieur à 1,11
   l'accent d'une ligne vient donc mordre les lettres de la ligne du dessus —
   c'est ce qui arrivait au Î de « BOÎTE MAIL ». Le site étant en français,
   presque tous les titres en majuscules portent un accent : on ne peut pas
   descendre sous cette valeur.
   Ne pas se toucher ne suffit pas : il faut que l'œil voie un écart. Repère
   utilisé — le dégagement au-dessus de l'accent doit valoir environ 20 % de la
   hauteur d'une capitale. D'où 1.28 : à peu près 6 px sur un H2 de 39 px et
   12 px sur le gros titre. (1.16 n'en donnait que 2, 1.22 que 4.) */
h1{ font-size:clamp(2.9rem,7.6vw,6.2rem); line-height:1.28; }
h2{ font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.28; }
h3{ font-size:1.14rem; line-height:1.3; font-weight:700; letter-spacing:-.012em; }
p{ margin:0; color:var(--ink-2); text-wrap:pretty; }

/* neutralisé : Sly ne veut pas de titres bicolores */
.gold{ color:inherit; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; font-weight:700;
  color:var(--ink-3);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--ink); }

.lede{ font-size:1.06rem; max-width:58ch; color:var(--ink-2); }

/* ---------- révélation au scroll ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ transition:none; opacity:1; transform:none; } }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; font-weight:700;
  padding:15px 26px; border:1px solid transparent; border-radius:2px;
  transition:transform .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-solid{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-solid:hover{ background:var(--navy); border-color:var(--navy); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); }

/* Sur fond sombre — hero, bandes pleine largeur, blocs bleu nuit.
   Ciblé par le contexte et non par une classe à poser à la main :
   un bouton posé sur une photo doit rester lisible sans qu'on y pense. */
.on-dark .btn-solid, .hero .btn-solid, .bleed .btn-solid, .band--dark .btn-solid{
  background:#fff; color:var(--ink); border-color:#fff;
}
.on-dark .btn-solid:hover, .hero .btn-solid:hover, .bleed .btn-solid:hover, .band--dark .btn-solid:hover{
  background:var(--paper-2); border-color:var(--paper-2);
}
.on-dark .btn-ghost, .hero .btn-ghost, .bleed .btn-ghost, .band--dark .btn-ghost{
  border-color:rgba(255,255,255,.5); color:#fff;
}
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover, .bleed .btn-ghost:hover, .band--dark .btn-ghost:hover{
  border-color:#fff; background:rgba(255,255,255,.12);
}

/* ---------- étiquettes rubrique ----------
   Une seule forme : un mot, pas de pastille colorée. Seule l'étiquette
   « en direct » est pleine, parce qu'elle signale un état, pas une rubrique. */
.tag{
  display:inline-block; text-transform:uppercase; letter-spacing:.16em;
  font-size:.62rem; font-weight:700; color:var(--ink-3); background:none;
  border:0; padding:0;
}
.tag--live{
  color:var(--ink); padding:4px 9px; border-radius:2px; background:var(--paper-3);
}
.tag--win, .tag--fft{ color:var(--ink-3); }
.on-dark .tag, .bleed .tag, .une-main .tag, .article-head .tag{ color:rgba(255,255,255,.85); }
.on-dark .tag--live, .une-main .tag--live, .article-head .tag--live{
  background:rgba(255,255,255,.18); color:#fff;
}

/* ---------- emplacement photo en attente ---------- */
.ph{ position:relative; overflow:hidden; background:var(--paper-3); }
.ph img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transition:transform .8s var(--ease), opacity .4s ease;
}
.ph::after{
  content:attr(data-slot); position:absolute; inset:auto 0 0 0; padding:10px 14px;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  font-family:ui-monospace,Menlo,Consolas,monospace; opacity:0; transition:opacity .3s ease;
}
.ph.is-empty::after{ opacity:1; }
.ph.is-empty img{ opacity:0; }

/* ==================================================================
   OUVERTURE DU SITE
   Page noire, logo au centre, on clique pour entrer.
   Elle ne s'affiche qu'une fois par visite : la revoir à chaque page
   deviendrait vite pénible.
   ================================================================== */
.opening{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center;
  background:#000; color:#fff; cursor:pointer;
  opacity:1; transition:opacity .55s var(--ease), visibility .55s;
}
.opening[hidden]{ display:none; }
.opening.is-closing{ opacity:0; visibility:hidden; pointer-events:none; }
.opening-inner{ display:flex; flex-direction:column; align-items:center; gap:34px; padding:32px; text-align:center; }

.opening-logo{ width:min(190px, 44vw); height:auto; }
/* Repli tant que le fichier du logo n'est pas déposé dans img/ */
.opening-mot{
  display:none;
  font-family:"Anton","Arial Narrow",Impact,sans-serif; font-weight:400;
  text-transform:uppercase; font-size:clamp(2.2rem,7vw,3.6rem); line-height:1; letter-spacing:.01em;
}
.opening-mot span{
  display:block; font-family:"Helvetica Neue",Arial,sans-serif; font-weight:700;
  font-size:.26em; letter-spacing:.42em; margin-top:12px; opacity:.7;
}
.opening-cta{
  font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  display:inline-flex; align-items:center; gap:12px;
  /* « Entrez dans le système » est bien plus long que « Entrer » : sur un
     petit écran, les traits de part et d'autre le poussaient hors du cadre. */
  max-width:100%; text-align:center;
}
@media (max-width:420px){
  .opening-cta{ letter-spacing:.16em; gap:8px; }
  .opening-cta::before, .opening-cta::after{ width:14px; }
}
.opening-cta::before, .opening-cta::after{
  content:""; width:26px; height:1px; background:rgba(255,255,255,.4);
}
.opening:hover .opening-cta, .opening:focus-visible .opening-cta{ color:#fff; }
.opening:focus-visible{ outline:2px solid #fff; outline-offset:-6px; }

/* pendant l'ouverture, la page derrière ne défile pas */
body.opening-actif{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .opening{ transition:none; }
}

/* ==================================================================
   TRANSITION DE PAGE
   ================================================================== */
.wipe{
  position:fixed; inset:0; z-index:300; pointer-events:none;
  background:var(--ink); transform:scaleY(0); transform-origin:top;
}
.wipe.active{ animation:wipeIn .55s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes wipeIn{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@media (prefers-reduced-motion:reduce){ .wipe.active{ animation:none; display:none; } }

/* ==================================================================
   NAVIGATION
   ================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px 34px; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), padding .35s var(--ease),
             border-color .35s var(--ease), color .35s var(--ease);
  /* SAFARI iOS — une barre en position:fixed au-dessus d'une page qui défile
     laisse des fantômes : l'ancien rendu n'est pas effacé et le nom apparaît
     deux fois, en blanc et en noir, légèrement décalés.
     On force sa propre couche de composition SANS `transform` ni
     `will-change:transform` : ces deux-là feraient de la barre le référentiel
     de ses descendants en position:fixed, et le panneau du menu mobile en est
     un — il se retrouverait mal placé et mal dimensionné. */
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
/* au-dessus du hero sombre : nav en blanc, sans fond */
.nav.over-hero{ color:#fff; }
.nav.scrolled{
  /* Safari ne connaît toujours que la version préfixée. Sans elle, la barre
     n'est pas floutée du tout sur iPhone et Mac. */
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding:12px 34px; border-color:var(--line); color:var(--ink);
}

/* Titre demandé par Sly : NEOPADEL collé + MEDIA, sur une seule ligne */
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; position:relative; z-index:220; }

/* UN SEUL SIGNE, DE LA MÊME COULEUR QUE LE NOM (demande de Sly).
   Il y avait avant deux images superposées — une claire, une foncée — dont on
   masquait l'une ou l'autre. Safari les affichait parfois toutes les deux.
   Ici il n'y a plus qu'un élément : le dessin sert de pochoir et la couleur
   vient de `currentColor`, donc le signe est toujours exactement de la teinte
   du texte à côté, blanc sur le hero et noir sur fond clair. Rien à basculer,
   donc rien qui puisse se dédoubler. */
.brand-logo{
  width:32px; height:28px; flex-shrink:0; display:block;
  background-color:currentColor;
  -webkit-mask-image:url("../img/logo-blanc.png"); mask-image:url("../img/logo-blanc.png");
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-position:center;    mask-position:center;
  -webkit-mask-size:contain;       mask-size:contain;
}
@media (max-width:560px){ .brand-logo{ width:27px; height:24px; } }
.brand-text{
  font-family:"Anton","Arial Narrow",Impact,sans-serif; font-weight:400;
  text-transform:uppercase; font-size:1.32rem; letter-spacing:.005em; line-height:1;
  white-space:nowrap;
}
.brand-text span{
  font-family:"Helvetica Neue",Arial,sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.28em; margin-left:2px;
}
@media (max-width:560px){
  .brand-text{ font-size:1.08rem; }
  .brand-text span{ font-size:.6rem; letter-spacing:.2em; }
}

.nav-links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav-links > li{ position:relative; }
.nav-links > li > a{
  display:inline-flex; align-items:center; gap:6px; padding:10px 13px;
  text-transform:uppercase; letter-spacing:.12em; font-size:.71rem; font-weight:700;
  color:inherit; opacity:.72; transition:opacity .22s ease;
}
.nav-links > li > a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-links > li > a:hover, .nav-links > li > a.active{ opacity:1; }
.nav-links > li > a:hover::after, .nav-links > li > a.active::after{ transform:scaleX(1); }
.caret{ width:8px; height:8px; opacity:.6; transition:transform .28s var(--ease); }
.nav-links > li:hover .caret{ transform:rotate(180deg); }

.submenu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:252px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:3px; padding:8px;
  list-style:none; margin:0; box-shadow:0 18px 44px rgba(10,10,12,.13);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-links > li:hover .submenu, .nav-links > li:focus-within .submenu{ opacity:1; visibility:visible; transform:none; }
.submenu a{
  display:block; padding:11px 14px; font-size:.8rem; color:var(--ink-2); border-radius:2px;
  transition:background .2s ease, color .2s ease;
}
.submenu a:hover{ background:var(--paper-2); color:var(--ink); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; background:none; border:0; padding:0; flex-shrink:0;
  position:relative; z-index:220;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:currentColor; transition:transform .28s var(--ease), opacity .28s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1200px){
  .nav-toggle{ display:flex; }
  .nav.menu-open{ color:var(--ink); }
  .nav-links{
    position:fixed; inset:0 0 auto 0; z-index:210;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); color:var(--ink); padding:92px 34px 34px;
    /* Le vh sert de repli : les Safari d'avant 15.4 ignorent svh. */
    max-height:100vh; max-height:100svh; overflow-y:auto; border-bottom:1px solid var(--line);
    transform:translateY(-101%); opacity:0; pointer-events:none;
    transition:transform .38s var(--ease), opacity .38s var(--ease);
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links > li > a{ padding:17px 0; font-size:.92rem; opacity:1; border-bottom:1px solid var(--line); justify-content:space-between; }
  .nav-links > li > a::after{ display:none; }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:none; border:0; border-bottom:1px solid var(--line); border-radius:0;
    padding:0 0 10px; display:none;
  }
  .submenu.open{ display:block; }
  .submenu a{ padding:10px 0 10px 16px; border-left:2px solid var(--line-2); margin-left:2px; }
  .submenu a:hover{ background:none; }
  @media (prefers-reduced-motion:reduce){ .nav-links{ transition:none; } }
}
@media (max-width:560px){
  .nav, .nav.scrolled{ padding:14px 18px; }
  .nav-links{ padding:84px 18px 28px; }
}

/* ==================================================================
   HERO — pleine largeur, façon Altus : média plein cadre + voile + titre
   ================================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:150px 34px 58px; overflow:hidden; color:#fff; background:var(--ink);
}
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--navy); }
.hero-media video, .hero-media img{
  /* La vidéo est VERTICALE (720x1280, tournée au téléphone). Sur un écran
     large, le hero n'en montre qu'une tranche horizontale : à 22 % on ne
     voyait que la verrière et le grillage, les joueurs étaient coupés.
     À 46 % la tranche tombe sur les joueurs. En mobile, le hero est lui aussi
     vertical : la vidéo s'y affiche presque entière, ce réglage n'y change
     quasiment rien. */
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,8,12,.52) 0%, rgba(6,8,12,.28) 42%, rgba(6,8,12,.88) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; width:100%; }
.hero .eyebrow{ color:rgba(255,255,255,.8); }
.hero .eyebrow::before{ background:#fff; }
.hero h1{ color:#fff; margin:18px 0 0; max-width:16ch; }
.hero h1 em{ font-style:normal; color:inherit; }
.hero .lede{ color:rgba(255,255,255,.82); margin-top:22px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:15px; margin-top:36px; }

/* repère de défilement : un trait fixe, sans animation */
.scroll-cue{
  position:absolute; right:34px; bottom:54px; z-index:2; display:flex; align-items:center; gap:12px;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.65);
  writing-mode:vertical-rl;
}
.scroll-cue i{ display:block; width:1px; height:46px; background:rgba(255,255,255,.45); }
@media (max-width:900px){ .scroll-cue{ display:none; } }
@media (max-width:560px){ .hero{ padding:120px 18px 42px; } }

/* ---------- hero des pages intérieures ---------- */
.page-hero{
  position:relative; padding:160px 34px 56px; overflow:hidden;
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
.page-hero-inner{ max-width:var(--wrap); margin:0 auto; }
.page-hero h1{ font-size:clamp(2.4rem,5.6vw,4.6rem); margin-top:16px; }
.page-hero .lede{ margin-top:18px; }
@media (max-width:560px){ .page-hero{ padding:124px 18px 44px; } }

.crumb{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.crumb a:hover{ color:var(--ink); }
.crumb span{ margin:0 8px; opacity:.5; }

/* ==================================================================
   BANDE PLEINE LARGEUR (demande de Sly : photos bord à bord)
   ================================================================== */
/* Les photos de Sly sont verticales : les recadrer en bandeau les mutilait.
   La bande occupe donc toute la largeur de l'écran, mais la photo y est posée
   ENTIÈRE, à pleine hauteur, sur un fond gris clair. Rien n'est coupé. */
.bleed{
  /* Haute exprès : une photo verticale en bandeau ne laisse voir qu'une fraction
     de sa hauteur. Plus la bande est haute, plus on voit la personne. */
  position:relative; min-height:clamp(460px, 56vw, 1120px);
  display:flex; align-items:flex-end; overflow:hidden;
  background:var(--ink); color:#fff; padding:0;
}
.bleed .ph{ position:absolute; inset:0; background:var(--ink); }

/* RÈGLE DE CADRAGE — on ne prend jamais une tranche au milieu de la photo.
   Le cadre est ancré soit en haut (`is-top`), soit en bas (`is-bottom`), pour
   que les personnes soient vues d'un seul tenant et non coupées des deux côtés.
   Chaque photo est choisie selon l'endroit où se trouve son sujet. */
.bleed .ph img{ object-position:center top; }
.bleed .ph.is-bottom img{ object-position:center bottom; }

.bleed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,8,12,.28) 0%, rgba(6,8,12,.12) 34%, rgba(6,8,12,.9) 100%);
}
.bleed-inner{
  position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; width:100%;
  padding:64px 34px 56px; display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.bleed h2{ color:#fff; max-width:18ch; }
.bleed p{ color:rgba(255,255,255,.86); max-width:50ch; }
.bleed .eyebrow{ color:rgba(255,255,255,.82); }
.bleed .eyebrow::before{ background:#fff; }

@media (max-width:560px){
  .bleed{ min-height:66vh; min-height:66svh; }
  .bleed-inner{ padding:48px 18px 40px; }
}

/* ==================================================================
   BLOCS DE SECTION
   ================================================================== */
.band{ padding:120px 0; }
.band--alt{ background:var(--paper-2); }
.band--dark{ background:var(--navy); color:#fff; }
.band--dark h2, .band--dark h3{ color:#fff; }
.band--dark p{ color:rgba(255,255,255,.78); }
.band--dark .eyebrow{ color:rgba(255,255,255,.72); }
.band--dark .eyebrow::before{ background:#fff; }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:26px;
  flex-wrap:wrap; margin-bottom:54px;
}
.section-head h2{ margin-top:12px; }
.section-head p{ max-width:44ch; }

.link-more{
  display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink);
  padding-bottom:5px; border-bottom:2px solid var(--ink);
  transition:gap .22s var(--ease);
}
.link-more:hover{ gap:15px; }
.link-more svg{ width:13px; height:13px; }
.band--dark .link-more, .bleed .link-more{ color:#fff; border-color:#fff; }

/* ==================================================================
   À LA UNE
   ================================================================== */
.une{ display:grid; grid-template-columns:1.4fr .6fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.une-main{ position:relative; background:var(--paper-3); min-height:640px; display:flex; overflow:hidden; color:#fff; }
.une-main .ph{ position:absolute; inset:0; }
.une-main .ph img{ object-position:center 34%; }

.une-main::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,8,12,.1) 0%, rgba(6,8,12,.42) 48%, rgba(6,8,12,.9) 100%);
}
.une-body{ position:relative; z-index:2; align-self:flex-end; padding:42px; max-width:60ch; }
.une-body h2{ color:#fff; margin:16px 0 14px; font-size:clamp(1.9rem,3.4vw,2.9rem); }
.une-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.une-side{ display:flex; flex-direction:column; background:var(--paper); }
.une-item{
  flex:1; padding:26px 28px; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; gap:9px;
  transition:background .28s var(--ease);
}
.une-item:last-child{ border-bottom:0; }
.une-item:hover{ background:var(--paper-2); }
.une-item h3{ font-size:1rem; }
.une-item .une-meta{ font-size:.62rem; color:var(--ink-3); }
@media (max-width:980px){
  .une{ grid-template-columns:1fr; }
  .une-main{ min-height:440px; }
  .une-body{ padding:30px 22px; }
}

/* ==================================================================
   GRILLES ET CARTES
   ================================================================== */
.grid{ display:grid; gap:26px; }
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ border-color:var(--ink); }
.card-media{ aspect-ratio:4/5; }

.card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card-body p{ font-size:.9rem; }
.card-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.card-foot .go{ color:var(--ink); font-weight:700; display:inline-flex; align-items:center; gap:7px; transition:gap .22s var(--ease); }
.card:hover .card-foot .go{ gap:13px; }
.card-foot svg{ width:12px; height:12px; }
.card--portrait .card-media{ aspect-ratio:3/4; }
.card--tall .card-media{ aspect-ratio:4/5; }
.band--alt .card{ background:var(--paper); }
.band--dark .card{ background:var(--navy-2); border-color:rgba(255,255,255,.16); }
.band--dark .card-foot{ border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.65); }
.band--dark .card-foot .go{ color:#fff; }

/* ==================================================================
   FILTRES
   ================================================================== */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filters button{
  background:none; border:1px solid var(--line-2); color:var(--ink-2);
  padding:10px 18px; border-radius:2px;
  text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:700;
  transition:border-color .22s ease, color .22s ease, background .22s ease;
}
.filters button:hover{ border-color:var(--ink); color:var(--ink); }
.filters button.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ==================================================================
   RÉSULTATS
   ================================================================== */
.results{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--paper); }
.result-row{
  display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:center;
  padding:20px 26px; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.result-row:last-child{ border-bottom:0; }
.result-row:hover{ background:var(--paper-2); }
.result-when{ font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.result-when b{ display:block; color:var(--ink); font-size:.82rem; letter-spacing:.06em; margin-bottom:3px; }
.result-main strong{ display:block; font-size:1rem; font-weight:700; color:var(--ink); }
.result-main span{ font-size:.82rem; color:var(--ink-3); }
.result-score{ font-size:1.04rem; font-weight:800; letter-spacing:.03em; color:var(--ink); white-space:nowrap; }
.result-score em{ font-style:normal; color:var(--ink-3); font-weight:600; }
@media (max-width:760px){
  .result-row{ grid-template-columns:1fr; gap:9px; padding:18px 20px; }
  .result-score{ font-size:.95rem; }
}

/* ==================================================================
   COMPÉTITIONS À VENIR
   ================================================================== */
.compets{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:900px){ .compets{ grid-template-columns:1fr; } }
.compet{
  background:var(--paper); padding:32px 28px; display:flex; flex-direction:column; gap:13px;
  position:relative; overflow:hidden; transition:background .3s var(--ease);
}

.compet:hover{ background:var(--paper-2); }

.compet-date{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.compet h3{ font-size:1.22rem; }
.compet-place{ font-size:.84rem; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.compet-place svg{ width:14px; height:14px; opacity:.65; flex-shrink:0; }
.compet-count{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.compet-count b{ color:var(--ink); font-size:.9rem; letter-spacing:.02em; }

/* ==================================================================
   INSIDE
   ================================================================== */
.inside-band{ padding:96px 0; background:var(--paper-2); }
.inside-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:980px){ .inside-hero{ grid-template-columns:1fr; } }
.inside-hero .ph{ aspect-ratio:1; }
.inside-copy{ background:var(--paper); padding:44px; display:flex; flex-direction:column; justify-content:center; gap:17px; }
.inside-copy h2{ font-size:clamp(1.8rem,3vw,2.6rem); }
.inside-play{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.inside-play i{
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  border:2px solid #fff; background:rgba(10,10,12,.36);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.inside-play i::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.inside-hero:hover .inside-play i, .card:hover .inside-play i{ transform:scale(1.08); background:rgba(10,10,12,.6); }
@media (max-width:560px){ .inside-copy{ padding:28px 22px; } }

/* ==================================================================
   TABLEAUX ET ACCORDÉON
   ================================================================== */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:3px; background:var(--paper); }
table.data{ width:100%; border-collapse:collapse; min-width:640px; }
table.data th{
  text-align:left; padding:15px 22px; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:700; border-bottom:2px solid var(--ink); background:var(--paper-2);
  white-space:nowrap;
}
table.data td{ padding:15px 22px; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-2); }
table.data tbody tr:last-child td{ border-bottom:0; }
table.data tbody tr{ transition:background .22s ease; }
table.data tbody tr:hover{ background:var(--paper-2); }
table.data td strong{ color:var(--ink); font-weight:700; }
table.data td .rank{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:2px;
  font-size:.78rem; font-weight:800; color:var(--ink-3); border:1px solid var(--line-2);
}
table.data tr:nth-child(1) td .rank,
table.data tr:nth-child(2) td .rank,
table.data tr:nth-child(3) td .rank{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ==================================================================
   DOCUMENTS OFFICIELS — rubrique Infos fédérales
   Une liste de fichiers à ouvrir, pas des articles à lire.
   ================================================================== */
.docs{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--paper); }
.doc{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  padding:20px 24px; border-bottom:1px solid var(--line);
  transition:background .22s var(--ease);
}
.doc:last-child{ border-bottom:0; }
.doc:hover{ background:var(--paper-2); }
.doc-type{
  display:grid; place-items:center; width:48px; height:48px; flex-shrink:0;
  border:1px solid var(--line-2); border-radius:3px;
  font-size:.62rem; font-weight:800; letter-spacing:.06em; color:var(--ink-2);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.doc:hover .doc-type{ border-color:var(--ink); color:var(--ink); }
.doc-corps{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.doc-corps strong{ font-size:1rem; font-weight:700; color:var(--ink); }
.doc-precision{ font-size:.86rem; color:var(--ink-2); }
.doc-meta{ font-size:.74rem; color:var(--ink-3); letter-spacing:.02em; }
.doc-action{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding-bottom:4px; border-bottom:2px solid var(--ink);
  transition:gap .22s var(--ease);
}
.doc:hover .doc-action{ gap:13px; }
.doc-action svg{ width:14px; height:14px; }
@media (max-width:640px){
  .doc{ grid-template-columns:auto 1fr; gap:14px; padding:18px; }
  .doc-action{ grid-column:2; justify-self:start; margin-top:8px; }
}

.docs-vide{
  border:1px dashed var(--line-2); border-radius:4px; background:var(--paper-2);
  padding:56px 30px; text-align:center;
}
.docs-vide h2{ font-size:clamp(1.5rem,3vw,2.2rem); }
.docs-vide p{ margin:14px auto 26px; max-width:44ch; }

.accordion{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--paper); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-item:last-child{ border-bottom:0; }
.acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:0; color:var(--ink); text-align:left;
  padding:22px 26px; font-size:1rem; font-weight:700; transition:background .22s ease;
}
.acc-head:hover{ background:var(--paper-2); }
.acc-head i{ width:14px; height:14px; position:relative; flex-shrink:0; }
.acc-head i::before, .acc-head i::after{
  content:""; position:absolute; background:var(--ink); left:0; top:6px; width:14px; height:2px;
  transition:transform .28s var(--ease);
}
.acc-head i::after{ transform:rotate(90deg); }
.acc-item.open .acc-head i::after{ transform:rotate(0); }
.acc-panel{ display:none; padding:0 26px 26px; }
.acc-item.open .acc-panel{ display:block; }
.acc-panel p + p{ margin-top:12px; }
.acc-panel ul{ margin:12px 0 0; padding-left:20px; color:var(--ink-2); font-size:.92rem; }
.acc-panel li{ margin-bottom:8px; }

/* ==================================================================
   SHOP
   ================================================================== */
.product{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:3px; overflow:hidden; position:relative;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.product:hover{ border-color:var(--ink); }
.product-media{ aspect-ratio:1; background:var(--paper-2); }

.product-badge{ position:absolute; top:14px; left:14px; z-index:3; }
.product-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-body .cat{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.product-body h3{ font-size:.98rem; }
.product-price{ margin-top:auto; padding-top:14px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.product-price b{ font-size:1.14rem; font-weight:800; }
.product-price s{ color:var(--ink-3); font-size:.84rem; }
.product .buy{
  display:block; text-align:center; padding:14px; border-top:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; font-weight:700; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.product .buy:hover{ background:var(--ink); color:#fff; }

.shop-note{
  margin-top:32px; padding:22px 26px; border:1px solid var(--line-2); border-radius:3px;
  font-size:.86rem; color:var(--ink-2); background:var(--paper-2);
}

/* ==================================================================
   RÉSEAUX SOCIAUX
   ================================================================== */
.social-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .social-grid{ grid-template-columns:1fr; } }
.social-card{
  border:1px solid var(--line); border-radius:3px; background:var(--paper);
  padding:28px; display:flex; flex-direction:column; gap:16px; min-height:330px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.social-card:hover{ border-color:var(--ink); }
.social-card > svg{ width:26px; height:26px; color:var(--ink); }
.social-card h3{ font-size:1.05rem; }
.social-embed{
  flex:1; border:1px dashed var(--line-2); border-radius:3px; display:grid; place-items:center;
  text-align:center; padding:20px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-family:ui-monospace,Menlo,Consolas,monospace; min-height:150px;
  background:var(--paper-2);
}
.social-embed iframe, .social-embed blockquote{ width:100%; border:0; }

/* ==================================================================
   NEWSLETTER / CTA
   ================================================================== */
.cta-band{ padding:96px 0; text-align:center; background:var(--navy); color:#fff; }
.cta-band h2{ color:#fff; margin:16px auto 16px; max-width:20ch; }
.cta-band p{ margin:0 auto; max-width:52ch; color:rgba(255,255,255,.8); }
.cta-band .eyebrow{ color:rgba(255,255,255,.72); }
.cta-band .eyebrow::before{ background:#fff; }
.newsletter{ display:flex; gap:12px; max-width:520px; margin:34px auto 0; flex-wrap:wrap; }
.newsletter input{
  flex:1; min-width:220px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35);
  color:#fff; padding:15px 18px; border-radius:2px; transition:border-color .22s ease;
}
.newsletter input::placeholder{ color:rgba(255,255,255,.55); }
.newsletter input:focus{ outline:none; border-color:#fff; }
.cta-band .btn-solid{ background:#fff; color:var(--ink); border-color:#fff; }
.cta-band .btn-solid:hover{ background:var(--paper-2); border-color:var(--paper-2); }
.cta-band .btn-ghost{ border-color:rgba(255,255,255,.42); color:#fff; }
.cta-band .btn-ghost:hover{ border-color:#fff; }
.form-note{ font-size:.68rem; color:var(--ink-3); margin-top:14px; }
.cta-band .form-note{ color:rgba(255,255,255,.6); }

/* ==================================================================
   FORMULAIRE CONTACT
   ================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr; gap:42px; } }
.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.field label{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); font-weight:700; }
.field input, .field select, .field textarea{
  /* Safari iOS habille les champs à sa façon : coins arrondis et ombre
     intérieure imposés. On repart d'un champ nu, comme ailleurs. */
  -webkit-appearance:none; appearance:none;
  background:var(--paper); border:1px solid var(--line-2); color:var(--ink);
  padding:14px 16px; border-radius:2px; transition:border-color .22s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink); }
.field textarea{ min-height:170px; resize:vertical; }
.field select{
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; gap:0; } }
.form-ok{
  display:none; margin-top:20px; padding:16px 20px; border-radius:2px;
  border:1px solid var(--navy); background:var(--paper-2); color:var(--navy); font-size:.86rem;
}
.form-ok.show{ display:block; }

.contact-aside{ border:1px solid var(--line); border-radius:3px; background:var(--paper-2); padding:32px; }
.contact-aside h3{ margin-bottom:16px; }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ padding:16px 0; border-bottom:1px solid var(--line); }
.contact-list li:last-child{ border-bottom:0; }
.contact-list span{ display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
.contact-list b{ font-size:.98rem; font-weight:700; }
.contact-list a:hover{ text-decoration:underline; }

/* ==================================================================
   ARTICLE
   ================================================================== */
.article-hero{ position:relative; border-bottom:1px solid var(--line); }
.article-cover{ position:relative; height:min(74vh,680px); height:min(74svh,680px); color:#fff; background:var(--navy); }
.article-cover .ph{ position:absolute; inset:0; }
.article-cover .ph img{ object-position:center 26%; }
.article-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,8,12,.4) 0%, rgba(6,8,12,.3) 40%, rgba(6,8,12,.92) 100%);
}
.article-head{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 34px 50px; }
.article-head .wrap{ padding:0; }
.article-head h1{ color:#fff; font-size:clamp(2.2rem,5vw,4.2rem); margin:16px 0 18px; max-width:20ch; }
.article-head .crumb{ color:rgba(255,255,255,.72); }
.article-head .crumb a:hover{ color:#fff; }
.article-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.article-meta b{ color:#fff; }
@media (max-width:560px){ .article-head{ padding:0 18px 36px; } }

.prose{ max-width:70ch; margin:0 auto; }
.prose > * + *{ margin-top:26px; }
.prose p{ font-size:1.06rem; line-height:1.78; color:var(--ink-2); }
.prose h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); margin-top:52px; }
.prose h3{ font-size:1.2rem; margin-top:38px; }
.prose blockquote{
  margin:44px 0; padding:26px 30px; border-left:3px solid var(--ink); background:var(--paper-2);
  font-size:1.2rem; line-height:1.6; color:var(--ink); font-weight:600; letter-spacing:-.01em;
}
.prose blockquote cite{ display:block; margin-top:14px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-style:normal; font-weight:700; }
.prose figure{ margin:44px 0; }
.prose figure .ph{ aspect-ratio:4/5; max-width:540px; margin:0 auto; }
.prose figcaption{ margin-top:12px; font-size:.74rem; color:var(--ink-3); text-align:center; }
.prose ul, .prose ol{ padding-left:22px; color:var(--ink-2); }
.prose li{ margin-bottom:10px; line-height:1.75; }
.prose a{ color:var(--ink); border-bottom:2px solid var(--line-2); font-weight:600; }
.prose a:hover{ border-color:var(--ink); }

/* Galerie dans un article — pensée pour les récaps de journée d'un tournoi.
   Elle déborde la colonne de texte : les photos respirent, le texte reste lisible. */
.article-gallery{ margin:56px 0; }
.article-gallery h3{ margin-bottom:20px; }
.article-gallery .gallery{ grid-template-columns:repeat(4,1fr); gap:12px; }
.article-gallery .form-note{ margin-top:14px; }
@media (min-width:1100px){
  .article-gallery{ width:min(1000px, calc(100vw - 68px)); margin-left:50%; transform:translateX(-50%); }
}
@media (max-width:680px){ .article-gallery .gallery{ grid-template-columns:repeat(2,1fr); } }

.share{ display:flex; align-items:center; gap:14px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line); }
.share span{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.share a{
  width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line-2);
  border-radius:2px; color:var(--ink-2); transition:border-color .22s ease, color .22s ease, transform .22s ease;
}
.share a:hover{ border-color:var(--ink); color:var(--ink); }
.share svg{ width:16px; height:16px; }

/* ==================================================================
   GALERIE + VISIONNEUSE
   ================================================================== */
/* GALERIE — en colonnes, pas en grille.
   L album mele des photos verticales et horizontales. Une grille a cases
   egales aurait impose un format unique et rogne la moitie des images : pour
   un photographe, c est inacceptable. En colonnes, chaque photo garde ses
   proportions et se range d elle-meme. */
.gallery{ columns:4; column-gap:14px; }
@media (max-width:1000px){ .gallery{ columns:3; } }
@media (max-width:680px){ .gallery{ columns:2; } }
.gallery .shot{ break-inside:avoid; margin:0 0 14px; overflow:hidden; }
.gallery .shot img{ width:100%; height:auto; display:block; transition:transform .5s var(--ease); }
.gallery .shot{ cursor:zoom-in; border-radius:2px; }
.gallery .shot:hover img{ transform:scale(1.05); }

.lightbox{
  position:fixed; inset:0; z-index:400; background:rgba(6,8,12,.96);
  display:none; align-items:center; justify-content:center; padding:5vh 4vw; color:#fff;
}
.lightbox.open{ display:flex; }
.lightbox img, .lightbox video{ max-width:100%; max-height:82vh; max-height:82svh; object-fit:contain; }
/* vidéos verticales : on les borne en largeur pour ne pas les étirer */
.lightbox video{ width:auto; max-width:min(440px,92vw); background:#000; }
.lightbox figcaption{ margin-top:16px; text-align:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.lightbox-close{
  position:fixed; top:22px; right:26px; width:44px; height:44px; border-radius:2px;
  background:none; border:1px solid rgba(255,255,255,.45); color:#fff; font-size:1.5rem; line-height:1;
}
.lightbox-close:hover{ border-color:#fff; }

/* ==================================================================
   BANDEAUX PARTENAIRES — tout en bas de l'accueil
   De la publicité : elle doit se voir sans casser la sobriété du site.
   Un filet discret, aucun effet, et le nom du partenaire en clair pour
   qu'on sache toujours de qui vient le message.
   ================================================================== */
.partenaires-band{ padding:72px 0 88px; background:var(--paper-2); }

/* ---------- bandeau défilant ----------
   Le bandeau sort de la marge et occupe toute la largeur : un défilement
   qui s'arrête à 34 px du bord donne l'impression d'être coincé. */
.partenaires-defile{
  overflow:hidden;
  /* Les cartes s'effacent en approchant des bords au lieu d'être tranchées. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.partenaires-piste{
  display:flex; width:max-content;
  animation:defilerPartenaires var(--duree,45s) linear infinite;
}
.partenaires-serie{ display:flex; gap:20px; padding-right:20px; }
/* On glisse d'exactement une série sur deux : le raccord ne se voit pas. */
@keyframes defilerPartenaires{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}
/* Au survol on s'arrête : sinon impossible de lire un nom ou de cliquer.
   `:active` couvre le tactile, où il n'y a pas de survol : poser le doigt
   fige le bandeau, ce qui rend le lien atteignable sur téléphone. */
.partenaires-defile:hover .partenaires-piste,
.partenaires-defile:active .partenaires-piste,
.partenaires-defile:focus-within .partenaires-piste{ animation-play-state:paused; }
/* Mouvement réduit demandé : plus de défilement, on fait glisser à la main. */
@media (prefers-reduced-motion:reduce){
  .partenaires-piste{ animation:none; }
  .partenaires-defile{ overflow-x:auto; }
}

.partenaire{
  flex:0 0 300px; width:300px;
  display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:4px; overflow:hidden; color:inherit;
  transition:border-color .25s var(--ease);
}
@media (max-width:560px){ .partenaire{ flex-basis:250px; width:250px; } }
a.partenaire:hover{ border-color:var(--ink); }
.partenaire img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--paper-3);
}
.partenaire-nom{
  display:block; padding:12px 16px; border-top:1px solid var(--line);
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
a.partenaire:hover .partenaire-nom{ color:var(--ink); }

/* ==================================================================
   PIED DE PAGE
   ================================================================== */
.footer{ background:var(--navy); color:#fff; padding:72px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:44px; }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:11px; }
.footer li a{ font-size:.88rem; color:rgba(255,255,255,.7); transition:color .2s ease; display:inline-block; }
.footer li a:hover{ color:#fff; }
.footer-brand p{ margin-top:18px; font-size:.88rem; max-width:36ch; color:rgba(255,255,255,.7); }
.footer .brand-text{ color:#fff; }
/* Les icônes étaient écrites en blanc en dur — pensées pour le pied de page
   sombre. Sur la page Contact, fond blanc, elles étaient donc invisibles.
   Elles suivent maintenant la couleur du texte qui les entoure, et ce sont
   les fonds sombres qui font exception. */
.socials{ display:flex; gap:11px; margin-top:24px; }
.socials a{
  width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line-2);
  border-radius:2px; color:var(--ink); transition:border-color .22s ease, background .22s ease, transform .22s ease;
}
.socials a:hover{ border-color:var(--ink); background:var(--paper-2); }
.socials svg{ width:17px; height:17px; }

.footer .socials a, .band--dark .socials a, .cta-band .socials a{
  border-color:rgba(255,255,255,.32); color:#fff;
}
.footer .socials a:hover, .band--dark .socials a:hover, .cta-band .socials a:hover{
  border-color:#fff; background:rgba(255,255,255,.12);
}
.footer-bottom{
  margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.06em; color:rgba(255,255,255,.6);
}
.footer-bottom a:hover{ color:#fff; }


/* ==================================================================
   DIVERS
   ================================================================== */
.hide{ display:none !important; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Ancres de la page Contact : les liens « Envoyer un résultat », « Annoncer
   un tournoi »… amènent au formulaire. Le décalage évite que la barre de
   navigation, fixe, ne recouvre le haut du formulaire à l'arrivée. */
.ancre{ display:block; height:0; scroll-margin-top:120px; }

/* ==================================================================
   BANDEAU PUBLICITAIRE — sous la vidéo d'accueil
   Emplacement payant. Format fourni par Sly : 1920 x 566, soit un
   rapport de 3,39. On le fixe en CSS pour que la hauteur soit réservée
   AVANT le chargement de l'image : sans ça, le reste de la page saute
   vers le bas quand l'annonce arrive.
   ================================================================== */
.pub{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.pub-cadre{
  position:relative; overflow:hidden;
  aspect-ratio:1920 / 566; max-height:566px;
}
.pub-piste{ display:flex; height:100%; }
.pub-slide{
  flex:0 0 100%; width:100%; height:100%;
  opacity:0; transition:opacity .6s var(--ease);
  position:absolute; inset:0; pointer-events:none;
}
.pub-slide.est-actif{ opacity:1; pointer-events:auto; }
.pub-slide img{ width:100%; height:100%; object-fit:cover; }

/* La mention doit rester lisible : une annonce payante se signale. */
.pub-mention{
  position:absolute; top:10px; right:12px; z-index:2;
  font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); background:rgba(255,255,255,.82);
  padding:4px 8px; border-radius:2px;
}

.pub-points{
  position:absolute; left:0; right:0; bottom:12px; z-index:2;
  display:flex; justify-content:center; gap:8px;
}
.pub-points button{
  width:26px; height:4px; padding:0; border:0; border-radius:2px;
  background:rgba(10,10,12,.22); transition:background .25s var(--ease);
}
.pub-points button.est-actif{ background:var(--ink); }
.pub-points button:hover{ background:rgba(10,10,12,.5); }

/* SUR TÉLÉPHONE — un bandeau de rapport 3,4 posé sur 375 px ne fait que
   111 px de haut : le texte des annonces, dessiné pour 1600 px de large,
   devenait illisible. On recadre donc en 2:1, ce qui remonte la bande à
   187 px et grossit tout de 69 %.
   Pourquoi 2:1 et pas 16/9, qui aurait donné 211 px ? Parce que le 16/9 ne
   laisse voir que 52 % de la largeur et coupait « 6 TERRAINS PRIVÉS » au
   dernier caractère. Le 2:1 en montre 59 % : les trois titres passent en
   entier. Mieux vaut un titre complet un peu plus petit qu'un titre tronqué.
   Chaque annonce indique dans data/publicites.json la tranche à privilégier. */
/* Le nom de l'annonceur n'apparaît que sur téléphone : en desktop le visuel
   entier est visible, la marque s'y lit déjà. */
.pub-annonceur{ display:none; }

@media (max-width:700px){
  .pub-cadre{ aspect-ratio:2 / 1; }
  .pub-slide img{ object-position:var(--cadrage-mobile, 50%) center; }
  .pub-annonceur{
    display:block; text-align:center; padding:9px 16px;
    font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-3);
  }
}
@media (max-width:560px){
  .pub-mention{ top:6px; right:8px; font-size:.5rem; }
  .pub-points{ bottom:8px; }
  .pub-points button{ width:20px; }
}

/* Titre d'album dans l'espace photos */
.album-titre{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:38px 0 18px; font-size:1rem; text-transform:uppercase; letter-spacing:.14em;
}
.album-titre:first-of-type{ margin-top:0; }
.album-titre span{
  font-size:.68rem; font-weight:400; letter-spacing:.16em; color:var(--ink-3);
}

/* RESSOURCES SUR PETIT ÉCRAN
   La ligne était en trois colonnes (pastille | texte | « Consulter »). Sur un
   téléphone, il ne reste qu'une centaine de pixels pour le titre : le bouton
   « Consulter » venait alors se poser PAR-DESSUS le texte — c'est le
   débordement signalé sur « Classement national ».
   On repasse en deux lignes : pastille et titre en haut, action en dessous. */
@media (max-width:640px){
  .doc{
    grid-template-columns:auto 1fr; gap:12px 14px;
    padding:18px 18px; align-items:start;
  }
  .doc-type{ width:40px; height:40px; font-size:.56rem; }
  .doc-corps{ min-width:0; }
  .doc-corps strong{ font-size:.95rem; }
  .doc-meta{ font-size:.7rem; }
  /* l'action passe sous le texte, alignée avec lui */
  .doc-action{ grid-column:2; justify-self:start; margin-top:2px; }
}

/* Retours du formulaire de contact */
.form-erreur{
  display:none; margin-top:16px; padding:13px 16px; border-radius:2px;
  background:#FBEAE7; color:#9C2C1B; font-size:.9rem;
}
.form-erreur.show{ display:block; }
.flash-envoi{
  margin-bottom:22px; padding:14px 18px; border-radius:2px; font-size:.92rem;
}
.flash-envoi--ok{ background:#E8F3EC; color:#1C5B36; }
.flash-envoi--erreur{ background:#FBEAE7; color:#9C2C1B; }
/* Le piège à robots : présent dans la page, invisible pour l'œil, hors du
   parcours au clavier. On évite display:none, que certains robots détectent. */
.piege{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* Mention légale encore à remplir : impossible de la manquer à la relecture. */
.a-remplir{
  background:#FBEAE7; color:#9C2C1B; padding:1px 6px; border-radius:2px;
  font-size:.88em; font-weight:700;
}

/* ARRIVÉE SUR UNE ANCRE
   La barre de navigation est fixe : sans ce décalage, cliquer sur « Calendrier »
   dans le menu amenait le titre de la section JUSTE DERRIÈRE la barre, qui le
   recouvrait. On réserve sa hauteur. */
section[id], a.bleed[id]{ scroll-margin-top:104px; }
@media (max-width:560px){ section[id], a.bleed[id]{ scroll-margin-top:88px; } }

/* PHOTO POSÉE AU MILIEU D'UN ARTICLE
   Elle sort légèrement de la colonne de texte pour respirer, sans jamais
   déborder de l'écran. La photo garde ses proportions : Sly livre du portrait
   comme du paysage, on ne rogne rien. */
.prose .photo-texte{
  margin:38px 0; max-width:none;
  width:100%;
}
@media (min-width:900px){
  /* un léger débord de part et d'autre, façon magazine */
  .prose .photo-texte{ width:calc(100% + 96px); margin-left:-48px; margin-right:-48px; }
}
.prose .photo-texte img{
  width:100%; height:auto; display:block; border-radius:2px;
}
.prose .photo-texte figcaption{
  margin-top:10px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); text-align:center;
}