/*-- 
    Nom du fichier : style.css
    Description    : Styles de la fenetre principale

    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
--*/
@import url('/_COMMON/CSS/constantes.css');

body {
  margin               : 0;
  font-family          : var(--html-font-family);
  color                : black;
  background-color     : white;
  box-sizing           : border-box;  

  /* Bord mini gauche et droit */
  padding-left         : var(--body-padding-left-right);
  padding-right        : var(--body-padding-left-right);  
}

a {
  text-decoration      : none;
  color                : inherit;
}

h1, h2, h3 {
  margin               : 0;
}

a, p, h1, h2, h3 {
  user-select: none;         /* standard */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}


/* Navbar */
.navbar {
  display              : flex;
  flex-direction       : column;   /* Par défaut : logo en haut, menu en bas */
  align-items          : flex-start;  /* Alignement à gauche */
  padding-left         : clamp(10px, 4vw, 40px);
  padding-right        : clamp(10px, 4vw, 40px);
  padding-top          : clamp(5px, 3vw, 20px);
  padding-bottom       : clamp(5px, 3vw, 20px);
  background-color     : #fff;
  box-shadow           : 0 2px 5px rgba(0,0,0,0.1);
  position             : relative;
  z-index              : 1000;
  gap                  : 10px; /* espace entre logo et menu quand en colonne */
}

.nav-links {
  list-style           : none;
  gap                  : 20px;
}

.nav-links li a {
  color                : black;
  font-weight          : bold;
  font-size            : clamp(0.6rem, 1.5vw, 1.3rem);
}

/* Sections */
section {
  padding              : clamp(20px, 5vw, 60px) clamp(10px, 3vw, 20px);
  text-align           : center;
}

.APropos-section img {
  margin-top           : 20px;
  max-width            : 100%;
  border-radius        : 10px;
}

.service-card {
  background           : #333;
  padding              : 20px;
  margin               : 20px;
  border-radius        : 10px;
  display              : inline-block;
  width                : 30%;
  color                : black;
}

.gallery-section {
  background           : #111;
}

.gallery {
  display              : flex;
  flex-wrap            : wrap;
  gap                  : 20px;
  justify-content      : center;
}

.gallery img {
  width                : 300px;
  height               : 200px;
  object-fit           : cover;
  border-radius        : 10px;
  transition           : transform 0.3s;
}

.gallery img:hover {
  transform            : scale(1.1);
}


/* Footer */
.footer {
  background           : #000;
  padding              : 20px;
  text-align           : center;
}

/* Boutons */
.btn {
  transition           : transform 0.2s ease, background 0.3s;
}
.btn:hover {
  transform            : scale(1.05);
}

/* Gestion des sous menus */
/* Sous-menu caché par défaut */
.dropdown-menu {
  display              : none;
  position             : absolute;
  background-color     : #ffffff;
  box-shadow           : 0 4px 8px rgba(0, 0, 0, 0.1);
  list-style           : none;
  margin               : 0;
  padding              : 0;
  z-index              : 999;
}

/* Affichage du menu au survol */
.dropdown:hover .dropdown-menu {
  display              : block;
}

.dropdown {
  position             : relative;
}

.dropdown-menu li a {
  display              : block;
  padding              : 10px 15px;
  color                : #333;
  text-decoration      : none;
}

.dropdown-menu li a:hover {
  background-color     : #f5f5f5;
}

/* Navbar de base */
.navbar {
  justify-content      : space-between;
  align-items          : center;
  padding              : 10px 20px;
  background-color     : #fff;
  box-shadow           : 0 2px 5px rgba(0, 0, 0, 0.1);
  position             : relative;
  z-index              : 1000;
}

/* Logo */
.logo {
  /*font-size            : clamp(1em, 0.2vw, 1.5em);*/
  font-weight          : bold;
  text-decoration      : none;
  color                : #333;
}

.logo img {
  height                    : clamp(30px, 5vw, 80px);    /* ou la taille souhaitée */
  width                     : auto;     /* pour garder les proportions */
  display                   : block;  /* pour éviter un petit espace sous l'image */
  object-fit                : contain;
}


/* Liens principaux */
.nav-links {
  list-style           : none;
  display              : flex;
  gap                  : clamp(5px, 5vw, 20px);
  padding              : 0;
  margin               : 0;
  flex-wrap            : wrap; /* Pour éviter overflow si trop de liens */
}

/* Liens */
.nav-links li a, .dropdown-toggle {
  text-decoration      : none;
  color                : #333;
  padding              : 10px 0;
  display              : block;
}

/* Au-dessus de 768px : menu à côté du logo */
@media screen and (min-width: 768px) {
  .navbar {
    flex-direction: row;         /* logo + menu sur la même ligne */
    align-items: center;         /* alignement vertical centré */
    justify-content: space-between; /* logo à gauche, menu à droite */
    gap: 0;
  }
  .nav-links {
    flex-wrap: nowrap;           /* menu en ligne sans retour */
  }
}

/* Dropdown */
.dropdown {
  position             : relative;
}

.dropdown-menu {
  display              : none;
  position             : absolute;
  top                  : 100%;
  left                 : 0;
  background-color     : #fff;
  list-style           : none;
  padding              : 0;
  box-shadow           : 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li a {
  display              : block;
  padding              : 10px 15px;
  white-space          : nowrap;
  text-decoration      : none;
  color                : #333;
}

.dropdown:hover .dropdown-menu {
  display              : block;
}

/* ---------------------------------------------------------------------------------------------
 * DEGRADES SECTIONS
 * --------------------------------------------------------------------------------------------- */
/* Dégradés de transition */
.gradient {
  height               : 80px;
  width                : 100%;
  display              : block;
  padding              : 0;
  margin               : 0;
}

/* Dégradé transparent → couleur de fond de mainMessage */
.gradient-top-to-section {
  position             : relative;
  width                : 100vw;           /* ✅ Toute la largeur de la fenêtre */
  height               : 120px;          /* hauteur fixe ou ajustable */
  background           : rgb(204, 203, 203);
  overflow             : hidden;       /* cache les formes qui sortent */
}

/* Dégradé couleur de fond de mainMessage → couleur suivante */
.gradient-blue-to-green {
  /* background: linear-gradient(to bottom, rgb(3, 54, 83), rgb(30, 100, 100)); */
   background          : var(--main_page-bg1); 
}
.gradient-green-to-blue {
  background           : linear-gradient(to bottom, rgb(30, 100, 100), rgb(3, 54, 83));
}

.gradient-blue-to-bottom {
  background           : linear-gradient(to bottom, var(--main_page-bg1), #222);
}

/* ---------------------------------------------------------------------------------------------
 * ANIMATION ENTRE LES SECTIONS
 * --------------------------------------------------------------------------------------------- */
/* Animation pour le dégradé de transition */
.gradient-top-to-section .shape {
  position             : absolute;
  border-radius        : 50%;
  opacity              : 0.25;
  mix-blend-mode       : overlay;
  animation            : moveShape 20s ease-in-out infinite;
}

/* Forme 1 */
.gradient-top-to-section .shape:nth-child(1) {
  width                : 100px;
  height               : 100px;
  background           : rgba(3, 54, 83, 0.6);
  top                  : 20%;
  left                 : -10%;
  animation-delay      : 0s;
}

/* Forme 2 */
.gradient-top-to-section .shape:nth-child(2) {
  width                : 120px;
  height               : 120px;
  background           : rgba(100, 100, 255, 0.4);
  top                  : 40%;
  left                 : 30%;
  animation-delay      : 5s;
}

/* Forme 3 */
.gradient-top-to-section .shape:nth-child(3) {
  width                : 80px;
  height               : 80px;
  background           : rgba(0, 0, 0, 0.3);
  top                  : 60%;
  left                 : 70%;
  animation-delay      : 10s;
}

/* Animation qui parcourt la largeur */
@keyframes moveShape {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(100vw) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}
 
 /* ---------------------------------------------------------------------------------------------
 * GESTION DES LANGUES
 * --------------------------------------------------------------------------------------------- */

/* Gestion des langues */
.language-selector {
  position             : relative;
  display              : inline-block;  
}

.language-selector select {
  padding              : 5px;
  border-radius        : 5px;
  font-size            : clamp(0.6rem, 3vw, 1rem);
}

.lang-btn {
  background           : none;
  border               : none;
  cursor               : pointer;
}

.flag-icon {
  width                : clamp(10px, 3vw, 24px);
  border-radius        : 3px;
}

.lang-dropdown {
  display              : none;
  position             : absolute;
  top                  : 35px;
  right                : 0;
  background-color     : white;
  border-radius        : 5px;
  box-shadow           : 0 4px 8px rgba(0,0,0,0.2);
  z-index              : 1000;
}

.lang-dropdown li {
  list-style           : none;
}

.lang-dropdown a {
  display              : flex;
  align-items          : center;
  padding              : 8px 12px;
  text-decoration      : none;
  color                : black;
  font-size            : 14px;
}

.lang-dropdown a:hover {
  background-color     : #f0f0f0;
}

.lang-dropdown img {
  width                : 20px;
  margin-right         : 8px;
}