/**
 * Blatter Reservation System - Feuille de styles publique
 *
 * Styles pour l'assistant de reservation multi-etapes (wizard).
 * Inclut la barre de progression, les champs de formulaire, le calendrier,
 * la grille de creneaux horaires, les messages, et les animations.
 *
 * Organisation des sections :
 *   1.  Variables CSS (couleurs, espacements, typographie)
 *   2.  Conteneur principal du wizard
 *   3.  Barre de progression / Stepper
 *   4.  Conteneur des etapes (fieldsets)
 *   5.  Grille et groupes de champs
 *   6.  Champs de saisie (inputs, labels, aide)
 *   7.  Boutons de navigation et d'action
 *   8.  Calendrier / Date picker (Flatpickr)
 *   9.  Grille des creneaux horaires
 *  10.  Carte de recapitulatif (etape 4)
 *  11.  Messages d'information, erreur, avertissement
 *  12.  Ecran de confirmation (succes)
 *  13.  Indicateurs de chargement (spinners)
 *  14.  Animations et transitions
 *  15.  Utilitaires et accessibilite
 *  16.  Responsive : tablette et mobile
 *  17.  Mode impression
 *
 * @package    Blatter_Reservation_System
 * @subpackage Public/CSS
 * @since      1.0.0
 */


/* ==========================================================================
   1. VARIABLES CSS
   ==========================================================================
   Definition des variables personnalisees (custom properties) utilisees
   dans l'ensemble du formulaire. Permet de modifier facilement les
   couleurs et espacements du theme.
   ========================================================================== */

:root {
    /* --- Couleur principale (bleu fonce Blatter) --- */
    --blatter-primary:          #1f3042;
    --blatter-primary-hover:    #162433;
    --blatter-primary-active:   #0f1a25;
    --blatter-primary-light:    #e9ecf0;
    --blatter-primary-border:   #c5cbd3;
    --blatter-primary-shadow:   rgba(31, 48, 66, 0.2);

    /* --- Couleur d'accent (rouge Blatter) --- */
    --blatter-accent:           #f04f3e;
    --blatter-accent-hover:     #d94535;
    --blatter-accent-active:    #c23c2e;
    --blatter-accent-light:     #fdecea;
    --blatter-accent-shadow:    rgba(240, 79, 62, 0.2);

    /* --- Couleur de succes (vert) --- */
    --blatter-success:          #28a745;
    --blatter-success-light:    #d4edda;
    --blatter-success-border:   #c3e6cb;
    --blatter-success-text:     #155724;

    /* --- Couleur d'erreur (rouge) --- */
    --blatter-error:            #dc3545;
    --blatter-error-light:      #f8d7da;
    --blatter-error-border:     #f1aeb5;
    --blatter-error-text:       #842029;

    /* --- Couleur d'avertissement (orange/jaune) --- */
    --blatter-warning:          #e6a817;
    --blatter-warning-light:    #fff3cd;
    --blatter-warning-border:   #ffeaa7;
    --blatter-warning-text:     #664d03;

    /* --- Couleur d'information (bleu fonce) --- */
    --blatter-info:             #1f3042;
    --blatter-info-light:       #e9ecf0;
    --blatter-info-border:      #c5cbd3;
    --blatter-info-text:        #1f3042;

    /* --- Couleurs neutres (gris) --- */
    --blatter-white:            #ffffff;
    --blatter-gray-50:          #f8f9fa;
    --blatter-gray-100:         #f5f5f5;
    --blatter-gray-200:         #e9ecef;
    --blatter-gray-300:         #e0e0e0;
    --blatter-gray-400:         #cccccc;
    --blatter-gray-500:         #999999;
    --blatter-gray-600:         #888888;
    --blatter-gray-700:         #666666;
    --blatter-gray-800:         #444444;
    --blatter-gray-900:         #333333;

    /* --- Typographie --- */
    --blatter-font-family:      inherit;

    /* --- Bordures et ombres --- */
    --blatter-radius-sm:        6px;
    --blatter-radius-md:        8px;
    --blatter-radius-lg:        10px;
    --blatter-radius-full:      50%;
    --blatter-shadow:           0 2px 20px rgba(0, 0, 0, 0.08);
    --blatter-shadow-sm:        0 2px 8px rgba(31, 48, 66, 0.12);
    --blatter-shadow-md:        0 2px 12px rgba(0, 0, 0, 0.08);

    /* --- Transitions --- */
    --blatter-transition:       all 0.2s ease;
    --blatter-transition-slow:  all 0.3s ease;
    --blatter-transition-fast:  all 0.15s ease;
}


/* ==========================================================================
   2. CONTENEUR PRINCIPAL DU WIZARD
   ==========================================================================
   Le conteneur global (#blatter-booking-wizard) centre le formulaire
   et applique le style de carte avec ombre portee.
   ========================================================================== */

/* Conteneur global : carte centree avec ombre portee */
#blatter-booking-wizard {
    max-width: 700px;
    margin: 30px auto;
    background: var(--blatter-white);
    border-radius: var(--blatter-radius-lg);
    box-shadow: var(--blatter-shadow);
    padding: 30px;
    font-family: var(--blatter-font-family);
    color: var(--blatter-gray-900);
    line-height: 1.6;
    position: relative;
}

/* Reset des marges des fieldsets (compatibilite navigateurs) */
#blatter-booking-wizard fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0; /* Correction pour Firefox */
}


/* ==========================================================================
   3. BARRE DE PROGRESSION / STEPPER
   ==========================================================================
   Barre horizontale en haut du formulaire indiquant l'etape courante.
   Composee de cercles numerotes, de libelles descriptifs, et d'une
   barre de progression animee.
   ========================================================================== */

/* Conteneur de la barre de progression */
.blatter-progress-bar {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--blatter-gray-200);
}

/* Liste des etapes (disposition horizontale) */
.blatter-steps-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    list-style: none;
    padding: 0 10px;
    margin: 0 0 15px 0;
    position: relative;
}

/* Ligne de connexion entre les etapes (fond gris) */
.blatter-steps-list::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--blatter-gray-300);
    z-index: 0;
}

/* Element d'etape individuel */
.blatter-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
    cursor: default;
}

/* Cercle numerote de l'etape */
.blatter-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--blatter-radius-full);
    background: var(--blatter-gray-300);
    color: var(--blatter-gray-500);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    transition: var(--blatter-transition-slow);
    border: 3px solid var(--blatter-gray-300);
}

/* Libelle sous le cercle */
.blatter-step-label {
    font-size: 12px;
    color: var(--blatter-gray-500);
    text-align: center;
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap;
    max-width: 90px;
}

/* Etape active : cercle rouge accent plein avec halo */
.blatter-step-item.active .blatter-step-number {
    background: var(--blatter-accent);
    color: var(--blatter-white);
    border-color: var(--blatter-accent);
    box-shadow: 0 0 0 4px var(--blatter-accent-shadow);
}

/* Etape active : libelle en rouge accent */
.blatter-step-item.active .blatter-step-label {
    color: var(--blatter-accent);
    font-weight: 600;
}

/* Etape completee : cercle bleu fonce */
.blatter-step-item.completed .blatter-step-number {
    background: var(--blatter-primary);
    color: var(--blatter-white);
    border-color: var(--blatter-primary);
}

/* Etape completee : libelle en bleu fonce */
.blatter-step-item.completed .blatter-step-label {
    color: var(--blatter-primary);
}

/* Barre de progression (trait horizontal sous les etapes) */
.blatter-progress-track {
    width: 100%;
    height: 4px;
    background: var(--blatter-gray-300);
    border-radius: 2px;
    overflow: hidden;
}

/* Remplissage de la barre de progression (anime via JS) */
.blatter-progress-fill {
    height: 100%;
    background: var(--blatter-accent);
    border-radius: 2px;
    transition: width 0.4s ease-in-out;
}


/* ==========================================================================
   4. CONTENEUR DES ETAPES (FIELDSETS)
   ==========================================================================
   Chaque etape est un fieldset masque par defaut (display:none en HTML).
   L'affichage est gere par JavaScript. L'etape visible recoit une
   animation d'entree en fondu.
   ========================================================================== */

/* Etape du formulaire (animation d'entree) */
.blatter-step {
    animation: blatter-fade-in 0.4s ease forwards;
}

/* Titre de l'etape (legend) */
.blatter-step-title {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--blatter-gray-900);
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-top: 0;
    border-bottom: 2px solid var(--blatter-gray-200);
    display: block;
    width: 100%;
}

/* Description de l'etape */
.blatter-step-description {
    font-size: 0.95em;
    color: var(--blatter-gray-700);
    margin-bottom: 20px;
    line-height: 1.5;
}


/* ==========================================================================
   5. GRILLE ET GROUPES DE CHAMPS
   ==========================================================================
   La grille de formulaire utilise CSS Grid pour disposer les champs
   sur 2 colonnes. Certains champs occupent toute la largeur.
   ========================================================================== */

/* Grille deux colonnes sur desktop, une colonne sur mobile */
.blatter-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 10px;
}

/* Groupe de champ individuel (label + input) */
.blatter-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* Champ qui occupe toute la largeur (2 colonnes) */
.blatter-form-group--full {
    grid-column: 1 / -1;
}


/* ==========================================================================
   6. CHAMPS DE SAISIE (INPUTS, LABELS, AIDE)
   ==========================================================================
   Styles pour les labels, champs de saisie, indicateurs d'obligation,
   messages d'aide et de statut des champs.
   ========================================================================== */

/* Label du champ */
.blatter-label {
    font-size: 0.875em;
    font-weight: 600;
    color: var(--blatter-gray-800);
    margin-bottom: 6px;
    display: block;
}

/* Indicateur de champ obligatoire (asterisque rouge) */
.blatter-required {
    color: var(--blatter-error);
    margin-left: 2px;
}

/* Champ de saisie (input text, email, tel) */
.blatter-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dddddd;
    border-radius: var(--blatter-radius-sm);
    font-size: 0.95em;
    font-family: var(--blatter-font-family);
    color: var(--blatter-gray-900);
    background: var(--blatter-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
    line-height: 1.5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Placeholder des champs de saisie */
.blatter-input::placeholder {
    color: #aaaaaa;
    font-style: italic;
    font-weight: 400;
}

/* Champ au focus (clic ou tabulation) : bordure accent avec halo */
.blatter-input:focus {
    border-color: var(--blatter-accent);
    box-shadow: 0 0 0 3px rgba(240, 79, 62, 0.12);
}

/* Champ en erreur de validation */
.blatter-input.blatter-input--error,
.blatter-input.has-error {
    border-color: var(--blatter-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.blatter-input.blatter-input--error:focus,
.blatter-input.has-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Champ valide (apres verification reussie) */
.blatter-input.blatter-input--valid {
    border-color: var(--blatter-success);
}

.blatter-input.blatter-input--valid:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.12);
}

/* Champ desactive (disabled uniquement) */
.blatter-input:disabled {
    background: var(--blatter-gray-100);
    color: var(--blatter-gray-500);
    cursor: not-allowed;
}

/* Champ readonly generique (grise sauf Flatpickr) */
.blatter-input[readonly]:not(.flatpickr-input) {
    background: var(--blatter-gray-100);
    color: var(--blatter-gray-500);
    cursor: not-allowed;
}

/* Champ Flatpickr readonly : style interactif (le readonly est normal pour Flatpickr) */
.blatter-input.flatpickr-input[readonly],
.flatpickr-alt-input.blatter-input[readonly],
input.flatpickr-input[readonly] {
    background: var(--blatter-white, #fff);
    color: var(--blatter-gray-800, #1a1a1a);
    cursor: pointer;
}

/* Texte d'aide sous le champ */
.blatter-field-help {
    display: block;
    margin-top: 4px;
    font-size: 0.8em;
    color: var(--blatter-gray-600);
    line-height: 1.4;
    font-style: italic;
}

/* Lien dans le texte d'aide */
.blatter-field-help a {
    color: var(--blatter-primary);
    text-decoration: underline;
    font-style: normal;
    font-weight: 600;
}

.blatter-field-help a:hover {
    color: var(--blatter-primary-hover);
    opacity: 0.8;
}

/* Message de statut du champ (ex : verification code postal) */
.blatter-field-status {
    display: block;
    margin-top: 4px;
    font-size: 0.8em;
    font-weight: 500;
    min-height: 1.25rem; /* Reserve l'espace pour eviter le saut de page */
}

/* Statut : succes (zone trouvee) */
.blatter-field-status.status-success {
    color: var(--blatter-success);
}

/* Statut : erreur (zone non trouvee) */
.blatter-field-status.status-error {
    color: var(--blatter-error);
}

/* Statut : chargement en cours */
.blatter-field-status.status-loading {
    color: var(--blatter-gray-500);
    font-style: italic;
}


/* ==========================================================================
   7. BOUTONS DE NAVIGATION ET D'ACTION
   ==========================================================================
   Styles des boutons Precedent, Suivant, et Confirmer.
   La zone d'actions (.blatter-form-actions) aligne les boutons.
   ========================================================================== */

/* Conteneur des boutons d'action */
.blatter-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--blatter-gray-200);
    gap: 12px;
}

/* Style de base commun pour tous les boutons */
.blatter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.95em;
    font-weight: 600;
    font-family: var(--blatter-font-family);
    border: 2px solid transparent;
    border-radius: var(--blatter-radius-sm);
    cursor: pointer;
    transition: var(--blatter-transition);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

/* Focus visible pour l'accessibilite clavier */
.blatter-btn:focus-visible {
    outline: 2px solid var(--blatter-accent);
    outline-offset: 2px;
}

/* Fleche decorative du bouton */
.blatter-btn-arrow {
    font-size: 1.1em;
}

/* Icone du bouton (ex : coche de confirmation) */
.blatter-btn-icon {
    font-size: 1.2em;
}

/* Bouton principal (Suivant) : fond rouge accent, texte blanc */
.blatter-btn--primary {
    background: var(--blatter-accent);
    color: var(--blatter-white);
    border-color: var(--blatter-accent);
}

.blatter-btn--primary:hover {
    background: var(--blatter-accent-hover);
    border-color: var(--blatter-accent-hover);
    color: var(--blatter-white);
    text-decoration: none;
}

.blatter-btn--primary:active {
    background: var(--blatter-accent-active);
    border-color: var(--blatter-accent-active);
    transform: translateY(1px);
}

/* Bouton secondaire (Precedent) : contour bleu fonce, fond transparent */
.blatter-btn--secondary {
    background: transparent;
    color: var(--blatter-primary);
    border-color: var(--blatter-primary);
}

.blatter-btn--secondary:hover {
    background: rgba(31, 48, 66, 0.08);
    color: var(--blatter-primary-hover);
    text-decoration: none;
}

.blatter-btn--secondary:active {
    background: rgba(31, 48, 66, 0.15);
    transform: translateY(1px);
}

/* Bouton de confirmation (succes) : fond vert, texte blanc */
.blatter-btn--success {
    background: var(--blatter-success);
    color: var(--blatter-white);
    border-color: var(--blatter-success);
}

.blatter-btn--success:hover {
    background: #218838;
    border-color: #218838;
    color: var(--blatter-white);
    text-decoration: none;
}

.blatter-btn--success:active {
    background: #1e7e34;
    border-color: #1e7e34;
    transform: translateY(1px);
}

/* Bouton desactive (disabled) */
.blatter-btn:disabled,
.blatter-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bouton en etat de chargement */
.blatter-btn.blatter-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: 0.8;
}

.blatter-btn.blatter-btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--blatter-white);
    border-radius: var(--blatter-radius-full);
    animation: blatter-spin 0.7s linear infinite;
}

/* Aligner le bouton Suivant a droite quand il est seul (premiere etape) */
.blatter-form-actions .blatter-btn--next:first-child,
.blatter-form-actions .blatter-btn--primary:only-child {
    margin-left: auto;
}


/* ==========================================================================
   8. CALENDRIER / DATE PICKER (FLATPICKR)
   ==========================================================================
   Styles personnalises pour le calendrier Flatpickr integre inline
   dans l'etape 2 du formulaire. Les styles surchargent ceux de Flatpickr.
   ========================================================================== */

/* Conteneur du calendrier : carte avec ombre */
.blatter-calendar-container {
    display: flex;
    justify-content: center;
    background: var(--blatter-white);
    border-radius: var(--blatter-radius-md);
    box-shadow: var(--blatter-shadow-md);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #eeeeee;
}

/* Personnalisation de Flatpickr : conteneur inline pleine largeur */
.blatter-calendar-container .flatpickr-calendar {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 400px;
}

/* Mois et annee dans l'en-tete du calendrier */
.blatter-calendar-container .flatpickr-current-month {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--blatter-gray-900);
}

/* Jours de la semaine (lun, mar, etc.) */
.blatter-calendar-container .flatpickr-weekdays {
    margin-bottom: 5px;
}

.blatter-calendar-container .flatpickr-weekday {
    color: var(--blatter-primary);
    font-weight: 600;
    font-size: 0.85em;
}

/* Jour individuel dans le calendrier */
.blatter-calendar-container .flatpickr-day {
    border-radius: var(--blatter-radius-sm);
    font-weight: 500;
    transition: var(--blatter-transition-fast);
    max-width: 40px;
    height: 40px;
    line-height: 40px;
}

/* Jour disponible : surligne en bleu fonce clair */
.blatter-calendar-container .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
    background: rgba(31, 48, 66, 0.08);
    color: var(--blatter-primary);
}

/* Survol d'un jour disponible */
.blatter-calendar-container .flatpickr-day:not(.flatpickr-disabled):hover {
    background: var(--blatter-accent);
    color: var(--blatter-white);
    border-color: var(--blatter-accent);
}

/* Jour selectionne : fond rouge accent */
.blatter-calendar-container .flatpickr-day.selected,
.blatter-calendar-container .flatpickr-day.selected:hover {
    background: var(--blatter-accent);
    color: var(--blatter-white);
    border-color: var(--blatter-accent);
    font-weight: 700;
}

/* Jour indisponible : grise et barre */
.blatter-calendar-container .flatpickr-day.flatpickr-disabled,
.blatter-calendar-container .flatpickr-day.flatpickr-disabled:hover {
    color: var(--blatter-gray-400);
    background: transparent;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Jour d'aujourd'hui : bordure pointillee bleue */
.blatter-calendar-container .flatpickr-day.today:not(.selected) {
    border: 2px dashed var(--blatter-primary);
}

/* Fleches de navigation mois precedent/suivant */
.blatter-calendar-container .flatpickr-prev-month,
.blatter-calendar-container .flatpickr-next-month {
    fill: var(--blatter-primary);
    color: var(--blatter-primary);
    padding: 5px;
}

.blatter-calendar-container .flatpickr-prev-month:hover,
.blatter-calendar-container .flatpickr-next-month:hover {
    fill: var(--blatter-primary-hover);
    color: var(--blatter-primary-hover);
}

/* Affichage de la date/heure selectionnee (badge) */
.blatter-selected-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--blatter-primary-light);
    border: 1px solid var(--blatter-primary-border);
    border-radius: 20px;
    font-size: 0.95em;
    margin-top: 10px;
}

.blatter-selected-label {
    color: var(--blatter-gray-700);
    font-weight: 500;
}

.blatter-selected-value {
    color: var(--blatter-primary);
    font-weight: 700;
}


/* ==========================================================================
   9. GRILLE DES CRENEAUX HORAIRES
   ==========================================================================
   Les creneaux sont affiches sous forme de boutons dans une grille
   responsive. Les creneaux deja reserves sont grises et non cliquables.
   ========================================================================== */

/* Grille des creneaux : 3 colonnes desktop, responsive */
.blatter-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 15px 0 20px 0;
}

/* Bouton de creneau horaire individuel */
.blatter-time-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    background: var(--blatter-white);
    border: 2px solid #dddddd;
    border-radius: var(--blatter-radius-md);
    cursor: pointer;
    transition: var(--blatter-transition);
    font-family: var(--blatter-font-family);
    font-size: 1.05em;
    font-weight: 700;
    color: var(--blatter-gray-900);
    text-align: center;
    min-height: 50px;
    line-height: 1.3;
}

/* Creneau au survol */
.blatter-time-slot:hover:not(.blatter-time-slot--booked):not(.disabled) {
    border-color: var(--blatter-accent);
    background: rgba(240, 79, 62, 0.04);
    box-shadow: var(--blatter-shadow-sm);
    transform: translateY(-1px);
}

/* Creneau au focus (accessibilite clavier) */
.blatter-time-slot:focus-visible {
    outline: 2px solid var(--blatter-primary);
    outline-offset: 2px;
}

/* Creneau selectionne : fond rouge accent, texte blanc */
.blatter-time-slot--selected,
.blatter-time-slot.selected {
    background: var(--blatter-accent);
    border-color: var(--blatter-accent);
    color: var(--blatter-white);
    box-shadow: 0 2px 10px var(--blatter-accent-shadow);
}

/* Creneau deja reserve (indisponible / grise) */
.blatter-time-slot--booked,
.blatter-time-slot.disabled {
    background: var(--blatter-gray-100);
    border-color: var(--blatter-gray-300);
    color: #aaaaaa;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.6;
}


/* ==========================================================================
   10. CARTE DE RECAPITULATIF (ETAPE 4)
   ==========================================================================
   Affiche le resume de la reservation dans une carte divisee en sections
   avec des listes de definition (dl/dt/dd) pour chaque information.
   ========================================================================== */

/* Carte principale du recapitulatif */
.blatter-summary-card {
    background: var(--blatter-gray-50);
    border: 1px solid var(--blatter-gray-200);
    border-radius: var(--blatter-radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Section du recapitulatif (separee par des bordures) */
.blatter-summary-section {
    padding: 20px 25px;
}

.blatter-summary-section + .blatter-summary-section {
    border-top: 1px solid var(--blatter-gray-300);
}

/* Titre de section du recapitulatif */
.blatter-summary-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--blatter-primary);
    margin: 0 0 12px 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Icone du titre de section */
.blatter-summary-icon {
    font-size: 1.1em;
}

/* Liste de definitions (dl) */
.blatter-summary-list {
    margin: 0;
    padding: 0;
}

/* Ligne de la liste (dt + dd) */
.blatter-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    font-size: 0.9em;
}

.blatter-summary-row + .blatter-summary-row {
    border-top: 1px dashed var(--blatter-gray-300);
    padding-top: 8px;
    margin-top: 3px;
}

/* Cle (dt) : libelle de l'information */
.blatter-summary-row dt {
    font-weight: 500;
    color: var(--blatter-gray-700);
    flex-shrink: 0;
    margin-right: 15px;
}

/* Valeur (dd) : donnee du client */
.blatter-summary-row dd {
    font-weight: 600;
    color: var(--blatter-gray-900);
    text-align: right;
    margin: 0;
    word-break: break-word;
}


/* ==========================================================================
   11. MESSAGES D'INFORMATION, ERREUR, AVERTISSEMENT
   ==========================================================================
   Styles pour les conteneurs de messages d'erreur de validation et
   les notices informatives (ex : ajustement de l'heure).
   ========================================================================== */

/* Conteneur d'erreur global (en haut du formulaire) */
.blatter-error-container {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--blatter-error-light);
    border: 1px solid var(--blatter-error-border);
    border-left: 4px solid var(--blatter-error);
    border-radius: var(--blatter-radius-sm);
}

/* Contenu de l'erreur (icone + liste) */
.blatter-error-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Icone d'avertissement dans les erreurs */
.blatter-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 16px;
    color: var(--blatter-error);
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
}

/* Liste des messages d'erreur */
.blatter-error-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blatter-error-list li {
    color: var(--blatter-error-text);
    font-size: 0.9em;
    font-weight: 500;
    padding: 2px 0;
    line-height: 1.5;
}

.blatter-error-list li + li {
    margin-top: 4px;
}

/* Notice informative (ex : ajustement d'heure, etape 3) */
.blatter-info-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: var(--blatter-info-light);
    border: 1px solid var(--blatter-info-border);
    border-left: 4px solid var(--blatter-info);
    border-radius: var(--blatter-radius-sm);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Icone d'information */
.blatter-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--blatter-info);
    color: var(--blatter-white);
    border-radius: var(--blatter-radius-full);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.blatter-info-notice p {
    margin: 0;
    font-size: 0.9em;
    color: var(--blatter-info-text);
    line-height: 1.5;
}


/* ==========================================================================
   12. ECRAN DE CONFIRMATION (SUCCES)
   ==========================================================================
   Ecran affiche apres la soumission reussie de la reservation.
   Centre visuellement avec une icone, un titre et un message.
   ========================================================================== */

/* Conteneur de succes */
.blatter-success-container {
    text-align: center;
    padding: 40px 30px;
}

/* Contenu centre */
.blatter-success-content {
    max-width: 480px;
    margin: 0 auto;
}

/* Icone de succes (coche SVG en vert) */
.blatter-success-icon {
    color: var(--blatter-success);
    margin-bottom: 20px;
}

.blatter-success-icon svg {
    display: inline-block;
}

/* Titre de succes */
.blatter-success-title {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--blatter-success);
    margin: 0 0 12px 0;
}

/* Message principal de succes */
.blatter-success-message {
    font-size: 1em;
    color: #555555;
    margin-bottom: 12px;
    line-height: 1.7;
}

/* Details complementaires (ex : verifier les spam) */
.blatter-success-details {
    font-size: 0.85em;
    color: var(--blatter-gray-600);
    line-height: 1.5;
    font-style: italic;
}


/* ==========================================================================
   13. INDICATEURS DE CHARGEMENT (SPINNERS)
   ==========================================================================
   Animation de chargement affichee pendant les requetes AJAX
   (chargement des dates, creneaux, soumission).
   ========================================================================== */

/* Conteneur du loader (centre vertical et horizontal) */
.blatter-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 15px;
}

/* Spinner circulaire anime */
.blatter-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--blatter-gray-300);
    border-top-color: var(--blatter-accent);
    border-radius: var(--blatter-radius-full);
    animation: blatter-spin 0.8s linear infinite;
}

/* Texte sous le spinner */
.blatter-loader-text {
    font-size: 0.9em;
    color: var(--blatter-gray-600);
    font-weight: 500;
}


/* ==========================================================================
   14. ANIMATIONS ET TRANSITIONS
   ==========================================================================
   Keyframes pour les animations utilisees dans le formulaire :
   rotation du spinner, entree en fondu, apparition des creneaux.
   ========================================================================== */

/* Animation de rotation pour les spinners */
@keyframes blatter-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Animation d'entree en fondu avec leger deplacement vers le haut */
@keyframes blatter-fade-in {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation d'entree pour les creneaux horaires (effet de mise a l'echelle) */
@keyframes blatter-slot-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Appliquer l'animation de mise a l'echelle aux creneaux */
.blatter-time-slot {
    animation: blatter-slot-in 0.3s ease forwards;
}

/* Delai d'animation en cascade pour chaque creneau (effet vague) */
.blatter-time-slot:nth-child(1)  { animation-delay: 0.02s; }
.blatter-time-slot:nth-child(2)  { animation-delay: 0.04s; }
.blatter-time-slot:nth-child(3)  { animation-delay: 0.06s; }
.blatter-time-slot:nth-child(4)  { animation-delay: 0.08s; }
.blatter-time-slot:nth-child(5)  { animation-delay: 0.10s; }
.blatter-time-slot:nth-child(6)  { animation-delay: 0.12s; }
.blatter-time-slot:nth-child(7)  { animation-delay: 0.14s; }
.blatter-time-slot:nth-child(8)  { animation-delay: 0.16s; }
.blatter-time-slot:nth-child(9)  { animation-delay: 0.18s; }
.blatter-time-slot:nth-child(10) { animation-delay: 0.20s; }
.blatter-time-slot:nth-child(11) { animation-delay: 0.22s; }
.blatter-time-slot:nth-child(12) { animation-delay: 0.24s; }


/* ==========================================================================
   15. UTILITAIRES ET ACCESSIBILITE
   ==========================================================================
   Classes utilitaires et styles d'accessibilite (texte visible uniquement
   par les lecteurs d'ecran, reduction de mouvement).
   ========================================================================== */

/* Texte masque visuellement mais accessible aux lecteurs d'ecran */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Desactiver les animations si l'utilisateur le prefere (accessibilite) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   16. RESPONSIVE : TABLETTE ET MOBILE
   ==========================================================================
   Adaptations du formulaire pour les tablettes et telephones mobiles.
   Les points de rupture sont : 768px (tablette) et 480px (mobile).
   ========================================================================== */

/* --- Tablette : max-width 768px --- */
@media (max-width: 768px) {

    /* Conteneur principal : marges et padding reduits */
    #blatter-booking-wizard {
        margin: 15px;
        padding: 20px;
        border-radius: var(--blatter-radius-md);
    }

    /* Barre de progression : labels reduits */
    .blatter-progress-bar {
        margin-bottom: 25px;
        padding-bottom: 20px;
    }

    .blatter-steps-list {
        padding: 0 5px;
    }

    .blatter-steps-list::before {
        left: 30px;
        right: 30px;
    }

    .blatter-step-number {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .blatter-step-label {
        font-size: 10px;
    }

    /* Grille des champs : une seule colonne */
    .blatter-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Titre des etapes */
    .blatter-step-title {
        font-size: 1.1em;
    }

    /* Creneaux horaires : 2 colonnes */
    .blatter-time-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Boutons : pleine largeur empiles */
    .blatter-form-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .blatter-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .blatter-form-actions .blatter-btn--next:first-child,
    .blatter-form-actions .blatter-btn--primary:only-child {
        margin-left: 0;
    }

    /* Recapitulatif : layout empile */
    .blatter-summary-section {
        padding: 15px 18px;
    }

    .blatter-summary-row {
        flex-direction: column;
        gap: 2px;
    }

    .blatter-summary-row dd {
        text-align: left;
    }
}

/* --- Telephones mobiles : max-width 480px --- */
@media (max-width: 480px) {

    #blatter-booking-wizard {
        margin: 10px;
        padding: 15px;
    }

    /* Masquer les libelles de la barre de progression */
    .blatter-step-label {
        display: none;
    }

    .blatter-steps-list::before {
        left: 25px;
        right: 25px;
    }

    .blatter-step-number {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    /* Creneaux horaires : une seule colonne sur tres petit ecran */
    .blatter-time-grid {
        grid-template-columns: 1fr;
    }

    /* Calendrier Flatpickr pleine largeur */
    .blatter-calendar-container .flatpickr-calendar {
        max-width: 100%;
    }

    /* Message de succes */
    .blatter-success-container {
        padding: 30px 15px;
    }

    .blatter-success-title {
        font-size: 1.2em;
    }
}


/* ==========================================================================
   17. MODE IMPRESSION
   ==========================================================================
   Styles simplifies pour l'impression du formulaire. Supprime les
   ombres, boutons et barre de progression pour un rendu propre.
   ========================================================================== */

@media print {

    #blatter-booking-wizard {
        box-shadow: none;
        border: 1px solid var(--blatter-gray-400);
    }

    /* Masquer la navigation et les boutons */
    .blatter-form-actions,
    .blatter-progress-bar {
        display: none;
    }

    /* Afficher toutes les etapes pour l'impression */
    .blatter-step {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
}