/* ==========================================================================
   BrandID — Typographie de marque (global, toutes les pages)
   Chargé APRÈS css/style.css pour surcharger les variables :root.

   Titres      → Moderat
   Paragraphes → TWK Lausanne Pan

   Les fichiers sont sous-settés (latin + ponctuation FR) et convertis en
   woff2 : ~20 Ko par graisse. Ils remplacent Inter + Playfair Display
   servis par Google Fonts (une requête externe de moins, et plus de
   transfert d'IP vers Google).
   ========================================================================== */

/* ---------- Moderat (titres) ---------- */

@font-face {
    font-family: 'Moderat';
    src: url('../assets/fonts/moderat-100.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moderat';
    src: url('../assets/fonts/moderat-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- TWK Lausanne Pan (corps de texte) ---------- */

@font-face {
    font-family: 'TWK Lausanne Pan';
    src: url('../assets/fonts/lausanne-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Lausanne Pan';
    src: url('../assets/fonts/lausanne-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Lausanne Pan';
    src: url('../assets/fonts/lausanne-400i.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Lausanne Pan';
    src: url('../assets/fonts/lausanne-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Lausanne Pan';
    src: url('../assets/fonts/lausanne-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TWK Lausanne Pan';
    src: url('../assets/fonts/lausanne-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Variables
   --font-serif garde son nom (référencé partout dans style.css) mais pointe
   désormais sur Moderat. --font-display est l'alias lisible.
   ========================================================================== */

:root {
    --font-sans: 'TWK Lausanne Pan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Moderat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: var(--font-serif);
}

/* ==========================================================================
   Ajustements de graisse
   Moderat n'existe qu'en Thin (100) et Regular (400) : sans ces règles, les
   titres en 500/600 déclenchent un faux-gras synthétisé par le navigateur.
   ========================================================================== */

.section-title-center,
.section-title-large,
.hero-title,
.legal-page h1,
.legal-section h2,
.realisation-body h3,
.service-page-hero h1,
.service-overview-content h2,
.about-story-content h2,
.about-expertise-content h2,
.about-why-card h3,
.about-value-card h3,
.about-value-num,
.about-stat-value,
.error-page h1,
.error-code,
.pricing-card-header h3,
.service-card h3,
.stacking-card-content h3,
.service-page-stat-value,
.pricing-price-amount,
.rating-badge-score {
    font-weight: 400;
}

/* Les <em> des titres restent en italique optique : Moderat n'a pas de
   véritable italique, on garde donc TWK Lausanne Pan qui, lui, en a un. */
.section-title-center em,
.section-title-large em,
.hero-title em,
.service-page-hero h1 em,
.about-story-content h2 em {
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: 300;
}

/* ==========================================================================
   Corps de texte en Light
   Plafond de graisse à 300 sur les paragraphes et le texte courant.
   Les <strong>, boutons, libellés et éléments de navigation gardent leur
   graisse : ce sont des repères de lecture, pas du texte courant.
   ========================================================================== */

p,
blockquote,
figcaption,
dd,
.faq-answer,
.testimonial-text,
.tm-text,
.section-subtitle,
.section-subtitle-center,
.hero-subtitle,
.hero-subtitle-light,
.launch-text,
.diff-description,
.humain-text,
.realisation-desc,
.cmp-note,
.legal-section li,
.service-page-list li,
.devis-trust li {
    font-weight: 300;
}


/* ==========================================================================
   BOUTON ANIMÉ (port vanilla du motion-button)
   Une pastille ronde tient l'icône à gauche puis s'étend sur toute la largeur
   au survol, pendant que le libellé passe en négatif.

   Aucun markup à ajouter : tout est fait en pseudo-éléments, la règle
   s'applique donc telle quelle aux .glass-button existants du site.

   Icône : surcharger --btn-icon, ou poser une classe .btn-ico-*
   Ex. <a class="glass-button btn-ico-calendar">Prendre rendez-vous</a>
   ========================================================================== */

:root {
    --btn-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14%27/%3E%3Cpath d=%27m12 5 7 7-7 7%27/%3E%3C/svg%3E");
    --btn-ico-phone: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z%27/%3E%3C/svg%3E");
    --btn-ico-calendar: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2718%27 rx=%272%27/%3E%3Cpath d=%27M16 2v4M8 2v4M3 10h18%27/%3E%3C/svg%3E");
    --btn-ico-star: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z%27/%3E%3C/svg%3E");
    --btn-ico-chat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%27/%3E%3C/svg%3E");
    --btn-ico-check: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E");
    --btn-ico-home: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%27/%3E%3Cpath d=%27M9 22V12h6v10%27/%3E%3C/svg%3E");
    --btn-ico-cart: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z%27/%3E%3Cpath d=%27M3 6h18%27/%3E%3Cpath d=%27M16 10a4 4 0 0 1-8 0%27/%3E%3C/svg%3E");
    --btn-ico-mail: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%274%27 width=%2720%27 height=%2716%27 rx=%272%27/%3E%3Cpath d=%27m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%27/%3E%3C/svg%3E");
    --btn-ico-edit: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 20h9%27/%3E%3Cpath d=%27M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z%27/%3E%3C/svg%3E");
    --btn-ico-sparkle: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m12 3 1.9 5.8L20 10.7l-6.1 1.9L12 18.4l-1.9-5.8L4 10.7l6.1-1.9z%27/%3E%3C/svg%3E");
    --btn-ico-external: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 3h6v6%27/%3E%3Cpath d=%27M10 14 21 3%27/%3E%3Cpath d=%27M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%27/%3E%3C/svg%3E");
}

.glass-button,
.btn-motion,
body.hp-v2 .btn-pill {
    --btn-h: 52px;
    --btn-pad: 4px;
    --btn-dot: calc(var(--btn-h) - var(--btn-pad) * 2);
    --btn-ico-size: 20px;

    /* Palette : pastille sombre sur fond clair */
    --btn-fill: var(--color-black);
    --btn-ink: var(--color-black);
    --btn-ink-hover: var(--color-white);
    --btn-ico-ink: var(--color-white);

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h);
    padding: var(--btn-pad) 28px var(--btn-pad) calc(var(--btn-pad) + var(--btn-dot) + 14px);
    border: 0;
    border-radius: 999px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--btn-ink);
    cursor: pointer;
    transition: color .5s var(--ease-out-quart);
}

/* La pastille. z-index négatif pour passer sous le libellé ; isolation sur le
   bouton l'empêche de descendre sous le fond de la section. */
.glass-button::before,
.btn-motion::before,
body.hp-v2 .btn-pill::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--btn-pad);
    left: var(--btn-pad);
    width: var(--btn-dot);
    height: var(--btn-dot);
    border-radius: 999px;
    background: var(--btn-fill);
    transition: width .5s var(--ease-out-quart);
}

.glass-button::after,
.btn-motion::after,
body.hp-v2 .btn-pill::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(var(--btn-pad) + (var(--btn-dot) - var(--btn-ico-size)) / 2);
    width: var(--btn-ico-size);
    height: var(--btn-ico-size);
    background-color: var(--btn-ico-ink);
    -webkit-mask: var(--btn-icon) center / contain no-repeat;
    mask: var(--btn-icon) center / contain no-repeat;
    transform: translateY(-50%);
    transition: transform .5s var(--ease-out-quart);
}

.glass-button:hover::before,
.btn-motion:hover::before,
body.hp-v2 .btn-pill:hover::before {
    width: calc(100% - var(--btn-pad) * 2);
}

.glass-button:hover::after,
.btn-motion:hover::after,
body.hp-v2 .btn-pill:hover::after {
    transform: translateY(-50%) translateX(5px);
}

.glass-button:hover,
.btn-motion:hover,
body.hp-v2 .btn-pill:hover {
    color: var(--btn-ink-hover);
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
}

.glass-button:active,
.btn-motion:active,
body.hp-v2 .btn-pill:active {
    transform: scale(.98);
}

.glass-button:focus-visible,
.btn-motion:focus-visible,
body.hp-v2 .btn-pill:focus-visible {
    outline: 2px solid var(--btn-fill);
    outline-offset: 3px;
}

/* ---------- Neutralisation du fond vitré d'origine ----------
   Toutes les variantes perdent leur remplissage : c'est la pastille animée
   qui fait désormais le fond. */

.glass-button-dark,
.glass-button-light,
.glass-button-hero,
.glass-button-hero-outline,
.navbar-on-dark:not(.scrolled) .nav-cta,
.glass-button-dark:hover,
.glass-button-light:hover,
.glass-button-hero:hover,
.glass-button-hero-outline:hover,
.navbar-on-dark:not(.scrolled) .nav-cta:hover {
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* ---------- Sur fond sombre : la pastille passe en clair ----------
   .glass-button-dark est volontairement absent : malgré son nom c'est un
   bouton foncé posé sur des sections claires (differentiators, realisations,
   humain, service-cta-section, 404). Il garde le schéma par défaut, sinon son
   libellé blanc devient invisible tant qu'on ne le survole pas. */

.glass-button-light,
.glass-button-hero,
.glass-button-hero-outline,
.btn-motion-invert,
.navbar-on-dark:not(.scrolled) .nav-cta,
.hero-dark .glass-button,
.cta-section-dark .glass-button {
    --btn-fill: var(--color-white);
    --btn-ink: var(--color-white);
    --btn-ink-hover: var(--color-black);
    --btn-ico-ink: var(--color-black);
}

/* .glass-button-hero::after portait déjà un halo animé (opacity:0 + ctaShimmer).
   Sans cette remise à plat, l'icône hérite de son opacité nulle et disparaît. */
.glass-button-hero::after {
    animation: none;
    opacity: 1;
    background-image: none;
    border-radius: 0;
}

/* ---------- Format compact : navbar, menu mobile, tableau ---------- */

.nav-cta,
.mobile-cta,
.cmp-cta .glass-button,
.rating-badge .glass-button {
    --btn-h: 42px;
    --btn-ico-size: 17px;
    padding: var(--btn-pad) 20px var(--btn-pad) calc(var(--btn-pad) + var(--btn-dot) + 10px);
    font-size: 13px;
}

/* ---------- Icônes ---------- */

/* Icône par défaut. :where() ne pèse rien dans la cascade : n'importe quelle
   classe .btn-ico-* la surcharge, quelle que soit la spécificité du bouton. */
:where(.glass-button, .btn-motion, .btn-pill) {
    --btn-icon: var(--btn-ico-arrow);
}

.btn-ico-arrow    { --btn-icon: var(--btn-ico-arrow); }
.btn-ico-phone    { --btn-icon: var(--btn-ico-phone); }
.btn-ico-calendar { --btn-icon: var(--btn-ico-calendar); }
.btn-ico-star     { --btn-icon: var(--btn-ico-star); }
.btn-ico-chat     { --btn-icon: var(--btn-ico-chat); }
.btn-ico-check    { --btn-icon: var(--btn-ico-check); }
.btn-ico-home     { --btn-icon: var(--btn-ico-home); }
.btn-ico-cart     { --btn-icon: var(--btn-ico-cart); }
.btn-ico-mail     { --btn-icon: var(--btn-ico-mail); }
.btn-ico-edit     { --btn-icon: var(--btn-ico-edit); }
.btn-ico-sparkle  { --btn-icon: var(--btn-ico-sparkle); }
.btn-ico-external { --btn-icon: var(--btn-ico-external); }

/* Les boutons portaient parfois leur propre flèche : elle ferait doublon */
.glass-button > svg,
.btn-motion > svg {
    display: none;
}

@media (max-width: 768px) {
    .glass-button,
    .btn-motion,
    body.hp-v2 .btn-pill {
        --btn-h: 46px;
        --btn-ico-size: 18px;
        font-size: 14px;
        padding: var(--btn-pad) 22px var(--btn-pad) calc(var(--btn-pad) + var(--btn-dot) + 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .glass-button,
    .glass-button::before,
    .glass-button::after,
    .btn-motion,
    .btn-motion::before,
    .btn-motion::after,
    body.hp-v2 .btn-pill,
    body.hp-v2 .btn-pill::before,
    body.hp-v2 .btn-pill::after {
        transition-duration: .01ms;
    }
}

/* ==========================================================================
   5. MÉGA-MENU DE NAVIGATION
   Portage du navigation-menu Radix en HTML/CSS natif : deux panneaux
   (Services, Le studio), cartes à trame, petits liens à flèche, et un
   accordéon plein écran sur mobile.
   ========================================================================== */

/* Bloc de référence des panneaux : ils se centrent sur la barre entière,
   pas sur leur déclencheur. */
.nav-container {
    position: relative;
}

/* Menu centré dans la barre, indépendamment du logo et du CTA — comportement
   déjà en place sur la home, généralisé ici à toutes les pages. */
.nm {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-item {
    position: static;
}

/* ---------- Déclencheurs ---------- */

.nm-trigger,
.nm-plain {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
}

.nm-trigger:hover,
.nm-plain:hover,
.nm-trigger[aria-expanded="true"] {
    color: var(--color-black);
    background: var(--color-gray-100);
}

.nm-chev {
    width: 12px;
    height: 12px;
    transition: transform .3s var(--ease-out-quart);
}

/* ---------- Entrée Guide ----------
   Le guide est une ressource gratuite, pas une étape du parcours commercial :
   il ferme le menu, détaché des autres liens par un filet, et porte un fond
   permanent pour se distinguer sans concurrencer le CTA « Demande de devis ». */

/* Filet en ::before plutôt qu'un border-left, qui prendrait toute la hauteur
   du li. Passer ce li en relative est sans effet sur les méga-menus : il ne
   porte aucun .nm-panel, dont le bloc de référence reste .nav-container. */
.nm-item-guide {
    position: relative;
    margin-left: 10px;
    padding-left: 11px;
}

.nm-item-guide::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 18px;
    transform: translateY(-50%);
    background: var(--color-gray-200);
}

.nm-guide {
    gap: 7px;
    padding-right: 8px;
    background: var(--color-gray-100);
    color: var(--color-black);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-base), transform var(--transition-base);
}

.nm-guide:hover {
    background: var(--color-gray-200);
    transform: translateY(-1px);
}

.nm-guide-ico {
    flex: none;
    color: var(--color-gray-500);
    transition: color var(--transition-base);
}

.nm-guide:hover .nm-guide-ico { color: var(--color-black); }

.nm-guide-badge {
    padding: 3px 6px 2px;
    border-radius: 4px;
    background: var(--color-black);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nm-trigger[aria-expanded="true"] .nm-chev {
    transform: rotate(180deg);
}

/* ---------- Panneau ---------- */

.nm-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    z-index: 60;
    width: min(920px, calc(100vw - 48px));
    transform: translateX(-50%) translateY(-6px) scale(.98);
    transform-origin: top center;
    /* Opaque volontairement : le panneau se pose sur le hero, la moindre
       transparence rendait les titres du dessous lisibles à travers. */
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease-out-quart),
                transform .22s var(--ease-out-quart),
                visibility .22s;
}

.nm-item[data-open="true"] .nm-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.nm-panel-grid {
    display: grid;
    grid-template-columns: 1fr .42fr;
}

.nm-col-main {
    padding: 18px;
    border-right: 1px solid var(--color-gray-200);
}

.nm-col-side {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nm-col-title {
    margin: 0 0 12px 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

.nm-cards {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-cards-3 { grid-template-columns: repeat(3, 1fr); }
.nm-cards-2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Carte à trame (équivalent GridCard) ---------- */

.nm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    background: var(--color-white);
    text-decoration: none;
    transition: border-color var(--transition-base), background var(--transition-base);
}

/* Trame de points, reprise du fond quadrillé de la démo d'origine */
.nm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(10, 10, 10, .10) 1px, transparent 1px);
    background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
    mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
    opacity: .8;
    pointer-events: none;
}

.nm-card:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}

.nm-card-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-black);
}

.nm-card-ico svg { width: 17px; height: 17px; }

.nm-card-title {
    position: relative;
    display: block;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--color-black);
}

.nm-card-desc {
    position: relative;
    margin: 5px 0 0;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-gray-500);
}

/* ---------- Petit lien à flèche ---------- */

.nm-small {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-gray-600);
    transition: background var(--transition-base), color var(--transition-base);
}

.nm-small:hover {
    background: var(--color-gray-100);
    color: var(--color-black);
}

.nm-small svg {
    width: 16px;
    height: 16px;
    color: var(--color-gray-400);
    flex: 0 0 auto;
}

.nm-small:hover svg { color: var(--color-black); }

.nm-small span {
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: -.01em;
}

.nm-small-arrow {
    margin-left: auto;
    width: 15px;
    height: 15px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.nm-small:hover .nm-small-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Ligne large (équivalent NavLargeItem) ---------- */

.nm-large {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    background: var(--color-white);
    text-decoration: none;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.nm-large:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}

.nm-large-title {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--color-black);
}

.nm-large-desc {
    margin: 3px 0 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.45;
    color: var(--color-gray-500);
}

.nm-large svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--color-gray-400);
}

/* ---------- Pied de panneau ---------- */

.nm-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    border-radius: 0 0 9px 9px;
}

.nm-panel-foot p {
    margin: 0;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--color-gray-500);
}

.nm-panel-foot a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--color-black);
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: 2px;
    transition: border-color var(--transition-base);
}

.nm-panel-foot a:hover { border-color: var(--color-black); }

/* ---------- Barre sur fond sombre ---------- */

.navbar-on-dark:not(.scrolled) .nm-trigger,
.navbar-on-dark:not(.scrolled) .nm-plain {
    color: rgba(255, 255, 255, .82);
}

.navbar-on-dark:not(.scrolled) .nm-trigger:hover,
.navbar-on-dark:not(.scrolled) .nm-plain:hover,
.navbar-on-dark:not(.scrolled) .nm-trigger[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* Guide sur fond sombre : le pill gris et le badge noir disparaîtraient.
   Déclaré après les règles .nm-plain ci-dessus, dont il partage la spécificité. */
.navbar-on-dark:not(.scrolled) .nm-item-guide::before {
    background: rgba(255, 255, 255, .22);
}

.navbar-on-dark:not(.scrolled) .nm-guide {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.navbar-on-dark:not(.scrolled) .nm-guide:hover {
    background: rgba(255, 255, 255, .22);
}

.navbar-on-dark:not(.scrolled) .nm-guide-ico,
.navbar-on-dark:not(.scrolled) .nm-guide:hover .nm-guide-ico {
    color: rgba(255, 255, 255, .75);
}

.navbar-on-dark:not(.scrolled) .nm-guide-badge {
    background: #fff;
    color: var(--color-black);
}

/* ---------- Écrans intermédiaires ----------
   Le menu est centré en absolu : la place utilisable n'est pas la largeur
   restante mais « largeur du conteneur moins deux fois le plus large des
   deux côtés » — soit 550px à peine à 1030px, pour un menu qui en demande
   768. Sous 1360px on compacte donc les déclencheurs, on tombe le badge et
   on abrège le libellé du guide. En dessous de 1180px, plus rien à gagner :
   le burger prend le relais (voir la requête suivante). */
@media (min-width: 1180px) and (max-width: 1359px) {
    .nm { gap: 0; }

    .nm-trigger,
    .nm-plain {
        padding: 8px 8px;
        font-size: 14px;
    }

    .nm-item-guide {
        margin-left: 6px;
        padding-left: 7px;
    }

    .nm-guide-word,
    .nm-guide-badge { display: none; }
}

/* ---------- Menu mobile : accordéon ---------- */

.mnav {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: calc(var(--hp-nav-h, 72px) + 16px) 20px 48px;
    text-align: left;
}

.mnav-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-gray-500);
    text-decoration: none;
}

.mnav-sec { border-bottom: 1px solid var(--color-gray-200); }

.mnav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 2px;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--color-black);
    cursor: pointer;
}

.mnav-trigger svg {
    width: 16px;
    height: 16px;
    color: var(--color-gray-400);
    transition: transform .3s var(--ease-out-quart);
}

.mnav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.mnav-panel {
    overflow: hidden;
    height: 0;
    transition: height .3s var(--ease-out-quart);
}

.mnav-panel ul {
    list-style: none;
    margin: 0;
    padding: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mnav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: background var(--transition-base);
}

.mnav-item:hover,
.mnav-item:focus-visible { background: var(--color-gray-100); }

.mnav-item-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    background: var(--color-gray-50);
    color: var(--color-black);
}

.mnav-item-ico svg { width: 18px; height: 18px; }

.mnav-item-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--color-black);
}

.mnav-item-desc {
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-gray-500);
}

.mnav-direct {
    display: block;
    padding: 16px 2px;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--color-black);
    text-decoration: none;
}

/* Le badge « Gratuit » suffit à distinguer le guide : le menu mobile est déjà
   une liste plate, un pill de plus l'alourdirait. */
.mnav-direct-guide {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mnav-direct-guide .nm-guide-badge { margin-left: auto; }

.mnav-cta { margin-top: 26px; }

/* L'accordéon dépasse la hauteur d'écran : le panneau défile et s'aligne en
   haut au lieu d'être centré. Fond opaque, sinon la page transparaît. */
.mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    background: var(--color-white);
}

/* ---------- Bascule desktop / mobile ----------
   Le hamburger n'apparaissait qu'à 768px alors que le méga-menu s'arrête à
   1024px : sans cette règle, aucune navigation entre les deux. */

/* Bascule vers le burger à 1179px et non 1024 : entre les deux, le menu
   centré passait sur deux lignes et chevauchait le logo. */
@media (max-width: 1179px) {
    .nm { display: none; }
    .nav-actions { display: none; }
    .nav-toggle { display: flex; }
}

@media (min-width: 1180px) {
    .mobile-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nm-panel,
    .nm-chev,
    .nm-small-arrow,
    .mnav-panel,
    .mnav-trigger svg {
        transition-duration: .01ms;
    }
}

/* ==========================================================================
   6. TABLEAUX LARGES
   ========================================================================== */

/* Le tableau des cookies a une largeur mini d'environ 520 px (4 colonnes + un
   identifiant non sécable) : sous ~600 px il débordait de la page entière au
   lieu de défiler dans son cadre. */
.table-scroll {
    margin: 16px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table-scroll .cookie-table {
    margin: 0;
    min-width: 520px;
}

@media (max-width: 600px) {
    .cookie-table th,
    .cookie-table td {
        padding: 10px 12px;
    }
}

/* Seul libellé du site sous 11 px, et il est en majuscules espacées :
   remonté au plancher de lisibilité. */
.rating-badge-count {
    font-size: 11px;
}


/* ==========================================================================
   7. PASTILLES DE SUR-TITRE
   Tous les libellés posés au-dessus d'un titre partagent le même objet :
   contour arrondi, étoile à gauche, casse normale. Ils étaient jusqu'ici de
   quatre styles différents (capitales espacées, italique, verre dépoli...).
   ========================================================================== */

:root {
    /* Étoile du badge « Comparer les offres », servie en masque : une seule
       déclaration couvre toutes les pages, et l'icône suit automatiquement la
       couleur du texte (fond clair comme fond sombre). */
    --eyebrow-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M18 16l.8 2.2L21 19l-2.2.8L18 22l-.8-2.2L15 19l2.2-.8z'/%3E%3C/svg%3E");
}

.hero-eyebrow,
.humain-eyebrow,
.about-eyebrow,
.cmp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-gray-600);
    /* Le trait décoratif qui précédait « Derrière BrandID » et « L'histoire »
       occupait cette réserve : la pastille reprend la place. */
    padding-left: 12px;
    margin-bottom: 20px;
}

.about-eyebrow::before,
.humain-eyebrow::before {
    content: none;
}

/* Étoile en ::after remontée en tête par order : le ::before de ces libellés
   porte encore l'ancien trait décoratif, dont la règle d'animation
   (.anim-fade-up.visible …::before) l'emporterait en spécificité. */
.hero-eyebrow::after,
.humain-eyebrow::after,
.about-eyebrow::after,
.cmp-badge::after,
.service-page-badge::after {
    content: "";
    order: -1;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--eyebrow-star) center / contain no-repeat;
    mask: var(--eyebrow-star) center / contain no-repeat;
}

/* Sur les héros sombres des pages offres, la pastille garde son verre dépoli :
   seule l'étoile vient s'ajouter. */
.service-page-badge {
    text-transform: none;
    letter-spacing: 0;
}


/* ==========================================================================
   8. SECTION « DERRIÈRE BRANDID » (#humain)
   ========================================================================== */

/* Le titre « Je suis Rémy… » n'a plus de taille propre : il suit désormais
   .section-title-large comme tous les autres titres de section — même police
   (Moderat) et même clamp(32px, 4vw, 48px). Il portait auparavant un
   clamp(26px, 2.7vw, 34px) qui le posait un cran en dessous ; le h1 du hero
   reste, lui, sur son échelle propre. */

/* --- Signature manuscrite -------------------------------------------------
   Le bloc perd son filet vertical : la signature fait office de marque.
   -------------------------------------------------------------------------- */

.humain-signature {
    display: block;
    max-width: none;
    margin: 26px 0 30px;
    padding: 0;
    border: 0;
    color: var(--color-black);
}

.sig {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    /* Le paraphe dépasse légèrement du viewBox sous l'effet de l'épaisseur
       du trait : sans ceci ses extrémités seraient rognées. */
    overflow: visible;
}

.sig-stroke {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

@keyframes sig-draw {
    to { stroke-dashoffset: 0; }
}

/* Le tracé démarre quand la colonne entre dans le champ (classe .visible posée
   par l'IntersectionObserver de script.js), trait après trait dans l'ordre
   d'écriture. Les durées suivent la longueur réelle de chaque trait : sans ça
   le « I », trois fois plus court que « rand », se dessinerait à la vitesse
   d'un escargot. */
.anim-fade-up.visible .sig-stroke {
    animation: sig-draw .5s ease-in-out forwards;
}

.anim-fade-up.visible .sig-stroke:nth-child(1) { animation-duration: .50s; animation-delay: .25s; }
.anim-fade-up.visible .sig-stroke:nth-child(2) { animation-duration: .78s; animation-delay: .70s; }
.anim-fade-up.visible .sig-stroke:nth-child(3) { animation-duration: .15s; animation-delay: 1.42s; }
.anim-fade-up.visible .sig-stroke:nth-child(4) { animation-duration: .44s; animation-delay: 1.55s; }
.anim-fade-up.visible .sig-stroke:nth-child(5) { animation-duration: .42s; animation-delay: 1.95s; }

@media (prefers-reduced-motion: reduce) {
    .sig-stroke {
        stroke-dashoffset: 0;
    }

    .anim-fade-up.visible .sig-stroke {
        animation: none;
    }
}


/* ==========================================================================
   9. MOBILE : TEXTE FER À GAUCHE, BOUTONS À LA TAILLE DU POUCE

   Deux seuils, parce que les deux problèmes n'apparaissent pas au même moment :

   - dès 900 px la mise en page passe en colonne unique, et c'est là que le
     texte centré devient pénible à lire (chaque ligne redémarre à une abscisse
     différente, l'œil perd le bord gauche) ;
   - la pleine largeur des boutons n'a de sens qu'en dessous de 768 px, sur un
     écran tenu à une main. Au-delà, un bouton de 800 px de long serait absurde.

   Les composants d'interface gardent leur mise en page : navigation, bandeau
   cookies, barre d'action collante, tableau comparatif, messages d'état.
   ========================================================================== */

@media (max-width: 900px) {
    .section-title-center,
    .section-subtitle-center,
    .humain-grid,
    .error-content,
    .service-cta-section,
    .realisations-cta,
    .cookie-banner-text {
        text-align: left;
    }

    /* Le sous-titre est un bloc de 520 px centré par margin:auto. Une fois
       passé à gauche, ce centrage le décalait vers l'intérieur : entre 769 et
       900 px le titre commençait au bord du conteneur et le paragraphe une
       centaine de pixels plus loin. Il repart du même bord que le titre. */
    .section-subtitle-center {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    /* 56 px : au-dessus du minimum de 44 px des règles d'accessibilité, et
       confortable au pouce. --btn-h pilote aussi le diamètre de la pastille. */
    .glass-button:not(.nav-cta) {
        --btn-h: 56px;
        width: 100%;
    }

    /* Sauf dans le tableau comparatif : trois colonnes étroites côte à côte,
       les boutons y gardent le format compact. */
    .cmp-cta .glass-button {
        --btn-h: 42px;
    }

    /* Étiré sur toute la largeur, un libellé centré laisserait un grand vide
       entre la pastille et lui : il se cale juste après l'icône. */
    .glass-button:not(.nav-cta),
    body.hp-v2 .btn-pill {
        justify-content: flex-start;
        text-align: left;
    }

    /* Les rangées de boutons s'empilent déjà ; il ne reste qu'à les étirer. */
    .hero-ctas,
    .service-page-hero-ctas,
    .humain-cta,
    .diff-cta,
    .testimonials-cta,
    .service-overview-cta,
    .realisations-cta {
        align-items: stretch;
    }
}