/* Portail — feuille unique, mobile d'abord, clair/sombre automatique. */
:root {
  --fond: #f6f7f9; --carte: #fff; --texte: #10151f; --doux: #576173;
  --bord: #dde2ea; --accent: #1a56c4; --accent-doux: #e8effd;
  --ok: #0b6b45; --warn: #8a4b00; --err: #a8241b; --rayon: 12px;
  /* Fond du bouton d'envoi : assez sombre pour que 👀 et ✅ (glyphes couleur) gardent
     ≥ 4.5:1, ce que l'ancien bleu d'accent ne permettait pas pour le ✅ vert. */
  --envoi-fond: #10151f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0b1220; --carte: #141d30; --texte: #e9effb; --doux: #a3b1c9;
    --bord: #26314a; --accent: #8fb4ff; --accent-doux: #1b2740;
    --ok: #6ee7a8; --warn: #fbbf24; --err: #ff9d94;
    --envoi-fond: #232e45;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  /* 1rem (et non 16px) : le texte d'édition suit la préférence de taille de l'utilisateur,
     sinon il reste à 16 px quand le système agrandit le texte (WCAG 1.4.4). */
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--h-nav, 57px) + 15px); /* place pour la barre basse, qui grandit avec le texte */
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.saut { position: absolute; left: -999px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.saut:focus { left: 8px; top: 8px; background: var(--carte); padding: 12px 8px; z-index: 9; }

.entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--carte); border-bottom: 1px solid var(--bord);
}
.marque {
  font-weight: 700; font-size: 1.15rem; color: var(--texte);
  display: inline-flex; align-items: center; min-height: 44px;   /* cible tactile ≥ 44 px */
}
main { padding: 16px; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 1.35rem; margin: 0 0 16px; }
h2 { font-size: 1.05rem; margin: 0 0 8px; }
.muet { color: var(--doux); font-size: .9rem; }
.vide { color: var(--doux); padding: 12px 0; }

/* Barre basse mobile */
.nav {
  position: fixed; inset: auto 0 0 0; display: grid;
  /* minmax(0, 1fr) : sans lui, le plancher « 1fr » vaut le contenu et les 5 colonnes
     débordent dès que le texte est agrandi (200 % → 501 px pour 390 px d'écran). */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--carte); border-top: 1px solid var(--bord); z-index: 5;
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; min-width: 0; padding: 0 4px; text-align: center;
  font-size: .82rem; color: var(--doux); text-decoration: none;
  overflow-wrap: anywhere;   /* à 200 %, le libellé passe à la ligne au lieu de pousser la barre */
  hyphens: auto;             /* et se coupe sur une syllabe quand le dictionnaire est présent */
}
.nav a[aria-current="page"] { color: var(--accent); font-weight: 650; }

/* Tuiles */
.tuiles { display: grid; gap: 12px; }
.tuile {
  display: block; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px; color: var(--texte); min-height: 96px;
}
.tuile:hover { border-color: var(--accent); text-decoration: none; }
.tuile h2 { display: flex; justify-content: space-between; align-items: baseline; }
.chiffre { font-size: 1.9rem; font-weight: 700; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.puce {
  background: var(--accent-doux); color: var(--texte); border-radius: 999px;
  padding: 2px 10px; font-size: .8rem;
}
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 6px 0; border-top: 1px solid var(--bord); }
.liste li:first-child { border-top: 0; }

/* Kanban */
.bouton, .lien {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
@media (prefers-color-scheme: dark) { .bouton { color: #0b1220; } }
.lien { background: none; border: 0; color: var(--accent); padding: 0 8px; }
.bouton.secondaire { background: var(--carte); color: var(--accent); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.onglets { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
.onglets label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--bord); border-radius: 999px; background: var(--carte);
  font-size: .9rem; white-space: nowrap; cursor: pointer;
}
.panneau { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.panneau:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.panneau:checked + label {
  border-color: var(--accent); color: var(--accent); font-weight: 650; background: var(--accent-doux);
}
.vue-kanban .colonne { display: none; }
/* Une seule règle pour basculer d'onglet : radio n → colonne n (`:has` car les radios
   sont dans la barre d'onglets, pas sœurs du tableau). */
.vue-kanban:has(#onglet1:checked) .tableau > .colonne:nth-child(1),
.vue-kanban:has(#onglet2:checked) .tableau > .colonne:nth-child(2),
.vue-kanban:has(#onglet3:checked) .tableau > .colonne:nth-child(3),
.vue-kanban:has(#onglet4:checked) .tableau > .colonne:nth-child(4),
.vue-kanban:has(#onglet5:checked) .tableau > .colonne:nth-child(5),
.vue-kanban:has(#onglet6:checked) .tableau > .colonne:nth-child(6),
.vue-kanban:has(#onglet7:checked) .tableau > .colonne:nth-child(7),
.vue-kanban:has(#onglet8:checked) .tableau > .colonne:nth-child(8) { display: block; }
.colonne > h2 { font-size: .95rem; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.cartes { display: grid; gap: 10px; }
.carte-lien {
  display: block; background: var(--carte); border: 1px solid var(--bord);
  border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px; color: var(--texte);
}
.carte-lien:hover { text-decoration: none; border-color: var(--accent); }
.carte-lien strong { display: block; font-size: 1rem; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--doux); font-size: .82rem; margin-top: 4px; }
.etiquette { border: 1px solid var(--bord); border-radius: 999px; padding: 1px 8px; }
.etiquette.ok { color: var(--ok); border-color: var(--ok); }
.etiquette.err { color: var(--err); border-color: var(--err); }
.etiquette.warn { color: var(--warn); border-color: var(--warn); }

/* Listes / tableaux de CRON */
.rangee {
  display: grid; gap: 6px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 14px; margin-bottom: 10px;
}
.rangee .haut { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.rangee .haut strong { font-size: 1rem; }

/* Rapports */
.galerie { display: grid; gap: 12px; }
.vignette {
  display: block; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden; color: var(--texte);
}
.vignette:hover { border-color: var(--accent); text-decoration: none; }
.vignette img, .vignette .type {
  display: block; width: 100%; height: 140px; object-fit: cover; background: var(--accent-doux);
}
.vignette .type {
  display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; color: var(--accent);
}
.vignette .texte { padding: 10px 12px; }
.plein { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--carte); border-radius: var(--rayon); }
.cadre { width: 100%; height: 70vh; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); }

/* Formulaires */
form.fiche { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; }
form.fiche p { margin: 0 0 14px; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=password], textarea, select {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: 10px;
}
textarea { min-height: 112px; }
.erreur-champ { color: var(--err); font-size: .88rem; }

/* Flash */
.flash {
  border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--bord);
  background: var(--carte); border-left: 4px solid var(--accent);
}
.flash.success { border-left-color: var(--ok); }
.flash.error { border-left-color: var(--err); }

/* Connexion */
.page-connexion { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.page-connexion .boite { width: 100%; max-width: 380px; }
.page-connexion h1 { text-align: center; }

@media (min-width: 760px) {
  body { padding-left: 208px; padding-bottom: 24px; }
  .entete { padding-left: 24px; }
  .nav {
    position: fixed; inset: 0 auto 0 0; width: 208px; grid-template-columns: 1fr;
    align-content: start; gap: 4px; padding: 72px 12px 12px; border-top: 0; border-right: 1px solid var(--bord);
  }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: .95rem; }
  .nav a[aria-current="page"] { background: var(--accent-doux); }
  main { padding: 24px; }
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .onglets { display: none; }
  .colonne { display: block !important; }
  .tableau { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.barre h1 { margin: 0; }

/* Coédition Hermès : liste, envoi flottant (l'éditeur a sa feuille : hermes/editeur.css) */
.nouveau-doc { margin-bottom: 16px; }
.liste-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.doc { display: block; text-decoration: none; color: var(--texte); }
.doc:hover { border-color: var(--accent); text-decoration: none; }
/* Gabarit fixe : le titre reste sur une ligne (ellipse) et « v1 » reste aligné à droite,
   même avec un titre long. */
.doc .haut { flex-wrap: nowrap; }
.doc .haut strong {
  font-size: 1rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc .haut .muet { flex: none; }

.mini {
  min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--bord); border-radius: 10px;
  background: var(--fond); color: var(--texte); font: inherit; cursor: pointer;
}
.mini:active { background: var(--accent-doux); }
.champ { margin: 0 0 14px; }

/* Bouton flottant : 56×56, au-dessus de la barre basse (dont la hauteur varie avec le texte
   agrandi, d'où --h-nav mesuré par editeur.js) et du clavier tactile */
.envoi {
  position: fixed; right: 16px; z-index: 6;
  bottom: calc(var(--h-nav, 57px) + 15px + env(safe-area-inset-bottom) + var(--clavier, 0px));
}
.badge {
  display: inline-block; background: var(--warn); color: #fff; border-radius: 999px;
  padding: 4px 10px; font-size: .8rem; font-weight: 650;
}
/* `.badge` a un `display` qui écrase celui du navigateur pour [hidden] : on le rétablit. */
.badge[hidden] { display: none; }
.badge-hermes { background: var(--accent); }
.pied-liste { margin-top: 16px; }
.actions-rangee { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions-rangee form, form.vider { margin: 0; }
form.vider { margin-top: 16px; }
.danger { color: var(--err); }
.bouton.danger { border-color: var(--err); }
/* Bas de page : une seule source de marge (le body ne compense plus, sinon 72 px s'ajoutaient aux
   148 px). 148 px = barre 57 + 15 px sous le bouton + bouton 56 + 20 px de marge ; 129 px requis. */
body:has(#page-doc) { padding-bottom: 0; }
main:has(#page-doc) { padding-bottom: calc(var(--h-nav, 57px) + 15px + 56px + 20px); }
/* Lisibilité desktop : la colonne de texte ne dépasse pas ~72 caractères (voir editeur.css). */
.versions, .journal { max-width: 72ch; margin-left: auto; margin-right: auto; }
/* Bouton d'envoi : 56×56, un seul emoji centré (👀 puis ✅ une seconde) */
.envoyer {
  width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--envoi-fond);
  color: #fff; font: inherit; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.envoyer span { font-size: 24px; line-height: 1; }
.envoyer:disabled { cursor: default; }
@media (prefers-color-scheme: dark) {
  .badge { color: #0b1220; }
}

.versions { margin-top: 18px; }
.version { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.version form { margin: 0; }
.version .lien { min-height: 44px; }