/* ==========================================================================
   Bobou — tâches et frise, pour les études et le travail
   Même direction artistique que le portfolio : fond granuleux (grain coloré
   pixel par pixel, grain.js), panneaux de couleur pastel en tête des vues,
   encadrés « papier » contrastés, Archivo condensé + Barlow Semi Condensed,
   filets fins, une couleur par espace. Volontairement minimaliste, avec de petites
   animations quand on coche, ajoute ou déplace quelque chose.
   ========================================================================== */

:root {
  /* Page (thème sombre, par défaut) : noir chaud, éclairci par le grain */
  --bg: #100f0f;
  --ink: #f1f0eb;
  --muted: #9d9c97;
  --rule: #3b3b39;
  --accent: #f26a5e;
  --accent-bg: #c2302e;
  --accent-ink: #ffffff;
  --focus: #e9f28c;
  --late: #f26a5e;
  --doing: #f2b84b;
  --ok: #b3d155;
  --st-check: var(--bg);
  --on-dot: #121212;

  /* Encadrés (clairs sur fond sombre) */
  --paper: #ecebe6;
  --paper-ink: #121212;
  --paper-muted: #3f3e3a;
  --tone-neutre:
    linear-gradient(116deg, transparent 0 36%, rgba(255,255,255,.7) 37.5%, transparent 40.5%),
    linear-gradient(124deg, transparent 0 58%, rgba(0,0,0,.035) 59%, rgba(255,255,255,.55) 60.5%, transparent 64%),
    linear-gradient(150deg, transparent 0 14%, rgba(0,0,0,.028) 15%, transparent 22%),
    linear-gradient(104deg, transparent 0 78%, rgba(255,255,255,.45) 79%, transparent 83%),
    radial-gradient(130% 110% at 85% 0%, #f7f7f4 0%, #ecebe6 55%, #e4e3de 100%);
  --tone-vert:
    radial-gradient(38% 30% at 30% 34%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(48% 42% at 58% 62%, rgba(255,255,255,.72), transparent 72%),
    radial-gradient(40% 60% at 88% 78%, rgba(226,243,168,.95), transparent 72%),
    radial-gradient(45% 40% at 8% 88%, rgba(232,244,190,.9), transparent 70%),
    linear-gradient(172deg, #f5f7e4 0%, #eef5cf 55%, #e6f1b7 100%);
  --tone-bleu:
    radial-gradient(45% 40% at 25% 25%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(55% 50% at 65% 60%, rgba(236,240,255,.75), transparent 72%),
    radial-gradient(50% 60% at 95% 95%, rgba(170,184,238,.6), transparent 72%),
    linear-gradient(172deg, #e2e6fb 0%, #d4daf6 55%, #c7cff2 100%);
  --tone-lavande:
    radial-gradient(70% 70% at 100% 0%, rgba(196,140,178,.45), transparent 70%),
    radial-gradient(45% 55% at 0% 0%, rgba(196,168,204,.5), transparent 72%),
    radial-gradient(70% 55% at 62% 62%, rgba(221,227,255,.95), transparent 72%),
    radial-gradient(60% 50% at 10% 100%, rgba(170,170,196,.45), transparent 72%),
    linear-gradient(180deg, #ccc4e4 0%, #d7dbf5 55%, #cfd0ec 100%);
  --tone-orange:
    radial-gradient(40% 35% at 28% 30%, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(50% 45% at 60% 60%, rgba(255,241,226,.75), transparent 72%),
    radial-gradient(50% 60% at 96% 92%, rgba(244,172,118,.5), transparent 72%),
    linear-gradient(172deg, #fcebd9 0%, #f9dcbe 55%, #f6cfa8 100%);
  --tone-rose:
    radial-gradient(40% 35% at 25% 28%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(55% 50% at 62% 60%, rgba(248,232,242,.75), transparent 72%),
    radial-gradient(60% 65% at 100% 0%, rgba(200,138,180,.45), transparent 72%),
    linear-gradient(172deg, #efdcea 0%, #e6c9dd 55%, #dcb7d0 100%);

  /* Pastilles des espaces, lisibles sur le fond de page */
  --t-orange: #f39a4c;
  --t-bleu: #8a9cf0;
  --t-vert: #b3d155;
  --t-lavande: #bea5ea;
  --t-rose: #ea88bc;

  /* Grain « pellicule » */
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 0 0 0 -.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-body: var(--grain-light);
  --grain-body-o: .32;
  --grain-card: var(--grain-dark);
  --grain-card-o: .3;

  /* Formes */
  --radius: 12px;
  --gutter: clamp(16px, 2.2vw, 40px);
  --side-w: 272px;
  --top-h: 56px;

  /* Typographies */
  --f-display: "Archivo", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-text: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  color-scheme: dark;
}

/* Dans les encadrés clairs : pastilles et états plus foncés */
.card {
  --t-orange: #b85a12;
  --t-bleu: #3f55c4;
  --t-vert: #587a0c;
  --t-lavande: #7250b3;
  --t-rose: #ae3c78;
  --late: #c2302e;
  --doing: #a35f00;
  --ok: #4f7a0c;
  --st-check: var(--paper);
  --on-dot: #ffffff;
}

/* Thème clair : fond papier, encadrés sombres */
:root[data-theme="clair"] {
  --bg: #e9e8e3;
  --ink: #141414;
  --muted: #5d5c57;
  --rule: #c6c5bf;
  --accent: #b3261e;
  --accent-bg: #b3261e;
  --focus: #1f3cc7;
  --late: #b3261e;
  --doing: #a35f00;
  --ok: #4f7a0c;
  --on-dot: #ffffff;

  --paper: #1f1f1e;
  --paper-ink: #f1f0eb;
  --paper-muted: #bdbcb5;
  --tone-neutre:
    linear-gradient(116deg, transparent 0 36%, rgba(255,255,255,.035) 37.5%, transparent 40.5%),
    linear-gradient(124deg, transparent 0 58%, rgba(0,0,0,.22) 59%, rgba(255,255,255,.03) 60.5%, transparent 64%),
    linear-gradient(104deg, transparent 0 78%, rgba(255,255,255,.025) 79%, transparent 83%),
    radial-gradient(130% 110% at 85% 0%, #262625 0%, #20201f 55%, #1a1a19 100%);
  --tone-vert:
    radial-gradient(45% 40% at 60% 60%, rgba(143,176,74,.12), transparent 72%),
    radial-gradient(40% 60% at 88% 78%, rgba(143,176,74,.1), transparent 72%),
    linear-gradient(172deg, #1c2413 0%, #202a15 55%, #222d16 100%);
  --tone-bleu:
    radial-gradient(55% 50% at 65% 60%, rgba(111,130,214,.12), transparent 72%),
    radial-gradient(50% 60% at 95% 95%, rgba(111,130,214,.1), transparent 72%),
    linear-gradient(172deg, #161b31 0%, #191f39 55%, #1c2340 100%);
  --tone-lavande:
    radial-gradient(70% 70% at 100% 0%, rgba(176,104,158,.16), transparent 70%),
    radial-gradient(70% 55% at 62% 62%, rgba(120,130,210,.1), transparent 72%),
    linear-gradient(180deg, #1c1930 0%, #211c37 55%, #251f3c 100%);
  --tone-orange:
    radial-gradient(50% 45% at 60% 60%, rgba(217,130,62,.12), transparent 72%),
    radial-gradient(50% 60% at 96% 92%, rgba(217,130,62,.1), transparent 72%),
    linear-gradient(172deg, #261a0f 0%, #2c1e10 55%, #312111 100%);
  --tone-rose:
    radial-gradient(60% 65% at 100% 0%, rgba(192,96,158,.14), transparent 72%),
    radial-gradient(55% 50% at 62% 60%, rgba(192,96,158,.08), transparent 72%),
    linear-gradient(172deg, #26151f 0%, #2a1724 55%, #2e1929 100%);

  --t-orange: #b85a12;
  --t-bleu: #3f55c4;
  --t-vert: #587a0c;
  --t-lavande: #7250b3;
  --t-rose: #ae3c78;

  --grain-body: var(--grain-dark);
  --grain-body-o: .14;
  --grain-card: var(--grain-light);
  --grain-card-o: .2;
  color-scheme: light;
}
:root[data-theme="clair"] .card {
  --t-orange: #f39a4c;
  --t-bleu: #8a9cf0;
  --t-vert: #b3d155;
  --t-lavande: #bea5ea;
  --t-rose: #ea88bc;
  --late: #f26a5e;
  --doing: #f2b84b;
  --ok: #b3d155;
  --on-dot: #121212;
}

/* Couleur d'un espace */
[data-tone="orange"] { --dot: var(--t-orange); }
[data-tone="bleu"] { --dot: var(--t-bleu); }
[data-tone="vert"] { --dot: var(--t-vert); }
[data-tone="lavande"] { --dot: var(--t-lavande); }
[data-tone="rose"] { --dot: var(--t-rose); }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }

/* La place de la barre de défilement est toujours gardée : une vue courte et une longue sont centrées
   pareil (sans cela, changer d'onglet décale tout de quelques pixels). Un tableau ouvert prend tout */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html:has(.view-tableau) { scrollbar-gutter: auto; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: var(--grain-body);
  opacity: var(--grain-body-o);
}
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }

a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; }
svg.i { display: block; width: 16px; height: 16px; flex: none; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.sep { opacity: .45; margin: 0 .15em; }
.is-late { color: var(--late); }

.display {
  font-family: var(--f-display);
  font-stretch: 66%;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: .92;
}
.label, .kicker, .side-label, .block-title, .pop-head, .pal-head, .col-name, .nav-item {
  font-family: var(--f-display);
  font-stretch: 72%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
code {
  font-family: var(--f-mono); font-size: .86em; padding: .08em .38em; border-radius: 4px;
  background: color-mix(in srgb, currentColor 11%, transparent);
}
kbd {
  font-family: var(--f-mono); font-size: .72rem; line-height: 1; padding: .3em .45em; border-radius: 5px;
  border: 1px solid var(--rule); color: var(--muted); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Encadrés « papier »
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--tone-neutre);
  color: var(--paper-ink);
  --focus: var(--paper-ink);
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --rule: color-mix(in srgb, var(--paper-ink) 18%, transparent);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain-card);
  opacity: var(--grain-card-o);
}
.card[data-tone="vert"] { background: var(--tone-vert); }
.card[data-tone="bleu"] { background: var(--tone-bleu); }
.card[data-tone="lavande"] { background: var(--tone-lavande); }
.card[data-tone="orange"] { background: var(--tone-orange); }
.card[data-tone="rose"] { background: var(--tone-rose); }

/* --------------------------------------------------------------------------
   Grain pixel (grain.js) : bruit coloré, alpha déjà réglé dans les tuiles
   -------------------------------------------------------------------------- */
:root[data-grain] { --grain-body-o: 1; --grain-card-o: .9; --grain-pan-o: 1; }
:root[data-grain][data-theme="clair"] { --grain-body-o: .45; --grain-card-o: 1; }
body::after, .card::after, .panneau::after, .porte::after { image-rendering: pixelated; }

/* --------------------------------------------------------------------------
   Panneaux de couleur : grands dégradés pastel granuleux, texte noir
   (repris des visuels de référence : lavande-mauve, citron, menthe → bleu ;
   pêche, ciel et rose en plus). Un par module en tête de vue, et la couverture
   d'une page prend la couleur de sa catégorie.
   -------------------------------------------------------------------------- */
:root {
  --pan-ink: #121212;
  --pan-lavande:
    radial-gradient(62% 80% at 100% 0%, rgba(188,128,168,.85), transparent 70%),
    radial-gradient(45% 65% at 0% 0%, rgba(184,160,202,.85), transparent 72%),
    radial-gradient(60% 60% at 8% 100%, rgba(198,168,200,.6), transparent 72%),
    radial-gradient(70% 60% at 60% 58%, rgba(214,220,252,.95), transparent 75%),
    linear-gradient(180deg, #c8c3e5 0%, #cfd3f3 55%, #cac6e8 100%);
  --pan-citron:
    radial-gradient(28% 24% at 30% 32%, rgba(255,255,248,.85), transparent 70%),
    linear-gradient(118deg, transparent 0 30%, rgba(255,255,244,.6) 37%, transparent 45%),
    linear-gradient(64deg, transparent 0 54%, rgba(255,255,244,.5) 60%, transparent 68%),
    radial-gradient(60% 55% at 52% 56%, rgba(243,249,192,.95), transparent 75%),
    radial-gradient(45% 75% at 0% 50%, rgba(214,216,200,.75), transparent 75%),
    linear-gradient(180deg, #e8ebc8 0%, #eef4c3 50%, #e2e8b9 100%);
  --pan-menthe:
    radial-gradient(70% 65% at 100% 0%, rgba(166,226,160,.95), transparent 70%),
    radial-gradient(85% 75% at 0% 100%, rgba(86,134,198,.95), transparent 72%),
    linear-gradient(168deg, #98d2b1 0%, #8fccb7 42%, #76aebd 78%, #6a9cc2 100%);
  --pan-peche:
    radial-gradient(65% 75% at 100% 0%, rgba(246,182,134,.9), transparent 70%),
    radial-gradient(60% 75% at 0% 100%, rgba(226,158,176,.8), transparent 72%),
    linear-gradient(175deg, #f6d8c2 0%, #f7dccb 50%, #efcac0 100%);
  --pan-ciel:
    radial-gradient(60% 75% at 100% 100%, rgba(126,146,232,.85), transparent 72%),
    radial-gradient(55% 65% at 0% 0%, rgba(174,214,234,.9), transparent 72%),
    linear-gradient(170deg, #c6d3f5 0%, #c3cbf4 50%, #b3bdf0 100%);
  --pan-rose:
    radial-gradient(60% 75% at 100% 0%, rgba(204,124,174,.8), transparent 70%),
    radial-gradient(60% 65% at 0% 100%, rgba(232,196,224,.9), transparent 72%),
    linear-gradient(175deg, #ecd2e5 0%, #e9cde2 50%, #e0bbd5 100%);
  --pan-papier:
    radial-gradient(70% 80% at 100% 0%, rgba(255,255,255,.7), transparent 70%),
    linear-gradient(175deg, #ecebe6 0%, #e6e5df 100%);
  /* Sable doré (Grades : chaque onglet a sa couleur) */
  --pan-sable:
    radial-gradient(60% 75% at 100% 0%, rgba(236,176,96,.8), transparent 70%),
    radial-gradient(55% 70% at 0% 100%, rgba(214,196,140,.85), transparent 72%),
    radial-gradient(40% 40% at 35% 35%, rgba(255,246,214,.7), transparent 70%),
    linear-gradient(172deg, #f0deae 0%, #ecd59e 50%, #e4c98e 100%);
}
.panneau {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius);
  background: var(--pan, var(--pan-lavande)); color: var(--pan-ink);
  /* À l'intérieur : encre noire, boutons pleins noirs, traits et gris tirés du noir */
  --ink: var(--pan-ink);
  --muted: color-mix(in srgb, var(--pan-ink) 66%, transparent);
  --rule: color-mix(in srgb, var(--pan-ink) 24%, transparent);
  --bg: #f3f2ec;
  --focus: var(--pan-ink);
  --accent: #b3261e;
  --late: #b3261e;
  --paper-ink: var(--pan-ink);
  --paper-muted: color-mix(in srgb, var(--pan-ink) 62%, transparent);
  --paper: #f3f2ec;
}
.panneau::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain-dark); opacity: var(--grain-pan-o, .35);
}
.panneau ::selection { background: rgba(18,18,18,.18); }
[data-pan="lavande"] { --pan: var(--pan-lavande); }
[data-pan="citron"], [data-pan="vert"] { --pan: var(--pan-citron); }
[data-pan="menthe"] { --pan: var(--pan-menthe); }
[data-pan="peche"], [data-pan="orange"] { --pan: var(--pan-peche); }
[data-pan="ciel"], [data-pan="bleu"] { --pan: var(--pan-ciel); }
[data-pan="rose"] { --pan: var(--pan-rose); }
[data-pan="sable"] { --pan: var(--pan-sable); }
[data-pan="papier"], [data-pan="none"] { --pan: var(--pan-papier); }
/* Dans un panneau, les pastilles de couleur restent foncées pour se lire sur le pastel */
.panneau {
  --t-orange: #b85a12; --t-bleu: #3f55c4; --t-vert: #587a0c; --t-lavande: #7250b3; --t-rose: #ae3c78;
  --on-dot: #ffffff;
}

/* En-tête de vue en panneau, le même dans tous les onglets : le titre en haut à gauche, le reste
   (résumé, actions, ajout rapide de Tasks) en bas à droite ; même hauteur partout */
.v-head.panneau {
  display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 18px 24px;
  min-height: clamp(160px, 18vw, 220px); padding: clamp(18px, 2.4vw, 30px);
}
.v-head.panneau > :first-child { align-self: flex-start; }
.v-head.panneau > :last-child:not(:first-child) { align-self: flex-end; margin-left: auto; }
.v-head.panneau .kicker { margin-bottom: 8px; font-weight: 600; }
.v-head.panneau .v-title { font-size: clamp(3.4rem, 9vw, 6.4rem); }
.v-head.panneau .btn { margin-bottom: 0; }
.v-head.panneau > .quick { flex: 1 1 380px; max-width: 620px; }

/* Panneau vertical (data-cote sur la vue : Pages à gauche, Boards à droite, Chat à gauche) : une
   colonne de couleur qui reste à l'écran, assez large pour que le titre reste horizontal (taille
   ajustée à la colonne : 27cqi, « Discussion » y tient). Compte et titre en haut, actions dessous ;
   le bas reste libre (le bouton rond de l'assistant est en bas à droite). Seulement sur un écran
   large (≥ 1280 px et au moins 16:9) ; sinon, le panneau horizontal habituel.
   (Même condition dans modules.css › Discussion) */
@media (min-width: 1280px) and (min-aspect-ratio: 16/9) {
  .view[data-cote] { --cote-w: clamp(320px, 22vw, 440px); }
  .view[data-cote]:not(.view-chat) { display: flex; align-items: flex-start; gap: clamp(20px, 2vw, 28px); padding-bottom: var(--vue-marge); }
  .view[data-cote="droite"]:not(.view-chat) { flex-direction: row-reverse; }
  .view[data-cote]:not(.view-chat) > :not(.v-head) { flex: 1; min-width: 0; padding-bottom: 126px; }
  .view[data-cote] > .v-head.panneau {
    position: sticky; top: calc(var(--top-h) + var(--vue-haut)); flex: none; flex-flow: column nowrap; justify-content: flex-start; gap: 22px;
    width: var(--cote-w); height: calc(100dvh - var(--top-h) - var(--vue-haut) - var(--vue-marge)); min-height: 380px; margin: 0;
  }
  .view[data-cote] .v-head.panneau { container-type: inline-size; }
  .view[data-cote] .v-head.panneau > * { align-self: flex-start; margin-left: 0; }
  .view[data-cote] .v-head.panneau .v-title { font-size: min(6.4rem, 27cqi); white-space: nowrap; }
}
.v-resume { margin: 0; font-size: .98rem; font-weight: 600; color: var(--muted); }
/* Tasks : l'ajout rapide est posé en bas du panneau, comme un champ blanc */
.panneau .quick { position: relative; background: color-mix(in srgb, #fff 52%, transparent); box-shadow: inset 0 0 0 1.5px rgba(18,18,18,.08); }
.panneau .quick:focus-within { background: color-mix(in srgb, #fff 80%, transparent); box-shadow: inset 0 0 0 1.5px var(--pan-ink); }
.v-resume b { color: var(--ink); }

/* --------------------------------------------------------------------------
   Boutons, pastilles, étiquettes
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .72em 1.15em; border-radius: 10px;
  border: 2px solid currentColor; background: transparent; color: inherit;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.btn:active { transform: scale(.97); }
.btn .i { width: 14px; height: 14px; }
.btn-solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-ink); }
.card .btn-solid { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); }
.card .btn-solid:hover { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-ink); }
.btn-sm { padding: .5em .85em; font-size: .82rem; border-radius: 8px; }
.btn-ghost { border-color: transparent; }
.btn-block { width: 100%; }

.tool-btn {
  display: inline-flex; align-items: center; gap: .5em; flex: none;
  border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; cursor: pointer;
  padding: .38em .9em;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700;
  font-size: .9rem; text-transform: uppercase; letter-spacing: .03em;
}
.tool-btn:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.tool-btn[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.tool-btn .i { width: 14px; height: 14px; }

.icon-btn {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 9px; background: none; color: var(--ink); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.icon-btn.round { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule); }
.icon-btn.round:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.icon-btn.mini { width: 26px; height: 26px; border-radius: 7px; color: var(--muted); }
.icon-btn.mini .i { width: 12px; height: 12px; }
.icon-btn.is-on { color: #f2b84b; }

.dot { display: inline-block; flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--dot, var(--muted)); }

.chip {
  display: inline-flex; align-items: center; gap: .42em; min-width: 0; max-width: 18em;
  padding: .12em .62em .14em; border-radius: 999px; border: 1.5px solid var(--rule);
  font-size: .84rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.due, .check-chip, .prio {
  display: inline-flex; align-items: center; gap: .32em; white-space: nowrap;
  font-size: .86rem; font-weight: 600; color: var(--muted);
}
.due .i, .check-chip .i, .prio .i { width: 13px; height: 13px; }
.due.is-late { color: var(--late); font-weight: 700; }
.due.is-today { color: var(--ink); font-weight: 700; }
.check-chip.is-full { color: var(--ok); }
.prio.p3 { color: var(--late); }
.prio.p2 { color: var(--doing); }

.bar {
  display: block; height: 6px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 13%, transparent);
}
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--dot, var(--ink)); transition: width .45s cubic-bezier(.3,.8,.2,1); }

/* Pastilles d'état (à faire / en cours / terminé) */
.st { display: block; width: 18px; height: 18px; flex: none; }
.st-todo { color: var(--muted); }
.st-doing { color: var(--doing); }
.st-done { color: var(--ok); }
.st-btn {
  display: grid; place-items: center; width: 24px; height: 24px; margin: -3px; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.st-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.st-btn:hover .st-todo { color: var(--ok); }

/* Filtres en pastilles (repris du tri du portfolio) */
.fchip {
  display: inline-flex; align-items: center; gap: .45em; padding: .4em .9em; border: 1.5px solid var(--rule); border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer; font-weight: 600; font-size: .95rem; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
}
.fchip small { font-size: .78rem; font-weight: 600; opacity: .6; }
.fchip .dot { width: .7em; height: .7em; }
.fchip .st { width: 15px; height: 15px; }
.fchip:hover { border-color: var(--ink); }
.fchip:active { transform: scale(.96); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fchip[aria-pressed="true"] .st { color: inherit; --st-check: var(--ink); }

.seg-mini { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); }
.seg-mini button {
  display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border: 0; border-radius: 999px;
  background: none; color: var(--ink); font-weight: 600; font-size: .86rem; cursor: pointer; white-space: nowrap;
}
.seg-mini button .i { width: 13px; height: 13px; }
.seg-mini button { transition: background-color .15s ease, color .15s ease; }
.seg-mini button:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.seg-mini button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.link { padding: 0; border: 0; background: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--rule); cursor: pointer; }
.link:hover { text-decoration-color: currentColor; }
.more-link { display: inline-block; margin-top: 10px; font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.more-link:hover { text-decoration: underline; text-underline-offset: .2em; }

/* --------------------------------------------------------------------------
   Mise en page : une barre en haut, une colonne au centre
   -------------------------------------------------------------------------- */
/* Une seule courbe, qui ralentit sans jamais dépasser ni revenir en arrière */
:root { --top-h: 64px; --ease: cubic-bezier(.22, 1, .36, 1); }

.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--top-h); padding: 0 clamp(16px, 3vw, 36px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.brand {
  font-family: var(--f-display); font-stretch: 66%; font-weight: 700; font-size: 1.65rem; line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase; text-decoration: none;
}
.tabs {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--rule);
}
/* Au-dessus de 720 px : trois colonnes, les onglets au centre. Le nom du projet se raccourcit
   au lieu de passer sous les onglets (libellés français plus longs) */
@media (min-width: 721px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); }
  .tabs { position: relative; left: auto; transform: none; }
  .env-btn { justify-self: start; max-width: 100%; }
  .top-tools { justify-self: end; }
  :root[lang="fr"] .tab { padding-inline: 1.1em; }
}
.tabs-ink {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: transform .3s var(--ease), width .3s var(--ease);
}
.tab {
  position: relative; z-index: 1; padding: .55em 1.35em; border-radius: 999px; text-decoration: none;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .98rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); transition: color .25s ease;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--bg); }
.top-tools { display: flex; align-items: center; gap: 6px; }

.ibtn {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
}
.ibtn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ibtn:active { transform: scale(.95); }
.ibtn .i { width: 18px; height: 18px; }
.ibtn.round { box-shadow: inset 0 0 0 1.5px var(--rule); }
.ibtn.round:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ibtn.mini { width: 28px; height: 28px; color: var(--muted); }
.ibtn.mini .i { width: 13px; height: 13px; }

.pill {
  display: inline-flex; align-items: center; gap: .5em; height: 36px; padding: 0 1em; flex: none;
  border: 1.5px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); cursor: pointer;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .86rem; text-transform: uppercase; letter-spacing: .04em;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.pill:hover { border-color: var(--ink); }
.pill:active { transform: scale(.97); }
.pill small { font-family: var(--f-text); font-stretch: normal; font-weight: 600; font-size: .78rem; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* Bouton flottant : l'assistant (assistant.js) ; caché dans les vues « sansFab » (body.sans-fab) */
.fab {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 45;
  display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent-ink); cursor: pointer;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-bg) 45%, transparent), 0 2px 0 rgba(0,0,0,.2);
  transition: transform .12s ease, box-shadow .2s ease;
}
.fab .i { width: 24px; height: 24px; stroke-width: 2.2; }
.fab:hover { box-shadow: 0 14px 38px color-mix(in srgb, var(--accent-bg) 60%, transparent), 0 2px 0 rgba(0,0,0,.2); }
.fab:active { transform: scale(.96); }
.sans-fab .fab { display: none; }
/* Les boutons d'ajout de chaque vue (Tasks, Timeline, Home, Pages, Boards) : rouges comme l'était le « + » */
.btn.btn-plus, .card .btn.btn-plus { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-ink); }
.btn.btn-plus:hover, .card .btn.btn-plus:hover { background: color-mix(in srgb, var(--accent-bg) 86%, var(--ink)); border-color: transparent; color: var(--accent-ink); }
.btn-plus .i { stroke-width: 2.2; }

/* Tous les onglets ont la même boîte : même largeur (jusqu'à --vue-max), mêmes marges, ils s'étirent
   de la même façon. Seuls une page ouverte (largeur de lecture) et un tableau ouvert (tout l'écran)
   en sortent. En haut : un petit écart sous les onglets, le panneau de couleur suit de près */
:root { --vue-max: 1680px; --vue-marge: clamp(16px, 3vw, 32px); --vue-haut: clamp(8px, 1vw, 14px); }
.view { width: 100%; max-width: var(--vue-max); margin: 0 auto; padding: var(--vue-haut) var(--vue-marge) 140px; outline: none; }
.view > * { animation: fondu .18s ease both; }
.view[data-pose] > * { animation: none; } /* posé par mount après le fondu : un redessin ne clignote plus */
@keyframes fondu { from { opacity: 0; } }
/* Signaler une erreur : un contour qui s'efface, sans secousse */
@keyframes signal { from { outline: 2px solid var(--late); outline-offset: 2px; } to { outline: 2px solid transparent; outline-offset: 2px; } }

.v-head { margin-bottom: clamp(18px, 2.4vw, 28px); }
.v-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; }
.kicker { margin: 0 0 10px; font-size: .84rem; color: var(--muted); }
.v-title { margin: 0; font-size: clamp(3.6rem, 10vw, 7rem); }

/* --------------------------------------------------------------------------
   Ajout rapide
   -------------------------------------------------------------------------- */
.quick {
  display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 10px 0 14px; border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  transition: box-shadow .25s ease;
}
.quick:focus-within { box-shadow: 0 20px 50px rgba(0,0,0,.36); }
.quick-plus { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--accent-bg); color: var(--accent-ink); cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-bg) 40%, transparent); transition: background-color .15s ease, box-shadow .15s ease; }
.quick-plus:hover { background: color-mix(in srgb, var(--accent-bg) 86%, var(--ink)); }
.quick-plus:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.quick-plus .i { width: 16px; height: 16px; stroke-width: 2.2; }
.quick input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--paper-ink); font-size: 1.22rem; font-weight: 600; }
.quick input::placeholder { color: var(--paper-muted); font-weight: 400; }
.quick.is-shake { animation: signal .6s ease; }
.quick-hint { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding: 8px 6px 0; font-size: .88rem; }
.token {
  display: inline-flex; align-items: center; gap: .38em; padding: .16em .65em; border-radius: 999px;
  background: color-mix(in srgb, var(--dot, var(--ink)) 18%, transparent); font-weight: 600; font-size: .84rem; white-space: nowrap;
  animation: fondu .15s ease both;
}
.token .i { width: 12px; height: 12px; }

/* Filtres : espaces + recherche */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-f {
  display: inline-flex; align-items: center; gap: .45em; padding: .4em .95em; border: 1.5px solid var(--rule); border-radius: 999px;
  background: none; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.2; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.chip-f .dot { width: .65em; height: .65em; }
.chip-f:hover { border-color: var(--ink); }
.chip-f:active { transform: scale(.97); }
.chip-f[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.find {
  display: inline-flex; align-items: center; gap: .5em; width: 40px; height: 38px; padding: 0 11px; overflow: hidden;
  border: 1.5px solid var(--rule); border-radius: 999px; color: var(--muted); cursor: text;
  transition: width .25s var(--ease), border-color .15s ease;
}
.find .i { flex: none; width: 15px; height: 15px; }
.find input { width: 100%; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font-weight: 600; }
.find input::-webkit-search-cancel-button { display: none; }
.find.is-open, .find:focus-within { width: 220px; border-color: var(--ink); color: var(--ink); }

/* --------------------------------------------------------------------------
   Liste des tâches
   -------------------------------------------------------------------------- */
.grp { margin-top: 30px; }
.grp-title {
  display: flex; align-items: baseline; gap: .6em; margin: 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink);
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
}
.grp-title small, .grp-toggle small { font-family: var(--f-text); font-stretch: normal; font-weight: 600; font-size: .9rem; letter-spacing: 0; color: var(--muted); }
.grp-late .grp-title { color: var(--late); border-color: var(--late); }
.grp-toggle {
  display: flex; align-items: baseline; gap: .6em; width: 100%; padding: 0 0 8px; border: 0; border-bottom: 1.5px solid var(--rule);
  background: none; color: var(--muted); cursor: pointer; text-align: left;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
}
.grp-toggle .i { align-self: center; width: 14px; height: 14px; margin-left: auto; transition: transform .2s var(--ease); }
.grp-toggle:hover { color: var(--ink); }
.grp-done.is-open .grp-toggle .i { transform: rotate(180deg); }
.grp-done .row { opacity: .62; }
.grp-done .row:hover { opacity: 1; }

.row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  padding: 12px 10px 12px 2px; border-bottom: 1px solid var(--rule); cursor: pointer; outline: none;
  transition: background-color .15s ease;
}
.row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.row:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: 8px; }
.row-main { display: grid; gap: 2px; min-width: 0; }
.row-title { display: flex; align-items: baseline; gap: .45em; min-width: 0; font-weight: 600; font-size: 1.12rem; line-height: 1.3; }
.row-text {
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px;
  transition: background-size .4s var(--ease), color .3s ease;
}
.row-prio { font-style: normal; font-weight: 800; color: var(--accent); }
.row-sub { display: flex; flex-wrap: wrap; gap: 0 .5em; font-size: .88rem; color: var(--muted); }
.row-sub > span + span::before { content: "·"; margin-right: .5em; opacity: .6; }
.row-doing { color: var(--doing); font-weight: 700; }
.row-check.is-full { color: var(--ok); }
.row-due { font-size: .92rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.row-due.is-late { color: var(--late); }
.row.is-done .row-text { background-size: 100% 1.5px; color: var(--muted); }
.row.is-new { animation: arrive .8s ease both; }
@keyframes arrive { from { opacity: 0; background: color-mix(in srgb, var(--dot, var(--accent)) 22%, transparent); } }
.row.is-checking .row-text { background-size: 100% 1.5px; color: var(--muted); }
.row.is-leaving {
  height: 0 !important; padding-block: 0; opacity: 0; border-bottom-color: transparent; overflow: hidden;
  transition: height .28s var(--ease), padding .28s var(--ease), opacity .2s ease;
}

/* Case ronde : contour à la couleur de l'espace, se remplit en cochant */
.tick { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.tick svg { width: 24px; height: 24px; overflow: visible; transition: transform .12s ease; }
.tick-ring { fill: transparent; stroke: var(--dot, var(--muted)); stroke-width: 1.8; transition: fill .25s ease, stroke .25s ease; }
.tick-half { fill: var(--dot, var(--doing)); opacity: 0; transition: opacity .2s ease; }
.tick-check { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .3s .08s var(--ease); }
.tick:hover .tick-ring { fill: color-mix(in srgb, var(--dot, var(--muted)) 20%, transparent); }
.tick:active svg { transform: scale(.92); }
.row.is-doing .tick-half { opacity: 1; }
.row.is-done .tick-ring, .row.is-checking .tick-ring { fill: var(--dot, var(--ok)); stroke: var(--dot, var(--ok)); }
.row.is-done .tick-half, .row.is-checking .tick-half { opacity: 0; }
.row.is-done .tick-check, .row.is-checking .tick-check { stroke-dashoffset: 0; }


.empty { padding: 60px 0 20px; text-align: center; color: var(--muted); }
.empty-title { margin: 0 0 10px; font-size: clamp(2.6rem, 7vw, 4rem); color: var(--ink); }
.empty p { margin: 0; }

/* --------------------------------------------------------------------------
   Frise
   -------------------------------------------------------------------------- */
.fz-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* À côté du titre plutôt que dessous : les commandes vont à la ligne entre elles, le panneau garde la hauteur des autres */
@media (min-width: 721px) { .v-head.panneau > .fz-ctrl { flex: 1 1 360px; justify-content: flex-end; } }
.fz-nav { display: flex; align-items: center; gap: 6px; }
.fz-nav .pill.is-here { border-color: transparent; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.fz-title { font-size: clamp(2.8rem, 7vw, 5.2rem); }
.fz-wrap { overflow-x: auto; margin-top: 18px; padding-bottom: 8px; }
.fz {
  position: relative; min-width: 760px;
  /* Traits des jours et des semaines, fond des jours passés */
  --fz-jour: color-mix(in srgb, var(--ink) 15%, transparent);
  --fz-sem: color-mix(in srgb, var(--ink) 30%, transparent);
  --fz-passe: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Axe : mois (avec l'année) / semaines / jours */
.fz-axis { position: relative; border-bottom: 1.5px solid var(--ink); }
.fz-months, .fz-weeks, .fz-days { position: relative; }
.fz-months { height: 30px; }
.fz-weeks { height: 26px; }
.fz-days { height: 40px; }
.fz-month, .fz-week {
  position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); width: calc(var(--n) / var(--days) * 100%);
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
}
.fz-month { padding-left: 10px; border-left: 2px solid var(--ink); font-size: .95rem; color: var(--muted); }
.fz-month b { margin-right: .35em; font-family: var(--f-display); font-stretch: 72%; font-weight: 800; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.fz-week { padding-left: 10px; border-left: 1px solid var(--rule); font-size: .8rem; font-weight: 600; color: var(--muted); }
.fz-week.is-now { color: var(--ink); }
.fz-week.is-now::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: .45em; border-radius: 50%; background: var(--accent); }
.fz-month:first-child, .fz-week:first-child { border-left-color: transparent; }
.fz-day {
  position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); width: calc(100% / var(--days));
  display: flex; align-items: center; justify-content: center; gap: .35em; color: var(--muted);
}
.fz-day small { font-size: .78rem; font-weight: 600; }
.fz-day b { display: grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .2em; border-radius: 999px; font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.fz-day + .fz-day { border-left: 1px solid var(--fz-jour); }
.fz-day.is-mon { border-left-color: var(--fz-sem); }
.fz-day.is-first { border-left: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.fz-day:first-child { border-left: 0; }
.fz-day.is-we > * { opacity: .55; }
.fz-day.is-past { background: var(--fz-passe); }
.fz-day.is-past b { color: var(--muted); font-weight: 600; }
.fz-day.is-today { color: var(--accent); }
.fz-day.is-today b { background: var(--accent-bg); color: var(--accent-ink); }
.fz[data-echelle="mois"] .fz-day { flex-direction: column; gap: 0; }
.fz[data-echelle="mois"] .fz-day small { font-size: .66rem; line-height: 1; }
.fz[data-echelle="mois"] .fz-day b { min-width: 1.75em; height: 1.75em; font-size: .9rem; }
.fz[data-echelle="semaine"] .fz-day small { font-size: .86rem; }

/* Fond : traits des jours, semaines et mois ; week-end ; colonne d'aujourd'hui */
.fz-body { position: relative; min-height: 160px; padding: 18px 0 26px; }
.fz-bg { position: absolute; inset: 0; pointer-events: none; }
.fz-line { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); border-left: 1px solid var(--fz-jour); }
.fz-line.is-week { border-left-color: var(--fz-sem); }
.fz-past { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--n) / var(--days) * 100%); background: var(--fz-passe); }
.fz-line.is-month { border-left: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.fz-we { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); width: calc(100% / var(--days)); background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.fz-today { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); width: calc(100% / var(--days)); background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
.fz[data-echelle="trimestre"] .fz-today { left: calc((var(--s) + .5) / var(--days) * 100%); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.fz-lane { position: relative; z-index: 1; margin-bottom: 14px; }
.fz-glabel {
  position: sticky; left: 0; z-index: 4; display: inline-flex; align-items: center; gap: .5em; margin: 0 0 6px; padding: .25em .8em .25em .55em;
  border-radius: 999px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px);
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .86rem; text-transform: uppercase; letter-spacing: .04em;
}
.fz-glabel small { font-family: var(--f-text); font-stretch: normal; font-weight: 600; font-size: .82rem; letter-spacing: 0; color: var(--muted); }
.fz-row { position: relative; height: 42px; }
.fz-bar {
  position: absolute; top: 5px; bottom: 5px; left: calc(var(--s) / var(--days) * 100% + 2px); width: calc((var(--e) - var(--s)) / var(--days) * 100% - 4px); min-width: 16px;
  display: flex; align-items: center; padding: 0 12px; border-radius: 11px; cursor: grab; touch-action: none; user-select: none;
  background: var(--dot, var(--muted));
  transition: transform .2s var(--ease), box-shadow .2s ease, opacity .2s ease;
}
.fz-bar:hover { box-shadow: 0 10px 22px -6px rgba(0,0,0,.38); }
.fz-bar.is-grab { z-index: 6; cursor: grabbing; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.fz-bar.cut-l { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.fz-bar.cut-r { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.fz-bar.is-late { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--late); }
.fz-bar.is-new, .fz-ms.is-new { animation: fondu .3s ease; }
.fz-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-dot); font-weight: 700; font-size: .92rem; pointer-events: none; }
.fz-bar.is-out .fz-label { position: absolute; left: calc(100% + 10px); overflow: visible; color: var(--ink); font-weight: 600; }
.fz-bar.is-out-l .fz-label { position: absolute; right: calc(100% + 10px); overflow: visible; color: var(--ink); font-weight: 600; }
.fz-ms.is-left { flex-direction: row-reverse; transform: translateX(calc(-100% + 18px)); }
.fz-row.is-done .fz-bar { opacity: .35; }
.fz-row.is-done .fz-label { text-decoration: line-through; }
.fz-h { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.fz-h-s { left: 0; }
.fz-h-e { right: 0; }
.fz-h::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; border-radius: 2px; background: var(--on-dot); opacity: 0; transition: opacity .15s ease; }
.fz-bar:hover .fz-h::after { opacity: .45; }
.fz-ms {
  position: absolute; top: 0; bottom: 0; left: calc(var(--m) / var(--days) * 100%);
  display: flex; align-items: center; gap: 10px; margin-left: -9px; cursor: grab; touch-action: none; user-select: none;
}
.fz-diamond { display: block; width: 18px; height: 18px; border-radius: 4px; background: var(--dot, var(--muted)); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--bg); flex: none; }
.fz-ms.is-grab { z-index: 6; cursor: grabbing; }
.fz-ms .fz-label { color: var(--ink); font-weight: 600; }
.fz-ms.is-late .fz-diamond { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--late); }
.fz-row.is-done .fz-ms { opacity: .4; }
.fz-tip {
  position: absolute; z-index: 10; transform: translate(-50%, -100%); padding: .3em .75em; border-radius: 8px;
  background: var(--ink); color: var(--bg); font-size: .82rem; font-weight: 700; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
}
.fz-tip.is-on { opacity: 1; }
.fz-empty { position: relative; z-index: 1; margin: 0; padding: 50px 0; text-align: center; font-size: 1.1rem; color: var(--ink); }
.fz-empty span { color: var(--muted); font-size: .95rem; }
.fz-note { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }

/* Bouton et fenêtre « Emploi du temps » (RUBIKA, ENT) */
.rk-btn small { font-weight: 400; opacity: .7; }
.rk-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.rk-dot.is-on { background: var(--ok); }
.rk-dot.is-busy { background: var(--doing); animation: pulse 1s ease-in-out infinite; }
.rk-dot.is-error { background: var(--late); }
@keyframes pulse { 50% { opacity: .3; } }
.rk-pop { width: 330px; }
.rk-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-right: 7px; }
.rk-src { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper-ink) 22%, transparent); }
.rk-src button { padding: .25em .8em; color: var(--paper-ink); font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.rk-src button:hover { background: color-mix(in srgb, var(--paper-ink) 9%, transparent); }
.rk-src button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.rk { padding: 2px 2px 4px; }
.rk-info { margin: 0 9px 8px; font-size: .92rem; line-height: 1.4; }
.rk-info .rk-dot { margin-right: .35em; }
.rk-form { display: grid; gap: 10px; padding: 2px 8px 6px; }
.rk-field { display: grid; gap: 4px; font-size: .84rem; font-weight: 600; color: var(--paper-muted); }
.rk-field input {
  padding: .55em .7em; border: 1.5px solid var(--rule); border-radius: 8px; outline: none;
  background: color-mix(in srgb, var(--paper-ink) 5%, transparent); color: var(--paper-ink); font-weight: 600; font-size: 1rem;
}
.rk-field input:focus { border-color: var(--paper-ink); }
.rk-msg { margin: 0; font-size: .88rem; font-weight: 600; }
.rk-msg:empty { display: none; }
.rk-msg.is-error, .rk .rk-msg.is-error { color: var(--late); }
.rk > .rk-msg { margin: 0 9px 8px; }
.rk-note { margin: 0; font-size: .8rem; line-height: 1.35; color: var(--paper-muted); }
.rk-cta { margin-top: 12px; }
.rk-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-weight: 600; font-size: .92rem; cursor: pointer; }
.rk-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--paper-ink); }
.rk-check small { display: block; margin-top: 2px; font-weight: 400; font-size: .8rem; line-height: 1.35; color: var(--paper-muted); }
.rk-sim { margin-left: .4em; padding: .05em .5em; border-radius: 999px; background: var(--doing); color: #121212; font-size: .68rem; }
.tool-btn.rk-btn { gap: .45em; }
.tool-btn.rk-btn small { font-family: var(--f-text); font-stretch: normal; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .78rem; opacity: .65; }
@media (max-width: 1100px) { .tool-btn.rk-btn small { display: none; } }


/* --------------------------------------------------------------------------
   Éditeur de blocs
   -------------------------------------------------------------------------- */
.editor { position: relative; }
.blk { position: relative; display: flex; padding-left: calc(var(--indent, 0) * 1.6em); border-radius: 6px; }
.blk:focus { outline: none; }
.blk:focus-visible, .blk[tabindex]:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 70%, transparent); }
.blk-handle {
  position: absolute; top: .22em; left: calc(var(--indent, 0) * 1.6em - 52px); display: flex;
  opacity: 0; transition: opacity .12s ease;
}
.blk:hover > .blk-handle, .blk:focus-within > .blk-handle { opacity: 1; }
.blk:focus-within:not(:hover) > .blk-handle { opacity: .35; }
.blk-btn { display: grid; place-items: center; width: 24px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.blk-btn:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.blk-drag { cursor: grab; }
.blk.is-dragging { opacity: .35; }
.blk.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.blk.drop-after { box-shadow: 0 3px 0 var(--accent); }
.blk-body { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: .55em; }
.blk-text {
  flex: 1; min-width: 0; padding: .16em 2px; outline: none; font-size: 1.1rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; caret-color: var(--accent);
}
.blk-text:empty::before { content: attr(data-ph); color: var(--muted); opacity: .55; pointer-events: none; }
.blk[data-type="p"] .blk-text:empty:not(:focus)::before { content: none; }
.blk-text a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; }
.blk-text b, .blk-text strong { font-weight: 700; }

.blk[data-type="h1"] { margin-top: 1.1em; }
.blk[data-type="h2"] { margin-top: 1em; }
.blk[data-type="h3"] { margin-top: .8em; }
.editor > .blk:first-child { margin-top: 0; }
.blk[data-type="h1"] .blk-text { font-family: var(--f-display); font-stretch: 66%; font-weight: 600; font-size: clamp(2.1rem, 3.6vw, 2.8rem); line-height: 1.02; letter-spacing: -.015em; padding-block: .1em; }
.blk[data-type="h2"] .blk-text { font-family: var(--f-display); font-stretch: 66%; font-weight: 600; font-size: 1.85rem; line-height: 1.05; letter-spacing: -.01em; padding-block: .12em; }
.blk[data-type="h3"] .blk-text { font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .04em; }
.blk[data-type="h1"] .blk-handle { top: .5em; }
.blk[data-type="h2"] .blk-handle { top: .35em; }

.blk-check {
  display: grid; place-items: center; flex: none; width: 19px; height: 19px; margin-top: .42em; padding: 0;
  border: 1.6px solid var(--muted); border-radius: 5px; background: none; color: var(--bg); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.blk-check .i { width: 13px; height: 13px; stroke-width: 2.4; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .2s var(--ease); }
.blk-check:hover { border-color: var(--ink); }
.blk.is-checked .blk-check { background: var(--ink); border-color: var(--ink); }
.blk.is-checked .blk-check .i { opacity: 1; transform: none; }
.blk.is-checked .blk-text { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.blk-bullet { position: relative; flex: none; width: 1.1em; height: 1.76em; }
.blk-bullet::before { content: ""; position: absolute; left: 50%; top: .82em; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; }
.blk[style*="--indent: 1"] .blk-bullet::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.blk[style*="--indent: 2"] .blk-bullet::before { border-radius: 1px; }
.blk-num { flex: none; min-width: 1.3em; padding-top: .16em; font-size: 1.1rem; line-height: 1.6; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.blk[data-type="quote"] .blk-body { padding-left: .95em; border-left: 3px solid var(--ink); }
.blk[data-type="quote"] .blk-text { font-size: 1.22rem; font-weight: 300; }
.blk[data-type="callout"] { margin: .5em 0; }
.blk[data-type="callout"] .blk-body { padding: 12px 16px 12px 14px; border-radius: 10px; }
.blk-callout-ico { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: .2em; border-radius: 50%; background: var(--accent-bg); color: var(--accent-ink); }
.blk-callout-ico .i { width: 14px; height: 14px; }
.blk[data-type="callout"] .blk-handle { top: .8em; }
.blk[data-type="code"] { margin: .4em 0; }
.blk[data-type="code"] .blk-text {
  padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-family: var(--f-mono); font-size: .92rem; line-height: 1.55; white-space: pre; overflow-x: auto; tab-size: 2;
}
.blk[data-type="code"] .blk-handle { top: .6em; }
.blk[data-type="divider"] { padding-block: .5em; cursor: default; }
.blk[data-type="divider"] hr { width: 100%; margin: 0; border: 0; border-top: 1.5px solid var(--rule); }
.blk[data-type="divider"] .blk-handle { top: -.1em; }
.blk-page {
  display: inline-flex; align-items: center; gap: .5em; max-width: 100%; padding: .32em .5em; margin-left: -.5em; border-radius: 8px;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em;
}
.blk-page span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk-page:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); text-decoration-color: currentColor; }
.blk-page.is-gone { color: var(--muted); text-decoration: line-through; }
.blk[data-type="tasks"] { margin: .7em 0; }
.blk[data-type="tasks"] .blk-body { display: block; }
.blk[data-type="tasks"] .blk-handle { top: .9em; }
.blk-tasks { padding: 12px 14px 8px; border: 1.5px solid var(--rule); border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.it-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 6px; }
.it-title { display: inline-flex; align-items: center; gap: .5em; }
.it-title b { font-family: var(--f-display); font-stretch: 72%; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .95rem; }
.it-title small { color: var(--muted); font-weight: 600; }
.it-head .bar { flex: 0 1 120px; }
.it-head .seg-mini { margin-left: auto; }
.it-body .trow:last-child { border-bottom: 0; }
.it-body .board { margin: 8px 0 6px; }
.it-body > .tl-add, .it-body > .composer { margin: 4px 0 2px; }
.editor-tail { min-height: 90px; cursor: text; }

/* --------------------------------------------------------------------------
   Menus flottants, menu « / », recherche
   -------------------------------------------------------------------------- */
.pop {
  position: fixed; z-index: 85; min-width: 230px; max-width: min(340px, calc(100vw - 16px)); padding: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
  animation: panel-in .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pop.is-scroll, .slash { max-height: min(400px, 62vh); overflow-y: auto; }
.slash { width: 320px; }
.pop-item {
  display: flex; align-items: center; gap: .7em; width: 100%; padding: .48em .65em; border: 0; border-radius: 8px;
  background: none; color: var(--paper-ink); text-align: left; font-weight: 600; font-size: .98rem; line-height: 1.2; cursor: pointer;
}
.pop-item:hover, .pop-item:focus-visible, .pop-item.is-active { background: color-mix(in srgb, var(--paper-ink) 10%, transparent); outline: none; }
.pop-item:disabled { opacity: .45; cursor: default; }
.pop-item .i { color: var(--paper-muted); }
.pop-item .dot { width: 10px; height: 10px; margin-inline: 3px; }
.pop-blank { width: 16px; flex: none; }
.pop-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-label small { display: block; margin-top: 2px; font-weight: 400; font-size: .82rem; color: var(--paper-muted); white-space: normal; }
.pop-item kbd { margin-left: auto; border-color: var(--rule); color: var(--paper-muted); }
.pop-item .pop-check { margin-left: auto; color: var(--paper-ink); }
.pop-item.is-danger { color: var(--late); }
.pop-item.is-danger .i { color: currentColor; }
.slash .pop-item .i { width: 30px; height: 30px; padding: 7px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--paper-ink); }
.pop-head { margin: 8px 9px 4px; font-size: .72rem; color: var(--paper-muted); }
.pop-sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--rule); }
.pop-empty { margin: 0; padding: 12px; color: var(--paper-muted); }
.pop-note { margin: 0; padding: 2px 9px 8px; max-width: 300px; font-size: .9rem; line-height: 1.4; }
.pop-note .muted { display: inline-block; margin-top: 4px; }
.pop-form { padding: 4px; }
.pop-form .pop-head { display: block; }
.pop-form-row { display: flex; gap: 6px; }
.pop-form input {
  flex: 1; min-width: 0; padding: .5em .7em; border: 1.5px solid var(--rule); border-radius: 8px; outline: none;
  background: color-mix(in srgb, var(--paper-ink) 5%, transparent); color: var(--paper-ink); font-weight: 600;
}
.pop-form input:focus { border-color: var(--paper-ink); }
.pop-tones { display: flex; gap: 4px; padding: 2px 6px 6px; }
.pop-tones .tone-btn { color: var(--paper-ink); }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* Champ de date invisible, ouvert depuis un bouton */
.date-ghost { position: fixed; z-index: 100; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* --------------------------------------------------------------------------
   Notifications
   -------------------------------------------------------------------------- */
.toasts { position: fixed; left: 50%; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast {
  display: flex; align-items: center; gap: 16px; padding: .65em .7em .65em 1.1em; pointer-events: auto;
  font-weight: 600; box-shadow: 0 14px 40px rgba(0,0,0,.42); animation: toast-in .25s cubic-bezier(.2,.8,.2,1);
  transition: opacity .25s ease, transform .25s ease;
}
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.toast.is-out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.toast-btn {
  padding: .32em .85em; border: 1.5px solid var(--paper-ink); border-radius: 999px; background: none; color: var(--paper-ink); cursor: pointer;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
}
.toast-btn:hover { background: var(--paper-ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Aperçu d'une tâche
   -------------------------------------------------------------------------- */
.panel-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.36); opacity: 0; transition: opacity .3s ease; }
.panel-scrim.is-open { opacity: 1; }
.panel {
  position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 70; width: min(600px, calc(100vw - 20px));
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--bg); box-shadow: 0 0 0 1px var(--rule), -30px 0 80px rgba(0,0,0,.45);
  transform: translateX(calc(100% + 30px)); transition: transform .32s var(--ease);
}
.panel.is-open { transform: none; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background-image: var(--grain-body); opacity: var(--grain-body-o); }
.panel-bar { display: flex; align-items: center; gap: 4px; padding: 10px 10px 4px 26px; }
.panel-ctx { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5em; margin: 0; font-size: .92rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; }
.panel-ctx span { display: inline-flex; align-items: center; gap: .45em; overflow: hidden; text-overflow: ellipsis; }
.panel-ctx .sep { font-style: normal; opacity: .6; }
.panel-ctx .panel-age { font-weight: 500; }
.panel-scroll { flex: 1; overflow-y: auto; padding: 12px 30px 60px 58px; }
.panel-title { margin: 0 0 22px; margin-left: -32px; font-size: clamp(2.2rem, 4vw, 3.2rem); outline: none; overflow-wrap: anywhere; caret-color: var(--accent); }
.panel-title:empty::before { content: attr(data-ph); color: var(--muted); opacity: .45; }
.props { display: grid; gap: 2px; margin: 0 0 30px -32px; padding: 6px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.prop { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; min-height: 42px; }
.prop dt { font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.prop dd { display: flex; align-items: center; gap: 4px; margin: 0; min-width: 0; }
.prop-btn {
  min-width: 0; padding: .38em .6em; margin-left: -.6em; border: 0; border-radius: 9px; background: none; color: var(--ink);
  font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color .15s ease;
}
.prop-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.prop-btn small { margin-left: .3em; color: var(--muted); font-weight: 600; }
.prop-btn.is-late, .prop-btn.is-late small { color: var(--late); }
.prop-btn.prio-3 { color: var(--accent); }
.prop-btn.prio-2 { color: var(--doing); }
.prop-prio { display: inline-flex; align-items: center; gap: .5em; }
.prio-ic { flex: none; width: 15px; height: 15px; }
.prio-ic.is-nil { opacity: .6; }
.prio-pop .prio-ic { width: 16px; height: 16px; color: var(--paper-ink); }
.prio-pop .prio-ic.p4, .prio-pop .prio-ic.p5 { color: var(--accent); }
.token .prio-ic { width: 12px; height: 12px; }
.nil { color: var(--muted); font-weight: 400; }
.seg-st { display: inline-flex; flex-wrap: wrap; margin-left: -4px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); }
.seg-st button {
  display: inline-flex; align-items: center; gap: .42em; padding: .34em .85em .34em .6em; border: 0; border-radius: 999px;
  background: none; color: var(--ink); font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.seg-st button .st { width: 15px; height: 15px; }
.seg-st button:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.seg-st button:active { transform: scale(.97); }
.seg-st button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg-st button[aria-pressed="true"] .st { color: inherit; --st-check: var(--ink); }
.panel-label { margin: 0 0 12px -32px; font-size: .78rem; color: var(--muted); }

/* Réglages et espaces */
.set-pop { width: 300px; }
.sp-pop { width: min(380px, calc(100vw - 16px)); }
.sp-tones { display: inline-flex; }
.sp-tones .tone-btn { width: 22px; height: 22px; }
.sp-tones .tone-btn .dot { width: 12px; height: 12px; transition: box-shadow .15s ease; }
.sp-tones .tone-btn[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--dot); }
.chip-edit { align-self: center; }
.chip-edit:hover { color: var(--ink); }
.sp-edit { padding: 2px; }
.sp-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 10px; }
.sp-grip { display: grid; place-items: center; width: 16px; height: 28px; color: var(--paper-muted); opacity: .55; cursor: grab; touch-action: none; transition: opacity .15s ease; }
.sp-grip .i { width: 14px; height: 14px; }
.sp-row:hover .sp-grip { opacity: 1; }
.sp-row.is-tri { background: var(--paper); box-shadow: 0 8px 22px -6px rgba(0,0,0,.45); }
.sp-row input {
  min-width: 0; padding: .45em .6em; border: 1.5px solid transparent; border-radius: 8px; outline: none;
  background: none; color: var(--paper-ink); font-weight: 600; font-size: 1rem;
}
.sp-row input:hover { background: color-mix(in srgb, var(--paper-ink) 6%, transparent); }
.sp-row input:focus { border-color: var(--paper-ink); background: color-mix(in srgb, var(--paper-ink) 5%, transparent); }
.sp-row .ibtn.mini { color: var(--paper-muted); }
.sp-row .ibtn.mini:hover { color: var(--late); }
.tone-btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: background-color .15s ease; }
.tone-btn .dot { width: 16px; height: 16px; }
.tone-btn:hover { background: color-mix(in srgb, var(--paper-ink, var(--ink)) 9%, transparent); }

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .top { padding: 0 12px; gap: 6px; }
  .brand { font-size: 1.35rem; }
  .tabs { position: relative; left: auto; transform: none; }
  .tab { padding: .5em .95em; font-size: .9rem; }
  .rk-btn span, .rk-btn small { display: none; }
  .rk-btn { padding: 0 .75em; }
  .top-tools .ibtn { width: 36px; height: 36px; }
  .quick { height: 58px; }
  .quick input { font-size: 1.08rem; }
  .quick-key { display: none; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .find, .find.is-open, .find:focus-within { width: 100%; }
  .row:hover { transform: none; }
  .panel { top: 6px; right: 6px; bottom: 6px; width: calc(100vw - 12px); border-radius: 16px; }
  .panel-scroll { padding: 10px 18px 60px 46px; }
  .panel-bar { padding-left: 16px; }
  .prop { grid-template-columns: 90px minmax(0, 1fr); }
  .fab { width: 54px; height: 54px; }
}
@media (max-width: 420px) {
  .brand { display: none; }
  .top { justify-content: flex-start; }
  .top-tools { margin-left: auto; }
}
@media (hover: none) { .blk-handle { display: none; } .row:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Notes vides d'une tâche : une invite discrète */
.panel .editor > .blk[data-type="p"]:first-child:nth-last-child(2) .blk-text:empty::before { content: "Notes…  “/” for blocks"; }
:root[lang="fr"] .panel .editor > .blk[data-type="p"]:first-child:nth-last-child(2) .blk-text:empty::before { content: "Notes…  « / » pour les blocs"; }

/* --------------------------------------------------------------------------
   Environnement (en haut à gauche) : Privé ou projet de groupe
   -------------------------------------------------------------------------- */
.env-btn {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 6px 4px 2px; border: 0; border-radius: 14px;
  background: none; color: var(--ink); cursor: pointer;
}
.env-cur {
  display: inline-flex; align-items: center; gap: .45em; min-width: 0; height: 34px; padding: 0 .8em;
  border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); font-weight: 700; font-size: .9rem; white-space: nowrap;
  transition: box-shadow .15s ease, background-color .15s ease;
}
.env-btn:hover .env-cur { box-shadow: inset 0 0 0 1.5px var(--ink); }
.env-cur .i { flex: none; width: 15px; height: 15px; }
.env-nom { overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
.env-role { font-weight: 600; font-size: .78rem; color: var(--muted); }
.env-badge {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-ink); font-style: normal; font-size: .72rem; font-weight: 800;
  animation: fondu .2s ease;
}
.env-cur .env-caret { width: 12px; height: 12px; color: var(--muted); transition: transform .2s var(--ease); }
.env-btn[aria-expanded="true"] .env-caret { transform: rotate(180deg); }
.env-pop { min-width: 290px; }

/* Membres et rôles */
.pop.mb-pop, .pop.fb-pop { width: min(410px, calc(100vw - 16px)); max-width: none; }
.mb, .fb { padding: 2px 4px 4px; color: var(--paper-ink); }
.mb-list { display: grid; gap: 2px; margin-bottom: 6px; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; transition: background-color .15s ease; }
.mb-row:hover { background: color-mix(in srgb, var(--paper-ink) 6%, transparent); }
.mb-av {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--paper-ink); color: var(--paper); font-family: var(--f-display); font-stretch: 72%; font-weight: 800; font-size: 1rem;
}
.mb-av.is-wait { background: none; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--paper-muted); }
.mb-av .i { width: 15px; height: 15px; }
.mb-id { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mb-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.mb-id b small { font-weight: 400; color: var(--paper-muted); }
.mb-id > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--paper-muted); }
.mb-role { font-size: .82rem; font-weight: 700; color: var(--paper-muted); }
.mb select, .mb input {
  height: 34px; padding: 0 .6em; border: 1.5px solid var(--rule); border-radius: 9px; outline: none;
  background: color-mix(in srgb, var(--paper-ink) 5%, transparent); color: var(--paper-ink); font: inherit; font-weight: 600; font-size: .88rem;
}
.mb select:focus, .mb input:focus { border-color: var(--paper-ink); }
.mb select option { background: var(--paper); color: var(--paper-ink); }
.mb-invite { display: flex; gap: 6px; margin: 10px 4px 4px; }
.mb-invite input { flex: 1; min-width: 0; }

/* Brancher Firebase */
.fb-steps { margin: 0 4px 10px; padding-left: 1.3em; font-size: .86rem; line-height: 1.5; }
.fb-steps li { margin-bottom: 4px; }
.fb-steps .btn { margin-left: 2px; padding: .2em .6em; }
.fb-conf {
  display: block; width: 100%; resize: vertical; padding: 8px 10px; border: 1.5px solid var(--rule); border-radius: 10px; outline: none;
  background: color-mix(in srgb, var(--paper-ink) 5%, transparent); color: var(--paper-ink); font: 500 .8rem/1.45 ui-monospace, Consolas, monospace;
}
.fb-conf:focus { border-color: var(--paper-ink); }
.fb-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* Rôle sans droit d'écriture : bandeau à la place de la saisie rapide */
.role-note {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 16px 20px; border-radius: 18px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--rule); font-size: .95rem; color: var(--muted);
}
.role-note .i { flex: none; width: 18px; height: 18px; color: var(--ink); }
.role-note b { color: var(--ink); }
.tick.is-off { cursor: default; opacity: .6; }
.fab[hidden] { display: none; }

/* Panneau en lecture seule */
.panel-ro {
  display: inline-flex; align-items: center; gap: .4em; padding: .35em .75em; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: .78rem; font-weight: 700; color: var(--muted);
}
.panel-ro .i { width: 13px; height: 13px; }
.panel .prop-btn:disabled { cursor: default; }
.panel .prop-btn:disabled:hover { background: none; }
.seg-st button:disabled { cursor: default; }
.seg-st button:disabled:not([aria-pressed="true"]) { opacity: .5; }
.notes-lecture { display: grid; gap: 6px; font-size: 1.02rem; line-height: 1.55; overflow-wrap: anywhere; }
.notes-lecture > * { margin: 0; }
.notes-lecture h1, .notes-lecture h2, .notes-lecture h3 { margin-top: 8px; font-family: var(--f-display); font-stretch: 72%; line-height: 1.1; }
.nl-todo { display: flex; align-items: baseline; gap: .6em; }
.nl-todo i { flex: none; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--muted); transform: translateY(2px); }
.nl-todo.is-done i { background: var(--ink); box-shadow: none; }
.nl-todo.is-done span { color: var(--muted); text-decoration: line-through; }
.nl-li::before { content: "•"; margin-right: .6em; color: var(--muted); }
.notes-lecture blockquote { padding-left: 12px; border-left: 3px solid var(--rule); color: var(--muted); }
.notes-lecture pre { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); font: .85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.notes-lecture hr { width: 100%; border: 0; border-top: 1px solid var(--rule); }
.notes-vides { margin: 0; color: var(--muted); }

/* Heure d'une date, dans le panneau */
.prop-time {
  display: inline-flex; align-items: center; gap: 5px; flex: none; height: 32px; padding: 0 4px 0 9px; border-radius: 9px;
  color: var(--muted); cursor: pointer; transition: background-color .15s ease;
}
.prop-time:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.prop-time .i { flex: none; width: 14px; height: 14px; }
.prop-time input { width: 4.2em; padding: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: .95rem; }
.prop-time input::placeholder { color: var(--muted); font-weight: 500; opacity: .8; }
.prop-time:focus-within { background: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: inset 0 0 0 1.5px var(--ink); }
.prop-time.is-nudge { box-shadow: inset 0 0 0 1.5px var(--late); }
.prop-time:not(.has-value) input { color: var(--muted); font-weight: 500; }
.prop-time input:disabled { cursor: default; }
/* Réglette (O.reglette) : appuyer puis glisser de côté règle la valeur ; en saisie, curseur de texte */
.prop-time:not(:focus-within):not(:has(input:disabled)), .prop-time:not(:focus-within):not(:has(input:disabled)) input,
.rd-note:not(:focus-within), .rd-note:not(:focus-within) input { cursor: ew-resize; touch-action: pan-y; }
html.is-reglette, html.is-reglette * { cursor: ew-resize !important; user-select: none; }

/* Frise : cadenas, heures, maintenant */
.fz-lock button .i, .fz-mode button .i { width: 14px; height: 14px; }
/* Vue d'ensemble (et cours) : plusieurs tâches par ligne ; chacune garde sa classe d'état (.fz-row.etat-*) */
.fz-pack .fz-dans { position: absolute; inset: 0; height: auto; pointer-events: none; }
.fz-pack .fz-dans > * { pointer-events: auto; }
/* Vue d'ensemble (.is-serre) : une barre fait sa vraie durée (un cours d'une heure peut n'être qu'un
   trait) ; le titre sort à droite jusqu'à la tâche suivante (max-width posé par ajusterEtiquettes) */
.fz-pack.is-serre .fz-bar { left: calc(var(--s) / var(--days) * 100% + 1px); width: calc((var(--e) - var(--s)) / var(--days) * 100% - 2px); min-width: 5px; padding: 0; }
.fz-pack.is-serre .fz-bar > .fz-label { padding: 0 8px; }
.fz-pack.is-serre .fz-bar.is-out .fz-label { left: calc(100% + 6px); padding: 0; overflow: hidden; }
.fz-pack.is-serre .is-muet .fz-label { display: none; }
.fz-lock button:disabled { opacity: .4; cursor: not-allowed; }
.fz-lock button:disabled:hover { background: none; }
.fz-lock.is-nudge { animation: signal .7s ease; }
.fz.is-locked .fz-bar, .fz.is-locked .fz-ms { cursor: pointer; }
.fz.is-locked .fz-h { display: none; }
.fz-tip.is-lock { background: var(--accent-bg); color: var(--accent-ink); }
.fz-hours { position: relative; height: 18px; }
.fz-hr { position: absolute; top: 1px; left: calc(var(--s) / var(--days) * 100%); transform: translateX(-50%); font-size: .66rem; font-weight: 600; color: var(--muted); opacity: .75; }
.fz-hline { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); border-left: 1px dashed color-mix(in srgb, var(--rule) 30%, transparent); }
.fz-hline.is-mid { border-left-color: color-mix(in srgb, var(--rule) 45%, transparent); }
.fz-now { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.fz-now::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); }

@media (max-width: 720px) {
  .env-btn .brand { display: none; }
  .env-nom { max-width: 9ch; }
  .env-role { display: none; }
}
@media (max-width: 480px) {
  .env-nom { display: none; }
  .env-cur { padding: 0 .65em; }
}

/* --------------------------------------------------------------------------
   Panneau d'une tâche : brouillon et bouton « Enregistrer »
   -------------------------------------------------------------------------- */
.panel-save {
  position: relative; z-index: 6; display: flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 14px 12px 26px; border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 4%, var(--bg));
  transition: background-color .25s ease;
}
.panel-save[hidden] { display: none; }
.ps-msg {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .55em; margin: 0;
  font-size: .9rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-msg .i { flex: none; width: 15px; height: 15px; }
.ps-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.panel-save.is-dirty { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.panel-save.is-dirty .ps-msg { color: var(--ink); }
.panel-save.is-alert { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.panel-save.is-alert .ps-msg { color: var(--accent); }
.panel-save.is-shake { animation: alerte .7s ease; }
@keyframes alerte { from { background: color-mix(in srgb, var(--accent) 30%, var(--bg)); } }
.panel-save.is-saved .ps-msg { color: var(--ink); }
.panel-save.is-saved .ps-msg { animation: fondu .25s ease; }
.ps-save { gap: .7em; }
.panel-save .btn:disabled { opacity: .35; cursor: default; transform: none; }
.panel-save .btn-solid:disabled:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.panel-save .btn[hidden] { display: none; }
/* Ce qui a changé depuis le dernier enregistrement */
.prop.is-mod dt, .panel-label.is-mod { color: var(--ink); }
.prop.is-mod dt::after, .panel-label.is-mod::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .5em; border-radius: 50%;
  background: var(--accent); vertical-align: middle; animation: fondu .2s ease;
}
.panel-title.is-nudge { animation: titre-vide .8s ease; }
@keyframes titre-vide { from { color: var(--late); } }

/* Invitations : écrire l'e-mail */
.mb-send { flex: none; gap: .45em; padding: .4em .7em; font-size: .74rem; border-width: 1.5px; text-decoration: none; }
.mb-send .i { width: 13px; height: 13px; }
.mb-row.is-new .mb-send { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); }
.mb-row.is-new .mb-send:hover { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-ink); }

@media (max-width: 720px) {
  .panel-save { padding-left: 16px; }
}
@media (max-width: 480px) {
  .ps-msg { font-size: .82rem; }
  .mb-send { padding: .4em .5em; }
}

/* --------------------------------------------------------------------------
   États avancés (en revue, bloqué), priorités avancées
   -------------------------------------------------------------------------- */
.st-review { color: var(--t-lavande); }
.st-blocked { color: var(--late); }
.tick-bar { fill: none; stroke: var(--late); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity .2s ease; }
.row.etat-blocked .tick-ring { stroke: var(--late); }
.row.etat-blocked .tick-bar { opacity: 1; }
.row.etat-review .tick-ring { stroke-dasharray: 4.6 2.6; }
.row.etat-review .tick-check { stroke: var(--dot, var(--muted)); stroke-dashoffset: 0; }
.row.is-checking .tick-bar { opacity: 0; }
.row.etat-review.is-checking .tick-check { stroke: var(--bg); }
.row.is-checking .tick-ring { stroke-dasharray: none; }
.row-review { color: var(--t-lavande); font-weight: 700; }
.row-blocked { color: var(--late); font-weight: 700; }
.row-prio.is-up { letter-spacing: -.06em; }
.prop-btn.prio-4, .prop-btn.prio-5 { color: var(--accent); font-weight: 800; }
.seg-st.is-avance button { padding-right: .7em; font-size: .88rem; }

/* Filtre : plusieurs espaces cochés */

/* --------------------------------------------------------------------------
   Frise : hachures (en cours ; « à faire » reste en aplat), états avancés, zoom à la molette
   -------------------------------------------------------------------------- */
.fz-row.etat-doing .fz-bar {
  --hach: color-mix(in srgb, var(--bg) 34%, transparent);
  background-image: linear-gradient(135deg, var(--hach) 0 20%, transparent 20% 50%, var(--hach) 50% 70%, transparent 70%);
  background-size: 14px 14px;
}
.fz-row.etat-doing .fz-diamond {
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, color-mix(in srgb, var(--bg) 40%, transparent) 4px 7px);
}
.fz-row.etat-blocked .fz-bar { outline: 2px dashed var(--late); outline-offset: 2px; }
.fz-row.etat-blocked .fz-diamond { outline: 2px dashed var(--late); outline-offset: 2px; }
.fz-row.etat-review .fz-bar { outline: 2px dashed var(--t-lavande); outline-offset: 2px; }
.fz-wrap { cursor: grab; overscroll-behavior: contain; }
.fz-wrap.is-pan { cursor: grabbing; user-select: none; }

/* --------------------------------------------------------------------------
   Paramètres de l'environnement
   -------------------------------------------------------------------------- */
.pop.pr-pop { width: min(340px, calc(100vw - 16px)); max-width: none; }
.pr { padding: 2px 4px 4px; color: var(--paper-ink); }
.pr-txt { display: flex; align-items: center; gap: .5em; margin: 8px 6px 2px; font-size: .84rem; color: var(--paper-muted); }
.pr-txt .i { flex: none; width: 14px; height: 14px; }
.pr-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid var(--rule); }
.pr-id { flex: 1; min-width: 0; font-family: var(--f-display); font-stretch: 72%; font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.pr-seg { flex: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper-ink) 25%, transparent); }
.pr-seg button { color: var(--paper-ink); }
.pr-seg button:hover { background: color-mix(in srgb, var(--paper-ink) 9%, transparent); }
.pr-seg button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.pr-seg button:disabled { cursor: default; opacity: .55; }

/* Notes en texte simple */
.notes-simple {
  display: block; width: 100%; min-height: 4.6em; padding: 0; border: 0; outline: none; resize: none; overflow: hidden;
  background: none; color: var(--ink); font: inherit; font-size: 1.02rem; line-height: 1.6;
}
.notes-simple::placeholder { color: var(--muted); opacity: .6; }



/* --------------------------------------------------------------------------
   Liens entre tâches (paramètre « Liens »)
   -------------------------------------------------------------------------- */
.pop.sp-pop { max-width: none; }
.prop-liens { align-items: start; padding: 6px 0; }
.prop-liens dt { padding-top: 9px; }
.prop-liens dd { flex-wrap: wrap; gap: 4px 6px; }
.lien {
  display: inline-flex; align-items: center; max-width: 100%; border-radius: 999px;
  background: color-mix(in srgb, var(--dot, var(--muted)) 16%, transparent);
}
.lien-go {
  display: inline-flex; align-items: center; gap: .4em; min-width: 0; padding: .3em .75em .3em .55em; border: 0; border-radius: 999px;
  background: none; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background-color .15s ease;
}
.lien-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.lien-go .i { flex: none; width: 13px; height: 13px; color: var(--dot, var(--muted)); }
.lien-go:hover { background: color-mix(in srgb, var(--dot, var(--muted)) 14%, transparent); }
.lien-x {
  display: grid; place-items: center; width: 24px; height: 24px; margin: 0 3px 0 -6px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.lien-x .i { width: 11px; height: 11px; }
.lien-x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--late); }
.lien-add { display: inline-flex; align-items: center; gap: .4em; margin-left: 0; }
.lien-add .i { width: 13px; height: 13px; color: var(--muted); }
.prop-liens .lien + .lien-add, .prop-liens .lien-add:first-child { margin-left: 0; }

.pop.lk-pop { width: min(340px, calc(100vw - 16px)); }
.lk-q {
  display: block; width: 100%; margin-bottom: 4px; padding: .5em .7em; border: 1.5px solid var(--rule); border-radius: 8px; outline: none;
  background: color-mix(in srgb, var(--paper-ink) 5%, transparent); color: var(--paper-ink); font: inherit; font-weight: 600;
}
.lk-q:focus { border-color: var(--paper-ink); }
.lk-q::-webkit-search-cancel-button { display: none; }
.lk-list .dot { flex: none; width: 10px; height: 10px; margin: 0 3px; }

.row-liens { display: inline-flex; align-items: center; gap: .25em; }
.row-liens .i { width: 12px; height: 12px; }

/* Frise : flèches sous les barres */
.fz-liens { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fz-liens path { fill: none; stroke: color-mix(in srgb, var(--ink) 62%, transparent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fz-liens path.is-conflit { stroke: var(--late); stroke-dasharray: 5 5; }
.fz-liens marker path { fill: color-mix(in srgb, var(--ink) 62%, transparent); stroke: none; }
.fz-liens #fz-fl-x path { fill: var(--late); }

/* --------------------------------------------------------------------------
   En ligne : écran de connexion (avant Google)
   -------------------------------------------------------------------------- */
.porte {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: var(--bg); animation: fondu .2s ease both;
}
.porte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain-body); opacity: var(--grain-body-o); }
.porte-box { position: relative; z-index: 1; display: grid; justify-items: center; gap: 26px; text-align: center; }
.porte-nom { margin: 0; font-size: clamp(4.5rem, 16vw, 9rem); line-height: .85; }
.porte-msg { margin: 0; max-width: 36ch; color: var(--muted); }
/* Lien de confidentialité de l'écran de connexion (demandé par Google pour la vérification de la marque) */
.porte-lien { color: var(--muted); font-size: .85rem; text-decoration: none; }
.porte-lien:hover, .porte-lien:focus-visible { color: var(--ink); text-decoration: underline; }

/* Ranger à la main (catégories, couleurs) : l'élément attrapé suit le pointeur */
.is-triage, .is-triage * { cursor: grabbing !important; user-select: none !important; }
.is-tri { position: relative; z-index: 30; }
.can-tri .chip-f:not([data-f="all"]):not([data-f="none"]) { cursor: grab; touch-action: none; }
.chip-f.is-tri { box-shadow: 0 8px 18px -4px rgba(0,0,0,.45); }
.fz-glabel[data-tri] { cursor: grab; touch-action: none; transition: background-color .15s ease; }
.fz-glabel[data-tri]:hover { background: color-mix(in srgb, var(--ink) 12%, var(--bg)); }
.fz-lane.is-tri { z-index: 7; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.fz-lane.is-tri .fz-glabel { background: var(--bg); box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); }

/* --------------------------------------------------------------------------
   Frise verticale (petit écran) : les jours descendent, une colonne par groupe
   Mêmes éléments que la frise horizontale (--s, --e, --m en jours), placés
   avec la hauteur d'un jour (--dh) et la largeur d'une colonne (--col).
   -------------------------------------------------------------------------- */
.fz.fz-v { --vh: 44px; min-width: 0; }
.fz-wrap.is-v-fit { overflow: visible; }
.fz-wrap:has(.fz-v) { cursor: auto; }
.fz-v .fz-body { display: flex; align-items: flex-start; gap: 0 6px; width: max-content; min-width: 100%; min-height: 0; padding: 0 0 20px; }
.fz-vgrille { position: relative; height: calc(var(--days) * var(--dh)); }
.fz-vtete { display: flex; align-items: center; height: var(--vh); margin: 0; }

/* Fond : traits horizontaux, jours passés, week-end, aujourd'hui, maintenant */
.fz-v .fz-bg { top: var(--vh); bottom: auto; height: calc(var(--days) * var(--dh)); }
.fz-v .fz-line { top: calc(var(--s) * var(--dh)); bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px solid var(--fz-jour); }
.fz-v .fz-line.is-week { border-top-color: var(--fz-sem); }
.fz-v .fz-line.is-month { border-top: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.fz-v .fz-past { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: calc(var(--n) * var(--dh)); }
.fz-v .fz-we { top: calc(var(--s) * var(--dh)); bottom: auto; left: 0; right: 0; width: auto; height: var(--dh); }
.fz.fz-v .fz-today {
  top: calc(var(--s) * var(--dh)); bottom: auto; left: 0; right: 0; width: auto; height: var(--dh); margin: 0;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
.fz.fz-v[data-echelle="trimestre"] .fz-today { top: calc((var(--s) + .5) * var(--dh)); height: 2px; margin-top: -1px; }
.fz-v .fz-now { top: calc(var(--s) * var(--dh)); bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
.fz-v .fz-now::before { top: 50%; left: 50px; margin: -4px 0 0 -4px; }
.fz-v .fz-hline { display: none; }
.fz-v .fz-hline.is-mid { display: block; top: calc(var(--s) * var(--dh)); bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed color-mix(in srgb, var(--rule) 45%, transparent); }

/* Gouttière des jours, collée à gauche quand les colonnes défilent */
.fz-vjours { position: sticky; left: 0; z-index: 4; flex: none; width: 50px; padding-top: var(--vh); background: var(--bg); }
.fz-vday {
  position: absolute; left: 0; right: 4px; top: calc(var(--s) * var(--dh)); height: var(--dh);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  border-top: 1px solid var(--fz-jour); border-radius: 0 6px 6px 0; color: var(--muted);
}
.fz-vday:first-child { border-top-color: transparent; }
.fz-vday.is-mon { border-top-color: var(--fz-sem); }
.fz-vday.is-first { border-top: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.fz-vday small { font-size: .68rem; font-weight: 600; }
.fz-vday b { font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .98rem; color: var(--ink); }
.fz-vday em { font-style: normal; font-family: var(--f-display); font-stretch: 72%; font-weight: 800; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.fz-vday.is-we > * { opacity: .55; }
.fz-vday.is-past { background: var(--fz-passe); }
.fz-vday.is-past b { color: var(--muted); font-weight: 600; }
.fz-vday.is-today { background: var(--accent-bg); color: var(--accent-ink); }
.fz-vday.is-today b, .fz-vday.is-today em { color: var(--accent-ink); }
.fz-v[data-echelle="trimestre"] .fz-vday { overflow: visible; }
.fz-v[data-echelle="trimestre"] .fz-vday b { font-size: .8rem; }

/* Groupes : une colonne (ou plusieurs quand les tâches se chevauchent), titre en haut */
.fz-v .fz-lane { flex: none; width: calc(var(--cols) * var(--col)); margin: 0; }
/* Tout tient en largeur : les titres des groupes restent visibles en faisant défiler la page */
.fz-v.is-fit .fz-lane .fz-vtete { position: sticky; top: var(--top-h); z-index: 5; background: var(--bg); }
.fz-v .fz-glabel { position: relative; left: auto; display: flex; max-width: 100%; margin: 0 0 0 2px; overflow: hidden; background: var(--bg); }
.fz-v .fz-glabel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-v .fz-glabel small { flex: none; }
.fz-v .fz-row { display: contents; }
.fz-v .fz-bar {
  top: calc(var(--s) * var(--dh) + 2px); bottom: auto; height: calc((var(--e) - var(--s)) * var(--dh) - 4px); min-height: 20px;
  left: calc(var(--c) * var(--col) + 3px); width: calc(var(--col) - 6px); min-width: 0;
  align-items: flex-start; padding: 6px 9px; border-radius: 10px; overflow: hidden;
}
.fz-v .fz-bar.is-grab { transform: translateX(-2px); }
.fz-v .fz-bar.cut-l { border-radius: 3px 3px 10px 10px; }
.fz-v .fz-bar.cut-r { border-radius: 10px 10px 3px 3px; }
.fz-v .fz-bar.cut-l.cut-r { border-radius: 3px; }
.fz-v .fz-label { white-space: normal; overflow-wrap: break-word; hyphens: auto; font-size: .84rem; line-height: 1.15; }
.fz-v .fz-h { left: 0; right: 0; width: auto; height: 10px; cursor: ns-resize; }
.fz-v .fz-h-s { top: 0; bottom: auto; }
.fz-v .fz-h-e { top: auto; bottom: 0; }
.fz-v .fz-h::after { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.fz-v .fz-ms {
  top: calc(var(--m) * var(--dh) - 12px); bottom: auto; height: 24px; left: calc(var(--c) * var(--col) + 6px); width: calc(var(--col) - 10px);
  margin-left: 0; gap: 8px;
}
.fz-v .fz-diamond { width: 14px; height: 14px; border-radius: 3px; }
.fz-v .fz-ms .fz-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
/* Verrouillée : au doigt, la page défile même en partant d'une barre */
.fz-v.is-locked .fz-bar, .fz-v.is-locked .fz-ms { touch-action: pan-x pan-y; }
.fz-v .fz-empty { flex: 1; padding: calc(var(--vh) + 30px) 0 0; }

/* --------------------------------------------------------------------------
   Frise : échelle « Day » (une case par heure) et cours à leurs heures
   -------------------------------------------------------------------------- */
.fz-heures { position: relative; height: 38px; }
.fz-hcell {
  position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--days) * 100%); width: calc(var(--n) / var(--days) * 100%);
  display: flex; align-items: center; padding-left: 8px; border-left: 1px solid var(--rule); overflow: hidden; white-space: nowrap;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .98rem; color: var(--muted);
}
.fz-hcell:first-child { border-left-color: transparent; }
.fz-hcell.is-mid { border-left-color: var(--fz-sem); }
.fz-hcell.is-now { color: var(--ink); }
.fz-hcell.is-now::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: .45em; border-radius: 50%; background: var(--accent); }
.fz[data-echelle="jour"] .fz-hline { border-left-color: color-mix(in srgb, var(--rule) 40%, transparent); }
.fz-wrap:has(.fz[data-echelle="jour"]) { cursor: auto; }
.fz[data-echelle="jour"] .fz-ms.is-debut { margin-left: 4px; }
/* Un meet : la caméra devant le titre */
.fz-label .fz-ic { display: inline-block; width: 14px; height: 14px; margin-right: .4em; vertical-align: -2px; stroke-width: 1.9; }
.fz-v .fz-vhr { height: calc(var(--dh) / 24); justify-content: flex-start; padding-top: 4px; border-radius: 0; font-size: .76rem; font-weight: 600; }
.fz-v .fz-vhr.is-mid { border-top-color: var(--fz-sem); }

/* --------------------------------------------------------------------------
   Meets : ligne de liste, panneau (date, horaire, lien), frise
   -------------------------------------------------------------------------- */
.row-meet { grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }
.tick-meet { cursor: inherit; color: var(--dot, var(--muted)); }
.tick-meet svg.i { width: 21px; height: 21px; }
.row-meet.is-live .tick-meet { color: var(--accent); }
.row-meet.is-passe { opacity: .55; }
.row-live { color: var(--accent); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.row-join {
  display: inline-flex; align-items: center; padding: .3em .9em; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: .86rem; text-decoration: none; white-space: nowrap;
  transition: opacity .15s ease;
}
.row-join:hover { opacity: .85; }
.prop-tiret { margin: 0 2px; color: var(--muted); }
.prop-meet dd { gap: 8px; }
.meet-url {
  flex: 1; min-width: 0; padding: .42em .7em; border: 1.5px solid var(--rule); border-radius: 8px; outline: none;
  background: none; color: var(--ink); font: inherit; font-size: .95rem;
}
.meet-url:focus { border-color: var(--ink); }
.meet-url::placeholder { color: var(--muted); }
.meet-url.is-nudge { animation: signal .8s ease; }
.meet-join { flex: none; }
.fz-row.is-passe .fz-bar, .fz-row.is-passe .fz-ms { opacity: .45; }

/* Tâches : deux colonnes sur un grand écran (ce qui presse / la suite) */
@media (min-width: 1100px) {
  .list.is-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 3.4vw, 56px); align-items: start; }
}

/* Titre de période de la frise : la flèche dessinée (« Nov → Jan »), à la couleur et à la graisse du titre */
.fz-fleche {
  display: inline-block; width: .86em; height: .4em; margin: 0 .1em 0 .14em; vertical-align: .13em; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 5.4; stroke-linecap: butt; stroke-linejoin: miter;
}

/* États « Auto » (Settings › Statuses) : l'état suit l'heure, la case ne se coche pas à la main */
.tick.is-auto { opacity: 1; }
.seg-st.is-auto button:hover:not([aria-pressed="true"]) { background: none; }