/* Styles Césium — toutes les couleurs/formes viennent de css/themes.css */

* { box-sizing: border-box; }

/* Icônes Lucide inlinées par js/icones.js : elles suivent currentColor et la
   ligne de base du texte qui les entoure. */
svg.ic { flex: none; vertical-align: -.15em; }

body {
  margin: 0;
  width: 380px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  background: var(--bg);
  color: var(--ink);
}

body.panel { width: auto; min-width: 300px; }

/* En large (appli web et bureau, posée par appliquerDisposition), le corps
   passe à 16 px et les titres, chiffres clés et contrôles prennent de l'air. */
body.large {
  font-size: var(--fs-body);
  --fs-titre: 24px;
  --fs-stat: 36px;
  --h-control: 44px;
}

/* ==========================================================================
   Primitives du kit — boutons, segmented, cartes, titres, chiffres clés
   ==========================================================================
   Les anciens sélecteurs (button.primary, .tool-btn, button.copy…) sont des
   alias des nouvelles classes : même rendu, aucun id ni classe à changer dans
   le HTML, les tests de structure ne bougent pas. */

.btn, button.primary, button.ghost, .tool-btn, button.copy, .menu-save button,
.astuce-onglets button, .ub-cta, .kudos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-control);
  padding: 0 var(--sp-5);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
  line-height: 1;
  white-space: nowrap;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active, button.primary:active, button.ghost:active, .tool-btn:active, button.copy:active,
.menu-save button:active, .astuce-onglets button:active, .ub-cta:active, .kudos-btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg, button.primary svg, button.ghost svg, button.copy svg { width: 18px; height: 18px; }

/* Primaire : le rouge, une fois par écran. */
.btn--primaire, button.primary, .ub-cta {
  background: var(--cta-bg);
  color: var(--cta-ink);
  border-color: transparent;
}
.btn--primaire:hover, button.primary:hover, .ub-cta:hover { filter: brightness(1.06); }

/* Secondaire : un filet d'encre qui s'inverse au survol. */
.btn--secondaire, button.ghost, .tool-btn, button.copy, .menu-save button, .astuce-onglets button, .kudos-btn {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--secondaire:hover, button.ghost:hover, .tool-btn:hover, button.copy:hover, .menu-save button:hover,
.astuce-onglets button:hover, .kudos-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); }

/* Tertiaire : texte seul. */
.btn--ghost { color: var(--muted); padding: 0 var(--sp-3); }
.btn--ghost:hover { color: var(--ink); background: var(--chip-bg); }

/* Petit : les outils d'une ligne, les puces d'action. */
.btn--sm, .tool-btn, button.copy, .menu-save button, .astuce-onglets button, .ub-cta, .kudos-btn {
  height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
}
.btn--sm svg, .tool-btn svg, button.copy svg, .menu-save button svg, .kudos-btn svg { width: 16px; height: 16px; }
.btn--bloc { width: 100%; }
button.primary, button.copy { flex: 1; }

/* Segmented : des rectangles accolés, le choix courant en encre pleine. */
.segment {
  display: inline-flex;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: none;
}
.segment > button {
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  white-space: nowrap;
  height: calc(var(--h-control) - 2 * var(--border-w));
  padding: 0 var(--sp-3);
  border: 0;
  border-left: var(--border-w) solid var(--line);
  background: var(--input-bg);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.segment > button:first-child { border-left: 0; }
.segment > button:hover { color: var(--ink); }
.segment > button.active, .segment > button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Carte : une surface sur le gris chaud, sans filet ni ombre dans les deux
   thèmes Césium (voir --carte-filet dans themes.css). */
.carte {
  background: var(--surface);
  border: var(--carte-filet, var(--border-w)) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
body.large .carte { padding: var(--sp-5); }
.carte--mise-en-avant { position: relative; }
.carte--mise-en-avant::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}

/* Texte : eyebrow (seules capitales admises), titre en casse phrase, chiffre clé. */
.eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.titre { margin: 0; font-size: var(--fs-titre); font-weight: var(--w-bold); line-height: 1.2; }
.stat {
  font-size: var(--fs-stat);
  font-weight: var(--w-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* Le filet rouge de 64 × 3 du kit : un par espace, sur son titre principal. */
.filet::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: var(--sp-3);
  background: var(--accent);
}

/* ---- Header ---- */

/* min-height et non height : le bloc Window Controls Overlay (plus bas) pose
   min-height: env(titlebar-area-height) et doit rester le seul à décider. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-4);
  background: var(--topbar-bg);
  color: var(--topbar-ink);
  border-bottom: var(--barre-filet, calc(var(--border-w) + 1px)) solid var(--line);
  /* La barre inverse la page : son fond est l'encre. On redéfinit --bg
     localement pour que les cases du signe suivent ce fond-là — sans quoi
     elles prendraient celui de la page et le carré deviendrait illisible. */
  --bg: var(--topbar-bg);
}

/* `.marque` ne porte plus un mot mais le verrou de la charte : l'encre du
   SVG suit currentColor, d'où la couleur conservée. */
.topbar h1.marque {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--topbar-ink);
}

.topbar h1.marque .logo {
  display: block;
  height: 22px;
  width: auto;
}
body.large .topbar { min-height: 56px; }
body.large .topbar h1.marque .logo { height: 24px; }

.topbar-actions { display: flex; gap: var(--sp-1); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--topbar-ink);
  opacity: .8;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.icon-btn:hover { opacity: 1; background: color-mix(in srgb, var(--topbar-ink) 12%, transparent); }
.icon-btn svg { width: 18px; height: 18px; display: block; }

body.panel #open-panel { display: none; }

/* Le score dans la barre : trois chiffres (niveau, points, série) et deux
   icônes, sur un voile de l'encre de la barre — lisible dans les neuf peaux. */
.game-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* « Nv 6 · 1 849 · 25 » : jamais de césure des scores */
  border: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--topbar-ink) 10%, transparent);
  color: var(--topbar-ink);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.game-status span { display: inline-flex; align-items: center; gap: 3px; }
.game-status:hover { background: color-mix(in srgb, var(--topbar-ink) 18%, transparent); }
.game-status:active { transform: scale(.98); }

/* Lien de retour des options (visible hors extension seulement) */
.retour-app {
  display: inline-block;
  margin: 10px 14px 0;
  font-size: 13px;
  font-weight: var(--w-heavy);
  color: var(--accent);
  text-decoration: none;
}
.retour-app:hover { text-decoration: underline; }

/* ---- Barre d'onglets ---- */

/* Uniquement des jetons de thème : la barre doit se relire dans les neuf peaux.
   Collante : dans le popup Chrome (600 px de haut au maximum), les onglets restent
   atteignables quand la liste du jour a poussé la page.
   z-index 5 < toast (10) < menu Modèles (20) : le menu passe toujours par-dessus. */
.onglets {
  display: flex;
  gap: 0;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Onglets du kit (.pn-tabs) : pas de boîte, l'onglet choisi se souligne en
   rouge. Icône au-dessus du libellé en compact (quatre onglets dans 380 px),
   à côté en large (body.large). Icônes Lucide en currentColor : elles suivent
   la peau. */
.onglet {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: inherit;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  white-space: nowrap;            /* « Progression » ne se coupe jamais en deux */
  padding: var(--sp-2) var(--sp-1) 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: calc(-1 * var(--border-w)); /* le soulignement couvre le filet de la barre */
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.onglet svg { width: 16px; height: 16px; flex: none; }
.onglet:hover { color: var(--ink); }
.onglet[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
/* « il s'est passé quelque chose ici » : le panneau ne bascule JAMAIS tout seul,
   l'utilisateur est peut-être en train de taper une ligne. */
.onglet.a-du-neuf::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Une section apparaît en fondu quand on l'ouvre : l'animation se rejoue à
   chaque fois que .hidden tombe. */
.panneau { display: block; animation: panneau-entree 160ms var(--ease-out); }
@keyframes panneau-entree {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Bandeau de migration, montré une seule fois */
/* Bandeaux d'information (astuce, rappels, mise à jour) : un voile d'encre,
   sans filet ni couleur d'état — ils renseignent, ils n'alertent pas. */
.astuce-onglets {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.astuce-onglets > span { flex: 1; min-width: 0; }
.astuce-onglets svg { vertical-align: -3px; color: var(--muted); }

/* ---- Quête du jour ---- */

/* ---- Bloc Défis repliable ---- */

.defis { margin: var(--sp-3) var(--sp-4) 0; }
.defis-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
  color: var(--ink);
  background: var(--surface);
  border: var(--carte-filet, var(--border-w)) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  text-align: left;
}
.defis-bar:hover .defis-chevron { color: var(--ink); }
.defis-lead { white-space: nowrap; }
.defis-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--w-bold); color: var(--muted); font-size: var(--fs-xs); }
.defis-chevron { display: inline-flex; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); color: var(--muted); }
.defis-bar[aria-expanded="true"] .defis-chevron { transform: rotate(90deg); }
.defis-body { margin-top: var(--sp-2); }

.quest {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: var(--carte-filet, var(--border-w)) solid var(--line);
  border-radius: var(--radius);
}
.quest.done { opacity: .75; }
.quest-emoji { display: inline-flex; color: var(--muted); }
.quest.done .quest-emoji { color: var(--success-ink); }
.quest-main { flex: 1; min-width: 0; }
.quest-title {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.quest-label { font-size: var(--fs-sm); font-weight: var(--w-bold); }
.quest-pts {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  color: var(--ink);
  background: var(--chip-bg);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  padding: 3px 8px;
}
.quest-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.chain-dots { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.chain-dots i { width: 7px; height: 7px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.chain-dots i.plein { background: var(--ink); }
.week-theme {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  color: var(--accent);
  margin-top: 2px;
}
.quest.challenge { margin-top: var(--sp-2); }

/* ---- Ligne résumée ---- */


/* Tâches fréquentes : une seule ligne, qui DÉFILE au lieu de s'enrouler. Le
   panneau tient en une page sans ascenseur — une bande qui grandit casserait
   cette promesse. */
.frequentes {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--sp-3);
  padding-bottom: 1px;
}
.frequentes::-webkit-scrollbar { display: none; }
.freq {
  display: inline-flex;
  align-items: center;
  height: 32px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  padding: 0 var(--sp-3);
  max-width: 160px;
  transition: border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.freq:hover { border-color: var(--ink); }

/* Ligne résumée : même grammaire que .defis-bar — pastille à
   bordure pointillée qui devient pleine à l'ouverture. */
.meta-row { align-items: stretch; }
.meta-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  text-align: left;
  padding: var(--sp-2) 0;
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.meta-toggle:hover { color: var(--ink); border-bottom-style: solid; }
.meta-toggle[aria-expanded="true"] { border-style: solid; }
.meta-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-edit { display: inline-flex; color: var(--muted); }

/* ---- Menu Modèles ---- */

.menu { position: relative; }
.menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 210px;
  background: var(--card);
  border: var(--border-w) solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-item {
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--w-bold);
  text-align: left;
  padding: 6px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.menu-item:hover { background: var(--accent-soft); }
.menu-item .hintline { display: block; font-size: var(--fs-eyebrow); color: var(--muted); font-weight: var(--w-bold); }
.menu-sep { border-top: 1px dashed var(--line); margin: 2px 4px; }
.menu-save { display: flex; gap: var(--sp-2); padding: 0; }
.menu-save input { flex: 1; min-width: 0; }
.menu-empty { font-size: 11.5px; color: var(--muted); padding: 4px 9px; }

/* ---- Suggestion intelligente ---- */

.suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  color: var(--ink);
  background: none;
  border: 1px dashed var(--line);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-out);
}
.suggestion:hover { border-style: solid; border-color: var(--ink); }
.sug-emoji, .sug-plus { display: inline-flex; color: var(--muted); }
.sug-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 📦 Bannière de mise à jour (tokens de thème uniquement) ---- */

.update-banner {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font-size: var(--fs-xs);
}
/* Seul cas où le bandeau porte l'action principale : une mise à jour obligatoire. */
.update-banner--required { border-left: 3px solid var(--accent); }
.ub-row { display: flex; align-items: center; gap: var(--sp-2); }
.ub-icon { display: inline-flex; color: var(--muted); }
.ub-text { flex: 1; min-width: 0; font-weight: var(--w-bold); }
.ub-later { padding: 4px 6px; font: inherit; font-size: var(--fs-xs); background: transparent; color: var(--muted); border: 0; cursor: pointer; }
.ub-later:hover { color: var(--ink); text-decoration: underline; }
.ub-notes { margin: 6px 0 0 24px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.ub-help { margin: 6px 0 0 24px; }
.ub-help summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.ub-steps { margin: 6px 0 0; padding-left: 18px; }
.ub-steps li { margin: 3px 0; }
.ub-steps code { background: var(--chip-bg); color: var(--chip-ink); padding: 1px 4px; border-radius: var(--radius-sm); }

/* ---- Outils du jour + objectif perso ---- */

/* flex-wrap : en largeur étroite (panneau latéral), les outils passent à la ligne
   en BLOCS entiers — jamais de césure au milieu d'un libellé ou d'un « 3 h » */
.day-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* .tool-btn : voir les primitives (.btn--secondaire.btn--sm). */

.goal-zone { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.goal-track {
  flex: 1;
  height: 6px;
  border-radius: 0;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.goal-fill {
  height: 100%;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  border-radius: 0;
  transition: width var(--dur-slow) var(--ease-out);
}
.goal-fill.done { background: var(--accent); }
.goal-label { font-size: var(--fs-xs); font-weight: var(--w-bold); color: var(--muted); white-space: nowrap; }

/* ---- Formulaire ---- */

/* ---- Carte d'accueil ---- */
.accueil {
  --bg: var(--surface); /* les cases du signe lisent --bg : la surface, pas la page */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  border-bottom: var(--border-w) solid var(--line);
}
body.large .accueil { border-bottom: 0; }
.accueil-logo { width: 116px; height: auto; color: var(--ink); margin-bottom: var(--sp-1); }
.accueil-titre { font-size: 24px; }
.accueil-texte { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.accueil-form { display: grid; gap: var(--sp-2); width: 100%; }
.accueil-form .btn--sm { justify-self: start; }
.accueil-form .accueil-texte:empty { display: none; }
/* Tant que la carte guide, le rouge est à elle : Ajouter devient secondaire. */
body.accueil-visible #submit-btn { background: transparent; color: var(--ink); border-color: var(--ink); }
body.accueil-visible #submit-btn:hover { background: var(--ink); color: var(--bg); filter: none; }

#entry-form {
  background: var(--surface);
  padding: var(--sp-4);
  border-bottom: var(--border-w) solid var(--line);
}
#task { font-size: var(--fs-body); }

.row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.row:last-child { margin-bottom: 0; }

.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field.grow { flex: 1; }
.field > span {
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  color: var(--muted);
}
.field > span em { font-style: normal; text-transform: none; font-weight: 400; }

input, select, textarea {
  font: inherit;
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--ink);
  min-width: 0;
  transition: border-color var(--dur-base) var(--ease-out);
}
/* Les contrôles d'une ligne ont la hauteur du kit ; cases et fichiers non.
   Spécificité volontairement basse : une classe (.feuille-editeur) doit
   pouvoir la contredire. */
input, select {
  height: var(--h-control);
  padding-top: 0;
  padding-bottom: 0;
}
input[type="checkbox"], input[type="radio"], input[type="file"] { height: auto; padding: 0; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Focus clavier visible sur tous les boutons (cohérent sur les 7 thèmes) */
.defis-bar:focus-visible, .quick:focus-visible,
.onglet:focus-visible, .meta-toggle:focus-visible,
.tool-btn:focus-visible, .suggestion:focus-visible, .icon-btn:focus-visible,
.game-status:focus-visible, button.primary:focus-visible, button.ghost:focus-visible,
button.copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#date { width: 128px; }
#wp { width: 64px; }
#client { width: 90px; }
#time { width: 88px; }

.time-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.time-readout { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: var(--w-bold); color: var(--muted); white-space: nowrap; }
.time-readout.warn { color: var(--alerte); }
/* .quick : les quatre durées forment un segmented (.segment, primitives). */

.form-actions { margin-top: 12px; }

/* button.primary et button.ghost : voir les primitives (.btn--primaire, .btn--secondaire). */

/* ---- Liste du jour ---- */

.day { padding: var(--sp-4); background: var(--surface); }
.day-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.jour-tete { min-width: 0; }
.jour-stat { margin: 0; display: flex; align-items: baseline; gap: var(--sp-1); white-space: nowrap; }
.jour-sur { font-size: var(--fs-xs); color: var(--muted); }
.day-header h2 { margin: 0; } /* casse phrase : jamais de titre en capitales (charte) */
/* La jauge du jour (renderJauge, js/app.js) : chaque saisie y pose un segment
   à l'échelle des 7 h, en encre qui s'éclaircit ; journée faite = rouge. */
.jour-jauge {
  display: flex;
  gap: 1px;
  height: 6px;
  margin: 0 0 var(--sp-3);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
.jauge-seg {
  flex: 0 0 var(--w);
  background: color-mix(in srgb, var(--ink) var(--i), transparent);
  transition: flex-basis var(--dur-slow) var(--ease-out);
}
.jour-jauge.plein .jauge-seg { background: var(--accent); }

.entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.entry:last-child { border-bottom: 0; }
.entry.copied { opacity: .55; }
.entry--neuve { animation: fondu var(--dur-base) var(--ease-out); }
@keyframes fondu {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.entry-main { flex: 1; min-width: 0; }
.entry-task {
  font-weight: var(--w-bold);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-time { font-weight: var(--w-bold); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

.entry-actions { display: flex; gap: var(--sp-1); }
.entry-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.entry-actions button:hover { background: var(--chip-bg); color: var(--ink); }
.entry-actions .delete:hover { color: var(--danger); }
/* En large, les actions d'une ligne n'apparaissent qu'au survol ou au clavier. */
body.large .entry-actions { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
body.large .entry:hover .entry-actions,
body.large .entry:focus-within .entry-actions { opacity: 1; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin: var(--sp-5) 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}
.empty b { color: var(--ink); font-weight: var(--w-bold); font-size: var(--fs-sm); }
.empty svg { color: var(--fg-subtle); margin-bottom: var(--sp-1); }

/* ---- Depuis une capture d'agenda ---- */

/* La liste à valider prend la place du formulaire le temps de la revue : un seul
   geste principal à l'écran, et vingt lignes qui démarrent en haut du panneau. */
body.agenda-ouverte #entry-form { display: none; }

.agenda { padding: 12px 14px; border-top: var(--border-w) solid var(--line); }
.agenda-semaine,
.agenda-duree,
.agenda-titre,
.agenda-selects select {
  font: inherit;
  border: var(--border-w) solid var(--line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
}
.agenda-semaine { font-size: 12px; padding: 4px 6px; max-width: 100%; }
.agenda-etat { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.agenda-etat.agenda-etat--erreur { color: var(--accent); font-weight: var(--w-bold); }

.agenda-ligne { align-items: flex-start; gap: 8px; }
.agenda-ligne.agenda-ligne--ecartee { opacity: .55; }
.agenda-coche { margin-top: 4px; flex: none; accent-color: var(--accent); }
.agenda-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.agenda-rangee { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agenda-quand { font-size: 12px; color: var(--muted); white-space: nowrap; }
.agenda-duree { width: 44px; font-size: 13px; font-weight: var(--w-heavy); padding: 2px 4px; text-align: right; }
.agenda-titre { width: 100%; font-size: 13px; padding: 4px 6px; }
/* l'écho des hachures d'Outlook : une réunion provisoire se voit avant d'être lue */
.agenda-titre.agenda-titre--provisoire { border-style: dashed; }
.agenda-etiquette {
  font-size: 11px;
  color: var(--muted);
  border: var(--border-w) solid var(--line);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
}
.agenda-selects { display: flex; gap: 4px; flex-wrap: wrap; }
.agenda-selects select { flex: 1; min-width: 80px; font-size: 12px; padding: 3px 4px; }

/* rien à ajouter = rien à cliquer : le bouton le dit, sans changer de couleur */
.agenda .primary:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Barre de copie ---- */

.copybar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface);
  border-top: var(--border-w) solid var(--line);
  position: sticky;
  bottom: 0;
}
.copy-hint { margin: 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.copy-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* button.copy : voir les primitives (.btn--secondaire) — plus de vert : l'état
   ne décore pas, et l'action principale de l'écran reste « Ajouter ». */

/* Une pile de messages (showToast, js/app.js) : le conteneur est fixe, chaque
   message glisse de 8 px vers le haut à son arrivée et repart seul. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  z-index: 10;
  max-width: 90%;
  pointer-events: none;
}
.toast-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: auto;
  background: var(--ink);
  color: var(--bg);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  box-shadow: var(--shadow-pop);
  animation: toast-entree var(--dur-base) var(--ease-out);
}
@keyframes toast-entree {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.hidden { display: none !important; }

/* ---- Particules (étoiles, confetti, points) ---- */

.star-particle {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  animation: star-fly .8s ease-out forwards;
}
@keyframes star-fly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(var(--s)); opacity: 0; }
}

.float-points {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  transform: translateX(-50%);
  font-weight: var(--w-heavy);
  font-size: 16px;
  color: var(--accent);
  text-shadow: var(--glow, 0 1px 0 var(--bg));
  animation: float-up 1.1s ease-out forwards;
}
@keyframes float-up {
  from { opacity: 1; margin-top: 0; }
  to   { opacity: 0; margin-top: -46px; }
}

.confetti-particle {
  position: fixed;
  z-index: 99;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  animation: confetti-fall 1.2s ease-in forwards;
}
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(var(--fall)) rotate(var(--spin)); opacity: .3; }
}

/* Règle du kit (base.css) : sous « réduire les animations », tout arrive à son
   état final d'un coup — transitions comprises. Les particules, elles, ne
   s'affichent pas du tout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .star-particle, .float-points, .confetti-particle { display: none; }
}

/* ---- Sprites pixel art (thème Pixel) ---- */

.spr-wrap {
  position: fixed;
  z-index: 101;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.spr-frame { image-rendering: pixelated; }

/* Rendu net + cadre 8-bit pour le thème Pixel */
body[data-theme="pixel"] img { image-rendering: pixelated; }
body[data-theme="pixel"] .badge-card.unlocked {
  border-image: url(../assets/pixel/frame_yellow.png) 16 / 14px repeat;
}
body[data-theme="pixel"] .quest {
  border-image: url(../assets/pixel/frame_blue.png) 16 fill / 14px repeat;
}
@media (prefers-reduced-motion: reduce) {
  .spr-wrap { display: none; }
}

/* ---- Page badges ---- */



/* Les chiffres clés de la progression : trois tuiles (points, série, badges). */
.stats-ligne {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.stat-tuile { display: flex; gap: var(--sp-2); align-items: flex-start; min-width: 0; }
.stat-ic { display: inline-flex; color: var(--muted); margin-top: 3px; }
.stat-tuile .stat { font-size: 24px; }
body.large .stat-tuile .stat { font-size: var(--fs-stat); }
.stat-tuile .eyebrow { margin-top: var(--sp-1); }

.level-zone { padding: var(--sp-4) var(--sp-4) 0; }
.level-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-2);
}
.level-line #level-next { color: var(--muted); font-weight: var(--w-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.level-track {
  height: 6px;
  border-radius: 0;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.level-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 0;
  transition: width var(--dur-slow) var(--ease-out);
}

.kudos-zone { padding: var(--sp-3) var(--sp-4) 0; }
/* Titres de sous-section : Demi en casse phrase, sans filet (le filet rouge
   n'appartient qu'au titre de l'espace). */
.kudos-zone h2, .titre-section { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); font-weight: var(--w-bold); }
.kudos-hint { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--sp-2); }
#kudos-motif { width: 100%; margin-bottom: var(--sp-2); }
.kudos-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kudos-btn:disabled { opacity: .5; cursor: default; }
.kudos-status { font-size: var(--fs-xs); font-weight: var(--w-bold); color: var(--muted); margin: var(--sp-2) 0 0; }
.kudos-status svg { vertical-align: -3px; }
.recompense { margin: var(--sp-1) 0; }
.recompense--gagnee { color: var(--ink); }

.feed-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 320px; overflow-y: auto; }
.feed-item {
  background: var(--surface);
  border: var(--carte-filet, var(--border-w)) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
/* En large, le fil est déjà sur une carte : les items deviennent des lignes. */
body.large .feed-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: var(--sp-3) 0; }
body.large .feed-item:last-child { border-bottom: 0; }
.feed-head { font-size: var(--fs-sm); line-height: 1.4; }
.feed-ic { display: inline-flex; color: var(--muted); margin-right: 6px; vertical-align: -2px; }
.feed-time { color: var(--muted); font-size: var(--fs-eyebrow); margin-left: 6px; white-space: nowrap; }
.feed-reactions { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); flex-wrap: wrap; }
.react-btn {
  font: inherit;
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.react-btn:hover { border-color: var(--ink); }
.react-btn.mine { background: var(--chip-bg); border-color: var(--ink); font-weight: var(--w-bold); }

.records-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
}
.record-card {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  background: var(--surface);
  border: var(--carte-filet, var(--border-w)) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  min-width: 0;
}
.record-card > div { min-width: 0; }
.rec-ic { display: inline-flex; color: var(--muted); margin-top: 2px; }
.rec-lbl { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rec-val { font-size: 20px; font-weight: var(--w-bold); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; margin: 2px 0; }
body.large .rec-val { font-size: 24px; }
.rec-sub { font-size: var(--fs-eyebrow); color: var(--muted); font-weight: var(--w-bold); }

.badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

/* Le badge : l'emoji est le contenu du jeu, il reste. Débloqué = barre rouge
   en tête (carte mise en avant) ; verrouillé = en retrait, sans couleur. */
.badge-card {
  position: relative;
  background: var(--surface);
  border: var(--carte-filet, var(--border-w)) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  text-align: center;
}
.badge-card.unlocked::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.badge-card .badge-emoji { font-size: 28px; line-height: 1.2; display: block; }
.badge-card .badge-name { font-weight: var(--w-bold); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.badge-card .badge-cond { font-size: var(--fs-eyebrow); color: var(--muted); margin-top: 2px; line-height: 1.35; }
.badge-card .badge-date { font-size: var(--fs-eyebrow); color: var(--muted); font-weight: var(--w-bold); margin-top: var(--sp-1); }
.badge-card .badge-date svg { vertical-align: -2px; }
.badge-card.locked { opacity: .45; }
.badge-card.locked .badge-emoji { filter: grayscale(1); }
.badge-card.unlocked { box-shadow: var(--shadow-pop); }

/* ---- Page options ---- */

body.options {
  width: auto;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px;
}
body.options h1 { font-size: 20px; font-weight: var(--w-heavy); }
body.options section {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
body.options h2 { font-size: 14px; margin: 0 0 10px; font-weight: var(--w-heavy); }
body.options textarea {
  width: 100%;
  font: 13px/1.5 ui-monospace, Menlo, monospace;
  resize: vertical;
}
body.options .hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
body.options .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.options .actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.options label.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
body.options input[type="checkbox"] { width: auto; }

/* Sélecteur de thème */
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-swatch {
  width: 116px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--card);
  padding: 0;
  font: inherit;
  text-align: center;
}
.theme-swatch .swatch-preview {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-bottom: var(--border-w) solid var(--line);
}
.theme-swatch .swatch-name {
  padding: 6px;
  font-size: 12px;
  font-weight: var(--w-bold);
  color: var(--ink);
}
.theme-swatch:hover { border-color: var(--ink); }
.theme-swatch.selected {
  border-color: var(--accent);
  box-shadow: var(--shadow-pop);
}
.theme-swatch.selected .swatch-name::after { content: " ✓"; color: var(--accent); }
.theme-swatch.locked { opacity: .55; cursor: default; }
.theme-swatch.locked:hover { transform: none; }
.swatch-lock {
  font-size: 10px;
  font-weight: var(--w-heavy);
  color: var(--muted);
  padding: 0 4px 6px;
}

/* En-tête de la page des paramètres : le verrou, puis le titre de page.
   Ici le fond suit le thème, donc le logo adaptatif fonctionne tel quel. */
.options-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.options-head .logo {
  display: block;
  height: 30px;
  width: auto;
  align-self: center;
}

.options-head h1 {
  margin: 0;
  padding-left: 14px;
  border-left: var(--border-w) solid color-mix(in srgb, currentColor 28%, transparent);
  font-size: 17px;
  font-weight: var(--w-bold);
  color: var(--muted);
}

/* ==========================================================================
   Appli web et bureau : la largeur sert à MIEUX RANGER, jamais à tout montrer
   ==========================================================================
   `body.appweb` est posée par scripts/build-webapp.mjs (appli web) et par
   js/desktop.js (bureau). L'extension (popup 380 px, panneau latéral) ne l'a
   pas : elle reste compacte.

   Une section à la fois, à toutes les largeurs : les onglets restent. Au-delà
   de 820 px, appliquerDisposition() (js/app.js) pose `body.large` et chaque
   section se met en page pour la place disponible — saisie à gauche et
   journée à droite, défis et records côte à côte, fil d'équipe à part. Tout
   est conditionné à `body.large` : si le JS tombe, on garde le flux compact,
   lisible.                                                                 */

/* ---- Compact (< 820 px) : la colonne garde sa largeur et se centre ----
   La topbar et la barre d'onglets restent pleine largeur : ce sont des
   éléments de chrome. Sous 440 px (mobile), tout ceci est un no-op.        */
@media (max-width: 819px) {
  body.appweb .espaces,
  body.appweb .update-banner,
  body.appweb .astuce-onglets { max-width: 440px; margin-inline: auto; }
  body.appweb .onglets { justify-content: center; }
  body.appweb .onglet { flex: 0 1 120px; }
}

/* ---- Large (≥ 820 px) ---- */
body.large .onglets { justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-5); }
body.large .onglet { flex: 0 0 auto; flex-direction: row; gap: var(--sp-2); font-size: var(--fs-xs); padding: var(--sp-3) var(--sp-4); }
body.large .update-banner,
body.large .astuce-onglets { max-width: 1120px; margin-inline: auto; }
body.large .panneau { max-width: 1120px; margin: 0 auto; padding: 24px; }
body.large #panneau-feuille { max-width: 1400px; }

/* Des cartes : surface blanche sur le gris chaud de la page, sans filet. */
body.large #entry-form,
body.large #agenda-zone,
body.large .day,
body.large .copybar,
body.large .semaine,
body.large .prog-tete,
body.large .equipe-col > .kudos-zone,
body.large .prog-stats > .kudos-zone {
  background: var(--surface);
  border: none;
  padding: var(--sp-5);
}

/* Saisir : on saisit et on voit sa semaine à gauche, la journée et la copie à
   droite. Deux piles indépendantes : chaque carte garde sa hauteur, aucune ne
   s'étire pour s'aligner sur sa voisine. */
body.large #panneau-saisie {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  grid-template-areas: "gauche droite" "semaine droite";
  grid-template-rows: auto 1fr;
  gap: 16px 24px;
  align-items: start;
}
body.large .saisie-gauche { grid-area: gauche; }
body.large .saisie-droite { grid-area: droite; display: flex; flex-direction: column; gap: 16px; }
body.large .semaine { grid-area: semaine; }
body.large .copybar { position: static; }

/* Progression : le niveau en tête, défis et records côte à côte, les badges en mosaïque. */
body.large .prog-tete { display: block; }
body.large .stats-ligne { padding: var(--sp-5) 0 0; gap: var(--sp-5); }
body.large .level-zone { padding: 0; }
body.large .prog-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 16px; align-items: start; }
body.large .defis { margin: 0; }
body.large .prog-stats { display: flex; flex-direction: column; gap: 16px; }
body.large .records-zone { padding: 0; }
body.large .badge-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 0; }
body.large .prog-titre-badges { margin: var(--sp-6) 0 var(--sp-3); }

/* Équipe : ce qu'on fait (applaudir, voter) à gauche, ce qui se passe à droite. */
body.large .equipe-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
body.large .equipe-col { display: flex; flex-direction: column; gap: 16px; }
body.large .feed-list { max-height: none; }

/* Ouverture de section : le filet rouge de 64 × 3 px de la charte, au-dessus du titre. */
body.large .kudos-zone > h2, body.large .titre-section { font-size: 18px; margin: 0 0 var(--sp-3); }
body.large .kudos-zone { padding-top: var(--sp-5); }

.prog-titre-badges { margin: var(--sp-4) var(--sp-4) 0; }
.mois-zone { padding: 8px 0 0; }
.mascotte-zone { padding-bottom: var(--sp-3); }
.mascotte-zone .menu-save button { height: var(--h-control); }
.mascotte-zone .menu-save { max-width: 300px; }

/* ---- « Ma semaine » : n'existe que quand il y a la place ---- */
.semaine { display: none; }
body.large .semaine { display: block; }

/* ---- 🪟 Barre de titre fusionnée (Window Controls Overlay) ----
   Déclaré par display_override dans webapp/manifest.webmanifest. Quand
   Chrome/Edge l'accordent, la fenêtre installée n'a plus de bandeau de titre :
   la barre noire de Césium touche le haut de la fenêtre, comme une app native.

   On NE sort PAS la topbar du flux (pas de position: fixed) : elle est déjà le
   premier élément de la page, elle se retrouve donc naturellement en y = 0, et
   le jour où le navigateur retire l'overlay il n'y a rien à défaire.

   Les boutons du système sont à GAUCHE sur macOS et à DROITE sur Windows :
   env(titlebar-area-*) donne la zone réellement disponible, les deux marges se
   calculent depuis elle. Ailleurs (Firefox, Safari, mobile, onglet normal), la
   media query ne matche pas et rien ne change.                              */
@media (display-mode: window-controls-overlay) {
  .topbar,
  .options-head {
    -webkit-app-region: drag;
    app-region: drag;
    user-select: none;
    min-height: env(titlebar-area-height, 40px);
    padding-left: max(14px, env(titlebar-area-x, 0px));
    padding-right: max(14px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)));
  }
  /* Sans ceci, la zone de glissement avalerait les clics : la barre porte le
     score, le bouton d'installation et l'accès aux paramètres. */
  .topbar button,
  .topbar a,
  .options-head a,
  .options-head button {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}

/* ---- Ma semaine (appli web en large seulement — voir .semaine plus haut) ----
   Cinq pistes lun→ven remplies à hauteur des heures saisies sur 7 h.
   La progression est en gris d'encre, pas en --success : sur 46 px de haut, le
   vert pâle du jeton disparaît contre le blanc de la piste. Et cinq barres rouges
   banaliseraient l'accent — il ne marque QUE la journée complète. */
.semaine {
  padding: 12px 14px 16px;
  border-top: var(--border-w) solid var(--line);
}
.semaine-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
}
.semaine-total {
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap; /* « 21,5 h / 35 h » ne se coupe jamais entre deux lignes */
}
.semaine-jours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.semaine-jour { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.semaine-piste {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 46px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
.semaine-jour--aujourdhui .semaine-piste { box-shadow: inset 0 0 0 1.5px var(--ink); }
.semaine-barre {
  width: 100%;
  /* Dérivé du jeton d'encre, jamais une valeur posée à la main : suit les 9 peaux. */
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: height var(--dur-slow) var(--ease-out);
}
.semaine-barre--plein { background: var(--accent); }
.semaine-nom { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); color: var(--muted); }
.semaine-jour--aujourdhui .semaine-nom { color: var(--ink); }
.semaine-h { font-size: var(--fs-eyebrow); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Ma feuille — la grille comme Excel (js/feuille.js)
   ==========================================================================
   Chaque ligne est sa propre grille sur le même gabarit de colonnes : le
   survol et la ligne neuve se stylent à la ligne, sans display: contents.
   Le défilement horizontal appartient au conteneur .feuille-defile, jamais à
   la page. Jetons de thème uniquement : la feuille se relit dans les neuf peaux. */

/* La feuille lève le plafond de 440 px de l'appli web compacte. */
body.appweb.vue-feuille .espaces,
body.feuille-pleine .espaces { max-width: none; }

.feuille-en-grand { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.feuille-en-grand p { margin: 0; color: var(--muted); line-height: 1.45; }

.feuille-zone { padding: var(--sp-4); }

/* Deux rangées : la période à gauche, les actions groupées à droite. La hauteur de la barre
   ne dépend donc ni de la présence de « Valider », ni de la longueur de l'état de validation. */
.feuille-barre { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.feuille-vue { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.feuille-nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; max-width: 100%; }
.feuille-periode { min-width: 0; }
.feuille-periode--fixe { min-width: 11em; }
.feuille-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.feuille-total { font-size: var(--fs-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* .feuille-modes : un segmented (.segment, primitives). */

.feuille-fleche { padding: 0 6px; }

.feuille-defile {
  overflow-x: auto;
  border: var(--border-w) solid var(--line);
  background: var(--surface);
}
.feuille-grille {
  --feuille-colonnes: 7.5em minmax(14em, 2fr) 5.5em 4.5em minmax(9em, 1fr) 7em minmax(12em, 2fr) 2.25em;
  min-width: 68em;
  font-size: 14px;
}
.feuille-ligne {
  display: grid;
  grid-template-columns: var(--feuille-colonnes);
  border-bottom: 1px solid var(--line);
}
.feuille-ligne:hover:not(.feuille-entete):not(.feuille-sous-total) { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.feuille-entete {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--muted);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: var(--border-w) solid var(--line);
}
.feuille-entete > div { padding: var(--sp-2); }

.feuille-cellule {
  position: relative;
  min-height: 36px;
  line-height: 36px;
  padding: 0 var(--sp-2);
  border-right: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: cell;
  outline: none;
}
.feuille-time { text-align: right; font-variant-numeric: tabular-nums; }
.feuille-cellule.active { box-shadow: inset 0 0 0 2px var(--ink); }
.feuille-cellule.en-edition { padding: 0; overflow: visible; }
.feuille-cellule.invalide { box-shadow: inset 0 0 0 2px var(--danger); }
.feuille-editeur {
  width: 100%;
  height: 100%;
  min-height: 36px;
  padding: 0 var(--sp-2);
  font: inherit;
  color: var(--ink);
  background: var(--input-bg);
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.feuille-cellule.invalide .feuille-editeur { box-shadow: inset 0 0 0 2px var(--danger); }

.feuille-etat { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.feuille-etat svg { width: 14px; height: 14px; }
.feuille-ligne.copiee .feuille-cellule { color: var(--muted); }

/* La ligne du bas, pré-datée : elle attend sa tâche et sa durée. */
.feuille-nouvelle .feuille-cellule { color: var(--muted); }
.feuille-nouvelle .feuille-task:empty::before { content: "Nouvelle ligne"; color: var(--fg-subtle); }

.feuille-sous-total {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  color: var(--muted);
  background: color-mix(in srgb, var(--chip-bg) 50%, transparent);
}
.feuille-sous-total > div { padding: var(--sp-1) var(--sp-2); }
.feuille-st-libelle { grid-column: 1 / 4; text-align: right; }

.feuille-aide { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* Vues Année et Tout : un tableau de lecture par mois, pas une grille d'édition. */
.feuille-synthese { overflow-x: auto; border: var(--border-w) solid var(--line); background: var(--surface); padding: 0 var(--sp-3); }
.feuille-synthese-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.feuille-synthese-table th { text-align: left; font-size: var(--fs-eyebrow); color: var(--muted); font-weight: var(--w-bold); padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: var(--border-w) solid var(--line); }
.feuille-synthese-table td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: var(--border-w) solid var(--line); color: var(--ink); }
.feuille-synthese-table th + th, .feuille-synthese-table td + td { text-align: right; }
.feuille-synthese-annee td, .feuille-synthese-table tfoot td { font-weight: var(--w-bold); }
.feuille-synthese-table tfoot td { border-top: calc(var(--border-w) * 2) solid var(--ink); border-bottom: 0; }
/* Douze liens dans une colonne : l'accent reste rare, il ne vient qu'au survol et au focus. */
.feuille-lien { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.feuille-lien:hover, .feuille-lien:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.feuille-validation { font-size: var(--fs-sm); color: var(--muted); }
.feuille-validation--modifiee { color: var(--danger); }

.toast-action {
  margin-left: var(--sp-1);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}