:root{--red:#BF111B;--teal:#0F8CA0;--navy:#1C224E;--ink:#1c1b2e;--mut:#6a6880;--bg:#f5f4f0;--card:#fff;--line:#e4e2db;--gold:#c9a227;--silver:#9aa0a6;--bronze:#a8683a}
*{box-sizing:border-box}
/* Le défilement doux est ajouté par site.js APRÈS le premier rendu. Déclaré
   ici, il s'appliquait aussi à l'arrivée sur une ancre : cliquer un filtre
   (« Régional ») rechargeait la page, qui repartait du haut et redescendait en
   glissant jusqu'au tableau — un mouvement parasite à chaque clic. Elle y
   arrive maintenant directement, et les liens internes restent doux. */
[id]{scroll-margin-top:96px}
body{margin:0;font-family:Barlow,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
h1,h2,h3,h4{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin:0}
a{color:var(--red)}img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* en-tête */
.top{background:#fff;position:sticky;top:0;z-index:50;border-bottom:4px solid var(--red);box-shadow:0 4px 14px #1c224e14}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
/* Le logo doit tenir DANS la barre : à 58 px il débordait sous le filet
   rouge, et le haut du « E » se trouvait coupé sur petit écran. */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:46px;width:auto;max-height:100%;display:block}.foot-logo{background:#fff;border-radius:6px;padding:8px 12px;display:inline-block;margin-bottom:12px}.foot-logo img{height:44px;display:block}
.mark{display:inline-flex;align-items:baseline;background:var(--red);color:#fff;padding:6px 9px 4px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;line-height:1;border-radius:3px}
.mark i{font-style:normal;color:#fff;opacity:.85;margin-left:2px}
.brand-t b{display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:20px;letter-spacing:.03em;line-height:1}
.brand-t small{color:#b9b7d6;font-size:12px}
.nav{display:flex;align-items:center;gap:2px}
.nav>a,.dd-btn{color:var(--navy);text-decoration:none;font:600 15px Barlow,sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:24px 12px;background:none;border:0;cursor:pointer;border-bottom:3px solid transparent}
.nav>a:hover,.dd-btn:hover,.nav .on>.dd-btn,.nav>a.on{border-bottom-color:var(--red);color:var(--red)}
.dd{position:relative}.dd-menu{display:none;position:absolute;right:0;top:100%;background:#fff;min-width:210px;box-shadow:0 12px 30px #0003;border-top:3px solid var(--red)}
.dd:hover .dd-menu,.dd.open .dd-menu{display:block}.dd-menu a{display:block;padding:11px 16px;color:var(--ink);text-decoration:none;font-weight:600}.dd-menu a:hover,.dd-menu a.on{background:var(--bg);color:var(--red)}
/* « Nous rejoindre » est une invitation, pas un onglet : fond rouge, pour
   qu'un visiteur qui cherche à s'inscrire le trouve sans lire le menu. */
.nav>a.rejoindre{background:var(--red);color:#fff;border-radius:3px;padding:10px 16px;margin-left:10px;border-bottom:0;transition:background var(--t),transform var(--t),box-shadow var(--t)}
.nav>a.rejoindre:hover{background:#8d0c08;color:#fff;border-bottom-color:transparent;transform:translateY(-1px);box-shadow:0 6px 16px -5px #bf111b99}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}.burger span{display:block;width:26px;height:3px;background:var(--navy);margin:5px 0}
/* héros */
.hero{position:relative;background:linear-gradient(135deg,var(--navy) 0%,#15355e 75%);color:#fff;overflow:hidden}
/* Fond du hero cote bleu : une piste d'athletisme vue du dessus, a la place
   des barres diagonales. Inclinee pour garder l'elan de la diagonale rouge,
   et volontairement tres discrete : le titre doit rester le sujet. */
.hero .lanes{position:absolute;inset:0;overflow:hidden}
.hero .piste{position:absolute;left:-16%;top:50%;width:92%;height:auto;transform:translateY(-50%) rotate(-11deg);opacity:.5}
.hero .piste .couloir{fill:none;stroke:#fff;stroke-opacity:.16;stroke-width:1.6}
.hero .piste .couloir.bord{stroke-opacity:.34;stroke-width:2.6}
.hero .piste .arrivee{stroke:#fff;stroke-opacity:.3;stroke-width:3}
@media(max-width:900px){.brand img{height:34px}.hero .piste{left:-30%;width:150%;opacity:.35}}
.hero:after{content:"";position:absolute;right:-8%;top:-30%;width:46%;height:170%;background:var(--red);transform:skewX(-14deg);opacity:.9}
.hero:before{content:"";position:absolute;right:30%;top:0;bottom:0;width:26px;background:var(--teal);transform:skewX(-14deg);z-index:1}
/* Le sigle en fond, coupé en deux par la diagonale : EA côté bleu, 94 côté
   rouge, à la même inclinaison qu'elle. Assez pâle pour rester un fond, assez
   franc pour qu'on le devine. Tout passe sous la carte (z-index 2) et sous le
   texte. Le EA est plus discret que le 94 : le bleu est plus sombre, le blanc
   y ressort davantage, et c'est lui qui porte le titre. */
.hero .n94,.hero .nea{position:absolute;top:50%;z-index:1;font:800 clamp(190px,30vw,520px)/.78 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.02em;color:#fff;transform:translateY(-50%) skewX(-14deg);pointer-events:none;user-select:none}
.hero .n94{right:1.5%;opacity:.1}
.hero .nea{left:1%;opacity:.06}
.hero-in{position:relative;z-index:2;padding:84px 20px 92px}
/* Le nom de l'entente se lisait à peine : 15 px gris-bleu au-dessus d'un titre
   de 84 px. Il passe en blanc, deux fois plus gros, précédé d'un trait teal. */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font:700 clamp(17px,1.9vw,26px) 'Barlow Condensed';letter-spacing:.26em;text-transform:uppercase;color:#fff;margin:0 0 16px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.eyebrow:before{content:"";flex:none;width:clamp(24px,3.4vw,58px);height:3px;background:var(--teal)}
/* Le titre tient en DEUX lignes, jamais trois : chaque membre de la phrase
   est un bloc insecable, et la taille suit la largeur de la fenetre pour ne
   jamais deborder sur la diagonale rouge. */
.hero h1{font-size:clamp(38px,6.4vw,84px);font-weight:800;line-height:.92;letter-spacing:-.015em;margin:0}
.hero h1 span{display:block;white-space:nowrap}
.lead{font-size:19px;max-width:560px;color:#dcdbf0;margin:22px 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;font:700 16px 'Barlow Condensed';text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-radius:3px;border:2px solid transparent;cursor:pointer}
.btn.red{background:var(--red);color:#fff}.btn.red:hover{background:#8d0c08}
.btn.teal{background:var(--teal);color:#fff}.btn.teal:hover{background:#2f7a82}
.btn.ghost{border-color:#fff;color:#fff}.btn.ghost:hover{background:#fff;color:var(--navy)}
.btn.ghost.dark{border-color:var(--navy);color:var(--navy)}.btn.ghost.dark:hover{background:var(--navy);color:#fff}
/* chiffres */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:-44px;position:relative;z-index:3;background:#fff;box-shadow:0 10px 30px #24224f1f;border-top:4px solid var(--teal)}
.kpi{padding:22px 20px;border-right:1px solid var(--line)}.kpi:last-child{border:0}
.kpi b{display:block;font:800 52px/1 'Barlow Condensed';color:var(--navy)}.kpi span{color:var(--mut);font-size:14px;line-height:1.35;display:block;margin-top:4px}
/* sections */
.sec{padding:64px 0}.sec.alt{background:#fff}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px}
.sec-h h2{font-size:38px;font-weight:800;color:var(--navy);padding-left:14px;border-left:6px solid var(--red)}
.more{font-weight:700;text-decoration:none;color:var(--red);white-space:nowrap}.more:hover{text-decoration:underline}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:#fff;padding:24px;border-top:4px solid var(--navy);box-shadow:0 2px 0 var(--line)}
.sec.alt .card{background:var(--bg);box-shadow:none}
.card h3{font-size:25px;font-weight:700;color:var(--navy);margin:8px 0}.card h3 a{color:inherit;text-decoration:none}.card h3 a:hover{color:var(--red)}
.card.news .date{color:var(--teal);font:700 14px 'Barlow Condensed';letter-spacing:.12em;text-transform:uppercase}
.card.nat{border-top-color:var(--red);display:flex;flex-direction:column}
/* En-tete : l'epreuve nomme le classement, la pastille dit le rang. Meme code
   couleur que les tableaux (or/argent/bronze pour un podium national). */
.nat-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nat-ep{font:800 22px/1.1 'Barlow Condensed';letter-spacing:.02em;text-transform:uppercase;color:var(--navy)}
.nat-h .rank{font:800 20px/1 'Barlow Condensed';min-width:52px;padding:6px 13px;border-radius:15px;flex:none}
.card.nat h3{font-size:21px;margin:12px 0 2px}
.nat-cat{color:var(--mut);font-size:14px;margin:0}
.nat-f{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.nat-leg{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.07em;text-align:right}
.perf{font:800 30px 'Barlow Condensed';color:var(--teal)}
.card.club{border-top-width:8px}.card.club.red{border-top-color:var(--red)}.card.club.teal{border-top-color:var(--teal)}
.club-top{display:flex;align-items:center;gap:10px}.club-dot{width:14px;height:14px;border-radius:50%;background:var(--red)}.teal .club-dot{background:var(--teal)}
.club .sub{color:var(--mut);font-size:14px;margin:0 0 10px}
.club-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}.soc a{margin-right:14px;font-weight:600}
.note{color:var(--mut);font-size:14px;margin-top:14px}
.info{background:#fff;padding:26px;margin-top:26px;border-left:6px solid var(--teal)}.info h3{font-size:26px;color:var(--navy);margin-bottom:8px}
/* tableaux */
.tablewrap{overflow-x:auto;background:#fff;box-shadow:0 2px 0 var(--line)}
.sec.alt .tablewrap{background:var(--bg)}
.tbl{border-collapse:collapse;width:100%;font-size:15px}
.tbl th{background:var(--navy);color:#fff;font:700 14px 'Barlow Condensed';text-transform:uppercase;letter-spacing:.1em;text-align:left;padding:11px 14px;white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:#00000008}.n{text-align:right!important;white-space:nowrap}
.tag{display:inline-block;font:700 12px Barlow;background:var(--navy);color:#fff;padding:1px 7px;border-radius:2px;letter-spacing:.04em}.tag.sF{background:var(--red)}.tag.sM{background:var(--teal)}
/* Pastilles de rang. Le blanc sur l'or (2,3:1) et sur l'argent (2,4:1) ne se
   lisait pas : l'or prend un texte sombre, l'argent un fond plus profond, et
   le rang ordinaire passe du gris pale au bleu nuit de la charte. */
.rank{display:inline-block;min-width:34px;text-align:center;padding:3px 9px;border-radius:12px;background:var(--navy);color:#fff;font-weight:800;font-size:13px}
.rank.r1{background:var(--gold);color:#3a2d00}.rank.r2{background:#737a84;color:#fff}.rank.r3{background:var(--bronze);color:#fff}
.g{color:var(--gold);font-weight:700}.s{color:var(--silver);font-weight:700}.b{color:var(--bronze);font-weight:700}
.tbl.small{max-width:640px}
/* filtres */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters input,.filters select{padding:11px 14px;font:500 15px Barlow;border:2px solid var(--line);background:#fff;border-radius:3px;min-width:180px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--teal)}
/* médailles */
.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.m{background:#fff;padding:26px;text-align:center;border-top:6px solid var(--gold)}.m.s{border-top-color:var(--silver)}.m.b{border-top-color:var(--bronze)}
.m b{display:block;font:800 64px/1 'Barlow Condensed';color:var(--navy)}.m span{color:var(--mut);text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.bar{}
.bars .bar{display:grid;grid-template-columns:60px 1fr 150px;gap:12px;align-items:center;margin-bottom:10px;min-height:0}
.bars .yr{font:700 20px 'Barlow Condensed';color:var(--navy)}
.bar-track{display:flex;height:22px;background:#e9e8ee}.bar-track i{display:block;height:100%}.bar-track i.g{background:var(--gold)}.bar-track i.s{background:var(--silver)}.bar-track i.b{background:var(--bronze)}
.bars .tot{font-weight:700;font-size:14px}.bars .tot small{color:var(--mut);font-weight:500}
/* pages */
.pagehead{background:var(--navy);color:#fff;border-bottom:6px solid var(--red);padding:52px 0 46px;position:relative;overflow:hidden}
.pagehead:after{content:"";position:absolute;right:-60px;top:0;bottom:0;width:180px;background:var(--teal);transform:skewX(-14deg);opacity:.9}
.pagehead h1{font-size:clamp(38px,6vw,60px);font-weight:800}.pagehead p{color:#cfcee6;max-width:640px;margin:10px 0 0;font-size:18px}
.prose{max-width:780px}.prose h2{font-size:32px;color:var(--navy);margin:30px 0 10px;padding-left:12px;border-left:5px solid var(--red)}
.prose p,.prose li{font-size:17px}.prose ul{padding-left:20px}
.article .date{color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.cms img{height:auto}.cms p{margin:0 0 1em}
/* pied */
.foot{background:var(--navy);color:#cfcee6;padding:46px 0 22px;border-top:6px solid var(--red)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot h4{color:#fff;font-size:18px;margin-bottom:10px;letter-spacing:.1em}.foot a{display:block;color:#cfcee6;text-decoration:none;padding:3px 0}.foot a:hover{color:#fff;text-decoration:underline}
.foot-brand{display:flex;gap:10px;align-items:center;color:#fff;font:700 20px 'Barlow Condensed';text-transform:uppercase;margin-bottom:10px}
.partners{margin-top:30px;padding-top:20px;border-top:1px solid #ffffff22;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.partners span{text-transform:uppercase;font-size:12px;letter-spacing:.15em;margin-right:8px}
.pill{display:inline-block!important;border:1px solid #ffffff44;padding:4px 12px!important;border-radius:20px}
.legal{margin:26px 0 0;font-size:13px;color:#9b99bd}.legal a{display:inline;color:#cfcee6}
/* « Nous rejoindre » ouvre la page Inscriptions : c'est le lien qui compte
   dans ce pied de page, il est en blanc et précédé d'un chevron teal. */
.foot a.fort{color:#fff;font-weight:700}
.foot a.fort:before{content:"›";color:var(--teal);font-weight:800;margin-right:7px}
@media(max-width:900px){
 .burger{display:block}.nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:8px 0 14px;border-top:1px solid var(--line);box-shadow:0 12px 20px #0002}
 .nav.open{display:flex}.nav>a,.dd-btn{padding:13px 22px;text-align:left;width:100%}
 .nav>a.rejoindre{margin:8px 22px 4px;width:auto;text-align:center;padding:12px 16px}.dd-menu{display:block;position:static;box-shadow:none;border:0;background:var(--bg)}.dd-menu a{padding-left:36px}
 .top{position:sticky}.bar{position:relative}
 .grid3,.grid2,.foot-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr);margin-top:-30px}.kpi{border-bottom:1px solid var(--line)}
 .hero:after{width:60%;right:-30%;opacity:.55}.hero:before{display:none}.hero-in{padding:56px 20px 70px}
 .sec{padding:42px 0}.sec-h h2{font-size:30px}.medals{grid-template-columns:1fr}.bars .bar{grid-template-columns:48px 1fr}.bars .tot{grid-column:1/-1}
 .brand img{height:42px}
}
.card.news.has-img{padding-top:0}.card.news .cover{display:block;margin:0 -24px 14px}.card.news .cover img{width:100%;height:190px;object-fit:cover;display:block}
.article .hero-img{width:100%;max-height:420px;object-fit:cover;border-radius:3px;margin:0 0 20px}
.cms img{max-width:100%;height:auto;border-radius:3px}
.card.club.navy{border-top-color:var(--navy)}.navy .club-dot{background:var(--navy)}.foot .nolink{display:block;padding:3px 0;color:#cfcee6}

.ath-perf{color:var(--teal);font-weight:700}.ath-an{color:var(--mut);font-size:12px}

/* Carte « Où nous trouver ». La liste reste a cote sur grand ecran et passe
   sous la carte en dessous de 860 px. */
.carte-wrap{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:stretch}
/* Leaflet pose des z-index internes qui montent au-delà de 1000 : la carte
   passait par-dessus l'en-tête collant au défilement. `isolation` l'enferme
   dans son propre contexte d'empilement, d'où rien ne peut plus sortir. */
.carte{height:420px;background:#e9e8ee;box-shadow:0 2px 0 var(--line);position:relative;z-index:0;isolation:isolate}
.lieux{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lieu{background:#fff;padding:14px 16px;border-left:5px solid var(--c);cursor:pointer;transition:transform .15s,box-shadow .15s}
.lieu:hover{transform:translateX(3px);box-shadow:0 6px 18px #1c224e1f}
.lieu b{display:block;font-size:17px;color:var(--navy)}.lieu b a{color:inherit;text-decoration:none}.lieu b a:hover{color:var(--red)}
.lieu span{display:block;color:var(--ink);font-size:14px;margin-top:2px}
.lieu small{display:block;color:var(--mut);font-size:13px}
.rep-dot{display:block;width:18px;height:18px;margin:6px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px #0005}
.rep.tombe{animation:tombe .45s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes tombe{from{transform:translateY(-22px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:860px){.carte-wrap{grid-template-columns:1fr}.carte{height:320px}}

/* Carte du Val-de-Marne en fond du hero : posée dans la moitie droite, sur la
   diagonale rouge. Les communes de l'entente sont pleines, les 47 autres en
   simple trait, et les trois points pulsent doucement. */
/* overflow:hidden fait le cadrage : sans lui, le viewBox resserre mais le
   reste du departement continue de s'afficher autour. Traits et points sont
   reduits d'autant que le zoom les grossit (x2,08). */
.hero .carte94{position:absolute;right:0;top:50%;transform:translateY(-50%);height:118%;width:auto;z-index:2;opacity:.9;pointer-events:none;overflow:hidden}
.hero .carte94 .c-autres{fill:none;stroke:#fff;stroke-width:.9;stroke-opacity:.3;stroke-linejoin:round}
.hero .carte94 .c-uai,.hero .carte94 .c-acpj,.hero .carte94 .c-sm{stroke:#fff;stroke-width:1.4;stroke-opacity:.95;fill:#fff;fill-opacity:.24}
.hero .carte94 .p{fill:#fff;stroke:#1C224E;stroke-width:1.8;r:5}
/* Un cycle de 9 s partage en trois : chaque section a ses 3 s, son point
   enfle, une onde part de lui et son nom s'inscrit, puis tout s'efface et
   c'est au tour de la suivante. */
.hero .carte94 .p{animation:pulse94 9s ease-in-out infinite}
.hero .carte94 .halo{fill:none;stroke:#fff;stroke-width:1.6;opacity:0;animation:halo94 9s ease-out infinite}
.hero .carte94 .etiq{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:etiq94 9s ease-in-out infinite}
/* Les décalages viennent APRÈS les raccourcis `animation:` : écrits avant, le
   raccourci les remettait à zéro et les trois noms s'affichaient ensemble. */
.hero .carte94 .p-acpj,.hero .carte94 .h-acpj,.hero .carte94 .e-acpj{animation-delay:3s}
.hero .carte94 .p-sm,.hero .carte94 .h-sm,.hero .carte94 .e-sm{animation-delay:6s}
.hero .carte94 .etiq .tige{stroke:#fff;stroke-width:1.3;stroke-opacity:.8}
.hero .carte94 .etiq text{font:700 13px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;text-anchor:middle;fill:#fff;stroke:#1C224E;stroke-width:3.2;stroke-linejoin:round;paint-order:stroke}
@keyframes pulse94{0%{r:5}6%{r:9.5}16%{r:7}30%,100%{r:5}}
@keyframes halo94{0%{r:5;opacity:.8}20%{r:26;opacity:0}100%{r:26;opacity:0}}
@keyframes etiq94{0%{opacity:0;transform:translateY(7px) scale(.9)}7%{opacity:1;transform:none}26%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.hero .carte94 .p,.hero .carte94 .halo{animation:none}.hero .carte94 .etiq{animation:none;opacity:1;transform:none}}
@media(max-width:900px){.hero .carte94{opacity:.35;right:-10%;height:100%}.hero .carte94 .etiq,.hero .carte94 .halo{display:none}.hero .n94{font-size:42vw;right:-4%;opacity:.07}.hero .nea{font-size:42vw;left:-6%;opacity:.05}}
.tbl tr.vainqueur{background:#c9a2271a}.tbl tr.vainqueur td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
.tbl .ou{display:block;color:var(--mut);font-size:12.5px}

/* Bandeau des partenaires, entre le contenu et le pied de page sombre. Gris au
   repos, couleurs au survol : cinq chartes tres differentes (orange, deux
   bleus, un vert) se neutralisent autrement et tirent l'oeil plus que le
   contenu. */
.bandeau-p{background:#fff;border-top:1px solid var(--line);padding:26px 0}
.bandeau-p .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.bp-titre{font:700 13px 'Barlow Condensed';letter-spacing:.18em;text-transform:uppercase;color:var(--mut);flex:none}
.bp-logos{display:flex;align-items:center;gap:34px;flex-wrap:wrap;flex:1}
.logo-p img{display:block;height:40px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.logo-p:hover img{filter:none;opacity:1}
.card.part{text-align:center;border-top-color:var(--teal)}
.card.part img{height:96px;width:auto;margin:6px auto 14px}
.card.part h3{font-size:21px;margin:0}
/* Sur téléphone le bandeau s'effondrait : les logos en gris pâle s'empilaient
   en colonne au milieu du vide, le titre et le lien se retrouvaient de part et
   d'autre. Ils passent en vraie grille, deux par ligne, en couleurs — le gris
   servait à ne pas tirer l'œil sur grand écran, où ils sont alignés ; empilés
   et délavés sur petit écran, ils ne ressemblaient plus à rien. */
@media(max-width:700px){
  .bandeau-p{padding:22px 0}
  .bandeau-p .wrap{display:block;text-align:center}
  .bp-titre{display:block;margin-bottom:14px}
  .bp-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px;align-items:center;justify-items:center;margin-bottom:14px}
  .bp-logos .logo-p:nth-child(odd):last-child{grid-column:1/-1}
  .logo-p img{height:36px;filter:none;opacity:1}
  .bandeau-p .more{display:inline-flex;margin-top:4px}
}

/* Selecteurs des records : des liens, pas des <select>, pour que chaque
   combinaison ait son adresse. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{display:inline-block;padding:7px 14px;border:2px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;font:700 14px Barlow;border-radius:3px}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-sep{width:14px}
.tag.sur{background:var(--teal);font-size:11px;letter-spacing:.03em}
.sec-saison{font:700 13px 'Barlow Condensed';letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-right:16px;white-space:nowrap}
.p-nom{font:700 14px Barlow;color:var(--mut);white-space:nowrap}
.card.part .part-logo{display:block}
/* Record de moins d'un an : l'actualite du club dans un tableau d'archives. */
.tbl tr.recent{background:#0f8ca012}
.tbl tr.recent td:first-child{box-shadow:inset 4px 0 0 var(--teal)}
.tbl tr.recent td:nth-child(2) b{color:var(--teal)}
.pastille-recent{display:inline-block;width:11px;height:11px;background:#0f8ca033;box-shadow:inset 3px 0 0 var(--teal);vertical-align:-1px;margin-right:5px}
/* Nom de l'athlete et sa categorie restent sur une seule ligne. */
.tbl td.ath{white-space:nowrap}
/* La date ne se coupe jamais ; la categorie precede le nom et porte la couleur
   de sa famille d'age. */
.tbl td.jour{white-space:nowrap}
.tag.c-jeune{background:#2f8f4e}.tag.c-minime{background:#0F8CA0}
.tag.c-espoir{background:#6b4bbf}.tag.c-senior{background:var(--navy)}
.tag.c-master{background:#b36a12}.tag.c-autre{background:#6a6880}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* Formulaire de contact. */
.form-contact{background:#fff;padding:26px;box-shadow:0 2px 0 var(--line);max-width:760px}
.form-contact .champ{margin-bottom:16px}
.form-contact label{display:block;font:700 14px Barlow;color:var(--navy);margin-bottom:6px}
.form-contact input,.form-contact select,.form-contact textarea{width:100%;padding:11px 14px;font:500 15px Barlow;border:2px solid var(--line);background:#fff;border-radius:3px;box-sizing:border-box}
.form-contact input:focus,.form-contact select:focus,.form-contact textarea:focus{outline:none;border-color:var(--teal)}
.form-contact .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-contact .pot{position:absolute;left:-9999px}
.form-contact .note{margin-top:14px}
.avis{padding:12px 16px;margin:0 0 18px;font-weight:600;border-left:5px solid}
.avis.ok{background:#0f8ca014;border-color:var(--teal);color:#0b6b7a}
.avis.ko{background:#bf111b12;border-color:var(--red);color:#8d0c08}
@media(max-width:640px){.form-contact .duo{grid-template-columns:1fr}}
.niv{display:inline-block;padding:2px 9px;border-radius:3px;background:var(--navy);color:#fff;font:700 12px Barlow;letter-spacing:.04em}
/* Niveaux FFA : du departemental au national, une teinte par palier. */
.niv.n-nat{background:var(--red)}
.niv.n-inter{background:#6b4bbf}
.niv.n-reg{background:var(--teal)}
.niv.n-dep{background:#6a6880}
.niv.n-autre{background:var(--navy)}

/* ===================== habillages de saison ===============================
   Posés quelques jours par an par theme_saison() : Halloween du 26 octobre au
   1er novembre, Noël du 18 décembre au 1er janvier. Rien n'est remplacé, tout
   est ajouté par-dessus — la charte, les contrastes et la lecture restent
   ceux du site. Le décor ne reçoit jamais le clic. */
.decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.decor i,.decor span{pointer-events:none}
body.t-halloween,body.t-noel{position:relative}

/* --- Halloween : orange et violet, toiles et chauves-souris -------------- */
body.t-halloween{--teal:#7a4bbf}
.t-halloween .decor{position:fixed;height:520px;bottom:auto}
.t-halloween .toile-g,.t-halloween .toile-d{position:absolute;top:72px;width:124px;height:124px;color:#ffffff40}
.t-halloween .toile-g{left:0}
.t-halloween .toile-d{right:0;transform:scaleX(-1)}
.t-halloween .toile-g svg,.t-halloween .toile-d svg{width:100%;height:100%;display:block}
.t-halloween .bat{position:absolute;width:42px;color:#12152e;opacity:.85;animation:vol 17s linear infinite}
.t-halloween .bat svg{width:100%;display:block;animation:ailes 1.1s ease-in-out infinite alternate}
.t-halloween .b1{top:120px;animation-duration:19s}
.t-halloween .b2{top:210px;width:30px;animation-duration:25s;animation-delay:-7s}
.t-halloween .b3{top:300px;width:36px;animation-duration:22s;animation-delay:-13s;opacity:.6}
@keyframes vol{from{transform:translateX(-14vw)}to{transform:translateX(114vw)}}
@keyframes ailes{from{transform:scaleY(1)}to{transform:scaleY(.62)}}
/* Le 94 du hero passe en citrouille, le EA en violet. */
.t-halloween .hero .n94{color:#ff8a1f;opacity:.16}
.t-halloween .hero .nea{color:#b388ff;opacity:.1}
.t-halloween .hero:before{background:#7a4bbf}
.t-halloween .eyebrow:before{background:#ff8a1f}
.t-halloween .kpis{border-top-color:#ff8a1f}
.t-halloween .perf,.t-halloween .card.news .date{color:#b35c00}
.t-halloween .sec-h h2:before{background:#ff8a1f}

/* --- Noël : guirlande sous l'en-tête et neige sur le hero --------------- */
body.t-noel{--teal:#1a7a46}
.t-noel .decor{position:fixed;inset:0}
.t-noel .guirlande{position:absolute;top:0;left:0;right:0;height:18px;display:flex;justify-content:space-around;align-items:flex-start}
.t-noel .guirlande i{width:9px;height:12px;border-radius:0 0 50% 50%;background:var(--b,#e23c3c);box-shadow:0 0 9px 2px var(--b,#e23c3c);opacity:.9;
  animation:ampoule 2.4s ease-in-out infinite;animation-delay:calc(var(--n) * .17s)}
.t-noel .guirlande i:nth-child(4n+2){--b:#f2c744}
.t-noel .guirlande i:nth-child(4n+3){--b:#2f9e5e}
.t-noel .guirlande i:nth-child(4n){--b:#fff}
@keyframes ampoule{0%,100%{opacity:.35}50%{opacity:1}}
.t-noel .neige{position:absolute;inset:0;height:560px}
.t-noel .neige i{position:absolute;top:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.75;
  animation:flocon var(--d) linear infinite;animation-delay:calc(var(--r) * -1)}
@keyframes flocon{to{transform:translateY(560px) translateX(26px);opacity:0}}
.t-noel .hero .n94{color:#e23c3c;opacity:.14}
.t-noel .hero .nea{color:#bfe8cf;opacity:.09}
.t-noel .kpis{border-top-color:#2f9e5e}

/* Le décor ne doit jamais passer devant l'en-tête collant.
   ⚠ Ne JAMAIS toucher au positionnement des enfants du hero ici : une règle
   `.hero > * { position: relative }` sortait la carte et les lettres de fond
   de leur positionnement absolu, les remettait dans le flux, et le hero
   atteignait plusieurs milliers de pixels de haut. */
.t-halloween .top,.t-noel .top{z-index:50}

/* Rien ne bouge si l'appareil demande moins d'animation : le décor reste,
   figé. C'est une décoration, pas une information — on ne la supprime pas. */
@media(prefers-reduced-motion:reduce){
  .t-halloween .bat,.t-halloween .bat svg,.t-noel .guirlande i,.t-noel .neige i{animation:none}
  .t-noel .neige{display:none}
}

/* ======================= téléphone : une ligne par chose ===================
   Trois défauts se cumulaient sous 760 px : les titres de section tombaient
   sur deux ou trois lignes, chaque résultat occupait deux ou trois lignes
   parce que le nom de l'athlète se coupait, et la bande teal des en-têtes de
   page passait par-dessus le texte. */

/* Le nom complet sur grand écran, le prénom en initiale sur téléphone. */
.n-court{display:none}
@media(max-width:760px){.n-long{display:none}.n-court{display:inline}}

/* L'en-tête de section : le titre prend toute la largeur, la saison et le
   lien « tout voir » passent dessous. Avant, ils se partageaient la ligne et
   écrasaient le titre sur trois lignes. */
.sec-h{flex-wrap:wrap}
@media(max-width:760px){
  .sec-h{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  .sec-h h2{font-size:25px;padding-left:15px;width:100%}
  .sec-h h2:before{width:5px}
  .sec-h>:not(h2){font-size:14px}
  .sec-saison{margin-right:10px}
}

/* Les tableaux : plus aucun retour à la ligne, on fait défiler à la place.
   Un dégradé sur le bord droit dit qu'il reste quelque chose à voir. */
@media(max-width:760px){
  .tbl,.tbl td,.tbl th{white-space:nowrap}
  .tbl td.ath{white-space:nowrap}
  .tbl{font-size:14px}
  .tbl td{padding:9px 11px}
  .tbl .ou{display:inline;margin-left:6px}
  .tablewrap{position:relative;-webkit-overflow-scrolling:touch}
  .tablewrap:after{content:"";position:sticky;float:right;top:0;right:0;width:26px;height:100%;margin-left:-26px;
    background:linear-gradient(90deg,#fff0,#1c224e1f);pointer-events:none}
}

/* Invitation à recevoir les articles. Posée en bas, elle ne recouvre jamais le
   contenu au chargement et se retire d'elle-même après la réponse. */
.notif-bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;max-width:560px;margin:0 auto;
  background:#fff;border-top:4px solid var(--teal);border-radius:4px;padding:16px 18px;
  box-shadow:0 18px 44px -14px #1c224e73,0 2px 0 var(--line);
  transform:translateY(130%);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .32s}
.notif-bar.on{transform:none;opacity:1}
.notif-bar p{margin:0 0 13px;font-size:15.5px;line-height:1.45;color:var(--ink)}
.notif-bar b{color:var(--navy)}
.notif-act{display:flex;gap:9px;flex-wrap:wrap}
.notif-act .btn{padding:10px 18px;font-size:14px}
@media(prefers-reduced-motion:reduce){.notif-bar{transition:none}}

/* Un nom propre ne se coupe pas : « Saint-Maurice » se brisait en « Saint- »
   et « Maurice » sur deux lignes, le trait d'union autorisant la césure. */
.insec{white-space:nowrap}

/* Le hero sur téléphone : quatre boutons entassés sur deux rangs de largeurs
   différentes, un texte d'accroche sur cinq lignes serrées. On remet de
   l'ordre — « Nous rejoindre » seul sur toute la largeur, les trois autres en
   grille régulière — et on laisse respirer. */
@media(max-width:760px){
  .hero-in{padding:46px 20px 58px}
  .eyebrow{font-size:14px;letter-spacing:.22em;gap:10px;margin-bottom:12px}
  .eyebrow:before{width:22px;height:2px}
  .hero h1{font-size:clamp(34px,10.4vw,48px);line-height:.95}
  .lead{font-size:16px;line-height:1.5;margin:16px 0 24px;max-width:32ch}
  /* Un seul bouton sur téléphone. Les trois autres — actualités, résultats,
     clubs — sont déjà dans le menu, et entassés sous le titre ils faisaient
     un pavé qui repoussait le contenu sous la ligne de flottaison. */
  .cta .btn.ghost{display:none}
  .cta .btn.red{display:flex;align-items:center;justify-content:center;width:100%;padding:15px 10px;font-size:16px}
  .hero:after{width:58%;right:-26%;opacity:.5}
}

/* Les noms d'athlètes et de compétitions étaient des liens rouges soulignés :
   sur quarante lignes, cela faisait quarante traits rouges et plus rien ne
   ressortait. Le nom passe en bleu nuit et ne se souligne qu'au survol ; la
   compétition reste en gris, au second plan où elle appartient. */
.tbl a{color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--t),border-color var(--t)}
.tbl a:hover,.tbl a:focus-visible{color:var(--red);border-bottom-color:currentColor}
.tbl td.ath a{font-weight:600}
.tbl td.cp a,.tbl td.cp{color:var(--mut)}
.tbl td.cp a:hover{color:var(--red)}
.tbl .ou{color:var(--mut)}

/* Le tableau des résultats a six colonnes : même sans retour à la ligne, il
   demandait de faire défiler pour voir la performance. Sur téléphone il se
   repose donc en trois lignes par résultat — athlète et date, puis épreuve,
   performance et place, puis la compétition. Plus rien à faire défiler. */
@media(max-width:760px){
  .tbl.res,.tbl.res tbody,.tbl.res tr,.tbl.res td{display:block}
  .tbl.res thead{display:none}
  /* Chaque résultat devient une fiche à part, avec un liseré de la couleur de
     sa famille d'âge — le même code que les pastilles. Une liste de lignes
     séparées par un filet gris faisait bloc ; là, l'œil saisit un résultat. */
  .res-wrap{background:none;box-shadow:none}
  .sec.alt .res-wrap{background:none}
  .tbl.res tr{--fam:var(--navy);
    display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:5px 10px;
    background:#fff;border:0;border-left:3px solid var(--fam);border-radius:3px;
    box-shadow:0 1px 0 var(--line),0 6px 14px -10px #1c224e66;
    padding:12px 14px;margin-bottom:9px}
  .tbl.res tr.f-jeune{--fam:#2f8f4e}
  .tbl.res tr.f-minime{--fam:#0F8CA0}
  .tbl.res tr.f-espoir{--fam:#6b4bbf}
  .tbl.res tr.f-master{--fam:#b36a12}
  .tbl.res tr.f-autre{--fam:#6a6880}
  .tbl.res tr:nth-child(even),.tbl.res tr.recent,.tbl.res tr.vainqueur{background:#fff}
  .tbl.res tr.recent{box-shadow:0 1px 0 var(--line),0 6px 14px -10px #0f8ca080}
  .tbl.res tr:hover td:first-child{box-shadow:none}

  .tbl.res td{padding:0;border:0;white-space:normal}
  .tbl.res td.ath{grid-area:1/1/2/3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
  .tbl.res td.jour{grid-area:1/3/2/4;text-align:right;color:var(--mut);font-size:12.5px;white-space:nowrap;letter-spacing:.02em}
  .tbl.res td.ep{grid-area:2/1/3/2;color:var(--navy);font:700 17px/1.2 'Barlow Condensed';text-transform:uppercase;letter-spacing:.02em;align-self:center}
  .tbl.res td.pf{grid-area:2/2/3/3;text-align:right!important;white-space:nowrap;align-self:center}
  .tbl.res td.pf b{font:800 20px/1 'Barlow Condensed';color:var(--teal)}
  .tbl.res td.pl{grid-area:2/3/3/4;text-align:right!important;white-space:nowrap;align-self:center}
  .tbl.res td.cp{grid-area:3/1/4/4;font-size:12.5px;color:var(--mut);line-height:1.35;
    margin-top:3px;padding-top:7px;border-top:1px solid var(--line)}
  .tbl.res td.cp .ou{display:inline;margin-left:6px;opacity:.85}
  .res-wrap:after{display:none}     /* rien ne défile ici, pas de dégradé de bord */
}

/* Le champ de recherche tenait sur 180 px : le texte d'aide s'arrêtait au
   milieu d'un mot (« Rechercher un athlète o »). Il prend toute la largeur. */
@media(max-width:760px){
  .filters{gap:8px}
  .filters input,.filters select{width:100%;min-width:0}
}

/* En-tête de page intérieure : le texte repasse au-dessus de la bande teal,
   qui le traversait et rendait la fin de phrase illisible. */
.pagehead .wrap{position:relative;z-index:1}
@media(max-width:760px){
  .pagehead:after{width:120px;right:-66px;opacity:.8}
  .pagehead:before{display:none}
  .pagehead{padding:38px 0 34px}
  .pagehead p{font-size:16px}
}

/* ================= passe de finition : relief, réactions, diagonale =========
   Le site était juste : bonne charte, bonne grille, mais tout posé à plat et
   rien qui réagisse sous la souris. Trois idées, appliquées partout, plutôt
   que des effets dispersés.

   1. UNE ÉLÉVATION. Un seul jeu d'ombres, dans le bleu nuit de la charte et
      non en noir : une ombre noire sur un fond crème grise l'image.
   2. UNE RÉACTION. Tout ce qui se clique se soulève de 2 px et s'enfonce
      quand on appuie. Même durée partout, pour que le site ait un tempo.
   3. UNE DIAGONALE. Les 14° du hero reviennent sur les titres de section et
      sous les boutons : c'est la signature graphique de l'entente. */
:root{--t:.18s cubic-bezier(.2,.7,.3,1);--ombre1:0 2px 0 var(--line);--ombre2:0 10px 24px -6px #1c224e33,0 2px 0 var(--line);--ombre3:0 18px 38px -10px #1c224e40}

/* --- ce qui se clique ---------------------------------------------------- */
.btn{position:relative;overflow:hidden;transition:background var(--t),color var(--t),transform var(--t),box-shadow var(--t),border-color var(--t)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.red{box-shadow:0 4px 0 #7d0a12}.btn.red:hover{box-shadow:0 6px 18px -4px #bf111b99,0 4px 0 #7d0a12}
.btn.red:active{box-shadow:0 1px 0 #7d0a12}
.btn.teal{box-shadow:0 4px 0 #0a6373}.btn.teal:hover{box-shadow:0 6px 18px -4px #0f8ca099,0 4px 0 #0a6373}
.btn.teal:active{box-shadow:0 1px 0 #0a6373}
/* Les boutons fantômes du hero flottent sur une carte et une piste : un voile
   dépoli les décolle du fond sans les transformer en aplats. */
.btn.ghost{background:#ffffff14;backdrop-filter:blur(3px)}
.btn.ghost:hover{box-shadow:0 8px 20px -6px #00000059}
/* Un éclat qui balaie le bouton au survol, dans l'axe de la diagonale. */
.btn:before{content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:40%;background:linear-gradient(90deg,#fff0,#ffffff2e,#fff0);transform:skewX(-14deg) translateX(-220%);transition:transform .5s ease}
.btn:hover:before{transform:skewX(-14deg) translateX(380%)}
.btn.ghost:hover:before,.btn.ghost.dark:before{display:none}
/* Un anneau de focus visible au clavier : il n'y en avait aucun. */
.btn:focus-visible,.chip:focus-visible,.more:focus-visible,.nav>a:focus-visible,.dd-btn:focus-visible,.lieu:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* --- cadres -------------------------------------------------------------- */
/* La carte garde son filet de 4 px, mais il se colore et elle se soulève :
   on voit tout de suite laquelle on survole dans une grille de trois. */
.card{position:relative;border-radius:3px;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-3px);box-shadow:var(--ombre2)}
.sec.alt .card:hover{box-shadow:var(--ombre2)}
.card.news:hover{border-top-color:var(--red)}
.card.news .cover img{transition:transform .4s ease}
.card.news:hover .cover img{transform:scale(1.045)}
.card.news .cover{overflow:hidden}
/* La carte d'un athlète du top national : le rang grossit à peine, assez pour
   qu'on sente la réaction. */
.card.nat .rank{transition:transform var(--t)}
.card.nat:hover .rank{transform:scale(1.08)}
.info{border-radius:0 3px 3px 0;box-shadow:var(--ombre1)}
.m{border-radius:3px;box-shadow:var(--ombre1);transition:transform var(--t),box-shadow var(--t)}
.m:hover{transform:translateY(-3px);box-shadow:var(--ombre2)}
.form-contact,.tablewrap{border-radius:3px}

/* --- titres de section : la diagonale du hero ---------------------------- */
.sec-h h2,.prose h2{border-left:0;padding-left:20px;position:relative}
.sec-h h2:before,.prose h2:before{content:"";position:absolute;left:0;top:.06em;bottom:.06em;width:7px;background:var(--red);transform:skewX(-14deg)}
.prose h2:before{width:6px;background:var(--red)}
/* La flèche des liens « Tout voir » avance au survol. */
.more{display:inline-flex;align-items:center;gap:6px;transition:gap var(--t),color var(--t)}
.more:hover{gap:11px}

/* --- tableaux ------------------------------------------------------------ */
/* Une ligne sur deux très légèrement teintée : sur quarante résultats, l'œil
   perdait sa ligne entre la colonne « athlète » et la colonne « compétition ».
   Le survol prend le pas et pose un filet teal à gauche. */
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:nth-child(even){background:#1c224e06}
.tbl tbody tr:hover{background:#0f8ca012}
.tbl tbody tr:hover td:first-child{box-shadow:inset 4px 0 0 var(--teal)}
/* Les lignes déjà marquées (record récent, vainqueur) gardent leur couleur :
   il leur faut autant de poids que `:nth-child(even)`, sinon une ligne paire
   reprenait le gris et le marquage disparaissait une fois sur deux. */
.tbl tbody tr.recent{background:#0f8ca012}
.tbl tbody tr.vainqueur{background:#c9a2271a}
.rank{box-shadow:0 1px 2px #1c224e2e}

/* --- chiffres du hero ---------------------------------------------------- */
.kpi{transition:background var(--t)}
.kpi:hover{background:#0f8ca00a}
.kpi b{transition:color var(--t)}
.kpi:hover b{color:var(--red)}

/* --- filtres, pastilles, champs ------------------------------------------ */
.chip{transition:border-color var(--t),color var(--t),background var(--t),transform var(--t)}
.chip:hover{transform:translateY(-1px)}
.chip.on{box-shadow:0 3px 10px -3px #1c224e80}
.filters input,.filters select,.form-contact input,.form-contact select,.form-contact textarea{transition:border-color var(--t),box-shadow var(--t)}
.filters input:focus,.filters select:focus,.form-contact input:focus,.form-contact select:focus,.form-contact textarea:focus{box-shadow:0 0 0 3px #0f8ca026}
.tag,.niv{box-shadow:0 1px 2px #1c224e24}

/* --- réseaux sociaux -----------------------------------------------------
   Des pastilles rondes, grises au repos pour ne pas concurrencer le bouton du
   club, et qui prennent la couleur du réseau au survol. */
.soc{display:inline-flex;gap:9px;align-items:center}
.soc-b{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;margin:0!important;border-radius:50%;background:#1c224e12;color:var(--navy);text-decoration:none;transition:background var(--t),color var(--t),transform var(--t),box-shadow var(--t)}
.soc-b svg{width:19px;height:19px;display:block}
.soc-b:hover{color:#fff;transform:translateY(-2px)}
.soc-b.s-instagram:hover{background:radial-gradient(circle at 28% 108%,#fdf497 0,#fd5949 45%,#d6249f 62%,#285AEB 100%);box-shadow:0 6px 16px -4px #d6249f80}
.soc-b.s-facebook:hover{background:#1877F2;box-shadow:0 6px 16px -4px #1877f280}
.soc-b:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* --- drapeau français ----------------------------------------------------
   Posé près de ce qui se joue à l'échelon national. Trois bandes en dégradé :
   aucune image à charger, net à tous les zooms. Le liseré gris est là pour la
   bande blanche, invisible sinon sur fond clair. */
.fr{display:inline-block;width:1.5em;height:1em;vertical-align:-.12em;margin-left:.5em;border-radius:2px;box-shadow:0 0 0 1px #1c224e2e,0 1px 2px #1c224e24;background:linear-gradient(90deg,#0055A4 0 33.34%,#fff 33.34% 66.67%,#EF4135 66.67% 100%)}
/* Dans un titre, le drapeau fait la hauteur des capitales : posé sur la ligne
   de base, il monte à .7em, soit le haut des lettres. La largeur suit le
   rapport 2:3 du drapeau. */
.sec-h h2 .fr{height:.7em;width:1.05em;vertical-align:0;margin-left:.34em;border-radius:2px}
.fr.mini{width:16px;height:11px;margin-left:6px;vertical-align:-1px}

/* --- liens de texte ------------------------------------------------------ */
.prose a,.cms a{text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--t)}
.prose a:hover,.cms a:hover{color:var(--navy)}

/* --- en-tête de page intérieure : même souffle que l'accueil ------------- */
.pagehead:before{content:"";position:absolute;left:-40px;top:0;bottom:0;width:120px;background:#ffffff0a;transform:skewX(-14deg)}

/* Rien de tout cela ne bouge si l'appareil demande moins d'animation. */
@media(prefers-reduced-motion:reduce){
 .btn,.card,.m,.chip,.more,.card.news .cover img,.card.nat .rank{transition:none}
 .btn:hover,.card:hover,.m:hover,.chip:hover{transform:none}
 .btn:before{display:none}
}