/* =====================================================================
   Studio Kaylei · Command Center · Couche direction artistique
   Charge APRÈS app.css. Ne réécrit rien : surcharge les jetons.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. PALETTES                                                        */
/*     Chaque palette pose : brand / brand-deep / clay / rose / gold   */
/*     + une version « nuit » du brand, plus claire, pour rester lisible*/
/* ------------------------------------------------------------------ */

:root[data-palette="kaylei"]{
  --brand:#4D0C12; --brand-deep:#2A060B; --clay:#7A2531; --rose:#C98792;
  --gold:#B8894A; --brand-nuit:#C9707C; --clay-nuit:#D89AA3;
  --wash-a:rgba(201,135,146,.22); --wash-b:rgba(184,137,74,.12);

  --surface:#F4EFE0; --card:#FBF9F0; --card-elevated:#FFFFFF; --line:#E6DCC8;
  --ink:#1B0E0D; --ink-70:#55403D; --ink-45:#7A6560;
}
:root[data-palette="layali"]{
  --brand:#4A1226; --brand-deep:#2E0A17; --clay:#7A2540; --rose:#EFD3D8;
  --gold:#E8B84B; --brand-nuit:#E0A3B4; --clay-nuit:#EFC2CC;
  --wash-a:rgba(239,211,216,.30); --wash-b:rgba(232,184,75,.14);

  --surface:#F7F1EC; --card:#FFFBF8; --card-elevated:#FFFFFF; --line:#E9DDD6;
  --ink:#241318; --ink-70:#5B3A42; --ink-45:#8A6B72;
}
:root[data-palette="sable"]{
  --brand:#8C4A2F; --brand-deep:#5E2E1B; --clay:#B5673F; --rose:#E3B9A0;
  --gold:#C08B4E; --brand-nuit:#E5A582; --clay-nuit:#EFC3A8;
  --wash-a:rgba(227,185,160,.30); --wash-b:rgba(192,139,78,.14);

  --surface:#F7F1E6; --card:#FEFAF3; --card-elevated:#FFFFFF; --line:#E9DBC7;
  --ink:#2A1B11; --ink-70:#5E4433; --ink-45:#8C7260;
}
:root[data-palette="encre"]{
  --brand:#1F2933; --brand-deep:#10161C; --clay:#3A4A57; --rose:#A8BBC6;
  --gold:#C9A227; --brand-nuit:#A9C0D2; --clay-nuit:#C6D6E0;
  --wash-a:rgba(168,187,198,.30); --wash-b:rgba(63,90,107,.10);

  --surface:#F0F2F5; --card:#FAFBFC; --card-elevated:#FFFFFF; --line:#DCE2E8;
  --ink:#131A21; --ink-70:#44525E; --ink-45:#73818C;
}
:root[data-palette="jardin"]{
  --brand:#2F4A3A; --brand-deep:#1A2C22; --clay:#4C6B56; --rose:#B9CDBC;
  --gold:#B29247; --brand-nuit:#9EC4AA; --clay-nuit:#C2DCCA;
  --wash-a:rgba(185,205,188,.32); --wash-b:rgba(47,74,58,.09);

  --surface:#F1F3EB; --card:#FAFBF5; --card-elevated:#FFFFFF; --line:#DEE5D6;
  --ink:#16211A; --ink-70:#42544A; --ink-45:#718176;
}
/* « sur-mesure » : les jetons sont posés en ligne par theme.js */

/* fonds dérivés, recalculés pour toutes les palettes */
:root{
  --brand-bg:color-mix(in srgb, var(--brand) 9%, transparent);
  --rose-bg:color-mix(in srgb, var(--rose) 22%, transparent);
  --gold-bg:color-mix(in srgb, var(--gold) 14%, transparent);
  --brand-ink:#F8F4E9;               /* texte posé SUR le brand */
  --filet:color-mix(in srgb, var(--gold) 38%, transparent);
  --grain:.04;
  --lune:.055;
}

/* ------------------------------------------------------------------ */
/*  2. MODE NUIT                                                       */
/*     Un brun très sombre, jamais du noir : la chaleur reste.         */
/*     Placé APRÈS les palettes : à spécificité égale, c'est lui.      */
/* ------------------------------------------------------------------ */

:root[data-mode="nuit"]{
  --surface:#15100F; --card:#1E1817; --card-elevated:#261F1E;
  --ink:#F2EADF; --ink-70:#C9BBB1; --ink-45:#9A8A80;
  --line:#332A28;
  --brand:var(--brand-nuit); --brand-deep:var(--clay-nuit); --clay:var(--clay-nuit);
  --brand-ink:#16100F;
  --ok:#7FB08F; --warn:#D6A855; --danger:#E08585; --info:#8FB2C6;
  --ok-bg:rgba(127,176,143,.14); --warn-bg:rgba(214,168,85,.14);
  --danger-bg:rgba(224,133,133,.14); --info-bg:rgba(143,178,198,.14);
  --sh-sm:0 1px 2px rgba(0,0,0,.35);
  --sh-md:0 2px 10px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
  --sh-lg:0 10px 36px rgba(0,0,0,.50);
  --sh-modal:0 24px 70px rgba(0,0,0,.62);
  --grain:.07;
  --lune:.045;
  color-scheme:dark;
}
:root[data-mode="nuit"] .skel{
  background:linear-gradient(90deg,var(--line) 25%,#3A2F2C 50%,var(--line) 75%);
  background-size:200% 100%;
}
:root[data-mode="nuit"] .veil{background:rgba(0,0,0,.62)}
:root[data-mode="nuit"] .input::placeholder,
:root[data-mode="nuit"] .textarea::placeholder{color:#7C6D65}
:root[data-mode="nuit"] .objective{color:var(--brand-ink)}
:root[data-mode="nuit"] .toast{background:#2E2624;color:#F2EADF}
:root[data-mode="nuit"] img,
:root[data-mode="nuit"] .vignette{filter:brightness(.92)}

/* Le texte posé sur la couleur de marque suit la marque, dans tous les
   modes : sans ça, une couleur sur-mesure claire donne du crème sur
   crème, et les pastilles deviennent illisibles en mode nuit. */
.btn-primary{color:var(--brand-ink)}
.nav-badge{color:var(--brand-ink)}
.objective{color:var(--brand-ink)}

/* ------------------------------------------------------------------ */
/*  3. DENSITÉ                                                         */
/* ------------------------------------------------------------------ */

:root[data-densite="compact"]{
  --s4:13px; --s5:18px; --s6:24px; --s7:34px; --s8:46px;
  --r-lg:12px; --r-xl:18px;
}
:root[data-densite="compact"] body{font-size:14px}
:root[data-densite="compact"] .btn{height:36px}
:root[data-densite="compact"] .input,
:root[data-densite="compact"] .select,
:root[data-densite="compact"] .textarea{min-height:38px;padding:7px var(--s3);font-size:14px}
:root[data-densite="compact"] .textarea{min-height:88px}
:root[data-densite="compact"] .t-display{font-variation-settings:var(--titre-axes);font-size:28px}
:root[data-densite="compact"] .card{padding:var(--s4) var(--s5)}

/* ------------------------------------------------------------------ */
/*  4. GRAIN + FILIGRANE                                               */
/* ------------------------------------------------------------------ */

body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:95;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-mode="nuit"] body::after{mix-blend-mode:screen}
:root[data-grain="off"] body::after{display:none}

/* croissant de lune, en filigrane, en haut à droite du contenu */
.main{position:relative;isolation:isolate}
.main::before{
  content:'';position:absolute;top:-70px;right:-110px;width:440px;height:440px;
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 62% 38%, var(--wash-a), transparent 64%);
  box-shadow:inset -70px 18px 0 -6px color-mix(in srgb, var(--brand) 12%, transparent);
  opacity:var(--lune);
  filter:blur(.4px);
}
/* voile chaud derrière le haut de page */
.main::after{
  content:'';position:absolute;inset:0 0 auto 0;height:210px;pointer-events:none;z-index:-2;
  background:linear-gradient(180deg, var(--wash-b), transparent 82%);
}

/* ------------------------------------------------------------------ */
/*  5. TYPOGRAPHIE                                                    */
/*     Les familles sont posées par js/polices.js. Ici on ne décrit    */
/*     que les rôles : titre, texte, chiffre.                          */
/* ------------------------------------------------------------------ */

:root{
  --f-titre:'Fraunces',Georgia,serif;
  --f-texte:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --titre-style:normal; --titre-serre:-.025em; --titre-graisse:400;
  --titre-axes:'SOFT' 34, 'WONK' 1, 'opsz' 120;
}

body{font-family:var(--f-texte);font-size:15.5px;line-height:1.62;letter-spacing:-.005em}
h1,h2,h3,h4{font-family:var(--f-texte)}

.t-display{
  font-family:var(--f-titre);font-style:var(--titre-style);font-weight:var(--titre-graisse);
  font-variation-settings:var(--titre-axes);
  font-size:clamp(34px,4.4vw,52px);line-height:1.02;letter-spacing:var(--titre-serre);
}
.t-h1{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-style:var(--titre-style);font-weight:var(--titre-graisse);
  font-size:32px;line-height:1.12;letter-spacing:var(--titre-serre)}
.t-h2{font-size:21px;font-weight:600;letter-spacing:-.015em}
.t-h3{font-size:17.5px;font-weight:600;letter-spacing:-.01em}
.serif{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-style:var(--titre-style);font-weight:var(--titre-graisse)}

:root[data-densite="compact"] .t-display{font-size:clamp(28px,3.4vw,38px)}

.page-head{position:relative;padding-bottom:var(--s4);margin-bottom:var(--s6)}
.page-head::after{
  content:'';position:absolute;left:0;bottom:0;width:52px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.page-head .dim{font-size:15.5px;max-width:60ch;margin-top:6px}
.hero .hello{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-style:var(--titre-style);font-weight:var(--titre-graisse);
  font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:var(--titre-serre)}

/* surtitres : plus petits, plus espacés, moins criards */
.card-title{
  font-family:var(--f-texte);color:var(--ink-45);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;margin-bottom:var(--s3);
  display:flex;align-items:center;gap:9px;
}
.card-title::after{content:'';flex:1 0 24px;height:1px;background:var(--line);max-width:90px}

/* chiffres */
.kpi .k-val{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-style:normal;font-weight:var(--titre-graisse);
  font-variant-numeric:tabular-nums;font-size:clamp(30px,3.4vw,42px);line-height:1;
  letter-spacing:-.03em;margin:10px 0 4px}
:root[data-densite="compact"] .kpi .k-val{font-size:30px}
.chiffre-xxl{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-variant-numeric:tabular-nums;
  font-size:54px;line-height:1;letter-spacing:-.03em;color:var(--brand)}

/* l'objectif du mois reste en gros, dans la police de titre */
.objective .txt{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-style:var(--titre-style);
  font-weight:var(--titre-graisse);font-size:clamp(21px,2.5vw,29px);line-height:1.22;
  letter-spacing:var(--titre-serre)}
.onb-q{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-style:var(--titre-style);font-weight:var(--titre-graisse);
  font-size:clamp(23px,3vw,31px);line-height:1.15;letter-spacing:var(--titre-serre)}
.rail-brand span,.auth-brand span{font-family:var(--f-titre);font-style:var(--titre-style);
  font-weight:var(--titre-graisse);font-variation-settings:var(--titre-axes)}

/* ------------------------------------------------------------------ */
/*  6. CARTES : filet doré, relief, survol                             */
/* ------------------------------------------------------------------ */

.card{position:relative;box-shadow:var(--sh-sm);transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s}
.card::before{
  content:'';position:absolute;left:var(--s5);right:var(--s5);top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--filet),transparent);
  opacity:0;transition:opacity .3s;
}
.card:hover::before{opacity:1}
.card.click:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--rose)}
.kpi{position:relative;overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.kpi::after{
  content:'';position:absolute;right:-40px;bottom:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,var(--rose-bg),transparent 68%);opacity:0;transition:opacity .35s;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.kpi:hover::after{opacity:1}

.objective{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:var(--brand-ink)}
.objective::after{
  content:'';position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle at 60% 40%, color-mix(in srgb,var(--gold) 30%,transparent), transparent 62%);
  pointer-events:none;
}
.objective .lbl{color:var(--rose)}

/* ------------------------------------------------------------------ */
/*  7. RAIL + BARRE HAUTE                                              */
/* ------------------------------------------------------------------ */

.rail{background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 88%, var(--surface)))}
.nav-item{transition:background .18s var(--ease),color .18s,transform .18s var(--ease)}
.nav-item:hover{transform:translateX(2px)}
.nav-item.active::before{background:linear-gradient(180deg,var(--brand),var(--gold))}

.topbar{
  position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:var(--s3);
  margin:calc(var(--s6) * -1) calc(var(--s7) * -1) var(--s5);
  padding:12px var(--s7);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid transparent;
  transition:padding .25s var(--ease),border-color .25s,background .25s;
}
.topbar.reduit{padding:7px var(--s7);border-bottom-color:var(--line);box-shadow:var(--sh-sm)}
.tb-fil{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-45);min-width:0}
.tb-fil b{color:var(--ink);font-weight:600}
.tb-fil .sep{opacity:.45}
.tb-sp{flex:1 1 auto}
.tb-btn{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--card);
  color:var(--ink-45);font-size:13px;cursor:pointer;
  transition:border-color .18s,color .18s,transform .18s var(--ease);
}
.tb-btn:hover{border-color:var(--clay);color:var(--ink);transform:translateY(-1px)}
.tb-btn kbd{
  font-family:ui-monospace,Menlo,monospace;font-size:11px;border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;background:var(--surface);color:var(--ink-45);
}
.tb-rond{width:34px;padding:0;justify-content:center;font-size:15px}

/* ------------------------------------------------------------------ */
/*  8. PALETTE DE COMMANDES (Cmd+K)                                    */
/* ------------------------------------------------------------------ */

.cmdk{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding:12vh var(--s4) var(--s4);
  background:rgba(20,12,11,.46);backdrop-filter:blur(6px);animation:fade .16s}
.cmdk-box{width:100%;max-width:580px;background:var(--card-elevated);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-modal);overflow:hidden;animation:cmdkIn .22s var(--ease)}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.cmdk-in{width:100%;border:none;background:none;padding:18px var(--s5);font-size:17px;font-family:inherit;color:var(--ink)}
.cmdk-in:focus{outline:none}
.cmdk-in::placeholder{color:var(--ink-45)}
.cmdk-sep{height:1px;background:var(--line)}
.cmdk-liste{max-height:48vh;overflow-y:auto;padding:8px}
.cmdk-grp{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45);font-weight:600;padding:10px 12px 5px}
.cmdk-it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);cursor:pointer;font-size:14.5px;color:var(--ink)}
.cmdk-it .ic{width:20px;text-align:center;opacity:.6}
.cmdk-it .sub{margin-left:auto;font-size:12px;color:var(--ink-45);white-space:nowrap}
.cmdk-it.sel{background:var(--brand-bg);color:var(--brand)}
.cmdk-it.sel .sub{color:var(--clay)}
.cmdk-vide{padding:26px 16px;text-align:center;color:var(--ink-45);font-size:14px}
.cmdk-pied{display:flex;gap:16px;padding:9px var(--s5);border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-45)}
.cmdk-pied kbd{font-family:ui-monospace,Menlo,monospace;border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* ------------------------------------------------------------------ */
/*  9. PANNEAU APPARENCE                                               */
/* ------------------------------------------------------------------ */

.ap-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.ap-pal{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;cursor:pointer;background:var(--card-elevated);
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;text-align:left;font-family:inherit;
}
.ap-pal:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--rose)}
.ap-pal.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg)}
.ap-bandes{display:flex;height:40px;border-radius:var(--r-sm);overflow:hidden;margin-bottom:9px}
.ap-bandes i{flex:1}
.ap-nom{font-size:13.5px;font-weight:600;color:var(--ink)}
.ap-desc{font-size:11.5px;color:var(--ink-45);margin-top:1px}
.ap-seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:3px;gap:3px}
.ap-seg button{
  border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-45);
  padding:6px 15px;border-radius:var(--r-full);cursor:pointer;transition:background .2s var(--ease),color .2s;
}
.ap-seg button.on{background:var(--brand);color:var(--brand-ink)}
.ap-ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ap-ligne:last-child{border-bottom:none}
.ap-ligne .lb{font-size:14.5px;font-weight:600}
.ap-ligne .sb{font-size:12.5px;color:var(--ink-45);margin-top:2px;max-width:46ch}
.ap-couleurs{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ap-couleurs input[type=color]{width:46px;height:38px;border:1px solid var(--line);border-radius:var(--r-md);background:none;cursor:pointer;padding:3px}

/* ------------------------------------------------------------------ */
/*  10. MOTION                                                         */
/*      Tout est piloté par data-motion : demo | doux | off            */
/* ------------------------------------------------------------------ */

/* apparition en cascade — l'élément est caché puis révélé par motion.js */
.mv{opacity:0;transform:translateY(14px)}
.mv.vu{opacity:1;transform:none;transition:opacity .52s var(--ease),transform .52s var(--ease)}

/* transition de page */
.page-anim{animation:pageIn .34s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* barres qui se remplissent */
.jauge{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.jauge i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  transition:width .9s var(--ease)}

/* halo animé derrière un chiffre clé */
.halo{position:relative}
.halo::before{
  content:'';position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;
  border-radius:50%;background:radial-gradient(circle,var(--rose-bg),transparent 66%);
  animation:pulse 3.6s ease-in-out infinite;pointer-events:none;z-index:-1;
}
@keyframes pulse{0%,100%{transform:scale(.88);opacity:.55}50%{transform:scale(1.12);opacity:1}}

/* carte contenu qui se retourne */
.flip{perspective:900px}
.flip-in{position:relative;transition:transform .55s var(--ease);transform-style:preserve-3d}
.flip.on .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-b{position:absolute;inset:0;transform:rotateY(180deg);overflow:auto}

/* lueur qui suit le curseur sur les cartes cliquables */
.card.click{--mx:50%;--my:50%}
.card.click::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my), var(--gold-bg), transparent 62%);
  opacity:0;transition:opacity .3s;
}
.card.click:hover::after{opacity:1}

/* célébration de fin de cycle */
.fete{position:fixed;inset:0;pointer-events:none;z-index:130}
.fete i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation:tombe linear forwards}
@keyframes tombe{
  0%{transform:translateY(-20px) rotate(0)}
  100%{transform:translateY(104vh) rotate(720deg);opacity:.15}
}

/* pastille « en direct » */
.vivant{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-45)}
.vivant::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 var(--ok-bg);animation:battement 2.4s ease-out infinite}
@keyframes battement{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* motion doux : on garde les fondus, on coupe le démonstratif */
:root[data-motion="doux"] .halo::before,
:root[data-motion="doux"] .vivant::before{animation:none}
:root[data-motion="doux"] .card.click::after{display:none}
:root[data-motion="doux"] .nav-item:hover{transform:none}
:root[data-motion="doux"] .mv{transform:none}

/* motion coupé */
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
:root[data-motion="off"] .mv{opacity:1;transform:none}
:root[data-motion="off"] .card.click::after{display:none}

@media (prefers-reduced-motion:reduce){
  .mv{opacity:1 !important;transform:none !important}
  .halo::before,.vivant::before,.fete{animation:none !important;display:none}
  .page-anim{animation:none}
}

/* ------------------------------------------------------------------ */
/*  11. RESPONSIVE de la couche DA                                     */
/* ------------------------------------------------------------------ */

@media (max-width:1024px){
  .topbar{margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4);padding:11px var(--s5)}
  .topbar.reduit{padding:7px var(--s5)}
}
@media (max-width:860px){
  .t-display{font-size:36px}
  .hero .hello{font-size:32px}
  .main::before{width:300px;height:300px;right:-90px}
}
@media (max-width:560px){
  .t-display{font-size:30px}
  .hero .hello{font-size:27px}
  .kpi .k-val{font-size:31px}
  .topbar{margin:calc(var(--s5) * -1) calc(var(--s4) * -1) var(--s4);padding:10px var(--s4)}
  .topbar.reduit{padding:7px var(--s4)}
  .tb-fil{font-size:12px}
  .tb-btn .lb,.tb-btn kbd{display:none}
  .tb-btn{width:34px;padding:0;justify-content:center}
  .tb-fil > :first-child,.tb-fil > :nth-child(2){display:none}
  .tb-fil{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmdk{padding:6vh var(--s3) var(--s3)}
  .ap-grille{grid-template-columns:1fr 1fr}
}

/* ==================================================================== */
/*  12. MISE EN PAGE : plus d'air, plus rond, plus évident              */
/* ==================================================================== */

:root{
  --r-md:12px; --r-lg:20px; --r-xl:28px;
}
:root[data-densite="compact"]{ --r-lg:14px; --r-xl:20px; }

.card{padding:var(--s5) var(--s5)}
.wrap{max-width:1120px}
.main{padding-top:var(--s5)}

/* champs : plus hauts, plus doux, focus plus lisible */
.input,.textarea,.select{min-height:48px;border-radius:var(--r-md);font-size:15.5px;
  background:var(--card-elevated);transition:border-color .18s,box-shadow .18s,background .18s}
.input:focus,.textarea:focus,.select:focus{box-shadow:0 0 0 4px var(--brand-bg)}
.label{font-size:13.5px;letter-spacing:-.005em}
.btn{height:44px;border-radius:var(--r-full);font-weight:600;letter-spacing:-.005em}
.btn-sm{height:36px;border-radius:var(--r-full)}
.btn-lg{height:52px;border-radius:var(--r-full)}
.icon-btn{border-radius:var(--r-md)}
.chip{padding:10px var(--s4);font-size:14px}

/* ------------------------------------------------------- appel à l'action */
/* La grande carte d'action du haut de page : ce sur quoi on veut
   que la personne clique en arrivant. */
.action{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:var(--card-elevated);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s5);
  box-shadow:var(--sh-sm);transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
.action:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.action .ic{
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--brand-bg);color:var(--brand);font-size:19px;
}
.action .txt{flex:1 1 220px;min-width:0}
.action .ttl{font-weight:600;font-size:16px;letter-spacing:-.01em}
.action .sub{font-size:13.5px;color:var(--ink-45);margin-top:2px}
.action .btn{flex:0 0 auto}

/* ------------------------------------------------------- tuiles d'accès */
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.tuile{
  display:flex;flex-direction:column;gap:6px;text-align:left;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);color:var(--ink);cursor:pointer;font-family:inherit;font-size:inherit;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.tuile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--rose);text-decoration:none}
.tuile .ic{font-size:19px;color:var(--clay);opacity:.85}
.tuile .ttl{font-weight:600;font-size:15px;letter-spacing:-.01em}
.tuile .sub{font-size:12.5px;color:var(--ink-45);line-height:1.45}
.tuile .cpt{margin-left:auto;font-size:12px;font-weight:700;color:var(--brand)}

/* ------------------------------------------------------- états vides qui guident */
.empty{padding:var(--s6) var(--s5)}
.empty .ic{font-size:30px;opacity:.28;margin-bottom:var(--s3)}
.empty h3{font-variation-settings:var(--titre-axes);font-family:var(--f-titre);font-style:var(--titre-style);font-weight:var(--titre-graisse);
  font-size:22px;letter-spacing:var(--titre-serre);margin-bottom:6px}
.empty p{font-size:14.5px;line-height:1.55}

/* ------------------------------------------------------- pastille « proposé par elle » */
.par-elle{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;
  border-radius:var(--r-full);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--gold-bg);
  color:color-mix(in srgb, var(--gold) 52%, var(--ink));
}
:root[data-mode="nuit"] .par-elle{color:#E4C583}

/* ------------------------------------------------------- choix de police */
.pol-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s3)}
.pol{
  display:block;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);cursor:pointer;
  background:var(--card-elevated);text-align:left;font-family:inherit;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;
}
.pol:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--rose)}
.pol.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg)}
.pol.on:focus-visible,.ap-pal.on:focus-visible{
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.pol .ech{font-size:38px;line-height:1;color:var(--brand);margin-bottom:10px;display:block}
.pol .nom{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.pol .des{display:block;font-size:11.5px;color:var(--ink-45);margin-top:2px}

@media (max-width:560px){
  .card{padding:var(--s4)}
  /* les étiquettes passent au-dessus, le titre garde toute la largeur */
  .entete-idee{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .entete-idee > .row{justify-content:flex-start}
  .action{padding:var(--s4);gap:var(--s3)}
  .action .btn{width:100%}
  .tuiles{grid-template-columns:1fr 1fr;gap:10px}
  .tuile{padding:var(--s3)}
  .pol-grille{grid-template-columns:1fr 1fr}
}