/*
 * SCENTREE DESIGN SYSTEM
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * Ce fichier contient TOUS les tokens et composants partagés entre les pages
 * publiques et le back-office. Il est chargé sur TOUTES les pages du projet.
 *
 * Chargé par :
 *   - templates/base.html              (pages publiques)
 *   - user_accounts/templates/back_office_base.html  (back-office)
 *
 * Architecture CSS du projet :
 *   scentree-design-system.css  → ce fichier (sitewide)
 *   ingredient.css              → surcharges/spécificités pages publiques
 *   user_account.css            → surcharges/spécificités back-office
 *
 * Règles :
 *   — Couleurs : TOUJOURS via var(--variable), jamais de hex inline
 *   — Tout composant .scentree-* doit être documenté dans scentree-design-system.html
 *   — Ne pas écrire de styles liés à une page précise ici
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. VARIABLES CSS (:root)
   Tokens globaux du design system. Utiliser TOUJOURS ces variables —
   jamais de valeur hexadécimale inline dans le CSS ou les templates.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Oranges */
    --orange-main              : #FF795B;
    --orange-light             : #FFEBE6;
    --orange-dark              : #D62700;
    --orange-hover-light-bg    : #FCEEEB;
    --orange-hover-dark-bg     : #F56544;
    --orange-hover-light-alpha : #ff795b33;

    /* Gris & neutres */
    --grey-dark   : #272727;
    --grey-medium : #545352;
    --grey-light  : #F7F7F7;
    --white       : #FFFFFF;
    --border      : #e0e0e0;
    --shadow      : 0px 1px 4px 2px #80808026;

    /* États sémantiques */
    --success       : #2ecc71;
    --success-light : #eafaf1;
    --danger        : #e74c3c;
    --danger-light  : #fdedec;
    --warning       : #e65100;
    --warning-light : #fff8e1;

    /* Couleurs métier */
    --botanical-green : #519051;
    --cta-user : #3F60F5;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHIE
   Polices : Public Sans (corps) + Funnel Display (titres, labels forts).
   Jamais de font-family ou font-size inline dans les templates.
   ══════════════════════════════════════════════════════════════════════════════ */
body                              { font-family: 'Public Sans', sans-serif !important; font-size: 15px; font-weight: 400; color: var(--grey-dark); line-height: 1.6; }
body b                            { font-weight: 600;}
h1                                { font-family: 'Funnel Display', sans-serif !important; font-size: 35px; font-weight: 700; margin-bottom: 0;}
h2                                { font-family: 'Funnel Display', sans-serif !important; font-size: 25px; font-weight: 600; color: var(--orange-main); padding-top: 0.25rem; margin-bottom: 1rem; }
h3                                { font-size: 24px; font-weight: 500; }
h4, .h4                           { font-size: 18px; font-weight: 500; }
h5                                { font-size: 16px; font-weight: 500; }
.body2regular                     { font-size: 12px; font-weight: 400; }
.body2bold                        { font-size: 12px; font-weight: 700; }
.caption                          { font-size: 10px; font-weight: 400; color: var(--grey-medium); }
.bigNumber                        { font-size: 40px; font-weight: 700; line-height: 1; }
.label                            { font-family: 'Funnel Display', sans-serif !important; font-size: 18px !important; font-weight: 600; }
.scentree-tab-content .label      { font-size: 15px !important; }
.labelsmall                       { font-family: 'Funnel Display', sans-serif; font-size: 16px; font-weight: 600; }
.label-info                       { color: var(--grey-medium); text-align: justify; }
.label-info b                     { font-weight: 600; color: var(--grey-dark); }

.scentree-section-header          { display: flex; align-items: center; margin-bottom: 1rem; }
.scentree-section-header img      { margin-right: 0.5rem; }
a                                 { color: var(--orange-main); text-decoration: none; }
a.underline                       { text-decoration: underline; }
.scentree-breadcrumb              { color: var(--orange-dark); text-decoration: none; }
.textgrey-medium                  { color: var(--grey-medium); }
.textorange-dark                  { color: var(--orange-dark); }
.textorange                       { color: var(--orange-main); }
.metric-change-positive           { color: var(--botanical-green); font-weight: 600; }
.metric-change-negative           { color: var(--danger); font-weight: 600; }
.metric-change-neutral            { color: var(--orange-main); font-weight: 600; }
.hidden                           { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   3. BOUTONS
   .button     = bouton texte — base obligatoire + modificateur.
   .buttonIcon = bouton icône seule — structure différente, ne jamais mélanger avec .button.
   Taille réduite : .button--sm / .buttonIcon--sm, cumulables avec tout modificateur.
   Disabled    : attribut HTML disabled — jamais simulé en CSS.
   Footer form : TOUJOURS .buttonGhost (annuler) + .buttonPrimary (valider).
   ══════════════════════════════════════════════════════════════════════════════ */
.button                   { background-color: var(--white); height: 45px; border-radius: 12px; font-size: 14px; font-weight: 500; border: none; text-decoration: none; padding: 0 16px; color: var(--orange-dark); transition: color .3s ease, fill .3s ease; display: flex; align-items: center; line-height: 1; }
.button:hover             { color: var(--orange-main); }
.button:hover svg         { fill: var(--orange-main); }
.buttonPrimary            { background-color: var(--orange-main); box-shadow: var(--shadow); color: var(--white); transition: box-shadow .3s ease, background-color .3s ease, fill .3s ease; }
.buttonPrimary:hover      { color: var(--white); background-color: var(--orange-hover-dark-bg); }
.buttonSecondary          { padding-top: 4px; box-shadow: var(--shadow); color: var(--grey-dark); transition: box-shadow .3s ease, background-color .3s ease, fill .3s ease; }
.buttonSecondary:hover    { color: var(--orange-dark); }
.buttonSecondary:active   { box-shadow: none; }
.buttonGhost              { background-color: transparent; color: var(--grey-medium); }
.buttonGhost:hover        { background-color: var(--grey-light); color: var(--grey-dark); }
.button--sm               { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.buttonIcon               { background-color: transparent; border: none; height: 45px; width: 45px; color: var(--orange-dark); border-radius: 12px; transition: .3s ease-in-out; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.buttonIcon img           { width: fit-content; height: fit-content; max-width: 100%; max-height: 100%; object-fit: contain; }
.buttonIcon:hover         { background-color: var(--orange-hover-light-bg); }
.buttonIconPrimary        { background-color: var(--orange-main); color: var(--white); box-shadow: var(--shadow); transition: box-shadow .3s ease, background-color .3s ease, fill .3s ease; }
.buttonIconPrimary:hover  { background-color: var(--orange-hover-dark-bg); }
.buttonIconPrimary:active { box-shadow: none; }
.buttonIconSecondary      { background-color: var(--white); color: var(--orange-dark); border: 2px solid var(--orange-main); }
.buttonIcon--sm           { height: 34px; width: 34px; border-radius: 8px; }
.button:disabled          { color: var(--grey-medium); background-color: var(--grey-light); box-shadow: none; cursor: not-allowed; opacity: 0.6; }
.buttonIcon:disabled      { color: var(--grey-medium); background-color: var(--grey-light); box-shadow: none; cursor: not-allowed; opacity: 0.6; }
.buttonIconSecondary:disabled      { color: var(--grey-medium); background-color: var(--grey-light); box-shadow: none; cursor: not-allowed; opacity: 0.6; border: 2px solid var(--grey-medium);}
.show-on-map-button       { border: 1px solid var(--white); }

/* Speed dial — groupe de boutons flottants, icône seule → icône + label au hover.
   .nav-cta-users--fixed positionne en bas centre de la page (position:fixed).
   Structure : div.nav-cta-users(.nav-cta-users--fixed) > button.nav-cta-users-item > i + span */
.nav-cta-users              { display: flex; gap: 8px; }
.nav-cta-users--fixed       { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1050; }
.nav-cta-users-item         { display: inline-flex; align-items: center; gap: 0; height: 45px; padding: 0 12px; border-radius: 12px; border: none; background: var(--cta-user); color: var(--white); cursor: pointer; white-space: nowrap; overflow: hidden; max-width: 45px; box-shadow: var(--shadow); font-size: 14px; font-weight: 500; line-height: 1; transition: max-width .3s ease, gap .3s ease; }
.nav-cta-users-item:hover   { max-width: 220px; gap: 8px; }
.nav-cta-users-item i       { flex-shrink: 0; font-size: 18px; }
.nav-cta-users-item span              { max-width: 0; overflow: hidden; transition: max-width .3s ease; }
.nav-cta-users-item:hover span        { max-width: 160px; }
/* Dernier bouton : label à gauche de l'icône — même style inline que les autres */
.nav-cta-users-item:last-child        { justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════════════
   4. BADGES
   .scentree-badge = badge arrondi base — OBLIGATOIRE avec un modificateur couleur.
   Modificateurs   : --orange | --green | --red | --grey
   Variantes indép.: .rank-badge (classement) | .pill-tag (suggestion)
   Classification  : .classification-path-primary + .classification-separator +
                     .classification-path-secondary + .classification-remove-btn
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-badge                                              { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 16px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.scentree-badge--orange                                      { background-color: var(--orange-light); color: var(--orange-dark); }
.scentree-badge--green                                       { background-color: var(--success-light); color: var(--botanical-green); }
.scentree-badge--red                                         { background-color: var(--danger-light); color: var(--orange-dark); }
.scentree-badge--grey                                        { background-color: var(--grey-light); color: var(--grey-medium); }
.rank-badge                                                  { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px; background-color: var(--orange-main); color: var(--white); border-radius: 4px; font-weight: 600; font-size: 12px; }

.pill-tag                                                    { display: inline-block; background-color: var(--orange-light); color: var(--orange-dark); border: 1px solid var(--orange-dark); padding: 6px 12px; border-radius: 16px; font-size: 13px; font-weight: 500; }
.classification-path-primary, .classification-path-secondary { display: inline-flex; align-items: center; color: var(--grey-dark); font-size: 14px; }
.classification-separator                                    { color: var(--grey-medium); font-weight: 500; padding: 0 4px 4px 0; }
.classification-remove-btn                                   { background: none; border: none; color: var(--grey-medium); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.classification-remove-btn:hover                             { color: var(--orange-dark); }

/* ══════════════════════════════════════════════════════════════════════════════
   5. ALERTES
   Surcharge des classes Bootstrap .alert-* avec la palette Scentree.
   Utiliser .alert + .alert-danger / warning / success / info dans les templates.
   ══════════════════════════════════════════════════════════════════════════════ */
.alert-danger                     { background-color: var(--danger-light); color: var(--orange-dark); border: 1px solid var(--danger); }
.alert-warning                    { background-color: var(--warning-light); color: var(--warning); border: 1px solid var(--warning); }
.alert-success                    { background-color: var(--success-light); color: var(--botanical-green); border: 1px solid var(--success); }
.alert-info                       { background-color: var(--white); color: var(--cta-user); border: 1px solid var(--cta-user); }


/* ══════════════════════════════════════════════════════════════════════════════
   6. ONGLETS + PAGINATION
   Onglets    : .scentree-tabs > button.scentree-tab + div.scentree-tab-content
                État actif : .active sur le tab ET sur le contenu — toujours géré par JS.
                Jamais de display:none ou display:block inline — laisser le JS gérer via .active.
   Pagination : .scentree-pagination-container > nav > ul.scentree-pagination
                Toujours via {% include "_pagination.html" %} — jamais de markup inline.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-tabs                                            { display: flex; gap: 8px; }
.scentree-tab                                             { padding: 8px 16px; background-color: var(--white); border: 1px solid var(--orange-main); border-radius: 4px; cursor: pointer; color: var(--grey-medium); transition: all 0.2s ease; }
.scentree-tab:hover                                       { background-color: var(--orange-light); border-color: var(--orange-main); }
.scentree-tab.active                                      { background-color: var(--orange-main); border-color: var(--orange-main); color: var(--white); }
.scentree-tab-content                                     { display: none; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.scentree-tab-content.active                              { display: block; }

.scentree-pagination-container                            { width: 100%; background-color: transparent; }
.scentree-pagination                                      { display: flex; flex-wrap: wrap; justify-content: center; padding-left: 0; list-style: none; margin: 0 0 10px; }
.scentree-pagination .page-link                                        { color: var(--grey-dark); background-color: transparent; border: none; border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 14px; font-weight: 500; min-width: 36px; text-align: center; transition: all 0.2s ease; }
.scentree-pagination .page-item:first-child .page-link,
.scentree-pagination .page-item:last-child .page-link                  { border-radius: 8px; }
.scentree-pagination .page-link:hover                     { color: var(--orange-dark); background-color: var(--orange-light); }
.scentree-pagination .page-item.active .page-link         { background-color: var(--orange-main); color: var(--white); font-weight: 600; }
.scentree-pagination .page-item.disabled .page-link       { color: var(--grey-medium); background-color: transparent; opacity: 0.4; cursor: not-allowed; }
.scentree-pagination .page-item.disabled .page-link:hover { color: var(--grey-medium); background-color: transparent; }
.scentree-pagination .page-item--ellipsis .page-link      { color: var(--grey-medium); cursor: default; letter-spacing: 0.1em; }
.scentree-pagination .page-item--ellipsis .page-link:hover { color: var(--grey-medium); background-color: transparent; }

/* ══════════════════════════════════════════════════════════════════════════════
   7. FORMULAIRES
   Base       : label.labelsmall (mb-1) + .form-control (Bootstrap) — surcharge couleur sitewide.
   États      : disabled (attr HTML) | is-invalid (Bootstrap) + .invalid-feedback.
   Checkbox   : surcharge Bootstrap — orange au :checked/:focus.
   Textarea   : .auto-resize-textarea — CSS seul ; JS local à my_public_data.html.
   Select     : .scentree-select — surcharge <select> natif, chevron SVG inline. Pas de combobox custom.
   Input group: .scentree-input-group — wrapper input + icône overlay | addon texte | bouton.
   Descripteur: .scentree-descriptor-checkbox — carte radio olfactive (image + label cliquable).
   ══════════════════════════════════════════════════════════════════════════════ */
.form-control, .form-control:focus                                               { color: var(--grey-dark); }
.form-check-input:checked                                                        { background-color: var(--orange-main); border-color: var(--orange-main); }
.form-check-input:focus                                                          { box-shadow: 0 0 0 .25rem var(--orange-hover-light-alpha); }
.auto-resize-textarea                                                            { overflow-y: hidden; }
.scentree-descriptor-checkbox                                                    { display: flex; align-items: center; gap: 15px; padding: 10px; border: 1px solid var(--grey-light); border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; background-color: var(--grey-light); min-height: 65px; box-sizing: border-box; }
.scentree-descriptor-checkbox:hover                                              { background-color: var(--orange-light); border-color: var(--orange-main); }
.scentree-descriptor-checkbox:has(input[type="radio"]:checked)                   { background-color: var(--orange-light); border-color: var(--orange-main); }
.scentree-descriptor-checkbox:has(input[type="radio"]:checked) span              { font-weight: 600; color: var(--orange-main); }
.scentree-select                  { appearance: none; -webkit-appearance: none; display: block; width: 100%; padding: 8px 36px 8px 12px; background-color: var(--white); border: 1px solid var(--border); border-radius: 8px; font-family: 'Public Sans', sans-serif; font-size: 15px; color: var(--grey-dark); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23545352' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color .2s ease, box-shadow .2s ease; }
.scentree-select:focus            { outline: none; border-color: var(--orange-main); box-shadow: 0 0 0 .25rem var(--orange-hover-light-alpha); }
.scentree-select:disabled         { opacity: 0.6; cursor: not-allowed; background-color: var(--grey-light); }
.scentree-input-group             { position: relative; display: flex; align-items: stretch; }
.scentree-input-group .form-control { flex: 1; min-width: 0; }
.scentree-input-group-icon-left   { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--grey-medium); display: flex; pointer-events: none; }
.scentree-input-group-icon-right  { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--grey-medium); display: flex; pointer-events: auto; }
.scentree-input-group--icon-left .form-control  { padding-left: 40px; }
.scentree-input-group--icon-right .form-control { padding-right: 40px; }
.scentree-input-group-prefix, .scentree-input-group-suffix { display: flex; align-items: center; padding: 0 12px; background-color: var(--grey-light); border: 1px solid var(--border); font-size: 14px; color: var(--grey-medium); white-space: nowrap; flex-shrink: 0; }
.scentree-input-group-prefix      { border-right: none; border-radius: 8px 0 0 8px; }
.scentree-input-group-suffix      { border-left: none; border-radius: 0 8px 8px 0; }
.scentree-input-group--with-prefix .form-control { border-radius: 0 8px 8px 0; }
.scentree-input-group--with-suffix .form-control { border-radius: 8px 0 0 8px; }
.scentree-input-group--with-button .form-control { border-radius: 8px 0 0 8px; }
.scentree-input-group--with-button .button       { flex-shrink: 0; border-radius: 0 12px 12px 0; border: 1px solid var(--border); border-left: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   8. INFOBULLES
   .scentree-tooltip               = base visuelle (fond, padding, shadow) — combinée avec une variante.
   .custom-tooltip                 = tooltip back-office position:fixed, positionné via JS (--tooltip-top/left).
                                     .visible ajouté par JS pour l'afficher. Accompagné de .custom-tooltip-arrow.
                                     Structure : .custom-tooltip-title + .custom-tooltip-body.
                                     Utilisé aussi dans les tooltips Leaflet (carte pays) — même structure HTML.
   .descriptor-tooltip             = standalone position:fixed, positionné via JS (--tooltip-x/y), animé.
   .info-icon-wrapper > svg.info-icon = icône inline ⓘ, opacity 0.7 → 1 au hover.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-tooltip                    { background-color: var(--white); border-radius: 4px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.info-icon-wrapper                   { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: help; flex-shrink: 0; }
.info-icon                           { display: inline-block; width: 14px; height: 14px; opacity: 0.7; transition: opacity 0.2s ease; }
.info-icon-wrapper:hover .info-icon  { opacity: 1; }
.custom-tooltip                      { position: fixed; top: var(--tooltip-top,0); left: var(--tooltip-left,0); transform: translateX(-50%); color: var(--grey-dark); width: 280px; max-width: 90vw; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0s 0.2s; z-index: 10000; }
.custom-tooltip-title                { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.custom-tooltip-title:only-child     { margin-bottom: 0; }
.custom-tooltip-body                 { font-size: 12px; line-height: 1.4; }
.custom-tooltip-body:only-child      { margin-top: 0; }
.custom-tooltip.measuring            { visibility: hidden; opacity: 0; }
.custom-tooltip.visible              { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
.custom-tooltip-arrow                { position: fixed; top: var(--arrow-top,0); left: var(--arrow-left,0); transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0s 0.2s; z-index: 10001; }
.custom-tooltip-arrow.arrow-up       { border-top: 6px solid var(--grey-dark); border-bottom: none; }
.custom-tooltip-arrow.arrow-down     { border-bottom: 6px solid var(--grey-dark); border-top: none; }
.custom-tooltip-arrow.visible        { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }

/* ══════════════════════════════════════════════════════════════════════════════
   9. TABLES
   Structure : div.scentree-table-wrapper > table.scentree-table
   Typographie : th.labelsmall / td.label-info — jamais de font-* inline sur table.
   Tri par défaut : tout th[data-sort] est triable (ScentreeTableSort, table-sort.js).
   Modificateurs :
     --no-sort       → opt-out tri (table à 1 seule ligne de données)
     --editable      → cellules éditables inline (HTMX) — visuel seulement
     --sticky-header → en-tête fixe au scroll (wrapper doit avoir max-height + overflow-y:auto)
     --heatmap       → tuiles par intensité (.scentree-table-cell + .scentree-table-intensity-N)
   Feedback inline : .flash-saved / .flash-error sur le <form> parent de la cellule
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-table-wrapper                                                           { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--grey-light); border-radius: 8px; }
.scentree-table                                                                   { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.scentree-table th:first-child, .scentree-table td:first-child                    { width: 22%; }
.scentree-table tbody td                                                          { padding: 10px 12px; border-bottom: 1px solid var(--grey-light); white-space: normal; background-color: var(--white); text-align: center !important; vertical-align: middle; }
.scentree-table tbody td:first-child                                              { text-align: left !important; }
.scentree-table thead th                                                          { padding: 5px 12px; background-color: var(--orange-light); text-transform: uppercase; color: var(--grey-dark); text-align: center; }
.scentree-table thead th:first-child                                              { text-align: left; }
.scentree-table tbody tr:hover td                                                 { background-color: var(--orange-light); }
.scentree-table td .button                                                        { margin: 0 auto; }
.scentree-table td .buttonIcon                                                     { margin: 0 auto; }
.scentree-table td input, .scentree-table td select, .scentree-table td textarea  { text-align: left; }
.flash-saved                                                                      { border: 2px solid var(--success) !important; border-radius: 4px; }
.flash-error                                                                      { border: 2px solid var(--danger) !important; border-radius: 4px; }
.scentree-table thead th[data-sort]                                               { user-select: none; cursor: pointer; }
.scentree-table thead th[data-sort]::after                                        { content: '⇅'; display: inline-block; padding-left: 6px; color: var(--orange-main); opacity: 1; font-weight: normal; }
.scentree-table thead th[data-sort].sort-asc::after                               { content: '↑'; color: var(--orange-main); opacity: 1; }
.scentree-table thead th[data-sort].sort-desc::after                              { content: '↓'; color: var(--orange-main); opacity: 1; }
.scentree-table--no-sort thead th[data-sort]                                      { cursor: default; }
.scentree-table--no-sort tbody tr:hover td                                        { background-color: white!important; }
.scentree-table--no-sort thead th[data-sort]::after                               { display: none; }
.scentree-table--editable td                                                      { word-wrap: break-word; overflow-wrap: break-word; max-width: 0; position: relative; }
.scentree-table--editable td.editable-cell                                        { white-space: nowrap; }
.scentree-table--sticky-header thead                                              { position: sticky; top: 0; z-index: 10; }
.scentree-table--sticky-header thead th                                           { position: sticky; top: 0; box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1); }
.scentree-table--heatmap                                                          { table-layout: auto; border-spacing: 4px; min-width: 600px; }
.scentree-table--heatmap th:first-child, .scentree-table--heatmap td:first-child  { width: auto; }
.scentree-table--heatmap thead th                                                 { padding: 8px; }
.scentree-table--heatmap tbody td                                                 { padding: 0; border-bottom: none; background-color: transparent; }
.scentree-table-cell                                                              { padding: 12px 8px; text-align: center; font-weight: 600; border-radius: 4px; }
.scentree-table-intensity-1                                                       { background-color: var(--grey-light); color: var(--grey-medium); }
.scentree-table-intensity-2                                                       { background-color: var(--orange-light); color: var(--grey-dark); }
.scentree-table-intensity-3                                                       { background-color: var(--orange-light); color: var(--grey-dark); }
.scentree-table-intensity-4                                                       { background-color: var(--orange-hover-dark-bg); color: var(--white); }
.scentree-table-intensity-5                                                       { background-color: var(--orange-main); color: var(--white); }
.scentree-table td .button                                                        { width: fit-content; display: inline-flex; }
.name-main                                                                        { font-weight: 600; }
.sku-sub                                                                          { font-style: italic; font-size: 12px; color: var(--grey-medium); }

/* ══════════════════════════════════════════════════════════════════════════════
   10. CARDS
   .user-accounts-card          = base blanche (back-office + pages publiques).
   .user-accounts-card-hover    = modificateur centré + animation translateY(-4px) au survol.
   .user-accounts-card-icon     = icône 48px à l'intérieur d'une hover-card.
   .user-accounts-card-disabled = modificateur grisé + border dashed, contenu centré "à venir".
   .scentree-upload-card        = zone de dépôt dashed, fond orange-light.
   Page-spécifiques (restent dans leur fichier) : .device-metric-card, .newsroom-card, .clash-card
   ══════════════════════════════════════════════════════════════════════════════ */
.user-accounts-card              { background-color: var(--white); border-radius: 12px; box-shadow: var(--shadow); padding: 30px; margin-bottom: 20px; min-height: 100px; }
.user-accounts-card-hover        { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--grey-dark); height: 100%; text-align: center; }
.user-accounts-card-hover:hover  { transform: translateY(-4px); box-shadow: 0px 4px 12px 4px var(--grey-medium); }
.user-accounts-card-hover p      { text-align: center; margin-bottom: 0; }
.user-accounts-card-icon         { height: 48px; width: auto; object-fit: contain; margin-bottom: 1rem; }
.user-accounts-card-disabled     { background-color: var(--grey-light); border: 2px dashed var(--grey-medium); box-shadow: none; color: var(--grey-medium); display: flex; flex-direction: column; }
.scentree-upload-card            { background-color: var(--orange-light); border: 2px dashed var(--orange-main); border-radius: 12px; padding: 24px; }

/* ══════════════════════════════════════════════════════════════════════════════
   11. LISTES
   Surcharges sitewide Bootstrap/navigateur sur les balises natives ul / ol / li.
   Composant structuré : .scentree-data-list (pages publiques — données ingrédient).
   Exception : #IFRA .scentree-data-list { max-width:100% } reste dans ingredient.css (ID-scopé).
   ══════════════════════════════════════════════════════════════════════════════ */
ol ol ul, ul, ol                                   { list-style-type: disc; }
ul li                                              { margin: 4px 0; }
ul li::marker, ol li::marker                       { color: var(--orange-main); }
.scentree-data-list                                { list-style: none; padding-left: 0; flex: 1 1 auto; max-width: 49%; }
.scentree-data-list li                             { height: 40px; display: flex; align-items: center; padding: 0 20px; }
.scentree-data-list li h3                          { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
.scentree-data-list li h3 .label                   { font-size: 1em !important; }
.scentree-data-list li:nth-child(odd)              { background-color: var(--orange-light); }
.scentree-data-list li .label-info                 { margin-left: 0.5rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   12. FILE QUEUE
   Structure : .scentree-file-queue > .scentree-file-queue-head + .scentree-file-queue-body
   Accordéon : .collapsed masque le body et pivote .q-caret
   Progress   : .scentree-progress > .scentree-progress-bar > i (width = %)
     Modificateurs : .ok (succès) | .err (erreur) | .indet (animé, indéterminé)
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-file-queue                                    { border: 1px solid var(--border); border-radius: 12px; background: var(--white); overflow: hidden; }
.scentree-file-queue-head                               { display: grid; grid-template-columns: minmax(0, 2.4fr) 160px minmax(0, 2fr) 90px; gap: 18px; align-items: center; padding: 0 20px; height: 46px; background: var(--orange-light); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
.scentree-file-queue-head > div                        { font-family: 'Funnel Display', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-dark); }
.scentree-file-queue-head > div:last-child             { text-align: right; }
.q-caret                                                { width: 14px; height: 14px; margin-left: 6px; vertical-align: middle; transition: transform .25s ease; }
.scentree-file-queue.collapsed .q-caret               { transform: rotate(-90deg); }
.scentree-file-queue.collapsed .scentree-file-queue-body { display: none; }
.scentree-progress                                      { display: flex; flex-direction: column; gap: 5px; }
.scentree-progress-bar                                  { height: 6px; background: var(--grey-light); border-radius: 999px; overflow: hidden; }
.scentree-progress-bar > i                             { display: block; height: 100%; background: var(--orange-main); border-radius: 999px; transition: width .25s ease; }
.scentree-progress-bar.ok > i                          { background: var(--botanical-green); }
.scentree-progress-bar.err > i                         { background: var(--orange-dark); }
.scentree-progress-bar.indet > i                       { width: 40% !important; background: linear-gradient(90deg, transparent, var(--orange-main), transparent); animation: scentree-progress-indet 1.3s linear infinite; }
@keyframes scentree-progress-indet                     { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
[hidden]                                                { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   13. IMAGES
   .scentree-img-ingredient       → conteneur desktop (flex colonne centré).
   .scentree-img-ingredient-mobile→ masqué par défaut ; affiché en mobile via responsive.css.
   .scentree-img-map img          → cap hauteur carte géographique (250px).
   .scentree-img-sponsor          → logo sponsor fixé à 50px.
   Légende sous image : classe .caption (§2 Typographie — 10px, grey-medium).
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-img-ingredient        { display: flex; flex-direction: column; align-items: center; }
.scentree-img-ingredient-mobile { display: none !important; flex-direction: column; width: 100%; align-items: center; }
.scentree-img-map img           { max-height: 250px; }
.scentree-img-sponsor           { height: 50px; }

/* ══════════════════════════════════════════════════════════════════════════════
   14. TIMELINE
   .scentree-timeline             → wrapper, ligne verticale orange border-left.
   .scentree-timeline-bloc        → item (position:relative, padding-left:48px).
   .scentree-timeline-img         → bulle icône (position:absolute, 50×50px, centrée via --content-center JS).
   .scentree-timeline-content     → carte contenu (grey-light, border-radius:12px).
   Dernier bloc : ajouter .pb-0 pour stopper la ligne verticale proprement.
   Responsive : ligne et bulle masquées — voir responsive.css.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-timeline                  { border-left: 2px solid var(--orange-main); margin-left: 24px; }
.scentree-timeline-bloc             { padding-left: 48px; position: relative; padding-bottom: 32px; }
.scentree-timeline-bloc img         { width: 24px; height: auto; }
.scentree-timeline-img              { position: absolute; left: -26px; height: 50px; width: 50px; background-color: var(--white); border-radius: 100px; border: 2px solid var(--orange-main); box-shadow: var(--shadow); padding: 8px; display: flex; align-items: center; justify-content: center; top: calc(var(--content-center, 0px) - 25px); }
.scentree-timeline-content          { background-color: var(--grey-light); padding: 24px; border-radius: 12px; margin-bottom: 0; position: relative; }
.scentree-timeline-content::before  { content: ''; position: absolute; left: -61px; top: 50%; transform: translateY(-50%); height: 50px; width: 50px; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   15. MODAL
   Structure : .scentree-modal-backdrop > .scentree-modal > header + body + footer
   Focus trap : CSS ne peut pas l'implémenter — le JS doit contraindre Tab aux éléments
     du dialog. Ajouter tabindex="-1" sur .scentree-modal et focus() à l'ouverture.
   Tailles : défaut 600px | --sm 400px | --lg 900px
   Footer  : .buttonGhost (annuler) à gauche, .buttonPrimary (valider) à droite — règle projet.
   ARIA    : role="dialog" aria-modal="true" aria-labelledby="{id-du-span.label}"
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-modal-backdrop          { position: fixed; inset: 0; background-color: var(--orange-light); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-content                    { border: none; }
.modal-header, .modal-footer      { border-top: none; border-bottom: none; }
.scentree-modal                   { background-color: var(--white); border-radius: 12px; box-shadow: var(--shadow); width: 600px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; outline: none; }
.scentree-modal--sm               { width: 400px; }
.scentree-modal--lg               { width: 60vw; --bs-modal-width: 60vw; }
.scentree-modal-header            { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; flex-shrink: 0; gap: 16px; }
.scentree-modal-header .btn-close { padding: 0; margin: 0; position: absolute; right: 16px; top: 16px; }
.scentree-modal-body              { padding: 24px; overflow-y: auto; flex: 1; }
.scentree-modal-footer            { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; flex-shrink: 0; gap: 12px; }




/* ══════════════════════════════════════════════════════════════════════════════
   16. TOAST
   Container : .scentree-toast-container (fixed bottom-right, stack vertical).
   Variantes sur .scentree-toast : --success | --error | --warning | --info
   Chaque variante : border-left colorée + icône colorée (double signal WCAG 1.4.1).
   Sortie : JS ajoute .is-hiding → attend animationend → retire l'élément du DOM.
   Auto-dismiss JS : setTimeout(3000-5000) → ajoute .is-hiding.
   ARIA : role="status" (info/success) ou role="alert" (error/warning) + aria-live.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-toast-container         { position: fixed; bottom: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.scentree-toast                   { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; box-shadow: var(--shadow); background-color: var(--white); border-left: 4px solid var(--grey-medium); min-width: 280px; max-width: 380px; pointer-events: auto; animation: scentree-toast-in .25s ease; }
.scentree-toast--success          { border-left-color: var(--botanical-green); }
.scentree-toast--error            { border-left-color: var(--orange-dark); }
.scentree-toast--warning          { border-left-color: var(--warning); }
.scentree-toast--info             { border-left-color: var(--cta-user); }
.scentree-toast.is-hiding         { animation: scentree-toast-out .25s ease forwards; }
.scentree-toast-icon              { flex-shrink: 0; font-size: 18px; line-height: 1; }
.scentree-toast--success .scentree-toast-icon { color: var(--botanical-green); }
.scentree-toast--error   .scentree-toast-icon { color: var(--orange-dark); }
.scentree-toast--warning .scentree-toast-icon { color: var(--warning); }
.scentree-toast--info    .scentree-toast-icon { color: var(--cta-user); }
.scentree-toast-body              { flex: 1; min-width: 0; }
.scentree-toast-title             { font-size: 14px; font-weight: 600; color: var(--grey-dark); margin-bottom: 2px; }
.scentree-toast-message           { font-size: 13px; color: var(--grey-medium); line-height: 1.4; }
.scentree-toast-close             { background: none; border: none; cursor: pointer; color: var(--grey-medium); font-size: 18px; padding: 0; line-height: 1; flex-shrink: 0; transition: color .15s ease; }
.scentree-toast-close:hover       { color: var(--grey-dark); }
@keyframes scentree-toast-in      { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scentree-toast-out     { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(12px); } }

/* ══════════════════════════════════════════════════════════════════════════════
   17. SPINNER
   Loader indéterminé — hérite de currentColor (utilisable sur bouton primaire).
   Tailles : --sm 16px | défaut 24px | --lg 40px
   prefers-reduced-motion : remplace la rotation par un état statique atténué.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-spinner                 { display: inline-block; width: 24px; height: 24px; border: 2.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: scentree-spin .7s linear infinite; flex-shrink: 0; vertical-align: middle; }
.scentree-spinner--sm             { width: 16px; height: 16px; border-width: 2px; }
.scentree-spinner--lg             { width: 40px; height: 40px; border-width: 3px; }
@keyframes scentree-spin          { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scentree-spinner { animation: none; border-top-color: currentColor; opacity: 0.4; } }

/* ══════════════════════════════════════════════════════════════════════════════
   18. SKELETON
   Placeholder de chargement animé (shimmer gradient).
   Formes : --text (ligne 14px) | --title (ligne 24px) | --card (rectangle) | --circle (avatar)
   prefers-reduced-motion : supprime l'animation, garde le fond gris.
   Usage : remplacer le contenu par des divs .scentree-skeleton pendant le chargement.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-skeleton                { display: block; background: linear-gradient(90deg, var(--grey-light) 25%, var(--border) 50%, var(--grey-light) 75%); background-size: 200% 100%; animation: scentree-skeleton-shimmer 1.4s ease infinite; border-radius: 4px; }
.scentree-skeleton--text          { height: 14px; }
.scentree-skeleton--title         { height: 24px; }
.scentree-skeleton--card          { height: 120px; border-radius: 12px; }
.scentree-skeleton--circle        { border-radius: 50%; width: 48px; height: 48px; }
@keyframes scentree-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scentree-skeleton { animation: none; background: var(--grey-light); } }

/* Empty state — intégré dans §10 CARDS : .user-accounts-card > .scentree-empty-state */
.scentree-empty-state             { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 32px; }
.scentree-empty-state-icon        { font-size: 48px; margin-bottom: 16px; color: var(--grey-medium); line-height: 1; }
.scentree-empty-state-title       { margin-bottom: 8px; color: var(--grey-dark); }
.scentree-empty-state-desc        { max-width: 360px; margin-bottom: 24px; }
.scentree-empty-state--error .scentree-empty-state-icon { color: var(--orange-dark); }

/* ══════════════════════════════════════════════════════════════════════════════
   19. SLIDER — ÉCHELLE SUR 10
   Évaluation numérique de 0 à 10, pas de 1 (thumb snape à chaque 10%).
   Structure : .scentree-slider > label.scentree-slider-label + div.scentree-slider-row > input[type=range].scentree-slider-input + span.scentree-slider-value
   Track gris uniforme, thumb blanc border --cta-user. Valeur dans .scentree-slider-value.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-slider                                        { display: flex; align-items: center; gap: 16px; }
.scentree-slider-label                                  { width: 130px; flex-shrink: 0; }
.scentree-slider-row                                    { flex: 1; display: flex; align-items: center; gap: 12px; }
.scentree-slider-input                                  { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 3px; outline: none; cursor: pointer; background: var(--border); }
.scentree-slider-input::-webkit-slider-thumb            { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 3px solid var(--cta-user); cursor: pointer; transition: transform .1s ease; }
.scentree-slider-input::-webkit-slider-thumb:hover      { transform: scale(1.15); }
.scentree-slider-input:active::-webkit-slider-thumb     { transform: scale(1.25); }
.scentree-slider-input::-moz-range-track                { height: 6px; border-radius: 3px; background: var(--border); border: none; }
.scentree-slider-input::-moz-range-thumb                { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 3px solid var(--cta-user); cursor: pointer; transition: transform .1s ease; }
.scentree-slider-input::-moz-range-thumb:hover          { transform: scale(1.15); }
.scentree-slider-value                                  { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; color: var(--grey-dark); background: var(--white); }

/* ══════════════════════════════════════════════════════════════════════════════
   20. NEWSROOM CARD
   Composant card narratif avec accent border-left coloré selon la variante.
   Toujours combiné avec .user-accounts-card.
   Structure : .scentree-newsroom-card[--up|--down|--new|--disabled] > .scentree-newsroom-emoji + .scentree-newsroom-title + .scentree-newsroom-body
   JS : ne toucher que textContent de .scentree-newsroom-title et .scentree-newsroom-body — jamais innerHTML.
   ══════════════════════════════════════════════════════════════════════════════ */
.scentree-newsroom-card                 { padding: 16px; margin-bottom: 0; min-height: 0; border-left: 4px solid var(--grey-medium); height: 100%; }
.scentree-newsroom-card--up             { border-left-color: var(--botanical-green); }
.scentree-newsroom-card--down           { border-left-color: var(--orange-dark); }
.scentree-newsroom-card--new            { border-left-color: var(--orange-hover-dark-bg); }
.scentree-newsroom-card--disabled       { border-left-color: var(--grey-light);  border-left: 4px dashed var(--grey-medium); color: var(--grey-medium); opacity : 0.5; cursor: default; }
.scentree-newsroom-emoji                { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.scentree-newsroom-title                { font-family: 'Funnel Display', sans-serif; font-weight: 600; font-size: 16px; color: var(--grey-dark); margin-bottom: 6px; }
.scentree-newsroom-body                 { font-size: 13px; line-height: 1.4; color: var(--grey-medium); }