/* SALTI Mail V2 — charte : jaune #FFDD00 dominant, blanc en second,
   noir réservé au texte et à quelques touches. PAS de thème sombre (décision 21/07). */

:root{
  --jaune:#FFDD00;
  --jaune-soft:#FFFCE5;
  --surface:#FFFFFF;
  --ink:#000000;
  --txt2:#666666;
  --bord:#E5E5E5;
  --gris-fond:#F7F7F7;
  --vert:#00A859;
  --vert-soft:#E8F7EF;
  --page:#FFDD00;
  --ombre:0 2px 8px rgba(0,0,0,.12);
}

/* 🌤 Clair doux — couleurs SALTI, jaune limité aux accents */
html[data-theme="doux"]{
  --page:#F3F3F0;
}

/* 🌙 Nuit — sombre classique, jaune en accent */
html[data-theme="nuit"]{
  --page:#101010;
  --surface:#1C1C1C;
  --ink:#F0F0F0;
  --txt2:#9C9C9C;
  --bord:#343434;
  --gris-fond:#262626;
  --jaune-soft:#2B2710;
  --vert-soft:#123320;
  --ombre:0 2px 8px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
/* L'attribut hidden gagne TOUJOURS — même sur un élément dont la classe pose
   un display (leçon : .ia-fen{display:flex} rendait la bulle infermable) */
[hidden]{display:none !important}
html{color-scheme:light}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.45;
}

.bandeau-demo{
  max-width:none; margin:14px 16px -4px; padding:8px 14px;
  background:var(--surface); border-left:4px solid var(--ink);
  border-radius:6px; font-size:12.5px; color:var(--txt2); box-shadow:var(--ombre);
}

/* ---------- Cadre app + topbar ---------- */
/* Pleine largeur (demande Dylan 22/07) — l'app occupe tout l'écran */
.app{
  max-width:none; margin:14px 16px 40px; border:1px solid var(--bord);
  border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--ombre);
}
header.topbar{
  background:var(--surface); color:var(--ink); display:flex; align-items:center;
  gap:18px; padding:10px 18px; flex-wrap:wrap; border-bottom:3px solid var(--jaune);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px;
       color:var(--ink); text-decoration:none}
.brand img{display:block; border-radius:7px}
nav.tabs{display:flex; gap:4px; margin-left:8px; flex-wrap:wrap}
.tab{
  color:var(--ink); text-decoration:none; font-weight:600;
  padding:7px 13px; border-radius:8px;
}
.tab:hover{background:var(--jaune-soft)}
.tab.active{background:var(--jaune); color:#000}
.tab .count{
  display:inline-block; min-width:18px; text-align:center; margin-left:5px;
  background:var(--jaune); color:#000; border-radius:9px; font-size:11px;
  padding:1px 5px; font-weight:700;
}
.tab.active .count{background:#000; color:var(--jaune)}
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:12px}
.sync{color:var(--txt2); font-weight:600}
.avatar{
  width:30px; height:30px; border-radius:50%; background:#000; color:var(--jaune);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; flex:0 0 auto;
}
.dehors{color:var(--txt2); text-decoration:none; font-size:16px}
.dehors:hover{color:var(--ink)}
.themes{display:inline-flex; gap:2px; background:var(--gris-fond); border-radius:8px; padding:2px}
.btn-theme{border:none; background:none; cursor:pointer; font-size:13px;
           padding:3px 7px; border-radius:6px; line-height:1}
.btn-theme.actif{background:var(--jaune)}

main{padding:20px 22px}

/* ---------- Sections ---------- */
.section{margin-bottom:26px}
.section-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  background:var(--jaune); color:#000; padding:8px 14px; border-radius:8px;
}
.section-head h2{font-size:15px; margin:0; font-weight:800; color:#000}
.section-head .n{color:rgba(0,0,0,.62); font-size:13px; font-weight:600}
.section-head .fold{
  margin-left:auto; border:none; background:none; color:rgba(0,0,0,.62);
  font:inherit; font-size:12.5px; cursor:pointer; font-weight:700;
}
.section-head .fold:hover{color:#000}
.section-head.douce{background:var(--jaune-soft)}
.section-head.douce h2{color:var(--ink)}
.section-head.douce .n,.section-head.douce .fold{color:var(--txt2)}
.section-head.douce .fold:hover{color:var(--ink)}
.section.pliee .repli{display:none}

/* ---------- Rangée mail ---------- */
.mail{border:1px solid var(--bord); border-radius:10px; margin-bottom:8px; background:var(--surface)}
.mail.attente-forte{border-left:4px solid var(--jaune)}
.mail-row{display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer}
.mail-row:hover{background:var(--gris-fond)}
.exp{width:14px; color:var(--txt2); font-size:11px; flex:0 0 auto; transition:transform .15s}
.mail.open .exp{transform:rotate(90deg)}
.who{width:150px; flex:0 0 auto; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who small{display:block; font-weight:500; color:var(--txt2); font-size:11.5px}
.obj{flex:1 1 auto; min-width:0}
.obj .sujet{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.obj .apercu{display:block; color:var(--txt2); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meta{flex:0 0 auto; display:flex; align-items:center; gap:6px}
.quand{color:var(--txt2); font-size:12px; min-width:44px; text-align:right}
.mail.done .mail-row{opacity:.78}
.mail.done .sujet{font-weight:500}

.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px;
  border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap;
}
.chip.groupe{background:var(--jaune); color:#000}
.chip.multi{background:var(--jaune-soft); border:1px solid var(--jaune); color:var(--ink)}
.chip.presence{background:#000; color:var(--jaune)}
.chip.prise{background:var(--jaune-soft); border:1px solid var(--jaune); color:var(--ink)}
.chip.traite{background:var(--vert-soft); color:var(--vert)}
.chip.retour{background:var(--gris-fond); border:1px dashed var(--txt2); color:var(--ink)}
.chip.tag{background:var(--gris-fond); border:1px solid var(--bord); color:var(--txt2); font-weight:500}
.chip.danger{background:#B3261E; color:#fff}
.dot{width:7px; height:7px; border-radius:50%; background:var(--jaune); display:inline-block;
     animation:pulse 1.6s ease-in-out infinite}
.chip.traite .dot{background:var(--vert); animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){ .dot{animation:none} }

/* ---------- Fil déplié ---------- */
.fil{display:none; border-top:1px solid var(--bord); padding:14px 16px 16px}
.mail.open .fil{display:block}
.coord{
  background:var(--jaune-soft); border-left:4px solid var(--jaune); border-radius:6px;
  padding:10px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.coord .titre-coord{font-weight:700; font-size:12.5px}
.coord .legende{font-size:11.5px; color:var(--txt2)}
.message{border:1px solid var(--bord); border-radius:8px; padding:12px 14px; margin-bottom:8px}
.message p{margin:0 0 8px}
.message p:last-child{margin-bottom:0}

/* ---------- Avatars membres ---------- */
.mini{
  width:26px; height:26px; border-radius:50%; background:var(--gris-fond);
  border:1.5px solid var(--bord); color:var(--txt2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; position:relative;
}
.mini.moi{background:#000; color:var(--jaune); border-color:#000}
.mini.lit{border-color:var(--jaune); background:var(--jaune); color:#000}

/* ---------- Dashboard ---------- */
.dash-hello h1{font-size:23px; font-weight:800; margin:0 0 3px}
.dash-hello p{margin:0 0 18px; color:var(--txt2)}
.stats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px}
.stat{
  flex:1 1 150px; border:1px solid var(--jaune); background:var(--jaune-soft);
  border-radius:10px; padding:12px 16px;
}
.stat .gros{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.stat.jaune{background:var(--jaune); border-color:var(--jaune); color:#000}
.stat .lbl{font-size:12px; color:var(--txt2); font-weight:600}
.stat.jaune .lbl{color:rgba(0,0,0,.65)}
.dash-brief{border:1px solid var(--jaune); border-radius:10px; overflow:hidden; background:var(--surface)}
.brief-head{background:var(--jaune); color:#000; font-weight:800; padding:9px 14px;
            display:flex; gap:10px; align-items:center; font-size:13.5px}
.dash-brief ul{margin:0; padding:14px 16px 4px 32px}
.dash-brief li{margin-bottom:9px}
.dash-brief .src{color:var(--txt2); font-size:11.5px; padding:0 16px 12px; margin:4px 0 0}
.lien{font-weight:600; color:var(--ink); cursor:pointer; text-decoration:underline;
      text-decoration-color:var(--jaune); text-decoration-thickness:2.5px; text-underline-offset:2px}
.lien:hover{background:var(--jaune-soft)}

/* ---------- Équipe ---------- */
.roster{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:20px;
        padding:10px 14px; background:var(--jaune-soft); border-left:4px solid var(--jaune);
        border-radius:8px; font-size:12.5px; color:var(--txt2)}
.roster-mail{margin-left:auto}
.defile{overflow-x:auto}
table.equipe{width:100%; border-collapse:collapse; font-size:13px}
table.equipe th{background:var(--jaune); color:#000; text-align:left; font-size:12px;
                padding:8px 12px; font-weight:700}
table.equipe th:first-child{border-radius:8px 0 0 0}
table.equipe th:last-child{border-radius:0 8px 0 0}
table.equipe td{padding:9px 12px; border-bottom:1px solid var(--bord); vertical-align:middle}
table.equipe tr:nth-child(even) td{background:var(--gris-fond)}
.t-sujet{font-weight:600}
.t-de{color:var(--txt2); font-size:12px}
.note-confidentialite{color:var(--txt2); font-size:12px; margin-top:12px}

/* ---------- Cartes / divers ---------- */
.carte{border:1px solid var(--bord); border-radius:10px; padding:14px 16px; background:var(--surface)}
.doux{color:var(--txt2)}
.vide{
  background:var(--jaune-soft); border-left:4px solid var(--jaune); border-radius:8px;
  padding:16px 18px; color:var(--txt2); font-weight:600;
}

/* ---------- Login ---------- */
.page-login{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.login-carte{
  background:var(--surface); border-radius:16px; box-shadow:var(--ombre);
  padding:38px 34px; max-width:400px; text-align:center;
}
.login-carte h1{margin:14px 0 6px; font-size:24px; font-weight:800}
.login-carte p{color:var(--txt2); margin:0 0 20px}
.btn-google{
  display:inline-block; background:#000; color:var(--jaune); font-weight:700;
  padding:11px 22px; border-radius:10px; text-decoration:none;
}
.btn-google:hover{opacity:.88}
.login-note{font-size:11.5px; margin-top:18px}
.login-erreur{
  background:var(--surface); border:2px solid #000; border-radius:8px;
  padding:9px 12px; font-size:12.5px; margin-bottom:16px;
}

/* ---------- Actions d'un fil / contenu ---------- */
.resume{background:var(--jaune-soft); border-left:4px solid var(--jaune); border-radius:6px;
        padding:8px 12px; margin:0 0 10px; font-size:12.5px}
.fil-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.fil-actions .reclass{display:inline-flex; align-items:center; gap:6px; font-size:12px;
                      color:var(--txt2); flex-wrap:wrap}
.fil-actions select{font:inherit; font-size:12px; padding:4px 6px; border:1px solid var(--bord);
                    border-radius:6px; background:var(--surface)}
.btn{border:1px solid var(--bord); background:var(--surface); color:var(--ink);
     font:inherit; font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:8px;
     cursor:pointer; text-decoration:none; display:inline-block}
.btn:hover{border-color:var(--ink)}
.msg-entete{font-size:12px; font-weight:700; margin-bottom:6px}
.msg-corps{width:100%; height:320px; border:none; background:#fff; border-radius:4px}

/* ---------- Sélection multiple ---------- */
.mail.sel{outline:2.5px solid var(--jaune); outline-offset:-1px; background:var(--jaune-soft)}
.bulk{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(90px);
  background:#000; color:var(--jaune); display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:12px; z-index:35; transition:transform .2s;
  font-weight:700; font-size:13px;
}
.bulk.on{transform:translateX(-50%) translateY(0)}
.bulk .btn{background:var(--jaune); border-color:var(--jaune); color:#000}

/* ---------- Pastille refresh ---------- */
.refresh-pill{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  background:#000; color:var(--jaune); border:none; font:inherit; font-weight:700;
  font-size:12.5px; padding:9px 16px; border-radius:20px; cursor:pointer; z-index:35;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}

/* ---------- Boîte mail façon Gmail : libellés / liste / volet ---------- */
.gm{display:grid; grid-template-columns:225px minmax(0,1.15fr) minmax(0,1fr);
    gap:16px; align-items:start}
.gm-side{position:sticky; top:14px}
.gm-side .item{
  display:flex; align-items:center; gap:8px; padding:8px 14px; margin-bottom:2px;
  border-radius:0 18px 18px 0; cursor:pointer; font-weight:600; font-size:13px;
  user-select:none;
}
.gm-side .item:hover{background:var(--jaune-soft)}
.gm-side .item.actif{background:var(--jaune); color:#000}
.gm-side .item .n{
  margin-left:auto; background:var(--gris-fond); border:1px solid var(--bord);
  border-radius:10px; padding:0 7px; font-size:11px; font-variant-numeric:tabular-nums;
}
.gm-side .item.actif .n{background:#000; color:var(--jaune); border-color:#000}
.side-titre{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
            color:var(--txt2); margin:14px 0 6px 14px; display:flex; align-items:center; gap:6px}
.gm-liste{min-width:0}
/* Onglets Non lus / 👁 Lus — pilule dans la charte (noir + jaune) */
.gm-outils{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.gm-tri{
  font:inherit; font-size:12px; font-weight:700; color:var(--txt2);
  padding:6px 10px; border:2px solid #000; border-radius:999px;
  background:var(--surface); cursor:pointer;
}
.gm-tri:focus-visible{outline:2px solid #000; outline-offset:2px}
.lu-tabs{
  display:flex; width:max-content; margin:0; overflow:hidden;
  border:2px solid #000; border-radius:999px; background:var(--surface);
}
.lu-tabs button{
  border:none; background:none; font:inherit; font-size:12.5px; font-weight:700;
  padding:7px 16px; cursor:pointer; color:var(--txt2);
}
.lu-tabs button[aria-pressed="true"]{background:var(--jaune); color:#000}
.lu-tabs button:focus-visible{outline:2px solid #000; outline-offset:-2px}
.gm-div{
  display:none; font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--txt2); margin:14px 0 8px;
  border-bottom:2.5px solid var(--jaune); padding-bottom:4px;
}
.alerte-secu{
  background:#FDECEA; border-left:4px solid #B3261E; color:#5f1a15;
  border-radius:6px; padding:10px 14px; margin-bottom:12px; font-size:13px;
}
html[data-theme="nuit"] .alerte-secu{background:#3a1512; color:#f3c1bc}
.alerte-secu .btn{margin-left:6px}
.gerer-libelles{margin:14px 6px 0 14px}
.gerer-libelles summary{cursor:pointer; font-size:12px; font-weight:700; color:var(--txt2)}
.gerer-libelles summary:hover{color:var(--ink)}
.gerer-corps{margin-top:8px; display:flex; flex-direction:column; gap:6px}
.gerer-ligne{display:flex; gap:6px; align-items:center}
.gerer-ligne input[type=text]{
  flex:1; min-width:0; border:1px solid var(--bord); border-radius:6px;
  padding:4px 8px; font:inherit; font-size:12px; background:var(--surface); color:var(--ink);
}
.gerer-ligne .btn{padding:4px 8px; font-size:11.5px}
.mail.ouvert{outline:2.5px solid var(--jaune); outline-offset:-1px; background:var(--jaune-soft)}

.gm-volet{
  border:2px solid var(--jaune); border-radius:12px; background:var(--surface);
  position:sticky; top:14px; max-height:calc(100vh - 40px); overflow:auto; min-width:0;
}
.volet-head{
  background:var(--jaune); color:#000; display:flex; align-items:center; gap:10px;
  padding:10px 14px; position:sticky; top:0; z-index:2;
}
.volet-sujet{font-weight:800; font-size:13.5px; flex:1; min-width:0}
#volet-fermer{border:none; background:none; color:#000; font-weight:800; font-size:15px;
              cursor:pointer; padding:2px 8px; border-radius:6px}
#volet-fermer:hover{background:rgba(0,0,0,.1)}
.volet-corps{padding:14px}
.volet-corps .fil{display:block; border-top:none; padding:0}
.volet-placeholder{padding:20px 6px}

@media (max-width:1150px){
  .gm{grid-template-columns:200px minmax(0,1fr)}
  .gm-volet{position:fixed; inset:10px; z-index:30; display:none; max-height:none}
  .gm-volet.mobile-on{display:block}
}
/* 📱 Mobile : la sidebar devient un TIROIR ouvert par le burger ☰ */
.gm-burger{display:none}
.gm-voile{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:80}
@media (max-width:720px){
  .gm{display:block}
  .gm-burger{
    display:flex; align-items:center; gap:8px; width:100%;
    border:1px solid var(--bord); background:var(--surface); color:var(--ink);
    border-radius:10px; font:inherit; font-size:13.5px; font-weight:700;
    padding:11px 14px; margin-bottom:10px; cursor:pointer;
  }
  .gm-side{
    position:fixed; top:0; left:0; bottom:0; width:82vw; max-width:320px;
    background:var(--surface); z-index:85; padding:14px; overflow-y:auto;
    transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--ombre);
    max-height:none;
  }
  .gm-side.ouverte{transform:none}
  @media (prefers-reduced-motion: reduce){ .gm-side{transition:none} }
}

/* (ancien mode encarts conservé pour les autres pages) */
.colonnes{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
@media (max-width:1100px){ .colonnes{grid-template-columns:1fr} }

/* ---------- Boîte mail unifiée : encarts ---------- */
.encart{border:2px solid var(--jaune); border-radius:12px; margin-bottom:20px;
        background:var(--surface); overflow:hidden}
.encart-corps{padding:2px 14px 14px}
.encart.plie .encart-corps{display:none}
.encart-head{background:var(--jaune); color:#000; display:flex; align-items:center;
             gap:12px; flex-wrap:wrap; padding:10px 16px;
             font-size:14.5px; cursor:pointer; user-select:none}
.enc-note{color:rgba(0,0,0,.6); font-size:12px; font-weight:600}
.enc-roster{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.enc-compteur{margin-left:auto; background:#000; color:var(--jaune); font-weight:800;
              font-size:11.5px; padding:3px 10px; border-radius:12px}
.mini-titre{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800;
            text-transform:uppercase; letter-spacing:.5px; color:var(--txt2);
            margin:16px 0 8px; border-bottom:1px solid var(--bord); padding-bottom:5px}
.mini-titre span{background:var(--jaune-soft); border:1px solid var(--jaune);
                 border-radius:10px; padding:0 8px; font-size:10.5px; color:var(--ink)}
.mini-titre .fold{margin-left:auto; border:none; background:none; color:var(--txt2);
                  font:inherit; font-size:11px; cursor:pointer; font-weight:700;
                  text-transform:none; letter-spacing:0}
.mini-titre .fold:hover{color:var(--ink)}

/* ---------- Parcours de démarrage ---------- */
.tour{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
      gap:12px; margin-bottom:20px}
.tour-carte h3{margin:0 0 8px; font-size:14.5px; border-bottom:2.5px solid var(--jaune);
               padding-bottom:6px}
.tour-carte p{margin:0}
.tri-carte{margin-bottom:10px; border-left:4px solid var(--jaune)}
.tri-carte p{margin:0 0 10px}
.tri-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------- Listes admin ---------- */
.liste-simple{list-style:none; margin:0 0 12px; padding:0}
.liste-simple li{padding:6px 0; border-bottom:1px solid var(--bord);
                 display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.liste-simple li:last-child{border-bottom:none}
.btn-claim{background:var(--jaune); border-color:var(--jaune); font-weight:700}

/* ---------- Mon compte ---------- */
textarea{
  width:100%; border:1px solid var(--bord); border-radius:8px; padding:10px 12px;
  font:inherit; font-size:13px; background:var(--surface); color:var(--ink); resize:vertical;
}
textarea:focus{outline:2px solid var(--jaune); border-color:var(--jaune)}
.aide-ia{background:var(--jaune-soft); border-left:4px solid var(--jaune);
         border-radius:8px; padding:10px 14px; margin:12px 0}
.aide-ia summary{cursor:pointer; font-weight:700; font-size:13px}
.aide-corps{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.aide-corps label{font-size:12.5px; font-weight:600}
.aide-corps input[type=text]{
  width:100%; border:1px solid var(--bord); border-radius:8px; padding:8px 11px;
  font:inherit; font-size:13px; background:var(--surface); margin-top:3px;
}
.aide-corps input[type=text]:focus{outline:2px solid var(--jaune); border-color:var(--jaune)}
.ligne-ajout{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px}
.ligne-ajout input[type=text],.ligne-ajout select{
  border:1px solid var(--bord); border-radius:8px; padding:7px 10px; font:inherit; font-size:12.5px;
  background:var(--surface);
}
.ligne-ajout label{font-size:12.5px; color:var(--txt2)}
.carte form p{margin:12px 0 0}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(80px);
  background:#000; color:var(--jaune); font-weight:600; font-size:13px;
  padding:10px 18px; border-radius:10px; transition:transform .25s; z-index:40;
}
.toast.on{transform:translateX(-50%) translateY(0)}

a:focus-visible,button:focus-visible{outline:2px solid #000; outline-offset:2px}
.version-tag{
  position:fixed; left:8px; bottom:6px; z-index:35; font-size:10px;
  color:var(--txt2); opacity:.65; pointer-events:none; user-select:none;
}
@media (max-width:720px){ .version-tag{bottom:62px} }

/* ---------- Chantier 3 : réponse intégrée ---------- */
.repondre{
  margin-top:14px; border:1px solid var(--bord); border-radius:10px;
  padding:12px 14px; background:var(--surface);
}
.rep-titre{
  display:flex; align-items:center; gap:12px; font-weight:700; font-size:12.5px;
  margin-bottom:8px; flex-wrap:wrap;
}
.rep-ton{
  font:inherit; font-size:12px; border:1px solid var(--bord); border-radius:6px;
  padding:2px 6px; background:var(--surface); color:var(--ink);
}
.rep-tous{
  font-weight:500; color:var(--txt2); font-size:12px;
  display:inline-flex; gap:5px; align-items:center;
}
.rep-texte{
  width:100%; min-height:92px; resize:vertical; font:inherit; font-size:13px;
  border:1px solid var(--bord); border-radius:8px; padding:10px 12px;
  background:var(--surface); color:var(--ink);
}
.rep-texte:focus{outline:2px solid var(--jaune); border-color:var(--jaune)}
.rep-boutons{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; align-items:center}
.rep-joindre{display:inline-flex; align-items:center; gap:4px; cursor:pointer}
.rep-pjs{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.rep-pjs:empty{display:none}
.rep-pj-puce{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--jaune);
  background:var(--jaune-soft); border-radius:14px; padding:3px 10px; font-size:12px;
}
.rep-pj-x{border:none; background:none; cursor:pointer; font-size:12px; padding:0 2px; color:var(--txt2)}
.rep-pj-x:hover{color:var(--ink)}
.rep-envoyer{background:var(--jaune); border-color:var(--jaune); font-weight:700; color:#000}

/* ---------- Fil façon chat (bulles) + 📞 contacts internes ---------- */
/* ---------- 🤖 Bulle IA SALTI (Chantier 5) ---------- */
.ia-pastille{
  position:fixed; bottom:20px; right:18px; z-index:70;
  width:46px; height:46px; border-radius:50%; border:2px solid var(--jaune);
  background:#000; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--ombre); touch-action:none;
}
.ia-pastille:hover{transform:scale(1.06)}
.ia-badge{
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px;
  background:#B3261E; color:#fff; border-radius:10px; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid var(--surface); pointer-events:none;
}
.ia-fen{
  position:fixed; right:16px; bottom:78px; z-index:75;
  width:min(360px, calc(100vw - 24px)); height:min(480px, calc(100vh - 140px));
  background:var(--surface); border:1px solid var(--bord); border-radius:14px;
  box-shadow:var(--ombre); display:flex; flex-direction:column; overflow:hidden;
}
.ia-tete{
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  background:var(--jaune); color:#000; font-weight:800; font-size:13px;
  user-select:none;
}
.ia-boutons{margin-left:auto; display:inline-flex; gap:4px}
.ia-tete button{border:none; background:none; cursor:pointer; font-size:14px; padding:2px 5px; border-radius:6px}
.ia-tete button:hover{background:rgba(0,0,0,.12)}
.ia-corps{flex:1 1 auto; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px}
.ia-accueil{margin:0}
.ia-msg{
  max-width:88%; align-self:flex-start; background:var(--gris-fond);
  border:1px solid var(--bord); border-radius:12px; padding:8px 11px;
  font-size:12.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere;
}
.ia-msg.moi{align-self:flex-end; background:var(--jaune-soft); border-color:var(--jaune)}
.ia-msg .lien{white-space:nowrap}
.ia-saisie{display:flex; gap:6px; padding:10px; border-top:1px solid var(--bord)}
.ia-saisie input{
  flex:1 1 auto; border:1px solid var(--bord); border-radius:8px; padding:8px 11px;
  font:inherit; font-size:13px; background:var(--surface); color:var(--ink); min-width:0;
}
.ia-saisie input:focus{outline:2px solid var(--jaune); border-color:var(--jaune)}
@media (max-width:640px){
  .ia-fen{right:0; bottom:126px; width:100vw; height:56vh; border-radius:14px 14px 0 0}
}

.gm-cherche{
  width:100%; border:1px solid var(--bord); border-radius:8px; padding:7px 10px;
  font:inherit; font-size:12.5px; background:var(--surface); color:var(--ink);
  margin-bottom:8px;
}
.gm-cherche:focus{outline:2px solid var(--jaune); border-color:var(--jaune)}
.vue-bar{display:flex; justify-content:flex-end; margin:0 0 8px}
.brief-intro{
  font-size:13.5px; line-height:1.5; margin:0 0 10px; padding:10px 14px;
  background:var(--jaune-soft); border-left:4px solid var(--jaune); border-radius:8px;
}
.tels{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px}
.tel-chip{
  background:#000; color:var(--jaune); border-radius:14px; padding:4px 11px;
  font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.tel-chip:hover{opacity:.85}
.chat{display:flex; flex-direction:column; gap:8px}
.bulle{
  max-width:78%; background:var(--gris-fond); border:1px solid var(--bord);
  border-radius:12px; padding:8px 12px; align-self:flex-start;
}
.bulle.moi{align-self:flex-end; background:var(--jaune-soft); border-color:var(--jaune)}
.bulle.large{max-width:100%; width:100%; background:var(--surface)}
.bulle-tete{font-size:11px; color:var(--txt2); font-weight:700; margin-bottom:4px}
.bulle-texte{white-space:pre-wrap; font-size:13px; line-height:1.45; overflow-wrap:anywhere}
.bulle .pj-puces{margin-top:8px}
.bulle .msg-corps{width:100%; border:none; background:#fff; border-radius:6px}

/* ---------- Sélection par case + fils « 👁 vus » ---------- */
.chk-sel{width:15px; height:15px; accent-color:#000; flex:0 0 auto; cursor:pointer; margin:0}
.mail.vu{opacity:.68}
.mail.vu .sujet{font-weight:500}
.mail.vu.attente-forte{border-left-color:var(--bord)}
.mail.vu.ouvert,.mail.vu.open,.mail.vu:hover{opacity:1}

/* ---------- Piste A : Mon compte en onglets ---------- */
.oc-nav{display:flex; gap:4px; flex-wrap:wrap; margin:0 0 18px; border-bottom:2px solid var(--bord); padding-bottom:0}
.oc-onglet{
  border:1px solid var(--bord); border-bottom:none; background:var(--gris-fond);
  font:inherit; font-size:13px; font-weight:600; padding:9px 15px; cursor:pointer;
  color:var(--txt2); border-radius:10px 10px 0 0; margin-bottom:-2px;
}
.oc-onglet[aria-pressed="true"]{
  background:var(--jaune); color:#000; border-color:var(--jaune); font-weight:800;
}
.oc-onglet:focus-visible{outline:2px solid #000; outline-offset:1px}
.section[data-ocv]{display:none}
.section[data-ocv].oc-on{display:block}
.table-libelles th{white-space:nowrap}
.table-libelles input[type=text]{
  border:1px solid var(--bord); border-radius:7px; padding:5px 8px; font:inherit; font-size:12.5px;
  background:var(--surface); color:var(--ink);
}

/* ---------- Piste A : barre latérale repliable ---------- */
.side-pli{
  margin-left:auto; border:none; background:none; cursor:pointer; font:inherit;
  font-size:11px; color:var(--txt2); padding:0 3px;
}
.side-pli:hover{color:var(--ink)}
.side-bloc.plie{display:none}
.side-resume{display:none; font-size:11.5px; padding:0 8px 0 14px}
.side-bloc.plie + .side-resume{display:block}
.side-gerer{
  display:block; margin-top:14px; font-size:12px; color:var(--txt2);
  text-decoration:none; padding:5px 8px; border-radius:7px;
}
.side-gerer:hover{background:var(--jaune-soft); color:var(--ink)}

/* ---------- Mon compte : équipes, roster & groupes Google ---------- */
.equipe-bloc{border:1px solid var(--bord); border-radius:10px; padding:10px 14px; margin-bottom:10px}
.equipe-tete{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.equipe-visible{margin-left:auto}
.roster{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px}
.roster li{display:inline-flex; align-items:center; gap:6px; font-size:12.5px}
.pt{width:9px; height:9px; border-radius:50%; background:var(--bord); flex:0 0 auto}
.pt.on{background:var(--vert); animation:pulse 1.6s ease-in-out infinite}

/* ---------- ✍️ « L'IA écrit » (brouillon + bulle) ---------- */
.ia-ecrit{
  display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700;
  border-radius:8px; padding:7px 11px; margin-bottom:6px;
}
.ia-ecrit.encours{background:var(--jaune-soft); border-left:4px solid var(--jaune)}
.ia-ecrit.fini{background:var(--vert-soft); border-left:4px solid var(--vert)}
.ia-ecrit.fini .btn{margin-left:auto}
.ia-points::after{content:'…'; display:inline-block; animation:iaPts 1.2s steps(1) infinite}
.ia-attente{color:var(--txt2); font-style:italic}
.ia-attente::after{content:'…'; animation:iaPts 1.2s steps(1) infinite}
@keyframes iaPts{0%{content:'.'}33%{content:'..'}66%{content:'...'}}
@media (prefers-reduced-motion: reduce){
  .ia-points::after,.ia-attente::after{animation:none; content:'…'}
}

/* ---------- Chantier 3 : pièces jointes ---------- */
.pj-puces{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.pj-puce{
  border:1px solid var(--bord); background:var(--gris-fond); color:var(--ink);
  border-radius:14px; padding:4px 10px; font:inherit; font-size:12px; cursor:pointer;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pj-puce:hover{background:var(--jaune-soft); border-color:var(--jaune)}
.apercu-ov{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.apercu-fen{
  background:var(--surface); border-radius:12px; width:min(900px,96vw);
  height:min(85vh,900px); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:var(--ombre);
}
.apercu-head{display:flex; align-items:center; gap:10px; padding:10px 14px;
             border-bottom:3px solid var(--jaune)}
.apercu-nom{
  font-weight:700; font-size:13px; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.apercu-corps{flex:1 1 auto; border:none; width:100%; background:#fff}

@media (max-width:640px){
  .who{width:auto; max-width:110px}
  .apercu,.quand{display:none}
  main{padding:14px}
  .apercu-ov{padding:0}
  .apercu-fen{width:100vw; height:100vh; border-radius:0}
}

/* ---------- ✏️ Nouveau message ---------- */
.gm-nouveau{width:100%; margin-bottom:10px; font-weight:800}
.gm-nouveau-m{display:none}
.cmp-voile{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:88}
.cmp{
  position:fixed; right:18px; bottom:18px; z-index:89;
  width:min(700px, calc(100vw - 24px)); max-height:calc(100vh - 50px);
  background:var(--surface); border:2px solid #000; border-radius:14px;
  box-shadow:var(--ombre); display:flex; flex-direction:column; overflow:hidden;
}
/* Zone riche : les images collées s'affichent DANS le message (façon Gmail) */
.cmp-riche{
  min-height:260px; max-height:48vh; overflow-y:auto; cursor:text;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.cmp-riche:empty::before{content:attr(data-ph); color:var(--txt2); pointer-events:none}
.cmp-riche img{border-radius:6px; cursor:pointer; display:block; margin:6px 0; height:auto}
.cmp-riche img.t-petit{max-width:260px}
.cmp-riche img.t-defaut{max-width:480px; width:auto}
.cmp-riche img.t-origine{max-width:100%}
.cmp-riche img:hover{outline:3px solid var(--jaune)}
.img-menu{
  position:fixed; z-index:95; background:var(--surface); border:2px solid #000;
  border-radius:10px; box-shadow:var(--ombre); display:flex; flex-direction:column;
  overflow:hidden; min-width:170px;
}
.img-menu button{
  border:none; background:none; font:inherit; font-size:13px; text-align:left;
  padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--bord);
}
.img-menu button:last-child{border-bottom:none}
.img-menu button:hover{background:var(--jaune-soft)}
.img-menu button.on{background:var(--jaune); font-weight:700}
.cmp-tete{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--jaune); color:#000; font-weight:800; font-size:14px;
}
.cmp-x{margin-left:auto; border:none; background:none; cursor:pointer; font-size:15px; padding:2px 6px; border-radius:6px}
.cmp-x:hover{background:rgba(0,0,0,.12)}
.cmp-corps{margin:0; border:none; border-radius:0; overflow-y:auto; position:relative}
.cmp-l{display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; margin-bottom:7px}
.cmp-l input{
  flex:1 1 auto; min-width:0; border:1px solid var(--bord); border-radius:8px;
  padding:8px 11px; font:inherit; font-size:13px; font-weight:400;
  background:var(--surface); color:var(--ink);
}
.cmp-l input:focus{outline:2px solid var(--jaune); border-color:var(--jaune)}
.cmp-sugg{
  position:absolute; left:16px; right:16px; z-index:5;
  background:var(--surface); border:2px solid #000; border-radius:10px;
  box-shadow:var(--ombre); max-height:264px; overflow-y:auto;
}
.cmp-sugg-row{padding:8px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--bord)}
.cmp-sugg-row:last-child{border-bottom:none}
.cmp-sugg-row:hover{background:var(--jaune-soft)}

/* ---------- 📱 Navigation basse (mobile) ---------- */
.nav-bas{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--surface); border-top:2px solid var(--jaune);
  padding:5px 4px calc(5px + env(safe-area-inset-bottom));
}
.nav-bas a{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:10.5px; font-weight:700; color:var(--txt2); text-decoration:none;
  position:relative; padding:5px 0 3px; border-radius:10px;
}
.nav-bas a.on{color:#000; background:var(--jaune)}
.nb-ico{font-size:19px; line-height:1.1}
.nb-badge{
  position:absolute; top:0; right:16%; background:#000; color:var(--jaune);
  border-radius:9px; font-size:10px; padding:0 5px; font-weight:800;
}

/* ---------- Revue mobile (passe UX 6 bis, fin) ---------- */
@media (max-width:720px){
  .nav-bas{display:flex}
  nav.tabs{display:none}          /* remplacée par la barre du bas */
  main{padding-bottom:80px}       /* rien ne se cache sous la barre */
  .bulk{bottom:72px}
  .toast{bottom:86px}
  .ia-pastille{bottom:72px}
  /* burger + ✏️ côte à côte, composeur plein écran au-dessus de la nav */
  .gm-burger{width:calc(100% - 56px); display:inline-flex; vertical-align:top}
  .gm-nouveau-m{display:inline-flex; width:48px; justify-content:center;
    margin-left:6px; padding:11px 0; vertical-align:top}
  .cmp{right:0; left:0; bottom:62px; width:auto; max-height:calc(100vh - 70px);
    border-radius:14px 14px 0 0}
}
@media (max-width:640px){
  .fil{padding:10px 10px 14px}
  .bulle{max-width:92%}
  .oc-onglet{padding:8px 10px; font-size:12px}
  .fil-actions{gap:6px}
  .rep-boutons .btn{flex:1 1 auto; text-align:center}
}