/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  Cosmélyse V2 — cosmelyse_ingredient.css                              ║
   ║  Stylise la page ingredient.php                                       ║
   ╚═══════════════════════════════════════════════════════════════════════╝

   Charger APRÈS cosmelyse.css ET cosmelyse_result.css (la page réutilise
   la card .ingredient-card existante, on ajoute juste les variantes
   pleine page + les blocs stats / associations).

   Sections :
     1. Card forcée dépliée (chevron masqué)
     2. Bandeau header stats (formules · consultations · vues/jour)
     3. Grille 4 stats détaillées
     4. Ingrédients associés (mini-cards cliquables)
     5. Responsive
*/


/* ============================================
   1. CARD DÉPLIÉE EN MODE FICHE PLEINE PAGE
   ============================================
   Sur ingredient.php, la card est forcée dépliée (attribut HTML5 `open`
   posé par le partial via $forceOpen). On masque le chevron pour signaler
   visuellement que la card n'est pas repliable, et on désactive le cursor
   pointer sur le summary pour éviter de suggérer une interaction.
*/

/* Sous-titre FR sous le nom INCI dans le h1 de la fiche.
   Affiché en plus petit, couleur secondaire, sur sa propre ligne pour
   bien séparer "AQUA" (gradient rose) de "Eau" (gris doux). */
.ingredient-page__title-fr {
    display: block;
    font-size: 0.5em;       /* ~50% de la taille du h1 */
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 0.2em;
    letter-spacing: 0.01em;
    /* Ne pas hériter du gradient-text du span parent */
    background: none;
    -webkit-text-fill-color: initial;
}

.ingredient-card--forced-open > summary {
    cursor: default;
    /* Désactive l'animation du chevron qui n'a plus de sens */
    list-style: none;
}

.ingredient-card--forced-open > summary::-webkit-details-marker {
    display: none;
}

.ingredient-card--forced-open > summary::marker {
    display: none;
}
/* Pas de hint d'ouverture sur la fiche pleine page — la card n'est
   pas repliable, donc le chevron n'a pas de sens. */
.ingredient-card--forced-open .ingredient-card__expand-hint {
    display: none;
}
/* Le wrap de la card sur ingredient.php : on retire le padding cosm-card
   par défaut pour que la card occupe l'intégralité du container */
.ingredient-page__card-wrap {
    padding: 0;
    overflow: hidden;
}


/* ============================================
   2. BANDEAU HEADER STATS
   ============================================
   Trois infos chiffrées séparées par un point médian : nb de formules,
   consultations cumulées, vues/jour. Toutes réelles sauf vues/jour
   (estimation provisoire, marquée d'un i info).
*/

.ingredient-stats__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #fff5f9 0%, #fef9f3 100%);
    border: 1px solid rgba(255, 107, 157, 0.18);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.ingredient-stats__banner-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.ingredient-stats__banner-item i {
    color: var(--primary-pink);
    font-size: 1rem;
    line-height: 1;
    align-self: center;
}

.ingredient-stats__banner-item strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--text-dark);
}

.ingredient-stats__banner-item span {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.ingredient-stats__banner-sep {
    color: #ccc;
    font-size: 1.5rem;
    line-height: 1;
}


/* ============================================
   3. GRILLE 4 STATS DÉTAILLÉES
   ============================================ */

.ingredient-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.ingredient-stats__tile {
    background: var(--bg-soft);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 1rem 0.75rem;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ingredient-stats__tile:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 107, 157, 0.18);
}

.ingredient-stats__tile-icon {
    display: block;
    font-size: 1.3rem;
    color: var(--primary-pink);
    margin-bottom: 0.4rem;
}

.ingredient-stats__tile-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 0.15rem;
}

/* Variante "small" pour le tile date (texte plus long, pas un nombre brut) */
.ingredient-stats__tile-num--small {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

.ingredient-stats__tile-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.4;
}

/* ── Lot D·3 — sous-texte de tuile (« ≈ 1 sur N », pos. moyenne) ── */
.ingredient-stats__tile-sub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.85;
    font-weight: 400;
}

/* ── Lot D·3 — jauge de profondeur INCI (tuile position) ──────────
   Track = fond dégradé rose→gris (rappel « plus dosé → moins »),
   curseur positionné en % (0 = tête de liste). */
.ingredient-stats__gauge {
    position: relative;
    height: 8px;
    margin: 0.9rem 0.25rem 0.3rem;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(255, 107, 157, 0.55), rgba(0, 0, 0, 0.08));
}

.ingredient-stats__gauge-cursor {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dark-pink);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
}

.ingredient-stats__gauge-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin: 0 0.1rem 0.4rem;
}

/* ── Lot D·3 — répartition par type de produit ──────────────────── */
.ingredient-stats__types {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.85rem;
    color: #555;
    line-height: 1.7;
}

.ingredient-stats__types i {
    color: var(--dark-pink);
    margin-right: 0.3rem;
}

.ingredient-stats__types-lead {
    font-weight: 600;
    margin-right: 0.25rem;
}

.ingredient-stats__types-pct {
    color: var(--text-muted);
    font-size: 0.78rem;
}


/* ============================================
   4. INGRÉDIENTS ASSOCIÉS
   ============================================
   Mini-cards cliquables : nom, barre de progression pleine largeur,
   puis méta "N formules · X%" sous la barre.
*/

.ingredient-assoc__lead {
    color: #555;
    font-size: 0.92rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.ingredient-assoc__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.ingredient-assoc__card {
    display: block;
    background: var(--bg-soft);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ingredient-assoc__card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 107, 157, 0.25);
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.ingredient-assoc__name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* Tronque proprement les noms longs sans casser la layout */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ingredient-assoc__bar-track {
    height: 5px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    overflow: hidden;
}

.ingredient-assoc__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-pink), var(--dark-pink));
    border-radius: 100px;
    transition: width 0.5s ease-out;
}

/* Méta sous la barre : compte de formules à gauche, pourcentage à droite. */
.ingredient-assoc__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.ingredient-assoc__count {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ingredient-assoc__pct {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--dark-pink);
    font-variant-numeric: tabular-nums;
}


/* ============================================
   4 bis. SECTION « SOUVENT PRÉSENT DANS »
   ============================================
   Réutilise la grille .catalogue-grid et la carte .catalogue-card de
   cosmelyse_catalogue.css (chargé via $extraCss sur ingredient.php).
   On ne stylise ici que le lead, le bloc "voir toutes" et le lien
   désactivé — rien qui dupliquerait la carte catalogue.
*/

.ingredient-formulas__lead {
    color: #555;
    font-size: 0.92rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Pied de section : lien "voir toutes" + note de comptage. */
.ingredient-formulas__more {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Lien « Voir tous les produits » — câblé au lot B vers l'onglet
   produits filtré « contient cet ingrédient ». */
.ingredient-formulas__all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
    background: rgba(255, 107, 157, 0.1);
    color: var(--dark-pink);
}

.ingredient-formulas__all:hover {
    background: rgba(255, 107, 157, 0.18);
    transform: translateY(-1px);
}

.ingredient-formulas__more-note {
    font-size: 0.8rem;
    color: var(--text-muted);
}


/* ============================================
   5. RESPONSIVE
   ============================================ */

@media (max-width: 760px) {
    .ingredient-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ingredient-stats__banner {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ingredient-stats__banner-sep {
        display: none;
    }
}

@media (max-width: 460px) {
    .ingredient-assoc__grid {
        grid-template-columns: 1fr;
    }

    .ingredient-stats__tile-num {
        font-size: 1.3rem;
    }

    .ingredient-stats__tile-num--small {
        font-size: 0.82rem;
    }
}


/* ============================================
   N. BANDEAU "SCORE PROVISOIRE" (ingredient.php)
   ============================================
   Variante du bandeau de result.php / compare.php, simplifiée pour
   ingredient.php :
     - Pas de polling (pas de draft_token sur ingredient.php)
     - Bouton "Vérifier maintenant" qui reload nativement la page
       (zéro JS — c'est un simple <a href> vers l'URL canonique)
   Markup dans views/partials/ingredient_provisional_score_banner.php.
*/

.ingredient-provisional-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.2rem;
    color: var(--text-dark);
    flex-wrap: wrap;
}

.ingredient-provisional-banner__icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--warn-orange);
    /* Animation lente — cohérente visuellement avec le bandeau de
       result.php / compare.php pour suggérer l'attente */
    animation: cosmHourglassFlip 2.4s ease-in-out infinite;
}

.ingredient-provisional-banner__body {
    flex: 1;
    min-width: 200px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.ingredient-provisional-banner__action {
    flex-shrink: 0;
    white-space: nowrap;
}

/* L'animation cosmHourglassFlip est déjà définie dans cosmelyse_result.css.
   Si ingredient.php ne charge plus result.css un jour, dupliquer la
   keyframe ici. */