:root {
    --primary-color: #3b82f6;
    --primary-hover: #60a5fa;
    --secondary-color: #94a3b8;
    --accent-color: #fbbf24;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --bg-main: #020617;
    --bg-card: #0f172a;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.7);
    --container-max: 1200px;
    --header-height: 80px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #020617;
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 5px;
    border: 3px solid #020617;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Selection */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: var(--primary-color);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background: radial-gradient(at 0% 0%, #0f172a 0px, transparent 50%),
        radial-gradient(at 100% 100%, #172554 0px, transparent 50%),
        var(--bg-main);
    line-height: 1.6;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
.logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Lien Admin Badge Container */
.admin-link-badge-container {
    position: relative;
}

/* Logout Form */
.logout-form {
    display: inline;
}

/* Bouton Déconnexion - Styled exactly like .nav-link */
.btn-logout {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: inherit;
    font-weight: 500;
    color: var(--secondary-color);
    padding: 0;
    margin: 0;
    transition: var(--transition);
}

.btn-logout:hover {
    color: #ffffff;
}

/* Header */
.header {
    height: var(--header-height);
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Augmenté pour rester au-dessus du contenu au scroll */
    display: flex;
    align-items: center;
}

/* Ajustement pour l'admin (Django CMS Toolbar) */
/* La barre CMS pousse tout le contenu, on décale donc le 'top' du menu collant */
.cms-toolbar-expanded .header,
.cms-toolbared .header {
    top: 46px !important;
    /* Hauteur de la barre d'outils CMS */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
}

.logo {
    font-size: 1.75rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo:hover {
    transform: scale(1.02);
}

.logo-accent {
    color: var(--primary-color);
}

.nav {
    display: flex;
    gap: 1.25rem;
    /* Reduced from 2.5rem to prevent wrapping and save space */
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: var(--secondary-color);
    white-space: nowrap;
    /* Prevent text from breaking into two lines */
}

.nav-link:hover {
    color: #ffffff;
}

/* ===========================================================
   STYLE DU LIEN ADMINISTRATION
   Ce style ne s'applique qu'au lien "Administration" dans la navbar.
   Il le rend visuellement distinct pour que l'admin sache immédiatement
   qu'il s'agit d'un accès spécial réservé aux gestionnaires du site.
=========================================================== */
.nav-link-admin {
    /* Couleur dorée/jaune pour signifier "accès privilégié" */
    color: var(--accent-color) !important;

    /* Bordure subtile pour le différencier des autres liens */
    border: 1px solid var(--accent-color);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    display: inline-block;
    /* Pour que le rectangle soit "solide" */

    /* Petite marge à gauche pour le séparer des autres liens */
    margin-left: 1rem;
}

/* Animation au survol du lien admin */
.nav-link-admin:hover {
    /* Fond coloré au survol pour effet "bouton" */
    background-color: var(--accent-color);
    color: #020617 !important;
    /* Texte sombre sur fond clair */
}

.admin-badge {
    position: absolute;
    top: -2px;
    /* Redescendu pour ne pas dépasser au scroll */
    right: -5px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 2px;
}

/* Main Content */
.main-content {
    min-height: calc(100vh - var(--header-height) - 300px);
    padding: 4rem 0;
}

/* Footer */
.footer {
    background: var(--bg-card);
    padding: 6rem 0 2rem;
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    padding: 1.25rem 0;
    z-index: 2000;
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.cookie-content p {
    font-size: 0.9375rem;
    color: white;
}

.cookie-content a {
    color: var(--primary-color);
    text-decoration: underline;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.footer-info h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.footer-info p {
    color: var(--text-muted);
    max-width: 400px;
}

.footer-links h4 {
    margin-bottom: 1rem;
}

.footer-links a {
    display: block;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.footer-links a:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Language Switcher */
.language-switcher {
    margin-left: 1rem;
    position: relative;
}

.lang-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

.lang-select:hover,
.lang-select:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: var(--primary-color);
    outline: none;
}

.lang-select option {
    background: var(--bg-card);
    color: var(--text-main);
    padding: 0.5rem;
}

/* Common UI Elements */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 3rem;
}

/* Alerts */
.messages-container {
    margin-bottom: 2rem;
}

.alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert-success {
    background-color: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.alert-error,
.alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

/* Responsive */
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        gap: 1rem;
        height: auto;
        padding: 1rem 0;
    }

    .header {
        height: auto;
    }

    .nav {
        gap: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
}