/* ==================== Étape 2 : deux directions de design à comparer (BRIEF-design.md) ====================
   A « Papier et encre » et B « Bois du manche ». Choisies avec le sélecteur en bas de « Aujourd’hui ».
   Variables : couleurs, espacements 4/8/12/16/24, arrondis 12 et 20. Les couleurs des notes gardent leur sens. */
:root{--acc:#B8410E; --acc-ink:#FFFFFF; --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp6:24px; --r1:12px; --r2:20px}
/* ---------- A : papier et encre ---------- */
:root[data-design="a"]{--bg:#F4EEE2; --panel:#FBF7EF; --ink:#2A231D; --muted:#6B6155; --line:#E2D8C6; --line-strong:#C9BBA3; --shadow:none}
@media (prefers-color-scheme: dark){ :root[data-design="a"]:not([data-theme="light"]){--bg:#16120E; --panel:#1F1913; --ink:#EFE5D5; --muted:#A79A88; --line:#2E261D; --line-strong:#4A3D2F; --acc:#E0773E; --acc-ink:#16120E} }
:root[data-design="a"][data-theme="dark"]{--bg:#16120E; --panel:#1F1913; --ink:#EFE5D5; --muted:#A79A88; --line:#2E261D; --line-strong:#4A3D2F; --acc:#E0773E; --acc-ink:#16120E}
[data-design="a"] .se-home{gap:var(--sp4)}
[data-design="a"] .se-date{font-family:var(--f-display); font-weight:400; font-size:15px; letter-spacing:0; color:var(--muted)}
[data-design="a"] .se-card{background:transparent; border:0; box-shadow:none; padding:0; gap:var(--sp3)}
[data-design="a"] .se-eyebrow{color:var(--acc); letter-spacing:.18em}
[data-design="a"] .se-title{font-size:clamp(2rem,8.6vw,2.6rem); line-height:1.04}
[data-design="a"] .se-why{font-family:var(--f-display); font-size:17px; line-height:1.4; color:var(--ink); border-left:2px solid var(--acc); padding-left:var(--sp3)}
[data-design="a"] .se-bar{height:4px; background:var(--line)} [data-design="a"] .se-bar span{background:var(--acc)}
[data-design="a"] .se-steps{border-top:0; margin-top:var(--sp2)}
[data-design="a"] .se-steps li{border-bottom:1px solid var(--line); padding:var(--sp3) 0; grid-template-columns:34px minmax(0,1fr) auto}
[data-design="a"] .se-n{border:0; width:auto; height:auto; font-family:var(--f-display); font-weight:400; font-size:24px; color:var(--acc)}
[data-design="a"] .se-tx b{font-size:16px}
[data-design="a"] .se-go{background:var(--acc); color:var(--acc-ink); border:0; border-radius:var(--r1); min-height:60px; font-size:19px}
[data-design="a"] #sh-tabs{background:var(--bg)}
[data-design="a"] .sh-top{background:var(--bg)}
/* ---------- B : bois du manche ---------- */
:root[data-design="b"]{--bg:#EEE7DB; --panel:#F8F3EA; --ink:#241C15; --muted:#6A5E50; --line:#DDD1BE; --line-strong:#C5B49B; --wood1:#43301F; --wood2:#24180E; --brass:#D9A15B; --cream:#F5EBDC}
@media (prefers-color-scheme: dark){ :root[data-design="b"]:not([data-theme="light"]){--bg:#110E0B; --panel:#1B1612; --ink:#EEE4D6; --muted:#A3968A; --line:#2A231C; --line-strong:#463A2E; --wood1:#3A2A1C; --wood2:#1A110A; --acc:#E0773E} }
:root[data-design="b"][data-theme="dark"]{--bg:#110E0B; --panel:#1B1612; --ink:#EEE4D6; --muted:#A3968A; --line:#2A231C; --line-strong:#463A2E; --wood1:#3A2A1C; --wood2:#1A110A; --acc:#E0773E}
[data-design="b"] .se-card{position:relative; overflow:hidden; border:0; border-radius:var(--r2); color:var(--cream); padding:var(--sp6) var(--sp4) var(--sp4);
  background:repeating-linear-gradient(0deg, transparent 0 21px, rgba(245,235,220,.07) 21px 22px), repeating-linear-gradient(90deg, transparent 0 74px, rgba(217,161,91,.22) 74px 76px), linear-gradient(165deg,var(--wood1),var(--wood2));
  box-shadow:0 18px 40px -22px rgba(30,18,8,.7)}
[data-design="b"] .se-eyebrow{color:var(--brass)}
[data-design="b"] .se-title{color:var(--cream); font-size:clamp(1.9rem,8vw,2.4rem)}
[data-design="b"] .se-sub, [data-design="b"] .se-why{color:rgba(245,235,220,.78)}
[data-design="b"] .se-bar{background:rgba(245,235,220,.15)} [data-design="b"] .se-bar span{background:var(--brass)}
[data-design="b"] .se-steps{border-top:0}
[data-design="b"] .se-steps li{border-bottom:1px solid rgba(245,235,220,.12)}
[data-design="b"] .se-steps li:last-child{border-bottom:0}
[data-design="b"] .se-tx b{color:var(--cream)} [data-design="b"] .se-tx span, [data-design="b"] .se-m{color:rgba(245,235,220,.66)}
[data-design="b"] .se-n{border:0; color:#FFF; font-size:13px; box-shadow:0 0 0 2px rgba(0,0,0,.25)}
[data-design="b"] .se-steps li:nth-child(1) .se-n{background:var(--tr1,#D2342A)}
[data-design="b"] .se-steps li:nth-child(2) .se-n{background:var(--tr3,#1C8A45)}
[data-design="b"] .se-steps li:nth-child(3) .se-n{background:#C9792B}
[data-design="b"] .se-steps li:nth-child(4) .se-n{background:#3F72C4}
[data-design="b"] .se-steps li:nth-child(5) .se-n{background:var(--cream); color:var(--wood2)}
[data-design="b"] .se-go{background:var(--acc); color:var(--acc-ink); border:0; border-radius:999px; min-height:60px; font-size:19px; box-shadow:0 10px 24px -10px rgba(184,65,14,.8)}
[data-design="b"] .se-adj{color:rgba(245,235,220,.7)}
[data-design="b"] #sh-tabs{background:var(--panel)}
/* le sélecteur d’essai */
.dz{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:var(--sp4)}
.dz p{margin:0; font-size:12.5px; color:var(--muted)}
.dz .seg button{min-height:40px; font-size:13px; padding:6px 12px}
.dz .seg button[aria-pressed="true"]{background:var(--sel-bg); color:var(--sel-fg); box-shadow:var(--sel-edge)}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }