/* Page de service « J'installe Linux sur ton ordi » (/installation-de-linux/)
   Styles propres au corps de page. Extrait de tasks/preview/installation-linux.html.
   Le CHROME (en-tête, menu mobile, pied, barre de progression) vient du thème
   (chrome.css) : ces blocs sont volontairement absents ici. Polices auto-hébergées
   via theme.json. Registre BLOG (tutoiement), accent d'identité = BOURGOGNE.
   Toutes les classes sont préfixées « lx- » → zéro collision site-wide. */
:root{
  --terre:     oklch(0.34 0.055 45);
  --spruce-900:oklch(0.22 0.026 182);
  --spruce-800:oklch(0.28 0.03 180);
  --spruce-700:oklch(0.36 0.03 178);
  --bourgogne: oklch(0.42 0.16 26);
  --bourgogne-vif: oklch(0.50 0.18 28);
  --clay:      oklch(0.56 0.05 55);
  --sauge:     oklch(0.72 0.025 160);

  --bg:      oklch(0.985 0.003 100);
  --surface: oklch(0.965 0.005 95);
  --ink:     oklch(0.20 0.012 55);
  --ink-soft:oklch(0.42 0.012 50);
  --line:    oklch(0.90 0.006 90);
  --line-strong: oklch(0.82 0.01 70);
  --on-dark: oklch(0.94 0.012 90);
  --on-dark-soft: oklch(0.78 0.02 130);

  --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1.08rem, 1.02rem + 0.32vw, 1.22rem);
  --step-1:  clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --step-3:  clamp(2.4rem, 1.8rem + 3vw, 4rem);
  --step-4:  clamp(2.7rem, 1.9rem + 4vw, 5rem);
}

/* ============================================================
   PAGE LINUX  (.lx-)
   ============================================================ */
.lx-wrap{max-width:1100px;margin:0 auto;padding-left:clamp(1.2rem,4vw,2.5rem);padding-right:clamp(1.2rem,4vw,2.5rem)}
.lx-prose{max-width:47.5rem}

/* --- HERO sapin + aurore boréale --- */
.lx-hero{position:relative;background:var(--spruce-900);color:var(--on-dark);overflow:hidden;isolation:isolate}
.lx-aurora{position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:-1;
  background:
    radial-gradient(60% 45% at 22% 30%, oklch(0.55 0.11 165 / .40), transparent 70%),
    radial-gradient(50% 40% at 78% 22%, oklch(0.5 0.13 210 / .34), transparent 72%),
    radial-gradient(55% 45% at 60% 60%, oklch(0.45 0.14 30 / .22), transparent 70%);
  filter:blur(20px)}
.lx-topo{position:absolute;left:0;right:0;bottom:-1px;z-index:-1;width:100%;height:auto;color:oklch(0.5 0.03 178 / .5)}
.lx-hero-in{position:relative;padding-top:clamp(3.4rem,8vw,6rem);padding-bottom:clamp(3.4rem,8vw,6rem)}
.lx-hero h1{font-family:var(--grotesk);font-weight:800;font-size:var(--step-4);line-height:1.02;letter-spacing:-.038em;color:var(--on-dark);max-width:19ch;text-wrap:balance}
.lx-hero .lx-dek{font-family:var(--sans);font-size:var(--step-1);line-height:1.45;color:oklch(0.82 0.02 130);max-width:60ch;margin-top:1.5rem;text-shadow:0 1px 3px oklch(0.16 0.03 185 / .72)}
.lx-hero .lx-dek b{color:var(--on-dark);font-weight:600}
.lx-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.lx-btn{font-family:var(--grotesk);font-weight:700;font-size:1rem;padding:.85rem 1.5rem;border-radius:9px;text-decoration:none;transition:background .2s,transform .2s,border-color .2s;display:inline-flex;align-items:center;gap:.5rem}
.lx-btn-primary{background:var(--bourgogne);color:var(--on-dark)}
.lx-btn-primary:hover{background:var(--bourgogne-vif);transform:translateY(-1px)}
.lx-btn-ghost{color:var(--on-dark);border:1.5px solid oklch(0.6 0.03 165 / .55)}
.lx-btn-ghost:hover{border-color:var(--sauge);background:oklch(0.5 0.03 178 / .25)}
.lx-btn .arw{transition:transform .2s var(--ease)}
.lx-btn:hover .arw{transform:translateX(3px)}

/* --- POURQUOI --- */
.lx-why{padding-top:clamp(3.4rem,7vw,5.5rem);padding-bottom:clamp(2.4rem,5vw,3.6rem)}
.lx-h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-2);line-height:1.08;letter-spacing:-.03em;color:var(--terre);text-wrap:balance;max-width:20ch}
.lx-why-grid{display:grid;gap:1.1rem}
@media(min-width:860px){.lx-why-grid{grid-template-columns:minmax(0,15rem) minmax(0,1fr);column-gap:clamp(2.4rem,5vw,4.5rem);align-items:start}}
.lx-why-body p{font-size:var(--step-0);line-height:1.75;color:var(--ink);max-width:64ch}
.lx-why-body p b{font-weight:700}
.lx-why-body p+p{margin-top:1.1rem}
.lx-pull{margin:clamp(2.4rem,5vw,3.4rem) 0 0;max-width:none}
.lx-pull::before{content:"";display:block;width:2.6rem;height:3px;background:var(--bourgogne);border-radius:2px;margin-bottom:1.15rem}
.lx-pull p{font-family:var(--grotesk);font-weight:700;font-size:clamp(1.4rem,1.1rem+1.3vw,2.05rem);line-height:1.22;letter-spacing:-.02em;color:var(--terre);text-wrap:balance;margin:0;max-width:none}

/* --- CE QUE TU RÉCUPÈRES --- */
.lx-get{background:var(--surface);border-block:1px solid var(--line)}
.lx-get-in{padding-block:clamp(3rem,6vw,4.5rem)}
.lx-get-list{list-style:none;margin-top:2rem;display:grid;gap:.2rem}
.lx-get-list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding:1.3rem 0;border-top:1px solid var(--line)}
.lx-get-list li:first-child{border-top:0;padding-top:.4rem}
.lx-ic{width:42px;height:42px;border-radius:11px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.lx-ic svg{display:block;width:22px;height:22px;stroke:var(--bourgogne);stroke-width:1.9;fill:none}
.lx-get-list b{font-family:var(--grotesk);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);display:block;margin-bottom:.25rem}
.lx-get-list span{color:var(--ink-soft);font-size:var(--step-0);line-height:1.6;display:block;max-width:56ch}
@media(min-width:720px){
  .lx-get-list{grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,4vw,3.5rem)}
  .lx-get-list li:nth-child(2){border-top:0;padding-top:.4rem}
}

/* --- COMMENT ÇA SE PASSE (étapes) --- */
.lx-steps{background:var(--bg)}
.lx-steps-in{padding-block:clamp(3rem,6vw,4.5rem)}
.lx-steps-grid{display:grid;gap:1.4rem;margin-top:2.2rem;counter-reset:step}
@media(min-width:760px){.lx-steps-grid{grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}}
.lx-step{position:relative;padding-top:3.4rem}
.lx-step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--spruce-900);color:var(--on-dark);font-family:var(--grotesk);font-weight:800;font-size:1.15rem;display:grid;place-items:center}
.lx-step h3{font-family:var(--grotesk);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:.45rem}
.lx-step p{color:var(--ink-soft);font-size:var(--step-0);line-height:1.6}
@media(min-width:760px){
  .lx-step:not(:last-child)::after{content:"";position:absolute;top:1.3rem;left:3rem;right:calc(-1 * clamp(1rem,2vw,1.6rem));height:1.5px;background:var(--line-strong)}
}

/* --- EST-CE POUR TOI --- */
.lx-fit{padding-block:clamp(3rem,6vw,4.5rem)}
.lx-fit-grid{display:grid;gap:1.4rem;margin-top:2rem}
@media(min-width:760px){.lx-fit-grid{grid-template-columns:1fr 1fr;gap:1.6rem}}
.lx-fit-col{border-radius:16px;padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--line)}
.lx-fit-yes{background:oklch(0.965 0.008 165)}
.lx-fit-maybe{background:var(--surface)}
.lx-fit-col h3{font-family:var(--grotesk);font-weight:800;font-size:1.28rem;letter-spacing:-.02em;color:var(--terre);margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem}
.lx-fit-col h3 .badge{width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-family:var(--grotesk);font-weight:800;font-size:.98rem;line-height:1}
.lx-fit-yes h3 .badge{background:var(--bourgogne);color:var(--on-dark)}
.lx-fit-maybe h3 .badge{background:var(--clay);color:var(--on-dark)}
.lx-fit-col ul{list-style:none;display:grid;gap:.8rem}
.lx-fit-col li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:var(--step-0);line-height:1.6;color:var(--ink)}
.lx-fit-col li svg{width:19px;height:19px;stroke-width:2.2;fill:none;margin-top:.28rem;flex-shrink:0}
.lx-fit-yes li svg{stroke:var(--bourgogne)}
.lx-fit-maybe li svg{stroke:var(--clay)}
.lx-fit-note{margin-top:1.2rem;font-size:var(--step-0);line-height:1.6;color:var(--ink-soft);font-style:italic}

/* --- PONT VERS LA FORMATION --- */
.lx-learn{padding-block:clamp(3rem,6vw,4.5rem)}
.lx-learn-card{display:grid;grid-template-columns:1fr auto;gap:clamp(1.8rem,4vw,3.2rem);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(2rem,4vw,3.2rem)}
.lx-learn-card h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-1);line-height:1.14;letter-spacing:-.02em;color:var(--terre);max-width:24ch;text-wrap:balance}
.lx-learn-card p{color:var(--ink-soft);font-size:var(--step-0);line-height:1.7;margin-top:1.05rem;max-width:56ch}
.lx-learn-link{font-family:var(--grotesk);font-weight:700;font-size:1rem;color:var(--bourgogne);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.3rem;border:1.5px solid var(--bourgogne);border-radius:9px;transition:background .2s,color .2s}
.lx-learn-link:hover{background:var(--bourgogne);color:var(--on-dark)}
.lx-learn-link .arw{transition:transform .2s var(--ease)}
.lx-learn-link:hover .arw{transform:translateX(3px)}
@media(max-width:640px){.lx-learn-card{grid-template-columns:1fr;gap:1.4rem}}

/* --- PRIX --- */
.lx-price-sec{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lx-price-in{padding-block:clamp(3rem,6vw,4.5rem)}
.lx-price-list{margin:2rem 0 0;max-width:44rem}
.lx-price-row{display:grid;grid-template-columns:1fr auto;gap:.5rem 1.4rem;align-items:baseline;padding:1.15rem 0;border-top:1px solid var(--line)}
.lx-price-row:first-child{border-top:none;padding-top:.4rem}
.lx-price-row dt,.lx-price-row dd{margin:0}
.lx-price-svc{display:flex;flex-direction:column;gap:.2rem}
.lx-price-name{font-family:var(--grotesk);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--terre)}
.lx-price-det{font-size:var(--step-0);line-height:1.5;color:var(--ink-soft)}
.lx-price-amt{font-family:var(--grotesk);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);letter-spacing:-.02em;color:var(--bourgogne);white-space:nowrap;text-align:right}
.lx-price-cap{margin-top:1.5rem;max-width:46rem;font-size:var(--step-0);line-height:1.6;color:var(--ink-soft);font-style:italic}
.lx-price-cta{margin-top:1.8rem}

/* --- CTA FINAL sapin --- */
.lx-final{background:var(--spruce-900);color:var(--on-dark);border-top:3px solid var(--bourgogne)}
.lx-final-in{padding-block:clamp(3.4rem,7vw,5.5rem);display:grid;grid-template-columns:1fr auto;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
@media(max-width:760px){.lx-final-in{grid-template-columns:1fr;gap:1.7rem}}
.lx-final h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-2);line-height:1.08;letter-spacing:-.03em;color:var(--on-dark);max-width:24ch;text-wrap:balance}
.lx-final p{font-size:var(--step-0);line-height:1.6;color:var(--on-dark-soft);margin:1.05rem 0 0;max-width:58ch}
.lx-final .lx-alt{margin-top:1.05rem;font-size:var(--step-0);line-height:1.5;color:var(--on-dark-soft);max-width:56ch}
.lx-final .lx-alt a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.lx-final .lx-alt a:hover{text-decoration-thickness:2px}
.lx-final small{display:block;margin-top:1.3rem;font-family:var(--grotesk);font-size:var(--step-0);color:var(--sauge)}
.lx-final-act .lx-btn{white-space:nowrap}

/* --- MOUVEMENT --- */
@media(prefers-reduced-motion:reduce){
  .lx-btn,.lx-learn-link{transition:none!important}
}