/* Où voler (modules-pages/ou-voler.mjs, js/ou-voler.js) — préfixe ov-.
   Couleurs de la charte seulement : Klein #001CA8, Midnight #191970, noir d'aniline #120D16, White Smoke #F5F5F5,
   Cranberry #950714, rouge #F32837, blanc. Fond clair.
   Disposition (08/10/2026) : sur ordinateur (≥ 1000 px), colonne des filtres collante à gauche, carte et liste à droite,
   visibles ensemble ; au-dessous, les filtres passent dans un tiroir ouvert par la barre « Filtres » au-dessus de la carte. */
.ov { --ov-klein: #001CA8; --ov-minuit: #191970; --ov-noir: #120D16; --ov-fumee: #F5F5F5; --ov-cranberry: #950714; --ov-rouge: #F32837;
  --ov-filet: rgba(18, 13, 22, .12); --ov-filet-fort: rgba(18, 13, 22, .22); --ov-doux: rgba(18, 13, 22, .66);
  --ov-haut: 5.6rem;                                   /* sous l'en-tête collant du site */
  --ov-carte-h: clamp(24rem, 62vh, 36rem);
  color: var(--ov-noir); background: #fff; }
.ov *, .ov *::before, .ov *::after { box-sizing: border-box; }
.ov .v6-zone > * { min-width: 0; }
.ov-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ov-ico { width: 1.15em; height: 1.15em; flex: none; }

/* ── Recherche (tout en haut) ── */
.ov-tete { background: var(--ov-fumee); padding: clamp(1.1rem, 2.4vw, 1.6rem) 0 clamp(.9rem, 2vw, 1.2rem); border-bottom: 1px solid var(--ov-filet); }
.ov-recherche { display: grid; gap: .5rem; }
/* Renvoi vers BASULM (12/10/2026 : plus de terrains sur la carte) : une ligne sobre sous la recherche */
.ov-basulm { margin: .7rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--ov-doux); }
.ov-basulm a { color: var(--ov-klein); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.ov-basulm a:hover, .ov-basulm a:focus-visible { color: var(--ov-minuit); }
.ov-lib { font: 700 .74rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-klein); }
.ov-recherche-ligne { display: flex; gap: .6rem; align-items: stretch; }
.ov-champ { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ov-filet-fort); transition: box-shadow .2s; }
.ov-champ:focus-within { box-shadow: inset 0 0 0 2px var(--ov-klein), 0 0 0 4px rgba(0, 28, 168, .12); }
.ov-champ > .ov-ico { position: absolute; left: 1.05rem; color: var(--ov-klein); pointer-events: none; }
.ov-champ input { width: 100%; min-width: 0; min-height: 3.2rem; padding: .7rem 1.2rem .7rem 2.9rem; border: 0; background: transparent; font: 500 1.06rem var(--police-ui); color: var(--ov-noir); border-radius: 999px; outline: none; }
.ov-champ input::placeholder { color: rgba(18, 13, 22, .5); }
.ov-champ input::-webkit-search-cancel-button { cursor: pointer; }
.ov-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.9rem; padding: .55rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: #fff; color: var(--ov-klein); font: 700 .92rem var(--police-ui); box-shadow: inset 0 0 0 1.5px var(--ov-klein); white-space: nowrap; transition: background-color .2s, color .2s; }
.ov-bouton:hover, .ov-bouton:focus-visible { background: var(--ov-klein); color: #fff; }
.ov-bouton:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; }
.ov-bouton-plein { background: var(--ov-klein); color: #fff; }
.ov-bouton-plein:hover, .ov-bouton-plein:focus-visible { background: var(--ov-minuit); box-shadow: inset 0 0 0 1.5px var(--ov-minuit); }
.ov-recherche-ligne .ov-bouton { min-height: 3.2rem; padding-inline: 1.3rem; }
.ov-lien-bouton { border: 0; padding: 0; background: none; cursor: pointer; color: var(--ov-klein); font: 600 .92rem var(--police-ui); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-align: left; }
.ov-lien-bouton:hover { color: var(--ov-minuit); }
.ov-lien-bouton:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; border-radius: 2px; }

/* suggestions */
.ov-sugg { position: absolute; z-index: 1200; top: calc(100% + .4rem); left: 0; right: 0; max-height: min(26rem, 60vh); overflow: auto; margin: 0; padding: .4rem; list-style: none;
  background: #fff; border-radius: 1rem; box-shadow: 0 18px 40px rgba(18, 13, 22, .18), 0 0 0 1px var(--ov-filet); }
.ov-sugg-groupe { padding: .55rem .7rem .25rem; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-doux); }
.ov-sugg-choix { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .75rem; border-radius: .7rem; cursor: pointer; }
.ov-sugg-choix b { font: 600 .98rem var(--police-ui); color: var(--ov-noir); }
.ov-sugg-choix small { font-size: .8rem; color: var(--ov-doux); }
.ov-sugg-choix:hover, .ov-sugg-choix[aria-selected="true"] { background: var(--ov-fumee); }
.ov-sugg-choix[aria-selected="true"] b { color: var(--ov-klein); }
.ov-sugg-vide { padding: .7rem .75rem; font-size: .88rem; color: var(--ov-doux); }

.ov-autour { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .2rem; padding: .5rem .5rem .5rem 1rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ov-filet); width: fit-content; max-width: 100%; font-size: .95rem; }
.ov-autour[hidden] { display: none; }
.ov-autour b { color: var(--ov-klein); }
.ov-select { display: grid; gap: .3rem; min-width: 0; }
.ov-select > span { font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-doux); }
.ov-select select { width: 100%; min-height: 2.7rem; padding: .45rem 2.2rem .45rem .85rem; border: 0; border-radius: .8rem; background: #fff; color: var(--ov-noir); font: 500 .95rem var(--police-ui);
  box-shadow: inset 0 0 0 1px var(--ov-filet-fort); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001CA8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem; }
.ov-select select:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; }
.ov-select select.est-choisi { box-shadow: inset 0 0 0 2px var(--ov-klein); font-weight: 600; }
.ov-select-court select { min-height: 2.3rem; border-radius: 999px; }

/* ── L'outil : panneau des filtres + scène (carte, liste) ── */
.ov-corps { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(2.4rem, 5vw, 4rem); background: #fff; }
.ov-outil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.ov-scene { min-width: 0; scroll-margin-top: var(--ov-haut); }

/* Panneau : en-tête (tiroir), bilan, filtres, pied (tiroir) */
.ov-panneau { display: flex; flex-direction: column; min-width: 0; background: #fff; outline: none; }
.ov-panneau > * { flex: none; }
.ov-panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem .7rem 1.2rem; border-bottom: 1px solid var(--ov-filet); }
.ov-panneau-titre { display: flex; align-items: center; gap: .5rem; margin: 0; font: 700 1.1rem var(--police-ui); color: var(--ov-minuit); }
.ov-panneau-titre .ov-ico { color: var(--ov-klein); }
.ov-panneau-fermer { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; cursor: pointer; background: var(--ov-fumee); color: var(--ov-noir); }
.ov-panneau-fermer .ov-ico { width: 1.2rem; height: 1.2rem; }
.ov-panneau-fermer:hover, .ov-panneau-fermer:focus-visible { background: var(--ov-klein); color: #fff; outline: none; }
.ov-panneau-corps { display: grid; gap: 1.05rem; padding: 1rem 1.1rem 1.2rem; }
.ov-panneau-pied { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ov-filet); background: #fff; }
.ov-panneau-pied .ov-bouton { width: 100%; min-height: 3.1rem; font-size: 1rem; }

/* Bilan : le nombre de résultats, mis à jour en direct */
.ov-bilan { position: sticky; top: 0; z-index: 2; display: grid; gap: .2rem; padding: 1rem 1.15rem 1.05rem; background: var(--ov-klein); color: #fff; }
.ov-total { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .45rem; line-height: 1.05; }
.ov-total b { font: 700 2.3rem/1 var(--police-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; transform-origin: left center; }
.ov-total span { font: 600 1.05rem var(--police-ui); }
.ov-total-detail { margin: .1rem 0 0; font-size: .84rem; line-height: 1.4; color: rgba(255, 255, 255, .86); }
.ov-total-ou { display: flex; align-items: center; gap: .35rem; margin: .25rem 0 0; font: 600 .9rem var(--police-ui); color: rgba(255, 255, 255, .92); overflow-wrap: anywhere; }
.ov-total-ou .ov-ico { width: 1rem; height: 1rem; }
.ov-maj { animation: ov-maj .55s ease-out; }
@keyframes ov-maj { 0% { transform: scale(1.12); } 100% { transform: none; } }

/* Filtres actifs : pastilles retirables */
.ov-actifs { display: grid; gap: .45rem; justify-items: start; }
.ov-actifs[hidden] { display: none; }
.ov-groupe-titre { margin: 0; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-doux); }
.ov-pastilles { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ov-pastilles[hidden] { display: none; }
.ov-pastille { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; min-height: 2.1rem; padding: .25rem .45rem .25rem .75rem; border: 0; border-radius: 999px; cursor: pointer; text-align: left;
  background: var(--ov-klein); color: #fff; font: 600 .84rem/1.25 var(--police-ui); transition: background-color .2s; }
.ov-pastille > span { overflow-wrap: anywhere; }
.ov-pastille .ov-ico { width: 1rem; height: 1rem; padding: .1rem; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ov-pastille:hover, .ov-pastille:focus-visible { background: var(--ov-minuit); }
.ov-pastille:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; }

.ov-groupe { margin: 0; padding: 0; border: 0; min-width: 0; }
.ov-groupe legend { padding: 0; margin-bottom: .45rem; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-doux); }
.ov-selects { display: grid; gap: .75rem; }

/* Types : liste de bascules avec leur nombre (la pastille de couleur sert de légende) */
.ov-types { display: grid; gap: .3rem; }
.ov-type { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.45rem; padding: .35rem .75rem; border: 0; border-radius: .75rem; cursor: pointer; text-align: left;
  background: #fff; color: var(--ov-noir); font: 600 .92rem var(--police-ui); box-shadow: inset 0 0 0 1.5px var(--ov-klein); transition: background-color .2s, box-shadow .2s, color .2s; }
.ov-type small { margin-left: auto; font: 700 .8rem var(--police-ui); color: var(--ov-klein); font-variant-numeric: tabular-nums; }
.ov-type i { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.ov-type-club i { background: var(--ov-rouge); } .ov-type-ecole i { background: var(--ov-cranberry); } .ov-type-instructeur i { background: var(--ov-minuit); } .ov-type-terrain i { background: #fff; box-shadow: inset 0 0 0 3px var(--ov-klein); }
.ov-type[aria-pressed="false"] { background: var(--ov-fumee); color: var(--ov-doux); box-shadow: inset 0 0 0 1px var(--ov-filet); }
.ov-type[aria-pressed="false"] span { text-decoration: line-through; text-decoration-thickness: 1px; }
.ov-type[aria-pressed="false"] small { color: var(--ov-doux); }
.ov-type[aria-pressed="false"] i { background: rgba(18, 13, 22, .22); box-shadow: none; }   /* type masqué : gris neutre, pas de couleur atténuée */
.ov-type:hover { box-shadow: inset 0 0 0 2px var(--ov-klein); }
.ov-type:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; }

/* Groupes repliables (classe, services) */
.ov-repli { border-top: 1px solid var(--ov-filet); padding-top: .2rem; }
.ov-repli > summary { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; cursor: pointer; list-style: none; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-klein); }
.ov-repli > summary::-webkit-details-marker { display: none; }
.ov-repli > summary::after { content: ''; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.ov-repli[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ov-repli > summary:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; border-radius: 4px; }
.ov-repli[open] > summary { margin-bottom: .35rem; }
.ov-repli-nb, .ov-nb-filtres { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px; background: var(--ov-rouge); color: #fff; font: 700 .72rem var(--police-ui); letter-spacing: 0; }
.ov-repli-nb[hidden], .ov-nb-filtres[hidden] { display: none; }
.ov-puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.ov-puce { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: .3rem .8rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--ov-fumee); color: var(--ov-noir); font: 600 .86rem var(--police-ui); box-shadow: inset 0 0 0 1px var(--ov-filet); transition: background-color .2s, color .2s; }
.ov-puce[aria-pressed="true"] { background: var(--ov-klein); color: #fff; box-shadow: none; }
.ov-puce:hover { box-shadow: inset 0 0 0 1.5px var(--ov-klein); }
.ov-puce:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; }
.ov-note-filtres { margin: .6rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ov-doux); }

/* Barre du téléphone et de la tablette (au-dessus de la carte) */
.ov-barre { display: flex; align-items: center; gap: .8rem; margin: 0 0 .7rem; }
.ov-bouton-filtres { flex: none; min-height: 2.9rem; }
.ov-bouton-filtres .ov-nb-filtres { margin-left: .1rem; }
.ov-bouton-filtres:hover .ov-nb-filtres, .ov-bouton-filtres:focus-visible .ov-nb-filtres { box-shadow: 0 0 0 2px #fff; }
.ov-barre-total { display: grid; gap: .05rem; min-width: 0; margin: 0; line-height: 1.2; }
.ov-barre-nb { font: 600 .98rem var(--police-ui); color: var(--ov-minuit); }
.ov-barre-nb b { font: 700 1.25rem var(--police-display); color: var(--ov-klein); font-variant-numeric: tabular-nums; }
.ov-barre-total small { font-size: .82rem; color: var(--ov-doux); overflow-wrap: anywhere; }
.ov-barre-pastilles { margin: 0 0 .75rem; }

/* ── Carte et liste ── */
.ov-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ov-carte-bloc { min-width: 0; }
.ov-carte { position: relative; height: var(--ov-carte-h); border-radius: 1.2rem; overflow: hidden; background: var(--ov-fumee); box-shadow: inset 0 0 0 1px var(--ov-filet); z-index: 0; }
.ov-carte-attente { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; text-align: center; color: var(--ov-doux); font-size: .95rem; }

/* repères : la forme est dessinée par ::before (Leaflet place l'élément lui-même par transform) */
.ov-pt { position: relative; display: inline-block; flex: none; width: .95rem; height: .95rem; }
.ov-pt::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ov-klein); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(18, 13, 22, .35); }
.ov-pt-aerodrome::before { background: var(--ov-minuit); border-radius: 3px; }
.ov-pt-montagne::before { background: var(--ov-noir); border-radius: 2px; transform: rotate(45deg) scale(.82); }
.ov-pt-hydro::before { background: #fff; box-shadow: inset 0 0 0 3px var(--ov-klein), 0 0 0 2px #fff, 0 1px 3px rgba(18, 13, 22, .35); }
.ov-pt-para::before { background: var(--ov-klein); box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--ov-klein); }
.ov-pt-club, .ov-pt-ecole, .ov-pt-instructeur { width: 1.15rem; height: 1.15rem; }
.ov-pt-club::before, .ov-pt-ecole::before, .ov-pt-instructeur::before { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.9); }
.ov-pt-club::before { background: var(--ov-rouge); } .ov-pt-ecole::before { background: var(--ov-cranberry); } .ov-pt-instructeur::before { background: var(--ov-minuit); }
/* Sur la carte, le repère reste placé par Leaflet (position absolue) : cette feuille est lue après celle de Leaflet, et
   « .ov-pt { position: relative } » décalait chaque repère de sa place dans le flux (corrigé le 08/10/2026). */
.ov .leaflet-marker-icon.ov-repere { position: absolute; cursor: pointer; }
.ov-repere.ov-pt:hover::before, .ov-repere.est-choisi::before { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ov-rouge); }
.ov-repere.est-choisi { z-index: 1000 !important; }
.ov-grappe { display: grid; place-items: center; border-radius: 50%; background: rgba(0, 28, 168, .88); color: #fff; font: 700 .85rem var(--police-ui); box-shadow: 0 0 0 4px rgba(0, 28, 168, .22); }
/* Accueil (09/10) : leaflet.min.css y est chargé après cette feuille et remettait display:block → chiffres dans le coin. */
.leaflet-marker-icon.ov-grappe { display: grid; place-items: center; }
.leaflet-marker-icon.ov-grappe span { display: block; line-height: 1; }
.ov-grappe.est-moyenne { background: rgba(25, 25, 112, .92); }
.ov-grappe.est-grande { background: var(--ov-minuit); box-shadow: 0 0 0 6px rgba(25, 25, 112, .22); }
/* Grappe qui contient un club ou une école : rouge, quelle que soit sa taille (js/ou-voler-filtre.js, classeGrappe). Jusqu'au
   12/10/2026, « .ov-grappe.est-moyenne » et « .ov-grappe.est-grande » (deux classes) l'emportaient sur « .ov-grappe-clubs » :
   au-delà de dix lieux, une grappe de clubs redevenait bleue — « seulement Clubs : des points bleus », signalé par la fédération. */
.ov-grappe.ov-grappe-clubs { background: rgba(243, 40, 55, .92); box-shadow: 0 0 0 4px rgba(243, 40, 55, .25); }
.ov-grappe.ov-grappe-clubs.est-moyenne, .ov-grappe.ov-grappe-clubs.est-grande { background: var(--ov-rouge); }
.ov-grappe.ov-grappe-clubs.est-grande { box-shadow: 0 0 0 6px rgba(243, 40, 55, .25); }
.ov .leaflet-container { font: inherit; }
.ov .leaflet-control-zoom a { color: var(--ov-klein); }

/* Fenêtre d'un lieu sur la carte (popup Leaflet) */
.ov .leaflet-popup-content-wrapper { border-radius: 1rem; box-shadow: 0 14px 36px rgba(18, 13, 22, .22); }
.ov .leaflet-popup-content { margin: .95rem 1rem .9rem; font: 400 .9rem/1.4 var(--police-ui); color: var(--ov-noir); }
.ov .leaflet-container a.leaflet-popup-close-button { top: .35rem; right: .35rem; width: 1.9rem; height: 1.9rem; font: 400 1.35rem/1.9rem var(--police-ui); color: var(--ov-doux); border-radius: 50%; }
.ov .leaflet-container a.leaflet-popup-close-button:hover { background: var(--ov-fumee); color: var(--ov-noir); }
.ov-fen { display: grid; gap: .4rem; min-width: 0; }
.ov .leaflet-popup-content .ov-fen p { margin: 0; }
.ov-fen-sur { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .45rem; margin: 0 1.4rem 0 0; font: 700 .66rem var(--police-instru); letter-spacing: .1em; text-transform: uppercase; color: var(--ov-klein); }
.ov-fen-sur .ov-pt { width: .7rem; height: .7rem; }
.ov-fen-code { font: 700 .76rem var(--police-ui); letter-spacing: .04em; padding: .05rem .4rem; border-radius: .35rem; background: var(--ov-fumee); color: var(--ov-minuit); }
.ov-fen-nom { margin: 0 1.2rem 0 0; font: 700 1.06rem/1.25 var(--police-display); color: var(--ov-minuit); overflow-wrap: anywhere; }
.ov-fen .ov-acces { margin: 0; justify-self: start; font-size: .74rem; padding: .15rem .55rem; }
.ov-fen-lignes { display: grid; gap: .28rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.ov-fen-lignes li { display: flex; align-items: flex-start; gap: .45rem; min-width: 0; font-size: .86rem; line-height: 1.35; }
.ov-fen-lignes .ov-ico { width: 1rem; height: 1rem; margin-top: .05rem; color: var(--ov-klein); }
.ov-fen-lignes a { color: var(--ov-klein); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.ov-fen-gps { font-variant-numeric: tabular-nums; }
.ov-fen-liens { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 0; }
.ov-fen-liens .ov-bouton { min-height: 2.3rem; padding: .35rem .8rem; font-size: .82rem; }
.ov-fen-liens .ov-bouton-plein { color: #fff; }

/* Légende et encarts d'outre-mer */
.ov-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .82rem; color: var(--ov-doux); }
.ov-legende li { display: inline-flex; align-items: center; gap: .45rem; }
.ov-legende .ov-pt { width: .8rem; height: .8rem; }
.ov-legende .ov-pt-club, .ov-legende .ov-pt-ecole, .ov-legende .ov-pt-instructeur { width: .9rem; height: .9rem; }
/* Les deux couleurs d'une grappe, dans la légende : bleue (terrains, instructeurs), rouge dès qu'elle contient un club ou une école */
.ov-legende .ov-pt-grappe { width: .95rem; height: .95rem; }
.ov-pt-grappe::before { background: rgba(0, 28, 168, .88); box-shadow: 0 0 0 3px rgba(0, 28, 168, .22); }
.ov-pt-grappe-clubs::before { background: rgba(243, 40, 55, .92); box-shadow: 0 0 0 3px rgba(243, 40, 55, .25); }
.ov-om { margin-top: 1rem; }
.ov-om-titre { margin: 0 0 .5rem; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-doux); }
.ov-om-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .55rem; }
.ov-encart { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; padding: .35rem .35rem .55rem; border: 0; border-radius: .9rem; cursor: pointer; text-align: left; background: var(--ov-fumee); color: var(--ov-noir); box-shadow: inset 0 0 0 1px var(--ov-filet); font-family: var(--police-ui); transition: box-shadow .2s; }
.ov-encart:hover, .ov-encart:focus-visible { box-shadow: inset 0 0 0 2px var(--ov-klein); outline: none; }
.ov-encart-carte { display: block; height: 5rem; border-radius: .6rem; overflow: hidden; background: #fff; pointer-events: none; }
.ov-encart b { padding: .25rem .25rem 0; font-size: .86rem; line-height: 1.2; }
.ov-encart small { padding: 0 .25rem; font-size: .76rem; color: var(--ov-doux); }
.ov-encart-metro { justify-content: center; background: var(--ov-klein); color: #fff; min-height: 7rem; }
.ov-encart-metro small { color: rgba(255, 255, 255, .8); }
.ov-encart-metro[hidden] { display: none; }

/* Colonne : information, fiche et liste */
.ov-cote { position: relative; display: grid; gap: .9rem; min-width: 0; align-content: start; }   /* position : les textes masqués (.ov-cache) restent dans la colonne qui défile, sinon ils allongeaient la page sous le pied */
.ov-info { border-radius: .9rem; background: var(--ov-fumee); box-shadow: inset 0 0 0 1px var(--ov-filet); font-size: .86rem; line-height: 1.45; }
.ov-info > summary { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem .85rem; cursor: pointer; list-style: none; color: rgba(18, 13, 22, .8); }
.ov-info > summary::-webkit-details-marker { display: none; }
.ov-info > summary:focus-visible { outline: 2px solid var(--ov-klein); outline-offset: 2px; border-radius: .9rem; }
.ov-info-ico { width: 1.05rem; height: 1.05rem; margin-top: .1rem; color: var(--ov-klein); }
.ov-info-texte b { color: var(--ov-klein); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.ov-info[open] .ov-info-texte b { text-decoration: none; }
.ov-annuaire { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; padding: 0 .85rem .85rem 2.45rem; }
.ov-annuaire .ov-select { flex: 1 1 100%; }
.ov-annuaire .ov-bouton { flex: 1 1 auto; min-height: 2.5rem; font-size: .86rem; }

.ov-liste-titre { margin: 0 0 .5rem; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-doux); }
.ov-liste { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ov-item { border-radius: .9rem; background: #fff; box-shadow: inset 0 0 0 1px var(--ov-filet); transition: box-shadow .15s, background-color .15s; }
.ov-item:hover, .ov-item:focus-within { box-shadow: inset 0 0 0 2px var(--ov-klein); }
.ov-item.est-choisi { background: var(--ov-fumee); box-shadow: inset 0 0 0 2px var(--ov-klein); }
.ov-item-affilie { box-shadow: inset 0 0 0 1px rgba(243, 40, 55, .45); }
.ov-item-bouton { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .85rem; border: 0; border-radius: .9rem; cursor: pointer; text-align: left; background: transparent; color: var(--ov-noir); font-family: var(--police-ui); }
.ov-item-bouton:focus-visible { outline: none; }
.ov-item-texte { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1 1 auto; }
.ov-item-texte b { font-size: .98rem; line-height: 1.25; overflow-wrap: anywhere; }
.ov-item-texte small { font-size: .8rem; line-height: 1.35; color: var(--ov-doux); }
.ov-item-dist { display: flex; flex-direction: column; align-items: flex-end; flex: none; font: 700 .9rem var(--police-ui); color: var(--ov-klein); }
.ov-item-dist small { font: 600 .7rem var(--police-instru); letter-spacing: .06em; color: var(--ov-doux); }
.ov-item-contact { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: -.3rem 0 0; padding: 0 .85rem .65rem 2.55rem; font-size: .8rem; line-height: 1.3; }
.ov-item-contact a { display: inline-flex; align-items: center; gap: .3rem; color: var(--ov-klein); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.ov-item-contact .ov-ico { width: .9rem; height: .9rem; }
.ov-liste-vide { margin: 0; padding: 1rem; border-radius: .9rem; background: var(--ov-fumee); line-height: 1.5; color: rgba(18, 13, 22, .8); }
.ov-plus { margin: .6rem 0 0; }
.ov-plus .ov-bouton { width: 100%; }
.ov-plus .ov-bouton[hidden] { display: none; }

.ov-fiche { position: relative; padding: 1.2rem 1.2rem 1.1rem; border-radius: 1.2rem; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ov-klein), 0 10px 30px rgba(0, 28, 168, .08); outline: none; scroll-margin-top: var(--ov-haut); }
.ov-fiche[hidden] { display: none; }
.ov-fiche-fermer { position: absolute; top: .6rem; right: .6rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; cursor: pointer; background: var(--ov-fumee); color: var(--ov-noir); font: 400 1.5rem/1 var(--police-ui); }
.ov-fiche-fermer:hover, .ov-fiche-fermer:focus-visible { background: var(--ov-klein); color: #fff; }
.ov-fiche-sur { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .55rem; margin: 0 2.6rem .35rem 0; font: 700 .7rem var(--police-instru); letter-spacing: .1em; text-transform: uppercase; color: var(--ov-klein); }
.ov-fiche-sur .ov-pt { width: .8rem; height: .8rem; }
.ov-fiche-nom { margin: 0 2.4rem .55rem 0; font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.2 var(--police-display); color: var(--ov-minuit); overflow-wrap: anywhere; }
.ov-acces { display: inline-block; margin: 0 0 .8rem; padding: .25rem .7rem; border-radius: 999px; font: 700 .8rem var(--police-ui); }
.ov-acces.est-libre { background: var(--ov-klein); color: #fff; }
.ov-acces.est-autorisation { background: #fff; color: var(--ov-cranberry); box-shadow: inset 0 0 0 1.5px var(--ov-cranberry); }
.ov-acces.est-prive { background: var(--ov-noir); color: #fff; }
.ov-acces.est-label { background: var(--ov-cranberry); color: #fff; }
.ov-faits { display: grid; gap: 0; margin: 0 0 .6rem; }
.ov-faits > div { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--ov-filet); }
.ov-faits dt { font: 700 .68rem/1.6 var(--police-instru); letter-spacing: .1em; text-transform: uppercase; color: var(--ov-doux); }
.ov-faits dd { margin: 0; font-size: .94rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.ov-contact { color: var(--ov-klein); font-weight: 600; text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.ov-fiche-inter { margin: .9rem 0 .35rem; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-cranberry); }
.ov-texte-libre p { margin: 0 0 .55rem; font-size: .92rem; line-height: 1.5; color: rgba(18, 13, 22, .86); overflow-wrap: anywhere; }
.ov-texte-libre a { color: var(--ov-klein); }
.ov-fiche-infos { margin-top: .7rem; }
.ov-fiche-infos summary { cursor: pointer; font: 700 .68rem var(--police-instru); letter-spacing: .12em; text-transform: uppercase; color: var(--ov-klein); padding: .3rem 0; }
.ov-fiche-infos[open] summary { margin-bottom: .35rem; }
.ov-fiche-affilies { margin: 0; padding-left: 1.1rem; }
/* Instructeurs (import Exalto) : dans la fenêtre et la fiche de leur structure */
.ov-fen-instr { margin: 0; font-size: .82rem; line-height: 1.4; color: rgba(18, 13, 22, .78); }
.ov-fen-instr b { color: var(--ov-minuit); }
/* Instructeur (annuaire public, 11/10/2026) : lieu sous le nom dans la fenêtre, liste de ses terrains dans la fiche */
.ov-fen-lieu { margin: 0; font-size: .8rem; line-height: 1.35; color: rgba(18, 13, 22, .62); overflow-wrap: anywhere; }
.ov-fiche-terrains { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.ov-fiche-terrains li { overflow-wrap: anywhere; }
.ov-fiche-terrains li > span[translate] { color: var(--ov-doux); font-size: .84rem; }
.ov-fiche-affilies li { margin: .1rem 0; }
.ov-fiche-classes { font-size: .8rem; color: rgba(18, 13, 22, .66); }
.ov-fiche-note .ov-contact { margin-right: .5rem; }
.ov-fiche-liens { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 .4rem; }
.ov-fiche-liens .ov-bouton { min-height: 2.6rem; padding: .45rem .95rem; font-size: .88rem; }
.ov-fiche-note { margin: .5rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--ov-doux); }

.ov-source { margin: 1.4rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--ov-doux); max-width: 62rem; }
.ov-source a, .ov-noscript a { color: var(--ov-klein); }
.ov-noscript { padding: 1rem 1.25rem; }

/* ── Ordinateur : colonne des filtres collante, carte et liste visibles ensemble ── */
@media (min-width: 1000px) {
  .ov { --ov-carte-h: clamp(26rem, calc(100vh - 7.6rem), 46rem); }
  .ov-outil { grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.25rem; }
  .ov-panneau { position: sticky; top: var(--ov-haut); max-height: calc(100vh - var(--ov-haut) - .9rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
    border-radius: 1.2rem; box-shadow: inset 0 0 0 1px var(--ov-filet); }
  .ov-panneau-tete, .ov-panneau-pied, .ov-voile, .ov-barre, .ov-barre-pastilles { display: none !important; }
  .ov-bilan { border-radius: 1.2rem 1.2rem 0 0; }
  .ov-cote { max-height: var(--ov-carte-h); overflow: auto; overscroll-behavior: contain; padding: 2px .25rem 2px 2px; scrollbar-width: thin; }
}
@media (min-width: 1200px) {
  .ov-outil { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1.5rem; }
  .ov-grille { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .ov { --ov-carte-h: clamp(24rem, calc(100vh - 9rem), 38rem); }
  .ov-cote { max-height: none; overflow: visible; padding: 0; }
}

/* ── Téléphone et tablette : les filtres dans un tiroir ── */
@media (max-width: 999px) {
  .ov-panneau { position: fixed; z-index: 10050; left: 0; right: 0; bottom: 0; max-height: 86vh; max-height: 86dvh; border-radius: 1.3rem 1.3rem 0 0;
    box-shadow: 0 -14px 40px rgba(18, 13, 22, .28); transform: translateY(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s; }
  .ov-panneau.est-ouvert { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .ov-panneau-corps { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .ov-bilan { display: none; }
  .ov-repli { border-top: 0; padding-top: 0; }
  .ov-voile { position: fixed; inset: 0; z-index: 10040; background: rgba(18, 13, 22, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
  .ov-tiroir-ouvert .ov-voile { opacity: 1; visibility: visible; transition: opacity .3s; }
  html.ov-tiroir-ouvert, html.ov-tiroir-ouvert body { overflow: hidden; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .ov-panneau { left: 50%; right: auto; width: min(34rem, 100%); transform: translate(-50%, 105%); }
  .ov-panneau.est-ouvert { transform: translate(-50%, 0); }
  .ov-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ov-recherche-ligne { flex-wrap: wrap; }
  .ov-champ { flex: 1 1 100%; }
  .ov-recherche-ligne .ov-bouton { flex: 1 1 0; min-height: 3rem; padding-inline: .8rem; }
  .ov-lib { font-size: .7rem; }
  .ov-om-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .ov-encart-carte { height: 4.2rem; }
  .ov-encart b { font-size: .8rem; }
  .ov-encart small { font-size: .7rem; }
  .ov-faits > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .ov-fiche { padding: 1rem .95rem .95rem; }
  .ov-autour { border-radius: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-panneau, .ov-panneau.est-ouvert, .ov-voile, .ov-tiroir-ouvert .ov-voile { transition: none; }
  .ov-maj { animation: none; }
}

/* ── Carte de l'accueil (construire.mjs carteAccueil, js/carte-accueil.js, 09/10/2026) : la même carte, sans les filtres
   complets — trois bascules, la légende et « Ouvrir la carte complète ». Fond de la section gardé (v6-papier-2). ── */
.ov.ov-ac { --ov-carte-h: clamp(22rem, 58vh, 34rem); background: none; margin-top: 2rem; }
.ov-ac-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin: 0 0 1rem; }
.ov-ac-types { display: flex; flex-wrap: wrap; gap: .5rem; }
.ov-ac-types .ov-type { width: auto; min-height: 2.6rem; padding: .4rem 1rem; border-radius: 999px; }
.ov-ac-types .ov-type[hidden] { display: none; }
.ov-ac-types .ov-type small:empty { display: none; }
.ov-ac .ov-carte { background: var(--ov-fumee); }
.ov-ac .ov-legende { margin-top: .9rem; }
@media (max-width: 560px) {
  .ov-ac-barre .v6-bouton { width: 100%; justify-content: center; }
  .ov-ac-types { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* quatre bascules : deux par ligne */
  .ov-ac-types .ov-type { justify-content: center; padding-inline: .6rem; }
  .ov-ac-types .ov-type small { margin-left: .2rem; }
}
/* Téléphone (demande d'Alexis du 11/10/2026) : la carte ne prend plus tout l'écran, la page reste facile à faire défiler
   (un doigt fait défiler la page, deux doigts déplacent la carte : window.FL_CARTE_TACTILE, js/site.js). svh : hauteur de
   l'écran barre d'adresse comprise, stable pendant le défilement sur Android et iPhone. */
/* Où voler sur téléphone (capture 133 d'Alexis, 11/10/2026 : recherche, filtres et carte « tassés ») : des espacements
   réguliers (1 rem entre les blocs, 0,75 rem dans un bloc), l'intitulé de la recherche sur une ligne lisible. */
@media (max-width: 760px) {
  .ov-tete { padding: 1.5rem 0 1.4rem; }
  .ov-recherche { gap: .75rem; }
  .ov-lib { line-height: 1.45; letter-spacing: .08em; }
  .ov-recherche-ligne { gap: .75rem; }
  .ov-autour { margin-top: .25rem; }
  .ov-corps { padding-top: 1.4rem; }
  .ov-barre { gap: 1rem; margin-bottom: 1rem; }
  .ov-barre-pastilles { margin-bottom: 1rem; }
  .ov-grille { gap: 1.5rem; }
  .ov-legende { margin-top: 1rem; row-gap: .5rem; }
  .ov-om { margin-top: 1.4rem; }
}
@media (max-width: 760px) {
  .ov.ov-ac { --ov-carte-h: clamp(16rem, 55vh, 26rem); --ov-carte-h: clamp(16rem, 55svh, 26rem); margin-top: 1.5rem; }
  .ov { --ov-carte-h: clamp(18rem, 58vh, 28rem); --ov-carte-h: clamp(18rem, 58svh, 28rem); }
}
