/*
 * Charte « Étiquette » : variables, typographie et mise en page générale.
 * Les couleurs principale et secondaire viennent du site (back-office › Sites › Personnalisation),
 * injectées par front/layout/base_front.html.twig dans --primary-color et --secondary-color.
 */
:root {
    --couleur-principale: var(--primary-color, #E8003F);
    --couleur-secondaire: var(--secondary-color, #121F26);
    --principale-douce: color-mix(in srgb, var(--couleur-principale) 10%, #fff);
    --principale-fonce: color-mix(in srgb, var(--couleur-principale) 80%, #000);

    --anthracite: #121F26;
    --texte: #121F26;
    --texte-moyen: #3B474E;
    --texte-discret: #55626A;
    --texte-sur-fonce: #D5DCE0;
    --fond: #FFFFFF;
    --fond-doux: #F3F5F6;
    --bordure: #E2E6E9;
    --bordure-forte: #CBD2D6;

    --dispo-fond: #E3F4EA;
    --dispo-texte: #17603C;
    --reserve-fond: #FFF1D6;
    --reserve-texte: #7A4A00;
    --donne-fond: #E9ECEE;
    --donne-texte: #3B474E;
    --attente-fond: #E7EEFB;
    --attente-texte: #1D4280;
    --alerte-fond: #FDECEF;
    --alerte-texte: #6E0021;
    --alerte-accent: #B00035;

    --police-titres: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --police-texte: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --rayon-petit: 12px;
    --rayon: 18px;
    --rayon-grand: 26px;
    --ombre-etiquette: 0 4px 0 var(--anthracite);
    --ombre-carte: 0 16px 32px rgba(18, 31, 38, 0.12);

    --largeur: 1240px;
    --marge: 32px;

    /* compatibilité avec les gabarits et feuilles de style complémentaires de l'ancien thème */
    --tp-theme-1: var(--couleur-principale);
    --tp-theme-1-a: var(--principale-douce);
    --tp-common-black: var(--anthracite);
    --site-fond: var(--couleur-secondaire);
}

@media (max-width: 600px) {
    :root { --marge: 16px; }
}

html { scroll-behavior: smooth; }

/* L'attribut hidden (et la classe .hide des scripts existants) l'emporte toujours sur un display posé par la charte */
[hidden], .hide { display: none !important; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-titres);
    color: inherit;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
h1 { font-weight: 800; letter-spacing: -0.035em; }
h2 { font-weight: 800; letter-spacing: -0.03em; }
h3, h4 { font-weight: 700; }

a { color: var(--texte); text-underline-offset: 3px; }
a:hover { color: var(--texte-discret); }

img { max-width: 100%; height: auto; }

mark { background: #FFE7A3; color: var(--texte); padding: 0 3px; border-radius: 3px; }

/* Accessibilité : lien d'évitement (RGAA 12.7), focus toujours visible (10.7), animations réduites */
.lien-evitement {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: #fff; color: var(--anthracite); padding: 10px 16px; font-weight: 700;
}
.lien-evitement:focus { left: 10px; top: 10px; outline: 3px solid var(--anthracite); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--anthracite) !important;
    outline-offset: 3px;
}
.sr-only, .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Mise en page */
.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--marge);
}
.section { padding-block: 80px; }
.section--douce { background: var(--fond-doux); }
.section--foncee { background: var(--couleur-secondaire); color: #fff; }
.section--foncee a:not(.bouton) { color: #fff; }
@media (max-width: 768px) { .section { padding-block: 56px; } }

.titre-section {
    margin: 0 0 10px;
    font-size: clamp(30px, 3.4vw, 42px);
}
.chapeau-section { margin: 0 0 32px; color: var(--texte-discret); font-size: 19px; max-width: 44em; }
.section--foncee .chapeau-section { color: var(--texte-sur-fonce); }
.entete-section {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 12px 24px; margin-bottom: 28px;
}
.entete-section .titre-section { margin: 0; }

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

/* Variantes de libellé selon la largeur d'écran (une seule est lue par les lecteurs d'écran) */
.seulement-mobile { display: none; }
@media (max-width: 600px) {
    .seulement-mobile { display: inline; }
    .seulement-ordinateur { display: none; }
}

.texte-discret { color: var(--texte-discret); }
.petit-texte { font-size: 15px; }