/* =============================================================================================
   Landing marketing ScanRéduc — lot L7 du mini-site.

   Repris de la maquette de Florent du 2026-09-21 (Claude Design), `docs/reference/scanreduc/`.
   Le design est sa propriété : ne pas « améliorer » une valeur au passage, les écarts se
   voient. Ce fichier ne contient que le rendu, aucune donnée.

   ⚠️ AUTONOME, et non un complément de `scan_reduc.css` : la landing et le centre d'aide
   vivent sur DEUX hôtes distincts (www / faq) et ne partagent aucune page. Charger le CSS de
   l'aide ici ferait payer à chaque visiteur des règles qu'aucun élément de la page n'utilise.
   Les tokens `:root` et le pied de page y sont donc dupliqués À DESSEIN — une quinzaine de
   lignes, contre une indirection Sprockets qui ferait dépendre deux surfaces l'une de l'autre.

   ⚠️ Les quatre pictos de rubrique sont posés en MASQUE CSS, pour être colorisés par `--acc`.
   Leur URL ne peut pas être écrite ici : en production les assets portent un digest. Le layout
   les injecte en variables (`--sr-picto-*`) via `image_path`. Une variable absente = un carré
   de couleur pleine, pas une page cassée.
   ============================================================================================= */
/* ============================================================
   ScanRéduc — page d'accueil statique du centre d'aide
   Onboarding de l'app transposé en scroll vertical.
   Mobile first · aucune dépendance · tokens = charte ScanRéduc
   Chaque section porte sa couleur de rubrique en --acc / --acc-deep :
   c'est la seule variable à changer pour rehabiller une section.
   ============================================================ */
:root{
  --sr-ink:#1D1C3C; --sr-deep:#2B2560; --sr-body:#35334F; --sr-muted:#68647E; --sr-muted-soft:#9A93B5;
  --sr-bg:#FAF9FC; --sr-surface:#fff; --sr-field:#F3F1F9; --sr-border:#E4E1EE;
  --sr-orange:#EB7134; --sr-violet:#8A57C4;
  --sr-gradient:linear-gradient(90deg,#EE7A38 0%,#C34F87 38%,#8A57C4 68%,#2B2560 100%);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
  --r-card:14px; --r-lg:24px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(29,28,60,.06),0 1px 3px rgba(29,28,60,.05);
  --sh-md:0 6px 20px rgba(29,28,60,.09);
  --sh-xl:0 24px 60px rgba(11,10,30,.34);
  --wrap:1120px;
  --acc:var(--sr-orange); --acc-deep:#CC5A22;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }
body.ln{ margin:0; background:var(--sr-bg); color:var(--sr-body);
  font-family:var(--font-body); font-size:16px; line-height:1.6; text-wrap:pretty;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; }
h1,h2,h3{ font-family:var(--font-display); color:var(--sr-ink); margin:0; line-height:1.18; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--sr-violet); text-underline-offset:2px; }
a:hover{ color:#6D3FA6; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:6px; }
.ln-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.hc-skip{ position:absolute; left:-9999px; }
.hc-skip:focus{ left:12px; top:12px; z-index:40; background:#fff; padding:10px 14px; border-radius:var(--r-pill); box-shadow:var(--sh-md); }

/* pictos officiels, colorisés par masque → une seule image par rubrique */
.ln-ic{ width:18px; height:18px; flex:none; display:inline-block; background:var(--acc);
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.ln-ic.lg{ width:22px; height:22px; }
.ln-ic[data-p="offres"], .ln-an-ic[data-p="offres"]{ -webkit-mask-image:var(--sr-picto-offres); mask-image:var(--sr-picto-offres); }
.ln-ic[data-p="programmes"], .ln-an-ic[data-p="programmes"]{ -webkit-mask-image:var(--sr-picto-programmes); mask-image:var(--sr-picto-programmes); }
.ln-ic[data-p="bons"], .ln-an-ic[data-p="bons"]{ -webkit-mask-image:var(--sr-picto-bons); mask-image:var(--sr-picto-bons); }
.ln-ic[data-p="jackpot"], .ln-an-ic[data-p="jackpot"]{ -webkit-mask-image:var(--sr-picto-jackpot); mask-image:var(--sr-picto-jackpot); }

/* ---- barre haute ---- */
.ln-bar{ position:sticky; top:0; z-index:30; background:rgba(29,28,60,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1); }
.ln-bar-in{ display:flex; align-items:center; gap:14px; min-height:60px; }
/* sous 420px le CTA se raccourcit plutôt que de pousser la navigation hors écran */
@media (max-width:419px){
  .ln-bar-in{ gap:10px; }
  .ln-bar-nav{ gap:12px; }
  .ln-bar-nav a{ font-size:13.5px; }
  .ln-bar-cta{ font-size:13px; padding:8px 13px; }
  .ln-bar-cta .full{ display:none; }
}
.ln-brand{ flex:none; display:flex; }
.ln-brand img{ display:block; height:26px; width:auto; }
.ln-bar-nav{ display:flex; gap:16px; margin-left:auto; }
.ln-bar-nav a{ font-weight:600; font-size:14px; color:rgba(255,255,255,.8); text-decoration:none; white-space:nowrap; }
.ln-bar-nav a:hover{ color:#fff; }
.ln-bar-nav a[aria-current]{ color:#fff; }
.ln-bar-cta{ flex:none; font-weight:700; font-size:13.5px; color:var(--sr-ink); white-space:nowrap;
  background:#fff; padding:9px 15px; border-radius:var(--r-pill); text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease; }
.ln-bar-cta:hover{ color:var(--sr-ink); transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.28); }

/* ---- boutons ---- */
.ln-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-family:var(--font-body); font-weight:700; font-size:16px; padding:14px 26px;
  border-radius:var(--r-pill); transition:transform .12s ease, box-shadow .12s ease, background .18s ease; }
.ln-btn-grad{ color:#fff; background:var(--sr-gradient); box-shadow:0 10px 26px rgba(195,79,135,.42); }
.ln-btn-grad:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 14px 32px rgba(195,79,135,.5); }
.ln-btn-ghost{ color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); }
.ln-btn-ghost:hover{ color:#fff; background:rgba(255,255,255,.2); }
.ln-btn-light{ color:var(--sr-ink); background:#fff; box-shadow:var(--sh-md); }
.ln-btn-light:hover{ color:var(--sr-ink); transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.22); }

/* ---- héro ---- */
.ln-hero{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(168deg,#3A2E6E 0%,#2B2560 48%,#1D1C3C 100%); }
.ln-hero-glow{ position:absolute; top:-180px; right:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(235,113,52,.38),rgba(138,87,196,.16) 52%,transparent 70%);
  pointer-events:none; }
.ln-hero-sparkle{ position:absolute; top:14%; right:8%; width:44px; opacity:.5; animation:lnPulse 4s ease-in-out infinite; pointer-events:none; }
@keyframes lnPulse{ 0%,100%{ opacity:.2; transform:scale(.85); } 50%{ opacity:.6; transform:scale(1.08); } }
.ln-hero-in{ position:relative; display:grid; gap:40px; padding-block:52px 64px; }
.ln-eyebrow{ font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.ln-h1{ margin-top:14px; color:#fff; font-weight:800; font-size:clamp(31px,6.6vw,54px); letter-spacing:-.015em; }
.ln-h1 em{ font-style:normal; background:linear-gradient(90deg,#FBA24E,#E77BA8 55%,#B58BE8);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ln-hero-lead{ margin-top:18px; font-size:clamp(16px,2.2vw,18.5px); color:rgba(255,255,255,.82); max-width:52ch; }
.ln-hero-act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.ln-hero-note{ margin-top:16px; font-size:13px; color:rgba(255,255,255,.55); }

/* maquette animée du héro — reprise de l'écran 0 de l'onboarding */
.ln-hero-mock{ position:relative; }
.ln-mock{ max-width:420px; }
@keyframes lnAnPulse{ 0%,100%{ opacity:.45; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.06); } }
.ln-an{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.17);
  border-radius:var(--r-card); overflow:hidden; margin-bottom:20px; }
.ln-an-body{ display:flex; align-items:center; gap:12px; padding:11px 13px; }
.ln-an-pic{ display:flex; gap:7px; flex:none; }
.ln-an-ic{ width:17px; height:17px; flex:none; display:block; background:#fff;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;
  animation:lnAnPulse 1.15s ease-in-out infinite; }
.ln-an-ic[data-p="programmes"]{ animation-delay:.16s; }
.ln-an-ic[data-p="bons"]{ animation-delay:.32s; }
.ln-an-ic[data-p="jackpot"]{ animation-delay:.48s; }
.ln-an-tx{ flex:1; min-width:0; text-align:right; }
.ln-an-tx .t{ font-weight:700; font-size:13px; color:#fff; }
.ln-an-tx .s{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:3px;
  font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.72); }
.ln-an-tx .s > span{ transition:opacity .32s cubic-bezier(.4,0,.2,1); }

.ln-cag-card{ background:var(--sr-surface); border-radius:var(--r-lg); box-shadow:var(--sh-xl);
  padding:15px 18px; display:flex; flex-direction:column; gap:11px; }
.ln-cag-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ln-cag-lbl{ font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.01em; color:var(--sr-ink); }
.ln-cag-amt{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,4.4vw,32px);
  line-height:1; letter-spacing:-.02em; color:var(--sr-ink); font-variant-numeric:tabular-nums; }
.ln-cag-gsegs{ display:flex; gap:4px; height:12px; border-radius:var(--r-pill); overflow:hidden; background:var(--sr-field); }
.ln-cag-gsegs > span{ min-width:0; border-radius:var(--r-pill); background:var(--acc);
  transition:flex-grow .9s cubic-bezier(.2,.7,.2,1); }
.ln-cag-rows{ display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.ln-cag-rows li{ display:flex; align-items:center; gap:11px; background:var(--sr-surface);
  border-radius:var(--r-card); box-shadow:0 8px 22px rgba(11,10,30,.18); padding:11px 13px;
  transition:opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); }
.ln-cag-rows .ln-ic{ width:21px; height:21px; }
.ln-cag-rows .nm{ flex:1; min-width:0; font-weight:600; font-size:13.5px; color:var(--sr-ink); }
.ln-cag-rows .amt{ flex:none; font-family:var(--font-display); font-weight:800; font-size:15px;
  color:var(--acc-deep); font-variant-numeric:tabular-nums; transition:opacity .3s cubic-bezier(.4,0,.2,1); }
/* états pilotés par le script : la ligne arrive, puis son montant */
.ln-js .ln-cag-rows li{ opacity:0; transform:translateY(8px); }
.ln-js .ln-cag-rows li.on{ opacity:1; transform:none; }
.ln-js .ln-cag-rows li .amt{ opacity:0; }
.ln-js .ln-cag-rows li.on .amt{ opacity:1; }

/* ---- les 3 gestes ---- */
.ln-how{ padding-block:58px 62px; }
.ln-h2{ font-weight:800; font-size:clamp(24px,4.2vw,36px); letter-spacing:-.01em; }
.ln-h2.inv{ color:#fff; }
.ln-lead{ margin-top:12px; font-size:17px; color:var(--sr-muted); max-width:60ch; }
.ln-how-grid{ display:grid; gap:14px; margin-top:32px; }
.ln-how-card{ background:var(--sr-surface); border:1px solid var(--sr-border);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:24px 22px 22px; }
.ln-how-n{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--acc); color:#fff; font-family:var(--font-display); font-weight:800; font-size:17px; }
.ln-how-card h3{ margin-top:16px; font-weight:700; font-size:19px; }
.ln-how-card p{ margin-top:8px; font-size:15px; color:var(--sr-muted); }

/* ---- sections « écran » ---- */
.ln-step{ background:var(--acc); color:#fff; padding-block:54px 58px; }
.ln-step.dark{ background:linear-gradient(168deg,var(--acc) 0%,#241F52 96%); }
.ln-step-in{ display:grid; gap:34px; align-items:start; }
.ln-step-eyebrow{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:14px; }
.ln-step-eyebrow .ln-ic{ background:#fff; }
.ln-step-lead{ margin-top:16px; font-size:17px; color:rgba(255,255,255,.88); max-width:48ch; }
.ln-ticks{ display:grid; gap:9px; margin-top:22px; }
.ln-ticks li{ position:relative; padding-left:28px; font-size:15.5px; color:rgba(255,255,255,.9); }
.ln-ticks li::before{ content:""; position:absolute; left:0; top:.42em; width:16px; height:9px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg); border-radius:1px; }
.ln-link-inv{ display:inline-block; margin-top:24px; color:#fff; font-weight:700; font-size:15.5px;
  text-decoration:none; border-bottom:2px solid rgba(255,255,255,.45); padding-bottom:2px; }
.ln-link-inv:hover{ color:#fff; border-bottom-color:#fff; }

/* grille d'offres */
.ln-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ln-cards.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ln-off{ background:var(--sr-surface); border-radius:var(--r-card); box-shadow:var(--sh-md); overflow:hidden; }
.ln-off-img{ aspect-ratio:4/3; background:var(--sr-field); display:grid; place-items:center; overflow:hidden; }
/* Ajout du 2026-09-22, la vitrine servant les vraies créas. `cover` et non `contain` : le
   conteneur est REMPLI, quitte à rogner — les créas visent 1080×810, soit exactement ce 4/3.
   ⚠️ `height:100%` est indispensable : le `img{height:auto}` du reset l'emporterait sinon sur
   `object-fit`, et l'image serait posée dans la grille à sa hauteur naturelle. */
.ln-off-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ln-off-img span{ background:#fff; color:var(--sr-muted); border-radius:var(--r-pill); padding:4px 10px;
  font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.ln-off-t{ padding:10px 11px 0; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--sr-ink); line-height:1.3; }
.ln-off-amt{ display:flex; align-items:baseline; gap:5px; width:fit-content; margin:9px 11px 12px;
  background:color-mix(in srgb, var(--acc) 12%, #fff); color:var(--acc-deep);
  border-radius:var(--r-pill); padding:4px 10px; font-family:var(--font-display); font-weight:700; font-size:14px; }
.ln-off-amt i{ font-style:normal; font-family:var(--font-body); font-weight:600; font-size:10px; }
/* Ajouts du 2026-09-22, quand la vitrine est passée sur les offres réelles : la maquette
   n'avait que des montants d'un seul mot (« +1,50 € »), qui ne pouvaient pas se couper. Un
   « jusqu'à 15,00 € » le peut, et la pastille rejetait le « € » seul à la ligne suivante. */
.ln-off-amt{ flex-wrap:wrap; }
.ln-off-amt > span{ white-space:nowrap; }

/* programme — carte à tampons, visuel de l'app */
.ln-prog{ background:var(--sr-surface); border-radius:var(--r-lg); box-shadow:var(--sh-xl); padding:16px 18px 18px; max-width:400px; }
.ln-prog-flag{ display:flex; align-items:center; border-radius:var(--r-pill); padding:9px 14px;
  background:color-mix(in srgb, var(--acc) 12%, #fff); color:var(--acc-deep); font-size:13px; line-height:1.3; }
.ln-prog-flag b{ font-weight:800; }
.ln-prog-flag-ic{ width:15px; height:15px; flex:none; margin-right:8px; background:var(--acc-deep);
  -webkit-mask:center/contain no-repeat var(--sr-picto-programmes); mask:center/contain no-repeat var(--sr-picto-programmes); }
.ln-prog-head{ display:flex; align-items:center; gap:13px; margin-top:14px; }
.ln-prog-logo{ width:52px; height:52px; flex:none; border-radius:12px; background:var(--sr-surface);
  border:1px solid var(--sr-border); box-shadow:var(--sh-sm); color:var(--sr-muted);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:14px; }
.ln-prog-who{ flex:1; min-width:0; }
.ln-prog-who b{ display:block; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--sr-ink); }
.ln-prog-who i{ display:block; margin-top:3px; font-style:normal; font-size:12.5px; color:var(--sr-muted-soft); font-variant-numeric:tabular-nums; }
.ln-prog-sum{ flex:none; text-align:right; }
.ln-prog-sum b{ display:block; font-family:var(--font-display); font-weight:800; font-size:27px; line-height:1;
  color:var(--sr-ink); font-variant-numeric:tabular-nums; }
.ln-prog-sum i{ display:block; margin-top:4px; font-style:normal; font-weight:700; font-size:12px; color:var(--acc-deep); }

/* un emplacement par achat : taux en sous-impression, tampon par-dessus */
@keyframes lnStampIn{ from{ opacity:0; transform:rotate(-6deg) scale(1.22); } to{ opacity:1; transform:rotate(-6deg) scale(1); } }
.ln-prog-stamps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:16px; }
.ln-prog-stamps li{ position:relative; aspect-ratio:1; box-sizing:border-box; border-radius:50%;
  display:grid; place-items:center; border:1.5px dashed color-mix(in srgb, var(--acc) 34%, #fff); }
.ln-prog-stamps em{ font-style:normal; font-family:var(--font-display); font-weight:800; font-size:15px;
  line-height:1; letter-spacing:-.01em; white-space:nowrap; color:color-mix(in srgb, var(--acc) 42%, #fff); }
/* palier visé : rond blanc cerclé de la couleur, taux en couleur */
.ln-prog-stamps li.next{ border:2px solid var(--acc); background:var(--sr-surface); }
.ln-prog-stamps li.next em{ color:var(--acc-deep); }
/* achat tamponné : double anneau en réserve, la signature du tampon */
.ln-prog-stamps li.on{ border:none; background:var(--acc); transform:rotate(-6deg);
  box-shadow:inset 0 0 0 2px var(--acc), inset 0 0 0 4px rgba(255,255,255,.78);
  animation:lnStampIn .34s cubic-bezier(.34,1.56,.64,1) both; }
.ln-prog-stamps li.on em{ color:#fff; }
.ln-prog-foot{ margin-top:16px; padding-top:13px; border-top:1px solid var(--sr-border); font-size:13.5px; color:var(--sr-muted); }
.ln-prog-foot b{ color:var(--acc-deep); font-weight:800; }

/* bons */
.ln-bon{ background:var(--sr-surface); border-radius:var(--r-card); box-shadow:var(--sh-md); overflow:hidden; }
.ln-bon-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 13px; background:var(--bon); }
.ln-bon-logo{ width:30px; height:30px; border-radius:8px; background:#fff; color:var(--sr-muted);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:13px;
  overflow:hidden; flex:none; }
/* Le logo de l'enseigne, quand ReducFactory en sert un. `contain` ici et non `cover` : un logo
   de marque ne se rogne pas. */
.ln-bon-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.ln-bon-top b{ font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; }
.ln-bon-bot{ padding:11px 13px 13px; }
.ln-bon-bot b{ display:block; font-weight:700; font-size:13.5px; color:var(--sr-ink); }
.ln-bon-bot i{ display:block; margin-top:4px; font-style:normal; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sr-muted-soft); }

/* gagnants */
.ln-win{ display:grid; gap:10px; }
.ln-win li{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-card);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); }
.ln-win-ini{ width:38px; height:38px; flex:none; border-radius:50%; background:linear-gradient(135deg,#EE7A38,#8A57C4);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:12.5px; color:#fff; }
.ln-win-tx{ flex:1; min-width:0; }
.ln-win-tx b{ display:block; font-weight:700; font-size:14.5px; color:#fff; }
.ln-win-tx i{ display:block; margin-top:3px; font-style:normal; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.5); }
.ln-win-amt{ flex:none; text-align:right; font-family:var(--font-display); font-weight:800; font-size:17px; color:#fff; }
.ln-win-amt i{ display:block; margin-top:2px; font-style:normal; font-family:var(--font-body); font-weight:700;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); }

/* ---- téléchargement ---- */
.ln-dl{ background:var(--sr-gradient); padding-block:56px 60px; }
.ln-dl-in{ text-align:center; }
.ln-dl-icon{ width:74px; border-radius:20px; box-shadow:0 16px 34px rgba(11,10,30,.34); }
.ln-dl .ln-h2{ margin-top:22px; max-width:22ch; margin-inline:auto; }
.ln-dl-lead{ margin-top:14px; font-size:17px; color:rgba(255,255,255,.88); max-width:46ch; margin-inline:auto; }
.ln-dl-act{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }

/* ---- maillage aide ---- */
.ln-help{ padding-block:56px 64px; }
.ln-help-grid{ display:grid; gap:10px; margin-top:28px; }
.ln-help-grid a{ display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--sr-surface); border:1px solid var(--sr-border);
  border-radius:var(--r-card); box-shadow:var(--sh-sm); padding:15px 17px;
  transition:transform .12s ease, box-shadow .12s ease; }
.ln-help-grid a:hover{ transform:translateY(-1px); box-shadow:var(--sh-md); }
.ln-help-tx{ flex:1; min-width:0; }
.ln-help-grid b{ display:block; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--sr-ink); }
.ln-help-grid i{ display:block; margin-top:3px; font-style:normal; font-size:13px; color:var(--sr-muted-soft); }
.ln-help-ar{ flex:none; color:var(--acc); font-size:19px; font-weight:700; }

/* ---- pied de page (identique aux pages de thème) ---- */
.hc-footer{ background:var(--sr-ink); color:rgba(255,255,255,.72); padding-block:36px 42px; }
.hc-footer-in{ display:grid; gap:28px; }
.hc-footer-brand{ font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; }
.hc-footer-brand span{ font-weight:600; font-size:13px; color:rgba(255,255,255,.6); }
.hc-footer-note{ margin-top:6px; font-size:14px; }
.hc-footer-h{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:12px; }
.hc-footer nav ul{ display:grid; gap:9px; }
.hc-footer a{ color:rgba(255,255,255,.82); font-size:14.5px; text-decoration:none; }
.hc-footer a:hover{ color:#fff; text-decoration:underline; }

/* ---- révélations au scroll (ajoutées par accueil.js) ---- */
.ln-js .reveal{ opacity:0; transform:translateY(16px); }
.ln-js .reveal.in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.ln-js .reveal:nth-child(2).in{ transition-delay:.06s; }
.ln-js .reveal:nth-child(3).in{ transition-delay:.12s; }
.ln-js .reveal:nth-child(4).in{ transition-delay:.18s; }
.ln-js .reveal:nth-child(5).in{ transition-delay:.24s; }
.ln-js .reveal:nth-child(6).in{ transition-delay:.3s; }

/* ---- ≥ 700px ---- */
@media (min-width:700px){
  .ln-hero-in{ padding-block:72px 84px; }
  .ln-how-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .ln-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ln-cards.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hc-footer-in{ grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
  .ln-help-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* ---- ≥ 1000px : deux colonnes, texte collant ---- */
@media (min-width:1000px){
  .ln-hero-in{ grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-block:88px 100px; }
  .ln-step{ padding-block:88px 96px; }
  .ln-step-in{ grid-template-columns:.92fr 1.08fr; gap:64px; }
  .ln-step-tx{ position:sticky; top:96px; }
  .ln-how{ padding-block:86px 90px; }
  .ln-dl{ padding-block:90px 96px; }
  .ln-help{ padding-block:86px 96px; }
  .ln-help-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .ln-js .reveal{ opacity:1; transform:none; }
}