/* ==========================================================================
   Direction artistique « salle et atelier » : palette, typographie, contextes
   Chargé par les six pages avant leurs styles propres.
   ========================================================================== */

/* Polices hébergées sur le site (licence SIL OFL 1.1, voir /fonts/OFL-*.txt).
   Archivo : la seule instance utilisée, largeur 62 % et graisse 800.
   Familjen Grotesk : fichier variable, graisses 400 à 700. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-stretch: 62%;
    font-display: swap;
    src: url('/fonts/archivo-62-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-stretch: 62%;
    font-display: swap;
    src: url('/fonts/archivo-62-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/familjen-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Familjen Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/familjen-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Palette */
    --salle: #000000;      /* fond des bandes de film */
    --ecran: #1B1D21;      /* fond d'un cadre vidéo pendant le chargement */
    --lumiere: #F2F0EB;    /* texte sur fond noir */
    --lumiere-2: #C9C5BC;  /* texte secondaire sur fond noir */
    --carton: #E3E1DC;     /* fond de tout ce qui se lit */
    --papier: #FFFFFF;     /* cartes, feuilles, encadrés */
    --encre: #1C1C1A;      /* texte sur fond clair */
    --graphite: #5C5954;   /* texte secondaire sur fond clair */
    --bleu: #A4DDED;       /* bleu non photo : repères de cadrage et annotations */
    --rose: #D7263D;       /* seule couleur d'accent : boutons, prix, liens importants */

    /* Typographie */
    --titre: 'Archivo', 'Arial Narrow', sans-serif;
    --texte: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;

    /* Contexte par défaut : l'atelier (fond clair) */
    --bg: var(--carton);
    --surface: var(--papier);
    --fg: var(--encre);
    --fg-2: var(--graphite);
    --filet: rgba(92, 89, 84, 0.28);
}

/* Contexte clair : tout ce qui se lit */
.clair {
    --bg: var(--carton);
    --surface: var(--papier);
    --fg: var(--encre);
    --fg-2: var(--graphite);
    --filet: rgba(92, 89, 84, 0.28);
    background: var(--carton);
    color: var(--encre);
}

/* Contexte salle : une section noire seulement quand son contenu principal est un film */
.salle {
    --bg: var(--salle);
    --surface: var(--ecran);
    --fg: var(--lumiere);
    --fg-2: var(--lumiere-2);
    --filet: #4A4C50;
    background: var(--salle);
    color: var(--lumiere);
}

/* Bandes de cache noires en haut et en bas des bandes de film, comme au cinéma */
.cache { position: relative; }
.cache::before,
.cache::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18px;
    background: var(--salle);
    z-index: 6;
    pointer-events: none;
}
.cache::before { top: 0; }
.cache::after { bottom: 0; }
@media (max-width: 760px) {
    .cache::before, .cache::after { height: 16px; }
}

/* Typographie de base */
body {
    font-family: var(--texte);
    line-height: 1.5;
    background: var(--carton);
    color: var(--encre);
}

/* Titres : Archivo condensé, graisse 800, capitales */
h1, h2 {
    font-family: var(--titre);
    font-stretch: 62%;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.93;
}

/* Le plan qui s'ouvre : l'image de la carte Still Human de la home devient l'en-tête de la page Still Human.
   Transitions natives entre documents (navigateurs sans support : navigation normale). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}
::view-transition-group(affiche-still-human) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
::view-transition-old(affiche-still-human),
::view-transition-new(affiche-still-human) {
    animation-duration: 0.5s;
    height: 100%;
    object-fit: cover;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
}