/*
 * Nom du fichier : styleadmin.css
 * Version : v3.1 - 2026-03-22
 *
 * === CONTEXTE (pour l'IA) ===
 * But du code : CSS centralisé pour TOUTES les pages d'administration EURL REPERECOM
 * Demande utilisateur : Centraliser les styles inline de 18 fichiers PHP dans ce fichier unique
 * Logique implémentée :
 *   - Variables CSS harmonisées (palette unique)
 *   - Styles communs : reset, body, containers, cards, buttons, forms, tables, alerts, badges
 *   - Styles spécifiques scopés par class body ou classe conteneur parent
 *   - Styles hérités conservés (section 17) pour compatibilité avec pages non modifiées
 * Points d'attention :
 *   - Ce fichier est chargé APRÈS Bootstrap quand Bootstrap est utilisé
 *   - Les variantes body.page-* scopent les styles spécifiques sans effet de bord
 *   - Les classes .xtb_* de xmltobase.php restent dans le fichier (préfixées intentionnellement)
 * codage : Les alias --primary-color, --success-color, etc. assurent la compatibilité
 *          avec du code existant non modifié qui utiliserait ces noms de variables.
 *
 * === DESCRIPTION UTILISATEUR ===
 * Feuille de style unique pour toute l'administration.
 * Organisation en 17 sections commentées pour faciliter la maintenance.
 */

/* =====================================================================
   SECTION 1 : VARIABLES GLOBALES (palette harmonisée)
   ===================================================================== */

:root {
    /* --- Couleurs principales --- */
    --primary:        #4a89dc;  /* Bleu principal */
    --primary-hover:  #3a7bd5;  /* Bleu au survol */
    --secondary:      #6c757d;  /* Gris secondaire */
    --success:        #2ecc71;  /* Vert succès */
    --success-hover:  #27ae60;  /* Vert succès au survol */
    --danger:         #e74c3c;  /* Rouge danger */
    --danger-hover:   #c0392b;  /* Rouge au survol */
    --warning:        #f39c12;  /* Orange avertissement */
    --warning-hover:  #e67e22;
    --info:           #3498db;  /* Bleu info */
    --info-hover:     #2980b9;
    --dark:           #2c3e50;  /* Gris foncé */
    --light:          #f5f7fa;  /* Gris très clair */
    --text:           #333333;  /* Texte principal */
    --text-muted:     #6c757d;  /* Texte secondaire */
    --white:          #ffffff;

    /* --- Utilitaires de design --- */
    --border:         #dee2e6;
    --border-light:   #e3e6f0;
    --shadow:         0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.15);
    --radius:         8px;
    --transition:     all 0.3s ease;

    /* --- Fond de page par défaut --- */
    --page-bg:        #f5f7fa;

    /* --- Aliases de compatibilité (noms utilisés dans les anciens fichiers) --- */
    --primary-color:      #4a89dc;
    --primary-hover-c:    #3a7bd5;
    --secondary-color:    #6c757d;
    --success-color:      #2ecc71;
    --danger-color:       #e74c3c;
    --warning-color:      #f39c12;
    --info-color:         #3498db;
    --dark-color:         #2c3e50;
    --light-color:        #f5f7fa;
    --border-radius:      8px;
    --transition-speed:   0.3s;
    --box-shadow:         0 4px 12px rgba(0, 0, 0, 0.1);
    --card-shadow:        0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   SECTION 2 : RESET ET BASE
   ===================================================================== */

/* Reset minimal pour éviter les conflits avec Bootstrap */
*, *::before, *::after {
    box-sizing: border-box;
}

/* =====================================================================
   SECTION 3 : BODY ET PAGE DE BASE
   ===================================================================== */

/* Corps commun à toutes les pages admin */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Liens de base pour les pages admin (non-Bootstrap) */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* =====================================================================
   SECTION 4 : VARIANTES DE BODY (pages centrées vs pages larges)
   ===================================================================== */

/* Pages avec formulaire centré sur fond dégradé (connexion, mdpoublie) */
body.page-centree {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Pages d'administration standard (fond clair, layout standard) */
body.page-admin {
    background-color: var(--page-bg);
    padding: 0;
}

/* Pages de suppression (centrage sur fond dégradé) */
body.page-suppression {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf0 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* =====================================================================
   SECTION 5 : CONTENEURS
   ===================================================================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.container-sm { max-width: 600px; }
.container-md { max-width: 800px; }

/* Conteneur blanc avec ombre (nettoyageimages style) */
.container-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Conteneur page-container (ajoutstyle.php) */
.page-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 15px;
}

/* Conteneur pour Bootstrap 5 (rubrique, article) */
.container-fluid {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* =====================================================================
   SECTION 6 : CARTES (CARD)
   ===================================================================== */

.card {
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    border: 1px solid var(--border-light);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* En-tête de carte standard (fond bleu) */
.card-header {
    background-color: var(--primary);
    color: var(--white);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

/* En-tête de carte claire (liste admins, rédacteurs) */
.card-header-light {
    background-color: #f8f9fc;
    color: var(--text);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* En-tête de carte pour connexion (bleu foncé, centré) */
.card-header-login {
    background-color: var(--primary);
    color: var(--white);
    padding: 25px 20px;
    text-align: center;
}

.card-header-login h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.card-body {
    padding: 20px;
    flex: 1 1 auto;
}

.card-footer {
    padding: 1.25rem 1.5rem;
    background-color: #f8f9fc;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

/* Carte d'alerte (supprimerrubrique) */
.alert-card {
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: adminGlissement 0.5s ease-out forwards;
    transform: translateY(20px);
    opacity: 0;
}

/* Carte de connexion */
.login-card {
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 100%;
    max-width: 500px;
}

.login-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(50, 50, 93, 0.12), 0 8px 15px rgba(0, 0, 0, 0.07);
}

/* =====================================================================
   SECTION 7 : BOUTONS
   ===================================================================== */

.btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    border-radius: var(--radius);
    transition: var(--transition);
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.btn:active { transform: translateY(0); }

/* Bleu principal */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(74, 137, 220, 0.3);
}

/* Vert succès */
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--white);
}
.btn-success:hover {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
}

/* Rouge danger */
.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--white);
}
.btn-danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

/* Orange avertissement */
.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--white);
}
.btn-warning:hover {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
    color: var(--white);
}

/* Bleu info */
.btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--white);
}
.btn-info:hover {
    background-color: var(--info-hover);
    border-color: var(--info-hover);
    color: var(--white);
}

/* Gris secondaire */
.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: var(--white);
}

/* Gris clair (bouton neutre) */
.btn-default, .btn-light {
    background-color: var(--light);
    border-color: var(--border);
    color: var(--dark);
}
.btn-default:hover, .btn-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

/* Bouton retour (discret) */
.btn-back {
    background-color: transparent;
    border-color: var(--border);
    color: var(--dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-back:hover {
    background-color: var(--light);
    color: var(--primary);
    transform: translateX(-3px);
}

/* Petite taille */
.btn-sm {
    padding: 5px 10px;
    font-size: 0.85rem;
    border-radius: 5px;
}

/* Grande taille */
.btn-lg {
    padding: 12px 24px;
    font-size: 1.1rem;
}

/* Pleine largeur */
.btn-block { width: 100%; }

/* Bouton circulaire */
.btn-circle {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Bouton fermeture (×) avec fond blanc */
.btn-close-round {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}
.btn-close-round:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background-color: var(--light);
    color: var(--danger);
}
.btn-close-round::before { content: "×"; }

/* Bouton × dans en-tête colorée (supprimerrubrique) */
.btn-close {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    transition: var(--transition);
    text-decoration: none;
}
.btn-close:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
    color: var(--white);
}

/* Bouton danger pulsant */
.btn-danger.pulse,
.btn.pulse {
    animation: adminPulse 2s infinite;
}
.btn-danger.pulse:hover,
.btn.pulse:hover {
    animation: none;
    transform: translateY(-3px);
}

/* Bouton avec loader intégré */
.btn-with-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Loader spinner */
.loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--white);
    animation: adminRotation 0.8s linear infinite;
}

/* État soumission formulaire */
.submitting {
    pointer-events: none;
    opacity: 0.8;
}

/* =====================================================================
   SECTION 8 : FORMULAIRES
   ===================================================================== */

.form-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.form-label,
label.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--dark);
    font-size: 0.95rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.3s, box-shadow 0.3s;
    height: auto;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 137, 220, 0.25);
    outline: none;
}

/* Alias form-input → utilisé dans ajoutstyle.php */
.form-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.3s, box-shadow 0.3s;
    height: auto;
    appearance: none;
}
.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 137, 220, 0.25);
    outline: none;
}
.form-input::placeholder { color: #aaa; }

.form-control::placeholder { color: #aaa; }

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.form-text,
small.form-text {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Champ select avec flèche personnalisée */
.select-wrapper {
    position: relative;
}
.select-wrapper select,
.select-wrapper .form-control {
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}
.select-wrapper i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
}

/* Champ avec icône à gauche */
.input-with-icon {
    position: relative;
}
.input-with-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
}
.input-with-icon input {
    padding-left: 38px;
}

/* Info-bulle sous champ */
.input-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Honeypot anti-spam */
.honeypot {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
    overflow: hidden;
}

/* Ligne de formulaire (deux champs côte à côte) */
.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.form-row .form-group { flex: 1; min-width: 200px; }

/* Actions de formulaire */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    background-color: #f8f9fa;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Section de formulaire générique (avec border-left) */
.form-section {
    background-color: #f8f9fa;
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    border-left: 4px solid var(--primary);
    transition: var(--transition);
}
.form-section:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

/* Section pour configsite.php (grille, opacity animation) */
.config-form .form-section {
    border-left: none;
    border: 1px solid var(--border);
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
}
.config-form .form-section.visible {
    opacity: 1;
    transform: translateY(0);
}
.config-form .form-section:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    border-color: var(--primary);
    transform: translateY(0);
}
.config-form .form-section h2 {
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Section pour article.php (sans border-left, ombre légère) */
.admin-container .form-section {
    border-left: none;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    background-color: var(--white);
    margin-bottom: 0.75rem;
    transform: none;
}
.admin-container .form-section:hover { transform: none; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); }

/* Section dans ajoutstyle (avec h2 et icône) */
.style-form .form-section {
    border-left: none;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.style-form .form-section.active {
    opacity: 1;
    transform: translateY(0);
}
.style-form .form-section h2 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

/* Section de suppression (bouton centré avec séparateur) */
.form-section-delete {
    text-align: center;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
    margin-top: 20px;
}

/* Grille de sections (configsite) */
.form-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

/* Sélecteur de couleur (configsite) */
.color-picker { margin-bottom: 15px; }
.color-input {
    display: flex;
    align-items: center;
}
.color-input span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #f1f3f5;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    height: 46px;
    font-weight: bold;
}
.color-input input[type="text"] {
    border-radius: 0;
    flex: 1;
    border-right: none;
}
.color-input input[type="color"] {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-right: none;
    padding: 0;
    background: none;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; }
.color-preview {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Boutons radio stylisés (configsite) */
.radio-group { display: flex; gap: 15px; }
.radio { display: flex; align-items: center; cursor: pointer; }
.radio input[type="radio"] { display: none; }
.radio-label { position: relative; padding-left: 28px; }
.radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background-color: var(--white);
    transition: var(--transition);
}
.radio input[type="radio"]:checked + .radio-label::before { border-color: var(--primary); }
.radio input[type="radio"]:checked + .radio-label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--primary);
}

/* Champs génériques (configsite inputs larges) */
body.page-configsite input[type="text"],
body.page-configsite input[type="url"],
body.page-configsite input[type="number"],
body.page-configsite select,
body.page-configsite textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--white);
    font-size: 0.95rem;
    transition: var(--transition);
    box-sizing: border-box;
}
body.page-configsite input[type="text"]:focus,
body.page-configsite input[type="url"]:focus,
body.page-configsite input[type="number"]:focus,
body.page-configsite select:focus,
body.page-configsite textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 137, 220, 0.1);
    outline: none;
}
body.page-configsite textarea { min-height: 100px; resize: vertical; }

/* =====================================================================
   SECTION 9 : TABLEAUX
   ===================================================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    color: var(--text);
}

.table th,
.table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.table thead th {
    background-color: var(--light);
    font-weight: 600;
    color: var(--dark);
    border-bottom: 2px solid var(--border-light);
}

.table tbody tr:hover {
    background-color: rgba(74, 137, 220, 0.04);
}

.table tbody tr:last-child td { border-bottom: none; }

/* Animations décalées des lignes */
.table tbody tr {
    animation: adminApparition 0.3s ease-out both;
}
.table tbody tr:nth-child(1)  { animation-delay: 0.05s; }
.table tbody tr:nth-child(2)  { animation-delay: 0.10s; }
.table tbody tr:nth-child(3)  { animation-delay: 0.15s; }
.table tbody tr:nth-child(4)  { animation-delay: 0.20s; }
.table tbody tr:nth-child(5)  { animation-delay: 0.25s; }
.table tbody tr:nth-child(n+6){ animation-delay: 0.30s; }

/* Conteneur défilant pour grands tableaux */
.table-container,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tableau de données (mailing) avec en-tête foncée */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.data-table th {
    background-color: var(--dark);
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
}
.data-table tr:hover { background-color: rgba(0, 0, 0, 0.02); }
.data-table tr.danger { background-color: rgba(231, 76, 60, 0.08); }
.data-table tr.danger:hover { background-color: rgba(231, 76, 60, 0.13); }

/* Table style listeadministrateur / redacteur */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
}
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* =====================================================================
   SECTION 10 : ALERTES ET MESSAGES
   ===================================================================== */

.alert {
    position: relative;
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    animation: adminApparition 0.3s ease-out;
}

.alert-success {
    background-color: rgba(46, 204, 113, 0.1);
    border-left: 4px solid var(--success);
    color: #1e8449;
}

.alert-danger, .alert-error {
    background-color: rgba(231, 76, 60, 0.1);
    border-left: 4px solid var(--danger);
    color: #922b21;
}

.alert-warning {
    color: #7d6608;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-left: 4px solid var(--warning);
}

.alert-info {
    background-color: rgba(52, 152, 219, 0.1);
    border-left: 4px solid var(--info);
    color: #1a5276;
}

/* Message close button */
.alert-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 14px 18px;
    color: inherit;
    text-decoration: none;
}

/* Messages style configsite (.message) */
.message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    animation: adminGlissement 0.4s ease;
}
.message i { margin-right: 10px; font-size: 18px; }
.message.success {
    background-color: rgba(46, 204, 113, 0.1);
    border-left: 4px solid var(--success);
    color: var(--success);
}
.message.error {
    background-color: rgba(231, 76, 60, 0.1);
    border-left: 4px solid var(--danger);
    color: var(--danger);
}

/* Messages en ligne (nettoyage images) */
.success-msg { color: var(--success); font-weight: 600; }
.error-msg   { color: var(--danger);  font-weight: 600; }
.not-found-msg { color: var(--warning); font-weight: 600; }

/* Indicateurs de statut */
.status-indicator {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-right: 5px;
}
.status-active   { background-color: var(--success); box-shadow: 0 0 5px var(--success); }
.status-inactive { background-color: var(--danger);  box-shadow: 0 0 5px var(--danger); }

/* =====================================================================
   SECTION 11 : BADGES
   ===================================================================== */

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50px;
    transition: var(--transition);
}

.badge-primary, .bg-primary { background-color: var(--primary); color: var(--white); }
.badge-success, .bg-success { background-color: var(--success); color: var(--white); }
.badge-danger,  .bg-danger  { background-color: var(--danger);  color: var(--white); }
.badge-warning, .bg-warning { background-color: var(--warning); color: var(--white); }
.badge-info,    .bg-info    { background-color: var(--info);    color: var(--white); }
.badge-dark,    .bg-dark    { background-color: var(--dark);    color: var(--white); }

/* =====================================================================
   SECTION 12 : ICÔNES SVG INLINE
   ===================================================================== */

.icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}

/* Icône d'aide */
.help-icon {
    color: var(--primary);
    font-size: 1.2rem;
    margin-left: 5px;
    vertical-align: middle;
    transition: transform var(--transition-speed);
    cursor: pointer;
}
.help-icon:hover { transform: scale(1.2); }

/* Icône de fichier (nettoyage) */
.file-icon {
    font-size: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Aperçu image miniature (nettoyage) */
.img-preview {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.3s;
}
.img-preview:hover { transform: scale(1.5); }

/* =====================================================================
   SECTION 13 : PAGE DE CONNEXION (saisielogin, mdpoublieadminverif)
   ===================================================================== */

/* Carte de connexion - déjà dans section 6 */

.form-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--dark);
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 10px;
}

.forgot-link {
    color: var(--primary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}
.forgot-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Logo texte en-tête login */
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Bouton retour en-tête login */
.back-button {
    background: transparent;
    border: none;
    color: var(--dark);
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-speed);
}
.back-button:hover { color: var(--primary); }

/* Lien de retour au site (dessous card) */
.link-back {
    text-align: center;
    margin-top: 20px;
    width: 100%;
}
.link-back a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.link-back a:hover { color: var(--primary-hover); }

/* Message d'erreur formulaire */
.error-message {
    background-color: rgba(231, 76, 60, 0.1);
    border-left: 4px solid var(--danger);
    color: var(--danger);
    padding: 12px 16px;
    margin-bottom: 1.25rem;
    border-radius: 5px;
    font-size: 0.9rem;
}

/* Erreur inline sous champ */
.form-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 4px;
    display: none;
}

/* =====================================================================
   SECTION 14 : PAGES D'ADMINISTRATION GÉNÉRALES (ajoutstyle, etc.)
   ===================================================================== */

/* Wrapper de contenu (ajoutstyle.php) */
.content-wrapper {
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* En-tête de page (ajoutstyle) */
.header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--info) 100%);
    color: var(--white);
    padding: 25px 30px;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
}
.header-content h1 {
    font-size: 1.6rem;
    margin: 0 0 5px;
}
.site-info {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 0;
}
.highlight {
    font-weight: 700;
    opacity: 1;
}

/* Actions en haut de formulaire */
.top-actions {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

/* Boutons d'action de formulaire */
.action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Titre de section avec barre gauche */
.section-title {
    position: relative;
    padding-left: 1rem;
    margin: 1rem 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--dark);
}
.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: var(--primary);
    border-radius: 4px;
}
.section-icon {
    margin-right: 6px;
    color: var(--primary);
}

/* En-tête de la carte config site */
.config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border);
    animation: adminApparition 0.5s ease;
    flex-wrap: wrap;
    gap: 10px;
}
.config-header h1 {
    color: var(--dark);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}
.site-name { color: var(--primary); font-weight: 700; }

/* Formulaire configsite (wrapper) */
.config-form {
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: adminApparition 0.5s ease;
}

/* Actions header (configsite) */
.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* =====================================================================
   SECTION 15 : PAGES DE SUPPRESSION
   ===================================================================== */

/* Navigation supérieure (supprimeraconfimer) */
.nav-container {
    display: flex;
    justify-content: flex-end;
    padding: 15px 20px;
    background-color: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-link {
    display: inline-block;
    padding: 10px 15px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    right: 0;
    background-color: var(--primary);
    transition: width 0.3s ease;
}
.nav-link:hover { color: var(--dark); text-decoration: none; }
.nav-link:hover::after { width: 100%; left: 0; right: auto; }

/* En-tête d'alerte rouge standard */
.alert-header {
    background-color: var(--danger);
    color: var(--white);
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3);
}
.alert-header::before {
    content: "⚠️";
    position: absolute;
    font-size: 120px;
    opacity: 0.08;
    top: -20px;
    left: -20px;
    animation: adminPulseIcon 3s infinite;
}
.alert-title {
    font-size: 1.6rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin: 0;
}

/* En-tête d'alerte rouge avec bouton × à droite (supprimerrubrique) */
.alert-header-red {
    background-color: var(--danger);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.alert-header-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    z-index: 0;
}

/* Barre fermeture (supprimerarticle) */
.close-header {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    background-color: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--border);
}

/* Titre de section suppression (gradient orange) */
.title-section {
    padding: 25px 30px;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.title-section h1 {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.title-section::before {
    content: "⚠️";
    position: absolute;
    font-size: 150px;
    opacity: 0.08;
    right: -30px;
    top: -30px;
    transform: rotate(15deg);
    animation: adminPulseIcon 6s infinite;
}

/* Corps de contenu suppression */
.content-body {
    padding: 40px 30px;
    text-align: center;
}

.content-section {
    padding: 25px 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.content-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Corps alerte (supprimerrubrique) */
.alert-body { padding: 30px; }
.alert-content { margin-bottom: 25px; }
.alert-paragraph {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    line-height: 1.7;
}
.alert-paragraph i {
    color: var(--danger);
    font-size: 1.2rem;
    margin-right: 10px;
    margin-top: 3px;
    flex-shrink: 0;
}
.alert-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

/* Texte avertissement animé (supprimerarticle) */
.warning-text {
    font-weight: 700;
    color: var(--danger);
    display: inline-block;
    padding: 10px 20px;
    background-color: #fff3e0;
    border-radius: var(--radius);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    animation: adminMiseEnValeur 3s ease infinite;
    margin: 15px 0;
}

/* Astuce bleue (supprimerarticle) */
.tip-box {
    background-color: rgba(52, 152, 219, 0.08);
    border-left: 4px solid var(--primary);
    padding: 15px 20px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 20px 0;
    text-align: left;
}

/* Section avertissement jaune (duplicationrubrique) */
.warning-section {
    background-color: #fff3cd;
    border-left: 4px solid var(--warning);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    margin-top: 1.5rem;
}

/* Paragraphe d'alerte (supprimerrubrique) */
.alert-paragraph p { margin-bottom: 15px; font-size: 1rem; line-height: 1.8; }

/* =====================================================================
   SECTION 16 : PAGES SPÉCIFIQUES
   ===================================================================== */

/* --- mailing.php / saisiemailing.php : bannière en-tête --- */
body.page-mailing .header,
body.page-saisiemailing .header {
    background-color: var(--primary);
    color: var(--white);
    padding: 20px 0;
    margin-bottom: 35px;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}
body.page-mailing .header h1 {
    margin: 0;
    font-size: 2rem;
    animation: adminApparition 1s ease;
}
body.page-mailing .header p {
    margin-top: 8px;
    opacity: 0.8;
}
body.page-saisiemailing .header {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0 0 1rem;
    border-bottom: 2px solid var(--primary);
    border-radius: 0;
    box-shadow: none;
}

/* saisiemailing card-header avec gradient */
body.page-saisiemailing .card-header {
    background: linear-gradient(135deg, var(--primary) 0%, #5a9df9 100%);
    overflow: hidden;
    position: relative;
}
body.page-saisiemailing .card-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
    animation: adminPulseIcon 8s linear infinite;
    z-index: 1;
    opacity: 0.8;
}
.card-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Footer (mailing) */
.footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 35px;
    background-color: var(--dark);
    color: var(--white);
    border-radius: var(--radius) var(--radius) 0 0;
}
.footer p { margin: 0; font-size: 0.9rem; opacity: 0.8; }

/* --- listeadministrateur.php / redacteur.php : card-header clair --- */
body.page-admin .card-header {
    background-color: #f8f9fc;
    color: var(--text);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Sauf si c'est une card mailing */
body.page-mailing .card-header,
body.page-saisiemailing .card .card-header {
    background-color: var(--primary);
    color: var(--white);
}

/* Action buttons centrés (listeadmin) */
.actions-centered {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Bouton action avec effet slide (listeadmin) */
.action-btn { position: relative; overflow: hidden; z-index: 1; }
.action-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
}
.action-btn:hover::before { transform: translateX(0); }

/* --- nettoyageimages.php --- */
body.page-nettoyage .container { background-color: var(--white); box-shadow: var(--shadow); }
body.page-nettoyage header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.app-title { font-size: 1.5rem; font-weight: 600; color: var(--dark); }

/* Modal aperçu image */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}
.modal-content { max-width: 90%; max-height: 90%; }
.modal-close {
    position: absolute;
    top: 20px; right: 30px;
    font-size: 30px;
    color: var(--white);
    cursor: pointer;
}

/* --- article.php : Bootstrap 5 overrides --- */
body.page-article {
    background-color: #f5f8fa;
}
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
}
.page-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.page-header h1 {
    font-weight: 600;
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 0;
}
.compact-section { padding: 0; border: none; box-shadow: none; margin-bottom: 0.5rem; }
.section-divider {
    border-top: 1px solid #e9ecef;
    margin: 0.5rem 0;
    padding-top: 0.5rem;
}
.date-picker-container { position: relative; }
.date-picker-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--secondary);
}
.accroche-link {
    font-size: 0.85rem;
    text-align: right;
    display: block;
    margin-bottom: 0.5rem;
}
/* Overrides Bootstrap spacing pour article */
.admin-container .mb-2 { margin-bottom: 0.5rem !important; }
.admin-container .mb-3 { margin-bottom: 0.75rem !important; }
.admin-container .mt-2 { margin-top: 0.5rem !important; }
.admin-container .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.admin-container .p-2  { padding: 0.5rem !important; }
.admin-container .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.admin-container .row  { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.5rem; }
.admin-container .alert { padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.85rem; }

/* Accordéon options avancées (article & rubrique) */
#accordionOptionsAvancees .accordion-button:not(.collapsed),
.accordion-advanced .accordion-button:not(.collapsed) {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}
#accordionOptionsAvancees .accordion-button:focus,
.accordion-advanced .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(74, 137, 220, 0.25);
    border-color: #ccc;
}
.accordion-advanced .accordion-button {
    background-color: #e9ecef;
    color: var(--dark);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--border-light);
    border-radius: 5px !important;
    box-shadow: none;
}
.accordion-advanced .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.accordion-advanced .accordion-body { padding: 1rem 0 0 0; }
.accordion-advanced .accordion-item { border: none; background: transparent; }

/* --- rubrique.php : Bootstrap 5 overrides --- */
body.page-rubrique { background-color: #f8f9fc; }
.invisible-badge {
    background-color: var(--warning);
    color: #212529;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
}
.admin-badge {
    background-color: var(--danger);
    color: var(--white);
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
}
.animated-card { animation: adminApparition 0.5s ease-out forwards; }
.animated-card:nth-child(2) { animation-delay: 0.1s; }
.animated-card:nth-child(3) { animation-delay: 0.2s; }

/* Tooltip personnalisé */
.tooltip-custom { position: relative; display: inline-block; }
.tooltip-text {
    visibility: hidden;
    background-color: var(--dark);
    color: var(--white);
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 100;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    white-space: nowrap;
    font-size: 0.8rem;
}
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--dark);
}
.tooltip-custom:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.config-style-divider {
    background-color: #f1f3f9;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: var(--radius);
}

/* =====================================================================
   SECTION 17 : ANIMATIONS
   ===================================================================== */

/* Apparition de bas en haut */
@keyframes adminApparition {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Glissement depuis le haut */
@keyframes adminGlissement {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Glissement depuis le bas (slide up) */
@keyframes adminSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pulsation bouton */
@keyframes adminPulse {
    0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
    70%  { box-shadow: 0 0 0 12px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* Pulsation icône */
@keyframes adminPulseIcon {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Rotation (loader) */
@keyframes adminRotation {
    to { transform: rotate(360deg); }
}

/* Mise en valeur (highlight animé) */
@keyframes adminMiseEnValeur {
    0%   { background-color: rgba(255, 243, 224, 0); }
    30%  { background-color: #fff3e0; }
    100% { background-color: rgba(255, 243, 224, 0); }
}

/* Alias fadeInAnimation → utilisé dans le JS de article.php */
@keyframes fadeInAnimation {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tremblement (validation erreur) */
@keyframes adminShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* =====================================================================
   SECTION 18 : UTILITAIRES
   ===================================================================== */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }

.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.m-1  { margin: 0.25rem; }
.ml-auto { margin-left: auto; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: 8px; }

.fade-in { animation: adminApparition 0.5s ease-out; }
.animated { animation: adminApparition 0.6s ease-out forwards; }
.animate-fade-in { animation: adminApparition 0.5s ease-out forwards; }
.animate-pulse { animation: adminPulseIcon 2s infinite; }
.shake { animation: adminShake 0.6s ease; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

.hide-on-mobile { }
.mobile-hide    { }

/* =====================================================================
   SECTION 18b : PAGE ÉMISSION (emission.php)
   ===================================================================== */

/* Page émission - fond légèrement teinté */
body.page-emission {
    background-color: #f0f4f8;
    padding: 0;
}

/* Sélecteur de type d'émission (3 cartes côte à côte) */
.emission-type-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.emission-type-option {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--white);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.emission-type-option input[type="radio"] { display: none; }

.emission-type-option i {
    font-size: 1.6rem;
    color: var(--secondary);
    transition: var(--transition);
}

.emission-type-option span {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark);
}

.emission-type-option small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.emission-type-option:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 137, 220, 0.15);
}

.emission-type-option.active {
    border-color: var(--primary);
    background-color: rgba(74, 137, 220, 0.06);
    box-shadow: 0 0 0 3px rgba(74, 137, 220, 0.15);
}

.emission-type-option.active i { color: var(--primary); }

/* Sélecteur de jours (7 pastilles en ligne) */
.emission-jours-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.emission-jour-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background-color: var(--white);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark);
}

.emission-jour-option input[type="checkbox"] { display: none; }

.emission-jour-option:hover {
    border-color: var(--primary);
    background-color: rgba(74, 137, 220, 0.05);
}

.emission-jour-option.active {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(74, 137, 220, 0.3);
}

/* Tags de dates (spéciales / exclues) */
.emission-dates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Ajouter une marge seulement quand la liste contient des tags */
.emission-dates-list:not(:empty) {
    margin-bottom: 6px;
}

.emission-date-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--white);
    animation: adminApparition 0.2s ease-out;
}

.emission-date-tag.badge-success { background-color: var(--success); }
.emission-date-tag.badge-danger  { background-color: var(--danger); }

.emission-date-tag a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: bold;
}

.emission-date-tag a:hover { color: var(--white); }

/* Tags réseaux sociaux (icône + nom de domaine) */
.emission-reseau-tag {
    font-size: 0.8rem;
    letter-spacing: 0.2px;
}

/* Barre toggle émission dans rubrique.php */
.emission-toggle-bar {
    background-color: #f0f0f8;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 12px 16px;
    transition: var(--transition);
}

.emission-toggle-bar:has(.emission-toggle-input:checked) {
    background-color: rgba(111, 66, 193, 0.06);
    border-color: rgba(111, 66, 193, 0.25);
}

/* Toggle switch plus grand et violet */
.emission-toggle-input {
    width: 3em !important;
    height: 1.5em !important;
    cursor: pointer;
    margin-top: 0 !important;
}

.emission-toggle-input:checked {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
}

.emission-toggle-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25) !important;
}

/* Labels gauche/droite du toggle */
.emission-toggle-label-off,
.emission-toggle-label-on {
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s, opacity 0.3s;
    white-space: nowrap;
}

.emission-toggle-label-off { color: var(--secondary); }
.emission-toggle-label-on  { color: #6f42c1; }

.emission-toggle-label-off.text-muted,
.emission-toggle-label-on.text-muted {
    opacity: 0.4;
    font-weight: 400;
}

/* Bouton émission dans rubrique.php */
.btn-emission {
    background: linear-gradient(135deg, #6f42c1 0%, #9b59b6 100%);
    border: none;
    color: var(--white);
    padding: 8px 16px;
    border-radius: var(--radius);
    font-weight: 500;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-emission:hover {
    background: linear-gradient(135deg, #5a32a3 0%, #8e44ad 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    color: var(--white);
    text-decoration: none;
}

.btn-emission.has-emission {
    background: linear-gradient(135deg, var(--success) 0%, #27ae60 100%);
}

.btn-emission.has-emission:hover {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

/* =====================================================================
   SECTION 19 : RESPONSIVE
   ===================================================================== */

@media (max-width: 1024px) {
    .config-header { flex-direction: column; gap: 10px; }
    .form-sections { grid-template-columns: 1fr; }
    .form-actions  { flex-direction: column; }
}

@media (max-width: 768px) {
    .container { padding: 15px; }
    .login-card { padding: 1.25rem; }
    .card-body  { padding: 15px; }
    .content-body { padding: 20px 15px; }
    .alert-header  { padding: 20px 15px; }
    .title-section { padding: 20px 15px; }
    .alert-title   { font-size: 1.3rem; }
    .form-row      { flex-direction: column; }

    .btn { padding: 8px 14px; font-size: 0.88rem; }

    .table th, .table td { padding: 8px 10px; }
    .data-table th, .data-table td { padding: 8px 10px; }

    .hide-on-mobile { display: none; }
    .mobile-hide    { display: none; }

    .action-column  { display: flex; flex-direction: column; gap: 5px; }

    body.page-mailing .header h1 { font-size: 1.6rem; }

    .card-header { flex-wrap: wrap; gap: 8px; }

    body.page-admin .card-header { flex-direction: column; align-items: flex-start; }

    .form-footer { flex-direction: column; gap: 10px; }
}

@media (max-width: 576px) {
    body.page-centree { padding: 15px; }
    body.page-suppression { padding: 10px; }

    .btn { display: block; width: 100%; margin-bottom: 8px; }
    .btn-back { display: inline-flex; width: auto; }

    .form-sections { grid-template-columns: 1fr; }

    .radio-group { flex-direction: column; gap: 10px; }

    .title-section::before { font-size: 100px; }
    .admin-container { padding: 0.75rem; }

    .alert-actions .btn { width: 100%; }

    .emission-type-selector { flex-direction: column; }
    .emission-jour-option { width: 44px; height: 44px; font-size: 0.78rem; }
    .emission-toggle-bar .d-flex { flex-direction: column; align-items: flex-start !important; }
    .emission-toggle-bar .ms-2 { margin-left: 0 !important; margin-top: 8px; }
}

@media (max-width: 480px) {
    .card-header { flex-direction: column; text-align: center; }
    .content-body { padding: 20px 12px; }
}

/* =====================================================================
   SECTION 20 : STYLES HÉRITÉS (compatibilité avec l'ancien styleadmin.css)
   Conservés INTÉGRALEMENT pour que les pages non modifiées continuent
   de fonctionner exactement comme avant.
   ===================================================================== */

body {
    background-color: var(--white); /* sera surchargé par les classes body.page-* */
    font-family: Arial, Helvetica, sans-serif;
    color: #666;
}
td { font-size: 12px; }
a { font-weight: bold; color: #333; text-decoration: underline; }
a:hover { font-weight: bold; color: #666; }

.caseacocher {
    font-size: 2em;
    border: 1px solid #CCCCCC;
    height: 15px;
}
.bouton {
    font-size: 15px;
    text-decoration: none;
    font-variant: small-caps;
    height: 25px;
    text-align: center;
    color: #666;
    background: #eee;
    border-radius: 0px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.4);
    margin: 5px;
}
.bouton:hover { color: #000; background: linear-gradient(#aaa, #eee); }
.boutontelecharger { background: #09F; color: #FFF; }
.boutonajout       { background: #F90; }
.boutonvalider     { background: #6C0; color: #FFF; }
.boutonsup         { background: #F00; color: #FFF; }
input {
    background-repeat: no-repeat;
    border: 1px solid #CCCCCC;
    height: 20px;
    padding-left: 5px;
    font-weight: bold;
    color: #666666;
}
.listeoption {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    border: 1px solid #cccccc;
    color: #666666;
}
.tableau { border-top: solid 1px #66CCFF; }
.lignemailing { clear: both; margin: 20px; }

/* Fin des styles hérités - les styles modernes des sections 1-19
   surchargent ces styles legacy pour les pages admin récentes */