/* ============================================================================
   actualitebarca.com — main.css (bundle unique du site public)
   ----------------------------------------------------------------------------
   DA « Nuit de Stade » : sombre par défaut (navy dérivé du bleu club),
   mono-famille Archivo variable (axes wght + wdth : condensé pour les labels,
   expanded 125% pour les titres façon tableau d'affichage), gradient
   blaugrana (#004D98 → #A50044) en signature, néon jaune #FFED02 dosé,
   liseré senyera au footer, grain de stade en data-URI (CSP img-src data:).

   Architecture : cascade layers (reset < tokens < base < layout < components
   < utilities). Aucun !important hors des blocs reduced-motion.
   Nommage BEM + exceptions par data-attribute (.kicker[data-cat]).
   Tokens sémantiques uniquement : AUCUN hex en dur dans les composants
   (sauf overlays d'image, volontairement identiques dans les 2 thèmes).
   Thème : SOMBRE par défaut (:root) ; clair uniquement si l'utilisateur le
   force ([data-theme='light'] posé par theme.js).
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ============================================================================
   FONTS — Archivo variable self-hostée (woff2, axes wght 100-900 + wdth
   62-125), font-display: swap, fallback métrique (size-adjust) pour un CLS
   quasi nul au swap. Subsets latin (preloadé) + latin-ext (noms de joueurs).
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-italic-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var-italic-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback métrique : Arial ajustée sur Archivo (x-height proche). */
@font-face {
  font-family: 'Archivo-fallback';
  src: local('Arial');
  size-adjust: 99%;
  ascent-override: 89%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ============================================================================
   RESET
   ========================================================================== */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100dvh;
  }

  img,
  picture,
  video,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  p,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  table {
    border-collapse: collapse;
  }

  /* Bloc global obligatoire — seule zone où !important est autorisé. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    /* Les animations scroll-driven et les view transitions ignorent
       animation-duration : on les coupe explicitement. */
    .card,
    .hero__principal {
      animation: none !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }
}

/* ============================================================================
   TOKENS — « Nuit de Stade » (sombre par défaut) + thème clair forcé
   ========================================================================== */

@layer tokens {
  :root {
    /* -------- Palette sombre (défaut) -------- */
    color-scheme: dark;
    --bg: #070d1d;                        /* navy quasi-noir dérivé de #004D98 */
    --surface: #0e1830;
    --surface-2: #152242;
    --text: #eaedf5;                      /* 16,5:1 sur bg — AAA */
    --text-muted: #a8b3cc;                /* 9,2:1 sur bg — AAA */
    --blau: #4e95ff;                      /* bleu club éclairci : liens */
    --grana: #ff4d7d;                     /* grenat éclairci : accents chauds */
    --accent: #ffed02;                    /* néon signature (maillot 25/26) */
    --accent-ink: #070d1d;                /* texte posé sur le néon */
    --border: rgb(255 255 255 / 0.08);
    --border-fort: rgb(255 255 255 / 0.16);
    --focus: #ffed02;

    /* Gradient blaugrana — décoratif uniquement (barres, chips) */
    --gradient-blaugrana: linear-gradient(135deg, #004d98, #a50044);
    /* Variante éclaircie pour le texte en background-clip (folios) :
       les couleurs officielles passent sous 3:1 sur fond sombre. */
    --gradient-folio: linear-gradient(135deg, #4e95ff, #ff4d7d);
    /* Couleurs pleines du club pour les chips (blanc dessus : AA garanti) */
    --chip-blau: #004d98;
    --chip-grana: #a50044;
    --chip-texte: #ffffff;

    /* Messages de formulaire (newsletter) */
    --msg-ok-bg: rgb(78 149 255 / 0.14);
    --msg-ok-txt: #9cc3ff;
    --msg-err-bg: rgb(255 77 125 / 0.14);
    --msg-err-txt: #ff8fae;

    /* Boutons pleins */
    --btn-principal-bg: #ffed02;
    --btn-principal-txt: #070d1d;
    --btn-principal-hover: #fff65c;

    /* Ombres / reliefs : en sombre, ring fin plutôt qu'ombre floue */
    --shadow-card: 0 0 0 1px var(--border);
    --shadow-card-hover: 0 0 0 1px var(--border-fort), 0 16px 40px rgb(0 0 0 / 0.45);
    --shadow-header: 0 1px 0 var(--border);

    /* Overlay du hero (identique dans les 2 thèmes : texte blanc sur photo) */
    --overlay-hero: linear-gradient(180deg, rgb(7 13 29 / 0) 0%, rgb(7 13 29 / 0.5) 18%, rgb(7 13 29 / 0.85) 45%, rgb(7 13 29 / 0.96) 100%);
    --overlay-texte: #f4f6fb;
    --overlay-muted: #c3cbdd;

    /* Grain de stade (dark uniquement) */
    --grain-opacite: 0.05;

    /* Footer « tunnel » : toujours sombre, même en thème clair */
    --footer-bg: #050a16;
    --footer-texte: #eaedf5;
    --footer-muted: #a8b3cc;
    --footer-border: rgb(255 255 255 / 0.1);

    /* -------- Typographie : une seule famille, deux axes -------- */
    --font: 'Archivo', 'Archivo-fallback', system-ui, Arial, sans-serif;
    --stretch-display: 121%;    /* titres façon scoreboard */
    --stretch-condense: 76%;    /* kickers, labels, méta */

    /* Échelle fluide clamp() — base 16, viewport 320->1240 */
    --text-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.76rem);
    --text-sm: clamp(0.80rem, 0.76rem + 0.20vw, 0.88rem);
    --text-base: clamp(1.00rem, 0.96rem + 0.22vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.40vw, 1.30rem);
    --text-xl: clamp(1.35rem, 1.20rem + 0.75vw, 1.65rem);
    --text-2xl: clamp(1.75rem, 1.45rem + 1.50vw, 2.35rem);
    --text-3xl: clamp(2.10rem, 1.60rem + 2.50vw, 3.10rem);
    --text-display: clamp(1.85rem, 1.15rem + 3.4vw, 2.95rem);

    /* -------- Espacements (grille 4 px) -------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-section: clamp(2.5rem, 6vw, 4.5rem);

    /* -------- Radius / motion / divers -------- */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --hauteur-header: 3.75rem;
  }

  /* -------- Thème clair : uniquement si l'utilisateur le force -------- */
  :root[data-theme='light'] {
    color-scheme: light;
    --bg: #f7f6f2;
    --surface: #ffffff;
    --surface-2: #ecebe3;
    --text: #10141f;                      /* 17:1 */
    --text-muted: #49536b;                /* 7,1:1 */
    --blau: #004d98;                      /* 8,3:1 sur blanc — AAA */
    --grana: #a50044;                     /* 7,8:1 sur blanc — AAA */
    --accent: #ffed02;                    /* JAMAIS en texte sur clair */
    --accent-ink: #10141f;
    --border: #e3e1d8;
    --border-fort: #cfccbe;
    --focus: #004d98;

    --chip-blau: #004d98;
    --chip-grana: #a50044;
    --chip-texte: #ffffff;

    --msg-ok-bg: hsl(212 100% 94%);
    --msg-ok-txt: hsl(212 100% 28%);
    --msg-err-bg: hsl(335 80% 94%);
    --msg-err-txt: hsl(335 100% 30%);

    --btn-principal-bg: #004d98;
    --btn-principal-txt: #ffffff;
    --btn-principal-hover: hsl(212 100% 24%);

    --shadow-card: 0 1px 2px rgb(16 20 31 / 0.06), 0 2px 10px rgb(16 20 31 / 0.07);
    --shadow-card-hover: 0 2px 4px rgb(16 20 31 / 0.07), 0 12px 28px rgb(16 20 31 / 0.12);
    --shadow-header: 0 1px 0 var(--border);

    --grain-opacite: 0;
  }
}

/* ============================================================================
   BASE — typographie, liens, focus, grain
   ========================================================================== */

@layer base {
  html {
    /* Header sticky : les ancres ne passent pas dessous (WCAG 2.4.11). */
    scroll-padding-top: calc(var(--hauteur-header) + 0.5rem);
  }

  body {
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
  }

  /* Grain de stade : texture feTurbulence en data-URI, sombre uniquement
     (--grain-opacite: 0 en clair). Décoratif, au-dessus du contenu mais
     transparent aux interactions. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: var(--grain-opacite);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    background-size: 180px 180px;
  }

  h1,
  h2,
  h3 {
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.12;
    text-wrap: balance;
  }

  a {
    color: var(--blau);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--dur-fast) var(--ease-out),
      text-decoration-color var(--dur-fast) var(--ease-out);
  }

  a:hover {
    color: var(--grana);
  }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection {
    background: var(--btn-principal-bg);
    color: var(--btn-principal-txt);
  }

  time {
    font-variant-numeric: tabular-nums;
  }

  /* View transition racine (MPA) : fondu doux entre les pages sur les
     navigateurs qui le supportent — coupé sous prefers-reduced-motion. */
  @view-transition {
    navigation: auto;
  }
}

/* ============================================================================
   LAYOUT — containers, disposition flux + sidebar
   ========================================================================== */

@layer layout {
  .container {
    width: min(74rem, 100% - 2rem);
    margin-inline: auto;
  }

  .page-etroite {
    width: min(46rem, 100% - 2rem);
    margin-inline: auto;
    padding-block: var(--space-8) var(--space-section);
  }

  main {
    min-height: 60dvh;
  }

  .disposition {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
    padding-block: var(--space-6) var(--space-section);
  }

  @media (width >= 60rem) {
    .disposition {
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: var(--space-12);
      align-items: start;
    }

    /* Sur une rubrique paginée (12 cartes), la colonne de droite laissait un
       long vide mort : collée, « Les plus lus » accompagne tout le scroll. */
    .sidebar {
      position: sticky;
      top: calc(var(--hauteur-header) + var(--space-6));
      max-height: calc(100dvh - var(--hauteur-header) - var(--space-8));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
  }

  .section-grille {
    margin-block-start: var(--space-section);
  }

  .disposition__flux > .section-grille:first-child {
    margin-block-start: 0;
  }

  /* Titre de section façon bandeau : barre gradient + caps expanded. Il
     annonce le contenu sans lui disputer la vedette — d'où un cran de moins
     que le titre de la carte bento, compensé par un tracking plus ouvert. */
  .section__titre {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: var(--space-6);
  }

  .section__titre::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--gradient-blaugrana);
  }

  .section-liees {
    padding-block: var(--space-section);
  }
}

/* ============================================================================
   COMPONENTS
   ========================================================================== */

@layer components {
  /* --------------------------------------------------------------
     Skip-link (premier élément du body)
     -------------------------------------------------------------- */
  .skip-link {
    position: absolute;
    left: -9999px;
  }

  .skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    background: var(--surface);
    color: var(--text);
    padding: 0.75rem 1rem;
    outline: 2px solid var(--focus);
    border-radius: var(--radius-sm);
  }

  /* --------------------------------------------------------------
     Header sticky « verre » + marque + actions
     -------------------------------------------------------------- */
  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    box-shadow: var(--shadow-header);
  }

  /* Glassmorphism : réservé au header, l'opacité de base garantit seule le
     contraste (le blur est décoratif). */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .header {
      background: color-mix(in srgb, var(--bg) 84%, transparent);
      -webkit-backdrop-filter: blur(12px) saturate(1.4);
      backdrop-filter: blur(12px) saturate(1.4);
    }
  }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--hauteur-header);
  }

  /* Marque : monogramme AB (logo historique du compte @ActualiteBarca)
     + wordmark typographique. */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    font-size: 1.22rem;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
  }

  .brand__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: 0 0 auto;
  }

  .brand--footer .brand__logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .brand:hover {
    color: var(--text);
  }

  .brand__dot {
    color: var(--grana);
  }

  .brand--footer {
    font-size: var(--text-lg);
    color: var(--footer-texte);
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
  }

  .header__recherche,
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-2);
    color: var(--text);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      transform 120ms var(--ease-out);
  }

  .header__recherche:hover,
  .theme-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  /* Retour tactile instantané : l'élément « répond » au clic (Emil §Buttons
     must feel responsive). Subtil (0.94 sur une cible de 44px). */
  .header__recherche:active,
  .theme-toggle:active {
    transform: scale(0.94);
  }

  .header__recherche-txt {
    display: none;
  }

  @media (width >= 75rem) {
    .header__recherche-txt {
      display: inline;
    }
  }

  /* Sous 40rem, le wordmark en nowrap (266 px à lui seul) poussait le header
     hors de l'écran : recherche et thème débordaient de 52 px sur un 390 px.
     Le monogramme cède la place — le wordmark porte la marque à lui seul — et
     l'axe de largeur d'Archivo le condense plutôt que de le rogner. Les deux
     cibles tactiles de 44 px restent intactes, jusqu'au 320 px. */
  @media (width < 40rem) {
    .header .brand__logo {
      display: none;
    }

    .header .brand {
      font-size: clamp(1rem, 0.55rem + 1.9vw, 1.22rem);
      font-stretch: 92%;
    }
  }

  /* Icônes du toggle thème : une seule visible selon l'état de <html>.
     Défaut (pas d'attribut) = sombre. */
  .theme-toggle__icone {
    display: none;
  }

  html:not([data-theme='light']) .theme-toggle__icone--dark {
    display: block;
  }

  html[data-theme='light'] .theme-toggle__icone--light {
    display: block;
  }

  /* --------------------------------------------------------------
     Rail de rubriques : chips horizontales scrollables (zéro JS)
     -------------------------------------------------------------- */
  .nav {
    border-block-end: 1px solid var(--border);
    background: var(--bg);
  }

  .nav__liste {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: min(74rem, 100% - 2rem);
    margin-inline: auto;
    padding-block: var(--space-3);
    padding-inline: 4px; /* l'outline de focus des chips du bord n'est pas clipé */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
    /* La barre de défilement est masquée : sans ce voile, la dernière rubrique
       est coupée net et rien n'indique qu'il y en a d'autres. Les deux dégradés
       sont attachés au contenu (local), ils disparaissent donc d'eux-mêmes en
       butée de chaque côté. */
    background:
      linear-gradient(90deg, var(--bg) 30%, transparent) left / 2.5rem 100% no-repeat local,
      linear-gradient(270deg, var(--bg) 30%, transparent) right / 2.5rem 100% no-repeat local;
  }

  .nav__liste::-webkit-scrollbar {
    display: none;
  }

  .nav__lien {
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: 700;
    font-stretch: var(--stretch-condense);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--border-fort);
    border-radius: 999px;
    transition: color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      transform 120ms var(--ease-out);
  }

  .nav__lien:hover {
    border-color: var(--blau);
    color: var(--blau);
  }

  .nav__lien:active {
    transform: scale(0.96);
  }

  .nav__lien[aria-current='page'] {
    background: var(--gradient-blaugrana);
    border-color: transparent;
    color: var(--chip-texte);
  }

  /* --------------------------------------------------------------
     Kicker (surtitre catégorie) : chip nette, soft-brutalisme
     -------------------------------------------------------------- */
  .kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    font-weight: 700;
    font-stretch: var(--stretch-condense);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blau); /* kickers en texte nu (pages statiques, listes) */
  }

  .kicker[data-cat='mercato'] {
    color: var(--grana);
  }

  .kicker__chip {
    pointer-events: none; /* chip décorative (sans lien) : le clic traverse */
  }

  .kicker > a,
  .kicker__chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--gradient-blaugrana);
    color: var(--chip-texte);
    text-decoration: none;
  }

  .kicker > a:hover {
    color: var(--chip-texte);
    filter: brightness(1.18);
  }

  /* Mercato = LA rubrique chaude : grenat plein. */
  .kicker[data-cat='mercato'] > a,
  .kicker[data-cat='mercato'] .kicker__chip {
    background: var(--chip-grana);
  }

  .kicker[data-cat='matchs'] > a,
  .kicker[data-cat='matchs'] .kicker__chip {
    background: var(--chip-blau);
  }

  /* Kicker « nu » (pages statiques, sans lien) : texte condensé bleu. */
  .kicker--texte {
    color: var(--blau);
  }

  /* --------------------------------------------------------------
     Une du jour (hero) : texte posé sur l'image, gradient de lisibilité
     -------------------------------------------------------------- */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  @media (width >= 64rem) {
    .hero {
      grid-template-columns: 2fr 1fr;
      gap: var(--space-8);
    }
  }

  /* Empilement grid (pas d'absolu) : si le texte est plus haut que l'image
     (petit écran + long titre), la carte grandit au lieu de clipper. */
  .hero__principal {
    position: relative;
    display: grid;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0a1226; /* prolonge l'overlay quand le texte dépasse l'image */
    box-shadow: var(--shadow-card);
  }

  .hero__media {
    grid-area: 1 / 1;
    min-height: 100%;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--surface-2);
  }

  @media (width >= 40rem) {
    .hero__media img {
      aspect-ratio: 16 / 10;
    }
  }

  .hero__texte {
    grid-area: 1 / 1;
    align-self: end;
    display: grid;
    gap: var(--space-3);
    min-width: 0; /* un mot très long ne doit jamais élargir la carte */
    padding: clamp(1rem, 4vw, 2rem);
    padding-block-start: clamp(4.5rem, 16vw, 8rem);
    background: var(--overlay-hero);
  }

  .hero__titre {
    min-width: 0;
    font-size: var(--text-display);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 0.98;
    overflow-wrap: break-word; /* ne casse un mot que s'il ne tient pas seul */
  }

  .hero__titre a {
    color: var(--overlay-texte);
    text-decoration: none;
  }

  .hero__titre a:hover {
    color: var(--accent);
  }

  /* Une entièrement cliquable, un seul lien (comme les cards). */
  .hero__titre a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .hero__chapo {
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--overlay-muted);
    max-width: 60ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero__texte .card__meta {
    color: var(--overlay-muted);
  }

  .hero__texte .kicker {
    position: relative;
    z-index: 1; /* la chip reste cliquable au-dessus du lien étendu */
    width: fit-content;
  }

  /* Colonne « également à la une » */
  .hero__secondaires {
    display: grid;
    gap: 0;
    align-content: start;
    counter-reset: alaune;
  }

  .hero__secondaire {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--border);
    counter-increment: alaune;
  }

  .hero__secondaire::before {
    content: '0' counter(alaune);
    grid-row: 1 / span 3;
    font-size: var(--text-2xl);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--gradient-folio);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  :root[data-theme='light'] .hero__secondaire::before {
    /* En clair le gradient sombre manque de peps sur fond crème : bleu plein. */
    background: none;
    color: var(--blau);
  }

  .hero__secondaire:first-of-type {
    border-block-start: 0;
    padding-block-start: 0;
  }

  @media (width < 64rem) {
    .hero__secondaire:first-of-type {
      border-block-start: 1px solid var(--border);
      padding-block-start: var(--space-4);
    }
  }

  .hero__secondaire-titre {
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .hero__secondaire-titre a {
    color: var(--text);
    text-decoration: none;
  }

  .hero__secondaire-titre a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .hero__secondaire-titre a:hover {
    color: var(--blau);
  }

  .hero__secondaire .card__meta,
  .hero__secondaire .kicker {
    grid-column: 2;
  }

  .hero__secondaire-titre {
    grid-column: 2;
  }

  /* --------------------------------------------------------------
     Cartes d'articles + grille bento
     -------------------------------------------------------------- */
  .grille-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    grid-auto-flow: dense;
    gap: var(--space-5);
  }

  /* Bento : la première carte de chaque grille s'étale sur 2 colonnes. */
  @media (width >= 60rem) {
    .grille-cards > .card:first-child {
      grid-column: span 2;
    }
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }

  /* Lift au survol réservé aux vrais pointeurs : sur tactile, :hover se
     déclenche au tap et laisserait la carte « collée » soulevée (Emil
     §Touch device hover states). */
  @media (hover: hover) and (pointer: fine) {
    .card:hover {
      transform: translateY(-4px);
      border-color: var(--border-fort);
      box-shadow: var(--shadow-card-hover);
    }
  }

  .card__media {
    position: relative;
    overflow: hidden;
  }

  .card__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
    transition: transform var(--dur-base) var(--ease-out),
      filter var(--dur-base) var(--ease-out);
  }

  /* Effet signature (pointeurs à hover uniquement) : vignettes en duotone
     blaugrana au repos, révélées en couleur au survol de la carte. Unifie
     visuellement des photos hétérogènes. Jamais sur le hero (LCP). */
  @media (hover: hover) {
    .card__media img {
      filter: grayscale(0.85) contrast(1.05) brightness(1.08);
    }

    .card__media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--gradient-blaugrana);
      mix-blend-mode: multiply;
      opacity: 0.45;
      transition: opacity var(--dur-base) var(--ease-out);
      pointer-events: none;
    }

    .card:hover .card__media img,
    .card:focus-within .card__media img {
      filter: none;
      transform: scale(1.04);
    }

    .card:hover .card__media::after,
    .card:focus-within .card__media::after {
      opacity: 0;
    }
  }

  /* Colonne flex plutôt que grid : la méta est poussée en pied par une marge
     auto, si bien que les lignes « date · durée » d'une même rangée s'alignent
     sur une seule ligne de base quel que soit le nombre de lignes des titres. */
  .card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-5);
  }

  .card__title {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .card__title a {
    color: var(--text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .card__title a:hover {
    color: var(--blau);
  }

  /* Toute la carte cliquable : le lien du titre s'étend sur la carte. */
  .card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* Le lien étant étendu à la carte entière, l'anneau de focus doit l'être
     aussi : cerclé sur le seul titre, il désignait une cible bien plus petite
     que la zone réellement activable au clavier. */
  .card:has(a:focus-visible),
  .hero__principal:has(a:focus-visible),
  .hero__secondaire:has(a:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  .card .card__title a:focus-visible,
  .hero__titre a:focus-visible,
  .hero__secondaire-titre a:focus-visible {
    outline: none;
  }

  .card .kicker {
    position: relative;
    z-index: 1;
    width: fit-content;
  }

  .card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    font-weight: 500;
    font-stretch: 88%;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .card .card__meta {
    margin-block-start: auto;
    padding-block-start: var(--space-1);
  }

  /* Carte large (bento span 2) : image à gauche, texte à droite. Le span 2
     n'existe qu'à partir de 60rem — même seuil pour le layout horizontal. */
  @media (width >= 60rem) {
    .grille-cards > .card:first-child {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      align-items: stretch;
    }

    .grille-cards > .card:first-child .card__media {
      height: 100%;
    }

    .grille-cards > .card:first-child .card__media img {
      height: 100%;
      aspect-ratio: auto;
      min-height: 240px;
    }

    /* Carte bento : le texte est centré face à l'image, la méta n'est donc
       plus renvoyée en pied (rien à aligner, elle est seule de sa rangée). */
    .grille-cards > .card:first-child .card__body {
      justify-content: center;
      padding: var(--space-6);
    }

    .grille-cards > .card:first-child .card__meta {
      margin-block-start: 0;
    }

    .grille-cards > .card:first-child .card__title {
      font-size: var(--text-xl);
    }
  }

  /* Reveal au scroll (progressive enhancement, coupé en reduced-motion). */
  @supports (animation-timeline: view()) {
    .grille-cards .card {
      animation: carte-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }

  @keyframes carte-reveal {
    from {
      opacity: 0;
      transform: translateY(16px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* --------------------------------------------------------------
     Sidebar : « Les plus lus » (folios gradient) + suivre
     -------------------------------------------------------------- */
  .sidebar {
    display: grid;
    gap: var(--space-6);
    align-content: start;
  }

  .widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  .widget__titre {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-4);
  }

  .widget__titre::before {
    content: '';
    width: 5px;
    height: 1em;
    border-radius: 2px;
    background: var(--gradient-blaugrana);
  }

  .widget__vide {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding-block: var(--space-4);
    text-align: center;
    border: 1px dashed var(--border-fort);
    border-radius: var(--radius-sm);
  }

  .widget__populaires {
    display: grid;
    counter-reset: populaires;
  }

  .widget__populaires li {
    counter-increment: populaires;
    display: flex;
    gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--border);
  }

  .widget__populaires li:first-child {
    padding-block-start: 0;
  }

  .widget__populaires li:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .widget__populaires li::before {
    content: '0' counter(populaires);
    font-size: var(--text-2xl);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--gradient-folio);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    flex: 0 0 auto;
  }

  :root[data-theme='light'] .widget__populaires li::before {
    background: none;
    color: var(--blau);
  }

  .widget__populaires a {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .widget__populaires a:hover {
    color: var(--blau);
  }

  .widget__suivre {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  /* --------------------------------------------------------------
     En-têtes de rubrique / états vides
     -------------------------------------------------------------- */
  .entete-rubrique {
    display: grid;
    gap: var(--space-3);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--border);
    margin-block-end: var(--space-8);
  }

  /* Même barre-signature que les titres de section, mais déclinée dans la
     couleur de la rubrique : la page reprend l'identité que les kickers des
     cartes portent déjà, et l'on sait où l'on est sans lire le titre. */
  .entete-rubrique__titre {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-3xl);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 0.98;
  }

  .entete-rubrique__titre::before {
    content: '';
    flex: 0 0 auto;
    align-self: stretch;
    width: 8px;
    min-height: 1em;
    border-radius: 2px;
    background: var(--gradient-blaugrana);
  }

  .entete-rubrique[data-cat='mercato'] .entete-rubrique__titre::before {
    background: var(--chip-grana);
  }

  .entete-rubrique[data-cat='matchs'] .entete-rubrique__titre::before {
    background: var(--chip-blau);
  }

  .entete-rubrique__description {
    max-width: 60ch;
    color: var(--text-muted);
  }

  .entete-rubrique__compte {
    font-size: var(--text-sm);
    font-stretch: 88%;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .etat-vide {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-block: var(--space-6);
  }

  /* Un écran vide reste une page de marque : même barre-signature que les
     titres de section, pour qu'il se lise comme une étape et non comme un
     gabarit qui n'a pas fini de charger. */
  .etat-vide h2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xl);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
  }

  .etat-vide h2::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--gradient-blaugrana);
  }

  .etat-vide__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-2);
  }

  /* --------------------------------------------------------------
     Fil d'ariane
     -------------------------------------------------------------- */
  .fil-ariane {
    padding-block: var(--space-4);
    font-size: var(--text-sm);
    font-stretch: 88%;
    color: var(--text-muted);
  }

  .fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
  }

  .fil-ariane li:not(:last-child)::after {
    content: '›';
    margin-inline-start: var(--space-2);
    color: var(--text-muted);
  }

  .fil-ariane a {
    color: var(--text-muted);
    text-decoration: none;
  }

  .fil-ariane a:hover {
    color: var(--blau);
    text-decoration: underline;
  }

  .fil-ariane [aria-current='page'] {
    color: var(--text);
  }

  /* --------------------------------------------------------------
     Page article — lecture d'abord : sobre, contrastée, rapide
     -------------------------------------------------------------- */
  .container-article {
    width: min(46rem, 100% - 2rem);
    margin-inline: auto;
  }

  .article {
    padding-block-end: var(--space-section);
  }

  .article__entete {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-2) var(--space-6);
  }

  .article__titre {
    font-size: var(--text-3xl);
    font-weight: 900;
    font-stretch: 112%;
    letter-spacing: -0.015em;
    line-height: 1.05;
  }

  .article__chapo {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted);
  }

  .article__meta {
    display: grid;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-stretch: 88%;
    color: var(--text-muted);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border);
  }

  .article__signature {
    font-weight: 700;
    color: var(--text);
  }

  .article__signature a {
    color: var(--blau);
    text-decoration: none;
  }

  .article__signature a:hover {
    text-decoration: underline;
  }

  .article__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Image de tête full-bleed (plus large que la colonne de texte). */
  .article__hero {
    width: min(64rem, 100%);
    margin-inline: auto;
    margin-block: var(--space-2) var(--space-8);
  }

  .article__hero img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
  }

  @media (width >= 64rem) {
    .article__hero img {
      border-radius: var(--radius-lg);
    }
  }

  /* Photo Getty en tête d'article : iframe au RATIO NATIF de la photo (style
     inline « aspect-ratio: W/H », repli 3:2). width:auto + max-width/max-height
     → l'image remplit son cadre SANS bande, et une photo trop haute (portrait,
     ou paysage sur écran court) est bornée à 82vh puis centrée, la largeur se
     réduisant d'elle-même (jamais de letterbox). */
  .article__hero--getty iframe {
    display: block;
    margin-inline: auto;
    width: 100%;
    height: auto;
    max-height: 88vh; /* borne un hero PORTRAIT (rare) sans écraser un paysage */
    aspect-ratio: 3 / 2;
    border: 0;
    background: #251f20;
  }

  @media (width >= 64rem) {
    .article__hero--getty iframe {
      border-radius: var(--radius-lg);
    }
  }

  /* Corps longue-forme : mesure confortable, interlignage généreux. */
  .prose {
    max-width: 66ch;
    line-height: 1.7;
  }

  /* Sur fond quasi-noir, --text à 16,5:1 est parfait pour un titre mais fait
     haler les paragraphes longs sur OLED. Un cran en dessous (≈11:1, toujours
     AAA) repose l'œil et creuse l'écart titre/corps ; titres, citations et
     liens gardent leur pleine intensité. */
  :root:not([data-theme='light']) .prose p,
  :root:not([data-theme='light']) .prose li {
    color: color-mix(in srgb, var(--text) 86%, var(--bg));
  }

  .prose > * + * {
    margin-block-start: var(--space-4);
  }

  .prose__intro {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-muted);
  }

  .prose h2 {
    font-size: var(--text-xl);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.1;
    margin-block-start: var(--space-8);
    margin-block-end: var(--space-3);
  }

  .prose h3 {
    font-size: var(--text-lg);
    font-weight: 800;
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-2);
  }

  .prose a {
    text-decoration-thickness: 2px;
    text-decoration-color: color-mix(in srgb, var(--blau) 45%, transparent);
  }

  .prose a:hover {
    text-decoration-color: currentColor;
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.25em;
    display: grid;
    gap: var(--space-2);
  }

  .prose li::marker {
    color: var(--grana);
    font-weight: 700;
  }

  .prose blockquote {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-5);
    font-size: var(--text-xl);
    font-weight: 800;
    font-stretch: 106%;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text);
  }

  .prose blockquote::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 2px;
    background: var(--gradient-blaugrana);
  }

  .prose blockquote cite {
    display: block;
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    font-stretch: 88%;
    font-style: normal;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .prose img {
    border-radius: var(--radius-md);
  }

  /* Garde-fou CLS : une image de corps SANS width/height déclarés réserve
     quand même un espace 16:9 avant chargement. */
  .prose img:not([width]) {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
  }

  .prose figure {
    margin-block: var(--space-6);
  }

  .prose figcaption {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  /* Embeds X/Twitter (oEmbed) : jamais plus larges que la colonne. */
  .prose iframe {
    max-width: 100%;
    border: 0;
  }

  /* Embeds Getty Images : l'iframe prend le RATIO NATIF de la photo (via ses
     attributs width/height + height:auto) → l'image remplit son cadre, aucune
     bande de letterbox. On ne rogne jamais (le crédit Getty doit rester visible
     — CGU embed). Le fond #251f20 ne sert que de couleur d'attente au chargement. */
  .prose iframe[src^="https://embed.gettyimages.com/"] {
    display: block;
    width: 100%;
    height: auto;
    /* Repli 3:2 : le style inline « aspect-ratio: W/H » (ratio natif par photo)
       le surcharge. Sans lui, une iframe s'effondrerait à 150px (les
       navigateurs ne dérivent PAS le ratio des attributs width/height d'iframe). */
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md);
    background: #251f20;
  }

  /* --------------------------------------------------------------
     Tags, partage
     -------------------------------------------------------------- */
  .article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-8);
  }

  .tag-lien {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    font-stretch: var(--stretch-condense);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    border: 1px solid var(--border-fort);
    border-radius: 999px;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      transform 120ms var(--ease-out);
  }

  .tag-lien:hover {
    color: var(--blau);
    border-color: var(--blau);
  }

  .tag-lien:active {
    transform: scale(0.96);
  }

  .article__partage {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--border);
  }

  /* --------------------------------------------------------------
     Barre de progression de lecture (transform posé par site.js)
     -------------------------------------------------------------- */
  .progress-lecture {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 60;
    background: transparent;
    pointer-events: none;
  }

  .progress-lecture__barre {
    height: 100%;
    background: var(--gradient-blaugrana);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
  }

  /* --------------------------------------------------------------
     Pagination
     -------------------------------------------------------------- */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-block-start: var(--space-10);
  }

  .pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-fort);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      transform 120ms var(--ease-out);
  }

  .pagination__lien:hover {
    color: var(--blau);
    border-color: var(--blau);
  }

  .pagination__lien:active {
    transform: scale(0.94);
  }

  .pagination__lien--actif {
    background: var(--gradient-blaugrana);
    color: var(--chip-texte);
    border-color: transparent;
    font-weight: 800;
  }

  .pagination__ellipse {
    color: var(--text-muted);
    padding-inline: var(--space-1);
  }

  /* --------------------------------------------------------------
     Boutons
     -------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      transform 80ms var(--ease-out);
  }

  .btn:active {
    transform: scale(0.98);
  }

  .btn--principal {
    background: var(--btn-principal-bg);
    color: var(--btn-principal-txt);
  }

  .btn--principal:hover {
    background: var(--btn-principal-hover);
    color: var(--btn-principal-txt);
  }

  .btn--secondaire {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-fort);
  }

  .btn--secondaire:hover {
    color: var(--blau);
    border-color: var(--blau);
  }

  .btn.est-copie {
    color: var(--blau);
    border-color: var(--blau);
  }

  /* --------------------------------------------------------------
     Formulaires (recherche, newsletter)
     -------------------------------------------------------------- */
  input[type='email'],
  input[type='search'],
  input[type='text'] {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-fort);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out);
  }

  input[type='email']:focus-visible,
  input[type='search']:focus-visible,
  input[type='text']:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--focus);
  }

  input::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
  }

  .form-recherche {
    display: grid;
    gap: var(--space-2);
    margin-block-end: var(--space-8);
  }

  .form-recherche__label {
    font-weight: 600;
  }

  .form-recherche__ligne {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .form-recherche__ligne input {
    flex: 1 1 16rem;
  }

  .recherche-compte {
    margin-block-end: var(--space-6);
    color: var(--text-muted);
  }

  /* --------------------------------------------------------------
     Pages d'erreur (404/500) et confirmation newsletter
     -------------------------------------------------------------- */
  .page-erreur {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding-block: var(--space-8) var(--space-12);
  }

  .page-erreur__code {
    font-size: clamp(5rem, 18vw, 10rem);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    line-height: 0.9;
    letter-spacing: -0.02em;
    background: var(--gradient-folio);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  :root[data-theme='light'] .page-erreur__code {
    background: none;
    color: var(--blau);
  }

  .page-erreur__titre {
    font-size: var(--text-2xl);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
  }

  .page-erreur__texte {
    max-width: 52ch;
    color: var(--text-muted);
  }

  .page-erreur__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }

  .page-erreur__rubriques {
    margin-block-start: var(--space-8);
  }

  .page-confirmation {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
    padding-block: var(--space-16);
  }

  .page-confirmation__icone {
    color: var(--blau);
  }

  .page-confirmation__titre {
    font-size: var(--text-2xl);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    text-transform: uppercase;
  }

  .page-confirmation__texte {
    max-width: 48ch;
    color: var(--text-muted);
  }

  /* --------------------------------------------------------------
     Footer « tunnel des vestiaires » : toujours sombre, liseré senyera
     -------------------------------------------------------------- */
  .footer {
    position: relative;
    background: var(--footer-bg);
    color: var(--footer-texte);
    margin-block-start: var(--space-section);
  }

  /* Liseré senyera : 4 bandes jaune/rouge catalanes, micro-détail culé. */
  .footer::before {
    content: '';
    display: block;
    height: 4px;
    background: repeating-linear-gradient(
      90deg,
      #fcdd09 0 48px,
      #da121a 48px 96px
    );
  }

  .footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding-block: var(--space-10);
  }

  @media (width >= 60rem) {
    .footer__grid {
      grid-template-columns: 1.2fr 0.7fr 0.7fr 1.2fr;
      gap: var(--space-12);
    }
  }

  .footer__col {
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .footer__titre {
    font-size: var(--text-xs);
    font-weight: 700;
    font-stretch: var(--stretch-condense);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--footer-muted);
  }

  .footer__baseline {
    color: var(--footer-muted);
    font-size: var(--text-sm);
    max-width: 34ch;
  }

  /* Mention légale obligatoire : lisible, jamais en petit gris illisible. */
  .footer__disclaimer {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--footer-texte);
    max-width: 36ch;
  }

  .footer__liens {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .footer__liens a {
    color: var(--footer-texte);
    text-decoration: none;
  }

  .footer__liens a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Bouton « Paramètres de confidentialité » (révocation du consentement
     pub) : rendu identique aux liens du footer. */
  .footer__lien-btn {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--footer-texte);
    text-align: left;
    cursor: pointer;
  }

  .footer__lien-btn:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .footer__texte {
    font-size: var(--text-sm);
    color: var(--footer-muted);
  }

  .footer .newsletter-form input[type='email'] {
    background: rgb(255 255 255 / 0.06);
    border-color: var(--footer-border);
    color: var(--footer-texte);
  }

  .footer .newsletter-form input[type='email']::placeholder {
    color: var(--footer-muted);
  }

  .footer .btn--principal {
    background: #ffed02;
    color: #070d1d;
  }

  .footer .btn--principal:hover {
    background: #fff65c;
    color: #070d1d;
  }

  .footer .btn--secondaire {
    color: var(--footer-texte);
    border-color: var(--footer-border);
  }

  .footer .btn--secondaire:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  .newsletter-form {
    display: grid;
    gap: var(--space-3);
  }

  .newsletter-form__label {
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .newsletter-form__ligne {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .newsletter-form__ligne input {
    flex: 1 1 12rem;
  }

  .newsletter-form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--footer-muted);
    cursor: pointer;
  }

  .newsletter-form__consent input {
    margin-block-start: 0.25em;
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
  }

  /* Message de retour d'inscription (injecté par site.js après le POST). */
  .newsletter-form__message {
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
  }

  .newsletter-form__message--succes {
    color: var(--msg-ok-txt);
    background: var(--msg-ok-bg);
  }

  .newsletter-form__message--erreur {
    color: var(--msg-err-txt);
    background: var(--msg-err-bg);
  }

  .footer__push {
    justify-self: start;
  }

  /* Le footer reste sombre dans les 2 thèmes : le focus doit rester visible
     même quand --focus est le bleu du thème clair (2.4:1 sur #050a16). */
  .footer :focus-visible {
    outline-color: var(--accent);
  }

  .footer input[type='email']:focus-visible {
    outline-color: var(--accent);
    border-color: var(--accent);
  }

  .footer__legal {
    padding-block: var(--space-5);
    border-block-start: 1px solid var(--footer-border);
    font-size: var(--text-sm);
    color: var(--footer-muted);
  }
}

/* ============================================================================
   UTILITIES
   ========================================================================== */

@layer utilities {
  /* Texte accessible aux lecteurs d'écran uniquement. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}