/* Polices servies par le site (Barlow, Barlow Condensed — SIL OFL 1.1), sous-ensemble latin. */
@font-face{font-family:'Barlow';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/barlow-600-italique.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-italique.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800-italique.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2?v=13) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ==========================================================================
   MXCircuit — feuille de style du thème
   Dérivée de la maquette validée (scratchpad/maquette_style.css), sans les
   styles du calque ACF ni ceux du back-office. Thème clair uniquement.
   Mobile d'abord : une colonne, puis grilles à partir de 900 px.

   Sommaire
     1. Jetons                    11. Caractéristiques et listes d'informations
     2. Base                      12. Organisation (club, ligue, région)
     3. Mise en page              13. Cartes de liste (circuits, clubs)
     4. En-tête et navigation     14. Formulaires et filtres
     5. Fil d'Ariane              15. Galerie et médias
     6. Titres et texte           16. Carte de France (SVG)
     7. Panneaux et bandeau       17. Pagination
     8. Boutons                   18. Zones publicitaires
     9. Étiquettes et badges      19. Pied de page
    10. Chiffres clés             20. Utilitaires
   ========================================================================== */

/* 1. Jetons — noms fixés par le cahier des charges (§4) */
:root{
  --red:#D81A0C; --red-dk:#AE1209; --red-soft:#FDECEA;
  --ink:#14161A; --head:#06080B; --foot:#0B0E12;
  --ground:#EFEFF3; --card:#FFFFFF; --line:#E3E3E9; --line-2:#CFCFD8;
  --muted:#6C6F78; --muted-2:#8E919B; --green:#1F7A3D;
  --text-2:#3B3E45;
  --disp:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --largeur-site:1240px; --rayon:6px; --espace:20px;
}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0 0 12px;line-height:1.62}
ul,ol{margin:0 0 12px;padding-left:22px}
h1,h2,h3,h4,h5,h6{margin:0 0 12px;font-family:var(--disp);font-weight:700;line-height:1.05;letter-spacing:.01em}
hr{border:0;height:1px;background:var(--line);margin:16px 0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.visuellement-cache{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:-999px;top:8px;z-index:1000;background:var(--red);color:#fff;padding:10px 16px;border-radius:4px;font-weight:600}
.lien-evitement:focus{left:8px;color:#fff}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* 3. Mise en page */
.conteneur{max-width:var(--largeur-site);margin:0 auto;padding:0 16px}
/* Haut et bas seulement : le raccourci « padding:18px 0 34px » annulait la marge latérale de .conteneur
   sur <main class="contenu conteneur"> (texte collé au bord sur téléphone, corrigé le 04/10/2026). */
.contenu{padding-top:18px;padding-bottom:34px}
.pile{display:flex;flex-direction:column;gap:var(--espace);min-width:0}
.colonnes{display:grid;grid-template-columns:1fr;gap:var(--espace);align-items:start}
.colonne-principale{min-width:0;display:flex;flex-direction:column;gap:var(--espace)}
.colonne-laterale{display:flex;flex-direction:column;gap:var(--espace);min-width:0}
.rail-pub{display:flex;flex-direction:column;gap:var(--espace)}
.duo{display:grid;grid-template-columns:1fr;gap:var(--espace)}
.deux-colonnes,.colonnes-piste,.colonnes-acces{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.deux-colonnes-filet{display:none;background:var(--line)}
@media (min-width:900px){
  .conteneur{padding:0 20px}
  .contenu{padding-top:22px;padding-bottom:40px}
  .colonnes{grid-template-columns:minmax(0,1fr) 292px}
  .colonne-laterale{align-self:stretch}
  .rail-pub{position:sticky;top:20px}
  .duo{grid-template-columns:1fr 1fr}
  .deux-colonnes{grid-template-columns:minmax(0,1fr) 1px minmax(0,1.02fr);gap:30px}
  .deux-colonnes-filet{display:block;align-self:stretch}
  .colonnes-piste{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:28px}
  .colonnes-acces{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:28px}
}

/* 4. En-tête et navigation */
.entete{background:var(--head);color:#fff}
.entete-interieur{max-width:var(--largeur-site);margin:0 auto;padding:0 16px;min-height:56px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.logo{font-family:var(--disp);font-weight:800;font-style:italic;font-size:26px;letter-spacing:-.01em;line-height:1;white-space:nowrap;text-transform:uppercase;color:#fff}
.logo:hover{color:#fff}
.logo span{color:var(--red)}
/* Le bouton « Menu » et le repli de la navigation n'existent qu'avec JavaScript (classe « js » sur <html>). */
.menu-bouton{display:none;margin-left:auto;align-items:center;gap:8px;background:transparent;border:1px solid #2B313A;border-radius:4px;color:#EDEDF0;padding:7px 12px;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.js .menu-bouton{display:inline-flex}
.menu-bouton:hover{background:#191D23;color:#fff}
.menu-bouton[aria-expanded="true"] .icone-menu,.menu-bouton:not([aria-expanded="true"]) .icone-fermer{display:none}
.navigation{display:flex;flex-basis:100%;flex-direction:column;gap:12px;padding:6px 0 14px}
.js .navigation{display:none}
.js .navigation.ouverte{display:flex}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.menu>li>a,.menu summary{display:block;color:#EDEDF0;padding:10px 0;border-bottom:1px solid #1B2027;cursor:pointer}
.menu>li>a:hover,.menu summary:hover,.menu>li>a[aria-current]{color:#fff}
.menu summary{list-style:none;display:flex;align-items:center;justify-content:space-between}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:0;height:0;border:5px solid transparent;border-top-color:currentColor;margin-top:5px;transition:transform .15s}
.menu details[open]>summary::after{transform:rotate(180deg);margin-top:-5px}
.sous-menu{list-style:none;margin:0;padding:6px 0 10px 14px;display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none}
.sous-menu a{display:block;padding:6px 0;color:#C8CBD2}
.sous-menu a:hover,.sous-menu a[aria-current]{color:#fff}
.recherche{display:flex;align-items:stretch;max-width:420px}
.recherche-champ{flex:1;min-width:0;background:#1B1E24;border:1px solid #2E323A;border-right:0;border-radius:4px 0 0 4px;color:#fff;padding:9px 12px;font-size:14px}
.recherche-champ::placeholder{color:#8A8E97}
.recherche-champ:focus{border-color:var(--red);outline:0}
.recherche-bouton{background:var(--red);color:#fff;border:0;border-radius:0 4px 4px 0;padding:0 14px;cursor:pointer;display:grid;place-items:center}
.recherche-bouton:hover{background:var(--red-dk)}
@media (min-width:900px){
  .entete-interieur{padding:0 20px;flex-wrap:nowrap}
  .menu-bouton,.js .menu-bouton{display:none}
  .navigation,.js .navigation{display:flex;flex:1;flex-basis:auto;flex-direction:row;align-items:center;gap:26px;padding:0}
  .menu{flex-direction:row;gap:20px;font-size:15.5px}
  .menu>li{position:relative}
  .menu>li>a,.menu summary{padding:19px 0;border-bottom:2px solid transparent}
  .menu>li>a:hover,.menu summary:hover,.menu>li>a[aria-current],.menu details[open]>summary{border-bottom-color:var(--red)}
  .menu summary::after{margin-left:7px}
  .sous-menu{position:absolute;top:100%;left:-14px;z-index:50;min-width:320px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:0 0 6px 6px;box-shadow:0 12px 30px rgba(20,22,26,.18);padding:12px 14px}
  .sous-menu a{color:var(--text-2);padding:5px 6px;border-radius:3px}
  .sous-menu a:hover,.sous-menu a[aria-current]{color:var(--red);background:var(--red-soft)}
  .recherche{margin-left:auto;width:260px}
}

/* 5. Fil d'Ariane */
.fil-ariane{background:#fff;border-bottom:1px solid var(--line)}
.fil-ariane ol{max-width:var(--largeur-site);margin:0 auto;padding:11px 16px;list-style:none;display:flex;flex-wrap:wrap;gap:6px 9px;font-size:12.5px;color:var(--muted)}
.fil-ariane li+li::before{content:"›";margin-right:9px;color:var(--muted-2)}
.fil-ariane a:hover{color:var(--red)}
.fil-ariane [aria-current]{color:var(--ink);font-weight:600}
@media (min-width:900px){.fil-ariane ol{padding:11px 20px}}

/* 6. Titres et texte */
.titre-page,.titre-fiche{font-size:30px;text-transform:uppercase;letter-spacing:.005em;line-height:1.02;margin:0 0 18px;text-wrap:balance}
.titre-fiche{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.titre-section{font-size:24px;text-transform:uppercase;margin:0 0 18px;line-height:1}
.sous-titre{font-size:19px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px}
.surtitre{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.chapeau{color:var(--text-2);font-size:14.5px}
.texte-historique{line-height:1.62;margin:0 0 12px;overflow-wrap:anywhere}
.texte-discret{color:var(--muted);font-size:13px}
.tabulaire{font-variant-numeric:tabular-nums}
.lien-rouge{color:var(--red);font-weight:600}
.lien-rouge:hover{color:var(--red-dk)}
.lien-contact{font-weight:600}
.lien-externe .icone{margin-left:4px;vertical-align:-2px;opacity:.75}
.message{background:var(--red-soft);border:1px solid #F3C9C4;border-radius:5px;padding:12px 16px;font-size:13px;color:#7A1009;line-height:1.55;margin:0 0 16px}
.message-info{background:#F2F2F5;border-color:var(--line-2);color:var(--text-2)}
@media (min-width:900px){.titre-page,.titre-fiche{font-size:37px}.titre-section{font-size:26px}}

/* 7. Panneaux et bandeau de fiche */
.panneau{background:var(--card);border:1px solid var(--line);border-radius:var(--rayon);padding:18px 16px}
.panneau>:last-child{margin-bottom:0}
.bandeau-fiche{position:relative;border-radius:var(--rayon);overflow:hidden;background:var(--ink);color:#fff;min-height:240px;display:flex;align-items:flex-end}
.bandeau-fiche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.bandeau-fiche-contenu{position:relative;z-index:1;width:100%;padding:60px 16px 16px;background:linear-gradient(180deg,rgba(6,8,11,0) 0%,rgba(6,8,11,.82) 70%)}
.bandeau-fiche .titre-fiche{color:#fff;border-bottom:0;padding-bottom:0;margin-bottom:10px}
@media (min-width:900px){.panneau{padding:26px 28px}.bandeau-fiche{min-height:400px}.bandeau-fiche-contenu{padding:120px 28px 26px}}

/* 8. Boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:4px;padding:11px 18px;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:center;line-height:1.1;border:1px solid transparent;transition:background .12s,border-color .12s,color .12s}
.bouton-rouge{background:var(--red);color:#fff;border-color:var(--red)}
.bouton-rouge:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff}
.bouton-contour{background:#fff;color:var(--ink);border-color:var(--line-2)}
.bouton-contour:hover{border-color:var(--ink);color:var(--ink)}
.bouton-bloc{display:flex;width:100%}
.bouton-petit{padding:7px 12px;font-size:12.5px}
.bouton-icone{width:32px;height:32px;padding:0;border-radius:50%;background:transparent;border:0;color:#D8D9DE;display:grid;place-items:center;cursor:pointer}
.bouton-icone:hover{background:#191D23;color:#fff}
.boutons{display:flex;flex-direction:column;gap:9px}
.boutons-ligne{flex-direction:row;flex-wrap:wrap}

/* 9. Étiquettes et badges */
.etiquettes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.etiquette{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line-2);color:#4A4D55;border-radius:99px;padding:3px 9px;background:#fff;line-height:1.3}
a.etiquette:hover{border-color:var(--red);color:var(--red)}
.etiquette-active{background:var(--ink);border-color:var(--ink);color:#fff}
.etiquettes-sur-photo .etiquette{background:rgba(20,22,26,.72);border-color:transparent;color:#fff}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:rgba(20,22,26,.84);color:#fff;line-height:1.3}
.badge-ferme{background:var(--red)}
/* Le département ouvre le bandeau, en rouge, comme sur la maquette. */
.badge-departement{background:var(--red)}
.badge-ouvert{background:var(--green)}
.badge-inconnu{background:var(--muted)}

/* 10. Chiffres clés (fiche) et statistiques (accueil, carte) */
.chiffres-cles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px;margin:0 0 20px;padding:0;list-style:none}
.chiffre-cle{display:flex;gap:10px;align-items:center}
.chiffre-cle .icone{color:#5A5D66}
.chiffre-cle-libelle{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.chiffre-cle-valeur{display:block;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.statistiques{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--rayon);margin:20px 0;padding:0;list-style:none}
.statistique{padding:16px 12px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.statistique:nth-child(2n){border-right:0}
.statistique .icone{margin:0 auto 6px;color:var(--red)}
.statistique b,.statistique strong{display:block;font-family:var(--disp);font-weight:700;font-size:25px;line-height:1;font-variant-numeric:tabular-nums}
.statistique span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:5px}
@media (min-width:700px){.statistiques{grid-template-columns:repeat(4,1fr)}.statistique,.statistique:nth-child(2n){border-bottom:0;border-right:1px solid var(--line)}.statistique:last-child{border-right:0}}
@media (min-width:900px){.chiffres-cles{grid-template-columns:repeat(4,1fr)}}

/* 11. Caractéristiques (clé / valeur avec icône) et listes d'informations */
.caracteristiques{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.caracteristique{display:grid;grid-template-columns:minmax(90px,108px) minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.caracteristique:has(>.icone){grid-template-columns:26px minmax(90px,108px) minmax(0,1fr)}
.caracteristique:last-child{border-bottom:0}
.caracteristique .icone{color:#5A5D66}
.caracteristique-cle{font-size:12.5px;font-weight:600;color:var(--muted)}
.caracteristique-valeur{font-size:14px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.caracteristique-valeur a{color:var(--red)}
.caracteristique-valeur small{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}
.liste-infos{margin:0 0 16px;padding:0;list-style:none}
.liste-infos li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.liste-infos li:last-child{border-bottom:0}
.liste-infos li>:first-child{color:var(--muted)}
.liste-infos li>:last-child{font-weight:600;min-width:0;overflow-wrap:anywhere}
.liste-atouts{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.liste-atouts li{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500}
.liste-atouts .icone{flex:none;margin-top:1px;color:var(--red)}
.liste-simple{list-style:none;margin:0;padding:0}
.tableau-cadre{overflow-x:auto;margin:0 0 16px}
.tableau{width:100%;border-collapse:collapse;font-size:13.5px;margin:0}
.tableau th,.tableau td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tableau th{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tableau tr:last-child td{border-bottom:0}
.tableau .nombre{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

/* 12. Organisation : club gestionnaire, ligue, région */
.organisation{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.organisation-logo{width:118px;height:118px;border:1px solid var(--line);border-radius:var(--rayon);display:grid;place-items:center;overflow:hidden;background:#fff;padding:8px;color:var(--muted-2)}
.organisation-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.organisation h3,.organisation-nom{font-family:var(--body);font-size:18px;font-weight:700;margin:0 0 8px;letter-spacing:0}
.organisation p{font-size:13.5px;color:var(--text-2);margin:0 0 14px}
@media (min-width:520px){.organisation{grid-template-columns:118px minmax(0,1fr);gap:20px}}
.reseaux{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.reseau{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:99px;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--text-2);background:#fff}
.reseau:hover{border-color:var(--red);color:var(--red)}

/* 13. Cartes de liste : template-parts/carte-circuit.php et carte-club.php */
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;list-style:none;margin:0 0 20px;padding:0}
.grille-cartes-clubs{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.carte-circuit,.carte-club{position:relative;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.carte-circuit:hover,.carte-club:hover{border-color:var(--line-2);box-shadow:0 2px 10px rgba(20,22,26,.07)}
.carte-circuit-photo{position:relative;margin:0;aspect-ratio:1/1;background:#E6E6EB;overflow:hidden}
.carte-circuit-photo img{width:100%;height:100%;object-fit:cover}
.carte-circuit-sans-photo{width:100%;height:100%;display:grid;place-items:center;color:var(--muted-2);background:linear-gradient(135deg,#ECECF1,#DEDEE5)}
.carte-circuit-photo .badge{position:absolute;right:8px;top:8px}
.carte-circuit-corps{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px}
.carte-circuit-titre{font-size:16.5px;text-transform:uppercase;line-height:1.1;margin:0}
/* Cartes carrées (04/10/2026) : deux par ligne sur téléphone, corps resserré. */
@media (max-width:599px){
.grille-cartes:not(.grille-cartes-clubs){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.carte-circuit-corps{padding:10px 11px 12px;gap:6px}
.carte-circuit-titre{font-size:15px}
.carte-circuit .etiquette{font-size:10px;padding:2px 7px}
}
.carte-circuit-titre a::after,.carte-club-titre a::after{content:"";position:absolute;inset:0;z-index:1}
.carte-circuit-titre a:hover,.carte-club-titre a:hover{color:var(--red)}
.carte-circuit-lieu,.carte-club-lieu,.carte-club-circuits{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4}
.carte-circuit .localisation a,.carte-club .localisation a{position:relative;z-index:2}
.carte-circuit-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:12.5px;color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums}
.carte-circuit-meta .icone{color:#5A5D66;vertical-align:-2px}
.carte-circuit-ferme .carte-circuit-photo img{filter:grayscale(1);opacity:.75}
.carte-club{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
.carte-club-logo{flex:none;width:64px;height:64px;border:1px solid var(--line);border-radius:5px;display:grid;place-items:center;overflow:hidden;background:#fff;padding:4px;color:var(--muted-2)}
.carte-club-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.carte-club-corps{min-width:0;display:flex;flex-direction:column;gap:3px}
.carte-club-titre{font-family:var(--body);font-size:15.5px;margin:0;letter-spacing:0;line-height:1.25}
.carte-club-circuits{font-weight:600;color:var(--text-2)}
.carte-simple-titre{font-family:var(--body);font-size:16px;margin:0 0 6px;letter-spacing:0}
.carte-simple-titre a:hover{color:var(--red)}
.carte-simple .texte-discret{margin:0}

/* 14. Formulaires et filtres */
.champ-texte,.champ-select,.champ-zone{width:100%;border:1px solid var(--line-2);border-radius:4px;padding:10px 12px;font-family:var(--body);font-size:13.5px;background:#fff;color:var(--ink)}
.champ-select{appearance:none;padding-right:30px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.champ-zone{min-height:96px;resize:vertical}
.champ-texte:focus,.champ-select:focus,.champ-zone:focus{border-color:var(--red);outline:0;box-shadow:0 0 0 2px var(--red-soft)}
.champ-libelle{display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin:0 0 6px;color:#2C2F36}
.groupe-champ{margin-bottom:14px}
.champ-avec-icone{position:relative}
.champ-avec-icone>.icone{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--red);pointer-events:none}
.champ-avec-icone .champ-select,.champ-avec-icone .champ-texte{padding-left:34px}
.filtres{background:#fff;border:1px solid var(--line);border-radius:var(--rayon);padding:16px 18px;margin-bottom:20px}
.filtres-titre{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px;color:#2C2F36}
.filtres-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.barre-recherche{background:#111318;border-radius:var(--rayon);padding:16px 18px 18px;margin:20px 0;color:#fff}
.barre-recherche-titre{font-size:20px;color:#fff;margin:0 0 12px;letter-spacing:.03em;text-transform:uppercase}
.barre-recherche em{color:var(--red);font-style:normal}
.barre-recherche-champs{display:grid;grid-template-columns:1fr;gap:10px}
.barre-recherche .champ-select,.barre-recherche .champ-texte{background-color:#1B1E24;border-color:#2E323A;color:#E8E9ED;padding-top:11px;padding-bottom:11px;font-weight:500}
.barre-recherche .champ-select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238A8E97' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E")}
.barre-recherche .champ-select:focus,.barre-recherche .champ-texte:focus{box-shadow:none}
.barre-recherche .bouton{padding-top:11px;padding-bottom:11px;font-size:15px}
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tuile{border:1px solid var(--line);border-radius:5px;padding:11px 4px 9px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9.5px;font-weight:600;color:#4A4D55;text-align:center;line-height:1.2}
.tuile .icone{color:#5A5D66}
.tuile:hover{border-color:var(--line-2)}
.tuile[aria-pressed="true"]{border-color:var(--red);background:var(--red-soft);color:var(--red-dk)}
.tuile[aria-pressed="true"] .icone{color:var(--red)}
.puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.puce{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border:0;border-radius:99px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer}
.puce:hover{background:var(--red);color:#fff}
.compteur-resultats{font-size:13px;color:var(--muted);margin-top:12px}
.compteur-resultats b,.compteur-resultats strong{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.liste-resultats{margin:4px 0 0;padding:0;list-style:none;max-height:430px;overflow:auto}
.liste-resultats li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.liste-resultats li:last-child{border-bottom:0}
.liste-resultats .indice{width:22px;height:22px;border-radius:4px;background:var(--red-soft);color:var(--red);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:1px}
.liste-resultats b,.liste-resultats strong{display:block;font-size:13.5px;line-height:1.3}
.liste-populaire{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px;list-style:none;margin:0;padding:0}
.liste-populaire a{display:flex;gap:7px;align-items:baseline;padding:2px 0}
.liste-populaire .code{color:var(--red);font-weight:700;width:22px;flex:none;font-variant-numeric:tabular-nums}
.liste-populaire .nombre{color:var(--muted-2);font-size:12px}
.lien-retour{background:none;border:0;color:var(--red);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;display:inline-flex;gap:5px;align-items:center;margin-bottom:10px}
@media (min-width:600px){.barre-recherche-champs{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.tuiles{grid-template-columns:repeat(5,1fr)}}
@media (min-width:980px){.barre-recherche-champs{grid-template-columns:repeat(4,minmax(0,1fr)) auto}}

/* 15. Galerie et médias */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;list-style:none;margin:0 0 16px;padding:0}
.galerie-item{margin:0;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#F2F2F5;aspect-ratio:4/3}
.galerie-item a,.galerie-item img{display:block;width:100%;height:100%}
.galerie-item img{object-fit:cover;transition:transform .2s}
.galerie-item a:hover img{transform:scale(1.03)}
.cadre-media{position:relative;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#F2F2F5}
.cadre-media img{width:100%;height:auto}
.cadre-media .bouton-zoom{position:absolute;top:11px;right:11px;background:rgba(255,255,255,.94);border:1px solid var(--line-2);border-radius:4px;padding:7px 11px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:6px;align-items:center;cursor:pointer}
.cadre-media .bouton-zoom:hover{background:#fff;color:var(--red)}
.video-lecteur{position:relative;aspect-ratio:16/9;background:#000;border-radius:5px;overflow:hidden;margin:0 0 16px}
.video-lecteur iframe,.video-lecteur img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-lecteur-bouton{position:absolute;inset:0;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;color:#fff}
.video-lecteur-bouton .icone{width:64px;height:64px;padding:18px;border-radius:50%;background:var(--red);box-shadow:0 6px 22px rgba(0,0,0,.4)}
.video-lecteur-bouton:hover .icone{background:var(--red-dk)}
@media (min-width:600px){.galerie{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.galerie{grid-template-columns:repeat(4,1fr)}}

/* 16. Carte de France (SVG des départements, points des circuits) */
.carte-france-cadre{position:relative}
.carte-france{width:100%;height:auto;display:block;touch-action:none}
.departement{fill:#E6E6EB;stroke:#fff;stroke-width:1.4;cursor:pointer;transition:fill .12s}
.departement:hover,.departement-actif{fill:var(--red)}
.departement-actif{stroke:#fff;stroke-width:2}
.departement-vide,.departement-vide:hover{fill:#F2F2F5;cursor:default;opacity:.75}
.numero-departement{font-family:var(--body);font-size:14px;font-weight:600;fill:#7A7E88;text-anchor:middle;pointer-events:none;user-select:none}
.point-circuit{fill:var(--red);stroke:#fff;stroke-width:1.2;cursor:pointer}
.point-circuit:hover{fill:var(--ink)}
.zoom-carte{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;background:#fff}
.zoom-carte button{width:32px;height:31px;border:0;background:#fff;cursor:pointer;font-size:17px;line-height:1;color:#3B3E45;border-bottom:1px solid var(--line)}
.zoom-carte button:last-child{border-bottom:0}
.zoom-carte button:hover{background:#F2F2F5;color:var(--red)}
.infobulle{position:absolute;pointer-events:none;background:var(--ink);color:#fff;border-radius:4px;padding:7px 10px;font-size:12.5px;line-height:1.35;z-index:12;opacity:0;transition:opacity .12s;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.infobulle.visible{opacity:1}
.infobulle b{display:block;font-size:13.5px}
.infobulle i{font-style:normal;color:#FF6A5C}
.legende{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:10px}
.legende-echelle{display:flex;height:9px;border-radius:2px;overflow:hidden;width:132px}
.legende-echelle i{flex:1}
.selecteur-mode{display:flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.selecteur-mode button{border:0;background:#fff;padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);border-right:1px solid var(--line)}
.selecteur-mode button:last-child{border-right:0}
.selecteur-mode button[aria-pressed="true"]{background:var(--ink);color:#fff}
.entete-carte{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.colonnes-carte{display:grid;grid-template-columns:1fr;gap:var(--espace);align-items:start;margin-top:20px}
@media (min-width:900px){.colonnes-carte{grid-template-columns:minmax(0,1fr) 320px}}
@media (min-width:1200px){.colonnes-carte{grid-template-columns:minmax(0,1fr) 320px 292px}}

/* 17. Pagination (marquage de paginate_links, type « list ») */
.pagination{margin:24px 0 8px}
.pagination .page-numbers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pagination a.page-numbers,.pagination span.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;background:#fff;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.pagination a.page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .page-numbers.dots{border:0;background:transparent}

/* 18. Zones publicitaires : vides et nommées, invisibles tant qu'elles le restent */
.pub{display:none}
.pub:not(:empty){display:block;position:relative}
.pub-banniere:not(:empty){background:#1A1109;color:#fff;min-height:120px}
.pub-carte:not(:empty),.pub-locale:not(:empty){background:#fff;border:1px solid var(--line);border-radius:var(--rayon);overflow:hidden}
.pub-bandeau:not(:empty){border:1px solid var(--line);border-radius:var(--rayon);overflow:hidden;background:#fff;margin-top:20px}

/* 19. Pied de page */
.pied{background:var(--foot);color:#B7BAC2;padding:34px 0 0;font-size:13px;margin-top:20px}
.pied-grille{display:grid;grid-template-columns:1fr;gap:26px}
.pied .logo{font-size:22px;margin-bottom:10px;display:inline-block}
.pied-marque p{margin:0;max-width:32ch;line-height:1.6}
.pied-titre{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pied-colonne-regions ul{display:block;columns:2;column-gap:16px}
.pied-colonne-regions li{margin-bottom:8px;break-inside:avoid}
.pied a:hover{color:#fff}
.pied-bas{margin-top:30px;border-top:1px solid #1B2027;padding:14px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:12px;color:#7E828C}
.pied-mention{flex-basis:100%}
@media (min-width:600px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.pied-grille{grid-template-columns:1.4fr 1.3fr 1fr 1fr}.pied-mention{flex-basis:auto}}

/* 20. Utilitaires */
.icone{display:inline-block;flex:none;vertical-align:middle}
.aligne-droite{text-align:right}
.centre{text-align:center}
.marge-haut{margin-top:20px}
.masque-mobile{display:none}
@media (min-width:900px){.masque-mobile{display:initial}.masque-bureau{display:none}}


/* Facette d'accès : des liens, pas des boutons — chacun mène à une vraie
   adresse, ce qui est tout l'intérêt côté référencement. */
.facette-acces{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.facette-intitule{font-size:.85rem;color:var(--muted);font-weight:600}
.facette-choix{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;
  text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:6px 13px;transition:border-color .12s,background .12s}
.facette-choix:hover{border-color:var(--accent)}
.facette-actif{background:var(--ink);color:#fff;border-color:var(--ink)}
.facette-n{font-variant-numeric:tabular-nums;opacity:.7;font-size:.8rem}

/* Texte de contexte des pages de département : lisible, jamais bavard. */
.texte-departement,.texte-rubrique{margin:0 0 22px;max-width:72ch}
.texte-departement p,.texte-rubrique p{margin:0 0 12px;line-height:1.62}
.texte-rubrique h2{margin:20px 0 10px;font-size:1.12rem}
.texte-rubrique ul{margin:0 0 12px}
.texte-departement p:last-child{margin-bottom:0}

/* Pages éditoriales : une colonne de texte qui se lit, rien de plus. */
.corps-editorial{max-width:72ch}
.corps-editorial h2{margin:32px 0 12px;font-size:1.35rem}
.corps-editorial p{margin:0 0 14px;line-height:1.68}
.corps-editorial ul,.corps-editorial ol{margin:0 0 16px;padding-left:22px}
.corps-editorial li{margin:0 0 7px;line-height:1.6}
.corps-editorial .chapeau-article{font-size:1.08rem;color:var(--muted);margin:0 0 24px}
.corps-editorial .note-source{font-size:.9rem;color:var(--muted);margin-top:26px;
  padding-top:14px;border-top:1px solid var(--line)}
.tableau-comparatif{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:var(--rayon)}
.tableau-comparatif table{border-collapse:collapse;width:100%;min-width:460px;font-size:.94rem}
.tableau-comparatif th,.tableau-comparatif td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.tableau-comparatif tr:last-child td{border-bottom:0}
.tableau-comparatif thead th{background:#F4F4F6;font-weight:600}

/* Grille des rubriques : une porte d'entrée par catégorie, pas une liste. */
.grille-rubriques{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;margin:24px 0 0}
.rubrique{display:flex;flex-direction:column;gap:3px;padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--rayon);text-decoration:none;color:inherit;
  transition:border-color .12s,transform .12s}
.rubrique:hover{border-color:var(--accent);transform:translateY(-2px)}
.rubrique-nom{font-weight:600;font-size:1.02rem}
.rubrique-n{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Pictogrammes de discipline (16/09/2026) : décoratifs, à côté du nom. */
.picto-discipline{width:1.2em;height:1.2em;vertical-align:-.28em;margin-right:.35em;object-fit:contain}
.etiquettes-sur-photo .picto-discipline{filter:brightness(0) invert(1)}
.titre-avec-picto{display:flex;align-items:center;gap:14px}
.picto-discipline-grand{width:64px;height:64px;flex:0 0 auto;margin:0}
@media (max-width:600px){.picto-discipline-grand{width:44px;height:44px}}

/* Pied : icône Facebook (02/10/2026) */
.pied-contact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.pied-facebook{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:6px;border-radius:50%;color:#B7BAC2}
.pied-facebook:hover,.pied-facebook:focus-visible{color:#fff;background:#191D23}

/* Formulaire de contact (02/10/2026) */
.contact-formulaire{display:grid;gap:14px;max-width:640px;margin:18px 0 8px}
.contact-champ{display:grid;gap:6px;margin:0}
.contact-champ label{font-weight:600;font-size:14px}
.contact-facultatif{font-weight:400;color:var(--muted)}
.contact-formulaire input[type=text],.contact-formulaire input[type=email],.contact-formulaire select,.contact-formulaire textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--rayon);padding:10px 12px}
.contact-formulaire textarea{resize:vertical;min-height:150px}
.contact-formulaire :focus-visible{outline:2px solid var(--red);outline-offset:1px}
.contact-formulaire [aria-invalid=true]{border-color:var(--red)}
.contact-erreur{margin:0;color:var(--red-dk);font-size:13.5px}
.contact-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-merci{margin:18px 0;padding:14px 16px;border-radius:var(--rayon);background:#E9F4EC;border:1px solid #BFDCC8;color:#14532D}
.contact-merci p{margin:0}
/* Raccourcis et questions fréquentes des listings (02/10/2026) */
.raccourcis-listing{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.raccourcis-listing .etiquette-lien{display:inline-block;font-size:14px;font-weight:600;border:1px solid var(--line-2);border-radius:99px;padding:7px 14px;color:var(--red);background:var(--card);text-decoration:none}
.raccourcis-listing .etiquette-lien:hover,.raccourcis-listing .etiquette-lien:focus-visible{border-color:var(--red)}
.faq-listing h3{font-size:17px;margin:18px 0 6px}
.faq-listing h3:first-child{margin-top:0}
.faq-listing p{margin:0 0 8px}
/* Macaron des clubs (02/10/2026) */
.lien-macaron{margin:14px 0 0;font-size:13px;color:var(--muted)}
.macaron-outil{display:grid;gap:10px;max-width:560px;margin:24px 0}
.macaron-outil select,.macaron-outil textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--line-2);border-radius:4px;background:var(--card)}
.macaron-outil textarea{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.macaron-apercu{margin:4px 0 8px}
.macaron-outil .bouton{justify-self:start}
#macaron-message{font-size:13px;color:var(--muted)}

/* 21. Menu du téléphone (07/10/2026) : en-tête fixe, sous-menus repliés qui
   s'ouvrent au toucher de leur flèche ; le panneau ouvert défile à l'intérieur
   au lieu de pousser la page. */
.sous-menu-bouton{display:none}
@media (max-width:899px){
  .entete{position:sticky;top:0;z-index:100}
  html{scroll-padding-top:64px}
  .js .navigation.ouverte{max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain}
  .menu-deroulant{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:1px solid #1B2027}
  .menu-deroulant>.menu-tete{border-bottom:0}
  .menu-deroulant>.menu-tete::after{display:none}
  .js .sous-menu-bouton{display:grid;place-items:center;width:48px;height:42px;margin-right:-8px;background:transparent;border:0;color:#EDEDF0;cursor:pointer}
  .sous-menu-bouton .icone{transition:transform .15s}
  .menu-deroulant.deplie .sous-menu-bouton .icone{transform:rotate(180deg)}
  .menu-deroulant>.sous-menu{grid-column:1/-1}
  .js .menu-deroulant>.sous-menu{display:none}
  .js .menu-deroulant.deplie>.sous-menu{display:grid}
}
@media (min-width:900px){.menu-mobile{display:none}}

/* 22. Bouton « haut de page » (07/10/2026) : apparaît une fois le premier écran quitté. */
.bouton-haut{position:fixed;right:16px;bottom:16px;z-index:55;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s}
.bouton-haut.visible{opacity:1;visibility:visible;transform:none}
.bouton-haut:hover,.bouton-haut:focus-visible{background:var(--red-dk);color:#fff}
.bouton-haut .icone{transform:rotate(180deg)}
html:not(.js) .bouton-haut{display:none}
@media (min-width:900px){.bouton-haut{right:24px;bottom:24px;width:50px;height:50px}}

/* Pied : la signature mène à la carte des circuits (07/10/2026). */
.pied-accroche{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px}
.pied-accroche:hover{color:#fff;text-decoration-color:#fff}

/* 23. Chiffres clés en pictos (07/10/2026) : icône à gauche, valeur et libellé
   à droite ; chaque case est un lien. Remplace les « En bref » de la colonne de droite. */
.chiffres-liens{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.chiffres-liens>li{min-width:0}
.chiffre-lien{display:flex;align-items:center;gap:12px;height:100%;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--rayon);color:inherit;transition:border-color .12s,transform .12s,box-shadow .12s}
a.chiffre-lien:hover,a.chiffre-lien:focus-visible{border-color:var(--red);transform:translateY(-2px);box-shadow:0 4px 14px rgba(20,22,26,.08);color:inherit}
.chiffre-lien-icone{flex:none;width:42px;height:42px;border-radius:50%;background:var(--red-soft);color:var(--red);display:grid;place-items:center}
a.chiffre-lien:hover .chiffre-lien-icone{background:var(--red);color:#fff}
.chiffre-lien-texte{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.chiffre-lien-texte strong{font-family:var(--disp);font-weight:700;font-size:21px;overflow-wrap:anywhere}
.chiffre-lien-texte span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media (max-width:599px){
  .chiffres-liens{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .chiffre-lien{padding:10px;gap:9px}
  .chiffre-lien-icone{width:36px;height:36px}
  .chiffre-lien-texte strong{font-size:18px}
}

/* 24. Texte de département sous les publicités sur téléphone (07/10/2026) : il
   suit la colonne latérale dans le code ; sur ordinateur, la grille le remet
   sous la liste, à gauche, la colonne latérale courant sur les deux rangées. */
@media (min-width:900px){
  .colonnes-texte-bas{grid-template-rows:auto 1fr}
  .colonnes-texte-bas>.colonne-principale{grid-column:1;grid-row:1}
  .colonnes-texte-bas>.colonne-laterale{grid-column:2;grid-row:1/span 2}
  .colonnes-texte-bas>.texte-departement{grid-column:1;grid-row:2;align-self:start}
}

/* 25. Pictos de discipline dans les étiquettes (07/10/2026) : la règle de base
   « img{display:block} » les envoyait sur leur propre ligne, au-dessus du mot. */
img.picto-discipline{display:inline-block}
.etiquette:has(.picto-discipline){display:inline-flex;align-items:center;gap:5px}
.etiquette .picto-discipline{margin:0;vertical-align:middle;width:1.3em;height:1.3em}
.entete-chiffres .chiffre-lien{padding:9px 12px;gap:10px}
.entete-chiffres .chiffre-lien-icone{width:34px;height:34px}
.entete-chiffres .chiffre-lien-texte strong{font-size:18px}

/* 26. Univers moto-clubs (07/10/2026) : même mise en page que les ligues, teinte
   plus sombre — carte foncée à noms blancs, pictos sur fond d'encre. */
.univers-clubs .chiffre-lien-icone{background:var(--ink);color:#fff}
.univers-clubs a.chiffre-lien:hover .chiffre-lien-icone{background:var(--red)}
.univers-clubs .carte-regions-svg .zone-part,.univers-clubs .carte-regions-legende .pastille,.univers-clubs .tableau-ligues .pastille{filter:brightness(.7) saturate(1.25)}
.univers-clubs .carte-regions-svg .zone:hover .zone-part,.univers-clubs .carte-regions-svg .zone:focus .zone-part{filter:brightness(.55) saturate(1.3)}
.univers-clubs .carte-regions-svg .zone-nom{fill:#fff}
.univers-clubs .surtitre{color:var(--ink)}
.univers-clubs .titre-page{border-left:5px solid var(--ink);padding-left:12px}

/* 27. Vidéothèque visuelle (07/10/2026) : miniatures 16/9, grille, tuiles de liens. */
.grille-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:0 0 20px}
.carte-video a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;color:inherit;transition:border-color .12s,box-shadow .12s,transform .12s}
.carte-video a:hover{border-color:var(--line-2);box-shadow:0 4px 16px rgba(20,22,26,.1);transform:translateY(-2px);color:inherit}
.carte-video-image,.rubrique-image{position:relative;display:block;aspect-ratio:16/9;background:#14161A;overflow:hidden}
.carte-video-image img,.rubrique-image img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.carte-video a:hover img,.rubrique-video:hover img{transform:scale(1.04)}
.carte-video-sans-image{display:grid;place-items:center;width:100%;height:100%;color:#5A5D66}
.carte-video-lecture{position:absolute;left:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.4)}
.carte-video-lecture .icone{margin-left:3px}
.carte-video-corps{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.carte-video-rubrique{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.carte-video-titre{font-weight:600;font-size:14px;line-height:1.3}
.carte-video a:hover .carte-video-titre{color:var(--red)}
.grille-videos-proches{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:0}
@media (max-width:599px){.grille-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.carte-video-titre{font-size:13px}.carte-video-lecture{width:32px;height:32px}}
.grille-rubriques-videos .rubrique-video{padding:0;overflow:hidden;gap:0}
.rubrique-video .rubrique-nom{padding:10px 14px 0;font-family:var(--disp);font-size:1.15rem;text-transform:uppercase}
.rubrique-video .rubrique-n{padding:0 14px 12px}
.raccourcis-listing .etiquette-lien-actif{background:var(--ink);border-color:var(--ink);color:#fff}
/* Lecteur Dailymotion de remplacement : miniature, bouton, mention. */
.video-externe{display:block;color:#fff}
.video-externe .video-lecteur-bouton{pointer-events:none}
.video-externe-mention{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;background:linear-gradient(transparent,rgba(0,0,0,.78));font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.video-externe:hover{color:#fff}
.video-externe:hover .video-lecteur-bouton .icone{background:var(--red-dk)}
/* Tuiles de liens en pictos (« Rouler à votre tour », vidéothèque). */
.tuiles-liens{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.tuiles-liens a{display:flex;align-items:center;gap:12px;height:100%;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--rayon);font-weight:600;font-size:14px;line-height:1.3;color:inherit;transition:border-color .12s,transform .12s,box-shadow .12s}
.tuiles-liens a:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 4px 14px rgba(20,22,26,.08);color:inherit}
.tuile-lien-icone{flex:none;width:40px;height:40px;border-radius:50%;background:var(--red-soft);color:var(--red);display:grid;place-items:center}
.tuiles-liens a:hover .tuile-lien-icone{background:var(--red);color:#fff}
.tuile-lien-texte{flex:1;min-width:0}
.tuile-lien-fleche{color:var(--red);transition:transform .15s}
.tuiles-liens a:hover .tuile-lien-fleche{transform:translateX(3px)}
.panneau .tuiles-liens a{background:var(--ground)}
.panneau .tuiles-liens a:hover{background:#fff}

/* 28. Liens dans le texte courant (07/10/2026) : la règle de base « a{color:inherit;
   text-decoration:none} » les rendait invisibles au milieu d'une phrase. Les
   paragraphes d'interface (surtitres, lieux des cartes) restent à part. */
:is(.contenu p:not(.surtitre,.carte-circuit-lieu,.carte-club-lieu,.carte-club-circuits,.texte-discret),.corps-editorial li,.texte-rubrique li,.article-contenu li,.texte-page li) a:not([class]){color:var(--red);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(216,26,12,.45)}
:is(.contenu p:not(.surtitre,.carte-circuit-lieu,.carte-club-lieu,.carte-club-circuits,.texte-discret),.corps-editorial li,.texte-rubrique li,.article-contenu li,.texte-page li) a:not([class]):hover{color:var(--red-dk);text-decoration-color:currentColor}

/* 29. Page Annonceurs (07/10/2026) : tête sombre, schéma des emplacements, offres, carte de contact. */
:root{--jaune:#FFD21F;--jaune-dk:#E5B800}
.annonceurs-tete{background:var(--head);color:#fff;border-radius:var(--rayon);padding:26px 20px 24px;margin:0 0 16px;position:relative;overflow:hidden}
.annonceurs-tete::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(216,26,12,.45),transparent 70%);pointer-events:none}
.annonceurs-tete .titre-page{color:#fff;margin:8px 0 12px;max-width:22ch}
.annonceurs-tete .titre-page em{font-style:normal;color:var(--jaune)}
.annonceurs-chapeau{color:#C8CBD2;max-width:60ch;font-size:15px;margin:0 0 18px}
.annonceurs-lancement{display:inline-flex;align-items:center;gap:6px;margin:0;padding:5px 11px;border-radius:99px;background:var(--jaune);color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bouton-clair{background:transparent;color:#fff;border-color:#3A3F48}
.bouton-clair:hover{border-color:#fff;color:#fff}
.annonceurs-chiffres{margin:0 0 20px}
.annonceurs-atouts{display:grid;grid-template-columns:1fr;gap:14px}
.annonceurs-atouts>div{display:flex;gap:12px;align-items:flex-start}
.annonceurs-atouts p{margin:0;font-size:14px}
@media (min-width:700px){.annonceurs-atouts{grid-template-columns:repeat(3,1fr)}.annonceurs-atouts>div{flex-direction:column}}
/* Schéma des emplacements : deux maquettes dessinées en CSS. */
.maquettes{display:flex;gap:18px;align-items:flex-end;justify-content:center;margin:8px 0 18px;padding:18px;background:var(--ground);border-radius:var(--rayon)}
.maquette{position:relative;display:flex;flex-direction:column;gap:5px;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:6px 6px 22px}
.maquette-ordi{width:min(100%,360px)}
.maquette-tel{width:118px;border-radius:14px}
.maquette-barre{height:8px;background:var(--ink);border-radius:2px}
.maquette-corps{display:grid;grid-template-columns:1fr 32%;gap:5px}
.maquette-texte{display:flex;flex-direction:column;gap:4px}
.maquette-texte i{height:7px;background:#E4E5EA;border-radius:2px}
.maquette-rail{display:flex;flex-direction:column;gap:5px}
.zone{display:grid;place-items:center;border-radius:3px;color:var(--ink);font-family:var(--disp);font-size:15px;background:var(--jaune);animation:zone-pulse 2.4s ease-in-out infinite}
.zone b{font-weight:800}
.zone-tete,.zone-pied{height:30px}
.zone-milieu{height:20px}
.zone-carre{height:62px}
.zone-rect{height:30px}
.maquette-tel .zone-carre{height:54px}
.maquette-legende{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@keyframes zone-pulse{0%,100%{background:var(--jaune)}50%{background:#FFE780}}
.emplacements{list-style:none;counter-reset:emplacement;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.emplacement{counter-increment:emplacement;display:grid;grid-template-columns:32px 1fr;gap:2px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rayon);background:#fff}
.emplacement::before{content:counter(emplacement);grid-row:1/span 3;width:28px;height:28px;border-radius:50%;background:var(--jaune);display:grid;place-items:center;font-family:var(--disp);font-weight:800}
.emplacement span{font-size:13.5px;color:var(--text-2)}
.emplacement small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (min-width:700px){.emplacements{grid-template-columns:1fr 1fr}}
.offres{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 12px}
.offre{border:2px solid var(--line);border-radius:var(--rayon);padding:16px 18px;background:#fff}
.offre:first-child{border-color:var(--ink)}
.offre-surtitre{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.offre h3{font-size:20px;text-transform:uppercase;margin:0 0 8px}
.offre p:last-child{margin:0;font-size:14px}
.offre-note{font-size:13.5px;color:var(--text-2)}
@media (min-width:700px){.offres{grid-template-columns:1fr 1fr}}
.etapes{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.etapes li{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.etapes b{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-size:17px}
@media (min-width:700px){.etapes{grid-template-columns:repeat(3,1fr)}}
.carte-contact-annonceurs{position:sticky;top:20px;background:var(--head);color:#fff;border-radius:var(--rayon);padding:20px 18px;display:flex;flex-direction:column;gap:10px}
.carte-contact-annonceurs h2{color:#fff;font-size:24px;text-transform:uppercase;margin:4px 0 0}
.carte-contact-annonceurs p{color:#C8CBD2;font-size:13.5px;margin:0}
.carte-contact-annonceurs .annonceurs-lancement{align-self:flex-start;color:var(--ink)}
.carte-contact-annonceurs .bouton-contour{background:transparent;color:#fff;border-color:#3A3F48}
.carte-contact-annonceurs .bouton-contour:hover{border-color:#fff}
.carte-contact-annonceurs .liste-atouts{margin-top:6px}
.carte-contact-annonceurs .liste-atouts li{font-size:13px;color:#E8E9ED}
.carte-contact-annonceurs .liste-atouts .icone{color:var(--jaune)}
.courriel-protege.bouton{text-transform:none;letter-spacing:.02em}
@media (min-width:900px){.annonceurs-tete{padding:36px 36px 32px}}
.annonceurs-visuel{display:none}
@media (min-width:1000px){
  .annonceurs-tete{padding-right:46%}
  .annonceurs-visuel{display:block;position:absolute;right:36px;top:50%;transform:translateY(-50%);width:38%;height:230px;z-index:1}
  .pub-factice{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 18px;background:var(--jaune);color:var(--ink);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.45);font-family:var(--disp);text-transform:uppercase}
  .pub-factice b{font-size:30px;font-weight:800;font-style:italic;line-height:1}
  .pub-factice span{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.08em}
  .pub-factice:first-child{left:0;right:0;top:0;height:96px;transform:rotate(-3deg)}
  .pub-factice-carre{right:8%;bottom:0;width:46%;height:118px;background:#fff;border:3px dashed var(--jaune);transform:rotate(2.5deg)}
  .pub-factice-carre b{font-size:24px}
}

/* 30. Page Disciplines (07/10/2026) : bandeau à rayures qui défilent, cartes qui
   montent l'une après l'autre, logo qui se cabre au survol. Tout s'arrête si le
   visiteur a demandé moins d'animations (règle de base, section 2). */
.disciplines-tete{position:relative;overflow:hidden;background:var(--head);color:#fff;border-radius:var(--rayon);padding:26px 20px;margin:0 0 20px}
.disciplines-tete::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-60deg,transparent 0 38px,rgba(216,26,12,.22) 38px 52px,transparent 52px 90px,rgba(255,210,31,.12) 90px 98px);background-size:400px 100%;animation:rayures-vitesse 9s linear infinite;pointer-events:none}
.disciplines-tete>*{position:relative}
.disciplines-tete .surtitre{color:var(--jaune)}
.disciplines-tete .titre-page{color:#fff;margin:6px 0 10px}
.disciplines-tete .chapeau{color:#C8CBD2;max-width:64ch;margin:0}
@keyframes rayures-vitesse{to{background-position:400px 0}}
.grille-disciplines{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 20px}
@media (min-width:700px){.grille-disciplines{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grille-disciplines{grid-template-columns:repeat(4,1fr)}}
.discipline{animation:carte-monte .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--rang,0) * 70ms)}
@keyframes carte-monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.discipline-lien{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.discipline-lien:hover{border-color:var(--red);box-shadow:0 10px 26px rgba(20,22,26,.12);transform:translateY(-3px);color:inherit}
.discipline-logo{display:grid;place-items:center;padding:18px 0 6px;background:linear-gradient(180deg,#FFF7D6,#fff)}
.discipline-logo img{width:150px;height:150px;object-fit:contain;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.discipline-lien:hover .discipline-logo img{transform:rotate(-9deg) scale(1.07)}
.discipline-corps{display:flex;flex-direction:column;gap:6px;padding:12px 16px 16px;flex:1}
.discipline-nom{font-size:22px;text-transform:uppercase;margin:0}
.discipline-nombre{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:99px;padding:3px 9px}
.discipline-texte{font-size:13.5px;line-height:1.55;color:var(--text-2);flex:1}
.discipline-appel{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--red);font-size:14px}
.discipline-lien:hover .discipline-appel .icone{transform:translateX(4px)}
.discipline-appel .icone{transition:transform .15s}
@media (min-width:900px){.disciplines-tete{padding:38px 36px}}

/* 31. Pages guides (07/10/2026) : en-tête illustré, cartes de tutoriels, texte mis en forme. */
.guide-tete{position:relative;background:var(--head);color:#fff;border-radius:var(--rayon);overflow:hidden;margin:0 0 20px;display:grid;grid-template-columns:1fr}
.guide-tete-texte{padding:24px 20px;position:relative;z-index:1}
.guide-tete .surtitre{color:var(--jaune)}
.guide-tete .titre-page{color:#fff;margin:6px 0 10px}
.guide-tete .chapeau{color:#C8CBD2;margin:0;max-width:62ch;font-size:15px}
.guide-tete-image{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;background:#fff}
@media (min-width:900px){
  .guide-tete-illustree{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
  .guide-tete-texte{padding:34px 36px}
  .guide-tete-illustree .guide-tete-image{height:100%;aspect-ratio:auto;min-height:240px}
}
.grille-tutos{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.grille-tutos{grid-template-columns:repeat(3,1fr)}}
.carte-tuto{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 16px 16px;background:#fff;border:1px solid var(--line);border-radius:8px;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.carte-tuto:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 8px 22px rgba(20,22,26,.1);color:inherit}
.carte-tuto-numero{position:absolute;right:14px;top:10px;font-family:var(--disp);font-weight:800;font-style:italic;font-size:44px;line-height:1;color:var(--jaune)}
.carte-tuto-icone{width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.carte-tuto-titre{font-family:var(--disp);font-size:20px;text-transform:uppercase;line-height:1.05}
.carte-tuto-extrait{font-size:13.5px;color:var(--text-2);flex:1}
.carte-tuto-appel{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--red);font-size:14px}
.corps-guide{max-width:none}
.corps-guide h2{display:flex;align-items:center;gap:10px;font-size:24px;text-transform:uppercase;margin:28px 0 12px}
.corps-guide h2::before{content:"";flex:none;width:6px;height:26px;background:var(--red);border-radius:2px;transform:skewX(-14deg)}
.corps-guide h2:first-child{margin-top:0}
.bloc-tuto{border-left:3px solid var(--jaune);padding:2px 0 2px 16px;margin:0 0 18px}
.a-prevoir{background:var(--ground);border-radius:var(--rayon);padding:12px 16px;margin:8px 0 0}
.a-prevoir-titre{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px!important}
.a-prevoir-titre::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:12px}
.a-prevoir ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:5px 18px}
@media (min-width:700px){.a-prevoir ul{grid-template-columns:1fr 1fr}}
.a-prevoir li{position:relative;padding-left:16px;font-size:14px;margin:0}
.a-prevoir li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--red);transform:rotate(45deg)}
/* Listes du texte éditorial : puces rouges plutôt que les points par défaut. */
.corps-editorial ul{list-style:none;padding-left:0}
.corps-editorial ul>li{position:relative;padding-left:20px}
.corps-editorial ul>li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;background:var(--red);transform:rotate(45deg)}
/* Sommaire et appel vers les stages (guide du débutant, 07/10/2026). */
.sommaire{margin:0 0 20px}
.sommaire-titre{font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;margin:0 0 8px}
.sommaire ol{margin:0;padding:0;list-style:none;counter-reset:partie;display:grid;grid-template-columns:1fr;gap:4px 24px}
.sommaire li{counter-increment:partie;display:flex;gap:10px;align-items:baseline}
.sommaire li::before{content:counter(partie,decimal-leading-zero);font-family:var(--disp);font-weight:700;color:var(--red);min-width:22px}
.sommaire a{font-weight:600;font-size:14px}
.sommaire a:hover{color:var(--red)}
@media (min-width:700px){.sommaire ol{grid-template-columns:1fr 1fr}}
.page-editoriale .guide-tete{margin-bottom:16px}
.corps-editorial h2[id]{scroll-margin-top:80px}
.appel-stages{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center;margin:26px 0 0;padding:18px;border-radius:var(--rayon);background:var(--head);color:#fff}
.appel-stages-icone{width:52px;height:52px;border-radius:50%;background:var(--jaune);color:var(--ink);display:grid;place-items:center}
.appel-stages-titre{font-family:var(--disp);font-size:21px;font-weight:700;text-transform:uppercase;margin:0 0 4px;color:#fff}
.appel-stages p{margin:0;color:#C8CBD2;font-size:14px}
.appel-stages .bouton{grid-column:1/-1;justify-self:start}
@media (min-width:700px){.appel-stages{grid-template-columns:auto 1fr auto}.appel-stages .bouton{grid-column:auto}}
.video-sans-image{background:linear-gradient(135deg,#1B2027,#06080B)}

/* 32. Avertissement de sécurité (07/10/2026) : encart des fiches circuit et ligne du pied. */
.attention{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--rayon);background:#FFF8DB;border:1px solid #F2D86B;border-left:5px solid var(--jaune-dk)}
.attention-icone{flex:none;color:#8A6A00;margin-top:1px}
.attention p{margin:0;font-size:13.5px;line-height:1.55;color:#3D3200}
.attention strong{color:#2A2200}
.attention a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pied-avertissement{flex-basis:100%;display:flex;gap:6px;align-items:flex-start;color:#A8ABB3;line-height:1.5}
.pied-avertissement .icone{flex:none;margin-top:3px;color:var(--jaune)}
.pied-avertissement a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* 33. Réseaux sociaux aux couleurs des plateformes (07/10/2026) : le lien
   Facebook d'un club passait inaperçu dans une pastille grise. */
.reseau{padding:7px 14px;font-size:13px}
.reseau-facebook{background:#1877F2;border-color:#1877F2;color:#fff}
.reseau-facebook:hover{background:#0F5FCC;border-color:#0F5FCC;color:#fff}
.reseau-instagram{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);border-color:transparent;color:#fff}
.reseau-instagram:hover{color:#fff;filter:brightness(1.08)}
.reseau-youtube{background:#FF0000;border-color:#FF0000;color:#fff}
.reseau-youtube:hover{background:#CC0000;color:#fff}
.reseau-tiktok,.reseau-x{background:#000;border-color:#000;color:#fff}
.reseau-tiktok:hover,.reseau-x:hover{color:#fff;background:#222}
.lien-disciplines{margin:14px 0 0}.lien-disciplines a{display:inline-flex;align-items:center;gap:6px}

/* 34. Vidéos des tutoriels (13/10/2026) : trois vidéos en tête de l'article, côte à côte ;
   sur téléphone, un rang qui défile au doigt pour ne pas repousser le texte de trois écrans. */
.tuto-videos{margin:4px 0 24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.tuto-videos .titre-section{margin-bottom:6px}
.tuto-videos-chapeau{margin:0 0 14px;color:var(--muted)}
.tuto-videos-rang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tuto-video{margin:0;min-width:0}
.tuto-video .video-lecteur{margin:0 0 8px}
.tuto-video .video-lecteur-bouton .icone{width:52px;height:52px;padding:14px}
.tuto-video figcaption{display:grid;gap:2px;line-height:1.35}
.tuto-video-libelle{font-weight:600;color:var(--ink);font-size:15px}
.tuto-video-meta{font-size:13px;color:var(--muted)}
@media (max-width:820px){
  .tuto-videos-rang{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:6px}
  .tuto-video{scroll-snap-align:start}
}