/* ==================== Variables CSS ==================== */
/* Couleurs et styles globaux */
:root {
    --primary-color: #4a90e2;
    --primary-hover: #357ABD;
    --success-color: #008000;
    --error-color: #cc0000;
    --background-color: #f8f8f8;
    --form-bg: #f9f9f9;
    --fieldset-bg: #fdfdfd;
    --fieldset-facultatif-bg: #fcfcfc;
    --text-color: #333;
    --section-title-color: #666;
}

/* ==================== Reset et styles de base ==================== */
/* Styles par défaut pour tout le contenu, sauf overrides spécifiques */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
}

/* ==================== Structure principale ==================== */
header { /* Barre en-tête */
    background-color: var(--primary-color);
    padding: 15px 20px;
}

header h1 { /* Titre principal */
    margin: 0;
    color: white;
    font-size: 1.8rem;
}

header nav { /* Menu de navigation */
    margin-top: 8px;
}

header nav a { /* Liens du menu */
    color: white;
    text-decoration: none;
    margin-right: 12px;
    font-weight: bold;
    font-size: 1.1rem;
}

header nav a:hover { text-decoration: underline; }

main { /* Contenu principal (hors header/footer/boutons flottants) */
    padding: 5px 20px;
    max-width: 100%;
    margin: 0 auto;
}

section h2 { /* Titres de sections */
    color: var(--section-title-color);
    font-size: 1.3rem;
    margin-bottom: 0.2em;
    line-height: 1.2;
}

section p { margin-top: 0.3em; }

section.presentation p { /* Paragraphes section présentation */
    max-width: 750px;
    margin: 0;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 0.8em;
}

/* ==================== Grille principale ==================== */
.page-grid { /* Conteneur formulaire + calendrier */
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: start;
}

/* ==================== Formulaire ==================== */
.form-wrapper, .calendar-wrapper { /* Conteneurs structurels */
    width: 100%;
}

.formulaire { /* Conteneur formulaire */
    background: var(--form-bg);
    padding: 15px;
    border-radius: 8px;
}

.form-grid-unique { /* Champs du formulaire : vertical + espacement */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-grid-unique label { /* Labels des champs */
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-grid-unique input[type="text"],
.form-grid-unique input[type="date"],
.form-grid-unique select,
.form-grid-unique textarea,
.form-grid-unique input[type="email"],
.form-grid-unique input[type="file"] { /* Styles uniformes pour les champs */
    flex: 1;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

textarea { resize: vertical; } /* Autorise redimension verticale */

/* ==================== Radio / Checkbox ==================== */
.radio-label { /* Conteneur radio/checkbox + texte */
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    line-height: 1.2;
}

input[type="radio"],
input[type="checkbox"] { /* Le bouton seul */
    margin: 0;
    vertical-align: middle;
}

#adresse-eleve,
#adresse-professeur { /* Adresses optionnelles, cachées */
    display: none;
    margin-left: 20px;
    font-style: italic;
    color: #555;
}

/* ==================== Calendrier ==================== */
.calendrier { /* Conteneur général du calendrier */
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

#calendar { /* Élément FullCalendar */
    width: 100%;
    background: white;
    border-radius: 8px;
    max-height: 495px;
    overflow-y: auto;
}

.event-vert { /* Créneaux disponibles */
    background-color: lightgreen;
    border-color: green;
    color: black;
    font-weight: normal;
    display: flex;
    align-items: center;
    padding-left: 6px;
    word-break: break-word;
    white-space: normal;
}

.event-rouge { /* Créneaux réservés */
    background-color: rgb(216, 25, 69);
    border-color: red;
    color: white;
    font-weight: normal;
    display: flex;
    align-items: center;
    padding-left: 6px;
    word-break: break-word;
    white-space: normal;
}

.calendar-wrapper { /* Espacement autour du calendrier */
    margin-top: 7mm;
}

/* ==================== Liens ==================== */
a { color: var(--primary-color); }
a:hover { text-decoration: underline; }

/* ==================== Messages ==================== */
.message { /* Message générique */
    margin: 10px 0;
    padding: 10px;
    border-radius: 6px;
    font-weight: normal;
}

.message.success { /* Message succès */
    background: #e0ffe0;
    color: var(--success-color);
    border: 1px solid #00aa00;
}

.message.error { /* Message erreur */
    background: #ffe0e0;
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

/* ==================== Fieldsets ==================== */
fieldset { /* Fieldset général */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 20px;
    background-color: var(--fieldset-bg);
}

fieldset.fieldset-facultatif { /* Fieldset facultatif */
    border-color: #aaa;
    background-color: var(--fieldset-facultatif-bg);
}

legend { font-weight: bold; padding: 0 10px; font-size: 1rem; color: #666; }
label small,
.email-info { font-size: 0.8rem; color: #666; display: block; margin-top: 2px; }

/* ==================== Boutons ==================== */
.cta { display: flex; justify-content: flex-start; margin-top: 10px; }

.cta button { /* Bouton CTA */
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cta button:hover { background-color: var(--primary-hover); }
.cta button:active { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* ==================== FullCalendar header spacing ==================== */
.fc-header-toolbar button { margin-right: 60px; }
.fc-header-toolbar button:last-child { margin-right: 0; }

/* ==================== Boutons desktop/mobile ==================== */
/* Le bouton Réserver sous le calendrier s'adapte selon l'écran */
.cta-mobile { display: none; }
.cta-desktop { display: flex; justify-content: flex-start; margin-top: 10px; }

/* ==================== Séparateurs menu ==================== */
header nav a:not(:last-child)::after { content: "|"; padding-left: 18px; color: white; }

/* ==================== Box flottante Contact ==================== */
.floating-contact { position: fixed; top: 135px; right: 20px; width: 400px; background-color: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 999; }
.floating-contact h2 { margin-top: 0; font-size: 1.2rem; }
.floating-contact p { font-size: 0.95rem; line-height: 1.4; }

/* ==================== Admin / boutons ==================== */
.admin-login { display: flex; justify-content: flex-start; gap: 10px; align-items: center; margin-top: 10px; }
.admin-login .btn-admin { background-color: #444 !important; color: white !important; height: 28px; min-width: 80px; padding: 0 20px; font-size: 1rem; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; transition: background 0.2s, box-shadow 0.2s; }
.admin-login .btn-admin:hover { background-color: #555 !important; box-shadow: 0 3px 5px rgba(0,0,0,0.25) !important; }
.admin-login .btn-admin:active { background-color: #333 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; }

@media (min-width: 769px) { /* Alignement bouton admin desktop */
    .reservation-local { display: grid; justify-items: start; }
    .reservation-local .btn-admin { transform: translateX(15px); }
}

/* ==================== Messages flash ==================== */
.flash-message { padding: 10px 15px; margin: 10px 0; border-radius: 6px; font-weight: normal; font-size: 0.95rem; }
.flash-success { background-color: #e0ffe0; color: #008000; border: 1px solid #00aa00; }
.flash-error { background-color: #ffe0e0; color: #cc0000; border: 1px solid #cc0000; }

/* ==================== Responsive Mobile (<768px) ==================== */
@media (max-width: 768px) {
    .page-grid { display: flex !important; flex-direction: column !important; gap: 12px; align-items: stretch; }
    main { padding: 5px; }
    header { padding-left: 16px; padding-right: 10px; display: flex; flex-direction: column; gap: 0px; }
    header h1 { font-size: 1.8rem; text-align: left; margin: 0; }
    header nav { display: flex; flex-direction: row; justify-content: flex-start; gap: 0px; padding-left: 0; margin-left: 0; }
    header nav a { font-size: 1.2rem; font-weight: bold; text-decoration: none; color: white; }
    header nav a:hover { text-decoration: underline; }
    header nav a:not(:last-child)::after { content: "|"; padding-left: 12px; color: white; }
    section.presentation p { max-width: 100%; margin-bottom: 1em; text-align: left; }
    .form-wrapper, .calendar-wrapper, .formulaire, .calendrier, #calendar, #calendar .fc { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; padding-left: 2px; padding-right: 2px; }
    .formulaire { padding: 6px; }
    .form-grid-unique label:not(.radio-label) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; }
    .form-grid-unique label:not(.radio-label) input,
    .form-grid-unique label:not(.radio-label) select { flex: 1 1 auto; min-width: 120px; }
    .form-grid-unique label textarea { flex: 1 1 100%; margin-top: 4px; min-width: 0; }
    .email-info { max-width: 100%; white-space: normal; }
    .cta-mobile { display: flex; justify-content: center; margin-top: 10px; }
    .cta-desktop { display: none; }
    .cta button { width: 100%; font-size: 1rem; }
    #calendar, #calendar .fc, #calendar .fc-scroller, #calendar .fc-view-harness { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    .fc-header-toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
    .floating-contact { position: static; width: 100%; margin: 15px 0 0 0; box-shadow: none; border: none; background: transparent; padding: 0; }
}