/* ==========================================================================
   vitrine.css — feuille de style du SITE VITRINE d'Elpiane (elpiane.fr, pages
   publiques : accueil, services, tarifs, contact, mentions légales,
   confidentialité), chargée par le seul gabarit `gabarits/vitrine.blade.php`.

   POURQUOI une feuille à part de plateforme.css : le site commercial a sa propre
   identité (marque Elpiane, bandeaux bleu nuit, accents verts) et doit rester
   LÉGER — une seule feuille, écrite à la main et servie telle quelle (pas de Node
   ni de Vite sur ce projet), aucune ressource externe : polices système, aucun
   CDN, aucune image venue d'ailleurs : le logo (`public/images/`, produit par
   `design/generer-images.php`) et les SVG écrits dans les pages. Le back-office
   garde plateforme.css, sans risque qu'un changement ici le casse.

   Noms de classes en FRANÇAIS, sans accent, en BEM léger (`.bloc`,
   `.bloc__element`, `.bloc--variante`), comme plateforme.css.

   Contrastes (WCAG 2.2 AA, calculés le 2026-10-28, recalculés par script à
   l'arrivée du logo) :
   - bleu nuit #1A2B41 sur blanc : 14,3:1 — texte, titres, bandeaux. C'est le bleu
     relevé sur le LOGO (fourni le 2026-10-28) ; il remplace #1E2A44 pour que
     texte et logo aient exactement la même couleur. Il est un peu plus sombre :
     chaque contraste où il entre MONTE légèrement (sur blanc 14,29 → 14,33 ; sur
     le vert 5,23 → 5,24 ; texte clair #DDE3EE posé dessus 11,09 → 11,12), aucun
     ne baisse ;
   - vert feuille #7CAA43 sur blanc : 2,7:1 seulement → JAMAIS pour du texte sur
     fond clair. Il sert aux accents décoratifs (filets, puces), aux boutons
     « accent » écrits en bleu nuit (bleu nuit sur vert : 5,2:1) et au texte
     posé sur le bleu nuit (vert sur bleu nuit : 5,2:1). Le vert du LOGO,
     #6A983E, n'est volontairement PAS repris : le bleu nuit posé dessus ne
     donne que 4,2:1, sous les 4,5:1 exigés pour le texte des boutons ;
   - vert foncé #4A7A1F : la version « texte » du vert, 5,1:1 sur blanc et
     4,8:1 sur le fond clair #F5F7F2 ;
   - gris de texte atténué #4A5568 : 8:1 sur blanc ; bordure des champs
     #8A94A6 : 3,1:1 sur blanc (seuil des composants d'interface) ;
   - focus : contour bleu nuit sur fond clair, vert sur bleu nuit (variable
     `--couleur-focus`, redéfinie par les bandeaux sombres).

   Sommaire :
     1. Variables
     2. Base (reset léger, typographie, liens)
     3. Accessibilité (focus, lien d'évitement, sr-only)
     4. En-tête et navigation
     5. Bandeaux (titre de l'accueil, en-tête de page) et sections
     6. Cartes, encadrés, encart « Important », listes, étapes, prix, options
     7. Tableaux
     8. Formulaire de contact et alertes
     9. Pages légales
    10. Pied de page
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
    /* Bleu nuit du logo (voir les contrastes en tête). */
    --bleu-nuit: #1A2B41;
    --bleu-nuit-clair: #2B3A5C;
    --vert: #7CAA43;
    --vert-fonce: #4A7A1F;
    --vert-pale: #EEF4E6;

    --fond: #FFFFFF;
    --fond-clair: #F5F7F2;
    --texte: var(--bleu-nuit);
    --texte-attenue: #4A5568;
    --texte-sur-sombre: #DDE3EE;
    --bordure: #DCE2D3;
    --bordure-champ: #8A94A6;

    --succes: #1F7A4D;
    --succes-fond: #E6F4EC;
    --danger: #B42318;
    --danger-fond: #FDECEA;

    --couleur-focus: var(--bleu-nuit);

    /* Polices SYSTÈME uniquement (aucune police téléchargée) : textes en
       sans-serif de l'appareil, titres en police à empattements classique,
       présente sur macOS (Iowan Old Style), Windows (Palatino Linotype) et
       ailleurs (Georgia) — un registre « juridique » sobre, sans fichier. */
    --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --police-titres: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --police-code: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;

    --rayon: 10px;
    --rayon-petit: 8px;
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* Défilement doux vers les ancres (#accueil-telephonique…), sauf pour qui a
   demandé à réduire les animations. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Une ancre visée ne se colle pas au bord haut de la fenêtre. */
[id] {
    scroll-margin-top: 1.25rem;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.75rem;
    font-family: var(--police-titres);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bleu-nuit);
}

h1 {
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
}

h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

p,
ul,
ol,
dl {
    margin: 0 0 1rem;
}

/* Liens : bleu nuit SOULIGNÉ d'un filet vert. Le soulignement les distingue
   du texte sans dépendre de la couleur seule (§23). */
a {
    color: var(--bleu-nuit);
    text-decoration: underline;
    text-decoration-color: var(--vert);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--vert-fonce);
}

svg {
    max-width: 100%;
}

code {
    font-family: var(--police-code);
    font-size: 0.9em;
    background: #EEF1F5;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

.texte-attenue {
    color: var(--texte-attenue);
}

.conteneur {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    /* 16 px sur téléphone (dès 360 px de large), un peu plus au-delà. */
    padding-inline: 1rem;
}

@media (min-width: 48rem) {
    .conteneur {
        padding-inline: 1.5rem;
    }
}

.pile > * + * {
    margin-top: 1.25rem;
}


/* --------------------------------------------------------------------------
   3. Accessibilité
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 3px;
}

/* Le <main> reçoit le focus par le lien d'évitement (tabindex="-1") : inutile
   d'encadrer toute la page. */
main:focus {
    outline: none;
}

.lien-evitement {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--fond);
    color: var(--bleu-nuit);
    border: 2px solid var(--bleu-nuit);
    border-radius: var(--rayon-petit);
    font-weight: 700;
}

.lien-evitement:focus {
    top: 1rem;
}

/* Texte réservé aux lecteurs d'écran. Nom anglais conservé VOLONTAIREMENT,
   comme dans plateforme.css : c'est la convention que repèrent les outils
   d'audit d'accessibilité. */
.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;
}


/* --------------------------------------------------------------------------
   4. En-tête et navigation
   POURQUOI sans menu « hamburger » : il demanderait du JavaScript. Le menu
   tient en quatre liens courts ; sur téléphone, il passe simplement sous la
   marque et reste entièrement utilisable au clavier et au doigt (cibles de
   44 px).
   -------------------------------------------------------------------------- */
.entete {
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
}

.entete__interieur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.75rem;
}

.entete__marque {
    color: var(--bleu-nuit);
    text-decoration: none;
}

/* Marque : le LOGO (partiel vitrine/_marque, image avec alt="Elpiane"),
   en version normale sur l'en-tête clair et en version claire sur le pied bleu
   nuit. Taille d'affichage donnée par les attributs width/height de l'image
   (48 px de haut dans l'en-tête, 40 px dans le pied) : le navigateur réserve la
   place avant le chargement, sans saut de mise en page. `max-width` + `height:
   auto` : sur un écran très étroit, le logo rétrécit au lieu de déborder. */
.marque {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.marque__logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.navigation__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation__lien {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.35rem;
    color: var(--bleu-nuit);
    font-weight: 600;
    text-decoration: none;
}

.navigation__lien:hover {
    color: var(--vert-fonce);
}

/* Page courante : SOULIGNÉE (une forme, pas seulement une couleur), en vert
   foncé — 5,1:1 sur blanc, au-dessus des 3:1 exigés d'un élément graphique (le
   vert clair, 2,7:1, ne suffisait pas). Un soulignement plutôt qu'une bordure :
   en mode de contraste élevé (couleurs forcées de Windows), une bordure
   « transparente » posée sur TOUS les liens devient visible sur chacun, et la
   page courante ne se distinguait plus ; le soulignement n'existe que sur elle
   et reste dessiné, dans la couleur de texte imposée par le système. */
.navigation__lien[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--vert-fonce);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.4em;
}

.navigation__lien--espace {
    padding-inline: 0.9rem;
    border: 2px solid var(--bleu-nuit);
    border-radius: var(--rayon-petit);
}

.navigation__lien--espace:hover {
    background: var(--bleu-nuit);
    color: #FFFFFF;
}

/* Téléphone : le menu occupe sa propre ligne, sous la marque. */
@media (max-width: 40rem) {
    .navigation {
        flex-basis: 100%;
    }

    /* Liens un peu plus compacts : les quatre tiennent sur une ligne dès
       360 px, au lieu de renvoyer « Espace client » sur une troisième ligne. */
    .navigation__liste {
        justify-content: space-between;
        gap: 0.25rem;
    }

    .navigation__lien {
        padding-inline: 0.25rem;
        font-size: 0.95rem;
    }

    .navigation__lien--espace {
        padding-inline: 0.6rem;
    }
}


/* --------------------------------------------------------------------------
   5. Bandeaux et sections
   -------------------------------------------------------------------------- */
.contenu {
    display: block;
}

.surtitre {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vert);
}

/* Sur fond clair, le vert « texte » (voir les contrastes en tête). */
.surtitre--fonce {
    color: var(--vert-fonce);
}

.chapeau {
    max-width: 44rem;
    font-size: 1.15rem;
    color: var(--texte-attenue);
}

/* Bandeau de titre de l'accueil, sur bleu nuit. */
.bandeau-titre {
    --couleur-focus: var(--vert);
    background: var(--bleu-nuit);
    color: #FFFFFF;
    padding-block: 3rem 3.5rem;
}

.bandeau-titre h1 {
    color: #FFFFFF;
}

.bandeau-titre .chapeau,
.bandeau-titre__mention {
    color: var(--texte-sur-sombre);
}

.bandeau-titre__mention {
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
}

.bandeau-titre__grille {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.illustration {
    display: none;
    width: 100%;
    max-width: 20rem;
    height: auto;
    margin-inline: auto;
}

@media (min-width: 56rem) {
    .bandeau-titre {
        padding-block: 4.5rem 5rem;
    }

    .bandeau-titre__grille {
        grid-template-columns: 1.5fr 1fr;
    }

    .illustration {
        display: block;
    }
}

/* En-tête des pages intérieures, sur fond clair. */
.entete-page {
    background: var(--fond-clair);
    border-bottom: 1px solid var(--bordure);
    padding-block: 2.5rem;
}

.entete-page h1 {
    margin-bottom: 0.75rem;
}

.section {
    padding-block: 3rem;
}

@media (min-width: 48rem) {
    .section {
        padding-block: 4.5rem;
    }
}

.section--claire {
    background: var(--fond-clair);
}

.section--sombre {
    --couleur-focus: var(--vert);
    background: var(--bleu-nuit);
    color: var(--texte-sur-sombre);
}

.section--sombre h2,
.section--sombre a:not(.bouton) {
    color: #FFFFFF;
}

.section__titre {
    margin-bottom: 0.75rem;
}

.section__intro {
    max-width: 46rem;
    margin-bottom: 2rem;
    color: var(--texte-attenue);
}

.section h3 {
    margin-top: 2rem;
}

.grille-deux {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 56rem) {
    .grille-deux {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .grille-deux--large,
    .grille-deux--contact {
        grid-template-columns: 3fr 2fr;
    }
}

/* Bandeau d'appel à l'action (fin de page). */
.appel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.appel p {
    margin-bottom: 0;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}

.appel .actions {
    margin-top: 0;
}

/* Boutons : cible d'au moins 48 px de haut. */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--rayon-petit);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Vert, texte bleu nuit (5,2:1) : sur les bandeaux sombres. */
.bouton--accent {
    background: var(--vert);
    border-color: var(--vert);
    color: var(--bleu-nuit);
}

.bouton--accent:hover {
    background: #8FBC55;
    border-color: #8FBC55;
    color: var(--bleu-nuit);
}

/* Bleu nuit, texte blanc (14,3:1) : sur fond clair. */
.bouton--principal {
    background: var(--bleu-nuit);
    border-color: var(--bleu-nuit);
    color: #FFFFFF;
}

.bouton--principal:hover {
    background: var(--bleu-nuit-clair);
    border-color: var(--bleu-nuit-clair);
}

/* Contour blanc, sur les bandeaux sombres. */
.bouton--clair {
    background: transparent;
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.bouton--clair:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

/* Sommaire à ancres de la page Services. */
.sommaire {
    margin-top: 1.75rem;
}

.sommaire__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sommaire__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.95rem;
    background: var(--fond);
    border: 1px solid var(--bordure-champ);
    border-radius: 999px;
    color: var(--bleu-nuit);
    font-weight: 600;
    text-decoration: none;
}

.sommaire__liste a:hover {
    border-color: var(--bleu-nuit);
}


/* --------------------------------------------------------------------------
   6. Cartes, encadrés, encart « Important », listes, étapes, prix, options
   -------------------------------------------------------------------------- */
.grille-cartes,
.grille-options {
    display: grid;
    gap: 1.25rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    /* min(100 %, …) : jamais de colonne plus large que l'écran (360 px). */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grille-cartes--deux {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grille-options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.carte {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-top: 4px solid var(--vert);
    border-radius: var(--rayon);
}

.carte p {
    margin: 0;
}

.carte--sobre {
    border-top: 1px solid var(--bordure);
}

.carte--mise-en-avant {
    border: 2px solid var(--bleu-nuit);
    border-top: 4px solid var(--vert);
}

.carte__icone {
    color: var(--vert-fonce);
}

.carte__titre {
    margin: 0;
    font-size: 1.25rem;
}

/* Les h3 / h4 des cartes ne reprennent pas la marge haute des sections. */
.section .carte__titre {
    margin-top: 0;
}

.carte__lien {
    margin-top: auto;
    font-weight: 600;
}

.encadre {
    padding: 1.5rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.encadre p:last-child {
    margin-bottom: 0;
}

.encadre__titre,
.section .encadre__titre {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

/* Rappel « aucun conseil juridique » : filet vert ET titre « Important »
   (l'information ne repose pas sur la couleur). Dans les pages, un
   <div role="note"> nommé par son titre, et non un <aside> : ce rappel fait
   partie du contenu principal, ce n'est pas un contenu « complémentaire » à
   sauter (repère que les lecteurs d'écran listent à part). */
.encart-important {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--vert-pale);
    border-left: 5px solid var(--vert);
    border-radius: 0 var(--rayon) var(--rayon) 0;
}

.encart-important p:last-child {
    margin-bottom: 0;
}

.encart-important__titre,
.section .encart-important__titre {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}

/* Liste à coches : la coche est un petit SVG écrit DANS la feuille (adresse
   « data: »), pas un fichier à télécharger. */
.liste-coches {
    padding: 0;
    list-style: none;
}

.liste-coches li {
    position: relative;
    margin-block: 0.6rem;
    padding-left: 2rem;
}

.liste-coches li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%231A2B41' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Étapes numérotées (mise en place). */
.etapes {
    counter-reset: etape;
    padding: 0;
    list-style: none;
}

.etapes li {
    counter-increment: etape;
    position: relative;
    margin-block: 1rem;
    padding-left: 3rem;
}

.etapes li::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: -0.1rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--bleu-nuit);
    color: #FFFFFF;
    font-weight: 700;
}

/* Variante en ligne (accueil) : les cinq étapes côte à côte sur grand écran. */
.etapes--ligne {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.etapes--ligne li {
    margin: 0;
    padding: 2.75rem 0 0;
}

/* Prix : montant mis en valeur, unité plus discrète. */
.prix {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
}

.prix__montant {
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--bleu-nuit);
}

.prix__prefixe,
.prix__unite {
    font-size: 0.95rem;
    color: var(--texte-attenue);
}

.option {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.option__nom,
.section .option__nom {
    margin: 0;
    font-size: 1.1rem;
}

.option__description {
    flex: 1;
    margin: 0;
    color: var(--texte-attenue);
}

.option__prix .prix__montant {
    font-size: 1.3rem;
}


/* --------------------------------------------------------------------------
   7. Tableaux
   Un tableau trop large défile DANS son cadre : jamais de défilement
   horizontal de toute la page sur téléphone.
   -------------------------------------------------------------------------- */
.tableau-defilant {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    background: var(--fond);
}

.tableau caption {
    padding-bottom: 0.6rem;
    font-weight: 700;
    text-align: left;
}

.tableau th,
.tableau td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--bordure);
    text-align: left;
    vertical-align: top;
}

.tableau thead th {
    background: var(--bleu-nuit);
    color: #FFFFFF;
}

.tableau tbody th {
    font-weight: 500;
}

.tableau td {
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   8. Formulaire de contact et alertes
   -------------------------------------------------------------------------- */
.formulaire {
    max-width: 40rem;
}

.champ {
    margin: 0 0 1.25rem;
}

/* Le groupe de cases est un <fieldset> : on retire son cadre par défaut. */
fieldset.champ {
    min-width: 0;
    padding: 0;
    border: 0;
}

.champ__libelle {
    display: block;
    margin-bottom: 0.35rem;
    padding: 0;
    font-weight: 700;
}

.champ__mention {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--texte-attenue);
}

.champ__aide {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--texte-attenue);
}

.champ__saisie {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    background: var(--fond);
    border: 2px solid var(--bordure-champ);
    border-radius: var(--rayon-petit);
    color: var(--bleu-nuit);
    font: inherit;
    /* Un lien du récapitulatif d'erreurs (#champ-email…) fait défiler jusqu'au
       champ : 4rem de marge gardent visibles son libellé et son aide, posés
       au-dessus, au lieu de les coller hors de l'écran (la règle `[id]` générale,
       1,25rem, ne laisse voir que le champ). */
    scroll-margin-top: 4rem;
}

textarea.champ__saisie {
    resize: vertical;
}

.champ__saisie[aria-invalid="true"] {
    border-color: var(--danger);
}

.champ__erreur {
    margin: 0.35rem 0 0;
    font-weight: 600;
    color: var(--danger);
}

.case {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
}

.case input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--bleu-nuit);
}

/* Champ PIÈGE : hors de l'écran (pas `display: none`, que certains robots
   repèrent et sautent), hors du clavier et des lecteurs d'écran (attributs
   posés dans la page). */
.champ-piege {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulaire__mention {
    font-size: 0.95rem;
    color: var(--texte-attenue);
}

.alerte {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 5px solid;
    border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
}

.alerte p:last-child,
.alerte ul:last-child {
    margin-bottom: 0;
}

.alerte ul {
    padding-left: 1.2rem;
}

.alerte a {
    color: inherit;
}

.alerte__titre,
.section .alerte__titre {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.alerte--succes {
    background: var(--succes-fond);
    border-color: var(--succes);
}

.alerte--erreur {
    background: var(--danger-fond);
    border-color: var(--danger);
}


/* --------------------------------------------------------------------------
   9. Pages légales
   -------------------------------------------------------------------------- */
.texte-legal {
    max-width: 46rem;
}

.texte-legal h2 {
    margin-top: 2.25rem;
    font-size: 1.4rem;
}

.texte-legal h2:first-child {
    margin-top: 0;
}

.liste-legale dt {
    font-weight: 700;
}

.liste-legale dd {
    margin: 0 0 0.75rem;
}

/* Sur grand écran : intitulé à gauche, valeur à droite. */
@media (min-width: 40rem) {
    .liste-legale {
        display: grid;
        grid-template-columns: minmax(9rem, max-content) 1fr;
        gap: 0.5rem 1.5rem;
    }

    .liste-legale dd {
        margin: 0;
    }
}


/* --------------------------------------------------------------------------
   10. Pied de page
   -------------------------------------------------------------------------- */
/* Filet vert en haut : la plupart des pages finissent par un bandeau bleu nuit
   (appel à l'action), qui sans lui se confondrait avec le pied. */
.pied {
    --couleur-focus: var(--vert);
    padding-block: 2.5rem 2rem;
    background: var(--bleu-nuit);
    border-top: 4px solid var(--vert);
    color: var(--texte-sur-sombre);
}

.pied a {
    color: #FFFFFF;
}

.pied__rappel {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--vert);
    border-radius: var(--rayon);
    color: #FFFFFF;
}

/* Vert sur bleu nuit : 5,2:1. */
.pied__rappel strong {
    color: var(--vert);
}

.pied__grille {
    display: grid;
    gap: 1.5rem 2rem;
}

@media (min-width: 48rem) {
    .pied__grille {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

.pied__marque {
    margin-bottom: 0.75rem;
    color: #FFFFFF;
}

.pied__texte {
    margin-bottom: 0.5rem;
}

.pied__liens {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pied__liens li {
    margin-bottom: 0.4rem;
}

.pied__copyright {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.9rem;
}