/* ==================================================================
   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 ---------- */
/* Le masquage initial est conditionné par « js-anim », posée dans l'en-tête
   et retirée si js/script.js ne démarre pas (voir inc/partials.php). Sans
   cette condition, un script bloqué ou absent laissait toute la page à
   opacity:0 — donc blanche. Par défaut, le contenu est donc VISIBLE. */
.js-anim .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js-anim .reveal.is-visible{ opacity:1; transform:none; }
/* Même sélecteur que ci-dessus, sinon cette règle perdrait en spécificité et
   les personnes qui demandent moins d'animations resteraient sur un écran
   masqué en attendant le script. */
@media (prefers-reduced-motion:reduce){ .js-anim .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); }
/* La hauteur du bandeau était plafonnée à 680 px quelle que soit la largeur
   de l'écran. Sur un 4K, la bande faisait donc 3825 x 680 : un rapport de
   5,6 contre 2,1 sur un portable. La photo n'y apparaissait plus qu'à 27 %,
   et se retrouvait agrandie deux fois au-delà de sa définition.
   Le plafond suit maintenant la largeur au-delà d'environ 2000 px : le
   bandeau garde un rapport lisible sur les grands écrans. En dessous, rien
   ne change — 34vw reste inférieur à 680 px jusque-là. */
.article-cover{ position:relative; height:min(74vh, max(680px, 34vw)); height:min(74svh, max(680px, 34vw)); 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;
}

/* Une pièce jointe posée au fil du texte par [doc N] : la liste des paires
   d'un championnat, un règlement. La carte est celle des pages Infos
   fédérales et Inside ; seules les marges changent, pour qu'elle respire
   comme une citation. Et .prose souligne tous ses liens — ce qui barrerait
   la carte de bout en bout : on le retire ici. */
.prose .docs--article{ margin:38px 0; }
.prose .docs--article .doc{ border-bottom:0; }
.prose .docs--article .doc-corps strong{ font-weight:700; }
.prose .docs--article a,
.prose .docs--article a:hover{ border-bottom:0; }
@media (max-width:560px){
  /* Sur téléphone, « Ouvrir » et sa flèche passent sous le titre plutôt que
     de comprimer la colonne du milieu à quelques caractères. */
  .prose .docs--article .doc{ grid-template-columns:auto 1fr; gap:14px; padding:18px; }
  .prose .docs--article .doc-action{ grid-column:2; justify-content:flex-start; }
}

/* ------------------------------------------------------------------
   TÉLÉPHONE : voir le début de l'article sans avoir à chercher.
   Deux défauts signalés par des lecteurs sur iPhone, mesurés sur un
   écran réellement visible de 390 x 659 (barres de Safari comprises) :

   1. Le bloc titre (443 px avec un long titre) était plus haut que ce
      que le bandeau pouvait contenir. Comme il est calé en bas en
      position absolue, il débordait vers le haut et le fil d'Ariane
      passait SOUS la barre de navigation.
   2. Le bandeau gardait une hauteur fixe de 74 % de l'écran, suivie
      des 120 px de marge de .band : 121 px de blanc, puis le texte
      commençait à 631 px — hors de l'écran sur beaucoup de téléphones.
      Sur les Safari d'avant 15.4, qui ignorent svh et calculent vh sur
      l'écran barres masquées, on ne voyait carrément aucun texte.

   Le bandeau n'a donc plus de hauteur fixe sur téléphone : il s'adapte
   à son titre, avec une marge haute qui réserve la place de la barre.
   ------------------------------------------------------------------ */
@media (max-width:560px){
  .article-cover{
    height:auto;
    /* Le repli en vh manquait ici, alors que le commentaire ci-dessus met en
       garde contre ce cas précis. Sur un Safari d'avant 15.4, qui ignore svh,
       min() devenait invalide et la déclaration entière était jetée : le
       bandeau perdait toute hauteur minimale et se réduisait à son titre.
       Les sept autres svh de la feuille avaient bien leur repli. */
    min-height:min(58vh, 420px);
    min-height:min(58svh, 420px);
    display:flex; align-items:flex-end;
    padding-top:88px;
  }
  .article-head{ position:relative; width:100%; }
  .article-head h1{ font-size:clamp(1.9rem,7.2vw,2.5rem); margin:12px 0 14px; }
  .article-meta{ gap:6px 14px; }
}

/* La marge des grandes bandes était la même partout : 120 px en haut et
   en bas. Sur un écran d'ordinateur elle fait respirer, sur un téléphone
   elle repousse le texte hors de vue. */
@media (max-width:900px){ .band{ padding:84px 0; } }
@media (max-width:560px){ .band{ padding:52px 0; } }

/* ------------------------------------------------------------------
   COUVERTURE MONTRÉE EN ENTIER
   Le bandeau d'article est large et peu haut. Une photo bien plus haute
   que large — un montage de deux remises de trophées, par exemple — n'y
   entre qu'à 26 % : têtes coupées, moitié basse invisible.
   Quand article.php repère ce cas, la photo est posée ENTIÈRE au centre,
   et une copie agrandie et floutée d'elle-même remplit les côtés pour que
   la bande reste pleine. Rien n'est coupé.
   ------------------------------------------------------------------ */
.article-cover .ph--entiere .fond-flou{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:blur(26px) saturate(1.1); transform:scale(1.18); opacity:.5;
}
.article-cover .ph--entiere img:not(.fond-flou){
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
}

/* COUVERTURE CARRÉE OU VERTICALE, AU-DELÀ DE 1500 px.
   Le bandeau se cale sur la largeur de la fenêtre : plus l'écran est large,
   plus une photo verticale doit être agrandie pour le remplir, et plus la
   tranche visible est mince. Sur les treize couvertures du site, on passe
   de 31-46 % de la photo visible en 1440 à 23-27 % en 4K — soit, sur un
   32 pouces, un bandeau presque vide.
   Au-dessus de 1500 px, la photo est donc montrée en entier sur un
   agrandissement flou d'elle-même. Le fond flou est fourni par article.php.
   En dessous, le cadrage d'origine est conservé : sur un portable ou un
   téléphone, le recadrage remplit bien le bandeau. */
/* Le fond flou est masqué par défaut, HORS de toute requête média, et
   seulement rallumé au-dessus de 1500 px. Deux bornes complémentaires
   (max-width:1499 / min-width:1500) laissaient un trou : une largeur
   fractionnaire — un écran mis à l'échelle à 150 %, un zoom navigateur —
   ne correspondait ni à l'une ni à l'autre, et l'image floue retombait
   dans le flux, en double sous la couverture. Constaté à 1499 px. */
.article-cover .ph--portrait .fond-flou{ display:none; }

@media (min-width:1500px){
  .article-cover .ph--portrait .fond-flou{
    display:block;
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    filter:blur(26px) saturate(1.1); transform:scale(1.18); opacity:.5;
  }
  .article-cover .ph--portrait img:not(.fond-flou){
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center;
  }
}

/* Couverture PANORAMIQUE : elle remplit le bandeau sur un ordinateur, donc
   on n'y touche pas. Sur un telephone le bandeau devient presque carre et
   la photo serait coupee en plein milieu : on la montre alors en entier,
   avec le meme fond flou que les couvertures tres hautes. */
/* Même précaution que pour .ph--portrait : au-dessus de 700 px ce fond flou
   n'était positionné par aucune règle et restait donc dans le flux, en
   doublon sous la couverture. La photo recadrée le recouvrait, il ne se
   voyait pas — mais le navigateur décodait et floutait une image grand
   format pour rien, sur les trois articles concernés. */
.article-cover .ph--large .fond-flou{ display:none; }
@media (max-width:700px){
  .article-cover .ph--large .fond-flou{
    display:block;
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    filter:blur(26px) saturate(1.1); transform:scale(1.18); opacity:.5;
  }
  .article-cover .ph--large img:not(.fond-flou){
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:center 32%;
  }
}

/* ------------------------------------------------------------------
   COUVERTURE TÉLÉPHONE À SON PROPRE CADRAGE
   Quand un fichier « …-tel.jpg » accompagne la couverture, article.php le
   sert en dessous de 700 px et donne au bandeau EXACTEMENT le rapport de
   cette version. La photo remplit alors la bande d'un bord à l'autre sans
   qu'on lui coupe quoi que ce soit, et sans bande floutée.
   Le bandeau reste plafonné : une photo très haute ne doit pas repousser
   le texte de l'article hors de l'écran — c'était le défaut signalé par
   les lecteurs sur iPhone.
   ------------------------------------------------------------------ */
@media (max-width:700px){
  .article-cover--tel{
    /* width:100% est indispensable : avec un aspect-ratio et un
       max-height, le navigateur preferait rétrécir la LARGEUR pour
       respecter le rapport — le bandeau tombait a 304 px sur un ecran de
       390, avec du blanc a droite. On fixe donc la largeur, et la hauteur
       se deduit du rapport de la photo. */
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:var(--ratio-tel, 3/4);
  }
  .article-cover--tel .ph img{ object-fit:cover; object-position:center; }
}

/* ------------------------------------------------------------------
   TÉLÉPHONE : laisser respirer la photo de couverture.
   Le bloc titre occupait 49 % du bandeau, et le voile sombre qui le rend
   lisible assombrissait la photo jusqu'en haut. On descend le texte contre
   le bas de la bande et on allège le voile dans sa partie haute : la photo
   reste claire là où il n'y a rien d'écrit, et le titre garde son fond
   sombre là où il en a besoin.
   ------------------------------------------------------------------ */
@media (max-width:700px){
  /* Uniquement les bandeaux qui ont leur propre cadrage telephone : ils
     sont hauts, la photo a de la place et le texte peut descendre. Sur les
     autres couvertures, plus courtes et parfois tres claires, alleger le
     voile rendait le titre difficile a lire — on n'y touche pas. */
  .article-cover--tel .article-head{ padding:0 18px 14px; }
  .article-cover--tel::after{
    background:linear-gradient(180deg,
      rgba(6,8,12,.28) 0%,
      rgba(6,8,12,.08) 26%,
      rgba(6,8,12,.42) 52%,
      rgba(6,8,12,.95) 100%);
  }
}

/* ------------------------------------------------------------------
   PETIT TITRE POSÉ SUR LA PHOTO   —   [photo N | Le titre]
   Demande de Sly : « des petits titres intégrés dans la photo ».
   Le titre se pose en bas de l'image, en capitales, sur un dégradé qui
   ne noircit que le bas : la photo reste lisible partout ailleurs.
   ------------------------------------------------------------------ */
.prose .photo-texte .photo-cadre{ position:relative; display:block; line-height:0; }
.prose .photo-texte .photo-cadre img{ border-radius:2px; }
.prose .photo-texte .photo-titre{
  position:absolute; left:0; right:0; bottom:0;
  padding:56px 20px 16px;
  font-family:"Anton","Arial Narrow",Impact,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(1.05rem,3.2vw,1.65rem); line-height:1.16; color:#fff;
  background:linear-gradient(180deg, rgba(6,8,12,0) 0%, rgba(6,8,12,.28) 42%, rgba(6,8,12,.86) 100%);
  border-radius:0 0 2px 2px;
}
.prose .photo-texte .photo-titre b,
.prose .photo-texte .photo-titre strong{ font-weight:400; color:#fff; }
@media (max-width:560px){ .prose .photo-texte .photo-titre{ padding:44px 15px 13px; } }

/* Couverture PAYSAGE : sur un grand écran, le bandeau devient plus large que
   la photo, qui se retrouve rognée en haut et en bas. Le cadrage par défaut
   (26 % du débordement retirés par le haut) coupait la tête du sujet. On ancre
   ces photos en haut : rien n'est perdu au-dessus. Les couvertures verticales
   gardent leur cadrage habituel. */
.article-cover .ph--paysage img{ object-position:center top; }

/* ------------------------------------------------------------------
   BANDEAU DE CONSENTEMENT À LA MESURE D'AUDIENCE

   Il n'apparaît que si GA_MESURE est renseignée dans boot.php, et que si
   le visiteur n'a pas encore répondu. Posé en bas de l'écran plutôt qu'en
   plein milieu : il n'empêche pas de lire, et ne se fait pas passer pour
   un passage obligé.

   Les deux boutons ont la MÊME taille et la même lisibilité. Un refus
   discret ou grisé vicierait le consentement, et c'est le motif le plus
   fréquemment sanctionné par la CNIL.
   ------------------------------------------------------------------ */
.consentement{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  max-width:980px; margin:0 auto;
  padding:20px 24px;
  background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:4px;
  box-shadow:0 18px 50px rgba(10,10,12,.22);
  opacity:0; transform:translateY(14px);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.consentement.visible{ opacity:1; transform:none; }
.consentement[hidden]{ display:none; }
.consentement-texte{ flex:1 1 320px; min-width:0; }
.consentement-texte strong{
  display:block; margin-bottom:6px;
  font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  font-size:1.05rem; color:var(--ink);
}
.consentement-texte p{ margin:0; font-size:.88rem; line-height:1.6; }
.consentement-texte a{ color:var(--ink); border-bottom:2px solid var(--line-2); font-weight:600; }
.consentement-texte a:hover{ border-color:var(--ink); }
.consentement-choix{ display:flex; gap:12px; flex:0 0 auto; }
/* Même largeur minimale pour les deux : aucun des deux choix n'est
   visuellement privilégié. */
.consentement-choix .btn{ min-width:132px; justify-content:center; }

@media (max-width:620px){
  .consentement{
    left:10px; right:10px; bottom:10px;
    gap:16px; padding:18px;
  }
  .consentement-choix{ width:100%; }
  /* Sur téléphone les deux boutons partagent la largeur à parts égales. */
  .consentement-choix .btn{ flex:1 1 0; min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .consentement{ transition:none; }
}