/* Page d'accueil — chargé sur elle seule (repris du <style> de accueil/index.html, sections 5 à 11). */

/* Sections un peu plus aérées que sur les autres pages, comme sur la page locale. */
.section{ padding-block:4rem; }
@media (min-width:768px){ .section{ padding-block:4.5rem; } }

/* ============================================================
   5. HÉRO
   Une colonne sur mobile, deux à partir de 900px.
   Le texte est aligné à gauche : c'est le principal changement
   par rapport à l'ancienne page, où tout était centré.
   ============================================================ */
.hero{ background:linear-gradient(180deg, var(--bleu-brume) 0%, var(--blanc) 100%); }
.hero__grille{
  display:grid; gap:2.5rem;
  padding-block:3rem 3.5rem;
  align-items:center;
}
@media (min-width:900px){
  .hero__grille{ grid-template-columns:1fr 1fr; gap:4rem; padding-block:4.5rem 5rem; }
}
/* margin-top:1em — sur la page locale, le surtitre gardait la marge haute que le navigateur
   donne à tout paragraphe ; blocs.css (chargé partout) la remet à zéro. Rétablie ici. */
.hero__surtitre{
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bleu-moyen); margin-top:1em; margin-bottom:1.25rem;
}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(2rem, 5.2vw, 3.15rem);
  color:var(--bleu);
  margin-bottom:1.25rem;
}
.hero__sous-titre{
  font-size:clamp(1.05rem, 2.2vw, 1.25rem);
  color:var(--gris); max-width:34ch; margin-bottom:2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__image{ position:relative; }
.hero__image img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:3px;
}
/* Filet décoratif repris du trait du logo */
.hero__image::after{
  content:""; position:absolute; inset:auto -14px -14px auto;
  width:55%; height:55%; border-right:1px solid var(--bleu-clair);
  border-bottom:1px solid var(--bleu-clair); z-index:-1;
}

/* ============================================================
   6. INTRODUCTION
   ============================================================ */
.intro{ background:var(--blanc); }
.intro p{ max-width:60ch; margin:0 auto; text-align:center; font-size:1.2rem; line-height:1.8; }

/* Encart destiné aux praticiens — remplace les encarts identiques
   répétés sur quatre pages de l'ancien site. */
.encart-praticiens{
  max-width:820px; margin:3rem auto 0; padding:1.35rem 1.5rem;
  background:var(--creme); border-left:2px solid var(--bleu-clair);
  display:grid; gap:1rem; align-items:center;
}
@media (min-width:768px){
  .encart-praticiens{ grid-template-columns:1fr auto; padding:1.5rem 1.85rem; gap:1.75rem; }
}
.encart-praticiens h3{ font-family:var(--serif); font-size:1.05rem; color:var(--bleu); margin-bottom:.2rem; }
.encart-praticiens p{ margin:0; color:var(--gris); font-size:.9rem; line-height:1.65; text-align:left; max-width:none; }
.encart-praticiens .bouton{ font-size:.88rem; padding:.7rem 1.35rem; }

/* ============================================================
   7. LES TROIS ESPACES
   Photos en cercle et noir et blanc : c'est la signature visuelle
   du site, on la conserve.
   ============================================================ */
.espaces{ background:var(--bleu-brume); }
.espaces__grille{ display:grid; gap:2.5rem; }
@media (min-width:768px){ .espaces__grille{ grid-template-columns:repeat(3,1fr); gap:2rem; } }

.espace{
  background:var(--blanc); border-radius:3px; padding:2.25rem 1.5rem;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.espace__photo{
  width:170px; height:170px; border-radius:50%; object-fit:cover; margin-bottom:1.5rem;
}
.espace h3{ font-family:var(--serif); font-size:1.25rem; color:var(--bleu); margin-bottom:.5rem; }
.espace__nom{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bleu-moyen); margin-bottom:.75rem; }
.espace p{ color:var(--gris); font-size:.95rem; margin:0 0 1.5rem; }
.espace .bouton{ margin-top:auto; }
/* Un seul accès au planning pour les trois espaces : l'ancien site répétait
   le même lien dans chaque carte. */
.espaces__acces{ text-align:center; margin:2.5rem 0 0; }
.carte__lien{ margin:.75rem 0 0; font-size:.9rem; }

/* ============================================================
   8. BANDEAU REBOZO
   ============================================================ */
.rebozo{ position:relative; min-height:380px; display:grid; align-items:center; }
.rebozo__fond{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rebozo__voile{ position:absolute; inset:0; background:rgba(20,42,50,.42); }
.rebozo__carte{
  position:relative; background:rgba(255,255,255,.94);
  padding:2.5rem 2rem; max-width:430px; border-radius:3px;
  margin:3.5rem auto; text-align:center;
}
@media (min-width:768px){ .rebozo__carte{ margin-inline:0 auto; margin-left:0; } }
.rebozo__carte h2{ font-family:var(--serif); font-size:1.75rem; color:var(--bleu); margin-bottom:.5rem; }
.rebozo__carte p{ color:var(--gris); margin:0 0 1.5rem; }

/* ============================================================
   9. ATELIERS
   ============================================================ */
.atelier-carte{
  display:grid; gap:1.5rem; align-items:center;
  background:var(--blanc);
  border:1px solid #e4eaec; border-radius:3px; padding:1.5rem;
  max-width:760px; margin-inline:auto;
}
@media (min-width:600px){ .atelier-carte{ grid-template-columns:120px 1fr auto; padding:1.75rem; } }
.atelier-carte img{ width:120px; height:120px; object-fit:cover; border-radius:50%; filter:grayscale(1); }
.atelier-carte h3{ font-family:var(--serif); font-size:1.2rem; color:var(--bleu); margin-bottom:.25rem; }
.atelier-carte p{ margin:0; color:var(--gris); font-size:.95rem; }
.atelier-carte__date{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bleu-moyen); margin-bottom:.4rem; }
.ateliers-liste{ display:grid; gap:1.25rem; }
.ateliers-etat{ text-align:center; color:var(--gris); margin:0; }

/* ============================================================
   10. INFORMATIONS PRATIQUES
   Texte aligné à gauche : ce bloc était le plus pénible à lire
   sur l'ancienne page, entièrement centré.
   ============================================================ */
.infos-pratiques{ background:var(--creme); }
.infos-pratiques__contenu{ max-width:68ch; margin-inline:auto; }
.infos-pratiques__contenu p{ margin:0 0 1.25rem; }
.infos-pratiques__contenu p:last-child{ margin-bottom:0; }
.infos-pratiques strong{ font-weight:500; color:var(--encre); }

/* ============================================================
   11. NOUS TROUVER
   ============================================================ */
.trouver__grille{ display:grid; gap:2.5rem; }
@media (min-width:900px){ .trouver__grille{ grid-template-columns:1fr 1.25fr; gap:3.5rem; align-items:start; } }
.adresse{ font-style:normal; }
.adresse h3{ font-family:var(--serif); font-size:1.35rem; color:var(--bleu); margin-bottom:1rem; }
.adresse p{ margin:0 0 1rem; }
.adresse .repere{ color:var(--gris); font-size:.95rem; }
.carte{ width:100%; height:340px; border:1px solid #e4eaec; border-radius:3px; }