:root { --ink:#1b1b29; --mute:#6b6b7b; --line:#e3e1db; --bg:#f6f5f1; --acc:#3b4cca; --ok:#1d7a46; --bad:#b3261e; --warn:#a86200; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }   /* l'attribut hidden l'emporte sur display:flex/grid */
body { margin:0; font:14px/1.5 system-ui, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
.top { display:flex; gap:1rem; align-items:center; padding:.6rem 1rem; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; flex-wrap:wrap; }
.brand { font-size:1.05rem; }
.spacer { flex:1; }
.muted { color:var(--mute); } .small { font-size:.85rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem; }
h2 { font-size:1.05rem; margin:0 0 .6rem; } h3 { font-size:.95rem; margin:1rem 0 .4rem; }
textarea, input, select { font:inherit; padding:.45rem .55rem; border:1px solid var(--line); border-radius:6px; width:100%; }
select { width:auto; }
.row { display:flex; gap:.5rem; align-items:center; margin-top:.6rem; flex-wrap:wrap; }
button { font:inherit; padding:.45rem .9rem; border-radius:6px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer; }
button.ghost { background:#fff; color:var(--acc); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button.small { padding:.15rem .5rem; font-size:.8rem; }
button.linkish { background:none; border:0; padding:0; color:var(--acc); text-decoration:underline; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
a { color:var(--acc); }

/* onglets (modules) */
.tabs { display:flex; gap:.3rem; flex-wrap:wrap; }
.tab { background:#fff; color:var(--ink); border:1px solid transparent; padding:.35rem .7rem; }
.tab.active { border-color:var(--acc); color:var(--acc); }
.tab.disabled { color:var(--mute); cursor:default; }
.tab .soon { margin-left:.4rem; font-size:.7rem; background:#f0efe9; color:var(--mute); border-radius:999px; padding:0 .4rem; }
.module-panel { padding:1rem; max-width:720px; }
.soon-box { background:var(--bg); padding:.6rem; border-radius:6px; color:var(--mute); }

/* mise en page : arborescence | demande | apercu */
.layout { display:grid; grid-template-columns:270px minmax(320px, 1fr) minmax(420px, 1.3fr); gap:1rem; padding:1rem; align-items:start; }
.work { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.side { position:sticky; top:4rem; max-height:calc(100vh - 5rem); overflow:auto; }
/* arborescence (chantier L) : role tree, dossiers repliables (aria-expanded), recherche, panneau repliable sur smartphone */
.side-head { display:flex; align-items:center; gap:.5rem; justify-content:space-between; }
.side-head h2 { margin:0; }
#tree-toggle { display:none; }
.side-current { display:none; margin:.3rem 0 .4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-current strong { color:var(--acc); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#tree-q { margin:.2rem 0 .3rem; }
.found { margin:0 0 .3rem; }
.tree, .tree ul { list-style:none; margin:0; padding:0; }
.tree ul { padding-left:.55rem; border-left:1px solid var(--line); margin-left:.55rem; }
.tree li[aria-expanded="false"] > ul { display:none; }
.tree li[role="treeitem"] { outline:none; }
.tree .node { display:flex; align-items:flex-start; gap:.3rem; width:100%; border-radius:6px; padding:.25rem .35rem; cursor:pointer; min-width:0; }
.tree .node:hover { background:var(--bg); }
.tree li[role="treeitem"]:focus-visible > .node { outline:2px solid var(--acc); outline-offset:-2px; }
.tree .node.sel { background:#e7e9fb; color:var(--acc); }
.tree .node.sel .lb { font-weight:600; }
.tree .node-site .lb { font-weight:600; }
.tree .chev { flex:none; width:.9rem; height:1.3rem; position:relative; }
.tree li[aria-expanded] > .node > .chev::before { content:""; position:absolute; left:.2rem; top:.45rem; width:.38rem; height:.38rem; border:solid var(--mute); border-width:0 2px 2px 0; transform:rotate(-45deg); transition:transform .12s; }
.tree li[aria-expanded="true"] > .node > .chev::before { transform:rotate(45deg); top:.32rem; }
.tree .node-site > .chev::before { display:none; }
.tree .nl { display:flex; flex-direction:column; min-width:0; flex:1; }
.tree .lb, .tree .nu { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree .nu { font-size:.75rem; color:var(--mute); }
.tree .cnt { flex:none; font-size:.72rem; background:#f0efe9; color:var(--mute); border-radius:999px; padding:0 .45rem; margin-top:.15rem; }
.tree .ti-folder > .node .lb { font-weight:600; }
.tree .ti-all > .node .lb { font-style:italic; color:var(--acc); }
@media (prefers-reduced-motion: reduce) { .tree .chev::before { transition:none; } }

.target { margin:0 0 .5rem; }
.chips { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin:0 0 .5rem; }
.chip { display:inline-flex; align-items:center; gap:.3rem; background:#e7e9fb; color:var(--acc); border-radius:999px; padding:.1rem .2rem .1rem .6rem; font-size:.85rem; max-width:100%; }
.chip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-x { background:none; border:0; color:var(--acc); padding:0 .35rem; font-size:1rem; line-height:1; }
.chip-commun { background:#fdf1d8; color:#7a4b00; }
.chip-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; background:#7a4b00; color:#fff; border-radius:999px; padding:0 .4rem; }
.commun-note { margin:0 0 .5rem; background:#fdf1d8; color:#5c3900; border-left:3px solid #c98a1a; padding:.4rem .6rem; border-radius:6px; }
button.on { background:var(--acc); color:#fff; }
.pickhint { margin:0 0 .5rem; background:#e7e9fb; color:var(--acc); padding:.4rem .6rem; border-radius:6px; font-size:.85rem; }
.drop { margin-top:.6rem; border:1px dashed var(--line); border-radius:6px; padding:.6rem; color:var(--mute); font-size:.9rem; }
.drop.over { border-color:var(--acc); background:#f2f3fd; }
.filelist { list-style:none; margin:.4rem 0 0; padding:0; }
.filelist li { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.2rem 0; font-size:.9rem; }

.prompt { white-space:pre-wrap; background:var(--bg); padding:.5rem; border-radius:6px; margin:0 0 .3rem; }
.state { font-weight:600; margin:.6rem 0; }
.state.st-review, .state.st-validated { color:var(--ok); }
.state.st-question { color:var(--acc); }
.state.st-refused, .state.st-failed, .state.st-timeout { color:var(--bad); }
.progress { height:6px; background:#e7e9fb; border-radius:999px; overflow:hidden; position:relative; }
.progress span { position:absolute; left:-40%; width:40%; top:0; bottom:0; background:var(--acc); border-radius:999px; animation:slide 1.4s ease-in-out infinite; }
@keyframes slide { from { left:-40%; } to { left:100%; } }
@media (prefers-reduced-motion: reduce) { .progress span { animation:none; left:0; width:100%; opacity:.5; } }
.summary p { margin:.25rem 0; }
.links { margin:.2rem 0; padding-left:1.2rem; }
.notice { color:var(--warn); margin:.3rem 0; }
.qform fieldset { border:1px solid var(--line); border-radius:6px; margin:.6rem 0; padding:.5rem .7rem; }
.qform legend { font-weight:600; padding:0 .3rem; }
.qform .choice { display:block; padding:.15rem 0; cursor:pointer; }
.qform .choice input { width:auto; }
.qform .q-text { margin-top:.3rem; }

.history { list-style:none; margin:0; padding:0; }
.history li { padding:.5rem .4rem; border-bottom:1px solid var(--line); cursor:pointer; border-radius:6px; }
.history li.sel { background:#f2f3fd; }
.history .h-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.history .h-prompt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history button { margin-top:.3rem; }
.badge { font-size:.75rem; padding:.1rem .5rem; border-radius:999px; background:#eee; white-space:nowrap; }
.st-review, .st-validated { background:#e3f3ea; color:var(--ok); }
.st-running, .st-building, .st-queued, .st-question { background:#e7e9fb; color:var(--acc); }
.st-failed, .st-refused, .st-timeout { background:#fbe6e4; color:var(--bad); }
.st-cancelled, .st-reverted, .st-no_change, .st-interrupted, .st-answered { background:#f0efe9; color:var(--mute); }
.state.st-review, .state.st-validated, .state.st-question, .state.st-refused, .state.st-failed, .state.st-timeout,
.state.st-cancelled, .state.st-reverted, .state.st-no_change, .state.st-interrupted, .state.st-answered,
.state.st-running, .state.st-building, .state.st-queued { background:none; }

.preview { position:sticky; top:4rem; display:flex; flex-direction:column; }
.pv-head { margin-top:0; margin-bottom:.5rem; } .pv-head h2 { margin:0; }

/* vues ordinateur / tablette / smartphone : l'iframe a la VRAIE largeur de l'appareil (les media queries du site
   s'appliquent), puis elle est reduite par transform: scale() (calcul dans app.js, via CSSOM : pas de style en ligne) */
.pv-devices { margin:0 0 .5rem; gap:.4rem; }
.devices { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.device { display:inline-flex; align-items:center; gap:.35rem; background:#fff; color:var(--ink); border:0; border-radius:0; padding:.3rem .6rem; font-size:.85rem; }
.device + .device { border-left:1px solid var(--line); }
.device:hover { background:var(--bg); }
.device[aria-pressed="true"] { background:#e7e9fb; color:var(--acc); font-weight:600; }
.device:focus-visible, #rotate:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }
#rotate { display:inline-flex; align-items:center; gap:.3rem; }
.pv-size { white-space:nowrap; }
.pv-stage { position:relative; height:calc(100vh - 11rem); min-height:420px; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; border-radius:8px; }
.pv-stage[data-device="desktop"] { align-items:flex-start; }
.pv-stage[data-device="tablet"], .pv-stage[data-device="mobile"] { background:#ecebe6; }
.pv-box { box-sizing:content-box; position:relative; flex:none; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:8px; }
.pv-stage[data-device="tablet"] .pv-box, .pv-stage[data-device="mobile"] .pv-box { border:2px solid #2b2b38; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.pv-box iframe { display:block; position:absolute; left:0; top:0; border:0; background:#fff; transform-origin:0 0; }
.viewscope { margin:0 0 .5rem; background:#f2f3fd; border-radius:6px; padding:.4rem .6rem; }
.viewscope p { margin:0 0 .2rem; }
.viewscope .choice { display:flex; gap:.4rem; align-items:center; cursor:pointer; padding:.1rem 0; }
.viewscope input { width:auto; margin:0; }

.flash { position:fixed; top:4rem; left:50%; transform:translateX(-50%); z-index:5; background:#e3f3ea; color:var(--ok); border:1px solid #bfe3cd; padding:.55rem 1rem; border-radius:8px; max-width:min(640px, 92vw); }
.flash.bad { background:#fbe6e4; color:var(--bad); border-color:#f1c4bf; }

.login-body { display:grid; place-items:center; min-height:100vh; }
.login { background:#fff; padding:2rem; border-radius:10px; border:1px solid var(--line); width:min(360px, 92vw); display:grid; gap:.8rem; }
.login h1 { margin:0; font-size:1.3rem; } .login .error { color:var(--bad); min-height:1.2em; margin:0; }
.login label { display:grid; gap:.3rem; }
@media (max-width: 1200px) { .layout { grid-template-columns:250px 1fr; } .preview { grid-column:1 / -1; position:static; } }
@media (max-width: 760px) { .layout { grid-template-columns:1fr; } .side { position:static; max-height:none; }
  #tree-toggle { display:inline-block; }
  .side-current { display:block; }               /* choix courant visible meme liste masquee */
  .tree { max-height:55vh; overflow:auto; }      /* liste longue : defile dans le panneau, l'apercu reste accessible */
  .tree .node { padding:.4rem .35rem; }          /* cibles tactiles plus hautes */
  .top { position:static; }   /* en-tete haut sur smartphone : non collant, pour laisser l'apercu a l'ecran */
  .pv-stage { height:calc(100vh - 8rem); }
  .device { padding:.3rem .45rem; } }
@media (max-width: 400px) { .layout { padding:.5rem; gap:.5rem; } .preview.card { padding:.6rem; } .device { gap:.2rem; font-size:.8rem; } }

/* --- lot 1 : garde-fous, retours, controle humain, agence --- */
.banner { background:#fff4d6; border-bottom:1px solid #e8c766; padding:.5rem 1rem; }
.safety .row { flex-wrap:wrap; gap:.5rem; }
.impact { font-weight:600; margin:.4rem 0; }
.imp-faible { color:#1f7a3a; } .imp-moyen { color:#a26300; } .imp-eleve { color:#b3261e; }
.risks { margin:.3rem 0 .6rem 1.2rem; }
.legal { border:1px solid #e0b4b0; background:#fdf1f0; padding:.6rem .8rem; border-radius:6px; margin:.5rem 0; }
.sensible { border:1px solid #e3c27a; background:#fff8e8; padding:.6rem .8rem; border-radius:6px; margin:.5rem 0; }
.sensible h3 { margin:.2rem 0 .4rem; }
.sensible label { display:block; margin:.4rem 0 .1rem; }
.sensible label.choice { display:flex; gap:.5rem; align-items:flex-start; font-weight:600; }
.sensible input[type=checkbox] { width:auto; flex:none; margin:.25rem 0 0; }
.sensible input[type=text], .sensible textarea { width:100%; box-sizing:border-box; margin:.2rem 0 .5rem; }
.claims { padding-left:1.1rem; margin:.3rem 0; }
.claims li { margin:.35rem 0; }
.claims .claim-st { display:block; font-size:.85em; color:var(--mute); }
.claims li.to-check .claim-st { color:var(--bad); font-weight:600; }
.mk-ctx { font-size:.85em; color:var(--mute); margin:.1rem 0; }
.redir { border:1px solid #d7dbe8; padding:.5rem .8rem; border-radius:6px; margin:.5rem 0; }
.redir-item select { max-width:100%; margin-right:.5rem; }
body.agence main { max-width:1200px; margin:1rem auto; }
.agence table { border-collapse:collapse; width:100%; margin:.5rem 0 1rem; font-size:.9rem; }
.agence th, .agence td { border-bottom:1px solid #e3e3e3; padding:.3rem .5rem; text-align:left; vertical-align:top; }
.fonts .font { border-top:1px solid #e3e3e3; padding:.5rem 0; }
.fonts h2 { font-size:2rem; font-weight:400; margin:.2rem 0; }
.fonts .sample { font-size:1.4rem; margin:.2rem 0; }

/* Marque Studio GreenRed (2026-11-03) : logo GreenRed (web/marque/, tools/marque_logo.py) */
.login-logo { display:block; width:200px; height:auto; margin:0 auto .2rem; }
.login h1 { text-align:center; }
.brand { display:inline-flex; align-items:center; gap:.5rem; }
.brand-logo { width:120px; height:auto; display:block; }