/*-- 
    Nom du fichier : villes.css
    Description    : Styles génériques pour les sections villes

    Auteur         : French Riviera Conciergerie
    Copyright      : © 2024-2025 French Riviera Conciergerie. Tous droits réservés.
    Licence        : Ce fichier  est la propriété de French Riviera Conciergerie. 
                     Toute utilisation, reproduction, modification, ou distribution
                     de ce fichier  est strictement interdite sans l'autorisation 
                     écrite préalable de French Riviera Conciergerie.

    Date de création     : 22 septembre 2024
    Dernière mise à jour : 05 juillet 2025
--*/

/* Fond global */
body, #auto_section_VoyageursNosLocationsSaisonnieres {
  background-color     : #cccbcb; /* gris foncé */
}

/* --------------------------------------------------------------------------------------------------------
 * Affichage des villes en polaroid 
 *---------------------------------------------------------------------------------------------------------*/
/* Conteneur global : fond blanc, centrage et marge */
.villes-container {
  padding              : 20px;                /* Un peu d’espace intérieur */
  display              : flex;                /* Pour aligner les polaroids en ligne */
  flex-wrap            : wrap;              /* Pour passer à la ligne si besoin */
  gap                  : 20px;                   /* Espacement entre polaroids */
  justify-content      : center;      /* Centrer horizontalement */
}

/* Style polaroid : fond noir avec ombre, taille fixe */
.ville-polaroid {
  background-color     : black;      /* Fond noir du polaroid */
  width                : 180px;                 /* Largeur fixe */
  padding              : 10px 10px 20px 10px; /* Padding en bas plus large pour le texte */
  box-shadow           : 0 4px 8px rgba(0,0,0,0.6); /* Ombre portée */
  border-radius        : 10px;    
  text-align           : center;
  color                : white;  
  cursor               : pointer;
  transition           : transform 0.3s ease;
}

.ville-polaroid:hover {
  transform            : scale(1.05);
}

/* Image polaroid */
.ville-polaroid img {
  width                : 100%;
  height               : 140px;                /* Hauteur fixe pour uniformiser */
  object-fit           : cover;            /* Recadrage propre */
  border-radius        : 6px;
  margin-bottom        : 10px;
}

/* Texte sous l'image */
.ville-polaroid p {
  margin               : 0;
  font-weight          : 600;
  font-size            : 1.5rem;
  user-select          : none;
}

/* --------------------------------------------------------------------------------------------------------
 * Affichage des 
 *---------------------------------------------------------------------------------------------------------*/
 .ville-section {
  padding              : 2rem 0;
}

.ville-section h2 {
  position             : relative;
  background           : linear-gradient(270deg, #001a4d, #007BFF, #001a4d);
  background-size      : 400% 400%;
  color                : white;
  padding              : 0.5rem 1rem;
  margin               : 0;
  min-height           : 2.5rem;           /* Fixe une hauteur minimale */
  border-left          : 6px solid transparent;
  border-bottom        : 4px solid transparent;
  border-image-source  : linear-gradient(to bottom, #333333, #bbbbbb);
  border-image-slice   : 1;
  animation            : gradient-move 10s ease infinite;
  overflow             : hidden;

  font-family          : var(--card-presentation-town-font-family-h2);
  font-size            : var(--card-presentation-town-font-size-h2);  
}

.ville-section h2::after {
  content              : "";
  position             : absolute;
  width                : 60px;
  height               : 2px;
  background           : rgba(255, 255, 255, 0.8);
  top                  : 50%;
  left                 : 50%;
  transform-origin     : center;
  opacity              : 0.7;
  border-radius        : 1px;
  pointer-events       : none;         /* Ignore les interactions */
  box-shadow           : 0 0 10px 3px rgba(255, 255, 255, 0.4),
                         0 0 20px 8px rgba(255, 255, 255, 0.2);
  animation            : slow-random-line 12s ease-in-out infinite;
}


/* Animation du fond */
@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Trajectoire plus lente */
@keyframes slow-random-line {
  0%   { top: 50%; left: 50%; opacity: 0.5; transform: translate(-50%, -50%) rotate(0deg); }
  20%  { top: 20%; left: 70%; opacity: 0.8; transform: translate(-50%, -50%) rotate(60deg); }
  40%  { top: 80%; left: 40%; opacity: 1;   transform: translate(-50%, -50%) rotate(120deg); }
  60%  { top: 30%; left: 10%; opacity: 0.8; transform: translate(-50%, -50%) rotate(180deg); }
  80%  { top: 70%; left: 80%; opacity: 0.6; transform: translate(-50%, -50%) rotate(240deg); }
  100% { top: 50%; left: 50%; opacity: 0.5; transform: translate(-50%, -50%) rotate(360deg); }
}

.ville-card {
  text-decoration      : none;
  color                : inherit;
  text-align           : center;
  width                : 150px;
  
}

.ville-card h1 {
  font-family          : var(--main_page-font-family-h1);
  font-size            : var(--main_page-font-size-h1);
}

.ville-card img {
  width                : 100%;
  box-shadow           : 0 0 10px rgba(0,0,0,0.1);
  transition           : transform 0.3s;
}

.ville-card:hover img {
  transform            : scale(1.05);
}

.bien-container {
  margin-bottom        : 2.5rem; /* ESPACE entre les logements dans une ville */
  padding              : 1rem;
  background           : #bbbbbb;
  box-shadow           : 0 2px 6px rgba(0, 0, 0, 0.05);
}

.bien-container h3 {
  background            : linear-gradient(to right, #007BFF, #567392); /* ton fond actuel */
  color                 : white;
  padding               : 0.5rem 1rem;

  /* Ici on applique le dégradé de gris aux bordures */
  border-image-source: linear-gradient(
    to bottom, 
    #333333, /* gris le plus fort en haut/gauche */
    #bbbbbb  /* gris le plus clair en bas */
  );
  border-image-slice: 1;
  font-family          : var(--card-bien-containter-font-family-h3);
  font-size            : var(--card-bien-containter-font-size-h3);
}

/* Dernier bien sans marge basse */
.bien-container:last-child {
  margin-bottom        : 0;
}

.bien-content {
  margin-top           : 1rem;
  display              : flex;
  flex-wrap            : wrap;
  gap                  : 1rem;
}

.bien-col-left, .bien-col-right {
  flex                 : 1 1 300px;
}

.bien-col-left img {
  width                : 100%;
  margin-bottom        : 10px;
  border               : 2px solid black;
}

.reserve-btn, .infos-btn, .map-link {
  display              : inline-block;
  margin-top           : 10px;
  padding              : 8px 12px;
  background-color     : #0077aa;
  color                : white;
  text-decoration      : none;
  border               : none;
  border-radius        : 4px;
  cursor               : pointer;
}

.bien-col-left iframe {
  width                : 100%;
  max-height           : 200px;
  border               : none;
  border               : 1px solid black;
}

/* Espacement entre la présentation et les logements */
/* Présentation de la ville */
.ville-presentation {
  display              : flex;
  align-items          : center;
  gap                  : 2rem;
  padding              : 1.5rem;
  background           : #0c3480;
  border-radius        : 0.5rem;
  margin-bottom        : 3rem; /* ESPACE entre la description et les logements */
}

.bien-col-right p {
  margin-top: 4.5rem; /* ESPACE entre les logements dans une ville */
  font-family          : var(--main_page-font-family-h2);
  font-size            : var(--main_page-font-size-h2);
  line-height          : 1.6;
}

/*-----------------------------------------------------------
 * Mise en page de la section image ville + texte ville
 * ----------------------------------------------------------------- */
.presentation-ville {
  display              : flex;
  gap                  : 1rem;               /* espace entre image et texte */
  margin-bottom        : 2rem;
  align-items          : center;    
  background-color     : #bbbbbb; 
  padding              : 1rem;
  color                : white;
}

.presentation-image {
  flex: 1;                 /* prend une part égale (ajuste si besoin) */
  max-width            : 33.33%;       /* 1/3 de la largeur */
}

.presentation-image img {
  width                : 100%;             /* image prend toute la div */
  height               : auto;
  object-fit           : cover;
  display              : block;
  border               : 2px solid black;
}

.presentation-texte {
  flex                 : 2;                 /* occupe 2/3 de la largeur */
  display              : flex;
  align-items          : center;     /* centre verticalement le texte */
}

.presentation-texte p {
  margin               : 0;
  line-height          : 1.5;
  font-size            : var(--card-presentation-texte-p-font-size);  
  font-family          : var( --card-presentation-texte-p-font-family);  
  color                : black;
}