/* Thème CLAIR Jacky West (V2 design, 04/11/2026) — accueil, bibliothèque /outils, /outils/{slug}, /r/{slug}, /kit-ai et kit livré.
   Chargé UNIQUEMENT par <x-layouts.kit theme="light"> ; les règles de mise en forme sont sous body.o-light : aucune autre page n'est touchée.

   JETONS DE MARQUE (noms stables, partagés avec les autres modules — ne pas renommer) :
     --jw-paper  fond crème          --jw-card   cartes            --jw-ink    texte (16,1:1 sur crème)
     --jw-muted  texte secondaire (6,6:1)                          --jw-line   filets
     --jw-indigo action (6,3:1 sur blanc) / --jw-indigo-h survol   --jw-violet accent (5,7:1)
     --jw-warm   chaud, DÉCOR seulement (texte dessus = --jw-ink)  --jw-sun    soleil, décor
     --jw-ok     succès, décor ; --jw-ok-ink / --jw-warm-ink = variantes AA pour du texte
   Palette par page (--pa principale, --pb claire, --pc chaude, --pt teinte) posée sur <main> par App\Modules\Tracking\Support\LightPalette.
   Les blocs de code restent sombres (voulu). Mobile d'abord. */

:root{
  --jw-paper:#fffaf3; --jw-card:#ffffff; --jw-ink:#1d1b3a; --jw-muted:#5b5876; --jw-line:#e8e2d6;
  --jw-indigo:#4f46e5; --jw-indigo-h:#4338ca; --jw-violet:#7c3aed; --jw-warm:#ff7a4d; --jw-sun:#ffb703; --jw-ok:#0f9d6b;
  --jw-ok-ink:#0a7a53; --jw-warm-ink:#c2410c; --jw-paper-2:#f8f1e5; --jw-indigo-t:#eef0ff; --jw-violet-t:#f5f0ff;
}
body.o-light{
  --bg:var(--jw-paper); --bg2:var(--jw-paper-2); --surface:var(--jw-card); --surface2:#f8f4ec;
  --line:var(--jw-line); --line2:#d8cfbf;
  --ink:var(--jw-ink); --soft:#3f3c5c; --muted:var(--jw-muted);
  --cyan:var(--jw-indigo); --cyan-d:var(--jw-indigo); --warm:var(--jw-warm-ink); --ok:var(--jw-ok-ink); --bad:#b42318;
  --pa:var(--jw-indigo); --pb:#a5b4fc; --pc:var(--jw-warm); --pt:var(--jw-indigo-t);
  --focus:#3730a3;
  --shadow-sm:0 1px 2px rgba(29,27,58,.05),0 2px 8px -2px rgba(29,27,58,.07);
  --shadow-md:0 2px 4px rgba(29,27,58,.04),0 16px 36px -16px rgba(29,27,58,.20);
  --shadow-lg:0 30px 60px -28px rgba(49,46,129,.35);
  background:var(--bg); color:var(--ink);
}
body.o-light main{--cyan:var(--pa)}
body.o-light a{color:var(--pa)}
body.o-light code{background:rgba(29,27,58,.06)}
body.o-light .k-btn:focus-visible,body.o-light a:focus-visible,body.o-light summary:focus-visible,body.o-light input:focus-visible,
body.o-light button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* En-tête + menu */
body.o-light .k-brand{color:var(--ink)}
body.o-light .k-dot{background:linear-gradient(135deg,var(--jw-indigo),var(--jw-violet));box-shadow:0 0 0 4px rgba(79,70,229,.14)}
body.o-light .k-nav a{color:var(--soft)}
body.o-light .k-nav a:hover{color:var(--ink)}
body.o-light .k-nav .k-nav-kit{color:var(--jw-indigo)}
body.o-light .k-nav .k-nav-lib{color:var(--jw-ink)}
body.o-light .k-nav [aria-current="page"]{color:var(--jw-indigo);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
body.o-light .k-top{background:color-mix(in srgb,var(--jw-paper) 82%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid color-mix(in srgb,var(--jw-line) 70%,transparent)}
/* .k-top-cta : style commun dans site-chrome.css (en-tête unique) */
body.o-light .k-burger{background:rgba(255,255,255,.9);border-color:var(--line2)}
body.o-light .k-nav.open{background:#fff;box-shadow:0 24px 60px -24px rgba(29,27,58,.35);border-color:var(--line)}
body.o-light .k-nav.open a:hover{background:rgba(29,27,58,.05)}

/* HERO */
body.o-light .o-hero{padding:84px 0 44px;background:
  radial-gradient(60% 50% at 92% 8%,color-mix(in srgb,var(--pb) 34%,transparent),transparent 70%),
  radial-gradient(48% 42% at 0% 92%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 70%),
  linear-gradient(180deg,var(--pt),var(--bg) 92%);border-bottom:1px solid var(--line)}
body.o-light .o-hero::before{display:none}
.o-light .o-hero-grid{display:grid;gap:30px;align-items:center}
.o-light .o-hero-txt{min-width:0}
@media (min-width:920px){
  body.o-light .o-hero{padding:118px 0 72px}
  .o-light .o-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px}
}
body.o-light .o-page .k-h1,body.o-light.o-page .k-h1{font-size:clamp(38px,9.6vw,64px);line-height:1.02;letter-spacing:-.04em;color:var(--ink)}
.o-light .o-mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--pc) 55%,transparent) 62%,color-mix(in srgb,var(--pc) 55%,transparent) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.o-light .o-sub{color:var(--soft);font-weight:600;letter-spacing:-.005em}
.o-light .k-hero-sub{color:var(--soft);max-width:52ch}
.o-light .o-jump{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:0}
.o-light .o-jump .k-btn{flex:1 1 100%}
@media (min-width:560px){.o-light .o-jump .k-btn{flex:0 0 auto}}
.o-light .o-jump-2{display:inline-flex;align-items:center;min-height:44px;font:700 15.5px var(--fd);color:var(--pa);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Badges */
.o-light .o-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.o-light .o-badge{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--fm);letter-spacing:.04em;text-transform:uppercase;
  padding:8px 12px;border-radius:99px;background:#fff;color:var(--ink);border:1px solid var(--line2)}
.o-light .o-badge-free{background:var(--ink);color:#fff;border-color:var(--ink)}
.o-light .o-badge-free::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pb)}
.o-light .o-badge-soft{background:transparent;color:var(--soft)}

/* Boutons */
body.o-light .k-btn-primary{background:var(--pa);color:#fff;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--pa) 70%,transparent)}
body.o-light .k-btn-primary:hover{box-shadow:0 14px 30px -10px color-mix(in srgb,var(--pa) 80%,transparent);filter:brightness(1.06)}
body.o-light .k-btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line2)}
body.o-light .k-btn-ghost:hover{border-color:var(--pa);color:var(--pa)}
@media (prefers-reduced-motion:reduce){body.o-light .k-btn{transition:none}body.o-light .k-btn:hover{transform:none}}

/* Visuel dessiné du hero */
.o-light .o-art{position:relative;width:100%;max-width:440px;justify-self:center;margin:0 auto;padding:12% 7% 15%;min-height:300px}
.o-light .o-art-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.o-light .o-art.is-flip .o-art-bg{transform:scaleX(-1)}
.o-light .o-art-dot{fill:color-mix(in srgb,var(--pa) 35%,transparent)}
.o-light .o-art-s1{stop-color:var(--pb)}
.o-light .o-art-s2{stop-color:color-mix(in srgb,var(--pb) 30%,#fff)}
.o-light .o-art-blob{fill:color-mix(in srgb,var(--pc) 70%,#fff)}
.o-light .o-art-wave{stroke:var(--pa)}
.o-light .o-art-ring{stroke:var(--pc)}
.o-light .o-win{position:relative;background:#0f131b;color:#e9edf2;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(29,27,58,.55),0 0 0 1px rgba(29,27,58,.08);transform:rotate(-1.5deg)}
.o-light .o-art.is-flip .o-win{transform:rotate(1.5deg)}
.o-light .o-win-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#1a1f2b;border-bottom:1px solid rgba(255,255,255,.06)}
.o-light .o-win-bar i{width:9px;height:9px;border-radius:50%;background:#ff6b5e}
.o-light .o-win-bar i:nth-child(2){background:#ffbf2e}
.o-light .o-win-bar i:nth-child(3){background:#28c840}
.o-light .o-win-bar span{margin-left:8px;font:500 11.5px var(--fm);color:#aab4c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-light .o-win-body{padding:14px 14px 16px;display:grid;gap:7px}
.o-light .o-tl{margin:0;font:500 12.5px/1.5 var(--fm);color:#d7dde5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-light .o-tl b{color:var(--pb);font-weight:500}
.o-light .o-tl-cmd{color:#fff}
.o-light .o-tl .o-tl-ok{color:#5be39a}
.o-light .o-caret{display:inline-block;width:8px;height:14px;vertical-align:-2px;background:var(--pb)}
@media (prefers-reduced-motion:no-preference){.o-light .o-caret{animation:o-blink 1.1s steps(1) infinite}@keyframes o-blink{50%{opacity:0}}}
/* checklist (ressource) et pile (kit) : carte claire */
.o-light .o-art--checklist .o-win,.o-light .o-art--stack .o-win{background:#fff;color:var(--ink)}
.o-light .o-art--checklist .o-win-bar,.o-light .o-art--stack .o-win-bar{background:var(--surface2);border-bottom-color:var(--line)}
.o-light .o-art--checklist .o-win-bar span,.o-light .o-art--stack .o-win-bar span{color:var(--muted)}
.o-light .o-cl{display:flex;align-items:center;gap:10px;margin:0;padding:9px 10px;border-radius:10px;background:var(--pt);font:600 13.5px/1.3 var(--fb);color:var(--ink)}
.o-light .o-cl-n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pa);color:#fff;font:800 12.5px var(--fd)}
.o-light .o-cl:nth-child(2) .o-cl-n{background:var(--pc);color:#1a0f08}
.o-light .o-cl:nth-child(3) .o-cl-n{background:var(--ink)}
.o-light .o-cl:nth-child(4) .o-cl-n{background:var(--pb);color:#06222b}
.o-light .o-st{display:flex;align-items:center;gap:10px;margin:0;padding:10px;border-radius:10px;border:1px solid var(--line);font:600 13.5px/1.3 var(--fb);color:var(--ink)}
.o-light .o-st-ic{flex:none;width:26px;height:26px;border-radius:8px;background:var(--pa)}
.o-light .o-st-1 .o-st-ic{background:var(--pc)}
.o-light .o-st-2 .o-st-ic{background:var(--pb)}
.o-light .o-st-3 .o-st-ic{background:var(--ink)}
.o-light .o-shelf{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.o-light .o-shelf-i{font:500 12.5px var(--fm);padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
.o-light .o-shelf-i.o-st-0{background:color-mix(in srgb,var(--pb) 22%,transparent);border-color:color-mix(in srgb,var(--pb) 55%,transparent)}
.o-light .o-sticker{position:absolute;right:2%;bottom:6%;display:inline-flex;align-items:center;gap:8px;max-width:78%;padding:10px 14px 10px 10px;border-radius:14px;
  background:var(--pc);color:#1a0f08;font:800 14.5px/1.2 var(--fd);box-shadow:0 14px 30px -14px rgba(29,27,58,.5);transform:rotate(2deg)}
.o-light .o-art.is-flip .o-sticker{right:auto;left:2%;transform:rotate(-2deg)}
.o-light .o-sticker svg{flex:none;width:30px;height:30px;padding:4px;border-radius:9px;background:rgba(255,255,255,.55)}
@media (max-width:919px){.o-light .o-art{max-width:380px}}

/* Sections */
body.o-light .k-sec-alt{background:var(--pt);border-color:var(--line)}
body.o-light .k-sec{padding:56px 0}
body.o-light .k-sec-tight{padding:48px 0}
@media (min-width:900px){body.o-light .k-sec{padding:84px 0}body.o-light .k-sec-tight{padding:68px 0}}
body.o-light .k-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--pa);font-weight:600}
body.o-light .k-eyebrow::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--pc)}
body.o-light .k-h2{color:var(--ink)}
body.o-light .k-muted{color:var(--muted)}
body.o-light .o-lead{font-size:1.1em;line-height:1.6;color:var(--ink);background:#fff;border-left:5px solid var(--pc);border-radius:0 14px 14px 0;padding:16px 18px;box-shadow:var(--shadow-sm)}

/* Étapes numérotées colorées */
body.o-light .o-flow li{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:16px 16px 16px 64px}
body.o-light .o-flow li::before{width:34px;height:34px;left:16px;top:15px;background:var(--pa);color:#fff;border-radius:11px}
body.o-light .o-flow li:nth-child(4n+2)::before{background:var(--pc);color:#1a0f08}
body.o-light .o-flow li:nth-child(4n+3)::before{background:var(--ink);color:#fff}
body.o-light .o-flow li:nth-child(4n+4)::before{background:var(--pb);color:#06222b}
body.o-light .o-flow b{font:800 17px/1.3 var(--fd)}
body.o-light .o-flow span{color:var(--soft)}
@media (min-width:760px){body.o-light .o-flow{grid-template-columns:repeat(2,1fr)}}

body.o-light .o-actors li,body.o-light .o-opts div{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm)}
body.o-light .o-actors li{border-left:4px solid var(--pb)}
body.o-light .o-actors li:nth-child(even){border-left-color:var(--pc)}

/* Méthodes d'installation */
body.o-light .o-method{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 16px 6px;box-shadow:var(--shadow-sm)}
body.o-light .o-method:first-of-type{border:2px solid var(--pa)}
body.o-light .o-num{width:34px;height:34px;border-radius:11px;background:var(--pa);color:#fff}
body.o-light .o-method:nth-of-type(3n+2) .o-num{background:var(--pc);color:#1a0f08}
body.o-light .o-method:nth-of-type(3n+3) .o-num{background:var(--ink)}
body.o-light .o-method p{color:var(--soft)}
body.o-light .o-note{color:var(--muted);font-weight:600}

/* Blocs de code : restent sombres → variables remises en sombre localement */
body.o-light .o-code{--ink:#f3f5f8;--soft:#c3cad3;--muted:#9aa4b1;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.18);--surface2:#1f2533;
  background:#0f131b;border:0;box-shadow:0 14px 30px -18px rgba(29,27,58,.55)}
body.o-light .o-code-label{color:#9aa4b1}
body.o-light .o-copy{color:#fff;min-height:44px}
body.o-light .o-copy:hover{border-color:var(--pb)}
body.o-light .o-copy:focus-visible,body.o-light .o-pre-code:focus-visible{outline:3px solid var(--pb);outline-offset:2px}
body.o-light .o-copy.is-done{background:#5be39a;color:#04150b;border-color:#5be39a}
body.o-light .o-code code{background:none}

/* Listes : résultats / limites */
body.o-light .o-list li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 42px;color:var(--soft)}
body.o-light .o-list li::before{left:16px;top:1.05em}
body.o-light .o-pre li::before{border-color:var(--ok)}
body.o-light .o-limits li{border-left:4px solid var(--warm)}
body.o-light .o-src a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:12px;background:#fff;border:1px solid var(--line2);
  font-weight:600;text-decoration:none;box-shadow:var(--shadow-sm)}
body.o-light .o-src a::after{content:"↗";font-weight:700}
body.o-light .o-src a:hover{border-color:var(--pa)}

/* Index /outils */
body.o-light .o-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
body.o-light .o-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow-md);overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:transform .2s ease,box-shadow .2s ease}
body.o-light .o-card::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--pa),var(--pb) 60%,var(--pc))}
body.o-light .o-card:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){body.o-light .o-card{transition:none}body.o-light .o-card:hover{transform:none}}
body.o-light .o-card-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin:6px 0 10px;background:var(--pt);color:var(--pa);font:800 22px var(--fd);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pa) 25%,transparent)}
body.o-light .o-card h2 a{color:var(--ink)}
body.o-light .o-card p{color:var(--soft)}
body.o-light .o-card-meta{display:flex;flex-wrap:wrap;gap:6px}
body.o-light .o-card-meta .o-badge{padding:6px 10px;font-size:11.5px}

/* Bloc Blueprint (formulaire inchangé) */
body.o-light .o-after{padding:48px 0 72px;background:linear-gradient(180deg,var(--bg),var(--pt))}
body.o-light .p-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 20px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;margin-bottom:18px}
body.o-light .p-card::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--pa),var(--pb) 60%,var(--pc))}
body.o-light .p-input{background:#fff;color:var(--ink);border:1.5px solid var(--line2)}
body.o-light .p-input::placeholder{color:#6b737e}
body.o-light .p-input:focus{border-color:var(--pa)}
body.o-light .k-consent{color:var(--soft);border-top-color:var(--line)}
body.o-light .k-consent input{accent-color:var(--pa)}
body.o-light .k-hint{color:var(--muted)}
body.o-light .k-notice{background:#fff4e6;border-color:#f5c58a;color:#5a3300}
body.o-light .k-notice.info{background:var(--pt);border-color:color-mix(in srgb,var(--pa) 30%,transparent);color:var(--ink)}

/* Pied de page */
body.o-light .k-foot{background:#fff;border-top:1px solid var(--line)}
body.o-light .k-foot-brand{color:var(--ink)}
body.o-light .k-foot-col a{color:var(--soft)}
body.o-light .k-foot-col a:hover{color:var(--ink)}
body.o-light .k-foot-legal a,body.o-light .k-foot-tag{color:var(--muted)}

/* Invitation / questionnaire Audience : variables claires (logique inchangée, cf. audience.css) */
body.o-light .aud-root{--bg:var(--jw-card);--ink:var(--jw-ink);--mut:var(--jw-muted);--acc:var(--jw-indigo);--line:rgba(29,27,58,.16);--on-acc:#ffffff;--in-bg:#ffffff;
  --opt-bg:var(--jw-paper);--opt-picked:var(--jw-indigo-t);--x-hover:rgba(29,27,58,.06);--err:#b42318;--shadow:0 24px 60px -24px rgba(49,46,129,.45);--scrim:rgba(29,27,58,.55)}
body.o-light .aud-box,body.o-light .aud-panel{border-radius:20px}
body.o-light .aud-box{border-top:4px solid var(--jw-violet)}
body.o-light .aud-step{color:var(--jw-violet)}
body.o-light .aud-opt{border-radius:14px}
body.o-light .aud-opt:hover{background:var(--jw-indigo-t)}
body.o-light .aud-inline-wrap{margin:0 auto}
body.o-light .o-limits li::before{width:12px;height:3px;border:0;border-radius:2px;background:var(--warm);transform:none;top:1.3em}