/* ============================================================
   MA BIBLIOTHÈQUE — Système de design
   Direction : catalogue d'archives de presse kiosque française,
   version modernisée — image de fond (château au crépuscule),
   cartes "verre dépoli" translucides, coins arrondis généreux,
   ombres douces. Identité rouge kiosque / or conservée en accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
    /* Couleurs */
    --paper: #F2EEE4;
    --paper-raised: #FBF9F3;
    --ink: #1F2430;
    --ink-soft: #4A4F5C;
    --kiosk-red: #B3272B;
    --kiosk-red-dark: #8F1F22;
    --gold: #C89B3C;
    --gold-dark: #A57F2C;
    --stamp-green: #3F6B4B;
    --line: #D8D0BE;
    --line-soft: #E7E1D2;

    /* Danger/suppression — vin-bordeaux violacé (harmonisé avec le bleu/violet
       du fond de page depuis le 10/09/2026), volontairement différent de
       --kiosk-red pour ne jamais confondre une action destructrice avec un
       filtre/bouton actif (qui utilise --kiosk-red).
       --danger-light : ajouté le 10/09/2026 — le bouton "Supprimer" (variante
       contour/transparente) était illisible sur le bandeau d'action très
       sombre (fond quasi noir semi-transparent posé sur l'image de fond) :
       --danger seul est trop foncé pour servir de texte/bordure sur un fond
       sombre. --danger-light sert uniquement à la variante contour. */
    --danger: #8C2B4A;
    --danger-dark: #6E2039;
    --danger-light: #E36F91;

    /* Bleu ciel — bandeaux de titre opaques (liste_albums.php / liste_series.php),
       ajouté le 10/09/2026 à la demande explicite de l'utilisateur : "Catalogue
       complet" en blanc/gras dans un bandeau bleu ciel bien visible. */
    --bleu-ciel: #2F8FD1;
    --bleu-ciel-dark: #23709F;

    /* Verre dépoli (cartes flottant sur l'image de fond) */
    --glass-bg: rgba(251, 249, 243, 0.90);
    --glass-bg-soft: rgba(251, 249, 243, 0.72);
    --glass-border: rgba(255, 255, 255, 0.55);

    /* Typographie */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Rayon / ombre — version modernisée (coins plus généreux, ombres portées douces) */
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-card: 0 4px 16px rgba(15, 20, 38, 0.12), 0 1px 3px rgba(15, 20, 38, 0.08);
    --shadow-lift: 0 16px 40px rgba(15, 20, 38, 0.24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Voile assombri ajusté une 2e fois le 10/09/2026 : encore éclairci suite au
   retour "l'image de fond plus claire" — l'équilibre repose désormais
   surtout sur des correctifs de contraste ciblés (texte sans classe,
   <code>, `.text-muted.sur-fond-image` en bleu ciel clair + ombre portée
   ci-dessous) plutôt que sur un voile global très sombre. Historique :
   0.58/0.28/0.42 (09/09, trop faible) → 0.90/0.86/0.92 (trop fort, "on ne
   voit plus l'image") → 0.62/0.52/0.65 (encore un peu sombre) → valeurs
   actuelles. Voir ETAT_DU_PROJET.md. */
body {
    background-color: #04225c;
    background-image:
        linear-gradient(180deg, rgba(4, 10, 22, 0.46) 0%, rgba(10, 8, 26, 0.36) 45%, rgba(4, 10, 22, 0.48) 100%),
        url('fond_bibliotheque.jpg?v=1');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
}

/* Le fond fixe (background-attachment) peut peser sur le défilement de
   certains navigateurs mobiles : on repasse en défilement normal en
   dessous de 992px, la photo reste identique visuellement. */
@media (max-width: 991px) {
    body { background-attachment: scroll; }
}

/* ------------------------------------------------------------
   Typographie
   ------------------------------------------------------------ */

h1, h2, h3, .font-display {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kiosk-red);
    font-weight: 600;
}

.mono, code, .code-value {
    font-family: var(--font-mono);
    font-size: 0.85em;
}

/* Puce opaque derrière tout <code> : sans elle, sa couleur rose/rouge par
   défaut (Bootstrap) devient illisible posé à nu sur le fond image (constaté
   10/09/2026 sur importer_ebooks.php) — l'opacité fixe garantit un contraste
   correct quelle que soit la couleur de fond derrière (image claire, sombre,
   ou carte claire). */
code {
    background: rgba(0, 0, 0, 0.32);
    padding: 0.15em 0.45em;
    border-radius: 4px;
}

a { color: var(--kiosk-red); }
a:hover { color: var(--kiosk-red-dark); }

/* ------------------------------------------------------------
   Barre de navigation
   ------------------------------------------------------------ */

.mb-sidebar {
    background: linear-gradient(180deg, rgba(4, 15, 36, 0.85), rgba(4, 15, 36, 0.72));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.mb-sidebar .brand-mark {
    background: var(--kiosk-red);
    color: white;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 1rem;
    flex-shrink: 0;
}

.mb-sidebar .nav-pill {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--paper);
    background: rgba(242, 238, 228, 0.08);
    border: 1px solid rgba(242, 238, 228, 0.18);
    border-radius: 50px;
    padding: 6px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.mb-sidebar .nav-pill:hover {
    background: rgba(242, 238, 228, 0.16);
    border-color: rgba(242, 238, 228, 0.3);
    color: var(--paper);
}
/* Couleurs choisies pour rester distinguables en cas de daltonisme (le rouge
   sur fond sombre pose problème, notamment en deutéranopie/protanopie —
   le bleu et le jaune/or restent fiables pour la quasi-totalité des daltoniens). */
.mb-sidebar .nav-pill.accent {
    background: #3E7CB8;
    border-color: #3E7CB8;
}
.mb-sidebar .nav-pill.accent:hover { background: #2F5F8F; }

.mb-sidebar .nav-pill.gold {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}
.mb-sidebar .nav-pill.gold:hover { background: var(--gold-dark); }

/* Menus déroulants (Bootstrap) : couleurs fixées explicitement plutôt que de
   compter sur les valeurs par défaut, qui posaient un problème de lisibilité
   (texte quasi invisible) sur les menus de statut par exemple. */
.dropdown-menu {
    background-color: var(--paper-raised, #fff) !important;
    border: 1px solid var(--line, #ddd);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-card, 0 4px 12px rgba(0,0,0,0.15));
    padding: 6px;
    z-index: 1055 !important;
}
.dropdown-item {
    color: var(--ink, #1F2430) !important;
    border-radius: 6px;
    padding: 8px 12px;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--paper, #F2EEE4) !important;
    color: var(--ink, #1F2430) !important;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--kiosk-red, #B3272B) !important;
    color: white !important;
}
.dropdown-item.disabled, .dropdown-item:disabled {
    color: var(--ink-soft, #999) !important;
    opacity: 0.6;
}

.mb-sidebar .dropdown-menu {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-body);
}
.mb-sidebar .dropdown-item.active,
.mb-sidebar .dropdown-item:active {
    background: var(--kiosk-red);
}

/* Pagination (Bootstrap) : couleurs du site plutôt que le bleu par défaut.
   Reprend la règle jusque-là définie en local dans voir_serie.php, désormais
   centralisée pour être valable aussi sur albums_a_completer.php et toute
   future page paginée. */
.pagination .page-link { color: var(--kiosk-red, #B3272B); border-color: var(--line, #ddd); }
.pagination .page-item.active .page-link { background-color: var(--kiosk-red, #B3272B); border-color: var(--kiosk-red, #B3272B); }
.pagination .page-item.disabled .page-link { color: var(--ink-soft, #999); }

/* ------------------------------------------------------------
   Cartes "fiche" — verre dépoli flottant sur l'image de fond,
   coins arrondis, fine ligne d'accent en haut (remplace l'ancien
   effet de perforation, moins lisible sur un fond photo).
   ------------------------------------------------------------ */

.mb-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Les cartes d'album contiennent un menu déroulant de statut (voir_serie.php) :
   overflow:hidden le coupait dès qu'il dépassait de la carte. */
.mb-card.album-item { overflow: visible; }

/* Menu déroulant Bootstrap niché dans une .mb-card (ex. le filtre "Statut de
   possession" au-dessus de "Liste des albums" sur voir_serie.php — seul
   endroit du site où un .filter-bar contenant un dropdown est DANS une
   .mb-card, partout ailleurs le filter-bar est en dehors de toute carte) :
   assets/dropdown-fix.js force Popper en position "fixed" pour échapper au
   découpage vertical que .filter-bar déclenche sur mobile (overflow-x:auto),
   mais le backdrop-filter de .mb-card lui crée son propre "containing
   block" pour les éléments position:fixed (même mécanisme que
   filter/transform) — le menu reste donc positionné/découpé par rapport à
   la carte plutôt qu'à la vraie fenêtre, ce qui annule le correctif JS et
   rend le menu inutilisable sur mobile (Android confirmé). Corrigé le
   10/09/2026 en désactivant le flou uniquement sur la carte qui contient un
   tel dropdown, pour que "fixed" redevienne relatif à la fenêtre. */
.mb-card:has(.filter-bar .dropdown-menu) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.mb-card-ticket {
    position: relative;
}
.mb-card-ticket::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background-image: linear-gradient(90deg, var(--kiosk-red), var(--gold));
}

/* ------------------------------------------------------------
   Tampon de statut (rotation légère, effet encre)
   ------------------------------------------------------------ */

.stamp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 2px solid currentColor;
    border-radius: 3px;
    transform: rotate(-2deg);
    background: transparent;
}
.stamp-possede { color: var(--stamp-green); }
.stamp-acheter { color: var(--gold-dark); }
.stamp-prete   { color: var(--kiosk-red); }

/* ------------------------------------------------------------
   Boutons pilule unifiés (barres de filtres et d'actions)
   ------------------------------------------------------------ */

.btn-pill {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink-soft);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}
.btn-pill:hover { border-color: var(--ink-soft); color: var(--ink); background: var(--paper-raised); }

.btn-pill-accent, .btn-pill.active {
    background: var(--kiosk-red);
    border-color: var(--kiosk-red);
    color: white;
}
.btn-pill-accent:hover, .btn-pill.active:hover { background: var(--kiosk-red-dark); color: white; }

.btn-pill-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}
.btn-pill-gold:hover { background: var(--gold-dark); color: white; }

.btn-pill-outline-accent {
    background: transparent;
    border-color: var(--kiosk-red);
    color: var(--kiosk-red);
}
.btn-pill-outline-accent:hover { background: var(--kiosk-red); color: white; }

.btn-pill-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}
.btn-pill-danger:hover { background: var(--danger-dark); color: white; }

.btn-pill-outline-danger {
    /* Léger fond teinté (au lieu de transparent) + couleur claire pour rester
       visible même sur le bandeau d'action très sombre — voir --danger-light. */
    background: rgba(140, 43, 74, 0.16);
    border-color: var(--danger-light);
    color: var(--danger-light);
}
.btn-pill-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: white; }

.btn-pill-sm { padding: 4px 12px; font-size: 0.75rem; }

.btn-pill-success {
    background: var(--stamp-green);
    border-color: var(--stamp-green);
    color: white;
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */

.btn-kiosk {
    background: var(--kiosk-red);
    border: 1px solid var(--kiosk-red);
    color: white;
    font-weight: 600;
    border-radius: 50px;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.btn-kiosk:hover { background: var(--kiosk-red-dark); color: white; }

.btn-kiosk-outline {
    background: transparent;
    border: 1px solid var(--kiosk-red);
    color: var(--kiosk-red);
    font-weight: 600;
    border-radius: 50px;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.btn-kiosk-outline:hover { background: var(--kiosk-red); color: white; }

.btn-ink-outline {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-weight: 600;
    border-radius: 50px;
    font-size: 0.85rem;
}
.btn-ink-outline:hover { background: var(--paper); border-color: var(--ink-soft); color: var(--ink); }

/* ------------------------------------------------------------
   Barre de progression "possession"
   ------------------------------------------------------------ */

.mb-progress {
    height: 6px;
    background: var(--line-soft);
    border-radius: 3px;
    overflow: hidden;
}
.mb-progress-bar {
    height: 100%;
    background: var(--stamp-green);
    border-radius: 3px;
}

/* ------------------------------------------------------------
   Champs de formulaire (harmonisés sur tout le site)
   ------------------------------------------------------------ */

.form-control, .form-select {
    border-color: var(--line);
    border-radius: 4px;
    background-color: var(--paper-raised);
    color: var(--ink);
}
.form-control:focus, .form-select:focus {
    border-color: var(--kiosk-red);
    box-shadow: 0 0 0 0.2rem rgba(179, 39, 43, 0.15);
    background-color: var(--paper-raised);
}
.form-control:disabled, .form-select:disabled { background-color: var(--paper); color: var(--ink-soft); }
.input-group-text { background: var(--paper); border-color: var(--line); color: var(--ink-soft); }

.field-label, label.section-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft) !important;
    font-weight: 600;
}

/* ------------------------------------------------------------
   Sections / titres
   ------------------------------------------------------------ */

.section-heading {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--ink);
}
.section-heading h2 { margin: 0; font-size: 1.4rem; }

/* Variante "posée directement sur l'image de fond" (pas de carte verre
   dépoli/boîte claire derrière) — ajoutée le 10/09/2026, suite au retour
   "les titres/noms ne sont pas visibles sur le fond sombre". .section-heading
   est réutilisée à l'identique dans deux contextes : à l'intérieur d'une
   carte claire (.mb-card, .admin-box, .box — texte --ink sombre correct,
   INCHANGÉ) et posée à nu sur le fond château (liste_series.php,
   index.php "Derniers ajouts"/"Séries suivies", pages d'administration...)
   où --ink sombre sur un fond bleu/violet très sombre était quasi
   invisible — même cause que le bouton "Supprimer" (contour transparent).
   Cette classe modificatrice à ajouter manuellement dans le HTML des pages
   concernées (jamais celles qui sont déjà dans une carte claire) applique
   les couleurs claires déjà validées ailleurs sur ce même fond (.hero-panel
   utilise --paper pour le texte, --gold pour son .eyebrow). */
.section-heading.sur-fond-image { border-bottom-color: rgba(255, 255, 255, 0.25); }
.section-heading.sur-fond-image h1,
.section-heading.sur-fond-image h2,
.section-heading.sur-fond-image h3 { color: var(--paper); }
.section-heading.sur-fond-image .eyebrow { color: var(--gold); }

/* Même logique que ci-dessus, mais pour du texte courant (paragraphe
   d'introduction, description) posé directement sur le fond — jamais pour
   du texte déjà dans .mb-card/.admin-box/.box/.card/.alert (--ink sombre y
   reste correct, INCHANGÉ). Ajoutée le 10/09/2026 suite au retour "on ne
   voit pas le texte" sur importer_ebooks.php : son <p class="text-muted">
   d'intro héritait du --ink sombre du body, invisible sans carte claire
   derrière — même famille de bug que .section-heading ci-dessus. Bootstrap
   pose ses couleurs de texte en !important, donc pareil ici pour gagner.
   Couleur passée en bleu ciel clair (au lieu du crème initial, jugé encore
   trop terne/sombre) + ombre portée sombre, à la demande explicite de
   l'utilisateur le 10/09/2026 ("change la couleur du texte de noir en
   blanc ou bleu ciel"), pour rester net même sur un fond image éclairci. */
.text-muted.sur-fond-image {
    color: rgba(214, 236, 255, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* Bandeau bleu ciel opaque pour les titres de page (ex. "Catalogue complet"
   sur liste_albums.php / liste_series.php) : le fond bleu plein assure une
   lisibilité totale du texte blanc/gras quel que soit le fond d'image
   derrière, contrairement à .section-heading/.page-header seuls qui posent
   le texte directement sur l'image. Ajouté le 10/09/2026 à la demande
   explicite de l'utilisateur. Ré-appliqué le 10/09/2026 après une
   disparition de cette règle du fichier sur disque (voir note en tête de
   fichier sur l'outil de synchronisation). */
.bandeau-ciel {
    background: var(--bleu-ciel);
    border-radius: var(--radius);
    border-bottom: none !important;
    box-shadow: var(--shadow-card);
}
.bandeau-ciel h1, .bandeau-ciel h2, .bandeau-ciel h3, .bandeau-ciel h4 {
    color: #fff !important;
    font-weight: 700;
}
.bandeau-ciel .eyebrow { color: #fff !important; }
/* .page-header est display:inline-block par défaut (règle définie dans le
   <style> local de liste_albums.php) : on force le plein-largeur seulement
   quand combiné à .bandeau-ciel, sans toucher .section-heading (flex) qui
   utilise aussi .bandeau-ciel sur liste_series.php. */
.page-header.bandeau-ciel { display: block; width: 100%; }

/* Ligne d'info sous le champ de recherche ("Catalogue complet (vue admin).
   Voir uniquement ma collection" / "Revenir au catalogue complet"), posée
   à nu sur l'image de fond sur liste_albums.php/liste_series.php — même
   piège que .text-muted.sur-fond-image, mais Bootstrap ne met PAS .form-text
   en !important par défaut (contrairement à .text-*), donc pas besoin de
   !important ici pour gagner sur la couleur de base ; en revanche le lien
   <a> à l'intérieur doit être ciblé séparément (sa propre couleur de lien,
   pas héritée du texte ambiant). Ajouté le 10/09/2026 à la demande
   explicite de l'utilisateur ("le texte qui est en noir ou rouge... en
   blanc et bleu ciel pour le filtre"). */
.form-text.sur-fond-image {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
.form-text.sur-fond-image a {
    color: var(--bleu-ciel);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
.form-text.sur-fond-image a:hover {
    color: var(--bleu-ciel-dark);
}

/* Barre d'actions en haut de page (Retour / Modifier / Supprimer / Enregistrer...),
   utilisée de façon identique sur toutes les pages de fiche et de formulaire. */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

hr.rule { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* ------------------------------------------------------------
   Focus visible (accessibilité clavier)
   ------------------------------------------------------------ */

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--kiosk-red);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================
   ADAPTATIONS MOBILE / TABLETTE
   Zones cliquables ≥44px (recommandation tactile), texte lisible
   sans zoom, aucun débordement horizontal, contenu qui s'empile
   proprement plutôt que de se tasser.
   ============================================================ */

/* Empêche tout débordement horizontal accidentel (images, tableaux) */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Tablette (≤ 768px) */
@media (max-width: 768px) {
    body { padding-top: 64px; font-size: 15px; }

    h1, .hero-panel h1 { font-size: 1.5rem !important; }
    h2, .section-heading h2 { font-size: 1.2rem !important; }

    .hero-panel { padding: 1.4rem 1.3rem; }

    .mb-card, .mb-card-ticket { padding: 1rem !important; }

    /* Bouton hamburger : zone tactile confortable */
    .navbar-toggler { padding: 10px !important; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    /* Boutons/liens tactiles : hauteur minimale confortable */
    .btn, .nav-pill, .filter-pill, a.stamp, button.stamp {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Barres d'action (voir_serie.php et autres) : défilement horizontal
       compact au lieu d'un empilement pleine largeur qui prend toute la
       hauteur d'écran dès qu'il y a plus de 2-3 boutons. */
    .action-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .action-bar > * { flex-shrink: 0; }
    .action-bar::-webkit-scrollbar { height: 4px; }
    .action-bar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
}

/* Téléphone (≤ 576px) */
@media (max-width: 576px) {
    body { padding-top: 64px; }

    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* Fiches série (liste_series.php) : image au-dessus du texte plutôt que côte à côte */
    .serie-row { flex-direction: column; }
    .serie-cover-wrapper { flex: none; margin: 0 auto 12px; max-width: 140px; }

    /* Fiche album (voir_album.php) : tableau info en liste empilée, plus de colonne fixe */
    .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td {
        display: block;
        width: 100% !important;
    }
    .info-table tr { padding: 8px 0; }
    .info-table th { padding-bottom: 2px !important; }
    .info-table td { padding-top: 0 !important; }

    .cover-img, .serie-main-img { max-width: 220px; margin: 0 auto; display: block; }

    /* Bandeau d'accueil : progression pleine largeur */
    .hero-progress-track { max-width: 100%; }

    /* Cartes stats : texte resserré pour tenir sur 2 colonnes sans coupure */
    .stat-card .stat-num { font-size: 1.6rem; }
    .stat-card { padding: 0.9rem 1rem; }

    /* Barres de filtres : défilement horizontal compact, même logique que
       action-bar ci-dessus, plutôt qu'un empilement pleine largeur. */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .filter-bar > * { flex-shrink: 0; }
    .filter-bar .dropdown button { white-space: nowrap; }
}