/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  cosmelyse_synthesis.css — composant .cosm-synthesis (A.2 + F.2 + S.3)║
   ╚═══════════════════════════════════════════════════════════════════════╝

   Card de synthèse IA d'une formule.

   Salve F.2 — Le wrapper et le bandeau d'en-tête sont portés par les
   composants génériques .cosm-card et .cosm-card__header--pink
   (cf. cosmelyse2.css). Ce fichier conserve uniquement les styles
   internes (états loading/ready, mise en forme des paragraphes, bouton
   régénérer).

   Salve S.3 — La synthèse peut désormais vivre DANS un onglet
   (result.php → _synthesis_tabs.php). Dans ce cas elle est rendue en
   mode « bare » : <div class="cosm-synthesis cosm-synthesis--bare"> sans
   section ni header (fournis par le shell). Voir bloc dédié en bas.

   Markup standalone (compare.php) :
       <section class="cosm-card cosm-synthesis" data-syn-state="...">
           <header class="cosm-card__header cosm-card__header--pink">…</header>
           <div class="cosm-synthesis__loading|__body">…</div>
           <footer class="cosm-synthesis__footer">…</footer>
       </section>

   Aucune couleur hardcodée — les variables :root viennent de cosmelyse2.css.
   ============================================ */

.cosm-synthesis[data-syn-busy="1"] {
    opacity: 0.7;
}

/* ─── États loading & enrichment_pending ───────────────────────────── */

.cosm-synthesis__loading {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 130px;
}

.cosm-synthesis__loading-text {
    margin: 0;
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.75;
    text-align: center;
}

/* ─── État ready : corps de la synthèse ─────────────────────────────── */

.cosm-synthesis__body {
    padding: 1.5rem;
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.cosm-synthesis__body p {
    margin: 0 0 0.85rem 0;
}

.cosm-synthesis__body p:last-child {
    margin-bottom: 0;
}

.cosm-synthesis__body strong {
    font-weight: 600;
    color: var(--dark-pink);
}

.cosm-synthesis__body em {
    font-style: italic;
    color: var(--darker-green);
    font-weight: 500;
}

/* ─── Footer avec bouton régénérer ──────────────────────────────────── */

.cosm-synthesis__footer {
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cosm-synthesis__btn-regen {
    color: var(--text-dark);
    opacity: 0.55;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.cosm-synthesis__btn-regen:hover,
.cosm-synthesis__btn-regen:focus {
    opacity: 1;
    color: var(--dark-pink);
    text-decoration: none;
}

.cosm-synthesis__btn-regen i {
    font-size: 0.9rem;
}

.cosm-synthesis__btn-regen--busy i {
    animation: cosm-synthesis-spin 0.8s linear infinite;
}

@keyframes cosm-synthesis-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* ─── Mode « bare » : corps de synthèse dans un onglet (S.3) ──────────
   Le wrapper carte + header + padding latéral est porté par
   _synthesis_tabs.php (.cosm-card__body fournit 1.5rem). On annule donc
   le padding propre du corps pour éviter le double espacement ; le gap
   au-dessus vient de la marge de .rp-tabs__nav, le gap dessous de
   .cosm-card__body. Spécificité (0,2,0) → l'emporte sur les règles
   génériques même dans les media-queries mobiles, pas de duplication. */

.cosm-synthesis--bare .cosm-synthesis__body {
    padding: 0;
}

.cosm-synthesis--bare .cosm-synthesis__loading {
    padding: 1rem 0;
}

.cosm-synthesis--bare .cosm-synthesis__footer {
    padding: 0.85rem 0 0 0;
}

/* ─── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
    .cosm-synthesis__body    { padding: 1.1rem; font-size: 0.97rem; }
    .cosm-synthesis__loading { padding: 1.5rem 1.1rem; min-height: 110px; }
    .cosm-synthesis__footer  { padding: 0.4rem 1.1rem 0.85rem 1.1rem; }
}