:root {
  --fond: #F5F1E8;
  --halo: #FBF9F3;
  --carte: #FFFFFF;
  --papier: #FBF9F3;
  --encre: #172536;
  --doux: #59636B;
  --pale: #858C91;
  --ligne: #E2DDD1;
  --accent: #B49A68;
  --accent-texte: #7A6236;
  --accent-fond: #F1E9D8;
  --ok: #2F7D4F;
  --ok-fond: #E3F2E8;
  --alerte: #9A4E12;
  --alerte-fond: #FFF1E2;
  --erreur: #B3261E;
  --ombre: 0 1px 2px rgba(23, 37, 54, .05), 0 8px 24px -12px rgba(23, 37, 54, .18);
  --r-grand: 22px;
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0E1823; --halo: #1A2A3B; --carte: #13202E; --papier: #182736; --encre: #F2EEE5; --doux: #B4BABE;
    --pale: #8A9196; --ligne: #273647; --accent: #C9AE7C; --accent-texte: #D6BF94; --accent-fond: #2C2A22;
    --ok: #7BD49C; --ok-fond: #183526; --alerte: #F4B36C; --alerte-fond: #2C2A22; --erreur: #FF8A80;
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0E1823; --halo: #1A2A3B; --carte: #13202E; --papier: #182736; --encre: #F2EEE5; --doux: #B4BABE;
  --pale: #8A9196; --ligne: #273647; --accent: #C9AE7C; --accent-texte: #D6BF94; --accent-fond: #2C2A22;
  --ok: #7BD49C; --ok-fond: #183526; --alerte: #F4B36C; --alerte-fond: #2C2A22; --erreur: #FF8A80;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6); color-scheme: dark;
}

* { box-sizing: border-box; }
/* Place de la barre de défilement toujours réservée : la page ne bouge pas quand un écran devient plus court (filtre des tâches). */
html { height: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; min-height: 100%; color: var(--encre);
  background: radial-gradient(ellipse 70% 55% at 50% 22%, var(--halo) 0%, transparent 70%), var(--fond);
  background-attachment: fixed;
  font: 400 15px/1.55 Inter, system-ui, sans-serif;
}
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Barre du haut ---------- */
.barre { display: flex; align-items: center; gap: 24px; padding: 18px clamp(16px, 4vw, 48px); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 22px/1 "Cormorant Garamond", Georgia, serif; }
.marque em { font: 300 22px/1 Inter, sans-serif; font-style: normal; color: var(--accent); }
.barre nav { display: flex; gap: 4px; margin: 0 auto; }
.barre nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; color: var(--doux); white-space: nowrap; }
.barre nav a:hover { color: var(--encre); }
.barre nav a[aria-current="page"] { color: var(--encre); background: var(--carte); box-shadow: var(--ombre); }
.etat-cle { font-size: 13px; color: var(--alerte); background: var(--alerte-fond); padding: 6px 12px; border-radius: 999px; }
main { padding: 8px clamp(16px, 4vw, 48px) 64px; outline: none; }
main:has(> .espace) { padding-bottom: 12px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ligne); background: var(--carte); padding: 8px 14px;
  border-radius: 999px; font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--pale); }
.btn.principal { background: var(--encre); border-color: var(--encre); color: var(--carte); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #172536; }
.btn.discret { border-color: transparent; background: transparent; color: var(--doux); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.petit { padding: 5px 11px; font-size: 13px; }

/* ---------- Avatars ---------- */
.avatar { display: grid; place-items: center; border-radius: 50%; color: #fff; font: 600 22px/1 "Cormorant Garamond", Georgia, serif; flex: none;
  width: 44px; height: 44px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: contain; }
/* Les images de Gemini ont un fond blanc : on les pose dans un disque blanc, les coins du carré disparaissent. */
.avatar.image { background: #FFFFFF !important; }
/* En petit (discussion, fiche de l'agent) : on ne garde que le visage. */
.bulle.agent .avatar.image img, .fiche-agent .avatar.image img { transform: scale(2.3); transform-origin: 50% 20%; }

/* ---------- Écran équipe ---------- */
.accueil { max-width: 1180px; margin: 0 auto; }
.chef { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; max-width: 860px; margin: 12px auto 48px; }
.chef .avatar { width: 150px; height: 150px; font-size: 64px; }
.chef .avatar.image { width: 190px; height: 190px; }
.chef h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
.chef p.sous { color: var(--doux); margin: 6px 0 16px; }
.saisie-chef { display: flex; gap: 8px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; padding: 8px; box-shadow: var(--ombre); }
.saisie-chef textarea { flex: 1; border: 0; background: transparent; resize: none; padding: 8px 10px; min-height: 48px; max-height: 200px; outline: none; }
.reponse-chef { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: var(--carte); border: 1px solid var(--ligne); }
.reponse-chef strong { font-weight: 600; }
.historique-chef { margin-top: 14px; display: grid; gap: 6px; font-size: 14px; color: var(--doux); }
.historique-chef a { color: var(--encre); }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.carte-agent { position: relative; display: flex; flex-direction: column; background: var(--carte); border-radius: var(--r-grand); padding: 18px;
  text-decoration: none; box-shadow: var(--ombre); border: 1px solid transparent; }
.carte-agent:hover { border-color: var(--ligne); }
.carte-agent .scene { height: 190px; display: grid; place-items: center; margin-bottom: 12px;
  background: radial-gradient(circle at 50% 60%, var(--fond) 0%, transparent 68%); }
.carte-agent .scene .avatar { width: 110px; height: 110px; font-size: 46px; }
.carte-agent .scene .avatar.image { width: 180px; height: 180px; }
.en-ligne { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 500; color: var(--doux); display: flex; align-items: center; gap: 6px;
  background: var(--fond); padding: 3px 10px; border-radius: 999px; }
.en-ligne::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2FB36B; }
.nb-docs { position: absolute; top: 16px; left: 16px; font-size: 12px; color: var(--doux); background: var(--fond); padding: 3px 10px; border-radius: 999px; }
.carte-agent h2 { font-size: 24px; }
.carte-agent .metier { font-size: 13px; font-weight: 600; color: var(--accent-texte); margin: 2px 0 6px; }
.carte-agent .resume { font-size: 14px; color: var(--doux); margin: 0; }
.carte-agent .bientot { margin-top: 10px; font-size: 12px; color: var(--pale); }

/* ---------- Écran agent : 3 colonnes ---------- */
.espace { display: grid; grid-template-columns: 250px minmax(0, 1fr) 380px; gap: 18px; max-width: 1500px; margin: 0 auto;
  height: calc(100vh - 118px); min-height: 560px; }
.panneau { background: var(--carte); border-radius: var(--r-grand); box-shadow: var(--ombre); display: flex; flex-direction: column; min-height: 0; }
.panneau > .tete { padding: 16px 18px 10px; display: flex; align-items: center; gap: 10px; }
.panneau > .tete h2 { font-size: 18px; }
.defile { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; }

.fiche-agent { display: flex; gap: 12px; align-items: center; padding: 18px; border-bottom: 1px solid var(--ligne); }
.fiche-agent .avatar.image { width: 64px; height: 64px; }
.fiche-agent h1 { font-size: 22px; }
.fiche-agent .metier { font-size: 13px; color: var(--accent-texte); font-weight: 600; }
.liste-conv { list-style: none; margin: 0; padding: 6px 8px 12px; }
.liste-conv a { display: block; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-size: 14px; }
.liste-conv a:hover { background: var(--fond); }
.liste-conv a[aria-current="true"] { background: var(--accent-fond); }
.liste-conv .date { display: block; font-size: 12px; color: var(--pale); }

.fil { padding: 20px clamp(16px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.bulle { max-width: 720px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle.moi { align-self: flex-end; background: var(--encre); color: var(--carte); padding: 10px 16px; border-radius: 18px 18px 4px 18px; max-width: 80%; }
.bulle.agent { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.bulle.agent .avatar { width: 36px; height: 36px; font-size: 16px; }
.bulle.agent .texte { padding-top: 6px; }
.statut-agent { font-size: 13px; color: var(--doux); display: flex; align-items: center; gap: 8px; }
.statut-agent::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.erreur-fil { color: var(--erreur); background: var(--carte); border: 1px solid currentColor; border-radius: var(--r); padding: 10px 14px; }
.vide { margin: auto; text-align: center; color: var(--doux); max-width: 420px; padding: 24px; }
.vide h2 { color: var(--encre); font-size: 22px; margin-bottom: 6px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }

.composer { border-top: 1px solid var(--ligne); padding: 12px; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; border: 1px solid var(--ligne); background: var(--fond); border-radius: 14px; padding: 10px 14px; resize: none;
  min-height: 46px; max-height: 240px; }

/* ---------- Documents ---------- */
.onglets { display: flex; gap: 4px; padding: 0 14px 10px; }
.onglets button { border: 0; background: none; padding: 6px 10px; border-radius: 999px; color: var(--doux); font-size: 13px; font-weight: 500; cursor: pointer; }
.onglets button[aria-pressed="true"] { background: var(--fond); color: var(--encre); }
.docs { padding: 0 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.doc { min-width: 0; background: var(--papier); border: 1px solid var(--ligne); border-radius: 16px; padding: 14px; }
.doc .entete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.doc h3 { font-size: 16px; line-height: 1.3; }
.etiquette { font-size: 12px; color: var(--doux); white-space: nowrap; }
.etiquette.valide { color: var(--ok); font-weight: 600; }
.doc .corps { white-space: pre-wrap; font-size: 14px; margin: 10px 0; max-height: 180px; overflow: hidden; position: relative; overflow-wrap: anywhere; }
.doc .corps.ouvert { max-height: none; }
.doc .corps:not(.ouvert)::after { content: ""; position: absolute; inset: auto 0 0; height: 48px; background: linear-gradient(transparent, var(--papier)); }
.doc textarea { width: 100%; min-height: 220px; border: 1px solid var(--ligne); border-radius: 10px; padding: 10px; background: var(--carte); margin: 10px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Deux boutons qui se rangent comme s'ils étaient directement dans la ligne d'actions. */
.groupe { display: contents; }
.historique-chef > .btn { justify-self: start; margin-top: 4px; }
.alertes { list-style: none; padding: 8px 10px; margin: 8px 0; background: var(--alerte-fond); color: var(--alerte); border-radius: 10px; font-size: 13px; }
.alertes li + li { margin-top: 4px; }
.plan { list-style: none; counter-reset: d; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.plan li { counter-increment: d; display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.plan li::before { content: counter(d); font: 600 14px/26px "Cormorant Garamond", serif; text-align: center; background: var(--carte); border-radius: 50%; height: 26px; }
.plan input, .plan textarea { width: 100%; border: 1px solid var(--ligne); border-radius: 8px; padding: 6px 8px; background: var(--carte); font-size: 14px; }
.plan textarea { min-height: 0; margin: 4px 0 0; resize: vertical; }
.attente { font-size: 13px; color: var(--doux); margin: 8px 0; }

.formats { display: flex; gap: 6px; margin: 10px 0; }
.formats button { flex: 1; border: 1px solid var(--ligne); background: var(--carte); border-radius: 10px; padding: 6px; cursor: pointer; font-size: 13px; }
.formats button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.formats small { display: block; color: var(--pale); }
.apercu { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scroll-snap-type: x mandatory; }
.mini { flex: none; width: 150px; scroll-snap-align: start; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; justify-content: center;
  background: #F5F1E8; color: #172536; font-size: 9px; line-height: 1.4; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mini.fonce { background: #172536; color: #F5F1E8; }
.mini b { font: 600 13px/1.15 "Cormorant Garamond", Georgia, serif; display: block; margin-bottom: 6px; }
.mini i { display: block; width: 24px; height: 3px; background: #B49A68; border-radius: 2px; margin-bottom: 6px; }
.images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.images img { width: 100%; border-radius: 6px; display: block; }
.legende { font-size: 13px; white-space: pre-wrap; background: var(--carte); border-radius: 10px; padding: 10px; margin: 8px 0; }
/* Questions et audit (Nina) */
.chiffres-audit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.chiffres-audit div { background: var(--carte); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.chiffres-audit strong { display: block; font: 600 18px/1.15 "Cormorant Garamond", Georgia, serif; }
.chiffres-audit span { font-size: 12px; color: var(--doux); }
.detail-audit { margin: 8px 0; font-size: 14px; }
.detail-audit summary { cursor: pointer; font-weight: 500; color: var(--accent-texte); }
.detail-audit h4 { margin: 10px 0 4px; font-size: 14px; }
.detail-audit ol { margin: 4px 0; padding-left: 22px; }
.detail-audit li { margin-bottom: 6px; overflow-wrap: anywhere; }
.detail-audit li small { display: block; color: var(--doux); font-size: 12px; }
.detail-audit .corps { max-height: none; }
.pastille { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--accent-texte); background: var(--accent-fond); border-radius: 6px; padding: 0 6px; }
.doc > .actions + .actions { margin-top: 6px; }
.poser { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.poser input { border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 8px; background: var(--carte); }

/* ---------- Calendrier ---------- */
.cal { max-width: 1300px; margin: 0 auto; }
.cal-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-tete h1 { font-size: 30px; margin-right: auto; text-transform: capitalize; }
.bascule { display: inline-flex; background: var(--carte); border-radius: 999px; padding: 3px; box-shadow: var(--ombre); }
.bascule button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 500; color: var(--doux); }
.bascule button[aria-pressed="true"] { background: var(--encre); color: var(--carte); }
.aide { color: var(--doux); font-size: 14px; margin: -6px 0 14px; }
.jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nom-jour { font-size: 13px; color: var(--doux); padding: 0 8px 4px; }
.case { background: var(--carte); border-radius: 14px; min-height: 120px; padding: 8px; display: flex; flex-direction: column; gap: 5px; border: 2px solid transparent; }
.semaine .case { min-height: 360px; }
.case.hors { opacity: .45; }
.case.auj { border-color: var(--accent); }
.case.survol { border-color: var(--encre); border-style: dashed; }
.case .num { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.case .num button { border: 0; background: none; color: var(--pale); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 6px; }
.case .num button:hover { color: var(--encre); background: var(--fond); }
.pub { background: var(--accent-fond); border-left: 3px solid var(--accent); border-radius: 8px; padding: 5px 8px; font-size: 13px; cursor: grab; text-align: left;
  border-top: 0; border-right: 0; border-bottom: 0; width: 100%; line-height: 1.3; }
.pub small { display: block; color: var(--doux); font-size: 11px; }
.pub.publie { background: var(--ok-fond); border-left-color: var(--ok); }
.pub.annule { opacity: .5; text-decoration: line-through; }
.pub.glisse { opacity: .4; }
.tache-cal { --s: var(--s-agents); background: var(--carte); border: 1px solid var(--pale); border-left: 3px solid var(--s); border-radius: 8px; font-size: 13px; width: 100%; line-height: 1.3; position: relative; color: inherit; }
.tache-cal .ouvrir-cal { display: block; width: 100%; padding: 5px 8px 5px 28px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.tache-cal .coche-cal { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.tache-cal .coche-cal::before { content: ""; position: absolute; left: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--s); }
.tache-cal .coche-cal:hover::before, .tache-cal .coche-cal:focus-visible::before { background: var(--s); }
.tache-cal .coche-cal:hover::after, .tache-cal .coche-cal:focus-visible::after { content: "✓"; position: absolute; left: 3px; top: 0; width: 11px; text-align: center; font-size: 10px; line-height: 17px; color: #fff; font-weight: 700; }
.tache-cal.s-sites { --s: var(--s-sites); } .tache-cal.s-app { --s: var(--s-app); } .tache-cal.s-marketing { --s: var(--s-marketing); } .tache-cal.s-admin { --s: var(--s-admin); }
.tache-cal small { display: block; color: var(--s); font-size: 11px; font-weight: 600; }

dialog { border: 0; border-radius: var(--r-grand); padding: 22px; width: min(440px, calc(100vw - 32px)); background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
dialog::backdrop { background: rgba(15, 21, 40, .35); }
dialog h2 { font-size: 22px; margin-bottom: 14px; }
dialog label { display: block; font-size: 13px; font-weight: 500; margin: 10px 0 4px; }
dialog input, dialog select, dialog textarea { width: 100%; border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; background: var(--fond); }
dialog .actions { margin-top: 18px; justify-content: flex-end; }

/* ---------- Mes tâches ---------- */
:root { --s-agents: #B49A68; --s-sites: #2F7D4F; --s-app: #3B6FD8; --s-marketing: #9B5DE5; --s-admin: #8A8FA0; }
:root[data-theme="dark"] { --s-agents: #C9AE7C; --s-sites: #7BD49C; --s-app: #8DB0FF; --s-marketing: #C9A4FF; --s-admin: #AEB4C6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --s-agents: #C9AE7C; --s-sites: #7BD49C; --s-app: #8DB0FF; --s-marketing: #C9A4FF; --s-admin: #AEB4C6; }
}
.kanban { max-width: 1300px; margin: 0 auto; }
.kanban .cal-tete h1 { text-transform: none; }
.filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.filtres button { border: 1px solid var(--ligne); background: var(--carte); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--doux); display: inline-flex; gap: 6px; align-items: center; }
.filtres button small { font-size: 12px; color: var(--pale); }
.filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--carte); }
.filtres button[aria-pressed="true"] small { color: inherit; opacity: .7; }
.colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* « Plus tard » : en retrait, pour que l'œil aille d'abord sur À faire et En cours. */
.colonne.c-plus_tard { opacity: .8; }
.colonne { background: color-mix(in srgb, var(--carte) 55%, transparent); border: 2px solid transparent; border-radius: var(--r-grand); padding: 12px; min-height: 240px; display: flex; flex-direction: column; gap: 8px; }
.colonne.survol { border-color: var(--encre); border-style: dashed; }
.tete-colonne { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.tete-colonne h2 { font-size: 19px; }
.compte-col { font-size: 12px; font-weight: 600; color: var(--doux); background: var(--carte); border-radius: 999px; padding: 1px 9px; }
.tete-colonne button { margin-left: auto; border: 0; background: none; color: var(--pale); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.tete-colonne button:hover { color: var(--encre); background: var(--carte); }
.cartes { display: flex; flex-direction: column; gap: 8px; }
.tache { --s: var(--s-agents); display: flex; align-items: flex-start; gap: 10px; background: var(--carte); border-radius: 14px; padding: 10px 12px; box-shadow: var(--ombre);
  border-left: 4px solid var(--s); cursor: grab; }
.tache.s-sites { --s: var(--s-sites); } .tache.s-app { --s: var(--s-app); } .tache.s-marketing { --s: var(--s-marketing); } .tache.s-admin { --s: var(--s-admin); }
.tache.glisse { opacity: .4; }
.tache .coche { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--pale); background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.tache .coche:hover { border-color: var(--ok); }
.tache.faite .coche { background: var(--ok); border-color: var(--ok); }
.tache.faite .coche::after { content: ""; width: 5px; height: 9px; border: solid var(--carte); border-width: 0 2px 2px 0; transform: translate(0, -1px) rotate(45deg); }
.tache .ouvrir { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.tache .titre { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.tache.faite .titre { color: var(--doux); text-decoration: line-through; text-decoration-color: var(--pale); }
.tache small { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--doux); }
.tache .sujet { color: var(--s); font-weight: 600; }
.tache .retard { color: var(--erreur); font-weight: 600; }
.dlg-tache { width: min(520px, calc(100vw - 32px)); }
.dlg-tache .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Tableau de bord ---------- */
.tdb { max-width: 1180px; margin: 0 auto; }
.tdb h1 { font-size: 30px; margin-bottom: 4px; }
.tdb > p { color: var(--doux); margin: 0 0 20px; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.chiffre { background: var(--carte); border-radius: var(--r-grand); padding: 18px; box-shadow: var(--ombre); text-decoration: none; }
.chiffre strong { display: block; font: 600 34px/1.1 "Cormorant Garamond", Georgia, serif; }
.chiffre span { color: var(--doux); font-size: 14px; }
.tdb h2 { font-size: 22px; margin: 0 0 12px; }
.chiffre.alerte { background: var(--alerte-fond); }
.chiffre.alerte strong, .chiffre.alerte span { color: var(--alerte); }
/* Ton équipe : seulement les assistants choisis. */
.equipe-tdb { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.membre { display: flex; align-items: center; gap: 12px; background: var(--carte); border-radius: var(--r-grand); padding: 12px 16px; box-shadow: var(--ombre);
  text-decoration: none; border: 1px solid transparent; }
.membre:hover { border-color: var(--ligne); }
.membre .avatar.image img { transform: scale(2.3); transform-origin: 50% 20%; }
.membre .qui { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.membre .qui strong { font: 600 17px/1.2 "Cormorant Garamond", Georgia, serif; }
.membre .qui span { font-size: 13px; color: var(--accent-texte); font-weight: 500; }
.membre .nb { font-size: 12px; color: var(--doux); background: var(--fond); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.export { margin: 0 0 24px; padding: 18px; border: 1px solid var(--ligne); border-radius: var(--r-grand); background: var(--carte); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tdb .equipe-tdb + h2 { margin-top: 28px; }
.export.cle { flex-direction: column; align-items: stretch; }
/* Le texte du cadre « export » s'étire en largeur ; ici le cadre est en colonne : il ne doit pas s'étirer en hauteur. */
.export.cle p { margin: 0; flex: none; }
.export.cle .alerte-cle { color: var(--alerte); font-weight: 500; }
.actions-cle { display: flex; flex-wrap: wrap; gap: 10px; }
.form-cle { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.form-cle[hidden] { display: none; }
.form-cle label { font-size: 13px; font-weight: 500; }
.form-cle input { width: 100%; border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; background: var(--fond); font-family: ui-monospace, Consolas, monospace; }
.form-cle small { font-size: 12px; color: var(--doux); }
.form-cle .actions-cle { margin-top: 4px; }
.export.cle .erreur-cle { color: var(--erreur); font-size: 14px; }

/* ---------- Réglages ---------- */
.reglages { max-width: 900px; }
.reglages .bloc { background: var(--carte); border-radius: var(--r-grand); box-shadow: var(--ombre); padding: 20px; margin-bottom: 16px; }
.reglages .bloc h2 { font-size: 20px; margin-bottom: 10px; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 4px 16px; }
.champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.champ label, .logo-reglages label { font-size: 13px; font-weight: 500; }
.champ small, .logo-reglages small { font-size: 12px; color: var(--doux); }
.champ input, .champ textarea { width: 100%; border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 10px; background: var(--fond); }
.champ textarea { resize: vertical; line-height: 1.5; font-size: 14px; }
.champ input[type="color"] { height: 42px; padding: 3px; cursor: pointer; }
.logo-reglages { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--ligne); }
.logo-reglages > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.logo-reglages input[type="file"] { max-width: 100%; font-size: 13px; }
.apercu-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; background: var(--fond); padding: 6px; flex: none; }
.aide-bloc { font-size: 14px; color: var(--doux); margin: 0 0 10px; }
.cases-assistants { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.case-assistant { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 12px; cursor: pointer; font-size: 14px; }
.case-assistant:has(input:checked) { border-color: var(--accent); background: var(--accent-fond); }
.case-assistant input { margin-top: 4px; accent-color: var(--accent); }
.case-assistant small { display: block; font-size: 12px; color: var(--doux); }
.barre-enregistrer { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  background: var(--carte); border-radius: 999px; box-shadow: var(--ombre); padding: 8px 8px 8px 18px; }
.message-reglages { margin: 0 auto 0 0; color: var(--erreur); font-size: 14px; }
.message-reglages:empty { display: none; }
.export p { margin: 0; flex: 1 1 320px; color: var(--doux); }
a.chiffre { color: inherit; transition: transform .15s, box-shadow .15s; }
a.chiffre:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(23, 37, 54, .12); }
a.chiffre:hover span { color: var(--encre); }

/* ---------- Documents de toute l'équipe ---------- */
.tdb .retour { margin: 0 0 8px; font-size: 14px; }
.tdb .retour a { color: var(--doux); text-decoration: none; }
.tdb .retour a:hover { color: var(--encre); }
.onglets.etats { padding: 0; margin-bottom: 18px; flex-wrap: wrap; }
.onglets.etats a { padding: 6px 12px; border-radius: 999px; color: var(--doux); font-size: 14px; font-weight: 500; text-decoration: none; }
.onglets.etats a:hover { color: var(--encre); }
.onglets.etats a[aria-current="page"] { background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
.docs-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.doc-equipe { min-width: 0; }
.doc-equipe .qui { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 4px; font-size: 14px; font-weight: 500; }
.doc-equipe .qui .avatar { width: 32px; height: 32px; font-size: 15px; }
.doc-equipe .qui .avatar.image img { transform: scale(2.3); transform-origin: 50% 20%; }
.doc-equipe .qui a { margin-left: auto; font-weight: 400; color: var(--accent-texte); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--encre); color: var(--carte);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 10; }
.toast.visible { opacity: 1; transform: translateX(-50%); }

/* ---------- Petits écrans ---------- */
@media (max-width: 1100px) {
  .espace { grid-template-columns: 220px minmax(0, 1fr); height: auto; }
  .espace .panneau.documents { grid-column: 1 / -1; }
  .espace .panneau.discussion { height: 70vh; }
}
@media (max-width: 900px) {
  .colonnes { grid-template-columns: 1fr; }
  .colonne { min-height: 0; }
}
@media (max-width: 720px) {
  .barre { flex-wrap: wrap; gap: 10px; }
  .barre nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .chef { grid-template-columns: 1fr; text-align: center; }
  .chef .avatar { margin: 0 auto; width: 110px; height: 110px; }
  .saisie-chef { flex-direction: column; }
  .saisie-chef textarea { min-height: 72px; }
  .espace { grid-template-columns: 1fr; }
  .jours { grid-template-columns: 1fr; }
  .nom-jour { display: none; }
  .case { min-height: 0; }
  .case.hors { display: none; }
}

/* ---------- Connexion (version en ligne) ---------- */
.compte { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--doux); white-space: nowrap; }
.connexion { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; }
.connexion .marque { font-size: 24px; }
.carte-connexion { width: 100%; max-width: 400px; background: var(--carte); border-radius: var(--r-grand); box-shadow: var(--ombre);
  padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.carte-connexion h1 { font-size: 30px; }
.carte-connexion .sous { color: var(--doux); margin: 0 0 12px; }
.carte-connexion label { font-weight: 500; font-size: 14px; margin-top: 8px; }
.carte-connexion input { width: 100%; border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 12px; background: var(--fond); }
.carte-connexion .btn { justify-content: center; margin-top: 12px; padding: 11px 16px; }
.carte-connexion .aide { font-size: 13px; color: var(--pale); margin: 4px 0 0; }
.carte-connexion .message { color: var(--erreur); font-size: 14px; margin: 6px 0 0; min-height: 0; }
.carte-connexion .message:empty { display: none; }
.pub-crayon { float: right; margin-left: 6px; padding: 0 5px; border-radius: 6px; color: var(--doux); font-size: 14px; cursor: pointer; line-height: 1.3; }
.pub-crayon:hover, .pub-crayon:focus-visible { background: #1725361f; color: inherit; }
.pub { position: relative; padding-left: 28px; }
.pub-rond { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; }
.pub-rond::before { content: ""; position: absolute; left: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent); }
.pub.publie .pub-rond::before { background: var(--ok); border-color: var(--ok); }
.pub-rond:hover::before, .pub-rond:focus-visible::before { background: var(--accent); }
.pub.publie .pub-rond:hover::before { background: var(--doux); border-color: var(--doux); }
.pub-rond:hover::after, .pub.publie .pub-rond::after { content: "✓"; position: absolute; left: 3px; top: 0; width: 11px; text-align: center; font-size: 10px; line-height: 17px; color: #fff; font-weight: 700; }
.pub { padding-right: 26px; }
.pub .pub-crayon { position: absolute; right: 4px; top: 4px; float: none; margin: 0; }
.tache-cal .ouvrir-cal { padding-right: 30px; }
.tache-cal .report-cal { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; padding: 0; border: 1.5px solid #c3cad7; border-radius: 50%; background: none; color: var(--doux); font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.tache-cal .report-cal:hover, .tache-cal .report-cal:focus-visible { background: var(--encre); border-color: var(--encre); color: #fff; }
.report-choix { display: grid; gap: 8px; margin: 12px 0 4px; }
.report-choix .btn { display: flex; justify-content: space-between; align-items: center; text-align: left; }
.report-choix .btn small { color: var(--doux); font-size: 12px; }