/* THÈME COMMUN GABARIT v1.2 (17/10/2026 : + Athlète) — un seul look pour tous les modules.
   Chargé par chaque module APRÈS sa propre feuille de style (balise <link> en fin de <head>), avec `data-mod="…"`
   sur <html>. Il pose : la palette de Gabarit (sombre et plein soleil), les polices Anton + Sora, la barre commune
   (#g-bar, posée par coquille.js) et, module par module, le remappage de ses variables de couleur vers la palette.
   Règle : une couleur se change ICI, jamais dans un module. Les couleurs qui portent un sens propre au module
   (schéma de green de Drills, code couleur des bâtons de Vitesse) sont laissées telles quelles. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Sora:wght@300;400;500;600;700&display=swap');

/* ── 1. Palette de Gabarit (mêmes valeurs que index.html à la racine) ── */
:root{
  --g-bg:#131110; --g-surface:#1b1815; --g-panel:rgba(255,255,255,0.03); --g-panel2:rgba(255,255,255,0.06);
  --g-primary:#c0a468; --g-primary-dk:#9d8550; --g-primary-dim:rgba(192,164,104,0.13); --g-on-primary:#131110;
  --g-lime:#4faf6e; --g-lime-dk:#3f8f59; --g-lime-dim:rgba(79,175,110,0.13);
  --g-cyan:#72c19a; --g-amber:#d99a3d; --g-red:#d95c48; --g-red-dim:rgba(217,92,72,0.10);
  --g-white:#ece4d2; --g-white2:rgba(236,228,210,0.88); --g-muted:#a39a8c; --g-border:rgba(192,164,104,0.16);
  --g-nav:#0f120b; --g-top:rgba(19,17,16,0.96); --g-bar-h:44px;
}
html.sun{
  --g-bg:#f4f1e8; --g-surface:#ffffff; --g-panel:rgba(0,0,0,0.05); --g-panel2:rgba(0,0,0,0.07);
  --g-primary:#8a6d2f; --g-primary-dk:#6f5726; --g-primary-dim:rgba(138,109,47,0.16); --g-on-primary:#ffffff;
  --g-lime:#2e7d4a; --g-lime-dk:#256b3e; --g-lime-dim:rgba(46,125,74,0.15);
  --g-cyan:#1f7a5c; --g-amber:#a8641a; --g-red:#b53a25; --g-red-dim:rgba(181,58,37,0.10);
  --g-white:#1d1a14; --g-white2:#2b261d; --g-muted:#5c554a; --g-border:rgba(60,50,30,0.28);
  --g-nav:#f1eee4; --g-top:rgba(244,241,232,0.96);
}

/* ── 2. La barre commune : ← Retour · GABARIT · nom du module ── */
#g-bar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:calc(var(--g-bar-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 8px 0;
  background:var(--g-top);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--g-border);
  font-family:'Sora',sans-serif;color:var(--g-white)}
#g-back{justify-self:start;min-height:44px;min-width:44px;padding:0 8px;border:0;border-radius:10px;background:transparent;
  color:var(--g-primary);font:600 13px/1 'Sora',sans-serif;letter-spacing:.2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#g-back:active{background:var(--g-primary-dim)}
.g-mark{font-family:'Anton',sans-serif;font-size:17px;letter-spacing:2px;line-height:1;color:var(--g-white)}
.g-mark span{color:var(--g-primary)}
.g-mod{justify-self:end;padding-right:6px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--g-muted);white-space:nowrap}

/* ── 3. Polices : Sora pour le texte, Anton pour les titres et les grands chiffres ── */
html[data-mod] body{font-family:'Sora',-apple-system,sans-serif}
html[data-mod] h1{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.5px}

/* ── 4. DRILLS — variables : --bg --surf --surf2 --ink --ink2 --line --vert --ambre --rouge --chip --chip-ink ── */
:root[data-mod="drills"]{
  --bg:var(--g-bg); --surf:var(--g-surface); --surf2:var(--g-panel2); --ink:var(--g-white); --ink2:var(--g-muted);
  --line:var(--g-border); --vert:var(--g-lime); --ambre:var(--g-amber); --rouge:var(--g-red);
  --chip:var(--g-primary); --chip-ink:var(--g-on-primary);
}
html[data-mod="drills"] header.top{top:calc(var(--g-bar-h) + env(safe-area-inset-top,0px));padding-top:10px}
html[data-mod="drills"] .num{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.3px}
html[data-mod="drills"] nav.bas{background:var(--g-nav)}

/* ── 5. VITESSE — variables : --bg --bg-2 --panel --panel-2 --line --line-2 --ink --ink-2 --mute --gold --good --bad --btn --btn-ink --sans --cond ── */
:root[data-mod="vitesse"]{
  --bg:var(--g-bg); --bg-2:var(--g-nav); --panel:var(--g-surface); --panel-2:var(--g-panel2); --line:var(--g-border); --line-2:var(--g-border);
  --ink:var(--g-white); --ink-2:var(--g-white2); --mute:var(--g-muted); --gold:var(--g-primary); --good:var(--g-lime); --bad:var(--g-red);
  --btn:var(--g-primary); --btn-ink:var(--g-on-primary); --sans:'Sora',sans-serif; --cond:'Anton',sans-serif; --safe-t:0px;
}
html[data-mod="vitesse"] .brand{font-weight:400;letter-spacing:1px}
/* la barre commune occupe l'encoche ; le joueur plein écran (.run, fixe, au-dessus de la barre) et le toast en séance la gardent eux-mêmes */
html[data-mod="vitesse"] .run{padding-top:env(safe-area-inset-top,0px)}
html[data-mod="vitesse"] body.running .toast{top:calc(74px + env(safe-area-inset-top,0px))}
html[data-mod="vitesse"] .tabbar{background:var(--g-nav)}

/* ── 6. PUTTING LAB — variables : --bg --bg2 --panel --panel2 --line --text --muted --faint --green --green-d --gain --loss --warn --mono --sans --disp ── */
:root[data-mod="putting-lab"]{
  --bg:var(--g-bg); --bg2:var(--g-bg); --panel:var(--g-surface); --panel2:var(--g-panel2); --line:var(--g-border);
  --text:var(--g-white); --muted:var(--g-muted); --faint:var(--g-muted); --green:var(--g-lime); --green-d:var(--g-lime-dk);
  --gain:var(--g-lime); --loss:var(--g-red); --warn:var(--g-amber);
  --mono:'Sora',sans-serif; --sans:'Sora',sans-serif; --disp:'Anton',sans-serif;
}
html[data-mod="putting-lab"] body{background:var(--g-bg)}
html[data-mod="putting-lab"] .kicker,html[data-mod="putting-lab"] .stat .v,html[data-mod="putting-lab"] input[type=number],html[data-mod="putting-lab"] input[type=text]{font-variant-numeric:tabular-nums}
html[data-mod="putting-lab"] .card h2{font-family:'Sora',sans-serif;font-weight:700}
html[data-mod="putting-lab"] .seg button,html[data-mod="putting-lab"] input[type=number],html[data-mod="putting-lab"] input[type=text],
html[data-mod="putting-lab"] .stat,html[data-mod="putting-lab"] .pbar,html[data-mod="putting-lab"] .g-side,html[data-mod="putting-lab"] .greenbox,
html[data-mod="putting-lab"] .pchip,html[data-mod="putting-lab"] .stepper,html[data-mod="putting-lab"] .pe,html[data-mod="putting-lab"] .pe-flag{background:var(--g-panel)}
html[data-mod="putting-lab"] .tab.active{background:var(--g-primary);color:var(--g-on-primary);box-shadow:none}
html[data-mod="putting-lab"] .aimbox{background:var(--g-lime-dim)}
html[data-mod="putting-lab"] .btn-pri,html[data-mod="putting-lab"] .g-made{background:var(--g-primary);color:var(--g-on-primary);border-color:var(--g-primary)}
html[data-mod="putting-lab"] .padd{background:var(--g-primary);color:var(--g-on-primary)}

/* ── 6 bis. MODE INTÉGRÉ (ouvert depuis Gabarit avec ?g=1, classe html.g-integre) : le module perd son menu,
   la barre commune fait l'en-tête ; les éléments marqués .g-seul ne s'affichent qu'en mode intégré, .g-cache jamais ── */
html.g-integre .g-cache{display:none !important}
html:not(.g-integre) .g-seul{display:none !important}
html.g-integre[data-mod="drills"] header.top,html.g-integre[data-mod="drills"] nav.bas{display:none}
html.g-integre[data-mod="drills"] body{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
html.g-integre[data-mod="drills"] .actions{bottom:0}
html.g-integre[data-mod="drills"] #toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
html.g-integre[data-mod="vitesse"] header.top,html.g-integre[data-mod="vitesse"] .tabbar{display:none}
html.g-integre[data-mod="vitesse"] .wrap{padding-bottom:calc(24px + var(--safe-b))}
html.g-integre[data-mod="putting-lab"] header,html.g-integre[data-mod="putting-lab"] .tabs{display:none}
.g-retour{display:block;width:100%;min-height:52px;margin:14px 0 0;padding:14px;border:0;border-radius:13px;background:var(--g-primary);color:var(--g-on-primary);
  font:700 13px/1.2 'Sora',sans-serif;letter-spacing:1.5px;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer}

/* ── 6 ter. VERROU DE LICENCE des modules (coquille.js) : plein écran, au-dessus de tout, même texte et mêmes liens que Gabarit ── */
#g-lic{position:fixed;inset:0;z-index:10500;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;background:var(--g-bg);color:var(--g-white);font-family:'Sora',sans-serif}
#g-lic .g-lic-box{max-width:340px;width:100%;text-align:center}
#g-lic .g-mark{font-size:32px;letter-spacing:3px;margin-bottom:4px}
#g-lic .g-lic-mod{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--g-muted);margin-bottom:18px}
#g-lic .g-lic-msg{font-size:13px;line-height:1.6;margin:0 0 16px}
#g-lic input{width:100%;padding:13px;border-radius:12px;border:1px solid var(--g-border);background:var(--g-panel);color:var(--g-white);font:600 16px/1.2 'Sora',sans-serif;text-align:center;letter-spacing:2px;text-transform:uppercase;outline:none}
#g-lic .g-lic-err{min-height:18px;font-size:11.5px;color:var(--g-red);margin:8px 0}
#g-lic .g-lic-btn{margin-top:0}
#g-lic .g-lic-btn:disabled{opacity:.6}
#g-lic .g-lic-offre{margin-top:20px;padding-top:16px;border-top:1px solid var(--g-border)}
#g-lic .g-lic-offre p{font-size:11px;color:var(--g-muted);margin:0 0 10px}
#g-lic .g-lic-an{display:block;padding:11px;border-radius:12px;border:1px solid var(--g-primary);color:var(--g-primary);font-size:13px;font-weight:700;text-decoration:none;margin-bottom:8px}
#g-lic .g-lic-mois{display:block;padding:10px;color:var(--g-muted);font-size:12px;text-decoration:none}
#g-lic .g-lic-note{font-size:10.5px;color:var(--g-muted);margin:14px 0 0;line-height:1.6}

/* ── 7. BASELINE (Repères du Tour) — variables : --bg --panel --panel2 --line --text --muted --accent --accent-dim ── */
:root[data-mod="baseline"]{
  --bg:var(--g-bg); --panel:var(--g-surface); --panel2:var(--g-panel2); --line:var(--g-border); --text:var(--g-white); --muted:var(--g-muted);
  --accent:var(--g-primary); --accent-dim:var(--g-primary-dim); --radius:14px;
}
html[data-mod="baseline"] body{padding-top:0}
html[data-mod="baseline"] #g-bar{margin:0 -14px 12px}
html[data-mod="baseline"] .eyebrow,html[data-mod="baseline"] .tabs button,html[data-mod="baseline"] .steppers button,html[data-mod="baseline"] .chips button,html[data-mod="baseline"] .ladder .name{font-family:'Sora',sans-serif;font-weight:600}
html[data-mod="baseline"] .dist-val,html[data-mod="baseline"] .dist-unit,html[data-mod="baseline"] .res-big,html[data-mod="baseline"] .res-delta .d,html[data-mod="baseline"] .res-grid .v,html[data-mod="baseline"] .ladder .val{font-family:'Anton',sans-serif;font-weight:400}
html[data-mod="baseline"] .tabs button.on,html[data-mod="baseline"] .chips button.on,html[data-mod="baseline"] .chips button.on.pga{background:var(--g-primary);border-color:var(--g-primary);color:var(--g-on-primary)}
html[data-mod="baseline"] .ladder .row.me .fill{background:var(--g-white)}

/* ── 8. GREEN (Gabarit Green, lecture de green) — variables : --gg-bg --gg-card --gg-inset --gg-inset2 --gg-line --gg-ink --gg-muted --gg-dim --gg-faint
   --gg-green/yellow/blue/purple/orange/red/amber (+ déclinaisons alpha -11 … -aa) --gg-mono --gg-serif. Le module garde ses couleurs à sens propre
   (échelle des dépassements, vue du green, écran de visée, code couleur du Stimp). Sa palette claire (body.light) est remappée aussi : un seul réglage soleil. ── */
:root[data-mod="green"],html[data-mod="green"] body.light{
  --gg-bg:var(--g-bg); --gg-card:var(--g-surface); --gg-inset:var(--g-panel); --gg-inset2:var(--g-panel); --gg-line:var(--g-border); --gg-line-55:var(--g-border);
  --gg-ink:var(--g-white); --gg-muted:var(--g-muted); --gg-dim:var(--g-muted); --gg-faint:var(--g-muted);
  --gg-green:var(--g-lime); --gg-yellow:var(--g-amber); --gg-blue:var(--g-cyan); --gg-purple:var(--g-primary); --gg-orange:var(--g-primary);
  --gg-red:var(--g-red); --gg-amber:var(--g-amber);
  --gg-mono:'Sora',sans-serif; --gg-serif:'Anton',sans-serif;
  --gg-green-11:rgba(79,175,110,0.07); --gg-green-18:rgba(79,175,110,0.10); --gg-green-22:rgba(79,175,110,0.13); --gg-green-55:rgba(79,175,110,0.33); --gg-green-66:rgba(79,175,110,0.40); --gg-green-77:rgba(79,175,110,0.47);
  --gg-yellow-22:rgba(217,154,61,0.13); --gg-yellow-55:rgba(217,154,61,0.33); --gg-yellow-aa:rgba(217,154,61,0.67);
  --gg-blue-11:rgba(114,193,154,0.07); --gg-blue-22:rgba(114,193,154,0.13); --gg-blue-55:rgba(114,193,154,0.33); --gg-blue-88:rgba(114,193,154,0.53); --gg-blue-aa:rgba(114,193,154,0.67);
  --gg-purple-11:rgba(192,164,104,0.07); --gg-purple-18:rgba(192,164,104,0.10); --gg-purple-44:rgba(192,164,104,0.27); --gg-purple-55:rgba(192,164,104,0.33); --gg-purple-66:rgba(192,164,104,0.40);
  --gg-orange-11:rgba(192,164,104,0.07); --gg-orange-44:rgba(192,164,104,0.27); --gg-orange-66:rgba(192,164,104,0.40);
  --gg-amber-44:rgba(217,154,61,0.27);
}
html.sun[data-mod="green"],html.sun[data-mod="green"] body.light{
  --gg-green-11:rgba(46,125,74,0.07); --gg-green-18:rgba(46,125,74,0.10); --gg-green-22:rgba(46,125,74,0.13); --gg-green-55:rgba(46,125,74,0.33); --gg-green-66:rgba(46,125,74,0.40); --gg-green-77:rgba(46,125,74,0.47);
  --gg-yellow-22:rgba(168,100,26,0.13); --gg-yellow-55:rgba(168,100,26,0.33); --gg-yellow-aa:rgba(168,100,26,0.67);
  --gg-blue-11:rgba(31,122,92,0.07); --gg-blue-22:rgba(31,122,92,0.13); --gg-blue-55:rgba(31,122,92,0.33); --gg-blue-88:rgba(31,122,92,0.53); --gg-blue-aa:rgba(31,122,92,0.67);
  --gg-purple-11:rgba(138,109,47,0.07); --gg-purple-18:rgba(138,109,47,0.10); --gg-purple-44:rgba(138,109,47,0.27); --gg-purple-55:rgba(138,109,47,0.33); --gg-purple-66:rgba(138,109,47,0.40);
  --gg-orange-11:rgba(138,109,47,0.07); --gg-orange-44:rgba(138,109,47,0.27); --gg-orange-66:rgba(138,109,47,0.40);
  --gg-amber-44:rgba(168,100,26,0.27);
}
html[data-mod="green"] body{padding-top:0;background:var(--g-bg)}
html[data-mod="green"] #g-bar{align-self:stretch;margin:0 -12px 12px}
html[data-mod="green"] h1,html[data-mod="green"] .stepper .val,html[data-mod="green"] .result-item .big,html[data-mod="green"] #shot-summary{font-weight:400;letter-spacing:.5px}
html[data-mod="green"] .stepper .val span,html[data-mod="green"] .result-item .unit{font-family:'Sora',sans-serif;font-weight:600}
html[data-mod="green"] .sl,html[data-mod="green"] .subl,html[data-mod="green"] .stepper-label,html[data-mod="green"] .sub,html[data-mod="green"] .collapse-btn,html[data-mod="green"] .result-item .lbl{font-weight:600}
html[data-mod="green"] .opt,html[data-mod="green"] .overrun-opt{font-weight:600}
html[data-mod="green"] #theme-toggle{border-radius:10px}
html.g-integre[data-mod="green"] #green-head{display:none}

/* ── 9. ATHLÈTE (musculation) — variables : --bg --bg-2 --panel --panel-2 --line --line-2 --ink --ink-2 --mute --gold --good --bad --amber --cyan --btn --btn-ink
   (+ --z-leger --z-driver --z-ssc : couleurs des figures en bâtons, communes avec Vitesse) ; les couleurs des piliers (--p-*) restent au module ── */
:root[data-mod="athlete"]{
  --bg:var(--g-bg); --bg-2:var(--g-nav); --panel:var(--g-surface); --panel-2:var(--g-panel2); --line:var(--g-border); --line-2:var(--g-border);
  --ink:var(--g-white); --ink-2:var(--g-white2); --mute:var(--g-muted); --gold:var(--g-primary); --good:var(--g-lime); --bad:var(--g-red); --amber:var(--g-amber); --cyan:var(--g-cyan);
  --btn:var(--g-primary); --btn-ink:var(--g-on-primary); --z-leger:var(--g-lime); --z-driver:var(--g-primary); --z-ssc:var(--g-cyan);
}
html[data-mod="athlete"] .run{padding-top:env(safe-area-inset-top,0px)}
html[data-mod="athlete"] .tabbar{background:var(--g-nav)}
html.g-integre[data-mod="athlete"] header.top,html.g-integre[data-mod="athlete"] .tabbar{display:none}
html.g-integre[data-mod="athlete"] .wrap{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}