/* =============================================================================
   VARIABLES & RESET
   ============================================================================= */
:root {
  color-scheme: light;
  --bottom-offset: 120px;
  --c1_home: #2563eb;
  --topbar-h: 82px;

}
* { box-sizing: border-box; }

/* =============================================================================
   BASE & TYPOGRAPHY
   ============================================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

/* =============================================================================
   LAYOUT STRUCTURE
   ============================================================================= */
.topbar{
  position: sticky; top: 0; z-index: 30;
  display: grid;
  grid-template-columns: minmax(40px, max-content) 1fr minmax(40px, max-content);
  align-items: center;
  padding: 12px 16px;
  background: #FAFAFA;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  height: var(--topbar-h);
}
.topbar::after{ content:""; grid-column:3; }

.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:0;
  min-height:calc(100vh - var(--topbar-h));
}
body.auth .layout{ grid-template-columns: 260px 1fr; }

/* ===== BRANDING & LOGO (compatible public + logué) ===== */
.brand { grid-column:2; justify-self:center; text-align:center; }
.brand-title { font-weight:700; letter-spacing:.2px; }
.brand-subtitle { font-size:.95rem; color:#475569; }

/* Styles CONTENEUR (seulement si .logo_home n'est PAS une image) */
.logo_home:not(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 250px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 30px;
}

/* Liens état : uniquement si conteneur lien */
.logo_home:not(img),
.logo_home:not(img):visited,
.logo_home:not(img):hover {
  text-decoration: none;
  color: #fff;
}

/* Styles IMAGE (dans tous les cas : image enfant OU image avec la classe) */
.logo_home img,
img.logo_home {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60px;          /* taille par défaut (pages internes / logué) */
  object-fit: contain;
  margin: 0 auto;            /* centrage OK en public */
}

/* Version loguée : logo plus petit */
body.auth .logo_home img,
body.auth img.logo_home {
  max-width: 220px;
  max-height: 60px;
}

/* Home publique : logo plus grand et centré */
.hero_home .logo_home img,
.hero_home img.logo_home {
  margin: 0 auto 24px;       /* centre + espace bas */
  max-height: none;          /* lève la limite 60px pour la home */
  width: clamp(220px, 40vw, 280px);
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Logo fixe (desktop logué) */
.fixed-logo { display: none; }
@media (min-width: 961px) {
  body.auth .fixed-logo .logo_home img,
  body.auth .fixed-logo img.logo_home {
    max-width: 240px;
    max-height: 60px;
    width: auto;
    height: auto;
  }
}

/* =============================================================================
   NAVIGATION & SIDEBAR
   ============================================================================= */
.sidebar{
  position:sticky; top:var(--topbar-h); align-self:start;
  height: calc(100vh - var(--topbar-h));
  overflow:auto;
  background:#FAFAFA;
  backdrop-filter: blur(8px);
  border-right:1px solid rgba(15,23,42,0.06);
  padding:16px;
  -webkit-overflow-scrolling: touch;
}
.nav{ display:flex; flex-direction:column; gap:12px; }
.nav-group{ border:1px solid rgba(15,23,42,0.08); border-radius:12px; padding:8px; background:#fff; }
.nav-group > summary{ cursor:pointer; user-select:none; padding:6px 8px; font-weight:600; color:#0f172a; list-style:none; }
.nav-group[open] > summary{ color:#1d4ed8; }
.nav-link{
  display:block; margin:6px 8px; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:#0f172a; background:#fff; border:1px solid rgba(15,23,42,0.06);
}
.nav-link:hover{ background:#f1f5f9; }
.nav-link:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; border-radius:8px; }

.menu-toggle{
  display:none;
  gap:4px; flex-direction:column;
  width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid rgba(15,23,42,0.12); border-radius:10px;
  background:#fff; cursor:pointer;
}
.menu-toggle .bar{ width:18px; height:2px; background:#0f172a; border-radius:2px; }

.sidebar-footnote{ margin-top:16px; color:#6b7280; }
.sidebar-footnote .legal-links{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }


/* ====== Conversations panel (sidebar) ====== */
.sidebar .conv-panel{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  margin:12px 0 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.sidebar .conv-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.sidebar .conv-title{
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#111827;
}

#newConvBtn, #newChildBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}

/* correction optique spécifique au + */
#newConvBtn span {
  position: relative;
  top: -1px;   /* monte un peu */
  left: -0px; /* décale un peu à gauche */
}

#newConvBtn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 14px rgba(99, 102, 241, 0.4);
}

#newConvBtn:active {
  transform: scale(0.95);
}

/* Liste */
.conv-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.conv-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #eef2f7;
}

.conv-item.is-active{
  background:#eef2ff;
  border-color:#c7d2fe;
}

.conv-link{
  flex:1;
  min-width:0;
  color:#111827;
  text-decoration:none;
  font-size:14px;
  line-height:1.3;
  /* coupe proprement sur 2 lignes max */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Autoriser le lien à passer sur 2 lignes */
.conv-list .conv-link {
  display: block;
  white-space: normal;   /* override de nowrap */
  overflow: visible;     /* évite l’ellipsis */
  text-overflow: clip;
}

/* Titre + sous-titre (prénom) en bloc */
.conv-list .conv-titleline {
  display: block;
  line-height: 1.25;
  font-weight: 600;
}
.conv-list .conv-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
  color: #6b7280;
}

.conv-link:hover{ text-decoration:underline; }

/* Actions (rename / delete) */
.conv-actions {
  display: flex;
  justify-content: flex-end; /* colle les boutons à droite */
  gap: 0;                     /* pas d’écart automatique */
}

.conv-actions .btn-ico {
  width: 24px;    /* un peu plus fin pour les coller */
  height: 24px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #374151;
}

.conv-actions .btn-ico:hover{ background:#e5e7eb; }
.conv-actions .btn-ico:active{ transform:translateY(1px); }

.conv-actions .btn-ico.edit {
  margin-right: 2px; /* pousse un peu ✎ vers la droite pour équilibrer */
}

.conv-actions .btn-ico.trash {
  font-size: 10px; /* poubelle légèrement plus petite */
}


/* Petites retouches pour la nav */
.nav .nav-link{ margin-top:8px; }

/* =============================================================================
   PAGE CONTENT
   ============================================================================= */
.page{
  padding: 5px 16px 16px;
  display:grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - var(--topbar-h));
  background:#FAFAFA;
}
.page.is-llm{ padding:0; }
body.guest .page{ max-width:1100px; margin:0 auto; }

/* =============================================================================
   LLM INTERFACE
   ============================================================================= */
.llm-surface{
  background:#FAFAFA; border-radius:16px;
  /* plus robuste : ne dépend pas d’un padding arbitraire */
  min-height: calc(100vh - var(--topbar-h));
  display:grid; grid-template-rows:auto 1fr auto;
}
.page.is-llm .llm-surface{ border-radius:0; }

/* Hero */
.hero{ padding-top: clamp(40px, 14vh, 180px); padding-bottom:24px; }
.hero-inner{ width:min(980px, 100%); margin:0 auto; text-align:center; padding-inline:16px; }
.hero-title{
  margin:0 0 18px;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height:1.1; font-weight:800; letter-spacing:.2px; color:#0f172a;
}
.hero-composer{
  display:grid; grid-template-columns: minmax(0,1fr) max-content; gap:12px;
  width:min(980px, 100%); margin:0 auto; align-items:center;
}
.hero-input{
  width:100%; padding:16px 18px;
  border:1px solid #cbd5e1; border-radius:999px; background:#fff;
  font-size:1.05rem; line-height:1.4; outline:none;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
}
.hero-input:focus{ border-color:#93c5fd; box-shadow:0 8px 24px rgba(37,99,235,.18); }
.hero-send{ padding:12px 18px; border-radius:999px; white-space:nowrap; }
.hero-hint{ margin:12px auto 0; color:#64748b; font-size:.95rem; }

/* Hero suggestions */
.hero-suggestions{ margin-top:28px; display:grid; place-items:center; }
.hero-suggestions-list{ width:min(560px, 92vw); align-self:center; }
.hero-suggestions-title{ margin:0 0 10px 0; font-size:14px; color:#94a3b8; }
.hero-suggestions .suggestion{
  display:inline-block; margin:6px 0; color:#475569;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;
  text-decoration-color:#cbd5e1; transition: color .15s ease, text-decoration-color .15s ease;
}
.hero-suggestions .suggestion:hover{ text-decoration-color:transparent; color:#111827; }
.hero-suggestions .suggestion:focus-visible{
  outline:none; text-decoration-color:currentColor;
  box-shadow:0 0 0 3px rgba(37,99,235,0.10); border-radius:4px;
}

/* =============================================================================
   CHAT INTERFACE
   ============================================================================= */
.chat-container{
  width:min(980px, 100%); margin:0 auto;
  height: calc(100vh - var(--topbar-h));
  overflow-y:auto;
  padding: 16px 24px 140px;
  display:flex; flex-direction:column; gap:12px;
  scroll-padding-bottom: var(--bottom-offset);
}
.msg{
  background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  padding:12px 14px; box-shadow:0 4px 12px rgba(15,23,42,.08);
  white-space: pre-wrap; line-height:1.45; max-width:80%;
  margin-inline: 6px;
}
.msg.user{ align-self:flex-end; background:#dbeafe; }
.msg.bot { align-self:flex-start; background:#f8fafc; }

.input-area{
  position: sticky; bottom:0; z-index:5;
  backdrop-filter: blur(8px);
  border-top:1px solid rgba(15,23,42,0.06);
  padding:10px 16px;
  display:grid; grid-template-columns:minmax(0,1fr); row-gap:8px;
  width:min(980px, 100%); margin:0 auto;
}
.status{ min-height:22px; font-size:14px; color:#334155; display:flex; align-items:center; gap:10px; }
textarea#question{
  width:100%; min-height:60px; resize:vertical;
  padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; background:#fff;
  font-size:1rem; line-height:1.4;
}
.controls{ display:flex; gap:10px; justify-content:flex-end; }

/* Typing indicator */
.typing-wrapper{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#555; }
.typing-dots{ display:inline-flex; gap:4px; }
.typing-dots .dot{
  width:6px; height:6px; border-radius:50%; background:#60a5fa; opacity:0;
  animation:typingBlink 1.2s infinite ease-in-out;
}
.typing-dots .dot:nth-child(2){ animation-delay:0.2s; }
.typing-dots .dot:nth-child(3){ animation-delay:0.4s; }
@keyframes typingBlink{
  0%,80%,100%{opacity:0;transform:scale(.8);}
  40%{opacity:1;transform:scale(1);}
}

/* =============================================================================
   GUEST HOMEPAGE
   ============================================================================= */
.guest-hero{
  background:#f7f9fc;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:16px;
  padding: 8px clamp(16px, 3vw, 32px) 28px;
  margin: 8px auto 20px;
  width: min(700px, calc(100vw - 32px));
}
.guest-hero-inner{ max-width: 860px; margin: 0 auto; text-align:center; }
.guest-eyebrow{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#eef2ff; color:#4338ca; font-weight:700; font-size:.82rem; letter-spacing:.2px;
  margin-bottom:12px;
}
.guest-title{ margin:0 0 10px; font-size: clamp(28px, 4.2vw, 48px); line-height:1.1; font-weight:800; }
.guest-title span{ color:#1d4ed8; }
.guest-subtitle{ color:#475569; font-size: clamp(16px, 1.6vw, 18px); margin:0 auto 18px; max-width:720px; }
.guest-cta{ display:flex; gap:12px; justify-content:center; margin: 8px 0 12px; }
.guest-cta .btn{ padding:12px 18px; border-radius:12px; }
.guest-features{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; color:#64748b; margin:12px 0 0;
}
.guest-features li{ list-style:none; padding:6px 10px; border:1px dashed #e5e7eb; border-radius:999px; background:#fff; }
.guest-cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin: 8px 0 24px; }
.guest-cards .card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}
.guest-cards .card h3{ margin:0 0 6px; font-size:1.06rem; }
.guest-cards .card p{ margin:0; color:#475569; font-size:.98rem; }

/* =============================================================================
   FORMS & AUTHENTICATION
   ============================================================================= */
.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  padding: 24px;
}
.auth-wrap{ max-width: 420px; margin: 0 auto; }
.form{ display:grid; gap:14px; }
.form label{ display:grid; gap:6px; font-weight:600; color:#0f172a; }
.form label span{ font-size:14px; line-height:1.4; }
.form label span a{ font-size:inherit; color:#2563eb; text-decoration:underline; }
.form label span a:hover{ color:#1d4ed8; }

.form input[type="email"],
.form input[type="password"],
.form input[type="text"],
.form input[type="tel"],
.form input[type="url"],
.form textarea,
.form select{
  width:100%;
  padding:12px 14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  font-size:1rem; line-height:1.4;
  outline:none; transition: box-shadow .15s ease, border-color .15s ease;
  font: inherit;
}
.form input::placeholder, .form textarea::placeholder{ color:#94a3b8; }
.form input:focus, .form textarea:focus, .form select:focus{
  border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.35);
}

/* Select styling */
.form select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:40px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  cursor:pointer; min-height:44px;
}
.form select:hover{ border-color:#93c5fd; }
.form select:disabled{ opacity:.7; cursor:not-allowed; }
.form select::-ms-expand{ display:none; }

.form .form-actions{
  display:flex; gap:10px; align-items:center; justify-content:center; margin-top:6px;
}
.form-actions--stack{ display:grid !important; grid-template-columns:1fr; gap:10px; }
.form-actions--stack .btn{ width:100%; text-align:center; }

.helper-links{ margin-top:14px; text-align:center; font-size:.95rem; }
.helper-links a{ color:#64748b; text-decoration:none; }
.helper-links a:hover{ text-decoration:underline; }

/* =============================================================================
   BUTTONS
   ============================================================================= */
button, input, select, textarea { font: inherit; }
.btn{
  appearance:none; border:none; cursor:pointer;
  background:#2563eb; color:#fff; font-weight:700; font-size:1rem; line-height:1.2;
  padding:10px 16px; border-radius:12px;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(37,99,235,.35); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.6; cursor:progress; }
.btn:focus-visible{ outline:3px solid rgba(147,197,253,.35); outline-offset:2px; }
.btn-primary{ background:#2563eb; color:#fff; }
.btn-ghost{ background:#fff; color:#0f172a; border:1px solid #e5e7eb; }

.cta-btn{
  display:inline-block; background:#2563eb; color:#fff; font-weight:700;
  text-decoration:none; font-size:1rem; line-height:1.2;
  padding:12px 18px; border-radius:12px;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s;
}
.cta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(37,99,235,.35); }
.cta-btn:active{ transform:translateY(0); }
.cta-btn:focus-visible{ outline:3px solid rgba(147,197,253,.35); outline-offset:2px; }

.logout-form{ margin-top:8px; }
.logout-btn{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(15,23,42,0.12);
  background:#ef4444; color:#fff; cursor:pointer;
}

/* =============================================================================
   SUBSCRIPTION PLANS
   ============================================================================= */
.plans{
  display:grid; gap:24px; max-width:960px; margin:0 auto; align-items:stretch;
}
@media (min-width: 961px){ .plans{ grid-template-columns:1fr 1fr; } }

.plan-card{
  display:flex; flex-direction:column; height:100%; border-radius:16px;
}
.plan-card ul{ margin:0; padding-left:20px; }
.plan-cta{ margin-top:auto; }
.plan-cta > *{ width:100%; }

.plan-free{
  background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.08); border: 2px solid #e2e8f0;
}
.plan-premium{
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color:#fff; position:relative; box-shadow:0 8px 24px rgba(59,130,246,0.30);
}
.plan-premium .badge{
  position:absolute; top:-10px; right:20px; background:#f59e0b; color:#fff;
  padding:6px 12px; border-radius:20px; font-size:12px; font-weight:700;
}
.plan-card:hover{ transform: translateY(-2px); transition: transform .15s ease, box-shadow .2s ease; }
.plan-free:hover{ box-shadow:0 8px 24px rgba(0,0,0,.12); }
.plan-premium:hover{ box-shadow:0 12px 30px rgba(59,130,246,0.40); }
.plan-premium .plan-cta button{
  background:#fff; color:#1d4ed8; border:none; border-radius:12px; padding:16px; font-size:18px; font-weight:700; cursor:pointer;
}

/* =============================================================================
   CONTACT FORM
   ============================================================================= */
._contact-card{ background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(15,23,42,.06); padding:20px; }
._contact-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
._contact-field{ margin:12px 0; }
._contact-field label{ display:block; margin-bottom:6px; color:#334155; font-weight:600; }
._contact-field input, ._contact-field select, ._contact-field textarea{
  width:100%; padding:10px; border:1px solid #e2e8f0; border-radius:10px; font:inherit;
}
._contact-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
  padding-right:42px; line-height:1.4; min-height:44px;
}
._contact-field input:focus, ._contact-field select:focus, ._contact-field textarea:focus{
  outline:3px solid rgba(37,99,235,.15); border-color:#93c5fd;
}
._contact-flashzone ._contact-flash{ background:#f1f5f9; border-radius:10px; padding:10px; margin:6px 0; }
._contact-actions{ text-align:center; margin-top:20px; }
._contact-actions-flex{ display:flex; gap:12px; justify-content:center; margin-top:20px; }
._contact-link{ color:#2563eb; text-decoration:underline; }



/* =============================================================================
   EDITORIAL PAGES
   ============================================================================= */
.page-editoriale{
  max-width: 900px; margin: 32px auto; padding: 24px;
  background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.page-editoriale h1{ margin-top:0; }
.page-editoriale h2{ margin-top:24px; }
.page-editoriale a{ color:#2563eb; text-decoration:underline; }

/* =============================================================================
   FOOTER & LEGAL
   ============================================================================= */
.site-footer{
  margin-top:auto; padding:16px; text-align:center; font-size:14px; color:#64748b;
}
.site-footer .footer-links{ margin-bottom:8px; }
.site-footer .footer-links a{ color:inherit; text-decoration:underline; }

.legal-link{ font-size:12.5px; color:#6b7280; text-decoration:none; opacity:.95; }
.legal-link:hover{ text-decoration:underline; color:#1d4ed8; }
.legal-link:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; border-radius:6px; }

.footer-note, .sidebar-footnote small{
  font-size:13px; color:#64748b; line-height:1.4;
}

/* =============================================================================
   UTILITIES
   ============================================================================= */
.flash{
  background:#fff3cd; color:#664d03; padding:12px 16px; border-radius:8px; margin:12px 0;
  border:1px solid #f1c40f; text-align:center;
}
.link-upgrade{ color:#2563eb; text-decoration:underline; font-weight:600; cursor:pointer; }
.link-upgrade:hover{ color:#1d4ed8; }

.is-hidden{ display:none !important; }
.text-center{ text-align:center; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.mt-32{ margin-top:32px; }

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */
/* Desktop logged users: hide topbar, show fixed logo */
@media (min-width: 961px){
  /* Plans grid */
  .plans{ grid-template-columns:1fr 1fr; }

  /* Hide topbar for logged users */
  body.auth .topbar{ display:none !important; }

  /* Fixed logo visible et au-dessus */
  body.auth .fixed-logo{
    display:flex !important;
    position:fixed !important;
    top:0 !important; left:0 !important;
    width:260px; height:var(--topbar-h);
    background:#FAFAFA;
    border-right:1px solid rgba(15,23,42,0.06);
    z-index:1100;
    align-items:center; justify-content:center; padding:0 16px;
    transform:translateZ(0) !important; will-change:transform !important; isolation:isolate !important;
  }
  body.auth .fixed-logo .logo_home img{
    max-width:240px; max-height:60px; width:auto; height:auto; object-fit:contain;
  }

  /* Sidebar compensée (place du logo) */
  body.auth .sidebar{ top:0; height:100vh; padding-top:var(--topbar-h); backdrop-filter:none; }
  body.auth .layout{ min-height:100vh; }
  body.auth .page{ min-height:100vh; }
  body.auth .llm-surface{ min-height: calc(100vh - 0px); }
  body.auth .chat-container{ height:100vh; }
}

/* Mobile & Tablet */
@media (max-width: 960px){

  :root { --topbar-h: 82px; }

  /* Mobile menu visible par défaut */
  .menu-toggle{ display:inline-flex; }

  body.auth .layout{ grid-template-columns:1fr; }

  .sidebar{
    position: fixed; top: var(--topbar-h); padding-top:20px; left: 0; z-index: 26;
    width: 86vw; max-width: 320px;
    height: calc(100vh - var(--topbar-h));
    height: calc(100svh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    transform: translateX(-104%); transition: transform .25s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.2); overflow-y:auto;
  }
  body.sidebar-open .sidebar{ transform: translateX(0); }
  .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:25; }
  .backdrop[hidden]{ display:none; }

  .guest-cards{ grid-template-columns: 1fr; }
  .hero-composer{ grid-template-columns: 1fr; }
  .hero-send{ justify-self:center; width:140px; }
  .hero-inner{ padding-inline: 12px; }
  .hero_home .logo_home img{ width: clamp(250px, 50vw, 250px); margin-bottom:20px; }
}

/* =============================================================================
   DARK MODE
   ============================================================================= */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
/* pour activer Dark mode remplacer par @media (prefers-color-scheme: dark){*/

  /* Topbar */
  .topbar{ background:rgba(15,23,42,0.9); border-color:#1f2937; }
  .brand-subtitle{ color:#94a3b8; }

  /* Sidebar + nav */
  .sidebar{ background:rgba(15,23,42,0.95); border-color:#1f2937; }
  .nav-group{ background:#0f172a; border-color:#1f2937; }
  .nav-link{ background:#0f172a; color:#e5e7eb; border-color:#1f2937; }
  .nav-link:hover{ background:#111827; }
  .logout-btn{ background:#b91c1c; }

  /* Hero & chat */
  .hero-title{ color:#e5e7eb; }
  .hero-input{ background:#0b1220; color:#e5e7eb; border-color:#1f2937; }

  textarea#question{ background:#0b1220; color:#e5e7eb; border-color:#1f2937; }
  .input-area{ background:rgba(15,23,42,0.9); border-color:#1f2937; }

  .msg{ background:#0f172a; border-color:#1f2937; }
  .msg.user{ background:#1e3a8a; }
  .msg.bot{ background:#1f2937; }

  /* Guest */
  .guest-hero{ background:#0b1220; border-color:#1f2937; }
  .guest-subtitle{ color:#a3b2c5; }
  .guest-cards .card{ background:#0f172a; border-color:#1f2937; box-shadow:none; }
  .guest-cards .card p{ color:#cbd5e1; }

  /* Forms & Cards */
  .card{ background:#0f172a; border-color:#1f2937; box-shadow:none; }
  .form label{ color:#e5e7eb; }
  .form input[type="email"],
  .form input[type="password"],
  .form input[type="text"],
  .form input[type="tel"],
  .form input[type="url"],
  .form textarea,
  .form select{
    background:#0b1220; color:#e5e7eb; border-color:#1f2937;
  }
  .form input::placeholder, .form textarea::placeholder{ color:#94a3b8; }
  .form input:focus, .form textarea:focus, .form select:focus{
    border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25);
  }
  .form select{
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  }

  /* Links & legal */
  .helper-links a{ color:#a3b2c5; }
  .helper-links a:hover{ color:#cbd5e1; }
  .legal-link{ color:#9aa3b2; }
  .legal-link:hover{ color:#d1d5db; }

  /* Editorial */
  .page-editoriale{ background:#0f172a; border:1px solid #1f2937; box-shadow:none; }
  .page-editoriale a{ color:#93c5fd; }

  /* Footer */
  .site-footer{ color:#94a3b8; border-color:#1f2937; }
  .site-footer a{ color:#a3b2c5; }
  .site-footer a:hover{ color:#cbd5e1; }

  /* Hero suggestions */
  .hero-suggestions-title{ color:#9aa7b5; }
  .hero-suggestions .suggestion{ color:#cbd5e1; text-decoration-color:#475569; }
  .hero-suggestions .suggestion:hover{ color:#f1f5f9; }
  .hero-suggestions .suggestion:focus-visible{ box-shadow:0 0 0 3px rgba(96,165,250,.18); }

  /* Fixed logo dark */
  body.auth .fixed-logo{ background:rgba(15,23,42,0.95); border-color:#1f2937; }

  /* Typing indicator */
  .typing-wrapper{ color:#cbd5e1; }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}