/* ============================================================
   PAGE D'ACCUEIL — spécifique
   Charge base.css puis ce fichier.
============================================================ */

/* Header un peu plus grand sur l'accueil */
header { padding: 1.35rem 3rem; }
header.scrolled { padding: 0.9rem 3rem; backdrop-filter: blur(10px); }
nav { gap: 2.75rem; }
.logo-name { font-size: 1.15rem; }
.logo-sub { margin-top: 0.15rem; }

/* ============================================================
   HERO — FOND VIDÉO / IMAGE 80VH
============================================================ */
.hero {
  position: relative;
  height: 80vh; min-height: 520px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}

.hero-video-wrap { position: absolute; inset: 0; overflow: hidden; }
.hero-video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.04);
  transition: transform 8s ease-out;
}
.hero-video-wrap video.loaded { transform: scale(1); }

/* Fallback image si vidéo indisponible / absente */
.hero-video-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/kayak-mer.jpg');
  background-size: cover; background-position: center;
  z-index: -1;
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10,20,15,0.15) 0%,
      rgba(10,20,15,0.0)  30%,
      rgba(10,20,15,0.5)  70%,
      rgba(10,20,15,0.85) 100%);
  z-index: 1;
}

.hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
}

.hero-content {
  position: relative; z-index: 3;
  width: 100%; padding: 0 8rem 5.5rem;
  display: flex; flex-direction: column; align-items: flex-start;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-seafoam); margin-bottom: 1.25rem;
  opacity: 0; animation: fadeUp 0.7s 0.4s forwards;
}
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--c-seafoam); }

.hero-title {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(3rem, 6.5vw, 5.75rem);
  line-height: 0.95; letter-spacing: -0.035em;
  color: var(--c-white);
  margin-bottom: 1.5rem;
  text-wrap: balance;
  opacity: 0; animation: fadeUp 0.9s 0.55s forwards;
}
.hero-title em { font-style: italic; color: var(--c-seafoam); display: block; }

.hero-slogan {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-weight: 300;
  color: rgba(255,255,255,0.75); max-width: 520px; line-height: 1.65;
  margin-bottom: 2.5rem;
  opacity: 0; animation: fadeUp 0.9s 0.75s forwards;
}

.hero-cta { opacity: 0; animation: fadeUp 0.7s 0.95s forwards; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--c-accent); color: var(--c-white);
  font-family: var(--f-body); font-size: 0.9rem; font-weight: 500;
  padding: 1rem 2rem; border-radius: var(--radius);
  letter-spacing: 0.03em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 24px rgba(212,83,28,0.35);
}
.btn-hero:hover { background: #b8421a; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(212,83,28,0.45); }
.btn-hero svg { width: 16px; height: 16px; transition: transform var(--transition); }
.btn-hero:hover svg { transform: translateX(3px); }

/* Indicateur de scroll */
.hero-scroll {
  position: absolute; bottom: 2.5rem; right: 4rem; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0; animation: fadeIn 1s 1.5s forwards;
}
.hero-scroll span { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.4); writing-mode: vertical-rl; }
.hero-scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); animation: scrollLine 2s 2s infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   SECTION PRÉSENTATION
============================================================ */
.presentation { background: var(--c-white); padding: 7rem 2rem 6rem; text-align: center; }
.pres-inner { max-width: 720px; margin: 0 auto; }
.pres-eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-moss); margin-bottom: 1.5rem;
}
.pres-eyebrow::before, .pres-eyebrow::after { content: ''; display: block; flex: 1; width: 28px; height: 1px; background: var(--c-seafoam); }
.pres-title {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--c-stone); margin-bottom: 1rem;
}
.pres-subtitle { font-size: 1rem; font-weight: 500; color: var(--c-moss); margin-bottom: 1.5rem; letter-spacing: -0.01em; }
.pres-text { font-size: 1.05rem; font-weight: 300; color: var(--c-slate); line-height: 1.8; max-width: 640px; margin: 0 auto; }

.pres-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.5rem auto 0; opacity: 0.4; }
.pres-divider::before, .pres-divider::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: var(--c-moss); }
.pres-divider .icon { width: 16px; height: 16px; color: var(--c-moss); }

/* Chiffres clés sous la présentation */
.pres-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem 3.5rem; margin: 2.75rem 0 0; }
.pres-stat { display: flex; flex-direction: column-reverse; align-items: center; gap: 0.45rem; }
.pres-stat-num { font-family: var(--f-display); font-size: 1.5rem; font-weight: 900; color: var(--c-stone); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.pres-stat-label { font-size: 0.72rem; color: var(--c-slate); line-height: 1.35; }

/* ============================================================
   ACTIVITÉS — GRILLE MÉTRO
============================================================ */
.activities { background: var(--c-cream); padding: 6rem 2rem 6rem; }
.activities-inner { max-width: 1200px; margin: 0 auto; }

.sec-header { text-align: center; margin-bottom: 3.5rem; }
.sec-title { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; color: var(--c-stone); text-wrap: balance; }

.act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.act-card {
  position: relative; border-radius: var(--radius);
  overflow: hidden; background: var(--c-stone);
  aspect-ratio: 4/5;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.act-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.18); }

.act-card-img { position: absolute; inset: 0; }
.act-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.act-card:hover .act-card-img img { transform: scale(1.06); }

.act-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,20,15,0.88) 0%, rgba(10,20,15,0.2) 55%, rgba(10,20,15,0.0) 100%);
  transition: background var(--transition);
}
.act-card:hover .act-card-overlay { background: linear-gradient(to top, rgba(10,20,15,0.92) 0%, rgba(10,20,15,0.35) 60%, rgba(10,20,15,0.0) 100%); }

.act-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.75rem 1.75rem 2rem; z-index: 2; }
.act-card-type { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-seafoam); margin-bottom: 0.4rem; }
.act-card-name { font-family: var(--f-display); font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; color: var(--c-white); line-height: 1.1; margin-bottom: 0.65rem; }
.act-card-desc { font-size: 0.82rem; font-weight: 300; color: rgba(255,255,255,0.65); line-height: 1.55; max-width: 360px; margin-bottom: 1.25rem; }
.act-card-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-white);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.act-card-link svg { width: 12px; height: 12px; transition: transform var(--transition); }
.act-card:hover .act-card-link { color: var(--c-seafoam); border-color: var(--c-seafoam); }
.act-card:hover .act-card-link svg { transform: translateX(3px); }

.act-card-season {
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 3;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(28,36,32,0.6); backdrop-filter: blur(6px);
  color: var(--c-seafoam); padding: 0.3rem 0.75rem; border-radius: 100px;
  border: 1px solid rgba(184,212,192,0.25);
}

/* ============================================================
   ENFANTS & JEUNES
============================================================ */
.youth { margin-top: 4.5rem; }
.youth-title {
  font-family: var(--f-display); font-size: 1.35rem; font-weight: 900;
  letter-spacing: -0.02em; color: var(--c-stone);
  margin-bottom: 1.75rem;
}
.youth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.youth-card {
  background: var(--c-white);
  border: 1px solid rgba(28,36,32,0.08); border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.youth-card-img { aspect-ratio: 16/10; overflow: hidden; flex-shrink: 0; }
.youth-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.youth-card:hover .youth-card-img img { transform: scale(1.04); }
.youth-card-body {
  padding: 1.6rem 1.9rem;
  display: flex; flex-direction: column; align-items: flex-start; flex: 1;
}
.youth-card-meta {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-moss); margin-bottom: 0.9rem;
}
.youth-card-name {
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 900;
  letter-spacing: -0.02em; color: var(--c-stone); margin-bottom: 0.6rem;
}
.youth-card-desc { font-size: 0.9rem; color: var(--c-slate); line-height: 1.65; margin-bottom: 1.6rem; }
.youth-card-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--c-moss);
  border-bottom: 1px solid rgba(58,92,68,0.35); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.youth-card-link:hover { color: var(--c-accent); border-color: var(--c-accent); }
.youth-card-link svg { width: 12px; height: 12px; }

/* ============================================================
   BANDE INFOS PRATIQUES
============================================================ */
.info-band { background: var(--c-white); color: var(--c-stone); padding: 6.5rem 2rem; }
.info-band-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.info-band-text .sec-title { margin-bottom: 1.25rem; }
.info-band-text p { font-size: 0.97rem; font-weight: 400; color: var(--c-slate); line-height: 1.75; margin-bottom: 2rem; max-width: 480px; }
.info-band .btn-group { background: var(--c-accent); color: var(--c-white); }
.info-band .btn-group:hover { background: #b8421a; }

.info-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.info-item { background: var(--c-cream); border: 1px solid rgba(28,36,32,0.08); border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.info-item-icon { color: var(--c-moss); margin-bottom: 0.6rem; }
.info-item-icon .icon { width: 22px; height: 22px; }
.info-item-label { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-slate); margin-bottom: 0.25rem; }
.info-item-value { font-size: 0.95rem; font-weight: 500; color: var(--c-stone); }
.info-item-note { font-size: 0.78rem; font-weight: 400; color: var(--c-slate); margin-top: 0.2rem; }

/* ============================================================
   SECTION GROUPES
============================================================ */
.groups-section { background: var(--c-moss); padding: 6rem 2rem; overflow: hidden; position: relative; }
.groups-section::before {
  content: 'GROUPES';
  position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--f-display); font-size: 12rem; font-weight: 900;
  color: rgba(255,255,255,0.04); letter-spacing: -0.05em;
  line-height: 1; pointer-events: none; white-space: nowrap;
}
.groups-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.groups-text .sec-title { color: var(--c-white); margin-bottom: 1.25rem; }
.groups-text .sec-title em { font-style: italic; color: var(--c-seafoam); }
.groups-text p { font-size: 0.97rem; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.75; margin-bottom: 1rem; }

.publics-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; list-style: none; }
.public-chip { font-size: 0.72rem; font-weight: 500; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 0.3rem 0.85rem; }

.btn-group {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--c-white); color: var(--c-stone);
  font-size: 0.85rem; font-weight: 500; padding: 0.9rem 1.8rem;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}
.btn-group:hover { background: var(--c-cream); transform: translateY(-2px); }
.btn-group svg { width: 14px; height: 14px; }

.groups-visual { position: relative; }
.groups-visual-main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.groups-visual-main img { width: 100%; height: 100%; object-fit: cover; }
.groups-float {
  position: absolute; bottom: -1.5rem; left: -2rem;
  background: var(--c-white); border-radius: var(--radius);
  padding: 1rem 1.4rem; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.groups-float-num { font-family: var(--f-display); font-size: 2rem; font-weight: 900; color: var(--c-stone); line-height: 1; letter-spacing: -0.04em; }
.groups-float-label { font-size: 0.72rem; color: var(--c-slate); font-weight: 300; margin-top: 0.2rem; }

/* ============================================================
   FAQ (accordéon)
============================================================ */
.faq-section { background: var(--c-cream); padding: 6rem 2rem; }
.faq-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; align-items: start; }
.faq-left .sec-title { margin-bottom: 1rem; }
.faq-left p { font-size: 0.9rem; color: var(--c-slate); font-weight: 300; line-height: 1.7; margin-bottom: 2rem; }
.btn-contact {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--c-accent); color: var(--c-white);
  font-size: 0.85rem; font-weight: 500; padding: 0.9rem 1.75rem;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}
.btn-contact:hover { background: #b8421a; transform: translateY(-2px); }

.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,0.07); overflow: hidden; }
.faq-item:first-child { border-top: 1px solid rgba(0,0,0,0.07); }
.faq-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 1.25rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  text-align: left;
}
.faq-q { font-size: 0.92rem; font-weight: 500; color: var(--c-stone); }
.faq-icon { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition), border-color var(--transition); }
.faq-icon svg { width: 10px; height: 10px; stroke: var(--c-slate); transition: transform 0.3s; }
.faq-item.open .faq-icon { background: var(--c-moss); border-color: var(--c-moss); }
.faq-item.open .faq-icon svg { transform: rotate(45deg); stroke: white; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-in { overflow: hidden; min-height: 0; }
.faq-answer p { padding: 0 0 1.25rem; font-size: 0.88rem; color: var(--c-slate); font-weight: 400; line-height: 1.7; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .info-band-inner { grid-template-columns: 1fr; gap: 3rem; }
  .groups-inner { grid-template-columns: 1fr; gap: 3rem; }
  .groups-float { display: none; }
  .faq-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
  header { padding: 1.1rem 1.5rem; }
  header.scrolled { padding: 0.85rem 1.5rem; }
  .hero-content { padding: 0 1.75rem 4.5rem; }
  .hero-scroll { display: none; }
  .presentation { padding: 4.5rem 1.5rem; }
  .act-grid { grid-template-columns: 1fr; }
  .act-card { aspect-ratio: 4/3; }
  .youth { margin-top: 3.5rem; }
  .youth-grid { grid-template-columns: 1fr; }
  .info-band { padding: 4.5rem 1.5rem; }
  .info-items { grid-template-columns: 1fr; }
  .groups-section::before { display: none; }
}

/* ============================================================
   PEPS & RONDEURS (page d'accueil uniquement)
============================================================ */

/* Rayon plus généreux sur toute la home (cartes, encarts, images) */
body { --radius: 14px; }

/* Boutons en pilule */
.btn-hero, .btn-group, .btn-contact, .nav-cta, .nav-cta-mobile { border-radius: 100px; }

/* Survols plus joueurs : lift + micro-tilt */
.act-card:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 24px 52px rgba(28,36,32,0.18); }
.youth-card { transition: transform var(--transition), box-shadow var(--transition); }
.youth-card:hover { transform: translateY(-5px) rotate(0.5deg); box-shadow: 0 18px 44px rgba(28,36,32,0.12); }
.info-item { transition: transform var(--transition); }
.info-item:hover { transform: translateY(-3px); }
.public-chip { transition: background var(--transition), color var(--transition); }
li:hover > .public-chip { background: rgba(255,255,255,0.14); }

/* Animation 1 : trait ondulé qui se dessine sous les titres */
.sec-header .sec-title::after,
.youth-title::after {
  content: '';
  display: block;
  width: 108px; height: 12px;
  margin-top: 0.75rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><path d='M3 8 C 13 2, 23 2, 33 8 S 53 14, 63 8 S 83 2, 93 8 S 113 14, 117 8' fill='none' stroke='%23c74a18' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / contain;
  transform: scaleX(0);
  transform-origin: left center;
}
.sec-header .sec-title::after { margin-left: auto; margin-right: auto; }
.reveal.visible .sec-title::after,
.reveal.visible .youth-title::after,
.reveal.visible.youth .youth-title::after {
  animation: squiggle-in 0.7s 0.3s var(--ease) forwards;
}
@keyframes squiggle-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Animation 2 : respiration douce du badge « 9 activités » */
.groups-float { animation: float-doux 4.5s ease-in-out infinite; }
@keyframes float-doux {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Bonus discret : l'étoile de la présentation tourne lentement */
.pres-divider .icon { animation: spin-lent 18s linear infinite; }
@keyframes spin-lent { to { transform: rotate(360deg); } }

/* Couleur dans les titres de sections */
.sec-header .sec-title em, .youth-title em { font-style: italic; color: var(--c-moss); }