/* Style général */
  @font-face { 
  font-family: 'Rantera'; 
  src: 
      url('../fonts/rantera.otf') format("opentype"),
      url("../fonts/Rantera.woff") format("woff");
  font-weight: normal; 
  font-style: normal; 
  } 

  @font-face { 
  font-family: 'Etheral'; 
  src: 
      url("../fonts/Ethereal Whisper.woff") format("woff");
  font-weight: normal; 
  font-style: normal; 
  }

  :root {
    --primary-color: #FFD700; /* Doré */
    --secondary-color: #1e3a8a; /* Bleu foncé */

  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Playfair Display';
  }


  header {
    background-color: #000000;
  }

  nav {
    height: 10vh; /* 10% de la hauteur de la fenêtre */
    width: 100vw; /* Prend toute la largeur */
    background: #000000; /* Ou autre couleur */
    display: flex;
    align-items: center; /* Centrer les éléments verticalement */
    justify-content: space-between; /* Répartir les éléments */
    padding: 0 20px; /* Petit padding sur les côtés */
    position: fixed; /* Fixer en haut */
    top: 0;
    left: 0;
    z-index: 1000; /* Toujours au-dessus des autres éléments */
  }

  body {
    padding-top: 10vh; /* Décaler le contenu sous le bandeau */
    overflow-x: hidden;
  }

  /* Logo à gauche */
  .logo {
    height: 35vh;
    padding-top: 10vh;
    display: flex;
    align-items: center;
  }

  .logo img {
    max-height: 20vh; /* Ajustable selon tes préférences */
    width: auto; /* Maintient les proportions */
  }

  .social-contact {
    height: auto;
    display: flex;
    flex-direction: row; /* Met en colonne */
    gap: clamp(5px, 1vw, 15px); /* Espacement entre icônes et numéro */
  }
  
  .social-links {
    display: flex;
    gap: 10px;
    padding-top: 5px;
  }


  /* Icônes SVG */
  .social-links svg {
    height: 30px;
    width: 30px;
    fill: #f8f8f8; /* Couleur des icônes */
    transition: fill 0.3s ease;
  }

  .social-links svg:hover {
    fill: var(--primary-color); /* Changement de couleur au survol */
  }

  .contact-info {
    align-items: center;
    display: flex;
    gap: 10px;
  }
  .contact-info a {
    text-decoration: none;
    color: var(--primary-color);
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    padding-right: 1vw;
  }


  /* Style du menu */
  .menu {
    list-style: none;
    display: flex;
    gap: 20px;
  }

  .menu li {
    position: relative;
  }

  /* Style du lien principal */
  .menu > li > a {
    text-decoration: none;
    color: var(--primary-color);
    font-size:1.3rem;
    padding: 10px 15px;
  }

  .menu a.active {
    color: var(--primary-color); /* Doré */
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color); /* Ligne dorée sous l'onglet actif */
    padding-bottom: 5px;
  }


  /* Style du sous-menu */
  .submenu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    width: 200px;
    z-index: 1000;
  }

  .submenu li {
    padding: 10px;
  }

  .submenu li a {
    text-decoration: none;
    color: black;
    display: block;
  }

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

  /* Effet au survol */
  .submenu li a:hover {
    background: var(--primary-color);
    color: white;
  }


  html , body {
    margin: 0;
    padding: 0;
    height:100%;
  }
  .section-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: white;
    padding: 0 5vw;
  }

  .content {
    display: flex;
    width: 100%;
    align-items: center;
    margin-top: 10vh;
  }

  .image-container {
    flex: 1;
    width: 33vw;
    padding-top: 25px;
    padding-bottom: 25px;
    height:90vh;
  }

  .image-container img {
    width: 35vw;
    object-fit: cover;
  }

  .text-container {
    flex: 2;
    padding-left: 5%;
    text-align: left;
  }

  .text-container h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 30px;
  }

  .text-container p {
    font-size: 1.3rem;
    color: black;
    line-height: 1.5;
  }
  /* Style pour le texte */
  h2 {
    font-size: 2rem;
    color: var(--primary-color); /* Couleur principale */
  }

  .quality-section {
    background-image: url('../images/marbre.jpeg'); /* Chemin de l’image */
    background-size: cover; /* Ajuste l’image pour couvrir toute la page */
    background-position: center; /* Centre l’image */
    background-repeat: no-repeat; /* Empêche la répétition */
    display: flex;
    height: 90vh;
    align-items: center;
    gap: 50px;
  }

  .quality-image {
    flex: 1;
    height: 100%;
  }

  .quality-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .quality-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .quality-bar {
    display: flex;
    flex-direction: column;
    width: 90%;
    padding-bottom: 5vh;
    padding-left: 5vw;
    color:#f8f8f8;
    align-items: center;
    justify-content: center;
  }

  .quality-bar span {
    font-weight: bold;
    font-size: 1.8rem;
    padding-bottom: 2vh;
  }

  .bar {
    width: 100%;
    height: 20px;
    background: #ddd;
    overflow: hidden;
    position: relative;
  }

  .bar-fill {
    width: 0;                       /* démarre à 0 */
    height: 100%;
    background: var(--primary-color);
    transition: width 3s ease-in-out; /* durée portée à 2s */
  }

  .full-right-section {
    width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: flex-end; /* Aligne le contenu à droite */
    align-items: center;        /* Centre verticalement */
    background-color: #f0f0f0;  /* Couleur de fond ajustable */
    padding: 0 5vw;             /* Un peu d'espace à droite */
  }
  
  .full-left-section {
    width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: flex-start; /* Aligne le contenu à droite */
    align-items: center;        /* Centre verticalement */
    background-image: url('../images/marbre.jpeg'); /* Chemin de l’image */
    background-size: cover; /* Ajuste l’image pour couvrir toute la page */
    background-position: center; /* Centre l’image */
    background-repeat: no-repeat; /* Empêche la répétition */
    background-color: rgba(128, 128, 128, 0.3); /* Gris avec opacité */
  }

  .text-content-left {
    text-align: left;
    align-items:center;
    height:60vh;
    max-width: 45vw;           /* Largeur limite si tu veux un bloc lisible */
    color: white;                /* Couleur du texte */
    background-color: rgba(128, 128, 128, 0.3); /* Gris avec opacité */
    padding-left: 5vw;
    padding-top: 18vh;
  }

  .text-content-left h1{
    color: var(--primary-color);
    font-size: 2rem;
    padding-bottom: 3vh;
  }

  .text-content-left p{
    font-size: 1.3rem;
    color: white;
  }
  .text-content {
    text-align: right;
    max-width: 45vw;           /* Largeur limite si tu veux un bloc lisible */
    color: #333;                /* Couleur du texte */
  }
  .text-content h1{
    color: black;
    font-size: 2rem;
    padding-bottom: 3vh;
  }

  .text-content p{
    font-size: 1.3rem;
    color: black;
  }

  .quality-approach {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10vw;
  }

  .quality-approach h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--primary-color);
  }

  .quality-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
  }

  .quality-item {
    flex: 1;
    background: #f8f8f8;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .quality-item h3 {
    margin: 10px 0;
    font-size: 1.3rem;
    color: black;
  }

  .quality-item p {
    font-size: 1rem;
    color: #555;
  }

  .quality-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }



    /* Footer */
    /* Footer */
  .footer {
    background-color: #000; /* Fond noir */
    color: var(--primary-color);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 10px 5vw;
  }
  
  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .footer-maps {
    margin-top: 3vh;
    margin-right: 9vw;
  }
  
  .footer-slogan {
    display: flex;
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  /* Logo à gauche */
  .footer-logo img {
    height: 30vh; /* Ajuste la taille du logo */
  }
  .footer-logo p {
    font-size:1.2rem;
  }
  
  /* Informations de contact */
  .footer-contact p {
    margin: 3px 0;
    font-size:1.2rem;
  }
  
  /* Numéro de téléphone cliquable */
  .footer-contact a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
  }
  
  .footer-contact a:hover {
    text-decoration: underline;
  }
  
  /* Mentions légales en bas */
  .footer-legal {
    text-align: center;
    font-size: 1rem;
    margin-top: 10px;
  }
  
  .footer-legal a {
    color: white;
    text-decoration: none;
  }
  
  .footer-legal a:hover {
    text-decoration: underline;
  }