#vue-accueil{min-height:100vh}

  #vue-accueil{
    --papier:#FBF9F4; --ivoire:#F1EEE4; --grege:#C9C2AE; --pousse:#7C8F5F;
    --cedre:#4A5A3F; --cedre-profond:#3C4A36; --encre:#33352B; --creme:#EDE6D6;
    --fond:var(--ivoire); --blanc:var(--papier); --trait:var(--grege);
    --accent:var(--cedre-profond); --accent-clair:var(--creme);
    --doux:var(--cedre); --vert:var(--pousse); --alerte:#8C3A22; --ambre:#8a5a00; --or:#b07d23;
    --ombre:0 1px 2px rgba(60,74,54,.06), 0 8px 26px rgba(60,74,54,.07); --rayon:12px;
  }
  #vue-accueil *{box-sizing:border-box}
  #vue-accueil{margin:0;font:15px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;color:var(--encre);background:var(--fond)}
  #vue-accueil h1, #vue-accueil h2, #vue-accueil h3{font-family:Constantia,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:600;letter-spacing:.01em}
  #vue-accueil button{font-family:inherit}

  #barre-app{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:4px;padding:8px 18px;background:linear-gradient(180deg,#3C4A36,#2c3729);color:var(--creme);border-bottom:1px solid #222a20}
  /* Largeur fluide des 1024 px (chantier 2, 28 juillet 2026) : sous 1160 px le bandeau
     REPLIE ses groupes sur une seconde ligne plutot que de pousser « Demander a
     Kedros » et les icones hors ecran (deborde de 115 px constate a 1024). */
  @media(max-width:1160px){
    #barre-app{flex-wrap:wrap;row-gap:2px}
  }
  #barre-app.cache{display:none}
  #barre-app .marque{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:300;letter-spacing:.14em;color:var(--creme);flex:none;margin-right:10px;cursor:pointer}
  #barre-app .marque svg{width:28px;height:28px}
  #barre-app .onglet{background:transparent;border:0;color:#cdd3c2;border-radius:8px;padding:8px 12px;font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:7px}
  #barre-app .onglet:hover{background:rgba(237,230,214,.10);color:var(--creme)}
  #barre-app .onglet.actif{background:rgba(237,230,214,.16);color:var(--creme);font-weight:600}
  #barre-app .onglet .b{font-size:11px;font-weight:700;background:var(--pousse);color:#fff;border-radius:20px;padding:0 7px;min-width:19px;text-align:center}
  #barre-app .onglet .b.or{background:var(--or)}
  #barre-app .etude{color:#c3c8b5;font-size:12px;text-align:right;line-height:1.3;margin-left:auto;padding-left:10px}
  #barre-app .etude #nom-etude{color:var(--creme);font-weight:600}
  #barre-app .droite{display:flex;align-items:center;gap:6px}
  #barre-app .pilule{background:rgba(237,230,214,.14);border:1px solid rgba(237,230,214,.3);color:var(--creme);border-radius:20px;padding:7px 13px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:7px}
  #barre-app .pilule:hover{background:rgba(237,230,214,.24)} #barre-app .pilule svg{width:15px;height:15px}
  #barre-app .ico{width:34px;height:34px;border-radius:8px;background:transparent;border:0;color:#cdd3c2;display:grid;place-items:center;cursor:pointer;position:relative}
  #barre-app .ico:hover{background:rgba(237,230,214,.14);color:var(--creme)} #barre-app .ico:disabled{opacity:.4;cursor:default} #barre-app .ico svg{width:18px;height:18px}
  #barre-app .ico .pt{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--or)}
  #barre-app .sep{width:1px;height:22px;background:rgba(237,230,214,.2);margin:0 4px}
  #barre-app .nouv{background:linear-gradient(180deg,#c79a4e,#b07d23);color:#3a2a08;border:0;border-radius:9px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
  #barre-app .avatar{width:34px;height:34px;border-radius:9px;background:rgba(237,230,214,.18);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--creme);cursor:pointer}
  #barre-app .tab-wrap{position:relative;display:flex}
  #barre-app .pop{position:absolute;top:calc(100% + 6px);left:0;background:var(--blanc);border:1px solid var(--trait);border-radius:11px;box-shadow:0 10px 30px rgba(60,74,54,.18);padding:6px;min-width:250px;display:none;z-index:60}
  #barre-app .pop.on{display:block}
  #barre-app .pop-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:var(--encre);border-radius:8px;padding:10px 11px;font-size:13.5px;cursor:pointer}
  #barre-app .pop-item:hover{background:var(--accent-clair);color:var(--accent)}
  #barre-app .pop-item svg{width:16px;height:16px;color:var(--doux);flex:none}
  #barre-app .pop-item:hover svg{color:var(--accent)}

  #vue-accueil .page{max-width:1460px;margin:0 auto;padding:22px 22px 0}
  #vue-accueil .salut{font-family:Constantia,Palatino,Georgia,serif;font-size:26px;color:var(--accent);margin:2px 0 1px}
  #vue-accueil .salut .p{color:var(--cedre)}
  #vue-accueil .date{color:var(--doux);font-size:13px;margin:0 0 16px}
  #vue-accueil .surtitre{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);font-weight:700;margin:20px 2px 12px}

  #vue-accueil .cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:1080px){#vue-accueil .cartes{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){#vue-accueil .cartes{grid-template-columns:1fr}}
  #vue-accueil .kc{display:flex;flex-direction:column;gap:6px;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);padding:15px;box-shadow:var(--ombre);cursor:pointer;text-align:left;color:inherit;position:relative;transition:transform .12s,border-color .12s,box-shadow .12s}
  #vue-accueil .kc:hover{transform:translateY(-2px);border-color:var(--pousse);box-shadow:0 2px 4px rgba(60,74,54,.08),0 14px 30px rgba(60,74,54,.12)}
  #vue-accueil .kc .haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
  #vue-accueil .kc .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-clair);color:var(--accent);flex:none}
  #vue-accueil .kc .ic svg{width:20px;height:20px}
  #vue-accueil .kc h3{font-size:15px;margin:0} #vue-accueil .kc p{margin:0;font-size:12.4px;color:var(--doux);line-height:1.45}
  #vue-accueil .kc .cpt{font-size:12px;font-weight:700;color:#fff;background:var(--pousse);border-radius:20px;padding:2px 9px;min-width:24px;text-align:center}
  #vue-accueil .kc .cpt.ambre{background:var(--ambre)} #vue-accueil .kc .cpt.or{background:var(--or)}
  #vue-accueil .kc .tag{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--or);background:#fbf3e0;border:1px solid #e6d6ad;border-radius:20px;padding:1px 8px}
  #vue-accueil .kc.pleine{background:linear-gradient(180deg,#43533b,#374630);color:var(--creme);border-color:#2c3729}
  #vue-accueil .kc.pleine h3{color:var(--creme)} #vue-accueil .kc.pleine p{color:#c9d0bd} #vue-accueil .kc.pleine .ic{background:rgba(237,230,214,.16);color:var(--creme)}
  #vue-accueil .kc.douce{border-style:dashed} #vue-accueil .kc.douce .ic{background:#fbf3e0;color:var(--ambre)}
  #vue-accueil .kc.kedros{background:linear-gradient(135deg,#4a5a3f,#3C4A36);color:var(--creme);border-color:#2c3729}
  #vue-accueil .kc.kedros h3{color:var(--creme)} #vue-accueil .kc.kedros p{color:#c9d0bd} #vue-accueil .kc.kedros .ic{background:rgba(237,230,214,.16);color:var(--creme)}
  #vue-accueil .span2{grid-column:span 2} @media(max-width:620px){#vue-accueil .span2{grid-column:span 1}}

  #vue-accueil .apercu{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap}
  #vue-accueil .apercu .cr{flex:1;min-width:120px;background:var(--ivoire);border:1px solid var(--trait);border-radius:9px;padding:8px 10px}
  #vue-accueil .apercu .cr .h{font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
  #vue-accueil .apercu .cr .q{font-size:12px;color:var(--doux);line-height:1.3;margin-top:1px}
  #vue-accueil .apercu .cr.sig{background:#eef3e8;border-color:rgba(124,143,95,.4)} #vue-accueil .apercu .cr.sig .h{color:#3f5a2e}

  #vue-accueil .outils{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);padding:14px 15px;box-shadow:var(--ombre)}
  #vue-accueil .outils .st{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);font-weight:700;margin:0 0 8px}
  #vue-accueil .outils .st.d2{margin-top:12px}
  #vue-accueil .chips{display:flex;flex-wrap:wrap;gap:7px}
  #vue-accueil .chip{background:var(--blanc);border:1px solid var(--trait);color:var(--accent);border-radius:8px;padding:7px 11px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px}
  #vue-accueil .chip:hover{border-color:var(--pousse);background:var(--accent-clair)} #vue-accueil .chip svg{width:14px;height:14px}

  #vue-accueil .bas{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:20px}
  @media(max-width:900px){#vue-accueil .bas{grid-template-columns:1fr}}
  #vue-accueil .panneau{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden}
  #vue-accueil .ptete{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--trait)}
  #vue-accueil .ptete h2{font-size:16px;margin:0} #vue-accueil .ptete .arch{font-size:11.5px;color:var(--doux);font-style:italic}
  #vue-accueil .mur{padding:12px 14px}
  #vue-accueil .postits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #vue-accueil .pit{border-radius:10px;padding:10px 11px;font-size:13px;line-height:1.4;border:1px solid rgba(60,74,54,.12);box-shadow:0 1px 2px rgba(60,74,54,.08);min-height:70px}
  #vue-accueil .pit.j{background:#fbf3d9} #vue-accueil .pit.v{background:#e9f0dd} #vue-accueil .pit.b{background:#e6eef1} #vue-accueil .pit.r{background:#f6e7e2}
  #vue-accueil .pit .auteur{font-size:10.5px;font-weight:700;color:var(--doux);margin-top:7px;display:flex;align-items:center;gap:6px}
  #vue-accueil .qui{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-clair);color:var(--accent);font-size:9.5px;font-weight:700;border:1px solid var(--trait)}
  #vue-accueil .motline{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--trait)}
  #vue-accueil .motline input{flex:1;border:1px solid var(--trait);border-radius:8px;padding:8px 11px;font-size:13.5px;font-family:inherit;background:var(--blanc)}
  #vue-accueil .motline input:focus{outline:2px solid var(--pousse);outline-offset:1px}
  #vue-accueil .motline button{background:var(--accent);color:var(--creme);border:0;border-radius:8px;padding:0 13px;cursor:pointer;font-size:13.5px}
  #vue-accueil .recents{padding:6px 8px 10px}
  #vue-accueil .rc{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14px}
  #vue-accueil .rc:hover{background:var(--accent-clair)} #vue-accueil .rc .pt{width:8px;height:8px;border-radius:50%;background:var(--pousse);flex:none}
  #vue-accueil .rc .pt.a{background:var(--ambre)} #vue-accueil .rc .pt.n{background:var(--grege)} #vue-accueil .rc b{font-weight:600}
  #vue-accueil .rc .qd{margin-left:auto;font-size:12px;color:var(--doux)}

  #vue-accueil .pied{margin-top:26px;background:linear-gradient(180deg,#3C4A36,#2c3729);color:#c9d0bd;padding:16px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:12.5px}
  #vue-accueil .pied .v{color:#9fb08c} #vue-accueil .pied a{color:#dfe4d6;text-decoration:none;margin:0 7px} #vue-accueil .pied a:hover{text-decoration:underline}
  #vue-accueil .pied .liens{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
  #vue-accueil .pied .assist{background:rgba(237,230,214,.16);border:1px solid rgba(237,230,214,.3);color:var(--creme);border-radius:20px;padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:7px}
  #vue-accueil .pied .assist svg{width:15px;height:15px}
  #vue-accueil .note-donnees{max-width:1460px;margin:14px auto 0;padding:0 22px;font-size:12px;color:var(--doux);font-style:italic}

  /* Tâches */
  #vue-accueil .lien-arch{background:transparent;border:0;color:var(--doux);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px}
  #vue-accueil .lien-arch:hover{color:var(--accent)}
  #vue-accueil .filtres-t{display:flex;gap:5px;padding:12px 16px 2px}
  #vue-accueil .filtres-t button{background:var(--blanc);border:1px solid var(--trait);color:var(--doux);border-radius:20px;padding:5px 12px;font-size:12.5px;cursor:pointer}
  #vue-accueil .filtres-t button[aria-pressed="true"]{background:var(--accent-clair);color:var(--accent);border-color:var(--pousse);font-weight:600}
  #vue-accueil .taches{padding:6px 8px 4px;min-height:120px}
  #vue-accueil .tache{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:9px;transition:opacity .3s,transform .3s}
  #vue-accueil .tache:hover{background:var(--accent-clair)}
  #vue-accueil .tache .ck{width:19px;height:19px;border:1.6px solid var(--grege);border-radius:6px;flex:none;margin-top:2px;cursor:pointer;display:grid;place-items:center;background:var(--blanc)}
  #vue-accueil .tache .ck svg{width:12px;height:12px;color:#fff;opacity:0}
  #vue-accueil .tache.faite .ck{background:var(--pousse);border-color:var(--pousse)} #vue-accueil .tache.faite .ck svg{opacity:1}
  #vue-accueil .tache.faite .t{text-decoration:line-through;color:var(--doux)}
  #vue-accueil .tache .corps{flex:1;min-width:0} #vue-accueil .tache .t{font-size:14px;font-weight:600;line-height:1.3}
  #vue-accueil .tache .m{font-size:12px;color:var(--doux);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:1px}
  #vue-accueil .tag-d{background:var(--ivoire);border:1px solid var(--trait);border-radius:6px;padding:0 6px;font-size:11px;color:var(--doux)}
  #vue-accueil .quiT{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-clair);color:var(--accent);font-size:9.5px;font-weight:700;border:1px solid var(--trait)}
  #vue-accueil .du{font-size:11.5px;font-weight:700;color:var(--encre);white-space:nowrap}
  #vue-accueil .ajout{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--trait);background:var(--ivoire)}
  #vue-accueil .ajout input{flex:1;border:1px solid var(--trait);border-radius:8px;padding:8px 11px;font-size:13.5px;font-family:inherit;background:var(--blanc)}
  #vue-accueil .ajout input:focus{outline:2px solid var(--pousse);outline-offset:1px}
  #vue-accueil .ajout .aff{font-size:12px;color:var(--doux);border:1px solid var(--trait);border-radius:8px;padding:0 10px;background:var(--blanc);cursor:pointer}
  #vue-accueil .ajout button.add{background:var(--accent);color:var(--creme);border:0;border-radius:8px;padding:0 14px;cursor:pointer;font-size:13.5px}
  #vue-accueil .mur-panneau .ptete{cursor:pointer}

  /* Toast (retour visuel du clic sur une carte) */
  #vue-accueil .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--cedre-profond);color:var(--creme);padding:11px 18px;border-radius:10px;font-size:13.5px;box-shadow:0 10px 30px rgba(20,28,16,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200}
  #vue-accueil .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

  /* Modale du mur agrandi */
  #vue-accueil .modale-mur{background:var(--fond);border-radius:16px;width:min(880px,100%);box-shadow:0 24px 70px rgba(20,28,16,.4);overflow:hidden}
  #vue-accueil .modale-mur .postits{grid-template-columns:repeat(3,1fr)}
  @media(max-width:640px){#vue-accueil .modale-mur .postits{grid-template-columns:1fr}}

  /* MODALE ÉCHÉANCES : liste, calendrier, frise. */
  #vue-accueil .voile{position:fixed;inset:0;background:rgba(44,55,41,.42);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:36px 16px;overflow:auto}
  #vue-accueil .voile.on{display:flex}
  #vue-accueil .modale{background:var(--fond);border-radius:16px;width:min(960px,100%);box-shadow:0 24px 70px rgba(20,28,16,.4);overflow:hidden}
  #vue-accueil .mtete{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--blanc);border-bottom:1px solid var(--trait)}
  #vue-accueil .mtete h2{font-size:19px;margin:0;flex:none}
  #vue-accueil .mtete .src{font-size:11.5px;color:var(--doux);font-style:italic}
  #vue-accueil .vue-seg{display:flex;gap:5px;margin-left:auto}
  #vue-accueil .vue-seg button{background:var(--blanc);border:1px solid var(--trait);color:var(--doux);border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:7px}
  #vue-accueil .vue-seg button svg{width:15px;height:15px}
  #vue-accueil .vue-seg button[aria-pressed="true"]{background:var(--accent-clair);color:var(--accent);border-color:var(--pousse);font-weight:600}
  #vue-accueil .fermer{width:34px;height:34px;border-radius:8px;border:1px solid var(--trait);background:var(--blanc);cursor:pointer;color:var(--doux);display:grid;place-items:center}
  #vue-accueil .fermer svg{width:16px;height:16px}
  #vue-accueil .mcorps{padding:18px 20px 24px;max-height:66vh;overflow:auto}
  #vue-accueil .vue{display:none} #vue-accueil .vue.on{display:block}

  /* Vue liste */
  #vue-accueil .el{display:flex;align-items:center;gap:14px;background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:12px 15px;margin-bottom:9px}
  #vue-accueil .el .jour{text-align:center;flex:none;width:52px}
  #vue-accueil .el .jour .n{font-size:20px;font-weight:700;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
  #vue-accueil .el .jour .m{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--doux)}
  #vue-accueil .el .barre{width:4px;align-self:stretch;border-radius:3px;background:var(--pousse)}
  #vue-accueil .el.condition .barre, #vue-accueil .el.peremption .barre{background:var(--ambre)}
  #vue-accueil .el.rdv .barre{background:var(--doux)} #vue-accueil .el.depot .barre{background:var(--cedre)}
  #vue-accueil .el .txt{flex:1} #vue-accueil .el .txt .t{font-weight:600;font-size:14.5px}
  #vue-accueil .el .txt .d{font-size:12.5px;color:var(--doux)}
  #vue-accueil .el .typ{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:20px;background:var(--ivoire);border:1px solid var(--trait);color:var(--doux)}

  /* Vue calendrier */
  #vue-accueil .cals{display:flex;gap:20px;flex-wrap:wrap}
  #vue-accueil .cal{flex:1;min-width:280px;background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:14px}
  #vue-accueil .cal h3{font-size:15px;margin:0 0 10px;text-align:center;text-transform:capitalize}
  #vue-accueil .grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  #vue-accueil .grille .jn{font-size:10px;text-transform:uppercase;color:var(--doux);text-align:center;font-weight:700;padding-bottom:4px}
  #vue-accueil .grille .c{aspect-ratio:1;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12.5px;color:var(--encre);position:relative}
  #vue-accueil .grille .c.vide{visibility:hidden}
  #vue-accueil .grille .c.auj{outline:2px solid var(--grege);outline-offset:-2px}
  #vue-accueil .grille .c.mark{background:var(--accent-clair);font-weight:700;color:var(--accent);cursor:pointer}
  #vue-accueil .grille .c.mark .d{width:6px;height:6px;border-radius:50%;background:var(--pousse);margin-top:2px}
  #vue-accueil .grille .c.mark.condition .d, #vue-accueil .grille .c.mark.peremption .d{background:var(--ambre)}
  #vue-accueil .grille .c.mark.rdv .d{background:var(--doux)} #vue-accueil .grille .c.mark.depot .d{background:var(--cedre)}

  /* Vue frise */
  #vue-accueil .frise{position:relative;padding-left:26px}
  #vue-accueil .frise::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--trait)}
  #vue-accueil .fn{position:relative;margin-bottom:16px}
  #vue-accueil .fn::before{content:"";position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--pousse);border:2px solid var(--fond)}
  #vue-accueil .fn.condition::before, #vue-accueil .fn.peremption::before{background:var(--ambre)} #vue-accueil .fn.rdv::before{background:var(--doux)} #vue-accueil .fn.depot::before{background:var(--cedre)}
  #vue-accueil .fn .fd{font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
  #vue-accueil .fn .ft{font-size:14px;font-weight:600;margin-top:1px} #vue-accueil .fn .fs{font-size:12.5px;color:var(--doux)}
  #vue-accueil .fmois{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);font-weight:700;margin:2px 0 12px;text-transform:uppercase}