html { scroll-behavior: smooth; }
  body { background: #08080a; color: #f4f1ea; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

  /* ====== 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;
  }

  /* ====== 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: #78ffc8; }
  .stripe-bone  { background: #f4f1ea; }
  .stripe-blue  { background: #001eff; }
  .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(8,8,10,0.92) 0%, rgba(8,8,10,0.6) 60%, rgba(8,8,10,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: #78ffc8;
    height: 4px;
  }
  .theme-row .theme-title {
    transition: transform 350ms cubic-bezier(.2,.7,.2,1);
    transform-origin: left center;
    will-change: transform;
  }
  .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: #78ffc8; }
  .theme-row:hover .theme-counter { color: rgba(244,241,234,0.8); }

  /* ====== 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: #78ffc8;
    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: #78ffc8; }

  /* ====== 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(8,8,10,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: #78ffc8; color: #08080a; border-color: #78ffc8; }
  @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%); }

  .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: #78ffc8; }
  .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);
  }

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

  /* Blue stamp — for dates/edition */
  .stamp-blue {
    background: #001eff;
    color: #f4f1ea;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 4px 8px;
    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: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 4px 8px;
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* 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: #78ffc8;
    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: padding allows ascenders/accents to paint without clipping; negative margin keeps line spacing intact */
  .anim-mask {
    display: block;
    overflow: hidden;
    padding: 0.22em 0.06em 0.1em;
    margin: -0.22em -0.06em -0.1em;
  }
  .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(10% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transition: clip-path 1100ms cubic-bezier(.2,.7,.2,1) 200ms,
                opacity 600ms ease 200ms;
  }

  /* 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: #78ffc8; }
    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: #141417;
    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(8,8,10,0.35) 0%, rgba(8,8,10,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: #78ffc8;
    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(120,255,200,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(120,255,200,0.2); }
  .play-btn svg { margin-left: 6px; }

  /* 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(120,255,200,0.04), transparent); }
  .chapter:hover .chapter-title { color: #78ffc8; }
  .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: #78ffc8;
  }
  .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: #141417;
    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(8,8,10,0) 40%, rgba(8,8,10,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: #78ffc8; 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: #78ffc8; }
  .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: #78ffc8; 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: #78ffc8;
  }
  .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(8,8,10,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);
  }