/*
| Accueil public. La coquille (nav, FAQ, pied de page) vient de marketing.css.
|
| Fil conducteur : la mascotte est en pixel art, donc les blocs lui répondent
| (bords en escalier, carrés de progression, boutons à ombre dure). Le vert et
| l'orange des blocs pleins restent fixes en thème sombre ; le reste suit les
| variables du thème.
*/
.lp { --lp-green:#1d5f49; --lp-green-deep:#154635; --lp-cream:#fbf9f0; --lp-cream-2:#d5e3d2; --lp-orange:#ec7a2d; --lp-orange-soft:#ffc08f; --lp-night:#22160c; overflow-x:clip; }
.lp-wrap { max-width:1180px; margin:0 auto; padding:0 30px; }
.lp-section { padding:96px 0 0; }
.lp-eyebrow { margin:0 0 14px; font:11px/1.4 var(--font-small); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }
.lp-h2 { margin:0 0 14px; font-family:var(--font-heading); font-weight:600; font-size:clamp(29px,3.7vw,46px); line-height:1.08; letter-spacing:-.035em; color:var(--title-color); text-wrap:balance; }
.lp-sub { margin:0; max-width:58ch; color:var(--ink-3); font-size:17px; line-height:1.6; }
.lp-head { max-width:760px; margin:0 auto 42px; text-align:center; }
.lp-head .lp-sub { margin:0 auto; }
.lp-tag { font:10px var(--font-small); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }

/* Boutons : ombre dure, comme une touche qu'on enfonce. */
.lp-btn { display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border-radius:10px; background:var(--lp-green); color:var(--lp-cream); font:500 16px var(--font-button); text-decoration:none; box-shadow:0 4px 0 var(--lp-green-deep); transition:transform .1s,box-shadow .1s; }
.lp-btn:hover { transform:translateY(2px); box-shadow:0 2px 0 var(--lp-green-deep); }
.lp-btn:active { transform:translateY(4px); box-shadow:none; }
.lp-btn--light { background:var(--lp-cream); color:var(--lp-green-deep); box-shadow:0 4px 0 var(--lp-cream-2); }
.lp-btn--light:hover { box-shadow:0 2px 0 var(--lp-cream-2); }
.lp-link { color:var(--ink-2); font-size:15px; text-underline-offset:4px; }

/* ─── Hero ─── */
.lp-hero { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:56px; align-items:center; padding:42px 0 26px; }
.lp-hero h1 { margin:0 0 22px; font-family:var(--font-heading); font-weight:600; font-size:clamp(50px,7.1vw,88px); line-height:1; letter-spacing:-.05em; color:var(--ink); }
.lp-hero h1 span { display:block; }
.lp-hero h1 .lp-accent { color:var(--title-color); }
.lp-lead { margin:0 0 30px; max-width:50ch; color:var(--ink-2); font-size:19px; line-height:1.55; }
.lp-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.lp-trust { display:flex; flex-wrap:wrap; gap:8px 22px; margin:30px 0 0; padding:0; list-style:none; color:var(--ink-3); font-size:13.5px; }
.lp-trust li::before { content:""; display:inline-block; width:8px; height:8px; margin-right:9px; background:var(--lp-orange); }

.lp-stage { position:relative; padding:136px 24px 24px; border-radius:26px; background:var(--lp-green) repeating-conic-gradient(#ffffff09 0 25%,transparent 0 50%) 0 0/56px 56px; }
.lp-dog { position:absolute; left:36px; top:30px; z-index:2; height:114px; width:auto; animation:lp-hop .36s steps(2) 2.1s 3; }
.lp-bubble { position:absolute; left:136px; top:38px; display:grid; padding:10px 15px; border:2px solid var(--lp-night); background:var(--lp-cream); color:var(--lp-night); font-size:14px; font-weight:500; box-shadow:4px 4px 0 #0000002e; }
.lp-bubble::before { content:""; position:absolute; left:-10px; bottom:12px; width:8px; height:8px; background:var(--lp-night); }
.lp-bubble span { grid-area:1/1; }
.lp-bubble span:first-child { animation:lp-out .3s 2s both; }
.lp-bubble span:last-child { animation:lp-in .3s 2.1s both; }
.lp-card { position:relative; padding:20px 22px; border-radius:14px; background:var(--surface); box-shadow:0 18px 40px #0b2a2042; }
.lp-card-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:12.5px; color:var(--ink-3); }
.lp-q { margin:0 0 14px; font-weight:600; font-size:18px; line-height:1.35; letter-spacing:-.02em; color:var(--ink); }
.lp-a { margin-bottom:12px; padding:12px 14px; border:1px solid var(--rule); border-radius:10px; background:var(--paper); color:var(--ink-2); font-size:14.5px; line-height:1.5; animation:lp-in .45s .8s both; }
.lp-verdict { padding:13px 15px; border-left:4px solid var(--ok); background:var(--ok-bg); font-size:14px; line-height:1.5; color:var(--ink-2); animation:lp-in .45s 2s both; }
.lp-verdict strong { display:block; margin-bottom:3px; color:var(--ok); }
.lp-source { display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:6px 10px; background:var(--lp-orange); color:var(--lp-night); font:12px var(--font-small); animation:lp-in .45s 2.7s both; }
.lp-next { display:block; margin-top:10px; font-size:12.5px; color:var(--ink-3); animation:lp-in .45s 3.3s both; }
@keyframes lp-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes lp-out { to { opacity:0; } }
@keyframes lp-hop { 50% { transform:translateY(-8px); } }

/* ─── Formats et matières ─── */
.lp-formats { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 30px; margin-top:40px; padding:20px 0; border-block:1px solid var(--rule); }
.lp-formats p { margin:0; color:var(--ink-2); font-size:15px; }
.lp-formats ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.lp-formats li { padding:5px 10px; background:var(--paper-2); color:var(--ink-2); font:12px var(--font-small); }

/* ─── Bandes vertes, bords en escalier ─── */
.lp-band { position:relative; margin-top:112px; padding:78px 0; background:var(--lp-green); color:var(--lp-cream); }
.lp-band::before, .lp-band::after { content:""; position:absolute; left:0; right:0; height:16px; background:var(--lp-green); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16'%3E%3Cpath d='M0 16V8h8V0h16v8h16V0h8v8h24V0h16v8h8v8z'/%3E%3C/svg%3E") repeat-x 0 0/96px 16px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16'%3E%3Cpath d='M0 16V8h8V0h16v8h16V0h8v8h24V0h16v8h8v8z'/%3E%3C/svg%3E") repeat-x 0 0/96px 16px; }
.lp-band::before { top:-15px; }
.lp-band::after { bottom:-15px; transform:scaleY(-1); }
.lp-band .lp-h2 { color:var(--lp-cream); font-size:clamp(34px,5vw,62px); }
.lp-band .lp-sub { color:var(--lp-cream-2); font-size:18px; }
.lp-band .lp-h2 span { display:block; }
.lp-band .lp-h2 span + span { color:var(--lp-orange-soft); }
.lp-band a:not(.lp-btn) { color:var(--lp-orange-soft); text-underline-offset:4px; }
.lp-pain { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:64px; align-items:center; }
.lp-stat { padding:28px; border:2px solid #ffffff2b; background:var(--lp-green-deep); }
.lp-squares { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-bottom:20px; }
.lp-squares i { aspect-ratio:1; background:#ffffff1f; }
.lp-squares i.on { background:var(--lp-orange); }
.lp-stat p { margin:0 0 12px; font-size:18px; line-height:1.45; }
.lp-stat p strong { color:var(--lp-orange-soft); font-weight:600; }
.lp-stat small { display:block; margin-bottom:16px; color:var(--lp-cream-2); font-size:12.5px; }
.lp-stat a { font-size:14px; }

/* ─── Trois gestes ─── */
.lp-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lp-step { display:flex; flex-direction:column; padding:24px; border:1px solid var(--rule); border-radius:16px; background:var(--surface); }
.lp-step .num { font:12px var(--font-small); color:var(--ink-4); }
.lp-step h3 { margin:6px 0 8px; font-family:var(--font-heading); font-weight:600; font-size:21px; letter-spacing:-.025em; color:var(--title-color); }
.lp-step p { margin:0; color:var(--ink-3); font-size:14.5px; line-height:1.6; }
.lp-viz { min-height:156px; margin-bottom:20px; padding:14px; border-radius:10px; background:var(--paper-2); font-size:12.5px; color:var(--ink-2); }
.lp-doc { display:flex; align-items:center; gap:10px; margin-bottom:10px; font:12px var(--font-small); }
.lp-doc i { display:grid; place-items:center; width:30px; height:36px; background:var(--lp-orange); color:var(--lp-night); font:700 9px var(--font-small); font-style:normal; }
.lp-rows { display:grid; gap:6px; margin:0; padding:0; list-style:none; font-size:12.5px; }
.lp-rows li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 9px; background:var(--surface); }
.lp-st { flex-shrink:0; padding:2px 6px; font-size:10.5px; font-weight:500; }
.lp-st.ok { background:var(--ok-bg); color:var(--ok); }
.lp-st.warn { background:var(--warn-bg); color:var(--warn); }
.lp-st.bad { background:var(--bad-bg); color:var(--bad); }
.lp-step .lp-mini-q { margin:0 0 8px; padding:9px 11px; background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:500; line-height:1.4; }
.lp-mini-a { display:flex; gap:8px; align-items:center; padding:9px 11px; border:1px dashed var(--rule-2); color:var(--ink-3); }
.lp-caret { width:2px; height:14px; background:var(--ink-2); animation:lp-blink 1s steps(2) infinite; }
@keyframes lp-blink { 50% { opacity:0; } }
.lp-date { display:flex; align-items:center; gap:12px; }
.lp-date b { display:grid; place-items:center; width:58px; height:64px; background:var(--lp-green); color:var(--lp-cream); font-size:24px; font-weight:600; line-height:1; }
.lp-date b small { display:block; margin-top:3px; font:9px var(--font-small); text-transform:uppercase; letter-spacing:.06em; }

/* ─── Preuve par le cours ─── */
.lp-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.lp-compare { width:100%; margin-top:26px; border-collapse:collapse; font-size:14.5px; }
.lp-compare th, .lp-compare td { padding:12px 14px 12px 0; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; font-weight:400; }
.lp-compare thead th { font:500 12.5px var(--font-body); color:var(--ink-3); }
.lp-compare thead th:last-child { color:var(--ink); font-weight:600; }
.lp-compare tbody th { width:30%; font:10.5px/1.5 var(--font-small); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }
.lp-compare .them { color:var(--ink-3); }
.lp-compare .us { color:var(--ink); font-weight:600; }
.lp-page { position:relative; padding:26px 28px 96px; border:1px solid var(--rule); border-radius:6px; background:var(--surface); box-shadow:var(--shadow-lift); transform:rotate(-1.2deg); }
.lp-page-head { display:flex; justify-content:space-between; margin-bottom:18px; font:11px var(--font-small); color:var(--ink-4); }
.lp-line { display:block; height:9px; margin-bottom:10px; background:var(--paper-3); }
.lp-mark { display:block; margin:14px -8px; padding:9px 8px; background:#ffc08f66; color:var(--ink); font-size:14px; line-height:1.5; box-shadow:inset 3px 0 0 var(--lp-orange); }
.lp-cite { position:absolute; right:-14px; bottom:-20px; max-width:82%; padding:14px 16px; border-radius:12px; background:var(--lp-green); color:var(--lp-cream); font-size:14px; line-height:1.45; box-shadow:0 14px 30px #0b2a2040; transform:rotate(1.2deg); }
.lp-cite strong { display:block; margin-bottom:3px; color:var(--lp-orange-soft); font:11px var(--font-small); letter-spacing:.04em; }

/* ─── Mosaïque des modes ─── */
.lp-bento { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.lp-tile { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--rule); border-radius:16px; background:var(--surface); transition:transform .15s,box-shadow .15s; }
.lp-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.lp-s5 { grid-column:span 5; } .lp-s4 { grid-column:span 4; } .lp-s3 { grid-column:span 3; }
.lp-tile .g { font:10px var(--font-small); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.lp-tile h3 { margin:6px 0 6px; font-family:var(--font-heading); font-weight:600; font-size:20px; letter-spacing:-.025em; color:var(--title-color); }
.lp-tile p { margin:0; color:var(--ink-3); font-size:14px; line-height:1.55; }
.lp-tile > .lp-tviz { margin-top:auto; padding-top:18px; }
.lp-tile .lp-rows li { background:var(--paper); }
.lp-tile--green { border-color:transparent; background:var(--lp-green); }
.lp-tile--green :is(h3,p) { color:var(--lp-cream); }
.lp-tile--green .g { color:var(--lp-cream-2); }
.lp-tile--orange { border-color:transparent; background:var(--lp-orange); }
.lp-tile--orange :is(h3,p,.g) { color:var(--lp-night); }
.lp-maths { padding:14px 16px; background:var(--lp-green-deep); color:var(--lp-cream); font:14px/1.75 var(--font-small); }
.lp-maths span { display:block; }
.lp-maths .q { margin-bottom:6px; color:var(--lp-orange-soft); }
.lp-maths .fin { color:var(--lp-orange-soft); font-weight:700; }
.lp-chat { display:grid; gap:8px; font-size:13px; line-height:1.45; }
.lp-chat div { max-width:92%; padding:9px 12px; border-radius:12px 12px 12px 2px; background:var(--paper-2); color:var(--ink-2); }
.lp-chat .me { justify-self:end; display:flex; align-items:center; gap:3px; border-radius:12px 12px 2px 12px; background:var(--lp-green); color:var(--lp-cream); }
.lp-chat .me i { width:3px; background:var(--lp-orange-soft); }
.lp-eq { display:flex; align-items:flex-end; gap:4px; height:62px; }
.lp-eq i { flex:1; background:var(--lp-night); }
.lp-levels { display:flex; align-items:flex-end; gap:6px; height:96px; font:11px var(--font-small); }
.lp-levels span { flex:1; display:grid; place-items:end center; padding-bottom:6px; background:var(--accent-soft); color:var(--ink-2); }
.lp-levels span:last-child { background:var(--lp-green); color:var(--lp-cream); }
.lp-score { display:flex; align-items:baseline; gap:6px; color:var(--ink); }
.lp-score b { font-size:44px; font-weight:600; line-height:1; letter-spacing:-.04em; }
.lp-score span { color:var(--ink-3); font-size:16px; }
.lp-score .lp-tag { margin-left:auto; font-size:10px; }
.lp-bar { display:grid; grid-template-columns:repeat(25,1fr); gap:2px; margin-top:10px; }
.lp-bar i { height:12px; background:var(--paper-3); }
.lp-bar i.on { background:var(--lp-orange); }
.lp-pixels { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; }
.lp-pixels i { aspect-ratio:1; }
.lp-pixels .v { background:var(--ok); } .lp-pixels .a { background:#d9a441; } .lp-pixels .r { background:var(--bad); }
.lp-note { padding:10px 12px; background:#ffe9a8; color:#3c2f0c; font-size:12.5px; line-height:1.4; box-shadow:3px 3px 0 #0000001a; transform:rotate(-1.5deg); }
.lp-write { padding:10px 12px; background:var(--paper-2); }
.lp-write .lp-line { height:6px; margin-bottom:7px; background:var(--rule-2); }
.lp-write em { display:inline-block; padding:2px 6px; background:var(--lp-orange); color:var(--lp-night); font:10px var(--font-small); font-style:normal; }
.lp-slides { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.lp-slides i { aspect-ratio:16/10; padding:8px; background:var(--paper-2); }
.lp-slides i:first-child { background:var(--lp-green); }
.lp-slides i::before { content:""; display:block; width:62%; height:5px; background:var(--lp-orange); }
.lp-slides i::after { content:""; display:block; width:84%; height:12px; margin-top:6px; background:#8a9a8f44; }

/* ─── Calendrier d'examen ─── */
.lp-cal { padding:30px 36px 24px; border:1px solid var(--rule); border-radius:16px; background:var(--surface); }
.lp-track { position:relative; height:160px; }
.lp-track::before { content:""; position:absolute; left:0; right:0; top:96px; height:6px; background:var(--rule-2); }
.lp-track i { position:absolute; top:90px; width:18px; height:18px; margin-left:-9px; background:var(--lp-green); }
.lp-track span { position:absolute; top:118px; transform:translateX(-50%); font:11px var(--font-small); color:var(--ink-3); white-space:nowrap; }
.lp-track img { position:absolute; left:-4px; top:10px; height:74px; width:auto; }
.lp-flag { position:absolute; right:-8px; top:42px; padding:9px 11px; background:var(--lp-orange); color:var(--lp-night); font:600 12px var(--font-heading); }
.lp-flag::after { content:""; position:absolute; right:12px; top:100%; width:4px; height:18px; background:var(--lp-night); }
.lp-track-note { margin:0; text-align:center; font-size:12.5px; color:var(--ink-4); }

/* ─── Offres ─── */
.lp-offers { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch; }
.lp-offer { display:flex; flex-direction:column; padding:26px; border:1px solid var(--rule); border-radius:16px; background:var(--surface); }
.lp-offer h3 { margin:0 0 12px; font:500 14px var(--font-body); color:var(--ink-3); }
.lp-price { margin:0 0 4px; font-size:40px; font-weight:600; line-height:1; letter-spacing:-.04em; color:var(--ink); }
.lp-price small { font-size:14px; font-weight:400; letter-spacing:0; color:var(--ink-3); }
.lp-credits { margin:0 0 12px; font-weight:500; color:var(--ink-2); }
.lp-offer p:last-child { margin:0; color:var(--ink-3); font-size:14px; line-height:1.55; }
.lp-offer--green { border-color:transparent; background:var(--lp-green); }
.lp-offer--green :is(h3,.lp-price,.lp-price small,.lp-credits,p:last-child) { color:var(--lp-cream); }
.lp-offers-foot { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:24px 0 0; color:var(--ink-3); font-size:14px; }
.lp-offers-foot a { color:var(--accent); }

/* ─── Rappel final ─── */
.lp-final { display:flex; align-items:center; justify-content:center; gap:48px; }
.lp-final > div { max-width:640px; }
.lp-final img { flex-shrink:0; height:210px; width:auto; }
.lp-final p { margin:0 0 26px; }
.lp .foot { margin-top:80px; }

@media (max-width:980px) {
  .lp-section { padding-top:72px; }
  .lp-hero, .lp-pain, .lp-split { grid-template-columns:1fr; gap:40px; }
  .lp-hero { padding-top:22px; }
  .lp-page { margin:0 8px 18px; }
  .lp-steps, .lp-offers { grid-template-columns:1fr; }
  .lp-viz { min-height:0; }
  .lp-bento { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-s5, .lp-s4, .lp-s3 { grid-column:span 1; }
  .lp-s5, .lp-wide { grid-column:span 2; }
  .lp-band { margin-top:88px; padding:60px 0; }
}
@media (max-width:640px) {
  .lp-wrap { padding:0 20px; }
  /* Nav d'accueil sur téléphone : le logo et « Se connecter ». Le hero porte le CTA, le pied de page les autres liens. */
  .lp .nav { padding:14px 20px; }
  .lp .nav-actions { flex-wrap:nowrap; gap:10px; }
  .lp .nav-actions a:not(.ghost,.solid), .lp .nav-actions .ghost + .solid { display:none; }
  .lp .nav::after { display:none; }
  .lp-hero h1 { font-size:clamp(50px,15vw,72px); }
  .lp-lead { font-size:17px; }
  .lp-cta-row .lp-btn { flex:1 1 100%; justify-content:center; }
  .lp-stage { margin-inline:-6px; padding:120px 14px 14px; }
  .lp-dog { left:22px; top:22px; height:102px; }
  .lp-bubble { left:112px; top:30px; font-size:13px; }
  .lp-bento { grid-template-columns:1fr; }
  .lp-s5, .lp-s4, .lp-s3, .lp-wide { grid-column:auto; }
  .lp-compare { font-size:13.5px; }
  .lp-compare tr { display:grid; grid-template-columns:1fr 1fr; column-gap:12px; border-bottom:1px solid var(--rule); padding:10px 0; }
  .lp-compare th, .lp-compare td { padding:0; border:0; }
  .lp-compare thead td { display:none; }
  .lp-compare tbody th { grid-column:1/-1; width:auto; margin-bottom:4px; }
  .lp-cal { padding:20px 24px 18px; }
  .lp-final { flex-direction:column; gap:22px; text-align:center; }
  .lp-final img { height:140px; }
  .lp-cite { right:-6px; max-width:90%; }
}
@media (prefers-reduced-motion:reduce) {
  .lp *, .lp *::before, .lp *::after { animation:none !important; transition:none !important; }
  .lp-bubble span:first-child { visibility:hidden; }
}