/* =========================================================================
   SEESMILE VEDIM — shared.css
   Système de design complet. Tout le CSS commun vit ici (zéro duplication).
   Versionné par filemtime() dans inc/enqueue.php.

   Direction : moderne affirmé + audacieux, perf 100/100.
   - Effet spectaculaire = CSS pur (gradients, motif pixels, transforms GPU).
   - Aucune animation sur le layout (zéro CLS). Uniquement transform/opacity.
   - Charte VEDIM : navy #101a56, lavande #6862d7, lavande clair #c5c2ff.
   - Typo officielle : Montserrat.
   - Signature : « nuage de pixels » = imagerie médicale numérique.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES — :root
   ---------------------------------------------------------------------- */
:root {
    /* Couleurs charte */
    --navy:           #101a56;
    --navy-deep:      #0a1138;   /* fonds très foncés, dégradés */
    --navy-soft:      #1d2a6e;   /* survols sur navy */
    --lavender:       #6862d7;   /* accent principal, boutons, liens */
    --lavender-dark:  #534ab7;   /* survol bouton */
    --lavender-light: #c5c2ff;   /* halos, détails */
    --lavender-pale:  #eeedfe;   /* fonds de section doux */
    --white:          #ffffff;
    --paper:          #f7f8fc;   /* fond alterné très léger, teinté navy */

    /* Texte */
    --text:           #101a56;   /* corps : navy (cohérence de marque) */
    --text-soft:      #4a5078;   /* texte secondaire */
    --text-mute:      #8388a8;   /* légendes, métadonnées */
    --text-on-dark:   #ffffff;
    --text-on-dark-soft: #c7cbe6;

    /* Surfaces & lignes */
    --border:         #e4e6f2;
    --border-strong:  #cfd2e8;
    --card-bg:        #ffffff;
    --shadow-color:   16 26 86;  /* navy en RGB pour rgba() */

    /* Typo */
    --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Échelle typographique (clamp = responsive fluide) */
    --fs-hero:   clamp(2.4rem, 6vw, 4.6rem);
    --fs-h1:     clamp(2rem, 4.5vw, 3.4rem);
    --fs-h2:     clamp(1.6rem, 3.2vw, 2.5rem);
    --fs-h3:     clamp(1.2rem, 2vw, 1.6rem);
    --fs-lead:   clamp(1.05rem, 1.6vw, 1.3rem);
    --fs-body:   1.0625rem;   /* 17px */
    --fs-small:  0.9375rem;   /* 15px */

    /* Layout */
    --container:      1360px;
    --container-text: 880px;   /* largeur de lecture confortable */
    --gutter:         clamp(18px, 4vw, 48px);
    --section-y:      clamp(56px, 9vw, 130px);
    --radius:         18px;
    --radius-sm:      12px;
    --radius-lg:      28px;
    --radius-pill:    999px;

    /* Profondeur (ombres teintées navy, discrètes) */
    --shadow-sm:  0 2px 8px rgba(var(--shadow-color) / 0.06);
    --shadow-md:  0 12px 30px rgba(var(--shadow-color) / 0.08);
    --shadow-lg:  0 24px 60px rgba(var(--shadow-color) / 0.14);
    --shadow-glow: 0 18px 50px rgba(104 98 215 / 0.28);

    /* Mouvement */
    --ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --dur:        0.55s;
    --dur-fast:   0.28s;

    /* Hauteur de la barre de navigation (pour les ancres) */
    --nav-h: 84px;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Titres : Montserrat lourd, navy, interlignage serré */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-weight: 800;
    line-height: 1.12;
    color: var(--navy);
    letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--lavender);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--lavender-dark); }

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

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

strong, b { font-weight: 700; }

/* Sélection de texte teintée marque */
::selection { background: var(--lavender-light); color: var(--navy); }

/* Focus visible accessible (clavier) */
:focus-visible {
    outline: 3px solid var(--lavender);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Respect de prefers-reduced-motion (accessibilité + perf) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Lecteur d'écran uniquement */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link (accessibilité clavier) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--navy);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* -------------------------------------------------------------------------
   3. CONTENEURS & LAYOUT UTILITAIRES
   ---------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-narrow {
    width: 100%;
    max-width: var(--container-text);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-fluid {
    width: 100%;
    padding-inline: var(--gutter);
}

/* Rythme vertical des sections */
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(40px, 6vw, 80px); }

/* Sections sur fond foncé */
.section-dark {
    background:
        radial-gradient(120% 120% at 80% 0%, var(--navy-soft) 0%, transparent 55%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--text-on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4 { color: #fff; }
.section-dark p { color: var(--text-on-dark-soft); }

/* Section sur fond pâle alterné */
.section-soft { background: var(--paper); }
.section-lavender { background: var(--lavender-pale); }

/* Grilles responsives — colonnes explicites pour un rendu maîtrisé */
.grid { display: grid; gap: clamp(18px, 2.5vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* 4 cards : 2+2 sur tablette large */
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* 3 cards : restent 3 côte à côte le plus longtemps possible, puis 1 col */
@media (max-width: 920px) {
    .grid-3 { grid-template-columns: 1fr; }
}
/* 2 cards et 4 cards (déjà en 2+2) : 1 colonne sur mobile */
@media (max-width: 700px) {
    .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* Deux colonnes texte + média (50/50), bascule en 1 col sur tablette */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

/* -------------------------------------------------------------------------
   4. ÉLÉMENTS DE STRUCTURE SÉMANTIQUE (eyebrow, lead)
   ---------------------------------------------------------------------- */
/* Eyebrow = sur-titre. Encode une vraie info de section, pas décoratif. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lavender);
    margin-bottom: 1rem;
}
/* Signature « pixels » VEDIM — carrés arrondis de tailles différentes (cf. charte) */
.eyebrow::before {
    content: "";
    width: 26px;
    height: 18px;
    flex: 0 0 26px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18' viewBox='0 0 26 18'%3E%3Crect x='0' y='0' width='5' height='5' rx='1.6' fill='%236862d7'/%3E%3Crect x='8' y='0' width='5' height='5' rx='1.6' fill='%23c5c2ff'/%3E%3Crect x='16' y='0' width='5' height='5' rx='1.6' fill='%236862d7'/%3E%3Crect x='0' y='8' width='5' height='5' rx='1.6' fill='%23c5c2ff'/%3E%3Crect x='8' y='8' width='10' height='10' rx='2.8' fill='%236862d7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    animation: seesmile-eyebrow-pulse 3.4s ease-in-out infinite;
}
@keyframes seesmile-eyebrow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.eyebrow.is-center, .section-head:not(.is-left) .eyebrow { justify-content: center; }
.section-dark .eyebrow { color: var(--lavender-light); }
.section-dark .eyebrow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18' viewBox='0 0 26 18'%3E%3Crect x='0' y='0' width='5' height='5' rx='1.6' fill='%23c5c2ff'/%3E%3Crect x='8' y='0' width='5' height='5' rx='1.6' fill='%23ffffff'/%3E%3Crect x='16' y='0' width='5' height='5' rx='1.6' fill='%23c5c2ff'/%3E%3Crect x='0' y='8' width='5' height='5' rx='1.6' fill='%23ffffff'/%3E%3Crect x='8' y='8' width='10' height='10' rx='2.8' fill='%23c5c2ff'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
    .eyebrow::before { animation: none; }
}

/* Chapô / texte d'introduction */
.lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--text-soft);
    font-weight: 400;
}
.section-dark .lead { color: var(--text-on-dark-soft); }

/* En-tête de section centré */
.section-head {
    max-width: 760px;
    margin: 0 auto clamp(36px, 5vw, 64px);
    text-align: center;
}
.section-head.is-left { margin-inline: 0; text-align: left; }

/* -------------------------------------------------------------------------
   5. BOUTONS
   ---------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--lavender);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 2px solid var(--btn-bg);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
    will-change: transform;
    text-align: center;
}
.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-glow);
    background: var(--lavender-dark);
    border-color: var(--lavender-dark);
    color: #fff;
}
.btn:active { transform: translateY(-1px) scale(1); }

/* Variante secondaire (contour) */
.btn-secondary {
    --btn-bg: transparent;
    --btn-fg: var(--navy);
    border-color: var(--border-strong);
}
.btn-secondary:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    box-shadow: var(--shadow-md);
}

/* Variante sur fond foncé */
.section-dark .btn-secondary,
.btn-ghost {
    --btn-fg: #fff;
    border-color: rgba(255 255 255 / 0.4);
    background: transparent;
}
.section-dark .btn-secondary:hover,
.btn-ghost:hover {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
}

/* Lien fléché (ancre « En savoir plus → ») */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--lavender);
}
.link-arrow svg, .link-arrow .arrow { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover .arrow { transform: translateX(5px); }

/* -------------------------------------------------------------------------
   6. SIGNATURE — MOTIF « NUAGE DE PIXELS »
   L'ADN visuel VEDIM : imagerie médicale = image composée de pixels.
   Réutilisable comme fond décoratif de section, pur CSS (perf).
   ---------------------------------------------------------------------- */
.pixel-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='9.5' y='9.5' width='7' height='7' rx='2' fill='%23c5c2ff'/%3E%3C/svg%3E");
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 70%);
            mask-image: radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 70%);
    opacity: 0.22;
}
.section-dark .pixel-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Crect x='9.5' y='9.5' width='7' height='7' rx='2' fill='%23c5c2ff' fill-opacity='0.55'/%3E%3C/svg%3E");
    opacity: 0.16;
}

/* Variante « pixels qui se dispersent » sur un coin (signature de bloc) */
.pixel-corner {
    position: absolute;
    width: 180px; height: 180px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='7' y='7' width='8' height='8' rx='2.4' fill='%236862d7'/%3E%3C/svg%3E");
    background-size: 22px 22px;
    opacity: 0.18;
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 75%);
            mask-image: linear-gradient(135deg, #000, transparent 75%);
}

/* Petits carrés de pixels animés (utilisés ponctuellement comme accent) */
.pixel-accent {
    display: inline-grid;
    grid-template-columns: repeat(3, 8px);
    gap: 4px;
}
.pixel-accent span {
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--lavender);
}
.pixel-accent span:nth-child(2) { background: var(--lavender-light); }
.pixel-accent span:nth-child(5) { background: var(--lavender-light); }
.pixel-accent span:nth-child(7) { background: var(--navy); }

/* =========================================================================
   7. HEADER & NAVIGATION (mega-menu)
   ========================================================================= */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                height var(--dur-fast) var(--ease);
}
/* Au-dessus du hero : transparent sur le navy */
.site-header.is-transparent {
    background: transparent;
}
/* Après scroll : fond blanc + ombre */
.site-header.is-scrolled {
    background: rgba(255 255 255 / 0.92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 1px 0 rgba(var(--shadow-color) / 0.06), var(--shadow-sm);
    height: 70px;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

/* Logo */
.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo img, .site-logo svg { height: 58px; width: auto; display: block; }
/* Logo blanc au-dessus du hero, navy après scroll */
.site-header.is-transparent .logo-dark { display: none; }
.site-header.is-transparent .logo-light { display: block; }
.site-header.is-scrolled .logo-dark { display: block; }
.site-header.is-scrolled .logo-light { display: none; }
.logo-dark { display: block; }
.logo-light { display: none; }
/* Si le logo clair est en réalité le même PNG navy, on l'éclaircit en blanc */
.site-header.is-transparent .logo-light[src$=".png"] {
    filter: brightness(0) invert(1);
}

/* Barre de progression de lecture (haut de page) */
.read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--lavender), var(--lavender-light));
    z-index: 300;
    transition: width 0.1s linear;
}

/* Navigation principale */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0; padding: 0;
}
.main-nav > ul > li { position: relative; margin: 0; }
.main-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
    border-radius: var(--radius-pill);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.site-header.is-transparent .main-nav > ul > li > a { color: #fff; }
.main-nav > ul > li > a:hover,
.main-nav > ul > li.is-open > a {
    color: var(--lavender);
    background: var(--lavender-pale);
}
.site-header.is-transparent .main-nav > ul > li > a:hover,
.site-header.is-transparent .main-nav > ul > li.is-open > a {
    color: #fff;
    background: rgba(255 255 255 / 0.12);
}
/* Chevron des items à sous-menu */
.menu-item-has-children > a::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur-fast) var(--ease);
    opacity: 0.7;
}
.menu-item-has-children.is-open > a::after { transform: rotate(225deg) translateY(0); }

/* MEGA PANEL */
.mega-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 620px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 28px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility var(--dur-fast);
    z-index: 50;
}
.menu-item-has-children.is-open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* petite flèche du panneau */
.mega-panel::before {
    content: "";
    position: absolute;
    top: -7px; left: 50%;
    width: 14px; height: 14px;
    background: #fff;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: translateX(-50%) rotate(45deg);
}
.mega-col { min-width: 0; }
/* Titres de colonnes du mega-menu : JAMAIS des Hn (span/strong) */
.megamenu-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 14px;
}
.mega-links { list-style: none; margin: 0; padding: 0; }
.mega-links li { margin: 0 0 4px; }
.mega-links a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    color: var(--navy);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mega-links a:hover { background: var(--lavender-pale); transform: translateX(4px); }
.mega-links .mega-link-title { display: block; font-weight: 700; font-size: 0.98rem; }
.mega-links .mega-link-desc { display: block; font-size: 0.82rem; color: var(--text-soft); margin-top: 2px; }
/* Colonne visuelle du mega-menu */
.mega-feature {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy), var(--navy-deep));
    color: #fff;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
}
.mega-feature .pixel-corner { top: 0; right: 0; color: var(--lavender-light); opacity: 0.25; }
.mega-feature strong { position: relative; font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.mega-feature span { position: relative; font-size: 0.85rem; color: var(--text-on-dark-soft); margin-bottom: 14px; }
.mega-feature .btn { position: relative; align-self: flex-start; padding: 10px 20px; font-size: 0.85rem; }

/* Sélecteur de langue */
.lang-switcher { display: inline-flex; gap: 2px; align-items: center; }
.lang-link {
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-mute);
    border-radius: 8px;
    transition: color var(--dur-fast), background var(--dur-fast);
}
.lang-link.is-active { color: var(--lavender); background: var(--lavender-pale); }
.site-header.is-transparent .lang-link { color: rgba(255 255 255 / 0.7); }
.site-header.is-transparent .lang-link.is-active { color: #fff; background: rgba(255 255 255 / 0.16); }

/* Zone droite du header (langue + CTA + burger) */
.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-actions .btn { padding: 11px 22px; font-size: 0.9rem; }

/* Bouton burger (mobile) */
.burger {
    display: none;
    width: 46px; height: 46px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 250;
}
.burger span {
    position: absolute;
    left: 11px; right: 11px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.site-header.is-transparent .burger span { background: #fff; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.menu-open .burger span { background: #fff; }

/* =========================================================================
   8. MENU MOBILE — plein écran
   ========================================================================= */
.mobile-nav {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    z-index: 190;
    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
    padding: 24px var(--gutter) 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
}
body.menu-open .mobile-nav { transform: translateX(0); }
.mobile-nav .pixel-field { opacity: 0.25; }
.mobile-nav > * { position: relative; z-index: 2; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid rgba(255 255 255 / 0.1); }
.mobile-nav > ul > li > a,
.mobile-nav .m-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 4px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
}
.mobile-nav .m-parent .chev {
    width: 10px; height: 10px;
    border-right: 2px solid var(--lavender-light);
    border-bottom: 2px solid var(--lavender-light);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
}
.mobile-nav .m-parent[aria-expanded="true"] .chev { transform: rotate(225deg); }
.mobile-nav .m-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease);
}
.mobile-nav .m-sub.is-open { max-height: 500px; }
.mobile-nav .m-sub a {
    display: block;
    padding: 12px 4px 12px 18px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text-on-dark-soft);
    border-left: 2px solid rgba(255 255 255 / 0.15);
    margin-left: 4px;
}
.mobile-nav .m-sub a:hover { color: #fff; border-color: var(--lavender-light); }
.mobile-nav .mobile-foot { margin-top: auto; padding-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.mobile-nav .mobile-foot .btn { width: 100%; }
.mobile-nav .lang-switcher .lang-link { color: rgba(255 255 255 / 0.8); font-size: 1rem; }
.mobile-nav .lang-switcher .lang-link.is-active { color: #fff; background: rgba(255 255 255 / 0.16); }

/* =========================================================================
   9. HERO — Piste A « Révélation / scan »
   ========================================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--navy-deep);
    color: #fff;
    padding-top: var(--nav-h);
}

/* Vidéo YouTube en fond (chargée en façade par main.js) */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--navy-deep);
}
.hero-video iframe {
    position: absolute;
    top: 50%; left: 50%;
    /* Couvre toujours le conteneur, quel que soit le ratio écran (16:9 + marge) */
    width: 100vw; height: 56.25vw;       /* 16:9 */
    min-height: 100%; min-width: 177.77vh; /* couvre tout */
    transform: translate(-50%, -50%) scale(1.02);
    border: 0;
    pointer-events: none;
}
/* Voile navy par-dessus la vidéo (lisibilité) */
.hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, var(--navy-deep) 8%, rgba(10 17 56 / 0.78) 42%, rgba(10 17 56 / 0.45) 100%),
        linear-gradient(0deg, var(--navy-deep), transparent 40%);
}

/* Couches de pixels (image qui se "développe") */
.hero .scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero .scan::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='7.5' y='7.5' width='7' height='7' rx='2' fill='%23c5c2ff' fill-opacity='0.7'/%3E%3C/svg%3E");
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 32%, transparent 62%);
            mask-image: linear-gradient(105deg, #000 0%, #000 32%, transparent 62%);
    opacity: 0.5;
}
.hero .scan::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Crect x='21' y='21' width='12' height='12' rx='3.4' fill='%236862d7' fill-opacity='0.55'/%3E%3C/svg%3E");
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(80% 90% at 12% 50%, #000, transparent 70%);
            mask-image: radial-gradient(80% 90% at 12% 50%, #000, transparent 70%);
    opacity: 0.45;
}
/* Ligne de scan qui balaie */
.hero .scanline {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    left: 36%;
    z-index: 1;
    background: linear-gradient(180deg, transparent, var(--lavender-light), transparent);
    opacity: 0.6;
    box-shadow: 0 0 30px 6px rgba(197 194 255 / 0.4);
    animation: hero-sweep 7s var(--ease) infinite;
}
@keyframes hero-sweep {
    0%, 100% { left: 8%; opacity: 0; }
    10% { opacity: 0.7; }
    50% { left: 62%; opacity: 0.5; }
    90% { opacity: 0; }
}

/* Label vertical sur le côté */
.hero-vlabel {
    position: absolute;
    left: clamp(20px, 4vw, 56px);
    top: 50%;
    transform: rotate(180deg) translateX(50%);
    writing-mode: vertical-rl;
    font-size: 0.72rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--lavender-light);
    font-weight: 600;
    opacity: 0.8;
    z-index: 3;
}

.hero-inner { position: relative; z-index: 3; width: 100%; }
.hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: end;
    padding-block: clamp(40px, 8vh, 90px);
}
.hero h1 {
    color: #fff;
    font-size: var(--fs-hero);
    font-weight: 900;
    margin-bottom: 0;
}
.hero h1 em {
    font-style: normal;
    font-weight: 300;
    display: block;
    color: var(--lavender-light);
}
.hero-meta { padding-bottom: 8px; }
.hero-meta p {
    color: var(--text-on-dark-soft);
    font-size: var(--fs-lead);
    margin-bottom: 26px;
    border-left: 2px solid var(--lavender);
    padding-left: 20px;
}

/* Barre de chiffres-clés (corrigée — respiration) */
.hero-foot {
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(255 255 255 / 0.12);
}
.hero-foot .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.hf {
    padding: 40px 0 44px;
    padding-inline: clamp(20px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}
.hf:first-child { padding-left: 0; }
.hf:last-child { padding-right: 0; }
.hf::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 54px;
    background: linear-gradient(180deg, transparent, rgba(255 255 255 / 0.14), transparent);
}
.hf:first-child::before { display: none; }
.hf .n {
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hf .n sup { font-size: 0.5em; font-weight: 700; color: var(--lavender-light); margin-left: 1px; }
.hf .t {
    font-size: 0.74rem;
    color: #9499c2;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

/* Indicateur de scroll */
.hero-scroll {
    position: absolute;
    bottom: 120px; right: clamp(20px, 4vw, 56px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-on-dark-soft);
}
.hero-scroll .mouse {
    width: 22px; height: 34px;
    border: 1.5px solid rgba(255 255 255 / 0.4);
    border-radius: 12px;
    position: relative;
}
.hero-scroll .mouse::after {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    width: 3px; height: 6px;
    background: var(--lavender-light);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scroll-dot 1.8s var(--ease) infinite;
}
@keyframes scroll-dot {
    0% { opacity: 0; transform: translate(-50%, 0); }
    40% { opacity: 1; }
    80% { opacity: 0; transform: translate(-50%, 10px); }
    100% { opacity: 0; }
}

/* =========================================================================
   10. CARTES & BENTO (inspiré Piste B)
   ========================================================================= */
.card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(26px, 3vw, 38px);
    overflow: hidden;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--lavender-light);
}
.card .pixel-corner {
    top: 0; right: 0;
    left: auto; bottom: auto;
    width: 110px; height: 110px;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 65%);
            mask-image: linear-gradient(225deg, #000 10%, transparent 65%);
}
.card:hover .pixel-corner { opacity: 0.7; }
.card-ico {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--lavender-pale);
    color: var(--lavender);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
}
.card-ico svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-soft); margin-bottom: 18px; }

/* BENTO asymétrique (section "pourquoi") */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(14px, 1.5vw, 18px);
}
.bento .b {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(26px, 3vw, 36px);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    position: relative;
    overflow: hidden;
}
.bento .b:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--lavender-light); }
.bento .b.big {
    grid-column: span 4;
    background: linear-gradient(160deg, var(--navy), var(--navy-deep));
    color: #fff;
}
.bento .b.big h3 { color: #fff; }
.bento .b.big p { color: var(--text-on-dark-soft); max-width: 92%; }
.bento .b.big .pixel-corner { top: 0; right: 0; color: var(--lavender-light); opacity: 0.28; -webkit-mask-image: linear-gradient(225deg,#000,transparent 70%); mask-image: linear-gradient(225deg,#000,transparent 70%); }
.bento .b.med { grid-column: span 2; }
.bento .b.wide { grid-column: span 3; }
.bento .b.full { grid-column: span 6; }
.bento .b .num {
    font-size: clamp(2.4rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--lavender);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.bento .b h3 { margin-bottom: 10px; position: relative; }
.bento .b p { color: var(--text-soft); font-size: 0.96rem; margin: 0; position: relative; }

/* =========================================================================
   11. LISTE D'ACTIVITÉS ÉDITORIALE (Piste A — lignes qui s'inversent)
   ========================================================================= */
.act-list { margin-top: clamp(40px, 5vw, 60px); }
.act {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: clamp(18px, 3vw, 32px);
    align-items: center;
    padding: clamp(26px, 3vw, 34px) 0;
    border-top: 1px solid var(--border);
    color: inherit;
    transition: background var(--dur) var(--ease), padding var(--dur) var(--ease),
                border-radius var(--dur) var(--ease), margin var(--dur) var(--ease);
}
.act:last-child { border-bottom: 1px solid var(--border); }
.act .idx { font-size: 1rem; font-weight: 700; color: var(--lavender); font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); }
.act-mid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.act h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.3rem); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.act .desc { color: var(--text-soft); max-width: 440px; font-size: 0.98rem; transition: color var(--dur) var(--ease); }
.act .go {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--navy);
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
                border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.act .go svg { width: 20px; height: 20px; }
.act:hover {
    background: var(--navy);
    padding-inline: clamp(20px, 3vw, 32px);
    border-radius: var(--radius);
    border-color: transparent;
    margin-inline: calc(-1 * clamp(20px, 3vw, 32px));
}
.act:hover + .act { border-top-color: transparent; }
.act:hover h3, .act:hover .idx { color: #fff; }
.act:hover h3 { transform: translateX(8px); }
.act:hover .desc { color: var(--text-on-dark-soft); }
.act:hover .go { background: var(--lavender); border-color: var(--lavender); color: #fff; transform: rotate(-45deg); }

/* =========================================================================
   12. SECTION SPLIT (texte + média) & bande vidéo
   ========================================================================= */
.media-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame .badge-float {
    position: absolute;
    left: 20px; bottom: 20px;
    background: rgba(255 255 255 / 0.95);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    box-shadow: var(--shadow-md);
}
.media-frame .badge-float strong { display: block; font-size: 1.4rem; color: var(--navy); line-height: 1; }
.media-frame .badge-float span { font-size: 0.78rem; color: var(--text-soft); }

/* Bande vidéo (façade YouTube — Piste B) */
.video-band {
    position: relative;
    min-height: clamp(280px, 45vw, 520px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--navy-deep);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10 17 56 / 0.55), rgba(10 17 56 / 0.75));
    z-index: 1;
}
.video-band .px { display: none; }
.video-band .play-btn, .video-band .cap { position: relative; z-index: 3; }
.video-band .play-btn {
    position: relative;
    z-index: 2;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: rgba(255 255 255 / 0.12);
    border: 1.5px solid rgba(255 255 255 / 0.4);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast);
}
.video-band .play-btn svg { width: 26px; height: 26px; margin-left: 4px; }
.video-band .play-btn:hover { background: var(--lavender); border-color: var(--lavender); transform: scale(1.08); }
.video-band .play-btn::after {
    content: "";
    position: absolute; inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(197 194 255 / 0.4);
    animation: pulse-ring 2.4s var(--ease) infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}
.video-band .cap {
    position: absolute;
    left: clamp(16px, 3vw, 40px); bottom: 22px;
    z-index: 2;
    color: var(--text-on-dark-soft);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
}
/* Quand la vraie iframe est injectée */
.video-band.is-playing iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    z-index: 3;
}

/* =========================================================================
   13. GRILLE NÉGATOSCOPE (idée Piste B — fond structurant)
   ========================================================================= */
.grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='16' y='16' width='8' height='8' rx='2.4' fill='%23101a56'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
            mask-image: linear-gradient(180deg, #000, transparent);
    opacity: 0.06;
}
.section-dark .grid-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='16' y='16' width='8' height='8' rx='2.4' fill='%23c5c2ff'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    opacity: 0.06;
}

/* =========================================================================
   14. PROCESS EN ÉTAPES (séquence réelle → numérotation justifiée)
   ========================================================================= */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 36px); counter-reset: step; }
.step { position: relative; padding-top: 20px; }
.step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--lavender);
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    font-variant-numeric: tabular-nums;
}
.step::after {
    content: "";
    position: absolute;
    top: 26px; left: 48px; right: -18px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
.step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step p { color: var(--text-soft); font-size: 0.95rem; }
.section-dark .step::before { color: var(--lavender-light); }
.section-dark .step h3 { color: #fff; }
.section-dark .step p { color: var(--text-on-dark-soft); }
.section-dark .step::after { background: repeating-linear-gradient(90deg, rgba(255 255 255 / 0.2) 0 6px, transparent 6px 12px); }

/* =========================================================================
   15. FAQ — accordéon
   ========================================================================= */
.faq { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 700;
    color: var(--navy);
    transition: color var(--dur-fast) var(--ease);
}
.faq-q:hover { color: var(--lavender); }
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 24px; height: 24px;
}
.faq-icon::before, .faq-icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: var(--lavender);
    border-radius: 2px;
    transition: transform var(--dur-fast) var(--ease);
}
.faq-icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease);
}
.faq-a-inner { padding: 0 4px 26px; color: var(--text-soft); }

/* =========================================================================
   16. TÉMOIGNAGES — carrousel CSS infini
   ========================================================================= */
.testimonials { overflow: hidden; position: relative; }
.testimonials::before, .testimonials::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: clamp(40px, 8vw, 120px);
    z-index: 2;
    pointer-events: none;
}
.testimonials::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.testimonials::after { right: 0; background: linear-gradient(270deg, var(--white), transparent); }
.section-soft .testimonials::before { background: linear-gradient(90deg, var(--paper), transparent); }
.section-soft .testimonials::after { background: linear-gradient(270deg, var(--paper), transparent); }
.testi-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: testi-scroll 50s linear infinite;
}
.testimonials:hover .testi-track { animation-play-state: paused; }
@keyframes testi-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.testi-card {
    width: clamp(300px, 32vw, 420px);
    flex-shrink: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.testi-stars { display: flex; gap: 3px; color: #f5a623; }
.testi-stars svg { width: 18px; height: 18px; }
.testi-card p { color: var(--text); font-size: 0.98rem; margin: 0; }
.testi-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--lavender-pale);
    color: var(--lavender);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}
.testi-author .who strong { display: block; font-size: 0.95rem; color: var(--navy); }
.testi-author .who span { font-size: 0.82rem; color: var(--text-mute); }
.testi-google { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-mute); }
.testi-google svg { width: 16px; height: 16px; }

/* =========================================================================
   17. ÉQUIPE — grille de spécialistes
   ========================================================================= */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5vw, 30px); }
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .team-grid { grid-template-columns: 1fr; } }
.team-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy-deep);
    aspect-ratio: 4 / 5;
}
.team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.team-card:hover img { transform: scale(1.05); }
.team-card .team-info {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 20px 18px;
    background: linear-gradient(0deg, rgba(10 17 56 / 0.95) 0%, rgba(10 17 56 / 0.6) 60%, transparent 100%);
    color: #fff;
}
.team-card .team-info strong { display: block; font-size: 1.05rem; font-weight: 700; }
.team-card .team-info span { font-size: 0.82rem; color: var(--lavender-light); }
/* Placeholder sans photo : initiales + pixels */
.team-card.no-photo { display: flex; align-items: center; justify-content: center; }
.team-card.no-photo .initials { font-size: 2.4rem; font-weight: 800; color: rgba(255 255 255 / 0.25); }

/* =========================================================================
   18. CTA — bandeau pleine largeur (bord à bord)
   ========================================================================= */
.cta-band-full {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    padding: clamp(64px, 10vw, 130px) var(--gutter);
    text-align: center;
}
.cta-band-full .cta-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cta-band-full .cta-video iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(1.02); border: 0; pointer-events: none;
}
.cta-band-full .cta-video::after { content: ""; position: absolute; inset: 0; background: rgba(10 17 56 / 0.82); }
.cta-band-full .cta-band-inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.cta-band-full h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-band-full p { color: var(--text-on-dark-soft); max-width: 52ch; margin-inline: auto; margin-bottom: 30px; }

/* Conserve l'ancien .cta-band (carte arrondie) pour usages internes éventuels */
.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px);
    text-align: center;
}
.cta-band .cta-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cta-band .cta-video iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(1.02); border: 0; pointer-events: none;
}
.cta-band .cta-video::after { content: ""; position: absolute; inset: 0; background: rgba(10 17 56 / 0.82); }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-band p { color: var(--text-on-dark-soft); max-width: 52ch; margin-inline: auto; margin-bottom: 30px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   19. FIL D'ARIANE
   ========================================================================= */
.breadcrumb { padding-block: 18px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-mute); }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--border-strong); }
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--lavender); }
.breadcrumb li[aria-current] { color: var(--navy); font-weight: 600; }

/* Header de page interne (sous le hero) */
.page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 80px));
    padding-bottom: clamp(48px, 7vw, 96px);
}
.page-hero .scan { position: absolute; inset: 0; z-index: 0; }
.page-hero .scan::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='8.5' y='8.5' width='7' height='7' rx='2' fill='%23c5c2ff' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(70% 100% at 80% 30%, #000, transparent 65%);
            mask-image: radial-gradient(70% 100% at 80% 30%, #000, transparent 65%);
    opacity: 0.45;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero .breadcrumb a, .page-hero .breadcrumb li { color: var(--text-on-dark-soft); }
.page-hero .breadcrumb li[aria-current] { color: #fff; }
.page-hero h1 { color: #fff; max-width: 20ch; margin-top: 10px; }
.page-hero .lead { color: var(--text-on-dark-soft); max-width: 60ch; }

/* =========================================================================
   20. BLOG — cartes d'articles & article
   ========================================================================= */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(22px, 3vw, 36px); }
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--lavender-light); }
.post-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--lavender-pale); display: block; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-cat { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lavender); margin-bottom: 12px; }
.post-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.post-card h3 a { color: var(--navy); }
.post-card h3 a:hover { color: var(--lavender); }
/* Toute la carte cliquable : le lien du titre s'étend en overlay */
.post-card-h a::after,
.post-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}
/* Le badge catégorie reste cliquable au-dessus de l'overlay */
.post-card-badge { z-index: 4; }

/* Article single */
.article-body { max-width: var(--container-text); margin-inline: auto; }
.article-body > * { margin-bottom: 1.4em; }
.article-body h2 { margin-top: 1.6em; }
.article-body h3 { margin-top: 1.4em; }
.article-body img { border-radius: var(--radius-sm); }
.article-body blockquote {
    margin: 1.6em 0;
    padding: 6px 0 6px 26px;
    border-left: 3px solid var(--lavender);
    font-size: 1.15rem;
    color: var(--navy);
    font-weight: 500;
}
.article-body figure { margin: 1.6em 0; }
.article-body figcaption { font-size: 0.85rem; color: var(--text-mute); margin-top: 8px; text-align: center; }

/* =========================================================================
   21. FORMULAIRE
   ========================================================================= */
.form-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font);
    font-size: 1rem;
    color: var(--navy);
    background: var(--paper);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline: none;
    border-color: var(--lavender);
    background: #fff;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.85rem; color: var(--text-soft); margin-bottom: 22px; }
.form-consent input { margin-top: 3px; flex-shrink: 0; }
/* Honeypot anti-spam (invisible) */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* =========================================================================
   22. FOOTER — aucun Hn ici (titres en p.footer-title)
   ========================================================================= */
.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--text-on-dark-soft);
    padding-top: clamp(56px, 8vw, 96px);
}
.site-footer .pixel-corner { top: 0; left: 0; color: var(--lavender-light); opacity: 0.12; -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); mask-image: linear-gradient(135deg, #000, transparent 70%); width: 280px; height: 280px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); position: relative; z-index: 2; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-brand img, .footer-brand svg { height: 40px; margin-bottom: 18px; order: -1; }
.footer-brand p { max-width: 34ch; font-size: 0.92rem; margin: 0; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255 255 255 / 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-social a:hover { background: var(--lavender); border-color: var(--lavender); transform: translateY(-3px); }
.footer-social a svg { width: 19px; height: 19px; display: block; }
.footer-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: var(--text-on-dark-soft); font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 0.92rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--lavender-light); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
    margin-top: clamp(40px, 6vw, 72px);
    padding-block: 24px;
    border-top: 1px solid rgba(255 255 255 / 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.footer-bottom p { margin: 0; font-size: 0.84rem; }
.footer-credit { display: inline-block; margin-left: 6px; opacity: 0.7; }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { opacity: 1; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal-menu { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-legal-menu li { margin: 0; }
.footer-legal a { font-size: 0.84rem; color: var(--text-on-dark-soft); }
.footer-legal a:hover { color: #fff; }
.footer-disclaimer { font-size: 0.78rem; color: rgba(199 203 230 / 0.6); max-width: 80ch; margin-top: 8px; }

/* =========================================================================
   23. PAGE 404
   ========================================================================= */
.error-404 {
    min-height: 80vh;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy), var(--navy-deep));
    color: #fff;
}
.error-404 .code { font-size: clamp(6rem, 18vw, 13rem); font-weight: 900; line-height: 1; color: #fff; letter-spacing: -0.05em; }
.error-404 .code span { color: var(--lavender-light); }
.error-404 h1 { color: #fff; }
.error-404 p { color: var(--text-on-dark-soft); max-width: 46ch; margin-inline: auto; margin-bottom: 28px; }

/* =========================================================================
   24. TOAST (protection contenu) — injecté par main.js
   ========================================================================= */
#seesmile-toast { pointer-events: none; }

/* =========================================================================
   25. ANIMATIONS REVEAL (IntersectionObserver)
   ========================================================================= */
.reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    will-change: opacity, transform;
}
.reveal { transform: translateY(30px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible {
    opacity: 1;
    transform: none;
}
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }

/* =========================================================================
   26. RESPONSIVE — Tablette (≤1024px)
   ========================================================================= */
@media (max-width: 1024px) {
    :root { --nav-h: 76px; }

    /* Navigation desktop → cachée, burger visible */
    .main-nav, .header-actions .btn, .header-actions .lang-switcher { display: none; }
    .burger { display: block; }

    /* Hero : passage en une colonne */
    .hero-grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
    .hero-meta { padding-bottom: 0; }
    .hero-vlabel { display: none; }
    .hero-scroll { display: none; }

    /* Bento : recomposition */
    .bento { grid-template-columns: repeat(4, 1fr); }
    .bento .b.big { grid-column: span 4; }
    .bento .b.med { grid-column: span 2; }
    .bento .b.wide { grid-column: span 2; }

    /* Footer : 2 colonnes */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }

    /* Split : empile */
    .split { grid-template-columns: 1fr; }
    .split .media-frame { order: -1; }
}

/* =========================================================================
   27. RESPONSIVE — Mobile (≤768px)
   ========================================================================= */
@media (max-width: 768px) {
    /* Boutons full-width */
    .hero-cta, .cta-actions { flex-direction: column; align-items: stretch; }
    .hero-cta .btn, .cta-actions .btn { width: 100%; }

    /* Barre de chiffres hero : empile proprement (séparateurs horizontaux) */
    .hero-foot .hero-stats { grid-template-columns: 1fr; }
    .hf {
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
        padding: 22px 0;
        padding-inline: 0;
    }
    .hf::before {
        left: 0; right: 0; top: 0;
        transform: none;
        width: 100%; height: 1px;
        background: rgba(255 255 255 / 0.1);
    }
    .hf:first-child::before { display: block; }
    .hf .n { font-size: 1.9rem; }

    /* Liste d'activités : sans le rond fléché, 2 colonnes */
    .act { grid-template-columns: 44px 1fr; gap: 16px; }
    .act .go { display: none; }
    .act:hover { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }

    /* Bento : 1 colonne */
    .bento { grid-template-columns: 1fr; }
    .bento .b.big, .bento .b.med, .bento .b.wide, .bento .b.full { grid-column: span 1; }

    /* Mega-menu desktop neutralisé (sécurité) */
    .mega-panel { display: none; }

    /* Footer : 1 colonne */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }

    /* Formulaire : 1 colonne */
    .form-row { grid-template-columns: 1fr; }

    /* Steps : pas de connecteur horizontal */
    .step::after { display: none; }

    /* Section padding réduit */
    :root { --section-y: clamp(48px, 12vw, 80px); }

    /* Titres de section alignés à gauche sur mobile (lecture) */
    .section-head { text-align: left; margin-inline: 0; }
}

/* =========================================================================
   28. RESPONSIVE — Très petit (≤380px)
   ========================================================================= */
@media (max-width: 380px) {
    :root { --gutter: 16px; }
    .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .btn { padding: 14px 22px; font-size: 0.95rem; }
    .act h3 { font-size: 1.3rem; }
    .testi-card { width: 84vw; }
    .card-ico { width: 48px; height: 48px; }
}

/* =========================================================================
   29. IMPRESSION
   ========================================================================= */
@media print {
    .site-header, .burger, .mobile-nav, .hero-video, .scanline,
    .read-progress, .video-band, .cta-band .cta-video, .hero-scroll { display: none !important; }
    body { color: #000; background: #fff; }
    .hero, .page-hero, .section-dark { background: #fff !important; color: #000 !important; }
    .hero h1, .page-hero h1, .section-dark h1, .section-dark h2, .section-dark h3 { color: #000 !important; }
    a { color: #000; text-decoration: underline; }
}

/* =========================================================================
   30. UTILITAIRES FINAUX
   ========================================================================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.no-scroll, html.no-scroll { overflow: hidden; touch-action: none; overscroll-behavior: none; }
body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
}
/* Header toujours visible et opaque quand le menu mobile est ouvert (croix accessible) */
body.menu-open .site-header { background: var(--navy); box-shadow: 0 1px 0 rgba(255 255 255 / 0.08); }
body.menu-open .site-header .logo-dark { display: none; }
body.menu-open .site-header .logo-light { display: block; }
body.menu-open .burger span { background: #fff; }
.relative { position: relative; }
.z-2 { position: relative; z-index: 2; }

/* =========================================================================
   31. FEEDBACK FORMULAIRE (succès / erreur)
   ========================================================================= */
.form-feedback {
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 22px;
    font-size: 0.95rem;
    font-weight: 600;
}
.form-feedback.is-success {
    background: #e1f5ee;
    color: #0f6e56;
    border: 1px solid #9fe1cb;
}
.form-feedback.is-error {
    background: #fcebeb;
    color: #a32d2d;
    border: 1px solid #f7c1c1;
}

/* Logo footer (PNG navy éclairci sur fond foncé) */
.footer-brand .footer-logo[src$=".png"] {
    filter: brightness(0) invert(1);
    height: 46px;
    width: auto;
}

/* =========================================================================
   32. PAGE-HERO avec image de fond (radiographie)
   ========================================================================= */
.page-hero.has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero.has-bg-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(10 17 56 / 0.86) 0%, rgba(10 17 56 / 0.72) 100%);
}
.page-hero.has-bg-image > .container { position: relative; z-index: 2; }
.page-hero.has-bg-image .scan { z-index: 1; opacity: 0.5; }

/* =========================================================================
   33. BLOG & ARTICLE — design soigné
   ========================================================================= */
/* Barre de filtres catégories */
.blog-filters {
    border-bottom: 1px solid var(--border);
    background: #fff;
    position: sticky;
    top: var(--nav-h);
    z-index: 50;
}
.blog-filters .container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-block: 18px;
}
.blog-filters-label { font-size: 0.82rem; font-weight: 600; color: var(--text-mute); margin-right: 4px; }
.cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--navy);
    background: var(--lavender-pale);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cat-pill:hover { transform: translateY(-2px); background: var(--lavender-light); color: var(--navy); }
.cat-pill.is-active { background: var(--lavender); color: #fff; }

/* Badge catégorie sur la vignette */
.post-thumb { position: relative; }
.post-card-badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(104 98 215 / 0.95);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.post-card-h { font-size: 1.25rem; margin-bottom: 10px; line-height: 1.25; }
.post-card-h a { color: var(--navy); }
.post-card-h a:hover { color: var(--lavender); }
.post-excerpt { color: var(--text-soft); font-size: 0.94rem; margin-bottom: 18px; }
.post-meta {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-mute);
}
.post-readmore { color: var(--lavender); font-weight: 700; transition: transform var(--dur-fast) var(--ease); }
.post-card:hover .post-readmore { transform: translateX(4px); }

/* Vignette placeholder quand pas d'image */
.post-thumb:empty,
.post-thumb:not(:has(img)) {
    background: linear-gradient(135deg, var(--lavender-pale), var(--lavender-light));
    position: relative;
}

/* --- Article single --- */
.article-cat-badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: rgba(255 255 255 / 0.14);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}
.article-cat-badge:hover { background: var(--lavender); color: #fff; }
.article-meta-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    color: var(--text-on-dark-soft);
    font-size: 0.92rem;
}
.article-meta-top .dot-sep { opacity: 0.5; }
.article-featured {
    margin-top: clamp(-60px, -5vw, -40px);
    position: relative;
    z-index: 5;
    margin-bottom: 10px;
}
.article-featured img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.article-share span { font-size: 0.88rem; font-weight: 600; color: var(--text-soft); }
.article-share a {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--navy);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.article-share a:hover { background: var(--lavender); border-color: var(--lavender); color: #fff; transform: translateY(-3px); }

/* Pagination */
.pagination .nav-links, .navigation .nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination a, .pagination span,
.navigation .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px; height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--navy);
    font-weight: 600;
    transition: all var(--dur-fast) var(--ease);
}
.navigation .page-numbers.current { background: var(--lavender); border-color: var(--lavender); color: #fff; }
.navigation a.page-numbers:hover { background: var(--lavender-pale); border-color: var(--lavender-light); }

/* Responsive blog */
@media (max-width: 700px) {
    .blog-filters { position: static; }
    .blog-filters .container { gap: 8px; }
    .cat-pill { padding: 6px 14px; font-size: 0.82rem; }
}

/* =========================================================================
   34. FAISCEAU VIOLET ANIMÉ SUR BORDURE (cards au survol)
   ========================================================================= */
@property --beam-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes seesmile-beam-spin {
    to { --beam-angle: 360deg; }
}
/* Élément de bordure : un dégradé conique masqué pour ne garder que le contour */
.card, .post-card { position: relative; }
.card::before,
.post-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;                 /* épaisseur du faisceau */
    background: conic-gradient(
        from var(--beam-angle),
        transparent 0deg,
        transparent 280deg,
        var(--lavender-light) 320deg,
        var(--lavender) 350deg,
        #fff 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
    z-index: 2;
}
.card:hover::before,
.post-card:hover::before {
    opacity: 1;
    animation: seesmile-beam-spin 2.6s linear infinite;
}
/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    .card:hover::before, .post-card:hover::before { animation: none; opacity: 0.6; }
}

/* Contenu des cards au-dessus du faisceau de bordure */
.card > *:not(.pixel-corner), .post-card > *:not(.pixel-corner) { position: relative; z-index: 1; }
.card > .pixel-corner, .post-card > .pixel-corner { position: absolute; z-index: 0; }
.post-card .post-thumb { z-index: 1; }

/* =========================================================================
   35. GRILLE VALEURS (Espace PRO) avec icônes
   ========================================================================= */
.values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(20px, 3vw, 40px);
    margin-top: 40px;
}
.value-item { text-align: center; }
.value-icon {
    width: 76px; height: 76px;
    margin: 0 auto 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(150deg, rgba(104 98 215 / 0.35), rgba(197 194 255 / 0.12));
    border: 1px solid rgba(197 194 255 / 0.3);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.value-icon svg { width: 38px; height: 38px; }
.value-item:hover .value-icon { transform: translateY(-5px); background: linear-gradient(150deg, rgba(104 98 215 / 0.55), rgba(197 194 255 / 0.2)); }
.value-item h3 { color: #fff; font-size: 1.05rem; }
@media (max-width: 900px) {
    .values-grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
}
@media (max-width: 560px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   36. CARTES STATISTIQUES (compteurs page Vedim)
   ========================================================================= */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(28px, 3vw, 40px);
    position: relative;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--lavender-light); }
.stat-card .num { font-family: var(--font); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; color: var(--lavender); line-height: 1; margin-bottom: 12px; }
.stat-card p { color: var(--text-soft); font-size: 0.95rem; margin: 0; }

/* =========================================================================
   37. BOUTON RETOUR EN HAUT
   ========================================================================= */
.back-to-top {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 3vw, 32px);
    width: 50px; height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--lavender);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(104 98 215 / 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur-fast) var(--ease), visibility var(--dur) var(--ease);
    z-index: 900;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--navy); transform: translateY(-3px); }
.back-to-top svg { width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
}


/* Mot-clé principal intégré au H1 du hero (ligne descriptive sous l'accroche) */
.hero h1 .h1-kw {
    display: block;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--lavender-light);
    margin-top: 18px;
}

/* Gras lisible selon le fond :
   - fond clair → navy (contraste fort, accent marque)
   - fond sombre → blanc pur (jamais une couleur d'accent illisible) */
.section-light p strong, .section p strong, .split p strong { color: var(--navy); }
.section-dark p strong,
.section-dark .lead strong,
.hero p strong,
.cta-band-full p strong,
.cta-section p strong { color: #fff; }

/* -------------------------------------------------------------------------
   Liens inline dans le contenu — lisibles selon le fond
   (uniquement les liens DANS les paragraphes de texte, pas les boutons/nav)
   ------------------------------------------------------------------------- */
/* Fond clair : lien en navy souligné (se distingue du texte) */
.section p a:not(.btn):not(.link-arrow),
.split p a:not(.btn):not(.link-arrow),
.lead a:not(.btn):not(.link-arrow) {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--lavender);
}
.section p a:not(.btn):not(.link-arrow):hover,
.split p a:not(.btn):not(.link-arrow):hover,
.lead a:not(.btn):not(.link-arrow):hover {
    color: var(--lavender);
}
/* Fond sombre : lien BLANC (couleur du texte) souligné */
.section-dark p a:not(.btn):not(.link-arrow),
.section-dark .lead a:not(.btn):not(.link-arrow),
.hero p a:not(.btn):not(.link-arrow),
.page-hero .lead a:not(.btn):not(.link-arrow),
.cta-band-full p a:not(.btn):not(.link-arrow) {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--lavender-light);
}
.section-dark p a:not(.btn):not(.link-arrow):hover,
.hero p a:not(.btn):not(.link-arrow):hover,
.page-hero .lead a:not(.btn):not(.link-arrow):hover {
    color: var(--lavender-light);
    text-decoration-color: #fff;
}

/* -------------------------------------------------------------------------
   Formulaire en stand-by (le temps des tests)
   ------------------------------------------------------------------------- */
.form-standby {
    text-align: center;
    padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 44px);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.form-standby-ico {
    width: 54px; height: 54px;
    margin: 0 auto 18px;
    display: grid; place-items: center;
    color: var(--lavender);
    background: var(--lavender-pale);
    border-radius: 14px;
}
.form-standby-ico svg { width: 26px; height: 26px; }
.form-standby-title {
    font-family: var(--font);
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: var(--navy);
    margin: 0 0 10px;
}
.form-standby-text { color: var(--text-soft); margin: 0 0 22px; max-width: 42ch; margin-inline: auto; }

/* -------------------------------------------------------------------------
   Badge reCAPTCHA v3 masqué — la mention légale obligatoire (exigée par Google
   quand on masque le badge) est affichée sous chaque formulaire (.recaptcha-note)
   ------------------------------------------------------------------------- */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note {
    margin-top: 14px;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-soft);
}
.recaptcha-note a { color: var(--lavender); text-decoration: underline; }

/* -------------------------------------------------------------------------
   Vidéos de fond MP4 auto-hébergées (.bg-video) — hero, CTA, page-hero
   object-fit:cover couvre le conteneur sans le hack ratio 16:9 des iframes.
   ------------------------------------------------------------------------- */
.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    pointer-events: none;
}

/* Hero accueil : la vidéo MP4 remplit le conteneur .hero-video */
.hero-video .bg-video { z-index: 0; }

/* CTA pleine largeur */
.cta-band-full .cta-video .bg-video,
.cta-band .cta-video .bg-video { z-index: 0; }

/* Page-hero des pages internes avec vidéo de fond */
.page-hero.has-bg-video { position: relative; overflow: hidden; }
.page-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--navy-deep); }
.page-hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, var(--navy-deep) 8%, rgba(10 17 56 / 0.78) 42%, rgba(10 17 56 / 0.5) 100%),
        linear-gradient(0deg, var(--navy-deep), transparent 45%);
}
.page-hero.has-bg-video .container,
.page-hero.has-bg-video .scan { position: relative; z-index: 1; }