/* Feuille de la PAGE D'ACCUEIL uniquement (les pages documentaires gardent
   style.css).

   ⚠ Le .htaccess met le CSS en cache UNE SEMAINE. Éditer ce fichier ne suffit
   donc pas : un visiteur déjà venu garderait l'ancienne feuille jusqu'à sept
   jours, sans que rien ne le signale. À chaque correctif, incrémenter le `?v=`
   du <link> dans index.html — l'URL change, le cache aussi, et index.html
   n'est caché qu'une heure. (La première livraison avait pris un nouveau NOM
   de fichier pour la même raison ; le paramètre fait le même travail sans
   laisser un fichier mort sur le serveur.)

   Disposition reprise de la maquette de référence donnée par l'utilisateur
   (hero en dégradé avec nav en pilule et trio de téléphones, bento de
   fonctionnalités, sections texte + visuel, bannière finale, pied sombre au
   mot-symbole géant), transposée à NOTRE bleu de marque (#0134C5) et à nos
   propres captures.

   AUCUNE REQUÊTE VERS UN TIERS, comme le reste du site : les polices sont
   celles de l'application (Inter et Space Grotesk, licence SIL OFL),
   converties en WOFF2 et servies par la même origine. La CSP du .htaccess
   l'impose de toute façon. */

@font-face {
    font-family: "Space Grotesk";
    src: url("/assets/fonts/spacegrotesk-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("/assets/fonts/spacegrotesk-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Les deux blocs d'aiguillage plus bas le repassent à `dark`. Il ne sert
       pas qu'aux couleurs : c'est lui qui accorde les ascenseurs et les
       contrôles natifs au thème choisi. */
    color-scheme: light;
    --bleu-marque: #0134C5;
    --fond: #FFFFFF;
    --fond-doux: #F5F7FB;
    --carte: #FFFFFF;
    --encre: #14181F;
    --muet: #6B7280;
    --texte-doux: #4B5563;
    --trait: #E7EAF0;
    --accent: #2563EB;
    --accent-pale: #E7EEFD;
    --sur-accent: #FFFFFF;
    --sombre: #14181F;
    /* Le dégradé du hero : blanc en haut, bleu de marque dilué en bas. */
    --hero-1: #FFFFFF;
    --hero-2: #EDF2FD;
    --hero-3: #C9D8FA;
    --hero-4: #A9C2F6;
    --halo-logo: rgba(1, 52, 197, 0.5);
    /* La marque de l'en-tête est un JETON et non un <picture> : un
       `media="(prefers-color-scheme: dark)"` suit le SYSTÈME, donc il resterait
       bleu sur fond sombre dès qu'on force le thème depuis la bascule. */
    --marque: url("/assets/logo.png");
    /* La pilule de nav : trois littéraux qui vivaient dans deux blocs @media,
       promus en jetons pour qu'ils suivent la bascule comme le reste. */
    --nav-fond: rgba(255, 255, 255, 0.72);
    --nav-bord: rgba(255, 255, 255, 0.9);
    --nav-liens-fond: rgba(255, 255, 255, 0.55);
    --titres: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --corps: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    /* ------------------------- La palette SOMBRE -------------------------
       Définie ICI, une seule fois. Les deux blocs d'aiguillage ci-dessous ne
       portent que des `var(--s-…)`, jamais une couleur : une valeur recopiée
       à deux endroits finit toujours par diverger, et ce dépôt s'est fait
       mordre quatre fois par ce motif. */
    --s-fond: #0C1017;
    --s-fond-doux: #10141C;
    --s-carte: #171C25;
    --s-encre: #F2F4F8;
    --s-muet: #98A0AE;
    --s-texte-doux: #C7CDD8;
    --s-trait: #262D3A;
    --s-accent: #4B83F0;
    --s-accent-pale: #16233D;
    --s-sur-accent: #0C1017;
    --s-sombre: #060910;
    --s-hero-1: #0C1017;
    --s-hero-2: #101A2E;
    --s-hero-3: #14294F;
    --s-hero-4: #17356B;
    --s-halo-logo: rgba(37, 99, 235, 0.34);
    --s-marque: url("/assets/marque-blanche.png");
    --s-nav-fond: rgba(23, 28, 37, 0.72);
    --s-nav-bord: rgba(255, 255, 255, 0.08);
    --s-nav-liens-fond: rgba(255, 255, 255, 0.05);
}

/* Le sombre s'obtient par DEUX chemins, et les deux listes ci-dessous doivent
   rester identiques :
     1. le navigateur est en sombre et le visiteur n'a pas forcé le clair ;
     2. le visiteur a explicitement choisi le sombre.
   ⚠ Le contrôle qui prouve qu'elles n'ont pas divergé est une comparaison
   d'IMAGES : le rendu « sombre système » et le rendu « sombre choisi » doivent
   être identiques au pixel. Une ligne oubliée dans l'une des deux se voit
   immédiatement, là où une relecture la laisserait passer. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) {
        color-scheme: dark;
        --fond: var(--s-fond);
        --fond-doux: var(--s-fond-doux);
        --carte: var(--s-carte);
        --encre: var(--s-encre);
        --muet: var(--s-muet);
        --texte-doux: var(--s-texte-doux);
        --trait: var(--s-trait);
        --accent: var(--s-accent);
        --accent-pale: var(--s-accent-pale);
        --sur-accent: var(--s-sur-accent);
        --sombre: var(--s-sombre);
        --hero-1: var(--s-hero-1);
        --hero-2: var(--s-hero-2);
        --hero-3: var(--s-hero-3);
        --hero-4: var(--s-hero-4);
        --halo-logo: var(--s-halo-logo);
        --marque: var(--s-marque);
        --nav-fond: var(--s-nav-fond);
        --nav-bord: var(--s-nav-bord);
        --nav-liens-fond: var(--s-nav-liens-fond);
    }
}

:root[data-theme="sombre"] {
    color-scheme: dark;
    --fond: var(--s-fond);
    --fond-doux: var(--s-fond-doux);
    --carte: var(--s-carte);
    --encre: var(--s-encre);
    --muet: var(--s-muet);
    --texte-doux: var(--s-texte-doux);
    --trait: var(--s-trait);
    --accent: var(--s-accent);
    --accent-pale: var(--s-accent-pale);
    --sur-accent: var(--s-sur-accent);
    --sombre: var(--s-sombre);
    --hero-1: var(--s-hero-1);
    --hero-2: var(--s-hero-2);
    --hero-3: var(--s-hero-3);
    --hero-4: var(--s-hero-4);
    --halo-logo: var(--s-halo-logo);
    --marque: var(--s-marque);
    --nav-fond: var(--s-nav-fond);
    --nav-bord: var(--s-nav-bord);
    --nav-liens-fond: var(--s-nav-liens-fond);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--corps);
    font-size: 17px;
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: var(--titres);
    font-weight: 700;
    line-height: 1.14;
    text-wrap: balance;
    margin: 0;
}

p { margin: 0; }

a { color: var(--accent); }

a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

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

/* ------------------------------- boutons ------------------------------- */

.bouton-plein, .bouton-sombre, .bouton-blanc {
    display: inline-block;
    font-family: var(--titres);
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.bouton-plein {
    background: var(--accent);
    color: var(--sur-accent);
    font-size: 0.92rem;
    padding: 0.5rem 1.15rem;
}

.bouton-sombre {
    background: var(--bleu-marque);
    color: #FFFFFF;
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
    box-shadow: 0 12px 26px -12px rgba(1, 52, 197, 0.7);
}

.bouton-blanc {
    background: var(--carte);
    color: var(--encre);
    border: 1px solid var(--trait);
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
}

.bouton-plein:hover, .bouton-sombre:hover, .bouton-blanc:hover {
    transform: translateY(-2px);
}

/* Le seul bouton du site dont le libellé porte une VALEUR, l'adresse : elle ne
   doit jamais être rognée, il a donc le droit de passer sur deux lignes là où
   les autres restent en une (leur libellé, lui, se devine).
   Mesuré : le libellé fait 300 px de large (249 de texte + 51 de padding) et la
   bannière n'en offre que 261 sur un écran de 360 — d'où la pilule coupée à
   droite par l'overflow hidden de la bannière, et le décentrage, qui n'était
   que le décalage négatif d'une boîte plus large que sa ligne. Les deux
   symptômes n'en font qu'un. */
.bouton-contact {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    /* Dernier recours (police système agrandie, écran minuscule) : l'adresse se
       coupe en deux lignes plutôt que de sortir du cadre. Rognée, elle resterait
       PLAUSIBLE — c'est la règle que le projet applique déjà à ses valeurs. */
    overflow-wrap: anywhere;
}

/* =============================== Le hero ================================ */

.hero {
    position: relative;
    background:
        radial-gradient(46% 30% at 50% 82%, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg,
            var(--hero-1) 0%,
            var(--hero-2) 24%,
            var(--hero-3) 60%,
            var(--hero-4) 100%);
    border-radius: 0 0 34px 34px;
    padding-bottom: 0;
    overflow: hidden;
}

.hero-corps {
    max-width: 68rem;
    margin: 0 auto;
    padding: 3.2rem 1.5rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
    align-items: center;
}

/* La marque, en grand, face au pitch. */
.hero-logo {
    justify-self: center;
    width: min(20rem, 100%);
    position: relative;
}

/* ⚠⚠ Le halo appartient au LOGO, pas au fond du hero.
   Il y était posé en absolu à « 76% 52% » du hero, c'est-à-dire à droite et à
   mi-hauteur. Sous 52 rem, la marque passe `order: -1` et remonte au centre :
   le halo restait en place, et la marque BLANCHE se retrouvait sur un dégradé
   quasi blanc, donc illisible (constaté le 2026-08-13). Attaché au logo, il le
   suit à tous les points de rupture et dans les deux thèmes, et l'on ne peut
   plus casser l'un en déplaçant l'autre.
   ⚠ Le fondu se termine sur `rgba(1, 52, 197, 0)` et non sur `transparent` :
   celui-ci s'interpole via du noir transparent et grise la transition. */
.hero-logo::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: radial-gradient(circle closest-side,
        var(--halo-logo) 0%, rgba(1, 52, 197, 0) 70%);
    pointer-events: none;
}

/* Positionné pour passer AU-DESSUS du halo : un pseudo-élément en absolu se
   peint sinon par-dessus le contenu en flux. */
.hero-logo svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* Les deux moitiés se dessinent des pieds vers le sommet. L'état par défaut
   est VISIBLE : c'est le keyframe `from` avec `both` qui cache pendant le
   délai, donc un moteur sans animation affiche l'arche entière. */
.arche-trace {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 110;
    stroke-linecap: round;
    stroke-dasharray: 100;
    animation: arche-trace 1.3s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}

@keyframes arche-trace {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

/* La table et le sapin se posent depuis le point de fuite de la route, comme
   au lancement de l'application. */
.logo-scene {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: poser 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

@keyframes poser {
    from { opacity: 0; transform: scale(0.3) translateY(26px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .arche-trace, .logo-scene { animation: none; }
}

.nav, .hero-corps, .hero-trio { position: relative; z-index: 1; }

/* La nav flotte en pilule, comme dans la référence. */
.nav {
    max-width: 68rem;
    margin: 1.4rem auto 0;
    padding: 0.55rem 0.7rem 0.55rem 1.2rem;
    background: var(--nav-fond);
    border: 1px solid var(--nav-bord);
    border-radius: 999px;
    box-shadow: 0 10px 30px -18px rgba(12, 26, 70, 0.45);
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.marque-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--titres);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--encre);
    text-decoration: none;
    margin-right: auto;
}

.marque-nav img { width: 30px; height: 30px; }

/* La marque suit le theme du navigateur : bleue en clair, blanche en sombre.
   La bascule est portee par le <source media> du <picture>, pas par un filtre
   CSS -- la charte livre ses deux declinaisons, on ne les redérive pas.
   ! display: flex sur le wrapper, sinon <picture> est inline et introduit un
   ! decalage de ligne de base dans le flex de .marque-nav. */
/* La marque, en fond et non en <img> : c'est ce qui lui permet de suivre la
   bascule, un <picture media="prefers-color-scheme"> ne regardant que le
   système. Purement décorative, le nom « Facil'Aires » la suit en toutes
   lettres juste à côté. */
.marque-img {
    flex: none;
    width: 30px;
    height: 30px;
    background: var(--marque) center / contain no-repeat;
}

.nav-liens {
    display: flex;
    gap: 0.3rem;
    background: var(--nav-liens-fond);
    border-radius: 999px;
    padding: 0.2rem;
}

.nav-liens a {
    color: var(--texte-doux);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}

.nav-liens a:hover {
    color: var(--encre);
    background: var(--carte);
}

.hero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
}

.hero-chapeau {
    font-size: 1.05rem;
    color: var(--texte-doux);
    max-width: 30rem;
    margin: 0 0 1.9rem;
}

.hero-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* Le trio de téléphones : celui du centre devant, les deux autres en
   retrait et décalés vers le bas. */
.hero-trio {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.4rem;
    max-width: 62rem;
    margin: 2.8rem auto 0;
    padding: 0 1.5rem;
}

.tel { margin: 0; }

.tel .cadre {
    border: 9px solid var(--sombre);
    border-radius: 32px;
    overflow: hidden;
    background: var(--sombre);
    box-shadow: 0 24px 50px -18px rgba(10, 22, 60, 0.42);
    line-height: 0;
}

.tel .cadre img { border-radius: 23px; }

.hero-trio .tel-cote {
    width: 14.5rem;
    margin-bottom: -3.5rem;
    opacity: 0.96;
}

.hero-trio .tel-centre {
    width: 16.5rem;
    position: relative;
    z-index: 1;
    margin-bottom: -6rem;
}

/* ============================ Les sections ============================== */

.section {
    max-width: 68rem;
    margin: 0 auto;
    padding: 7rem 1.5rem 0;
}

.section h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    letter-spacing: -0.015em;
    text-align: center;
    margin: 0 auto 1rem;
    max-width: 40rem;
}

.section-chapeau {
    text-align: center;
    color: var(--muet);
    font-size: 0.98rem;
    max-width: 38rem;
    margin: 0 auto;
}

.etiquette {
    display: inline-block;
    font-family: var(--titres);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--accent);
    background: var(--accent-pale);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    margin-bottom: 1rem;
}

/* ------------------------------- le bento ------------------------------ */
/* Composition ASYMÉTRIQUE sur 12 colonnes, qui encode une hiérarchie vraie :
   une grande tuile pour ce qui décide de l'arrêt (les services), deux tuiles
   moyennes pour les deux énergies, trois petites pour les façons de suivre
   un trajet. Une grille régulière de six tuiles les mettait à égalité, et
   laissait la sixième seule sur une rangée. */

.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 2.6rem;
}

.bento-carte {
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: 20px;
    padding: 1.5rem;
    grid-column: span 4;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                box-shadow .28s ease, border-color .28s ease;
}

.bento-carte:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 22px 40px -26px rgba(1, 52, 197, 0.55);
}

.bento-carte h3 {
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.bento-carte p {
    font-size: 0.93rem;
    color: var(--muet);
    margin: 0;
}

.tuile-large { grid-column: span 7; grid-row: span 2; }
.tuile-prix, .tuile-bornes { grid-column: span 5; }

.pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--accent-pale);
    color: var(--accent);
    margin-bottom: 1rem;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1),
                background .28s ease, color .28s ease;
}

.bento-carte:hover .pastille {
    background: var(--accent);
    color: var(--sur-accent);
    transform: scale(1.08) rotate(-6deg);
}

/* La grande tuile : texte en haut, écran qui déborde par le bas (il est
   COUPÉ par le bord de la tuile, jamais rogné à une hauteur arbitraire). */
.tuile-large {
    background: linear-gradient(165deg, var(--accent-pale) 0%, var(--carte) 58%);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow: hidden;
}

.tuile-large h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.2;
    margin-bottom: 0.7rem;
}

.tuile-large p { max-width: 26rem; }

.tuile-large .etiquette { margin-bottom: 0.9rem; }

.ecran-peek {
    width: 13.5rem;
    margin: 1.7rem auto -3.4rem;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.tuile-large:hover .ecran-peek { transform: translateY(-10px); }

.ecran-peek .cadre {
    border-width: 8px;
    border-radius: 27px;
    box-shadow: 0 22px 44px -18px rgba(10, 22, 60, 0.45);
}

.ecran-peek .cadre img { border-radius: 20px; }

/* La rangée de pictogrammes : une vague les allume l'un après l'autre. Au
   repos ils sont déjà colorés — sans animation (mouvement réduit, moteur
   ancien) la rangée reste donc lisible et vivante. */
.pictos {
    list-style: none;
    display: flex;
    gap: 0.55rem;
    margin: 1.3rem 0 0;
    padding: 0;
}

.pictos li {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--accent-pale);
    color: var(--accent);
    animation: allumer 5.5s cubic-bezier(.4, 0, .2, 1) infinite;
}

.pictos li:nth-child(2) { animation-delay: .32s; }
.pictos li:nth-child(3) { animation-delay: .64s; }
.pictos li:nth-child(4) { animation-delay: .96s; }
.pictos li:nth-child(5) { animation-delay: 1.28s; }

@keyframes allumer {
    0%, 100% {
        background: var(--accent-pale);
        color: var(--accent);
        transform: none;
    }
    9% {
        background: var(--accent);
        color: var(--sur-accent);
        transform: translateY(-5px);
    }
    26% {
        background: var(--accent-pale);
        color: var(--accent);
        transform: none;
    }
}

/* Entrée des tuiles au défilement, en CSS pur (aucun script n'est autorisé
   sur ce site). Sous @supports : un moteur sans timelines de défilement
   n'anime rien du tout et affiche la grille telle quelle. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bento > * {
            animation: apparaitre linear both;
            animation-timeline: view();
            animation-range: entry 8% entry 62%;
        }
    }
}

@keyframes apparaitre {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pictos li { animation: none; }
    .bento-carte, .pastille, .ecran-peek { transition: none; }
}

/* ------------------- sections texte + visuel (duo) --------------------- */

.duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3.5rem;
    align-items: center;
}

.duo h2 { text-align: left; margin: 0 0 0.9rem; }

.duo-texte > p {
    color: var(--muet);
    max-width: 30rem;
    margin-bottom: 1.6rem;
}

.duo-visuel { justify-self: center; }

.tel-grand { width: 17rem; }

.duo-inverse .duo-texte { order: 2; }
.duo-inverse .duo-visuel { order: 1; }

.points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.points li { display: flex; gap: 0.9rem; }

.points .numero {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--sur-accent);
    font-family: var(--titres);
    font-weight: 700;
    font-size: 0.9rem;
}

.points h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.points p { font-size: 0.93rem; color: var(--muet); }

/* La « photo » (notre carte) avec la carte de statistiques en surimpression. */

.visuel-photo { position: relative; width: 100%; }

.photo {
    width: 100%;
    border-radius: 22px;
    display: block;
    box-shadow: 0 24px 50px -22px rgba(10, 22, 60, 0.4);
}

.carte-stats {
    background: var(--sombre);
    color: #FFFFFF;
    border-radius: 18px;
    padding: 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 15rem;
    margin: -3.5rem 0 0 1.5rem;
    position: relative;
    box-shadow: 0 20px 40px -18px rgba(6, 12, 34, 0.6);
}

.stat strong {
    font-family: var(--titres);
    font-weight: 700;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    display: block;
    line-height: 1.1;
}

.stat span { font-size: 0.82rem; color: #AFBACD; }

/* --------------------------- grille de confiance ----------------------- */

.grille-confiance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.1rem;
    margin-top: 2.6rem;
}

.carte-simple {
    background: var(--fond-doux);
    border: 1px solid var(--trait);
    border-radius: 18px;
    padding: 1.4rem;
}

.carte-simple h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.carte-simple p { font-size: 0.93rem; color: var(--muet); }

.note-liens {
    text-align: center;
    color: var(--muet);
    font-size: 0.93rem;
    margin-top: 1.8rem;
}

/* ---------------------------- bannière finale -------------------------- */

.banniere {
    background: linear-gradient(120deg, #0134C5 0%, #2563EB 58%, #4B83F0 100%);
    border-radius: 28px;
    padding: 3rem 1rem 0 3rem;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 2rem;
    align-items: end;
    overflow: hidden;
}

.banniere h2 {
    color: #FFFFFF;
    text-align: left;
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

.banniere p { color: #DCE6FB; max-width: 26rem; }

.banniere-actions { margin: 1.7rem 0 3rem; }

.banniere .bouton-sombre {
    background: #FFFFFF;
    color: var(--bleu-marque);
    box-shadow: 0 12px 26px -12px rgba(4, 16, 60, 0.6);
}

.banniere-tel {
    width: 14rem;
    justify-self: center;
    margin-bottom: -4rem;
}

/* =============================== Le pied ================================ */

footer {
    background: var(--sombre);
    color: #C9D0DE;
    margin-top: 7rem;
    padding: 3.4rem 1.5rem 0;
    overflow: hidden;
}

.pied-haut {
    max-width: 68rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.4rem;
}

.pied-marque .marque-nav { color: #FFFFFF; margin-bottom: 0.9rem; }

.pied-marque p {
    font-size: 0.92rem;
    max-width: 22rem;
    margin-bottom: 0.9rem;
}

.pied-colonne {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pied-colonne h3 {
    color: #FFFFFF;
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

footer a {
    color: #C9D0DE;
    text-decoration: none;
    font-size: 0.92rem;
}

footer a:hover { color: #FFFFFF; text-decoration: underline; }

footer a:focus-visible { outline-color: #FFFFFF; }

/* La ligne d'attribution ET la bascule, sur la MEME rangée : le pilulier fait
   partie du pied, il ne s'ajoute pas en ligne supplémentaire sous lui. */
.pied-bas {
    max-width: 68rem;
    margin: 2.4rem auto 0;
    padding: 1.4rem 0 2.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
    color: #8B94A6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.pied-bas p { margin: 0; }

/* --------------------------- Bascule de thème ---------------------------- */

/* ⚠ Masquée tant que le script n'a pas posé `data-js` : sans lui les boutons
   ne feraient rien, et une commande morte est pire qu'une commande absente. */
html:not([data-js]) .bascule-theme { display: none; }

/* ⚠ Le pied est sombre dans les DEUX thèmes (`--sombre` vaut #14181F le jour
   et #060910 la nuit) : cette bascule ne suit donc pas la palette, elle est
   calibrée une fois pour un fond sombre. Un aplat `--accent` y aurait été
   tentant, mais le blanc n'y rend que 3,6:1 en thème sombre (P2.58) — le
   pilulier actif est donc blanc à texte encre, lisible dans tous les cas. */
.bascule-theme {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.bascule-theme button {
    font-family: var(--corps);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    /* 44 px : le minimum communement retenu pour une cible tactile. Le padding
       seul rendait 38, ce qui passe le seuil WCAG 2.5.8 (24 px) mais reste
       court sous le pouce. Ce n'est pas un ecran de conduite, la regle des
       56 dp du §7 ne s'y applique pas. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #C9D0DE;
    cursor: pointer;
}

.bascule-theme button:hover { color: #FFFFFF; }

/* ⚠ L'état actif se lit de l'attribut porté par <html>, jamais d'une classe
   posée par le script : il est donc juste dès le PREMIER rendu, avant même que
   le DOM ne soit prêt, et il ne peut pas se désynchroniser. */
html:not([data-theme]) .bascule-theme [data-theme-choix="auto"],
html[data-theme="clair"] .bascule-theme [data-theme-choix="clair"],
html[data-theme="sombre"] .bascule-theme [data-theme-choix="sombre"] {
    background: #FFFFFF;
    color: #14181F;
}

/* ============================== Responsive ============================== */

@media (max-width: 62rem) {
    .tuile-large { grid-column: 1 / -1; grid-row: auto; }
    .bento-carte, .tuile-prix, .tuile-bornes { grid-column: span 6; }
    .tuile-large { flex-direction: row; align-items: flex-end; gap: 1.5rem; }
    .tuile-large-texte { flex: 1 1 auto; padding-bottom: 1.5rem; }
    .ecran-peek { flex: none; margin: 0 0 -3rem; }
}

@media (max-width: 52rem) {
    .nav-liens { display: none; }
    .section { padding-top: 4.5rem; }
    /* Le pitch repasse au centre, la marque au-dessus de lui. */
    .hero-corps {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
        text-align: center;
    }
    .hero-logo { order: -1; width: min(14rem, 62vw); }
    .hero-chapeau { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-trio { gap: 0.8rem; }
    .hero-trio .tel-cote { display: none; }
    .hero-trio .tel-centre { width: 15rem; margin-bottom: -4rem; }
    .bento-carte, .tuile-prix, .tuile-bornes, .tuile-large {
        grid-column: 1 / -1;
    }
    .tuile-large { flex-direction: column; gap: 0; }
    .tuile-large-texte { padding-bottom: 0; }
    .ecran-peek { margin: 1.7rem auto -3.4rem; }
    .duo {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    .duo h2 { text-align: center; }
    .duo-texte > p { margin-left: auto; margin-right: auto; text-align: center; }
    .duo-texte .etiquette { display: block; width: fit-content; margin-inline: auto; }
    .duo-texte .bouton-sombre { display: block; width: fit-content; margin-inline: auto; }
    .duo-inverse .duo-texte { order: 1; }
    .duo-inverse .duo-visuel { order: 2; }
    .carte-stats { margin-inline: auto; }
    .banniere {
        grid-template-columns: minmax(0, 1fr);
        padding: 2.4rem 1.6rem 0;
        text-align: center;
    }
    .banniere h2 { text-align: center; }
    .banniere p { margin-inline: auto; }
    /* Deux lignes centrées : « Écrire à », puis l'adresse entière. L'interligne
       du corps (1,65) serait lâche pour une pilule ; il n'est resserré qu'ici,
       pour ne pas changer la hauteur du bouton sur les écrans où il tient sur
       une seule ligne. */
    .banniere .bouton-contact { line-height: 1.3; }
    .banniere-tel { margin-bottom: -3rem; }
    .pied-haut { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
    /* Trop etroit pour tenir sur une rangee : le pilulier passe sous le texte,
       centre, mais reste DANS le bloc d'attribution. */
    .pied-bas {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
    }
}

/* Sous ~350 px, l'adresse SEULE (187 px) ne tient plus dans la pilule à sa
   taille normale : on resserre d'un cran plutôt que de la couper en deux. */
@media (max-width: 22rem) {
    .banniere .bouton-contact {
        font-size: 0.95rem;
        padding-inline: 1.2rem;
    }
}