/*
 * requavalid.css
 * Styles spécifiques à l'application Requavalid
 * Complète Bootstrap 5 sans le remplacer
 * Couleur signature : #2e5d34 (vert Requasud)
 */

/* ============================================================
   VARIABLES CSS
   ============================================================ */
:root {
    --rqs-green:        #2e5d34;
    --rqs-green-light:  #f4fbf5;
    --rqs-green-mid:    #c8e0cc;
    --rqs-red:          #c0392b;
    --rqs-red-light:    #fdf3f2;
    --rqs-amber:        #e6a817;
    --rqs-amber-light:  #fdf9ee;
    --rqs-text:         #222;
    --rqs-text-muted:   #555;
    --rqs-green-dark:   #1f4224;
    --rqs-info:         #3d6380;
    --rqs-info-light:   #f1f5f9;

    /* Couleur primaire Bootstrap → vert Requasud (liens, focus, composants « primary ») */
    --bs-primary:                 #2e5d34;
    --bs-primary-rgb:             46, 93, 52;
    --bs-primary-text-emphasis:   #1f4224;
    --bs-primary-bg-subtle:       #e3efe5;
    --bs-primary-border-subtle:   #c8e0cc;
    --bs-link-color:              #2e5d34;
    --bs-link-color-rgb:          46, 93, 52;
    --bs-link-hover-color:        #1f4224;
    --bs-link-hover-color-rgb:    31, 66, 36;
    --bs-focus-ring-color:        rgba(46, 93, 52, .35);
}

/* ============================================================
   HERO — section d'en-tête homepage
   ============================================================ */
.rqs-hero {
    position:            relative;
    height:              320px;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}
.rqs-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.rqs-hero__content {
    position:   relative;
    z-index:    1;
    height:     100%;
    display:    flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    text-align: center;
    padding:    0 1rem;
}
.rqs-hero__title {
    color:       #fff;
    font-size:   2.8rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    margin-bottom: .5rem;
}
.rqs-hero__subtitle {
    color:       rgba(255,255,255,.88);
    font-size:   1.15rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
    margin:      0;
}

/* ============================================================
   BANNIÈRE « CONTRÔLE AVANT LA BASE DE DONNÉES » (page d'accueil publique)
   Des enregistrements passent le contrôle Requavalid puis entrent dans la base
   centralisée. Rien n'identifie un laboratoire. Dessin : requavalid_home.js.
   ============================================================ */
.rqs-hero.rqs-hero--db {
    height:           340px;
    padding:          68px 0 0;
    /* fond clair, trame de points discrète (même famille que la page de connexion) */
    background-color: #f3f8f3;
    background-image: radial-gradient(rgba(46, 93, 52, .10) 1px, transparent 1.2px),
                      linear-gradient(120deg, #f7fbf7 0%, #e7f1e8 100%);
    background-size:  22px 22px, 100% 100%;
    border-bottom:    1px solid var(--rqs-green-mid);
}
.rqs-hero__canvas {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    display:  block;
}
.rqs-hero--db .rqs-hero__inner {
    position:    relative;
    z-index:     1;
    display:     flex;
    align-items: center;
    height:      100%;
}
.rqs-hero--db .rqs-hero__text {
    max-width: 46%;
}
.rqs-hero--db .rqs-hero__title {
    color:       var(--rqs-green);
    text-shadow: none;
}
.rqs-hero--db .rqs-hero__subtitle {
    color:       var(--rqs-text-muted);
    text-shadow: none;
}
/* le conteneur du titre laisse passer les clics vers le canvas (barre du contrôle = easter egg) */
.rqs-hero--db .rqs-hero__inner {
    pointer-events: none;
}
.rqs-hero--db .rqs-hero__text {
    pointer-events: auto;
}
@media (max-width: 767.98px) {
    /* sur téléphone : le titre en haut, le contrôle et la base dessous */
    .rqs-hero.rqs-hero--db { height: 470px; }
    .rqs-hero--db .rqs-hero__inner { align-items: flex-start; padding-top: 24px; }
    .rqs-hero--db .rqs-hero__text { max-width: 100%; }
    .rqs-hero--db .rqs-hero__title { font-size: 2.1rem; }
}

/* Easter egg : « Chasse aux valeurs hors limite » */
.rqs-egg-board {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   8px;
    margin:                0 auto;
    max-width:             420px;
}
.rqs-egg-cell {
    aspect-ratio:  1;
    border:        0;
    border-radius: 8px;
    background:    #e9efe9;
    transition:    background-color .15s ease, transform .15s ease;
}
.rqs-egg-cell--red    { background: #ff4444; cursor: pointer; }
.rqs-egg-cell--red:hover { transform: scale(1.06); }
.rqs-egg-cell--ok     { background: var(--rqs-green); }
.rqs-egg-cell--orange { background: #ff9900; }
.rqs-egg-cell:focus-visible {
    outline:        3px solid var(--rqs-green-dark);
    outline-offset: 2px;
}
.rqs-egg-hud {
    display:         flex;
    justify-content: space-between;
    margin-bottom:   12px;
    font-weight:     600;
    font-variant-numeric: tabular-nums;
}
.rqs-egg-legend {
    display:   flex;
    flex-wrap: wrap;
    gap:       14px;
    margin-top: 12px;
    font-size: .8rem;
    color:     var(--rqs-text-muted);
}
.rqs-egg-legend span::before {
    content:        "";
    display:        inline-block;
    width:          10px;
    height:         10px;
    margin-right:   5px;
    border-radius:  2px;
    vertical-align: middle;
    background:     var(--rqs-egg-dot);
}
.rqs-egg-dot--red    { --rqs-egg-dot: #ff4444; }
.rqs-egg-dot--ok     { --rqs-egg-dot: var(--rqs-green); }
.rqs-egg-dot--orange { --rqs-egg-dot: #ff9900; }
.rqs-egg-stamp {
    margin:       8px auto 0;
    padding:      14px 22px;
    max-width:    320px;
    text-align:   center;
    color:        var(--rqs-green);
    border:       4px double var(--rqs-green);
    border-radius: 10px;
    transform:    rotate(-4deg);
    animation:    rqs-stamp .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.rqs-egg-stamp__title {
    font-size:      1.5rem;
    font-weight:    800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
@keyframes rqs-stamp {
    from { opacity: 0; transform: rotate(-4deg) scale(1.8); }
    to   { opacity: 1; transform: rotate(-4deg) scale(1); }
}

/* ============================================================
   ESPACEMENT GLOBAL — marge sous la navbar pour toutes les pages
   ============================================================ */
body > .container,
body > div > .container,
body > .container-fluid,
body > div > .container-fluid {
    margin-top: 20px;
}

/* ============================================================
   OVERRIDE BOOTSTRAP — couleur primaire → vert Requasud
   ============================================================ */
/* Bootstrap 5.3 fige les couleurs de chaque composant à la compilation :
   on redéfinit leurs variables, sans toucher à bootstrap.min.css */
.btn-primary {
    --bs-btn-bg:                  var(--rqs-green);
    --bs-btn-border-color:        var(--rqs-green);
    --bs-btn-hover-bg:            #245229;
    --bs-btn-hover-border-color:  #245229;
    --bs-btn-active-bg:           var(--rqs-green-dark);
    --bs-btn-active-border-color: var(--rqs-green-dark);
    --bs-btn-disabled-bg:         var(--rqs-green);
    --bs-btn-disabled-border-color: var(--rqs-green);
    --bs-btn-focus-shadow-rgb:    46, 93, 52;
}
.btn-outline-primary {
    --bs-btn-color:               var(--rqs-green);
    --bs-btn-border-color:        var(--rqs-green);
    --bs-btn-hover-bg:            var(--rqs-green);
    --bs-btn-hover-border-color:  var(--rqs-green);
    --bs-btn-active-bg:           var(--rqs-green-dark);
    --bs-btn-active-border-color: var(--rqs-green-dark);
    --bs-btn-disabled-color:      var(--rqs-green);
    --bs-btn-disabled-border-color: var(--rqs-green);
    --bs-btn-focus-shadow-rgb:    46, 93, 52;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #8fb596;
    box-shadow:   0 0 0 .25rem rgba(46, 93, 52, .25);
}
.form-check-input:checked {
    background-color: var(--rqs-green);
    border-color:     var(--rqs-green);
}
.pagination {
    --bs-pagination-color:             var(--rqs-green);
    --bs-pagination-hover-color:       var(--rqs-green-dark);
    --bs-pagination-focus-color:       var(--rqs-green-dark);
    --bs-pagination-focus-box-shadow:  0 0 0 .25rem rgba(46, 93, 52, .25);
    --bs-pagination-active-bg:         var(--rqs-green);
    --bs-pagination-active-border-color: var(--rqs-green);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--rqs-green);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--rqs-green);
}
.list-group {
    --bs-list-group-active-bg:           var(--rqs-green);
    --bs-list-group-active-border-color: var(--rqs-green);
}

/* Focus clavier visible et à la charte (les boutons et champs gardent l'anneau Bootstrap) */
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline:        2px solid var(--rqs-green);
    outline-offset: 2px;
}
.navbar-custom a:focus-visible {
    outline-color: #fff;
}

/* Lien d'évitement « Aller au contenu » (visible seulement au clavier) */
.rqs-skip-link:focus {
    position:   fixed;
    top:        8px;
    left:       8px;
    z-index:    2000;
    padding:    8px 14px;
    background: #fff;
    color:      var(--rqs-green);
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Cible du lien : enfant direct de body, neutralise le padding-top/flex
   que requaconsult-theme.css applique à tous les enfants de body */
body > .rqs-skip-target {
    flex:        none;
    height:      0;
    padding-top: 0;
    outline:     none;
}

/* ============================================================
   TITRES DE PAGE
   Remplace les styles inline : color:#2e5d34; border-bottom:2px solid #2e5d34
   Usage : <h4 class="rqs-page-title">
   ============================================================ */
.rqs-page-title {
    color:          var(--rqs-green);
    border-bottom:  2px solid var(--rqs-green);
    padding-bottom: 8px;
    margin-bottom:  20px;
    font-weight:    600;
}
.rqs-page-title > .bi {
    margin-right: .4rem;
}
.rqs-page-title small {
    font-size:   .7em;
    font-weight: 400;
    color:       var(--rqs-text-muted);
}
/* Texte d'introduction sous le titre */
.rqs-page-subtitle {
    margin:    -10px 0 20px;
    color:     var(--rqs-text-muted);
    font-size: .95rem;
}

/* ============================================================
   PAGE D'ÉTAPE (confirmation, résultat, erreur)
   Usage : <div class="container rqs-step-page"> titre + .rqs-alert + .rqs-actions
   ============================================================ */
.rqs-step-page {
    margin-bottom: 2rem;
}
/* conteneur aligné sur les autres pages, contenu limité en largeur pour la lecture */
.rqs-step-page > * {
    max-width: 760px;
}
.rqs-step-page.text-center > * {
    margin-left:  auto;
    margin-right: auto;
}
.rqs-question {
    margin-bottom: 16px;
    color:         #333;
}
.rqs-actions {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    margin-top: 8px;
}
@media (max-width: 575.98px) {
    .rqs-actions > .btn {
        flex: 1 1 100%;
    }
}

/* Barre d'outils au-dessus d'une grille (sélecteur + actions) */
.rqs-toolbar {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   flex-end;
    gap:           12px;
    margin-bottom: 12px;
}
.rqs-toolbar__field {
    flex:      0 1 420px;
    min-width: 240px;
}
.rqs-toolbar__actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-left: auto;
}

/* Case à cocher en tuile (backup, archivage, export) : surlignée quand elle est cochée */
.form-check.rqs-check-tile {
    margin-bottom: .5rem;
    padding:       .5rem .75rem .5rem 2.25rem;
    background:    #f8f9fa;
    border-left:   3px solid transparent;
    border-radius: 6px;
}
.form-check.rqs-check-tile .form-check-input {
    margin-left: -1.5rem;
}
.form-check.rqs-check-tile:has(.form-check-input:checked) {
    background:        var(--rqs-green-light);
    border-left-color: var(--rqs-green);
}

/* Pastilles de chiffres (résumé d'un dossier) */
.rqs-stats {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}
.rqs-stat {
    display:        flex;
    flex-direction: column;
    min-width:      130px;
    padding:        8px 14px;
    background:     #f8f9fa;
    border:         1px solid #e3e6e8;
    border-radius:  8px;
}
.rqs-stat__value {
    font-size:   1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color:       var(--rqs-text);
    font-variant-numeric: tabular-nums;
}
.rqs-stat__label {
    font-size: .8rem;
    color:     var(--rqs-text-muted);
}
.rqs-stat--ok  { border-left: 4px solid var(--rqs-green); }
.rqs-stat--ok  .rqs-stat__value { color: var(--rqs-green); }
.rqs-stat--ko  { border-left: 4px solid var(--rqs-red); }
.rqs-stat--ko  .rqs-stat__value { color: var(--rqs-red); }

/* ============================================================
   ALERTES AVEC BORDURE GAUCHE
   Remplace les styles inline répétitifs dans cloture_dossier, consolidation, etc.
   Usage : <div class="rqs-alert rqs-alert-success">
   ============================================================ */
.rqs-alert {
    border-radius:  3px;
    padding:        14px 18px;
    margin-bottom:  16px;
    font-size:      14px;
    color:          var(--rqs-text);
}
/* Titre de l'encadré : le premier <strong> (direct, ou dans le bloc texte de la variante avec icône).
   Les autres <strong> restent en ligne dans le texte. */
.rqs-alert > strong:first-child,
.rqs-alert--icon > div > strong:first-child {
    display:        block;
    margin-bottom:  4px;
    font-size:      15px;
}

.rqs-alert-success {
    border-left:    4px solid var(--rqs-green);
    background:     var(--rqs-green-light);
}
.rqs-alert-success strong { color: var(--rqs-green); }

.rqs-alert-danger {
    border-left:    4px solid var(--rqs-red);
    background:     var(--rqs-red-light);
}
.rqs-alert-danger strong { color: var(--rqs-red); }

.rqs-alert-warning {
    border-left:    4px solid var(--rqs-amber);
    background:     var(--rqs-amber-light);
}
.rqs-alert-warning strong { color: #7a5200; }

.rqs-alert-info {
    border-left:    4px solid var(--rqs-info);
    background:     var(--rqs-info-light);
}
.rqs-alert-info strong { color: var(--rqs-info); }

/* Variante avec icône : <div class="rqs-alert rqs-alert-info rqs-alert--icon"><i class="bi … rqs-alert__icon"></i><div>…</div></div> */
.rqs-alert--icon {
    display:     flex;
    gap:         12px;
    align-items: flex-start;
}
.rqs-alert__icon {
    flex-shrink: 0;
    font-size:   1.15rem;
    line-height: 1.25;
}
.rqs-alert-success .rqs-alert__icon { color: var(--rqs-green); }
.rqs-alert-danger  .rqs-alert__icon { color: var(--rqs-red); }
.rqs-alert-warning .rqs-alert__icon { color: #b07d00; }
.rqs-alert-info    .rqs-alert__icon { color: var(--rqs-info); }
.rqs-alert p:last-child,
.rqs-alert ul:last-child {
    margin-bottom: 0;
}

/* ============================================================
   TABLEAUX
   Améliore la lisibilité des tables Bootstrap
   ============================================================ */
.table thead th {
    background-color: var(--rqs-green);
    color:            #fff;
    font-weight:      600;
    font-size:        13px;
    border-color:     var(--rqs-green);
    white-space:      nowrap;
}
.table > tbody > tr:hover {
    background-color: #f0f7f1;
}
.table > tbody > tr > td {
    font-size:        13px;
    vertical-align:   middle;
}
/* Chiffres alignés en colonne (tableaux et grilles RequaSud) */
.table,
.vg-table {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   GRILLES REQUASUD — couleurs de la charte
   requasud-grid.css est chargé APRÈS ce fichier : html:root est plus
   spécifique que son :root, la surcharge s'applique quel que soit l'ordre.
   Les couleurs d'erreur (rouge, bleu, orange) ne sont pas modifiées.
   ============================================================ */
html:root {
    --vg-primary:         #2e5d34;
    --vg-primary-dark:    #1f4224;
    --vg-btn-edit-bg:     #2e5d34;
    --vg-btn-page-active: #2e5d34;
    --vg-row-hover:       #f0f7f1;
}
.vg-input:focus,
.vg-select:focus {
    box-shadow: 0 0 0 2px rgba(46, 93, 52, .25);
}

/* ============================================================
   CARDS
   Header vert cohérent avec la charte
   ============================================================ */
.card-header.rqs-card-header {
    background-color: var(--rqs-green);
    color:            #fff;
    font-weight:      600;
    border-bottom:    none;
}

/* ============================================================
   BOUTONS D'ACTION (icônes dans les tableaux)
   ============================================================ */
.btn-action {
    padding:    3px 8px;
    font-size:  13px;
    line-height: 1.4;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-custom {
    background-color: var(--rqs-green);
}
.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
    color: #fff !important;
}
.navbar-custom .nav-link:hover {
    color: var(--rqs-green-mid) !important;
}
.navbar-custom .dropdown-menu {
    border-top: 3px solid var(--rqs-green);
}

/* Sous-menus (au clic, cf. common.js) — évite qu'un dropdown avec beaucoup
   d'items (ex: Administration) ne déborde en bas de l'écran.
   Au clic plutôt qu'au survol : le survol ne fonctionne pas sur petit
   écran/tactile (pas de hover). */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
.dropdown-submenu.show > .dropdown-menu {
    display: block;
}
.dropdown-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}
.dropdown-submenu-toggle::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    margin-left: .75em;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
}
@media (max-width: 991.98px) {
    /* En dessous du breakpoint navbar-expand-lg : pas de place à droite,
       le sous-menu s'affiche en ligne (indenté) plutôt qu'en flottant */
    .dropdown-submenu > .dropdown-menu {
        position: static;
        left: 0;
        margin-left: 1rem;
    }
}

/* ============================================================
   TOOLTIPS
   ============================================================ */
/* requaconsult-theme.css (partagé avec Requaconsult) ajoute padding-top: 60px
   à tout enfant direct de body (body > :not(nav):not(footer)). Les tooltips
   sont insérés dans body (container: 'body', cf. common.js) : sans ce reset,
   la bulle est décalée de 60px sous sa flèche en placement "bottom". */
body > .tooltip {
    padding-top: 0;
    flex: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    font-size:  13px;
    color:      var(--rqs-text-muted);
}
footer a {
    color:           var(--rqs-green);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

/* ============================================================
   BADGES CHAÎNE
   Pour afficher le nom de la chaîne (EFF, SOL, NIT, etc.)
   Usage : <span class="rqs-badge-chaine">EFF</span>
   ============================================================ */
.rqs-badge-chaine {
    display:          inline-block;
    background-color: var(--rqs-green);
    color:            #fff;
    font-size:        11px;
    font-weight:      700;
    padding:          2px 7px;
    border-radius:    3px;
    letter-spacing:   .5px;
    text-transform:   uppercase;
}

/* ============================================================
   BADGE PÉRIODE (date d'accès sur la page principale)
   ============================================================ */
.rqs-limite-badge {
    display:       inline-block;
    font-size:     13px;
    font-weight:   700;
    padding:       8px 18px;
    border-radius: 6px;
    border-left:   5px solid transparent;
    white-space:   nowrap;
    box-shadow:    0 2px 6px rgba(0,0,0,.12);
}
.rqs-limite-badge--success {
    background-color: var(--rqs-green);
    color:            #fff;
    border-left-color: #1a3d1f;
}
.rqs-limite-badge--warning {
    background-color: var(--rqs-amber);
    color:            #fff;
    border-left-color: #a07000;
}
.rqs-limite-badge--danger {
    background-color: var(--rqs-red-light);
    color:            var(--rqs-red);
    border-left-color: var(--rqs-red);
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.rqs-ico         { font-size: .9rem; }
.rqs-ico--ok     { color: var(--rqs-green); }
.rqs-ico--ko     { color: var(--rqs-red); }
.rqs-ico--warn   { color: var(--rqs-amber); }
.rqs-ico--info   { color: var(--rqs-info); }
.rqs-bg-green    { background-color: var(--rqs-green); color: #fff; }
.rqs-bg-green .modal-title { color: #fff; }
.rqs-text-green  { color: var(--rqs-green); }
.rqs-text-muted  { color: var(--rqs-text-muted); }
.rqs-border-top  { border-top: 2px solid var(--rqs-green); padding-top: 12px; }

/* ============================================================
   PAGE D'ACCUEIL /requavalid — cards et état vide
   ============================================================ */

/* CARDS — effet de survol (même règle que homepage_view.php,
   centralisée ici car requavalid.css est chargé en dernier sur
   toutes les pages frontend) */
.rqs-home-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rqs-home-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.25) !important;
}

/* CARDS D'ACTION — usage : <div class="card rqs-home-card rqs-action-card rqs-action-card--green"> */
.card.rqs-action-card--green { border-top: 4px solid var(--rqs-green) !important; }

/* ÉTAT "NON CONCERNÉ" — usage : <div class="rqs-empty-state h-100"> */
.rqs-empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    gap:             10px;
    min-height:      160px;
    background:      #f8f9fa;
    border:          1px dashed #d5d9dc;
    border-radius:   10px;
    padding:         32px 20px;
    color:           var(--rqs-text-muted);
}
.rqs-empty-state__icon {
    font-size: 1.8rem;
    color:     #adb5bd;
}
.rqs-empty-state__text {
    font-size: .85rem;
    margin:    0;
    max-width: 220px;
}

/* ============================================================
   RÉTRIBUTION — à l'écran seulement (l'impression garde print.css)
   ============================================================ */
@media screen {
    .row > .title_print {
        width:        calc(100% - var(--bs-gutter-x));
        margin-left:  calc(var(--bs-gutter-x) * .5);
        margin-right: calc(var(--bs-gutter-x) * .5);
        padding-left: 0;
        padding-right: 0;
    }
    .title_print {
        margin:         1.5rem 0 1rem;
        padding-bottom: 8px;
        font-size:      1.5rem;
        font-weight:    600;
        color:          var(--rqs-green);
        border-bottom:  2px solid var(--rqs-green);
    }
    .list-group-item .lead {
        font-size:   1rem;
        font-weight: 600;
        color:       var(--rqs-text);
        font-variant-numeric: tabular-nums;
    }
}

/* ============================================================
   MOUVEMENT RÉDUIT (réglage du système de l'utilisateur)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rqs-home-card,
    .rqs-home-card:hover {
        transition: none;
        transform:  none;
    }
    .rqs-egg-cell {
        transition: none;
    }
    .rqs-egg-cell--red:hover {
        transform: none;
    }
    .rqs-egg-stamp {
        animation: none;
    }
}