/* =====================================================================
   AAF 95 — feuille de style unique
   Palette et inclinaison reprises du logo : rouge #D50F16, gris #868684,
   italique à -8° comme le lettrage « AAF95 ».
   ===================================================================== */

:root{
  --rouge:#D50F16;
  --rouge-fonce:#A70A10;
  --gris:#868684;
  --gris-clair:#C9CAC7;
  --anthracite:#1C1F22;
  --anthracite-2:#2A2F34;
  --papier:#F1F2F0;
  --blanc:#FFFFFF;
  --trait:rgba(28,31,34,.13);
  --trait-sombre:rgba(255,255,255,.16);
  --titre:"Barlow Condensed","Arial Narrow",sans-serif;
  --texte:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --chiffre:"Doto","Courier New",monospace;
  --marge:clamp(1.1rem,4vw,3rem);
  --large:1240px;
  --pente:-8deg;
}

*,*::before,*::after{box-sizing:border-box}
/* Un élément masqué par l'attribut « hidden » doit disparaître, quoi qu'il ait
   comme display par ailleurs. Sans cette règle, une carte en display:flex reste
   visible malgré hidden : c'est ce qui neutralisait les filtres des actualités.
   Elle vaut pour tout le site, filtres et blocs dépliants compris. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--blanc);color:var(--anthracite);
  font-family:var(--texte);font-size:1.02rem;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--rouge)}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

h1,h2,h3,h4{font-family:var(--titre);font-weight:800;font-style:italic;
  text-transform:uppercase;line-height:.95;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.4rem,1.3rem + 4.6vw,4.6rem)}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem)}
h4{font-size:1.02rem;font-weight:700}

.conteneur{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.evitement{position:absolute;left:-9999px;background:var(--rouge);color:#fff;padding:.7rem 1.2rem;z-index:200}
.evitement:focus{left:.5rem;top:.5rem}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--rouge);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Étiquette inclinée : la signature du site ---------- */
.etiquette{display:inline-block;background:var(--rouge);color:#fff;
  transform:skewX(var(--pente));padding:.3rem 1.1rem;margin-bottom:1.1rem}
.etiquette span{display:block;transform:skewX(calc(-1 * var(--pente)));
  font-family:var(--titre);font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.11em;font-size:.76rem}
.etiquette--gris{background:var(--anthracite)}

/* ---------- Boutons ---------- */
.bouton{--fond:var(--rouge);--encre:#fff;
  display:inline-block;background:var(--fond);color:var(--encre);border:0;cursor:pointer;
  padding:.85rem 1.6rem;text-decoration:none;transform:skewX(var(--pente));
  transition:background .15s ease,transform .15s ease}
.bouton>span{display:block;transform:skewX(calc(-1 * var(--pente)));
  font-family:var(--titre);font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:.05em;font-size:.95rem;white-space:nowrap}
.bouton:hover{background:var(--rouge-fonce);transform:skewX(var(--pente)) translateY(-2px)}
.bouton--sombre{--fond:var(--anthracite)}
.bouton--sombre:hover{background:#000}
.bouton--vide{--fond:transparent;--encre:var(--anthracite);box-shadow:inset 0 0 0 2px currentColor}
.bouton--vide:hover{--fond:var(--anthracite);--encre:#fff;box-shadow:none}
/* Deux pièges de couleur sur fond sombre, corrigés ici une fois pour toutes :
   1. le bouton vide héritait de l'encre anthracite → invisible sur l'anthracite ;
   2. « .section--sombre a{color:#fff} » repeignait aussi les boutons-liens,
      ce qui rendait « bouton--clair » blanc sur blanc. */
.section--sombre .bouton--vide,.tete .bouton--vide,.hero .bouton--vide{--encre:#fff}
.section--sombre .bouton--vide:hover,.tete .bouton--vide:hover,.hero .bouton--vide:hover{--fond:#fff;--encre:var(--anthracite)}
.section--sombre a.bouton,.tete a.bouton,.hero a.bouton{color:var(--encre)}
.bouton--clair{--fond:#fff;--encre:var(--anthracite)}
.bouton--clair:hover{background:var(--papier)}
.bouton[disabled],.bouton[aria-disabled="true"]{opacity:.45;pointer-events:none}
.boutons{display:flex;flex-wrap:wrap;gap:.9rem}
/* Sur petit écran, un libellé long doit pouvoir passer à la ligne :
   sinon le bouton dépasse et toute la page défile horizontalement. */
@media(max-width:560px){
  .bouton{padding:.8rem 1.15rem;max-width:100%}
  .bouton>span{white-space:normal}
}

/* ---------- Barre utilitaire ---------- */
.utilitaire{background:var(--anthracite);color:rgba(255,255,255,.72);font-size:.79rem}
.utilitaire__in{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;align-items:center;min-height:38px}
.utilitaire p{margin:0}
.utilitaire__liens{display:flex;align-items:center;gap:1.2rem}
.utilitaire a{color:rgba(255,255,255,.8);text-decoration:none}
.utilitaire a:hover{color:#fff}
.utilitaire__cta{background:var(--rouge);color:#fff!important;padding:.35rem .9rem;
  font-family:var(--titre);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}
/* Icônes de réseaux : mêmes fichiers que les tuiles de la page Contact */
.utilitaire__reseau{display:inline-flex;align-items:center;line-height:0}
.utilitaire__reseau img{width:20px;height:20px;object-fit:contain;opacity:.88;
  transition:opacity .15s ease,transform .15s ease}
.utilitaire__reseau:hover img{opacity:1;transform:translateY(-1px) scale(1.08)}
@media(max-width:700px){.utilitaire__liens{gap:.9rem}}
@media(max-width:700px){.utilitaire p{display:none}.utilitaire__in{justify-content:flex-end}}

/* ---------- En-tête et menu ---------- */
.entete{position:sticky;top:0;z-index:100;background:#fff;border-bottom:3px solid var(--rouge);
  box-shadow:0 6px 24px -18px rgba(0,0,0,.6)}
.entete__in{display:flex;align-items:center;gap:1.5rem;min-height:82px}
.logo{display:flex;align-items:center;gap:.9rem;text-decoration:none;flex:none}
.logo img{width:112px;height:auto}
.logo__txt{font-family:var(--titre);font-style:italic;text-transform:uppercase;line-height:1.15;
  font-size:.68rem;letter-spacing:.1em;color:var(--gris);padding-left:.9rem;border-left:1px solid var(--trait)}
.logo__txt b{display:block;font-weight:700;font-size:.86rem;color:var(--anthracite);letter-spacing:.05em}
@media(max-width:1400px){.logo__txt{display:none}}

.menu{margin-left:auto}
.menu>ul{display:flex;align-items:center;gap:.2rem}
.menu__lien{display:block;background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--titre);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.02em;color:var(--anthracite);padding:.8rem .55rem;
  position:relative;white-space:nowrap}
.menu__lien i{display:inline-block;width:.42em;height:.42em;margin-left:.4em;vertical-align:.15em;
  border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg)}
.menu__lien::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:.35rem;height:3px;
  background:var(--rouge);transform:scaleX(0) skewX(var(--pente));transform-origin:left;transition:transform .18s ease}
.menu__lien:hover::after,.menu__lien.est-actif::after{transform:scaleX(1) skewX(var(--pente))}
.menu__deroulant{position:relative}
.menu__sous{position:absolute;top:100%;left:0;min-width:250px;background:var(--anthracite);
  padding:.4rem 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;border-top:3px solid var(--rouge)}
.menu__deroulant:hover .menu__sous,
.menu__deroulant:focus-within .menu__sous,
.menu__sous[data-ouvert="true"]{opacity:1;visibility:visible;transform:none}
.menu__sous a{display:block;padding:.62rem 1.2rem;color:rgba(255,255,255,.82);text-decoration:none;
  font-size:.92rem;border-left:3px solid transparent}
.menu__sous a:hover{background:var(--anthracite-2);color:#fff;border-left-color:var(--rouge)}

.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  align-items:center;gap:.55rem;padding:.5rem}
.burger span{display:block;width:24px;height:3px;background:var(--anthracite);margin:4px 0;transition:.2s}
.burger em{font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.9rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1160px){
  .burger{display:flex}
  .burger>div{display:block}
  .menu{position:fixed;inset:120px 0 0;background:#fff;overflow-y:auto;padding:0 var(--marge) 3rem;
    display:none;border-top:1px solid var(--trait)}
  .menu[data-ouvert="true"]{display:block}
  .menu>ul{flex-direction:column;align-items:stretch;gap:0}
  .menu__lien{width:100%;text-align:left;padding:1rem 0;border-bottom:1px solid var(--trait);font-size:1.15rem}
  .menu__lien::after{display:none}
  .menu__lien.est-actif{color:var(--rouge)}
  .menu__deroulant{position:static}
  .menu__sous{position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:var(--papier);border-top:0;padding:.3rem 0 .8rem}
  .menu__sous[data-ouvert="true"]{display:block}
  .menu__sous a{color:var(--anthracite);padding:.6rem 1rem}
  .menu__sous a:hover{background:transparent;color:var(--rouge)}
}

/* ---------- Bandeau de tête des pages ---------- */
.tete{position:relative;background:var(--anthracite);color:#fff;overflow:hidden;
  padding-block:clamp(2.6rem,6vw,4.4rem)}
.tete::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(98deg,rgba(255,255,255,.045) 0 1px,transparent 1px 13px)}
.tete::after{content:"";position:absolute;right:-8%;top:-30%;width:44%;height:160%;
  background:var(--rouge);opacity:.14;transform:skewX(var(--pente))}
.tete__in{position:relative;max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.tete h1{max-width:22ch}
.tete p{margin-top:1.1rem;max-width:62ch;color:rgba(255,255,255,.76);font-size:1.06rem}
.fil{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);
  font-family:var(--titre);font-style:italic;font-weight:700;margin-bottom:.9rem}
.fil a{color:rgba(255,255,255,.75);text-decoration:none}

/* ---------- Hero de l'accueil ---------- */
.hero{position:relative;background:var(--anthracite);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(98deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px)}
.hero__bande{position:absolute;right:-10%;top:-20%;width:52%;height:140%;
  background:linear-gradient(160deg,var(--rouge),var(--rouge-fonce));opacity:.9;transform:skewX(var(--pente))}
@media(max-width:900px){.hero__bande{display:none}}
.hero__in{position:relative;max-width:var(--large);margin-inline:auto;padding:clamp(2.8rem,6vw,5rem) var(--marge);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(max-width:900px){.hero__in{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.7rem,1.4rem + 6.4vw,5.4rem)}
.hero h1 em{font-style:italic;color:var(--rouge)}
.hero__intro{margin-top:1.3rem;font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);color:rgba(255,255,255,.82);max-width:46ch}
.hero .boutons{margin-top:2rem}
.hero__chiffres{display:flex;flex-wrap:wrap;margin-top:2.4rem;border-top:1px solid var(--trait-sombre);padding-top:1.1rem;
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:.85rem;letter-spacing:.08em;color:rgba(255,255,255,.62)}
.hero__chiffres span{padding-right:1.1rem;margin-right:1.1rem;border-right:1px solid var(--trait-sombre)}
.hero__chiffres span:last-child{border:0;margin:0;padding:0}

/* ---------- Panneau du 4e arbitre ---------- */
.panneau{background:#0C0E10;border:1px solid rgba(213,15,22,.4);padding:1.4rem 1.5rem 1.3rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.panneau__titre{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.7rem;color:rgba(255,255,255,.55);margin-bottom:1rem}
.panneau__titre b{display:flex;align-items:center;gap:.4rem;color:var(--rouge)}
.point{width:7px;height:7px;border-radius:50%;background:var(--rouge);box-shadow:0 0 9px var(--rouge);animation:bat 2.4s infinite}
@keyframes bat{0%,100%{opacity:1}50%{opacity:.22}}
.panneau__horloge{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;text-align:center}
.panneau__horloge b{display:block;font-family:var(--chiffre);font-weight:800;
  font-size:clamp(2.1rem,1.2rem + 3vw,3rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.panneau__horloge small{display:block;margin-top:.4rem;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.4);font-family:var(--titre);font-style:italic;font-weight:700}
.panneau__suite{margin-top:1.2rem;padding-top:1rem;border-top:1px dashed rgba(255,255,255,.18);color:#fff;font-size:.95rem}
.panneau__suite strong{display:block;font-family:var(--titre);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:1.1rem}
.panneau__suite span{color:rgba(255,255,255,.55);font-size:.85rem}

/* ---------- Sections ---------- */
.section{padding-block:clamp(2.8rem,6vw,5rem)}
.section--papier{background:var(--papier)}
.section--sombre{background:var(--anthracite);color:#fff}
.section--sombre a{color:#fff}
.section__tete{max-width:64ch;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.section__tete p{margin-top:1rem;color:var(--gris);font-size:1.05rem}
.section--sombre .section__tete p{color:rgba(255,255,255,.72)}

/* ---------- Tuiles de rubriques ---------- */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1.3rem}
.tuile{position:relative;display:block;background:var(--blanc);border:1px solid var(--trait);
  padding:1.6rem 1.5rem 1.7rem;text-decoration:none;color:inherit;overflow:hidden;transition:.18s}
.tuile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rouge);
  transform:scaleY(0);transform-origin:top;transition:transform .2s ease}
.tuile:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(0,0,0,.5)}
.tuile:hover::before{transform:scaleY(1)}
.tuile h3{margin-bottom:.5rem}
.tuile p{color:var(--gris);font-size:.94rem;margin:0}
.tuile__fleche{display:block;margin-top:1.1rem;font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;font-size:.82rem;letter-spacing:.08em;color:var(--rouge)}

/* ---------- Actualités ---------- */
.actus{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem}
.actu{background:#fff;border:1px solid var(--trait);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.18s}
.actu:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(0,0,0,.45)}
.actu__img{aspect-ratio:16/9;background:var(--anthracite);position:relative;overflow:hidden}
.actu__img img{width:100%;height:100%;object-fit:cover}
.actu__img--vide::after{content:"AAF95";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--titre);font-style:italic;font-weight:800;font-size:2.2rem;letter-spacing:.06em;
  color:rgba(255,255,255,.13)}
.actu__corps{padding:1.2rem 1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
.actu time{font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.1em;color:var(--rouge)}
.actu h3{margin:.5rem 0 .6rem}
.actu p{color:var(--gris);font-size:.94rem;margin:0}
.actu__lire{margin-top:auto;padding-top:1.1rem;font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;font-size:.82rem;letter-spacing:.07em;color:var(--anthracite)}

/* ---------- Article ---------- */
.article{max-width:72ch;margin-inline:auto}
.article p{font-size:1.06rem;margin-bottom:1.2rem}
.article__meta{color:var(--gris);font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;
  font-family:var(--titre);font-style:italic;font-weight:700;margin-bottom:1.6rem}

/* ---------- Agenda ---------- */
.evenement{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:1.4rem;align-items:center;
  padding:1.3rem 0;border-top:1px solid var(--trait)}
.section--sombre .evenement{border-color:var(--trait-sombre)}
.evenement:last-child{border-bottom:1px solid var(--trait)}
.section--sombre .evenement:last-child{border-bottom-color:var(--trait-sombre)}
.evenement__date{text-align:center;border-right:1px solid var(--trait);padding-right:1rem}
.section--sombre .evenement__date{border-color:var(--trait-sombre)}
.evenement__date b{display:block;font-family:var(--titre);font-style:italic;font-weight:800;font-size:2.2rem;line-height:1}
.evenement__date span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:.2rem}
.evenement__meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.86rem;color:var(--gris);margin:.35rem 0 0}
.section--sombre .evenement__meta{color:rgba(255,255,255,.6)}
.evenement__txt{font-size:.93rem;color:var(--gris);margin-top:.5rem}
.evenement__actions{display:flex;flex-direction:column;gap:.5rem;align-items:stretch}
.evenement__actions .bouton{text-align:center;white-space:nowrap}
.section--sombre .evenement__txt{color:rgba(255,255,255,.7)}
.pastille{font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.68rem;padding:.2rem .6rem;background:var(--rouge);color:#fff}
/* ---------- Le code couleur de l'agenda ----------
   Une seule teinte par type, portée à la fois par la pastille de la ligne et
   par son bouton de filtre : on repère un rendez-vous à sa couleur avant même
   d'avoir lu son libellé. « Tout » reste en noir, seul à ne pas être un thème. */
:root{
  --t-reunion:#D50F16;        /* le rouge de l'amicale : nos rendez-vous */
  --t-rassemblement:#1F4E9C;
  --t-formation:#B45309;
  --t-sportif:#6B3FA0;
  --t-convivialite:#1D7A46;
  /* Page « Nos activités ». Deux teintes font écho à l'agenda : le vert des
     festivités rejoint celui de la convivialité, le violet des matchs celui
     du thème Sportif — ce sont les mêmes rendez-vous vus d'une autre page. */
  --t-match:#6B3FA0;
  --t-tournoi:#D50F16;
  --t-festivite:#1D7A46;
  --t-projet:#1F4E9C;
}
.pastille--reunion{background:var(--t-reunion)}
.pastille--rassemblement{background:var(--t-rassemblement)}
.pastille--formation{background:var(--t-formation)}
.pastille--sportif{background:var(--t-sportif)}
.pastille--convivialite{background:var(--t-convivialite)}

/* Le logo de l'organisateur, devant le titre du rendez-vous.
   Les images du site sont en display:block ; il faut le défaire ici pour que
   le logo reste sur la ligne du titre. Le carré blanc donne à chaque logo le
   même encombrement et le détache du fond sombre de la section — sans lui, le
   ballon de l'AAF 95, sombre et cerné de noir, disparaîtrait presque. */
.evenement__logo{display:inline-block;width:1.55em;height:1.55em;object-fit:contain;
  background:#fff;padding:2px;border-radius:2px;margin-right:.45rem;
  vertical-align:-.34em;flex:none}
@media(max-width:720px){
  .evenement{grid-template-columns:70px minmax(0,1fr)}
  .evenement .bouton{grid-column:2;justify-self:start}
  .evenement__actions{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}

/* ---------- L'archive des rendez-vous passés ----------
   Rien ne disparaît de l'agenda : une date franchie quitte la liste du haut et
   se range ici. Le bloc reste replié — il ne doit pas concurrencer ce qui est
   à venir — et chaque ligne se réduit à l'essentiel : quand, quoi, quel type,
   et où. Le texte de présentation, lui, reste dans inc/config.php. */
/* Pas de filet ici : la dernière ligne de l'agenda porte déjà le sien. */
.archive{margin-top:1.6rem}
.archive__bouton{display:flex;align-items:center;gap:.6rem;width:100%;
  background:transparent;border:0;padding:.5rem 0;cursor:pointer;text-align:left;
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.86rem;color:#fff}
.archive__bouton:hover:not(:disabled){color:var(--rouge)}
.archive__bouton:disabled{cursor:default;color:rgba(255,255,255,.4)}
.archive__bouton:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
/* Le chevron pivote vers le bas quand le panneau est ouvert. */
.archive__chevron{width:.5rem;height:.5rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);flex:none;
  margin-left:.15rem;transition:transform .18s ease}
.archive__bouton[aria-expanded="true"] .archive__chevron{transform:rotate(45deg)}
.archive__corps{padding-top:.8rem}
.archive__saison{font-family:var(--titre);font-style:italic;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;color:rgba(255,255,255,.55);
  margin:1.4rem 0 .4rem}
.archive__saison:first-child{margin-top:.4rem}
.archive__lignes{list-style:none;margin:0;padding:0}
/* Colonnes de largeur fixe : chaque ligne est sa propre grille, et sans cela
   les pastilles et les lieux ne s'aligneraient pas d'une ligne à l'autre. */
.archive__ligne{display:grid;grid-template-columns:8.4rem minmax(0,1fr) 7rem minmax(6rem,11rem);
  gap:.5rem 1.1rem;align-items:center;padding:.62rem 0;
  border-bottom:1px solid var(--trait-sombre);font-size:.92rem;color:rgba(255,255,255,.82)}
.archive__jour{color:rgba(255,255,255,.55);white-space:nowrap}
.archive__jour b{color:#fff;font-family:var(--titre);font-style:italic;font-weight:800;
  font-size:1.15rem;margin-right:.15rem}
.archive__titre{min-width:0}
.archive__lieu{color:rgba(255,255,255,.55);text-align:right}
/* Même traitement que dans la liste du haut : fond blanc pour que le ballon
   sombre de l'AAF 95 ne se perde pas sur l'anthracite. */
.archive__logo{display:inline-block;width:1.3em;height:1.3em;object-fit:contain;
  background:#fff;padding:2px;border-radius:2px;margin-right:.4rem;
  vertical-align:-.3em;flex:none}
/* Une archive est de la matière refroidie : les pastilles y sont plus
   discrètes que dans l'agenda vivant, sans perdre leur code couleur. */
.archive__ligne .pastille{opacity:.78;font-size:.62rem;justify-self:start}
@media(max-width:720px){
  .archive__ligne{grid-template-columns:minmax(0,1fr) auto;gap:.3rem .8rem}
  .archive__jour{grid-column:1;grid-row:1}
  .archive__ligne .pastille{grid-column:2;grid-row:1;justify-self:end}
  .archive__lieu{text-align:left}
  .archive__titre{grid-column:1/-1;grid-row:2}
  .archive__lieu{grid-column:1/-1;grid-row:3;text-align:left}
}
.filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.filtre{background:transparent;border:1px solid var(--trait);cursor:pointer;padding:.45rem 1rem;
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.06em;color:var(--gris)}
.section--sombre .filtre{border-color:var(--trait-sombre);color:rgba(255,255,255,.7)}
.filtre:hover{color:var(--rouge);border-color:var(--rouge)}
.filtre[aria-pressed="true"]{background:var(--rouge);color:#fff;border-color:var(--rouge)}

/* --- Filtres de l'agenda : chacun porte la couleur de son type --- */
.filtre[data-filtre]{display:inline-flex;align-items:center;gap:.5rem}
/* la pastille de couleur, visible avant même d'avoir cliqué */
.filtre[data-filtre]:not([data-filtre="tous"])::before{
  content:"";width:9px;height:9px;background:var(--teinte);
  transform:skewX(var(--pente));flex:none}
.filtre[data-filtre="reunion"]{--teinte:var(--t-reunion)}
.filtre[data-filtre="rassemblement"]{--teinte:var(--t-rassemblement)}
.filtre[data-filtre="formation"]{--teinte:var(--t-formation)}
.filtre[data-filtre="sportif"]{--teinte:var(--t-sportif)}
.filtre[data-filtre="convivialite"]{--teinte:var(--t-convivialite)}
.filtre[data-filtre]:hover{color:#fff;border-color:var(--teinte,#fff)}
.filtre[data-filtre][aria-pressed="true"]{
  background:var(--teinte);border-color:var(--teinte);color:#fff}
.filtre[data-filtre][aria-pressed="true"]::before{background:#fff}
/* « Tout » : noir, et le seul à ne porter aucune couleur de thème.
   Le liseré clair le détache du fond sombre de la section. */
.filtre[data-filtre="tous"][aria-pressed="true"]{
  background:var(--anthracite);border-color:rgba(255,255,255,.55);color:#fff}

/* ---------- Blocs, formulaires ---------- */
.bloc{background:#fff;border:1px solid var(--trait);padding:clamp(1.3rem,3vw,2.2rem);margin-bottom:1.6rem}
.section--papier .bloc{background:#fff}
.bloc__tete{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.bloc__tete h2,.bloc__tete h3{margin:0}
.numero{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--rouge);color:#fff;
  font-family:var(--chiffre);font-weight:800;font-size:1.15rem;margin-right:.7rem;
  transform:skewX(var(--pente));vertical-align:-.35rem}
.numero>span{transform:skewX(calc(-1 * var(--pente)))}

.champ{margin-bottom:1.05rem}
.champ label{display:block;font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;font-size:.82rem;margin-bottom:.35rem}
.champ input,.champ select,.champ textarea{width:100%;padding:.7rem .85rem;background:#fff;
  color:var(--anthracite);border:1px solid var(--gris-clair);border-radius:0;font-family:var(--texte)}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--rouge)}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.ligne--3{grid-template-columns:.85fr 1.15fr 1fr}
@media(max-width:640px){.ligne,.ligne--3{grid-template-columns:1fr}}
.erreur{color:var(--rouge);font-size:.82rem;margin-top:.3rem;display:none}
.champ[data-invalide="true"] .erreur{display:block}
.champ[data-invalide="true"] input,.champ[data-invalide="true"] select,.champ[data-invalide="true"] textarea{border-color:var(--rouge)}
.coche{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--gris);margin:1.1rem 0 .2rem}
.coche input{width:18px;height:18px;flex:none;margin-top:.25rem;accent-color:var(--rouge)}
.piege{position:absolute;left:-9999px}
.etat{margin-top:1.3rem;padding:1rem 1.2rem;background:var(--papier);border-left:4px solid var(--gris);
  font-size:.93rem;display:none}
.etat[data-ouvert="true"]{display:block}
.etat[data-niveau="ok"]{border-left-color:#1D7A46}
.etat[data-niveau="ko"]{border-left-color:var(--rouge)}
.note{font-size:.87rem;color:var(--gris)}

/* ---------- Tarifs et paiement ---------- */
/* ---------- L'avertissement « le bulletin d'abord » ----------
   Il barre la section de la cotisation : c'est un ordre de marche, pas une
   note de bas de page. Le liseré rouge et le fond crème le distinguent des
   encadrés d'information du reste du site. */
.avis{display:block;background:#FFF6F6;border:1px solid rgba(213,15,22,.28);
  border-left:5px solid var(--rouge);padding:1rem 1.2rem;margin:0 0 1.5rem;
  font-size:.97rem;line-height:1.55}
.avis b{color:var(--rouge)}
.avis a{display:inline-block;margin-left:.15rem;font-family:var(--titre);font-style:italic;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;
  white-space:nowrap}
/* Clic sur un bouton verrouillé : l'avertissement bat deux fois, pour que
   l'œil revienne dessus au lieu de chercher pourquoi rien ne s'est passé. */
@keyframes avisAttire{
  0%,100%{background:#FFF6F6;border-left-color:var(--rouge)}
  25%,75%{background:#FFE3E4;border-left-color:var(--rouge-fonce)}
}
.avis--attire{animation:avisAttire .5s ease 2}
@media(prefers-reduced-motion:reduce){.avis--attire{animation:none}}

/* Le bouton de paiement verrouillé fait exception à deux règles générales.
   1. Il reste cliquable : « .bouton[aria-disabled] » coupe normalement les
      clics, mais ici le clic sert justement à ramener l'adhérent au bulletin.
      Un bouton totalement mort n'explique rien à qui vient d'appuyer dessus.
   2. Son libellé passe à la ligne : il est plus long que « Payer en ligne »
      et la colonne du moyen de paiement est étroite — sans cela il déborde
      sur la colonne voisine. */
/* ---------- L'envoi du bulletin : un seul bouton ----------
   Il porte à lui seul toute l'action, y compris le paiement. Il est donc plus
   grand que les autres boutons du site, et le libellé peut passer à la ligne :
   « Envoyer mon bulletin et payer 57 € » est long, et doit le rester — c'est
   ce qui empêche de croire que l'envoi suffit. */
.envoi{margin-top:1.5rem}
.bouton--large{padding:1.05rem 2rem;max-width:100%}
.bouton--large>span{font-size:1.05rem;white-space:normal;line-height:1.3}
/* La phrase sous le bouton dit la suite avant qu'on appuie. */
.envoi__suite{margin:.7rem 0 0;color:var(--gris);font-size:.93rem;max-width:62ch}
/* Le mot sur le don HelloAsso : présent, mais plus discret que la consigne
   principale — c'est une précaution, pas une étape. */
.envoi__don{margin:.6rem 0 0;padding-left:.9rem;border-left:2px solid var(--trait);
  color:var(--gris);font-size:.88rem;max-width:62ch}
.envoi__don b{color:var(--anthracite)}
.etat__aparte{display:inline-block;margin-top:.5rem;font-size:.9rem;opacity:.85}
.envoi__autre{margin:.9rem 0 0}
/* Une action secondaire ne doit pas ressembler à un bouton : c'est ce qui
   faisait hésiter entre « Envoyer » et « Télécharger ». */
.lien-nu{background:none;border:0;padding:0;cursor:pointer;color:var(--gris);
  font-family:var(--texte);font-size:.9rem;text-decoration:underline;
  text-underline-offset:3px}
.lien-nu:hover{color:var(--rouge)}

/* Le recours de paiement, sous « Paiement en ligne » : masqué tant que le
   bulletin n'est pas parti, et jamais présenté comme un bouton. */
.moyen__rappel{margin:.9rem 0 0}
.moyen__rappel a{font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.82rem}

.tarifs{display:grid;gap:.6rem;margin-bottom:1.6rem}
.tarif{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border:1px solid var(--trait);padding:.85rem 1.1rem;background:var(--papier)}
.tarif b{font-family:var(--titre);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.02rem}
.tarif span{font-family:var(--chiffre);font-weight:800;font-size:1.5rem;color:var(--rouge)}
.moyens{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait)}
.moyen{background:#fff;padding:1.3rem 1.4rem}
.moyen h4{margin-bottom:.6rem;font-style:italic;text-transform:uppercase}
.moyen p{font-size:.89rem;color:var(--gris);margin-bottom:.8rem}
.iban{font-family:var(--chiffre);font-weight:800;font-size:1.02rem;color:var(--anthracite);word-break:break-all}

/* ---------- Calendrier mensuel ---------- */
.cal{border:1px solid var(--trait);background:#fff;margin-top:1.5rem}
.cal__tete{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding:1rem 1.2rem;border-bottom:1px solid var(--trait)}
.cal__nav{display:flex;align-items:center;gap:.7rem}
.cal__nav h2{margin:0;min-width:11ch;text-align:center}
.cal__fleche{width:2.4rem;height:2.4rem;display:grid;place-items:center;background:transparent;
  border:1px solid var(--trait);color:var(--anthracite);cursor:pointer;
  font-size:1.5rem;line-height:1;padding:0;transform:skewX(var(--pente))}
.cal__fleche>span{display:block;transform:skewX(calc(-1 * var(--pente)));margin-top:-.15rem}
.cal__fleche:hover:not(:disabled){border-color:var(--rouge);color:var(--rouge)}
.cal__fleche:disabled{opacity:.25;cursor:default}

/* ---------- Boutique adhérents ---------- */
.produit{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;padding:.8rem 0;border-bottom:1px solid var(--trait)}
.produit:last-of-type{border-bottom:0}
.produit__nom{flex:1 1 11rem;min-width:0}
/* La vignette : l'acheteur doit reconnaître l'article sans ouvrir le bon.
   Les articles sans visuel gardent un carré vide, sinon les noms ne
   s'alignent plus d'une ligne à l'autre. */
.produit__img{flex:none;width:72px;height:72px;object-fit:contain;background:#fff;
  border:1px solid var(--trait);padding:.25rem}
/* Trois articles n'ont pas de photo sur le bon officiel : plutôt qu'un carré
   vide qu'on prendrait pour une image cassée, on met la marque en filigrane. */
.produit__img--vide{display:grid;place-items:center;background:var(--papier)}
.produit__img--vide::after{content:"AAF95";font-family:var(--titre);font-style:italic;
  font-weight:800;font-size:.74rem;letter-spacing:.05em;color:var(--gris-clair)}
@media(max-width:560px){.produit__img{width:56px;height:56px}}
.produit__prix{width:4.2rem;text-align:right;color:var(--gris);font-weight:600;white-space:nowrap}
.produit__qte{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--titre);font-style:italic;
  font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.06em}
.produit__qte input{width:4.4rem;padding:.5rem .55rem;border:1px solid var(--gris-clair);border-radius:0;
  font-family:var(--texte);text-align:center;background:#fff;color:var(--anthracite)}
.produit__taille input{width:9.5rem;padding:.5rem .65rem;border:1px solid var(--gris-clair);border-radius:0;
  font-family:var(--texte);background:#fff;color:var(--anthracite)}
.produit input:focus{border-color:var(--rouge);outline:none}
.produit__total{width:5.2rem;text-align:right;font-weight:700;white-space:nowrap}
.commande-total{display:flex;justify-content:flex-end;align-items:baseline;gap:.7rem;margin-top:1.2rem;
  font-family:var(--titre);font-style:italic;font-weight:800;font-size:1.35rem;text-transform:uppercase}
.commande-total b{color:var(--rouge);font-size:1.6rem}
.produit--tailles{align-items:center}
.produit--tailles .produit__total--droite{margin-left:auto}
.tailles{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.15rem 0 .1rem}
/* Les tailles passent à la ligne : on les décale sous le nom de l'article,
   pas sous sa vignette, pour qu'on lise une colonne et non deux. */
.produit--tailles .tailles{padding-left:calc(72px + .9rem)}
@media(max-width:560px){.produit--tailles .tailles{padding-left:0}}
.taille{display:flex;flex-direction:column;align-items:center;gap:.22rem;
  font-family:var(--titre);font-style:italic;font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase}
.taille select{width:3.9rem;padding:.4rem .3rem;text-align:center;background:#fff;
  border:1px solid var(--gris-clair);border-radius:0;font-family:var(--texte);color:var(--anthracite)}
.taille select:focus{border-color:var(--rouge);outline:none}
.taille small{font-family:var(--texte);font-style:normal;font-weight:400;font-size:.7rem;
  letter-spacing:0;text-transform:none;color:var(--gris)}
.taille--epuise select{opacity:.35;cursor:not-allowed}
.taille--epuise small{color:var(--rouge);font-weight:600}

/* ---------- Partenaires ---------- */
.part{display:grid;grid-template-columns:210px 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
  background:#fff;border:1px solid var(--trait);padding:clamp(1.3rem,3vw,2.2rem);margin-bottom:1.6rem}
.part__logo{display:grid;place-items:center;padding:.6rem 0}
.part__logo img{max-width:100%;height:auto;max-height:110px;object-fit:contain}
.part__corps h3{margin:0 0 .6rem}
.part__corps p{margin:0}
.part__offre{margin-top:1.1rem!important;background:var(--rouge);color:#fff;display:inline-block;
  padding:.55rem 1rem;font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;transform:skewX(var(--pente))}
.part__visuels{grid-column:2/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.1rem;align-items:start}
.part__photo{margin:0}
.part__photo img{width:100%;height:auto;max-height:230px;object-fit:contain;display:block;
  background:var(--papier);border:1px solid var(--trait)}
.part__photo--large{grid-column:1/-1}
.part__photo--large img{max-height:none}
.part__photo figcaption{margin-top:.5rem;font-size:.84rem;color:var(--gris)}
.codes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}
.code{border:2px dashed var(--gris-clair);padding:.6rem 1.1rem;background:var(--papier)}
.code small{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gris)}
.code b{font-family:var(--titre);font-style:italic;font-weight:800;font-size:1.45rem;letter-spacing:.04em;color:var(--anthracite)}
.etapes{margin:1.3rem 0 0;padding-left:0;list-style:none;counter-reset:etape}
.etapes li{counter-increment:etape;position:relative;padding-left:2.6rem;margin-bottom:.75rem;line-height:1.55}
.etape__t{display:block;font-family:var(--titre);font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:.15rem}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:-.1rem;width:1.8rem;height:1.8rem;
  display:grid;place-items:center;background:var(--anthracite);color:#fff;
  font-family:var(--chiffre);font-weight:800;font-size:.95rem;transform:skewX(var(--pente))}
.tuile--inst .inst__logo{height:88px;display:flex;align-items:center;margin-bottom:1rem}
.tuile--inst .inst__logo img{max-height:88px;max-width:200px;width:auto;object-fit:contain}
/* Cinq institutions sur quatre colonnes : en flex centré, la ligne incomplète
   se recentre au lieu de rester collée à gauche. */
.tuiles--centre{display:flex;flex-wrap:wrap;justify-content:center}
.tuiles--centre>.tuile{flex:0 1 calc(25% - 1rem)}
@media(max-width:1000px){.tuiles--centre>.tuile{flex-basis:calc(33.333% - .9rem)}}
@media(max-width:700px){.tuiles--centre>.tuile{flex-basis:calc(50% - .65rem)}}
@media(max-width:480px){.tuiles--centre>.tuile{flex-basis:100%}}
@media(max-width:720px){
  .part{grid-template-columns:1fr}
  .part__visuels{grid-column:1/-1}
  .part__logo{justify-items:start}
  .part__logo img{max-height:80px}
}
.cal__cadre{width:100%;height:min(76vh,760px);border:0;display:block;background:var(--papier)}
.cal__mobile{display:none;padding:2.2rem 1.2rem;text-align:center}
@media(max-width:820px){.cal__cadre{display:none}.cal__mobile{display:block}}
.legende{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.3rem;font-size:.87rem;color:var(--gris)}
.legende span{display:inline-flex;align-items:center;gap:.55rem}
.legende i{width:14px;height:14px;display:block;flex:none}

/* ---------- Documents et listes ---------- */
/* Les filets de séparation sont portés par les cases, pas par le fond du
   conteneur : sinon, dès que la dernière ligne est incomplète, la place vide
   laisse apparaître une bande grise. */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px}
.grille>*{background:#fff;padding:1.3rem 1.4rem;box-shadow:0 0 0 1px var(--trait)}
.doc{text-decoration:none;color:inherit;display:block;transition:background .15s}
.doc:hover{background:var(--papier)}
.doc b{display:block;font-family:var(--titre);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:1.02rem;margin-bottom:.35rem}
.doc span{font-size:.79rem;color:var(--gris);letter-spacing:.08em;text-transform:uppercase}
/* Ligne de précision : sert à distinguer deux tuiles que le titre seul
   pourrait laisser confondre (rapport d'arbitre / feuille de frais). */
.doc__sous{display:block;font-style:normal;font-size:.9rem;line-height:1.4;
  color:var(--anthracite);margin:-.05rem 0 .5rem}
/* Document consultable en ligne : liseré rouge pour le distinguer d'un téléchargement */
.doc--lire{border-left:4px solid var(--rouge)}
.doc--lire span{color:var(--rouge)}
.portail{max-width:520px}
.portail .ligne{grid-template-columns:1fr auto;align-items:end;gap:.7rem}
@media(max-width:640px){.portail .ligne{grid-template-columns:1fr}}
.cache{display:none}

/* Changement d'adresse depuis une ligne de la liste des adhérents : le repli
   garde le tableau lisible tant qu'on n'en a pas besoin. */
.chg{display:inline-block;text-align:left}
.chg > summary{cursor:pointer;list-style:none;display:inline-block}
.chg > summary::-webkit-details-marker{display:none}
.chg__form{margin-top:.6rem;padding:.8rem;background:var(--papier);
  border:1px solid var(--trait);min-width:260px;white-space:normal}
.chg__form label{display:block;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.35rem}
.chg__form input{width:100%;padding:.5rem .6rem;border:1px solid var(--trait);
  background:#fff;font:inherit;font-size:.92rem}
.chg__form .bouton{margin-top:.6rem}

/* Repli « Je n'ai pas d'adresse e-mail » */
.depli{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.55rem;
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:.9rem;color:var(--gris)}
.depli::-webkit-details-marker{display:none}
.depli::before{content:"+";font-size:1.15rem;line-height:1;color:var(--rouge)}
details[open] > .depli::before{content:"–"}
.depli:hover{color:var(--anthracite)}

/* ---------- Où suivre l'AAF 95 : tuiles réseaux ----------
   Icônes reprises du support de réunion de l'association, pour garder
   la même charte que les documents papier. */
.reseaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.reseau{background:#fff;padding:1.7rem 1.3rem;text-align:center;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;transition:background .15s ease}
a.reseau:hover{background:var(--papier)}
.reseau img{width:64px;height:64px;object-fit:contain;transition:transform .18s ease}
a.reseau:hover img{transform:translateY(-3px) scale(1.04)}
.reseau b{font-family:var(--titre);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:1.08rem;line-height:1}
.reseau span{font-size:.86rem;color:var(--gris);line-height:1.45;word-break:break-word}
.reseau--info{cursor:default}

/* ---------- Encart « modification des Lois du Jeu » (page Arbitrage) ---------- */
.regle{background:#fff;border:1px solid var(--trait);border-left:5px solid var(--rouge);
  padding:clamp(1.4rem,3vw,2.1rem)}
.regle__tete{margin-bottom:1.1rem}
.regle__alerte{display:inline-block;background:var(--rouge);color:#fff;
  transform:skewX(var(--pente));padding:.28rem 1rem;margin-bottom:.9rem;
  font-family:var(--titre);font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.11em;font-size:.72rem}
.regle__tete h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem)}
.regle__intro{font-size:1.06rem;max-width:70ch}

.regle__comparaison{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait);margin:1.6rem 0 0}
.regle__cas{background:#fff;padding:1.2rem 1.3rem}
.regle__cas b{display:block;font-family:var(--titre);font-style:italic;font-weight:800;
  text-transform:uppercase;font-size:1.05rem;line-height:1.15}
.regle__cas p{margin:.8rem 0 0;font-size:.95rem}
.regle__cas p b{display:inline;font-family:var(--texte);font-style:normal;font-weight:600;
  text-transform:none;font-size:inherit}
.regle__ou{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);margin-top:.3rem;font-family:var(--titre);font-style:italic;font-weight:700}
.regle__cas--dept{border-top:4px solid #1D7A46}
.regle__cas--reg{border-top:4px solid var(--rouge)}

.regle__vigilance{margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px dashed var(--gris-clair);
  font-size:.98rem;max-width:74ch}

/* ---------- Fiches dépliantes des modifications aux Lois du Jeu ---------- */
.lois__groupe{margin-top:clamp(2rem,4vw,3rem)}
.lois__intro{margin:.6rem 0 1.3rem;max-width:74ch}

.loi{background:#fff;border:1px solid var(--trait);margin-bottom:.7rem}
.loi[open]{border-color:var(--gris-clair)}
.loi__tete{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.9rem;
  padding:1rem 1.2rem;position:relative;padding-right:2.8rem}
.loi__tete::-webkit-details-marker{display:none}
.loi__tete::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--titre);font-weight:800;font-size:1.4rem;line-height:1;color:var(--rouge)}
.loi[open] > .loi__tete::after{content:"–"}
.loi__tete:hover{background:var(--papier)}

.loi__num{flex:none;background:var(--anthracite);color:#fff;padding:.2rem .6rem;
  transform:skewX(var(--pente));font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;white-space:nowrap}
.loi__titre{font-family:var(--titre);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:1.06rem;line-height:1.2}

.loi__corps{padding:0 1.2rem 1.4rem;border-top:1px solid var(--trait);margin-top:-1px;padding-top:1.1rem}
.loi__resume{font-size:1rem;max-width:72ch;margin:0}
.loi__corps .liste{max-width:76ch}
.loi__corps .liste li{font-size:.96rem}

@media(max-width:620px){
  .loi__tete{flex-direction:column;gap:.5rem}
  .loi__num{align-self:flex-start}
}

/* ---------- Nos activités : les rendez-vous de la saison ----------
   Préfixe .saison__ : .rdv est déjà pris par les entraînements réguliers
   de la page Arbitrage, plus bas dans cette feuille. */
.saison{display:flex;flex-direction:column;margin-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--trait)}
.saison__item{display:grid;grid-template-columns:88px minmax(0,1fr) 132px;gap:clamp(1rem,2.5vw,1.8rem);
  align-items:start;padding:1.5rem 0;border-bottom:1px solid var(--trait)}
.saison__item[hidden]{display:none}

/* Bloc date, repris de l'agenda */
.saison__quand{text-align:center;border-right:1px solid var(--trait);padding-right:1rem;padding-top:.2rem}
.saison__quand b{display:block;font-family:var(--titre);font-style:italic;font-weight:800;
  font-size:2.4rem;line-height:1}
.saison__quand span{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rouge);font-family:var(--titre);font-style:italic;font-weight:700;margin-top:.15rem}
.saison__quand em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.12em;color:var(--gris);margin-top:.15rem}

.saison__corps h3{margin:.55rem 0 0}
.saison__sous{margin:.35rem 0 0;color:var(--gris);font-size:.94rem}
.saison__detail{margin:.9rem 0 0;font-size:.95rem;max-width:62ch}
.saison__lien{margin:.9rem 0 0}
.saison__lien a{font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.82rem;text-decoration:none}
.saison__lien a:hover{text-decoration:underline}

.saison__infos{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;margin-top:.9rem}
.saison__infos li{font-size:.9rem}
.saison__infos b{display:block;font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;font-size:.68rem;color:var(--gris);margin-bottom:.15rem}
.saison__infos span{color:var(--anthracite)}

.saison__affiche{margin:0}
.saison__affiche img{width:100%;height:auto;border:1px solid var(--trait);background:var(--papier)}

/* Pastilles par catégorie */
.pastille--match{background:var(--t-match)}
.pastille--tournoi{background:var(--t-tournoi)}
.pastille--festivite{background:var(--t-festivite)}
.pastille--projet{background:var(--t-projet)}

/* ---------- Le code couleur des actualités ----------
   Quatre teintes sur cinq sont celles de l'agenda : le lecteur qui a vu les
   rendez-vous retrouve les mêmes couleurs sur les actualités, sans avoir à
   réapprendre quoi que ce soit. Seules les distinctions ont la leur — un doré,
   qui ne dispute sa place à aucun type de rendez-vous. */
:root{
  --a-amicale:#D50F16;        /* le rouge de l'amicale, comme les réunions */
  --a-sportif:#6B3FA0;        /* le violet du thème Sportif */
  --a-distinction:#8A6D00;    /* doré : trophées et médailles */
  --a-convivialite:#1D7A46;   /* le vert de la convivialité */
  --a-partenaire:#1F4E9C;     /* le bleu des rassemblements */
}
.pastille--act-amicale{background:var(--a-amicale)}
.pastille--act-sportif{background:var(--a-sportif)}
.pastille--act-distinction{background:var(--a-distinction)}
.pastille--act-convivialite{background:var(--a-convivialite)}
.pastille--act-partenaire{background:var(--a-partenaire)}

/* La pastille prend place sur la ligne de la date, comme dans l'agenda où
   elle voisine l'heure et le lieu. */
.actu__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.actu__meta .pastille{font-size:.62rem}
/* La couleur passe à la pastille : deux rouges côte à côte, la date et la
   pastille « Vie de l'amicale », se disputeraient l'œil pour rien. La date
   reprend son rouge si l'actualité n'a pas de catégorie. */
.actu__meta time{margin:0;color:var(--gris)}
.actu__meta:not(:has(.pastille)) time{color:var(--rouge)}

/* En tête d'article, la pastille annonce le sujet avant la première ligne. */
.article__meta .pastille{margin-right:.7rem;vertical-align:.05em}

/* --- Filtres des actualités : mêmes règles que ceux des activités --- */
.filtre[data-act]{display:inline-flex;align-items:center;gap:.5rem}
.filtre[data-act]:not([data-act="tout"])::before{
  content:"";width:9px;height:9px;background:var(--teinte);
  transform:skewX(var(--pente));flex:none}
.filtre[data-act="amicale"]{--teinte:var(--a-amicale)}
.filtre[data-act="sportif"]{--teinte:var(--a-sportif)}
.filtre[data-act="distinction"]{--teinte:var(--a-distinction)}
.filtre[data-act="convivialite"]{--teinte:var(--a-convivialite)}
.filtre[data-act="partenaire"]{--teinte:var(--a-partenaire)}
.filtre[data-act]:hover{color:var(--teinte,var(--anthracite));border-color:var(--teinte,var(--anthracite))}
.filtre[data-act][aria-pressed="true"]{
  background:var(--teinte);border-color:var(--teinte);color:#fff}
.filtre[data-act][aria-pressed="true"]::before{background:#fff}
.filtre[data-act="tout"][aria-pressed="true"]{
  background:var(--anthracite);border-color:var(--anthracite);color:#fff}

/* --- Filtres des activités : même principe que l'agenda, sur fond clair --- */
.filtre[data-cat]{display:inline-flex;align-items:center;gap:.5rem}
.filtre[data-cat]:not([data-cat="tout"])::before{
  content:"";width:9px;height:9px;background:var(--teinte);
  transform:skewX(var(--pente));flex:none}
.filtre[data-cat="match"]{--teinte:var(--t-match)}
.filtre[data-cat="tournoi"]{--teinte:var(--t-tournoi)}
.filtre[data-cat="festivite"]{--teinte:var(--t-festivite)}
.filtre[data-cat="projet"]{--teinte:var(--t-projet)}
.filtre[data-cat]:hover{color:var(--teinte,var(--anthracite));border-color:var(--teinte,var(--anthracite))}
.filtre[data-cat][aria-pressed="true"]{
  background:var(--teinte);border-color:var(--teinte);color:#fff}
.filtre[data-cat][aria-pressed="true"]::before{background:#fff}
/* « Tout » en noir, seul à ne porter aucune couleur de thème. */
.filtre[data-cat="tout"][aria-pressed="true"]{
  background:var(--anthracite);border-color:var(--anthracite);color:#fff}


.saison__vide{margin-top:2rem;text-align:center}

@media(max-width:860px){
  .saison__item{grid-template-columns:64px minmax(0,1fr);row-gap:1.1rem}
  .saison__quand{padding-right:.7rem}
  .saison__quand b{font-size:1.9rem}
  .saison__affiche{grid-column:2;max-width:190px}
}

/* Le projet mis en avant */
.projet{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
  gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
@media(max-width:820px){.projet{grid-template-columns:1fr}}
.projet__chapo{margin-top:1.1rem;font-size:1.1rem;color:#fff}
.projet p{color:rgba(255,255,255,.78);margin-top:1rem}
.projet__img{margin:0}
.projet__img img{width:100%;height:auto;border:1px solid var(--trait-sombre)}
.projet__img figcaption{margin-top:.6rem;font-size:.84rem;color:rgba(255,255,255,.55);line-height:1.4}
.projet__large{margin:clamp(1.8rem,4vw,2.8rem) 0 0}
.projet__large img{width:100%;height:auto;border:1px solid var(--trait-sombre)}
.projet__large figcaption{margin-top:.7rem;font-size:.9rem;color:rgba(255,255,255,.6)}
.liste--clair li{color:rgba(255,255,255,.85)}
.liste--clair li::before{background:var(--rouge)}

/* ---------- Lecteur de document (consultation sans téléchargement) ---------- */
/* 85 px = hauteur de l'en-tête collant (82 + son liseré rouge de 3 px) */
.lecteur__barre{position:sticky;top:85px;z-index:40;background:var(--anthracite);color:#fff;
  border-bottom:1px solid var(--trait-sombre)}
.lecteur__barre__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.75rem;font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
.lecteur__retour{color:rgba(255,255,255,.75);text-decoration:none}
.lecteur__retour:hover{color:#fff}
.lecteur__compteur{color:rgba(255,255,255,.6)}
.lecteur__compteur b{color:#fff}

.lecteur{display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  -webkit-user-select:none;user-select:none}
.lecteur__page{position:relative;margin:0;width:100%;max-width:860px;
  border:1px solid var(--trait);background:#fff;box-shadow:0 14px 30px -24px rgba(0,0,0,.5)}
.lecteur__page img{display:block;width:100%;height:auto;
  -webkit-user-drag:none;user-drag:none;pointer-events:none}
/* voile transparent : « enregistrer l'image » ne vise plus la page elle-même */
.lecteur__voile{position:absolute;inset:0;background:transparent}
.lecteur__page figcaption{padding:.5rem .8rem;border-top:1px solid var(--trait);
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.7rem;color:var(--gris);text-align:right}
.lecteur__mention{max-width:860px;margin:1.8rem auto 0;text-align:center}
/* Sur mobile, la page occupe toute la largeur : chaque pixel compte pour lire un A4 */
@media(max-width:640px){
  .lecteur{margin-inline:calc(-1 * var(--marge))}
  .lecteur__page{border-left:0;border-right:0}
}

/* À l'impression, le document est remplacé par un simple avis.
   On masque les blocs un par un plutôt que « body > * » : l'avis vit dans
   <main>, il serait emporté avec lui. */
.lecteur__impression{display:none}
@media print{
  .utilitaire,.entete,.tete,.pied,.lecteur__barre,.lecteur,.lecteur__mention,.evitement{display:none!important}
  .lecteur__impression{display:block!important;padding:4rem 2rem;text-align:center;
    font-family:var(--texte);font-size:1.05rem;color:#000}
  .lecteur__impression b{display:block;margin-bottom:1rem;
    font-family:var(--titre);font-style:italic;text-transform:uppercase;font-size:1.4rem}
}

/* ---------- Liste des adhérents (réservé au bureau) ---------- */
.tableau{width:100%;overflow-x:auto}
.tableau table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.tableau th,.tableau td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau th{font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.74rem;color:var(--gris);border-bottom:2px solid var(--trait)}
.tableau tr:hover td{background:var(--papier)}
.tableau td small{display:block;color:var(--gris);font-size:.79rem}
.tableau .jamais{color:var(--gris)}
.lien-rouge{background:none;border:0;padding:0;cursor:pointer;color:var(--rouge);
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.76rem}
.lien-rouge:hover{text-decoration:underline}

/* ---------- Membres du bureau ---------- */
.bureau{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait)}
.membre{background:#fff;padding:1.3rem 1.4rem}
.membre span{display:block;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--rouge);
  font-family:var(--titre);font-style:italic;font-weight:700;margin-bottom:.3rem}
.membre b{font-family:var(--titre);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.15rem}

/* ---------- Partenaires ---------- */
/* Sept logos : en grille « auto-fit » le septième restait seul et collé à
   gauche. En flex centré, la ligne incomplète se recentre d'elle-même, et le
   pas de quatre par ligne donne des tuiles plus larges — donc des logos plus
   lisibles qu'avant. */
.partenaires{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}
.partenaire{background:#fff;border:1px solid var(--trait);padding:1.3rem;
  display:grid;place-items:center;min-height:132px;flex:0 1 calc(25% - .9rem)}
.partenaire img{max-height:84px;width:auto;object-fit:contain}
/* Écusson : haut et étroit. Borné à la même hauteur que les logos larges, il
   occupait deux fois moins de place à l'œil. */
.partenaire--ecusson img{max-height:118px}
@media(max-width:900px){.partenaire{flex-basis:calc(33.333% - .8rem)}}
@media(max-width:620px){.partenaire{flex-basis:calc(50% - .6rem);min-height:112px}
  .partenaire img{max-height:66px}}
.vide{border:1px dashed var(--gris-clair);padding:2.2rem 1.5rem;text-align:center;color:var(--gris);background:#fff}

/* ---------- Bandeau d'appel ---------- */
.appel{background:var(--rouge);color:#fff;padding-block:clamp(2.2rem,5vw,3.4rem)}
.appel__in{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:center}
.appel h2{max-width:24ch}
.appel p{margin-top:.7rem;color:rgba(255,255,255,.85);max-width:52ch}

/* ---------- Newsletter ---------- */
.lettre{background:var(--anthracite-2);color:#fff;padding:clamp(1.5rem,3vw,2.2rem)}
.lettre .champ label{color:rgba(255,255,255,.8)}
.lettre .note{color:rgba(255,255,255,.55)}

/* ---------- Pied de page ---------- */
.pied{background:var(--anthracite);color:rgba(255,255,255,.68);padding-top:clamp(2.4rem,5vw,3.4rem);font-size:.92rem}
.pied__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem}
.pied h3{color:#fff;font-size:1.02rem;margin-bottom:.8rem}
.pied a{color:rgba(255,255,255,.7);text-decoration:none}
.pied a:hover{color:#fff}
.pied__marque{font-family:var(--titre);font-style:italic;font-weight:800;font-size:2.1rem;
  color:var(--rouge);line-height:1;margin-bottom:.8rem}
.pied__marque span{color:var(--gris)}
.pied__liste li{margin-bottom:.35rem}
.pied__reseaux{display:flex;gap:.9rem;margin-top:1.2rem}
.pied__reseaux a{display:inline-flex;line-height:0}
.pied__reseaux img{width:30px;height:30px;object-fit:contain;opacity:.9;
  transition:opacity .15s ease,transform .15s ease}
.pied__reseaux a:hover img{opacity:1;transform:translateY(-2px)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  margin-top:2.4rem;padding-block:1.2rem;border-top:1px solid var(--trait-sombre);font-size:.82rem}

/* ---------- Apparitions ---------- */
.js .monte{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .monte.est-vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .monte{opacity:1;transform:none}
}

/* ---------- Symboles d'unité (%, €) ----------
   La police des chiffres (Doto) dessine ses caractères en pastilles : les
   chiffres sont superbes, mais « % » et « € » deviennent des petites taches
   illisibles, même agrandies. Le chiffre garde donc Doto, et l'unité passe
   dans la police des titres — même italique que le reste du site, à une
   taille qui la rend nette sans voler la vedette au chiffre.
   Balise <i> et non <span> : les blocs de chiffres stylent déjà leurs span. */
.unite{font-family:var(--titre);font-style:italic;font-weight:800;font-size:.82em;
  letter-spacing:0;text-transform:none;margin-left:.07em;color:inherit}

/* ---------- Chiffres clés, valeurs, pôles ---------- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait);margin-top:clamp(2rem,4vw,3rem)}
.chiffre{background:#fff;padding:1.5rem 1.2rem;text-align:center}
.chiffre b{display:block;font-family:var(--chiffre);font-weight:800;font-size:clamp(2.4rem,6vw,3.4rem);
  line-height:1;color:var(--rouge)}
.chiffres__note{margin-top:.9rem;font-size:.82rem;color:var(--gris);font-family:var(--titre);
  font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
/* Le compteur de chaque catégorie reprend sa teinte : la légende se lit deux
   fois sur la page « Nos activités », en haut dans les chiffres et à côté
   dans les filtres. À placer après .chiffre b, de même spécificité. */
.chiffre--match b{color:var(--t-match)}
.chiffre--tournoi b{color:var(--t-tournoi)}
.chiffre--festivite b{color:var(--t-festivite)}
.chiffre--projet b{color:var(--t-projet)}
.chiffre--attente b{color:var(--rouge)}
.chiffre span{display:block;margin-top:.5rem;font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.83rem;color:var(--gris)}
.valeurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem}
.valeur{border-left:3px solid var(--rouge);padding-left:1.1rem}
.valeur b{display:block;font-family:var(--titre);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:1.35rem;letter-spacing:.03em;color:#fff}
.valeur span{display:block;margin-top:.4rem;color:rgba(255,255,255,.72);line-height:1.55}
.pole{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
  background:#fff;border:1px solid var(--trait);padding:clamp(1.4rem,3vw,2.2rem);margin-bottom:1.6rem}
.pole:has(.pole__img:first-child) .pole__txt{order:2}
.pole__txt h3{margin:.7rem 0 .6rem;font-size:clamp(1.5rem,3.2vw,2rem)}
.pole__txt>p:first-of-type{margin:0}
.pole__img{margin:0}
.pole__img img{width:100%;height:auto;display:block;border:1px solid var(--trait)}
.pole__img figcaption{margin-top:.5rem;font-size:.84rem;color:var(--gris)}
.pole:not(:has(.pole__img)){grid-template-columns:1fr}
.liste{margin:1.1rem 0 0;padding-left:0;list-style:none}
.liste li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;line-height:1.55}
.liste li::before{content:"";position:absolute;left:0;top:.55rem;width:.62rem;height:.62rem;
  background:var(--rouge);transform:skewX(var(--pente))}
.membre em{display:block;margin-top:.35rem;font-style:normal;font-size:.8rem;color:var(--gris)}
@media(max-width:760px){ .pole{grid-template-columns:1fr} .pole:has(.pole__img:first-child) .pole__txt{order:0} }

/* ---------- Rendez-vous réguliers (page Arbitrage) ---------- */
.rdvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.rdv{background:rgba(255,255,255,.05);border:1px solid var(--trait-sombre);padding:1.5rem 1.4rem}
.rdv__rythme{display:inline-block;background:var(--rouge);color:#fff;padding:.25rem .8rem;
  transform:skewX(var(--pente));font-family:var(--titre);font-style:italic;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;font-size:.74rem;margin-bottom:.9rem}
.rdv h3{color:#fff;margin-bottom:.5rem}
.rdv__horaire{font-family:var(--chiffre);font-weight:800;font-size:1.5rem;color:#fff;margin:0 0 .6rem}
.rdv__lieu{color:rgba(255,255,255,.82);margin-bottom:.6rem}
.rdv__detail{color:rgba(255,255,255,.62);font-size:.92rem;margin-bottom:.6rem}
.rdv__contact{color:rgba(255,255,255,.82);font-size:.9rem;margin:0;
  padding-top:.7rem;border-top:1px solid var(--trait-sombre)}
.rdv__photo{margin:1.6rem 0 0}
.rdv__photo img{width:100%;height:auto;display:block}
.rdv__photo figcaption{margin-top:.55rem;font-size:.85rem;color:rgba(255,255,255,.55)}

/* ---------- Vidéo en tête d'article ----------
   Les vidéos du téléphone sont verticales : plein cadre, elles écraseraient
   l'article. On les pose donc sur un fond anthracite, hauteur bridée, ce qui
   donne le même bandeau quelle que soit l'orientation du film. */
.actu-video{margin:0 0 1.9rem;padding:clamp(.9rem,2.4vw,1.5rem);background:var(--anthracite);
  display:flex;flex-direction:column;align-items:center}
.actu-video video{display:block;width:auto;height:auto;max-width:100%;
  max-height:min(66vh,520px);background:#000}
.actu-video figcaption{margin-top:.85rem;text-align:center;font-size:.85rem;
  color:rgba(255,255,255,.6);max-width:46ch}

/* ---------- Galerie d'un article ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:2rem}
.galerie img{width:100%;height:auto;object-fit:contain;background:var(--papier);border:1px solid var(--trait)}

/* Variante pour les photos d'un événement : toutes les vignettes au même
   format, la grille reste régulière malgré le mélange portrait / paysage.
   Chaque vignette ouvre la photo entière dans un nouvel onglet. */
.galerie--photos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.galerie--photos a{display:block;position:relative;overflow:hidden;background:var(--anthracite);
  border:1px solid var(--trait);aspect-ratio:4/3}
/* Cadrage un peu haut : sur une photo prise au telephone, tenue verticale,
   ce qui compte (les visages, l'ecran) est au-dessus du milieu. Un cadrage
   centre couperait les tetes. */
.galerie--photos img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  border:0;background:none;transition:transform .35s ease}
.galerie--photos a:hover img,.galerie--photos a:focus-visible img{transform:scale(1.045)}
.galerie--photos a:focus-visible{outline:3px solid var(--rouge);outline-offset:2px}
.galerie__note{margin-top:.8rem;font-size:.85rem;color:var(--gris)}

/* ---------- Encadré « critères de sélection » d'une distinction ---------- */
.criteres{margin:2.2rem 0 0;background:var(--anthracite);color:#fff;padding:clamp(1.3rem,3vw,1.9rem)}
.criteres h2{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);color:#fff;margin-bottom:1.1rem;
  padding-bottom:.7rem;border-bottom:2px solid var(--rouge)}
.criteres ul{margin:0;padding:0;list-style:none}
.criteres li{position:relative;padding-left:1.9rem;margin-bottom:.75rem;line-height:1.5;
  font-family:var(--titre);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;color:rgba(255,255,255,.9)}
.criteres li:last-child{margin-bottom:0}
.criteres li::before{content:"";position:absolute;left:0;top:.42rem;width:.72rem;height:.72rem;
  background:var(--rouge);transform:skewX(var(--pente))}