/* Toutes les règles internes sont portées par « .ecla-tips <classe> » et non par la classe
   seule. Le plugin s'exécute sous un thème tiers inconnu : une règle de thème du type
   « .entry-content button » ou « .entry-content a » pèse (0,1,1) et l'emporterait sur une
   classe nue (0,1,0). Le préfixe monte à (0,2,0) et rend le bandeau insensible à ces règles.
   Les surcharges @media portent le même préfixe, faute de quoi la règle de base les
   écraserait par spécificité au lieu de leur céder la place. */
.ecla-tips {
    --tips-green : #2e7d32;
    --tips-green-dark : #1b5e20;
    --tips-surface : #ffffff;
    --tips-border : rgba(46,125,50,0.22);
    --tips-text : #1a2744;
    display : flex;
    align-items : stretch;
    gap : 2px;
    width : 100%;
    max-width : 100%;
    box-sizing : border-box;
    margin : 8px auto 10px;
    padding : 3px;
    background : var(--tips-surface);
    border : 1px solid var(--tips-border);
    border-radius : 999px;
    box-shadow : 0 1px 6px rgba(0,0,0,0.07);
    overflow : hidden;
    font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ecla-tips *,
.ecla-tips *::before,
.ecla-tips *::after {
    box-sizing : border-box;
}
.ecla-tips .ecla-tips-arrow {
    flex : 0 0 auto;
    width : 26px;
    min-width : 26px;
    height : auto;
    margin : 0;
    padding : 0;
    border : none;
    border-radius : 999px;
    background : transparent;
    color : var(--tips-green);
    font-family : inherit;
    font-size : 1.05rem;
    line-height : 1;
    font-weight : 700;
    text-transform : none;
    letter-spacing : normal;
    box-shadow : none;
    cursor : pointer;
    transition : background 0.18s, color 0.18s;
}
.ecla-tips .ecla-tips-arrow:hover,
.ecla-tips .ecla-tips-arrow:focus-visible {
    background : rgba(46,125,50,0.10);
    color : var(--tips-green-dark);
    outline : none;
}
.ecla-tips .ecla-tips-arrow:active {
    background : rgba(46,125,50,0.18);
}
.ecla-tips .ecla-tips-viewport {
    flex : 1 1 auto;
    min-width : 0;
    overflow : hidden;
}
.ecla-tips .ecla-tips-list {
    list-style : none;
    margin : 0;
    padding : 0;
    min-width : 0;
}
.ecla-tips .ecla-tips-item {
    margin : 0;
    padding : 0;
    min-width : 0;
    list-style : none;
}
/* Invariant : une question inactive ne doit JAMAIS s'afficher. Sans cette garantie, une règle
   de thème posant un display sur li empilerait les huit questions les unes sous les autres.
   C'est le seul !important de la feuille, et il porte sur un état, pas sur une préférence. */
.ecla-tips .ecla-tips-item[hidden] {
    display : none !important;
}
.ecla-tips .ecla-tips-item.is-active {
    animation : eclaTipsIn 0.28s ease;
}
@keyframes eclaTipsIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.ecla-tips .ecla-tips-btn {
    display : flex;
    align-items : center;
    gap : 6px;
    width : 100%;
    min-width : 0;
    margin : 0;
    padding : 5px 6px;
    border : none;
    border-radius : 999px;
    background : transparent;
    box-shadow : none;
    text-decoration : none;
    font-family : inherit;
    color : var(--tips-text);
    transition : background 0.18s;
}
.ecla-tips .ecla-tips-btn:hover,
.ecla-tips .ecla-tips-btn:focus-visible {
    background : rgba(46,125,50,0.08);
    color : var(--tips-green-dark);
    text-decoration : none;
    outline : none;
}
.ecla-tips .ecla-tips-badge {
    flex : 0 0 auto;
    display : inline-flex;
    align-items : center;
    justify-content : center;
    width : 18px;
    height : 18px;
    border-radius : 50%;
    background : var(--tips-green);
    color : #ffffff;
    font-size : 0.7rem;
    font-weight : 900;
    line-height : 1;
}
.ecla-tips .ecla-tips-text {
    flex : 1 1 auto;
    min-width : 0;
    display : block;
    font-size : 0.78rem;
    font-weight : 600;
    line-height : 1.3;
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
}
.ecla-tips .ecla-tips-go {
    flex : 0 0 auto;
    color : var(--tips-green);
    font-size : 0.85rem;
    font-weight : 700;
    line-height : 1;
}
.ecla-tips--single .ecla-tips-arrow {
    display : none;
}
/* Ces deux conteneurs n'ont AUCUN retrait horizontal (`#ecla-marketplace-wrapper` n'en déclare
   pas, `#ecla-dashboard-wrapper` vaut `padding: 0 0 80px`) : sans la largeur calculée, la pilule
   arrondie viendrait toucher le bord de l'écran. Les pages Connexion et Inscription, elles,
   portent déjà `padding: … 12px` sur leur wrapper — inutile d'y ajouter quoi que ce soit. */
#ecla-marketplace-wrapper .ecla-tips {
    width : calc(100% - 24px);
    max-width : 1400px;
    margin : 6px auto 8px;
}
#ecla-dashboard-wrapper .ecla-tips {
    width : calc(100% - 24px);
    max-width : 1200px;
    margin : 10px auto 0;
}
#ecla-connexion-wrapper .ecla-tips {
    max-width : 560px;
    margin : 0 auto 12px;
}
#ecla-inscription-wrapper .ecla-tips {
    max-width : 760px;
    margin : 0 auto 12px;
}
/* Les quatre conteneurs Abonné et Livreur portent DÉJÀ un retrait horizontal — `.ecla-compte`
   vaut `padding: 0 16px`, `.ecla-livreur-dash` `padding: 12px`, `.ecla-abonne-reg` (qui habille
   aussi le formulaire livreur) `padding: 24px`. Aucune largeur calculée n'est donc nécessaire
   ici, contrairement au catalogue et à l'espace vendeur : seule la marge verticale est reprise,
   pour absorber celle que l'élément précédent a déjà posée et garder le même rythme partout. */
.ecla-compte .ecla-tips,
.ecla-livreur-dash .ecla-tips,
.ecla-abonne-reg .ecla-tips {
    margin : 0 auto 14px;
}
@media (min-width: 600px) {
    .ecla-tips {
        gap : 4px;
        padding : 4px;
    }
    .ecla-tips .ecla-tips-arrow {
        width : 30px;
        min-width : 30px;
        font-size : 1.15rem;
    }
    .ecla-tips .ecla-tips-text {
        font-size : 0.86rem;
    }
    .ecla-tips .ecla-tips-badge {
        width : 20px;
        height : 20px;
        font-size : 0.75rem;
    }
    .ecla-tips .ecla-tips-btn {
        padding : 6px 10px;
        gap : 8px;
    }
}
#ecla-marketplace-wrapper.dark-mode .ecla-tips {
    --tips-surface : #16202e;
    --tips-text : #e8eef5;
    --tips-green : #66bb6a;
    --tips-green-dark : #a5d6a7;
    --tips-border : rgba(102,187,106,0.32);
    box-shadow : 0 1px 6px rgba(0,0,0,0.35);
}
#ecla-marketplace-wrapper.dark-mode .ecla-tips .ecla-tips-badge {
    color : #10202a;
}
/* Le catalogue et l'espace vendeur basculent en sombre par une CLASSE posée sur leur wrapper ;
   l'espace abonné et les formulaires d'inscription abonné/livreur, eux, suivent la préférence
   système. Deux mécanismes distincts, donc deux blocs — sans celui-ci le bandeau resterait
   blanc sur ces pages devenues sombres. L'espace livreur est volontairement absent : sa
   feuille ne déclare aucun thème sombre, un bandeau sombre y serait le seul élément foncé.
   La surface reprend le #1e2540 de leurs champs de saisie, plus clair que le #161c2e de leurs
   cartes : le bandeau doit se détacher du fond, pas s'y fondre. */
@media (prefers-color-scheme: dark) {
    .ecla-compte .ecla-tips,
    .ecla-abonne-reg .ecla-tips {
        --tips-surface : #1e2540;
        --tips-text : #e6e6e6;
        --tips-green : #66bb6a;
        --tips-green-dark : #a5d6a7;
        --tips-border : rgba(102,187,106,0.32);
        box-shadow : 0 1px 6px rgba(0,0,0,0.35);
    }
    .ecla-compte .ecla-tips .ecla-tips-badge,
    .ecla-abonne-reg .ecla-tips .ecla-tips-badge {
        color : #10202a;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ecla-tips .ecla-tips-item.is-active { animation: none; }
    .ecla-tips .ecla-tips-arrow,
    .ecla-tips .ecla-tips-btn { transition: none; }
}