/* Planeur v2 — feuille de base. Jetons (docs/05 §2), thèmes, coquille, connexion.
   Une seule hauteur de contrôle; aucune taille en px hors des jetons; les surfaces se séparent
   par le ton, jamais par un trait (2026-09-12). */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('polices/montserrat-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('polices/montserrat-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('polices/source-sans-3-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('polices/source-sans-3-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ─── Jetons hors couleur ─── */
:root {
  --police-titres: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --police-corps: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --taille-titre-page: 24px; --taille-titre-section: 17px; --taille-corps: 15px; --taille-meta: 13px; --taille-petite: 12px; --taille-etiquette: 11px;
  --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-6: 24px; --espace-8: 32px;
  --hauteur-controle: 32px; --largeur-lateral: 240px;
  /* La marque : le mot fait la hauteur du logo (Jason, 2026-09-12). Une seule valeur pour les deux. */
  --taille-marque: 28px;
  --rayon-champ: 6px; --rayon-carte: 10px; --rayon-badge: 999px;
  --transition: 150ms ease;
  /* Une voie de l'échéancier, en ligne seule : barre et espacement. Suit la densité. */
  --hauteur-voie: 28px;
}

/* ─── Thèmes ───
   Chaque thème pose le jeu complet. Clairs : surfaces douces, ton sur ton. Sombres : des gris,
   la couleur réservée à l'action (primaire) et à l'alerte (accent, danger). */

/* Cégep — le défaut clair */
:root, [data-theme='cegep'] {
  color-scheme: light;
  --fond-page: #f4f5f7; --fond-lateral: #eceef1; --fond-surface: #ffffff; --fond-eleve: #e3e6ea;
  --bordure: #e6e8eb; --texte: #1b1e22; --texte-secondaire: #55585a; --texte-tertiaire: #60666c;
  --primaire: #0071b7; --primaire-hover: #005fa3; --primaire-teinte: #e3f0fa; --texte-sur-primaire: #ffffff;
  --accent: #febc11; --accent-teinte: #fff3cf; --accent-texte: #6b4e00;
  --danger: #b43c0b; --danger-teinte: #fde8dd;
  --ombre-carte: 0 1px 2px rgb(27 30 34 / 4%), 0 4px 16px rgb(27 30 34 / 5%);
}
/* Brume */
[data-theme='brume'] {
  color-scheme: light;
  --fond-page: #eef2f6; --fond-lateral: #e4eaf1; --fond-surface: #f9fbfd; --fond-eleve: #d9e1ea;
  --bordure: #dde4ec; --texte: #1e293b; --texte-secondaire: #475569; --texte-tertiaire: #566375;
  --primaire: #0071b7; --primaire-hover: #005fa3; --primaire-teinte: #d9ebf7; --texte-sur-primaire: #ffffff;
  --accent: #f0b429; --accent-teinte: #fbefcc; --accent-texte: #6b4e00;
  --danger: #b91c1c; --danger-teinte: #f9dede;
  --ombre-carte: 0 1px 2px rgb(30 41 59 / 5%), 0 6px 18px rgb(30 41 59 / 6%);
}
/* Papier */
[data-theme='papier'] {
  color-scheme: light;
  --fond-page: #f3f1ec; --fond-lateral: #eae7e0; --fond-surface: #fbfaf7; --fond-eleve: #e1ddd3;
  --bordure: #e3dfd6; --texte: #26241f; --texte-secondaire: #5b574e; --texte-tertiaire: #646053;
  --primaire: #1f6f50; --primaire-hover: #175a40; --primaire-teinte: #dcece4; --texte-sur-primaire: #ffffff;
  --accent: #d9950b; --accent-teinte: #f7e8c4; --accent-texte: #5a3d00;
  --danger: #b42318; --danger-teinte: #f7dcd8;
  --ombre-carte: 0 1px 2px rgb(38 36 31 / 5%), 0 6px 18px rgb(38 36 31 / 6%);
}
/* Lavande */
[data-theme='lavande'] {
  color-scheme: light;
  --fond-page: #f5f5fa; --fond-lateral: #ededf5; --fond-surface: #ffffff; --fond-eleve: #e3e3ee;
  --bordure: #e6e6ef; --texte: #18181b; --texte-secondaire: #52525b; --texte-tertiaire: #63636c;
  --primaire: #4f5bd5; --primaire-hover: #3f4ac2; --primaire-teinte: #e6e8fa; --texte-sur-primaire: #ffffff;
  --accent: #8b5cf6; --accent-teinte: #ede6fd; --accent-texte: #4c2a9c;
  --danger: #c22121; --danger-teinte: #fde2e2;
  --ombre-carte: 0 1px 2px rgb(24 24 27 / 4%), 0 6px 18px rgb(79 91 213 / 6%);
}
/* Ardoise */
[data-theme='ardoise'] {
  color-scheme: light;
  --fond-page: #fafafa; --fond-lateral: #f1f1f1; --fond-surface: #ffffff; --fond-eleve: #e7e7e7;
  --bordure: #ebebeb; --texte: #18181b; --texte-secondaire: #52525b; --texte-tertiaire: #66666c;
  --primaire: #18181b; --primaire-hover: #2f2f34; --primaire-teinte: #ececee; --texte-sur-primaire: #fafafa;
  --accent: #febc11; --accent-teinte: #fff1c9; --accent-texte: #6b4e00;
  --danger: #b91c1c; --danger-teinte: #fbe1e1;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 4%), 0 6px 18px rgb(0 0 0 / 5%);
}

/* Sable */
[data-theme='sable'] {
  color-scheme: light;
  --fond-page: #f3f2ef; --fond-lateral: #ebe9e4; --fond-surface: #fdfcfa; --fond-eleve: #e2dfd8;
  --bordure: #e4e1da; --texte: #242526; --texte-secondaire: #5c5f63; --texte-tertiaire: #5f6164;
  --primaire: #0071b7; --primaire-hover: #005fa3; --primaire-teinte: #e0edf6; --texte-sur-primaire: #ffffff;
  --accent: #e0a615; --accent-teinte: #f8ebc6; --accent-texte: #644800;
  --danger: #b3261e; --danger-teinte: #f8dfdc;
  --ombre-carte: 0 1px 2px rgb(36 37 38 / 5%), 0 6px 18px rgb(36 37 38 / 6%);
}
/* Givre */
[data-theme='givre'] {
  color-scheme: light;
  --fond-page: #f0f4f8; --fond-lateral: #e6edf3; --fond-surface: #ffffff; --fond-eleve: #dbe4ec;
  --bordure: #dfe7ee; --texte: #0f172a; --texte-secondaire: #475569; --texte-tertiaire: #586477;
  --primaire: #0369a1; --primaire-hover: #075985; --primaire-teinte: #dbeefb; --texte-sur-primaire: #ffffff;
  --accent: #14b8a6; --accent-teinte: #d3f3ee; --accent-texte: #0f5e56;
  --danger: #c22121; --danger-teinte: #fde2e2;
  --ombre-carte: 0 1px 2px rgb(15 23 42 / 5%), 0 6px 18px rgb(15 23 42 / 6%);
}

/* Cégep nuit — le défaut sombre */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --fond-page: #1a1d21; --fond-lateral: #141619; --fond-surface: #22262b; --fond-eleve: #2b3036;
    --bordure: #2b3036; --texte: #e6e8ea; --texte-secondaire: #a3a9b0; --texte-tertiaire: #93999f;
    --primaire: #4da3e0; --primaire-hover: #6db6e8; --primaire-teinte: #1b3346; --texte-sur-primaire: #0b1620;
    --accent: #ffc93c; --accent-teinte: #3a2f0e; --accent-texte: #ffe28a;
    --danger: #f87171; --danger-teinte: #3f1a1a;
    --ombre-carte: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
  }
}
[data-theme='cegep-nuit'] {
  color-scheme: dark;
  --fond-page: #1a1d21; --fond-lateral: #141619; --fond-surface: #22262b; --fond-eleve: #2b3036;
  --bordure: #2b3036; --texte: #e6e8ea; --texte-secondaire: #a3a9b0; --texte-tertiaire: #93999f;
  --primaire: #4da3e0; --primaire-hover: #6db6e8; --primaire-teinte: #1b3346; --texte-sur-primaire: #0b1620;
  --accent: #ffc93c; --accent-teinte: #3a2f0e; --accent-texte: #ffe28a;
  --danger: #f87171; --danger-teinte: #3f1a1a;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
}
/* Braise */
[data-theme='braise'] {
  color-scheme: dark;
  --fond-page: #1c1614; --fond-lateral: #161110; --fond-surface: #251d1a; --fond-eleve: #302622;
  --bordure: #302622; --texte: #ece2dc; --texte-secondaire: #b3a49c; --texte-tertiaire: #9b8e88;
  --primaire: #ff6b57; --primaire-hover: #ff8371; --primaire-teinte: #3d221d; --texte-sur-primaire: #1c1614;
  --accent: #ffb45c; --accent-teinte: #3d2c17; --accent-texte: #ffd196;
  --danger: #ff6b57; --danger-teinte: #3d221d;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
}
/* Graphite */
[data-theme='graphite'] {
  color-scheme: dark;
  --fond-page: #161616; --fond-lateral: #101010; --fond-surface: #1e1e1e; --fond-eleve: #2a2a2a;
  --bordure: #2a2a2a; --texte: #ededed; --texte-secondaire: #a1a1a1; --texte-tertiaire: #929292;
  --primaire: #f5f5f5; --primaire-hover: #ffffff; --primaire-teinte: #2a2a2a; --texte-sur-primaire: #111111;
  --accent: #b5e853; --accent-teinte: #26321a; --accent-texte: #d2f28a;
  --danger: #ff5c5c; --danger-teinte: #3a1c1c;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
}
/* Abysse */
[data-theme='abysse'] {
  color-scheme: dark;
  --fond-page: #111722; --fond-lateral: #0c111a; --fond-surface: #18202d; --fond-eleve: #212b3b;
  --bordure: #212b3b; --texte: #e3e8f0; --texte-secondaire: #9ba7b8; --texte-tertiaire: #8a94a3;
  --primaire: #22d3ee; --primaire-hover: #5be0f3; --primaire-teinte: #143540; --texte-sur-primaire: #06171c;
  --accent: #fbbf24; --accent-teinte: #3a2e0f; --accent-texte: #fde68a;
  --danger: #fb7185; --danger-teinte: #3f1d26;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
}
/* Mousse */
[data-theme='mousse'] {
  color-scheme: dark;
  --fond-page: #151a17; --fond-lateral: #101412; --fond-surface: #1c2320; --fond-eleve: #26302b;
  --bordure: #26302b; --texte: #e4eae6; --texte-secondaire: #a0aca5; --texte-tertiaire: #8f9994;
  --primaire: #8fd3a5; --primaire-hover: #a9e0ba; --primaire-teinte: #1f3a2a; --texte-sur-primaire: #0d1a12;
  --accent: #f2c14e; --accent-teinte: #3a2f12; --accent-texte: #ffe08a;
  --danger: #f28b82; --danger-teinte: #3c201d;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
}

/* Carbone — que des gris */
[data-theme='carbone'] {
  color-scheme: dark;
  --fond-page: #202225; --fond-lateral: #1a1c1f; --fond-surface: #292c30; --fond-eleve: #34383d;
  --bordure: #34383d; --texte: #e4e6e8; --texte-secondaire: #a6abb1; --texte-tertiaire: #9ea3a8;
  --primaire: #d3d7db; --primaire-hover: #e9ecef; --primaire-teinte: #3a3f45; --texte-sur-primaire: #17191b;
  --accent: #f5b400; --accent-teinte: #3d3212; --accent-texte: #ffd866;
  --danger: #ff7878; --danger-teinte: #3f2222;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
}
/* Obsidienne — que des noirs */
[data-theme='obsidienne'] {
  color-scheme: dark;
  --fond-page: #050505; --fond-lateral: #000000; --fond-surface: #121212; --fond-eleve: #1e1e1e;
  --bordure: #1e1e1e; --texte: #f2f2f2; --texte-secondaire: #a8a8a8; --texte-tertiaire: #878787;
  --primaire: #0a84ff; --primaire-hover: #3a9bff; --primaire-teinte: #0c2440; --texte-sur-primaire: #1c1c1c;
  --accent: #ffd60a; --accent-teinte: #332b00; --accent-texte: #ffe566;
  --danger: #ff453a; --danger-teinte: #3a1210;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 60%), 0 8px 24px rgb(0 0 0 / 60%);
}
/* Encre */
[data-theme='encre'] {
  color-scheme: dark;
  --fond-page: #0b1220; --fond-lateral: #070d18; --fond-surface: #121b2c; --fond-eleve: #1b2740;
  --bordure: #1b2740; --texte: #e6ecf5; --texte-secondaire: #9fb0c8; --texte-tertiaire: #8291a7;
  --primaire: #3b9ddd; --primaire-hover: #5fb3ea; --primaire-teinte: #163350; --texte-sur-primaire: #06111c;
  --accent: #febc11; --accent-teinte: #3a2e0c; --accent-texte: #ffdd7a;
  --danger: #ff6b7a; --danger-teinte: #3d1a22;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 45%);
}
/* Fjord (Nord) */
[data-theme='fjord'] {
  color-scheme: dark;
  --fond-page: #2e3440; --fond-lateral: #272c37; --fond-surface: #3b4252; --fond-eleve: #434c5e;
  --bordure: #434c5e; --texte: #eceff4; --texte-secondaire: #c3cad6; --texte-tertiaire: #b7beca;
  --primaire: #88c0d0; --primaire-hover: #9fd0de; --primaire-teinte: #3f5765; --texte-sur-primaire: #1f2530;
  --accent: #ebcb8b; --accent-teinte: #4f4633; --accent-texte: #f3dca8;
  --danger: #e0b2b6; --danger-teinte: #4a2f34;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 25%), 0 8px 24px rgb(0 0 0 / 30%);
}
/* Prune */
[data-theme='prune'] {
  color-scheme: dark;
  --fond-page: #17141d; --fond-lateral: #120f17; --fond-surface: #201b29; --fond-eleve: #2b2437;
  --bordure: #2b2437; --texte: #ece7f3; --texte-secondaire: #ada5bb; --texte-tertiaire: #948d9f;
  --primaire: #b794f4; --primaire-hover: #c9adf7; --primaire-teinte: #33284a; --texte-sur-primaire: #16101f;
  --accent: #f6ad55; --accent-teinte: #3f2d17; --accent-texte: #fbc98a;
  --danger: #fc8181; --danger-teinte: #401f22;
  --ombre-carte: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fond-page); color: var(--texte); font-family: var(--police-corps); font-size: var(--taille-corps); line-height: 1.45; }
body { margin: 0; min-height: 100vh; }
h1, h2, h3 { font-family: var(--police-titres); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--primaire); }
:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
/* Ce qui n'est atteignable qu'au programme (tabindex="-1") reçoit le focus sans le montrer : le titre
   d'une page à l'arrivée, le contenu après le lien d'évitement. Les vrais contrôles gardent leur anneau. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.titre-page { font-size: var(--taille-titre-page); font-weight: 600; }
.titre-section { font-size: var(--taille-titre-section); font-weight: 600; margin-top: var(--espace-2); }
.texte-secondaire { color: var(--texte-secondaire); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Contrôles : une hauteur, partout ─── */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2); height: var(--hauteur-controle); padding: 0 var(--espace-4); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--transition), border-color var(--transition); }
.bouton:hover { background: var(--fond-eleve); }
.bouton--primaire { background: var(--primaire); border-color: var(--primaire); color: var(--texte-sur-primaire); }
.bouton--primaire:hover { background: var(--primaire-hover); border-color: var(--primaire-hover); }
.bouton--discret { background: transparent; border-color: transparent; color: var(--texte-secondaire); font-weight: 500; }
.bouton--discret:hover { background: var(--fond-eleve); color: var(--texte); border-color: transparent; }
.bouton--large { width: 100%; }
.selection { height: var(--hauteur-controle); padding: 0 var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-meta); font-weight: 500; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--espace-2); border-radius: var(--rayon-badge); background: var(--fond-eleve); color: var(--texte-secondaire); font-size: var(--taille-petite); font-weight: 600; letter-spacing: 0.01em; }
.badge--danger { background: var(--danger-teinte); color: var(--danger); }
.badge--accent { background: var(--accent-teinte); color: var(--accent-texte); }

.formulaire { display: flex; flex-direction: column; gap: var(--espace-4); }
/* Un formulaire court qui tient sur une ligne, et retombe en colonne quand la place manque. */
.formulaire--ligne { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--espace-3); }
.formulaire--ligne .champ { flex: 1 1 14rem; }
.champ { display: flex; flex-direction: column; gap: var(--espace-1); font-size: var(--taille-meta); color: var(--texte-secondaire); font-weight: 600; }
.champ input { height: var(--hauteur-controle); padding: 0 var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-corps); font-weight: 400; }
.champ input:focus { border-color: var(--primaire); outline: none; box-shadow: 0 0 0 3px var(--primaire-teinte); }
.alerte { padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-champ); font-size: var(--taille-meta); }
.alerte--erreur { background: var(--danger-teinte); color: var(--danger); }

/* ─── Marque ─── */
.marque { display: inline-flex; align-items: center; gap: var(--espace-2); color: var(--texte); text-decoration: none; font-family: var(--police-titres); font-weight: 700; font-size: var(--taille-marque); line-height: 1; }
.marque--grande { --taille-marque: 40px; }
.marque img { display: block; border-radius: var(--rayon-champ); width: var(--taille-marque); height: var(--taille-marque); }

/* ─── Connexion ─── */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--espace-6) var(--espace-4); background: radial-gradient(120% 80% at 20% 0%, var(--primaire-teinte), transparent 60%), var(--fond-page); }
.connexion__carte { width: min(100%, 380px); padding: var(--espace-8); background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: var(--espace-6); }
.connexion__sous-titre { color: var(--texte-tertiaire); font-size: var(--taille-meta); margin-top: calc(-1 * var(--espace-4)); }

/* ─── Coquille : trois tons, aucun trait ─── */
.coquille { display: grid; grid-template-columns: var(--largeur-lateral) 1fr; min-height: 100vh; background: var(--fond-page); }
.coquille--haute { grid-template-columns: 1fr; }
.lateral { display: flex; flex-direction: column; gap: var(--espace-4); padding: var(--espace-4); background: var(--fond-lateral); position: sticky; top: 0; height: 100vh; }
.lateral__pied { margin-top: auto; color: var(--texte-tertiaire); font-size: var(--taille-etiquette); line-height: 1.3; }
.navigation { display: flex; flex-direction: column; gap: 2px; }
.navigation__section { font-size: var(--taille-etiquette); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-tertiaire); padding: var(--espace-3) var(--espace-3) var(--espace-1); }
/* Trois sections (Jason, 2026-09-12) : ce qui est à moi, les tâches, les outils. Le menu latéral
   les nomme; la barre haute, où un titre ne tiendrait pas, les sépare d'un trait. */
.navigation__groupe { display: flex; flex-direction: column; }
.navigation--haute .navigation__groupe { flex-direction: row; align-items: center; gap: 2px; }
.navigation--haute .navigation__section { display: none; }
.navigation--haute .navigation__groupe + .navigation__groupe { margin-left: var(--espace-3); padding-left: var(--espace-3); border-left: 1px solid var(--bordure); }
/* ─── La section spéciale (Jason, 2026-09-12) : les petits outils du quotidien ─── */
.speciale { display: flex; flex-direction: column; gap: var(--espace-2); }
.speciale__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.speciale__titre { margin: 0; font-size: var(--taille-etiquette); font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--texte-tertiaire); }
/* Menu réduit : le rail fait 64 px, un mois n'y tient pas — il s'y écrasait, colonnes collées et
   chiffres superposés (vu en navigateur). Qui réduit le menu veut de la largeur, pas un calendrier
   illisible : la section s'efface avec les noms, et revient avec eux. */
.coquille--menu-reduit .lateral .speciale { display: none; }
/* Centrée : elle surgit de la droite, par-dessus la page, et n'en sort que par son bouton. */
.speciale--surgissante { position: fixed; right: 0; top: var(--hauteur-barre, 80px); z-index: 28; width: 264px;
    max-height: calc(100vh - var(--hauteur-barre, 80px) - var(--espace-4)); overflow-y: auto;
    padding: var(--espace-4); border-radius: var(--rayon-carte) 0 0 var(--rayon-carte);
    background: var(--fond-surface); box-shadow: var(--ombre-carte), 0 12px 32px rgb(0 0 0 / 14%);
    transform: translateX(100%); opacity: 0; pointer-events: none;
    transition: transform var(--transition), opacity var(--transition); }
.coquille--speciale .speciale--surgissante { transform: none; opacity: 1; pointer-events: auto; }
.speciale__fermer { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--rayon-champ);
    background: transparent; color: var(--texte-tertiaire); cursor: pointer; }
.speciale__fermer:hover { background: var(--fond-eleve); color: var(--texte); }
/* Le bouton qui l'appelle, dans la barre. */
.appel-speciale { display: inline-flex; align-items: center; gap: 6px; height: var(--hauteur-controle); padding: 0 var(--espace-2);
    border: 1px solid transparent; border-radius: var(--rayon-champ); background: transparent; color: var(--texte-secondaire); cursor: pointer; }
.appel-speciale:hover { background: var(--fond-eleve); color: var(--texte); }
.appel-speciale[aria-expanded="true"] { background: var(--primaire-teinte); border-color: var(--primaire); color: var(--primaire); }
.appel-speciale .bouton__touche { background: var(--fond-eleve); color: var(--texte-tertiaire); }
@media (max-width: 720px) { .appel-speciale .bouton__touche { display: none; } }

/* ─── Le calendrier du menu (Jason, 2026-09-12) : au bout du menu latéral, et derrière la date
   dans la barre haute. Il ne dit que ce qu'on sait : le mois, aujourd'hui, le week-end. */
.calendrier-mini { display: flex; flex-direction: column; gap: var(--espace-2); padding-top: var(--espace-2); }
.calendrier-mini__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-1); }
/* Replier le calendrier : le chevron tourne, et il ne reste que le mois. */
.calendrier-mini__bascule { display: flex; }
.calendrier-mini__bascule button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--rayon-champ);
    background: transparent; color: var(--texte-tertiaire); cursor: pointer; }
.calendrier-mini__bascule button:hover { background: var(--fond-eleve); color: var(--texte); }
.calendrier-mini__bascule .icone { width: 13px; height: 13px; transform: rotate(90deg); transition: transform var(--transition); }
.calendrier-mini--replie .calendrier-mini__bascule .icone { transform: rotate(-90deg); }
.calendrier-mini--replie { gap: 0; }
.calendrier-mini__mois { flex: 1 1 auto; text-align: center; color: var(--texte-secondaire); font-size: var(--taille-petite);
    font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.calendrier-mini__mois::first-letter { text-transform: uppercase; }
.calendrier-mini__mois:hover { color: var(--texte); }
.calendrier-mini__fleche { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--rayon-champ); color: var(--texte-tertiaire); }
.calendrier-mini__fleche .icone { width: 14px; height: 14px; transform: rotate(180deg); }
.calendrier-mini__fleche--suivant .icone { transform: none; }
.calendrier-mini__fleche:hover { background: var(--fond-eleve); color: var(--texte); }
.calendrier-mini__grille { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--taille-petite); }
.calendrier-mini__grille th { padding-bottom: 2px; color: var(--texte-tertiaire); font-size: var(--taille-etiquette); font-weight: 600; }
.calendrier-mini__grille td { padding: 1px; text-align: center; }
.calendrier-mini__grille td a { display: grid; place-items: center; height: 22px; border-radius: var(--rayon-champ);
    color: var(--texte-secondaire); text-decoration: none; font-variant-numeric: tabular-nums; }
.calendrier-mini__grille td a:hover { background: var(--fond-eleve); color: var(--texte); }
/* Ces deux règles portent le « td » exprès : sans lui, « .calendrier-mini__grille td a » l'emporte
   et le jour d'aujourd'hui s'écrivait en gris sur le bleu — illisible (vu en navigateur). */
.calendrier-mini__grille td.calendrier-mini__dehors a { color: var(--texte-tertiaire); opacity: .55; }
.calendrier-mini__grille td.calendrier-mini__aujourdhui a,
.calendrier-mini__grille td.calendrier-mini__aujourdhui a:hover { background: var(--primaire); color: var(--texte-sur-primaire); font-weight: 700; }
/* Dans la barre, le mois entier tient en petit, sur les deux rangées, à droite (Jason,
   2026-09-12 : « a small full month version. I know it will be small but try »). */

/* « Plus » : la barre ne porte que ce qui est à moi, le reste tient derrière un bouton. */
/* Le trait sépare « À moi » du reste; il n'a pas à creuser un fossé. Réduit, les entrées ne sont
   qu'à 2 px l'une de l'autre : 27 px avant « Plus » sautaient aux yeux (Jason, 2026-09-12). */
.plus-bac { position: relative; display: flex; border-left: 1px solid var(--bordure); }
/* Le compte se pose sur le coin du bouton, pas dans le vide au-dessus de lui. */
.plus__bouton { position: relative; }
.plus { position: relative; }
.plus__bouton { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--espace-3);
    border-radius: var(--rayon-champ); color: var(--texte-secondaire); font-weight: 500; }
.plus__bouton::-webkit-details-marker { display: none; }
.plus__bouton:hover { background: var(--fond-eleve); color: var(--texte); }
.plus__bouton:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.plus[open] .plus__bouton { background: var(--fond-eleve); color: var(--texte); }
/* Fermé, le panneau doit vraiment disparaître : son « display: flex » l'emportait sur la règle
   du navigateur qui cache le contenu d'un <details> fermé, et ses liens restaient dans la page. */
.plus:not([open]) .plus__panneau { display: none; }
.plus__panneau { position: absolute; right: 0; top: calc(100% + var(--espace-2)); z-index: 25; display: flex; gap: var(--espace-6);
    padding: var(--espace-4); border-radius: var(--rayon-carte); background: var(--fond-surface); text-align: left;
    box-shadow: var(--ombre-carte), 0 0 0 1px color-mix(in srgb, var(--texte) 6%, transparent); }
.plus__panneau .navigation__groupe { flex-direction: column; align-items: stretch; min-width: 190px; margin: 0; padding: 0; border: 0; }
.plus__panneau .navigation__section { display: block; padding: 0 var(--espace-3) var(--espace-2); }
.plus__panneau .navigation__lien { height: var(--hauteur-controle); }
/* L'arc pend sous le bouton, et s'ouvre vers la gauche : à droite, il sortirait de l'écran. */
.plus-bac > .eventail { left: 50%; top: 100%; }
.plus-bac .eventail__cible { --dx: calc(-1 * var(--y)); --dy: var(--x); }
.plus-bac .eventail__fond { transform: translate(-50%, -50%) rotate(90deg) scale(-1, 1); }
.plus-bac .eventail__nom { left: 50%; top: 58px; transform: translateX(-50%); }
/* Menu réduit : le titre ne tient pas dans le rail, le trait le remplace. */
.coquille--menu-reduit .lateral .navigation__groupe + .navigation__groupe { margin-top: var(--espace-2); padding-top: var(--espace-2); border-top: 1px solid var(--bordure); }
.navigation__lien { display: flex; align-items: center; gap: var(--espace-2); height: var(--hauteur-controle); padding: 0 var(--espace-3); border-radius: var(--rayon-champ); color: var(--texte-secondaire); text-decoration: none; font-weight: 500; position: relative; }
.navigation__lien > span { flex: 1; }
.navigation__lien .icone { color: var(--texte-tertiaire); flex: none; }
.navigation__lien.active .icone { color: var(--primaire); }
.navigation__lien:hover { background: var(--fond-eleve); color: var(--texte); }
.navigation__lien.active { background: var(--fond-surface); color: var(--texte); font-weight: 600; box-shadow: var(--ombre-carte); }
.navigation__lien.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--primaire); }
.navigation__lien--a-venir { color: var(--texte-tertiaire); cursor: default; }
.navigation__lien--a-venir:hover { background: transparent; color: var(--texte-tertiaire); }
.navigation__lien small { font-size: var(--taille-etiquette); text-transform: uppercase; letter-spacing: 0.04em; background: var(--fond-eleve); border-radius: var(--rayon-badge); padding: 0 var(--espace-2); line-height: 1.7; }
.principal { display: flex; flex-direction: column; min-width: 0; }
.barre { display: grid; grid-template-columns: 1fr minmax(200px, 460px) 1fr; align-items: center; gap: var(--espace-4); min-height: 56px; padding: var(--espace-2) var(--espace-6); background: var(--fond-page); position: sticky; top: 0; z-index: 2; }
.barre__place { min-width: 0; }
.barre__navigation { grid-column: 1 / -1; justify-self: center; justify-content: center; }
.barre__actions { display: flex; align-items: center; gap: var(--espace-2); justify-self: end; }
.pastille { display: inline-grid; place-items: center; width: var(--hauteur-controle); height: var(--hauteur-controle); border-radius: 50%; background: var(--primaire); color: var(--texte-sur-primaire); font-family: var(--police-titres); font-size: var(--taille-petite); font-weight: 700; }
.contenu { padding: var(--espace-4) var(--espace-6) var(--espace-8); display: flex; flex-direction: column; gap: var(--espace-4); }
.page { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.page__entete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espace-4); flex-wrap: wrap; }
/* Les actions d'une page se rangent à droite, même quand elles passent sous le titre (Jason, 2026-09-12). */
.page__actions { display: flex; align-items: center; gap: var(--espace-2); margin-left: auto; }
.page__outils { display: flex; align-items: center; gap: var(--espace-2); justify-content: flex-start; flex-wrap: wrap; margin-top: calc(-1 * var(--espace-2)); }
.bouton__touche { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 10px; line-height: 1.4; padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, var(--texte-sur-primaire) 22%, transparent); }
.coquille--haute .contenu { max-width: 860px; width: 100%; margin: 0 auto; }

.blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--espace-4); margin-top: var(--espace-2); }
.bloc { padding: var(--espace-4); background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: var(--espace-2); }
.bloc h2 { font-size: var(--taille-titre-section); font-weight: 600; }

/* ─── Galerie des thèmes ─── */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--espace-4); }
.vignette { background: var(--fond-page); color: var(--texte); border-radius: var(--rayon-carte); overflow: hidden; box-shadow: var(--ombre-carte); font-family: var(--police-corps); }
.vignette__coquille { display: grid; grid-template-columns: 120px 1fr; min-height: 200px; }
.vignette__lateral { background: var(--fond-lateral); padding: var(--espace-3); display: flex; flex-direction: column; gap: 2px; }
.vignette__marque { font-family: var(--police-titres); font-weight: 700; margin-bottom: var(--espace-2); }
.vignette__lien { font-size: var(--taille-meta); padding: var(--espace-1) var(--espace-2); border-radius: var(--rayon-champ); color: var(--texte-secondaire); position: relative; }
.vignette__lien--actif { background: var(--fond-surface); color: var(--texte); font-weight: 600; box-shadow: var(--ombre-carte); }
.vignette__lien--actif::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: var(--primaire); }
.vignette__principal { padding: var(--espace-3); }
.specimen { background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: var(--espace-3); display: flex; flex-direction: column; gap: var(--espace-3); font-size: var(--taille-meta); }
.specimen__rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.specimen__rangee .bouton { height: 28px; padding: 0 var(--espace-3); font-size: var(--taille-petite); }
.specimen__table { width: 100%; border-collapse: collapse; }
.specimen__table td { padding: var(--espace-1) var(--espace-2); white-space: nowrap; }
.specimen__table tr:hover td { background: var(--fond-eleve); }
.specimen__ligne--important td:first-child { color: var(--danger); font-weight: 600; }
.specimen__chiffre { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-secondaire); width: 1%; }
.point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--texte-tertiaire); margin-right: var(--espace-2); vertical-align: middle; }
.point--danger { background: var(--danger); }
.point--accent { background: var(--accent); }
.jauge { display: block; width: 90px; height: 4px; border-radius: 2px; background: var(--fond-eleve); overflow: hidden; }
.jauge > span { display: block; height: 100%; background: var(--primaire); }
.specimen__ligne--important .jauge > span { background: var(--danger); }
.vignette__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4); background: var(--fond-surface); }
.vignette__pied strong { font-family: var(--police-titres); display: block; }
.vignette__description { color: var(--texte-secondaire); font-size: var(--taille-meta); }

@media (max-width: 720px) {
  .coquille { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; gap: var(--espace-3); }
  .navigation { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .navigation__section { width: 100%; }
  .lateral__pied { display: none; }
  .barre { grid-template-columns: 1fr auto; padding: var(--espace-2) var(--espace-4); }
  .recherche { grid-column: 1 / -1; grid-row: 2; }
  .contenu { padding: var(--espace-4); }
  .galerie { grid-template-columns: 1fr; }
  .vignette__coquille { grid-template-columns: 1fr; }
}

/* ─── Barre haute ─── */
/* ─── Menu réduit aux icônes (Jason, 2026-09-12) : une préférence, les deux dispositions ─── */
.lateral__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.bascule-menu { display: flex; }
.bascule-menu__bouton { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--rayon-champ);
    background: transparent; color: var(--texte-tertiaire); cursor: pointer; transition: background var(--transition), color var(--transition); }
.bascule-menu__bouton:hover { background: var(--fond-eleve); color: var(--texte); }
.bascule-menu__bouton .icone { transform: rotate(180deg); transition: transform var(--transition); }
.coquille--menu-reduit .bascule-menu__bouton .icone { transform: none; }
/* Le panneau « Plus » n'est jamais réduit : c'est un menu qu'on ouvre pour **lire** les noms
   (Jason, 2026-09-12 — sept icônes sans nom ne se lisent pas). Les règles du menu réduit
   s'arrêtent donc à son seuil. */
.coquille--menu-reduit .plus__panneau .navigation__mot { position: static; width: auto; height: auto; margin: 0; clip-path: none; white-space: normal; }
.coquille--menu-reduit .plus__panneau .navigation__section { display: block; }
.coquille--menu-reduit .plus__panneau .navigation__compte { position: static; min-width: 20px; height: 20px; padding: 0 6px; font-size: var(--taille-etiquette); }
.coquille--menu-reduit .plus__panneau .navigation__lien { justify-content: flex-start; padding: 0 var(--espace-3); }

/* Réduit : le nom sort de la vue mais reste lu par les lecteurs d'écran; l'infobulle le rend à la souris. */
.coquille--menu-reduit .navigation__mot, .coquille--menu-reduit .marque__mot {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.coquille--menu-reduit.coquille--laterale { grid-template-columns: 64px 1fr; }
.coquille--menu-reduit .lateral { padding: var(--espace-3) var(--espace-2); }
.coquille--menu-reduit .lateral__entete { justify-content: center; flex-direction: column; gap: var(--espace-2); }
.coquille--menu-reduit .lateral .navigation__lien { justify-content: center; padding: 0; }
.coquille--menu-reduit .lateral__pied { display: none; }
/* Le titre de section et le pied ne tiennent pas dans 64 px : ils débordaient sur le contenu. */
.coquille--menu-reduit .navigation__section { display: none; }
.coquille--menu-reduit .navigation--haute .navigation__lien { padding: 0 var(--espace-2); }
/* Le compte des non lus garde sa place : c'est justement ce qu'on veut voir de loin. */
.coquille--menu-reduit .navigation__compte { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 9px; }

.navigation--haute { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1 1 auto; }
.navigation--haute .navigation__lien { height: 30px; padding: 0 var(--espace-3); white-space: nowrap; gap: 6px; }
.navigation--haute .navigation__lien.active::before { left: var(--espace-3); right: var(--espace-3); top: auto; bottom: -1px; width: auto; height: 2px; }
.navigation--haute .navigation__lien.active { background: transparent; box-shadow: none; }
.coquille--haute .barre { min-height: 60px; row-gap: var(--espace-1); padding-bottom: var(--espace-1); background: var(--fond-lateral); }
/* Trois colonnes, et pas quatre : une colonne de plus à droite décale le champ de recherche et
   tout le contenu vers la gauche (Jason, 2026-09-12 : « shit is no longer centered »). Le mois
   voyage donc **avec le menu**, juste après la dernière entrée. */
.coquille--haute .navigation--haute { min-width: 0; }

/* ─── Contrôles supplémentaires ─── */
.bouton--petit { height: 26px; padding: 0 var(--espace-2); font-size: var(--taille-petite); }
.bouton--icone { width: var(--hauteur-controle); padding: 0; }
.choix { display: inline-flex; }
.segments { display: inline-flex; background: var(--fond-eleve); border-radius: var(--rayon-champ); padding: 2px; }
.segments__bouton { height: calc(var(--hauteur-controle) - 4px); padding: 0 var(--espace-3); border: 0; border-radius: calc(var(--rayon-champ) - 2px); background: transparent; color: var(--texte-secondaire); font: inherit; font-size: var(--taille-meta); font-weight: 600; cursor: pointer; }
.segments__bouton--actif { background: var(--fond-surface); color: var(--texte); box-shadow: var(--ombre-carte); }
.badge--primaire { background: var(--primaire-teinte); color: var(--primaire); }
.icone { display: inline-block; vertical-align: -3px; flex: none; }

/* ─── Bandeau ─── */
.bandeau { display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-champ); font-size: var(--taille-meta); font-weight: 500; }
.bandeau--accent { background: var(--accent-teinte); color: var(--accent-texte); }
.bandeau--danger { background: var(--danger-teinte); color: var(--danger); }
.bandeau__action { margin-left: auto; font-weight: 600; color: inherit; }

/* ─── Groupes et rangées ─── */
.liste { display: flex; flex-direction: column; gap: var(--espace-4); }
.groupe { background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); overflow: hidden; }
.groupe__entete { display: flex; align-items: center; justify-content: space-between; padding: var(--espace-3) var(--espace-4) var(--espace-2); }
.groupe__titre { font-size: var(--taille-meta); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--texte-secondaire); display: flex; align-items: center; gap: var(--espace-2); }
.groupe--danger .groupe__titre { color: var(--danger); } .groupe--primaire .groupe__titre { color: var(--primaire); }
.groupe__compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rayon-badge); background: var(--fond-eleve); color: var(--texte-secondaire); font-size: var(--taille-etiquette); font-weight: 700; font-family: var(--police-corps); }
.rangees { list-style: none; margin: 0; padding: 0 var(--espace-2) var(--espace-2); display: flex; flex-direction: column; }
.rangees__vide { padding: var(--espace-2) var(--espace-3); color: var(--texte-tertiaire); font-size: var(--taille-meta); }
.rangee { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 72px; align-items: center; gap: var(--espace-3); padding: var(--espace-2) var(--espace-2); border-radius: var(--rayon-champ); cursor: pointer; }
.rangee:hover { background: var(--fond-eleve); }
.rangee--ouverte { background: var(--primaire-teinte); }
.rangee--terminee .rangee__titre { color: var(--texte-tertiaire); text-decoration: line-through; }
.rangee__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rangee__titre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangee__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); font-size: var(--taille-petite); color: var(--texte-tertiaire); }
.rangee__projet { color: var(--texte-secondaire); }
.rangee__date { text-align: right; font-size: var(--taille-meta); color: var(--texte-secondaire); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rangee__date--retard { color: var(--danger); font-weight: 600; }
.rangees--simples .rangee { grid-template-columns: auto 1fr; padding: var(--espace-1) var(--espace-2); }
.repli summary { cursor: pointer; font-size: var(--taille-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--texte-tertiaire); padding: var(--espace-2) var(--espace-4); display: flex; align-items: center; gap: var(--espace-2); }
.repli[open] summary { margin-bottom: var(--espace-2); }

.coche { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--texte-tertiaire); color: transparent; flex: none; cursor: pointer; }
.coche:hover { border-color: var(--primaire); }
.coche--cochee { background: var(--primaire); border-color: var(--primaire); color: var(--texte-sur-primaire); }
.pastille--petite { width: 24px; height: 24px; font-size: 10px; }

.puce { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 4px; font-size: var(--taille-etiquette); font-weight: 600; letter-spacing: 0.01em; background: var(--fond-eleve); color: var(--texte-secondaire); }
.puce--bleu { background: color-mix(in srgb, #3b82f6 18%, transparent); color: color-mix(in srgb, #3b82f6 70%, var(--texte)); }
.puce--rouge { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.puce--vert { background: color-mix(in srgb, #22c55e 18%, transparent); color: color-mix(in srgb, #16a34a 75%, var(--texte)); }
.puce--violet { background: color-mix(in srgb, #8b5cf6 18%, transparent); color: color-mix(in srgb, #7c3aed 75%, var(--texte)); }
.puce--ambre { background: var(--accent-teinte); color: var(--accent-texte); }

.alerte-ligne { display: inline-flex; align-items: center; gap: 4px; font-size: var(--taille-etiquette); font-weight: 600; }
.alerte-ligne .icone { width: 13px; height: 13px; }
.alerte-ligne--danger { color: var(--danger); } .alerte-ligne--accent { color: var(--accent-texte); }
.priorite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 4px; font-size: var(--taille-etiquette); font-weight: 800; }
.priorite--critique { background: var(--danger); color: #fff; } .priorite--haute { background: var(--accent); color: #3a2a00; }

.encart__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.encart__ligne { display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-1) 0; font-size: var(--taille-meta); }
.encart__ligne .icone { color: var(--texte-tertiaire); }
.encart__texte { flex: 1; min-width: 0; color: var(--texte); text-decoration: none; }
.encart__texte:hover { color: var(--primaire); }
.panneau { position: sticky; top: 72px; }
.panneau__fermer { position: absolute; top: var(--espace-2); right: var(--espace-2); z-index: 1; }
.panneau .fiche { padding-right: calc(var(--espace-4) + var(--hauteur-controle)); }
.voile { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: var(--espace-4); }
.voile__fond { position: absolute; inset: 0; background: rgb(0 0 0 / 45%); }
.dialogue { position: relative; width: min(100%, 560px); max-height: calc(100vh - 2 * var(--espace-4)); overflow: auto; border-radius: var(--rayon-carte); }
.dialogue__fermer { position: absolute; top: var(--espace-2); right: var(--espace-2); z-index: 1; }
.dialogue .fiche { padding-right: calc(var(--espace-4) + var(--hauteur-controle)); }
.rangee__titre { color: inherit; text-decoration: none; }
.fiche { background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-4); }
.fiche__entete { display: flex; align-items: flex-start; gap: var(--espace-3); }
.fiche__entete .coche { margin-top: 3px; }
.fiche__titre { font-size: var(--taille-titre-section); font-weight: 600; line-height: 1.3; }
.fiche__alertes { display: flex; gap: var(--espace-3); flex-wrap: wrap; }
.fiche__alertes:empty { display: none; }
.proprietes { display: grid; grid-template-columns: 96px 1fr; gap: var(--espace-2) var(--espace-3); margin: 0; font-size: var(--taille-meta); align-items: center; }
.proprietes dt { color: var(--texte-tertiaire); }
.proprietes dd { margin: 0; display: flex; align-items: center; gap: var(--espace-1); flex-wrap: wrap; }
.proprietes__retard { color: var(--danger); font-weight: 600; }
.fiche__section { display: flex; flex-direction: column; gap: var(--espace-2); }
.fiche__section h3 { font-size: var(--taille-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--texte-secondaire); display: flex; align-items: center; gap: var(--espace-2); }
.commentaire { display: flex; gap: var(--espace-2); font-size: var(--taille-meta); }
.commentaire__auteur { font-weight: 600; } .commentaire__quand { color: var(--texte-tertiaire); }

@media (max-width: 900px) {
  .panneau { position: static; }
}

/* ─── Mes paramètres ─── */
.page--etroite { max-width: 760px; }
.reglages { background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-4); }
.reglages__titre { font-size: var(--taille-titre-section); font-weight: 600; display: flex; align-items: center; gap: var(--espace-2); }
.reglages__titre .icone { color: var(--texte-tertiaire); }
.formulaire--grille { gap: var(--espace-4); }
.champ small { font-weight: 400; color: var(--texte-tertiaire); }
.champ input[readonly] { color: var(--texte-secondaire); background: var(--fond-page); }
.champ select.selection { height: var(--hauteur-controle); width: 100%; font-weight: 400; font-size: var(--taille-corps); }
.champ--choix { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.champ--choix legend { padding: 0; margin-bottom: var(--espace-1); font-weight: 600; font-size: var(--taille-meta); color: var(--texte-secondaire); }
.choix-radio { display: flex; gap: var(--espace-3); align-items: flex-start; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-champ); background: var(--fond-page); cursor: pointer; font-weight: 400; color: var(--texte); }
.choix-radio:has(input:checked) { background: var(--primaire-teinte); }
.choix-radio input { margin-top: 4px; accent-color: var(--primaire); }
.choix-radio span { display: flex; flex-direction: column; gap: 1px; }
.choix-radio small { color: var(--texte-tertiaire); }
.cases { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); }
.cases--colonne { flex-direction: column; gap: var(--espace-2); }
.case { display: inline-flex; align-items: center; gap: var(--espace-2); font-weight: 400; color: var(--texte); cursor: pointer; }
.case input { accent-color: var(--primaire); width: 16px; height: 16px; margin: 0; }
.case small { color: var(--texte-tertiaire); margin-left: var(--espace-1); }
.case--fixe { color: var(--texte-secondaire); cursor: default; }
.jours { display: flex; align-items: center; gap: var(--espace-1); flex-wrap: wrap; }
.jour { position: relative; display: inline-grid; place-items: center; width: var(--hauteur-controle); height: var(--hauteur-controle); border-radius: 50%; background: var(--fond-page); color: var(--texte-secondaire); font-weight: 700; cursor: pointer; }
.jour input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.jour:has(input:checked) { background: var(--primaire); color: var(--texte-sur-primaire); }
.jour:has(input:focus-visible) { outline: 2px solid var(--primaire); outline-offset: 2px; }
.jours__a { margin: 0 var(--espace-2); color: var(--texte-tertiaire); }
.champ .jours .selection { width: auto; }
.formulaire__actions { display: flex; justify-content: flex-end; }
.prereglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--espace-3); }
.prereglage { display: flex; flex-direction: column; gap: var(--espace-1); padding: var(--espace-3); border-radius: var(--rayon-champ); background: var(--fond-page); font-size: var(--taille-meta); }
.prereglage--actif { background: var(--primaire-teinte); }
.prereglage .bouton { align-self: flex-start; margin-top: var(--espace-1); }
.bandeau--succes { background: color-mix(in srgb, #22c55e 18%, transparent); color: color-mix(in srgb, #15803d 80%, var(--texte)); }

/* ─── Recherche globale ─── */
.recherche { position: relative; display: flex; align-items: center; width: 100%; justify-self: center; }
.recherche .icone { position: absolute; left: var(--espace-3); color: var(--texte-tertiaire); pointer-events: none; }
.recherche input { width: 100%; height: var(--hauteur-controle); padding: 0 56px 0 36px; border: 1px solid transparent; border-radius: var(--rayon-badge); background: var(--fond-eleve); color: var(--texte); font: inherit; font-size: var(--taille-meta); }
.recherche input::placeholder { color: var(--texte-tertiaire); }
.recherche input:focus { outline: none; background: var(--fond-surface); border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-teinte); }
.recherche input::-webkit-search-cancel-button { appearance: none; }
.recherche__touche { position: absolute; right: var(--espace-2); font-family: var(--police-corps); font-size: 10px; color: var(--texte-tertiaire); background: var(--fond-surface); border-radius: 4px; padding: 1px 5px; box-shadow: var(--ombre-carte); pointer-events: none; }
.recherche input:focus ~ .recherche__touche { display: none; }
.resultats--ici .resultats__titre { color: var(--primaire); }
.resultats { display: flex; flex-direction: column; gap: var(--espace-2); }
.resultats__titre { font-size: var(--taille-meta); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--texte-secondaire); display: flex; align-items: center; gap: var(--espace-2); }
.resultats__liste { list-style: none; margin: 0; padding: var(--espace-1); background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); display: flex; flex-direction: column; }
.resultat { display: flex; align-items: center; gap: var(--espace-3); width: 100%; padding: var(--espace-2) var(--espace-3); border: 0; border-radius: var(--rayon-champ); background: transparent; color: var(--texte); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.resultat:hover, .resultat:focus-visible { background: var(--fond-eleve); }
.resultat:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; }
.resultat > .icone { color: var(--texte-tertiaire); }
.resultat__corps { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.resultat__titre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat__sous { color: var(--texte-tertiaire); font-size: var(--taille-petite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Menu du compte ─── */
.menu-compte { position: relative; }
.menu-compte__bouton { list-style: none; cursor: pointer; display: inline-flex; border-radius: 50%; }
.menu-compte__bouton::-webkit-details-marker { display: none; }
.menu-compte__bouton:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.menu-compte__liste { position: absolute; right: 0; top: calc(100% + var(--espace-2)); width: 280px; z-index: 20; background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte), 0 0 0 1px color-mix(in srgb, var(--texte) 6%, transparent); padding: var(--espace-2); display: flex; flex-direction: column; gap: 2px; }
.menu-compte__identite { display: flex; flex-direction: column; padding: var(--espace-2) var(--espace-3) var(--espace-3); font-size: var(--taille-meta); }
.menu-compte__lien { display: flex; align-items: center; gap: var(--espace-2); width: 100%; height: var(--hauteur-controle); padding: 0 var(--espace-3); border: 0; border-radius: var(--rayon-champ); background: transparent; color: var(--texte); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.menu-compte__lien:hover { background: var(--fond-eleve); }
.menu-compte__lien .icone { color: var(--texte-tertiaire); }
.menu-compte__choix { display: flex; flex-direction: column; gap: var(--espace-2); padding: var(--espace-2) var(--espace-3); }
.menu-compte__choix .choix, .menu-compte__choix .selection { width: 100%; }
.choix-affichage__segments { display: flex; width: 100%; }
.choix-affichage__segments .segments__bouton { flex: 1; padding: 0 var(--espace-2); white-space: nowrap; }
.menu-compte__forme { display: contents; }

/* ─── Arriver sur une section par une ancre : sous la barre collante, pas dessous (Jason, 2026-09-12) ─── */
.coquille { --hauteur-barre: 56px; }
.coquille--haute { --hauteur-barre: 100px; }
.reglages, .groupe, .titre-section, .repli { scroll-margin-top: calc(var(--hauteur-barre) + var(--espace-4)); }
.reglages:target, .groupe:target { animation: cible 1.6s ease-out; }
@keyframes cible { 0% { box-shadow: 0 0 0 3px var(--primaire); } 100% { box-shadow: var(--ombre-carte); } }
@media (prefers-reduced-motion: reduce) { .reglages:target, .groupe:target { animation: none; } }
@media (max-width: 720px) { .coquille, .coquille--haute { --hauteur-barre: 140px; } }

/* ─── Liste dynamique sous la recherche ─── */
.recherche__liste { position: absolute; left: 0; right: 0; top: calc(100% + var(--espace-1)); z-index: 30; margin: 0; padding: var(--espace-1); list-style: none; background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte), 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent); max-height: min(60vh, 520px); overflow: auto; text-align: left; }
.recherche__groupe { padding: var(--espace-2) var(--espace-3) var(--espace-1); font-size: var(--taille-etiquette); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texte-tertiaire); }
.recherche__option a { display: flex; flex-direction: column; gap: 1px; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-champ); color: var(--texte); text-decoration: none; }
.recherche__option[aria-selected='true'] a { background: var(--primaire-teinte); }
.recherche__titre { font-weight: 500; font-size: var(--taille-corps); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche__sous { color: var(--texte-tertiaire); font-size: var(--taille-petite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche__tout { padding: var(--espace-2) var(--espace-3) var(--espace-1); font-size: var(--taille-etiquette); color: var(--texte-tertiaire); text-align: right; }

/* ─── Commandes de recherche ─── */
.verrou { display: inline-flex; align-items: center; gap: var(--espace-1); vertical-align: middle; margin-right: var(--espace-2); padding: 2px var(--espace-2) 2px var(--espace-1); border-radius: var(--rayon-badge); background: var(--primaire-teinte); color: var(--primaire); font-family: var(--police-corps); font-size: var(--taille-meta); font-weight: 700; }
.verrou .icone { width: 14px; height: 14px; }
.recherche__option[data-commande] .recherche__titre { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--taille-meta); }
kbd { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.9em; background: var(--fond-eleve); border-radius: 4px; padding: 0 5px; }
.fiche--nouvelle .formulaire { gap: var(--espace-3); }
.champ--titre input { height: 44px; font-size: var(--taille-titre-section); font-weight: 600; }
.champ textarea { padding: var(--espace-2) var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-corps); font-weight: 400; resize: vertical; }
.champ textarea:focus { border-color: var(--primaire); outline: none; box-shadow: 0 0 0 3px var(--primaire-teinte); }
.bouton[disabled] { opacity: .55; cursor: not-allowed; }
.bouton__touche--sobre { background: var(--fond-eleve); color: var(--texte-tertiaire); }
.formulaire__actions { gap: var(--espace-2); }
.dialogue .fiche--nouvelle { padding-right: var(--espace-4); }

/* ─── Jalons entre les tâches ─── */
.rangee--jalon { cursor: default; background: linear-gradient(90deg, var(--accent-teinte), transparent 60%); border-left: 3px solid var(--accent); border-radius: var(--rayon-champ); }
.rangee--jalon:hover { background: linear-gradient(90deg, var(--accent-teinte), transparent 60%); }
.jalon__marque { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--accent-texte); }
.puce--jalon { background: var(--accent); color: #3a2a00; }
.rangee__date--jalon { color: var(--accent-texte); font-weight: 600; }
.bascule { display: inline-flex; align-items: center; gap: var(--espace-2); height: var(--hauteur-controle); padding: 0 var(--espace-3) 0 var(--espace-2); border: 0; border-radius: var(--rayon-badge); background: var(--fond-eleve); color: var(--texte-secondaire); font: inherit; font-size: var(--taille-meta); font-weight: 600; cursor: pointer; }
.bascule--active { color: var(--texte); }
.bascule__piste { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--texte-tertiaire); transition: background var(--transition); }
.bascule__curseur { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--transition); }
.bascule--active .bascule__piste { background: var(--accent); }
.bascule--active .bascule__curseur { transform: translateX(12px); }
.bascule .icone { color: var(--accent-texte); }

/* ─── Accessibilité (D29-4) ─── */
.lien-evitement { position: absolute; left: var(--espace-3); top: -60px; z-index: 50; display: inline-flex; align-items: center; height: var(--hauteur-controle); padding: 0 var(--espace-4); border-radius: var(--rayon-champ); background: var(--primaire); color: var(--texte-sur-primaire); font-weight: 600; text-decoration: none; transition: top var(--transition); }
.lien-evitement:focus { top: var(--espace-2); }
.contenu:focus { outline: none; }
span.bandeau__action { margin-left: auto; font-weight: 600; opacity: .75; }
.coche { pointer-events: none; }

/* Les comptes du menu (bac, messages non lus) : une seule forme, lisible dans chaque thème (Jason, 2026-09-14 : « some of the number
   reminders are not the same and almost unreadable in certain themes »). Le texte plein sur la teinte élevée; l'entrée active les
   met en couleur primaire. La règle générale « .navigation__lien small » est plus précise : on la surpasse ici. */
.navigation__compte, .navigation__lien .navigation__compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rayon-badge); background: var(--fond-eleve); color: var(--texte); font-size: var(--taille-etiquette); font-weight: 700; letter-spacing: 0; text-transform: none; }
.navigation__lien.active .navigation__compte { background: var(--primaire); color: var(--texte-sur-primaire); }
.navigation__compte:empty { display: none; }

/* ─── Bac : éventail radial vers la droite, et zones de dépôt (D30) ─── */
.bac { position: relative; }
/* Ni l'entrée ni les cibles ne s'empoignent : seul ce qu'on apporte se glisse. */
/* Les cibles de l'arc ne s'empoignent pas; l'entrée, si — elle se range comme les autres. */
.eventail__cible, .eventail__cible img { -webkit-user-drag: none; }
.bac__entree, .eventail__cible { user-select: none; }
/* Une entrée qu'on déplace : on la voit partir, et sa place se fait à mesure. */
.navigation__lien--en-vol { opacity: .45; }
.navigation__lien[data-menu] { cursor: pointer; }
/* Ranger son menu au clavier, depuis Mes paramètres. */
.ordre-menu__remise { margin-top: var(--espace-2); }
.ordre-menu { display: flex; flex-direction: column; gap: var(--espace-2); margin-top: var(--espace-3); }
.ordre-menu__titre { font-size: var(--taille-petite); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-tertiaire); margin: 0; }
.ordre-menu__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ordre-menu__ligne { display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-1) var(--espace-2); border-radius: var(--rayon-champ); }
.ordre-menu__ligne:hover { background: var(--fond-eleve); }
.ordre-menu__ligne > span { flex: 1 1 auto; }
.ordre-menu__ligne .bouton { width: 28px; padding: 0; }
.ordre-menu__ligne .bouton[disabled] { opacity: .35; pointer-events: none; }
/* L'éventail s'ouvre à droite de l'entrée, en arc. Il ne s'ouvre pas au simple survol (Jason,
   2026-09-12) : seulement quand on traîne quelque chose au-dessus du bac, ou au clavier — sinon
   il n'y aurait plus de chemin sans glisser-déposer. */
.eventail { position: absolute; left: 100%; top: 50%; width: 0; height: 0; z-index: 30; display: none; }
/* Le fond de l'arc : les cibles se lisent quel que soit le contenu qui passe dessous. */
.eventail__fond { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; }
.eventail__fond path { fill: color-mix(in srgb, var(--fond-lateral) 94%, transparent); stroke: color-mix(in srgb, var(--texte) 10%, transparent); stroke-width: 1; filter: drop-shadow(0 8px 24px rgb(0 0 0 / 18%)); }
/* L'éventail s'ouvre au survol de l'entrée (Jason, 2026-09-12) et pendant qu'on traîne un fichier
   au-dessus d'elle. Les classes sont posées par le script, qui tempère : un court délai avant
   d'ouvrir, pour qu'un simple passage de souris ne le fasse pas clignoter; une fermeture immédiate
   dès qu'une autre entrée du menu prend le survol ou le focus. Caché, il sort de l'ordre de
   tabulation : personne n'atterrit sur une cible invisible. */
/* Seul un glisser l'ouvre : pas de règle de survol, ni ici ni dans le script (D35 bis). */
.bac--depot .eventail { display: block; }
/* La zone qui reçoit est plus large que le rond qu'on voit : viser une personne et la manquer de
   quelques pixels faisait tomber la tâche sur le bac, sans personne et sans rien dire. */
.eventail__cible { position: absolute; left: 0; top: 0; width: 76px; height: 76px; margin: -38px; --dx: var(--x); --dy: var(--y); transform: translate(var(--dx), var(--dy)); display: grid; place-items: center; border-radius: 50%; text-decoration: none; animation: eventail-ouvre 160ms ease-out both; }
.eventail__rond { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fond-surface); box-shadow: var(--ombre-carte), 0 0 0 1px color-mix(in srgb, var(--texte) 10%, transparent); color: var(--texte-secondaire); }
.eventail__cible--bac .eventail__rond { border: 2px dashed var(--bordure-forte); background: var(--fond-lateral); }
.eventail__cible:hover .eventail__rond, .eventail__cible:focus-visible .eventail__rond, .eventail__cible.depot--survol .eventail__rond { box-shadow: var(--ombre-carte), 0 0 0 3px var(--primaire); }
.eventail__nom { position: absolute; left: 70px; top: 50%; transform: translateY(-50%); padding: 2px var(--espace-2); border-radius: var(--rayon-badge); background: var(--fond-surface); color: var(--texte); font-size: var(--taille-petite); font-weight: 600; white-space: nowrap; box-shadow: var(--ombre-carte); opacity: 0; transition: opacity var(--transition); pointer-events: none; }
/* Un seul nom à la fois : celui qu'on vise. Six étiquettes ouvertes d'un coup ne se lisent pas. */
.eventail__cible:hover .eventail__nom, .eventail__cible:focus-visible .eventail__nom, .eventail__cible.depot--survol .eventail__nom { opacity: 1; }
@keyframes eventail-ouvre { from { transform: translate(0, 0) scale(.6); opacity: 0; } to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; } }
/* Barre haute : à droite, l'arc sortirait de l'écran — il s'ouvre donc vers le bas, sur le contenu. */
.coquille--haute .eventail__cible { --dx: var(--y); --dy: var(--x); }
.coquille--haute .eventail__fond { transform: translate(-50%, -50%) rotate(90deg); }
.coquille--haute .eventail__nom { left: 50%; top: 58px; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .eventail__cible { animation: none; } }
.depot--survol { outline: 2px dashed var(--primaire); outline-offset: 2px; }
.groupe.depot.depot--survol, .bac__entree.depot--survol { background: var(--primaire-teinte); }
.eventail__cible.depot--survol { outline: none; }
.depot--envoi { opacity: .6; }
.depot__invite { font-size: var(--taille-petite); }
.groupe.depot.depot--survol { outline-offset: -2px; }
/* L'annonce **flotte** (Jason, 2026-09-12 : « whenever a message pops up it pushes the whole page
   down then moves it back up… this should be a floating message »). Elle était dans le flux de la
   page : paraître la poussait, partir la ramenait. Fixe, elle passe par-dessus sans rien déplacer,
   centrée sur la zone de contenu, sous la barre, au-dessus des panneaux. */
.annonce { position: fixed; top: 72px; left: 50%; z-index: 40; max-width: calc(100vw - 2 * var(--espace-4));
    padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-badge); font-size: var(--taille-meta); font-weight: 600;
    box-shadow: var(--ombre-carte), 0 8px 24px rgb(0 0 0 / 16%); transform: translateX(-50%);
    cursor: pointer; transition: opacity 300ms ease, transform 300ms ease; }
.annonce--sortie { opacity: 0; transform: translate(-50%, -6px); }
@media (prefers-reduced-motion: reduce) { .annonce { transition: none; } }
.annonce--succes { background: var(--primaire); color: var(--texte-sur-primaire); }
.annonce--erreur { background: var(--danger-teinte); color: var(--danger); }
.coquille--haute .annonce { top: 92px; }
/* Menu latéral : centrée sur le contenu, pas sur la fenêtre entière. */
.coquille--laterale .annonce { left: calc(50% + var(--largeur-lateral) / 2); }
.coquille--laterale.coquille--menu-reduit .annonce { left: calc(50% + 32px); }
/* Sur téléphone, l'arc n'a pas la place : les cibles se rangent sous l'entrée. */
@media (max-width: 720px) {
  .eventail { position: static; width: auto; height: auto; display: none; flex-wrap: wrap; gap: var(--espace-2); padding: var(--espace-2) 0; }
  .bac--depot .eventail { display: flex; }
  .eventail__cible { position: static; transform: none; margin: 0; animation: none; }
  .eventail__nom { position: static; transform: none; opacity: 1; display: none; }
}

/* Le compte du bac dans le menu : ce qui attend d'être trié se voit sans crier. */


/* Une tâche du bac se glisse : on la voit partir, et l'entrée qui la reçoit s'annonce. */
.rangee--glissable { cursor: grab; }
.rangee--glissable:active { cursor: grabbing; }
.rangee--en-vol { opacity: .45; }
[data-depot-tache].depot--survol { background: var(--primaire-teinte); outline: 2px dashed var(--primaire); outline-offset: -2px; }

/* ─── Assignateur : le bac à gauche, l'équipe à droite ─── */
/* Le bac (D35) : la liste garde toute sa largeur; l'équipe paraît **par-dessus**, à droite, le
   temps d'un glisser. En colonne, elle décalerait la liste au moment même où l'on vise — la
   rangée qu'on tient se déroberait sous le curseur. Répartir est un geste, plus un écran. */
.bac-page { display: block; }
.repartiteur { display: flex; flex-direction: column; gap: var(--espace-2);
    position: fixed; right: var(--espace-4); top: 108px; z-index: 30; width: 248px; max-height: calc(100vh - 140px); overflow-y: auto;
    padding: var(--espace-3); border-radius: var(--rayon-carte); background: var(--fond-lateral); border: 1px solid var(--bordure); box-shadow: var(--ombre-carte), 0 12px 32px rgb(0 0 0 / 18%);
    opacity: 0; transform: translateX(16px); pointer-events: none;
    transition: opacity var(--transition), transform var(--transition); }
.repartiteur--ouvert { opacity: 1; transform: none; pointer-events: auto; }
.repartiteur .groupe__titre { padding: 0 var(--espace-1) var(--espace-1); }
/* ─── Barre du bac : un champ de recherche, un bouton « Filtres », des jetons (2026-09-12) ───
   Au repos elle ne montre qu'un champ; le détail s'ouvre à la demande et ce qui filtre vraiment
   se lit en jetons qu'on retire d'un « × ». */
.barre-filtres { display: flex; flex-direction: column; gap: var(--espace-2); }
.barre-filtres__ligne { display: flex; align-items: center; gap: var(--espace-2); }
.champ-recherche { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 420px; }
.champ-recherche .icone { position: absolute; left: var(--espace-3); color: var(--texte-tertiaire); pointer-events: none; }
.champ-recherche__saisie { width: 100%; height: var(--hauteur-controle); padding: 0 var(--espace-3) 0 38px; border: 1px solid var(--bordure);
    border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-meta); }
.champ-recherche__saisie::placeholder { color: var(--texte-tertiaire); }
.champ-recherche__saisie:focus-visible { outline: 2px solid var(--primaire); outline-offset: 1px; }
.filtres { position: relative; }
.filtres__bouton { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--espace-2); height: var(--hauteur-controle);
    padding: 0 var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface);
    color: var(--texte); font-size: var(--taille-meta); font-weight: 600; white-space: nowrap; }
.filtres__bouton::-webkit-details-marker { display: none; }
.filtres__bouton:hover { background: var(--fond-eleve); }
.filtres__bouton:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.filtres[open] .filtres__bouton { border-color: var(--primaire); }
.filtres__compte { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rayon-badge);
    background: var(--primaire); color: var(--texte-sur-primaire); font-size: var(--taille-etiquette); }
.filtres__panneau { position: absolute; left: 0; top: calc(100% + var(--espace-2)); z-index: 25; width: 300px; display: flex; flex-direction: column; gap: var(--espace-3);
    padding: var(--espace-4); border-radius: var(--rayon-carte); background: var(--fond-surface);
    box-shadow: var(--ombre-carte), 0 0 0 1px color-mix(in srgb, var(--texte) 6%, transparent); }
.filtres__panneau { max-height: min(75vh, 600px); overflow-y: auto; }
/* Plan, dossier, etc. (2026-09-12) : deux colonnes — qui et comment, puis où. Une seule sous 640 px. */
.filtres__panneau { width: min(620px, calc(100vw - 2 * var(--espace-4))); display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-4); align-items: start; }
.filtres__panneau > .filtres__note, .filtres__panneau > .filtres__actions { grid-column: 1 / -1; }
.filtres__colonne { display: flex; flex-direction: column; gap: var(--espace-4); min-width: 0; }
.groupe-cases legend small { font-weight: 400; color: var(--texte-tertiaire); }
.arbre-cases__ligne { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--profondeur, 0) * var(--espace-4)); }
.arbre-cases__ligne > .case { flex: 1 1 auto; min-width: 0; padding-left: var(--espace-1); }
.groupe-cases--arbre .case > .icone { flex: none; width: 15px; height: 15px; color: var(--texte-tertiaire); }
.groupe-cases--arbre .case > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case--plan > span { font-weight: 600; }
.groupe-cases--arbre .case small { margin-left: auto; color: var(--texte-tertiaire); font-size: var(--taille-etiquette); }
/* Moins large : le panneau s'aligne sur le bord droit de la barre plutôt que de partir du bouton et
   de sortir de l'écran; étroit, il en prend toute la largeur, sur une colonne. */
@media (max-width: 1180px) {
    .barre-filtres__ligne { position: relative; }
    .filtres { position: static; }
    .filtres__panneau { left: auto; right: 0; }
}
@media (max-width: 640px) {
    .filtres__panneau { left: 0; width: auto; grid-template-columns: 1fr; }
}
.groupe-cases { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; margin: 0; }
.groupe-cases legend { padding: 0 0 var(--espace-2); color: var(--texte-secondaire); font-size: var(--taille-petite); font-weight: 700; letter-spacing: .02em; }
.case { display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-1) var(--espace-2); border-radius: var(--rayon-champ); cursor: pointer; font-size: var(--taille-meta); }
.case:hover { background: var(--fond-eleve); }
.case input { width: 15px; height: 15px; accent-color: var(--primaire); cursor: pointer; }
.case:focus-within { outline: 2px solid var(--primaire); outline-offset: -2px; }
.filtres__note { color: var(--texte-tertiaire); font-size: var(--taille-petite); margin: 0; }
.filtres__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--espace-3); }
/* Les jetons : ce qui filtre, en clair, et qui se défait d'un geste. */
.jetons { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-2); }
.jeton { display: inline-flex; align-items: center; gap: var(--espace-2); height: 26px; padding: 0 var(--espace-2) 0 var(--espace-3);
    border-radius: var(--rayon-badge); background: var(--primaire-teinte); color: var(--primaire); text-decoration: none;
    font-size: var(--taille-petite); font-weight: 600; transition: background var(--transition); }
.jeton:hover { background: color-mix(in srgb, var(--primaire) 18%, transparent); }
.jeton__croix { font-size: 15px; line-height: 1; opacity: .7; }
.jeton:hover .jeton__croix { opacity: 1; }
.lien--discret { color: var(--texte-secondaire); font-size: var(--taille-petite); text-decoration: underline; text-underline-offset: 3px; }
.lien--discret:hover { color: var(--texte); }
/* La carte se lit d'un coup d'œil et s'ouvre d'un clic : elle ne se corrige pas sur place
   (Jason, 2026-09-12). Le lien couvre le titre et son détail; la rangée reste empoignable. */
.rangee__ouvrir { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.rangee__ouvrir:hover .rangee__titre { text-decoration: underline; text-underline-offset: 3px; }
.rangee__ouvrir:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; border-radius: var(--rayon-champ); }
.rangee__qui { color: var(--texte-secondaire); font-size: var(--taille-meta); white-space: nowrap; }
.personne { display: flex; align-items: center; gap: var(--espace-3); padding: var(--espace-3); background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
.personne__corps { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.personne__nom { font-weight: 600; }
.personne__charge { color: var(--texte-tertiaire); font-size: var(--taille-petite); }
.personne--personne { background: var(--fond-lateral); box-shadow: none; border: 2px dashed var(--bordure-forte); }
.personne__vide { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fond-eleve); color: var(--texte-tertiaire); }
.personne.depot--survol { background: var(--primaire-teinte); }
.bac-page .rangee--glissable > .icone { color: var(--texte-tertiaire); }
/* Étroit : l'équipe passe sous la liste plutôt que de l'écraser. */
@media (max-width: 900px) { .repartiteur { right: var(--espace-2); width: 200px; } }

/* ─── Mes messages ─── */
.rangees--messages .rangee { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--espace-3) var(--espace-2); cursor: default; }
.rangee--message:hover { background: transparent; }
.rangee--nonlu { background: var(--primaire-teinte); border-radius: var(--rayon-champ); }
.message__auteur { font-weight: 700; color: var(--texte); }
.message__texte { display: block; padding: var(--espace-1) 0; }
.message__gestes { display: flex; align-items: center; gap: var(--espace-2); flex-wrap: wrap; }
.message__reponse { display: flex; align-items: center; gap: var(--espace-2); flex: 1 1 260px; }
.message__reponse .saisie { flex: 1 1 auto; height: var(--hauteur-controle); padding: 0 var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-meta); }
.message__reponse .saisie:focus { border-color: var(--primaire); outline: none; box-shadow: 0 0 0 3px var(--primaire-teinte); }

/* ─── L'arbre (D42) : plans, dossiers, tâches, chacun sous le sien ─── */
.arbre__liste { list-style: none; margin: 0; padding: 0 0 0 var(--espace-4); display: flex; flex-direction: column; gap: 2px; }
.groupe.arbre > .arbre__liste { padding-left: var(--espace-2); }
.arbre__noeud > .arbre__liste { border-left: 1px solid var(--bordure); margin-left: 9px; padding-left: var(--espace-4); }
.arbre__ligne { display: flex; align-items: center; gap: var(--espace-2); min-height: 30px; padding: 0 var(--espace-2); border-radius: var(--rayon-champ); }
.arbre__ligne:hover { background: var(--fond-eleve); }
.arbre__ligne > .icone { color: var(--texte-tertiaire); flex: none; }
.arbre__nom { color: inherit; text-decoration: none; }
.arbre__noeud--plan > .arbre__ligne .arbre__nom { font-weight: 700; }
.arbre__noeud--dossier > .arbre__ligne .arbre__nom { font-weight: 600; }
a.arbre__nom:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── La palette des pastilles (Jason, 2026-09-12) : on choisit en voyant ses initiales dessus ─── */
.palette { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
.palette__choix { display: flex; flex-direction: column; align-items: center; gap: var(--espace-1); cursor: pointer; }
.palette__choix input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }
.palette__pastille { width: 40px; height: 40px; font-size: var(--taille-meta); transition: box-shadow var(--transition), transform var(--transition); }
.palette__choix:hover .palette__pastille { transform: scale(1.06); }
.palette__choix input:checked + .palette__pastille { box-shadow: 0 0 0 3px var(--fond-surface), 0 0 0 5px var(--primaire); }
.palette__choix input:focus-visible + .palette__pastille { box-shadow: 0 0 0 3px var(--fond-surface), 0 0 0 5px var(--primaire); }
.palette__nom { font-size: var(--taille-etiquette); color: var(--texte-secondaire); }
/* La fenêtre des raccourcis. */
.raccourcis__liste { display: flex; flex-direction: column; gap: var(--espace-2); margin: 0; }
.raccourcis__ligne { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--espace-3); }
.raccourcis__ligne dt { display: flex; gap: 4px; margin: 0; }
.raccourcis__ligne dd { margin: 0; color: var(--texte-secondaire); font-size: var(--taille-meta); }
.raccourcis kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 4px;
    background: var(--fond-eleve); color: var(--texte); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 11px; font-weight: 600; }

/* Gabarits (D45) : un plan qui se recopie. Sa bascule reste discrète; la copie ne s'offre qu'à lui. */

/* Glisser un plan sur un plan (2026-09-12) : la ligne s'empoigne, la cible s'annonce. */
.arbre__noeud--plan > .arbre__ligne[draggable="true"] { cursor: grab; }
.arbre__noeud--plan > .arbre__ligne[draggable="true"]:active { cursor: grabbing; }
.arbre__ligne--en-vol { opacity: .45; }

/* La carte entière ouvre (Jason, 2026-09-12 : « never on the title, always on the card »). */
.carte-ouvrable { cursor: pointer; }
.carte-ouvrable:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; }
/* Réordonner : un trait au bord où le plan viendra se placer. */
.arbre__ligne--avant { box-shadow: inset 0 2px 0 var(--primaire); }
.arbre__ligne--apres { box-shadow: inset 0 -2px 0 var(--primaire); }

/* ─── L'esquisse (D49) : on tape là où ça va; rien à relier ─── */
/* Le champ rapide au bout de chaque liste : du texte gris jusqu'à ce qu'on y écrive, comme « Ajouter une carte ». */
.arbre__rapide { list-style: none; }
.arbre__rapide-formulaire { display: flex; align-items: center; gap: var(--espace-2); min-height: 30px; padding: 0 var(--espace-2); border-radius: var(--rayon-champ); color: var(--texte-tertiaire); }
.arbre__rapide-formulaire > .icone { flex: none; }
.arbre__rapide-formulaire:focus-within { background: var(--fond-eleve); color: var(--texte-secondaire); }
.arbre__rapide-champ { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 var(--espace-1); border: 0; background: transparent; color: var(--texte); font: inherit; font-size: var(--taille-meta); outline: none; }
.arbre__rapide-champ::placeholder { color: var(--texte-tertiaire); }
.arbre__rapide-formulaire:focus-within .arbre__rapide-champ::placeholder { color: var(--texte-secondaire); }
/* Un dossier qui reçoit une tâche s'annonce comme toute cible de dépôt. */
.arbre__ligne[data-depot-dossier].depot--survol { outline: 2px dashed var(--primaire); outline-offset: -2px; background: var(--primaire-teinte); }
.arbre__noeud--tache > .arbre__ligne[draggable="true"] { cursor: grab; }
.arbre__noeud--tache > .arbre__ligne.rangee--en-vol { opacity: .45; }
/* La fenêtre. */
.esquisse__intro { margin: calc(-1 * var(--espace-2)) 0 0; font-size: var(--taille-meta); }
.esquisse__texte { min-height: 200px; padding: var(--espace-2) var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte);
    font: inherit; font-size: var(--taille-meta); line-height: 1.6; tab-size: 4; white-space: pre; overflow: auto; resize: vertical; }
.esquisse__texte:focus { outline: 2px solid var(--primaire); outline-offset: -1px; }
.esquisse__aide { font-size: var(--taille-meta); color: var(--texte-secondaire); }
.esquisse__aide > summary { cursor: pointer; font-weight: 600; }
.esquisse__aide ul { margin: var(--espace-2) 0 0; padding-left: var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-1); }
.esquisse__aide code { padding: 0 4px; border-radius: 3px; background: var(--fond-eleve); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.esquisse__apercu { min-height: 48px; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-champ); background: var(--fond-eleve); font-size: var(--taille-meta); }
.esquisse__apercu > p { margin: 0; }
.esquisse__lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.esquisse__ligne { display: flex; align-items: center; gap: var(--espace-2); padding-left: calc(var(--profondeur, 0) * var(--espace-4)); min-height: 24px; }
.esquisse__genre { flex: none; width: 52px; font-size: var(--taille-etiquette); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-tertiaire); }
.esquisse__ligne--dossier .esquisse__titre { font-weight: 600; }
.esquisse__probleme { margin: var(--espace-2) 0 0; color: var(--danger); font-weight: 600; }

/* ─── Replier plans et dossiers (Jason, 2026-09-12) : un chevron, le patron de tout explorateur ─── */
.arbre__plier { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 -2px 0 -4px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: var(--texte-tertiaire); cursor: pointer; }
.arbre__plier:hover { background: var(--fond-eleve); color: var(--texte); }
.arbre__plier:focus-visible { outline: 2px solid var(--primaire); outline-offset: 0; }
.arbre__plier .icone { width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--transition); }
.arbre__plier[aria-expanded="false"] .icone { transform: none; }
.arbre__plier--vide { cursor: default; pointer-events: none; }
[data-noeud].noeud--replie > [data-enfants] { display: none; }
.arbre__tout { display: inline-flex; gap: var(--espace-1); margin-left: auto; }
.groupe.arbre > .groupe__entete { justify-content: flex-start; gap: var(--espace-3); flex-wrap: wrap; }
.groupe__entete .arbre__tout { margin-left: auto; }
.arbre__tout--cases { margin: calc(-1 * var(--espace-1)) 0 var(--espace-1); gap: var(--espace-3); font-size: var(--taille-petite); }
.arbre__tout--cases button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
@media (prefers-reduced-motion: reduce) { .arbre__plier .icone { transition: none; } }

/* ─── Le menu contextuel (Jason, 2026-09-13) : les actions d'une ligne, hors de la ligne ─── */
.contexte { position: fixed; z-index: 70; min-width: 220px; padding: var(--espace-1); border-radius: var(--rayon-carte); background: var(--fond-surface);
    box-shadow: var(--ombre-carte), 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent); display: flex; flex-direction: column; }
.contexte__formulaire { display: contents; }
.contexte__item { display: flex; align-items: center; gap: var(--espace-2); width: 100%; min-height: 32px; padding: 0 var(--espace-3); border: 0; border-radius: var(--rayon-champ);
    background: transparent; color: var(--texte); font: inherit; font-size: var(--taille-meta); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.contexte__item > .icone { width: 16px; height: 16px; color: var(--texte-tertiaire); flex: none; }
.contexte__item:hover, .contexte__item:focus { outline: none; background: var(--primaire-teinte); color: var(--primaire); }
.contexte__item:hover > .icone, .contexte__item:focus > .icone { color: inherit; }
.contexte__trait { margin: var(--espace-1) var(--espace-2); border: 0; border-top: 1px solid var(--bordure); }
.arbre__noeud--dossier > .arbre__ligne:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; }

/* ─── La fiche d'un élément — plan, tâche (Jason, 2026-09-13 : « clean minimalist UI », D54) ───
   Une fiche d'élément : le nom est le titre, les propriétés en lignes étiquette-valeur, le contenu en
   liste, les actions derrière « ⋯ ». Aucun trait : le ton et l'espace séparent (règle de la feuille). */
.dialogue .fiche.fiche-element { padding: var(--espace-6); gap: var(--espace-6); }
.fiche-element__entete { display: flex; align-items: center; gap: var(--espace-2); min-height: var(--hauteur-controle);
    margin: calc(-1 * var(--espace-2)) 0 calc(-1 * var(--espace-4)); padding-right: calc(var(--hauteur-controle) + var(--espace-2)); }
.fiche-element__genre { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--texte-tertiaire); font-size: var(--taille-meta); font-weight: 600; }
.fiche-element__genre > .icone { width: 16px; height: 16px; flex: none; }
.fiche-element__chemin { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-element__menu { margin-left: auto; display: inline-flex; }
.fiche-element__corps { display: flex; flex-direction: column; gap: var(--espace-4); }
/* Le nom : un titre qu'on corrige sur place. Il ne ressemble à un champ qu'au survol et au focus. */
.fiche-element__nom { width: 100%; margin: 0 calc(-1 * var(--espace-2)); width: calc(100% + 2 * var(--espace-2)); padding: 4px var(--espace-2);
    border: 1px solid transparent; border-radius: var(--rayon-champ); background: transparent; color: var(--texte);
    font-family: var(--police-titres); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.fiche-element__nom:hover { background: var(--fond-eleve); }
.fiche-element__nom:focus { outline: none; background: var(--fond-surface); border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-teinte); }
/* Les propriétés. */
.fiche-element:focus { outline: none; }
.fiche-element__proprietes { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.fiche-element__propriete { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; min-height: var(--hauteur-controle); }
.fiche-element__propriete dt { color: var(--texte-tertiaire); font-size: var(--taille-meta); }
.fiche-element__propriete dd { margin: 0; min-width: 0; margin-left: calc(-1 * var(--espace-2)); }
.fiche-element__valeur { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--espace-2); font-size: var(--taille-meta); }
.fiche-element__valeur > .icone { width: 14px; height: 14px; color: var(--texte-tertiaire); }
/* La liste se taille sur la valeur choisie (Chromium, Edge) : la flèche reste collée au texte. Ailleurs, largeur ordinaire. */
.selection--discrete { field-sizing: content; height: 28px; max-width: 100%; padding: 0 28px 0 var(--espace-2); border-color: transparent; background-color: transparent; font-weight: 500; cursor: pointer; }
.selection--discrete:hover { background-color: var(--fond-eleve); }
.selection--discrete:focus-visible { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-teinte); }
.texte-tertiaire { color: var(--texte-tertiaire); }
/* Le contenu. */
.fiche-element__contenu { display: flex; flex-direction: column; gap: var(--espace-2); }
.fiche-element__titre { display: flex; align-items: baseline; gap: var(--espace-2); margin: 0; font-size: var(--taille-meta); font-weight: 600; color: var(--texte); }
.fiche-element__titre { font-family: var(--police-corps); }
.fiche-element__compte { color: var(--texte-tertiaire); font-weight: 400; }
.fiche-element__vide { margin: 0; padding: var(--espace-3); border-radius: var(--rayon-champ); background: var(--fond-page); color: var(--texte-secondaire); font-size: var(--taille-meta); }
.fiche-element__vide a { color: var(--primaire); }
.fiche-element__liste { list-style: none; margin: 0 calc(-1 * var(--espace-2)); padding: 0; display: flex; flex-direction: column; gap: 1px; }
.fiche-element__ligne { display: flex; align-items: center; gap: var(--espace-2); min-height: 34px; padding: 0 var(--espace-2); border-radius: var(--rayon-champ); font-size: var(--taille-meta); }
.fiche-element__ligne > .icone { width: 16px; height: 16px; flex: none; color: var(--texte-tertiaire); }
.fiche-element__ligne.carte-ouvrable:hover { background: var(--fond-eleve); }
.fiche-element__nom-ligne { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* Le pied. */
.fiche-element__pied { display: flex; justify-content: flex-end; gap: var(--espace-2); margin-top: calc(-1 * var(--espace-2)); }

/* Réordonner les dossiers dans la fiche d'un plan (Jason, 2026-09-13) : une poignée à gauche, au survol. */
.fiche-element__ligne--ordonnable { cursor: grab; }
.fiche-element__ligne--ordonnable:hover, .fiche-element__ligne--ordonnable:focus-visible { background: var(--fond-eleve); }
.fiche-element__ligne--ordonnable:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; }
.fiche-element__ligne--ordonnable:active { cursor: grabbing; }
.fiche-element__poignee { display: inline-grid; place-items: center; width: 14px; margin-left: -4px; color: var(--texte-tertiaire); opacity: 0; transition: opacity var(--transition); }
.fiche-element__poignee .icone { width: 14px; height: 14px; }
.fiche-element__ligne--ordonnable:hover .fiche-element__poignee, .fiche-element__ligne--ordonnable:focus-visible .fiche-element__poignee { opacity: 1; }
.ordre--en-vol { opacity: .45; }
.ordre--avant { box-shadow: inset 0 2px 0 var(--primaire); }
.ordre--apres { box-shadow: inset 0 -2px 0 var(--primaire); }

/* Renommer un dossier sur place (Jason, 2026-09-13). */
.renommer { flex: 1 1 auto; min-width: 0; max-width: 420px; display: flex; }
.renommer[hidden] { display: none; }
.renommer__champ { flex: 1 1 auto; min-width: 0; height: 26px; margin-left: -4px; padding: 0 var(--espace-1); border: 1px solid var(--primaire); border-radius: 4px;
    background: var(--fond-surface); color: var(--texte); font: inherit; font-weight: 500; box-shadow: 0 0 0 3px var(--primaire-teinte); }
.renommer__champ:focus { outline: none; }
.arbre__ligne .renommer__champ { font-weight: 600; }
.contexte__touche { margin-left: auto; padding-left: var(--espace-4); color: var(--texte-tertiaire); font-family: inherit; font-size: var(--taille-petite); }

/* ─── La fiche d'une tâche, complète (Jason, 2026-09-13 : ce que portait la v1, en épuré) ─── */
.dialogue:has(.fiche-tache) { width: min(100%, 640px); }
.fiche-tache.fiche-element { gap: var(--espace-6); }
.fiche-element__nom--close { color: var(--texte-tertiaire); text-decoration: line-through; text-decoration-thickness: 1px; }
.fiche-element__chemin a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fiche-element__menu { margin-left: auto; display: inline-flex; }
/* Précédente · 3 / 7 · suivante, à gauche du menu (2026-09-13). */
.fiche-tache__voisines { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.fiche-tache__voisines + .fiche-element__menu { margin-left: var(--espace-1); }
.fiche-tache__rang { font-size: var(--taille-petite); color: var(--texte-secondaire); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.fiche-tache__voisine--avant svg { transform: rotate(-90deg); }
.fiche-tache__voisine--apres svg { transform: rotate(90deg); }
.fiche-tache__voisine[aria-disabled="true"] { opacity: .35; pointer-events: none; }
/* Statut, priorité, échéance : la couleur ne dit que ce qui presse. */
/* Préfixées : .priorite--haute existe déjà ailleurs, en pastille jaune — elle teignait la liste en entier. */
.fiche-statut--terminee { color: color-mix(in srgb, #15803d 80%, var(--texte)); }
.fiche-statut--annulee { color: var(--texte-tertiaire); }
.fiche-priorite--haute { color: var(--accent-texte); font-weight: 600; }
.fiche-priorite--critique { color: var(--danger); font-weight: 600; }
.echeance { font-size: var(--taille-meta); }
.echeance--retard { color: var(--danger); font-weight: 600; }
.echeance--proche { color: var(--accent-texte); font-weight: 600; }
.echeance--neutre { color: var(--texte-tertiaire); }
/* La description : un texte qui se lit, qui ne ressemble à un champ qu'au survol et au focus. */
.fiche-element__description { width: calc(100% + 2 * var(--espace-2)); margin: 0 calc(-1 * var(--espace-2)); min-height: 3.2em; padding: 6px var(--espace-2);
    border: 1px solid transparent; border-radius: var(--rayon-champ); background: transparent; color: var(--texte); font: inherit; font-size: var(--taille-corps); line-height: 1.5;
    resize: none; field-sizing: content; }
.fiche-element__description::placeholder { color: var(--texte-tertiaire); }
.fiche-element__description:hover { background: var(--fond-eleve); }
.fiche-element__description:focus { outline: none; background: var(--fond-surface); border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-teinte); }
/* Les sections. */
.fiche-element__section { display: flex; flex-direction: column; gap: var(--espace-1); }
.fiche-element__nom-ligne--close { color: var(--texte-tertiaire); text-decoration: line-through; }
.fiche-element__lien { padding: 0; border: 0; background: none; color: var(--texte); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.fiche-element__lien:hover { color: var(--primaire); text-decoration: underline; text-underline-offset: 3px; }
.fiche-element__ligne:not(.carte-ouvrable):hover, .fiche-element__ligne:focus-visible { background: var(--fond-eleve); }
.fiche-element__ligne:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; }
.fiche-element__ligne .coche { flex: none; }
/* Ajouter : une ligne calme, pas un formulaire. */
.fiche-element__ajout { display: flex; align-items: center; gap: var(--espace-2); min-height: 34px; margin: 0 calc(-1 * var(--espace-2)); padding: 0 var(--espace-2);
    border-radius: var(--rayon-champ); color: var(--texte-tertiaire); font-size: var(--taille-meta); }
.fiche-element__ajout > .icone { width: 16px; height: 16px; flex: none; }
.fiche-element__ajout:focus-within { background: var(--fond-eleve); color: var(--texte-secondaire); }
.fiche-element__ajout-champ { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; color: var(--texte); font: inherit; outline: none; }
.fiche-element__ajout-champ::placeholder { color: var(--texte-tertiaire); }
.fiche-element__ajout-libelle { flex: 0 1 180px; display: none; }
.fiche-element__ajout--lien:focus-within .fiche-element__ajout-libelle { display: block; }
.fiche-element__ajout-bouton { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: 30px; cursor: pointer; }
.fiche-element__ajout-bouton > .icone { width: 16px; height: 16px; }
.fiche-element__ajout:has(input[type=file]):hover { background: var(--fond-eleve); color: var(--texte-secondaire); }
.fiche-element__ajout:has(input[type=file]:focus-visible) { outline: 2px solid var(--primaire); outline-offset: -2px; }
/* Les commentaires. */
.fiche-element__fil { list-style: none; margin: var(--espace-1) 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-3); }
.fiche-element__fil .commentaire { align-items: flex-start; }
.fiche-element__fil .pastille { flex: none; }
.commentaire__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.commentaire__entete, .commentaire__texte { margin: 0; }
.commentaire__texte { color: var(--texte); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--taille-corps); }
.fiche-element__commenter { display: flex; align-items: flex-end; gap: var(--espace-2); }
.fiche-element__commentaire { flex: 1 1 auto; min-height: 34px; max-height: 12em; padding: 6px var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ);
    background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-meta); line-height: 1.5; resize: none; field-sizing: content; }
.fiche-element__commentaire:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-teinte); }
.fiche-element__commenter .bouton { flex: none; }
/* L'historique, replié. */
.fiche-element__historique > summary { cursor: pointer; list-style: none; }
.fiche-element__historique > summary::-webkit-details-marker { display: none; }
.fiche-element__historique > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--texte-tertiaire); transition: transform var(--transition); }
.fiche-element__historique[open] > summary::before { transform: rotate(90deg); }
.fiche-element__journal { list-style: none; margin: var(--espace-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--taille-meta); }
.fiche-element__journal li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--espace-3); }
/* Le pied reste à portée quand la fiche défile. */
.fiche-tache .fiche-element__pied { position: sticky; bottom: calc(-1 * var(--espace-6)); margin: 0 calc(-1 * var(--espace-6)) calc(-1 * var(--espace-6)); padding: var(--espace-3) var(--espace-6);
    background: color-mix(in srgb, var(--fond-surface) 92%, transparent); backdrop-filter: blur(6px); border-radius: 0 0 var(--rayon-carte) var(--rayon-carte); }
.contexte__item--danger { color: var(--danger); }
.contexte__item--danger:hover, .contexte__item--danger:focus { background: var(--danger-teinte); color: var(--danger); }
/* « Êtes-vous sûr ? » (2026-09-13) : une boîte modale courte — la question, ce qui part avec, Annuler et le bouton rouge. */
.confirmation { border: 0; padding: var(--espace-6); width: min(calc(100% - 2 * var(--espace-4)), 440px); border-radius: var(--rayon-carte);
  background: var(--fond-surface); color: var(--texte); box-shadow: 0 12px 40px rgb(0 0 0 / 22%); }
.confirmation::backdrop { background: rgb(0 0 0 / 45%); }
.confirmation__question { margin: 0 0 var(--espace-2); font-family: var(--police-titres, inherit); font-size: var(--taille-titre-section); font-weight: 600; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.confirmation__detail { margin: 0 0 var(--espace-6); color: var(--texte-secondaire); }
.confirmation__detail:empty { display: none; }
.confirmation__actions { display: flex; justify-content: flex-end; gap: var(--espace-3); flex-wrap: wrap; }

/* La saisie éclair des sous-tâches (Jason, 2026-09-13) : une ligne qui devient esquisse. */
.fiche-element__ajout--esquisse { flex-wrap: wrap; }
.fiche-element__ajout--esquisse .fiche-element__ajout-champ { height: auto; min-height: 30px; padding: 6px 0; resize: none; line-height: 1.5; field-sizing: content; }
.fiche-element__ajout-aide { display: none; color: var(--texte-tertiaire); font-size: var(--taille-petite); white-space: nowrap; }
.fiche-element__ajout--esquisse:focus-within:not(.fiche-element__ajout--liste) .fiche-element__ajout-aide { display: inline; }
.fiche-element__ajout--liste { align-items: flex-start; padding-block: var(--espace-2); background: var(--fond-eleve); }
.fiche-element__ajout--liste > .icone { margin-top: 7px; }
.fiche-element__ajout--liste .fiche-element__ajout-champ { flex-basis: calc(100% - 32px); tab-size: 4; white-space: pre; overflow-x: auto; min-height: 5em; }
.fiche-element__apercu { flex-basis: 100%; background: var(--fond-surface); }
.fiche-element__apercu[hidden], .fiche-element__ajout-actions[hidden] { display: none; }
.fiche-element__ajout-actions { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end; gap: var(--espace-3); font-size: var(--taille-petite); }

/* ─── La fiche d'une tâche, à la manière de Planner (Jason, 2026-09-13, captures à l'appui) ───
   Plus large; la barre du haut dit où vit la tâche et se sépare du reste d'un trait, comme dans Planner;
   la case du statut devant le titre; deux rangées à icône (catégories, qui en répond); une grille de deux
   colonnes pour les propriétés; puis les étapes, les notes, les pièces, les liens, l'activité. */
.dialogue:has(.fiche-tache) { width: min(100%, 860px); }
.fiche-tache.fiche-element { gap: var(--espace-6); }
.fiche-tache .fiche-element__entete { margin: calc(-1 * var(--espace-6)) calc(-1 * var(--espace-6)) 0; padding: var(--espace-3) calc(var(--hauteur-controle) + var(--espace-6)) var(--espace-3) var(--espace-6);
    border-bottom: 1px solid var(--bordure); }
.fiche-tache .fiche-element__genre { font-weight: 500; }
.fiche-tache__tete { gap: var(--espace-3); }
.fiche-tache__titre { display: flex; align-items: center; gap: var(--espace-2); }
.fiche-tache__titre .fiche-element__nom { margin: 0; width: auto; min-width: 0; flex: 1 1 auto; }
.fiche-tache__case { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texte-tertiaire); cursor: pointer; }
.fiche-tache__case .coche { width: 22px; height: 22px; }
.fiche-tache__case:hover .coche { border-color: var(--primaire); }
.fiche-tache__case:focus-visible { outline: 2px solid var(--primaire); outline-offset: 1px; }
.fiche-tache__case--jalon { cursor: default; }
.fiche-tache__meta { margin: -6px 0 var(--espace-1) 40px; color: var(--texte-tertiaire); font-size: var(--taille-meta); }
.fiche-tache__rangee { display: flex; align-items: center; gap: var(--espace-3); min-height: 36px; }
.fiche-tache__rangee > .icone { flex: none; width: 20px; height: 20px; margin-left: 6px; color: var(--texte-tertiaire); }
.fiche-tache__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4) var(--espace-6); margin-top: var(--espace-2); }
@media (max-width: 640px) { .fiche-tache__grille { grid-template-columns: 1fr; } }
.fiche-tache__champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: var(--taille-meta); color: var(--texte-secondaire); font-weight: 600; }
.fiche-tache__champ > .selection, .fiche-tache__champ > .saisie { width: 100%; height: 36px; font-size: var(--taille-corps); font-weight: 400; }
.fiche-tache__champ > .saisie { padding: 0 var(--espace-3); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font-family: inherit; }
.fiche-tache__champ .echeance { font-weight: 600; }
.fiche-tache__lu { margin: 0; min-height: 36px; display: flex; align-items: center; gap: 4px; color: var(--texte); font-weight: 400; font-size: var(--taille-corps); }
.fiche-element__activite { display: flex; flex-direction: column; gap: var(--espace-6); }
.fiche-tache .fiche-element__titre { font-size: var(--taille-corps); }
.fiche-tache .fiche-element__titre label { cursor: text; }

/* Les étiquettes de catégorie : une teinte chacune, lisible en clair comme en sombre. */
.etiquette { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: var(--taille-meta); font-weight: 600; white-space: nowrap;
    background: color-mix(in srgb, var(--et, #8a8f98) 20%, var(--fond-surface)); color: color-mix(in srgb, var(--et, #8a8f98) 72%, var(--texte)); }
/* Une teinte par couleur; mêlée à la surface et au texte du thème, elle se lit en clair comme en sombre. */
.etiquette--bleu { --et: #1f7ae0; } .etiquette--violet { --et: #8b4fd8; } .etiquette--sarcelle { --et: #0f9a8e; } .etiquette--rose { --et: #d63a86; }
.etiquette--bronze { --et: #c46423; } .etiquette--vert { --et: #2e9a3e; } .etiquette--jaune { --et: #c29500; } .etiquette--lime { --et: #6f9e00; }
.etiquette--rouge { --et: #d33b3b; } .etiquette--gris { --et: #7a8290; }
.etiquette__retirer { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: -4px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; opacity: .75; }
.etiquette__retirer:hover, .etiquette__retirer:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); outline: none; }
.etiquette__retirer .icone { width: 13px; height: 13px; }
.etiquettes { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px var(--espace-2); margin-left: calc(-1 * var(--espace-2));
    border: 1px solid transparent; border-radius: var(--rayon-champ); cursor: text; }
.etiquettes:hover { background: var(--fond-eleve); }
.etiquettes:focus-within { background: var(--fond-surface); border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-teinte); }
.etiquettes__champ { flex: 1 1 140px; min-width: 120px; height: 26px; padding: 0; border: 0; background: transparent; color: var(--texte); font: inherit; font-size: var(--taille-corps); outline: none; }
.etiquettes__champ::placeholder { color: var(--texte-tertiaire); }
.etiquettes__liste { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; width: min(340px, 100%); max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
    border-radius: var(--rayon-carte); background: var(--fond-surface); box-shadow: var(--ombre-carte), 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent); }
.etiquettes__liste[hidden] { display: none; }
.etiquettes__liste li { display: flex; align-items: center; gap: var(--espace-3); padding: 6px var(--espace-2); border-radius: var(--rayon-champ); cursor: pointer; }
.etiquettes__liste li[hidden] { display: none; }
.etiquettes__liste li:hover, .etiquettes__choix--actif { background: var(--fond-eleve); }
.etiquettes__sens { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte-tertiaire); font-size: var(--taille-petite); }
.etiquettes__creer { font-size: var(--taille-meta); color: var(--texte-secondaire); }
.etiquettes__creer [data-nom-a-creer] { color: var(--texte); font-weight: 600; }

/* Les étiquettes libres se distinguent des catégories par la forme : un jeton arrondi, avec son icône. */
.etiquette--libre { border-radius: 999px; padding: 0 9px 0 7px; gap: 4px; }
.etiquette--libre > .icone { width: 12px; height: 12px; }
.etiquettes__liste li:has(> .etiquettes__crayon) { justify-content: space-between; }
.etiquettes__crayon { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--texte-tertiaire); cursor: pointer; opacity: 0; }
.etiquettes__liste li:hover .etiquettes__crayon, .etiquettes__choix--actif .etiquettes__crayon { opacity: 1; }
.etiquettes__crayon:hover { background: color-mix(in srgb, var(--texte) 10%, transparent); color: var(--texte); }
.etiquettes__crayon .icone { width: 15px; height: 15px; }
.etiquettes__liste li.etiquettes__editeur { flex-direction: column; align-items: stretch; gap: var(--espace-2); padding: var(--espace-2); cursor: default; background: var(--fond-eleve); }
.etiquettes__editeur-nom { height: 32px; padding: 0 var(--espace-2); border: 1px solid var(--bordure); border-radius: var(--rayon-champ); background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-meta); }
.etiquettes__editeur-nom:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px var(--primaire-teinte); }
.etiquettes__palette { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquettes__teinte { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: color-mix(in srgb, var(--et) 55%, var(--fond-surface)); }
.etiquettes__teinte[aria-checked="true"] { box-shadow: 0 0 0 2px var(--fond-surface), 0 0 0 4px var(--et); }
.etiquettes__teinte:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.etiquettes__editeur-actions { display: flex; justify-content: flex-end; gap: var(--espace-2); }
.groupe-cases .case .etiquette { font-size: var(--taille-petite); }

/* Dans l'arbre du plan, une tâche se reconnaît à son icône, pas à une case qu'on ne coche pas là (2026-09-13). */
.arbre__type { display: inline-grid; place-items: center; flex: none; color: var(--texte-tertiaire); }
.arbre__type .icone { width: 17px; height: 17px; }
.arbre__nom--close { color: var(--texte-tertiaire); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ─── Les groupes (Jason, 2026-09-13) ─── */
.admin-groupes .groupe__entete { gap: var(--espace-3); flex-wrap: wrap; justify-content: flex-start; }
.admin-groupes__nouveau { margin-left: auto; }
.admin-groupes__liste { list-style: none; margin: 0; padding: 0 var(--espace-4) var(--espace-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--espace-3); }
.admin-groupe { display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-carte); background: var(--fond-page); }
.admin-groupe:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.admin-groupe__tete { display: flex; align-items: center; gap: var(--espace-2); min-width: 0; }
/* Les personnes et leur niveau (2026-09-15) : une ligne par compte, le niveau se change d'un menu. */
.admin-personnes__liste { list-style: none; margin: 0; padding: 0 var(--espace-4); display: flex; flex-direction: column; }
.admin-personne { display: flex; align-items: center; gap: var(--espace-3); padding: var(--espace-2) 0; border-bottom: 1px solid var(--bordure); }
.admin-personne:last-child { border-bottom: 0; }
.admin-personne__qui { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.admin-personne__nom { font-weight: 600; }
.admin-personne__niveau { display: flex; align-items: center; gap: var(--espace-2); flex: none; }
.admin-personne__fige { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; max-width: 22rem; }
.admin-personnes__legende { margin: 0; padding: var(--espace-3) var(--espace-4) var(--espace-4); display: grid; grid-template-columns: auto 1fr; gap: var(--espace-1) var(--espace-3); align-items: baseline; }
.admin-personnes__legende dt { font-weight: 600; }
.admin-personnes__legende dd { margin: 0; }
.admin-personne__menu { flex: none; }
/* Le relais de courriel (2026-09-16) : ce qui est réglé, et l'exemple à recopier dans le .env. */
.admin-courriel__reglage { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-1) var(--espace-3); margin: 0 0 var(--espace-3); align-items: baseline; }
.admin-courriel__reglage dt { font-weight: 600; }
.admin-courriel__reglage dd { margin: 0; }
/* Le calendrier auquel on s'abonne (2026-09-16) : l'adresse, longue, se copie d'un bouton. */
/* Deux personnes, la même tâche (2026-09-16) : ce qui est enregistré, et ce qu'on avait écrit. */
/* L'aide (2026-09-16) : un sommaire, puis une carte par écran. */
.aide-sommaire { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin-bottom: var(--espace-4); }
.aide-sommaire__lien { padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-badge); background: var(--fond-surface); border: 1px solid var(--bordure); font-size: var(--taille-petite); }
.aide-sommaire__lien--actif { border-color: var(--primaire); color: var(--primaire); font-weight: 600; }
.aide-ecran { margin-bottom: var(--espace-3); scroll-margin-top: var(--espace-8); }
.aide-ecran--vise { outline: 2px solid var(--primaire); outline-offset: 2px; }
.aide-ecran__sommaire { margin: 0 0 var(--espace-3); max-width: 70ch; }
.aide-ecran__titre { margin: var(--espace-3) 0 var(--espace-2); font-size: var(--taille-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-secondaire); }
.aide-ecran__aller { margin-left: auto; }
.aide-liste { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: var(--espace-2) var(--espace-4); margin: 0; align-items: baseline; }
.aide-liste dt { font-weight: 600; }
.aide-liste dd { margin: 0; max-width: 70ch; }
.aide-ecran .groupe__corps { padding: 0 var(--espace-4) var(--espace-4); }
@media (max-width: 640px) { .aide-liste { grid-template-columns: 1fr; gap: var(--espace-1); } .aide-liste dd { margin-bottom: var(--espace-2); } }
.conflit { border: 1px solid var(--danger); border-radius: var(--rayon-carte); background: color-mix(in srgb, var(--danger) 8%, var(--fond-surface)); padding: var(--espace-4); margin: var(--espace-3) var(--espace-4) 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.conflit__titre { display: flex; align-items: center; gap: var(--espace-2); margin: 0; font-size: var(--taille-titre-section); color: var(--danger); }
.conflit p { margin: 0; }
.conflit__table { border-collapse: collapse; width: 100%; font-size: var(--taille-petite); }
.conflit__table th { text-align: left; font-weight: 600; padding: var(--espace-1) var(--espace-2); border-bottom: 1px solid var(--bordure); }
.conflit__table td { padding: var(--espace-1) var(--espace-2); border-bottom: 1px solid var(--bordure); vertical-align: top; }
.conflit__mien { font-weight: 600; }
.conflit__gestes { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }
.calendrier-telecharger { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; margin: 0 0 var(--espace-3); }
.calendrier-adresse { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; margin: 0 0 var(--espace-2); }
.calendrier-adresse code { padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-carte); background: var(--fond-page); border: 1px solid var(--bordure); overflow-wrap: anywhere; user-select: all; font-size: var(--taille-petite); }
.calendrier-mode-emploi summary { cursor: pointer; padding: var(--espace-2) 0; }
.calendrier-mode-emploi ol { margin: 0 0 var(--espace-2); padding-left: var(--espace-6); display: flex; flex-direction: column; gap: var(--espace-1); }
.calendrier-gestes { display: flex; gap: var(--espace-3); flex-wrap: wrap; margin-top: var(--espace-3); }
.admin-courriel__douteux { display: flex; align-items: center; gap: var(--espace-2); color: var(--danger); margin: 0 0 var(--espace-2); }
.admin-courriel__essai { display: flex; align-items: flex-end; gap: var(--espace-3); flex-wrap: wrap; }
.admin-courriel__essai .champ { min-width: 18rem; }
.admin-courriel__exemple { margin: 0; padding: var(--espace-3); border-radius: var(--rayon-carte); background: var(--fond-page); border: 1px solid var(--bordure); overflow-x: auto; font-size: var(--taille-petite); }
/* Importer un échéancier (2026-09-16) : déposer, regarder, corriger les colonnes, créer. */
.admin-import__depot, .admin-import__triage { display: flex; flex-direction: column; gap: var(--espace-3); align-items: flex-start; }
.admin-import__fichier { display: flex; align-items: center; gap: var(--espace-2); flex-wrap: wrap; margin: 0; }
.admin-import__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--espace-3); width: 100%; }
.admin-import__bilan { margin: 0; }
.admin-import__apercu { width: 100%; overflow-x: auto; }
.admin-import__apercu table { width: 100%; border-collapse: collapse; font-size: var(--taille-petite); }
.admin-import__apercu th { text-align: left; font-weight: 600; padding: var(--espace-2); border-bottom: 1px solid var(--bordure); white-space: nowrap; }
.admin-import__apercu td { padding: var(--espace-2); border-bottom: 1px solid var(--bordure); vertical-align: top; }
.admin-import__apercu tr:last-child td { border-bottom: 0; }
.admin-import__avertissements { width: 100%; }
.admin-import__avertissements summary { cursor: pointer; padding: var(--espace-2) 0; }
.admin-import__avertissements ul { margin: 0; padding-left: var(--espace-6); display: flex; flex-direction: column; gap: 2px; }
.admin-import__quoi { display: flex; flex-direction: column; gap: var(--espace-2); border: 0; padding: 0; margin: 0; }
.admin-import__quoi legend { font-size: var(--taille-meta); font-weight: 600; margin-bottom: var(--espace-1); }
.admin-import__choix { display: flex; align-items: flex-start; gap: var(--espace-2); max-width: 70ch; }
.admin-import__choix input { margin-top: 4px; flex: none; }
.admin-import__choix small { display: block; }
.admin-import__actions { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }
/* Repartir à neuf (2026-09-16) : ce qui s'en va, ce qui reste, et la sauvegarde d'office. */
.admin-vider__corps { display: flex; flex-direction: column; gap: var(--espace-3); }
.admin-vider__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--espace-4); }
.admin-vider__titre { margin: 0 0 var(--espace-1); font-size: var(--taille-meta); font-weight: 600; }
.admin-vider__corps ul { margin: 0; padding-left: var(--espace-6); display: flex; flex-direction: column; gap: 2px; }
.admin-vider form { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }
/* La restauration en cours (2026-09-16) : la page attend que Planeur reparte. */
.admin-restauration { border: 1px solid var(--primaire); border-radius: var(--rayon-carte); background: var(--primaire-teinte); padding: var(--espace-4); margin-bottom: var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-2); }
.admin-restauration p { margin: 0; }
.admin-restauration__titre { display: flex; align-items: center; gap: var(--espace-2); margin: 0; font-size: var(--taille-titre-section); }
.admin-restauration__titre .icone { animation: tourner 1.6s linear infinite; }
.admin-restauration__lent { display: none; }
.admin-restauration--lente .admin-restauration__lent { display: block; }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .admin-restauration__titre .icone { animation: none; } }
.admin-sauvegardes__recevoir { flex-direction: column; align-items: flex-start; gap: var(--espace-2); }
.admin-personne--ferme .admin-personne__nom, .admin-personne--ferme .pastille { opacity: .55; }
/* Le mot de passe temporaire, montré une seule fois (2026-09-16) : gros, lisible, à recopier. */
.mot-de-passe-montre { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; margin: 0; }
.mot-de-passe-montre code { font-size: 1.25rem; letter-spacing: .04em; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-carte); background: var(--fond-page); border: 1px solid var(--bordure); user-select: all; }
@media (max-width: 640px) {
    .admin-personne { flex-wrap: wrap; }
    .admin-personne__fige { align-items: flex-start; text-align: left; }
    .admin-personnes__legende { grid-template-columns: 1fr; }
}

/* La pastille d'un groupe (2026-09-14) : un rond, l'icône du groupe dessus; la teinte du thème, ou sa couleur. */
.pastille-groupe { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primaire-teinte); color: var(--primaire); flex: none; }
.pastille-groupe .icone { width: 16px; height: 16px; }
.admin-groupe__pastille { display: inline-flex; border-radius: 50%; flex: none; }
.admin-groupe__pastille:hover .pastille-groupe, .admin-groupe__pastille:focus-visible .pastille-groupe { box-shadow: 0 0 0 2px var(--fond-surface), 0 0 0 4px var(--primaire); }
.palette__pastille.pastille-groupe .icone { width: 18px; height: 18px; }
.icone-groupe { display: inline-flex; color: var(--texte-tertiaire); }
.eventail__pastille-groupe { width: 100%; height: 100%; }
.eventail__pastille-groupe:not([style]) { background: transparent; color: inherit; }
.admin-groupe__nom { margin: 0; font-size: var(--taille-corps); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-groupe__tete .texte-tertiaire { font-size: var(--taille-meta); white-space: nowrap; }
.admin-groupe__menu { margin-left: auto; }
.admin-groupe__membres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-membre { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 3px; border-radius: 999px; background: var(--fond-surface); font-size: var(--taille-meta); font-weight: 500; }
.admin-membre form { display: contents; }
.admin-membre .pastille { width: 22px; height: 22px; font-size: 9px; }
.admin-groupe__ajout { display: inline-flex; }
.admin-groupe__ajout .selection--discrete { color: var(--texte-secondaire); }
/* Un groupe là où l'on confie : l'éventail, « À qui », les cartes. */
.eventail__cible--groupe .eventail__rond { background: var(--primaire-teinte); color: var(--primaire); }
.personne__vide--groupe { background: var(--primaire-teinte); color: var(--primaire); }
.rangee__qui .icone, .rangee__groupe .icone, .case__groupe .icone { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; color: var(--texte-tertiaire); }
/* La petite icône d'un groupe prend la couleur de sa pastille quand il en a une. */
.icone-groupe .icone { color: inherit !important; }
/* Sur une pastille de groupe colorée, l'icône reste blanche, même dans une ligne qui teinte ses icônes. */
.pastille-groupe[style] .icone { color: inherit !important; }
.case__groupe { display: inline-flex; align-items: center; }
.bouton--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.bouton--danger:hover { background: color-mix(in srgb, var(--danger) 88%, black); }

/* La session d'un plan (2026-09-13) : lue d'un coup d'œil; celle de l'année courante se distingue. */
.puce--session { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.puce--session-courante { background: var(--primaire-teinte); color: var(--primaire); }
.admin-session__corps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-4); padding: 0 var(--espace-4) var(--espace-4); }
.admin-session__valeur { display: flex; align-items: baseline; gap: var(--espace-3); margin-right: auto; }
.admin-session__code { font-family: var(--police-titres); font-size: 24px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.admin-session__choix { display: inline-flex; }
.arbre__ligne[data-depot-plan].depot--survol { outline: 2px dashed var(--primaire); outline-offset: -2px; background: var(--primaire-teinte); }

/* « Nouvelle tâche » créée dans un plan, un dossier ou sous une tâche (2026-09-13). */
.nouvelle-tache__dans { display: flex; align-items: center; gap: var(--espace-2); flex-wrap: wrap; margin: 0; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-champ); background: var(--primaire-teinte); color: var(--texte); font-size: var(--taille-meta); }
.nouvelle-tache__dans > .icone { width: 16px; height: 16px; color: var(--primaire); flex: none; }
.nouvelle-tache__dans .lien--discret { margin-left: auto; }

/* Une section repliable (Mes tâches, 2026-09-13) : le chevron devant le titre. */
.groupe__entete--repliable { justify-content: flex-start; gap: var(--espace-2); flex-wrap: wrap; }
.groupe__entete--repliable .depot__invite { margin-left: auto; }
.groupe.noeud--replie > .groupe__entete { padding-bottom: var(--espace-3); }
/* Sur la page Plan, l'invite suit le titre; la bascule « tout replier » reste au bout. */
.groupe.arbre > .groupe__entete--repliable .depot__invite { margin-left: 0; }
.groupe.arbre.noeud--replie > .groupe__entete .arbre__tout { visibility: hidden; }

/* ─── La planification (D70) : l'arbre à gauche, le mois à droite; on glisse de l'un à l'autre ─── */
/* Le panneau « À planifier » prend la largeur qu'on lui donne (--largeur-choix, posée par la poignée); le calendrier prend le reste. */
.planif { display: grid; grid-template-columns: var(--largeur-choix, 340px) var(--espace-4) minmax(0, 1fr); align-items: start; }
.planif__separateur { position: sticky; top: var(--espace-4); align-self: stretch; min-height: 120px; cursor: col-resize; touch-action: none; }
.planif__separateur::before { content: ''; position: absolute; top: var(--espace-4); bottom: var(--espace-4); left: 50%; width: 4px; margin-left: -2px; border-radius: 2px;
  background: transparent; transition: background var(--transition); }
.planif__separateur:hover::before, .planif__separateur:focus-visible::before, .planif--redimension .planif__separateur::before { background: var(--primaire); }
.planif__separateur:focus-visible { outline: none; }
.planif--redimension, .planif--redimension * { cursor: col-resize !important; user-select: none; }
.planif__choix { position: sticky; top: var(--espace-4); max-height: calc(100vh - 2 * var(--espace-4)); overflow: auto; }
.planif__outils { display: inline-flex; align-items: center; gap: var(--espace-3); margin-left: auto; }
.plier-tout { width: 28px; height: 28px; color: var(--texte-secondaire); }
.plier-tout .icone { width: 16px; height: 16px; }
.plier-tout__icone { display: inline-grid; place-items: center; }
/* L'icône montre le geste à venir : replier tant que quelque chose est ouvert, déplier quand tout est replié. */
.plier-tout[data-etat="deplie"] .plier-tout__icone--deplier, .plier-tout[data-etat="replie"] .plier-tout__icone--replier { display: none; }
.planif__filtres { display: flex; align-items: flex-end; gap: var(--espace-3); flex-wrap: wrap; }
.planif__filtre { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 280px; font-size: var(--taille-petite); color: var(--texte-secondaire); font-weight: 600; }
.planif__filtre .selection { width: 100%; font-weight: 400; }
.planif__choix .groupe__entete { flex-wrap: nowrap; align-items: center; }
.planif__arbre { padding-left: 0; }
.planif__ligne { cursor: grab; }
.planif__ligne:active { cursor: grabbing; }
.planif__ligne .arbre__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planif__quand { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planif__calendrier { min-width: 0; padding: var(--espace-3); }
.planif__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); flex-wrap: wrap; margin-bottom: var(--espace-3); }
.planif__mois-nav { display: flex; align-items: center; gap: var(--espace-1); }
.planif__mois { margin: 0 var(--espace-2); font-size: var(--taille-titre-section); font-weight: 600; text-transform: capitalize; }
.planif__fleche--avant svg { transform: rotate(180deg); }
.planif__grille-cadre { overflow-x: auto; }
.planif__grille { min-width: 640px; border-top: 1px solid var(--bordure); border-left: 1px solid var(--bordure); }
.planif__entetes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-right: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.planif__entetes span { padding: var(--espace-1) var(--espace-2); font-size: var(--taille-petite); font-weight: 600; color: var(--texte-secondaire); text-transform: capitalize; }
/* Une semaine : les jours occupent toute la hauteur; les barres se posent en voies, sous les numéros. */
.planif__semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 28px repeat(var(--voies, 1), 22px) minmax(28px, 1fr); row-gap: 2px; min-height: 118px; }
.planif__jour { grid-row: 1 / -1; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 4px; border-right: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
  background: var(--fond-surface); transition: background var(--transition), box-shadow var(--transition); }
.planif__jour--fin-de-semaine { background: color-mix(in srgb, var(--fond-eleve) 45%, var(--fond-surface)); }
.planif__jour--voisin .planif__numero { color: var(--texte-tertiaire); }
.planif__numero { align-self: flex-start; display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 4px; border-radius: 11px; font-size: var(--taille-petite); font-weight: 600; font-variant-numeric: tabular-nums; }
.planif__jour--aujourdhui .planif__numero { background: var(--primaire); color: var(--texte-sur-primaire); }
/* Pendant un glisser, chaque jour se montre recevable; celui qu'on survole s'allume. */
.planif--en-cours .planif__jour { box-shadow: inset 0 0 0 1px transparent; }
.planif__jour--vise { background: var(--primaire-teinte); box-shadow: inset 0 0 0 2px var(--primaire); }
.planif__jour--envoi { opacity: .6; }
.planif__entrees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* La barre d'une tâche : du premier au dernier jour qu'elle touche dans la semaine. */
.planif__barre-tache { position: relative; z-index: 1; align-self: stretch; margin: 0 4px; }
.planif__barre-tache--suite { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; --gauche: inset 3px 0 0 color-mix(in srgb, var(--bord) 45%, transparent); }
.planif__barre-tache--continue { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Le bord droit qui s'étire : invisible au repos, une ligne au survol, le curseur qui le dit. */
.planif__poignee { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: ew-resize; touch-action: none; border-radius: 0 4px 4px 0; }
.planif__poignee::after { content: ""; position: absolute; top: 4px; bottom: 4px; right: 3px; width: 2px; border-radius: 1px; background: var(--primaire); opacity: 0; transition: opacity var(--transition); }
.planif__barre-tache:hover .planif__poignee::after, .planif--etire .planif__poignee::after { opacity: .7; }
.planif--etire, .planif--etire * { cursor: ew-resize !important; user-select: none; }
.planif__entree-periode { margin-left: auto; padding-left: var(--espace-2); color: var(--texte-secondaire); white-space: nowrap; font-variant-numeric: tabular-nums; }
.planif__entree { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 1px 6px; border-radius: 4px; font-size: var(--taille-petite); line-height: 1.5;
  background: var(--primaire-teinte); color: var(--texte); cursor: grab; }
/* Les bords de couleur (2026-09-15) : à gauche le début, à droite l'échéance, les deux pour une période. Composés par variables, pour que
   le survol, la suite d'une semaine et la couleur de catégorie s'y ajoutent sans les effacer. */
.planif__entree { --bord: var(--et, var(--primaire)); --gauche: 0 0 0 0 transparent; --droite: 0 0 0 0 transparent; box-shadow: var(--gauche), var(--droite); }
.planif__entree--a-debut { --gauche: inset 3px 0 0 var(--bord); }
.planif__entree--a-echeance { --droite: inset -3px 0 0 var(--bord); }
.planif__entree:hover, .planif__entree:focus-visible { box-shadow: var(--gauche), var(--droite), inset 0 0 0 1px var(--bord); outline: none; }
.planif__entree .icone { flex: none; width: 12px; height: 12px; color: var(--primaire); }
.planif__entree-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planif__entree--jalon { background: var(--accent-teinte); }
.planif__entree--jalon .icone { color: var(--accent-texte); }
.planif__entree--close .planif__entree-titre { text-decoration: line-through; color: var(--texte-secondaire); }
.planif__plus { margin-top: auto; }
.planif__plus summary { font-size: var(--taille-petite); color: var(--texte-secondaire); cursor: pointer; padding: 0 6px; list-style: none; }
.planif__plus summary::-webkit-details-marker { display: none; }
.planif__plus[open] > .planif__entrees { position: absolute; z-index: 30; top: calc(100% - 4px); left: -1px; min-width: 260px; padding: 6px;
  background: var(--fond-surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: 0 12px 32px rgb(0 0 0 / 16%); }
/* Un calendrier plein a besoin de sa largeur : la disposition au menu du haut, bornée à 860 px, s'élargit ici. */
.coquille--haute .contenu:has(.planif-page) { max-width: 1480px; }
@media (max-width: 960px) {
  .planif { grid-template-columns: minmax(0, 1fr); }
  .planif__separateur { display: none; }
  .planif__choix { position: static; max-height: 45vh; }
}

/* ─── Une recherche qui choisit (2026-09-13) : un champ, une liste qui se filtre sous lui ─── */
.choix-recherche { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 0 1 420px; min-width: 0; }
.planif__filtre-titre { font-size: var(--taille-petite); color: var(--texte-secondaire); font-weight: 600; }
.choix-recherche__champ { position: relative; display: flex; align-items: center; }
.choix-recherche__champ > .icone { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--texte-tertiaire); pointer-events: none; }
.choix-recherche__saisie { width: 100%; height: var(--hauteur-controle); padding: 0 36px 0 34px; border: 1px solid var(--bordure); border-radius: var(--rayon-champ);
  background: var(--fond-surface); color: var(--texte); font: inherit; font-size: var(--taille-meta); }
.choix-recherche__saisie:focus { border-color: var(--primaire); outline: none; box-shadow: 0 0 0 3px var(--primaire-teinte); }
.choix-recherche__effacer { position: absolute; right: 4px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--rayon-champ); color: var(--texte-secondaire); }
.choix-recherche__effacer:hover { background: var(--fond-eleve); color: var(--texte); }
.choix-recherche__effacer .icone { width: 14px; height: 14px; }
.choix-recherche__liste { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: min(360px, 60vh); overflow: auto; margin: 0; padding: 4px;
  list-style: none; background: var(--fond-surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: 0 12px 32px rgb(0 0 0 / 16%); }
.choix-recherche__option { display: flex; align-items: baseline; gap: var(--espace-2); min-width: 0; padding: 6px var(--espace-3) 6px calc(var(--espace-3) + var(--niveau, 0) * 16px);
  border-radius: var(--rayon-champ); font-size: var(--taille-meta); cursor: pointer; }
.choix-recherche__option .icone { flex: none; width: 14px; height: 14px; align-self: center; color: var(--texte-tertiaire); }
.choix-recherche__option--actif { background: var(--primaire-teinte); }
.choix-recherche__option[aria-selected="true"] .choix-recherche__nom { font-weight: 600; }
.choix-recherche__nom { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-recherche__chemin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--taille-petite); color: var(--texte-tertiaire); }
/* Au repos, la liste suit l'arbre : le retrait situe, le chemin serait redondant. En cherchant, à plat, avec le chemin. */
.choix-recherche:not(.choix-recherche--cherche) .choix-recherche__option:not([style*="--niveau: 0"]) .choix-recherche__chemin { display: none; }
.choix-recherche--cherche .choix-recherche__option { padding-left: var(--espace-3); }
.choix-recherche__vide { padding: var(--espace-3); font-size: var(--taille-meta); color: var(--texte-secondaire); }
/* « display: flex » l'emporterait sur l'attribut hidden : une option écartée par la recherche doit disparaître. */
.choix-recherche__option[hidden], .choix-recherche__vide[hidden] { display: none; }

/* ─── Plusieurs responsables (2026-09-14) : des jetons à pastille dans la fiche, des pastilles serrées sur les cartes ─── */
.etiquette--responsable { gap: 6px; height: 28px; padding: 0 4px 0 2px; border-radius: 14px; background: var(--fond-eleve); color: var(--texte); font-weight: 500; }
.etiquette--responsable .pastille, .etiquette--responsable .pastille-groupe { width: 24px; height: 24px; font-size: 10px; }
.etiquette--responsable .pastille-groupe .icone { width: 13px; height: 13px; }
.etiquettes__visuel { display: inline-flex; margin-right: var(--espace-2); }
.etiquettes__visuel .pastille, .etiquettes__visuel .pastille-groupe { width: 24px; height: 24px; font-size: 10px; }
.etiquettes__visuel .pastille-groupe .icone { width: 13px; height: 13px; }
.etiquettes__nom-choix { font-size: var(--taille-meta); }
.pastille-groupe.pastille--petite { width: 24px; height: 24px; }
.pastille-groupe.pastille--petite .icone { width: 13px; height: 13px; }
.rangee__qui { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rangee__pastilles { display: inline-flex; flex: none; }
.rangee__pastilles > * { box-shadow: 0 0 0 2px var(--fond-surface); }
.rangee__pastilles > * + * { margin-left: -6px; }
.rangee__qui-noms { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── « Aujourd'hui » sur de vraies tâches (2026-09-14) : la case est un bouton qui termine la tâche ─── */
.accueil__cocher { display: contents; }
.accueil__coche { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -5px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.accueil__coche .coche { pointer-events: none; }
.accueil__coche:hover .coche, .accueil__coche:focus-visible .coche { border-color: var(--primaire); }
.accueil__coche:focus-visible { outline: 2px solid var(--primaire); outline-offset: 1px; }
/* Les échéances se disent en toutes lettres (« en retard de 3 jours ») : la colonne leur fait place. */
.accueil .rangee { grid-template-columns: auto minmax(0, 1fr) auto 9.5rem; }
@media (max-width: 640px) { .accueil .rangee { grid-template-columns: auto minmax(0, 1fr) auto; } .accueil .rangee__date { grid-column: 2 / -1; text-align: left; } }
a.segments__bouton { text-decoration: none; display: inline-flex; align-items: center; }

/* Un message ouvre sa tâche (2026-09-14) : la tâche se lit comme un lien. */
.message__tache { font-weight: 600; color: var(--texte-secondaire); }
.message__tache .icone { width: 13px; height: 13px; vertical-align: -2px; }

/* ─── Réglages du système (2026-09-14) ─── */
.admin-reglages__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.admin-reglage { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); padding: var(--espace-3); border-radius: var(--rayon-champ); background: var(--fond-eleve); }
.admin-reglage__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-reglage__titre { font-weight: 600; }
/* La Planification aux couleurs des catégories, si le réglage est allumé : la teinte de l'étiquette, mêlée à la surface du thème. */
.planif__entree--categorie { background: color-mix(in srgb, var(--et) 24%, var(--fond-surface)); }
.planif__entree--categorie .icone { color: color-mix(in srgb, var(--et) 80%, var(--texte)); }

/* Le mode de la Planification, au bout de la barre des filtres (2026-09-14). */
.planif__mode { margin-left: auto; align-self: flex-end; }
.planif__mode .segments__bouton { gap: 6px; }
.planif__mode .icone { width: 15px; height: 15px; }

/* « Ma planification » : ce qui situe mes tâches (plans, dossiers, tâches d'autrui) se lit sans s'empoigner. */
.planif__ligne--contexte { cursor: default; }
.planif__ligne--contexte:not(.carte-ouvrable) .arbre__nom { color: var(--texte-secondaire); }
.planif__ligne--contexte.carte-ouvrable { cursor: pointer; }

/* « Aujourd'hui » : les nouveaux messages en tête (2026-09-14). */
.accueil .page__entete { align-items: flex-start; }
.accueil__tous-messages { margin-left: auto; }
.fiche-element__commenter { flex-wrap: wrap; }

/* Changer d'utilisateur, pour les essais (2026-09-14). */
.changer-utilisateur { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 var(--espace-2); border: 1px dashed var(--bordure-forte, var(--bordure)); border-radius: var(--rayon-champ); }
.changer-utilisateur__etiquette { display: inline-flex; align-items: center; gap: 4px; font-size: var(--taille-petite); color: var(--texte-secondaire); white-space: nowrap; }
.changer-utilisateur__etiquette .icone { width: 14px; height: 14px; }
.changer-utilisateur .selection { max-width: 14rem; }
.bandeau-essai { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-2); margin: var(--espace-2) var(--espace-6) 0; padding: var(--espace-2) var(--espace-3); border-radius: var(--rayon-champ);
  background: var(--accent-teinte); color: var(--accent-texte); font-size: var(--taille-meta); }
.bandeau-essai form { margin-left: auto; }
.bandeau-essai .icone { width: 16px; height: 16px; }
@media (max-width: 640px) { .changer-utilisateur__etiquette span { display: none; } .bandeau-essai { margin-inline: var(--espace-4); } }

/* Mentions dans un commentaire (2026-09-14) : la liste sous le champ, et le nom mis en évidence dans le texte. */
.mentions { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.mentions > textarea { flex: 1 1 auto; }
.mentions__liste { position: absolute; left: 0; top: calc(100% + 4px); z-index: 25; min-width: 240px; max-height: 240px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--fond-surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: 0 12px 32px rgb(0 0 0 / 16%); }
.mentions__choix { display: flex; align-items: baseline; gap: var(--espace-2); padding: 6px var(--espace-3); border-radius: var(--rayon-champ); font-size: var(--taille-meta); cursor: pointer; }
.mentions__choix--actif { background: var(--primaire-teinte); }
.mentions__via { font-size: var(--taille-petite); color: var(--texte-tertiaire); }
.mention { color: var(--primaire); font-weight: 600; }

/* ─── Échéancier : l'année en ligne du temps, comme dans la v1 (2026-09-14; docs/05 §4.6) ─── */
/* L'année demande de la largeur : comme la Planification, la page sort du contenu centré. */
/* Les mois se lisent d'un trait à l'autre : une ligne fine prolonge chaque graduation dans les couloirs. */
.echeancier__piste--grille { position: absolute; inset: 0; pointer-events: none; }
.echeancier__trait { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bordure); }
.echeancier { position: relative; background: var(--fond-surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); overflow: clip; }
.echeancier:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.echeancier__axe, .echeancier__couloir { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; align-items: stretch; }
/* L'axe reste visible en descendant : sans repère, une position ne veut rien dire. */
.echeancier__axe { position: sticky; top: 0; z-index: 4; background: var(--fond-eleve); }
.echeancier__axe .echeancier__piste { height: 40px; min-height: 0; }
.echeancier__etiquette { display: flex; align-items: center; gap: var(--espace-2); min-width: 0; padding: var(--espace-2) var(--espace-3); border-right: 1px solid var(--bordure); font-size: var(--taille-meta); font-weight: 600; }
.echeancier__nom { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.echeancier__nom, .echeancier__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.echeancier__detail { font-size: var(--taille-etiquette); font-weight: 400; color: var(--texte-tertiaire); }
.echeancier__compte { margin-left: auto; padding-left: var(--espace-1); color: var(--texte-tertiaire); font-size: var(--taille-petite); font-weight: 400; font-variant-numeric: tabular-nums; }
.echeancier__puce { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--et); }
/* Zoom (2026-09-14) : chaque repère porte sa place dans l'année (--g, --l, en pour cent); la ligne du temps porte sa fenêtre (--zd, son
   début; --zl, sa largeur). Une place se lit donc « (g − zd) / zl » de la piste — la fenêtre change, rien ne se recharge. Ce qui sort
   de la fenêtre est rogné par la piste. */
.echeancier__piste { position: relative; display: block; min-height: 34px; padding: var(--espace-1) 0; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 6px; }
.echeancier__graduation, .echeancier__trait, .echeancier__aujourdhui, .marque-temps { left: calc((var(--g, 0) - var(--zd, 0)) / var(--zl, 100) * 100%); }
/* L'axe, sur deux étages qui suivent le zoom : en haut le repère large, en bas le fin. La densité (data-densite) dit lesquels paraissent. */
.echeancier__graduation { position: absolute; display: none; padding: 0 4px; white-space: nowrap; border-left: 1px solid var(--bordure); font-variant-numeric: tabular-nums; }
.echeancier__graduation--haut, [data-densite="annee"] .echeancier__graduation--session, [data-densite="semaines"] .echeancier__graduation--mois, [data-densite="jours"] .echeancier__graduation--semaine {
  display: block; top: 0; height: 40px; padding-top: 5px; color: var(--texte-secondaire); font-size: var(--taille-etiquette); font-weight: 700; }
[data-densite="annee"] .echeancier__graduation--mois, [data-densite="semaines"] .echeancier__graduation--semaine, [data-densite="jours"] .echeancier__graduation--jour {
  display: block; top: 21px; height: 19px; color: var(--texte-tertiaire); font-size: 10px; font-weight: 600; border-left-color: color-mix(in srgb, var(--bordure) 60%, transparent); }
[data-densite="jours"] .echeancier__graduation--fin-de-semaine { opacity: .55; }
/* Le repère large où commence la fenêtre reste lisible à gauche, même si son début est hors champ. */
.echeancier__etage-debut { position: absolute; left: 0; top: 0; z-index: 1; padding: 5px 6px 0 4px; height: 19px; background: var(--fond-eleve); color: var(--texte-secondaire); font-size: var(--taille-etiquette); font-weight: 700; white-space: nowrap; pointer-events: none; }
.echeancier__etage-debut:empty { display: none; }
.echeancier__trait--semaine { display: none; opacity: .5; }
[data-densite="semaines"] .echeancier__trait--semaine, [data-densite="jours"] .echeancier__trait--semaine { display: block; }
.echeancier__coin { border-right: 1px solid var(--bordure); }
.echeancier__retour { display: inline-flex; align-items: center; gap: 4px; color: var(--primaire); font-size: var(--taille-petite); font-weight: 600; text-decoration: none; }
.echeancier__retour:hover, .echeancier__retour:focus-visible { text-decoration: underline; }
.echeancier__couloir { border-top: 1px solid var(--bordure); }
.echeancier__couloir--jalons { background: color-mix(in srgb, var(--accent) 8%, var(--fond-surface)); }
/* Le trait d'aujourd'hui traverse tous les couloirs : c'est le repère commun. */
.echeancier__aujourdhui { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--primaire); opacity: .5; pointer-events: none; }
.echeancier__vide, .echeancier__note { margin: 0; color: var(--texte-secondaire); font-size: var(--taille-meta); }
.echeancier__note { display: flex; align-items: center; gap: var(--espace-2); }
.echeancier__note .icone { width: 14px; height: 14px; }

.marque-temps { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; padding: 0; border: 2px solid var(--et, var(--texte-tertiaire)); background: var(--fond-surface); text-decoration: none; cursor: pointer; }
.marque-temps:hover, .marque-temps:focus-visible { z-index: 3; box-shadow: 0 0 0 2px var(--fond-surface), 0 0 0 4px var(--primaire); outline: none; }
/* Un point n'a pas de largeur propre : il reste rond et visible quoi qu'il arrive. */
.marque-temps--point { width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; }
/* Une période : rond – trait – barre (Jason, 2026-09-14 : « tasks that have a start date and an end date should not show the range like in
   calendar mode, but rather marker-line-marker », puis « I want circle-line-bar for ranges »). Un rond au début, un trait fin, une barre
   verticale à la fin : on lit d'un coup où elle commence et où elle finit. */
.marque-temps--barre { width: calc(var(--l, 0) / var(--zl, 100) * 100%); min-width: 2px; height: 11px; border: 0; border-radius: 0;
  background: linear-gradient(var(--et, var(--texte-tertiaire)), var(--et, var(--texte-tertiaire))) center / 100% 2px no-repeat; }
.marque-temps--barre::before, .marque-temps--barre::after { content: ''; position: absolute; top: 0; box-sizing: border-box; width: 11px; height: 11px;
  border: 2px solid var(--et, var(--texte-tertiaire)); border-radius: 50%; background: var(--fond-surface); }
.marque-temps--barre::before { left: -5px; }
.marque-temps--barre::after { right: -1px; top: -2px; width: 3px; height: 15px; border: 0; border-radius: 1px; background: var(--et, var(--texte-tertiaire)); }
.marque-temps--barre:hover, .marque-temps--barre:focus-visible { box-shadow: none; }
.marque-temps--barre:hover::before, .marque-temps--barre:hover::after, .marque-temps--barre:focus-visible::before, .marque-temps--barre:focus-visible::after { box-shadow: 0 0 0 2px var(--fond-surface), 0 0 0 4px var(--primaire); }
/* Losange or pour un jalon. */
.marque-temps--jalon { width: 10px; height: 10px; margin-left: -5px; border-radius: 2px; background: var(--accent); border-color: var(--accent); transform: translateY(-50%) rotate(45deg); }
.marque-temps--en-retard { border-color: var(--danger); }
.marque-temps--barre.marque-temps--en-retard::before { border-color: var(--danger); }
.marque-temps--barre.marque-temps--en-retard::after { background: var(--danger); }
.marque-temps--terminee { opacity: .45; }
/* Le titre ne se lit que sur une barre assez large; ailleurs l'infobulle suffit. */
.marque-temps__titre { display: block; padding: 0 4px; color: var(--texte); font-size: var(--taille-etiquette); font-weight: 600; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marque-temps .marque-temps__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Étroit : la ligne du temps garde des repères lisibles et défile dans son cadre; les noms des couloirs restent collés à gauche. */
@media (max-width: 900px) {
  .echeancier { overflow-x: auto; overscroll-behavior-inline: contain; }
  .echeancier__axe, .echeancier__couloir { grid-template-columns: 150px minmax(620px, 1fr); min-width: 770px; }
  .echeancier__etiquette { position: sticky; left: 0; z-index: 2; background: var(--fond-surface); }
  .echeancier__axe .echeancier__etiquette { background: var(--fond-eleve); }
}

/* ─── Tableau de bord, comme dans la v1 (2026-09-14; docs/05 §4.3) ─── */
.coquille--haute .contenu:has(.bord-page) { max-width: 1480px; }
.bord-section .groupe__entete { flex-wrap: wrap; }
.bord-section__outils { margin-left: auto; }
.bord-section__corps { display: flex; flex-direction: column; gap: var(--espace-3); padding: 0 var(--espace-4) var(--espace-4); }
.bord__vide, .bord__note { margin: 0; color: var(--texte-secondaire); font-size: var(--taille-meta); }
.bord__vide--ok { display: flex; align-items: center; gap: var(--espace-2); }
.bord__vide--ok .icone { width: 16px; height: 16px; color: color-mix(in srgb, #16a34a 80%, var(--texte)); }
/* Les quatre chiffres : un trait de couleur à gauche dit leur ton. */
.bord-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--espace-3); }
.bord-chiffre { --ton: var(--primaire); display: flex; flex-direction: column; gap: var(--espace-1); padding: var(--espace-4); border-radius: var(--rayon-carte); background: var(--fond-surface); box-shadow: inset 3px 0 0 var(--ton), var(--ombre-carte); color: var(--ton); text-decoration: none; }
.bord-chiffre--danger { --ton: var(--danger); }
.bord-chiffre--avertissement { --ton: color-mix(in srgb, var(--accent) 55%, var(--accent-texte)); }
.bord-chiffre--succes { --ton: color-mix(in srgb, #16a34a 80%, var(--texte)); }
.bord-chiffre--lien:hover, .bord-chiffre--lien:focus-visible { background: var(--fond-eleve); outline: none; }
.bord-chiffre--lien:focus-visible { box-shadow: inset 3px 0 0 var(--ton), 0 0 0 2px var(--primaire); }
.bord-chiffre__haut { display: inline-flex; align-items: center; gap: var(--espace-2); }
.bord-chiffre__haut .icone { width: 16px; height: 16px; }
.bord-chiffre__valeur { font-family: var(--police-titres); font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bord-chiffre__libelle { color: var(--texte-secondaire); font-size: var(--taille-meta); }
/* Avancement : une carte par plan ou dossier, sa barre segmentée. */
.bord-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espace-3); }
.bord-carte { display: flex; flex-direction: column; gap: var(--espace-2); padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-carte); background: var(--fond-page); color: var(--texte); text-decoration: none; }
.bord-carte:hover, .bord-carte:focus-visible { background: var(--fond-eleve); outline: none; }
.bord-carte:focus-visible { box-shadow: 0 0 0 2px var(--primaire); }
.bord-carte__entete { display: flex; align-items: center; gap: var(--espace-2); min-width: 0; }
.bord-carte__couleur { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--et); }
.bord-carte__titre { display: flex; flex-direction: column; min-width: 0; font-size: var(--taille-meta); font-weight: 600; }
.bord-carte__detail { font-size: var(--taille-etiquette); font-weight: 400; color: var(--texte-tertiaire); }
.bord-carte__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.bord-barre { display: flex; height: 8px; overflow: hidden; border-radius: var(--rayon-badge); background: var(--fond-eleve); }
.bord-barre__part--terminee { background: color-mix(in srgb, #16a34a 85%, var(--texte)); }
.bord-barre__part--en-cours { background: var(--primaire); }
.bord-barre__part--a-faire { background: color-mix(in srgb, var(--texte-tertiaire) 45%, var(--fond-eleve)); }
/* Charge : une grille, pour que les colonnes de semaines s'alignent vraiment. */
.bord-charge { display: flex; flex-direction: column; }
.bord-charge__entete, .bord-charge__ligne { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(90px, 2fr)); align-items: center; gap: var(--espace-3); }
.bord-charge__entete { padding-bottom: var(--espace-2); }
.bord-charge__semaine { color: var(--texte-tertiaire); font-size: var(--taille-etiquette); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bord-charge__ligne { padding: var(--espace-2) 0; border-top: 1px solid var(--bordure); }
.bord-charge__nom { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-2); font-size: var(--taille-meta); font-weight: 600; min-width: 0; }
.bord-charge__reste { font-weight: 400; color: var(--texte-tertiaire); }
.bord-charge__cellule { display: flex; align-items: center; gap: var(--espace-2); min-height: 14px; }
.bord-charge__barre { height: 10px; border-radius: var(--rayon-badge); background: var(--primaire); }
.bord-charge__barre[style="width: 0%"] { display: none; }
.bord-charge__barre--chargee { background: var(--accent); }
.bord-charge__nombre { color: var(--texte-secondaire); font-size: var(--taille-meta); font-variant-numeric: tabular-nums; }
/* À décider : un fait, et le bouton qui le règle. */
.bord-decisions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.bord-decision { --ton: var(--primaire); display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-carte); background: var(--fond-page); box-shadow: inset 3px 0 0 var(--ton); }
.bord-decision--personne { --ton: var(--danger); }
.bord-decision--retard { --ton: var(--accent); }
.bord-decision__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--taille-meta); }
.bord-decision__detail { color: var(--texte-secondaire); }
.bord-echeancier { display: flex; flex-direction: column; gap: var(--espace-3); }
@media (max-width: 720px) {
  .bord-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bord-chiffre { padding: var(--espace-3); }
  .bord-charge { overflow-x: auto; overscroll-behavior-inline: contain; }
  .bord-charge__entete, .bord-charge__ligne { grid-template-columns: 200px repeat(3, minmax(90px, 1fr)); min-width: 560px; }
  .bord-decision { flex-direction: column; align-items: stretch; }
  .bord-section__corps { padding-inline: var(--espace-3); }
}

/* ─── Le zoom de l'échéancier : l'année en miniature et sa fenêtre, comme au montage (2026-09-14) ─── */
.echeancier-zoom { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; align-items: center; }
.echeancier-zoom__dates { font-size: var(--taille-petite); font-weight: 600; color: var(--texte-secondaire); font-variant-numeric: tabular-nums; }
.echeancier-zoom__piste { position: relative; height: 44px; border-radius: var(--rayon-champ); background: var(--fond-eleve); cursor: pointer; touch-action: none; user-select: none; }
.echeancier-zoom__mois { position: absolute; top: 3px; padding-left: 3px; border-left: 1px solid color-mix(in srgb, var(--texte-tertiaire) 30%, transparent); color: var(--texte-tertiaire); font-size: 10px; line-height: 38px; height: 38px; pointer-events: none; }
.echeancier-zoom__marque { position: absolute; bottom: 7px; min-width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: color-mix(in srgb, var(--primaire) 55%, transparent); pointer-events: none; }
.echeancier-zoom__marque--jalon { bottom: 17px; background: var(--accent); }
.echeancier-zoom__aujourdhui { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--primaire); pointer-events: none; }
/* La fenêtre : ce qu'on regarde se voit en clair, bordé comme un extrait sur la piste d'un montage. */
.echeancier-zoom__fenetre { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 2px solid var(--primaire); border-radius: var(--rayon-champ);
  background: color-mix(in srgb, var(--primaire) 10%, transparent); box-shadow: 0 0 0 9999px color-mix(in srgb, var(--fond-page) 45%, transparent); cursor: grab; }
.echeancier-zoom__piste { overflow: hidden; }
.echeancier-zoom--glisse .echeancier-zoom__fenetre { cursor: grabbing; }
.echeancier-zoom__fenetre:focus-visible, .echeancier-zoom__poignee:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.echeancier-zoom__poignee { position: absolute; top: -2px; bottom: -2px; width: 12px; background: var(--primaire); cursor: ew-resize; }
.echeancier-zoom__poignee::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 14px; transform: translate(-50%, -50%); border-radius: 1px; background: var(--texte-sur-primaire); opacity: .85; }
.echeancier-zoom__poignee--debut { left: -2px; border-radius: var(--rayon-champ) 0 0 var(--rayon-champ); }
.echeancier-zoom__poignee--fin { right: -2px; border-radius: 0 var(--rayon-champ) var(--rayon-champ) 0; }
@media (max-width: 900px) {
  .echeancier-zoom { grid-template-columns: 1fr; gap: var(--espace-1); }
}

/* ─── Une ligne seule, en grand : les barres du calendrier, titres écrits (2026-09-14) ─── */
.echeancier__etiquette--choisir { color: inherit; text-decoration: none; cursor: pointer; }
.echeancier__etiquette--choisir:hover, .echeancier__etiquette--choisir:focus-visible { background: var(--fond-eleve); outline: none; }
.echeancier__etiquette--choisir:hover .echeancier__nom, .echeancier__etiquette--choisir:focus-visible .echeancier__nom { color: var(--primaire); text-decoration: underline; }
.echeancier--detail .echeancier__couloir--detail { align-items: start; }
.echeancier--detail .echeancier__couloir--detail > .echeancier__etiquette { align-self: stretch; align-items: flex-start; padding-top: var(--espace-3); font-size: var(--taille-corps); }
.echeancier__couloir--detail .echeancier__piste { transition: min-height var(--transition); }
/* La barre couvre la période (un jour au moins); le titre y est écrit et, si la barre est plus courte que lui, continue à sa droite. */
.marque-temps.marque-temps--detail { top: 6px; transform: none; box-sizing: border-box; height: calc(var(--hauteur-voie) - 4px); margin: 0; padding: 0; width: calc(var(--l, 0) / var(--zl, 100) * 100%); min-width: 6px;
  border: 0; border-radius: 4px; background: color-mix(in srgb, var(--et) 26%, var(--fond-surface)); box-shadow: inset 3px 0 0 var(--et); overflow: hidden; white-space: nowrap; }
/* Le titre tient dans sa barre (Jason, 2026-09-14 : « if the title is longer than the shown timeline bar we need to truncate the title so it
   doesn't overlap past the timeline bar ») : coupé d'une ellipse; l'infobulle le dit en entier. */
.marque-temps--detail .marque-temps__titre { position: static; display: block; box-sizing: border-box; width: auto; max-width: 100%; height: auto; clip-path: none; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--espace-2) 0 9px;
  color: var(--texte); font-size: var(--taille-petite); font-weight: 600; line-height: calc(var(--hauteur-voie) - 4px); }
.marque-temps--detail:hover, .marque-temps--detail:focus-visible { z-index: 3; box-shadow: inset 3px 0 0 var(--et), 0 0 0 2px var(--primaire); outline: none; }
.marque-temps--detail:hover .marque-temps__titre, .marque-temps--detail:focus-visible .marque-temps__titre { background: color-mix(in srgb, var(--fond-surface) 85%, transparent); border-radius: 4px; }
.marque-temps--detail.marque-temps--detail-jalon { background: color-mix(in srgb, var(--accent) 38%, var(--fond-surface)); box-shadow: inset 3px 0 0 var(--accent); }
.marque-temps--detail.marque-temps--en-retard { box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent); }
.marque-temps--detail.marque-temps--en-retard .marque-temps__titre { color: color-mix(in srgb, var(--danger) 70%, var(--texte)); }
.marque-temps--detail.marque-temps--terminee .marque-temps__titre { text-decoration: line-through; }

/* ─── Échéancier épuré (2026-09-14) : une barre d'outils, la miniature, la ligne du temps ─── */
.echeancier-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-3); }
.echeancier-outils__annee { display: inline-flex; align-items: center; }
.echeancier-outils__annee .bouton { font-size: 18px; line-height: 1; }
.echeancier-outils__code { min-width: 64px; text-align: center; font-family: var(--police-titres); font-size: var(--taille-meta); font-weight: 700; font-variant-numeric: tabular-nums; }
.echeancier-outils__lignes { margin-left: auto; }
.echeancier-zoom__dates { padding: 0 var(--espace-3); font-size: var(--taille-petite); font-weight: 600; color: var(--texte-secondaire); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .echeancier-outils__lignes { margin-left: 0; }
  .echeancier-zoom__dates { padding: 0; }
}

/* ─── Densité de l'écran : confortable (d'origine), compact, ultra compact (2026-09-15) ───
   Presque tout se mesure par les jetons : on les resserre ici, et l'écran suit. Quelques mesures tenues en dur se rattrapent ensuite. */
:root[data-affichage="compact"] {
  --taille-titre-page: 21px; --taille-titre-section: 15px; --taille-corps: 14px; --taille-meta: 12.5px; --taille-petite: 11.5px; --taille-etiquette: 10.5px;
  --espace-1: 3px; --espace-2: 6px; --espace-3: 9px; --espace-4: 12px; --espace-6: 18px; --espace-8: 24px;
  --hauteur-controle: 28px; --hauteur-voie: 24px;
}
:root[data-affichage="ultra-compact"] {
  --taille-titre-page: 18px; --taille-titre-section: 14px; --taille-corps: 13px; --taille-meta: 12px; --taille-petite: 11px; --taille-etiquette: 10px;
  --espace-1: 2px; --espace-2: 4px; --espace-3: 6px; --espace-4: 8px; --espace-6: 12px; --espace-8: 16px;
  --hauteur-controle: 24px; --hauteur-voie: 20px;
}
:root[data-affichage="compact"] body, :root[data-affichage="ultra-compact"] body { font-size: var(--taille-corps); }
:root[data-affichage="compact"] .barre { min-height: 48px; }
:root[data-affichage="ultra-compact"] .barre { min-height: 40px; }
:root[data-affichage="compact"] .arbre__ligne { min-height: 26px; }
:root[data-affichage="ultra-compact"] .arbre__ligne { min-height: 22px; }
:root[data-affichage="ultra-compact"] .rangee { gap: var(--espace-2); }
:root[data-affichage="ultra-compact"] .rangee__corps { gap: 0; }
:root[data-affichage="compact"] .echeancier__piste { min-height: 30px; }
:root[data-affichage="ultra-compact"] .echeancier__piste { min-height: 26px; }
:root[data-affichage="ultra-compact"] .echeancier__axe .echeancier__piste { height: 36px; }
:root[data-affichage="compact"] .bord-chiffre__valeur { font-size: 24px; }
:root[data-affichage="ultra-compact"] .bord-chiffre__valeur { font-size: 20px; }
:root[data-affichage="ultra-compact"] .echeancier-zoom__piste { height: 36px; }
/* Les pastilles, puces, étiquettes et badges portent leur hauteur en dur : on les resserre avec le reste. */
:root[data-affichage="compact"] .etiquette { height: 21px; padding: 0 6px; }
:root[data-affichage="compact"] .badge { height: 20px; }
:root[data-affichage="compact"] .pastille--petite { width: 22px; height: 22px; }
:root[data-affichage="ultra-compact"] .etiquette { height: 18px; padding: 0 5px; font-size: var(--taille-petite); }
:root[data-affichage="ultra-compact"] .badge { height: 18px; }
:root[data-affichage="ultra-compact"] .puce { height: 16px; padding: 0 5px; }
:root[data-affichage="ultra-compact"] .pastille--petite { width: 20px; height: 20px; font-size: 9px; }
:root[data-affichage="ultra-compact"] .rangee__meta { gap: var(--espace-1) var(--espace-2); }

/* ─── Avis « on vous a confié » (2026-09-15) : une carte de message, sa liste de tâches pour un lot ─── */
.avis__taches { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--taille-petite); color: var(--texte-secondaire); }
.avis__taches li { display: flex; align-items: center; gap: var(--espace-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avis__taches .icone { width: 12px; height: 12px; flex: none; }
.avis__reste { color: var(--texte-tertiaire); }

/* ─── Onglets (Mes paramètres, 2026-09-15) : une barre soulignée, un panneau à la fois ─── */
.onglets { display: flex; flex-wrap: wrap; gap: var(--espace-1); border-bottom: 1px solid var(--bordure); }
.onglets__lien { display: inline-flex; align-items: center; gap: var(--espace-2); height: calc(var(--hauteur-controle) + 6px); padding: 0 var(--espace-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--texte-secondaire); font-weight: 600; text-decoration: none; }
.onglets__lien .icone { width: 16px; height: 16px; }
.onglets__lien:hover { color: var(--texte); }
.onglets__lien:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; border-radius: var(--rayon-champ); }
.onglets__lien--actif { color: var(--primaire); border-bottom-color: var(--primaire); }
.onglets__panneau { display: flex; flex-direction: column; gap: var(--espace-4); }
.onglets__panneau[hidden] { display: none; }
/* Une ancre (« #affichage ») laisse voir les onglets sous la barre du haut. */
.page .reglages { scroll-margin-top: 140px; }

/* ─── Sous-tâches en arbre dans la fenêtre d'une tâche (2026-09-15) ─── */
.fiche-element__noeud { list-style: none; }
.fiche-element__liste--enfants { margin: 0 0 0 22px; padding-left: var(--espace-2); border-left: 1px solid var(--bordure); }
.fiche-element__plier-place { flex: none; width: 18px; }
.fiche-element__titre .fiche-element__outils { margin-left: auto; }
.fiche-element__titre:has(.fiche-element__outils) { display: flex; align-items: center; gap: var(--espace-2); }

/* ─── Le fil d'Ariane d'une sous-tâche (2026-09-15) : où l'on est, à quelle profondeur ─── */
.fil-ariane { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--texte-tertiaire); font-size: var(--taille-meta); }
.fil-ariane > .icone { width: 16px; height: 16px; flex: none; }
.fil-ariane__liste { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; }
.fil-ariane__morceau { display: inline-flex; align-items: center; min-width: 0; max-width: 200px; white-space: nowrap; }
.fil-ariane__morceau + .fil-ariane__morceau::before { content: '›'; flex: none; margin: 0 6px; color: var(--texte-tertiaire); }
.fil-ariane__morceau, .fil-ariane__morceau a { overflow: hidden; text-overflow: ellipsis; }
.fil-ariane__morceau--lieu { max-width: 160px; }
.fil-ariane__morceau a { color: var(--texte-secondaire); text-decoration: none; }
.fil-ariane__morceau a:hover, .fil-ariane__morceau a:focus-visible { color: var(--primaire); text-decoration: underline; text-underline-offset: 2px; }
.fil-ariane__morceau--ici { max-width: 240px; color: var(--texte); font-weight: 600; }
/* Rien à replier (moins de deux cartes, ou un arbre sans branche) : la bascule se cache vraiment — le style des boutons l'emportait sur hidden. */
.plier-tout[hidden] { display: none; }
/* La bascule des cartes au même endroit sur chaque écran (2026-09-15) : en tête, en haut à droite, alignée sur le titre. */
.page__entete:has(.plier-cartes) { align-items: flex-start; }

/* ─── Alt au lâcher : l'échéance (2026-09-15). La plage allumée finit sur le jour visé, marqué d'un trait d'or à droite. ─── */
.planif__astuce { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--espace-2); color: var(--texte-tertiaire); font-size: var(--taille-petite); }
.planif__astuce kbd { padding: 0 5px; border-radius: 4px; background: var(--fond-eleve); font: inherit; font-weight: 600; color: var(--texte-secondaire); }
.planif--echeance .planif__jour--vise { background: var(--accent-teinte); box-shadow: inset 0 0 0 2px var(--accent); }
.planif--echeance .planif__jour--vise-fin { box-shadow: inset 0 0 0 2px var(--accent), inset -6px 0 0 var(--accent); }
.planif__mode-jour { display: flex; flex-wrap: wrap; gap: var(--espace-2); border: 0; padding: 0; margin: 0; }
.planif__mode-jour legend { width: 100%; margin-bottom: var(--espace-1); font-size: var(--taille-meta); font-weight: 600; }

/* ─── Mes tâches reçoit un courriel ou un document (2026-09-15) : toute la liste est une cible ─── */
.mes-taches__depot { display: flex; flex-direction: column; gap: var(--espace-4); border-radius: var(--rayon-carte); }
.mes-taches__depot.depot--survol { background: var(--primaire-teinte); outline-offset: 4px; }
.mes-taches__invite { display: flex; align-items: center; gap: var(--espace-2); margin: 0; font-size: var(--taille-meta); }
.mes-taches__invite .icone { width: 16px; height: 16px; color: var(--texte-tertiaire); }
.bord-section__aide { margin-left: var(--espace-2); font-size: var(--taille-petite); }
@media (max-width: 720px) { .bord-section__aide { display: none; } }

/* ─── Sauvegardes, en Administration (2026-09-15) ─── */
.admin-sauvegardes__geste { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }
.admin-sauvegardes__liste { padding: 0; margin-top: var(--espace-3); }
.admin-sauvegarde { display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-2); border-radius: var(--rayon-champ); cursor: default; }
.admin-sauvegarde:hover { background: var(--fond-eleve); }
.admin-sauvegarde > .icone { width: 16px; height: 16px; flex: none; color: var(--texte-tertiaire); }
.admin-sauvegarde__nom { font-family: var(--police-corps); font-size: var(--taille-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-sauvegarde__gestes { display: flex; align-items: center; gap: var(--espace-1); margin-left: auto; }
.admin-sauvegarde__supprimer { color: var(--danger); }
.admin-sauvegardes__note { margin: var(--espace-2) 0 0; font-size: var(--taille-petite); }
.admin-sauvegardes__note code { padding: 0 4px; border-radius: 4px; background: var(--fond-eleve); font-size: var(--taille-petite); }

/* ─── Générer l'année : les dates des jalons, dans la copie d'un gabarit (2026-09-15) ─── */
.copie-ancres { display: flex; flex-direction: column; gap: var(--espace-2); border: 0; padding: 0; margin: 0; }
.copie-ancres legend { margin-bottom: var(--espace-1); font-size: var(--taille-meta); font-weight: 600; }
.copie-ancre { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: var(--espace-2); font-size: var(--taille-meta); }
.copie-ancre__nom { display: inline-flex; align-items: center; gap: var(--espace-2); min-width: 0; }
.copie-ancre__nom .icone { width: 14px; height: 14px; flex: none; color: var(--accent-texte); }
.copie-ancre small { grid-column: 1 / -1; margin-top: -2px; }
.copie-ancres__note { margin: var(--espace-1) 0 0; font-size: var(--taille-petite); }
/* Dater aussi ce qui n'a pas de règle (2026-09-16) : une case à cocher sous l'aperçu de la copie. */
.copie-ancres__deduire { display: flex; align-items: flex-start; gap: var(--espace-2); font-size: var(--taille-petite); }
.copie-ancres__deduire input { margin-top: 3px; flex: none; }
.copie-ancres__deduire small { display: block; }

/* ─── La règle de date d'une tâche de gabarit (2026-09-15) ─── */
.fiche-regle { display: flex; flex-direction: column; gap: var(--espace-1); grid-column: 1 / -1; }
.fiche-regle__morceaux { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.fiche-regle__morceaux .selection { font-size: var(--taille-meta); }
.fiche-regle__jours { width: 72px; }
.fiche-regle__ancre { min-width: 180px; max-width: 100%; }
.fiche-regle__duree { display: inline-flex; align-items: center; gap: var(--espace-2); font-size: var(--taille-meta); color: var(--texte-secondaire); }

/* ─────────────────────────────────────────────────────────────────────────────
   À l'imprimante (Jason, 2026-09-16) : l'échéancier part en réunion, et à qui n'ouvrira
   jamais Planeur. On enlève ce qui ne s'imprime pas — menus, barres, boutons, dialogues —
   et l'on garde le contenu, en noir sur blanc, sans couper une carte en deux.
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
    :root {
        --fond-page: #fff; --fond-surface: #fff; --fond-eleve: #fff;
        --texte: #000; --texte-secondaire: #333; --texte-tertiaire: #555;
        --bordure: #bbb; --bordure-forte: #888; --ombre-carte: none;
    }
    body { background: #fff; color: #000; }
    /* Ce qui sert à naviguer ou à agir ne s'imprime pas. */
    .navigation, .barre, .barre__navigation, .lien-evitement, .voile, .plier-tout, .plier-cartes,
    .page__actions, .filtres, .barre-filtres, .contexte, .arbre__plier, .bouton, .depot__invite,
    .eventail, .plus-bac, .bac, .annonce, [data-dialogue], .fiche-element__pied, .admin-restauration,
    .segments, .echeancier-zoom, .planif, .recherche { display: none !important; }
    /* La page respire : ce qui était calé sous une barre fixe ne l'est plus. */
    .page__entete { padding-top: 0; margin-bottom: 8pt; }
    .coquille, .principal, .contenu, .page { display: block !important; margin: 0; padding: 0; max-width: none; width: auto; }
    /* Les cartes s'impriment entières, à la file. */
    .groupe, .carte, .rangee, .admin-personne, .echeancier__ligne { break-inside: avoid; page-break-inside: avoid; }
    .groupe { border: 1px solid var(--bordure); box-shadow: none; margin-bottom: 8pt; }
    .titre-page { font-size: 16pt; }
    .groupe__titre { font-size: 12pt; }
    /* Une adresse imprimée ne se clique pas : on écrit où elle mène. */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
    /* Les onglets cachés s'impriment tous : le papier n'a pas d'onglet. */
    .onglets { display: none !important; }
    .onglets__panneau[hidden] { display: block !important; }
    /* Ce qu'on a replié à l'écran s'imprime quand même : le papier ne se déplie pas. */
    [data-noeud].noeud--replie > [data-enfants] { display: block !important; }
}