/* ============================================================================
   MyToolKit : thème « Papier et halo » (clair). Feuille PARTAGÉE, chargée
   après le <style> de chaque page : elle redéfinit les variables et les
   quelques règles écrites pour le thème sombre. Le contenu des pages ne
   change pas. Palette : papier, encre, halo doré (accent), bleu canard.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --bg:#FDFBF7; --bg2:#F6F2EA; --card:#FFFFFF; --line:#E8E1D3;
  --txt:#1F2430; --muted:#646A78;
  --accent:#136F7E; --accent-solid:#136F7E; --accent2:#1E9E6A; --violet:#136F7E;
  --halo:#F2A91D; --halo2:#FFE08A; --teal2:#E1F0F2;
  --ink:#1F2430;
}
html{background:var(--bg)}
body{
  color:var(--txt);
  font-family:'Source Sans 3','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-size:17px;
  background:
    radial-gradient(760px 420px at 92% -120px, rgba(255,224,138,.55), transparent 65%),
    var(--bg) !important;
  background-attachment:scroll !important;
}
h1,h2,h3,.logo,.card h3,ol.steps li b,.ticket .thead{font-family:Fraunces,Georgia,'Times New Roman',serif;letter-spacing:-.01em}
h1{background:none !important;-webkit-text-fill-color:currentColor !important;color:var(--txt);font-weight:700;line-height:1.08}
h2{font-weight:700}
h2::after{background:var(--halo);height:4px;width:56px}
h2.num::before{background:var(--halo) !important;color:var(--txt) !important}
a{color:var(--accent)}

/* En-tête, navigation, langue */
header{background:rgba(253,251,247,.92) !important;border-bottom:1px solid var(--line)}
.logo{font-weight:700;color:var(--txt)}
.logo span{color:var(--txt)}
.logo img{border-radius:8px;box-shadow:0 0 0 3px var(--halo)}
.nav a{color:var(--txt);opacity:.72;font-weight:500}
.nav a:hover,.nav a.here{opacity:1;color:var(--txt)}
.lang button{border:1px solid var(--line);color:var(--muted);background:#fff}
.lang button.on{background:var(--txt);border-color:var(--txt);color:#fff}
.subnav{background:rgba(246,242,234,.7)}
.subnav a{color:var(--txt);opacity:.7}

/* Boutons : plein = halo doré, encre pour le texte ; ghost = contour encre */
.btn{background:var(--halo) !important;color:var(--txt) !important;border-radius:999px;border:1.5px solid var(--halo) !important;
  box-shadow:0 0 0 6px rgba(242,169,29,.16) !important;font-weight:700}
.btn:hover{box-shadow:0 0 0 8px rgba(242,169,29,.22),0 8px 20px rgba(31,36,48,.12) !important}
.btn.ghost{background:transparent !important;color:var(--txt) !important;border:1.5px solid var(--txt) !important;box-shadow:none !important}
.btn.ghost:hover{background:rgba(31,36,48,.05) !important}
.btn.small{box-shadow:0 0 0 4px rgba(242,169,29,.14) !important}

/* Badges, pastilles */
.badge{background:#fff;color:var(--accent);border:1px solid var(--line);font-weight:700}
.badge::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;border:2.5px solid var(--halo);margin-right:8px;vertical-align:0}

/* Sections et cartes */
section{border-bottom:1px solid var(--line)}
section:nth-of-type(even){background:var(--bg2)}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px}
.card::before{background:var(--halo);opacity:.9;height:3px}
.card:hover{border-color:#d8cfbd;box-shadow:0 14px 30px rgba(31,36,48,.08);transform:translateY(-2px)}
.card h3{font-size:19px}
ol.steps li{background:var(--card);border:1px solid var(--line);border-radius:8px}
ol.steps li::before{background:var(--halo) !important;color:var(--txt) !important;box-shadow:0 0 0 4px rgba(242,169,29,.18)}
ul.checks li{background:var(--card);border:1px solid var(--line);border-radius:8px}
ul.checks li::before{color:var(--accent2)}
ul.checks li b{color:var(--txt)}
.note,.hint,.vidcap,.catdesc,.legend{color:var(--muted)}
.sub{color:var(--muted)}

/* Douleurs / mini-démos de l'accueil */
ul.pains li{background:var(--card);border:1px solid var(--line);border-radius:8px}
ul.pains li::before{color:#d1543c}
ul.pains li:hover,ul.pains li.open{border-color:var(--accent2);box-shadow:0 8px 22px rgba(31,36,48,.08)}
ul.pains li.combo{border-color:rgba(242,169,29,.6);background:linear-gradient(180deg,rgba(255,224,138,.25),var(--card))}
ul.pains li.combo::before,ul.pains li.combo:hover::before{color:#b97a0a}
.fix code.before{background:#fdf0ec;color:#9a3f2e;border:1px solid #f2cfc6}
.fix code.after{background:#e9f7ef;color:#1b6b45;border:1px solid #bfe6cf}
.kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;color:var(--txt)}
@keyframes kbdflash{0%,100%{box-shadow:none;background:#fff}42%{box-shadow:0 0 0 3px rgba(242,169,29,.45);background:#fff5db}}
.demo-svg{background:#fff;border:1px solid var(--line)}
.seethumb{border:1px solid var(--line);background:#fff}
.seethumb .playbadge{background:var(--halo);color:var(--txt)}
.media-ph{border:2px dashed var(--line);background:var(--bg2)}

/* Avant / après, vidéos, images */
.ba .band{background:var(--card);border:1px solid var(--line);border-radius:8px}
.ba .bhead.avant{border-left-color:#d1543c}
.ba .time.slow{color:#d1543c}
.vid,.bvid,.ba .bmedia .bvid{border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 18px 40px rgba(31,36,48,.12)}
figure img{box-shadow:0 18px 40px rgba(31,36,48,.12) !important;border-color:var(--line) !important}
.avatar{border:4px solid var(--halo);box-shadow:0 0 0 6px rgba(242,169,29,.18)}
.ticket{box-shadow:0 14px 40px rgba(31,36,48,.14)}

/* Code, tableaux, encadrés (recette, tutoriels) */
pre{background:#F6F2EA !important;color:var(--txt) !important;border:1px solid var(--line) !important;border-radius:8px}
pre .k{color:var(--accent) !important} pre .s{color:#8a5e12 !important} pre .c{color:var(--muted) !important}
code{background:#F6F2EA;color:var(--txt);border:1px solid var(--line)}
.tbl code,.tbl th{background:#F6F2EA !important;color:var(--txt) !important}
table.ref{background:var(--card);border:1px solid var(--line)}
table.ref th{background:#F6F2EA;color:var(--txt)}
table.ref td{color:var(--muted);border-bottom:1px solid var(--line)}
.callout{border-left:4px solid var(--accent2);background:#eef8f2;color:var(--txt)}
.callout.warn{border-left-color:var(--halo);background:#fff7e1}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:8px}
.faq summary::after{color:var(--halo)}
.faq details p{color:var(--muted)}
.btn.copy{border-radius:999px}

/* Coach : démo du halo (reste une fenêtre SAP sombre stylisée, on l'allège) */
.halodemo{background:#fff;border:1px solid var(--line)}
.halodemo .fld{background:#F6F2EA;border:1px solid var(--line)}
.halodemo .lbl{color:var(--muted)}
.halodemo .bub{background:#fff;border:1px solid rgba(242,169,29,.6);color:var(--txt);box-shadow:0 10px 26px rgba(31,36,48,.14)}

/* Visionneuse vidéo */
#vlb{background:rgba(31,36,48,.86)}

/* Pages guides et confidentialité (en-têtes simples) */
header nav a{color:var(--txt);opacity:.72}
header nav a:hover{opacity:1;color:var(--txt)}
.crumb,.crumb a{color:var(--muted)}
.bar{background:rgba(253,251,247,.92) !important;border-bottom:1px solid var(--line)}
footer{color:var(--muted);border-top:1px solid var(--line)}
footer a{color:var(--muted)}
footer a:hover{color:var(--txt)}