/* ============================================================
         Famille typographique Virage — charte PSG §4.2.4
         Trois styles définis par la charte :
           · Corporate  → 'Virage'         → texte courant, légendes, mentions
           · Impact     → 'Virage Compact' → logotypes, slogans, titres XXL
           · Extra      → 'Virage Extra'   → mots-clés grand format (contour)

         ÉTAT ACTUEL DES LIVRAISONS (2026-05-21) :
           · 'Virage'         → Bold (700) + BoldExtra (800) uniquement
                                Regular (400) / Medium (500) / Semibold (600)
                                / Italic en attente de livraison par
                                `chartegraphique@psg.fr` (cf. request-1428).
                                Fallback charte §4.2.5 = Arial (web safe officiel).
           · 'Virage Compact' → Regular → Ultrabold complets (impact uniquement)

         font-display: swap → texte lisible en fallback pendant le chargement. */

      /* ── Virage style Corporate (Normal) — pour TEXTE COURANT ───── */
      @font-face {
        font-family: 'Virage';
        src: url('/assets/fonts/Virage-Bold.1373d850ee.woff2') format('woff2');
        font-weight: 700; font-style: normal; font-display: swap;
      }
      @font-face {
        font-family: 'Virage';
        src: url('/assets/fonts/Virage-BoldExtra.e6d693a12e.woff2') format('woff2');
        font-weight: 800; font-style: normal; font-display: swap;
      }
      /* ── À activer dès livraison des fichiers Virage Normal ─────
        @font-face {
          font-family: 'Virage';
          src: url('/assets/fonts/Virage-NormalRegular.woff2') format('woff2');
          font-weight: 400; font-style: normal; font-display: swap;
        }
        @font-face {
          font-family: 'Virage';
          src: url('/assets/fonts/Virage-NormalRegularItalic.woff2') format('woff2');
          font-weight: 400; font-style: italic; font-display: swap;
        }
        @font-face {
          font-family: 'Virage';
          src: url('/assets/fonts/Virage-NormalMedium.woff2') format('woff2');
          font-weight: 500; font-style: normal; font-display: swap;
        }
        @font-face {
          font-family: 'Virage';
          src: url('/assets/fonts/Virage-NormalSemibold.woff2') format('woff2');
          font-weight: 600; font-style: normal; font-display: swap;
        }
       ─────────────────────────────────────────────────────────── */

      /* ── Virage style Impact (Compact) — TITRES XXL & SLOGANS ──── */
      @font-face {
        font-family: 'Virage Compact';
        src: url('/assets/fonts/Virage-CompactRegular.eb6aa70a1e.woff2') format('woff2');
        font-weight: 400; font-style: normal; font-display: swap;
      }
      @font-face {
        font-family: 'Virage Compact';
        src: url('/assets/fonts/Virage-CompactRegularItalic.f421e76c61.woff2') format('woff2');
        font-weight: 400; font-style: italic; font-display: swap;
      }
      @font-face {
        font-family: 'Virage Compact';
        src: url('/assets/fonts/Virage-CompactSemibold.79b3977c3f.woff2') format('woff2');
        font-weight: 600; font-style: normal; font-display: swap;
      }
      @font-face {
        font-family: 'Virage Compact';
        src: url('/assets/fonts/Virage-CompactBold.fbd260c599.woff2') format('woff2');
        font-weight: 700; font-style: normal; font-display: swap;
      }
      @font-face {
        font-family: 'Virage Compact';
        src: url('/assets/fonts/Virage-CompactUltrabold.6757a4b667.woff2') format('woff2');
        font-weight: 900; font-style: normal; font-display: swap;
      }

      /* ============================================================
         Palette officielle PSG — stricte (cf. 07-AMBIANCE-VISUELLE §2)
           --psg-blue          : #004070  Bleu Paris (fonds principaux)
           --psg-blue-premium  : #1A2B4C  Bleu Premium (option haut de gamme)
           --psg-red           : #E30613  Rouge Paris (accents uniquement)
           --psg-gold          : #CEAB5D  Or Paris (parcimonie : KPI, lots d'exception)
           --white             : #FFFFFF
           --light-bg          : #F7F7F8

         Règles inviolables encodées :
           · Pas d'association rouge + or hors logo.
           · Pas de grand bloc en rouge seul (rouge = accent ponctuel).
           · Pas de mélange de variantes de bleu dans un même bloc.
           · Aucune couleur hors de cette palette (les rgba sont
             dérivées de --white pour les translucides sur fond bleu).
         ============================================================ */
      :root {
        --psg-blue: #004070;
        --psg-blue-premium: #1A2B4C;
        --psg-red: #E30613;
        --psg-gold: #CEAB5D;
        --white: #FFFFFF;
        --light-bg: #F7F7F8;

        /* ============================================================
           Theming widgets GoTombola (item-025 request-2026-05-22-0905).
           Les widgets gift-detail.css et partner-detail.css n'exposent
           pas de data-attrs de theming — ils lisent directement des
           variables CSS non préfixées (--accent, --accent-soft, --cream,
           --ink, --font-body, --font-display). On les pose ici en :root
           pour que la cascade les inject dans le light DOM des widgets
           (aucun widget de ce site n'utilise shadowRoot). Mapping vers
           la palette PSG stricte (jamais Rouge → règle inviolable n°1).
           Le widget purchase (widget.js) reçoit ses couleurs en data-*
           attrs sur sa balise <script> (cf. index.html).
           ============================================================ */
        --accent: var(--psg-gold);                  /* #CEAB5D Or Paris */
        --accent-soft: rgba(206, 171, 93, 0.18);    /* Or translucide pour halos / hover */
        --cream: var(--white);                      /* #FFFFFF surface claire */
        --ink: var(--psg-blue-premium);             /* #1A2B4C surfaces sombres + text dark */
        --font-display: 'Virage', Arial, sans-serif;
        --font-body: 'Virage', Arial, sans-serif;
      }
      * { box-sizing: border-box; }
      html {
        scroll-behavior: smooth;
        /* Réserve la hauteur du header sticky lors d'un saut d'ancre
           (item-001 request-2026-05-22-0905). Évite que le titre cible
           ne disparaisse sous le bandeau fixé. Valeur alignée sur la
           hauteur d'un header en mode is-scrolled (~64-72px) + marge. */
        scroll-padding-top: 84px;
      }
      body {
        margin: 0;
        /* Texte courant — Virage Normal Regular 17px, line-height 1.55.
           Style "Corporate" charte §4.2.4 (PAS Compact qui est destiné aux
           titres XXL d'impact). Tant que les fichiers Virage Normal ne sont
           pas livrés, fallback Arial (web safe officiel charte §4.2.5). */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: 18px;   /* Charte §4.2.4 — texte courant 16-18 px, borne haute pour confort premium */
        line-height: 1.6;  /* Respiration accrue (1.6 plutôt que 1.55) pour ressenti premium */
        background: var(--white);
        color: var(--psg-blue);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* Garde-fou mobile : aucun débordement horizontal toléré (375px iPhone) */
        overflow-x: hidden;
        overflow-wrap: break-word;
        word-wrap: break-word;
      }
      img { max-width: 100%; height: auto; display: block; }
      a { color: inherit; }

      /* Accessibilité : lien d'évitement */
      .skip-link {
        position: absolute; left: -9999px; top: auto;
        width: 1px; height: 1px; overflow: hidden;
      }
      .skip-link:focus {
        position: fixed; left: 16px; top: 16px;
        width: auto; height: auto; padding: 12px 18px;
        background: var(--psg-blue); color: var(--white);
        z-index: 999; text-decoration: none;
      }

      /* Conteneur générique */
      .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

      /* En-tête / navigation
         État initial : overlay transparent sur le hero (position: absolute).
         Au scroll (≥ 80 px) : bascule en .is-scrolled — fixed top, fond
         Bleu Premium translucide + backdrop-filter blur, ombre douce,
         padding réduit. Entrée animée translateY(-100%) → 0 + opacity.
         Classe pilotée par l'IIFE "Sticky header" du script consolidé
         (item-001 request-2026-05-22-0905). */
      .site-header {
        position: absolute; top: 0; left: 0; right: 0;
        z-index: 100; padding: 20px 0;
        transition: background-color .25s ease, box-shadow .25s ease,
                    padding .25s ease, backdrop-filter .25s ease;
      }
      .site-header.is-scrolled {
        position: fixed;
        background: rgba(26, 43, 76, 0.92); /* --psg-blue-premium @ 92% */
        -webkit-backdrop-filter: saturate(140%) blur(10px);
        backdrop-filter: saturate(140%) blur(10px);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
        padding: 12px 0;
        animation: site-header-slide-in .35s cubic-bezier(.2,.7,.3,1) both;
      }
      @keyframes site-header-slide-in {
        from { transform: translateY(-100%); opacity: 0; }
        to   { transform: translateY(0);     opacity: 1; }
      }
      /* Repli respectueux des préférences utilisateur (a11y) */
      @media (prefers-reduced-motion: reduce) {
        .site-header { transition: none; }
        .site-header.is-scrolled { animation: none; }
      }
      .site-header .container {
        display: flex; align-items: center; gap: 12px;
      }
      .site-header__brand { margin-right: auto; }

      /* Sélecteur de langue FR / EN — pilule sobre, lisible sur fond bleu */
      .lang-switcher {
        display: inline-flex; align-items: center;
        gap: 2px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 999px;
        padding: 2px;
      }
      .lang-switcher__btn {
        background: transparent; border: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
        color: var(--white);
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 6px 12px;
        border-radius: 999px;
        opacity: 0.92;   /* WCAG AA — label bouton lisible */
        transition: opacity .15s ease, background .15s ease, color .15s ease;
      }
      .lang-switcher__btn:hover,
      .lang-switcher__btn:focus-visible { opacity: 1; }
      .lang-switcher__btn[aria-pressed="true"],
      .lang-switcher__btn[aria-current="page"],
      .lang-switcher__btn.is-active {
        background: var(--white);
        color: var(--psg-blue);
        opacity: 1;
      }
      .site-header__brand {
        display: inline-flex; align-items: center;
        text-decoration: none;
      }
      .site-header__logo {
        display: block;
        height: 48px; width: auto;
        transition: height .25s ease;
      }
      /* Logo légèrement compacté quand le header devient sticky — la barre
         reste discrète sans amputer la lisibilité du logotype. */
      .site-header.is-scrolled .site-header__logo { height: 40px; }
      @media (max-width: 640px) {
        .site-header__logo { height: 40px; }
        .site-header.is-scrolled .site-header__logo { height: 34px; }
      }
      .site-nav ul { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
      .site-nav a {
        /* Liens nav — Virage Normal Semibold (Corporate, charte §4.2.4) */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: var(--white);
        text-decoration: none;
      }
      .site-nav a:hover,
      .site-nav a:focus-visible { text-decoration: underline; }
      /* Bouton hamburger — caché desktop, visible mobile (cf. media queries) */
      .site-nav__toggle {
        display: none;
        align-items: center; justify-content: center;
        width: 44px; height: 44px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 6px;
        color: var(--white);
        cursor: pointer;
        padding: 0;
      }
      .site-nav__toggle:focus-visible { outline: 2px solid var(--psg-gold); outline-offset: 2px; }
      .site-nav__toggle-bar {
        display: block; width: 22px; height: 2px;
        background: currentColor; border-radius: 1px;
        position: relative;
      }
      .site-nav__toggle-bar::before,
      .site-nav__toggle-bar::after {
        content: ''; position: absolute; left: 0;
        width: 22px; height: 2px;
        background: currentColor; border-radius: 1px;
      }
      .site-nav__toggle-bar::before { top: -7px; }
      .site-nav__toggle-bar::after  { top:  7px; }

      /* Section 1 — Hero plein écran
         Background photo Parc des Princes nuit + overlay Bleu Paris alpha 0.65
         (range 60–70% imposée par la DA §7 — assure le contraste AA du texte blanc).
         La couleur de fond du <section> sert de fallback avant chargement de l'image. */
      .section-hero {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        min-height: 100vh;
        background: var(--psg-blue-premium);
        color: var(--white);
        display: flex; align-items: center;
        padding: 140px 0 80px;
      }
      .section-hero__bg {
        position: absolute; inset: 0; z-index: -2;
        display: block;
      }
      .section-hero__bg img {
        width: 100%; height: 100%;
        object-fit: cover; object-position: center 30%;
        display: block;
      }
      .section-hero__overlay {
        position: absolute; inset: 0; z-index: -1;
        background: var(--psg-blue); /* Bleu Paris */
        opacity: 0.65;               /* alpha 65% — milieu de fourchette DA */
      }
      .section-hero__inner { max-width: 820px; position: relative; }
      .section-hero h1 {
        /* Hero XXL — Virage Bold (700) PLEIN, style Corporate.
           Convention DA §6 révisée (item-004 request-1824) : Virage
           Compact Ultrabold est trop dense / illisible à grande taille,
           car c'est le tracé du logotype PSG. Le H1 garde son impact
           via la taille (jusqu'à 88 px) et le Bold solide. Plancher
           40 px pour éviter le débordement de "Tombola solidaire" à 375 px.
           Item-013 request-2026-05-22-0905 : le H1 contient désormais deux
           <span> empilés (titre principal + sous-titre), chacun stylé
           individuellement ci-dessous. Les propriétés héritables (font-family,
           line-height) restent posées au niveau du <h1>. */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: clamp(40px, 9vw, 88px);
        line-height: 1.05;
        margin: 0 0 16px;
        letter-spacing: -0.015em;
      }
      /* Ligne 1 — "Tombola solidaire" : reprend le poids et la taille XXL
         du <h1> par défaut. display:block force le passage à la ligne pour
         la deuxième moitié du titre. */
      .section-hero__title-main {
        display: block;
        font-weight: 700;
        letter-spacing: -0.015em;
      }
      /* Ligne 2 — "Pour les enfants de Necker-Enfants malades" : ~62 % de la taille XXL
         (clamp 26-54 px), poids un cran en dessous (Semibold 600).
         Couleur Blanc plein imposée par la règle inviolable n°4 (sur
         image = Bleu + Blanc uniquement — pas d'Or accent ici malgré la
         suggestion du brief). Charte §4.2.15 respectée : pas de variation
         de taille à l'intérieur d'une même ligne, le saut de taille
         intervient entre DEUX lignes distinctes. */
      .section-hero__title-sub {
        display: block;
        margin-top: 6px;
        font-weight: 600;
        font-size: clamp(26px, 5.6vw, 56px);
        line-height: 1.1;
        letter-spacing: -0.005em;
        color: var(--white);
        opacity: 0.92;
      }
      @media (max-width: 374px) {
        /* Très petits écrans : aligne la sous-ligne sur le plancher h1 réduit. */
        .section-hero__title-sub { font-size: 22px; }
      }
      .section-hero p.lead {
        /* Sous-titre hero — Virage Normal Semibold (item-008 : taille
           recalibrée 20 → 28 px, line-height 1.4 pour respiration, opacity
           1 forcée, couleur blanche pleine sur overlay bleu, max-width
           60ch pour éviter les lignes trop longues. */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 600;
        font-size: clamp(20px, 2.3vw, 28px);
        line-height: 1.4;
        color: var(--white);
        opacity: 1;
        margin: 0 0 32px;
        max-width: 60ch;
      }
      .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
      .btn {
        /* CTA — Virage Bold UPPERCASE, letter-spacing +2% (16–18 px) */
        display: inline-flex; align-items: center; justify-content: center;
        padding: 16px 28px;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 17px;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        border-radius: 0; /* CTA tranchants — charte */
        border: 2px solid transparent;
      }
      .btn--primary { background: var(--psg-red); color: var(--white); }
      .btn--secondary { background: transparent; color: var(--white); border-color: var(--white); }
      /* Compteur hero retiré — cf. item-012 request-2026-05-22-0905. */

      /* Section 2 — Bandeau de confiance
         3 piliers de réassurance posés juste sous le hero. Fond clair
         (--light-bg), alignement horizontal desktop / vertical mobile,
         séparateurs subtils Bleu Paris translucide entre piliers.
         Aucune animation : la confiance se pose en 3 secondes. */
      /* Bandeau confiance (item-011 request-2026-05-22-0905) — refonte
         ultra-sobre : une seule ligne centrée. Hauteur réduite ~80 px,
         filet Or vertical séparateur logo / nom du Fonds. */
      .section-trust {
        background: var(--light-bg);
        padding: 18px 0;
        border-top: 4px solid var(--psg-blue);
        min-height: 80px;
        display: flex;
        align-items: center;
      }
      .trust-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin: 0 auto;
        text-align: center;
      }
      .trust-line__logo {
        display: block;
        height: 36px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
      }
      .trust-line__sep {
        display: block;
        width: 1px;
        height: 24px;
        background: var(--psg-gold);
        opacity: 0.85;
        flex-shrink: 0;
      }
      .trust-line__label {
        /* Nom du Fonds — Virage Normal Semibold UPPERCASE, Bleu Paris
           plein, letter-spacing typo de réassurance institutionnelle. */
        margin: 0;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--psg-blue);
      }
      @media (max-width: 640px) {
        /* Sur très petits écrans, le séparateur Or disparaît pour
           laisser logo et nom s'empiler proprement. */
        .section-trust { min-height: 0; padding: 16px 0; }
        .trust-line { gap: 12px; }
        .trust-line__sep { display: none; }
        .trust-line__logo { height: 30px; }
        .trust-line__label { font-size: 12px; letter-spacing: 0.06em; }
      }

      /* Utilitaire d'accessibilité — masque visuellement mais reste lisible
         aux lecteurs d'écran. Préférable au style inline ad hoc. */
      .visually-hidden {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
      }

      /* ────── Focus ring universel — WCAG 2.4.7 + 2.4.13 ──────
         Double anneau (Or 2 px puis Bleu Premium 2 px) via box-shadow :
         garantit ≥ 3:1 entre les deux couleurs, donc focus toujours visible
         que le fond soit clair (--white, --light-bg) ou sombre (--psg-blue,
         --psg-blue-premium). Outline retiré au profit du shadow pour suivre
         la forme arrondie des éléments (cards, btn carrés, pill badges). */
      :focus { outline: none; }
      :focus-visible {
        outline: 2px solid var(--psg-gold);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--psg-blue-premium);
        border-radius: 2px;
      }
      /* Pour les CTA carrés .btn — outline plus marquée + offset adapté */
      .btn:focus-visible {
        outline: 3px solid var(--psg-gold);
        outline-offset: 3px;
        box-shadow: 0 0 0 6px var(--psg-blue-premium);
      }
      /* Les liens du footer (fond sombre) — gardent simplement l'underline */
      .site-footer a:focus-visible {
        outline: 2px solid var(--psg-gold);
        outline-offset: 3px;
        box-shadow: none;
      }

      /* Section 3 — Le projet
         Demi-page : contenu (titre + texte + 3 KPI) à gauche, render Kengo Kuma à droite.
         Stack sur mobile (render en bas, après les KPI). */
      .section-project {
        background: var(--white);
        padding: 96px 0;
      }
      .section-project__grid {
        display: grid;
        gap: 48px;
        grid-template-columns: 1fr;
        align-items: center;     /* image principale recentrée verticalement (item-006) */
      }
      @media (min-width: 960px) {
        .section-project__grid {
          /* Légèrement plus de place pour le média (image + bande de vignettes
             item-006), tout en gardant un déséquilibre maîtrisé qui privilégie
             encore la lecture du texte. */
          grid-template-columns: 1fr 1.12fr;
          gap: 64px;
        }
      }
      .section-project__lead {
        /* Paragraphes section #projet — Virage Normal Regular (item-012).
           Plage 18-20 px, line-height 1.65, max-width 60ch (mesure
           typographique idéale ≈ 60 caractères), alignement gauche
           (charte §4.2.9 : pas de centrage sur bloc multi-lignes). */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: clamp(18px, 1.6vw, 20px);
        line-height: 1.65;
        max-width: 60ch;
        text-align: left;
      }
      .section-project__lead + .section-project__lead { margin-top: 16px; }

      /* ============================================================
         Galerie projet (item-006 request-2026-05-22-0905).
         · .project-media__stage = scène empilée (9 slides en absolute,
           seul .is-active a opacity:1 — cross-fade ~600ms).
         · Rotation auto pilotée par l'IIFE "Galerie projet + lightbox".
           Pause au hover/focus, désactivée si prefers-reduced-motion.
         · Clic sur la scène → ouvre la lightbox plein écran.
         · .project-media__thumbs = bande de 9 vignettes sous la scène
           (5 colonnes desktop, 3 mobile). Clic = active la slide.
         ============================================================ */
      .project-media { margin: 0; position: relative; }
      .project-media__stage {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 3 / 2;            /* plus cinématique que 4/3 */
        border-radius: 12px;
        overflow: hidden;
        background: rgba(0, 64, 112, 0.06);
        box-shadow: 0 24px 56px -20px rgba(0, 64, 112, 0.32);
        cursor: zoom-in;
        isolation: isolate;
      }
      .project-media__stage:focus-visible {
        outline: 2px solid var(--psg-gold);
        outline-offset: 4px;
      }
      .project-media__slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity .6s ease;
        pointer-events: none;
      }
      .project-media__slide.is-active {
        opacity: 1;
        pointer-events: auto;
      }
      .project-media__slide picture,
      .project-media__slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 40%;     /* centrage légèrement haut — sujet centré */
      }
      /* Affordance "Voir en grand" — pastille discrète en haut à droite,
         renforcée au hover/focus pour signaler l'interaction. */
      .project-media__zoom-hint {
        position: absolute;
        top: 12px; right: 12px;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        background: rgba(26, 43, 76, 0.78);
        color: var(--white);
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-radius: 999px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0.88;
        transition: opacity .2s ease, transform .2s ease;
        pointer-events: none;
      }
      .project-media__zoom-hint-icon {
        font-size: 14px;
        line-height: 1;
      }
      .project-media__stage:hover .project-media__zoom-hint,
      .project-media__stage:focus-visible .project-media__zoom-hint {
        opacity: 1;
        transform: translateY(-1px);
      }
      .project-media__caption {
        /* Légende d'image — style Corporate (charte §4.2.4 : légendes en Normal) */
        margin: 14px 0 0;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-style: italic;
        font-size: 13px;
        line-height: 1.4;
        color: var(--psg-blue);
        opacity: 0.85;   /* meta secondaire — légende d'image */
      }
      .project-media__thumbs {
        list-style: none;
        margin: 18px 0 0;
        padding: 0;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(5, 1fr);
      }
      .project-media__thumbs li { margin: 0; padding: 0; }
      .project-thumb {
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 2px solid transparent;
        border-radius: 8px;
        overflow: visible;
        cursor: pointer;
        transition: border-color .2s ease, transform .2s ease,
                    box-shadow .2s ease, opacity .2s ease;
        opacity: 0.72;
      }
      .project-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 6px;
      }
      .project-thumb:hover {
        opacity: 1;
        transform: translateY(-1px);
      }
      .project-thumb:focus-visible {
        outline: 2px solid var(--psg-gold);
        outline-offset: 4px;
      }
      /* État actif : la vignette correspondant à l'image principale
         affichée est nettement marquée (bordure Or + halo + barre Or
         sous la vignette + léger soulèvement). Distinct du focus-ring. */
      .project-thumb.is-active {
        border-color: var(--psg-gold);
        opacity: 1;
        transform: translateY(-2px);
        box-shadow:
          0 0 0 1px var(--psg-gold),
          0 10px 22px -10px rgba(206, 171, 93, 0.65);
      }
      .project-thumb.is-active::after {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -6px;
        height: 3px;
        border-radius: 2px;
        background: var(--psg-gold);
        pointer-events: none;
      }
      .project-thumb.is-active img {
        filter: saturate(1.05);
      }
      @media (prefers-reduced-motion: reduce) {
        .project-media__slide { transition: none; }
        .project-thumb { transition: none; }
        .project-thumb.is-active { transform: none; }
        .project-thumb:hover { transform: none; }
      }

      /* Variante grille tablette / mobile — 3 colonnes pour préserver la lisibilité */
      @media (max-width: 767px) {
        .project-media__thumbs { grid-template-columns: repeat(3, 1fr); }
      }

      /* ============================================================
         Lightbox plein écran (item-006).
         Overlay sombre + image centrée + vignettes en bas + nav latérale.
         Fermeture par bouton ✕, clic sur le fond, Escape, ou Tab/Shift-Tab
         qui boucle au focus (focus trap géré côté JS).
         ============================================================ */
      .project-lightbox[hidden] { display: none; }
      .project-lightbox {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 64px 24px 120px;
        background: rgba(10, 18, 36, 0.94);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity .2s ease;
      }
      .project-lightbox.is-open {
        opacity: 1;
      }
      .project-lightbox__stage {
        position: relative;
        flex: 1;
        width: 100%;
        max-width: 1400px;
        max-height: calc(100vh - 220px);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .project-lightbox__img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
        transition: opacity .25s ease;
      }
      .project-lightbox__counter {
        position: absolute;
        bottom: 96px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--white);
        opacity: 0.78;
        pointer-events: none;
      }
      .project-lightbox__close,
      .project-lightbox__nav {
        position: absolute;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        color: var(--white);
        cursor: pointer;
        font-family: 'Virage', sans-serif;
        line-height: 1;
        transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
      }
      .project-lightbox__close {
        top: 20px; right: 20px;
        width: 48px; height: 48px;
        font-size: 22px;
        display: flex; align-items: center; justify-content: center;
      }
      .project-lightbox__nav {
        top: 50%;
        transform: translateY(-50%);
        width: 56px; height: 56px;
        font-size: 36px;
        font-weight: 400;
        display: flex; align-items: center; justify-content: center;
      }
      .project-lightbox__nav--prev { left: 24px; }
      .project-lightbox__nav--next { right: 24px; }
      .project-lightbox__close:hover,
      .project-lightbox__nav:hover {
        background: rgba(255, 255, 255, 0.18);
      }
      .project-lightbox__close:focus-visible,
      .project-lightbox__nav:focus-visible {
        outline: 2px solid var(--psg-gold);
        outline-offset: 2px;
      }
      .project-lightbox__thumbs {
        position: absolute;
        bottom: 16px; left: 0; right: 0;
        margin: 0; padding: 0 24px;
        list-style: none;
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 100%;
      }
      .project-lightbox__thumbs li { margin: 0; padding: 0; }
      .project-lightbox__thumb {
        display: block;
        padding: 0;
        background: transparent;
        border: 2px solid transparent;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        opacity: 0.55;
        transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
      }
      .project-lightbox__thumb img {
        display: block;
        width: 72px; height: 48px;
        object-fit: cover;
      }
      .project-lightbox__thumb:hover { opacity: 0.9; transform: translateY(-1px); }
      .project-lightbox__thumb.is-active {
        opacity: 1;
        border-color: var(--psg-gold);
      }
      .project-lightbox__thumb:focus-visible {
        outline: 2px solid var(--psg-gold);
        outline-offset: 2px;
      }
      body.has-lightbox-open {
        overflow: hidden;       /* gèle le scroll de la page sous la modale */
      }
      @media (max-width: 767px) {
        .project-lightbox { padding: 56px 12px 96px; }
        .project-lightbox__close { width: 40px; height: 40px; font-size: 18px; top: 12px; right: 12px; }
        .project-lightbox__nav { width: 44px; height: 44px; font-size: 28px; }
        .project-lightbox__nav--prev { left: 8px; }
        .project-lightbox__nav--next { right: 8px; }
        .project-lightbox__counter { bottom: 80px; }
        .project-lightbox__thumb img { width: 56px; height: 38px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .project-lightbox,
        .project-lightbox__img,
        .project-lightbox__thumb,
        .project-lightbox__close,
        .project-lightbox__nav { transition: none; }
      }
      .section-project h2,
      .section-lots h2,
      .section-purchase h2,
      .section-sponsors h2,
      .section-why h2 {
        /* Titre de section H2 — Virage Bold.
           Plancher abaissé à 32px (mobile), monte à 56 px desktop. */
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: clamp(32px, 5vw, 56px);
        line-height: 1.1;
        letter-spacing: -0.01em;
        color: var(--psg-blue);
        margin: 0 0 24px;
      }
      /* ============================================================
         KPI projet — refonte lisibilité (item-014 request-2026-05-22-0905).
         · La valeur du KPI tient sur UNE seule ligne (white-space: nowrap)
           et est dimensionnée pour que "Sept. 2026" (10 caractères) entre
           dans la cellule la plus étroite (minmax 220 px).
         · letter-spacing resserré -0.02em + tabular-nums pour des digits
           alignés en grille de chiffres (premium feel des KPI éditoriaux).
         · Le filet Or migre du dessus de la cellule vers SOUS la valeur :
           border-bottom matched au content-width (display: inline-block)
           = un trait Or de longueur de chaque chiffre, plus typographique
           qu'un séparateur horizontal de bloc.
         · Famille Virage Corporate (style §4.2.4) — Virage Compact reste
           interdit (cf. note brand DNA request-1824).
         ============================================================ */
      .project-kpis {
        display: grid; gap: 28px 24px; margin-top: 48px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      }
      .kpi {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .kpi__value {
        display: inline-block;             /* la border-bottom Or matche le content-width */
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: clamp(34px, 3.6vw, 44px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: var(--psg-blue);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum' 1;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--psg-gold);
        margin: 0 0 12px;
      }
      .kpi__value sup {
        /* "3ᵉ" — exposant légèrement relevé en Virage Bold, taille réduite
           pour ne pas casser la baseline de la rangée. */
        font-size: 0.5em;
        vertical-align: 0.55em;
        font-weight: 700;
      }
      .kpi__label {
        display: block;
        margin: 0;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        line-height: 1.4;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--psg-blue);
        opacity: 0.88;
      }

      /* Section 4 — Les lots
         Fond Bleu Premium (sombre), cards translucides blanches (rgba white).
         Badge "Lot d'exception" en Or Paris (DA §4 — touche premium parcimonieuse).
         Arrondis 12 px (charte : 8–16 px sur les cards, 0 sur les CTA). */
      .section-lots {
        background: var(--psg-blue-premium);
        color: var(--white);
        padding: 96px 0;
      }
      .section-lots h2 { color: var(--white); }
      .section-lots__lead {
        max-width: 720px;
        font-size: clamp(18px, 1.5vw, 20px);
        line-height: 1.65;
        opacity: 0.92;
      }
      .lots-grid {
        display: grid; gap: 24px; margin-top: 48px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      }
      .lot-card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        overflow: hidden;
        display: flex; flex-direction: column;
        transition: transform .25s ease, border-color .25s ease,
                    box-shadow .25s ease;
        /* Card cliquable (item-005 request-2026-05-22-0905) — role="button"
           + tabindex="0" + handler JS (ouverture modale gift-detail).
           Le curseur pointer signale l'affordance, le focus-visible Or
           reprend l'anneau global d'a11y. */
        cursor: pointer;
      }
      .lot-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); }
      .lot-card:focus-visible {
        outline: 2px solid var(--psg-gold);
        outline-offset: 3px;
      }
      /* L'indicateur "Voir le détail →" gagne en intensité au survol/focus
         de la card pour renforcer l'affordance sans surcharger l'état repos. */
      .lot-card:hover .lot-card__view-detail,
      .lot-card:focus-visible .lot-card__view-detail { opacity: 1; }
      .lot-card:hover .lot-card__view-detail-arrow,
      .lot-card:focus-visible .lot-card__view-detail-arrow { transform: translateX(2px); }
      .lot-card--exception { border-color: rgba(206,171,93,0.45); }
      .lot-card--exception:hover { border-color: var(--psg-gold); }
      .lot-card--pending { opacity: 0.82; }

      .lot-card__media {
        position: relative;
        aspect-ratio: 4 / 3;
        background: rgba(0,0,0,0.18);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
      }
      /* <picture> doit remplir le média en bloc absolu : sinon le
         transform:scale du hover (Premium FX++) en fait le bloc
         conteneur de l'<img> absolu alors qu'il est display:inline /
         taille nulle → l'image collapse et disparaît au survol. */
      .lot-card__media picture {
        position: absolute; inset: 0;
        display: block;
        width: 100%; height: 100%;
      }
      .lot-card__media img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: center;
      }
      /* Placeholder graphique quand le visuel hi-res du lot n'est pas
         encore livré. Item-016 request-2026-05-22-0905 : suppression des
         "N°02..N°08" parasites — le placeholder n'affiche plus que
         le caption "Visuel à venir" centré, sobre, sur fond Bleu Premium
         (cohérence visuelle de la grille même quand les visuels manquent). */
      .lot-card__placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
      }
      .lot-card__placeholder small {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--white);
        opacity: 0.85;   /* meta secondaire — caption "Visuel à venir" */
        text-align: center;
      }
      .lot-card__badge {
        position: absolute; top: 12px; left: 12px;
        background: var(--psg-gold);
        color: var(--psg-blue-premium);
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        padding: 6px 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .lot-card__badge--pending {
        background: transparent;
        color: var(--white);
        border: 1px solid rgba(255,255,255,0.5);
      }

      .lot-card__body {
        padding: 20px 22px 24px;
        display: flex; flex-direction: column;
        gap: 8px; flex: 1;
      }
      .lot-card__sponsor {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--psg-gold);
        margin: 0;
      }
      .lot-card__title {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: clamp(20px, 1.8vw, 24px);
        line-height: 1.15;
        color: var(--white);
        margin: 0 0 4px;
      }
      .lot-card__desc {
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.5;
        color: var(--white);
        opacity: 0.92;   /* WCAG AA — paragraphe description lot */
        margin: 0;
        flex: 1;
      }
      .lot-card__footer {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,0.12);
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 12px;
      }
      .lot-card__value-label {
        /* Étiquette "Valeur estimée" — Virage Normal */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--white);
        opacity: 0.85;   /* eyebrow "Valeur estimée" */
      }
      .lot-card__value {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--psg-gold);
      }
      /* "Voir le détail →" — affordance discrète signalant que la card
         est cliquable (item-005). Or Paris UPPERCASE 13 px, opacité .78
         au repos pour rester sobre, montée à 1 au hover/focus (cf. règles
         hover/focus ci-dessus). La flèche est isolée dans son span pour
         pouvoir l'animer (translateX) indépendamment du texte. */
      .lot-card__view-detail {
        margin: 12px 0 0;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--psg-gold);
        opacity: 0.78;
        text-align: right;
        transition: opacity .2s ease;
      }
      .lot-card__view-detail-arrow {
        display: inline-block;
        margin-left: 6px;
        transition: transform .2s ease;
      }

      /* Section 5 — Mes tickets
         Tunnel d'achat HelloAsso uniquement (pas de Stripe/SumUp/PayPal).
         Prix codés en dur (DA §7 + brief) : 5€ unitaire, 20€ pack de 5.
         Pack mis en avant via .ticket-card--featured + badge Or "Le plus solidaire". */
      .section-purchase {
        background: var(--light-bg);
        padding: 96px 0;
      }
      .section-purchase__lead {
        max-width: 680px;
        font-size: clamp(18px, 1.5vw, 20px);
        line-height: 1.65;
      }
      .tickets-grid {
        display: grid; gap: 24px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        max-width: 880px;
        margin: 48px auto 0;
        align-items: stretch;
      }
      .ticket-card {
        position: relative;
        background: var(--white);
        border: 1px solid rgba(0,64,112,0.12);
        border-top: 4px solid var(--psg-blue);
        padding: 32px 28px 28px;
        display: flex; flex-direction: column;
        gap: 16px;
        border-radius: 12px;
      }
      .ticket-card--featured {
        border-top-color: var(--psg-gold);
        box-shadow: 0 16px 40px -16px rgba(0,64,112,0.25);
      }
      .ticket-card__badge {
        position: absolute; top: -14px; left: 50%;
        transform: translateX(-50%);
        background: var(--psg-gold);
        color: var(--psg-blue-premium);
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        padding: 6px 12px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        white-space: nowrap;
      }
      .ticket-card__label {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--psg-blue);
        opacity: 0.85;   /* eyebrow "Mon ticket / Mon pack" */
        margin: 0;
      }
      .ticket-card__name {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: clamp(22px, 2vw, 26px);
        color: var(--psg-blue);
        margin: 0;
      }
      .ticket-card__price {
        display: flex; align-items: baseline; gap: 8px;
        margin: 4px 0 0;
      }
      .ticket-card__price-amount {
        /* Prix unitaire des tickets — refonte lisibilité (item-015
           request-2026-05-22-0905).

           Cause racine du bug : font-weight: 800 mappait sur
           Virage-BoldExtra.woff2 qui appartient au style « Extra »
           (charte §4.2.4 — tracé contour / bicolore destiné aux
           campagnes ponctuelles, jamais aux chiffres pleins).
           Règle inviolable n°11 du brand DNA : poids 800 banni sur
           tout chiffre / KPI / compteur / titre plein.

           Correction : retour à Virage Bold 700 plein (style
           Corporate), fallback Arial (charte §4.2.5 — seul fallback
           web safe autorisé). Compact reste banni (cf. note brand
           DNA request-1824). Taille recalibrée vers le haut pour
           compenser la perte d'épaisseur visuelle entre 800 (outline)
           et 700 (plein). Numérals tabulaires (tnum) pour aligner les
           chiffres "5" / "20" sur une grille commune. */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: clamp(64px, 8vw, 88px);
        line-height: 1;
        letter-spacing: -0.02em;
        color: var(--psg-blue);             /* contraste #004070/#FFF ≈ 10.5:1 — AA large */
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum' 1;
        white-space: nowrap;
      }
      .ticket-card__price-currency {
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: clamp(28px, 3vw, 36px);
        line-height: 1;
        color: var(--psg-blue);
      }
      .ticket-card__detail {
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.5;
        color: var(--psg-blue);
        opacity: 0.92;   /* WCAG AA — paragraphe détail ticket */
        margin: 0;
        flex: 1;
      }
      .ticket-card__unit-price {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--psg-blue);
        opacity: 0.85;   /* eyebrow "Soit X € par ticket" */
      }
      .ticket-card .btn {
        width: 100%;
        margin-top: 4px;
      }
      .ticket-card .btn--primary {
        background: var(--psg-red);
        color: var(--white);
      }
      .ticket-card--featured .btn--primary {
        background: var(--psg-blue);
      }

      .purchase-foot {
        text-align: center;
        max-width: 720px;
        margin: 32px auto 0;
        font-family: 'Virage', Arial, sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: var(--psg-blue);
        opacity: 0.85;   /* meta secondaire — réassurance HelloAsso */
      }
      .purchase-foot strong { font-weight: 600; opacity: 1; }

      /* Section 6 — Nos sponsors
         "Wall of fame" sur fond clair (--white), texte Bleu Paris.
         5 cards : 3 confirmés (PSG, Sisley, Sakina Karchaoui) + 2 en attente
         (Dior, Neubauer) marqués via .sponsor-card--pending + badge "En cours
         de confirmation". Logos manquants → wordmark typographique Virage Bold. */
      .section-sponsors {
        background: var(--white);
        padding: 96px 0;
      }
      .section-sponsors__lead {
        max-width: 720px;
        font-size: clamp(18px, 1.5vw, 20px);
        line-height: 1.65;
      }
      .sponsors-grid {
        display: grid; gap: 20px; margin-top: 48px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        align-items: stretch;
      }
      .sponsor-card {
        background: var(--white);
        border: 1px solid rgba(0,64,112,0.12);
        border-radius: 12px;
        padding: 28px 24px 24px;
        display: flex; flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      }
      .sponsor-card:hover {
        transform: translateY(-2px);
        border-color: rgba(0,64,112,0.28);
        box-shadow: 0 16px 36px -20px rgba(0,64,112,0.25);
      }
      .sponsor-card--pending { opacity: 0.75; }
      .sponsor-card--pending:hover { opacity: 1; }

      .sponsor-card__media {
        height: 80px;
        width: 100%;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 4px;
      }
      .sponsor-card__media img {
        max-height: 56px;
        max-width: 80%;
        width: auto; height: auto;
        object-fit: contain;
        display: block;
      }
      /* Portrait photo de Sakina Karchaoui — item-005 request-2026-06-25-0938.
         Remplace le monogramme SK (inline SVG) par sa vraie photo (don).
         Avatar circulaire 64 px calibré sur la hauteur de .sponsor-card__media,
         avec anneau Or fin conservé (rappel du monogramme premium) sur fond
         Bleu Paris. object-fit:cover sur une source carrée → pas de déformation.
         Spécificité (classe + élément) requise pour battre `.sponsor-card__media
         img` (max-height:56px / object-fit:contain). */
      .sponsor-card__media img.sponsor-card__portrait {
        width: 64px;
        height: 64px;
        max-width: 64px;
        max-height: 64px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0 0 1.5px #CEAB5D;
        background: #1A2B4C;
      }
      /* Wordmark de secours quand le logo vectoriel n'est pas encore
         fourni (ou que le SVG officiel a échoué à charger — cf. IIFE
         "Sponsor logo fallback" item-017). Taille réduite (item-005) pour
         ne pas dominer le vrai nom de marque en dessous. Opacité 1.0
         (couleur Bleu Paris pleine). Poids 700 plein (Corporate) — le
         800 précédent mappait sur Virage-BoldExtra (style « Extra » =
         contour, illisible en plein) — règle inviolable n°11. */
      .sponsor-card__wordmark {
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: clamp(18px, 1.8vw, 24px);
        line-height: 1;
        color: var(--psg-blue);
        opacity: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .sponsor-card__wordmark span {
        /* Sous-titre wordmark sponsor — Virage Normal Semibold */
        display: block;
        margin-top: 6px;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--psg-blue);
        opacity: 0.85;   /* meta secondaire — sous-titre wordmark sponsor */
      }

      .sponsor-card__type {
        /* Étiquette "type" sponsor (eyebrow) — Virage Normal Bold, 13 px (item-005) */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--psg-blue);
        opacity: 0.85;   /* eyebrow type sponsor */
        margin: 4px 0 0;
      }
      .sponsor-card__name {
        /* Nom officiel sponsor — Virage Bold 18 px, opacity 1.0 (item-005) */
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 1.2;
        color: var(--psg-blue);
        margin: 0;
      }
      .sponsor-card__desc {
        /* Description courte sponsor — 14 px, line-height 1.55, opacity 0.85 (item-005) */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.55;
        color: var(--psg-blue);
        opacity: 0.85;
        margin: 0;
        flex: 1;
      }
      .sponsor-card__link {
        margin-top: 6px;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--psg-blue);
        text-decoration: none;
        border-bottom: 1px solid currentColor;
        padding-bottom: 2px;
        transition: color .15s ease, border-color .15s ease;
      }
      .sponsor-card__link:hover,
      .sponsor-card__link:focus-visible {
        color: var(--psg-red);
        border-bottom-color: var(--psg-red);
      }

      .sponsor-card__badge {
        align-self: center;
        background: transparent;
        border: 1px solid rgba(0,64,112,0.35);
        color: var(--psg-blue);
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 6px 12px;
        border-radius: 999px;
      }

      /* Section 7 — Pourquoi cette tombola
         Fond Bleu Paris (--psg-blue), texte blanc, accents Or pour
         les 3 valeurs PSG (Excellence / Innovation / Empowerment) et la
         signature/byline des citations. Une seule occurrence "Ici c'est
         Paris" sur toute la page, traitée en punchline centrée. */
      .section-why {
        background: var(--psg-blue);
        color: var(--white);
        padding: 96px 0 80px;
        /* Refonte item-007 — la section porte désormais une figure
           plein-cadre qui sort des deux .container internes. */
      }
      .section-why h2 { color: var(--white); }
      .section-why__intro {
        /* Lead + valeurs sur une mesure typographique soutenue (~72ch)
           pour respirer sans devenir trop large. */
        max-width: 820px;
        margin-bottom: 64px;
      }
      .section-why__lead {
        /* Intro section "Pourquoi" — Virage Normal Regular (item-013).
           Plage 18-20 px, line-height 1.65, opacity 0.95 blanc. */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: clamp(18px, 1.6vw, 20px);
        line-height: 1.65;
        opacity: 0.95;
        margin: 0 0 16px;
      }
      .section-why__values {
        /* Paragraphe des 3 valeurs PSG — mêmes paramètres que .__lead.
           Les mots-or "Excellence / Innovation / Empowerment" sont
           accentués par la COULEUR et le POIDS uniquement (charte §4.2.15 :
           interdit de varier la taille dans un même mot ou ligne). */
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: clamp(18px, 1.6vw, 20px);
        line-height: 1.65;
        opacity: 0.95;
        margin: 0;
      }
      /* ============================================================
         Bloc image émotion (item-007 request-2026-05-22-0905).
         Photo supporters bleus en plein cadre (full-bleed via 100vw),
         overlay Bleu Paris dégradé pour garantir le contraste AA du
         texte blanc en sur-impression. Largement immersif, scellé entre
         les deux .container de la section (intro au-dessus, citations
         en-dessous). Hauteur cinématique clamp 280-500 px.
         ============================================================ */
      .section-why__emotion {
        position: relative;
        margin: 24px 0 64px;
        left: 50%;
        right: 50%;
        width: 100vw;
        max-width: 100vw;
        transform: translateX(-50vw);
        overflow: hidden;
        background: var(--psg-blue-premium);  /* fallback avant chargement */
      }
      .section-why__emotion-img {
        display: block;
        width: 100%;
        height: clamp(280px, 42vh, 500px);
        object-fit: cover;
        object-position: center 35%;
      }
      .section-why__emotion-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 64, 112, 0.45) 0%,
          rgba(0, 64, 112, 0.78) 100%
        );
        pointer-events: none;
      }
      .section-why__emotion-content {
        position: absolute;
        inset: auto 0 0 0;
        margin: 0 auto;
        padding: clamp(28px, 5vw, 56px) 24px clamp(28px, 5vw, 48px);
        max-width: 1200px;
        color: var(--white);
        /* Aucune couleur Or ou Rouge sur l'image (règle inviolable n°4) :
           Bleu + Blanc uniquement sur fond image. */
      }
      .section-why__emotion-eyebrow {
        margin: 0 0 12px;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--white);
        opacity: 0.92;
      }
      .section-why__emotion-text {
        margin: 0;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: clamp(24px, 3.5vw, 44px);
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--white);
        max-width: 22ch;
        text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);  /* lisibilité AA */
      }
      @media (max-width: 767px) {
        .section-why__emotion { margin: 16px 0 48px; }
        .section-why__emotion-img { height: clamp(220px, 50vw, 320px); }
        .section-why__emotion-text { max-width: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        .section-why__emotion-img { transform: none; }
      }
      .section-why__values strong {
        /* Mots-or Excellence / Innovation / Empowerment — Virage Bold 700,
           Or Paris plein, MÊME taille que le paragraphe (charte §4.2.15).
           font-size hérité du parent, jamais redéfini ici. */
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        color: var(--psg-gold);
        letter-spacing: 0.01em;
      }

      .quotes-grid {
        display: grid;
        gap: 32px;
        margin-top: 56px;
        grid-template-columns: 1fr;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
      }
      @media (min-width: 900px) {
        .quotes-grid { gap: 40px; }
      }
      .section-why blockquote {
        position: relative;
        margin: 0;
        padding: 12px 0 12px 56px;                /* room pour le guillemet décoratif Or */
        border-left: 3px solid var(--psg-gold);   /* item-010 — filet plus fin */
        text-align: left;                         /* charte §4.2.9 — pas de centrage */
      }
      /* Guillemet décoratif Or « ❝ » en sur-impression du filet
         (item-007). Posé sur fond Bleu Paris, sans rouge à proximité —
         règle inviolable n°1 respectée. */
      .section-why blockquote::before {
        content: '\201C';                          /* left double quotation mark */
        position: absolute;
        left: 12px;
        top: -18px;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: 96px;
        line-height: 1;
        color: var(--psg-gold);
        opacity: 0.32;
        pointer-events: none;
        user-select: none;
      }
      .section-why blockquote p {
        /* Corps de citation — Virage Normal Italic (Corporate, item-010).
           Taille recalibrée 17 → 20 px, line-height 1.6, opacity 0.95 blanc. */
        margin: 0;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-style: italic;
        font-size: clamp(17px, 1.6vw, 20px);
        line-height: 1.6;
        color: var(--white);
        opacity: 0.95;
      }
      .section-why blockquote footer {
        /* Nom de l'auteur (SAMIA ZITOUNI / KENGO KUMA) — Virage Bold 14 px
           UPPERCASE letter-spacing 0.1em, Or Paris plein (item-010). */
        margin-top: 18px;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 14px;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--psg-gold);
        opacity: 1;
      }
      .section-why blockquote footer span {
        /* Fonction sous l'auteur (Coordinatrice du Mécénat / Architecte) —
           Virage Normal Regular 13 px, blanc opacity 0.85 (item-010). */
        display: block;
        margin-top: 4px;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: 13px;
        text-transform: none;
        letter-spacing: 0;
        color: var(--white);
        opacity: 0.85;
      }
      /* Citation avec vignette portrait (request-0938 item-007 — Fabien
         Allègre). Le footer devient une ligne : avatar rond Or à gauche,
         nom + fonction empilés à droite. Posé sur fond Bleu Paris, sans
         rouge à proximité — règle inviolable n°1 respectée. */
      .section-why blockquote .quote-author {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .section-why blockquote .quote-author__media {
        flex: 0 0 auto;
        line-height: 0;
      }
      .section-why blockquote .quote-author__portrait {
        display: block;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        object-position: 50% 28%;        /* recentre sur le visage */
        background: var(--psg-blue-premium);
        box-shadow: 0 0 0 1.5px var(--psg-gold);  /* anneau Or, cf. avatar Sakina */
      }
      .section-why blockquote .quote-author__meta {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      /* Nom — reprend le style « footer » historique (Or Bold uppercase),
         neutralise la règle générique « footer span » (blanc 13 px). */
      .section-why blockquote footer .quote-author__name {
        margin: 0;
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--psg-gold);
        opacity: 1;
      }
      /* Fonction — déjà ciblée par « footer span » (blanc 13 px) ; on
         conforte simplement l'écart vertical. */
      .section-why blockquote footer .quote-author__role {
        margin-top: 4px;
      }
      @media (max-width: 600px) {
        .section-why blockquote .quote-author__portrait { width: 48px; height: 48px; }
      }
      .section-why blockquote.is-placeholder p {
        /* Placeholder en attendant la vraie citation : style discret
           (taille réduite, pas d'italique, opacity légèrement abaissée
           pour signaler qu'il n'est pas final). line-height harmonisé. */
        opacity: 0.92;
        font-style: normal;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.55;
        letter-spacing: 0.02em;
      }

      /* Filet bicolore court & centré au-dessus de la punchline (item-007),
         pour matérialiser la signature visuelle avant le mot final. */
      .section-why .psg-bicolor-line--short.psg-bicolor-line--center {
        margin: 72px auto 24px;
      }
      .section-why__punchline {
        /* « Ici c'est Paris » — Virage Bold (700) PLEIN, style Corporate.
           Convention DA §6 révisée (item-005 request-1824) : Virage Compact
           Ultrabold = tracé du logotype PSG, illisible en bloc de titre.
           Plus aucune règle CSS du site n'applique 'Virage Compact' —
           les @font-face Compact restent pré-câblés pour usage premium futur. */
        margin: 0 0 8px;
        text-align: center;
        font-family: 'Virage', Arial, sans-serif;
        font-weight: 700;
        font-size: clamp(32px, 4vw, 48px);
        line-height: 1.1;
        letter-spacing: -0.015em;
        color: var(--white);
      }
      .section-why__punchline em {
        font-style: italic;
        color: var(--psg-gold);
      }

      /* Footer
         Architecture en 4 blocs :
           1. site-footer__grid     → 4 colonnes (à propos / tombola / projet / contact)
           2. site-footer__notice   → bandeau Or "Autorisation Préfecture"
           3. site-footer__links    → liens légaux (mentions, CGU, RGPD…)
           4. site-footer__legal    → texte légal + RGPD 12 mois + copyright */
      .site-footer {
        background: var(--psg-blue-premium);
        color: var(--white);
        padding: 64px 0 32px;
        font-family: 'Virage', Arial, sans-serif;
        font-size: 15px;     /* item-006 — adresse & liens en 15 px */
        line-height: 1.6;
      }
      .site-footer__grid {
        display: grid; gap: 40px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        margin-bottom: 40px;
      }
      .site-footer h3 {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase; letter-spacing: 0.1em;
        margin: 0 0 14px; color: var(--psg-gold);
      }
      .site-footer ul { list-style: none; padding: 0; margin: 0; }
      .site-footer li { margin-bottom: 8px; }
      .site-footer a {
        /* Liens de navigation footer — pleine opacité, underline-on-hover (item-006).
           Les liens dans .site-footer address héritent du parent à opacity 0.92
           (effective ≈ 0.92), conforme à la consigne "Adresse & liens 0.92". */
        color: var(--white);
        text-decoration: none;
        opacity: 1;
        transition: opacity .15s ease;
      }
      .site-footer a:hover,
      .site-footer a:focus-visible { opacity: 1; text-decoration: underline; }

      .site-footer__intro {
        margin: 0 0 16px;
        opacity: 0.92;
      }
      .site-footer address {
        font-style: normal;
        opacity: 0.92;
      }
      .site-footer address p { margin: 0 0 10px; }
      .site-footer address p:last-child { margin-bottom: 0; }
      .site-footer address strong {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
      }

      .footer-social {
        display: flex; gap: 10px; flex-wrap: wrap;
        margin-top: 14px;
      }
      .footer-social li { margin: 0; }
      .footer-social a {
        /* Réseaux sociaux — icônes SVG 24×24 dans un slot 40×40 tappable
           (cible minimum recommandée Apple HIG / Material). currentColor
           porte la couleur du picto ; hover Or sobre + lift -1px.
           Item-021 request-2026-05-22-0905 — remplacement des labels
           "Facebook / Instagram / X" par des SVG inline (cf. HTML). */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--white);
        opacity: 0.88;
        transition: color .25s ease, opacity .25s ease,
                    transform .25s ease, background-color .25s ease;
      }
      .footer-social a:hover,
      .footer-social a:focus-visible {
        color: var(--psg-gold);
        opacity: 1;
        transform: translateY(-1px);
        text-decoration: none;
      }
      .footer-social a svg {
        display: block;
        width: 22px;
        height: 22px;
      }

      /* Bandeau d'autorisation Préfecture — accent Or sobre */
      .site-footer__notice {
        background: rgba(206,171,93,0.10);
        border: 1px solid rgba(206,171,93,0.40);
        border-radius: 8px;
        padding: 16px 22px;
        margin: 0 0 32px;
        text-align: center;
        line-height: 1.5;
      }
      .site-footer__notice p {
        /* Texte du bandeau Préfecture — 13 px, opacity 0.9 minimum (item-006) */
        font-size: 13px;
        opacity: 0.92;
        margin: 0;
      }
      .site-footer__notice strong {
        font-family: 'Virage', sans-serif;
        font-weight: 700;
        color: var(--psg-gold);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 13px;
        opacity: 1;        /* le strong garde sa pleine couleur Or sur le bandeau */
      }
      .site-footer__notice .sep { opacity: 0.4; margin: 0 8px; }

      .site-footer__links {
        margin-bottom: 24px;
        padding-top: 24px;
        border-top: 1px solid rgba(255,255,255,0.12);
      }
      .site-footer__links ul {
        display: flex; flex-wrap: wrap; gap: 24px;
      }
      .site-footer__links a { font-size: 13px; }

      .site-footer__legal {
        /* RGPD 12 mois + copyright — 13 px, opacity 0.8 (item-006) */
        opacity: 0.8;
        font-size: 13px;
        line-height: 1.6;
      }
      .site-footer__legal p { margin: 0 0 10px; }
      .site-footer__legal p:last-child { margin-bottom: 0; }
      .site-footer__copyright {
        margin-top: 16px !important;
        opacity: 1;   /* parent .site-footer__legal=0.8 → effectif 0.8 (item-006) */
      }

      /* ============================================================
         Élément graphique signature PSG — ligne bicolore réutilisable
           Bleu Paris (#004070) + Rouge Paris (#E30613) juxtaposés 50/50.
           Composant à utiliser avec parcimonie pour rester premium.

           Variantes disponibles :
             .psg-bicolor-line             → underline H2 (4×80 px par défaut)
             ─ .psg-bicolor-line--separator  → séparateur pleine largeur 2 px
             ─ .psg-bicolor-line--thin       → finesse 1 px (décor discret)
             ─ .psg-bicolor-line--center     → centré horizontalement
             ─ .psg-bicolor-line--short      → 48 px (accent discret footer)
         ============================================================ */
      .psg-bicolor-line {
        display: block;
        height: 4px;
        width: 80px;
        background: linear-gradient(to right, var(--psg-blue) 50%, var(--psg-red) 50%);
        margin: 0 0 24px;
      }
      .psg-bicolor-line--separator {
        width: 100%;
        height: 2px;
        margin: 0;
      }
      .psg-bicolor-line--thin   { height: 1px; }
      .psg-bicolor-line--center { margin-left: auto; margin-right: auto; }
      .psg-bicolor-line--short  { width: 48px; }

      /* ============================================================
         CTA flottant mobile (item-002 request-2026-05-22-0905).
         Bandeau plein-largeur fixé au bas du viewport, visible UNIQUEMENT
         sur ≤ 767 px et UNIQUEMENT lorsque body.is-past-hero (le hero
         a quitté le viewport — toggle JS). Signature visuelle préservée
         par le filet .psg-bicolor-line (Bleu + Rouge) — l'association
         Rouge + Or reste interdite hors logo (règle inviolable n°1).
         Safe-area iOS via env(safe-area-inset-bottom). Le padding-bottom
         compensatoire sur body (mobile uniquement) garantit que le
         dernier contenu reste atteignable sans être masqué.
         Par défaut : masqué par défaut (display: none) — la règle
         @media (max-width: 767px) ci-dessous l'active sur mobile.
         ============================================================ */
      .floating-cta-bar {
        display: none;  /* desktop : aucune raison d'exister */
      }

      /* ============================================================
         Responsive mobile-first — breakpoints 375 / 768 / 1024+
         Cibles : 60–70% du trafic depuis les réseaux sociaux PSG mobile.
         ============================================================ */

      /* ───── Mobile (< 768px) — par défaut + ajustements iPhone ───── */
      @media (max-width: 767px) {
        /* Container resserré pour libérer de la largeur sur 375px */
        .container { padding: 0 20px; }

        /* Hero : padding réduit, CTAs en colonne pleine largeur */
        .section-hero { padding: 110px 0 56px; min-height: auto; }
        .hero-ctas { flex-direction: column; gap: 12px; }
        .hero-ctas .btn { width: 100%; }

        /* CTA flottant mobile — bandeau fixé bas viewport (item-002). */
        .site-footer {
          /* Étend le fond Bleu Premium du footer pour qu'il passe SOUS
             le CTA flottant — évite la bande blanche entre le bas du
             footer et le bandeau. Réserve aussi la hauteur du CTA pour
             que le dernier contenu reste atteignable. */
          padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
        }
        .floating-cta-bar {
          display: block;
          position: fixed;
          left: 0; right: 0; bottom: 0;
          z-index: 90; /* sous le header sticky (z=100), au-dessus du contenu */
          background: rgba(26, 43, 76, 0.94); /* Bleu Premium 94% */
          -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
          box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28);
          padding-bottom: env(safe-area-inset-bottom, 0px);
          transform: translateY(110%);
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transition: transform .35s cubic-bezier(.2,.7,.3,1),
                      opacity .25s ease,
                      visibility .35s linear;
        }
        body.is-past-hero .floating-cta-bar {
          transform: translateY(0);
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }
        /* Le filet bicolore (Bleu + Rouge) coiffe le bandeau. */
        .floating-cta-bar .psg-bicolor-line {
          margin: 0;
        }
        .floating-cta-bar__inner {
          padding: 12px 20px;
        }
        .floating-cta-bar__btn {
          width: 100%;
          padding: 14px 20px;        /* compact pour ne pas voler trop de viewport */
          font-size: 16px;
        }
        /* État au focus clavier — anneau Or (jamais en plein, jamais touche Rouge). */
        .floating-cta-bar__btn:focus-visible {
          outline: 2px solid var(--psg-gold);
          outline-offset: 3px;
        }
      }
      /* Repli a11y — désactive les transitions mais garde le toggle. */
      @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
        .floating-cta-bar { transition: none; }
      }

      @media (max-width: 767px) {
        /* (suite des règles mobiles d'origine ci-dessous) */

        /* Sections : padding vertical réduit */
        .section-project,
        .section-lots,
        .section-purchase,
        .section-sponsors,
        .section-why { padding: 64px 0; }

        /* Nav : hamburger remplace la liste horizontale */
        .site-nav {
          position: absolute;
          top: 100%; left: 0; right: 0;
          background: var(--psg-blue-premium);
          border-top: 1px solid rgba(255,255,255,0.12);
          max-height: 0; overflow: hidden;
          transition: max-height .2s ease;
        }
        .site-nav.is-open { max-height: 320px; }
        .site-nav ul {
          flex-direction: column;
          padding: 16px 24px;
          gap: 14px;
        }
        .site-nav a { font-size: 15px; display: block; padding: 4px 0; }
        .site-nav__toggle { display: inline-flex; }

        /* Sponsors : grille 2 colonnes sur mobile (brief item-013) */
        .sponsors-grid {
          grid-template-columns: 1fr 1fr;
          gap: 14px;
        }
        .sponsor-card { padding: 20px 14px 18px; }
        .sponsor-card__media { height: 64px; }
        .sponsor-card__wordmark { font-size: 18px; }       /* aligné sur nouveau plancher */
        .sponsor-card__wordmark span { font-size: 12px; }  /* un cran sous le 13 desktop */
        .sponsor-card__type { font-size: 13px; }           /* aligné sur le 13 desktop */
        .sponsor-card__name { font-size: 16px; }
        .sponsor-card__desc { font-size: 13px; line-height: 1.55; }

        /* Footer : éléments serrés sur mobile */
        .site-footer__links ul { gap: 14px 18px; }

        /* Ticket cards : full-width CTA et padding interne ajusté */
        .ticket-card { padding: 28px 22px 22px; }

        /* Quotes : padding gauche réduit pour le filet Or + guillemet ❝ rapproché */
        .section-why blockquote { padding-left: 44px; }
        .section-why blockquote::before {
          left: 8px;
          top: -14px;
          font-size: 72px;
        }

        /* Intro section-why : retire la marge basse héritée du desktop
           car l'image émotion arrive juste après avec sa propre marge. */
        .section-why__intro { margin-bottom: 40px; }
      }

      /* ───── Très petits écrans (≤ 374px, anciennes générations) ───── */
      @media (max-width: 374px) {
        .container { padding: 0 16px; }
        .section-hero h1 { font-size: 36px; }
        .section-hero p.lead { font-size: 20px; }   /* aligné sur plancher item-008 */
        .sponsors-grid { grid-template-columns: 1fr; }
      }

      /* ───── Tablette (≥ 768px) ───── */
      @media (min-width: 768px) {
        .site-nav__toggle { display: none; }
        .site-nav {
          position: static;
          background: transparent;
          border-top: 0;
          max-height: none;
          overflow: visible;
        }
        .site-nav ul {
          flex-direction: row;
          padding: 0;
          gap: 24px;
        }
      }

      /* ───── Desktop (≥ 1024px) — confort de lecture ───── */
      @media (min-width: 1024px) {
        .container { padding: 0 32px; }
        .section-hero { padding: 160px 0 96px; }
      }

      /* ───── Préférences utilisateur — réduction des animations ───── */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
        }
        html { scroll-behavior: auto; }
      }
    

/* ============================================================
   Section FAQ — pattern <details>/<summary> a11y natif (R23).
   Insérée entre .section-why et le footer.
   ============================================================ */
.section-faq {
  background: var(--light-bg);
  padding: 96px 0;
}
.section-faq__lead {
  max-width: 720px;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.65;
  margin: 0 0 40px;
  opacity: 0.92;
}
.faq-list {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--white);
  border: 1px solid rgba(0,64,112,0.14);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
  border-color: rgba(0,64,112,0.32);
  box-shadow: 0 12px 32px -20px rgba(0,64,112,0.20);
}
.faq-item > summary {
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.35;
  color: var(--psg-blue);
  list-style: none;
  position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '';
  position: absolute;
  right: 24px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-right: 2px solid var(--psg-blue);
  border-bottom: 2px solid var(--psg-blue);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -4px;
}
.faq-item > summary:hover { color: var(--psg-red); }
.faq-item > summary:hover::after {
  border-right-color: var(--psg-red);
  border-bottom-color: var(--psg-red);
}
.faq-item__answer {
  padding: 0 24px 24px;
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--psg-blue);
  opacity: 0.9;
  max-width: 65ch;
}
.faq-item__answer p:first-child { margin-top: 0; }
.faq-item__answer p:last-child  { margin-bottom: 0; }
.faq-item__answer a { color: var(--psg-blue); text-decoration: underline; text-underline-offset: 2px; }
.faq-item__answer a:hover { color: var(--psg-red); }

@media (max-width: 640px) {
  .section-faq { padding: 64px 0; }
  .faq-item > summary { padding: 16px 48px 16px 18px; font-size: 15px; }
  .faq-item > summary::after { right: 18px; }
  .faq-item__answer { padding: 0 18px 20px; font-size: 15px; }
}


/* Compteur hero <gotb-live-counter> retiré (item-012 request-2026-05-22-0905).
   Les règles font-variant-numeric / hero-counter__* ont été supprimées. */


/* ============================================================
   Footer canonique — mention « Powered by GoTombola » (A.5).
   Discret : 13 px, opacity 0.7, ligne séparée sous le copyright. */
.site-footer__powered {
  margin-top: 8px !important;
  font-size: 13px;
  opacity: 0.7;
}
.site-footer__powered a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__powered a:hover { opacity: 1; color: var(--psg-gold); }


/* ============================================================
   Premium FX — Hover micro-interactions (item-009 request-2026-05-22-0905).

   · Boutons .btn / .btn--primary : shimmer 1.2 s en sur-impression
     ::before (gradient blanc translucide diagonal), micro-scale 1.02,
     ombre Bleu Paris pour les CTA Rouge / ombre Or pour les CTA Bleu
     (règle inviolable n°1 = jamais Or et Rouge en contact ou en
     proximité visuelle non logo).
   · Hero CTA : pulse continu blanc translucide (très subtil, 2.6 s)
     pour signaler l'élément vedette de la page. Stoppe au hover
     pour laisser la place au shimmer.
   · .lot-card / .ticket-card / .sponsor-card : élévation, lueur Or
     radiale ::before, filet bicolor PSG bas ::after qui s'étend du
     gauche au droit (uniquement sur cards SANS gold border existante
     pour ne pas associer Rouge+Or). Parallax léger (scale 1.04) sur
     l'image au hover des lot-cards et sponsor-cards.
   · Toutes les animations continues (pulse, parallax) sont protégées
     par html.fx-motion (classe positive ajoutée par le bootstrap
     inline quand prefers-reduced-motion = no-preference, pointer = fine,
     viewport > 767 px). Sur fx-static (mobile + reduce-motion), seules
     les transitions courtes au hover restent ; tout le reste est figé.
   ============================================================ */

/* ── Boutons ────────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease,
              background-color .25s ease, border-color .25s ease;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 65%);
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.btn > *,
.btn > svg { position: relative; z-index: 1; }
html.fx-motion .btn:hover::before,
html.fx-motion .btn:focus-visible::before {
  animation: psg-btn-shimmer 1.2s ease both;
}
@keyframes psg-btn-shimmer {
  0%   { transform: translateX(-110%); opacity: 0.5; }
  50%  { opacity: 0.8; }
  100% { transform: translateX(110%);  opacity: 0; }
}
html.fx-motion .btn:hover,
html.fx-motion .btn:focus-visible {
  transform: translateY(-1px) scale(1.02);
}
/* Ombre Bleu Paris au hover sur fond Rouge (.btn--primary par défaut)
   — JAMAIS d'ombre Or sur du Rouge (règle n°1). */
.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: 0 18px 32px -14px rgba(0, 64, 112, 0.55);
}
/* Ombre Or sur la variante Bleu du CTA primaire (featured ticket-card) :
   ici aucun Rouge à proximité, Or est l'accent premium attendu. */
.ticket-card--featured .btn--primary:hover,
.ticket-card--featured .btn--primary:focus-visible {
  box-shadow: 0 18px 32px -14px rgba(206, 171, 93, 0.55);
}
/* Ombre Blanc translucide au hover sur .btn--secondary (transparent +
   bord blanc — apparaît sur fond Bleu Paris du hero). */
.btn--secondary:hover,
.btn--secondary:focus-visible {
  box-shadow: 0 18px 32px -14px rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Hero CTA pulse continu très subtil ─────────────────────── */
@keyframes psg-hero-cta-pulse {
  0%, 100% {
    box-shadow: 0 14px 28px -14px rgba(0, 64, 112, 0.50),
                0 0 0 0 rgba(255, 255, 255, 0.30);
  }
  50% {
    box-shadow: 0 16px 32px -14px rgba(0, 64, 112, 0.60),
                0 0 0 14px rgba(255, 255, 255, 0);
  }
}
html.fx-motion .hero-ctas .btn--primary {
  animation: psg-hero-cta-pulse 2.6s ease-in-out infinite;
}
/* Hover désactive la pulse pour laisser place au shimmer. */
html.fx-motion .hero-ctas .btn--primary:hover,
html.fx-motion .hero-ctas .btn--primary:focus-visible {
  animation: none;
}

/* ── Lot cards ──────────────────────────────────────────────── */
.lot-card {
  position: relative;
  isolation: isolate;
}
.lot-card::before {
  /* Lueur Or radiale au hover — appliquée à TOUTES les lot-cards
     (Bleu Paris en fond, pas de Rouge sur ces cards, donc l'Or est
     l'accent premium logique). */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 0%,
              rgba(206, 171, 93, 0.18), transparent 62%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.lot-card > *,
.lot-card > picture,
.lot-card > img { position: relative; z-index: 1; }
.lot-card:hover::before,
.lot-card:focus-visible::before { opacity: 1; }

.lot-card:hover,
.lot-card:focus-visible {
  /* Élévation + ombre Or pour les cards sans bordure Or par défaut
     ne se cumulant à aucun Rouge sur la card → safe règle n°1. */
  box-shadow: 0 22px 48px -22px rgba(206, 171, 93, 0.45);
}

/* Filet bicolor (Bleu + Rouge) en bas — UNIQUEMENT pour les cards
   ordinaires (pas de bordure Or existante à proximité). Sur
   .lot-card--exception (bordure Or) on n'introduit pas de Rouge à
   moins de 10 px de l'Or → règle inviolable n°1. */
.lot-card:not(.lot-card--exception)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(to right,
              var(--psg-blue) 50%, var(--psg-red) 50%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
  z-index: 2;
  pointer-events: none;
}
.lot-card:not(.lot-card--exception):hover::after,
.lot-card:not(.lot-card--exception):focus-visible::after {
  transform: scaleX(1);
}

/* Parallax léger sur l'image au hover — uniquement fx-motion. */
html.fx-motion .lot-card__media img,
html.fx-motion .lot-card__media picture,
html.fx-motion .lot-card__media .lot-card__placeholder {
  transition: transform .5s ease;
}
html.fx-motion .lot-card:hover .lot-card__media img,
html.fx-motion .lot-card:hover .lot-card__media picture,
html.fx-motion .lot-card:hover .lot-card__media .lot-card__placeholder {
  transform: scale(1.045);
}

/* ── Ticket cards ───────────────────────────────────────────── */
.ticket-card {
  position: relative;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease,
              border-color .25s ease;
}
/* Lueur Or radiale subtile — UNIQUEMENT sur la variante featured
   (bordure haute Or + badge Or, CTA bleu, aucun Rouge dans la card).
   Sur la variante ordinaire (CTA Rouge), on évite d'ajouter de l'Or
   ambient pour respecter la règle n°1 — on se contente d'une lueur
   Bleu Paris (var(--psg-blue) à 10 %). */
.ticket-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%,
              rgba(0, 64, 112, 0.10), transparent 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.ticket-card--featured::before {
  background: radial-gradient(circle at 50% 0%,
              rgba(206, 171, 93, 0.16), transparent 65%);
}
.ticket-card > * { position: relative; z-index: 1; }
.ticket-card:hover::before,
.ticket-card:focus-visible::before { opacity: 1; }
.ticket-card:hover,
.ticket-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -22px rgba(0, 64, 112, 0.32);
}
.ticket-card--featured:hover,
.ticket-card--featured:focus-visible {
  box-shadow: 0 26px 52px -22px rgba(206, 171, 93, 0.42);
}
/* Filet bicolor (Bleu + Rouge) en bas — UNIQUEMENT sur la variante
   ordinaire (pas de bordure Or sur la card). */
.ticket-card:not(.ticket-card--featured)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(to right,
              var(--psg-blue) 50%, var(--psg-red) 50%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}
.ticket-card:not(.ticket-card--featured):hover::after,
.ticket-card:not(.ticket-card--featured):focus-visible::after {
  transform: scaleX(1);
}

/* ── Sponsor cards ──────────────────────────────────────────── */
.sponsor-card {
  position: relative;
  isolation: isolate;
}
.sponsor-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 30%,
              rgba(206, 171, 93, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.sponsor-card > * { position: relative; z-index: 1; }
.sponsor-card:hover::before,
.sponsor-card:focus-visible::before { opacity: 1; }
.sponsor-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(to right,
              var(--psg-blue) 50%, var(--psg-red) 50%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}
.sponsor-card:hover::after,
.sponsor-card:focus-visible::after { transform: scaleX(1); }

/* Parallax léger sur le wordmark / logo au hover (fx-motion only). */
html.fx-motion .sponsor-card__media,
html.fx-motion .sponsor-card__wordmark,
html.fx-motion .sponsor-card__media img,
html.fx-motion .sponsor-card__media svg {
  transition: transform .35s ease;
}
html.fx-motion .sponsor-card:hover .sponsor-card__media,
html.fx-motion .sponsor-card:hover .sponsor-card__wordmark {
  transform: translateY(-2px) scale(1.03);
}

/* ── Repli accessibilité ───────────────────────────────────────
   fx-static est déjà appliqué par le bootstrap inline si l'une de :
   prefers-reduced-motion / pointer:coarse / max-width: 767 px.
   En complément, on neutralise explicitement les pulses et parallax
   sous @media (prefers-reduced-motion: reduce) au cas où la classe
   fx-static n'aurait pas été appliquée (JS indisponible ex. lecteur
   d'écran headless). */
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn--primary { animation: none !important; }
  .btn:hover::before,
  .btn:focus-visible::before { animation: none !important; }
  .btn:hover,
  .btn:focus-visible { transform: none !important; }
  .lot-card__media img,
  .lot-card__media picture,
  .lot-card__media .lot-card__placeholder,
  .sponsor-card__media,
  .sponsor-card__wordmark { transition: none !important; transform: none !important; }
}


/* ============================================================
   Premium FX++ — Hover ultra-stylé .lot-card (item-010
   request-2026-05-22-0905).

   · Tilt 3D suivant la position de la souris : variables CSS
     --lot-tilt-x / --lot-tilt-y posées en JS au mousemove, lues
     ici dans la matrice transform. Plage ±5.5° (volontairement
     léger pour rester premium et non gimmicky).
   · Halo "bicolor PSG" via box-shadow multiple : aile gauche
     Bleu Paris, aile droite Or Paris, ombre de fond noire pour
     l'élévation. Bleu + Or = combinaison brand-safe (règle
     inviolable n°1 ne bloque que Rouge + Or hors logo).
   · Reflet diagonal traversant la card en 1.4 s au hover
     (supersedes l'effet ::before "Or radial glow" d'item-009).
   · Image zoomée 1.05 (légèrement plus marqué que le 1.045
     d'item-009).
   · Badge "Lot d'exception" scale 1.06 + halo Or au hover
     (uniquement sur .lot-card--exception, pas sur --pending).
   · Cubic-bezier(.2, .6, .2, 1) sur les transitions de retour
     ("ease-out smooth"), durée 450 ms.
   · Désactivé hors html.fx-motion (mobile / reduce-motion).
   ============================================================ */

html.fx-motion .lot-card {
  /* Variables initialisées à 0 — JS pose les valeurs réelles
     au mousemove (cf. IIFE "Tilt 3D lot-card"). */
  --lot-tilt-x: 0deg;
  --lot-tilt-y: 0deg;
  will-change: transform;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1),
              box-shadow .45s cubic-bezier(.2, .6, .2, 1),
              border-color .25s ease;
}
html.fx-motion .lot-card:hover {
  transform:
    perspective(900px)
    rotateX(var(--lot-tilt-x))
    rotateY(var(--lot-tilt-y))
    translateY(-4px) scale(1.005);
  /* Pendant le hover, transition courte pour que le tilt
     "follow mouse" reste réactif (~110 ms). */
  transition: transform .12s ease-out,
              box-shadow .25s ease;
  /* Halo bicolor Bleu/Or autour de la card (jamais avec Rouge
     à proximité — règle inviolable n°1 respectée). */
  box-shadow:
    -10px  0 28px -10px rgba(  0,  64, 112, 0.55),  /* aile Bleu Paris à gauche */
     10px  0 28px -10px rgba(206, 171,  93, 0.55),  /* aile Or Paris à droite */
      0   28px 56px -22px rgba(  0,   0,   0, 0.42); /* base depth */
}

/* ─── Reflet diagonal sur ::before — supersedes l'effet "radial
       Or glow" posé en item-009 grâce à la cascade. ─── */
html.fx-motion .lot-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0)    32%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0)    68%
  );
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
html.fx-motion .lot-card:hover::before,
html.fx-motion .lot-card:focus-visible::before {
  animation: psg-lot-sweep 1.4s cubic-bezier(.2, .6, .2, 1) both;
}
@keyframes psg-lot-sweep {
  0%   { transform: translateX(-110%); opacity: 0; }
  18%  { opacity: 0.55; }
  100% { transform: translateX(110%);  opacity: 0; }
}

/* ─── Zoom image — overrides item-009 (1.045 → 1.05). ─── */
html.fx-motion .lot-card:hover .lot-card__media img,
html.fx-motion .lot-card:hover .lot-card__media picture,
html.fx-motion .lot-card:hover .lot-card__media .lot-card__placeholder {
  transform: scale(1.05);
}

/* ─── Badge "Lot d'exception" mis en avant ─── */
.lot-card__badge {
  transition: transform .45s cubic-bezier(.2, .6, .2, 1),
              box-shadow .45s cubic-bezier(.2, .6, .2, 1);
}
html.fx-motion .lot-card--exception:hover .lot-card__badge:not(.lot-card__badge--pending),
html.fx-motion .lot-card--exception:focus-visible .lot-card__badge:not(.lot-card__badge--pending) {
  transform: scale(1.06);
  /* Halo blanc-Or autour du badge (badge sur fond Or, dans une
     card Bleu Paris — aucun Rouge à proximité). */
  box-shadow:
    0 0 0 2px rgba(255, 247, 219, 0.48),
    0 6px 18px -4px rgba(206, 171, 93, 0.60);
}

/* ─── Repli a11y — neutralise tilt + sweep + zoom au cas où
       fx-static n'aurait pas été appliqué (JS off, headless…). ─── */
@media (prefers-reduced-motion: reduce) {
  .lot-card,
  .lot-card:hover {
    transform: none !important;
    transition: box-shadow .25s ease, border-color .25s ease !important;
  }
  .lot-card::before { animation: none !important; opacity: 0 !important; }
  .lot-card__media img,
  .lot-card__media picture,
  .lot-card__media .lot-card__placeholder { transform: none !important; }
  .lot-card__badge { transform: none !important; box-shadow: none !important; }
}

/* ============================================================ */
/*  FX PREMIUM +20-30 % — request-2026-06-26-1358 item-006       */
/*                                                               */
/*  Couche de finition haut de gamme posée PAR-DESSUS le système */
/*  FX existant (request-0905). Objectif : élever la qualité     */
/*  perçue de ~20-30 % via glow / halo / pulse sur les CTA et    */
/*  éléments interactifs, en complément de la trainée fluide du  */
/*  curseur (cursor-trail.gotb.js, item-006).                    */
/*                                                               */
/*  Contraintes respectées :                                     */
/*   · Palette inchangée — Or #CEAB5D, Bleu Premium #1A2B4C,     */
/*     Bleu Paris #004070, Rouge #E30613, Blanc. Rien de neuf.   */
/*   · Polices inchangées (Virage).                              */
/*   · Règle inviolable n°1 (jamais d'Or au contact d'un Rouge) :*/
/*       – CTA Rouge (.btn--primary par défaut) → glow BLANC ;   */
/*       – CTA Bleu (featured) & contextes sans Rouge → glow Or. */
/*   · Animations CONTINUES gated `html.fx-motion` (off en       */
/*     reduced-motion / mobile / pointer coarse). Filet de       */
/*     sécurité @media reduced-motion en fin de bloc.            */
/* ============================================================ */

/* ── Glow doux au survol de TOUT bouton ─────────────────────── */
/* Lueur blanche translucide : neutre, valable sur Rouge ET Bleu */
/* (aucun Or introduit au contact d'un Rouge → règle n°1 OK).    */
html.fx-motion .btn:hover,
html.fx-motion .btn:focus-visible {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.22));
}

/* ── CTA flottant mobile : anneau de pulse blanc (comme hero) ── */
@keyframes psg-cta-halo-white {
  0%, 100% { box-shadow: 0 14px 28px -14px rgba(0, 64, 112, .50),
                         0 0 0 0  rgba(255, 255, 255, .34); }
  50%      { box-shadow: 0 16px 32px -14px rgba(0, 64, 112, .60),
                         0 0 0 12px rgba(255, 255, 255, 0); }
}
html.fx-motion .floating-cta-bar .btn--primary {
  animation: psg-cta-halo-white 2.8s ease-in-out infinite;
}
html.fx-motion .floating-cta-bar .btn--primary:hover,
html.fx-motion .floating-cta-bar .btn--primary:focus-visible {
  animation: none;
}

/* ── CTA Bleu de la card recommandée : respiration Or premium ── */
/* Contexte Or (bordure + badge Or), aucun Rouge dans la card →  */
/* l'Or est l'accent premium logique (règle n°1 respectée).      */
@keyframes psg-cta-breathe-gold {
  0%, 100% { box-shadow: 0 14px 28px -16px rgba(206, 171, 93, .45),
                         0 0 0 0  rgba(206, 171, 93, .30); }
  50%      { box-shadow: 0 18px 34px -16px rgba(206, 171, 93, .60),
                         0 0 0 10px rgba(206, 171, 93, 0); }
}
html.fx-motion .ticket-card--featured .btn--primary {
  animation: psg-cta-breathe-gold 3.2s ease-in-out infinite;
}
html.fx-motion .ticket-card--featured .btn--primary:hover,
html.fx-motion .ticket-card--featured .btn--primary:focus-visible {
  animation: none;
}

/* ── Aura Or continue très subtile sur la card recommandée ───── */
/* Conserve la profondeur Bleu de base + ajoute une respiration  */
/* Or douce autour de la card (point focal du choix de pack).    */
@keyframes psg-card-aura-gold {
  0%, 100% { box-shadow: 0 16px 40px -16px rgba(0, 64, 112, .25),
                         0 0 0 0 rgba(206, 171, 93, 0); }
  50%      { box-shadow: 0 16px 40px -16px rgba(0, 64, 112, .30),
                         0 0 22px 2px rgba(206, 171, 93, .30); }
}
html.fx-motion .ticket-card--featured {
  animation: psg-card-aura-gold 4.6s ease-in-out infinite;
}
html.fx-motion .ticket-card--featured:hover,
html.fx-motion .ticket-card--featured:focus-visible {
  animation: none; /* le hover (box-shadow Or renforcé) reprend la main */
}

/* ── Icônes sociales footer : glow Or au survol ─────────────── */
/* Pictos blancs sur fond Bleu Premium → Or = accent premium safe */
/* (aucun Rouge à proximité).                                     */
html.fx-motion .footer-social a:hover,
html.fx-motion .footer-social a:focus-visible {
  filter: drop-shadow(0 0 8px rgba(206, 171, 93, 0.55));
}

/* ── Filet de sécurité reduced-motion (JS off, headless…) ───── */
@media (prefers-reduced-motion: reduce) {
  .floating-cta-bar .btn--primary,
  .ticket-card--featured .btn--primary,
  .ticket-card--featured {
    animation: none !important;
  }
  .btn:hover, .btn:focus-visible,
  .footer-social a:hover, .footer-social a:focus-visible {
    filter: none !important;
  }
}

/* ============================================================
   Scroll-reveal des titres & sous-titres de section
   (item-002 request-2026-06-26-1539).

   Le client ne percevait « aucun effet d'apparition » des titres /
   sous-titres. On ajoute une révélation au scroll : chaque H2 de
   section porte .fx-reveal, chaque lead porte .fx-reveal .fx-reveal--d1
   (léger décalage titre → sous-titre = effet de cascade). Une IIFE
   IntersectionObserver (cf. index.html) ajoute .is-revealed dès que
   l'élément entre dans le viewport.

   État d'entrée (opacity 0 + translateY) gardé EXCLUSIVEMENT par
   html.fx-motion — classe positive posée par le bootstrap inline
   uniquement quand prefers-reduced-motion = no-preference, pointer
   fin et viewport > 767 px. Conséquences (cohérence système FX) :
     · JS désactivé → fx-motion jamais posé → contenu visible intact.
     · fx-static (mobile / coarse / reduced) → règle non appliquée.
     · prefers-reduced-motion → neutralisation explicite ci-dessous.
   Aucun titre n'est donc jamais masqué de façon permanente (a11y).
   ============================================================ */
html.fx-motion .fx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
              transform .7s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
html.fx-motion .fx-reveal.is-revealed {
  opacity: 1;
  transform: none;
}
/* Décalage du sous-titre (lead) par rapport au titre — stagger doux. */
html.fx-motion .fx-reveal--d1 { transition-delay: .12s; }

/* Filet de sécurité reduced-motion : même si fx-motion était présent,
   on force l'état révélé sans transition (pas de mouvement). */
@media (prefers-reduced-motion: reduce) {
  html.fx-motion .fx-reveal,
  html.fx-motion .fx-reveal--d1 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Compte à rebours pré-lancement (request-2026-06-29-1435 item-002).
   Vue plein écran affichée tant que la tombola n'est pas ouverte,
   sur le modèle de tombola-lataniere.org mais aux couleurs PSG
   (palette stricte, Virage, filet bicolore Bleu/Rouge).
   Pilotée par la classe html.cd-off :
     · html SANS .cd-off → .cd-screen visible + scroll du site bloqué
     · html.cd-off       → .cd-screen masquée, contenu révélé
   La classe est posée par le bootstrap inline (?__=1 ou
   Date.now() >= data-launch, cf. <head>) puis le timer inline la
   bascule automatiquement à l'échéance précise, sans rechargement.
   Fallback no-JS : <noscript> dans la page révèle le site.
   ============================================================ */
.cd-screen {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--psg-blue-premium);
  color: var(--white);
  text-align: center;
  padding: 48px 20px;
}
html.cd-off .cd-screen { display: none; }
/* Tant que le compte à rebours est actif, le site sous-jacent ne
   doit pas être scrollable derrière l'overlay. */
html:not(.cd-off) body { overflow: hidden; }
.cd-screen__bg { position: absolute; inset: 0; z-index: 0; display: block; }
.cd-screen__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  display: block;
}
.cd-screen__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 64, 112, 0.78), rgba(26, 43, 76, 0.93));
}
.cd-screen__inner { position: relative; z-index: 2; max-width: 760px; width: 100%; }
.cd-screen__logo { width: 200px; max-width: 70%; height: auto; margin: 0 auto 28px; }
.cd-screen .psg-bicolor-line { margin-bottom: 24px; }
.cd-screen__overline {
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 14px;
  color: var(--psg-gold); margin: 0 0 12px;
}
.cd-screen__title {
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 700; font-size: clamp(30px, 6vw, 56px);
  line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 20px;
}
.cd-screen__lead {
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 600; font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5; max-width: 52ch; margin: 0 auto 40px;
  color: rgba(255, 255, 255, 0.92);
}
.cd-clock {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(8px, 2.5vw, 24px); margin: 0 0 28px;
}
.cd-unit {
  display: flex; flex-direction: column; align-items: center;
  min-width: clamp(64px, 16vw, 108px);
}
.cd-unit__value {
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 700; font-size: clamp(40px, 9vw, 76px);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(206, 171, 93, 0.5);
  padding: 0.18em 0.1em;
  box-sizing: border-box; width: 1.8em; text-align: center;
  white-space: nowrap;
}
.cd-unit__label {
  margin-top: 10px;
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 12px;
  color: var(--psg-gold);
}
.cd-unit__sep {
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 700; font-size: clamp(36px, 7vw, 64px);
  line-height: 1; color: rgba(255, 255, 255, 0.4);
  align-self: flex-start; padding-top: 0.12em;
}
.cd-screen__date {
  font-family: 'Virage', Arial, sans-serif;
  font-weight: 600; font-size: 15px;
  color: rgba(255, 255, 255, 0.86); margin: 0;
}
.cd-screen__date time { color: var(--psg-gold); font-weight: 700; }
@media (max-width: 480px) {
  .cd-unit__sep { display: none; }
  .cd-clock { gap: 10px; flex-wrap: wrap; }
  .cd-unit { min-width: 38%; }
}


/* ───────────────────────────────────────────────────────────────
   Rotation auto des vues de lot — item-007 request-2026-06-29-1435.
   Cards Ballon (#4) + sacs Dior (#7, #8) portent 3 <picture> empilées
   (absolu, déjà posé par .lot-card__media) ; crossfade opacité piloté
   par .is-active. La 1re vue reçoit .is-active en dur dans le markup →
   fallback no-JS / prefers-reduced-motion = 1re vue visible (les autres
   restent masquées, jamais d'empilement opaque). Le JS de rotation
   respecte lui aussi prefers-reduced-motion (cf. <script> en bas).
   ─────────────────────────────────────────────────────────────── */
.lot-card__media[data-lot-rotate] > picture { opacity: 0; }
.lot-card__media[data-lot-rotate] > picture.is-active { opacity: 1; }
html.fx-motion .lot-card__media[data-lot-rotate] > picture {
  transition: opacity .9s ease, transform .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .lot-card__media[data-lot-rotate] > picture { transition: none !important; }
}