/* ====== entertain-style.css (page perso divertissements) ======
   + Toggle amis, select Année compact, cartes Netflix
   + État de sélection + bouton d'action direct
   + Upload preview + fallback image
   + MODALES AMÉLIORÉES
================================================================= */

/* Sélecteur universel pour garantir que le padding est bien calculé partout,
   et pour masquer tout débordement inattendu. */
*, *::before, *::after {
    box-sizing: border-box;
}




/* --- FIX DU FOND QUI DÉBORDE --- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    
    overflow-x: hidden;
}

/* Le body aura un fond noir lorsque la modale d'aperçu est visible */
.modal:not(.hidden) ~ .app + #previewModal .modal-backdrop {
    background: rgba(0, 0, 0, 0.9);
}
/* ------------------------------- */

.app {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 20px;
    box-sizing: border-box; /* CLÉ: Assure que le padding de 20px est inclus dans la largeur de 100% */
    overflow-x: hidden; 
}

/* Toolbar */
.entertainment-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.filters-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filters-right{display:flex;align-items:center;gap:12px}

/* Filtres type (pills) */
.filter-buttons{display:flex;gap:8px;flex-wrap:wrap}
.filter-buttons .btn-filter{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border-color);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:500;transition:all .2s;line-height:1}
.filter-buttons .btn-filter:hover{background:var(--border-color)}
.filter-buttons .btn-filter.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Switch amis */
.switch-wrap{display:inline-flex;align-items:center;gap:10px;color:var(--text-secondary);font-weight:500;user-select:none}
.switch-wrap input{position:absolute;opacity:0;pointer-events:none}
.switch{width:46px;height:26px;background:#e5e7eb;border-radius:999px;position:relative;transition:background .2s;box-shadow:inset 0 0 0 1px #e2e8f0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.switch-wrap input:checked + .switch{background:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.switch-wrap input:checked + .switch::after{transform:translateX(20px)}
.switch-label{font-size:.92rem}

/* Année + bouton */
.year-select-wrap{display:flex;align-items:center;gap:10px;margin:0}
.year-select-wrap .form-label{color:var(--text-secondary);font-weight:500}
#yearSelect{max-width:140px;padding:8px 10px;border:1.5px solid var(--border-color);border-radius:10px;background:#fff;color:var(--text-primary);outline:none}
#yearSelect:focus{border-color:var(--primary)}
.btn-primary{background:var(--primary);color:#fff;padding:9px 16px;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:transform .05s ease,background .2s}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:hover{background:var(--primary-dark,#0d6efd)}
.btn-secondary{background:transparent;color:var(--text-primary);padding:9px 14px;border:1.5px solid var(--border-color);border-radius:10px;font-weight:600;cursor:pointer}

/* Style pour le bouton 'Mode Sélection' quand il est actif */
#toggleSelectionModeBtn.active-mode {
    background: #ffa726; /* Orange pour l'état actif */
    border-color: #ffa726;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(255,167,38,0.2);
}
#toggleSelectionModeBtn.active-mode:hover {
    background: #ffb74d;
    border-color: #ffb74d;
}

/* Catalogue */
#catalog-container{display:block}
.catalog-row{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.row-title{margin:0;font-size:1.45rem;font-weight:700;color:var(--text-primary);text-transform:capitalize;letter-spacing:.2px}
.row-content{display:flex;gap:16px;overflow-x:auto;padding:4px 0 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--primary) #e0f2fe}
.row-content>*{scroll-snap-align:start}
.row-content::-webkit-scrollbar{height:8px}
.row-content::-webkit-scrollbar-track{background:#e0f2fe;border-radius:4px}
.row-content::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:4px}

/* --- NOUVEAU BLOC AJOUTÉ --- */
/* Grille pour la liste des recommandations */
.recommendation-grid {
    display: grid;
    /* Utilise la largeur de carte de 168px définie dans ce fichier */
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 25px 20px; /* Espace vertical et horizontal */
    padding-top: 10px; /* Un peu d'espace en haut */
}
/* --- FIN DU NOUVEAU BLOC --- */


/* Cartes */
.entertainment-card-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.card-release-date{font-weight:600;font-size:.82rem;color:var(--text-secondary);background-color:rgba(255,255,255,.75);padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px);border:1px solid #e2e8f0}
.poster-card{width:168px;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column;cursor:pointer;position:relative}
.poster-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.poster-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#f1f5f9}

.poster-card-caption{
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne les enfants à gauche */
    gap: 4px; /* Ajoute un écart entre les lignes */
    width: 100%; /* S'assurer qu'il prend toute la largeur */
}
.poster-title{
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    font-size: .98rem;
    flex-grow: 1; /* Permet au titre de prendre l'espace */
    white-space: normal; /* Permet au titre de passer à la ligne */
    text-align: left; /* Aligne le titre à gauche */
}
.poster-meta{font-size:.78rem;color:#64748b;margin-top:4px}

/* Styles pour le résumé déroulant (recommandations) */
.poster-title-wrapper {
    display: flex;
    justify-content: space-between; /* Met le titre à gauche et le bouton à droite */
    align-items: center;
    gap: 8px;
    width: 100%; /* Prend toute la largeur de la légende */
}

.btn-info {
    background: transparent;
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--primary, #3b82f6);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.btn-info:hover {
    background: #e0f2fe;
    border-color: var(--primary, #3b82f6);
}

.poster-overview {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary, #1e293b);
    margin-top: 6px;
    text-align: left;
    width: 100%;
    max-height: 150px; /* Limite la hauteur du résumé */
    overflow-y: auto; /* Ajoute un scroll si le résumé est trop long */
    padding-right: 5px; /* Espace pour la barre de scroll */
    
    /* Barre de scroll custom */
    scrollbar-width: thin;
    scrollbar-color: var(--primary, #3b82f6) #e0f2fe;
}
.poster-overview::-webkit-scrollbar { 
    height: 6px; 
    width: 6px; 
}
.poster-overview::-webkit-scrollbar-track { 
    background: #e0f2fe; 
    border-radius: 3px;
}
.poster-overview::-webkit-scrollbar-thumb { 
    background-color: var(--primary, #3b82f6); 
    border-radius: 3px;
}

/* Logique pour cacher/montrer le résumé */
.poster-overview.hidden {
    display: none;
}

/* Style du bouton "info" quand le résumé est visible */
.poster-card.expanded .btn-info {
    background: var(--primary, #3b82f6);
    color: white;
    border-color: var(--primary, #3b82f6);
}
/* Fin des styles de résumé */


/* Nouveau bouton d'action (Remplacement du badge de sélection par un engrenage) */
.poster-card .action-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #3b82f6; /* Bleu pour l'action */
    opacity: 0.9;
    transition: opacity 0.15s, transform 0.15s;
    cursor: pointer;
    z-index: 10;
}
.poster-card .action-badge:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Le badge de sélection est conservé mais masqué par défaut */
.poster-card .select-badge{
    position:absolute;
    top:8px;
    right:8px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    border:1px solid #cbd5e1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:var(--primary);
    opacity:0;
    transform:scale(.9);
    transition:opacity .15s,transform .15s
}
/* on garde selected juste pour le highlight de la carte si on veut */
.poster-card.selected{outline:2px solid var(--primary);box-shadow:0 0 0 4px rgba(0,123,255,.12),var(--shadow-md)}


/* Upload preview */
.upload-preview{display:flex;gap:10px;align-items:center}
.upload-preview img{width:70px;height:105px;object-fit:cover;border-radius:8px;box-shadow:var(--shadow-sm);display:none}
.upload-status{font-size:.85rem;color:var(--text-secondary)}

/* État image fallback */
.img-fallback{filter:grayscale(0.2)}

/* Vidage / loader */
.empty-list-message{padding:24px;text-align:center;color:var(--text-secondary);background:#f8fafc;border:1px dashed #e2e8f0;border-radius:12px}

/* Responsive */
@media (max-width:768px){
  .row-title{font-size:1.25rem}
  .poster-card{width:150px}
  
  /* Grille de reco sur mobile */
  .recommendation-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 20px 15px;
  }
}


/* ========================================================== */
/* ---  MODALES AJUSTEMENTS --- */
/* ========================================================== */

/* Structure de la Modale (pour #addModal et #deleteActionModal) */
#addModal .modal-card {
    max-width: 750px; 
    width: 100vw;      
    max-height: 90vh; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px; 
}

/* Modale de supression */
#deleteActionModal .modal-card {
    max-width: 450px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.modal-close{
    border: none;
    border-radius: 50%;
    background-color: #ef4444; 
    width:30px;
    height: 30px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover {
    background-color: #dc2626;
}
.modal-header{
    display: flex;
    justify-content: space-between;
}
/* En-tête Fixe (Modale d'ajout/suppression) */
#addModal .modal-header,
#deleteActionModal .modal-header {
    flex-shrink: 0; 
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #fff; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#addModal .modal-header h3,
#deleteActionModal .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700; 
    color: #1e293b;
}

/* MODALE D'APERÇU - CIBLAGE ET RÉDUCTION DE LA TAILLE */
#previewModal .modal-header {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    height: 70px;
    justify-content: space-between;
    /* RÉDUCTION DU PADDING VERTICAL */
    padding: 6px 16px; /* Ajusté pour une barre plus fine */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    backdrop-filter: blur(4px);
    width: 100%;
    box-sizing: border-box;
    align-items: center; /* Assure le centrage vertical */
}

#previewModal .modal-header h3 {
    /* Taille de police réduite */
    font-size: 1.0rem; 
    font-weight: 500;
}
/* FIN MODALE D'APERÇU */

#previewModal .modal-close {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: white;
}

/* Corps Scrollable */
#addModal .modal-body {
    overflow-y: auto;
    padding: 24px;
    background-color: #f7f9fb; 
}

#deleteActionModal .modal-body {
    padding: 24px;
}

/* --- Nouveaux Styles Boutons d'Action --- */
.action-buttons-group {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    justify-content: stretch;
}

.btn-action {
    flex-grow: 1;
    padding: 12px 15px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    border: 2px solid var(--border-color, #cbd5e1);
    background: #fff;
    color: var(--text-primary, #1e293b);
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Style de l'action sélectionnée */
.btn-action.active-action {
    border-color: var(--primary, #3b82f6);
    background: #e0f2fe; /* Light blue background */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#btn_delete_action.active-action {
    border-color: #ef4444; /* Rouge pour la suppression */
    background: #fee2e2;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Conteneur des options de suppression granulaire */
.delete-details-container {
    padding: 10px 0;
    transition: all 0.3s ease-out;
    opacity: 1;
    max-height: 500px;
    overflow: hidden;
    padding-left: 10px; /* Petit retrait pour les options */
}

.delete-details-container.hidden-details {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    visibility: hidden;
}

.delete-details-container .scope-option {
    display: flex; 
    align-items: center; /* ALIGNEMENT CLÉ */
    margin-bottom: 12px; 
    font-weight: 500;
    cursor: pointer;
    padding: 5px 0; /* Espace vertical */
}

.delete-details-container .scope-option input[type="radio"] {
    margin-right: 12px;
    flex-shrink: 0; /* Empêche le radio de rétrécir */
    width: 16px; /* Assure une taille minimale */
    height: 16px;
}

.delete-details-container .scope-message-single {
    padding: 5px 0; 
    color: #ef4444; 
    font-weight: 500;
    margin-top: 5px;
}

/* Style pour le bouton de confirmation désactivé (quand action=delete mais scope non choisi) */
#confirmDeleteBtn:disabled {
    background: #e5e7eb !important; 
    border-color: #e5e7eb !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
/* --- Fin Nouveaux Styles Boutons d'Action --- */


/* Le Formulaire */
#addForm {
    display: flex;
    flex-direction: column;
    gap: 28px; 
}

/* Rangées de Formulaire (Label + Input) */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.form-row label {
    font-weight: 600; 
    font-size: 0.95rem;
    color: #475569; 
}

/* Champs de saisie */
.form-row input[type="text"],
.form-row input[type="url"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row input[type="number"],
.form-row input[type="file"],
.form-row select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box; 
    font-size: 0.95rem;
    color: #1e293b;
}

.form-row input:focus,
.form-row select:focus {
    border-color: #3b82f6; 
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}


/* Grille à 2 colonnes */
.form-row.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; 
    align-items: start; 
}

/* Blocs de mode (Hebdo, Mensuel...) - Amélioration du style */
.mode-block {
    background: #ffffff; 
    border: 1px solid #c9d6e4; 
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

/* Zone d'upload - Amélioration du style */
.upload-preview {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 105px; 
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 2px dashed #94a3b8; 
    transition: border-color 0.2s;
}

.upload-preview img {
    width: 70px;
    height: 105px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}

/* Table "Multi-parties" */
.parts-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden; 
}

.parts-head, .parts-row {
    display: grid;
    grid-template-columns: 1fr 100px 50px; 
    gap: 10px;
    padding: 10px 12px;
    align-items: center;
}

.parts-head {
    background: #f1f5f9; 
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.parts-row {
    border-top: 1px solid #e2e8f0;
}

.parts-row input {
    padding: 8px;
    font-size: 0.9rem;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s;
    color: #94a3b8;
}

.btn-icon.btn-del:hover {
    background: #fee2e2; 
    color: #ef4444; 
}

/* Pied de page / Bouton Submit (Sticky Footer) */
#addForm > .form-row[style*="margin-top:18px;"] {
    margin: 0; 
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0; 
    background: #fff; 
    
    position: sticky;
    bottom: 0;
    flex-shrink: 0; 

    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    border-radius: 0 0 14px 14px; /* Coins arrondis en bas de la barre */
}

/* Style du bouton submit lui-même */
#addForm button[type="submit"] {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--primary, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

#addForm button[type="submit"]:hover {
    background: var(--primary-dark, #2563eb);
    transform: translateY(-1px); /* Moins agressif */
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

/* Responsive */
@media (max-width: 600px) {
    .form-row.two {
        grid-template-columns: 1fr;
        gap: 24px; 
    }

    #addModal .modal-body,
    #addModal .modal-header {
        padding: 16px; 
    }
    
    #deleteActionModal .modal-body {
        padding: 16px;
    }

    /* Ajustement du sticky footer pour le padding mobile */
    #addForm > .form-row[style*="margin-top:18px;"] {
         margin-left: -16px;
         margin-right: -16px;
         margin-bottom: -16px;
         padding: 16px;
    }
    
    /* Responsive pour les boutons d'action */
    .action-buttons-group {
        flex-direction: column;
    }
}