/* =========================================
   1. GLOBAL & RESET
   ========================================= */
:root {
    --color-bg-main: #0a0a0a;      /* Noir fond */
    --color-bg-secondary: #111111; /* Noir cartes */
    --color-accent: #e60023;       /* Rouge marque */
    --color-text-primary: #ffffff; /* Blanc titres */
    --color-text-secondary: #cccccc; /* Gris textes */
    --font-family: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- MODIFICATION POUR RÉPARER LE SCROLL (STICKY) --- */

html {
    width: 100%;
    /* On enlève overflow-x ici pour que le sticky fonctionne */
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden; /* On le garde uniquement sur le body */
    margin: 0;
    padding: 0;
    /* Le reste du style body que tu avais déjà */
    background-color: var(--color-bg-main);
    color: var(--color-text-secondary);
    font-family: var(--font-family);
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--color-text-primary); text-transform: uppercase; font-weight: 700; }
a { text-decoration: none; color: var(--color-text-primary); transition: color 0.3s; }
ul { list-style: none; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* BOUTONS */
.btn { display: inline-block; padding: 12px 30px; border-radius: 30px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; border: 2px solid var(--color-accent); text-align: center; }
.btn-primary { background-color: var(--color-accent); color: white; }
.btn-primary:hover { background-color: transparent; }
.btn-outline { background-color: transparent; color: var(--color-accent); }
.btn-outline:hover { background-color: var(--color-accent); color: white; }

/* HEADER */
header { padding: 10px 0; border-bottom: 1px solid #222; background-color: var(--color-bg-main); }
.logo img { height: 80px; width: auto; }
nav ul { display: flex; gap: 30px; align-items: center; }

/* HERO SECTION */
.hero-section {
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('assets/images/chateau-rouge.jpg');
    background-size: cover; background-position: center; min-height: 100vh; width: 100%;
    display: flex; align-items: center; justify-content: center; padding: 0 20px; text-align: center;
}

/* COMPOSANTS GENERAUX */
.section-header { text-align: center; margin-bottom: 60px; max-width: 800px; margin: 0 auto; }
.section-subtitle { color: var(--color-accent); font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; display: block; margin-bottom: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; }

.service-card, .product-card { background-color: var(--color-bg-secondary); border-radius: 15px; border: 1px solid #222; transition: transform 0.3s, border-color 0.3s; overflow: hidden; padding: 40px; }
.service-card:hover, .product-card:hover { transform: translateY(-5px); border-color: var(--color-accent); }
.icon-box { width: 60px; height: 60px; border: 1px solid var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 1.5rem; margin-bottom: 20px; }

/* PAGE RÉSERVATION */

/* --- SÉLECTEUR TYPE (Modifié pour 3 options : Ext/Int/Projecteur) --- */
.type-selector {
    display: grid;
    /* C'EST ICI LE CHANGEMENT : repeat(3, 1fr) au lieu de 1fr 1fr */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    margin-bottom: 50px;
}

.type-card {
    position: relative;
    cursor: pointer;
}
.type-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Style Visuel des Gros Boutons */
.type-visual {
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s;
    opacity: 0.6; /* Un peu transparent quand pas sélectionné */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Image dans le bouton (Uniformisée) */
.type-visual img {
    width: 100%;
    height: 180px; /* Hauteur fixe pour que les 3 boutons aient la même taille */
    object-fit: cover; /* Recadre l'image proprement sans la déformer */
    border-radius: 10px;
    margin-bottom: 15px;
    filter: grayscale(100%);
    transition: all 0.3s;
}

.type-visual h3 {
    color: white;
    font-size: 1rem;
    margin: 0;
}

/* État Sélectionné (Rouge) */
.type-card input:checked + .type-visual {
    border-color: var(--color-accent);
    opacity: 1;
    background-color: #220909;
    transform: translateY(-3px);
}
.type-card input:checked + .type-visual img {
    filter: grayscale(0%);
}

/* Responsive Mobile (Passe en 1 colonne sur téléphone) */
@media (max-width: 900px) {
    .type-selector {
        grid-template-columns: 1fr;
    }
}
/* Layout Réservation */
/* --- PAGE RÉSERVATION (Mise à jour Sticky) --- */

.reservation-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    /* TRES IMPORTANT : align-items: flex-start empêche la sidebar de s'étirer */
    /* Sans ça, la sidebar fait toute la hauteur et ne peut pas "glisser" */
    align-items: flex-start; 
}

.reservation-sidebar {
    flex: 1;
    min-width: 300px;
    background-color: #111;
    border: 1px solid #333;
    padding: 30px;
    border-radius: 15px;
    
    /* LE CODE MAGIQUE POUR LE SCROLL */
    position: -webkit-sticky; /* Pour Safari */
    position: sticky;
    top: 20px; /* La distance par rapport au haut de l'écran quand on scrolle */
    
    /* Sécurité : on s'assure qu'elle ne prend pas toute la hauteur */
    height: fit-content; 
    z-index: 100;
}
.reservation-content { flex: 2; min-width: 300px; }
.reservation-step { margin-bottom: 60px; }
.reservation-step h2 { border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 25px; }

.summary-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 0.95rem; color: #ccc; }
.summary-total { border-top: 1px solid #333; padding-top: 20px; margin-top: 20px; font-size: 1.5rem; font-weight: bold; color: white; display: flex; justify-content: space-between; align-items: center; }

/* =========================================
   CARTES OPTIONS (DESIGN DISTINCT)
   ========================================= */

.option-card {
    position: relative;
    cursor: pointer;
}
.option-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* --- 1. DESIGN COMPACT (Dimensions, Projecteur & Mapping) --- */
/* On applique ce style aux Dimensions ET aux options Projecteur ET Mapping */
#step-screen .selection-grid,
#step-proj-type .selection-grid,
#step-proj-surface .selection-grid,
#step-mapping-size .selection-grid { /* <--- AJOUT ICI */
    display: grid;
    /* Colonnes compactes */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
}

#step-screen .card-visual,
#step-proj-type .card-visual,
#step-proj-surface .card-visual,
#step-mapping-size .card-visual { /* <--- AJOUT ICI */
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* Hauteur harmonisée */
}

/* Titre */
#step-screen .card-visual h4,
#step-proj-type .card-visual h4,
#step-proj-surface .card-visual h4,
#step-mapping-size .card-visual h4 { /* <--- AJOUT ICI */
    font-size: 1rem;
    margin: 0 0 5px 0;
    color: white;
}

/* Description (Spécifique Projecteur & Mapping) */
#step-proj-type .card-visual p,
#step-proj-surface .card-visual p,
#step-mapping-size .card-visual p { /* <--- AJOUT ICI */
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 8px;
    line-height: 1.2;
}

/* PRIX EN ROUGE ET GRAS */
#step-screen .card-visual .price,
#step-proj-type .card-visual .price,
#step-proj-surface .card-visual .price,
#step-mapping-size .card-visual .price { /* <--- AJOUT ICI */
    font-size: 0.9rem; 
    color: var(--color-accent); 
    font-weight: bold;
    background-color: rgba(230, 0, 35, 0.1);
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: auto; 
}


/* --- 2. DESIGN STRUCTURES (GRANDE IMAGE) --- */
#step-structure .selection-grid {
    display: grid;
    /* Colonnes larges pour les photos */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

#step-structure .card-visual {
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 0; /* L'image touche les bords */
    text-align: center;
    transition: all 0.3s;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* L'IMAGE (Prend toute la largeur) */
#step-structure .option-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border: none;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #333;
}

/* Cas particulier pour l'icône "Aucune" */
#step-structure .card-visual > div:first-child {
    width: 100% !important;
    height: 200px !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background-color: #111 !important;
    border-bottom: 1px solid #333 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#step-structure h4 { margin-top: 15px; font-size: 1.1rem; color: white; }
#step-structure .price { margin-bottom: 20px; font-size: 1rem; color: var(--color-accent); font-weight: bold; }

/* --- ÉTAT SÉLECTIONNÉ (COMMUN À TOUTES LES CARTES) --- */

/* 1. Le Conteneur (Bordure + Fond rouge + Ombre) */
.option-card input:checked + .card-visual {
    border-color: var(--color-accent) !important;
    background-color: #220909; /* Fond rouge très sombre */
    box-shadow: 0 0 15px rgba(230, 0, 35, 0.4); /* Lueur rouge */
}

/* 2. La ligne de séparation rouge (Pour les structures avec images) */
#step-structure .option-card input:checked + .card-visual .option-img,
#step-structure .option-card input:checked + .card-visual > div:first-child {
    border-bottom-color: var(--color-accent) !important;
}

/* 3. Texte et Icônes deviennent Blancs */
.option-card input:checked + .card-visual h4,
.option-card input:checked + .card-visual i {
    color: white !important;
}

/* 4. Le Prix passe en fond rouge (CORRIGÉ : CENTRÉ ET AJUSTÉ AU TEXTE) */
.option-card input:checked + .card-visual .price {
    color: white !important;
    background-color: var(--color-accent);
    border-radius: 20px;
    padding: 2px 15px;
    
    /* C'est ici la correction pour ne pas prendre toute la largeur : */
    width: fit-content; 
    margin-left: auto;
    margin-right: auto;
}


/* --- 3. DESIGN SERVICES / TECHNIQUE (AJOUT MANQUANT) --- */
/* On s'assure que les cartes techniciens sont bien centrées */
#step-tech .selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

#step-tech .card-visual {
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 30px; /* Bon espacement interne */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    height: 100%;
    
    /* Centrage parfait */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#step-tech .card-visual h4 {
    font-size: 1.1rem;
    margin: 15px 0 5px 0;
    color: #eee;
}

#step-tech .card-visual .price {
    font-size: 0.9rem;
    color: #aaa; /* Couleur par défaut (avant sélection) */
    font-weight: normal;
}

/* --- STYLE SPÉCIAL : CARTE HORIZONTALE (Pour "Aucune Structure") --- */

/* On cible la carte qui a la classe .card-horizontal */
#step-structure .option-card.card-horizontal {
    grid-column: 1 / -1; /* Prend toute la largeur de la grille */
}

#step-structure .option-card.card-horizontal .card-visual {
    flex-direction: row; /* Alignement horizontal (Gauche à Droite) */
    justify-content: center; /* Centré au milieu */
    align-items: center;
    gap: 20px; /* Espace entre Icône, Titre et Prix */
    padding: 15px 20px; /* Hauteur fine */
    min-height: auto !important; /* On annule la hauteur forcée des autres cartes */
    height: auto !important;
}

/* Ajustement des éléments à l'intérieur */
#step-structure .option-card.card-horizontal i {
    font-size: 1.5rem !important; /* Icône plus petite */
    margin: 0 !important;
    color: #666;
}

#step-structure .option-card.card-horizontal h4 {
    margin: 0 !important;
    font-size: 1rem;
}

#step-structure .option-card.card-horizontal .price {
    margin: 0 !important;
    font-size: 0.9rem;
    padding: 5px 15px;
    background: rgba(255, 255, 255, 0.05); /* Fond très léger */
    border-radius: 20px;
}

/* État sélectionné spécifique pour la barre horizontale */
#step-structure .option-card.card-horizontal input:checked + .card-visual {
    background-color: #220005;
    border-color: var(--color-accent);
}
#step-structure .option-card.card-horizontal input:checked + .card-visual i {
    color: var(--color-accent);
}


/* --- TECHNICIENS --- */
.tech-row { background: #1a1a1a; padding: 20px; border-radius: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #333; }
.tech-inputs { display: flex; gap: 15px; }
.tech-inputs select { padding: 10px; background: #000; border: 1px solid #333; color: white; border-radius: 5px; }

/* --- CALENDRIER (ANCIEN STYLE RESTAURÉ) --- */
.flatpickr-calendar {
    background: transparent !important; /* Fond transparent pour se fondre */
    border: none !important;
    box-shadow: none !important;
    margin: 20px auto !important;
    width: 100% !important;
    max-width: 800px !important; /* Large pour 2 mois */
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: white !important;
    fill: white !important;
}

.flatpickr-day {
    color: #ccc !important;
    border-radius: 50% !important; /* Rond */
}

.flatpickr-day:hover {
    background: #333 !important;
}

/* --- AJOUT CRUCIAL : STYLE DES JOURS INTERDITS (> 30 jours) --- */
.flatpickr-day.flatpickr-disabled, 
.flatpickr-day.flatpickr-disabled:hover {
    color: #444 !important;       /* Texte très sombre */
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed;          /* Curseur "Interdit" */
    text-decoration: line-through; /* Texte barré */
    opacity: 0.3;                 /* Presque invisible */
}

.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    font-weight: bold;
}

.flatpickr-day.inRange {
    background: rgba(230, 0, 35, 0.3) !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 #3a0009, 5px 0 0 #3a0009 !important;
}


/* --- SECTION TECHNICIENS (NOUVEAU STYLE CARD) --- */

/* On utilise la même grille que les autres */
#step-tech .selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

/* Style spécifique pour la carte technicien (pas de clic global, c'est un conteneur) */
.tech-card-visual {
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.3s;
}

/* Effet au survol */
.tech-card-visual:hover {
    border-color: #555;
}

/* L'icône en haut */
.tech-icon {
    font-size: 2.5rem;
    color: #666;
    margin-bottom: 15px;
}

/* Les Inputs (Selects) à l'intérieur */
.tech-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.tech-controls select {
    width: 100%;
    padding: 12px;
    background-color: #000;
    border: 1px solid #444;
    color: white;
    border-radius: 5px;
    text-align: center;
    font-family: var(--font-family);
    cursor: pointer;
}

.tech-controls select:focus {
    border-color: var(--color-accent);
    outline: none;
}

/* Quand une valeur est sélectionnée (visuel actif) */
.tech-card-visual.active {
    border-color: var(--color-accent);
    background-color: #220909;
}
.tech-card-visual.active .tech-icon {
    color: var(--color-accent);
}

/* --- CHECKBOX RGPD PERSONNALISÉE --- */
.gdpr-checkbox {
    display: flex;
    align-items: center; /* Aligne la case et le texte */
    gap: 15px;
    margin: 20px 0;
    font-size: 0.85rem;
    color: #ccc;
    text-align: left;
}

.gdpr-checkbox a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* On personnalise l'input checkbox */
.gdpr-checkbox input[type="checkbox"] {
    /* On enlève le style par défaut du navigateur */
    -webkit-appearance: none;
    appearance: none;
    
    /* On définit la taille et le style "Dark" */
    min-width: 24px;
    width: 24px;
    height: 24px;
    background-color: #111;
    border: 2px solid #444;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all 0.3s ease;
    margin: 0; /* Important pour l'alignement */
}

/* Effet au survol */
.gdpr-checkbox input[type="checkbox"]:hover {
    border-color: var(--color-accent);
}

/* QUAND C'EST COCHÉ */
.gdpr-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-accent); /* Fond Rouge */
    border-color: var(--color-accent);
}

/* Le petit "V" (Checkmark) */
.gdpr-checkbox input[type="checkbox"]:checked::after {
    content: '✔';
    font-size: 16px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage parfait */
    font-weight: bold;
}


/* CONTACT & MODAL */
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 15px; background: #1a1a1a; border: 1px solid #333; color: white; margin-bottom: 20px; border-radius: 5px; }
.success-banner { display: none; background-color: #28a745; color: white; padding: 20px; border-radius: 10px; margin-bottom: 30px; text-align: center; border: 1px solid #1e7e34; }

.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }
.modal-content { background-color: #111; margin: 10% auto; padding: 40px; border: 1px solid #333; width: 90%; max-width: 500px; border-radius: 15px; position: relative; text-align: center; }
.close-modal { position: absolute; top: 15px; right: 25px; font-size: 28px; cursor: pointer; color: #aaa; }
.gdpr-checkbox { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin: 20px 0; font-size: 0.85rem; color: #ccc; }

/* --- PAGE CONTACT --- */
.contact-info-item {
    margin-bottom: 30px;
}

/* C'est ici qu'on met les titres en ROUGE */
.contact-info-item h4 {
    color: var(--color-accent) !important; /* ROUGE */
    margin-bottom: 10px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

/* Les icônes restent rouges aussi */
.contact-info-item h4 i {
    color: var(--color-accent);
    font-size: 1.2rem;
}

.contact-info-item p {
    color: #ccc; /* Texte reste gris clair */
    line-height: 1.6;
}

.contact-info-item a {
    color: white; /* Les liens (email) restent blancs pour la lisibilité */
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info-item a:hover {
    color: var(--color-accent);
}

/* --- PAGE CHOIX (FUNNEL) --- */
.choice-card {
    display: block; /* Rend tout le lien cliquable */
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none; /* Enlève le soulignement du lien */
}

.choice-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    background-color: #220909;
}

.choice-icon {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 20px;
}

.choice-card h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.choice-card p {
    color: #aaa;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Le bouton texte en bas */
.choice-card .btn-text {
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.choice-card:hover .btn-text {
    color: white;
}


/* =========================================
   PAGE CHOIX (CATÉGORIES AVEC IMAGES)
   ========================================= */

.category-card {
    display: flex;
    flex-direction: column;
    /* MÊME STYLE QUE INDEX.PHP */
    background-color: var(--color-bg-secondary); /* Fond #111111 */
    border: 1px solid #222; /* Bordure grise subtile */
    border-radius: 15px;    /* Coins arrondis */
    overflow: hidden;       /* Pour que l'image respecte les coins */
    text-decoration: none;
    transition: transform 0.3s, border-color 0.3s;
    height: 100%;
    position: relative;
}

/* Partie Image (Haut de la boite) */
.category-image {
    width: 100%;
    height: 250px;
    background-color: #000;
    border-bottom: 1px solid #222; /* Séparation discrète avec le texte */
    overflow: hidden;
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Partie Contenu (Bas de la boite) */
.category-content {
    padding: 30px; /* Espace intérieur confortable */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    justify-content: space-between; /* Pousse le bouton vers le bas */
}

.category-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: white;
    text-transform: uppercase;
}

.category-content p {
    font-size: 0.95rem;
    color: #ccc; /* Gris clair comme l'accueil */
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Le Bouton dans la boite */
.category-content .btn-outline {
    width: 100%; /* Bouton prend toute la largeur */
    text-align: center;
    margin-top: auto; /* Force le bouton en bas */
}

/* --- EFFETS AU SURVOL (IDENTIQUE À L'ACCUEIL) --- */
.category-card:hover {
    transform: translateY(-5px); /* Monte légèrement */
    border-color: var(--color-accent); /* Devient rouge */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Ombre portée */
}

.category-card:hover .category-image img {
    transform: scale(1.05); /* Zoom léger image */
}

.category-card:hover .btn-outline {
    background-color: var(--color-accent); /* Bouton devient rouge */
    color: white;
    border-color: var(--color-accent);
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .category-image {
        height: 200px;
    }
    .category-content {
        padding: 20px;
    }
}
/* FOOTER */
footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; }

/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
    .container { width: 95%; padding: 0 15px; }
    h1 { font-size: 2rem !important; }
    header .container { flex-direction: column; gap: 15px; text-align: center; }
    .logo img { height: 60px; }
    nav ul { flex-direction: column; width: 100%; gap: 0; border-top: 1px solid #222; }
    nav ul li { width: 100%; border-bottom: 1px solid #222; }
    nav ul li a { display: block; padding: 15px 0; }
    .grid-3, .grid-2, .type-selector {
        grid-template-columns: 1fr; 
    }
    .reservation-container { flex-direction: column; }
    .reservation-sidebar { width: 100%; position: static; order: 2; margin-top: 20px; }
    .reservation-content { width: 100%; order: 1; }
    .selection-grid { grid-template-columns: 1fr 1fr; }
    .tech-row { flex-direction: column; align-items: flex-start; gap: 15px; }
    .tech-inputs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .tech-inputs select { width: 100%; }
    .contact-form div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    footer .container { text-align: center; }
}