/* ==========================================================================
   FASTGF — PASSERELLE BOOTSTRAP → FASTGF
   --------------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE.

   Azuriom et ses plugins produisent du HTML qu'un theme ne controle pas
   entierement : la modale d'un article, les messages de session, la
   pagination, les formulaires renvoyes par une passerelle de paiement, les
   vues d'un plugin installe demain. Toutes ces surfaces-la sont ecrites en
   classes Bootstrap 5.

   Refaire chaque vue a la main serait tenable aujourd'hui, et faux des la
   prochaine mise a jour d'Azuriom : une vue non surchargee reviendrait en
   Bootstrap brut au milieu du site. On traduit donc le VOCABULAIRE, une fois
   pour toutes. Une page jamais touchee par ce theme sort quand meme en
   FastGF.

   REGLE DE LECTURE : rien ici n'invente une couleur. Tout vient des jetons
   de `fastgf.css`, c'est-a-dire du site principal.
   ========================================================================== */

/* ==================== LES VARIABLES DE BOOTSTRAP ====================
   Bootstrap 5.3 calcule l'essentiel de son rendu a partir de ces variables.
   Les redefinir sur :root corrige d'un coup des dizaines de composants
   qu'on n'aurait jamais pense a surcharger. */

:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --bs-body-bg: transparent;
    --bs-body-bg-rgb: 9, 8, 20;
    --bs-body-color: var(--texte-doux);
    --bs-body-color-rgb: 168, 162, 196;
    --bs-emphasis-color: var(--texte);
    --bs-secondary-color: var(--texte-doux);
    --bs-tertiary-color: var(--texte-faible);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface);

    --bs-primary: #A855F7;
    --bs-primary-rgb: 168, 85, 247;
    --bs-primary-text-emphasis: var(--violet-clair);
    --bs-primary-bg-subtle: rgba(168, 85, 247, .14);
    --bs-primary-border-subtle: var(--bord-fort);

    --bs-secondary: #1C1832;
    --bs-secondary-rgb: 28, 24, 50;
    --bs-success: #34D399;
    --bs-success-rgb: 52, 211, 153;
    --bs-danger: #F05B6B;
    --bs-danger-rgb: 240, 91, 107;
    --bs-warning: #F2B33D;
    --bs-warning-rgb: 242, 179, 61;
    --bs-info: #6FA8FF;
    --bs-info-rgb: 111, 168, 255;
    --bs-light: #EFEDF8;
    --bs-light-rgb: 239, 237, 248;
    --bs-dark: #0D0B1A;
    --bs-dark-rgb: 13, 11, 26;

    --bs-border-color: var(--bord);
    --bs-border-color-translucent: var(--bord-clair);
    --bs-border-radius: var(--r-m);
    --bs-border-radius-sm: var(--r-s);
    --bs-border-radius-lg: var(--r-l);
    --bs-border-radius-xl: var(--r-xl);

    --bs-link-color: var(--violet-clair);
    --bs-link-color-rgb: 201, 165, 255;
    --bs-link-hover-color: var(--bleu-clair);
    --bs-link-hover-color-rgb: 111, 168, 255;

    --bs-heading-color: var(--texte);
    --bs-code-color: var(--violet-clair);
    --bs-highlight-bg: rgba(242, 179, 61, .2);

    --bs-form-control-bg: var(--noir);
    --bs-form-control-disabled-bg: var(--surface);

    --bs-focus-ring-color: rgba(168, 85, 247, .25);
    --bs-focus-ring-width: 3px;

    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==================== LE FOND ====================

   IL AVAIT DISPARU, ET C'ETAIT MA FAUTE.

   Cette regle disait `background-color: transparent !important` pour laisser
   passer les deux halos de `fastgf.css`. Sauf que ces halos vivent sur
   `body::before` et `body::after`, en `z-index` negatif : ils ont besoin
   d'une couleur DERRIERE eux. Le corps rendu transparent, et `html` n'en
   ayant pas non plus, le navigateur peignait sa toile par defaut — du blanc.
   On voyait donc les halos violets flotter sur un fond clair, et la boutique
   ne ressemblait plus du tout a fastgf.fr.

   On repose donc le fond profond du site, et l'on se contente de neutraliser
   les classes utilitaires de Bootstrap qu'Azuriom ajoute parfois sur <body>
   (`bg-body-secondary` sur la mise en page par defaut). */
body,
body.bg-body-secondary,
body.bg-light,
body.bg-white {
    background-color: var(--fond) !important;
    background-image: none;
}

/* ==================== CONTENEURS ====================
   Azuriom met tout dans `.container`. On l'aligne sur `.wrap` pour que les
   pages surchargees et les pages natives partagent la meme gouttiere. */

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    width: min(100% - 2.5rem, var(--largeur));
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-inline: auto;
}

/* Une ligne Bootstrap dans un conteneur sans gouttiere deborderait de la
   moitie de son `--bs-gutter-x`. On compense sur la ligne, pas sur le
   conteneur : c'est la seule facon de garder `.wrap` et `.container`
   exactement alignes. */
.row { --bs-gutter-x: 1.5rem; }

/* La zone de contenu de `layouts/app`. La barre de navigation est fixe :
   sans ce decalage, le premier titre de chaque page passerait dessous. */
.contenu {
    padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
    min-height: 60vh;
}
/* Les vues d'Azuriom posent un <h1> nu juste apres l'ouverture du contenu.
   On lui donne ici le rythme du site principal plutot que de reecrire
   chacune de ces vues. */
.contenu > .wrap > h1 { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* ==================== CARTES ==================== */

.card {
    position: relative;
    background: linear-gradient(160deg, var(--surface) 0%, var(--fond-2) 100%);
    border: 1px solid var(--bord);
    border-radius: var(--r-l);
    box-shadow: var(--biseau), var(--ombre);
    overflow: hidden;
    isolation: isolate;
    color: var(--texte-doux);
    transition: transform .5s var(--douce), border-color .4s, box-shadow .5s var(--douce);
}
/* Le halo sous le curseur et l'arete eclairee, comme sur `.carte`. */
.card::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
        22rem 22rem at var(--mx, 50%) var(--my, 50%),
        rgba(168,85,247,.28), rgba(47,125,246,.10) 42%, transparent 68%);
    opacity: 0;
    transition: opacity .45s var(--net);
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--bord-fort); box-shadow: var(--biseau-fort), var(--ombre-haute); }

.card-body { padding: 1.7rem; }
.card-title { color: var(--texte); font-family: 'Outfit', sans-serif; letter-spacing: -.03em; }
.card-subtitle { color: var(--texte-doux); }
.card-text { color: var(--texte-doux); }
.card-header {
    padding: 1rem 1.7rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--texte);
    background: rgba(255,255,255,.035);
    border-bottom: 1px solid var(--bord-clair);
}
.card-footer {
    padding: .9rem 1.7rem;
    font-size: .85rem;
    color: var(--texte-faible);
    background: rgba(0,0,0,.25);
    border-top: 1px solid var(--bord-clair);
}
.card-img-top {
    border-radius: 0;
    object-fit: cover;
    transition: transform .6s var(--douce);
}
.card:hover .card-img-top { transform: scale(1.04); }

/* ==================== BOUTONS ====================
   On reprend la geometrie et la matiere de `.btn` FastGF, en gardant la
   semantique Bootstrap (primary / secondary / danger…). */

/* ==================== BOUTONS ====================

   IL N'Y A PLUS DE REGLE `.btn` ICI, ET C'EST LE CORRECTIF LE PLUS IMPORTANT
   DE CE FICHIER.

   `.btn` est le seul nom de classe que Bootstrap et FastGF partagent. Ce
   fichier se chargeant APRES `fastgf.css`, sa regle `.btn` — meme poids,
   position plus tardive — gagnait sur TOUTES les variantes du theme. Elle
   reposait `background: var(--surface-2)` par-dessus `.btn--payer` et
   `.btn--danger`, qui ont exactement le meme poids (une classe) : le bouton
   « Procéder au paiement » et le bouton « Vider le panier » ressortaient
   donc gris, identiques a tous les autres. C'est precisement ce qui se
   voyait sur la page du panier.

   La base `.btn` vit desormais dans `fastgf.css`, une seule fois. Ce fichier
   ne s'occupe plus que des VARIANTES de couleur de Bootstrap (`.btn-primary`,
   `.btn-danger`…), qui portent un autre nom de classe et n'entrent donc en
   conflit avec rien.

   Les tailles restent ici : `.btn-sm` et `.btn-lg` sont du vocabulaire
   Bootstrap pur, le theme n'en definit pas d'equivalent. */

.btn-sm { padding: .45rem .9rem; font-size: .82rem; border-radius: var(--r-s); }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }

/* LE MEME CODE COULEUR QUE LE THEME, ET POUR LA MEME RAISON.
   Violet = ce qui fait avancer ; vert = ce qui conclut un paiement ;
   rouge = ce qui retire ou annule. Une vue d'Azuriom qu'on n'a pas
   surchargee doit parler la meme langue que celles qu'on a redessinees,
   sinon le bouton « Payer » d'une passerelle ressemble a celui qui vide le
   panier. */
.btn-primary,
.btn-info {
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-fonce) 55%, var(--bleu) 130%);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--biseau-fort), 0 14px 34px -14px rgba(168,85,247,.9);
}
.btn-primary:hover, .btn-primary:focus-visible,
.btn-info:hover, .btn-info:focus-visible {
    background: linear-gradient(135deg, var(--violet) 0%, var(--violet-fonce) 55%, var(--bleu) 130%);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--biseau-fort), 0 22px 50px -16px rgba(168,85,247,1);
}

/* Vert : conclure. C'est la couleur du bouton de paiement. */
.btn-success {
    background: linear-gradient(135deg, #34D399 0%, #0E9F6E 55%, #2F7DF6 150%);
    border-color: transparent;
    color: #04231A;
    box-shadow: var(--biseau-fort), 0 14px 34px -14px rgba(52,211,153,.9);
}
.btn-success:hover, .btn-success:focus-visible {
    border-color: transparent;
    color: #04231A;
    box-shadow: var(--biseau-fort), 0 22px 50px -16px rgba(52,211,153,1);
}

/* Le reflet qui balaie au survol. Une seule passe, jamais une boucle. */
.btn-primary::before,
.btn-success::before,
.btn-info::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .75s var(--douce);
}
.btn-primary:hover::before,
.btn-success:hover::before,
.btn-info:hover::before { transform: translateX(130%); }

.btn-secondary,
.btn-light,
.btn-dark {
    background: var(--surface-2);
    border-color: var(--bord-fort);
    color: var(--texte);
}
.btn-secondary:hover, .btn-light:hover, .btn-dark:hover {
    background: var(--surface-3);
    border-color: var(--violet);
    color: var(--texte);
}

/* Rouge : retirer, vider, annuler. Plein, pas teinte — un bouton
   destructeur doit se reconnaitre avant d'etre lu. */
.btn-danger {
    background: linear-gradient(135deg, #E5484D 0%, #B32731 100%);
    border-color: rgba(255,120,130,.5);
    color: #fff;
    box-shadow: var(--biseau-fort), 0 12px 28px -14px rgba(229,72,77,.85);
}
.btn-danger:hover, .btn-danger:focus-visible {
    background: linear-gradient(135deg, #E5484D 0%, #B32731 100%);
    border-color: #FF8A93;
    color: #fff;
    box-shadow: var(--biseau-fort), 0 20px 46px -16px rgba(229,72,77,1);
}

.btn-warning {
    background: rgba(242,179,61,.15);
    border-color: rgba(242,179,61,.45);
    color: #FFE3B0;
}
.btn-warning:hover { background: rgba(242,179,61,.22); border-color: var(--or); color: #fff; }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
    background: rgba(255,255,255,.03);
    border-color: var(--bord-fort);
    color: var(--texte);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-light:hover, .btn-outline-dark:hover {
    background: rgba(168,85,247,.14);
    border-color: var(--violet);
    color: var(--texte);
}
.btn-outline-danger {
    background: rgba(240,91,107,.06);
    border-color: rgba(240,91,107,.4);
    color: #FFC9CC;
}
.btn-outline-danger:hover { background: rgba(240,91,107,.18); border-color: var(--rouge); color: #fff; }

.btn-link {
    background: none;
    border-color: transparent;
    box-shadow: none;
    color: var(--violet-clair);
    text-decoration: none;
}
.btn-link:hover { background: none; box-shadow: none; color: var(--bleu-clair); border-color: transparent; }

.btn-close {
    filter: none;
    opacity: .65;
    background: transparent;
    border: 0;
    box-shadow: none;
    width: 1.1em; height: 1.1em;
    padding: .5em;
    border-radius: var(--r-s);
    /* La croix de Bootstrap est une image SVG noire : sur fond sombre elle
       disparait. On la redessine en clair plutot que d'appliquer un filtre
       d'inversion, qui salit toujours les bords. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EFEDF8'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
    transition: opacity .25s var(--net), background-color .25s var(--net);
}
.btn-close:hover { opacity: 1; background-color: rgba(255,255,255,.08); }

/* ==================== FORMULAIRES ==================== */

.form-label { font-size: .82rem; font-weight: 650; color: var(--texte-doux); margin-bottom: .45rem; }

.form-control,
.form-select {
    padding: .75rem 1rem;
    font-size: .95rem;
    color: var(--texte);
    background-color: var(--noir);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
    box-shadow: var(--biseau);
    transition: border-color .3s, box-shadow .3s;
}
.form-control:focus,
.form-select:focus {
    color: var(--texte);
    background-color: var(--noir);
    border-color: var(--violet);
    box-shadow: var(--biseau), 0 0 0 3px rgba(168,85,247,.18);
    outline: 0;
}
.form-control::placeholder { color: var(--texte-faible); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface); opacity: .6; }
.form-control-sm, .form-select-sm { padding: .45rem .7rem; font-size: .85rem; border-radius: var(--r-s); }
.form-select {
    /* Le chevron de Bootstrap est noir : invisible ici. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A8A2C4'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px 12px;
    padding-right: 2.5rem;
}
.form-select option { background: var(--surface); color: var(--texte); }

.form-check-input {
    background-color: var(--noir);
    border: 1px solid var(--bord-fort);
    box-shadow: var(--biseau);
}
.form-check-input:checked {
    background-color: var(--violet);
    border-color: var(--violet);
    box-shadow: 0 0 14px rgba(168,85,247,.55);
}
.form-check-input:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(168,85,247,.2);
}
.form-check-label { color: var(--texte-doux); font-size: .9rem; }
.form-text { color: var(--texte-faible); font-size: .78rem; }

.input-group > .form-control,
.input-group > .form-select { box-shadow: var(--biseau); }
.input-group > :not(:first-child):not(.dropdown-menu):not(.form-floating) { margin-left: -1px; }
.input-group-text {
    color: var(--texte-doux);
    background: var(--surface-2);
    border: 1px solid var(--bord);
    border-radius: var(--r-m);
}
.input-group .btn { border-radius: 0 var(--r-m) var(--r-m) 0; }
.input-group > :first-child { border-radius: var(--r-m) 0 0 var(--r-m); }

.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--rouge) !important; background-image: none; }
.invalid-feedback { color: #FFC9CC; font-size: .82rem; }
.valid-feedback { color: var(--vert); font-size: .82rem; }

/* ==================== TABLEAUX ==================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--texte-doux);
    --bs-table-border-color: var(--bord-clair);
    --bs-table-striped-bg: rgba(255,255,255,.02);
    --bs-table-striped-color: var(--texte-doux);
    --bs-table-hover-bg: rgba(168,85,247,.06);
    --bs-table-hover-color: var(--texte);
    font-size: .9rem;
    margin-bottom: 0;
    vertical-align: middle;
}
.table > :not(caption) > * > * { padding: .8rem 1.1rem; }
.table thead th,
.table > thead > tr > th {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texte-faible);
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid var(--bord-clair);
}
/* Azuriom pose `table-dark` sur ses en-tetes ; l'aplat noir de Bootstrap
   jure avec la carte qui l'entoure. */
.table .table-dark,
.table > thead.table-dark > tr > th {
    --bs-table-bg: rgba(255,255,255,.025);
    --bs-table-color: var(--texte-faible);
    background: rgba(255,255,255,.025);
    color: var(--texte-faible);
}
.table tbody th { color: var(--texte); font-weight: 650; }
.table tbody tr { transition: background .25s var(--net); }
.table > :not(:first-child) { border-top: 0; }

.table-responsive {
    border-radius: var(--r-m);
    overscroll-behavior-x: contain;
}

/* ==================== ALERTES ==================== */

.alert {
    padding: .95rem 1.2rem;
    font-size: .92rem;
    border: 1px solid;
    border-radius: var(--r-m);
    box-shadow: var(--biseau);
}
.alert-success { color: #BFF3D8; background: rgba(52,211,153,.11);  border-color: rgba(52,211,153,.32); }
.alert-danger  { color: #FFC9CC; background: rgba(240,91,107,.11);  border-color: rgba(240,91,107,.34); }
.alert-warning { color: #FFE3B0; background: rgba(242,179,61,.11);  border-color: rgba(242,179,61,.32); }
.alert-info    { color: #CFE2FF; background: rgba(111,168,255,.11); border-color: rgba(111,168,255,.32); }
.alert-primary { color: var(--violet-clair); background: rgba(168,85,247,.11); border-color: var(--bord-fort); }
.alert-secondary { color: var(--texte-doux); background: rgba(255,255,255,.04); border-color: var(--bord-clair); }
.alert .btn-close { padding: 1.05rem; }

/* ==================== BADGES ==================== */

.badge {
    padding: .32rem .62rem;
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    border-radius: 999px;
}
.badge.bg-primary, .badge.text-bg-primary { background: rgba(168,85,247,.18) !important; color: var(--violet-clair) !important; }
.badge.bg-success, .badge.text-bg-success { background: rgba(52,211,153,.16) !important; color: var(--vert) !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: rgba(240,91,107,.16) !important; color: #FFC9CC !important; }
.badge.bg-warning, .badge.text-bg-warning { background: rgba(242,179,61,.16) !important; color: var(--or) !important; }
.badge.bg-info,    .badge.text-bg-info    { background: rgba(111,168,255,.16) !important; color: var(--bleu-clair) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: rgba(255,255,255,.07) !important; color: var(--texte-doux) !important; }

/* ==================== MODALES ====================
   La modale de l'article est la vue la plus vue de la boutique : c'est elle
   qui s'ouvre a chaque clic sur un produit. */

.modal-backdrop { --bs-backdrop-bg: #030208; --bs-backdrop-opacity: .82; }
.modal-backdrop.show { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-content {
    background: linear-gradient(160deg, var(--surface) 0%, var(--fond-2) 100%);
    border: 1px solid var(--bord-fort);
    border-radius: var(--r-l);
    box-shadow: var(--biseau-fort), var(--ombre-haute);
    color: var(--texte-doux);
}
.modal-header {
    padding: 1.4rem 1.7rem;
    border-bottom: 1px solid var(--bord-clair);
}
.modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--texte);
}
.modal-body { padding: 1.7rem; }
.modal-footer {
    padding: 1.2rem 1.7rem;
    gap: .7rem;
    border-top: 1px solid var(--bord-clair);
    background: rgba(0,0,0,.22);
}
.modal.fade .modal-dialog { transform: translateY(24px) scale(.97); transition: transform .45s var(--douce); }
.modal.show .modal-dialog { transform: none; }

/* ==================== MENUS DEROULANTS ==================== */

.dropdown-menu {
    --bs-dropdown-bg: var(--surface-2);
    --bs-dropdown-color: var(--texte-doux);
    --bs-dropdown-link-color: var(--texte-doux);
    --bs-dropdown-link-hover-color: var(--texte);
    --bs-dropdown-link-hover-bg: rgba(168,85,247,.12);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--violet-fonce);
    --bs-dropdown-header-color: var(--texte-faible);
    --bs-dropdown-border-color: var(--bord-fort);
    --bs-dropdown-border-radius: var(--r-m);
    background: linear-gradient(160deg, var(--surface-2), var(--fond-2));
    box-shadow: var(--biseau), var(--ombre);
    padding: .5rem;
}
.dropdown-item {
    border-radius: var(--r-s);
    font-size: .88rem;
    font-weight: 600;
    padding: .55rem .75rem;
    transition: background .22s var(--net), color .22s var(--net), transform .25s var(--douce);
}
.dropdown-item:hover { transform: translateX(3px); }
.dropdown-divider { border-color: var(--bord-clair); }

/* ==================== GROUPES DE LISTE ====================
   C'est la liste des categories de la boutique : le composant le plus
   structurant de la colonne de gauche. */

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--texte-doux);
    --bs-list-group-border-color: var(--bord);
    --bs-list-group-border-radius: var(--r-m);
    --bs-list-group-action-hover-color: var(--texte);
    --bs-list-group-action-hover-bg: rgba(168,85,247,.10);
    --bs-list-group-active-bg: transparent;
    --bs-list-group-active-border-color: var(--bord-fort);
    --bs-list-group-active-color: var(--texte);
    gap: .35rem;
}
.list-group-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .78rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texte-doux);
    background: linear-gradient(150deg, var(--surface), var(--fond-2));
    border: 1px solid var(--bord) !important;
    border-radius: var(--r-m) !important;
    box-shadow: var(--biseau);
    transition: color .25s var(--net), background .3s var(--net),
                border-color .3s var(--net), transform .35s var(--douce);
}
a.list-group-item:hover {
    color: var(--texte);
    border-color: var(--bord-fort) !important;
    transform: translateX(4px);
}
.list-group-item.active {
    color: var(--texte);
    background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(47,125,246,.12));
    border-color: var(--violet) !important;
    box-shadow: var(--biseau-fort), 0 12px 30px -18px rgba(168,85,247,.9);
}
.list-group-flush > .list-group-item { border-radius: var(--r-m) !important; }

/* ==================== BARRE DE PROGRESSION ==================== */

.progress {
    height: 10px;
    background: var(--noir);
    border: 1px solid var(--bord);
    border-radius: 999px;
    box-shadow: var(--biseau);
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, var(--violet), var(--bleu));
    box-shadow: 0 0 14px rgba(168,85,247,.7);
}
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,.14) 25%, transparent 25%,
                      transparent 50%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.14) 75%,
                      transparent 75%, transparent);
}

/* ==================== PAGINATION ==================== */

.pagination {
    --bs-pagination-bg: var(--surface);
    --bs-pagination-color: var(--texte-doux);
    --bs-pagination-border-color: var(--bord);
    --bs-pagination-hover-bg: rgba(168,85,247,.14);
    --bs-pagination-hover-color: var(--texte);
    --bs-pagination-hover-border-color: var(--bord-fort);
    --bs-pagination-active-bg: var(--violet-fonce);
    --bs-pagination-active-border-color: var(--violet);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: var(--fond-2);
    --bs-pagination-disabled-color: var(--texte-faible);
    --bs-pagination-disabled-border-color: var(--bord);
    gap: .3rem;
}
.page-link {
    border-radius: var(--r-s) !important;
    font-weight: 650;
    box-shadow: var(--biseau);
    transition: background .25s var(--net), color .25s var(--net), transform .3s var(--douce);
}
.page-link:hover { transform: translateY(-2px); }

/* ==================== ONGLETS ==================== */

.nav-tabs {
    border-bottom: 1px solid var(--bord);
    gap: .3rem;
}
.nav-tabs .nav-link {
    color: var(--texte-doux);
    font-weight: 650;
    border: 1px solid transparent;
    border-radius: var(--r-s) var(--r-s) 0 0;
}
.nav-tabs .nav-link:hover { color: var(--texte); border-color: var(--bord-clair); background: rgba(168,85,247,.07); }
.nav-tabs .nav-link.active {
    color: var(--texte);
    background: var(--surface);
    border-color: var(--bord) var(--bord) transparent;
}
.nav-pills .nav-link { color: var(--texte-doux); border-radius: var(--r-s); font-weight: 650; }
.nav-pills .nav-link.active { background: var(--violet-fonce); color: #fff; }

/* ==================== DIVERS ==================== */

.breadcrumb { --bs-breadcrumb-divider-color: var(--texte-faible); font-size: .86rem; }
.breadcrumb-item.active { color: var(--texte-doux); }

.spinner-border, .spinner-grow { color: var(--violet-clair); }

.tooltip-inner {
    background: var(--surface-2);
    color: var(--texte);
    border: 1px solid var(--bord);
    border-radius: var(--r-s);
    box-shadow: var(--biseau), var(--ombre-douce);
    font-size: .8rem;
}
.tooltip .tooltip-arrow::before { border-top-color: var(--surface-2); border-bottom-color: var(--surface-2); }

.popover {
    background: var(--surface-2);
    border-color: var(--bord-fort);
    border-radius: var(--r-m);
}
.popover-header { background: rgba(255,255,255,.04); color: var(--texte); border-bottom-color: var(--bord-clair); }
.popover-body { color: var(--texte-doux); }

.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--texte-doux);
    --bs-accordion-border-color: var(--bord);
    --bs-accordion-btn-color: var(--texte);
    --bs-accordion-btn-bg: var(--surface);
    --bs-accordion-active-bg: rgba(168,85,247,.1);
    --bs-accordion-active-color: var(--texte);
    --bs-accordion-border-radius: var(--r-m);
}

.text-body-secondary, .text-muted { color: var(--texte-faible) !important; }
.text-dark, .text-black { color: var(--texte) !important; }
.bg-dark, .bg-body-tertiary, .bg-body-secondary { background-color: var(--surface) !important; }
.bg-light, .bg-white { background-color: var(--surface-2) !important; }
.text-bg-dark { background-color: var(--surface) !important; color: var(--texte) !important; }
.border { border-color: var(--bord) !important; }

del { color: var(--texte-faible); }

/* Les avatars et images de joueur : Minecraft rend en 8×8, un lissage les
   transformerait en taches. */
img[src*="avatar"], img[src*="head"], img[src*="skin"] { image-rendering: pixelated; }

/* L'alerte de statut injectee par script.js (createAlert) atterrit ici. */
#status-message:not(:empty) { margin-bottom: 1.5rem; }

/* La modale d'un article : l'image de tete, quand le produit en a une. */
.modal-body img { border-radius: var(--r-m); }
.modal-body :is(h1,h2,h3,h4,h5,h6) { margin: 1.2rem 0 .6rem; }
.modal-body :is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; }
.modal-body ul, .modal-body ol { padding-left: 1.3rem; }
.modal-body li { margin-bottom: .4rem; color: var(--texte-doux); }

@media (max-width: 620px) {
    .card-body { padding: 1.3rem; }
    .card-header, .card-footer { padding-left: 1.3rem; padding-right: 1.3rem; }
    .modal-header, .modal-body, .modal-footer { padding-left: 1.2rem; padding-right: 1.2rem; }
}