/* =============================================================================
   Sports-et-loisirs.fr — site public B7 (nouveau design, vraies données)
   Feuille de style unique, sans dépendance externe. Réécrite au propre le 28/10/2026
   (version précédente gardée dans b7-avant-optimisation.css).

   Sommaire
     1. Couleurs et réglages            10. Résultats : liste et carte
     2. Base                            11. Carte (Leaflet) et bulles des clubs
     3. Mise en page commune            12. Fiche club
     4. Boutons, liens, petites pièces  13. Index des villes et des disciplines
     5. En-tête                         14. Blog
     6. Suggestions de recherche        15. Pages d'infos
     7. Accueil                         16. Compte, espace pratiquant, favoris
     8. Cartes de clubs                 17. Publicités
     9. Résultats : en-tête et filtres  18. Pied de page, annonces, barres de défilement

   Largeurs d'écran : chaque composant a ses règles « @media » juste après lui, avec 5 seuils seulement
   (même valeur pour le même changement partout) :
     1080 px  menu burger, recherche sur une 2e ligne, barre de filtres qui défile avec la page
     1000 px  tablette : une colonne (fiche, article, infos), carte des résultats en plein écran ;
              au-dessus, « min-width: 1001px » pour ce qui n'existe que sur ordinateur
      760 px  petite tablette, téléphone à l'horizontale : grilles en 2 colonnes ou en 1
      600 px  téléphone
      420 px  petit téléphone
   ============================================================================= */


/* 1. Couleurs et réglages ---------------------------------------------------- */
:root {
	--nuit: #1c2430;              /* fond sombre (thème Ardoise et cyan) */
	--nuit-2: #272f3a;
	--nuit-3: #353c47;
	--vif: #22d3ee;               /* couleur d'accent */
	--vif-fonce: #1a9eb3;
	--bleu: #6c8cff;
	--bleu-vif: #829dff;
	--orange: #f59e0b;
	--encre: #1c2430;             /* titres */
	--texte: #2c3a47;
	--texte-doux: #6b757e;
	--bord: #e2e5e8;
	--fond: #f2f4f6;
	--sur-nuit: #c6d3de;          /* texte courant sur fond sombre */
	--sur-nuit-doux: #8b96a1;     /* texte secondaire sur fond sombre */
	--sur-nuit-nav: #b5c2cd;      /* liens du menu sur fond sombre */
	--voile: color-mix(in srgb, var(--nuit) 70%, transparent);       /* voile des photos d'en-tête, côté texte */
	--voile-leger: color-mix(in srgb, var(--nuit) 0%, transparent);
	--rayon: 6px;
	--gouttiere: clamp(16px, 4vw, 72px);
	--haut-entete: 74px;          /* hauteur de l'en-tête collé : les barres collantes se calent dessous */
	--police: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--titre: "Segoe UI Black", "Arial Black", system-ui, sans-serif;
}


/* 2. Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font: 16px/1.6 var(--police); color: var(--texte); background: #fff; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .4em; color: var(--encre); line-height: 1.02; }
h1, h2 { font-family: var(--titre); font-weight: 900; text-transform: uppercase; font-style: italic; letter-spacing: -.02em; }
h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); }
h3 { font-size: 1.15rem; font-weight: 800; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--vif); outline-offset: 2px; }

/* icônes (sprite SVG) */
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
/* texte pour les lecteurs d'écran seulement */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* lien d'évitement « aller au contenu » */
.evitement { position: absolute; left: -9999px; z-index: 400; background: #fff; padding: 8px 14px; }
.evitement:focus { left: 8px; top: 8px; }


/* 3. Mise en page commune ------------------------------------------------------ */
.conteneur { padding: 0 var(--gouttiere); }
.section { padding: clamp(56px, 8vw, 120px) 0; }
.section--nuit { background: var(--nuit); color: var(--sur-nuit); }
.section--nuit h2, .section--nuit h3 { color: #fff; }
.section--grise { background: var(--fond); }
.surligne { background: linear-gradient(transparent 62%, var(--vif) 62%, var(--vif) 92%, transparent 92%); padding: 0 .08em; }
.section--nuit .surligne, .heros-b .surligne, .tete-b .surligne { background: none; color: var(--vif); }
.etiquette { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); margin-bottom: 14px; }
.etiquette::before { content: ""; width: 28px; height: 3px; background: currentColor; }
.section--nuit .etiquette { color: var(--vif); }
/* titre de section et son lien « tout voir » */
.tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.tete h2 { margin: 0; }
.tete p { max-width: 520px; margin: 10px 0 0; color: var(--texte-doux); }
/* bloc vide ou message centré (aucun résultat, page introuvable…) */
.vide-b { padding: 40px; border-radius: var(--rayon); background: var(--fond); text-align: center; }
.vide-b p { margin: 0 0 18px; }
.vide-b__envies { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--trait, #e2e2e2); }
.vide-b__envies h3 { margin: 0 0 14px; font-size: 1.1rem; }
.vide-b__envies ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vide-b__envies a { display: block; padding: 10px 16px; border: 1px solid var(--trait, #e2e2e2); border-radius: var(--rayon); background: #fff; color: inherit; text-decoration: none; }
.vide-b__envies a:hover { border-color: currentColor; }
.vide-b__envies strong, .vide-b__envies small { display: block; }
/* deux colonnes (texte + questions fréquentes…) */
.duo-b { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); }
@media (max-width: 1000px) {
	.duo-b { grid-template-columns: 1fr; }
}
/* résumé factuel en une phrase (résultats, fiche) */
.resume-b { margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--vif); background: var(--fond); border-radius: 0 var(--rayon) var(--rayon) 0; font-weight: 600; color: var(--encre); }


/* 4. Boutons, liens, petites pièces -------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--rayon); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .88rem; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn--vif { background: var(--vif); color: var(--nuit); }
.btn--vif:hover { background: color-mix(in srgb, var(--vif) 78%, #fff); }   /* survol : accent éclairci */
.btn--nuit { background: var(--nuit); color: #fff; }
.btn--contour { border-color: currentColor; background: transparent; }
.btn--blanc { background: #fff; color: var(--nuit); }
.btn--petit { padding: 9px 16px; font-size: .78rem; }
.btn--large { width: 100%; }
.btn--clair { color: #fff; }   /* bouton contour sur fond sombre */
@media (max-width: 600px) {
	.btn { white-space: normal; text-align: center; }
}

/* lien « tout voir » avec une flèche qui avance au survol */
.fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; text-decoration: none; }
.fleche .ico { transition: transform .2s; }
.fleche:hover .ico { transform: translateX(4px); }
.fleche--vif { color: var(--vif); }   /* sur fond sombre */

/* étiquettes (disciplines, âges…) */
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 3px; background: var(--fond); color: var(--texte); display: inline-flex; gap: 4px; align-items: center; }
.puce .ico { width: 13px; height: 13px; }
.puce--vif { background: var(--vif); color: var(--nuit); }
.puce--nuit { background: var(--nuit); color: #fff; }
.puce--plus { background: #fff; color: var(--nuit); text-decoration: none; }
.puce--plus:hover { background: var(--vif); }
.puce--adapte { background: var(--vif); color: var(--nuit); font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }   /* club adapté au profil choisi */
.puce--adapte .ico { width: 14px; height: 14px; }

/* cœur des favoris (cartes, liste, bulles de la carte) */
.coeur { position: absolute; z-index: 2; left: 12px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--nuit) 55%, transparent); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.coeur[aria-pressed="true"] { color: var(--orange); }
.coeur[aria-pressed="true"] .ico { fill: currentColor; }

/* pastille « Vu » / « Contacté » (cookie du site actuel) sur la photo d'un club */
.badge-contacte { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: #2e9d4f; color: #fff; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 2px 8px color-mix(in srgb, var(--nuit) 35%, transparent); }
.badge-contacte .ico { width: 14px; height: 14px; }
.badge-contacte--vu { background: color-mix(in srgb, var(--nuit) 82%, transparent); }
.badge-contacte--ligne { position: static; flex: none; box-shadow: none; }   /* liste : à droite du nom */
.badge-contacte--haut { left: auto; bottom: auto; top: 12px; right: 12px; }   /* grille : en haut à droite */

/* jauge de complétude d'une fiche */
.jauge { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--bord); font-size: .78rem; color: var(--texte-doux); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.jauge i { display: block; height: 6px; border-radius: 3px; background: var(--fond); overflow: hidden; }
.jauge i::before { content: ""; display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, var(--bleu), var(--vif)); }
.jauge b { color: var(--encre); }

/* case à cocher avec son texte */
.case-b { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.case-b input { width: 18px; height: 18px; accent-color: var(--nuit); }

/* questions fréquentes (dépliables) */
.faq-b { display: grid; gap: 0; border-top: 2px solid var(--nuit); }
.faq-b details { border-bottom: 2px solid var(--nuit); }
.faq-b summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 0; font-weight: 800; font-size: 1.15rem; color: var(--encre); position: relative; }
.faq-b summary::-webkit-details-marker { display: none; }
.faq-b summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; background: var(--vif); color: var(--nuit); font-weight: 900; border-radius: 50%; font-size: 1.4rem; }
.faq-b details[open] summary::after { content: "−"; background: var(--nuit); color: var(--vif); }
.faq-b details > div { padding: 0 0 22px; max-width: 760px; }
.faq-b ul { padding-left: 1.2em; }

/* fenêtres (signaler une erreur, je gère ce club, partager) */
.dialogue-b { width: min(92vw, 480px); max-height: 90vh; padding: 26px 24px 22px; border: 0; border-radius: calc(var(--rayon) + 4px); box-shadow: 0 24px 60px color-mix(in srgb, var(--nuit) 45%, transparent); color: var(--texte); }
.dialogue-b::backdrop { background: color-mix(in srgb, var(--nuit) 60%, transparent); }
.dialogue-b h2 { display: flex; align-items: center; gap: 10px; margin: 0 40px 16px 0; font-size: 1.4rem; }
.dialogue-b h2 .ico { color: var(--bleu); }
.dialogue-b__fermer { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fond); color: var(--encre); cursor: pointer; }
.dialogue-b__fermer:hover { background: var(--bord); }
.volet-b__corps { display: grid; gap: 10px; padding: 0 20px 20px; }
.dialogue-b .volet-b__corps { padding: 0; }
.volet-b__corps p { margin: 0; font-size: .92rem; }
.volet-b__corps .volet-b__petit { font-size: .85rem; color: var(--texte-doux); }
.volet-b__texte { display: grid; gap: 6px; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre); }
.volet-b__texte textarea { font: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); }

/* formulaires (contact, compte, infos) */
.formulaire-b { display: grid; gap: 16px; background: var(--fond); padding: clamp(20px, 3vw, 36px); border-radius: var(--rayon); }
.formulaire-b label { display: grid; gap: 6px; font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; color: var(--encre); }
.formulaire-b input, .formulaire-b select, .formulaire-b textarea { border: 2px solid transparent; background: #fff; border-radius: var(--rayon); padding: 13px 14px; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1rem; width: 100%; }
.formulaire-b input:focus, .formulaire-b select:focus, .formulaire-b textarea:focus { outline: 0; border-color: var(--nuit); }
.formulaire-b .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire-b .note { font-size: .85rem; color: var(--texte-doux); display: flex; gap: 8px; }
.formulaire-b .note .ico { color: var(--vif-fonce); }
.formulaire-b .g-recaptcha { margin: 4px 0 6px; }
.formulaire-b__erreur { margin: -6px 0 4px; padding: 10px 12px; border-radius: var(--rayon); background: #fdecec; color: #9b1c1c; font-size: .88rem; font-weight: 600; }
.formulaire-b__erreur a { color: inherit; }
.formulaire-b label > .formulaire-b__erreur { display: block; margin: 6px 0 0; text-transform: none; letter-spacing: 0; }
.formulaire-b__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* champ piège anti-robots */
@media (max-width: 1000px) {
	.formulaire-b .deux { grid-template-columns: 1fr; }
}


/* 5. En-tête ----------------------------------------------------------------- */

.entete { position: sticky; top: 0; z-index: 60; background: var(--nuit); color: #fff; }
.entete__ligne { display: flex; align-items: center; gap: 28px; height: 74px; }
.logo { flex: none; display: block; }
.logo img { height: 42px; width: auto; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .06em; padding: 10px 14px; color: var(--sur-nuit-nav); position: relative; }
.nav a:hover, .nav a[aria-current] { color: #fff; }
.nav a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--vif); transform: skewX(-20deg); }
/* petite recherche activité + ville */
.recherche-b { flex: 1; max-width: 520px; display: flex; background: var(--nuit-2); border-radius: var(--rayon); border: 1px solid var(--nuit-3); }
.recherche-b label { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--sur-nuit-doux); min-width: 0; }
.recherche-b label + label { border-left: 1px solid var(--nuit-3); }
.recherche-b input { border: 0; outline: 0; background: transparent; color: #fff; width: 100%; padding: 11px 0; }
.recherche-b button { border: 0; background: var(--vif); color: var(--nuit); padding: 0 16px; border-radius: 0 var(--rayon) var(--rayon) 0; cursor: pointer; }
.entete__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.entete__actions > a:not(.btn) { color: var(--sur-nuit-nav); text-decoration: none; font-weight: 700; font-size: .9rem; display: inline-flex; gap: 6px; align-items: center; }
.entete__actions > a:not(.btn):hover { color: #fff; }
.burger { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.burger .ico { width: 28px; height: 28px; }
.tiroir { display: none; }
/* Menu à quatre entrées (Clubs, Coachs, Lieux, Blog) : toujours sur une ligne, plus serré quand la place manque ; « Espace pro » n'y garde que son icône */
.nav a { white-space: nowrap; }
@media (max-width: 1320px) {
	.entete__ligne { gap: 14px; }
	.nav { gap: 0; }
	.nav a { padding-left: 8px; padding-right: 8px; font-size: .76rem; letter-spacing: .03em; }
	.nav a[aria-current]::after { left: 8px; right: 8px; }
	.entete__actions { gap: 10px; }
	.entete__espace-pro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* menu du profil de la famille (espace pratiquant) */
.profil-menu { position: relative; }
.profil-menu summary { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--nuit-2); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; list-style: none; }
.profil-menu summary::-webkit-details-marker { display: none; }
.profil-menu summary .ico { width: 14px; height: 14px; }
.profil-menu[open] summary { background: var(--nuit-3); }
.profil-menu__initiale { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vif); color: var(--nuit); font-weight: 900; }
.profil-menu__initiale .ico { width: 15px; height: 15px; }
.profil-menu__liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 600; width: 260px; padding: 8px; border-radius: var(--rayon); background: #fff; box-shadow: 0 16px 40px color-mix(in srgb, var(--nuit) 30%, transparent); }
.profil-menu__liste form { display: grid; gap: 2px; margin: 0; }
.profil-menu__liste button { display: grid; gap: 1px; padding: 9px 12px; border: 0; border-radius: calc(var(--rayon) - 2px); background: none; text-align: left; font: inherit; color: var(--texte); cursor: pointer; }
.profil-menu__liste button b { color: var(--encre); font-size: .92rem; }
.profil-menu__liste button small { color: var(--texte-doux); font-size: .78rem; }
.profil-menu__liste button:hover { background: var(--fond); }
.profil-menu__liste button[aria-current="true"] { background: color-mix(in srgb, var(--vif) 16%, #fff); }
.profil-menu__liste > a { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--bord); color: var(--bleu); font-weight: 700; font-size: .85rem; text-decoration: none; }

/* cœur des favoris et son panneau */
.favoris-menu { position: relative; }
.favoris-menu summary { list-style: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--sur-nuit-nav); cursor: pointer; }
.favoris-menu summary::-webkit-details-marker { display: none; }
.favoris-menu summary:hover, .favoris-menu[open] summary { color: #fff; background: var(--nuit-2); }
.favoris-menu summary .ico { width: 22px; height: 22px; }
.favoris-menu__nombre { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--vif); color: var(--nuit); font-size: .7rem; font-weight: 900; line-height: 18px; text-align: center; }
.favoris-menu__panneau { position: absolute; right: 0; top: calc(100% + 8px); z-index: 600; width: min(310px, calc(100vw - 32px)); padding: 16px; border-radius: var(--rayon); background: #fff; color: var(--texte); box-shadow: 0 16px 40px color-mix(in srgb, var(--nuit) 30%, transparent); }
.favoris-menu__panneau b { display: block; margin-bottom: 8px; color: var(--encre); }
.favoris-menu__panneau p { margin: 0 0 14px; font-size: .92rem; }
.favoris-menu__panneau ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.favoris-menu__panneau li a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 4px; color: var(--encre); text-decoration: none; font-weight: 600; font-size: .92rem; }
.favoris-menu__panneau li a:hover { background: var(--fond); }
.favoris-menu__panneau li .ico { width: 14px; height: 14px; color: #e0245e; fill: #e0245e; }
.favoris-menu__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.favoris-menu__actions a:not(.btn) { color: var(--bleu); font-weight: 700; font-size: .85rem; }

/* Mobile et tablette : en-tête en grille.
   Ligne 1 : logo et burger (elle remonte au défilement) ; ligne 2 : la recherche, seule partie qui reste fixée en haut.
   Une fois la barre collée (classe .entete--colle posée par front.js), le burger passe à gauche de la recherche. */
@media (max-width: 1080px) {
	.nav, .entete__actions > a, .entete__actions > a:not(.btn), .entete__actions .profil-menu { display: none; }
	.entete__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo inscrire burger"; align-items: center; column-gap: 12px; row-gap: 10px; height: auto; padding-top: 10px; padding-bottom: 10px; }
	.entete__actions { display: contents; }
	.favoris-menu { grid-area: inscrire; justify-self: end; }   /* à gauche du burger */
	.entete--colle:has(.recherche-b) .favoris-menu { display: none; }   /* sa ligne est remontée hors de l'écran */
	.entete .logo { grid-area: logo; }
	.entete .logo img { height: 40px; }
	.entete .burger { display: block; grid-area: burger; padding: 6px; margin-right: -6px; }
	.entete:has(.recherche-b) { top: -54px; }
	.entete:has(.recherche-b) .entete__ligne { grid-template-areas: "logo inscrire burger" "recherche recherche recherche"; grid-template-rows: 44px auto; }
	.entete--colle:has(.recherche-b) .entete__ligne { grid-template-areas: "logo logo logo" "burger recherche recherche"; }
	.entete--colle .burger { margin-left: -6px; margin-right: 0; }
	body:has(.entete .recherche-b) { --haut-entete: 68px; }
	.entete__ligne > .recherche-b { grid-area: recherche; max-width: none; }
	.recherche-b label { padding: 0 12px; }
	.recherche-b input { padding: 12px 0; min-height: 44px; font-size: 16px; }
	.recherche-b button { min-width: 48px; display: grid; place-items: center; }
	/* tiroir du menu */
	.tiroir[data-ouvert] { display: block; padding: 8px var(--gouttiere) 24px; border-top: 1px solid var(--nuit-3); }
	.tiroir a { display: block; padding: 14px 0; color: #fff; text-decoration: none; font-weight: 800; text-transform: uppercase; border-bottom: 1px solid var(--nuit-3); }
	.tiroir .btn { margin-top: 18px; width: 100%; border: 0; }
}
@media (max-width: 420px) {
	.recherche-b label { gap: 6px; padding: 0 10px; }
	.recherche-b label .ico { width: 16px; height: 16px; }
}


/* 6. Suggestions de recherche (activité, ville) --------------------------------- */
.suggestions { position: absolute; z-index: 400; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--bord), 0 18px 40px color-mix(in srgb, var(--nuit) 22%, transparent); max-height: 340px; overflow-y: auto; min-width: 240px; text-align: left; }
.suggestions li { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 4px; cursor: pointer; color: var(--encre); }
.suggestions li b { font-weight: 700; }
.suggestions li small { font-size: .74rem; color: var(--texte-doux); text-transform: none; letter-spacing: 0; font-weight: 600; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: color-mix(in srgb, var(--bleu) 10%, var(--fond)); }
.suggestions li.suggestions__vide { cursor: default; color: var(--texte-doux); font-style: italic; }
.suggestions li.suggestions__vide:hover { background: none; }
/* intitulé du groupe des clubs (01/11/2026) : pas une suggestion */
.suggestions li.suggestions__titre { cursor: default; padding: 10px 12px 4px; margin-top: 4px; border-top: 1px solid var(--bord); border-radius: 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.suggestions li.suggestions__titre:hover { background: none; }
/* lieu sans club pour l'activité choisie (01/11/2026) : proposé quand même, en retrait */
.suggestions li.suggestions__sans-club b { color: var(--texte-doux); font-weight: 600; }


/* 7. Accueil ----------------------------------------------------------------- */
/* héros : grande photo, voile à gauche derrière le texte */
.heros-b { position: relative; overflow: hidden; isolation: isolate; background: var(--nuit); color: #fff; }
.heros-b:focus-within { overflow: visible; z-index: 5; }   /* pendant la saisie : les suggestions passent par-dessus le bandeau suivant */
.heros-b:focus-within .heros-b__photo { clip-path: inset(0); }
.heros-b__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.heros-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--voile) 0%, color-mix(in srgb, var(--nuit) 35%, transparent) 45%, var(--voile-leger) 75%); }
.heros-b__grille { display: grid; grid-template-columns: minmax(0, 760px); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(72vh, 680px); padding-top: 40px; padding-bottom: 40px; }
.heros-b h1 { color: #fff; margin-bottom: 20px; font-size: clamp(2.2rem, 5.4vw, 4.8rem); max-width: 15ch; } /* titre long (« Annuaire des clubs… », 28/10/2026) : plus petit que les autres h1 */
.heros-b__intro { font-size: 1.15rem; max-width: 560px; margin-bottom: 32px; color: #fff; }
.heros-b h1, .heros-b__intro, .heros-b .etiquette { text-shadow: 0 1px 12px color-mix(in srgb, var(--nuit) 45%, transparent); }
.heros-b .etiquette { color: #fff; }
.badge-rond { position: absolute; z-index: 2; left: -40px; bottom: 40px; width: 150px; height: 150px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 900; line-height: 1.05; transform: skewX(6deg) rotate(-10deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.badge-rond strong { display: block; font-size: 2.2rem; font-style: italic; }
.heros-b .badge-rond { left: auto; right: var(--gouttiere); bottom: 48px; transform: rotate(-10deg); }
@media (max-width: 1000px) {
	.heros-b__grille { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
	.badge-rond { display: none; }
}

/* grand moteur de recherche */
.moteur-b { display: grid; grid-template-columns: 1fr 1fr auto; background: #fff; border-radius: var(--rayon); padding: 6px; gap: 6px; max-width: 720px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--vif) 18%, transparent); }
.moteur-b label { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--texte-doux); }
.moteur-b label + label { border-left: 1px solid var(--bord); }
.moteur-b label .ico { color: var(--bleu); width: 22px; height: 22px; }
.moteur-b small { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--encre); }
.moteur-b input { border: 0; outline: 0; width: 100%; font-size: 1.05rem; color: var(--encre); padding: 0; background: transparent; }
.moteur-b .btn { border-radius: 4px; }
@media (max-width: 760px) {
	.moteur-b { grid-template-columns: 1fr; }   /* champs l'un sous l'autre */
	.moteur-b label + label { border-left: 0; border-top: 1px solid var(--bord); }
}
/* disciplines populaires sous le moteur */
.populaires { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; font-size: .9rem; color: #fff; }
.populaires a { color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .18); padding: 5px 12px; border-radius: 99px; font-weight: 600; backdrop-filter: blur(4px); }
.populaires a:hover { background: #fff; border-color: #fff; color: var(--encre); }

/* bandeau défilant */
.defile { background: var(--vif); color: var(--nuit); overflow: hidden; transform: rotate(-1.2deg); margin: -14px -10px 0; position: relative; z-index: 3; border-top: 3px solid var(--nuit); border-bottom: 3px solid var(--nuit); }
.defile__piste { display: flex; gap: 40px; width: max-content; padding: 14px 0; animation: defile 40s linear infinite; }
.defile span { font-family: var(--titre); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.35rem; display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; }
.defile span::after { content: "✦"; font-size: .9rem; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.defile__piste { animation: none; }
}

/* univers (onglets en images) */
.univers-b { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.univers-b a { position: relative; background: var(--nuit-2); height: 340px; overflow: hidden; color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; isolation: isolate; }
.univers-b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.35); transition: transform .5s, filter .3s; }
.univers-b a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--nuit) 92%, transparent)); }
.univers-b a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--vif); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.univers-b a:hover img { transform: scale(1.08); filter: none; }
.univers-b a:hover::after { transform: scaleX(1); }
.univers-b .num { position: absolute; top: 14px; left: 18px; font-family: var(--titre); font-style: italic; font-weight: 900; font-size: 2.6rem; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .7); }
.univers-b strong { font-family: var(--titre); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; }
.univers-b span { font-size: .85rem; color: var(--vif); font-weight: 700; }
@media (max-width: 1080px) {
	.univers-b { grid-template-columns: repeat(3, 1fr); }
	.univers-b a { height: 240px; }
}
@media (max-width: 600px) {
	.univers-b { grid-template-columns: 1fr 1fr; }
	.univers-b a { height: 180px; }
}

/* classement des clubs */
.classement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 4vw, 64px); counter-reset: rang; list-style: none; padding: 0; margin: 0; }
.classement li { counter-increment: rang; border-bottom: 1px solid var(--nuit-3); }
.classement a { display: grid; grid-template-columns: 64px 72px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; text-decoration: none; color: #fff; }
.classement a::before { content: counter(rang, decimal-leading-zero); font-family: var(--titre); font-weight: 900; font-style: italic; font-size: 2.2rem; color: transparent; -webkit-text-stroke: 1.5px var(--vif); line-height: 1; }
.classement img { width: 72px; height: 50px; object-fit: cover; border-radius: 4px; }
.classement strong { font-size: 1.1rem; }
.classement small { color: var(--sur-nuit-doux); }
.classement a .ico { color: var(--vif); opacity: 0; transition: opacity .2s, transform .2s; }
.classement a:hover .ico { opacity: 1; transform: translateX(4px); }
.classement a:hover strong { color: var(--vif); }
@media (max-width: 1080px) {
	.classement { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.classement { grid-template-columns: 1fr; }
}

/* carrousel de cartes (derniers clubs…) */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 24vw, 380px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gouttiere) 24px; margin: 0 calc(-1 * var(--gouttiere)); }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--nuit); background: #fff; cursor: pointer; display: grid; place-items: center; }
.rail-nav button:hover { background: var(--vif); }
.rail-nav button:first-child .ico { transform: rotate(180deg); }

/* chiffres géants */
.geants { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--nuit-3); }
.geants div { padding: 36px 24px 0 0; }
.geants strong { display: block; font-family: var(--titre); font-weight: 900; font-style: italic; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1; color: #fff; }
.geants strong em { color: var(--vif); font-style: inherit; }
.classement + .geants { margin-top: 64px; }
.geants span { text-transform: uppercase; font-weight: 800; letter-spacing: .08em; font-size: .8rem; color: var(--sur-nuit-doux); }
@media (max-width: 760px) {
	.geants { grid-template-columns: 1fr 1fr; }
}

/* appel aux clubs (bande en diagonale) */
.appel-b { position: relative; background: var(--vif); color: var(--nuit); overflow: hidden; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); padding: clamp(80px, 10vw, 140px) 0; }
.appel-b__grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.appel-b h2 { color: var(--nuit); }
.appel-b .etiquette { color: var(--nuit); }
.appel-b__intro { font-size: 1.15rem; max-width: 520px; }
.appel-b .fleche { margin-left: 20px; }
.appel-b ul { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-weight: 700; }
.appel-b li { display: flex; gap: 10px; align-items: center; }
.appel-b__img { position: relative; height: 380px; }
.appel-b__img img { position: absolute; width: 70%; height: 80%; object-fit: cover; border: 6px solid var(--nuit); border-radius: var(--rayon); }
.appel-b__img img:first-child { left: 0; top: 0; transform: rotate(-4deg); }
.appel-b__img img:last-child { right: 0; bottom: 0; transform: rotate(3deg); }
@media (max-width: 1000px) {
	.appel-b__grille { grid-template-columns: 1fr; }
	.appel-b__img { height: 260px; }
	.appel-b ul { grid-template-columns: 1fr; }
}

/* villes (colonnes de liens sur fond sombre) */
.villes-b { columns: 5 180px; column-gap: 32px; list-style: none; padding: 0; margin: 0; }
.villes-b li { padding: 6px 0; border-bottom: 1px solid var(--nuit-3); break-inside: avoid; display: flex; justify-content: space-between; }
.villes-b a { color: #fff; text-decoration: none; font-weight: 700; }
.villes-b a:hover { color: var(--vif); }
.villes-b small { color: var(--sur-nuit-doux); }


/* 8. Cartes de clubs ------------------------------------------------------------ */
.grille-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.carte-b { position: relative; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 1px 0 var(--bord), 0 0 0 1px var(--bord); transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; }
.carte-b:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--nuit), 8px 8px 0 var(--vif); }
.carte-b__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.carte-b__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-b__disc { position: absolute; left: 0; bottom: 0; background: var(--nuit); color: var(--vif); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: .78rem; padding: 6px 12px; letter-spacing: .04em; }
.carte-b__prix { position: absolute; right: 12px; top: 12px; background: var(--vif); color: var(--nuit); font-weight: 900; padding: 6px 10px; border-radius: 4px; font-size: .85rem; line-height: 1.1; text-align: right; }
.carte-b__prix small { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.carte-b__corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte-b h3 { margin: 0; font-size: 1.12rem; }
.carte-b h3 a { text-decoration: none; color: var(--encre); }
.carte-b h3 a::after { content: ""; position: absolute; inset: 0; }   /* toute la carte est cliquable */
.carte-b__lieu { display: flex; gap: 6px; align-items: center; color: var(--texte-doux); font-size: .9rem; }
.carte-b__lieu b { margin-left: auto; color: var(--encre); }
.carte-b__extrait { font-size: .92rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.puces--disc .puce { background: color-mix(in srgb, var(--bleu) 12%, #fff); color: var(--encre); }   /* disciplines du club */
.carte-b__distance { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--vif) 30%, #fff); color: var(--encre); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.carte-b--adapte { box-shadow: 0 0 0 2px var(--vif), 0 10px 26px color-mix(in srgb, var(--vif) 22%, transparent); }

/* fiche : clubs à proximité, 4 par ligne en cartes compactes */
.grille-b--six { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grille-b--six .carte-b__img { aspect-ratio: 16 / 10; }
.grille-b--six .carte-b__corps { padding: 12px 14px 14px; gap: 6px; }
.grille-b--six .carte-b h3 { font-size: 1rem; }
.grille-b--six .carte-b__extrait, .grille-b--six .jauge { display: none; }
@media (max-width: 1080px) {
	.grille-b--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.grille-b--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.grille-b--six { grid-template-columns: minmax(0, 1fr); }
}

/* articles du blog en grille */
.grille-b--articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) {
	.grille-b--articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.grille-b--articles { grid-template-columns: minmax(0, 1fr); }
}


/* 9. Résultats : en-tête et filtres ---------------------------------------------- */
/* en-tête : grande photo, voile à gauche, titre et descriptif sur la moitié gauche au plus sur ordinateur */
.tete-b { position: relative; overflow: hidden; isolation: isolate; background: var(--nuit); color: #fff; }
.tete-b > img { position: absolute; right: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tete-b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--voile) 0%, color-mix(in srgb, var(--nuit) 30%, transparent) 50%, var(--voile-leger) 80%); }
.tete-b .conteneur { display: flex; flex-direction: column; justify-content: center; min-height: min(60vh, 520px); padding-top: 22px; padding-bottom: 36px; }
.tete-b h1 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 4.8rem); margin: 18px 0 14px; }
.tete-b p { max-width: 620px; }
.tete-b h1, .tete-b p { text-shadow: 0 1px 12px color-mix(in srgb, var(--nuit) 45%, transparent); }
.tete-b__resume { font-size: 1.05rem; line-height: 1.6; color: #fff; }
.tete-b__phrase { max-width: 62ch; margin: 0 0 12px; font-size: 1.1rem; line-height: 1.5; font-weight: 600; color: #fff; }
.tete-b--courte .conteneur { min-height: 0; padding-bottom: 40px; }   /* index, blog, infos */
@media (min-width: 1001px) {
	.tete-b .conteneur > :not(.ariane) { max-width: 50%; }
}

/* fil d'Ariane */
.ariane { font-size: .82rem; }
.ariane ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ariane li + li::before { content: "/"; margin-right: 6px; opacity: .4; }
.ariane a { text-decoration: none; opacity: .75; }
.ariane a:hover { opacity: 1; color: var(--vif); }
.tete-b .ariane a { opacity: .9; }

/* villes proches sous le titre */
.villes-heros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; max-width: 760px; }
.villes-heros a { padding: 7px 14px; border-radius: 99px; background: rgba(255, 255, 255, .88); color: var(--encre); text-decoration: none; font-weight: 600; font-size: .9rem; }
.villes-heros a:hover { background: #fff; box-shadow: 0 0 0 2px var(--vif); }

/* boutons de filtre (aussi pour les onglets de l'aperçu des e-mails) */
.filtre-b { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 2px solid var(--bord); border-radius: 99px; background: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; text-decoration: none; color: inherit; }
.filtre-b:hover { border-color: var(--nuit); }
.filtre-b[aria-pressed="true"], .filtre-b[aria-current="page"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.filtre-b[aria-pressed="true"] .ico, .filtre-b[aria-current="page"] .ico { color: var(--vif); }
.filtre-b .ico { width: 15px; height: 15px; }

/* barre de filtres (résultats, blog) : fond bleu vif, collée sous l'en-tête sur ordinateur */
.barre-filtres { position: sticky; top: var(--haut-entete); z-index: 50; background: var(--vif); color: var(--nuit); box-shadow: 0 6px 16px color-mix(in srgb, var(--nuit) 12%, transparent); }
.barre-filtres .conteneur { display: flex; gap: 12px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.barre-filtres .filtre-b { background: color-mix(in srgb, #fff 82%, var(--vif)); border-color: transparent; color: var(--nuit); }
.barre-filtres .filtre-b:hover { border-color: var(--nuit); }
.barre-filtres .filtre-b[aria-pressed="true"], .barre-filtres .filtre-b[aria-current="page"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.barre-filtres .filtre-b b { opacity: .65; }   /* nombre de clubs ou d'articles */
.barre-filtres .separe { width: 1px; height: 28px; flex: none; background: color-mix(in srgb, var(--nuit) 25%, transparent); }
.barre-filtres select { flex: none; margin-left: auto; border: 2px solid transparent; border-radius: 99px; padding: 8px 14px; font-weight: 700; background: #fff; color: var(--nuit); }
@media (max-width: 1080px) {
	.barre-filtres { position: static; }   /* mobile et tablette : la barre défile avec la page */
}
/* rayon autour de la ville */
.rayon-b { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }
.rayon-b select { font: inherit; padding: 8px 10px; border-radius: var(--rayon); border: 1px solid var(--bord); background: #fff; }
.barre-filtres .rayon-b select { border-color: transparent; color: var(--nuit); }
/* recherche tout à gauche des filtres (hors de la zone qui défile, pour ne pas couper les suggestions) */
.filtre-recherche { flex: none; position: relative; }
.filtre-recherche label { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 999px; background: #fff; }
.filtre-recherche label:focus-within { border-color: var(--vif); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vif) 25%, transparent); }
.filtre-recherche .ico { color: var(--texte-doux); flex: none; }
.filtre-recherche input { width: 190px; border: 0; padding: 0; margin: 0; background: none; font: inherit; font-size: .9rem; outline: none; }
.filtre-recherche .suggestions { position: absolute; left: 0; top: calc(100% + 6px); z-index: 700; min-width: 280px; }
.barre-filtres .filtre-recherche label { border-color: transparent; }
.barre-filtres .filtre-recherche label:focus-within { border-color: var(--nuit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nuit) 20%, transparent); }
/* suggestions des filtres : zone qui défile, fondu sur le bord tronqué, flèches sur ordinateur */
.defile-b { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.barre-filtres__defile { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; overflow-x: auto; }
.defile-b .barre-filtres__defile { scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 2px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
.defile-b .barre-filtres__defile > * { flex: none; scroll-snap-align: start; }
.defile-b.defile-debut .barre-filtres__defile { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); }
.defile-b.defile-fin .barre-filtres__defile { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 100%); }
.defile-b.defile-debut.defile-fin .barre-filtres__defile { -webkit-mask-image: none; mask-image: none; }
.defile-b__fleche { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border: 1px solid var(--bord); border-radius: 50%; background: #fff; color: var(--encre); cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--nuit) 18%, transparent); }
.defile-b__fleche:hover { border-color: var(--vif); }
.defile-b__fleche--prec { left: -4px; }
.defile-b__fleche--prec .ico { transform: rotate(180deg); }
.defile-b__fleche--suiv { right: -4px; }
.barre-filtres .defile-b__fleche { border-color: transparent; }
@media (hover: none), (max-width: 600px) {
	.defile-b__fleche { display: none; }   /* écran tactile : on fait glisser du doigt */
}
@media (max-width: 600px) {
	/* rayon et recherche sur la première ligne, suggestions dessous */
	.barre-filtres .conteneur { flex-wrap: wrap; row-gap: 10px; }
	.filtre-recherche input { width: 130px; }
	.rayon-b ~ .filtre-recherche { flex: 1; min-width: 0; }
	.rayon-b ~ .filtre-recherche input { width: 100%; min-width: 0; }
	.rayon-b ~ .filtre-recherche .suggestions { left: auto; right: 0; }
	.defile-b { flex-basis: 100%; }
}

/* titre de la liste et nombre de clubs affichés sur la carte */
.res-entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 0 20px; }
.res-entete strong { font-family: var(--titre); font-style: italic; text-transform: uppercase; font-size: 1.4rem; color: var(--encre); }
.res-titre { display: flex; flex-direction: column; gap: 2px; }
.res-titre small { font-size: .85rem; font-weight: 700; color: var(--texte-doux); }
.plus-res { display: flex; justify-content: center; margin-top: 40px; }
.resultats-vide { padding-top: 48px; }
.pub-france { margin-top: 32px; }

/* liens vers les villes et disciplines proches */
.proches-b { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.liens-b { display: flex; flex-wrap: wrap; gap: 8px; }
.liens-b a { padding: 8px 14px; border: 2px solid var(--nuit-3); border-radius: 4px; text-decoration: none; color: #fff; font-weight: 700; font-size: .9rem; }
.liens-b a:hover { border-color: var(--vif); color: var(--vif); }
.liens-b span { color: var(--vif); }   /* nombre de clubs */
.proches-b h2 { font-size: 2rem; }
.proches-b .fleche { margin-top: 18px; }
.proches-b__suite { margin-top: 36px; }   /* « Autres activités » sous « Activités proches » */
.section--liens { margin-top: 80px; }   /* villes, départements, activités sous la liste */
@media (max-width: 760px) {
	.proches-b { grid-template-columns: 1fr; }
}

/* toutes les disciplines du lieu ou de l'univers qui ont des clubs */
#toutes-disciplines { scroll-margin-top: 130px; }
.disciplines-b { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.disciplines-b a { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--bord); color: var(--encre); text-decoration: none; background: #fff; transition: box-shadow .15s, transform .15s; }
.disciplines-b a:hover { box-shadow: 0 0 0 2px var(--nuit); transform: translateY(-2px); }
.disciplines-b img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; }
.disciplines-b span { display: flex; flex-direction: column; min-width: 0; }
.disciplines-b strong { font-weight: 800; line-height: 1.2; }
.disciplines-b small { color: var(--texte-doux); font-weight: 600; }
.disciplines-b a[aria-current] { box-shadow: 0 0 0 2px var(--vif); }
/* disciplines rangées par univers, en onglets (ville seule, département seul, index du blog) */
.onglets-b__liste { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 16px; }
.onglets-b__onglet { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 2px solid var(--bord); border-radius: 99px; background: #fff; color: var(--encre); font-weight: 800; cursor: pointer; transition: border-color .15s; }
.onglets-b__onglet:hover { border-color: var(--nuit); }
.onglets-b__onglet img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.onglets-b__onglet small { color: var(--texte-doux); font-weight: 700; }
.onglets-b__onglet[aria-selected="true"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.onglets-b__onglet[aria-selected="true"] small { color: var(--vif); }
.onglets-b__tout { margin-top: 20px; }

/* pagination */
.pagination-b { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 36px 0 0; padding: 0; list-style: none; }
.pagination-b a, .pagination-b span { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--rayon); font-weight: 800; text-decoration: none; color: var(--nuit); box-shadow: 0 0 0 1px var(--bord); background: #fff; }
.pagination-b a:hover { box-shadow: 0 0 0 2px var(--nuit); }
.pagination-b [aria-current] { background: var(--nuit); color: #fff; box-shadow: none; }
.pagination-b .ecart { box-shadow: none; background: none; min-width: 20px; }


/* 10. Résultats : liste et carte --------------------------------------------------
   Liste à gauche, carte fixe à droite pendant le défilement ;
   jusqu'à 1000 px, la carte s'ouvre en plein écran avec le bouton « Voir la carte ». */
.partage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.partage__liste { padding: 0 clamp(20px, 3vw, 48px) 64px var(--gouttiere); }
.partage__carte { position: sticky; top: 138px; height: calc(100vh - 138px); }   /* sous l'en-tête et la barre de filtres collée */
.partage__carte .carte-geo-b { height: 100%; min-height: 0; border-radius: 0; }
.carte-geo-b { position: relative; height: 70vh; min-height: 460px; border-radius: var(--rayon); overflow: hidden; background: color-mix(in srgb, var(--bleu) 10%, var(--fond)); }
.carte-partage__legende { position: absolute; left: 16px; bottom: 16px; background: rgba(255, 255, 255, .92); color: var(--texte); font-size: .8rem; padding: 6px 10px; border-radius: var(--rayon); }
.carte-partage__fermer, .voir-carte { display: none; }
.carte-partage__retour { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); text-decoration: none; }
@media (max-width: 1080px) {
	.partage__carte { top: var(--haut-entete); height: calc(100vh - var(--haut-entete)); }   /* la barre de filtres n'est plus collée */
}
@media (min-width: 1001px) {
	.partage__carte { display: flex; flex-direction: column; }   /* la carte, puis la publicité dessous */
	.partage__carte .carte-geo-b { flex: 1; height: auto; }
}
@media (max-width: 1000px) {
	.partage { grid-template-columns: minmax(0, 1fr); }
	.partage__liste { padding: 0 var(--gouttiere) 48px; }
	.partage__carte { display: none; position: fixed; inset: 0; height: 100%; z-index: 350; }
	.partage__carte[data-ouvert] { display: block; }
	.carte-partage__fermer { display: inline-flex; position: absolute; top: 16px; right: 16px; z-index: 6; }
	.carte-partage__retour { top: 64px; }   /* sous « Fermer la carte » */
	.voir-carte { display: inline-flex; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
}

/* un club dans la liste */
.liste-clubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
[data-liste][aria-busy="true"] { opacity: .45; transition: opacity .2s; }   /* liste rechargée après un déplacement de la carte */
.liste-vide { padding: 28px; border-radius: var(--rayon); background: var(--fond); text-align: center; list-style: none; }
.club-ligne { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px var(--bord); transition: box-shadow .2s, transform .2s; }
.club-ligne:hover, .club-ligne.allume { box-shadow: 0 0 0 2px var(--nuit), 6px 6px 0 var(--vif); transform: translateY(-2px); }
.club-ligne--adapte { box-shadow: 0 0 0 2px var(--vif), 0 10px 26px color-mix(in srgb, var(--vif) 22%, transparent); }
.club-ligne__img { position: relative; min-height: 180px; }
.club-ligne__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.club-ligne__num { position: absolute; left: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--nuit); color: #fff; display: grid; place-items: center; font-weight: 900; font-style: italic; border: 2px solid #fff; }
.club-ligne.allume .club-ligne__num { background: var(--vif); color: var(--nuit); }
.club-ligne__corps { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.club-ligne__tete { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.club-ligne h3 { margin: 0; font-size: 1.15rem; }
.club-ligne h3 a { color: var(--encre); text-decoration: none; }
.club-ligne h3 a::after { content: ""; position: absolute; inset: 0; }   /* toute la ligne est cliquable */
@media (max-width: 600px) {
	.club-ligne { grid-template-columns: minmax(0, 1fr); }
	.club-ligne__img { min-height: 0; aspect-ratio: 16 / 9; }
}
/* choix du profil de la famille au-dessus de la liste */
.profil-choix--liste { margin: 8px 0 0; }
.profil-choix--liste label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; font-weight: 700; color: var(--texte-doux); }
.profil-choix--liste .ico { color: var(--bleu-vif); }
.profil-choix--liste select { width: auto; margin: 0; padding: 6px 30px 6px 10px; border-radius: 999px; font-weight: 700; color: var(--encre); }
.res-entete .profil-choix--liste { flex-basis: 100%; order: 3; }
.tiroir__profil .profil-choix--liste label { color: inherit; }


/* 11. Carte (Leaflet) et bulles des clubs --------------------------------------- */
.carte-reelle { position: absolute; inset: 0; z-index: 0; background: #e4edf3; }
.carte-geo-b .carte-reelle ~ .carte-partage__legende, .carte-geo-b .carte-reelle ~ .carte-partage__fermer, .carte-geo-b .carte-reelle ~ .carte-partage__retour { z-index: 500; }
.leaflet-container { font: inherit; }
/* repère d'un club */
.leaflet-div-icon.repere-l { background: none; border: 0; }
.repere-l span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--nuit); color: #fff; font-weight: 800; font-size: .8rem; box-shadow: 0 2px 6px color-mix(in srgb, var(--nuit) 35%, transparent); border: 2px solid #fff; transition: background .15s, transform .15s; }
.repere-l span b { transform: rotate(45deg); }
.repere-l.allume span, .repere-l:hover span { background: var(--vif); color: var(--nuit); transform: rotate(-45deg) scale(1.18); }
/* pastille de regroupement (beaucoup de clubs dans la zone) */
.leaflet-div-icon.groupe-l { background: none; border: 0; }
.groupe-l span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: color-mix(in srgb, var(--bleu) 88%, transparent); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 0 0 5px color-mix(in srgb, var(--bleu) 25%, transparent), 0 2px 8px color-mix(in srgb, var(--nuit) 30%, transparent); cursor: pointer; transition: transform .15s; }
.groupe-l:hover span { transform: scale(1.08); background: var(--nuit); }
.leaflet-popup-content { margin: 10px 14px; font-size: .9rem; }
.leaflet-popup-content a { color: var(--nuit); font-weight: 800; }
/* bulle d'un repère : carte de présentation du club (Leaflet fixe la largeur en ligne, d'où !important) */
.leaflet-popup.bulle-b .leaflet-popup-content-wrapper { padding: 0; border-radius: calc(var(--rayon) + 4px); overflow: hidden; box-shadow: 0 14px 36px color-mix(in srgb, var(--nuit) 35%, transparent); }
.leaflet-popup.bulle-b .leaflet-popup-content { margin: 0; width: 270px !important; font-size: .9rem; line-height: 1.4; }
.leaflet-popup.bulle-b a.leaflet-popup-close-button { z-index: 3; width: 28px; height: 28px; margin: 6px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--nuit); font-size: 18px; line-height: 26px; text-align: center; }
.bulle-club { position: relative; }
.bulle-club > .coeur { left: 8px; top: 8px; width: 34px; height: 34px; }
.bulle-club__img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--fond); }
.bulle-club__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bulle-club__img .badge-contacte { left: 8px; bottom: 8px; }
.bulle-club__prix { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 99px; background: var(--vif); color: var(--nuit); font-weight: 900; font-size: .85rem; }
.bulle-club__prix small { font-weight: 700; font-size: .7rem; }
.bulle-club__corps { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.bulle-club__disc { align-self: flex-start; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--bleu); }
.leaflet-container a.bulle-club__nom { color: var(--encre); font-family: var(--titre); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 1.02rem; line-height: 1.15; text-decoration: none; }
.leaflet-container a.bulle-club__nom:hover { color: var(--bleu); }
.bulle-club__lieu { display: flex; align-items: center; gap: 5px; color: var(--texte-doux); font-size: .82rem; }
.bulle-club__puces { display: flex; flex-wrap: wrap; gap: 4px; }
.bulle-club__puces i { font-style: normal; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 3px; background: var(--fond); color: var(--texte); }
.leaflet-container a.bulle-club__btn { margin-top: 4px; color: var(--nuit); justify-content: center; }


/* 12. Fiche club ------------------------------------------------------------------ */
/* en-tête : texte à gauche (logo + nom), photos du club en mosaïque à droite */
.fiche-heros { position: relative; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: var(--nuit); color: #fff; }
.fiche-heros > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fiche-heros::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--voile) 0%, color-mix(in srgb, var(--nuit) 25%, transparent) 55%, var(--voile-leger) 80%), linear-gradient(0deg, color-mix(in srgb, var(--nuit) 35%, transparent), transparent 35%); }
.fiche-heros__grille { width: 100%; min-height: min(60vh, 520px); padding-top: 22px; padding-bottom: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.fiche-heros:has(.heros-photos) .fiche-heros__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.fiche-heros__texte { min-width: 0; }
.fiche-heros__titre { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); margin: 14px 0; }
.fiche-heros h1 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 4.8rem); max-width: 16ch; margin: 0; }
.fiche-heros h1, .fiche-heros__meta { text-shadow: 0 1px 12px color-mix(in srgb, var(--nuit) 45%, transparent); }
.fiche-logo { width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px); flex: none; object-fit: contain; padding: 8px; border-radius: var(--rayon); background: #fff; box-shadow: 0 6px 22px color-mix(in srgb, var(--nuit) 35%, transparent); }
.fiche-heros__bas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }   /* infos puis, dessous, favori et partage */
.fiche-heros__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; font-weight: 600; }
.fiche-heros__meta span { display: inline-flex; gap: 8px; align-items: center; }
.fiche-heros__meta .ico { color: var(--vif); }
.fiche-heros__complet { padding: 3px 12px; border-radius: 99px; background: color-mix(in srgb, var(--vif) 85%, transparent); color: var(--nuit); text-shadow: none; }   /* complétude de la fiche */
.fiche-heros__complet .ico { color: var(--nuit); }
.fiche-heros__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fiche-heros__puces { margin-top: 20px; }
.favori-b[aria-pressed="true"] { background: #fff; color: var(--nuit); border-color: #fff; }
.favori-b[aria-pressed="true"] .ico { fill: #e0245e; stroke: #e0245e; }
@media (max-width: 1000px) {
	.fiche-heros:has(.heros-photos) .fiche-heros__grille { grid-template-columns: minmax(0, 1fr); }   /* photos sous le texte */
	/* en-têtes à photo (accueil, résultats, fiche) : voile sur toute la largeur */
	.heros-b::before, .tete-b::before, .fiche-heros::before { background: linear-gradient(to right, var(--voile), color-mix(in srgb, var(--nuit) 45%, transparent)); }
}

/* photos du club : mosaïque dans un panneau blanc semi-transparent ; sur mobile, bande qui défile */
.heros-photos { display: grid; gap: 8px; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(260px, 32vw, 400px); padding: 10px; border-radius: calc(var(--rayon) + 6px); background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px color-mix(in srgb, var(--nuit) 30%, transparent); }
.heros-photos > button { position: relative; padding: 0; border: 0; border-radius: var(--rayon); overflow: hidden; cursor: zoom-in; background: var(--nuit-2); }
.heros-photos > button:first-child { grid-row: span 2; }
.heros-photos > button:hover img { transform: scale(1.05); }
.heros-photos > button:focus-visible { outline: 3px solid var(--vif); outline-offset: 2px; }
.heros-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.heros-photos--1 { grid-template-columns: 1fr; }
.heros-photos--2 { grid-template-columns: 1fr 1fr; }
.heros-photos--2 > button { grid-row: span 2; }
.heros-photos__plus { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--nuit) 55%, transparent); color: #fff; font-weight: 900; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 1000px) {
	.heros-photos { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px; }
	.heros-photos > button { flex: 0 0 74%; height: 170px; scroll-snap-align: start; }
	.heros-photos--1 > button { flex-basis: 100%; }
}
/* vidéo du club en tête de la mosaïque (16/9 sur toute la largeur, photos en bande dessous) */
.heros-photos--video { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.heros-photos__video { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); }
.heros-photos__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.heros-photos__calque { position: absolute; inset: 0; cursor: pointer; }
.heros-photos--video > button, .heros-photos--video.heros-photos--2 > button { grid-row: auto; height: clamp(90px, 9vw, 130px); }
.heros-photos--video.heros-photos--2 > button { grid-column: 1 / -1; }
@media (max-width: 1000px) {
	.heros-photos.heros-photos--video { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
	.heros-photos--video .heros-photos__video { grid-column: 1 / -1; width: auto; height: auto; aspect-ratio: 16 / 9; }
	.heros-photos--video > button, .heros-photos--video.heros-photos--2 > button { flex: none; height: 110px; }
}
/* commandes maison de la vidéo (le lecteur YouTube est sans commandes) */
.video-cmd { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.video-cmd > * { pointer-events: auto; }
.video-cmd__btn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--nuit) 72%, transparent); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, color .2s; }
.video-cmd__btn:hover { background: var(--vif); color: var(--nuit); }
.video-cmd__btn:focus-visible { outline: 3px solid var(--vif); outline-offset: 2px; }
.video-cmd__defile { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--nuit) 72%, transparent); color: #fff; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.video-cmd__defile .video-cmd__btn { width: 30px; height: 30px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.video-cmd__defile .video-cmd__btn:hover { background: var(--vif); }
[data-video-pas="-1"] .ico { transform: scaleX(-1); }
/* visionneuse des photos en plein écran */
.visionneuse { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: color-mix(in srgb, var(--nuit) 94%, transparent); color: #fff; }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: transparent; }
.visionneuse img { max-width: min(92vw, 1400px); max-height: 82vh; object-fit: contain; border-radius: 4px; }
.visionneuse__compte { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; font-weight: 700; }
.visionneuse button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: var(--nuit); cursor: pointer; }
.visionneuse button:hover { background: var(--vif); }
.visionneuse__fermer { top: 16px; right: 16px; }
.visionneuse__prec { left: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.visionneuse__suiv { right: 16px; top: 50%; transform: translateY(-50%); }

/* disciplines du club : bande de couleur sous l'en-tête, liste qui défile (flèches sur ordinateur, doigt sur mobile) */
#disciplines-club { scroll-margin-top: 80px; }
.bande-disc { background: var(--nuit-2); color: var(--sur-nuit); border-bottom: 1px solid var(--nuit-3); }
.bande-disc .conteneur { padding-top: 18px; padding-bottom: 18px; }
.choix-disc { display: flex; align-items: center; gap: 20px; }
.choix-disc__titre { display: grid; gap: 3px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--vif); }
.choix-disc__aide { font-size: .78rem; font-weight: 600; font-style: normal; text-transform: none; letter-spacing: normal; color: var(--nuit); opacity: .8; }
.choix-disc__defile { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.choix-disc__liste { display: flex; gap: 10px; flex: 1; min-width: 0; max-width: 100%; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 4px 2px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.defile-debut .choix-disc__liste { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); }
.defile-fin .choix-disc__liste { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%); }
.defile-debut.defile-fin .choix-disc__liste { -webkit-mask-image: none; mask-image: none; }
.choix-disc__item { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: var(--rayon); border: 2px solid var(--nuit-3); background: var(--nuit); color: #fff; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; scroll-snap-align: start; }
.choix-disc__item:hover { border-color: var(--vif); }
.choix-disc__item img { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; }
.choix-disc__item b { display: block; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1rem; }
.choix-disc__item small { color: var(--sur-nuit-doux); font-size: .8rem; }
.choix-disc__item[aria-pressed="true"] { background: var(--vif); border-color: var(--vif); color: var(--nuit); transform: skewX(-4deg); }
.choix-disc__item[aria-pressed="true"] small { color: var(--nuit); }
.choix-disc__fleche { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%; background: var(--vif); color: var(--nuit); cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--nuit) 45%, transparent); }
.choix-disc__fleche--prec { left: -6px; }
.choix-disc__fleche--prec .ico { transform: rotate(180deg); }
.choix-disc__fleche--suiv { right: -6px; }
/* variante sur fond bleu vif */
.bande-disc--vif { background: var(--vif); color: var(--nuit); border-bottom: 0; }
.bande-disc--vif .choix-disc__titre { color: var(--nuit); }
.bande-disc--vif .choix-disc__item { background: color-mix(in srgb, #fff 82%, var(--vif)); border-color: transparent; color: var(--nuit); }
.bande-disc--vif .choix-disc__item small { color: color-mix(in srgb, var(--nuit) 70%, transparent); }
.bande-disc--vif .choix-disc__item:hover { border-color: var(--nuit); }
.bande-disc--vif .choix-disc__item[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.bande-disc--vif .choix-disc__item[aria-pressed="true"] small { color: var(--sur-nuit); }
.bande-disc--vif .choix-disc__fleche { background: var(--nuit); color: #fff; }
@media (max-width: 760px) {
	.choix-disc { flex-wrap: wrap; gap: 10px; }
	.choix-disc__defile { flex-basis: 100%; }
	.choix-disc__fleche { display: none; }   /* sur mobile, on fait glisser la liste du doigt */
	.bande-disc .choix-disc__liste { margin: 0 calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere); }
}

/* navigation dans la fiche (le club, horaires, tarifs…), collée sous l'en-tête */
.sous-nav { position: sticky; top: var(--haut-entete); z-index: 50; background: #fff; border-bottom: 2px solid var(--nuit); }
.sous-nav ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; }
.sous-nav a { display: block; padding: 18px 20px; font-weight: 900; text-transform: uppercase; font-style: italic; font-size: .9rem; letter-spacing: .02em; text-decoration: none; color: var(--texte-doux); white-space: nowrap; position: relative; }
.sous-nav a:hover, .sous-nav a[aria-current] { color: var(--encre); }
.sous-nav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 5px; background: var(--vif); transform: skewX(-20deg); }
@media (max-width: 1080px) {
	.sous-nav a { padding: 13px 14px; font-size: .84rem; }
}

/* corps de la fiche : contenu à gauche, contact à droite (au-dessus jusqu'à 1000 px) */
.fiche-b { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 5vw, 96px); padding-top: 56px; padding-bottom: 80px; }
.fiche-b section { padding-bottom: 64px; }
.fiche-b section > h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-bottom: 24px; }
.aside-b { align-self: start; position: sticky; top: 150px; }
.barre-contact { display: none; }
@media (max-width: 1000px) {
	.fiche-b { grid-template-columns: 1fr; }
	.aside-b { position: static; order: -1; }
	/* barre « appeler / écrire » fixée en bas de l'écran */
	.barre-contact { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--nuit); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
	.barre-contact .btn { flex: 1; }
	body.a-barre { padding-bottom: 76px; }
}
.texte-club p { margin: 0 0 1em; }
.texte-club ul, .texte-club ol { padding-left: 1.2em; }
.historique-b { margin-top: 36px; padding-top: 28px; border-top: 1px dashed var(--bord); }
.historique-b h3 { font-size: 1.35rem; margin: 0 0 14px; }
.telechargements-b { margin-top: 20px; }
.note-site-actuel { margin-top: 24px; font-size: .88rem; color: var(--texte-doux); }   /* lien vers la fiche du site actuel */

/* « l'essentiel en un coup d'œil » */
.essentiel-b { margin: 28px 0; padding: 20px; border-radius: var(--rayon); background: var(--nuit); color: var(--sur-nuit); }
.essentiel-b__tete { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.essentiel-b__tete .ico { width: 26px; height: 26px; color: var(--vif); flex: none; }
.essentiel-b__tete b { display: block; color: #fff; font-style: italic; text-transform: uppercase; font-weight: 900; }
.essentiel-b__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.essentiel-b__grille > div { padding: 16px; border-radius: var(--rayon); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.essentiel-b__grille .ico { width: 26px; height: 26px; color: var(--vif); margin-bottom: 8px; }
.essentiel-b__grille strong { display: block; color: #fff; }
.essentiel-b__grille span { font-size: .88rem; color: var(--sur-nuit-doux); }

/* planning de la semaine */
.semaine { display: grid; gap: 0; border-top: 2px solid var(--nuit); }
.semaine__jour { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--bord); align-items: center; }
.semaine__jour > strong { font-family: var(--titre); font-style: italic; text-transform: uppercase; font-size: 1.3rem; color: var(--encre); }
.semaine__cours { display: flex; flex-wrap: wrap; gap: 12px; }
.semaine__vide { color: var(--texte-doux); font-style: italic; font-size: .92rem; }
.cours { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 10px 16px 10px 10px; border-radius: var(--rayon); background: var(--fond); min-width: 220px; }
.cours i { grid-row: span 2; width: 6px; align-self: stretch; border-radius: 3px; background: var(--bleu); }
.cours b { color: var(--encre); }
.cours span { font-size: .85rem; color: var(--texte-doux); }
@media (max-width: 1000px) {
	.cours { min-width: 0; width: 100%; }
}
@media (max-width: 760px) {
	.semaine__jour { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
}

/* tarifs */
.formules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.formule { position: relative; padding: 28px 28px 30px; border: 2px solid var(--bord); border-radius: var(--rayon); background: #fff; }
.formule h3 { margin-bottom: 4px; font-size: 1.3rem; }
.formule p { font-size: .9rem; color: var(--texte-doux); min-height: 2.8em; }
.formule strong { font-family: var(--titre); font-style: italic; font-weight: 900; font-size: 2.6rem; color: var(--encre); line-height: 1; }
.formule small { font-weight: 700; color: var(--texte-doux); }
@media (max-width: 760px) {
	.formules { grid-template-columns: 1fr; }
}

/* lieux de pratique (adresse + carte) */
.lieu-b { display: grid; grid-template-columns: 1fr 1.2fr; border: 2px solid var(--nuit); border-radius: var(--rayon); overflow: hidden; }
.lieu-b__info { padding: 28px; }
.lieu-b__lieu { margin-bottom: 20px; }
.lieu-b__lieu h3 { font-size: 1.25rem; }
.lieu-b__lieu address { margin: 0 0 10px; font-style: normal; }
.lieu-b__carte { position: relative; min-height: 280px; background: color-mix(in srgb, var(--bleu) 10%, var(--fond)); }
.lieu-b__carte .carte-reelle { border-radius: inherit; }
@media (max-width: 760px) {
	.lieu-b { grid-template-columns: 1fr; }
}

/* bloc contact */
.contact-b { background: var(--nuit); color: var(--sur-nuit); border-radius: var(--rayon); padding: 28px; position: relative; overflow: hidden; }
.contact-b::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--vif); opacity: .12; }
.contact-b h3 { color: #fff; font-family: var(--titre); font-style: italic; text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; }
.contact-b__nom { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: .92rem; opacity: .85; }   /* nom du contact (fiche remplie par le club) */
.contact-b__nom .ico { flex: none; }
.contact-b__merci { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--rayon); background: color-mix(in srgb, var(--vif) 20%, transparent); color: #fff; font-size: .9rem; font-weight: 600; }   /* signalement enregistré */
.contact-b__prix { margin: 12px 0 22px; }
.contact-b__prix strong { font-family: var(--titre); font-style: italic; font-size: 2.6rem; color: var(--vif); line-height: 1; }
.contact-b .btn + .btn { margin-top: 10px; }
.contact-b ul { list-style: none; padding: 20px 0 0; margin: 22px 0 0; border-top: 1px solid var(--nuit-3); display: grid; gap: 12px; }
.contact-b ul a { color: #fff; text-decoration: none; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.contact-b ul .ico { color: var(--vif); }
/* « Signaler une erreur », « Je gère ce club » : petits liens en bas du bloc, ouverts en fenêtre */
.contact-b__liens { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--nuit-3); }
.contact-b__liens button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sur-nuit-doux); font: inherit; font-size: .82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.contact-b__liens button:hover { color: #fff; }
.contact-b__liens button:last-child:not(:first-child) { margin-left: auto; }
.contact-b__liens .ico { width: 15px; height: 15px; }
/* site et réseaux sociaux en boutons à icône (mêmes couleurs que le site actuel) */
.reseaux-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.reseaux-b a { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--rayon); color: #fff; text-decoration: none; transition: transform .15s, filter .15s; }
.reseaux-b a:hover { transform: translateY(-2px); filter: brightness(1.12); }
.reseaux-b a:focus-visible { outline: 3px solid var(--vif); outline-offset: 2px; }
.reseaux-b .ico { width: 22px; height: 22px; }
.reseaux-b__web { background: #2196F3; }
.reseaux-b__facebook { background: #3b5998; }
.reseaux-b__twitter { background: #151109; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.reseaux-b__instagram { background: #E1306C; }
.reseaux-b__tiktok { background: #76239B; }
.reseaux-b__youtube { background: #f60808; }
/* message envoyé (en attente de la vérification de l'équipe), compte connecté, âge du profil */
.apercu-b { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--orange); color: var(--encre); font-size: .9rem; text-align: center; }
.apercu-b svg { flex: none; }
.contact-envoye { padding: 22px 24px; border-radius: var(--rayon); background: color-mix(in srgb, #2e9d4f 10%, #fff); border: 1px solid color-mix(in srgb, #2e9d4f 35%, #fff); }
.contact-envoye__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; color: #1f6f37; }
.contact-envoye p { margin: 0 0 8px; }
.contact-connexion { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--rayon); background: var(--fond); font-size: .88rem; }
.contact-age { margin: -4px 0 0; padding: 9px 12px; border-radius: var(--rayon); font-size: .86rem; font-weight: 600; }
.contact-age--ok { background: color-mix(in srgb, var(--vif) 16%, #fff); color: var(--encre); }
.contact-age--attention { background: #fff4e0; color: #8a4b00; }

/* fenêtre « Partager la fiche » (réseaux, e-mail, copie du lien, menu de partage du téléphone) */
.partage-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.partage-b__choix { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff; color: var(--encre); font: inherit; font-size: .78rem; text-decoration: none; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.partage-b__choix b { font-weight: 700; line-height: 1.2; text-align: center; }
.partage-b__choix span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c, var(--nuit)); color: #fff; }
.partage-b__choix .ico { width: 22px; height: 22px; }
.partage-b__choix:hover { border-color: var(--c, var(--nuit)); transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--nuit) 12%, transparent); }
.partage-b__choix:focus-visible { outline: 3px solid var(--vif); outline-offset: 2px; }
.partage-b--facebook { --c: #1877f2; }
.partage-b--whatsapp { --c: #25d366; }
.partage-b--x { --c: #0f1419; }
.partage-b--linkedin { --c: #0a66c2; }
.partage-b--telegram { --c: #26a5e4; }
.partage-b--mail { --c: var(--bleu); }
.partage-b--lien { --c: var(--vif-fonce); }
.partage-b--plus { --c: var(--nuit-3); }
.partage-b__adresse { width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); color: var(--texte-doux); font: inherit; font-size: .82rem; }
@media (max-width: 420px) {
	.partage-b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* 13. Index des villes et des disciplines ----------------------------------------- */
.index-b { padding-top: 48px; padding-bottom: 72px; }
.section .index-b { padding: 0; }   /* page d'un département : disciplines par univers dans une section */
.index-b__groupe { padding: 28px 0; border-top: 1px solid var(--bord); scroll-margin-top: 90px; }
.index-b__groupe:first-child { border-top: 0; padding-top: 0; }
.index-b__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.index-b__tete h2, .index-b__tete h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.index-b__tete h2 a, .index-b__tete h3 a { color: inherit; text-decoration: none; }
.index-b__tete h2 a:hover, .index-b__tete h3 a:hover { color: var(--bleu); }
.index-b__tete small { color: var(--texte-doux); font-weight: 700; }
.index-b__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vif); color: var(--nuit); flex: none; }
.index-b__ico .ico { width: 22px; height: 22px; }
.index-b__liens { list-style: none; margin: 0; padding: 0; columns: 4 210px; column-gap: 28px; }
.index-b__liens li { break-inside: avoid; }
.index-b__liens a { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--bord); color: var(--encre); text-decoration: none; font-weight: 600; }
.index-b__liens a:hover, .index-b__liens a[aria-current] { color: var(--bleu); }
.index-b__liens b { margin-left: auto; font-size: .8rem; color: var(--texte-doux); font-weight: 700; }
.index-b__num { font-size: .75rem; color: var(--texte-doux); font-weight: 700; }
.index-b__lettre { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 10px 0; }
.index-b__lettre > span { font-family: var(--titre); font-weight: 900; font-style: italic; font-size: 1.8rem; line-height: 1; color: var(--bleu); padding-top: 4px; }
.index-b__autre { margin-top: 32px; }
.index-b--compact { padding: 0; }


/* 14. Blog ------------------------------------------------------------------------ */
/* article à la une */
.une-article { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); color: var(--sur-nuit); text-decoration: none; box-shadow: 8px 8px 0 var(--vif); }
.une-article img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.une-article__texte { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 4vw, 48px); }
.une-article__texte strong { font-family: var(--titre); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.05; color: #fff; }
.une-article .fleche { color: var(--vif); }
.une-article:hover strong { color: var(--vif); }
.carte-article__date { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.carte-article h3 a { color: inherit; text-decoration: none; }
.carte-article h3 a::after { content: ""; position: absolute; inset: 0; }
.appel-blog { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding: 24px 28px; border-radius: var(--rayon); background: var(--fond); }
.blog-liste { padding-top: 40px; padding-bottom: 72px; }
.blog-liste__grille { margin-top: 32px; }
.appel-blog strong { font-family: var(--titre); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.4rem; color: var(--encre); }

/* en-tête d'un article : plus haut, titre en bas de la photo, aligné sur la colonne de lecture */
.tete-article { display: flex; align-items: flex-end; min-height: min(64vh, 580px); }
.tete-article::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--nuit) 60%, transparent) 100%); }   /* lisibilité du titre */
.tete-article > .conteneur { width: 100%; max-width: calc(1240px + 2 * var(--gouttiere)); margin-inline: auto; padding-top: 28px; padding-bottom: 48px; }
.tete-article h1 { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.tete-article .fiche-heros__meta { color: #fff; }
@media (max-width: 760px) {
	.tete-article { min-height: min(52vh, 420px); }
}
/* article : colonne de lecture centrée, encadré à droite */
.article-b { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); padding-top: 48px; padding-bottom: 72px; max-width: calc(1240px + 2 * var(--gouttiere)); margin-inline: auto; }
.article-b article { min-width: 0; }
.article-b__chapeau { font-size: 1.22rem; line-height: 1.55; color: var(--encre); font-weight: 600; margin: 0 0 1.4em; }
.article-b__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--bord); }
.article-b__bas .puce { text-decoration: none; }
.article-b__aside { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 100px; }
.texte-article { font-size: 1.06rem; line-height: 1.75; }
.texte-article h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 1.8em 0 .6em; }
.texte-article h2[id] { scroll-margin-top: 100px; }
.texte-article h3, .texte-article h4 { font-size: 1.2rem; margin: 1.5em 0 .5em; }
.texte-article img { max-width: 100%; height: auto; border-radius: var(--rayon); }
.texte-article iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--rayon); }
.texte-article table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; display: block; overflow-x: auto; }
.texte-article th, .texte-article td { padding: 10px 12px; border-bottom: 1px solid var(--bord); text-align: left; }
.texte-article blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--vif); font-style: italic; }
.texte-article a { color: var(--bleu); }
.commentaires-b { margin-top: 48px; }
.commentaires-b h2 { font-size: 1.6rem; }
.commentaire-b { padding: 14px 0; border-bottom: 1px solid var(--bord); }
.commentaire-b small { color: var(--texte-doux); }
.commentaire-b p { margin: 6px 0 0; }
.commentaires-b__vide { color: var(--texte-doux); }
.commentaire-form { margin-top: 24px; }
.commentaire-form h3 { margin: 0; font-size: 1.25rem; }
/* lien vers les clubs de la discipline de l'article */
.appel-disc { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 150px; padding: 18px; border-radius: var(--rayon); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.appel-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.appel-disc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--nuit) 88%, transparent)); }
.appel-disc small { display: block; color: var(--vif); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.appel-disc b { font-family: var(--titre); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.3rem; }
.appel-disc:hover b { color: var(--vif); }
@media (max-width: 1000px) {
	.une-article { grid-template-columns: 1fr; }
	.une-article img { min-height: 220px; max-height: 280px; }
	.article-b { grid-template-columns: 1fr; }
	.article-b__aside { position: static; }
}


/* 15. Pages d'infos (FAQ, contact, mentions légales, publicité, partenaires) -------- */
.infos-b { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); padding-top: 48px; padding-bottom: 72px; max-width: calc(1240px + 2 * var(--gouttiere)); margin-inline: auto; }
.infos-b__texte { min-width: 0; }
.infos-b .formulaire-b { max-width: 760px; }
.faq-groupe + .faq-groupe { margin-top: 40px; }
.faq-groupe h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 16px; }
.infos-encart { margin-top: 40px; padding: 26px 28px; border-radius: var(--rayon); background: var(--fond); }
.infos-encart h2 { font-size: 1.4rem; }
.infos-encart p { margin: 0 0 14px; }
.sommaire-b { margin-bottom: 32px; padding: 20px 24px; border-left: 4px solid var(--vif); background: var(--fond); border-radius: 0 var(--rayon) var(--rayon) 0; }
.sommaire-b strong { display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.sommaire-b ol { margin: 0; padding-left: 1.2em; columns: 2 260px; }
.sommaire-b a { color: var(--encre); }
.offres-b, .etapes-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 28px; }
.offres-b > div, .etapes-b > div { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--bord); background: #fff; }
.offres-b .ico { width: 28px; height: 28px; color: var(--bleu); }
.offres-b strong, .etapes-b strong { color: var(--encre); font-size: 1.05rem; }
.offres-b span, .etapes-b span { color: var(--texte-doux); font-size: .93rem; }
.etapes-b b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vif); color: var(--nuit); font-family: var(--titre); font-style: italic; font-size: 1.2rem; }
.partenaires-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.partenaire-b { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--bord); color: var(--texte); text-decoration: none; background: #fff; transition: box-shadow .2s; }
.partenaire-b:hover { box-shadow: 0 0 0 2px var(--nuit); }
.partenaire-b img { height: 64px; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; margin-bottom: 6px; }
.partenaire-b strong { color: var(--encre); font-size: 1.1rem; }
.partenaire-b__image { max-width: 320px; margin-bottom: 24px; }
.partenaire-b__site { margin-top: 24px; }
.infos-b__bouton { margin-top: 28px; }
.infos-b__suite { margin-top: 36px; }
/* colonne de droite : sommaire des pages d'infos et appel */
.infos-aside { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: 100px; }
.infos-aside nav { padding: 20px 22px; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--bord); }
.infos-aside nav strong { display: block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.infos-aside ul { list-style: none; margin: 0; padding: 0; }
.infos-aside li a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--bord); color: var(--encre); text-decoration: none; font-weight: 600; }
.infos-aside li:last-child a { border-bottom: 0; }
.infos-aside li a .ico { color: var(--bleu); }
.infos-aside li a:hover, .infos-aside li a[aria-current] { color: var(--bleu); }
.infos-aside__appel { padding: 22px; border-radius: var(--rayon); background: var(--nuit); color: var(--sur-nuit); }
.infos-aside__appel b { display: block; color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
.infos-aside__appel p { margin: 0 0 14px; font-size: .92rem; }
@media (max-width: 1000px) {
	.infos-b { grid-template-columns: 1fr; }
	.infos-aside { position: static; }
}

/* aperçu des modèles d'e-mail */
.emails-b { padding-top: 32px; padding-bottom: 72px; }
.barre-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.emails-b__grille { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.emails-b__objet { margin: 0 0 12px; padding: 12px 16px; border-radius: var(--rayon); background: var(--fond); }
.emails-b__objet small { color: var(--texte-doux); }
.emails-b__apercu { width: 100%; height: 780px; border: 0; border-radius: var(--rayon); box-shadow: 0 0 0 1px var(--bord); background: #f2f4f6; }
.emails-b pre { overflow-x: auto; padding: 16px; border-radius: var(--rayon); background: var(--nuit); color: #e6edf3; font-size: .82rem; line-height: 1.5; }
.emails-b__code { width: 100%; margin-top: 10px; font: .78rem/1.4 ui-monospace, Consolas, monospace; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px; }
@media (max-width: 1000px) {
	.emails-b__grille { grid-template-columns: minmax(0, 1fr); }
}


/* 16. Compte, espace pratiquant, favoris ------------------------------------------ */
/* pages du compte : photo et avantages à gauche, formulaire à droite */
.compte-page { background: var(--fond); }
.compte-b { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 0; max-width: calc(1040px + 2 * var(--gouttiere)); margin-inline: auto; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(48px, 8vw, 96px); }
.compte-b + .compte-b, .compte-b .compte-b__message { margin-bottom: 18px; }
.compte-b__cote { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(28px, 4vw, 48px); border-radius: var(--rayon) 0 0 var(--rayon); background: var(--nuit) url(/images/index/inscriptions.jpg) center / cover; background-blend-mode: multiply; color: var(--sur-nuit); position: relative; isolation: isolate; overflow: hidden; }
.compte-b__cote::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--nuit) 72%, transparent); }
.compte-b__cote strong { font-family: var(--titre); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; color: #fff; }
.compte-b__cote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.compte-b__cote li { display: flex; gap: 10px; align-items: center; }
.compte-b__cote .ico { color: var(--vif); flex: none; }
.compte-b__carte { padding: clamp(28px, 4vw, 48px); border-radius: 0 var(--rayon) var(--rayon) 0; background: #fff; box-shadow: 0 0 0 1px var(--bord); }
.compte-b__carte h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 22px; }
.compte-b__carte .formulaire-b { gap: 14px; padding: 0; background: none; }
.compte-b__carte .formulaire-b input { border-color: var(--bord); }
.compte-b__petit { margin: -4px 0 0; font-size: .88rem; }
.compte-b__liens { margin: 20px 0 0; }
.compte-b__autre { margin-top: 18px; font-size: .9rem; }   /* lien vers l'autre espace (club / pratiquant) */
.compte-b__autre a { font-weight: 700; }
.compte-b__test { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--bord); font-size: .85rem; color: var(--texte-doux); display: flex; gap: 8px; }
.compte-b__message { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--rayon); background: color-mix(in srgb, var(--vif) 18%, #fff); }
.compte-b__message .ico { width: 30px; height: 30px; flex: none; color: var(--nuit); }
.compte-b__message p { margin: 0; }
.compte-b__message b { display: block; color: var(--encre); margin-bottom: 4px; }
/* variantes : une seule colonne centrée */
.compte-b--choix { grid-template-columns: minmax(0, 760px); justify-content: center; }
.compte-b--large { grid-template-columns: minmax(0, 820px); justify-content: center; }
.compte-b--espace { grid-template-columns: minmax(0, 1040px); }
.compte-b--choix .compte-b__carte, .compte-b--large .compte-b__carte { border-radius: var(--rayon); }
@media (max-width: 1000px) {
	.compte-b { grid-template-columns: 1fr; }   /* photo et avantages au-dessus du formulaire */
	.compte-b__cote { border-radius: var(--rayon) var(--rayon) 0 0; }
	.compte-b__carte { border-radius: 0 0 var(--rayon) var(--rayon); }
}
/* choix de l'espace : club ou pratiquant */
.choix-espace { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.choix-espace__carte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border: 2px solid var(--bord); border-radius: var(--rayon); background: #fff; color: var(--texte); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.choix-espace__carte b { font-size: 1.2rem; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--encre); }
.choix-espace__carte span:last-child { color: var(--texte-doux); font-size: .92rem; }
.choix-espace__carte:hover, .choix-espace__carte:focus-visible { border-color: var(--vif); transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--nuit) 12%, transparent); outline: none; }
.choix-espace__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--nuit); color: var(--vif); }
.choix-espace__ico .ico { width: 22px; height: 22px; }
@media (max-width: 600px) {
	.choix-espace { grid-template-columns: 1fr; }
}
/* « Mon espace » : chiffres, profils de la famille, favoris, clubs contactés */
.espace-b__bonjour { font-size: 1.15rem; font-weight: 700; color: var(--encre); }
/* e-mail du compte pas encore validé (espace pratiquant, fiche, demande) */
.espace-b__valider { margin: 0 0 22px; padding: 18px 20px; border-radius: var(--rayon); background: color-mix(in srgb, var(--orange) 14%, #fff); border: 1px solid color-mix(in srgb, var(--orange) 45%, #fff); }
.espace-b__valider > p { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.espace-b__valider > p .ico { width: 26px; height: 26px; flex: none; color: var(--encre); }
.espace-b__valider b { display: block; color: var(--encre); margin-bottom: 4px; }
.espace-b__valider .compte-b__renvoi { margin-top: 14px; }
.espace-b__valider .btn { margin-top: 8px; }
.espace-b__chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 26px; }
.espace-b__chiffres a { display: flex; flex-direction: column; padding: 16px; border-radius: var(--rayon); background: var(--fond); color: var(--texte); text-decoration: none; }
.espace-b__chiffres b { font-size: 1.8rem; font-weight: 900; color: var(--encre); line-height: 1; }
.espace-b__chiffres span { font-size: .85rem; color: var(--texte-doux); margin-top: 4px; }
.espace-b__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.espace-b__titre { font-size: 1.05rem; margin: 0 0 10px; }
.espace-b__tete .espace-b__titre { margin: 0; }
.compte-b--espace .compte-b__carte { min-width: 0; } /* les onglets défilent, ils ne doivent pas élargir la carte */
.espace-b__compte .formulaire-b { max-width: 480px; margin-bottom: 30px; }
.espace-b__compte > p { overflow-wrap: anywhere; }
@media (max-width: 640px) { .espace-b__onglets { flex-wrap: wrap; overflow-x: visible; } } /* tous les onglets visibles, Mon compte compris */
.espace-b__onglets { display: flex; gap: 4px; margin: 6px 0 22px; border-bottom: 1px solid var(--bord); overflow-x: auto; scrollbar-width: none; }
.espace-b__onglets a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 10px 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--texte-doux); font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.espace-b__onglets a:hover { color: var(--encre); }
.espace-b__onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--vif); }
.espace-b__onglets span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--fond); font-size: .78rem; text-align: center; }
.espace-b__page .espace-b__tete .profil-b__aide { flex: 1 1 260px; }
.espace-b__partie { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--bord); scroll-margin-top: 90px; }
.espace-b__profils { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.espace-b__profils li { position: relative; display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.espace-b__profils li:hover { border-color: var(--vif); }
.espace-b__profils b { color: var(--encre); }
.espace-b__profils small { color: var(--texte-doux); }
.espace-b__profils li > b, .espace-b__profils small, .espace-b__sports { grid-column: 2; }
.espace-b__initiale { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vif); color: var(--nuit); font-weight: 900; }
.espace-b__sports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.espace-b__sports .puce { font-size: .72rem; }
.espace-b__modifier { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-weight: 700; font-size: .85rem; color: var(--bleu); }
.espace-b__modifier::after { content: ""; position: absolute; inset: 0; }
.espace-b__favoris { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.espace-b__favoris .badge-contacte { display: none; }   /* « Pour Léo » à la place (les clubs contactés sont listés dessous) */
.espace-b__favoris .carte-b { transition: opacity .25s, transform .25s; }
.espace-b__favoris .carte-b--retiree { opacity: 0; transform: scale(.96); }
.espace-b__lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.espace-b__lignes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.espace-b__lignes li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.espace-b__lignes b a { color: var(--encre); }
.espace-b__lignes small { color: var(--texte-doux); }
.espace-b__lignes .coeur { position: static; flex: none; }
.espace-b__lignes .puce { flex: none; }
.espace-b__vide { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px; border-radius: var(--rayon); background: var(--fond); color: var(--texte-doux); }
@media (max-width: 600px) {
	.espace-b__lignes li { flex-direction: column; align-items: flex-start; }
}
/* page d'un profil de la famille */
.profil-b__retour { margin: 0 0 10px; font-size: .88rem; }
.profil-b__retour a { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-doux); text-decoration: none; font-weight: 700; }
.profil-b__retour .ico { transform: scaleX(-1); }
.profil-b__bloc { margin: 0 0 22px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--bord); display: grid; gap: 12px; }
.profil-b__bloc legend { padding: 0 0 6px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--encre); font-size: .95rem; }
.profil-b__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.profil-b__moi { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--texte-doux); font-weight: 600; }
.profil-b__etiquette { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.profil-b__puces { display: flex; flex-wrap: wrap; gap: 8px; }
.profil-b__handicap:not([hidden]) { display: grid; gap: 12px; }
.formulaire-b .profil-b__accord { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; font-weight: 600; text-transform: none; letter-spacing: normal; line-height: 1.45; }
.formulaire-b .profil-b__accord input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--nuit); }
.profil-b__aide { margin: 0; font-size: .82rem; color: var(--texte-doux); }
.profil-b__sports { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.profil-b__sports:empty { display: none; }
.profil-b__sports li { display: grid; grid-template-columns: 1fr auto 36px; gap: 10px; align-items: center; padding: 8px 8px 8px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.profil-b__sports b { color: var(--encre); }
.profil-b__sports select { margin: 0; padding: 8px 10px; }
.profil-b__retirer { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--fond); color: var(--encre); cursor: pointer; }
.profil-b__retirer:hover { background: #fdecec; color: #9b1c1c; }
.profil-b__ajout { display: flex; gap: 10px; }
.profil-b__ajout input { flex: 1; margin: 0; }
.profil-b__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profil-b__annuler { font-weight: 700; color: var(--texte-doux); }
.profil-b__suppression { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.profil-b__suppression button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #9b1c1c; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* boutons à choisir (sports, jours…) */
.choix-b { position: relative; cursor: pointer; }
.choix-b input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix-b span { display: inline-block; padding: 8px 14px; border: 1px solid var(--bord); border-radius: 999px; background: #fff; font-size: .88rem; font-weight: 600; transition: background .15s, border-color .15s; }
.choix-b input:checked + span { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.choix-b input:focus-visible + span { outline: 3px solid var(--vif); outline-offset: 2px; }
@media (max-width: 600px) {
	.profil-b__ligne { grid-template-columns: 1fr; }
	.profil-b__sports li { grid-template-columns: 1fr 36px; }
	.profil-b__sports select { grid-column: 1; grid-row: 2; }
	.profil-b__sports .profil-b__retirer { grid-column: 2; grid-row: 1 / span 2; }
	.profil-b__ajout { flex-direction: column; }
}
/* suppression du compte pratiquant */
.compte-b__supprimer { color: #9b1c1c; }
.suppression-b { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.suppression-b li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--rayon); background: var(--fond); }
.suppression-b .ico { flex: none; color: #9b1c1c; margin-top: 2px; }
.suppression-b__bouton { background: #b42318; border-color: #b42318; color: #fff; }
.suppression-b__bouton:hover { background: #8f1c13; }
/* demande à plusieurs clubs */
.demande-b__clubs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.demande-b__clubs li { padding: 10px 12px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.demande-b__clubs li:has(input:checked) { border-color: var(--vif); background: color-mix(in srgb, var(--vif) 8%, #fff); }
.demande-b__clubs .case-b { align-items: flex-start; }
.demande-b__clubs .case-b span { display: grid; gap: 2px; }
.demande-b__clubs small { font-weight: 400; color: var(--texte-doux); }
.demande-b__clubs .case-b, .demande-b__clubs .case-b b { text-transform: none; letter-spacing: normal; font-size: .95rem; }
.demande-b__clubs .case-b small { font-size: .82rem; }
.demande-b__club--sans { opacity: .6; }


/* 17. Publicités ------------------------------------------------------------------
   Étiquette « Publicité » ; bloc masqué si Google n'a rien à afficher ; en local, cadre pointillé (pub fictive). */
.pub-b { margin: 32px auto; text-align: center; }
.pub-b__etiquette { display: block; margin-bottom: 6px; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.pub-b:has(ins[data-ad-status="unfilled"]) { display: none; }
.pub-b__fictive { display: grid; place-content: center; gap: 4px; min-height: 250px; border: 2px dashed var(--bord); border-radius: var(--rayon); background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--bord) 45%, transparent) 12px 13px); color: var(--texte-doux); font-size: .85rem; font-weight: 700; }
.pub-b__fictive small { font-weight: 400; font-size: .72rem; }
.pub-b--bande .pub-b__fictive { min-height: 100px; }
.pub-b--carre .pub-b__fictive { width: 300px; min-height: 250px; margin: 0 auto; }
.pub-b--article .pub-b__fictive { min-height: 180px; }
.pub-b--flux .pub-b__fictive { min-height: 120px; }
.texte-article .pub-b { clear: both; }
.article-b__aside .pub-b { margin: 20px 0 0; }
/* carré dans l'en-tête (ordinateur seulement), à droite du texte, dans un petit bloc blanc aux bords arrondis */
.pub-b--heros { padding: 8px 10px 10px; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.pub-b--heros .pub-b__fictive { border-width: 1px; }
.tete-b .conteneur:has(> .pub-b--heros) { position: relative; }
.fiche-heros__pub { justify-self: end; margin: 0; }   /* fiche sans photo : la pub à la place des photos */
.tete-b .conteneur > .pub-b--heros { position: absolute; right: var(--gouttiere, 24px); top: 50%; transform: translateY(-50%); margin: 0; max-width: none; }
/* résultats : bande sous la carte sur ordinateur ; quand la carte passe en plein écran, le bloc va sous la liste */
@media (min-width: 1001px) {
	.tete-b .conteneur:has(> .pub-b--heros) { min-height: 360px; }
	.fiche-heros:has(.fiche-heros__pub) .fiche-heros__grille { grid-template-columns: minmax(0, 1fr) auto; }   /* la pub (≈ 290 px) tient en entier, avec de l'air (blog, articles, résultats) */
	.tete-b .conteneur:has(> .pub-b--heros) > :not(.pub-b--heros):not(.ariane) { max-width: min(50%, calc(100% - 350px)); }   /* le texte ne passe jamais sous la pub (300 px + marges) */
	.pub-b--sous-carte { flex: none; margin: 0; padding: 8px 12px 10px; background: #fff; border-top: 1px solid var(--bord); }
	.pub-b--mobile { display: none; }
}
@media (max-width: 1000px) {
	.pub-b--heros, .pub-b--sous-carte { display: none; }
	.pub-b--mobile { margin: 24px 16px; }
}
/* pub partenaire (pubs_linking) à la place de la pub sous la carte */
.pub-partenaire { text-align: left; }
.pub-partenaire__lien { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.pub-partenaire__lien img { flex: none; width: 96px; height: 72px; object-fit: cover; border-radius: var(--rayon); }
.pub-partenaire__texte { display: grid; gap: 4px; font-size: .85rem; line-height: 1.35; }
.pub-partenaire__texte strong { font-size: .95rem; color: var(--encre); }
.pub-partenaire__texte > span { color: var(--texte-doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-partenaire__texte .btn { justify-self: start; margin-top: 2px; font-style: normal; }
/* pubs dans les listes de clubs (avant le 1er puis tous les 4) ; visuel de secours si Google n'a rien à afficher.
   Le bloc <ins> de Google porte un style en ligne : !important pour le masquer. */
.pub-ligne { list-style: none; }
.pub-ligne .pub-b, .pub-carte .pub-b { margin: 0; padding: 10px; border: 1px dashed var(--bord); border-radius: var(--rayon); background: #fff; }
.pub-carte { display: flex; }
.pub-carte .pub-b { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pub-b--liste .pub-b__fictive { min-height: 140px; }
.pub-carte .pub-b--liste .pub-b__fictive { min-height: 300px; }
.pub-ligne .pub-b__fictive { min-height: 150px; }   /* à côté de la carte : pas plus haut qu'une ligne de club */
.pub-b__secours { display: none; }
.pub-b__secours img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; margin: 0 auto; }
.pub-carte .pub-b__secours img { max-height: none; }
.pub-ligne .pub-b__secours img { max-height: 150px; width: auto; }
.pub-b--liste:has(ins[data-ad-status="unfilled"]) { display: block; }
.pub-carte .pub-b--liste:has(ins[data-ad-status="unfilled"]) { display: flex; }
.pub-b--liste:has(ins[data-ad-status="unfilled"]) ins { display: none !important; }
.pub-b--liste:has(ins[data-ad-status="unfilled"]) .pub-b__secours { display: block; }


/* 18. Pied de page, annonces, barres de défilement --------------------------------- */
.pied { background: var(--nuit); color: var(--sur-nuit-doux); font-size: .93rem; }
.pied__haut { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 48px 0; border-bottom: 1px solid var(--nuit-3); }
.pied__haut strong { font-family: var(--titre); font-style: italic; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.8rem); color: #fff; line-height: 1.05; }
.pied__appel { flex: 1 1 420px; min-width: 0; }
.pied__appel strong { display: block; }
.pied__appel p { margin: 12px 0 0; max-width: 62ch; }
.pied__grille { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; padding: 48px 0; }
.pied__logo { margin-bottom: 16px; }
.pied h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 16px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied a { color: var(--sur-nuit); text-decoration: none; }
.pied a:hover { color: var(--vif); }
.pied a.btn--vif, .pied a.btn--vif:hover { color: var(--nuit); }
.pied__bas { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0 28px; border-top: 1px solid var(--nuit-3); font-size: .85rem; flex-wrap: wrap; }
@media (max-width: 760px) {
	.pied__grille { grid-template-columns: 1fr 1fr; }
	.pied__grille > :first-child { grid-column: 1 / -1; }
}

/* annonce brève en bas de l'écran (ex. « ajouté à vos favoris ») */
.annonce-b { position: fixed; left: 50%; bottom: 24px; z-index: 900; max-width: min(92vw, 520px); padding: 14px 18px; border-radius: var(--rayon); background: var(--nuit); color: #fff; font-size: .92rem; box-shadow: 0 16px 40px color-mix(in srgb, var(--nuit) 45%, transparent); transform: translate(-50%, 140%); opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none; }
.annonce-b--visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.annonce-b a { color: var(--vif); font-weight: 700; }
@media (max-width: 1000px) {
	.annonce-b { bottom: 84px; }   /* au-dessus de la barre de contact de la fiche */
}

/* Barres de défilement : masquées sur les bandes qui défilent à l'horizontale (on garde le glisser du doigt
   et les flèches), fines et pâles partout ailleurs (page, listes de suggestions, tableaux). */
.rail, .barre-filtres .conteneur, .barre-filtres__defile, .sous-nav ul, .heros-photos, .choix-disc__liste, .onglets-b__liste { scrollbar-width: none; }
.rail::-webkit-scrollbar, .barre-filtres .conteneur::-webkit-scrollbar, .barre-filtres__defile::-webkit-scrollbar, .sous-nav ul::-webkit-scrollbar, .heros-photos::-webkit-scrollbar, .choix-disc__liste::-webkit-scrollbar, .onglets-b__liste::-webkit-scrollbar { display: none; }
html, .suggestions, .texte-article table, .emails-b pre { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--nuit) 22%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--nuit) 22%, transparent); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--nuit) 40%, transparent); }

/* admin connecté : édition d'un club depuis les listes, gérer ou supprimer depuis la fiche (02/11/2026) */
.admin-carte { position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: var(--vif); color: var(--nuit); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.admin-carte:hover { background: #fff; }
.admin-fiche__form { display: contents; }
.admin-fiche__suppr:hover { background: #c62828; border-color: #c62828; color: #fff; }


/* 19. Coachs et professeurs ----------------------------
   Même fiche et mêmes cartes que les clubs : ici seulement ce qui est propre au coach. */
.nav__nombre { margin-left: 5px; font-size: .72rem; font-weight: 700; color: var(--vif); }

/* passage Clubs / Coachs d'une recherche : seulement quand le menu du haut est replié dans le burger */
.onglets-type { display: none; gap: clamp(20px, 4vw, 48px); border-bottom: 2px solid var(--bord); overflow: auto hidden; }
.onglets-type a { flex: none; padding: 16px 0 14px; margin-bottom: -2px; border-bottom: 4px solid transparent; font-weight: 800; color: var(--texte-doux); text-decoration: none; }
.onglets-type a:hover { color: var(--encre); }
.onglets-type a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--vif-fonce); }
.onglets-type b { margin-left: 4px; font-weight: 700; color: var(--texte-doux); }
@media (max-width: 1080px) {
	.onglets-type { display: flex; }
}

.coachs-page { padding-bottom: 72px; }

.carte-b__metier { margin: -2px 0 6px; font-weight: 700; color: var(--vif-fonce); }

/* fiche : portrait à la place du logo, titre et accroche sous le nom */
.fiche-logo--portrait { width: clamp(120px, 15vw, 220px); height: clamp(120px, 15vw, 220px); padding: 0; object-fit: cover; }
.portrait-initiales { display: grid; place-items: center; background: var(--nuit); color: var(--vif); font-family: var(--titre); font-style: italic; font-size: clamp(2.6rem, 5vw, 4.4rem); }
.fiche-heros__metier { margin: 0 0 4px; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 800; color: var(--vif); }
.fiche-heros__accroche { margin: 0 0 14px; max-width: 60ch; font-size: 1.05rem; }
.fiche-heros__controle .ico { color: var(--vif); }

.coach-preuves { list-style: none; display: grid; gap: 8px; margin: 8px 0 10px; padding: 0; }
.coach-preuves li { display: flex; gap: 10px; align-items: baseline; font-weight: 700; color: var(--encre); }
.coach-preuves .ico { flex: none; width: 18px; height: 18px; color: var(--vif-fonce); align-self: center; }
.coach-preuves small { font-weight: 500; color: var(--texte-doux); }
.coach-preuves__note { font-size: .85rem; color: var(--texte-doux); }

.choix-inscription { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.choix-inscription legend { padding: 0; margin-bottom: 6px; font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; color: var(--encre); }
.choix-inscription .case-b { display: flex; align-items: center; gap: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.choix-inscription .case-b input { flex: none; width: 18px; height: 18px; padding: 0; }
.choix-espace__carte--ouverte { border-color: var(--nuit) !important; }

/* fiche : portrait plus grand à la place du logo, nom, titre et accroche à côté */
.fiche-heros__titre--portrait { align-items: flex-end; }
.fiche-heros__identite { min-width: 0; }
.fiche-heros__identite .fiche-heros__accroche { margin-bottom: 0; }
.formule__modes { margin: 0 0 8px; font-size: .85rem; font-weight: 700; color: var(--vif-fonce); }

/* coachs : numéro déclaré, pas encore contrôlé (jamais de coche) ; départements des pages sans lieu */
.puce--doux { color: var(--texte-doux); }
.fiche-heros__controle--non .ico { color: inherit; opacity: .75; }
.coach-preuves li.coach-preuves__non { font-weight: 600; }
.coach-preuves__non .ico { color: var(--texte-doux); }
/* La visio, au même niveau qu'un lieu : plus marquée que les autres choix de la barre et des listes de lieux */
.barre-filtres .filtre-b--visio { background: #fff; border-color: var(--nuit); }
.liens-b a.liens-b__visio { display: inline-flex; align-items: center; gap: 6px; border-color: var(--vif); }
.liens-b__visio .ico { width: 15px; height: 15px; color: var(--vif); }

/* Lieux de pratique : accès, état d'ouverture, équipements */
.lieu-acces { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lieu-acces li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 2px solid var(--bord); border-radius: var(--rayon); background: #fff; }
.lieu-acces .ico { flex: none; width: 22px; height: 22px; color: var(--vif-fonce); }
.lieu-acces b { display: block; color: var(--encre); }
.lieu-acces small { color: var(--texte-doux); }
.lieu-conditions { display: flex; gap: 8px; align-items: flex-start; color: var(--texte-doux); }
.lieu-conditions .ico { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.lieu-etat { font-weight: 800; }
.lieu-etat--ouvert .ico { color: var(--vif); }
section > .lieu-etat { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; color: var(--texte-doux); }
section > .lieu-etat--ouvert { color: var(--encre); }
section > .lieu-etat--ouvert .ico { color: var(--vif-fonce); }
.semaine__jour--aujourdhui > strong { color: var(--vif-fonce); }
.semaine__jour > strong small { display: block; font-family: var(--police); font-style: normal; font-weight: 600; font-size: .85rem; text-transform: none; color: var(--texte-doux); }
.semaine__motif { align-self: center; font-size: .88rem; color: var(--texte-doux); }
.lieu-periodes { list-style: none; margin: 0 0 16px; padding: 0; }
.lieu-periodes li { padding: 8px 0; border-bottom: 1px solid var(--bord); }
.lieu-periodes b { color: var(--encre); }
.lieu-periodes span { color: var(--texte-doux); }
.lieu-calendrier { margin: 16px 0; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 0 16px; }
.lieu-calendrier summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-weight: 800; color: var(--encre); cursor: pointer; }
.lieu-calendrier summary .ico { width: 18px; height: 18px; }
.lieu-calendrier[open] { padding-bottom: 16px; }
.lieu-confirme { margin: 0; font-size: .88rem; color: var(--texte-doux); }
/* calendrier du planning : mêmes classes que dans l'espace pro (bo.css). La couleur n'est pas seule : une fermeture est barrée, des horaires différents sont en gras */
.cal-lieu { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px 24px; }
.cal-lieu__mois { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; font-size: .82rem; align-self: start; }
.cal-lieu__mois caption { text-align: left; font-weight: 800; color: var(--encre); padding-bottom: 6px; }
.cal-lieu__mois th { font-size: .7rem; font-weight: 600; color: var(--texte-doux); padding: 2px 0; text-align: center; }
.cal-lieu__jour { padding: 0; text-align: center; border-radius: 4px; }
.cal-lieu__jour > span { display: block; line-height: 28px; }
.cal-lieu__jour--ouvert { background: #e4f4e8; color: #14532d; }
.cal-lieu__jour--repos { background: #eef0f3; color: #6b757e; }
.cal-lieu__jour--fermeture { background: #f9d3ce; color: #8a1c12; text-decoration: line-through; }
.cal-lieu__jour--horaires { background: #fde6bd; color: #6f4400; font-weight: 700; }
.cal-lieu__jour--ferie { background: #3b4653; color: #fff; }
.cal-lieu__jour--inconnu { background: repeating-linear-gradient(45deg, #fde6bd 0 4px, #fff 4px 8px); color: #6f4400; }
.cal-lieu__jour--passe { opacity: .4; }
.cal-lieu__jour--aujourdhui { box-shadow: inset 0 0 0 2px var(--encre); font-weight: 800; }
.cal-lieu__legende { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 16px; padding: 0; font-size: .82rem; color: var(--texte-doux); }
.cal-lieu__legende li { display: flex; align-items: center; gap: 6px; }
.cal-lieu__legende i { display: block; width: 16px; height: 16px; border-radius: 3px; }
.lieu-equip__titre { margin: 18px 0 8px; font-size: 1.05rem; }
.lieu-equip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lieu-equip li { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border: 1px solid var(--bord); border-radius: 999px; background: #fff; font-weight: 600; }
.lieu-equip .ico { width: 16px; height: 16px; color: var(--vif-fonce); }
/* Messagerie interne : fil d'une conversation */
.conv { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
.conv-message { max-width: 85%; padding: 14px 16px; border: 1px solid var(--bord); border-radius: var(--rayon); }
.conv-message--moi { justify-self: end; background: color-mix(in srgb, var(--vif) 10%, #fff); border-color: color-mix(in srgb, var(--vif) 35%, #fff); }
.conv-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; font-size: .86rem; color: var(--texte-doux); }
.conv-tete b { color: var(--encre); }
.conv-texte { margin: 6px 0 0; overflow-wrap: anywhere; }
.conv-texte p { margin: 0 0 8px; }
.conv-texte p:last-child { margin-bottom: 0; }
.conv-texte ul, .conv-texte ol { margin: 6px 0 8px; padding-left: 22px; }
.conv-formulaire textarea { width: 100%; border-color: var(--bord); }
.conv-signaler { margin: 14px 0 0; }
.conv-signaler button { padding: 0; border: 0; background: none; font: inherit; font-size: .86rem; color: var(--texte-doux); text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .conv-message { max-width: 100%; } }
.conv-editeur { display: grid; gap: 0; border: 2px solid var(--bord); border-radius: var(--rayon); background: #fff; }
.conv-editeur:focus-within { border-color: var(--vif); }
.conv-barre { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--bord); }
.conv-barre button { min-width: 36px; min-height: 36px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--encre); font: inherit; font-size: .88rem; cursor: pointer; }
.conv-barre button:hover { background: var(--bord); }
.conv-barre button[aria-pressed="true"] { background: var(--nuit); color: #fff; }
.conv-zone { min-height: 150px; padding: 12px 14px; overflow-wrap: anywhere; }
.conv-zone:focus { outline: 0; }
.conv-zone ul, .conv-zone ol { padding-left: 22px; }
.conv-lien { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--bord); }
.conv-lien[hidden] { display: none; }
.conv-lien input { flex: 1 1 220px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 6px; font: inherit; }
.conv-lien button { padding: 8px 12px; border: 1px solid var(--bord); border-radius: 6px; background: #fff; color: var(--encre); font: inherit; font-size: .88rem; cursor: pointer; }
.conv-lien .conv-lien-ok { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.conv-lien-erreur { flex-basis: 100%; color: #9b1c1c; font-size: .86rem; }
.conv-lien-erreur:empty { display: none; }
.conv-texte small { color: var(--texte-doux); }
.conv-texte .conv-fichiers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.conv-fichiers a { font-weight: 600; overflow-wrap: anywhere; }
.conv-fichiers small { color: var(--texte-doux); }
.conv-fichier-parti span { color: var(--texte-doux); text-decoration: line-through; overflow-wrap: anywhere; }
.conv-texte .conv-fichiers-prudence { margin: 8px 0 0; font-size: .82rem; color: var(--texte-doux); }
.conv-fichiers-champ { width: 100%; padding: 10px; border: 2px dashed var(--bord); border-radius: var(--rayon); background: #fff; }
.conv-fichiers-erreur { margin: 0; padding: 10px 12px; border-radius: var(--rayon); background: #fdecec; color: #9b1c1c; font-size: .88rem; }
.conv-fichiers-erreur[hidden] { display: none; }