/* ============================================================
   KaloTrack, Design System « F · Compagnon » (web)
   DA : docs/ux-design-system.md (Sally). Orange Kalo + sémantique
   calorique + neutres chauds + SF Rounded + ombres premium.
   ============================================================ */
:root{
  /* Kalo : orange de marque et actions */
  --flame:#FF7A1F; --flame-2:#FFA84A; --flame-d:#C9772A; --flame-tint:#FFF1E2;
  --core-1:#FFE9AD; --core-2:#FFCB52;
  /* Sémantique calorique */
  --cal-blue:#3B82F6; --cal-green:#16C172; --cal-amber:#EF9F27; --cal-red:#E2524D;
  --tint-blue:#E8F1FE; --tint-green:#E7F7EE; --tint-amber:#FDF3E2; --tint-red:#FDECEB;
  /* Neutres (mode clair, chaleureux) */
  --bg:#FBFBFD; --bg-2:#F4F6F8; --surface:#FFFFFF; --surface-2:#F4F6F8;
  --ink:#1E2228; --muted:#68717A; --hair:#EFF1F4; --border:rgba(20,24,32,.07);
  --action-ink:#3B210E;
  --amber:#FFC247; /* étoiles / notable (or) */
  /* Alias hérités (le markup existant continue de marcher) */
  --navy:var(--ink); --text:var(--ink); --blue:var(--flame); --blue-d:var(--flame-d);
  --up:var(--cal-green); --down:var(--cal-red);
  --radius:22px; --scene-radius:38px;
  --header-bg:rgba(251,251,253,.96);
  --hero-1:var(--flame-tint); --hero-2:var(--bg);
  /* Ombres premium (≠ vieux hairline) */
  --sh-card:0 4px 16px rgba(25,40,70,.06); --sh-bubble:0 8px 22px rgba(20,30,60,.10);
  --sh-cta:0 10px 24px rgba(255,122,31,.34);
  --font-round:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#101216; --bg-2:#16181D; --surface:#1B1E24; --surface-2:#23262E;
  --ink:#ECEEF2; --muted:#9AA1AC; --hair:#23262E; --border:rgba(255,255,255,.08);
  --flame-tint:#2A1C10; --tint-blue:#142133; --tint-green:#0E2A1E; --tint-amber:#2C2110; --tint-red:#2E1715;
  --header-bg:rgba(16,18,22,.82); --hero-1:#1E140A; --hero-2:#101216;
  --sh-card:0 6px 18px rgba(0,0,0,.45); --sh-bubble:0 10px 26px rgba(0,0,0,.55); --sh-cta:0 10px 24px rgba(255,122,31,.30);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#101216; --bg-2:#16181D; --surface:#1B1E24; --surface-2:#23262E;
  --ink:#ECEEF2; --muted:#9AA1AC; --hair:#23262E; --border:rgba(255,255,255,.08);
  --flame-tint:#2A1C10; --tint-blue:#142133; --tint-green:#0E2A1E; --tint-amber:#2C2110; --tint-red:#2E1715;
  --header-bg:rgba(16,18,22,.82); --hero-1:#1E140A; --hero-2:#101216;
  --sh-card:0 6px 18px rgba(0,0,0,.45); --sh-bubble:0 10px 26px rgba(0,0,0,.55); --sh-cta:0 10px 24px rgba(255,122,31,.30);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html[data-lang="fr"] [lang="en"]{display:none}
html[data-lang="en"] [lang="fr"]{display:none}
/* ---------- i18n : mise en forme naturelle par langue ----------
   Aucune place réservée pour l'autre langue. Seuls les textes visibles
   accompagnent la bascule, la structure et les images restent immobiles. */
body.langswap{overflow-anchor:none}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;transition:background .3s,color .3s;overflow-x:hidden}
h1,h2,h3,.brand,.eyebrow,.bigstate,.cllevel,.clver,.statpill,.cta-primary,.ghostbtn,.kbubble{font-family:var(--font-round)}
.wrap{width:min(1080px,100%);margin:0 auto;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
a{color:var(--flame);text-decoration:none}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid color-mix(in oklch,var(--flame) 52%,transparent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:100;top:10px;left:max(10px,env(safe-area-inset-left));padding:11px 15px;border-radius:12px;background:var(--ink);color:var(--surface);font-weight:800;transform:translateY(-150%);transition:transform .16s cubic-bezier(.23,1,.32,1)}
.skip-link:focus{transform:none;color:var(--surface)}
.muted{color:var(--muted)}

/* ---------- Header ---------- */
/* Header opaque (pas de backdrop-filter : le flou d'une barre sticky pleine largeur tue le scroll sur Windows/grand écran). */
header.site{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--border)}
header.site .bar{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:800;color:var(--ink);font-size:19px;margin-right:auto;letter-spacing:-.3px}
.brand .flamewrap{width:34px;height:34px;border-radius:11px;overflow:hidden;display:grid;place-items:center;transition:transform .25s ease,box-shadow .25s ease}
.brand .flamewrap img,.brand .flamewrap svg{display:block;width:34px;height:34px}
.brand:hover .flamewrap{transform:scale(1.1) rotate(-3deg);box-shadow:0 6px 18px rgba(255,122,31,.4)}
header nav.main{display:flex;gap:22px;font-size:15px;font-weight:600}
header nav.main a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
header nav.main a:hover,header nav.main a[aria-current]{color:var(--flame)}
.tools{display:flex;align-items:center;gap:10px}
.langbtn{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:999px;height:44px;min-width:46px;padding:0 12px;font-size:13px;font-weight:700;text-align:center;cursor:pointer;font-family:var(--font-round);transition:transform .12s cubic-bezier(.23,1,.32,1),border-color .16s ease,color .16s ease}
.langbtn:active{transform:scale(.96)}
.langbtn.lang-rolling{pointer-events:none}
.langbtn-label{display:block;will-change:transform,opacity,filter}
.langbtn:hover{border-color:var(--flame);color:var(--flame)}

/* Day/night toggle (inchangé : soleil doré / nuit étoilée) */
.themesw{position:relative;width:62px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.22);cursor:pointer;overflow:hidden;padding:0;background:none;flex:0 0 auto}
.themesw .sky{position:absolute;inset:0;background:linear-gradient(#5FB0EC,#C2E6FB);transition:background .5s}
html[data-theme="dark"] .themesw .sky{background:linear-gradient(#27316C,#0C1330)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .themesw .sky{background:linear-gradient(#27316C,#0C1330)}}
.themesw .clouds,.themesw .stars{position:absolute;inset:0;transition:opacity .5s}
.themesw .stars{opacity:0}
html[data-theme="dark"] .themesw .stars{opacity:1}
html[data-theme="dark"] .themesw .clouds{opacity:0}
@media (prefers-color-scheme:dark){html:not([data-theme]) .themesw .stars{opacity:1}html:not([data-theme]) .themesw .clouds{opacity:0}}
.themesw .star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:tw 2.4s ease-in-out infinite}
.themesw .star:nth-child(2){animation-delay:.6s}.themesw .star:nth-child(3){animation-delay:1.2s}.themesw .star:nth-child(4){animation-delay:.3s}
@keyframes tw{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.themesw .cloud{position:absolute;background:rgba(255,255,255,.92);border-radius:999px;animation:drift 4s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.themesw .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFD877,#FFB02E);box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .5s cubic-bezier(.34,1.56,.5,1),background .4s;z-index:3}
html[data-theme="dark"] .themesw .knob{transform:translateX(30px);background:radial-gradient(circle at 35% 30%,#E7ECFF,#AEB7EA)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .themesw .knob{transform:translateX(30px);background:radial-gradient(circle at 35% 30%,#E7ECFF,#AEB7EA)}}

/* Status pill */
.statpill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);border:1px solid var(--border);background:var(--surface);border-radius:999px;height:32px;padding:0 12px;cursor:pointer}
.statpill .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.statpill[data-state="up"]{color:var(--up)} .statpill[data-state="up"] .dot{background:var(--up);box-shadow:0 0 0 3px rgba(22,193,114,.18)}
.statpill[data-state="down"]{color:var(--down)} .statpill[data-state="down"] .dot{background:var(--down)}
.statpill[data-state="checking"] .dot{animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- Hero « scène » ---------- */
.hero{position:relative;text-align:center;padding:64px 0 26px;background:radial-gradient(130% 80% at 50% -8%,var(--hero-1),var(--hero-2) 66%);border-bottom-left-radius:var(--scene-radius);border-bottom-right-radius:var(--scene-radius)}
.hero .wrap{position:relative;z-index:1}
.hero .kalo{margin:0 auto 14px;display:block}
.hero .appicon{width:84px;height:84px;border-radius:21px;margin:0 auto 18px;display:block;box-shadow:var(--sh-cta)}
.hero h1{font-size:clamp(38px,6.6vw,66px);line-height:1.04;letter-spacing:-1.4px;margin:0 auto 16px;color:var(--ink);max-width:15ch;font-weight:800}
.hero .lead{font-size:clamp(17px,2.1vw,22px);color:var(--muted);max-width:620px;margin:0 auto 28px}
.cta-row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta-primary{display:inline-flex;align-items:center;gap:8px;background:var(--flame);color:var(--action-ink);font-weight:800;border:0;border-radius:16px;padding:14px 22px;font-size:16px;box-shadow:var(--sh-cta);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}
.cta-primary:hover{transform:translateY(-2px);color:var(--action-ink)}
.ghostbtn{display:inline-flex;align-items:center;gap:7px;color:var(--flame);font-weight:700;border:1.5px solid var(--flame);background:transparent;border-radius:16px;padding:12px 20px;font-size:16px;cursor:pointer}
.ghostbtn:hover{background:var(--flame-tint)}
.appstore{display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;border-radius:16px;padding:10px 18px;border:1px solid rgba(255,255,255,.12)}
.appstore:hover{color:#fff;transform:translateY(-1px)}
.appstore svg{width:26px;height:26px;fill:#fff}
.appstore .t{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.appstore .t small{font-size:11px;opacity:.85}
.appstore .t b{font-size:18px;font-weight:600}

/* Phone (mockups CSS, cf. <style> de chaque page ; fallback générique) */
.phone{position:relative;width:280px;max-width:78vw;margin:38px auto 0;border-radius:46px;padding:10px;background:linear-gradient(#1b1d24,#0b0c10);box-shadow:0 40px 90px rgba(16,24,48,.26);border:1px solid rgba(255,255,255,.08)}
.phone img{display:block;width:100%;border-radius:36px}

/* ---------- Sections / features ---------- */
.section{padding:64px 0}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feat.rev .ftext{order:2}
.feature-gap{margin-top:clamp(44px,5vw,64px)}
.feat .ftext{display:flex;flex-direction:column;justify-content:center}
#home .feat[data-feature="voice"] .ftext,#home .feat[data-feature="companion"] .ftext{min-block-size:17.125rem}
#home .feat[data-feature="progress"] .ftext{min-block-size:19.875rem}
#home .feat[data-feature="glp1"] .ftext{min-block-size:23.5rem}
.eyebrow{display:inline-block;background:var(--flame-tint);color:var(--flame-d);font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px;margin-bottom:14px}
.feat h2,.section>.wrap>h2{font-size:clamp(27px,3.8vw,40px);line-height:1.1;letter-spacing:-.8px;color:var(--ink);margin:0 0 14px;font-weight:800}
.feat p{font-size:18px;color:var(--muted);margin:0 0 18px;max-width:46ch}
.feat ul.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.feat ul.ticks li{position:relative;padding-left:30px;color:var(--ink)}
.feat ul.ticks li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--tint-green)}
.feat ul.ticks li::after{content:"";position:absolute;left:6px;top:9px;width:7px;height:4px;border-left:2px solid var(--cal-green);border-bottom:2px solid var(--cal-green);transform:rotate(-45deg)}
.fimg{display:flex;justify-content:center}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Section « Kalo » ---------- */
.kalozone{text-align:center}
.kalozone .lead{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto 8px}
.kalogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:28px;max-width:760px;margin-left:auto;margin-right:auto}
.kaloemo{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px 10px 12px;box-shadow:var(--sh-card)}
.kaloemo .stage{height:84px;display:flex;align-items:flex-end;justify-content:center}
.kaloemo .en{font-size:13px;font-weight:700;margin-top:8px;color:var(--ink);font-family:var(--font-round)}
.kaloemo .es{font-size:11px;color:var(--muted);margin-top:1px}
.kbubble{display:inline-block;background:var(--surface);border-radius:16px;padding:12px 16px;box-shadow:var(--sh-bubble);font-weight:600;color:var(--ink);margin:6px auto 0}

/* ---------- Status zone ---------- */
.statuszone{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:30px;box-shadow:var(--sh-card)}
.statuszone .top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.statuszone h2{margin:0;font-size:26px;color:var(--ink);font-family:var(--font-round)}
.bigstate{display:inline-flex;align-items:center;gap:9px;font-weight:800}
.bigstate .dot{width:11px;height:11px;border-radius:50%;background:var(--muted)}
.bigstate[data-state="up"]{color:var(--up)} .bigstate[data-state="up"] .dot{background:var(--up);box-shadow:0 0 0 4px rgba(22,193,114,.16)}
.bigstate[data-state="down"]{color:var(--down)} .bigstate[data-state="down"] .dot{background:var(--down)}
.checks{display:grid;gap:1px;background:var(--hair);border-radius:16px;overflow:hidden;margin-top:18px}
.check{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);padding:15px 16px}
.check .name{font-weight:600}
.check .val{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted)}
.check .val .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.check[data-state="up"] .val{color:var(--up)} .check[data-state="up"] .val .dot{background:var(--up)}
.check[data-state="down"] .val{color:var(--down)} .check[data-state="down"] .val .dot{background:var(--down)}
.statuszone .meta{margin-top:14px;color:var(--muted);font-size:14px}

/* ---------- CTA / doc / footer ---------- */
.ctaband{text-align:center;padding:60px 0}
.ctaband h2{font-size:clamp(27px,3.8vw,38px);color:var(--ink);letter-spacing:-.8px;margin:0 0 22px;font-family:var(--font-round);font-weight:800}
main.doc{padding:42px 0 64px}
main.doc .wrap{max-width:840px}
main.doc h1{color:var(--ink);font-size:clamp(28px,5vw,40px);margin:0 0 6px;font-family:var(--font-round);font-weight:800}
main.doc h2{color:var(--ink);font-size:22px;margin:32px 0 10px;font-family:var(--font-round);font-weight:700}
main.doc h3{font-size:18px;margin:22px 0 8px;font-family:var(--font-round)}
main.doc p,main.doc li{font-size:16px}
main.doc .updated{color:var(--muted);font-style:italic;margin:0 0 22px}
main.doc .note{background:var(--flame-tint);border:1px solid rgba(255,122,31,.25);border-radius:14px;padding:13px 16px;margin:18px 0;font-size:15px}
main.doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
main.doc th,main.doc td{text-align:left;padding:10px 12px;border:1px solid var(--border);vertical-align:top}
main.doc th{background:var(--surface-2);color:var(--ink);font-weight:700}
main.doc code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-size:.9em}
main.doc ul{padding-left:20px}main.doc li{margin:5px 0}
main.doc a{font-weight:600}
.log{border-left:2px solid var(--border);margin:8px 0 0 6px;padding-left:24px}
.log .rel{position:relative;padding:0 0 26px}
.log .rel::before{content:"";position:absolute;left:-31px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--flame);border:3px solid var(--bg)}
.log .ver{font-weight:800;color:var(--ink)} .log .date{color:var(--muted);font-size:14px;margin-left:8px}
footer.site{border-top:1px solid var(--border);padding:34px 0;color:var(--muted);font-size:14px;background:var(--bg-2)}
footer.site .bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap}
footer.site a{color:var(--muted)}footer.site a:hover{color:var(--flame)}

/* ---------- Navigation responsive commune ---------- */
header.site .burger{width:44px;height:44px;border-color:color-mix(in oklch,var(--ink) 18%,var(--border));border-radius:13px;padding:0 10px}
header.site .navcta{height:44px;color:var(--action-ink)}
header.site .navcta:hover{color:var(--action-ink)}
header.site .mobmenu{position:fixed;left:0;right:0;top:64px;bottom:0;max-height:calc(100dvh - 64px);padding:10px max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain}
header.site .mobmenu a{display:flex;align-items:center;min-height:52px;padding:10px 4px}
header.site .mobmenu a[aria-current]{color:var(--flame-d);background:var(--flame-tint);border-bottom-color:transparent;border-radius:12px;padding-left:12px;padding-right:12px}
header.site .mobmenu a.mm-cta{justify-content:center;min-height:48px;color:var(--action-ink);padding:12px 28px}
header.site .mobmenu .mm-lang{min-width:56px;min-height:44px;height:44px;flex:0 0 auto}
.status-main .refresh{min-height:44px}
.status-main .support-line>a{display:inline-flex;align-items:center;min-height:44px}
.foot .footlinks a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px}
.foot .footlinks a[aria-current]{color:var(--flame-d);font-weight:800}

@media (max-width:960px){
  html{scroll-padding-top:64px}
  body{padding-top:64px}
  header.site{position:fixed;left:0;right:0}
  header nav.main{display:none}
  header.site .tools .navcta,header.site .tools #langBtn{display:none}
  header.site .tools{margin-left:auto}
  header.site .burger,header.site .mobmenu{display:flex!important}
  header.site .bar{gap:10px}
}

@media (max-width:720px){
  .section{padding:48px 0}
  .feat{grid-template-columns:1fr;gap:26px;text-align:center}
  .feat.rev .ftext{order:0}
  #home .feat .ftext{min-block-size:0}
  .feat p{margin-left:auto;margin-right:auto}
  .feat ul.ticks{justify-items:center;text-align:left;max-width:300px;margin:0 auto}
  .foot .footlinks{gap:0 4px}
}

@media (max-width:480px){.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}

/* ---------- Changelog ---------- */
.clsub{color:var(--muted);margin:0 0 26px;font-size:16px}
.cllist{display:flex;flex-direction:column;gap:14px}
.clentry{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--muted);border-radius:16px;padding:16px 18px;box-shadow:var(--sh-card)}
.clentry.lvl-major{border-left-color:var(--flame)}
.clentry.lvl-notable{border-left-color:var(--amber)}
.clmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cllevel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:999px;color:#fff;background:var(--muted)}
.lvl-major .cllevel{background:var(--flame)}
.lvl-notable .cllevel{background:var(--amber);color:#3a2600}
.cltag{font-size:11px;font-weight:700;color:var(--flame-d);background:var(--flame-tint);padding:3px 9px;border-radius:999px}
.clentry time{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.clentry h3{color:var(--ink);font-size:17px;margin:0 0 5px;font-family:var(--font-round)}
.clentry p{margin:0;color:var(--ink);line-height:1.5;font-size:15px}
.clver{font-size:11px;font-weight:800;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);padding:3px 8px;border-radius:999px}
.clcurrent{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:8px 14px;border-radius:999px;margin-bottom:18px}
.clcurrent strong{color:var(--ink)}
.clcur-dot{width:8px;height:8px;border-radius:50%;background:var(--cal-green);box-shadow:0 0 0 3px rgba(22,193,114,.18)}
.clrate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid var(--border)}
.clrate-q{font-size:13px;font-weight:700;color:var(--muted)}
.clstars{display:inline-flex;gap:3px}
.clstar{font-size:20px;line-height:1;color:var(--muted);opacity:.4;background:none;border:0;cursor:pointer;padding:0 1px;transition:transform .12s ease,color .12s ease,opacity .12s ease}
.clstar:hover{transform:scale(1.18)}
.clstar.on{color:var(--amber);opacity:1}
.clrate.done .clstar{cursor:default}.clrate.done .clstar:hover{transform:none}
.clrate-agg{font-size:12px;font-weight:700;color:var(--muted);margin-left:auto}

/* ---------- Cookie consent ---------- */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.30);padding:15px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;z-index:60;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.cookiebar.in{opacity:1;transform:translateY(0)}
.cookiebar .ck-t{margin:0;flex:1;min-width:240px;color:var(--ink);font-size:14px;line-height:1.45}
.cookiebar .ck-t a{color:var(--flame);font-weight:700}
.cookiebar .ck-btns{display:flex;gap:10px;margin-left:auto}
.cookiebar .ck-accept{background:var(--flame);color:var(--action-ink);border:0;border-radius:13px;padding:11px 18px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:var(--sh-cta)}
.cookiebar .ck-reject{padding:11px 16px;font-size:15px;cursor:pointer;border:1.5px solid var(--flame);color:var(--flame);background:transparent;border-radius:13px}

/* ---------- Rating ---------- */
.ratingband{padding:48px 0;text-align:center}
.ratingband h2{color:var(--ink);font-size:24px;margin:0 0 6px;font-family:var(--font-round);font-weight:800}
.ratingband .muted{margin:0 0 16px}
.stars{display:inline-flex;gap:6px}
.stars .star{font-size:34px;line-height:1;color:var(--muted);opacity:.45;background:none;border:0;cursor:pointer;padding:0 2px;transition:transform .12s ease,color .12s ease,opacity .12s ease}
.stars .star:hover{transform:scale(1.15)}
.stars .star.on{color:var(--amber);opacity:1}
.stars[data-done] .star{cursor:default}.stars[data-done] .star:hover{transform:none}
.rate-msg{margin:14px 0 0;color:var(--muted);font-weight:700;min-height:20px}

/* ---------- Kalo : animations partagées (SVG inline) ---------- */
.kflame{transform-origin:bottom center;display:block}
@keyframes kbreathe{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.06) scaleX(.97)}}
@keyframes kbob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-7px) scaleY(1.03)}}
@keyframes kjump{0%,12%,100%{transform:translateY(0) scaleY(1)}18%{transform:translateY(3px) scaleY(.88)}48%{transform:translateY(-22px) scaleY(1.1)}74%{transform:translateY(0) scaleY(.94)}86%{transform:translateY(0) scaleY(1.02)}}
@keyframes kwobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ktremble{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}60%{transform:translateX(2px)}}
@keyframes ksleep{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.05) translateY(-2px)}}
@keyframes kspark{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.a-breathe{animation:kbreathe 2s ease-in-out infinite}.a-bob{animation:kbob 1.8s ease-in-out infinite}
.a-jump{animation:kjump 1.3s ease-in-out infinite}.a-wobble{animation:kwobble .5s ease-in-out infinite}
.a-tremble{animation:ktremble .35s ease-in-out infinite}.a-sleep{animation:ksleep 3.4s ease-in-out infinite}
.kspk{animation:kspark .9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.a-breathe,.a-bob,.a-jump,.a-wobble,.a-tremble,.a-sleep,.kspk{animation:none}}
@media (prefers-reduced-motion:reduce){.langbtn{transition:border-color .16s ease,color .16s ease}.langbtn:active{transform:none}}