/* =============================================================
   Louis Graceffa — Réalisateur, cadreur, monteur
   Feuille de style principale
   ============================================================= */

/* Archivo — licence SIL Open Font, hébergée avec le site
   pour qu'aucune requête ne parte vers un tiers. */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('polices/archivo-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('polices/archivo-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('polices/archivo-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('polices/archivo-600.woff2') format('woff2');
}

:root {
    --noir:        #0d0d0d;
    --noir-doux:   #131311;
    --blanc:       #ffffff;
    --voile:       rgba(0, 0, 0, 0.45);
    --marge-cote:  clamp(1.25rem, 5vw, 4rem);
    --police:      'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --transition:  0.25s ease;
}

/* ---------- Base ---------- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--noir);
    color: var(--blanc);
    font-family: var(--police);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--blanc);
    outline-offset: 3px;
}

/* ---------- En-tête fixe ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem var(--marge-cote);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.site-header a {
    text-decoration: none;
    opacity: 0.75;
    transition: opacity var(--transition);
}

.site-header a:hover,
.site-header a:focus-visible { opacity: 1; }

.logo {
    font-weight: 700;
    letter-spacing: 0.24em;
    opacity: 1 !important;
}

.nav-header {
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
}

/* Même traitement que le menu de droite — capitales et interlettrage —
   mais un cran plus grand, plus ferme, et sur deux lignes serrées. */
.logo {
    text-align: left;
    line-height: 1.15;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.16em;
}

/* ---------- Pastilles de navigation ---------- */
.nav-pastilles {
    position: fixed;
    top: 50%;
    right: clamp(0.75rem, 2vw, 1.75rem);
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pastille {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    padding: 0.3rem 0.3rem;
}

.pastille .point {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    transition: background var(--transition), transform var(--transition);
}

.pastille:hover .point { background: rgba(255, 255, 255, 0.7); }

.pastille.active .point {
    background: var(--blanc);
    transform: scale(1.45);
}

/* Sortie du flux : sinon la largeur du plus long titre créerait une
   bande invisible sur tout le côté droit, qui avalerait les clics
   destinés à la vidéo. */
.pastille .etiquette {
    position: absolute;
    right: 100%;
    margin-right: 0.6rem;
    pointer-events: none;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--transition), transform var(--transition);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.pastille:hover .etiquette,
.pastille:focus-visible .etiquette {
    opacity: 0.9;
    transform: translateX(0);
}

/* ---------- Conteneur à défilement magnétique ---------- */
.container {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.container::-webkit-scrollbar { display: none; }

/* ---------- Sections ---------- */
.video-section,
.contact-section {
    position: relative;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.video-section { background-color: var(--noir); }

/* Couche image : reste visible tant que la vidéo n'est pas prête */
.video-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--poster);
    background-size: cover;
    background-position: center;
    /* --zoom recadre les vidéos dont les bandes noires sont incrustées
       dans le fichier (format scope exporté en 16/9). */
    transform: scale(var(--zoom, 1));
    will-change: transform;
}

/* Voile sombre : rend le texte lisible quelle que soit l'image.

   Il sert aussi de bouclier : sans lui, le survol de la souris atteint
   le lecteur de l'hébergeur, qui affiche alors ses commandes par-dessus
   la vidéo de fond. Il ne doit donc surtout pas être transparent aux
   événements de pointage. Les clics restent captés par la section
   elle-même, un pseudo-élément n'étant jamais la cible d'un événement. */
.video-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Le voile ne s'applique qu'aux deux extrémités : un soupçon en
       haut pour le menu, une base plus franche en bas pour la légende.
       Entre les deux, l'image reste à sa vraie densité — c'est là que
       se trouve l'essentiel du plan. */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.10) 14%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 48%,
        rgba(0, 0, 0, 0.68) 100%
    );
}

/* ---------- Couche vidéo ---------- */
.media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Le fondu ne se déclenche qu'une fois la vidéo réellement prête :
   jusque-là, c'est le poster qui reste affiché. */
.video-section.video-prete .media { opacity: 1; }

/* Le cadre donné au lecteur doit avoir le format de la vidéo, sinon
   c'est lui qui ajoute des bandes noires. --ratio vaut la largeur
   divisée par la hauteur : 1.7778 pour du 16/9 (valeur par défaut),
   1.3333 pour du 4/3, 0.5625 pour du 9/16. */
.media iframe,
.media video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--zoom, 1));
    width: 100vw;
    height: calc(100vw / var(--ratio, 1.7778));
    min-width: calc(100vh * var(--ratio, 1.7778));
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    object-fit: cover;
}

/* YouTube impose son titre en haut et ses commandes en bas, même avec
   controls=0 : on agrandit l'image pour les rejeter hors du cadre.
   Inutile avec Bunny, Cloudflare ou Vimeo, qui savent vraiment masquer
   leur habillage. */
.media iframe.integration-youtube {
    transform: translate(-50%, -50%) scale(calc(var(--zoom, 1) * 1.45));
}

/* ---------- Vidéos au format vertical ---------- */

/* Le lecteur remplit le cadre qu'on lui donne. Si ce cadre est en 16/9
   alors que la vidéo est verticale, c'est lui qui ajoute des bandes
   noires sur les côtés. Il faut donc lui donner le bon format. */
.video-section[data-format="vertical"] .media iframe,
.video-section[data-format="vertical"] .media video {
    /* Téléphone tenu à la verticale : la vidéo remplit tout l'écran,
       c'est le cas idéal. */
    width: 100vw;
    height: calc(100vw / var(--ratio, 0.5625));
    min-width: calc(100dvh * var(--ratio, 0.5625));
    min-height: 100vh;
    min-height: 100dvh;
}

@media (min-aspect-ratio: 1/1) {
    /* Écran plus large que haut : remplir le cadre reviendrait à ne
       montrer qu'une mince bande horizontale de l'image, énormément
       agrandie. On préfère montrer la vidéo entière, au centre. */
    .video-section[data-format="vertical"] .media iframe,
    .video-section[data-format="vertical"] .media video {
        width: auto;
        height: 100vh;
        height: 100dvh;
        min-width: 0;
        min-height: 0;
        aspect-ratio: var(--ratio, 0.5625);
    }

    /* Le vide de chaque côté est comblé par l'image de la vidéo
       elle-même, floutée : plus habité qu'un aplat noir. */
    .video-section[data-format="vertical"]::before {
        filter: blur(48px) brightness(0.5);
        transform: scale(calc(var(--zoom, 1) * 1.25));
    }

    /* Plus de voile sur le film : il est présenté en entier, il ne sert
       pas de fond à du texte. La légende repose sur le flou, déjà
       sombre, et garde son ombre portée. Le pseudo-élément subsiste
       comme bouclier invisible contre le lecteur de l'hébergeur. */
    .video-section[data-format="vertical"]::after {
        background: none;
    }
}

/* Sections sans vidéo : très lent zoom du poster,
   pour que la page ne paraisse pas figée. */
.video-section.sans-video::before {
    animation: respiration 24s ease-in-out infinite alternate;
}

@keyframes respiration {
    from { transform: scale(var(--zoom, 1)); }
    to   { transform: scale(calc(var(--zoom, 1) * 1.09)); }
}

/* ---------- Texte superposé ---------- */
.content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 var(--marge-cote);
    max-width: 60rem;
    /* Garantit la lisibilité sur un plan très clair sans avoir à
       assombrir davantage l'image. */
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55),
                 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Cartouche : en bas à gauche, pour l'accueil comme pour les
   réalisations. Le centre de l'image reste libre. */
.content.aligne-bas {
    position: absolute;
    left: 0;
    bottom: clamp(3rem, 9vh, 6rem);
    text-align: left;
    max-width: min(90%, 40rem);
}

/* L'accueil parle plus fort, avec la même grammaire. */
.content.accueil-bloc { max-width: min(92%, 52rem); }

.content.accueil-bloc .sur-titre { margin-bottom: 1.1rem; }

.content.accueil-bloc h1 {
    font-size: clamp(2.1rem, 6.4vw, 4.75rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin-bottom: 1.1rem;
}

/* Sans cette règle, la marge automatique recentrerait le paragraphe. */
.content.aligne-bas .accroche {
    margin: 0;
    max-width: 32rem;
}

.sur-titre {
    margin: 0 0 0.9rem;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.75;
}

.content h1,
.content h2 {
    margin: 0 0 1rem;
    font-weight: 300;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-indent: 0.3em;         /* compense l'espace après la dernière lettre */
}

.content h1 { font-size: clamp(2rem, 7vw, 5rem); }
.content h2 { font-size: clamp(1.5rem, 4.5vw, 3.25rem); }

.content.aligne-bas h2 {
    letter-spacing: 0.16em;
    text-indent: 0.16em;
}

.content p {
    margin: 0;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* Sélecteur aussi spécifique que « .content p », sinon la marge
   automatique est écrasée et le texte se colle à gauche. */
.content .accroche {
    max-width: 34rem;
    margin: 0 auto;
}

.meta {
    font-size: 0.85rem !important;
    letter-spacing: 0.12em;
    opacity: 0.7 !important;
}

/* ---------- Accueil : les métiers en négatif ---------- */

/* Le texte est blanc et son mode de fusion inverse ce qu'il recouvre :
   clair sur les zones sombres de l'image, sombre sur les zones claires.
   L'isolation confine l'effet à la section, sinon il se mélangerait
   avec tout ce qui se trouve derrière dans la page. */
.video-section.accueil { isolation: isolate; }

/* Un voile sombre écraserait l'inversion. L'accueil n'en garde qu'un
   soupçon en haut, pour que le menu reste lisible sur un plan clair ;
   le bas de l'image reste intact. */
.video-section.accueil::after {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.12) 14%,
        rgba(0, 0, 0, 0) 26%,
        rgba(0, 0, 0, 0) 52%,
        rgba(0, 0, 0, 0.40) 100%
    );
}

/* Deux calques identiques, superposés au pixel près :

   - dessous, le texte en inversion totale ;
   - dessus, le même texte en blanc, opaque à 78 %.

   Le blanc ramène l'ensemble vers le blanc et ne laisse passer qu'une
   fraction de l'inversion. Le résultat suit la formule
   « blanc moins 22 % de l'image » : blanc pur sur les zones sombres,
   légèrement grisé sur les zones claires.

   Un léger voile assombrit le bas de l'accueil : il garantit que le
   texte reste clair et lisible quel que soit le plan, l'inversion ne
   venant que le moduler. Sans lui, sur une image de tonalité moyenne,
   le texte se rapprochait du fond et disparaissait.

   Pour doser l'effet, une seule valeur à changer : --negatif.
   0 = blanc pur, 1 = inversion complète. */
/* Surtout pas de z-index ici : il créerait un contexte d'empilement,
   et le calque d'inversion se mélangerait alors avec le vide de ce
   conteneur au lieu de la vidéo. L'empilement est porté par les deux
   calques eux-mêmes, qui restent ainsi dans le contexte de la section. */
.metiers-bloc {
    --negatif: 0.45;

    /* Teinte du calque d'inversion. En chaud, elle produit de l'ambre
       sur les zones sombres du plan et du bleu sur les zones claires.
       Blanc (#ffffff) redonne l'inversion neutre d'origine. */
    --teinte: #f2d9b3;
    position: absolute;
    left: var(--marge-cote);
    right: var(--marge-cote);
    bottom: clamp(1.5rem, 4vh, 3rem);
}

.metiers {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.4rem, 11.5vw, 8.5rem);
    font-weight: 300;
    line-height: 0.94;
    letter-spacing: -0.015em;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
}

/* « exclusion » plutôt que « difference » : même principe d'inversion,
   mais une pente plus douce, qui garde les valeurs claires. */
.metiers-negatif {
    position: absolute;
    inset: 0;
    z-index: 3;
    color: var(--teinte);
    mix-blend-mode: exclusion;
}

.metiers-blanc {
    position: relative;
    z-index: 4;
    opacity: calc(1 - var(--negatif));
}

.metiers span { display: block; }

/* ---------- Indicateur de défilement ---------- */
.indicateur {
    position: absolute;
    bottom: clamp(3rem, 9vh, 6rem);
    right: clamp(3.5rem, 7vw, 6rem);
    transform: translateX(0);
    z-index: 3;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.75rem;
    text-decoration: none;
    opacity: 0.7;
    animation: flotte 2.4s ease-in-out infinite;
    transition: opacity var(--transition);
}

.indicateur:hover { opacity: 1; }

@keyframes flotte {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ---------- Bouton de lecture ---------- */
.lire {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.5rem;
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: inherit;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.lire:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--blanc);
}

.lire .icone { font-size: 0.65em; }

/* ---------- Lecteur plein écran ---------- */
.lecteur {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Doit l'emporter sur le display:flex ci-dessus */
.lecteur[hidden] { display: none; }

.lecteur-cadre {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* contain, et non cover : on montre l'image entière, sans recadrage */
.lecteur video,
.lecteur iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
}

.fermer {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--blanc);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition);
}

.fermer:hover { background: rgba(0, 0, 0, 0.85); }

/* Repère discret : la vidéo de fond est cliquable */
.video-section { cursor: pointer; }
.contact-section { cursor: auto; }

/* ---------- Contact ---------- */
.contact-section { background: var(--noir-doux); }

.contact-section h2 { margin-bottom: 1.75rem; }

.contact-section .pitch {
    margin: 0 0 2.5rem;
    line-height: 1.7;
}

.contact-section .coordonnees {
    font-size: clamp(1rem, 2.2vw, 1.4rem) !important;
    line-height: 2;
    opacity: 1 !important;
}

.contact-section .coordonnees a,
.contact-section .reseaux a {
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    transition: border-color var(--transition), opacity var(--transition);
}

.contact-section .coordonnees a:hover,
.contact-section .reseaux a:hover { border-bottom-color: var(--blanc); }

.contact-section .reseaux {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: clamp(1.25rem, 4vw, 2.5rem);
    font-size: 0.72rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.75 !important;
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 700px) {
    .content h1,
    .content h2 {
        letter-spacing: 0.18em;
        text-indent: 0.18em;
    }

    .content.aligne-bas {
        bottom: 4.5rem;
        max-width: 100%;
    }

    /* En-tête resserré : le nom doit tenir sur une seule ligne
       à côté du menu, même sur un écran de 375 px. */
    .site-header {
        font-size: 0.62rem;
        padding: 1.1rem var(--marge-cote);
        gap: 0.75rem;
    }

    .logo {
        letter-spacing: 0.14em;
        white-space: nowrap;
    }

    .nav-header { gap: 1rem; }

    /* Les étiquettes des pastilles n'ont pas la place de s'afficher. */
    .pastille .etiquette { display: none; }

    .nav-pastilles { gap: 0.75rem; }
}

/* En paysage sur téléphone, la hauteur manque : on resserre. */
@media (max-height: 480px) {
    .content h1 { font-size: 1.9rem; }
    .content h2 { font-size: 1.4rem; }
    .indicateur { display: none; }
    .contact-section .reseaux { margin-top: 1.5rem; }
    .lire { margin-top: 1rem; padding: 0.55rem 1.1rem; }
    .fermer { top: 0.5rem; right: 0.5rem; }
}
/* =============================================================
   Écran vertical : un film par écran

   Les films horizontaux sont recadrés au centre pour remplir
   l'écran du téléphone. On perd les côtés, mais l'accroche prime :
   le cadrage complet s'affiche au toucher, dans le lecteur.

   Le voile des vidéos verticales ne monte qu'au niveau de la
   légende, pour ne pas assombrir le film inutilement.
   ============================================================= */

@media (max-aspect-ratio: 4/5) {

    .video-section[data-format="vertical"]::after {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 58%,
            rgba(0, 0, 0, 0.55) 100%
        );
    }

    /* Aucun bouton sur téléphone : toucher l'image suffit. */
    .video-section .lire { display: none; }

    /* ---------- ESSAI : films horizontaux en 4:3 ----------
       Compromis entre le plein écran, qui ampute les trois quarts de
       la largeur, et la vignette 16/9, qui ne fait que 211 px de haut.
       En 4:3 on ne rogne qu'un quart des côtés, pour 281 px de hauteur.
       Bloc à retirer d'un seul tenant pour revenir au plein écran. */

    /* Indispensable : les vignettes n'ont pas de point d'accroche.
       Avec une aimantation stricte, le navigateur ramène de force vers
       la section plein écran la plus proche, et l'on ne peut pas
       s'arrêter au milieu des vignettes. */
    .container { scroll-snap-type: y proximity; }

    .video-section:not(.accueil):not([data-format="vertical"]) {
        display: block;
        height: auto;
        min-height: 0;
        padding-bottom: 0.35rem;
        scroll-snap-align: none;
    }

    .video-section:not(.accueil):not([data-format="vertical"])::before,
    .video-section:not(.accueil):not([data-format="vertical"])::after {
        inset: 0 0 auto 0;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .video-section:not(.accueil):not([data-format="vertical"])::after {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.55) 100%
        );
    }

    .video-section:not(.accueil):not([data-format="vertical"])::before { transform: none; }

    .video-section:not(.accueil):not([data-format="vertical"]) .media {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* La vidéo garde son format et remplit le cadre 4:3 :
       ce sont les côtés qui sortent, pas le haut ni le bas. */
    .video-section:not(.accueil):not([data-format="vertical"]) .media iframe,
    .video-section:not(.accueil):not([data-format="vertical"]) .media video {
        top: 50%;
        left: 50%;
        width: auto;
        height: 100%;
        aspect-ratio: var(--ratio, 1.7778);
        min-width: 0;
        min-height: 0;
        transform: translate(-50%, -50%) scale(var(--zoom, 1));
    }

    /* Légende posée sur la vignette : titre à gauche, catégorie à droite. */
    .video-section:not(.accueil):not([data-format="vertical"]) .content.aligne-bas {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        aspect-ratio: 4 / 3;
        max-width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0 0.9rem 0.7rem;
    }

    .video-section:not(.accueil):not([data-format="vertical"]) .content h2 { order: 1; }
    .video-section:not(.accueil):not([data-format="vertical"]) .sur-titre  { order: 2; }
    .video-section:not(.accueil):not([data-format="vertical"]) .meta { display: none; }

    .video-section:not(.accueil):not([data-format="vertical"]) .content h2 {
        font-size: 1.05rem;
        font-weight: 400;
        letter-spacing: 0.07em;
        text-indent: 0.07em;
        margin: 0;
        line-height: 1.1;
    }

    .video-section:not(.accueil):not([data-format="vertical"]) .sur-titre {
        font-size: 0.55rem;
        letter-spacing: 0.2em;
        margin: 0 0 0.15rem;
        opacity: 0.8;
        white-space: nowrap;
    }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
    .container { scroll-behavior: auto; }
    .indicateur { animation: none; }
    .video-section.sans-video::before { animation: none; }
    .media { transition: none; }
}