/* === bnbflyer === */
:root {
  --red: #FF5A5F;
  --teal: #00A699;
  --dark: #222222;
  --light: #F7F7F7;
  --gold: #FFB400;
}
body { font-family: 'Inter', sans-serif; background: #F8F9FA; }

/* ── Navbar ── */
.navbar { border-bottom: 1px solid #eee; }
.brand-belo { width: 26px; height: 32px; }
.brand-name { font-size: 1.1rem; font-weight: 700; color: var(--red); letter-spacing: -0.3px; }
.badge-version { font-size: 10px; background: #f0f0f0; color: #666; padding: 2px 7px; border-radius: 20px; }

/* ── Hero ── */
.hero { background: var(--red); color: white; }
.hero-title { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.5px; }
.hero-sub { font-size: 1.05rem; opacity: .85; }
.stat-pill { background: rgba(255,255,255,.15); border-radius: 30px; padding: 6px 16px; font-size: .82rem; display: inline-block; }

/* ── Template cards ── */
.tpl-card { border: 1.5px solid #E8E8E8; border-radius: 14px; background: white;
  transition: transform .15s, box-shadow .15s; cursor: pointer; overflow: hidden; }
.tpl-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.tpl-card.coming-soon { opacity: .6; cursor: default; }
.tpl-card.coming-soon:hover { transform: none; box-shadow: none; }
.tpl-icon-wrap { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 1.6rem; }
.tpl-badge { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.tpl-badge.popular { background: #FFF0F0; color: var(--red); }
.tpl-badge.soon { background: #F0F0F0; color: #888; }
.tpl-badge.new { background: #EFF6FF; color: #1D4ED8; }

/* ── Editor ── */
.editor-topbar { background: white; border-bottom: 1px solid #eee; position: sticky; top: 57px; z-index: 100; }
.field-label { font-size: .8rem; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .4px; }
.field-input { font-size: .9rem; border: 1.5px solid #E0E0E0; border-radius: 8px; }
.field-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,90,95,.1); }
.field-hidden .field-input { opacity: .5; background: #F7F7F7; }
.field-hidden .field-label { color: #aaa; }
.preview-wrapper { background: #EBEBEB; border-radius: 12px; overflow: auto; padding: 24px; min-height: 680px; }
.preview-scaler { transform-origin: top left; transition: transform .1s; }
.ai-btn { background: linear-gradient(135deg, #7C3AED, #4F46E5); color: white; border: none; }
.ai-btn:hover { background: linear-gradient(135deg, #6D28D9, #4338CA); color: white; }
.ai-btn:disabled { opacity: .6; cursor: wait; }
.spell-btn { background: white; border: 1.5px solid #E0E0E0; color: #555; }
.spell-btn:hover { border-color: #00A699; color: #00A699; background: #F0FAF9; }
.spell-btn:disabled { opacity: .6; cursor: wait; }
.spell-error { border-color: #EF4444 !important; background: #FFF5F5 !important; }
.spell-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
.spell-badge { position: absolute; top: -8px; right: -8px; font-size: 10px; min-width: 18px;
  height: 18px; display: flex; align-items: center; justify-content: center;
  background: #EF4444; color: white; border-radius: 10px; font-weight: 700; pointer-events: none; }

/* ── Flyer base (used in preview & print) ── */
/* Format A4 réel à 96dpi (210 × 297 mm ≈ 794 × 1123 px) — flex column pour que le
   pied de page reste plaqué en bas de la feuille au lieu de laisser un grand vide. */
.flyer-root { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: white; width: 794px; min-height: 1123px; box-shadow: 0 4px 30px rgba(0,0,0,.15);
  display: flex; flex-direction: column; }

/* ── Auth pages (login/register) & modals ── */
.auth-card { border: none; border-radius: 18px; }
.auth-header-bar { background: var(--red); padding: 28px; border-radius: 18px 18px 0 0; color: white; }
.form-control-lg { border-radius: 10px; border: 1.5px solid #E0E0E0; font-size: .95rem; }
.form-control-lg:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,90,95,.1); }
.btn-register-main { background: var(--red); color: white; border: none; border-radius: 10px;
  font-weight: 600; font-size: 1rem; padding: 13px; }
.btn-register-main:hover { background: #e54e53; color: white; }

/* Honeypot anti-bot : hors écran plutôt que display:none (moins facilement détecté par les bots) */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ── Admin ── */
.email-row { font-size: .82rem; padding: 6px 10px; border-bottom: 1px solid #f0f0f0; }

/* ── Bandeau "connexion requise" (éditeur) ── */
@keyframes blink-warn { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.blink-warn { animation: blink-warn 1s ease-in-out infinite; }

/* ── Print ── */
@page { size: A4; margin: 0; }
@media print {
  /* #print-root est imbriqué dans <main> (wrapper du footer collant) : on ne peut plus le
     cibler avec "body > *:not(...)". On masque tout via visibility (qui n'empêche pas un
     descendant de se rendre à nouveau visible, contrairement à display:none sur un ancêtre),
     puis on sort #print-root du flux pour qu'il occupe seul la page imprimée. */
  body * { visibility: hidden !important; }
  #print-root, #print-root * { visibility: visible !important; }
  #print-root {
    display: block !important;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
  }
  .flyer-root { box-shadow: none; }
  /* Force l'impression des couleurs de fond (désactivées par défaut par les navigateurs). */
  .flyer-root, .flyer-root * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}