@charset "UTF-8";

@font-face {
    font-family: "SansSerifFLF";
    src: url("/wp-content/themes/msf/assets/fonts/SansSerifFLF.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SansSerifFLF";
    src: url("/wp-content/themes/msf/assets/fonts/SansSerifFLF-Demibold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}

:root {
    font-family: 'SansSerifFLF';
    --bold-weight: 600;

    /*
     * Rayon d'arrondi de référence des surfaces (cartes, encarts, accordéons).
     * Était consommé par pagination-style.css et les pages single sans avoir
     * jamais été déclaré : les fallbacks locaux var(--corner-radius, 8px)
     * peuvent donc être retirés progressivement.
     */
    --corner-radius: 8px;

    /*
     * Échelle de breakpoints (référence unique, mobile-first).
     * Ne peuvent pas être utilisées dans une condition @media (limitation
     * CSS actuelle) : sert de convention pour tous les fichiers CSS/JS,
     * et est lisible depuis le JS via getComputedStyle().
     */
    --bp-sm: 480px;
    /* mobile large / paysage */
    --bp-md: 768px;
    /* tablette */
    --bp-lg: 1024px;
    /* tablette large / petit laptop */
    --bp-xl: 1280px;
    /* desktop standard */
    --bp-2xl: 1536px;
    /* grand desktop */
    --bp-3xl: 1920px;
    /* widescreen */

    /*
     * Typographie fluide : chaque taille grandit en continu entre un mobile
     * de 360px et un widescreen de 1920px, sans palier brutal aux breakpoints.
     * Formule : clamp(min, intercept + coefficient*vw, max) — voir la
     * méthodologie CSS partagée pour reproduire ce calcul sur d'autres tailles.
     * line-height passe en valeur unitless (multiplicateur de la taille de
     * police) pour rester cohérente à toutes les tailles.
     */
    --display-large-font-size: clamp(2rem, 1.6rem + 1.79vw, 3.75rem);
    --display-large-line-height: 1.15;
    --display-medium-font-size: clamp(1.75rem, 1.46rem + 1.28vw, 3rem);
    --display-medium-line-height: 1.15;
    --display-small-font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.375rem);
    --display-small-line-height: 1.25;
    --headline-large-font-size: clamp(1.375rem, 1.23rem + 0.64vw, 2rem);
    --headline-large-line-height: 1.25;
    --headline-medium-font-size: clamp(1.25rem, 1.14rem + 0.51vw, 1.75rem);
    --headline-medium-line-height: 1.3;
    --headline-small-font-size: clamp(1.125rem, 1.04rem + 0.38vw, 1.5rem);
    --headline-small-line-height: 1.4;
    --body-large-font-size: clamp(0.9375rem, 0.89rem + 0.19vw, 1.125rem);
    --body-large-line-height: 1.45;
    --body-medium-font-size: clamp(0.8125rem, 0.78rem + 0.13vw, 0.9375rem);
    --body-medium-line-height: 1.45;
}

html .light {
    --primary: #F28A1C;
    --on-primary: #FFFFFF;
    --primary-container: #FFDCC2;
    --on-primary-container: #6D3900;
    --secondary: #0066CC;
    --on-secondary: #D9D9D9;
    --secondary-container: #D7E3FF;
    --on-secondary-container: #00458E;
    --surface: #FCF8F8;
    --surface-container: #FFF;
    --surface-container-highest: #EBE8E7;
    --surface-container-var: #F4F0EF;
    --on-surface: #484646;
    --on-surface-var: #000;
    --outline: #DCD9D8;
    --sucess-surface: #B9F21C;
    --error-surface: #FF5449;
}

html .dark {
    --primary: #FFB77C;
    --on-primary: #4D2700;
    --primary-container: #6D3900;
    --on-primary-container: #FFDCC2;
    --secondary: #AAC7FF;
    --on-secondary: #002F65;
    --secondary-container: #00458E;
    --on-secondary-container: #D7E3FF;
    --surface: #1F0C00;
    --surface-container: #2E1500;
    --surface-container-highest: #353434;
    --surface-container-var: #3C1E00;
    --on-surface: #C9C6C5;
    --on-surface-var: #FFF;
    --outline: #929090;
    --sucess-surface: #B9F21C;
    --error-surface: #FF5449;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span {
    color: var(--on-surface);
}

h1 {
    font-size: var(--display-large-font-size);
    line-height: var(--display-large-line-height);
}

h2 {
    font-size: var(--display-medium-font-size);
    line-height: var(--display-medium-line-height);
}

h3 {
    font-size: var(--display-small-font-size);
    line-height: var(--display-small-line-height);
}

h4 {
    font-size: var(--headline-large-font-size);
    line-height: var(--headline-large-line-height);
}

h5 {
    font-size: var(--headline-medium-font-size);
    line-height: var(--headline-medium-line-height);
}

h6 {
    font-size: var(--headline-small-font-size);
    line-height: var(--headline-small-line-height);
}

p,
span,
a {
    font-size: var(--body-large-font-size);
    line-height: var(--body-large-line-height);
}

a {
    text-decoration: none;
}

svg {
    fill: var(--primary);
    stroke: var(--primary);
}

body {
    background-color: var(--surface);
}