/* ==================== Carnet premium, étape 1 : le système ====================
   Les principes d'une appli Apple, sans reprendre l'apparence d'aucune : police du système, fonds neutres
   (blanc et gris groupé le jour, noir la nuit), une seule couleur d'accent, le bleu, pour ce qui se touche.
   Activé par <html data-look="carnet" data-skin="premium"> ; avec data-skin="corde", la Corde revient,
   sans data-skin, le design « Carnet ». Cette couche ne change que l'apparence : aucune fonction, aucune donnée.
   Le code des notes ne change pas : 1 rouge et carrée, 3 vert, ♭3 violet, 5 encre, 7 ambre, les autres en contour.
   La fondamentale ne prend jamais l'accent, pour ne pas la confondre avec la ♭3. */

/* ---------- jour ---------- */
:root[data-look="carnet"][data-skin="premium"]{
  --bg:#FFFFFF; --panel:#F2F2F7; --ink:#000000; --muted:#6C6C70; --line:#E5E5EA; --line-strong:#D1D1D6;
  --acc:#007AFF; --acc-ink:#FFFFFF; --acc-soft:#E3EEFF; --amb:#B25000; --soft:#E5E5EA;
  --f-body:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Noto Music', system-ui, sans-serif;
  --f-display:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Noto Music', system-ui, sans-serif;
  --f-mono:ui-monospace, 'SF Mono', Menlo, 'Noto Music', monospace;
  --f-chord:var(--f-display);
  --tr1:#FF3B30; --tr3:#34C759; --tr3m:#AF52DE; --tr5:#1C1C1E; --tr7:#FF9F0A;
  --nk-bg:#F2F2F7; --nk-bg2:#EBEBF0; --nk-fret:#C7C7CC; --nk-str:#8E8E93; --nk-inl:#D1D1D6; --nk-txt:#6C6C70;
  --nk-rt:#FF3B30; --nk-ct:#34C759; --nk-sc:#8E8E93; --nk-on:#FFFFFF;
  --sh-soft:none;
  --bar:rgba(249,249,249,.8);
}
/* ---------- nuit ---------- */
@media (prefers-color-scheme: dark){ :root[data-look="carnet"][data-skin="premium"]:not([data-theme="light"]){
  --bg:#000000; --panel:#1C1C1E; --ink:#FFFFFF; --muted:#98989F; --line:#2C2C2E; --line-strong:#3A3A3C;
  --acc:#0A84FF; --acc-ink:#FFFFFF; --acc-soft:#0B2547; --amb:#FFB340; --soft:#2C2C2E;
  --tr1:#FF453A; --tr3:#30D158; --tr3m:#BF5AF2; --tr5:#F2F2F7; --tr7:#FF9F0A;
  --nk-bg:#1C1C1E; --nk-bg2:#151517; --nk-fret:#3A3A3C; --nk-str:#8E8E93; --nk-inl:#2C2C2E; --nk-txt:#98989F;
  --nk-rt:#FF453A; --nk-ct:#30D158; --nk-sc:#636366;
  --bar:rgba(22,22,24,.8);
} }
:root[data-look="carnet"][data-skin="premium"][data-theme="dark"]{
  --bg:#000000; --panel:#1C1C1E; --ink:#FFFFFF; --muted:#98989F; --line:#2C2C2E; --line-strong:#3A3A3C;
  --acc:#0A84FF; --acc-ink:#FFFFFF; --acc-soft:#0B2547; --amb:#FFB340; --soft:#2C2C2E;
  --tr1:#FF453A; --tr3:#30D158; --tr3m:#BF5AF2; --tr5:#F2F2F7; --tr7:#FF9F0A;
  --nk-bg:#1C1C1E; --nk-bg2:#151517; --nk-fret:#3A3A3C; --nk-str:#8E8E93; --nk-inl:#2C2C2E; --nk-txt:#98989F;
  --nk-rt:#FF453A; --nk-ct:#30D158; --nk-sc:#636366;
  --bar:rgba(22,22,24,.8);
}

/* ---------- la typographie du système ---------- */
[data-skin="premium"] body{font-family:var(--f-body); letter-spacing:-.01em; font-stretch:100%}
[data-skin="premium"] :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) !important; font-weight:700 !important; font-stretch:100%; letter-spacing:-.02em; font-style:normal}
[data-skin="premium"] .se-title{font-size:clamp(2rem,8.6vw,2.4rem); line-height:1.05}
[data-skin="premium"] :is(.sp-q,.tl-title){font-size:34px; line-height:1.08}
[data-skin="premium"] :is(.sh-logo,#sh-tabs .sp-brand){font-family:var(--f-display); font-weight:700; letter-spacing:-.02em}
[data-skin="premium"] .se-why{font-family:var(--f-body); font-style:normal; font-size:17px; line-height:1.4; color:var(--muted)}
[data-skin="premium"] :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:0; font-family:var(--f-body); font-weight:600}
/* les titres de section, comme dans les listes de l'iPhone */
[data-skin="premium"] .sp-h{font-size:20px; font-weight:700; color:var(--ink); margin:0 4px 8px}
[data-skin="premium"] .sp-eyebrow{font-size:15px; color:var(--muted); font-weight:500}

/* ---------- l'action : bleu ---------- */
[data-skin="premium"] :is(.se-go,#sh-play,.sh-start,.fo-next){background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
[data-skin="premium"] .link{color:var(--acc)}
[data-skin="premium"] .page button.play:not(#play):not([aria-pressed="true"]), [data-skin="premium"] .sp-hub button.play{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
[data-skin="premium"] :is(button,a,.sp-row,.tile,.chip){transition:transform .25s cubic-bezier(.32,.72,0,1), opacity .2s}
[data-skin="premium"] :is(button,.sp-row,.tile):active{transform:scale(.97); opacity:.85}

/* ---------- la barre d'onglets : translucide et floutée ---------- */
[data-skin="premium"] #sh-tabs{background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-top:0; box-shadow:0 -.5px 0 var(--line-strong)}
[data-skin="premium"] #sh-tabs .sp-tab span{font-size:10.5px; font-weight:500}
[data-skin="premium"] #sh-tabs .sp-tab[aria-pressed="true"] span{font-weight:600}
[data-skin="premium"] #sh-tabs .sp-tab:not([aria-pressed="true"]){color:#8E8E93}

/* ---------- les listes groupées : pas d'ombre, des séparateurs fins ---------- */
[data-skin="premium"] .sp-list{border:0; border-radius:12px; box-shadow:none; background:var(--panel)}
[data-skin="premium"] .sp-row{border-top:0; position:relative; min-height:52px}
[data-skin="premium"] .sp-list > .sp-row + .sp-row::before{content:""; position:absolute; left:16px; right:0; top:0; height:.5px; background:var(--line-strong)}
[data-skin="premium"] .sp-tx b{font-weight:500; font-size:17px; letter-spacing:-.02em}
[data-skin="premium"] .sp-tx span{font-size:14px}
[data-skin="premium"] .page :is(.card,.panel,.se-card){box-shadow:none}

/* ---------- la fiche d'un accord et l'en-tête des progrès : sur le fond de la feuille, plus de bandeau sombre ---------- */
[data-skin="premium"] :is(.cf-top,.pg-hero){background:var(--bg); color:var(--ink)}
[data-skin="premium"] :is(.cf-eye,.pg-hero .pg-h){color:var(--muted); font-family:var(--f-body); font-weight:600; letter-spacing:0}
[data-skin="premium"] .pg-hero .pg-sub{color:var(--muted)}
[data-skin="premium"] .cf-notes li{background:var(--panel); color:var(--ink)}
[data-skin="premium"] .cf-x{border-color:var(--line-strong); color:var(--ink); background:var(--panel)}

/* ---------- le code des notes : lisible sur chaque couleur ---------- */
[data-skin="premium"] svg text.ndt-3, [data-skin="premium"] svg text.ndt-7{fill:#000000 !important}
[data-skin="premium"] .cf-notes li.ndc-1{background:var(--tr1); color:#fff}
[data-skin="premium"] .cf-notes li.ndc-3{background:var(--tr3); color:#000}
[data-skin="premium"] .cf-notes li.ndc-3m{background:var(--tr3m); color:#fff}
[data-skin="premium"] .cf-notes li.ndc-5{background:var(--tr5); color:var(--bg)}
[data-skin="premium"] .cf-notes li.ndc-7{background:var(--tr7); color:#000}
[data-skin="premium"] .cf-notes li.ndc-x{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-strong); color:var(--ink)}
[data-skin="premium"] .pn-d.on .nd{stroke:var(--acc) !important; filter:drop-shadow(0 0 5px rgba(0,122,255,.7))}
[data-skin="premium"] .tr-d3 + .tr-dt, [data-skin="premium"] .tr-o3 b{fill:#000; color:#000}

/* ==================== Carnet premium, étape 2 : la navigation d'une appli ==================== */
.pm-back, .pm-small, .pm-grab{display:none}
/* la barre du haut : plus de logo, un titre en petit au centre, trois icônes bleues à droite */
[data-skin="premium"] .sh-top{position:relative; min-height:44px; padding:2px 10px; justify-content:flex-end}
[data-skin="premium"] .sh-logo{display:none}
[data-skin="premium"] .sh-ic{min-width:0; padding:0; width:40px; height:40px; justify-content:center}
[data-skin="premium"] .sh-ic span{display:none}
[data-skin="premium"] .sh-ic svg{width:40px; height:40px; padding:10px; border:0; background:transparent; color:var(--acc)}
[data-skin="premium"] .pm-small{display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:52%; font:600 17px/1.2 var(--f-body); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; transition:opacity .2s}
[data-skin="premium"] .pm-back:not([hidden]){display:flex; align-items:center; gap:4px; position:absolute; left:6px; top:50%; transform:translateY(-50%); min-height:44px; padding:0 6px; color:var(--acc); font-size:17px; letter-spacing:-.02em; z-index:2}
[data-skin="premium"] .pm-back svg{width:12px; height:20px}
/* en haut d'un onglet : la barre est transparente par-dessus le contenu, le grand titre est dans la page */
[data-skin="premium"] body.pm-top .sh-top{position:absolute; left:0; right:0; top:0; z-index:5; padding-top:calc(2px + env(safe-area-inset-top,0px)); background:transparent; transition:background .2s, box-shadow .2s}
[data-skin="premium"] body.pm-top .pm-small{opacity:0; top:calc(50% + env(safe-area-inset-top,0px)/2)}
[data-skin="premium"] body.pm-top.pm-scrolled .sh-top{background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); box-shadow:0 .5px 0 var(--line-strong)}
[data-skin="premium"] body.pm-top.pm-scrolled .pm-small{opacity:1}
[data-skin="premium"] body.pm-top .sh-panel{padding-top:48px}
[data-skin="premium"] .pm-large{margin:0 2px 4px; font:700 34px/41px var(--f-display); letter-spacing:.01em; color:var(--ink)}
[data-skin="premium"] body.pm-top .sp-hub .sp-eyebrow{display:none}
[data-skin="premium"] body.pm-top .sp-hub .sp-q{font-size:20px !important; line-height:1.2; font-weight:600 !important; color:var(--muted); margin:0 0 4px}
[data-skin="premium"] body.pm-top .sp-hub .sp-head{padding-top:0}
[data-skin="premium"] body.pm-top.se-today .sh-panel{padding-top:48px}
/* les écrans d'outils : la barre se fixe en haut quand on défile, avec le titre en petit */
[data-skin="premium"] .tl-bar{position:relative; min-height:44px}
[data-skin="premium"] .tl-back{font-size:17px; font-weight:400; letter-spacing:-.02em}
[data-skin="premium"] .tl-ic{border:0; background:transparent; color:var(--acc); width:38px; height:38px}
[data-skin="premium"] .tl-ic svg{width:19px; height:19px}
[data-skin="premium"] .tl-ic[aria-pressed="true"]{background:var(--acc); color:var(--acc-ink)}
[data-skin="premium"] .tl-title{font-size:34px !important; line-height:41px; margin:2px 0 4px}
[data-skin="premium"] .pm-small-tl{display:block; opacity:0}
@media (max-width:899px){
  [data-skin="premium"] body.pm-page-scrolled .tl-head{padding-top:44px}
  [data-skin="premium"] body.pm-page-scrolled .tl-bar{position:fixed; left:0; right:0; top:0; z-index:30; padding:env(safe-area-inset-top,0px) 12px 0; background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); box-shadow:0 .5px 0 var(--line-strong)}
  [data-skin="premium"] body.pm-page-scrolled .pm-small-tl{opacity:1}
}
/* glisser d'un écran à l'autre */
@keyframes pm-push{from{transform:translateX(100%)} to{transform:none}}
@keyframes pm-pop{from{transform:translateX(-28%); opacity:.7} to{transform:none; opacity:1}}
[data-skin="premium"] .page.pm-push{animation:pm-push .42s cubic-bezier(.32,.72,0,1)}
[data-skin="premium"] #shell.pm-pop{animation:pm-pop .42s cubic-bezier(.32,.72,0,1)}
/* l'accordeur et le mixeur : des feuilles qui montent du bas, avec leur poignée */
@keyframes pm-sheet{from{transform:translateY(100%)} to{transform:none}}
[data-skin="premium"] .pm-grab{display:block; flex:none; width:36px; height:5px; border-radius:3px; margin:-8px auto 2px; background:var(--line-strong)}
[data-skin="premium"] .tu-back:not([hidden]) > .tu{animation:pm-sheet .4s cubic-bezier(.32,.72,0,1)}
@media (max-width:639px){
  [data-skin="premium"] .tu-back{padding:0}
  [data-skin="premium"] .tu{max-width:none; border-radius:12px 12px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){ [data-skin="premium"] :is(.page.pm-push,#shell.pm-pop,.tu-back > .tu){animation:none !important} }
[data-skin="premium"] .pm-back{background:transparent !important; border:0 !important; box-shadow:none !important}
@media (max-width:899px){
  [data-skin="premium"] body.pm-page-scrolled .tl-back span{display:none}
  [data-skin="premium"] body.pm-page-scrolled .pm-small-tl{left:44px; right:184px; transform:translateY(-50%); max-width:none; text-align:left}
}
[data-skin="premium"] .tu-top h2{font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:-.02em}
[data-skin="premium"] .tu button.play:not([aria-pressed="true"]){background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
[data-skin="premium"] .tu-top .link{text-decoration:none; font-weight:600}

/* ==================== Carnet premium, étape 3 : le lecteur de séance ==================== */
.pm-mini{display:none}
[data-skin="premium"] #pc-banner{display:none !important}
[data-skin="premium"] .pm-mini:not([hidden]){display:flex; align-items:center; gap:4px; position:fixed; left:8px; right:8px; bottom:calc(58px + env(safe-area-inset-bottom,0px)); z-index:37; height:58px; padding:0 6px 0 8px; border-radius:14px; background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); box-shadow:0 8px 24px rgba(0,0,0,.18), 0 0 0 .5px var(--line-strong); animation:pm-rise .45s cubic-bezier(.32,.72,0,1)}
@keyframes pm-rise{from{transform:translateY(120%); opacity:0} to{transform:none; opacity:1}}
[data-skin="premium"] .pm-mini-open{flex:1; min-width:0; display:flex; align-items:center; gap:12px; height:100%; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer}
[data-skin="premium"] .pm-art{flex:none; width:42px; height:42px; border-radius:8px; background:radial-gradient(70% 70% at 20% 15%, var(--acc) 0%, transparent 70%), radial-gradient(70% 70% at 85% 85%, #FF9F0A 0%, transparent 70%), #1C1C1E}
[data-skin="premium"] .pm-mt{min-width:0; display:flex; flex-direction:column}
[data-skin="premium"] .pm-mt b{font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[data-skin="premium"] .pm-mt span{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
[data-skin="premium"] .pm-mini-ic{flex:none; width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--ink); padding:0; cursor:pointer}
[data-skin="premium"] .pm-mini-ic svg{width:24px; height:24px}
[data-skin="premium"] .pm-mini-bar{position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:1px; background:var(--line)}
[data-skin="premium"] .pm-mini-bar i{display:block; height:100%; border-radius:1px; background:var(--acc); transition:width .5s linear}
[data-skin="premium"] body.pm-mini-on .sh-panel{padding-bottom:calc(84px + 24px)}
[data-skin="premium"] body.pm-mini-on:not(.sh-on) .page{padding-bottom:140px}
@media (min-width:900px){ [data-skin="premium"] .pm-mini:not([hidden]){left:calc(var(--sb,224px) + 16px); right:16px; bottom:16px; max-width:520px} }
@media (min-width:1280px){ [data-skin="premium"] body.sp-col-on .pm-mini:not([hidden]){left:calc(var(--sb,224px) + 256px)} }
/* le plein écran : un lecteur */
[data-skin="premium"] body.fo{background:linear-gradient(180deg, var(--acc-soft) 0, var(--bg) 460px) no-repeat, var(--bg)}
[data-skin="premium"] .fo-head{background:var(--bar); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); box-shadow:0 .5px 0 var(--line-strong); padding-top:calc(4px + env(safe-area-inset-top,0px)); padding-bottom:10px; border:0}
[data-skin="premium"] .pm-min{display:block; width:60px; height:18px; margin:0 auto 4px; padding:0; border:0; background:transparent; cursor:pointer}
[data-skin="premium"] .pm-min i{display:block; width:36px; height:5px; margin:6px auto; border-radius:3px; background:var(--line-strong)}
[data-skin="premium"] .fo-b{border:0; background:var(--panel); font-weight:600}
[data-skin="premium"] .fo-b.fo-prev{width:44px; padding:0; border-radius:50%}
[data-skin="premium"] .fo-b.fo-next{background:var(--acc); color:var(--acc-ink)}
[data-skin="premium"] .fo-head [data-fo-tt]{width:52px; height:52px; min-height:52px; padding:0; border-radius:50%; background:var(--ink); color:var(--bg); font-size:0; display:grid; place-items:center}
[data-skin="premium"] .fo-head [data-fo-tt]::before{content:""; width:20px; height:20px; background:currentColor; -webkit-mask:var(--pm-ic) center/contain no-repeat; mask:var(--pm-ic) center/contain no-repeat}
[data-skin="premium"] .fo-head [data-fo-tt][data-st="pause"]{--pm-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='5' height='16' rx='1.4'/%3E%3Crect x='14' y='4' width='5' height='16' rx='1.4'/%3E%3C/svg%3E")}
[data-skin="premium"] .fo-head [data-fo-tt][data-st="play"]{--pm-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5l15 8.5-15 8.5z'/%3E%3C/svg%3E")}
[data-skin="premium"] .fo-n{font-weight:600}
[data-skin="premium"] .fo-clock{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600}
[data-skin="premium"] .pm-steps{display:flex; gap:3px; max-width:1100px; margin:10px auto 0}
[data-skin="premium"] .pm-steps i{height:4px; border-radius:2px; background:var(--line-strong)}
[data-skin="premium"] .pm-steps i.done{background:var(--ink)} [data-skin="premium"] .pm-steps i.cur{background:var(--acc)}
[data-skin="premium"] .fo-card{border:0; border-radius:16px; background:var(--bg); box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
[data-skin="premium"] .fo-t{font-size:28px !important; line-height:1.12}

/* ==================== Carnet premium, étape 4 : l'onglet Aujourd'hui ==================== */
.pm-pochette{display:block; position:relative; overflow:hidden; isolation:isolate; color:#fff; border-radius:10px}
.pm-pochette::before{content:""; position:absolute; inset:-20%; z-index:-1; background:radial-gradient(60% 60% at var(--x1,20%) var(--y1,20%), var(--c1) 0%, transparent 70%), radial-gradient(70% 70% at 85% 80%, var(--c2) 0%, transparent 70%), var(--c3)}
.pm-glyph{position:absolute; left:10px; right:8px; bottom:8px; font:800 22px/1.05 var(--f-display, system-ui); letter-spacing:-.02em; text-shadow:0 1px 12px rgba(0,0,0,.25); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
[data-skin="premium"] .pm-today{padding-bottom:12px}
[data-skin="premium"] .pm-sub{margin:-2px 2px 12px; font-size:15px; color:var(--muted)}
/* la grande pochette de la séance */
[data-skin="premium"] .pm-hero{position:relative; min-height:400px; border-radius:20px; overflow:hidden; color:#fff; box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
[data-skin="premium"] .pm-hero-art{position:absolute; inset:0; border-radius:0}
[data-skin="premium"] .pm-hero-in{position:relative; min-height:400px; display:flex; flex-direction:column; padding:20px}
[data-skin="premium"] .pm-hero-k{margin:0; font-size:13px; font-weight:600; opacity:.9}
[data-skin="premium"] .pm-hero-t{margin:10px 0 0; font:800 38px/1.02 var(--f-display); letter-spacing:-.025em; max-width:12ch}
[data-skin="premium"] .pm-hero-s{margin:8px 0 0; font-size:15px; opacity:.85}
[data-skin="premium"] .pm-hero-steps{display:flex; gap:4px; margin-top:auto; padding-top:24px}
[data-skin="premium"] .pm-hero-steps i{height:4px; border-radius:2px; background:rgba(255,255,255,.4)}
[data-skin="premium"] .pm-hero-steps i:first-child{background:#fff}
[data-skin="premium"] .pm-hero-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px}
[data-skin="premium"] .pm-hero-row p{margin:0; font-size:15px; line-height:1.35; opacity:.92}
[data-skin="premium"] .pm-hero-go{flex:none; display:flex; align-items:center; gap:8px; height:46px; padding:0 22px; border-radius:23px; border:0; background:#fff; color:#000; font:600 17px var(--f-body); letter-spacing:-.02em; cursor:pointer}
[data-skin="premium"] .pm-hero-go svg{width:15px; height:15px}
/* sections, listes et carrousels */
[data-skin="premium"] .pm-sec{margin-top:26px}
[data-skin="premium"] .pm-h{margin:0 2px 10px; font:700 22px/1.2 var(--f-display); letter-spacing:-.02em; color:var(--ink)}
[data-skin="premium"] .pm-step{cursor:default}
[data-skin="premium"] .pm-n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--acc-soft); color:var(--acc); font-weight:700; font-size:14px}
[data-skin="premium"] .pm-step:first-child .pm-n{background:var(--acc); color:var(--acc-ink)}
[data-skin="premium"] .pm-min{flex:none; font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums}
[data-skin="premium"] .pm-car{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -14px; padding:0 14px; scroll-padding:14px}
[data-skin="premium"] .pm-car::-webkit-scrollbar{display:none}
[data-skin="premium"] .pm-card{flex:none; width:150px; scroll-snap-align:start; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer}
[data-skin="premium"] .pm-card .pm-pochette{width:150px; height:150px}
[data-skin="premium"] .pm-card b{display:block; margin-top:7px; font-size:15px; font-weight:500; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[data-skin="premium"] .pm-card > span:last-child{display:block; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[data-skin="premium"] .pm-ic{flex:none; width:30px; height:30px; border-radius:7px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px}
[data-skin="premium"] .pm-prog{display:block; height:4px; margin-top:6px; border-radius:2px; background:var(--line)}
[data-skin="premium"] .pm-prog i{display:block; height:100%; border-radius:2px; background:var(--acc)}
[data-skin="premium"] .pm-today .se-coach{margin:0}
[data-skin="premium"] .pm-today .bkh{margin-top:24px}
[data-skin="premium"] .pm-today .se-week{margin-top:20px}
@media (min-width:900px){ [data-skin="premium"] .pm-today{max-width:760px; margin:0 auto} }

/* ==================== Carnet premium, étape 5 : l'onglet Explorer ==================== */
[data-skin="premium"] .pm-explorer .sp-search{margin-top:10px}
[data-skin="premium"] .pm-explorer #sp-q{min-height:38px; border:0; border-radius:10px; background:var(--soft); padding-left:34px; font-size:17px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%238E8E93' stroke-width='1.8'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:10px center; background-size:16px}
[data-skin="premium"] .pm-tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px}
[data-skin="premium"] .pm-tile{position:relative; height:104px; padding:0; border:0; border-radius:12px; background:transparent; overflow:hidden; cursor:pointer; text-align:left}
[data-skin="premium"] .pm-tile .pm-pochette{position:absolute; inset:0; border-radius:12px}
[data-skin="premium"] .pm-tile .pm-glyph{font-size:17px; font-weight:700; line-height:1.15; letter-spacing:-.01em; bottom:10px; left:12px; right:10px}
@media (min-width:640px){ [data-skin="premium"] .pm-tiles{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ [data-skin="premium"] .pm-tiles{grid-template-columns:repeat(4,1fr)} }

/* ==================== Carnet premium, étape 6 : l'onglet Pratiquer ==================== */
[data-skin="premium"] .pm-card.pm-wide{width:280px}
[data-skin="premium"] .pm-card.pm-wide .pm-pochette{width:280px; height:168px; border-radius:12px}
[data-skin="premium"] .pm-card.pm-wide .pm-glyph{font-size:28px}
[data-skin="premium"] .pm-pratiquer .pm-sec + .pm-sec{margin-top:22px}

/* ==================== Carnet premium, étape 7 : l'onglet Créer ==================== */
[data-skin="premium"] button.pm-hero{display:block; width:100%; padding:0; border:0; text-align:left; font:inherit; cursor:pointer}
[data-skin="premium"] .pm-hero-jam, [data-skin="premium"] .pm-hero-jam .pm-hero-in{min-height:270px}
[data-skin="premium"] .pm-hero-in > span{display:block}
[data-skin="premium"] .pm-hero-jam .pm-hero-t{font-size:32px; max-width:none}
[data-skin="premium"] .pm-hero-row{display:flex !important}
[data-skin="premium"] .pm-hero-p{margin:0; font-size:15px; line-height:1.35; opacity:.92}
[data-skin="premium"] .pm-hero-jam .pm-hero-row{margin-top:auto; padding-top:20px}
[data-skin="premium"] .pm-hrow{display:flex; align-items:baseline; justify-content:space-between}
[data-skin="premium"] .pm-link{border:0; background:transparent; color:var(--acc); font:400 17px var(--f-body); letter-spacing:-.02em; cursor:pointer; padding:0}
[data-skin="premium"] .pm-empty{margin:0 2px; color:var(--muted); font-size:15px; line-height:1.4}

/* ==================== Carnet premium, étape 8 : l'onglet Mon carnet ==================== */
[data-skin="premium"] .pm-week{display:block; width:100%; padding:14px 16px 12px; border:0; border-radius:12px; background:var(--panel); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
[data-skin="premium"] .pm-week-h{display:flex; justify-content:space-between; font-size:15px; color:var(--muted)}
[data-skin="premium"] .pm-week-h span:first-child{font-weight:600}
[data-skin="premium"] .pm-week-n{display:flex; align-items:baseline; gap:8px; margin-top:4px}
[data-skin="premium"] .pm-week-n b{font:700 34px/1.1 var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
[data-skin="premium"] .pm-week-n span{color:var(--muted); font-size:15px}
[data-skin="premium"] .pm-week-bars{display:flex; align-items:flex-end; gap:8px; height:96px; margin-top:12px}
[data-skin="premium"] .pm-day{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px}
[data-skin="premium"] .pm-day i{display:block; width:100%; border-radius:5px; background:var(--line)}
[data-skin="premium"] .pm-day i.on{background:var(--acc)}
[data-skin="premium"] .pm-day small{font-size:11px; color:var(--muted)}
[data-skin="premium"] .pm-day.today small{color:var(--acc); font-weight:700}
[data-skin="premium"] .pm-val{flex:none; color:var(--muted); font-size:16px; letter-spacing:-.02em}
[data-skin="premium"] .pm-carnet .sp-theme .seg button{min-height:32px}

/* ==================== Carnet premium : le verre liquide ====================
   Comme sur l'iPhone récent : la barre d'onglets, le mini-lecteur et les boutons du haut flottent au-dessus
   du contenu, dans un verre clair qui floute et ravive ce qui passe dessous, avec un reflet sur le bord haut.
   Que de l'apparence : mêmes boutons, mêmes fonctions. */
:root[data-skin="premium"]{
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.78); --glass-pill:rgba(0,0,0,.065);
  --glass-hi:rgba(255,255,255,.95); --glass-lo:rgba(255,255,255,.35); --glass-edge:rgba(0,0,0,.07);
  --glass-shadow:0 12px 32px -10px rgba(0,0,0,.22), 0 2px 6px -2px rgba(0,0,0,.08);
  --glass-blur:saturate(190%) blur(22px);
}
@media (prefers-color-scheme: dark){ :root[data-skin="premium"]:not([data-theme="light"]){
  --glass:rgba(44,44,48,.5); --glass-strong:rgba(44,44,48,.72); --glass-pill:rgba(255,255,255,.13);
  --glass-hi:rgba(255,255,255,.24); --glass-lo:rgba(255,255,255,.06); --glass-edge:rgba(255,255,255,.09);
  --glass-shadow:0 14px 34px -10px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.5);
} }
:root[data-skin="premium"][data-theme="dark"]{
  --glass:rgba(44,44,48,.5); --glass-strong:rgba(44,44,48,.72); --glass-pill:rgba(255,255,255,.13);
  --glass-hi:rgba(255,255,255,.24); --glass-lo:rgba(255,255,255,.06); --glass-edge:rgba(255,255,255,.09);
  --glass-shadow:0 14px 34px -10px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.5);
}
/* la matière : un fond translucide, le flou, un liseré et le reflet du haut */
[data-skin="premium"] :is(#sh-tabs,.pm-mini,.sh-ic svg,.pm-back,.fo-head,body.pm-top.pm-scrolled .sh-top){
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
[data-skin="premium"] .pm-glass, [data-skin="premium"] :is(.pm-mini:not([hidden]),.sh-ic svg){
  background:var(--glass) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 0 0 .5px var(--glass-edge), var(--glass-shadow) !important;
}
@media (max-width:899px){
  /* la barre d'onglets devient une capsule qui flotte */
  [data-skin="premium"] #sh-tabs{left:14px; right:14px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); padding:5px !important; gap:2px; border-radius:34px; border:0;
    background:var(--glass); box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), 0 0 0 .5px var(--glass-edge), var(--glass-shadow)}
  [data-skin="premium"] #sh-tabs .sp-tab{min-height:54px; border-radius:28px; transition:background .3s cubic-bezier(.32,.72,0,1), color .2s}
  [data-skin="premium"] #sh-tabs .sp-tab[aria-pressed="true"]{background:var(--glass-pill)}
  [data-skin="premium"] #sh-tabs .sp-tab svg{width:23px; height:23px}
  [data-skin="premium"] #sh-tabs .sp-tab span{font-size:10px}
  [data-skin="premium"] .sh-panel{padding-bottom:calc(var(--dock, calc(84px + env(safe-area-inset-bottom,0px))) + 16px)}
  [data-skin="premium"] body:not(.sh-on) .page{padding-bottom:calc(var(--dock, calc(84px + env(safe-area-inset-bottom,0px))) + 16px)}
  /* le mini-lecteur flotte juste au-dessus, de la même matière */
  [data-skin="premium"] .pm-mini:not([hidden]){left:14px; right:14px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); height:56px; border-radius:28px; padding:0 8px 0 7px}
  [data-skin="premium"] .pm-mini .pm-art{border-radius:50%}
  [data-skin="premium"] .pm-mini-bar{left:26px; right:26px; bottom:3px}
  [data-skin="premium"] body.pm-mini-on .sh-panel{padding-bottom:calc(var(--dock, calc(148px + env(safe-area-inset-bottom,0px))) + 16px)}
  [data-skin="premium"] body.pm-mini-on:not(.sh-on) .page{padding-bottom:calc(var(--dock, calc(148px + env(safe-area-inset-bottom,0px))) + 16px)}
}
@media (min-width:900px){
  [data-skin="premium"] #sh-tabs{background:var(--glass-strong); box-shadow:inset -.5px 0 0 var(--glass-edge)}
  [data-skin="premium"] #sh-tabs .sp-tab[aria-pressed="true"]{background:var(--glass-pill)}
  [data-skin="premium"] .pm-mini:not([hidden]){border-radius:28px}
}
/* les boutons du haut : des pastilles de verre rondes */
[data-skin="premium"] .sh-ic svg{width:38px; height:38px; padding:9px; border-radius:50%}
[data-skin="premium"] .sh-ic + .sh-ic{margin-left:6px}
[data-skin="premium"] .pm-back:not([hidden]){min-height:38px; height:38px; padding:0 14px 0 11px; border-radius:19px; background:var(--glass) !important;
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-edge), 0 6px 16px -8px rgba(0,0,0,.25) !important}
[data-skin="premium"] body.pm-top.pm-scrolled .sh-top, [data-skin="premium"] .fo-head{background:var(--glass-strong)}
@media (max-width:899px){ [data-skin="premium"] body.pm-page-scrolled .tl-bar{background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)} }
/* les boutons d'action : capsules, avec le même reflet */
[data-skin="premium"] :is(.se-go,#sh-play,.sh-start,.fo-b.fo-next,.pm-hero-go){border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12), 0 8px 20px -10px rgba(0,0,0,.4)}
[data-skin="premium"] .pm-hero-go{background:rgba(255,255,255,.82); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 #fff, 0 0 0 .5px rgba(255,255,255,.6), 0 8px 22px -10px rgba(0,0,0,.45)}
[data-skin="premium"] .fo-b:not(.fo-next):not([data-fo-tt]){background:var(--glass); box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-edge)}
/* les feuilles (accordeur, mixeur) : du verre épais */
[data-skin="premium"] .tu{background:var(--glass-strong); -webkit-backdrop-filter:saturate(190%) blur(40px); backdrop-filter:saturate(190%) blur(40px); box-shadow:inset 0 1px 0 var(--glass-hi), 0 -10px 40px -12px rgba(0,0,0,.3)}
@media (prefers-reduced-transparency:reduce){
  [data-skin="premium"] :is(#sh-tabs,.pm-mini,.sh-ic svg,.pm-back,.fo-head,.tu,.pm-hero-go){-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--panel) !important}
}
@media (max-width:639px){ [data-skin="premium"] .tu{border-radius:28px 28px 0 0} }

/* ==================== Carnet premium : petites finitions (revue du 12 novembre) ==================== */
/* le retour : une pastille de verre avec la seule flèche (le nom de l'espace reste lu par VoiceOver),
   le titre de la page tient alors entre le retour et les trois boutons, sans passer dessous */
[data-skin="premium"] .pm-back:not([hidden]){width:38px; padding:0; justify-content:center; left:10px}
[data-skin="premium"] .pm-back span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
[data-skin="premium"] body:not(.pm-top) .sh-top .pm-small{left:56px; right:150px; max-width:none; transform:translateY(-50%); text-align:center}
/* cases à cocher et curseurs : la couleur d'accent, plus le vert de l'ancien design */
[data-skin="premium"] :is(input[type="checkbox"],input[type="radio"],input[type="range"],progress){accent-color:var(--acc)}
/* « Fermer » des feuilles : une vraie pastille, facile à toucher */
[data-skin="premium"] .tu-top{align-items:center}
[data-skin="premium"] .tu-top .link{min-height:36px; padding:0 14px; border-radius:18px; background:var(--glass-pill); color:var(--acc)}
/* les feuilles : assez opaques pour que l'écran de dessous ne brouille pas la lecture */
:root[data-skin="premium"]{--glass-sheet:rgba(250,250,252,.93)}
@media (prefers-color-scheme: dark){ :root[data-skin="premium"]:not([data-theme="light"]){--glass-sheet:rgba(30,30,32,.92)} }
:root[data-skin="premium"][data-theme="dark"]{--glass-sheet:rgba(30,30,32,.92)}
[data-skin="premium"] .tu{background:var(--glass-sheet)}
/* liens d'action dans les titres de section : une zone de toucher de 44 points */
[data-skin="premium"] .pm-link{min-height:44px; padding:0 2px; margin:-12px 0}
[data-skin="premium"] .pm-carnet .sp-theme .seg button{min-height:40px}
/* les écrans d'outils : le même retour et les mêmes pastilles de verre que partout ailleurs */
[data-skin="premium"] .tl-back{width:38px; height:38px; min-height:38px; padding:0; margin-left:0; justify-content:center; border-radius:50%; background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-edge), 0 6px 16px -8px rgba(0,0,0,.25)}
[data-skin="premium"] .tl-back span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
[data-skin="premium"] .tl-ic{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 .5px var(--glass-edge), 0 6px 16px -8px rgba(0,0,0,.25)}
[data-skin="premium"] .tl-ic[aria-pressed="true"]{background:var(--acc)}
@media (max-width:899px){ [data-skin="premium"] body.pm-page-scrolled .pm-small-tl{left:60px; right:190px; text-align:center} }

/* ==================== Carnet premium : la séance allégée ==================== */
[data-skin="premium"] .fo-w-more{text-decoration:none; font-weight:600}
/* « Accorde-toi d'abord » : un vrai bouton, plus un lien souligné */
[data-skin="premium"] .im-tune{min-height:40px; padding:0 16px; border-radius:20px; background:var(--acc-soft); color:var(--acc); text-decoration:none; font-weight:600; font-size:15px; text-align:left}
[data-skin="premium"] .im-tune::after{content:none}
/* le critère de réussite : mis en avant, c'est lui qui dit quand passer à la suite */
[data-skin="premium"] .fo-card > .fo-g{padding:12px 14px; border-radius:12px; background:var(--panel); color:var(--ink); font-size:15.5px; line-height:1.4}
[data-skin="premium"] .fo-card > .fo-g b{display:block; margin-bottom:2px; font-size:13px; font-weight:600; color:var(--acc)}
[data-skin="premium"] .im-tune{padding:8px 16px; line-height:1.3}
/* les trois formes d'une triade tiennent sur une ligne, comme sur la page de la méthode */
@media (max-width:639px){
  [data-skin="premium"] .fo-card .tr-block > .tr-figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  [data-skin="premium"] .fo-card .tr-block > .tr-figs .tr-fig{width:auto; margin:0}
  [data-skin="premium"] .fo-card .tr-block > .tr-figs .tr-svg{width:100%; height:auto}
  [data-skin="premium"] .fo-card .tr-block > .tr-figs figcaption{font-size:12px}
}