/* =========================================
   PAGE: ESPACE ÉTUDIANT
   SECTIONS:
   1) Hero
   2) Leçon gratuite (vidéo + texte)
   3) Responsive leçon
   4) Cours (image + contenu)
   5) Responsive cours
   6) Inversion desktop (image à droite)
   7) Boutons de partage inline (leçon)
   NOTE: Copié tel quel depuis style.css (mêmes sélecteurs)
   ========================================= */

/* 1) Hero */
.students-page .etudiant-hero{
  width:100vw; text-align:center; background:#f2f2f2; padding:4rem 1rem; color:#333;
}
.students-page .etudiant-hero h1{
  font-size:2.5rem; font-family:'Great Vibes', cursive; color:#b30000;
}
.students-page .etudiant-hero p{
  font-size:1.1rem; max-width:800px; margin:.5rem auto; line-height:1.6;
}

/* 2) Leçon gratuite (vidéo + texte) */
.students-page .lesson-bg-hero{
  /* FIX chemin → utilise la racine /assets/... */
  background:url('/assets/images/accueil/Welcome.jpg') center/cover no-repeat;
  position:relative; padding:4rem 1rem; width:100vw;
}
.students-page .lesson-bg-hero::before{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.7); z-index:1;
}
.students-page .lesson-overlay{
  position:relative; z-index:2; max-width:1200px; margin:0 auto; text-align:center;
}
.students-page .lesson-title{ text-align:center; font-size:1.8rem; margin-bottom:1rem; }
.students-page .lesson-container{
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap;
  margin-top:2rem; padding:2rem; background:#fff; border-radius:16px; box-shadow:0 4px 15px rgba(0,0,0,.05);
}
.students-page .video-wrapper{ flex:1 1 45%; aspect-ratio:16/9; max-width:600px; }
.students-page .video-wrapper iframe{
  width:100%; height:100%; border:none; border-radius:12px;
}
.students-page .lesson-text{
  text-align:center; flex:1 1 50%; display:flex; flex-direction:column; justify-content:center; gap:1rem;
}
.students-page .free-label{
  display:inline-block; background:#ce1616; padding:1rem 1.5rem; border-radius:12px; font-weight:bold; color:#fff;
  transition:background .3s ease; margin-top:1rem;
}
.students-page .free-label:hover{ background:#dd6f6f; }

/* 3) Responsive leçon */
@media (max-width:768px){
  .students-page .lesson-bg-hero{ padding:2rem 1rem; }
  .students-page .lesson-container{ flex-direction:column; text-align:center; padding:1.5rem; }
  .students-page .lesson-text, .students-page .video-wrapper, .students-page .lesson-title{ width:100%; }
  .students-page .lesson-title{ font-size:1.4rem; }
  .students-page .video-wrapper{ margin-top:-1rem; }
  .students-page .free-label{ width:100%; max-width:400px; margin-inline:auto; }
}

/* 4) Cours (image + contenu) */
.students-page .course-bg-hero{
  /* FIX chemin → depuis la racine /assets/... (remplace le nom si besoin) */
  background:url('/assets/images/ton-image.jpg') center/cover no-repeat;
  padding:4rem 1rem; position:relative; width:100%;
}
.students-page .course-bg-hero::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,0); z-index:1; }
.students-page .hero-overlay{
  background:rgba(255,255,255,.8); max-width:1200px; margin:0 auto; padding:2rem; border-radius:1rem; text-align:center;
}
.students-page .course-title{ text-align:center; font-size:1.8rem; margin-bottom:2rem; color:#222; }
.students-page .course-container{
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:2rem;
}
.students-page .course-image img{ max-width:100%; height:auto; border-radius:.5rem; }
.students-page .course-content{
  max-width:600px; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.students-page .course-type{ font-weight:bold; color:#888; }
.students-page .course-btn{
  margin-top:1rem; display:inline-block; padding:.75rem 1.5rem; border:2px solid #a00; color:#a00; background:#fff;
  border-radius:8px; font-weight:bold; transition:background .3s ease;
}
.students-page .course-btn:hover{ background:#a00; color:#fff; }

/* 5) Responsive cours */
@media (max-width:768px){
  .students-page .course-container{ flex-direction:column; text-align:center; }
  .students-page .course-bg-hero{ padding:3rem 1rem; }
}

/* 6) Inversion desktop (image à droite / texte à gauche) — mobile inchangé */
@media (min-width:769px){
  .students-page .course-container{ flex-direction: row-reverse; }
}

/* 7) Boutons de partage inline (section leçon) */
.lesson-container .share-inline {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* --- Espace Étudiant : déverrouiller les clics --- */

/* Le voile décoratif ne doit jamais capter la souris */
.students-page .lesson-bg-hero,
.students-page .course-bg-hero { position: relative; }

.students-page .lesson-bg-hero::before,
.students-page .course-bg-hero::before { pointer-events: none; }

/* On garantit que le contenu cliquable est au-dessus */
.students-page .lesson-overlay,
.students-page .hero-overlay,
.students-page .lesson-container,
.students-page .course-container { position: relative; z-index: 2; }

/* Boutons & liens */
.students-page .free-label,
.students-page .course-btn,
.students-page .share-inline button,
.students-page .share-inline a { position: relative; z-index: 3; }

/* (option) si tu as encore un conflit, force un z-index plus haut sur le bloc texte */
.students-page .lesson-text { position: relative; z-index: 3; }