/* ==========================================================================
   MyTranslateChat — Identité v4 « éditoriale & chaleureuse »
   Chargée APRÈS style.css, design.css et ui.css (qui surcharge tout le reste).
   Palette crème / terre cuite / encre chaude, titres en serif éditoriale,
   photos réelles, coins discrets. Zéro dégradé violet.
   Mobile d'abord, multi-colonnes à partir de 768 px.
   ========================================================================== */

/* --------------------------------- Tokens -------------------------------- */
body.app-body {
  /* Surfaces chaudes */
  --u-bg: #F7F5F2;
  --u-surface: #FFFFFF;
  --u-surface-2: #FBF9F7;
  --u-line: #E7DFD7;
  --u-line-soft: #F0EAE4;

  /* Encre */
  --u-ink: #241F1C;
  --u-ink-2: #4A423D;
  --u-muted: #857B73;

  /* Accent terre cuite */
  --u-accent: #A6532F;
  --u-accent-ink: #83401F;
  --u-accent-soft: #F7EBE3;

  /* Repères colorés (icônes, états) */
  --u-c1: #A6532F;
  --u-c2: #4E6B4A;
  --u-c3: #A14845;
  --u-c4: #B4793A;
  --u-c5: #6B5A8E;
  --u-c6: #3F6B72;

  --u-radius: 14px;
  --u-radius-sm: 10px;
  --u-shadow: 0 1px 2px rgba(36, 31, 28, .05);
  --u-shadow-lift: 0 14px 30px -18px rgba(36, 31, 28, .38);

  /* Familles */
  --v-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --v-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------- Fond --------------------------------- */
body.app-body:not(.auth-body) {
  background-color: var(--u-bg);
  background-image: none;
  background-attachment: scroll;
  color: var(--u-ink);
  font-family: var(--v-sans);
  -webkit-font-smoothing: antialiased;
}

body.app-body .page { padding-left: 16px; padding-right: 16px; }

/* -------------------------------- Typo ----------------------------------- */
/* Les titres prennent la serif éditoriale : c'est ça qui fait « premium » */
body.app-body h1,
body.app-body .hero h1,
body.app-body .app-hero-title,
body.app-body .chat-title,
body.app-body .auth-title,
body.app-body .page-title {
  font-family: var(--v-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--u-ink);
  line-height: 1.08;
}

body.app-body h2,
body.app-body .section-head h2 {
  font-family: var(--v-sans);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--u-ink);
}

body.app-body .page-sub,
body.app-body .muted { color: var(--u-muted); }

/* Étiquette de section : petite capitale espacée, très éditoriale */
body.app-body .section-head h2 {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--u-muted);
}

body.app-body .section { margin: 32px 0; }
body.app-body .section-head { margin-bottom: 12px; }
body.app-body .link-more {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--u-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 83, 47, .28);
  padding-bottom: 1px;
}
body.app-body .link-more:hover { border-bottom-color: var(--u-accent); }

/* -------------------------------- Boutons -------------------------------- */
body.app-body .btn {
  border-radius: 999px;
  min-height: 42px;
  padding: 9px 22px;
  font-family: var(--v-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
body.app-body .btn-primary {
  background: var(--u-ink);
  background-image: none;
  color: #FBF7F3;
  border: 1px solid var(--u-ink);
  box-shadow: 0 2px 10px -4px rgba(36, 31, 28, .45);
}
body.app-body .btn-primary:hover {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: #fff;
  transform: translateY(-1px);
}
body.app-body .btn-ghost {
  background: transparent;
  border: 1px solid var(--u-line);
  color: var(--u-ink);
}
body.app-body .btn-ghost:hover {
  background: var(--u-surface);
  border-color: var(--u-ink);
  color: var(--u-ink);
}
body.app-body .btn-block { border-radius: 999px; }

/* ------------------------------ Champs ----------------------------------- */
body.app-body .field label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--u-muted);
  margin-bottom: 6px;
}
body.app-body input[type=text],
body.app-body input[type=email],
body.app-body input[type=password],
body.app-body input[type=tel],
body.app-body select,
body.app-body textarea {
  border-radius: var(--u-radius-sm);
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  color: var(--u-ink);
  font-family: var(--v-sans);
  font-size: 16px;
  padding: 12px 14px;
}
body.app-body input:focus,
body.app-body select:focus,
body.app-body textarea:focus {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3px rgba(166, 83, 47, .12);
}
body.app-body .chip {
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  font-size: 12.5px;
  font-weight: 550;
  padding: 7px 14px;
  color: var(--u-ink-2);
}
body.app-body .chip.active {
  background: var(--u-ink);
  border-color: var(--u-ink);
  color: #FBF7F3;
}

/* ===================== HERO ACCUEIL — photo plein cadre ==================== */
body.app-body .hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  margin: 8px 0 30px;
  background: #241F1C;
  border: 1px solid rgba(36, 31, 28, .1);
  box-shadow: 0 24px 60px -40px rgba(36, 31, 28, .7);
  isolation: isolate;
}
body.app-body .hero::before,
body.app-body .hero::after { display: none; }

body.app-body .hero-photo-media { position: absolute; inset: 0; z-index: 0; }
body.app-body .hero-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(.92) contrast(1.02);
}
/* Voile chaud pour que le texte reste lisible partout */
body.app-body .hero-photo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(30, 22, 18, .30) 0%, rgba(30, 22, 18, .55) 52%, rgba(30, 22, 18, .90) 100%),
    radial-gradient(120% 80% at 78% 8%, rgba(166, 83, 47, .38), rgba(166, 83, 47, 0) 62%);
}

body.app-body .hero-inner {
  position: relative;
  z-index: 1;
  padding: 34px 22px 26px;
  max-width: 1024px;
  margin: 0 auto;
}
body.app-body .hero-inner h1 {
  color: #FDFAF7;
  font-size: clamp(34px, 9.2vw, 68px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 13ch;
  text-shadow: 0 2px 24px rgba(20, 14, 11, .35);
}
body.app-body .hero-inner > p {
  color: rgba(255, 250, 245, .84);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 22px;
}

body.app-body .hero .quick-actions { gap: 10px; margin-bottom: 18px; }
body.app-body .hero .btn { min-height: 44px; padding: 10px 24px; }
body.app-body .hero .btn-primary {
  background: #FBF7F3;
  border-color: #FBF7F3;
  color: #241F1C;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
}
body.app-body .hero .btn-primary:hover {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: #fff;
}
body.app-body .hero .btn-ghost {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #FDFAF7;
  backdrop-filter: blur(6px);
}
body.app-body .hero .btn-ghost:hover {
  background: rgba(255, 255, 255, .96);
  border-color: #fff;
  color: #241F1C;
}

/* Badges : petites puces de verre dépoli sur la photo */
body.app-body .hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}
body.app-body .hero-badges span {
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: .02em;
  color: rgba(253, 250, 247, .92);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(8px);
}

/* Les bulles flottantes : on les sort du hero, façon aperçu de conversation */
body.app-body .hero-art {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 0 22px 30px;
  max-width: 1024px;
  margin: 0 auto;
}
body.app-body .hero-art .bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(253, 250, 247, .96);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 14px;
  padding: 9px 13px;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .7);
  animation: none;
  transform: none;
}
body.app-body .hero-art .bubble:nth-child(2) { margin-left: 14px; }
body.app-body .hero-art .bubble:nth-child(3) { margin-left: 28px; }
body.app-body .hero-art .bubble p {
  margin: 0;
  font-size: 13px;
  color: #2E2622;
  line-height: 1.3;
}
body.app-body .hero-art .bubble-flag {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--u-accent-soft);
  color: var(--u-accent-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  display: grid;
  place-items: center;
}

/* Bandeau des langues : défilement horizontal discret */
body.app-body .hero-langs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 22px 18px;
  max-width: 1024px;
  margin: 0 auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.app-body .hero-langs::-webkit-scrollbar { display: none; }
body.app-body .hero-lang {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(253, 250, 247, .78);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ------------------------ Sélecteur de langue accueil -------------------- */
body.app-body .lang-switch {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--u-line);
  border-radius: 0;
  padding: 10px 0;
  margin: 0 0 16px;
  gap: 8px;
  box-shadow: none;
}
body.app-body .lang-switch-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--u-muted);
}
body.app-body .lang-switch-globe { color: var(--u-muted); }
body.app-body .lang-pill {
  border-radius: 999px;
  border: 1px solid var(--u-line);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  color: var(--u-ink-2);
}
body.app-body .lang-pill.active {
  background: var(--u-ink);
  border-color: var(--u-ink);
  color: #FBF7F3;
}

/* ====================== BANDEAU BIENVENUE (Mes salons) =================== */
body.app-body .app-hero {
  border-radius: 18px;
  padding: 22px 20px;
  margin-bottom: 6px;
  background-color: #2B2320;
  background-image:
    radial-gradient(150% 100% at 88% -10%, rgba(166, 83, 47, .55), rgba(166, 83, 47, 0) 62%),
    linear-gradient(160deg, #2E2622 0%, #241F1C 100%);
  box-shadow: 0 18px 44px -32px rgba(36, 31, 28, .85);
  animation: none;
}
body.app-body .app-hero::before { display: none; }
body.app-body .app-hero::after { display: none; }
body.app-body .app-hero-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--v-serif);
  font-size: 19px;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(253, 250, 247, .28);
}
body.app-body .app-hero-title {
  font-family: var(--v-serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  color: #FDFAF7;
  text-shadow: none;
}
body.app-body .app-hero-wave { color: #E8B893; }
body.app-body .app-hero-wave svg { width: 20px; height: 20px; }
body.app-body .app-hero-sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(253, 250, 247, .72);
  margin-top: 5px;
}
body.app-body .app-hero-sub strong {
  color: #F3D9C6;
  font-weight: 650;
}
body.app-body .app-hero-actions { margin-top: 16px; gap: 8px; }
body.app-body .app-hero-actions .btn {
  min-height: 36px;
  padding: 7px 15px;
  font-size: 12.5px;
  border-radius: 999px;
}
body.app-body .app-hero-actions .btn-primary {
  background: #FBF7F3;
  border-color: #FBF7F3;
  color: #241F1C;
}
body.app-body .app-hero-actions .btn-primary:hover {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: #fff;
}
body.app-body .app-hero-actions .btn-ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(253, 250, 247, .34);
  color: #FDFAF7;
}
body.app-body .app-hero-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, .95);
  border-color: #fff;
  color: #241F1C;
}

/* =========================== CARTES DE SALONS =========================== */
body.app-body .room-list { gap: 10px; }
body.app-body .room-card {
  border-radius: var(--u-radius);
  border: 1px solid var(--u-line);
  padding: 14px 15px;
  background: var(--u-surface);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body.app-body .room-card:hover {
  transform: translateY(-1px);
  border-color: #D6C9BE;
  box-shadow: 0 12px 26px -20px rgba(36, 31, 28, .55);
}
body.app-body .room-card-head { gap: 12px; align-items: flex-start; }
body.app-body .room-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background-image: none;
  background: var(--u-accent-soft);
  color: var(--u-accent-ink);
}
body.app-body .room-card:nth-child(6n+1) .room-ico { background: #F7EBE3; color: #A6532F; }
body.app-body .room-card:nth-child(6n+2) .room-ico { background: #EAF0E8; color: #4E6B4A; }
body.app-body .room-card:nth-child(6n+3) .room-ico { background: #F8E9E8; color: #A14845; }
body.app-body .room-card:nth-child(6n+4) .room-ico { background: #F8EFE1; color: #B4793A; }
body.app-body .room-card:nth-child(6n+5) .room-ico { background: #EFEBF4; color: #6B5A8E; }
body.app-body .room-card:nth-child(6n+6) .room-ico { background: #E7EFEF; color: #3F6B72; }

body.app-body .room-card .room-title,
body.app-body .room-card .room-name {
  font-family: var(--v-sans);
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--u-ink);
}
body.app-body .room-card .room-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--u-muted);
}
body.app-body .room-card .room-meta,
body.app-body .room-card .room-ago,
body.app-body .room-card .room-last {
  font-size: 11.5px;
  color: var(--u-muted);
}
body.app-body .room-card .lang-badge {
  background: var(--u-surface-2);
  border: 1px solid var(--u-line-soft);
  color: var(--u-ink-2);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}

/* ============================ CARTES FONCTION =========================== */
body.app-body .feature-grid { gap: 12px; }
body.app-body .feature-card {
  border-radius: var(--u-radius);
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  padding: 20px 18px;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.app-body .feature-card:hover {
  border-color: #D6C9BE;
  box-shadow: 0 14px 30px -24px rgba(36, 31, 28, .5);
}
body.app-body .feature-card svg { color: var(--u-accent); }
body.app-body .feature-card h3 {
  font-family: var(--v-sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--u-ink);
}
body.app-body .feature-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--u-muted);
}

/* ============================ STATISTIQUES ============================== */
body.app-body .stats-grid { gap: 10px; }
body.app-body .stat-tile {
  border-radius: var(--u-radius);
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  padding: 16px 14px;
  box-shadow: none;
}
body.app-body .stat-tile strong {
  font-family: var(--v-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--u-ink);
}
body.app-body .stat-tile span {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--u-muted);
}

/* ========================= APERÇU DE DÉMONSTRATION ====================== */
body.app-body .demo-window {
  border-radius: var(--u-radius);
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  box-shadow: 0 16px 34px -28px rgba(36, 31, 28, .5);
  overflow: hidden;
}
body.app-body .demo-window h3 {
  font-family: var(--v-sans);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--u-muted);
  background: var(--u-surface-2);
  border-bottom: 1px solid var(--u-line-soft);
  padding: 11px 16px;
  margin: 0;
}

/* ============================== LISTES INFOS =========================== */
body.app-body .info-list.steps-list li {
  border-radius: var(--u-radius-sm);
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--u-muted);
}
body.app-body .info-list.steps-list li strong { color: var(--u-ink); font-weight: 650; }
body.app-body .info-list.steps-list li svg { color: var(--u-accent); }

/* ============================== APPEL FINAL ============================ */
body.app-body .cta-section {
  border-radius: 18px;
  border: 1px solid var(--u-line);
  background:
    radial-gradient(120% 90% at 85% 0%, #F7EBE3, rgba(247, 235, 227, 0) 60%),
    var(--u-surface);
  padding: 34px 22px;
  text-align: center;
}
body.app-body .cta-section h2 {
  font-family: var(--v-serif);
  font-size: clamp(26px, 6.4vw, 40px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--u-ink);
}
body.app-body .cta-section > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--u-muted);
  max-width: 44ch;
  margin: 6px auto 20px;
}

/* ================================ CHAT ================================= */
body.app-body .chat-hero {
  border-radius: 16px;
  background-color: #2B2320;
  background-image:
    radial-gradient(150% 110% at 90% -20%, rgba(166, 83, 47, .5), rgba(166, 83, 47, 0) 60%),
    linear-gradient(160deg, #2E2622 0%, #241F1C 100%);
  box-shadow: 0 16px 40px -32px rgba(36, 31, 28, .8);
}
body.app-body .chat-hero::after { display: none; }
body.app-body .chat-hero .chat-title {
  font-family: var(--v-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.12;
  color: #FDFAF7;
}
body.app-body .chat-hero .chat-sub { font-size: 12px; color: rgba(253, 250, 247, .7); }
body.app-body .chat-hero .chat-tools .btn {
  border-radius: 999px;
  min-height: 33px;
  font-size: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(253, 250, 247, .3);
  color: #FDFAF7;
}
body.app-body .chat-hero .chat-tools .btn:hover {
  background: rgba(255, 255, 255, .95);
  border-color: #fff;
  color: #241F1C;
}

/* Messages */
body.app-body .msg-row { border-bottom: 1px solid var(--u-line-soft); }
body.app-body .msg-author { font-weight: 650; color: var(--u-ink); }
body.app-body .msg-time { color: var(--u-muted); }
body.app-body .msg-text { color: var(--u-ink-2); line-height: 1.6; }
body.app-body .msg-translated {
  border-left: 2px solid var(--u-accent);
  background: var(--u-accent-soft);
  border-radius: 0 8px 8px 0;
  padding: 7px 11px;
  font-size: 13px;
  color: #6D3B23;
}

/* Composer */
body.app-body .composer {
  border-radius: 14px;
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  box-shadow: 0 -8px 26px -24px rgba(36, 31, 28, .6);
}
body.app-body .composer input,
body.app-body .composer textarea {
  border: none;
  background: transparent;
  font-size: 16px;
}
body.app-body .composer .btn-primary {
  border-radius: 999px;
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: #fff;
}
body.app-body .composer .btn-primary:hover { background: var(--u-accent-ink); border-color: var(--u-accent-ink); }

/* Boutons-icônes de la zone de saisie (émoticônes, image, envoyer).
   Ils ont une largeur fixe : la marge intérieure « 9px 22px » des boutons
   normaux les écrasait (44px de padding dans 40px de large), ce qui réduisait
   les icônes à un point. On annule donc le padding et on empêche le SVG de
   se rétracter. */
body.app-body .composer-emoji,
body.app-body .composer-send {
  padding: 0;
  flex: 0 0 auto;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.app-body .composer-emoji svg,
body.app-body .composer-send svg {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}
body.app-body .composer-send svg { width: 20px; height: 20px; }
body.app-body .composer-emoji:hover svg,
body.app-body .composer-send:hover svg { transform: none; }

/* ============================ NAVIGATION =============================== */
body.app-body .tabbar {
  background: rgba(253, 250, 247, .94);
  border-top: 1px solid var(--u-line);
  backdrop-filter: blur(14px);
}
body.app-body .tab { color: var(--u-muted); }
body.app-body .tab.active { color: var(--u-accent); }
body.app-body .tab.active .tab-ico { color: var(--u-accent); }

body.app-body .pc-nav {
  background: #FFFFFF;
  border-right: 1px solid var(--u-line);
}
body.app-body .pc-brand strong {
  font-family: var(--v-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--u-ink);
}
body.app-body .pc-links a {
  border-radius: var(--u-radius-sm);
  font-size: 13px;
  font-weight: 550;
  color: var(--u-ink-2);
}
body.app-body .pc-links a:hover { background: var(--u-surface-2); color: var(--u-ink); }
body.app-body .pc-links a.active,
body.app-body .pc-links a[aria-current="page"] {
  background: var(--u-accent-soft);
  color: var(--u-accent-ink);
  font-weight: 650;
}

body.app-body .side-menu { background: #1F1A17; }
body.app-body .side-head { border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.app-body .side-brand strong {
  font-family: var(--v-serif);
  font-size: 19px;
  font-weight: 600;
  color: #FDFAF7;
}
body.app-body .side-brand span { color: rgba(253, 250, 247, .55); font-size: 11.5px; }
body.app-body .side-links a {
  border-radius: var(--u-radius-sm);
  color: rgba(253, 250, 247, .78);
  font-size: 13.5px;
  font-weight: 550;
}
body.app-body .side-links a:hover,
body.app-body .side-links a.active {
  background: rgba(255, 255, 255, .07);
  color: #FDFAF7;
}
body.app-body .side-links svg { color: #E8B893; }

/* ============================ AUTH (connexion) ========================= */
body.app-body.auth-body {
  background-color: var(--u-bg);
  background-image:
    radial-gradient(900px 460px at 50% -20%, #F7EBE3, rgba(247, 235, 227, 0) 68%),
    none;
}
body.app-body .auth-card {
  border-radius: 18px;
  border: 1px solid var(--u-line);
  background: var(--u-surface);
  box-shadow: 0 26px 60px -44px rgba(36, 31, 28, .6);
}
body.app-body .auth-title {
  font-family: var(--v-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--u-ink);
}

/* ============================== FOOTER ================================= */
/* Fond encre chaude, textes clairs. La version précédente écrivait du brun
   sur ce fond sombre : le pied de page devenait illisible. */
body.app-body .site-footer {
  background-image: none;
  background: #221D1A;
  border-top: none;
  border-radius: 18px 18px 0 0;
  margin-top: 40px;
  padding: 30px 20px 26px;
  color: rgba(253, 250, 247, .7);
  font-size: 12.5px;
}
body.app-body .site-footer::before {
  height: 2px;
  background-image: linear-gradient(90deg, #A6532F, #C98A5E, #E8B893);
  opacity: .9;
}
body.app-body .footer-brand strong {
  font-family: var(--v-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FDFAF7;
}
body.app-body .footer-text { font-size: 12.5px; line-height: 1.6; color: rgba(253, 250, 247, .62); }
body.app-body .footer-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(253, 250, 247, .44);
  margin-bottom: 9px;
}
body.app-body .footer-links { font-size: 12.5px; gap: 8px; }
body.app-body .site-footer a { color: rgba(253, 250, 247, .78); }
body.app-body .site-footer a:hover { color: #E8B893; }
body.app-body .footer-info li { font-size: 12.5px; color: rgba(253, 250, 247, .66); }
body.app-body .footer-info svg { color: #C98A5E; }
body.app-body .footer-copy,
body.app-body .footer-legal-note {
  font-size: 11.5px;
  color: rgba(253, 250, 247, .42);
}
body.app-body .footer-legal-note a { color: rgba(253, 250, 247, .55); }

/* ==================== CORRECTIONS DE MISE EN PAGE ====================== */
/* Grands numéros des étapes : discrets, dans le coin, sans mordre le texte */
body.home-body .steps-list li { padding-right: 44px; overflow: hidden; }
body.home-body .steps-list li::before {
  font-family: var(--v-serif);
  font-size: 30px;
  font-weight: 600;
  top: 6px;
  right: 12px;
  opacity: .16;
  color: var(--u-accent);
}
body.home-body .steps-list li strong { display: inline; color: var(--u-ink); }

/* Statistiques : 2 colonnes serrées sur téléphone, pas 4 blocs pleine hauteur */
body.home-body .stat-tile { padding: 13px 12px; }
body.home-body .stat-tile strong {
  font-family: var(--v-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--u-ink);
}
body.home-body .stat-tile span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--u-muted);
  line-height: 1.3;
}

/* ======================= ORDINATEUR (≥ 768 px) ========================= */
@media (min-width: 768px) {
  body.app-body .page { padding-left: 28px; padding-right: 28px; }

  body.app-body .hero-inner { padding: 64px 52px 40px; }
  body.app-body .hero-inner h1 { font-size: clamp(46px, 5.4vw, 72px); max-width: 15ch; }
  body.app-body .hero-inner > p { font-size: 16.5px; }
  body.app-body .hero-art {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 52px 34px;
  }
  body.app-body .hero-art .bubble:nth-child(2),
  body.app-body .hero-art .bubble:nth-child(3) { margin-left: 0; }
  body.app-body .hero-langs { padding: 0 52px 22px; }

  body.app-body .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  body.app-body .feature-card { padding: 26px 24px; }
  body.app-body .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  body.app-body .room-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  body.app-body .cta-section { padding: 64px 48px; }
  body.app-body .app-hero { padding: 28px 26px; }
  body.app-body .app-hero-title { font-size: 31px; }
  body.app-body .app-hero-actions { display: flex; flex-wrap: wrap; }
  body.app-body .app-hero-actions .btn-primary { width: auto; }
}

/* ======================= TÉLÉPHONE (< 768 px) ========================== */
@media (max-width: 767px) {
  /* Une seule colonne partout : rien de serré, rien de coupé */
  body.app-body .feature-grid,
  body.app-body .room-list,
  body.app-body .hero-art { grid-template-columns: 1fr; }

  /* Les 4 chiffres restent sur 2 colonnes : compact et lisible */
  body.app-body .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

  body.app-body .hero-inner h1 { font-size: clamp(32px, 10vw, 44px); }
  body.app-body .hero { border-radius: 16px; }
  body.app-body .hero-photo-media img { object-position: 50% 38%; }

  body.app-body .app-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  body.app-body .app-hero-actions .btn-primary { grid-column: 1 / -1; }
  body.app-body .app-hero-actions .btn { width: 100%; }

  body.app-body .quick-actions { flex-wrap: wrap; }
  body.app-body .quick-actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-body .btn:hover,
  body.app-body .room-card:hover { transform: none; }
}

/* ========================== LOGO DE MARQUE ==============================
   Le logo est placé en haut à gauche de chaque page, à 2,5 × 2,5 cm.
   La barre est fixe : le logo reste visible quand la page défile.
   ======================================================================= */
body.app-body .brand-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 54;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: rgba(247, 245, 242, .95);
  border-bottom: 1px solid var(--u-line-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.app-body .brand-link {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}

/* 2,5 cm exactement, sur toutes les tailles d'écran */
body.app-body .brand-logo {
  display: block;
  width: 2.5cm;
  height: 2.5cm;
  object-fit: contain;
  border-radius: 12px;
}

body.app-body .brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}
body.app-body .brand-text strong {
  font-family: var(--v-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--u-ink);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-body .brand-text span {
  font-size: 11px;
  color: var(--u-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le bouton menu rejoint la barre, aligné à droite */
body.app-body .brand-bar .burger {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  color: var(--u-ink);
  box-shadow: none;
}

/* Le contenu commence sous la barre (2,5 cm + marges), sinon le logo le masque */
@media (max-width: 899px) {
  body.app-body .page { padding-top: calc(124px + env(safe-area-inset-top, 0px)); }
  body.app-body.chat-body .page { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
  body.app-body.auth-body .page { padding-top: calc(130px + env(safe-area-inset-top, 0px)); }
}

/* Même logo 2,5 cm en haut à gauche du menu latéral et de la colonne ordinateur */
body.app-body .side-head { gap: 12px; }
body.app-body .side-head .side-logo {
  width: 2.5cm;
  height: 2.5cm;
  object-fit: contain;
  border-radius: 12px;
  flex: 0 0 auto;
  background: transparent;
  box-shadow: none;
}
body.app-body .pc-brand img {
  width: 2.5cm;
  height: 2.5cm;
  object-fit: contain;
  border-radius: 12px;
  flex: 0 0 auto;
}
body.app-body .pc-brand { gap: 12px; }
body.app-body .pc-brand strong { font-size: 17px; }

/* Sur ordinateur, la colonne latérale porte déjà le logo : la barre s'efface */
@media (min-width: 900px) {
  body.app-body .brand-bar { display: none !important; }

  /* Le bandeau d'accueil passe en deux colonnes : le bloc des bulles n'a plus
     que ~280 px. La grille à 3 colonnes héritée de 768 px les écrasait en
     rectangles verticaux. On repasse donc les bulles l'une sous l'autre. */
  body.app-body .hero-art {
    grid-template-columns: 1fr;
    padding: 0 0 8px;
    max-width: none;
    margin: 0;
    gap: 8px;
  }
  body.app-body .hero-art .bubble:nth-child(2),
  body.app-body .hero-art .bubble:nth-child(3) { margin-left: 0; }
  body.app-body .hero-art .bubble { max-width: 100%; }
}