/* Fêt'Arts : interface moderne et calme, pensée d'abord pour le téléphone (360 px) et pour une personne peu habituée à l'informatique.
   Gros boutons (48 px minimum), textes de 17 px et plus, une seule action principale par écran.
   Couleurs de la charte réservées au sens : bleu #0000CC = action, rouge = retard/manque, vert = prêt/fait, jaune = repère de date.
   Menu en bas sur mobile (avec l'assistant au centre), menu latéral dès 900 px. */
:root {
  --bleu:#0000cc; --bleu-fonce:#00009a; --bleu-pale:#eef0ff; --bleu-voile:#f6f7ff;
  --rouge:#d70512; --rouge-pale:#fdecee;
  --jaune:#ffe600; --jaune-pale:#fff9d6; --jaune-texte:#6b5300;
  --vert:#0a7d2c; --vert-pale:#e6f5eb;
  --violet:#6a3fc8; --violet-pale:#f1ecfd;
  --sarcelle:#0b7285; --sarcelle-pale:#e3f6f8;
  --orange:#b54708; --orange-pale:#fff1e6;
  --texte:#16161d; --gris:#5f6070; --gris-clair:#9a9bab; --bord:#e6e7ee; --fond:#f4f5fa; --blanc:#fff;
  --rayon:16px; --rayon-petit:12px;
  --ombre:0 1px 2px rgba(22,22,40,.05), 0 4px 16px rgba(22,22,40,.05);
  --ombre-forte:0 10px 30px rgba(0,0,90,.18);
  --menu:250px; --nav-h:60px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
html, body { margin:0; background:var(--fond); color:var(--texte); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
body { overflow-x:hidden; }
a { color:var(--bleu); }
h2 { font-size:14px; margin:22px 2px 8px; color:var(--gris); font-weight:650; letter-spacing:.02em; }
button { font:inherit; cursor:pointer; color:inherit; }
button:disabled { opacity:.55; cursor:default; }
:focus-visible { outline:3px solid var(--bleu); outline-offset:2px; }
[hidden] { display:none !important; }
.ico { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Structure ---------- */
.app { min-height:100vh; min-height:100dvh; }
.corps { min-width:0; padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.barre { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); background:rgba(244,245,250,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.barre img { height:30px; width:auto; }
.barre h1 { margin:0; font-size:18px; font-weight:750; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sortir { color:var(--gris); font-size:14px; text-decoration:none; padding:8px 4px; }
main { padding:4px 16px 16px; max-width:1180px; margin:0 auto; }
.etroit { max-width:640px; margin:0 auto; }

/* ---------- Menu du bas (mobile) ---------- */
.menu .marque, .menu .moi, nav .long { display:none; }
nav { position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; align-items:flex-end; height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom); background:var(--blanc); border-top:1px solid var(--bord); box-shadow:0 -4px 20px rgba(22,22,40,.05); }
nav button { flex:1; min-width:0; height:var(--nav-h); background:none; border:0; padding:8px 2px 10px; font-size:12px; font-weight:600; color:var(--gris); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
nav button .ico { width:24px; height:24px; }
nav button.actif { color:var(--bleu); }
nav button.actif .ico { stroke-width:2.4; }
nav button.central .ico { width:26px; height:26px; padding:10px; box-sizing:content-box; border-radius:50%; background:var(--bleu); color:#fff; margin-top:-24px; box-shadow:var(--ombre-forte); border:4px solid var(--blanc); }
nav button.central.actif { color:var(--bleu); }

/* ---------- Boutons ---------- */
.bouton, button.gros, a.gros {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 16px;
  border-radius:var(--rayon-petit); border:1.5px solid var(--bord); background:var(--blanc); color:var(--texte);
  font-size:15px; font-weight:600; text-decoration:none; text-align:center; line-height:1.25; transition:transform .1s, background .15s, border-color .15s;
}
.bouton:active, button.gros:active { transform:scale(.98); }
.bouton:hover { border-color:#c9cbe0; }
.bouton.principal, button.gros, a.gros { background:var(--bleu); border-color:var(--bleu); color:#fff; }
.bouton.principal:hover, button.gros:hover { background:var(--bleu-fonce); border-color:var(--bleu-fonce); }
button.gros, a.gros, .bouton.large { display:flex; width:100%; margin:12px 0; }
button.gros.clair, a.gros.clair { background:var(--blanc); color:var(--bleu); border-color:var(--bleu); }
.bouton.tres-gros { min-height:52px; font-size:16px; border-radius:var(--rayon-petit); }
.bouton.tres-gros .ico { width:22px; height:22px; }
.rond { flex:none; width:42px; height:42px; border-radius:50%; border:0; background:var(--bleu-voile); color:var(--bleu); display:inline-flex; align-items:center; justify-content:center; }
.rond.principal { background:var(--bleu); color:#fff; }
.rond.micro.ecoute { background:var(--rouge); color:#fff; animation:pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(215,5,18,.45); } 100% { box-shadow:0 0 0 14px rgba(215,5,18,0); } }
button.retour { display:inline-flex; align-items:center; gap:4px; background:none; border:0; color:var(--bleu); font-size:15px; font-weight:600; padding:8px 0; margin-bottom:2px; min-height:40px; }
.bouton-lien { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; border-radius:12px; border:1.5px solid var(--bleu); background:var(--blanc); color:var(--bleu); text-decoration:none; font-weight:600; font-size:15px; }
.petit-bouton { background:var(--blanc); color:var(--bleu); border:1.5px solid var(--bleu); border-radius:12px; min-height:40px; padding:6px 14px; font-size:15px; font-weight:600; flex:none; }
.petit-bouton.plein { background:var(--bleu); color:#fff; }
.raccourcis { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin:10px 0; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.actions .bouton { flex:1; min-width:130px; }

/* ---------- Cartes, pastilles ---------- */
.carte { background:var(--blanc); border:1px solid var(--bord); border-radius:var(--rayon); padding:14px; margin-bottom:10px; box-shadow:var(--ombre); }
.carte.cliquable { cursor:pointer; transition:border-color .15s, transform .1s; }
.carte.cliquable:hover { border-color:#c4c7ee; }
.carte.cliquable:active { transform:scale(.99); }
.carte.actif { border-color:var(--bleu); box-shadow:0 0 0 2px var(--bleu); }
.carte.retard { box-shadow:inset 5px 0 0 var(--rouge), var(--ombre); }
.carte.calme { color:var(--gris); text-align:center; box-shadow:none; background:transparent; border-style:dashed; }
.titre { font-weight:650; font-size:16px; line-height:1.35; }
.petit { color:var(--gris); font-size:14px; }
.etiquette { color:var(--gris); font-size:13px; font-weight:650; margin-bottom:4px; }
.vide { text-align:center; color:var(--gris); padding:24px 8px; }
.pointille { border-style:dashed; box-shadow:none; background:var(--blanc); }
.erreur { color:var(--rouge); font-weight:600; }
.date, .badge, .echeance { display:inline-flex; align-items:center; border-radius:999px; padding:1px 10px; font-size:13px; font-weight:650; line-height:1.5; white-space:nowrap; }
.date { background:var(--jaune-pale); color:var(--jaune-texte); }
.date.retard { background:var(--rouge-pale); color:var(--rouge); }
.badge { background:var(--bleu-pale); color:var(--bleu); }
.badge.etat { background:#f0f1f6; color:var(--texte); }
.badge.etat.ok, .badge.ok { background:var(--vert-pale); color:var(--vert); }
.badge.etat.gris { background:#eeeef2; color:var(--gris); }
.badge.manque { background:var(--rouge-pale); color:var(--rouge); }
.badge.verifier { background:var(--jaune-pale); color:var(--jaune-texte); }
.badge.type-dossier { background:var(--bleu-pale); color:var(--bleu); }
.badge.type-suivi { background:var(--sarcelle-pale); color:var(--sarcelle); }
.badge.type-evenement { background:var(--orange-pale); color:var(--orange); }
.badge.type-partenariat { background:var(--violet-pale); color:var(--violet); }
.echeance { background:#f0f1f6; color:var(--gris); }
.echeance.urgent { background:var(--jaune-pale); color:var(--jaune-texte); }
.echeance.retard { background:var(--rouge-pale); color:var(--rouge); }
.compte { display:inline-block; min-width:22px; padding:0 7px; margin-left:4px; border-radius:999px; background:rgba(22,22,40,.07); color:inherit; font-size:13px; font-weight:700; text-align:center; }
.compte.rouge { background:var(--rouge); color:#fff; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--bleu-pale); color:var(--bleu); font-size:14px; font-weight:750; }
.ligne { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.ligne.haut { justify-content:space-between; align-items:flex-start; flex-wrap:nowrap; gap:10px; }
.coupe { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Formulaires ---------- */
textarea, input[type=text], input[type=password], input[type=date], input[type=search], input[type=file], select {
  width:100%; font:inherit; font-size:16px; min-height:44px; padding:9px 12px; border:1.5px solid var(--bord); border-radius:var(--rayon-petit); background:var(--blanc); color:var(--texte);
}
textarea { resize:vertical; line-height:1.45; }
textarea:focus, input:focus, select:focus { outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-pale); }
label { display:block; font-weight:600; font-size:15px; margin:14px 2px 5px; }
.formulaire label:first-child { margin-top:2px; }
.pied-formulaire { display:grid; grid-template-columns:2fr 1fr; gap:10px; margin-top:20px; }
.champ-dicte { display:flex; gap:8px; align-items:flex-start; }
.champ-dicte textarea { flex:1; min-width:0; }
.choix-deux { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choix-deux button { min-height:46px; border:1.5px solid var(--bord); background:var(--blanc); border-radius:var(--rayon-petit); font-size:16px; font-weight:650; }
.choix-deux button.actif { border-color:var(--bleu); background:var(--bleu-pale); color:var(--bleu); }
.plus-reglages { margin-top:16px; }
.plus-reglages summary { color:var(--bleu); font-weight:600; cursor:pointer; min-height:44px; display:flex; align-items:center; }
.plus-reglages select { margin-top:6px; }
.filtres { display:flex; gap:8px; overflow-x:auto; margin:0 -16px 12px; padding:2px 16px 4px; scrollbar-width:none; }
.filtres::-webkit-scrollbar { display:none; }
.filtres button { flex:none; min-height:36px; border:1.5px solid var(--bord); background:var(--blanc); border-radius:999px; padding:5px 14px; font-size:14px; font-weight:600; }
.filtres button.actif { background:var(--texte); border-color:var(--texte); color:#fff; }
.segments { display:flex; background:#e9eaf2; border-radius:var(--rayon-petit); padding:4px; margin-bottom:10px; }
.segments button { flex:1; min-height:38px; border:0; background:none; border-radius:11px; font-size:15px; font-weight:650; color:var(--gris); }
.segments button.actif { background:var(--blanc); color:var(--texte); box-shadow:var(--ombre); }
.recherche { border-radius:999px !important; margin-bottom:10px; padding-left:18px !important; }

/* ---------- Message en bas d'écran ---------- */
#toast { position:fixed; left:12px; right:12px; bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); background:#1d1d2b; color:#fff; padding:12px 14px; border-radius:var(--rayon-petit); display:none; z-index:20; align-items:center; justify-content:space-between; gap:12px; font-size:15px; box-shadow:var(--ombre-forte); }
.toast-annuler { flex:none; background:none; border:1.5px solid rgba(255,255,255,.7); color:#fff; border-radius:999px; min-height:34px; padding:4px 16px; font-size:15px; font-weight:650; }

/* ---------- Accueil ---------- */
.bonjour { padding:6px 0 4px; }
.bonjour-nom { font-size:24px; font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.bonjour-date { color:var(--gris); font-size:15px; margin:2px 0 14px; }
.bonjour .bouton.tres-gros { width:100%; }
.afaire { display:flex; align-items:center; gap:10px; background:var(--blanc); border:1px solid var(--bord); border-radius:var(--rayon); padding:12px 12px 12px 16px; margin-bottom:10px; box-shadow:var(--ombre); transition:opacity .35s, transform .35s; }
.afaire.retard { box-shadow:inset 6px 0 0 var(--rouge), var(--ombre); }
.afaire.jour { box-shadow:inset 6px 0 0 var(--jaune), var(--ombre); }
.afaire.semaine { box-shadow:inset 6px 0 0 #b9bcf2, var(--ombre); }
.afaire.retard .petit { color:var(--rouge); font-weight:600; }
.afaire.termine { opacity:0; transform:translateX(30px); }
.afaire-texte { flex:1; min-width:0; }
.afaire-texte.cliquable { cursor:pointer; }
.fait-btn { flex:none; min-height:40px; padding:6px 12px; font-size:14px; color:var(--vert); border-color:#bfe3cb; background:var(--vert-pale); }
.fait-btn .ico { width:20px; height:20px; }
.deux { display:grid; gap:0 28px; }

/* ---------- Projets : liste et fiche ---------- */
.split .detail .vide-detail { display:none; }
.split.fiche .liste { display:none; }
.split:not(.fiche) .detail { display:none; }
.carte.projet .ligne { margin:8px 0 2px; }
.carte.projet .coupe { margin-top:6px; }
.progres { margin-top:10px; }
.progres-fond { height:8px; border-radius:999px; background:#ececf3; overflow:hidden; margin-bottom:4px; }
.progres-rempli { height:100%; border-radius:999px; background:var(--bleu); transition:width .3s; }
.progres-rempli.complet { background:var(--vert); }
.hero { padding:0 2px 6px; }
.hero-titre { margin:2px 0 10px; font-size:22px; font-weight:800; color:var(--texte); letter-spacing:-.01em; line-height:1.2; }
.resp { display:inline-flex; align-items:center; gap:6px; margin-top:10px; }
.onglets { display:flex; gap:6px; overflow-x:auto; margin:10px -16px 14px; padding:4px 16px; scrollbar-width:none; }
.onglets::-webkit-scrollbar { display:none; }
.onglets button { flex:none; min-height:38px; background:var(--blanc); border:1.5px solid var(--bord); border-radius:999px; padding:5px 14px; font-size:14px; font-weight:650; color:var(--gris); }
.onglets button.actif { background:var(--bleu); border-color:var(--bleu); color:#fff; }
.onglets button.actif .compte { background:rgba(255,255,255,.25); }
.onglet-corps h2:first-child { margin-top:4px; }
.etape { background:var(--bleu); color:#fff; border-radius:var(--rayon); padding:14px 16px; margin-bottom:12px; box-shadow:var(--ombre-forte); }
.etape-titre { font-size:13px; font-weight:650; opacity:.85; margin-bottom:4px; }
.etape-texte { font-size:18px; font-weight:750; line-height:1.3; }
.etape-date { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; font-size:15px; font-weight:600; }
.etape-date .echeance { background:rgba(255,255,255,.2); color:#fff; }
.etape-date .echeance.retard { background:var(--rouge); }
.etape.vide-etape { background:var(--blanc); color:var(--gris); border:1.5px dashed var(--bord); box-shadow:none; }
.etape.vide-etape .etape-texte { font-size:17px; font-weight:600; }
.ok-carte { color:var(--vert); font-weight:650; background:var(--vert-pale); border-color:transparent; box-shadow:none; }
.check { display:flex; align-items:center; gap:12px; background:var(--blanc); border:1px solid var(--bord); border-radius:var(--rayon-petit); padding:12px 14px; margin-bottom:8px; }
.check .case { flex:none; width:26px; height:26px; border-radius:8px; border:2px solid var(--rouge); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
.check.fait .case { background:var(--vert); border-color:var(--vert); }
.check .texte { flex:1; min-width:0; overflow-wrap:anywhere; }
.etat-select { flex:none; width:auto; max-width:132px; min-height:34px; padding:6px 10px; font-size:14px; font-weight:650; border-radius:999px; border:0; }
.etat-select.manque { background:var(--rouge-pale); color:var(--rouge); }
.etat-select.ok { background:var(--vert-pale); color:var(--vert); }
.etat-select.verifier { background:var(--jaune-pale); color:var(--jaune-texte); }
.frise { border-left:2px solid var(--bord); margin:4px 0 8px 8px; padding-left:20px; }
.frise-ligne { position:relative; padding-bottom:18px; overflow-wrap:anywhere; }
.frise-ligne::before { content:""; position:absolute; left:-28px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--blanc); border:3px solid var(--bleu); }
.lien-doc { font-size:15px; }

/* ---------- Nouveau projet : choix du type ---------- */
.cases-type { display:grid; gap:10px; grid-template-columns:1fr; }
.case-type { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:var(--blanc); border:2px solid var(--bord); border-radius:var(--rayon); padding:12px 14px; box-shadow:var(--ombre); }
.case-titre { font-size:16px; font-weight:750; }
.case-aide { color:var(--gris); font-size:14px; }
.case-type.actif { border-color:currentColor; }
.case-type.type-dossier.actif { color:var(--bleu); background:var(--bleu-voile); }
.case-type.type-suivi.actif { color:var(--sarcelle); background:var(--sarcelle-pale); }
.case-type.type-evenement.actif { color:var(--orange); background:var(--orange-pale); }
.case-type.type-partenariat.actif { color:var(--violet); background:var(--violet-pale); }
.suite-projet { margin-top:14px; }

/* ---------- Assistant ---------- */
.assistant { max-width:760px; margin:0 auto; }
.accueil-ia { padding:8px 2px 4px; }
.accueil-ia .petit { font-size:16px; margin:6px 0 14px; }
.accueil-ia .bouton { width:100%; margin-bottom:12px; }
.suggestions { display:flex; flex-direction:column; gap:8px; }
.suggestion { text-align:left; min-height:44px; background:var(--blanc); color:var(--texte); border:1.5px solid var(--bord); border-radius:var(--rayon-petit); padding:9px 14px; font-size:15px; font-weight:500; }
.suggestion:hover { border-color:var(--bleu); color:var(--bleu); }
.chat { margin:8px 0; }
.bulle { padding:10px 14px; border-radius:18px; margin:8px 0; max-width:88%; white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; }
.bulle.moi { background:var(--bleu); color:#fff; margin-left:auto; border-bottom-right-radius:6px; }
.bulle.ia { background:var(--blanc); border:1px solid var(--bord); border-bottom-left-radius:6px; box-shadow:var(--ombre); }
.zone-saisie { position:sticky; bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); background:var(--blanc); border:1.5px solid var(--bord); border-radius:28px; padding:6px; margin:14px 0 0; box-shadow:var(--ombre-forte); z-index:4; }
.zone-saisie:focus-within { border-color:var(--bleu); }
.saisie-ligne { display:flex; align-items:flex-end; gap:6px; }
.saisie-ligne textarea { flex:1; min-width:0; border:0; scrollbar-width:none; box-shadow:none !important; min-height:42px; max-height:160px; padding:9px 6px; resize:none; background:transparent; }
.sous-saisie { margin-top:10px; }
.sous-saisie .bouton { width:100%; }
.puce-pdf { display:flex; align-items:center; gap:8px; background:var(--bleu-pale); color:var(--bleu); border-radius:999px; padding:4px 6px 4px 14px; margin:4px 4px 6px; font-weight:600; width:fit-content; max-width:100%; font-size:15px; }
.puce-pdf .retirer { width:32px; height:32px; }

/* ---------- Propositions de l'assistant (à valider) ---------- */
.propositions { max-width:94%; margin:6px 0 14px; }
.propositions-titre { font-size:14px; font-weight:700; color:var(--bleu); margin:2px 2px 8px; }
.proposition { background:var(--blanc); border:1.5px solid var(--bleu); border-radius:var(--rayon); padding:12px; margin-bottom:10px; box-shadow:var(--ombre); }
.proposition.valide { background:var(--vert-pale); border-color:transparent; box-shadow:none; }
.proposition.refuse { background:#f0f0f4; border-color:transparent; color:var(--gris); box-shadow:none; }
.proposition.refuse .proposition-texte { text-decoration:line-through; }
.proposition.erreur-prop { background:var(--rouge-pale); border-color:transparent; }
.proposition-texte { white-space:pre-wrap; overflow-wrap:anywhere; }
.proposition-actions { display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.proposition-actions .bouton { flex:1; min-width:110px; }
.proposition.valide .proposition-actions .bouton, .proposition.refuse .proposition-actions .bouton { flex:none; min-height:44px; }
.propositions.rapprochement { max-width:none; }
.indice { background:var(--jaune-pale); border-radius:var(--rayon-petit); padding:10px 14px; margin:6px 0; font-size:15px; }

/* ---------- Idées et tâches ---------- */
.coche { display:flex; gap:12px; align-items:flex-start; }
.coche input[type=checkbox] { width:24px; height:24px; margin:0; flex:none; accent-color:var(--vert); }
.coche.fait .texte { color:var(--gris); }
.carte-retirable { position:relative; display:flex; gap:12px; align-items:flex-start; }
.carte-retirable .texte { flex:1; min-width:0; }
.retirer { flex:none; width:36px; height:36px; border-radius:50%; border:0; background:none; color:var(--gris-clair); font-size:17px; line-height:1; }
.retirer:hover, .retirer:focus-visible { background:var(--rouge-pale); color:var(--rouge); }
.lignes { max-width:900px; }
.ligne-tache { align-items:center; padding:10px 10px 10px 14px; margin-bottom:8px; }
.ligne-tache .texte { flex:1; min-width:0; overflow-wrap:anywhere; }
.ligne-tache .quand { flex:none; white-space:nowrap; margin-top:6px; }
.ligne-tache.fait .titre { text-decoration:line-through; color:var(--gris); }

/* ---------- Documents et import ---------- */
.ligne-doc { display:flex; align-items:center; gap:12px; }
.ligne-doc .texte { flex:1; min-width:0; overflow-wrap:anywhere; }
.carte.detection { background:var(--bleu-pale); border-color:transparent; box-shadow:none; margin-top:10px; }
.carte.alerte { background:var(--rouge-pale); border-color:transparent; color:var(--rouge); font-weight:600; margin-top:10px; }
.creer-type { margin-top:8px; flex-wrap:nowrap; }
.creer-type input { flex:1; min-width:0; }

/* ---------- Connexion ---------- */
.connexion { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; }
.connexion .boite { background:var(--blanc); border:1px solid var(--bord); border-radius:28px; padding:30px 22px; width:100%; max-width:420px; box-shadow:var(--ombre-forte); }
.connexion .logo { display:block; height:88px; margin:0 auto 10px; }
.connexion h1 { text-align:center; font-size:22px; font-weight:800; margin:0 0 10px; }
.connexion button.gros { min-height:48px; font-size:16px; margin-top:20px; }

/* ---------- Très petits écrans ---------- */
@media (max-width:370px) {
  html, body { font-size:15px; }
  nav button { font-size:11px; }
  .fait-btn { padding:8px 10px; }
  .bonjour-nom { font-size:22px; }
}

/* ---------- Ordinateur ---------- */
@media (min-width:900px) {
  .app { display:grid; grid-template-columns:var(--menu) 1fr; }
  .menu { position:sticky; top:0; height:100vh; background:var(--blanc); border-right:1px solid var(--bord); display:flex; flex-direction:column; padding:22px 14px; }
  .menu .marque { display:flex; align-items:center; gap:12px; padding:0 10px 26px; font-weight:800; font-size:20px; }
  .menu .marque img { height:44px; }
  nav { position:static; height:auto; flex-direction:column; align-items:stretch; background:none; border:0; box-shadow:none; padding:0; gap:4px; }
  nav .court { display:none; }
  nav .long { display:inline; }
  nav button { height:auto; flex:none; flex-direction:row; justify-content:flex-start; gap:12px; font-size:16px; padding:12px 14px; color:var(--texte); border-radius:12px; }
  nav button .ico { width:22px; height:22px; }
  nav button:hover { background:var(--fond); }
  nav button.actif { background:var(--bleu-pale); color:var(--bleu); }
  nav button.central .ico { width:22px; height:22px; padding:0; margin:0; background:none; color:inherit; border:0; box-shadow:none; }
  .menu .moi { display:flex; flex-direction:column; gap:6px; margin-top:auto; padding:14px 10px 0; border-top:1px solid var(--bord); font-size:15px; color:var(--gris); }
  .barre { background:none; backdrop-filter:none; padding:26px 32px 4px; position:static; }
  .barre img, .barre .sortir { display:none; }
  .barre h1 { font-size:15px; color:var(--gris); font-weight:650; }
  .corps { padding-bottom:40px; }
  main { padding:8px 32px 24px; }
  #toast { left:calc(var(--menu) + 32px); right:auto; max-width:520px; bottom:24px; }
  .deux { grid-template-columns:3fr 2fr; align-items:start; }
  .bonjour { display:grid; grid-template-columns:1fr auto; align-items:end; gap:0 20px; margin-bottom:8px; }
  .bonjour .bonjour-date { margin-bottom:0; }
  .bonjour .bouton.tres-gros { grid-row:1 / span 2; grid-column:2; width:auto; padding:0 28px; }
  .bonjour .raccourcis { grid-column:1 / -1; grid-template-columns:repeat(2, max-content); }
  .split { display:grid; grid-template-columns:minmax(320px, 400px) 1fr; gap:28px; align-items:start; }
  .split.fiche .liste, .split:not(.fiche) .detail { display:block; }
  .split .liste { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto; padding:2px 6px 2px 2px; }
  .split .liste .filtres, .split .liste .onglets { margin-left:0; margin-right:0; padding-left:0; padding-right:0; flex-wrap:wrap; }
  .split .detail .retour { display:none; }
  .split .detail .vide-detail { display:block; }
  .onglets { margin-left:0; margin-right:0; padding-left:0; }
  .filtres { margin-left:0; margin-right:0; padding-left:0; }
  .cases-type { grid-template-columns:1fr 1fr; }
  .zone-saisie { bottom:16px; }
  .ligne-tache .texte { display:flex; align-items:baseline; gap:16px; }
  .ligne-tache .texte .titre { flex:1; min-width:0; }
  .ligne-tache .texte .petit { flex:none; max-width:36%; text-align:right; }
}

/* ---------- Courrier (secrétaire) ---------- */
@media (max-width:899px) { nav .pc-seulement { display:none; } }
@media (min-width:900px) { .mobile-seulement { display:none !important; } }
.bouton.courrier-rappel { width:100%; margin-top:10px; background:var(--jaune-pale); border-color:#f0dc7a; color:var(--jaune-texte); }
.courrier-haut { margin-bottom:6px; }
.courrier-haut .bouton.tres-gros { width:100%; margin-bottom:10px; }
.courrier-haut > .bouton:not(.tres-gros) { width:100%; margin-bottom:10px; }
.avancement { font-weight:650; color:var(--bleu); min-height:0; margin-bottom:6px; }
.avancement:empty { display:none; }
.carte.courrier { transition:opacity .35s, transform .35s; }
.carte.courrier.termine { opacity:0; transform:translateX(30px); }
.carte.courrier.traite { box-shadow:none; }
.courrier-tete { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.courrier-sens { font-size:13px; font-weight:700; color:var(--sarcelle); }
.courrier-sens.envoye { color:var(--violet); }
.courrier-qui { font-weight:650; flex:1; min-width:0; overflow-wrap:anywhere; }
.courrier-date { color:var(--gris); font-size:14px; white-space:nowrap; }
.courrier-resume { background:var(--bleu-voile); border-radius:var(--rayon-petit); padding:9px 12px; margin:8px 0 4px; font-size:15px; }
.lien-projet { display:inline-flex; align-items:center; gap:6px; text-align:left; max-width:100%; min-height:34px; margin-top:8px; padding:3px 12px; border-radius:999px; border:1.5px solid var(--bord); background:var(--blanc); color:var(--bleu); font-size:14px; font-weight:650; }
.lien-projet .ico { width:18px; height:18px; }
.courrier-props { max-width:none; margin:12px 0 0; }
.courrier-props .proposition { box-shadow:none; }
.deja-vus { margin-top:22px; }
.deja-vus summary { color:var(--gris); font-weight:650; min-height:44px; display:flex; align-items:center; cursor:pointer; }

/* Raccourcis de l'accueil : trois tuiles compactes (icône au-dessus) sur téléphone. */
@media (max-width:899px) {
  .bonjour .raccourcis { grid-template-columns:repeat(3, 1fr); }
  .bonjour .raccourcis .bouton { flex-direction:column; gap:4px; min-height:64px; padding:8px 4px; font-size:13px; }
}

/* ---------- Connexion : se souvenir de l'appareil ; écran Appareils ---------- */
label.case-souvenir { display:flex; align-items:center; gap:10px; font-weight:600; margin-top:16px; cursor:pointer; }
label.case-souvenir input { width:22px; height:22px; accent-color:var(--bleu); flex:none; }
#zone-appareil .petit { margin:6px 2px 0; }
.lien-appareils { margin:18px auto 0; display:flex; width:fit-content; }
.menu .moi a { color:var(--gris); }

/* ---------- Bibliothèque : états, versions, fiche ---------- */
.badge.etat.verifier { background:var(--jaune-pale); color:var(--jaune-texte); }
.badge.etat.manque { background:var(--rouge-pale); color:var(--rouge); }
.badge.gris { background:#eeeef2; color:var(--gris); }
.doc-badges { margin:4px 0 2px; }
.carte.doc-remplace { opacity:.7; box-shadow:none; }
.ligne-doc .texte.cliquable { cursor:pointer; }
.carte.alerte-douce { background:var(--jaune-pale); border-color:#f0dc7a; color:var(--jaune-texte); box-shadow:none; font-size:15px; }
.choix-deux.dates { margin-top:2px; }
.choix-deux.dates label { margin-top:14px; }
.choix-deux select { min-height:40px; }
.frise-ligne.courant::before { background:var(--bleu); }
.choix-deux { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.choix-deux input, .choix-deux select { min-width:0; }
.badge { max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Pastilles du menu (tâches à faire, mails à regarder) ---------- */
nav button { position:relative; }
.pastille { position:absolute; top:5px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--bleu); color:#fff;
  font-size:11px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--blanc); }
.pastille.rouge { background:var(--rouge); }
@media (min-width:900px) {
  .pastille { position:static; margin-left:auto; box-shadow:none; }
}
.resume-accueil { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 14px; }
.puce-resume { min-height:36px; padding:5px 14px; border-radius:999px; border:1.5px solid #c9ccf3; background:var(--bleu-pale); color:var(--bleu); font-size:14px; font-weight:700; }
.puce-resume.rouge { border-color:#f4b7bc; background:var(--rouge-pale); color:var(--rouge); }
#mes-taches { scroll-margin-top:70px; }
.ligne-tache .texte.cliquable { cursor:pointer; }

/* ---------- Notifications : cloche, liste, nouveautés ---------- */
.cloche { position:relative; flex:none; width:40px; height:40px; border:0; border-radius:50%; background:none; color:var(--texte); display:inline-flex; align-items:center; justify-content:center; }
.cloche .ico { width:24px; height:24px; }
.cloche .pastille { top:2px; left:auto; right:0; }
.cloche:hover { background:var(--bleu-pale); }
.carte.notif { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; box-shadow:none; }
.carte.notif.nouvelle { background:var(--bleu-voile); border-color:#c9ccf3; }
.carte.notif .texte { flex:1; min-width:0; overflow-wrap:anywhere; }
.notif-icone { font-size:20px; line-height:1.3; flex:none; }
.carte.nouveautes { background:var(--bleu-voile); border-color:#c9ccf3; box-shadow:none; }
.nouveaute { display:flex; gap:10px; padding:7px 0; border-top:1px solid #dfe2fa; font-size:15px; overflow-wrap:anywhere; }
.nouveaute:first-of-type { border-top:0; }
.nouveaute.cliquable { cursor:pointer; }
.carte.proposition-notif { border-color:#c9ccf3; }
@media (min-width:900px) {
  .barre { display:flex; }
  .barre .cloche { margin-left:auto; }
  .cloche .pastille { position:absolute; margin:0; }
}
.nouveautes .bouton-lien { white-space:nowrap; min-height:34px; padding:4px 12px; flex:none; }

/* ---------- Visionneuse intégrée (document par-dessus l'outil) ---------- */
body.visionneuse-ouverte { overflow:hidden; }
.visionneuse { position:fixed; inset:0; z-index:50; background:#2a2b33; display:flex; flex-direction:column; }
.visionneuse-barre { display:flex; align-items:center; gap:10px; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--blanc); }
.visionneuse-titre { flex:1; min-width:0; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.visionneuse-barre .bouton-lien { min-height:36px; padding:4px 10px; font-size:14px; flex:none; }
.visionneuse-barre .rond { width:40px; height:40px; font-size:18px; flex:none; }
.visionneuse-pages { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:8px 8px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:8px; }
.visionneuse-pages .vide, .visionneuse-info { color:#d6d7e0; }
.visionneuse-page, .visionneuse-image { background:#fff; max-width:100%; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.visionneuse-image { height:auto; }

/* ---------- Chat : barre de saisie toujours visible en bas, comme une messagerie ---------- */
.assistant { padding-bottom:110px; }
.assistant .zone-saisie { position:fixed; left:10px; right:10px; bottom:calc(var(--nav-h) + 8px + env(safe-area-inset-bottom)); margin:0 auto; max-width:760px; }
.chat-outils { display:flex; gap:8px; justify-content:flex-end; margin:0 0 6px; }
.chat-outils .bouton { min-height:36px; padding:5px 12px; font-size:14px; }
.chat-outils .bouton .ico { width:18px; height:18px; }
body[data-vue="assistant"] #toast { bottom:calc(var(--nav-h) + 90px + env(safe-area-inset-bottom)); }
@media (min-width:900px) {
  .assistant .zone-saisie { left:calc(var(--menu) + 32px); right:32px; bottom:16px; }
  body[data-vue="assistant"] #toast { bottom:100px; }
}

/* ---------- Accueil : reporter ou ignorer un élément ---------- */
.afaire { flex-wrap:wrap; }
.afaire .plus-actions { width:36px; height:36px; font-size:20px; line-height:1; background:none; color:var(--gris); }
.afaire .plus-actions.actif, .afaire .plus-actions:hover { background:var(--bleu-pale); color:var(--bleu); }
.menu-afaire { flex-basis:100%; border-top:1px solid var(--bord); margin-top:4px; padding-top:10px; }
.menu-afaire-ligne { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; }
.menu-afaire-ligne .bouton { min-height:38px; padding:6px 12px; font-size:14px; }
.menu-afaire-ligne input[type=date] { width:auto; flex:1; min-width:140px; min-height:38px; padding:6px 10px; font-size:15px; }

/* ---------- Échéancier de l'accueil : bloc date en tête de chaque élément ---------- */
.bloc-date { flex:none; width:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; padding:5px 0 6px; line-height:1.1; text-transform:uppercase; background:#eef0f6; color:var(--texte); }
.bloc-jour, .bloc-mois { font-size:11px; font-weight:700; letter-spacing:.04em; }
.bloc-num { font-size:24px; font-weight:800; line-height:1.1; }
.bloc-date.retard { background:var(--rouge); color:#fff; }
.bloc-date.jour { background:var(--jaune); color:#3d3200; }
.bloc-date.semaine { background:var(--bleu); color:#fff; }
.bloc-date.tard { background:#eef0f6; color:var(--gris); }
.afaire { padding-left:12px; }
.afaire.retard, .afaire.jour, .afaire.semaine { box-shadow:var(--ombre); }
.quand-relatif { font-size:14px; font-weight:700; color:var(--bleu); margin-top:2px; }
.quand-relatif.retard { color:var(--rouge); }
.quand-relatif.jour { color:var(--jaune-texte); }
h2.groupe-retard { color:var(--rouge); }
h2.groupe-jour { color:var(--jaune-texte); }