/* Langage visuel inspiré d'Airbnb (demande de Florian, 20/09/2026) : cartes très
   arrondies, avatars ronds, bulles de conversation façon appli de messagerie,
   boutons pilule — mais avec la couleur d'accent de Barian (#4A91BA) plutôt que
   celle d'Airbnb (changement demandé le 20/09/2026, remplace le rose "rausch"
   du premier jet). Encre #222 / gris #717171 inchangés. Police Inter en
   équivalent libre de "Airbnb Cereal"/Circular. */
:root{
  --bleu-barian:#4A91BA; --bleu-barian-presse:#3B7495; --bleu-barian-teinte:#E8F1F6;
  --encre:#222222; --gris:#717171; --faible:#B0B0B0;
  --papier:#FFFFFF; --toile:#F7F7F7; --toile-survol:#F0F0F0;
  --trait:#DDDDDD; --trait-doux:#EBEBEB;
  --vert:#00A699; --vert-teinte:#E4F5F3;
  --ambre:#C13515; --ambre-teinte:#FFF1E9;
  --bulle-voyageur:#F0F0F0; --bulle-nous:#222222; --bulle-nous-texte:#FFFFFF;
  --ombre:0 1px 2px rgba(0,0,0,.08), 0 8px 24px -12px rgba(0,0,0,.18);
  --ombre-vive:0 6px 20px rgba(0,0,0,.14);
}
@media (prefers-color-scheme:dark){:root{
  --bleu-barian:#6AB0D6; --bleu-barian-presse:#8CC3E0; --bleu-barian-teinte:#16303D;
  --encre:#F2F2F2; --gris:#A7A7A7; --faible:#6E6E6E;
  --papier:#1E1E1E; --toile:#151515; --toile-survol:#282828;
  --trait:#343434; --trait-doux:#2A2A2A;
  --vert:#3ECFBE; --vert-teinte:#0F2926;
  --ambre:#FF9466; --ambre-teinte:#2E1B10;
  --bulle-voyageur:#2A2A2A; --bulle-nous:#F2F2F2; --bulle-nous-texte:#1A1A1A;
  --ombre:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --ombre-vive:0 6px 20px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html,body{height:100%}
#module-root{flex:1; display:flex; flex-direction:column; min-height:0}
body{margin:0; background:var(--toile); color:var(--encre); display:flex; flex-direction:column;
  font-family:"Airbnb Cereal VF",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--bleu-barian); outline-offset:2px}
h1,h2,h3{font-weight:700; letter-spacing:-.01em; margin:0}
.etiq{font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--gris)}

/* Barre d'application partagée (coquille) */
.topbar{background:var(--papier); color:var(--encre); padding:12px 24px; display:flex; align-items:center;
  gap:24px; flex-wrap:wrap; flex:none; border-bottom:1px solid var(--trait-doux)}
.topbar .marque{font-weight:800; font-size:17px; color:var(--bleu-barian); letter-spacing:-.02em;
  display:flex; align-items:center; gap:8px}
.topbar .marque img{width:24px; height:24px; border-radius:7px; display:block}
.onglets{display:flex; gap:6px}
.onglet{background:none; border:0; color:var(--gris); font-size:13.5px; font-weight:600;
  padding:8px 4px; border-bottom:2px solid transparent; text-decoration:none; display:inline-block}
.onglet.actif{color:var(--encre); border-bottom-color:var(--encre)}
.onglet:disabled{opacity:.4; cursor:default}
.topbar .droite{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--gris)}
.topbar .deconnexion{background:var(--toile); border:1px solid var(--trait); color:var(--encre);
  padding:7px 15px; font-size:12.5px; font-weight:600; border-radius:999px}
.topbar .deconnexion:hover{border-color:var(--encre)}
#nom-utilisateur{width:30px; height:30px; border-radius:50%; background:var(--encre); color:var(--papier);
  display:inline-grid; place-items:center; font-size:12px; font-weight:700; overflow:hidden;
  text-indent:0}

header{background:var(--papier); color:var(--encre); padding:18px 26px; display:flex; align-items:center;
  gap:24px; flex-wrap:wrap; flex:none; border-bottom:1px solid var(--trait-doux)}
header h1{font-size:21px; font-weight:800}
header .sous{font-size:12px; color:var(--gris); margin-top:2px}
.compteurs{display:flex; gap:22px; font-size:12.5px; color:var(--gris)}
.compteurs b{font-size:17px; color:var(--encre); margin-right:5px; font-weight:800}
.droite{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.maj{font-size:12px; color:var(--gris)}
.maj b{color:var(--encre)}
.recharger{background:var(--papier); border:1px solid var(--trait); color:var(--encre);
  padding:9px 18px; font-size:13px; font-weight:600; border-radius:999px}
.recharger:hover:not(:disabled){border-color:var(--encre)}
.recharger:disabled{opacity:.5; cursor:default}

main{flex:1; display:grid; grid-template-columns:380px 1fr; min-height:0}
.liste{border-right:1px solid var(--trait-doux); overflow-y:auto; background:var(--papier)}
.groupe{padding:18px 22px 8px; position:sticky; top:0; background:var(--papier); z-index:2;
  display:flex; align-items:center; gap:8px}
.groupe .etiq{font-size:12.5px; font-weight:800; color:var(--encre); text-transform:none; letter-spacing:0}
.groupe .nb{background:var(--toile); color:var(--gris); border-radius:999px; padding:1px 8px;
  font-size:11px; font-weight:700}
.item{width:100%; text-align:left; background:none; border:0; padding:11px 18px; margin:2px 10px;
  display:grid; grid-template-columns:auto 1fr auto; gap:2px 12px; align-items:center; color:inherit;
  border-radius:14px; width:calc(100% - 20px)}
.item:hover{background:var(--toile-survol)}
.item.actif{background:var(--bleu-barian-teinte)}
.jeton-log{grid-row:span 2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:13px; letter-spacing:.01em; background:var(--toile); color:var(--encre);
  position:relative}
.jeton-log i{position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--papier)}
.item.actif .jeton-log i{border-color:var(--bleu-barian-teinte)}
.pt-pendant{background:#00A699} .pt-avant{background:#4A91BA} .pt-apres{background:#B0B0B0}
.item .nom{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .quand{font-size:12px; color:var(--faible); white-space:nowrap; text-align:right; font-weight:500}
.item .quand.vieux{color:var(--bleu-barian); font-weight:700}
.item .meta{grid-column:2/4; display:flex; gap:7px; align-items:center; font-size:11.5px; min-width:0}
.item .logement{font-weight:700; font-size:11px; color:var(--gris); white-space:nowrap}
.item .logement::after{content:"·"; margin-left:7px; color:var(--faible); font-weight:400}
.item .phase{font-size:11px; color:var(--faible); white-space:nowrap}
.item .extrait{grid-column:2/4; font-size:12.5px; color:var(--gris); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

.detail{overflow-y:auto; background:var(--toile)}
.dtete{padding:24px 30px 18px; border-bottom:1px solid var(--trait-doux); background:var(--papier)}
.dtete h2{font-size:23px; font-weight:800}
.dtete .lieu{margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.chip.logement-chip{background:var(--encre); color:var(--papier)}
.chip{font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--toile);
  color:var(--gris)}
.chip.pendant{background:var(--vert-teinte); color:var(--vert)}
.chip.avant{background:var(--bleu-barian-teinte); color:var(--bleu-barian)}
.chip.apres{background:var(--toile); color:var(--gris)}
.chip.question{background:var(--ambre-teinte); color:var(--ambre); font-weight:700}
.faits{display:flex; gap:26px; flex-wrap:wrap; padding:16px 30px; font-size:13px; background:var(--papier);
  border-bottom:1px solid var(--trait-doux)}
.faits span{display:block; margin-bottom:2px}
.faits .etiq{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px}
.verdict{margin:18px 30px 0; padding:14px 17px; font-size:13.5px; border-radius:14px; background:var(--papier);
  border:1px solid var(--trait-doux)}
.verdict.ok{background:var(--vert-teinte); color:var(--vert)}
.verdict.non{background:var(--ambre-teinte); color:var(--ambre)}
.verdict b{display:block; margin-bottom:3px; font-weight:700}

.presence{margin:14px 30px 0; padding:10px 15px; font-size:12.5px; border-radius:12px;
  background:var(--bleu-barian-teinte); color:var(--bleu-barian); font-weight:600}

.fil{padding:20px 30px 4px; display:flex; flex-direction:column; gap:10px}
.bulle{max-width:72%; padding:11px 16px; font-size:14px; white-space:pre-wrap; word-wrap:break-word;
  border-radius:20px; line-height:1.45}
.bulle.voyageur{background:var(--bulle-voyageur); color:var(--encre); align-self:flex-start; border-bottom-left-radius:6px;
  border:1px solid var(--trait-doux)}
.bulle.nous{background:var(--bulle-nous); color:var(--bulle-nous-texte); align-self:flex-end; border-bottom-right-radius:6px}
.bulle.auto{background:transparent; border:1px dashed var(--trait); color:var(--gris);
  align-self:flex-end; font-size:12.5px; border-radius:14px}
.bulle time{display:block; font-size:10.5px; opacity:.6; margin-top:5px}
.deplier-auto{background:none; border:0; color:var(--gris); font-size:12px; font-weight:600; padding:0}
.plier{align-self:center; background:var(--papier); border:1px solid var(--trait); color:var(--encre);
  font-size:12px; font-weight:600; padding:6px 16px; border-radius:999px}

.reponse{padding:22px 30px 36px}
.sugg{background:var(--papier); border:1px solid var(--trait-doux); padding:13px 16px; margin-bottom:9px;
  width:100%; text-align:left; color:inherit; border-radius:14px}
.sugg:hover{border-color:var(--encre)}
.sugg.ref{border-left:3px solid var(--vert)}
.sugg.ia{border-left:3px solid var(--bleu-barian)}
.sugg.ia .quoi b{color:var(--bleu-barian)}
.sugg .quoi{display:flex; align-items:center; gap:9px; margin-bottom:5px}
.sugg .quoi b{font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--gris); font-weight:700}
.sugg.ref .quoi b{color:var(--vert)}
.sugg p{margin:0; font-size:13px; color:var(--gris); line-height:1.5}
.aucune{background:var(--ambre-teinte); color:var(--ambre); padding:12px 16px; font-size:12.5px;
  margin-bottom:12px; border-radius:14px; font-weight:600}
textarea{width:100%; min-height:170px; padding:16px 18px; font-size:14px; border:1px solid var(--trait);
  background:var(--papier); color:var(--encre); border-radius:16px; resize:vertical; line-height:1.6}
textarea:focus-visible{outline:2px solid var(--encre); outline-offset:0}

.ia{margin-top:12px; border:1px solid var(--trait-doux); border-radius:16px; background:var(--papier);
  padding:14px 16px}
.ia-tete{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.ia-tete .etiq{color:var(--bleu-barian); font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.05em}
.raccourcis{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px}
.raccourcis button{background:var(--toile); border:1px solid transparent; color:var(--encre);
  font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px}
.raccourcis button:hover{border-color:var(--encre)}
.ia-saisie{display:flex; gap:7px}
.ia-saisie input{flex:1; padding:9px 14px; font-size:13.5px; border:1px solid var(--trait);
  background:var(--toile); color:var(--encre); border-radius:999px; min-width:0}
.micro{border:1px solid var(--trait); background:var(--toile); color:var(--gris);
  width:38px; border-radius:50%; display:grid; place-items:center; font-size:15px}
.micro:hover{border-color:var(--encre); color:var(--encre)}
.micro.actif{background:var(--bleu-barian); border-color:var(--bleu-barian); color:#fff; animation:pulse 1.3s infinite}
@keyframes pulse{50%{opacity:.55}}
.ia-indispo{font-size:12.5px; color:var(--gris); line-height:1.5}
.ia-indispo code{background:var(--toile); padding:1px 6px; border-radius:5px; font-size:11.5px}

.barre{display:flex; gap:10px; align-items:center; margin-top:16px; flex-wrap:wrap}
.principal{background:var(--bleu-barian); color:#fff; border:1px solid var(--bleu-barian); padding:12px 26px;
  font-weight:700; font-size:14px; border-radius:999px}
.principal:hover:not(:disabled){background:var(--bleu-barian-presse); border-color:var(--bleu-barian-presse)}
.principal:disabled{opacity:.45; cursor:default}
.second{background:var(--papier); color:var(--encre); border:1px solid var(--trait); padding:12px 20px;
  font-weight:600; font-size:14px; border-radius:999px}
.second:hover{border-color:var(--encre)}
.note{font-size:12px; color:var(--faible); flex:1 1 180px}
.vide{padding:80px 30px; text-align:center; color:var(--gris); font-size:14px}
.toast{position:fixed; right:24px; bottom:24px; background:var(--encre); color:var(--papier); padding:12px 20px;
  font-size:13.5px; font-weight:600; border-radius:14px; opacity:0; transform:translateY(10px);
  transition:.2s; pointer-events:none; z-index:30; box-shadow:var(--ombre-vive); max-width:60vw}
.toast.vu{opacity:1; transform:none}
.toast.souci{background:var(--bleu-barian)}

/* Page de connexion */
.page-connexion{min-height:100vh; display:grid; place-items:center; background:var(--toile)}
.carte-connexion{width:min(380px,90vw); background:var(--papier); border:1px solid var(--trait-doux);
  border-radius:22px; padding:36px 32px; box-shadow:var(--ombre)}
.carte-connexion h1{font-size:22px; margin-bottom:5px; color:var(--bleu-barian)}
.carte-connexion .sous{font-size:13px; color:var(--gris); margin-bottom:26px}
.champ{margin-bottom:16px}
.champ label{display:block; font-size:12px; font-weight:600; color:var(--encre); margin-bottom:6px}
.champ input[type=email],.champ input[type=password]{width:100%; padding:12px 14px; font-size:14px;
  border:1px solid var(--trait); border-radius:12px; background:var(--papier); color:var(--encre)}
.champ input:focus-visible{outline:2px solid var(--encre); outline-offset:0}
.souvenir{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gris); margin-bottom:22px}
.erreur-connexion{background:var(--ambre-teinte); color:var(--ambre); font-size:12.5px; padding:10px 13px;
  border-radius:12px; margin-bottom:16px; font-weight:600}

/* Page Équipe (gestion des comptes) */
main.equipe-corps{display:block; padding:28px; overflow-y:auto}
.equipe-colonne{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.carte-section{background:var(--papier); border:1px solid var(--trait-doux); border-radius:16px; padding:24px 26px}
.carte-section h3{font-size:16px; font-weight:800; margin-bottom:16px}
.liste-comptes{display:flex; flex-direction:column; gap:9px}
.ligne-compte{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:var(--toile)}
.ligne-compte.inactif{opacity:.55}
.lc-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.lc-nom{font-weight:700; font-size:13.5px}
.lc-email{font-size:12px; color:var(--gris)}
.second.petit{padding:6px 14px; font-size:12px}
.form-compte{display:flex; flex-direction:column; gap:15px}
.champ input{width:100%; padding:12px 14px; font-size:14px; border:1px solid var(--trait); border-radius:12px;
  background:var(--papier); color:var(--encre)}
.form-compte select{width:100%; padding:12px 14px; font-size:14px; border:1px solid var(--trait);
  border-radius:12px; background:var(--papier); color:var(--encre)}
.mdp-ligne{display:flex; gap:8px}
.mdp-ligne input{flex:1}
.identifiants{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap}
.identifiants code{background:var(--papier); border:1px solid var(--trait); padding:6px 10px; border-radius:8px;
  font-size:12.5px}

.retour-mobile{display:none; background:none; border:0; color:var(--bleu-barian); font-weight:700;
  font-size:13px; padding:0 0 12px; cursor:pointer}
.trad-note{font-size:10.5px; color:var(--gris); font-style:italic; margin-top:5px; opacity:.85}
.bulle.nous .trad-note{color:rgba(255,255,255,.7)}

@media (max-width:600px){
  .topbar{padding:10px 16px; gap:10px 16px}
  .onglets{order:3; width:100%}
  .topbar .droite{gap:8px}
}
/* Navigation mobile façon appli de messagerie (Airbnb) : un seul panneau à la
   fois — la liste OU la conversation ouverte, jamais les deux empilées, avec
   un bouton retour pour revenir à la liste. Demande de Florian, 20/09/2026 :
   l'ancien empilement liste+détail n'était "pas du tout pratique" sur téléphone. */
@media (max-width:880px){
  body{height:100dvh; overflow:hidden}
  #module-root{min-height:0}
  main{grid-template-columns:1fr; grid-template-rows:1fr; min-height:0; height:100%}
  header{padding:14px 18px; gap:10px; flex-wrap:wrap}
  .compteurs{gap:14px; font-size:11.5px; order:3; flex-basis:100%}
  .liste{max-height:none; height:100%; border-right:0}
  .detail{display:none}
  #module-root.conv-ouverte > header{display:none}
  #module-root.conv-ouverte .liste{display:none}
  #module-root.conv-ouverte .detail{display:block; height:100%}
  #module-root.conv-ouverte .retour-mobile{display:inline-flex; align-items:center; gap:4px}
  .bulle{max-width:88%}
  .dtete,.faits,.fil,.reponse{padding-left:18px; padding-right:18px}
  .verdict{margin-left:18px; margin-right:18px}
  .presence{margin-left:18px; margin-right:18px}
  .barre{flex-direction:column; align-items:stretch}
  .barre .note{order:99; text-align:center}
  .raccourcis{overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px}
  .raccourcis button{flex:none}
}