(voir ci-dessous). */ /* padding: 20px; */ background-image: /* Couche 1: Filtre blanc semi-transparent (ajustez 0.75 si besoin) */ linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), /* Couche 2: Votre image - VÉRIFIEZ CE CHEMIN ! */ /* Si style.css est à la racine, ce chemin est bon. */ /* Si style.css est dans /css/, utilisez '../images/bdtheque01.jpg' */ url('images/bdtheque01.jpg'); background-size: cover; /* Couvre toute la zone */ background-position: center center;/* Centre l'image */ background-repeat: no-repeat; /* Pas de répétition */ background-attachment: fixed; /* Fond fixe au scroll */ /* Assurer que le body prend au moins toute la hauteur de la vue */ min-height: 100vh; /* L'ancienne couleur de fond est maintenant commentée ou supprimée */ /* background-color: #f8f9fa; */ /* ================================== */ } /* === Gestion du Padding === */ /* Si vous avez retiré le padding du body, ajoutez-le ici ou aux sections spécifiques */ main { text-align: center; /* Centre les éléments inline ou inline-block/flex enfants */ padding: 20px; /* Ajoute l'espacement intérieur au contenu principal */ /* Adaptez (ex: padding: 20px 0;) si vos sections ont déjà margin: auto */ } /* === Titres, Messages, Erreurs === */ .titre-principal { text-align: center; margin-bottom: 25px; /* Espace sous le titre */ margin-top: 10px; /* Un peu d'espace au-dessus */ color: #0056b3; /* Bleu plus marqué */ font-weight: bold; } /* Message de comptage (ex: X séries / Y albums) */ .text-center { text-align: center; color: #6c757d; /* Gris plus doux */ margin-bottom: 20px; font-size: 0.95em; /* Ajouter un fond semi-transparent pour lisibilité sur image ? Optionnel */ background-color: rgba(255, 255, 255, 0.6); /* display: inline-block; */ /* Si vous ajoutez un fond */ padding: 2px 8px; margin : 0 35px 0 35px; border-radius: 4px; } /* Message d'erreur PHP/SQL */ .error-message { color: #721c24; /* Rouge foncé pour texte */ text-align: center; font-weight: bold; margin: 25px auto; padding: 12px 15px; /* Plus de padding */ border: 1px solid #f5c6cb; /* Bordure rouge clair */ background-color: #f8d7da; /* Fond rouge clair */ border-radius: 5px; max-width: 800px; /* Limite largeur */ } /* === Formulaire de Recherche === */ #search-form { margin-bottom: 15px; text-align: center; } #search-form input[type="text"] { padding: 10px 15px; width: 350px; max-width: 75%; border: 1px solid #ced4da; border-radius: 5px 0 0 5px; font-size: 16px; vertical-align: middle; box-sizing: border-box; height: 42px; } #search-form input[type="text"]:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } #search-form button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 16px; margin-left: -1px; vertical-align: middle; box-sizing: border-box; height: 42px; transition: background-color 0.15s ease-in-out; } #search-form button:hover { background-color: #218838; } /* === Filtres (Checkboxes) === */ .filter-options { text-align: center; display: flex; /* Toujours nécessaire pour aligner les enfants */ flex-wrap: wrap; /* Permet aux filtres de passer à la ligne */ justify-content: center;/* Centre les filtres *à l'intérieur* de la div */ margin-bottom: 15px; /* Marge en dessous */ gap: 8px 18px; /* Espace entre les filtres */ padding: 15px; /* Espace intérieur */ background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; /* --- Modifications pour l'adaptation et le centrage --- */ /* 1. Rendre la div "inline" pour qu'elle prenne la largeur du contenu */ display: inline-flex; /* CHANGEMENT: Utilise inline-flex au lieu de flex */ /* (ou display: inline-block; si flex pas nécessaire pour la div elle-même) */ /* 2. Pour centrer un élément inline-block ou inline-flex, on applique text-align: center; à son CONTENEUR PARENT */ /* DONC: Il faut ajouter text-align: center; au parent de .filter-options */ /* Si le parent est

ou une autre div, ajoutez-lui ce style. */ /* Si le parent est , on peut le mettre là, mais ça affecte tout. */ /* 3. Supprimer les marges auto car elles ne centrent plus les éléments inline */ /* margin-left: auto; */ /* SUPPRIMER */ /* margin-right: auto; */ /* SUPPRIMER */ /* Optionnel: Si inline-flex ne centre pas bien les éléments internes */ /* avec justify-content, vous pouvez essayer de remettre flex et utiliser */ /* width: fit-content; MAIS support navigateur moins universel */ /* display: flex; */ /* width: -moz-fit-content; */ /* Firefox */ /* width: fit-content; */ /* Chrome, Edge, Opera, Safari */ /* margin-left: auto; */ /* Puis recentrer le bloc */ /* margin-right: auto; */ /* --------------------------------------------------------- */ } .filter-options label { margin: 0; cursor: pointer; display: inline-flex; align-items: center; font-size: 0.9em; color: #495057; } .filter-options input[type="checkbox"] { margin-right: 6px; accent-color: #007bff; } /* === Boutons d'Action (Appliquer Filtres, Reset, Navigation) === */ .action-buttons { text-align: center; margin-bottom: 15px; margin-top: 15px; /* Espace après les filtres */ display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } /* Styles communs pour les boutons principaux */ .filter-button, .reset-button, .gestion-button { padding: 10px 25px; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: 500; text-decoration: none; /* Important pour les liens stylés en boutons */ transition: background-color 0.2s ease, transform 0.1s ease; display: inline-block; /* Pour padding/margin sur les */ box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Légère ombre */ } .filter-button:hover, .reset-button:hover, .gestion-button:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.15); } /* Styles spécifiques */ .filter-button { background-color: #17a2b8; /* Cyan */ } .filter-button:hover { background-color: #138496; } .reset-button { background-color: #6c757d; /* Gris */ } .reset-button:hover { background-color: #5a6268; } .gestion-button { background-color: #4c73f3; /* Gris */ } .gestion-button:hover { background-color: #395bca; } /* === En-têtes de Section (Lettres, One-shot/Séries) === */ .page-title { text-align:center; display: block; margin: 5px 20px 0 20px; text-align: center; margin-bottom: 25px; /* Espace sous le titre */ margin-top: 10px; /* Un peu d'espace au-dessus */ padding: 10px 20px; background: linear-gradient(to right, #007bff, #0056b3); /* Dégradé bleu */ color: white; border: none; border-radius: 5px; font-size: 22px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Style commun pour les en-têtes */ .letter-header, .section-header { width: 100%; color: white; text-align: left; padding: 8px 25px; margin-bottom: 20px; margin-top: 25px; border-radius: 5px; font-size: 20px; font-weight: bold; box-sizing: border-box; flex-basis: 100%; /* Force le passage à la ligne dans flexbox */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Styles spécifiques par type d'en-tête */ .letter-header { background: linear-gradient(to right, #007bff, #0056b3); /* Dégradé bleu */ font-size: 22px; /* Peut-être plus grand pour les lettres */ } .section-header.oneshot-header { background: linear-gradient(to right, #28a745, #218838); /* Dégradé Vert */ } .section-header.series-header { background: linear-gradient(to right, #17a2b8, #117a8b); /* Dégradé Cyan */ } /* Moins de marge pour le tout premier en-tête dans une grille */ .items-grid > .letter-header:first-child, .items-grid > .section-header:first-child { margin-top: 10px; } /* === Grille d'Items (Séries / One-shots) === */ .items-grid { margin: 35px 35px; display: flex; flex-wrap: wrap; justify-content: flex-start; /* Aligne à gauche par défaut */ gap: 20px; /* Espacement entre vignettes */ padding: 0; /* Pas de padding sur la grille elle-même */ /* margin: 0 auto; /* Centrer la grille si une largeur max est définie */ /* max-width: 1200px; /* Optionnel: Largeur max pour la grille */ } /* S'assurer que les en-têtes prennent bien toute la largeur DANS la grille */ .items-grid > .letter-header, .items-grid > .section-header { width: 100%; flex-basis: 100%; } /* === Vignette Individuelle === */ .item-vignette { width: 170px; text-align: center; border: 1px solid #dee2e6; background-color: #ffffff; /* Fond blanc opaque ESSENTIEL */ padding: 12px; box-sizing: border-box; border-radius: 6px; transition: box-shadow 0.25s ease, transform 0.2s ease; display: flex; /* Permet d'utiliser flex-direction */ flex-direction: column; /* Aligne image et texte verticalement */ overflow: hidden; /* Cache contenu qui dépasse */ } .item-vignette:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); transform: translateY(-3px); border-color: #adb5bd; } .item-vignette a { /* Le lien couvre toute la vignette */ text-decoration: none; color: inherit; /* Hérite couleur du parent */ display: flex; flex-direction: column; height: 100%; /* Prend toute la hauteur */ } .item-vignette img { max-width: 100%; /* Ne dépasse pas la largeur de la vignette */ height: auto; /* Garde le ratio */ aspect-ratio: 2 / 3; /* Force le ratio 2:3 */ object-fit: cover; /* Remplit la zone, peut couper */ display: block; /* Enlève espace sous l'image */ margin: 0 auto 12px auto; /* Centrée, espace en dessous */ border: 1px solid #f1f1f1; border-radius: 3px; background-color: #e9ecef; /* Placeholder loading */ } .item-vignette h3 { /* Titre (Série / OS / Auteur) */ font-size: 1.0em; font-weight: 600; margin-top: auto; /* Pousse le titre vers le bas */ margin-bottom: 5px; min-height: 2.6em; /* Réserve espace pour ~2 lignes */ line-height: 1.3em; overflow: hidden; text-overflow: ellipsis; /* Clamp text (WebKit/Blink) */ display: -webkit-box; -webkit-line-clamp: 2; /* Limite à 2 lignes */ -webkit-box-orient: vertical; color: #212529; } .item-vignette p { /* Sous-titre (Nb tomes / Auteurs) */ font-size: 0.8em; color: #6c757d; margin-bottom: 0; margin-top: 3px; font-style: italic; /* Optionnel: limiter aussi le sous-titre */ /* min-height: 1.1em; */ /* line-height: 1.1em; */ /* overflow: hidden; */ /* text-overflow: ellipsis; */ /* white-space: nowrap; */ /* Si une seule ligne voulue */ } /* === États Lazy Load Image === */ img.lazy { opacity: 0.3; /* Plus faible pour mieux voir le changement */ /* filter: blur(5px); */ /* Optionnel: effet de flou */ transition: opacity 0.6s ease-in-out; /* Transition douce */ } img.loaded { opacity: 1; /* filter: blur(0); */ } img.error { opacity: 1; /* Rendre visible l'image de fond d'erreur */ background-color: #f8d7da !important; /* Couleur d'erreur (override placeholder) */ /* On peut ajouter une icône via ::before/::after si besoin */ /* === Styles Modale Admin === (Si vous voulez les mettre ici plutôt que dans index.php) */ /* .modal-overlay { ... } .modal-content { ... } etc. */ } .fond_semi_opaque { /* Ajouter un fond semi-transparent pour lisibilité sur image ? Optionnel */ background-color: rgba(255, 255, 255, 0.6); padding: 2px 8px; margin : 0 35px 0 35px; border-radius: 4px; }