/* Assistant IA — feuille de style unique (aucun style en ligne : la CSP reste stricte). */

:root {
  --fond: #f7f7f5;
  --surface: #ffffff;
  --texte: #1f2328;
  --discret: #6b7280;
  --bord: #d0d4da;
  --accent: #2f5bd3;
  --accent-fond: #e8eefc;
  --alerte: #b42318;
  --vert: #1a7f37;
  --orange: #b54708;
  --rouge: #b42318;
  --jauge-fond: #e5e7eb;
  --hauteur-barre: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16181c;
    --surface: #1f2228;
    --texte: #e6e6e6;
    --discret: #9aa0a6;
    --bord: #3a3f47;
    --accent: #7aa2ff;
    --accent-fond: #1f2a44;
    --alerte: #ff8a80;
    --vert: #4ac26b;
    --orange: #f0a35e;
    --rouge: #ff8a80;
    --jauge-fond: #30343b;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1rem;
}

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
a { color: var(--accent); }

.discret { color: var(--discret); font-size: 0.875rem; }
.alerte { color: var(--alerte); font-weight: 600; }

/* --- Formulaires --- */

.connexion { max-width: 22rem; }

label { display: block; margin: 1rem 0 0.25rem; font-weight: 600; }

input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem;
  font-size: 1rem; /* 16 px minimum : évite le zoom automatique sur iPhone */
  border: 1px solid var(--bord);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--texte);
}

button {
  margin-top: 1.25rem;
  padding: 0.7rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.connexion button { width: 100%; }
button.secondaire { background: transparent; color: var(--accent); border: 1px solid var(--bord); }

/* --- Dashboard : navigation en barre du bas sur téléphone --- */

.dashboard .contenu {
  max-width: 56rem;
  padding: 1.25rem 1rem calc(var(--hauteur-barre) + 2rem + env(safe-area-inset-bottom));
}

.navigation {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: var(--surface);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom);
}
.navigation .marque { display: none; }
.navigation ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0; padding: 0;
  list-style: none;
}
.navigation a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  height: var(--hauteur-barre);
  color: var(--discret);
  text-decoration: none;
  font-size: 0.66rem;
  line-height: 1.1;
  text-align: center;
}
.navigation a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.navigation svg {
  width: 1.5rem; height: 1.5rem;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.libelle-long { display: none; }

/* --- Dashboard : menu à gauche sur ordinateur --- */

@media (min-width: 768px) {
  .navigation {
    top: 0; right: auto;
    width: 13rem;
    border-top: 0;
    border-right: 1px solid var(--bord);
    padding: 1.25rem 0.75rem;
  }
  .navigation .marque { display: block; margin: 0 0 1.25rem 0.75rem; font-weight: 700; }
  .navigation ul { display: block; }
  .navigation a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    height: auto;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
  }
  .navigation a:hover { background: var(--fond); }
  .navigation a[aria-current="page"] { background: var(--accent-fond); }
  .navigation svg { width: 1.25rem; height: 1.25rem; }
  .libelle-long { display: inline; }
  .libelle-court { display: none; }
  /* Centré dans l'espace laissé à droite du menu. */
  .dashboard .contenu { margin-left: calc(13rem + max(0rem, (100vw - 13rem - 56rem) / 2)); padding: 2rem 2rem 3rem; }
}

/* --- Contenu --- */

.a-venir { color: var(--discret); }

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 0 0.75rem; }
.actions button { margin-top: 0.5rem; }

/* --- Récapitulatif (Aujourd'hui) et Système --- */

.bandeau { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; font-weight: 600; }
.bandeau-vert { background: color-mix(in srgb, var(--vert) 14%, transparent); color: var(--vert); }
.bandeau-orange { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.bandeau-rouge { background: color-mix(in srgb, var(--rouge) 16%, transparent); color: var(--rouge); }

.bloc { padding: 0.9rem 0; border-bottom: 1px solid var(--bord); }
.bloc:last-child { border-bottom: 0; }
.bloc p { margin: 0; }
.bloc-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.bloc-titre h2 { margin: 0; }
.bloc-titre a { font-size: 0.9rem; }

.bouton {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.jauges { display: grid; gap: 0.9rem; }
.jauges-compactes { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.jauges-compactes .discret { display: none; }
@media (min-width: 768px) { .carte .jauges { grid-template-columns: repeat(3, 1fr); } }
.jauge-titre { display: flex; justify-content: space-between; font-size: 0.9rem; }
.jauge-barre { display: block; width: 100%; height: 0.4rem; margin: 0.3rem 0; }
.jauge-fond { fill: var(--jauge-fond); }
.barre-vert { fill: var(--vert); }
.barre-orange { fill: var(--orange); }
.barre-rouge { fill: var(--rouge); }
.texte-vert { color: var(--vert); }
.texte-orange { color: var(--orange); }
.texte-rouge { color: var(--rouge); }
.texte-gris { color: var(--discret); }

.pastilles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pastille { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.point { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
.point-vert { background: var(--vert); }
.point-rouge { background: var(--rouge); }
.point-orange { background: var(--orange); }
.point-gris { background: var(--bord); }

.ligne-ia { display: flex; justify-content: space-between; margin-top: 0.75rem !important; }

.chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 0 0 1rem; }
@media (min-width: 768px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffres dt { font-size: 0.85rem; color: var(--discret); }
.chiffres dd { margin: 0; font-size: 1.15rem; font-weight: 600; }
.sous-titre { font-size: 0.95rem; margin: 0 0 0.25rem; }

.executions { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.4rem; }
.executions li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }

/* --- Projets : sections repliables et lignes condensées (sans script, <details>) --- */

select {
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid var(--bord);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--texte);
}
.choix-pseudo button { margin-top: 0.6rem; }

.recherche { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.recherche input { flex: 1; }
.recherche button { margin-top: 0; white-space: nowrap; }
.portee { margin: 0 0 1rem; }

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.section { margin-bottom: 0.9rem; }
.section > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.section > summary::before { content: "▸"; color: var(--discret); width: 0.8rem; }
.section[open] > summary::before { content: "▾"; }
.section > summary h2 { margin: 0; font-size: 1rem; }
.compteur {
  min-width: 1.4rem; padding: 0 0.4rem; border-radius: 1rem;
  background: var(--accent-fond); color: var(--accent); font-size: 0.8rem; font-weight: 600; text-align: center;
}

.lignes { background: var(--surface); border: 1px solid var(--bord); border-radius: 0.6rem; overflow: hidden; }
.ligne + .ligne { border-top: 1px solid var(--bord); }
.ligne > summary { display: flex; flex-direction: column; padding: 0.5rem 0.75rem; }
.ligne > summary:hover { background: var(--fond); }
.ligne-titre { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.ligne-meta { color: var(--discret); font-size: 0.82rem; }
.ligne[open] > summary { background: var(--accent-fond); }
@media (min-width: 768px) {
  .ligne > summary { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .ligne-meta { text-align: right; flex: none; max-width: 50%; }
}

.detail { margin: 0; padding: 0.5rem 0.75rem 0.25rem; display: grid; gap: 0.3rem; font-size: 0.88rem; }
.detail > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.5rem; }
.detail dt { color: var(--discret); }
.detail dd { margin: 0; }
.sous-liste { margin: 0; padding-left: 1rem; }
.lien-furious { display: inline-block; margin: 0.25rem 0.75rem 0.6rem; font-size: 0.88rem; font-weight: 600; }
.bloc .section { margin-bottom: 0.4rem; }

/* Tri des mails */
.onglets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.onglets a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border: 1px solid var(--bord);
  border-radius: 1rem; text-decoration: none; color: inherit; font-size: 0.88rem; }
.onglets a[aria-current="page"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.actions-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0 0.75rem 0.6rem; }
.important { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.important button, button.petit { margin-top: 0; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.reclasser { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; width: 100%; }
.reclasser input[type="text"] { flex: 1 1 12rem; min-width: 0; width: auto; padding: 0.35rem 0.5rem; font-size: 1rem; margin: 0; }
textarea { box-sizing: border-box; width: 100%; padding: 0.5rem; font: inherit; font-size: 1rem; border: 1px solid var(--bord);
  border-radius: 0.5rem; background: var(--surface); color: var(--texte); margin-bottom: 0.5rem; }
/* Tri : titres de ligne plus légers ; champs plus petits sur ordinateur (16 px gardés sur téléphone : pas de zoom iPhone) */
.lignes-tri .ligne-titre { font-weight: 500; font-size: 0.9rem; }
@media (min-width: 768px) {
  .reclasser input[type="text"], textarea { font-size: 0.85rem; }
}

/* Alertes du système (budget, rappels, sauvegarde) */
.alertes { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.alerte-ligne { border-radius: 0.6rem; padding: 0.6rem 0.8rem; }
.alerte-orange { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.alerte-rouge { background: color-mix(in srgb, var(--rouge) 14%, transparent); }
.alerte-texte { white-space: pre-line; margin: 0.5rem 0; font-size: 0.9rem; }
.reglages label { font-weight: 500; font-size: 0.9rem; }
.reglages input { max-width: 12rem; }

/* Suivis (À faire, En attente) */
.suivi .ligne-titre { display: flex; align-items: baseline; gap: 0.45rem; font-weight: 500; font-size: 0.92rem; }
.suivi .ligne-titre .point { flex: none; position: relative; top: -0.05rem; }
/* Listes de suivis : une carte par suivi, espacées (vue d'ensemble), détail au déroulé. */
.lignes-suivis { background: none; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 0.5rem; }
.lignes-suivis > .ligne { background: var(--surface); border: 1px solid var(--bord); border-radius: 0.6rem; overflow: hidden; }
.lignes-suivis > .ligne + .ligne { border-top: 1px solid var(--bord); }
.suivi .ligne-meta .echeance { color: var(--texte); }
.suivi .ligne-meta .texte-rouge, .suivi .ligne-meta .texte-orange { font-weight: 500; }
.coulisses { padding: 0 0.75rem 0.4rem; font-size: 0.85rem; }
.coulisses > summary { color: var(--accent); font-weight: 600; font-size: 0.85rem; }
.coulisses .detail { padding: 0.4rem 0 0; }
.point-jaune { background: #d4a72c; }
.source { font-size: 0.75rem; color: var(--discret); border: 1px solid var(--bord); border-radius: 0.3rem; padding: 0 0.3rem; white-space: nowrap; }
.texte-libre { white-space: pre-line; }
.sous-liste .fait, .historique .annule { color: var(--discret); text-decoration: line-through; }
.plus-tard { margin-top: 0.6rem; }
.plus-tard > summary h2 { font-size: 0.95rem; }
.bloc-titre .compteur { font-size: 0.75rem; vertical-align: middle; }
.formulaire-suivi { max-width: 36rem; }
.formulaire-suivi label .discret { font-weight: 400; }
.deux-colonnes { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
.raccourcis { border: 0; padding: 0; margin: 1rem 0 0; }
.raccourcis legend { font-weight: 600; margin-bottom: 0.25rem; }
.raccourcis .choix { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.2rem 0.9rem 0.2rem 0; font-weight: 400; }
.raccourcis .choix input { width: auto; }
.plus-de-champs { margin-top: 1rem; }
.plus-de-champs > summary { color: var(--accent); font-weight: 600; }
.annuler-lien { margin-left: 1rem; }
.saisie-rapide { max-width: 36rem; }
.saisie-rapide textarea { font-size: 1rem; }
.explication { margin: 0 0 0.5rem; }
.doublons ul { margin: 0.3rem 0; padding-left: 1.1rem; }
.lien { border: 0; padding: 0; margin: 1rem 0 0; }
.lien legend { font-weight: 600; margin-bottom: 0.25rem; }
.choix-lien { display: block; padding-left: 1.5rem; text-indent: -1.5rem; margin: 0.2rem 0; font-weight: 400; line-height: 1.35; }
.choix-lien input { width: auto; margin: 0 0.4rem 0 0; text-indent: 0; }
.choix-lien[hidden] { display: none; }
.autres-liens { margin-top: 0.4rem; }
.autres-liens > summary { color: var(--accent); font-weight: 600; font-size: 0.92rem; }
.filtre-liens { margin: 0.5rem 0; }
.liste-liens { max-height: 18rem; overflow-y: auto; border: 1px solid var(--bord); border-radius: 0.5rem; padding: 0.3rem 0.6rem; background: var(--surface); }
.actions-suivi { display: grid; gap: 0.45rem; padding: 0.2rem 0.75rem 0.7rem; }
.action-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.action-groupe form { display: contents; }
.action-groupe input[type="text"] { flex: 1 1 10rem; width: auto; min-width: 0; padding: 0.3rem 0.5rem; }
.action-groupe input[type="date"] { width: auto; padding: 0.25rem 0.4rem; }
.petit-lien { font-size: 0.88rem; font-weight: 600; }
.ajout-etapes > summary { color: var(--accent); font-size: 0.88rem; font-weight: 600; }
.ajout-etapes textarea { margin-top: 0.4rem; }
@media (min-width: 768px) { .action-groupe input { font-size: 0.85rem; } }

/* Capture rapide et écran Confirmer / Modifier */
.capture { max-width: 40rem; }
.capture textarea { min-height: 10rem; font-size: 1rem; }
.capture input[type="file"] { padding: 0.5rem; }
.recherche-cible .liste-liens { max-height: 14rem; }
a.secondaire-bouton { background: transparent; color: var(--accent); border: 1px solid var(--bord); }
.captures { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.captures li { line-height: 1.35; }
.texte-brut { background: var(--surface); border: 1px solid var(--bord); border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.texte-brut h2 { font-size: 0.95rem; margin: 0 0 0.3rem; }
.texte-brut .texte-libre { margin: 0; }
.alertes-capture { margin: 0 0 0.8rem; padding: 0.5rem 0.8rem 0.5rem 1.6rem; border-radius: 0.6rem;
  background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); font-size: 0.9rem; }
.confirmer { max-width: 40rem; }
.carte { border: 1px solid var(--bord); border-radius: 0.6rem; padding: 0.4rem 0.8rem 0.7rem; margin: 1rem 0 0; background: var(--surface); }
.carte-nouvelle { border-style: dashed; background: transparent; }
.carte legend { padding: 0 0.3rem; }
.garder { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.garder input { width: auto; }
.genre { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--accent); }
.genre-decision { color: var(--vert); }
.genre-attente { color: var(--orange); }
.petit-texte { font-size: 0.85rem; margin: 0.3rem 0 0; }
.dates-candidates { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.3rem; }
.dates-candidates .choix { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; margin: 0; }
.dates-candidates input { width: auto; }
.actions-capture { display: flex; gap: 0.6rem; margin: 0.8rem 0; }
.boutons-capture { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.carte .deux-colonnes { grid-template-columns: 1fr 1fr; }
.carte label { margin-top: 0.6rem; }

/* Lot 5a : propositions à valider (suivis venus des mails), en lignes repliables comme les projets */
.corps-valider { padding: 0.3rem 0.75rem 0.8rem; }
.corps-valider .petit-texte { margin: 0.2rem 0 0.4rem; }
.citations { margin: 0.3rem 0; }
.citations > summary { color: var(--accent); font-size: 0.85rem; font-weight: 600; }
.extrait { margin: 0.4rem 0; padding-left: 0.6rem; border-left: 3px solid var(--bord); font-size: 0.88rem; font-style: italic; }
.extrait .discret { font-style: normal; }
.form-valider .lien { margin-top: 0.5rem; }
.form-valider .lien legend { font-size: 0.88rem; }
.form-valider input[type="search"] { margin-top: 0.35rem; padding: 0.45rem 0.6rem; }
.form-valider button { margin-top: 0.6rem; }
.texte-mail .texte-libre { margin-top: 0.5rem; }
/* Sur ordinateur (pas de zoom automatique à éviter), des champs moins imposants. */
@media (min-width: 768px) {
  .form-valider .choix-lien { font-size: 0.9rem; }
  .form-valider input[type="search"] { font-size: 0.9rem; padding: 0.35rem 0.55rem; max-width: 34rem; }
}