/* ==========================================================================
   INDEX — styles scoping
   (tout est limité à body[data-page="index"] pour éviter les effets de bord)
   ========================================================================== */

/* ---------- Conteneurs principaux ---------- */
body[data-page="index"] .freerdv,
body[data-page="index"] .photoAccueil,
body[data-page="index"] .intro,
body[data-page="index"] .vousAccompagner{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Espacement vertical */
body[data-page="index"] .intro,
body[data-page="index"] .vousAccompagner{
  margin-top: 56px;
}

/* ---------- Image “hero” ---------- */
body[data-page="index"] .photoAccueil img{
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ---------- Titres + filet à droite ---------- */
body[data-page="index"] .intro h2,
body[data-page="index"] .vousAccompagner h2{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: calc(var(--pad) + 12px);
  margin-bottom: 20px;
}
body[data-page="index"] .intro h2::after,
body[data-page="index"] .vousAccompagner h2::after{
  content: "";
  flex: 1 1 auto;
  height: 6px;
  min-width: 320px;               /* longueur mini du trait */
  background: #2a6d67;
  border-radius: 6px;
}

/* ==========================================================================
   ≥ 992px — Grilles desktop
   ========================================================================== */
@media (min-width: 992px){

  /* Variables locales (desktop) */
  body[data-page="index"]{
    --overlap: 110px;    /* recouvrement photo ↔ carte */
    --card-font: 18px;
    --card-leading: 1.85;

    --overlapB: 110px;   /* recouvrement pour “Vous accompagner” */
    --cardB-font: 18px;
    --cardB-leading: 1.85;
  }

  /* ---------- Bloc “Pour me présenter” ---------- */
  body[data-page="index"] .containerA{
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
  }

  body[data-page="index"] .imageA{
    grid-column: 1 / 7;
    grid-row: 1;
    width: 84%;
    height: 500px;
    align-self: start;
    margin-top: 70px;
    position: relative;
    z-index: 2; /* au-dessus de la carte */
  }

  body[data-page="index"] .texteA{
    grid-column: 4 / 13;
    grid-row: 1;
    align-self: start;
    background: #E8E0C8;
    padding: 60px 72px 60px calc(72px + var(--overlap));
    min-height: 580px;
    text-align: justify;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    z-index: 1; /* passe derrière la photo */
    transform: translateY(-18px);
    font-size: var(--card-font);
    line-height: var(--card-leading);
  }
  body[data-page="index"] .texteA p:last-child{ margin-bottom: 0; }

  /* ---------- Bloc “Vous accompagner” ---------- */
  body[data-page="index"] .containerB{
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  body[data-page="index"] .imageB{
    grid-column: 7 / 13;
    grid-row: 1;
    width: 85%;
    justify-self: end;
    position: relative;
    z-index: 2;
    margin-top: 18px;
  }

  body[data-page="index"] .texteB{
    grid-column: 1 / 9;
    grid-row: 1;
    align-self: start;
    background: #297272;
    color: #fff;
    padding: 56px calc(64px + var(--overlapB)) 56px 64px;
    min-height: 520px;
    text-align: justify;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    position: relative;
    z-index: 1; /* passe derrière l'image */
    transform: translateY(-18px);
    font-size: var(--cardB-font);
    line-height: var(--cardB-leading);
  }
  body[data-page="index"] .texteB p:last-child{ margin-bottom: 0; }

  /* Décor “feuille” (mask SVG)
     NOTE chemin CSS depuis styles/pages/index.css → ../../media/... */
  body[data-page="index"] .containerB::after{
    content: "";
    grid-column: 8;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-mask: url(./media/noun-leaf-7045396.svg) no-repeat center / contain;
            mask: url(./media/noun-leaf-7045396.svg) no-repeat center / contain;
    transform: translate(-53px, 190px);
    z-index: 99;            /* plus sûr pour ne pas passer sur le header */
    pointer-events: none;
  }
}


body[data-page="index"] .link-special {
  color: #297272;                  /* ton vert principal */
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

body[data-page="index"] .link-special::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #b66d2f;       /* ton marron doré */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

body[data-page="index"] .link-special:hover {
  color: #b66d2f;                  /* change de couleur au survol */
}

body[data-page="index"] .link-special:hover::after {
  transform: scaleX(1);            /* soulignement fluide */
}

/* ==========================================================================
   < 992px — Mobile & tablettes
   ========================================================================== */
@media (max-width: 991px){
  body[data-page="index"] .containerA,
  body[data-page="index"] .containerB{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="index"] .texteA,
  body[data-page="index"] .texteB{
    grid-column: 1;
    padding: 24px;
    min-height: initial;
    background-clip: padding-box;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    font-size: 16px;
    line-height: 1.6;
    transform: none;
  }

  body[data-page="index"] .imageA,
  body[data-page="index"] .imageB{
    grid-column: 1;
    width: 100%;
    margin: 0 auto;
    transform: none;
  }
}

/* === Fix 1 : éviter l'overflow du filet des <h2> en petits écrans === */
@media (max-width: 991px){
  body[data-page="index"] .intro h2::after,
  body[data-page="index"] .vousAccompagner h2::after{
    /* ne force plus 320px quand l'écran est étroit */
    min-width: 0;
  }
}

/* === Fix 2 : le bandeau RDV wrappe proprement en mobile paysage === */
@media (max-width: 991px){
  body[data-page="index"] .freerdv{
    display: flex;           /* au cas où il ne l'est pas sur cette page */
    /*flex-wrap: wrap;          <— important */
    align-items: center;
    /* gap: 12px 16px;           */
  }
  body[data-page="index"] .freerdv p{
    margin: 8px;
    flex: 1 1 240px;         /* prend la place dispo, peut passer dessous */
  }
  body[data-page="index"] .freerdv .boutonFreeRdv{
    flex: 0 0 auto;
  }
  body[data-page="index"] .freerdv img{
    max-width: 120px;        /* évite qu'elle force la largeur */
    height: auto;
  }
}

/* === Sécurité : clipper tout débordement horizontal de la page d’accueil === */
/* (utile si un décor positionné/en transform déborde d’1-2px) */
body[data-page="index"]{
  overflow-x: clip; /* moderne; sinon: overflow-x: hidden; */
}