/* Parkinsans, hébergée par nos soins plutôt que chez Google Fonts :
   aucune requête vers un tiers, aucune adresse IP de visiteur transmise,
   et une connexion réseau de moins avant le premier rendu. */
@font-face {
  font-family: 'Parkinsans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/parkinsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Parkinsans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/parkinsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================================================================
   QENIVO — feuille de style commune à toutes les pages.
   Extraite du <style> unique de index.html lors du passage au
   multipage : chaque page la partage désormais au lieu d'en embarquer
   une copie.
   =================================================================== */
  :root {
    --blue-deep: #1e3a5f;
    --blue-deep-dark: #152a45;
    --blue-light: #6f9fe0;
    --blue-soft: #eef3fb;
    --bg: #fafbfd;
    --text: #1a2238;
    --text-muted: #5a6478;
    --border: #e3e8f0;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.06);
    --shadow-md: 0 4px 20px rgba(30, 58, 95, 0.08);
    --shadow-lg: 0 12px 40px rgba(30, 58, 95, 0.12);
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
  }

  section[id] {
    scroll-margin-top: 80px;
  }

  body {
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--blue-deep);
  }

  .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ===== NAV ===== */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Opaque : la barre passe désormais au-dessus d'un hero sombre. */
    background: var(--bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    z-index: 1000;
    transition: all 0.3s ease;
  }

  nav.scrolled {
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    max-width: 1140px;
    margin: 0 auto;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--blue-deep);
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .logo-img {
    height: 38px;
    width: auto;
    display: block;
  }

  .logo-dot {
    color: var(--blue-light);
  }

  footer .logo-img {
    height: 34px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }

  /* ===== TUBELIGHT NAV PILL ===== */
  .nav-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--border);
    border-radius: 100px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.06);
  }

  .nav-menu li {
    position: relative;
    z-index: 1;
  }

  .nav-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 100px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
  }

  .nav-menu a:hover {
    color: var(--blue-deep);
  }

  .nav-menu a.active {
    color: var(--blue-deep);
    background: rgba(111, 159, 224, 0.12);
  }

  .nav-menu a .nav-icon,
  .nav-drop__btn .nav-icon {
    display: none;
  }

  /* Tubelight lamp on top of active tab */
  .nav-lamp {
    position: absolute;
    top: -6px;
    width: 32px;
    height: 4px;
    background: var(--blue-deep);
    border-radius: 0 0 6px 6px;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    transform: translateX(0);
    z-index: 2;
  }

  .nav-lamp.visible {
    opacity: 1;
  }

  .nav-lamp::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 24px;
    background: var(--blue-light);
    border-radius: 50%;
    filter: blur(10px);
    top: -6px;
    left: -25%;
    opacity: 0.55;
  }

  .nav-lamp::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 16px;
    background: var(--blue-deep);
    border-radius: 50%;
    filter: blur(6px);
    top: -2px;
    left: 20%;
    opacity: 0.4;
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* Bouton hamburger (mobile) */
  .nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .nav-burger:hover { background: var(--blue-soft); border-color: var(--blue-light); }
  .nav-burger span {
    position: relative;
    width: 19px; height: 2px;
    background: var(--blue-deep);
    border-radius: 2px;
    transition: background 0.2s ease;
  }
  .nav-burger span::before,
  .nav-burger span::after {
    content: '';
    position: absolute; left: 0;
    width: 19px; height: 2px;
    background: var(--blue-deep);
    border-radius: 2px;
    transition: transform 0.3s ease;
  }
  .nav-burger span::before { top: -6px; }
  .nav-burger span::after { top: 6px; }
  .nav-burger.open span { background: transparent; }
  .nav-burger.open span::before { transform: translateY(6px) rotate(45deg); }
  .nav-burger.open span::after { transform: translateY(-6px) rotate(-45deg); }

  /* CTA intégré au menu déroulant (mobile) */
  .nav-menu-cta { display: none; }
  .nav-menu-cta-btn {
    width: 100%;
    background: var(--blue-deep);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 11px;
    font-family: inherit; font-weight: 700; font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .nav-menu-cta-btn:hover { background: var(--blue-deep-dark); }

  /* ===================================================================
     HERO — bandeau sombre pleine largeur
     Colonne gauche : preuve sociale, badge, titre bi-graisse, CTA.
     Colonne droite : composition d'images + cartes chiffres flottantes.
     =================================================================== */
  .hero {
    position: relative;
    color: #fff;
    padding: 148px 0 0;
    overflow: hidden;

    /* Dégradé repris du logo QENIVO : ses bleus vont du profond #3d66a6
       (bas-gauche) au clair #8ab1de (haut-droite). On garde ce même axe.
       Les arrêts sont resserrés sur les tons sombres jusqu'à 55 % : la
       colonne de texte reste ainsi sur un fond assez foncé pour que le
       blanc passe (≈ 6,7:1), le clair n'arrive que côté images. */
    background:
      radial-gradient(1000px 720px at 84% 10%, rgba(138, 177, 222, 0.28), transparent 60%),
      linear-gradient(42deg,
        #1b3260 0%,
        #23447a 28%,
        #325c98 55%,
        #4470b0 80%,
        #5686c4 100%);
  }

  /* ---- Ambiance du fond -----------------------------------------
     Deux couches distinctes :
     1. une texture de points FIXE, en bleu plus sombre que le fond —
        volontairement pas blanche, sinon elle se confond avec le texte ;
     2. des halos lumineux qui dérivent lentement derrière cette texture.
     C'est la lumière qui bouge, pas la trame : plus calme à l'œil et
     bien moins coûteux qu'une grille en rotation. */
  .hero-aura {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  /* Pas de filter: blur() — un radial-gradient à arrêt transparent est
     déjà diffus, et évite de rasteriser un flou de 90px à chaque reprise. */
  .hero-aura span {
    position: absolute;
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    will-change: transform;
  }

  /* Un halo par bord, rien au centre. Version précédente : poussés à
     -19/-22 % avec 0,26 d'alpha, il n'en restait qu'une queue invisible
     sur un fond de luminosité voisine. Ils rentrent maintenant dans le
     cadre, avec un bleu nettement plus clair que le fond, et une
     amplitude assez large pour que le mouvement se voie. */
  .hero-aura span:nth-child(1) {
    width: 52vw;
    max-width: 720px;
    top: -12%;
    right: -12%;
    background: radial-gradient(circle, rgba(163, 203, 246, 0.50) 0%, rgba(140, 184, 232, 0.22) 38%, transparent 70%);
    animation: auraA 19s ease-in-out infinite alternate;
  }

  .hero-aura span:nth-child(2) {
    width: 48vw;
    max-width: 660px;
    /* placé bas à gauche : il éclaire le bord sans passer derrière le titre */
    top: 46%;
    left: -15%;
    background: radial-gradient(circle, rgba(126, 173, 227, 0.42) 0%, rgba(108, 156, 214, 0.18) 40%, transparent 72%);
    animation: auraB 25s ease-in-out infinite alternate;
  }

  @keyframes auraA {
    from { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.72; }
    to   { transform: translate3d(-11%, 13%, 0) scale(1.22); opacity: 1; }
  }

  @keyframes auraB {
    from { transform: translate3d(0, 0, 0) scale(1.16); opacity: 1; }
    to   { transform: translate3d(14%, -12%, 0) scale(0.9); opacity: 0.7; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-aura span { animation: none; }
  }

  /* La composition en 2 colonnes (portrait + photo + carte animée)
     ne tient pas dans les 1140px du gabarit courant : il ne restait
     que 479px au texte, et le titre partait sur 7 lignes. Le hero —
     et lui seul — passe à 1280px. Les autres sections gardent 1140. */
  .hero .container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 0.86fr 1fr;
    gap: 56px;
    align-items: center;
    padding-bottom: 84px;
  }

  .hero-content { text-align: left; }

  /* ---- preuve sociale (avatars empilés + phrase) ---- */
  .hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
  }

  .hero-avatars { display: flex; flex-shrink: 0; }

  .hero-avatars span {
    width: 32px;
    height: 32px;
    margin-left: -10px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: #35618f;
    flex-shrink: 0;
  }

  /* Recadrage sans toucher aux fichiers : on met le point du visage
     (--fx, --fy) au centre de la pastille, puis on zoome autour de lui.
     Ordre des transforms : scale d'abord (autour de transform-origin),
     translate ensuite. */
  .hero-avatars img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: var(--fx) var(--fy);
    transform: translate(calc(50% - var(--fx)), calc(50% - var(--fy))) scale(var(--z));
  }

  .hero-avatars span:first-child { margin-left: 0; }

  .hero-proof p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
  }

  .hero-proof b { color: #fff; font-weight: 700; }

  /* ---- badge ---- */
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 26px;
  }

  .hero-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue-light);
    box-shadow: 0 0 0 4px rgba(111, 159, 224, 0.2);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* ---- titre : graisse légère puis appuyée, comme la référence ---- */
  .hero h1 {
    /* Titre long (2 propositions) : palier plus bas que la référence,
       sinon il déborde sur 4-5 lignes en desktop. */
    font-size: clamp(27px, 3.15vw, 41.76px);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: #fff;
    margin-bottom: 22px;
  }

  .hero h1 strong { font-weight: 700; }

  .hero-subtitle {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 34px;
  }

  /* ---- CTA ---- */
  .hero-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
  }

  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    padding: 8px 8px 8px 26px;
    border-radius: 100px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

  .hero-cta i {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--blue-deep);
    display: grid;
    place-items: center;
    transition: transform 0.25s ease;
  }

  .hero-cta:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    transform: translateY(-2px);
  }

  .hero-cta:hover i { transform: translateX(3px); }

  .hero-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }

  .hero-link svg { transition: transform 0.2s ease; }
  .hero-link:hover svg { transform: translateX(4px); }

  /* ---- composition visuelle ---- */
  .hero-visual { position: relative; }

  .hv-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 16px;
    align-items: stretch;
  }

  .hv-main {
    position: relative;
    margin: 0;
    /* Pas d'aspect-ratio ici : combiné à l'étirement de la grille, il rendait
       l'image plus large que sa colonne et la faisait passer sous les cartes.
       La hauteur vient de la colonne latérale, l'image la remplit en cover. */
    min-height: 380px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
  }

  .hv-main img,
  .hv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Le cadre passe en panoramique sous 560px : sans décalage du point
     de recadrage, le cover centré couperait le visage. */
  .hv-main img { object-position: 50% 20%; }
  .hv-thumb img { object-position: 50% 42%; }

  .hv-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .hv-thumb {
    position: relative;
    margin: 0;
    flex: 1 1 auto;
    min-height: 150px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  }

  /* pastille posée sur une image */
  .hv-label {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 24px);
    padding: 6px 11px;
    border-radius: 100px;
    background: rgba(10, 20, 34, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .hv-label--bottom { top: auto; bottom: 12px; }

  /* cartes chiffres */
  .hv-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--blue-soft);
    color: var(--blue-deep);
    display: grid;
    place-items: center;
    margin-bottom: 10px;
  }

  /* Conteneur de l'animation Lottie. Remplace .hv-icon (30px) : la
     consigne demandait 48-64px, on prend le bas de la fourchette pour
     limiter la croissance de la carte. Padding, rayon et ombre de la
     carte sont inchangés. */
  /* badges flottants */
  .hv-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border-radius: 14px;
    background: #fff;
    color: var(--blue-deep);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
    animation: hvFloat 6s ease-in-out infinite;
  }

  .hv-float .hv-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    margin: 0;
    flex-shrink: 0;
  }

  .hv-float b {
    display: block;
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
  }

  .hv-float span {
    display: block;
    font-size: 9.5px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .hv-float-tr { top: -18px; right: -12px; }
  .hv-float-bl { bottom: -16px; left: -16px; animation-delay: 0.9s; }

  @keyframes hvFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hv-float { animation: none; }
    .hero-badge::before { animation: none; }
  }

  /* ---- bandeau de logos clients ---- */
  .hero-logos {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 32px 0 44px;
  }

  .hero-logos-title {
    text-align: center;
    margin: 0 0 26px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }

  .hero-logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 72px;
    flex-wrap: wrap;
  }

  /* Les logos clients arrivent avec des couleurs, des fonds et des formats
     différents. On les ramène tous à un aplat blanc, comme la référence :
     brightness(0) écrase la couleur, invert(1) la repasse en blanc, et le
     canal alpha (donc la forme du logo) est préservé. */
  .hero-logo {
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.25s ease;
  }

  .hero-logo:hover { opacity: 1; }

  /* Hauteurs réglées à l'œil : un logo carré doit être plus haut qu'un
     logotype horizontal pour peser pareil sur la ligne. */
  .hero-logo--wordmark { height: 42px; }
  .hero-logo--icon { height: 56px; }
  .hero-logo--wide { height: 44px; }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--blue-deep);
    color: var(--white);
    padding: 16px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.2);
    border: none;
    cursor: pointer;
    font-family: inherit;
  }

  .btn-primary:hover {
    background: var(--blue-deep-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(30, 58, 95, 0.3);
  }

  .btn-primary svg {
    transition: transform 0.2s ease;
  }

  .btn-primary:hover svg {
    transform: translateX(3px);
  }

  /* ===== HERO GLOW BUTTON (animated CTA) ===== */
  .glow-btn {
    --glow-hue: 214deg;
    --glow: hsl(var(--glow-hue), 100%, 72%);
    --glow-50: hsla(var(--glow-hue), 100%, 72%, 0.5);
    --glow-30: hsla(var(--glow-hue), 100%, 72%, 0.3);
    --glow-20: hsla(var(--glow-hue), 100%, 72%, 0.2);
    --glow-80: hsla(var(--glow-hue), 100%, 72%, 0.8);
    --gb-pad: 4px;
    --gb-radius: 16px;
    --gb-trans: 0.4s;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 30px;
    border-radius: var(--gb-radius);
    color: #ffffff;
    background: linear-gradient(180deg, #21436b 0%, #15263c 100%);
    border: 1px solid rgba(111, 159, 224, 0.25);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.18),
      inset 0 2px 3px rgba(255, 255, 255, 0.08),
      0 10px 24px rgba(20, 38, 60, 0.28);
    transition: box-shadow var(--gb-trans), border-color var(--gb-trans), background-color var(--gb-trans);
    z-index: 0;
  }

  /* 3D rim / outer shadow */
  .glow-btn::before {
    content: "";
    position: absolute;
    top: calc(0px - var(--gb-pad));
    left: calc(0px - var(--gb-pad));
    width: calc(100% + var(--gb-pad) * 2);
    height: calc(100% + var(--gb-pad) * 2);
    border-radius: calc(var(--gb-radius) + var(--gb-pad));
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(0deg, rgba(20, 38, 60, 0.25), rgba(20, 38, 60, 0.55));
    transition: box-shadow var(--gb-trans), filter var(--gb-trans);
    box-shadow:
      1px 1px 1px rgba(255, 255, 255, 0.12),
      2px 2px 2px rgba(255, 255, 255, 0.06),
      -1px -1px 1px rgba(30, 58, 95, 0.12);
  }

  /* Highlight glow rising from bottom */
  .glow-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(0deg, #ffffff, var(--glow), var(--glow-50) 8%, transparent 32%);
    opacity: 0;
    -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
    mask-image: linear-gradient(0deg, #fff, transparent);
    transition: opacity var(--gb-trans), filter var(--gb-trans);
  }

  /* Sparkles icon */
  .glow-btn-svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: #aecbf2;
    filter: drop-shadow(0 0 2px rgba(174, 203, 242, 0.7));
    animation: gb-flicker 2.4s linear infinite;
    animation-delay: 0.5s;
    transition: fill var(--gb-trans), filter var(--gb-trans);
  }

  @keyframes gb-flicker {
    50% { opacity: 0.35; }
  }

  .glow-btn-text {
    position: relative;
    display: inline-flex;
    white-space: nowrap;
  }

  .glow-letter {
    display: inline;
    white-space: pre;
    color: rgba(255, 255, 255, 0.62);
    animation: gb-letter 2.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.05s);
    transition: color var(--gb-trans), text-shadow var(--gb-trans);
  }

  @keyframes gb-letter {
    50% {
      color: #ffffff;
      text-shadow: 0 0 6px var(--glow-50);
    }
  }

  /* Hover */
  .glow-btn:hover {
    border-color: hsla(var(--glow-hue), 100%, 80%, 0.5);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.22),
      0 12px 30px rgba(20, 38, 60, 0.35),
      0 0 24px var(--glow-30);
  }

  .glow-btn:hover::after {
    opacity: 0.9;
  }

  .glow-btn:hover .glow-btn-svg {
    fill: #ffffff;
    filter: drop-shadow(0 0 6px var(--glow));
    animation: none;
  }

  .glow-btn:hover .glow-letter {
    color: #ffffff;
  }

  /* Active / pressed */
  .glow-btn:active {
    border-color: hsla(var(--glow-hue), 100%, 82%, 0.8);
    background: linear-gradient(180deg, #1c3a5e 0%, #112033 100%);
    transform: translateY(1px);
  }

  .glow-btn:active::after {
    opacity: 1;
    filter: brightness(1.5);
  }

  /* Focus ring (accessibility) */
  .glow-btn:focus-visible {
    outline: 3px solid var(--glow-30);
    outline-offset: 3px;
  }

  /* Variante compacte — bouton de la nav */
  .glow-btn-sm {
    padding: 9px 18px;
    font-size: 13.5px;
    --gb-radius: 10px;
    gap: 7px;
  }
  .glow-btn-sm .glow-btn-svg { width: 16px; height: 16px; }

  .hero-trust {
    margin-top: 28px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }

  .hero-trust-divider {
    width: 4px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
    opacity: 0.4;
  }

  /* ===== SECTION COMMON ===== */
  section {
    padding: 100px 0;
    position: relative;
  }

  .section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
  }

  .section-eyebrow {
    display: inline-block;
    color: var(--blue-light);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  .section-header h2 {
    font-size: clamp(30px, 4vw, 44px);
    margin-bottom: 20px;
  }

  .section-header p {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ===== SOLUTION ===== */
  .solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
  }

  .solution-step {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .solution-step h3, .solution-step p { width: 100%; }

  .solution-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-light);
  }

  .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-light) 100%);
    color: var(--white);
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    font-size: 22px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.2);
  }

  .solution-step h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .solution-step p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
  }

  .solution-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 28px;
    height: 2px;
    background: var(--border);
    transform: translateY(-50%);
    z-index: 0;
  }

  .solution-step:last-child::after {
    display: none;
  }

  /* ----- Mini-animations des étapes ----- */
  .sol-media {
    margin-top: auto;
    width: 100%;
    height: 134px;
    background: var(--blue-soft);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
  }
  .solution-step p { margin-bottom: 24px; }

  /* 1 — génération de texte (lignes qui s'écrivent) */
  .sol-lines { width: 100%; display: flex; flex-direction: column; gap: 12px; }
  .sol-lines span {
    height: 9px; border-radius: 5px;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue-light));
    position: relative; overflow: hidden;
  }
  .sol-lines span:nth-child(1) { width: 94%; }
  .sol-lines span:nth-child(2) { width: 80%; }
  .sol-lines span:nth-child(3) { width: 62%; }
  .sol-lines span::after {
    content: ''; position: absolute; inset: 0;
    background: var(--blue-soft);
    transform-origin: right;
    animation: solReveal 4s ease-in-out infinite;
  }
  .sol-lines span:nth-child(2)::after { animation-delay: 0.45s; }
  .sol-lines span:nth-child(3)::after { animation-delay: 0.9s; }
  @keyframes solReveal {
    0% { transform: scaleX(1); }
    32%, 80% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }

  /* 2 — validation (bouton + curseur) */
  .sol-validate {
    position: relative; z-index: 1;
    background: var(--blue-deep); color: #fff; border: none;
    padding: 11px 22px; border-radius: 10px; font-family: inherit;
    font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; gap: 7px;
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.22);
    animation: solPress 3.2s ease-in-out infinite;
  }
  @keyframes solPress {
    0%, 58% { transform: scale(1); }
    66% { transform: scale(0.92); box-shadow: 0 2px 8px rgba(30, 58, 95, 0.25), 0 0 0 7px rgba(111, 159, 224, 0.2); }
    74%, 100% { transform: scale(1); }
  }
  .sol-cursor {
    position: absolute; left: 56%; top: 52%;
    width: 22px; height: 22px; color: var(--blue-deep); z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
    animation: solCursor 3.2s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes solCursor {
    0% { transform: translate(34px, 26px); opacity: 0; }
    20% { opacity: 1; }
    58% { transform: translate(0, 0); opacity: 1; }
    66% { transform: translate(0, 2px) scale(0.84); }
    74% { transform: translate(0, 0) scale(1); }
    90% { opacity: 1; }
    100% { transform: translate(34px, 26px); opacity: 0; }
  }

  /* 3 — publication régulière (grille calendrier) */
  .sol-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    width: 100%;
    max-width: 200px;
  }
  .sol-grid span {
    aspect-ratio: 1;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.07);
  }
  .sol-grid span.on { animation: solCell 4s ease-in-out infinite; }
  @keyframes solCell {
    0%, 100% { background-color: #ffffff; border-color: rgba(30, 58, 95, 0.07); }
    45%, 55% { background-color: var(--blue-light); border-color: var(--blue-light); }
  }

  @media (prefers-reduced-motion: reduce) {
    .sol-lines span::after { animation: none; transform: scaleX(0); }
    .sol-validate, .sol-grid span.on { animation: none; }
    .sol-grid span.on { background-color: var(--blue-light); border-color: var(--blue-light); }
    .sol-cursor { display: none; }
  }

  /* ===== APERÇU — grille de types de contenu ===== */
  .preview {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }

  .preview-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .preview-card:hover {
    transform: translateY(-5px);
    border-color: var(--blue-light);
    box-shadow: var(--shadow-md);
  }

  .preview-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-deep), var(--blue-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.15);
  }

  .preview-cat {
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--blue-light);
    margin-bottom: 10px;
  }

  .preview-text {
    font-size: 16px; font-weight: 600; color: var(--text);
    line-height: 1.42; margin-bottom: 16px; flex: 1;
  }

  .preview-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-muted);
    padding-top: 14px; border-top: 1px solid var(--border);
  }

  .preview-meta .in {
    width: 20px; height: 20px; border-radius: 5px;
    background: #0a66c2; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
  }

  /* ===== SERVICES (3 piliers) ===== */
  .services {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .svc-card {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease;
    overflow: hidden;
  }
  .svc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue-light));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .svc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(111, 159, 224, 0.4);
  }
  .svc-card:hover::before { transform: scaleX(1); }
  .svc-icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--blue-deep), var(--blue-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.18);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .svc-card:hover .svc-icon { transform: scale(1.06) rotate(-3deg); }
  .svc-card h3 { font-size: 21px; margin-bottom: 10px; }
  .svc-tagline { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
  .svc-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
    margin-top: auto;
  }
  .svc-list li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14.5px; color: var(--text); line-height: 1.45; font-weight: 500;
  }
  .svc-list .check {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
    background: var(--blue-soft); color: var(--blue-deep);
    display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
  }
  .svc-list .check svg { width: 13px; height: 13px; }

  @media (max-width: 880px) {
    .services-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  }

  /* ===== PRICING ===== */
  .pricing {
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
  }
  .pricing::before {
    content: '';
    position: absolute;
    top: -200px; right: -180px;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(111, 159, 224, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .pricing::after {
    content: '';
    position: absolute;
    bottom: -240px; left: -180px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(30, 58, 95, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

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

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 480px;
    margin: 0 auto;
  }

  .pricing-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    overflow: hidden;
  }
  .pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(30, 58, 95, 0.14);
    border-color: rgba(111, 159, 224, 0.4);
  }

  .pricing-card.featured {
    background: linear-gradient(165deg, #1e3a5f 0%, #15273f 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 24px 50px rgba(30, 58, 95, 0.25);
  }
  .pricing-card.featured::before {
    content: '';
    position: absolute;
    top: -120px; right: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(111, 159, 224, 0.22) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .pricing-card.featured:hover {
    box-shadow: 0 36px 70px rgba(30, 58, 95, 0.4);
  }

  .pricing-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-light);
    color: #15273f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(111, 159, 224, 0.35);
  }
  .pricing-badge svg { width: 12px; height: 12px; }

  .pricing-head {
    position: relative;
    z-index: 1;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
  }
  .pricing-card.featured .pricing-head { border-bottom-color: rgba(255, 255, 255, 0.14); }

  .pricing-eyebrow {
    display: inline-block;
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-light);
    margin-bottom: 12px;
  }
  .pricing-card.featured .pricing-eyebrow { color: #bcd0ec; }

  .pricing-card h3 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--blue-deep);
  }
  .pricing-card.featured h3 { color: #fff; }

  .pricing-desc {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .pricing-card.featured .pricing-desc { color: rgba(255, 255, 255, 0.78); }

  .pricing-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .pricing-price .amount {
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: var(--blue-deep);
    letter-spacing: -0.02em;
  }
  .pricing-card.featured .pricing-price .amount { color: #fff; }
  .pricing-price .period {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
  }
  .pricing-card.featured .pricing-price .period { color: #bcd0ec; }
  .pricing-price .ht {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
  }
  .pricing-card.featured .pricing-price .ht { color: rgba(255, 255, 255, 0.55); }

  .pricing-features {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    position: relative;
    z-index: 1;
    flex: 1;
  }
  .pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.45;
  }
  .pricing-card.featured .pricing-features li { color: rgba(255, 255, 255, 0.9); }

  .pricing-features .check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--blue-soft);
    color: var(--blue-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
  }
  .pricing-card.featured .pricing-features .check {
    background: rgba(111, 159, 224, 0.22);
    color: #bcd0ec;
  }
  .pricing-features .check svg { width: 13px; height: 13px; }
  .pricing-features li b { font-weight: 700; color: var(--blue-deep); }
  .pricing-card.featured .pricing-features li b { color: #fff; }

  .pricing-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 11px;
    background: var(--white);
    color: var(--blue-deep);
    border: 1.5px solid var(--border);
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
  }
  .pricing-cta:hover {
    border-color: var(--blue-deep);
    background: var(--blue-soft);
    transform: translateY(-2px);
  }
  .pricing-cta svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
  .pricing-cta:hover svg { transform: translateX(3px); }

  .pricing-card.featured .pricing-cta {
    background: #fff;
    color: var(--blue-deep);
    border-color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }
  .pricing-card.featured .pricing-cta:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
  }

  .pricing-trust {
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--text-muted);
  }
  .pricing-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .pricing-trust-item svg {
    color: var(--blue-light);
    flex-shrink: 0;
  }

  .pricing-custom {
    margin-top: 36px;
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 16px;
    padding: 20px 28px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    transition: border-color 0.3s ease, background 0.3s ease;
  }
  .pricing-custom:hover {
    border-color: var(--blue-light);
    background: var(--blue-soft);
  }
  .pricing-custom-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pricing-custom-text b {
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-deep);
  }
  .pricing-custom-text span {
    font-size: 13.5px;
    color: var(--text-muted);
  }
  .pricing-custom-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue-deep);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .pricing-custom-link svg { transition: transform 0.2s ease; }
  .pricing-custom-link:hover svg { transform: translateX(3px); }

  @media (max-width: 760px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
    .pricing-custom { flex-direction: column; align-items: flex-start; }
    .pricing-trust { gap: 16px; }
  }

  /* ===== WHY ===== */
  .why {
    background: linear-gradient(180deg, var(--white) 0%, var(--blue-soft) 100%);
    border-top: 1px solid var(--border);
  }

  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .why-card {
    background: var(--white);
    border-radius: 18px;
    padding: 36px 30px;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .why-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-light) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: var(--white);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.15);
  }

  .why-card h3 {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .why-card p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 24px;
  }

  /* ----- Mini-animations "Pourquoi" (réutilise .sol-media) ----- */
  /* 1 — Présence constante : pastilles qui s'allument en vague régulière */
  .why-line {
    position: relative; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px;
  }
  .why-line::before {
    content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
    transform: translateY(-50%); height: 2px; background: rgba(30, 58, 95, 0.12);
  }
  .why-line span {
    position: relative; z-index: 1;
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: 2px solid rgba(30, 58, 95, 0.18);
    animation: whyDot 3s ease-in-out infinite;
  }
  .why-line span:nth-child(2) { animation-delay: 0.25s; }
  .why-line span:nth-child(3) { animation-delay: 0.5s; }
  .why-line span:nth-child(4) { animation-delay: 0.75s; }
  .why-line span:nth-child(5) { animation-delay: 1s; }
  .why-line span:nth-child(6) { animation-delay: 1.25s; }
  @keyframes whyDot {
    0%, 100% { background: #fff; border-color: rgba(30, 58, 95, 0.18); transform: scale(1); }
    35%, 55% { background: var(--blue-deep); border-color: var(--blue-deep); transform: scale(1.18); box-shadow: 0 0 0 5px rgba(30, 58, 95, 0.08); }
  }

  /* 2 — Zéro charge de travail : jauge de temps presque vide */
  .why-gauge { position: relative; width: 96px; height: 96px; }
  .why-gauge svg { width: 100%; height: 100%; display: block; }
  .why-gauge-arc {
    stroke-dasharray: 289; stroke-dashoffset: 289;
    animation: whyGauge 3.6s ease-in-out infinite;
  }
  @keyframes whyGauge {
    0% { stroke-dashoffset: 289; }
    45%, 80% { stroke-dashoffset: 251; }
    100% { stroke-dashoffset: 289; }
  }
  .why-gauge-label {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .why-gauge-label b { font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 800; color: var(--blue-deep); line-height: 1; }
  .why-gauge-label span { font-size: 9.5px; color: var(--text-muted); margin-top: 3px; }

  /* 3 — Contrôle total : interrupteur que vous pilotez */
  .why-control { display: flex; align-items: center; gap: 14px; }
  .why-control-label { font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 700; color: var(--blue-deep); }
  .why-switch {
    width: 52px; height: 28px; border-radius: 100px;
    background: #cfdae8; position: relative;
    animation: whySwitchBg 3.2s ease-in-out infinite;
  }
  .why-knob {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
    animation: whyKnob 3.2s ease-in-out infinite;
  }
  @keyframes whySwitchBg {
    0%, 28% { background: #cfdae8; }
    44%, 86% { background: var(--blue-deep); }
    100% { background: #cfdae8; }
  }
  @keyframes whyKnob {
    0%, 28% { left: 3px; }
    44%, 86% { left: 27px; }
    100% { left: 3px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .why-line span, .why-gauge-arc, .why-switch, .why-knob { animation: none; }
    .why-gauge-arc { stroke-dashoffset: 251; }
    .why-switch { background: var(--blue-deep); }
    .why-knob { left: 27px; }
  }

  /* ===== MANIFESTO — mots qui s'illuminent au scroll ===== */
  .manifesto {
    --mf-start: 50vh;
    --mf-space: 30vh;
    --mf-count: 7;
    --mf-accent: #1e3a5f;
    --mf-dimmed: rgba(30, 58, 95, 0.13);
    position: relative;
    padding: 0;
    background: var(--bg);
    overflow-x: clip;
  }

  .mf-sr {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; margin: -1px; padding: 0;
  }

  .manifesto::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    --size: 46px;
    --line: rgba(30, 58, 95, 0.05);
    background:
      linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px) 0 0 / var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 45%, #000);
    mask: linear-gradient(-20deg, transparent 45%, #000);
    pointer-events: none;
  }

  .mf-header {
    position: sticky;
    top: calc((var(--mf-count) - 1) * -1lh);
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5.6vw, 4.6rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    display: flex;
    align-items: start;
    width: 100%;
    margin-bottom: var(--mf-space);
    z-index: 1;
  }

  .mf-lead {
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: center;
    gap: 0 0.3em;
    padding-top: calc(var(--mf-start) - 0.5lh);
  }

  .mf-static {
    position: sticky;
    top: calc(var(--mf-start) - 0.5lh);
    color: var(--blue-deep);
    white-space: nowrap;
  }

  .mf-words { list-style: none; margin: 0; padding: 0; }

  .mf-words li {
    white-space: nowrap;
    background:
      linear-gradient(
        180deg,
        var(--mf-dimmed) 0 calc(var(--mf-start) - 0.5lh),
        var(--mf-accent) calc(var(--mf-start) - 0.5lh) calc(var(--mf-start) + 0.5lh),
        var(--mf-dimmed) calc(var(--mf-start) + 0.5lh)
      );
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* panneau révélé */
  .mf-panel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mf-panel::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(140deg, #1e3a5f 0%, #152a45 100%);
    border-radius: 26px 26px 0 0;
  }
  .mf-panel-inner {
    position: relative;
    text-align: center;
    color: #fff;
    padding: 40px 24px;
    max-width: 720px;
  }
  .mf-panel-inner h2 {
    color: #fff;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.12;
    margin-bottom: 18px;
  }
  .mf-panel-inner p {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 32px;
  }
  .mf-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: var(--blue-deep);
    padding: 16px 32px; border-radius: 12px;
    font-family: inherit; font-weight: 700; font-size: 16px;
    border: none; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .mf-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32); }
  .mf-cta svg { transition: transform 0.2s ease; }
  .mf-cta:hover svg { transform: translateX(3px); }

  /* Progressive enhancement (Chrome/Edge) : panneau qui grandit + texte révélé */
  @supports (animation-timeline: view()) {
    .mf-panel { view-timeline: --mfPanel; }
    .mf-panel::before {
      transform-origin: 50% 100%;
      scale: 0.9;
      animation: mfGrow both ease-in-out;
      animation-timeline: --mfPanel;
      animation-range: entry 60%;
    }
    .mf-panel-inner {
      animation: mfReveal both ease-in-out;
      animation-timeline: --mfPanel;
      animation-range: entry 55%;
    }
    @keyframes mfGrow { to { scale: 1; border-radius: 0; } }
    @keyframes mfReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
  }

  @media (max-width: 700px) {
    .mf-header { font-size: clamp(1.7rem, 8.5vw, 2.7rem); }
    .mf-lead { gap: 0 0.22em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mf-panel::before { scale: 1; border-radius: 0; }
    .mf-panel-inner { opacity: 1; transform: none; }
  }

  /* ===== FINAL CTA ===== */
  .cta-final {
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-deep-dark) 100%);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .cta-final::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(111, 159, 224, 0.2) 0%, transparent 70%);
    border-radius: 50%;
  }

  .cta-final::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(111, 159, 224, 0.12) 0%, transparent 70%);
    border-radius: 50%;
  }

  .cta-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
  }

  .cta-final h2 {
    color: var(--white);
    font-size: clamp(30px, 4vw, 44px);
    margin-bottom: 20px;
  }

  .cta-final p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    line-height: 1.6;
  }

  .btn-cta-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    color: var(--blue-deep);
    padding: 18px 36px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    transition: all 0.25s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    font-family: inherit;
  }

  .btn-cta-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  }

  .btn-cta-white svg {
    transition: transform 0.2s ease;
  }

  .btn-cta-white:hover svg {
    transform: translateX(3px);
  }

  .cta-contact {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
  }

  .cta-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .cta-contact-item:hover {
    color: var(--white);
  }

  .cta-contact-item svg {
    opacity: 0.7;
  }

  /* ===== HORIZONTAL SCROLL (cas d'usage) ===== */
  .carousel-section {
    background: var(--white);
    border-top: 1px solid var(--border);
  }

  .ch-track {
    position: relative;
    /* hauteur fixée par le JS = 100vh + distance horizontale */
  }

  .ch-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: 72px; /* laisse la place de la nav fixe */
  }

  .carousel-head {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto 24px;
    padding: 0 24px;
    flex: 0 0 auto;
  }

  .carousel-head .section-eyebrow { margin-bottom: 14px; }

  .carousel-head h2 {
    font-size: clamp(28px, 4vw, 44px);
    margin-bottom: 16px;
    max-width: 700px;
  }

  .carousel-head p {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 600px;
    line-height: 1.6;
  }

  .ch-viewport {
    width: 100%;
    overflow: hidden;
  }

  .ch-row {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 12px 24px;
    will-change: transform;
  }

  @media (min-width: 1189px) {
    .ch-row {
      padding-left: calc((100% - 1140px) / 2 + 24px);
      padding-right: calc((100% - 1140px) / 2 + 24px);
    }
  }

  .ch-progress {
    max-width: 1140px;
    width: 100%;
    margin: 28px auto 0;
    padding: 0 24px;
    flex: 0 0 auto;
  }

  .ch-progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }

  .ch-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue-light));
    border-radius: 2px;
  }

  .acard {
    position: relative;
    flex: 0 0 auto;
    /* Hauteur pilotée par le JS (--acard-h) ; sinon repli adaptatif. Largeur = ratio portrait */
    --card-h: var(--acard-h, clamp(260px, calc(100vh - 360px), 460px));
    height: var(--card-h);
    width: calc(var(--card-h) * 0.7);
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(155deg, #25496f 0%, #0f1f33 100%);
    box-shadow: var(--shadow-md);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: none;
    padding: 0;
    text-align: left;
    font-family: inherit;
  }

  .acard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

  .acard-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.7s ease;
  }

  .acard:hover .acard-img { transform: scale(1.06); }

  .acard-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(10, 20, 35, 0.78) 0%, rgba(10, 20, 35, 0.3) 38%, rgba(10, 20, 35, 0.15) 70%, rgba(10, 20, 35, 0.45) 100%);
  }

  .acard-content {
    position: relative;
    z-index: 3;
    padding: 26px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .acard-cat {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .acard-title {
    color: #ffffff;
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.22;
    max-width: 92%;
  }

  .acard-teaser {
    display: -webkit-box;
    max-width: 95%;
    margin: 13px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .acard-icon {
    margin-top: auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

  /* Modal */
  .acard-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 20px;
    overflow-y: auto;
    background: rgba(15, 25, 40, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .acard-modal.open { opacity: 1; pointer-events: auto; }

  .acard-modal-card {
    position: relative;
    background: #fff;
    border-radius: 26px;
    max-width: 720px;
    width: 100%;
    overflow: hidden;
    transform: translateY(40px) scale(0.97);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  }

  .acard-modal.open .acard-modal-card { transform: translateY(0) scale(1); }

  .acard-modal-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    background: linear-gradient(155deg, #25496f 0%, #0f1f33 100%);
    display: block;
  }

  .acard-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: all 0.2s ease;
  }

  .acard-modal-close:hover { background: #fff; transform: rotate(90deg); }

  .acard-modal-body { padding: 34px 40px 42px; }

  .acard-modal-cat {
    color: var(--blue-light);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .acard-modal-title {
    color: var(--blue-deep);
    font-size: clamp(25px, 4vw, 36px);
    font-weight: 800;
    margin-bottom: 22px;
    line-height: 1.18;
  }

  .acard-modal-body .acard-modal-client {
    margin: -10px 0 22px;
    padding-left: 14px;
    border-left: 3px solid var(--blue-light);
    color: #65758a;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
  }

  .acard-modal-body p {
    color: #5a6478;
    font-size: 16.5px;
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .acard-modal-body p:last-child { margin-bottom: 0; }

  @media (max-height: 760px) and (min-width: 881px) {
    .acard-teaser { display: none; }
    .acard-title { font-size: 20px; }
  }

  .acard-modal-body strong { color: var(--blue-deep); font-weight: 700; }

  body.modal-open { overflow: hidden; }

  /* ===== CONTACT SECTION ===== */
  .contact {
    background: linear-gradient(180deg, var(--blue-soft) 0%, var(--white) 60%);
    border-top: 1px solid var(--border);
  }

  .contact-toggle {
    display: flex;
    width: fit-content;
    gap: 4px;
    padding: 5px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
    margin: 0 auto 44px;
  }

  .toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
  }

  .toggle-btn:hover {
    color: var(--blue-deep);
  }

  .toggle-btn.active {
    background: var(--blue-deep);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.22);
  }

  .toggle-btn svg {
    width: 17px;
    height: 17px;
  }

  .contact-panel {
    animation: fadeInPanel 0.5s ease;
  }

  @keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
    align-items: start;
  }

  /* Form card */
  .form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 38px;
    box-shadow: var(--shadow-md);
  }

  .form-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .form-sub {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 28px;
  }

  .hp-field {
    position: absolute;
    left: -9999px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
  }

  .form-group label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
  }

  .form-group input,
  .form-group textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 15px;
    transition: all 0.2s ease;
    width: 100%;
    resize: vertical;
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: #9aa4b6;
  }

  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: var(--blue-light);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(111, 159, 224, 0.14);
  }

  .form-submit {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    font-size: 16px;
  }

  /* Success state */
  .form-success {
    text-align: center;
    padding: 30px 20px;
    animation: fadeInPanel 0.4s ease;
  }

  .form-success .success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .form-success h3 {
    color: var(--blue-deep);
    margin-bottom: 8px;
  }

  .form-success p {
    color: var(--text-muted);
    font-size: 15px;
  }

  /* Info column */
  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    text-decoration: none;
    transition: all 0.25s ease;
  }

  a.info-card:hover {
    border-color: var(--blue-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .info-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .info-title {
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-deep);
    margin-bottom: 3px;
  }

  .info-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--blue-light);
  }

  .guarantee-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .guarantee-list li {
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .guarantee-list li svg {
    color: #16a34a;
    flex-shrink: 0;
  }

  /* Prise de rendez-vous QENIVO */
  .booking-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
  }

  .booking-intro {
    padding: 30px 36px 24px;
    border-bottom: 1px solid var(--border);
  }

  .booking-intro h3 {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .booking-intro p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 18px;
  }

  .call-badges {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .call-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue-deep);
  }

  .call-badge svg {
    color: var(--blue-light);
  }

  .booking-launch {
    display: grid;
    place-items: center;
    min-height: 290px;
    padding: 38px;
    text-align: center;
  }

  .booking-launch > div { max-width: 510px; }
  .booking-launch h4 { margin: 0 0 10px; font-size: 24px; }
  .booking-launch p { margin: 0 0 22px; color: var(--text-muted); line-height: 1.65; }

  body.qb-lock { overflow: hidden; }
  .qb[hidden] { display: none; }

  .qb {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 22px;
  }

  .qb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 14, 30, .72);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .22s ease;
  }

  .qb__dialog {
    --qb-navy: #0a1f3c;
    --qb-blue: #3d7fc4;
    --qb-pale: #9ec9f0;
    position: relative;
    width: min(1120px, 100%);
    max-height: min(900px, calc(100vh - 44px));
    overflow: auto;
    padding: 0;
    border: 1px solid #dce6f2;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(3, 14, 30, .32);
    color: var(--qb-navy);
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity .22s ease, transform .22s ease;
  }

  .qb__layout { display: grid; grid-template-columns: minmax(350px, .78fr) minmax(0, 1.22fr); min-height: 680px; }

  .qb__aside {
    position: relative;
    padding: 30px;
    overflow: hidden;
    background: var(--qb-navy);
    color: #fff;
  }

  .qb__aside::after {
    content: '';
    position: absolute;
    right: -100px;
    bottom: -115px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(158, 201, 240, .16);
    border-radius: 50%;
    pointer-events: none;
  }

  .qb__brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
  .qb__brand > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #fff; }
  .qb__brand img { width: 31px; height: 31px; object-fit: contain; }
  .qb__brand b { color: #fff; font-size: 17px; letter-spacing: .12em; }

  .qb__visual { position: relative; z-index: 1; height: 145px; margin: 22px 0 20px; overflow: hidden; border-radius: 19px; }
  .qb__visual::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); border-radius: inherit; pointer-events: none; }
  .qb__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

  .qb__aside-eyebrow { position: relative; z-index: 1; color: var(--qb-pale); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
  .qb__aside h3 { position: relative; z-index: 1; margin: 8px 0 9px; color: #fff; font-size: clamp(25px, 2.25vw, 30px); line-height: 1.08; letter-spacing: -.04em; }
  .qb__aside > p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.67); font-size: 12.5px; line-height: 1.52; }

  .qb__agenda { position: relative; z-index: 1; display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
  .qb__agenda li { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 11px; border: 1px solid rgba(158,201,240,.16); border-radius: 13px; background: rgba(255,255,255,.055); }
  .qb__agenda li > span { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 9px; background: rgba(158,201,240,.14); color: var(--qb-pale); font-size: 10px; font-weight: 800; }
  .qb__agenda div { min-width: 0; }
  .qb__agenda b, .qb__agenda small { display: block; }
  .qb__agenda b { color: #fff; font-size: 12.5px; }
  .qb__agenda small { margin-top: 2px; color: rgba(255,255,255,.58); font-size: 10.5px; line-height: 1.3; }

  .qb__booking { min-width: 0; padding: clamp(34px, 4vw, 48px); }

  .qb.is-open .qb__backdrop,
  .qb.is-open .qb__dialog { opacity: 1; }
  .qb.is-open .qb__dialog { transform: none; }

  .qb__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #dce6f2;
    border-radius: 50%;
    background: #f5f8fc;
    color: var(--qb-navy);
    cursor: pointer;
    z-index: 4;
  }

  .qb__close svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .qb__head { padding-right: 45px; }
  .qb__eyebrow { color: var(--qb-blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .qb__head h2 { margin: 10px 0 7px; color: var(--qb-navy); font-size: clamp(28px, 4vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
  .qb__head p { margin: 0; color: #667085; font-size: 15px; }

  .qb__progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 27px 0 24px; padding: 0; list-style: none; }
  .qb__progress li { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; color: #7a8799; }
  .qb__progress li:not(:last-child)::after { content: ''; position: absolute; top: 17px; right: 11px; width: clamp(18px, 3.2vw, 40px); height: 1px; background: #dce5ef; }
  .qb__progress span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #eef2f7; color: #65758a; font-size: 13px; font-weight: 800; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
  .qb__progress b { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .qb__progress li.is-active { color: var(--qb-navy); }
  .qb__progress li.is-active span { background: var(--qb-blue); color: #fff; box-shadow: 0 0 0 5px rgba(61,127,196,.14); }
  .qb__progress li.is-done { color: var(--qb-blue); }
  .qb__progress li.is-done span { background: #e8f2fb; color: var(--qb-blue); }
  .qb__progress li.is-done span::before { content: '✓'; }
  .qb__progress li.is-done span { font-size: 0; }
  .qb__progress li.is-done span::before { font-size: 13px; }

  .qb__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
  .qb__facts span { padding: 8px 12px; border: 1px solid #dce7f3; border-radius: 999px; background: #f4f8fd; color: #42526a; font-size: 12px; font-weight: 650; }
  .qb__step > h3, .qb__slot-head h3 { margin: 0 0 13px; color: var(--qb-navy); font-size: 15px; }

  .qb__calendar { margin-bottom: 26px; overflow: hidden; border: 1px solid #dce6f2; border-radius: 18px; background: #fff; }
  .qb__calendar-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid #e4ebf3; }
  .qb__calendar-head strong { color: var(--qb-navy); font-size: 15px; font-weight: 750; text-transform: capitalize; }
  .qb__calendar-head > div { display: flex; gap: 6px; }
  .qb__calendar-head button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0 0 2px; border: 1px solid #dce6f2; border-radius: 10px; background: #f7faff; color: var(--qb-navy); font: inherit; font-size: 23px; line-height: 1; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
  .qb__calendar-head button:hover:not(:disabled) { border-color: var(--qb-blue); background: var(--qb-blue); color: #fff; }
  .qb__calendar-head button:disabled { opacity: .3; cursor: not-allowed; }
  .qb__weekdays, .qb__dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .qb__weekdays { padding: 8px 9px 3px; }
  .qb__weekdays span { padding: 5px 0; color: #7b8797; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
  .qb__dates { gap: 5px; padding: 5px 9px 10px; }
  .qb__date-empty { min-height: 43px; }
  .qb__date { position: relative; display: grid; place-items: center; min-width: 0; min-height: 43px; padding: 0; border: 1px solid transparent; border-radius: 11px; background: #f4f7fb; color: var(--qb-navy); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
  .qb__date:hover:not(:disabled) { border-color: var(--qb-blue); background: #eaf3fc; transform: translateY(-1px); }
  .qb__date.is-selected { border-color: var(--qb-blue); background: var(--qb-blue); color: #fff; box-shadow: 0 5px 12px rgba(61,127,196,.22); }
  .qb__date.is-today:not(.is-selected)::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--qb-blue); }
  .qb__date:disabled { background: transparent; color: #c0c7d1; cursor: not-allowed; }
  .qb__date.is-weekend:disabled { color: #d3d8df; }

  .qb__slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .qb__slot-head > span { color: #667085; font-size: 12px; text-transform: capitalize; }
  .qb__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; min-height: 54px; }
  .qb__slot { min-height: 48px; border: 1px solid #cfdceb; border-radius: 12px; background: #f7faff; color: var(--qb-navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
  .qb__slot:hover { border-color: var(--qb-blue); background: var(--qb-blue); color: #fff; }
  .qb__notice { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px solid #dce6f2; border-radius: 14px; background: #f6f9fd; color: #5a6478; font-size: 14px; line-height: 1.55; text-align: center; }
  .qb__loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; color: #667085; font-size: 13px; }
  .qb__loading span { width: 18px; height: 18px; border: 2px solid #d7e1ec; border-top-color: var(--qb-blue); border-radius: 50%; animation: spin .8s linear infinite; }

  .qb__back { margin: 24px 0 16px; padding: 0; border: 0; background: none; color: var(--qb-blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  .qb__choice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 17px 19px; border: 1px solid #d9e5f2; border-radius: 15px; background: #f3f8fd; }
  .qb__choice span { color: #526174; font-size: 14px; text-transform: capitalize; }
  .qb__choice b { color: var(--qb-navy); font-size: 15px; white-space: nowrap; }
  .qb__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .qb__form-grid label { display: block; }
  .qb__form-grid label > span { display: block; margin-bottom: 7px; color: var(--qb-navy); font-size: 12px; font-weight: 700; }
  .qb__form-grid small { color: #7c8798; font-weight: 500; }
  .qb__form-grid input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #ccd9e7; border-radius: 11px; outline: none; background: #fff; color: var(--qb-navy); font: inherit; font-size: 15px; }
  .qb__form-grid input:focus { border-color: var(--qb-blue); box-shadow: 0 0 0 3px rgba(61,127,196,.13); }
  .qb__wide { grid-column: 1 / -1; }
  .qb__trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
  .qb__error { margin: 15px 0 0; padding: 12px 14px; border-radius: 10px; background: #fff1f1; color: #a52a2a; font-size: 13px; }
  .qb__submit, .qb__done { width: 100%; min-height: 52px; margin-top: 20px; border: 0; border-radius: 12px; background: var(--qb-navy); color: #fff; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; transition: background .18s ease, transform .18s ease; }
  .qb__submit:hover, .qb__done:hover { background: var(--qb-blue); transform: translateY(-1px); }
  .qb__submit:disabled { cursor: wait; opacity: .65; transform: none; }
  .qb__privacy { margin: 11px 0 0; color: #7b8796; font-size: 11px; text-align: center; }

  .qb__success { padding: 38px 0 12px; text-align: center; }
  .qb__success-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%; background: #e9f7ee; color: #16803b; font-size: 29px; font-weight: 800; }
  .qb__success h3 { margin: 0 0 13px; color: var(--qb-navy); font-size: 27px; }
  .qb__success p { max-width: 520px; margin: 7px auto; color: #5f6d80; line-height: 1.6; }
  .qb__done { max-width: 280px; }

  .qb button:focus-visible { outline: 3px solid rgba(61,127,196,.35); outline-offset: 2px; }

  @media (max-width: 860px) {
    .qb__dialog { width: min(720px, 100%); }
    .qb__layout { display: block; min-height: 0; }
    .qb__aside { padding: 27px; }
    .qb__visual { height: 145px; margin: 22px 0 20px; }
    .qb__agenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qb__agenda li { align-items: flex-start; }
    .qb__booking { padding: 32px 27px 30px; }
  }

  @media (max-width: 640px) {
    .qb { padding: 0; place-items: end center; }
    .qb__dialog { width: 100%; max-height: 94vh; padding: 0; border-radius: 24px 24px 0 0; }
    .qb__close { top: 14px; right: 14px; }
    .qb__aside { padding: 18px; }
    .qb__brand > span { width: 36px; height: 36px; }
    .qb__brand img { width: 26px; height: 26px; }
    .qb__visual { height: 90px; margin: 14px 0; border-radius: 14px; }
    .qb__aside h3 { max-width: 340px; margin-bottom: 0; font-size: 22px; }
    .qb__aside > p { display: none; }
    .qb__agenda { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 13px; }
    .qb__agenda li { display: block; min-height: 74px; padding: 8px; }
    .qb__agenda li > span { width: 27px; height: 27px; margin-bottom: 7px; }
    .qb__agenda b { font-size: 10.5px; line-height: 1.2; }
    .qb__agenda small { display: none; }
    .qb__booking { padding: 27px 20px 24px; }
    .qb__head { padding-right: 42px; }
    .qb__head h2 { font-size: 29px; }
    .qb__progress { margin: 23px 0 21px; }
    .qb__progress li { gap: 6px; }
    .qb__progress li:not(:last-child)::after { display: none; }
    .qb__progress span { flex-basis: 30px; width: 30px; height: 30px; }
    .qb__progress b { font-size: 11px; }
    .qb__facts { margin: 20px 0 24px; }
    .qb__calendar { margin-bottom: 22px; border-radius: 15px; }
    .qb__calendar-head { padding: 11px 12px; }
    /* Les flèches de mois tombaient à 32px : trop petit au pouce, et
       c'est le seul moyen d'atteindre un créneau du mois suivant. */
    .qb__calendar-head button { width: 44px; height: 44px; }
    .qb__weekdays { padding: 7px 5px 2px; }
    .qb__dates { gap: 3px; padding: 4px 5px 8px; }
    .qb__date, .qb__date-empty { min-height: 44px; }
    .qb__date { border-radius: 9px; font-size: 12px; }
    .qb__slots { grid-template-columns: repeat(3, 1fr); }
    .qb__slot-head { display: block; }
    .qb__slot-head > span { display: block; margin: -7px 0 12px; }
    .qb__form-grid { grid-template-columns: 1fr; gap: 13px; }
    .qb__wide { grid-column: auto; }
    .qb__choice { align-items: flex-start; flex-direction: column; gap: 5px; }
  }

  .spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--border);
    border-top-color: var(--blue-light);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

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

  /* ===== FOOTER ===== */
  footer {
    background: var(--blue-deep-dark);
    color: rgba(255, 255, 255, 0.6);
    padding: 64px 0 0;
    font-size: 14px;
    position: relative;
    overflow: hidden;
  }

  footer::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(111, 159, 224, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-brand .logo {
    color: var(--white);
    margin-bottom: 18px;
  }

  .footer-tagline {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 320px;
    margin-bottom: 24px;
  }

  .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue-light);
    color: var(--blue-deep-dark);
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
  }

  .footer-cta:hover {
    background: var(--white);
    transform: translateY(-2px);
  }

  .footer-col h4 {
    color: var(--white);
    font-family: 'Parkinsans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14.5px;
    transition: color 0.2s ease, padding-left 0.2s ease;
  }

  .footer-links a:hover {
    color: var(--blue-light);
    padding-left: 4px;
  }

  .footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-contact svg {
    flex-shrink: 0;
    color: var(--blue-light);
    margin-top: 2px;
  }

  .footer-contact a,
  .footer-contact span {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.5;
    transition: color 0.2s ease;
  }

  .footer-contact a:hover {
    color: var(--white);
  }

  .footer-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 0;
  }

  .footer-bottom p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
  }

  .footer-legal {
    display: flex;
    gap: 22px;
  }

  .footer-legal a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
  }

  .footer-legal a:hover {
    color: var(--blue-light);
  }

  /* ===== ANIMATIONS ===== */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

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

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }


  /* ===================================================================
     RESPONSIVE
     Paliers : 1080 · 960 · 900 · 880 · 720 · 560 · 400
     ⚠ 960 et 880 sont aussi lus par le JS (fermeture du menu au resize,
       activation du pin du carrousel). Ne pas les changer sans mettre
       le JS à jour (voir `pinActive()` et le listener resize).
     =================================================================== */

  /* Garde-fou : aucun débordement horizontal, quel que soit l'écran.
     `clip` (et non `hidden`) pour ne pas casser les position: sticky
     du manifeste et du carrousel. Posé sur <html> uniquement : sur
     <body>, overflow-y basculerait en auto et briserait le sticky. */
  html { overflow-x: clip; }

  /* Un mot trop long (« l'automatisation », une URL) ne déborde jamais */
  h1, h2, h3, h4, p, li, a, button { overflow-wrap: break-word; }

  /* ---------------- ≤ 1080px — respiration des grilles ------------- */
  @media (max-width: 1080px) {
    .services-grid { gap: 20px; }
    .solution-grid,
    .why-grid { gap: 24px; }
    .footer-grid { gap: 36px; }
  }

  /* ---------------- ≤ 960px — menu burger, hero en 1 colonne ------- */
  @media (max-width: 960px) {
    .hero { padding-top: 132px; }

    .hero-grid {
      grid-template-columns: 1fr;
      gap: 52px;
      padding-bottom: 64px;
    }

    .hero-content { text-align: center; }

    .hero-proof,
    .hero-actions { justify-content: center; }

    .hero-subtitle {
      margin-left: auto;
      margin-right: auto;
    }

    /* Sous 960px le hero passe sur une colonne : la composition
       basculerait SOUS le texte. Plutôt que de l'empiler, on la retire.
       Le hero se limite alors au titre, au sous-titre et aux deux CTA. */
    .hero-visual { display: none; }

    .nav-burger { display: flex; }
    .glow-btn-sm { display: none; }   /* le CTA passe dans le menu déroulant */

    /* Le panneau se cale sous la barre quelle que soit sa hauteur réelle.
       Avant : top: 72px en dur alors que la barre mesure 81px → chevauchement. */
    .nav-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 14px 20px 20px;
      max-height: calc(100svh - 5rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      border: none;
      border-bottom: 1px solid var(--border);
      border-radius: 0 0 18px 18px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 18px 38px rgba(30, 58, 95, 0.1);
      transform: translateY(-16px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .nav-menu.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .nav-menu li { width: 100%; }

    .nav-menu a {
      width: 100%;
      padding: 14px 16px;
      font-size: 15.5px;
      gap: 12px;
      border-radius: 10px;
    }

    .nav-menu a .nav-icon { display: inline-flex; }
    .nav-menu a .nav-text { display: inline; }
    .nav-menu a.active { background: var(--blue-soft); }

    .nav-lamp { display: none; }

    .nav-menu-cta { display: block; margin-top: 8px; }
  }

  /* ---------------- ≤ 900px — grilles 3 colonnes → 2 --------------- */
  @media (max-width: 900px) {
    .services-grid,
    .solution-grid,
    .why-grid {
      grid-template-columns: repeat(2, 1fr);
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    /* La 3e carte prend toute la largeur : pas de colonne orpheline. */
    .services-grid > :nth-child(3),
    .solution-grid > :nth-child(3),
    .why-grid > :nth-child(3) { grid-column: 1 / -1; }

    /* Dans cette carte élargie, la liste passe sur 2 colonnes. */
    .services-grid > :nth-child(3) .svc-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 26px;
    }

    /* Les connecteurs entre étapes n'ont plus de sens hors 3 colonnes. */
    .solution-step::after { display: none; }
  }

  /* ------- ≤ 880px — carrousel : scroll natif au lieu du pin -------
     Palier lu par le JS (`pinActive()`), ne pas décaler. */
  @media (max-width: 880px) {
    .ch-track { height: auto !important; }

    .ch-sticky {
      position: static;
      height: auto;
      overflow: visible;
      padding: 70px 0;
    }

    .ch-viewport {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
    }

    .ch-viewport::-webkit-scrollbar { display: none; }
    .ch-row { transform: none !important; }
    .acard { scroll-snap-align: center; }
    .ch-progress { display: none; }
  }

  /* ---------------- ≤ 720px — tout passe en 1 colonne -------------- */
  @media (max-width: 720px) {
    section { padding: 72px 0; }
    .hero { padding-top: 120px; }
    .hero-grid { gap: 44px; padding-bottom: 56px; }
    .hero-logos { padding: 28px 0 38px; }

    .hero-logos-row { gap: 40px; }

    .section-header { margin-bottom: 44px; }
    .section-header p { font-size: 16.5px; }

    .services-grid,
    .solution-grid,
    .why-grid {
      grid-template-columns: 1fr;
      max-width: 520px;
    }

    .services-grid > :nth-child(3),
    .solution-grid > :nth-child(3),
    .why-grid > :nth-child(3) { grid-column: auto; }

    .services-grid > :nth-child(3) .svc-list {
      display: flex;
      grid-template-columns: none;
      gap: 12px;
    }


    .contact-grid { grid-template-columns: 1fr; }
    .form-card { padding: 30px 24px; }

    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 36px 32px;
    }

    .footer-brand { grid-column: 1 / -1; }

    /* Manifeste : « Vous pouvez » au-dessus de la liste de verbes.
       Les deux blocs sont en white-space: nowrap ; côte à côte ils
       débordaient de l'écran et se faisaient rogner des deux côtés.
       La géométrie du surlignage est préservée : le premier verbe
       reste centré sur la bande à --mf-start, « Vous pouvez » occupe
       la ligne juste au-dessus (d'où le -1.5lh au lieu de -0.5lh). */
    .mf-lead {
      flex-direction: column;
      align-items: center;
      padding-top: calc(var(--mf-start) - 1.5lh);
    }

    .mf-static { top: calc(var(--mf-start) - 1.5lh); }
    .mf-words { text-align: center; }
  }

  /* ---------------- ≤ 560px — téléphones --------------------------- */
  @media (max-width: 560px) {
    .container { padding: 0 20px; }
    .nav-inner { padding: 14px 20px; }
    .logo { font-size: 19px; gap: 8px; }
    .logo-img { height: 32px; }

    section { padding: 60px 0; }
    .hero { padding-top: 100px; }
    .hero-grid { gap: 40px; padding-bottom: 48px; }
    .hero h1 { font-size: clamp(25px, 7.4vw, 30px); line-height: 1.1; }
    .hero-subtitle { font-size: 15.5px; margin-bottom: 28px; }
    .hero-proof p { font-size: 13px; }
    .hero-visual { max-width: 380px; }

    .hero-actions { gap: 18px; }
    .hero-cta { font-size: 14.5px; padding-left: 22px; }

    /* Les badges flottants se marchent dessus sous 560px. */
    .hv-float { padding: 8px 12px; gap: 8px; }
    .hv-float b { font-size: 11.5px; }
    .hv-float span { font-size: 10px; }
    .hv-float-tr { top: -12px; right: 0; }
    .hv-float-bl { bottom: -12px; left: 0; }

    .hero-grid { padding-bottom: 40px; }
    /* Sous 560px la composition se déplie verticalement :
       image principale, puis les deux chiffres côte à côte,
       puis l'image secondaire en pleine largeur. */
    .hv-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .hv-main {
      min-height: 0;
      aspect-ratio: 16 / 11;
    }

    .hv-side {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .hv-thumb {
      grid-column: 1 / -1;
      order: 1;
      flex: none;
      min-height: 0;
      aspect-ratio: 16 / 7;
    }

    /* En pile, la pastille basse de l'image 2 tombait sous le badge
       flottant « Entièrement personnalisé » : on la remonte. */
    .hv-label--bottom { top: 12px; bottom: auto; }

    .hv-num { font-size: 22px; }

    .hero-logos-row { gap: 28px 34px; }
    .hero-logo--wordmark { height: 32px; }
    .hero-logo--icon { height: 44px; }
    .hero-logo--wide { height: 34px; }

    .section-header { margin-bottom: 36px; }
    .section-header h2 { font-size: clamp(25px, 7.4vw, 32px); }




    .services-grid,
    .solution-grid,
    .why-grid { gap: 18px; }

    .svc-card { padding: 26px 22px; border-radius: 16px; }
    .solution-step,
    .why-card { padding: 26px 22px; }


    .acard { width: 260px; height: 400px; }
    .acard-title { font-size: 21px; }
    .acard-modal-body { padding: 28px 22px 32px; }
    .acard-modal-img { height: 190px; }

    /* Bascule contact : c'était la source du scroll horizontal du site.
       width: fit-content + 2 boutons en nowrap = 385px de large minimum. */
    .contact-toggle {
      width: 100%;
      gap: 6px;
      border-radius: 16px;
      margin-bottom: 32px;
    }

    .toggle-btn {
      flex: 1 1 0;
      min-width: 0;
      justify-content: center;
      padding: 12px 8px;
      font-size: 13.5px;
      border-radius: 12px;
    }

    .toggle-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    .form-row {
      grid-template-columns: 1fr;
      gap: 0;
    }

    /* 16px minimum : en dessous, iOS Safari zoome sur le champ au focus. */
    .form-group input,
    .form-group textarea { font-size: 16px; }

    .booking-intro { padding: 24px 20px 20px; }

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    /* Cibles tactiles : 14px de texte seul = zone trop petite au doigt. */
    .footer-links a,
    .footer-contact a { display: inline-block; padding: 3px 0; }

    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }

    .footer-legal { gap: 18px; flex-wrap: wrap; }

    .btn-primary,
    .mf-cta { padding: 14px 24px; font-size: 15px; }

    .mf-panel-inner { padding: 36px 20px; }
  }

  /* Sous 360px seulement, deux chiffres côte à côte deviennent illisibles. */
  @media (max-width: 360px) {
    .hv-side { grid-template-columns: 1fr; }
  }

  /* ---------------- ≤ 400px — petits téléphones -------------------- */
  @media (max-width: 400px) {
    .container { padding: 0 16px; }
    .nav-inner { padding: 12px 16px; }
    .logo { font-size: 17px; }
    .logo-img { height: 28px; }

    .hero h1 { font-size: 24px; }
    .hero-badge { font-size: 10.5px; padding: 7px 13px; letter-spacing: 0.07em; }

    .hv-main { aspect-ratio: 4 / 3; }

    /* Deux boutons côte à côte ne tiennent plus : on les empile. */
    .contact-toggle { flex-direction: column; }
    .toggle-btn { width: 100%; }

    .acard { width: 240px; height: 370px; }

    .svc-card,
    .solution-step,
    .why-card,

    .form-card { padding: 26px 18px; }
    .mf-panel-inner { padding: 32px 16px; }
  }


  /* ===== HERO ANIMATED ILLUSTRATION ===== */
  .hero-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-stage::before {
    content: '';
    position: absolute;
    inset: 4%;
    background: radial-gradient(circle at 50% 45%, rgba(111, 159, 224, 0.22) 0%, transparent 62%);
    filter: blur(26px);
    z-index: 0;
  }

  .hp-scene {
    position: relative;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1 / 1;
    perspective: 1100px;
    z-index: 1;
  }

  /* groupe 3D qui s'incline avec la souris */
  .hp-3d {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  /* carte arrière (profondeur) */
  .hp-card-back {
    position: absolute;
    top: 8%;
    left: 18%;
    right: 2%;
    height: 64%;
    background: var(--white);
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(30, 58, 95, 0.10);
    transform: translateZ(8px) rotate(5deg);
    opacity: 0.55;
  }

  /* carte principale */
  .hp-card {
    position: absolute;
    top: 12%;
    left: 6%;
    right: 6%;
    background: var(--white);
    border-radius: 18px;
    border: 1px solid rgba(227, 232, 240, 0.9);
    box-shadow: 0 30px 60px rgba(30, 58, 95, 0.18), 0 8px 20px rgba(30, 58, 95, 0.07);
    padding: 20px;
    transform: translateZ(45px);
    overflow: hidden;
  }

  /* halo qui suit le curseur */
  .hp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 0%), rgba(111, 159, 224, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .hp-scene:hover .hp-card::after { opacity: 1; }

  .hp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

  .hp-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-deep), var(--blue-light));
    color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }

  .hp-meta { flex: 1; min-width: 0; }
  .hp-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
  .hp-role { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

  .hp-badge {
    font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 7px;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    background: var(--blue-soft); color: var(--blue-deep);
    transition: background 0.4s ease, color 0.4s ease;
  }
  .hp-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  .hp-badge.gen .dot { animation: hpBlink 1s infinite; }
  .hp-badge.pub { background: #e7f6ed; color: #16a34a; }
  @keyframes hpBlink { 50% { opacity: 0.25; } }

  .hp-line {
    height: 9px; border-radius: 5px; margin-bottom: 10px; width: 0;
    background: linear-gradient(90deg, #cfe0f6, #e3edfa);
    transition: width 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .hp-line.title-line { height: 13px; background: linear-gradient(90deg, #b7d0f1, #9dbef0); }

  /* vignette "image" du post (le visuel généré) */
  .hp-media {
    margin-top: 6px;
    border-radius: 12px;
    aspect-ratio: 16 / 5;
    background: linear-gradient(135deg, #1e3a5f 0%, #4d80c8 55%, #6f9fe0 100%);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .hp-card.has-media .hp-media { opacity: 1; transform: scale(1); }

  .hp-media::after {
    content: '';
    position: absolute;
    width: 100px; height: 100px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    top: -34px; right: -12px;
  }

  .hp-media-tag {
    position: absolute; top: 9px; left: 10px; z-index: 2;
    background: rgba(255, 255, 255, 0.92); color: var(--blue-deep);
    font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 4px;
  }

  .hp-media-chart {
    position: absolute; left: 12px; right: 12px; bottom: 11px; top: 42%;
    display: flex; align-items: flex-end; gap: 6px; z-index: 1;
  }
  .hp-media-chart span {
    flex: 1; height: var(--h, 50%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.42));
    border-radius: 3px 3px 0 0;
  }

  .hp-action {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f3f8;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 38px;
  }

  .hp-stats {
    display: flex; gap: 14px; font-size: 11.5px; color: var(--text-muted);
    opacity: 0; transition: opacity 0.5s ease;
  }
  .hp-card.published .hp-stats { opacity: 1; }
  .hp-stat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
  .hp-stat svg { color: var(--blue-light); }

  .hp-validate {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: auto;
    background: var(--blue-deep); color: #fff;
    font-size: 12.5px; font-weight: 700; font-family: inherit;
    padding: 9px 16px; border-radius: 9px; border: none;
    opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
    pointer-events: none;
  }
  .hp-card.show-validate .hp-validate {
    opacity: 1; transform: translateY(0);
    animation: hpPulse 1.6s ease-in-out infinite;
  }
  .hp-card.validated .hp-validate { background: #16a34a; animation: none; }
  .hp-card.published .hp-validate { display: none; }
  @keyframes hpPulse {
    0% { box-shadow: 0 0 0 0 rgba(30, 58, 95, 0.4); }
    70%, 100% { box-shadow: 0 0 0 9px rgba(30, 58, 95, 0); }
  }

  /* pastilles flottantes (couches parallaxe) */
  .hp-chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 100px; padding: 7px 13px;
    font-size: 11.5px; font-weight: 700; color: var(--blue-deep);
    box-shadow: 0 12px 26px rgba(30, 58, 95, 0.16);
  }
  .hp-chip svg { color: var(--blue-light); }
  .hp-chip-ia { top: 2%; right: 0%; transform: translateZ(95px); animation: hpFloat 5s ease-in-out infinite; }
  .hp-chip-auto { bottom: 16%; left: -4%; transform: translateZ(70px); animation: hpFloat 6.5s ease-in-out infinite 0.6s; }
  .hero-stage.is-generating .hp-chip-ia { border-color: var(--blue-light); box-shadow: 0 12px 26px rgba(111, 159, 224, 0.4); }

  .hp-chip-react {
    bottom: 4%; right: 4%;
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue-deep), var(--blue-light));
    color: #fff; border: none;
    transform: translateZ(120px) scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .hp-chip-react svg { color: #fff; }
  .hero-stage.is-published .hp-chip-react { transform: translateZ(120px) scale(1); }

  @keyframes hpFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hp-3d, .hp-chip-ia, .hp-chip-auto { animation: none !important; transition: none !important; }
  }

  /* ---- Intégration de la carte animée dans la colonne droite ----
     À l'origine elle occupait un carré de 470px centré dans le hero.
     Ici elle partage la colonne avec la photo : la scène prend la
     hauteur de son contenu au lieu d'un carré à hauteur fixe. */
  .hv-side .hero-stage {
    display: block;
    height: auto;
    min-height: 0;
  }

  .hv-side .hero-stage::before { inset: 8% 2%; }

  .hv-side .hp-scene {
    aspect-ratio: auto;
    max-width: none;
    /* marge haute et basse pour les pastilles ; retrait latéral pour
       compenser l'agrandissement dû à la perspective (translateZ 45px
       sur 1100 = +4,3 %), sinon la carte sort de sa colonne. */
    padding: 24px 3% 26px;
  }

  .hv-side .hp-3d {
    position: relative;
    inset: auto;
  }

  .hv-side .hp-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .hv-side .hp-card-back {
    top: -12px;
    left: 14%;
    right: -4%;
    height: 72%;
  }

  /* La pastille débordait à -4% : elle passait sur la photo de gauche. */
  .hv-side .hp-chip-auto { left: 0; bottom: 8%; }
  .hv-side .hp-chip-ia { top: 0; right: 0; }
  .hv-side .hp-chip-react { bottom: -2%; right: 2%; }

  /* La photo secondaire est agrandie : elle a une taille propre au lieu
     de remplir l'espace laissé par les anciennes cartes. */
  .hv-side .hv-thumb {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  /* ---- Panneau blanc + hauteur figée ----
     1. La carte est posée sur un aplat blanc, comme la maquette.
     2. Sa hauteur ne doit plus varier : mesurée, elle passait de 338 à
        325px (le bouton « Valider » quittait le flux) puis à 363px
        (libellé de tâche sur 3 lignes au lieu de 2). Chaque variation
        remontait dans la colonne et décalait toute la section. */
  .hv-side .hero-stage {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    padding: 4px 12px;
  }

  /* Le halo bleu du fond sombre n'a plus lieu d'être sur du blanc. */
  .hv-side .hero-stage::before { display: none; }

  /* Le bouton conserve sa place au lieu de disparaître du flux. */
  .hv-side .hp-card.published .hp-validate {
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
  }

  /* Le libellé de tâche est figé sur deux lignes : les textes du cycle
     vont d'une à trois lignes. Au-delà, il est tronqué. */
  .hv-side .hp-role {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 28px;          /* 2 lignes à 11.5px / 1.2 */
    line-height: 1.2;
  }

  /* Filet de sécurité : même si un contenu changeait encore, la scène
     garde sa hauteur et la colonne ne bouge pas. */
  .hv-side .hp-scene { min-height: 392px; }

  /* ---- Couleurs de la carte ----
     Le thème bleu remappe --white, --text, --text-muted et --border pour
     un fond sombre. La carte, elle, est une surface BLANCHE : son texte
     devenait blanc sur blanc (« Automatisation QENIVO » illisible) et
     son fond tombait à 7 % d'opacité. On restaure les valeurs claires
     localement, sans toucher au thème. */
  .hv-side .hp-card { background: #fff; }
  .hv-side .hp-card-back { background: #fff; border-color: #e3e8f0; }
  .hv-side .hp-name { color: #1a2238; }
  .hv-side .hp-role,
  .hv-side .hp-stats { color: #5a6478; }
  .hv-side .hp-chip { border-color: #e3e8f0; }

  /* ===== LEVIERS MESURABLES (section importée) =========================
     Bloc 1/3 de section-leviers.html, repris tel quel. Tout est préfixé
     .lv : aucune collision avec le reste de la feuille. Seuls les tokens
     de couleur, --lv-sticky-top et la police ont été adaptés.
     =================================================================== */
.lv{
  /* ---- Tokens : seuls réglages à adapter à la charte ---- */
  --lv-brand:      #3d7fc4;   /* bleu électrique QENIVO */
  --lv-brand-soft: #6f9fe0;   /* --blue-light */
  --lv-brand-pale: #9ec9f0;   /* bleu pâle */
  --lv-bg:         #ffffff;   /* section claire */
  --lv-fg:         #1e3a5f;   /* texte principal */
  --lv-fg-soft:    #5a6478;   /* texte secondaire */
  --lv-line:       #e3e8f0;   /* filets et séparateurs */
  --lv-overlay:    10,31,60;  /* voile sombre du média, en RVB */
  --lv-radius:     22px;
  --lv-max:        1280px;
  --lv-pad-x:      28px;
  --lv-sticky-top: 111px;  /* header mesuré à 87px + 24 de marge */
  --lv-ease:       cubic-bezier(.22,.85,.3,1);

  position:relative;
  padding:130px 0;
  background:var(--lv-bg);
  color:var(--lv-fg);
  overflow:hidden;
  /* police héritée du site (Parkinsans) — Poppins non chargé */
}
.lv *,.lv *::before,.lv *::after{box-sizing:border-box}

/* halos décoratifs */
.lv::before,.lv::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.lv::before{width:620px;height:620px;left:-200px;top:-180px;background:rgba(61,127,196,.13)}
.lv::after{width:520px;height:520px;right:-180px;bottom:-200px;background:rgba(111,159,224,.12)}

.lv__inner{
  position:relative;z-index:1;
  max-width:var(--lv-max);margin:0 auto;padding:0 var(--lv-pad-x);
  display:grid;grid-template-columns:.92fr 1.08fr;gap:88px;align-items:start;
}

/* ---- colonne gauche (sticky) ---- */
.lv__intro{position:sticky;top:var(--lv-sticky-top)}
.lv__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lv-fg-soft);
}
.lv__eyebrow::before{content:"";width:26px;height:1.5px;background:var(--lv-brand-soft);border-radius:2px}
.lv__title{
  margin:22px 0;font-size:clamp(32px,3.6vw,48px);line-height:1.12;
  font-weight:500;letter-spacing:-.02em;color:var(--lv-fg);
}
.lv__title b{font-weight:800;color:var(--lv-brand)}
.lv__lead{margin:0 0 34px;color:var(--lv-fg-soft);font-size:16px;line-height:1.78;max-width:46ch}

.lv__media{
  margin:0;
  position:relative;border-radius:var(--lv-radius);overflow:hidden;
  border:1px solid var(--lv-line);
  min-height:200px;display:flex;align-items:flex-end;padding:26px;
}
.lv__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* Voile renforcé : la nouvelle photo est très claire, la rampe d'origine
   ne laissait que 4,5:1 sous la légende. Mesuré à 6,7:1 ici. */
.lv__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--lv-overlay),.15) 0%,rgba(var(--lv-overlay),.6) 45%,rgba(var(--lv-overlay),.92) 100%);
}
.lv__media p{position:relative;z-index:1;margin:0;color:#fff;font-size:15px;line-height:1.6;font-weight:500;max-width:32ch}

.lv__cta{margin-top:38px;display:inline-flex}
.lv__btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 16px 14px 26px;border-radius:100px;
  background:#2f6aa6;color:#fff;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:.35s var(--lv-ease);
}
.lv__btn i{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#2f6aa6;transition:.35s var(--lv-ease);
}
.lv__btn svg{width:15px;height:15px}
.lv__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(30,58,95,.35)}
.lv__btn:hover i{transform:translateX(4px)}

/* ---- colonne droite : les 4 lignes ---- */
.lv__list{display:flex;flex-direction:column}
.lv__row{
  position:relative;padding:30px 34px 30px 0;
  border-top:1px solid var(--lv-line);
  display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:center;
}
.lv__row:last-child{border-bottom:1px solid var(--lv-line)}
.lv__row::before{
  content:"";position:absolute;left:-28px;right:-28px;top:0;bottom:0;border-radius:18px;
  background:linear-gradient(90deg,rgba(61,127,196,.08),rgba(61,127,196,0));
  opacity:0;transition:opacity .4s var(--lv-ease);
}
.lv__row:hover::before{opacity:1}
.lv__row>*{position:relative;z-index:1}

.lv__num{font-size:clamp(40px,4vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--lv-fg)}
.lv__num small{
  display:block;margin-bottom:8px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lv-fg-soft);
}
.lv__bar{margin-top:14px;height:3px;border-radius:4px;background:var(--lv-line);overflow:hidden}
.lv__bar span{
  display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--lv-brand-soft),var(--lv-brand-pale));
  /* même durée que le compteur, pour qu'ils se terminent ensemble */
  transition:width 1.2s var(--lv-ease);
}
.lv__label{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--lv-fg)}
.lv__desc{margin:0;font-size:14px;line-height:1.65;color:var(--lv-fg-soft)}

/* ---- apparition au scroll ---- */
.lv .lv-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--lv-ease),transform .8s var(--lv-ease)}
.lv .lv-reveal.is-in{opacity:1;transform:none}

/* ---- responsive ---- */
@media (max-width:1080px){
  .lv__inner{grid-template-columns:1fr;gap:56px}
  .lv__intro{position:static}
}
@media (max-width:680px){
  .lv{padding:80px 0;--lv-pad-x:20px}
  .lv__row{grid-template-columns:1fr;gap:14px;padding:26px 0}
}
@media (prefers-reduced-motion:reduce){
  .lv .lv-reveal{opacity:1;transform:none;transition:none}
  .lv__bar span{transition:none}
}

  /* ===== LE CONSTAT — gabarit éditorial (section importée) ============
     Bloc 1/3 de section-editoriale.html. Tout est préfixé .ed. Seuls
     les tokens de couleur, la police et le recadrage de la bande ont
     été adaptés ; la structure est reprise telle quelle.
     =================================================================== */
.ed{
  /* ---- Tokens : seuls réglages à adapter ---- */
  --ed-brand:      #9ec9f0;   /* bleu pâle QENIVO — accents sur fond bleu */
  --ed-brand-soft: #6f9fe0;   /* --blue-light */
  --ed-ink:        #ffffff;   /* couleur forte : titres et chiffres */
  --ed-body:       rgba(255, 255, 255, 0.78);
  --ed-line:       rgba(255, 255, 255, 0.18);
  --ed-radius:     30px;
  --ed-max:        1280px;
  --ed-pad-x:      28px;
  --ed-cols:       4;      /* nombre d'items sur la rangée */
  --ed-ease:       cubic-bezier(.22,.85,.3,1);

  position:relative;
  padding:130px 0;
  overflow:hidden;
  color:var(--ed-ink);
  /* Le dégradé du site fait le fond. Sa zone haute-droite monte jusqu'à
     rgb(97,143,202), trop clair pour du texte blanc translucide : un
     voile navy le ramène dans une plage lisible, sans rompre la
     continuité avec les sections voisines. */
  background: rgba(10, 31, 60, 0.55);
  /* police héritée du site (Parkinsans) — Poppins non chargé */
}
.ed *,.ed *::before,.ed *::after{box-sizing:border-box}
.ed__inner{position:relative;z-index:1;max-width:var(--ed-max);margin:0 auto;padding:0 var(--ed-pad-x)}

/* ---- en-tête sur deux colonnes ---- */
.ed__head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:76px}
.ed__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ed-brand);
}
.ed__eyebrow::before{content:"";width:26px;height:1.5px;background:var(--ed-brand);border-radius:2px}
.ed__title{
  margin:20px 0 0;font-size:clamp(34px,4.6vw,60px);line-height:1.06;
  font-weight:500;letter-spacing:-.03em;color:var(--ed-brand);
}
.ed__title b{font-weight:800;color:var(--ed-ink);display:block}  /* passe à la ligne ; retirer `display:block` pour rester dans le flux */
.ed__lead{margin:0;padding-bottom:6px;color:var(--ed-body);font-size:16.5px;line-height:1.8}

/* ---- rangée d'items ---- */
.ed__grid{display:grid;grid-template-columns:repeat(var(--ed-cols),1fr);border-top:1px solid var(--ed-line)}
.ed__item{position:relative;padding:38px 26px 40px;text-align:center;border-right:1px solid var(--ed-line)}
.ed__item:last-child{border-right:0}
.ed__item::after{
  content:"";position:absolute;left:50%;top:-1px;height:2px;width:0;background:var(--ed-brand);
  transform:translateX(-50%);
  transition:width .55s var(--ed-ease);
}
.ed__item:hover::after{width:calc(100% - 52px)}
.ed__item:hover .ed__big{color:var(--ed-brand)}

.ed__kicker{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ed-brand);opacity:.9}
.ed__big{
  margin:16px 0 6px;font-size:clamp(46px,5vw,70px);font-weight:800;
  letter-spacing:-.045em;line-height:.95;color:var(--ed-ink);
  transition:color .4s var(--ed-ease);
}
.ed__big--sm{font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em}  /* pour un mot plutôt qu'un chiffre */
.ed__label{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--ed-ink)}
.ed__desc{margin:0 auto;font-size:13.5px;line-height:1.65;color:var(--ed-body);max-width:30ch}

/* ---- bande visuelle de bas de section (optionnelle) ---- */
.ed__band{
  position:relative;margin-top:70px;border-radius:var(--ed-radius);overflow:hidden;
  min-height:260px;display:flex;align-items:center;
  padding:48px clamp(28px,5vw,64px);color:#fff;
}
.ed__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ed__band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(10,31,60,.92) 0%,rgba(10,31,60,.6) 55%,rgba(10,31,60,.25) 100%);
}
.ed__band-in{
  position:relative;z-index:1;width:100%;
  display:flex;flex-wrap:wrap;gap:44px;align-items:center;justify-content:space-between;
}
.ed__band p{margin:0;font-size:clamp(19px,2vw,26px);line-height:1.4;font-weight:600;max-width:22ch}

.ed__btn{
  display:inline-flex;align-items:center;gap:14px;flex:none;
  padding:14px 16px 14px 26px;border-radius:100px;
  background:#fff;color:#0a1f3c;
  font-weight:600;font-size:15px;text-decoration:none;
  transition:.35s var(--ed-ease);
}
.ed__btn i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ed-brand);color:#fff;transition:.35s var(--ed-ease)}
.ed__btn svg{width:15px;height:15px}
.ed__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(30,58,95,.35)}
.ed__btn:hover i{transform:translateX(4px)}

/* ---- apparition au scroll ---- */
.ed .ed-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ed-ease),transform .8s var(--ed-ease)}
.ed .ed-reveal.is-in{opacity:1;transform:none}

/* ---- responsive ---- */
@media (max-width:1080px){
  .ed__head{grid-template-columns:1fr;gap:28px}
  .ed__grid{--ed-cols:2}
  .ed__item{padding-left:22px;padding-right:22px;border-bottom:1px solid var(--ed-line)}
  .ed__item:nth-child(2n){border-right:0}
}
@media (max-width:680px){
  .ed{padding:80px 0;--ed-pad-x:20px}
  .ed__grid{--ed-cols:1}
  .ed__item{border-right:0}
  .ed__band{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .ed .ed-reveal{opacity:1;transform:none;transition:none}
}

  /* ===== STACK TECHNOLOGIQUE ==========================================
     Mur de technologies en deux bandes qui défilent en sens opposés,
     filtrable par catégorie, avec un diagnostic de compatibilité en
     fenêtre modale. Tout est préfixé .st- ; la modale reprend les
     conventions de celle des cas d'usage (.open sur le conteneur,
     body.modal-open, fermeture au fond, à la croix et à Échap).
     =================================================================== */
  .st {
    --st-navy:  #0a1f3c;
    --st-brand: #3d7fc4;
    --st-deep:  #2f6ba8;   /* même bleu, assombri dès qu'il porte du texte */
    --st-pale:  #9ec9f0;
    --st-body:  #5a6478;
    --st-line:  #e3e8f0;
    --st-ease:  cubic-bezier(0.22, 0.85, 0.3, 1);

    position: relative;
    padding: 110px 0 100px;
    /* Un blanc légèrement bleuté, distinct du blanc pur. */
    background: #f6f9fd;
    color: var(--st-navy);
    overflow: hidden;
  }

  .st *, .st *::before, .st *::after { box-sizing: border-box; }

  /* ---- en-tête ---- */
  .st__head { text-align: center; max-width: 760px; margin: 0 auto 40px; }

  .st__eyebrow {
    display: inline-block;
    color: var(--st-deep);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }

  .st__title {
    margin: 0 0 20px;
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: var(--st-deep);
  }

  .st__title b { font-weight: 800; color: var(--st-navy); }

  .st__sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--st-body);
  }

  /* ---- filtres ---- */
  .st__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
  }

  .st__filter {
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--st-line);
    border-radius: 999px;
    background: #fff;
    color: var(--st-body);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.22s var(--st-ease), border-color 0.22s var(--st-ease),
                background 0.22s var(--st-ease);
  }

  .st__filter:hover { border-color: var(--st-brand); color: var(--st-navy); }
  .st__filter:focus-visible { outline: 2px solid var(--st-deep); outline-offset: 2px; }

  .st__filter[aria-pressed="true"] {
    background: var(--st-navy);
    border-color: var(--st-navy);
    color: #fff;
  }

  /* ---- bandes défilantes ---- */
  .st__rows { display: flex; flex-direction: column; gap: 18px; margin-bottom: 52px; }

  /* Les bords s'estompent au lieu d'être coupés net. */
  .st__row {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }

  .st__track {
    display: flex;
    gap: 18px;
    width: max-content;
    /* Le contenu est dupliqué une fois : parcourir la moitié de la piste
       ramène exactement au point de départ, la boucle est invisible. */
    animation: st-defile var(--st-duree, 60s) linear infinite;
  }

  .st__row--retour .st__track { animation-direction: reverse; }
  .st__row:hover .st__track { animation-play-state: paused; }

  @keyframes st-defile {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  .st__chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 14px 24px 14px 16px;
    border: 1px solid var(--st-line);
    border-radius: 16px;
    background: #fff;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--st-navy);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(10, 31, 60, 0.04);
  }

  /* Pastille monogramme, en attendant les vrais logos. */
  .st__mark {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(61, 127, 196, 0.12);
    color: var(--st-deep);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  /* Logos aux couleurs de marque : posés en <img>, jamais reteintés.
     Les fichiers vont du carré au bandeau très large (certains sont des
     logotypes, 512x136 par exemple) : on fixe la hauteur et on laisse la
     largeur suivre, plafonnée, plutôt que de les écraser dans un carré
     où un logotype ne ferait plus que huit pixels de haut. */
  .st__logo {
    height: 28px;
    width: auto;
    max-width: 76px;
    flex: none;
    object-fit: contain;
    display: block;
  }

  /* Une dizaine de fichiers sont des logotypes : la marque y est déjà
     écrite. Répéter le nom à côté donnerait « IFTTT IFTTT ». Ces
     cartes-là portent donc le seul logo, en plus grand. */
  .st__chip--logotype { padding: 14px 24px; }
  .st__chip--logotype .st__logo { height: 26px; max-width: 140px; }

  .st__vide {
    margin: 0;
    padding: 26px 0;
    text-align: center;
    font-size: 15px;
    color: var(--st-body);
  }

  /* ---- appel à l'action ---- */
  .st__cta-wrap { text-align: center; }

  .st__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 56px;
    padding: 16px 34px;
    border: 0;
    border-radius: 999px;
    background: var(--st-deep);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s var(--st-ease), transform 0.25s var(--st-ease),
                box-shadow 0.25s var(--st-ease);
  }

  .st__cta:hover {
    background: #26588c;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -16px rgba(10, 31, 60, 0.6);
  }

  .st__cta:focus-visible { outline: 2px solid var(--st-navy); outline-offset: 3px; }

  .st__cta i {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: transform 0.25s var(--st-ease);
  }

  .st__cta:hover i { transform: translateX(3px); }
  .st__cta svg { width: 16px; height: 16px; }

  .st__note { margin: 16px 0 0; font-size: 13.5px; color: var(--st-body); }

  /* ---- responsive ---- */
  @media (max-width: 860px) {
    .st { padding: 80px 0 72px; }
    .st__filters { margin-bottom: 34px; }
    .st__chip { font-size: 14.5px; padding: 12px 18px 12px 13px; }
  }

  /* Onze filtres empilés font neuf lignes sur un petit écran : sous 700px
     ils tiennent sur une seule ligne que l'on fait défiler au doigt. */
  @media (max-width: 700px) {
    .st__filters {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      padding-bottom: 4px;
      -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
      mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    .st__filters::-webkit-scrollbar { display: none; }
    .st__filter { flex: none; scroll-snap-align: start; }
  }

  @media (max-width: 560px) {
    .st__cta { width: 100%; justify-content: center; padding-left: 24px; }
  }

  /* Sans mouvement : les bandes se figent et deviennent parcourables. */
  @media (prefers-reduced-motion: reduce) {
    .st__track { animation: none; }
    .st__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .st__filter, .st__cta { transition: none; }
  }

  /* ===== DIAGNOSTIC DE COMPATIBILITÉ — fenêtre modale ================= */
  .stm {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
    background: rgba(10, 31, 60, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* display:flex ci-dessus l'emporte sur le display:none de [hidden] :
     sans cette règle la fenêtre resterait dans la page et exposée aux
     lecteurs d'écran, invisible seulement par son opacité. */
  .stm[hidden] { display: none; }

  .stm.open { opacity: 1; pointer-events: auto; }

  .stm__card {
    position: relative;
    width: 100%;
    max-width: 680px;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
    transform: translateY(30px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  .stm.open .stm__card { transform: none; }

  .stm__head {
    padding: 34px 38px 32px;
    background: linear-gradient(155deg, #2f6ba8 0%, #1e4e85 100%);
    color: #fff;
  }

  .stm__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }

  .stm__title {
    margin: 0 0 12px;
    font-size: clamp(23px, 3.4vw, 30px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .stm__sub { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }

  .stm__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .stm__close:hover { background: rgba(255, 255, 255, 0.3); }
  .stm__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  .stm__body { padding: 28px 38px 8px; }

  /* ---- recherche ---- */
  .stm__search { position: relative; margin-bottom: 24px; }

  .stm__search svg {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--stm-body, #5a6478);
    pointer-events: none;
  }

  .stm__input {
    width: 100%;
    min-height: 54px;
    padding: 15px 20px 15px 50px;
    border: 1.5px solid #9ec9f0;
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: 15.5px;
    color: #0a1f3c;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* #8b94a5 ne donnait que 3:1 sur blanc. */
  .stm__input::placeholder { color: #6b7284; }

  .stm__input:focus {
    outline: none;
    border-color: #2f6ba8;
    box-shadow: 0 0 0 4px rgba(61, 127, 196, 0.15);
  }

  .stm__label {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5a6478;
  }

  .stm__list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }

  .stm__tech {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    background: #fff;
    color: #0a1f3c;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }

  .stm__tech:hover { border-color: #3d7fc4; }
  .stm__tech:focus-visible { outline: 2px solid #2f6ba8; outline-offset: 2px; }

  .stm__tech[aria-pressed="true"] {
    background: #2f6ba8;
    border-color: #2f6ba8;
    color: #fff;
  }

  /* La pastille monogramme est empruntée à la section, qui vit ailleurs
     dans le DOM : ses jetons ne sont pas hérités ici, on pose les
     couleurs en clair plutôt que de compter sur un repli implicite. */
  .stm__tech .st__mark { background: rgba(61, 127, 196, 0.12); color: #2f6ba8; }
  .stm__tech[aria-pressed="true"] .st__mark { background: rgba(255, 255, 255, 0.22); color: #fff; }
  /* Dans la modale, le nom reste toujours affiché — c'est une liste que
     l'on parcourt — donc les logotypes y sont simplement plafonnés. */
  .stm__tech .st__logo { height: 20px; max-width: 56px; }

  /* Sur la puce bleue, un logo sombre se perdrait : une pastille blanche
     lui rend un fond, comme sur les cartes de la section. */
  .stm__tech[aria-pressed="true"] .st__logo {
    background: #fff;
    border-radius: 5px;
    padding: 2px 3px;
    box-sizing: content-box;
  }

  .stm__plus {
    width: 18px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.55;
  }

  .stm__tech[aria-pressed="true"] .stm__plus { transform: rotate(45deg); opacity: 1; }

  .stm__aucun { margin: 0 0 8px; font-size: 14.5px; color: #5a6478; }

  /* ---- verdict ---- */
  .stm__verdict {
    margin-top: 22px;
    padding: 24px 26px;
    border: 1px solid #e3e8f0;
    border-radius: 18px;
    background: #f6f9fd;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  .stm__verdict.is-in { opacity: 1; transform: none; }

  .stm__verdict-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }

  .stm__dot { width: 11px; height: 11px; flex: none; border-radius: 50%; background: #2f6ba8; }
  .stm__verdict[data-level="ok"] .stm__dot { background: #1f9d6b; }
  .stm__verdict[data-level="verifier"] .stm__dot { background: #9ec9f0; }

  .stm__verdict-title { margin: 0; font-size: 18px; font-weight: 700; color: #0a1f3c; }
  .stm__verdict-text { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #5a6478; }

  .stm__verdict-cta {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 13px 26px;
    border: 0;
    border-radius: 999px;
    background: #0a1f3c;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s ease;
  }

  .stm__verdict-cta:hover { transform: translateY(-2px); }
  .stm__verdict-cta:focus-visible { outline: 2px solid #2f6ba8; outline-offset: 3px; }

  /* ---- pied de la modale ---- */
  .stm__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 22px 38px 30px;
    border-top: 1px solid #e3e8f0;
  }

  .stm__hint { margin: 0; font-size: 14px; color: #5a6478; }
  .stm__hint b { color: #0a1f3c; font-weight: 700; }

  .stm__go {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    background: #2f6ba8;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .stm__go:hover:not(:disabled) { background: #26588c; transform: translateY(-2px); }
  .stm__go:focus-visible { outline: 2px solid #0a1f3c; outline-offset: 3px; }
  .stm__go:disabled { background: #e8edf4; color: #9aa4b5; cursor: not-allowed; }
  .stm__go svg { width: 15px; height: 15px; }

  @media (max-width: 560px) {
    .stm { padding: 16px 12px; }
    .stm__head { padding: 28px 24px 26px; }
    .stm__body { padding: 24px 24px 4px; }
    .stm__foot { padding: 20px 24px 26px; flex-direction: column; align-items: stretch; }
    .stm__go { justify-content: center; }
    .stm__hint { text-align: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .stm, .stm__card, .stm__verdict, .stm__go, .stm__tech { transition: none; }
  }

  /* ===== ASSISTANT — bulle de discussion ==============================
     Widget flottant, indépendant du reste de la page : tout est préfixé
     .cb et rien n'est posé sur les sélecteurs globaux. Il n'appelle
     aucun service tant qu'un point de terminaison n'est pas renseigné
     dans CB_CONFIG (voir le bloc JS) ; sans configuration il répond un
     message de repli et renvoie vers la prise de rendez-vous.
     z-index 1400 : au-dessus du contenu, sous la fenêtre de réservation.
     =================================================================== */
  .cb {
    --cb-navy:  #0a1f3c;
    --cb-brand: #3d7fc4;
    --cb-deep:  #2f6ba8;
    --cb-pale:  #9ec9f0;
    --cb-body:  #5a6478;
    --cb-line:  #e3e8f0;
    --cb-ease:  cubic-bezier(0.22, 0.85, 0.3, 1);
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1400;
    font-family: inherit;
  }

  .cb *, .cb *::before, .cb *::after { box-sizing: border-box; }

  /* ---- pastille d'ouverture ---- */
  .cb__launcher {
    position: relative;
    width: 60px;
    height: 60px;
    margin-left: auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--cb-deep);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 14px 34px -10px rgba(6, 20, 42, 0.6);
    transition: transform 0.25s var(--cb-ease), background 0.25s var(--cb-ease);
  }

  .cb__launcher:hover { transform: translateY(-2px); background: #26588c; }
  .cb__launcher:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .cb__launcher svg { width: 26px; height: 26px; }

  /* Les deux icônes sont superposées : on bascule de l'une à l'autre
     sans que la pastille ne change de taille. */
  .cb__launcher .cb__ico {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity 0.2s var(--cb-ease), transform 0.25s var(--cb-ease);
  }

  .cb__launcher .cb__ico--fermer { opacity: 0; transform: rotate(-45deg); }
  .cb[data-cb-ouvert="1"] .cb__ico--bulle { opacity: 0; transform: rotate(45deg); }
  .cb[data-cb-ouvert="1"] .cb__ico--fermer { opacity: 1; transform: none; }

  /* ---- panneau ---- */
  .cb__panneau {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: min(384px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 130px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px -20px rgba(6, 20, 42, 0.55);
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.28s var(--cb-ease), transform 0.28s var(--cb-ease);
  }

  .cb[data-cb-ouvert="1"] .cb__panneau {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .cb__panneau[hidden] { display: none; }

  /* ---- en-tête ---- */
  .cb__tete {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(150deg, #14315a 0%, #0a1f3c 100%);
    color: #fff;
  }

  .cb__avatar {
    position: relative;
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
  }

  .cb__avatar img { width: 30px; height: 30px; object-fit: contain; }

  .cb__ident { min-width: 0; flex: 1; }

  .cb__nom {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cb__etat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #4ade80;
  }

  .cb__etat::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .cb__role {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
  }

  .cb__fermer {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .cb__fermer:hover { background: rgba(255, 255, 255, 0.24); }
  .cb__fermer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .cb__fermer svg { width: 16px; height: 16px; }

  /* ---- fil de discussion ---- */
  .cb__fil {
    flex: 1;
    min-height: 180px;
    overflow-y: auto;
    padding: 18px;
    background: #f7f9fc;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
  }

  .cb__ligne { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
  .cb__ligne--moi { flex-direction: row-reverse; }

  .cb__mini {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--cb-line);
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .cb__mini img { width: 17px; height: 17px; object-fit: contain; }
  .cb__ligne--moi .cb__mini { display: none; }

  .cb__bulle {
    max-width: 78%;
    padding: 11px 15px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .cb__ligne--bot .cb__bulle {
    background: #fff;
    color: var(--cb-navy);
    border: 1px solid var(--cb-line);
    border-bottom-left-radius: 6px;
  }

  .cb__ligne--moi .cb__bulle {
    background: var(--cb-deep);
    color: #fff;
    border-bottom-right-radius: 6px;
  }

  /* points d'attente pendant la réponse */
  .cb__points { display: inline-flex; gap: 4px; padding: 3px 0; }

  .cb__points span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cb-body);
    animation: cb-rebond 1.1s infinite ease-in-out;
  }

  .cb__points span:nth-child(2) { animation-delay: 0.15s; }
  .cb__points span:nth-child(3) { animation-delay: 0.3s; }

  @keyframes cb-rebond {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
  }

  /* ---- suggestions ---- */
  .cb__suggestions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 0 18px 14px;
    background: #f7f9fc;
  }

  .cb__suggestions:empty { display: none; }

  .cb__suggestion {
    max-width: 88%;
    min-height: 40px;
    padding: 10px 18px;
    border: 1px solid var(--cb-pale);
    border-radius: 999px;
    background: #fff;
    color: var(--cb-deep);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .cb__suggestion:hover { background: #eef5fd; border-color: var(--cb-deep); }
  .cb__suggestion:focus-visible { outline: 2px solid var(--cb-deep); outline-offset: 2px; }

  /* ---- zone de saisie ---- */
  .cb__pied { padding: 12px 16px 14px; background: #fff; border-top: 1px solid var(--cb-line); }

  .cb__saisie {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border: 1.5px solid var(--cb-pale);
    border-radius: 999px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .cb__saisie:focus-within {
    border-color: var(--cb-deep);
    box-shadow: 0 0 0 4px rgba(61, 127, 196, 0.14);
  }

  /* Le site n'a pas de classe utilitaire pour ça : on pose la nôtre. */
  .cb__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .cb__champ {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--cb-navy);
    padding: 10px 0;
  }

  .cb__champ::placeholder { color: #6b7284; }

  .cb__envoyer {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--cb-deep);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .cb__envoyer:hover:not(:disabled) { background: #26588c; transform: translateY(-1px); }
  .cb__envoyer:focus-visible { outline: 2px solid var(--cb-navy); outline-offset: 2px; }
  .cb__envoyer:disabled { background: #e8edf4; color: #9aa4b5; cursor: not-allowed; }
  .cb__envoyer svg { width: 16px; height: 16px; }

  .cb__mention {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cb-body);
  }

  .cb__mention a { color: var(--cb-deep); }

  /* ---- responsive ---- */
  @media (max-width: 520px) {
    .cb { right: 16px; bottom: 16px; left: 16px; }
    .cb__panneau {
      width: auto;
      left: 0;
      right: 0;
      bottom: 72px;
      max-height: calc(100vh - 110px);
    }
    .cb__launcher { width: 54px; height: 54px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cb__panneau, .cb__launcher, .cb__ico, .cb__envoyer, .cb__suggestion { transition: none; }
    .cb__points span { animation: none; }
  }

  @media print { .cb { display: none; } }

  /* ===================================================================
     THÈME — LE FOND DU HERO SUR TOUT LE SITE
     Bloc d'habillage posé en fin de feuille : il surcharge les couleurs
     du thème clair d'origine, qui reste intact au-dessus. Retirer ce
     seul bloc suffit à revenir au fond blanc.
     Sauvegarde figée du thème clair : « QENIVO — hors site/anciennes-versions »

     Le site déclinant ses fonds via les variables --bg / --white /
     --blue-soft, on les remappe une fois plutôt que de reprendre chaque
     section. Le reste est du rattrapage ciblé : contrastes de texte,
     boutons, barre de nav, champs de formulaire.
     =================================================================== */

  :root {
    --bg: transparent;          /* les sections laissent passer le fond */
    --white: rgba(255, 255, 255, 0.07);
    --blue-soft: rgba(255, 255, 255, 0.10);
    --text: #eaf1fa;
    --text-muted: rgba(255, 255, 255, 0.72);
    --border: rgba(255, 255, 255, 0.16);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.26);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.32);
  }

  body {
    color: var(--text);
    background:
      radial-gradient(1100px 780px at 84% 6%, rgba(138, 177, 222, 0.26), transparent 62%),
      linear-gradient(42deg, #1b3260 0%, #23447a 28%, #325c98 55%, #4470b0 80%, #5686c4 100%);
    background-attachment: fixed;
  }

  /* Le hero porte déjà ce fond : on le rend transparent pour ne pas
     superposer deux dégradés (l'aura et les halos restent). */
  .hero { background: none; }

  h1, h2, h3, h4, h5, h6 { color: #fff; }

  .section-eyebrow,

  .section-header p { color: var(--text-muted); }

  /* ---- barre de navigation : on garde le header clair de l'ancien site ----
     Les variables --bg / --border / --text-muted / --blue-soft sont
     remappées pour le fond bleu. Le header, lui, reste blanc : il faut
     donc lui redonner des valeurs explicites, sinon il devient
     transparent avec du texte blanc. */
  nav {
    background: #fafbfd;
    border-bottom: 1px solid transparent;
  }
  nav.scrolled {
    border-bottom-color: #e3e8f0;
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.06);
  }

  .logo { color: var(--blue-deep); }

  /* Le vrai logo, pas la version blanchie au filtre. Le pied de page
     garde la sienne (règle `footer .logo-img`, plus spécifique). */
  .logo-img { filter: none; }

  .nav-menu {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #e3e8f0;
  }
  .nav-menu a { color: #5a6478; }
  .nav-menu a:hover { color: var(--blue-deep); background: transparent; }
  .nav-menu a.active { color: var(--blue-deep); background: rgba(111, 159, 224, 0.12); }
  .nav-drop__btn { color: #5a6478; }
  .nav-drop__btn:hover,
  .nav-drop__btn[aria-expanded="true"] { color: var(--blue-deep); }
  .nav-drop__btn.active { color: var(--blue-deep); background: rgba(111, 159, 224, 0.12); }
  .nav-drop__label { color: #5a6478; }
  .nav-drop__ico { color: #5a6478; }
  .nav-lamp { background: var(--blue-deep); }
  .nav-burger { border-color: #e3e8f0; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { background: var(--blue-deep); }
  .nav-menu-cta-btn { background: var(--blue-deep); color: #fff; }

  /* ---- boutons : le bleu profond disparaît sur fond bleu ---- */
  .btn-primary,
  .pricing-cta,
  .mf-cta,
  .footer-cta {
    background: #fff;
    color: var(--blue-deep);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }
  .btn-primary:hover,
  .pricing-cta:hover,
  .mf-cta:hover,
  .footer-cta:hover { background: #eaf1fa; color: var(--blue-deep); }

  .toggle-btn { color: rgba(255, 255, 255, 0.7); }
  .toggle-btn:hover { color: #fff; }
  .toggle-btn.active { background: #fff; color: var(--blue-deep); }
  .contact-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }

  /* ---- cartes : le verre remplace le blanc ---- */
  .svc-card,
  .solution-step,
  .why-card,
  .form-card,
  .info-card,
  .pricing-card,
  .hv-card,
  .hv-float {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
  }

  /* Les cartes du hero restent blanches : elles font partie de la
     composition d'images et perdraient leur lisibilité en verre. */
  .hv-card, .hv-float { background: #fff; color: var(--blue-deep); }
  .hv-card *, .hv-float * { color: inherit; }
  .hv-cap, .hv-float span { color: var(--blue-deep); opacity: 0.62; }

  .svc-card h3, .solution-step h3, .why-card h3, .form-card h3 { color: #fff; }
  .svc-tagline, .svc-list li, .form-sub { color: var(--text-muted); }
  .svc-list .check { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .step-number { background: #fff; color: var(--blue-deep); }
  .info-title { color: #fff; }
  .info-sub { color: var(--text-muted); }
  .info-icon, .why-icon { background: rgba(255, 255, 255, 0.14); color: #fff; }

  /* ---- formulaire ---- */
  .form-group label { color: #fff; }
  .form-group input,
  .form-group textarea {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  .form-group input::placeholder,
  .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
  .form-group input:focus,
  .form-group textarea:focus { border-color: #a9caf0; background: rgba(255, 255, 255, 0.12); }

  /* ---- manifeste : inverser le surlignage ---- */
  .manifesto {
    --mf-accent: #ffffff;
    --mf-dimmed: rgba(255, 255, 255, 0.18);
  }
  .mf-static { color: #fff; }
  .manifesto::before { --line: rgba(255, 255, 255, 0.07); }

  /* ---- page d'un seul tenant ----
     Les sections portaient chacune un fond et des filets 1px hérités du
     thème clair. Sur un fond uni, ces voiles et ces lignes découpaient
     la page en bandes. On neutralise les deux : plus rien ne sépare les
     sections, le dégradé du body traverse toute la page. */
  .hero-logos,
  .services,
  .carousel-section,
  .manifesto,
  .pricing,
  .why,
  .contact,
  footer {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
  }

  /* Rattrapages de contraste repérés à l'écran */
  .info-value { color: #a9caf0; }
  .guarantee-list li { color: var(--text-muted); }
  .guarantee-list li svg { color: #4ade80; }
  .booking-card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
  .booking-intro p, .call-badge { color: var(--text-muted); }
  .call-badge { color: #fff; }
  .footer-tagline, .footer-links a, .footer-contact a, .footer-contact span { color: rgba(255, 255, 255, 0.72); }

  @media (max-width: 960px) {
    .nav-menu {
      background: rgba(255, 255, 255, 0.98);
      border-bottom: 1px solid #e3e8f0;
    }
    /* --blue-soft est remappé en blanc translucide par le thème bleu :
       invisible sur le panneau blanc du menu. Valeur claire en dur. */
    .nav-menu a.active { background: #eef3fb; }
    .nav-drop__btn.active { background: #eef3fb; }
    .nav-drop__btn .nav-icon { display: inline-flex; }
    .nav-drop__panel { border-left-color: #e3e8f0; }
  }

  /* ===== PAGES INTÉRIEURES ============================================
     Gabarit commun aux pages autres que l'accueil : bandeau de titre,
     sections de contenu, blocs à compléter. Préfixe .pg.
     =================================================================== */
  .pg-hero {
    padding: 150px 0 70px;
    text-align: center;
  }

  .pg-hero__eyebrow {
    display: inline-block;
    color: var(--blue-light);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }

  .pg-hero h1 {
    margin: 0 auto 20px;
    max-width: 18ch;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .pg-hero__lead {
    margin: 0 auto;
    max-width: 62ch;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-muted);
  }

  .pg-section { padding: 60px 0; }
  .pg-section--serre { padding: 34px 0 60px; }

  .pg-section h2 {
    margin: 0 0 14px;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .pg-section > .container > p { max-width: 68ch; color: var(--text-muted); line-height: 1.7; }

  .pg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
  }

  .pg-card {
    padding: 26px 28px;
    border-radius: 18px;
    background: var(--white);
    border: 1px solid var(--border);
  }

  .pg-card h3 { margin: 0 0 10px; font-size: 17px; }
  .pg-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
  .pg-card p + p { margin-top: 14px; }
  .pg-card .pg-card__client {
    margin: -2px 0 17px;
    color: var(--blue-light);
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
  }
  .pg-card__num {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--blue-light);
  }

  /* Bloc de rédaction restant : volontairement visible, à supprimer une
     fois le texte écrit. */
  .pg-todo {
    margin-top: 26px;
    padding: 24px 26px;
    border: 2px dashed rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
  }

  .pg-todo__tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
  }

  .pg-todo p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
  .pg-todo ul { margin: 8px 0 0; padding-left: 20px; }
  .pg-todo li { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }

  .pg-cta {
    margin: 20px 0 90px;
    padding: 44px 40px;
    border-radius: 24px;
    background: linear-gradient(165deg, #1e3a5f 0%, #15273f 100%);
    text-align: center;
  }

  .pg-cta h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); }
  .pg-cta p { margin: 0 auto 26px; max-width: 52ch; color: rgba(255, 255, 255, 0.8); line-height: 1.6; }

  @media (max-width: 860px) {
    .pg-hero { padding: 130px 0 50px; }
    .pg-grid { grid-template-columns: 1fr; }
    .pg-cta { padding: 34px 24px; }
  }

  /* ===== MENU DÉROULANT DE LA NAV ====================================
     Un seul niveau, sur l'entrée « Services ». Le panneau flotte sous la
     barre sur grand écran ; sous 960px il se déplie en accordéon dans le
     menu burger, où le flottement n'aurait pas de sens.
     =================================================================== */
  .nav-drop { position: relative; }

  .nav-drop__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 18px;
    border: 0;
    border-radius: 100px;
    background: none;
    color: #5a6478;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .nav-drop__btn:hover,
  .nav-drop__btn[aria-expanded="true"],
  .nav-drop__btn.active { color: var(--blue-deep); }

  .nav-drop__btn:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

  .nav-drop__chevron {
    width: 13px;
    height: 13px;
    flex: none;
    transition: transform 0.25s ease;
  }

  .nav-drop__btn[aria-expanded="true"] .nav-drop__chevron { transform: rotate(180deg); }

  .nav-drop__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 268px;
    padding: 20px 18px 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e3e8f0;
    box-shadow: 0 26px 60px -22px rgba(10, 31, 60, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 5;
  }

  .nav-drop__btn[aria-expanded="true"] + .nav-drop__panel {
    opacity: 1;
    transform: translateX(-50%);
    pointer-events: auto;
  }

  /* Passerelle : elle prolonge la zone de survol du panneau jusqu'au
     bouton, sinon la souris traverse un vide de 14px et le menu se
     referme avant qu'on ait atteint les liens. */
  .nav-drop__panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
  }

  .nav-drop__label {
    margin: 0 0 10px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5a6478;
  }

  .nav-drop__panel hr {
    height: 1px;
    margin: 0 12px 8px;
    border: 0;
    background: #e3e8f0;
  }

  /* On redéclare tout : les liens de la barre héritent d'un style pensé
     pour une pastille en ligne, pas pour une liste sur fond blanc. */
  .nav-menu .nav-drop__panel a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    color: #0a1f3c;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .nav-menu .nav-drop__panel a:hover { background: #f2f7fd; color: var(--blue-deep); }
  .nav-menu .nav-drop__panel a.active { background: #eaf2fb; color: var(--blue-deep); }
  .nav-menu .nav-drop__panel a:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: -2px; }

  .nav-drop__ico {
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    color: #5a6478;
  }

  .nav-menu .nav-drop__panel a:hover .nav-drop__ico,
  .nav-menu .nav-drop__panel a.active .nav-drop__ico { color: var(--blue-deep); }
  .nav-drop__ico svg { width: 18px; height: 18px; }

  /* --- dans le menu burger : accordéon, plus de flottement --- */
  @media (max-width: 960px) {
    .nav-drop { width: 100%; }
    /* 44px minimum sous le pouce : le remplissage d'origine donnait 43. */
    .nav-drop__btn { width: 100%; justify-content: flex-start; padding: 11px 18px; min-height: 44px; }
    .nav-drop__chevron { margin-left: auto; }

    .nav-drop__panel {
      position: static;
      transform: none;
      min-width: 0;
      width: 100%;
      margin-top: 4px;
      padding: 6px 0 2px;
      border: 0;
      border-left: 2px solid #e3e8f0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      display: none;
      opacity: 1;
      pointer-events: auto;
    }

    .nav-drop__btn[aria-expanded="true"] + .nav-drop__panel { display: block; transform: none; }
    .nav-drop__panel::before { display: none; }
    .nav-drop__label { display: none; }
    .nav-drop__panel hr { display: none; }
    .nav-menu .nav-drop__panel a { padding-left: 18px; font-size: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-drop__panel, .nav-drop__chevron { transition: none; }
  }

  /* ===== MÉTHODE — TIMELINE AU SCROLL ===============================
     Adaptation native du composant 21st/Aceternity fourni. Le composant
     d'origine dépendait de React, Tailwind et Framer Motion ; cette version
     reste compatible avec le site statique et son unique feuille de style.
     =================================================================== */
  .mt {
    --mt-navy: #0a1f3c;
    --mt-blue: #3d7fc4;
    --mt-blue-soft: #eaf2fb;
    --mt-blue-pale: #9ec9f0;
    --mt-body: #5a6478;
    --mt-line: #dbe6f2;
    --mt-progress: 0;
    --mt-rail-top: 117px;
    --mt-rail-height: 1160px;
    padding: 120px 0 48px;
    overflow: clip;
    background: #fff;
    color: var(--mt-navy);
  }

  .mt--page { padding-top: 24px; }

  .mt__intro {
    max-width: 820px;
    margin: 0 0 42px;
  }

  .mt__eyebrow,
  .mt__kicker,
  .mt__step-label,
  .mt__visual-label {
    display: inline-block;
    color: var(--mt-blue);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .mt__intro h2 {
    max-width: 760px;
    margin: 15px 0 20px;
    color: var(--mt-navy);
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.035em;
  }

  .mt__intro h2 strong { color: var(--mt-blue); font-weight: inherit; }

  .mt__intro p {
    max-width: 680px;
    margin: 0;
    color: var(--mt-body);
    font-size: 17px;
    line-height: 1.75;
  }

  .mt__timeline {
    position: relative;
    margin-top: 10px;
  }

  .mt__rail {
    position: absolute;
    z-index: 0;
    top: var(--mt-rail-top);
    left: 31px;
    width: 2px;
    height: var(--mt-rail-height);
    overflow: hidden;
    border-radius: 999px;
    background: var(--mt-line);
  }

  .mt__progress {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    width: 100%;
    height: calc(var(--mt-progress) * 100%);
    border-radius: inherit;
    background: linear-gradient(180deg, var(--mt-blue-pale), var(--mt-blue));
    transition: height 80ms linear;
  }

  .mt__step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    gap: clamp(38px, 6vw, 76px);
    min-height: 580px;
    padding: 96px 0 104px;
  }

  .mt__node {
    position: absolute;
    top: 96px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--mt-line);
    border-radius: 50%;
    background: #fff;
    color: #7c8da3;
    box-shadow: 0 0 0 8px #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    transition: color 0.28s ease, border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
  }

  .mt__step.is-active .mt__node {
    border-color: var(--mt-blue);
    background: var(--mt-blue);
    color: #fff;
    transform: scale(1.06);
  }

  .mt__sticky {
    position: sticky;
    top: 146px;
    align-self: start;
    padding-left: 82px;
  }

  .mt__step-label { color: #7c8da3; transition: color 0.28s ease; }

  .mt__sticky h3 {
    margin: 8px 0 0;
    color: #91a0b2;
    font-size: clamp(34px, 3.8vw, 48px);
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: nowrap;
    transition: color 0.28s ease, transform 0.28s ease;
  }

  .mt__step.is-active .mt__step-label { color: var(--mt-blue); }
  .mt__step.is-active .mt__sticky h3 { color: var(--mt-navy); transform: translateX(4px); }

  .mt__card {
    align-self: start;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe8f2;
    border-radius: 26px;
    background: #f8fbff;
    box-shadow: 0 16px 54px rgba(10, 31, 60, 0.07);
    transform: translateY(8px);
    transition: border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease;
  }

  .mt__step.is-active .mt__card {
    border-color: rgba(61, 127, 196, 0.52);
    box-shadow: 0 22px 64px rgba(10, 31, 60, 0.13);
    transform: translateY(0);
  }

  .mt__copy { padding: clamp(28px, 4vw, 46px); }

  .mt__copy h3 {
    margin: 12px 0 14px;
    color: var(--mt-navy);
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.13;
  }

  .mt__copy p {
    max-width: 620px;
    margin: 0;
    color: var(--mt-body);
    font-size: 16px;
    line-height: 1.72;
  }

  .mt__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
  }

  .mt__tags li {
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid #d7e4f2;
    border-radius: 999px;
    background: #fff;
    color: var(--mt-navy);
    font-size: 12.5px;
    font-weight: 650;
  }

  .mt__visual {
    position: relative;
    display: flex;
    min-height: 172px;
    margin: 0 18px 18px;
    padding: 48px clamp(24px, 5vw, 56px) 28px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dce8f4;
    border-radius: 19px;
    background: var(--mt-blue-soft);
  }

  .mt__visual::after {
    content: '';
    position: absolute;
    right: -46px;
    bottom: -70px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(61, 127, 196, 0.16);
    border-radius: 50%;
  }

  .mt__visual-label { position: absolute; top: 17px; left: 19px; color: #60758f; font-size: 10px; }
  .mt__visual .sol-lines { position: relative; z-index: 1; max-width: 460px; }
  .mt__visual .sol-lines span { background: linear-gradient(90deg, var(--mt-navy), var(--mt-blue)); }
  .mt__visual .sol-lines span::after { background: var(--mt-blue-soft); }
  .mt__visual .sol-validate { background: var(--mt-navy); color: #fff; }
  .mt__visual .sol-cursor { color: var(--mt-navy); }
  .mt__visual .sol-grid { position: relative; z-index: 1; max-width: 250px; }
  .mt__visual .sol-grid span { background: #fff; border-color: rgba(10, 31, 60, 0.08); }
  .mt__visual .sol-grid span.on { background: #fff; }

  @media (max-width: 900px) {
    .mt { padding-top: 92px; }
    .mt--page { padding-top: 10px; }
    .mt__step { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; min-height: 530px; }
    .mt__sticky { padding-left: 72px; }
    .mt__sticky h3 { font-size: 34px; }
  }

  @media (max-width: 700px) {
    .mt { padding: 78px 0 52px; }
    .mt--page { padding-top: 0; }
    .mt__intro { margin-bottom: 18px; }
    .mt__intro h2 { font-size: clamp(30px, 9vw, 40px); }
    .mt__intro p { font-size: 15px; }
    .mt__rail { left: 21px; }
    .mt__step {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      min-height: 0;
      padding: 74px 0 52px 62px;
    }
    .mt__node { top: 74px; left: 0; }
    .mt__sticky { position: static; padding: 0; }
    .mt__sticky h3 { margin-top: 5px; font-size: 31px; }
    .mt__step.is-active .mt__sticky h3 { transform: none; }
    .mt__card { border-radius: 21px; }
    .mt__copy { padding: 27px 23px 25px; }
    .mt__copy h3 { font-size: 25px; }
    .mt__copy p { font-size: 14.5px; }
    .mt__visual { min-height: 145px; margin: 0 10px 10px; border-radius: 15px; }
  }

  @media (max-width: 430px) {
    .mt__step { padding-left: 54px; }
    .mt__node { width: 42px; height: 42px; }
    .mt__tags { gap: 7px; }
    .mt__tags li { padding-inline: 11px; font-size: 11.5px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mt__progress,
    .mt__node,
    .mt__sticky h3,
    .mt__step-label,
    .mt__card { transition: none; }
  }

  /* Détails des cinq étapes : photos, repères de durée et livrables. */
  .mt { background: #f4f7fb; }

  .mt__step {
    grid-template-columns: minmax(235px, 310px) minmax(0, 1fr);
    min-height: 670px;
    padding: 92px 0 118px;
  }

  .mt__sticky h3 { font-size: clamp(32px, 3.3vw, 42px); }

  .mt__node { top: 92px; }

  .mt__card--detail {
    display: grid;
    grid-template-columns: minmax(210px, 34%) minmax(0, 1fr);
    min-height: 500px;
    border-color: #d8e1ec;
    border-radius: 24px;
    background: #fff;
  }

  .mt__media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #d8e5f3;
  }

  .mt__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(10, 31, 60, 0.12));
    pointer-events: none;
  }

  .mt__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    transition: transform 0.55s ease;
  }

  .mt__step.is-active .mt__media img { transform: scale(1.035); }
  .mt__step:nth-of-type(3) .mt__media img { object-position: 55% center; }
  .mt__step:nth-of-type(4) .mt__media img { object-position: 62% center; }
  .mt__step:nth-of-type(5) .mt__media img { object-position: 53% center; }
  .mt__step:nth-of-type(6) .mt__media img { object-position: 58% center; }

  .mt__card--detail .mt__copy { padding: clamp(28px, 3.5vw, 42px); }

  .mt__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .mt__card-head .mt__kicker { color: #a46a18; font-size: 10px; line-height: 1.45; }

  .mt__count {
    flex: none;
    color: #60718a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  .mt__card--detail .mt__copy h3 {
    margin-top: 12px;
    font-size: clamp(25px, 2.7vw, 34px);
  }

  .mt__card--detail .mt__copy p { font-size: 14.5px; line-height: 1.58; }

  .mt__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
  }

  .mt__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #d5e1f1;
    border-radius: 999px;
    background: #eff5fe;
    color: #596a82;
    font-size: 11.5px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .mt__meta svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: none;
    fill: none;
    stroke: var(--mt-blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mt__meta b { margin-right: 6px; color: var(--mt-navy); }

  .mt__deliverables {
    padding: 20px;
    border: 1px solid #dfe8f5;
    border-radius: 16px;
    background: #f3f7fd;
  }

  .mt__deliverables > span {
    display: block;
    margin-bottom: 12px;
    color: #52647d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }

  .mt__deliverables ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mt__deliverables li {
    position: relative;
    padding-left: 19px;
    color: #17243b;
    font-size: 12px;
    line-height: 1.4;
  }

  .mt__deliverables li::before {
    content: '✓';
    position: absolute;
    top: 0;
    left: 0;
    color: #2446d6;
    font-weight: 800;
  }

  @media (max-width: 900px) {
    .mt__step { grid-template-columns: 205px minmax(0, 1fr); gap: 28px; min-height: 620px; }
    .mt__card--detail { grid-template-columns: 190px minmax(0, 1fr); min-height: 465px; }
    .mt__media img { min-height: 465px; }
    .mt__card--detail .mt__copy { padding: 28px; }
    .mt__deliverables { padding: 17px; }
  }

  @media (max-width: 700px) {
    .mt__step {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      min-height: 0;
      padding-top: 74px;
      padding-bottom: 58px;
    }
    .mt__node { top: 74px; }
    .mt__card--detail { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .mt__media { height: 190px; min-height: 0; }
    .mt__media img { min-height: 0; }
    .mt__card--detail .mt__copy { padding: 24px 20px 20px; }
    .mt__card-head .mt__kicker { max-width: 19ch; }
    .mt__card--detail .mt__copy h3 { font-size: 25px; }
    .mt__meta { margin: 18px 0; }
    .mt__meta span { max-width: 100%; font-size: 10.5px; white-space: normal; }
    .mt__deliverables { padding: 17px 15px; }
    .mt__deliverables ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  }

  /* ===== MÉTHODE — PILE DE CARTES STICKY ============================ */
  .ps {
    --ps-navy: #0a1f3c;
    --ps-blue: #3d7fc4;
    --ps-muted: #5a6478;
    padding: 120px 0 92px;
    overflow: clip;
    background: #fff;
  }

  .ps--page { padding-top: 32px; }

  .ps__grid {
    display: grid;
    grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
    gap: clamp(44px, 8vw, 110px);
    align-items: start;
  }

  .ps__intro {
    position: sticky;
    top: 144px;
    align-self: start;
    max-width: 390px;
  }

  .ps__eyebrow,
  .ps__label {
    display: inline-block;
    color: var(--ps-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .ps__intro h2 {
    margin: 14px 0 18px;
    color: var(--ps-navy);
    font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.06;
    letter-spacing: -.04em;
  }

  .ps__intro h2 strong { color: var(--ps-blue); font-weight: inherit; }

  .ps__intro p {
    margin: 0;
    color: var(--ps-muted);
    font-size: 16px;
    line-height: 1.72;
  }

  .ps__stack {
    position: relative;
    min-height: 2210px;
    padding: 10px 0 172px;
    perspective: 1000px;
  }

  .ps__card {
    position: sticky;
    top: calc(116px + (var(--ps-index) * 14px));
    display: grid;
    grid-template-columns: minmax(165px, 34%) minmax(0, 1fr);
    min-height: 400px;
    margin-bottom: 28px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8e1ec;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(10, 31, 60, 0.13);
    transform: translateZ(calc(var(--ps-index) * 10px));
  }

  .ps__media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #d8e5f3;
  }

  .ps__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(10, 31, 60, .15));
    pointer-events: none;
  }

  .ps__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.22, .75, .25, 1);
  }

  .ps__card:nth-child(2) .ps__media img { object-position: 57% center; }
  .ps__card:nth-child(3) .ps__media img { object-position: 55% center; }
  .ps__card:nth-child(4) .ps__media img { object-position: 57% center; }
  .ps__card:nth-child(5) .ps__media img { object-position: 52% center; }

  .ps__content {
    position: relative;
    display: flex;
    min-width: 0;
    padding: clamp(28px, 3vw, 38px);
    flex-direction: column;
    justify-content: center;
  }

  .ps__content::after {
    content: '';
    position: absolute;
    right: -86px;
    bottom: -118px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(61, 127, 196, .16);
    border-radius: 50%;
    pointer-events: none;
  }

  .ps__card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .ps__number {
    color: #60718a;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .14em;
  }

  .ps__card h3 {
    position: relative;
    z-index: 1;
    max-width: 14ch;
    margin: 18px 0 14px;
    color: var(--ps-navy);
    font-size: clamp(25px, 2.7vw, 35px);
    line-height: 1.1;
    letter-spacing: -.04em;
  }

  .ps__card p {
    position: relative;
    z-index: 1;
    max-width: 54ch;
    margin: 0;
    color: var(--ps-muted);
    font-size: 15px;
    line-height: 1.65;
  }

  .ps__card-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 27px;
    color: #60718a;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .ps__card-foot i {
    position: relative;
    display: block;
    flex: 1;
    height: 1px;
    overflow: hidden;
    background: #dbe6f2;
  }

  .ps__card-foot i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ps-blue);
    transform: translateX(-72%);
  }

  .ps__cta {
    position: relative;
    width: 100%;
    margin-top: 6px;
    padding: clamp(54px, 7vw, 92px) clamp(28px, 7vw, 104px) 0;
    overflow: hidden;
    border: 1px solid rgba(158, 201, 240, .22);
    border-radius: 30px;
    /* Photo de fond + voile navy. La photo comporte des zones blanches
       (la fenêtre, les écrans) : sans voile dense, le texte blanc y
       tomberait à 1,1:1. */
    background-color: var(--ps-navy);
    background-image:
      linear-gradient(rgba(10, 31, 60, .88) 0%, rgba(10, 31, 60, .82) 45%, rgba(10, 31, 60, .9) 100%),
      url('cta-echange.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 24px 60px rgba(10, 31, 60, .2);
    text-align: center;
  }

  .ps__cta-main { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }

  .ps__cta-eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    padding: 9px 16px;
    border: 1px solid rgba(158, 201, 240, .35);
    border-radius: 999px;
    color: var(--ps-pale, #9ec9f0);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .ps__cta h3 {
    max-width: 780px;
    margin: 0 auto 22px;
    color: #fff;
    font-size: clamp(34px, 4.3vw, 58px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.04em;
  }

  .ps__cta h3 strong { color: var(--ps-pale, #9ec9f0); font-weight: inherit; }

  .ps__cta p {
    max-width: 670px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.62;
  }

  .ps__cta-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 64px;
    margin-top: 34px;
    padding: 0 12px 0 28px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ps-navy);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
  }

  .ps__cta-button:hover { background: var(--ps-pale, #9ec9f0); transform: translateY(-2px); }
  .ps__cta-button svg { width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: var(--ps-blue); color: #fff; }

  .ps__cta-points {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 850px;
    margin: clamp(54px, 6vw, 78px) auto 0;
    padding: 29px 0 34px;
    border-top: 1px solid rgba(158, 201, 240, .25);
    list-style: none;
  }

  .ps__cta-points li { min-width: 0; padding: 0 16px; border-right: 1px solid rgba(158, 201, 240, .25); }
  .ps__cta-points li:last-child { border-right: 0; }
  .ps__cta-points b { display: block; color: #fff; font-size: clamp(16px, 1.8vw, 23px); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; }
  .ps__cta-points span { display: block; margin-top: 7px; color: rgba(255, 255, 255, .57); font-size: 12px; line-height: 1.35; }

  .why-slot { display: none; }

  @media (max-width: 860px) {
    .ps { padding: 92px 0 64px; }
    .ps__grid { grid-template-columns: 1fr; gap: 34px; }
    .ps__intro { position: static; max-width: 650px; }
    .ps__stack { min-height: 1500px; }
    .ps__card { min-height: 248px; }
    .ps__cta { margin-top: 24px; }
  }

  @media (max-width: 700px) {
    .ps { padding: 76px 0 46px; }
    .ps--page { padding-top: 10px; }
    .ps__intro h2 { font-size: clamp(30px, 9vw, 40px); }
    .ps__intro p { font-size: 15px; }
    .ps__stack { min-height: 0; padding: 0; perspective: none; }
    .ps__card {
      position: relative;
      top: auto;
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      margin-bottom: 14px;
      padding: 0;
      transform: none;
      border-radius: 20px;
    }
    .ps__media { height: 184px; min-height: 0; }
    .ps__media img { min-height: 0; }
    .ps__content { padding: 25px 22px 27px; }
    .ps__number { font-size: 10.5px; }
    .ps__card h3 { max-width: 14ch; margin-top: 15px; font-size: 28px; }
    .ps__card p { font-size: 14.5px; }
    .ps__card-foot { margin-top: 22px; }
    .ps__cta { margin-top: 26px; padding: 42px 24px 0; border-radius: 22px; background-size: 36px 36px; }
    .ps__cta-eyebrow { margin-bottom: 17px; padding: 8px 12px; font-size: 9px; }
    .ps__cta h3 { font-size: 32px; }
    .ps__cta p { font-size: 15px; }
    .ps__cta-button { width: 100%; min-height: 58px; margin-top: 26px; }
    .ps__cta-points { grid-template-columns: repeat(2, 1fr); margin-top: 42px; padding: 22px 0; }
    .ps__cta-points li { padding: 14px 10px; border-bottom: 1px solid rgba(158, 201, 240, .25); }
    .ps__cta-points li:nth-child(2) { border-right: 0; }
    .ps__cta-points li:nth-child(n+3) { border-bottom: 0; }
  }

  /* ===== MICRO-INTERACTION DES PHOTOS =====
     Zoom discret sur les visuels de contenu. Les logos, avatars et
     illustrations d'interface restent fixes pour garder une lecture calme. */
  :where(.hv-main, .hv-thumb, .lv__media, .ed__band, .qb__visual, .mt__media, .ps__media) img {
    transition: transform .65s cubic-bezier(.22, .75, .25, 1);
    will-change: transform;
  }

  @media (hover: hover) and (pointer: fine) {
    :where(.hv-main, .hv-thumb, .lv__media, .ed__band, .qb__visual, .ps__media):hover img {
      transform: scale(1.045);
    }

    .mt__step .mt__media:hover img {
      transform: scale(1.065);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.hv-main, .hv-thumb, .lv__media, .ed__band, .qb__visual, .mt__media, .ps__media) img {
      transition: none;
      transform: none;
      will-change: auto;
    }
  }

  /* ===== LISIBILITÉ DES CAS CLIENTS ===== */
  .carousel-section {
    background:
      radial-gradient(760px 520px at 82% 12%, rgba(158, 201, 240, .18), transparent 66%),
      linear-gradient(118deg, #244878 0%, #35649d 54%, #5686c4 100%);
  }

  .carousel-section .ch-track,
  .carousel-section .ch-sticky { background: transparent; }

  .acard-overlay {
    background: linear-gradient(
      to bottom,
      rgba(5, 17, 33, .95) 0%,
      rgba(5, 17, 33, .86) 46%,
      rgba(5, 17, 33, .48) 72%,
      rgba(5, 17, 33, .72) 100%
    );
  }

  .acard-cat,
  .acard-title,
  .acard-teaser {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  }

  .acard-teaser { color: rgba(255, 255, 255, .92); }

  .acard-modal-card,
  .acard-modal-body {
    background: #fff;
  }

  .acard-modal-title,
  .acard-modal-body strong { color: #0a1f3c; }
  .acard-modal-body p { color: #4f5f74; }
  .acard-modal-body .acard-modal-client { color: #65758a; }

  /* ===== BOUTONS DE RÉSERVATION — ARROW FILL QENIVO ===== */
  button.booking-arrow-fill[data-booking] {
    --booking-fill-bg: #fff;
    --booking-fill-text: #0a1f3c;
    --booking-arrow: #3d7fc4;
    --booking-circle: 40px;
    --booking-right: 6px;
    --booking-inset-y: 6px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    max-width: 100%;
    overflow: hidden;
    padding: 0 calc(var(--booking-circle) + var(--booking-right) + 18px) 0 25px;
    border: 1px solid #3d7fc4;
    border-radius: 999px;
    background: #3d7fc4;
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.015em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(10, 31, 60, .2);
    transition: transform .2s ease, box-shadow .25s ease;
    text-rendering: geometricPrecision;
  }

  button.booking-arrow-fill[data-booking]::before,
  button.booking-arrow-fill[data-booking]::after { content: none; }

  .booking-arrow-fill__base {
    position: relative;
    z-index: 1;
    padding-bottom: 1px;
    pointer-events: none;
  }

  .booking-arrow-fill__fill {
    position: absolute;
    z-index: 2;
    inset: var(--booking-inset-y) var(--booking-right) var(--booking-inset-y)
      calc(100% - var(--booking-right) - var(--booking-circle));
    border-radius: 999px;
    background: var(--booking-fill-bg);
    pointer-events: none;
    transition: inset .45s cubic-bezier(.785, .135, .15, .86);
  }

  .booking-arrow-fill__reveal {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--booking-circle) + var(--booking-right) + 18px) 0 25px;
    color: var(--booking-fill-text);
    clip-path: inset(
      var(--booking-inset-y)
      var(--booking-right)
      var(--booking-inset-y)
      calc(100% - var(--booking-right) - var(--booking-circle))
    );
    pointer-events: none;
    transition: clip-path .45s cubic-bezier(.785, .135, .15, .86);
  }

  .booking-arrow-fill__reveal > span { padding-bottom: 1px; }

  .booking-arrow-fill__icon {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: var(--booking-right);
    width: var(--booking-circle);
    height: var(--booking-circle);
    overflow: hidden;
    border-radius: 50%;
    background: var(--booking-fill-bg);
    color: var(--booking-arrow);
    pointer-events: none;
    transform: translateY(-50%);
    -webkit-mask-image: -webkit-radial-gradient(center, white, black);
  }

  .booking-arrow-fill__arrow {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-origin: center;
    transition: transform .45s cubic-bezier(.785, .135, .15, .86);
  }

  button.booking-arrow-fill .booking-arrow-fill__icon svg {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
  }

  .booking-arrow-fill__arrow--in { transform: translateX(-170%) scale(0); }
  .booking-arrow-fill__arrow--out { transform: translateX(0) scale(1); }

  button.booking-arrow-fill[data-booking]:hover,
  button.booking-arrow-fill[data-booking]:focus-visible {
    background: #3d7fc4;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(10, 31, 60, .26);
  }

  button.booking-arrow-fill[data-booking]:hover .booking-arrow-fill__fill,
  button.booking-arrow-fill[data-booking]:hover .booking-arrow-fill__reveal,
  button.booking-arrow-fill[data-booking]:focus-visible .booking-arrow-fill__fill,
  button.booking-arrow-fill[data-booking]:focus-visible .booking-arrow-fill__reveal,
  button.booking-arrow-fill[data-booking][data-pressed="true"] .booking-arrow-fill__fill,
  button.booking-arrow-fill[data-booking][data-pressed="true"] .booking-arrow-fill__reveal {
    inset: 0;
    clip-path: inset(0);
  }

  button.booking-arrow-fill[data-booking]:hover .booking-arrow-fill__arrow--in,
  button.booking-arrow-fill[data-booking]:focus-visible .booking-arrow-fill__arrow--in,
  button.booking-arrow-fill[data-booking][data-pressed="true"] .booking-arrow-fill__arrow--in {
    transform: translateX(0) scale(1);
  }

  button.booking-arrow-fill[data-booking]:hover .booking-arrow-fill__arrow--out,
  button.booking-arrow-fill[data-booking]:focus-visible .booking-arrow-fill__arrow--out,
  button.booking-arrow-fill[data-booking][data-pressed="true"] .booking-arrow-fill__arrow--out {
    transform: translateX(70%) scale(0);
  }

  button.booking-arrow-fill[data-booking]:focus-visible {
    outline: 3px solid rgba(61, 127, 196, .38);
    outline-offset: 3px;
  }

  button.booking-arrow-fill[data-booking]:active { transform: scale(.98); }

  /* La carte tarifaire imposait encore son ancien fond blanc au-dessus du
     composant Arrow Fill. On neutralise uniquement ce conflit afin que le
     bouton de devis ait le même état initial que les autres CTA. */
  .pricing-card.featured button.pricing-cta.booking-arrow-fill[data-booking],
  .pricing-card.featured button.pricing-cta.booking-arrow-fill[data-booking]:hover,
  .pricing-card.featured button.pricing-cta.booking-arrow-fill[data-booking]:focus-visible {
    background: #3d7fc4;
    color: #fff;
    border-color: #3d7fc4;
    box-shadow: 0 7px 18px rgba(10, 31, 60, .2);
  }

  .pricing-card.featured button.pricing-cta.booking-arrow-fill[data-booking]:hover,
  .pricing-card.featured button.pricing-cta.booking-arrow-fill[data-booking]:focus-visible {
    box-shadow: 0 12px 26px rgba(10, 31, 60, .26);
  }

  @media (max-width: 430px) {
    button.booking-arrow-fill[data-booking] {
      --booking-circle: 38px;
      min-height: 50px;
      padding-right: calc(var(--booking-circle) + var(--booking-right) + 15px);
      padding-left: 21px;
      font-size: 13px;
    }

    .booking-arrow-fill__reveal {
      padding-right: calc(var(--booking-circle) + var(--booking-right) + 15px);
      padding-left: 21px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .booking-arrow-fill__fill,
    .booking-arrow-fill__reveal,
    .booking-arrow-fill__arrow,
    button.booking-arrow-fill[data-booking] { transition-duration: .01ms; }
  }

  /* ===== CORRECTIFS MOBILE ============================================
     Passés en revue sur 320 / 360 / 390 / 414 / 430 px.
     =================================================================== */

  /* Le CTA d'en-tête doit disparaître sous 960px — il est repris dans le
     menu déroulant. La règle .glow-btn-sm{display:none} plus haut est
     battue en spécificité par button.booking-arrow-fill[data-booking]
     {display:inline-flex}, ajoutée depuis. Résultat : le bouton restait
     affiché, large de 218px, et poussait le burger hors de l'écran —
     plus aucun accès au menu sous 390px. On réaffirme la règle ici, à
     spécificité suffisante pour l'emporter. */
  @media (max-width: 960px) {
    .nav-right button.glow-btn-sm[data-booking],
    .nav-right .glow-btn-sm { display: none; }
  }

  /* Cibles tactiles : 44px de haut minimum sous le doigt.
     La condition porte aussi sur (hover: none), pas seulement sur la
     largeur : une tablette fait 768 ou 1024px de large mais se pilote au
     doigt — 12 cibles y passaient encore sous 40px. */
  @media (max-width: 760px), (hover: none) {
    .hero-link {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }

    .footer-links a,
    .footer-legal a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

    .footer-contact a { min-height: 40px; display: inline-flex; align-items: center; }

    .acard-modal-close { width: 44px; height: 44px; }

    .logo { min-height: 44px; }
  }

  /* Tout appareil tactile, téléphone comme tablette : les flèches de mois
     du calendrier passent à 44px. Le média (hover: none) vise le mode
     d'interaction plutôt qu'une largeur, une tablette en paysage étant
     large mais pilotée au doigt. */
  @media (hover: none) {
    .qb__calendar-head button { width: 44px; height: 44px; }
  }

  /* ===== POURQUOI QENIVO — chevauchement de la pastille sur mobile =====
     .mt__step reçoit `padding: 92px 0 118px` (règle de bureau, hors media
     query, écrite APRÈS les règles mobiles) : le retrait à gauche prévu
     pour dégager la pastille numérotée était donc remis à zéro à toutes
     les largeurs. Sur téléphone, la pastille « 01 » — positionnée en
     absolu à left:0 — venait se poser sur le titre et sur la carte.
     On redonne le retrait ici, en fin de feuille, pour passer après.
     =================================================================== */
  @media (max-width: 700px) {
    .mt__step { padding-left: 62px; }
  }

  @media (max-width: 430px) {
    .mt__step { padding-left: 54px; }
  }

  /* ===== POURQUOI QENIVO — bascule du titre au-dessus de la carte =====
     Entre 701 et 959px, la colonne du titre est figée à 205px alors que
     « Sur mesure » en mesure 174 et que la carte démarre juste après :
     le texte finissait 17px SOUS la carte. La mise en pile, jusque-là
     réservée à 700px, commence donc dès 959px — la limite mesurée en
     dessous de laquelle les deux colonnes ne tiennent plus.
     =================================================================== */
  @media (max-width: 959px) {
    .mt__step {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      min-height: 0;
      padding-left: 62px;
    }

    .mt__sticky { position: static; padding: 0; }
    .mt__step.is-active .mt__sticky h3 { transform: none; }
    .mt__node { top: 74px; left: 0; }
  }

  /* ===== MÉTHODE — l'empilement des cartes revient sur mobile =========
     Sous 700px, .ps__card repassait en position: relative : les cartes
     défilaient à la file, sans le chevauchement qui fait tout l'intérêt
     de la section. Les cartes mesurent 425 à 511px de haut sur un écran
     de 844 : elles tiennent largement, l'empilement est jouable. On le
     rétablit avec un décalage adapté à la hauteur du header mobile
     (84px au lieu de 116) et un pas resserré (10px au lieu de 14).
     Le relief 3D, lui, reste désactivé : inutile sur si peu de largeur.
     =================================================================== */
  @media (max-width: 700px) {
    .ps__stack { min-height: 0; }

    .ps__card {
      position: sticky;
      top: calc(84px + (var(--ps-index, 0) * 10px));
      margin-bottom: 16px;
    }

    .ps__card:last-child { margin-bottom: 0; }
  }

  /* Sans mouvement : on retire l'empilement, qui repose sur le défilement. */
  @media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .ps__card { position: relative; top: auto; }
  }

  /* ===== ANCRE « CAS D'USAGE » ========================================
     Le lien « Voir nos cas d'usage » du hero pointe sur #cas-usage, dont
     le haut se situe 100px AVANT le début de la piste de défilement. On
     atterrissait donc avant que le panneau collant ne soit épinglé :
     une grande zone vide, puis le titre très bas. La règle générale
     section[id]{scroll-margin-top:80px} aggravait encore le décalage.
     On vise maintenant le haut de la piste, là où le panneau se fige et
     où le titre vient se placer juste sous l'en-tête fixe.
     Les valeurs correspondent au padding haut de la section, qui vaut
     60px sur mobile, 72px jusqu'à 880 et 100px au-delà.
     =================================================================== */
  #cas-usage { scroll-margin-top: -50px; }

  /* Entre 701 et 880px le padding passe à 100px alors que le panneau
     n'est pas encore épinglé : palier intermédiaire, sinon le titre
     tombait 30px plus bas que partout ailleurs. */
  @media (min-width: 701px) and (max-width: 880px) {
    #cas-usage { scroll-margin-top: -80px; }
  }

  @media (min-width: 881px) {
    #cas-usage { scroll-margin-top: -100px; }
  }

  /* ===== LE CONSTAT GLISSE PAR-DESSUS LES LEVIERS ====================
     Même principe que la pile de cartes de la méthode : la section des
     leviers se fige, celle du constat monte par-dessus.

     Les deux sections partagent un conteneur .glisse, et c'est lui qui
     borne l'effet : un élément collant le reste tant que son PARENT
     défile. Sans ce conteneur, le parent serait <body> et les leviers
     resteraient épinglés jusqu'en bas du document.

     Le décalage de collage est négatif et calculé en JS (--lv-stick =
     hauteur de fenêtre − hauteur de la section) : la section se fige
     quand son BAS atteint le bas de l'écran, pas quand son haut atteint
     le sommet. Avec top:0 on ne verrait jamais sa fin — elle mesure
     1145 à 2037px selon la largeur, toujours plus qu'un écran.

     Le constat devient opaque : son voile navy était translucide sur le
     dégradé du site, et par-dessus le blanc des leviers il aurait viré
     au gris bleuté — le texte blanc y serait tombé à 2,6:1. Le dégradé
     est donc repeint dans la section, sous le même voile.
     =================================================================== */
  .glisse { position: relative; }

  .glisse > #benefices {
    position: sticky;
    top: var(--lv-stick, 0px);
    z-index: 1;
  }

  .glisse > #constat {
    position: relative;
    z-index: 2;
    border-radius: 34px 34px 0 0;
    box-shadow: 0 -26px 58px -30px rgba(6, 20, 42, 0.55);
    background-color: #1f3f6e;
    background-image:
      linear-gradient(rgba(10, 31, 60, 0.55), rgba(10, 31, 60, 0.55)),
      linear-gradient(42deg, #1b3260 0%, #23447a 28%, #325c98 55%, #4470b0 80%, #5686c4 100%);
  }

  @media (max-width: 700px) {
    .glisse > #constat { border-radius: 26px 26px 0 0; }
  }

  /* Sans mouvement : plus de glissement, les sections s'enchaînent. */
  @media (prefers-reduced-motion: reduce) {
    .glisse > #benefices { position: relative; top: auto; }
  }

  /* ===== DIAGNOSTIC DE STACK — note et capture d'e-mail ==============
     À l'écran : la note et une phrase. Le détail part par e-mail.
     =================================================================== */
  /* « 60/100 » sur une seule ligne débordait de la pastille : le nombre
     occupe la ligne principale, le dénominateur passe dessous. */
  .stm__score {
    width: 62px;
    height: 62px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 18px;
    background: #2f6ba8;
    color: #fff;
    letter-spacing: -0.03em;
  }

  .stm__score b { font-size: 24px; font-weight: 800; }
  .stm__score small { margin-top: 2px; font-size: 10px; font-weight: 700; opacity: .8; letter-spacing: .04em; }

  .stm__verdict[data-level="ok"] .stm__score { background: #1f9d6b; }
  .stm__verdict[data-level="verifier"] .stm__score { background: #6f9fe0; }

  .stm__verdict-top { align-items: center; gap: 16px; }
  .stm__verdict-top .stm__verdict-text { margin: 4px 0 0; }

  .stm__lead {
    margin-top: 20px;
    padding: 18px 18px 16px;
    border: 1px solid #dbe5f2;
    border-radius: 16px;
    background: #fff;
  }

  .stm__lead-titre { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: #0a1f3c; }
  .stm__lead-sous { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #5a6478; }

  .stm__lead-champs { display: flex; flex-wrap: wrap; gap: 10px; }

  .stm__lead-champs input {
    flex: 1 1 160px;
    min-width: 0;
    min-height: 46px;
    padding: 12px 15px;
    border: 1.5px solid #dbe5f2;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    color: #0a1f3c;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .stm__lead-champs input::placeholder { color: #6b7284; }

  .stm__lead-champs input:focus {
    outline: none;
    border-color: #2f6ba8;
    box-shadow: 0 0 0 4px rgba(61, 127, 196, 0.14);
  }

  .stm__lead-envoi {
    flex: 1 1 100%;
    min-height: 46px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: #2f6ba8;
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .stm__lead-envoi:hover:not(:disabled) { background: #26588c; transform: translateY(-1px); }
  .stm__lead-envoi:focus-visible { outline: 2px solid #0a1f3c; outline-offset: 2px; }
  .stm__lead-envoi:disabled { background: #e8edf4; color: #9aa4b5; cursor: not-allowed; }

  .stm__lead-rgpd { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: #5a6478; }
  .stm__lead-rgpd a { color: #2f6ba8; }

  .stm__lead-etat { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #1f9d6b; }
  .stm__lead-etat:empty { display: none; }
  .stm__lead-etat[data-erreur] { color: #b4341f; }

  /* Séparateur avant le raccourci vers la prise de rendez-vous. */
  .stm__verdict-ou {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    font-size: 12px;
    color: #5a6478;
  }

  .stm__verdict-ou::before,
  .stm__verdict-ou::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dbe5f2;
  }

  @media (min-width: 480px) {
    .stm__lead-envoi { flex: 0 0 auto; }
  }

  @media (max-width: 420px) {
    .stm__score { width: 54px; height: 54px; font-size: 19px; border-radius: 15px; }
  }


/* Lien vers la page « cas d'usage ». Sans lui, cette page serait orpheline :
   aucun lien entrant, donc quasiment aucune chance d'être référencée. */
/* Lien « Voir le détail de nos cas clients », retiré de l'accueil tant que la
   page cas-usage.html n'est pas finalisée. Le style est conservé : le jour où
   on rouvre la page, il n'y a qu'à remettre le <p class="ch-lien">.
   La section a un fond sombre : le lien doit être clair, pas bleu foncé. */
.ch-lien{margin:16px 0 0}
.ch-lien a{
  display:inline-flex;align-items:center;gap:.35em;
  font-size:16px;font-weight:600;color:#ffffff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px;
  transition:border-color .2s ease,opacity .2s ease;
}
.ch-lien a:hover{border-bottom-color:#ffffff}
.ch-lien a:focus-visible{outline:2px solid #ffffff;outline-offset:4px;border-radius:2px}