/* ============================================================
   BOURGOGNE LOGISTIQUE – style.css
   Style: Industrial-Blueprint / Typography: Space Grotesk & Archivo
   Mobile-first · Vanilla CSS · BEM · No framework
   ============================================================ */

/* ==============================================================
   0. TYPOGRAPHIE – polices auto-hébergées (variable fonts, latin)
   Remplace Google Fonts : supprime la requête tierce bloquante
   (fonts.googleapis.com/fonts.gstatic.com), réduit FCP/LCP et
   respecte la directive "Zéro dépendance externe".
   ============================================================== */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500 700; /* variable font : couvre 500/600/700 */
    font-display: swap;
    src: url("assets/fonts/space-grotesk-latin-var.woff2") format("woff2");
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 600; /* variable font : couvre 400/500/600 */
    font-display: swap;
    src: url("assets/fonts/archivo-latin-var.woff2") format("woff2");
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/archivo-italic-latin-var.woff2") format("woff2");
}

/* ==============================================================
   0bis. DESIGN SYSTEM – variables CSS
   ============================================================== */
:root {
    /* Couleurs */
    --brand: #0f172a;
    --brand-light: #1e293b;
    --footer-bg: #080e1a;
    --surface-3: #334155;
    --accent: #1c9c3f;
    --accent-hover: #178434;
    --accent-active: #15752f;
    --accent-text: #2bcf58; /* variante claire : texte vert AA sur fond sombre */
    --accent-glow: rgba(28, 156, 63, 0.18);
    --cold: #38bdf8; /* accent secondaire : chaîne du froid */
    --cold-glow: rgba(56, 189, 248, 0.18);
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --grid-line: rgba(148, 163, 184, 0.06);

    /* Ligne technique (bordures fines "plan") */
    --line: rgba(148, 163, 184, 0.18);
    --line-strong: rgba(148, 163, 184, 0.4);
    --panel-bg: rgba(30, 41, 59, 0.55);

    /* Typographie */
    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Archivo", sans-serif;

    /* Forme — coins coupés (motif signature, remplace le radius générique) */
    --radius: 3px;
    --cut: 18px;
    --cut-sm: 9px;
    --cut-xs: 5px;
    --clip-panel: polygon(
        0 var(--cut),
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%
    );
    --clip-panel-sm: polygon(
        0 var(--cut-sm),
        var(--cut-sm) 0,
        100% 0,
        100% calc(100% - var(--cut-sm)),
        calc(100% - var(--cut-sm)) 100%,
        0 100%
    );
    --clip-panel-xs: polygon(
        0 var(--cut-xs),
        var(--cut-xs) 0,
        100% 0,
        100% calc(100% - var(--cut-xs)),
        calc(100% - var(--cut-xs)) 100%,
        0 100%
    );
    --clip-panel-inv: polygon(
        var(--cut) 0,
        100% 0,
        100% 100%,
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
    );

    /* Espacement */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;

    /* Layout */
    --container: 1400px;
    --container-wide: 1680px;
    --header-h: 64px;

    /* Transitions – Industrial easing */
    --transition-smooth: cubic-bezier(0.76, 0, 0.24, 1);
    --transition-fast: 0.2s var(--transition-smooth);
    --transition-base: 0.35s var(--transition-smooth);

    /* Micro-interactions premium */
    --card-shine: rgba(255, 255, 255, 0.038);
    --card-glow-hover: rgba(28, 156, 63, 0.26);
    --icon-glow: 0 0 22px rgba(28, 156, 63, 0.22);
    --reveal-title-duration: 0.92s;
}

/* ==============================================================
   1. RESET & BASE
   ============================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 2;
    /* Les ancres (#services…) ne doivent pas atterrir sous le header sticky */
    scroll-padding-top: calc(var(--header-h) + var(--spacing-sm));
}

/* Le défilement animé est une préférence, pas un défaut : il reste
   désactivé pour « prefers-reduced-motion: reduce ». */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1vw + 0.5rem, 1.0625rem);
    background-color: var(--brand);
    color: var(--text);
    line-height: 1.65;
    min-height: 100dvh;
    /* `clip` (et non `hidden`) : `hidden` transforme <body> en conteneur de
       défilement et casse `position: sticky` du header sur certains mobiles. */
    overflow-x: hidden;
    overflow-x: clip;
    overflow-wrap: break-word;
}

/* Grain industriel – texture papier cinématique (fixed, jamais animé :
   pas de `will-change`, qui forcerait une couche GPU permanente et
   pèserait sur la batterie des mobiles). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.74' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    line-height: 1.15;
    color: var(--text);
}

/* Équilibre typographique – rompt les lignes courtes disgracieuses sur mobile */
h1,
h2,
h3 {
    text-wrap: balance;
    overflow-wrap: break-word;
}

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

ul {
    list-style: none;
}

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

strong {
    font-weight: 600;
}

/* ==============================================================
   2. UTILITAIRES
   ============================================================== */

/* Masqué visuellement mais lisible par les lecteurs d'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Lien d'évitement (WCAG 2.4.1 – Contourner des blocs) ----
   Premier élément focusable de la page : il permet d'atteindre
   <main> sans traverser la navigation à chaque page. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background-color: var(--accent-hover);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    clip-path: var(--clip-panel-sm);
    /* Hors écran tant qu'il n'a pas le focus (reste lisible par les
       lecteurs d'écran, contrairement à display:none). */
    transform: translateY(-120%);
    transition: transform 0.2s var(--transition-smooth);
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--text);
    outline-offset: -6px;
}

/* Cibles de saut (<main tabindex="-1">) : elles reçoivent le focus pour
   que le lecteur d'écran reparte du bon endroit, sans halo visuel. */
[tabindex="-1"]:focus {
    outline: none;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(var(--spacing-md), 4vw, var(--spacing-xl));
    /* Encoches / coins arrondis (iPhone en paysage) : le contenu ne
       doit jamais passer sous l'inset système. */
    padding-left: max(
        clamp(var(--spacing-md), 4vw, var(--spacing-xl)),
        env(safe-area-inset-left)
    );
    padding-right: max(
        clamp(var(--spacing-md), 4vw, var(--spacing-xl)),
        env(safe-area-inset-right)
    );
}

/* ---- Focus visible : garde-fou global ----
   Chaque composant définit son propre style de focus ; cette règle
   assure qu'aucun élément interactif n'échappe à un indicateur
   visible (WCAG 2.4.7), y compris le contenu injecté par JS. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Variante pleine largeur — hero & bandeaux à forte présence visuelle */
.container--wide {
    max-width: var(--container-wide);
}

/* ==============================================================
   3. SCROLL REVEAL
   Les éléments .reveal démarrent invisibles.
   La classe .is-visible (ajoutée par IntersectionObserver)
   déclenche la transition. Le stagger s'appuie sur data-delay.
   ============================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.65s var(--transition-smooth),
        transform 0.65s var(--transition-smooth);
}

/* Niveaux de stagger (80 ms entre chaque enfant) */
.reveal[data-delay="1"] {
    transition-delay: 80ms;
}
.reveal[data-delay="2"] {
    transition-delay: 160ms;
}
.reveal[data-delay="3"] {
    transition-delay: 240ms;
}
.reveal[data-delay="4"] {
    transition-delay: 320ms;
}
.reveal[data-delay="5"] {
    transition-delay: 400ms;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variante : slide depuis la droite */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity 0.65s var(--transition-smooth),
        transform 0.65s var(--transition-smooth);
}

.reveal-right[data-delay="1"] {
    transition-delay: 80ms;
}
.reveal-right[data-delay="2"] {
    transition-delay: 160ms;
}
.reveal-right[data-delay="3"] {
    transition-delay: 240ms;
}
.reveal-right[data-delay="4"] {
    transition-delay: 320ms;
}

.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Variante luxe : rideau montant (clip-path) pour les grands titres de section.
   Combine un dévoilement cinématique du bas vers le haut.
   Nécessite l'ajout de la classe sur l'élément + l'observer JS. */
.reveal-title {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--reveal-title-duration) var(--transition-smooth);
}

.reveal-title[data-delay="1"] {
    transition-delay: 120ms;
}
.reveal-title[data-delay="2"] {
    transition-delay: 240ms;
}
.reveal-title[data-delay="3"] {
    transition-delay: 360ms;
}

.reveal-title.is-visible {
    clip-path: inset(0% 0 0 0);
}

/* ==============================================================
   4. BOUTONS
   ============================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    clip-path: var(--clip-panel-sm);
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 1.5px solid transparent;
    /* Touch-friendly */
    min-height: 44px;
    min-width: 44px;
    white-space: nowrap;
    position: relative;
    /* Animer uniquement transform + opacity (GPU) */
    transition:
        transform 0.25s var(--transition-smooth),
        box-shadow 0.25s var(--transition-smooth),
        background-color 0.2s var(--transition-smooth),
        border-color 0.2s var(--transition-smooth);
    will-change: transform;
}

/* Primaire — accent-hover (et non accent) pour un contraste AA (4.5:1) avec le texte blanc */
.btn--primary {
    background-color: var(--accent-hover);
    color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--accent-active);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--brand-light), 6px 6px 0 1.5px var(--line-strong);
}

/* Fantôme */
.btn--ghost {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--accent);
}

/* Focus visible accessible */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ==============================================================
   5. HEADER / NAV – Mobile-first (sticky, glassmorphism)
   ============================================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-h);
    background-color: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.07);
    transition: box-shadow var(--transition-base);
}

.header.is-scrolled {
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.38);
}

/* Barre nav */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    height: 100%;
}

/* ---- Logo ---- */
.nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
    /* Touch-friendly */
    min-height: 44px;
    padding-block: 0.5rem;
}

.nav__logo-text {
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.8vw, 1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.nav__logo-text strong {
    color: var(--accent);
    font-weight: 700;
}

/* ---- Burger (mobile seulement) ---- */
.nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    border-radius: var(--radius);
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.nav__burger:hover {
    background-color: rgba(226, 232, 240, 0.06);
}

.nav__burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
    transition:
        transform 0.32s var(--transition-smooth),
        opacity 0.32s var(--transition-smooth);
}

/* État ouvert */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Menu (mobile : panneau déroulant) ---- */
.nav__menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Positionnement hors-flux sous le header */
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background-color: var(--brand-light);
    padding: var(--spacing-sm) var(--spacing-md);
    /* Insets système (encoche en paysage, barre gestuelle) */
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    border-bottom: 1px solid rgba(226, 232, 240, 0.07);
    /* Petits écrans en paysage : le menu défile au lieu de déborder */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Fermé par défaut */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    /* Retiré du flux de tabulation ET de l'arbre d'accessibilité :
       sans cela, les liens invisibles restent atteignables au clavier. */
    visibility: hidden;
    transition:
        opacity 0.3s var(--transition-smooth),
        transform 0.3s var(--transition-smooth),
        visibility 0s linear 0.3s;
}

.nav__menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
}

.nav__link {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius);
    /* Touch-friendly */
    min-height: 44px;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.nav__link:hover,
.nav__link:focus-visible {
    color: var(--text);
    background-color: rgba(226, 232, 240, 0.04);
}

/* Page active (aria-current) */
.nav__link[aria-current="page"] {
    color: var(--accent);
    background-color: rgba(28, 156, 63, 0.07);
}

.nav__link[aria-current="page"]:hover {
    background-color: rgba(28, 156, 63, 0.12);
}

.nav__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* CTA dans la nav — accent-hover (et non accent) pour un contraste AA avec le texte blanc */
.nav__link--cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-hover);
    color: #fff;
    padding: 0.625rem 1.25rem;
    clip-path: var(--clip-panel-sm);
    font-weight: 600;
    min-height: 44px;
    margin-top: 0.25rem;
    transition:
        transform 0.22s var(--transition-smooth),
        background-color 0.2s var(--transition-smooth);
}

.nav__link--cta:hover,
.nav__link--cta:focus-visible {
    background-color: var(--accent-active);
    color: #fff;
    transform: translate(-1px, -1px);
}

/* ---- Desktop : nav horizontale ≥ 768px ---- */
@media (min-width: 768px) {
    .nav__burger {
        display: none;
    }

    .nav__menu {
        /* Réinitialiser le positionnement absolu */
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 0.125rem;
        background: none;
        padding: 0;
        border: none;
        max-height: none;
        overflow: visible;
        /* Toujours visible (et toujours dans l'ordre de tabulation) */
        opacity: 1;
        transform: none;
        pointer-events: auto;
        visibility: visible;
        transition: none;
    }

    .nav__link {
        padding: 0.5rem 0.75rem;
        min-height: auto;
    }

    .nav__link--cta {
        margin-top: 0;
        margin-left: 0.5rem;
        padding: 0.5rem 1.125rem;
    }
}

/* ==============================================================
   6. HERO
   ============================================================== */
.hero {
    position: relative;
    padding-block: var(--spacing-xl) var(--spacing-lg);
    overflow: hidden;
}

/* Grille : 1 colonne mobile → 2 colonnes desktop */
.hero__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

/* ---- Colonne texte ---- */
.hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Eyebrow */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.6875rem, 1.2vw, 0.8125rem);
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.hero__eyebrow svg {
    flex-shrink: 0;
}

/* Titre principal */
.hero__title {
    font-size: clamp(2rem, 5.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--text);
}

/* Texte accentué */
.hero__title-accent {
    color: var(--accent);
}

/* Description */
.hero__desc {
    font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
    color: var(--text-muted);
    max-width: 54ch;
    line-height: 1.75;
}

.hero__desc strong {
    color: var(--text);
    font-weight: 600;
}

/* Actions (boutons) */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
}

/* Liste de réassurance */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
}

.hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.hero__trust li svg {
    color: var(--accent);
    flex-shrink: 0;
}

/* ---- Colonne image / figure ---- */
.hero__media {
    position: relative;
    clip-path: var(--clip-panel);
    overflow: hidden;
    /* Ratio moderne 4:3 – réservation d'espace avant chargement (no CLS) */
    aspect-ratio: 4 / 3;
    background-color: var(--brand-light);
    outline: 1px solid var(--line-strong);
    outline-offset: -1px;
}

/* Cadre "plan technique" : repères d'angle sur les coins non coupés */
.hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(var(--accent), var(--accent)) top right / 22px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) top right / 2px 22px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 22px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px 22px no-repeat;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Badge flottant « 25 ans » */
.hero__badge {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 3;
    background-color: var(--brand);
    border: 1.5px solid var(--accent);
    clip-path: var(--clip-panel-sm);
    padding: 0.75rem 1.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Animation flottante (GPU : transform only) */
    animation: floatY 4.2s ease-in-out infinite;
}

.hero__badge-number {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.hero__badge-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

/* Pastille géolocalisation */
.hero__geo {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.1);
    border-radius: 999px;
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
}

.hero__geo svg {
    color: var(--accent);
    flex-shrink: 0;
    position: relative;
}

/* Point ping (radar) autour de l'icône de géolocalisation */
.hero__geo-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.hero__geo-dot::before,
.hero__geo-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent);
}

.hero__geo-dot::before {
    /* cercle statique central */
    transform: scale(1);
}

.hero__geo-dot::after {
    /* onde radar */
    animation: geoPing 2.8s ease-out infinite;
    will-change: transform, opacity;
}

/* ── Filigrane cartographique ── */
.hero__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Anneaux de portée (motif "hub" — rayon de distance, décoration GPU-safe) */
.hero__bg-glow {
    position: absolute;
    top: -15%;
    right: -5%;
    width: clamp(320px, 55vw, 720px);
    height: clamp(320px, 55vw, 720px);
    border-radius: 50%;
    border: 1px solid rgba(28, 156, 63, 0.16);
    box-shadow:
        0 0 0 56px rgba(28, 156, 63, 0.025),
        0 0 0 112px rgba(28, 156, 63, 0.02),
        0 0 0 168px rgba(28, 156, 63, 0.015);
    pointer-events: none;
    z-index: 0;
}

.hero__content,
.hero__text,
.hero__media {
    position: relative;
    z-index: 1;
}

/* ---- Desktop 2 colonnes ≥ 900px ---- */
@media (min-width: 900px) {
    .hero {
        display: grid;
        align-items: center;
        min-height: calc(100dvh - var(--header-h));
        padding-block: var(--spacing-xl);
    }

    .hero__content {
        grid-template-columns: 1fr 1fr;
        gap: clamp(var(--spacing-lg), 6vw, var(--spacing-xl));
    }
}

/* Ajustement léger sur très grand écran */
@media (min-width: 1280px) {
    .hero__content {
        grid-template-columns: 55fr 45fr;
    }
}

/* ==============================================================
   7. STATS – Chiffres clés & Positionnement
   ============================================================== */
.stats {
    padding-block: var(--spacing-xl);
    background-color: var(--brand);
    position: relative;
    overflow: hidden;
}

/* Numéro fantôme de section — motif signature "plan technique" */
.stats::before {
    content: "02";
    position: absolute;
    top: clamp(-1rem, -2vw, -2rem);
    right: clamp(0.5rem, 2vw, 2rem);
    font-family: var(--font-display);
    font-size: clamp(6rem, 16vw, 11rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(148, 163, 184, 0.1);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.stats > .container {
    position: relative;
    z-index: 1;
}

.stats__header {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.stats__title {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: var(--spacing-md);
}

.stats__title-accent {
    color: var(--accent);
    display: inline-block;
}

.stats__desc {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
    color: var(--text-muted);
}

.stats__desc strong {
    color: var(--text);
    font-weight: 600;
}

/* Grille responsive auto-fit (mobile-first) */
.stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* Carte individuelle — panneau à coins coupés, bordure fine */
.stats__card {
    background: var(--panel-bg);
    border: 1px solid var(--line);
    clip-path: var(--clip-panel);
    /* Fluide : 3rem d'un bloc sur un écran de 360px mangeait la carte */
    padding: clamp(1.5rem, 5vw, var(--spacing-lg));
    text-align: center;
    position: relative;
    transition:
        transform 0.35s var(--transition-smooth),
        border-color 0.35s var(--transition-smooth);
    will-change: transform;
}

/* Repères d'angle sur les coins non coupés, révélés au survol */
.stats__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(var(--accent), var(--accent)) top right / 16px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) top right / 2px 16px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 16px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px 16px no-repeat;
    transition: opacity 0.3s var(--transition-smooth);
}

.stats__card:hover {
    transform: translateY(-6px);
    border-color: var(--line-strong);
}

.stats__card:hover::before {
    opacity: 1;
}

/* Icône */
.stats__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--spacing-md);
    color: var(--accent);
    transition: transform var(--transition-base);
}

.stats__card:hover .stats__icon {
    transform: scale(1.08);
}

.stats__icon svg {
    width: 100%;
    height: 100%;
}

/* Nombre principal (compteur) */
.stats__number {
    font-size: clamp(2.25rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    margin-bottom: var(--spacing-xs);
}

.stats__number span[data-count-target] {
    display: inline-block;
    min-width: 1.5ch;
    font-variant-numeric: tabular-nums;
}

.stats__unit {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.15em;
}

/* Label principal */
.stats__label {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

/* Label inline pour carte "Position Centrale" */
.stats__label-inline {
    font-size: clamp(1.5rem, 3.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    display: block;
}

/* Sous-titre */
.stats__sub {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Responsive ≥ 768px : 2 colonnes fixes */
@media (min-width: 768px) {
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* Responsive ≥ 1024px : 4 colonnes fixes */
@media (min-width: 1024px) {
    .stats__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);
    }
}

/* ==============================================================
   8. SERVICES – Trois offres, une logistique complète
   Glassmorphism léger · Stagger reveal · Grid 1→3 cols
   ============================================================== */
.services {
    padding-block: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

/* Séparateur vertical décoratif */
.services::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: var(--grid-line);
    pointer-events: none;
}

/* Numéro fantôme de section */
.services::after {
    content: "03";
    position: absolute;
    bottom: clamp(-1.5rem, -3vw, -2.5rem);
    left: clamp(0.5rem, 2vw, 2rem);
    font-family: var(--font-display);
    font-size: clamp(6rem, 16vw, 11rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(148, 163, 184, 0.08);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.services > .container {
    position: relative;
    z-index: 1;
}

/* ---- En-tête centré ---- */
.services__header {
    text-align: center;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

.services__eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--spacing-xs);
}

.services__title {
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.services__title-accent {
    color: var(--accent);
}

/* Barre d'accent verte centrée sous le titre h2 */
.services__title-bar {
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 2px;
    margin-inline: auto;
}

/* ---- Grille 3 cartes – Mobile-first 1 colonne ---- */
.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    position: relative;
    z-index: 1;
}

/* ---- Card : panneau à coins coupés ---- */
.services__card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--panel-bg);
    border: 1px solid var(--line);
    clip-path: var(--clip-panel);
    position: relative;
    transition:
        transform 0.35s var(--transition-smooth),
        border-color 0.35s var(--transition-smooth);
    will-change: transform;
}

/* Repères d'angle, révélés au survol */
.services__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(var(--accent), var(--accent)) top right / 16px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) top right / 2px 16px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 16px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px 16px no-repeat;
    transition: opacity 0.3s var(--transition-smooth);
}

/* Hover : légère élévation + bordure + repères visibles */
.services__card:hover {
    transform: translateY(-6px);
    border-color: var(--line-strong);
}

.services__card:hover::before {
    opacity: 1;
}

/* ---- Icône ---- */
.services__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    clip-path: var(--clip-panel-sm);
    border: 1.5px solid var(--line-strong);
    color: var(--accent);
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
    transition:
        border-color 0.35s var(--transition-smooth),
        transform 0.35s var(--transition-smooth);
}

.services__card:hover .services__card-icon {
    border-color: var(--accent);
    transform: scale(1.08);
}

/* ---- Titre h3 ---- */
.services__card-title {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

/* ---- Description ---- */
.services__card-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

/* ---- Liste de points forts ---- */
.services__card-list {
    margin-top: auto;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.services__card-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Puce accent verte */
.services__card-list li::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* ---- Modifier : capacité "froid & sous douane" ---- */
.services__card--cold .services__card-icon {
    color: var(--cold);
}

.services__card--cold:hover .services__card-icon {
    border-color: var(--cold);
}

.services__card--cold .services__card-list li::before {
    background: var(--cold);
}

/* ≥ 600px : 2 colonnes — dernière carte centrée si seule */
@media (min-width: 600px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services__card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: calc((100% - var(--spacing-md)) / 2);
        justify-self: center;
        width: 100%;
    }
}

/* ≥ 900px : 3 colonnes — retour comportement normal */
@media (min-width: 900px) {
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .services__card:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        justify-self: auto;
    }

    /* Carte seule sur sa rangée (4e, 7e…) : centrée sur la colonne médiane */
    .services__card:last-child:nth-child(3n + 1) {
        grid-column: 2 / 3;
    }
}

/* ==============================================================
   9. COMMITMENTS – Engagements & Confiance
   Fond --brand pur · Flexbox 40/60 · Slide-in droite
   ============================================================== */
.commitments {
    padding-block: var(--spacing-xl);
    background-color: var(--brand);
    position: relative;
    overflow: hidden;
}

/* Numéro fantôme de section */
.commitments::before {
    content: "04";
    position: absolute;
    top: clamp(-1rem, -2vw, -2rem);
    right: clamp(0.5rem, 2vw, 2rem);
    font-family: var(--font-display);
    font-size: clamp(6rem, 16vw, 11rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(148, 163, 184, 0.08);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* Ligne diagonale déco d'arrière-plan */
.commitments::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 60px,
        var(--grid-line) 60px,
        var(--grid-line) 61px
    );
    pointer-events: none;
    z-index: 0;
}

/* Layout Flexbox parent – mobile-first : colonne */
.commitments__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-lg), 6vw, 4rem);
    position: relative;
    z-index: 1;
}

.commitments > .container {
    position: relative;
    z-index: 1;
}

/* Desktop ≥ 900px : 40% / 60% côte à côte.
   Grille et non flex : `flex: 0 0 40%` + `flex: 0 0 60%` totalisent
   déjà 100% de la ligne, si bien que la gouttière (jusqu'à 80px)
   s'ajoutait par-dessus et poussait la colonne de droite hors du
   conteneur. Une grille retranche la gouttière des pistes. */
@media (min-width: 900px) {
    .commitments__inner {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
        align-items: center;
        gap: clamp(var(--spacing-lg), 6vw, 5rem);
    }
}

/* ---- Colonne gauche ---- */
.commitments__seal {
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    color: var(--accent);
    margin-bottom: var(--spacing-md);
}

.commitments__seal svg {
    width: 100%;
    height: 100%;
}

.commitments__eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--spacing-xs);
}

.commitments__title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.commitments__title-accent {
    color: var(--accent);
}

.commitments__lead {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 36ch;
}

/* ---- Colonne droite : liste ---- */
.commitments__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.commitments__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding-block: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color 0.25s var(--transition-smooth);
}

.commitments__item:last-child {
    border-bottom: none;
}

.commitments__item:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ---- Icône engagement ---- */
.commitments__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    clip-path: var(--clip-panel-sm);
    border: 1.5px solid var(--line-strong);
    color: var(--accent);
    flex-shrink: 0;
    transition:
        border-color 0.25s var(--transition-smooth),
        transform 0.3s var(--transition-smooth);
}

.commitments__item:hover .commitments__icon {
    border-color: var(--accent);
    transform: scale(1.05);
}

/* ---- Contenu texte ---- */
.commitments__item-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.1875rem);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.commitments__item-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==============================================================
   10. FOOTER – CTA bandeau + grille 4 cols + copyright
   ============================================================== */

/* Fondu de transition vers le footer */
.footer__fade {
    height: 80px;
    background: linear-gradient(
        to bottom,
        var(--brand) 0%,
        var(--footer-bg) 100%
    );
    margin-top: -1px; /* chevauchement pour éviter le liseré */
    pointer-events: none;
}

.footer {
    background-color: var(--footer-bg);
    position: relative;
}

/* ── CTA bandeau ── */
.footer__cta-band {
    background-color: var(--brand-light);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

.footer__cta-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
}

@media (min-width: 640px) {
    .footer__cta-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.footer__cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.footer__cta-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.footer__cta-btn {
    flex-shrink: 0;
}

.footer__cta-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex-shrink: 0;
}

.footer__cta-micro {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.footer__cta-micro strong {
    color: var(--text);
}

/* ── Corps grille ── */
.footer__body {
    padding-block: var(--spacing-xl) var(--spacing-lg);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, var(--spacing-lg));
}

@media (min-width: 600px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* ── Col 1 : Identité ── */
.footer__logo {
    display: inline-block;
    margin-bottom: var(--spacing-sm);
}

.footer__logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.footer__logo-text strong {
    color: var(--accent);
    font-weight: 700;
}

.footer__tagline {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--spacing-md);
    max-width: 30ch;
}

.footer__socials {
    display: flex;
    gap: 0.75rem;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    clip-path: var(--clip-panel-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    transition:
        color 0.25s var(--transition-smooth),
        border-color 0.25s var(--transition-smooth),
        background-color 0.25s var(--transition-smooth);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
    color: var(--text);
    border-color: var(--accent);
    background-color: rgba(28, 156, 63, 0.1);
}

.footer__social-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Colonnes liens ── */
.footer__col-title {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.footer__link {
    display: inline-block;
    padding-block: 0.4rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    position: relative;
    /* Soulignement animé */
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:
        color 0.25s var(--transition-smooth),
        background-size 0.3s var(--transition-smooth);
}

.footer__link:hover,
.footer__link:focus-visible {
    color: var(--text);
    background-size: 100% 1px;
}

.footer__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Col 4 : Infos contact ── */
.footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-style: normal;
}

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.footer__contact-item svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--accent);
}

.footer__contact-link {
    color: var(--text-muted);
    transition: color 0.25s var(--transition-smooth);
    /* Même cas que sur la page contact : l'adresse e-mail est un mot
       insécable qui, en élément flex, refusait de se réduire et
       élargissait toute la grille du pied de page. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.footer__contact-link:hover,
.footer__contact-link:focus-visible {
    color: var(--text);
}

.footer__contact-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Barre copyright ── */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-block: var(--spacing-md);
}

.footer__bottom-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

@media (min-width: 640px) {
    .footer__bottom-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.footer__copy {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.footer__legal {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer__legal-link {
    font-size: 0.8125rem;
    color: var(--text-muted);
    transition: color 0.25s var(--transition-smooth);
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
    color: var(--text);
}

.footer__legal-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Variante <button> (réouverture du bandeau cookies) : neutralise
   l'UA stylesheet pour s'aligner sur les liens voisins. */
.footer__legal-link--btn {
    font-family: inherit;
    line-height: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ==============================================================
   11. PAGE HERO (pages intérieures)
   Bannière compacte pour tarifs.html et futures pages
   ============================================================== */
.page-hero {
    position: relative;
    padding-block: calc(var(--spacing-xl) * 0.9) var(--spacing-lg);
    overflow: hidden;
    border-bottom: 1px solid rgba(226, 232, 240, 0.06);
}

.page-hero__bg-glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: clamp(260px, 45vw, 540px);
    height: clamp(260px, 45vw, 540px);
    border-radius: 50%;
    border: 1px solid rgba(28, 156, 63, 0.16);
    box-shadow:
        0 0 0 48px rgba(28, 156, 63, 0.025),
        0 0 0 96px rgba(28, 156, 63, 0.018);
    pointer-events: none;
    animation: glowPulse 11s ease-in-out infinite;
    will-change: transform, opacity;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Fil d'Ariane */
.page-hero__breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.page-hero__breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-hero__breadcrumb li + li::before {
    content: "/";
    opacity: 0.4;
}

.page-hero__breadcrumb a {
    color: var(--text-muted);
    transition: color 0.2s var(--transition-smooth);
}

.page-hero__breadcrumb a:hover {
    color: var(--accent);
}

.page-hero__breadcrumb [aria-current="page"] {
    color: var(--text);
    font-weight: 500;
}

.page-hero__title {
    font-size: clamp(1.875rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-top: var(--spacing-sm);
}

.page-hero__title-accent {
    color: var(--accent);
}

.page-hero__desc {
    font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
    color: var(--text-muted);
    max-width: 54ch;
    line-height: 1.7;
}

/* Supprime le header redondant dans la section pricing sur tarifs.html */
.pricing > .container > .pricing__header {
    display: none;
}

/* ==============================================================
   12. TARIFS / PRICING
   Style: Industrial-Minimalist · Tableaux ultra-fins · Simulateur
   ============================================================== */

.pricing {
    padding-block: var(--spacing-xl);
    background-color: var(--brand);
    position: relative;
    overflow: hidden;
}

/* Anneaux de portée d'arrière-plan (gauche) */
.pricing::before {
    content: "";
    position: absolute;
    bottom: -10%;
    left: -8%;
    width: clamp(280px, 45vw, 580px);
    height: clamp(280px, 45vw, 580px);
    border-radius: 50%;
    border: 1px solid rgba(28, 156, 63, 0.12);
    box-shadow:
        0 0 0 50px rgba(28, 156, 63, 0.018),
        0 0 0 100px rgba(28, 156, 63, 0.014);
    pointer-events: none;
}

/* ── Header de section ── */
.pricing__header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--spacing-lg);
}

.pricing__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.6875rem, 1.2vw, 0.8125rem);
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: var(--spacing-sm);
}

.pricing__eyebrow svg {
    flex-shrink: 0;
}

.pricing__title {
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
}

.pricing__title-accent {
    color: var(--accent);
}

.pricing__desc {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 52ch;
    margin-inline: auto;
}

/* ── Toggle Standard / Grand Compte ── */
/* Mobile-first : contrôle segmenté EMPILÉ.
   Les deux libellés mesurent 173 px et 263 px (« Grand Compte » porte en
   plus le badge « 70+ palettes ») : 452 px avec les gouttières, alors
   qu'un écran de 360 px n'offre que 312 px dans le conteneur. Sur une
   seule rangée, le second bouton sortait donc de l'écran.
   La rangée façon « pilule » revient dès 33rem, où la place existe. */
.pricing__toggle {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    background: var(--brand-light);
    border: 1px solid rgba(226, 232, 240, 0.08);
    border-radius: var(--cut);
    padding: 5px;
    width: 100%;
    margin-inline: auto;
    margin-block: var(--spacing-lg);
}

.pricing__toggle-btn {
    display: inline-flex;
    align-items: center;
    /* Centré : empilé, chaque bouton occupe toute la largeur */
    justify-content: center;
    /* Filet de sécurité si un libellé s'allonge un jour */
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition:
        color 0.25s var(--transition-smooth),
        background-color 0.28s var(--transition-smooth);
    min-height: 44px;
}

/* ≥ 33rem (528px) : la rangée tient, on retrouve la pilule centrée */
@media (min-width: 33rem) {
    .pricing__toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 999px;
        width: fit-content;
        max-width: 100%;
    }

    .pricing__toggle-btn {
        padding-inline: 1.375rem;
    }
}

.pricing__toggle-btn.is-active {
    background: var(--surface-3);
    color: var(--text);
}

.pricing__toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pricing__toggle-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(28, 156, 63, 0.14);
    color: var(--accent-text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Zone de contenu (injectée par JS) ── */
.pricing__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.pricing__section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.pricing__section-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0;
}

.pricing__section-title svg {
    color: var(--accent);
    flex-shrink: 0;
}

.pricing__section-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.08);
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-body);
}

/* ── État chargement ── */
.pricing__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: var(--spacing-xl);
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.pricing__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(28, 156, 63, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    will-change: transform;
    flex-shrink: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── État erreur ── */
.pricing__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-muted);
}

.pricing__error-icon {
    opacity: 0.25;
}

/* ── TABLEAUX ── */
.pricing-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-bottom: none;
    /* Le défilement horizontal du tableau ne doit pas se propager en
       navigation « retour » sur mobile. */
    overscroll-behavior-x: contain;
    /* Ombres de défilement : sur mobile, le tableau est plus large que
       l'écran. Les deux premières couches (attachées au CONTENU) masquent
       les ombres tant qu'on est en butée ; en défilant elles s'écartent
       et révèlent les ombres (attachées au CONTENEUR). L'affordance
       apparaît donc uniquement du côté où il reste à lire. */
    background:
        linear-gradient(var(--brand-light), var(--brand-light)) left center /
            22px 100% no-repeat,
        linear-gradient(var(--brand-light), var(--brand-light)) right center /
            22px 100% no-repeat,
        linear-gradient(to right, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0)) left
            center / 22px 100% no-repeat,
        linear-gradient(to left, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0)) right
            center / 22px 100% no-repeat,
        var(--brand-light);
    /* Un par image (la couleur de fond finale n'est pas concernée) */
    background-attachment: local, local, scroll, scroll;
}

.pricing-table__scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pricing-table table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    /* Transparent : le fond (et les ombres de défilement) appartiennent
       au conteneur .pricing-table__scroll. */
    background: transparent;
}

.pricing-table thead {
    background: rgba(28, 156, 63, 0.07);
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.pricing-table th {
    padding: 0.875rem 1.25rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(0.6875rem, 1vw, 0.8125rem);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.pricing-table td {
    padding: 0.9375rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--text);
    border-bottom: 1px solid rgba(226, 232, 240, 0.05);
    vertical-align: middle;
    line-height: 1.45;
}

.pricing-table tbody tr:nth-child(even) {
    background: rgba(51, 65, 85, 0.18);
}

.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

.pricing-table tbody tr {
    transition: background-color 0.18s var(--transition-smooth);
}

.pricing-table tbody tr:hover {
    background-color: rgba(51, 65, 85, 0.35);
}

/* Ligne « Plus courant » mise en avant */
.pricing-table__popular {
    background: rgba(28, 156, 63, 0.05) !important;
}

.pricing-table__popular td {
    border-top: 1px solid rgba(28, 156, 63, 0.2);
    border-bottom: 1px solid rgba(28, 156, 63, 0.2);
}

.pricing-table__popular td:first-child {
    border-left: 3px solid var(--accent);
    padding-left: calc(1.25rem - 3px);
}

.pricing-table__badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(28, 156, 63, 0.16);
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    font-family: var(--font-body);
}

/* Affichage plage de prix */
.price-range {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
}

.price-range strong {
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
}

.price-range__sep {
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.6;
}

.price-note {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.pricing-table__footnote {
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding: 0.625rem 1.25rem;
    background: var(--brand-light);
    border: 1px solid var(--line);
}

/* ── CARTES (Grand Compte) ── */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--spacing-md);
}

.pricing-card {
    background: var(--brand-light);
    border: 1px solid var(--line);
    clip-path: var(--clip-panel);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    transition:
        transform 0.3s var(--transition-smooth),
        border-color 0.3s var(--transition-smooth);
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
}

.pricing-card--featured {
    border-color: var(--accent);
    background: linear-gradient(
        155deg,
        rgba(28, 156, 63, 0.08) 0%,
        var(--brand-light) 55%
    );
}

.pricing-card--featured::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--accent), var(--accent)) top right / 18px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) top right / 2px 18px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 18px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px 18px no-repeat;
}

.pricing-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.pricing-card__type {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.pricing-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pricing-card__amount {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pricing-card__unit {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.pricing-card__features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid rgba(226, 232, 240, 0.07);
    padding-top: var(--spacing-md);
}

.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.pricing-card__features li::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 0.45rem;
}

.pricing__condition {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid var(--line);
    margin-top: var(--spacing-sm);
}

.pricing__condition strong {
    color: var(--text);
    font-weight: 600;
}

/* ── SIMULATEUR ── */
.pricing__simulator {
    background: var(--brand-light);
    border: 1px solid var(--line);
    clip-path: var(--clip-panel);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.simulator__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--spacing-md);
    color: var(--accent);
}

.simulator__title {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--text);
}

.simulator__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(195px, 100%), 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.simulator__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.simulator__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.simulator__input,
.simulator__select {
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--line);
    clip-path: var(--clip-panel-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    outline: none;
    min-height: 44px;
    transition: border-color 0.2s var(--transition-smooth);
}

.simulator__input:focus,
.simulator__select:focus {
    border-color: rgba(28, 156, 63, 0.6);
}

.simulator__input:focus-visible,
.simulator__select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.simulator__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.simulator__hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Zone de résultat */
.simulator__result {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--line);
    padding: var(--spacing-md);
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.simulator__result-placeholder {
    color: var(--text-muted);
    font-size: 0.9375rem;
    text-align: center;
}

.sim-result__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.sim-result__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sim-result__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sim-result__value {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.sim-result__total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.sim-result__total-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sim-result__total-value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.sim-result__period {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.sim-result__note {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

.sim-result__note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Notice légale ── */
.pricing__notice {
    display: flex;
    align-items: flex-start;
    /* Filet de sécurité : si du texte est un jour ajouté hors du
       <span>, il passera à la ligne au lieu de pousser la boîte. */
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.09);
    border-left: 3px solid rgba(148, 163, 184, 0.22);
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.pricing__notice svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Le texte forme UN seul élément flex, qui peut se réduire librement
   (min-width: 0 lève le min-content automatique) et se recomposer en
   prose sur autant de lignes que nécessaire. */
.pricing__notice-text {
    min-width: 0;
    /* Base 0 (et non `auto`) : avec `auto`, la taille hypothétique du
       texte vaut son max-content, ce qui le renvoyait à la ligne sous
       l'icône. À 0, il reste à côté d'elle et occupe la place restante. */
    flex: 1 1 0;
}

.pricing__notice strong {
    color: var(--text);
    font-weight: 600;
}

/* ==============================================================
   9. ANIMATIONS (transform + opacity UNIQUEMENT – GPU)
   ============================================================== */

/* Flottement vertical du badge hero */
@keyframes floatY {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-18px);
    }
}

/* Respiration lumineuse des lueurs d'arrière-plan */
@keyframes glowPulse {
    0%,
    100% {
        opacity: 0.09;
        transform: scale(1);
    }
    50% {
        opacity: 0.16;
        transform: scale(1.1);
    }
}

/* Onde radar de géolocalisation */
@keyframes geoPing {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }
    80%,
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* ==============================================================
   10. PREFERS-REDUCED-MOTION
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    /* Les blocs « reveal » démarrent à opacity:0 et comptent sur une
       transition pour apparaître. Transitions coupées, ils doivent être
       visibles d'emblée — sinon la page reste vide si JS échoue. */
    .reveal,
    .reveal-right,
    .reveal-title {
        opacity: 1;
        transform: none;
        clip-path: none;
    }
}

/* ==============================================================
   10bis. CONTRASTE RENFORCÉ (prefers-contrast: more)
   Les filets « plan technique » sont volontairement discrets ;
   ils deviennent lisibles pour qui demande plus de contraste.
   ============================================================== */
@media (prefers-contrast: more) {
    :root {
        --line: rgba(203, 213, 225, 0.45);
        --line-strong: rgba(203, 213, 225, 0.75);
        --text-muted: #cbd5e1;
        --grid-line: rgba(148, 163, 184, 0.16);
    }

    .btn,
    .nav__link[aria-current="page"] {
        border-color: currentColor;
    }
}

/* ==============================================================
   11. MAILLAGE INTERNE
   ============================================================== */
/* En-tête de section générique — également utilisé hors expertise.css
   (maillage interne de l'accueil), d'où sa définition ici. */
.section-header {
    max-width: 640px;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
}

.section-title-accent {
    color: var(--accent);
}

.internal-links {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--brand-light);
}
.internal-links .section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.internal-links__grid {
    display: grid;
    /* `min(…, 100%)` : sans lui la piste déborde sous 280px de viewport */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.internal-links__card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    clip-path: var(--clip-panel-sm);
    color: var(--text);
    text-decoration: none;
    transition:
        border-color 0.3s var(--transition-smooth),
        transform 0.3s var(--transition-smooth);
    background: rgba(255, 255, 255, 0.03);
}
.internal-links__card:hover,
.internal-links__card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.internal-links__card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.internal-links__card--accent {
    border-color: rgba(28, 156, 63, 0.35);
}
.internal-links__card svg {
    margin-top: auto;
    color: var(--accent);
    width: 18px;
    height: 18px;
}
.internal-links__label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}
.internal-links__desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ==============================================================
   12. SEO LOCAL – Pôles logistiques Bourgogne
   ============================================================== */
.seo-local {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--brand);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.seo-local__title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}
.seo-local__intro {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 70ch;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.seo-local__list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
}
.seo-local__list li {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.seo-local__list strong {
    color: var(--text);
}
.seo-local__note {
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 65ch;
    line-height: 1.6;
}
.seo-local__note a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.seo-local__note a:hover {
    text-decoration: underline;
}

/* ==============================================================
   12. BANDEAU CONSENTEMENT COOKIES (RGPD / CNIL)
   Panneau "blueprint" ancré en bas : coins coupés, filet accent,
   entrée en translate/opacity (GPU only).
   ============================================================== */
.consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 9000;
    padding: var(--spacing-sm);
    /* Barre gestuelle iOS / Android : le panneau ne doit pas passer dessous */
    padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom));
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
    /* Écran court en paysage : le bandeau défile plutôt que de tout couvrir */
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Entrée : masqué hors écran tant que .is-visible est absent */
    opacity: 0;
    transform: translateY(12px);
    transition:
        transform 0.5s var(--transition-smooth),
        opacity 0.4s var(--transition-smooth);
    will-change: transform;
}

/* `hidden` doit rester prioritaire sur la mise en page */
.consent[hidden] {
    display: none;
}

.consent.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.consent__panel {
    display: grid;
    gap: var(--spacing-md);
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    background-color: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    clip-path: var(--clip-panel-sm);
    box-shadow: 0 -18px 44px rgba(2, 6, 23, 0.55);
}

.consent__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.45rem;
}

.consent__title svg {
    color: var(--accent-text);
    flex-shrink: 0;
}

.consent__desc {
    font-size: clamp(0.8125rem, 1.4vw, 0.9rem);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 72ch;
}

.consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.consent__btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* ── Tablette / desktop : texte et actions côte à côte ── */
@media (min-width: 48rem) {
    .consent {
        padding: var(--spacing-md);
        padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    }

    .consent__panel {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: clamp(1.5rem, 4vw, 3rem);
    }

    .consent__actions {
        flex-wrap: nowrap;
    }

    .consent__btn {
        flex: 0 0 auto;
    }
}

/* ==============================================================
   13. CIBLES TACTILES (pointer: coarse)
   WCAG 2.5.8 « Target Size (Minimum) » : 24×24 px exigés, 44×44 px
   recommandés (2.5.5). Les liens de texte dense (footer, fil
   d'Ariane, mentions légales) restent compacts au pointeur fin et
   s'élargissent dès qu'un doigt les vise.
   ============================================================== */
@media (pointer: coarse) {
    .nav__link,
    .nav__link--cta {
        min-height: 44px;
    }

    .footer__link {
        padding-block: 0.625rem;
    }

    /* Volontairement PAS les liens noyés dans un paragraphe (.seo-local__note) :
       les agrandir déréglerait l'interlignage, et WCAG 2.5.8 exempte
       explicitement les liens en ligne dans un bloc de texte. */
    .footer__legal-link,
    .footer__contact-link,
    .page-hero__breadcrumb a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Les puces du fil d'Ariane restent alignées malgré la hauteur */
    .page-hero__breadcrumb li {
        min-height: 44px;
    }

    .footer__legal {
        row-gap: 0;
    }
}

/* ==============================================================
   14. IMPRESSION
   Feuille sobre : le site est sombre, l'impression ne doit pas
   vider une cartouche pour un devis ou une grille tarifaire.
   ============================================================== */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    body::before,
    .header,
    .consent,
    .footer__cta-band,
    .hero__bg-glow,
    .hero__map,
    .skip-link {
        display: none !important;
    }

    .reveal,
    .reveal-right,
    .reveal-title {
        opacity: 1;
        transform: none;
        clip-path: none;
    }

    h1,
    h2,
    h3,
    .stats__number,
    .pricing-card__amount {
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        word-break: break-all;
    }
}