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

/* CSS Reset - Base pour tous les navigateurs */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    color-scheme: light;
    /* Force le navigateur à ne pas inverser les couleurs et rester en mode light!! ou color-scheme: dark; */

    /* Base couleur */
    --noir-doux: #2C2C2C;

    --blanc-pur: #FFFFFF;
    --blanc-2: #FCFCFC;
    --blanc-doux: #F8F8F8;
    --ivoire: #FDF8F0;
    --sable-clair: #EDE4D7;
    --gris-perle: #E3E3E3;
    --gris-clair: #D0D0D0;
    --gris-neutre: #888888;

    --bleu-clair: #B3D4E0;
    --bleu-acier: #7A9FB9;
    --bleu-vif: #5DADE2;
    --bleu-gris: #5F8CA3;
    --bleu-ardoise-clair: #3b4250;
    --bleu-ardoise: #2a303b;
    --bleu-ardoise-fonce: #1f242e;

    --jaune-pale: #FFF3B0;
    --orange-clair: #ffae00;


    /* Variables d'espacement */
    /* Ultra fin - mobile chirurgical */
    --spacing-xxs: clamp(0.25rem, 0.5vw, 0.5rem);
    --spacing-xs: clamp(0.5rem, 1vw, 0.75rem);

    /* Medium - usage général */
    --spacing-sm: clamp(0.75rem, 1.5vw, 1rem);
    --spacing-md: clamp(1rem, 2vw, 1.5rem);
    --spacing-lg: clamp(1.5rem, 3vw, 2rem);

    /* Large - grands espaces */
    --spacing-xl: clamp(2rem, 4vw, 2.5rem);
    --spacing-xxl: clamp(2.5rem, 5vw, 3rem);

    /* Énorme - hero/sections */
    --spacing-xxxl: clamp(3rem, 6vw, 4rem);

    /* largeur des pages */
    --max-width-content: clamp(28rem, 10rem + 59vw, 63rem);;
    
}


/* Focus visible accessible pour tous les éléments interactifs */
/* Reset focus moderne et universel */
*:focus-visible {
    outline: 3px solid var(--bleu-vif);
    outline-offset: 2px;
}

/* Transition douce pour tous les éléments interactifs de base */
button,
a,
input,
textarea,
select,
summary {
    transition: outline 0.15s ease-in-out;
}






html {
    font-size: 16px;
    color: var(--noir-doux);
    font-family: 'Inter';
}

body,
html {
    width: 100%;
}

/* important pour pousser le footer en bas */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--blanc-doux);
}

main {
    flex: 1;
}

footer {
    margin-top: auto;
}



/* Titres globaux — tailles, interlignes et marges (pas de font-weight ici) */
h1 {
    font-size: clamp(1.25rem, 1rem + 2.8vw, 3.2rem);
    line-height: 1.2;
    margin: 0;
}

h2 {
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    line-height: 1.3;
    margin: 0 0 clamp(0.9rem, 2vw, 1.25rem) 0;
}

h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    /* 18.4px → 24px → 24px */
    line-height: 1.35;
    margin: 0 0 clamp(0.6rem, 1.2vw, 0.9rem);
}

h4 {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    /* 16.8px → 20px → 20px */
    line-height: 1.4;
    margin: 0 0 clamp(0.5rem, 1vw, 0.7rem);
}

h5 {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    /* 16.8px → 20px → 20px */
    line-height: 1.4;
    margin: 0 0 clamp(0.5rem, 1vw, 0.7rem);
}

/* Paragraphes et éléments de texte — taille et interligne */
p {
    font-size: clamp(0.8rem, 0.8rem + 0.3vw, 1.15rem);
    line-height: 1.65;
}

li,
dd,
summary {
    line-height: 1.6;
    /* Ne pas définir font-weight globalement ici :
       appliquer localement dans les pages si nécessaire */
}

/* Reset basique des listes et liens */
ul,
ol, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* ==============================
   Listes de base : UL et OL
   ============================== */

ul,
ol {
   list-style-type: disc;
}

/* items de premier niveau */
ul>li,
ol>li {
    margin: var(--spacing-sm) 0;
    line-height: 1.5;
}

/* ==============================
   Sous-listes (niveau 2)
   ============================== */
ul ul,
ol ol {
    margin-left: var(--spacing-lg);
    list-style-type: circle;
}

ul ul>li,
ol ol>li {
    margin: var(--spacing-xs) 0;
}

/* ==============================
   Sous-sous-listes (niveau 3+)
   ============================== */
ul ul ul,
ol ol ol {
    margin-left: var(--spacing-lg);
    list-style-type: square;
}

ul ul ul>li,
ol ol ol>li {
    margin: var(--spacing-xxs) 0;
}


.rythme {
    margin-top: var(--spacing-xs);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

img {
    display: block;
    /* Rend les images des éléments block, élimine l'espace en bas */
    margin-bottom: 0;
    /* Enlève toute marge en bas */
    padding-bottom: 0;
    /* Enlève toute marge interne */
}

/* ===== ===================================  */



/* ===== ===================================  */
/* Conteneur global - centre le contenu */
/* ===== ===================================  */
.conteneur-section {
    background-color: var(--blanc-doux);
    padding: var(--spacing-lg) 0;
    display: flex;
    justify-content: center;
    
}

.contenu-section {
    width: 100%;
    max-width: var(--max-width-content);
    
    padding: 0 var(--spacing-md);
    text-align: justify;
   
}

.contenu-section p {
    margin-bottom: var(--spacing-md);
}




/* ===== ===================================  */
/* ===== FOOTER ===== */
/* ===== ===================================  */

.site-footer {
    text-align: center;
    padding: var(--spacing-lg);
    font-size: 0.85rem;
    color: var(--gris-neutre);
    margin-top: var(--spacing-xxxl);
}

.site-footer .social-list {
    justify-content: center;
}

.site-footer a {
    color: var(--gris-neutre);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.site-footer a:hover {
    color: var(--noir-doux);
    border-bottom: 1px solid var(--noir-doux);
}



/* ===== ===================================  */
/* ===== pour les pages films ===== */
/* ===== ===================================  */

.film-meta p {
    margin-bottom: 0;
}