:root {
    /* On garde les mêmes NOMS de variables qu'avant (--navy, --gold, --red, --paper)
       mais on change leurs VALEURS pour la nouvelle DA "centre de contrôle".
       Comme tout le site utilise déjà ces noms, le changement de thème se fait
       en un seul endroit, sans retoucher chaque page une par une. */
    --navy: #1B1F2A;   /* fond sombre "salle de contrôle" (remplace le bleu marine chaleureux) */
    --gold: #F5A623;   /* accent ambre = statut "attention / maintenance" */
    --red: #E5484D;    /* accent rouge = statut "alerte / erreur" */
    --cyan: #4FD1C5;   /* accent cyan = statut "actif / opérationnel" (nouvelle couleur) */
    --paper: #F4F5F7;  /* "écrans" clairs sur lesquels le contenu reste lisible */
    --ink: #1F2430;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--navy);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

h1, h2, h3, .navbar-brand {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.5px;
}

a {
    color: var(--cyan);
}
a:hover {
    color: var(--gold);
}

.btn-dark {
    background-color: var(--red);
    border-color: var(--red);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    font-size: 1rem;
}
.btn-dark:hover, .btn-dark:focus {
    background-color: var(--cyan);
    border-color: var(--cyan);
    color: var(--ink);
}

/* --- "Écran" : élément signature réutilisable, comme un panneau lumineux
       dans une salle de contrôle sombre --- */
.park-card {
    background: var(--paper);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(79, 209, 197, 0.15), 0 8px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.park-banner {
    background-color: var(--navy);
    color: var(--paper);
    padding: 2rem;
    text-align: center;
    border-bottom: 2px solid var(--cyan);
}

.park-banner .icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.35rem;
}

.park-banner h2 {
    margin: 0;
    font-size: 2.2rem;
}

.park-banner p {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

.park-body {
    padding: 2rem;
}

/* Variante du bandeau utilisée sur la page d'accueil : une vraie photo en fond,
   avec un voile sombre par-dessus pour que le texte reste lisible */
.park-banner-hero {
    background-image: linear-gradient(rgba(27, 31, 42, 0.75), rgba(27, 31, 42, 0.75)),
                       url('/assets/img/parc-hero.png');
    background-size: cover;
    background-position: center;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.park-banner-hero h2 {
    font-size: 3rem;
}

.park-banner-hero p {
    font-size: 1.1rem;
}

/* Variante plus petite pour les bandeaux de connexion/inscription : même principe
   que le hero de l'accueil (photo en fond + voile sombre), mais moins haute.
   Cette classe ne contient QUE les propriétés communes (taille, position) ;
   l'image elle-même est définie séparément ci-dessous pour chaque page,
   pour pouvoir réutiliser une photo différente sur chaque page */
.park-banner-photo {
    background-size: cover;
    background-position: center;
    min-height: 220px;
}

.bg-connexion {
    background-image: linear-gradient(rgba(27, 31, 42, 0.8), rgba(27, 31, 42, 0.8)),
                       url('/assets/img/connexion-hero.png');
}

.bg-inscription {
    background-image: linear-gradient(rgba(27, 31, 42, 0.8), rgba(27, 31, 42, 0.8)),
                       url('/assets/img/inscription.png');
}

/* --- Cartes attractions : "panneaux de contrôle" --- */
.attraction-card {
    background: var(--paper);
    border-radius: 8px;
    border-left: 4px solid var(--cyan);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
    padding: 1.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.attraction-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.attraction-card .attraction-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.attraction-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}

/* Identifiant technique en haut à droite de chaque carte, ex: "UNIT-04".
   Un petit fond sombre semi-transparent garantit que le texte reste lisible,
   même quand il se superpose à une photo claire en dessous */
.attraction-card .unit-id {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    background-color: rgba(27, 31, 42, 0.65);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    z-index: 2;
}

/* --- LED de statut, comme sur un robot : verte = actif, ambre = en réparation --- */
.status-led {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.4rem;
}
.status-led-active {
    background-color: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
}
.status-led-maintenance {
    background-color: var(--gold);
    box-shadow: 0 0 6px var(--gold);
}

.badge-park {
    display: inline-block;
    background-color: rgba(27, 31, 42, 0.08);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

.badge-park-warning {
    background-color: var(--red);
    color: #fff;
}

.btn-dark, .btn-outline-secondary, .btn-outline-dark {
    transition: transform 0.1s ease;
}
.btn-dark:hover {
    transform: translateY(-1px);
}

/* --- Tableaux du back-office : même traitement "écran clair sur fond sombre"
       que les .park-card, pour rester cohérent avec le reste du site --- */
.park-table {
    background: var(--paper);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(79, 209, 197, 0.15), 0 8px 28px rgba(0, 0, 0, 0.45);
    padding: 1.5rem;
}

.park-table table {
    margin-bottom: 0;
}