/* Administration — même palette que le site public (noir/or/ivoire), adaptée à un
   usage fonctionnel et dense en contenu (tableaux, formulaires) : les mêmes jetons
   de couleur que public/assets/css/site.css sont réutilisés sous les anciens noms
   --admin-* pour ne pas avoir à retoucher chaque règle. Priorité conservée à la
   lisibilité (contraste élevé, gros boutons, 44px minimum) pour une utilisatrice ou
   un utilisateur non technicien. */

:root {
    --admin-bg: #111111;
    --admin-surface: #1c1b1a;
    --admin-surface-input: #232220;
    --admin-border: #c8a45b;
    --admin-border-soft: #55503f;
    --admin-text: #f4f0e8;
    --admin-text-muted: #afa79a;
    --admin-primary: #c8a45b;
    --admin-primary-dark: #d9bc7f;
    --admin-on-primary: #111111;
    --admin-success-bg: #1c2b1c;
    --admin-success-text: #8fbb8a;
    --admin-error-bg: #2b1c1f;
    --admin-error-text: #e5978f;
    --admin-focus: #d9bc7f;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-garamond-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-garamond-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--admin-text);
    background: var(--admin-bg);
}

h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    color: var(--admin-text);
}

a {
    color: var(--admin-primary);
}

:focus-visible {
    outline: 2px solid var(--admin-focus);
    outline-offset: 2px;
}

/* --- Admin shell ---------------------------------------------------------- */

.admin-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.admin-shell__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 24px;
}

.admin-shell__brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--admin-primary);
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: auto;
}

.admin-shell__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.admin-shell__nav a {
    display: inline-block;
    padding: 10px 10px;
    min-height: 44px;
    line-height: 24px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--admin-text);
    border-radius: 8px;
}

.admin-shell__nav a:hover,
.admin-shell__nav a:focus-visible {
    color: var(--admin-primary);
    background: var(--admin-surface);
}

.admin-shell__logout {
    flex-shrink: 0;
}

.admin-shell__logout button {
    background: none;
    border: 1px solid var(--admin-border-soft);
    color: var(--admin-text);
    border-radius: 8px;
    padding: 10px 14px;
    min-height: 44px;
    white-space: nowrap;
    cursor: pointer;
    font: inherit;
}

.admin-shell__content h1 {
    margin-top: 0;
}

/* --- Flash ----------------------------------------------------------------- */

.admin-flash {
    padding: 14px 18px;
    border-radius: 8px;
    margin: 0 0 20px;
    font-weight: 600;
    border: 1px solid transparent;
}

.admin-flash--success {
    background: var(--admin-success-bg);
    color: var(--admin-success-text);
    border-color: var(--admin-success-text);
}

.admin-flash--error {
    background: var(--admin-error-bg);
    color: var(--admin-error-text);
    border-color: var(--admin-error-text);
}

/* --- Boutons ---------------------------------------------------------------- */

.admin-button,
button,
input[type="submit"] {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 12px 20px;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg);
    color: var(--admin-primary);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.admin-button:hover,
button:hover {
    background: var(--admin-primary);
    color: var(--admin-on-primary);
}

.admin-button--primary,
.admin-form__actions button[type="submit"] {
    background: var(--admin-primary);
    color: var(--admin-on-primary);
}

.admin-button--primary:hover {
    background: var(--admin-primary-dark);
}

.admin-button--danger,
button.admin-button--danger {
    border-color: var(--admin-error-text);
    color: var(--admin-error-text);
    background: var(--admin-bg);
}

.admin-button--danger:hover {
    background: var(--admin-error-text);
    color: var(--admin-bg);
}

/* --- Page header ------------------------------------------------------------ */

.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.admin-page-header h1 {
    margin: 0;
}

/* --- Compteurs tableau de bord ---------------------------------------------- */

.admin-dashboard__next-event {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border-soft);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.admin-dashboard__counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.admin-counter {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border-soft);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.admin-counter__value {
    /* Volontairement en Inter (pas la serif de titre) : à cette taille, le "1" de
       Cormorant Garamond se lit comme un "I" majuscule — ambigu pour un compteur
       chiffré, repéré à l'écran avant cette correction. */
    display: block;
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--admin-primary);
}

.admin-counter__label {
    color: var(--admin-text-muted);
}

/* --- Tables ------------------------------------------------------------------ */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border-soft);
    border-radius: 12px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--admin-border-soft);
}

.admin-table th {
    vertical-align: top;
}

.admin-table td {
    vertical-align: middle;
}

.admin-table__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.admin-table__thumb--empty {
    background: var(--admin-surface-input);
    color: var(--admin-text-muted);
    font-size: 0.85rem;
}

.admin-table__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.admin-table__actions form {
    display: inline-flex;
}

/* Style unifié : un lien ("Modifier") et un bouton doivent avoir la même taille et
   la même allure pour que la colonne d'actions se lise comme un seul groupe
   cohérent, plutôt qu'un texte souligné mélangé à des gros boutons dorés. */
.admin-table__actions a,
.admin-table__actions button {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--admin-border-soft);
    background: transparent;
    color: var(--admin-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.admin-table__actions a:hover,
.admin-table__actions button:hover {
    border-color: var(--admin-border);
    color: var(--admin-text);
    background: var(--admin-surface-input);
}

/* "Modifier" reste l'action principale de chaque ligne : seule à ressortir en
   couleur, pour guider l'œil avant les actions secondaires. */
.admin-table__actions a:first-child {
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.admin-table__actions a:first-child:hover {
    background: var(--admin-primary);
    color: var(--admin-on-primary);
}

.admin-table__actions .admin-button--accent {
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.admin-table__actions .admin-button--accent:hover {
    background: var(--admin-primary);
    color: var(--admin-on-primary);
}

.admin-table__actions .admin-button--danger {
    border-color: var(--admin-error-text);
    color: var(--admin-error-text);
    background: transparent;
}

.admin-table__actions .admin-button--danger:hover {
    background: var(--admin-error-text);
    color: var(--admin-bg);
}

/* --- Formulaires -------------------------------------------------------------- */

.admin-form fieldset {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border-soft);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-form legend {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0 8px;
    color: var(--admin-primary);
}

.admin-form label {
    display: block;
    font-weight: 600;
    margin: 14px 0 6px;
    color: var(--admin-text);
}

.admin-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="tel"],
.admin-form input[type="url"],
.admin-form input[type="date"],
.admin-form input[type="time"],
.admin-form input[type="number"],
.admin-form input[type="password"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    max-width: 480px;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--admin-border-soft);
    border-radius: 8px;
    font: inherit;
    background: var(--admin-surface-input);
    color: var(--admin-text);
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    border-color: var(--admin-border);
}

/* Placeholder nettement plus terne que le texte saisi (ex. "--:--" des champs
   heure) : impossible de confondre un espace réservé avec une vraie valeur. */
.admin-form input::placeholder {
    color: var(--admin-text-muted);
    opacity: 1;
}

.admin-time-input {
    max-width: 120px;
    letter-spacing: 0.05em;
}

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

/* --- Saisie d'heure incomplète (voir admin.js) --------------------------------- */

input.admin-input--incomplete {
    border-color: var(--admin-error-text);
    outline: 2px solid transparent;
}

.admin-field-warning {
    display: none;
    color: var(--admin-error-text);
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.admin-field-warning--visible {
    display: block;
}

.admin-form__actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-form-errors {
    background: var(--admin-error-bg);
    color: var(--admin-error-text);
    border: 1px solid var(--admin-error-text);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

/* --- Galerie de photos (admin) -------------------------------------------------------- */

.admin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.admin-gallery-grid__item {
    margin: 0;
    border: 1px solid var(--admin-border-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--admin-surface);
}

.admin-gallery-grid__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.admin-gallery-grid__item figcaption {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.admin-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--admin-border-soft);
    color: var(--admin-text-muted);
}

.admin-badge--active {
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.admin-field-error {
    color: var(--admin-error-text);
    font-size: 0.9rem;
    margin: 4px 0 0;
}

/* --- Messages ------------------------------------------------------------------ */

.admin-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-message {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border-soft);
    border-left: 4px solid var(--admin-border-soft);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.admin-message--new {
    border-left-color: var(--admin-primary);
}

.admin-message__header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--admin-text-muted);
    margin-bottom: 8px;
}

.admin-message__actions {
    display: flex;
    gap: 8px;
}

/* --- Connexion ------------------------------------------------------------------ */

.admin-body--auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.admin-auth {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border-soft);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

.admin-auth__title {
    margin: 0 0 4px;
    text-align: center;
    color: var(--admin-primary);
}

.admin-auth__subtitle {
    text-align: center;
    color: var(--admin-text-muted);
    margin-top: 0;
}

.admin-auth__error {
    background: var(--admin-error-bg);
    color: var(--admin-error-text);
    border: 1px solid var(--admin-error-text);
    border-radius: 8px;
    padding: 12px 16px;
}

.admin-auth__form label {
    display: block;
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--admin-text);
}

.admin-auth__form input {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--admin-border-soft);
    border-radius: 8px;
    background: var(--admin-surface-input);
    color: var(--admin-text);
    font: inherit;
}

.admin-auth__form input:focus {
    border-color: var(--admin-border);
}

.admin-auth__form button {
    width: 100%;
    margin-top: 20px;
}

/* --- Indicateur d'attente (formulaires lents, ex. génération d'affiche IA) ---------- */

.admin-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.admin-loading-overlay__box {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 32px 36px;
    max-width: 360px;
    text-align: center;
}

.admin-loading-overlay__box p {
    margin: 0;
    color: var(--admin-text);
}

.admin-loading-overlay__bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--admin-surface-input);
    overflow: hidden;
    margin-bottom: 18px;
}

.admin-loading-overlay__bar-fill {
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--admin-primary);
    animation: admin-loading-slide 1.2s ease-in-out infinite;
}

@keyframes admin-loading-slide {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(280%);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}