/* =====================================================================
   CHARTE GRAPHIQUE EBRIOO — Voie 1 (fidélité à l'identité existante)
   Source : extraction du custom.css du site Joomla actuel.
   Branché dans le thème WordPress « ebrioo ». Les couleurs/polices de
   base sont aussi déclarées dans theme.json (source de vérité côté blocs) ;
   ce fichier expose les VARIABLES (réutilisables par le plugin catalogue)
   et les COMPOSANTS signature (liseré, boutons, carte formation).
   ===================================================================== */

:root {

  /* --- COULEURS DE MARQUE ------------------------------------------- */
  --eb-magenta:        #E5239C;  /* couleur signature : titres de page, accents forts */
  --eb-violet:         #501E96;  /* boutons (haut de dégradé), titres secondaires */
  --eb-prune:          #A31770;  /* boutons (bas de dégradé), magenta foncé */
  --eb-turquoise:      #46B5AA;  /* couleur secondaire : liserés, accents doux */

  /* --- NEUTRES ------------------------------------------------------ */
  --eb-gris-fonce:     #323532;  /* texte principal, titres */
  --eb-gris-vert:      #829696;  /* sous-titres, texte secondaire */
  --eb-gris-clair:     #C3C8CC;  /* fonds doux, dégradés légers */
  --eb-gris-tres-clair:#F9F9FC;  /* fonds de section alternés */
  --eb-blanc:          #FEFEFE;  /* texte sur fond coloré, fonds */

  /* --- ÉTATS / INTERACTIONS ----------------------------------------- */
  --eb-orange-hover:   #ED7720;  /* survol des liens : touche d'énergie */

  /* --- RÔLES SÉMANTIQUES -------------------------------------------- */
  --eb-primary:        var(--eb-magenta);
  --eb-primary-dark:   var(--eb-prune);
  --eb-secondary:      var(--eb-turquoise);
  --eb-text:           var(--eb-gris-fonce);
  --eb-text-muted:     var(--eb-gris-vert);
  --eb-link:           var(--eb-magenta);
  --eb-link-hover:     var(--eb-orange-hover);
  --eb-surface:        var(--eb-blanc);
  --eb-surface-alt:    var(--eb-gris-tres-clair);

  /* --- TYPOGRAPHIE -------------------------------------------------- */
  --eb-font-base:  "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --eb-font-head:  "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --eb-fs-base:    16px;
  --eb-lh-base:    1.6;

  /* --- RAYONS, OMBRES, ESPACEMENTS ---------------------------------- */
  --eb-radius:        6px;
  --eb-radius-card:   12px;
  --eb-radius-liseret:0 5px 5px 0;  /* coins arrondis à droite uniquement (motif signature) */
  --eb-shadow-soft:   10px 20px 10px 0 rgba(195, 200, 204, 0.5);
}


/* =====================================================================
   MOTIF SIGNATURE — LE LISERÉ COLORÉ À GAUCHE
   ===================================================================== */
.eb-liseret {
  border-radius: var(--eb-radius-liseret);
  box-shadow:
    inset 4px 0 0 0 var(--eb-turquoise),
    var(--eb-shadow-soft);
  background: var(--eb-surface);
  padding: 16px 20px;
}
.eb-liseret--magenta {
  box-shadow:
    inset 4px 0 0 0 var(--eb-magenta),
    var(--eb-shadow-soft);
}


/* =====================================================================
   BOUTONS (dégradé violet -> prune) — version utilitaire réutilisable
   ===================================================================== */
.eb-btn {
  display: inline-block;
  cursor: pointer;
  font-family: var(--eb-font-head);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  padding: 9px 25px;
  border: 1px solid #94216a;
  border-radius: var(--eb-radius);
  background: linear-gradient(to bottom, var(--eb-violet) 5%, var(--eb-prune) 100%);
  text-decoration: none;
  transition: background 0.2s ease;
}
.eb-btn:hover {
  color: #ffffff;
  background: linear-gradient(to bottom, var(--eb-prune) 5%, var(--eb-violet) 100%);
}
.eb-btn--secondary {
  background: var(--eb-turquoise);
  border-color: #2f8c83;
}
.eb-btn--secondary:hover { background: #3a9890; }


/* =====================================================================
   CARTE FORMATION (catalogue Form.dev) — réutilise le liseré signature
   ===================================================================== */
.eb-formation-card {
  border-radius: var(--eb-radius-liseret);
  box-shadow:
    inset 4px 0 0 0 var(--eb-turquoise),
    var(--eb-shadow-soft);
  background: var(--eb-surface);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.eb-formation-card__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--eb-gris-fonce);
  margin: 0 0 4px;
}
.eb-formation-card__meta {
  font-size: 14px;
  color: var(--eb-gris-vert);
  margin: 0 0 12px;
}