/* ==================== Nouvelle direction, étape 1 : le design « Carnet » ====================
   Ivoire doux, graphite, vert sauge pour l'action, ambre discret pour ce qui est à retenir.
   Titres en Instrument Serif, technique (accords, tempos, cases) en IBM Plex Mono.
   Activé par <html data-look="carnet"> ; sans cet attribut, l'appli revient au design B « Bois du manche ».
   Cette couche ne change que l'apparence : aucune fonction, aucune donnée. */

/* ---------- les couleurs et les polices ---------- */
:root[data-look="carnet"]{
  --bg:#F6F3EC; --panel:#FFFDF8; --ink:#1F2321; --muted:#5B605C; --line:#E9E4D9; --line-strong:#D3CCBE;
  --acc:#4E6A55; --acc-ink:#FFFFFF; --acc-soft:#E4EBE3; --amb:#8E5F1A; --soft:#EBE7DD;
  --f-display:'Instrument Serif', 'Noto Music', Georgia, 'Times New Roman', serif;
  --f-mono:'IBM Plex Mono', 'Noto Music', ui-monospace, Menlo, monospace;
  --f-chord:var(--f-mono);
  /* le code des notes (méthode Triades) : 1 rouge brique, 3 vert, 3m violet, 5 encre, 7 ambre */
  --tr1:#B5452F; --tr3:#6FAE7C; --tr3m:#6A4C9C; --tr5:#1F2321; --tr7:#8E5F1A;
  /* le manche : bois clair, frettes et cordes discrètes */
  --nk-bg:#F1E9DA; --nk-bg2:#EAE0CD; --nk-fret:#C2B8A4; --nk-str:#8C8577; --nk-inl:#DCD2BF; --nk-txt:#5B605C;
  --nk-rt:#B5452F; --nk-ct:#4E6A55; --nk-sc:#5B605C; --nk-on:#FFFFFF;
  --sh-soft:0 1px 0 rgba(31,35,33,.04), 0 10px 26px -22px rgba(31,35,33,.4);
}
@media (prefers-color-scheme: dark){ :root[data-look="carnet"]:not([data-theme="light"]){
  --bg:#161917; --panel:#202421; --ink:#ECE8DE; --muted:#A8ABA3; --line:#2C312D; --line-strong:#3F4540;
  --acc:#9DBBA2; --acc-ink:#121513; --acc-soft:#2C3A30; --amb:#D9A75A; --soft:#2A2F2B;
  --tr5:#ECE8DE; --tr7:#8E5F1A;
  --nk-bg:#2A2620; --nk-bg2:#24211C; --nk-fret:#4A453C; --nk-str:#8E887B; --nk-inl:#3E392F; --nk-txt:#A8ABA3;
  --nk-ct:#5E7F66; --nk-sc:#4A4F4B;
  --sh-soft:0 1px 0 rgba(0,0,0,.25), 0 12px 28px -22px rgba(0,0,0,.8);
} }
:root[data-look="carnet"][data-theme="dark"]{
  --bg:#161917; --panel:#202421; --ink:#ECE8DE; --muted:#A8ABA3; --line:#2C312D; --line-strong:#3F4540;
  --acc:#9DBBA2; --acc-ink:#121513; --acc-soft:#2C3A30; --amb:#D9A75A; --soft:#2A2F2B;
  --tr5:#ECE8DE; --tr7:#8E5F1A;
  --nk-bg:#2A2620; --nk-bg2:#24211C; --nk-fret:#4A453C; --nk-str:#8E887B; --nk-inl:#3E392F; --nk-txt:#A8ABA3;
  --nk-ct:#5E7F66; --nk-sc:#4A4F4B;
  --sh-soft:0 1px 0 rgba(0,0,0,.25), 0 12px 28px -22px rgba(0,0,0,.8);
}

/* ---------- les points des triades : texte lisible sur chaque couleur, liseré clair la nuit ---------- */
[data-look="carnet"] .tr-d3 + .tr-dt{fill:#10261A}
[data-look="carnet"] .tr-o3 b{color:#10261A}
[data-look="carnet"] .tr-dt.inv{fill:#FFFFFF}
[data-look="carnet"] .tr-o5 b{color:#FFFFFF}
@media (prefers-color-scheme: dark){ :root[data-look="carnet"]:not([data-theme="light"]) :is(.tr-d1,.tr-d3,.tr-d3m,.tr-d5){stroke:var(--ink); stroke-width:.9} }
[data-look="carnet"][data-theme="dark"] :is(.tr-d1,.tr-d3,.tr-d3m,.tr-d5){stroke:var(--ink); stroke-width:.9}
@media (prefers-color-scheme: dark){ :root[data-look="carnet"]:not([data-theme="light"]) :is(.tr-dot.tr-d5,.tr-o5 b){box-shadow:0 0 0 1.5px var(--ink)} }
[data-look="carnet"][data-theme="dark"] :is(.tr-dot.tr-d5,.tr-o5 b){box-shadow:0 0 0 1.5px var(--ink)}

/* ---------- la typographie ---------- */
[data-look="carnet"] body{font-family:var(--f-body); -webkit-font-smoothing:antialiased}
[data-look="carnet"] :is(.se-title,.fo-t,.page .top h1){font-family:var(--f-display); font-weight:400; letter-spacing:-.005em}
[data-look="carnet"] .se-title{font-size:clamp(2.2rem,9.6vw,2.75rem); line-height:1.03}
[data-look="carnet"] .fo-t{font-size:clamp(1.8rem,7.6vw,2.3rem); line-height:1.06}
[data-look="carnet"] :is(.se-eyebrow,.se-date,.ns-lab){font-family:var(--f-mono); font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:12px}
[data-look="carnet"] .sh-logo{font-family:var(--f-display); font-weight:400; color:var(--ink); letter-spacing:0}

/* ---------- l'accueil : une page de carnet, plus de carte en bois ---------- */
[data-look="carnet"] .se-card{background:var(--panel); color:var(--ink); border:0; border-radius:var(--r2); box-shadow:var(--sh-soft)}
[data-look="carnet"] .se-eyebrow{color:var(--acc)}
[data-look="carnet"] .se-title{color:var(--ink)}
[data-look="carnet"] :is(.se-sub,.se-why){color:var(--muted)}
[data-look="carnet"] .se-why{font-family:var(--f-display); font-style:italic; font-size:19px; line-height:1.35; color:var(--ink)}
[data-look="carnet"] .se-bar{background:var(--line)} [data-look="carnet"] .se-bar span{background:var(--acc)}
[data-look="carnet"] .se-steps li{border-bottom:1px solid var(--line)}
[data-look="carnet"] .se-steps li:last-child{border-bottom:0}
[data-look="carnet"] .se-tx b{color:var(--ink)}
[data-look="carnet"] :is(.se-tx span,.se-m,.se-adj){color:var(--muted)}
[data-look="carnet"] .se-m{font-family:var(--f-mono); font-size:13px}
[data-look="carnet"] .se-steps li:nth-child(n) .se-n, [data-look="carnet"] .se-n{background:transparent; color:var(--acc); box-shadow:none; border:0; font-family:var(--f-mono); font-weight:500; font-size:14px}
[data-look="carnet"] .se-coach{background:var(--bg); color:var(--ink)}
[data-look="carnet"] .se-coach-h{color:var(--amb); font-family:var(--f-mono); font-weight:500; letter-spacing:.06em; font-size:12px}
[data-look="carnet"] .se-coach b{color:var(--ink)}
[data-look="carnet"] .se-go{background:var(--acc); color:var(--acc-ink); border:0; border-radius:999px; min-height:56px; font-size:17px; font-weight:600; box-shadow:none}

/* ---------- l'action principale : sauge, en pilule ---------- */
[data-look="carnet"] :is(#sh-play,.sh-start,.fo-next){background:var(--acc); border-color:var(--acc); color:var(--acc-ink); border-radius:999px}
[data-look="carnet"] #sh-play[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
[data-look="carnet"] .transport .play{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
[data-look="carnet"] .page .pc-chip.cur .pc-n{background:var(--acc); color:var(--acc-ink)}
[data-look="carnet"] .page .top h1{color:var(--ink); font-size:30px}
[data-look="carnet"] .link{color:var(--acc)}

/* ---------- moins de cadres, des fonds à peine teintés, des ombres neutres ---------- */
[data-look="carnet"] :is(.sh-card,.tile,.mo-it,.son-ab){border-color:transparent; box-shadow:var(--sh-soft)}
[data-look="carnet"] .page :is(.pc-cycle,.pc-start,.pc-run,.home-today,.tu-card,.rl-ui,.jr-card,.bt-player,.ph,.card,.metro,.ec-card,.fk-card,.lb,.dico,.rp-it,.tile,.pc-chip,.bt-it,.tri-row,.ex-card){border:0 !important; background:var(--panel); box-shadow:var(--sh-soft)}
[data-look="carnet"] .tr-dr{border:0; background:var(--panel); box-shadow:var(--sh-soft)}
[data-look="carnet"] .fo-head{background:var(--bg); box-shadow:0 8px 18px -18px rgba(31,35,33,.5)}
[data-look="carnet"] .fo-card{box-shadow:var(--sh-soft)}
[data-look="carnet"] body.sh-on .sh-tr{box-shadow:0 -10px 18px -16px rgba(31,35,33,.4)}
[data-look="carnet"] #sh-tabs{background:var(--panel)}
[data-look="carnet"] .ns-card{border-color:var(--acc-soft)}

/* ---------- le manche : bois clair le jour, brun doux la nuit (plus de bandeau sombre en haut) ---------- */
[data-look="carnet"] #shell .stage, [data-look="carnet"] .stage{background:var(--bg); color:var(--ink); box-shadow:none; border-bottom:1px solid var(--line)}
[data-look="carnet"] :is(.stage-cap b,#stage-t){color:var(--ink)}
[data-look="carnet"] :is(#stage-s,.stage-lg,.stage-lg span){color:var(--muted)}
[data-look="carnet"] .stg-b{background:var(--soft); border-color:transparent; color:var(--ink)}
[data-look="carnet"] .stage-opt{background:var(--panel) !important; color:var(--ink)}
[data-look="carnet"] .stage-opt .seg{background:var(--soft); border-color:transparent}
[data-look="carnet"] .stage-opt .seg button{color:var(--ink)}

/* ---------- Jam : l'accord joué en graphite ---------- */
[data-look="carnet"] .sh-jcc{font-family:var(--f-mono); font-weight:500; font-size:18px; box-shadow:var(--sh-soft)}
[data-look="carnet"] .sh-jcc.on{background:var(--ink); color:var(--bg); box-shadow:none}

/* ---------- la fiche accord et « Mes progrès » : un en-tête graphite au lieu du bois ---------- */
[data-look="carnet"] :is(.cf-top,.pg-hero){background:#1F2321; color:#F6F3EC}
[data-look="carnet"] :is(.cf-eye,.pg-hero .pg-h){color:#9DBBA2; font-family:var(--f-mono); font-weight:500; letter-spacing:.06em}
[data-look="carnet"] .pg-hero .pg-sub{color:#CFCBC1}
[data-look="carnet"] .cf-t{font-weight:500; letter-spacing:-.02em}
[data-look="carnet"] .cf-notes li{background:rgba(246,243,236,.1)}
[data-look="carnet"] .cf-x{border-color:rgba(246,243,236,.35); color:#F6F3EC}
[data-look="carnet"] .pg-h{font-family:var(--f-mono); font-weight:500; letter-spacing:.06em}
[data-look="carnet"] .cf-notes li.r{background:var(--tr1)}

/* ==================== Étape 2 : une seule façon de dessiner une note (classes nd-*, posées par ndShape) ====================
   1 rouge et carrée, 3 verte, 3 mineure violette, 5 encre, 7 ambre, les autres en contour. Même code partout. */
[data-look="carnet"] svg .nd{stroke:var(--nk-bg,var(--panel)); stroke-width:1.5}
[data-look="carnet"] svg .nd.nd-1{fill:var(--tr1) !important}
[data-look="carnet"] svg .nd.nd-3{fill:var(--tr3) !important}
[data-look="carnet"] svg .nd.nd-3m{fill:var(--tr3m) !important}
[data-look="carnet"] svg .nd.nd-5{fill:var(--tr5) !important}
[data-look="carnet"] svg .nd.nd-7{fill:var(--tr7) !important}
[data-look="carnet"] svg .nd.nd-x{fill:var(--panel) !important; stroke:var(--ink) !important; stroke-width:1.4}
[data-look="carnet"] svg text.ndt{fill:#FFFFFF !important}
[data-look="carnet"] svg text.ndt-3{fill:#10261A !important}
[data-look="carnet"] svg text.ndt-x{fill:var(--ink) !important}
/* les petits diagrammes : pas de liseré qui mange le point */
[data-look="carnet"] svg :is(.cd,.tr-svg,.imp-neck) .nd, [data-look="carnet"] :is(svg.cd,svg.tr-svg,svg.imp-neck) .nd:not(.nd-x){stroke:none}
/* la note qui joue (plans, idées, Jam) : un halo, quelle que soit sa forme */
[data-look="carnet"] .pn-d.on .nd{stroke:var(--acc) !important; stroke-width:3.2; filter:drop-shadow(0 0 4px rgba(78,106,85,.7))}
/* la nuit, l'encre et la fondamentale gardent un fin liseré clair */
@media (prefers-color-scheme: dark){ :root[data-look="carnet"]:not([data-theme="light"]) svg .nd:not(.nd-x){stroke:var(--ink); stroke-width:1.1} }
[data-look="carnet"][data-theme="dark"] svg .nd:not(.nd-x){stroke:var(--ink); stroke-width:1.1}
/* la légende du code : visible seulement avec ce design ; elle remplace les pastilles fondamentale / accord / gamme */
.ndl{display:none}
[data-look="carnet"] .ndl{display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:12px; color:var(--muted)}
[data-look="carnet"] .stage-lg .gi-k{display:none}
[data-look="carnet"] .stage-lg{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px}
[data-look="carnet"] .neck-legend li:has(> .lg-root, > .lg-ct, > .lg-ten, > .sx-lg-root){display:none}
[data-look="carnet"] .ndk{display:inline-block; width:12px; height:12px; border-radius:50%}
[data-look="carnet"] .ndk-1{background:var(--tr1); border-radius:3px}
[data-look="carnet"] .ndk-3{background:var(--tr3)} [data-look="carnet"] .ndk-3m{background:var(--tr3m)}
[data-look="carnet"] .ndk-5{background:var(--tr5); box-shadow:0 0 0 1px var(--ink)} [data-look="carnet"] .ndk-7{background:var(--tr7)}
[data-look="carnet"] .ndk-x{background:var(--panel); box-shadow:inset 0 0 0 1.5px var(--ink)}
/* ce que l'ancien code montrait en plus, gardé : la note de couleur d'un mode (anneau sauge), la note à éviter (pointillés, pâle) */
[data-look="carnet"] svg:not(.lb-neck) .nd:is(.sx-col,.imp-d.col){stroke:var(--acc) !important; stroke-width:3 !important}
[data-look="carnet"] .sx-lg-col{background:var(--panel); box-shadow:inset 0 0 0 3px var(--acc)}
[data-look="carnet"] svg .nd.d-avoid{opacity:.55; stroke:var(--ink) !important; stroke-dasharray:2 2}
/* la nuit, la quinte passe de l'encre à la craie (ivoire plein, chiffre sombre) pour ne pas se confondre avec les contours */
@media (prefers-color-scheme: dark){ :root[data-look="carnet"]:not([data-theme="light"]) :is(svg text.ndt-5, .tr-dt.inv){fill:#161917 !important} :root[data-look="carnet"]:not([data-theme="light"]) .tr-o5 b{color:#161917} :root[data-look="carnet"]:not([data-theme="light"]) svg .nd.nd-5{stroke:none} }
[data-look="carnet"][data-theme="dark"] :is(svg text.ndt-5, .tr-dt.inv){fill:#161917 !important}
[data-look="carnet"][data-theme="dark"] .tr-o5 b{color:#161917}
[data-look="carnet"][data-theme="dark"] svg .nd.nd-5{stroke:none}
/* les pastilles de notes de la fiche accord suivent le même code */
[data-look="carnet"] .cf-notes li.ndc-1{background:var(--tr1)}
[data-look="carnet"] .cf-notes li.ndc-3{background:#6FAE7C; color:#10261A}
[data-look="carnet"] .cf-notes li.ndc-3m{background:#6A4C9C}
[data-look="carnet"] .cf-notes li.ndc-5{background:#F6F3EC; color:#1F2321}
[data-look="carnet"] .cf-notes li.ndc-7{background:#8E5F1A}
[data-look="carnet"] .cf-notes li.ndc-x{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(246,243,236,.6)}
[data-look="carnet"] .tr-dot.tr-d1{border-radius:3px}