/* ==========================================
   PAGE FAMILLE / ÉVÉNEMENTS — ASSOCIATION BEAUFIEF
   Styles spécifiques à la page famille.html uniquement.
   Les styles globaux (variables, reset, topbar, header,
   nav, footer, boutons, .container) sont dans style.css
   Note : footer redéclaré ici car famille.html utilise
   une mise en page footer différente (3 colonnes 2fr/1fr/1fr)
========================================== */


/* ==========================================
   1. HERO PLEIN ÉCRAN
   Bandeau d'en-tête avec photo du festival Beaufief
========================================== */
.page-hero {
  position: relative;
  min-height: 320px;
  background: linear-gradient(135deg, #5c6f5c, #b4463a 60%, #d8b24a); /* Dégradé de secours */
  display: flex;
  align-items: flex-end;  /* Titre calé en bas */
  overflow: hidden;
}

/* Photo de fond semi-transparente */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/famille/beaufief\ festival.webp') center/cover no-repeat;
  opacity: 0.28;
}

/* Zone texte au-dessus du fond */
.page-hero .hero-inner {
  position: relative;
  z-index: 1;
  padding: 60px 0 50px;
  width: 100%;
}

.page-hero h2 {
  font-family: var(--font-title);
  font-size: 3rem;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); /* Ombre pour lisibilité */
}

.page-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
  max-width: 680px;
}


/* ==========================================
   2. INTRODUCTION & BOUTON PORTAIL FAMILLE
   Grille texte + encadré d'appel à l'action
========================================== */
.famille-intro {
  padding: 65px 0;
  background: var(--blanc);
}

/* Photo à gauche, texte + CTA à droite */
.famille-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 55px;
  align-items: center;
}

/* Encadré rouge "Accéder au Portail Famille" */
.portail-cta {
  background: linear-gradient(135deg, var(--terre-cuite), #8b2a20); /* Dégradé rouge */
  color: #fff;
  border-radius: 22px;
  padding: 38px 40px;
  margin: 40px 0;
}

.portail-cta h3 {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 10px;
}

.portail-cta p {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0;
}

/* Bouton blanc sur fond coloré (portail, inscription) */
.btn-white {
  background: #fff;
  color: var(--terre-cuite);
  padding: 13px 28px;
  border-radius: 14px;
  font-weight: 700;
  display: inline-block;
  transition: 0.25s;
  font-family: var(--font-title);
  margin-top: 16px;
}

.btn-white:hover {
  background: var(--jaune-moutarde);
  color: var(--texte);
}


/* ==========================================
   3. SECTION ATELIERS & ANIMATIONS
   Liste des activités proposées aux familles
========================================== */
.ateliers-section {
  padding: 65px 0;
  background: var(--beige-lin);
}

/* Ligne d'un atelier : point coloré + texte */
.atelier-item {
  background: var(--blanc);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
  transition: 0.25s;
}

/* Légère translation au survol */
.atelier-item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Petit cercle coloré à gauche de chaque atelier */
.atelier-dot {
  width: 14px;
  height: 14px;
  background: var(--vert-sauge);
  border-radius: 50%;
  flex-shrink: 0;      /* Ne rétrécit pas même si le texte est long */
  margin-top: 5px;
}

/* Rotation des couleurs des points pour varier l'apparence */
.atelier-item:nth-child(2n) .atelier-dot { background: var(--terre-cuite); }
.atelier-item:nth-child(3n) .atelier-dot { background: var(--jaune-moutarde); }
.atelier-item:nth-child(4n) .atelier-dot { background: var(--vert-sauge); }
.atelier-item:nth-child(5n) .atelier-dot { background: var(--terre-cuite); }
.atelier-item:nth-child(6n) .atelier-dot { background: var(--jaune-moutarde); }
.atelier-item:nth-child(7n) .atelier-dot { background: var(--vert-sauge); }
.atelier-item:nth-child(8n) .atelier-dot { background: var(--terre-cuite); }

.atelier-text h4 {
  font-family: var(--font-title);
  color: var(--texte);
  margin-bottom: 5px;
}

.atelier-text p {
  color: var(--gris);
  font-size: 0.92rem;
}


/* ==========================================
   4. HORAIRES DES ANIMATIONS FAMILLE
   Grille de 3 cartes (ex : mercredi, vacances, week-end)
========================================== */
.horaires-famille {
  padding: 60px 0;
  background: var(--blanc);
}

/* 3 colonnes sur desktop */
.horaires-grid-famille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Carte horaire individuelle */
.hf-card {
  background: var(--beige-lin);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
}

.hf-card h4 {
  font-family: var(--font-title);
  color: var(--vert-sauge);
  margin-bottom: 8px;
}

.hf-card p {
  color: var(--gris);
  font-size: 0.9rem;
}


/* ==========================================
   5. CARROUSEL DE PHOTOS (défilement automatique)
   Différent du carrousel ado.html : défilement infini via JS
========================================== */

/* Zone qui cache les slides dépassant les bords */
.carousel-section {
  overflow: hidden;
}

/* Piste de défilement animée par JavaScript */
.carousel-track {
  display: flex;
  will-change: transform; /* Optimisation GPU pour l'animation */
}

/* Diapositive individuelle */
.cslide {
  min-width: 320px;
  margin-right: 18px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--blanc);
}

.cslide img,
.cslide video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Boutons précédent/suivant positionnés en absolu sur le carrousel */
.cbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 5;
  transition: 0.25s;
}

.cbtn:hover { background: var(--jaune-moutarde); }
.cbtn-prev { left: 15px; }
.cbtn-next { right: 15px; }

/* Points indicateurs de position */
#cDots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

#cDots span.active { background: var(--terre-cuite); }


/* ==========================================
   RESPONSIVE — TABLETTES (max-width: 1000px)
========================================== */
@media (max-width: 1000px) {
  .famille-intro-grid { grid-template-columns: 1fr; }    /* 1 colonne */
  .horaires-grid-famille { grid-template-columns: repeat(2, 1fr); } /* 2 colonnes */
}

/* ==========================================
   RESPONSIVE — TABLETTES PORTRAIT (max-width: 850px)
========================================== */
@media (max-width: 850px) {
  .horaires-grid-famille { grid-template-columns: 1fr; }
  .page-hero h2 { font-size: 2rem; }
}

/* ==========================================
   RESPONSIVE — MOBILES (max-width: 768px)
========================================== */
@media (max-width: 768px) {
  .page-hero .hero-inner { padding: 40px 0 35px; }
  .famille-intro,
  .ateliers-section,
  .horaires-famille { padding: 50px 0; }
  .cslide { min-width: 260px; }
}

/* ==========================================
   RESPONSIVE — PETITS MOBILES (max-width: 480px)
========================================== */
@media (max-width: 480px) {
  .page-hero h2 { font-size: 1.6rem; }
  .page-hero p { font-size: 1rem; }
  .portail-cta { padding: 28px 25px; }
  /* Sur mobile : les ateliers passent en colonne, point au-dessus du texte */
  .atelier-item { padding: 20px; flex-direction: column; gap: 10px; }
}

/* ==========================================
   RESPONSIVE — TRÈS PETITS MOBILES (max-width: 400px)
========================================== */
@media (max-width: 400px) {
  .page-hero h2 { font-size: 1.4rem; }
}