/* =========================================
   PAGE: HOME (index)
   SECTIONS:
   2.1 Hero deux colonnes
   2.2 Hero responsive
   2.3 Section étudiants
   2.4 CTA final
   NOTE: Copié à l’identique depuis style.css
   ========================================= */

/* Petit helper utilisé dans le H1 */
.artistic-font{ font-family:'Satisfy', cursive; font-size:2.8rem; color:#b30000; letter-spacing:1px; }

/* === Accueil : 2 colonnes égales en desktop === */
.home-page .accueil-layout{
  display:flex;
  justify-content:center;
  align-items:stretch;            /* mêmes hauteurs visuelles */
  gap:2rem;
  padding:3rem;
  max-width:1500px;
  width:90%;
  margin:50px auto 0;
  border-radius:12px;
  background:rgb(241,241,241);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* chaque colonne pèse 50% et peut rétrécir (min-width:0 important) */
.home-page .accueil-content,
.home-page .accueil-image{
  flex:1 1 50%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* texte */
.home-page .accueil-content h1{
  font-size:2rem;
  text-align:center;
  margin-bottom:1.5rem;
  color:#424040;
}
.home-page .accueil-content p{
  font-size:1.1rem;
  line-height:1.5;
  color:#333;
  margin-bottom:1rem;
  text-align:center;
}

/* conteneur image + l’image elle-même */
.home-page .accueil-image{ align-items:center; }
.home-page .accueil-image img{
  width:100%;
  max-width:640px;               /* limite visuelle (optionnel) */
  height:auto;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* mobile : on garde ta pile existante */
@media (max-width:768px){
  .home-page .accueil-layout{
    flex-direction:column;
    text-align:center;
    margin-top:1.5rem;
  }
  .home-page .accueil-image{ margin-top:-2rem; }
  .home-page .accueil-image img{ max-width:90vw; }
}



/* ----- 2.2 Hero responsive ----- */
@media (max-width: 768px){
  .home-page .accueil-layout{ flex-direction:column; text-align:center; margin-top:1.5rem; }
  .home-page .accueil-content h1{ font-size:1.9rem; line-height:1; margin-bottom:1rem; text-align:center; }
  .home-page .artistic-font{ font-size:2.3rem; }
  .home-page .accueil-content p{ padding:0 1rem; text-align:center; }
  .home-page .accueil-image{ margin-top:-2rem; }
  .home-page .accueil-image img{ width:100%; max-width:90vw; }
}

/* ----- 2.3 Section étudiants ----- */
.home-page .etudiants-section{
  width:100vw; margin:0; padding:6rem 2rem;
  background-image:url('/assets/images/background-cani.png');
  background-repeat:repeat; background-size:auto; background-position:center;
  text-align:center; position:relative; z-index:1;
}
.home-page .etudiants-section::before{
  content:""; position:absolute; inset:0; background-color:rgba(255,255,255,0); z-index:0;
}
.home-page .titre-etudiants{
  display:inline-block; background:rgba(255,255,255,.95); padding:1rem 2rem;
  border-radius:12px; font-size:1.9rem; font-weight:bold; color:#333;
  border:2px solid #b30000; box-shadow:0 4px 12px rgba(0,0,0,.1); margin-bottom:3rem;
}
.home-page .etudiants-grid{
  display:flex; justify-content:center; gap:2rem; flex-wrap:wrap;
}
.home-page .etudiant-card{
  background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1);
  padding:1.5rem; max-width:320px; flex:1; display:flex; flex-direction:column; align-items:center;
  transition:transform .3s;
}
.home-page .etudiant-card:hover{ transform: translateY(-5px); }
.home-page .etudiant-card img{
  width:150px; height:150px; object-fit:cover; border-radius:50%; margin-bottom:1rem;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.home-page .etudiant-nom{ color:#567b8a; font-size:1.3rem; margin:.5rem 0; }
.home-page .etudiant-desc{ font-size:.95rem; color:#333; text-align:center; margin-bottom:1rem; }

/* ----- 2.4 CTA final ----- */
.home-page .cta-section{
  width:100vw; margin:0; padding:10rem 1rem;
  background-image:url('/assets/images/contacteznous.png');
  background-size:cover; background-repeat:no-repeat; background-position:center;
  display:flex; align-items:center; justify-content:center; text-align:center;
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 100%); overflow:hidden;
}
.home-page .cta-overlay{
  max-width:700px; width:100%; padding:2rem; border-radius:12px; color:#111;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.home-page .cta-overlay h2{ font-size:2rem; font-weight:800; margin-bottom:1rem; }
.home-page .cta-overlay p{ font-size:1.1rem; margin-bottom:1.5rem; line-height:1.6; }

/* Bouton CTA (utilisé sur l’index) */
.cta-btn{
  background:#b30000; color:#fff; padding:.8rem 2rem; font-weight:bold; border:none;
  border-radius:50px; cursor:pointer; transition:background .3s;
}
.cta-btn:hover{ background:#930000; }

@media (max-width:500px){
  .home-page .cta-section{ margin-top:3rem; }
  .home-page .cta-overlay{ padding:0; max-width:650px; }
  .home-page .cta-overlay h2{ font-size:1.7rem; }
  .home-page .cta-overlay p{ font-size:1rem; line-height:1.5; }
  .cta-btn{ padding:.8rem 1.6rem; font-size:1rem; margin-top:1rem; }
}

/* Empêche le voile décoratif de bloquer les clics */
.home-page .etudiants-section { position: relative; }
.home-page .etudiants-section::before { pointer-events: none; }

/* Assure que les cartes et boutons passent au-dessus */
.home-page .etudiant-card { position: relative; z-index: 1; }
.home-page .insta-btn { position: relative; z-index: 5; }