/* ============================================================
   GUADAV - France Victimes 971
   Design system : variables, reset, typographie, grille, utilitaires
   ============================================================ */

/* --- Police : Inter, auto-hébergée en local (woff2), aucun appel tiers (RGPD) ---
   Graisses embarquées : 400, 500, 600, 700, 800 (celles réellement utilisées).
   Sous-ensemble latin. font-display: swap -> texte visible immédiatement. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

/* ============================================================
   Variables CSS
   ============================================================ */
:root {
    /* Palette principale */
    --bleu:          #01518e;
    --bleu-dark:     #013d6b;
    --bleu-light:    #e6f0f8;
    --vert:          #9dc845;
    --vert-dark:     #6e9a28;
    --vert-light:    #f0f7e0;
    --vert-don:      #48b156;   /* vert du bouton « Faire un don » */
    --vert-don-dark: #3a8f48;   /* survol du bouton don */
    --orange:        #fc9401;
    --orange-dark:   #c97600;
    --orange-light:  #fff4e0;
    --urgence:       #ff1053;   /* bandeau d'urgence — rouge vif très visible */

    /* Texte et fond */
    --texte:         #1a1a2e;
    --texte-sec:     #555555;
    --fond:          #f8f8f8;
    --blanc:         #ffffff;
    --bordure:       #e0e0e0;

    /* Typographie — Inter auto-hébergée + fallback système propre */
    --font-titre:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-corps:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Tailles de texte */
    --text-xs:       0.75rem;   /* 12px */
    --text-sm:       0.875rem;  /* 14px */
    --text-base:     1rem;      /* 16px */
    --text-lg:       1.125rem;  /* 18px */
    --text-xl:       1.375rem;  /* 22px */
    --text-2xl:      1.75rem;   /* 28px */
    --text-3xl:      2.25rem;   /* 36px */

    /* Espacement */
    --space-xs:      0.25rem;
    --space-sm:      0.5rem;
    --space-md:      1rem;
    --space-lg:      1.5rem;
    --space-xl:      2rem;
    --space-2xl:     3rem;
    --space-3xl:     4rem;
    --space-4xl:     6rem;

    /* Rayons de bordure */
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --radius-full:   9999px;

    /* Ombres */
    --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition:    0.25s ease;

    /* Largeur max du contenu */
    --max-width:     1200px;

    /* Hauteur du header (adaptée à la taille du logo, voir media query plus bas) */
    --header-height: 80px;
}

/* Header plus haut sur tablette/desktop pour accueillir le logo agrandi */
@media (min-width: 768px) {
    :root {
        --header-height: 104px;
    }
}

/* ============================================================
   Reset / Box-sizing
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-corps);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--texte);
    background-color: var(--fond);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--bleu);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--bleu-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

ul,
ol {
    list-style: none;
}

/* Puces colorées en vert pour les listes de contenu */
.content ul {
    list-style: disc;
    padding-left: var(--space-lg);
}

.content ul li::marker {
    color: var(--vert);
}

/* Aération des titres et blocs dans les contenus longs (pages éditoriales) */
.content h2 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.content h3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.content h4 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.content p,
.content ul,
.content ol {
    margin-bottom: var(--space-md);
}

.content li {
    margin-bottom: var(--space-xs);
}

/* Pas d'espace superflu avant le tout premier élément du contenu */
.content > :first-child {
    margin-top: 0;
}

/* Séparateurs de section */
hr {
    border: none;
    height: 2px;
    background-color: var(--vert);
    margin-block: var(--space-xl);
}

button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
}

/* ============================================================
   Typographie
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-titre);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bleu-dark);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

/* Les titres stylés par composant gèrent leur propre espacement :
   on neutralise la marge haute pour ne pas casser cartes, hero, etc. */
.section-title,
.hero__title,
.card__title,
.card-actu__title,
.contact-infos__title,
.actu-docs__title,
.admin-page-title {
    margin-top: 0;
}

h1 {
    font-size: var(--text-2xl);
    font-weight: 800;
}

h2 {
    font-size: var(--text-xl);
}

h3 {
    font-size: var(--text-lg);
}

h4 {
    font-size: var(--text-base);
}

p + p {
    margin-top: var(--space-md);
}

/* ============================================================
   Grille et conteneur
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid-2 {
    grid-template-columns: 1fr;
}

.grid-3 {
    grid-template-columns: 1fr;
}

/* ============================================================
   Utilitaires
   ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-bleu   { color: var(--bleu); }
.text-orange { color: var(--orange); }
.text-sec    { color: var(--texte-sec); }

.bg-bleu-light  { background-color: var(--bleu-light); }
.bg-orange-light { background-color: var(--orange-light); }
.bg-blanc        { background-color: var(--blanc); }

.section-padding {
    padding-block: var(--space-2xl);
}

.section-title {
    font-size: var(--text-xl);
    text-align: center;
    margin-bottom: var(--space-xl);
    position: relative;
    padding-bottom: var(--space-sm);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--orange);
    border-radius: var(--radius-full);
}

/* ============================================================
   Responsive - mobile first
   ============================================================ */

/* sm - 640px */
@media (min-width: 640px) {
    .container {
        padding-inline: var(--space-lg);
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* md - 768px */
@media (min-width: 768px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    h4 { font-size: var(--text-lg); }

    .section-padding {
        padding-block: var(--space-3xl);
    }

    .section-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-2xl);
    }
}

/* lg - 1024px */
@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .container {
        padding-inline: var(--space-xl);
    }
}

/* xl - 1280px */
@media (min-width: 1280px) {
    :root {
        --max-width: 1280px;
    }
}