/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* 
  Bloc Commun                       : Encadré commun à tous les blocs                         
  Menu Horizontal                   : Menu avec animation de fondu sur le titre
  Bannière                          : Bannière commune à toutes les pages avec animation de rebonds
*/

body {
      font-family: 'Quicksand', sans-serif;
      margin: 0;
      /*background-color: #E3C6A8;*/
      background-color: rgba(227, 198, 168, 0.5);
    }

/* -- Début Bloc Garantie --------------------------------------- */
  .garantie-block {
    margin-top: 40px;
  }
  
  .garantie-image-container {
  position: relative;
  text-align: center;
  margin-top: 20px;
  }
  
  .garantie-image {
    width: 100%;
    object-fit: cover;
    border-radius: 15px;
    display: block;  
  }

  /* Hauteur pour Navigateur */
    .garantie-image {
      max-height: 300px;
      object-position: center 65%;
    }
    
  /* Hauteur pour Tablette */
    @media (max-width: 1024px) {
      .garantie-image {
        max-height: 250px;
        object-position: center 60%;
      }  
  }
  
  /* Hauteur pour mobile */
    @media (max-width: 400px) {
      .garantie-image {
        height: 380px;
        object-position: center 80%;
      }
  }
  
/* -- Fin Bloc Garantie ----------------------------------------- */

/* -- Début Zone Icones ----------------------------------------- */
  .garantie-icons {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 2;
    flex-wrap: nowrap; /* ✅ empêche le retour à la ligne */
  }

  .garantie-icons img {
    width: 150px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  }

.icon-wrapper {
  background-color: rgba(0, 0, 0, 0.2); /* fond blanc semi-transparent */
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.icon-wrapper:hover {
  transform: scale(1.05);
}

.garantie-icons img.visible {
  opacity: 1;
  transform: translateY(0);
}


  /* Responsive (Navigateur) */  
    .garantie-icons {
      gap: 100px; /* espace horizontal entre les icônes */  
      padding: 10px;
    }
  
    .garantie-icons img {
      width: 150px;
      height: auto;
    }

  /* Hauteur pour Tablette */
    @media (max-width: 1024px) {
      .garantie-icons {
        gap: 120px; /* espace horizontal entre les icônes */  
        padding: 20px;
      }
    
      .garantie-icons img {
        width: 100px;
        height: auto;
      }
    }

  /* Hauteur pour mobile */
    @media (max-width: 400px) {
      .garantie-icons {
        position: absolute;
        bottom: 35%; /* ✅ position verticale plus haute */
        transform: translate(-50%, 50%); /* ✅ centrage horizontal et ajustement vertical */
        left: 50%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        column-gap: 130px;
        row-gap: 10px;
        justify-items: center;
        align-items: center;
        padding: 0;
        z-index: 2;
      }

      .garantie-icons img {
        width: 80px; /* 🔽 taille réduite pour smartphone */
        height: auto;
      }
  
    .garantie-icons .icon-wrapper:nth-child(3) {
      grid-column: 1 / span 2;
      position: relative;
      top: -60px;
      z-index: 1;
    }

  }
  
  /* Animation de fondu */
@keyframes iconefadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* -- Fin Zone Icones ------------------------------------------- */

/* -- Début Bloc Commun ----------------------------------------- */
  .content-block {
    max-width: 900px;
    margin: 2rem auto;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 2rem 1rem;
    box-sizing: border-box;
  }
/* -- Fin Bloc Commun ------------------------------------------- */

/* -- Début Menu Horizontal ------------------------------------- */
  .horizontal-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffffcc;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease;
    z-index: 1000;
    opacity: 1;
    transform: translateY(0);  
	}

  .menu-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 1001;
  }

	.logo img {
	  height: 40px;
	  border-radius: 6px;
	  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	}

	.horizontal-menu ul {
	  display: flex;
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}

	.horizontal-menu li {
	  margin-left: 20px;
	}

	body {
	  padding-top: 65px;
	}
 
  .more-menu {
    display: none;
  }


  /* Responsive Desktop */
  @media screen and (min-width: 1025px) {
    .menu-list {
      display: flex;
      gap: 20px;
    }
  
    .extra-item {
      display: block;
    }
  
    .more-button {
      display: none;
    }
    
    .more-menu {
      display: none;
    }
   
    .menu-dropdown {
      display: none;
    }
  
  }
  
  /* Responsive Tablette (Menu Priority) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Masquer les éléments non prioritaires */
  .extra-item,
  .burger {
    display: none;
  }

  /* Structure du menu principal */
  .menu-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 1001;
  }

  /* Élément parent du dropdown */
  .menu-dropdown {
    position: relative;
  }

  /* Sous-menu masqué par défaut */
  .more-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    min-width: 140px;
    flex-direction: column;
    gap: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }

  .more-menu.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  /* Apparition du sous-menu au survol ou focus */
  .menu-dropdown:hover .more-menu,
  .menu-dropdown:focus-within .more-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  /* Liens du sous-menu */
  .more-menu li {
    text-align: right;
  }

  .more-menu a {
    display: block;
    text-align: right;
    padding-right: 10px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 0.8; /* 🔽 Valeur plus petite = lignes plus rapprochées */
  }

  .more-menu a:first-child {
    margin-top: 10px; /* marge haute */
  }

  .more-menu a:last-child {
    margin-bottom: 10px; /* marge basse */
  }
  .more-menu a:hover {
    color: orange;
  }
}

  /* Responsive Smartphone (Menu Burger) */
    @media screen and (max-width: 767px) {
    	body {
    	  padding-top: 86px;
    	}      

      .menu-list {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #ffffffcc;
        padding: 10px 0;
        border-top: 1px solid #ddd;
        
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
      }
    
      .menu-list.active {
        max-height: 500px; /* ou selon le contenu */
        padding: 10px 0;
      }
    
      .menu-list li {
        margin: 10px 0;
        text-align: center;
        width: 100%;
          font-size: 16px; /* ✅ Choisis une taille cohérente pour tous les éléments */
  font-weight: 600;
      }
    
      .burger {
        display: flex;
        align-items: center;
        cursor: pointer;
        flex-direction: column;
      }
  
      .burger span {
        height: 3px;
        width: 25px;
        background: #333;
        margin: 4px;
        border-radius: 2px;
      } 

      .extra-item {
        display: block;
      }
      
      .more-button {
        display: none;
      }
      
      .more-menu {
        display: none;
      }
     
      .menu-dropdown {
        display: none;
      }
    }


  /* Animation */
    @keyframes bounceDown {
      0% {
        transform: translateY(-100%);
        opacity: 0;
      }
      60% {
        transform: translateY(20px);
        opacity: 1;
      }
      80% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0);
      }
    }	

  	.horizontal-menu a {
  	  text-decoration: none;
  	  color: #333;
  	  font-weight: 600;
  	  transition: color 0.3s ease;
  	}
  
  	.horizontal-menu a:hover {
  	  color: orange;
  	}
	
    .horizontal-menu.menu-hidden {
      opacity: 0;
      transform: translateY(-100%);
      pointer-events: none;    
    }  
    
    .horizontal-menu.bounce {
      animation: bounceDown 0.6s ease forwards;
    }
  
    .horizontal-menu a {
      position: relative;
      text-decoration: none;
      color: #333;
      font-weight: 600;
      transition: color 0.3s ease;
    }
  
    .horizontal-menu a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 2px;
      background-color: orange;
      transition: width 0.3s ease;
    }

    .horizontal-menu a:hover::after {
      width: 100%;
    }
    


  
/* -- Fin Menu Horizontal --------------------------------------- */
	
/* -- Début Bannière -------------------------------------------- */
	.banner {
	  position: relative;
	  width: 100%;
	  max-height: 300px;
	  overflow: hidden;
    display: flex;
    margin-bottom: 0;
	}
	
	.banner img {
	  width: 100%;
	  height: auto;
	  object-fit: cover;
	  display: block;
	}

  .slogan {
    font-size: 20px;
    font-style: italic;
  }



/* Animation */
.banner h1 {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 15px 25px;
  border-radius: 8px;
  text-align: center;
  z-index: 1;
  animation: fadeInOpacity 1s ease-out;
  transform: none;
}


@keyframes fadeInOpacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive */
@media screen and (max-width: 768px) {
  .banner {
    padding: 0;
    background-position: top;
    margin-bottom: 0;
    max-height: 150px;
  }
  .banner h1,
  .banner .slogan {
    max-width: 60%;
    font-size: 18px;
    padding: 10px 15px;
  }

  .slogan {
    font-size: 16px;
  }
}
/* -- Fin Bannière ---------------------------------------------- */

  /* Début barre tricolore */
.tricolor-bar {
  display: flex;
  height: 20px;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

.tricolor-bar .blue {
  background-color: blue;
  flex: 1;
}

.tricolor-bar .white {
  background-color: white;
  flex: 1;
}

.tricolor-bar .red {
  background-color: red;
  flex: 1;
}

@media screen and (max-width: 768px) {
  .tricolor-bar {
    margin-top: 0;
  }
}
  /* Fin barre tricolore */  


  /* Début Bannière (Texte) */
  .text-banner {
    font-family: 'Quicksand', sans-serif;
    font-size: 30px;
    color: white;
    font-weight: bold;
    background-color: #8B4513; /* marron */
    padding: 20px;
    text-align: center;
  }
  /* Fin Bannière (Image + Texte) */

  /* Début Bannière Body */
    .banner-body {
		  width: 100%;
		  /* max-height: 300px; */
		  overflow: hidden;
		  display: flex;
		  align-items: center;
		  position: relative;
    }

    .banner-body-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
    }
    
  /* Hauteur pour Navigateur */
    .banner-body {
      height: 300px;
    }

/* Hauteur pour Tablette */
@media (max-width: 1024px) {
  .banner-body {
    height: 275px;
  }
  .banner-body-img {
    object-fit: cover;
    object-position: center 60%;
    display: block;
  }  
}

/* Hauteur pour mobile */
@media (max-width: 768px) {
  .banner-body {
    height: 380px;
    object-position: center 80%;
    display: block;    
  }
}
  /* Fin Bannière Body */


	/* Début Première zone de texte (Titre + Texte) */
		.text-zone.primary h2 {
      font-size: 24px;
      font-weight: 600;
      margin: 10px 0 30px;
      color: red;
      text-align: center;		  
		}

		.text-zone.primary p {
      font-size: 18px;
      line-height: 1.6;
      margin: 10px 0;
      color: #333;
      text-align: center;
		}
	/* Fin Première zone de texte */

	/* Début Seconde zone de texte (Texte uniquement) */
		.text-zone.secondary p {
      font-size: 18px;
      line-height: 1.6;
      margin: 5px 0;
      color: #333;
      text-align: justify;
		}
	/* Fin Seconde zone de texte */
	
	/* Début Zone 6 Boutons */
		.grid-wrapper {
		  max-width: 900px;
		  margin: 0 auto;
		}

		.image-grid {
		  display: flex;
		  flex-wrap: wrap;
		  gap: 10px;
		  padding: 10px;
		  justify-content: center;
		}
		
		.image-container {
		  position: relative;
		  width: calc(16.666% - 10px); /* 6 images per row */
		}

		@media (max-width: 1024px) {
		  .image-container {
			width: calc(25% - 10px); /* 4 images per row */
		  }
		}

		@media (max-width: 768px) {
		  .image-container {
			width: calc(50% - 10px); /* 2 images per row */
		  }
		}

		.image-container img {
		  width: 100%;
		  height: auto;
		  border-radius: 8px;
		  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		  transition: transform 0.3s ease;
		  display: block;
		}

		.image-container:hover img {
		  transform: scale(1.05);
		}

		.caption {
		  position: absolute;
		  bottom: 8px;
		  left: 8px;
		  right: 8px;
		  background: rgba(0, 0, 0, 0.6);
		  color: #fff;
		  padding: 10px;
		  border-radius: 5px;
		  font-size: 0.9em;
		  text-align: center;
		  opacity: 0;
		  transition: opacity 0.3s ease;
		}

		.image-container:hover .caption {
		  opacity: 1;
		}

		.caption button {
		  margin-top: 8px;
		  padding: 6px 12px;
		  background-color: orange;
		  color: white;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		  font-weight: 600;
		  font-size: 0.85em;
		  transition: background-color 0.3s ease;
		}

		.caption button:hover {
		  background-color: darkorange;
		}
	/* Fin Zone 6 Boutons */

	/* Debut Pied de Page */
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px 0;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  text-align: left;
}

.footer-logo {
  height: auto;
  flex-shrink: 0;
  background-color: transparent; 
}

.footer-content p {
  margin: 0;
  font-size: 14px;
}

.liens-footer {
  font-size: 10px;
  text-align: center;
  margin-top: 5px;
  font-family: 'Quicksand', sans-serif;
}

.liens-footer a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.liens-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #ffd700;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.liens-footer a:hover {
  color: #ffd700;
}

.liens-footer a:hover::after {
  transform: scaleX(1);
}

/* Responsive */
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo-left,
  .footer-logo-right {
    width: 40px !important;
  }

  .liens-footer {
    font-size: 14px;
  }
}
	/* Fin Pied de Page */

  /* Début Fondu pour les Bloc Images (Droite ou Gauche)*/
  @keyframes fadeUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }	
  /* Fin Fondu pour les Bloc Images (Droite ou Gauche)*/

	/* Debut Bloc Image à droite */
		.blocright-container {
      display: flex;
      align-items: center;
      animation: fadeUp 0.8s ease-out forwards;
      opacity: 0;
      transform: translateY(30px);
    }

		.blocright-text {
		  flex: 1;
		  padding: 1rem;
		  padding-right: 1rem;
		}

		.blocright-title {
		  font-family: 'Quicksand', sans-serif;
		  color: red;
		  font-weight: bold;
		}

		.blocright-image {
		  flex: 1;
		}

		.blocright-image img {
		  width: 100%;
		  height: auto;
		  border-radius: 8px;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .blocright-image img.visible {
      opacity: 1;
      transform: translateY(0);
    }
		
		/* Responsive téléphone */
		@media screen and (max-width: 768px) {
      .blocright-container {
        flex-direction: column;
        text-align: center;
        margin: 1rem;
        padding: 1rem;  
      }

      .blocright-text {
        padding: 1rem;
        /* padding-right: 0; */
        text-align: center;
      }

      .blocright-image {
        width: 100%;
        margin-top: 1rem;
      }

      .blocright-image img {
        border-radius: 0 0 16px 16px;
      }
  }
	/* Fin Bloc Image à droite */
	
	/* Debut Bloc Image à gauche */
		.blocleft-container {
      display: flex;
      align-items: center;
      animation: fadeUp 0.8s ease-out forwards;
      opacity: 0;
      transform: translateY(30px);
		}

		.blocleft-text {
		  flex: 1;
		  padding: 1rem;
		  padding-right: 1rem;
		}

		.blocleft-title {
		  font-family: 'Quicksand', sans-serif;
		  color: red;
		  font-weight: bold;
		}

		.blocleft-image {
		  flex: 1;
		}

		.blocleft-image img {
		  width: 100%;
		  height: auto;
		  border-radius: 8px;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .blocleft-image img.visible {
      opacity: 1;
      transform: translateY(0);
    }
		
		/* Responsive téléphone */
		@media screen and (max-width: 768px) {
      .blocleft-container {
        flex-direction: column;
        text-align: center;
        margin: 1rem;
        padding: 1rem;  
      }

      .blocleft-text {
        padding: 1rem;
        /* padding-right: 0; */
        text-align: center;
      }

      .blocleft-image {
        width: 100%;
        margin-top: 1rem;
      }

      .blocleft-image img {
        border-radius: 0 0 16px 16px;
      }
  }		
	/* Fin Bloc Image à gauche */	
	
	  /* Début Bloc Titre, Texte, Explication à gauche et Image à droite */
      .double-text-block {
        max-width: 900px;
        margin: 2rem auto;
        background-color: white;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 2rem 1rem;
        box-sizing: border-box;
        animation: fadeUp 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
      }
      
      .double-text-block h2 {
        font-size: 30px;
        text-align: center;
        color: red;
        font-family: 'Quicksand', sans-serif;
        margin-bottom: 1.5rem;
      }
      
      .double-text-block .fullwidth-text {
        font-size: 18px;
        text-align: center;
        margin-bottom: 2rem;
        color: #333;
      }
      
      .text-image-section {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      
      .text-image-section .text-side {
        flex: 1;
        font-size: 18px;
        text-align: left;
        color: #333;
      }
      
      .text-image-section .image-side {
        flex: 1;
      }
      
      .text-image-section .image-side img {
        width: 100%;
        height: auto;
        border-radius: 8px;
      }
      
      /* Responsive mobile */
      @media screen and (max-width: 768px) {
        .text-image-section {
          flex-direction: column;
          text-align: center;
        }
      
        .text-image-section .text-side {
          text-align: center;
        }
      
        .text-image-section .image-side {
          width: 100%;
          margin-top: 1rem;
        }
      }
/* Fin Bloc Titre, Texte, Explication à gauche et Image à droite */

  /* Début Ouverture/Fermeture Plein Ecran */
    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      padding-top: 60px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.9);
    }
    
    .modal-content {
      margin: auto;
      display: block;
      max-width: 90%;
      max-height: 90%;
    }
  
    .close {
      position: absolute;
      top: 30px;
      right: 45px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
    }
  /* Fin Ouverture/Fermeture Plein Ecran */

  /* Début Info Bloc 3 Zones de texte et 1 image */
.info-bloc {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background-color: white; /* même fond que les autres blocs */
  border: none;            /* retire la bordure légère */
  border-radius: 16px;     /* même arrondi que les autres blocs */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* ombrage cohérent */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ligne-haut {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.texte-haut {
  flex: 1;
  max-width: 435px;
  min-width: 280px;
}

.image-haut {
  flex: 1;
  max-width: 435px;
}

.texte-haut p {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
}

.image-haut img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.ligne-bas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.zone-texte {
  flex: 1;
  max-width: 435px;
  min-width: 280px;
}

.zone-texte h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.zone-texte p {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .ligne-haut,
  .ligne-bas {
    flex-direction: column;
    align-items: center;
  }

  .image-haut img {
    max-width: 100%;
  }
}

/*@keyframes button_zoomIn {*/
/*  0% {*/
/*    transform: scale(0.5);*/
/*    opacity: 0;*/
/*  }*/
/*  100% {*/
/*    transform: scale(1);*/
/*    opacity: 1;*/
/*  }*/
/*}*/

@keyframes fadeThenZoom {
  0% {
    /* opacity: 0; */
    transform: scale(0.5);
  }
  50% {
    /* opacity: 1; */
    transform: scale(1);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes hoverBounce {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.05) translateY(-1px); }
  20%  { transform: scale(1.1) translateY(-2px); }
  30%  { transform: scale(1.05) translateY(-1px); }
  50% { transform: scale(1) translateY(0); }

}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/*.button_zoomIn {*/
/*  animation: button_zoomIn 0.8s ease-out forwards;*/
/*  opacity: 0; */
/*} */

  /* Fin Info Bloc 3 Zones de texte et 1 image */

/* Debut Encadré bas de page */
  		.text-zone.third p {
      line-height: 1.6;
      margin: 5px 0;
      color: #333;
		}

/* Texte de confiance */
.confiance-texte {
  display: block;
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}

/* Image bouton devis */
.bouton-devis {
  margin-top: 20px;
  text-align: center;
}

.button-img {
  max-width: 250px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1);
}

.button-img:hover {
  /* transform: scale(1.05) translateY(-5px); */
  animation: hoverBounce 0.6s ease;
  opacity: 0.9;
}

/* Texte couverture */
.couverture-texte {
  font-size: 18px;
  font-style: italic;
  text-align: right;
  margin-right: 0;
}

.couverture-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.couverture-texte a {
  text-decoration: underline;
  color: inherit;
}

/* Animation sur le texte couverture*/
.last-line-effect {
  animation: pulse 1s ease-in-out infinite;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .couverture-texte {
    font-size: 16px;
    text-align: center;
  }
}

/* Fin Encadré bas de page */

/* Début Carroussel */
.carrousel-titre {
  font-size: 24px;
  color: red; /* rouge vif */
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.carrousel-wrapper {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: #f9f9f9;
  overflow: hidden;
}

.carrousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.carrousel img {
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  scroll-snap-align: center;
  transition: transform 0.3s ease;
}

.carrousel img:hover {
  transform: scale(1.05);
}


/* Responsive */
@media screen and (max-width: 768px) {
  .carrousel {
    gap: 10px;
  }

  .carrousel img {
    max-width: 80%;
  }
}
/* Fin Caroussel */

/* Début Widget Rewiew */
.avis-encadre {
  border: 2px solid #c40000;
  padding: 20px;
  margin: 40px auto;
  max-width: 900px;
  background-color: #fff8f8;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.avis-titre {
  font-size: 24px;
  color: red;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.avis-widget-container {
  position: relative;
  width: 100%;
  padding-bottom: 66.66%; /* ratio 3:2 */
  height: 0;
  overflow: hidden;
}

.avis-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* Fin Widget Review */

/* Début Block Présentation */
.bloc-presentation {
  border: 2px solid #c40000;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.titre-principal {
  font-size: 24px;
  color: red;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

.ligne-deux {
  display: flex;
  flex-wrap: wrap;
  gap: 30px ;
  align-items: center;
  justify-content: flex-start;
}

.texte-description {
  flex: 1 1 400px;
  font-size: 18px;
  text-align: justify;
  max-width: 450px;
  margin-left: 60px;
}

.image-cote img {
  max-width: 200px;
  height: auto;
  border-radius: 6px;
  margin-left: 60px;
}

.image-centrale {
  text-align: center;
  margin-top: 30px;
}

.image-centrale img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
/* Fin Bloc Présentation */


/* Début Carte de Visite */
.carte-blanche {
  position: relative;
  max-width: 435px;
  margin: 1rem auto; 
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 1rem; 
  box-sizing: border-box;
  border: 2px solid #ddd;
}

.colonne-gauche {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  margin-left: 0;
}

.logo-carte {
  width: 100px;
  height: 100px;
  margin-bottom: 0;
  margin-left: 0;
  border-radius: 8px;
}

.colonne-droite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 300px;
  height: 100px;
  overflow: hidden;  

}

.colonne-droite h2 {
  line-height: 1; /* Interligne */
  font-size: 36px;
  font-weight: 900; /* 🔥 rend le texte gras */
  color: #222;
  margin: 1px 0 0 0; /* 🔽 10px en haut, 0 ailleurs */
  padding: 0;
}

.adresse {
  font-size: 18px; /* ou plus selon ton besoin */
  color: #222; /* couleur plus foncée si nécessaire */
  line-height: 1; /* Interligne */
  margin: 12px 0 0 0; /* 🔽 10px en haut, 0 ailleurs */
  padding: 0;  
}

.adresse::before {
  content: "📍 ";
}

.contenu-haut {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.1rem;
}

.telephone {
  font-size: 18px;
  font-weight: bold; /* 🔥 rend le texte gras */
  color: #222;
  margin: 3px 0 0 0; /* 🔽 10px en haut, 0 ailleurs */
}

.telephone::before {
  content: "📞 ";
}

.ligne-email {
  width: 100%;
  margin-top: 0; 
  padding-top: 0;
  text-align: left;
}

.email {
  font-size: 18px;
  font-weight: bold; /* 🔥 rend le texte gras */
  color: #222;
  margin: 3px 0 0 0; /* 🔽 10px en haut, 0 ailleurs */
}

.email::before {
  content: "✉️ ";
}

.ligne-web {
  width: 100%;
  margin-top: 0; 
  padding-top: 0;
  text-align: left;
}

.web {
  font-size: 18px;
  font-weight: bold; /* 🔥 rend le texte gras */
  color: #222;
  margin: 3px 0 0 0; /* 🔽 10px en haut, 0 ailleurs */
}

.web::before {
  content: "🌐 ";
}

/* Fin Carte de visite */

/* Début Horaires */
.encadre-droite {
  position: relative;
  font-size: 18px;
  width: 435px;
  margin: 1rem auto; 
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 1rem; 
  box-sizing: border-box;
  border: 2px solid #ddd;
}
/* Fin Horaires */