/* ══════════════════════════════════
   Myriam Bonnemaison – Sophrologue
   styles.css
══════════════════════════════════ */

:root {
  --teal:        #2a9d8f;
  --teal-deep:   #1a7a6e;
  --teal-light:  #4fc3b3;
  --teal-pale:   #e0f5f3;
  --turq:        #00b4d8;
  --turq-light:  #90e0ef;
  --turq-pale:   #caf0f8;
  --sand:        #f4f1eb;
  --sand-warm:   #e8e0d0;
  --gold:        #c9a84c;
  --dark:        #0d2b2a;
  --text:        #1e3a38;
  --muted:       #4a7a76;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Jost',sans-serif; background:var(--sand); color:var(--text); overflow-x:hidden; }

/* ── TOP BAR ── */
.topbar {
  background:var(--teal-deep);
  padding:0.5rem 3rem;
  display:flex; justify-content:flex-end; gap:2rem;
}
.topbar a {
  color:var(--turq-light); font-size:0.78rem; text-decoration:none;
  letter-spacing:0.04em; transition:color 0.2s;
}
.topbar a:hover { color:#fff; }

/* ── HEADER ── */
header {
  background:#fff;
  box-shadow:0 2px 20px rgba(42,157,143,0.1);
  position:sticky; top:0; z-index:200;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 3rem 0;
}
.logo-wrap { display:flex; align-items:center; gap:0.9rem; }
.logo { font-family:'Playfair Display',serif; display:flex; flex-direction:column; line-height:1.1; text-decoration:none; }
.logo-name { font-size:1.3rem; font-weight:700; color:var(--teal-deep); }
.logo-sub { font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal); font-family:'Jost',sans-serif; font-weight:400; }

/* ── TABS ── */
.tabs {
  display:flex; list-style:none;
  padding:0 3rem; border-top:1px solid rgba(42,157,143,0.1);
  margin-top:0.7rem; overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  background:none; border:none; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:0.8rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); padding:0.85rem 1.5rem;
  border-bottom:2.5px solid transparent;
  transition:color 0.25s, border-color 0.25s; white-space:nowrap;
}
.tab-btn:hover { color:var(--teal); }
.tab-btn.active { color:var(--teal-deep); border-bottom-color:var(--teal); }
.tab-cta {
  margin-left:auto; background:var(--teal); color:#fff !important;
  border-radius:2px; padding:0.65rem 1.8rem;
  font-size:0.78rem; border-bottom:none !important;
  transition:background 0.3s !important;
}
.tab-cta:hover { background:var(--teal-deep) !important; }
.tab-cta.active { background:var(--teal-deep) !important; border-bottom:none !important; }

/* ── PANELS ── */
.panel { display:none; animation:panelIn 0.4s ease both; }
.panel.active { display:block; }
@keyframes panelIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }

/* ── HERO ── */
.hero { min-height:calc(100vh - 115px); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.hero-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem 4rem 4rem 5rem; background:#fff;
}

/* ── ROTATING FUN BADGE ── */
.fun-badge {
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg, var(--teal), var(--turq));
  color:#fff; border-radius:999px;
  padding:0.5rem 1.4rem; margin-bottom:1.6rem;
  font-size:0.82rem; font-weight:500; letter-spacing:0.04em;
  box-shadow:0 4px 18px rgba(42,157,143,0.35);
  animation:badgePop 0.6s 0.1s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes badgePop { from{opacity:0;transform:scale(0.7);} to{opacity:1;transform:scale(1);} }
@keyframes badgeFade { 0%{opacity:1;} 20%{opacity:0;} 55%{opacity:0;} 75%{opacity:1;} 100%{opacity:1;} }
.fun-badge.cycling { animation:badgeFade 0.7s ease; }

.hero-title { font-family:'Playfair Display',serif; font-size:3.5rem; line-height:1.08; color:var(--dark); margin-bottom:1.4rem; }
.hero-title em { color:var(--teal); font-style:italic; }
.hero-sub { font-family:'Cormorant Garamond',serif; font-size:1.18rem; line-height:1.75; color:var(--muted); max-width:420px; margin-bottom:2.6rem; }
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; }

/* ── BUTTONS ── */
.btn-primary {
  background:var(--teal); color:#fff; padding:1rem 2.4rem; border:none; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; display:inline-block; transition:background 0.3s, transform 0.2s;
}
.btn-primary:hover { background:var(--teal-deep); transform:translateY(-2px); }
.btn-outline {
  background:transparent; color:var(--teal); padding:1rem 2.4rem;
  border:1.5px solid var(--teal); cursor:pointer;
  font-family:'Jost',sans-serif; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; display:inline-block; transition:all 0.3s;
}
.btn-outline:hover { background:var(--teal); color:#fff; }

/* ── WHEAT SCENE ── */
.hero-right { position:relative; overflow:hidden; }
.wheat-scene {
  width:100%; height:100%;
  background:linear-gradient(180deg,
    #9ad8f0 0%, #5ec8e0 18%, #2ab8c0 32%,
    #2a9d8f 45%, #1e8070 55%,
    #c8b060 68%, #a87f20 78%,
    #6a4e10 90%, #3a2c08 100%
  );
  position:relative; overflow:hidden;
}
.sun {
  position:absolute; top:10%; left:50%; transform:translateX(-50%);
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe080 40%,rgba(255,220,80,0) 70%);
  box-shadow:0 0 60px 30px rgba(255,220,120,0.5);
  animation:sunGlow 4s ease-in-out infinite alternate;
}
@keyframes sunGlow {
  from { box-shadow:0 0 50px 25px rgba(255,220,80,0.4); }
  to   { box-shadow:0 0 80px 45px rgba(255,220,80,0.65); }
}
.birds { position:absolute; top:22%; left:12%; display:flex; gap:16px; }
.bird {
  width:16px; height:7px; border-top:2px solid rgba(10,60,90,0.55);
  border-radius:50% 50% 0 0; position:relative;
  animation:fly 6s ease-in-out infinite;
}
.bird::before {
  content:''; position:absolute; right:-8px; top:-2px;
  width:8px; height:7px; border-top:2px solid rgba(10,60,90,0.55); border-radius:50% 50% 0 0;
}
.bird:nth-child(2) { animation-delay:-2s; transform:scale(0.8) translateY(5px); }
.bird:nth-child(3) { animation-delay:-4s; transform:scale(0.65) translateY(10px); }
@keyframes fly { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

.stalk-layer {
  position:absolute; bottom:0; left:0; width:100%; height:60%;
  display:flex; align-items:flex-end; justify-content:space-around;
}
.stalk {
  width:5px; background:linear-gradient(to top,#6a4e10 0%,#b89030 55%,#d8c060 100%);
  border-radius:3px 3px 0 0; position:relative; transform-origin:bottom center;
  animation:sway 3s ease-in-out infinite alternate;
}
.stalk:nth-child(even) { animation-delay:-1.5s; }
.stalk:nth-child(3n) { animation-delay:-0.7s; }
.stalk::before {
  content:''; position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width:12px; height:30px; background:linear-gradient(to top,#c8a020,#e8c840);
  clip-path:polygon(50% 0%,80% 20%,100% 50%,80% 80%,50% 100%,20% 80%,0% 50%,20% 20%);
}
@keyframes sway { from{transform:rotate(-3deg);} to{transform:rotate(3deg);} }

.hero-quote {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-family:'Playfair Display',serif; font-style:italic; font-size:0.95rem;
  color:rgba(255,255,255,0.88); white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,0.3);
}

/* ── STATS BAND ── */
.stats-band {
  background:var(--teal-deep);
  display:flex; justify-content:space-around; align-items:center;
  padding:2.4rem 4rem; flex-wrap:wrap; gap:2rem;
}
.stat { text-align:center; color:#fff; }
.stat-num { font-family:'Playfair Display',serif; font-size:2.4rem; display:block; line-height:1; }
.stat-label { font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; opacity:0.75; margin-top:0.4rem; }

/* ── SECTION BASE ── */
.section { padding:5rem 5rem; }
.section-tag { font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--teal); margin-bottom:0.9rem; display:block; }
.section-title { font-family:'Playfair Display',serif; font-size:2.4rem; line-height:1.2; color:var(--dark); margin-bottom:1.4rem; }
.section-title em { color:var(--teal); font-style:italic; }
.section-body { font-family:'Cormorant Garamond',serif; font-size:1.15rem; line-height:1.8; color:var(--muted); max-width:620px; }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-visual { position:relative; height:500px; }
.about-img-bg {
  width:100%; height:100%;
  background:linear-gradient(135deg,var(--turq-pale) 0%,var(--teal-pale) 50%,#b2e8e0 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.zen-circles { position:relative; width:200px; height:200px; }
.zen-ring {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px solid rgba(42,157,143,0.35);
  animation:ripple 4s ease-in-out infinite;
}
.zen-ring:nth-child(1) { width:50px;  height:50px;  animation-delay:0s; }
.zen-ring:nth-child(2) { width:90px;  height:90px;  animation-delay:0.6s; }
.zen-ring:nth-child(3) { width:135px; height:135px; animation-delay:1.2s; }
.zen-ring:nth-child(4) { width:185px; height:185px; animation-delay:1.8s; }
@keyframes ripple {
  0%   { opacity:0.9; transform:translate(-50%,-50%) scale(0.96); }
  50%  { opacity:0.45; transform:translate(-50%,-50%) scale(1.04); }
  100% { opacity:0.9; transform:translate(-50%,-50%) scale(0.96); }
}
.zen-dot {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 18px rgba(42,157,143,0.5);
}
.about-card {
  position:absolute; bottom:-1.5rem; right:-1.5rem;
  background:#fff; padding:1.5rem 2rem; border-left:3px solid var(--teal);
  font-family:'Playfair Display',serif; font-style:italic; font-size:0.93rem;
  color:var(--teal-deep); max-width:260px; box-shadow:0 8px 32px rgba(42,157,143,0.12);
}
.diplome-badge {
  display:inline-flex; align-items:center; gap:0.6rem;
  background:var(--teal-pale); border:1px solid var(--teal-light);
  padding:0.7rem 1.2rem; margin-top:2rem;
  font-size:0.82rem; color:var(--teal-deep); font-weight:500; letter-spacing:0.04em;
}

/* ── SPECIALITES ── */
.spec-intro { max-width:600px; margin-bottom:3.5rem; }
.spec-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; }
.spec-card {
  background:#fff; border-top:3px solid var(--teal-light);
  padding:2.5rem 2rem; position:relative;
  transition:transform 0.3s, box-shadow 0.3s;
}
.spec-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(42,157,143,0.12); border-top-color:var(--teal); }
.spec-icon { font-size:2.5rem; margin-bottom:1rem; display:block; }
.spec-card h3 { font-family:'Playfair Display',serif; font-size:1.3rem; margin-bottom:0.7rem; color:var(--dark); }
.spec-card p { font-size:0.9rem; line-height:1.7; color:var(--muted); }

/* ── SEANCE ── */
.seance-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.seance-visual { position:relative; height:460px; }
.sunset-scene {
  width:100%; height:100%;
  background:linear-gradient(180deg,
    #90e0ef 0%, #4fc3b3 25%, #2a9d8f 45%,
    #c8b060 62%, #a08020 78%, #5c4010 100%
  );
  position:relative; overflow:hidden;
}
.sunset-sun {
  position:absolute; top:16%; left:50%; transform:translateX(-50%);
  width:65px; height:65px; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffe060 40%,rgba(255,200,60,0) 70%);
  box-shadow:0 0 40px 20px rgba(255,200,60,0.5);
}
.horizon-line { position:absolute; bottom:42%; width:100%; height:1px; background:rgba(255,255,255,0.18); }
.sunset-stalks { position:absolute; bottom:0; width:100%; display:flex; align-items:flex-end; justify-content:space-around; height:48%; }
.ss {
  width:4px; background:linear-gradient(to top,#4a3010,#8b5a18,#c09010);
  border-radius:3px 3px 0 0; position:relative; transform-origin:bottom;
  animation:sway 3.5s ease-in-out infinite alternate;
}
.ss::before {
  content:''; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:10px; height:24px; background:linear-gradient(to top,#b08010,#e0b020);
  clip-path:polygon(30% 0%,70% 0%,100% 40%,70% 100%,30% 100%,0% 40%);
}

.steps-list { display:flex; flex-direction:column; gap:1.6rem; margin-top:2.5rem; }
.step { display:flex; gap:1.4rem; align-items:flex-start; }
.step-num { font-family:'Playfair Display',serif; font-size:1.8rem; color:var(--teal-light); line-height:1; min-width:2rem; }
.step-text h4 { font-family:'Playfair Display',serif; font-size:1rem; color:var(--dark); margin-bottom:0.3rem; }
.step-text p { font-size:0.88rem; color:var(--muted); line-height:1.65; }

/* ── AVIS ── */
.avis-section { background:var(--teal-pale); min-height:55vh; display:flex; align-items:center; }
.avis-inner { max-width:660px; margin:0 auto; text-align:center; }
.avis-wave { width:80px; height:3px; margin:0 auto 2.5rem; background:linear-gradient(90deg,var(--teal-light),var(--teal)); }
.avis-invite { font-family:'Cormorant Garamond',serif; font-size:1.22rem; line-height:1.78; color:var(--teal-deep); margin-bottom:2.5rem; }
.avis-btn {
  display:inline-flex; align-items:center; gap:0.7rem;
  background:var(--teal); color:#fff; padding:1.1rem 2.6rem;
  font-family:'Jost',sans-serif; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; transition:background 0.3s, transform 0.2s;
}
.avis-btn:hover { background:var(--teal-deep); transform:translateY(-2px); }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:1.3rem; margin-top:2rem; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; }
.c-icon {
  width:40px; height:40px; border-radius:50%;
  background:var(--teal-pale); border:1px solid var(--teal-light);
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.c-text h4 { font-size:0.8rem; font-weight:600; color:var(--teal-deep); letter-spacing:0.05em; margin-bottom:0.25rem; }
.c-text p { font-size:0.88rem; color:var(--muted); line-height:1.55; }
.c-text a { color:var(--teal); text-decoration:none; }
.c-text a:hover { text-decoration:underline; }

/* ── CONTACT FORM ── */
.contact-form { display:flex; flex-direction:column; gap:1.1rem; }
.form-title { font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--dark); margin-bottom:0.4rem; }
.form-title em { color:var(--teal); font-style:italic; }
.form-group { display:flex; flex-direction:column; gap:0.35rem; }
.form-group label { font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.form-group input,
.form-group select,
.form-group textarea {
  background:#fff; border:1.5px solid var(--sand-warm); color:var(--text);
  padding:0.85rem 1.1rem; font-family:'Jost',sans-serif; font-size:0.9rem;
  outline:none; border-radius:1px; transition:border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--teal); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.btn-submit {
  background:var(--teal); color:#fff; padding:1.1rem; border:none; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:0.82rem; letter-spacing:0.15em; text-transform:uppercase; font-weight:500;
  transition:background 0.3s, transform 0.2s; margin-top:0.4rem;
}
.btn-submit:hover { background:var(--teal-deep); transform:translateY(-2px); }

/* ── FOOTER ── */
footer { background:var(--dark); color:rgba(255,255,255,0.45); text-align:center; padding:2.2rem; font-size:0.8rem; letter-spacing:0.04em; }
footer strong { color:var(--teal-light); }
footer a { color:var(--turq-light); text-decoration:none; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .topbar { padding:0.5rem 1.5rem; }
  .header-inner { padding:1rem 1.5rem 0; }
  .tabs { padding:0 1rem; }
  .hero { grid-template-columns:1fr; }
  .hero-right { height:260px; }
  .hero-left { padding:3rem 2rem; }
  .hero-title { font-size:2.3rem; }
  .section { padding:3rem 1.5rem; }
  .about-grid, .seance-grid, .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
  .spec-cards { grid-template-columns:1fr; }
  .about-visual, .seance-visual { height:280px; }
  .about-card { position:static; margin-top:1rem; }
  .stats-band { padding:2rem 2rem; }
}