/* ==========================================================================
   GLOBAL & POLICES
   ========================================================================== */

body {
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    background-color: #fcfbfa;
    color: #333;
}


/* ==========================================================================
   BARRE DE NAVIGATION (NAVBAR UNIQUEMENT GÉRÉE PAR MAIN.JS)
   ========================================================================== */

.navbar {
    background-color: #0d1520;
    border-bottom: 1px solid rgba(214, 179, 106, 0.2);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.navbar,
header {
    position: fixed;
    /* Force la barre à rester fixe à l'écran */
    top: 0;
    /* La colle tout en haut */
    left: 0;
    width: 100%;
    /* Prend toute la largeur */
    z-index: 1000;
    /* S'assure qu'elle passe au-dessus des poèmes lors du défilement */
}

.navbar,
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 🛡️ Sécurité de superposition : le chiffre élevé force la barre à rester TOUJOURS au-dessus du texte */
    z-index: 9999 !important;
    /* Pour s'assurer qu'on ne voit pas le texte à travers, vérifie qu'elle a un fond opaque */
    background-color: #0d1520;
}

.navbar,
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 1. Rend la barre totalement opaque avec la couleur sombre de ton site */
    background-color: #0d1520 !important;
    /* 2. Donne une priorité absolue pour passer AU-DESSUS des textes */
    z-index: 9999 !important;
    /* Optionnel : ajoute une petite bordure dorée très fine en bas pour séparer proprement */
    border-bottom: 1px solid rgba(214, 179, 106, 0.2);
}


/* ⚠️ Conseil important : Pour éviter que le haut de tes poèmes ne soit caché sous la barre fixe, 
   ajoute une petite marge en haut de ton conteneur principal (body ou container) : */

body {
    padding-top: 70px;
    /* Ajuste cette valeur selon la hauteur de ta navbar */
}

.navbar a,
.dropdown-toggle {
    color: #f3ead8;
    text-decoration: none;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    user-select: none;
}

.navbar a:hover,
.dropdown-toggle:hover {
    color: #d6b36a;
    background-color: rgba(255, 255, 255, 0.05);
}

.navbar .nav-profil {
    color: #d6b36a;
    font-weight: bold;
    margin-left: auto;
}


/* ==========================================================================
   STRUCTURE UNIQUE DES MENUS DÉROULANTS (SANS HOVER CSS, GÉRÉ PAR LE CLIC JS)
   ========================================================================== */

.dropdown {
    position: relative;
    display: inline-block;
}


/* La boîte du menu (Masquée par défaut, rendue stable et fixe par le clic) */


/* Le contenu du menu (masqué par défaut) */

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0d1520;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(214, 179, 106, 0.3);
    border-radius: 6px;
    z-index: 1000;
    padding: 5px 0;
    margin-top: 5px;
}


/* LA CLÉ DE VOÛTE : Quand le parent possède la classe .active, on affiche le menu */

.dropdown.active .dropdown-content {
    display: block !important;
}


/* Liens internes au menu déroulant */

.dropdown-content a {
    color: #f3ead8 !important;
    padding: 12px 16px !important;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 15px;
    border-radius: 0;
    background: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-content a:hover {
    background-color: rgba(214, 179, 106, 0.15) !important;
    color: #d6b36a !important;
}


/* ==========================================================================
   BOUTON SON & LIGHTBOX
   ========================================================================== */

.sound-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #d6b36a;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    z-index: 2000;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 85%;
    border-radius: 4px;
}

.lightbox .nav {
    position: absolute;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    user-select: none;
    padding: 20px;
}

.lightbox .prev {
    left: 20px;
}

.lightbox .next {
    right: 20px;
}


/* ==========================================================================
   TABLEAU DE BORD ADMINISTRATEUR (ADMIN DASHBOARD)
   ========================================================================== */

.admin-body {
    background: #070d14;
    color: #f3ead8;
}

.admin-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
}

.admin-container h1 {
    color: #d6b36a;
    text-align: center;
    border-bottom: 2px solid rgba(214, 179, 106, 0.2);
    padding-bottom: 15px;
}

.badge {
    font-size: 16px;
    background: rgba(214, 179, 106, 0.15);
    color: #d6b36a;
    padding: 5px 12px;
    border-radius: 20px;
    margin-left: 15px;
    border: 1px solid rgba(214, 179, 106, 0.3);
    font-weight: normal;
}

.alert {
    padding: 12px;
    border-radius: 6px;
    text-align: center;
}

.alert-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.alert-success {
    color: #51cf66;
    background: rgba(81, 207, 102, 0.1);
}

.dashboard-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.panel {
    flex: 1;
    min-width: 450px;
    background: #0d1520;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(214, 179, 106, 0.1);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.panel-title {
    color: #d6b36a;
    margin: 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.admin-table th {
    padding: 10px;
    border-bottom: 1px solid rgba(214, 179, 106, 0.3);
    color: #a0aec0;
}

.admin-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-table td {
    padding: 12px;
}

.role-admin {
    background: #d6b36a;
    color: #0d1520;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.role-user {
    background: #2d3748;
    color: #e2e8f0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.btn-add {
    background: #d6b36a;
    color: #0d1520;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: background 0.2s ease;
}

.btn-add:hover {
    background: #f5deb3;
}

.input-pwd {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #4a5568;
    background: #1a202c;
    color: white;
    font-size: 12px;
    width: 100px;
}

.btn-action {
    background: #4a5568;
    color: white;
    padding: 5px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.btn-delete {
    background: #e53e3e;
    color: white;
    padding: 5px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.link-back {
    color: #a0aec0;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 15px;
    margin-top: 40px;
}

.link-back:hover {
    color: #d6b36a;
}


/* ==========================================================================
   PAGE D'AIDE À L'IMPORT (AIDE IMPORT)
   ========================================================================== */

.poemes-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
}

.titre-page {
    color: #d6b36a;
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.poeme-card {
    background: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.15);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.poeme-contenu-bilingue {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.poeme-colonne-persan {
    flex: 1;
    min-width: 280px;
    direction: rtl;
    text-align: right;
}

.poeme-colonne-francais {
    flex: 1;
    min-width: 280px;
    direction: ltr;
    text-align: left;
}

.separateur-aide {
    border: 0;
    border-top: 1px solid rgba(214, 179, 106, 0.2);
    margin: 15px 0;
}

.ligne-persan {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #f3ead8;
    margin-bottom: 12px;
}

.ligne-fr {
    font-size: 1rem;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 12px;
}

.poeme-card strong {
    color: #d6b36a;
}


/* ==========================================================================
   PAGE D'AJOUT DE POÈME (AJOUTER)
   ========================================================================== */

.form-selection-box {
    margin: 25px auto;
    text-align: left;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.form-label-header {
    color: #f5deb3;
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 1.1em;
}

.radio-group-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.radio-label {
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-input {
    transform: scale(1.3);
}

.checkbox-grid {
    margin-left: 30px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.checkbox-label {
    color: #ccc;
    cursor: pointer;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-input {
    transform: scale(1.1);
}

.form-container {
    max-width: 600px;
    margin: 30px auto;
}

.form-field-group {
    margin: 20px 0;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.form-input-label {
    color: #f5deb3;
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-input-text,
.form-select {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 16px;
    box-sizing: border-box;
}

.form-select option {
    background: #07111f;
    color: white;
}


/* ==========================================================================
   PAGE DÉTAIL D'UN ALBUM (ALBUM DETAIL & GALERIE)
   ========================================================================== */

.album-detail-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.album-header {
    text-align: center;
    margin-bottom: 40px;
}

.album-title {
    color: #d6b36a;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.album-description {
    color: #a0aec0;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.media-card {
    background: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.1);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(214, 179, 106, 0.3);
}

.media-card img.photo {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.media-card video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.media-info {
    padding: 12px;
    background: #0d1520;
    font-size: 0.9rem;
    color: #e2e8f0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.media-date {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 4px;
    display: block;
}


/* ==========================================================================
   GALERIE D'ALBUM TRADITIONNELLE (ALBUM.HTML)
   ========================================================================== */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery .photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(214, 179, 106, 0.1);
}

.gallery .photo:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-color: rgba(214, 179, 106, 0.5);
}


/* ==========================================================================
   LISTE DES ALBUMS (ALBUMS.HTML)
   ========================================================================== */

.pas-de-donnees {
    width: 100%;
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
    color: #888;
    font-style: italic;
}

.album-card {
    background-color: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.2);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.album-card:hover {
    transform: scale(1.02);
    border-color: rgba(214, 179, 106, 0.5);
}

.album-card a {
    text-decoration: none;
}

.album-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.album-no-cover {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #0d1520 0%, #1a2332 100%);
    display: block;
}

.album-card-title {
    text-align: center;
    padding: 15px;
    color: #f3ead8;
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.album-card:hover .album-card-title {
    color: #d6b36a;
}


/* ==========================================================================
   GALERIE DES SOUVENIRS (GALERIE.HTML)
   ========================================================================== */

.galerie-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

.grille-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

.cadre-photo {
    background: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.15);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cadre-photo:hover {
    transform: scale(1.03);
    border-color: #d6b36a;
}

.cadre-photo img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.aucun-visuel {
    text-align: center;
    color: #a0aec0;
    font-style: italic;
    padding: 40px;
}


/* ==========================================================================
   صفحه معرفی غایب (GHAYEB.HTML)
   ========================================================================== */

.lang-switch {
    text-align: center;
    margin: 20px 0;
}

.btn-lang {
    background: rgba(214, 179, 106, 0.1);
    color: #d6b36a;
    border: 1px solid rgba(214, 179, 106, 0.4);
    padding: 6px 14px;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-lang:hover {
    background: #d6b36a;
    color: #0d1520;
}

.ghayeb-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 20px;
}

.ghayeb-card {
    background: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.15);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.ghayeb-texte {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #f3ead8;
    margin-bottom: 25px;
}

.ghayeb-citation {
    font-size: 1.3rem;
    font-style: italic;
    color: #d6b36a;
    margin: 25px 0;
    line-height: 1.6;
}

.signature {
    margin-top: 25px;
    color: #a0aec0;
    font-size: 1.1rem;
}

.persan {
    font-family: 'Vazirmatn', sans-serif;
}

#fa {
    display: none;
    direction: rtl;
    text-align: right;
}

.separateur {
    width: 60px;
    height: 20px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(214, 179, 106, 0.3);
}

#fa .separateur {
    margin: 0 auto;
}


/* ==========================================================================
   PAGE D'IMPORTATION DE MÉDIAS (IMPORTER.HTML)
   ========================================================================== */

.import-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    border: 1px solid #444;
    color: white;
}

.import-title {
    text-align: center;
    color: #d6b36a;
    margin-bottom: 25px;
}

.flash-message {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
}

.flash-success {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid #28a745;
}

.flash-error {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
}

.import-field-group {
    margin-bottom: 20px;
}

.import-label {
    display: block;
    margin-bottom: 8px;
    color: #d6b36a;
    font-weight: bold;
}

.radio-flex-group {
    display: flex;
    gap: 30px;
}

.radio-option-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.radio-option-label input {
    accent-color: #d6b36a;
}

.import-select,
.import-input-text {
    width: 100%;
    padding: 10px;
    background: #222;
    border: 1px solid #555;
    border-radius: 6px;
    color: white;
    box-sizing: border-box;
}

.import-input-file {
    width: 100%;
    padding: 10px;
    background: #111;
    border: 1px dashed #555;
    border-radius: 6px;
    color: #ccc;
    box-sizing: border-box;
}

.import-help-text {
    color: #888;
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
}

.btn-submit-import {
    width: 100%;
    padding: 12px;
    background: #d6b36a;
    color: #111;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-submit-import:hover {
    background: #f5deb3;
}

.btn-submit-import:active {
    transform: scale(0.99);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #0d1520;
    /* Ta couleur sombre */
    min-width: 200px;
    z-index: 1000;
}


/* C'est cette règle qui ouvre le menu au clic avec le nouveau main.js */

.dropdown.active .dropdown-content {
    display: block !important;
}


/* ==========================================================================
   AJUSTEMENTS ET CORRECTIONS DES MENUS DÉROULANTS
   ========================================================================== */


/* 1. Redonne de l'élégance et de la fluidité aux menus */

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0d1520;
    /* Ton fond sombre d'origine */
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(214, 179, 106, 0.4);
    /* Ta jolie bordure dorée */
    border-radius: 6px;
    z-index: 1000;
    padding: 8px 0;
    margin-top: 5px;
    transition: all 0.3s ease;
    /* Ajoute une transition douce */
}


/* 2. LE SURVOL (HOVER) : Pour que le menu s'ouvre naturellement sur ton iMac */

@media (min-width: 769px) {
    .dropdown:hover .dropdown-content {
        display: block !important;
    }
}


/* 3. LE CLIC (ACTIVE) : Reste actif pour la sécurité ou le tactile */

.dropdown.active .dropdown-content {
    display: block !important;
}


/* 4. Style des liens à l'intérieur du menu */

.dropdown-content a {
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    transition: background 0.2s;
}


/* Effet de survol sur les liens du menu (Doré Ghayeb) */

.dropdown-content a:hover {
    background-color: rgba(214, 179, 106, 0.2);
    color: #d6b36a;
}


/* 5. Correction de l'alignement pour éviter que la navbar se décale */

.dropdown {
    display: inline-block;
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}


/* ==========================================================================
   DESIGN DE LA PAGE D'ACCUEIL (HOME CONTAINER)
   ========================================================================== */

.home-container {
    max-width: 800px;
    margin: 60px auto;
    padding: 40px;
    background-color: #0d1520;
    /* Fond sombre élégant comme le reste du site */
    border: 1px solid rgba(214, 179, 106, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.home-title {
    color: #d6b36a;
    /* Ton doré signature */
    font-size: 2.5rem;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.titre-persan {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 500;
    direction: rtl;
}

.home-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #f3ead8;
    /* Couleur crème douce pour la lecture */
    margin-bottom: 40px;
}

.home-text strong {
    color: #d6b36a;
}

.home-text em {
    color: #f5deb3;
    font-style: italic;
}


/* Zone des boutons de changement de langue */

.lang-switch {
    margin-top: 20px;
}

.btn-lang {
    background: rgba(214, 179, 106, 0.1);
    color: #d6b36a;
    border: 1px solid rgba(214, 179, 106, 0.4);
    padding: 8px 20px;
    margin: 0 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

.btn-lang:hover {
    background: #d6b36a;
    color: #0d1520;
    transform: translateY(-2px);
}


/* ==========================================================================
   PAGE : TOUS LES POÈMES (/POEMES)
   ========================================================================== */


/* Conteneur principal de la liste des poèmes */

.poemes-liste-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px;
}


/* Titre principal de la page */

.poemes-title {
    color: #d6b36a;
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    font-weight: 500;
}


/* La carte ou le bloc entourant chaque poème */

.poeme-block-card {
    background-color: #0d1520;
    /* Ton fond sombre fétiche */
    border: 1px solid rgba(214, 179, 106, 0.2);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 35px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.poeme-block-card:hover {
    border-color: rgba(214, 179, 106, 0.5);
    transform: translateY(-2px);
    /* Léger effet de soulèvement au survol */
}


/* Titre du poème à l'intérieur de sa carte */

.poeme-card-title {
    color: #d6b36a;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(214, 179, 106, 0.15);
    padding-bottom: 10px;
}


/* Structure bilingue côte à côte pour les vers */

.poeme-grid-vers {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    /* S'adapte parfaitement sur l'iPhone en se mettant l'un sous l'autre */
}


/* Colonne Persane (Droite à Gauche) */

.colonne-vers-fa {
    flex: 1;
    min-width: 250px;
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #f3ead8;
    /* Couleur crème douce */
}


/* Colonne Française (Gauche à Droite) */

.colonne-vers-fr {
    flex: 1;
    min-width: 250px;
    direction: ltr;
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e0e0e0;
}


/* Petites notes ou date sous le poème */

.poeme-footer-meta {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #718096;
    text-align: right;
}


/* ==========================================================================
   CORRECTION DU FOND GLOBAL DE L'APPLICATION
   ========================================================================== */

body {
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    background-color: #070d14 !important;
    /* Un bleu-noir très profond pour tout le fond du site */
    color: #f3ead8;
    /* Écrit par défaut en couleur crème douce */
}


/* On s'assure que le conteneur des poèmes est bien lisible */

.poemes-container,
.poemes-liste-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    background-color: #070d14;
    /* Aligné sur le fond global */
}


/* Style pour le lien "Ajouter un nouveau poème" sous le titre */

.navbar+center a,
a[href*="ajouter"],
a[href*="poeme"] {
    color: #d6b36a !important;
    /* Ton doré signature */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.navbar+center a:hover {
    color: #f5deb3 !important;
    text-decoration: underline;
}


/* ==========================================================================
   PRÉSENTATION BILINGUE : PERSAN (RTL) & FRANÇAIS (LTR)
   ========================================================================== */


/* Structure conteneur qui met les deux colonnes côte à côte */

.poeme-contenu-bilingue {
    display: flex;
    flex-wrap: wrap;
    /* Passe en dessous si l'écran est trop étroit */
    gap: 40px;
    margin-top: 20px;
}


/* Colonne Persan : Droite à gauche, police Vazirmatn */

.poeme-colonne-persan {
    flex: 1;
    min-width: 300px;
    direction: rtl;
    /* Indispensable pour le persan */
    text-align: right;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.3rem;
    /* Une taille lisible */
    line-height: 2.2;
    /* Aéré pour la calligraphie persane */
    color: #f3ead8;
}


/* Colonne Français : Gauche à droite */

.poeme-colonne-francais {
    flex: 1;
    min-width: 300px;
    direction: ltr;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #a0aec0;
    /* Un gris-bleu élégant pour le français */
    font-style: italic;
}


/* ==========================================================================
   MISE EN PAGE BILINGUE (ADAPTÉE À TON FICHIER POEMES.HTML)
   ========================================================================== */


/* Conteneur principal de la table */

.poeme-table-bilingue {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


/* Chaque ligne de poème */

.rangee-bilingue {
    display: flex;
    gap: 40px;
    /* Espace entre le persan et le français */
    flex-wrap: wrap;
    /* Pour que ça reste lisible sur mobile */
    border-bottom: 1px solid rgba(214, 179, 106, 0.1);
    padding-bottom: 5px;
}


/* Cellule Persan */

.cellule-persan {
    flex: 1;
    min-width: 300px;
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.3rem;
    color: #f3ead8;
    line-height: 1.6;
}


/* Cellule Français */

.cellule-francaise {
    flex: 1;
    min-width: 300px;
    direction: ltr;
    text-align: left;
    font-size: 1.1rem;
    color: #a0aec0;
    font-style: italic;
    line-height: 1.6;
}


/* Style de la carte poème */

.poeme-card {
    background-color: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.2);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
}


/* ==========================================================================
   STYLE DES BOUTONS D'ACTION (MODIFIER / SUPPRIMER)
   ========================================================================== */


/* Conteneur des actions sous le poème */

.poeme-actions {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(214, 179, 106, 0.15);
    text-align: right;
    /* Aligne les boutons à droite */
}


/* Style commun pour tous les boutons */

.btn {
    display: inline-block;
    padding: 8px 16px;
    margin-left: 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #d6b36a;
    background: rgba(214, 179, 106, 0.1);
    color: #d6b36a;
}


/* Effet au survol du bouton Modifier */

.btn:hover {
    background: #d6b36a;
    color: #0d1520;
}


/* Style spécifique pour le bouton Supprimer */

.btn.supprimer {
    border-color: #e53e3e;
    background: rgba(229, 62, 62, 0.1);
    color: #e53e3e;
}


/* Effet au survol du bouton Supprimer */

.btn.supprimer:hover {
    background: #e53e3e;
    color: #ffffff;
}


/* ==========================================================================
   PAGE : RECHERCHER DES POÈMES (/RECHERCHE)
   ========================================================================== */


/* Conteneur du formulaire de recherche */

.recherche-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background-color: #0d1520;
    /* Fond sombre de l'application */
    border: 1px solid rgba(214, 179, 106, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
}


/* Titre de la page de recherche */

.recherche-title {
    color: #d6b36a;
    font-size: 2rem;
    margin-bottom: 25px;
}


/* Le champ de saisie de texte (Input) */

.recherche-container input[type="text"],
.recherche-input {
    width: 100%;
    max-width: 400px;
    padding: 12px 20px;
    margin-bottom: 20px;
    background-color: #070d14;
    /* Plus sombre que la boîte pour faire ressortir le champ */
    border: 1px solid rgba(214, 179, 106, 0.4);
    border-radius: 6px;
    color: #f3ead8;
    /* Écriture en couleur crème */
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}


/* Effet quand on clique dans le champ de recherche */

.recherche-container input[type="text"]:focus,
.recherche-input:focus {
    border-color: #d6b36a;
    box-shadow: 0 0 8px rgba(214, 179, 106, 0.3);
}


/* Le bouton de validation de la recherche */

.recherche-container button[type="submit"],
.btn-recherche {
    background: #d6b36a;
    color: #0d1520;
    border: 1px solid #d6b36a;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}


/* Effet au survol du bouton de recherche */

.recherche-container button[type="submit"]:hover,
.btn-recherche:hover {
    background: #070d14;
    color: #d6b36a;
    transform: translateY(-1px);
}


/* Message si aucun poème n'est trouvé */

.aucun-resultat {
    color: #a0aec0;
    font-style: italic;
    margin-top: 20px;
}


/* ==========================================================================
   GRILLE DES ALBUMS PHOTOS COMPLÈTE
   ========================================================================== */

.album-detail-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.media-card {
    background-color: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.15);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, border-color 0.2s;
}

.media-card:hover {
    transform: scale(1.02);
    border-color: #d6b36a;
}

.media-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    /* Recadre proprement les photos pour qu'elles aient la même taille */
    display: block;
    cursor: pointer;
}


/* --- Design de la page Ghayeb --- */

.titre-page {
    color: #d6b36a;
    text-align: center;
    margin-top: 30px;
    font-size: 2.5rem;
}

.titre-persan {
    display: block;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 2rem;
    margin-top: 10px;
}

.ghayeb-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
}

.ghayeb-card {
    background: #0d1520;
    padding: 40px;
    border: 1px solid #d6b36a;
    border-radius: 15px;
    text-align: center;
}

.ghayeb-texte {
    font-size: 1.4rem;
    color: #f3ead8;
    line-height: 2;
    margin-bottom: 30px;
}

.ghayeb-citation {
    font-style: italic;
    color: #a0aec0;
    margin-bottom: 20px;
}

.signature {
    color: #d6b36a;
    font-weight: bold;
    margin-top: 20px;
}

.persan {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
}

.lang-switch {
    text-align: center;
    margin-top: 10px;
}

.btn-lang {
    background: #d6b36a;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}


/* --- Boutons de langue contrastés --- */

.btn-lang {
    background-color: #d6b36a !important;
    /* Doré pour le bouton */
    color: #0d1520 !important;
    /* Texte sombre pour la lisibilité */
    border: 1px solid #d6b36a;
    padding: 6px 15px;
    margin: 0 5px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-lang:hover {
    background-color: #f3ead8 !important;
    /* Un peu plus clair au survol */
    color: #0d1520;
}


/* ==========================================================================
   PAGE RECHERCHE DE POÈMES
   ========================================================================== */

.recherche-page-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    color: #f3ead8;
}

.recherche-main-title {
    color: #d6b36a;
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}


/* --- Formulaire de Recherche --- */

.recherche-form-bloc {
    background: #0d1520;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(214, 179, 106, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.recherche-champ-groupe {
    margin-bottom: 20px;
}

.recherche-label {
    display: block;
    color: #f5deb3;
    margin-bottom: 10px;
    font-weight: bold;
}

.recherche-champ-saisie {
    width: 100%;
    max-width: 500px;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid rgba(214, 179, 106, 0.3);
    background-color: #070d14;
    color: #ffffff;
    font-size: 1rem;
}

.recherche-champ-saisie:focus {
    outline: none;
    border-color: #d6b36a;
}


/* --- Grille des Thèmes --- */

.recherche-themes-groupe {
    margin-bottom: 25px;
}

.recherche-themes-grille {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.recherche-theme-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e0e0e0;
    cursor: pointer;
    font-size: 0.95rem;
}

.recherche-theme-item input[type="checkbox"] {
    transform: scale(1.2);
    accent-color: #d6b36a;
    /* Colore la case cochée en doré */
    cursor: pointer;
}


/* --- Bouton de Validation --- */

.btn-recherche-validation {
    background: #d6b36a;
    color: #0d1520;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-recherche-validation:hover {
    background: #f5deb3;
}

.recherche-separation {
    border: 0;
    border-top: 1px solid rgba(214, 179, 106, 0.2);
    margin: 40px 0;
}


/* --- Résultats de la Recherche --- */

.recherche-resultats-titre {
    color: #d6b36a;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.liste-poemes-resultats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.resultat-poeme-card {
    background: #0d1520;
    border: 1px solid rgba(214, 179, 106, 0.15);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s ease;
}

.resultat-poeme-card:hover {
    border-color: rgba(214, 179, 106, 0.4);
}


/* Alignement Persan (Droite à Gauche) */

.resultat-aperçu-persan {
    direction: rtl;
    text-align: right;
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.resultat-aperçu-persan a {
    color: #f3ead8;
    text-decoration: none;
}

.resultat-aperçu-persan a:hover {
    color: #d6b36a;
}


/* Alignement Français (Gauche à Droite) */

.resultat-aperçu-francais {
    direction: ltr;
    text-align: left;
    color: #e0e0e0;
    font-style: italic;
    margin: 0 0 15px 0;
    line-height: 1.5;
}


/* Badge de thème */

.resultat-badge-theme {
    display: inline-block;
    font-size: 0.85rem;
    background: rgba(214, 179, 106, 0.1);
    color: #d6b36a;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(214, 179, 106, 0.2);
}

.aucun-resultat-message {
    text-align: center;
    color: #a0aec0;
    font-style: italic;
}