/* ==========================================================================
   SAMIH FORCE — feuille de style principale
   CSS moderne sans étape de compilation : variables, couches, grilles, clamp().
   Organisation : polices · jetons · base · mise en page · composants · pages · utilitaires
   ========================================================================== */

@layer reset, base, layout, components, pages, utilities;

/* Polices auto-hébergées (SIL Open Font License 1.1) ------------------------ */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* Jetons de design ------------------------------------------------------------ */
:root {
    /* Couleurs de la marque (relevées sur le logo) */
    --blue: #1B6FF0;
    --blue-700: #1559C9;
    --blue-100: #DCE8FD;
    --blue-50: #EEF4FE;
    --cyan: #5ED0F5;
    --cyan-50: #E9F8FE;
    --navy: #0B2E6B;
    --navy-900: #081F4B;
    --navy-950: #061738;
    --amber: #FFB020;
    --amber-600: #E89A0C;
    --amber-50: #FFF6E5;

    /* Neutres */
    --ink: #101B24;
    --text: #2A3743;
    --muted: #5F6D78;
    --line: #E3E8EF;
    --line-strong: #CFD8E3;
    --bg: #FFFFFF;
    --bg-soft: #F6F8FB;
    --success: #127A4B;
    --success-50: #E8F6EF;
    --danger: #C0392B;
    --danger-50: #FDEDEB;

    /* Typographie */
    --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-display: "Poppins", var(--ff-body);
    --fs-xs: .8125rem;
    --fs-sm: .9375rem;
    --fs-base: 1.0625rem;
    --fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
    --fs-h4: 1.125rem;
    --fs-h3: clamp(1.2rem, 1.12rem + .4vw, 1.375rem);
    --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
    --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

    /* Espacements et formes */
    --container: 76rem;
    --container-narrow: 48rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --section: clamp(4rem, 3rem + 5vw, 7rem);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --shadow-sm: 0 1px 2px rgba(11, 46, 107, .06), 0 1px 3px rgba(11, 46, 107, .05);
    --shadow: 0 2px 4px rgba(11, 46, 107, .04), 0 10px 30px -8px rgba(11, 46, 107, .14);
    --shadow-lg: 0 4px 10px rgba(11, 46, 107, .05), 0 28px 60px -18px rgba(11, 46, 107, .28);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --header-h: 4.5rem;
}

/* Réinitialisation ------------------------------------------------------------ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    img, svg, video { display: block; max-width: 100%; }
    img { height: auto; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { cursor: pointer; background: none; border: 0; padding: 0; }
    ul[class], ol[class] { list-style: none; padding: 0; }
    p, h1, h2, h3, h4 { overflow-wrap: break-word; }
    [hidden] { display: none !important; }
}

/* Base ------------------------------------------------------------------------ */
@layer base {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--header-h) + 1rem);
    }
    body {
        font-family: var(--ff-body);
        font-size: var(--fs-base);
        line-height: 1.65;
        color: var(--text);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    h1, h2, h3, h4 {
        font-family: var(--ff-display);
        font-weight: 600;
        line-height: 1.2;
        color: var(--ink);
        letter-spacing: -.015em;
        text-wrap: balance;
    }
    p { text-wrap: pretty; }
    a { color: var(--blue-700); text-underline-offset: .2em; text-decoration-thickness: 1px; }
    a:hover { color: var(--navy); }
    strong { font-weight: 600; color: var(--ink); }
    ::selection { background: var(--blue-100); color: var(--navy); }

    :focus-visible {
        outline: 3px solid var(--blue);
        outline-offset: 3px;
        border-radius: 4px;
    }
    main:focus { outline: none; }
}

/* Mise en page -------------------------------------------------------------- */
@layer layout {
    .container {
        width: 100%;
        max-width: calc(var(--container) + var(--gutter) * 2);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }
    .container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

    .section { padding-block: var(--section); position: relative; }
    .section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
    .section--soft { background: var(--bg-soft); }
    .section--dark {
        background:
            radial-gradient(60rem 30rem at 100% 0%, rgba(27, 111, 240, .35), transparent 60%),
            radial-gradient(40rem 25rem at 0% 100%, rgba(94, 208, 245, .14), transparent 60%),
            var(--navy-900);
        color: #C9D6EA;
    }
    .section--dark h2, .section--dark h3 { color: #FFFFFF; }
    .section__more { margin-top: 2.5rem; text-align: center; }

    .card-grid { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.5rem); }
    @media (min-width: 40rem) {
        .card-grid--2, .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 64rem) {
        .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
    }

    .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
    .split--top { align-items: start; }
    @media (min-width: 60rem) {
        .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
        .split--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
        .split--top .split__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
    }
}

/* Composants ----------------------------------------------------------------- */
@layer components {

    /* Icônes */
    .icon {
        width: 1.25em;
        height: 1.25em;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .icon-tile {
        display: inline-grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border-radius: 14px;
        flex-shrink: 0;
        background: var(--blue-50);
        color: var(--blue-700);
    }
    .icon-tile .icon { width: 1.45rem; height: 1.45rem; }
    .icon-tile--sm { width: 2.5rem; height: 2.5rem; border-radius: 11px; }
    .icon-tile--sm .icon { width: 1.2rem; height: 1.2rem; }
    .icon-tile--lg { width: 3.75rem; height: 3.75rem; border-radius: 18px; }
    .icon-tile--lg .icon { width: 1.75rem; height: 1.75rem; }
    .icon-tile--blue { background: var(--blue); color: #FFFFFF; }
    .icon-tile--cyan { background: var(--cyan); color: var(--navy); }
    .icon-tile--navy { background: var(--navy); color: #FFFFFF; }
    .icon-tile--amber { background: var(--amber); color: var(--navy); }
    .icon-tile--outline { background: #FFFFFF; color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
    .icon-tile--light { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

    /* Sur-titre avec le motif des quatre tuiles */
    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .75rem;
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--blue-700);
        margin-bottom: 1rem;
    }
    .eyebrow::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 1.5px;
        background: var(--blue);
        box-shadow: 7px 0 0 var(--cyan), 0 7px 0 var(--navy), 7px 7px 0 var(--amber);
        margin-right: 7px;
        margin-bottom: 7px;
        flex-shrink: 0;
    }
    .section--dark .eyebrow, .section-head--light .eyebrow { color: var(--cyan); }
    .section--dark .eyebrow::before, .section-head--light .eyebrow::before { box-shadow: 7px 0 0 var(--cyan), 0 7px 0 #FFFFFF, 7px 7px 0 var(--amber); }

    /* Boutons */
    .btn {
        --btn-bg: var(--blue);
        --btn-fg: #FFFFFF;
        --btn-border: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        min-height: 2.875rem;
        padding: .7rem 1.35rem;
        border-radius: 12px;
        border: 1px solid var(--btn-border);
        background: var(--btn-bg);
        color: var(--btn-fg);
        font-weight: 600;
        font-size: var(--fs-sm);
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
    }
    .btn .icon { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
    .btn:hover { color: var(--btn-fg); transform: translateY(-1px); }
    .btn:hover .icon:last-child { transform: translateX(3px); }
    .btn:active { transform: translateY(0); }
    .btn--lg { min-height: 3.25rem; padding: .85rem 1.6rem; font-size: 1rem; }
    .btn--primary { box-shadow: 0 6px 18px -6px rgba(27, 111, 240, .55); }
    .btn--primary:hover { --btn-bg: var(--blue-700); }
    .btn--secondary { --btn-bg: #FFFFFF; --btn-fg: var(--ink); --btn-border: var(--line-strong); }
    .btn--secondary:hover { --btn-border: var(--navy); --btn-fg: var(--navy); }
    .btn--amber { --btn-bg: var(--amber); --btn-fg: var(--navy-950); }
    .btn--amber:hover { --btn-bg: #FFC14D; }
    .btn--ghost-light { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-border: rgba(255, 255, 255, .35); }
    .btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .08); --btn-border: #FFFFFF; }
    .btn--ghost-light:hover .icon:last-child { transform: none; }
    .btn[disabled], fieldset[disabled] .btn { opacity: .55; cursor: not-allowed; transform: none; }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        font-weight: 600;
        color: var(--blue-700);
        text-decoration: none;
    }
    .link-arrow .icon { transition: transform .25s var(--ease); }
    .link-arrow:hover { color: var(--navy); }
    .link-arrow:hover .icon { transform: translateX(4px); }

    /* Logo */
    .logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
    .logo__mark { width: 2.125rem; height: 2.125rem; }
    .logo__word {
        font-family: var(--ff-display);
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 1;
        letter-spacing: -.03em;
        color: var(--ink);
    }
    .logo__word strong { font-weight: 700; color: inherit; }
    .logo--light .logo__word { color: #FFFFFF; }

    /* Lien d'évitement */
    .skip-link {
        position: fixed;
        top: .75rem;
        left: .75rem;
        z-index: 1000;
        padding: .75rem 1.25rem;
        border-radius: var(--radius-sm);
        background: var(--navy);
        color: #FFFFFF;
        font-weight: 600;
        transform: translateY(-200%);
        transition: transform .2s var(--ease);
    }
    .skip-link:focus { transform: none; color: #FFFFFF; }

    /* En-tête ------------------------------------------------------------- */
    /* Le flou est porté par un pseudo-élément : un backdrop-filter sur l'en-tête lui-même
       deviendrait le bloc conteneur du menu mobile (position: fixed) et l'écraserait. */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        isolation: isolate;
        border-bottom: 1px solid transparent;
        transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
    }
    .site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        transition: background-color .25s var(--ease);
    }
    .nav-open .site-header::before { background: #FFFFFF; }
    .nav-open .site-header { border-bottom-color: var(--line); }
    .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -16px rgba(11, 46, 107, .25); }
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        min-height: var(--header-h);
    }
    .site-header__brand { text-decoration: none; display: inline-flex; border-radius: 8px; }

    .nav-toggle {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: #FFFFFF;
        z-index: 2;
    }
    .nav-toggle__bars { position: relative; width: 1.25rem; height: .875rem; }
    .nav-toggle__bars span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: var(--ink);
        transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
    }
    .nav-toggle__bars span:nth-child(1) { top: 0; }
    .nav-toggle__bars span:nth-child(2) { top: calc(50% - 1px); }
    .nav-toggle__bars span:nth-child(3) { top: calc(100% - 2px); }
    .nav-open .nav-toggle__bars span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
    .nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
    .nav-open .nav-toggle__bars span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

    .site-nav__list { display: flex; flex-direction: column; }
    .site-nav__link {
        display: flex;
        align-items: center;
        padding: .9rem 0;
        font-weight: 500;
        color: var(--ink);
        text-decoration: none;
    }
    .site-nav__link.is-active, .site-nav__link:hover { color: var(--blue-700); }
    .site-nav__item { position: relative; }
    .site-nav__dropdown-toggle { display: none; }
    .dropdown__list { display: grid; gap: .25rem; padding-bottom: .75rem; }
    .dropdown__link {
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        padding: .6rem .5rem;
        border-radius: 12px;
        text-decoration: none;
        color: var(--ink);
    }
    .dropdown__link:hover, .dropdown__link[aria-current] { background: var(--bg-soft); color: var(--ink); }
    .dropdown__title { display: block; font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
    .dropdown__short { display: none; }
    .dropdown__text { display: none; }
    .dropdown__all { display: none; }
    .lang-switch { display: flex; gap: .25rem; }
    .lang-switch a { padding: .35rem .6rem; border-radius: 8px; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; color: var(--muted); }
    .lang-switch a[aria-current] { background: var(--blue-50); color: var(--blue-700); }
    .site-nav__extra { display: none; }

    /* Navigation mobile (< 64rem) : panneau plein écran ---------------- */
    @media (max-width: 63.99rem) {
        .nav-open { overflow: hidden; }
        .nav-open .quick-contact { opacity: 0; visibility: hidden; }

        .site-nav {
            position: fixed;
            top: var(--header-h);
            left: 0;
            right: 0;
            height: calc(100vh - var(--header-h));
            height: calc(100dvh - var(--header-h));
            display: flex;
            flex-direction: column;
            gap: 1.75rem;
            padding: .5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
            overflow-y: auto;
            overscroll-behavior: contain;
            background:
                radial-gradient(28rem 18rem at 100% 100%, rgba(94, 208, 245, .22), transparent 70%),
                radial-gradient(22rem 16rem at 0% 100%, rgba(27, 111, 240, .10), transparent 70%),
                #FFFFFF;
            visibility: hidden;
            clip-path: inset(0 0 100% 0);
            transition: clip-path .5s var(--ease), visibility 0s linear .5s;
        }
        .nav-open .site-nav { visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; }

        /* Liens principaux numérotés, apparition en cascade */
        .site-nav__list { counter-reset: nav; }
        .site-nav__item {
            border-bottom: 1px solid var(--line);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .45s var(--ease), transform .45s var(--ease);
        }
        .nav-open .site-nav__item { opacity: 1; transform: none; }
        .nav-open .site-nav__item:nth-child(1) { transition-delay: .08s; }
        .nav-open .site-nav__item:nth-child(2) { transition-delay: .14s; }
        .nav-open .site-nav__item:nth-child(3) { transition-delay: .2s; }
        .nav-open .site-nav__item:nth-child(4) { transition-delay: .26s; }
        .site-nav__link {
            counter-increment: nav;
            gap: 1rem;
            padding: 1.05rem 0;
            font-family: var(--ff-display);
            font-weight: 600;
            font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem);
            letter-spacing: -.02em;
        }
        .site-nav__link::before {
            content: counter(nav, decimal-leading-zero);
            min-width: 1.75rem;
            font-family: var(--ff-body);
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .08em;
            color: var(--blue);
        }
        .site-nav__link::after {
            content: "";
            width: .55rem;
            height: .55rem;
            margin-left: auto;
            margin-right: .35rem;
            border-top: 2px solid currentColor;
            border-right: 2px solid currentColor;
            transform: rotate(45deg);
            opacity: .35;
            transition: transform .25s var(--ease), opacity .25s var(--ease);
        }
        .site-nav__link:active::after, .site-nav__link:hover::after { transform: translateX(3px) rotate(45deg); opacity: 1; }
        .site-nav__link.is-active { color: var(--blue-700); }
        .site-nav__link.is-active::after { opacity: 1; }

        /* Services en tuiles */
        .has-dropdown { border-bottom: 0; }
        .has-dropdown > .site-nav__link { border-bottom: 1px solid var(--line); }
        .dropdown { padding: .9rem 0 1.1rem; border-bottom: 1px solid var(--line); }
        .dropdown__list { grid-template-columns: 1fr 1fr; gap: .6rem; padding: 0; }
        .dropdown__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
        .dropdown__link {
            flex-direction: column;
            gap: .7rem;
            height: 100%;
            padding: .9rem;
            border-radius: 16px;
            background: #FFFFFF;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
            transition: border-color .2s var(--ease), transform .2s var(--ease);
        }
        .dropdown__list li:last-child:nth-child(odd) .dropdown__link { flex-direction: row; align-items: center; }
        .dropdown__link:active { transform: scale(.98); }
        .dropdown__link[aria-current] { border-color: var(--blue); background: var(--blue-50); }
        .dropdown__title { display: none; }
        .dropdown__short { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--ink); }

        /* Pied du panneau : appel à l'action et contacts directs */
        .site-nav__footer {
            margin-top: auto;
            display: grid;
            gap: 1.25rem;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .45s var(--ease) .3s, transform .45s var(--ease) .3s;
        }
        .nav-open .site-nav__footer { opacity: 1; transform: none; }
        .site-nav__cta { width: 100%; min-height: 3.25rem; font-size: 1rem; }
        .site-nav__extra { display: grid; gap: .75rem; }
        .site-nav__slogan { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-sm); color: var(--navy); }
        .site-nav__contact { display: flex; flex-wrap: wrap; gap: .5rem; }
        .site-nav__contact a {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .55rem .9rem;
            border-radius: 999px;
            background: var(--bg-soft);
            border: 1px solid var(--line);
            font-size: var(--fs-sm);
            font-weight: 500;
            color: var(--ink);
            text-decoration: none;
        }
        .site-nav__contact .icon { color: var(--blue); width: 1.05rem; height: 1.05rem; }

        /* Sélecteur de langue : entre les liens et l'appel à l'action */
        .site-nav__list { order: 1; }
        .lang-switch {
            order: 2;
            align-self: flex-start;
            padding: .25rem;
            border-radius: 12px;
            background: var(--bg-soft);
            border: 1px solid var(--line);
        }
        .lang-switch a { display: block; padding: .45rem .9rem; font-size: var(--fs-sm); }
        .lang-switch a[aria-current] { background: #FFFFFF; box-shadow: var(--shadow-sm); }
        .site-nav__footer { order: 3; }
    }
    @media (max-width: 63.99rem) and (prefers-reduced-motion: reduce) {
        .site-nav, .site-nav__item, .site-nav__footer { transition: none !important; }
    }

    /* Navigation bureau (≥ 64rem) */
    @media (min-width: 64rem) {
        .nav-toggle { display: none; }
        .site-nav { display: flex; align-items: center; gap: 2rem; }
        .site-nav__list { flex-direction: row; align-items: center; gap: .25rem; }
        .site-nav__link {
            padding: .5rem .8rem;
            border-radius: 10px;
            font-size: var(--fs-sm);
        }
        .site-nav__link.is-active { background: var(--blue-50); }
        .has-dropdown { display: flex; align-items: center; }
        .has-dropdown > .site-nav__link { padding-right: .3rem; }
        .site-nav__dropdown-toggle {
            display: inline-grid;
            place-items: center;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 8px;
            color: var(--muted);
        }
        .site-nav__dropdown-toggle .icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
        .has-dropdown.is-open .site-nav__dropdown-toggle .icon { transform: rotate(180deg); }
        .dropdown {
            position: absolute;
            top: calc(100% + .75rem);
            left: 50%;
            width: min(40rem, 90vw);
            padding: 1rem;
            border-radius: var(--radius-lg);
            background: #FFFFFF;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-lg);
            visibility: hidden;
            opacity: 0;
            transform: translate(-50%, 8px);
            transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
        }
        .dropdown::before { content: ""; position: absolute; inset: -1rem 0 auto; height: 1rem; }
        .has-dropdown:hover .dropdown,
        .has-dropdown:focus-within .dropdown,
        .has-dropdown.is-open .dropdown { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }
        .has-dropdown.is-closed .dropdown { visibility: hidden; opacity: 0; }
        .dropdown__list { grid-template-columns: 1fr 1fr; gap: .25rem; padding: 0; }
        .dropdown__link { padding: .85rem; }
        .dropdown__text { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin-top: .2rem; }
        .dropdown__all {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            margin-top: .75rem;
            padding: .75rem;
            border-radius: 12px;
            background: var(--bg-soft);
            font-size: var(--fs-sm);
            font-weight: 600;
            text-decoration: none;
        }
        .site-nav__footer { display: flex; align-items: center; }
    }
    @media (min-width: 64rem) and (max-width: 74.99rem) {
        .site-nav { gap: 1rem; }
        .site-nav__cta .icon { display: none; }
    }

    /* Fil d'Ariane */
    .breadcrumbs { margin-bottom: 1.75rem; font-size: var(--fs-xs); }
    .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
    .breadcrumbs li { display: flex; align-items: center; gap: .4rem; color: var(--muted); }
    .breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
    .breadcrumbs a { color: var(--muted); text-decoration: none; }
    .breadcrumbs a:hover { color: var(--blue-700); text-decoration: underline; }
    .breadcrumbs [aria-current] { color: var(--ink); font-weight: 500; }

    /* En-têtes de section */
    .section-head { max-width: 44rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
    .section-head--center { margin-inline: auto; text-align: center; }
    .section-head--center .eyebrow { justify-content: center; }
    .section-head__title { font-size: var(--fs-h2); }
    .section-head__intro { margin-top: 1rem; font-size: var(--fs-lg); color: var(--muted); }
    .section-head--light .section-head__title { color: #FFFFFF; }
    .section-head--light .section-head__intro { color: #C9D6EA; }
    .split__aside .section-head { margin-bottom: 2rem; }

    /* Cartes */
    .card, .service-card, .case-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
        border-radius: var(--radius-lg);
        background: #FFFFFF;
        border: 1px solid var(--line);
        transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
    }
    .section--soft .card { border-color: transparent; box-shadow: var(--shadow-sm); }
    .card__title, .service-card__title { font-size: var(--fs-h3); }
    .card__text, .service-card__text { color: var(--muted); }
    .card .check-list { margin-top: auto; padding-top: .5rem; }
    .card .link-arrow { margin-top: auto; }

    .service-card:hover, .case-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow); transform: translateY(-4px); }
    .service-card__title a { color: var(--ink); text-decoration: none; }
    .service-card__more {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-top: auto;
        font-weight: 600;
        font-size: var(--fs-sm);
        color: var(--blue-700);
    }
    .service-card__more .icon { transition: transform .25s var(--ease); }
    .service-card:hover .service-card__more .icon { transform: translateX(4px); }
    .service-card--cta {
        background: linear-gradient(150deg, var(--navy) 0%, var(--navy-950) 100%);
        border-color: transparent;
        color: #C9D6EA;
        overflow: hidden;
    }
    .service-card--cta::after {
        content: "";
        position: absolute;
        right: -2.5rem;
        bottom: -2.5rem;
        width: 9rem;
        height: 9rem;
        border-radius: 50%;
        background: var(--amber);
        opacity: .14;
    }
    .service-card--cta .service-card__title { color: #FFFFFF; }
    .service-card--cta .service-card__text { color: #C9D6EA; }
    .service-card--cta .btn { align-self: flex-start; margin-top: auto; position: relative; z-index: 1; }
    .service-card--cta:hover { transform: none; box-shadow: none; }

    .stretched-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }

    /* Listes */
    .check-list { display: grid; gap: .6rem; }
    .check-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--text); }
    .check-list .icon { width: 1.15rem; height: 1.15rem; margin-top: .2rem; color: var(--blue); stroke-width: 2.4; }
    @media (min-width: 40rem) { .check-list--2 { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }

    .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
    .tag-list li {
        padding: .35rem .8rem;
        border-radius: 999px;
        background: #FFFFFF;
        border: 1px solid var(--line);
        font-size: var(--fs-xs);
        font-weight: 500;
        color: var(--navy);
    }

    .chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
    .chip-list li {
        padding: .4rem .85rem;
        border-radius: 10px;
        background: var(--bg-soft);
        border: 1px solid var(--line);
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--ink);
    }
    .chip-list--sm li { padding: .2rem .6rem; font-size: var(--fs-xs); border-radius: 8px; }
    .chip-list--dark li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #FFFFFF; }

    /* Fonctionnalités / atouts */
    .feature-list { display: grid; gap: 1rem; }
    @media (min-width: 40rem) { .feature-list { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
    .feature {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.75rem;
        border-radius: var(--radius-lg);
        background: #FFFFFF;
        box-shadow: var(--shadow-sm);
    }
    .feature__title { font-size: var(--fs-h4); margin-bottom: .4rem; }
    .feature__text { color: var(--muted); font-size: var(--fs-sm); }

    .brand-panel {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        padding: 1.5rem;
        border-radius: var(--radius-lg);
        background: var(--navy);
        color: #FFFFFF;
    }
    .brand-panel__tiles, .cta-band__decor, .empty-state__tiles, .case-card__placeholder, .error-page__tiles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .brand-panel__tiles { width: 3.5rem; flex-shrink: 0; }
    .brand-panel__tiles span, .cta-band__decor span, .empty-state__tiles span, .case-card__placeholder span, .error-page__tiles i {
        aspect-ratio: 1;
        border-radius: 28%;
        background: var(--blue);
    }
    :is(.brand-panel__tiles, .cta-band__decor, .empty-state__tiles, .case-card__placeholder, .error-page__tiles) > :nth-child(2) { background: var(--cyan); }
    :is(.brand-panel__tiles, .cta-band__decor, .empty-state__tiles, .case-card__placeholder, .error-page__tiles) > :nth-child(3) { background: var(--navy); }
    :is(.brand-panel__tiles, .cta-band__decor, .empty-state__tiles, .case-card__placeholder, .error-page__tiles) > :nth-child(4) { background: var(--amber); border-radius: 50%; }
    .brand-panel__tiles span:nth-child(3), .cta-band__decor span:nth-child(3) { background: #FFFFFF; }
    .brand-panel__text { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-sm); line-height: 1.5; color: #FFFFFF; }

    /* Étapes */
    .steps { display: grid; gap: 1.25rem; counter-reset: step; }
    @media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
    .step {
        position: relative;
        padding: 1.75rem 1.5rem;
        border-radius: var(--radius-lg);
        background: #FFFFFF;
        border: 1px solid var(--line);
    }
    .section--soft .step { border-color: transparent; box-shadow: var(--shadow-sm); }
    .step__number {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        font-family: var(--ff-display);
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 1;
        color: var(--blue-50);
        -webkit-text-stroke: 1px var(--blue-100);
    }
    .step__icon {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 1.25rem;
        border-radius: 12px;
        background: var(--navy);
        color: var(--cyan);
    }
    .step:nth-child(2) .step__icon { background: var(--blue); color: #FFFFFF; }
    .step:nth-child(3) .step__icon { background: var(--cyan); color: var(--navy); }
    .step:nth-child(4) .step__icon { background: var(--amber); color: var(--navy); border-radius: 50%; }
    .step__title { font-size: var(--fs-h4); margin-bottom: .5rem; }
    .step__text { font-size: var(--fs-sm); color: var(--muted); }

    /* Bandeau d'appel à l'action */
    .cta-band {
        position: relative;
        overflow: hidden;
        padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
        border-radius: var(--radius-xl);
        background:
            radial-gradient(40rem 22rem at 110% -10%, rgba(94, 208, 245, .32), transparent 60%),
            radial-gradient(30rem 20rem at -10% 120%, rgba(27, 111, 240, .45), transparent 60%),
            var(--navy);
        color: #C9D6EA;
        isolation: isolate;
    }
    .cta-band__decor {
        position: absolute;
        right: clamp(-3rem, -1rem - 3vw, -1rem);
        top: 50%;
        width: clamp(9rem, 6rem + 12vw, 17rem);
        gap: 12px;
        transform: translateY(-50%) rotate(-8deg);
        opacity: .18;
        z-index: -1;
    }
    @media (min-width: 64rem) { .cta-band__decor { opacity: 1; right: 4rem; transform: translateY(-50%); } }
    .cta-band__content { max-width: 40rem; }
    .cta-band__title { font-size: var(--fs-h2); color: #FFFFFF; }
    .cta-band__text { margin-top: 1rem; font-size: var(--fs-lg); }
    .cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
    @media (max-width: 30rem) { .cta-band__actions .btn { width: 100%; white-space: normal; } }

    /* FAQ */
    .faq { display: grid; gap: .75rem; }
    .faq__item {
        border-radius: var(--radius);
        background: #FFFFFF;
        border: 1px solid var(--line);
        transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    }
    .faq__item[open] { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
    .faq__question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
        font-family: var(--ff-display);
        font-weight: 600;
        color: var(--ink);
        cursor: pointer;
        list-style: none;
    }
    .faq__question::-webkit-details-marker { display: none; }
    .faq__question:hover { color: var(--blue-700); }
    .faq__chevron { color: var(--blue); transition: transform .25s var(--ease); }
    .faq__item[open] .faq__chevron { transform: rotate(180deg); }
    .faq__answer { padding: 0 1.5rem 1.4rem; color: var(--muted); }

    /* Formulaires */
    .form__title { font-size: var(--fs-h3); }
    .form__intro { margin-top: .4rem; font-size: var(--fs-sm); color: var(--muted); }
    .form__alert:not(:empty) { margin-top: 1.5rem; }
    .form__alert:focus { outline: none; }
    .form__fieldset { border: 0; padding: 0; min-width: 0; margin-top: 1.75rem; }
    .form__fieldset[disabled] .form__grid { opacity: .6; }
    .form__grid { display: grid; gap: 1.25rem; }
    @media (min-width: 40rem) { .form__grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
    .form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
    .form__privacy { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--muted); }
    .form__privacy .icon { color: var(--success); width: 1rem; height: 1rem; }

    .field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
    .field__label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
    .field__req { color: var(--danger); }
    .field__opt { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
    .field__input {
        width: 100%;
        min-height: 3rem;
        padding: .75rem 1rem;
        border-radius: 12px;
        border: 1px solid var(--line-strong);
        background: #FFFFFF;
        font-size: 1rem;
        color: var(--ink);
        transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    }
    .field__input::placeholder { color: #8A96A3; }
    .field__input:hover { border-color: #AFBBCB; }
    .field__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(27, 111, 240, .16); }
    .field__textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }
    .field__select {
        appearance: none;
        padding-right: 2.75rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6D78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1.1rem;
    }
    .field__hint { font-size: var(--fs-xs); color: var(--muted); }
    .field__meta { display: flex; justify-content: space-between; gap: 1rem; }
    .field__counter { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .field__error { font-size: var(--fs-xs); font-weight: 500; color: var(--danger); }
    .field__error:empty { display: none; }
    .field--invalid .field__input { border-color: var(--danger); }
    .field--invalid .field__input:focus { box-shadow: 0 0 0 4px rgba(192, 57, 43, .14); }

    .check { display: flex; align-items: flex-start; gap: .75rem; }
    .check__input {
        appearance: none;
        flex-shrink: 0;
        width: 1.35rem;
        height: 1.35rem;
        margin-top: .15rem;
        border-radius: 6px;
        border: 1.5px solid var(--line-strong);
        background: #FFFFFF;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: background-color .15s var(--ease), border-color .15s var(--ease);
    }
    .check__input::after {
        content: "";
        width: .4rem;
        height: .7rem;
        margin-top: -.15rem;
        border: solid #FFFFFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0);
        transition: transform .15s var(--ease);
    }
    .check__input:checked { background: var(--blue); border-color: var(--blue); }
    .check__input:checked::after { transform: rotate(45deg) scale(1); }
    .check__input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
    .field--invalid .check__input { border-color: var(--danger); }
    .check__label { font-size: var(--fs-sm); color: var(--text); cursor: pointer; }

    .alert {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: 1rem 1.25rem;
        border-radius: 14px;
        font-size: var(--fs-sm);
        border: 1px solid;
    }
    .alert .icon { margin-top: .15rem; }
    .alert--success { background: var(--success-50); border-color: #B9E3CD; color: #0D5C38; }
    .alert--error { background: var(--danger-50); border-color: #F4C4BE; color: #8E2A20; }
    .alert--info { background: var(--blue-50); border-color: var(--blue-100); color: var(--navy); }

    .btn.is-loading { pointer-events: none; opacity: .8; }
    .btn.is-loading .icon { animation: pulse 1s ease-in-out infinite; }

    /* Contact rapide */
    .quick-contact { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90; }
    .quick-contact__button {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        height: 3.5rem;
        padding: 0 1.25rem 0 1.1rem;
        border-radius: 999px;
        background: var(--navy);
        color: #FFFFFF;
        font-weight: 600;
        font-size: var(--fs-sm);
        text-decoration: none;
        box-shadow: 0 12px 30px -10px rgba(11, 46, 107, .6);
        transition: transform .2s var(--ease), background-color .2s var(--ease);
    }
    .quick-contact__button:hover { color: #FFFFFF; background: var(--blue-700); transform: translateY(-2px); }
    .quick-contact__button .icon { width: 1.35rem; height: 1.35rem; }
    .quick-contact__icon-close { display: none; }
    .quick-contact.is-open .quick-contact__icon-open { display: none; }
    .quick-contact.is-open .quick-contact__icon-close { display: block; }
    @media (max-width: 40rem) {
        .quick-contact__button { width: 3.5rem; padding: 0; justify-content: center; }
        .quick-contact__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    }
    .quick-contact__panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + .75rem);
        width: min(21rem, calc(100vw - 2rem));
        padding: 1.25rem;
        border-radius: var(--radius-lg);
        background: #FFFFFF;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        animation: pop-in .22s var(--ease);
    }
    .quick-contact__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .quick-contact__title { font-family: var(--ff-display); font-weight: 600; color: var(--ink); }
    .quick-contact__close { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; color: var(--muted); }
    .quick-contact__close:hover { background: var(--bg-soft); color: var(--ink); }
    .quick-contact__text { font-size: var(--fs-sm); color: var(--muted); margin: .2rem 0 .9rem; }
    .quick-contact__list { display: grid; gap: .35rem; }
    .quick-contact__list a {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .6rem;
        border-radius: 12px;
        text-decoration: none;
        color: var(--ink);
    }
    .quick-contact__list a:hover { background: var(--bg-soft); color: var(--ink); }
    .quick-contact__list strong { display: block; font-size: var(--fs-sm); }
    .quick-contact__list small { display: block; font-size: var(--fs-xs); color: var(--muted); }

    /* Pied de page */
    .site-footer {
        background: var(--navy-950);
        color: #A9B8CE;
        padding-top: clamp(3.5rem, 3rem + 3vw, 5rem);
        font-size: var(--fs-sm);
    }
    .site-footer a { color: #DCE6F5; text-decoration: none; }
    .site-footer a:hover { color: #FFFFFF; text-decoration: underline; }
    .site-footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
    @media (min-width: 40rem) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 64rem) { .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; } }
    .site-footer__brand > a { display: inline-flex; text-decoration: none; }
    .site-footer__brand > a:hover { text-decoration: none; }
    .site-footer__slogan { margin-top: 1.25rem; font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem; color: #FFFFFF; line-height: 1.4; }
    .site-footer__about { margin-top: .75rem; max-width: 26rem; }
    .site-footer__title { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.1rem; }
    .site-footer__col ul { list-style: none; padding: 0; display: grid; gap: .65rem; }
    .site-footer__contact li { display: flex; align-items: flex-start; gap: .65rem; }
    .site-footer__contact .icon { margin-top: .2rem; color: var(--cyan); width: 1.1rem; height: 1.1rem; }
    .site-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: .75rem 2rem;
        padding-block: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, .1);
        font-size: var(--fs-xs);
    }
    .site-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; }
    .social-list { display: flex; gap: .5rem; margin-top: 1.5rem; list-style: none; padding: 0; }
    .social-list a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: rgba(255, 255, 255, .07); }
    .social-list a:hover { background: var(--blue); text-decoration: none; }


    /* Contenu rédactionnel */
    .prose { color: var(--text); }
    .prose > * + * { margin-top: 1.1rem; }
    .prose h2 { font-size: var(--fs-h3); margin-top: 2.5rem; }
    .prose h2:first-child { margin-top: 0; }
    .prose ul { padding-left: 1.25rem; }
    .prose li + li { margin-top: .4rem; }
    .prose li::marker { color: var(--blue); }
    .prose--lead { font-size: var(--fs-lg); }
    .prose__updated { font-size: var(--fs-sm); color: var(--muted); }
    .prose img { border-radius: var(--radius-lg); }

    /* Illustrations SVG */
    .ill { width: 100%; height: auto; overflow: visible; }
    .ill-label { font-family: var(--ff-display); font-weight: 600; font-size: 16px; fill: var(--ink); }
    .ill-label--sm { font-size: 14px; }
    .ill-label--light { fill: #FFFFFF; }
    .ill-sub { font-family: var(--ff-body); font-size: 12.5px; fill: var(--muted); }
    .ill-pill { font-family: var(--ff-body); font-weight: 600; font-size: 13px; fill: #FFFFFF; }
    .ill-shadow { filter: drop-shadow(0 10px 18px rgba(11, 46, 107, .14)) drop-shadow(0 2px 3px rgba(11, 46, 107, .06)); }
    .ill-flow { stroke-dasharray: 6 9; animation: ill-dash 1.6s linear infinite; }
    .ill-flow--rev { animation-direction: reverse; }
    .ill-card { animation: ill-in .8s var(--ease) both; }
    .ill-card--2 { animation-delay: .1s; }
    .ill-card--3 { animation-delay: .2s; }
    .ill-card--4 { animation-delay: .3s; }
    .ill-card--5 { animation-delay: .45s; }
    .ill-float { animation: ill-float 7s ease-in-out infinite; }
    .ill-card.ill-float { animation: ill-in .8s var(--ease) both, ill-float 7s ease-in-out .8s infinite; }
    .ill-pulse { transform-origin: 300px 250px; animation: ill-pulse 6s ease-in-out infinite; }
}

/* Pages ---------------------------------------------------------------------- */
@layer pages {

    /* Accueil — héros */
    .hero {
        position: relative;
        overflow: hidden;
        padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2.5rem + 5vw, 6rem);
        isolation: isolate;
    }
    .hero__bg, .page-hero__bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(45rem 30rem at 85% 10%, rgba(94, 208, 245, .22), transparent 65%),
            radial-gradient(40rem 30rem at 5% 0%, rgba(27, 111, 240, .10), transparent 60%),
            linear-gradient(180deg, #FFFFFF 0%, var(--bg-soft) 100%);
    }
    .hero__bg::after, .page-hero__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(11, 46, 107, .045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(11, 46, 107, .045) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
        mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
    }
    .hero__inner { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem); align-items: center; }
    @media (min-width: 64rem) { .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
    .hero__title { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.028em; line-height: 1.08; }
    .text-accent {
        color: var(--blue);
        background: linear-gradient(100deg, var(--blue) 10%, var(--navy) 90%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .hero__lead { margin-top: 1.5rem; max-width: 36rem; font-size: var(--fs-lg); color: var(--muted); }
    .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
    @media (max-width: 30rem) { .hero__actions .btn { width: 100%; } }
    .hero__pillars { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
    .hero__pillars li { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 500; color: var(--navy); }
    .hero__pillars .icon { color: var(--blue); }
    .hero__visual { max-width: 36rem; width: 100%; margin-inline: auto; }

    .hero__anim { animation: fade-up .8s var(--ease) both; }
    .hero__anim--2 { animation-delay: .08s; }
    .hero__anim--3 { animation-delay: .16s; }
    .hero__anim--4 { animation-delay: .24s; }
    .hero__anim--5 { animation-delay: .32s; }

    /* Bandeau technologies */
    .tech-strip { border-block: 1px solid var(--line); background: #FFFFFF; }
    .tech-strip__inner { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.6rem; }
    @media (min-width: 64rem) { .tech-strip__inner { flex-direction: row; align-items: center; gap: 2.5rem; } }
    .tech-strip__title { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
    .tech-strip__list { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
    .tech-strip__list li { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-sm); color: var(--navy); opacity: .85; }

    /* En-tête des pages intérieures */
    .page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
    .page-hero--compact { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
    .page-hero__inner { display: grid; gap: 2.5rem; align-items: center; }
    @media (min-width: 64rem) { .page-hero--visual .page-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
    .page-hero__content { max-width: 46rem; }
    .page-hero__title { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
    .page-hero__lead { margin-top: 1.25rem; font-size: var(--fs-lg); color: var(--muted); }
    .page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
    @media (max-width: 30rem) { .page-hero__actions .btn { width: 100%; } }
    .page-hero__visual { max-width: 30rem; width: 100%; margin-inline: auto; }
    @media (max-width: 63.99rem) { .page-hero__visual { max-width: 26rem; } }

    /* Page Services */
    .service-rows { display: grid; gap: 1.25rem; }
    .service-row {
        display: grid;
        gap: 1.5rem;
        padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
        border-radius: var(--radius-lg);
        border: 1px solid var(--line);
        background: #FFFFFF;
        transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
    }
    .service-row:hover { border-color: var(--blue-100); box-shadow: var(--shadow); }
    @media (min-width: 60rem) { .service-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; } }
    .service-row__head { display: flex; align-items: flex-start; gap: 1.25rem; }
    .service-row__eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
    .service-row__title { font-size: var(--fs-h3); margin-top: .35rem; }
    .service-row__body { display: grid; gap: 1.25rem; }
    .service-row__text { color: var(--muted); }

    .stack-grid { display: grid; gap: 1rem; }
    @media (min-width: 40rem) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 64rem) { .stack-grid { grid-template-columns: repeat(4, 1fr); } }
    .stack-group { padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--line); }
    .stack-group__title { font-size: var(--fs-h4); margin-bottom: 1rem; }
    .stack-group--more {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        border-style: dashed;
        border-color: var(--amber);
        background: var(--amber-50);
        color: #6B4700;
        font-weight: 500;
    }
    .stack-note {
        display: flex;
        align-items: center;
        gap: .75rem;
        margin-top: 1.5rem;
        padding: 1rem 1.25rem;
        border-radius: var(--radius);
        background: var(--amber-50);
        color: #6B4700;
        font-weight: 500;
        font-size: var(--fs-sm);
    }
    .stack-note .icon { color: var(--amber-600); flex-shrink: 0; }
    .stack-note--inline { margin-top: 0; }
    .tech-box__note { margin-top: 1rem; font-size: var(--fs-xs); color: #A9B8CE; }
    .tech-strip__more a {
        font-family: var(--ff-body);
        font-weight: 600;
        color: var(--blue-700);
        text-decoration: none;
        white-space: nowrap;
    }
    .tech-strip__more a:hover { text-decoration: underline; }

    /* Pages de service */
    .problem-list { display: grid; gap: 1rem; }
    .problem {
        display: flex;
        gap: 1.25rem;
        padding: 1.5rem;
        border-radius: var(--radius-lg);
        background: #FFFFFF;
        border: 1px solid var(--line);
    }
    .problem__index {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 12px;
        background: var(--amber-50);
        color: #8A5A00;
        font-family: var(--ff-display);
        font-weight: 700;
        font-size: var(--fs-sm);
    }
    .problem__title { font-size: var(--fs-h4); margin-bottom: .35rem; }
    .problem__text { color: var(--muted); font-size: var(--fs-sm); }

    .benefit-list { display: grid; gap: 1rem; }
    @media (min-width: 40rem) { .benefit-list { grid-template-columns: 1fr 1fr; } }
    .benefit {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.75rem;
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
    }
    .benefit__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--amber); color: var(--navy); }
    .benefit__icon .icon { stroke-width: 2.6; width: 1.1rem; height: 1.1rem; }
    .benefit__title { font-size: var(--fs-h4); margin-bottom: .4rem; }
    .benefit__text { font-size: var(--fs-sm); color: #C9D6EA; }
    .tech-box { padding: 1.5rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
    .tech-box__title { font-size: var(--fs-xs) !important; font-family: var(--ff-body); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan) !important; margin-bottom: 1rem; }

    /* Réalisations */
    .empty-state {
        display: grid;
        gap: 2rem;
        align-items: center;
        padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
        border-radius: var(--radius-xl);
        border: 1px dashed var(--line-strong);
        background: var(--bg-soft);
    }
    @media (min-width: 48rem) { .empty-state { grid-template-columns: auto 1fr; gap: 3rem; } }
    .empty-state__tiles { width: 7rem; gap: 10px; }
    .empty-state__title { font-size: var(--fs-h2); }
    .empty-state__text { margin: 1rem 0 1.75rem; max-width: 40rem; color: var(--muted); font-size: var(--fs-lg); }

    .case-card { padding: 0; overflow: hidden; gap: 0; }
    .case-card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
    .case-card__placeholder { aspect-ratio: 16 / 10; padding: 2.5rem 30%; background: var(--bg-soft); gap: 10px; align-content: center; }
    .case-card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; }
    .case-card__meta { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
    .case-card__title { font-size: var(--fs-h3); }
    .case-card__title a { color: var(--ink); text-decoration: none; }
    .case-card__text { color: var(--muted); font-size: var(--fs-sm); }

    .outline-list { display: grid; gap: .75rem; counter-reset: outline; }
    .outline-list li {
        counter-increment: outline;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1.25rem;
        align-items: baseline;
        padding: 1.25rem 1.5rem;
        border-radius: var(--radius);
        border: 1px solid var(--line);
    }
    .outline-list li::before {
        content: counter(outline, decimal-leading-zero);
        grid-row: span 2;
        font-family: var(--ff-display);
        font-weight: 700;
        color: var(--blue);
    }
    .outline-list strong { font-family: var(--ff-display); }
    .outline-list span { color: var(--muted); font-size: var(--fs-sm); }

    .case-meta { padding: 1.75rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
    .case-meta dl { display: grid; gap: 1.25rem; }
    .case-meta dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .case-meta dd { margin: .3rem 0 0; font-weight: 500; color: var(--ink); }
    .case-meta dd ul { list-style: none; padding: 0; }

    /* À propos */
    .facts { padding: 2rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
    .facts__title { font-size: var(--fs-h4); margin-bottom: 1.25rem; }
    .facts__list { display: grid; }
    .facts__list div { display: grid; gap: .15rem; padding-block: .85rem; border-top: 1px solid var(--line); }
    @media (min-width: 30rem) { .facts__list div { grid-template-columns: 10rem 1fr; gap: 1rem; } }
    .facts__list dt { font-size: var(--fs-sm); color: var(--muted); }
    .facts__list dd { margin: 0; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }

    .acronym { display: grid; gap: 1rem; }
    @media (min-width: 40rem) { .acronym { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 64rem) { .acronym { grid-template-columns: repeat(5, 1fr); } }
    .acronym__item {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding: 1.75rem 1.5rem;
        border-radius: var(--radius-lg);
        background: #FFFFFF;
        box-shadow: var(--shadow-sm);
    }
    .acronym__letter {
        display: grid;
        place-items: center;
        width: 3.25rem;
        height: 3.25rem;
        margin-bottom: 1rem;
        border-radius: 14px;
        background: var(--blue);
        color: #FFFFFF;
        font-family: var(--ff-display);
        font-weight: 700;
        font-size: 1.5rem;
    }
    .acronym__item--2 .acronym__letter { background: var(--cyan); color: var(--navy); }
    .acronym__item--3 .acronym__letter { background: var(--navy); }
    .acronym__item--4 .acronym__letter { background: var(--amber); color: var(--navy); }
    .acronym__item--5 .acronym__letter { background: var(--ink); color: var(--amber); border-radius: 50%; }
    .acronym__word { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h4); color: var(--ink); }
    .acronym__text { font-size: var(--fs-sm); color: var(--muted); }

    .skill-panel { display: grid; gap: 1.5rem; padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--line); }
    .skill-panel__title { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }

    .value-grid { display: grid; gap: 1rem; list-style: none; padding: 0; }
    @media (min-width: 40rem) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 64rem) { .value-grid { grid-template-columns: repeat(4, 1fr); } }
    .value { padding: 1.75rem; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
    .value__tile { display: block; width: 1.5rem; height: 1.5rem; border-radius: 6px; margin-bottom: 1.25rem; background: var(--blue); }
    .value__tile--2 { background: var(--cyan); }
    .value__tile--3 { background: #FFFFFF; }
    .value__tile--4 { background: var(--amber); border-radius: 50%; }
    .value__title { font-size: var(--fs-h4); margin-bottom: .5rem; }
    .value__text { font-size: var(--fs-sm); color: #C9D6EA; }

    /* Contact */
    .section--contact { padding-top: clamp(1rem, 1rem + 2vw, 2.5rem); }
    .contact-layout { display: grid; gap: 2rem; align-items: start; }
    @media (min-width: 64rem) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; } }
    .contact-form-wrap {
        padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
        border-radius: var(--radius-xl);
        background: #FFFFFF;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
    .contact-aside { display: grid; gap: 1.25rem; }
    @media (min-width: 64rem) { .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
    .contact-card { padding: 1.75rem; border-radius: var(--radius-lg); background: var(--navy); color: #C9D6EA; }
    .contact-card__title { font-size: var(--fs-h4); color: #FFFFFF; margin-bottom: 1.25rem; }
    .contact-card__list { display: grid; gap: 1.1rem; }
    .contact-card__list li { display: flex; align-items: flex-start; gap: .9rem; font-size: var(--fs-sm); }
    .contact-card__list small { display: block; font-size: var(--fs-xs); color: var(--cyan); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .1rem; }
    .contact-card__list a { color: #FFFFFF; font-weight: 600; text-decoration: none; word-break: break-word; }
    .contact-card__list a:hover { text-decoration: underline; }
    .contact-card--soft { background: var(--bg-soft); color: var(--text); }
    .contact-card--soft .contact-card__title { color: var(--ink); }
    .mini-steps { display: grid; gap: 1rem; counter-reset: mini; }
    .mini-steps li { counter-increment: mini; display: grid; grid-template-columns: 2rem 1fr; column-gap: .75rem; font-size: var(--fs-sm); }
    .mini-steps li::before {
        content: counter(mini);
        grid-row: span 2;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: #FFFFFF;
        border: 1px solid var(--line);
        font-weight: 700;
        color: var(--blue-700);
    }
    .mini-steps span { color: var(--muted); }

    /* Erreurs */
    .error-page { padding-block: clamp(4rem, 3rem + 6vw, 8rem); background: linear-gradient(180deg, #FFFFFF, var(--bg-soft)); }
    .error-page__inner { max-width: 44rem; text-align: center; }
    .error-page__code { display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--ff-display); font-weight: 700; font-size: clamp(4.5rem, 3rem + 8vw, 8rem); line-height: 1; color: var(--navy); letter-spacing: -.04em; }
    .error-page__tiles { width: .8em; gap: .08em; }
    .error-page__title { margin-top: 2rem; font-size: var(--fs-h2); }
    .error-page__lead { margin-top: 1rem; font-size: var(--fs-lg); color: var(--muted); }
    .error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
    .error-page__hint { margin-top: 3rem; font-size: var(--fs-sm); color: var(--muted); }
    .error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
    .error-page__links a { display: inline-block; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; font-size: var(--fs-sm); text-decoration: none; }
    .error-page__links a:hover { border-color: var(--blue); }
    .error-page__debug { margin-top: 2rem; padding: 1rem; text-align: left; font-size: .75rem; white-space: pre-wrap; background: var(--ink); color: #E3E8EF; border-radius: var(--radius); overflow: auto; }
}

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

    /* Apparition au défilement (activée par JavaScript pour les éléments hors écran) */
    .reveal-pending { opacity: 0; transform: translateY(18px); }
    .reveal-pending.is-visible { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
}

/* Animations ----------------------------------------------------------------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes ill-dash { to { stroke-dashoffset: -30; } }
@keyframes ill-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ill-float { 50% { transform: translateY(-6px); } }
@keyframes ill-pulse { 50% { transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal-pending { opacity: 1; transform: none; }
}

@media print {
    .site-header, .quick-contact, .cta-band, .site-footer, .hero__visual, .page-hero__visual { display: none !important; }
    body { color: #000; }
    .section { padding-block: 1.5rem; }
}