/* ============================================================
   GREEN PATIO — feuille de style premium (zen / spa)
   Palette claire & naturelle · serif élégante Cormorant + Inter
   ============================================================ */

:root{
  --cream:#f7f3ea;        /* fond page */
  --cream2:#efe8da;       /* fond alterné */
  --paper:#fffdf8;        /* cartes */
  --ink:#2f332b;          /* texte principal */
  --ink2:#6d7265;         /* texte secondaire */
  --ink3:#9a9d90;         /* texte ténu */
  --line:rgba(47,51,43,.13);
  --line-soft:rgba(47,51,43,.07);
  --green:#4e6b48;        /* vert sauge profond */
  --green2:#6f8c63;       /* vert moyen */
  --green-soft:#aebfa0;   /* vert clair */
  --clay:#b3895f;         /* terre douce (accent rare) */
  --shadow:0 18px 50px rgba(47,51,43,.10);
  --shadow-sm:0 8px 24px rgba(47,51,43,.07);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --wrap:880px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{
  font-family:var(--sans);background:var(--cream);color:var(--ink);
  font-size:16px;line-height:1.75;letter-spacing:.1px;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--green);text-decoration:none;transition:color .25s;}
a:hover{color:var(--clay);}

/* ---------- Titres ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.15;letter-spacing:.2px;}
h1{font-size:clamp(32px,5vw,52px);}
h2{font-size:clamp(24px,3.4vw,34px);}
h3{font-size:clamp(20px,2.6vw,25px);}
h4{font-size:18px;font-weight:600;font-family:var(--sans);letter-spacing:.3px;}

/* petit ornement botanique sous les titres de section */
main > h2,
main section > h2{position:relative;text-align:center;margin:6px 0 26px;}
main > h2::after,
main section > h2::after{content:'';display:block;width:42px;height:1px;
  background:var(--green-soft);margin:16px auto 0;}

/* ---------- Conteneur ---------- */
main{max-width:var(--wrap);margin:0 auto;padding:0 26px 90px;}
main section{padding:46px 0;border-bottom:1px solid var(--line-soft);}
main section:last-of-type{border-bottom:none;}
p{margin:0 0 16px;color:var(--ink2);}
main p{max-width:64ch;margin-left:auto;margin-right:auto;}
strong{color:var(--ink);font-weight:600;}
em{color:var(--ink);}
ul{margin:0 auto 18px;max-width:62ch;padding-left:1.1em;color:var(--ink2);}
li{margin:7px 0;}

/* ---------- Navigation ---------- */
.bloc:has(button){
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(6px,2.4vw,34px);
  padding:18px 16px;width:100%;
  background:rgba(255,253,248,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:80;
}
.bloc button{
  background:none;border:none;cursor:pointer;font-family:var(--sans);
  font-size:12px;letter-spacing:1.8px;text-transform:uppercase;font-weight:500;
  color:var(--ink2);padding:7px 3px;position:relative;transition:color .3s;
}
.bloc button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--green);transform:scaleX(0);transform-origin:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1);}
.bloc button:hover{color:var(--green);}
.bloc button:hover::after{transform:scaleX(1);}

/* étiquette .bloc sans bouton (ex: « Hypnose ») */
.bloc:not(:has(button)){
  text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:3px;
  text-transform:uppercase;color:var(--green2);font-weight:600;margin-top:10px;}

/* ============================================================
   HERO / EN-TÊTE
   ============================================================ */

/* Accueil — photo du studio en plein écran (repris de l'ancien site) */
.page-home .hero{
  height:100vh;
  background:linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.6)),
    url("../image/studio green patio.jpg") center/cover no-repeat fixed;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.page-home .hero img{max-width:300px;border-radius:10px;margin-bottom:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.3);}
.page-home .hero h1{font-size:3rem;color:#3b3b00;background-color:rgba(255,255,255,.7);
  padding:1rem 2rem;border-radius:10px;margin:0;z-index:1;text-shadow:none;}
.page-home .hero p{color:#3b3b00;background-color:rgba(255,255,255,.7);
  padding:1rem 2rem;border-radius:5px;margin:6px;text-shadow:none;}

/* En-tête simple (yoga / hypnose / actualités / contact) */
header{background:var(--cream2);border-bottom:1px solid var(--line);
  padding:48px 24px 40px;text-align:center;}
header img{width:min(230px,64vw);margin:0 auto 22px;border-radius:12px;box-shadow:var(--shadow-sm);}
header h1{font-size:clamp(30px,5vw,50px);color:var(--green);}
header h2{font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--ink2);font-size:clamp(19px,2.6vw,25px);max-width:30ch;margin:14px auto 4px;}
header > p{font-family:var(--sans);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink3);}

/* hero interne avec .hero-content (actualités / contact) */
header .hero{display:flex;flex-direction:column;align-items:center;}
header .hero-content h1{margin-top:6px;}

/* ============================================================
   ACCUEIL — contenu
   ============================================================ */
/* citation d'accueil — discrète, même style que celle de la page Yoga */
.quote{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(19px,2.6vw,25px);color:var(--ink2);text-align:center;
  max-width:34ch;margin:10px auto 38px;line-height:1.4;}
.quote small{display:block;font-style:normal;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink3);margin-top:12px;font-family:var(--sans);}
.intro{text-align:center;font-family:var(--serif);font-size:21px;color:var(--ink);}

/* grilles d'images (actu accueil + activités) */
.news-grid,.news-grid-bottom,.grid-activites{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;margin:30px auto 0;}
/* activités : 2 colonnes équilibrées (Yoga + Hypnose côte à côte, centrés) */
.grid-activites{grid-template-columns:repeat(2,1fr);}
/* affiches : image entière (jamais recadrée), 2 colonnes centrées */
.news-grid.affiches{grid-template-columns:repeat(2,1fr);max-width:760px;
  align-items:start;}
.news-grid.affiches .news-item img{height:auto;object-fit:contain;}
/* grille à 2 cartes : 2 colonnes équilibrées (pas de 3e colonne vide) */
.news-grid.deux{grid-template-columns:repeat(2,1fr);max-width:760px;}
.news-item,.grid-activites .item{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;}
.news-item:hover,.grid-activites .item:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.news-item img{width:100%;height:200px;object-fit:cover;}
.grid-activites .item img{width:100%;height:270px;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1);}
.grid-activites .item:hover img{transform:scale(1.05);}
.news-item h2,.news-item h3{padding:16px 18px 4px;font-size:19px;}
.news-item p{padding:0 18px 16px;margin:0;font-size:14px;}
.grid-activites .item{position:relative;}
.grid-activites .item a{display:block;}
.grid-activites .item h2{position:absolute;inset:auto 0 0 0;margin:0;z-index:2;
  padding:56px 18px 22px;color:#fffefb;font-size:27px;text-align:center;letter-spacing:.5px;
  text-shadow:0 2px 18px rgba(15,20,12,.65);
  background:linear-gradient(transparent,rgba(18,26,15,.35) 38%,rgba(18,26,15,.82));}
.grid-activites .item h2::before{content:'';display:block;width:30px;height:1px;
  background:rgba(255,255,255,.6);margin:0 auto 12px;}
.grid-activites .item.grand{grid-column:1/-1;}
.grid-activites .item.grand img{height:340px;}

/* ============================================================
   YOGA — vidéo, planning, tarifs, profs
   ============================================================ */
.bloque,.btn-pdf{display:inline-block;font-family:var(--sans);font-weight:500;
  font-size:13px;letter-spacing:1px;padding:13px 26px;border-radius:100px;
  background:var(--green);color:#fffdf8;box-shadow:var(--shadow-sm);
  transition:transform .3s,background .3s;}
.bloque:hover,.btn-pdf:hover{background:var(--green2);color:#fffdf8;transform:translateY(-2px);}

main img{border-radius:16px;box-shadow:var(--shadow-sm);margin:8px auto 0;}
/* images de contenu (hors cartes/bannières) : taille homogène et centrée */
main section > img,main section > a > img{max-width:min(560px,100%);}

/* Planning — une seule ligne, comme un agenda :
   matin en haut, midi au milieu, soir en bas (rangées partagées) */
.planning{display:grid;grid-template-columns:repeat(6,1fr);
  grid-template-rows:auto auto auto auto;
  gap:10px;margin:6px auto 0;}
.planning .day{grid-row:1 / span 4;display:grid;grid-template-rows:subgrid;
  row-gap:8px;}
.planning .day > h2{grid-row:1;}
.slot{display:flex;flex-direction:column;gap:8px;}
.slot.matin{grid-row:2;}
.slot.midi{grid-row:3;}
.slot.soir{grid-row:4;}
.slot .course{margin-bottom:0;}
/* cours cliquable (affiche Mysore) */
a.course{color:#3a3f31;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;}
a.course:hover{color:#2f332b;transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(47,51,43,.15);}
@media(max-width:900px){
  .planning{grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:14px;}
  .planning .day{grid-row:auto;display:block;}
  .slot{margin-top:8px;}
  .slot:empty{display:none;margin:0;}
}
.day{background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;
  padding:12px 9px;box-shadow:var(--shadow-sm);}
.day > h2{font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--green2);text-align:center;margin:0 0 12px;font-weight:600;}
.day > h2::after{display:none;}
.course{border-radius:12px;padding:10px 7px;font-size:11.5px;line-height:1.4;
  color:#3a3f31;text-align:center;margin-bottom:8px;font-family:var(--sans);}
.course:last-child{margin-bottom:0;}
.course b{display:block;margin-top:4px;font-size:12.5px;color:#2f332b;}
/* une couleur pastel par professeur */
.c-raphael{background:#eccfcc;}
.c-claire{background:#f0e2c6;}
.c-corentin{background:#cfe6d3;}
/* nom du professeur dans le créneau */
.prof-tag{display:block;margin-top:3px;font-size:10.5px;font-style:italic;
  color:rgba(47,51,43,.62);letter-spacing:.3px;}

/* astuce au-dessus du planning */
.astuce-survol{text-align:center;font-family:var(--serif);font-style:italic;
  font-size:17px;color:var(--green2);margin-bottom:20px;}

/* infobulle descriptive au survol d'un créneau */
.course[data-info]{position:relative;cursor:help;}
a.course[data-info]{cursor:pointer;}
.course[data-info]::after{
  content:attr(data-info);position:absolute;left:50%;bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px);width:min(270px,72vw);
  background:var(--paper);color:var(--ink2);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;font-size:12.5px;line-height:1.6;
  font-weight:400;text-align:left;box-shadow:var(--shadow);z-index:70;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility .3s;}
.course[data-info]::before{
  content:'';position:absolute;left:50%;bottom:calc(100% + 5px);
  transform:translateX(-50%) rotate(45deg);width:12px;height:12px;
  background:var(--paper);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);z-index:71;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s;}
.course[data-info]:hover::after{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);}
.course[data-info]:hover::before{opacity:1;visibility:visible;}
/* premier / dernier jour : infobulle recalée pour rester dans l'écran */
.planning .day:first-child .course[data-info]::after{left:0;transform:translateX(0) translateY(6px);}
.planning .day:first-child .course[data-info]:hover::after{transform:translateX(0) translateY(0);}
.planning .day:last-child .course[data-info]::after{left:auto;right:0;transform:translateX(0) translateY(6px);}
.planning .day:last-child .course[data-info]:hover::after{transform:translateX(0) translateY(0);}

.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;
  margin:22px auto 0;max-width:760px;}
.legend-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);}
.legend-color{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);}
.legend-color.raphael{background:#eccfcc;}
.legend-color.claire{background:#f0e2c6;}
.legend-color.corentin{background:#cfe6d3;}

/* Galerie photos — collage */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:130px;gap:14px;max-width:820px;margin:6px auto 0;}
.g-item{margin:0;border-radius:16px;overflow:hidden;position:relative;
  box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;}
.g-item:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.g-item img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;
  box-shadow:none;cursor:zoom-in;
  transition:transform .8s cubic-bezier(.16,1,.3,1);}
.g-item:hover img{transform:scale(1.05);}
.g-item.large{grid-column:span 2;grid-row:span 2;}
.g-item.tall{grid-row:span 2;}
.g-item.bandeau{grid-column:1 / -1;grid-row:span 2;}
.galerie-note{text-align:center;font-size:12.5px;font-style:italic;
  color:var(--ink3);margin:14px auto 0;}
@media(max-width:600px){
  .galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px;gap:10px;}
  .g-item.large,.g-item.bandeau{grid-column:1 / -1;}
}

/* visionneuse plein écran */
.lightbox{position:fixed;inset:0;z-index:120;cursor:zoom-out;
  background:rgba(28,31,25,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:4vh 4vw;}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);}

/* Tarifs — cartes (rectangles) */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;margin:26px auto 0;}
.tarifs.deux{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;}
.tarifs.une{grid-template-columns:1fr;max-width:640px;}
.tarif{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:18px;padding:26px 20px 22px;box-shadow:var(--shadow-sm);
  text-align:center;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;}
.tarif:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.tarif h3{font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--ink2);
  margin:0 0 10px;line-height:1.5;}
.tarif .prix{font-family:var(--serif);font-size:clamp(28px,3vw,36px);
  font-weight:500;color:var(--green);margin:2px 0 10px;line-height:1.1;}
.tarif .det{font-size:13px;color:var(--ink2);margin:0;line-height:1.55;}
@media(max-width:600px){
  .tarifs,.tarifs.deux{grid-template-columns:1fr;}
}

/* Tableaux de tarifs — épurés */
table{width:100%;max-width:780px;margin:14px auto 26px;border-collapse:collapse;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow-sm);}
td{padding:15px 18px;border-bottom:1px solid var(--line-soft);vertical-align:top;
  font-size:14px;color:var(--ink2);line-height:1.55;}
tr:last-child td{border-bottom:none;}
tr td:first-child{color:var(--ink);font-weight:500;}
tr:nth-child(even){background:rgba(110,140,99,.045);}
td ul{margin:8px 0 0;}
.highlight{background:linear-gradient(transparent 60%,rgba(110,140,99,.32) 0);
  padding:0 3px;color:var(--ink);font-weight:600;}

/* Profs / studios — petites images */
main section h3{text-align:center;color:var(--green);margin:30px 0 8px;}
#v1,#RTY200,#n1,#p,#pp,#T1{text-align:center;}
#p{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--green);}
#pp{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);}

/* ============================================================
   PROFESSEURS — fiches
   ============================================================ */
.prof{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:14px 40px;}
.prof > img{width:min(300px,78vw);border-radius:18px;box-shadow:var(--shadow);
  flex:0 0 auto;position:sticky;top:92px;}
.prof .bio{flex:1;min-width:min(300px,100%);max-width:58ch;text-align:left;}
.prof .bio h3{text-align:left;color:var(--green);margin:4px 0 2px;
  font-size:clamp(24px,3vw,30px);}
.prof .bio p{margin-left:0;margin-right:0;text-align:justify;}
.prof-role{font-family:var(--sans);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink3);margin-bottom:18px;}
.prof-badge{width:min(190px,50vw);margin:14px 0 0;}
@media(max-width:700px){
  .prof{justify-content:center;}
  .prof > img{position:static;}
  .prof .bio h3,.prof .bio .prof-role{text-align:center;}
}

/* ============================================================
   HYPNOSE — profil
   ============================================================ */
.profile{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:30px;text-align:left;}
.profile img{width:min(260px,70vw);border-radius:18px;box-shadow:var(--shadow);flex:0 0 auto;}
.profile > div{max-width:420px;}
#centre{text-align:center;}

/* ============================================================
   CONTACT
   ============================================================ */
.content-section{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:20px;box-shadow:var(--shadow-sm);padding:38px 30px;margin:30px auto 0;
  max-width:620px;text-align:center;}
.content-section h1{color:var(--green);font-size:clamp(26px,4vw,38px);margin-bottom:8px;}
.content-section h2{font-size:21px;margin-top:24px;}
.content-section h2::after{display:none;}
.content-section h3{color:var(--green2);margin-top:22px;}
.tel{font-family:var(--serif);font-size:26px;color:var(--ink);margin:2px 0 4px;letter-spacing:1px;}
#hebergeur,#adresse,#notice{font-size:13px;color:var(--ink3);margin:2px 0;}
/* plan d'accès (OpenStreetMap) */
.map-wrap{margin:16px auto 6px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);}
.map-wrap iframe{display:block;width:100%;height:300px;border:0;}
.form-message{display:none;text-align:center;padding:14px;border-radius:12px;margin:18px auto;max-width:620px;}
.form-message.success{background:rgba(110,140,99,.15);color:var(--green);}
.form-message.error{background:rgba(179,90,80,.12);color:#a4503f;}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
footer{text-align:center;padding:34px 24px;color:var(--ink3);
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--cream2);border-top:1px solid var(--line);}
footer a{color:var(--ink3);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:600px){
  .page-home .hero h1{font-size:1.7rem;padding:.8rem 1.2rem;}
  .page-home .hero p{font-size:.95rem;}
  .profile{text-align:center;}
  .planning{grid-template-columns:repeat(2,1fr);}
  td{padding:12px 13px;font-size:13px;}
  main{padding:0 18px 70px;}
  .news-grid.affiches,.news-grid.deux,.grid-activites{grid-template-columns:1fr;}
  .grid-activites .item img{height:220px;}
  .grid-activites .item.grand img{height:240px;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto;}}