/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  product_guess/cosmelyse_product_guess.css                            ║
   ║  Styles spécifiques de la card de reconnaissance produit (3eC C2)     ║
   ╚═══════════════════════════════════════════════════════════════════════╝

   ─── Règle DRY ─────────────────────────────────────────────────────────

   Ce fichier ne contient QUE les styles spécifiques à la card. Tous les
   composants génériques sont réutilisés depuis cosmelyse.css :

     - .cosm-card                 → conteneur (appliqué dans result.php)
     - .ib-page-title             → titre h3 de la card
     - .cosm-loader-spinner       → spinner de chargement
     - .cosm-badge cosm-badge--*  → badges de statut
     - .btn .btn-primary etc.     → boutons (Bootstrap)
     - .text-muted, .small        → utilitaires Bootstrap
     - bi bi-*                    → icônes Bootstrap

   Variables CSS du thème (depuis cosmelyse.css) :
     --primary-green, --darker-green, --primary-pink, --soft-pink,
     --text-dark, --cream, --info-blue, --warn-orange

   ─── Architecture des classes ──────────────────────────────────────────

   .product-guess              → root de la card (à l'intérieur de .cosm-card)
   .product-guess__loading     → état initial avec spinner
   .product-guess__body        → layout image + info (états prompt/community/admin)
   .product-guess__image       → conteneur image produit (ratio fixe)
   .product-guess__info        → bloc info textuelle à droite
   .product-guess__brand       → marque (texte mis en avant)
   .product-guess__name        → nom du produit
   .product-guess__category    → catégorie en mode pill
   .product-guess__question    → "Cette formule correspond-elle à :"
   .product-guess__actions     → barre de boutons en bas
   .product-guess__empty       → état no_match / unavailable
   .product-guess__hint-form   → formulaire de hint marque

   ─── Transition de remplacement ───────────────────────────────────────

   Q4 cadrage : on évite wow.js. Transition simple opacity 200ms quand
   on swap le HTML interne. Cf. JS qui pose une classe is-swapping
   pendant le fetch.

   ──────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════
   ROOT
   ═══════════════════════════════════════════════════════════════════════ */

.product-guess {
    /* Transition fluide pour l'opacité lors du re-render */
    transition: opacity 200ms ease-in-out;
}

.product-guess.is-swapping {
    opacity: 0.4;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   ÉTAT : LOADING
   ═══════════════════════════════════════════════════════════════════════ */

.product-guess__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 1.5em 1em;
    text-align: center;
}

.product-guess__loading-text {
    margin: 0;
    color: var(--text-dark);
    font-style: italic;
    opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════════════════
   ÉTATS : PROMPT / COMMUNITY / ADMIN — layout image + info
   ═══════════════════════════════════════════════════════════════════════ */

.product-guess__body {
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    align-items: flex-start;
    padding: 0.5em 0;
    flex-wrap: wrap;       /* responsive : passage en colonne sur mobile */
}

.product-guess__image {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.product-guess__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-guess__info {
    flex: 1 1 auto;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.product-guess__question {
    font-size: 0.95em;
    color: var(--text-dark);
    opacity: 0.7;
    margin-bottom: 0.2em;
}

.product-guess__brand {
    font-weight: 600;
    font-size: 1.15em;
    color: var(--text-dark);
    line-height: 1.2;
}

.product-guess__name {
    font-size: 1em;
    color: var(--text-dark);
    line-height: 1.3;
}

.product-guess__category {
    font-size: 0.85em;
    color: var(--text-dark);
    opacity: 0.65;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* Variantes par état (background subtil pour distinguer) */
.product-guess__body--community {
    /* aucune différence pour l'instant — on s'appuie sur le badge */
}

.product-guess__body--admin {
    /* idem */
}


/* ═══════════════════════════════════════════════════════════════════════
   BARRE DE BOUTONS
   ═══════════════════════════════════════════════════════════════════════ */

.product-guess__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.product-guess__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* Variante "discrète" pour les états community/admin (juste un lien) */
.product-guess__actions--subtle {
    border-top: none;
    padding-top: 0.4em;
    margin-top: 0.6em;
}

.product-guess__actions--subtle .btn-link {
    text-decoration: none;
    opacity: 0.65;
}

.product-guess__actions--subtle .btn-link:hover {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   ÉTATS : NO_MATCH / UNAVAILABLE
   ═══════════════════════════════════════════════════════════════════════ */

.product-guess__empty {
    text-align: center;
    padding: 1.5em 1em;
}

.product-guess__empty-icon {
    font-size: 2.5em;
    color: var(--text-dark);
    opacity: 0.3;
    margin-bottom: 0.5em;
}

.product-guess__empty--muted .product-guess__empty-icon {
    opacity: 0.2;
}

.product-guess__empty-text {
    margin: 0 0 0.4em 0;
    color: var(--text-dark);
    font-size: 1em;
}

.product-guess__empty-hint {
    margin: 0 0 1em 0;
    color: var(--text-dark);
    opacity: 0.6;
    font-size: 0.9em;
}


/* ═══════════════════════════════════════════════════════════════════════
   FORMULAIRE DE HINT (sous <details>)
   ═══════════════════════════════════════════════════════════════════════ */

/* details/summary : pattern natif HTML, pas de JS pour le toggle */
.product-guess__hint-details {
    margin-top: 1em;
    display: inline-block;
}

/* Cosmétique du <summary> : on cache la flèche par défaut, on garde
   le bouton qu'il contient. */
.product-guess__hint-details > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
}

.product-guess__hint-details > summary::-webkit-details-marker {
    display: none;
}

.product-guess__hint-details[open] > summary {
    margin-bottom: 1em;
}

.product-guess__hint-form {
    text-align: left;
    max-width: 480px;
    margin: 0 auto;
    padding: 1em;
    background: var(--cream);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.product-guess__hint-form p {
    margin-bottom: 0.6em;
}

.product-guess__hint-input-row {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.product-guess__hint-input {
    flex: 1 1 200px;
    min-width: 0;        /* permet au flex shrink de marcher */
}

.product-guess__btn-hint-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — adaptation mobile
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 540px) {
    .product-guess__body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .product-guess__info {
        text-align: center;
        align-items: center;
    }

    .product-guess__actions {
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   COMPARE — layout 2 colonnes côte à côte (salve E)
   Permet d'afficher 2 cards product_guess simultanément sur compare.php
   (une par formule). Wrapper flex responsive : 2 cellules égales en
   desktop, empilées en mobile.
   ═══════════════════════════════════════════════════════════════════════ */

.product-guess-compare-row {
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    flex-wrap: wrap;          /* responsive : empilage en mobile */
    align-items: stretch;     /* hauteurs égales */
}

.product-guess-compare-cell {
    flex: 1 1 320px;          /* pousse vers 50/50, mini 320px */
    min-width: 0;             /* permet le shrink dans le flex */
    display: flex;
    flex-direction: column;
}

/* Tag identifiant la formule (A ou B) au-dessus de chaque card.
   Cohérent avec les pastilles utilisées ailleurs sur compare.php
   (couleurs A=primary-pink, B=info-blue). */
.product-guess-compare-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 0.8em;
    align-self: flex-start;
}

.product-guess-compare-tag--a {
    background: rgba(255, 107, 157, 0.12);   /* var(--primary-pink) à 12% */
    color: var(--dark-pink);
}

.product-guess-compare-tag--b {
    background: rgba(93, 173, 226, 0.12);    /* var(--info-blue) à 12% */
    color: #1c5980;
}

/* Sur mobile, on force l'empilement même si les cells sont assez petites
   pour entrer côte à côte. Cohérent avec _compare_summary et autres
   sections de compare.php. */
@media (max-width: 720px) {
    .product-guess-compare-row {
        flex-direction: column;
    }
    .product-guess-compare-cell {
        flex: 1 1 auto;
    }
}