/* ═══════════════════════════════════════════════════════════════════════════
   AUPTIMA — Design system « IA humanisée »                    24/09/2026
   ───────────────────────────────────────────────────────────────────────────
   Chargée EN DERNIER, après style.css / solar.css / theme-*.css / pages.css :
   cette feuille rhabille sans rien réécrire ailleurs. Pour revenir en arrière,
   il suffit de retirer le <link> — aucune autre feuille n'a été modifiée.

   Ce qu'on quitte : fond dégradé pastel bleu→rose→lavande, boutons en dégradé,
   ombres colorées. Ce qu'on vise : fond crème, bordures d'un cheveu, ombres
   presque invisibles, boutons en pilules pleines, barre flottante.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --hla-creme:      #FBF9F6;
  --hla-creme-2:    #F5F1EB;
  --hla-blanc:      #FFFFFF;
  --hla-encre:      #16140F;
  --hla-encre-2:    #57514A;
  --hla-trait:      rgba(22, 20, 15, .09);
  --hla-trait-fort: rgba(22, 20, 15, .16);
  --hla-ombre:      0 1px 2px rgba(22, 20, 15, .04), 0 8px 24px rgba(22, 20, 15, .05);
  --hla-ombre-mid:  0 2px 4px rgba(22, 20, 15, .05), 0 16px 40px rgba(22, 20, 15, .08);
  --hla-r:          20px;
  --hla-r-pill:     999px;
}

/* ── Fond : du dégradé pastel au crème ─────────────────────────────────── */
body {
  background: var(--hla-creme) !important;
  color: var(--hla-encre);
  -webkit-font-smoothing: antialiased;
}

/* ── Typographie éditoriale : titres serrés, corps aéré ────────────────── */
h1, h2, h3, .hero-content h1, .hub-head h2 { letter-spacing: -0.032em; }
h1 { line-height: 1.06; }
h2 { line-height: 1.14; }
p  { line-height: 1.7; }
.hero-subtitle, .hub-lead, .lp-lead { line-height: 1.7; }

/* ── Barre de navigation flottante ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .navbar {
    top: .85rem;
    left: 50%;
    right: auto;                       /* sans ça, la boîte part de 50% ET colle à droite */
    transform: translateX(-50%);
    width: min(76rem, calc(100% - 2.5rem));
    border-radius: var(--hla-r-pill);
    border: 1px solid var(--hla-trait);
    border-bottom: 1px solid var(--hla-trait);   /* la règle d'origine traçait une ligne en travers */
    background: transparent !important;
    box-shadow: none;
    transition: none;
    overflow: visible;                 /* les menus déroulants sortent de la barre */
  }
  /* Le verre dépoli vit sur un calque INTERNE : posé sur .navbar elle-même, le
     couple backdrop-filter + border-radius laisse un halo clair sous la barre. */
  .navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: var(--hla-ombre);
    transition: background .3s ease, box-shadow .3s ease;
  }
  .navbar.scrolled::before {
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--hla-ombre-mid);
  }
  .navbar > .container { padding-left: 1.5rem; padding-right: .6rem; }
  /* La barre ne touche plus le haut de l'écran : les héros descendent d'autant.
     --nav-h n'est PAS touchée — elle fixe aussi la hauteur de la barre. */
  .hub-hero, .hero, .lp-hero, .pac-hero { padding-top: calc(var(--nav-h, 68px) + 1.6rem + 2.5rem); }
}
@media (max-width: 1023px) {
  /* Le flou passe par un calque interne, jamais par .navbar elle-même :
     backdrop-filter fait de l'élément un bloc de référence pour ses descendants
     en position fixed — et le tiroir de navigation mobile, qui est justement
     fixed et collé en bas de l'écran, se retrouvait collé sous la barre, hors
     de l'écran. Vérifié : sans ce correctif, le tiroir sort à top = -79 px. */
  .navbar {
    background: transparent !important;
    border-bottom: 1px solid var(--hla-trait);
  }
  .navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .90);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar::before { background: rgba(255, 255, 255, .98); }
}

/* ── Boutons : des pilules pleines, jamais des dégradés ────────────────── */
/* ⚠️ Les classes `.lp-*` ne sont PLUS visées ici. Elles n'existent que sur la
   landing go/auptima, qui porte sa propre palette (bronze) et ses propres
   boutons dans son <style>. Les viser depuis cette feuille revenait à lui
   imposer l'accent framboise du site principal en !important : bouton
   d'appel principal rose sur une page bronze, boutons fantômes des blocs
   sombres transformés en pastilles blanches identiques au bouton principal,
   pastille « La différence » ramenée à 3,99:1. */
.btn, .btn-primary, .btn-secondary, .hub-btn {
  border-radius: var(--hla-r-pill) !important;
  letter-spacing: -0.005em;
}
.btn-primary, .hub-btn-primary, .nav-links a.btn-primary {
  background: var(--accent, #E94B7C) !important;
  box-shadow: 0 1px 2px rgba(22, 20, 15, .06), 0 10px 26px rgba(233, 75, 124, .22) !important;
  border: 1px solid transparent;
}
.btn-primary::before { display: none !important; }   /* le reflet qui balaie le bouton */
.btn-primary:hover, .hub-btn-primary:hover {
  background: var(--accent-dk, #B83560) !important;
  box-shadow: 0 2px 4px rgba(22, 20, 15, .07), 0 16px 34px rgba(233, 75, 124, .28) !important;
}
.btn-secondary, .hub-btn-ghost {
  background: var(--hla-blanc) !important;
  border: 1px solid var(--hla-trait-fort) !important;
  box-shadow: var(--hla-ombre);
}
.btn-secondary:hover, .hub-btn-ghost:hover { border-color: var(--accent, #E94B7C) !important; }
.nav-links a.btn-primary { border-radius: var(--hla-r-pill) !important; }

/* ── Surfaces : un trait d'un cheveu, une ombre qu'on devine ───────────── */
.hub-carte, .hub-porte, .hub-svc, .problem-card, .pillar, .pain-card, .lp-power,
.lp-offre-card, .orient-carte, .card, .tarif-card, .plan-card {
  background: var(--hla-blanc);
  border: 1px solid var(--hla-trait);
  border-radius: var(--hla-r);
  box-shadow: var(--hla-ombre);
}
.hub-carte-phare, .hub-porte-phare { box-shadow: var(--hla-ombre-mid); }
.problems, .reassurance, .hub-orient, .hub-services { background: var(--hla-creme-2) !important; }
.footer { background: var(--hla-creme-2) !important; border-top: 1px solid var(--hla-trait); }

/* ── Ondes sonores : un appel qui respire, en CSS ──────────────────────── */
.hla-wave { display: inline-flex; align-items: center; gap: 2px; height: 1em; }
.hla-wave i {
  display: block; width: 2px; border-radius: 2px;
  background: currentColor; opacity: .55;
  animation: hla-onde 1.25s ease-in-out infinite;
}
.hla-wave i:nth-child(1) { height: 30%; animation-delay: 0s; }
.hla-wave i:nth-child(2) { height: 65%; animation-delay: .12s; }
.hla-wave i:nth-child(3) { height: 100%; animation-delay: .24s; }
.hla-wave i:nth-child(4) { height: 55%; animation-delay: .36s; }
.hla-wave i:nth-child(5) { height: 25%; animation-delay: .48s; }
@keyframes hla-onde {
  0%, 100% { transform: scaleY(.45); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .hla-wave i { animation: none; transform: none; }
}

/* ── Les derniers dégradés : aplatis ──────────────────────────────────── */
.hub-carte-phare .hub-btn-light,
.hub-carte-badge, .hub-porte-badge,
.badge-offerte, .hub-form-badge {
  background: var(--accent, #E94B7C) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(22, 20, 15, .06), 0 8px 20px rgba(233, 75, 124, .20) !important;
}
.hub-form-badge { background: var(--hla-blanc) !important; color: var(--accent-dk, #B83560) !important;
  box-shadow: none !important; border: 1px solid var(--hla-trait); }
.toggle-pill.active, .billing-toggle .active { background: var(--accent, #E94B7C) !important; }

/* ── Détails qui trahissent le « SaaS IA générique » ───────────────────── */
.hero::before, .hero::after { opacity: .45; }        /* le halo multicolore, atténué */
.logo-icon { box-shadow: none !important; }
.section-label, .hub-kicker, .lp-kicker { letter-spacing: .16em; }

/* ═══════════════════════════════════════════════════════════════════════════
   Harmonisation globale — 25/09/2026
   Mesuré avant d'être corrigé : chaque valeur ci-dessous vient d'un audit des
   23 routes en 320, 390 et 1440 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contraste du bouton principal ──────────────────────────────────────────
   Le texte blanc sur #E94B7C donne 3,64 — sous le seuil AA de 4,5 pour du
   texte de 16 px. Vérifié en échantillonnant le pixel réellement peint, pas
   la valeur CSS. #B83560 donne 5,65, et reste la teinte de la marque.
   #E94B7C n'est pas banni : il garde les aplats décoratifs, où il ne porte
   aucun texte. */
.btn-primary, .hub-btn-primary, .nav-links a.btn-primary,
.qs-submit, .submit, button[type="submit"].btn-primary {
  background: #B83560 !important;
  background-image: none !important;
}
.btn-primary:hover, .hub-btn-primary:hover,
.qs-submit:hover, .submit:hover { background: #A02C52 !important; }
/* Le texte suit le fond : /conseil-automatisation imposait une encre brune sur
   le bouton rose (2,98). Blanc sur #B83560 = 5,65. */
.btn-primary, .hub-btn-primary, .nav-links a.btn-primary,
.qs-submit, .submit { color: #fff !important; }

/* Petits textes accentués : même raison, 3,47 sur fond clair. */
.qs-req, .accent-link, .section-label, .qs-eyebrow, .formation-module-number {
  color: #B83560 !important;
}

/* ── Boutons : la pilule partout ────────────────────────────────────────────
   Le tunnel gardait deux boutons à 10 et 12 px de rayon. */
.qs-btn-back, .qs-btn-next, .qs-submit, .submit,
button.btn, a.btn, [class*="btn-"] { border-radius: 999px !important; }

/* ── Enfants de grille : autoriser le rétrécissement ────────────────────────
   `min-width: auto` est la valeur par défaut d'un enfant de grille : il refuse
   de descendre sous la largeur de son contenu et sort de la piste. C'est ce qui
   faisait déborder /contact de 49 px à 320 px (enfant 351 px dans une piste de
   284 px). */
.contact-layout > *, .hub-portes > *, .hub-cartes > *, .lp-compare-grid > *,
.footer-grid > *, .qs-grid > * { min-width: 0; }
.contact-info, .contact-trust-item, .hub-porte-txt, .lp-col li span { overflow-wrap: anywhere; }

/* ── Gabarits : mêmes largeurs, mêmes respirations ──────────────────────────
   Les pages secondaires flottaient entre plusieurs largeurs de conteneur et
   hauteurs de section. Une seule règle, héritée partout. */
.container { max-width: 72rem; }            /* ~1152 px, cohérent avec la barre flottante */
.page-hero, .pac-hero, .hub-hero, .lp-hero { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
main > section { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* ── Cartes : un seul style, partout ────────────────────────────────────── */
.problem-card, .pillar, .pain-card, .metier-card, .faq-item, .tarif-card,
.plan-card, .module-card, .formation-module, .support-card, .service-card {
  background: var(--hla-blanc);
  border: 1px solid var(--hla-trait);
  border-radius: 22px;
  box-shadow: var(--hla-ombre);
}

/* ── Grilles : un écart régulier ────────────────────────────────────────── */
.problems-grid, .pillars-grid, .pains-grid, .metiers-grid, .modules-grid,
.services-grid, .faq-grid { gap: 2rem; }

/* ── Correctifs issus du second passage d'audit ─────────────────────────────
   Mesurés sur le fond RÉELLEMENT peint, pas sur la valeur CSS héritée. */

/* Régression que j'ai introduite : forcer le fond blanc du bouton secondaire
   le rendait blanc sur blanc là où la section imposait un texte clair (CTA
   final des pages métier, /pac, /referent-digital, /conseil-automatisation).
   Le fond blanc reste — c'est la direction voulue — mais le texte suit. */
.btn-secondary, .hub-btn-ghost {
  color: var(--text, #171412) !important;
}
.btn-secondary .si, .hub-btn-ghost .si { color: inherit; }

/* Toutes les pastilles et badges qui portent du texte blanc sur l'accent :
   #E94B7C donne 3,64, #B83560 donne 5,65. */
.hub-porte-badge, .hub-carte-badge, .bnf-cell-tag, .flow-num, .qualif-num,
.svc-step-num, .billing-opt.active, .step-num, .num-badge,
.hub-carte-phare .hub-btn-light {
  background: #B83560 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Flèches et petits signes accentués sur fond clair : 3,24 → 5,38. */
.hub-porte-fleche, .orient-fleche, .svc-plus, .hub-svc-plus { color: #B83560 !important; }

/* Boutons de la vérification du mobile : `var(--accent)` n'existe pas sur la
   page du tunnel, le fond retombait en blanc — texte blanc sur blanc. */
.qs-otp .qs-otp-envoi, .qs-otp .qs-otp-valider {
  background: #B83560 !important;
  color: #fff !important;
  border-color: transparent !important;
}
.qs-otp .qs-otp-renvoi { color: var(--text, #171412) !important; }

/* ── Pied de page : le bloc « Entreprise » passe en ligne ───────────────────
   Six blocs dans une grille de quatre colonnes forçaient une rangée
   supplémentaire, et le pied montait à 734 px en desktop, 1885 px en mobile.
   Les mentions légales n'ont pas besoin d'une colonne : elles tiennent sur une
   ligne, sous les autres, séparées par un trait. Le titre disparaît de l'œil
   mais reste pour les lecteurs d'écran (le <nav> porte déjà son aria-label). */
.footer-grid nav[aria-label="Entreprise"] {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;      /* .footer-col impose `column` : il faut le dire */
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-top: .25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hla-trait);
}
.footer-grid nav[aria-label="Entreprise"] > .footer-col-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.footer-grid nav[aria-label="Entreprise"] > a { margin: 0; }

/* ── Pages qui gardaient un fond d'avant le crème ───────────────────────────
   /formation ouvrait sur un dégradé lavande (#F4EFF8 → #EDE6F4), hérité du
   thème pastel : la page jurait avec le reste du site. Même traitement pour
   tout hero qui porterait encore son propre dégradé. */
.formation-hero, .page-hero, .hero-gradient {
  background-image: none !important;
  background-color: transparent !important;
}
.formation-hero { background: linear-gradient(180deg, #FFFDFA 0%, var(--hla-creme-2) 100%) !important; }

/* ── Cartes de démonstration : les lecteurs à la même hauteur ───────────────
   Les descriptions n'ont pas la même longueur d'une carte à l'autre : le
   lecteur d'appel démarrait plus bas à droite qu'à gauche. La carte devient
   une colonne et pousse le lecteur en bas, quelle que soit la longueur du
   texte au-dessus. */
.persona-card { display: flex; flex-direction: column; }
.persona-card .call-replay { margin-top: auto; }

/* Le lien « Voir le tarif en détail » des six pages métier mesurait 26 px de
   haut : c'est la hauteur de sa ligne de texte, rien de plus. Il passe pourtant
   à la ligne derrière un <br>, donc le doigt le vise comme un bouton. On lui
   donne la hauteur d'une cible confortable en compensant sur la marge : le
   texte ne bouge pas d'un pixel, seule la zone sensible grandit. */
.metier-price .accent-link { margin-top: .05rem; padding-block: .45rem; }

/* La pastille « Appeler » du header mobile portait du blanc sur un dégradé qui
   s'éclaircit vers la droite — et un reflet blanc à 28 % par-dessus. Mesuré au
   pixel peint : 2,07:1 sur helloauptima.com, 2,24:1 sur la landing salons, là
   où AA demande 4,5. C'est le seul bouton d'appel visible sur mobile, sur
   toutes les pages des deux domaines.
   `--accent-dk` vaut #B83560 sur le site (5,65) et #85582C sur la landing
   bronze (6,12) : chaque hôte garde sa teinte, les deux passent. */
.nav-reserve-icon {
  background: var(--accent-dk, #B83560) !important;
  background-image: none !important;
  color: #fff !important;
}
.nav-reserve-icon::before { display: none !important; }

/* La carte « phare » de /hello gardait le thème pastel : fond rose dégradé
   quand toutes les autres cartes sont crème, et sa pastille peinte en
   dégradé `--accent-lt → --accent`. Blanc sur l'extrémité claire : 2,37:1,
   mesuré au pixel peint. Aplatie sur #B83560, elle donne 5,65.
   L'étoile en emoji part avec : la charte est aux icônes Solar. */
.pillar.featured {
  background: var(--hla-blanc) !important;
  border-color: var(--hla-trait-fort) !important;
}
.pillar.featured::before {
  content: 'Phare' !important;
  background: #B83560 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Trois emojis couleur subsistaient dans des `content:` — invisibles à la
   recherche dans le HTML, mais bien affichés. La charte est aux icônes Solar.
   On garde le `::before`, on remplace le glyphe par le masque SVG. */
.bnf-cell-bad::before { content: 'Salarié SMIC' !important; }
.formation-action-box .action-title::before,
.qs-prefill-badge::before {
  content: '' !important;
  display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.15em;
  background-color: currentColor;
  -webkit-mask: var(--si) center/contain no-repeat; mask: var(--si) center/contain no-repeat;
}
.formation-action-box .action-title::before { --si: url("/img/icons/solar/target.svg"); }
.qs-prefill-badge::before { --si: url("/img/icons/solar/wand.svg"); }

/* ── Les derniers restes du thème pastel ────────────────────────────────── */
/* `--bg` et `--bg-2` portaient encore le lavande (#F4EFF8 / #EDE6F4) du thème
   d'origine. Le fond du <body> avait bien été repris en crème, mais les
   SECTIONS qui peignent `var(--bg-2)` gardaient leur bande lavande : /tarifs
   en aplat, /benefices en deux dégradés. Une page sur quatre jurait avec les
   autres. On mappe les deux jetons sur le crème plutôt que de traquer chaque
   section — la feuille du thème reste intacte. */
:root {
  --bg:   var(--hla-creme);
  --bg-2: var(--hla-creme-2);
}

/* Le panneau de résultat du simulateur de /benefices peignait du blanc sur
   `--accent → --accent-lt`, c'est-à-dire un rose qui s'éclaircit jusqu'à
   #FF8A9B. Mesuré au pixel peint : 2,18 à 3,28:1 sur treize textes — les
   libellés, les deux chiffres géants et la note de bas de bloc. C'est le
   bloc qui porte l'argument de vente de la page.
   Le dégradé reste, il descend d'un cran : #B83560 donne 5,65 et #9E2C4E
   7,17 avec du blanc. Les deux mini-cartes, qui sont du blanc à 12 %
   par-dessus, suivent. */
.bnf-roi-result {
  background: linear-gradient(160deg, #B83560, #9E2C4E) !important;
}
/* La note de bas de panneau héritait de `--text-2` (#4E4B6A, l'ardoise du thème
   pastel) au lieu du blanc du bloc : 1,18:1. Elle disait le plus important —
   que le calcul applique un coefficient prudent. */
.bnf-roi-result p, .bnf-roi-fineprint { color: rgba(255,255,255,.94) !important; }
/* La pastille « Rentable dès la 1ʳᵉ semaine » est du blanc à 18 % posé sur le
   panneau : elle éclaircissait son propre fond sous le texte qu'elle porte.
   Le voile descend à 4 % — c'est la bordure qui la détache désormais. */
.bnf-roi-badge {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.42) !important;
}

/* Les halos de hero : `.hero::before/::after` avaient déjà été atténués, mais
   chaque page porte sa propre classe et gardait son voile rose à 30 %. Sur
   /benefices il passe exactement sous le libellé de section : #B83560 sur
   crème donne 5,38, sur ce voile 2,47 — le titre se fondait dans le décor. */
.bnf-hero::before, .page-hero::before, .pac-hero::before,
.hub-hero::before, .hub-hero::after { opacity: .28; }

/* /quick-start : l'ardoise claire #64748B des aides et des sous-titres de
   cartes donne 4,19–4,20 sur le fond du tunnel, sous le seuil AA de 4,5.
   #475569 donne 6,68 sans changer la hiérarchie — ça reste du texte second. */
.qs-help, .qs-checkbox-card-sub, .qs-hint, .qs-sub,
.qs-prefill-skip { color: #475569 !important; }

/* Le bouton qui fait avancer tout le tunnel d'inscription était un dégradé
   #E94B7C → #FF8A9B : blanc dessus, 2,69:1 mesuré sur sa moitié claire.
   C'est le seul bouton d'action de la page, à chaque étape. */
.qs-btn-next {
  background: #B83560 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(22,20,15,.06), 0 8px 22px rgba(184,53,96,.26) !important;
}

/* Le bouton d'appel du hero de /demo partait de `--accent-lt` (#FF8A9B) :
   le libellé blanc de sa moitié gauche tombait à 3,29:1. Le dégradé garde
   son mouvement, mais entre deux teintes qui portent du blanc. */
.hero-call-cta {
  background: linear-gradient(135deg, #B83560 0%, #A02C52 100%) !important;
}

/* Les bulles de Léa sur les six pages métier partent de `--accent` (#E94B7C) :
   3,89–3,93:1 mesurés sur leur moitié claire. C'est la démonstration de la
   conversation, le bloc qu'on lit le plus longtemps de ces pages. */
.chat-msg.chat-hello .chat-bubble {
  background: linear-gradient(135deg, #B83560 0%, #A02C52 100%) !important;
}

/* Les CTA finaux sombres des pages service : leur <section> pose `color: #fff`,
   mais `style.css` colore les <p> en `--text-2` — et une règle sur l'élément
   bat toujours l'héritage. Résultat, la phrase qui explique l'offre était en
   ardoise #4E4B6A sur un bloc bleu nuit : 1,83 et 1,90:1 (/conseil-automatisation
   et /referent-digital). */
.svc-cta-final p, .svc-cta-final li { color: inherit !important; }

/* Derniers fonds hérités du thème pastel, écrits en dur donc hors d'atteinte
   des jetons : lavande du hero de /referent-digital et de la barre d'action de
   /quick-start, arc-en-ciel bleu→rose→lavande de la démo plein écran. */
.sol-digital .svc-hero { background: linear-gradient(135deg, #FFFDFA 0%, var(--hla-creme-2) 100%) !important; }
.qs-nav { background: linear-gradient(0deg, var(--hla-creme) 0%, rgba(251,249,246,.85) 70%, rgba(251,249,246,0) 100%) !important;
          border-top-color: var(--hla-trait) !important; }
body.demo-active #agentDemo { background: linear-gradient(180deg, var(--hla-creme) 0%, var(--hla-creme-2) 100%) !important; }

/* ── Défauts remontés par l'audit à vision, vérifiés au rendu servi ─────── */

/* La barre d'action du tunnel était transparente en bas (`rgba(…,0) 100%`) :
   le contenu se voyait derrière au lieu d'être masqué. Elle est opaque, avec
   un filet et une ombre pour dire qu'elle flotte au-dessus de l'étape. */
.qs-nav {
  background: var(--hla-creme) !important;
  border-top: 1px solid var(--hla-trait) !important;
  box-shadow: 0 -8px 24px rgba(22, 20, 15, .06) !important;
}

/* La zone de conversation de /contact a une hauteur FIXE de 380 px pour une
   seule bulle au chargement : 344 px de vide mesurés, soit le plus grand
   élément du premier écran qui a l'air de n'avoir pas chargé. Elle s'ajuste
   à son contenu, sans dépasser la moitié de l'écran, et les messages se
   posent en bas comme dans une vraie conversation. */
.chatbot-messages {
  height: auto !important;
  min-height: 180px;
  max-height: min(380px, 50dvh);
  overflow-y: auto;
  justify-content: flex-end;
}

/* Le seul lien vers l'essai sur /contact héritait de `a { color: inherit;
   text-decoration: none }` : même gris que le texte courant, sans soulignement
   ni graisse. Seule la flèche laissait deviner qu'il était cliquable. */
.contact-info p a, .contact-layout p a {
  color: #B83560 !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Entre 640 et 1023 px, le tiroir de navigation posait ses liens dans une
   grille de SIX colonnes fixes. Le bouton d'essai occupe toute la première
   rangée ; restent cinq liens pour six cases, donc une case vide à droite et
   un bloc qui penche à gauche. Chaque libellé étant centré dans sa propre
   cellule, leurs bords gauches ne s'alignent pas non plus.
   En flex, la rangée se centre d'elle-même quel que soit le nombre de liens —
   et la barre n'a pas le même compte d'une page à l'autre. */
@media (min-width: 640px) and (max-width: 1023px) {
  .nav-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    column-gap: clamp(1rem, .5rem + 2vw, 2.5rem); row-gap: .5rem;
  }
  .nav-links > li { flex: 0 1 auto; }
  .nav-links > li:last-child { flex: 1 0 100%; }
}

/* La bande de réassurance du pied porte cinq promesses qui réclament 1 158 px
   pour 1 104 disponibles : la cinquième, « Sans engagement », passait seule à
   la ligne, centrée sous les quatre autres — elle se lisait comme un oubli.
   54 px manquaient : la graisse du texte les rend sans toucher à la lisibilité
   (c'est déjà du texte secondaire), et l'écart entre items se resserre. */
@media (min-width: 1152px) {
  .footer-trust { font-size: .8125rem; column-gap: 1rem; }
}
/* Entre 1024 et 1151 px le conteneur ne fait que 976 px : les cinq ne tiennent
   pas, même resserrés. Plutôt que de rapetisser le texte jusqu'à l'illisible,
   on assume deux rangées ÉQUILIBRÉES (3 + 2) au lieu de quatre plus une. */
@media (min-width: 1024px) and (max-width: 1151.98px) {
  .footer-trust { display: grid; grid-template-columns: repeat(3, auto);
                  justify-content: center; font-size: .8125rem; column-gap: 1.25rem; }
}