/* ==========================================================================
   LeanModel — site vitrine (www.myleanmodel.com)
   CSS unique, sans dépendance externe (pas de Google Fonts, pas de CDN)
   → chargement instantané + aucun cookie tiers (RGPD tranquille).
   Couleurs : charte officielle du produit (assets/brief-logo-couleurs.md)
   ========================================================================== */

:root {
  --bleu: #2563EB;
  --bleu-fonce: #1D4ED8;
  --bleu-clair: #EFF6FF;
  --orange: #F59E0B;
  --orange-clair: #FFFBEB;

  --texte: #1E293B;
  --gris: #64748B;
  --bordure: #E2E8F0;
  --fond-alt: #F8FAFC;
  --blanc: #FFFFFF;

  --rayon: 12px;
  --ombre: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .04);
  --ombre-forte: 0 4px 12px rgba(37, 99, 235, .18);
  --largeur: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

/* ---------- En-tête ---------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  /* Fond opaque plutôt que translucide + flou : rendu de texte plus net et
     plus léger à l'affichage, sans différence visuelle réelle (l'ancien fond
     était déjà à 92 % d'opacité). */
  background: #fff;
  border-bottom: 1px solid var(--bordure);
}
.entete .conteneur {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px;
}
/* ⚠️ `gap: 0` OBLIGATOIRE ici. En flex, « Lean » et le <span>Model</span> sont
   DEUX éléments distincts : un `gap` s'insère entre eux et la marque s'affiche
   « Lean Model » au lieu de « LeanModel ». L'espacement avec l'icône se règle
   donc par une marge sur l'image, jamais par un gap. */
.logo {
  display: flex; align-items: center; gap: 0;
  font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em;
  color: var(--texte); text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo img { width: 30px; height: 30px; display: block; margin-right: 9px; }
.logo span { color: var(--bleu); }

/* ---------- Sélecteur de langue (menu déroulant, sans JavaScript) -------
   Construit avec <details>/<summary> : le navigateur gère l'ouverture tout
   seul, au clic comme au clavier. Aucun script, donc rien à charger.
   Les drapeaux sont de vrais SVG et non des emoji : Windows n'affiche PAS
   les emoji drapeaux (🇫🇷 s'y afficherait « FR »). */
.langues { position: relative; }

.langues > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--bordure); border-radius: 9px; background: #fff;
  font-size: .82rem; font-weight: 600; color: var(--texte);
  line-height: 1; cursor: pointer;
  list-style: none; /* retire le triangle par défaut (Firefox) */
  -webkit-user-select: none; user-select: none;
}
.langues > summary::-webkit-details-marker { display: none; } /* Safari/Chrome */
.langues > summary::marker { content: ""; }
.langues > summary:hover { border-color: var(--bleu); }
.langues[open] > summary { border-color: var(--bleu); }

/* Chevron dessiné en CSS : aucun fichier, aucune police à charger. */
.langues > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 1px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.langues[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.drapeau {
  width: 20px; height: 14px; flex-shrink: 0; display: block;
  object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1); /* détache le blanc du fond blanc */
}

.langues > ul {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 178px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--bordure); border-radius: 11px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}
.langues > ul a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 7px;
  font-size: .93rem; font-weight: 500; color: var(--texte);
}
.langues > ul a:hover { background: var(--fond-alt); text-decoration: none; }
.langues > ul a[aria-current="true"] {
  background: var(--bleu-clair); color: var(--bleu-fonce); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-liens { display: flex; gap: 26px; }
/* ⚠️ Cibler `.nav-liens a` et SURTOUT PAS `.nav a` : `.nav a` (spécificité 11)
   écrase `.btn-primaire` (spécificité 10) et repeignait le texte du bouton
   « Demander une démo » en gris sur fond bleu — illisible (contraste 1,9:1).
   Toute nouvelle règle de navigation doit rester dans `.nav-liens`. */
.nav-liens a { color: var(--gris); font-size: .95rem; font-weight: 500; }
.nav-liens a:hover { color: var(--texte); text-decoration: none; }

/* ---------- Boutons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 9px; border: 1.5px solid transparent;
  font-size: .97rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Fond volontairement plus foncé que le bleu de marque : blanc sur #2563EB ne
   donne qu'un contraste de 4,5:1 (le minimum légal), et le texte du bouton
   paraissait délavé. #1D4ED8 monte à 6,4:1 — nettement plus lisible, tout en
   restant dans la famille de la charte. */
.btn-primaire { background: var(--bleu-fonce); color: #fff; box-shadow: var(--ombre-forte); }
.btn-primaire:hover { background: #1E40AF; }
.btn-secondaire { background: #fff; color: var(--texte); border-color: var(--bordure); }
.btn-secondaire:hover { border-color: var(--bleu); color: var(--bleu); }
.btn-discret { color: var(--gris); font-weight: 500; padding: 12px 8px; }
.btn-discret:hover { color: var(--texte); }
.btn-grand { padding: 15px 30px; font-size: 1.05rem; }

/* ---------- Sections --------------------------------------------------- */
section { padding: 84px 0; }
.section-alt { background: var(--fond-alt); border-block: 1px solid var(--bordure); }
.section-titre { max-width: 720px; margin-bottom: 48px; }
.section-titre.centre { margin-inline: auto; text-align: center; }
.section-titre p { color: var(--gris); font-size: 1.1rem; margin-bottom: 0; }

.surtitre {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bleu); margin-bottom: 12px;
}

/* ---------- Hero ------------------------------------------------------- */
.hero {
  padding: 76px 0 88px;
  background:
    radial-gradient(900px 420px at 12% -8%, var(--bleu-clair), transparent 65%),
    radial-gradient(700px 360px at 92% 8%, var(--orange-clair), transparent 60%);
}
.hero-grille {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: 20px; }
.hero-accroche { font-size: 1.16rem; color: var(--gris); max-width: 33em; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.reassurance {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: .89rem; color: var(--gris); padding: 0; margin: 0; list-style: none;
}
/* Texte simple sans balise interne : le flex est sans risque ici. */
.reassurance li { display: flex; align-items: center; gap: 7px; }
.reassurance li::before {
  content: "✓"; flex-shrink: 0;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--bleu); color: #fff;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 800; line-height: 1;
}

/* ---------- Captures d'écran du produit --------------------------------- */
/* Vraies captures du tenant démo (voir site/preparer-captures.py).
   Le cadre imite une fenêtre de navigateur : ça situe tout de suite qu'il
   s'agit d'une application web, sans avoir à l'écrire. */
.capture {
  background: #fff; border: 1px solid var(--bordure); border-radius: 14px;
  box-shadow: var(--ombre); overflow: hidden;
}
.capture-barre {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 14px; background: var(--fond-alt);
  border-bottom: 1px solid var(--bordure);
}
.capture-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--bordure); flex-shrink: 0; }
.capture-barre span {
  margin-left: 8px; font-size: .72rem; color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.capture img { display: block; width: 100%; height: auto; }

/* Dans le hero : on montre le haut de l'écran, le bas est coupé. */
.capture-hero img { aspect-ratio: 16 / 11; object-fit: cover; object-position: top left; }

/* ---------- Visite guidée : onglets 100 % CSS, sans JavaScript ----------- */
/* Une seule capture affichée à la fois, en pleine largeur : c'est la seule
   façon que le contenu de l'application reste LISIBLE. Les boutons sont des
   <label> reliés à des <input type="radio"> masqués → navigable au clavier. */
.visite { position: relative; }
.visite > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.visite-onglets {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px;
}
.visite-onglets label {
  display: inline-block; cursor: pointer; user-select: none;
  padding: 9px 16px; border-radius: 99px;
  border: 1px solid var(--bordure); background: #fff;
  font-size: .92rem; color: var(--gris);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.visite-onglets label:hover { border-color: var(--bleu); color: var(--bleu); }

.visite-ecran { display: none; margin: 0; }
.visite-legende { margin-top: 15px; text-align: center; }
.visite-legende b { display: block; font-size: 1.06rem; color: var(--texte); margin-bottom: 3px; }
.visite-legende span { font-size: .96rem; color: var(--gris); }

/* Onglet actif + écran correspondant (un couple par capture) */
#ecran-1:checked ~ .visite-onglets label[for="ecran-1"],
#ecran-2:checked ~ .visite-onglets label[for="ecran-2"],
#ecran-3:checked ~ .visite-onglets label[for="ecran-3"],
#ecran-4:checked ~ .visite-onglets label[for="ecran-4"],
#ecran-5:checked ~ .visite-onglets label[for="ecran-5"],
#ecran-6:checked ~ .visite-onglets label[for="ecran-6"],
#ecran-7:checked ~ .visite-onglets label[for="ecran-7"],
#ecran-8:checked ~ .visite-onglets label[for="ecran-8"],
#ecran-9:checked ~ .visite-onglets label[for="ecran-9"],
#ecran-10:checked ~ .visite-onglets label[for="ecran-10"] {
  background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; font-weight: 600;
}
#ecran-1:focus-visible ~ .visite-onglets label[for="ecran-1"],
#ecran-2:focus-visible ~ .visite-onglets label[for="ecran-2"],
#ecran-3:focus-visible ~ .visite-onglets label[for="ecran-3"],
#ecran-4:focus-visible ~ .visite-onglets label[for="ecran-4"],
#ecran-5:focus-visible ~ .visite-onglets label[for="ecran-5"],
#ecran-6:focus-visible ~ .visite-onglets label[for="ecran-6"],
#ecran-7:focus-visible ~ .visite-onglets label[for="ecran-7"],
#ecran-8:focus-visible ~ .visite-onglets label[for="ecran-8"],
#ecran-9:focus-visible ~ .visite-onglets label[for="ecran-9"],
#ecran-10:focus-visible ~ .visite-onglets label[for="ecran-10"] {
  outline: 3px solid var(--orange); outline-offset: 2px;
}
#ecran-1:checked ~ .visite-ecrans .visite-ecran:nth-of-type(1),
#ecran-2:checked ~ .visite-ecrans .visite-ecran:nth-of-type(2),
#ecran-3:checked ~ .visite-ecrans .visite-ecran:nth-of-type(3),
#ecran-4:checked ~ .visite-ecrans .visite-ecran:nth-of-type(4),
#ecran-5:checked ~ .visite-ecrans .visite-ecran:nth-of-type(5),
#ecran-6:checked ~ .visite-ecrans .visite-ecran:nth-of-type(6),
#ecran-7:checked ~ .visite-ecrans .visite-ecran:nth-of-type(7),
#ecran-8:checked ~ .visite-ecrans .visite-ecran:nth-of-type(8),
#ecran-9:checked ~ .visite-ecrans .visite-ecran:nth-of-type(9),
#ecran-10:checked ~ .visite-ecrans .visite-ecran:nth-of-type(10) { display: block; }

.galerie-note { margin-top: 30px; text-align: center; font-size: .9rem; color: var(--gris); }

/* ---------- Cartes / grilles ------------------------------------------- */
.grille { display: grid; gap: 20px; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }

.carte {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 26px; box-shadow: var(--ombre);
}
.carte h3 { margin-bottom: 8px; }
.carte p { color: var(--gris); font-size: .96rem; margin-bottom: 0; }
.carte-icone { font-size: 1.6rem; line-height: 1; margin-bottom: 14px; display: block; }

/* Problème */
.carte-probleme { border-left: 3px solid var(--orange); }

/* Étapes */
.etape { position: relative; padding-left: 60px; }
.etape-num {
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bleu); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.05rem;
}
.etape h3 { margin-bottom: 6px; }
.etape p { color: var(--gris); margin-bottom: 0; font-size: .96rem; }

/* Modules */
.grille-modules { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.module {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 22px 20px; transition: border-color .15s ease, transform .15s ease;
}
.module:hover { border-color: var(--bleu); transform: translateY(-2px); }
.module-icone { font-size: 1.45rem; display: block; margin-bottom: 10px; }
.module h3 { font-size: 1.02rem; margin-bottom: 5px; }
.module p { font-size: .89rem; color: var(--gris); margin: 0; line-height: 1.55; }

.module-coeur {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  border-color: transparent; color: #fff;
}
.module-coeur:hover { transform: none; border-color: transparent; }
.module-coeur h3 { color: #fff; font-size: 1.15rem; }
.module-coeur p { color: rgba(255, 255, 255, .9); font-size: .96rem; }

/* Encarts sous la grille des modules (sur-mesure + évolutions à venir) */
.encarts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
.encarts .encart { margin-top: 0; }

.encart {
  margin-top: 24px; padding: 26px 30px;
  background: var(--orange-clair); border: 1px solid #FDE68A; border-radius: var(--rayon);
}
.encart h3 { margin-bottom: 6px; }
.encart p { margin-bottom: 0; color: #78350F; }

.encart-bleu { background: var(--bleu-clair); border-color: #BFDBFE; }
.encart-bleu p { color: #1E3A8A; }

/* ---------- Pour qui --------------------------------------------------- */
/* NB : surtout PAS de `display:flex` sur le <li>. En flex, chaque <strong> du
   texte devient un flex item distinct et se retrouve mis en colonne au lieu de
   couler dans la phrase. La puce est donc positionnée en absolu. */
.liste-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.liste-check li { position: relative; padding-left: 35px; font-size: 1rem; }
.liste-check li::before {
  content: "✓"; position: absolute; left: 0; top: 2px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--bleu-clair); color: var(--bleu);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800;
}
.liste-check.non li::before { content: "✕"; background: #FEF2F2; color: #DC2626; }

/* ---------- Fondateur -------------------------------------------------- */
.fondateur { background: #fff; border: 1px solid var(--bordure); border-radius: 16px; padding: 38px; box-shadow: var(--ombre); }
.fondateur blockquote {
  margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--texte);
  border-left: 3px solid var(--bleu); padding-left: 22px;
}
.fondateur footer { margin-top: 18px; padding-left: 25px; color: var(--gris); font-size: .93rem; }

/* ---------- Offre / prix ----------------------------------------------- */
.offre {
  max-width: 640px; margin: 0 auto;
  background: #fff; border: 2px solid var(--bleu); border-radius: 18px;
  padding: 40px; box-shadow: 0 12px 40px rgba(37, 99, 235, .12); text-align: center;
}
.badge {
  display: inline-block; background: var(--orange); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 99px; margin-bottom: 18px;
}
.prix { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.prix-montant { font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.prix-periode { color: var(--gris); font-size: 1.05rem; }
.prix-barre { color: var(--gris); text-decoration: line-through; font-size: 1.05rem; }
.prix-note { color: var(--gris); font-size: .9rem; margin-bottom: 26px; }

/* Même remarque que .liste-check : puce en absolu, pas en flex. */
.offre-inclus { list-style: none; padding: 0; margin: 0 0 30px; text-align: left; display: grid; gap: 12px; }
.offre-inclus li { position: relative; padding-left: 34px; font-size: .98rem; }
.offre-inclus li::before {
  content: "✓"; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bleu); color: #fff; display: grid; place-items: center;
  font-size: .76rem; font-weight: 800;
}
.offre-contrepartie {
  font-size: .92rem; color: var(--gris); background: var(--fond-alt);
  border-radius: 9px; padding: 14px 18px; margin-top: 22px; margin-bottom: 0;
}

/* ---------- FAQ (sans JavaScript) -------------------------------------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: #fff; margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: var(--bleu); }
.faq summary {
  cursor: pointer; padding: 20px 24px; font-weight: 600; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--bleu);
  flex-shrink: 0; line-height: 1; transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--bleu); }
.faq-reponse { padding: 0 24px 22px; color: var(--gris); font-size: .97rem; }
.faq-reponse p:last-child { margin-bottom: 0; }

/* ---------- CTA final -------------------------------------------------- */
.cta-final {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: #fff; text-align: center;
}
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255, 255, 255, .92); font-size: 1.12rem; max-width: 620px; margin: 0 auto 30px; }
.cta-final .btn-primaire { background: #fff; color: var(--bleu); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.cta-final .btn-primaire:hover { background: var(--fond-alt); }
.cta-final .btn-secondaire { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.cta-final .btn-secondaire:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Pied de page ----------------------------------------------- */
.pied { background: #0F172A; color: #94A3B8; padding: 52px 0 30px; font-size: .93rem; }
.pied a { color: #CBD5E1; }
.pied a:hover { color: #fff; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.pied h4 { color: #fff; font-size: .95rem; margin: 0 0 14px; font-weight: 600; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pied .logo { color: #fff; margin-bottom: 12px; }
.pied .logo span { color: #60A5FA; }
.pied-bas {
  border-top: 1px solid #1E293B; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .87rem;
}

/* ---------- Pages légales ---------------------------------------------- */
.page-legale { max-width: 780px; padding: 60px 0 80px; }
.page-legale h1 { font-size: 2.1rem; margin-bottom: 8px; }
.page-legale .maj { color: var(--gris); font-size: .9rem; margin-bottom: 40px; }
.page-legale h2 { font-size: 1.3rem; margin-top: 38px; margin-bottom: 12px; }
.page-legale p, .page-legale li { color: #334155; font-size: 1rem; }
.page-legale ul { padding-left: 22px; }
.page-legale li { margin-bottom: 7px; }

/* Champ à compléter dès l'immatriculation de la société */
.a-completer {
  background: var(--orange-clair); border: 1px dashed var(--orange);
  border-radius: 6px; padding: 2px 9px; color: #92400E;
  font-size: .93rem; font-weight: 600; white-space: nowrap;
}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 960px) {
  .hero-grille { grid-template-columns: 1fr; gap: 40px; }
  .grille-modules { grid-template-columns: repeat(2, 1fr); }
  .grille-3 { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .nav-liens { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }
  .hero { padding: 48px 0 60px; }
  .grille-modules, .grille-2, .encarts { grid-template-columns: 1fr; }
  .visite-onglets { gap: 6px; }
  .visite-onglets label { padding: 7px 12px; font-size: .84rem; }
  .pied-grille { grid-template-columns: 1fr; gap: 28px; }
  .offre, .fondateur { padding: 28px 22px; }
  .btn { width: 100%; }
  .hero-actions, .cta-actions { flex-direction: column; }
  /* --- En-tête sur téléphone -------------------------------------------
     Il doit tenir logo + sélecteur de langue + bouton dans ~330 px utiles.
     Sans compactage, l'ensemble mesure ~437 px et déborde de l'écran. */
  .conteneur { padding: 0 16px; }
  .entete .conteneur { min-height: 58px; gap: 10px; }
  .nav { gap: 8px; }
  .btn-discret { display: none; }
  .logo { font-size: 1.05rem; }
  .logo img { margin-right: 7px; }
  /* Le sélecteur de langue reste visible sur mobile : beaucoup de visiteurs
     arrivent depuis LinkedIn sur téléphone et doivent pouvoir changer de langue. */
  .langues > summary { padding: 6px 9px; gap: 6px; font-size: .78rem; }
  .entete .btn-primaire { padding: 9px 13px; font-size: .82rem; width: auto; }
}

/* Très petits téléphones (iPhone SE, Android compacts) : le nom « LeanModel »
   de l'en-tête laisse la place à l'icône seule, sinon la barre déborde. Le
   texte reste dans le HTML : les lecteurs d'écran continuent de l'annoncer. */
@media (max-width: 520px) {
  .logo { font-size: 0; }
  .logo img { width: 32px; height: 32px; margin-right: 0; }
  /* Le drapeau seul suffit à identifier la langue : on masque le code
     « FR / EN / ES » pour que la barre tienne sur les petits écrans. */
  .langues > summary .langue-code { display: none; }
  .prix-montant { font-size: 2.6rem; }
  .fondateur blockquote { font-size: 1.02rem; padding-left: 16px; }
  .faq summary { padding: 16px 18px; font-size: .96rem; }
  .faq-reponse { padding: 0 18px 18px; }
}

/* Filet de sécurité : aucun média ne doit pouvoir élargir la page. */
img, svg, video, table, pre { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Impression -------------------------------------------------- */
@media print {
  .entete, .cta-final, .hero-actions { display: none; }
  body { font-size: 12pt; }
}