/* ════════════════════════════════════════════════════════════════════
   JETONS DE DESIGN (design tokens) — palette NEUTRE du cœur FlexQuiz.

   Aucune couleur, forme ou typographie de ce bloc n'est liée à un univers
   particulier : FlexQuiz doit pouvoir servir un quiz d'histoire, de code ou
   de géographie sans rien changer.

   Une « apparence » (skin) fournie par un pack surcharge ces jetons via
   .fq-skin--<id>, sans jamais toucher aux règles ci-dessous.
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* — Couleurs d'action — */
    --fq-primary:        #4338CA;   /* couleur principale : boutons, focus, accents */
    --fq-primary-strong: #3730A3;   /* survol / état actif */
    --fq-primary-soft:   #EEF2FF;   /* fond teinté léger */
    --fq-primary-ink:    #FFFFFF;   /* texte posé sur --fq-primary */
    --fq-accent:         #F59E0B;   /* second accent : jauges, mises en avant */

    /* — Surfaces et texte — */
    --fq-ink:            #1F2937;   /* texte principal */
    --fq-ink-soft:       var(--fq-ink-soft);   /* texte secondaire */
    --fq-surface:        #FFFFFF;   /* fond des cartes */
    --fq-surface-2:      #F5F5F5;   /* fond alternatif */
    --fq-border:         #E0E0E0;

    /* — En-tête (dégradé) — */
    --fq-header-from:    #1F2937;
    --fq-header-to:      #374151;
    --fq-header-ink:     #FFFFFF;
    --fq-header-accent:  #FBBF24;   /* accent LISIBLE sur le dégradé d'en-tête */

    /* — États sémantiques — */
    --fq-success:        #27AE60;
    --fq-success-soft:   var(--fq-success-soft);
    --fq-success-ink:    var(--fq-success-ink);
    --fq-danger:         #E74C3C;
    --fq-danger-soft:    var(--fq-danger-soft);
    --fq-danger-ink:     var(--fq-danger-ink);
    --fq-warning:        #F59E0B;
    --fq-warning-soft:   var(--fq-warning-soft);
    --fq-info:           #2E75B6;

    /* — Formes et typographie — */
    --fq-radius:         12px;
    --fq-radius-sm:      8px;
    --fq-shadow:         0 4px 20px rgba(0,0,0,0.10);
    --fq-border-width:   2px;
    /* Taille de référence en PIXELS : rend FlexQuiz immunisé aux thèmes
       qui réduisent la racine (html { font-size: 62.5% } très répandu chez
       les constructeurs de page). Toutes les tailles internes sont en em,
       donc relatives à cette base — jamais à la racine du thème. */
    --fq-font-size:      17px;
    --fq-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fq-font-display:   var(--fq-font);
    --fq-letter-spacing: normal;
    --fq-transition:     0.2s ease;

    /* — Alias de compatibilité (anciens noms, conservés pour ne rien casser) — */
    --fq-red:       var(--fq-primary);
    --fq-yellow:    var(--fq-accent);
    --fq-dark:      var(--fq-ink);
    --fq-blue:      var(--fq-info);
    --fq-green:     var(--fq-success);
    --fq-error:     var(--fq-danger);
    --fq-gray:      var(--fq-surface-2);
    --fq-white:     var(--fq-surface);
}
/* ════════════════════════════════════════════════════════════════════
   CLASSES UTILITAIRES — pour votre constructeur de page (Bricks, etc.)

   Ces classes appliquent les couleurs, formes et typographies de
   l'apparence ACTIVE à n'importe quel élément de votre site : un
   conteneur Bricks, une section, un bouton, votre balise <main>…
   Elles suivent automatiquement le changement d'apparence.

   Exemple dans Bricks : donnez la classe « fq-bg-alt » à votre <main>
   et son fond suivra l'apparence choisie, sans CSS à écrire.
   ════════════════════════════════════════════════════════════════════ */

/* — Fonds — */
.fq-bg              { background: var(--fq-surface) !important; }
.fq-bg-alt          { background: var(--fq-surface-2) !important; }
.fq-bg-primary      { background: var(--fq-primary) !important; color: var(--fq-primary-ink) !important; }
.fq-bg-primary-soft { background: var(--fq-primary-soft) !important; }
.fq-bg-accent       { background: var(--fq-accent) !important; }
.fq-bg-ink          { background: var(--fq-ink) !important; color: var(--fq-surface) !important; }
.fq-bg-header       { background: linear-gradient(135deg, var(--fq-header-from) 0%, var(--fq-header-to) 100%) !important;
                      color: var(--fq-header-ink) !important; }
.fq-bg-success      { background: var(--fq-success-soft) !important; color: var(--fq-success-ink) !important; }
.fq-bg-danger       { background: var(--fq-danger-soft) !important; color: var(--fq-danger-ink) !important; }

/* — Textes — */
.fq-text            { color: var(--fq-ink) !important; }
.fq-text-soft       { color: var(--fq-ink-soft) !important; }
.fq-text-primary    { color: var(--fq-primary) !important; }
.fq-text-accent     { color: var(--fq-accent) !important; }
.fq-text-on-dark    { color: var(--fq-header-ink) !important; }
.fq-text-on-header  { color: var(--fq-header-accent) !important; }

/* — Bordures, formes, ombres — */
.fq-border          { border: var(--fq-border-width) solid var(--fq-border) !important; }
.fq-border-primary  { border: var(--fq-border-width) solid var(--fq-primary) !important; }
.fq-rounded         { border-radius: var(--fq-radius) !important; }
.fq-rounded-sm      { border-radius: var(--fq-radius-sm) !important; }
.fq-rounded-pill    { border-radius: 999px !important; }
.fq-shadow          { box-shadow: var(--fq-shadow) !important; }

/* — Typographie — */
.fq-font            { font-family: var(--fq-font) !important; letter-spacing: var(--fq-letter-spacing) !important; }
.fq-font-display    { font-family: var(--fq-font-display) !important; }

/* — Composants prêts à l'emploi — */
.fq-card {
    background: var(--fq-surface);
    border: var(--fq-border-width) solid var(--fq-border);
    border-radius: var(--fq-radius);
    box-shadow: var(--fq-shadow);
    padding: 22px;
}
.fq-button {
    display: inline-block;
    font-family: var(--fq-font);
    background: var(--fq-primary);
    color: var(--fq-primary-ink);
    border: none;
    border-radius: var(--fq-radius-sm);
    padding: 12px 22px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--fq-transition);
}
.fq-button:hover { background: var(--fq-primary-strong); color: var(--fq-primary-ink); }

/* — Liseré décoratif aux couleurs de l'apparence — */
.fq-accent-bar {
    height: 6px;
    border: 0;
    background: linear-gradient(90deg, var(--fq-primary) 0%, var(--fq-accent) 100%);
    border-radius: 999px;
}