/* =========================================================
   ENHANCEMENTS.CSS — Couche d'amélioration (à charger EN DERNIER)
   Nino MARIAN — Portfolio 2026

   Cette feuille est une surcouche non destructive : elle vient
   APRÈS style.css (et expo.css sur les pages projet) et ne fait
   que corriger / raffiner. Aucun fichier d'origine n'est modifié.

   SOMMAIRE
   1. Tokens & socle (largeur de scène, accessibilité)
   2. Typo fluide COHÉRENTE — rendu identique selon la largeur
   3. TV — refonte de la disposition après clic (salle de projection)
   4. Responsive & Opquast — mobile propre, zoom, focus, débordements
   5. Menu burger (mobile) — nav repliée en panneau plein écran
   6. Proportions mobile — titre plus présent, visuels/télés rééquilibrés
   ========================================================= */


/* =========================================================
   1. TOKENS & SOCLE
   ========================================================= */
:root {
    /* Largeur de "scène" : la composition se borne ici et se centre.
       En dessous : tout est fluide (vw). Au-dessus : tout se fige et
       reste centré → le rendu devient IDENTIQUE quelle que soit la
       largeur de l'écran (corrige l'effet "titre perdu" sur ultra-large). */
    --stage: min(100vw, var(--max, 1680px));

    /* Couleur de mise au point clavier (focus visible) */
    --focus: var(--accent, #ff4a1c);

    /* Hauteur réelle du header, renseignée par enhancements.js.
       Sert à positionner le panneau du menu burger juste sous le header. */
    --header-h: 64px;
}

/* Les médias ne débordent jamais de leur conteneur */
img, video, iframe, model-viewer, svg, canvas {
    max-width: 100%;
}

/* Les enfants de grilles/flex peuvent rétrécir (évite le débordement
   horizontal causé par de longs mots ou des médias) */
.hero__foot,
.about__grid,
.about__cols,
.work-card,
.contact__grid,
.tv-detail__pane {
    min-width: 0;
}
.hero__foot > *,
.work-card > *,
.tv-detail__pane > * {
    min-width: 0;
}

/* Ancrage : le header fixe ne recouvre plus la section ciblée
   quand on clique sur un lien d'ancre (#about, #work, #contact…). */
section[id],
footer[id] {
    scroll-margin-top: clamp(72px, 9vw, 104px);
}


/* =========================================================
   2. TYPOGRAPHIE FLUIDE COHÉRENTE  (demande n°3)
   -----------------------------------------------------------
   On réécrit la taille des grands titres pour qu'elle s'indexe
   sur --stage (largeur bornée) plutôt que sur 100vw brut.
   → En dessous de --max : strictement identique à avant (fluide).
   → Au-dessus de --max : la taille se fige, comme la mise en page.
   Les bornes min/max d'origine sont conservées.
   ========================================================= */

/* Hero : on borne ET on centre la scène (correctif principal du
   "grand vide" visible sur écran large). En dessous de --max,
   rien ne change visuellement. */
.hero {
    max-width: var(--max, 1680px);
    margin-inline: auto;
    width: 100%;
}

.hero__title {
    /* avant : clamp(48px, 11vw, 170px) */
    font-size: clamp(48px, calc(var(--stage) * 0.11), 170px);
}

/* Marquee défilant */
.marquee {
    /* avant : clamp(26px, 4.5vw, 64px) */
    font-size: clamp(26px, calc(var(--stage) * 0.045), 64px);
}

/* Grands titres de section (accueil) */
.gallery__title,
.work__title {
    /* avant : clamp(44px, 9vw, 140px) */
    font-size: clamp(44px, calc(var(--stage) * 0.09), 140px);
}
.work-card__title {
    /* avant : clamp(40px, 7vw, 110px) */
    font-size: clamp(40px, calc(var(--stage) * 0.07), 110px);
}
.contact__big {
    /* avant : clamp(60px, 13vw, 220px) */
    font-size: clamp(60px, calc(var(--stage) * 0.13), 220px);
}
.tv-vitrine__title {
    /* avant : clamp(36px, 6vw, 80px) */
    font-size: clamp(36px, calc(var(--stage) * 0.06), 80px);
}

/* Pages projet : titre héro (style.css + expo.css) */
.project-hero__title {
    /* avant : clamp(60px, 12vw, 200px) */
    font-size: clamp(60px, calc(var(--stage) * 0.12), 200px);
}
.akira-hero__alter {
    /* avant : clamp(80px, 14vw, 220px) */
    font-size: clamp(80px, calc(var(--stage) * 0.14), 220px);
}

/* Les très grands titres ne déclenchent jamais de scroll horizontal */
.hero__title,
.gallery__title,
.work__title,
.work-card__title,
.contact__big,
.tv-vitrine__title,
.project-hero__title,
.akira-hero__alter {
    overflow-wrap: break-word;
}


/* =========================================================
   3. TV — REFONTE DE LA DISPOSITION APRÈS CLIC  (demande n°1)
   -----------------------------------------------------------
   Objectif : transformer le panneau de détail en véritable
   "salle de projection". La vidéo devient la pièce maîtresse,
   le texte est aligné verticalement avec elle (plus de grand
   vide), et le tout est centré dans un cadre cinéma.
   ========================================================= */

/* Cadre du détail : centré, largeur maîtrisée, coins adoucis */
.tv-detail {
    max-width: 1340px;
    margin-inline: auto;
    border-radius: 16px;
    overflow: hidden;
}

/* Plateau actif : la vidéo domine, le texte est CENTRÉ verticalement
   → c'est ce qui supprime le "vide" et rééquilibre la composition. */
.tv-detail__pane {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
}

/* La vidéo : pièce maîtresse, cadre cinéma plus marqué */
.tv-detail__media {
    width: 100%;
    border-width: clamp(6px, 0.7vw, 11px);
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.6),
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Bloc texte : hiérarchie claire, largeur de lecture confortable */
.tv-detail__text {
    gap: clamp(14px, 1.6vw, 22px);
    max-width: 48ch;
}
.tv-detail__title {
    /* léger boost : le titre du projet respire mieux à côté d'une grande vidéo */
    font-size: clamp(30px, calc(var(--stage) * 0.034), 54px);
}

/* Quand un détail est ouvert, on estompe la télé NON sélectionnée
   pour concentrer le regard sur la chaîne choisie.
   (:has est géré par tous les navigateurs récents ; sinon, aucun effet
   négatif — la mise en page reste valide.) */
.tv-vitrine:has(.tv-detail:not([hidden])) .tv-set:not(.is-active) {
    opacity: 0.4;
    filter: grayscale(0.6) saturate(0.6);
    transition: opacity 0.5s var(--ease), filter 0.5s var(--ease);
}

/* La télé sélectionnée se redresse et passe en avant-plan */
.tv-set.is-active {
    transform: rotateY(0deg) translateY(-6px);
    z-index: 3;
}
.tv-set.is-active .tv-set__label {
    color: var(--accent);
}

/* La télé est cliquable au clavier (cf. enhancements.js + attributs HTML) */
.tv-set:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 6px;
    border-radius: 8px;
}

/* Empilement propre sur écrans moyens / mobiles : vidéo en grand
   au-dessus, infos dessous, le tout centré. */
@media (max-width: 1080px) {
    .tv-detail__pane {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vw, 40px);
    }
    .tv-detail__media {
        max-width: 880px;
        margin-inline: auto;
    }
    .tv-detail__text {
        max-width: none;
        text-align: left;
    }
}


/* =========================================================
   4. RESPONSIVE & OPQUAST  (demande n°2)
   -----------------------------------------------------------
   Bonnes pratiques : zoom autorisé (corrigé dans le HTML),
   focus clavier visible, mouvement réduit respecté, cibles
   tactiles suffisantes, navigation disponible sur mobile,
   aucun débordement horizontal.
   ========================================================= */

/* ---- 4.1 Focus clavier visible (le curseur custom masque l'état
   natif ; on le rétablit clairement pour la navigation au clavier) ---- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
.tv-set:focus-visible,
.vitrine-item:focus-visible,
.work-card:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- 4.2 Respect de "prefers-reduced-motion" (filet de sécurité
   global : on neutralise les animations en boucle et transitions
   longues pour les personnes sensibles au mouvement) ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 4.3 Cibles tactiles : sur écran tactile, on garantit une zone
   cliquable confortable pour les liens de navigation (≈ 44px). ---- */
@media (hover: none) {
    .site-header__nav a {
        padding: 12px 4px;
    }
    .contact__grid a,
    .contact__bottom a {
        display: inline-block;
        padding: 6px 0;
    }
}

/* ---- 4.4 Header : navigation TOUJOURS disponible sur mobile.
   (À l'origine la nav était masquée < 780px → on la rétablit, et
   on masque uniquement la longue phrase de disponibilité.)
   NB : la section 5 transforme ensuite cette nav en menu burger
   lorsque enhancements.js est actif (classe .has-burger). ---- */
@media (max-width: 780px) {
    .site-header {
        flex-wrap: wrap;
        gap: 10px 16px;
        padding: 16px var(--pad-x);
    }
    .site-header__nav {
        display: flex;
        gap: 18px;
        font-size: 12px;
        letter-spacing: 0.1em;
    }
    .site-header__mail {
        display: none;
    }
}

/* ---- 4.5 Hero : pied de page propre sur mobile ---- */
@media (max-width: 640px) {
    .hero {
        padding-top: clamp(96px, 22vw, 140px);
    }
    .hero__foot {
        gap: 28px;
    }
    .hero__lede {
        max-width: 100%;
    }
}

/* ---- 4.6 Petits écrans : on passe les grilles secondaires en 1 colonne
   pour la lisibilité (Opquast : contenu lisible sans scroll horizontal). ---- */
@media (max-width: 540px) {
    .about__cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .contact__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .contact__grid div:empty {
        display: none;
    }
    /* l'adresse e-mail ne déborde jamais */
    .contact__mail {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ---- 4.7 Anti-débordement horizontal global (ceinture + bretelles) ----
   `clip` plutôt que `hidden` : on coupe le débordement horizontal SANS
   créer de conteneur de défilement, ce qui préserve les éléments en
   position:sticky (ex. le switch EXPO/AGENCE de la page ALTER). */
html {
    overflow-x: clip;
}
body {
    overflow-x: hidden;
}
.about__big,
.gallery__sub,
.tv-vitrine__sub,
.tv-detail__text p {
    overflow-wrap: break-word;
}

/* ---- 4.8 Plateau TV : empilement vertical centré et lisible
   sur mobile (renforce la règle existante à 900px). ---- */
@media (max-width: 720px) {
    .tv-stage {
        gap: 40px;
    }
    .tv-set {
        width: min(100%, 360px);
    }
    .tv-detail {
        padding: clamp(20px, 5vw, 32px);
    }
}


/* =========================================================
   5. MENU BURGER (mobile)
   -----------------------------------------------------------
   La nav (.site-header__nav) est repliée derrière un bouton
   burger sur ≤ 780px, puis déployée en panneau plein écran sous
   le header.

   • Dégradation gracieuse : tout est scopé sous `html.has-burger`,
     classe ajoutée par enhancements.js UNIQUEMENT si le bouton a
     bien été injecté. Sans JS → la nav reste affichée (section 4.4),
     donc jamais d'impasse d'accessibilité.
   • L'état ouvert est porté par l'attribut [data-nav="open"] sur
     <html> (posé par enhancements.js).
   • Le panneau démarre juste sous le header grâce à --header-h
     (mesuré en JS), donc le bouton reste toujours cliquable.
   ========================================================= */

/* Bouton caché par défaut (desktop : nav d'origine totalement inchangée) */
.burger {
    display: none;
}

/* La croix de fermeture n'existe que dans le panneau mobile : masquée
   partout par défaut (elle est réinjectée dans la nav par le JS, donc
   on évite qu'elle apparaisse dans la barre de nav sur desktop). */
.burger-close {
    display: none;
}

@media (max-width: 780px) {

    /* --- Bouton burger : visible, aligné à droite, cible tactile 44px --- */
    html.has-burger .burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;            /* pousse le bouton à droite du header */
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: 0;
        color: currentColor;
        cursor: pointer;
        position: relative;
        z-index: 1002;                /* toujours au-dessus du panneau */
        -webkit-tap-highlight-color: transparent;
    }

    .burger__box {
        position: relative;
        display: block;
        width: 26px;
        height: 16px;
    }
    .burger__line {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition:
            transform 0.35s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
            top 0.35s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
            opacity 0.18s linear;
    }
    .burger__line:nth-child(1) { top: 0; }
    .burger__line:nth-child(2) { top: 7px; }
    .burger__line:nth-child(3) { top: 14px; }

    /* Croix à l'ouverture */
    html.has-burger[data-nav="open"] .burger__line:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
    }
    html.has-burger[data-nav="open"] .burger__line:nth-child(2) {
        opacity: 0;
    }
    html.has-burger[data-nav="open"] .burger__line:nth-child(3) {
        top: 7px;
        transform: rotate(-45deg);
    }

    /* Le header reste un simple contexte d'empilement : on NE le masque
       PAS en entier. Sinon la nav (qui est SON ENFANT) hériterait de
       visibility:hidden / pointer-events:none → panneau impossible à
       fermer ni cliquer. C'était la cause du « burger qui ne marche pas ». */
    html.has-burger .site-header {
        z-index: 1001;
        /* CRITIQUE : le backdrop-filter du header en fait le « bloc
           conteneur » de tout descendant position:fixed → le panneau
           (inset:0) se retrouverait calé sur la hauteur du header (~76px)
           au lieu du plein écran. On le neutralise donc sur mobile. */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    /* Le bouton burger reste sous le panneau dans l'ordre d'empilement. */
    html.has-burger .burger {
        z-index: 1001;
    }

    /* À l'ouverture : on masque UNIQUEMENT le logo et le bouton burger
       (pas tout le header) → aucune contamination de la nav. */
    html.has-burger[data-nav="open"] .site-header__logo,
    html.has-burger[data-nav="open"] .burger {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s var(--ease, ease);
    }

    /* --- Nav repliée en panneau PLEIN ÉCRAN, arrière-plan flouté ---
       z-index 1002 : au-dessus du logo et du burger (dans le contexte du
       header) → le panneau les recouvre et reste entièrement cliquable. */
    html.has-burger .site-header__nav {
        position: fixed;
        inset: 0;                       /* couvre tout l'écran */
        z-index: 1002;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(18px, 5vw, 34px) !important;
        margin: 0;
        padding: clamp(96px, 22vw, 140px) var(--pad-x, 22px) clamp(40px, 12vw, 80px);
        /* Arrière-plan : quasi opaque + flou (la page transparaît à peine). */
        background: rgba(10, 10, 10, 0.94);
        -webkit-backdrop-filter: blur(22px) saturate(1.1);
        backdrop-filter: blur(22px) saturate(1.1);
        font-size: clamp(30px, 9vw, 46px) !important;   /* gros liens lisibles */
        letter-spacing: 0.01em !important;
        /* masqué + inerte par défaut */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition:
            opacity 0.4s var(--ease, ease),
            transform 0.4s var(--ease, ease),
            visibility 0s linear 0.4s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    html.has-burger[data-nav="open"] .site-header__nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition:
            opacity 0.4s var(--ease, ease),
            transform 0.4s var(--ease, ease),
            visibility 0s;
    }

    /* Liens du panneau : les 3 entrées du header, confortables au doigt */
    html.has-burger .site-header__nav a {
        display: block;
        width: 100%;
        padding: 8px 0;
        color: var(--ink, #f2efea);
    }

    /* --- Croix de fermeture, en HAUT À GAUCHE --- */
    .burger-close { display: none; }
    html.has-burger .site-header__nav .burger-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: max(16px, env(safe-area-inset-top));
        left: calc(var(--pad-x, 22px) - 8px);
        width: 48px;
        height: 48px;
        padding: 0;
        background: none;
        border: 0;
        color: var(--ink, #f2efea);
        cursor: pointer;
        z-index: 1;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.25s var(--ease, ease), transform 0.25s var(--ease, ease);
    }
    html.has-burger .site-header__nav .burger-close:hover {
        color: var(--accent, #ff4a1c);
        transform: rotate(90deg);
    }

    /* Verrou de défilement quand le menu est ouvert */
    html.has-burger[data-nav="open"],
    html.has-burger[data-nav="open"] body {
        overflow: hidden;
    }
}


/* =========================================================
   6. PROPORTIONS MOBILE — rééquilibrage de l'accueil
   -----------------------------------------------------------
   Demande : sur mobile le titre est trop petit et les éléments
   présentés (visuels de galerie, télés) trop gros. On agrandit
   les titres et on contient les visuels, SANS toucher au desktop
   (tout est sous @media ≤ 720px) ni rogner les images.
   ========================================================= */
@media (max-width: 720px) {

    /* --- 6.1 Titre héro nettement plus présent ---
       Avant : plafonné à 48px sur mobile (plancher du clamp d'origine).
       Désormais indexé sur la largeur d'écran → bien plus impactant. */
    .hero__title {
        font-size: clamp(44px, 13vw, 100px);
        line-height: 0.95;
    }

    /* Titres de section légèrement renforcés pour garder la hiérarchie
       face à des visuels désormais plus compacts. */
    .gallery__title,
    .work__title {
        font-size: clamp(36px, 10.5vw, 84px);
    }
    .tv-vitrine__title {
        font-size: clamp(32px, 9vw, 64px);
    }

    /* --- 6.2 Télés moins envahissantes et centrées --- */
    .tv-stage {
        gap: 32px;
    }
    .tv-set {
        width: min(74vw, 300px);   /* avant : min(100%, 360px) */
        margin-inline: auto;
    }

    /* --- 6.3 Visuels de galerie : grille 2 colonnes sur mobile ---
       La galerie est une GRILLE (.vitrine__grid) d'items .vitrine-item
       (affiches + modèles 3D). En 1 colonne, chaque visuel occupait toute
       la largeur → effet "trop gros". On force 2 colonnes : les affiches
       deviennent des vignettes équilibrées, plus agréables à parcourir.
       Aucune image n'est rognée (l'object-fit reste géré par style.css).
       Sélecteur .gallery .vitrine__grid pour passer devant style.css. */
    .gallery .vitrine__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(12px, 3.2vw, 22px);
    }
}

/* =========================================================
   7. PAGES PROJET (ALTER · beIN · asso) — proportions & correctifs
   -----------------------------------------------------------
   • Appliquer à la page ALTER le même esprit « taille & disposition »
     que l'accueil : titres présents, visuels contenus, sections
     respirables sur mobile.
   • Corriger le logo client qui chevauchait le titre (page beIN).
   • Agrandir la maquette du site de l'asso (illisible car enfermée
     dans un cadre 21/9 → réduite à un liseré).
   • Renforcer l'anti-débordement et la lisibilité du header.
   ========================================================= */

/* ---- 7.1 Switch EXPO ⇄ AGENCE (sticky) : se cale SOUS le header fixe
   au lieu de glisser derrière. --header-h est mesuré par enhancements.js. ---- */
.exp-switch {
    top: var(--header-h, 64px);
}

/* ---- 7.2 Header mobile : fond plus dense pour que le logo ne « bave »
   jamais sur le texte qui défile derrière. ---- */
@media (max-width: 780px) {
    .site-header {
        background: linear-gradient(
            to bottom,
            rgba(10, 10, 10, 0.94),
            rgba(10, 10, 10, 0.6) 62%,
            rgba(10, 10, 10, 0)
        );
    }
}

/* ---- 7.3 Logo client (page beIN) : il était en position:absolute et
   recouvrait le grand titre sur mobile. On le remet dans le flux, en
   tête du hero, juste au-dessus du titre → plus aucun chevauchement. ---- */
@media (max-width: 780px) {
    .project-client {
        position: static;
        order: -1;
        align-items: flex-start;
        margin: 0 0 22px;
        pointer-events: auto;
    }
    .project-client__logo {
        width: clamp(56px, 16vw, 78px);
    }
}

/* ---- 7.4 Maquette du site de l'asso : la figure utilisait .media--wide
   (ratio 21/9) + object-fit:contain, ce qui écrasait une capture haute en
   un mince liseré. On l'affiche en pleine largeur, à sa hauteur naturelle
   → la maquette devient enfin lisible. ---- */
.media--asso-fit-soft {
    aspect-ratio: auto;
    height: auto;
}
.media--asso-fit-soft img {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

/* ---- 7.5 Garde-fous anti-débordement (page ALTER) : on autorise les
   conteneurs grille/flex à rétrécir, et les longs libellés à se couper. ---- */
.akira-hero__content,
.proj-hero__content,
.comms-grid,
.comms-block,
.exp-switch__inner,
.exp-switch__btn,
.exp-switch__label,
.poster-grid,
.proj-manifesto {
    min-width: 0;
}
.exp-switch__label strong,
.exp-switch__label em {
    overflow-wrap: anywhere;
}

/* ---- 7.6 PROPORTIONS MOBILE de la page ALTER (parité avec l'accueil) ---- */
@media (max-width: 720px) {

    /* Titre du hero projet : même présence que le hero d'accueil
       (indexé sur la largeur, plancher relevé). */
    .project-hero__title {
        font-size: clamp(40px, 13vw, 92px);
        line-height: 0.95;
    }
    .project-hero {
        min-height: auto;
        padding-top: clamp(120px, 30vw, 170px);
        padding-bottom: clamp(48px, 12vw, 80px);
    }
    .project-hero__intro { font-size: 15px; }

    /* Hero AKIRA : moins de hauteur morte, le katakana reste imposant
       mais ne déborde jamais. */
    .akira-hero {
        min-height: auto;
        padding: clamp(96px, 24vw, 140px) var(--pad-x) clamp(56px, 14vw, 80px);
    }
    .akira-hero__kata {
        width: min(100%, 460px);
    }
    .akira-hero__lede { font-size: 15px; }
    .akira-hero__meta { gap: 24px 36px; }

    /* Hero AGENCE : même resserrage. */
    .proj-hero {
        min-height: auto;
        padding: clamp(88px, 22vw, 130px) var(--pad-x) clamp(48px, 12vw, 72px);
    }

    /* Sections génériques EXPO/AGENCE : padding vertical raisonnable
       (elles étaient figées à 100px → trop d'air sur mobile). */
    .akira-section,
    .proj-section {
        padding-top: clamp(56px, 14vw, 100px);
        padding-bottom: clamp(56px, 14vw, 100px);
    }
}


/* ---- 7.7 ALTER : « au moins 2 éléments par ligne » sur mobile
   (comme la galerie de l'accueil). On garde 2 colonnes là où expo.css
   repassait à 1 seule colonne sur petit écran. ---- */

/* Les 4 laissez-passer (recto) : 2 par ligne même sur mobile.
   (Le verso reste en pleine largeur.) */
@media (max-width: 720px) {
    .tickets-recto {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .ticket-img figcaption {
        padding: 10px 12px;
        font-size: 11px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* Merch & mockups agence : 2 par ligne (le merch « wide » reste pleine
   largeur). */
@media (max-width: 720px) {
    .merch-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .merch-piece--wide { grid-column: span 2; }
    .merch-piece--wide .merch-piece__visual { aspect-ratio: 16/9; }
    .merch-piece figcaption { padding: 12px 14px; }
    .merch-piece figcaption strong { font-size: 14px; }

    .proj-mockups {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* Les affiches (poster-grid) : 2 par ligne sur mobile. Seules les vraies
   affiches (enfants directs) sont visées — pas les vidéos, qui restent
   centrées dans leur propre bloc. */
@media (max-width: 600px) {
    .poster-grid > .poster-card {
        grid-column: span 6;
    }
    .poster-grid { gap: 14px; }
    .poster-card { padding: 10px; }
}