/* ==================== La corde, étape 1 : le système ====================
   L'habillage « Corde » se pose sur le design « Carnet » : <html data-look="carnet" data-skin="corde">.
   Graphite la nuit, porcelaine le jour, terracotta pour la fondamentale et pour l'action.
   Titres en Bricolage Grotesque étroite et grasse, nombres en IBM Plex Mono.
   Retirer data-skin="corde" rend le design « Carnet » tel qu'il était (gardé en réserve).
   Cette couche ne change que l'apparence : aucune fonction, aucune donnée. */

/* ---------- jour : porcelaine ---------- */
:root[data-look="carnet"][data-skin="corde"]{
  --bg:#EBEEEC; --panel:#F7F8F6; --ink:#16181B; --muted:#5E656D; --line:#DADFDC; --line-strong:#C7CEC9;
  --acc:#B4502C; --acc-ink:#FFFFFF; --acc-soft:#F2E0D8; --amb:#8E5F1A; --soft:#E0E5E2;
  --terra:#B4502C; --terra-hi:#E3835F; --graphite:#16181B; --porcelain:#EBEEEC;
  --f-body:'Bricolage Grotesque', 'Noto Music', system-ui, -apple-system, sans-serif;
  --f-display:'Bricolage Grotesque', 'Noto Music', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', 'Noto Music', ui-monospace, Menlo, monospace;
  --tr1:#B4502C; --tr3:#5FA374; --tr3m:#7A5BB0; --tr5:#16181B; --tr7:#C08A27;
  --nk-bg:#E3E7E4; --nk-bg2:#DCE1DE; --nk-fret:#B9C0BC; --nk-str:#80878D; --nk-inl:#CDD3CF; --nk-txt:#5E656D;
  --nk-rt:#B4502C; --nk-ct:#5FA374; --nk-sc:#5E656D; --nk-on:#FFFFFF;
  --sh-soft:0 1px 0 rgba(22,24,27,.04), 0 12px 28px -22px rgba(22,24,27,.45);
  --wave:#B4502C; --wave-idle:#A9B0B5;
}
/* ---------- nuit : graphite ---------- */
@media (prefers-color-scheme: dark){ :root[data-look="carnet"][data-skin="corde"]:not([data-theme="light"]){
  --bg:#16181B; --panel:#202328; --ink:#EBEEEC; --muted:#8C939B; --line:#2C3036; --line-strong:#3A3F46;
  --acc:#E3835F; --acc-ink:#16181B; --acc-soft:#3A2820; --amb:#D9A75A; --soft:#2C3036;
  --tr5:#EBEEEC; --tr7:#C08A27;
  --nk-bg:#202328; --nk-bg2:#1B1E22; --nk-fret:#3A3F46; --nk-str:#7D848C; --nk-inl:#2C3036; --nk-txt:#8C939B;
  --nk-ct:#5FA374; --nk-sc:#4A5057;
  --sh-soft:0 1px 0 rgba(0,0,0,.3), 0 12px 28px -22px rgba(0,0,0,.85);
  --wave:#E3835F; --wave-idle:#5E656D;
} }
:root[data-look="carnet"][data-skin="corde"][data-theme="dark"]{
  --bg:#16181B; --panel:#202328; --ink:#EBEEEC; --muted:#8C939B; --line:#2C3036; --line-strong:#3A3F46;
  --acc:#E3835F; --acc-ink:#16181B; --acc-soft:#3A2820; --amb:#D9A75A; --soft:#2C3036;
  --tr5:#EBEEEC; --tr7:#C08A27;
  --nk-bg:#202328; --nk-bg2:#1B1E22; --nk-fret:#3A3F46; --nk-str:#7D848C; --nk-inl:#2C3036; --nk-txt:#8C939B;
  --nk-ct:#5FA374; --nk-sc:#4A5057;
  --sh-soft:0 1px 0 rgba(0,0,0,.3), 0 12px 28px -22px rgba(0,0,0,.85);
  --wave:#E3835F; --wave-idle:#5E656D;
}

/* ---------- la typographie : titres étroits et gras, le reste à pleine largeur ---------- */
[data-skin="corde"] body{font-family:var(--f-body); font-stretch:100%}
[data-skin="corde"] :is(.se-title,.fo-t,.sp-q,.tl-title,.ht-title,.bt-title,.page h2,.sp-col-h,.cf-t){font-family:var(--f-display); font-weight:740; font-stretch:78%; letter-spacing:-.015em; font-style:normal}
[data-skin="corde"] .se-title{font-size:clamp(2.4rem,11vw,3rem); line-height:.95}
[data-skin="corde"] :is(.sp-q,.tl-title){font-size:36px; line-height:.98}
[data-skin="corde"] :is(.sh-logo,#sh-tabs .sp-brand){font-family:var(--f-display); font-weight:740; font-stretch:78%; letter-spacing:-.01em}
/* Bricolage n'a pas d'italique : la phrase « pourquoi » reste droite, un peu plus grande */
[data-skin="corde"] .se-why{font-family:var(--f-body); font-style:normal; font-size:17px; line-height:1.45; color:var(--muted)}
/* les petites étiquettes restent en Plex Mono, sans capitales forcées */
[data-skin="corde"] :is(.bt-mh,.cf-eye,.cmp-row > span,.co-sec .sec-h h3,.co-tl,.eyebrow,.fam-tag,.field > label,.field > span,.gi-ol,.hg-h b,.ho-head,.ic-f > span,.im-t,.imp-h,.lg-zone,.listen .tag,.ltable th,.m-row > span,.neck-lab,.pc-bno,.pc-chip .pc-st,.pc-phn,.pg-h,.pg-tab th,.pr-title span,.progress .ph,.rl-pl,.se-coach-h,.se-date,.se-eyebrow,.sec-h h3,.sg-h b,.sh-h,.sp-col-g,.sp-eyebrow,.sp-h,.sp-where,.step-no,.tri-h,.zone){text-transform:none; letter-spacing:.01em}

/* ---------- l'action : terracotta ---------- */
[data-skin="corde"] :is(.se-go,#sh-play,.sh-start,.fo-next){background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
[data-skin="corde"] .link{color:var(--acc)}

/* ---------- la corde qui vibre (composant, branché à l'étape 2) ---------- */
canvas.cd-wave{display:block; width:100%; pointer-events:none}

/* ---------- le manche debout (composant, branché à l'étape 4) ---------- */
.cd-neck{display:block; touch-action:manipulation; color:var(--nk-str)}
.cd-neck .str{stroke:currentColor; opacity:.65} .cd-neck .fr{stroke:currentColor; opacity:.28} .cd-neck .nut{stroke:currentColor; stroke-width:4; opacity:.9}
.cd-neck .inl{fill:currentColor; opacity:.18} .cd-neck .fn{font:500 10px var(--f-mono); fill:var(--nk-txt)}