/* ============================================================
   STORYBUL — Styles pages App (generate, account, characters)
   ============================================================ */

:root {
  --green:    #059669;
  --green-dk: #047857;
  --pink:     #F48F82;
  --bg:       #f0fdf4;
  --white:    #ffffff;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-900: #1a1a2e;
  --radius:   16px;
  --shadow:   0 4px 24px rgba(0,0,0,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.app-page {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--gray-900);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header : voir style.css (.site-header, .nav-logo, .app-nav) ── */
.btn-menu-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
}
.btn-menu-mobile span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-600);
  border-radius: 1px;
}

/* ── Quota bar ──────────────────────────────────────────── */
.quota-bar {
  height: 4px;
  background: var(--gray-200);
  position: relative;
  overflow: hidden;
}
.quota-fill {
  height: 100%;
  width: 0;
  background: var(--green);
  transition: width .4s ease;
}
.quota-text {
  position: absolute;
  right: 1rem;
  top: 6px;
  font-size: .75rem;
  color: var(--gray-400);
  font-weight: 600;
}

/* ── Main layout ────────────────────────────────────────── */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Form section ───────────────────────────────────────── */
.generate-form-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.step-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gray-900);
}

.form-block {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow);
}

.block-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: .75rem;
}
.label-hint {
  font-size: .75rem;
  font-weight: 400;
  color: var(--gray-400);
}
.badge-premium {
  font-size: .7rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  padding: .2rem .5rem;
  border-radius: 20px;
  letter-spacing: .3px;
}

.app-input {
  width: 100%;
  padding: .7rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  color: var(--gray-900);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.app-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(5,150,105,.1);
}

/* Name chips */
.name-input-row { display:flex; gap:8px; align-items:center; margin-top:10px; }
.name-input-row input { flex:1; padding:10px 16px; border-radius:50px; border:2px solid #E8E0D8; font-size:.85rem; font-family:'Nunito',sans-serif; font-weight:600; outline:none; transition:border-color .2s; }
.name-input-row input:focus { border-color:#FF6B4A; }
.name-input-row input::placeholder { color:#ccc; }
.btn-add-name { width:42px; height:42px; border-radius:50%; border:none; background:#FF6B4A; color:#fff; font-size:1.4rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(255,107,74,.3); transition:all .15s; flex-shrink:0; line-height:1; }
.btn-add-name:hover { transform:scale(1.1); }
.btn-add-name:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.name-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.625rem; }
.name-chip { display:inline-flex; align-items:center; gap:.35rem; background:#E0F7FA; color:#00838F; border-radius:999px; padding:.3rem .75rem; font-size:.875rem; font-weight:700; animation:popIn .2s ease; }
@keyframes popIn { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }
.chip-remove { cursor:pointer; font-size:.9rem; opacity:.6; line-height:1; transition:opacity .15s; }
.chip-remove:hover { opacity:1; color:#e11d48; }
/* Enfants vs adultes */
#char-children-section { margin-top:.75rem; }
.char-children-card { background:#F0FDF4; border:1.5px solid #BBF7D0; border-radius:14px; padding:.75rem; display:flex; flex-direction:column; gap:.45rem; }
.char-children-title { font-size:.88rem; font-weight:700; color:#166534; margin:0; }
.char-children-subtitle { font-size:.78rem; color:#15803d; margin:0; }
.char-children-note { font-size:.75rem; color:#166534; font-style:italic; margin:0; line-height:1.45; opacity:.8; }

/* Fratrie */
#char-siblings-section { margin-top:.75rem; }
.char-siblings-card { background:#FFF8F0; border:1.5px solid #FDDCB5; border-radius:14px; padding:.75rem; display:flex; flex-direction:column; gap:.45rem; }
.char-siblings-title { font-size:.88rem; font-weight:700; color:#c2660a; margin:0; }
.char-siblings-subtitle { font-size:.78rem; color:#b07820; margin:0; }
.char-siblings-note { font-size:.75rem; color:#a0680a; font-style:italic; margin:0; line-height:1.45; }

/* Traits de caractère par personnage */
#character-traits-section { display:flex; flex-direction:column; gap:1rem; margin-top:.75rem; }
.char-traits-row { display:flex; flex-direction:column; gap:.45rem; background:#faf9f7; border:1.5px solid #EDE8E1; border-radius:14px; padding:.75rem; }
.char-traits-label { font-size:.82rem; font-weight:700; color:#555; }
.char-traits-hint { font-weight:400; color:#aaa; }
/* Âge par personnage */
.char-age-wrap { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.char-age-label { font-size:.78rem; font-weight:700; color:#888; white-space:nowrap; }
.char-age-group { display:flex; flex-wrap:wrap; gap:.3rem; }
.char-age-btn { padding:.2rem .55rem; border-radius:999px; border:1.5px solid #E8E0D8; background:#fff; font-family:'Nunito',sans-serif; font-size:.78rem; font-weight:700; color:#666; cursor:pointer; transition:all .15s; }
.char-age-btn:hover { border-color:#FF6B4A; color:#FF6B4A; }
.char-age-btn.active { background:#FF6B4A; border-color:#FF6B4A; color:#fff; }

.trait-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.trait-chip { display:inline-flex; align-items:center; gap:.3rem; background:#E8F5E9; color:#2E7D32; border-radius:999px; padding:.25rem .7rem; font-size:.8rem; font-weight:700; animation:popIn .2s ease; }
.trait-remove { cursor:pointer; font-size:.8rem; opacity:.6; transition:opacity .15s; }
.trait-remove:hover { opacity:1; color:#e11d48; }
/* Type & Genre pills */
.char-type-wrap { display:flex; flex-direction:column; gap:.3rem; }
.char-genre-wrap { display:flex; flex-direction:column; gap:.3rem; }
.char-pill-group { display:flex; flex-wrap:wrap; gap:.4rem; }
.char-pill-btn { padding:.3rem .85rem; border-radius:999px; border:2px dashed #C8BFB5; background:#fafafa; font-family:'Nunito',sans-serif; font-size:.82rem; font-weight:700; color:#aaa; cursor:pointer; transition:all .15s; }
.char-pill-btn:hover { border-color:#FF6B4A; color:#FF6B4A; border-style:solid; background:#fff; }
.char-pill-btn.active { background:#FF6B4A; border-color:#FF6B4A; border-style:solid; color:#fff; }
.char-global-note { font-size:.75rem; color:#aaa; font-style:italic; margin:.25rem 0 0; line-height:1.4; }
.char-library-note { font-size:.8rem; color:#6b7280; margin:.25rem 0 .75rem; line-height:1.5; }

/* Bouton fiche complète (dans chaque bloc personnage) */
.char-fiche-btn {
  font-size:.72rem; font-weight:800; color:#FF6B4A; background:none;
  border:1.5px solid #FF6B4A; border-radius:999px; padding:.18rem .65rem;
  cursor:pointer; font-family:'Nunito',sans-serif; transition:all .15s;
  white-space:nowrap; flex-shrink:0;
}
.char-fiche-btn:hover { background:#FF6B4A; color:#fff; }

/* ── Overlay fiche personnage ──────────────────────────────── */
/* ═══════════════════════════════════════════════
   FICHE PERSONNAGE — overlay redesign
   ═══════════════════════════════════════════════ */
.char-detail-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.52); backdrop-filter: blur(6px);
}
.char-detail-overlay.hidden { display: none; }

.char-detail-panel {
  /* top+bottom anchors → hauteur implicite = viewport - 80px, sans calc(100%) */
  position: fixed;
  top: 60px;
  bottom: 20px;
  left: .5rem; right: .5rem;
  width: auto; max-width: 680px;
  margin: 0 auto;
  background: #fff;
  overflow: clip; /* clip = border-radius OK, mais ne bloque pas le scroll enfant */
  border-radius: 20px;
  border: 1.5px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  animation: fadeInPanel .25s ease;
  box-shadow: 0 -8px 40px rgba(0,0,0,.28);
  z-index: 601;
}
@media (min-width: 640px) {
  .char-detail-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto; right: auto;
    width: 680px; max-width: calc(100% - 2rem);
    /* height fixe pour que flex:1 fonctionne sur le scroll container */
    height: min(92vh, 700px);
    border-radius: 24px; border: none;
    animation: slideUpPanel .3s cubic-bezier(.22,.9,.36,1);
  }
}

/* Descriptions côte à côte — empilées sur mobile */
.char-detail-descs-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: .65rem;
}
@media (max-width: 639px) {
  .char-detail-descs-row {
    grid-template-columns: 1fr;
  }
}

/* ── Header ── */
.char-detail-header {
  background: linear-gradient(135deg,#fff3ee 0%,#fff 60%);
  border-bottom: 1px solid #f2e8e0;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; gap: .6rem;
  flex-shrink: 0; /* reste en haut du flex, sans position:sticky qui casse sur mobile */
  border-radius: 20px 20px 0 0;
  z-index: 2;
}
@media (min-width: 640px) { .char-detail-header { border-radius: 24px 24px 0 0; } }

.char-detail-avatar-mini {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg,#FF6B4A 0%,#f59e0b 100%);
  overflow: hidden;
}
.char-detail-avatar-mini img { width:100%; height:100%; object-fit:cover; }

.char-detail-supertitle {
  font-size:.6rem; font-weight:800; color:#FF6B4A;
  letter-spacing:.06em; display:block; margin-bottom:.08rem;
}
.char-detail-name { margin:0; font-size:1.05rem; font-weight:900; color:#111; }
.char-detail-close-btn {
  width:30px; height:30px; background:#f0ebe4; border:none; border-radius:50%;
  font-size:.85rem; cursor:pointer; color:#888; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:all .15s; margin-left:auto;
}
.char-detail-close-btn:hover { background:#e0d8d0; color:#333; }

/* ── Scroll container : body + footer défilent ensemble ── */
.char-detail-scroll {
  flex: 1;
  height: 0;              /* force le shrink : sans ça flex:1 n'a rien contre quoi grandir */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Body ── */
.char-detail-body {
  padding: .7rem .9rem; display: flex; flex-direction: column; gap: .65rem;
  flex: 1;
}

/* ── Photo card ── */
.char-detail-photo-card {
  background: linear-gradient(135deg,#f9f4ff 0%,#f0f4ff 100%);
  border: 1.5px solid #e8e0f0; border-radius: 16px;
  padding: .75rem; display: flex; flex-direction: column; gap: .55rem;
}
/* Ligne horizontale : thumb | right */
.char-detail-photo-row {
  display: flex; gap: .75rem; align-items: center;
}
.char-detail-photo-right {
  display: flex; flex-direction: column; gap: .45rem; flex: 1; min-width: 0;
}
.char-detail-photo-explain {
  font-size:.72rem; font-weight:600; color:#6d28d9; margin:0; line-height:1.45;
}
.char-detail-photo-thumb {
  width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0;
  border: 2px dashed #c4b5d8;
  background: linear-gradient(135deg, #f5f0ff 0%, #ede9fe 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .3rem; cursor: pointer;
  overflow: hidden; transition: all .2s;
}
.char-detail-photo-thumb:hover {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  transform: scale(1.04);
}
.char-detail-photo-thumb img { width:100%; height:100%; object-fit:cover; }
.char-detail-photo-hint {
  font-size:.57rem; font-weight:800; color:#9d71c5; text-transform:uppercase;
  letter-spacing:.07em; line-height:1;
}
.char-detail-photo-btns {
  display: flex; gap: .4rem;
}
.char-detail-photo-btn {
  flex: 1; padding: .38rem .4rem; border: 1.5px solid #ddd5ee; border-radius: 9px;
  background: #fff; font-family:'Nunito',sans-serif; font-size:.75rem; font-weight:700;
  color:#7c3aed; cursor:pointer; transition:all .15s; text-align:center;
}
.char-detail-photo-btn:hover { border-color:#7c3aed; background:#f5f0ff; }

/* ── Generate IA button ── */
.char-detail-generate-btn {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  width:100%; padding:.48rem 1rem;
  background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);
  color:#fff; border:none; border-radius:11px;
  font-family:'Nunito',sans-serif; font-size:.8rem; font-weight:800;
  cursor:pointer; transition:opacity .15s;
  box-shadow: 0 3px 12px rgba(124,58,237,.3);
}
.char-detail-generate-btn:disabled {
  background: rgba(0,0,0,.07); color:#bbb; cursor:not-allowed; box-shadow:none;
}
.char-detail-generate-btn:not(:disabled):hover { opacity:.88; }
.char-detail-generate-hint {
  font-size:.68rem; color:#b0a0c0; font-style:italic; margin:0; text-align:center;
}

/* ── Description fields ── */
.char-detail-field {
  display: flex; flex-direction: column; gap: .28rem;
}
.char-detail-field-label {
  font-size:.75rem; font-weight:800; color:#444; margin:0;
  display:flex; align-items:center; gap:.3rem;
}
.char-detail-textarea {
  width:100%; box-sizing:border-box;
  padding:.5rem .75rem; border:1.5px solid #ece5db; border-radius:11px;
  font-family:'Nunito',sans-serif; font-size:.84rem; font-weight:600;
  color:#333; resize:none; outline:none; transition:border-color .15s;
  line-height:1.6; background:#fdfaf7; overflow:hidden;
}
.char-detail-textarea--auto { min-height: 60px; }
.char-detail-textarea:focus { border-color:#FF6B4A; background:#fff; }
.char-detail-textarea::placeholder { color:#ccc; }

/* ── Traits éditables ── */
.char-detail-traits-chips {
  display: flex; flex-wrap: wrap; gap: .35rem; min-height: 0;
}
.char-detail-trait-chip {
  display:inline-flex; align-items:center; gap:.3rem;
  background: #fff3ee; border: 1.5px solid #ffd0b8; border-radius: 20px;
  padding: .22rem .55rem; font-size: .73rem; font-weight: 700; color: #c05020;
  font-family: 'Nunito', sans-serif;
}
.char-detail-trait-remove {
  background: none; border: none; cursor: pointer; color: #e07050;
  font-size: .7rem; padding: 0; line-height: 1; font-family: inherit;
}
.char-detail-trait-remove:hover { color: #c03010; }

.char-detail-trait-input-row {
  display: flex; gap: .4rem; align-items: center;
}
.char-detail-trait-input {
  flex: 1; padding: .42rem .7rem; border: 1.5px solid #e8e0d8; border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 600;
  color: #333; outline: none; transition: border-color .15s; background: #fdfaf7;
}
.char-detail-trait-input:focus { border-color: #FF6B4A; background: #fff; }
.char-detail-trait-input::placeholder { color: #ccc; }
.char-detail-trait-add-btn {
  width: 32px; height: 32px; border-radius: 9px; border: none;
  background: #FF6B4A; color: #fff; font-size: 1.1rem; font-weight: 900;
  font-family: 'Nunito', sans-serif; cursor: pointer; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.char-detail-trait-add-btn:disabled { background: #e8e0d8; color: #bbb; cursor: not-allowed; }
.char-detail-trait-add-btn:not(:disabled):hover { opacity: .85; }

/* Âge lecture seule */
.char-detail-tag--age {
  display:inline-flex; align-items:center;
  background: #fff3e0; border: 1.5px solid #f5a623; border-radius: 20px;
  padding: .22rem .6rem; font-size: .72rem; font-weight: 700; color: #b56a00;
  font-family: 'Nunito', sans-serif;
}

/* ── Footer ── */
.char-detail-footer {
  padding:1rem .9rem .9rem; border-top:2px solid #f0e8e0;
  background:#fff;
}
.char-detail-save-btn {
  width:100%; padding:.75rem 1.5rem; margin-bottom:.75rem;
  background:linear-gradient(135deg,var(--green) 0%,#0d9488 100%);
  color:#fff; border:none; border-radius:13px;
  font-family:'Nunito',sans-serif; font-size:1rem; font-weight:800;
  cursor:pointer; box-shadow:0 4px 18px rgba(5,150,105,.32);
  transition:opacity .15s;
}
.char-detail-save-btn:hover { opacity:.9; }

/* ── Teaser partage (toujours visible) ── */
.char-detail-share-teaser {
  margin-top: .5rem;
  display: flex; gap: .65rem; align-items: flex-start;
  background: #f5f0ff; border: 1.5px solid #ddd6fe; border-radius: 14px;
  padding: .7rem .8rem;
}
.char-detail-share-teaser-icon {
  font-size: 1.2rem; line-height: 1; margin-top: .1rem; flex-shrink: 0;
}
.char-detail-share-teaser-title {
  margin: 0 0 .15rem; font-size: .8rem; font-weight: 800; color: #5b21b6;
}
.char-detail-share-teaser-desc {
  margin: 0 0 .45rem; font-size: .72rem; font-weight: 600; color: #7c3aed;
  line-height: 1.45; opacity: .85;
}
.char-detail-share-btn {
  padding: .35rem .75rem; border: 1.5px solid #7c3aed; border-radius: 9px;
  background: #7c3aed; color: #fff;
  font-family: 'Nunito', sans-serif; font-size: .76rem; font-weight: 800;
  cursor: pointer; transition: opacity .15s;
}
.char-detail-share-btn:hover { opacity: .85; }

/* ── Panel URL généré ── */
.char-detail-share-panel {
  margin-top: .45rem; padding: .6rem .8rem;
  background: #ede9fe; border: 1.5px solid #c4b5d8; border-radius: 12px;
}
.char-detail-share-url-row {
  display: flex; gap: .4rem; align-items: center;
}
.char-detail-share-url-input {
  flex: 1; padding: .42rem .65rem; border: 1.5px solid #c4b5d8; border-radius: 9px;
  font-family: 'Nunito', sans-serif; font-size: .71rem; font-weight: 600; color: #4c1d95;
  background: #fff; outline: none; min-width: 0; cursor: text;
}
.char-detail-share-copy-btn {
  flex-shrink: 0; padding: .42rem .85rem; border: none; border-radius: 9px;
  background: #7c3aed; color: #fff;
  font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 800;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.char-detail-share-copy-btn:hover { opacity: .88; }

/* Lecture seule */
.char-detail-readonly-badge {
  background: #f0f4ff; border: 1.5px solid #c7d2fe; border-radius: 10px;
  padding: .45rem .75rem; font-size: .76rem; font-weight: 700; color: #4f46e5;
  text-align: center; margin-bottom: .2rem;
}

/* Age selector */
.age-selector {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.age-btn {
  padding: .4rem .875rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
  font-family: 'Nunito', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s;
}
.age-btn:hover  { border-color: var(--green); color: var(--green); }
.age-btn.active { border-color: var(--green); background: #d1fae5; color: var(--green); }

/* Theme tags */
.theme-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .625rem;
}
.theme-tag {
  padding: .35rem .75rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  background: var(--gray-50);
  font-family: 'Nunito', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s;
}
.theme-tag:hover  { border-color: var(--green); background: #d1fae5; color: var(--green); }
.theme-tag.active { border-color: var(--green); background: #d1fae5; color: var(--green); }

/* Mode selector */
.mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.mode-btn {
  padding: .45rem .875rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: var(--gray-50);
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s;
}
.mode-btn:hover  { border-color: var(--green); color: var(--green); }
.mode-btn.active { border-color: var(--green); background: #d1fae5; color: var(--green); }

/* Durée de l'histoire */
.duration-selector {
  display: flex;
  gap: .5rem;
}
.duration-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .6rem .5rem;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: all .15s;
}
.duration-btn:hover { border-color: var(--green); background: #f0fdf4; }
.duration-btn.active { border-color: var(--green); background: #d1fae5; }
.duration-icon { display: none; }
.duration-label { font-size: .88rem; font-weight: 800; color: var(--gray-700); }
.duration-time { font-size: .75rem; font-weight: 600; color: var(--gray-400); }
.duration-btn.active .duration-label { color: #059669; }
.duration-btn.active .duration-time  { color: #059669; opacity: .8; }

/* Characters picker */
.char-add-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1.5px dashed var(--gray-200);
  border-radius: 10px;
  background: none;
  font-family: 'Nunito', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  color: var(--gray-400);
  cursor: pointer;
  transition: all .15s;
  width: 100%;
}
.char-add-btn:hover { border-color: var(--green); color: var(--green); }

.selected-chars {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}
.char-chip {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .35rem .75rem;
  background: #d1fae5;
  border: 1.5px solid #6ee7b7;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--green);
}
.char-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--green);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

/* Bouton générer */
.btn-generate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, var(--green) 0%, #10b981 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(5,150,105,.3);
}
.btn-generate:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(5,150,105,.4);
}
.btn-generate:active { transform: scale(.98); }
.btn-generate:disabled { background: var(--gray-200); color: var(--gray-400); box-shadow: none; cursor: not-allowed; }
.btn-generate-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Quota atteint */
.quota-reached {
  background: #fef3c7;
  border: 1.5px solid #fbbf24;
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.quota-reached-title { font-size: 1rem; font-weight: 900; color: #92400e; }
.quota-reached-text  { font-size: .875rem; color: #78350f; }
.btn-text {
  background: none; border: none; font-family: 'Nunito', sans-serif;
  font-size: .875rem; color: var(--gray-400); cursor: pointer; text-decoration: underline;
}

/* ── Story result section ───────────────────────────────── */
/* ── Story overlay ──────────────────────────────────────── */
.story-result-section {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px 40px;
  overflow-y: auto;
  backdrop-filter: blur(3px);
  animation: fadeInOverlay .25s ease;
}
.story-result-section.hidden { display: none; }
@keyframes fadeInOverlay { from{opacity:0} to{opacity:1} }

.story-result-inner {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 2rem;
  width: 100%;
  max-width: 700px;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  animation: slideUpPanel .3s ease;
}
/* mobile : sans transform (position:fixed + translateY = bug Android) */
@keyframes fadeInPanel  { from{opacity:0} to{opacity:1} }
/* desktop : le translate(-50%,-50%) de centrage DOIT être inclus dans les keyframes
   sinon l'animation écrase le transform CSS et le panel part du coin bas-droit */
@keyframes slideUpPanel {
  from { transform: translate(-50%, calc(-50% + 20px)); opacity: 0; }
  to   { transform: translate(-50%, -50%);              opacity: 1; }
}

.story-result-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  z-index: 1;
}
.story-result-close:hover { background: #fee2e2; color: #e11d48; }

/* État vide */
.story-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  color: var(--gray-400);
}
.story-empty-icon { font-size: 3rem; }
.story-empty-text { font-size: 1rem; font-weight: 700; }
.story-empty-hint { font-size: .85rem; }

/* Loading */
.story-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.story-loading-dots {
  display: flex;
  gap: .5rem;
}
.story-loading-dots span {
  width: 10px;
  height: 10px;
  background: var(--green);
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}
.story-loading-dots span:nth-child(2) { animation-delay: .2s; }
.story-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
  40%            { transform: scale(1);   opacity: 1; }
}
.story-loading-text { font-size: .9rem; color: var(--gray-400); font-weight: 600; }

/* Erreur */
.story-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
}
.story-error-icon  { font-size: 2.5rem; }
.story-error-title { font-size: 1rem; font-weight: 900; color: var(--gray-900); }
.story-error-text  { font-size: .875rem; color: var(--gray-600); }

/* Contenu histoire */
.story-content { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }

.story-ttl-banner {
  display: flex;
  align-items: center;
  gap: .625rem;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  padding: .625rem 1rem;
  font-size: .85rem;
  color: #78350f;
  font-weight: 600;
}
.btn-send-email {
  margin-left: auto;
  background: #fff;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  padding: .3rem .75rem;
  font-family: 'Nunito', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: #92400e;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.btn-send-email:hover { background: #fffbeb; }
.btn-send-email.sent  { background: #d1fae5; border-color: #6ee7b7; color: var(--green); }

.story-text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--gray-900);
  white-space: pre-wrap;
}

.story-actions {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.btn-action {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .55rem 1rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Nunito', sans-serif;
  font-size: .875rem;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s;
}
.btn-action:hover { border-color: var(--gray-400); color: var(--gray-900); }
.btn-action-primary {
  border-color: var(--green);
  color: var(--green);
}
.btn-action-primary:hover {
  background: #d1fae5;
}

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 1rem;
}
.modal {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.modal-header h3 { font-size: 1.1rem; font-weight: 900; }
.modal-close {
  background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--gray-400); padding: .25rem;
}
.modal-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--gray-200); }
.modal-loading { text-align: center; color: var(--gray-400); padding: 2rem; }

.char-list-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s;
}
.char-list-item:hover { background: var(--gray-50); }
.char-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d1fae5, #6ee7b7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--green);
  flex-shrink: 0;
}
.char-name   { font-weight: 700; font-size: .95rem; }
.char-traits { font-size: .8rem; color: var(--gray-400); }

/* ── Maintenance overlay ────────────────────────────────── */
.maintenance-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.97);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.maintenance-content {
  text-align: center;
  max-width: 380px;
  padding: 2rem;
}
.maintenance-emoji { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.maintenance-content h2 { font-size: 1.75rem; font-weight: 900; margin-bottom: .5rem; }
.maintenance-content p  { font-size: .95rem; color: var(--gray-600); line-height: 1.6; }
.maintenance-return { margin-top: .5rem; font-weight: 600; }

/* ── Toast ──────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.toast {
  background: var(--gray-900);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}
.toast.success { background: var(--green); }
.toast.error   { background: #ef4444; }
@keyframes toastIn  { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes toastOut { from { opacity:1 } to { opacity:0 } }

/* ── Boutons génériques ─────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-primary:hover { background: var(--green-dk); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  background: var(--gray-100);
  color: var(--gray-900);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  width: 100%;
  justify-content: center;
}
.btn-secondary:hover { background: var(--gray-200); }

/* ── Paywall preview ────────────────────────────────────── */
.story-preview-wrapper {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* Hauteur limitée pour l'aperçu (avant paywall) */
.story-preview-wrapper.story-preview-active {
  max-height: 260px;
}

/* Dégradé qui masque la fin du texte aperçu */
.story-preview-wrapper.story-preview-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  pointer-events: none;
}

/* Carte paywall positionnée juste après le dégradé */
.story-paywall {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  box-shadow: 0 8px 32px rgba(5,150,105,.12);
}

.story-paywall-emoji { font-size: 2.25rem; }
.story-paywall-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--gray-900);
}
.story-paywall-text {
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.story-paywall-actions {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-top: .25rem;
}
.btn-paywall-signup {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.25rem;
  background: linear-gradient(135deg, var(--green) 0%, #10b981 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 12px rgba(5,150,105,.3);
}
.btn-paywall-signup:hover { opacity: .9; transform: translateY(-1px); }
.btn-paywall-login {
  flex: 1;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.25rem;
  background: var(--white);
  color: var(--gray-900);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn-paywall-login:hover { background: var(--gray-50); border-color: var(--gray-400); }

/* ── Footer : voir style.css (footer.site-footer) ── */

/* ── Quick-gen popup ────────────────────────────────────── */
.quickgen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  padding: 1rem;
}
.quickgen-modal {
  background: var(--white);
  border-radius: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  animation: qgModalIn .3s ease;
}
@keyframes qgModalIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.quickgen-header {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  padding: .55rem 1.25rem .4rem;
  text-align: center;
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
}
.quickgen-header-emoji { font-size: 1.25rem; display: block; flex-shrink: 0; }
.quickgen-header h2    { font-size: .98rem; font-weight: 900; color: var(--gray-900); }
.quickgen-header p     { display: none; }

.quickgen-body { padding: .6rem 1.25rem .5rem; display: flex; flex-direction: column; gap: .5rem; }

.quickgen-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: .2rem;
}
.quickgen-children { display: flex; flex-direction: column; gap: .5rem; }
.quickgen-child-row { display: flex; gap: .5rem; align-items: center; }
.quickgen-input {
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .875rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gray-900);
  background: var(--white);
  outline: none;
  transition: border-color .15s;
}
.quickgen-input:focus { border-color: var(--green); }
.quickgen-btn-remove {
  background: none; border: none; color: var(--gray-400); font-size: .95rem;
  cursor: pointer; padding: .35rem; border-radius: 6px; line-height: 1; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.quickgen-btn-remove:hover { color: #ef4444; background: #fee2e2; }
.quickgen-btn-add-child {
  background: none;
  border: 1.5px dashed var(--gray-200);
  border-radius: 10px;
  padding: .5rem .875rem;
  font-family: 'Nunito', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: border-color .15s, color .15s;
  width: 100%;
  justify-content: center;
}
.quickgen-btn-add-child:hover { border-color: var(--green); color: var(--green); }

.quickgen-age-row {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: .2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}
.quickgen-age-row::-webkit-scrollbar { display: none; }
.quickgen-age-btn {
  padding: .35rem .55rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  font-family: 'Nunito', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.quickgen-age-btn:hover  { border-color: var(--green); color: var(--green); }
.quickgen-age-btn.active { border-color: var(--green); background: #d1fae5; color: var(--green); }

.quickgen-theme-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.quickgen-theme-tag {
  padding: .5rem .3rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.quickgen-theme-tag .tag-emoji { font-size: 1.35rem; line-height: 1; }

/* Couleurs individuelles par data-key — 8 couleurs toutes distinctes */
.quickgen-theme-tag[data-key="surprise"]    { background: #fff7ed; color: #ea580c; border-color: #fed7aa; } /* 🟠 Orange */
.quickgen-theme-tag[data-key="aventure"]    { background: #ecfeff; color: #0e7490; border-color: #67e8f9; } /* 🩵 Teal */
.quickgen-theme-tag[data-key="super-heros"] { background: #fff1f2; color: #dc2626; border-color: #fca5a5; } /* ❤️ Rouge */
.quickgen-theme-tag[data-key="pirates"]     { background: #fefce8; color: #ca8a04; border-color: #fde047; } /* 🟡 Jaune */
.quickgen-theme-tag[data-key="moyen-age"]   { background: #f7f3ef; color: #78350f; border-color: #c4a06a; } /* 🟫 Brun */
.quickgen-theme-tag[data-key="dinosaures"]  { background: #f0fdf4; color: #15803d; border-color: #86efac; } /* 🟢 Vert */
.quickgen-theme-tag[data-key="espace"]      { background: #eff6ff; color: #1e40af; border-color: #60a5fa; } /* 🔵 Bleu */
.quickgen-theme-tag[data-key="nuit"]        { background: #faf5ff; color: #7c3aed; border-color: #c084fc; } /* 🟣 Violet */

/* Hover & active */
.quickgen-theme-tag:hover  { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.quickgen-theme-tag.active { border-color: currentColor; box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }

.quickgen-lang-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.quickgen-lang-btn {
  padding: .45rem .875rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Nunito', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s;
}
.quickgen-lang-btn:hover  { border-color: var(--green); color: var(--green); }
.quickgen-lang-btn.active { border-color: var(--green); background: #d1fae5; color: var(--green); }

.quickgen-extra {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding-top: .75rem;
  border-top: 1px solid var(--gray-200);
}

.quickgen-footer { padding: 0 1.25rem .75rem; display: flex; flex-direction: column; gap: .35rem; }
.quickgen-btn-generate {
  width: 100%;
  padding: .6rem 1.5rem;
  background: linear-gradient(135deg, var(--green) 0%, #0d9488 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: opacity .15s;
  box-shadow: 0 6px 18px rgba(5,150,105,.35);
}
.quickgen-btn-generate:hover { opacity: .9; }
.quickgen-btn-advanced {
  background: none; border: none;
  font-family: 'Nunito', sans-serif;
  font-size: .85rem; font-weight: 700;
  color: var(--gray-400); cursor: pointer;
  text-align: center; padding: .25rem;
  transition: color .15s;
}
.quickgen-btn-advanced:hover { color: var(--gray-600); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-main {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1.25rem;
  }
  /* Header mobile : logo en haut, nav en dessous */
  header.site-header {
    flex-wrap: wrap;
    height: auto !important;
    padding: 6px 16px 0 !important;
    gap: 0;
  }
  header.site-header .nav-logo {
    flex: 1;
    padding: 4px 0;
  }
  header.site-header #nav-account {
    padding: .4rem .6rem;
    font-size: .8rem;
    align-self: center;
  }
  header.site-header .app-nav {
    display: none !important;
  }
  header.site-header .nav-link {
    font-size: .78rem;
    padding: .35rem .6rem;
  }
  .btn-menu-mobile { display: none; }
  .story-result-inner { padding: 1.25rem; margin-top: 0; }
  .story-result-section { padding: 10px 8px 30px; align-items: flex-start; }
  .quickgen-modal { border-radius: 20px; }
  .app-footer { justify-content: center; text-align: center; }
}