/* ============================================================
   SWING DIGITAL - STYLES
   Mobile-first | WCAG 2.2 AA | Responsive
   ============================================================ */

/* ============================================================
   1. FONTS (@font-face)
   ============================================================ */

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   2. CSS VARIABLES
   ============================================================ */

:root {
    --color-primary: #000;
    --color-secondary: #fff;
    --color-accent: #ff6b6b;
    --color-text: #000;

    /* Swing Digital brand colors */
    --color-brand: #E8494B;           /* 3.83:1 — decoratif ou large text only */
    --color-brand-light: #F49C9E;
    --color-brand-pale: #FFB3A7;
    --color-brand-alt: #CE3B3D;
    --color-brand-btn: #CE3B3D;
    --color-white: #ffffff;
    --color-brand-gold: #E8C84A;      /* 1.64:1 — decoratif uniquement */

    /* === COULEURS RGAA CONFORMES === */
    /* Texte sur fond blanc (ratio >= 4.5:1) */
    --color-text-red:     #CE3B3D;    /* 4.86:1 */
    --color-text-gold:    #B5364E;    /* 5.79:1 */
    /* Fond portant du texte blanc (ratio >= 4.5:1) */
    --color-bg-red:       #BE2F31;    /* 5.77:1 */


    /* --- Couleurs extraites (refactoring) --- */
    --color-black: #000;
    --color-gray-dark: #333;
    --color-gray-medium: #555;
    --color-gray-light: #767676;
    --color-gray-lightest: #f0f0f0;
    --color-bg-navy: #1a2744;
    --color-title-blue-on-navy: #6F86FF; /* 4.6:1 sur --color-bg-navy, grand titre */
    --color-title-red-on-navy: #FF5A5F;  /* 4.9:1 sur --color-bg-navy, grand titre */
    --color-brand-pink: #E84878;
    --color-brand-pink-gradient: #E84A7E;
    --color-brand-coral: #FF6B6B;
    --color-brand-peach: #FF9966;
    --color-background-pink: #FF427D; /* décoratif uniquement, pas pour texte blanc normal */
    --color-background-pink-readable: #C9365D; /* 5.04:1 sur blanc */
    --gradient-background-pink: linear-gradient(90deg, #C84C59 0%, #C74361 52%, #B9365D 100%);
    --gradient-background-pink-readable: var(--gradient-background-pink);
    --color-brand-red-btn: #C23537;
    --color-brand-red-dark: #c0392b;
    --color-brand-rose: #B5364E;
    --color-brand-rose-light: #F0A0A0;
    --color-brand-rose-medium: #E87070;
    --color-indigo: #3B3F72;
    --color-indigo-light: #6B6FA0;
    --color-indigo-dark: #4A4E82;
    --color-violet: #7B4FBF;
    --color-teal: #1a7387;          /* WCAG AA : 5.46:1 sur blanc */
    --color-brown: #8B5E3C;
    --color-text-gold-dark: #5C4800;
    --color-text-gold-darker: #5C4200;
    --color-gold-gradient-start: #D4A843;
    --color-gold-gradient-end: #C49A3A;
    --color-bg-gold-light: #EBEBEB;
    --color-red-mid: #D04848;
    --shadow-overlay-light: rgba(0, 0, 0, 0.45);
    --shadow-text: 0 1px 4px rgba(0, 0, 0, 0.7);
    --shadow-overlay-medium: rgba(0, 0, 0, 0.5);
    --shadow-overlay-heavy: rgba(0, 0, 0, 0.7);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-drop: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-drop-heavy: 0 4px 20px rgba(0, 0, 0, 0.3);
    --border-white-subtle: rgba(255, 255, 255, 0.3);

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #B93539 0%, var(--color-brand-alt) 100%); /* WCAG AA : 5.78:1 → 4.86:1 */
    --gradient-hero: linear-gradient(135deg, var(--color-bg-red) 0%, var(--color-red-mid) 50%, var(--color-bg-red) 100%);

    /* Edge offset for absolute-positioned elements (safe-area aware) */
    --edge-offset: 20px;
    --edge-top: calc(var(--edge-offset) + var(--safe-top));
    --edge-bottom: calc(var(--edge-offset) + var(--safe-bottom));
    --edge-left: calc(var(--edge-offset) + var(--safe-left));
    --edge-right: calc(var(--edge-offset) + var(--safe-right));

    /* Section height : compense le header fixe, dvh pour mobile */
    --section-height: calc(100vh - var(--header-height));

    /* Hauteur du fil d'Ariane sticky, qui reste visible sous le header.
       Mesure du rendu : 41,9 px a 1024, 42,6 px a 1280, 43,1 px a 1440,
       43,5 px a 1920. Valeur en rem pour suivre la taille de police. */
    --breadcrumb-height: 2.875rem;

    /* Safe area insets pour iPhone notch/Dynamic Island/barre gestuelle */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Largeur max desktop pour eviter l'etirement sur grands ecrans */
    --page-max-width: 1440px;

    --font-primary: 'Satoshi', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --space-2xs: 0.3rem;
    --space-xs: 0.5rem;
    --space-sm-tight: 0.8rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;


    --transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;

    /* Responsive slide spacing */
    --slide-pad-x: 2rem;
    --slide-pad-y: 2rem;
    --pink-panel-pad-x: clamp(2rem, 5vw, 4rem);
    --pink-panel-inner-pad-x: clamp(1.5rem, 4vw, 2.5rem);
    --pink-panel-inner-pad-y: clamp(1.25rem, 3vw, 2rem);

    /* === ECHELLE TYPOGRAPHIQUE (couche 1 : tailles) === */
    --size-2xs: 0.8125rem;                            /* 13px — crédits */
    --size-xs:  clamp(0.875rem, 0.86rem + 0.14vw, 1rem);       /* 14-16px — captions */
    --size-sm:  clamp(1rem, 0.9rem + 0.45vw, 1.1875rem);       /* 16-19px — corps */
    --size-md:  clamp(1.125rem, 1rem + 0.8vw, 1.5rem);         /* 18-24px — sous-titres */
    --size-lg:  clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem);     /* 22-34px — titres compacts */
    --size-xl:  clamp(1.55rem, 1.15rem + 2vw, 2.7rem);         /* 25-43px — titres standards */
    --size-2xl: clamp(2rem, 1.35rem + 3vw, 3.75rem);           /* 32-60px — titres prominents */
    --size-3xl: clamp(2.4rem, 1.3rem + 5.5vw, 5rem);           /* 38-80px — hero */
    --size-4xl: clamp(4rem, 10vw, 8rem);              /* 64-128px — numeros geants */

    /* === RYTHME EDITORIAL === */
    --line-display: 1.04;
    --line-title: 1.16;
    --line-reading: 1.62;
    --line-body: 1.56;
    --line-compact: 1.34;
    --line-meta: 1.48;
    --measure-reading: 64ch;
    --measure-narrow: 48ch;
    --measure-wide: 72ch;

    /* === ROLES SEMANTIQUES (couche 2 : aliases) === */
    --fs-hero:     var(--size-3xl);
    --fs-title-xl: var(--size-2xl);
    --fs-title:    var(--size-xl);
    --fs-subtitle: var(--size-md);
    --fs-body:     var(--size-sm);
    --fs-caption:  var(--size-xs);
    --fs-credit:   var(--size-2xs);

    /* === RETROCOMPATIBILITE (anciennes variables) === */
    --fs-slide-subtitle: var(--fs-subtitle);
    --fs-slide-body:     var(--fs-body);
    --fs-slide-meta:     var(--fs-caption);
    --fs-slide-small:    var(--fs-caption);

    /* Responsive grid gaps */
    --grid-gap: 1rem;
    --grid-gap-sm: 0.5rem;

    /* Header fixe */
    --header-height: 60px;
}

@supports (height: 100dvh) {
    :root {
        --section-height: calc(100dvh - var(--header-height));
    }
}

/* ============================================================
   2b. RESPONSIVE VARIABLE OVERRIDES
   ============================================================ */

@media (min-width: 1441px) {
    :root {
        --slide-pad-x: 3rem;
        --slide-pad-y: 2.5rem;
        --grid-gap: 1.2rem;
        --space-sm: 1.25rem;
        --space-md: 2rem;
        --space-lg: 2.5rem;
        --space-xl: 4rem;
    }
}

@media (max-width: 1024px) {
    :root {
        --slide-pad-x: 1.5rem;
        --slide-pad-y: 1.5rem;
        --grid-gap: 0.8rem;
        --space-md: 1.25rem;
        --space-lg: 1.75rem;
        --space-xl: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --slide-pad-x: 1.2rem;
        --slide-pad-y: 1.2rem;
        --grid-gap: 0.6rem;
        --grid-gap-sm: 0.4rem;
        --space-xs: 0.4rem;
        --space-sm: 0.8rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
    }
}

@media (max-width: 480px) {
    :root {
        --slide-pad-x: 1rem;
        --slide-pad-y: 1rem;
        --grid-gap: 0.5rem;
        --grid-gap-sm: 0.3rem;
        --space-xs: 0.3rem;
        --space-sm: 0.6rem;
        --space-md: 0.8rem;
        --space-lg: 1.2rem;
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
    }
}

/* ============================================================
   3. RESET & BASE STYLES
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

body {
    overscroll-behavior-y: none;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* iOS : supprime le delay 300ms au tap et le flash bleu */
a, button, [role="button"], input, select, textarea {
    font-family: var(--font-primary);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background-color: var(--color-brand);
    color: var(--color-white);
}

body {
    font-family: var(--font-primary);
    font-size: 112.5%; /* 18px = 112.5% de 16px base navigateur */
    line-height: var(--line-reading);
    letter-spacing: 0.005em;
    color: var(--color-text);
    background-color: var(--color-background-pink-readable);
    hanging-punctuation: first last;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 900;
    line-height: var(--line-title);
    margin-bottom: var(--space-md);
    letter-spacing: 0;
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-title-xl);
}

h2 {
    font-size: var(--fs-title);
}

h3 {
    font-size: var(--fs-title);
}

p {
    margin-bottom: var(--space-sm-tight);
    line-height: var(--line-reading);
    word-spacing: 0.02em;
    text-wrap: pretty;
    max-width: var(--measure-reading);
}

a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: var(--transition);
}

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

a:focus-visible {
    outline: 2px solid var(--color-bg-red);
    outline-offset: 2px;
}

/* Lisibilite du texte clair sur fond sombre */
[style*="color: white"],
[class*="__text"],
[class*="__paragraph"],
[class*="__intro"],
[class*="__section-text"],
[class*="__description"],
[class*="__body"] {
    max-width: min(var(--measure-reading), 100%);
}

/* Listes : espacement inter-items */
li {
    margin-bottom: 0.3em;
}

ul, ol {
    padding-left: 1.5em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   4. LAYOUT CONTAINERS
   ============================================================ */

#main-content {
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
}

#main-content > section[id] {
    scroll-margin-top: calc(var(--header-height) + 3rem + var(--safe-top));
}

.footer__container {
    max-width: var(--page-max-width);
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   8b. SITE HEADER — Navigation persistante
   ============================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: var(--header-height);
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    z-index: 1000;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__inner {
    width: 100%;
    max-width: var(--page-max-width);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--slide-pad-x);
    height: 100%;
}

#site-navigation {
    margin-left: auto;
}

/* Logo texte */
.site-header__logo-text {
    text-transform: uppercase;
    display: inline-block;
    max-width: 4.5em;
    line-height: 1.1;
}

.site-header__logo {
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.site-header__logo-pipe {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
}

/* Navigation principale */
.site-nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.site-nav__item {
    position: relative;
}

.site-nav__link,
.site-nav__btn {
    position: relative;
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-height: var(--header-height);
}

.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__btn:hover,
.site-nav__btn:focus {
    opacity: 0.85;
    text-decoration: none;
}

/* Etat actif du menu — soulignement lisible sur desktop */
.site-nav__link--active,
.site-nav__btn--active {
    font-weight: 900;
}

.site-nav__link--active::after,
.site-nav__btn--active::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.45rem;
    height: 3px;
    background-color: var(--color-white);
    border-radius: 999px;
    pointer-events: none;
}

/* Indicateur dropdown */
.site-nav__arrow {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.site-nav__btn[aria-expanded="true"] .site-nav__arrow {
    transform: rotate(180deg);
}

/* Sous-menu dropdown */
.site-nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-black);
    min-width: 240px;
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
    box-shadow: var(--shadow-drop);
    z-index: 1001;
    max-height: calc(100dvh - var(--header-height) - var(--safe-top) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.site-nav__submenu--open {
    display: block;
}

.site-nav__list::-webkit-scrollbar,
.site-nav__submenu::-webkit-scrollbar {
    display: none;
}

.site-nav__submenu-link {
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1.2rem;
    padding: 0.6rem 1.2rem;
    display: block;
    transition: background-color 0.2s ease;
}

.site-nav__submenu-link:hover,
.site-nav__submenu-link:focus {
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

.site-nav__submenu-link[aria-current="page"] {
    font-weight: 900;
    border-left: 3px solid var(--color-white);
}

/* Sous-menu niveau 3 (Monroe) */
.site-nav__submenu-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.site-nav__submenu-row .site-nav__submenu-link {
    flex: 1;
}

.site-nav__submenu-toggle {
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
}

.site-nav__submenu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.site-nav__submenu-toggle:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}

.site-nav__arrow-right {
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}

.site-nav__submenu-toggle[aria-expanded="true"] .site-nav__arrow-right {
    transform: rotate(90deg);
}

.site-nav__submenu--level3 {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: var(--color-black);
    min-width: 220px;
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
    box-shadow: var(--shadow-drop);
    max-height: calc(100dvh - var(--header-height) - var(--safe-top) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.site-nav__submenu--level3.site-nav__submenu--open {
    display: block;
}

.site-nav__submenu--level3.site-nav__submenu--align-left {
    left: auto;
    right: 100%;
}

.site-nav__submenu-item--has-children {
    position: relative;
}

.site-nav__submenu-separator {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.25);
    margin: 0.4rem 1.2rem;
}

/* Focus visible — outline minimum 2px, contraste 3:1 */
.site-nav__link:focus-visible,
.site-nav__btn:focus-visible,
.site-nav__submenu-link:focus-visible,
.site-nav__burger:focus-visible,
.site-header__logo:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* Hamburger mobile */
.site-nav__burger {
    display: none;
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 0.5rem;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.site-nav__burger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    position: relative;
    transition: background-color 0.2s ease;
}

.site-nav__burger-icon::before,
.site-nav__burger-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    left: 0;
    transition: transform 0.3s ease;
}

.site-nav__burger-icon::before {
    top: -7px;
}

.site-nav__burger-icon::after {
    top: 7px;
}

/* Burger ouvert — animation X */
.site-nav__burger[aria-expanded="true"] .site-nav__burger-icon {
    background-color: transparent;
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-icon::before {
    transform: rotate(45deg) translate(5px, 5px);
}

.site-nav__burger[aria-expanded="true"] .site-nav__burger-icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Responsive hamburger (≤ 1023px) */
@media (max-width: 1023px) {
    .site-nav__burger {
        display: flex;
    }

    .site-nav__list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-black);
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: var(--shadow-drop);
        max-height: calc(100dvh - var(--header-height) - var(--safe-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav__list--open {
        display: flex;
    }

    .site-nav__link,
    .site-nav__btn {
        min-height: auto;
        padding: 0.8rem 1.5rem;
        width: 100%;
        justify-content: flex-start;
    }

    .site-nav__link--active,
    .site-nav__btn--active {
        border-bottom: none;
        border-left: 3px solid var(--color-white);
    }

    .site-nav__link--active::after,
    .site-nav__btn--active::after {
        content: none;
    }

    .site-nav__submenu {
        position: static;
        box-shadow: none;
        padding-left: 1rem;
        min-width: auto;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    .site-nav__submenu--level3 {
        position: static;
        box-shadow: none;
        padding-left: 1rem;
        min-width: auto;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    .site-nav__submenu-link {
        white-space: normal;
        line-height: 1.3;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .site-nav__submenu-toggle {
        min-width: 44px;
        flex: 0 0 44px;
        justify-content: center;
    }

    .site-nav__arrow-right {
        transform: rotate(90deg);
    }

    .site-nav__submenu-toggle[aria-expanded="true"] .site-nav__arrow-right {
        transform: rotate(-90deg);
    }
}

/* Navigation desktop : niveau 3 visible au survol et au focus clavier. */
@media (min-width: 1024px) {
    .site-nav__item:hover > .site-nav__submenu,
    .site-nav__item:focus-within > .site-nav__submenu,
    .site-nav__submenu-item--has-children:hover > .site-nav__submenu--level3,
    .site-nav__submenu-item--has-children:focus-within > .site-nav__submenu--level3 {
        display: block;
    }

    /* Le niveau 2 ne doit pas clipper le panneau absolu du niveau 3. */
    .site-nav__item > .site-nav__submenu {
        overflow: visible;
        max-height: none;
    }

    .site-nav__submenu--level3 {
        z-index: 1002;
        max-height: calc(100dvh - var(--header-height) - var(--safe-top) - 1rem);
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* ============================================================
   8c. FIL D'ARIANE (Breadcrumb)
   ============================================================ */

.breadcrumb {
    background-color: var(--color-black);
    padding: 0.4rem 0;
    position: sticky;
    top: calc(var(--header-height) + var(--safe-top));
    z-index: 999;
    margin-top: calc(var(--header-height) + var(--safe-top));
}

.breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--slide-pad-x);
    font-family: var(--font-primary);
    font-size: var(--fs-caption);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: ">";
    margin: 0 0.5rem;
    color: var(--color-white);
}

.breadcrumb__link {
    color: var(--color-white);
    text-decoration: none;
}

.breadcrumb__link:hover {
    text-decoration: underline;
}

.breadcrumb__link[aria-current="page"] {
    font-weight: 700;
    color: var(--color-white);
}

.breadcrumb__link:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* Cartes cliquables (pages 13/24) */
a.page13__card--link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.page13__card--link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

a.page13__card--link:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* CTA Reservation desactive (billetterie non definie) */
.cta-reservation--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.page58__reserve-notice {
    font-size: var(--fs-body);
    color: var(--color-white);
    margin-top: var(--space-xs);
}

.page58__reserve-notice a,
.page58__faq-link {
    color: var(--color-white);
    font-weight: 700;
    text-decoration-thickness: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#faq-reservations {
    scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

/* ============================================================
   8e. PAGE 404
   ============================================================ */

.page-404-hero .hero-page1__title-group {
    max-width: 780px;
}

.page-404-hero .hero-page1__title-group h1 {
    font-size: var(--fs-title-xl);
}

.page-404-hero .hero-page1__summary {
    max-width: 46rem;
}

.page-404-hero .hero-page1__trust {
    text-transform: none;
}

.page-404-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.page-404-hero__actions .hero-page1__cta {
    margin-top: 0;
}

.page-404-hero__actions .hero-page1__cta + .hero-page1__cta {
    background: rgba(201, 54, 93, 0.52);
}


/* ============================================================
   8f. PAGE PLAN DU SITE
   ============================================================ */

.sitemap-page {
    padding: var(--space-2xl) var(--slide-pad-x);
    background:
        linear-gradient(135deg, rgba(201, 54, 93, 0.24) 0%, rgba(233, 124, 84, 0.14) 52%, rgba(0, 0, 0, 0) 100%),
        var(--color-black);
    color: var(--color-white);
}

.sitemap-page__container {
    max-width: 800px;
    margin: 0 auto;
}

.sitemap-page .reveal {
    opacity: 1;
    transform: none;
}

.sitemap-page__container h1 {
    font-family: var(--font-primary);
    font-size: var(--fs-title-xl);
    color: var(--color-white);
    margin-bottom: var(--space-xl);
    max-width: 12ch;
}

.sitemap-page__container h1::after {
    content: "";
    display: block;
    width: clamp(4rem, 10vw, 7rem);
    height: 0.35rem;
    margin-top: var(--space-sm);
    background: var(--gradient-background-pink);
}

.sitemap-page__container h2 {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    color: var(--color-brand-pale);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.sitemap-page__list {
    list-style: none;
    padding-left: 0;
}

.sitemap-page__list ul {
    list-style: none;
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
}

.sitemap-page__list li {
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}

.sitemap-page__list a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.sitemap-page__list a:hover {
    color: var(--color-brand-pale);
}

.memory-box-page a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.memory-box-page a:hover {
    color: var(--color-brand-pale);
}

main a {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ============================================================
   8g. PAGE MENTIONS LEGALES
   ============================================================ */

.mentions-legales {
    padding: var(--space-2xl) var(--slide-pad-x);
    color: var(--color-white);
}

.mentions-legales__container {
    max-width: 800px;
    margin: 0 auto;
}

.mentions-legales__container h2 {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    color: var(--color-brand-pale);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.mentions-legales__container h3 {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    color: var(--color-white);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.mentions-legales__container p {
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.mentions-legales__container ul {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
    line-height: 1.8;
}

.mentions-legales__container li {
    margin-bottom: var(--space-2xs);
}

.mentions-legales__container a,
.mentions-legales__container a:visited {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mentions-legales__container a:hover,
.mentions-legales__container a:focus-visible {
    color: var(--color-brand-pale);
}

.mentions-legales__update {
    margin-top: var(--space-2xl);
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   8h. BOUTON RETOUR EN HAUT
   ============================================================ */

.back-to-top {
    position: fixed;
    bottom: calc(var(--space-lg) + var(--safe-bottom));
    right: calc(var(--space-lg) + var(--safe-right));
    z-index: 998;
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
}

.back-to-top--visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.back-to-top:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .back-to-top {
        bottom: calc(var(--space-md) + var(--safe-bottom));
        right: calc(var(--space-md) + var(--safe-right));
        width: 44px;
        height: 44px;
    }
}

/* RGAA 10.2 : majuscules visuelles via CSS (titres, noms, boutons uniquement) */
.team__member-firstname,
.team__member-info h3,
.page3__header h2,
.page3__section-title,
.page3__project-title,
.page3__project-title-small,
.partners-page__title,
.page5__title,
.page6__title,
.page6__section-title,
.page9__card-title,
.page9__hashtags h2,
.page10__card-title,
.page13__card-title,
.page58__banner-title,
.page58__experience-title,
.page58__coming-soon,
.page58__newsletter-title,
.page58__reserve-btn,
.page58__subscribe-btn,
.page62__brand,
.page62__title {
    text-transform: uppercase;
}

/* ============================================================
   9. FOOTER
   ============================================================ */

.site-footer {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: var(--space-2xl) 0;
    padding-bottom: calc(var(--space-2xl) + var(--safe-bottom));
    margin-top: var(--space-2xl);
}

/* Retrocompatibilite ancien footer */
.footer {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: var(--space-2xl) 0;
    margin-top: var(--space-2xl);
}

.footer__copyright {
    margin-bottom: var(--space-md);
}

.footer__nav ul,
.footer__nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    padding: 0;
}

.footer__nav a,
.site-footer a {
    color: var(--color-secondary);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.25em;
}

.footer__nav a:hover,
.site-footer a:hover {
    color: var(--color-brand-pale);
}

/* ============================================================
   PAGE 1 : HERO - MAQUETTE EXACTE
   ============================================================ */

.hero-page1 {
    position: relative;
    width: 100%;
    /* Le fil d'Ariane sticky occupe de l'espace sous le header : sans cette
       soustraction le hero deborde du premier ecran et rogne le bas des blocs
       ancres par bottom (liens bas gauche, reseaux sociaux). */
    min-height: calc(var(--section-height) - var(--breadcrumb-height));
    scroll-margin-top: calc(var(--header-height) + 3rem + var(--safe-top));
    overflow-x: hidden;
    display: block;
    background-color: var(--color-background-pink-readable);
    color: var(--color-white);
}

.hero-page1__background {
    display: none;
}

/* Top Left: Logo */
.hero-page1__logo {
    position: absolute;
    top: var(--edge-top);
    left: var(--edge-left);
    z-index: 20;
}

.hero-page1__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: 1.5px;
}

.hero-page1__logo a span:first-child,
.hero-page1__logo a span:last-child {
    font-weight: 400;
    font-size: var(--fs-subtitle);
}

.hero-page1__logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
    text-align: center;
}

/* Top Right: Navigation */
.hero-page1__nav {
    position: absolute;
    top: var(--edge-top);
    right: var(--edge-right);
    z-index: 20;
}

.hero-page1__nav-list {
    display: flex;
    list-style: none;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hero-page1__nav-btn {
    display: inline-block;
    background-color: var(--color-brand-btn);
    color: var(--color-white);
    padding: 0.75rem 1.2rem;
    font-size: var(--fs-caption);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
    border: none;
    cursor: pointer;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
}

.hero-page1__nav-btn:hover {
    background-color: var(--color-brand-red-btn);
    transform: scale(1.05);
}

.hero-page1__nav-lang {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    padding: var(--space-xs) var(--space-sm-tight);
    min-height: 48px;
    font-size: var(--fs-credit);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
}

/* Top Left: Partners Label (below logo) */
.hero-page1__partners {
    position: absolute;
    top: clamp(60px, 15vh, 120px);
    left: var(--edge-offset);
    z-index: 15;
}

.hero-page1__partners a {
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Center: Main Title & Hashtags */
.hero-page1__title-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 15;
    width: 90%;
    max-width: 800px;
    padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
    isolation: isolate;
}

/* Halo elliptique plutot qu'un bandeau rectangulaire : le voile s'estompe sur
   les quatre cotes, donc plus aucun bord franc ne dessine une pancarte, et le
   visuel d'arriere-plan reste identifiable en haut et en bas du panneau.
   L'opacite est concentree la ou le texte se trouve : mesure du contraste
   pire-cas a 1280x720 contre le fond reel, titre 4,58, hashtags 6,69,
   resume 6,87, au-dessus des seuils WCAG 1.4.3 de 3:1 et 4,5:1. */
.hero-page1__title-group::before {
    content: '';
    position: absolute;
    inset: -12% -8%;
    z-index: -1;
    background: radial-gradient(
        ellipse 72% 60% at 50% 50%,
        rgba(0, 0, 0, 0.66) 0%,
        rgba(0, 0, 0, 0.64) 45%,
        rgba(0, 0, 0, 0.46) 70%,
        rgba(0, 0, 0, 0.18) 87%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

.hero-page1__title-group h1 {
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.3;
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.5px;
    font-family: var(--font-primary);
    text-transform: uppercase;
}

.hero-page1__hashtags {
    font-size: var(--fs-caption);
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.5;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.85);
}

.hero-page1__summary {
    max-width: 54rem;
    margin: var(--space-sm) auto 0;
    color: var(--color-white);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.85);
}

.hero-page1__trust {
    max-width: 44rem;
    margin: var(--space-sm-tight) auto 0;
    color: var(--color-white);
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.85);
}

.hero-page1__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: var(--space-sm);
    padding: 0.55rem 1.05rem;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    background: rgba(0, 0, 0, 0.28);
    font-size: var(--fs-caption);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: var(--shadow-text);
}

.hero-page1__cta:hover {
    background: rgba(0, 0, 0, 0.48);
    color: var(--color-white);
    text-decoration: none;
}

/* Center: Hero Video (DOMINANT) */
.hero-page1__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

/* Bouton son hero */
.hero-page1__sound-btn {
    position: absolute;
    bottom: var(--edge-offset);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-page1__sound-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateX(-50%) scale(1.1);
}

/* Son off par defaut : icone off visible, on masquee */
.hero-page1__sound-icon--on {
    display: none;
}

/* Quand son actif (aria-pressed=true) : inverser */
.hero-page1__sound-btn[aria-pressed="true"] .hero-page1__sound-icon--off {
    display: none;
}
.hero-page1__sound-btn[aria-pressed="true"] .hero-page1__sound-icon--on {
    display: block;
}

/* Bottom Left: Links */
.hero-page1__bottom-left {
    position: absolute;
    bottom: var(--edge-bottom);
    left: var(--edge-left);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 15;
}

.hero-page1__bottom-left a {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    min-height: 48px;
    min-width: 48px;
    padding: var(--space-xs) 0;
    display: inline-flex;
    align-items: center;
    text-underline-offset: 6px;
    transition: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hero-page1__bottom-left a:hover {
    color: var(--color-gray-lightest);
}

/* Bottom Right: Social Links */
.hero-page1__bottom-right {
    position: absolute;
    bottom: var(--edge-bottom);
    right: var(--edge-right);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: right;
    z-index: 15;
}

.hero-page1__follow-label {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 1.5px;
    margin: 0 0 var(--space-sm) 0;
    text-transform: uppercase;
}

.hero-page1__bottom-right a {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    transition: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-page1__bottom-right a:hover {
    color: var(--color-gray-lightest);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .hero-page1__title-group {
        width: 85%;
    }

    .hero-page1__title-group h1 {
        font-size: clamp(1.2rem, 3vw, 2rem);
    }

    .hero-page1__hashtags {
        font-size: var(--fs-credit);
        letter-spacing: 1px;
    }

    .hero-page1__bottom-left a,
    .hero-page1__bottom-right a,
    .hero-page1__follow-label {
        font-size: var(--fs-caption);
    }

    .hero-page1__partners a {
        font-size: var(--fs-credit);
    }
}

@media (max-width: 768px) {
    .hero-page1 {
        height: max(640px, calc(var(--section-height) - 96px));
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "content content"
            "links   social";
        padding: var(--slide-pad-x);
        row-gap: var(--space-xs);
        isolation: isolate;
    }

    /* Header : logo gauche, nav droite */
    .hero-page1__logo {
        position: static;
        grid-area: logo;
        z-index: 2;
        align-self: start;
    }

    .hero-page1__logo a {
        font-size: var(--fs-caption);
    }

    .hero-page1__nav {
        position: static;
        grid-area: nav;
        z-index: 2;
        justify-self: end;
        align-self: start;
    }

    .hero-page1__nav-list {
        gap: 0.25rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .hero-page1__nav-btn {
        padding: 0.25rem 0.4rem;
        font-size: var(--fs-credit);
        min-width: auto;
    }

    .hero-page1__nav-lang {
        font-size: var(--fs-credit);
        padding: 0.25rem 0.4rem;
    }

    .hero-page1__partners {
        display: none;
    }

    /* Content : titre centre avec image en fond */
    .hero-page1__title-group {
        position: static;
        transform: none;
        grid-area: content;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        padding: clamp(1rem, 4vw, 1.5rem) clamp(1rem, 5vw, 1.75rem);
        text-align: center;
    }

    .hero-page1__title-group h1 {
        font-size: var(--fs-subtitle);
        margin-bottom: var(--space-xs);
        letter-spacing: 0;
    }

    .hero-page1__hashtags {
        font-size: var(--fs-credit);
        line-height: 1.35;
    }

    .hero-page1__summary {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-top: var(--space-xs);
    }

    .hero-page1__trust {
        max-width: 28rem;
        margin-top: var(--space-xs);
        font-size: clamp(0.72rem, 2vw, 0.84rem);
        line-height: 1.35;
    }

    .hero-page1__cta {
        min-height: 42px;
        margin-top: var(--space-xs);
        padding: 0.45rem 0.8rem;
        font-size: var(--fs-credit);
    }

    .hero-page1__video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 1;
    }

    .hero-page1__sound-btn {
        width: 40px;
        height: 40px;
        bottom: auto;
        top: var(--edge-top);
        left: auto;
        right: calc(var(--edge-right) + 60px);
        transform: none;
    }

    .hero-page1__sound-btn:hover {
        transform: scale(1.1);
    }

    /* Footer : liens gauche, social droite */
    .hero-page1__bottom-left {
        position: static;
        grid-area: links;
        z-index: 2;
        flex-direction: column;
        gap: var(--space-2xs);
        align-items: flex-start;
        align-self: end;
    }

    .hero-page1__bottom-left a {
        font-size: var(--fs-credit);
        min-height: 44px;
    }

    .hero-page1__bottom-right {
        position: static;
        grid-area: social;
        z-index: 2;
        flex-direction: column;
        gap: 0;
        align-items: flex-end;
        align-self: end;
        text-align: right;
        padding-right: max(0.35rem, var(--safe-right));
    }

    .hero-page1__bottom-right a {
        font-size: var(--fs-credit);
        min-height: 44px;
    }

    .hero-page1__follow-label {
        font-size: var(--fs-credit);
        margin: 0 0 var(--space-2xs) 0;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    color: var(--color-black);
    background: transparent;
}

/* === TEXT-SHADOW ACCESSIBILITE : contraste garanti sur background-image === */
.full-image-page__credit,
.hero-page1__title-group,
.hero-page1__title-group h1,
.hero-page1__title-group p,
.hero-page1__links a,
.hero-page1__social a,
.hero-page1__hashtags,
.page9__card-title,
.page10__card-title,
.page12__title-overlay,
.page12__title-overlay h2,
.page12__title-overlay p,
.page23__overlay,
.page23__number,
.page23__title,
.page35__overlay-name,
.page35__overlay-desc,
.page43__title,
.page43__subtitle,
.page43__award,
.page50__title,
.page50__subtitle,
.page50__meta,
.page50__credit,
.page50__tags,
.page57__cta {
    text-shadow: var(--shadow-text);
}

.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1002;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    transform: translateY(-120%);
}

.skip-links:focus-within {
    transform: translateY(0);
}

.skip-link {
    background: var(--color-background-pink-readable);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    font-family: var(--font-primary);
    font-weight: 700;
    text-decoration: none;
}

/* ============================================================
   COMPOSANT SEO/GEO : réponse directe et faits clés
   ============================================================ */

.seo-geo-panel {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: var(--space-2xl) var(--slide-pad-x);
}

.seo-geo-panel__inner {
    width: min(100%, 1080px);
    margin: 0 auto;
}

.seo-geo-panel__title {
    max-width: 18ch;
    margin-bottom: var(--space-md);
    color: var(--color-black);
    font-size: var(--fs-title);
    letter-spacing: 0;
}

.seo-geo-panel__answer {
    max-width: 72ch;
    margin-bottom: var(--space-lg);
    color: var(--color-gray-dark);
    font-size: var(--fs-body);
    line-height: 1.65;
    letter-spacing: 0;
}

.seo-geo-panel__table {
    width: 100%;
    max-width: 960px;
    border-collapse: collapse;
    border-top: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    font-size: var(--fs-caption);
    line-height: 1.55;
}

.seo-geo-panel__table caption {
    margin-bottom: var(--space-sm);
    color: var(--color-gray-dark);
    font-weight: 700;
    text-align: left;
}

.seo-geo-panel__table th,
.seo-geo-panel__table td {
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    vertical-align: top;
}

.seo-geo-panel__table th {
    width: 28%;
    color: var(--color-black);
    font-weight: 900;
    text-align: left;
}

.seo-geo-panel__table td {
    color: var(--color-gray-dark);
}

.seo-geo-panel__table a {
    color: var(--color-bg-red);
    font-weight: 700;
    text-decoration-thickness: 2px;
}

@media (max-width: 700px) {
    .seo-geo-panel {
        padding: var(--space-xl) var(--slide-pad-x);
    }

    .seo-geo-panel__title {
        max-width: 100%;
    }

    .seo-geo-panel__table,
    .seo-geo-panel__table tbody,
    .seo-geo-panel__table tr,
    .seo-geo-panel__table th,
    .seo-geo-panel__table td {
        display: block;
        width: 100%;
    }

    .seo-geo-panel__table tr {
        padding: var(--space-sm) 0;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
    }

    .seo-geo-panel__table th,
    .seo-geo-panel__table td {
        padding: 0;
        border-top: 0;
    }

    .seo-geo-panel__table th {
        margin-bottom: var(--space-2xs);
    }
}

/* ============================================================
   ANIMATIONS DE REVELATION AU SCROLL
   Accessibilite : desactivees par prefers-reduced-motion ci-dessous
   ============================================================ */

/* Etats initiaux — les elements sont invisibles avant revelation */
.reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de direction */

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */

/* Images : zoom subtil au hover */
.full-image-page__image,
.page31__image,
.page36__image,
.page47__image,
.page54__image {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.full-image-page:hover .full-image-page__image,
[class*="__gallery"]:hover img {
    transform: scale(1.02);
}

/* Boutons CTA : elevation au hover */
.hero-page1__nav-btn,
.page58__reserve-btn,
.page58__subscribe-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.hero-page1__nav-btn:hover,
.page58__reserve-btn:hover,
.page58__subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Cartes : elevation et ombre */
.page9__card,
.page10__card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page9__card:hover,
.page10__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Liens textuels : soulignement visible en permanence (RGAA 10.6) */

/* Titres de categorie : barre doree animee */
[class*="__category"] {
    position: relative;
    overflow: hidden;
}

[class*="__category"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-brand-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

section:hover [class*="__category"]::after {
    transform: scaleX(1);
}

/* Separateur entre sections : ligne fine */
/* border entre sections supprime (causait une bande blanche visible) */

/* Indicateur de scroll sur le hero */
@keyframes scrollHint {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(8px); opacity: 1; }
}

.hero-page1::after {
    content: '';
    position: absolute;
    bottom: calc(clamp(0.5rem, 3vh, 2rem) + var(--safe-bottom));
    left: 50%;
    width: 2px;
    height: clamp(16px, 4vh, 32px);
    background: var(--color-white);
    border-radius: 1px;
    animation: scrollHint 2s ease-in-out infinite;
    z-index: 20;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Dark mode desactive : toutes les couleurs sont hardcodees via --color-brand/white */

/* ============================================================
   PAGE 2: TEAM / QUI SOMMES NOUS
   ============================================================ */

.section.team {
    background: url('../img/pages/page-2/page-2-image-9.jpg') center/cover,
                linear-gradient(90deg, var(--color-brand-pink-gradient) 0%, var(--color-brand-coral) 50%, var(--color-brand-peach) 100%);
    background-color: var(--color-brand-btn); /* fallback a11y : 4.86:1 sur blanc */
    background-blend-mode: multiply;
    padding: var(--space-sm) var(--slide-pad-x);
    min-height: var(--section-height);
    overflow: hidden;
    position: relative;
    color: var(--color-white);
}

.team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-brand-pink-gradient) 85%, transparent) 0%, color-mix(in srgb, var(--color-brand-coral) 85%, transparent) 50%, color-mix(in srgb, var(--color-brand-peach) 85%, transparent) 100%);
    pointer-events: none;
    z-index: 1;
}

.team__container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.team__container h2 {
    color: var(--color-white);
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--fs-title-xl);
    margin-bottom: var(--space-sm-tight);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    width: 100%;
}

.team__container h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--color-brand-btn);
    margin: 0.6rem auto 0;
}

.team__subtitle {
    color: var(--color-white);
    text-align: center;
    font-size: var(--fs-subtitle);
    margin-bottom: var(--space-md);
    line-height: 1.7;
    font-weight: 700;
    text-transform: uppercase;
}

.team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    margin-bottom: 0;
}

.team__member {
    background-color: var(--color-background-pink-readable); /* WCAG AA : 5.04:1 sur blanc */
    color: var(--color-white);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team__member:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.team__member-image {
    width: 100%;
    aspect-ratio: 1 / 0.85;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.team__member:hover .team__member-image {
    filter: grayscale(0%);
}

.team__member-info {
    padding: 0.6rem var(--space-xs);
    text-align: center;
}

.team__member-firstname {
    color: var(--color-white);
    font-size: var(--fs-caption);
    margin: 0;
    margin-bottom: 0.25rem;
    font-weight: 400;
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
}

.team__member-info h3 {
    color: var(--color-white);
    font-size: var(--fs-subtitle); /* 19.2px >= 18.5px = large text WCAG (seuil 3:1) */
    font-weight: 700;
    margin: 0 0 var(--space-xs) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-primary);
}

.team__member-role {
    color: var(--color-white);
    font-size: var(--fs-caption);
    margin: 0;
    margin-bottom: var(--space-2xs);
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
    .team__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .team__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-sm);
    }

    .team__container h2 {
        font-size: var(--fs-subtitle);
        margin-bottom: var(--space-sm-tight);
    }

    .team__subtitle {
        font-size: var(--fs-caption);
        margin-bottom: var(--space-sm);
    }

    .team__member-info {
        padding: 0.6rem var(--space-xs);
    }

    .team__member-info h3 {
        font-size: var(--fs-caption);
    }

    .team__member-role {
        font-size: var(--fs-credit);
    }
}

@media (max-width: 480px) {
    .team__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-sm);
    }

    .team__container h2 {
        font-size: var(--fs-subtitle);
        margin-bottom: var(--space-xs);
    }

    .team__subtitle {
        font-size: var(--fs-caption);
        margin-bottom: var(--space-sm-tight);
    }

    .team__member-info {
        padding: var(--space-xs) 0.4rem;
    }

    .team__member-info h3 {
        font-size: var(--fs-credit);
    }

    .team__member-role {
        font-size: var(--fs-credit);
    }
}

/* ============================================================
   PAGE 3: NOS CRÉATIONS
   ============================================================ */

.page3 {
    background-color: var(--color-white);
    padding: 0;
    min-height: var(--section-height);
    overflow: hidden;
}

.page3__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable); /* fallback a11y : 5.04:1 sur blanc */
    color: var(--color-white);
}

/* Colonne gauche - Texte */
.page3__left {
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable); /* fallback a11y : outils ne traversent pas les gradients parents */
    color: var(--color-white);
    padding: var(--slide-pad-y) var(--slide-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
}

.page3__header {
    margin-bottom: var(--space-md);
}

.page3__header h2 {
    font-size: var(--fs-hero);
    font-weight: 900;
    line-height: var(--line-display);
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
}

.page3__header-underline {
    width: 40px;
    height: 2px;
    background-color: var(--color-white);
}

.page3__intro {
    margin-bottom: var(--space-md);
    line-height: var(--line-reading);
}

.page3__intro p {
    font-size: var(--fs-body);
    max-width: var(--measure-narrow);
    margin: 0 0 var(--space-xs) 0;
    font-weight: 400;
    letter-spacing: 0;
    line-height: var(--line-reading);
}

.page3__creations {
    flex: 1;
    background-color: inherit; /* a11y : hérite du fond rose parent pour outils de contraste */
    padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.6rem);
    box-sizing: border-box;
}

.page3__section-title {
    font-size: var(--fs-caption);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: var(--line-compact);
    margin: var(--space-sm) 0 var(--space-md) 0;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-background-pink-readable); /* a11y : explicite pour les outils de contraste (5.04:1) */
}

.page3__project {
    margin-bottom: clamp(1.6rem, 2.5vw, 2.2rem);
}

.page3__creations-dev {
    margin-top: clamp(1.8rem, 3vw, 2.4rem);
    padding-top: clamp(1.2rem, 2vw, 1.6rem);
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.page3__creations-dev .page3__project-meta {
    font-size: clamp(0.8rem, 0.85vw, 0.9rem);
    line-height: 1.45;
    margin: 0.16rem 0;
}

.page3__creations-dev .page3__project-meta:has(a) {
    margin-top: 1rem;
    font-size: clamp(0.95rem, 1vw, 1.05rem);
    line-height: 1.35;
    font-weight: 700;
}

.page3__creations-dev .page3__project-meta:first-of-type {
    margin-top: 0;
}

.page3__project-title {
    font-size: clamp(1.18rem, 1.55vw, 1.4rem);
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 0.55rem 0;
    letter-spacing: 0.02em;
    color: var(--color-white);
    text-shadow: var(--shadow-text);
}

.page3__project-subtitle {
    font-size: clamp(0.98rem, 1.15vw, 1.12rem);
    max-width: 42ch;
    margin: 0 0 0.85rem 0;
    font-weight: 450;
    line-height: 1.54;
    letter-spacing: 0.01em;
    text-shadow: var(--shadow-text);
}

.page3__project-meta {
    font-size: clamp(0.82rem, 0.9vw, 0.95rem);
    max-width: 52ch;
    margin: 0.22rem 0;
    line-height: var(--line-meta);
    font-weight: 400;
    letter-spacing: 0.02em;
    background-color: var(--color-background-pink-readable); /* a11y : explicite pour les outils de contraste (5.04:1) */
}

.page3__project-meta a {
    color: var(--color-white);
    font-weight: 650;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

.page3__project-meta a:hover {
    color: var(--color-white);
    text-decoration-thickness: 2px;
}

.page3__project--secondary {
    margin-top: clamp(1.4rem, 2.4vw, 2rem);
    padding-top: clamp(1.2rem, 2vw, 1.6rem);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    margin-left: 0;
    padding-left: 0;
}

.page3__project-title-small {
    font-size: clamp(1.12rem, 1.45vw, 1.32rem);
    font-weight: 800;
    line-height: 1.24;
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.02em;
    color: var(--color-white);
    text-shadow: var(--shadow-text);
}

.page3__project-link {
    display: inline-block;
    color: var(--color-white);
    text-decoration: underline;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    margin-top: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    transition: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
    background-color: var(--color-background-pink-readable); /* a11y : explicite pour les outils de contraste (5.04:1) */
}

.page3__project-link:hover {
    opacity: 0.85;
}

/* Colonne droite - Galerie */
.page3__right {
    background-color: transparent;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   PAGE 3 GALLERY - MASONRY LAYOUT (CSS COLUMNS)
   ============================================================
   APPROCHE : CSS Columns pour masonry dense sans blanc
   - 3 colonnes pour remplissage optimal
   - Images redimensionnées proportionnellement
   - Pas de tronquement : object-fit: contain
   - Espacement minimal (1px) pour mur d'images cohérent
   ============================================================ */

.page3__gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
    padding: 10px;
}

.page3__gallery-image {
    width: calc(100% - 20px);
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 10px;
}

/* PAGE 4 - INVERSÉE (Image gauche, Texte droite) */
.page3__container--inverted {
    grid-template-columns: 1fr 1fr;
}

/* PAGE 4 : fond blanc côté texte, texte foncé */
#page-4 .page3__container--inverted {
    background: var(--color-white);
}

#page-4 .page3__right--text .page3__left {
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    color: var(--color-white);
}

#page-4 .page3__header h2 {
    color: var(--color-white);
}

#page-4 .page3__header-underline {
    background-color: var(--color-white);
}

#page-4 .page3__project-title {
    color: var(--color-white);
}

#page-4 .page3__project-subtitle {
    color: var(--color-white);
}

#page-4 .page3__project-meta {
    color: var(--color-white);
    background-color: transparent;
}

#page-4 .page3__project-link {
    color: var(--color-white);
    text-decoration: underline;
}

#page-4 .page3__section-title {
    color: var(--color-white);
    background-color: transparent;
}

#page-4 .page3__intro p {
    color: var(--color-white);
}

.page3__left--image {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.page3__right--text {
    background: transparent;
    padding: 0;
    display: flex;
}

.page3__right--text .page3__left {
    flex: 1;
    padding: clamp(2rem, 4vw, 3.25rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.page3__creations-dev {
    margin-top: clamp(1.8rem, 3vw, 2.4rem);
    padding-top: clamp(1.2rem, 2vw, 1.6rem);
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

/* ============================================================
   PAGE 5 - ESPACES AUGMENTÉS (Image centrée)
   ============================================================ */

.page5 {
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    color: var(--color-white);
    padding: 0;
    min-height: var(--section-height);
    overflow: hidden;
}

.page5__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: var(--section-height);
    padding: var(--space-xl) var(--slide-pad-x);
    gap: var(--space-lg);
}

.page5__header {
    width: 100%;
    max-width: var(--page-max-width);
}

.page5__title {
    font-size: var(--fs-title-xl);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 1px;
}

.page5__image-wrapper {
    width: 100%;
    max-width: 1000px;
}

.page5__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.page5__footer {
    width: 100%;
    max-width: var(--page-max-width);
}

.page5__subtitle {
    color: var(--color-white);
    font-size: var(--size-lg);
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .page5__title {
        font-size: var(--fs-title);
    }

    .page5__subtitle {
        font-size: var(--fs-subtitle);
    }
}

@media (max-width: 480px) {
    .page5__container {
        padding: var(--space-lg) var(--space-sm);
        gap: var(--space-md);
    }

    .page5__title {
        font-size: var(--fs-subtitle);
    }

    .page5__subtitle {
        font-size: var(--fs-body);
    }
}

/* ============================================================
   PAGE 6 - IMAGE GAUCHE 50% + TEXTE DROITE 50%
   ============================================================ */

.page6 {
    padding: 0;
    min-height: var(--section-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    color: var(--color-white);
}

.page6__header {
    width: 100%;
    padding: var(--space-xl) var(--slide-pad-x) var(--space-md);
}

.page6__title {
    font-size: var(--fs-title-xl);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 1px;
    border-bottom: 3px solid var(--color-white);
    padding-bottom: var(--space-sm);
    display: inline-block;
}

.page6__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    flex: 1;
    width: 100%;
    padding: 0 var(--slide-pad-x) var(--space-xl);
    align-items: center;
}

.page6__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page6__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    aspect-ratio: 16 / 10;
}

.page6__text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-lg);
}

.page6__section {
    margin: 0;
}

.page6__section-title {
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.3;
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: 0.5px;
}

.page6__section-text {
    font-size: var(--fs-body);
    color: var(--color-white);
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
    max-width: 50ch;
}

@media (max-width: 768px) {
    .page6__main {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: 0 var(--slide-pad-x) var(--space-lg);
    }

    .page6__title {
        font-size: var(--fs-title);
    }

    .page6__section-title {
        font-size: var(--fs-subtitle);
    }

    .page6__image {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .page6__header {
        padding: var(--space-lg) var(--space-sm) var(--space-sm);
    }

    .page6__main {
        padding: 0 var(--space-sm) var(--space-md);
        gap: var(--space-md);
    }

    .page6__title {
        font-size: var(--fs-subtitle);
    }

    .page6__section-title {
        font-size: var(--fs-body);
    }
}

/* ============================================================
   PAGE 7 : FULL-WIDTH IMAGE
   ============================================================ */

.full-image-page {
    position: relative;
    width: 100%;
    height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-black); /* a11y : fond explicite pour contraste texte blanc sur image */
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-image-page__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.full-image-page__credit {
    position: absolute;
    bottom: calc(1rem + var(--safe-bottom));
    right: calc(1.5rem + var(--safe-right));
    font-size: var(--fs-caption);
    color: var(--color-white);
    letter-spacing: 0.02em;
    text-shadow: var(--shadow-text);
}

/* ============================================================
   PAGE 8 : PARTNERS LOGO GRID
   ============================================================ */

.partners-page {
    position: relative;
    width: 100%;
    min-height: var(--section-height);
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    padding: 0;
    overflow-x: hidden;
}

.partners-page__container {
    display: flex;
    flex-direction: column;
    padding: var(--slide-pad-y) var(--slide-pad-x) var(--space-sm) var(--slide-pad-x);
    min-width: 0;
}

.partners-page__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-white);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.partners-page__grid {
    display: grid;
    /* Safari surestime la largeur intrinseque quand grid + flex item + aspect-ratio.
       minmax(0, 1fr) force les colonnes a se comprimer au viewport. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap-sm);
    flex: 1;
    align-content: start;
    width: 100%;
    min-width: 0;
}

.partners-page__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    aspect-ratio: 1;
    padding: 0.35rem;
    border-radius: 2px;
    min-width: 0;
}

.partners-page__logo {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
}

/* ============================================================
   PAGE 9 : EXPERIENCES SERIES - GRILLE DE CARTES PROJETS
   ============================================================ */

.page9 {
    position: relative;
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-background-pink-readable);
}

.page9__background {
    position: absolute;
    inset: 0;
    background: url('../img/pages/page-9/page-9-image-5.jpg') center/cover;
    z-index: 0;
}

.page9__background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-background-pink);
    opacity: 0.75;
    mix-blend-mode: multiply;
}

.page9__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--color-white);
}

.page9__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--slide-pad-y) var(--slide-pad-x) 0;
}

.page9__hashtags h2 {
    font-size: var(--fs-title);
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0;
    color: var(--color-white);
    line-height: 1.3;
    border-bottom: 2px solid var(--color-white);
    padding-bottom: var(--space-xs);
    display: inline-block;
}

.page9__badge {
    background-color: var(--color-brand-btn);
    color: var(--color-white);
    padding: var(--space-sm-tight) var(--space-sm);
    font-size: var(--fs-body);
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

.page9__intro {
    text-align: center;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}

.page9__intro-text {
    font-size: var(--fs-title);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.7;
    margin: 0;
}

.page9__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    flex: 1;
    min-height: 0;
    padding: 0 var(--slide-pad-x);
}

.page9__card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.page9__card:hover {
    text-decoration: none;
}

.page9__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page9__card-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
    margin: 0;
    text-align: center;
}

/* ============================================================
   PAGE 10 : PROJETS EN DEVELOPPEMENT - GRILLE DE CARTES
   ============================================================ */

.page10 {
    position: relative;
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-background-pink-readable);
}

.page10__background {
    position: absolute;
    inset: 0;
    background: url('../img/pages/page-10/page-10-image-5.jpg') center/cover;
    z-index: 0;
}

.page10__background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-background-pink);
    opacity: 0.75;
    mix-blend-mode: multiply;
}

.page10__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--color-white);
}

.page10__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    flex: 1;
    min-height: 0;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}

.page10__card {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-gray-dark);
}

.page10__card:hover {
    text-decoration: none;
}

.page10__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page10__card-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
    margin: 0;
    text-align: center;
}

/* ============================================================
   PAGE 11 : VIDEO PLEIN ECRAN (Vimeo background)
   ============================================================
   Technique cover pour iframe : on dimensionne l'iframe plus
   grand que le viewport (min-width/min-height 100%) et on centre
   avec translate. Le overflow:hidden du parent coupe l'excedent.
   Resultat identique a object-fit:cover mais compatible iframe.
   ============================================================ */

.page11 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-black);
}

.page11__video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.page11__video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.page11__controls {
    position: absolute;
    bottom: calc(clamp(0.5rem, 3vw, 2rem) + var(--safe-bottom));
    right: calc(clamp(0.5rem, 3vw, 2rem) + var(--safe-right));
    z-index: 10;
    display: flex;
    gap: 0.75rem;
}

.page11__play-btn,
.page11__sound-btn {
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background-color: var(--shadow-overlay-medium);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.page11__play-btn:hover,
.page11__sound-btn:hover {
    background-color: var(--shadow-overlay-heavy);
}

/* Play : aria-pressed=true → en lecture (icone pause visible) */
.page11__play-icon--paused {
    display: none;
}

.page11__play-btn[aria-pressed="false"] .page11__play-icon--playing {
    display: none;
}

.page11__play-btn[aria-pressed="false"] .page11__play-icon--paused {
    display: block;
}

/* Son : aria-pressed=false → mute (icone off visible) */
.page11__sound-icon--on {
    display: none;
}

.page11__sound-btn[aria-pressed="true"] .page11__sound-icon--off {
    display: none;
}

.page11__sound-btn[aria-pressed="true"] .page11__sound-icon--on {
    display: block;
}

@media (max-width: 768px) {
    .page11__controls {
        bottom: 1rem;
        right: 1rem;
        gap: var(--space-xs);
    }
    .page11__play-btn,
    .page11__sound-btn {
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   PAGE 12 : L'EXPÉRIENCE MONROE - AFFICHE PRESSE
   ============================================================ */

.page12 {
    position: relative;
    min-height: var(--section-height);
    overflow: visible;
    background-color: var(--color-black);
}

.page12__background {
    position: absolute;
    inset: 0;
    background: url('../img/pages/page-12/page-12-image-1.jpg') center/cover;
    z-index: 0;
    opacity: 0.4;
}

.page12__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--color-white);
}

.page12__poster {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--slide-pad-y) var(--slide-pad-x);
    margin: 0;
    overflow: hidden;
}

.page12__poster-image {
    flex: 1;
    min-height: 0;
    max-width: 50%;
    width: auto;
    object-fit: contain;
    display: block;
}

.page12__poster-caption {
    flex-shrink: 0;
    text-align: center;
    margin-top: var(--space-sm-tight);
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page12__fig-legend {
    display: block;
    font-size: var(--fs-caption);
    color: var(--color-white);
    opacity: 0.85;
    margin-bottom: var(--space-xs);
    text-shadow: var(--shadow-text);
}

.page12__disclosure-btn {
    background-color: var(--color-brand-btn);
    color: var(--color-white);
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: var(--fs-caption);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.page12__disclosure-btn:hover {
    background-color: var(--color-bg-red);
}

.page12__disclosure-btn[aria-expanded="true"] {
    background-color: var(--color-bg-red);
}

.page12__quotes {
    margin-top: var(--space-sm-tight);
    text-align: left;
}

.page12__quotes-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem var(--space-md);
    padding: 0;
    margin: 0;
}

.page12__quotes-list blockquote {
    margin: 0;
}

.page12__quotes-list p {
    font-size: var(--fs-caption);
    margin: 0;
    color: var(--color-white);
}

.page12__quotes-list footer {
    font-size: var(--fs-caption);
    color: var(--color-white);
    margin: 0;
}

.page12__logos {
    background-color: var(--color-white);
    padding: var(--space-sm) var(--slide-pad-x);
}

.page12__logos-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    align-items: center;
    justify-content: center;
}

.page12__logo {
    height: 2.5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
}

.page12__logo--invert {
    filter: invert(1);
    mix-blend-mode: normal;
    isolation: isolate;
}

/* ============================================================
   TRANSCRIPTIONS ACCESSIBLES
   ============================================================ */

.media-transcript,
.media-transcripts {
    width: min(100% - 2rem, 980px);
    margin: var(--space-xs) auto var(--space-sm);
    color: inherit;
}

main > .media-transcript {
    color: var(--color-white);
}

.media-transcripts__title {
    width: min(100%, 980px);
    margin: 0 auto var(--space-md);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1.2;
}

.media-transcript__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    min-height: 44px;
    padding: 0.25rem 0.25rem 0.25rem 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: currentColor;
    font: inherit;
    font-size: var(--fs-caption);
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    cursor: pointer;
}

.media-transcript__button[hidden] {
    display: none;
}

.media-transcript__button:hover,
.media-transcript__button[aria-expanded="true"] {
    background: transparent;
    color: currentColor;
    text-decoration-thickness: 2px;
}

.media-transcript__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.media-transcript__panel {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
}

.media-transcript__title {
    margin: 0 0 var(--space-xs);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.25;
}

.media-transcript__section + .media-transcript__section {
    margin-top: var(--space-md);
}

.media-transcript__section h3,
.media-transcript__section h4 {
    margin: 0 0 var(--space-xs);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.3;
}

.media-transcript__section p {
    margin: 0 0 0.75rem;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.65;
}

.page33 .media-transcript {
    width: calc(100% - 130px - 0.75rem - (var(--space-xs) * 2));
    margin: 0.2rem var(--space-xs) 0 auto;
    color: var(--color-gray-dark);
}

.page33 .media-transcript__button {
    width: auto;
    justify-content: flex-start;
    font-size: var(--fs-caption);
}

.page33 .media-transcript__panel {
    padding: var(--space-sm);
    max-height: min(46vh, 24rem);
    overflow-y: auto;
    box-shadow: none;
}

/* ============================================================
   PAGE 13 : L'EXPÉRIENCE MONROE - BANDEAU CARTES
   ============================================================ */

.page13 {
    overflow: hidden;
    background-color: var(--color-white);
}

.page13__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}

.page13__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.page13__arrow {
    font-size: var(--fs-title-xl);
    color: var(--color-brand);
}

.page13__header h2 {
    font-size: var(--fs-title-xl);
    font-weight: 800;
    color: var(--color-brand);
    margin: 0;
}

.page13__cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--space-xs);
}

.page13__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.page13__card-image-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    background-color: var(--color-black); /* a11y : fond explicite pour contraste numeros decoratifs sur image */
}

.page13__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Export de la cliente : cinq visuels de memes proportions, alignes en bas. Quatre images sont en portrait
   (600 x 840), celle de l'installation en paysage (1272 x 815) : dans une case flexible de hauteur indefinie son
   height: 100 % ne s'appliquait pas et elle s'arretait a mi-hauteur. Le cadre porte le ratio, l'image le remplit. */
.page13__card-image-wrapper {
    flex: none;
    aspect-ratio: 600 / 840;
}
.page13__card-image {
    position: absolute;
    inset: 0;
}
.page13__card-body {
    flex: 1;
}

.page13__card-number {
    position: absolute;
    bottom: 0.5rem;
    left: 0.8rem;
    font-size: var(--size-3xl);
    font-weight: 400;
    color: var(--color-white);
    background-color: var(--color-black); /* a11y : fond explicite pour outils de contraste */
    line-height: 1.3;
    text-shadow: var(--shadow-text);
}

.page13__card-body {
    padding: var(--space-sm);
    min-height: 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.page13__card-body--dark {
    background-color: var(--color-bg-navy);
}

.page13__card-body--pink {
    background-color: var(--color-brand-rose);
}

.page13__card-title {
    font-size: var(--fs-body);
    font-weight: 700;
    margin: 0;
    color: var(--color-white);
}

.page13__card-subtitle {
    font-size: var(--fs-caption);
    margin: 0.2rem 0 0;
    color: var(--color-white);
}

/* ============================================================
   PAGE 14 : LA PIECE - Volet 1
   ============================================================ */

.page14 {
    overflow: hidden;
    background-color: var(--color-white);
}

.page14__container {
    display: grid;
    grid-template-columns: 40% 60%;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}

.page14__left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--space-lg);
}

.page14__number {
    font-size: var(--size-4xl);
    font-weight: 400;
    color: var(--color-teal);
    line-height: 1.3;
}

.page14__title {
    font-size: var(--fs-hero);
    font-weight: 900;
    color: var(--color-teal);
    line-height: 1.7;
    margin: var(--space-xs) 0 0;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3rem;
}

.page14__actress-wrapper {
    flex: 1;
    min-height: 0;
    margin-top: var(--space-sm);
    overflow: hidden;
}

.page14__actress {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom left;
}

.page14__right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page14__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
}

.page14__cover {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(var(--shadow-drop));
}

/* ============================================================
   PAGE 16 : THE PLAY - Photos spectacle (overlap)
   ============================================================ */

.page16 {
    position: relative;
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
}

.page16__images {
    position: relative;
    flex: 1;
    min-height: 0;
}

.page16__image--main {
    position: absolute;
    top: 0;
    left: 5%;
    width: 65%;
    height: 80%;
    object-fit: cover;
}

.page16__image--overlay {
    position: absolute;
    bottom: 5%;
    right: 10%;
    width: 40%;
    height: 55%;
    object-fit: cover;
}

.page16__credit {
    text-align: center;
    padding: var(--space-sm-tight);
    font-size: var(--fs-caption);
    color: var(--color-gray-medium);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* ============================================================
   PAGE 20 : LE ROMAN GRAPHIQUE - Volet 2 (pattern page 14)
   ============================================================ */

.page20 {
    overflow: hidden;
    background-color: var(--color-white);
}

.page20__container {
    display: grid;
    grid-template-columns: 40% 60%;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}

.page20__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--space-sm);
}

.page20__number {
    font-size: var(--size-4xl);
    font-weight: 400;
    color: var(--color-brand-btn);
    line-height: 1.3;
}

.page20__title {
    font-size: var(--fs-hero);
    font-weight: 900;
    color: var(--color-brand-btn);
    line-height: 1.7;
    margin: var(--space-xs) 0 0;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3rem;
}

.page20__right {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 65%, var(--color-brand-rose-light) 85%, var(--color-brand-rose-medium) 100%);
}

.page20__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--space-lg);
}

.page20__cover {
    max-width: 65%;
    max-height: 80vh;
    object-fit: contain;
    filter: drop-shadow(var(--shadow-drop-heavy));
}

/* ============================================================
   PAGE 24 : INTERACTIVE EXHIBITION - Bandeau 6 cartes (pattern page 13)
   ============================================================ */

.page24 {
    overflow: hidden;
    background-color: var(--color-white);
}

.page24__container {
    display: flex;
    flex-direction: column;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}

.page24__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.page24__header .page13__arrow {
    color: var(--color-text-gold);
}

.page24__header h2 {
    font-size: var(--fs-title-xl);
    font-weight: 800;
    color: var(--color-text-gold);
    margin: 0;
}

.page24__cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xs);
    height: fit-content;
    max-height: 70vh;
    align-content: start;
}

/* ============================================================
   PAGE 27 : IA MILTON GREENE - Image centree + titre + credit (archetype C)
   ============================================================ */

.page27 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
}
.page27__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.page27__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold);
    margin: 0 0 var(--space-sm) 0;
    flex-shrink: 0;
}
.page27__image-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page27__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.page27__credit {
    font-size: var(--fs-caption);
    color: var(--color-text);
    margin: var(--space-xs) 0 0 0;
    flex-shrink: 0;
    font-style: italic;
}

/* ============================================================
   PAGES 58-59 : RÉSERVATION EXPÉRIENCE XR
   ============================================================ */

.page58 {
    min-height: var(--section-height);
    overflow: visible;
    background-color: var(--color-black);
    color: var(--color-white);
}
.page58__container {
    display: flex;
    flex-direction: column;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--slide-pad-x);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.page58__banner {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.page58__banner-title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    background-color: var(--color-violet);
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    margin: 0;
}
.page58__layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-2xl);
    align-items: start;
}
.page58__image-wrapper {
    margin-bottom: var(--space-md);
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}
.page58__image-wrapper--double {
    display: flex;
    gap: var(--space-xs);
}
.page58__image {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    aspect-ratio: 16 / 7;
}
.page58__image--half {
    width: 50%;
    object-fit: cover;
    aspect-ratio: auto;
}
.page58__badge-new {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background-color: var(--color-brand-gold);
    color: var(--color-gray-dark);
    font-family: var(--font-primary);
    font-size: var(--fs-caption);
    font-weight: 700;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: 4px;
}
.page58__status {
    color: var(--color-white);
    display: inline-block;
    font-size: var(--fs-caption);
    font-weight: 700;
    margin-bottom: var(--space-xs);
    padding: 0.15rem 0.6rem;
    border: 2px solid var(--color-white);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page58__reserve-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.page58__reserve-label {
    font-family: var(--font-primary);
    font-size: var(--fs-caption);
    color: var(--color-white);
}
.page58__experience-title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    margin: 0 0 var(--space-sm);
}
.page58__experience-desc {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: 1.7;
    margin: 0 0 var(--space-md);
}
.page58__duration {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    margin: 0 0 var(--space-xs);
}
.page58__langs {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    margin: 0 0 var(--space-md);
}
.page58__tarifs-title {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 700;
    margin: 0 0 var(--space-xs);
}
.page58__tarifs-list {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    padding-left: var(--space-md);
    margin: 0 0 var(--space-md);
    line-height: 1.8;
}
.page58__reserve-btn,
.page58__subscribe-btn {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--color-gray-dark);
    background-color: var(--color-brand-gold);
    border: 2px solid var(--color-brand-gold);
    padding: 0.6rem var(--space-lg);
    text-decoration: none;
    letter-spacing: 0.05em;
    border-radius: 4px;
    cursor: pointer;
}
.page58__coming-soon {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 700;
    margin: var(--space-md) 0 0;
    letter-spacing: 0.1em;
}
.page58__right {
    display: flex;
    align-items: flex-start;
}
.page58--newsletter-seule .page58__container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--section-height);
}
.page58--newsletter-seule .page58__newsletter {
    width: min(100%, 34rem);
}
.page58__newsletter {
    background-color: rgba(255, 255, 255, 0.12);
    padding: var(--space-lg);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
}
.page58__newsletter-title {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    margin: 0 0 var(--space-sm);
}
.page58__newsletter-text {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    margin: 0 0 var(--space-sm);
}
.page58__newsletter-list {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    padding-left: var(--space-md);
    margin: 0 0 var(--space-md);
    line-height: 1.8;
}
.page58__subscribe-btn {
    background-color: var(--color-brand-gold);
    border-color: var(--color-brand-gold);
    color: var(--color-gray-dark);
}

@media (max-width: 1024px) {
    .page58__layout {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .page58__right {
        max-width: 500px;
    }
}

@media (max-width: 480px) {
    .page58__image-wrapper--double {
        flex-direction: column;
    }

    .page58__image--half {
        width: 100%;
    }

    .page58__reserve-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   PAGE 60 : INFORMATIONS PRATIQUES
   ============================================================ */

.page60 {
    min-height: var(--section-height);
    overflow: visible;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    color: var(--color-white);
}
.page60__layout {
    display: grid;
    grid-template-columns: 55% 45%;
    height: 100%;
}
.page60__text {
    padding: var(--space-lg) var(--slide-pad-x);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.page60__section-title {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    margin: var(--space-md) 0 var(--space-xs);
    letter-spacing: 0.03em;
}
.page60__section-title:first-child {
    margin-top: 0;
}
.page60__checklist,
.page60__list {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    padding-left: 0;
    margin: 0 0 var(--space-sm-tight);
    line-height: 1.7;
    list-style: none;
}
.page60__checklist li::before {
    content: '✅';
    margin-right: var(--space-xs);
}
.page60__paragraph {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    line-height: 1.7;
    margin: 0 0 var(--space-xs);
}
.page60__visual {
    overflow: hidden;
}
.page60__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1);
}

@media (max-width: 768px) {
    .page60 {
        height: auto;
        min-height: var(--section-height);
    }
    .page60__layout {
        grid-template-columns: 1fr;
    }
    .page60__visual {
        min-height: 30vh;
    }
}

/* ============================================================
   PAGE 61 : VISITES PRIVÉES ET FAQ
   ============================================================ */

.page61 {
    min-height: var(--section-height);
    overflow: visible;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.page61__left {
    padding: var(--space-md) var(--slide-pad-x);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--color-white);
}
.page61__right {
    overflow: hidden;
}
.page61__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page61__mail-link {
    color: var(--color-white);
    background-color: var(--color-background-pink-readable);
    padding: 0.1rem 0.4rem;
    text-decoration: underline;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.page61__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-white);
    margin: 0 0 var(--space-xs);
}
.page61__intro {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-white);
    margin: 0 0 var(--space-sm-tight);
}
.page61__paragraph {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-white);
    line-height: 1.7;
    margin: 0 0 var(--space-sm-tight);
}
.page61__faq-title {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    color: var(--color-white);
    margin: var(--space-md) 0 var(--space-sm-tight);
}
.page61__faq {
    margin: 0;
    display: grid;
    gap: 0;
}
.page61__faq dt {
    position: relative;
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.4;
    margin: 0;
    padding: var(--space-xs) 0 var(--space-2xs) 1rem;
    border-top: 1px solid var(--border-white-subtle);
}
.page61__faq dt::before {
    content: '';
    position: absolute;
    top: var(--space-xs);
    bottom: var(--space-2xs);
    left: 0;
    width: 3px;
    background: var(--color-white);
}
.page61__faq dd {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-white);
    line-height: 1.6;
    margin: 0;
    padding: 0 0 var(--space-sm-tight) 1rem;
}
.page61 a,
.page61 a:visited {
    color: var(--color-white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.16em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.page61__contact-link,
.page61__contact-link:visited {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
}
.page61 a:hover,
.page61 a:focus-visible {
    color: var(--color-white);
}
.page61 a:focus-visible {
    outline-color: var(--color-white);
}
.page61__help {
    margin-top: var(--space-md);
    padding-top: var(--space-sm-tight);
    border-top: 1px solid var(--border-white-subtle);
}
.page61__help-title {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-subtitle);
    font-weight: 900;
    color: var(--color-white);
    margin: 0 0 var(--space-2xs);
}

@media (max-width: 768px) {
    .page61 {
        height: auto;
        min-height: var(--section-height);
        grid-template-columns: 1fr;
    }
    .page61__right {
        min-height: 40vh;
    }
}

/* ============================================================
   PAGE 62 : CONTACT
   ============================================================ */

.page62 {
    position: relative;
    min-height: var(--section-height);
    height: auto;
    overflow: hidden;
    background-color: var(--color-black); /* a11y : fond explicite pour contraste texte blanc sur image */
}
.page62__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page62__background-image,
.page62__background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Bouton play/pause video contact */
.page62__play-btn {
    position: absolute;
    bottom: calc(var(--space-md) + var(--safe-bottom));
    right: calc(var(--space-md) + var(--safe-right));
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-white);
    transition: background-color 0.2s ease;
}

.page62__play-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.page62__play-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* Paused (defaut) : triangle visible, barres masquees */
.page62__play-icon--playing { display: none; }
.page62__play-icon--paused { display: block; }

/* Playing : barres visibles, triangle masque */
.page62__play-btn--playing .page62__play-icon--playing { display: block; }
.page62__play-btn--playing .page62__play-icon--paused { display: none; }

.page62__container {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--color-white);
    padding: var(--slide-pad-y) var(--slide-pad-x);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.page62__container a,
.page62__container button,
.page62__container address {
    pointer-events: auto;
}

.page62__brand {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    letter-spacing: 0.3em;
    margin: 0 0 var(--space-md);
}
.page62__title {
    text-shadow: var(--shadow-text);
    font-family: var(--font-primary);
    font-size: var(--fs-slide-subtitle);
    font-weight: 400;
    letter-spacing: 0.2em;
    margin: 0 0 var(--space-md);
}
.page62__email {
    text-shadow: var(--shadow-text);
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    color: var(--color-white);
    letter-spacing: 0.05em;
    text-decoration: underline;
    margin-bottom: var(--space-lg);
}
.page62__address {
    text-shadow: var(--shadow-text);
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    font-style: normal;
    line-height: 1.7;
    text-align: center;
    margin-bottom: var(--space-lg);
}
.page62__logo {
    height: 3rem;
    object-fit: contain;
}

@media (max-width: 768px) {
    .page62 {
        height: auto;
        min-height: var(--section-height);
    }
}

/* ============================================================
   PAGE 57 : XR POUR LES ENTREPRISES - Corporate
   ============================================================ */

.page57 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-background-pink-readable); /* a11y : fallback pour outils de contraste */
    background: var(--gradient-background-pink-readable);
    position: relative;
}
.page57::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: url('../img/pages/page-57/page-57-image-2.jpg') center bottom / cover no-repeat;
    opacity: 0.4;
    z-index: 0;
}
.page57__container {
    background-color: inherit; /* a11y */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--slide-pad-y) var(--slide-pad-x);
    color: var(--color-white);
}
.page57__header {
    text-align: center;
    position: relative;
    margin-bottom: var(--space-sm);
    background-color: inherit; /* a11y : hérite fond rose pour outils de contraste */
}
.page57__main-title {
    background-color: var(--color-background-pink-readable); /* a11y */
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    letter-spacing: 0.1em;
    margin: 0;
}
.page57__separator {
    width: 60%;
    border: none;
    border-top: 2px solid var(--color-white);
    margin: var(--space-sm-tight) auto;
}
.page57__layout {
    background-color: inherit; /* a11y */
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}
.page57__subtitle {
    background-color: var(--color-background-pink-readable); /* a11y */
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    margin: 0 0 var(--space-sm);
}
.page57__paragraph {
    background-color: var(--color-background-pink-readable); /* a11y */
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    line-height: 1.7;
    margin: 0 0 var(--space-sm-tight);
}
.page57__tags {
    background-color: var(--color-background-pink-readable); /* a11y */
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    margin: 0 0 var(--space-sm);
}
.page57__photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}
.page57__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    min-height: 0;
}
.page57__nowrap {
    white-space: nowrap;
}
.page57__cta a {
    color: inherit;
    text-decoration: underline;
}
.page57__cta {
    background-color: var(--color-background-pink-readable); /* a11y */
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    font-weight: 700;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .page57 {
        height: auto;
        min-height: var(--section-height);
    }
    .page57__layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PAGE 56 : CHARLOTTE HENSCHEL - Galerie de tableaux
   ============================================================ */

.page56 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-background-pink-readable); /* a11y : fallback pour outils de contraste */
    background: var(--gradient-background-pink-readable);
    display: flex;
    flex-direction: column;
}
.page56__header {
    padding: var(--space-lg) var(--slide-pad-x) var(--space-sm);
    flex-shrink: 0;
}
.page56__title {
    font-family: var(--font-primary);
    font-size: var(--size-lg);
    font-weight: 900;
    color: var(--color-white);
    margin: 0;
}
.page56__content {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-sm);
    padding: 0 var(--slide-pad-x) var(--slide-pad-y);
}
.page56__content--without-paintings {
    grid-template-columns: 1fr;
}
.page56__paintings {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start; /* les tableaux suivent le titre au lieu d'etre centres dans la hauteur */
}
.page56__painting {
    max-height: 100%;
    object-fit: contain;
    object-position: top;
    display: block;
    flex: 1;
    min-width: 0;
}
.page56__bio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(1.1rem, 2vw, 1.75rem);
    padding: 1.5rem 2rem;
    background-color: var(--color-background-pink-readable); /* a11y : fond explicite pour contraste texte blanc */
}
.page56__bio p {
    font-family: var(--font-primary);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 0.005em;
    line-height: 1.65;
    max-width: 25rem;
    margin: 0;
    text-align: left;
    text-transform: none;
}
.page56__bio--solo {
    width: min(100%, 52rem);
    justify-self: center;
}
.page56__bio p:first-child {
    font-size: clamp(1.15rem, 1.75vw, 1.45rem);
    font-weight: 700;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .page56 {
        height: auto;
        min-height: var(--section-height);
    }
    .page56__content {
        grid-template-columns: 1fr;
    }
    .page56__paintings {
        flex-wrap: wrap;
    }
    .page56__bio {
        padding: 1.5rem 2rem;
    }
}

/* ============================================================
   PAGE 54 : TOULOUSE-LAUTREC - Mosaïque Montmartre
   ============================================================ */

.page54 {
    min-height: var(--section-height);
    overflow: hidden;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    display: flex;
    flex-direction: column;
}
.page54__mosaic {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 3px;
}
.page54__photo {
    overflow: hidden;
}
.page54__photo--large {
    grid-column: span 2;
}
.page54__photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page54__text {
    padding: var(--space-md) var(--slide-pad-x);
    color: var(--color-white);
    flex-shrink: 0;
}
.page54__paragraph {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    line-height: 1.7;
    margin: 0 0 var(--space-xs);
}

@media (max-width: 768px) {
    .page54 {
        height: auto;
        min-height: var(--section-height);
    }
    .page54__mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        min-height: 40vh;
    }
}
/* Export de la cliente (l1.jpg) : galerie justifiee de six photos entieres. La grille compte 600 colonnes fines ;
   chaque photo en occupe une part proportionnelle a son ratio natif, sur deux rangees de trois photos. */
.page54__mosaic {
    flex: none;
    grid-template-columns: repeat(600, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 0;
    align-items: start;
}
.page54__photo {
    padding: 1.5px;
}
.page54__photo--large {
    grid-column: auto;
}
.page54__photo-image {
    height: auto;
    object-fit: contain;
}
.page54__photo:nth-child(1) { grid-column: span 228; }
.page54__photo:nth-child(2) { grid-column: span 228; }
.page54__photo:nth-child(3) { grid-column: span 144; }
.page54__photo:nth-child(4) { grid-column: span 228; }
.page54__photo:nth-child(5) { grid-column: span 227; }
.page54__photo:nth-child(6) { grid-column: span 145; }
@media (max-width: 768px) {
    .page54__mosaic {
        grid-template-columns: repeat(600, minmax(0, 1fr));
        min-height: 0;
    }
    .page54__photo:nth-child(1) { grid-column: span 300; }
    .page54__photo:nth-child(2) { grid-column: span 300; }
    .page54__photo:nth-child(3) { grid-column: span 233; }
    .page54__photo:nth-child(4) { grid-column: span 367; }
    .page54__photo:nth-child(5) { grid-column: span 367; }
    .page54__photo:nth-child(6) { grid-column: span 233; }
}

/* ============================================================
   PAGE 53 : TOULOUSE-LAUTREC - Réalité mixte/Théâtre
   ============================================================ */

.page53 {
    min-height: var(--section-height);
    overflow: hidden;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    display: grid;
    grid-template-columns: 45% 55%;
}
.page53__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-lg) var(--slide-pad-x);
    color: var(--color-white);
    background-color: inherit; /* a11y : hérite du fond rose parent pour outils de contraste */
}
.page53__title {
    background-color: var(--color-background-pink-readable); /* a11y */
    font-family: var(--font-primary);
    font-size: var(--size-lg);
    font-weight: 900;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-2xs);
}
.page53__category {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    margin: 0;
}
.page53__description {
    background-color: inherit; /* a11y */
    text-shadow: var(--shadow-text);
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    line-height: 1.85;
    letter-spacing: 0.015em;
    max-width: 34rem;
    margin: 0;
}
.page53__description p {
    margin: 0 0 clamp(0.9rem, 1.4vw, 1.25rem);
}
.page53__description p:last-child {
    margin-bottom: 0;
}
#page-55 .page53__description p {
    margin-bottom: clamp(1.15rem, 1.8vw, 1.65rem);
}
#page-55 .page53__description p:last-child {
    margin-bottom: 0;
}
.page53__logos {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.9rem, 2vw, 1.75rem);
    max-width: 100%;
}
.page53__logo {
    flex: 0 1 auto;
    width: auto;
    height: 3.5rem;
    max-width: none;
    object-fit: contain;
}
.page53__right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
}
.page53__poster {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    box-shadow: var(--shadow-drop-heavy);
}
.page53__badge {
    position: absolute;
    top: calc(1rem + var(--safe-top));
    right: calc(1rem + var(--safe-right));
    background-color: var(--color-background-pink-readable);
    color: var(--color-white);
    padding: var(--space-2xs) 0.6rem;
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .page53 {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }
    .page53__right {
        min-height: 50vh;
    }
    .page53__description {
        line-height: 1.75;
        max-width: 30rem;
    }
    .page53__description p {
        margin-bottom: 0.75rem;
    }
    .page53__logos {
        gap: clamp(0.55rem, 3vw, 0.75rem);
    }
    .page53__logo {
        height: 3rem;
    }
}

.page53--export {
    height: var(--section-height);
    min-height: var(--section-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background-pink-readable);
}

.page53--export .page53__export-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .page53--export {
        height: auto;
        min-height: 0;
        padding: var(--space-xl) 0;
    }

    .page53--export .page53__export-image {
        height: auto;
    }
}

/* ============================================================
   PAGE 52 : MARILYN - Réalité mixte (concept art + lieu + specs)
   ============================================================ */

.page52 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
}
.page52__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
}
.page52__concept {
    position: relative;
    grid-row: 1 / -1;
    overflow: hidden;
}
.page52__concept-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page52__overlay {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    color: var(--color-white);
    background-color: rgba(0, 0, 0, 0.7);
    padding: var(--space-md) var(--space-lg);
    border-radius: 4px;
}
.page52__title {
    font-family: var(--font-primary);
    font-size: var(--size-lg);
    font-weight: 900;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-2xs);
    text-shadow: var(--shadow-text);
}
.page52__subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    margin: 0;
    text-shadow: var(--shadow-text);
}
.page52__venue {
    overflow: hidden;
}
.page52__venue-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page52__specs {
    padding: var(--space-md) var(--slide-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
}
.page52__spec-title {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    font-weight: 900;
    color: var(--color-gray-dark);
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-2xs);
}
.page52__spec-text {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    color: var(--color-gray-medium);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .page52 {
        height: auto;
        min-height: var(--section-height);
    }
    .page52__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    .page52__concept {
        min-height: 40vh;
    }
    .page52__venue {
        min-height: 25vh;
    }
}

.page52--export {
    height: var(--section-height);
    min-height: var(--section-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1ddc5;
}

.page52--export .page52__export-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .page52--export {
        height: auto;
        min-height: 0;
        padding: var(--space-xl) 0;
    }

    .page52--export .page52__export-image {
        height: auto;
    }
}

/* ============================================================
   PAGE 51 : MARILYN - Réalité mixte/Théâtre (texte + photo)
   ============================================================ */

.page51 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
    display: grid;
    grid-template-columns: 40% 60%;
}
.page51__left {
    padding: var(--space-lg) var(--slide-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page51__title {
    font-family: var(--font-primary);
    font-size: var(--size-lg);
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--color-brown);
    margin: 0 0 var(--space-2xs);
}
.page51__category {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    color: var(--color-brown);
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-md);
}
.page51__description {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-gray-medium);
    line-height: 1.7;
}
.page51__description p {
    margin: 0 0 var(--space-sm);
}
.page51__right {
    position: relative;
    overflow: hidden;
    background-color: var(--color-gray-dark);
}
.page51__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page51__quotes {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: clamp(0.5rem, 3vw, 2rem);
    left: 50%;
    text-align: right;
}
.page51__quote {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    color: var(--color-white);
    line-height: 1.5;
    margin: 0 0 var(--space-sm);
    text-shadow: var(--shadow-text);
}
.page51__quote strong {
    color: var(--color-brand-gold);
}

@media (max-width: 768px) {
    .page51 {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }
    .page51__right {
        min-height: 50vh;
    }
}

/* ============================================================
   PAGE 50 : MARILYN - Affiche spectacle
   ============================================================ */

.page50 {
    position: relative;
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-black);
}
.page50__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page50__background::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0.82) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0) 66%);
    pointer-events: none;
}
.page50__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page50--export {
    background-color: #f1ddc5;
}
.page50--export .page50__background {
    background-color: #f1ddc5;
}
.page50--export .page50__background::after {
    content: none;
}
.page50--export .page50__background-image {
    object-fit: contain;
    object-position: center;
}
.page50__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: var(--section-height);
    color: var(--color-white);
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.page50__title-group {
    position: relative;
    max-width: min(44rem, 100%);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    isolation: isolate;
}
.page50__title-group::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--space-xs)) calc(-1 * var(--space-sm));
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.page50__title {
    font-family: var(--font-primary);
    font-size: var(--size-3xl);
    font-weight: 800;
    line-height: 1;
    margin: 0 0 var(--space-xs);
    text-shadow: 0 3px 22px rgba(0, 0, 0, 0.96), 0 0 5px rgba(0, 0, 0, 0.9);
}
.page50__subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 var(--space-2xs);
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.96), 0 0 4px rgba(0, 0, 0, 0.9);
}
.page50__credit {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    font-weight: 800;
    margin: 0 0 0.2rem;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.96), 0 0 4px rgba(0, 0, 0, 0.9);
}
.page50__tags {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.96), 0 0 4px rgba(0, 0, 0, 0.9);
}
.page50__title.reveal {
    opacity: 1;
    transform: none;
}
.page50__logos {
    position: relative;
    align-self: flex-start;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm-tight);
    max-width: min(34rem, 100%);
    padding: 0.75rem 0.85rem;
    background-color: rgba(0, 0, 0, 0.58);
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
}
.page50__logo {
    height: clamp(2.65rem, 3vw, 3rem);
    max-width: 9rem;
    object-fit: contain;
    background-color: rgba(255, 255, 255, 0.94);
    padding: 0.45rem 0.75rem;
    border-radius: 3px;
    box-shadow: none;
    filter: contrast(1.08) saturate(1.04);
}

@media (max-width: 768px) {
    .page50 {
        height: auto;
        min-height: var(--section-height);
    }
    .page50__title-group {
        padding: var(--space-sm) var(--space-md);
    }
    .page50__logos {
        gap: var(--space-xs);
        padding: 0.75rem;
    }
}

/* ============================================================
   PAGE 49 : NI VUES NI CONNUES - Portraits de femmes
   ============================================================ */

.page49 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
}
.page49__portraits {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}
.page49__portrait {
    overflow: hidden;
}
.page49__portrait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page49__text {
    text-align: center;
    padding: var(--space-md) var(--slide-pad-x);
    flex-shrink: 0;
}
/* Demande de la cliente : « bien aligner la typo au debut des phrases ». Centrees une a une, les trois lignes
   commencaient chacune a un endroit different. Le bloc reste centre sous les portraits (colonne a la largeur de
   la ligne la plus longue), mais ses lignes partent du meme bord gauche. */
.page49__text {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    text-align: left;
}
.page49__tagline {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    color: var(--color-text-red);    /* RGAA AA : 4.86:1 sur blanc (fs-subtitle sans bold) */
    margin: 0 0 var(--space-2xs);
}
.page49__description {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-gray-medium);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .page49 {
        height: auto;
        min-height: var(--section-height);
    }
    .page49__portraits {
        grid-template-columns: repeat(3, 1fr);
        min-height: 40vh;
    }
}

/* ============================================================
   PAGE 48 : NI VUES NI CONNUES - Affiche série documentaire
   ============================================================ */

.page48 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-bg-navy);
    display: flex;
    flex-direction: column;
}
.page48__banner-top {
    position: relative;
    flex: 0 0 30%;
    overflow: hidden;
}
.page48__banner-bottom {
    position: relative;
    flex: 0 0 25%;
    overflow: hidden;
}
.page48__banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page48__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    padding: var(--space-sm) var(--slide-pad-x);
}
.page48__title {
    font-family: var(--font-primary);
    font-size: var(--fs-hero);
    font-weight: 400;
    margin: 0 0 var(--space-xs);
}
.page48__title strong {
    font-weight: 900;
}
/* Export de la cliente : « NI VUES » bleu, « NI CONNUES » rouge, capitales grasses. Aucune police fournie : Satoshi 900.
   Teintes eclaircies par rapport a l'export pour atteindre 3:1 sur le bandeau marine. */
.page48__title {
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-title-blue-on-navy);
}
.page48__title strong {
    color: var(--color-title-red-on-navy);
}
.page48__subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    margin: 0 0 var(--space-2xs);
}
.page48__subtitle--bold {
    font-weight: 700;
    font-size: var(--fs-subtitle);
    opacity: 1;
}
#page-48 .page48__tagline {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    color: var(--color-white);
    font-weight: 700;
    text-shadow: var(--shadow-text);
    margin: var(--space-2xs) 0 0;
}
.page48__logos {
    position: absolute;
    bottom: 1rem;
    left: var(--slide-pad-x);
    right: var(--slide-pad-x);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    max-width: 100%;
}
.page48__logo {
    height: 2.5rem;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .page48 {
        height: auto;
        min-height: var(--section-height);
    }
    .page48__banner-top {
        flex: 0 0 auto;
        min-height: 20vh;
    }
    .page48__banner-bottom {
        flex: 0 0 auto;
        min-height: 15vh;
    }
}

/* ============================================================
   PAGE 47 : DESSINE-MOI LE VENT - Détails + galerie + logos
   ============================================================ */

.page47 {
    min-height: var(--section-height);
    overflow: visible;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    display: flex;
    flex-direction: column;
}
.page47__layout {
    display: grid;
    grid-template-columns: 40% 60%;
    flex: 1;
    min-height: 0;
}
.page47__text {
    padding: var(--space-lg) var(--slide-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-white);
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable); /* a11y : fond explicite pour contraste texte blanc */
}
.page47__paragraph {
    background-color: var(--color-background-pink-readable); /* a11y : fond explicite pour contraste texte blanc */
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    line-height: 1.7;
    margin: 0 0 var(--space-sm-tight);
}
.page47__credit {
    background-color: var(--color-background-pink-readable); /* a11y : fond explicite pour contraste texte blanc */
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    color: var(--color-white);
    margin: 0 0 var(--space-2xs);
}
.page47__credit strong {
    background-color: var(--color-background-pink-readable); /* a11y : fond explicite pour contraste texte blanc */
}
.page47__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}
.page47__gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page47__gallery-image:first-child {
    grid-column: 1;
    grid-row: 1;
}
.page47__gallery-image:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / -1;
}
.page47__gallery-image:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}
.page47__logos {
    background-color: var(--color-white);
    padding: var(--space-sm-tight) var(--slide-pad-x);
    flex-shrink: 0;
}
.page47__logos-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.page47__logo {
    height: 2rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@media (max-width: 768px) {
    .page47 {
        height: auto;
        min-height: var(--section-height);
    }
    .page47__layout {
        grid-template-columns: 1fr;
    }
    .page47__gallery {
        min-height: 30vh;
    }
    .page47__logos-bar {
        gap: var(--space-sm);
    }
    .page47__logo {
        height: 1.5rem;
    }
}
/* Export de la cliente (dessine-moi-le-vent-2) : photos entieres. Les deux photos paysage etaient en
   object-fit: cover dans des cases portrait (55 % de rognage). Les colonnes suivent les ratios natifs
   (2 x 1490 x 857 empilees a gauche, 955 x 2467 a droite) : pile et portrait ont la meme hauteur. */
.page47__gallery {
    grid-template-columns: 2.22fr 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: start;
}
.page47__gallery-image {
    height: auto;
    object-fit: contain;
}
@media (max-width: 768px) {
    .page47__gallery {
        min-height: 0;
    }
}
/* Logos instables : hauteur fixe mais largeur d'attribut conservee, donc des boites de 205 a 353 px
   autour de dessins de 43 a 200 px et des ecarts irreguliers. La boite epouse maintenant le dessin. */
.page47__logo {
    width: auto;
}

/* ============================================================
   PAGE 46 : DESSINE-MOI LE VENT - Présentation projet
   ============================================================ */

.page46 {
    min-height: var(--section-height);
    overflow: hidden;
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    display: flex;
    flex-direction: column;
}
.page46__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--slide-pad-y) var(--slide-pad-x) 0;
    flex-shrink: 0;
}
.page46__brand {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.15em;
    margin: 0 0 var(--space-2xs);
}
.page46__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title-xl);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.3;
    margin: 0 0 var(--space-sm-tight);
}
.page46__vimeo-link {
    display: inline-block;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    text-decoration: underline;
    margin-bottom: var(--space-sm-tight);
}
.page46__stores-image {
    height: 1.8rem;
    object-fit: contain;
    display: block;
}
.page46__visual {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--slide-pad-x) var(--slide-pad-y);
}
.page46__visual-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .page46 {
        height: auto;
        min-height: var(--section-height);
    }
    .page46__visual {
        min-height: 40vh;
    }
}

/* ============================================================
   PAGE 44 : VOYAGE AUTOUR DE MOI - Détails projet
   ============================================================ */

.page44 {
    min-height: var(--section-height);
    overflow: visible;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
}
.page44__panoramic {
    flex: 0 0 50%;
    overflow: hidden;
}
.page44__panoramic-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page44__bottom {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}
.page44__photo {
    overflow: hidden;
}
.page44__photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page44__text {
    background: var(--gradient-background-pink-readable);
    background-color: var(--color-background-pink-readable);
    color: var(--color-white);
    padding: var(--space-lg) var(--slide-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page44__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    margin: 0 0 var(--space-sm-tight);
}
.page44__description {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    margin: 0 0 var(--space-sm);
}
.page44__tags {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    margin: 0 0 var(--space-sm);
}
.page44__awards {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    margin: 0;
}

@media (max-width: 768px) {
    .page44 {
        height: auto;
        min-height: var(--section-height);
    }
    .page44__bottom {
        grid-template-columns: 1fr;
    }
    .page44__panoramic {
        flex: 0 0 auto;
        min-height: 25vh;
    }
    .page44__photo {
        min-height: 25vh;
    }
}

/* ============================================================
   PAGE 43 : VOYAGE AUTOUR DE MOI - Affiche + logos
   ============================================================ */

.page43 {
    position: relative;
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-black);
}
.page43__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page43__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.7;
}
.page43__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    color: var(--color-white);
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.page43__awards {
    text-align: center;
    padding-top: var(--space-sm);
}
.page43__award-title {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-xs);
}
.page43__award-text {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    letter-spacing: 0.15em;
    line-height: 1.7;
    margin: 0;
}
.page43__title-group {
    text-align: center;
}
.page43__title {
    font-family: var(--font-primary);
    font-size: var(--fs-hero);
    font-weight: 900;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-2xs);
}
.page43__subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    letter-spacing: 0.1em;
    margin: 0;
}
.page43__logos {
    background-color: var(--color-white);
    padding: var(--space-sm-tight) var(--slide-pad-x);
    margin: 0 calc(-1 * var(--slide-pad-x));
    margin-bottom: calc(-1 * var(--slide-pad-y));
}
.page43__logos-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.page43__logo {
    height: 2rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.page43__logo--invert {
    filter: none;
    mix-blend-mode: normal;
}

@media (max-width: 768px) {
    .page43 {
        height: auto;
        min-height: var(--section-height);
    }
    .page43__award-text {
        letter-spacing: 0.05em;
    }
    .page43__logos-bar {
        gap: var(--space-sm);
    }
    .page43__logo {
        height: 1.5rem;
    }
}
/* Export de la cliente (voyage-autour-de-moi-1) : bandeau noir des prix, puis la photo de la troupe
   entiere, titre pose dessus, logos dessous. La photo etait un fond en object-fit: cover : 14 % de rognage
   a 1024 px, 53 % a 768 px, 69 % a 390 px. Elle dimensionne maintenant la section, contenue dans l'ecran. */
.page43 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}
.page43__container {
    display: contents;
    color: var(--color-white);
}
.page43__awards {
    grid-row: 1;
    padding: var(--space-sm) var(--slide-pad-x);
    color: var(--color-white);
}
.page43__award-title {
    margin-bottom: var(--space-2xs);
}
.page43__award-text {
    line-height: 1.4;
}
.page43__background {
    position: relative;
    inset: auto;
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    width: min(100%, calc((var(--section-height) - 15rem) * 3516 / 2083));
}
.page43__background-image {
    height: auto;
    object-fit: contain;
}
.page43__title-group {
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    position: relative;
    z-index: 1;
    padding: 0 var(--slide-pad-x);
    color: var(--color-white);
}
.page43__logos {
    grid-row: 3;
    margin: 0;
}
.page43__logo {
    width: auto;
}
@media (max-width: 768px) {
    .page43 {
        min-height: 0;
    }
    .page43__title {
        font-size: var(--fs-title);
    }
}

/* ============================================================
   PAGE 41 : EXPERIENCE XR - Trois bandes panoramiques
   ============================================================ */

.page41 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
}
.page41__strip {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.page41__strip--center {
    flex: 0 0 auto;
    height: 20%;
    border-top: 3px solid var(--color-brand-pink);
    border-bottom: 3px solid var(--color-brand-pink);
}
.page41__strip--center .page41__image {
    width: 50%;
    object-fit: cover;
}
.page41__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .page41 {
        height: auto;
        min-height: var(--section-height);
    }
    .page41__strip {
        min-height: 20vh;
    }
    .page41__strip--center {
        height: auto;
        min-height: 15vh;
    }
}

/* ============================================================
   PAGE 40 : XR 360 - Photo casque VR + bandeau specs
   ============================================================ */

.page40 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
    display: grid;
    grid-template-columns: 38% 62%;
}
.page40__left {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.page40__header {
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--slide-pad-x);
}
.page40__title {
    font-family: var(--font-primary);
    font-size: var(--fs-hero);
    font-weight: 900;
    margin: 0;
    color: var(--color-indigo);
}
.page40__badge {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 400;
    color: var(--color-indigo-light);
    margin-left: var(--space-xs);
}
.page40__info {
    background-color: var(--color-indigo);
    color: var(--color-white);
    padding: var(--space-md) var(--slide-pad-x);
    flex-shrink: 0;
}
.page40__description {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-white);
    margin: 0 0 var(--space-sm);
}
.page40__specs {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.page40__spec-title {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 0.2rem;
}
.page40__spec-detail {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    color: var(--color-white);
    margin: 0;
    line-height: 1.7;
}
.page40__right {
    position: relative;
    overflow: hidden;
}
.page40__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page40__credit {
    position: absolute;
    bottom: calc(0.5rem + var(--safe-bottom));
    right: calc(1.5rem + var(--safe-right));
    font-size: var(--fs-credit);
    color: var(--color-gray-light);
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .page40 {
        height: auto;
        min-height: var(--section-height);
        grid-template-columns: 1fr;
    }
    .page40__right {
        min-height: 50vh;
    }
    .page40__left {
        order: 2;
    }
    .page40__right {
        order: 1;
    }
    .page40__specs {
        gap: var(--space-sm-tight);
    }
}

/* ============================================================
   PAGE 39 : LA SERIE MARILYN - Numero 5 + photo portrait bleu
   ============================================================ */

.page39 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
    display: grid;
    grid-template-columns: 40% 3% 57%;
}
.page39__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.page39__number {
    font-family: var(--font-primary);
    font-size: var(--fs-hero);
    font-weight: 400;
    color: var(--color-indigo-light);
    line-height: 1.3;
    margin-bottom: var(--space-2xs);
}
.page39__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title-xl);
    font-weight: 900;
    color: var(--color-indigo);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin: 0;
}
.page39__subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    color: var(--color-indigo-light);
    margin: 0.2rem 0 0;
}
.page39__separator {
    width: 2.5rem;
    border: none;
    border-top: 2px solid var(--color-indigo);
    margin: var(--space-md) 0;
}
.page39__description {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-gray-medium);
    line-height: 1.7;
    margin: 0;
    max-width: min(280px, 85vw);
}
.page39__format {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    font-style: italic;
    color: var(--color-gray-medium);
    margin: 0.2rem 0 0;
}
.page39__selection-title {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    font-weight: 700;
    color: var(--color-gray-medium);
    margin: var(--space-sm) 0 0.2rem;
}
.page39__selection-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    font-style: italic;
    color: var(--color-gray-medium);
    line-height: 1.7;
    max-width: min(280px, 85vw);
}
.page39__stripe {
    background-color: var(--color-indigo-light);
}
.page39__right {
    background-color: var(--color-indigo-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.page39__photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .page39 {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }
    .page39__stripe {
        height: 4px;
    }
    .page39__right {
        min-height: 50vh;
    }
}

/* ============================================================
   PAGE 38 : LE QUIZ MARILYN - Categorie F + mockup iPhone
   ============================================================ */

.page38 {
    min-height: var(--section-height);
    overflow: hidden;
    display: grid;
    grid-template-columns: 35% 65%;
}
.page38__left {
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--slide-pad-y) var(--slide-pad-x);
    position: relative;
}
.page38__left::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background-color: var(--color-brand-gold);
    z-index: 0;
}
.page38__left > * {
    position: relative;
    z-index: 1;
}
.page38__category {
    margin-bottom: var(--space-lg);
}
.page38__category-letter {
    font-family: var(--font-primary);
    font-size: var(--size-3xl);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page38__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0;
}
.page38__subtitle {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    color: var(--color-text-gold-darker);
    margin: 0;
}
.page38__right {
    background-color: var(--color-bg-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}
.page38__phone {
    max-width: 100%;
    max-height: 90%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .page38 {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }
    .page38__left {
        padding: var(--space-lg) var(--slide-pad-x);
    }
    .page38__right {
        min-height: 50vh;
    }
}

/* ============================================================
   PAGE 37 : L'ESTRADE MARILYN - Categorie E + photo visiteur
   ============================================================ */

.page37 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-brand-gold);
    display: grid;
    grid-template-columns: 35% 65%;
}
.page37__left {
    display: flex;
    align-items: center;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.page37__title-group {
    display: flex;
    flex-direction: column;
}
.page37__category-arrow {
    font-size: var(--fs-title);
    color: var(--color-text-gold-darker);
    margin: 0 0 var(--space-2xs);
}
.page37__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0;
}
.page37__letter {
    font-family: var(--font-primary);
    font-size: var(--fs-hero);
    color: var(--color-text-gold-dark);
}
/* Export de la cliente : le E tient dans une gouttiere a gauche, sous la fleche. En ligne dans le titre,
   deux fois plus gros que lui, il decalait « Marilyn » de 27 a 50 px par rapport aux trois autres lignes. */
.page37__title-group {
    display: grid;
    grid-template-columns: calc(var(--fs-title) * 1.08) 1fr;
    column-gap: var(--space-2xs);
    align-items: start;
    position: relative;
}
.page37__category-arrow {
    margin: 0;
    line-height: 1.3;
}
.page37__letter {
    position: absolute;
    left: 0;
    top: calc(var(--page37-corps, var(--fs-title)) * 1.3);
    font-size: calc(var(--page37-corps, var(--fs-title)) * 1.7);
    line-height: 1;
}
/* Colonne de 35 % : le corps suit la largeur pour garder « Avec ou sans » sur une ligne (quatre lignes, comme l'export). */
@media (min-width: 769px) {
    .page37__title-group {
        --page37-corps: min(var(--fs-title), 2.9vw);
        grid-template-columns: calc(var(--page37-corps) * 1.08) 1fr;
    }
    .page37__title,
    .page37__category-arrow {
        font-size: var(--page37-corps);
    }
}
.page37__right {
    position: relative;
    overflow: hidden;
    background-color: var(--color-black);
}
.page37__photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.page37__credit {
    position: absolute;
    bottom: calc(1rem + var(--safe-bottom));
    right: calc(1.5rem + var(--safe-right));
    font-size: var(--fs-caption);
    color: var(--color-white);
    letter-spacing: 0.02em;
    text-shadow: var(--shadow-text);
}

@media (max-width: 768px) {
    .page37 {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }
    .page37__left {
        padding: var(--space-lg) var(--slide-pad-x);
    }
    .page37__right {
        min-height: 50vh;
    }
}

/* ============================================================
   PAGE 36 : EXPERIENCES INTERACTIVES - Categorie E + galerie 3 photos
   ============================================================ */

.page36 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-brand-gold);
    display: flex;
    flex-direction: column;
}
.page36__header {
    padding: var(--space-md) var(--slide-pad-x) var(--space-xs);
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}
.page36__category-letter {
    font-family: var(--font-primary);
    font-size: var(--size-3xl);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page36__category-title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.page36__gallery {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--slide-pad-x) var(--space-md);
}
.page36__photo--large {
    grid-row: 1 / -1;
}
.page36__photo {
    overflow: hidden;
    border-radius: 2px;
}
.page36__photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page36__photo--medium,
.page36__photo--small {
    grid-column: 2;
    border: 4px solid var(--color-white);
    border-radius: 4px;
}

@media (max-width: 768px) {
    .page36 {
        height: auto;
        min-height: var(--section-height);
    }
    .page36__gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .page36__photo--large {
        grid-column: 1 / -1;
        min-height: 30vh;
    }
    .page36__photo--medium,
    .page36__photo--small {
        min-height: 25vh;
    }
}
/* Export de la cliente (experience-interactive-1) : trois photos entieres. La grande photo etait en
   object-fit: cover dans une case haute et perdait 81 % de sa surface. Composition calee sur l'export
   (754 x 424 sous le titre) : grande photo a gauche, les deux portraits dans un cadre blanc qui la chevauche. */
.page36 {
    align-items: center;
    background: linear-gradient(to bottom, var(--color-white) 52%, var(--color-brand-gold) 52%);
}
.page36__header {
    align-self: stretch;
}
.page36__gallery {
    flex: none;
    display: block;
    position: relative;
    box-sizing: content-box;
    width: min(calc(100% - 2 * var(--slide-pad-x)), calc((var(--section-height) - 11rem) * 754 / 424));
    aspect-ratio: 754 / 424;
    padding: 0;
    margin-bottom: var(--space-md);
}
.page36__photo {
    position: absolute;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.page36__photo-image {
    height: auto;
    object-fit: contain;
}
.page36__photo--large { top: 0; left: 0; width: 82.5%; }
.page36__photo--medium,
.page36__photo--small {
    top: 4.7%;
    background-color: var(--color-white);
}
.page36__photo--medium { left: 48.5%; width: 25.55%; padding: 1.6% 1% 1.6% 2.25%; }
.page36__photo--small { left: 74.05%; width: 25.95%; padding: 1.6% 1.7% 1.6% 1%; }
@media (max-width: 768px) {
    .page36__gallery {
        display: grid;
        /* colonnes proportionnelles aux ratios natifs (701 x 1235 et 700 x 1180) : portraits de meme hauteur */
        grid-template-columns: 0.5676fr 0.5932fr;
        gap: var(--space-xs);
        aspect-ratio: auto;
        width: calc(100% - 2 * var(--slide-pad-x));
    }
    .page36__photo {
        position: static;
        width: auto;
        min-height: 0;
        padding: 0;
    }
    .page36__photo--large {
        grid-column: 1 / -1;
    }
    .page36__photo--medium { grid-column: 1; }
    .page36__photo--small { grid-column: 2; }
}

/* ============================================================
   PAGE 35 : INTERVIEW AMY GREENE - Categorie D + photo portrait
   ============================================================ */

.page35 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-brand-gold);
    display: grid;
    grid-template-columns: 25% 75%;
}
.page35__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page35__category {
    padding: var(--space-md) var(--slide-pad-x);
}
.page35__category-letter {
    font-family: var(--font-primary);
    font-size: var(--size-3xl);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page35__category-title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.page35__caption {
    padding: var(--space-sm) var(--slide-pad-x) var(--space-md);
}
.page35__caption-label {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    color: var(--color-text-gold-darker);
    margin: 0;
}
.page35__caption-name {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    font-weight: 700;
    color: var(--color-text-gold-darker);
    margin: 0;
}
.page35__right {
    overflow: hidden;
    position: relative;
}
.page35__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page35__overlay {
    position: absolute;
    bottom: 15%;
    left: 10%;
    text-align: left;
    color: var(--color-white);
    background-color: var(--shadow-overlay-light);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
}
.page35__overlay-name {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: 0.3em;
    margin: 0 0 var(--space-xs);
    text-shadow: 0 2px 8px var(--shadow-overlay-medium);
}
.page35__overlay-desc {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-body);
    margin: 0;
    text-shadow: 0 1px 4px var(--shadow-overlay-medium);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .page35 {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }
    .page35__right {
        min-height: 50vh;
    }
}
/* Export de la cliente (interviews-2) : titre, photo entiere en pleine largeur, legende dessous a gauche,
   aplat jaune a gauche. La photo etait en object-fit: cover dans une colonne : 43 a 64 % de rognage. */
.page35 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--slide-pad-y) var(--slide-pad-x);
    background: linear-gradient(to right, var(--color-brand-gold) 32%, var(--color-white) 32%);
}
.page35__left {
    display: contents;
}
.page35__category {
    order: 1;
    padding: 0 0 var(--space-sm);
}
.page35__right {
    order: 2;
    overflow: visible;
    min-height: 0;
    width: min(100%, calc((var(--section-height) - 2 * var(--slide-pad-y) - 17rem) * 2521 / 1114));
}
.page35__photo {
    height: auto;
    object-fit: contain;
}
.page35__caption {
    order: 3;
    padding: var(--space-xs) 0 0;
}
@media (max-width: 768px) {
    .page35__right {
        min-height: 0;
    }
}

/* ============================================================
   QUIZ MARILYN (issue #31) : lien vers le quiz externe et images des questions 1, 4 et 6
   ============================================================ */
.quiz-jouer {
    background-color: var(--color-white);
    color: var(--color-text);
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.quiz-jouer__title,
.quiz-jouer__subtitle {
    font-family: var(--font-primary);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-gold);
    margin: 0 0 var(--space-xs);
}
.quiz-jouer__title {
    font-size: var(--fs-title);
}
.quiz-jouer__subtitle {
    font-size: var(--fs-subtitle);
    margin-top: var(--space-lg);
}
.quiz-jouer__text {
    font-size: var(--fs-body);
    margin: 0 0 var(--space-sm);
}
.quiz-jouer__action {
    margin: 0;
}
.quiz-jouer__lien {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-text-gold);
    color: var(--color-white);
    font-weight: 700;
    text-decoration: underline;
}
.quiz-jouer__lien-note {
    font-weight: 400;
    margin-left: 0.4em;
}
/* Galerie justifiee : colonnes proportionnelles aux ratios natifs (deux portraits 810 x 1440, un paysage 850 x 567),
   bornee pour ne jamais agrandir une image au-dela de sa definition. */
.quiz-jouer__gallery {
    display: grid;
    grid-template-columns: 0.5625fr 0.5625fr 1.5fr;
    gap: var(--space-sm);
    align-items: start;
    max-width: 1500px;
}
.quiz-jouer__figure {
    margin: 0;
}
.quiz-jouer__image {
    width: 100%;
    height: auto;
    display: block;
}
.quiz-jouer__caption {
    font-size: var(--fs-caption);
    font-style: italic;
    margin-top: var(--space-2xs);
}
@media (max-width: 768px) {
    .quiz-jouer__gallery {
        grid-template-columns: 1fr 1fr;
    }
    .quiz-jouer__figure--paysage {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   INTERVIEWS EN VIDEO (issue #29) : deux lecteurs YouTube 16:9, commandes natives
   ============================================================ */
.interviews-videos {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.interviews-videos__title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 var(--space-md);
}
.interviews-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}
.interviews-videos__name {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 700;
    margin: 0 0 var(--space-xs);
}
.interviews-videos__player {
    aspect-ratio: 16 / 9;
}
.interviews-videos__player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.interviews-videos__credit {
    font-size: var(--fs-caption);
    font-style: italic;
    margin: var(--space-xs) 0 0;
}
@media (max-width: 768px) {
    .interviews-videos__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   PAGE 34 : INTERVIEWS - Lettre D + deux photos panoramiques
   ============================================================ */

.page34 {
    overflow: hidden;
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
}
.page34__header {
    background-color: var(--color-brand-gold);
    padding: var(--space-md) var(--slide-pad-x) var(--space-sm);
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}
.page34__category-letter {
    font-family: var(--font-primary);
    font-size: var(--size-3xl);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page34__category-title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.page34__interview {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.page34__photo-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.page34__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page34__caption {
    background-color: var(--color-brand-gold);
    padding: 0.6rem var(--slide-pad-x);
    flex-shrink: 0;
}
.page34__caption-label {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-small);
    color: var(--color-text-gold-darker);
    margin: 0;
}
.page34__caption-name {
    font-family: var(--font-primary);
    font-size: var(--fs-slide-meta);
    font-weight: 700;
    color: var(--color-text-gold-darker);
    margin: 0;
}
.page34__caption-name a {
    color: var(--color-text-gold-darker);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .page34 {
        height: auto;
        min-height: var(--section-height);
    }
    .page34__photo-wrapper {
        min-height: 25vh;
    }
}

/* ============================================================
   PAGE 33 : PODCASTS - Categorie + screenshot + photo
   ============================================================ */

.page33 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
}
.page33__layout {
    display: grid;
    grid-template-columns: 45% 55%;
    height: 100%;
}
.page33__left {
    display: flex;
    flex-direction: column;
}
.page33__category {
    background-color: var(--color-brand-gold);
    padding: var(--space-md) var(--slide-pad-x);
}
.page33__category-letter {
    font-family: var(--font-primary);
    font-size: var(--size-3xl);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page33__category-title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.page33__podcast {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    background-color: var(--color-white);
    overflow: hidden;
}
.page33__player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    flex-shrink: 0;
}
.page33__playlist-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}
.page33__episodes {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.page33__episode-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: var(--space-xs);
    border: none;
    border-radius: 6px;
    background-color: var(--color-gray-lightest);
    color: var(--color-gray-dark);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s;
}
.page33__episode-btn:hover,
.page33__episode-btn:focus-visible {
    background-color: var(--color-brand-gold);
    color: var(--color-text-gold-darker);
    outline: none;
}
.page33__episode--active .page33__episode-btn {
    background-color: var(--color-brand-gold);
    color: var(--color-text-gold-darker);
}
/* Quand l'episode est actif, retablir l'opacite du meta pour preserver le
   contraste WCAG AA (#5C4200 sur #E8C84A = 5.34:1, l'opacity 0.7 le degrade
   a 3.12:1 et casse le critere 1.4.3) */
.page33__episode--active .page33__episode-meta {
    opacity: 1;
}
.page33__episode-thumb {
    width: 130px;
    height: 73px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.page33__episode-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.page33__episode-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.page33__episode-meta {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.page33__right {
    overflow: hidden;
}
.page33__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .page33__layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }
    .page33__podcast {
        padding: 0.75rem;
    }
    .page33__episode-thumb {
        width: 90px;
        height: 51px;
    }
    .page33 .media-transcript {
        width: calc(100% - 90px - 0.75rem - (var(--space-xs) * 2));
    }
    .page33__episode-title {
        font-size: 0.85rem;
    }
    .page33__episode-meta {
        font-size: 0.7rem;
    }
    .page33__right {
        max-height: 50vw;
    }
}

/* ============================================================
   PAGE 32 : COMPOSITION ELECTROACOUSTIQUE 2 - Images + bandeau categorie
   ============================================================ */

.page32 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
    display: grid;
    grid-template-rows: 1fr auto 1fr;
}
.page32__top,
.page32__bottom {
    overflow: hidden;
}
.page32__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page32__category {
    background-color: var(--color-brand-gold);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm-tight) var(--slide-pad-x);
}
.page32__category-letter {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page32__category-text {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .page32 {
        height: auto;
        min-height: var(--section-height);
    }
}
/* Export de la cliente : grande photo entiere sur fond blanc, mordant sur l'aplat jaune,
   titre et compositeur, puis bandeau photo (3138 x 582) entier. Les deux cases heritaient de
   object-fit: cover dans des rangees egales : le bandeau perdait 58 % de sa surface. */
.page32 {
    grid-template-rows: auto auto auto;
    align-content: center;
    padding: var(--slide-pad-y) var(--slide-pad-x);
    background: linear-gradient(to bottom, var(--color-white) 40%, var(--color-brand-gold) 40%);
}
.page32__top {
    padding-inline: clamp(0rem, 2vw, 2rem);
}
.page32__image {
    height: auto;
    object-fit: contain;
}
.page32__category {
    background-color: transparent;
    padding-inline: 0;
    align-items: flex-start;
}
.page31__category-title {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}
.page31__category-textes,
.page32__category-textes {
    display: flex;
    flex-direction: column;
}
.page31__composer,
.page32__composer {
    font-family: var(--font-primary);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-text-gold-darker);
}

/* ============================================================
   PAGE 31 : COMPOSITION ELECTROACOUSTIQUE - Categorie + galerie (archetype K variante)
   ============================================================ */

.page31 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
}
.page31__layout {
    display: grid;
    grid-template-columns: 30% 70%;
    height: 100%;
}
.page31__category {
    background-color: var(--color-brand-gold);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-lg) var(--slide-pad-x);
}
.page31__category-letter {
    font-family: var(--font-primary);
    font-size: var(--size-4xl);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page31__category-title {
    font-family: var(--font-primary);
    font-size: var(--fs-subtitle);
    font-weight: 900;
    color: var(--color-text-gold-darker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.page31__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
}
.page31__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .page31__layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }
    .page31__gallery {
        grid-template-columns: 1fr;
    }
    .page31__category {
        padding: var(--space-md) var(--slide-pad-x);
    }
}

/* ============================================================
   PAGE 30 : IA MILTON GREENE 4 - Deux images + titre + credit (archetype J + C)
   ============================================================ */

.page30 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
}
.page30__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.page30__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    flex: 1;
    min-height: 0;
    align-items: center;
}
.page30__image-block {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    justify-content: center;
}
.page30__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .page30__grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}
/* Export de la cliente : deux photos carrees de meme taille, cote a cote, legende sous la premiere.
   Le cote du carre est limite par la demi-largeur et par la hauteur d'ecran disponible (titre et legende deduits) ;
   la seconde photo (422 px) n'est plus bridee a sa taille native. */
.page30__container {
    height: auto;
    min-height: var(--section-height);
}
.page30__grid {
    --page30-cote: min(calc((100% - var(--space-lg)) / 2), calc(var(--section-height) - 2 * var(--slide-pad-y) - 9rem));
    grid-template-columns: repeat(2, var(--page30-cote));
    justify-content: center;
    align-content: center;
    align-items: start;
}
.page30__image-block {
    display: block;
    height: auto;
}
.page30__image {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
}
@media (max-width: 600px) {
    .page30__grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

/* ============================================================
   PAGE 26 : PHOTOGRAPHIE MARILYN AU DINER - Image centree + credit (archetype C)
   ============================================================ */

.page26 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
}
.page26__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.page26__image-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page26__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.page26__credit {
    font-size: var(--fs-caption);
    color: var(--color-text);
    margin: var(--space-xs) 0 0 0;
}
/* Photo et legende dans une meme colonne, dimensionnee sur la photo (1177 x 790) :
   la legende part toujours du bord gauche de la photo, a toutes les largeurs. */
.page26__container {
    display: grid;
    grid-template-columns: min(100%, calc((var(--section-height) - 2 * var(--slide-pad-y) - 3rem) * 1177 / 790));
    justify-content: center;
    align-content: center;
    height: auto;
    min-height: var(--section-height);
}
.page26__image-wrapper {
    display: block;
}
.page26__image {
    width: 100%;
    height: auto;
    max-height: none;
}
.page26__credit {
    font-style: italic;
}

/* ============================================================
   PAGE 25 : PHOTOGRAPHIES - Panoramique + galerie + categorie (archetype K)
   ============================================================ */

.page25 {
    min-height: var(--section-height);
    overflow: hidden;
    background-color: var(--color-white);
    display: grid;
    grid-template-rows: 30% 1fr;
}

/* Bandeau panoramique */
.page25__panoramic {
    position: relative;
    overflow: hidden;
    background-color: var(--color-black); /* a11y : fond explicite pour contraste credit blanc sur image */
}
.page25__panoramic-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page25__panoramic-credit {
    position: absolute;
    top: calc(0.5rem + var(--safe-top));
    right: calc(1.5rem + var(--safe-right));
    font-size: var(--fs-caption);
    color: var(--color-white);
    letter-spacing: 0.02em;
    text-shadow: var(--shadow-text);
}

/* Zone basse : galerie + categorie */
.page25__bottom {
    display: grid;
    grid-template-columns: 65% 35%;
    overflow: hidden;
}

/* Galerie : deux images cote a cote */
.page25__gallery {
    overflow: hidden;
}
.page25__gallery-figure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: var(--space-xs);
    height: 100%;
    margin: 0;
    padding: var(--space-sm) var(--space-sm) 0 0;
    overflow: hidden;
}
.page25__gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page25__gallery-caption {
    grid-column: 1 / -1;
    font-size: var(--fs-caption);
    color: var(--color-text);
    padding: var(--space-xs) 0;
}

/* Bloc categorie (fond dore + lettre decorative) */
.page25__category {
    background-color: var(--color-brand-gold);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-lg) var(--slide-pad-x);
}
.page25__category-letter {
    font-family: var(--font-primary);
    font-size: var(--size-4xl);
    color: var(--color-text-gold-dark);
    line-height: 1.3;
}
.page25__category-title {
    font-family: var(--font-primary);
    font-size: var(--fs-title);
    font-weight: 900;
    color: var(--color-text-gold-darker);    /* 5.80:1 sur gold — WCAG AA */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}
.page25__category-arrow {
    margin-right: var(--space-xs);
}

/* Responsive mobile */
@media (max-width: 768px) {
    /* Une colonne : les rangees suivent leur contenu, sinon le bloc categorie recouvre la galerie */
    .page25 {
        grid-template-rows: auto auto;
    }
    .page25__panoramic {
        height: 25vh;
    }
    .page25__bottom {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: auto;
    }
    .page25__gallery-figure {
        grid-template-columns: 1fr;
        padding: var(--space-sm);
    }
    .page25__category {
        padding: var(--space-md) var(--slide-pad-x);
    }
}

/* Ordinateur et tablette large : composition de l'export de la cliente (842 x 595).
   Panoramique entier, bande jaune a gauche (0 -> 32 %), deux photos carrees entieres
   decalees a droite (14 -> 89 %), legende sous la premiere, lettre et titre sur une ligne. */
@media (min-width: 769px) {
    .page25 {
        grid-template-rows: auto 1fr;
    }
    .page25__panoramic-image {
        height: auto;
        aspect-ratio: 3000 / 619;
    }
    .page25__bottom {
        display: block;
        overflow: visible;
        background: linear-gradient(90deg, var(--color-brand-gold) 0, var(--color-brand-gold) 32%, transparent 32%);
        padding: var(--space-sm) 0 var(--space-md);
    }
    .page25__gallery {
        overflow: visible;
        margin-left: 14%;
        width: 75%;
    }
    .page25__gallery-figure {
        grid-template-rows: auto auto;
        gap: var(--space-xs) 2%;
        height: auto;
        padding: 0;
        overflow: visible;
    }
    .page25__gallery-image {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .page25__gallery-caption {
        grid-column: 1 / 2;
        font-style: italic;
        padding: var(--space-xs) 0 0;
    }
    .page25__category {
        background-color: transparent;
        flex-direction: row;
        justify-content: flex-start;
        align-items: baseline;
        gap: var(--space-md);
        padding: var(--space-xs) 0 0 8%;
    }
    .page25__category-letter {
        line-height: 1;
    }
}

/* ============================================================
   PAGE 23 : INSTALLATION INTERACTIVE - Volet 3 (pattern page 20)
   ============================================================ */

.page23 {
    overflow: hidden;
    background-color: var(--color-white);
    position: relative;
}
.page23__gold-band {
    position: absolute;
    top: 0;
    left: 0;
    width: 12%;
    height: 100%;
    background: linear-gradient(180deg, var(--color-gold-gradient-start) 0%, var(--color-gold-gradient-end) 100%);
    z-index: 1;
}
.page23__gold-band::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 500%;
    height: 8%;
    background: linear-gradient(90deg, var(--color-gold-gradient-start) 0%, var(--color-gold-gradient-end) 50%, transparent 100%);
}
.page23__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page23__overlay {
    position: absolute;
    bottom: 10%;
    left: 2%;
    z-index: 2;
}
.page23__number {
    font-size: var(--size-4xl);
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.3;
    display: block;
    text-shadow: var(--shadow-text);
}
.page23__title {
    font-size: var(--fs-title-xl);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1.5;
    margin: var(--space-2xs) 0 0;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3rem;
    text-shadow: var(--shadow-text);
}

/* ============================================================
   PAGE 21 : DOUBLE PLANCHE BD (archetype J)
   ============================================================ */

.page21 {
    overflow: hidden;
    background-color: var(--color-white);
}

.page21__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: var(--section-height);
}

.page21__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ============================================================
   RESPONSIVE - PAGES 5, 6, 7
   ============================================================ */

@media (max-width: 1024px) {
    .page5__image-wrapper {
        width: 95%;
    }
}

@media (max-width: 768px) {
    .page5__header {
        flex-direction: column;
        gap: var(--grid-gap-sm);
        padding: var(--slide-pad-y) var(--slide-pad-x) 0;
    }

    .page5__title {
        font-size: var(--fs-subtitle);
    }

    .page5__badge {
        align-self: flex-start;
        font-size: var(--fs-credit);
        padding: 0.4rem 0.6rem;
    }

    .page5__image-wrapper {
        width: 100%;
        max-width: none;
        padding: 0 var(--slide-pad-x);
        flex: 1;
        min-height: 0;
    }

    .page5__image {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .page5__footer {
        padding: var(--space-xs) var(--slide-pad-x);
    }

    .page5__subtitle {
        font-size: var(--fs-credit);
    }

    /* Page 6 - Grid empile */
    .page6__main {
        grid-template-columns: 1fr;
    }

    .page6__header {
        padding: var(--slide-pad-y) var(--slide-pad-x) 0;
    }

    .page6__title {
        font-size: var(--fs-subtitle);
    }

    .page6__badge {
        font-size: var(--fs-credit);
        padding: 0.4rem 0.6rem;
    }

    .page6__image-wrapper {
        max-height: 40vh;
        min-height: 0;
    }

    .page6__image {
        width: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .page6__section-title {
        font-size: var(--fs-slide-small);
    }

    .page6__section-text {
        font-size: var(--fs-slide-meta);
    }
}

/* ============================================================
   RESPONSIVE - PAGES 3, 4
   ============================================================ */
@media (max-width: 1200px) {
    .page3__container {
        grid-template-columns: 1fr 1fr;
    }

    .page3__container--inverted {
        grid-template-columns: 40% 60%;
    }
}

@media (max-width: 1024px) {
    /* Garder 2 colonnes, adapter les proportions */
    .page3__container {
        grid-template-columns: 55% 45%;
    }

    .page3__container--inverted {
        grid-template-columns: 45% 55%;
    }

    /* Scroll interne sur le texte si necessaire */
    .page3__left {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        overscroll-behavior: contain;
    }

    .page3__right--text .page3__left {
        overflow-y: auto;
        min-height: 0;
    }

    .page3__header h2 {
        font-size: var(--fs-body);
        line-height: var(--line-title);
        margin-bottom: 0.5rem;
    }

    .page3__header {
        margin-bottom: var(--space-sm-tight);
    }

    .page3__intro {
        margin-bottom: var(--space-sm-tight);
    }

    .page3__intro p {
        font-size: var(--fs-caption);
        margin-bottom: var(--space-2xs);
        line-height: var(--line-reading);
    }

    .page3__section-title {
        font-size: var(--fs-caption);
        margin: var(--space-xs) 0 var(--space-sm-tight) 0;
    }

    .page3__project {
        margin-bottom: var(--space-sm);
    }

    .page3__project-title {
        font-size: clamp(1rem, 1.4vw, 1.16rem);
        margin-bottom: 0.45rem;
    }

    .page3__project-subtitle {
        font-size: var(--fs-credit);
        margin-bottom: 0.75rem;
        line-height: 1.5;
    }

    .page3__project-meta {
        font-size: var(--fs-credit);
        margin: 0.15rem 0;
        line-height: 1.5;
    }

    .page3__project-link {
        font-size: var(--fs-credit);
        margin-top: var(--space-xs);
    }

    .page3__project--secondary {
        margin-top: var(--space-sm-tight);
        padding-top: var(--space-sm-tight);
    }

    .page3__creations-dev {
        margin-top: var(--space-sm-tight);
        padding-top: var(--space-sm-tight);
    }
}

@media (max-width: 768px) {
    /* Pages 3/4 : passage en 1 colonne */
    .page3 {
        height: auto;
        min-height: var(--section-height);
        overflow: visible;
    }

    .page3__container,
    .page3__container--inverted {
        grid-template-columns: 1fr;
        height: auto;
        min-height: var(--section-height);
    }

    /* Page 3 (normal) : image en premier visuellement */
    .page3__container:not(.page3__container--inverted) > .page3__right {
        order: -1;
    }

    /* Zone image : contain pour afficher l'image complete */
    .page3__right:not(.page3__right--text),
    .page3__left--image {
        height: auto;
        overflow: visible;
    }

    /* Zone texte (page 4 inversee) : auto, pas de troncature */
    .page3__right--text {
        height: auto;
        overflow: visible;
    }

    .page3__gallery {
        height: auto;
        padding: 0 var(--slide-pad-x);
    }

    .page3__gallery-image {
        width: 100%;
        height: auto;
        object-fit: contain;
        margin: 0;
        max-height: none;
    }

    /* Zone texte : lisible, pas de troncature */
    .page3__left,
    .page3__right--text .page3__left {
        overflow: visible;
        padding: var(--slide-pad-y) var(--slide-pad-x);
        height: auto;
    }

    .page3__header h2 {
        font-size: var(--fs-body);
    }

    .page3__intro p {
        font-size: var(--fs-caption);
        line-height: var(--line-reading);
    }

    .page3__section-title {
        font-size: var(--fs-caption);
    }

    .page3__project-title {
        font-size: clamp(1.05rem, 2.6vw, 1.2rem);
    }

    .page3__project-subtitle {
        font-size: var(--fs-caption);
        margin-bottom: 0.75rem;
        line-height: 1.5;
    }

    .page3__project-meta {
        font-size: var(--fs-credit);
        line-height: 1.5;
    }

    .page3__project-link {
        font-size: var(--fs-credit);
    }
}

@media (max-width: 480px) {
    .page3__right:not(.page3__right--text),
    .page3__left--image {
        height: auto;
    }

    .page3__left,
    .page3__right--text .page3__left {
        padding: var(--slide-pad-y) var(--slide-pad-x);
    }

    .page3__header h2 {
        font-size: var(--fs-body);
    }

    .page3__intro p {
        font-size: var(--fs-caption);
        line-height: 1.55;
    }

    .page3__project-title {
        font-size: clamp(1.08rem, 4vw, 1.2rem);
    }

    .page3__project-meta {
        font-size: var(--fs-credit);
        line-height: 1.48;
    }
}

/* ============================================================
   RESPONSIVE - PAGE 8 (Partners Grid)
   ============================================================ */

@media (max-width: 1024px) {
    .partners-page__container {
        padding: var(--slide-pad-y) var(--slide-pad-x) var(--space-sm-tight) var(--slide-pad-x);
    }

    .partners-page__grid {
        gap: var(--grid-gap-sm);
    }

    .partners-page__title {
        font-size: var(--fs-subtitle);
        margin: 0 0 var(--space-sm-tight) 0;
    }

    .partners-page__logo-item {
        padding: var(--space-2xs);
    }
}

@media (max-width: 768px) {
    .partners-page__container {
        padding: var(--slide-pad-y) var(--slide-pad-x);
    }

    .partners-page__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--grid-gap-sm);
    }

    .partners-page__title {
        font-size: var(--fs-subtitle);
        margin: 0 0 var(--space-sm-tight) 0;
    }
}

@media (max-width: 480px) {
    .partners-page {
        min-height: auto;
        overflow-x: hidden;
    }

    .partners-page__container {
        padding: var(--slide-pad-y) var(--slide-pad-x);
    }

    .partners-page__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.3rem;
    }

    .partners-page__logo-item {
        width: 2.8rem;
        height: 2.8rem;
        aspect-ratio: auto;
        padding: 0.15rem;
        flex: 0 0 auto;
    }

    .partners-page__title {
        font-size: var(--fs-subtitle);
        margin: 0 0 0.6rem 0;
    }
}

/* ============================================================
   RESPONSIVE - PAGE 9 (Experiences Series)
   ============================================================ */

@media (max-width: 1024px) {
    .page9__hashtags h2 {
        font-size: var(--fs-caption);
    }

    .page9__intro-text {
        font-size: var(--fs-body);
    }

    .page9__card-title {
        font-size: var(--fs-body);
    }
}

@media (max-width: 768px) {
    .page9__header {
        padding: var(--slide-pad-y) var(--slide-pad-x) 0;
    }

    .page9__hashtags h2 {
        font-size: var(--fs-credit);
        letter-spacing: 0.5px;
    }

    .page9__badge {
        font-size: var(--fs-credit);
        padding: var(--space-xs) 0.7rem;
    }

    .page9__intro {
        padding: var(--space-sm-tight) var(--slide-pad-x);
    }

    .page9__intro-text {
        font-size: var(--fs-caption);
        line-height: 1.7;
    }

    .page9__card-title {
        font-size: var(--fs-caption);
    }
}

@media (max-width: 480px) {
    .page9__hashtags h2 {
        font-size: var(--fs-credit);
    }

    .page9__badge {
        font-size: var(--fs-credit);
        padding: 0.4rem var(--space-xs);
    }

    .page9__intro-text {
        font-size: var(--fs-caption);
    }

    .page9__card-title {
        font-size: var(--fs-caption);
    }
}

/* ============================================================
   RESPONSIVE - PAGE 10 (Projets en developpement)
   ============================================================ */

@media (max-width: 1024px) {
    .page10__card-title {
        font-size: var(--fs-body);
    }
}

@media (max-width: 768px) {
    .page10__card-title {
        font-size: var(--fs-caption);
    }
}

@media (max-width: 480px) {
    .page10__card-title {
        font-size: var(--fs-caption);
    }
}

/* ============================================================
   RESPONSIVE - PAGE 12 (L'Expérience Monroe - Affiche presse)
   ============================================================ */

@media (max-width: 1024px) {
    .page12__poster-image {
        max-width: 60%;
    }

    .page12__logos-bar {
        gap: 0.6rem var(--space-sm);
    }

    .page12__logo {
        height: 2rem;
    }
}

@media (max-width: 768px) {
    .page12 {
        height: auto;
        min-height: var(--section-height);
        overflow: visible;
    }

    .page12__container {
        height: auto;
        min-height: var(--section-height);
    }

    .page12__poster {
        overflow: visible;
    }

    .page12__poster-caption {
        max-height: none;
        overflow-y: visible;
    }

        .page12__poster-image {
        max-width: 70%;
    }

    .page12__quotes-list {
        grid-template-columns: 1fr;
        gap: var(--space-2xs);
    }

    .page12__logos-bar {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xs) var(--space-sm-tight);
    }

    .page12__logo {
        height: 1.8rem;
    }
}

@media (max-width: 480px) {
    .page12__poster-image {
        max-width: 85%;
    }

    .page12__disclosure-btn {
        font-size: var(--fs-caption);
        padding: var(--space-xs) var(--space-sm-tight);
    }

    .page12__quotes-list p {
        font-size: var(--fs-caption);
    }

    .page12__quotes-list footer {
        font-size: var(--fs-credit);
    }

    .page12__logos-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem 0.6rem;
    }

    .page12__logo {
        height: 1.5rem;
    }
}

/* ============================================================
   RESPONSIVE - PAGE 13 (L'Expérience Monroe - Bandeau cartes)
   ============================================================ */

@media (max-width: 1024px) {
    .page13__header h2 {
        font-size: var(--fs-title);
    }

    .page13__cards {
        gap: 0.4rem;
    }

    .page13__card-number {
        font-size: var(--size-3xl);
    }
}

@media (max-width: 768px) {
    .page13 {
        height: auto;
        min-height: var(--section-height);
        overflow: hidden;
        display: flow-root;
    }

    .page13__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xs);
    }

    .page13__card-image-wrapper {
        min-height: 12rem;
    }
}

@media (max-width: 480px) {
    .page13__header {
        margin-bottom: var(--space-sm);
    }

    .page13__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .page13__card-number {
        font-size: var(--size-2xl);
    }

    .page13__card-title {
        font-size: var(--fs-caption);
    }
}

/* ============================================================
   RESPONSIVE - PAGE 14 (La Piece - Volet 1)
   ============================================================ */

@media (max-width: 1024px) {
    .page14__container {
        grid-template-columns: 35% 65%;
    }

    .page14__number {
        font-size: var(--size-3xl);
    }

    .page14__title {
        font-size: var(--fs-title-xl);
    }
}

@media (max-width: 768px) {
    .page14 {
        height: auto;
        min-height: var(--section-height);
        overflow: hidden;
        display: flow-root;
    }

    .page14__container {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        height: auto;
    }

    .page14__left {
        padding-top: var(--space-sm);
    }

    .page14__number {
        order: -2;
    }

    .page14__title {
        order: -1;
    }

    .page14__actress-wrapper {
        flex: none;
        margin-top: 0;
        overflow: visible;
        order: 1;
    }

    .page14__actress {
        width: 100%;
        height: auto;
        max-height: 25vh;
    }

    .page14__right {
        order: 2;
    }

    .page14__figure {
        height: auto;
    }

    .page14__cover {
        max-height: 50vh;
        filter: none;
    }
}

@media (max-width: 480px) {
    .page14__number {
        font-size: var(--size-2xl);
    }

    .page14__title {
        font-size: var(--fs-title);
    }
}

/* ============================================================
   RESPONSIVE - PAGE 16 (The Play - Photos spectacle)
   ============================================================ */

@media (max-width: 768px) {
    .page16 {
        height: auto;
        min-height: var(--section-height);
    }

    .page16__images {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        padding: var(--slide-pad-y) var(--slide-pad-x) 0;
    }

    .page16__image--main,
    .page16__image--overlay {
        position: static;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* ============================================================
   LA PIECE : photos entieres (exports la-piece-2 a la-piece-5)
   Les cases imposaient object-fit: cover : 18 a 63 % de rognage en pleine page,
   27 a 40 % sur les pages a deux photos. Chaque photo suit desormais son ratio natif ;
   la composition, calee sur la page de l'export (842 x 595), tient dans la hauteur d'ecran.
   ============================================================ */
.full-image-page--entiere {
    height: auto;
}
.full-image-page--entiere .full-image-page__cadre {
    position: relative;
    width: min(100%, calc(var(--section-height) * 4945 / 3500));
}
.full-image-page--entiere .full-image-page__image {
    height: auto;
    object-fit: contain;
}
@media (min-width: 769px) {
    .page16--champ,
    .page16--couloir {
        min-height: 0;
        align-items: center;
    }
    .page16--champ .page16__images,
    .page16--couloir .page16__images {
        flex: none;
        width: min(100%, calc(var(--section-height) * 842 / 595));
        aspect-ratio: 842 / 595;
    }
    .page16--champ .page16__image,
    .page16--couloir .page16__image {
        height: auto;
        object-fit: contain;
        bottom: auto;
        right: auto;
    }
    .page16--champ .page16__image--main { top: 0; left: 0; width: 100%; }
    .page16--champ .page16__image--overlay { top: 40.3%; left: 42.5%; width: 51.1%; }
    .page16--couloir .page16__image--main { top: 0; left: 3.8%; width: 96.2%; }
    .page16--couloir .page16__image--overlay { top: 47.4%; left: 44.2%; width: 55.8%; }
    .page16--champ .page16__credit,
    .page16--couloir .page16__credit {
        position: absolute;
        padding: 0;
        color: var(--color-white);
        text-shadow: var(--shadow-text);
    }
    .page16--champ .page16__credit { right: 8%; bottom: 12.4%; }
    .page16--couloir .page16__credit { right: 1.6%; bottom: 1.6%; }
}
@media (max-width: 768px) {
    .page16--champ .page16__credit,
    .page16--couloir .page16__credit {
        display: block;
        text-align: right;
        padding: 0 0 var(--space-sm-tight);
    }
}

/* ============================================================
   RESPONSIVE - PAGE 24 (Interactive Exhibition - Bandeau 6 cartes)
   ============================================================ */

@media (max-width: 1024px) {
    /* Deux rangees de cartes : la section doit grandir, sinon overflow: hidden coupe la seconde */
    .page24 {
        height: auto;
        min-height: var(--section-height);
    }
    .page24__cards {
        grid-template-columns: repeat(3, 1fr);
        max-height: none;
    }
}

@media (max-width: 768px) {
    .page24__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .page24__header h2 {
        font-size: var(--fs-title);
    }
}

/* ============================================================
   RESPONSIVE - PAGE 23 (Installation Interactive - Volet 3)
   ============================================================ */

@media (max-width: 768px) {
    .page23__gold-band {
        width: 15%;
    }
    .page23__overlay {
        bottom: 5%;
    }
}

@media (max-width: 480px) {
    .page23__number {
        font-size: var(--size-2xl);
    }

    .page23__title {
        font-size: var(--fs-title);
    }
}

/* ============================================================
   RESPONSIVE - PAGE 21 (Double planche BD)
   ============================================================ */

@media (max-width: 768px) {
    .page21__grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .page21__image {
        height: auto;
    }
}

/* ============================================================
   RESPONSIVE - PAGE 20 (Le Roman Graphique - Volet 2)
   ============================================================ */

@media (max-width: 768px) {
    .page20__container {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .page20__left {
        padding-right: 0;
        padding-top: var(--space-sm);
    }

    .page20__right {
        min-height: 50vh;
    }

    .page20__cover {
        max-width: 60%;
        max-height: 50vh;
    }
}

@media (max-width: 480px) {
    .page20__number {
        font-size: var(--size-2xl);
    }

    .page20__title {
        font-size: var(--fs-title);
    }

    .page20__cover {
        max-width: 70%;
    }
}

/* ============================================================
   RESPONSIVE MOBILE — Corrections RWD 375px-768px
   ============================================================ */

/* Pages 9/10 : grille 2x2 -> colonne unique sur mobile */
@media (max-width: 600px) {
    .page9__grid,
    .page10__grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

/* Page 24 : grille categories -> 1 colonne sur petit mobile */
@media (max-width: 480px) {
    .page24__cards {
        grid-template-columns: 1fr;
    }
}

/* Menu hamburger : ajustements petit ecran */
@media (max-width: 480px) {
    .site-nav__link,
    .site-nav__btn {
        font-size: 1.1rem;
        padding: 0.7rem 1.2rem;
    }

    .site-nav__submenu-link {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    .site-header__logo {
        font-size: 0.85rem;
    }
}

/* Breadcrumb : ajustement petit ecran */
@media (max-width: 480px) {
    .breadcrumb__list {
        font-size: var(--fs-credit);
        padding: 0 var(--space-sm);
    }

    .breadcrumb__item + .breadcrumb__item::before {
        margin: 0 0.3rem;
    }
}

/* Footer : wrap sur tablette */
@media (max-width: 768px) {
    .footer__nav ul,
    .footer__nav-list {
        justify-content: center;
        gap: var(--space-sm) var(--space-md);
    }

    .footer__container {
        text-align: center;
    }
}

/* Footer : colonne sur petit écran */
@media (max-width: 480px) {
    .footer__nav ul,
    .footer__nav-list {
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);
    }
}

/* Hero page 1 : ajustements mobile */
@media (max-width: 480px) {
    .hero-page1 {
        height: max(620px, calc(var(--section-height) - 96px));
        padding: 0.9rem 1rem;
    }

    .hero-page1__title-group h1 {
        font-size: 1.35rem;
        line-height: 1.24;
    }

    .hero-page1__summary {
        font-size: 0.84rem;
        line-height: 1.6;
    }

    .hero-page1__trust {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .hero-page1__cta {
        min-height: 42px;
        padding: 0.4rem 0.75rem;
    }

    .hero-page1__bottom-left,
    .hero-page1__bottom-right {
        font-size: var(--fs-credit);
    }
}

/* Page 62 contact : bouton play repositionne */
@media (max-width: 480px) {
    .page62__play-btn {
        bottom: calc(var(--space-xs) + var(--safe-bottom));
        right: calc(var(--space-xs) + var(--safe-right));
        width: 44px;
        height: 44px;
    }
}

/* Pages projet : titres et textes ajustes */
@media (max-width: 480px) {
    .page3__container {
        padding: 0;
    }

    .page3__project-link {
        font-size: var(--fs-credit);
    }
}

/* ============================================================
   iPhone SE / petits mobiles (< 480px) : mosaiques en 2 colonnes
   ============================================================ */
@media (max-width: 480px) {
    .page49__portraits,
    .page13__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* ============================================================
   Raffinement typographique éditorial global
   ============================================================ */

.mentions-legales__container p,
.mentions-legales__container li,
.page39__description,
.page40__description,
.page44__description,
.page47__paragraph,
.page49__description,
.page51__description,
.page52__spec-text,
.page53__description,
.page54__paragraph,
.page57__paragraph,
.page60__paragraph,
.page61__intro,
.page61__paragraph,
.media-transcript__section p {
    line-height: var(--line-reading);
    max-width: var(--measure-reading);
}

.page44__description,
.page47__paragraph,
.page49__description,
.page51__description p,
.page53__description p,
.page54__paragraph,
.page57__paragraph,
.page60__paragraph,
.page61__paragraph {
    margin-bottom: var(--space-sm-tight);
}

.full-image-page__credit,
.page16__credit,
.page26__credit,
.page27__credit,
.page37__credit,
.page40__credit,
.page47__credit,
.page50__credit,
.page50__tags,
.page52__spec-title,
.page52__spec-text,
.page53__category,
.page57__tags,
.page60__checklist,
.page60__list,
.page61__faq dd {
    line-height: var(--line-meta);
    letter-spacing: 0.02em;
}

.page47__credit,
.page50__credit,
.page50__tags,
.page52__spec-title,
.page52__spec-text,
.page53__category,
.page57__tags,
.page60__checklist,
.page60__list,
.page61__faq dd {
    font-size: var(--fs-caption);
}

.page60__section-title,
.page61__title,
.page61__faq-title,
.page57__subtitle,
.page56__title,
.page54__paragraph:first-child,
.page53__title,
.page51__title,
.page49__tagline,
.page44__title,
.team__subtitle {
    line-height: var(--line-title);
}

.page60__section-title,
.page61__faq-title {
    margin-bottom: var(--space-sm-tight);
}

/* ============================================================
   Panneaux roses : respiration texte
   ============================================================ */

.page3__left:not(.page3__left--image),
.page3__right--text .page3__left,
.page5__container,
.page6__header,
.page6__main,
.partners-page__container,
.page9__header,
.page9__intro,
.page9__grid,
.page10__grid,
.page44__text,
.page46__header,
.page46__visual,
.page47__text,
.page53__left,
.page54__text,
.page56__header,
.page56__content,
.page57__container,
.page60__text,
.page61__left {
    padding-left: var(--pink-panel-pad-x);
    padding-right: var(--pink-panel-pad-x);
}

/* Panneaux roses : le fond reste sur le panneau, pas sur chaque ligne de texte. */
.page47__paragraph,
.page47__credit,
.page47__credit strong,
.page57__main-title,
.page57__subtitle,
.page57__paragraph,
.page57__tags,
.page57__cta {
    background-color: transparent;
}

/* ============================================================
   REGLE MEDIAS GLOBALE (issue #2) : dernieres photos tronquees par object-fit: cover
   Chaque case suit desormais le ratio natif de sa photo. Garde-fou : tests/t02-medias-entiers.spec.js.
   ============================================================ */

/* Espaces augmentes #page-6 : cadre 16:10 autour d'une image 16:9 (10 % de rognage). */
.page6__image {
    aspect-ratio: 16 / 9;
}

/* Catalogue XR #page-10 : la carte Marilyn (paysage) heritait de la hauteur de The Party (portrait) : 54 % de rognage.
   The Party occupe deux rangees a gauche, Marilyn et Toulouse-Lautrec s'empilent a droite : les hauteurs concordent. */
@media (min-width: 601px) {
    .page10__card:first-child {
        grid-row: span 2;
    }
}

/* Photographies #page-25, mobile : bandeau de 25vh autour d'un panoramique 3000 x 619 (38 a 60 % de rognage). */
@media (max-width: 768px) {
    .page25__panoramic {
        height: auto;
    }
    .page25__panoramic-image {
        height: auto;
        aspect-ratio: 3000 / 619;
    }
    /* Le bandeau ne fait plus que 80 px de haut a 390 px : le copyright passe dessous, sur le fond noir du bloc,
       au lieu de recouvrir la photo (regle copyright stable). */
    .page25__panoramic-credit {
        position: static;
        display: block;
        padding: var(--space-2xs) var(--slide-pad-x);
        text-align: right;
        text-shadow: none;
    }
}

/* Podcasts #page-33, mobile : photo portrait plafonnee a 50vw de haut (67 % de rognage). */
@media (max-width: 768px) {
    .page33__right {
        max-height: none;
    }
    .page33__photo {
        height: auto;
    }
}

/* Marilyn #page-51 : la photo remplissait la hauteur de la colonne (13 a 20 % de rognage selon l'ecran).
   La colonne porte le ratio de la photo (1554 x 1696) ; les citations restent posees dessus. */
.page51__right {
    aspect-ratio: 1554 / 1696;
    align-self: center;
    min-height: 0;
}

/* Ni vues ni connues #page-49, ordinateur : cinq portraits de ratios differents dans des colonnes egales
   (15 a 20 % de rognage). Colonnes proportionnelles aux ratios natifs, galerie bornee par la hauteur d'ecran. */
@media (min-width: 769px) {
    .page49 {
        align-items: center;
    }
    .page49__portraits {
        flex: none;
        width: min(100%, calc((var(--section-height) - 9rem) * 1.768));
        grid-template-columns: 0.3464fr 0.3662fr 0.3439fr 0.3555fr 0.3566fr;
        align-items: start;
    }
    .page49__portrait-image {
        height: auto;
    }
}

/* ============================================================
   ACCUEIL, CONTACT (issue #6) : le texte n'empiete plus sur la video
   La video de fond porte au centre un casque, le logo et deux cordes qui descendent du haut de l'image : il ne
   reste ni en haut ni en bas assez de place pour le bloc, meme resserre. Interlignes resserres comme demande ;
   sur grand ecran le bloc passe dans le tiers gauche, vide ; en dessous il passe sous la video, montree entiere.
   ============================================================ */
.page62__brand,
.page62__title {
    margin-bottom: var(--space-2xs);
}
.page62__email {
    margin-bottom: var(--space-xs);
}
.page62__address {
    line-height: 1.35;
    margin-bottom: 0;
}
@media (min-width: 1200px) {
    .page62__container {
        position: absolute;
        inset: 0 auto 0 0;
        width: 32%;
        height: auto;
        padding: var(--slide-pad-y) var(--space-sm);
    }
}
@media (max-width: 1199px) {
    .page62 {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
    }
    .page62__background {
        position: relative;
        inset: auto;
        aspect-ratio: 16 / 9;
    }
    .page62__background-video {
        object-fit: contain;
    }
    .page62__container {
        height: auto;
        padding: var(--space-md) var(--slide-pad-x);
    }
    /* le bouton reste dans l'angle de la video, pas dans le bloc de texte */
    .page62__play-btn {
        bottom: auto;
        top: calc(100vw * 9 / 16 - 48px - var(--space-sm));
    }
}

/* ============================================================
   ISSUE #19 : image alignee sur le texte, logos qui ne « se baladent » plus
   ============================================================ */
/* Espaces augmentes #page-5 : l'image etait centree (max 1000 px) sous un titre cale a gauche : 156 px de decalage
   a 1440 px. Elle part maintenant du meme bord gauche que le titre et le sous-titre. */
@media (min-width: 769px) {
    .page5__image-wrapper {
        align-self: flex-start;
        width: min(100%, 1000px);
    }
}
/* Ni vues ni connues #page-48 : hauteur fixe mais largeur d'attribut conservee (boites de 350 et 544 px autour de
   dessins de 47 et 125 px) : le second logo flottait loin du premier et, sur mobile, les deux s'empilaient hors du
   bandeau. Boites aux proportions du dessin, logos groupes sur une ligne, comme sur l'export de la cliente. */
/* Les logos s'ancrent au bandeau, pas a la section, plus haute que lui sur tablette. */
.page48__banner-bottom {
    position: relative;
}
/* Sur petit ecran le conteneur du bandeau est plus haut que son image : les logos se calent sur le bas de l'image,
   dont la hauteur se deduit de son ratio natif (2246 x 396) et de la largeur de section (plafonnee a 1440 px). */
.page48__logos {
    --page48-logo: clamp(2rem, 4.2vw, 3.75rem);
    flex-wrap: nowrap;
    bottom: auto;
    top: calc(min(100vw, 1440px) * 396 / 2246 - var(--page48-logo) - 0.5rem);
}
.page48__logo {
    width: auto;
    height: var(--page48-logo);
}
.page48__logo + .page48__logo {
    height: clamp(0.9rem, 1.8vw, 1.6rem);
}

/* ============================================================
   ACCUEIL, PAGES 3 ET 4 (issue #10) : credits moins « pave »
   La cliente : « pour les infos soutien, coproduction, diffusion, il faut reduire l'interligne et la typo ».
   Ces lignes avaient le corps, l'interligne et les marges de la ligne de genre. Elles forment un bloc plus serre,
   detache du genre, libelles en gras ; jamais sous 12 px.
   ============================================================ */
.page3__project-meta--credit {
    font-size: 0.75rem; /* 12 px au reglage par defaut, suit la taille de police choisie par l'utilisateur */
    line-height: 1.34;
    margin: 0.06rem 0;
}
.page3__project-meta + .page3__project-meta--credit {
    margin-top: 0.06rem;
}
.page3__project-meta:not(.page3__project-meta--credit) + .page3__project-meta--credit {
    margin-top: 0.55rem;
}
.page3__credit-label {
    font-weight: 700;
}

/* ============================================================
   VIDEO D'AMBIANCE : bouton lecture et pause (issue #36, WCAG 2.2.2)
   Meme apparence que le bouton de son, pose a sa gauche ; cible de 48 px, 44 px au minimum sur mobile.
   ============================================================ */
.hero-page1__play-btn {
    position: absolute;
    bottom: var(--edge-offset);
    left: calc(50% - 60px);
    transform: translateX(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-page1__play-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateX(-50%) scale(1.1);
}
.hero-page1__play-btn:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}
/* A l'arret : triangle visible ; en lecture : barres visibles */
.hero-page1__play-icon--playing { display: none; }
.hero-page1__play-icon--paused { display: block; }
.hero-page1__play-btn--playing .hero-page1__play-icon--playing { display: block; }
.hero-page1__play-btn--playing .hero-page1__play-icon--paused { display: none; }
@media (max-width: 768px) {
    .hero-page1__play-btn {
        width: 44px;
        height: 44px;
        bottom: auto;
        top: calc(var(--edge-top) - 2px);
        left: auto;
        right: calc(var(--edge-right) + 60px + 40px + 12px);
        transform: none;
    }
    .hero-page1__play-btn:hover {
        transform: scale(1.1);
    }
}

/* ============================================================
   CIBLES TACTILES (issue #37, WCAG 2.5.8) : liens de texte trop petits
   Des liens laisses en display: inline sans marge interne : la zone cliquable se limitait a la hauteur de ligne,
   20 a 22 px. Ils recoivent une cible de 44 px sans que l'aspect du texte change (le soulignement suit le texte).
   ============================================================ */
.footer__nav-list a,
.hero-page1__partners a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding-inline: var(--space-2xs);
}
/* Les rangees du pied de page se resserrent : la cible porte deja la hauteur. */
.footer__nav-list {
    gap: var(--space-2xs) var(--space-md);
}
@media (max-width: 600px) {
    .footer__nav-list {
        gap: 0;
    }
}
/* Le lien partenaires garde son bord gauche aligne sur le reste de la colonne. */
.hero-page1__partners a {
    justify-content: flex-start;
    padding-inline: 0;
}

/* ============================================================
   LES VOLETS DE L'EXPERIENCE MONROE (issue #38)
   Une fois entre dans une sous-page, rien ne menait aux dix autres : seul le sous-menu de l'en-tete, au
   troisieme niveau, le permettait. Chaque sous-page porte en fin de contenu la liste des onze volets.
   ============================================================ */
.volets {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: var(--slide-pad-y) var(--slide-pad-x);
}
.volets__titre {
    font-family: var(--font-primary);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 var(--space-sm);
}
.volets__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-2xs) var(--space-md);
}
.volets__lien {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    min-width: 44px;
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.volets__lien:hover {
    color: var(--color-brand-pale);
}
.volets__numero {
    font-weight: 700;
    min-width: 1.4em;
}
/* Page courante : pas un lien, marquee par un trait vertical */
.volets__lien--courant {
    text-decoration: none;
    font-weight: 700;
    border-left: 3px solid var(--color-brand-pale);
    padding-left: 0.6em;
    margin-left: -0.9em;
}
.volets__retour-ligne {
    margin: var(--space-md) 0 0;
}
.volets__retour {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.volets__retour:hover {
    color: var(--color-brand-pale);
}
@media (max-width: 600px) {
    .volets__liste {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sélecteur de langue partagé FR/EN : visible, clavier et contraste renforcé. */
.language-switcher {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    flex: 0 0 auto;
    margin: 0 1rem 0 1.5rem;
    padding: 0.45rem 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-white);
    white-space: nowrap;
}

.language-switcher a {
    color: inherit;
    text-underline-offset: 0.2em;
}

.language-switcher a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    border-radius: 0.15rem;
}

.language-switcher a[aria-current="page"] {
    font-weight: 700;
    text-decoration-thickness: 0.15em;
}

.language-switcher--footer {
    width: 100%;
    justify-content: center;
    margin: var(--space-sm) 0 0;
    padding: 0.45rem 0 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1023px) {
    .site-header__inner {
        gap: 0.5rem;
    }

    .language-switcher {
        margin-left: 1rem;
        margin-right: 0.25rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .language-switcher {
        gap: 0.2rem;
        margin-right: 0.1rem;
        font-size: 0.72rem;
    }
}

/* Le sélecteur du pied de page occupe déjà toute la largeur de son conteneur. */
@media (max-width: 1023px) {
    .language-switcher.language-switcher--footer {
        margin-left: 0;
        margin-right: 0;
    }
}