/* ===========================================================================
   site.css — le site public de la plateforme : annuaire, pages produit, guides, outils.

   Chargé APRÈS front.css et scopé sous `.site` : rien ici n'atteint l'application d'un
   club ni le back-office. Il réutilise les jetons du design system (couleurs, rayons,
   police) et les composants (.btn, .badge, .alert, .tc-card) ; il n'ajoute que la mise
   en page d'un SITE — en-tête à toutes les largeurs, pied de page de maillage, cartes
   d'annuaire, prose des guides — que ni le front ni le shell n'ont de raison d'avoir.

   Mobile d'abord. Un joueur cherche « padel marrakech » depuis son téléphone.
   =========================================================================== */

.site { min-height: 100svh; display: flex; flex-direction: column; }

/* --- En-tête --------------------------------------------------------------- */
/* Une barre au noir exact du logo (#080808), pour qu'il s'y fonde, dans les deux thèmes.
 * Le méga-menu (partials/site-menu.php, site-menu.js) : des volets sous la barre sur grand
 * écran, un tiroir en accordéons sur petit écran. */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: #080808; color: #fff;
  border-bottom: 1px solid #1c1c1c;
}
.site-bar {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--tc-max); margin: 0 auto;
  min-height: var(--tc-header-h);
  padding: 0 var(--tc-pad);
}
/* L’espace entre le menu et le bouton : il pousse « Créer mon club » (et le bouton Menu) à droite. */
.site-bar .tc-spacer { flex: 1 1 auto; }
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.site-logo { display: block; width: 150px; height: 36px; }
.site-cta {
  white-space: nowrap; flex: 0 0 auto;
  background: var(--ball); color: var(--ball-ink); border: 1px solid var(--ball);
}
.site-cta:hover { filter: brightness(1.06); background: var(--ball); color: var(--ball-ink); }
.site-header :focus-visible { outline: 2px solid var(--ball); outline-offset: 2px; }

.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--radius);
  color: rgba(255, 255, 255, .78); padding: 8px 10px; white-space: nowrap;
}
.mm-trigger svg { transition: transform .15s ease; opacity: .7; }
.mm-trigger:hover, .mm-trigger[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .09); }
.mm-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-trigger[data-active] { color: #fff; box-shadow: inset 0 -2px 0 var(--ball); border-radius: var(--radius) var(--radius) 0 0; }

/* Le contenu des volets : sur fond de carte, lisible dans les deux thèmes. */
.mm-panel { background: var(--card); color: var(--foreground); }
.mm-panel ul { list-style: none; margin: 0; padding: 0; }
.mm-panel li a {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 14px; line-height: 20px; color: var(--foreground); text-decoration: none;
}
.mm-panel li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-inner { display: grid; gap: 20px 28px; }
.mm-title {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--foreground-subdued); margin: 0 0 8px;
}
.mm-num { font-size: 12px; color: var(--foreground-subdued); font-variant-numeric: tabular-nums; }
.mm-with-icon svg { flex: 0 0 auto; color: var(--sport, currentColor); }
.mm-with-icon .flag { flex: 0 0 auto; border-radius: 2px; }
.mm-2col { columns: 2; column-gap: 20px; }
.mm-2col li { break-inside: avoid; }
.mm-sport-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-weight: 700; font-size: 15px; color: var(--foreground); text-decoration: none;
}
.mm-sport-head:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-sport-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  color: var(--sport); background: color-mix(in srgb, var(--sport) 14%, transparent);
}
.mm-foot { display: flex; justify-content: flex-end; align-items: center; }
.mm-foot a:not(.btn) { font-size: 14px; font-weight: 600; color: var(--foreground); }

.site-burger, .mm-sport-toggle, .mm-extra { display: none; }

/* Grand écran : la barre porte les déclencheurs, les volets tombent sous elle. */
@media (min-width: 62em) {
  .mm-list { display: flex; gap: 2px; }
  .mm-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .28);
    max-height: calc(100vh - var(--tc-header-h) - 24px); overflow-y: auto;
  }
  .mm-inner { max-width: var(--tc-max); margin: 0 auto; padding: 24px var(--tc-pad) 8px; }
  .mm-foot { max-width: var(--tc-max); margin: 0 auto; padding: 8px var(--tc-pad) 20px; }
  .mm-sports { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
  .mm-cols-3 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
  .mm-guides { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mm-guides-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; align-content: start; }
  .mm-cols-2 { grid-template-columns: repeat(2, minmax(0, 360px)); }
  .mm-cols-2 + .mm-foot { justify-content: flex-start; }
}
@media (min-width: 75em) {
  .mm-sports { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .site-bar, .mm-inner, .mm-foot { max-width: 1160px; }
}

/* Petit écran : logo, appel à l'action, bouton Menu ; le tiroir occupe le reste. */
@media (max-width: 61.99em) {
  .site-bar { gap: 10px; }
  .site-burger {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; margin-right: -10px;
    background: transparent; border: 0; border-radius: var(--radius); color: #fff; cursor: pointer;
  }
  /* Le survol seulement là où il existe : sur un téléphone, il resterait collé après le toucher. */
  @media (hover: hover) { .site-burger:hover { background: rgba(255, 255, 255, .09); } }
  /* Le bouton garde sa taille visuelle ; la règle tactile du DS (44 px) passe par une zone
     de toucher invisible, comme .hit-44, au lieu de grossir le bouton et la barre. */
  .tc .site-header .site-cta {
    position: relative; min-height: 32px; height: 32px; min-width: 0;
    padding: 0 12px; font-size: 13px; line-height: 30px;
  }
  .tc .site-header .site-cta::after { content: ""; position: absolute; inset: -6px -4px; }
  .site-burger-bars { display: grid; gap: 4px; width: 20px; }
  .site-burger-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .site-header.is-open .site-burger-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.is-open .site-burger-bars span:nth-child(2) { opacity: 0; }
  .site-header.is-open .site-burger-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mm { display: none; }
  .site-header.is-open .mm {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--mm-top, var(--tc-header-h));
    background: var(--card); color: var(--foreground);
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mm-item { border-bottom: 1px solid var(--border); }
  .mm-trigger {
    display: flex; width: 100%; justify-content: space-between;
    padding: 16px var(--tc-pad); border-radius: 0;
    font-size: 17px; font-weight: 600; color: var(--foreground);
  }
  .mm-trigger:hover, .mm-trigger[aria-expanded="true"] { color: var(--foreground); background: transparent; }
  .mm-trigger[data-active] { color: var(--foreground); box-shadow: inset 3px 0 0 var(--ball); border-radius: 0; }
  .mm-panel { padding: 0 var(--tc-pad) 18px; }
  .mm-inner { gap: 18px; }
  .mm-cols-3, .mm-guides, .mm-guides-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  /* Les sports : une ligne par sport, qui se déplie sur place. */
  .mm-sports { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mm-sport + .mm-sport { border-top: 1px solid var(--border); }
  .mm-sport-head { display: none; }
  .mm-sport-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 0;
    font: inherit; font-size: 16px; font-weight: 600; color: var(--foreground);
    background: transparent; border: 0; cursor: pointer; text-align: left;
  }
  .mm-sport-toggle > svg:last-child { margin-left: auto; color: var(--foreground-subdued); transition: transform .15s ease; }
  .mm-sport-toggle[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
  .mm-sport-toggle[aria-expanded="false"] + .mm-sport-links { display: none; }
  .mm-panel .mm-sport-links { padding: 0 0 10px 42px; }
  .mm-guides-topics { display: grid; grid-column: 1 / -1; }
  .mm-cols-3 > .mm-col:first-child { grid-column: 1 / -1; }
  .mm-cols-3 .mm-2col { columns: 1; }
  .mm-foot { justify-content: flex-start; padding-top: 14px; }
  .mm-panel li a { min-height: 44px; padding: 10px 0; }
  .mm-trigger { min-height: 56px; }
  .mm-extra { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--tc-pad) 24px; }
  /* Le sélecteur de langue du tiroir : pleine largeur, la liste se déplie dessous, dans le flux. */
  .lang-pick-block { width: 100%; margin: 0; }
  .lang-pick-block > summary { width: 100%; min-height: 44px; font-size: 15px; }
  .lang-pick-block > summary .i-chevron-down { margin-inline-start: auto; }
  .lang-pick-block .lang-pick-list { position: static; margin-top: 6px; min-width: 0; box-shadow: none; }
  html.mm-lock, html.mm-lock body { overflow: hidden; }
}
@media (max-width: 23.99em) {
  .site-logo { width: 125px; height: 30px; }
  .site-cta { padding-left: 10px; padding-right: 10px; }
}

/* --- Corps ----------------------------------------------------------------- */
.site-main {
  flex: 1 1 auto; width: 100%;
  max-width: var(--tc-max); margin: 0 auto;
  padding: 20px var(--tc-pad) 48px;
}
.site-main-narrow { max-width: 620px; }

/* Fil d'Ariane : une ligne, pas un composant. */
.site-crumbs { font-size: 13px; color: var(--foreground-subdued); margin: 0 0 12px; overflow-x: auto; white-space: nowrap; }
.site-crumbs a { color: inherit; }
.site-crumbs span + span::before { content: "›"; margin: 0 6px; }

/* Titres de page. */
.site-h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.site-lead { font-size: 17px; line-height: 26px; color: var(--foreground-subdued); margin: 0 0 20px; max-width: 64ch; }
.site-h2 { font-size: 20px; line-height: 26px; font-weight: 700; margin: 32px 0 12px; }
.site-h3 { font-size: 16px; line-height: 22px; font-weight: 650; margin: 20px 0 8px; }
@media (min-width: 62em) {
  .site-h1 { font-size: 36px; line-height: 42px; }
  .site-lead { font-size: 18px; line-height: 28px; }
}

/* Le héros de l'accueil et des pages produit. */
.site-hero { padding: 24px 0 8px; }
.site-hero .site-h1 { max-width: 20ch; }
.site-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.site-hero-note { font-size: 13px; color: var(--foreground-subdued); }
@media (min-width: 62em) {
  .site-hero { padding: 48px 0 24px; }
  .site-hero .site-h1 { font-size: 44px; line-height: 50px; }
}

/* Grilles de cartes (villes, sports, fonctionnalités). */
.site-grid { display: grid; gap: 12px; }
@media (min-width: 30em) { .site-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .site-grid { grid-template-columns: repeat(3, 1fr); } .site-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.site-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.site-tile:hover { border-color: var(--foreground-disabled); }
.site-tile-title { font-weight: 650; }
.site-tile-sub { font-size: 13px; color: var(--foreground-subdued); }

/* Vignette de ville avec photo (partials/city-tile) : l'image en tête, pleine largeur. */
.site-tile-photo { padding: 0; gap: 0; overflow: hidden; }
.site-tile-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--muted); }
.site-tile-noimg { display: flex; align-items: center; justify-content: center; opacity: .55; }
.site-tile-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; }
.site-tile-photo:hover .site-tile-img { filter: brightness(1.05); }
.city-credits { margin: 8px 0 0; }
.city-credits summary { cursor: pointer; }
.city-credits a { color: inherit; }

/* Puces de choix (sports, villes) : des liens, pas des boutons. */
.site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.site-chips > a, .site-chips > span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; font-size: 14px; text-decoration: none;
  background: var(--fill-tertiary); color: var(--foreground);
}
.site-chips a[aria-current="page"] { background: var(--foreground); color: var(--card); }
.site-chips .num { color: var(--foreground-subdued); }
.site-chips a[aria-current="page"] .num { color: inherit; opacity: .8; }

/* --- Fiches de l'annuaire --------------------------------------------------- */
.dir-list { display: grid; gap: 12px; }
@media (min-width: 48em) { .dir-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .dir-list-3 { grid-template-columns: repeat(3, 1fr); } }

.dir-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.dir-card:hover { border-color: var(--foreground-disabled); }
.dir-card-media {
  aspect-ratio: 16 / 9; background: var(--fill-tertiary);
  display: flex; align-items: center; justify-content: center; color: var(--foreground-disabled);
}
.dir-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Un pourcentage de padding se calcule sur la LARGEUR, même en haut et en bas : 18 % mangeait
   presque toute la hauteur d'une carte large, et le logo restait minuscule. */
.dir-card-media.is-logo img { object-fit: contain; padding: 4% 10%; background: #fff; }
.dir-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.dir-card-title { font-weight: 650; font-size: 16px; line-height: 22px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dir-card-facts { font-size: 13px; color: var(--foreground-subdued); }
.dir-card-sports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dir-card-cta { margin-top: 8px; font-size: 13px; font-weight: 600; }

/* La fiche d'un club. */
.dir-gallery { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); margin: 0 0 20px; }
.dir-gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--fill-tertiary); }
.dir-gallery a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.dir-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 48em) {
  .dir-gallery { grid-template-columns: repeat(4, 1fr); }
  .dir-gallery a:first-child { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
}
.dir-facts { display: grid; gap: 10px 16px; margin: 0; }
@media (min-width: 48em) { .dir-facts { grid-template-columns: 1fr 1fr; } }
.dir-facts > div { display: flex; gap: 10px; align-items: flex-start; }
.dir-facts svg { flex: 0 0 auto; margin-top: 3px; color: var(--foreground-subdued); }
.dir-facts dt { font-size: 12px; color: var(--foreground-subdued); margin: 0; }
.dir-facts dd { margin: 0; }
.dir-two { display: grid; gap: 20px; }
@media (min-width: 62em) { .dir-two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.dir-side { position: sticky; top: calc(var(--tc-header-h) + 16px); }
.dir-credit { font-size: 12px; color: var(--foreground-subdued); margin: 6px 0 0; }

/* --- Prose (guides, pages produit) ------------------------------------------ */
.site-prose { max-width: 72ch; font-size: 17px; line-height: 28px; }
.site-prose h2 { font-size: 22px; line-height: 28px; font-weight: 700; margin: 36px 0 12px; letter-spacing: -0.01em; }
.site-prose h3 { font-size: 18px; line-height: 24px; font-weight: 650; margin: 24px 0 8px; }
.site-prose p, .site-prose ul, .site-prose ol { margin: 0 0 16px; }
.site-prose ul, .site-prose ol { padding-left: 24px; }
.site-prose li { margin-bottom: 6px; }
.site-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.site-prose th, .site-prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.site-prose th { font-weight: 650; background: var(--fill-tertiary); }
.site-prose td.num, .site-prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.site-prose figure { margin: 0 0 20px; }
.site-prose figcaption { font-size: 13px; color: var(--foreground-subdued); margin-top: 6px; }
.site-prose .callout {
  padding: 14px 16px; margin: 0 0 20px;
  background: var(--fill-tertiary); border-left: 3px solid var(--foreground); border-radius: var(--radius);
}
.site-prose .brief {
  padding: 16px 18px; margin: 0 0 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.site-prose .brief-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--foreground-subdued); margin: 0 0 8px; }
.site-prose .brief p:last-child { margin-bottom: 0; }
.site-meta { font-size: 13px; color: var(--foreground-subdued); margin: 0 0 20px; }

/* Schéma de terrain (dimensions) : un SVG en ligne, lisible dans les deux thèmes. */
.court-figure svg { width: 100%; height: auto; display: block; }
.court-figure .court-line { stroke: currentColor; stroke-width: 2; fill: none; }
.court-figure .court-fill { fill: var(--fill-tertiary); }
.court-figure text { font-size: 12px; fill: currentColor; font-family: inherit; }
.court-figure .court-dim { stroke: currentColor; stroke-width: 1; stroke-dasharray: 4 3; }

/* FAQ : des <details>, lisibles sans JavaScript et repliées par défaut. */
.site-faq details { border-top: 1px solid var(--border); padding: 12px 0; }
.site-faq details:last-child { border-bottom: 1px solid var(--border); }
.site-faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; color: var(--foreground-subdued); }
.site-faq details[open] summary::after { content: "–"; }
.site-faq p { margin: 10px 0 0; color: var(--foreground-subdued); }

/* Bandeau d'appel à l'action en bas des guides et des pages d'annuaire. */
.site-cta-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 20px; margin: 32px 0 0;
  background: var(--foreground); color: var(--card); border-radius: var(--radius-lg);
}
.site-cta-band .title { font-weight: 700; font-size: 18px; }
.site-cta-band .sub { font-size: 14px; opacity: .8; }
.site-cta-band .btn-primary { background: var(--card); color: var(--foreground); border-color: var(--card); }

/* Sections de fonctionnalités : icône, titre, deux phrases. */
.feature { padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.feature-title { font-weight: 650; margin: 8px 0 4px; }
.feature p { margin: 0; font-size: 14px; line-height: 22px; color: var(--foreground-subdued); }

/* --- Pied de page ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--border); background: var(--card); margin-top: 24px; }
.site-footer-grid {
  display: grid; gap: 24px; max-width: var(--tc-max); margin: 0 auto; padding: 28px var(--tc-pad) 8px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48em) { .site-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) {
  .site-footer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site-footer-guides { grid-column: span 2; }
}
@media (max-width: 47.99em) { .site-footer-guides { grid-column: 1 / -1; } }
/* Téléphone : une rubrique par ligne, séparées d'un filet ; les listes de liens courts
   (recherches populaires, villes) sur deux colonnes ; les sports et les pages pour les
   clubs sur une seule (« Clubs de tennis : où jouer » ne tient pas dans une demi-largeur). */
@media (max-width: 47.99em) {
  .site-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; }
  .site-footer-grid > div { padding: 20px 0; border-bottom: 1px solid var(--border); }
  .site-footer-grid > div:last-child { border-bottom: 0; }
  .site-footer-grid > [data-geo-popular] > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .site-footer li { margin: 0; }
  .site-footer li a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 0; line-height: 20px; }
  .site-footer-topics li a { min-height: 36px; }
  .site-footer .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); }
  .site-footer-bottom .lang-pick { margin-inline-start: 0; }
  .site-footer-bottom .lang-pick-list { inset-inline-end: auto; inset-inline-start: 0; }
}
/* Les guides par thème : un petit intitulé, puis des titres courts ; deux colonnes. */
.site-footer-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.site-footer-topic { font-size: 13px; font-weight: 600; color: var(--foreground-subdued); margin-bottom: 4px; }
.site-footer-topics li { margin-bottom: 4px; font-size: 13px; line-height: 18px; }
.site-footer-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--foreground); text-decoration: none; }
.site-footer-more:hover { text-decoration: underline; }
.site-footer-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--foreground-subdued); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 6px; font-size: 14px; }
.site-footer li a { color: var(--foreground); text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.site-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  max-width: var(--tc-max); margin: 0 auto; padding: 16px var(--tc-pad) 24px;
  font-size: 13px; color: var(--foreground-subdued);
}

/* --- Le sélecteur de langue : drapeau et nom, la liste s'ouvre vers le haut ---- */
.lang-pick { position: relative; margin-inline-start: auto; }
.lang-pick > summary { list-style: none; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid var(--border); }
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick[open] > summary .i-chevron-down { transform: rotate(180deg); }
.lang-pick .flag { display: block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lang-pick-list {
  position: absolute; bottom: calc(100% + 6px); inset-inline-end: 0; z-index: 50;
  list-style: none; margin: 0; padding: 6px; min-width: 200px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .25);
}
.lang-pick-list form { margin: 0; }
.lang-pick-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px;
  border: 0; border-radius: calc(var(--radius) - 2px); background: transparent;
  font: inherit; font-size: 14px; color: var(--foreground); text-align: start; cursor: pointer;
}
button.lang-pick-item:hover, button.lang-pick-item:focus-visible { background: var(--muted, rgba(0,0,0,.05)); }
.lang-pick-item[aria-current] { font-weight: 600; }
.lang-pick-item[aria-current] .i-check { margin-inline-start: auto; color: var(--success, currentColor); }

/* --- Outil : générateur de tournoi ----------------------------------------- */
.tool-panel { display: grid; gap: 16px; margin: 0 0 24px; }
@media (min-width: 62em) { .tool-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }
.tool-form { padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tool-round { margin: 0 0 16px; }
.tool-round h3 { margin: 0 0 6px; font-size: 15px; }
.tool-round table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tool-round td, .tool-round th { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.tool-round .rest { color: var(--foreground-subdued); font-size: 13px; padding: 4px 8px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media print {
  .site-header, .site-footer, .tool-form, .site-cta-band, .skip-link { display: none !important; }
  .site-main { padding: 0; max-width: none; }
}

/* ===========================================================================
   All Racket Sport — la marque et l'accueil.

   Le design system reste monochrome (le back-office, l'application d'un club). Le SITE
   PUBLIC porte en plus deux choses, et seulement ici :
     - la balle jaune de la marque (--ball), pour l'appel à l'action principal ;
     - la couleur de chaque sport (Sport::color, passée en --sport sur l'élément), pour
       ses tuiles, ses pastilles et ses logos.
   Le héros est une bande sombre « court de nuit » : les lignes d'un court en
   perspective, dessinées en SVG, derrière le titre.
   =========================================================================== */
.site {
  --ball: #D9F24B;
  --ball-ink: #1a1a18;
  --night: #0f1411;
  --home-max: 1160px;
}

/* --- La marque dans le pied de page : le logo sur son noir ------------------ */
.site-footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.site-footer-logo { display: inline-flex; flex: 0 0 auto; }
.site-footer-logo img { display: block; width: 120px; height: 27px; }
.site-footer-sport { display: inline-flex; align-items: center; gap: 8px; }
.site-footer-sport .sport-icon { color: var(--sport); flex: 0 0 auto; }

/* Le bouton balle : l'action principale sur fond sombre. */
.home-btn-ball {
  background: var(--ball); color: var(--ball-ink); border: 1px solid var(--ball);
  font-weight: 700; box-shadow: none;
}
.home-btn-ball:hover { background: #cde83c; color: var(--ball-ink); }
/* Le second bouton d'un bandeau sombre : contour clair, texte clair. Remplace un
   style="color:inherit" qui rendait le texte blanc sur un bouton blanc. */
.site-cta-ghost { background: transparent; color: var(--card); border: 1px solid rgba(255,255,255,.45); box-shadow: none; }
.site-cta-ghost:hover { background: rgba(255,255,255,.1); color: var(--card); }
.site-cta-band .home-btn-ball { background: var(--ball); color: var(--ball-ink); border-color: var(--ball); }

/* --- Pleine largeur ---------------------------------------------------------- */
.site-main-bleed { max-width: none; padding: 0; }
.home-wrap { max-width: var(--home-max); margin: 0 auto; padding: 0 var(--tc-pad); }
@media (min-width: 48em) { .home-wrap { padding: 0 24px; } }
.home-band { padding: 40px 0; }
.home-band-soft { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
@media (min-width: 62em) { .home-band { padding: 64px 0; } }
.home-h2 { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.home-sub { font-size: 16px; line-height: 25px; color: var(--foreground-subdued); margin: 0 0 24px; max-width: 62ch; }
.home-more { margin: 20px 0 0; }
@media (min-width: 62em) { .home-h2 { font-size: 32px; line-height: 38px; } .home-sub { font-size: 18px; line-height: 28px; } }

/* --- Héros ------------------------------------------------------------------- */
.home-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(217,242,75,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(31,111,235,.22), transparent 60%),
    var(--night);
}
.home-hero-court { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255,255,255,.09); pointer-events: none; }
.home-hero-grid { position: relative; display: grid; gap: 32px; padding-top: 36px; padding-bottom: 40px; align-items: center; }
@media (min-width: 62em) { .home-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); padding-top: 64px; padding-bottom: 72px; } }

.home-sportline { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.home-sportline li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px;
  border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.08); color: #fff;
}
.home-sportline .sport-icon { background: var(--sport); border-radius: 999px; padding: 3px; width: 22px; height: 22px; box-sizing: border-box; }

.home-h1 { font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 16px; max-width: 16ch; }
.home-h1 em { font-style: normal; color: var(--ball); }
.home-lead { font-size: 17px; line-height: 27px; color: rgba(255,255,255,.78); margin: 0 0 28px; max-width: 56ch; }
@media (min-width: 48em) { .home-h1 { font-size: 52px; line-height: 56px; } }
@media (min-width: 62em) { .home-h1 { font-size: 64px; line-height: 66px; } .home-lead { font-size: 19px; line-height: 30px; } }

.home-paths { display: grid; gap: 12px; }
@media (min-width: 36em) { .home-paths { grid-template-columns: 1fr 1fr; } }
.home-path {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px;
  text-decoration: none; transition: transform .15s ease;
}
.home-path:hover { transform: translateY(-2px); }
.home-path.is-play { background: var(--ball); color: var(--ball-ink); }
.home-path.is-club { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.home-path-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.home-path-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.home-path-body { font-size: 14px; line-height: 20px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .home-path { transition: none; } .home-path:hover { transform: none; } }

/* Le téléphone : une vraie capture de la grille, dans un cadre dessiné en CSS. */
.home-phone { position: relative; margin: 0 auto; width: min(300px, 78vw); }
.home-phone img {
  display: block; width: 100%; height: auto; border-radius: 34px;
  border: 10px solid #1e1f1c; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  background: #fff;
}
.home-phone-tag {
  position: absolute; left: -14px; bottom: 44px; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: #fff; color: var(--foreground); box-shadow: var(--shadow);
}
.home-phone-tag .sport-icon { color: #1F6FEB; }
@media (max-width: 61.99em) { .home-phone { display: none; } }

/* --- Les sports ---------------------------------------------------------------- */
.home-sports { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .home-sports { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.sport-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px;
  border-radius: 18px; background: var(--card); border: 1px solid var(--border); overflow: hidden;
}
.sport-tile::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: var(--sport); opacity: .08;
}
.sport-tile-badge {
  width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--sport); color: #fff; margin-bottom: 6px;
}
.sport-tile-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.sport-tile-body { font-size: 14px; line-height: 21px; color: var(--foreground-subdued); margin: 0; flex: 1 1 auto; }
.sport-tile-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; position: relative; z-index: 1; }
.sport-tile-links a { font-size: 13px; font-weight: 700; color: var(--sport); text-decoration: none; }
.sport-tile-links a:hover { text-decoration: underline; }
@media (min-width: 62em) { .sport-tile { padding: 22px; } .sport-tile-badge { width: 76px; height: 76px; border-radius: 20px; } }

/* --- Joueurs / clubs ------------------------------------------------------------ */
.home-two { display: grid; gap: 16px; }
@media (min-width: 48em) { .home-two { grid-template-columns: 1fr 1fr; } }
.home-side { padding: 24px; border-radius: 20px; background: var(--background); border: 1px solid var(--border); }
.home-side.is-dark { background: var(--night); color: #fff; border-color: var(--night); }
.home-side-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--foreground-subdued); margin-bottom: 6px; }
.home-side.is-dark .home-side-kicker { color: var(--ball); }
.home-ticks { list-style: none; margin: 12px 0 20px; padding: 0; display: grid; gap: 10px; }
.home-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; }
.home-ticks svg { flex: 0 0 auto; margin-top: 3px; color: #2E9A45; }
.home-side.is-dark .home-ticks svg { color: var(--ball); }

/* --- Comment ça marche ---------------------------------------------------------- */
/* minmax(0, …) et min-width: 0 : une capture ne peut jamais élargir sa colonne (Safari
   prenait sinon la largeur naturelle de l'image, 1280 px, et la page débordait). */
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 48em) { .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.home-step { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-step-shot {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); background: var(--card);
}
.home-step-shot img { width: 100%; height: auto; display: block; }
.home-step-n {
  width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ball); color: var(--ball-ink); font-weight: 800;
}
.home-step p { margin: 0; font-size: 15px; line-height: 23px; }

/* --- Fonctionnalités ------------------------------------------------------------- */
.home-features { display: grid; gap: 12px; }
@media (min-width: 36em) { .home-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .home-features { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.home-feature { padding: 18px; border-radius: 16px; background: var(--background); border: 1px solid var(--border); }
.home-feature-icon {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--night); color: var(--ball);
}
.home-feature-title { font-weight: 750; margin: 10px 0 4px; }
.home-feature p { margin: 0; font-size: 14px; line-height: 22px; color: var(--foreground-subdued); }

/* --- Cartes de guide (accueil, index, « à lire aussi ») ---------------------------- */
.guide-cards { display: grid; gap: 14px; }
@media (min-width: 36em) { .guide-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .guide-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.guide-card {
  --sport: #1a1a18;
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; transition: border-color .15s ease;
}
.guide-card:hover { border-color: var(--foreground-disabled); }
.guide-card-media {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--sport); color: #fff;
}
.guide-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.guide-card-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sport); }
.guide-card-title { font-weight: 750; font-size: 16px; line-height: 22px; }
.guide-card-desc { font-size: 14px; line-height: 21px; color: var(--foreground-subdued); }
.guide-card-meta { font-size: 13px; color: var(--foreground-subdued); }

/* L'image d'en-tête d'un guide. */
.guide-hero { margin: 0 0 20px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--fill-tertiary); }
.guide-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 62em) { .guide-hero { aspect-ratio: 21 / 9; } }

/* Schémas dans le corps d'un guide : une figure encadrée, légendée. */
.site-prose .diagram { margin: 4px 0 24px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.site-prose .diagram svg { width: 100%; height: auto; display: block; }
.site-prose .diagram text { font-family: inherit; font-size: 13px; fill: currentColor; }
.site-prose .diagram figcaption { margin-top: 10px; }
.site-prose .steps-list { list-style: none; padding: 0; counter-reset: step; }
.site-prose .steps-list > li { position: relative; padding-left: 44px; margin-bottom: 14px; counter-increment: step; }
.site-prose .steps-list > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  background: var(--ball); color: var(--ball-ink);
}
.site-prose .keyfacts { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
@media (min-width: 36em) { .site-prose .keyfacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .site-prose .keyfacts { grid-template-columns: repeat(3, 1fr); } }
.site-prose .keyfacts li { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.site-prose .keyfacts b { display: block; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* --- Tutoriel ------------------------------------------------------------------- */
.tuto-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.tuto-part { margin: 40px 0 0; }
.tuto-part-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.tuto-part-head .home-feature-icon { width: 40px; height: 40px; }
.tuto-step { display: grid; gap: 16px; padding: 24px 0; border-top: 1px solid var(--border); align-items: start; }
@media (min-width: 62em) { .tuto-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; } .tuto-step.is-phone { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.tuto-step-n { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--foreground-subdued); text-transform: uppercase; letter-spacing: .05em; }
.tuto-step-n span { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ball); color: var(--ball-ink); font-size: 14px; letter-spacing: 0; }
.tuto-step h3 { font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 8px; }
.tuto-step .site-prose { font-size: 16px; line-height: 26px; }
.tuto-shot { margin: 0; }
.tuto-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; }
.tuto-shot.is-phone { max-width: 320px; margin: 0 auto; }
.tuto-shot.is-phone img { border-radius: 28px; border: 8px solid #1e1f1c; }
.tuto-shot figcaption { font-size: 13px; color: var(--foreground-subdued); margin-top: 8px; text-align: center; }
/* Une capture de bureau dans une vignette 4:3 serait illisible : on la montre à 175 %,
   cadrée sur son coin haut gauche (le titre de l'écran et le début du formulaire).
   Agrandie par transform et non par sa largeur : l'image garde la largeur de son cadre,
   et un zoom visuel ne compte jamais dans la largeur de la page (avec width: 175 %,
   Safari sur iPhone élargissait la page à cet endroit). */
.home-step-shot.is-desktop img { transform: scale(1.75); transform-origin: top left; }
[dir="rtl"] .home-step-shot.is-desktop img { transform-origin: top right; }

/* --- Démonstration en vidéo (page.demo et bloc de l'accueil) ------------------------- */
.demo-player { margin: 0 0 8px; max-width: 980px; }
.demo-player video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 14px; background: #06070a; box-shadow: var(--shadow);
}
.demo-section { margin: 32px 0 0; }
.demo-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
@media (min-width: 48em) { .demo-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.demo-chapters a {
  display: flex; gap: 12px; align-items: baseline; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  color: inherit; text-decoration: none; font-weight: 600;
}
.demo-chapters a:hover { border-color: var(--foreground-subdued); }
.demo-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2.6em; color: var(--foreground-subdued); }
.demo-transcript h3 { font-size: 16px; line-height: 22px; margin: 20px 0 4px; }
.demo-transcript h3 a { text-decoration: none; }
.demo-transcript p { margin: 0; }

/* --- Annuaire mondial (migration 012) -------------------------------------------- */
/* « Près de moi » : le bouton n'existe que si le navigateur donne une position. */
.dir-near { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.dir-near-note { font-size: 14px; color: var(--foreground-subdued); }

/* Les sports, chacun dans sa couleur, avec son logo. */
.dir-sports { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 0 0 8px; }
@media (min-width: 48em) { .dir-sports { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .dir-sports { grid-template-columns: repeat(6, 1fr); } }
.dir-sport {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.dir-sport:hover { border-color: var(--sport); }
.dir-sport-badge {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--sport); color: #fff;
}

/* Le titre d'une page de sport : le logo du sport à côté du H1. */
.dir-title { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.dir-title .site-h1 { margin: 0; }
.dir-title .dir-sport-badge { width: 52px; height: 52px; border-radius: 14px; }

/* Une fiche sans photo : le logo de son sport, plutôt qu'une épingle grise. */
.dir-card-sport {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 45%),
    var(--sport);
}

/* La carte des clubs (partials/club-map.php) : chargée sur demande seulement. */
.club-map { margin: 0 0 16px; }
.club-map-canvas { height: 380px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 6px; z-index: 0; }
@media (min-width: 62em) { .club-map-canvas { height: 460px; } }
.club-map-note { font-size: 12px; color: var(--foreground-subdued); margin: 6px 0 0; }
/* Une fiche sans photo n'a pas besoin d'un grand bandeau : une frise basse suffit. */
.dir-card-media.is-placeholder { aspect-ratio: 16 / 5; }

/* ===========================================================================
   Tournois (views/tournaments/*) : le hub, puis une page par sport.
   =========================================================================== */
.tn-sports { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 8px; }
@media (min-width: 30em) { .tn-sports { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .tn-sports { grid-template-columns: repeat(6, 1fr); } }
.tn-sports a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px;
  border-radius: var(--radius-lg); color: #fff; text-decoration: none; font-weight: 650;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.2), transparent 50%), var(--sport);
}
.tn-sports a:hover { filter: brightness(1.06); }

/* À venir : une ligne par tournoi, la date en pavé. */
.tn-upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tn-upcoming li {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-left: 4px solid var(--sport); scroll-margin-top: 80px;
}
.tn-date { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tn-date-d { font-size: 22px; font-weight: 750; }
.tn-date-m { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--foreground-subdued); margin-top: 4px; }
.tn-up-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tn-up-name { font-weight: 650; color: inherit; text-decoration: none; }
a.tn-up-name:hover { text-decoration: underline; }
.tn-up-meta, .tn-event-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--foreground-subdued); margin: 0; }
.tn-up-sport { display: inline-flex; align-items: center; gap: 4px; color: var(--foreground); }
.tn-up-sport .sport-icon { color: var(--sport); }
.tn-live {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--ball); color: var(--ball-ink);
}

/* Derniers champions (hub). */
.tn-champs { display: grid; gap: 12px; }
@media (min-width: 48em) { .tn-champs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .tn-champs { grid-template-columns: repeat(3, 1fr); } }
.tn-champ {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; color: inherit; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-top: 4px solid var(--sport);
}
.tn-champ:hover { border-color: var(--foreground-disabled); border-top-color: var(--sport); }
.tn-champ-head { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.tn-champ-head .sport-icon { color: var(--sport); flex: 0 0 auto; }
.tn-champ-date { font-size: 13px; color: var(--foreground-subdued); }
.tn-champ-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.tn-champ-cat { grid-column: 1 / -1; font-size: 12px; color: var(--foreground-subdued); }
.tn-champ-winner { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tn-champ-winner svg { color: #C9A227; flex: 0 0 auto; }
.tn-champ-score { font-size: 13px; color: var(--foreground-subdued); white-space: nowrap; align-self: center; }
.tn-champ-video { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; color: var(--foreground-subdued); margin-top: 2px; }
.tn-champ-video svg { fill: currentColor; }

/* Page d'un sport. */
.tn-sport-head { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.tn-sport-head .site-h1 { margin: 0 0 2px; }
.tn-sport-badge {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.2), transparent 50%), var(--sport);
}
.tn-events { display: grid; gap: 16px; }
.tn-event {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; border-left: 4px solid var(--sport); scroll-margin-top: 80px;
}
.tn-event:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sport) 35%, transparent); }
.tn-event-head { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.tn-event-sport { color: var(--sport); padding-top: 2px; }
.tn-event-name { font-size: 18px; line-height: 24px; font-weight: 700; margin: 0 0 4px; }
.tn-badge { font-weight: 600; color: var(--foreground); }
.tn-table-wrap { margin: 0 0 12px; }
.tn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tn-table th, .tn-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tn-table thead th { font-size: 12px; font-weight: 650; color: var(--foreground-subdued); }
.tn-table tbody th { font-weight: 500; color: var(--foreground-subdued); white-space: nowrap; }
.tn-table tbody tr:last-child > * { border-bottom: 0; }
.tn-winner { font-weight: 650; }
.tn-winner svg { color: #C9A227; vertical-align: -2px; }
.tn-nat { font-size: 11px; font-weight: 600; color: var(--foreground-subdued); margin-left: 4px; letter-spacing: .03em; }
.tn-score { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Sur téléphone, le tableau devient une pile : pas de défilement horizontal pour lire un score. */
@media (max-width: 47.99em) {
  .tn-table thead { display: none; }
  .tn-table, .tn-table tbody { display: block; }
  .tn-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .tn-table tbody tr:last-child { border-bottom: 0; }
  .tn-table th, .tn-table td { padding: 0; border: 0; }
  .tn-table tbody th { grid-column: 1 / -1; font-size: 12px; }
  .tn-table td.tn-winner { grid-column: 1; }
  .tn-table td:nth-of-type(2) { grid-column: 1; font-size: 13px; color: var(--foreground-subdued); }
  .tn-table td.tn-score { grid-column: 2; grid-row: 2 / span 2; align-self: center; text-align: right; font-size: 13px; }
}
.tn-sources { font-size: 12px; color: var(--foreground-subdued); margin: 10px 0 0; }
.tn-sources a { color: inherit; }
.tn-note { font-size: 13px; color: var(--foreground-subdued); max-width: 72ch; margin: 24px 0 0; }

/* Vidéo au clic (partials/video-embed.php) : aucun appel à YouTube avant le clic. */
.yt-lite {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 18px;
  border-radius: 12px; text-decoration: none; color: #fff; overflow: hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(135deg, #16181d, color-mix(in srgb, var(--sport, #333) 55%, #16181d));
}
.yt-lite:hover .yt-lite-play { transform: scale(1.06); }
.yt-lite-play {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #16181d; transition: transform .15s ease;
}
.yt-lite-play svg { margin-left: 3px; fill: currentColor; }
.yt-lite-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yt-lite-title { font-weight: 600; font-size: 14px; line-height: 19px; }
.yt-lite-meta { font-size: 12px; opacity: .8; }
.yt-lite-note { position: absolute; right: 12px; bottom: 4px; font-size: 10px; opacity: .55; }
.yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* La recherche du hub : une ligne sur grand écran, alignée sur le bas des champs. */
.dir-search { display: grid; gap: 12px; margin-bottom: 24px; }
.dir-search .form-item, .tc .dir-search .form-item { margin: 0; }
.dir-search-btn { justify-content: center; }
@media (min-width: 48em) {
  .dir-search { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
  .dir-search .dir-search-btn { height: var(--density-input-h); }
}

/* Les drapeaux (Countries::flag) : une image, pas un emoji, que Windows n'affiche pas. */
.flag { display: inline-block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); object-fit: cover; vertical-align: -2px; }
.tile-flag { display: flex; align-items: center; gap: 10px; }
.tile-flag .flag { flex: 0 0 auto; }
.site-crumbs .flag { vertical-align: -3px; margin-right: 2px; }
.dir-flag { flex: 0 0 auto; display: inline-flex; }
.dir-flag .flag { border-radius: 6px; }
.dir-sport-badge { position: relative; }
.dir-badge-flag { position: absolute; right: -6px; bottom: -4px; display: inline-flex; }
.dir-badge-flag .flag { box-shadow: 0 0 0 2px var(--card); }

/* Les six sports sur une ligne : le logo au-dessus, pour que « 1 997 clubs » tienne. */
@media (min-width: 62em) {
  .dir-sport { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
}

/* Partager (partials/share.php) : WhatsApp en tête, dans sa couleur. */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 20px; }
.share-label { font-size: 13px; font-weight: 600; color: var(--foreground-subdued); }
.share-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground);
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.share-btn:hover { border-color: var(--foreground-disabled); }
.share-btn.share-icon { width: 36px; padding: 0; justify-content: center; }
.share-whatsapp { background: #25D366; border-color: #25D366; color: #fff; }
.share-whatsapp:hover { background: #1ebe5a; border-color: #1ebe5a; }
.share-btn.is-done { border-color: #25D366; }

/* Le générateur de tournoi : les trois formats sont des cartes à choix, pas un contrôle
   segmenté (dont la hauteur fixe coupait les descriptions). */
.tool-choices { display: grid; gap: 8px; }
.tool-choice {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
.tool-choice:hover { border-color: var(--foreground-disabled); }
.tool-choice:has(input:checked) { border-color: var(--foreground); box-shadow: 0 0 0 1px var(--foreground); }
.tool-choice input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--foreground); }
.tool-choice-title { display: block; font-weight: 600; font-size: 14px; line-height: 20px; }
.tool-choice-desc { display: block; font-size: 13px; line-height: 18px; color: var(--foreground-subdued); margin-top: 2px; }
.tool-form .form-hint { line-height: 18px; }
.tool-actions { margin-top: 16px; gap: 8px; }
.tool-score { width: 92px; white-space: nowrap; color: var(--foreground-subdued); text-align: right; }
.tool-box { display: inline-block; width: 30px; height: 24px; border: 1px solid var(--border); border-radius: 6px; vertical-align: middle; margin: 0 4px; background: var(--card); }
.tool-choice input {
  appearance: none; -webkit-appearance: none; border: 1.5px solid var(--foreground-disabled); border-radius: 50%;
  background: var(--card); cursor: pointer;
}
.tool-choice input:checked { border-color: var(--foreground); box-shadow: inset 0 0 0 3px var(--card); background: var(--foreground); }
.tool-choice input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.tool-form .switch-desc { line-height: 18px; }
/* Les colonnes ne dansent plus d'une manche à l'autre. */
.tool-round table { table-layout: fixed; }
.tool-round td:first-child { width: 130px; }
.tool-round td:nth-child(3) { width: 36px; text-align: center; }
@media (max-width: 47.99em) { .tool-round td:first-child { width: 72px; } .tool-score { width: 80px; } .tool-box { width: 24px; } }
.dir-geo[hidden] + .site-h2 { margin-top: 0; }
.dir-gallery a { position: relative; } .dir-gallery a[hidden] { display: none; }

/* ===========================================================================
   Le générateur et l'organisateur de tournois (maker.js, views/maker/*).
   =========================================================================== */
.mk-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mk-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); }
.mk-steps b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--foreground); color: var(--card); font-size: 12px; }

.mk-output { min-width: 0; }
.mk-actions {
  position: sticky; top: 64px; z-index: 5; display: grid; gap: 10px; padding: 12px; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.mk-actions[hidden] { display: none; }
.mk-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mk-save .btn { gap: 8px; }
.mk-save-note { font-size: 12px; color: var(--foreground-subdued); flex: 1 1 200px; }
.mk-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-share .share-label { margin-right: 4px; }
.mk-title { margin-top: 0; }
.mk-meta { margin: -6px 0 14px; }
.mk-mine-link { margin: -8px 0 16px; font-weight: 600; }

/* Les tours, en liste : un match par ligne, lisible sur téléphone. */
.mk-round { margin: 0 0 18px; }
.mk-round h3 { font-size: 15px; margin: 0 0 8px; }
.mk-round h3 span { font-weight: 400; color: var(--foreground-subdued); font-size: 13px; margin-left: 4px; }
.mk-matches { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.mk-match {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border); font-size: 14px;
}
.mk-match:first-child { border-top: 0; }
.mk-where { font-size: 12px; color: var(--foreground-subdued); }
.mk-vs { text-align: center; color: var(--foreground-subdued); font-size: 12px; }
.mk-side { min-width: 0; overflow-wrap: anywhere; }
.mk-side.is-win { font-weight: 700; }
.mk-score { display: inline-flex; align-items: center; gap: 4px; color: var(--foreground-subdued); white-space: nowrap; }
.mk-score i { font-style: normal; }
.mk-score > i:empty, .mk-score .bk-score:empty { display: inline-block; width: 28px; height: 24px; border: 1px solid var(--border); border-radius: 6px; }
.mk-score .bk-score { min-width: 20px; text-align: center; font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }
.mk-rest { font-size: 13px; color: var(--foreground-subdued); margin: 6px 2px 0; }
@media (max-width: 47.99em) {
  .mk-match { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "where score" "a score" "b score"; row-gap: 2px; }
  .mk-where { grid-area: where; }
  .mk-match > .mk-side:nth-of-type(2) { grid-area: a; }
  .mk-match > .mk-side:nth-of-type(4) { grid-area: b; }
  .mk-vs { display: none; }
  .mk-score { grid-area: score; }
}

/* Le tableau d'élimination : une colonne par tour, les matchs centrés entre ceux qui les
   alimentent. Défilement horizontal sur téléphone, le reste de la page ne bouge pas. */
.bk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 18px; overflow-x: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; }
.bk-round { display: flex; flex-direction: column; min-width: 0; }
.bk-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--foreground-subdued); margin: 0 0 8px; }
.bk-col { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.bk-match { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.bk-match.is-done { border-color: var(--foreground-disabled); }
.bk-no { position: absolute; top: -1px; right: 6px; font-size: 10px; color: var(--foreground-subdued); }
.bk-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 14px; min-height: 40px; }
.bk-side + .bk-side { border-top: 1px solid var(--border); }
.bk-side.is-tbd .bk-name { color: var(--foreground-subdued); font-style: italic; font-size: 13px; }
.bk-side.is-win { font-weight: 700; background: color-mix(in srgb, var(--ball) 28%, var(--card)); }
.bk-name { min-width: 0; overflow-wrap: anywhere; }
.bk-score { min-width: 18px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bk-input { width: 46px; height: 32px; border: 1px solid var(--border); border-radius: 8px; text-align: center; font: inherit; font-weight: 600; background: var(--card); color: var(--foreground); -moz-appearance: textfield; }
.bk-input::-webkit-outer-spin-button, .bk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bk-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.bk-input:disabled { background: var(--fill-tertiary); }
.mk-score.is-edit { color: var(--foreground-subdued); }

.mk-champion {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; margin: 0 0 16px;
  border-radius: var(--radius-lg); background: var(--ball); color: var(--ball-ink); font-size: 16px;
}
.mk-champion b { font-size: 18px; }
.mk-table-wrap { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.mk-table th, .mk-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.mk-table th.num, .mk-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-table thead th { font-size: 12px; color: var(--foreground-subdued); font-weight: 650; }
.mk-table tr.is-lead td { font-weight: 700; }

/* L'organisateur */
.mk-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.mk-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--foreground-subdued); margin: 0 0 4px; }
.mk-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #16a34a; }
.mk-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: mk-pulse 1.6s ease-in-out infinite; }
@keyframes mk-pulse { 50% { opacity: .35; } }
.mk-link-card { margin: 0 0 16px; }
.mk-link code { display: block; padding: 8px 10px; border-radius: 8px; background: var(--fill-tertiary); font-size: 13px; overflow-wrap: anywhere; margin: 0 0 12px; }
.mk-link-card .share { margin: 0; }
.mk-help { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--foreground-subdued); margin: 0 0 12px; }
.mk-saved { display: inline-flex; align-items: center; gap: 4px; color: #16a34a; font-weight: 600; }
.mk-settings { margin: 24px 0 0; padding: 12px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mk-settings summary { cursor: pointer; font-weight: 600; }
.mk-list { display: grid; gap: 10px; }
@media (min-width: 48em) { .mk-list { grid-template-columns: repeat(2, 1fr); } }
.mk-list .site-tile-title { display: inline-flex; align-items: center; gap: 6px; }

/* Les calendriers types (pages/round-robin-schedule.php) */
.rr-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 8px; }
@media (min-width: 48em) { .rr-facts { grid-template-columns: repeat(4, 1fr); } }
.rr-facts > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; flex-direction: column; }
.rr-facts b { font-size: 26px; line-height: 30px; }
.rr-facts span { font-size: 13px; color: var(--foreground-subdued); }
.rr-rounds { display: grid; gap: 10px; }
@media (min-width: 48em) { .rr-rounds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .rr-rounds { grid-template-columns: repeat(3, 1fr); } }
.rr-round { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; }
.rr-round h3 { margin: 0 0 6px; font-size: 15px; }
.rr-round ol { margin: 0; padding: 0; list-style: none; }
.rr-round li { padding: 5px 0; border-top: 1px solid var(--border); font-size: 14px; }
.rr-round li:first-child { border-top: 0; }
.rr-court { display: inline-block; min-width: 64px; font-size: 12px; color: var(--foreground-subdued); }
.rr-bye { margin: 6px 0 0; font-size: 13px; color: var(--foreground-subdued); }
.rr-grid-wrap { overflow-x: auto; }
.rr-grid { border-collapse: collapse; font-size: 13px; background: var(--card); }
.rr-grid th, .rr-grid td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; min-width: 32px; }
.rr-grid tbody th { text-align: left; white-space: nowrap; font-weight: 600; }
.rr-grid td.is-self { background: var(--fill-tertiary); }

@media print {
  .mk-actions, .mk-steps, .share, .mk-settings, .mk-help, .mk-link-card, .site-crumbs, .site-faq, .site-chips { display: none !important; }
  .bk { overflow: visible; }
}
.bk-col { gap: 24px; }
.bk-match { overflow: visible; }
.bk-match .bk-side:first-of-type { border-radius: 10px 10px 0 0; }
.bk-match .bk-side:last-of-type { border-radius: 0 0 10px 10px; }
.bk-no { top: -16px; right: auto; left: 2px; font-weight: 600; }

/* Une photo haute (portrait, logo carré) ne doit pas allonger sa carte : le cadre garde
   son 16/9 et la photo s'y recadre. Depuis l'import des photos Google Maps, presque
   toutes les fiches en ont une : les cartes sans photo prennent le même cadre, pour que
   les rangées restent alignées. */
.dir-card-media { min-height: 0; overflow: hidden; position: relative; }
.dir-card-media img { position: absolute; inset: 0; }
.dir-card-media.is-placeholder { aspect-ratio: 16 / 9; }

/* Le calendrier du générateur : la colonne « heure · terrain · match » un peu plus large. */
.mk-plan-fields { margin-top: 12px; padding: 12px; border-radius: var(--radius); background: var(--fill-tertiary); }
.mk-plan-fields .form-item + .form-item, .mk-plan-fields .tc-two + .form-item, .mk-plan-fields .form-item + .tc-two, .mk-plan-fields .tc-two + .tc-two { margin-top: 10px; }
/* La colonne du formulaire est étroite (~250 px) : deux champs date ou heure côte à côte ne
   tiennent pas (« 09/26/2026 », « 08:00 PM » tronqués, ou débordant du cadre gris, et un
   libellé sur deux lignes décale son champ). Dans le cadre, un champ par ligne, comme sur
   téléphone. */
.mk-plan-fields .tc-two { grid-template-columns: minmax(0, 1fr); }
.tc .mk-plan-fields .tc-two > .form-item + .form-item { margin-top: 10px; }
@media (min-width: 48em) { .mk-match { grid-template-columns: 196px minmax(0, 1fr) 28px minmax(0, 1fr) auto; } }

/* La fédération nationale (page « Padel au Maroc ») : une carte, le nom, les liens officiels. */
.fed { margin-top: 8px; }
.fed-card { display: grid; gap: 14px; }
.fed-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; justify-content: space-between; }
.fed-name { font-size: 18px; font-weight: 600; line-height: 1.3; }
.fed-sub { font-size: 13px; color: var(--foreground-subdued); margin-top: 2px; }
.fed-site { flex: 0 0 auto; gap: 6px; }
.fed-summary { margin: 0; line-height: 1.6; }
.fed-links { margin: 0; }
.fed-others, .fed-source { margin: 0; font-size: 13px; color: var(--foreground-subdued); }
.fed-none { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.fed-none svg { flex: 0 0 auto; margin-top: 3px; color: var(--foreground-subdued); }
.fed-more { margin: 0; font-weight: 600; }

/* La page d'une fédération : logo et nom, puis licence et compétitions à gauche, contact à droite. */
.fed-hero { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.fed-hero .site-h1 { margin: 0; }
.fed-hero .dir-sport-badge { width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto; }
.fed-logo { flex: 0 0 auto; width: 88px; height: 88px; object-fit: contain; border-radius: 12px; background: #fff; padding: 6px; border: 1px solid var(--border); }
.fed-kicker { margin: 6px 0 0; font-size: 14px; }
.fed-lead { max-width: 72ch; }
.fed-page { display: grid; gap: 16px; margin: 8px 0 16px; }
@media (min-width: 62em) { .fed-page { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.fed-main { display: grid; gap: 16px; }
.fed-page .tc-card { margin: 0; }
.fed-block { display: grid; gap: 10px; align-content: start; }
.fed-block p { margin: 0; line-height: 1.6; }
.fed-h2 { font-size: 17px; font-weight: 700; margin: 0; }
.fed-muted { color: var(--foreground-subdued); }
.fed-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fed-side .fed-site { justify-self: start; }
.fed-side .dir-facts { grid-template-columns: 1fr; }
.fed-side dd { margin: 0; overflow-wrap: anywhere; }
.fed-social { margin: 0; }
.fed-page + .fed-others, .fed-others + .fed-others, .fed-others + .fed-source { margin-top: 8px; }
.fed-next { margin-top: 24px; }
.fed-nonelist { margin-top: 16px; }

/* Les partenaires des circuits (hub des tournois) : un volet par circuit, les noms en liste. */
.tn-sponsors { display: grid; gap: 10px; }
.tn-sponsor-tour summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.tn-sponsor-tour summary .num { font-weight: 400; font-size: 13px; color: var(--foreground-subdued); }
.tn-sponsor-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tn-sponsor-list .tier { display: block; font-size: 12px; color: var(--foreground-subdued); }
.tn-sponsor-src { margin: 12px 0 0; font-size: 13px; }

/* Les chaînes YouTube d'un sport (guides) : des cartes-liens, titre et abonnés. */
.yt-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.yt-item { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.yt-item:hover .yt-title { text-decoration: underline; }
.yt-title { font-weight: 600; }
.yt-meta, .yt-note { font-size: 13px; color: var(--foreground-subdued); }
.yt-note { margin: 10px 0 0; }
.yt-list > .tc-card, .tn-sponsors > .tc-card { margin: 0; }

/* Où acheter (boutiques d'un sport dans un pays). */
.shop-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shop-list > .tc-card { margin: 0; }
.shop { display: grid; gap: 6px; align-content: start; }
.shop-name { font-weight: 600; font-size: 16px; }
.shop-head { display: flex; align-items: center; gap: 12px; }
.shop-logo { flex: 0 0 auto; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 4px; box-sizing: border-box; }
.shop-logo-letter { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--foreground-subdued); background: var(--muted); }
.fed-hero .shop-logo { padding: 8px; border-radius: 14px; }
/* Page boutique détaillée (shops/page). */
.shop-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; margin: 0; }
.shop-facts dt { font-size: 12px; color: var(--foreground-subdued); }
.shop-facts dd { margin: 2px 0 0; font-weight: 600; }
.shop-list-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.shop-bullets { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.shop-bullets-lg { font-size: 15px; gap: 6px; }
.shop-text { margin: 0; font-size: 14px; }
.brand-chips-sm { margin: 2px 0 4px; gap: 6px; }
.brand-chips-sm .brand-chip { font-size: 13px; padding: 4px 10px 4px 4px; }
.brand-chips-sm .brand-chip img { width: 20px; height: 20px; }
.shop-plus .shop-name svg { color: var(--success); }
.shop-compare-wrap { overflow-x: auto; }
.shop-compare { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.shop-compare th, .shop-compare td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.shop-compare tbody th { font-weight: 500; color: var(--foreground-subdued); white-space: nowrap; }
.shop-compare thead th { font-weight: 650; }
.shop-faq { display: grid; gap: 8px; }
.shop-faq details { margin: 0; }
.shop-faq summary { cursor: pointer; font-weight: 600; }
.shop-faq p { margin: 8px 0 0; }
div.shop-source p { margin: 0 0 6px; }

/* Puces de marques : logo + nom, en lien vers le site officiel. */
.brand-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.brand-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 14px; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--border); }
.brand-chip img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; background: #fff; }
.brand-chip span:only-child { padding-left: 6px; }
a.brand-chip:hover { border-color: var(--foreground-disabled); }
.shop-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.shop-row:hover { border-color: var(--foreground-disabled); }
.shop-name svg { vertical-align: -3px; }
.shop-meta { font-size: 13px; color: var(--foreground-subdued); }
.shop-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.shop-source { margin: 20px 0 0; font-size: 13px; color: var(--foreground-subdued); }
.shop-teaser { margin-top: 16px; display: block; }

/* L'index des guides, sport par sport : une tuile par sport, ses pages matériel, fédérations, clubs. */
.guide-sport { gap: 6px; }
.guide-sport .site-tile-title { display: inline-flex; align-items: center; gap: 8px; }
.guide-sport a { font-size: 14px; }

/* --- L'application sans store : boutons « Installer sur… » et page page.app ----- */
.home-app { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.home-app-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.app-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.app-badge {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 16px 7px 12px;
  border-radius: 12px; background: #0b0b0b; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .32); transition: border-color .15s ease, transform .15s ease;
}
.app-badge span { display: flex; flex-direction: column; line-height: 1.1; font-weight: 700; font-size: 16px; }
.app-badge small { font-size: 11px; font-weight: 500; opacity: .75; }
/* Téléphone : les trois boutons sur une ligne, plutôt que « Ordinateur » seul en dessous. */
@media (max-width: 30em) {
  .app-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .app-badge { gap: 6px; padding: 6px 8px; min-width: 0; }
  .app-badge span { font-size: 14px; min-width: 0; }
  .app-badge small { font-size: 10px; }
}
.app-badge:hover { border-color: var(--ball); color: #fff; }
.app-badge:focus-visible { outline: 2px solid var(--ball); outline-offset: 2px; }
/* L'appareil du visiteur (pwa.js → html[data-device]) : son bouton est souligné. */
html[data-device="ios"] .app-badge[data-for="ios"],
html[data-device="android"] .app-badge[data-for="android"],
html[data-device="desktop"] .app-badge[data-for="desktop"] { border-color: var(--ball); box-shadow: 0 0 0 1px var(--ball); }
@media (prefers-reduced-motion: no-preference) { .app-badge:hover { transform: translateY(-1px); } }
/* L'application déjà installée et ouverte : rien à proposer. */
html.is-standalone .home-app { display: none; }

.app-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 32px; }
.app-hero-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); }
@media (max-width: 35.99em) { .app-hero { grid-template-columns: 1fr; } .app-hero-icon { width: 72px; height: 72px; border-radius: 16px; } }
.app-hero .app-badges { margin-top: 16px; }
.app-now { margin: 16px 0 4px; }
.app-now-hint { margin: 0 0 8px; font-weight: 600; }

.app-benefits { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 36em) { .app-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .app-benefits { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.app-benefits li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.app-benefits strong { font-size: 16px; align-self: center; }
.app-benefits li > span:last-child { grid-column: 2; color: var(--foreground-subdued); font-size: 14px; line-height: 20px; }
.app-benefit-icon { grid-row: span 2; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #0b0b0b; color: var(--ball); }

.app-devices { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 36px; }
@media (min-width: 62em) { .app-devices { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.app-device { padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); scroll-margin-top: calc(var(--tc-header-h, 64px) + 16px); }
.app-device h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; }
.app-device ol, .app-device ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 22px; }
/* L'appareil du visiteur passe en premier et en avant ; celui visé par l'ancre aussi. */
html[data-device="ios"] .app-device[data-for="ios"],
html[data-device="android"] .app-device[data-for="android"],
html[data-device="desktop"] .app-device[data-for="desktop"] { order: -1; border-color: var(--ball-ink, #1a1a1a); box-shadow: 0 0 0 2px var(--ball); }
.app-device:target { box-shadow: 0 0 0 3px var(--ball); }

.app-faq details { border-bottom: 1px solid var(--border); padding: 12px 0; }
.app-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; }
.app-faq details p { margin: 8px 0 0; color: var(--foreground-subdued); }
.os-logo { flex: 0 0 auto; display: block; }
.os-logo-android { color: #3DDC84; }   /* le vert d'Android */
.app-device .os-logo-ios { color: var(--foreground); }

/* ===========================================================================
   Joueurs et entraîneurs (views/people/*) : les listes, puis la fiche.
   =========================================================================== */
.pl-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-section-head a { font-size: 14px; font-weight: 600; }
.pl-grid { display: grid; gap: 10px; }
@media (min-width: 30em) { .pl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .pl-grid { grid-template-columns: repeat(3, 1fr); } }
.pl-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-left: 4px solid var(--sport); min-width: 0;
}
.pl-card:hover { border-color: var(--foreground-disabled); border-left-color: var(--sport); }
.pl-avatar {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  background: var(--muted);
}
.pl-avatar-initials {
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.2), transparent 50%), var(--sport);
}
.pl-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-card-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--foreground-subdued); }
.pl-sources { margin-top: 24px; font-size: 13px; }

.pl-hero { display: flex; gap: 20px; align-items: flex-start; margin: 0 0 16px; flex-wrap: wrap; }
.pl-photo { flex: 0 0 140px; width: 140px; margin: 0; }
.pl-photo img { width: 140px; height: 140px; border-radius: 16px; object-fit: cover; object-position: 50% 20%; display: block; background: var(--muted); border-bottom: 4px solid var(--sport); }
span.pl-photo { height: 140px; border-radius: 16px; font-size: 40px; }
.pl-photo figcaption { font-size: 11px; line-height: 1.35; margin-top: 4px; }
.pl-photo figcaption a { color: var(--foreground-subdued); }
.pl-hero-body { flex: 1 1 280px; min-width: 0; }
.pl-hero-body .site-h1 { margin: 0 0 6px; }
.pl-hero-sport { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-weight: 600; }
.pl-hero-sport > span { display: inline-flex; align-items: center; gap: 5px; }
.pl-hero-sport .sport-icon { color: var(--sport); }
.pl-circuit { color: var(--foreground-subdued); font-weight: 500; }
.pl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 20px; margin: 0; }
.pl-facts dt { font-size: 12px; color: var(--foreground-subdued); }
.pl-facts dd { margin: 2px 0 0; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pl-cat { font-size: 12px; color: var(--foreground-subdued); }
.pl-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-links a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 999px; color: inherit; text-decoration: none; background: var(--card);
}
.pl-links a:hover { border-color: var(--foreground-disabled); }
.pl-empty-body { max-width: 52ch; margin: 6px auto 0; color: var(--foreground-subdued); }
.pl-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.pl-rank { color: var(--foreground); font-weight: 650; }
.pl-rank + * { margin-left: 2px; }
.pl-rels { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.pl-rels li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-rels a { font-weight: 600; }
.pl-rels .pl-cat a { font-weight: 500; color: var(--foreground-subdued); }

/* ===========================================================================
   « Se connecter » dans la barre du site, et la page « Mon compte » (views/account/clubs.php).
   =========================================================================== */
.site-account {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 10px; border-radius: var(--radius); color: #fff; text-decoration: none; font-size: 14px; font-weight: 500;
}
@media (hover: hover) { .site-account:hover { background: rgba(255, 255, 255, .09); } }
@media (max-width: 61.99em) {
  .site-account { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .site-account span { display: none; }
}
.acc-mine {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; padding: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); border-left: 4px solid var(--ball);
}
.acc-logo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--border); }
.acc-logo-sm { flex-basis: 40px; width: 40px; height: 40px; border-radius: 10px; }
.acc-initials { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ball-ink); background: var(--ball); border: 0; }
.acc-mine-body { flex: 1 1 180px; min-width: 0; }
.acc-mine-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--foreground-subdued); }
.acc-mine-name { font-size: 18px; font-weight: 700; }
.acc-mine-name span, .acc-name span { font-weight: 400; color: var(--foreground-subdued); font-size: 14px; }
.acc-mine-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-search {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 12px; height: 44px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--foreground-subdued);
}
.acc-search input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--foreground); }
.acc-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.acc-list li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.acc-list li[hidden] { display: none; }
.acc-name { flex: 1 1 160px; min-width: 0; font-weight: 600; color: inherit; text-decoration: none; }
.acc-actions { display: flex; gap: 6px; }
.acc-missing { margin-top: 24px; }
.acc-missing-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ===========================================================================
   La recherche du site : le bouton de la barre, la fenêtre (site-search.js), la page.
   =========================================================================== */
.site-search-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 1 240px; min-width: 0; height: 36px; padding: 0 10px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
  color: rgba(255, 255, 255, .75); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.site-search-btn span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search-btn kbd { font: inherit; font-size: 11px; padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; }
@media (hover: hover) { .site-search-btn:hover { background: rgba(255, 255, 255, .13); color: #fff; } }
/* Jusqu'aux grands écrans, la barre n'a pas la place d'un champ : une loupe, comme sur téléphone. */
@media (max-width: 87.49em) {
  .site-search-btn { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; border: 0; color: #fff; }
  .site-search-btn span, .site-search-btn kbd { display: none; }
}
@media (min-width: 87.5em) { .site-search-btn { flex: 0 1 220px; min-width: 170px; } }

/* Téléphone (jusqu'à 480 px) : logo, loupe, compte, menu. « Créer mon club » passe en tête
   du tiroir (.mm-extra-top), sinon la barre dépasse l'écran et toute la page glisse. */
.mm-extra-top { display: none; }
@media (max-width: 30em) {
  .tc .site-header .site-bar > .site-cta { display: none; }
  .site-logo { width: 124px; height: auto; }
  .site-bar { gap: 4px; }
  /* Deux colonnes égales : les deux boutons ont exactement la même taille. */
  .mm-extra.mm-extra-top { display: grid; grid-template-columns: 1fr 1fr; padding-top: 16px; padding-bottom: 8px; }
  .tc .site-header .mm-extra-top .btn {
    justify-content: center; min-width: 0; height: 44px; min-height: 44px;
    padding: 0 12px; font-size: 14px; line-height: 1; white-space: nowrap;
  }
  .tc .site-header .mm-extra-top .site-cta::after { content: none; }
}
html.srch-lock { overflow: hidden; }
.srch-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .5);
  display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px;
}
.srch-overlay[hidden] { display: none; }
.srch-panel {
  width: 100%; max-width: 640px; max-height: 80vh; display: flex; flex-direction: column;
  background: var(--card); color: var(--foreground); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
@media (max-width: 40em) {
  .srch-overlay { padding: 0; align-items: stretch; }
  .srch-panel { max-width: none; max-height: none; height: 100%; border-radius: 0; }
}
.srch-form {
  display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; min-height: 54px;
  border-bottom: 1px solid var(--border); color: var(--foreground-subdued);
}
.srch-form input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--foreground); }
.srch-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--radius); }
.srch-results { overflow-y: auto; padding: 8px; }
.srch-hint { margin: 12px; color: var(--foreground-subdued); font-size: 14px; }
.srch-gt { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--foreground-subdued); }
.srch-item, .srch-list a {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--radius);
  color: inherit; text-decoration: none;
}
.srch-item[aria-selected="true"], .srch-item:hover, .srch-list a:hover { background: var(--fill-tertiary); }
.srch-t { font-weight: 600; }
.srch-s { font-size: 13px; color: var(--foreground-subdued); }
.srch-all { display: block; margin: 8px 10px 4px; font-weight: 600; font-size: 14px; }
/* La page de résultats : le même formulaire, dans une carte. */
main .srch-form { margin: 0 0 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.srch-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }

/* --- Téléphone : resserrer ce qui s'étire en colonne ---------------------------------------- */
@media (max-width: 29.99em) {
  /* Accueil, « Choisissez votre sport » : une carte par ligne, le logo à gauche du texte,
     plutôt que deux colonnes de 160 px où le texte se tasse. */
  .home-sports { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sport-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; padding: 14px 16px; }
  .sport-tile > * { grid-column: 2; }
  .sport-tile > .sport-tile-badge { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 14px; margin: 0; }
  .sport-tile-badge .sport-icon { width: 34px; height: 34px; }
  .sport-tile-links { margin-top: 2px; }

  /* Les listes de pays (annuaire, pages sport, boutiques, fédérations) : deux colonnes de
     tuiles compactes au lieu d'une grande carte par ligne. Les tuiles à photo restent seules. */
  .site-grid-4:not(:has(.site-tile-photo)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .site-grid-4:not(:has(.site-tile-photo)) .site-tile { padding: 10px 12px; gap: 2px; border-radius: var(--radius); }
  .site-grid-4:not(:has(.site-tile-photo)) .site-tile-title { font-size: 14px; line-height: 19px; }
  .site-grid-4:not(:has(.site-tile-photo)) .site-tile-sub { font-size: 12px; }

  /* Le logo du sport au-dessus du titre, pour que le titre garde toute la largeur. */
  .dir-title { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dir-title .dir-sport-badge { width: 44px; height: 44px; border-radius: 12px; }
}

/* Le contact de la plateforme, au pied de page. */
.site-footer-mail { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--foreground); text-decoration: none; }
.site-footer-mail:hover { text-decoration: underline; }
@media (min-width: 48em) { .site-footer-mail { margin-inline-start: auto; } .site-footer-bottom .lang-pick { margin-inline-start: 0; } }

/* ---------------------------------------------------------------------------
   La fiche enrichie d'un club (views/directory/club-enriched.php) : étiquettes,
   chiffres clés, galerie légendée, blocs, tableau des tournois, avis, boutiques.
   --------------------------------------------------------------------------- */
.dir-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.dir-tag { font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); text-decoration: none; }
.dir-tag.is-sport { background: var(--foreground); border-color: var(--foreground); color: var(--card); }
.dir-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
@media (min-width: 48em) { .dir-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dir-kpis > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; }
.dir-kpis b { display: block; font-size: 24px; line-height: 1.15; }
.dir-kpis span { font-size: 13px; color: var(--foreground-subdued); }
.dir-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 48em) { .dir-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dir-photos .is-first { grid-column: span 2; grid-row: span 2; } }
.dir-photos figure { margin: 0; min-width: 0; }
.dir-photos .is-first { grid-column: 1 / -1; }
.dir-photos a { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--fill-tertiary); }
.dir-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dir-photos .is-first img { aspect-ratio: 4 / 3; }
@media (min-width: 48em) { .dir-photos .is-first img { aspect-ratio: auto; height: 100%; min-height: 340px; max-height: 560px; } }
.dir-photos figcaption { font-size: 12.5px; line-height: 1.35; margin-top: 5px; }
.dir-photos figcaption span { display: block; color: var(--foreground-subdued); font-size: 11.5px; margin-top: 2px; }
.dir-photos-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; margin: 10px 0 16px; }
.dir-photos-foot span { flex-basis: 100%; color: var(--foreground-subdued); }
.dir-block { padding: 16px; margin: 0 0 16px; }
.dir-block-title { font-size: 16px; margin: 0 0 8px; }
.dir-h3 { font-size: 15px; margin: 16px 0 6px; }
.dir-list-plain { margin: 0; padding: 0; list-style: none; }
.dir-list-plain.is-bullets, .tc-card .dir-list-plain { list-style: disc; padding-inline-start: 20px; }
.dir-list-plain li { margin: 4px 0; }
.dir-src { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 6px; background: var(--fill-tertiary); color: var(--foreground-subdued); vertical-align: 1px; }
.dir-table-wrap { overflow-x: auto; max-width: 100%; }
.dir-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dir-table th, .dir-table td { text-align: start; padding: 8px; border-bottom: 1px solid var(--border); }
.dir-table th { font-size: 13px; color: var(--foreground-subdued); font-weight: 600; }
.dir-score { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.dir-score-big { font-size: 40px; font-weight: 700; line-height: 1; }
.dir-bars { flex: 1; min-width: 200px; max-width: 340px; }
.dir-bar { display: grid; grid-template-columns: 34px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; margin: 3px 0; }
.dir-bar i { display: block; height: 8px; border-radius: 4px; background: var(--fill-tertiary); overflow: hidden; }
.dir-bar b { display: block; height: 100%; background: #F5B301; }
.dir-shops { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 48em) { .dir-shops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dir-shop { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; color: var(--foreground); text-decoration: none; }
.dir-shop:hover { border-color: var(--foreground-subdued); }
.dir-shop span { display: block; font-size: 13px; color: var(--foreground-subdued); }
.dir-sources { padding-inline-start: 20px; font-size: 14px; }
.dir-sources li { margin: 5px 0; }
.dir-actions { display: grid; gap: 8px; margin-top: 12px; }
.dir-actions .btn { width: 100%; justify-content: center; }
.dir-two > * { min-width: 0; }
.dir-block .btn, .dir-actions .btn { white-space: normal; height: auto; min-height: 40px; max-width: 100%; text-align: center; line-height: 1.3; padding-block: 8px; overflow-wrap: anywhere; }