/* Fond parchemin et taille de police globale */
body.bg-parchment {
    background-color: #ffffff;
    font-size: 1.4em;
}

/* Couleurs personnalisées */
.bg-brown {
    background-color: #6e4b1f;
}

/* Couleur des liens internet et emails*/
a[href^="http://"],
a[href^="https://"],
a[href^="mailto:"] {
    color: #337ab7;
    text-decoration: none;
}

/* État au survol des liens internet et emails*/
a[href^="http://"]:hover,
a[href^="https://"]:hover,
a[href^="mailto:"]:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Style spécifique pour les liens téléphoniques */
a[href^="tel:"] {
    color: #000;
    text-decoration: none;
}

/* État au survol des liens téléphoniques */
a[href^="tel:"]:hover {
    color: #337ab7;
    cursor: pointer;
    text-decoration: underline;
}

/* Section liens avec icônes */
div#liens {
    background-color: #c6a530;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    font-size: 0.8em;
}

/* Supprime tout le padding par défaut du conteneur pour que #top-bar soit aligné aux bords de la fenêtre */
#top-bar,
#top-bar.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Conteneur flex pour les liens */
div#liens div {
    color: #000000;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* Suppression des marges par défaut des paragraphes */
div#liens p {
    margin: 0;
}

/* Images des icônes */
div#liens img {
    height: auto;
    object-fit: contain;
    /* Effet de décalage vers le haut sur les icônes au survol */
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* Taille des icônes sauf celle du bouton devis */
div#liens img:not(#btn-devis-img) {
    width: 4rem;
}

/* Image du bouton devis */
#btn-devis-img {
    width: 200px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Effet de décalage vers le haut sur les icônes au survol, sauf pour le bouton devis */
div#liens img:not(#btn-devis-img):hover {
    transform: translateY(-10px);
}

/* Transition pour les bannières avec effet de zoom */
img.zoom-hover {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Effet de zoom au survol des bannières */
img.zoom-hover:hover {
    transform: scale(1.2);
    z-index: 2;
}

/* Navbar */
.navbar {
    background-color: #502D12;
    border-bottom: 2px solid #c2a97e;
    align-items: center; /* Forcer l'alignement vertical du navbar et de son contenu */
}

/* S'assurer que le conteneur principal de la navbar utilise flex pour aligner les éléments */
#navbar .container-fluid {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* S'assurer que la marque et la nav occupent la même ligne et sont centrées */
#navbar .navbar-brand,
#navbar .navbar-nav {
    display: flex;
    align-items: center;
}

/* Décaler le logo vers la gauche : supprimer les marges Bootstrap "mx-3" par défaut
   et laisser le reste du menu occuper l'espace restant à droite. */
#navbar .navbar-brand {
    margin-left: 0;
    margin-right: auto;
}
/* Petite marge pour la marque mobile (visible uniquement sur petits écrans) */
#navbar .navbar-brand.d-inline-block.d-lg-none {
    margin-left: 0.5rem;
}
/* S'assurer que l'image du logo ne rajoute pas d'espace à gauche */
#navbar-logo {
    margin-left: 0;
}

/* Ajuster légèrement le padding des liens pour un meilleur centrage visuel */
#navbar .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1.2;
}

/* Logo dans la navbar : limiter la hauteur et conserver le ratio */
#navbar-logo {
    max-height: 48px; /* ajuste selon vos goûts */
    width: auto;
    display: inline-block; /* garde l'image en ligne */
    vertical-align: middle; /* S'assurer que l'image du logo est alignée verticalement au centre */
}

/* Logo affiché uniquement dans le menu mobile (petite taille, aligné à gauche) */
#navbar-logo-mobile {
    max-height: 40px;
    width: auto;
    display: inline-block;
}

/* Couleur des liens de navigation */
.navbar-dark .navbar-nav .nav-link {
    color: #f5f5dc;
}

/* État actif et au survol des liens de navigation */
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-color: #ffffff;
}

/* Enlève les puces dans le menu de navigation */
nav .navbar-nav,
nav .navbar-nav li {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Puces rondes personnalisées
   - on positionne la puce en relative et on ajoute un padding-left au li
     pour que les lignes suivantes (retours à la ligne) commencent
     bien après la puce (hanging indent). */
ul li {
    position: relative;
    padding-left: 1.6rem; /* espace réservé à la puce + gap */
}

/* Grossir toutes les puces rondes */
#cadre-formations li::marker,
#prestations-list li::marker,
#cadre-qualite li::marker {
    font-size: 1.5em;
}

/* Style des puces rondes personnalisées, sauf pour les éléments avec la classe nav-item
   - la puce est en position absolue (dans le padding-left du li) pour permettre
     au texte sur plusieurs lignes d'être correctement indenté. */
ul li:not(.nav-item):before {
    content: '';
    display: block;
    width: 0.45em;
    height: 0.45em;
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    left: 0.2rem; /* position horizontale dans le padding-left du li */
    top: 0.45em; /* ajusté : remonte légèrement la puce pour alignement avec la ligne de texte */
}

/* Enlève les puces et ajoute un retrait aux listes */
ul {
    list-style: none;
    padding-left: 1.2rem;
}

/* Bouton personnalisé */
.btn-brown {
    background-color: #6e4b1f;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 8px;
}

/* État au survol du bouton */
.btn-brown:hover,
.btn-brown:focus {
    background-color: #5a3c17;
    color: #c6a530; /* texte devient doré au survol/focus */
}

/* Logo (en-tête et bas de page) : même taille */
#header-image,
#bottom-image {
    max-width: 200px; /* taille maximale desktop commune */
    width: auto; /* ne pas remplir le conteneur : conserver la taille naturelle */
    height: auto;
    display: block;
    margin: 2rem auto 0 auto; /* centrer horizontalement et espacement au-dessus */
    transition: transform 0.7s cubic-bezier(.4,1.4,.6,1.0);
}

/* Règles spécifiques au lien du logo pour garantir centré + h1 dessous */
#header-link {
    display: block;      /* block garantit que le lien occupe seulement la largeur de l'image */
    width: fit-content;
    margin: 0 auto;      /* centre le lien */
    text-align: center;  /* centre tous les enfants en ligne */
}

/* rendre explicite et centrer l'image à l'intérieur du lien */
#header-link > #header-image {
    display: block;
    width: auto;
    max-width: 180px; /* correspond à la taille maximale du logo existant */
    margin: 3rem auto 0 auto; /* ajoute de l'espace au-dessus et centre */
}

/* Assure que le texte de bienvenue est centré et commence sous le logo */
#welcome-text {
    display: block;
    text-align: center;
    margin-top: 1rem; /* ajuste l'espacement si besoin */
}

/* Forcer le lien du logo à n'occuper que l'espace de l'image
   et s'assurer que le titre (#welcome-text) commence sur la ligne suivante */
header .text-center > a {
    display: inline-block; /* shrink-wrap reliably across browsers */
    margin: 0; /* centering handled by parent .text-center (text-align:center) */
}

/* Effet de lévitation au survol du logo */
#header-image:hover,
#bottom-image:hover {
    transform: translateY(-15px);
}

/* Texte de bienvenue avec ombre */
#welcome-text {
    font-size: 3em;
    color: #5a3c17;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

/* s'assurer que le h1 démarre sur une nouvelle ligne */
#welcome-text {
    clear: both;
    display: block;
}

/* Décaler légèrement le bloc d'informations de contact vers la droite
   On utilise margin-left */
#informations-contact {
    margin-left: 3.5rem;
    margin-right: 0;
}

/* Bloc d'introduction */
#intro-section {
    padding: 0 1rem 1rem 1rem;
    max-width: 1100px;
    margin: 0 auto 2.5rem auto;
    border-radius: 10px;
}

/* Texte d'introduction */
#intro-text {
    color: #444;
    line-height: 1.7;
    max-width: 1500px;
    margin: 0 auto;
}

/* Espacement entre les paragraphes dans le texte d'introduction */
#intro-text p {
    margin-bottom: 1.1rem;
}

/* Bouton rendez-vous */
#btn-rdv {
    font-size: 1.3em;
    letter-spacing: 1px;
    padding: 0.8rem 2.2rem;
    display: inline-block;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Image du bouton rendez-vous */
#btn-rdv-img {
    max-width: 340px;
    width: 100%;
    height: auto;
    vertical-align: middle;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Taille, couleur et marge de dessous des sous-titres h2 */
section h2 {
    font-size: 2.5em;
    color: #c6a530;
    margin-bottom: 2.5rem;
}

/* Taille, couleur et marge de dessous des sous-titres h3 */
section h3 {
    font-size: 1.6em;
    color: #5a3c17;
    margin-bottom: 1rem;
}

/* Taille des sous-titres h4 */
section h4 {
    font-size: 1.4em;
}

/* Taille des sous-titres h5 */
section h5 {
    font-size: 1.3em;
}

/* Conteneur des cadres formations et image */
#cadre-formations {
    border-radius: 14px;
    transform: rotate(-3deg);
    transition: transform 0.4s;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-top: 12px;
    max-width: 520px;
    width: 100%;
    margin-right: 1rem;
}

/* Cadre incliné pour le texte des formations */
#cadre-incline-formations {
    border: 4px dashed #ffe066;
    border-radius: 12px;
    max-width: 560px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
    height: 100%; /* s'étire pour égaler la hauteur de la colonne */
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem 0 1.5rem; /* padding horizontal seulement */
}

/* Puces rondes et retrait pour la liste dans cadre-incline */
#cadre-incline-formations ul {
    margin-left: 1.2rem;
    padding-left: 0.5rem;
}

/* Cadre de l'image des livres et parchemins */
#cadre-img-livres-parchemins {
    border-radius: 14px;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-top: 12px;
    background: none;
    max-width: 560px; /* comme le cadre de gauche */
    margin-left: 1rem;
}

/* Image des livres et parchemins */
#img-livres-parchemins {
    max-width: 560px; /* comme le cadre de gauche */
    width: 100%;
    height: auto; /* ne s'étire plus sur toute la hauteur */
    max-height: 620px; /* limite la hauteur visuelle */
    min-height: 260px;
    object-fit: cover;
    transform: rotate(3deg);
    transition: transform 0.4s;
    border-radius: 12px;
    margin-top: 1rem; /* abaisse légèrement l'image */
    align-self: center; /* centre verticalement dans la colonne */
}

/* Effet de rotation au survol du cadre formations */
#cadre-incline-formations:hover {
    transform: rotate(3deg);
    transition: transform 0.5s ease;
}

/* Effet de rotation au survol de l'image des livres et parchemins */
#img-livres-parchemins:hover {
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}

/* Section prestations */
#prestations-section {
    background: #7a5a3a;
    color: #fff;
    border-radius: 8px;
    padding: 3rem 1.5rem;
    margin: 6rem 6vw;
}

/* Supprime les marges et le padding externes autour de la liste et augmente l'espace entre les deux cadres */
#prestations-list {
    margin: 0; /* supprime les marges externes */
    padding: 0; /* supprime le padding interne */
    display: flex; /* utilise flex pour permettre le gap sur toutes les tailles */
    flex-wrap: wrap; /* autorise l'empilement sur petits écrans */
    justify-content: center; /* centre horizontalement */
    align-items: flex-start;
    gap: 3rem; /* espace plus grand entre les deux cadres sur grands écrans */
    box-sizing: border-box;
}

/* Titre des prestations */
#prestations-section h3 {
    color: #c6a530;
}

/* Texte d'introduction des prestations */
#intro-prestations {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 1.2rem;
}

/* Cadre des prestations */
.prestations-cadre {
    border: 1.5px dashed #ffe066;
    border-radius: 12px;
    padding: 1.2rem 1.5rem 1.2rem 2.2rem;
    margin-bottom: 0;
    margin-top: 0;
    background: none;
}

/* Réduction du diamètre des puces dans la section prestations */
.prestations-cadre li::marker {
    font-size: 0.7em;
}

/* Espace horizontal augmenté entre les deux cadres (formations / image) */
.cadres-spacing-lg {
    column-gap: 10rem; /* écart horizontal accru entre les colonnes */
}

/* Harmonisation hauteur et espacement pour la paire parchemins/qualité */
#cadre-img-parchemins,
#cadre-qualite {
    height: 100%;
    min-width: 320px;
    max-width: 560px;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: none;
    border-radius: 14px;
    overflow: visible; /* Pour éviter que l'inclinaison ne coupe le contenu */
}

/* Cadre qualité */
#cadre-qualite {
    margin-left: 1rem;
}

/* Cadre incliné pour le texte qualité */
#cadre-incline-qualite {
    border: 4px dashed #ffe066;
    border-radius: 12px;
    box-sizing: border-box;
    font-size: 1em;
    height: 100%; /* s'étire pour égaler la hauteur de l'image */
    flex-direction: column;
    padding: 0; /* pas de padding ici, géré par le cadre interne */
}

/* Effet de rotation au survol du cadre qualité */
#cadre-incline-qualite:hover {
    transform: rotate(-3deg);
    transition: transform 0.5s ease;
}

/* Image des parchemins */
#img-parchemins {
    width: 100%;
    max-width: 620px;
    max-height: 720px;
    min-height: 260px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0;
    align-self: center;
}

/* Effet de rotation au survol de l'image des parchemins */
#img-parchemins:hover {
    transform: rotate(3deg);
    transition: transform 0.5s ease;
}

/* Inclinaison pour la paire parchemins/qualité */
#cadre-img-parchemins {
    margin-right: 1rem;
    transform: rotate(-3deg);
    transition: transform 0.4s;
}
#cadre-qualite {
    transform: rotate(3deg);
    transition: transform 0.4s;
}

/* Retrait réduit pour la liste dans cadre-qualite */
#cadre-qualite ul {
    list-style-position: inside;
    margin-left: 0.5em;
    padding-left: 0.5em;
}

/* Titre dans le cadre qualité */
#cadre-qualite h3 {
    color: rgba(198, 165, 48, 1);
}

/* Premier paragraphe dans le cadre qualité */
#cadre-qualite p:first-of-type {
    font-size: 1.3em;
}

/* Image de la bannière */
/* Bouton tarifs : centré et adaptatif */
#btn-tarifs {
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

/* Image de la bannière */
#btn-tarifs-img {
    max-width: 320px;
    width: 100%;
    height: auto;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Section galerie */
#gallery-section {
    margin-top: 9rem;
}

/* Galerie (règles compactes)
   - wrapper plein écran (full-bleed)
   - wrapper d'item : overflow, arrondi, centrage et hauteur uniforme
   - image : deux cas gérés : images "dans wrapper" (vignettes recadrées) et images générales
   - effets : ombre sur le wrapper, zoom sur l'image
*/
#gallery {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}

/* Wrapper de chaque vignette : overflow pour le clipping, arrondi et taille uniforme */
#gallery .gallery-img-wrapper {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    height: 220px; /* desktop : hauteur des vignettes */
}

/* Images contenues dans les vignettes : remplissent le wrapper et sont recadrées */
#gallery .gallery-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit; /* hérite de l'arrondi du wrapper */
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}

/* Images générales à l'intérieur de #gallery (hors wrapper) : conservent max-width et ratio */
#gallery img {
    width: 100%;
    max-width: 700px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}

/* Indiquer que les vignettes sont cliquables */
#gallery-section img,
#gallery img,
#gallery .gallery-img-wrapper img {
    cursor: pointer;
}

/* Ombre sur le wrapper au survol + zoom sur l'image */
#gallery .gallery-img-wrapper:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
#gallery .gallery-img-wrapper img:hover,
#gallery img:hover {
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* Styles pour la modale d'image */
.image-modal {
    position: fixed;
    inset: 0;
    display: none; /* visible uniquement lorsque la modale n'est pas active */
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* État ouvert de la modale */
.image-modal.open {
    display: flex;
    animation: modal-show 240ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* État de fermeture de la modale */
.image-modal.closing {
    display: flex;
    animation: modal-hide 180ms ease forwards;
}

/* Animations pour l'ouverture de la modale */
@keyframes modal-show {
    0%   { opacity: 0; transform: scale(0.97); }
    70%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* Animations pour la fermeture de la modale */
@keyframes modal-hide {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.98); }
}

/* Overlay de la modale */
.image-modal-overlay {
    transition: opacity 240ms ease;
    opacity: 0;
}
/* État ouvert de l'overlay de la modale */
.image-modal.open .image-modal-overlay {
    opacity: 1;
}

/* État fermé de l'overlay de la modale */
.image-modal.closing .image-modal-overlay {
    opacity: 0;
}

/* Styles internes de la modale d'image */
.image-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

/* Contenu de la modale d'image */
.image-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    padding: 0.5rem;
    z-index: 2010;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image dans la modale */
.image-modal-content img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    display: block;
}

/* Bouton de fermeture de la modale */
.image-modal-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: background-color 180ms ease, color 180ms ease, transform 160ms ease;
}

/* SVG à l'intérieur du bouton de fermeture */
.image-modal-close svg {
    display: block;
    width: 18px;
    height: 18px;
    color: #333; /* couleur par défaut du trait via currentColor */
}

/* Effet de survol pour le SVG du bouton de fermeture */
.image-modal-close:hover svg {
    color: #fff; /* le trait devient blanc lors du survol */
}

/* Contour de focus pour l'accessibilité */
.image-modal-close:focus {
    outline: 2px solid #c6a530;
}

/* Survol : bouton rouge avec texte blanc */
.image-modal-close:hover {
    background-color: #c0392b; /* rouge chaud */
    color: #ffffff;
    transform: translateY(-2px);
}

/* Empêche le scroll du body lorsque la modale est ouverte */
body.modal-open {
    overflow: hidden;
}

/* Image en bas de page : marge spécifique */
#bottom-image {
    margin: 2.5rem auto 0 auto; /* espace au-dessus dans le footer */
}

/* Conteneur du bas de page : espace entre ce bloc et le footer */
#img-bottom {
    display: flex; /* respecter les utilitaires Bootstrap déjà présents */
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto 1.2rem auto; /* top / horizontal / bottom */
}

/* Section des mentions légales */
#mentions-legales {
    background: #bdbdbd;
    color: #222;
    padding: 2rem 1rem;
}

/* Titre des mentions légales */
#mentions-legales-title {
    font-size: 1.7em;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 1.5rem;
}

/* Styles pour la section des mentions légales */
#mentions-legales div {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #bdbdbd;
    color: #333333;
}

/* Titres dans les mentions légales */
#mentions-legales h1 {
    font-size: 30px;
}

/* Règles d'images communes (nettoyage : centralise les propriétés partagées)
   - largeur pleine, hauteur auto, affichage bloc et marges réinitialisées
   - chaque sélecteur garde son `max-width` individuel ci-dessous */
#img-btn-rdv,
#img-prestations-particuliers,
#img-agrement,
.img-consultez-tarifs,
#img-contactez-moi,
#img-prestations-domicile,
#img-recit-de-vie,
#img-prestations-proposees-professionnels,
#img-prestations-complementaires-professionnels,
#img-prestations-complementaires-professionnels-2,
#img-collectivites-locales {
    width: 100%;
    height: auto;
    display: block;
    margin-left: 0;
    margin-right: 0;
}

/* Forcer le centrage des images-boutons spécifiques (override marges précédentes) */
.img-consultez-tarifs,
#img-btn-rdv {
    margin-left: auto;
    margin-right: auto;
}

/* Tailles individuelles des images */
/* Image du bouton rendez-vous */
#img-btn-rdv {
    max-width: 220px;
}

/* Images des prestations */
#img-prestations-particuliers {
    max-width: 420px; /* augmenté pour agrandir la vignette des prestations particulières */
}

/* Image de l'agrément */
#img-agrement {
    max-width: 320px; /* augmenté pour agrandir l'icône d'agrément tout en restant responsive */
}

/* Image consultez les tarifs */
.img-consultez-tarifs {
    max-width: 220px;
}

/* Image contactez-moi */
#img-contactez-moi {
    max-width: 220px;
    margin-bottom: 1rem;
    /* léger décalage vers la droite */
    margin-left: 20px;
}


/* Images des prestations diverses */
#img-prestations-domicile {
    max-width: 480px; /* agrandi encore un peu comme demandé */
}

/* Image récit de vie */
#img-recit-de-vie {
    max-width: 320px;
}

/* Images des prestations pour professionnels */
#img-prestations-proposees-professionnels,
#img-prestations-complementaires-professionnels,
#img-prestations-complementaires-professionnels-2 {
    max-width: 320px;
}

/* Image prestations complémentaires professionnels 2 */
#img-prestations-complementaires-professionnels-2 {
    max-width: 220px;
}

/* Image collectivités locales */
#collectivites #img-collectivites-locales {
    max-width: 240px; /* réduit la vignette */
    margin-left: auto; /* centrer horizontalement */
    margin-right: auto; /* centrer horizontalement */
}

/* == Égaliser la hauteur des deux cadres dans #professions-libérales == */
/* Colonnes étirées, mais alignement du contenu en haut (pas de centrage vertical) */
#professions-libérales .row {
    align-items: stretch; /* s'assurer que les colonnes prennent la hauteur maximale */
}

/* Appliquer flex-col aux colonnes pour permettre à .p-4 de s'étendre */
#professions-libérales .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* Le bloc interne prend toute la hauteur disponible, alignement en haut */
#professions-libérales .row > [class*="col-"] > .p-4 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* aligner le contenu en haut, pas centré */
}

/* Espace sous les titres h5 dans la section professions libérales */
#professions-libérales h5 {
    margin-bottom: 1.2em;
}

/* Image pour les demandes particulières */
#img-demande-particuliere {
    /* Nouvelle taille plus généreuse */
    max-width: 320px; /* taille maximale desktop demandée */
    width: auto;     /* conserver le ratio naturel */
    height: auto;
    display: block;
    margin: 2rem auto 3rem auto; /* top:2rem ; right:auto ; bottom:4rem ; left:auto -> encore plus d'espace sous l'image */
}

/* Garantir l'effet de survol des <td> dans les <tbody> avec un sélecteur plus spécifique.
   Appliquer le fond et la couleur directement aux <td>. */
#tarifs table.table tbody tr:hover td {
    background-color: #c6a530; /* fond doré au survol */
    color: #fff; /* texte blanc au survol */
}

/* Même chose pour les éléments <th> dans les <thead>.
    Ajouter une règle pour couvrir les <th> afin que le survol fonctionne sur cette ligne unique. */
/* #tarifs table.table thead tr:hover th {
    background-color: #c6a530;
    color: #fff;
} */

/* --- Largeur des colonnes dans le tableau tarifs --- */
#tarifs table.table {
    table-layout: fixed; /* assure que les largeurs ci-dessous sont respectées */
    width: 100%; /* occupe toute la largeur du conteneur */
}

/* Appliquer 50% de largeur à chaque colonne */
#tarifs table.table thead th:nth-child(1), /* en-tête de la première colonne */
#tarifs table.table tbody td:nth-child(1), /* contenu de la première colonne */
#tarifs table.table thead th:nth-child(2), /* en-tête de la seconde colonne */
#tarifs table.table tbody td:nth-child(2) { /* contenu de la seconde colonne */
    width: 50%;
}

/* Aligner le contenu de la première colonne à gauche dans le premier tableau (main-tarifs) */
#tarifs table#main-tarifs tbody tr td:first-child {
    text-align: left;
}

/* Aligner la seconde colonne du premier tableau (#main-tarifs) à gauche
   et ajouter un retrait important à gauche pour l'espacement visuel */
#tarifs table#main-tarifs tbody tr td:nth-child(2) {
    text-align: left;
    padding-left: 16rem; /* retrait important à gauche — ciblé uniquement sur le 1er tableau */
}

/* Bordures locales pour les tableaux dans #tarifs (remplace .table-bordered de Bootstrap pour ce bloc) */
#tarifs table.table {
    border: 1px solid #ddd;
    border-collapse: collapse;
}
#tarifs table.table th,
#tarifs table.table td {
    border: 1px solid #ddd;
}

/* --- Groupement visuel de lignes dans le tableau tarifs --- */
/* Suppression de la bordure entre les deux lignes du groupe */
#tarifs table#main-tarifs tbody tr.group-first td {
    border-bottom: 0; /* supprime la ligne de séparation sous la première ligne */
}
#tarifs table#main-tarifs tbody tr.group-second td {
    border-top: 0; /* supprime la ligne de séparation au-dessus de la seconde ligne */
}

/* Lorsque le groupe est actif (survolé), appliquer le même style qu'au hover */
#tarifs table#main-tarifs tbody tr.group-active td,
#tarifs table#main-tarifs tbody tr.group-active + tr.group-active td {
    background-color: #c6a530; /* même doré que le hover global */
    color: #fff;
}

/* fallback: s'assurer que les liens à l'intérieur conservent une couleur lisible */
#tarifs table#main-tarifs tbody tr.group-active td a {
    color: #fff;
}

/* Image des horaires dans le bloc contact */
#img-horaires {
    max-width: 320px;
    width: auto;      /* conserver le ratio et éviter la déformation */
    height: auto;
    display: block;
    margin: 0 auto 0.5rem auto; /* centrer et espacer sous l'image */
    object-fit: contain;
}

/* Style du bloc horaires dans la section info-contact */
#info-contact .horaires-bloc {
    flex-direction: column; /* empile verticalement image puis texte */
    align-items: center;    /* centre horizontalement l'icône et le texte */
    text-align: center;     /* centre le texte à l'intérieur du bloc */
    gap: 0.75rem;           /* espace entre l'icône et le texte */
}

/* Espace sous l'icône des horaires */
#info-contact .horaires-bloc #img-horaires {
    margin-bottom: 0.25rem; /* petit espace sous l'icône */
}

/* Ajoute un espace au-dessus du bloc horaires-info */
#horaires-info {
    margin-top: 0.8rem; /* espace visible sur desktop */
}

/* Centrer horizontalement le bloc de contact (deux colonnes) */
#info-contact .row {
    justify-content: center; /* centre les colonnes à l'intérieur de la row */
}
#info-contact .row > .col-6 {
    display: flex;
    justify-content: center; /* centre le contenu de chaque colonne */
}
#info-contact .row > .col-6 ul {
    text-align: left; /* garder les listes alignées à gauche à l'intérieur du bloc centré */
}

/* Taille des icônes de contact */
.contact-icon {
    width: 24px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Footer */
footer {
    background-color: #c6a530; /* doré */
    color: #2b1f0f; /* texte foncé pour contraste */
}

/* Styles pour le badge CYLEX dans le footer */
.footer-with-badge {
    position: relative; /* contient l'élément positionné absolument */
}
.footer-with-badge .cylex-badge {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}
.footer-with-badge .cylex-badge img {
    background: black;
    display: inline-block;
    vertical-align: middle;
    width: 100px; /* taille par défaut contrôlée via CSS */
    height: auto;
}

/* Icône Facebook à côté du badge CYLEX */
.footer-with-badge .facebook-badge {
    position: absolute;
    left: calc(1rem + 110px + 0.5rem); /* à droite du badge CYLEX (100px width + gap) */
    top: 50%;
    transform: translateY(-50%);
    display: block;
}
.footer-with-badge .facebook-badge img {
    width: 36px;
    height: auto;
    vertical-align: middle;
    background: transparent;
    border-radius: 4px;
}

/* Icône Google Reviews placée à droite de Facebook sur desktop */
.footer-with-badge .google-badge {
    position: absolute;
    left: calc(1rem + 110px + 36px + 0.1rem); /* réduit l'écart avec Facebook : gap réduit à 0.25rem */
    top: calc(50% + 7px);
    transform: translateY(-50%);
    display: block;
}
.footer-with-badge .google-badge img {
    width: 90px;
    height: auto;
    vertical-align: middle;
    background: transparent;
    border-radius: 4px;
}

/* Empêcher que le texte du footer passe sous le badge CYLEX
   - on réserve un espace à gauche égal à la largeur du badge + un gap
   - on ajuste la valeur responsive dans la media query déjà présente */
.footer-with-badge {
    box-sizing: border-box;
    padding-left: 0; /* Texte centré indépendamment du badge */
}

/* Wrapper interne pour centrer visuellement le contenu du footer
   - on limite la largeur disponible pour le contenu afin d'éviter le chevauchement
   - le contenu reste centré horizontalement dans l'espace visible */
.footer-inner {
    max-width: 100%;
    margin: 0 auto;
    text-align: center; /* centrer le texte horizontalement, indépendamment du badge */
    box-sizing: border-box;
}

/* Style des liens dans le footer */
footer a {
    color: #2b1f0f; /* liens sombres */
    text-decoration: underline;
}

/* État au survol et au focus des liens dans le footer */
footer a:hover,
footer a:focus {
    color: #1a140e;
}

/* Styles pour la section Crédits Photos */
#credits-photos {
    background: transparent;
}
.credit-grid .credit-item img {
    width: 100%;
    height: 96px;
    object-fit: cover;
}
.credit-item figcaption {
    color: #333;
    line-height: 1.1;
}
.credit-item .small {
    font-size: 0.85rem;
}

/* Bouton retour en haut de page */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    font-size: 1.4rem; /* taille de l'icône */
    padding: 0; /* retire le padding asymétrique pour garder le cercle */
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------
   Requêtes @media regroupées pour le responsive design
   ---------------------------------------------------- */

/* Ajustements pour le tableau tarifs sous 1400px */
@media (max-width: 1400px) {
    /* Appliquer un retrait moins important à gauche pour l'espacement visuel */
    #tarifs table#main-tarifs tbody tr td:nth-child(2) {
        padding-left: 12rem; /* retrait moins important à gauche — ciblé uniquement sur le 1er tableau */
    }
}

/* Ajustements sous 1200px */
@media (max-width: 1200px) {
    /* Appliquer un retrait moins important à gauche pour l'espacement visuel */
    #tarifs table#main-tarifs tbody tr td:nth-child(2) {
        padding-left: 8rem; /* retrait moins important à gauche — ciblé uniquement sur le 1er tableau */
    }
}

/* Centrer verticalement le menu au-dessus de 992px */
@media (min-width: 992px) {
    /* Lorsque la navbar est en mode étendu (navbar-expand-lg), aligner les items verticalement */
    .navbar-expand-lg .navbar-nav {
        display: flex;
        align-items: center; /* centre verticalement les liens */
        height: 100%;
    }

    /* S'assurer que chaque lien a un alignement vertical propre */
    .navbar-expand-lg .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        height: 100%;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Centrer chaque item de menu (li) horizontalement et verticalement
       sur les écrans larges (>= 992px). Utilise des règles explicites
       pour remplacer d'éventuelles règles 'grid' conflictuelles. */
    .navbar-expand-lg .navbar-nav .nav-item {
        display: flex;
        align-items: center;     /* centrage vertical du contenu du li */
        justify-content: center; /* centrage horizontal du contenu du li */
        text-align: center;      /* s'assure que le texte est centré si multi-lignes */
    }

    /* si nécessaire forcer l'alignement du lien lui-même */
    .navbar-expand-lg .navbar-nav .nav-link {
        justify-content: center;
        text-align: center;
    }
}

/* Écrans larges -> tablettes (max-width: 992px) */
@media (max-width: 992px) {
    /* Pour la section prestations-domicile : permettre le wrapping et empiler
       l'image sous le texte sur écrans <= 992px (corrige le `flex-nowrap` présent) */
    #prestations-domicile .row {
        flex-wrap: wrap !important;
    }
    #prestations-domicile .col-md-8,
    #prestations-domicile .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* S'assurer que l'image est centrée quand elle occupe toute la largeur */
    #prestations-domicile #img-prestations-domicile {
        margin-left: auto;
        margin-right: auto;
        display: block;
        max-width: 420px; /* réduire légèrement sur mobile si nécessaire */
        width: 100%;
    }

    /* Empiler l'image de la section Récit de vie sous 992px :
    forcer le wrapping et placer la colonne image sous le texte */
    #recit-de-vie .row {
        flex-wrap: wrap !important;
    }
    #recit-de-vie .col-md-8,
    #recit-de-vie .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* S'assurer que l'image est centrée quand elle occupe toute la largeur */
    #recit-de-vie #img-recit-de-vie {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 320px; /* limite la vignette sur petits écrans */
    }

    /* Empiler sections professionnelles sous 992px :
       prestations proposées + prestations complémentaires en une colonne */
    #prestations-proposees-professionnels .row,
    #prestations-complementaires-professionnels .row {
        flex-wrap: wrap !important;
    }
    #prestations-proposees-professionnels .col-md-8,
    #prestations-proposees-professionnels .col-md-4,
    #prestations-complementaires-professionnels .col-md-4,
    #prestations-complementaires-professionnels .col-md-8,
    #prestations-complementaires-professionnels .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* Centrer et contraindre les images pour mobile */
    #prestations-proposees-professionnels #img-prestations-proposees-professionnels,
    #prestations-complementaires-professionnels #img-prestations-complementaires-professionnels,
    #prestations-complementaires-professionnels #img-prestations-complementaires-professionnels-2 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 420px;
    }

    /* Appliquer un retrait moins important à gauche pour l'espacement visuel */
    #tarifs table#main-tarifs tbody tr td:nth-child(2) {
        padding-left: 6rem; /* retrait moins important à gauche — ciblé uniquement sur le 1er tableau */
    }

    /* Ajuster la largeur du wrapper interne lorsque le logo est réduit */
    .footer-inner {
        max-width: calc(100% - (80px + 0.5rem));
    }
}

/* Écrans larges -> tablettes (max-width: 991px) */
@media (max-width: 991px) {
    /* S'assurer que la barre de navigation possède une variable CSS pour sa hauteur (peut être redéfinie) */
    #navbar {
        --navbar-height: 56px; /* hauteur de secours pour la barre */
        position: relative;
        z-index: 1040;
    }

    /* Positionner le panneau de menu déroulant (collapse) en absolu par rapport à la barre de navigation,afin qu'il s'ouvre directement sous le bouton hamburger (toggler). Cela garantit son alignement avec la barre, même si la page est scrollée ou si la navbar n'est pas tout en haut. */
    #navbar .navbar-collapse {
        position: absolute;
        top: 100%; /* directement sous la barre de navigation */
        left: 0;
        right: 0;
        background: #502D12; /* même couleur que .navbar */
        padding: 0.5rem 1rem;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        max-height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
        z-index: 1035; /* au-dessus du contenu de la page mais sous les modales */
    }

    /* Empiler les éléments du menu verticalement et aligne à gauche dans le panneau */
    #navbar .navbar-collapse .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
        width: 100%;
    }

    /* S'assurer que le logo mobile dans le menu est aligné à gauche */
    #navbar .navbar-brand.d-lg-none {
        margin-left: 0;
        margin-right: 0.75rem;
    }

    /* S'assurer que le bouton toggler reste aligné à droite */
    .navbar-toggler.ms-auto {
        margin-left: auto !important;
    }

    /* Bouton hamburger -> croix quand le menu est ouvert (sous 991px)
       Utilise l'attribut aria-expanded qui passe à "true" quand le collapse est ouvert. */
    .navbar-toggler {
        border: none;
        background: transparent;
        padding: .25rem .5rem;
    }
    .navbar-toggler .navbar-toggler-icon {
        background-image: none !important; /* annuler l'icône par défaut */
        position: relative;
        display: inline-block;
        width: 28px;
        height: 2px;
        background-color: #fff; /* couleur des barres */
        transition: background-color .25s ease;
    }
    .navbar-toggler .navbar-toggler-icon::before,
    .navbar-toggler .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 28px;
        height: 2px;
        background-color: #fff;
        transition: transform .25s ease, top .25s ease, opacity .2s ease;
    }
    .navbar-toggler .navbar-toggler-icon::before {
        top: -8px;
    }
    .navbar-toggler .navbar-toggler-icon::after {
        top: 8px;
    }

    /* État ouvert : transformer en croix */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-color: transparent; /* masquer la barre centrale */
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: translateY(8px) rotate(45deg);
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Accessibilité : focus visible */
    .navbar-toggler:focus {
        outline: 2px dashed rgba(255,255,255,0.4);
        outline-offset: 4px;
    }
}

/* Écrans moyens -> tablettes (max-width: 900px) */
@media (max-width: 900px) {
    /* Annule les rotations appliquées au layout */
    #cadre-formations,
    #cadre-incline-formations,
    #cadre-img-livres-parchemins,
    #cadre-img-parchemins,
    #cadre-qualite,
    #cadre-incline-qualite {
        transform: none !important;
    }

    /* Empêcher les effets au survol qui remettent une rotation */
    #cadre-formations:hover,
    #cadre-incline-formations:hover,
    #cadre-img-livres-parchemins:hover,
    #cadre-img-parchemins:hover,
    #cadre-qualite:hover,
    #cadre-incline-qualite:hover {
        transform: none !important;
    }

    /* Si des images internes ont une rotation, l'annuler aussi */
    #img-livres-parchemins,
    #img-parchemins {
        transform: none !important;
    }

    /* Réinitialiser les marges latérales pour un meilleur centrage */
    #cadre-formations,
    #cadre-img-livres-parchemins,
    #cadre-img-parchemins,
    #cadre-qualite {
        margin: 0;
    }

    /* Réglages du conteneur des cadres pour éviter trop d'espace horizontal */
    .cadres-spacing-lg {
        column-gap: 2.5rem;
    }
    /* Réduction du décalage latéral des cadres inclinés */
    #cadre-img-parchemins {
        padding-left: calc(28px + 0.5rem);
    }
    #cadre-qualite {
        min-width: 220px;
        /* Conserver la même largeur maximale que sur desktop
           pour garder la même taille visuelle sous 900px */
        max-width: 560px;
    }

    /* Top-bar: organisation en 2 colonnes sous 900px
       - colonne 1 : #adresse (row 1) et #telephone (row 2)
       - colonne 2 : #mobile (row 1) et #devis (row 2)
    */
    #top-bar #liens {
        display: grid;
        /* deux colonnes de largeur contrôlée, centrées horizontalement */
        grid-template-columns: repeat(2, minmax(0, 320px));
        gap: 0.5rem 1rem;
        padding-left: 0; /* retire le padding autour de la top-bar sur mobile */
        padding-right: 0;
        box-sizing: border-box;
        align-items: start;
        justify-content: center; /* centre les deux colonnes dans l'espace disponible */
        width: auto;
        margin: 0 auto;
    }

    /* chaque case interne garde un peu d'espace vertical et ne s'étire pas */
    #top-bar #liens > div {
        width: auto;
        max-width: 320px;
        padding: 0.35rem 0.35rem;
        display: flex; /* conserve l'alignement des icônes et du texte */
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    /* Placement explicite des éléments dans la grille */
    #top-bar #adresse {
        grid-column: 1;
        grid-row: 1;
    }
    #top-bar #telephone {
        grid-column: 1;
        grid-row: 2;
    }
    #top-bar #mobile {
        grid-column: 2;
        grid-row: 1;
    }
    #top-bar #devis {
        grid-column: 2;
        grid-row: 2;
    }

    /* Ajuster légèrement les images/icônes dans ce contexte */
    #top-bar #liens img {
        width: 3.25rem; /* un peu plus petit que desktop */
        height: auto;
    }

    /* Agrandir le bouton 'Demandez un devis' sur petits écrans pour meilleure lisibilité */
    #top-bar #devis #btn-devis-img {
        max-width: 180px; /* réduit encore légèrement pour meilleure proportion mobile */
        width: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Afficher #prestations-list en une seule colonne et centrer les blocs */
    #prestations-list {
        display: flex; /* assure que la row est bien en flex */
        flex-direction: column;
        align-items: center; /* centre horizontalement les colonnes empilées */
        gap: 2rem; /* augmenté pour plus d'espace vertical entre les cadres empilés */
        width: 100%;
        max-width: 560px; /* limite la largeur totale du groupe de prestations (réduit) */
        margin: 0 auto; /* centre le bloc dans la page */
        padding-left: 0.75rem; /* respiration horizontale sur petits écrans */
        padding-right: 0.75rem;
        box-sizing: border-box;
    }

    /* Enlever l'effet AOS (décalage / fade) au chargement sur petits écrans
       pour éviter les animations latérales qui décalent le contenu lors du rendu. */
    #prestations-list [data-aos],
    #prestations-list .aos-animate,
    #prestations-list .aos-init {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Les colonnes internes prennent toute la largeur disponible (avec marge intérieure) */
    #prestations-list .col-md-5 {
        width: 100%;
        max-width: 560px; /* correspond au max-width du conteneur */
        margin-left: 0;
        margin-right: 0;
    }

    /* Footer : passer sur 2 lignes sous 900px et placer les liens sur la seconde ligne */
    .footer-with-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding-left: 0; /* ne pas décaler le contenu : texte centré */
        text-align: center;
    }

    .footer-with-badge .footer-copy {
        width: 100%;
        order: 1;
    }

    .footer-with-badge .footer-links {
        width: 100%;
        order: 2;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
    }

    /* réduire l'espace du séparateur si besoin sur petits écrans */
    .footer-with-badge .footer-links .mx-2 {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    /* Forcer .footer-inner pleine largeur et centré sous 900px */
    .footer-inner {
        max-width: 100%;
        padding-left: 0;
        box-sizing: border-box;
        margin: 0 auto;
        text-align: center;
    }
}

/* Écrans moyens (max-width: 850px) */
@media (max-width: 850px) {
    /* Réduire la taille du logo CYLEX sur écrans moyens et petits */
    .footer-with-badge .cylex-badge img {
        width: 80px; /* réduit le logo pour ne pas gêner la mise en page */
        height: auto;
    }

    /* Réduire l'icône Facebook et ajuster sa position sous 768px */
    .footer-with-badge .facebook-badge img {
        width: 28px;
        height: auto;
    }
    .footer-with-badge .facebook-badge {
        /* CYLEX réduit à 80px ici, donc rapprocher l'icône Facebook */
        left: calc(1rem + 90px + 0.5rem);
    }

    /* Réduire aussi l'icône Google et l'ajuster */
    .footer-with-badge .google-badge img {
        width: 70px;
        height: auto;
    }
    .footer-with-badge .google-badge {
        left: calc(1rem + 80px + 28px + 1rem); /* gap = 1rem : Google un peu espacé après Facebook */
        /* Remonter d'environ 2px par rapport à la position héritée */
        top: calc(50% + 5px);
        transform: translateY(-50%);
    }
}

/* Tablettes / petits ordinateurs (max-width: 768px) */
@media (max-width: 768px) {
    /* Réglages du conteneur des cadres pour éviter trop d'espace horizontal */
    .cadres-spacing-lg {
        column-gap: 2rem; /* confortable sur mobile sans créer un vide excessif */
        row-gap: 2rem; /* ajoute un espace vertical entre les cadres en mode mobile */
    }

    /* Réduction du décalage latéral du bloc d'informations de contact */
    #informations-contact {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    /* Menu de navigation : une seule colonne, éléments empilés */
    #navbar .navbar-nav {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Sur petits écrans : empiler les cadres (formations / qualité) en colonne
       et centrer horizontalement leur contenu pour un rendu lisible. */
    #charte-qualite,
    .cadres-spacing-lg {
        flex-direction: column; /* empile verticalement */
        align-items: center;    /* centre horizontalement les colonnes */
        justify-content: flex-start;
        gap: 1rem;
    }

    /* Réinitialiser les marges horizontales des cadres internes quand on empile */
    #cadre-formations,
    #cadre-img-livres-parchemins,
    #cadre-img-parchemins,
    #cadre-qualite {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 95%; /* laisse un peu d'espace sur petits écrans */
    }

    /* Cadres de qualité et incliné : s'assurer qu'ils ne forcent pas la largeur */
    #cadre-qualite,
    #cadre-incline-qualite,
    #cadre-incline-formations {
        width: 100%;
        max-width: 720px;
        box-sizing: border-box;
    }

    /* Centrer les images internes quand on est en colonne */
    #img-livres-parchemins,
    #img-parchemins {
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }

    /* Forcer le centrage horizontal des wrappers d'images dans la grille
       quand le layout est en colonne (mobile) */
    .cadres-spacing-lg {
        align-items: center !important;
    }

    /* Ajuster la largeur des images internes des cadres Livres et Parchemins */
    #cadre-img-livres-parchemins,
    #cadre-img-parchemins {
        width: auto;
        max-width: 520px; /* ajuste si nécessaire */
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        box-sizing: border-box;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Ajuster légèrement la largeur des cadres Formations et Qualité sous 768px */
    #cadre-formations,
    #cadre-qualite {
        width: auto;
        margin-left: auto;
        margin-right: auto;
        align-self: center; /* assure le centrage dans le flex parent */
        box-sizing: border-box;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Largeur maximale ajustée pour un meilleur rendu sur tablettes */
    #cadre-formations {
        max-width: 540px;
    }
    #cadre-qualite {
        max-width: 580px;
    }

    /* Empiler en une colonne toutes les sections listées sous 768px
       Force le wrapping et met les colonnes à 100% pour un affichage vertical */
    #prestations-particuliers .row,
    #service-a-la-personne .row {
        flex-wrap: wrap !important;
    }

    #prestations-particuliers .col-md-6,
    #service-a-la-personne .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Centrer les images quand elles passent en pleine largeur */
    #prestations-particuliers #img-prestations-particuliers,
    #service-a-la-personne #img-agrement {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 420px;
    }

    /* Empiler professions libérales et collectivités sous 768px */
    #professions-libérales .row,
    #collectivites .row {
        flex-wrap: wrap !important;
    }
    #professions-libérales .col-md-6,
    #collectivites .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Centrer et contraindre les images internes lorsque la colonne est pleine largeur */
    #professions-libérales img,
    #collectivites #img-collectivites-locales {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 420px;
    }

    /* Désactiver les effets de survol/transformations sur petits écrans
    (empêche les translations/rotations/animations gênantes sous 900px) */
    .img-consultez-tarifs,
    .img-consultez-tarifs:hover,
    .banniere,
    .banniere:hover {
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }

    /* Galerie : vignettes un peu plus petites sur tablettes */
    #gallery .gallery-img-wrapper {
        height: 160px;
    }

    /* Appliquer un retrait moins important à gauche pour l'espacement visuel */
    #tarifs table#main-tarifs tbody tr td:nth-child(2) {
        padding-left: 4rem; /* retrait moins important à gauche — ciblé uniquement sur le 1er tableau */
    }

    /* Placer les badges (CYLEX + Facebook + Google) sur une nouvelle ligne en bas du footer */
    .footer-with-badge {
        /* laisser le flux normal, centrer le contenu */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Footer-inner reste en haut (défaut), footer-badges vient en bas */
    .footer-with-badge .footer-badges {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        align-items: center !important;
        justify-content: center !important;
        order: 3;
        width: 100%;
        padding-top: 0.25rem;
    }

    /* Neutraliser tout positionnement absolu et forcer un rendu en ligne des badges */
    .footer-with-badge .footer-badges a.cylex-badge,
    .footer-with-badge .footer-badges a.facebook-badge,
    .footer-with-badge .footer-badges a.google-badge {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    /* Ajuster les marges pour rapprocher les badges */
    footer.footer-with-badge .footer-badges a.google-badge {
        margin-left: -14px !important;
    }

    /* Ordre et espacement entre badges */
    .footer-with-badge .footer-badges .cylex-badge {
        order: 1;
    }
    .footer-with-badge .footer-badges .facebook-badge {
        order: 2;
        margin-left: 0.5rem !important;
    }
    .footer-with-badge .footer-badges .google-badge {
        order: 3;
        margin-left: -12px !important;
    }

    /* Tailles et alignement des images */
    .footer-with-badge .footer-badges img {
        vertical-align: middle;
        display: inline-block !important;
    }
    .footer-with-badge .footer-badges .cylex-badge img {
        width: 64px !important;
        height: auto !important;
    }
    .footer-with-badge .footer-badges .facebook-badge img {
        width: 24px !important;
        height: auto !important;
    }
    .footer-with-badge .footer-badges .google-badge img {
        width: 61px !important;
        height: auto !important;
        transform: translateY(5px) !important; /* image légèrement descendue */
    }
}

/* Téléphones grands et petits (max-width: 576px) */
@media (max-width: 576px) {
    /* Image demandes particulières : réduire pour mobiles */
    #img-demande-particuliere {
        max-width: 200px; /* taille réduite sur petits écrans */
        width: auto;
        margin: 1.2rem auto 3rem auto; /* bottom augmenté pour mobile */
    }

    /* Image horaires : réduire la largeur sur petits écrans */
    #img-horaires {
        max-width: 200px;
        width: auto;
    }

    /* Réduire l'espace au-dessus du bloc horaires-info sur petits écrans */
    #horaires-info {
        margin-top: 0.5rem; /* espace réduit sur petits écrans */
    }

    /* Sous 576px : limiter la largeur de la galerie et désactiver le full-bleed */
    #gallery-section {
        max-width: 360px; /* largeur réduite pour très petits écrans */
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
    }

    /* Réinitialiser les règles full-bleed de #gallery sur très petits écrans */
    #gallery {
        width: auto !important;
        max-width: 360px !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* Très petits écrans (max-width: 500px) */
@media (max-width: 500px) {
    /* Empiler le lien 'mentions légales' sous 'crédits photos' sur très petits écrans (<=500px) */
    .footer-with-badge .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        width: 100%;
    }

    /* S'assurer que le lien crédits reste au-dessus */
    .footer-with-badge .footer-links a[href*="credits-photos.php"] {
        order: 1;
        display: block;
        text-align: center;
        width: 100%;
    }

    /* Placer 'mentions légales' sur la ligne suivante */
    .footer-with-badge .footer-links a[href*="mentions-legales.php"] {
        order: 2;
        display: block;
        text-align: center;
        width: 100%;
    }

    /* Cacher le séparateur '|' entre les liens du footer sur très petits écrans */
    .footer-with-badge .footer-links .mx-2 {
        display: none;
    }
}

/* Très petits écrans (max-width: 420px) */
@media (max-width: 420px) {
    /* Galerie : vignettes encore plus petites sur très petits écrans */
    #gallery .gallery-img-wrapper {
        height: 120px;
    }

    /* Empiler la grille de contact en une colonne sous 420px */
    #contact .row > .col-6 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        display: block;
    }
    /* Ajuster l'indentation des listes pour mobile */
    #contact .row > .col-6 ul {
        padding-left: 1rem;
        margin: 0;
    }
}
/* ----------------------------------------------------
   Fin des requêtes @media
   ---------------------------------------------------- */