/* Organisation : feuille de style unique. Sobre : ce qui apparaît sur une carte est un signal. */

:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --texte: #1f2328;
  --texte-2: #5b6370;
  --bord: #d9dde3;
  --accent: #2563eb;
  --accent-texte: #ffffff;
  --alerte: #b42318;
  --alerte-fond: #fdecea;
  --ok: #157a3c;
  --attention: #a15c07;
  --attention-fond: #fff4e0;
  --ombre: 0 1px 2px rgba(16, 24, 40, .08);
  --rayon: 8px;
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16181c;
    --surface: #1f2227;
    --surface-2: #2a2e35;
    --texte: #e8eaed;
    --texte-2: #a3aab5;
    --bord: #3a3f47;
    --accent: #6ea0ff;
    --accent-texte: #0b1020;
    --alerte: #ff8a7a;
    --alerte-fond: #3a1d1a;
    --ok: #5fd08a;
    --attention: #f2b35a;
    --attention-fond: #3a2c14;
    --ombre: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 15px; line-height: 1.4; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--surface); border: 1px solid var(--bord); border-radius: 6px; padding: 6px 8px; max-width: 100%; }
textarea { resize: vertical; }
[hidden] { display: none !important; }
.petit { font-size: 12px; color: var(--texte-2); }
.aide { color: var(--texte-2); }
code { font-size: 13px; }

.bouton { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bord); background: var(--surface); border-radius: 6px; padding: 6px 12px; cursor: pointer; text-decoration: none; color: var(--texte); }
.bouton:hover { background: var(--surface-2); }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.bouton-principal:hover { background: var(--accent); filter: brightness(1.08); }
.bouton-large { width: 100%; justify-content: center; padding: 12px; font-size: 16px; }
.bouton-discret { border-color: transparent; background: transparent; color: var(--texte-2); padding: 4px 6px; }
.bouton-danger { color: var(--alerte); }
.icone { width: 18px; height: 18px; flex: none; }

/* --- Pages de compte ------------------------------------------------------- */
.page-compte .feuille { max-width: 560px; margin: 32px auto; padding: 24px; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; }
.marque { font-weight: 700; margin: 0 0 16px; }
.marque a { color: var(--texte); text-decoration: none; }
.formulaire p { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.formulaire input { width: 100%; padding: 10px; }
.formulaire ul.errorlist, .errorlist { color: var(--alerte); padding-left: 18px; }
.messages { list-style: none; padding: 0; }
.messages li { padding: 8px 12px; border-radius: 6px; background: var(--surface-2); margin-bottom: 6px; }
.message-error { background: var(--alerte-fond) !important; color: var(--alerte); }
.alerte { background: var(--attention-fond); border: 1px solid var(--attention); border-radius: 8px; padding: 12px; margin: 12px 0; }
.liste-etat li { margin-bottom: 6px; }
.tableau-simple { border-collapse: collapse; width: 100%; font-size: 14px; }
.tableau-simple th, .tableau-simple td { text-align: left; border-bottom: 1px solid var(--bord); padding: 6px 4px; vertical-align: top; }
.pied-compte { margin-top: 24px; font-size: 14px; color: var(--texte-2); }

/* --- L'app : barre du haut, micro toujours visible ------------------------- */
.page-app { min-height: 100vh; }
.barre { position: sticky; top: 0; z-index: 20; background: var(--fond); border-bottom: 1px solid var(--bord); padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.micro { display: flex; gap: 6px; align-items: center; min-width: 0; }
.micro textarea { flex: 1; white-space: nowrap; overflow: hidden; min-width: 0; height: 38px; min-height: 38px; padding: 8px 10px; border-radius: 19px; }
.micro .dicter { border-radius: 19px; height: 38px; }
.micro .dicter.en-cours { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.navigation { display: flex; gap: 2px; align-items: center; }
.navigation button { border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--texte-2); }
.navigation button[aria-current="page"] { background: var(--surface-2); color: var(--texte); font-weight: 600; }
.etat-reseau { font-size: 12px; color: var(--texte-2); padding: 0 6px; white-space: nowrap; }
.etat-reseau.hors-ligne { color: var(--attention); font-weight: 600; }

.chronos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chrono { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--bord); border-radius: 16px; padding: 2px 4px 2px 10px; font-size: 13px; }
.chrono .duree { font-variant-numeric: tabular-nums; color: var(--texte-2); }
.chrono.en-attente { border-style: dashed; }

.panneau { margin: 8px 12px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 12px; }
.panneau h2 { font-size: 14px; margin: 0 0 8px; }
.panneau-attention { border-color: var(--attention); background: var(--attention-fond); }

/* Les propositions de Haiku : validées ou corrigées d'un toucher */
.proposition { border-top: 1px solid var(--bord); padding: 8px 0; }
.proposition:first-of-type { border-top: 0; }
.proposition .dit { color: var(--texte-2); font-style: italic; margin-bottom: 6px; }
.action { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 6px; background: var(--surface-2); border-radius: 6px; margin-bottom: 6px; }
.action label { display: flex; flex-direction: column; font-size: 12px; color: var(--texte-2); gap: 2px; }
.action .question { grid-column: 1 / -1; color: var(--attention); font-weight: 600; }
.action .large { grid-column: 1 / -1; }
.boutons { display: flex; gap: 6px; flex-wrap: wrap; }

/* La bande des récurrentes */
.recurrentes { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; }
.recurrente { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bord); background: var(--surface); border-radius: 16px; padding: 4px 12px; cursor: pointer; user-select: none; }
.recurrente.faite { background: var(--surface-2); color: var(--texte-2); text-decoration: line-through; }

/* --- Le tableau : cinq colonnes ------------------------------------------- */
.onglets-colonnes { display: none; }
.tableau { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; padding: 10px 12px; align-items: start; }
.colonne { background: var(--surface-2); border-radius: var(--rayon); padding: 8px; min-height: 120px; display: flex; flex-direction: column; gap: 6px; }
.colonne header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; padding: 0 2px; }
.colonne header .compte { color: var(--texte-2); font-weight: 400; margin-left: 4px; }
.colonne .cartes { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.ajout-rapide input { width: 100%; }

.carte { position: relative; background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--couleur, #8a8f98); border-radius: 6px; padding: 6px 8px; box-shadow: var(--ombre); cursor: pointer; touch-action: manipulation; }
.carte.sortable-ghost { opacity: .4; }
.carte-ligne { display: flex; align-items: flex-start; gap: 6px; }
.carte .titre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.carte input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; flex: none; }
.importance { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.importance-essentiel { background: var(--alerte); }
.importance-important { background: transparent; border: 2px solid var(--texte-2); width: 9px; height: 9px; }
.importance-secondaire { display: none; }
.initiales { font-size: 11px; color: var(--texte-2); letter-spacing: .5px; }
.signaux { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 22px; font-size: 12px; }
.signal { color: var(--texte-2); }
.signal-retard { color: var(--alerte); font-weight: 600; }
.signal-proche { color: var(--attention); }
.pied-carte { display: flex; align-items: center; justify-content: space-between; margin-left: 18px; }
.plus { font-size: 12px; }
.poignee-agenda { cursor: grab; color: var(--texte-2); padding: 2px; display: inline-flex; opacity: .55; }
.carte:hover .poignee-agenda, .sous-tache:hover .poignee-agenda { opacity: 1; }
.sous-taches { margin: 4px 0 0 22px; display: flex; flex-direction: column; gap: 2px; }
.sous-tache { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sous-tache.faite span { text-decoration: line-through; color: var(--texte-2); }
.sous-tache span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sous-taches input[type="text"] { width: 100%; font-size: 14px; padding: 3px 6px; }

/* --- L'agenda --------------------------------------------------------------- */
.agenda { margin: 6px 12px 24px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px; }
.agenda .fc { --fc-border-color: var(--bord); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--surface-2); --fc-today-bg-color: rgba(37, 99, 235, .06); --fc-button-bg-color: var(--surface-2); --fc-button-border-color: var(--bord); --fc-button-text-color: var(--texte); --fc-button-hover-bg-color: var(--bord); --fc-button-hover-border-color: var(--bord); --fc-button-active-bg-color: var(--accent); --fc-button-active-border-color: var(--accent); font-size: 13px; }
.agenda .fc .fc-toolbar-title { font-size: 16px; }
.fc-event.rendez-vous { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--surface) 6px, var(--surface) 12px) !important; border: 1px dashed var(--texte-2) !important; opacity: .9; }
.fc-event.rendez-vous .fc-event-main { color: var(--texte-2) !important; }
.fc-event.creneau-fait { opacity: .5; }
.erreurs-agenda { color: var(--attention); font-size: 13px; }

/* --- Fenêtres --------------------------------------------------------------- */
dialog { border: 1px solid var(--bord); border-radius: 12px; padding: 0; background: var(--surface); color: var(--texte); width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 48px); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
.fenetre { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.fenetre h2 { margin: 0; font-size: 17px; }
.fenetre .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.fenetre label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--texte-2); }
.fenetre fieldset { border: 1px solid var(--bord); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 12px; }
.fenetre fieldset label { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--texte); }
.fenetre .titre-carte { font-size: 17px; font-weight: 600; width: 100%; }
.ligne-creneau { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; text-align: left; text-decoration: underline; }
.historique { font-size: 12px; color: var(--texte-2); max-height: 140px; overflow: auto; }
.choix-colonnes { display: grid; grid-template-columns: 1fr; gap: 6px; }
.choix-colonnes button { padding: 12px; }
.texte-demande { white-space: pre-wrap; font-size: 13px; background: var(--surface-2); padding: 10px; border-radius: 6px; max-height: 50vh; overflow: auto; }

/* --- Pages Temps, Archive, Réglages ------------------------------------------ */
.vue { padding: 10px 12px 40px; max-width: 1100px; }
.vue h2 { font-size: 17px; }
.vue h3 { font-size: 15px; margin-top: 18px; }
.ligne-temps.remplacee { text-decoration: line-through; color: var(--texte-2); }
.totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.liste-reglages { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-reglages li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.liste-reglages input[type="color"] { width: 40px; height: 32px; padding: 2px; }
.ligne-formulaire { display: flex; gap: 6px; flex-wrap: wrap; align-items: end; margin: 8px 0; }

/* --- Téléphone : une colonne à la fois, on glisse de l'une à l'autre ---------- */
@media (max-width: 760px) {
  .barre { grid-template-columns: 1fr; padding: 6px 8px; }
  .navigation { overflow-x: auto; }
  .onglets-colonnes { display: flex; gap: 4px; overflow-x: auto; padding: 8px 8px 0; }
  .onglets-colonnes button { border: 1px solid var(--bord); background: var(--surface); border-radius: 14px; padding: 4px 10px; font-size: 13px; white-space: nowrap; }
  .onglets-colonnes button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
  .tableau { display: block; padding: 8px; }
  .colonne.cachee { display: none; }
  .poignee-agenda { display: none; }
  .agenda { margin: 6px 8px 24px; }
  .action { grid-template-columns: 1fr 1fr; }
}