/* ═══════════════════════════════════════════════════════════════════
   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; }
.home-stories__list .teaser__text { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; }

@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); }

/* ═══════════════════════════════════════════════════════════════════
   ALIGNEMENT SUR L'APPLI — 2026-10-01 (décision du propriétaire,
   captures annotées). Bloc chargé en DERNIER sur les 64 pages : il
   l'emporte sur style.css, home.css et le calque LEMO ci-dessus.
   Même règle que l'appli :
     • bleu clair du logo (--ng-primary, #1560BD) UNIQUEMENT pour l'action
       principale et l'élément sélectionné ;
     • en-têtes et bandeaux en aplat marine (--ng-navy, #0E2A47), sans
       cercles décoratifs ;
     • textes, liens, icônes, chiffres mis en avant en marine ;
     • symbole « N » réseau devant le logo, slogan aux couleurs de l'écran
       d'ouverture de l'appli.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --green-600: var(--ng-navy);        /* checks, sur-titres, liens */
  --gold-text: var(--ng-navy);
  --lemo-primary-600: var(--ng-navy); /* icônes */
}

/* Bandeaux : marine plein, plus de disque ni d'anneau. */
.hero-banner,
.hero-banner__media,
.feat-hero:not(.feat-hero--has-media) { background: var(--ng-navy); }
.hero-banner__media::before,
.hero-banner__media::after { display: none; }
.feat-hero:not(.feat-hero--has-media)::after { background: none; }
.hero-banner__section-title p,
.feat-hero p { color: var(--ng-brand-tagline); }

/* Action principale sur le marine : le bouton bleu clair du logo. */
.hero-banner .button--primary,
.feat-hero:not(.feat-hero--has-media) .btn-gold {
  background: var(--ng-primary); color: #fff; border-color: var(--ng-primary);
}
.hero-banner .button--primary:hover,
.feat-hero:not(.feat-hero--has-media) .btn-gold:hover { background: var(--ng-primary-dark); }

/* Textes, liens, chiffres et icônes : marine. */
.text-highlight { color: var(--ng-navy) !important; }
.hero-banner .text-highlight { color: var(--ng-brand-gui) !important; }
.button--secondary { color: var(--ng-navy); }
.header__nav-primary__item:hover > a { border-bottom-color: var(--ng-navy); }
.card-thematic__btn,
.teaser__suptitle,
.lemo-stats__num,
.legal-body a,
.lemo-cookie-banner__text a { color: var(--ng-navy); }
.card-thematic__btn:hover { border-bottom-color: var(--ng-navy); }
.card-slider__arrow:hover { border-color: var(--ng-navy); color: var(--ng-navy); }
.teaser__cta { border-color: var(--ng-navy); color: var(--ng-navy); }
.teaser__cta i { border-left-color: var(--ng-navy); }
.section-title .bond { background: var(--ng-navy); }
.ic-neutral svg, .flow-node svg { stroke: var(--ng-navy); }

/* Logo : symbole « N » réseau devant le mot, comme dans l'appli. */
.header__logo,
.legal-nav-logo { display: inline-flex; align-items: center; gap: 0; }
.header__logo::before,
.legal-nav-logo::before,
.footer-wordmark::before {
  content: ""; flex: none; display: inline-block; vertical-align: middle;
  width: 1.3em; height: 1.3em; margin-inline-end: .4em;
  background: url("assets/neegui-symbol.png") center / contain no-repeat;
}
/* Pied de page : le symbole précède le mot SANS couper « Nee|gui » (le mot
   est deux nœuds : <b>Nee</b>gui — un flex y insérait un espace). */
.footer-wordmark::before { vertical-align: -0.22em; }
/* Même couleurs que l'en-tête : « Nee » encre, « gui » bleu du logo. */
.nh-home .footer-wordmark { color: var(--ng-primary); }
.nh-home .footer-wordmark b { color: var(--ng-text); }

/* ═══════════════════════════════════════════════════════════
   VISUELS DU SITE — 2026-10-04 (demande du propriétaire)
   Accueil : vidéo en boucle derrière le grand titre ; vignettes photo.
   Les appareils sont à droite de la vidéo : un voile marine à gauche
   garde le titre lisible. Sur téléphone, on cadre sur les appareils.
   ═══════════════════════════════════════════════════════════ */
.hero-banner__media--video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
}
.hero-banner__media--video::after {
  display: block !important; content: ""; position: absolute; inset: 0;
  width: auto; height: auto; border-radius: 0; opacity: 1;
  background: linear-gradient(90deg, rgba(var(--ng-navy-rgb), .92) 0%, rgba(var(--ng-navy-rgb), .55) 45%, rgba(var(--ng-navy-rgb), 0) 75%);
}
[dir="rtl"] .hero-banner__media--video video { object-position: 30% 50%; }
[dir="rtl"] .hero-banner__media--video::after {
  background: linear-gradient(270deg, rgba(var(--ng-navy-rgb), .92) 0%, rgba(var(--ng-navy-rgb), .55) 45%, rgba(var(--ng-navy-rgb), 0) 75%);
}
@media (max-width: 900px) {
  .hero-banner__media--video::after { background: rgba(var(--ng-navy-rgb), .72); }
  [dir="rtl"] .hero-banner__media--video::after { background: rgba(var(--ng-navy-rgb), .72); }
}
.teaser__image--photo { background: var(--ng-navy); }
.teaser__image--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
/* Bannières des pages : les appareils sont calés à droite de la vidéo (à
   gauche en arabe), loin du titre. Sur téléphone, la bannière est presque
   carrée : on recadre du même côté pour les garder à l'écran. */
.feat-hero-media { object-position: 100% 50%; }
[dir="rtl"] .feat-hero-media { object-position: 0% 50%; }
img.feat-hero-media { object-position: 95% 50%; }
[dir="rtl"] img.feat-hero-media { object-position: 5% 50%; }
/* Téléphone : le texte occupe toute la bannière, voile renforcé pour le lire. */
@media (max-width: 700px) {
  .feat-hero--has-media::before {
    background: linear-gradient(180deg, rgba(var(--ng-navy-rgb), .6) 0%, rgba(var(--ng-navy-rgb), .9) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner__media--video video, video.feat-hero-media { display: none; }
}
/* Accueil : boutons du hero retirés (2026-10-04) — l'espace qu'ils tenaient
   est rendu entre le titre et le trait du texte d'accompagnement. */
.hero-banner__title + .hero-banner__section-title { margin-top: 3.5rem; }
@media (max-width: 900px) { .hero-banner__title + .hero-banner__section-title { margin-top: 2rem; } }
/* Arabe : le titre du hero restait aligné à gauche (`text-align: left`),
   donc sur les téléphones de la vidéo, placés à gauche en RTL. */
[dir="rtl"] .hero-banner__title h1, [dir="rtl"] .section-title--start { text-align: right; }
/* Cartes « Choisissez votre point de départ » : vrais écrans de l'appli
   (métiers disponibles) ou pictogramme « Bientôt » à la place du cadre
   provisoire [PHOTO …] (2026-10-04). */
.nh-mod-photo.nh-mod-photo--img { padding: 0; background: var(--ng-navy); overflow: hidden; }
.nh-mod-photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Accueil — présentation animée plein cadre (2026-10-04, demande du
   propriétaire) : la vidéo EST le hero. Titre, sous-titre et écrans sont
   animés dans la vidéo, scène par scène, sur toute la largeur. Pas de voile.
   Le titre HTML reste dans la page pour Google et les lecteurs d'écran,
   mais n'est plus affiché (il ferait doublon avec celui de la vidéo).
   Le bandeau prend exactement le format de la vidéo : 2,88:1 sur grand
   écran, 4:5 sur téléphone (vidéo dédiée, choisie par le script de la page). */
.hero-banner:has(.hero-banner__media--show) { aspect-ratio: 2.88 / 1; min-height: 0; padding: 0; }
.hero-banner__media--show { position: absolute; inset: 0; }
.hero-banner__media--show video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-banner__media--show::after { display: none !important; }
.hero-banner:has(.hero-banner__media--show) .hero-banner__inner {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) {
  .hero-banner:has(.hero-banner__media--show) { aspect-ratio: 4 / 5; }
}

/* ═══ En-tête modernisé (2026-10-04, demande du propriétaire : « trop
   condensé, pas moderne ») ═══════════════════════════════════════════
   Barre flottante arrondie, translucide (flou d'arrière-plan), plus haute
   et plus aérée. Liens en pastilles au survol, actions en boutons ronds,
   boutons en pilule. « Compte » est masqué sur ordinateur : il ouvrait la
   même page que « Se connecter » (doublon). Mobile : même barre, compacte. */
header.header.nav, header.header.nav.scrolled, .nh-home header.header.nav, .nh-home header.header.nav.scrolled {
  background: transparent; border-bottom: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 14px clamp(12px, 2vw, 28px) 10px;
}
header.header .wrap.nav-inner.header__bar {
  height: 72px; max-width: 1400px; margin: 0 auto;
  padding-inline: 18px 12px; gap: 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(14, 42, 71, .08); border-radius: 22px;
  box-shadow: 0 10px 30px -12px rgba(14, 42, 71, .18), 0 1px 0 rgba(255, 255, 255, .8) inset;
  transition: box-shadow .3s ease, background .3s ease;
}
header.header.scrolled .wrap.nav-inner.header__bar { background: rgba(255, 255, 255, .92); box-shadow: 0 14px 40px -14px rgba(14, 42, 71, .28); }
header.header .header__logo { margin-right: 8px; }
/* Liens principaux : pastille au survol, plus de soulignement */
header.header .nav-links.header__nav-primary { gap: 2px; margin-left: 8px; }
header.header .nav-links .nav-item > a, header.header .nav-links > a {
  padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ng-text);
  transition: background .2s ease, color .2s ease;
}
header.header .nav-links .nav-item > a::after, header.header .nav-links > a::after { content: none; }
header.header .nav-links .nav-item > a:hover, header.header .nav-links .nav-item:hover > a, header.header .nav-links > a:hover {
  background: rgba(21, 96, 189, .08); color: var(--ng-primary);
}
/* Recherche, aide : boutons ronds à icône, sans séparateurs */
header.header .header__search { margin: 0 0 0 auto; padding: 0; border: 0; height: auto; flex: 0 0 auto; min-width: 0; max-width: none; }
header.header .header__search-form input { display: none; }
header.header .header__search-form button, header.header .header__nav-secondary > a {
  position: static; transform: none; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--ng-text); background: transparent; border: 0;
  transition: background .2s ease;
}
header.header .header__search-form button:hover, header.header .header__nav-secondary > a:hover { background: rgba(21, 96, 189, .08); color: var(--ng-primary); }
header.header .header__nav-secondary { gap: 2px; height: auto; }
header.header .header__nav-secondary > *, header.header .header__nav-secondary > * + * { border-left: 0; }
header.header .header__nav-secondary__label { display: none; }
header.header .header__nav-secondary > a[href*="login"] { display: none; }
header.header .header__nav-secondary svg, header.header .header__search-form svg { width: 20px; height: 20px; }
/* Langue, connexion, inscription : pilules */
header.header .nav-right { gap: 8px !important; margin-left: 4px; }
header.header .lang-dd-trigger { height: 42px; padding: 0 14px; border-radius: 999px; background: rgba(14, 42, 71, .05); border: 1px solid rgba(14, 42, 71, .08); font-weight: 700; }
header.header .link-ghost { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ng-text); }
header.header .link-ghost:hover { background: rgba(21, 96, 189, .08); color: var(--ng-primary); }
header.header .nav-right .btn.btn-gold {
  height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(21, 96, 189, .6);
  display: inline-flex; align-items: center; gap: 8px;
}
header.header .nav-right .btn.btn-gold::after { content: "→"; font-weight: 700; transition: transform .2s ease; }
[dir="rtl"] header.header .nav-right .btn.btn-gold::after { content: "←"; }
header.header .nav-right .btn.btn-gold:hover::after { transform: translateX(3px); }
[dir="rtl"] header.header .nav-right .btn.btn-gold:hover::after { transform: translateX(-3px); }
@media (max-width: 1400px) and (min-width: 901px) {
  header.header .header__search { display: block; }
  header.header .nav-links .nav-item > a, header.header .nav-links > a { padding: 9px 11px; font-size: 14.5px; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  header.header .header__search { display: none; }
}
@media (max-width: 900px) {
  header.header.nav, header.header.nav.scrolled, .nh-home header.header.nav, .nh-home header.header.nav.scrolled { padding: 10px 10px 6px; }
  header.header .wrap.nav-inner.header__bar { height: 60px; border-radius: 18px; padding-inline: 14px 8px; gap: 8px; }
}
/* Sous 1080px, style.css replie connexion/inscription dans le menu burger :
   les règles pilule ci-dessus (display) ne doivent pas les faire revenir. */
@media (max-width: 1080px) {
  header.header .nav-right > .link-ghost, header.header .nav-right > .btn.btn-gold { display: none; }
}

/* ═══ Gabarit « page métier » allégé (2026-10-04) — classe .pg ═══════
   Demande du propriétaire : trop de cartes, de chiffres, de bordures.
   Les fonctions deviennent des rangées texte + vraie capture de l'appli,
   sans cadre ; le reste en texte simple ; un seul appel à l'action final
   (bouton + formulaire côte à côte). */
.feat-page.pg { max-width: 1160px; }
.pg .feat-hero h1 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.02em; }
.pg .feat-hero p { border-top: 0; padding-top: 0; margin-top: 14px; font-size: 17px; }
.pg .feat-hero p::before { display: none; }
.pg h2 { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em; color: var(--ng-text); }

.pg-row { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px, 6vw, 88px); padding: clamp(36px, 5vw, 64px) 0; }
.pg-row + .pg-row { border-top: 1px solid rgba(14, 42, 71, .07); }
.pg-row--flip .pg-row-text { order: 2; }
.pg-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-primary); margin-bottom: 14px; }
.pg-row h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; margin: 0 0 16px; }
.pg-row-text > p { font-size: 18px; line-height: 1.6; color: var(--ng-text-muted); margin: 0 0 22px; max-width: 34em; }
.pg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pg-checks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--ng-text); }
.pg-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ng-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; }
[dir="rtl"] .pg-checks li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .pg-checks li::before { left: auto; right: 0; }
.pg-row-media { position: relative; display: flex; justify-content: center; }
.pg-row-media::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(21, 96, 189, .14), transparent); z-index: 0; }
.pg-row-media img { position: relative; z-index: 1; width: 100%; max-width: 500px; height: auto; display: block; }

.pg-also, .pg-steps, .pg-reads { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid rgba(14, 42, 71, .07); }
.pg-also h2, .pg-steps h2, .pg-reads h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 32px; }
.pg-also-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.pg-also-grid strong, .pg-steps strong { display: block; font-size: 17px; font-weight: 700; color: var(--ng-text); margin-bottom: 6px; }
.pg-also-grid p, .pg-steps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ng-text-muted); }
.pg-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.pg-steps li span { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 44px; font-weight: 800; line-height: 1; color: var(--ng-primary); margin-bottom: 14px; }
.pg-reads ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.pg-reads li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid rgba(14, 42, 71, .07); }
.pg-reads a { font-size: 16px; font-weight: 600; color: var(--ng-text); text-decoration: none; }
.pg-reads a::after { content: " →"; color: var(--ng-primary); }
[dir="rtl"] .pg-reads a::after { content: " ←"; }
.pg-reads a:hover { color: var(--ng-primary); }

.pg-end { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start;
  margin-top: 24px; padding: clamp(32px, 5vw, 56px); border-radius: 28px; background: var(--ng-navy); color: #fff; }
.pg-end h2 { color: #fff; font-size: clamp(26px, 2.8vw, 36px); margin: 0 0 14px; }
.pg-end-text p { color: rgba(255, 255, 255, .75); font-size: 17px; line-height: 1.6; margin: 0 0 26px; }
.pg-end .mi-form { margin: 0; padding: 0; background: none; border: 0; }
.pg-end .mi-form h2 { display: none; }
.pg-end .mi-form > div > p, .pg-end .mi-form p { color: rgba(255, 255, 255, .75); }
.pg-end .mi-form label { color: rgba(255, 255, 255, .85); }
.pg-end .mi-form input[type="text"], .pg-end .mi-form input[type="email"], .pg-end .mi-form input[type="tel"], .pg-end .mi-form select {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; border-radius: 12px; }
.pg-end .mi-form form { grid-template-columns: 1fr 1fr; }
.pg-end .mi-form a { color: #fff; }

@media (max-width: 900px) {
  .pg-row { grid-template-columns: 1fr; padding: 48px 0; }
  .pg-row--flip .pg-row-text { order: 0; }
  .pg-row-media img { max-width: 340px; }
  .pg-also-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .pg-steps ol { grid-template-columns: 1fr; gap: 24px; }
  .pg-reads ul { columns: 1; }
  .pg-end { grid-template-columns: 1fr; }
  .pg-end .mi-form form { grid-template-columns: 1fr; }
}
/* Rangée sans capture (pages EN/AR sans écrans traduits) : titre à gauche,
   texte et points à droite. */
.pg-row--text { grid-template-columns: 1fr; }
.pg-row--text .pg-row-text { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: clamp(28px, 6vw, 88px); align-items: start; }
.pg-row--text .pg-eyebrow { grid-column: 1; grid-row: 1; }
.pg-row--text h2 { grid-column: 1; grid-row: 2; }
.pg-row--text .pg-row-text > p { grid-column: 2; grid-row: 2; margin: 0 0 18px; }
.pg-row--text .pg-checks { grid-column: 2; grid-row: 3; }
.pg-note { margin: 8px 0 0; padding: 18px 22px; border-radius: 16px; background: rgba(21, 96, 189, .06); color: var(--ng-text); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
  .pg-row--text .pg-row-text { grid-template-columns: 1fr; }
  .pg-row--text .pg-eyebrow, .pg-row--text h2, .pg-row--text .pg-row-text > p, .pg-row--text .pg-checks { grid-column: 1; grid-row: auto; }
  .pg-row--text .pg-row-text > p { margin-top: 0; }
}

/* ═══ Allègement de toutes les autres sous-pages (2026-10-04) ═══════════
   Même principe que .pg : plus de « boîte » autour de chaque élément.
   Les anciennes cartes deviennent des blocs ouverts (pas de bordure, pas
   d'ombre, pas de fond), séparés par l'espace ou un fin trait ; étiquettes
   et gros chiffres ramenés à du texte. S'applique aux pages Bientôt,
   Écosystème, À propos, Partenaires, Contact, Blog. */
.feat-hero p { border-top: 0 !important; padding-top: 0 !important; }
.feat-hero p::before { display: none !important; }
.feat-hero h1 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.02em; }
body .feat-item, body .feat-util-item, body .feat-step, body .value-card, body .about-card,
body .topic-card, body .article-card, body .benefit, body .ptype, body .contact-channel,
body .mod-grid .cell {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
}
body .feat-util-list, body .feat-steps { border: 0 !important; box-shadow: none !important; background: transparent !important; }
body .feat-grid, body .values-grid, body .topics-grid, body .mod-grid { gap: 36px 40px !important; }
body .feat-item, body .value-card, body .about-card, body .benefit, body .ptype, body .mod-grid .cell, body .topic-card {
  padding: 22px 0 0 !important; border-top: 2px solid var(--ng-primary) !important; border-radius: 0 !important;
}
body .article-card { padding: 22px 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(14, 42, 71, .08) !important; }
body .feat-util-item, body .feat-step, body .contact-channel { padding: 16px 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(14, 42, 71, .07) !important; }
body .feat-item-icon, body .ben-ic, body .ch-ic { background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; padding: 0 !important; color: var(--ng-primary); margin-bottom: 10px; }
body .eyebrow { letter-spacing: .06em; }
body .feat-section-title { letter-spacing: -.01em !important; }
body .feat-section-title { font-size: clamp(22px, 2.2vw, 30px) !important; font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; font-weight: 800; text-transform: none !important; color: var(--ng-text) !important; margin: 56px 0 24px !important; }
/* Étiquettes « En production / Bientôt » et gros chiffres : texte discret */
body .cell-status, body .topic-soon, body .article-tag, body .topic-tag { background: none !important; border: 0 !important; padding: 0 !important; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--ng-primary) !important; font-weight: 700; }
body .cell-status.later, body .topic-soon { color: var(--ng-text-muted) !important; }
body .value-card .num { font-size: 28px !important; line-height: 1.1; color: var(--ng-primary) !important; }
body .fam-block, body .fam-block.tint, body .about-section.tint, body .partner-section.tint { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body .mi-form, body .notify-block { border: 0 !important; border-radius: 24px !important; background: rgba(21, 96, 189, .05) !important; }
body .feat-soon-banner { border: 0 !important; box-shadow: none !important; background: rgba(242, 181, 68, .12) !important; border-radius: 16px !important; }
body .feat-soon-badge { background: var(--ng-navy) !important; color: #fff !important; border: 0 !important; }

/* ═══ Révision 2026-10-04 (soir) — « trop de widgets et de lignes, mobile
   pas fluide » ═══════════════════════════════════════════════════════
   1) Plus aucun trait de séparation ni filet bleu au-dessus des blocs :
      l'espace seul sépare. 2) Petites icônes décoratives, pastilles et
      bouton « i » retirés des listes. 3) Mobile : une colonne, espacements
      resserrés, pas de flou d'arrière-plan sur l'en-tête (coûteux au
      défilement), animations d'apparition coupées. */
body .feat-item, body .value-card, body .about-card, body .benefit, body .ptype, body .mod-grid .cell, body .topic-card,
body .article-card, body .feat-util-item, body .feat-step, body .contact-channel {
  border: 0 !important; border-top: 0 !important; border-bottom: 0 !important;
}
body .feat-item, body .value-card, body .about-card, body .benefit, body .ptype, body .mod-grid .cell, body .topic-card { padding: 0 !important; }
body .feat-util-item, body .feat-step, body .contact-channel, body .article-card { padding: 12px 0 !important; }
body .feat-item-icon, body .mod-grid .cell .ic, body .ben-ic, body .cell.np-clickable::after { display: none !important; }
body .feat-util-list { display: grid; gap: 4px; }
body .fam-tag { background: none !important; border: 0 !important; padding: 0 !important; color: var(--ng-primary) !important; }
.pg-row + .pg-row, .pg-also, .pg-steps, .pg-reads, .pg-reads li { border: 0 !important; }
.pg-reads li { padding: 8px 0; }
@media (max-width: 900px) {
  header.header .wrap.nav-inner.header__bar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  body .feat-grid, body .values-grid, body .topics-grid, body .mod-grid, body .benefits-grid, body .partner-types { grid-template-columns: 1fr !important; gap: 22px !important; }
  body .feat-section-title { margin: 36px 0 14px !important; font-size: 22px !important; }
  .pg-row { padding: 28px 0; gap: 18px; }
  .pg-row h2 { font-size: 26px; }
  .pg-row-text > p { font-size: 16px; margin-bottom: 16px; }
  .pg-row-media img { max-width: 280px; }
  .pg-also, .pg-steps, .pg-reads { padding: 28px 0; }
  .pg-also h2, .pg-steps h2, .pg-reads h2 { margin-bottom: 18px; font-size: 22px; }
  .pg-also-grid { grid-template-columns: 1fr; gap: 16px; }
  .pg-steps ol { gap: 16px; }
  .pg-steps li span { font-size: 32px; margin-bottom: 6px; }
  .pg-end { padding: 26px 20px; border-radius: 22px; }
  .feat-page { padding-top: 16px !important; }
}
body .feat-util-item > div:first-child:not(.feat-util-body) { display: none !important; }

/* ═══ Sous-fenêtres du menu (survol) modernisées, en couleur (2026-10-04) ═══
   Une couleur par métier, reprise par l'icône et le survol ; panneau sans
   bordure, en-tête teinté, lien final en bandeau marine. */
.nav-mega.nh-mega a.nh-mw { --c: var(--ng-primary); }
.nav-mega.nh-mega a.nh-mw[href*="commerce"]   { --c: var(--ng-primary); }
.nav-mega.nh-mega a.nh-mw[href*="pharmacie"]  { --c: #12A150; }
.nav-mega.nh-mega a.nh-mw[href*="restaurant"] { --c: #E8751A; }
.nav-mega.nh-mega a.nh-mw[href*="bar"]        { --c: #7C5CE0; }
.nav-mega.nh-mega a.nh-mw[href*="salon"]      { --c: #D9468F; }
.nav-mega.nh-mega a.nh-mw[href*="immobilier"] { --c: #0E9F9A; }
.nav-mega.nh-mega a.nh-mw[href*="livraison"]  { --c: #D99A1A; }
.nav-mega.nh-mega a.nh-mw[href*="fam-socle"], .nav-mega.nh-mega a.nh-mw[href*="partenaires"] { --c: #12A150; }
.nav-mega.nh-mega a.nh-mw[href*="fam-pilotage"], .nav-mega.nh-mega a.nh-mw[href*="a-propos"] { --c: #7C5CE0; }
.nav-mega.nh-mega a.nh-mw[href*="fam-operations"], .nav-mega.nh-mega a.nh-mw[href*="blog"] { --c: #E8751A; }

.nh-home .nav-mega.nh-mega {
  padding: 10px; border: 0; border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(14, 42, 71, .35), 0 0 0 1px rgba(14, 42, 71, .06);
}
.nh-home .nav-mega.nh-mega .nh-mega-head {
  margin: -10px -10px 10px; padding: 18px 22px 16px;
  background: linear-gradient(120deg, rgba(21, 96, 189, .10), rgba(111, 180, 255, .06) 60%, rgba(242, 181, 68, .08));
}
.nh-home .nav-mega .nh-mega-eyebrow { color: var(--ng-primary); letter-spacing: .1em; margin-bottom: 4px; }
.nh-home .nav-mega .nh-mega-lead { color: var(--ng-text); font-size: 14px; }

.nh-home .nav-mega a.nh-mw.nh-mw-row, .nh-home .nav-mega a.nh-mw.nh-mw-mini, .nh-home .nav-mega a.nh-mw {
  border: 0; box-shadow: none; background: transparent; border-radius: 18px;
}
.nh-home .nav-mega a.nh-mw .nh-mw-ic {
  width: 44px; height: 44px; border-radius: 14px;
  background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c);
}
.nh-home .nav-mega a.nh-mw strong { font-size: 14.5px; color: var(--ng-text); }
.nh-home .nav-mega a.nh-mw em { color: var(--ng-text-muted); }
.nh-home .nav-mega a.nh-mw .nh-mw-go { opacity: 0; transform: translateX(-4px); }
.nh-home .nav-mega a.nh-mw:hover, .nh-home .nav-mega a.nh-mw:focus-visible {
  background: color-mix(in srgb, var(--c) 8%, #fff); border-color: transparent; transform: translateY(-1px);
}
.nh-home .nav-mega a.nh-mw:hover .nh-mw-ic, .nh-home .nav-mega a.nh-mw:focus-visible .nh-mw-ic {
  background: var(--c); color: #fff; transform: scale(1.04);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--c) 80%, transparent);
}
.nh-home .nav-mega a.nh-mw:hover strong { color: color-mix(in srgb, var(--c) 75%, var(--ng-navy)); }
.nh-home .nav-mega a.nh-mw:hover .nh-mw-go, .nh-home .nav-mega a.nh-mw:focus-visible .nh-mw-go { opacity: 1; color: var(--c); transform: translateX(2px); }
[dir="rtl"] .nh-home .nav-mega a.nh-mw:hover .nh-mw-go { transform: translateX(-2px) scaleX(-1); }

/* Lien final : bandeau marine */
.nh-home .nav-mega .nh-mega-foot { margin-top: 8px; border-top: 0; padding-top: 0; }
.nh-home .nav-mega a.nh-mega-cta {
  border: 0; border-radius: 18px; color: #fff;
  background: linear-gradient(120deg, var(--ng-navy), #15467E);
}
.nh-home .nav-mega a.nh-mega-cta strong { color: #fff; }
.nh-home .nav-mega a.nh-mega-cta em { color: rgba(255, 255, 255, .7); }
.nh-home .nav-mega a.nh-mega-cta .nh-mw-ic { background: rgba(255, 255, 255, .14); color: #fff; }
.nh-home .nav-mega a.nh-mega-cta .nh-mw-go { color: #fff; opacity: .8; }
.nh-home .nav-mega a.nh-mega-cta:hover { background: linear-gradient(120deg, #15467E, var(--ng-primary)); }

/* Accueil — vignettes « fonctionnalité » entièrement cliquables (2026-10-04) :
   lien étiré sur toute la carte, l'image grossit légèrement au survol. */
.teaser { position: relative; }
.teaser__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.teaser__link:focus-visible { outline: 3px solid var(--ng-primary); outline-offset: 3px; }
.teaser__cta { position: relative; z-index: 4; }
.teaser:has(.teaser__link) { cursor: pointer; transition: box-shadow .25s ease, transform .25s ease; }
.teaser:has(.teaser__link):hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(14, 42, 71, .35); }
.teaser__image--photo img { transition: transform .5s ease; }
.teaser:has(.teaser__link):hover .teaser__image--photo img { transform: scale(1.04); }
.teaser:has(.teaser__link):hover .teaser__title { color: var(--ng-primary); }

/* ═══ Écosystème simplifié (2026-10-04) — moins de blocs, plus de doublons ═══
   Métiers en liens simples (le détail est sur chaque page métier), une
   ligne « Bientôt », puis un seul bloc « Inclus dans chaque module » en
   trois colonnes de listes courtes, et la chaîne « tout est connecté » en
   une phrase. Plus d'icônes, de statuts « En production » ni de sous-titres. */
.eco-sec { padding: clamp(32px, 5vw, 56px) 0 0; }
.eco-sec h2 { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: clamp(24px, 2.6vw, 34px); color: var(--ng-text); margin: 0 0 20px; }
.eco-trades { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.eco-trades a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--ng-navy); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; transition: background .2s ease; }
.eco-trades a::after { content: "→"; }
[dir="rtl"] .eco-trades a::after { content: "←"; }
.eco-trades a:hover { background: var(--ng-primary); }
.eco-soon-line { margin: 0; font-size: 16px; color: var(--ng-text); }
.eco-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.eco-col h3 { font-size: 18px; font-weight: 700; color: var(--ng-primary); margin: 0 0 12px; }
.eco-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.eco-col li { font-size: 16px; color: var(--ng-text); padding-left: 18px; position: relative; }
.eco-col li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ng-primary); }
[dir="rtl"] .eco-col li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .eco-col li::before { left: auto; right: 0; }
.eco-col li.eco-soon { font-style: italic; }
.eco-col li.eco-soon::before { background: var(--ng-border-strong); }
.eco-flow { margin: 0; font-size: 17px; font-weight: 600; color: var(--ng-text); line-height: 1.8; }
@media (max-width: 900px) { .eco-cols { grid-template-columns: 1fr; } }
.pg-end .mi-form select { width: 100%; min-height: 46px; padding: 0 12px; font: inherit; }
.pg-end .mi-form select option { color: var(--ng-text); }

/* Pied de page (2026-10-05, demande du propriétaire) : boutons « Google
   Play / App Store — Bientôt » retirés, WhatsApp à côté de « Contact »
   (au lieu d'une ligne à part en bas), « Supprimer mon compte » déplacé
   dans la page Confidentialité. Boutons d'action sur une seule ligne. */
.footer-actions { display: grid; grid-template-columns: max-content max-content; justify-content: start; align-items: center; gap: 10px; }
.footer-actions .footer-btn-gold { grid-column: 1 / -1; justify-self: start; }
.footer-actions .footer-btn-gold, .footer-actions .footer-contact-btn { margin-top: 0; }
.footer-contact-btn.footer-wa {
  width: 42px; height: 42px; padding: 0; justify-content: center;
  border-color: rgba(var(--ng-whatsapp-rgb), .45); background: rgba(var(--ng-whatsapp-rgb), .1); color: var(--ng-whatsapp);
}
.footer-contact-btn.footer-wa:hover { background: rgba(var(--ng-whatsapp-rgb), .2); }
.footer-contact-btn.footer-wa svg { width: 20px; height: 20px; }
/* Contact + WhatsApp seuls, à droite de la barre du bas (2026-10-05). */
.footer-bottom { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-reach { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.footer-reach .footer-contact-btn { margin-top: 0; }
.footer-actions { display: flex; }
/* Barre du bas (2026-10-05) : Contact seul à gauche, copyright au centre,
   réseaux sociaux à droite (WhatsApp ; Facebook, Instagram… plus tard,
   dans .footer-socials). Inversé automatiquement en arabe (flex). */
.footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.footer-bottom .footer-contact { justify-self: start; }
.footer-bottom .footer-socials { justify-self: end; display: flex; gap: 10px; }
.footer-bottom .footer-contact-btn { margin-top: 0; }
@media (max-width: 600px) {
  .footer-bottom { grid-template-columns: auto auto; }
  .footer-bottom > span { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}

/* Accueil (2026-10-05) : hero à angles droits en bas (demande du
   propriétaire) ; section « point de départ » resserrée — flèches,
   points et « Voir tous les secteurs » sur une seule ligne, moins
   d'espace avant la section suivante. */
.hero-banner { border-radius: 0 !important; }
#secteurs.nh-section { padding-bottom: 32px; }
#secteurs + .lemo-section { padding-top: 2.5rem; }
.card-slider__controls { flex-wrap: wrap; margin-top: 1.25rem; }
.card-slider__all { margin-inline-start: 1rem; }
@media (max-width: 600px) {
  .card-slider__all { flex-basis: 100%; margin-inline-start: 0; text-align: center; }
  #secteurs.nh-section { padding-bottom: 24px; }
}

/* SEO 2026-10-08 : le H1 porte désormais la requête recherchée ; le nom du
   module (pages métier) et la mention « logiciel hors ligne » (accueil)
   restent visibles en surtitre, sans changer la hiérarchie visuelle. */
.feat-hero--has-media h1 { max-width: 680px; } /* titre long : ne passe pas sur les captures de la vidéo */
.feat-hero .feat-hero-eyebrow { position: relative; z-index: 1; color: rgba(255,255,255,.85); margin-bottom: 10px; }
.hero-banner__title h1 .hero-banner__kicker {
  display: block; margin-bottom: 1rem;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: clamp(13px, 1.3vw, 17px); line-height: 1.3; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
[dir="rtl"] .hero-banner__title h1 .hero-banner__kicker { letter-spacing: 0; text-transform: none; }

/* Page Sécurité (securite.html) (2026-10-08). */
.sec-wrap { max-width: 820px; }
.sec-h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 18px; color: var(--lemo-primary-500); }
.sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sec-list li { position: relative; padding-left: 26px; line-height: 1.6; color: var(--lemo-ink, #1f2430); }
.sec-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ng-gold); }
[dir="rtl"] .sec-list li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .sec-list li::before { left: auto; right: 4px; }

/* FAQ des pages solutions et pays (2026-10-08) — <details> natifs, aussi
   repris en données structurées FAQPage. */
.pg-faq { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid rgba(14, 42, 71, .07); max-width: 860px; }
.pg-faq h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 24px; }
.pg-faq-item { border-bottom: 1px solid rgba(14, 42, 71, .1); padding: 16px 0; }
.pg-faq-item summary { cursor: pointer; font-weight: 700; font-size: 17px; color: var(--ng-text); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary::after { content: "+"; color: var(--lemo-primary-500); font-weight: 700; flex: none; }
.pg-faq-item[open] summary::after { content: "−"; }
.pg-faq-item p { margin: 12px 0 0; line-height: 1.6; color: var(--ng-text-soft, var(--ng-text)); }

/* Liens pays du pied de page (2026-10-08). */
.footer-countries { text-align: center; font-size: 14px; margin: 24px 0 8px; line-height: 1.8; }
.footer-countries a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Pied de page FR à 5 colonnes (colonne « Solutions », 2026-10-08). */
@media (min-width: 1081px) {
  .footer-grid:has(> div:nth-child(5)) { grid-template-columns: 1.4fr repeat(4, 1fr); }
}

/* Espacements resserrés des pages produit (2026-10-08) — même rythme que
   l'accueil (home.css, « ESPACEMENTS RESSERRÉS »). */
.lemo-section { padding: 4rem 0; }
.pg-row { padding: clamp(28px, 3.5vw, 44px) 0; gap: clamp(24px, 4vw, 56px); }
.pg-also, .pg-steps, .pg-reads, .pg-faq { padding: clamp(32px, 4vw, 52px) 0; }
.pg-also h2, .pg-steps h2, .pg-reads h2, .pg-faq h2 { margin-bottom: 22px; }
.pg-row-media img { max-height: 620px; width: auto; max-width: 100%; margin-inline: auto; display: block; }

/* ── Harmonisation des bleus (2026-10-10, demande du propriétaire) ──────────
   Un seul bleu sur tout le site : celui du logo (#1560BD), avec le marine
   (#0E2A47) pour les fonds sombres et les textes. Les bleus secondaires
   (#6FB4FF titre d'accueil, #4480CA reflets, #15467E dégradé du menu)
   sont remplacés. */
:root {
  --ng-primary-ring: var(--ng-primary);
  --ng-primary-ring-rgb: var(--ng-primary-rgb);
  --ng-brand-gui: var(--ng-primary);
  --ng-brand-gui-rgb: var(--ng-primary-rgb);
}
.hero-banner .text-highlight { color: var(--ng-primary) !important; }
.nh-home .nav-mega.nh-mega .nh-mega-head { background: rgba(21, 96, 189, .08); }
.nh-home .nav-mega a.nh-mega-cta { background: var(--ng-navy); }
.nh-home .nav-mega a.nh-mega-cta:hover { background: var(--ng-primary); }