/* =============================================================================
   globals.css — Base du site : variables, polices, remise à zéro, typographie,
   mise en page générale et petites classes utilitaires.
   Mobile first : les règles de base visent le téléphone, les @media élargissent.
   Points de rupture : 480px (grand téléphone) · 768px (tablette) · 1024px (ordinateur)
   ============================================================================= */

/* ---------- VARIABLES ---------- */

:root {
    /* Couleurs de la marque */
    --green-dark: #0F3834;
    --green-dark-2: #103728;
    --gree-dark-3: #359570;
    --green-light: #040504;
    --green-mint: #52a26e;
    --green-mint-2: #5ecc81;
    --blue-dark: #26334E;
    --blue-text: #27344E;
    --pink: #F06384;
    --pink-2: #FB627E;

    /* Neutres */
    --white: #E8EAEA;
    --white-pure: #FFFFFF;
    --grey-light: #F5F5F5;
    --grey-input: #E1E2E7;
    --grey-placeholder: #B5B5B5;
    --grey-text: #25282F;
    --grey-dark: #191A22;

    /* Messages */
    --error-bg: #FFBBBB;
    --error-text: #F75A74;
    --success-bg: #CBFFDC;
    --success-text: #3FA866;
    --warning-bg: #EDE4A6;

    /* Fond de page */
    --bg-top: #D6F0FD;
    --bg-bottom: #F2E5EA;

    /* Polices */
    --font-text: 'Roboto', Helvetica, Arial, sans-serif;
    --font-hand: 'Noteworthy', var(--font-text);

    /* Formes */
    --radius-s: 0.5rem;
    --radius-m: 1rem;
    --radius-l: 20px;
    --radius-pill: 100px;
    --shadow-card: 0 0 5px rgba(0, 0, 0, 0.096);
    --shadow-soft: 0 0 8px rgba(110, 110, 110, 0.2);

    /* Mise en page */
    --header-height: 4rem;
    --header-gap: 0.75rem;
    --header-offset: calc(var(--header-height) + 2 * var(--header-gap)); 
    --content-max: 800px;
    --gutter: 1rem;
}

/* ---------- POLICES ---------- */
/* Roboto : licence libre (Apache 2.0), servie par le site */

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-light.woff2') format('woff2'),
         url('../fonts/roboto-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular.woff2') format('woff2'),
         url('../fonts/roboto-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-bold.woff2') format('woff2'),
         url('../fonts/roboto-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Noteworthy : police Apple, utilisée seulement si elle est déjà installée (Mac, iPhone).
   Elle n'est pas envoyée par le site (licence), les autres appareils affichent Roboto. */
@font-face {
    font-family: 'Noteworthy';
    src: local('Noteworthy Light'), local('Noteworthy-Light'), local('Noteworthy');
    font-weight: 300 400;
    font-display: swap;
}

@font-face {
    font-family: 'Noteworthy';
    src: local('Noteworthy Bold'), local('Noteworthy-Bold');
    font-weight: 700 800;
    font-display: swap;
}

/* ---------- REMISE À ZÉRO ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

img,
svg,
video,
iframe {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

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

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background-color: var(--green-dark);
    color: var(--white);
}

/* ---------- PAGE ---------- */

body {
    min-height: 100vh;
    font-family: var(--font-text);
    color: var(--grey-text);
    line-height: 1.5;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom)) fixed;
}

/* En-tête, contenu qui s'étire, pied de page toujours en bas */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* L'en-tête flotte par-dessus la page (position: fixed) : on lui réserve sa place en haut… */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-offset);
}

/* …sauf sur l'accueil, où le splashscreen passe volontairement sous l'en-tête */
.page-home main {
    padding-top: 0;
}

.main-container {
    width: 100%;
    text-align: center;
}

/* ---------- TYPOGRAPHIE ---------- */

h1,
h2,
h3,
h4 {
    font-weight: 700;
    color: var(--green-dark);
    text-shadow: 0 0 12px rgba(16, 22, 61, 0.23);
}

h1 { font-size: 2rem;   line-height: 1.4; padding: 1.5rem 0; }
h2 { font-size: 1.5rem; line-height: 1.6; padding: 1.2rem 0; }
h3 { font-size: 1.2rem; line-height: 1.7; padding: 1rem 0; }
h4 { font-size: 1rem;   line-height: 1.3; padding: 1rem 0; }

strong,
b {
    font-weight: 700;
}

/* ---------- UTILITAIRES ---------- */

.center {
    text-align: center;
}

.txt-little {
    font-size: 0.9rem;
}

/* Texte lu par les lecteurs d'écran mais invisible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- TABLETTE ET PLUS ---------- */

@media (min-width: 768px) {
    :root {
        --header-gap: 1rem;
    }
    body {
        background:
            url('../img/main-bkg.svg') center / cover no-repeat fixed,
            linear-gradient(180deg, var(--bg-top), var(--bg-bottom)) fixed;
    }

    h1 { font-size: 2.5rem; line-height: 1.3; padding: 2rem 0; }
    h2 { font-size: 1.8rem; line-height: 1.4; padding: 1.5rem 0; }
    h3 { font-size: 1.5rem; line-height: 1.35; padding: 1.3rem 0; }
    h4 { font-size: 1.3rem; line-height: 1.4; }
}