/* =========================================================
   GUIDESPORTIF — Identité visuelle
   Encre #0B1B33 / Orange énergie #FF5A1F / Fond #F5F7FB
   Chaque univers sport surcharge --sport (couleur du sport)
   ========================================================= */

:root{
  --ink: #0B1B33;
  --ink-2: #1B2B45;
  --txt: #3A4658;
  --gris: #6B7688;
  --ligne: #E4E8F0;
  --fond: #F5F7FB;
  --blanc: #fff;
  --orange: #FF5A1F;
  --orange-2: #FF8A3D;
  --vert: #16A34A;
  --sport: #FF5A1F;
  --sport-soft: rgba(255,90,31,.09);
  --r: 20px;
  --r-s: 12px;
  --ombre: 0 1px 2px rgba(11,27,51,.04), 0 12px 32px -12px rgba(11,27,51,.14);
  --ombre-h: 0 2px 4px rgba(11,27,51,.05), 0 24px 48px -16px rgba(11,27,51,.22);
  --f-titre: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-txt: 'Inter', system-ui, sans-serif;
}

html{ scroll-behavior: smooth; scroll-padding-top: 130px; }
body{ font-family: var(--f-txt); color: var(--txt); background: var(--blanc); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1,h2,h3,h4,h5{ font-family: var(--f-titre); color: var(--ink); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
a{ color: var(--ink); text-decoration: none; transition: color .2s; }
a:hover{ color: var(--orange); }
img{ max-width: 100%; }
.ico{ width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; }
.drapeau{ width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11,27,51,.08); flex-shrink: 0; }
.container{ max-width: 1240px; }

/* ---------- Boutons ---------- */
.btn-gs{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 100px; font-weight: 600; font-size: 15px; line-height: 1.2; border: 1.5px solid transparent; transition: all .25s; cursor: pointer; white-space: nowrap; }
.btn-gs .ico{ transition: transform .25s; }
.btn-gs:hover .ico:last-child{ transform: translateX(3px); }
.btn-gs-sm{ padding: 9px 18px; font-size: 14px; }
.btn-gs-dark{ background: var(--ink); color: #fff; }
.btn-gs-dark:hover{ background: var(--orange); color: #fff; }
.btn-gs-blanc{ background: #fff; color: var(--ink); }
.btn-gs-blanc:hover{ background: var(--ink); color: #fff; }
.btn-gs-sport{ background: var(--sport); color: #fff; }
.btn-gs-sport:hover{ background: var(--ink); color: #fff; }
.btn-gs-contour{ border-color: var(--ligne); color: var(--ink); background: #fff; }
.btn-gs-contour:hover{ border-color: var(--ink); color: var(--ink); }
.btn-gs-amazon{ background: #FFB547; color: var(--ink); }
.btn-gs-amazon:hover{ background: var(--ink); color: #fff; }
.lien-fleche{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.lien-fleche .ico{ transition: transform .25s; }
.lien-fleche:hover{ color: var(--orange); }
.lien-fleche:hover .ico{ transform: translateX(4px); }
.lien-etendu::after{ content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- Tags ---------- */
.tag{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--fond); color: var(--ink); }
.tag .ico-sport{ width: 14px; height: 14px; }
.tag-sport{ background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.tag-sport-plein{ background: var(--sport); color: #fff; padding: 6px 14px; margin-bottom: 18px; }
.tag-sport-blanc{ background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); }
.tag-blanc{ background: #fff; color: var(--ink); }
.tag-blanc-contour{ background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.tag-attente{ background: #FFF4E5; color: #B45309; }
.tag-live{ background: #DCFCE7; color: #15803D; }
.tag-live i{ width: 7px; height: 7px; border-radius: 50%; background: #16A34A; animation: pulse 1.6s infinite; }
.tag-type.type-jo{ background: #FEF3C7; color: #92400E; }
.tag-type.type-monde{ background: #E0E7FF; color: #3730A3; }
.tag-type.type-europe{ background: #DBEAFE; color: #1D4ED8; }
.tag-type.type-france{ background: #FCE7F3; color: #9D174D; }
.tag-type.type-circuit, .tag-type.type-coupe, .tag-type.type-championnat, .tag-type.type-course, .tag-type.type-chelem{ background: #F1F5F9; color: #334155; }
@keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 50%{ box-shadow: 0 0 0 5px rgba(22,163,74,0); } }

/* ---------- Header ---------- */
#header{ position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.88); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(228,232,240,.7); }
.header-inner{ display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo{ display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover{ color: var(--ink); }
.logo-mark{ width: 38px; height: 38px; transition: transform .4s cubic-bezier(.3,1.6,.6,1); }
.logo:hover .logo-mark{ transform: rotate(-12deg) scale(1.05); }
.logo-txt{ font-family: var(--f-titre); font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.logo-txt span{ color: var(--orange); }
.nav-principale{ display: flex; align-items: center; gap: 6px; }
.nav-lien{ padding: 9px 14px; border-radius: 100px; font-weight: 600; font-size: 15px; color: var(--ink); background: none; border: 0; }
.nav-lien:hover{ background: var(--fond); color: var(--ink); }
.nav-lien.actif{ background: var(--ink); color: #fff; }
.nav-principale .btn-gs{ margin-left: 8px; }
.nav-sports{ position: relative; }
.nav-sports-menu{ position: absolute; top: calc(100% + 10px); left: 0; width: 360px; background: #fff; border-radius: var(--r); box-shadow: var(--ombre-h); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; }
.nav-sports:hover .nav-sports-menu, .nav-sports.ouvert .nav-sports-menu{ opacity: 1; visibility: visible; transform: none; }
.nav-sports-menu a{ display: flex; gap: 12px; padding: 12px; border-radius: var(--r-s); align-items: center; }
.nav-sports-menu a:hover{ background: var(--fond); }
.nav-sports-menu small{ display: block; color: var(--gris); font-size: 13px; line-height: 1.35; }
.nsm-ico{ width: 42px; height: 42px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.nsm-ico svg{ width: 24px; height: 24px; }
.burger{ display: none; width: 44px; height: 44px; border: 0; background: var(--fond); border-radius: 12px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span{ width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .25s; }
body.menu-ouvert .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-ouvert .burger span:nth-child(2){ opacity: 0; }
body.menu-ouvert .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sous-navigation sport ---------- */
.subnav{ position: sticky; top: 76px; z-index: 900; background: #fff; border-bottom: 1px solid var(--ligne); }
.subnav-inner{ display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; height: 56px; align-items: center; }
.subnav-inner::-webkit-scrollbar{ display: none; }
.subnav-inner a{ display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 100px; font-weight: 600; font-size: 14px; color: var(--txt); white-space: nowrap; }
.subnav-inner a:hover{ background: var(--sport-soft); color: var(--sport); }
.subnav-inner a.actif{ background: var(--sport-soft); color: var(--sport); }
.subnav-inner .subnav-titre{ color: var(--ink); font-family: var(--f-titre); font-weight: 800; font-size: 16px; margin-right: 10px; padding-left: 0; }
.subnav-inner .subnav-titre:hover{ background: none; }
.subnav-titre .ico-sport{ width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--sport); color: #fff; }

/* ---------- Fil d'Ariane ---------- */
.ariane{ display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; padding: 22px 0 0; color: var(--gris); }
.ariane a{ color: var(--gris); }
.ariane a:hover{ color: var(--ink); }
.ariane .sep{ opacity: .5; }
.ariane [aria-current]{ color: var(--ink); font-weight: 500; }
.ariane-clair, .ariane-clair a, .ariane-clair [aria-current]{ color: rgba(255,255,255,.75); padding: 0 0 28px; }
.ariane-clair a:hover{ color: #fff; }

/* ---------- Sections ---------- */
.section{ padding: 90px 0; }
.section-serree{ padding: 44px 0 80px; }
.section-gris{ background: var(--fond); }
.section-sombre{ background: var(--ink); position: relative; overflow: hidden; }
.section-sombre::before{ content: ""; position: absolute; width: 700px; height: 700px; right: -200px; top: -300px; background: radial-gradient(circle, rgba(255,90,31,.25), transparent 65%); }
.section-sombre .titre-section h2{ color: #fff; }
.section-sombre .titre-section .lien-fleche{ color: #fff; }
.titre-section{ display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; position: relative; }
.titre-section h2{ font-size: clamp(26px, 3vw, 36px); margin: 0; }
.surtitre{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange); margin-bottom: 10px; }
.surtitre .ico, .surtitre .ico-sport{ width: 16px; height: 16px; }
.univers-judo .surtitre, .univers-hockey-sur-glace .surtitre{ color: var(--sport); }
.vide{ padding: 40px; text-align: center; border: 1.5px dashed var(--ligne); border-radius: var(--r); color: var(--gris); }

/* ---------- Hero accueil ---------- */
.hero{ position: relative; padding: 90px 0 110px; overflow: hidden; background: linear-gradient(180deg, #FBFCFE, #F2F5FA); }
.hero-deco .blob{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.hero-deco .b1{ width: 460px; height: 460px; background: #FFD2BF; top: -120px; right: 8%; animation: flotte 14s ease-in-out infinite; }
.hero-deco .b2{ width: 380px; height: 380px; background: #CFE7F7; bottom: -160px; left: -80px; animation: flotte 18s ease-in-out infinite reverse; }
.hero-deco .b3{ width: 260px; height: 260px; background: #F8D2D6; bottom: 10%; right: -60px; animation: flotte 16s ease-in-out infinite; }
@keyframes flotte{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(30px,-25px); } }
.hero-pastille{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 100px; background: #fff; box-shadow: var(--ombre); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 26px; }
.hero-pastille i{ width: 8px; height: 8px; border-radius: 50%; background: var(--vert); animation: pulse 1.6s infinite; }
.hero h1{ font-size: clamp(44px, 6.4vw, 84px); letter-spacing: -.045em; line-height: 1.02; margin-bottom: 24px; }
.texte-degrade{ background: linear-gradient(90deg, var(--orange), #E1306C, var(--orange-2), var(--orange)); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: degrade 6s linear infinite; }
@keyframes degrade{ to{ background-position: -250% 50%; } }
.hero-txt{ font-size: 19px; max-width: 580px; margin-bottom: 32px; }
.hero-sports{ display: flex; flex-wrap: wrap; gap: 10px; }
.chip-sport{ display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 12px; border-radius: 100px; background: #fff; font-weight: 700; color: var(--ink); box-shadow: var(--ombre); transition: all .25s; }
.chip-sport .ico-sport, .chip-sport .ico{ width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--c, var(--ink)); color: #fff; }
.chip-sport:hover{ transform: translateY(-2px); box-shadow: var(--ombre-h); color: var(--ink); }
.chip-sport-cal{ --c: var(--ink); }
.hero-compteur{ position: relative; background: var(--ink); color: #fff; border-radius: 28px; padding: 30px; box-shadow: var(--ombre-h); overflow: hidden; }
.hero-compteur::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--c) 70%, transparent), transparent 60%); opacity: .9; }
.hero-compteur > *{ position: relative; }
.hc-haut{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hero-compteur .surtitre{ color: #fff; opacity: .8; margin: 0; }
.hero-compteur h2{ color: #fff; font-size: 27px; margin: 18px 0 12px; }
.hc-infos, .cu-infos, .ec-infos{ display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.hc-infos span, .cu-infos span, .ec-infos span{ display: inline-flex; align-items: center; gap: 7px; }
.compteur{ display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 24px 0; }
.compteur div{ background: rgba(255,255,255,.1); border-radius: 14px; padding: 12px 4px; text-align: center; }
.compteur strong{ display: block; font-family: var(--f-titre); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.compteur span{ font-size: 12px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.compteur-clair div{ background: var(--fond); }
.compteur-clair strong{ color: var(--ink); }
.compteur-clair span{ color: var(--gris); opacity: 1; }

/* ---------- Cartes sport ---------- */
.carte-sport{ position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--ligne); color: var(--txt); transition: all .3s; overflow: hidden; }
.carte-sport::after{ content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); transition: transform .5s; }
.carte-sport:hover{ transform: translateY(-4px); box-shadow: var(--ombre-h); border-color: transparent; color: var(--txt); }
.carte-sport:hover::after{ transform: scale(1.4); }
.cs-ico{ width: 60px; height: 60px; border-radius: 18px; background: var(--c); color: #fff; display: grid; place-items: center; margin-bottom: 22px; position: relative; z-index: 1; }
.cs-ico svg{ width: 34px; height: 34px; }
.cs-nom{ font-family: var(--f-titre); font-weight: 800; font-size: 26px; color: var(--ink); margin-bottom: 6px; }
.cs-txt{ margin-bottom: 22px; flex-grow: 1; }
.cs-stats{ display: flex; flex-wrap: wrap; gap: 8px; }
.cs-stats span{ font-size: 13px; padding: 5px 11px; border-radius: 100px; background: var(--fond); }
.cs-stats strong{ color: var(--ink); }
.cs-fleche{ position: absolute; top: 30px; right: 30px; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; z-index: 1; transition: all .3s; }
.carte-sport:hover .cs-fleche{ background: var(--c); transform: rotate(-45deg); }
.carte-sport-bientot{ --c: var(--gris); background: var(--fond); border-style: dashed; }
.carte-sport-bientot:hover{ transform: none; box-shadow: none; border-color: var(--ligne); }

/* ---------- Carte "à la une" ---------- */
.carte-une{ position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.8); transition: all .3s; overflow: hidden; }
.carte-une::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.carte-une:hover{ background: rgba(255,255,255,.1); transform: translateY(-4px); }
.carte-une h3{ font-size: 21px; margin: 20px 0 12px; }
.carte-une h3 a{ color: #fff; }
.cu-haut{ display: flex; justify-content: space-between; align-items: flex-start; }
.cu-infos{ font-size: 14px; flex-direction: column; gap: 6px; flex-grow: 1; }
.cu-bas{ display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.cu-jours{ font-family: var(--f-titre); font-weight: 800; font-size: 22px; color: #fff; }
.cu-live{ color: #4ADE80; }
.cu-na{ font-size: 14px; opacity: .6; font-weight: 600; }
.cu-lien{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; font-size: 14px; }
/* carte une sur fond clair */
.section:not(.section-sombre) .carte-une{ background: #fff; border-color: var(--ligne); color: var(--txt); }
.section:not(.section-sombre) .carte-une:hover{ box-shadow: var(--ombre-h); }
.section:not(.section-sombre) .carte-une h3 a, .section:not(.section-sombre) .cu-jours, .section:not(.section-sombre) .cu-lien{ color: var(--ink); }
.section:not(.section-sombre) .cu-bas{ border-color: var(--ligne); }
.section:not(.section-sombre) .carte-une .tag-sport-blanc{ background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.section:not(.section-sombre) .cu-live{ color: var(--vert); }

/* Pastille compétition (logo ou généré) */
.comp-badge{ width: 64px; height: 64px; border-radius: 18px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: var(--c); color: #fff; line-height: 1; flex-shrink: 0; position: relative; overflow: hidden; }
.comp-badge::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.25), transparent 55%); }
.comp-badge small{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.comp-badge strong{ font-family: var(--f-titre); font-size: 19px; margin-top: 3px; }
.comp-badge.type-jo{ background: linear-gradient(135deg, #F5B700, #D97706); }
.comp-badge.has-logo{ background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.comp-badge.has-logo img{ max-width: 80%; max-height: 80%; object-fit: contain; }

/* ---------- Carte compétition (liste) ---------- */
.liste-comp{ display: flex; flex-direction: column; gap: 12px; }
.carte-comp{ position: relative; display: flex; align-items: center; gap: 20px; padding: 16px 20px 16px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--ligne); transition: all .25s; }
.carte-comp:hover{ border-color: transparent; box-shadow: var(--ombre-h); transform: translateX(3px); }
.cc-date{ width: 70px; height: 76px; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1.05; }
.cc-jour{ font-family: var(--f-titre); font-weight: 800; font-size: 26px; }
.cc-jour-na{ opacity: .6; }
.cc-mois{ font-size: 13px; font-weight: 700; text-transform: uppercase; }
.cc-annee{ font-size: 11px; opacity: .7; font-weight: 600; }
.cc-corps{ flex-grow: 1; min-width: 0; }
.cc-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cc-titre{ font-size: 18px; margin: 0 0 5px; }
.cc-titre a{ color: var(--ink); }
.cc-infos{ display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--gris); }
.cc-infos span{ display: inline-flex; align-items: center; gap: 6px; }
.cc-fleche{ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fond); color: var(--ink); flex-shrink: 0; transition: all .25s; }
.carte-comp:hover .cc-fleche{ background: var(--c); color: #fff; }
.statut-termine{ opacity: .65; }

/* ---------- Lectures accueil ---------- */
.liste-lecture{ display: flex; flex-direction: column; gap: 10px; }
.lecture{ display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: var(--fond); transition: all .25s; }
.lecture:hover{ background: #fff; box-shadow: var(--ombre-h); color: var(--ink); }
.lecture-ico{ width: 46px; height: 46px; border-radius: 14px; background: var(--c); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.lecture small{ display: block; color: var(--gris); font-size: 13px; }
.lecture strong{ font-family: var(--f-titre); color: var(--ink); line-height: 1.3; display: block; }

/* ---------- Méthode ---------- */
.section-methode{ padding-top: 0; }
.methode{ background: var(--fond); border-radius: 32px; padding: 50px; }
.methode h2{ font-size: 30px; margin-bottom: 18px; }
.methode-item{ background: #fff; border-radius: var(--r); padding: 24px; height: 100%; }
.methode-item .ico{ width: 30px; height: 30px; color: var(--orange); margin-bottom: 14px; }
.methode-item strong{ display: block; font-family: var(--f-titre); color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.methode-item p{ margin: 0; font-size: 15px; }

/* ---------- Hero sport ---------- */
.hero-sport{ position: relative; padding: 34px 0 120px; background: var(--sport); color: rgba(255,255,255,.9); overflow: hidden; }
.hero-sport::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(11,27,51,.55), transparent 55%), radial-gradient(circle at 85% 20%, rgba(255,255,255,.2), transparent 45%); }
.hs-motif, .ec-motif{ position: absolute; right: -60px; bottom: -120px; opacity: .1; color: #fff; pointer-events: none; }
.hs-ico-geant{ width: 520px; height: 520px; stroke-width: 1; }
.hs-ico{ width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.18); display: grid; place-items: center; margin-bottom: 20px; backdrop-filter: blur(4px); }
.hs-ico svg{ width: 38px; height: 38px; color: #fff; }
.hero-sport h1{ color: #fff; font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -.04em; margin-bottom: 18px; }
.hero-sport h1 span{ display: block; font-size: .42em; letter-spacing: -.02em; font-weight: 700; opacity: .85; margin-top: 8px; }
.hs-intro{ font-size: 17px; max-width: 700px; }
.hs-intro strong{ color: #fff; }
.chiffres{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chiffre{ background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 18px; backdrop-filter: blur(6px); }
.chiffre strong{ display: block; font-family: var(--f-titre); font-size: 28px; color: #fff; line-height: 1.1; }
.chiffre span{ font-size: 13px; line-height: 1.35; display: block; margin-top: 4px; }
.raccourcis{ margin-top: -90px; position: relative; z-index: 2; }
.raccourci{ display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: var(--r); background: #fff; box-shadow: var(--ombre); height: 100%; transition: all .25s; }
.raccourci .ico{ width: 30px; height: 30px; color: var(--sport); margin-bottom: 10px; }
.raccourci strong{ font-family: var(--f-titre); font-size: 18px; color: var(--ink); }
.raccourci span{ font-size: 14px; color: var(--gris); }
.raccourci:hover{ transform: translateY(-4px); box-shadow: var(--ombre-h); }
.page-sport .section-serree{ padding: 0 0 20px; }

/* ---------- En-têtes de pages ---------- */
.entete-page{ padding: 40px 0 36px; }
.entete-page h1{ font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -.035em; max-width: 900px; margin-bottom: 16px; }
.entete-txt{ font-size: 18px; max-width: 760px; margin: 0; }
.entete-txt .ico{ color: var(--sport); }

/* ---------- Fiche compétition ---------- */
.entete-comp{ position: relative; margin-top: 20px; padding: 56px 0; background: var(--ink); color: rgba(255,255,255,.85); overflow: hidden; }
.entete-comp::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0 100%, color-mix(in srgb, var(--sport) 55%, transparent), transparent 55%), radial-gradient(circle at 100% 0, color-mix(in srgb, var(--sport) 35%, transparent), transparent 45%); }
.ec-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.entete-comp h1{ color: #fff; font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.035em; margin-bottom: 16px; }
.ec-accroche{ font-size: 18px; max-width: 720px; margin-bottom: 22px; }
.ec-infos{ font-size: 16px; font-weight: 600; color: #fff; }
.ec-carte{ background: #fff; border-radius: 24px; padding: 26px; color: var(--txt); box-shadow: var(--ombre-h); }
.ec-carte .comp-badge{ --c: var(--sport); }
.ec-carte .compteur{ margin: 20px 0; }
.ec-attente{ display: flex; gap: 10px; font-size: 14px; background: #FFF4E5; color: #92400E; padding: 14px; border-radius: 14px; margin: 18px 0; }
.ec-boutons{ display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.h-bloc{ font-size: 26px; margin: 44px 0 18px; }
.h-bloc:first-child{ margin-top: 0; }
.fiche-infos{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; margin-bottom: 40px; }
.fiche-infos > div{ background: #fff; padding: 16px 20px; }
.fiche-infos dt{ display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.fiche-infos dt .ico{ color: var(--sport); width: 16px; height: 16px; }
.fiche-infos dd{ margin: 0; color: var(--ink); font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fiche-infos dd small{ font-weight: 400; color: var(--gris); }
.programme{ list-style: none; padding: 0; margin: 0; position: relative; }
.programme::before{ content: ""; position: absolute; left: 31px; top: 10px; bottom: 10px; width: 2px; background: var(--ligne); }
.programme li{ display: flex; gap: 20px; align-items: center; padding: 8px 0; position: relative; }
.pg-date{ width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 2px solid var(--sport); color: var(--sport); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; position: relative; }
.pg-date strong{ font-family: var(--f-titre); font-size: 22px; line-height: 1; }
.pg-txt{ color: var(--ink); font-weight: 600; }
.pg-txt small{ display: block; font-weight: 500; color: var(--gris); font-size: 13px; }
.programme li.passe{ opacity: .5; }
.carte-map{ border-radius: var(--r); background: var(--fond); min-height: 320px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; overflow: hidden; background-image: radial-gradient(var(--ligne) 1px, transparent 1px); background-size: 16px 16px; }
.carte-map small{ color: var(--gris); }
.carte-map iframe{ width: 100%; height: 380px; border: 0; }
.fiche-sources{ margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ligne); font-size: 14px; color: var(--gris); }
.fiche-sources p{ margin-bottom: 8px; }
.fiche-sources .ico{ width: 16px; height: 16px; margin-right: 4px; }
.fiche-sources a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Contenu riche (textes BDD) ---------- */
.contenu-riche{ font-size: 17px; line-height: 1.75; }
.contenu-riche h2{ font-size: 28px; margin: 44px 0 16px; }
.contenu-riche h2:first-child{ margin-top: 0; }
.contenu-riche h3{ font-size: 21px; margin: 30px 0 12px; }
.contenu-riche p{ margin-bottom: 18px; }
.contenu-riche strong{ color: var(--ink); }
.contenu-riche a{ color: var(--sport); text-decoration: underline; text-underline-offset: 3px; }
.contenu-riche ul, .contenu-riche ol{ padding-left: 0; margin-bottom: 22px; list-style: none; counter-reset: li; }
.contenu-riche ul li, .contenu-riche ol li{ position: relative; padding-left: 30px; margin-bottom: 10px; }
.contenu-riche ul li::before{ content: ""; position: absolute; left: 6px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--sport); }
.contenu-riche ol li{ counter-increment: li; }
.contenu-riche ol li::before{ content: counter(li); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--sport-soft); color: var(--sport); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.contenu-riche .encadre{ background: var(--sport-soft); border-left: 4px solid var(--sport); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 20px 24px; margin: 26px 0; }
.contenu-riche .encadre p:last-child{ margin: 0; }

/* ---------- Articles ---------- */
.entete-article{ padding-bottom: 20px; }
.chapo{ font-size: 20px; line-height: 1.55; color: var(--ink-2); margin-bottom: 24px; }
.article-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 14px; color: var(--gris); padding-top: 20px; border-top: 1px solid var(--ligne); }
.article-meta > span{ display: inline-flex; align-items: center; gap: 7px; }
.auteur-av{ width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; font-family: var(--f-titre); }
.auteur a{ color: var(--ink); font-weight: 600; }
.article-visuel{ border-radius: var(--r); margin-bottom: 30px; width: 100%; }
.sommaire{ background: var(--fond); border-radius: var(--r); padding: 22px 24px; margin-bottom: 24px; }
.sommaire ol{ padding-left: 18px; margin: 0; font-size: 15px; }
.sommaire li{ margin-bottom: 6px; }
.sommaire a{ color: var(--txt); }
.sommaire a:hover, .sommaire a.actif{ color: var(--sport); }
.sommaire a.actif{ font-weight: 600; }
.carte-contenu{ position: relative; height: 100%; border-radius: var(--r); background: #fff; border: 1px solid var(--ligne); overflow: hidden; transition: all .3s; display: flex; flex-direction: column; }
.carte-contenu:hover{ transform: translateY(-4px); box-shadow: var(--ombre-h); border-color: transparent; }
.ct-visuel{ position: relative; aspect-ratio: 16/9; background: var(--c); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ct-visuel img{ width: 100%; height: 100%; object-fit: cover; }
.ct-visuel-motif{ background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #0B1B33)); color: rgba(255,255,255,.9); }
.ct-visuel-motif::before{ content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.15) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.ct-ico{ width: 84px; height: 84px; stroke-width: 1.3; position: relative; transition: transform .5s; }
.ct-visuel-motif .ico{ width: 40px; height: 40px; margin-left: -18px; margin-top: 40px; position: relative; }
.carte-contenu:hover .ct-ico{ transform: scale(1.1) rotate(-6deg); }
.ct-visuel .tag{ position: absolute; left: 16px; top: 16px; }
.ct-corps{ padding: 22px; display: flex; flex-direction: column; flex-grow: 1; }
.ct-corps h3{ font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.ct-corps h3 a{ color: var(--ink); }
.ct-corps p{ font-size: 15px; flex-grow: 1; }
.ct-meta{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); font-weight: 500; }

/* ---------- Guides / produits ---------- */
.selection{ background: var(--fond); border-radius: 26px; padding: 30px; margin: 40px 0; }
.selection-entete h2{ font-size: 24px; margin: 0 0 22px !important; }
.produit{ position: relative; background: #fff; border-radius: var(--r); padding: 22px; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--ligne); }
.produit-badge{ align-self: flex-start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 100px; background: var(--sport); color: #fff; margin-bottom: 12px; }
.produit h3{ font-size: 18px !important; margin: 0 0 8px !important; }
.produit p{ font-size: 15px; margin-bottom: 12px; }
.contenu-riche .points-forts{ margin-bottom: 16px; flex-grow: 1; }
.contenu-riche .points-forts li{ padding-left: 26px; font-size: 14px; margin-bottom: 4px; }
.contenu-riche .points-forts li::before{ display: none; }
.points-forts .ico{ position: absolute; left: 0; top: 4px; color: var(--vert); width: 17px; height: 17px; }
.produit-bas{ display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--ligne); }
.produit-prix{ font-family: var(--f-titre); font-weight: 800; color: var(--ink); font-size: 18px; line-height: 1.2; }
.produit-prix small{ display: block; font-family: var(--f-txt); font-size: 11px; font-weight: 500; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.contenu-riche .produit-bas a{ color: var(--ink); text-decoration: none; }
.contenu-riche .produit-bas a:hover{ color: #fff; }
.mention-affil{ display: flex; gap: 8px; font-size: 13px; color: var(--gris); margin: 18px 0 0; line-height: 1.5; }

/* ---------- Aside / encarts ---------- */
.sticky-aside{ position: sticky; top: 150px; display: flex; flex-direction: column; gap: 20px; }
.page-accueil .sticky-aside, .page-calendrier .sticky-aside{ top: 100px; }
.encart{ display: block; background: var(--fond); border-radius: var(--r); padding: 24px; color: var(--txt); }
.encart p:last-child{ margin-bottom: 0; }
.encart-sport{ background: var(--sport-soft); }
.encart-lien{ display: flex; align-items: center; gap: 14px; transition: all .25s; }
.encart-lien:hover{ background: #fff; box-shadow: var(--ombre-h); color: var(--ink); }
.encart-lien small{ display: block; color: var(--gris); font-size: 13px; }
.encart-lien strong{ color: var(--ink); font-family: var(--f-titre); }
.encart-lien > span:nth-child(2){ flex-grow: 1; }
.encart-ico{ width: 46px; height: 46px; border-radius: 14px; background: var(--c); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.encart-guide{ background: var(--ink); color: rgba(255,255,255,.8); }
.encart-guide strong{ display: block; color: #fff; font-family: var(--f-titre); font-size: 19px; line-height: 1.3; margin-bottom: 14px; }
.encart-guide .surtitre{ color: var(--orange-2); }
.encart-guide .lien-fleche{ color: #fff; }
.encart-guide:hover{ color: rgba(255,255,255,.8); }
.encart-amazon{ background: #FFF8EC; }
.mini-liste{ display: flex; flex-direction: column; gap: 4px; }
.mini-comp{ display: flex; gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 14px; transition: background .2s; }
.mini-comp:hover{ background: #fff; color: var(--ink); }
.mini-comp .comp-badge{ width: 48px; height: 48px; border-radius: 13px; }
.mini-comp .comp-badge small{ font-size: 8px; }
.mini-comp .comp-badge strong{ font-size: 14px; }
.mini-comp strong{ display: block; font-size: 14px; line-height: 1.3; color: var(--ink); }
.mini-comp small{ color: var(--gris); font-size: 13px; }
.legende{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-check{ list-style: none; padding: 0; margin: 0; }
.liste-check li{ display: flex; gap: 10px; margin-bottom: 12px; }
.liste-check .ico{ color: var(--vert); margin-top: 3px; }
.liste-check li:last-child{ margin-bottom: 0; }

/* ---------- Calendrier / filtres ---------- */
.filtres{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; padding: 18px; background: var(--fond); border-radius: var(--r); }
.filtre-groupe{ display: flex; flex-wrap: wrap; gap: 6px; }
.filtre{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--ligne); background: #fff; font-size: 14px; font-weight: 600; color: var(--txt); transition: all .2s; }
.filtre .ico-sport{ width: 16px; height: 16px; color: var(--c); }
.filtre:hover{ border-color: var(--ink); }
.filtre.actif{ background: var(--ink); border-color: var(--ink); color: #fff; }
.filtre.actif .ico-sport{ color: #fff; }
.cal-mois{ margin-bottom: 34px; }
.cal-mois-titre{ font-size: 20px; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cal-mois-titre::after{ content: ""; flex-grow: 1; height: 1px; background: var(--ligne); }

/* ---------- Clubs ---------- */
.annuaire-construction{ background: var(--fond); border-radius: 28px; padding: 44px; margin-bottom: 30px; }
.annuaire-construction h2{ font-size: 28px; margin-bottom: 14px; }
.annuaire-construction .encart{ background: #fff; }
.annuaire{ columns: 3 300px; column-gap: 30px; }
.annuaire-region{ break-inside: avoid; margin-bottom: 30px; }
.annuaire-region h2{ font-size: 19px; }
.annuaire-region h2 small{ font-size: 13px; color: var(--gris); font-weight: 500; }
.annuaire-region ul{ list-style: none; padding: 0; }
.annuaire-region a{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.annuaire-region a:hover{ background: var(--sport-soft); }
.annuaire-region small{ margin-left: auto; color: var(--gris); }
.dep-code{ width: 34px; font-weight: 700; color: var(--sport); font-size: 13px; }
.carte-club{ position: relative; padding: 22px; border: 1px solid var(--ligne); border-radius: var(--r); height: 100%; transition: all .25s; }
.carte-club:hover{ box-shadow: var(--ombre-h); border-color: transparent; }
.carte-club h2{ font-size: 18px; }
.carte-club p{ margin: 0; font-size: 14px; display: flex; gap: 6px; }

/* ---------- Formulaire ---------- */
.formulaire label{ display: block; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.formulaire input, .formulaire textarea{ width: 100%; padding: 13px 16px; border: 1.5px solid var(--ligne); border-radius: 14px; font: inherit; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.formulaire input:focus, .formulaire textarea:focus{ outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11,27,51,.08); }
.mentions-form{ font-size: 13px; color: var(--gris); }
.alerte{ padding: 18px 20px; border-radius: 16px; margin-bottom: 24px; display: flex; gap: 10px; }
.alerte-ok{ background: #DCFCE7; color: #166534; }
.alerte-erreur{ background: #FEE2E2; color: #991B1B; }

/* ---------- Publicité ---------- */
.pub{ margin: 36px auto; text-align: center; min-height: 90px; }
.pub-label{ display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #A3ACBA; margin-bottom: 6px; }
.pub-demo{ display: flex; align-items: center; justify-content: center; border: 1.5px dashed #CBD2DE; border-radius: var(--r-s); color: #A3ACBA; font-size: 13px; background: repeating-linear-gradient(45deg, #FAFBFD, #FAFBFD 10px, #F5F7FB 10px, #F5F7FB 20px); }
.pub-carre{ min-height: 250px; margin: 0; }
.sticky-aside .pub-demo{ min-height: 250px; }

/* ---------- 404 ---------- */
.p404-code{ display: block; font-family: var(--f-titre); font-weight: 800; font-size: clamp(100px, 18vw, 200px); line-height: 1; letter-spacing: -.06em; background: linear-gradient(135deg, var(--orange), #E1306C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-404 h1{ font-size: 36px; }
.page-404 .entete-txt{ margin-bottom: 30px; }

/* ---------- Footer ---------- */
#footer{ background: var(--ink); color: rgba(255,255,255,.65); padding: 70px 0 30px; margin-top: 40px; font-size: 15px; }
.logo-blanc, .logo-blanc:hover{ color: #fff; }
.footer-slogan{ margin-top: 18px; max-width: 320px; }
.footer-titre{ font-family: var(--f-titre); font-weight: 700; color: #fff; margin-bottom: 14px; }
#footer ul{ list-style: none; padding: 0; margin: 0; }
#footer li{ margin-bottom: 8px; }
#footer a{ color: rgba(255,255,255,.65); }
#footer a:hover{ color: #fff; }
.footer-bas{ display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); margin-top: 50px; padding-top: 24px; font-size: 13px; }

/* ---------- Animations d'apparition ---------- */
.anim{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.anim.visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .anim{ opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px){
  .nav-lien{ padding: 9px 10px; }
}
@media (max-width: 991px){
  html{ scroll-padding-top: 90px; }
  .burger{ display: flex; }
  .nav-principale{ position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 20px; gap: 4px; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: transform .25s, opacity .25s, visibility .25s; overflow-y: auto; margin-left: 0; }
  body.menu-ouvert .nav-principale{ transform: none; opacity: 1; visibility: visible; }
  body:not(.menu-ouvert) .nav-principale .nav-sports-menu{ visibility: hidden; }
  body.menu-ouvert{ overflow: hidden; }
  .nav-lien{ padding: 14px 16px; font-size: 18px; border-radius: 14px; }
  .nav-principale .btn-gs{ margin: 10px 0 0; padding: 16px; }
  .nav-sports-menu{ position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; width: auto; padding: 0; }
  .section{ padding: 64px 0; }
  .hero{ padding: 50px 0 70px; }
  .methode{ padding: 30px; }
  .sticky-aside{ position: static; }
  .fiche-infos{ grid-template-columns: 1fr; }
  .annuaire-construction{ padding: 28px; }
}
@media (max-width: 767px){
  body{ font-size: 15px; }
  .header-inner{ height: 66px; }
  .nav-principale{ top: 66px; }
  .subnav{ top: 66px; }
  .logo-txt{ font-size: 20px; }
  .logo-mark{ width: 34px; height: 34px; }
  .titre-section{ flex-direction: column; align-items: flex-start; }
  .hero-txt{ font-size: 17px; }
  .compteur strong{ font-size: 26px; }
  .carte-comp{ gap: 14px; padding: 12px; }
  .cc-date{ width: 58px; height: 66px; }
  .cc-jour{ font-size: 22px; }
  .cc-fleche{ display: none; }
  .cc-titre{ font-size: 16px; }
  .raccourcis{ margin-top: -60px; }
  .hs-ico-geant{ width: 320px; height: 320px; }
  .entete-comp{ padding: 40px 0; }
  .contenu-riche{ font-size: 16px; }
  .contenu-riche h2{ font-size: 24px; }
  .chapo{ font-size: 18px; }
  .selection{ padding: 20px; margin: 30px -4px; }
  .footer-bas{ flex-direction: column; }
}

/* ---------- Annuaire local (villes / maillage) ---------- */
.villes-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.villes-chips small{ color: var(--gris); font-weight: 500; }
.bloc-ville{ margin-bottom: 40px; }
.bloc-ville .cal-mois-titre a{ color: var(--ink); }
.bloc-ville .cal-mois-titre a:hover{ color: var(--sport); }
.carte-club h3{ font-size: 18px; margin-bottom: 10px; }
.carte-club p{ align-items: flex-start; color: var(--gris); }
.carte-club p .ico{ color: var(--sport); margin-top: 3px; }
.club-publics{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.maillage{ margin-top: 30px; }
.liste-villes{ list-style: none; padding: 0; margin: 0 0 14px; }
.liste-villes a{ display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.liste-villes small{ color: var(--gris); }
.mini-comp .lecture-ico{ width: 40px; height: 40px; border-radius: 12px; }

.lecture-img{ width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }

/* ---------- Moteur de recherche ---------- */
.nav-principale{ margin-left: auto; }
.btn-recherche{ display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; height: 42px; padding: 0 10px 0 14px; border: 1px solid var(--ligne); border-radius: 100px; background: var(--fond); color: var(--gris); font-size: 14px; font-weight: 500; transition: border-color .2s, background .2s; }
.btn-recherche:hover{ border-color: var(--ink); background: #fff; color: var(--ink); }
.btn-recherche .ico{ width: 18px; height: 18px; color: var(--ink); }
.br-kbd{ font: 600 12px var(--f-txt); color: var(--gris); background: #fff; border: 1px solid var(--ligne); border-radius: 6px; padding: 1px 7px; box-shadow: none; }
.recherche-panneau{ position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 70px 16px 16px; }
.recherche-panneau[hidden]{ display: none; }
.recherche-fond{ position: absolute; inset: 0; background: rgba(11,27,51,.45); backdrop-filter: blur(3px); }
.recherche-boite{ position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; background: #fff; border-radius: var(--r); box-shadow: var(--ombre-h); overflow: hidden; animation: rech-in .18s ease-out; }
@keyframes rech-in{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } }
.recherche-form, .recherche-page-form{ display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--ligne); }
.recherche-sport{ flex-shrink: 0; height: 46px; max-width: 180px; padding: 0 34px 0 14px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1B33' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; font-weight: 600; font-size: 14px; color: var(--ink); appearance: none; cursor: pointer; }
.recherche-champ{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; }
.recherche-champ .ico{ width: 20px; height: 20px; color: var(--gris); flex-shrink: 0; }
.recherche-champ input{ flex: 1; min-width: 0; border: 0; outline: 0; font-size: 16px; color: var(--ink); background: none; }
.recherche-champ input::-webkit-search-cancel-button{ cursor: pointer; }
.recherche-fermer{ flex-shrink: 0; border: 1px solid var(--ligne); background: #fff; border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--gris); }
.recherche-suggestions{ overflow-y: auto; overscroll-behavior: contain; }
.recherche-suggestions:empty{ display: none; }
.rs-groupe{ padding: 8px 8px 4px; }
.rs-groupe + .rs-groupe{ border-top: 1px solid var(--ligne); }
.rs-titre{ display: flex; justify-content: space-between; padding: 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.rs-item, .recherche-item{ display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--ink); }
.rs-item:hover, .rs-item.actif{ background: var(--fond); color: var(--ink); }
.rs-item.actif{ box-shadow: inset 3px 0 0 var(--c, var(--orange)); }
.ri-ico{ width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--c, var(--orange)) 12%, #fff); color: var(--c, var(--orange)); overflow: hidden; }
.ri-ico svg{ width: 20px; height: 20px; }
.ri-ico img{ width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ri-txt{ flex: 1; min-width: 0; line-height: 1.3; }
.ri-txt strong{ display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-txt small{ display: block; font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-txt mark, .rs-item mark{ background: none; color: inherit; padding: 0; font-weight: 800; text-decoration: underline; text-decoration-color: var(--c, var(--orange)); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.rs-item > .ico, .recherche-item > .ico{ width: 16px; height: 16px; color: var(--gris); flex-shrink: 0; }
.rs-tout{ display: flex; justify-content: center; gap: 8px; padding: 13px; border-top: 1px solid var(--ligne); font-weight: 600; font-size: 14px; color: var(--ink); background: var(--fond); }
.rs-tout.actif, .rs-tout:hover{ background: var(--ink); color: #fff; }
.rs-vide, .rs-charge{ padding: 22px; text-align: center; color: var(--gris); font-size: 14px; }
.recherche-aide{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; font-size: 13px; color: var(--gris); }
.recherche-aide[hidden]{ display: none; }
.recherche-ex{ border: 1px solid var(--ligne); background: #fff; border-radius: 100px; padding: 4px 11px; font-size: 13px; font-weight: 500; color: var(--ink); }
.recherche-ex:hover{ border-color: var(--ink); }
body.recherche-ouverte{ overflow: hidden; }
/* Page de résultats */
.recherche-page-form{ max-width: 760px; margin-top: 22px; padding: 0; border: 0; }
.filtres-sport-recherche{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.recherche-sommaire{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.recherche-sommaire a{ padding: 7px 14px; border-radius: 100px; background: var(--fond); font-weight: 600; font-size: 14px; }
.recherche-sommaire small{ color: var(--gris); margin-left: 4px; }
.recherche-groupe{ margin-bottom: 36px; scroll-margin-top: 140px; }
.recherche-groupe h2 small{ font-size: .6em; color: var(--gris); font-weight: 600; }
.recherche-liste{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.recherche-item{ border: 1px solid var(--ligne); transition: border-color .2s; }
.recherche-item:hover{ border-color: var(--c, var(--ink)); color: var(--ink); }
@media (max-width: 991px){
  .btn-recherche{ margin-left: auto; margin-right: 10px; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
  .br-txt, .br-kbd{ display: none; }
}
@media (max-width: 767px){
  .recherche-panneau{ padding: 0; }
  .recherche-boite{ max-width: none; max-height: 100%; height: 100%; border-radius: 0; }
  .recherche-form{ flex-wrap: wrap; }
  .recherche-form .recherche-sport{ order: 2; flex: 1; max-width: none; height: 40px; }
  .recherche-form .recherche-champ{ order: 1; flex-basis: calc(100% - 70px); }
  .recherche-fermer{ order: 1; }
  .recherche-page-form{ flex-wrap: wrap; }
  .recherche-page-form .recherche-sport{ max-width: none; flex: 1 1 100%; }
  .recherche-liste{ grid-template-columns: 1fr; }
}
.recherche-item .ri-txt strong, .recherche-item .ri-txt small{ white-space: normal; }
@media (max-width: 767px){
  .container{ padding-left: 16px; padding-right: 16px; }
  .g-5, .gx-5{ --bs-gutter-x: 2rem; }	/* gouttière ≤ marge du conteneur : pas de défilement horizontal */
}
/* Le flou du header (backdrop-filter) rend le menu mobile relatif au header : hauteur explicite */
@media (max-width: 991px){ .nav-principale{ bottom: auto; height: calc(100vh - 76px); height: calc(100dvh - 76px); } }
@media (max-width: 767px){ .nav-principale{ height: calc(100vh - 66px); height: calc(100dvh - 66px); } }

/* ---------- Clubs de ma ville ---------- */
.ville-dep{ color: var(--gris); font-weight: 700; }
.ville-sports{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.ville-sports small{ color: var(--gris); font-weight: 500; }
.ville-groupe{ margin-top: 36px; scroll-margin-top: 140px; }
.ville-groupe h2 .ico-sport{ width: 24px; height: 24px; color: var(--c, var(--sport)); vertical-align: -3px; }
.ville-groupe h2 small{ font-size: .6em; color: var(--gris); font-weight: 600; }
#carte-ville{ height: 380px; }
.recherche-item .ri-ico{ font-weight: 800; font-size: 13px; }
.liste-villes{ list-style: none; padding: 0; margin: 8px 0 0; }
.liste-villes li{ display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.liste-villes li:last-child{ border-bottom: 0; }
.liste-villes small{ color: var(--gris); white-space: nowrap; }
.mv-recherche{ position: relative; display: flex; gap: 10px; max-width: 680px; margin-top: 22px; }
.mv-recherche .recherche-champ{ height: 52px; }
.mv-recherche .btn-gs{ flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.mv-res{ display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: #fff; border-radius: var(--r-s); box-shadow: var(--ombre-h); padding: 6px; max-height: 360px; overflow-y: auto; }
.mv-res .ri-txt small{ display: inline; }
.mv-res .ri-txt > small{ display: block; }
.mv-message{ margin-top: 10px; color: var(--gris); font-size: 14px; }
.mv-communes{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mv-communes a{ display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: var(--r-s); color: var(--ink); transition: border-color .2s; }
.mv-communes a:hover{ border-color: var(--ink); color: var(--ink); }
.mv-communes strong{ font-size: 15px; }
.mv-communes strong small{ color: var(--gris); font-weight: 500; }
.mv-communes a > small{ color: var(--gris); font-size: 13px; }
.mv-icos{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mv-ico{ width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); }
.mv-ico svg{ width: 15px; height: 15px; }
.mv-regions{ columns: 3 260px; column-gap: 32px; }
.mv-region{ break-inside: avoid; margin-bottom: 22px; }
.mv-region h3{ font-size: 16px; margin-bottom: 6px; }
.mv-region ul{ list-style: none; padding: 0; margin: 0; }
.mv-region li{ padding: 3px 0; font-size: 15px; }
.mv-region small{ color: var(--gris); }
@media (max-width: 767px){
  .mv-recherche{ flex-wrap: wrap; }
  .mv-recherche .btn-gs{ width: 100%; justify-content: center; }
  .mv-res{ top: 58px; }
}

/* ---------- Nutrition sportive ---------- */
.nutri-onglets{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.nutri-onglets small{ color: var(--gris); font-weight: 500; }
.encart-methode{ margin: 22px 0; padding: 16px 18px; border-radius: var(--r-s); background: #EEF8F2; border-left: 4px solid #2E9E5B; font-size: 15px; line-height: 1.55; }
.encart-sante{ display: flex; gap: 10px; margin-top: 30px; padding: 14px 16px; border-radius: var(--r-s); background: var(--fond); color: var(--gris); font-size: 14px; }
.encart-sante .ico{ flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.tableau-comparatif{ font-size: 14px; }
.tableau-comparatif td, .tableau-comparatif th{ vertical-align: top; }
.contenu-riche h3 + p em{ display: block; margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: #EEF8F2; font-style: normal; font-weight: 600; color: var(--ink); }
.tableau-comparatif td:last-child, .tableau-comparatif th:last-child{ white-space: nowrap; }

/* ---------- Marques de nutrition ---------- */
.pm{ display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--c); color: #fff; font: 800 18px var(--f-titre); letter-spacing: -.02em; }
.pm-grand{ width: 96px; height: 96px; border-radius: 24px; font-size: 34px; }
.pm-petit{ width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.carte-marque{ position: relative; height: 100%; padding: 20px; border: 1px solid var(--ligne); border-radius: var(--r); background: #fff; transition: box-shadow .2s, border-color .2s; }
.carte-marque:hover{ border-color: transparent; box-shadow: var(--ombre-h); }
.cm-tete{ display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.cm-tete h2{ font-size: 20px; margin: 0 0 2px; }
.cm-tete small{ color: var(--gris); font-size: 13px; }
.carte-marque p{ font-size: 15px; color: var(--txt); }
.cm-gammes{ display: flex; flex-wrap: wrap; gap: 5px; }
.cm-labels{ display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 13px; color: #2E9E5B; font-weight: 600; }
.cm-labels .ico{ width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.tableau-marques td, .tableau-marques th{ text-align: center; vertical-align: middle; white-space: nowrap; }
.tableau-marques td:nth-child(2), .tableau-marques th:first-child{ text-align: left; }
.tm-oui .ico{ width: 18px; height: 18px; color: #2E9E5B; }
.tm-non{ color: #C9D0DC; }
.em-inner{ display: flex; gap: 24px; align-items: flex-start; }
.gammes-marque{ display: grid; gap: 14px; }
.gm-type h3{ font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); margin: 6px 0 8px; }
.gm-item{ display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--ligne); border-left: 4px solid #2E9E5B; border-radius: 10px; margin-bottom: 8px; }
.gm-item span{ color: var(--gris); font-size: 14px; }
.pf-bloc{ height: 100%; padding: 16px 18px; border-radius: var(--r-s); }
.pf-bloc h3{ font-size: 16px; display: flex; align-items: center; gap: 6px; }
.pf-bloc ul{ margin: 0; padding-left: 18px; font-size: 15px; }
.pf-plus{ background: #EEF8F2; }
.pf-moins{ background: #FFF4EC; }
.avis-redaction{ margin: 24px 0; padding: 20px 22px; border-radius: var(--r); background: var(--ink); color: #fff; }
.avis-redaction .surtitre{ color: #8FE0B0; }
.avis-redaction p{ color: #fff; font-size: 16px; }
.em-bref{ display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 8px 0 16px; font-size: 14px; }
.em-bref dt{ color: var(--gris); font-weight: 600; }
.em-bref dd{ margin: 0; }
.grille-marques{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gm-lien{ display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ligne); border-radius: var(--r-s); color: var(--ink); }
.gm-lien:hover{ border-color: var(--ink); color: var(--ink); }
.gm-lien .pm{ width: 42px; height: 42px; font-size: 15px; border-radius: 12px; }
.gm-lien small{ display: block; color: var(--gris); font-size: 13px; }
@media (max-width: 767px){ .em-inner{ flex-direction: column; gap: 14px; } .pm-grand{ width: 72px; height: 72px; font-size: 26px; } }

/* ---------- Catalogue nutrition ---------- */
.subnav-nutrition .subnav-titre{ display: inline-flex; align-items: center; gap: 8px; }
.nutri-ico{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #2E9E5B; color: #fff; }
.nutri-ico .ico{ width: 16px; height: 16px; }
.cat-produits{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.cat-produits small{ color: inherit; opacity: .7; font-weight: 500; }
.tuiles-categories{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tuile-cat{ display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--ligne); border-top: 4px solid #2E9E5B; border-radius: var(--r-s); color: var(--ink); transition: box-shadow .2s; }
.tuile-cat:hover{ box-shadow: var(--ombre-h); color: var(--ink); }
.tuile-cat strong{ font: 800 18px var(--f-titre); }
.tuile-cat span{ font-size: 14px; color: var(--gris); line-height: 1.45; flex: 1; }
.tuile-cat small{ font-weight: 700; color: #2E9E5B; display: flex; align-items: center; gap: 6px; }
.tuile-cat small .ico{ width: 14px; height: 14px; }
.grille-produits{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.carte-produit{ position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--ligne); border-radius: var(--r-s); background: #fff; transition: box-shadow .2s, border-color .2s; }
.carte-produit:hover{ border-color: transparent; box-shadow: var(--ombre-h); }
.cp-tete{ display: flex; align-items: center; gap: 8px; }
.cp-tete .pm-petit{ width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.cp-marque{ font-size: 13px; font-weight: 600; color: var(--gris); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-produit h3{ font-size: 17px; margin: 0; line-height: 1.25; }
.cp-chiffres{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 0; }
.cp-chiffres div{ background: var(--fond); border-radius: 8px; padding: 6px 8px; }
.cp-chiffres dt{ font-size: 11px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.cp-chiffres dd{ margin: 0; font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.25; }
.cp-format{ margin: 0; font-size: 13px; color: var(--gris); }
.filtres-catalogue{ padding: 18px; border: 1px solid var(--ligne); border-radius: var(--r-s); }
.fc-titre{ display: block; margin: 14px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.fc-titre:first-child{ margin-top: 0; }
.fc-case{ display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 15px; cursor: pointer; }
.fc-case input{ width: 17px; height: 17px; accent-color: #2E9E5B; }
.bandeau-guide{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: var(--r-s); background: #EEF8F2; color: var(--ink); }
.bandeau-guide:hover{ color: var(--ink); background: #E1F3E8; }
.bandeau-guide > span{ flex: 1; }
.bandeau-guide strong{ display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #2E9E5B; }
.bandeau-guide .ico{ width: 20px; height: 20px; color: #2E9E5B; flex-shrink: 0; }
.nutri-sport{ height: 100%; }
.ns-titre{ display: flex; align-items: center; gap: 8px; font: 800 18px var(--f-titre); color: var(--ink); margin-bottom: 8px; }
.ns-titre .ico-sport{ width: 24px; height: 24px; color: var(--c); }
.nutri-sport ul{ margin: 0; padding-left: 18px; font-size: 15px; }
.nutri-sport li{ padding: 3px 0; }
@media (max-width: 991px){ .filtres-catalogue{ position: static; } }

/* Logos des marques */
.pm.pm-logo{ width: 92px; background: var(--c); border: 1px solid var(--ligne); padding: 6px 8px; }
.pm.pm-logo img{ width: 100%; height: 100%; object-fit: contain; }
.pm-grand.pm-logo{ width: 180px; padding: 12px 16px; }
.pm-petit.pm-logo{ width: 64px; padding: 4px 6px; }
.gm-lien .pm.pm-logo{ width: 78px; }
@media (max-width: 767px){ .pm-grand.pm-logo{ width: 140px; } }

/* ---------- Pages catégories de produits (nutrition) ---------- */
.reperes-cat{ display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.reperes-cat span{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--ink); }
.reperes-cat .ico{ width: 18px; height: 18px; color: #2E9E5B; }
.types-cat{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 10px; }
.type-cat{ padding: 16px 18px; border: 1px solid var(--ligne); border-top: 4px solid #2E9E5B; border-radius: var(--r-s); }
.type-cat h3{ font-size: 17px; margin: 0 0 6px; }
.type-cat p{ font-size: 15px; margin: 0 0 8px; }
.type-cat small{ display: block; font-size: 13px; color: var(--gris); }
.contenu-guide-cat h3{ font-size: 20px; margin-top: 26px; }
.marques-cat{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 20px; }
.marque-cat{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: var(--r-s); color: var(--ink); }
.marque-cat:hover{ border-color: var(--ink); color: var(--ink); }
.marque-cat small{ display: block; font-size: 13px; color: var(--gris); line-height: 1.35; }
.liste-categories{ display: grid; gap: 10px; }
.ligne-cat{ display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--ligne); border-left: 5px solid #2E9E5B; border-radius: var(--r-s); color: var(--ink); transition: box-shadow .2s; }
.ligne-cat:hover{ box-shadow: var(--ombre-h); color: var(--ink); }
.lc-txt{ flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lc-txt strong{ font: 800 20px var(--f-titre); }
.lc-txt span{ color: var(--txt); font-size: 15px; }
.lc-txt small{ color: var(--gris); font-size: 13px; }
.ligne-cat > .ico{ width: 20px; height: 20px; color: #2E9E5B; flex-shrink: 0; }