/* Couleurs et tokens simples */
:root{ --primary:#1e40af; --muted:#f5f7fb; }

/* Boîte de calcul homogène */
*{ box-sizing:border-box; }

/* Police par défaut + couleur de texte */
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; color:#111827; background:#fff; }

/* Contrainte de largeur + marges internes */
.container{ max-width:960px; margin:0 auto; padding:24px; }

/* En-tête alignée */
.header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }

/* Boutons */
.btn{ background:var(--primary); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.btn-secondary{ background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }

/* Grille responsive pour cartes */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }

/* Carte neutre avec légère ombre */
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card h3{ margin:0 0 8px; font-size:1.05rem; }

.title-row { display:flex; align-items:center; gap:6px; justify-content:space-between; }
.title { font-weight:600; }

/* Texte atténué + petite taille utilitaire */
.muted{ color:#6b7280; }
.small{ font-size: .85em; }

/* Champs */
.input, .select{ width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; }

.select{ height: 40px; }          /* même hauteur que .input */

/* === Filtres catégorie === */
.filters-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.filters-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 4px;
}
.filters-actions .spacer{ flex:1; }  /* pousse le dernier bouton à droite */

/* Espacement vertical entre sections */
.section{ margin-top:24px; }

/* Liens dans la couleur de marque */
.link{ color:var(--primary); text-decoration:none; font-weight:600; }

/* Mini nav de boutons */
.nav{ display:flex; gap:10px; }

/* Bannière d’info (utilisée pour confirmation) */
.notice{ background:#ecfeff; border:1px solid #a5f3fc; color:#0e7490; padding:12px; border-radius:10px; margin:12px 0; }

/* Conteneur pagination */
.pagination{ display:flex; gap:8px; justify-content:center; margin:16px 0; }

/* Classe accessibilité : élément visible pour lecteurs d’écran uniquement */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.card-ok { border-color:#16a34a; box-shadow:0 0 0 2px #16a34a22 inset; }
.pagination .muted { font-size: 0.95rem; }
.star{
  border:1px solid var(--border,#e5e7eb);
  background:#fff;
  padding:4px 8px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
}
.star.is-on{ background:#fff7cc; border-color:#f1c40f; }
.card .star { font-size:14px; }
.thumb {
  border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;
  display:block; width:100%; aspect-ratio: 4 / 3; object-fit:cover;
}
/*.gallery { display:grid; gap:10px; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }*/
/* --- Galerie / vignettes --- */
.gallery {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.gallery .thumb-btn {
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}
.gallery .thumb {
  width: 260px;           /* s’adapte bien à ta mise en page */
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

/* --- Lightbox --- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: lb-fade .15s ease-out;
}
@keyframes lb-fade { from { opacity:.5 } to { opacity:1 } }

.lightbox__inner {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
}
.lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  display: block;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #111;
  font-size: 22px;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.lb-prev { left: -60px; }
.lb-next { right: -60px; }

.lb-close {
  position: absolute;
  top: -52px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.9);
  color: #111;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.lb-counter {
  position: absolute;
  left: 0; right: 0; top: -48px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  opacity: .9;
}
@media (max-width: 720px) {
  .lb-prev { left: -8px; }
  .lb-next { right: -8px; }
  :root{
    --chat-top-offset: 88px;
    --chat-composer-block: 180px;
  }
}
/* Carte avec image de tête (miniature) */
.card-img {
  width: 100%;
  height: 160px;            /* cohérent avec tes vignettes */
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
@media (min-width: 720px) {
  .card-row {
    display: grid;
    grid-template-columns: 220px 1fr; /* image à gauche, texte à droite */
    gap: 14px;
    align-items: start;
  }
  .card-img.row {
    width: 220px;
    height: 160px;
    margin: 0;
  }
}
.badge {
  display:inline-block; min-width:1.5em; padding:0 6px;
  border-radius:999px; background:#1e40af; color:#fff; font-size:.8rem;
  text-align:center; margin-left:.5rem;
}

/* Positionnement du menu par rapport au header */
.site-header { position: relative; }

/* ——— Bouton hamburger ——— */
.hamburger{
  display:inline-flex;
  flex-direction: column;       /* <-- empile verticalement */
  justify-content:center;
  align-items:center;
  row-gap: 6px;                 /* <-- espace entre les barres */
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  background:#0f172a; color:#fff; cursor:pointer;
  transition:filter .15s ease;
}
.hamburger:hover{ filter:brightness(1.08); }

.hb-line{
  display:block;
  width:22px;                   /* un poil plus large */
  height:2px;
  margin:0;                     /* pas de marge verticale, on gère avec row-gap */
  background:currentColor;
  transition: transform .18s ease, opacity .18s ease;
}

/* Animation 3 barres → croix quand .nav-open est sur <body> */
.nav-open .hb-line:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-open .hb-line:nth-child(2){ opacity:0; }
.nav-open .hb-line:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ——— Menu déroulant ——— */
.nav-menu {
  position:absolute; top:64px; right:0; z-index:50;
  min-width:240px; padding:8px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; box-shadow:0 10px 30px rgba(2,6,23,.15);
}
.nav-menu a, .nav-menu button {
  display:block; width:100%; text-align:left;
  text-decoration:none; color:#0f172a;
  padding:10px 12px; border-radius:10px; border:none; background:transparent; cursor:pointer;
}
.nav-menu a:hover, .nav-menu button:hover { background:#eef2ff; }
.nav-menu .danger { color:#b91c1c; }
.tag-row, .tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tag {
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#eef2ff; color:#1d4ed8; font-size:.85rem; text-decoration:none;
  border:1px solid rgba(29,78,216,.15);
}
.tag:hover { background:#e0e7ff; }

/* ====== Login fun styles ====== */
.has-blob {
  position: relative;
  overflow-x: clip;
}
.has-blob::before {
  content: "";
  position: fixed;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 30% 30%, #e0e7ff 0%, #eef2ff 40%, transparent 70%);
  filter: blur(12px);
  opacity: .8;
  z-index: -1;
  animation: blobFloat 14s ease-in-out infinite alternate;
}
@keyframes blobFloat {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-30px,20px) scale(1.05); }
}

/* Deux colonnes responsives */
.login-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .login-grid { grid-template-columns: 1fr; }
}

/* Titre/emoji */
.login-hero { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.login-emoji {
  font-size: 36px; line-height: 1; display:grid; place-items:center;
  width:48px; height:48px; border-radius:12px;
  background:#eef2ff; color:#1e40af;
  box-shadow: 0 2px 12px rgba(30,64,175,.15);
}
.login-title { margin:0; }

/* Carte formulaire */
.login-card { max-width: 560px; }
.login-card label { display:block; margin:8px 0; }
.login-card input { margin-top:6px; }

.login-actions {
  display:flex; align-items:center; gap:12px; margin:8px 0 14px; flex-wrap:wrap;
}

/* Colonne droite “fun” */
.fun-card { position: relative; overflow: hidden; }
.fun-head .badge { vertical-align: middle; }
.fun-list { margin:12px 0 0; padding-left:1.1em; }
.fun-list li { margin:6px 0; }

.mascot {
  margin-top:14px; display:grid; place-items:center;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border:1px dashed #e5e7eb; border-radius:12px; padding:12px;
}
.msg.me { position: relative; }
.read-ack { margin-top: 4px; text-align: right; opacity: .7; }
.rating-stars { font-size:18px; letter-spacing:2px; color:#f59e0b; }

/* === Icônes dans les boutons (alignement propre) === */
.btn, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn .icon, .btn-secondary .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Optionnel : légèrement plus contrasté dans les boutons bleus */
.btn .icon { stroke-width: 2; }

/* ===== Logo / Marque (version large & cohérente) ===== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #0f172a;                 /* couleur du titre */
}

.brand-logo {
  width: clamp(44px, 5.2vw, 56px);
  height: clamp(44px, 5.2vw, 56px);
  color: var(--primary);          /* le pictogramme prend la couleur de marque */
}
.brand-logo * { vector-effect: non-scaling-stroke; } /* épaisseur de trait stable */

.brand-name {
  font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.1rem); /* taille du mot égale au “poids visuel” du logo */
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1;
}

/* === Bouton Retour Accueil (pastille bleue) === */
.btn-back{
  --c: var(--primary, #2F52E9);
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--c); color:#fff; font-weight:800; text-decoration:none;
  padding:.55rem .95rem; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  box-shadow:0 6px 14px rgba(47,82,233,.25), 0 2px 4px rgba(47,82,233,.18);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-back:hover{ transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(47,82,233,.35), 0 4px 8px rgba(47,82,233,.25);
}
.btn-back:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(47,82,233,.25); }
.btn-back:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.btn-back .icon{ width:20px; height:20px; flex:0 0 20px }
.btn-back .icon path{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce){ .btn-back, .btn-back .icon{ transition:none } }

/* ===== Profil – hero ergonomique ===== */
.profile-card { padding: 22px; }
.profile-hero{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 18px;
}
@media (max-width: 680px){
  .profile-hero{ grid-template-columns: 1fr; text-align:left; }
  .profile-actions{ justify-self:start; }
}

.avatar-xxl{
  width:128px; height:128px; border-radius:50%;
  object-fit:cover; background:#eee;
  box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(0,0,0,.08);
}

.profile-name{
  margin:0 0 4px 0;
  font-weight:900;
  font-size: clamp(1.25rem, 1.2rem + 1vw, 1.75rem);
}
.profile-bio{ margin:.35rem 0 0; }

.profile-actions .btn-secondary{
  white-space:nowrap;
  padding:.5rem .8rem;
  font-weight:700;
}

/* ===== Formulaire compact en grille ===== */
.form-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 16px;
}
.form-grid label{
  display:flex; flex-direction:column; gap:6px;
  font-weight: 700;
}
.form-grid input[type="text"], .form-grid textarea, .form-grid select{
  width:100%;
}
.form-grid .file-row{
  display:flex; align-items:center; gap:10px;
}

.span-12{ grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

@media (max-width: 680px){
  .span-12, .span-8, .span-6, .span-4{ grid-column: 1 / -1; }
}
/* Menu hamburger : lignes avec icône + label */
.nav-menu a, .nav-menu button {
  display:flex; align-items:center; gap:10px;
}

/* Taille/alignement des icônes */
.nav-menu .icon{
  width:18px; height:18px; flex:0 0 18px;
  color: currentColor; /* suit la couleur du texte (.danger => rouge) */
}

/* ===== How it works (Steps) ===== */
:root{ --primary: #2F52E9; --step-bg:#fff; --step-bd:#eceff4; }

#how-it-works .steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
  counter-reset: how;
}
@media (max-width: 900px){
  #how-it-works .steps{ grid-template-columns: 1fr; }
}

#how-it-works .step{
  position:relative;
  background:var(--step-bg);
  border:1px solid var(--step-bd);
  border-radius:16px;
  padding:18px 18px 20px;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
#how-it-works .step:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17,24,39,.10);
  border-color: rgba(47,82,233,.25);
}

/* Tête : icône + titre avec compteur implicite */
#how-it-works .step-head{
  display:flex; align-items:center; gap:12px; margin-bottom:.35rem;
}
#how-it-works .step h3{
  margin:0; font-size:1.05rem; font-weight:900;
}

/* Icône ronde (hérite de la couleur du texte) */
#how-it-works .step-icon{
  width:42px; height:42px; border-radius:999px; flex:0 0 42px;
  display:grid; place-items:center;
  color:var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, white);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 35%, transparent);
}
#how-it-works .step-icon svg{ width:22px; height:22px; }

/* Connecteurs visuels (desktop) */
@media (min-width: 901px){
  #how-it-works .step::after{
    content:""; position:absolute; top:32px; right:-10px; height:2px; width:20px;
    background:linear-gradient(90deg, rgba(47,82,233,.25), rgba(47,82,233,0));
    border-radius:2px;
  }
  #how-it-works .step:last-child::after{ display:none; }
}
#how-it-works p{ margin:.25rem 0 0; line-height:1.55; }
#how-it-works .step-icon svg{ width:24px; height:24px; }

/* Cible tous les items rendus dans ces grilles (cartes <div> ou <a>) */
:is(#categories,#latest,#list,#ads,#favs,#savedList) .card,
:is(#categories,#latest,#list,#ads,#favs,#savedList) > a{
  /* on ne touche pas aux paddings/coins existants */
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
  will-change: transform;
}

/* Effet survol */
:is(#categories,#latest,#list,#ads,#favs,#savedList) .card:hover,
:is(#categories,#latest,#list,#ads,#favs,#savedList) > a:hover{
  border-color: color-mix(in oklab, var(--primary) 38%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(47,82,233,.15), 0 6px 12px rgba(17,24,39,.06);
}

/* Effet focus clavier (accessibilité) */
:is(#categories,#latest,#list,#ads,#favs,#savedList) .card:focus-visible,
:is(#categories,#latest,#list,#ads,#favs,#savedList) > a:focus-visible{
  outline: 0;
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, white),
              0 10px 24px rgba(47,82,233,.18);
  transform: translateY(-2px);
  border-radius: inherit;
}

/* Clic (retour à plat) */
:is(#categories,#latest,#list,#ads,#favs,#savedList) .card:active,
:is(#categories,#latest,#list,#ads,#favs,#savedList) > a:active{
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  :is(#categories,#latest,#list,#ads,#favs,#savedList) .card,
  :is(#categories,#latest,#list,#ads,#favs,#savedList) > a{
    transition: border-color .2s ease, box-shadow .2s ease; /* pas de translate */
  }
}

/* ===== Topbar (profil) : padding, alignements, sticky ===== */
.topbar{
  position: sticky; top: 0; z-index: 30;
  background:#fff; border-bottom:1px solid #eef2ff;
}
.topbar-inner{
  max-width:960px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar-actions{ display:flex; align-items:center; gap:10px; }

/* On garde l’esthétique du bouton Accueil, mais il n’est plus collé au bord grâce à la topbar-inner */
.topbar .btn-back{ box-shadow:0 2px 6px rgba(47,82,233,.18); }

/* ===== Bouton "Se déconnecter" — danger pill avec icône ===== */
.btn-logout{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:#b91c1c; font-weight:800;
  border:1px solid #fecaca; border-radius:999px;
  padding:8px 12px; cursor:pointer;
  box-shadow:0 2px 6px rgba(185,28,28,.15);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-logout .icon{ width:18px; height:18px; flex:0 0 18px; }
.btn-logout:hover{
  background:#fee2e2; border-color:#fca5a5;
  box-shadow:0 8px 18px rgba(185,28,28,.22);
  transform: translateY(-1px);
}
.btn-logout:active{ transform: translateY(0); box-shadow:0 2px 6px rgba(185,28,28,.15); }
.btn-logout:focus-visible{ outline:2px solid #fecaca; outline-offset:3px; border-radius:999px; }

/* ===== Header d'annonce : layout propre ===== */
.ad-header{
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.head-left{ display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:320px; }
.head-right{ display:flex; align-items:center; gap:10px; }

/* Chip Catégorie (breadcrumb) */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef2ff; color:#1e3a8a;
  border:1px solid #c7d2fe; border-radius:999px;
  padding:8px 12px; font-weight:800; text-decoration:none;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: #a5b4fc;
  box-shadow: 0 8px 20px rgba(30,64,175,.15);
}
.chip .icon{ width:18px; height:18px; }

/* Badge “Vous” (statut connecté, sans email en clair) */
.user-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
  padding:8px 12px; border-radius:999px; font-weight:900;
}
.user-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background:#10b981; box-shadow:0 0 0 2px #d1fae5 inset;
}

/* Petit ajustement des boutons d'action à droite */
.ad-header .btn-secondary, .ad-header .btn{
  white-space:nowrap;
}

/* Texte accessible mais invisible visuellement */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Badge “Vous” (connecté) */
.user-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
  padding:8px 12px; border-radius:999px; font-weight:900;
  box-shadow:0 2px 6px rgba(16,185,129,.15);
}
.user-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background:#10b981; box-shadow:0 0 0 2px #d1fae5 inset;
}

/* Afficher le badge seulement si authStateTop n’est PAS vide */
#authStateTop + .user-pill{ display:inline-flex; }
#authStateTop:empty + .user-pill{ display:none; }

/* ——— Catégorie : boutons plus compacts ——— */
.nav-compact{ gap:8px; }

.nav-compact .btn,
.nav-compact .btn-secondary,
.nav-compact .user-pill{
  padding: .45rem .70rem;      /* ↓ */
  font-size: .95rem;           /* ↓ */
  border-radius: 12px;         /* un peu moins arrondi */
  gap: 6px;                    /* ↓ espace icône/texte */
}

/* Icônes un poil plus petites */
.nav-compact .btn .icon,
.nav-compact .btn-secondary .icon{
  width:16px; height:16px;
}

/* Pastille “Vous” plus fine */
.nav-compact .user-pill .dot{
  width:6px; height:6px;
}

/* Ombres un peu plus légères pour le bouton bleu */
.nav-compact .btn{
  box-shadow: 0 4px 10px rgba(47,82,233,.22), 0 2px 4px rgba(47,82,233,.15);
}

/* ===== Messagerie : composer moderne ===== */
.composer { margin-top: 10px; }

.composer .composer-bar{
  display:flex; align-items:flex-end; gap:8px;
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:8px 10px;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
}

.composer textarea{
  flex:1; border:0; outline:0; resize:none;
  min-height:38px; max-height:160px; padding:8px 0;
  font: inherit; line-height:1.4;
}

/* Boutons icones (trombone) */
.icon-btn{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:10px; cursor:pointer;
  background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe;
  transition:transform .06s ease, box-shadow .2s ease, filter .15s ease;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(29,78,216,.18); }

/* Envoyer (rond) */
.send-btn{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; border:0; cursor:pointer;
  background:#2F52E9; color:#fff;
  box-shadow:0 6px 14px rgba(47,82,233,.25), 0 2px 4px rgba(47,82,233,.15);
  transition:transform .06s ease, box-shadow .2s ease, filter .15s ease;
}
.send-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(47,82,233,.35); }
.send-btn:disabled{ filter:grayscale(.1); opacity:.75; cursor:not-allowed; }

/* Aperçu des PJ */
.attach-preview{
  margin-top:6px; display:flex; flex-wrap:wrap; gap:8px;
}
.attach-chip{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe;
  font-size:.85rem;
}

/* === Messagerie : layout type Instagram (scrolls indépendants) === */
/* La grille reste la même, mais on s’assure que les items ne “s’écrasent” pas */
.chat-layout{ align-items: start; }

/* Colonne GAUCHE : reste visible et scrolle seule (comme Insta) */
.threads-col{
  position: sticky;
  top: 96px;           /* ≈ topbar + titre. Ajuste 90–110px selon ton rendu */
  align-self: start;   /* requis pour sticky dans une grid */
  max-height: calc(100dvh - 110px);
}

#threads{
  max-height: calc(100dvh - 110px);
  overflow: auto;      /* ← la barre blanche “propose d’autres discussions” */
  padding-right: 6px;  /* anti-saut de scrollbar */
}

/* Colonne droite : ne pas la contraindre, utiliser la hauteur de l’écran */
#pane{
  align-self: start;  /* évite la compression verticale dans la grid */
  min-width: 0;
}

/* La zone des messages occupe quasiment tout l’écran, la page scrolle */
.messages{
  /* pas d’overflow ici : c’est la page qui scrolle */
  min-height: calc(100dvh - var(--chat-top-offset) - var(--chat-composer-block));
}
/* Bubbles (reprend ton style existant) */
.msg{ margin:8px 0; max-width:75%; }
.msg .bubble{ padding:8px; border-radius:12px; }
.msg.me .bubble{ background:#e0ecff; border-radius:12px 12px 0 12px; }
.msg.other .bubble{ background:#f3f4f6; border-radius:12px 12px 12px 0; }

/* Header du chat injecté par JS (au-dessus du #pane) */
#chatHeader{
  position: sticky; top: 0; z-index: 5;  /* reste visible quand on scrolle la page */
  background:#fff; padding-bottom:8px; margin-bottom:8px;
}
.chat-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chat-title{ font-weight:900; }

/* Le bloc composer suit la largeur du pane */
.composer{ margin-top:10px; }

/* Barre d'édition sur une seule ligne, 100% de large */
.composer .composer-bar{
  display:flex; align-items:center; gap:10px;
  width:100%;
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}

/* Textarea fluide qui grandit correctement */
.composer textarea{
  flex:1 1 auto;              /* prend toute la place restante */
  width:100%; min-width:0;    /* évite tout rétrécissement dans la grid */
  border:0; outline:0; resize:none;
  min-height:38px; max-height:160px;
  font:inherit; line-height:1.4; padding:8px 0;
}

/* Boutons (cohérents avec ce que tu avais) */
.icon-btn{ width:36px; height:36px; display:grid; place-items:center;
  border-radius:10px; cursor:pointer;
  background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe;
  transition:transform .06s ease, box-shadow .2s ease;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(29,78,216,.18) }


/* ===== Login – header centré & grille pleine hauteur ===== */
/* Liste de bénéfices sans emoji */
.fun-list{ list-style:none; padding:0; margin:12px 0 0; }
.fun-li{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.fun-li .icon{ width:18px; height:18px; color:#1e40af; }

/* Ajuste légèrement la carte formulaire pour combler le vide visuel */
.login-card{ max-width: 600px; }

/* ===== Login – header aligné + grille qui utilise la hauteur ===== */
.login-grid{
  min-height: calc(100dvh - 96px); /* occupe la hauteur utile sans laisser un grand vide */
  align-items: center;
}
@media (max-width: 900px){
  .login-grid{ min-height: auto; align-items: start; }
}

/* Icône cadenas à côté du titre */
.login-hero{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.login-icon{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center;
  background:#eef2ff; color:#1e40af;
  box-shadow:0 2px 12px rgba(30,64,175,.15);
}
.login-icon svg{ width:28px; height:28px; }

/* Petite animation sur les trois points de l’illustration (code en approche) */
.mascot circle{ opacity:.25; }
.mascot circle:nth-of-type(1){ animation: blink 1.4s infinite .0s ease-in-out; }
.mascot circle:nth-of-type(2){ animation: blink 1.4s infinite .15s ease-in-out; }
.mascot circle:nth-of-type(3){ animation: blink 1.4s infinite .30s ease-in-out; }
@keyframes blink{
  0%,60%,100%{ opacity:.25 }
  30%{ opacity:1 }
}

/* === Modal / Toast system === */
:root{
  --ui-bg: #0b1020;
  --ui-surface: #fff;
  --ui-text: #0b1020;
  --ui-muted: #6b7280;
  --ui-primary: #3b82f6;
  --ui-success: #16a34a;
  --ui-warning: #f59e0b;
  --ui-danger: #ef4444;
  --ui-ring: 0 0 0 3px rgba(59,130,246,.35);
  --radius-xl: 18px;
  --shadow-xl: 0 20px 60px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.1);
}

.ui-backdrop{
  position: fixed; inset: 0;
  background: rgba(10,15,25,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  z-index: 1000;
}
.ui-backdrop.open{ opacity: 1; pointer-events: auto; }

.ui-modal{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  z-index: 1001; pointer-events: none;
}
.ui-dialog{
  width: min(720px, 92vw); max-height: 86vh; overflow: hidden;
  background: var(--ui-surface); color: var(--ui-text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: translateY(10px) scale(.98);
  opacity: 0; transition: transform .2s ease, opacity .2s ease;
  pointer-events: auto;
}
.ui-modal.open .ui-dialog{ transform: none; opacity: 1; }

.ui-head{
  display:flex; align-items:center; gap:.75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid #eef2f7;
}
.ui-title{ font-size: 1.1rem; font-weight: 700; margin:0; flex:1; }
.ui-badge{ padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; }
.ui-badge.success{ background:#ecfdf5; color:var(--ui-success); }
.ui-badge.warning{ background:#fffbeb; color:var(--ui-warning); }
.ui-badge.danger{ background:#fef2f2; color:var(--ui-danger); }
.ui-badge.info{ background:#eff6ff; color:var(--ui-primary); }

.ui-body{ padding: 1.1rem 1.25rem; overflow:auto; }
.ui-foot{
  display:flex; gap:.6rem; justify-content:flex-end;
  padding: .9rem 1.25rem; border-top: 1px solid #eef2f7;
}

.ui-input, .ui-textarea, .ui-select{
  width:100%; border:1px solid #e5e7eb; border-radius:12px;
  padding:.75rem .9rem; font: inherit; color: inherit; background:#fff;
}
.ui-input:focus, .ui-textarea:focus, .ui-select:focus{ outline:none; box-shadow: var(--ui-ring); border-color:#bfdbfe; }
.ui-textarea{ min-height: 110px; resize: vertical; }

.ui-btn{
  appearance:none; border:0; border-radius:12px; padding:.7rem 1rem;
  font-weight:700; cursor:pointer; background:#f3f4f6; color:#111827;
}
.ui-btn:hover{ filter:brightness(.98); }
.ui-btn:focus-visible{ outline:none; box-shadow: var(--ui-ring); }
.ui-btn.primary{ background: var(--ui-primary); color:#fff; }
.ui-btn.success{ background: var(--ui-success); color:#fff; }
.ui-btn.warning{ background: var(--ui-warning); color:#111; }
.ui-btn.danger{ background: var(--ui-danger); color:#fff; }
.ui-btn.ghost{ background: transparent; color:#374151; }

.ui-stars{ display:flex; gap:.25rem; font-size: 1.5rem; }
.ui-star{ cursor:pointer; filter: grayscale(1) opacity(.6); transition: transform .08s ease, filter .08s ease; }
.ui-star.on{ filter:none; transform: translateY(-1px); }

/* Toasts */
.ui-toasts{
  position: fixed; right: 16px; bottom: 16px; z-index: 1100;
  display:flex; flex-direction:column; gap:.6rem;
}
.ui-toast{
  background:#111827; color:#fff; padding:.8rem 1rem; border-radius:12px;
  box-shadow: var(--shadow-xl);
  display:flex; align-items:center; gap:.7rem;
  max-width: min(420px, 90vw);
  animation: slideIn .2s ease both;
}
.ui-toast.success{ background:#064e3b; }
.ui-toast.warning{ background:#7c2d12; }
.ui-toast.danger{ background:#7f1d1d; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .ui-dialog, .ui-backdrop, .ui-toast{ transition:none; animation:none; }
}

/* ===== Messagerie — bouton “Marquer comme réalisé” ===== */
.deal-fab, #dealFab, #btnDealDone{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(47,82,233,.30), 0 4px 8px rgba(47,82,233,.18);
  transition: transform .06s ease, box-shadow .2s ease;
}
.deal-fab:hover, #dealFab:hover, #btnDealDone:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(47,82,233,.35), 0 6px 12px rgba(47,82,233,.22);
}
.deal-fab:active, #dealFab:active, #btnDealDone:active{
  transform: none;
}
.deal-fab.is-hidden{               /* à toggler côté JS si l’utilisateur n’est pas proprio */
  display: none !important;
}

/* Laisse de la place en bas pour que les derniers messages ne passent pas sous le FAB */
.chat-scroll-pad{
  padding-bottom: 88px !important;
}

@media (max-width: 720px){
  .deal-fab, #dealFab, #btnDealDone{
    right: 12px;
    bottom: 12px;
    padding: .65rem .9rem;
  }
  .chat-scroll-pad{
    padding-bottom: 76px !important;
  }
}
.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.chat-title{ font-weight:800; }

/* === Panneau de discussion — cadrage “carte” + espace === */
.messages{
  border: 1px solid #e5e7eb;        /* remet la boîte */
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  /* on laisse la page scroller : pas d'overflow ici */
  min-height: calc(100dvh - var(--chat-top-offset, 96px) - var(--chat-composer-block, 130px));
}

/* espace naturel entre le panneau et la barre d'édition */
#pane .messages + .composer{ margin-top: 14px; }

/* === Bubbles alignées correctement === */
.msg{ 
  display: block;          /* évite les mises en ligne imprévues */
  max-width: 72%;
  margin: 8px 0;
}
.msg.other{                /* messages de l’autre → à gauche */
  margin-right: auto;
  text-align: left;
}
.msg.me{                   /* mes messages → à droite */
  margin-left: auto;
  text-align: right;
}

/* la bulle suit l’alignement sans étirer toute la largeur */
.msg .bubble{
  display: inline-block;
  padding: 8px;
  border-radius: 12px;
}
.msg.me .bubble{
  background: #e0ecff;
  border-radius: 12px 12px 0 12px;
}
.msg.other .bubble{
  background: #f3f4f6;
  border-radius: 12px 12px 12px 0;
}

/* === Hauteur réservée au composer (pour qu’on le voie dès l’arrivée) === */
/* ajuste finement si besoin : + grand => plus de place réservée en bas */
:root{
  --chat-top-offset: 96px;      /* header + titre */
  --chat-composer-block: 130px; /* hauteur approx. du composer */
}
@media (max-width: 720px){
  :root{ --chat-top-offset: 88px; --chat-composer-block: 160px; }
}

:root{
  --chat-top-offset: 104px;     /* +8px d’air sous le titre */
  --chat-composer-block: 240px; /* +50px réservés au composer */
}