:root{
  --papier:#f7efdc; --papier2:#efe4c8; --trait:#d8c7a0;
  --encre:#2e2420; --doux:#7b6a57;
  --rouge:#cf3f2b; --indigo:#243352; --or:#c9a23f;
  --titre:"Shippori Mincho","Yu Mincho",Georgia,serif;
  --texte:"Zen Maru Gothic","Segoe UI",system-ui,sans-serif;
  --pinceau:"Yuji Syuku","Shippori Mincho","Yu Mincho",serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;overflow:hidden;
  font-family:var(--texte);color:var(--encre);
  /* motif seigaiha (vagues) */
  background:#243352 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='%23243352' stroke='%2333466f'%3E%3Ccircle cx='20' cy='0' r='20'/%3E%3Ccircle cx='20' cy='0' r='14'/%3E%3Ccircle cx='20' cy='0' r='8'/%3E%3Ccircle cx='0' cy='10' r='20'/%3E%3Ccircle cx='0' cy='10' r='14'/%3E%3Ccircle cx='0' cy='10' r='8'/%3E%3Ccircle cx='40' cy='10' r='20'/%3E%3Ccircle cx='40' cy='10' r='14'/%3E%3Ccircle cx='40' cy='10' r='8'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3Ccircle cx='20' cy='20' r='14'/%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3Ccircle cx='0' cy='30' r='20'/%3E%3Ccircle cx='0' cy='30' r='14'/%3E%3Ccircle cx='40' cy='30' r='20'/%3E%3Ccircle cx='40' cy='30' r='14'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- le plateau ---------- */
.scene{min-width:0;height:100vh;display:grid;place-items:center;padding:16px}
.plateau{
  position:relative;width:min(100%,calc((100vh - 32px) * var(--ratio,1.792)));aspect-ratio:var(--ratio,1.792);
  border:7px solid #2a1d16;border-radius:12px;overflow:hidden;background:#abc982;
  box-shadow:0 0 0 2px var(--or),0 18px 50px rgba(0,0,0,.45);
}
#carte{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
#carte.glisse{cursor:grabbing}
.plateau::after{ /* grain de papier */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.marque{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;pointer-events:none;
  background:rgba(253,246,227,.92);border:1.5px solid var(--encre);border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.marque h1{margin:0;font-family:var(--titre);font-weight:800;font-size:19px;letter-spacing:.02em}
.hanko{display:grid;place-items:center;width:34px;height:34px;border-radius:5px;background:var(--rouge);color:#fff;
  font-family:var(--pinceau);font-size:14px;line-height:1.05;writing-mode:vertical-rl;letter-spacing:-.05em}
.zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:5px}
.zoom button{width:32px;height:32px;border:1.5px solid var(--encre);border-radius:7px;background:rgba(253,246,227,.92);color:var(--encre);
  font:700 17px/1 var(--texte);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.zoom button:hover{background:#fff}

/* ---------- l'intérieur des bâtiments ---------- */
.interieur{position:absolute;inset:0;z-index:5;background:#2a1d16;opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity .35s,transform .35s,visibility 0s .35s}
.interieur.ouvert{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s}
#salle{width:100%;height:100%;display:block}
.plateau.dedans .zoom,.plateau.dedans .marque{display:none}
.salle-barre{position:absolute;left:10px;right:10px;top:10px;display:flex;align-items:center;gap:12px;padding:6px 10px;
  background:rgba(253,246,227,.94);border:1.5px solid var(--encre);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.retour{font:700 14px var(--texte);color:#fff;background:var(--rouge);border:0;border-radius:7px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.retour:hover{filter:brightness(1.1)}
.salle-titre h2{margin:0;font-family:var(--titre);font-weight:800;font-size:19px;line-height:1.2}
.salle-titre p{margin:1px 0 0;font-size:13px;color:var(--doux)}
.puce{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--papier2);white-space:nowrap}
.puce i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.salle-tache{margin:0;flex:1;min-width:0;font-size:14px;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.salle-titre{white-space:nowrap}
#fiche .entrer{display:block;margin-top:12px;float:none;font:700 14px/1.2 var(--texte);color:#fff;background:var(--rouge);border:0;border-radius:7px;padding:9px 14px;cursor:pointer}
#fiche .entrer:hover{filter:brightness(1.1)}

/* ---------- éléments de la carte ---------- */
.kanji{font-family:var(--pinceau)}
.batiment{cursor:pointer}
.zone{fill:transparent;stroke:transparent;stroke-width:5;stroke-dasharray:14 10}
.batiment:hover .zone{fill:url(#g-survol)}
.batiment.choisi .zone,.batiment:focus-visible .zone{fill:url(#g-survol);stroke:#fff6d2;animation:tourne 1.4s linear infinite}
.batiment:focus{outline:none}
.lueur-zone{mix-blend-mode:screen;pointer-events:none;animation:respire 2.6s ease-in-out infinite}
.halo-porte{fill:none;stroke-width:5;transform-box:fill-box;transform-origin:center;animation:onde 1.8s ease-out infinite}
@keyframes tourne{to{stroke-dashoffset:-48}}
@keyframes respire{50%{opacity:.55}}
.enseigne{cursor:pointer;filter:drop-shadow(0 3px 4px rgba(40,30,20,.3))}
.enseigne.compacte{opacity:.92;transition:opacity .2s}
.enseigne.compacte:hover{opacity:1}
.enseigne .cadre{fill:#fdf6e3;stroke:#3a2c24;stroke-width:1.6}
.enseigne.choisi .cadre{stroke:var(--rouge);stroke-width:3.2}
.enseigne text{font-family:var(--texte)}
.enseigne .kanji{font-family:var(--pinceau)}
.enseigne .nom{font-size:22px;font-weight:700;fill:var(--encre)}
.enseigne .etat{font-size:16.5px;font-weight:500;fill:#5d4f42}

.courant{fill:none;stroke-linecap:round;stroke-dasharray:14 30;animation:coule 1.7s linear infinite}
.flux{stroke-dasharray:2 24;animation:flux 1s linear infinite}
.allume{animation:lampe 2.6s ease-in-out infinite}
.lueur{animation:pouls 2.4s ease-in-out infinite}
.pouls{animation:pouls 1.3s ease-in-out infinite}
.fumee circle{fill:#fffaf0;opacity:0;transform-box:fill-box;transform-origin:center;animation:fumee 3.4s linear infinite}
.onde{transform-box:fill-box;transform-origin:center;animation:onde 1.8s ease-out infinite}
.ride{transform-box:fill-box;transform-origin:center;animation:ride 4.5s ease-out infinite}
.saute{animation:saute .9s ease-in-out infinite}
.zzz{font:700 15px var(--texte);fill:#5d4f42;opacity:0;animation:zzz 2.8s ease-in infinite}
.derive{animation:derive 38s ease-in-out infinite alternate}
.derive2{animation:derive 52s ease-in-out infinite alternate-reverse}
.grue{animation:vol 54s linear infinite}
.aile{transform-box:fill-box;transform-origin:50% 100%;animation:bat .55s ease-in-out infinite alternate}

@keyframes coule{to{stroke-dashoffset:-44}}
@keyframes flux{to{stroke-dashoffset:-26}}
@keyframes lampe{50%{fill:#fff1bd}}
@keyframes pouls{50%{opacity:.45}}
@keyframes fumee{0%{transform:translate(0,0) scale(.5);opacity:0}18%{opacity:.8}100%{transform:translate(16px,-56px) scale(2);opacity:0}}
@keyframes onde{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.5);opacity:0}}
@keyframes ride{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1);opacity:0}}
@keyframes saute{50%{transform:translateY(-7px)}}
@keyframes zzz{0%{transform:translate(0,0);opacity:0}25%{opacity:1}100%{transform:translate(9px,-18px);opacity:0}}
@keyframes derive{to{transform:translateX(34px)}}
@keyframes vol{from{transform:translate(-160px,0)}to{transform:translate(2200px,-70px)}}
@keyframes bat{to{transform:scaleY(.2)}}

/* pétales de cerisier */
.petales{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.petales i{position:absolute;top:-4%;width:9px;height:6px;background:#f9c3d1;border-radius:90% 10% 90% 10%;box-shadow:inset -1px -1px 0 rgba(214,110,140,.45);animation:chute linear infinite}
@keyframes chute{0%{top:-4%;transform:translateX(0) rotate(0)}50%{transform:translateX(-46px) rotate(260deg)}100%{top:104%;transform:translateX(-110px) rotate(560deg)}}

/* ---------- panneau ---------- */
.panneau{height:100vh;overflow-y:auto;padding:16px 16px 16px 0;display:flex;flex-direction:column;gap:12px}
.carte{background:var(--papier);border:1.5px solid #2a1d16;border-radius:10px;padding:14px 15px;box-shadow:0 6px 18px rgba(0,0,0,.28);
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%)}
.carte h2{margin:0 0 9px;font-family:var(--titre);font-weight:800;font-size:15px;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.carte h2::before{content:"";width:9px;height:9px;background:var(--rouge);border-radius:2px;transform:rotate(45deg)}
.mission p{margin:0;font-family:var(--titre);font-size:18px;font-weight:600;line-height:1.4;text-wrap:balance}

.equipe,.journal,.legende{list-style:none;margin:0;padding:0}
.equipe li{display:grid;grid-template-columns:30px 1fr auto;gap:1px 10px;align-items:center;padding:7px;border-radius:8px;cursor:pointer}
.equipe li:hover,.equipe li.choisi{background:var(--papier2)}
.equipe .sceau{grid-row:span 2;width:30px;height:30px;border-radius:5px;display:grid;place-items:center;color:#fff;font-family:var(--pinceau);font-size:18px;align-self:start}
.equipe .nom{font-weight:700;font-size:14.5px}
.equipe .etat{font-size:12.5px;color:var(--doux);display:flex;align-items:center;gap:6px;white-space:nowrap}
.equipe .etat i{width:9px;height:9px;border-radius:50%}
.equipe .tache{grid-column:2/4;font-size:13px;color:var(--doux);overflow-wrap:anywhere}
.equipe li:not(:has(.tache)) .sceau{grid-row:auto}
.legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--trait);font-size:12px;color:var(--doux)}
.legende li{display:flex;align-items:center;gap:6px}
.legende i{width:9px;height:9px;border-radius:50%}

#fiche{border-top:5px solid var(--c,#999)}
#fiche h3{margin:0 0 4px;font-family:var(--titre);font-weight:800;font-size:19px}
#fiche p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--doux)}
#fiche .tache{color:var(--encre);font-weight:500}
#fiche code{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--papier2);padding:2px 6px;border-radius:5px;overflow-wrap:anywhere}
#fiche button{float:right;border:0;background:none;color:var(--doux);font-size:20px;cursor:pointer;line-height:1}

.journal li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:7px 0;border-top:1px dashed var(--trait);font-size:13px;line-height:1.45}
.journal li:first-child{border-top:0}
.journal time{color:var(--doux);font-variant-numeric:tabular-nums}
.journal b{font-weight:700}
#pied{font-size:12px;color:#c9d2e6;text-align:center;padding:0 0 4px}

/* fenêtre pas assez large : la carte prend toute la largeur, le panneau passe dessous */
@media (max-aspect-ratio:3/2),(max-width:1000px){
  body{grid-template-columns:1fr;overflow:auto}
  .scene{height:auto;padding:12px}
  .plateau{width:min(100%,calc((100vh - 24px) * var(--ratio,1.792)))}
  .panneau{height:auto;padding:0 12px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start}
  #pied{grid-column:1/-1}
}
@media (max-width:700px){
  .marque h1{font-size:15px}.hanko{width:28px;height:28px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- thème yakuza (par défaut) ---------- */
body.yakuza{
  --papier:#1c1820; --papier2:#2b2530; --trait:#3d3443;
  --encre:#efe6d3; --doux:#a99fb4; --rouge:#d6243a; --or:#d4a84a;
  background:#0c0a10 radial-gradient(120% 90% at 30% 10%,#1d1626 0%,#0c0a10 65%);
}
body.yakuza .plateau{border-color:#07050a;box-shadow:0 0 0 2px var(--or),0 0 36px rgba(214,36,58,.25),0 18px 50px rgba(0,0,0,.6)}
body.yakuza .plateau::after{opacity:.25}
body.yakuza .marque,body.yakuza .salle-barre,body.yakuza .zoom button{background:rgba(22,18,27,.92);border-color:var(--or);color:var(--encre)}
body.yakuza .zoom button:hover{background:#2b2530}
body.yakuza .carte{border-color:var(--or);background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%);box-shadow:0 6px 18px rgba(0,0,0,.5)}
body.yakuza .carte h2::before{background:var(--rouge)}
body.yakuza .enseigne .cadre{stroke:var(--or)}
body.yakuza .enseigne .nom{fill:#efe6d3}
body.yakuza .enseigne .etat{fill:#b9b0c4}
body.yakuza .enseigne.choisi .cadre{stroke:#ff4d5e}
body.yakuza .petales i{opacity:.55}
body.yakuza .legende,body.yakuza .journal li{border-color:var(--trait)}
body.yakuza #pied{color:#8f86a0}
body.yakuza .hanko{background:var(--rouge)}
body.yakuza .plateau{background:#07050a}
body.yakuza .enseigne .cadre{fill:#17141b}

.equipe .sceau.photo{padding:0;overflow:hidden}
.equipe .sceau.photo img{width:100%;height:100%;object-fit:cover;display:block}
#fiche .portrait{float:none;display:block;width:96px;height:96px;object-fit:cover;border-radius:12px;border:2px solid var(--or);margin:0 0 10px}

.appel{margin:10px 0 0;padding:7px 10px;border-radius:8px;font-size:13.5px;font-weight:700;color:#2a2320;background:#ffc94a;animation:pouls 1.2s ease-in-out infinite}
.appel[hidden]{display:none}
.ceo-img{filter:drop-shadow(0 0 2px rgba(255,236,190,.95)) drop-shadow(0 0 7px rgba(255,200,110,.45))}

.reunion{margin-left:auto;font:700 14px var(--texte);color:#2a2320;background:#ffc94a;border:0;border-radius:7px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.reunion:hover{filter:brightness(1.08)}
.reunion.bureau{background:#efe6d3}
.reunion.bureau + .reunion{margin-left:8px}
.reunion.actif{background:var(--rouge);color:#fff}
.reunion-info{background:#e8a400;animation:none}

/* ---------- ligne directe CEO <-> Directeur ---------- */
.chat-fil{list-style:none;margin:0 0 10px;padding:0 2px 0 0;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.chat-fil:empty::before{content:"Aucun message pour l'instant. Écrivez au Directeur : il vous répond ici.";font-size:13px;color:var(--doux)}
.chat-fil li{max-width:88%;padding:8px 11px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-fil li.ceo{align-self:flex-end;background:var(--rouge);color:#fff;border-bottom-right-radius:4px}
.chat-fil li.directeur{align-self:flex-start;background:var(--papier2);color:var(--encre);border-bottom-left-radius:4px}
.chat-fil li small{display:block;margin-top:3px;font-size:11px;opacity:.7}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;min-width:0;resize:vertical;font:14px/1.4 var(--texte);color:var(--encre);background:var(--papier2);border:1px solid var(--trait);border-radius:8px;padding:8px}
.chat-form button,.chat-code button{font:700 13px var(--texte);color:#fff;background:var(--rouge);border:0;border-radius:7px;padding:9px 12px;cursor:pointer}
.chat-form button:disabled{opacity:.5;cursor:default}
.chat-code{margin-bottom:10px;font-size:13px;color:var(--doux)}
.chat-code div{display:flex;gap:8px;margin-top:6px}
.chat-code input{flex:1;min-width:0;font:14px var(--texte);color:var(--encre);background:var(--papier2);border:1px solid var(--trait);border-radius:8px;padding:7px}
.chat-etat{margin:6px 0 0;font-size:12px;color:var(--doux)}
.chat-form[hidden],.chat-code[hidden]{display:none}

/* ---------- ligne directe : petit bouton discret, fenêtre compacte à l'ouverture ---------- */
.chat-flottant{position:absolute;left:10px;bottom:10px;z-index:6;width:300px;max-width:calc(100% - 20px);display:flex;flex-direction:column;
  background:rgba(18,14,22,.93);border:1px solid rgba(212,168,74,.7);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.5);color:var(--encre)}
.chat-tete{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 10px;cursor:pointer;user-select:none}
.chat-tete h2{margin:0;flex:1;display:flex;align-items:center;gap:6px;font:700 12.5px var(--texte);letter-spacing:.02em}
.chat-ico{font-family:'Segoe UI Symbol',system-ui,sans-serif;font-size:14px;color:#ffc94a}
.chat-pastille{width:7px;height:7px;border-radius:50%;background:#ffc94a;display:none}
.chat-flottant.nouveau .chat-pastille{display:inline-block;animation:pouls 1s ease-in-out infinite}
.chat-tete button{width:22px;height:22px;border:0;border-radius:6px;background:rgba(255,255,255,.08);color:var(--encre);font:700 14px/1 var(--texte);cursor:pointer}
.chat-corps{padding:0 10px 8px}
.chat-flottant .chat-fil{max-height:min(190px,30vh);gap:6px}
.chat-flottant .chat-fil li{font-size:12.5px;padding:6px 9px}
.chat-flottant .chat-form textarea{font-size:13px;padding:6px 8px}
.chat-flottant .chat-form button{padding:7px 10px;font-size:12px}
.chat-flottant .chat-etat{font-size:11px}
/* réduit : une simple pastille « ☎ Directeur » */
.chat-flottant.reduit{width:auto;background:rgba(18,14,22,.78);border-color:rgba(212,168,74,.45);border-radius:99px}
.chat-flottant.reduit .chat-corps{display:none}
.chat-flottant.reduit .chat-tete{padding:5px 6px 5px 10px}
.chat-flottant.reduit .chat-tete button{display:none}
.chat-flottant.reduit:hover{background:rgba(18,14,22,.92)}
/* téléphone : la conversation ouverte devient un panneau en bas de l'écran */
@media (max-width:700px){
  .chat-flottant{left:6px;bottom:6px}
  .chat-flottant:not(.reduit){position:fixed;left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:14px 14px 0 0;z-index:50}
  .chat-flottant:not(.reduit) .chat-fil{max-height:42vh}
}

/* ---------- mini-bulles de conversation au-dessus des agents ---------- */
.bulles{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.bulle-txt{position:absolute;transform:translate(-50%,-100%);max-width:150px;padding:3px 8px;border-radius:9px;
  background:rgba(253,246,227,.93);color:#2a2320;font:600 11px/1.3 var(--texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 6px rgba(0,0,0,.35);animation:bulle-in .25s ease-out}
.bulle-txt::after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-top-color:rgba(253,246,227,.93);border-bottom:0}
.bulle-txt.ceo{background:rgba(255,201,74,.95)}
.bulle-txt.ceo::after{border-top-color:rgba(255,201,74,.95)}
@keyframes bulle-in{from{opacity:0;transform:translate(-50%,-80%)}to{opacity:1;transform:translate(-50%,-100%)}}
.plateau.dedans:not(.au-conseil) .bulles{display:none}
.plateau.au-conseil .bulles{z-index:6}
@media (max-width:700px){.bulle-txt{max-width:110px;font-size:9.5px;padding:2px 6px}}

/* ---------- onglets Studio / Tâches et file de tâches ---------- */
.onglets{display:flex;gap:6px;background:var(--papier);border:1.5px solid #2a1d16;border-radius:10px;padding:5px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.onglets button{flex:1;font:700 14px var(--texte);color:var(--doux);background:transparent;border:0;border-radius:7px;padding:9px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.onglets button:hover{color:var(--encre)}
.onglets button.actif{background:var(--rouge);color:#fff}
.onglets .compte{min-width:20px;padding:1px 6px;border-radius:10px;background:#ffc94a;color:#2a2320;font-size:12px;line-height:1.5}
.taches-aide{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--doux)}
.taches-etat{margin:8px 0 0;font-size:12.5px;color:var(--doux);min-height:1em}
.taches-etat.erreur{color:var(--rouge)}
.tg{margin:14px 0 2px;font:800 11.5px var(--texte);letter-spacing:.08em;text-transform:uppercase;color:var(--doux);display:flex;align-items:center;gap:7px}
.tg i{width:9px;height:9px;border-radius:50%}
.tg:first-child{margin-top:0}
.tache{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:start;padding:9px 0;border-top:1px dashed var(--trait)}
.tg + .tache{border-top:0}
.tache input[type=checkbox]{width:19px;height:19px;margin:2px 0 0;accent-color:var(--rouge);cursor:pointer}
.tache .rang{place-items:center;width:20px;height:20px;border-radius:50%;background:#4C9AFF;color:#fff;font:800 12px var(--texte);vertical-align:1px}
.tache .puce-s{width:11px;height:11px;margin:6px 4px 0;border-radius:50%}
.tache h3{margin:0;font:700 14px/1.35 var(--texte);color:var(--encre)}
.tache .meta{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--doux)}
.tache .meta b{color:var(--encre);font-weight:700}
.tache .cout{display:inline-block;padding:0 6px;border-radius:8px;font-weight:700;font-size:11px;border:1px solid currentColor}
.tache .cout.leger{color:#3f9b63}.tache .cout.moyen{color:#e8a400}.tache .cout.lourd{color:var(--rouge)}
.tache .note{margin:5px 0 0;padding:6px 8px;border-radius:6px;background:rgba(128,128,128,.14);font-size:12.5px;line-height:1.45;color:var(--encre);white-space:pre-wrap}
.tache.bloquee .note{background:rgba(232,164,0,.18)}
.tache .actes{display:flex;gap:4px}
.tache .actes button{width:26px;height:26px;border-radius:6px;border:1px solid var(--trait);background:transparent;color:var(--encre);font:700 13px var(--texte);cursor:pointer}
.tache .actes button:hover{border-color:var(--rouge);color:var(--rouge)}
.tache .actes button:disabled{opacity:.3;cursor:default}
.tache.finie h3{color:var(--doux);font-weight:500}
.tache.annulee h3{text-decoration:line-through}
.taches-vide{margin:6px 0;font-size:13.5px;color:var(--doux)}
.taches-plus{margin-top:8px;font:700 12.5px var(--texte);color:var(--doux);background:transparent;border:0;padding:4px 0;cursor:pointer;text-decoration:underline}
@media (max-aspect-ratio:3/2),(max-width:1000px){.onglets,.vue-taches{grid-column:1/-1}}

/* ---------- livrables, validation et scripts de voix ---------- */
.panneau[data-vue=taches] .vue-studio,.panneau[data-vue=livrables] .vue-studio{display:none!important}
.panneau:not([data-vue=taches]) .vue-taches,.panneau:not([data-vue=livrables]) .vue-livrables{display:none!important}
.livrable{padding:10px 0;border-top:1px dashed var(--trait)}
.tg + .livrable{border-top:0}
.l-tete{margin:0;font:700 13.5px/1.35 var(--texte);color:var(--encre)}
.l-type{display:inline-block;margin-right:5px;padding:0 6px;border-radius:8px;background:var(--rouge);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.livrable video,.livrable img{display:block;width:100%;max-height:340px;margin-top:7px;border-radius:7px;background:#000;object-fit:contain}
.livrable audio{display:block;width:100%;margin-top:7px}
.l-texte{margin:7px 0 0;padding:8px 10px;max-height:220px;overflow:auto;border-radius:6px;background:rgba(128,128,128,.14);font:12.5px/1.5 var(--texte);color:var(--encre);white-space:pre-wrap;word-break:break-word}
.l-copier,.l-lien,.sv-ok{display:inline-block;margin-top:6px;font:700 12.5px var(--texte);color:var(--encre);background:transparent;border:1px solid var(--trait);border-radius:6px;padding:5px 10px;cursor:pointer;text-decoration:none}
.l-copier:hover,.l-lien:hover,.sv-ok:hover{border-color:var(--rouge);color:var(--rouge)}
.tache .livrables-t{margin-top:4px}
.tache .livrables-t .livrable{padding:6px 0}
.valider{margin-top:8px;display:grid;gap:6px}
.valider textarea{width:100%;min-height:52px;resize:vertical;font:13px/1.4 var(--texte);color:var(--encre);background:rgba(128,128,128,.12);border:1px solid var(--trait);border-radius:6px;padding:6px 8px;box-sizing:border-box}
.valider div{display:flex;gap:6px}
.valider button{flex:1;font:700 13px var(--texte);border:0;border-radius:7px;padding:8px 10px;cursor:pointer;color:#fff}
.valider .oui{background:#3f9b63}.valider .non{background:var(--rouge)}
.valider button:disabled{opacity:.5;cursor:default}
.tache .reel{color:var(--encre)}
.scripts-voix{position:absolute;top:84px;right:14px;z-index:6;width:min(340px,calc(100% - 28px));max-height:calc(100% - 110px);display:flex;flex-direction:column;background:rgba(22,18,27,.94);border:1.5px solid var(--or);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);color:#efe6d3}
.scripts-voix .sv-tete{display:flex;align-items:center;gap:8px;justify-content:space-between;font:700 14px var(--texte);color:#efe6d3;background:transparent;border:0;padding:10px 12px;cursor:pointer;text-align:left}
.scripts-voix .compte{min-width:20px;padding:1px 6px;border-radius:10px;background:#ffc94a;color:#2a2320;font-size:12px;text-align:center}
.scripts-voix .sv-corps{overflow:auto;padding:0 12px 10px}
.scripts-voix .sv{padding:8px 0;border-top:1px dashed #3d3443}
.scripts-voix .l-tete{color:#efe6d3}
.scripts-voix .l-texte{color:#efe6d3;background:rgba(255,255,255,.07);max-height:160px}
.scripts-voix .sv-actes{display:flex;gap:6px}
.scripts-voix .l-copier,.scripts-voix .sv-ok{color:#efe6d3;border-color:#3d3443}
.scripts-voix .taches-vide{color:#b9b0c4;font-size:12.5px}
@media (max-aspect-ratio:3/2),(max-width:1000px){.vue-livrables{grid-column:1/-1}}

/* ---------- cartes repliables, panneau masquable, plein écran ---------- */
.repliable > h2{cursor:pointer;user-select:none}
.repliable > h2::after{content:"▾";margin-left:auto;font-size:14px;color:var(--doux);transition:transform .2s}
.repliable.replie > h2{margin-bottom:0}
.repliable.replie > h2::after{transform:rotate(-90deg)}
.repliable.replie > :not(h2){display:none!important}
.onglets .cacher{flex:0 0 auto;padding:9px 11px;font-size:16px}
#zpanneau{display:none}
body.panneau-cache{grid-template-columns:minmax(0,1fr)}
body.panneau-cache .panneau{display:none}
body.panneau-cache #zpanneau{display:block}
#zplein svg{display:block;margin:auto}
.scene.plein{position:fixed;inset:0;z-index:100;width:100vw;height:100vh;height:100dvh;padding:0;background:#07050a;display:grid;place-items:center}
.scene.plein .plateau{width:min(100vw,calc(100dvh * var(--ratio,1.792)));border-width:0;border-radius:0;box-shadow:none}
body:has(.scene.plein){overflow:hidden}
@media (orientation:portrait){
  .scene.plein::after{content:"↻  Tournez le téléphone pour agrandir la carte";position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;font:700 14px var(--texte);color:#e9d9b0;opacity:.85;pointer-events:none}
}

.lancer-barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px;padding:9px 10px;border:1.5px solid var(--or);border-radius:9px;background:rgba(214,36,58,.08)}
.lancer-barre span{flex:1;font:700 13.5px var(--texte)}
.lancer-barre button{font:700 13.5px var(--texte);border:0;border-radius:7px;padding:8px 12px;cursor:pointer}
.lancer-barre .oui{background:var(--rouge);color:#fff}
.lancer-barre .non{background:transparent;color:var(--doux);border:1px solid var(--trait)}
.lancer-aide{margin:10px 0 2px}
.lancer-barre button:disabled{opacity:.45;cursor:default}
.lancer-barre.vide span{font-weight:500;color:var(--doux)}

/* ---------- fil d'activité ---------- */
.fil-act{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow-y:auto}
.fil-act li{display:grid;grid-template-columns:40px 1fr;gap:6px;padding:5px 0;border-top:1px dashed var(--trait);font-size:12.5px;line-height:1.4}
.fil-act li:first-child{border-top:0}
.fil-act time{color:var(--doux);font-variant-numeric:tabular-nums}
.fil-act span{overflow-wrap:anywhere}
#missionFil{margin-top:10px;padding-top:6px;border-top:1px solid var(--trait)}
#missionFil li:first-child span{font-weight:700}
details.act{margin-top:8px}
details.act summary{cursor:pointer;font:700 12.5px var(--texte);color:var(--doux)}
details.act summary:hover{color:var(--encre)}
.fiche-act .fa-titre{margin:10px 0 0!important;font-weight:700;color:var(--encre)!important;font-size:13px!important}

/* ---------- réunion : la parole des agents ---------- */
.bulle-txt.longue{white-space:normal;max-width:230px;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:12px;line-height:1.35;padding:5px 9px}
.chat-fil li.agent{align-self:flex-start;background:#3a2a1c;color:#f5e6c8;border-left:3px solid var(--or);border-bottom-left-radius:4px}
@media (max-width:700px){.bulle-txt.longue{max-width:160px;font-size:10.5px}}