/* =========================================================================
   Syllamir — système visuel neumorphique : socle (polices, palettes, jetons, briques, en-tête, champs)
   Tout est taillé dans la même matière (--fond) : les éléments ressortent (relief)
   ou s'enfoncent (creux) grâce à deux ombres, une claire et une sombre.
   Règle : ce qui est choisi ou appuyé est enfoncé ; ce qui se touche est en relief.
   Chaque palette ne définit que des couleurs ; tout le reste en découle.
   Mobile d'abord. Fichiers chargés dans cet ordre (la cascade en dépend) : base, forge, tableau,
   surcouches, ordinateur (écrans larges), legende (style maison Aurore / Crépuscule), accessibilite.
   ========================================================================= */

/* ---------- polices (dans fonts/, licence OFL, jeu latin) ---------- */
@font-face{font-family:'Space Grotesk';src:url(../fonts/space-grotesk.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/jetbrains-mono.woff2) format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'Cinzel';src:url(../fonts/cinzel.woff2) format('woff2');font-weight:400 900;font-display:swap}

/* ---------- palettes ---------- */
/* --cat-l / --cat-c : luminosité et saturation des couleurs de catégories (voir couleurTheme). */
/* Braise : charbon, cendre et feu. Fond presque noir, textes blanc chaud et cendre ; la chaleur (rouge, orange,
   jaune, blanc) est réservée à l'accent, aux liserés et à la lueur du bas (voir legende.css, « Braise »). */
:root,[data-palette="braise"]{color-scheme:dark;
  --fond:oklch(20.5% .006 45);--clair:oklch(26.5% .008 45);--sombre:oklch(13.5% .005 45);
  --text:oklch(96% .018 85);--text-2:oklch(83% .01 65);--text-3:oklch(68% .008 55);
  --accent:oklch(73% .18 52);--accent-texte:oklch(79% .15 66);--on-accent:oklch(18% .03 40);
  --danger:oklch(68% .19 27);--cat-l:78%;--cat-c:.1;
  --feu-rouge:oklch(50% .19 29);--feu-orange:oklch(70% .19 50);--feu-jaune:oklch(87% .15 90);--feu-blanc:oklch(97% .035 95);
  --lueur-bas:oklch(44% .17 35 / .5);--lueur-haut:oklch(32% .004 45 / .55);--lueur-nom:oklch(72% .18 52 / .45)}
[data-palette="nuit"]{color-scheme:dark;
  --fond:oklch(26% .02 255);--clair:oklch(32% .022 255);--sombre:oklch(18% .018 255);
  --text:oklch(95% .01 250);--text-2:oklch(82% .02 250);--text-3:oklch(69% .025 250);
  --accent:oklch(79% .12 205);--accent-texte:oklch(81% .11 205);--on-accent:oklch(21% .04 230);
  --danger:oklch(73% .15 20);--cat-l:79%;--cat-c:.1}
[data-palette="amethyste"]{color-scheme:dark;
  --fond:oklch(26% .025 300);--clair:oklch(32% .028 300);--sombre:oklch(18% .022 300);
  --text:oklch(95% .012 310);--text-2:oklch(82% .022 310);--text-3:oklch(69% .03 310);
  --accent:oklch(77% .13 345);--accent-texte:oklch(79% .12 345);--on-accent:oklch(21% .05 340);
  --danger:oklch(73% .15 25);--cat-l:79%;--cat-c:.1}
[data-palette="sable"]{color-scheme:light;
  --fond:oklch(91% .014 75);--clair:oklch(98.5% .006 80);--sombre:oklch(77% .024 70);
  --text:oklch(27% .02 55);--text-2:oklch(37% .02 55);--text-3:oklch(47% .02 60);
  --accent:oklch(57% .15 42);--accent-texte:oklch(49% .15 42);--on-accent:oklch(99% .004 80);
  --danger:oklch(51% .18 25);--cat-l:50%;--cat-c:.12}
[data-palette="brume"]{color-scheme:light;
  --fond:oklch(91% .012 250);--clair:oklch(98.5% .006 250);--sombre:oklch(77% .025 255);
  --text:oklch(27% .03 260);--text-2:oklch(37% .03 260);--text-3:oklch(47% .03 260);
  --accent:oklch(54% .16 268);--accent-texte:oklch(47% .16 268);--on-accent:oklch(99% .004 250);
  --danger:oklch(51% .18 25);--cat-l:50%;--cat-c:.12}
[data-palette="sauge"]{color-scheme:light;
  --fond:oklch(91% .016 150);--clair:oklch(98.5% .008 150);--sombre:oklch(77% .028 150);
  --text:oklch(26% .025 160);--text-2:oklch(36% .025 160);--text-3:oklch(46% .025 160);
  --accent:oklch(54% .12 160);--accent-texte:oklch(45% .11 160);--on-accent:oklch(99% .004 150);
  --danger:oklch(51% .18 25);--cat-l:49%;--cat-c:.12}
/* Sans JavaScript, la page suit au moins le thème du système. */
@media (prefers-color-scheme:light){
  :root:not([data-palette]){color-scheme:light;
    --fond:oklch(91% .014 75);--clair:oklch(98.5% .006 80);--sombre:oklch(77% .024 70);
    --text:oklch(27% .02 55);--text-2:oklch(37% .02 55);--text-3:oklch(47% .02 60);
    --accent:oklch(57% .15 42);--accent-texte:oklch(49% .15 42);--on-accent:oklch(99% .004 80);
    --danger:oklch(51% .18 25);--cat-l:50%;--cat-c:.12}
}

/* Étoile de l'icône d'onglet : plus vive que l'accent sur les palettes claires, pour ressortir sur le fond foncé de l'icône. */
:root{--icone-etoile:var(--accent)}
[data-palette="sable"]{--icone-etoile:oklch(80% .12 52)}
[data-palette="brume"]{--icone-etoile:oklch(80% .11 265)}
[data-palette="sauge"]{--icone-etoile:oklch(82% .13 155)}
[data-palette="aurore"]{--icone-etoile:oklch(84% .14 86)}
[data-palette="crepuscule"]{--icone-etoile:oklch(86% .14 88)}

/* ---------- jetons dérivés ---------- */
/* Recalculés sur chaque élément qui porte une palette : les aperçus du menu ont leurs vraies ombres. */
:root,[data-palette]{
  --relief:6px 6px 14px var(--sombre),-6px -6px 14px var(--clair);
  --relief-sm:3px 3px 7px var(--sombre),-3px -3px 7px var(--clair);
  --creux:inset 4px 4px 9px var(--sombre),inset -4px -4px 9px var(--clair);
  --creux-sm:inset 2px 2px 5px var(--sombre),inset -2px -2px 5px var(--clair);
  --ligne:color-mix(in oklch,var(--sombre) 55%,var(--fond));
  --accent-soft:color-mix(in oklch,var(--accent) 16%,transparent);
  --danger-soft:color-mix(in oklch,var(--danger) 14%,transparent);
}
:root{
  /* typo */
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* formes */
  --r-sm:10px;--r-md:14px;--r-lg:22px;--r-pill:999px;
  /* mise en page */
  --barre:calc(68px + env(safe-area-inset-bottom));
  --gout:14px;
  /* tableau */
  --cw:92px;--ch:34px;--rw:58px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--fond);
  color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.45;min-height:100vh;min-height:100dvh; /* dvh : hauteur visible, barres du navigateur comprises (Chrome iPhone) */
  padding-bottom:var(--barre);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  transition:background .25s,color .25s;
}
button,input,select{font:inherit;color:inherit}
button,summary,label.mini{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--accent-soft)}

.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.plein{fill:currentColor}

/* ---------- briques neumorphiques ---------- */
/* Bordure transparente : invisible ici, mais redessinée en mode contraste élevé de Windows. */
.card,.mini,.tchip,.vchip,.fchip,.pchip,.btn-rond,.part,.champ,.reglages,.grille,.seg button,
.onglets button,.langues button,.palettes>summary,.aide-btn,.pal-choix,.badge,.toast,.alerte{border:1px solid transparent}
.mini,.tchip,.vchip,.fchip,.pchip,.btn-rond,.part,.seg button,.onglets button,.langues button,.palettes>summary,.aide-btn,.pal-choix{
  background:var(--fond);box-shadow:var(--relief-sm);transition:box-shadow .15s,color .15s,transform .1s}
.mini:active,.tchip:active,.vchip:active,.btn-rond:active,.part:active,.seg button:active,.pal-choix:active{box-shadow:var(--creux-sm)}

/* ---------- en-tête ---------- */
.top{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px var(--gout) 12px;max-width:1600px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1}
.logo>.ico{color:var(--accent);width:34px;height:34px;padding:7px;border-radius:11px;fill:var(--accent);stroke:none;box-shadow:var(--relief-sm)}
.logo span span{color:var(--text-3);font-weight:500}
.onglets{display:none;gap:10px}
.onglets button,.langues button{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:7px 16px;font-weight:500;color:var(--text-2)}
.onglets button[aria-pressed="true"],.langues button[aria-pressed="true"]{box-shadow:var(--creux-sm);color:var(--accent-texte);font-weight:600}
.stats{display:none;margin:0 0 0 auto;font-size:12px;color:var(--text-3);text-align:right;line-height:1.5}
.stats b{color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums}
.reglages-haut{display:flex;align-items:center;gap:10px;margin-left:auto}
.langues{display:inline-flex;gap:6px}
.langues button{padding:5px 11px;font-size:12px;font-weight:600;letter-spacing:.04em;min-height:38px}

/* Choix de palette : menu déroulant, chaque choix montre ses propres couleurs. */
.palettes{position:relative}
.aide-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--text-2);font-weight:700;font-size:16px;padding:0}
.palettes>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--text-2)}
.palettes>summary::-webkit-details-marker{display:none}
.palettes[open]>summary{box-shadow:var(--creux-sm);color:var(--accent-texte)}
.pal-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:70;width:min(300px,calc(100vw - 28px));background:var(--fond);border-radius:var(--r-lg);box-shadow:var(--relief),0 18px 40px color-mix(in oklch,var(--sombre) 60%,transparent);padding:14px}
.pal-menu h4{margin:12px 0 8px;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.pal-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pal-choix{display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:var(--r-md);padding:10px 4px 8px;font-size:12px;color:var(--text-2);min-height:0}
.pal-choix[aria-pressed="true"]{box-shadow:var(--creux-sm);color:var(--accent-texte);font-weight:600}
.pal-choix.auto{flex-direction:row;justify-content:center;width:100%;padding:9px;margin-top:10px}
.pal-autres{margin-top:12px}
.pal-autres>summary{cursor:pointer;font-size:12px;color:var(--text-2);padding:6px 2px;min-height:32px;display:flex;align-items:center;gap:6px}
.pal-autres>summary::before{content:"▸";transition:transform .15s}
.pal-autres[open]>summary::before{transform:rotate(90deg)}
.pal-autres[open]>summary{color:var(--accent-texte)}
/* L'aperçu porte data-palette : il prend les couleurs de la palette qu'il montre. */
.apercu{width:44px;height:30px;border-radius:9px;background:var(--fond);box-shadow:var(--relief-sm);display:flex;align-items:center;justify-content:center}
.apercu::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent)}

/* ---------- mise en page ---------- */
/* Téléphone (par défaut) : une zone à la fois, choisie dans la barre du bas. */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start;padding:4px var(--gout) 14px;max-width:1600px;margin:0 auto}
body:not([data-vue="themes"]) .zone-themes,
body:not([data-vue="favoris"]) .zone-favoris,
body:not([data-vue="forge"]) .zone-forge,
body:not([data-vue="tableau"]) .zone-tableau{display:none}
/* Téléphone : l'en-tête reste figé en haut, la zone choisie se colle dessous. */
@media (max-width:900px){
  .top{position:sticky;top:0;z-index:50;background:var(--fond);padding-top:max(14px,env(safe-area-inset-top))}
  .layout{padding-top:0}
}

.card{background:var(--fond);border-radius:var(--r-lg);padding:18px;box-shadow:var(--relief)}
h2{margin:0 0 16px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:600;display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
h3{margin:18px 0 10px;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;display:flex;gap:8px;align-items:center}
.groupe h3{margin-top:0}
/* « Tout / Aucun » à droite du titre du groupe, plutôt que sur une ligne de puces. */
.titre-groupe{justify-content:space-between}
.titre-groupe .mini.petit{margin-left:0}
.groupe+.groupe{margin-top:22px;padding-top:20px;border-top:1px solid var(--ligne)}
.hint{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.note{color:var(--text-3);font-size:13px;margin:0 0 10px;line-height:1.5}
.vide{color:var(--text-3);font-size:14px;line-height:1.55}
.vide b{color:var(--text-2);font-weight:600}

.ligne{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ligne+.ligne{margin-top:12px}
.lbl{font-size:13px;color:var(--text-2);min-width:96px}
.chips{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- champs et boutons ---------- */
.champ{flex:1;min-width:90px;background:var(--fond);box-shadow:var(--creux-sm);border-radius:var(--r-sm);padding:10px 13px;outline:none;font-family:var(--mono);font-size:16px;transition:box-shadow .15s} /* 16px : pas de zoom auto sur iOS */
.champ::placeholder{color:var(--text-3)}
.champ:focus{box-shadow:var(--creux-sm),0 0 0 2px var(--accent)}
.champ.court{flex:0 0 auto;min-width:0;font-family:var(--sans)}
select.champ{font-family:var(--sans)}

.mini{border-radius:var(--r-sm);padding:7px 13px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;color:var(--text-2)}
.mini:hover{color:var(--text)}
.mini.danger:hover{color:var(--danger)}
.mini.x{padding:6px 11px}
.mini.petit{padding:3px 11px;font-size:12px;min-height:38px;margin-left:auto;text-transform:none;letter-spacing:0}

/* Puces de thème : pastille vide = non choisi, pleine et enfoncée = choisi, à moitié = en partie. */
.tchip{border-radius:var(--r-pill);padding:7px 13px 7px 11px;font-size:13px;display:inline-flex;align-items:center;gap:8px;color:var(--text-2)}
.tchip::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--tc);box-sizing:border-box}
.tchip:hover{color:var(--text)}
.tchip[aria-pressed="true"]{box-shadow:var(--creux-sm);color:var(--text)}
.tchip[aria-pressed="true"]::before{background:var(--tc)}
.tchip[aria-pressed="mixed"]{color:var(--text)}
.tchip[aria-pressed="mixed"]::before{background:linear-gradient(90deg,var(--tc) 50%,transparent 50%)}
.tchip small{color:var(--text-3);font-size:11px;font-variant-numeric:tabular-nums}
.tchip.cat{font-weight:600;padding:9px 15px 9px 13px}

.seg{display:inline-flex;flex-wrap:wrap;gap:8px}
.seg button{border-radius:var(--r-sm);padding:5px 9px;font-family:var(--mono);font-size:13px;min-width:34px;color:var(--text-2)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{box-shadow:var(--creux-sm);color:var(--accent-texte);font-weight:700}

.pchip{font-family:var(--mono);font-size:13px;border-radius:var(--r-sm);padding:2px 2px 2px 11px;display:inline-flex;align-items:center;gap:2px;color:var(--text)}
.pchip button,.fchip .rm{background:transparent;border:0;color:var(--text-3);padding:2px 8px;font-size:16px;line-height:1;border-radius:8px}
.pchip button:hover,.fchip .rm:hover{color:var(--danger);background:var(--danger-soft)}

.affiner{margin-top:14px}
.perso>summary{list-style:none;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:4px 0;min-height:38px}
.perso>summary::-webkit-details-marker{display:none}
.perso>summary:hover{color:var(--text-2)}
.perso[open]>summary{margin-bottom:10px}
.perso .chips{margin-top:12px}
.sous-bloc{margin:16px 0 8px;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.affiner summary,.exclus summary{display:flex;align-items:center;gap:6px;list-style:none;font-size:13px;color:var(--text-3);padding:6px 0}
.affiner summary::-webkit-details-marker,.exclus summary::-webkit-details-marker,.reglages summary::-webkit-details-marker{display:none}
.affiner summary:hover,.exclus summary:hover{color:var(--text-2)}
.chevron{transition:transform .2s;width:14px;height:14px}
details[open]>summary .chevron{transform:rotate(90deg)}
.sous{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.sous-titre{width:100%;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}