/* Custom Properties ------------------------------------ */
:root {--primary:#c154ff; --primary-hover:#b34feb; --dark:#333; --light:#fff; --bg-alt:#f5f5f5;}

/* Modern Reset ----------------------------------------- */
*, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
html {scroll-behavior:smooth;}
body {font-family:"Geogtq-Rg", Arial, sans-serif; font-size:1.125rem; line-height:1.5; color:var(--dark); background:var(--light);}
img {max-width:100%; height:auto; display:block;}
ul {list-style:none;}
a {text-decoration:none; color:var(--primary); transition:color 0.3s ease, background-color 0.3s ease;}

/* Typography ------------------------------------------- */
@font-face {font-family:"Geogtq-Rg"; src:url("fonts/Geogtq-Rg.otf") format("opentype"); font-display:swap;}
@font-face {font-family:"Geogtq-Sb"; src:url("fonts/Geogtq-Sb.otf") format("opentype"); font-display:swap;}
h1, h2, h3 {font-family:"Geogtq-Sb", Arial, sans-serif; line-height:1.2; color:var(--dark);}

/* Layout Helpers --------------------------------------- */
.wrapper {width:min(90%, 1400px); margin-inline:auto;}
.button, a.button {display:inline-block; width:min(100%, 300px); padding:1rem 1.5rem; background:var(--primary); color:var(--light) !important; text-align:center; text-transform:uppercase; font-size:0.95rem; font-weight:bold; border-radius:4px; margin-top:0.5rem;}
.button:hover, a.button:hover {background:var(--primary-hover);}

/* Header ----------------------------------------------- */
header {min-height:50vh; padding:2.5rem 1rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(images/header_bg.jpg) no-repeat center/cover fixed; position:relative;}
header h1 {font-size: clamp(4rem, 5vw, 5.5rem); color: var(--light); line-height: 1; text-align: center; width: 100%;}
header h1 span {color: var(--primary); display: inline; position: relative;}
.arrow {position:absolute; left:50%; top:75%; transform:translate(-50%, -50%); width:45px; height:25px; background:url(images/arrow.png) no-repeat center/contain; animation:bounce 1.6s infinite;}
@keyframes bounce {0%, 100% {transform:translate(-50%, 0);} 50% {transform:translate(-50%, 10px);}}

@media (min-width: 768px) {
  header {min-height:80vh; padding:4rem 1rem;}
}

/* Navigation ------------------------------------------- */
nav { position: sticky; top: 0; z-index: 100; background: var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
nav ul { display: flex; justify-content: center; flex-wrap: nowrap; max-width: 1200px; margin: 0 auto; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
nav ul::-webkit-scrollbar { display: none; }
nav li { flex: 0 0 auto; }
nav a { display: block; padding: 1.75rem 1.5rem; color: var(--light) !important; font-family: "Geogtq-Sb", Arial, sans-serif; font-size: 0.9rem; text-transform: uppercase; white-space: nowrap; }
nav a:hover { background: rgba(0,0,0,0.1); }
@media screen and (max-width: 768px) { 
  nav, .main-navigation, .nav-menu { display: none !important; } 
}

/* Sections --------------------------------------------- */
#triple-cta, #piedestal, #temoignage, footer {padding:7.5rem 0;}
#triple-cta {background:var(--bg-alt); text-align:center;}
#triple-cta h2 {font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:3rem; text-transform:uppercase;}
.cta-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:3rem;}
.cta-grid img {width:80px; margin:0 auto 1.5rem;}
.cta-grid h3 {font-size:1.3rem; color:var(--primary); text-transform:uppercase; margin-bottom:0.8rem;}

#piedestal {background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/piedestal_bg.jpg) no-repeat center/cover; text-align:center; color:var(--light);}
#piedestal h2 {color:var(--light); font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:1.5rem; text-transform:uppercase;}
#piedestal p {font-size:clamp(1.1rem, 2vw, 1.5rem); max-width:900px; margin-inline:auto;}

/* Z-Pattern Sections ----------------------------------- */
.z-section {padding:0; clear:both;}
#coaching {padding-top:7.5rem;}
.z-section + .z-section {padding-top:5rem;}
#depression {padding-bottom:7.5rem;}
.zpatern {display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center;}
.zpatern img {border-radius:8px; width:100%; object-fit:cover;}
.zpatern-card {background:var(--bg-alt); padding:2rem; border-radius:8px; display:flex; flex-direction:column; gap:1.25rem;}
.zpatern-card h2 {color:var(--primary); font-size:1.5rem; text-transform:uppercase;}
.zpatern-card h3 {font-size:1.2rem;}
.list-bullet {margin-bottom:0.5rem;}
.list-bullet li {position:relative; padding-left:1.2rem; margin-bottom:0.4rem;}
.list-bullet li::before {content:"•"; color:var(--primary); position:absolute; left:0; font-weight:bold;}
.note {font-size:0.85rem; font-style:italic; opacity:0.8;}

@media (min-width: 900px) {
  .z-section {padding:0;}
  #coaching {padding-top:7.5rem;}
  .z-section + .z-section {padding-top:5rem;}
  #depression {padding-bottom:7.5rem;}
  .zpatern {grid-template-columns:1fr 1fr; gap:0;}
  .zpatern img {order:1;}
  .zpatern-card {order:2; margin-left:-80px; z-index:2; position:relative; padding:2.5rem;}
  .zpatern-reverse img {order:2;}
  .zpatern-reverse .zpatern-card {order:1; margin-left:0; margin-right:-80px;}
}

/* Temoignage ---------------------------------- */
#temoignage {background:var(--primary); color:var(--light); padding:7.5rem 0;} 
.temoignage-carousel {position:relative; max-width:900px; margin:0 auto; text-align:center;} 
.carousel-slides {display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;} 
.carousel-slides::-webkit-scrollbar {display:none;} 
.slide {flex:0 0 100%; scroll-snap-align:center; font-size:clamp(1.1rem, 2vw, 1.4rem); font-style:italic; box-sizing:border-box; padding:0 1rem;} 
.slide cite {display:block; margin-top:1rem; font-size:0.95rem; font-style:normal; font-family:"Geogtq-Sb", Arial, sans-serif; opacity:0.9; text-transform:uppercase;} 
.carousel-btn {position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--light); font-size:3rem; cursor:pointer; padding:0 0.5rem; line-height:1; opacity:0.7; transition:opacity 0.3s; z-index:2;} 
.carousel-btn:hover {opacity:1;} 
.carousel-btn.prev {left:-2rem;}
.carousel-btn.next {right:-2rem;} 
.carousel-dots {display:flex; justify-content:center; gap:0.5rem; margin-top:1.5rem;} 
.dot {width:12px; height:12px; border-radius:50%; border:2px solid var(--light); background:transparent; cursor:pointer; opacity:0.5; transition:opacity 0.3s, background 0.3s;} 
.dot.active {background:var(--light); opacity:1;}

/* Footer ---------------------------------- */
footer {padding-top:7.5rem; padding-bottom:2rem;}
.contact-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:2.5rem; text-align:center;}
.contact-grid h2 {color:var(--primary); font-size:1.3rem; text-transform:uppercase; margin-bottom:1rem;}
.siteinfo {border-top:1px solid #ddd; margin-top:7rem; padding-top:2rem; text-align:center; font-size:0.9rem; color:#777;}

@media screen and (max-width:768px) {
#triple-cta, #piedestal, #temoignage, #coaching, footer {padding-top:5rem !important;} 
#triple-cta, #piedestal, #temoignage, #depression {padding-bottom:5rem !important;} 
.z-section + .z-section {padding-top:5rem !important;} 
.siteinfo {margin-top:5rem !important;}
}