/* DEBUT DE FICHIER : /home/cedtomcat/colorbook/static/css/style.css */

:root {
    /* Palette de Couleurs extraite de l'illustration d'art nouveau */
    --primary: #c59246; /* L'or chaud signature de l'affiche */
    --primary-hover: #b08139;
    --accent-orchid: #b84a86; /* Le rose orchidée délicat de la coiffe */
    --accent-green: #6e936a; /* Le vert sauge en arrière-plan */
    --bg-card: rgba(255, 255, 255, 0.50); /* Verre dépoli à 50% de transparence */
    --bg-app: #fcf9f2; /* Fond crème type papier d'artiste */
    --border: rgba(200, 185, 160, 0.35); /* Bordure douce assortie semi-transparente */
    --radius: 12px;
    --shadow: 0 4px 10px rgba(44, 37, 30, 0.05);
    --text-main: #2c251e; /* Brun chaud foncé pour adoucir le contraste */
    --text-muted: #7d7265; /* Brun-gris pour les textes secondaires */
    --danger: #ef4444;
}

body {
    position: relative;
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Filigrane d'Arrière-plan d'Art Nouveau fixé et non-répété */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/logo.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    filter: grayscale(40%) opacity(0.065); /* 60% de couleur préservée, opacité très douce */
    z-index: -1;
    pointer-events: none;
}

.main-wrapper {
    flex: 1;
}

/* En-tête Unifié */
.custom-header {
    background: linear-gradient(135deg, #2c251e, #c59246);
    color: white; 
    padding: 1rem 1.5rem; 
    box-shadow: var(--shadow); 
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
}

/* Cartes Verre Dépoli (Glassmorphism) */
.card-custom {
    background-color: var(--bg-card); 
    border: 1px solid var(--border); 
    border-radius: var(--radius);
    overflow: hidden; 
    box-shadow: var(--shadow); 
    transition: transform 0.2s; 
    position: relative;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.card-custom:hover { 
    transform: translateY(-2px); 
}

/* Conteneurs d'images translucides sur les cartes */
.card-custom img.card-img-top {
    background-color: rgba(44, 37, 30, 0.04) !important;
}

/* Badges de Tags & Taxonomie */
.tag-badge { 
    background-color: #f0eada; 
    color: var(--text-main); 
    font-size: 0.75rem; 
    padding: 0.2rem 0.5rem; 
    border-radius: 4px; 
    font-weight: 600; 
    text-decoration: none; 
    display: inline-block; 
    cursor: pointer; 
}

.tag-badge:hover { 
    background-color: #e2d9c7; 
}

/* Visionneuse d'Évolution (Lightbox) */
.evo-modal-img { 
    max-height: 70vh; 
    object-fit: contain; 
    width: 100%; 
    background: #000; 
}

.progression-gallery { 
    display: flex; 
    gap: 0.4rem; 
    overflow-x: auto; 
    padding: 0.5rem 0; 
    border-top: 1px dashed var(--border); 
}

.progression-thumb { 
    width: 50px; 
    height: 50px; 
    object-fit: cover; 
    border-radius: 4px; 
    cursor: pointer; 
    border: 2px solid transparent; 
}

.progression-thumb.active-thumb { 
    border-color: var(--primary); 
}

.page-card-img {
    object-fit: contain !important;
    background-color: rgba(44, 37, 30, 0.04) !important;
#ebdcb9}

/* Saisie Interactive des Badges éditables (Tags / Matériels) */
.tags-input-container {
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.4rem; 
    padding: 0.4rem;
    background-color: #fff; 
    border: 1px solid var(--border); 
    border-radius: 8px;
    align-items: center; 
    min-height: 38px;
}

.tags-input-container input {
    border: none !important; 
    outline: none !important; 
    flex-grow: 1; 
    min-width: 100px; 
    padding: 0.2rem; 
    background: transparent;
}

.tag-pill {
    background-color: #ebdcb9; 
    color: var(--text-main); 
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem; 
    border-radius: 6px; 
    display: inline-flex; 
    align-items: center; 
    gap: 0.3rem; 
    font-weight: 600;
}

.tag-pill .tag-close {
    cursor: pointer; 
    font-size: 0.75rem; 
    color: var(--text-muted);
}

.tag-pill .tag-close:hover { 
    color: var(--danger); 
}

/* Force les pilules de matériels à adopter leur design final d'or doux dès la saisie */
#page-materials-box .tag-pill, #page-edit-materials-box .tag-pill {
    background-color: #fcf6eb !important;
    border: 1.5px dashed var(--primary) !important;
    color: var(--text-main) !important;
}

/* Boutons d'Action Circulaires Volants */
.circle-action-btn {
    background-color: var(--bg-card); border: 1px solid var(--border);
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    text-decoration: none;
    box-shadow: var(--shadow); 
    transition: 0.2s; 
    cursor: pointer; 
    font-size: 0.85rem;
    color: var(--text-main);
}

.circle-action-btn:hover { 
    transform: scale(1.1); 
    background-color: var(--bg-app); 
}

/* Surcharge Harmonisée globale des boutons natifs - Teinte Or Art Nouveau chaleureuse */
.btn-indigo, .btn-success, .btn-info, .btn-warning {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: white !important;
    font-weight: bold !important;
}

.btn-indigo:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: white !important;
}

.btn-outline-indigo {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    font-weight: bold !important;
}

.btn-outline-indigo:hover, .btn-check:checked + .btn-outline-indigo {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* Surcharge des numéros actifs de la pagination */
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* Badges d'États (Statuses) */
.bg-primary { 
    background-color: var(--primary) !important; 
}

.bg-success { 
    background-color: var(--accent-orchid) !important; 
}

.bg-warning { 
    background-color: var(--accent-green) !important; 
    color: white !important; 
}

/* Conteneurs d'Éditeur de Perspective */
.crop-canvas-wrapper {
    background-color: var(--bg-app); 
    border: 2px dashed var(--border); 
    border-radius: var(--radius);
    padding: 10px; 
    display: inline-block; 
    max-width: 100%; 
    position: relative;
}

.crop-canvas-wrapper canvas { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
    background: #eee; 
}
/* ==========================================================================
   HARMONISATION COMPLÈTE DE LA PAGINATION (Design "Pilule" Unifié)
   ========================================================================== */

/* Conteneur principal (Même design que le sélecteur d'état) */
.pagination {
    display: inline-flex !important;
    border-radius: 50rem !important;           /* Coins arrondis "pilule" */
   /* background-color: rgba(255, 255, 255, 0.65) !important; /* Même fond translucide dépoli */
    background-color: var(--bs-btn-bg);  
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid var(--border) !important; /* Même bordure subtile d'or léger */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;                /* Coupe l'élément actif aux angles de la pilule */
    box-shadow: var(--shadow) !important;
}

/* Élimination des bordures de listes Bootstrap */
.page-item {
    margin: 0 !important;
    border: none !important;
}

/* Boutons et numéros individuels (Transparents pour fusionner dans la pilule) */
.page-link {
    background: transparent !important;
    color: #7d7265 !important;                  /* Même gris-brun doux que le sélecteur */
    border: none !important;                    /* Suppression des bordures séparatrices internes */
    padding: 0.35rem 0.9rem !important;         /* Alignement de hauteur parfait */
    font-weight: bold !important;
    font-size: 0.85rem !important;
    transition: background-color 0.15s, color 0.15s;
}

/* Effet au survol des boutons non-actifs */
.page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(226, 217, 199, 0.5) !important; /* Voile doré léger au survol */
    color: #2c251e !important;                  /* Texte légèrement plus foncé */
}

/* État actif (La page sélectionnée - Conserve l'or chaud d'origine) */
.page-item.active .page-link {
    background-color: var(--primary) !important; /* Or chaud signature */
    color: white !important;
    font-weight: bold !important;
}

/* Boutons désactivés (ex: flèches inactives aux extrémités) */
.page-item.disabled .page-link {
    background: transparent !important;
    color: rgba(125, 114, 101, 0.3) !important; /* Gris très estompé */
    cursor: not-allowed;
}
/* Bouton Orchidée personnalisé (Couleur de la fleur du logo) */
.btn-orchid {
    background-color: var(--accent-orchid) !important;
    border-color: var(--accent-orchid) !important;
    color: white !important;
    font-weight: bold !important;
    transition: background-color 0.15s, transform 0.1s;
}

.btn-orchid:hover {
    background-color: #9d3d71 !important; /* Rose orchidée légèrement assombri */
    border-color: #9d3d71 !important;
    color: white !important;
    transform: scale(1.02);
}
/* Grille moderne auto-adaptative pour garder une taille de fiches constante */
#books-grid, #pages-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 1.5rem !important;
}

/* Désactivation des étirements Bootstrap devenus inutiles */
#books-grid > .col, #pages-grid > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Style pour les flèches de navigation de la lightbox d'historique */
.btn-evo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255,255,255,0.2);
    color: white !important;
    font-size: 2.2rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.15s, transform 0.1s;
    padding-bottom: 6px;
}
.btn-evo-nav:hover {
    background-color: rgba(0, 0, 0, 0.75);
    transform: translateY(-50%) scale(1.08);
}

/* Style pour les flèches de défilement des vignettes */
.btn-evo-scroll {
    background-color: #f0eada;
    border: 1px solid var(--border);
    color: var(--text-main) !important;
    font-weight: bold;
    font-size: 1.2rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background-color 0.1s;
    padding-bottom: 3px;
    flex-shrink: 0;
}
.btn-evo-scroll:hover {
    background-color: #e2d9c7;
}

/* Conteneur de vignettes sans barre de défilement apparente */
.progression-gallery {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.progression-gallery::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   OPTIMISATIONS ERGONOMIQUES MOBILES (Écrans < 768px)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. En-tête compact pour préserver la hauteur d'écran */
    .custom-header {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    .custom-header img {
        width: 38px !important;
        height: 38px !important;
    }
    .custom-header h2 {
        font-size: 1.15rem !important;
    }
    .custom-header span.opacity-75 {
        display: none !important; /* Masque le sous-titre secondaire sur mobile */
    }
    
    /* Stats de l'en-tête sur une ligne compacte */
    .custom-header .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Boutons de profil/déconnexion resserrés */
    .custom-header .col-md-4.text-md-end {
        justify-content: center !important;
        gap: 0.25rem !important;
        margin-top: 0.4rem !important;
    }
    .custom-header .btn {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* 2. Empilement vertical propre des blocs de titres & boutons d'ajouts */
    .container-fluid > .d-flex.align-items-center,
    .row.align-items-center.mb-4.pb-3.border-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Boutons d'ajout larges et confortables pour les pouces */
    .btn-orchid, .btn-success {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0.4rem !important;
    }
    .ms-auto {
        margin-left: 0 !important;
        width: 100%;
    }

    /* 3. Défilement horizontal fluide de tous les sélecteurs de boutons */
    .btn-group.rounded-pill,
    .btn-group.btn-group-sm,
    .pagination {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
        scrollbar-width: none !important;  /* Masque la scrollbar sur Firefox */
    }
    
    /* Masque la scrollbar sur Chrome/Safari */
    .btn-group.rounded-pill::-webkit-scrollbar,
    .btn-group.btn-group-sm::-webkit-scrollbar,
    .pagination::-webkit-scrollbar {
        display: none !important;
    }

    /* Empêche les textes des boutons de se déformer lors du défilement */
    .btn-group.rounded-pill .btn,
    .btn-group.btn-group-sm .btn,
    .pagination .page-link {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Ajustement des marges des blocs d'étiquettes de filtres */
    .d-flex.align-items-center.gap-2 {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Champs de recherche sur toute la largeur */
    #filter-books-input, 
    #filter-pages-input {
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 0.25rem;
    }
    
    /* Centrage du titre du bloc de tri */
    .text-md-end {
        text-align: left !important;
    }
    .btn-warning, .btn-info {
        flex: 1 1 45% !important; /* Prend environ la moitié de l'espace chacun */
        font-size: 0.72rem !important; /* Ajuste légèrement la taille du texte */
        padding: 0.35rem 0.5rem !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   ALIGNEMENT & MASQUAGE DES LABELS DE FILTRES (PC & MOBILE)
   ========================================================================== */

/* Masque les étiquettes textuelles "Trier par :" et "État :" devenues superflues */
span.text-muted.small, 
span.text-muted.me-2.small,
.d-flex.align-items-center > span.text-muted,
div.col-md-4 > span.text-muted,
div.col-md-5 > span.text-muted {
    display: none !important;
}

/* Optimisation et centrage sur mobile */
@media (max-width: 767px) {
    /* Centrage horizontal absolu de tous les groupes de boutons */
    .btn-group.rounded-pill,
    .btn-group.btn-group-sm,
    .pagination {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }

    /* Centrage des conteneurs parents sur smartphone */
    .d-flex.align-items-center.gap-2,
    .col-md-8.d-flex,
    .col-md-6.d-flex,
    .col-md-4.text-md-end {
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Centrage des barres de pagination haute et basse */
    [id*="-pager-top"],
    [id*="-pager-bottom"] {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* Bloc de regroupement visuel renforcé pour la recherche et le hasard */
.search-group-wrapper {
    background-color: rgba(44, 37, 30, 0.035) !important; /* Fond un peu plus chaud */
    border: 1.5px dashed rgba(125, 114, 101, 0.6) !important; /* Bordure pointillée plus épaisse et foncée */
    border-radius: 16px !important;
    padding: 0.75rem !important;
    margin-bottom: 0.85rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    
    /* CORRECTIF PC : Largeur bridée et centrage horizontal sur grand écran */
    width: 100% !important;
    max-width: 540px !important; /* S'aligne parfaitement sur la largeur des paginations */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Double ombre : ombre intérieure douce + ombre portée extérieure */
    box-shadow: inset 0 1px 4px rgba(44, 37, 30, 0.03), var(--shadow) !important;
}

/* ==========================================================================
   SYSTÈME DE NOTATION PAR ÉTOILES (Taille X2 & Unification)
   ========================================================================== */

/* Sélecteur interactif d'étoiles AU SEIN DES FORMULAIRES (X2 plus gros) */
.star-rating-form-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
}

.star-rating-form-selector .star-item-form {
    font-size: 2.3rem !important; /* Deux fois plus grosses pour un clic facile */
    color: #cbd5e1;
    transition: color 0.15s, transform 0.1s;
}

.star-rating-form-selector .star-item-form:hover {
    transform: scale(1.15);
}

.star-rating-form-selector .star-item-form.active {
    color: #fbbf24 !important; /* Jaune d'or chaud */
}

/* Croix d'effacement rapide de la note à 0 */
.star-rating-form-selector .clear-stars-form {
    font-size: 1.4rem !important; /* Deux fois plus grosse */
    color: rgba(125, 114, 101, 0.4);
    margin-right: 0.4rem;
    transition: color 0.1s;
}

.star-rating-form-selector .clear-stars-form:hover {
    color: #ef4444 !important;
}

/* ZONE D'AFFICHAGE DES ÉTOILES EN LECTURE SEULE SUR LES CARTES (X2 plus gros qu'avant) */
.star-rating-display {
    font-size: 1.2rem !important; /* Deux fois plus grosses */
    letter-spacing: 0.05rem;
    color: #fbbf24 !important;
}

/* FIN DE FICHIER : /home/cedtomcat/colorbook/static/css/style.css */