/* Style global */
html,body {
    background-color: #FFEFD5;
    margin: 0;
    padding: 0;
    color: #353433;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: Helvetica;
}


/* Conteneur du header */
.header-container {
    display: flex;
    align-items: center;
    padding: 18.75px 0px 71.25px 0px; /* 25px et 95px * 0.75 */
    margin: 25px 18px 30px; /* 20px et 25px * 0.75 */
    background: #bc7b50; /* Terracotta */
    border-radius: 7.5px; /* 10px * 0.75 */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* Réduction de l'ombre */
}

/* Logo du cabinet */
.logo-container {
    flex: 1;
}

.logo-img {
    max-width: 150px; /* 165px * 0.75 */
    border-radius: 50%;
    border: 2px solid #e5d5c5; /* 2px * 0.75 */
    margin: 0px 0 0 9px; /* 12px * 0.75 */
}

/* Style des liens du menu */
.menu {
    display: flex;
    gap: 15px; /* 15px * 0.75 */
    list-style: none;
    margin: 0 15px 0 0; /* 20px * 0.75 */
    padding: 0;
}

.menu li {
    position: relative;
}

.menu li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9em; /* 1em * 0.75 */
    font-family: Arial;
    background-color: rgba(188, 123, 80, 0.7);
    padding: 7.5px 11.25px; /* 10px et 15px * 0.75 */
    border-radius: 4.5px; /* 6px * 0.75 */
    border-bottom: solid #ffd5af;
    border-top: solid #ffd5af;
    transition: all 0.3s ease;
}

.menu li a:hover {
    background-color: #ffd5af; /* Caramel doux */
    color: #3b2d25;
}

/* Sous-menus */
.submenu {
    font-size: 0.9em; /* 1em * 0.75 */
    font-family: Arial;
    list-style: none;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffd5af;
    border-radius: 6px; /* 8px * 0.75 */
    padding: 0;
    margin: 13.5px 0; /* 18px * 0.75 */
}

.submenu li a {
    display: block;
    padding: 7.5px 4.5px; /* 10px et 6px * 0.75 */
    color: #3b2d25;
    background-color: #ffd5af;
    border-radius: 3px; /* 4px * 0.75 */
    transition: background-color 0.3s ease;
}

.submenu li a:hover {
    background-color: #89a873; /* Vert doux */
    color: #ffffff;
}

/* Icône burger */
.burger-icon {
    display: none;
    cursor: pointer;
    color: #13110f;
}

/* Ajoute une flèche à droite des éléments de menu avec sous-menus */
.has-submenu > a::after {
    content: "\25BE"; /* Flèche ▼ plus compatible */
    font-size: 1em; /* Taille normale */
    color: #ffffff;
    margin-left: 6px; /* Ajustement de l'espacement */
    display: inline-block; /* Permet un bon rendu */
    font-family: Arial, sans-serif; /* Assure la compatibilité */
    vertical-align: middle; /* Aligne correctement la flèche */
}



/* Ajuste la couleur et l'alignement de la flèche */
.menu li.has-submenu>a:hover::after {
    color: #6B4A2E; /* Couleur de la flèche au survol */
}

/* Responsive Design */
/* Téléphones */
@media (max-width: 767px) {
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        margin: 10px;
        height: auto;
        border-radius: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
.logo-img {
        max-width: 130px;
    }
.burger-icon {
        display: block;
    }
 .menu  {
    flex-direction: column;
    position: relative;
    gap: 20px;    /* Espace entre les onglets */
    font-size: 10px;
    margin: 10px 8px;
}
.navbar {
    display: none;
}

.navbar.active {
    display: block;
}
.menu li a {
    padding: 5px 8px;
    margin: 0;
}

.menu li {
    padding: 0;
    margin: 0;
}

.submenu {
    position: relative;
    margin: 12px 12px 0;
    padding: 6px;
}
}




/* Bannière page d'accueil */
.banniere {
    padding: 75px;
    margin: 18px;
    background-image: url('../Accueil/image page accueil.png');
    background-size: cover;
    background-position: center;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0px 3px 4.5px rgba(0, 0, 0, 0.2);
}

.banniere h1 {
    color: #3e3a38;
    font-size: 1.5em;
    font-family: Helvetica;
    font-weight: bold;
    text-shadow: 1.5px 1.5px 3.75px rgba(0, 0, 0, 0.7);
    margin: 7.5px 0 0 0;
}

/* Tablette (768px et moins) */
@media screen and (max-width: 768px) {
    .banniere {
        padding: 50px 30px;
        margin: 20px;
        height: 70px;
        border-radius: 5px;
    }

    .banniere h1 {
        font-size: 1.3em;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
        margin-top: 5px;
    }
}

/* Mobile (480px et moins) */
@media screen and (max-width: 480px) {
    .banniere {
        padding: 10px;
        margin: 12px;
        height: auto;
        min-height: 60px;
        border-radius: 4px;
    }

    .banniere h1 {
        font-size: 1.1em;
        line-height: 1.3;
        text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.5);
        margin: 5px 0;
    }
}

/* Petit mobile (360px et moins) */
@media screen and (max-width: 360px) {
    .banniere {
        padding: 20px 10px;
        margin: 5px;
        border-radius: 3px;
    }

    .banniere h1 {
        font-size: 1em;
        line-height: 1.2;
    }
}



/* Style du bouton "EN SAVOIR PLUS" et appel à l'action */
.btn-appel {
    display: inline-block;
    padding: 7.5px 15px;
    margin: 18.75px 0px 3.75px 0;
    background-color: #905f48;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3.75px;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap; /* Empêche le texte de passer sur plusieurs lignes */
}

.btn-appel:hover {
    background-color: #bc7b50;
    transform: scale(1.05);
}

/* Tablette */
@media screen and (max-width: 768px) {
    .btn-appel {
        padding: 10px 18px;
        margin: 15px 0 5px 0;
        font-size: 0.85em;
    }
}

/* Mobile */
@media screen and (max-width: 480px) {
    .btn-appel {
        padding: 8px 16px;
        margin: 12px 0 4px 0;
        font-size: 0.85em;
        transform: scale(0.95); /* Légère réduction globale */
    }

    .btn-appel:hover {
        transform: scale(0.97); /* Animation plus subtile */
    }
}

/* Petit mobile */
@media screen and (max-width: 360px) {
    .btn-appel {
        padding: 7px 14px;
        font-size: 0.78em;
    }
}



/* Section spécialités description */
.specialities-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin: 40px 20px;
}

.specialities-minimal {
    background-color: #ddead8;
    padding: 22.5px;
    border-radius: 9px;
    text-align: left;
    box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1;
}

.professional-photo {
    width: 240px;
    height: auto;
    border-radius: 9px;
}

.specialities-minimal h2 {
    display: inline-block;
    font-size: 1.2em;
    color: #87a97a;
    margin-bottom: 11.25px;
    text-transform: uppercase;
    border-bottom: 2.25px solid #96A27E;
}

.specialities-minimal p {
    font-size: 0.9em;
    color: #406145;
    margin-bottom: 18.75px;
    line-height: 1.2;
    text-align: justify;
}

.specialities-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.specialities-list li.groupe::marker {
    content: "•";
    font-size: 1.2rem;
    color: #adcea0;
    font-weight: bold;
}

.specialities-list li {
    margin-bottom: 11.25px;
    padding-left: 15px;
    position: relative;
    font-size: 0.95em;
    line-height: 1.2;
    color: #406145;
}

.specialities-list strong {
    color: #406145;
    font-weight: 600;
}


/* Responsive Tablet (768px et moins) */
@media screen and (max-width: 768px) {
    .specialities-container {
        flex-direction: column;
        gap: 25px;
        margin: 25px 10px;
    }
    
    .professional-photo {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        display: block;
    }
    
    .specialities-minimal {
        padding: 15px;
        border-radius: 7px;
    }
    
    .specialities-minimal h2 {
        font-size: 1.1em;
        margin-bottom: 9px;
    }
    
    .specialities-minimal p {
        font-size: 0.85em;
        line-height: 1.3;
        text-align: left;
    }
    
    .specialities-list li {
        font-size: 0.9em;
        padding-left: 12px;
    }
}

/* Responsive Mobile (480px et moins) */
@media screen and (max-width: 480px) {
    .specialities-container {
        margin: 20px 8px;
        gap: 20px;
    }
    
    .specialities-minimal {
        padding: 12px;
        border-radius: 5px;
    }
    
    .specialities-minimal h2 {
        font-size: 1em;
        border-bottom-width: 1.5px;
    }
    
    .specialities-minimal p {
        font-size: 0.82em;
        line-height: 1.4;
        margin-bottom: 15px;
    }
    
    .specialities-list li {
        font-size: 0.85em;
        margin-bottom: 8px;
        padding-left: 10px;
    }
    
    .specialities-list li.groupe::marker {
        font-size: 1em;
    }
}

/* Petit mobile (360px et moins) */
@media screen and (max-width: 360px) {
    .specialities-minimal {
        padding: 10px;
    }
    
    .specialities-minimal p {
        line-height: 1.5;
    }
    
    .specialities-list li {
        line-height: 1.3;
    }
}



/* Section des consultations en ligne */
.online-consultations {
    background-color: #ddead8; /* Fond doux mais subtil */
    padding: 22.5px; /* 30px * 0.75 */
    margin: 30px 15px 30px 15px; /* Réduction des marges */
    border-radius: 9px; /* 12px * 0.75 */
    text-align: left;
    box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.1); /* Ombre ajustée */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Titre principal des consultations en ligne */
.online-consultations h2 {
    font-size: 1.2em; /* 1.6rem * 0.75 */
    color: #87a97a; /* Vert vibrant pour attirer l'attention */
    margin-bottom: 11.25px; /* 15px * 0.75 */
    text-align: left;
    text-transform: uppercase;
    border-bottom: 2.25px solid #96A27E; /* 3px * 0.75 */
}

/* Paragraphe général */
.online-consultations p {
    font-size: 0.9em; /* 1.1rem * 0.75 */
    color: #406145; /* Vert foncé pour un contraste agréable */
    margin-bottom: 18.75px; /* 25px * 0.75 */
    line-height: 1.2; /* 1.6 * 0.75 */
    text-align: justify;
}

/* Classe .highlight pour mettre en valeur certains textes */
.highlight {
    color: #87a97a; /* Vert accentué pour attirer l'attention */
    font-weight: bold;
}

/* Lien de contact */
.contact-link {
    color: #87a97a;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1.5px solid #87a97a; /* 2px * 0.75 */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.contact-link:hover {
    color: #406145;
    border-bottom-color: #406145;
}


/* Citation */
.cadrequoteaccueil {
    background-color: #406145; /* Couleur de fond intense */
    color: #f9f5f0; /* Texte clair pour contraste */
    padding: 30px; /* 40px * 0.75 */
    margin: 30px auto; /* 40px * 0.75 */
    max-width: 600px; /* 800px * 0.75 */
    border-radius: 11.25px; /* 15px * 0.75 */
    box-shadow: 0 4.5px 9px rgba(0, 0, 0, 0.15); /* Ombre réduite */
    text-align: center;
    border: 2.25px solid #adcea0; /* 3px * 0.75 */
}

.quote-card {
    background: linear-gradient(145deg, #ffffff, #f4f1ea); /* Fond beige doux avec un relief subtil */
    color: #3d3b32; /* Couleur du texte principale */
    border: 1.5px solid #b38b6d; /* 2px * 0.75 */
    border-radius: 15px; /* 20px * 0.75 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), inset 0 1.5px 4.5px rgba(255, 255, 255, 0.5); /* Ombres réduites */
    padding: 21px; 
    margin: 50px auto; /* 50px * 0.75 */
    max-width: 550px; /* 700px * 0.75 */
    text-align: center;
}

/* Texte de la citation */
.quote-card .quote-content {
    font-size: 1.05em; /* 1.3rem * 0.75 */
    font-style: italic;
    line-height: 1.125; /* 1.5 * 0.75 */
    margin: 10px;
    position: relative;
}

/* Style pour l'auteur */
.quote-card .quote-content cite {
    display: block;
    margin-top: 6px; /* 8px * 0.75 */
    font-size: 0.9em; /* 1rem * 0.75 */
    font-weight: bold;
    color: #6d9b82; /* Vert doux pour l'auteur */
}

/* Style spécifique à la citation pour démarquer */
.quote-card .quote-content cite {
    font-style: normal;
    color: #b38b6d; /* Accent marron clair pour l'année */
}

/* Définir un élément graphique : guillemets décoratifs */
.quote-card .quote-content::before,
.quote-card .quote-content::after {
    content: '"';
    font-size: 3em; /* 4rem * 0.75 */
    color: #d2bba0; /* Beige foncé pour les guillemets */
    position: absolute;
    top: -26.25px; /* -35px * 0.75 */
}

.quote-card .quote-content::before {
    left: -18px; /* -28px * 0.75 */
}

.quote-card .quote-content::after {
    right: -7.25px; 
}


/* Adaptation mobile */
@media (max-width: 600px) {
    .quote-card {
        padding: 10px 16px 10px 16px;
        margin: 45px 10px;
    }

    .quote-card .quote-content {
        font-size: 1em;
    }

    .quote-card .quote-content cite {
        font-size: 1em;
    }
    .quote-card .quote-content::before, .quote-card .quote-content::after {
        content: '"';
        font-size: 3em;
        top: -22px;
}
}



/* Container style des services */
.bg-primary {
    background-color: #96A27E; /* Couleur douce */
    border-top: solid #f9f9f9 7.5px;
    border-bottom: solid #f9f9f9 7.5px;
    border-radius: 7.5px;
    padding: 15px;
  }
  
  .bg-secondary {
    display: flex;
    background-color: #96A27E;
    border-radius: 7.5px;
    padding: 15px;
    border-top: solid #f9f9f9 7.5px;
    border-bottom: solid #f9f9f9 7.5px;
    flex-direction: column;
    align-items: center;
  }
  
  /* Grille des items */
  .bg-primary .grid {
    display: flex;
    gap: 1em; /* Espacement */
    justify-content: center; /* Centre la grille */
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
  }
  
  .grid { /* bg-secondary */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes */
    gap: 15px;
    margin: 0 auto;
  }
  
  /* Item individuel */
  .bg-primary .item {
    border-radius: 7.5px;
    box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.1);
    flex-grow: 1;
    max-width: 320px; /* Largeur max */
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .item { /* bg-secondary */
    background: #ffffff;
    border-radius: 7.5px;
    box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.1);
    flex-grow: 1;
    max-width: 600px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Icônes */
  .icon-img {
    max-width: 65px;
    height: auto;
    margin: 15px 0 0;
  }
  
  /* Titre */
  .item h3 {
    font-size: 1.2em;
    color: #406145;
    margin-bottom: 10px;
  }
  
  /* Texte */
  .item p {
    font-size: 0.9em;
    line-height: 1.2;
    color: #3d3b32;
  }
  
  /* Responsive pour tablettes */
  @media (max-width: 768px) {
    .grid {
      grid-template-columns: repeat(1, 1fr); /* Une seule colonne */
    }
  
    .bg-primary .item, .item {
      max-width: 100%; /* Utilise toute la largeur disponible */
      margin: 10px 20px 15px; /* Ajoute un espace entre les items */
    }
  
    .icon-img {
      max-width: 50px; /* Réduit la taille des icônes */
    }
  
    .item h3 {
      font-size: 1rem; /* Réduction de la taille du titre */
    }
  
    .item p {
      font-size: 0.85rem; /* Réduction de la taille du texte */
    }
  }
  
  /* Responsive pour mobiles */
  @media (max-width: 480px) {
    .bg-primary, .bg-secondary {
      padding: 15px; /* Réduit les marges internes */
    }
  
    .grid {
      grid-template-columns: 1fr; /* Une seule colonne */
      gap: 10px; /* Espacement réduit */
    }
  
    .item {
      padding: 10px; /* Réduit les marges des items */
    }
  
    .icon-img {
      max-width: 45px; /* Réduction supplémentaire des icônes */
    }
  
    .item h3 {
      font-size: 0.9rem; /* Titre plus petit */
    }
  
    .item p {
      font-size: 0.8rem; /* Texte plus petit */
      line-height: 1.1; /* Ligne légèrement plus compacte */
    }
  }
  




/* Action 1 RDV */
.encadre-appel-action {
    background-color: #ddead8; /* Fond doux et clair */
    color: #3b2d25; /* Texte marron clair */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22.5px; /* Marges internes */
    max-width: 637.5px; /* Largeur max */
    margin: 22.5px auto; /* Centré */
    border-radius: 9px; /* Angles arrondis */
    box-shadow: 0 3px 7.5px rgba(0, 0, 0, 0.1); /* Ombre douce */
  }
  
  /* Texte dans l'encadré */
  .texte h2 {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 11.25px;
    color: #406145; /* Vert doux */
  }
  
  .intro {
    font-size: 0.9em;
    margin-bottom: 7.5px;
    line-height: 1.2;
    color: #406145;
  }
  
  .objectif ul {
    color: #406145;
    padding: 0 0 0 30px; /* Espacement pour la liste */
  }
  
  .objectif li {
    font-size: 0.9em;
    margin-bottom: 7.5px;
    padding: 0 0 0 7.5px; /* Espacement interne */
  }
  
  /* Responsive pour tablettes */
  @media (max-width: 768px) {
    .encadre-appel-action {
      padding: 18px; /* Réduction des marges internes */
      max-width: 90%; /* Largeur adaptée à l'écran */
    }
  
    .texte h2 {
      font-size: 1.1em; /* Légère réduction de la taille */
    }
  
    .intro, .objectif li {
      font-size: 0.85em; /* Texte légèrement plus petit */
    }
  
    .objectif ul {
      padding: 0 0 0 20px; /* Réduction de l'espacement pour les listes */
    }
  }
  
  /* Responsive pour mobiles */
  @media (max-width: 480px) {
    .encadre-appel-action {
      padding: 15px; /* Marges réduites */
      border-radius: 7px; /* Angles plus serrés */
      max-width: 390px;
    }
  
    .texte h2 {
      font-size: 1em; /* Réduction supplémentaire */
      margin-bottom: 10px; /* Espacement réduit */
    }
  
    .intro, .objectif li {
      font-size: 0.8em; /* Texte plus compact */
    }
  
    .objectif ul {
      padding: 0 0 0 15px; /* Réduction pour mobile */
    }
  }
  



/*Articles page d'accueil*/

/* Styles pour le conteneur de la bannière */
.banner-container {
    text-align: center;
    border-radius: 6px;
    box-shadow: 0px 3px 4.5px rgba(0, 0, 0, 0.1);
    margin: 25px 18px;
}

.banner-title {
    background-color: #96A27E;
    color: #ffffff;
    font-size: 1.5em;
    margin: 0px;
    padding: 20px;
    border-radius: 6px;
}

/* Carte articles */
.articles-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    background-color: #ddead8;
    padding: 20px;
    height: 290px;
    border-radius: 8px;
}

.article-card {
    width: 315px;
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 300px;
    transform-style: preserve-3d;
    transition: transform 2.5s;
    cursor: pointer;
}

.card-inner:hover {
    transform: rotateY(180deg);
}

.card-front {
    position: absolute;
    height: 250px;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: #fff;
}
.card-back {
    position: absolute;
    height: 208px;
    width: 87%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: #fff;
}

.card-front img {
    width: 70%;
    height: 60%;
    object-fit: cover;
    margin: 7.5px 0 0;
}

.card-front h3 {
    padding: 15px 5px;
    font-size: 1em;
    margin: 5px 0;
    color: #13110f;
    text-align: center;
}

.card-back {
    background-color: #333;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transform: rotateY(180deg);
}

.card-back p {
    margin: 10px 0;
    font-size: 1em;
}

.read-more {
    color: #a4c6a7;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}


/* Responsive Tablet (768px) */
@media screen and (max-width: 768px) {
    
    .banner-title {
        font-size: 1.3em;
        padding: 12px;
    }
    
    .articles-grid {
        flex-wrap: wrap;
        gap: 15px;
        height: auto;
    }
    
    .article-card {
        width: 100%;
        max-width: 350px;
    }
    
    .card-front img {
        width: 65%;
        height: 55%;
    }
    
    .card-back p {
        font-size: 0.9em;
    }
}

/* Responsive Mobile (480px) */
@media screen and (max-width: 480px) {
    
    .banner-title {
        font-size: 1.3em;
        padding: 12px;
    }
    .article-card {
        width: 100%;
        max-width: 365px;
    }
    
    .articles-grid {
        padding: 10px 0 20px;
        gap: 10px;
    }

    .card-inner {
        height: 270px;
        margin: 15px 0;
    }
    
    .card-front h3 {
        font-size: 1em;
        padding: 10px;
        margin: 0;
    }
    
    .card-front img {
        width: 85%;
        height: 75%;
    }
    
    .card-front {
        height: 300px;
        width: 350px;
        margin: -15px 0;
    }
    
    .card-back {
        height: 200px;
        width: 310px;
        margin: 12px;
    }
    
    .read-more {
        font-size: 0.85em;
    }
}







/* Encadré Me connaitre */
/* Encadré principal avec image en arrière-plan */
.encadre-1 {
    background-image: url('../Accueil/FondQJJ.jpg'); /* Chemin relatif depuis le fichier CSS */
    background-size: cover; /* L'image couvre toute la zone */
    background-position: center; /* Centre l'image */
    border-radius: 10px;
    padding: 20px;
    margin: 50px 20px 60px 20px;
    text-align: center;
    color: white; /* Texte blanc pour une bonne lisibilité */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Ajouter un filtre sombre pour améliorer la lisibilité */
.encadre-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place l'effet derrière le contenu */
}

/* Conteneur avec transparence pour le texte */
.transparence {
    background-color: rgba(0, 0, 0, 0.6); /* Filtre noir légèrement transparent */
    margin: 0 50px;
    padding: 15px;
    border-radius: 8px; /* Arrondi des bords */
}

/* Titre de l'encadré */
.transparence h2 {
    font-size: 2rem; /* Taille adaptée pour le titre */
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Texte */
.transparence p {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsive pour tablettes */
@media (max-width: 768px) {
    .encadre-1 {
        margin: 35px 10px 45px;
        padding: 15px;
    }

    .transparence {
        margin: 0 20px; /* Réduction des marges intérieures */
        padding: 12px;
    }

    .transparence h2 {
        font-size: 1.6rem; /* Réduction de la taille du titre */
    }

    .transparence p {
        font-size: 1rem; /* Réduction de la taille du texte */
    }
}

/* Responsive pour mobiles */
@media (max-width: 480px) {
    .encadre-1 {
        margin: 35px 10px 45px; /* Marges plus petites pour les mobiles */
        padding: 10px;
    }

    .transparence {
        margin: 0 10px; /* Réduction des marges intérieures */
        padding: 10px;
    }

    .transparence h2 {
        font-size: 1.4rem; /* Taille du titre encore réduite */
    }

    .transparence p {
        font-size: 0.9rem; /* Taille du texte réduite pour la lisibilité */
        line-height: 1.4;
    }
}


/* Bannière Page QSJ */
/* Bannière principale */
.banner {
    background-color: #F2E4D3; /* Couleur de fond douce et chaleureuse */
    color: #fff; /* Couleur par défaut du texte (non utilisée dans les sous-éléments) */
    text-align: center;
    padding: 20px; /* Ajout d'un espace équilibré autour du contenu */
    margin: 18px; /* Marges uniformes */
    border-radius: 8px; /* Arrondi des bords légèrement augmenté */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Ajout d'une ombre douce */
    position: relative;
}

/* Titre de la bannière */
.banner h1 {
    color: #c88459; /* Couleur chaude et accueillante */
    font-size: 2em; /* Taille adaptée pour les grands écrans */
    margin: 15px 0; /* Marges haut et bas pour espacer du contenu */
    line-height: 1.4; /* Amélioration de la lisibilité */
}

/* Texte dans la bannière */
.banner p {
    font-size: 1.1em; /* Taille de texte agréable pour les écrans larges */
    color: #333; /* Couleur contrastante pour le texte */
    margin-top: 10px; /* Espacement entre le titre et le paragraphe */
    line-height: 1.6; /* Lisibilité améliorée */
    text-align: center;
}

/* Responsive pour tablettes */
@media (max-width: 768px) {
    .banner {
        padding: 15px; /* Réduction de l'espace autour du contenu */
        margin: 15px; /* Réduction des marges */
        border-radius: 6px; /* Réduction de l'arrondi */
    }

    .banner h1 {
        font-size: 1.6rem; /* Taille réduite pour s'adapter aux écrans moyens */
        margin: 10px 0;
    }

    .banner p {
        font-size: 1rem; /* Taille réduite pour le texte */
        margin-top: 8px;
    }
}

/* Responsive pour mobiles */
@media (max-width: 480px) {
    .banner {
        padding: 10px; /* Réduction encore plus importante pour les petits écrans */
        margin: 25px 12px; /* Marges minimisées */
        border-radius: 4px; /* Bords légèrement arrondis */
    }

    .banner h1 {
        font-size: 1.4em; /* Taille ajustée pour les petits écrans */
        margin: 8px 0;
    }

    .banner p {
        font-size: 0.9rem; /* Texte adapté aux écrans plus petits */
        margin-top: 5px;
        line-height: 1.4; /* Lisibilité toujours priorisée */
    }
}





/* Cadre principal de la page d'accueil */
.introductionpage {
    border-radius: 6px; /* Bords légèrement arrondis */
    padding: 5px 15px; /* Espaces équilibrés autour du contenu */
    margin: 15px 15px 30px; /* Marges uniformes */
    background-color: #f9f5f0; /* Couleur douce et neutre pour un effet chaleureux */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Ombre douce pour la profondeur */
}

/* Cadre secondaire */
.introductioncadre {
    background-color: #fff; /* Fond blanc pour contraster avec le cadre principal */
    padding: 15px;
    margin: 15px 0;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}

/* Titres des cadres */
.introductioncadre h2 {
    font-size: 1.6em; /* Taille adaptée aux écrans larges */
    color: #3b2d25; /* Couleur contrastante et élégante */
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Texte des cadres */
.introductioncadre p {
    font-size: 1em; /* Taille de texte lisible sur écran large */
    color: #905f48; /* Couleur chaleureuse */
    margin: 10px; /* Espacement interne pour aérer */
    line-height: 1.5; /* Amélioration de la lisibilité */
}

/* Responsive pour tablettes */
@media (max-width: 768px) {
    .introductionpage {
        padding: 10px 12px; /* Réduction des espaces pour les écrans moyens */
        margin: 12px 12px 20px; /* Ajustement des marges */
    }

    .introductioncadre {
        padding: 12px;
        margin: 10px 0;
        border-radius: 5px; /* Bords légèrement réduits */
    }

    .introductioncadre h2 {
        font-size: 1.4em; /* Taille ajustée pour les tablettes */
        margin-bottom: 12px;
    }

    .introductioncadre p {
        font-size: 1em; /* Taille réduite pour les écrans moyens */
        margin: 8px;
        line-height: 1.4; /* Lisibilité priorisée */
    }
}

/* Responsive pour mobiles */
@media (max-width: 480px) {
    .introductionpage {
        padding: 8px 10px; /* Réduction supplémentaire pour les petits écrans */
        margin: 10px 10px 15px; /* Marges plus compactes */
    }

    .introductioncadre {
        padding: 10px;
        margin: 8px 0;
        border-radius: 4px; /* Bords légèrement arrondis */
    }

    .introductioncadre h2 {
        font-size: 1.2em; /* Taille adaptée aux petits écrans */
        margin-bottom: 10px;
    }

    .introductioncadre p {
        font-size: 0.95em; /* Texte réduit pour les petits écrans */
        margin: 5px;
        line-height: 1.3; /* Maintien de la lisibilité */
    }
}





/* Bannière FAQ principale */
.page-question {
    background-color: #96A27E; /* Couleur douce et naturelle */
    color: #fff; /* Texte blanc pour un bon contraste */
    text-align: center; /* Centrage du contenu */
    padding: 20px; /* Espacement équilibré */
    margin: 20px 18px; /* Marges adaptées */
    border-radius: 10px; /* Bords arrondis pour un effet moderne */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce pour la profondeur */
}

/* Titre de la bannière FAQ */
.faq-header h1 {
    margin: 0;
    font-size: 2em; /* Taille importante pour attirer l'attention */
    font-weight: 700; /* Texte en gras pour le titre principal */
    line-height: 1.4; /* Espacement entre les lignes */
}

/* Sous-titre ou description */
.faq-header p {
    font-size: 1.1em; /* Taille légèrement augmentée pour améliorer la lisibilité */
    margin-top: 12px; /* Espacement pour séparer du titre */
    line-height: 1.5; /* Amélioration de la lisibilité */
}

/* Responsive pour tablettes */
@media (max-width: 768px) {
    .page-question {
        padding: 15px; /* Réduction des espaces pour les écrans moyens */
        margin: 25px 12px; /* Ajustement des marges */
        border-radius: 8px; /* Légère réduction des coins arrondis */
    }

    .faq-header h1 {
        font-size: 1.6em; /* Taille réduite pour tablettes */
    }

    .faq-header p {
        font-size: 1em; /* Taille du texte adaptée */
    }
}

/* Responsive pour mobiles */
@media (max-width: 480px) {
    .page-question {
        padding: 12px; /* Espacement plus compact pour petits écrans */
        margin: 25px 12px; /* Marges réduites */
        border-radius: 6px; /* Coins arrondis légèrement réduits */
    }

    .faq-header h1 {
        font-size: 1.4em; /* Taille plus petite pour les petits écrans */
        line-height: 1.3; /* Espacement ajusté pour éviter les débordements */
    }

    .faq-header p {
        font-size: 0.9em; /* Réduction de la taille pour les descriptions */
        margin-top: 8px; /* Espacement réduit pour un rendu compact */
    }
}



/* Styles pour la navigation locale */
.navconsultation {
    background-color: #96A27E; /* Couleur principale */
    padding: 10px 15px; /* Espacement équilibré pour une meilleure lisibilité */
    margin: 20px 15px; /* Marges adaptées */
    border-radius: 8px; /* Bords arrondis pour un design moderne */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce pour la profondeur */
    text-align: center;
}

/* Liste de navigation */
.navconsultation ul {
    list-style: none; /* Suppression des puces */
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Permet de gérer les petits écrans */
    justify-content: center; /* Centrage des éléments */
    gap: 1em; /* Espacement harmonieux entre les liens */
}

/* Élément de la liste */
.navconsultation li {
    padding: 10px 15px; /* Espacement confortable */
    border-radius: 5px; /* Légers bords arrondis */
    transition: background-color 0.3s ease; /* Animation pour le survol */
}

/* Liens de navigation */
.navconsultation a {
    text-decoration: none; /* Suppression du soulignement */
    color: white; /* Texte blanc pour un contraste élevé */
    font-weight: bold; /* Accentuation du texte */
    font-size: 1.1em; /* Taille adaptée */
    border-radius: 5px; /* Coins légèrement arrondis */
    transition: color 0.3s ease; /* Animation pour une meilleure expérience utilisateur */
}

/* Effet de survol */
.navconsultation li:hover {
    background-color: rgba(188, 123, 80, 0.9); /* Couleur contrastée pour le survol */
}

/* Responsive pour tablettes */
@media (max-width: 768px) {
    .navconsultation {
        padding: 10px; /* Réduction des marges pour les écrans moyens */
        margin: 15px 10px; /* Ajustement des espaces */
        border-radius: 6px; /* Coins légèrement réduits */
    }

    .navconsultation ul {
        gap: 0.8em; /* Espacement légèrement réduit entre les éléments */
    }

    .navconsultation a {
        font-size: 1em; /* Taille du texte légèrement réduite */
    }
}

/* Responsive pour mobiles */
@media (max-width: 480px) {
    .navconsultation {
        padding: 8px; /* Espacement compact pour les petits écrans */
        margin: 10px 5px; /* Marges réduites */
        border-radius: 5px; /* Coins arrondis réduits */
        margin: 25px 12px;

    }

    .navconsultation ul {
        flex-direction: column; /* Organisation verticale pour les petits écrans */
        gap: 0.5em; /* Espacement réduit entre les éléments */
    }

    .navconsultation li {
        padding: 8px 10px; /* Espacement plus compact */
        border-bottom: solid 1px white;
    }

    .navconsultation a {
        font-size: 0.9em; /* Taille du texte adaptée aux petits écrans */
    }
}



/* Pied de page */
footer {
    background-color: #bc7b50; /* Couleur de fond */
    color: #ffffff; /* Texte blanc */
    padding: 15px 0;
    border-top: 2.25px solid #13110f;
    margin-top: 30px;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* S'adapte automatiquement */
    padding: 7.5px 15px;
    text-align: center; /* Centre les éléments par défaut */
    gap: 15px; /* Espacement entre les colonnes */
}

.footer-container > div {
    margin: 7.5px;
    flex: 1 1 200px; /* Largeur minimale pour chaque bloc */
    max-width: 300px; /* Limite la largeur des colonnes */
}

.contact-details, .opening-hours, .social-media {
    text-align: center;
}

.contact-details h4, .opening-hours h4, .social-media h4 {
    margin-bottom: 7.5px;
    font-size: 1.3em;
    text-transform: uppercase;
    border-bottom: 0.75px solid #ffffff;
    display: inline-block;
    padding-bottom: 3.75px;
}

.footer-container p {
    margin: 3.75px 0;
    font-size: 1em;
    line-height: 1.3;
}

.footer-bottom {
    text-align: center;
    padding: 7.5px 0;
    border-top: 0.75px solid #ffffff;
    font-size: 0.9em;
    margin: 20.25px 0 3.75px;
}

.footer-bottom p {
    margin: 0;
}

/* Adresse email */
.contact-details a {
    text-decoration: none;
    color: #ffffff;
}

.contact-details a:hover {
    color: #905f48;
    text-decoration: underline;
}

/* Réseaux sociaux */
.social-media a {
    margin: 0 7.5px;
    display: inline-block;
    color: #ffffff;
    font-size: 1.1em;
    text-decoration: none;
}

.social-media a img {
    display: inline-block;
    width: 30px;
    height: 30px;
    filter: invert(1);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.social-media a img:hover {
    filter: brightness(0) saturate(100%) invert(37%) sepia(56%) saturate(357%) hue-rotate(334deg) brightness(95%) contrast(91%);
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) { /* Tablettes */
    .footer-container {
        flex-direction: column; /* Colonnes en ligne */
        align-items: center;
        gap: 10px; /* Réduction de l'espacement */
    }

    .footer-container > div {
        flex: 1 1 auto; /* Colonnes flexibles */
        max-width: 100%; /* S'étend sur toute la largeur */
    }

    footer {
        padding: 15px; /* Plus d'espace pour petits écrans */
    }

    .footer-bottom {
        font-size: 0.8rem; /* Légèrement plus grand pour plus de lisibilité */
    }
}

@media (max-width: 480px) { /* Mobiles */
    .footer-container {
        gap: 7.5px; /* Réduction de l'espacement */
    }

    .footer-container > div {
        margin: 5px 0; /* Moins d'espace entre les blocs */
    }

    .social-media a img {
        width: 30px; /* Réduction des icônes */
        height: 30px;
    }

   
    footer {
        padding: 10px 0; /* Réduction du padding global */
    }

    .footer-bottom {
        font-size: 0.8em; /* Réduction de la taille du texte */
    }
}