/*-- 
    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;  
}

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+ */
}

/* ================================================================================================
   == Caracteristiques Commune Header
   ================================================================================================ */
.css_header {
  width           : 100%;
  background-color: var(--FRC-background);
  box-sizing      : border-box;
  position        : relative;
}

/* ================================================================================================
   == Header Logo + Nom FRC
   ================================================================================================ */
.header_navbar {
  display         : flex;
  align-items     : center;
  max-width       : 100%;     
  margin          : 0;        
  padding         : clamp(4px, 2vw, 20px) clamp(4px, 2vw, 20px); 
  position        : relative;
}

.header_navbar h1 {
  font-size       : clamp(8px, 2.5vw, 80px);  
  color           : var(--FRC-color);
  font-family     : var(--FRC-font-family);   
  margin-bottom: 15px;
}

.header_navbar h2 {
  color           : white;
  font-family     : var(--SLOGAN-font-family);  
  font-style      : italic; 
  font-size       : clamp(8px, 2.5vw, 30px);  
}

.header_logo img {
  height          :  clamp(30px, 5vw, 80px); 
  width           : auto;
  display         : block;
  object-fit      : contain;      
}

.header_title_group {
  flex            : 1;           
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  text-align      : center;
  min-width: 0;   
}

.header_title {
  color           : white;
  font-weight     : bold;
  margin          : 0;
  pointer-events  : none;
}

.header_subtitle {
  margin          : 4px 0 0 0;
}

.header_right_controls {
  display         : flex;
  align-items     : center;
  gap             : 10px; 
}

/* ================================================================================================
   == Menu Deroulant Hamburger
   ================================================================================================ */
.header_menu_toggle {
  display         : flex;
  flex-direction  : column;
  gap             : 5px;
  background      : none;
  border          : none;
  cursor          : pointer;
  position        : relative;
  z-index         : 1001;
}

.header_logo,
.header_menu_toggle {
  margin          : 0;
}    

.header_menu_toggle span {
  width           : clamp(10px, 4vw, 26px);
  height          : 2px;
  background      : white;
  display         : block;
}

.header_nav_links {
  list-style      : none;
  margin          : 0;
  padding         : 10px 0;
  position        : absolute;
  top             : 100%;
  right           : 0;          /* aligne à droite */
  left            : auto;       /* annule left:0 */
  width           : max-content;
  min-width       : 180px;
  /* background      : var(--FRC-background); */
  background: rgba(93, 173, 226, 0.95);  /* bleu clair semi-transparent */
  backdrop-filter: blur(5px);  
  display         : none;
  flex-direction  : column;
  text-align      : left;       /* plus propre pour menu */
  z-index         : 1000;

  font-size       : clamp(14px, 1.5vw, 20px) !important;
  font-family     : var(--mainFrame-font-family-h1);
}

.header_nav_links.active {
  display         : flex;
}

.header_nav_links li {
  padding         : 10px 10px;
}

.header_nav_links a {
  color           : white;
  font-weight     : 500;
  text-decoration : none;
}

.header_nav_links a:hover {
  background: rgba(255,255,255,0.2);  /* légère surbrillance */
}


.submenu {
  list-style: disc;         /* ou circle, selon ton goût */
  list-style-position: inside; /* pour que le point soit à l’intérieur du padding */
  color: white;             /* couleur des bullets */
}

.submenu li::marker {
  color: white;             /* CSS moderne pour cibler le bullet */
}


/* ================================================================================================
   == Choix de la langue
   ================================================================================================ */
.language-selector select {
   font-size: clamp(6px, 2vw, 16px);
  padding         : clamp(2px, 0.5vw, 4px) clamp(4px, 0.5vw, 6px);
}

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