/* assets/css/variables.css
   Reset + fondations partagées par tous les blocs : polices auto-hébergées,
   classes utilitaires transversales (.container, .film-frame, .frame-number)
   qui incarnent l'identité "planche-contact argentique" du site.
   Les couleurs/polices exactes sont injectées par index.php depuis config.json.
*/

/* --- Polices auto-hébergées ---
   Dépose les fichiers .woff2 correspondants dans assets/fonts/ :
   - Anton-Regular.woff2        (affichage, titres)
   - Archivo-Regular.woff2      (texte courant)
   - Archivo-Bold.woff2         (texte courant, gras)
   - JetBrainsMono-Regular.woff2 (légendes, données techniques)
   Tant que les fichiers ne sont pas présents, le site utilise les polices
   système de secours définies dans le thème (config.json) sans erreur.
*/
@font-face {
    font-family: 'Anton';
    src: url('../fonts/Anton-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body, 'Archivo', sans-serif);
    color: var(--color-text, #E7E5E0);
    background-color: var(--color-bg, #0E0E0D);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

section {
    padding-block: 4rem;
}

@media (min-width: 768px) {
    section {
        padding-block: 6.5rem;
    }
}

/* --- Signature transversale : bande "négatif argentique" ---
   Bordure de perforations façon pellicule 35mm, appliquée sur les visuels
   du bloc présentation et du slider. Les "trous" sont simulés en radial-gradient
   de la couleur de fond, sur une bande légèrement plus claire que le fond.
*/
.film-frame {
    position: relative;
    padding-inline: 1.1rem;
    background-color: #1c1c1a;
}

.film-frame::before,
.film-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.1rem;
    background-image: radial-gradient(circle at center, var(--color-bg, #0E0E0D) 3px, transparent 3.5px);
    background-size: 100% 1.4rem;
    background-repeat: repeat-y;
}

.film-frame::before {
    left: 0;
}

.film-frame::after {
    right: 0;
}

.film-frame__inner {
    overflow: hidden;
}

/* --- Signature transversale : numéro de vue façon étiquette de labo --- */
.frame-number {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted, #6B6A66);
}

.frame-number::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--color-accent, #B23A2E);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}