/* ES Carpiquet Volley : feuille de style principale. Tous les réglages visuels passent par les variables ci-dessous.

   Direction : sportif et éditorial, angles vifs. Aucun arrondi (le logo seul est rond). Thème clair uniquement.
   Signature : le biseau à 17° des bandes du logo (--biseau sur les boutons, skewX(-17deg) sur les photos et les bandes).
   Un seul accent : le jaune. Le bleu nuit est réservé à l'en-tête, au héros de l'accueil, aux bandeaux de page,
   à un bandeau par page au plus et au pied de page. Aucune couleur en dur : les nuances dérivent des variables (color-mix).
   Animations : transform et opacity seulement, pour un retour au survol ou au clic et pour l'apparition d'un contenu.
   Les composants carrousel, effectif, stages, réseaux et boutique ont leur propre feuille dans css/. */
:root {
  color-scheme: light;
  --blue: #2b4a9b;          /* bleu du logo */
  --navy: #0e1b45;          /* bleu nuit */
  --navy-2: #172c6b;
  --yellow: #f5d400;        /* jaune du logo : unique accent */
  --yellow-soft: #fbf1a6;
  --on-yellow: #0e1b45;

  --bg: #ffffff;
  --surface: #ffffff;
  --mist: #eef1f8;          /* fond alterné, blanc cassé froid */
  --text: #0e1b45;
  --muted: #4a5578;
  --line: #d5dae8;
  --link: #2b4a9b;
  --ok: #1d6b3a;            /* victoire */
  --on-ok: #ffffff;
  --ko: #a32d2d;            /* défaite */
  --on-ko: #ffffff;

  --radius: 0px;
  --biseau: 13px;           /* décalage du biseau à 17° pour une hauteur de 44 px */
  --shadow: 0 18px 40px -22px color-mix(in srgb, var(--navy) 60%, transparent); /* élévation réelle : menus, panier, fenêtres */
  --header-h: 72px;
  --wrap: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-title: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-title); font-weight: 700; line-height: .95; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 6.5vw, 5rem); }
h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1; }
p { margin: 0 0 1em; max-width: 65ch; }
::selection { background: var(--yellow); color: var(--on-yellow); }
.ph { font-size: 1.2em; line-height: 1; }
a, button, input, select, textarea, summary { touch-action: manipulation; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--yellow); color: var(--on-yellow); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Focus clavier : bleu nuit sur fond clair, jaune sur fond bleu nuit */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.on-dark :focus-visible, .section--dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--yellow); }
.board :focus-visible { outline-color: var(--navy); }

/* ===== Boutons : principal jaune biseauté, secondaire à contour carré, lien souligné, bouton-icône carré ===== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 2px solid var(--navy); border-radius: 0;
  background: transparent; color: var(--navy);
  font: 700 1.0625rem/1 var(--font-title); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.btn .ph { font-size: 1.15em; transition: transform .2s var(--ease); }
.btn:hover .ph-arrow-right { transform: translateX(3px); }
.btn:hover .ph-arrow-up-right { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px); }
.btn--line:hover, .btn:not(.btn--primary):hover { background: var(--navy); color: var(--bg); }
.btn--primary {
  border: 0; padding-right: calc(22px + var(--biseau));
  background: var(--yellow); color: var(--on-yellow);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--biseau)) 100%, 0 100%);
}
.btn--primary:hover { background: var(--navy); color: var(--bg); }
.on-dark .btn:not(.btn--primary), .section--dark .btn:not(.btn--primary) { border-color: var(--bg); color: var(--bg); }
.on-dark .btn:not(.btn--primary):hover, .section--dark .btn:not(.btn--primary):hover,
.on-dark .btn--primary:hover, .section--dark .btn--primary:hover { background: var(--bg); color: var(--navy); }
/* le biseau (clip-path) masque un contour extérieur : le focus du bouton principal est tracé à l'intérieur */
.btn--primary:focus-visible { outline: 3px solid var(--navy); outline-offset: -7px; }
.btn--icon { width: 48px; padding: 0; }
.btn--icon .ph { font-size: 1.35rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:active, .btn[aria-disabled="true"]:active { transform: none; }
.btn:not(.btn--primary)[disabled]:hover, .btn:not(.btn--primary)[aria-disabled="true"]:hover { background: transparent; color: var(--navy); }
.btn--primary[disabled]:hover, .btn--primary[aria-disabled="true"]:hover { background: var(--yellow); color: var(--on-yellow); }

.textlink {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--text); font: 700 1.0625rem/1.2 var(--font-title); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: var(--yellow); }
.textlink:hover::after { background: var(--navy); }
.textlink .ph { transition: transform .2s var(--ease); }
.textlink:hover .ph-arrow-right { transform: translateX(4px); }
.textlink:hover .ph-arrow-up-right { transform: translate(2px, -2px); }
.on-dark .textlink, .section--dark .textlink { color: var(--bg); }
.on-dark .textlink:hover::after, .section--dark .textlink:hover::after { background: var(--bg); }
.section--dark a:not([class]) { color: var(--bg); }

/* ===== En-tête : logo à gauche, toutes les pages visibles avec leurs sous-menus, aucun bouton « menu ».
   Sur petit écran les pages passent sur plusieurs lignes ; à partir de 1240 px tout tient sur une ligne. ===== */
.site-header { position: relative; z-index: 50; background: var(--navy); color: var(--bg); border-bottom: 3px solid var(--yellow); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding-top: 12px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; min-height: 52px; color: var(--bg); text-decoration: none; }
.brand img { width: 52px; height: 52px; border-radius: 50%; background: var(--bg); border: 2px solid var(--bg); object-fit: cover; }
.brand span { font: 700 1.375rem/1 var(--font-title); letter-spacing: .04em; text-transform: uppercase; }
.nav { order: 3; flex: 1 1 100%; margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.nav ul { position: relative; display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 4px 0 6px; list-style: none; }
.nav > ul > li > a, .nav__link {
  position: relative; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px;
  border: 0; background: none; color: var(--bg); cursor: pointer;
  font: 600 1.0625rem/1 var(--font-title); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.nav > ul > li > a::after, .nav__link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.nav > ul > li > a:hover::after, .nav__link:hover::after, .nav > ul > li > a[aria-current="page"]::after, .nav li.open > .nav__link::after { transform: scaleX(1); }
.nav li:has(.sub [aria-current="page"]) > .nav__link::after { transform: scaleX(1); } /* règle seule : :has() n'invalide pas les autres */
.nav__link .ph { font-size: 1rem; transition: transform .2s var(--ease); }
.nav li.open > .nav__link .ph { transform: rotate(180deg); }
.sub {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5; display: flex; flex-direction: column; padding: 6px 0;
  background: var(--navy-2); border-top: 3px solid var(--yellow); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.nav li.open > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sub a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 20px 10px 17px; border-left: 3px solid transparent;
  color: var(--bg); font: 600 1rem/1.25 var(--font-body); text-decoration: none;
}
.sub a:hover, .sub a[aria-current="page"] { border-left-color: var(--yellow); background: color-mix(in srgb, var(--bg) 8%, transparent); }
.cart-btn {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0;
  border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); border-radius: 0; background: transparent;
  color: var(--bg); font-size: 1.375rem; cursor: pointer;
}
.cart-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.cart-btn b {
  position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  background: var(--yellow); color: var(--on-yellow); box-shadow: 0 0 0 2px var(--navy);
  font: 700 .75rem/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.cart-btn b[hidden] { display: none; }
@media (min-width: 1240px) {
  .site-header { position: sticky; top: 0; }
  .site-header .wrap { flex-wrap: nowrap; height: var(--header-h); padding-top: 0; gap: 20px; }
  .brand span { display: none; }
  .nav { order: 0; flex: 0 1 auto; align-self: stretch; margin: 0 0 0 auto; border-top: 0; }
  .nav ul { position: static; flex-wrap: nowrap; height: 100%; margin: 0; padding: 0; }
  .nav li { position: relative; display: flex; }
  .nav > ul > li > a, .nav__link { padding: 0 11px; }
  .nav > ul > li > a::after, .nav__link::after { left: 11px; right: 11px; bottom: 18px; }
  .sub { right: auto; min-width: 240px; }
  .nav li:hover > .sub, .nav li:focus-within > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .cart-btn { margin-left: 0; }
}
@media (max-width: 1239px) { :root { --header-h: 0px; } }

/* ===== Photos biseautées : cadre incliné du même angle que les bandes du logo, filet jaune sur le bord ===== */
.slant { position: absolute; top: 0; bottom: 0; z-index: -1; overflow: hidden; transform: skewX(-17deg); background: var(--navy-2); }
.slant img { position: absolute; top: 0; left: -22%; width: 144%; max-width: none; height: 100%; object-fit: cover; transform: skewX(17deg); }

/* ===== Héros de l'accueil : texte à gauche, photo biseautée, tableau du prochain match ===== */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: var(--bg); }
.hero__grid { display: grid; gap: 32px; padding-block: 28px 48px; }
.hero__grid > * { min-width: 0; }
.hero h1 { color: var(--bg); font-size: clamp(3rem, 7.2vw, 6.25rem); line-height: .9; }
.hero h1 em { display: block; font-style: normal; color: var(--yellow); }
.hero__lead { margin: 20px 0 28px; max-width: 34ch; color: color-mix(in srgb, var(--bg) 84%, var(--navy)); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero--photo .slant { right: -3%; width: 42%; border-left: 12px solid var(--yellow); }
.hero--photo .slant img { left: -20%; width: 140%; object-position: 50% 0%; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: end; min-height: min(680px, calc(100dvh - var(--header-h))); padding-block: 56px 40px; }
  .hero__txt { align-self: center; }
  .hero--photo .board { max-width: 460px; margin-left: auto; }
}
@media (max-width: 959px) {
  .hero--photo .slant {
    position: relative; top: auto; bottom: auto; right: auto; z-index: 0; width: auto; height: clamp(240px, 64vw, 420px);
    border-left: 0; transform: none; clip-path: polygon(0 0, 100% 0, calc(100% - min(19.6vw, 128px)) 100%, 0 100%);
  }
  .hero--photo .slant img { left: 0; width: 100%; transform: none; object-position: 50% 10%; }
}

/* Tableau du prochain match (rempli par calendrier.js) */
.board { background: var(--surface); color: var(--text); }
.board__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px;
  padding: 12px calc(20px + var(--biseau)) 12px 20px; background: var(--yellow); color: var(--on-yellow);
  font: 700 1rem/1.2 var(--font-title); letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--biseau)) 100%, 0 100%);
}
.board__body { padding: 20px; }
.board__vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; text-align: center; }
.board__team { font: 700 clamp(1.125rem, 1.5vw, 1.375rem)/1.05 var(--font-title); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
.board__time { font: 700 3.25rem/1 var(--font-title); font-variant-numeric: tabular-nums; }
.board__meta { margin: 14px auto 0; color: var(--muted); font-size: .9375rem; text-align: center; }
.board__count { margin: 10px auto 0; font-weight: 600; text-align: center; }
.board__count strong { font-variant-numeric: tabular-nums; }
.board__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: .9375rem; }
.board__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.board__foot a:hover { text-decoration-color: var(--navy); }
.score { display: inline-flex; align-items: center; gap: 6px; font: 700 3.25rem/1 var(--font-title); font-variant-numeric: tabular-nums; }
.score span { min-width: 1.1ch; color: var(--muted); text-align: center; }
.score span.w { color: var(--text); }
.score span + span::before { content: ":"; margin-right: 6px; color: var(--muted); }
@media (max-width: 560px) {
  .board__head { flex-direction: column; align-items: flex-start; }
  .board__vs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ===== Le club en chiffres (accueil) ===== */
.stats { background: var(--bg); }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-big { position: relative; display: grid; align-content: start; gap: 6px; padding: 28px 12px 28px 22px; }
.stat-big:first-child { padding-left: 0; }
.stat-big b { color: var(--text); font: 700 clamp(3.25rem, 6.5vw, 4.75rem)/.9 var(--font-title); font-variant-numeric: tabular-nums; }
.stat-big span { color: var(--muted); font-weight: 600; line-height: 1.35; }
.stat-big + .stat-big::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 4px; background: var(--yellow); transform: skewX(-17deg); }
@media (max-width: 859px) { .stat-big:nth-child(3) { padding-left: 0; } .stat-big:nth-child(3)::before { display: none; } }
@media (min-width: 860px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat-big { padding-block: 36px; } }

/* ===== Sections : blanc et brume en alternance, un seul bandeau bleu nuit par page ===== */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section--tint { background: var(--mist); }
.section--dark { background: var(--navy); color: var(--bg); }
.section--dark h2, .section--dark h3 { color: var(--bg); }
.section__head { margin-bottom: 32px; }
.section__head p { margin: 14px 0 0; color: var(--muted); }
.section--dark .section__head p { color: color-mix(in srgb, var(--bg) 80%, var(--navy)); }
.section__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.wrap > h2:not(.sr) { margin-bottom: 28px; }
.split { display: grid; gap: 40px; }
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.stack { display: grid; gap: 16px; align-content: start; }
form.stack { gap: 22px; }

/* ===== Matchs : bande défilante de l'accueil ===== */
.strip { display: flex; gap: 12px; margin: 0; padding: 2px 2px 18px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--navy) transparent; }
.strip > li { flex: 0 0 min(300px, 84%); scroll-snap-align: start; }
.strip > .skeleton { height: 200px; margin: 0; }
.match { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.match::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.match:hover::after, .match:focus-visible::after { transform: scaleX(1); }
.match__meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.match__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 1.375rem/1.1 var(--font-title); text-transform: uppercase; }
.match__row span { min-width: 0; overflow-wrap: anywhere; }
.match__row.us span::before { content: ""; display: inline-block; width: 7px; height: .72em; margin-right: 8px; background: var(--yellow); transform: skewX(-17deg); }
.match__row b { font: 700 2rem/1 var(--font-title); font-variant-numeric: tabular-nums; }
.match__row.lost b { color: var(--muted); }
.match .calmeta { font-size: .875rem; }

/* Étiquettes carrées */
.tag { display: inline-block; padding: 4px 8px; font: 700 .75rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.tag--w { background: color-mix(in srgb, var(--ok) 14%, var(--bg)); color: var(--ok); }
.tag--l { background: color-mix(in srgb, var(--ko) 12%, var(--bg)); color: var(--ko); }
.tag--n { background: var(--mist); color: var(--text); }
.tag--next { padding-right: calc(8px + 6px); background: var(--yellow); color: var(--on-yellow); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

/* ===== Classement ===== */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }
table.rank { width: 100%; min-width: 420px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
[data-compact] table.rank { min-width: 0; }
.rank th, .rank td { padding: 11px 14px; text-align: right; }
.rank th:nth-child(2), .rank td:nth-child(2) { text-align: left; }
.rank thead th { background: var(--mist); color: var(--muted); font: 700 .8125rem/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; border-bottom: 2px solid var(--navy); }
.rank tbody td { border-bottom: 1px solid var(--line); }
.rank tbody tr:last-child td { border-bottom: 0; }
.rank td:first-child { width: 3rem; font-weight: 700; }
.rank tr.me { background: var(--yellow-soft); color: var(--navy); font-weight: 700; }
.rank tr.me td:first-child { box-shadow: inset 4px 0 0 var(--yellow); }

/* ===== Équipes de l'accueil : grille à 7 cases, photo en haut, texte dessous (rien posé sur les photos) ===== */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.cell { position: relative; display: flex; flex-direction: column; min-width: 0; padding-bottom: 16px; border-bottom: 2px solid var(--line); color: var(--text); text-decoration: none; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.cell:hover::after, .cell:focus-visible::after { transform: scaleX(1); }
.cell__bg { order: -1; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 14px; object-fit: cover; background: var(--mist); }
.cell h3 { padding-right: 32px; font-size: clamp(1.5rem, 3.2vw, 2rem); }
.cell p { margin: 6px 0 0; padding-right: 32px; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.cell > .ph { position: absolute; right: 0; bottom: 18px; font-size: 1.4rem; transition: transform .25s var(--ease); }
.cell:hover > .ph { transform: translateX(4px); }
.cell--big h3 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.c-n2, .c-r1, .c-dep { grid-column: 1 / -1; }
.c-r1 .cell__bg, .c-dep .cell__bg { aspect-ratio: 16 / 9; }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c-n2 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .c-n3 { grid-column: 3; grid-row: 1; }
  .c-pn { grid-column: 4; grid-row: 1; }
  .c-r1 { grid-column: 3 / 5; grid-row: 2; }
  .c-dep { grid-column: 1 / 3; grid-row: 3; }
  .c-m18 { grid-column: 3; grid-row: 3; }
  .c-m15 { grid-column: 4; grid-row: 3; }
  .cell__bg, .c-r1 .cell__bg, .c-dep .cell__bg { height: clamp(150px, 15vw, 200px); aspect-ratio: auto; }
  .cell--big .cell__bg { flex: 1 1 auto; height: 0; min-height: 260px; }
}

/* ===== Photos : la légende et le crédit sont sous l'image, jamais posés dessus ===== */
.photo { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; }
.photo > img { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: cover; background: var(--mist); }
.photo figcaption { flex: none; display: grid; gap: 2px; padding-top: 10px; color: var(--text); font-size: .875rem; line-height: 1.4; }
.photo figcaption small { color: var(--muted); font-size: .8125rem; }
.on-dark .photo figcaption, .section--dark .photo figcaption { color: var(--bg); }
.on-dark .photo figcaption small, .section--dark .photo figcaption small { color: color-mix(in srgb, var(--bg) 76%, var(--navy)); }
.photo img.top { object-position: 50% 8%; }
.ar-4-3 { aspect-ratio: 4 / 3; } .ar-3-4 { aspect-ratio: 3 / 4; } .ar-3-2 { aspect-ratio: 3 / 2; }
.ar-4-5 { aspect-ratio: 4 / 5; } .ar-1-1 { aspect-ratio: 1; } .ar-16-9 { aspect-ratio: 16 / 9; }
/* Sur une figure, le format s'applique à l'image : la légende s'ajoute dessous */
figure.photo:is(.ar-4-3, .ar-3-4, .ar-3-2, .ar-4-5, .ar-1-1, .ar-16-9) { aspect-ratio: auto; }
figure.ar-4-3 > img { aspect-ratio: 4 / 3; } figure.ar-3-4 > img { aspect-ratio: 3 / 4; } figure.ar-3-2 > img { aspect-ratio: 3 / 2; }
figure.ar-4-5 > img { aspect-ratio: 4 / 5; } figure.ar-1-1 > img { aspect-ratio: 1; } figure.ar-16-9 > img { aspect-ratio: 16 / 9; }

/* Mosaïque « Le club en images » : deux rangées de largeurs inégales, proportionnées aux photos */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 24px 12px; }
.mosaic > :nth-child(odd) { grid-column: 1 / -1; }
.mosaic > :nth-child(odd) > img { aspect-ratio: 3 / 2; }
.mosaic > :nth-child(even) > img { aspect-ratio: 3 / 4; }
@media (min-width: 860px) {
  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; gap: 28px 16px; }
  .mosaic > :nth-child(1) { grid-column: span 5; }
  .mosaic > :nth-child(2) { grid-column: span 3; }
  .mosaic > :nth-child(3) { grid-column: span 4; }
  .mosaic > :nth-child(4) { grid-column: span 4; }
  .mosaic > :nth-child(5) { grid-column: span 8; }
  .mosaic > * > img { flex: none; aspect-ratio: auto; }
  .mosaic > :nth-child(-n+3) > img { height: clamp(260px, 24vw, 340px); }
  .mosaic > :nth-child(n+4) > img { height: clamp(380px, 37vw, 530px); }
}

/* Fiches à photo et paires de photos (pages Équipes et Formation) */
.card--photo { display: grid; align-content: start; padding: 0; overflow: hidden; }
.card--photo .photo { width: 100%; aspect-ratio: 1 / 1; max-height: 520px; }
.card--photo .photo figcaption { padding: 10px 24px 0; }
.card--photo > div { padding: 20px 24px 24px; }
.card--photo h3 { margin-bottom: 8px; }
.card--photo p:last-child { margin-bottom: 0; }
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: 100%; }
.photo-pair .photo { aspect-ratio: 3 / 4; }
.photo-pair figcaption { padding-inline: 12px; }
.photo-pair figcaption small { display: none; }
.card--photo .photo-pair .photo { max-height: none; }

/* ===== Boutique (aperçu de l'accueil et page) ===== */
.shop-banner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: end; margin-bottom: 40px; }
@media (min-width: 900px) { .shop-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; } }
.prod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prod { display: flex; flex-direction: column; height: 100%; }
.prod__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); color: var(--navy); font-size: 4rem; }
.prod__img small { position: absolute; left: 12px; bottom: 10px; color: var(--muted); font: 600 .75rem/1.2 var(--font-body); }
.prod__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding-top: 14px; }
.prod__name { margin: 0; font: 600 1.0625rem/1.3 var(--font-body); }
.prod__price { font: 700 1.5rem/1 var(--font-title); letter-spacing: .02em; }
.prod__price.tbc { color: var(--muted); font: 600 .9375rem/1.3 var(--font-body); letter-spacing: 0; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; padding: 0; list-style: none; }
.sizes li, .size { display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px; border: 1px solid var(--line); color: var(--muted); font: 600 .8125rem/1 var(--font-body); }
.prod .btn { width: 100%; min-height: 44px; margin-top: auto; padding-inline: 12px; white-space: normal; text-align: center; line-height: 1.15; }
.prod .btn--primary { padding-right: calc(12px + var(--biseau)); }
.shopbar { background: var(--mist); color: var(--text); border-bottom: 1px solid var(--line); font-size: .9375rem; }
.shopbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; min-height: 44px; padding-block: 10px; }
.shopbar .ph { color: var(--navy); }
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav button {
  min-height: 52px; padding: 0 16px; border: 0; border-bottom: 4px solid transparent; background: none; color: var(--muted);
  font: 700 1.0625rem/1 var(--font-title); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.subnav button:hover { color: var(--text); border-bottom-color: var(--line); }
.subnav button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--navy); }

/* Fiche produit (boîte de dialogue), panier, messages */
dialog { width: min(92vw, 520px); max-height: 90dvh; padding: 0; border: 0; border-top: 4px solid var(--yellow); border-radius: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow); overscroll-behavior: contain; }
dialog::backdrop { background: color-mix(in srgb, var(--navy) 72%, transparent); }
.dlg { position: relative; display: grid; gap: 18px; padding: 28px 24px 24px; }
.dlg__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--text); font-size: 1.3rem; cursor: pointer; }
.dlg__close:hover { background: var(--navy); border-color: var(--navy); color: var(--bg); }
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 70; display: flex; flex-direction: column; width: min(100%, 440px);
  background: var(--surface); color: var(--text); border-left: 4px solid var(--yellow); box-shadow: var(--shadow); overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s;
}
.drawer.open { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 2rem; }
.drawer__head .dlg__close { position: static; }
.drawer__list { flex: 1; margin: 0; padding: 8px 20px; overflow-y: auto; list-style: none; }
.drawer__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.drawer__list small { grid-column: 1; color: var(--muted); }
.drawer__list button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--link); font: 700 .875rem/1 var(--font-body); text-decoration: underline; cursor: pointer; }
.drawer__foot { display: grid; gap: 12px; padding: 20px; border-top: 1px solid var(--line); }
.drawer__foot .calmeta { margin: 0; }
.drawer__total { display: flex; justify-content: space-between; font-size: 1.125rem; font-weight: 700; }
.scrim { position: fixed; inset: 0; z-index: 65; background: color-mix(in srgb, var(--navy) 60%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; max-width: calc(100% - 32px); padding: 14px 20px;
  background: var(--navy); color: var(--bg); border-left: 4px solid var(--yellow); box-shadow: var(--shadow);
  opacity: 0; transform: translate(-50%, 24px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== Formulaires : fond brume, trait bas de 2 px, aucun contour arrondi ===== */
.field { display: grid; gap: 8px; }
.field > span:first-child, .field legend { color: var(--text); font-size: .9375rem; font-weight: 700; }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field legend { margin-bottom: 8px; padding: 0; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px 10px; border: 0; border-bottom: 2px solid var(--navy); border-radius: 0;
  background: var(--mist); color: var(--text); font: inherit;
}
.field input:not([type="radio"]):not([type="checkbox"]):not([type="number"]), .field select { -webkit-appearance: none; appearance: none; }
.field select { padding-right: 44px; cursor: pointer; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { background: color-mix(in srgb, var(--mist) 70%, var(--line)); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; background: var(--bg); }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field small { color: var(--muted); font-size: .875rem; }
.select { position: relative; display: block; }
.select .ph { position: absolute; top: 50%; right: 14px; font-size: 1.1rem; transform: translateY(-50%); pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chips span { display: grid; place-items: center; min-width: 52px; min-height: 44px; padding: 0 14px; border: 2px solid var(--line); font-weight: 700; }
.chips label:hover span { border-color: var(--navy); }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--bg); }
.chips input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.err { min-height: 1.4em; margin: 0; color: var(--ko); font-weight: 600; }

/* ===== Pages intérieures : bandeau bleu nuit, photo biseautée à droite ===== */
.page-head { position: relative; overflow: hidden; isolation: isolate; padding-block: 48px 40px; background: var(--navy); color: var(--bg); }
.page-head h1 { color: var(--bg); }
.page-head p { margin: 14px 0 0; max-width: 46ch; color: color-mix(in srgb, var(--bg) 82%, var(--navy)); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
.page-head:not(.page-head--photo)::before, .page-head:not(.page-head--photo)::after { content: ""; position: absolute; top: -20%; bottom: -20%; z-index: -1; transform: skewX(-17deg); }
.page-head:not(.page-head--photo)::before { right: 9%; width: 12px; background: var(--yellow); }
.page-head:not(.page-head--photo)::after { right: -5%; width: 11%; background: var(--navy-2); }
@media (min-width: 720px) {
  .page-head { padding-block: 64px 56px; }
  .page-head--photo { display: flex; align-items: flex-end; min-height: clamp(300px, 32vw, 420px); }
  .page-head--photo .slant { right: -4%; width: 46%; border-left: 10px solid var(--yellow); }
  .page-head--photo .wrap > * { max-width: min(100%, 48%); }
}
@media (max-width: 719px) {
  .page-head:not(.page-head--photo)::before, .page-head:not(.page-head--photo)::after { display: none; }
  .page-head--photo { padding-top: 0; }
  .page-head--photo .slant { position: relative; top: auto; bottom: auto; z-index: 0; height: 150px; margin-bottom: 28px; transform: none; clip-path: polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%); }
  .page-head--photo .slant img { left: 0; width: 100%; transform: none; }
}

.prose { max-width: 70ch; }
.prose h2 { margin: 44px 0 14px; font-size: clamp(2rem, 3.4vw, 2.5rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.empty + .prose { margin-top: 48px; }

.cards { display: grid; gap: 16px; }
.cards > * { min-width: 0; }
@media (min-width: 720px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { position: relative; padding: 24px; background: var(--surface); border: 1px solid var(--line); }
.card h3 { margin-bottom: 10px; }
.card > h2, .empty > h2 { margin-bottom: 12px; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.card p:last-child { margin-bottom: 0; }
a.card { color: var(--text); text-decoration: none; }
a.card::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
a.card:hover::after, a.card:focus-visible::after { transform: scaleX(1); }
.cards + p, .venues + p { margin-top: 28px; }

/* Lieux (salles) : deux colonnes ouvertes, filet en tête */
.venues { display: grid; gap: 36px; }
@media (min-width: 720px) { .venues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.venue { position: relative; padding-top: 22px; border-top: 2px solid var(--navy); }
.venue > .ph { display: block; margin-bottom: 12px; color: var(--navy); font-size: 1.75rem; }
.venue h3 { margin-bottom: 10px; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.venue p:last-child { margin-bottom: 0; }
.tl::before, .venue::before { content: ""; position: absolute; top: -3px; left: 0; width: 64px; height: 4px; background: var(--yellow); }

/* Repère « à compléter » */
.todo { display: inline; padding: 2px 6px; background: var(--yellow-soft); color: var(--navy); font-size: .9em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.facts { display: grid; margin: 0; border-top: 2px solid var(--navy); }
.facts div { display: grid; gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .facts div { grid-template-columns: 170px minmax(0, 1fr); } }
.facts dt { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .07em; line-height: 1.9; text-transform: uppercase; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.empty { padding: 28px 24px; background: var(--mist); border-left: 4px solid var(--yellow); color: var(--muted); }
.section--tint .empty { background: var(--surface); }
.empty h2, .empty h3 { margin-bottom: 10px; color: var(--text); }
.empty h3 { font-size: 1.75rem; }
.empty p { margin-bottom: 0; }
.empty p + p { margin-top: 12px; }

/* Frise de l'histoire */
.timeline { display: grid; gap: 56px; margin: 0; padding: 0; list-style: none; }
.tl { position: relative; display: grid; gap: 16px 40px; padding-top: 24px; border-top: 2px solid var(--line); }
.tl > * { min-width: 0; }
.tl__year { color: var(--text); font: 700 clamp(3rem, 6.5vw, 4.5rem)/.95 var(--font-title); font-variant-numeric: tabular-nums; }
.tl__body { display: grid; gap: 18px; min-width: 0; }
.tl__body p { margin: 0; }
.tl__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 230px)); gap: 20px 16px; }
.tl__photos > * { min-width: 0; }
.tl__photos .wide { grid-column: span 2; }
@media (min-width: 860px) { .tl { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.timeline + .calmeta { margin-top: 48px; }

/* ===== Bandeau jaune « rejoindre le club », photo biseautée ===== */
.join { position: relative; overflow: hidden; isolation: isolate; background: var(--yellow); color: var(--on-yellow); }
.join h2 { color: var(--on-yellow); }
.join__txt p { margin: 14px 0 26px; }
.join .btn:not(.btn--primary):hover { background: var(--navy); color: var(--yellow); }
.join .textlink::after { background: var(--navy); }
.join .slant { background: var(--navy); }
@media (min-width: 900px) {
  .join .slant { right: -4%; width: 40%; border-left: 10px solid var(--navy); }
  .join .slant img { object-position: 50% 30%; }
  .join__txt { max-width: min(52ch, 52%); }
}
@media (max-width: 899px) {
  .join { display: flex; flex-direction: column; padding-bottom: 0; }
  .join .slant { order: 2; position: relative; top: auto; bottom: auto; z-index: 0; height: 240px; margin-top: 36px; transform: none; clip-path: polygon(73px 0, 100% 0, 100% 100%, 0 100%); }
  .join .slant img { left: 0; width: 100%; transform: none; object-position: 50% 30%; }
}

/* ===== Calendrier : prochain match, saison, filtres, matchs par mois ===== */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tabs button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--text); font: 600 .9375rem/1 var(--font-body); cursor: pointer; }
.tabs button:hover { border-color: var(--navy); }
.tabs button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--bg); box-shadow: inset 0 -4px 0 var(--yellow); }
#calTeams button { min-height: 52px; padding: 0 22px; font: 700 1.25rem/1 var(--font-title); letter-spacing: .03em; text-transform: uppercase; }
.cal-top { display: grid; gap: 20px; margin: 4px 0 28px; }
.cal-top > * { min-width: 0; }
@media (min-width: 900px) { .cal-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.next { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 18px; align-content: start; padding: 28px; background: var(--navy); color: var(--bg); }
.next::before { content: ""; position: absolute; top: -20%; bottom: -20%; right: -10%; width: 26%; z-index: -1; background: var(--navy-2); transform: skewX(-17deg); }
.next h2 { color: var(--bg); }
.next :focus-visible { outline-color: var(--yellow); }
.next__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.next__where { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--bg) 85%, var(--navy)); font-weight: 600; }
.next__teams { display: grid; gap: 4px; text-transform: uppercase; }
.next__teams strong { font: 700 clamp(2rem, 4.2vw, 3rem)/1 var(--font-title); overflow-wrap: anywhere; }
.next__teams strong.us { color: var(--yellow); }
.next__teams span { color: color-mix(in srgb, var(--bg) 72%, var(--navy)); font: 600 .8125rem/1.4 var(--font-body); letter-spacing: .12em; }
.next__meta { display: grid; gap: 6px; max-width: none; margin: 0; color: color-mix(in srgb, var(--bg) 85%, var(--navy)); }
.next__meta .ph { margin-right: 6px; color: var(--yellow); }
.next__clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.next__clock div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; background: color-mix(in srgb, var(--bg) 6%, transparent); border: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
.next__clock b { font: 700 2.4rem/1 var(--font-title); font-variant-numeric: tabular-nums; }
.next__clock small { color: color-mix(in srgb, var(--bg) 78%, var(--navy)); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.next__tbc, .next--vide p { margin: 0; color: color-mix(in srgb, var(--bg) 85%, var(--navy)); font-weight: 600; }
.season { display: grid; gap: 14px; align-content: start; padding: 24px; background: var(--surface); border: 1px solid var(--line); }
.season h2 { font-size: 2rem; }
.stats-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { display: grid; align-content: start; }
.stat b { font: 700 2.6rem/1 var(--font-title); font-variant-numeric: tabular-nums; }
.stat small { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.season__label { max-width: none; margin: 6px 0 0; color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.frise, .forme { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.s, .f { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--line); color: var(--muted); font: 700 .8125rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.s--w, .f--w { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.s--l, .f--l { background: var(--ko); border-color: var(--ko); color: var(--on-ko); }
.s--n { border-color: var(--navy); color: var(--text); }
.f { width: 40px; height: 40px; font-size: 1rem; }
.calgrid { display: grid; gap: 32px; }
.calgrid > * { min-width: 0; }
@media (min-width: 980px) { .calgrid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } .calgrid aside { position: sticky; top: calc(var(--header-h) + 16px); } }
[data-calendar] + .calmeta { margin-top: 32px; }
.month { display: flex; align-items: center; gap: 14px; margin: 32px 0 12px; font: 700 2rem/1 var(--font-title); text-transform: uppercase; }
.month::before { content: ""; flex: none; width: 10px; height: 1em; background: var(--yellow); transform: skewX(-17deg); }
.month::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.calmeta + .month { margin-top: 14px; }
.fixtures { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fx { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); }
.fx--w { border-left-color: var(--ok); }
.fx--l { border-left-color: var(--ko); }
.fx--n { border-left-color: var(--navy); }
.fx time { display: grid; color: var(--muted); font: 700 .8125rem/1.1 var(--font-body); text-align: center; text-transform: uppercase; }
.fx time b { color: var(--text); font: 700 2rem/1 var(--font-title); }
.fx__t { display: grid; gap: 2px; min-width: 0; }
.fx__t small { color: var(--muted); font-size: .875rem; }
.fx__t small .ph { color: var(--navy); }
.fx__t strong { font: 700 1rem/1.3 var(--font-body); overflow-wrap: anywhere; }
.fx .score { font-size: 2rem; }
.fx__h { font: 700 1.75rem/1 var(--font-title); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .fx { grid-template-columns: 52px minmax(0, 1fr); }
  .fx .score, .fx__h { grid-column: 2; }
  .stats-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next { padding: 24px 20px; }
  .next__clock b { font-size: 2rem; }
}
.calmeta { color: var(--muted); font-size: .9375rem; }

/* ===== Actualités : fil Instagram (après accord) et revue de presse ===== */
.insta { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .insta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; } }
.insta__txt p { color: var(--muted); }
.insta__box { min-height: 420px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.insta__box iframe { display: block; width: 100%; height: 760px; border: 0; background: var(--bg); }
.insta__box.is-loaded { border: 0; }
.insta__facade { display: grid; justify-items: start; gap: 12px; padding: 32px 28px; }
.insta__facade .ph { color: var(--navy); font-size: 2.6rem; }
.insta__facade h3, .insta__facade p { margin: 0; }
.insta__facade p { color: var(--muted); }
.press-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.press a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--yellow); color: var(--text); text-decoration: none; }
.press a:hover { border-left-color: var(--navy); }
.press__media { color: var(--muted); font: 700 .8125rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.press strong { font: 700 1.1875rem/1.35 var(--font-body); text-wrap: balance; }
.press small { color: var(--muted); font-size: .9375rem; }
.press__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--link); font-weight: 700; }
.press__go .ph { transition: transform .2s var(--ease); }
.press a:hover .press__go .ph { transform: translate(3px, -3px); }
.archive { margin-top: 32px; background: var(--surface); border: 1px solid var(--line); }
.archive summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 22px; font-weight: 700; list-style: none; cursor: pointer; }
.archive summary::-webkit-details-marker { display: none; }
.archive summary::after { content: "+"; color: var(--navy); font: 700 1.6rem/1 var(--font-title); transition: transform .25s var(--ease); }
.archive[open] summary::after { transform: rotate(45deg); }
.archive__list { display: grid; margin: 0; padding: 0 22px 12px; list-style: none; }
.archive__list li + li { border-top: 1px solid var(--line); }
.archive__list a { display: grid; gap: 4px 16px; padding: 14px 0; color: var(--text); text-decoration: none; }
@media (min-width: 720px) { .archive__list a { grid-template-columns: 130px minmax(0, 1fr) auto; align-items: baseline; } }
.archive__list a:hover span:nth-child(2) { text-decoration: underline; }
.archive__list small { color: var(--muted); }
.press-mini { display: grid; margin: 0 0 18px; padding: 0; list-style: none; }
.press-mini li + li { border-top: 1px solid var(--line); }
.press-mini a { display: grid; gap: 4px; padding: 14px 0; color: var(--text); text-decoration: none; }
.press-mini a:hover span:nth-child(2) { text-decoration: underline; }

/* ===== Pied de page ===== */
.site-footer { padding-block: 56px 28px; background: var(--navy); color: color-mix(in srgb, var(--bg) 80%, var(--navy)); border-top: 3px solid var(--yellow); }
.site-footer a { color: var(--bg); }
.site-footer h2 { margin-bottom: 12px; color: var(--yellow); font-size: 1.375rem; letter-spacing: .06em; }
.site-footer p { max-width: 40ch; }
.foot__grid { display: grid; gap: 36px; }
@media (min-width: 600px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.foot__brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 16px; color: var(--bg); font: 700 1.75rem/1 var(--font-title); text-transform: uppercase; text-decoration: none; }
.foot__brand img { width: 64px; height: 64px; border-radius: 50%; background: var(--bg); }
.site-footer ul { display: grid; margin: 0; padding: 0; list-style: none; }
.site-footer li a { display: inline-block; padding-block: 10px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.site-footer li a:hover, .foot__legal a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); font-size: 1.35rem; text-decoration: none; }
.social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); font-size: .875rem; }
.foot__legal p { max-width: 80ch; margin: 0; }

/* ===== Chargement, apparition, préférences du visiteur ===== */
.skeleton { height: 76px; margin-bottom: 10px; background: color-mix(in srgb, var(--line) 70%, var(--mist)); }
li.skeleton { list-style: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  .board { animation: rise .6s .15s var(--ease) both; }
  .fixtures .fx { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
  .skeleton { animation: pulse 1.1s ease-in-out infinite alternate; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes pulse { to { opacity: .45; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media (prefers-contrast: more) {
  .card, .match, .fx, .season, .table-wrap, .archive, .insta__box { border-width: 2px; }
  .cell { border-bottom-width: 3px; }
}