:root{
  --or:#c8912a; --or-clair:#e8b84b;
  --fond:#f4f2ee; --carte:#fff; --texte:#1d1b16; --gris:#6b675e;
  --bord:#e0dcd2; --rouge:#b3261e; --vert:#1f7a3f; --bleu:#1c5d99;
}
@media (prefers-color-scheme:dark){
  :root{--fond:#16150f; --carte:#211f18; --texte:#f0ede4; --gris:#a29d90;
        --bord:#3a372c; --rouge:#f2896f; --vert:#6ed08f; --bleu:#7bb3e8;}
}
*{box-sizing:border-box}
/* L'attribut hidden doit gagner contre toute regle display de cette feuille
   (.centre est en display:grid, sinon l'ecran de connexion reste visible
   apres la connexion). */
[hidden]{display:none !important}
body{margin:0;font:15px/1.5 system-ui,"Segoe UI",sans-serif;background:var(--fond);color:var(--texte)}
h1{font-size:1.4rem;margin:0 0 .2em}
h2{font-size:1.15rem;margin:0 0 .6em}
h3{font-size:1rem;margin:1.6em 0 .5em;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.centre{min-height:100vh;display:grid;place-items:center;padding:1rem}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:1.5rem;
       box-shadow:0 1px 3px rgba(0,0,0,.06)}
.carte.large{max-width:1100px;margin:1.5rem auto}
.sous-titre{color:var(--gris);margin:0 0 1.2em}
.aide{color:var(--gris);font-size:.9rem}
label{display:block;margin:.6em 0;font-weight:500}
input{display:block;width:100%;margin-top:.3em;padding:.55em .7em;font:inherit;
      background:var(--fond);color:var(--texte);border:1px solid var(--bord);border-radius:7px}
input:focus{outline:2px solid var(--or);outline-offset:1px}
small{display:block;color:var(--gris);font-weight:400;font-size:.8rem;margin-top:.25em}
button{font:inherit;padding:.55em 1.1em;border-radius:7px;border:1px solid var(--bord);
       background:var(--carte);color:var(--texte);cursor:pointer}
button:hover{border-color:var(--or)}
button.primaire{background:var(--or);border-color:var(--or);color:#fff;font-weight:600}
button.lien{border:none;background:none;color:var(--bleu);padding:0 .4em;text-decoration:underline}
/* --- Champ mot de passe avec bouton oeil --- */
/* la marge passe sur le conteneur, sinon le bouton (positionne sur lui) est
   decale de la hauteur de marge de l'input */
.champ-mdp{position:relative;margin:.3em 0 .6em}
.champ-mdp input{margin-top:0;padding-right:2.9em}
#btn-oeil{position:absolute;top:0;right:0;height:100%;width:2.7em;
  display:grid;place-items:center;padding:0;border:none;background:none;
  color:var(--gris);border-radius:0 7px 7px 0;cursor:pointer}
#btn-oeil:hover{color:var(--texte)}
#btn-oeil:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
/* l'icone affichee depend de l'etat du bouton */
#btn-oeil .oeil-ferme{display:none}
#btn-oeil[aria-pressed="true"] .oeil-ouvert{display:none}
#btn-oeil[aria-pressed="true"] .oeil-ferme{display:block}
#btn-oeil[aria-pressed="true"]{color:var(--or)}

form.carte{width:min(370px,100%)}
form.carte label[for=f-mdp]{margin-bottom:.3em}
form.carte button[type=submit]{width:100%;margin-top:1em;background:var(--or);border-color:var(--or);color:#fff;font-weight:600}
.erreur{color:var(--rouge);min-height:1.2em;margin:.6em 0 0;font-size:.9rem;white-space:pre-wrap}
header{display:flex;align-items:center;gap:.8em;padding:.7em 1.2em;background:var(--carte);
       border-bottom:1px solid var(--bord);flex-wrap:wrap}
header nav button.actif{border-color:var(--or);font-weight:600}
.spacer{flex:1}
#qui{color:var(--gris);font-size:.9rem}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 1.2em}
.modes{display:flex;gap:.4em;margin:1.4em 0 .2em;flex-wrap:wrap}
.modes button.actif{background:var(--or);border-color:var(--or);color:#fff;font-weight:600}

/* --- Mode developpement --- */
#bandeau-dev{background:repeating-linear-gradient(45deg,#7a4f00,#7a4f00 12px,#8d5c00 12px,#8d5c00 24px);
  color:#fff;text-align:center;padding:.45em 1em;font-size:.85rem;font-weight:600;
  letter-spacing:.03em}
#scenarios{border:1px dashed var(--bord);border-radius:9px;padding:.8em 1em;margin-top:1.2em}
#scenarios p{margin:0 0 .6em}
.boutons-scenarios{display:flex;gap:.4em;flex-wrap:wrap}
.boutons-scenarios button{font-size:.85rem;padding:.4em .8em}
.boutons-scenarios button.sc-ok{border-color:var(--vert);color:var(--vert)}
.boutons-scenarios button.sc-refus{border-color:var(--rouge);color:var(--rouge)}
.boutons-scenarios button:hover{background:var(--fond)}
.actions{display:flex;gap:.7em;margin-top:1.2em;flex-wrap:wrap}
.recap{background:var(--fond);border:1px solid var(--bord);border-left:4px solid var(--or);
       border-radius:8px;padding:.9em 1.1em;margin-top:1.2em;font-size:.93rem}
.recap dl{display:grid;grid-template-columns:auto 1fr;gap:.25em 1em;margin:.5em 0 0}
.recap dt{color:var(--gris)}
.recap dd{margin:0;font-variant-numeric:tabular-nums}
.avert{color:var(--rouge);font-weight:600;margin-top:.7em}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.5em .6em;border-bottom:1px solid var(--bord);white-space:nowrap}
th{color:var(--gris);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:var(--fond)}
.scroll-x{overflow-x:auto}
.badge{display:inline-block;padding:.1em .6em;border-radius:99px;font-size:.8rem;font-weight:600}
.b-attente{background:#e8e4d8;color:#6b5f2e}
.b-cours{background:#dce9f7;color:var(--bleu)}
.b-termine{background:#d8ecdf;color:var(--vert)}
.b-echec{background:#f7dcd8;color:var(--rouge)}
.b-haute{background:var(--or);color:#fff}
.b-moyenne{background:#efe0bd;color:#7a5c14}
.b-faible{background:var(--fond);color:var(--gris)}
.barre{height:6px;background:var(--bord);border-radius:99px;overflow:hidden;margin-top:.35em;width:180px}
.barre span{display:block;height:100%;background:var(--or);transition:width .4s}
/* Un clic selectionne la coordonnee entiere : filet de securite si la copie
   automatique est refusee par le navigateur (contexte non securise, permission). */
td.coord{user-select:all;-webkit-user-select:all;cursor:text;
  font-variant-numeric:tabular-nums}

/* --- Bouton de copie des coordonnees --- */
button.copier{font-size:.82rem;padding:.25em .7em;border-radius:6px;
  border:1px solid var(--bord);background:var(--fond);color:var(--texte)}
button.copier:hover{border-color:var(--or)}
button.copier.copie{background:var(--vert);border-color:var(--vert);color:#fff}
#btn-copier-tout{font-size:.8rem;text-transform:none;letter-spacing:normal}
#btn-copier-tout.copie{color:var(--vert);font-weight:600}

.fichiers{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}
.fichiers a{padding:.45em .9em;border:1px solid var(--bord);border-radius:7px;
            text-decoration:none;color:var(--texte);font-size:.9rem;background:var(--carte)}
.fichiers a:hover{border-color:var(--or)}
iframe{width:100%;height:520px;border:1px solid var(--bord);border-radius:10px;background:#fff}
pre{background:var(--fond);border:1px solid var(--bord);border-radius:8px;padding:.8em;
    overflow-x:auto;font-size:.8rem;max-height:320px}
details{margin-top:1.5em}
summary{cursor:pointer;color:var(--gris)}

/* ================= DISCUSSION AVEC L'ASSISTANT ================= */
/* Panneau lateral : il ne remplace pas l'ecran des resultats, on doit pouvoir
   lire le tableau des cibles en discutant. Sur telephone, il prend tout. */
#chat{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:20;
  display:flex;flex-direction:column;background:var(--carte);
  border-left:1px solid var(--bord);box-shadow:-4px 0 18px rgba(0,0,0,.13)}
#chat header{border-bottom:1px solid var(--bord);flex-wrap:nowrap}
#chat-fermer{font-size:1.1rem;text-decoration:none}
#chat-quota{white-space:nowrap}

.messages{flex:1;overflow-y:auto;padding:1em;display:flex;flex-direction:column;gap:.8em}
#assistant-messages{height:min(58vh,520px);border:1px solid var(--bord);
  border-radius:10px;background:var(--fond);margin-top:1em}
.bulle{max-width:88%;padding:.6em .85em;border-radius:12px;font-size:.93rem;
  white-space:normal;overflow-wrap:anywhere}
.bulle.moi{align-self:flex-end;background:var(--or);color:#fff;border-bottom-right-radius:3px}
.bulle.ia{align-self:flex-start;background:var(--fond);border:1px solid var(--bord);
  border-bottom-left-radius:3px}
#assistant-messages .bulle.ia{background:var(--carte)}
.bulle.erreur{align-self:stretch;background:none;border:1px solid var(--rouge);color:var(--rouge)}
.bulle p{margin:.4em 0}
.bulle p:first-child{margin-top:0}
.bulle p:last-child{margin-bottom:0}
.bulle code{background:rgba(128,128,128,.18);padding:.05em .35em;border-radius:4px;
  font-size:.88em}
/* Trace des outils : discrete, mais visible — le partenaire doit pouvoir
   constater que la reponse vient de ses donnees et non d'une invention. */
.trace{align-self:flex-start;color:var(--gris);font-size:.8rem;font-style:italic}
.vide{color:var(--gris);font-size:.9rem;text-align:center;margin:auto}

.saisie{display:flex;gap:.5em;padding:.8em;border-top:1px solid var(--bord)}
#assistant-form{border-top:none;padding:.8em 0 0}
.saisie input{margin-top:0}
.saisie button{white-space:nowrap}
.saisie input:disabled,.saisie button:disabled{opacity:.55;cursor:not-allowed}

button.discuter{font-size:.82rem;padding:.25em .7em;border-radius:6px;background:var(--fond)}
#btn-chat-zone{font-size:.85rem;text-transform:none;letter-spacing:normal}

#sup-manques{margin:.5em 0;padding-left:1.2em;font-size:.92rem}
#sup-manques li{margin:.35em 0}
#sup-manques .qui{color:var(--gris)}
#sup-detail{margin-top:1.2em}
.resume dl{display:grid;grid-template-columns:auto 1fr;gap:.3em 1em;margin:.5em 0 0}
.resume dt{color:var(--gris)}
.resume dd{margin:0}

@media (max-width:760px){
  #chat{width:100%}
  .bulle{max-width:95%}
}