/* ============================================
   PranaYogaLife — Feuille de style commune
   Partagée par toutes les pages du site.
   Le CSS spécifique à chaque page reste dans
   le bloc <style> de la page concernée.
   ============================================ */

/* ----- Reset & base ----- */
html { scroll-padding-top: 80px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family:'Poppins',sans-serif; color:#333; line-height:1.6; scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
img { max-width:100%; height:auto; display:block; }

/* ----- En-tête & navigation ----- */
header { position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #eee; padding:15px 20px; }
.logo { height:50px; object-fit:contain; }
.mobile-menu-icon { display:none; font-size:28px; cursor:pointer; background:none; border:none; color:#3e1a7c; padding:0; line-height:1; }
nav { display:flex; align-items:center; flex-wrap:nowrap; }
nav a { margin-left:18px; color:#3e1a7c; font-weight:500; white-space:nowrap; }

@media (max-width:1024px) {
  .mobile-menu-icon { display:block; }
  nav { position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; padding:10px 20px; display:none; }
  nav.active { display:flex; }
  nav a { margin:10px 0; }
}

/* ----- Boutons d'action ----- */
.cta-app { background:#ed1586; color:#fff; padding:8px 12px; border-radius:5px; }
.cta-yt { background:#3e1a7c; color:#fff; padding:8px 12px; border-radius:5px; }

/* ----- Titres de section ----- */
h2.section-title { color:#3e1a7c; margin-bottom:20px; font-size:2em; text-align:center; }

/* ----- Hero des pages internes (Disciplines, À propos, FAQ) ----- */
.page-hero { background:linear-gradient(135deg,#3e1a7c,#ed1586); color:#fff; text-align:center; padding:70px 20px; max-width:none; width:100%; margin:0; }
.page-hero h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:14px; }
.page-hero p { font-size:1.15em; font-weight:300; max-width:640px; margin:0 auto; opacity:0.95; line-height:1.6; }

/* ----- Bande d'appel à l'action (pages internes) ----- */
.cta-band { text-align:center; padding:55px 20px; background:#f6f2fb; }
.cta-band h2 { color:#3e1a7c; font-size:1.6em; margin-bottom:20px; }
.cta-band .btn-row { display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ----- Pied de page ----- */
footer { background:#f9f9f9; text-align:center; padding:30px; font-size:0.9em; }
.social-icons { text-align:center; margin-bottom:15px; }
.social-icons a { margin:0 8px; display:inline-block; }


/* ----- Optimisations conversion, accessibilité et réseaux ----- */
a:focus-visible, button:focus-visible { outline:3px solid #ed1586; outline-offset:3px; }
.cta-app, .cta-yt { display:inline-block; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.cta-app:hover, .cta-yt:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(62,26,124,0.18); }
.cta-app:active, .cta-yt:active { transform:translateY(0); }
.social-hub { max-width:1000px; }
.social-intro { text-align:center; max-width:680px; margin:0 auto 26px; color:#444; }
.social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.social-card { border:1px solid #e2e2e2; border-radius:14px; padding:22px; min-height:185px; display:flex; flex-direction:column; gap:8px; background:#fff; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.social-card:hover { transform:translateY(-4px); box-shadow:0 8px 22px rgba(62,26,124,0.14); border-color:#ed1586; }
.social-card strong { color:#3e1a7c; font-size:1.08em; }
.social-card span:last-child { color:#555; font-size:.95em; }
.social-label { color:#ed1586; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.82em; }
@media (max-width:760px) {
  header { padding:12px 16px; }
  .logo { height:42px; }
  .social-grid { grid-template-columns:1fr; }
  .benefits-strip .benefit { width:100%; justify-content:center; white-space:normal; text-align:center; }
}