/* Interface de Sillon, identité « Champ » : une feuille, aucune ressource externe.
   Variables, base, composants, pages, puis la mise en page compacte des téléphones (< 640 px).
   Clair seulement. La couleur d'un statut suit `done` et `abandons` (status-open / status-done /
   status-abandoned), jamais son nom. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.ad33cbc6d232.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbf6ec;
  --field: #f2e8d5;
  --paper: #fffdf8;
  --ink: #2b2419;
  --muted: #6f624e;
  --line: #e3d5bb;
  --green: #2f5d3a;
  --green-dark: #244a2e;
  --green-soft: #dfe9dc;
  --wheat: #d98b2b;
  --wheat-soft: #f5e3c4;
  --wheat-ink: #8a5a14;
  --red: #9c3418;
  --red-soft: #f7d9d0;
  --blue: #35607f;
  --blue-soft: #dbe6ee;
  --shadow: 0 1px 0 var(--line);
  /* Filet tout autour : la limite d'une zone de fiche se voit sur ses quatre côtés. */
  --filet: 0 0 0 1px var(--line);
  --lift: 0 1px 0 var(--line), 0 10px 24px -16px rgba(43, 36, 25, .45);
  --gutter: 24px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  color-scheme: light;
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 93.75%; /* 15 px par défaut, et suit la taille choisie dans le navigateur */
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

/* ---- Base ---- */

* { box-sizing: border-box; }
/* App installée (viewport-fit=cover) : rien sous les bords arrondis ni l'encoche en paysage. */
body { margin: 0; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); background: var(--bg); }
h1, h2, h3, h4 { line-height: 1.15; }
h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 14px; }
h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; margin: 28px 0 10px; }
h3 { font-size: 1rem; font-weight: 650; margin: 20px 0 8px; }
p { margin: 0 0 12px; }
a { color: var(--green); text-decoration-color: var(--wheat); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
code, kbd, pre { font-family: var(--mono); font-size: .88em; }
pre code { font-size: inherit; }
time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.muted { color: var(--muted); }
.show-narrow { display: none; }

/* ---- En-tête global ---- */

.top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px var(--gutter); border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: flex; gap: 8px; align-items: center; flex: none; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; }
.brand-mark { width: 20px; height: 15px; border-radius: 3px; flex: none; background: repeating-linear-gradient(90deg, var(--wheat) 0 3px, transparent 3px 6px); }
.crumbs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--muted); font-size: .93rem; }
/* Séparateur décoratif : le texte alternatif vide le garde hors du nom lu par les lecteurs d'écran. */
.crumbs > * + *::before { content: "›" / ""; display: inline-block; margin-right: 6px; color: var(--muted); text-decoration: none; }
/* Un lien se reconnaît partout à son vert souligné de blé, fil d'Ariane compris. */
.crumbs a { color: var(--green); }
.crumbs > :last-child { color: var(--ink); }
.who { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: .93rem; }
/* Recherche dans tous les espaces : un champ, validé par Entrée (formulaire GET, sans script). */
.recherche-globale { margin: 0; flex: 0 1 220px; min-width: 140px; }
.recherche-globale input { width: 100%; padding: 5px 10px; font-size: .93rem; }
.who form { margin: 0; }
.who .lien-agents { font-weight: 600; }
.who > span { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menu du compte : un <details>, qui s'ouvre et se ferme sans script (les fiches n'en ont aucun). */
/* Le style commun des <details> (carte repliable des fiches : marge, fond, ombre) ne le concerne pas. */
.menu-compte { position: relative; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.menu-compte > summary {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 600;
  list-style: none; cursor: pointer;
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary > .hide-narrow { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-compte[open] > summary { margin-bottom: 0; box-shadow: inset 0 0 0 1.5px var(--green); }
.initiale {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: .87rem; font-weight: 700;
}
.menu-compte-panneau {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 240px; box-sizing: border-box; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(43, 36, 25, .14); font-size: .93rem;
}
.menu-compte-panneau a { padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.menu-compte-panneau a:hover { background: var(--field); }
.menu-compte-panneau hr { width: calc(100% - 12px); margin: 4px 6px; border: 0; border-top: 1px solid var(--line); }
.menu-intertitre { margin: 0; padding: 6px 12px 2px; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.menu-compte-panneau form { margin: 0; }
.menu-deconnexion, .menu-deconnexion:hover {
  width: 100%; justify-content: flex-start; padding: 8px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--red); font-weight: 500;
}
.menu-deconnexion:hover { background: var(--red-soft); }
/* Sélecteur d'organisation (web/context.py) : un <details> sans script, comme le menu du compte. */
.selecteur-sep { color: var(--line); font-size: 1.45rem; font-weight: 300; line-height: 1; }
.selecteur-org { position: relative; flex: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.selecteur-org > summary {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 10px;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 650;
  list-style: none; cursor: pointer;
}
.selecteur-org > summary::-webkit-details-marker { display: none; }
.selecteur-org > summary > .hide-narrow { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur-org[open] > summary { margin-bottom: 0; box-shadow: inset 0 0 0 1.5px var(--green); }
.pastille-org {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none;
  border-radius: 7px; font-size: .87rem; font-weight: 800;
}
.pastille-org.grande { width: 48px; height: 48px; border-radius: 12px; font-size: 1.45rem; }
.teinte-vert { background: var(--green-soft); color: var(--green); }
.teinte-ble { background: var(--wheat-soft); color: var(--wheat-ink); }
.teinte-bleu { background: var(--blue-soft); color: var(--blue); }
.teinte-neutre { background: var(--field); color: var(--muted); }
.selecteur-panneau {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 330px; max-width: calc(100vw - 2 * var(--gutter));
  box-sizing: border-box; padding: 8px; display: flex; flex-direction: column; gap: 2px; border-radius: 14px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(43, 36, 25, .14); font-size: .93rem;
}
.selecteur-panneau ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.selecteur-panneau li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.selecteur-panneau li a:hover { background: var(--field); }
.selecteur-panneau li a[aria-current] { background: var(--field); }
.selecteur-panneau li .pastille-org { width: 30px; height: 30px; }
.selecteur-texte { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.selecteur-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a[aria-current] .selecteur-nom { font-weight: 650; }
.selecteur-texte .muted { font-size: .83rem; }
.selecteur-panneau hr { width: calc(100% - 12px); margin: 6px; border: 0; border-top: 1px solid var(--line); }
.selecteur-panneau > a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
.selecteur-panneau > a:hover { background: var(--field); }
.selecteur-panneau > a.menu-gerer { color: var(--muted); }
.selecteur-recherche { margin: 2px 2px 6px; }
.selecteur-recherche input { width: 100%; padding: 7px 10px; font-size: .93rem; }
/* Page Espaces d'une organisation : en-tête, carte « Nouvel espace », ligne « Ailleurs ». */
.org-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 8px 0 18px; }
.org-id { display: flex; align-items: center; gap: 14px; }
.org-id p { margin: 0; font-size: .93rem; }
.org-id h1 { margin: 0; }
.carte-nouvel-espace {
  box-sizing: border-box; height: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--green);
  font-weight: 600; text-decoration: none; text-align: center; padding: 12px;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(227, 213, 187, .25) 10px 20px);
}
.carte-nouvel-espace:hover { background-color: var(--green-soft); }
.ailleurs { margin: 20px 0 0; font-size: .93rem; }
/* Onglet Configuration : une icône, nommée par aria-label ; marqué actif comme les autres onglets. */
.tabs a.onglet-icone { display: inline-flex; align-items: center; padding-inline: 12px; }

/* ---- Mise en page ---- */

main { max-width: 1200px; margin: 0 auto; padding: 20px var(--gutter) 56px; }

.space-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 32px; }
.space-id { min-width: 0; }
/* Retour aux espaces de l'organisation : le sélecteur, lui, sert à changer d'organisation. */
.space-back { display: inline-flex; align-items: center; gap: 6px; font-size: .93rem; font-weight: 600; }
/* Bandeau de l'en-tête d'espace : lien de retour, nom, avancement et onglets, sur papier. */
.space-band { --fond: var(--paper); background: var(--paper); border-bottom: 1px solid var(--line); }
.space-band-inner { max-width: 1200px; margin: 0 auto; padding: 20px var(--gutter) 0; }
.space-title { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
.space-name { margin: 0; min-width: 0; font-size: 2.2rem; }
/* Description de l'espace : une bulle sans script, ouverte par le bouton « i ». */
.space-info { position: relative; flex: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.space-info > summary {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  list-style: none; color: var(--muted); cursor: pointer;
}
.space-info > summary::-webkit-details-marker { display: none; }
.space-info > summary:hover, .space-info[open] > summary { background: var(--field); color: var(--ink); }
.space-info-bulle {
  position: absolute; left: -8px; top: calc(100% + 8px); z-index: 20; box-sizing: border-box;
  width: 340px; max-width: calc(100vw - 2 * var(--gutter)); padding: 12px 14px; border-radius: 12px;
  background: var(--ink); color: var(--paper); font-size: .93rem; line-height: 1.45; box-shadow: 0 10px 28px rgba(43, 36, 25, .18);
}
.space-info-bulle p { margin: 0; }
.space-info-bulle a { display: inline-block; margin-top: 6px; color: var(--wheat-soft); font-weight: 600; }
.space-progress { min-width: 200px; text-align: right; color: var(--muted); font-size: .93rem; }
.space-progress .bar { margin-top: 6px; }
.progress-count { font-variant-numeric: tabular-nums; }

.bar { height: 8px; border-radius: 999px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--line) 0 4px, var(--field) 4px 8px); }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--green); }

.space-action { flex: none; }
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 22px; border-bottom: 1px solid var(--line); }
.space-band .tabs-row { margin: 18px 0 0; border-bottom: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs a { padding: 6px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs a:hover { background: var(--field); color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--green); color: var(--bg); font-weight: 600; }
/* Onglets d'un espace et d'une organisation : soulignés d'un filet blé, comme dans les maquettes.
   La seconde barre de la Configuration (.sous-onglets) garde ses pastilles. */
.tabs:not(.sous-onglets) a { padding: 10px 14px; border-radius: 0; font-weight: 600; }
.tabs:not(.sous-onglets) a:hover { background: none; color: var(--ink); }
.tabs:not(.sous-onglets) a[aria-current="page"] { background: none; color: var(--ink); font-weight: 650; box-shadow: inset 0 -3px 0 var(--wheat); }
/* Seconde barre de l'onglet Configuration : même composant, une teinte plus discrète — elle
   navigue à l'intérieur d'un onglet, elle ne choisit pas l'onglet. */
.sous-onglets { margin: -12px 0 22px; font-size: .93rem; }
.sous-onglets a[aria-current="page"] { background: var(--field); color: var(--ink); }

/* ---- Actions ---- */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border: 1.5px solid var(--green); border-radius: 999px;
  background: var(--green); color: var(--bg); font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
button:hover, .btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--green); }
.btn-secondary:hover { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
button.link, button.link:hover {
  padding: 0; border: 0; border-radius: 0; background: none; color: var(--green); font-weight: inherit;
  text-decoration: underline; text-decoration-color: var(--wheat); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 18px 0; }
.actions form { margin: 0; }
.more { display: inline-block; margin-top: 14px; font-weight: 600; }
/* Barre d'actions d'une fiche (note, tâche, fichier, catégorie, statut, poste) : Modifier et
   Archiver en pictos, en haut, puis les actions propres à la fiche. Sans script. */
.barre-fiche {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; padding: 6px;
  border-radius: 14px; background: var(--paper); box-shadow: var(--filet);
}
.barre-fiche form { margin: 0; }
.barre-fiche > .archive { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; padding: 0 6px; }
.barre-fiche > .archive p { margin: 0; }
.barre-fiche .btn { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.separateur { width: 1px; height: 28px; margin: 0 6px; background: var(--line); }
/* Archiver une catégorie, un statut, un poste : le picto ouvre l'avertissement, le bouton archive. */
.barre-fiche details { flex-basis: 100%; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.barre-fiche details > summary { list-style: none; }
.barre-fiche details > summary::-webkit-details-marker { display: none; }
.barre-fiche details[open] > summary { margin-bottom: 0; background: var(--red-soft); }
.confirmer .archive { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 14px 8px 8px; border-top: 1px solid var(--line); }
.confirmer .archive p { margin: 0; }
/* Sur une fiche de configuration, la barre a la largeur du formulaire qu'elle surmonte, et ce
   formulaire prend le même filet qu'elle. */
.barre-fiche:has(> .confirmer), .barre-fiche:has(> .archive) { max-width: 640px; }
.barre-fiche ~ .card { box-shadow: var(--filet); }
.btn-icone, .btn-icone:hover {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--green);
}
.btn-icone:hover { background: var(--green-soft); color: var(--green); }
.btn-icone-danger, .btn-icone-danger:hover { color: var(--red); }
.btn-icone-danger:hover { background: var(--red-soft); }
.lier-tache { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 360px; padding-left: 12px; border-left: 1px solid var(--line); }
.lier-tache label { color: var(--muted); font-size: .93rem; }
.lier-tache .choix { position: relative; display: inline-flex; align-items: center; flex: 0 1 340px; min-width: 0; }
.lier-tache select {
  width: 100%; height: 40px; padding: 0 36px 0 12px; border: 1.5px solid var(--green); border-radius: 10px;
  -webkit-appearance: none; appearance: none; background: var(--paper); cursor: pointer;
}
.lier-tache .choix svg { position: absolute; right: 12px; color: var(--green); pointer-events: none; }
.lier-tache button { min-height: 44px; }

/* ---- Pastilles ---- */

.prio, .status, .tag, .count {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 1px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1.6; white-space: nowrap; letter-spacing: 0;
}
/* Libellés et noms de catégorie choisis par les utilisateurs (64 caractères) : ils passent à la ligne. */
.status, .tag { white-space: normal; overflow-wrap: anywhere; }
.prio-haute { background: var(--red-soft); color: var(--red); }
.prio-normale { background: var(--field); color: var(--muted); }
.prio-basse { background: var(--blue-soft); color: var(--blue); }
.status-open { background: var(--wheat-soft); color: var(--wheat-ink); }
.status-done { background: var(--green-soft); color: var(--green); }
/* Terminée sans avoir été faite : grise et barrée, pour ne pas se confondre avec un travail fait. */
.status-abandoned { background: var(--field); color: var(--muted); text-decoration: line-through; }
.tag { box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-weight: 500; }
/* Une déclaration d'auteur l'emporte sur le `[hidden] { display: none }` du navigateur :
   sans cette règle, tout ce qui porte `hidden` et une règle `display` resterait visible. */
[hidden] { display: none !important; }
/* Lien vers /agents/, les connexions des agents. */
.lien-agents { white-space: nowrap; }
.count { background: var(--bg); color: var(--muted); font-weight: 500; padding: 0 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-open { background: var(--wheat); }
.dot-done { background: var(--green); }
.dot-abandoned { background: var(--muted); }

/* ---- Cartes, listes, vide, messages ---- */

.card { display: block; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.card > :last-child { margin-bottom: 0; }
a.card { color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.card:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.card-title { font-weight: 650; font-size: 1.05rem; }
/* Le titre d'une carte qui mène quelque part est un lien comme les autres : vert, souligné. */
a.card-title { color: var(--green); }
li.card p { margin: 6px 0 0; }
.card .tag { margin-left: 4px; }

/* ---- Questions posées par les agents ---- */

.question { margin-bottom: 12px; }
fieldset.question, .question fieldset { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.question legend, .question-text { padding: 0; margin-bottom: 8px; font-weight: 650; overflow-wrap: anywhere; }
.question .options { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.question .options .help { margin: 2px 0 0 calc(1.05em + 8px); }
.question .options .chosen { font-weight: 650; color: var(--green); }
.question .recommande { background: var(--green-soft); color: var(--green); box-shadow: none; white-space: nowrap; }
.question .withdraw { display: inline; }
.question blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--wheat); }
.question .by { margin: 8px 0 0; font-size: .87rem; }
.tag.questions { background: var(--wheat-soft); color: var(--wheat-ink); box-shadow: none; }
/* Échéance passée d'une tâche ouverte (tasks/deadlines.py) : la teinte d'alerte, la date reste à côté. */
.tag.en-retard { background: var(--red-soft); color: var(--red); box-shadow: none; }
/* Échéance et responsable d'une carte du Tableau, groupés : ils passent à la ligne ensemble. */
.reperes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.reperes .tag { white-space: nowrap; }
/* Responsable d'une tâche (un poste ou une personne) : un repère neutre, marqué d'une arobase ; le
   bleu est déjà la priorité basse. */
.tag.responsable { color: var(--ink); font-weight: 600; }
.tag.responsable::before { content: "@" / ""; margin-right: 1px; color: var(--muted); }
.tag.responsable .muted { margin-left: 4px; font-weight: 500; }
/* Espace d'origine d'une note liée venue d'un autre espace de l'organisation. */
.badge-espace { display: inline-flex; padding: 0 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .8rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.questions-link { margin: 0 0 12px; font-weight: 650; }
/* Page Questions : une tâche par accordéon, une question par bande séparée d'un filet. Les
   accordéons imbriqués (précision, déjà répondues, modifier) n'ont pas l'habit de carte. */
details.question-group { margin: 0 0 12px; }
/* Un résumé en flex perd son triangle : le chevron le remplace, pour qu'on voie qu'il s'ouvre. */
.question-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; list-style: none; }
.question-group > summary::-webkit-details-marker { display: none; }
.question-group > summary::before { content: "▸"; color: var(--green); }
.question-group[open] > summary::before { content: "▾"; }
/* Le legend d'un fieldset se pose sur sa bordure : flottant, il reste sous le filet. */
fieldset.question > legend { float: left; width: 100%; }
fieldset.question > legend + * { clear: both; }
.question-group > summary .card-title { margin-right: auto; }
.question-group .question, #questions .question { padding-top: 12px; border-top: 1px solid var(--line); }
.question details, details.answered-group {
  margin-top: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.question details > summary, details.answered-group > summary { font-weight: 500; color: var(--green); }
.question details.precision textarea { margin-top: 6px; }
.question textarea { min-height: 4em; }
details.answered-group { margin-top: 12px; }
/* Lu par les lecteurs d'écran, invisible à l'œil. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.spaces, .notes, .categories, .member-list, .invitations { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.spaces { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 20px; }
.spaces .bar { margin-top: 12px; }
.shared { color: var(--muted); font-size: .87rem; }
.categories .archived { opacity: .65; }
.organizations { padding-left: 20px; }

.empty { margin: 0; padding: 12px 16px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); }
.notice { max-width: 720px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 500; }
.notice-error { background: var(--red-soft); color: var(--red); }
.error { margin: 6px 0 0; color: var(--red); font-size: .93rem; }
ul.errorlist { list-style: none; margin: 6px 0; padding: 0; color: var(--red); font-size: .93rem; }

/* ---- Formulaires ---- */

label { font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="url"], input[type="date"], select, textarea {
  max-width: 100%; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit;
}
textarea { width: 100%; min-height: 8em; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--green); }
input[type="checkbox"], input[type="radio"] { width: 1.05em; height: 1.05em; margin: 0; accent-color: var(--green); flex: none; }
.field { margin-bottom: 18px; }
.field > label { display: block; margin-bottom: 6px; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; }
.help, .helptext { display: block; margin: 5px 0 14px; color: var(--muted); font-size: .87rem; font-weight: 400; }
/* Choix multiples : Django les rend en <div> (ou <ul> selon le widget). */
.field ul, .field > div { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.field ul label, .field > div label, label.checkbox { display: flex; gap: 8px; align-items: center; font-weight: 400; }
form p { margin: 0 0 16px; }
form p > label { display: block; margin-bottom: 6px; }
form p > input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
.card.edit, .edit { max-width: 640px; }
form.edit { margin-top: 20px; }
.card.edit { padding: 22px 24px; }
.edit h1, .edit h2 { margin-top: 0; }
.archive { max-width: 640px; margin-top: 24px; }

.search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.search input { flex: 1; min-width: 200px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.filters a { padding: 5px 14px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.filters a:hover { background: var(--field); }
.audit-export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 20px; }
.audit-export input { font: inherit; }
.filters a[aria-current="true"] { background: var(--green-soft); color: var(--green); font-weight: 600; box-shadow: none; }

/* ---- Tableau ---- */

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.column { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--field); }
.column h2 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 4px; font-size: 1rem; }
.column h2 .count { margin-left: auto; }
.column .more { margin: 2px 4px; }
.task { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.members ul, ul.members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.members li { padding: 4px 12px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); }

/* ---- Fiches et contenu des agents ---- */

.sheet { max-width: 820px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 16px; font-size: .93rem; }
.prose { padding: 6px 22px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 22px 0 8px; font-weight: 650; letter-spacing: -.01em; }
.prose h1 { font-size: 1.4rem; }
.prose h2 { font-size: 1.2rem; }
.prose h3, .prose h4 { font-size: 1.05rem; }
.prose p, .prose ul, .prose ol, .prose pre, .prose table, .prose blockquote { margin: 12px 0; }
.prose li + li { margin-top: 3px; }
.prose code { padding: 1px 5px; border-radius: 5px; background: var(--field); }
.prose pre { padding: 12px 14px; border-radius: 10px; background: var(--field); overflow-x: auto; }
.prose pre code { padding: 0; background: none; }
.prose blockquote { padding: 2px 0 2px 14px; border-left: 3px solid var(--wheat); color: var(--muted); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.feed .prose { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.feed .prose > :first-child { margin-top: 0; }
.feed .prose > :last-child { margin-bottom: 0; }

.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; }
.links ul { padding-left: 20px; }
.links li + li { margin-top: 4px; }

/* Zones d'une fiche : chacune a sa carte, et 24 px la séparent de la suivante. Le contenu, les
   questions, le journal et les formulaires sont sur papier ; les liens vers ailleurs, sur le champ. */
.fiche > * { margin-top: 0; margin-bottom: 0; }
.fiche > * + * { margin-top: 24px; }
.fiche > h1 { margin-bottom: 10px; }
.fiche > h1 + .meta { margin-top: 0; }
.fiche > .prose, .fiche > details { box-shadow: var(--filet); }
.zone { padding: 18px 22px; border-radius: 14px; background: var(--paper); box-shadow: var(--filet); overflow-wrap: anywhere; }
.zone > h2:first-child { margin-top: 0; }
.zone > :last-child { margin-bottom: 0; }
.zone-liens { padding: 16px 20px; border-radius: 14px; background: var(--field); overflow-wrap: anywhere; }
.zone-liens h2 { margin: 0 0 10px; color: var(--muted); font-size: .8rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.zone-liens ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.zone-liens li + li { margin-top: 0; }
.links.zone-liens { gap: 16px 28px; }
.zone .feed { gap: 0; }
.zone .feed .event { padding: 12px 0; border-bottom: 1px solid var(--line); border-left: 0; }
.zone .feed .event:last-child { border-bottom: 0; }
.zone form.edit { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.fiche .edit { max-width: none; }
/* Confirmation d'un geste sur la fiche : la coche, le message, le lien à droite. */
.notice-picto { display: flex; gap: 10px; align-items: center; max-width: none; color: var(--green-dark); font-weight: 600; }
.notice-picto svg { flex: none; }
.notice-picto a { margin-left: auto; color: var(--green-dark); white-space: nowrap; }

table { border-collapse: collapse; }
th, td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .85rem; font-weight: 600; }
main > table { width: 100%; }
details { margin-top: 24px; padding: 12px 16px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); }
details > table { display: block; width: 100%; overflow-x: auto; font-size: .9rem; }
summary { cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: 10px; }

/* Journal d'une tâche, fil d'activité. */
.day { margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 1rem; font-weight: 600; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.event { display: grid; grid-template-columns: 4.5em 1fr; gap: 12px; align-items: baseline; }
.sheet .event { grid-template-columns: 10em 1fr; }
.event time { white-space: nowrap; }
.event time { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.event > div { min-width: 0; overflow-wrap: anywhere; }
.feed-cards { gap: 8px; }
.feed-cards .event { padding: 10px 14px; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
/* Pastille des tâches terminées par un agent depuis la dernière visite, et leurs lignes dans l'Activité. */
.tag.nouveautes { background: var(--green-soft); color: var(--green); box-shadow: none; }
/* Sur une carte d'espace, c'est un lien vers l'Activité : il en a l'air, pas celui d'une pastille. */
.spaces .lien-nouveautes { display: inline-block; margin: 6px 0 0; font-size: .93rem; font-weight: 600; }
.nouveautes-compte {
  display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  background: var(--green); color: var(--bg); font-size: .8rem; font-weight: 650; text-align: center;
}
.nouveautes-compte[hidden], .tag.nouveautes[hidden], .lien-nouveautes[hidden] { display: none; }
.feed-cards .event-new { box-shadow: inset 3px 0 0 var(--green), var(--shadow); }
.by { display: block; font-size: .85rem; }

/* ---- Authentification, consentement ---- */

main.auth { max-width: 440px; padding-top: 48px; }
main.auth-wide { max-width: 620px; }
main.auth::after {
  content: ""; display: block; height: 28px; margin-top: 48px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--field) 12px 16px);
}
.auth-card { padding: 28px; border-radius: 20px; background: var(--paper); box-shadow: var(--lift); }
.auth-card h1 { margin-top: 0; font-size: 1.6rem; }
.auth-card form > button { width: 100%; margin-top: 4px; }
.auth-links { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: .93rem; }
.qr svg { display: block; width: 220px; height: 220px; margin: 8px auto 16px; padding: 10px; border-radius: 12px; background: #fff; }
.secret { overflow-wrap: anywhere; }
.codes { padding: 14px 16px; border-radius: 12px; background: var(--field); font-size: 1.05rem; }

.consent fieldset { margin: 0 0 16px; padding: 0; border: 0; }
.consent legend { margin-bottom: 8px; padding: 0; font-weight: 600; }
.consent label { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-weight: 400; }
.consent-spaces { margin: 6px 0 0 26px; }
.consent-group { margin: 0 0 10px; }
.consent-space { margin-left: 22px; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions button { flex: 1; }

/* ---- Mon compte ---- */

.account-section { max-width: 720px; margin-bottom: 16px; }
.account-section h2 { margin-top: 0; }
.account-section ul { padding-left: 20px; }
.connections { display: block; overflow-x: auto; overflow-wrap: normal; }
.connections th, .connections td { vertical-align: middle; }
.connections form { margin: 0; }
.jeton-api { display: block; padding: 10px 12px; border-radius: 10px; background: var(--field); overflow-wrap: anywhere; user-select: all; }

/* Membres d'une organisation : l'ajout en bande en tête, puis un seul tableau (membres, invitations). */
.membres-organisation { padding: 0; overflow-x: auto; }
.bande-ajout { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; padding: 16px 20px; background: var(--field); border-bottom: 1px solid var(--line); }
.bande-ajout .field { flex: 1 1 220px; margin: 0; }
.bande-ajout > .error { flex-basis: 100%; margin: 0; }
.membres { width: 100%; overflow-wrap: normal; }
.membres th, .membres td { padding: 10px 12px; vertical-align: middle; }
.membres th:first-child, .membres td:first-child { padding-left: 20px; }
.membres td:last-child { padding-right: 20px; text-align: right; }
.membres tr.invitation { background: var(--bg); }
.membres form { margin: 0; }
.membres .actions { justify-content: flex-end; margin: 0; }
.membre-nom { font-weight: 600; }
.role-sur-place { display: flex; gap: 8px; align-items: center; }
.membres-organisation > .empty { margin: 12px 20px 16px; }
/* Fiche d'accès d'une personne : un groupe de boutons radio par espace, sans script. */
.acces { width: 100%; }
.acces th[scope="row"] { text-align: left; }
.acces th[scope="row"] .muted { display: block; font-weight: 400; font-size: 13px; }
.choix-role { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.choix-role label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer; }
.choix-role label:has(input:checked) { background: var(--green-soft); color: var(--green); font-weight: 600; }
.account-logout { margin-top: 24px; }

/* ---- Téléphone : chaque pixel au contenu ---- */

@media (max-width: 639px) {
  :root { font-size: 87.5%; --gutter: 12px; }
  /* Le bouton fixé en bas ne masque pas l'élément qui reçoit le focus clavier. */
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Sous 16 px, iOS Safari agrandit la page au focus d'un champ. */
  input, select, textarea { font-size: max(16px, 1rem); }
  /* Anneau de focus dessiné à l'intérieur : les rangées qui défilent ou tronquent le rogneraient. */
  .tabs a:focus-visible, .filters a:focus-visible, .crumbs a:focus-visible { outline-offset: -3px; }
  .hide-narrow { display: none !important; }
  .show-narrow { display: inline; }
  h1 { font-size: 1.4rem; margin: 4px 0 10px; }
  h2 { margin: 20px 0 8px; }

  /* Hauteur minimale, pas fixe : le champ de recherche et le menu du compte doivent y tenir. */
  .top { min-height: 38px; gap: 4px 10px; padding: max(4px, env(safe-area-inset-top)) var(--gutter) 4px; }
  .brand-name { display: none; }
  /* Les outils sur la première rangée, le fil d'Ariane sur la seconde : sur une seule, la recherche
     l'écrasait jusqu'à rien, et une fiche perdait son retour — l'app installée n'a pas de bouton
     « précédent ». Sur un onglet d'espace, le bandeau porte déjà le retour : pas de seconde rangée. */
  .recherche-globale { flex: 1 1 0; min-width: 0; }
  .crumbs { order: 1; flex-basis: 100%; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: .9rem; }
  .crumbs:empty, .top-espace .crumbs { display: none; }
  .crumbs > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .crumbs > :not(:nth-last-child(-n+2)) { display: none; }
  .crumbs > :nth-last-child(2):not(:first-child)::before { display: none; }
  .who { flex: none; }
  .who a { font-weight: 600; }
  /* Sous 640 px, le nom quitte le bouton : l'initiale reste, dans une cible de 44 px. */
  /* Bouton compact à l'œil, cible tactile de 44 px par un pseudo-élément qui déborde. */
  .menu-compte > summary { position: relative; padding: 4px 8px 4px 4px; }
  .menu-compte > summary::before { content: ""; position: absolute; inset: -6px -2px; }
  .menu-compte-panneau a { font-weight: 500; }
  /* Sous 640 px, seule la pastille de l'organisation reste dans l'en-tête. */
  .selecteur-org > summary { position: relative; padding: 4px 6px 4px 4px; }
  .selecteur-org > summary::before { content: ""; position: absolute; inset: -6px -2px; }
  .selecteur-sep { display: none; }
  .org-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  main { padding: 10px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
  main.has-action { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Nom et avancement sur une ligne ; la description, avec son lien « Modifier », sur le Tableau seulement. */
  .space-head { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .space-id { flex: 1; }
  .space-band-inner { padding-top: 10px; }
  .space-band .tabs-row { margin-top: 8px; }
  .space-title { margin-top: 0; }
  .space-info > summary { width: 44px; height: 44px; }
  .space-name { font-size: 1.36rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .space-progress { min-width: 0; flex: none; display: flex; align-items: center; gap: 6px; font-size: .8rem; }
  .space-progress .bar { width: 54px; height: 6px; margin: 0; }
  .tabs-row { margin: 8px 0 10px; }
  .tabs { flex-wrap: nowrap; gap: 2px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  /* Une ombre au bord qui cache encore des onglets, sans script : les deux caches suivent le contenu
     (local) et recouvrent l'ombre (scroll) quand on est au bout. */
  .tabs {
    background:
      linear-gradient(to right, var(--fond, var(--bg)) 30%, transparent) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--fond, var(--bg)) 30%, transparent) right / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(43, 36, 25, .16), transparent) left / 14px 100% no-repeat scroll,
      linear-gradient(to left, rgba(43, 36, 25, .16), transparent) right / 14px 100% no-repeat scroll;
  }
  .tabs a { padding: 4px 11px; font-size: .93rem; }
  .tabs:not(.sous-onglets) a { padding: 10px 11px; }
  .space-action {
    position: fixed; z-index: 10; left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--green); color: var(--bg); box-shadow: 0 10px 24px -10px rgba(43, 36, 25, .6);
  }
  .space-action:hover { background: var(--green-dark); color: var(--bg); }

  .card { padding: 10px 12px; border-radius: 12px; }
  a.card:hover { transform: none; }
  .card.edit { padding: 0; background: none; box-shadow: none; }
  .empty { padding: 8px 12px; }
  .notice { margin-bottom: 10px; padding: 8px 12px; }
  /* À la ligne plutôt qu'en défilement : un filtre coupé au bord ne se devinait pas. */
  .filters { margin-bottom: 12px; }
  .filters a { flex: none; padding: 4px 12px; }
  .spaces { grid-template-columns: 1fr; gap: 8px; }
  .search { flex-wrap: nowrap; margin-bottom: 10px; }
  .search input { min-width: 0; }
  .search button { padding: 8px 14px; }

  .board { grid-template-columns: 1fr; gap: 4px; }
  .column { gap: 5px; padding: 0; background: none; border-radius: 0; }
  .column h2 { margin: 10px 0 2px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
  .column h2 .count { margin-left: 0; padding: 0; background: none; }
  .task { flex-direction: row; align-items: baseline; gap: 9px; padding: 8px 10px; border-radius: 10px; }
  /* Priorité en signe plutôt qu'en mot : une forme par niveau, pas seulement une couleur. */
  .task .prio { flex: none; width: 1em; padding: 0; justify-content: center; background: none; font-size: .75rem; }
  .task .prio::before { content: "●" / ""; }
  .task .prio-haute::before { content: "▲" / ""; }
  .task .prio-basse::before { content: "▼" / ""; }
  .task .prio-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .task .card-title { font-size: 1rem; }
  /* Échéance et responsable passent sous le titre, alignés sur lui (après le signe de priorité). */
  .task { flex-wrap: wrap; }
  .task .reperes { flex-basis: 100%; padding-left: calc(1em + 9px); }

  .meta { margin-bottom: 10px; font-size: .8rem; gap: 4px 6px; }
  .prose { padding: 2px 12px; border-radius: 12px; }
  .actions { gap: 10px; margin: 10px 0; }
  /* Une action reste un bouton à toutes les largeurs : plus compact, mais une cible de 44 px. */
  .actions button, .actions .btn { min-height: 44px; padding: 8px 16px; }
  .lier-tache { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .lier-tache .choix { flex-basis: 100%; }
  .zone { padding: 12px 14px; }
  .zone-liens { padding: 12px 14px; }
  /* Journal d'une fiche : l'heure, longue, passe sous l'entrée ; dans l'activité, elle reste à gauche. */
  .sheet .event { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid var(--line); }
  .sheet .event time { order: 2; font-size: .75rem; }
  .feed-cards { gap: 6px; }
  .feed-cards .event { grid-template-columns: 3.4em 1fr; gap: 8px; padding: 7px 10px; }
  details { padding: 10px 12px; }

  main.auth { padding-top: 20px; }
  main.auth::after { margin-top: 28px; }
  .auth-card { padding: 0; background: none; box-shadow: none; }

  /* Mon compte : une connexion par bloc plutôt qu'un tableau qui déborde. */
  .connections thead { display: none; }
  .connections tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
  .connections td { padding: 0; border: 0; }
  .connections td:first-child { font-weight: 600; }
  .connections td:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .connections td[data-label]::before { content: attr(data-label) " : "; color: var(--muted); }

  /* Membres d'une organisation : une ligne par bloc, comme les connexions. */
  .bande-ajout { padding: 12px 14px; }
  .membres thead { display: none; }
  .membres tr { display: grid; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
  .membres th, .membres td, .membres th:first-child, .membres td:first-child, .membres td:last-child { padding: 0; border: 0; text-align: left; }
  .membres .actions { justify-content: flex-start; }
  .membres-organisation > .empty { margin: 10px 14px 14px; }
  .acces thead { display: none; }
  .acces tr { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
  .acces th, .acces td { padding: 0; border: 0; }
  .choix-role { display: flex; flex-direction: column; border-radius: 12px; }
}

/* Sommaire latéral d'une documentation longue (spec 2026-09-30) : deux colonnes, le sommaire collé
   au défilement. Sans script : la section courante est marquée par la page, pas par le défilement,
   donc aucun sous-titre ne l'est. Le chevron suit la section ouverte, il est décoratif. */
.doc-sommaire { display: grid; grid-template-columns: 248px minmax(0, 820px); gap: 32px; align-items: start; }
.sommaire { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; font-size: .93rem; }
.sommaire-titre { margin: 4px 0 14px; font-size: 16px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.sommaire-intertitre { margin: 0 0 6px; padding: 0 10px; color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.sommaire-liste, .sommaire-liste ul { list-style: none; margin: 0; padding: 0; }
.sommaire-liste a { display: flex; gap: 6px; align-items: baseline; padding: 5px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.sommaire-liste a:hover { background: var(--field); }
.sommaire-liste a[aria-current="page"] { background: var(--field); font-weight: 650; }
.sommaire-liste .chevron { flex: none; width: 1ch; color: var(--muted); }
.sommaire-liste .sous-titres { margin: 2px 0 6px 18px; box-shadow: inset 1.5px 0 0 var(--line); }
.sommaire-liste .sous-titres a { padding: 3px 10px 3px 12px; color: var(--muted); font-size: .88rem; }
.sommaire-replie { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 639px) {
  /* Deux colonnes ne tiennent pas : le sommaire passe au-dessus du texte, replié. */
  .doc-sommaire { display: block; }
  .sommaire { display: none; }
  .sommaire-replie { display: block; margin: 0 0 14px; }
  .sommaire-replie > summary { font-weight: 650; }
  .sommaire-replie .sommaire-liste { margin-top: 8px; }
}

/* ---- Choix des notes liées d'une tâche (_linked_notes_field.html, notes-liees.js) ---- */

.notes-liees { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.notes-liees legend { padding: 0; margin-bottom: 6px; font-weight: 650; }
.notes-liees legend .count { box-shadow: inset 0 0 0 1px var(--line); }
.pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles:empty { display: none; }
/* Une pastille est une case cochée : la décocher retire le lien à l'enregistrement, sans script. */
.pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: .9rem; font-weight: 600; cursor: pointer; }
.pastille input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pastille:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.pastille .badge-espace { background: var(--paper); }
.pastille .retirer { font-size: 1.1rem; line-height: 1; }
.pastille:has(input:not(:checked)) { background: var(--field); color: var(--muted); text-decoration: line-through; }
.pastille:has(input:not(:checked)) .retirer { display: none; }
.recherche-notes { display: flex; gap: 8px; }
.recherche-notes input { flex: 1; min-width: 0; }
.resultats-notes { max-height: 196px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.resultat { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--field); font-weight: 500; cursor: pointer; }
.resultat-titre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.resultat .muted { font-size: .8rem; }
@media (max-width: 639px) {
  .resultat { flex-wrap: wrap; row-gap: 4px; }
  .resultat-titre { flex-basis: calc(100% - 30px); }
  .resultat .badge-espace { margin-left: 26px; }
  .resultat .badge-espace + .muted { margin-left: 0; }
  .resultat .resultat-titre + .muted { margin-left: 26px; }
}
mark { background: var(--wheat-soft); color: inherit; border-radius: 3px; }

/* ---- Statuts d'un espace : liste ordonnée, glisser-déposer (web/static/web/statuts.js) ---- */

.statuts-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.statuts-entete .btn { margin-left: auto; }
.statuts-entete p { margin: 0; font-size: .93rem; }
.statuts-entete .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.statuts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; max-width: 820px; }
.statut { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); }
.statuts.glisser .statut { padding-left: 8px; }
.statut-corps { flex-grow: 1; min-width: 0; }
.statut-corps p { margin: 2px 0 0; font-size: .93rem; }
.statut-titre { display: inline-flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 650; }
.statut .tag.nouvelles { flex: none; background: var(--field); box-shadow: none; }
.poignee { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: grab; }
.poignee:hover, .poignee:focus-visible { background: var(--field); color: var(--ink); }
.poignee[hidden] { display: none; }
.deplacer { display: flex; gap: 6px; flex: none; margin: 0; }
.deplacer button { padding: 4px 12px; font-size: .87rem; }
/* Avec le script et une souris, la poignée remplace Monter / Descendre ; au doigt, où le
   glisser-déposer natif n'est pas fiable, les boutons restent. */
@media (pointer: fine) { .statuts.glisser .deplacer { display: none; } }
@media (pointer: coarse) {
  .statuts.glisser .poignee, #aide-glisser { display: none; }
  .statuts.glisser .statut { padding-left: 18px; }
}
.statut.souleve { box-shadow: 0 0 0 2px var(--green), 0 14px 30px rgba(43, 36, 25, .18); opacity: .96; }
.marqueur { height: 0; margin: -3px 0; border-top: 3px solid var(--green); border-radius: 3px; position: relative; list-style: none; }
.marqueur::before { content: ""; position: absolute; left: -6px; top: -7px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.statuts-etat { min-height: 1.4em; margin: 0 0 20px; font-size: .87rem; }
.statuts-archives { margin: 0 0 10px; font-size: 1rem; font-weight: 650; color: var(--muted); }
.statuts.archives { margin-bottom: 28px; }
.statuts.archives .statut { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.statuts.archives .statut-titre { color: var(--muted); font-size: 1.05rem; }
/* Nouveau statut : le formulaire, et à droite les colonnes du Tableau telles qu'elles seront. */
.statut-nouveau { display: grid; grid-template-columns: minmax(0, 640px) 340px; gap: 28px; align-items: start; }
.statut-nouveau .help strong { color: var(--ink); font-weight: 650; }
.choix-cartes { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.choix-cartes legend { padding: 0; margin-bottom: 6px; font-weight: 650; }
.choix-carte { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 400; cursor: pointer; }
.choix-carte input { margin-top: 3px; }
.choix-carte:has(input:checked) { background: var(--green-soft); box-shadow: inset 0 0 0 2px var(--green); }
.choix-carte:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.choix-titre { display: block; font-weight: 650; }
.choix-carte .muted { display: block; font-size: .87rem; }
.apercu-tableau { padding: 20px 22px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); }
.apercu-tableau h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 650; }
.apercu-tableau p { margin: 0; font-size: .87rem; }
.apercu-tableau ol { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.apercu-tableau li { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--field); font-size: .93rem; font-weight: 650; overflow-wrap: anywhere; }
.apercu-tableau li.nouveau { background: var(--wheat-soft); box-shadow: inset 0 0 0 1.5px var(--wheat); }
.apercu-tableau li .tag { margin-left: auto; padding: 0; box-shadow: none; color: var(--wheat-ink); font-size: .8rem; font-weight: 600; }
@media (max-width: 639px) {
  .statuts-entete { flex-direction: column; align-items: stretch; }
  .statut-nouveau { grid-template-columns: 1fr; gap: 18px; }
  .statut { flex-wrap: wrap; padding: 10px 12px; }
  .deplacer { width: 100%; justify-content: flex-end; }
}

/* Aperçu d'une image déposée dans un espace (fichiers). */
.apercu { max-width: 100%; max-height: 480px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---- Facturation : l'offre et son montant, les organisations couvertes, l'entreprise ---- */

.facturation-tete p { margin: -6px 0 22px; max-width: 72ch; }
.facturation-grille { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.facturation-grille .card, .facturation-entreprise, .facturation-formulaire, .retour-gratuit { padding: 20px 22px; }
.facturation-grille h2, .facturation-entreprise h2 { margin: 0 0 12px; }
.offre { border-top: 4px solid var(--wheat); }
.offre-payante { border-top-color: var(--green); }
.offre-retard { border-top-color: var(--red); }
.offre-etiquette { margin: 0 0 10px; }
.offre-montant { margin: 0; font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.offre-montant small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.offre-calcul { margin: 6px 0 14px; font-weight: 600; }
.offre .actions { margin: 16px 0 0; }
.offre-note { margin: 10px 0 0; color: var(--muted); font-size: .87rem; }
.offre-resiliation { padding: 10px 12px; border-radius: 10px; background: var(--wheat-soft); color: var(--wheat-ink); }
.offre-avantages { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.offre-avantages p { display: flex; gap: 8px; align-items: center; margin: 0; }
.offre-avantages svg { flex: none; color: var(--green); }
.offre-intertitre { margin: 0 0 6px; color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.btn-danger-plein, .btn-danger-plein:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.facturation-orgs { width: 100%; }
.facturation-orgs td { padding-top: 10px; padding-bottom: 10px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.facturation-org { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 650; text-decoration: none; }
.facturation-org .pastille-org { width: 28px; height: 28px; }
.depasse { color: var(--red); font-weight: 650; }
.jauge-ligne { display: inline-flex; align-items: center; gap: 10px; }
.jauge { display: block; width: 64px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--field); }
.jauge span { display: block; height: 100%; background: var(--wheat); }
.facturation-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.facturation-total strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.facturation-limite { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wheat-soft); color: var(--wheat-ink); font-size: .93rem; }
.facturation-grille .muted { margin: 10px 0 0; font-size: .93rem; }
.facturation-entreprise-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.facturation-entreprise-tete h2 { margin: 0; }
.facturation-entreprise-tete .muted { font-size: .87rem; }
.facturation-entreprise > .muted { margin: 6px 0 16px; max-width: 72ch; }
.transmises { display: inline-flex; gap: 6px; align-items: center; color: var(--green); font-size: .87rem; font-weight: 600; }
.facturation-resume { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 18px; max-width: 760px; margin: 0 0 18px; }
.facturation-resume dt { color: var(--muted); }
.facturation-resume dd { margin: 0; }
.facturation-resume.vide dd { color: var(--muted); font-style: italic; }
.facturation-paddle { display: flex; gap: 8px; align-items: center; margin: 18px 0 0; color: var(--muted); font-size: .87rem; }
.retour { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .93rem; font-weight: 600; text-decoration: none; }
.facturation-formulaire { max-width: 800px; box-sizing: border-box; }
.facturation-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.facturation-champs .champ-large { grid-column: 1 / -1; }
.facturation-champs .help { margin-bottom: 0; }
.facultatif { color: var(--muted); font-weight: 400; }
.facturation-boutons { display: flex; gap: 12px; align-items: center; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.retour-gratuit { max-width: 720px; margin-top: 18px; border-top: 4px solid var(--wheat); }
.retour-gratuit h1 { margin: 0 0 8px; font-size: 1.75rem; }
.retour-comparaison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.retour-comparaison > div { padding: 14px 16px; border-radius: 12px; background: var(--bg); }
.retour-comparaison p:last-child { margin: 0; font-weight: 600; }
.retour-comparaison .ensuite { background: var(--wheat-soft); }
.retour-comparaison .ensuite .offre-intertitre { color: var(--wheat-ink); }
.retour-consequences { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.retour-consequences li { display: flex; gap: 10px; align-items: flex-start; }
.retour-consequences svg { flex: none; margin-top: 2px; color: var(--muted); }
.retour-consequences svg.garde { color: var(--green); }
.retour-consequences svg.limite { color: var(--wheat-ink); }
.menu-facturation { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 639px) {
  .facturation-grille, .facturation-champs, .retour-comparaison { grid-template-columns: 1fr; }
  .facturation-grille .card, .facturation-entreprise, .facturation-formulaire, .retour-gratuit { padding: 18px; }
  /* La carte de l'offre et la confirmation : des boutons pleine largeur. */
  .offre .actions .btn, .retour-gratuit .actions .btn {
    width: 100%; min-height: 44px; box-sizing: border-box; padding: 9px 18px; border: 1.5px solid var(--green);
    border-radius: 999px; background: transparent; color: var(--green); text-decoration: none;
  }
  .offre .actions .btn:first-child:not(.btn-secondary), .retour-gratuit .actions .btn:first-child { background: var(--green); color: var(--paper); }
  .offre .actions .btn.btn-danger-plein:first-child { border-color: var(--red); background: var(--red); color: var(--paper); }
  .facturation-entreprise-tete { flex-wrap: wrap; gap: 4px 24px; }
  .retour-gratuit .actions .btn-danger { border-color: var(--red); color: var(--red); }
  .facturation-orgs thead { display: none; }
  .facturation-orgs tr { display: grid; grid-template-columns: max-content 1fr auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
  .facturation-orgs td { padding: 0; border: 0; }
  .facturation-orgs td:nth-child(1) { grid-column: 1 / 3; }
  .facturation-orgs td:nth-child(2), .facturation-orgs td:nth-child(3) { grid-row: 2; color: var(--muted); font-size: .87rem; }
  .facturation-orgs td:nth-child(2) { grid-column: 1; padding-left: 38px; }
  .facturation-orgs td:nth-child(3) { grid-column: 2; }
  .facturation-orgs td:nth-child(4) { grid-column: 3; grid-row: 1; align-self: center; }
  .facturation-orgs td[data-label]::before { content: attr(data-label) " : "; }
  .facturation-resume { grid-template-columns: 1fr; gap: 0; }
  .facturation-resume dt { margin-top: 8px; font-size: .87rem; }
}

/* ---- Chronologie d'un espace (spec 2026-10-06-chronologie §5) ----
   La couleur d'un type est une teinte d'une palette fermée (ChronologyColor), jamais son libellé. */

.chrono-type { background: var(--field); color: var(--muted); }
.chrono-vert { background: var(--green-soft); color: var(--green); }
.chrono-ble { background: var(--wheat-soft); color: var(--wheat-ink); }
.chrono-bleu { background: var(--blue-soft); color: var(--blue); }
.chrono-rouge { background: var(--red-soft); color: var(--red); }
.chrono-terre { background: var(--field); color: var(--wheat-ink); }
.chrono-gris { background: var(--field); color: var(--muted); }
.dot.chrono-vert { background: var(--green); }
.dot.chrono-ble { background: var(--wheat); }
.dot.chrono-bleu { background: var(--blue); }
.dot.chrono-rouge { background: var(--red); }
.dot.chrono-terre { background: var(--wheat-ink); }
.dot.chrono-gris { background: var(--muted); }
.chrono-fraicheur { margin-top: 0; }
.chrono-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.chrono-filtres a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.chrono-filtres a[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.chrono { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.chrono-reperes { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
.chrono-reperes h2 { margin: 0 0 8px; font-size: 1rem; }
.chrono-reperes-replies { display: none; margin-bottom: 12px; }
.chrono-reperes-replies summary { cursor: pointer; font-weight: 600; }
.chrono-semaines, .chrono-entrees { list-style: none; margin: 0; padding: 0; }
.chrono-semaines { grid-column: 1; grid-row: 1; }
.chrono-semaine { margin-bottom: 28px; }
.chrono-semaine > h2 { margin: 0 0 6px; font-size: 1.05rem; }
.chrono-resume { color: var(--muted); margin-bottom: 12px; }
.chrono-entrees { display: grid; gap: 10px; border-left: 2px solid var(--line); padding-left: 14px; }
.chrono-entree h3 { margin: 4px 0; font-size: 1rem; }
.chrono-tete { margin: 0; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .87rem; }
.chrono-chiffres { margin: 6px 0 0; font-weight: 600; font-size: .9rem; }
.chrono-sources { margin: 6px 0 0; font-size: .85rem; }
.chrono-type-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 8px; }

@media (max-width: 639px) {
  .chrono { grid-template-columns: 1fr; gap: 12px; }
  .chrono-reperes { display: none; }
  .chrono-reperes-replies { display: block; }
}

/* ---- Onglet Agents d'une organisation (spec 2026-10-16-onglet-agents) ---- */

.agents-intro { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.agents-intro > div:first-child { flex: 999 1 420px; min-width: 0; }
.agents-intro > .card { flex: 1 1 300px; }
.agents-titre { margin-top: 4px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.agents-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.agents-grille .card p { margin-bottom: 0; }
.agents-deux { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 18px; }
.agents-deux > * { flex: 1 1 420px; min-width: 0; }
.agents-deux ul.card { margin: 0; padding-left: 34px; }
.etapes { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; padding-left: 22px; }
.etapes pre, .card pre { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--field); white-space: pre-wrap; overflow-wrap: anywhere; }
.skills { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 14px 0; }
.skills dt { font-weight: 600; }
.skills dd { margin: 0; color: var(--muted); }
.adresses { margin: 8px 0 0; padding-left: 18px; }
.exemples { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.exemples li { padding: 8px 14px; border-radius: 12px 12px 12px 4px; background: var(--green-soft); color: var(--green-dark); }

@media (max-width: 639px) {
  .skills { grid-template-columns: 1fr; gap: 2px; }
  .skills dd { margin-bottom: 8px; }
}

/* ---- Téléphone : navigation en bas, panneaux (spec 2026-10-25-interface-mobile) ----
   Toutes les pages portent les deux navigations ; la largeur décide laquelle se voit. Sans script :
   la barre du bas est faite de liens, un panneau est un <details>. */

.seulement-telephone, .retour-mobile, .barre-bas, .barre-action, .statuts-mobile { display: none; }
.barre-bas-compte {
  display: inline-block; min-width: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 9px;
  background: var(--wheat); color: #fff; font-size: .75rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* Un panneau : ailleurs que sur un téléphone, un <details> qui s'ouvre sur place. Il n'a pas l'habit
   de carte des blocs repliables des fiches. */
details.panneau { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.panneau > summary { list-style: none; }
.panneau > summary::-webkit-details-marker { display: none; }
.panneau-contenu { margin-top: 12px; }
.panneau-titre { margin: 0 0 4px; font-weight: 700; }

.question-a-traiter { margin-bottom: 10px; box-shadow: inset 4px 0 0 var(--wheat), var(--shadow); }
.question-a-traiter .question-text { margin: 2px 0; font-weight: 650; }
.a-traiter-contexte { margin: 0; font-size: .9rem; }
.creer { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.creer h2 { margin: 0 0 10px; }
.creer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-statut { display: flex; flex-direction: column; gap: 8px; }
.panneau-contenu .options { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; padding: 0; list-style: none; }
.choix-statut button { width: 100%; min-height: 48px; }

@media (max-width: 639px) {
  .seulement-telephone { display: revert; }
  /* La barre du bas porte Chercher ; Mes connexions passe dans le menu du compte. */
  .lien-agents, .recherche-globale { display: none; }
  main, main.has-action { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Un onglet d'espace : le bandeau suffit (retour, nom, recherche), ses onglets passent en bas. */
  .mode-espace .top { display: none; }
  .mode-espace .space-band { padding-top: env(safe-area-inset-top); }
  .mode-espace .space-band .tabs { display: none; }
  .mode-espace .space-band .tabs-row { margin: 0; }
  .space-chercher { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; color: var(--ink); }
  /* « + Nouvelle tâche » devient un bouton rond au-dessus de la barre ; son texte reste son nom. */
  .space-action {
    left: auto; right: var(--gutter); bottom: calc(76px + env(safe-area-inset-bottom));
    width: 56px; height: 56px; padding: 0; border-radius: 18px; font-size: 0;
  }
  .space-action::before { content: "+" / ""; font-size: 30px; font-weight: 500; line-height: 1; }

  /* Une fiche : un retour en haut, ses gestes courants en bas, ni en-tête ni barre de navigation. */
  .mode-fiche .top, .mode-fiche .barre-bas { display: none; }
  .mode-fiche .retour-mobile {
    position: sticky; top: 0; z-index: 15; display: flex; align-items: center;
    padding: max(4px, env(safe-area-inset-top)) 6px 4px; border-bottom: 1px solid var(--line); background: var(--paper);
  }
  .retour-mobile a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; color: var(--ink); font-weight: 650; text-decoration: none; }

  .barre-bas, .barre-action {
    position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex;
    border-top: 1px solid var(--line); background: var(--paper);
  }
  .barre-bas { padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .barre-bas > a, .barre-bas > details { flex: 1; }
  .barre-bas > a, .barre-bas > details > summary {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding-top: 4px;
    color: var(--muted); font-size: .75rem; font-weight: 650; text-decoration: none; cursor: pointer;
  }
  .barre-bas [aria-current] { color: var(--green); }
  .barre-bas-icone { position: relative; display: inline-flex; }
  .barre-bas-compte { position: absolute; top: -4px; right: -12px; }
  .barre-bas-initiale { width: 24px; height: 24px; font-size: .8rem; }
  .barre-bas-plus .panneau-contenu a {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border-radius: 12px;
    color: var(--ink); font-size: 1rem; font-weight: 600; text-decoration: none;
  }
  .barre-action { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .barre-action > .btn, .barre-action > details { flex: 1; }
  .barre-action > .btn, .barre-action > details > summary { width: 100%; min-height: 48px; }

  /* Un panneau qui monte du bas. Ouvert, son résumé devient le voile de la page : le toucher le
     referme, sans script. */
  .panneau[open] > summary {
    position: fixed; inset: 0; z-index: 30; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: rgba(43, 36, 25, .42); color: transparent; font-size: 0;
  }
  .panneau[open] > summary > * { visibility: hidden; }
  .panneau[open] > .panneau-contenu {
    position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px;
    max-height: 80vh; overflow-y: auto; margin: 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; background: var(--paper); box-shadow: 0 -10px 30px rgba(43, 36, 25, .2);
    color: var(--ink); font-size: 1rem; text-align: left; white-space: normal;
  }
  .panneau-contenu::before { content: ""; align-self: center; width: 36px; height: 4px; margin-bottom: 8px; border-radius: 2px; background: var(--line); }

  /* Le Tableau, un statut à la fois. */
  .statuts-mobile { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
  .statuts-mobile a {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 44px; padding: 2px 10px; border-radius: 12px; background: var(--field); color: var(--ink);
    font-size: .8rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  }
  .statuts-mobile a[aria-current] { background: var(--green); color: var(--bg); }
  .statuts-mobile-nombre { font-size: 1.05rem; font-weight: 800; }
  .board .column:not(.colonne-choisie), .board .column h2 { display: none; }
}

/* ---- Téléphone : les écrans des maquettes (page « App mobile (PWA) » du canevas) ----
   En-têtes d'app, d'espace et de fiche ; cartes ; panneaux ; formulaire d'une tâche. */

.entete-app, .entete-espace, .bouton-rond { display: none; }
.question-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.question-pied .by { margin: 0; }
.choix-contenu > span:last-child, .ligne-texte { display: flex; flex-direction: column; }

@media (max-width: 639px) {
  .seulement-bureau { display: none !important; }
  .sr-only-telephone { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* En-tête d'app : l'organisation (son choix en panneau), un grand titre ; le compte est dans la barre du bas. */
  .mode-app .top, .mode-app .titre-page, .mode-app .org-head, .mode-app .org-head + .tabs-row { display: none; }
  .mode-app .entete-app { display: flex; align-items: center; gap: 10px; padding: max(14px, env(safe-area-inset-top)) 16px 6px; }
  .entete-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .entete-surtitre { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .9rem; font-weight: 600; list-style: none; cursor: pointer; }
  .entete-surtitre::-webkit-details-marker { display: none; }
  .entete-app .entete-titre { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
  .mode-app main { padding-top: 4px; }
  .panneau-organisations ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .panneau-organisations ul a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
  .panneau-organisations ul a[aria-current] { background: var(--green-soft); }
  .panneau-organisations .pastille-org { width: 34px; height: 34px; border-radius: 9px; }
  .panneau-organisations .selecteur-texte { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
  .panneau-organisations .selecteur-nom { font-weight: 650; }
  .panneau-organisations hr { margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
  .panneau-organisations .menu-gerer {
    display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px var(--green); color: var(--green); font-weight: 650; text-decoration: none;
  }

  /* En-tête d'espace : retour, l'organisation ou l'espace en petit, le nom de la vue, la loupe. */
  .mode-espace .space-band, .mode-fiche .space-band, .space-action { display: none; }
  .mode-espace .entete-espace {
    display: flex; align-items: center; gap: 2px; padding: max(8px, env(safe-area-inset-top)) 6px 8px;
    border-bottom: 1px solid var(--line); background: var(--paper);
  }
  .entete-retour, .entete-bouton {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
    color: var(--ink); text-decoration: none; list-style: none; cursor: pointer;
  }
  .entete-bouton::-webkit-details-marker { display: none; }
  .entete-bouton-vert { color: var(--green); }
  .entete-espace .entete-surtitre { font-size: .85rem; font-weight: 500; }
  .entete-espace .entete-titre { font-size: 1.36rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bouton-rond {
    position: fixed; z-index: 19; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); display: inline-flex;
    align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px;
    background: var(--green); color: var(--paper); box-shadow: 0 10px 24px -8px rgba(43, 36, 25, .6);
  }
  .btn-filtrer {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-right: 4px; padding: 0 12px; border-radius: 999px;
    background: var(--field); color: var(--ink); font-size: .93rem; font-weight: 600; list-style: none; cursor: pointer;
  }
  .btn-filtrer::-webkit-details-marker { display: none; }
  .audit-export-mobile { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .bandeau-nouveautes { margin: 2px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 600; }

  /* En-tête de fiche : retour, Modifier et « ⋯ » ; la carte de pictos et le journal à écrire quittent la page. */
  .retour-actions { display: flex; align-items: center; margin-left: auto; }
  .mode-fiche .barre-fiche, .mode-fiche #journal-saisie { display: none; }
  .mode-fiche .fiche > .prose { padding: 0; background: none; box-shadow: none; }

  /* Listes en cartes. */
  .carte-espace { padding: 14px; border-radius: 14px; }
  /* Les espaces qui attendent une réponse passent en tête, sur le téléphone seulement : le bureau
     garde son ordre (spec 2026-10-27-pwa-espace-d-abord). */
  .spaces > .carte-en-attente { order: -1; }
  .bandeau-questions { margin: 0 0 12px; }
  .bandeau-questions a {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px; border-radius: 12px;
    background: var(--wheat-soft); color: var(--wheat-ink); font-weight: 650; text-decoration: none;
  }
  .bandeau-questions-action { margin-left: auto; white-space: nowrap; }
  .carte-espace-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .carte-espace .card-title, .notes .card-title, .resultats .card-title { color: var(--ink); text-decoration: none; }
  .carte-espace .card-title { font-size: 1.2rem; font-weight: 700; }
  .carte-espace-avancement { display: flex; align-items: center; gap: 8px; }
  .carte-espace-avancement .bar { flex: 1; margin: 0; }
  .carte-espace-avancement p { margin: 0; }
  .carte-nouvel-espace { min-height: 48px; padding: 0; border-radius: 14px; background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--green); font-weight: 650; }
  .notes .card { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: 12px 14px; border-radius: 14px; }
  .notes .card .card-title { flex: 1; font-weight: 650; }
  .notes .card > p { flex-basis: 100%; margin: 2px 0 0; }
  .resultats .card .tag, .resultats .card > span.muted { order: -1; padding: 0; background: none; box-shadow: none; color: var(--muted); font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
  .resultats .card .tag::after { content: " ·"; }
  .resultats .card .card-title { flex-basis: 100%; }
  .task { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 14px; }
  .task .prio { display: none; }
  .task .prio-haute { display: inline-flex; width: auto; padding: 0 9px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-size: .8rem; }
  .task .prio-haute::before { content: none; }
  .task .prio-haute .prio-text { position: static; width: auto; height: auto; clip-path: none; }
  .task .reperes { padding-left: 0; }

  /* Recherche : un grand champ ; la touche Entrée cherche. */
  .search { margin-bottom: 10px; }
  .search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .search button { display: none; }
  .search input {
    flex: 1; min-height: 48px; padding-left: 40px; border-radius: 14px;
    background: var(--paper) url("icones/loupe.7d3a80250054.svg") no-repeat 12px center / 20px;
  }

  /* Segments (Questions). */
  .segments { display: flex; gap: 6px; margin-bottom: 10px; }
  .segments a {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px;
    background: var(--field); color: var(--ink); font-weight: 600; text-decoration: none;
  }
  .segments a[aria-current] { background: var(--green); color: var(--bg); }
  .reponse-resumee { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--green-soft); color: var(--green); }

  /* Répondre : les options en cartes, la précision ouverte, le bouton sur toute la largeur. */
  .question-titre { margin: 4px 0 10px; font-size: 1.35rem; font-weight: 750; line-height: 1.25; }
  .panneau-reponse .options { gap: 8px; }
  .panneau-reponse .options .checkbox {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 650;
  }
  .panneau-reponse .options .checkbox:has(input:checked) { box-shadow: inset 0 0 0 2px var(--green); }
  .panneau-reponse .options .help { margin: -4px 0 4px 46px; }
  .panneau-reponse details.precision { margin: 0; padding: 0; background: none; box-shadow: none; }
  .panneau-reponse details.precision textarea { width: 100%; }
  .panneau-reponse .actions button { width: 100%; min-height: 48px; }

  /* Compte : un menu. */
  .compte-identite { display: flex; align-items: center; gap: 12px; margin: 4px 4px 14px; }
  .compte-identite > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
  .compte-identite strong { font-size: 1.25rem; }
  .initiale-grande { width: 52px; height: 52px; font-size: 1.5rem; }
  .liste-menu { display: flex; flex-direction: column; margin-bottom: 14px; overflow: hidden; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
  .liste-menu > details { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .ligne-menu, .ligne-menu:hover {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink);
    font: inherit; font-weight: 500; text-align: left; text-decoration: none; list-style: none; cursor: pointer; white-space: normal;
  }
  .ligne-menu::-webkit-details-marker { display: none; }
  .ligne-menu svg { flex: none; color: var(--muted); }
  .liste-menu > :last-child, .liste-menu > :last-child > .ligne-menu { border-bottom: 0; }
  .ligne-texte { flex: 1; }
  .ligne-texte .muted { font-size: .85rem; }
  .ligne-danger, .ligne-danger:hover { border-bottom: 0; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); color: var(--red); font-weight: 650; }
  .compte-suppression { margin-top: 14px; text-align: center; }
  .lien-danger { color: var(--red); }

  /* Panneaux en listes (Plus, « ⋯ », Sécurité) et Créer. */
  .panneau-liste a {
    display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 10px; border-radius: 12px;
    color: var(--ink); font-size: 1rem; font-weight: 600; text-decoration: none;
  }
  .panneau-liste hr { margin: 6px 10px; border: 0; border-top: 1px solid var(--line); }
  .panneau-liste form { margin: 4px 0; }
  .panneau-liste form button { width: 100%; min-height: 48px; }
  .panneau-sous-titre { margin: 0 0 8px; }
  .ligne-icone { flex: none; color: var(--muted); }
  .ligne-icone-ble { color: var(--wheat-ink); }
  .choix-creation { display: flex; flex-direction: column; gap: 8px; }
  .choix-creation select { min-height: 48px; margin-bottom: 6px; }
  .choix-contenu, .choix-contenu:hover {
    display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; padding: 14px; border: 0;
    border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink);
    font: inherit; font-weight: 400; text-align: left; white-space: normal;
  }
  .choix-contenu strong { font-weight: 650; }
  .choix-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; }
  .choix-icone-vert { background: var(--green-soft); color: var(--green); }
  .choix-icone-ble { background: var(--wheat-soft); color: var(--wheat-ink); }
  .choix-icone-bleu { background: var(--blue-soft); color: var(--blue); }
  .lier-tache-mobile { display: flex; flex-direction: column; gap: 6px; }

  /* Fichiers : une photo ou un fichier. */
  .depot-mobile { display: flex; gap: 8px; margin-bottom: 10px; }
  .depot-mobile > details { flex: 1; min-width: 0; }
  .depot-mobile > details > summary { width: 100%; min-height: 48px; padding-inline: 12px; border-radius: 14px; }
  .depot-mobile > details > summary > svg { flex: none; }
  .depot-bureau { display: none; }

  /* Nouvelle tâche : le titre en grand, la description sans cadre, les choix en lignes, le bouton en bas. */
  .card.edit:has(.formulaire-tache) > h2, .card.edit:has(.formulaire-tache) > p.muted { display: none; }
  .formulaire-tache .field:has(#id_title) > label, .formulaire-tache .field:has(#id_description) > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .formulaire-tache .help { display: none; }
  .formulaire-tache #id_title { padding: 6px 0; border: 0; border-bottom: 2px solid var(--green); border-radius: 0; background: none; font-size: 1.6rem; font-weight: 750; }
  .formulaire-tache #id_description { min-height: 96px; padding: 8px 0; border: 0; background: none; }
  .formulaire-tache .field:has(#id_priority), .formulaire-tache .field:has(#id_due_date), .formulaire-tache .field:has(#id_assignee) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0; padding: 0 14px;
    border-bottom: 1px solid var(--line); background: var(--bg);
  }
  .formulaire-tache .field:has(#id_priority) { border-radius: 14px 14px 0 0; box-shadow: 0 -1px 0 var(--line); }
  .formulaire-tache .field:has(#id_assignee) { margin-bottom: 14px; border-radius: 0 0 14px 14px; }
  .formulaire-tache #id_priority, .formulaire-tache #id_due_date, .formulaire-tache #id_assignee { flex: 0 1 60%; min-width: 0; border: 0; background-color: transparent; color: var(--muted); text-align: right; }
  .formulaire-tache .bouton-principal {
    position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 48px;
  }
}