/* iOS Safari « gonfle » les gros titres (text inflation) au-delà des tailles
     prévues → « THÉMATIQUES » débordait et se coupait en « THÉMATIQUE / S. »,
     et le É italique de « SANTÉ » passait sous le clip du theme-row.
     On fige l'échelle pour rendre exactement les tailles maquettées. */
  /* ====== BRAND PALETTE (site officiel demainlesport.fr) ====== */
  :root {
    --color-blue-electric: #082ee0;   /* fond principal */
    --color-blue-dark: #05176f;        /* aplats sombres / dégradés */
    --color-yellow: #ffe375;           /* accent marque */
    --bone: #f4f1ea;                   /* texte clair */
    --ink: #08080a;                    /* texte foncé / sur fond clair */
  }

  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* Fond bleu de marque : image (stries diagonales en haut) avec repli sur le
     bleu électrique en aplat sous l'image. background-attachment scroll
     (par défaut) — fixed est instable sur iOS. */
  body {
    background-color: var(--color-blue-electric);
    background-image: url("../img/bg-body.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    color: var(--bone);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ====== Alternance de fond : 1 section sur 2 en bleu électrique ====== */
  /* Override centralisé des classes bg-ink/bg-carbon des sections (les IDs
     l'emportent en spécificité). Hero + bande stats restent électriques. */

  /* Sections ÉLECTRIQUES : texture bleue de marque (même image que le body),
     avec ponctuellement une bande de stries de marque en coin (parcimonie —
     posées en background donc toujours derrière le contenu). */
  #speakers,
  #programme,
  #newsletter {
    background-color: var(--color-blue-electric) !important;
    background-image: url("../img/bg-body.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  /* Intervenant·es : grille de portraits pleine largeur → texture seule
     (un overlay de stries y serait masqué). */
  #programme {
    background-image: url("../img/lines2.png"), url("../img/bg-body.png");
    background-position: top right, center;
    background-size: auto 105%, cover;
    background-repeat: no-repeat, no-repeat;
  }

  /* Intervenant·es : stries en haut à droite (zone d'en-tête, au-dessus de
     la grille de portraits) + texture body. */
  #speakers {
    background-image: url("../img/lines1.png"), url("../img/bg-body.png");
    background-position: top left, center;
    background-size: auto 55%, cover;
    background-repeat: no-repeat, no-repeat;
  }

  /* Hero : stries de marque en haut à droite ; le reste laisse voir la
     texture bleue du body (pas de couleur de fond ici). */
  #hero {
    background-image: url("../img/lines3.png");
    background-position: top right;
    background-size: auto 135%;
    background-repeat: no-repeat;
  }
  #newsletter {
    /* Stries grandes, débord en bas, mais décalées vers le bas pour que leur
       haut ressorte SOUS le texte (pas de chevauchement) ; texte en blanc. */
    background-image: url("../img/lines1.png"), url("../img/bg-body.png");
    background-position: left calc(100% + 230px), center;
    background-size: auto 165%, cover;
    background-repeat: no-repeat, no-repeat;
  }

  /* ── Mobile : on retire les stries de marque (lines*.png) ──
     Sur un viewport étroit, ces images de stries vives sont mises à l'échelle
     (auto 105–165%) au point de couvrir toute la section et de passer derrière
     le texte → mauvais contraste/lisibilité. On revient à la seule texture de
     fond de marque (bg-body.png / aplat) ; le rythme coloré reste assuré par
     l'alternance électrique/profond. Le hero n'a pas de couleur de fond propre
     → la texture du body réapparaît. */
  @media (max-width: 639px) {
    #hero { background-image: none; }
    #speakers,
    #programme,
    #newsletter {
      background-image: url("../img/bg-body.png");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }

  /* Sections PROFONDES : aplat navy de marque (contraste avec l'électrique). */
  #themes,
  #actus,
  #replay,
  #partners { background-color: var(--color-blue-dark) !important; }

  /* Séparateurs à lignes animées retirés : le rythme est désormais porté par
     l'alternance électrique/profond + les bandes de stries ponctuelles. */
  section.streaks-host[aria-hidden="true"] { display: none; }

  /* ====== TYPE ====== */
  .impact {
    font-family: 'Anton', Impact, sans-serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 0.84;
    text-transform: uppercase;
    /* Les très longs mots (« INTERVENANT·ES ») débordaient hors écran en
       mobile (body overflow-x:hidden les coupait). overflow-wrap ne coupe un
       mot qu'en dernier recours (s'il ne tient pas) ; on retire word-break
       (trop zélé : il coupait « THÉMATIQUES » → « THÉMATIQUE / S. »). */
    overflow-wrap: break-word;
  }

  /* Mobile : plafonne les très gros titres (text-7xl/8xl/9xl + text-6xl) à
     ~48px pour qu'aucun mot long ne soit coupé en plein milieu — à 72px+ des
     mots comme « THÉMATIQUES », « UNE JOURNÉE » débordaient puis se faisaient
     rogner par overflow-x:hidden. La sélecteur .impact.text-Nxl (2 classes)
     l'emporte sur l'utilitaire Tailwind .text-Nxl. Couvre aussi les titres
     générés par le CMS (pages thématiques, programme…) sans toucher au HTML.
     « INTERVENANT·ES » reste trop long même à 48px → ce titre est en text-4xl
     dès le mobile (voir index.html), donc non concerné par ce plafond. */
  @media (max-width: 639px) {
    .impact.text-6xl,
    .impact.text-7xl,
    .impact.text-8xl,
    .impact.text-9xl { font-size: 3rem; }
  }

  /* ── Titres de section réduits d'un cran (moins envahissants) ──
     Surcharge les utilitaires de taille des .impact de section : un sélecteur
     à 2 classes l'emporte sur l'utilitaire Tailwind. Le hero et les titres de
     page (en text-[..vw]) ne sont pas concernés. Valeurs faciles à doser. */
  @media (min-width: 1024px) {
    .impact.lg\:text-9xl { font-size: 5rem; }    /* 8rem    → 5rem    */
    .impact.lg\:text-8xl { font-size: 4rem; }    /* 6rem    → 4rem    */
    .impact.lg\:text-7xl { font-size: 3.25rem; } /* 4.5rem  → 3.25rem */
  }
  @media (min-width: 640px) and (max-width: 1023px) {
    .impact.text-7xl,
    .impact.sm\:text-7xl { font-size: 3rem; }
  }

  /* ── Plafond des titres hero/page en vw au-delà de 1800px ──
     Les conteneurs sont en max-w-[1800px] : passé 1800px de viewport, la
     colonne se fige mais la police en `lg:text-[..vw]` continuait de grossir,
     finissant par déborder. On gèle chaque taille à sa valeur à 1800px
     (Yvw × 18px) pour qu'elle reste cohérente avec la colonne figée (et que le
     titre hero reste sur une seule ligne). Sélecteur à 2 classes → l'emporte
     sur l'utilitaire Tailwind. Couvre pages statiques ET générées. */
  @media (min-width: 1800px) {
    .impact.lg\:text-\[7\.5vw\] { font-size: 135px; } /* index (hero)        */
    .impact.lg\:text-\[8vw\]    { font-size: 144px; } /* thématiques         */
    .impact.lg\:text-\[9vw\]    { font-size: 162px; } /* infos-pratiques     */
    .impact.lg\:text-\[10vw\]   { font-size: 180px; } /* replays, anim, actus */
  }

  /* ── Titres de section homogènes (home) ──
     Une seule source de vérité pour TOUS les titres de section : même taille à
     chaque breakpoint, un cran sous les anciens text-9xl (5rem → 3.75rem) pour
     des titres moins envahissants. Remplace les utilitaires text-Nxl sur ces
     <h2>/<h3>. Le hero (text-[..vw]) et les titres générés par le CMS ne sont
     pas concernés. */
  /* line-height un peu aéré (1.05) : .impact est à 0.84 — trop serré pour deux
     lignes à accents (les caps de la 2ᵉ ligne touchaient la 1ʳᵉ). */
  .impact.section-title { font-size: 2.5rem; line-height: 1.05; }
  @media (min-width: 640px)  { .impact.section-title { font-size: 3rem; } }
  @media (min-width: 1024px) { .impact.section-title { font-size: 3.75rem; } }

  /* ====== SIGNATURE: speed stripes (sparse, intentional) ====== */
  .speed-stripes {
    position: absolute;
    pointer-events: none;
    transform: rotate(-22deg);
    transform-origin: 0 0;
  }
  .speed-stripes .stripe {
    display: block;
    margin-bottom: 14px;
    border-radius: 1px;
    transform-origin: left;
  }
  /* Solid brand bars */
  .stripe-coral { background: #ff5a5a; }
  .stripe-mango { background: #ffaa46; }
  .stripe-cyan  { background: #64c8d7; }
  .stripe-mint  { background: #ffe375; }
  .stripe-bone  { background: #f4f1ea; }
  .stripe-blue  { background: #082ee0; }
  .stripe-deep  { background: #000a66; }
  /* Width / height utility shorthands for stripe variants */
  .stripe.xs { height: 3px; }
  .stripe.sm { height: 5px; }
  .stripe.md { height: 8px; }
  .stripe.lg { height: 12px; }
  .stripe.xl { height: 18px; }
  .stripe.faded { opacity: 0.45; }
  .stripe.fader { opacity: 0.7; }

  /* Individual streak — scatter freely across a section */
  .streak {
    position: absolute;
    pointer-events: none;
    transform: rotate(-22deg);
    transform-origin: left center;
    border-radius: 1px;
    z-index: 0;
  }

  /* Marquee */
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 50s linear infinite; }

  /* ====== Theme hover ====== */
  .theme-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: padding 350ms cubic-bezier(.2,.7,.2,1);
  }
  .theme-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--bg);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 450ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
    z-index: -2;
  }
  .theme-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,16,58,0.92) 0%, rgba(5,16,58,0.6) 60%, rgba(5,16,58,0.92) 100%);
    opacity: 0;
    transition: opacity 350ms;
    z-index: -1;
  }
  .theme-row:hover::before { opacity: 0.7; transform: scale(1.0); }
  .theme-row:hover::after { opacity: 1; }

  .theme-row .theme-bar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: rgba(244,241,234,0.0);
    transition: width 500ms cubic-bezier(.2,.7,.2,1), background-color 200ms;
    pointer-events: none;
    z-index: 1;
  }
  .theme-row:hover .theme-bar {
    width: 100%;
    background: #ffe375;
    height: 4px;
  }
  .theme-row .theme-title {
    transition: transform 350ms cubic-bezier(.2,.7,.2,1);
    transform-origin: left center;
    will-change: transform;
    min-width: 0;            /* autorise le retour à la ligne dans le flex */
    /* le glyphe final italique déborde à droite ; sans marge il passait sous
       le overflow:hidden du theme-row (le É de « SANTÉ » était rogné).
       0.22em couvre la pente de l'Anton italique + l'accent du É. */
    padding-right: 0.22em;
  }
  .theme-row:hover .theme-title { transform: translateX(28px) skewX(-6deg); }
  .theme-row .theme-arrow {
    transition: transform 350ms cubic-bezier(.2,.7,.2,1), opacity 300ms;
    opacity: 0;
    transform: translateX(-20px);
  }
  .theme-row:hover .theme-arrow { opacity: 1; transform: translateX(0); color: #ffe375; }
  .theme-row:hover .theme-counter { color: rgba(244,241,234,0.8); }

  /* Ligne non cliquable (thématique sans contenu derrière) : aucun affordance
     de navigation — curseur normal, pas de révélation de fond ni de slide. */
  .theme-row--static { cursor: default; }
  .theme-row--static:hover::before,
  .theme-row--static:hover::after { opacity: 0; }
  .theme-row--static:hover .theme-bar { width: 0; background: transparent; }
  .theme-row--static:hover .theme-title { transform: none; }

  /* ====== CTAs ====== */
  /* Primary — bone fill */
  .cta-primary {
    position: relative;
    background: #f4f1ea;
    color: #08080a;
    overflow: hidden;
    isolation: isolate;
  }
  .cta-primary .arrow { transition: transform 350ms cubic-bezier(.2,.7,.2,1); }
  .cta-primary:hover .arrow { transform: translateX(14px); }
  .cta-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: #ffe375;
    transform: translateX(-100%);
    transition: transform 450ms cubic-bezier(.2,.7,.2,1);
    z-index: -1;
  }
  .cta-primary:hover::before { transform: translateX(0); }

  /* Secondary outline */
  .cta-outline { position: relative; color: #f4f1ea; }
  .cta-outline::before {
    content: ''; position: absolute; inset: 0;
    border: 1.5px solid currentColor;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition: clip-path 350ms cubic-bezier(.2,.7,.2,1);
  }
  .cta-outline:hover::before {
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }
  .cta-outline:hover { color: #ffe375; }

  /* ====== Speaker cards ====== */
  .speaker-card { transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
  .speaker-card:hover { transform: translateY(-6px); }
  .speaker-img { filter: grayscale(80%) contrast(1.05); transition: filter 400ms; object-position: center top; }
  .speaker-card:hover .speaker-img { filter: grayscale(0%) contrast(1); }

  /* Pulse */
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
  }
  .pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

  /* ====== POPIN VIDÉO YOUTUBE ====== */
  .yt-popin {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  .yt-popin.is-open { display: flex; }
  .yt-popin__backdrop {
    position: absolute; inset: 0;
    background: rgba(5,16,58,0.88);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: yt-fade 200ms ease-out;
  }
  .yt-popin__dialog {
    position: relative; z-index: 1;
    width: min(1120px, 100%);
    animation: yt-pop 240ms cubic-bezier(.2,.7,.2,1);
  }
  .yt-popin__frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #000; border-radius: 10px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  }
  .yt-popin__frame iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }
  .yt-popin__close {
    position: absolute; top: -46px; right: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    color: #f4f1ea; background: transparent;
    border: 1px solid rgba(244,241,234,0.35); border-radius: 999px;
    cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms;
  }
  .yt-popin__close:hover { background: #ffe375; color: #08080a; border-color: #ffe375; }
  @media (max-width: 640px) { .yt-popin__close { top: -42px; } }
  @keyframes yt-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes yt-pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }

  /* Hero image clip */
  .hero-clip { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); background: #fff; }

  .stat-num {
    font-family: 'Anton', Impact;
    font-style: italic;
    line-height: 0.85;
  }

  .nl-input { background: transparent; border: 0; border-bottom: 1.5px solid rgba(244,241,234,0.25); padding: 14px 0; color: #f4f1ea; width: 100%; font-size: 1rem; outline: none; transition: border-color 200ms; }
  .nl-input:focus { border-color: #ffe375; }
  .nl-input::placeholder { color: rgba(244,241,234,0.4); }

  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(244,241,234,0.55);
  }
  /* Hero eyebrow (« Le thème 2026 ») — plus grand et plus lisible que les intertitres */
  #hero .eyebrow {
    font-size: 14px;
    letter-spacing: 0.16em;
    color: rgba(244,241,234,0.85);
  }
  @media (min-width: 1024px) {
    #hero .eyebrow { font-size: 16px; }
  }

  /* Highlight color — used for accent words on titles */
  .text-comet { color: #ffe375; }
  .text-accent-warm { color: #ffaa46; }

  /* Blue stamp — for dates/edition */
  .stamp-blue {
    background: #082ee0;
    color: #f4f1ea;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 6px 12px;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
  }
  /* Bone stamp — contrast counterpart */
  .stamp-bone {
    background: #f4f1ea;
    color: #08080a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 6px 12px;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
  }
  @media (min-width: 1024px) {
    .stamp-blue, .stamp-bone { font-size: 15px; padding: 7px 14px; }
  }

  /* Grain */
  .grain::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    opacity: 0.04;
    z-index: 9999;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .rise { animation: rise 700ms cubic-bezier(.2,.7,.2,1) both; }

  /* Hairline divider — neutral */
  .divider { height: 1px; background: rgba(244,241,234,0.08); }
  /* Hairline divider — accent (solid mint segment) */
  .divider-accent {
    height: 2px;
    background: #ffe375;
    width: 64px;
  }

  /* ============================================
     ENTRANCE ANIMATIONS
     ============================================ */

  /* Base: anything with data-anim is hidden until .in-view */
  [data-anim] {
    will-change: transform, opacity;
    transition: opacity 800ms cubic-bezier(.2,.7,.2,1),
                transform 1000ms cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  /* Hidden states */
  [data-anim="fade-up"]    { opacity: 0; transform: translateY(40px); }
  [data-anim="slide-left"] { opacity: 0; transform: translateX(-80px); }
  [data-anim="slide-right"]{ opacity: 0; transform: translateX(80px); }
  [data-anim="scale-in"]   { opacity: 0; transform: scale(0.94); }
  [data-anim="zoom-down"]  { opacity: 0; transform: scale(0.6) rotate(-4deg); }

  /* Title line — mask reveal : le padding réserve la place des accents pour
     qu'ils peignent sans être rognés par l'overflow:hidden ; la marge négative
     annule le padding pour garder l'interligne serré.
     0.42em en haut : un capitale accentuée (É/È) en italique synthétique Anton
     pousse l'accent bien au-dessus de la hauteur de capitale — 0.22em le coupait
     (« SANTÉ », « DIVERSITÉ », « ÉCONOMIE »). Les côtés couvrent la pente. */
  .anim-mask {
    display: block;
    overflow: hidden;
    padding: 0.42em 0.16em 0.14em;
    margin: -0.42em -0.16em -0.14em;
  }
  .anim-mask > [data-anim="line"] {
    display: block;
    opacity: 0;
    transform: translateY(102%) skewY(6deg);
  }

  /* Generic in-view observer also fires for mask-line elements via their wrapping .anim-mask */
  .anim-mask.in-view > [data-anim="line"] {
    opacity: 1;
    transform: none;
  }
  /* Shown states */
  [data-anim].in-view,
  .in-view [data-anim] {
    opacity: 1;
    transform: none;
  }

  /* Streak draw — must preserve the rotate */
  .streak {
    transform: rotate(-22deg) scaleX(0);
    transition: transform 900ms cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i, 0) * 50ms + 100ms);
  }
  .streaks-in .streak { transform: rotate(-22deg) scaleX(1); }

  /* Theme rows — slide in + bar grow on appearance */
  .theme-row {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 700ms cubic-bezier(.2,.7,.2,1),
                transform 900ms cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .theme-row.in-view { opacity: 1; transform: translateX(0); }

  /* Hero image clip-path reveal */
  .hero-clip[data-anim="clip"] {
    clip-path: polygon(10% 0, 10% 0, 10% 100%, 0 100%);
    opacity: 0;
  }
  .hero-clip[data-anim="clip"].in-view {
    clip-path: polygon(0 0, calc(100% - 55px) 0, 100% 55px, 100% 100%, 55px 100%, 0 calc(100% - 55px));
    border: 7px solid #fff;
    opacity: 1;
    transition: clip-path 1100ms cubic-bezier(.2,.7,.2,1) 200ms,
                opacity 600ms ease 200ms;
  }
  .hero-clip img {
    clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 52px, 100% 100%, 52px 100%, 0 calc(100% - 52px));
  }
  .hero-clip-wrap {
    filter: drop-shadow(1px 1px 35px rgba(0, 0, 0, 0.8));
    animation: heroReveal 1100ms cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes heroReveal {
    0% { opacity: 0; transform: translateY(48px) scale(0.92) rotate(-1.2deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-clip-wrap { animation: none; }
  }

  /* Pulse for CTA on first appear */
  @keyframes ctaPop {
    0%   { transform: scale(0.8); opacity: 0; }
    60%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); }
  }
  [data-anim="cta-pop"] { opacity: 0; }
  [data-anim="cta-pop"].in-view { animation: ctaPop 700ms cubic-bezier(.2,.7,.2,1) both; }

  /* Stat number flash */
  .stat-num.in-view { animation: numFlash 700ms ease-out both; }
  @keyframes numFlash {
    0%   { color: #ffe375; }
    100% { color: inherit; }
  }

  /* Marquee-style pop for stamps */
  @keyframes stampDrop {
    0%   { opacity: 0; transform: translateY(-20px) rotate(-2deg); }
    60%  { transform: translateY(2px) rotate(0.5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
  }
  .stamp-blue[data-anim="stamp"],
  .stamp-bone[data-anim="stamp"] { opacity: 0; }
  .stamp-blue[data-anim="stamp"].in-view,
  .stamp-bone[data-anim="stamp"].in-view {
    animation: stampDrop 600ms cubic-bezier(.4,1.6,.5,1) both;
    animation-delay: calc(var(--i, 0) * 120ms);
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    [data-anim], .theme-row, .streak {
      opacity: 1 !important; transform: none !important; transition: none !important;
    }
  }

  /* Chip */
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(244,241,234,0.18);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(244,241,234,0.7);
  }

  /* Logo brightness on dark */
  .logo-on-dark { filter: brightness(1.15); }

  /* ====== VIDEO PLAYER ====== */
  .video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a2487;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
  }
  .video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 400ms; }
  .video-thumb:hover img { transform: scale(1.04); filter: brightness(1.1); }
  .video-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,16,58,0.35) 0%, rgba(5,16,58,0.55) 100%);
    pointer-events: none;
    transition: opacity 300ms;
    z-index: 1;
  }
  .video-thumb:hover::after { opacity: 0.7; }

  .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 96px; height: 96px;
    border-radius: 9999px;
    background: #ffe375;
    color: #08080a;
    display: flex; align-items: center; justify-content: center;
    transition: transform 400ms cubic-bezier(.2,.7,.2,1), box-shadow 400ms, background 200ms;
    box-shadow: 0 0 0 0 rgba(255,227,117,0.35);
    z-index: 2;
  }
  @media (min-width: 1024px) { .play-btn { width: 132px; height: 132px; } }
  .video-thumb:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 24px rgba(255,227,117,0.2); }
  .play-btn svg { margin-left: 6px; }
  /* Mobile : la vignette 16/9 est trop basse, le bouton centré recouvrait la
     légende ancrée en bas. On donne plus de hauteur (4/3), on réduit le bouton
     et on le remonte pour dégager le badge + le titre. */
  @media (max-width: 1023px) {
    .video-thumb { aspect-ratio: 4 / 3; }
    .play-btn { width: 64px; height: 64px; top: 38%; }
    .play-btn svg { width: 26px; height: 26px; margin-left: 4px; }
    .video-thumb:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
  }

  /* Live ring around play btn when live */
  .video-thumb.is-live .play-btn { background: #ff5a5a; color: #fff; }
  .video-thumb.is-live .play-btn::before {
    content: '';
    position: absolute; inset: -8px;
    border-radius: 9999px;
    border: 2px solid #ff5a5a;
    animation: liveRing 1.6s ease-out infinite;
  }
  @keyframes liveRing {
    0% { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
  }

  /* Chapter list (timestamps) */
  .chapter {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(244,241,234,0.08);
    cursor: pointer;
    transition: padding 250ms cubic-bezier(.2,.7,.2,1), background 200ms;
  }
  .chapter:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(255,227,117,0.04), transparent); }
  .chapter:hover .chapter-title { color: #ffe375; }
  .chapter-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(244,241,234,0.5);
    letter-spacing: 0.04em;
  }
  .chapter-title {
    font-family: 'Anton', Impact;
    font-style: italic;
    text-transform: uppercase;
    font-size: 18px;
    transition: color 200ms;
  }
  .chapter-arrow {
    width: 24px; height: 24px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 250ms, transform 250ms cubic-bezier(.2,.7,.2,1);
    color: #ffe375;
  }
  .chapter:hover .chapter-arrow { opacity: 1; transform: translateX(0); }

  /* Live header beacon */
  .live-beacon {
    display: none;
    align-items: center; gap: 6px;
    background: #ff5a5a;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    padding: 4px 10px;
  }
  body.is-live .live-beacon { display: inline-flex; }
  body.is-live .replay-only { display: none; }
  body:not(.is-live) .live-only { display: none; }

  /* ====== ACTU CARDS ====== */
  .actu-card { display: block; cursor: pointer; }
  .actu-thumb {
    position: relative;
    overflow: hidden;
    background: #0a2487;
    aspect-ratio: 4 / 5;
  }
  .actu-thumb.featured { aspect-ratio: 4 / 5; }
  @media (min-width: 1024px) { .actu-thumb.featured { aspect-ratio: 5 / 6; } }
  .actu-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 400ms;
    filter: saturate(0.85) contrast(1.05);
  }
  .actu-card:hover .actu-thumb img { transform: scale(1.05); filter: saturate(1) contrast(1); }
  .actu-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,16,58,0) 40%, rgba(5,16,58,0.7) 100%);
    pointer-events: none;
  }
  .actu-cat {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    padding: 4px 8px;
    background: #08080a;
    color: #f4f1ea;
  }
  .actu-card:hover .actu-cat { background: #ffe375; color: #08080a; }
  .actu-title {
    font-family: 'Anton', Impact;
    font-style: italic;
    text-transform: uppercase;
    line-height: 0.95;
    margin-top: 16px;
    transition: color 200ms, transform 300ms cubic-bezier(.2,.7,.2,1);
    transform-origin: left;
  }
  .actu-card:hover .actu-title { color: #ffe375; }
  .actu-meta {
    margin-top: 12px;
    display: flex; align-items: center; gap: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(244,241,234,0.45);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .actu-meta::before {
    content: '';
    display: inline-block;
    width: 14px; height: 1px;
    background: rgba(244,241,234,0.3);
  }
  .actu-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #f4f1ea;
    transition: color 200ms, gap 250ms cubic-bezier(.2,.7,.2,1);
  }
  .actu-card:hover .actu-arrow { color: #ffe375; gap: 16px; }

  .actu-featured-summary {
    color: rgba(244,241,234,0.7);
    margin-top: 16px;
    max-width: 38ch;
    line-height: 1.5;
  }

  /* ====== PAGE TOUS LES REPLAYS ====== */
  .replay-desc {
    margin-top: 12px;
    color: rgba(244,241,234,0.6);
    font-size: 0.875rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .replay-desc.is-open {
    display: block;
    -webkit-line-clamp: unset;
    white-space: pre-line;
  }
  .replay-more {
    margin-top: 8px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #ffe375;
  }
  .replay-more:hover { text-decoration: underline; }
  .replay-duration {
    position: absolute;
    bottom: 10px; right: 10px;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    background: rgba(5,16,58,0.82);
    color: #f4f1ea;
  }

  /* ====== LOGO BLEU SUR FOND SOMBRE ====== */
  /* Le bleu de marque (#072cdf) manque de contraste sur l'ink : léger boost. */
  img[src*="logo-dls-bleu"] { filter: brightness(1.5) saturate(1.1); }

  /* ====== NAV : INDICATEUR DE CHANGEMENT DE PAGE ====== */
  /* Les liens du menu qui ouvrent une autre page (vs ancres de section)
     affichent une petite flèche diagonale, teintée par la couleur du lien. */
  #site-header nav a[href$=".html"]:not([href*="#"])::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 5px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.5;
    transition: opacity 200ms, transform 250ms cubic-bezier(.2,.7,.2,1);
  }
  #site-header nav a[href$=".html"]:not([href*="#"]):hover::after {
    opacity: 1;
    transform: translate(2px, -2px);
  }