/* ============================================================
   CERFACIL — Composants partagés (modals, formulaires, alerts)
   Extrait depuis l'ancien footer.php inline — réorganisation Phase 1
   ============================================================ */

/* Classes utilitaires */
.hidden { display: none; }

/* Formulaire de réservation */
.booking-form { margin-top: 30px; }
.booking-form h3 { margin-bottom: 15px; font-size: 16px; color: #333; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 14px; color: #555; }
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.submit-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    margin-top: 10px;
}
.submit-button:hover { background-color: #0069d9; }

/* Modals */
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.modal-content p { text-align: left; }
.modal-content.valid { border-top: 4px solid #33ff66; }
.modal-content.error { border-top: 4px solid #ff3333; }
.modal-content.error h2 { color: #ff3333; }
#error-message,
#error-messages { color: #333; margin: 20px 0; }

.close-modal {
    position: absolute;
    top: 15px; right: 15px;
    font-size: 24px;
    cursor: pointer;
}
.confirmation-details { margin: 20px 0; line-height: 1.6; }

.modal.hidden { display: none; }
.modal.visible,
.modal:not(.hidden) {
    display: block;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal:not(.hidden) .modal-content {
    margin: 15% auto;
}

/* Responsive */
@media (max-width: 768px) {
    .booking-container { flex-direction: column; }
    .booking-left, .booking-right { width: 100%; }
    .booking-left {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }
    .time-slots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .time-slots { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   FIABILITÉ TACTILE MOBILE (global)
   Supprime le délai 300ms / double-tap-zoom et empêche les icônes
   internes d'intercepter le tap à la place du lien/bouton parent.
   ═══════════════════════════════════════════════════════════════ */
a, button, [onclick], input[type="submit"], input[type="button"],
.btn, .footer-column ul li a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
a > i, a > svg, button > i, button > svg, .btn > i, .footer-column ul li a > i {
    pointer-events: none;
}