/* Pages publiques (landing, piliers, centre de ressources).
 *
 * Sorti du <style> de `public/landing.html` le 19.08.2026, SANS modifier une seule regle :
 * toute nouvelle page publique aurait recopie ces 163 lignes.
 *
 * A servir par `sv('css/public.css')`, jamais par un chemin en dur : sans le suffixe de
 * version, un navigateur qui a deja vu la page sert sa copie en cache et la nouvelle mise en
 * page parait cassee sans que rien ne l'explique.
 */

:root {
  --lp-petrole: #123A50; --lp-petrole-d: #0C2A3A; --lp-brand: #1B4965;
  --lp-ink: #10222E; --lp-body: #45575F; --lp-muted: #7C909B;
  /* ⚠ `--lp-muted` (#7C909B) donne 3,32 de contraste sur blanc : sous le minimum AA de 4,5
     pour un texte de 14 px, mesuré par Lighthouse le 17.08.2026. Il reste bon sur les fonds
     colorés ; le pied de page, lui, est blanc, d'où cette teinte plus dense (5,02). */
  --lp-foot-ink: #5E727D;
  --lp-paper: #F2F5F5; --lp-surface: #FFFFFF; --lp-line: #E2E7E8;
  --lp-green: #2C7A5E; --lp-green-soft: #E7F2ED; --lp-green-ink: #1E5A44;
  --lp-gold: #A6812F; --lp-gold-strong: #C79A3E; --lp-gold-soft: #F5EDD9; --lp-gold-ink: #7C5F1F;
}
/* Page prend le pas sur le thème sombre de l'app : c'est une page marketing fixe */
.lp { background: var(--lp-surface); color: var(--lp-ink); font-family: 'Onest', system-ui, sans-serif; overflow-x: hidden; }
.lp * { box-sizing: border-box; }
.lp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.lp h1, .lp h2, .lp h3 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; margin: 0; color: var(--lp-ink); }
.lp p { margin: 0; }
.lp-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; }
.lp a { text-decoration: none; }

/* ── NAV ── */
.lp-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.lp-nav .lp-wrap { display: flex; align-items: center; height: 76px; gap: 16px; }
.lp-logo { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.18rem; color: #fff; }
.lp-logo .suffix { font-style: italic; font-weight: 500; opacity: .82; font-size: .98rem; }
.lp-needle { width: 19px; height: 19px; color: #fff; flex: none; }
.lp-nav-sp { flex: 1; }
.lp-nav a.link { color: rgba(255,255,255,.86); font-weight: 500; font-size: .95rem; }
.lp-nav a.lp-nav-lien { color: rgba(255,255,255,.86); font-weight: 500; font-size: .95rem; text-decoration: none; }
.lp-nav a.lp-nav-lien:hover { color: #fff; }
/* Le selecteur sur fond petrole : la landing a une palette fixe, il ne peut pas hériter
   des variables de theme de l'app. */
.lp-nav .lang-btn { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); color: #fff; }
.lp-nav .lang-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.42); }
.lp-nav .dr-sep { stroke: rgba(255,255,255,.5); }
.lp-nav .dr-bord { stroke: rgba(255,255,255,.45); }
.lp-nav a.link:hover { color: #fff; }

/* ── BUTTONS ── */
.lp-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: .96rem; padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; }
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn--gold { background: var(--lp-gold-strong); color: #241a05; border-color: var(--lp-gold-strong); box-shadow: 0 6px 20px rgba(199,154,62,.35); }
.lp-btn--gold:hover { background: #d3a648; }
.lp-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.lp-btn--ghost-light:hover { border-color: #fff; }
.lp-btn--dark { background: var(--lp-petrole); color: #fff; border-color: var(--lp-petrole); }
.lp-btn--dark:hover { background: var(--lp-brand); }
.lp-btn--ghost { background: transparent; color: var(--lp-ink); border-color: var(--lp-line); }
.lp-btn--ghost:hover { border-color: var(--lp-ink); }

/* ── HERO ── */
.lp-hero { position: relative; background: radial-gradient(120% 120% at 80% 0%, #17455E 0%, var(--lp-petrole) 45%, var(--lp-petrole-d) 100%); color: #fff; padding: 128px 0 92px; }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.lp-hero .lp-eyebrow { color: var(--lp-gold-strong); }
.lp-hero h1 { color: #fff; font-size: clamp(2.15rem, 4.9vw, 3.55rem); font-weight: 700; line-height: 1.04; margin: 18px 0 0; }
.lp-hero h1 em { font-style: normal; color: var(--lp-gold-strong); }
.lp-hero .lead { color: rgba(255,255,255,.82); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; margin-top: 22px; max-width: 540px; }
.lp-hero .lp-cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* ── SECTIONS ── */
.lp-sec { padding: 92px 0; }
.lp-sec--alt { background: var(--lp-paper); }
.lp-sec--dark { background: var(--lp-petrole); color: #fff; }
.lp-sec-head { max-width: 720px; margin-bottom: 46px; }
.lp-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-sec-head .lp-eyebrow { color: var(--lp-green-ink); }
.lp-sec--dark .lp-sec-head .lp-eyebrow { color: var(--lp-gold-strong); }
.lp-sec h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.08; margin: 14px 0 0; }
.lp-sec--dark h2 { color: #fff; }
.lp-sec h2 em { font-style: normal; color: var(--lp-green); }
.lp-sec-head p { color: var(--lp-body); font-size: 1.12rem; margin-top: 16px; }
.lp-sec--dark .lp-sec-head p { color: rgba(255,255,255,.8); }

/* ── COMPARE (avant / avec) ── */
.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lp-panel { background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 20px; padding: 28px; }
.lp-panel--bad { border-color: #E9D3CE; background: linear-gradient(180deg, #FBF4F2, #fff); }
.lp-panel--good { border-color: var(--lp-green-soft); background: linear-gradient(180deg, var(--lp-green-soft), #fff); box-shadow: 0 12px 40px rgba(44,122,94,.12); }
.lp-panel .tag { display: inline-flex; align-items: center; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.lp-panel--bad .tag { background: #F3E1DC; color: #A24634; }
.lp-panel--good .tag { background: #D6EBE1; color: var(--lp-green-ink); }
.lp-panel svg { width: 100%; height: auto; margin: 14px 0 6px; display: block; }
.lp-panel h3 { font-size: 1.16rem; margin-top: 8px; }
.lp-panel p { color: var(--lp-body); font-size: .98rem; margin-top: 8px; line-height: 1.5; }
/* Vidéo de présentation (2e section de l'accueil) */
.lp-video { max-width: 940px; margin: 8px auto 0; border-radius: 18px; overflow: hidden; background: var(--lp-petrole); border: 1px solid rgba(95,183,154,.30); box-shadow: 0 30px 80px rgba(9,34,47,.28); }
.lp-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--lp-petrole); }

/* ── FLOW (4 étapes) ── */
.lp-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lp-flow::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--lp-line) 0 10px, transparent 10px 18px); z-index: 0; }
.lp-step { position: relative; z-index: 1; }
.lp-step .dot { width: 68px; height: 68px; border-radius: 18px; background: var(--lp-surface); border: 1.5px solid var(--lp-line); display: grid; place-items: center; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(16,34,46,.06); }
.lp-step .dot svg { width: 30px; height: 30px; stroke: var(--lp-brand); fill: none; stroke-width: 1.7; }
.lp-step .n { font-family: 'IBM Plex Mono', monospace; font-size: .74rem; letter-spacing: .1em; color: var(--lp-muted); }
.lp-step h3 { font-size: 1.08rem; margin: 6px 0 6px; }
.lp-step p { color: var(--lp-body); font-size: .94rem; line-height: 1.5; }
.lp-step .free { display: inline-block; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-green-ink); background: var(--lp-green-soft); padding: 3px 9px; border-radius: 999px; }

/* ── OFFRE FOURNISSEURS (dans la section pétrole : cartes claires sur fond sombre) ── */
.lp-offer-block { margin-top: 74px; }
.lp-offer-block .lp-sec-head { margin-bottom: 40px; }
/* `.lp h3` (0,1,1) bat une classe seule (0,1,0) : on qualifie, sinon titre sombre sur fond sombre. */
.lp h3.lp-offer-title { font-size: clamp(1.5rem, 2.9vw, 2.1rem); font-weight: 700; line-height: 1.1; color: #fff; margin: 14px 0 0; }
.lp h3.lp-offer-title em { font-style: normal; color: #5FB79A; }
.lp-offer-block .lp-sec-head p { color: rgba(255,255,255,.78); }
.lp-offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp-offer { position: relative; display: flex; flex-direction: column; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; padding: 26px 26px 24px; transition: transform .16s, box-shadow .16s, border-color .16s, background .16s; }
.lp-offer:hover { transform: translateY(-3px); background: rgba(255,255,255,.07); border-color: #5FB79A; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.lp-offer .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(95,183,154,.16); margin-bottom: 16px; }
.lp-offer .ic svg { width: 23px; height: 23px; stroke: #5FB79A; fill: none; stroke-width: 1.7; }
.lp-offer .n { position: absolute; top: 26px; right: 26px; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: rgba(255,255,255,.34); }
.lp-offer h3 { font-size: 1.24rem; color: #fff; }
.lp-offer p { color: rgba(255,255,255,.76); font-size: 1rem; line-height: 1.55; margin: 9px 0 16px; }
.lp-offer .foot { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.15); color: #5FB79A; font-size: .89rem; font-weight: 500; line-height: 1.45; }
.lp-offer .foot svg { width: 15px; height: 15px; stroke: #5FB79A; fill: none; stroke-width: 2.2; flex: none; margin-top: 3px; }
.lp-offer-note { margin-top: 26px; background: rgba(95,183,154,.10); border: 1px solid rgba(95,183,154,.26); border-radius: 16px; padding: 22px 26px; display: flex; gap: 16px; align-items: flex-start; }
.lp-offer-note svg { width: 22px; height: 22px; stroke: #5FB79A; fill: none; stroke-width: 1.8; flex: none; margin-top: 2px; }
.lp-offer-note p { color: rgba(255,255,255,.84); font-size: 1rem; line-height: 1.55; }
.lp-offer-note strong { font-weight: 650; color: #fff; }
.lp-free-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--lp-green); color: #fff; font-weight: 600; font-size: .92rem; padding: 8px 18px; border-radius: 999px; margin-top: 18px; }

/* ── MODEL ── */
.lp-model-art { max-width: 860px; margin: 0 auto 12px; }
.lp-model-art svg { width: 100%; height: auto; display: block; }
/* `.lp p { margin:0 }` est plus spécifique qu'une classe seule → on qualifie par p. */
.lp p.lp-model-quote { max-width: 680px; margin: 34px auto 0; text-align: center; position: relative; padding-top: 26px; }
.lp-model-quote::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 54px; height: 3px; border-radius: 2px; background: var(--lp-gold-strong); }
.lp-model-quote .q1 { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.25rem, 2.3vw, 1.55rem); font-weight: 650; color: #fff; line-height: 1.3; }

/* ── TRUST ── */
.lp-trust { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: center; }
.lp-trust .it { display: flex; align-items: center; gap: 10px; color: var(--lp-body); font-weight: 500; }
.lp-trust .it svg { width: 22px; height: 22px; stroke: var(--lp-green); fill: none; stroke-width: 1.7; }

/* ── FINAL ── */
.lp-final { text-align: center; }
.lp-final h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.lp-final p { color: var(--lp-body); font-size: 1.14rem; margin: 16px auto 30px; max-width: 560px; }
.lp-foot { border-top: 1px solid var(--lp-line); padding: 30px 0; }
.lp-foot .lp-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lp-foot .lp-logo { color: var(--lp-ink); }
.lp-foot .lp-needle { color: var(--lp-brand); }
.lp-foot .lp-logo .suffix { color: var(--lp-body); }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.in .draw, .lp-hero .draw { animation: dash 1.1s ease forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }
.pop { opacity: 0; transform: scale(.7); transform-origin: center; }
.in .pop, .lp-hero .pop { animation: pop .5s ease forwards; }
@keyframes pop { to { opacity: 1; transform: scale(1); } }

@media (max-width: 900px) {
  .lp-hero-grid, .lp-compare, .lp-offer-grid { grid-template-columns: 1fr; }
  .lp-hero { padding-top: 108px; }
  .lp-hero-art { max-width: 460px; margin: 8px auto 0; }
  .lp-flow { grid-template-columns: 1fr 1fr; }
  .lp-flow::before { display: none; }
  .lp-nav a.link, .lp-nav a.lp-nav-lien, .lp-nav .lp-btn--ghost-light { display: none; }
}
@media (max-width: 560px) { .lp-flow { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .draw, .pop { opacity: 1 !important; transform: none !important; animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ── Pages piliers et centre de ressources (coque `public/page.html`) ───────────────
 *
 * ⚠ `.lp-nav` est en `position: absolute`, sans fond, et son texte est BLANC : elle est
 * dessinee par-dessus le degrade sombre du hero de l'accueil. Une page pilier au fond clair
 * la rendrait invisible, texte blanc sur blanc. D'ou ce bandeau de titre, qui reprend
 * exactement le degrade de `.lp-hero` : il porte le titre de la page ET rend la barre
 * lisible. Toute page publique doit donc commencer par lui.
 */
.lp-tete { position: relative; background: radial-gradient(120% 120% at 80% 0%, #17455E 0%, var(--lp-petrole) 45%, var(--lp-petrole-d) 100%); color: #fff; padding: 128px 0 56px; }
.lp-tete h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.08; margin: 0; }
.lp-tete .lead { color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; margin-top: 18px; max-width: 640px; }
.lp-corps { padding: 56px 0 72px; min-height: 46vh; }
.lp-corps h2 { color: var(--lp-ink); font-size: 1.5rem; margin: 40px 0 12px; }
.lp-corps h3 { color: var(--lp-ink); font-size: 1.15rem; margin: 28px 0 8px; }
.lp-corps p, .lp-corps li { color: var(--lp-body); line-height: 1.65; }
.lp-corps a { color: var(--lp-brand); }
.lp-corps > .lp-wrap > :first-child { margin-top: 0; }

/* ── Questions frequentes (accueil) ─────────────────────────────────────────────────
 *
 * ⚠ Le texte des reponses est dans le HTML servi, pas injecte par JavaScript : un contenu
 * replie dans un <details> est parfaitement indexable, un contenu ajoute apres coup ne l'est
 * pas toujours. C'est aussi ce qui permet a la page de porter un FAQPage honnete.
 */
.lp-faq { max-width: 840px; margin: 0 auto; }
.lp-faq-item { border-bottom: 1px solid var(--lp-line); padding: 18px 0; }
.lp-faq-item summary { cursor: pointer; font-weight: 600; color: var(--lp-ink); font-size: 1.05rem; line-height: 1.45; list-style: none; position: relative; padding-right: 32px; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
/* Le chevron est en `::after` plutot qu'en SVG : il doit tourner a l'ouverture, et un
   caractere suffit. `aria-hidden` n'a pas lieu d'etre, un pseudo-element n'est pas lu. */
.lp-faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--lp-brand); line-height: 1; }
.lp-faq-item[open] summary::after { content: "\2013"; }
.lp-faq-item summary:hover { color: var(--lp-brand); }
.lp-faq-item p { color: var(--lp-body); line-height: 1.65; margin: 12px 0 4px; }