/**
 * Barra × Elementor — helpers
 * Ce fichier est chargé dans l'éditeur ET en front.
 * Il expose les classes Barra comme utilitaires réutilisables dans Elementor.
 */

/* ── Boutons ────────────────────────────────────────────────────────────── */
/* Dans Elementor : Bouton → CSS Classes → "btn-choco"  ou  "btn-pill" */
/* Les styles viennent déjà de barra.css, ce fichier ajoute juste du confort */

/* ── Typographie ──────────────────────────────────────────────────────────
   Dans Elementor → Style → Typographie → saisir la font manuellement :
   - Titre display  : Outfit, 700-800
   - Wordmark       : Resoty (chargée via barra.css)
   - Corps de texte : Sora, 400
*/

/* ── Classes utilitaires pour widgets Elementor ──────────────────────────
   Ajoutez ces classes dans "CSS Classes avancées" du widget
*/

/* Texte accent jaune */
.e-text-yellow  { color: var(--yellow)  !important; }
.e-text-choco   { color: var(--choco)   !important; }
.e-text-cream   { color: var(--cream)   !important; }
.e-text-orange  { color: var(--orange)  !important; }
.e-text-red     { color: var(--red)     !important; }

/* Fonds */
.e-bg-yellow    { background-color: var(--yellow)    !important; }
.e-bg-choco     { background-color: var(--choco)     !important; }
.e-bg-cream     { background-color: var(--cream)     !important; }
.e-bg-choco-card { background-color: var(--choco-card) !important; }

/* Section pleine hauteur avec fond sombre */
.e-section-dark {
    background-color: var(--choco);
    color: var(--cream);
}

/* Eyebrow (petit label au-dessus des titres) */
.e-eyebrow {
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 12px;
    display: block;
}

/* Titre de section avec soulignement accentué */
.e-section-title {
    font-family: var(--display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.e-section-title .accent {
    color: var(--yellow);
}

/* Chip / badge */
.e-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-family: var(--body);
    letter-spacing: 0.04em;
}

/* Card avec bordure chocolat */
.e-card-barra {
    background: var(--cream-soft);
    border: 3px solid var(--choco);
    border-radius: 32px;
    box-shadow: 0 6px 0 var(--choco);
    padding: 36px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.e-card-barra:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 var(--choco);
}
.e-card-barra.featured {
    background: var(--yellow);
}

/* Séparateur style Barra */
.e-sep-barra {
    border: none;
    border-top: 2px solid var(--choco);
    opacity: 0.15;
    margin: 40px 0;
}

/* Effet reveal au scroll (compatible avec Elementor Scroll Effects) */
.e-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.e-reveal.in,
.elementor-element.animated .e-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* ── Curseur custom sur les liens Elementor ──────────────────────────────
   Elementor génère des liens .elementor-button — on leur applique cursor:none
   pour cohérence avec le curseur custom Barra */
.elementor-button,
.elementor-widget-heading a,
.elementor-widget-image a {
    cursor: none;
}