/* Générateur d'idées — styles scopés .ideagen-*. Réutilise .btn/.btn-primary. */
.ideagen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) {
  .ideagen-grid { grid-template-columns: 1fr; }
  /* Sur mobile : options + résultat d'abord, sélection des genres en dernier. */
  .ideagen-col:first-child { order: 2; }
}

.ideagen-col { min-width: 0; }
.ideagen-panel {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 6px 20px -14px rgba(60,40,30,.4);
}
.ideagen-panel h2 { font-size: 1rem; margin: .2rem 0 .6rem; }
.ideagen-panel-head { display: flex; align-items: center; gap: .6rem; }
.ideagen-panel-head h2 { margin: 0; flex: 0 0 auto; }
.ideagen-count { font-size: .85rem; opacity: .6; }
.ideagen-reset { margin-left: auto; background: none; border: 0; color: var(--mauve-600); cursor: pointer; font: inherit; font-size: .85rem; }

.ideagen-search {
  width: 100%; box-sizing: border-box; margin: .7rem 0; padding: .55rem .8rem;
  border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff;
}
.ideagen-search:focus { outline: none; border-color: var(--mauve-600); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }

.ideagen-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.ideagen-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem;
  background: rgba(var(--brand-rgb), .1); color: var(--mauve-700); border-radius: 999px; font-size: .82rem;
}
.ideagen-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }

.ideagen-tree, .ideagen-results {
  max-height: 460px; overflow-y: auto; overscroll-behavior: contain;
  /* Barre de défilement aux teintes de la page (Firefox). */
  /* Gris-taupe clair et neutre : moins beige que --beige-400, sans être foncé. */
  scrollbar-width: thin; scrollbar-color: #c6beb1 transparent;
}
/* Barre de défilement aux teintes de la page (Chrome/Safari). */
.ideagen-tree::-webkit-scrollbar, .ideagen-results::-webkit-scrollbar { width: 12px; }
.ideagen-tree::-webkit-scrollbar-track, .ideagen-results::-webkit-scrollbar-track { background: transparent; }
.ideagen-tree::-webkit-scrollbar-thumb, .ideagen-results::-webkit-scrollbar-thumb {
  background: #c6beb1; border-radius: 999px; border: 2px solid var(--surface);
}
.ideagen-tree::-webkit-scrollbar-thumb:hover, .ideagen-results::-webkit-scrollbar-thumb:hover { background: #b3ab9d; }
.ideagen-cat { border-top: 1px solid rgba(60,40,30,.08); }
.ideagen-main-btn, .ideagen-sub-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left; padding: .5rem .2rem; color: inherit;
}
.ideagen-main-btn { font-weight: 600; }
.ideagen-sub { padding-left: .7rem; }
.ideagen-sub-btn { font-size: .92rem; opacity: .85; }

.ideagen-item {
  display: flex; gap: .55rem; align-items: flex-start; padding: .4rem .3rem; border-radius: 8px; cursor: pointer;
}
.ideagen-item:hover { background: rgba(var(--brand-rgb), .06); }
.ideagen-item.is-on { background: rgba(var(--brand-rgb), .1); }
.ideagen-check {
  flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid rgba(60,40,30,.3); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; margin-top: .1rem;
  background: #fff;
}
.ideagen-item.is-on .ideagen-check { background: var(--mauve-600); border-color: var(--mauve-600); }
.ideagen-item-body { display: flex; flex-direction: column; min-width: 0; }
.ideagen-item-name { font-weight: 600; font-size: .92rem; }
.ideagen-item-desc { font-size: .8rem; opacity: .7; }
.ideagen-item-cat { font-size: .72rem; opacity: .5; margin-top: .1rem; }
.ideagen-empty { opacity: .6; padding: .5rem; }

.ideagen-opts { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.ideagen-opt {
  padding: .4rem .7rem; border: 1px solid rgba(60,40,30,.2); border-radius: 999px; cursor: pointer; font-size: .85rem; user-select: none;
}
.ideagen-opt.is-on { background: var(--mauve-600); border-color: var(--mauve-600); color: #fff; }
.ideagen-num { display: block; font-size: .85rem; margin-bottom: .9rem; }
.ideagen-num input { width: 4rem; margin-left: .4rem; padding: .3rem .4rem; border: 1px solid rgba(60,40,30,.2); border-radius: 6px; }

.ideagen-generate { width: 100%; }

.ideagen-result-head { display: flex; align-items: center; justify-content: space-between; }
.ideagen-copy { background: none; border: 1px solid rgba(60,40,30,.2); border-radius: 8px; padding: .25rem .6rem; cursor: pointer; font: inherit; font-size: .8rem; }
.ideagen-idea-title { font-size: 1.25rem; margin: .6rem 0 .5rem; }
.ideagen-idea-body p { margin: 0 0 .6rem; line-height: 1.55; }
.ideagen-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.ideagen-actions .btn { flex: 1 1 auto; }

.ideagen-toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.ideagen-toast {
  background: #2b2320; color: #fff; padding: .6rem 1rem; border-radius: 10px; font-size: .9rem;
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.ideagen-toast.show { opacity: 1; transform: none; }
.ideagen-toast.is-error { background: #a12a2a; }

.ideagen-merci {
  background: linear-gradient(180deg,#eafaef,#dff5e6); border: 1px solid #9bd8ad;
  color: #1c5a33; padding: .9rem 1.1rem; border-radius: 12px; margin-bottom: 1.2rem; font-weight: 500;
}

/* Popups (partage + offre « Développer ce concept »). */
.ideagen-modal { position: fixed; inset: 0; background: rgba(20,15,25,.6); display: flex; align-items: center; justify-content: center; padding: 1.2rem; z-index: 9998; }
.ideagen-modal-card { position: relative; background: #fff; border-radius: 16px; padding: 1.4rem 1.5rem 1.6rem; max-width: 520px; width: 100%; max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px -20px rgba(20,15,25,.5); }
.ideagen-modal-card h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.ideagen-modal-x { position: absolute; top: .5rem; right: .7rem; background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: #8a7f95; }
.ideagen-modal-x:hover { color: var(--mauve-600); }
.ideagen-share-img { position: relative; background: #f6f1e7; border-radius: 12px; overflow: hidden; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.ideagen-share-img img { display: block; width: 100%; height: auto; }
.ideagen-share-load { position: absolute; color: #8a7f95; font-size: 1.6rem; }
.ideagen-modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.ideagen-modal-actions .btn { flex: 1 1 auto; text-align: center; }

/* Présentation de l'offre avant le paiement — même langage que les cartes
   générées : papier crème, double filet mauve, serif et ornement ex-libris. */
.ideagen-modal-card--offer {
  max-width: 460px; text-align: center;
  background: var(--paper, #fdfbf5);
  border: 1.5px solid var(--mauve-600);
  box-shadow: 0 0 0 1px var(--mauve-600) inset, 0 24px 60px -20px rgba(20,15,25,.5);
  padding: 1.9rem 1.8rem 1.5rem;
}
/* Le second filet, à l'intérieur : c'est lui qui fait l'ex-libris. */
.ideagen-modal-card--offer::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid var(--mauve-300); border-radius: 10px;
}
/* Séparateur ex-libris : le filet + fleuron du site (.ornRule), mais posé sur
   le papier de la carte — d'où le fond redéfini, sinon le fleuron s'affiche sur
   une pastille beige qui jure. */
.ideagen-offer-orn { position: relative; height: 1px; margin: 1.15rem 0; background: linear-gradient(90deg, transparent, var(--border, #ddcfb6), transparent); }
.ideagen-offer-orn::after {
  content: "❦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--paper, #fdfbf5); padding: 0 12px; line-height: 1;
  font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; color: var(--mauve-300);
}
.ideagen-offer-kicker {
  margin: 0 0 .35rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mauve-600);
}
.ideagen-modal-card--offer h3 { font-family: var(--font-display, Georgia, serif); font-size: 1.6rem; margin: 0 0 .5rem; }
.ideagen-offer-idea { margin: 0 0 1rem; font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: 1.05rem; color: var(--mauve-700); }
.ideagen-offer-lead { margin: 0 0 1.1rem; color: var(--ink-700, #423a4a); }

/* Liste à puces losange, alignée à gauche dans une carte centrée. */
.ideagen-offer-list { margin: 0 0 1.2rem; padding: 0; list-style: none; display: inline-block; text-align: left; }
.ideagen-offer-list li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; color: var(--ink-700, #423a4a); }
.ideagen-offer-list li::before {
  content: "◆"; position: absolute; left: 0; top: .05em;
  font-size: .7em; color: var(--mauve-400);
}

.ideagen-offer-price {
  display: flex; flex-direction: column; gap: .15rem; align-items: center;
  padding: .8rem 1rem; margin-bottom: 1.1rem;
  background: var(--beige-100, #f6f1e7); border-radius: 12px;
}
.ideagen-offer-amount { font-family: var(--font-display, Georgia, serif); font-size: 2.1rem; line-height: 1; color: var(--ink-900, #241d2b); }
.ideagen-offer-note { font-size: .82rem; color: var(--ink-500, #6b6275); }
.ideagen-offer-secure { margin: .7rem 0 0; font-size: .78rem; color: var(--ink-500, #6b6275); }
.ideagen-offer-cancel {
  margin-top: .9rem; background: none; border: 0; cursor: pointer;
  font-size: .85rem; color: var(--ink-500, #6b6275); text-decoration: underline;
  text-underline-offset: 3px;
}
.ideagen-offer-cancel:hover { color: var(--mauve-600); }

/* Placeholder de chargement (avant que le catalogue soit prêt). */
.ideagen-boot { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 5rem 0; }
.ideagen-boot span { width: 10px; height: 10px; border-radius: 50%; background: var(--mauve-300); animation: ideagenBoot 1s infinite ease-in-out; }
.ideagen-boot span:nth-child(2) { animation-delay: .15s; }
.ideagen-boot span:nth-child(3) { animation-delay: .3s; }
@keyframes ideagenBoot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }