/* ==========================
   Variables globales
========================== */
:root {
    --noir: #111;
    --blanc: #fff;
    --gris: #666;
    --gris-clair: #ddd;
    --accent: #af780c;
    --fond-remarque: #fff7e6;
    --bordure-remarque: #ffe1a6;
    --rose: #ff00ff;
    --bleu: #0074d9;
    --vert: #2ecc40;
    --rouge: #ff4136;
}

/* ==========================
   Reset & Base
========================== */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Familjen Grotesk', Arial, sans-serif;
    background: var(--blanc);
    color: var(--noir);
    min-height: 100vh;
}

body {
    max-width: 700px;
    margin: 0 auto;
    padding: 2em 1em;
    display: flex;
    flex-direction: column;
}

/* ==========================
   Bandeau haut
========================== */
.bandeau-haut img {
    width: 100%;
    max-width: 550px;
    display: block;
    margin: 0 auto 2em;
}

/* ==========================
   Titres
========================== */
h2 {
    font-size: 2em;
    font-weight: 700;
    margin: 0.5em 0 1.2em;
    text-align: center;
    letter-spacing: 1px;
}

h3 {
    margin-top: 0;
    color: var(--noir);
    text-align: center;
}

/* ==========================
   Formulaire
========================== */
label {
    display: block;
    margin-top: 1.5em;
    font-weight: 700;
    font-size: 1em;
}

input[type="file"], select {
    width: 100%;
    padding: 0.7em;
    margin-top: 0.5em;
    border: 1px solid var(--gris-clair);
    border-radius: 3px;
    font-size: 1em;
    background: var(--blanc);
    color: var(--noir);
    margin-bottom: 1em;
}

input[type="file"]:focus, select:focus {
    border-color: var(--gris);
    outline: none;
}

/* ==========================
   Boutons
========================== */
button {
    padding: 0.9em 2em;
    background: var(--noir);
    color: var(--blanc);
    border: none;
    border-radius: 3px;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1.2em;
    transition: background 0.3s ease;
}

button:hover {
    background: var(--gris);
    color: var(--noir);
}

.btn-reservation {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 1.5em;
    background: var(--accent);
    color: var(--blanc);
    font-size: 1.1em;
}

.btn-reservation:hover {
    background: #d49b2f;
}

/* ==========================
   Résultats
========================== */
#resultats {
    margin-top: 2.2em;
    border-top: 1.5px solid var(--noir);
    padding-top: 1.2em;
    font-size: 1.07em;
}

#resultats table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}

#resultats th, #resultats td {
    border: 1px solid var(--gris-clair);
    padding: 0.6em;
    text-align: center;
}

#resultats th {
    background: #f4f4f4;
    font-weight: bold;
}

#resultats td:first-child {
    font-weight: bold;
}

/* Couleurs dynamiques */
#resultats td.couleur-rose { color: var(--rose); }
#resultats td.couleur-bleu { color: var(--bleu); }
#resultats td.couleur-vert { color: var(--vert); }
#resultats td.couleur-rouge { color: var(--rouge); }
#resultats td.couleur-noir { color: var(--noir); }

/* ==========================
   Historique
========================== */
.historique-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2em;
}

.historique-table th, .historique-table td {
    border: 1px solid var(--gris-clair);
    padding: 0.6em;
    text-align: center;
}

.historique-table th {
    background: #f4f4f4;
}

.historique-details {
    margin-top: 0.5em;
    font-size: 0.95em;
}

.historique-details span {
    display: inline-block;
    margin-right: 1em;
}

/* ==========================
   Pied de page
========================== */
.footer-logos {
    display: flex;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 2em;
}

.footer-logos img {
    height: 48px;
    filter: grayscale(100%);
}

.footer {
    text-align: center;
    margin-top: 2em;
    font-size: 0.97em;
    color: var(--gris);
    opacity: 0.8;
}

/* ==========================
   Responsive
========================== */
@media (max-width: 600px) {
    body {
        padding: 1em 0.5em;
    }
    h2 {
        font-size: 1.4em;
    }
    .footer-logos img {
        height: 32px;
    }
}