/* --- Variables et Reset basique --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* -------------------------------------- */
/* ---       styles globaux           --- */
/* -------------------------------------- */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
}

main {
  background-color: #e9e6df;
  padding-bottom: 1rem;
  min-height: 80vh;
}

section {
  margin-bottom: 1rem;
}

/* Nettoie le formulaire */
.inline-action-form {
  display: inline-block; /* S'aligne sur la même ligne que les autres éléments */
  margin: 0 !important; /* Le !important écrase la règle globale "margin: 0 auto" */
  padding: 0 !important; /* Écrase le padding de 20px global */
  background: transparent !important; /* Enlève le fond gris global */
  max-width: none !important; /* Enlève la contrainte de largeur */
  width: auto;
}

h1 {
  margin: 1rem 0rem;
  color: #334155;
  text-align: center;
  font-size: 3rem;
}

h2 {
  margin: 1rem 0rem;
  color: #334155;
  font-size: 2rem;
}

/* h3 {
  margin: 1rem 0rem;
  color: #334155;
  font-size: 2rem;
} */

/* Déclaration de la police */
@font-face {
  font-family: "OpenDyslexic";
  src: url("../assets/fonts/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* classe utilitaire d'écrasement de la font */
.dyslexic-mode,
.dyslexic-mode * {
  font-family: "OpenDyslexic", sans-serif !important;
}

/* -------------------------------------- */
/* --- Conteneur Global (Largeur Max) --- */
/* -------------------------------------- */
.container {
  max-width: 1280px;
  margin: 0 auto; /* Centre le conteneur */
  padding: 0 2rem;
  width: 100%;
}

.container-sm {
  max-width: 900px;
  margin: 0 auto; /* Centre le conteneur */
  padding: 0 2rem;
  width: 100%;
}

/* ------------------------ */
/* --- Carrousel        --- */
/* ------------------------ */
.hero-carousel {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 60vh; /* Prend 60% de la hauteur de l'écran */
  min-height: 400px;
  overflow: hidden;
}

/* Le conteneur prend toute la place */
.carousel-track {
  width: 100%;
  height: 100%;
  position: relative;
}

/* empile toutes les slides au même endroit */
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Invisibles par défaut */
  transition: opacity 1s ease-in-out; /* Effet de fondu d'une seconde */
  z-index: 1;
}

/* La slide active devient visible */
.carousel-slide.active {
  opacity: 1;
  z-index: 2; /* Passe au-dessus des autres */
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit sans déformer */
  object-position: center; /* Centre l'image */
  display: block;
}

/* --- Boutons du Carrousel --- */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  color: #334155;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s,
    color 0.2s;
  z-index: 10; /* Important: Doit être au-dessus des images (z-index: 2) */
}

.carousel-btn:hover {
  background-color: #357e7a;
  color: white;
}

.carousel-btn.prev {
  left: 1.5rem;
}

.carousel-btn.next {
  right: 1.5rem;
}

/* ---------------------------------------- */
/* ---     Style des formulaire         --- */
/* ---------------------------------------- */

/* Conteneur du formulaire par-dessus les images */
.hero-form-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 20; /* Doit être supérieur au z-index des slides et des boutons du carrousel */
  padding: 0 1rem;
  box-sizing: border-box;
}

/* formulaire de recherche */
.hero-search-form {
  background-color: rgba(244, 244, 244, 0.9); /* légèrement translucide */
  backdrop-filter: blur(8px); /* Effet verre dépoli moderne */
  width: 100%;
  max-width: 1200px;
  border-radius: 1.2rem;
  padding: 0.6rem 0.3rem 0 1rem; /* Pas de padding en bas pour coller le bouton */
  margin-bottom: 2rem;
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15); /* Ombre vers le haut */
}

/* La Grille principale (Ligne 1) */
.hero-search-grid {
  display: grid;
  /* Proportions de la grid */
  grid-template-columns: 1.5fr 1fr 1fr 0.8fr 0.8fr 1.5fr;
  gap: 1rem;
  align-items: start;
}

/* Fieldset pour les options (Enlève la bordure native) */
.options-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* legend sert de label pour l'accessibilité */
.options-fieldset legend {
  font-size: 1rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.4rem;
  margin-left: 0.5rem;
  padding: 0;
}

/* Grille 2 colonnes pour les checkboxes */
.options-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem;
  /* background-color: white; */
  /* border: 1px solid #afbecf; */
  border-radius: 1rem; /* Moins rond que les inputs pour l'esthétique */
  padding: 0rem 0.5rem;
}

.options-col {
  display: flex;
  flex-direction: column;
  /* gap: 0.02rem; */
}

/* Ligne 2 : Bouton centré et collé en bas */
.hero-form-bottom {
  display: flex;
  justify-content: center;
  /* margin-top: 0.5rem; */
}

/* Bouton spécifique : arrondis uniquement en haut */
.search-btn {
  padding: 0.8rem 4rem;
  font-size: 1.1rem;
  background-color: #357e7a;
  color: white;
  border: none; 
  border-radius: 1.5rem 1.5rem 0 0;  /* Arrondis haut-gauche et haut-droit uniquement */
  cursor: pointer;
  font-weight: bold;
  transition:
    background-color 0.2s,
    transform 0.2s;
  /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); */
}

.search-btn:hover {
  background-color: #5fc8c3;
  /* transform: translateY(-2px); */
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   Formulaire Responsive
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media (max-width: 1090px) {
  .hero-search-grid {
    /* Sur tablette -> 3 colonnes */
    grid-template-columns: 1fr 1fr 1fr;
  }

  .hero-search-form {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 0.6rem 1rem 0 1rem;
  }

  /* Donne une hauteur fixe uniquement aux images pour mobile */
  .carousel-track {
    height: 350px; 
    flex-shrink: 0;
  }

  /* Repositionne les flèches du carrousel au centre de l'image (350 / 2 = 175px) */
  .carousel-btn {
    top: 175px; 
  }
  /* Transforme le conteneur principal en colonne */
  .hero-carousel {
    height: auto; /* Supprime la hauteur fixe de 60vh */
    min-height: auto; /* Supprime la hauteur minimale */
    display: flex;
    flex-direction: column;
  }

  .hero-form-overlay {
    position: relative; /* Annule le position: absolute */
    bottom: auto;    
    margin-top: -20px; /* Marge négative pour "morde" légèrement sur l'image */
    padding: 0 1rem;
    margin-bottom: 2rem; /* Ajoute de l'espace en bas de la page */
  }

  .options-fieldset {
    grid-column: span 3; /* Les options prennent toute la largeur en bas */
  }
}

@media (max-width: 768px) {
  
  /* Transforme le conteneur principal en colonne */
  .hero-carousel {
    height: auto; /* Supprime la hauteur fixe de 60vh */
    min-height: auto; /* Supprime la hauteur minimale */
    display: flex;
    flex-direction: column;
  }

  /* Donne une hauteur fixe uniquement aux images pour mobile */
  .carousel-track {
    height: 350px; 
    flex-shrink: 0;
  }

  /* Repositionne les flèches du carrousel au centre de l'image (350 / 2 = 175px) */
  .carousel-btn {
    top: 175px; 
  }

  /* Remet le conteneur du formulaire dans le flux normal (sous l'image) */
  .hero-form-overlay {
    position: relative; /* Annule le position: absolute */
    bottom: auto;    
    margin-top: -20px; /* Marge négative pour "morde" légèrement sur l'image */
    padding: 0 1rem;
    margin-bottom: 2rem; /* Ajoute de l'espace en bas de la page */
  }

  /* Ajustements visuels du formulaire mobile */
  .hero-search-form {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 0.6rem 1rem 0 1rem;
  }

  /* Repasse la grille du formulaire sur 1 colonne */
  .hero-search-grid {
    grid-template-columns: 1fr;
  }

  /* les options prennent toute la largeur */
  .options-fieldset {
    grid-column: span 1;
  }
}

.compact-form {
  background-color: #f4f4f4;
  padding: 0.5rem 1rem 1rem 1rem;
  max-width: 900px;
  margin: 2rem auto;
  border-radius: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* --- Grille CSS pour les champs --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.full-width {
  grid-column: span 4;
}

/* --- Labels --- */
.form-group label {
  display: block;
  font-size: 1rem;
  /* margin-top: 10px; */
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.2rem;
  margin-left: 0.5rem; /* Aligne le label avec le bord arrondi de l'input */
}

/* --- Inputs ultra ronds --- */
.rounded-input {
  width: 100%;
  padding: 0.6rem 1rem;
  margin-bottom: 0.2rem;
  border: 1px solid #afbecf;
  border-radius: 1.5rem;
  background-color: white;
  color: #334155;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  /* transition: border-color 0.2s, box-shadow 0.2s; */
}

.rounded-input:focus {
  border-color: #5fc8c3;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* --- Zone basse (Filtres et Bouton) --- */
.form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.2rem;
  margin-top: 0.8rem;
  flex-wrap: wrap; /* Sécurité si l'écran est petit */
  gap: 0.5rem;
}

/* --- Checkboxes --- */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  color: #475569;
  font-weight: 500;
  font-size: 0.9rem;
}

.custom-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #357e7a; /* Colore la case à cocher */
}

/* --- Map + Contact --- */
/* Conteneur principal (Mobile-first : 1 colonne par défaut) */
.contact-grid-container {
  display: grid;
  grid-template-columns: 1fr; /* 1 colonne sur mobile */
  gap: 2rem;
  max-width: 1200px; /* Aligné avec la largeur maximale */
  margin: 2rem auto;
  padding: 0 1rem;
  align-items: stretch; /* Les deux colonnes auront la même hauteur */
}

/* Passage sur 2 colonnes pour les tablettes et écrans d'ordinateur */
@media (min-width: 768px) {
  .contact-grid-container {
    grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
  }
}

/* Ajustement de la grille */
.compact-contact-form {
  background-color: #f4f4f4;
  padding: 1.5rem;
  width: 100%; /* Prend toute la largeur de sa colonne dans la grille */
  margin: 0; /* Enlève le margin auto pour s'aligner dans la grille */
  border-radius: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* --- styles carte google map  --- */
.map-container {
  width: 100%;
  height: 100%;
  min-height: 400px; /* Hauteur minimale sur mobile */
  border-radius: 1.2rem;
  overflow: hidden; /* Force l'iframe rectangulaire à respecter les bords arrondis */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block; /* Évite l'espace fantôme sous l'iframe */
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* --- Form Responsive Mobile   --- */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
@media (max-width: 768px) {
  .compact-form {
    padding: 1.5rem;
  }

  /* 1 colonne pour mobile */
  .form-grid {
    grid-template-columns: 1fr; 
    gap: 1rem;
  }

  .full-width {
    grid-column: span 1;
  }

  /* --- Grille CSS pour formulaire de recherche --- */
  .search-form-grid {
    grid-template-columns: 1fr; /* 1 colonne pour mobile */
    gap: 1rem;
  }

  .search-width {
    grid-column: span 1;
  }

  .form-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .checkbox-group {
    justify-content: center;
  }
}

/* ----------------------------------------- */
/* --- Grid pour les cartes Promotion    --- */
/* ----------------------------------------- */
.promo-grid {
  display: grid;
  /* - auto-fit : le nombre de colonnes s'adapte à la largeur disponible.
       - minmax(300px, 1fr) : la carte fait minimum 300px. S'il y a de la place, elle s'étire (1fr).
       S'il n'y a pas 300px elle passe à la ligne ! */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem; /* Gère l'espace entre les cartes */
  max-width: 1200px;
  margin: 2rem auto; /* Centre la grille sur la page */
  padding: 0 1rem;
}

/* --- Carte de Promotion pour la homepage --- */
.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* les cartes d'une même ligne ont la même hauteur */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: #f4f4f4;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease; /* Animation fluide */
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-image img {
  width: 100%; /* Oblige l'image à remplir toute la largeur de la carte */
  height: 250px;
  object-position: bottom center;
  object-fit: cover;
  display: block; /* Enlève le petit espace vide sous l'image */
}

.card-content {
  padding: 20px;
  flex: 1; /* Pousse le footer tout en bas si la carte est plus grande */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.card-subtitle {
  margin: 0 0 10px 0;
  color: #666;
}

.card-text {
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.card-price {
  font-weight: bold;
  font-size: 1.2rem;
}

.card-button {
  padding: 8px 16px;
  background-color: #357e7a;
  color: white;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
  text-decoration: none;
}

.card-button:hover {
  background-color: #5fc8c3;
}
/* --- FIN Carte de Promotion pour la homepage --- */

/* -------------------------------------------------- */
/* --- Conteneur global des résultats (recherche) --- */
/* -------------------------------------------------- */
.results-header {
  margin: 2rem 0;
}

/* --- LE CONTENEUR GRID (Max 2 par ligne) --- */
.search-results-grid {
  display: grid;
  gap: 2rem; /* Espace entre les cartes */
  padding: 1rem 0;
  max-width: 1200px;
  margin: 0 auto; /* Centre la grille */
}

/* --- LA CARTE HORIZONTALE --- */
.horizontal-hotel-card {
  display: flex; /* Flexbox pour l'alignement horizontal image/texte */
  background: #f4f4f4;
  border-radius: 8px;
  overflow: hidden; /* Pour que les bords arrondis s'appliquent aussi à l'image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Idem ombre promo */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.horizontal-hotel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* --- Côté Gauche : Image --- */
.card-image-side {
  flex: 0 0 55%; /* L'image prend 55% */
  min-height: 250px;
}

.card-image-side img {
  width: 100%;
  height: 100%;
  object-position: bottom center;
  object-fit: cover; /* L'image remplit l'espace sans déformer */
  display: block; /* Enlève le petit espace sous l'image */
}

/* --- Côté Droit : Contenu --- */
.card-content-side {
  flex: 1; /* Contenu prend les 45% restants */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pousse le footer vers le bas */
}

.hotel-name {
  margin: 0 0 5px 0;
  font-size: 1.3rem;
  color: #333;
}

.hotel-location {
  margin: 5px 0 5px 0;
  color: #666;
  font-size: 1rem;
}

.hotel-details-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #444;
}

.hotel-details-list li {
  margin-bottom: 5px;
}

/* --- Footer de la carte --- */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* Aligne le bouton avec le bas du prix */
  margin-top: auto;
  border-top: 1px solid #e2e8f0; /* Petite ligne séparatrice douce */
  padding-top: 15px;
}

.price-group {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 0.8rem;
  color: #666;
}

.card-price {
  font-weight: bold;
  font-size: 1.4rem; /* Un peu plus grand pour le prix */
  color: #333;
}

/* --- Bouton (Reprise exacte du bouton promo) --- */
.card-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #357e7a;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 1.5rem; /* Idem arrondi bouton */
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.card-button:hover {
  background-color: #5fc8c3; 
}

/* --- les étoiles --- */
.header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.stars-container {
  /* pourcentage de remplissage (ex: 3.5 / 5 = 70%) */
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* génère les 5 étoiles en texte brut via le CSS */
.stars-container::before {
  content: "★★★★★";
  font-size: 1.3rem;
  letter-spacing: 2px;
  /* Le dégradé remplit en or de 0% jusqu'au x% de la note, puis reste gris clair ensuite */
  background: linear-gradient(
    90deg,
    #f59e0b var(--percent),
    #cbd5e1 var(--percent)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Permet au dégradé d'apparaître À L'INTÉRIEUR du texte */
}

.review-count {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* --- Typographie et Icônes de base --- */
.inline-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-top: -2px;
}

/* --- La ligne des équipements (Amenities) --- */
.amenities-row {
  display: flex;
  gap: 12px; /* Espace entre chaque icône */
  margin-top: auto; /* Pousse les icônes vers le bas si la description est courte */
  margin-bottom: 20px; /* Espace avant la ligne du prix */
}

.amenity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #e2e8f0; /* Fond gris très clair */
  color: #475569; /* Gris foncé pour l'icône */
  border-radius: 8px; /* Petit carré arrondi */
  transition:
    background-color 0.2s,
    color 0.2s;
  cursor: help; /* Affiche un point d'interrogation au survol (utile pour le "title") */
}

.amenity-badge svg {
  width: 18px;
  height: 18px;
}

/* Petit effet au survol */
.amenity-badge:hover {
  background-color: #357e7a;
  color: white;
}

/* --- RESPONSIVE MOBILE (< 1024px) --- */
@media (max-width: 1024px) {
  .horizontal-hotel-card {
    flex-direction: column; /* La carte passe en vertical */
  }

  .card-image-side {
    flex: 0 0 250px; /* Hauteur fixe pour l'image sur mobile */
    width: 100%;
  }
}
/* -------------------------------------- */

/* -------------------------------------- */
/* --- EN-TÊTE DE L'HÔTEL (HERO)      --- */
/* -------------------------------------- */

.hotel-hero {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin: 2rem 0 3rem 0; /* Espace en haut et en bas */
}

.hero-image-wrapper img {
  width: 100%;
  height: 350px;
  object-position: bottom center;
  object-fit: cover;
  display: block;
}

.hero-content {
  padding: 2rem;
}

.hotel-title {
  margin: 0 0 10px 0;
  font-size: 2rem;
  color: #333;
}

.hotel-description {
  margin-top: 1.5rem;
  line-height: 1.6;
  color: #555;
  border-top: 1px solid #e2e8f0;
  padding-top: 1.5rem;
}

/* -------------------------------------- */
/* ---    LISTE DES CHAMBRES          --- */
/* -------------------------------------- */

.section-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1.5rem;
  border-left: 4px solid #357e7a; /* Petit accent visuel sympa */
  padding-left: 10px;
}

.room-list-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Espace vertical entre chaque carte chambre */
  margin-bottom: 4rem;
}

/* --- LA CARTE CHAMBRE (3 Zones) --- */
.horizontal-room-card {
  display: flex;
  background: #f4f4f4;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.horizontal-room-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* ZONE 1 : Image (Gauche) */
.room-col-image {
  flex: 0 0 30%; /* Prend exactement 30% de l'espace */
  min-width: 250px;
}

.room-col-image img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-position: bottom center;
  object-fit: cover;
  display: block;
}

/* ZONE 2 : Informations (Centre) */
.room-col-info {
  flex: 1; /* Prend tout l'espace disponible au centre */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room-type {
  font-size: 1.3rem;
  color: #333;
  margin: 0 0 10px 0;
}

.room-desc {
  color: #555;
  line-height: 1.5;
  margin: 0;
  font-size: 0.95rem;
}

/* ZONE 3 : Action et Prix (Droite) */
.room-col-action {
  flex: 0 0 250px; /* Largeur fixe de 250px pour la colonne de droite */
  background: #ffffff; /* Fond blanc pour contraster avec le gris de la carte */
  border-left: 1px dashed #cbd5e1; /* Séparateur visuel */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Centre les éléments horizontalement */
  text-align: center;
}

.room-capacity {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.room-price-block {
  margin-bottom: 1.5rem;
}

.price-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.room-price {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  margin-top: 4px;
}

.btn-reserver {
  width: 100%; /* Le bouton prend toute la largeur de sa colonne */
  text-align: center;
  box-sizing: border-box;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* --- LISTE DES CHAMBRES responsive  --- */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media (max-width: 900px) {
  /* La carte passe d'une ligne (3 colonnes) à une colonne (3 lignes) */
  .horizontal-room-card {
    flex-direction: column;
  }

  .room-col-image {
    flex: none; /* Désactive la largeur fixe */
    height: 250px;
  }

  .room-col-action {
    flex: none;
    border-left: none; /* Enlève la ligne verticale */
    border-top: 1px dashed #cbd5e1; /* Ajoute une ligne horizontale à la place */
    background: transparent; /* Sur mobile, on remet le fond gris pour unifier */
  }
}
/* -------------------------------------- */


/* ------------------------------------ */
/* --- Validation Formulaire (JS)   --- */
/* ------------------------------------ */

/* Texte inséré sous l'input par le JS */
.error-feedback {
  display: block;
  color: #e74c3c;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: -2px; /* Rapproche l'erreur de l'input */
  margin-bottom: 8px; /* Remplace l'espace pour le label suivant */
  margin-left: 10px;
  min-height: 1.2rem; /* Garde la place réservée pour éviter les sauts */
}

/* On s'assure que la marge du bas des inputs est réduite pour laisser place à l'erreur */
.form-group input:not([type="checkbox"]), 
.form-group textarea {
  margin-bottom: 4px;
}

/* L'état bloqué du bouton */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  background-color: #94a3b8 !important; /* Bouton Gris neutre */
  pointer-events: none; 
}

/* Bordures dynamiques */
.input-success {
  border-color: #2ecc71 !important;
}

.input-error {
  border-color: #e74c3c !important;
  background-color: #fdf2f2; /* Fond rouge */
  animation: shake 0.4s ease-in-out;
}

/* animation quand le champ passe en erreur */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}