/* Assurer que le body et html occupent toute la hauteur */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Palette de couleurs */
:root {
  --taupe-clair: #CBBFAE;
  --taupe-moyen: #B3A48A;
  --brun-doux: #3A342B;
  --brun-taupe: #6C5E55;
  --vert-doux: #6fbf73;
  --blanc-casse: #F3EADF;
  --vert-pastel: #cce8cc;
  --blanc-pur: #ffffff;
}

/* BODY */
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: var(--blanc-casse);
  background-image: url('images/arbre.jpg');
  background-size: contain;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--brun-doux);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

/* HEADER */
header {
  background-color: var(--taupe-clair);
  color: var(--brun-doux);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 0 0 8px 8px;
}

header h1 {
  font-size: 1.5rem;
  margin: 0;
}

/* NAVIGATION */
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  margin: 0;
}

nav a {
  color: var(--brun-doux);
  text-decoration: none;
  font-weight: 500;
}

nav a:hover,
nav a.active {
  text-decoration: underline;
}

/* CONTENU PRINCIPAL */
main {
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 2rem;
  max-width: 900px;
  margin: 2rem auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  flex-grow: 1;
}

/* SECTION HERO */
.hero {
  background-color: rgba(247, 243, 235, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6rem 3rem;
  border-radius: 18px;
  text-align: center;
}

.hero h2 {
  font-size: 3rem;
  color: var(--brun-doux);
  font-weight: 500;
}

.hero * {
  font-weight: 600; /* Tout le texte en gras sauf les éléments spécifiques */
}

.hero p,
.hero blockquote {
  font-weight: 600;
}

.hero blockquote {
  font-style: italic;
  color: var(--brun-taupe);
  margin-top: 1.5rem;
}

/* LISTES DE SERVICES (blocs texte) */
.services-list {
  list-style: none;
  padding: 0;
}

.services-list li {
  background: rgba(247, 243, 235, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1rem;
  margin: 0.5rem 0;
  border-left: 4px solid var(--taupe-clair);
  border-radius: 14px;
  color: var(--brun-doux);
}

/* FORMULAIRE */
.contact-form {
  margin-top: 2rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  font-weight: 600;
  color: var(--brun-doux);
}

input, textarea {
  padding: 0.8rem;
  border: 1px solid var(--taupe-clair);
  border-radius: 6px;
  font-size: 1rem;
  background-color: #FDFBF7;
  color: var(--brun-doux);
  
}

/* BOUTON */
button {
  background-color: var(--taupe-clair);
  color: var(--brun-doux);
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  align-self: flex-start;
  font-weight: 600;
}

button:hover {
  background-color: var(--taupe-moyen);
}

/* FOOTER */
footer {
  background-color: var(--taupe-clair);
  color: var(--brun-doux);
  text-align: center;
  padding: 1rem;
  border-radius: 8px 8px 0 0;
  font-size: 0.9rem;
  margin-top: 2rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  bottom: 0;
  flex-shrink: 0;
}

/* Assurer que le footer soit en bas de la page */
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Alignement du texte du footer */
footer p {
  margin: 0;
}
.apropos-page p {
  text-align: justify;
  hyphens: auto;
}
.roles {
  display: inline-block;
  text-align: center;
  line-height: 1.8;
  font-size: 1.1rem;
}

.tooltip-role {
  position: relative;
  cursor: pointer;
  color: #333;
  border-bottom: 1px dotted #7a6f60;
}

.tooltip-box {
  position: absolute;
  left: 50%;
  top: 120%;
  transform: translateX(-50%);
  width: 300px;
  background: #f3eee7;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 10;
}

.tooltip-role:hover .tooltip-box {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 10px);
}

.tooltip-role.open .tooltip-box {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 10px);
}

@media (max-width: 600px) {
  .tooltip-box {
    width: 90vw;
    left: 50%;
  }
}

.consultation-small-block {
  position: absolute;
  right: 5%;
  top: 45%;
  width: 280px;
  background-color: #F7ECEA; /* Rose poudré */
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.consultation-small-block h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--brun-doux);
}
/* IMAGE DÉCORATIVE À GAUCHE DU BLOC */
.side-image {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0; /* derrière le header et contenu */
}

.side-image img {
  height: 50vh;   /* Ajuste la hauteur (augmente la taille) */
  width: auto;    /* Conserve les proportions */
  border-radius: 16px;
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* IMAGE À GAUCHE SUR LA PAGE PRESTATIONS */
.side-image-services {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

.side-image-services img {
  height: 40vh;  /* Ajustable */
  width: auto;
  border-radius: 16px;
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* ---- Page Contact : élargissement spécifique ---- */

/* ---- Mise en page 2 colonnes pour la page Contact ---- */

.contact-page {
  max-width: 950px;
  margin: 2rem auto;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.contact-container {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Colonne gauche (infos) */
.contact-info {
  flex: 0 0 40%;
  font-size: 1.05rem;
  color: var(--brun-doux);
  background-color: rgba(247, 243, 235, 0.6);
  padding: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  line-height: 1.7;
}

/* Colonne droite (formulaire) */
.contact-form {
  flex: 0 0 60%;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Petits ajustements responsive */
@media (max-width: 800px) {
  .contact-container {
    flex-direction: column;
  }

  .contact-info,
  .contact-form {
    flex: 0 0 100%;
  }
}
.consultation-small-block h3 {
  text-align: center;
}

.consultation-small-block p {
  text-align: justify;
}
.tooltip-box {
  text-align: justify;
}
.consultation-small-block {
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9; /* optionnel */
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* optionnel */
}

.consultation-small-block h3 {
  text-align: justify;
  font-style: italic;
  line-height: 1.6;
  font-size: 0.9rem; /* 👈 texte plus petit */
}
.apropos-page main {
  max-width: 900px;          /* limite la largeur pour un confort de lecture */
  margin: 40px auto;         /* centre le texte sur la page */
  padding: 20px;
  line-height: 1.7;          /* aère le texte */
  text-align: justify;       /* justifie le contenu */
  font-size: 1rem;           /* taille de texte lisible */
}

.apropos-page h2 {
  text-align: center;
  margin-bottom: 20px;
}
.apropos-page {
  background-image: none !important; /* supprime l’image de fond */
  background-color: #ffffff;         /* couleur de fond (blanc par défaut) */
}
.apropos-page h2 {
  text-align: left;
  margin-left: 0;
}
.apropos-page footer p {
  text-align: center;
}
/* Conteneur centré : conserver la largeur du texte comme avant */
.apropos-layout {
  position: relative;          /* pour que .photo-left soit positionnée par rapport à ce conteneur */
  max-width: 900px;            /* <-- conserve la largeur du bloc texte */
  margin: 40px auto;           /* centre le conteneur comme avant */
  padding: 0 20px;             /* petit padding si tu veux */
  box-sizing: border-box;
}

/* Le main intérieur garde exactement la mise en forme que tu avais */
.apropos-content {
  text-align: justify;
  line-height: 1.7;
  font-size: 1rem;
}

/* Image positionnée à l'extérieur, à gauche du conteneur, sans modifier la largeur du texte */
.photo-left {
  position: absolute;
  top: 0;                      /* aligne le haut de l'image avec le haut du conteneur */
  left: calc(-1 * (220px + 30px)); /* déplace l'image vers la gauche hors du conteneur
                                      220px = largeur image ; 30px = espace (gap) */
  width: 220px;                /* largeur de l'image : tu peux ajuster */
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  display: block;
}

/* Si tu veux l'image un peu plus centrée verticalement par rapport au titre,
   tu peux ajuster top: 10px; ou top: 20px; */

/* ------- Responsive : sur petits écrans on évite le chevauchement ------- */
@media (max-width: 980px) {
  .photo-left {
    position: static;           /* repasse en flux normal */
    margin: 0 auto 20px auto;   /* place l'image au-dessus du texte, centrée */
    display: block;
    left: auto;
    width: 80%;                 /* version mobile, image plus petite */
    max-width: 360px;
  }
}
/* Remonter uniquement le texte, sans bouger la photo */
.apropos-content {
  position: relative;
  top: -60px; /* ajuste cette valeur selon ce que tu veux : -40px, -80px, etc. */
}
/* ===== Sticky footer scoppé pour la page À propos (solution recommandée) ===== */

/* s'assurer de cibler uniquement la page à propos */
body.apropos-page,
.apropos-page {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

/* Le main / wrapper prend l'espace restant entre header et footer */
body.apropos-page > main,
body.apropos-page main.apropos-main,
.apropos-page .apropos-layout {
  flex: 1 1 auto !important;
  display: block !important;        /* on force l'affichage normal */
  box-sizing: border-box !important;
}

/* si tu utilises <main class="apropos-content"> directement (ton cas initial) */
.apropos-page > .apropos-layout > main.apropos-content,
.apropos-page main.apropos-content {
  flex: 1 1 auto !important;
  position: relative !important;
  top: 0 !important; /* annule tout décalage négatif restant */
  margin: 0 auto !important;
  max-width: 900px;
  padding: 2rem;
  box-sizing: border-box;
}

/* footer : rester dans le flux mais poussé en bas */
.apropos-page footer {
  margin-top: auto !important;  /* pousse le footer en bas */
  flex-shrink: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

/* sécurité : si une règle globale cache le footer (display:none) */
.apropos-page footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* --- Page Prestations : suppression de l'image de fond --- */
.services-page {
  background-image: none !important;
  background-color: #ffffff; /* ou une autre couleur si tu veux */
}
.hero h2,
.hero .roles {
  color: #1e1e1e; /* gris anthracite, lisible mais pas noir dur */
  font-weight: 600; /* met en valeur sans alourdir */
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5); /* contraste doux sur fond photo */
}
.hero .roles {
  color: #1e1e1e !important; /* assure que la couleur est bien appliquée */
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}
.hero .roles {
  color: #1e1e1e;
  font-weight: 600;
  font-size: 1.2rem; /* ← taille un peu plus grande que le texte standard */
  letter-spacing: 0.3px; /* petite respiration entre les lettres */
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}
.side-image-services-right {
  position: absolute;
  right: 5%; /* un peu plus à gauche */
  top: 58%;  /* légèrement plus bas */
  transform: translateY(-50%);
  z-index: 0;
}

.side-image-services-right img {
  height: 32vh;  /* plus petite */
  width: auto;
  border-radius: 16px;
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* --- Page Contact : suppression de l'image de fond --- */
.contact-page-body {
  background-image: none !important;
  background-color: #ffffff !important; /* ou une autre couleur si tu préfères */
}
.apropos-page,
.services-page,
.contact-page-body {
  background-color: var(--blanc-casse) !important;
  background-image: none !important; /* pour être sûre qu’il n’y a pas d’image */
}
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  margin-top: 2rem;
}

.contact-grid section {
  background-color: rgba(247, 243, 235, 0.6);
  padding: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  flex: 1 1 300px; /* chaque bloc minimum 300px, s'adapte à l'espace */
}

.contact-form-block input,
.contact-form-block textarea {
  width: 100%;
  box-sizing: border-box;
}

.contact-form-block button {
  margin-top: 1rem;
}
/* Supprime le fond et les bordures du main pour cette page */
.contact-page {
  background: none !important;
  padding: 2rem 0 !important;  /* garde juste un peu de marge verticale */
  max-width: none !important;   /* ne limite pas la largeur */
}

/* Ajuste le conteneur des 3 blocs */
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 2rem;
}

.contact-grid section {
  background-color: rgba(247, 243, 235, 0.6);
  padding: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  flex: 1;               /* ← chaque bloc prend un tiers de l'espace */
  min-width: 250px;      /* ← évite que les blocs deviennent trop étroits */
}
.contact-info-block i {
  color: var(--brun-taupe);
  margin-right: 0.5rem;
}
.contact-info-block a {
  color: var(--brun-doux);
  text-decoration: none;
}
.contact-info-block a:hover {
  text-decoration: underline;
}
.tarifs-block h3 {
  margin-bottom: 1rem;
  color: var(--brun-doux);
  font-size: 1.3rem;
  text-align: center;
}

.tarifs-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tarifs-block li {
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 500;
  color: var(--brun-doux);
  font-size: 1rem;
}

.tarifs-block i {
  color: var(--taupe-moyen);
  font-size: 1.2rem;
}

.tarifs-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--brun-taupe);
  text-align: center;
  line-height: 1.4;
}
/* ——— Lien dans l'infobulle ——— */
.tooltip-link {
  color: #000;            /* lien noir */
  text-decoration: none;  /* pas de soulignement */
  font-weight: 500;
}

.tooltip-link:hover {
  text-decoration: underline;
}
.small-italic {
  font-size: 0.85rem;  /* plus petit */
  font-style: italic;  /* italique */
}
body.no-bg {
  background-image: none;
  background-color: rgba(247, 243, 235, 0.6); /* ou une couleur neutre de ton choix */
}
footer a {
  color: inherit;      /* hérite de la couleur du texte parent */
  text-decoration: none; /* enlève le soulignement si tu veux que ce soit uniforme */
}

footer a:hover {
  text-decoration: underline; /* facultatif : souligné au survol pour indiquer que c’est un lien */
}
.consent-checkbox label a {
  color: inherit;      /* prend la couleur du texte parent */
  text-decoration: underline; /* garde le souligné */
}
a {
  color: black;       /* Texte en noir */
  text-decoration: underline; /* Conserve le souligné */
}
.politique-page p,
.politique-page li {
  text-align: justify;
  text-justify: inter-word;
}
.mentions-page p,
.mentions-page li {
  text-align: justify;
  text-justify: inter-word;
}
.mentions-page footer p,
.mentions-page footer a,
.politique-page footer p,
.politique-page footer a {
  text-align: center !important;
  display: inline-block;
  width: 100%;
}
/* Footer sur une seule ligne pour Mentions légales et Politique de confidentialité */
.mentions-page footer p,
.politique-page footer p {
text-align: center;  /* centre le texte */
display: inline;     /* tout reste sur une seule ligne */
width: auto;         /* pas de largeur forcée */
}

.mentions-page footer a,
.politique-page footer a {
display: inline;     /* les liens restent sur la même ligne */
}
/* --- Corrige la responsivité de l'image décorative Accueil --- */
@media (max-width: 1100px) {
  .side-image {
    position: static;        /* remet l’image dans le flux */
    transform: none;
    margin: 2rem auto 0 auto;
    text-align: center;      /* centre l’image */
  }

  .side-image img {
    height: auto;
    width: 80%;              /* l’image devient flexible */
    max-width: 350px;
  }
}
@media (max-width: 1100px) {
  .side-image-services,
  .side-image-services-right {
    position: static !important;
    transform: none !important;
    margin: 2rem auto;
    text-align: center;
  }

  .side-image-services img,
  .side-image-services-right img {
    height: auto;
    width: 80%;
    max-width: 320px;
  }
}
/* ===== Ajustements responsive pour la page index ===== */

/* Tablettes : largeur <= 1100px */
@media (max-width: 1100px) {
  /* Images et blocs repositionnés dans le flux */
  .side-image,
  .consultation-small-block,
  .side-image-services,
  .side-image-services-right {
    position: static;      /* plus absolute */
    transform: none;       /* supprime la translation verticale */
    margin: 2rem auto;     /* centre les blocs */
    text-align: center;
  }

  /* Images adaptatives */
  .side-image img,
  .side-image-services img,
  .side-image-services-right img {
    height: auto;
    width: 80%;            /* redimensionne pour écran moyen */
    max-width: 350px;
  }

  /* Bloc de consultation */
  .consultation-small-block {
    width: 90%;
    max-width: 500px;
  }
}

/* Mobiles : largeur <= 600px */
@media (max-width: 600px) {
  /* Texte plus petit et lisible */
  .hero h2 {
    font-size: 2rem;
  }

  .roles {
    font-size: 1rem;
  }

  /* Images et blocs encore plus petits */
  .side-image img,
  .side-image-services img,
  .side-image-services-right img,
  .consultation-small-block {
    width: 90%;
    max-width: 320px;
  }

  /* Ajustements pour le padding de la hero */
  .hero {
    padding: 2rem 1rem;
  }
}
/* ===== Ajustements responsive uniquement pour la page d'accueil ===== */
@media (max-width: 1100px) {
  body.index-page .side-image,
  
  body.index-page .side-image-services,
  body.index-page .side-image-services-right {
    position: static;      /* plus absolute */
    transform: none;       /* supprime la translation verticale */
    margin: 2rem auto;     /* centre les blocs */
    text-align: center;
  }

  body.index-page .side-image img,
  body.index-page .side-image-services img,
  body.index-page .side-image-services-right img {
    height: auto;
    width: 80%;            /* redimensionne pour écran moyen */
    max-width: 350px;
  }

  body.index-page .consultation-small-block {
    width: 90%;
    max-width: 500px;
  }
}

@media (max-width: 600px) {
  body.index-page .hero h2 {
    font-size: 2rem;
  }

  body.index-page .roles {
    font-size: 1rem;
  }

  body.index-page .side-image img,
  body.index-page .side-image-services img,
  body.index-page .side-image-services-right img,
  body.index-page .consultation-small-block {
    width: 90%;
    max-width: 320px;
  }

  body.index-page .hero {
    padding: 2rem 1rem;
  }
}/* --- Restaure la position à droite sur grands écrans --- */
@media (min-width: 1101px) {
  .consultation-small-block {
    position: absolute !important;
    right: 5% !important;
    top: 45% !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    width: 280px;
  }
}/* ===== Sécurisation du bloc citation – page d'accueil uniquement ===== */

body.index-page .consultation-small-block {
  position: absolute;
  right: 5%;
  top: 45%;
  width: 280px;
}

/* On empêche toute règle générique de le recentrer */
body.index-page .consultation-small-block {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ===== Bloc citation – toujours à droite (tous écrans) ===== */

body.index-page .consultation-small-block {
  position: absolute;
  right: 4%;
  top: 45%;
  width: 260px;
  margin: 0;
  transform: none;
  z-index: 5;
}
@media (max-width: 700px) {
  body.index-page .consultation-small-block {
    top: 60%;
    width: 220px;
    font-size: 0.85rem;
  }
}
/* Bloc consultation toujours à droite */
.consultation-small-block {
  position: absolute;
  right: 5%;       /* distance du bord droit */
  top: 45%;        /* position verticale */
  width: 280px;    /* largeur fixe */
  max-width: 90%;  /* limite pour petits écrans */
  transform: translateY(-50%);
  background-color: #F7ECEA;
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Ajustement pour très petits écrans (par exemple < 600px) */
@media (max-width: 600px) {
  .consultation-small-block {
    width: 200px;   /* réduit la largeur */
    right: 2%;      /* rapproche du bord pour ne pas dépasser */
    top: 40%;       /* ajuste un peu la hauteur */
  }
}
/* ==== PAGE D'ACCUEIL : RESPONSIVE ==== */

/* Grands écrans : bloc consultation à droite, image à gauche */
body.index-page .side-image {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
}

body.index-page .consultation-small-block {
  position: absolute;
  top: 45%;
  right: 5%;
  width: clamp(220px, 20%, 280px);
  max-width: calc(100% - 260px); /* jamais plus large que l’espace disponible */
  transform: translateY(-50%);
  z-index: 5;
}

/* Écrans moyens (≤1100px) : adaption largeur et espace */
@media (max-width: 1100px) {
  body.index-page .side-image {
    width: 220px; /* réduit l'image si besoin */
  }
  
  body.index-page .consultation-small-block {
    width: clamp(180px, 25%, 280px);
    max-width: calc(100% - 200px);
  }
}

/* Très petits écrans (≤600px) : bloc et image dans le flux pour éviter chevauchement */
@media (max-width: 600px) {
  body.index-page .side-image,
  body.index-page .consultation-small-block {
    position: static !important;
    transform: none !important;
    margin: 2rem auto !important;
    width: 90% !important;
    max-width: 320px !important;
    text-align: center;
  }

  body.index-page .hero {
    padding: 2rem 1rem;
  }

  body.index-page .hero h2 {
    font-size: 2rem;
  }

  body.index-page .roles {
    font-size: 1rem;
  }
}
/* Bloc consultation toujours à droite – page d'accueil */
body.index-page .consultation-small-block {
  position: absolute;
  top: 45%;
  right: 5%;
  width: 280px;      /* largeur fixe sur grands écrans */
  max-width: 90%;    /* limite pour petits écrans */
  transform: translateY(-50%);
  margin: 0 !important; /* supprime tout centrage automatique */
  z-index: 5;
}

/* Ajustement responsive pour écrans ≤ 1100px */
@media (max-width: 1100px) {
  body.index-page .consultation-small-block {
    width: clamp(180px, 25%, 280px);
    max-width: calc(100% - 200px);
  }
}

/* Ajustement responsive pour écrans ≤ 600px */
@media (max-width: 600px) {
  body.index-page .consultation-small-block {
    position: static !important; /* passe dans le flux pour éviter chevauchement */
    transform: none !important;
    margin: 2rem auto !important;
    width: 90% !important;
    max-width: 320px !important;
    text-align: center;
  }
}/* ===== Ajustement de la visibilité du fond sur la page d'accueil ===== */
body.index-page .hero {
  background-color: rgba(247, 243, 235, 0.15); /* très léger voile pour le texte */
  backdrop-filter: blur(3px);                  /* flou léger pour adoucir le texte sur fond */
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.3); /* bordure douce, optionnelle */
}
/* ===== Bloc hero : fond clair sans flou, image nette ===== */
body.index-page .hero {
  background-color: rgba(247, 243, 235, 0.12); /* voile très léger pour lisibilité */
  backdrop-filter: none;                        /* supprime tout flou */
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.15); /* bordure très discrète */
}
body.index-page .hero {
  background-color: rgba(247, 243, 235, 0.22); /* voile légèrement plus opaque */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
body.index-page .hero h2,
body.index-page .hero .roles {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7); /* ou 0 1px 3px rgba(0,0,0,0.3) selon le fond */
}
/* Descendre la ligne des rôles sous le titre */
body.index-page .hero .roles {
  margin-top: 2rem; /* ajuste la valeur selon ton visuel */
}/* Remonter légèrement le titre Jean-Yves FRANÇOIS */
body.index-page .hero h2 {
  margin-top: 2rem; /* augmente la valeur négative pour monter plus */
}

/* Descendre légèrement la ligne des rôles / thérapeute */
body.index-page .hero .roles {
  margin-top: 4rem; /* augmente pour descendre davantage */
}
/* ===== ÉTAPE 1 : Sticky footer – page Prestations ===== */

body.services-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.services-page main {
  flex: 1 1 auto;
}

body.services-page footer {
  margin-top: auto;
  flex-shrink: 0;
}
.services-page {
  overflow-x: hidden;
}
/* ===== Sécurité footer – page Prestations ===== */
body.services-page main {
  padding-bottom: 160px;
}