/* ═══════════════════════════════════════════════════════════════════
   lemo.css — composants du calque LEMO, portés du prototype
   (prototype-lemo.html) vers le site réel. Chargé APRÈS style.css et
   home.css. Autonome : définit ses propres tokens de couleur (déjà les
   valeurs réelles de lemo.com) plutôt que de dépendre de --gold/--green-*
   de style.css, pour ne pas être fragile aux futures retouches de ces
   variables historiques.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lemo-primary-200: var(--ng-primary-soft);
  --lemo-primary-500: var(--ng-primary);
  --lemo-primary-600: var(--ng-primary-ring);
  --lemo-primary-700: var(--ng-primary-dark);
  --lemo-fg-200: var(--ng-bg);
  --lemo-fg-300: var(--ng-border);
  --lemo-fg-400: var(--ng-border-strong);
  --lemo-fg-500: var(--ng-text-hint);
  --lemo-fg-700: var(--ng-text-muted);
  --lemo-fg-800: var(--ng-text);
}

/* ── Typo — échelle .headings--title/l/m/s ── */
.headings--title {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 5rem; line-height: 4rem; font-weight: 800;
  letter-spacing: -0.02em; text-transform: uppercase; margin: 0;
}
.headings--l { font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 3rem; line-height: 2.625rem; font-weight: 700; margin: 0; }
.headings--m { font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.875rem; line-height: 1.875rem; font-weight: 700; margin: 0; }
.headings--s { font-family: "Plus Jakarta Sans", Arial, sans-serif; font-size: 1.25rem; line-height: 1.25rem; font-weight: 500; margin: 0; }
.text-highlight { color: var(--lemo-primary-500) !important; }

/* Calque LEMO sur le vrai hero de l'accueil (.nh-hero-copy h1) : gros
   titre serré. Reste en casse normale (pas uppercase) — la phrase réelle
   est une phrase complète ("Une seule app, plusieurs métiers"), pas un
   slogan à deux mots comme chez LEMO ; forcer les majuscules la rendrait
   illisible plutôt que fidèle. */
.hero-banner__title h1 {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: left;
  margin: 0;
}

/* ── Container ── */
.lemo-container { width: 100%; max-width: 120rem; margin-inline: auto; padding-inline: 1.5rem; }

/* ── Header ── */
header.header { position: sticky; top: 0; z-index: 80; background: #fff; border-bottom: 1px solid var(--lemo-fg-300); }
/* .header__bar n'impose pas gap/height ici : sur le vrai nav (.nav-inner
   existe déjà, gap:36px/height:66px) ce calque ne doit RETOUCHER que ce
   qui manque, jamais écraser une valeur déjà correcte sur le même
   élément — piège trouvé le 2026-09-22 (Blog/FR collés, gap à 0). */
.header__burger {
  display: none; flex: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 1.5rem; height: 1.5rem; margin-right: 1rem; background: none; border: none; padding: 0; cursor: pointer;
}
.header__burger__bar { display: block; width: 100%; height: 2px; background: var(--ng-navy); transition: transform .2s ease, opacity .2s ease; }
.header.is-open .header__burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.is-open .header__burger__bar:nth-child(2) { opacity: 0; }
.header.is-open .header__burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header__logo {
  display: flex; align-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.25rem;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--lemo-fg-800);
  margin-right: 2rem; flex-shrink: 0;
}
.header__logo span { color: var(--lemo-primary-500); }
.header__logo.brand { gap: 0; } /* .brand{gap:11px} insérait un espace entre "nee" et <span>gui</span> */
.header__logo img { height: 2.25rem; display: block; }

.header__nav-primary { display: flex; align-items: center; height: 100%; list-style: none; margin: 0; padding: 0; gap: 2rem; }
.header__nav-primary__item { position: relative; display: flex; align-items: center; height: 100%; }
.header__nav-primary__item > a {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--lemo-fg-800);
  padding: 0.4rem 0; border-bottom: 2px solid transparent;
}
.header__nav-primary__item > a:hover,
.header__nav-primary__item:hover > a { border-bottom-color: var(--lemo-primary-500); }
.header__nav-primary__item svg.caret { width: 0.7rem; height: 0.7rem; transition: transform .18s ease; }
.header__nav-primary__item:hover svg.caret { transform: rotate(180deg); }

.header__mega {
  position: absolute; top: 100%; left: 0; margin-top: 1px;
  min-width: 28rem; background: #fff; border: 1px solid var(--lemo-fg-300);
  padding: 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 90;
}
.header__mega--wide { min-width: 40rem; grid-template-columns: repeat(3, 1fr); }
.header__nav-primary__item:hover .header__mega { opacity: 1; visibility: visible; transform: translateY(0); }
.header__mega__cell { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.6rem; color: inherit; }
.header__mega__cell:hover { background: var(--lemo-fg-200); }
.header__mega__cell .ic {
  width: 2rem; height: 2rem; flex: none; display: grid; place-items: center;
  background: var(--lemo-primary-200); color: var(--lemo-primary-700);
}
.header__mega__cell .ic svg { width: 1rem; height: 1rem; }
.header__mega__cell strong { display: block; font-size: 0.85rem; font-weight: 700; }
.header__mega__cell span { display: block; font-size: 0.78rem; color: var(--lemo-fg-700); margin-top: 0.15rem; line-height: 1.4; }
.header__mega__foot { grid-column: 1 / -1; border-top: 1px solid var(--lemo-fg-300); margin-top: 0.5rem; padding-top: 0.5rem; }

.header__search {
  display: flex; align-items: center; height: 3.5rem; flex: 0 1 6.5rem; min-width: 4rem; max-width: 6.5rem;
  margin: 0 0.75rem; padding: 0 0.6rem;
  border-left: 1px solid var(--lemo-fg-500); border-right: 1px solid var(--lemo-fg-500);
}
.header__search-form { display: flex; align-items: center; width: 100%; position: relative; }
.header__search-form input {
  width: 100%; border: 0; border-radius: 16px; background: transparent;
  padding: 0.5rem 2rem 0.5rem 0; color: var(--lemo-fg-700); font-family: inherit; font-size: 0.9rem; outline: none;
}
.header__search-form input::placeholder { color: var(--lemo-fg-500); }
.header__search-form button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; color: var(--lemo-fg-700); display: flex; }
.header__search-form svg { width: 1.1rem; height: 1.1rem; }

.header__nav-secondary { display: flex; align-items: center; height: 100%; }
.header__nav-secondary > * { display: flex; align-items: center; gap: 0.25rem; height: 100%; padding: 0 0.5rem; border-left: 1px solid var(--lemo-fg-500); color: var(--lemo-fg-800); white-space: nowrap; font-size: 0.85rem; }
.header__nav-secondary svg { width: 1rem; height: 1rem; }
.nav-links.header__nav-primary { gap: 16px; }
.nav-right { flex-shrink: 0; gap: 12px !important; }
.link-ghost, .btn.btn-gold { white-space: nowrap; }
.wrap.nav-inner.header__bar { padding-inline: 24px; }
.header__nav-secondary svg { width: 1.15rem; height: 1.15rem; }
.header__nav-secondary__label { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.header__actions { display: flex; align-items: center; gap: 0.75rem; margin-left: 1.5rem; }

.header__mobile-panel {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--lemo-fg-300);
  max-height: calc(100vh - 4.5rem); overflow-y: auto;
}
.header.is-open .header__mobile-panel { display: block; }
.header__mobile-panel__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--lemo-fg-300);
  font-size: 1rem; font-weight: 600; color: var(--lemo-fg-800); width: 100%; background: none; border-left: none; border-right: none; border-top: none; text-align: left; font-family: inherit; cursor: pointer;
}
.header__mobile-panel__link svg { width: 0.9rem; height: 0.9rem; transition: transform .18s ease; }
.header__mobile-panel__group.is-open .header__mobile-panel__link svg { transform: rotate(180deg); }
.header__mobile-panel__sub { padding: 0 1.5rem 1rem; flex-direction: column; gap: 0.25rem; }
.header__mobile-panel__group:not(.is-open) .header__mobile-panel__sub { display: none; }
.header__mobile-panel__group.is-open .header__mobile-panel__sub { display: flex; }
.header__mobile-panel__sub a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; color: var(--lemo-fg-700); font-size: 0.9rem; }
.header__mobile-panel__sub a svg { width: 1.1rem; height: 1.1rem; color: var(--lemo-primary-600); }
.header__mobile-panel__actions { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem; }
.header__mobile-panel__utils { display: flex; gap: 1.5rem; padding: 0 1.5rem 1.25rem; }
.header__mobile-panel__utils a { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--lemo-fg-800); }
.header__mobile-panel__utils svg { width: 1.1rem; height: 1.1rem; }

/* Palier intermédiaire — en dessous de ~1400px (1366px = résolution
   laptop la plus courante), recherche+nav+boutons ne tenaient plus sur
   une ligne et faisaient déborder TOUTE la page horizontalement (pas
   juste le carrousel de cartes). Recherche masquée, nav resserrée. */
@media (max-width: 1400px) and (min-width: 901px) {
  .header__search { display: none; }
  .nav-links.header__nav-primary { gap: 12px; }
  .header__nav-secondary > * { padding: 0 0.4rem; }
  .header__logo { margin-right: 1.25rem; }
}

html, body { overflow-x: hidden; } /* garde-fou : ne dépend plus d'un seul point de rupture trouvé au cas par cas */

@media (max-width: 900px) {
  .header__burger { display: flex; }
  .header__logo { margin-right: auto; width: auto; }
  .header__nav-primary { display: none; }
  .header__search { margin: 0 0.5rem; min-width: 0; max-width: none; padding: 0 0.5rem; }
  .header__nav-secondary > * { padding: 0 0.6rem; }
  .header__nav-secondary__label { display: none; }
  .header__actions { display: none; }
}
@media (min-width: 901px) { .header__mobile-panel { display: none !important; } }

/* ── Boutons ── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.9375rem; font-weight: 600; padding: 0.875rem 1.5rem;
  border: 1px solid transparent; border-radius: 14px; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease; cursor: pointer;
}
.button--primary { background: var(--lemo-primary-500); color: #fff; }
.button--primary:hover { background: var(--lemo-primary-700); }
.button--secondary { background: #fff; color: var(--lemo-primary-500); border-color: currentColor; }
.button--secondary:hover { background: var(--lemo-primary-200); }
.button--secondary-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.button--secondary-dark:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.button svg { width: 0.875rem; height: 0.875rem; flex: none; }
.button--sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; }

/* ── Hero ── */
.hero-banner { position: relative; overflow: hidden; background: var(--ng-navy); color: #fff; }
.hero-banner__media {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 85% 15%, rgba(var(--ng-primary-rgb), .35), transparent 60%), linear-gradient(180deg, var(--ng-navy) 0%, var(--ng-navy) 100%);
}
.hero-banner__media::after {
  content: ""; position: absolute; inset: 0; opacity: .06;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-banner__inner { position: relative; padding: 7rem 0 0; }
.hero-banner__title h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.hero-banner__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 5rem; }

.section-title { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 37.5rem; margin-inline: auto; padding-inline: 0.75rem; }
.section-title .bond { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--lemo-primary-500); margin-bottom: 1.25rem; }
.section-title p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.hero-banner__section-title { border-top: 1px solid rgba(255,255,255,.16); padding-top: 2.5rem; }
.hero-banner__section-title p { color: var(--lemo-fg-400); }
.section-title--start { align-items: flex-start; text-align: left; margin-inline: 0; }

.lemo-section { padding: 5.5rem 0; }
.lemo-section--gray { background: var(--lemo-fg-200); }
.lemo-section--dark { background: var(--ng-navy); color: #fff; }
.lemo-section--dark .section-title p { color: var(--lemo-fg-400); }
.section-title-block { margin-bottom: 3.5rem; }

/* Calque LEMO sur le vrai bloc secteurs de l'accueil (.nh-mods) : LEMO
   présente ses "fields of application" en slider horizontal, pas en
   grille statique à 4 colonnes — surtout qu'il y a 7 secteurs réels, pas
   4. Le style de chaque .nh-mod (photo + titre + texte) est déjà LEMO,
   seul le conteneur change de grille à slider. */
.nh-mods {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.nh-mods::-webkit-scrollbar { display: none; }
.nh-mods .nh-mod { flex: 0 0 15.5rem; scroll-snap-align: start; }

/* ── Slider de cartes ── */
.card-slider-wrap { position: relative; }
.card-slider { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.card-slider::-webkit-scrollbar { display: none; }
.card-slider__controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; }
.card-slider__arrow {
  width: 2.25rem; height: 2.25rem; flex: none; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--lemo-fg-400); color: var(--lemo-fg-800); cursor: pointer;
}
.card-slider__arrow:hover { border-color: var(--lemo-primary-500); color: var(--lemo-primary-500); }
.card-slider__arrow svg { width: 1rem; height: 1rem; }
.card-slider__dots { display: flex; align-items: center; gap: 0.5rem; }
.card-slider__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--lemo-fg-400); border: none; padding: 0; cursor: pointer; }
.card-slider__dot.is-active { background: var(--lemo-primary-500); }
.card-thematic { flex: 0 0 17.5rem; scroll-snap-align: start; background: #fff; border: 1px solid var(--lemo-fg-300); padding: 0.938rem; }
.card-thematic__image {
  aspect-ratio: 4 / 3; width: 100%;
  background: repeating-linear-gradient(135deg, var(--lemo-fg-200), var(--lemo-fg-200) 10px, var(--lemo-fg-300) 10px, var(--lemo-fg-300) 20px);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.card-thematic__image span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lemo-fg-700); background: #fff; border: 1px dashed var(--lemo-fg-400); padding: 0.4rem 0.6rem; }
.card-thematic__title { padding: 1.875rem 0; min-height: 6rem; color: var(--lemo-fg-700); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.05rem; font-weight: 600; }
.card-thematic__btn-wrapper { padding: 0 0 0.25rem; display: flex; justify-content: center; }
.card-thematic__btn { font-size: 0.85rem; font-weight: 600; color: var(--lemo-primary-500); border-bottom: 1px solid transparent; }
.card-thematic__btn:hover { border-bottom-color: var(--lemo-primary-500); }

/* ── home-stories — calque LEMO (2026-09-23), corrigé après visite du
   vrai site en direct : la grande vignette a la photo à GAUCHE et le
   texte à DROITE (côte à côte), pas empilés — titre bien plus grand,
   bouton "En savoir plus" + case carrée séparée avec un "+". ── */
.home-stories { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.5rem; }
.home-stories > .teaser {
  display: flex; align-items: stretch; background: none; border: none; gap: 2rem;
}
.home-stories > .teaser .teaser__image { flex: 1 1 55%; aspect-ratio: auto; }
.home-stories > .teaser .teaser__info { flex: 1 1 45%; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.home-stories > .teaser .teaser__title { font-size: 2rem; line-height: 1.1; margin-top: 1rem; }
.home-stories > .teaser .teaser__text { margin-top: 1.25rem; }
.teaser__cta { display: inline-flex; margin-top: 1.5rem; width: fit-content; }
.teaser__cta span, .teaser__cta i {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--lemo-fg-800); padding: 0.85rem 1.4rem; font-size: 0.9rem; font-weight: 600;
}
.teaser__cta i { border-left: none; width: 3rem; padding: 0.85rem 0; font-style: normal; }

.teaser { background: #fff; border: 1px solid var(--lemo-fg-300); }
.teaser__image {
  aspect-ratio: 16/9;
  background: repeating-linear-gradient(135deg, var(--lemo-fg-200), var(--lemo-fg-200) 10px, var(--lemo-fg-300) 10px, var(--lemo-fg-300) 20px);
  display: flex; align-items: center; justify-content: center;
}
.teaser__image span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lemo-fg-700); background: #fff; border: 1px dashed var(--lemo-fg-400); padding: 0.4rem 0.6rem; }
.teaser__info { padding: 1.75rem; }
.teaser__suptitle { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lemo-primary-500); font-weight: 700; }
.teaser__title { display: block; margin-top: 0.6rem; font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.teaser__text { margin-top: 0.75rem; color: var(--lemo-fg-700); font-size: 0.95rem; line-height: 1.55; }
.home-stories__list { display: flex; flex-direction: column; gap: 1rem; }
.home-stories__list .teaser { display: flex; gap: 1rem; padding: 1rem; }
.home-stories__list .teaser__image { width: 8rem; flex: none; aspect-ratio: 1/1; }
.home-stories__list .teaser__info { padding: 0; }
.home-stories__list .teaser__title { font-size: 1rem; margin-top: 0; }

@media (max-width: 900px) {
  .home-stories > .teaser { flex-direction: column; }
}

/* ── Stats ── */
.lemo-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lemo-fg-300); border-bottom: 1px solid var(--lemo-fg-300); }
.lemo-stats__item { padding: 2.5rem 1.5rem; text-align: center; border-left: 1px solid var(--lemo-fg-300); }
.lemo-stats__item:first-child { border-left: none; }
.lemo-stats__num { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: 2.75rem; color: var(--lemo-primary-500); letter-spacing: -0.02em; }
.lemo-stats__label { margin-top: 0.5rem; font-size: 0.85rem; color: var(--lemo-fg-700); text-transform: uppercase; letter-spacing: .04em; }

/* ── Footer ── */
footer.lemo-footer { background: var(--ng-navy); color: #fff; padding-top: 4.5rem; }
.lemo-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.4fr; gap: 2rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.lemo-footer__logo { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.lemo-footer__logo span { color: var(--lemo-primary-500); }
.lemo-footer__about { margin-top: 1rem; color: var(--lemo-fg-400); font-size: 0.9rem; line-height: 1.6; max-width: 16rem; }
.lemo-footer__menu-name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lemo-fg-500); margin-bottom: 1rem; font-weight: 700; }
.lemo-footer__menu-item { display: block; padding: 0.4rem 0; font-size: 0.9rem; color: var(--lemo-fg-300); }
.lemo-footer__menu-item:hover { color: #fff; }
.lemo-footer__mailing-title { font-weight: 700; margin-bottom: 0.75rem; }
.lemo-footer__mailing-form { display: flex; border: 1px solid rgba(255,255,255,.3); }
.lemo-footer__mailing-form input { flex: 1; background: transparent; border: none; padding: 0.85rem 1rem; color: #fff; font-family: inherit; font-size: 0.9rem; }
.lemo-footer__mailing-form input::placeholder { color: var(--lemo-fg-500); }
.lemo-footer__mailing-form button { background: var(--lemo-primary-500); border: none; color: #fff; padding: 0 1.1rem; cursor: pointer; }
.lemo-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; font-size: 0.8rem; color: var(--lemo-fg-500); flex-wrap: wrap; gap: 0.75rem; }
.lemo-footer__bottom a { color: var(--lemo-fg-500); margin-left: 1.25rem; }
.lemo-footer__bottom a:hover { color: #fff; }

/* ── Bannière cookies (reconstruite, non extraite du vrai LEMO) ── */
.lemo-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 1px solid var(--lemo-fg-300);
  padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; box-shadow: 0 -4px 16px rgba(var(--ng-text-rgb), .06);
  transition: transform .3s ease;
}
.lemo-cookie-banner.is-hidden { transform: translateY(110%); }
.lemo-cookie-banner__text { flex: 1 1 24rem; font-size: 0.85rem; color: var(--lemo-fg-700); line-height: 1.55; }
.lemo-cookie-banner__text a { color: var(--lemo-primary-500); text-decoration: underline; }
.lemo-cookie-banner__actions { display: flex; gap: 0.75rem; flex: none; }

@media (max-width: 900px) {
  .home-stories { grid-template-columns: 1fr; }
  .lemo-stats { grid-template-columns: repeat(2, 1fr); }
  .lemo-stats__item:nth-child(3) { border-left: none; }
  .lemo-footer__top { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   CHARTE NEEGUI 2026-09-26 — alignement site ⇄ appli
   (NEEGUI_DESIGN.md, même charte que l'application Flutter)
   Remplace le calque LEMO du 2026-09-22 : bleu #005DAA, marine #0E2A47,
   Plus Jakarta Sans (texte) + Bricolage Grotesque (titres/chiffres),
   coins arrondis. Posé en fin de lemo.css — chargé en dernier sur les 64
   pages — pour s'appliquer partout sans retoucher chaque sélecteur.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --lemo-primary-200: var(--ng-primary-soft);
  --lemo-primary-500: var(--ng-primary);
  --lemo-primary-600: var(--ng-primary-ring);
  --lemo-primary-700: var(--ng-primary-dark);
  --lemo-fg-200: var(--ng-bg);
  --lemo-fg-300: var(--ng-border);
  --lemo-fg-800: var(--ng-text);
  --lemo-fg-700: var(--ng-text-muted);
  --neegui-navy: var(--ng-navy);
}

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Titres et chiffres — Bricolage Grotesque (charte §2) */
h1, h2,
.headings--title, .headings--l, .headings--m,
.hero-banner__title h1,
.section-head h2, .feat-hero h1, .feat-hero h2,
.legal-body h1, .legal-body h2,
.stat .n, .plan .pname, .plan .price .amt,
.quote blockquote, .feat-section-title, .pnl-title,
.nh h1, .nh h2 {
  font-family: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
}
/* Plus de titres en MAJUSCULES façon LEMO : casse normale, comme l'appli. */
.headings--title { text-transform: none; letter-spacing: -0.03em; }

/* Logo « Neegui » : wordmark de l'appli — « Nee » encre + « gui » bleu,
   Bricolage 800, casse normale (le calque LEMO le passait en capitales). */
.header__logo {
  font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
}
.header__logo span { color: var(--lemo-primary-500); }

/* Boutons : rectangle arrondi 14 px, jamais la pilule (charte §3). */
.btn, .button { border-radius: 14px; }

/* Logo « Neegui » (N majuscule, écrit ainsi dans le HTML des 64 pages) —
   jamais transformé en capitales comme le faisait le calque LEMO. */
.header__logo, .footer-wordmark { text-transform: none; }

/* Héros = bandeau bleu de l'appli (charte §4.1) : aplat `primary`, bas
   arrondi, disque `primary-dark` + anneau `primary-ring` — remplace le
   fond noir quadrillé du calque LEMO. */
.hero-banner {
  background: var(--lemo-primary-500);
  border-radius: 0 0 40px 40px;
}
.hero-banner__media {
  background: var(--lemo-primary-500);
  overflow: hidden;
}
.hero-banner__media::before {
  content: ""; position: absolute; width: 520px; height: 520px;
  border-radius: 50%; background: var(--lemo-primary-700);
  right: -160px; top: -220px;
}
.hero-banner__media::after {
  opacity: 1; background: none; background-image: none;
  inset: auto; width: 260px; height: 260px; border-radius: 50%;
  border: 2px solid var(--lemo-primary-600);
  right: 6%; top: 40px;
}
.hero-banner .text-highlight { color: #fff !important; }
.hero-banner__section-title p { color: var(--ng-primary-soft); }
/* Action principale sur le bleu : bouton blanc, texte bleu (charte §4.1). */
.hero-banner .button--primary { background: #fff; color: var(--lemo-primary-500); }
.hero-banner .button--primary:hover { background: var(--lemo-primary-200); }

/* Bandes sombres : marine de la charte au lieu du noir LEMO. */
.lemo-section--dark { background: var(--neegui-navy); }
.lemo-section--dark .section-title p { color: var(--ng-on-primary-muted); }

/* Bandeau des pages produit / À propos (.feat-hero, 31 pages) : même
   bandeau bleu que l'appli — aplat `primary`, disque `primary-dark` en haut
   à droite + anneau `primary-ring`, au lieu du noir quadrillé LEMO. Le
   repère « [PHOTO / VIDÉO] » reste (média à fournir via le CMS). */
.feat-hero:not(.feat-hero--has-media) { background: var(--lemo-primary-500); }
.feat-hero:not(.feat-hero--has-media)::after {
  color: var(--ng-on-primary-muted);
  background:
    radial-gradient(circle at calc(100% + 60px) -80px, var(--lemo-primary-700) 0 230px, transparent 231px),
    radial-gradient(circle at 78% 58px, transparent 0 88px, var(--lemo-primary-600) 89px 90px, transparent 91px);
}
.feat-hero:not(.feat-hero--has-media)::before { background-image: none; }
.feat-hero p { color: var(--ng-primary-soft); }
.feat-hero p::before { background: var(--ng-gold); } /* pastille dorée — accent ponctuel de la charte */
/* Action principale sur le bleu : bouton blanc, texte bleu. */
.feat-hero:not(.feat-hero--has-media) .btn-gold { background: #fff; color: var(--lemo-primary-500); border-color: #fff; }
.feat-hero:not(.feat-hero--has-media) .btn-gold:hover { background: var(--lemo-primary-200); }

/* Logo des pages légales : même wordmark (Bricolage, casse normale). */
.legal-nav-logo {
  font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
  text-transform: none; font-size: 1.5rem; letter-spacing: -0.02em;
}
.legal-nav-logo span { color: var(--lemo-primary-500); }
/* Étiquette de catégorie des articles de blog : pastille bleu pâle. */
.blog-tag, .post-tag, .article-tag, .topic-tag { background: var(--lemo-primary-200); color: var(--lemo-primary-500); border-radius: 999px; }

/* Héros : `padding: 7rem 0 0` écrasait la marge latérale du conteneur —
   le texte touchait le bord de l'écran — et, avec le bas arrondi, la
   dernière ligne était rognée. Marges latérales rétablies + espace bas. */
.hero-banner__inner {
  padding: 7rem clamp(1.5rem, 5vw, 5rem) 4rem;
}
/* Boutons « Bientôt disponible » : restent grisés mais lisibles sur le
   bleu (l'opacité .6 inline les rendait quasi invisibles). */
.hero-banner .button--secondary-dark[aria-disabled="true"] {
  opacity: .9 !important;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.card-slider__arrow { border-radius: 12px; }

/* Cartes « teaser » (accueil) et leurs images : coins arrondis de la charte
   (elles n'avaient aucun rayon, donc restaient carrées). */
.teaser, .teaser__image { border-radius: 20px; overflow: hidden; }
.home-stories__list .teaser { background: #fff; border-color: var(--lemo-fg-300); }
.teaser__cta { border-radius: 14px; overflow: hidden; }

/* ── Blocs sombres : noir (#1A1A1A, hérité LEMO) → navy de la charte ──
   `--green-900`/`--green-800` servent aussi de couleur de TEXTE (titres,
   wordmark) : on ne touche pas aux variables, seulement aux FONDS. */
/* --green-950 pointe désormais vers --ng-navy dans style.css. */
.plan.featured, .quote.big, .cta, .tabbar,
.feat-footer, body .cta-band, body .founder-card { background: var(--ng-navy); }
.cta p, body .cta-band p, .quote.big p, body .founder-card p { color: var(--ng-on-primary-muted); }
.btn-green, .toggle button.on, .af-av { background: var(--ng-primary); color: #fff; }
.btn-green:hover { background: var(--ng-primary-dark); }
.af-on, .af-on .ic { color: var(--ng-success); }
/* Nœud « Décisions » (écosystème) : était noir via --gold neutralisé. */
.flow-node.gold { background: var(--ng-primary); }
body .founder-av { background: var(--ng-primary); color: #fff; }
/* Textes posés sur fond sombre qui utilisaient --gold* (neutralisé en
   encre foncée par home.css) → devenaient invisibles sur le navy. */
body .founder-info .role, .eyebrow-on-dark { color: var(--ng-on-primary-muted); }
/* Séparateurs Compte/Aide : traits pleine hauteur foncés (LEMO) → bordure
   claire de la charte, plus courte. */
.header__nav-secondary > * { border-left: 0; }
.header__nav-secondary > * + * { border-left: 1px solid var(--lemo-fg-300); height: 1.5rem; }
/* Contenu des héros bleus : toujours visible. Le fondu `.reveal` (opacité 0
   jusqu'à l'IntersectionObserver) laissait le titre/texte « délavé » ou
   absent sur le bleu pendant le chargement, ou définitivement si le script
   ne s'exécutait pas — c'est ce qui rendait l'écriture illisible. */
.hero-banner .reveal, .feat-hero .reveal, .legal-hero .reveal {
  opacity: 1 !important; transform: none !important;
}

/* Recherche du header : traits verticaux foncés pleine hauteur (LEMO) →
   retirés, le champ reste repérable par son icône. */
.header__search { border-left: 0; border-right: 0; }
/* Bouton « En savoir plus + » : les bordures des deux moitiés étaient
   rognées par le coin arrondi → un seul contour bleu de la charte. */
.teaser__cta { border: 1.5px solid var(--lemo-primary-500); color: var(--lemo-primary-500); }
.teaser__cta span, .teaser__cta i { border: 0; }
.teaser__cta i { border-left: 1.5px solid var(--lemo-primary-500); }
.teaser__cta:hover { background: var(--lemo-primary-200); }

/* Héros mobile : le cercle décoratif passait SOUS le titre (trait qui barre
   le texte) et un grand vide séparait boutons et sous-titre. */
@media (max-width: 767px) {
  .hero-banner__media::before { width: 260px; height: 260px; right: -110px; top: -120px; }
  .hero-banner__media::after { width: 130px; height: 130px; right: -30px; top: 24px; }
  .hero-banner__cta { margin: 1.5rem 0 2rem; }
  .hero-banner__section-title { padding-top: 1.5rem; }
  .hero-banner__inner { padding: 5rem 1.25rem 2.5rem; }
  .feat-hero:not(.feat-hero--has-media)::after { opacity: .5; }
}
/* Encarts des pages légales : filet gauche noir → bleu de la charte. */
.legal-highlight { border-left-color: var(--lemo-primary-500); background: var(--lemo-primary-200); }
.legal-body a { color: var(--lemo-primary-500); }