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

   Charger APRÈS cosmelyse.css et boutons.css.

   ─── Stratégie ──────────────────────────────────────────────────────

   La page result réutilise au maximum les composants génériques
   définis dans cosmelyse2.css : .cosm-accordion, .cosm-card, .cosm-pill,
   .cosm-breadcrumb, .cosm-page-header.

   Ce fichier ne contient QUE ce qui est spécifique à result et
   que d'autres pages ne réutiliseraient probablement pas.

   ─── État (4.1) ──────────────────────────────────────────────────────

   Squelette uniquement : breadcrumb, info produit, placeholders
   pour 4.2 (notation) et 4.3 (ingrédients), accordion comparer,
   boutons footer.
*/


/* ============================================
   1. WRAP DE PAGE
   ============================================
   Le wrapper de page utilise désormais le composant générique
   .cosm-page (cf. cosmelyse2.css). Cette page est en .cosm-page--wide
   (1200px) — voir result.php, compare.php, ingredient.php.
*/


/* ============================================
   2. BREADCRUMB
   ============================================
   Le breadcrumb utilise désormais le composant générique
   .cosm-breadcrumb (cf. cosmelyse2.css §13). Il était auparavant
   défini ici sous le nom .bc-pill.
*/


/* ============================================
   3. INFO PRODUIT IDENTIFIÉ
   ============================================
   Bloc affiché juste sous le breadcrumb quand un produit a été
   reconnu à partir de la formule. Sobre, informatif.
*/

.result-product-info {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.result-product-info i {
    margin-right: 0.4rem;
    color: var(--primary-pink);
}

.result-product-info strong {
    color: var(--text-dark);
}

/* Produits jumeaux — formule strictement identique (lot 1).
   Ligne sœur de .result-product-info, resserrée juste dessous
   quand les deux sont présentes (:has(), déjà utilisé ailleurs). */
.result-product-info:has(+ .result-twin-products) {
    margin-bottom: 0.35rem;
}

.result-twin-products {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.result-twin-products i {
    margin-right: 0.4rem;
    color: var(--primary-pink);
}


/* ============================================
   4. TITRE DE PAGE (.ib-page-title)
   ============================================
   Titre de section H2/H3 : utilisé pour "Résultat d'analyse de la
   formule" et pour les sous-sections internes.
*/

.ib-page-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--text-dark);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ib-page-title i {
    color: var(--primary-pink);
}


/* ============================================
   5. ACCORDION "COMPARER UNE AUTRE FORMULE"
   ============================================
   Réutilise .cosm-accordion générique de cosmelyse.css.
   Ici on customise juste les styles internes du body (label,
   textarea, bouton).
*/

.compare-form__label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.compare-form__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c6ef5;
    display: inline-block;
}

.compare-form textarea {
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    resize: none;
    font-family: inherit;
    color: var(--text-dark);
    transition: border-color 0.15s ease;
    margin-bottom: 1rem;
}

.compare-form textarea:focus {
    outline: none;
    border-color: var(--primary-pink);
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.12);
}


/* ============================================
   7. ACTIONS FOOTER (Nouvelle analyse + Partager)
   ============================================
*/

.result-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem 0 2rem;
}


/* ============================================
   8. RESPONSIVE
   ============================================ */

@media (max-width: 720px) {
    .ib-page-title {
        font-size: 1.2rem;
    }

    .result-footer-actions {
        flex-direction: column;
    }

    .result-footer-actions .btn {
        width: 100%;
    }
}


/* ============================================
   9. BLOC NOTATION DE LA FORMULE — 4 SCORE CARDS
   ============================================
   Grille 2×2 desktop, empilée sur mobile. Chaque card a son
   propre gradient sémantique (cosme = info-blue, naturo = vert,
   cosmos = teal, env = bleu profond).
*/

.score-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.score-card {
    border-radius: 8px;
    padding: 0.875rem 1rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

.score-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: #fff;
    text-decoration: none;
}

/* Reflet de gradient à droite — effet "carte premium" */
.score-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
    pointer-events: none;
}

/* Variantes par type de score */
.score-card--cosme  { background: linear-gradient(135deg, var(--info-blue), #3498DB); }
.score-card--naturo { background: linear-gradient(135deg, var(--primary-green), var(--darker-green)); }
.score-card--cosmos { background: linear-gradient(135deg, #1D9E75, #0F6E56); }
.score-card--env    { background: linear-gradient(135deg, #378ADD, #185FA5); }

.score-card__title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.score-card__title i {
    font-size: 0.75rem;
}

.score-card__value {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0.2rem 0;
}

.score-card__value small {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.6;
}

.score-card__label {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.9;
}


/* ============================================
   10. SÉPARATEUR DE SECTION
   ============================================
*/

.score-sep {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 1rem 0;
}


/* ============================================
   11. RADAR + SCORE ROWS
   ============================================
   Layout flex : radar à gauche (carré 360x360), liste de
   sous-scores à droite. Sous mobile, le radar passe au-dessus
   en pleine largeur.
*/

.score-subscores {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.score-radar {
    width: 360px;
    height: 360px;
    flex-shrink: 0;
}

.score-rows {
    flex: 1;
    min-width: 240px;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 60px;
    gap: 0 0.5rem;
    align-items: center;
}

/* "display: contents" : la rangée fait remonter ses cellules dans la
   grille parente (pas de wrapper visuel pour la row entière). */
.score-row {
    display: contents;
}

.score-row__name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.5rem;
}

.score-row__name i {
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Couleurs sémantiques de l'icône par sub-score */
.score-row[data-key="security"]   .score-row__name i { color: var(--primary-green); }
.score-row[data-key="allergens"]  .score-row__name i { color: var(--warn-orange);   }
.score-row[data-key="skin"]       .score-row__name i { color: var(--primary-pink);  }
.score-row[data-key="pregnancy"]  .score-row__name i { color: var(--danger-red);    }
.score-row[data-key="complexity"] .score-row__name i { color: var(--info-blue);     }
.score-row[data-key="naturality"] .score-row__name i { color: var(--primary-green); }

.score-row__bar {
    padding-top: 0.5rem;
}

.score-row__bar-track {
    height: 6px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.score-row__bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #b5d89a, var(--primary-green));
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.score-row__val {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: right;
    color: var(--primary-green);
    padding-top: 0.5rem;
    white-space: nowrap;
}

.score-row__val small {
    font-size: 0.55rem;
    font-weight: 500;
    opacity: 0.5;
}

.score-row__help {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-disabled);
    line-height: 1.3;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.score-row:last-child .score-row__help {
    border-bottom: none;
    padding-bottom: 0;
}


/* ============================================
   12. RESPONSIVE — bloc Notation
   ============================================ */

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

    .score-card__value {
        font-size: 2rem;
    }

    .score-radar {
        width: 100%;
        max-width: 360px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .score-rows {
        width: 100%;
        grid-template-columns: 100px minmax(0, 1fr) 56px;
    }
}

@media (max-width: 460px) {
    .score-card {
        padding: 0.7rem 0.5rem;
    }

    .score-card__title {
        font-size: 0.7rem;
    }

    .score-card__value {
        font-size: 1.7rem;
    }

    .score-card__label {
        font-size: 0.65rem;
    }
}


/* ============================================
   14. CARTOGRAPHIE DES INGRÉDIENTS (pills numérotées)
   ============================================
   Petite grille de pills numérotées en haut du bloc Présentation.
   Chaque pill est cliquable et amène (anchor link) à la card de
   l'ingrédient correspondant.
*/

.formula-map {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
}

.formula-map__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: none;
}

.formula-map__pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    color: #fff;
}

.formula-map__num {
    background: rgba(255, 255, 255, 0.25);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Variantes par safety code */
.formula-map__pill--safe    { background: var(--primary-green); }
.formula-map__pill--watch   { background: var(--warn-orange);   }
.formula-map__pill--avoid   { background: var(--danger-red);    }
.formula-map__pill--unrated { background: var(--text-disabled);                 }


/* ============================================
   15. HEADER DE COLONNES INGRÉDIENTS
   ============================================
   La ligne d'en-têtes (NATURAL / POPULAR / ORIGINE / ALLERG / PEAU / GROSS)
   au-dessus du tableau d'ingrédients. Sur mobile elle disparaît, les
   indicateurs prennent leur label en interne (cf. responsive).
*/

.ingredients-col-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(6, 80px);
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 0.5rem;
}

.ingredients-col-header__label {
    text-align: center;
}

.ingredients-col-header__label:first-child {
    text-align: left;
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  Sections 16-18 et 21-29 → cosmelyse_ingredient_card_base.css         ║
   ║                                                                       ║
   ║  Tout le rendu de la "card ingrédient" (état replié, indicateurs,     ║
   ║  badge minimal, body déplié, onglets CSS, panneaux, transition        ║
   ║  d'enrichissement) a été extrait vers le fichier dédié                ║
   ║  cosmelyse_ingredient_card_base.css. Cela permet de partager ce       ║
   ║  socle entre result.php, compare.php et ingredient.php sans tout      ║
   ║  charger via cosmelyse_result.css.                                    ║
   ║                                                                       ║
   ║  Ne reste ici que ce qui est spécifique à la page result :            ║
   ║  la légende sous le bloc, et le responsive de l'en-tête de colonnes.  ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */


/* ============================================
   19. LÉGENDE EN BAS DU BLOC
   ============================================
   Récap des codes couleurs et symboles utilisés dans les cards.
*/

.ingredient-legend {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.ingredient-legend__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.ingredient-legend__title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.ingredient-legend__entry {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ingredient-legend__entry i {
    font-size: 0.85rem;
}


/* ============================================
   20. RESPONSIVE — Header de colonnes (mobile)
   ============================================
   Mobile : on cache l'en-tête de colonnes ingrédients (les libellés
   d'indicateurs réapparaissent sous chaque indicateur de la card,
   géré côté cosmelyse_ingredient_card_base.css).
*/

@media (max-width: 760px) {
    .ingredients-col-header {
        display: none;
    }
}


/* ============================================
   31. BANDEAU "SCORES PROVISOIRES"
   ============================================
   Affiché tant qu'au moins une fiche est en enrichment_status='minimal'.
   Le markup est dans views/partials/result_provisional_score_banner.php.
   Le compteur (.__count) est mis à jour par cosmelyse-scores-refresh.js
   qui écoute les events émis par cosmelyse-async-cards.js pendant le
   polling.

   Bascule singulier/pluriel : pilotée 100% en CSS via [data-minimal-count].
   Le PHP rend les 2 versions des mots côte-à-côte (data-form="singular"
   et data-form="plural"). Le JS ne fait QUE écrire la valeur numérique
   dans l'attribut, le CSS bascule la visibilité automatiquement.

   Variantes d'état :
   - count=1                   : pluriels masqués
   - count≠1 (0, 2, 3, ...)    : singuliers masqués
   - .is-hiding                : transition de sortie 300ms (opacity + translateY)
                                 posée juste avant le retrait du DOM
*/

.score-provisional-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.95rem;
    margin-bottom: 1rem;
    /* Fond plus opaque pour être bien lisible sur le cream du body
       de la card Notation. Bordure et box-shadow viennent de
       .cosm-card--warn. */
    background: rgba(243, 156, 18, 0.10);
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Spinner — réutilise .cosm-loader-spinner générique. On ajuste juste
   la taille et la couleur pour ce contexte (orange warn cohérent avec
   la pill et la bordure de la card). */
.score-provisional-banner__spinner {
    width: 14px;
    height: 14px;
    color: var(--warn-orange);
    flex-shrink: 0;
}

.score-provisional-banner__body {
    flex: 1;
    min-width: 0;
}

/* Compteur en pill ronde, cohérent visuellement avec la pill bleue
   du bandeau auto-correction (mais en orange ici pour rester dans le
   ton --warn). */
.score-provisional-banner__count {
    font-weight: 700;
    color: var(--warn-orange);
}

.score-provisional-banner__count--pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--warn-orange);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* Bascule singulier ↔ pluriel — pilotée par data-minimal-count
   sur le conteneur. Le JS modifie cet attribut, le CSS bascule. */
.score-provisional-banner[data-minimal-count="1"]    [data-form="plural"]   { display: none; }
.score-provisional-banner:not([data-minimal-count="1"]) [data-form="singular"] { display: none; }

/* Sortie animée — la classe .is-hiding est posée par scores-refresh.js
   ~300ms avant le retrait DOM, pour éviter le flash sec. */
.score-provisional-banner.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}


/* ============================================
   32. BANDEAUX D'INFO RESULT.PHP
   ============================================
   Deux bandeaux qui apparaissent en haut de result.php selon le contexte :

     - .autocorr-banner  (cosm-card --info, bleu)
       Récap des auto-corrections IA appliquées au pipeline.
       Affiché quand SuggestionService a corrigé des typos en silence.
       Salve UI — Refondu en <details> repliable. Le <summary> = head
       cliquable avec compteur + libellé. Le détail apparaît au clic.

     - .warn-banner  (cosm-card --warn, orange)
       Avertissement quand des ingrédients tapés n'ont pas pu être
       identifiés du tout et ont été retirés de l'analyse. Reste en
       layout horizontal (icône + texte + CTA), toujours visible.

   Les 2 ne partagent plus de règles communes depuis la refonte du
   .autocorr-banner en collapsible (le head a son propre layout, le
   body apparaît seulement à l'ouverture).
*/


/* ────────────────────────────────────────────────────────────────────
   .autocorr-banner — corrections IA (bleu/info, repliable)
   ──────────────────────────────────────────────────────────────────── */

/* Le banner est un <details>. On annule le padding par défaut de
   .cosm-card car le head et le body ont leurs propres paddings. */
.autocorr-banner {
    padding: 0;
}

/* ─── Head (= <summary>) : zone cliquable toujours visible ─────── */

.autocorr-banner__head {
    /* Reset des marqueurs natifs des navigateurs (chevron / triangle) */
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: linear-gradient(135deg, rgba(93, 173, 226, 0.08), rgba(93, 173, 226, 0.03));
    border-radius: 12px; /* arrondi du head quand le banner est fermé */
    transition: background 0.15s ease;
}
.autocorr-banner__head::-webkit-details-marker { display: none; } /* Safari */
.autocorr-banner__head::marker { content: ''; }                   /* standard */

.autocorr-banner__head:hover {
    background: linear-gradient(135deg, rgba(93, 173, 226, 0.12), rgba(93, 173, 226, 0.05));
}

/* Quand le banner est ouvert, le head garde uniquement les coins du
   haut arrondis (le body prendra le relais en bas). */
details[open] .autocorr-banner__head {
    border-radius: 12px 12px 0 0;
}

.autocorr-banner__icon {
    color: var(--info-blue);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.autocorr-banner__lead {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.96rem;
    line-height: 1.4;
    color: var(--text-dark);
}

/* Pastille bleue ronde avec le compteur — repère visuel saillant */
.autocorr-banner__count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--info-blue);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Chevron qui pivote à l'ouverture */
.autocorr-banner__chevron {
    color: var(--info-blue);
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
details[open] .autocorr-banner__chevron {
    transform: rotate(180deg);
}

/* ─── Body : caché par défaut, déplié au clic ──────────────────── */

.autocorr-banner__body {
    padding: 0.6rem 1.1rem 1rem;
    border-top: 1px solid rgba(93, 173, 226, 0.18);
}

.autocorr-banner__list {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.autocorr-banner__item {
    padding: 0.55rem 0.8rem;
    background: rgba(93, 173, 226, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--info-blue);
}

/* Ligne principale : ancien → nouveau (+ INCI + tag éventuel) */
.autocorr-banner__transition {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    line-height: 1.4;
}

/* Pill grise barrée pour ce que l'utilisateur avait tapé (le mauvais) */
.autocorr-banner__old {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88rem;
    text-decoration: line-through;
    text-decoration-color: rgba(231, 76, 60, 0.5);
    text-decoration-thickness: 1.5px;
}

.autocorr-banner__arrow {
    color: var(--info-blue);
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Le nouveau = correction acceptée → ton vert (action positive) */
.autocorr-banner__new {
    color: var(--darker-green);
    font-weight: 700;
    font-size: 0.98rem;
}

.autocorr-banner__inci {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* Tag "ajouté à la base" pour les nouveaux ingrédients créés */
.autocorr-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    background: rgba(143, 181, 105, 0.15);
    color: var(--darker-green);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.autocorr-banner__tag i {
    font-size: 0.85rem;
}

/* Rationale (explication courte de la correction) — petit + italique */
.autocorr-banner__rationale {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-soft);
    font-style: italic;
    line-height: 1.45;
    padding-left: 0.2rem;
}

.autocorr-banner__cta {
    margin: 0.85rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    font-size: 0.82rem;
    color: var(--text-soft);
    line-height: 1.5;
}


/* ────────────────────────────────────────────────────────────────────
   .warn-banner — unresolved (orange/warn, layout horizontal)
   ──────────────────────────────────────────────────────────────────── */

.warn-banner, .reg-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.warn-banner__icon, .reg-banner__icon {
    flex-shrink: 0;
    font-size: 1.6rem;
    line-height: 1;
    margin-top: 0.1rem;
    color: var(--warn-orange);
}

.warn-banner__body, .reg-banner__body {
    flex: 1;
    min-width: 0;
}

.warn-banner__lead, .reg-banner__lead {
    margin: 0 0 0.6rem 0;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.warn-banner__cta, .reg-banner__cta {
    margin: 0.8rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.warn-banner__list, .reg-banner__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.warn-banner__item, .reg-banner__item {
    /* item = juste un wrapper du <code>, pas de style propre */
}

/* Pill orange clair pour chaque ingrédient non identifié */
.warn-banner__raw {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    background: rgba(243, 156, 18, 0.12);
    color: #a06912;
    border-radius: 100px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

/* Bouton d'action vers confirmer.php — aligné à droite en desktop,
   passe en pleine largeur en mobile via le wrap du flex parent. */
.warn-banner__action {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}


/* Liste de noms d'ingrédients : une ligne par nom (la warn-banner, elle,
   affiche ses pills en ligne — d'où l'override de flex-direction). */
.reg-banner__list {
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.3rem;
}
 
.reg-banner__item {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark);
}
 
.reg-banner__item::before {
    content: "•";
    margin-right: 0.45rem;
    color: currentColor;
    opacity: 0.55;
}
 
/* Espacement entre le paragraphe SIN et le groupe CMR qui le précède. */
.reg-banner__lead--spaced {
    margin-top: 1rem;
}

/* ────────────────────────────────────────────────────────────────────
   Responsive — bandeaux empilés en mobile
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .autocorr-banner__head {
        padding: 0.7rem 0.9rem;
        gap: 0.6rem;
    }

    .autocorr-banner__icon,
    .warn-banner__icon {
        font-size: 1.4rem;
    }

    .autocorr-banner__count-pill {
        width: 22px;
        height: 22px;
        font-size: 0.78rem;
    }

    .autocorr-banner__body {
        padding: 0.5rem 0.9rem 0.9rem;
    }

    .warn-banner {
        gap: 0.7rem;
    }

    /* Le bouton du warn-banner passe en pleine largeur sous le contenu */
    .warn-banner__action {
        width: 100%;
        text-align: center;
    }

    /* La transition ancien → nouveau peut wrapper plus serré */
    .autocorr-banner__transition {
        gap: 0.35rem;
    }
}