/* ============================
   Fichier : Utiles/CSS/style.css
   Rôle    : Styles OnePage Doudou & Pinou (vagues, cartes, navbar, reveal)
   ============================ */

/* ---------- Variables ---------- */
:root{
  --clr-text:#444;
  --clr-nav-bg:rgba(255,255,255,.97);
  --shadow-soft:0 10px 24px rgba(0,0,0,.08);

  /* Hauteur des vagues (doit matcher visuellement le SVG) */
  --waveH:90px;

  /* Couleurs des sections (identiques aux fills des vagues suivantes) */
  --clr-projet:#f1f5ff;
  --clr-equipe:#f7fbff;
  --clr-structures:#fffaf2;
  --clr-preins:#eafff3;
  --clr-tarifs:#fff3e8;
  --clr-contact:#f0f7ff;
  --clr-infos:#fffaf2;

  /* Taille du logo du hero */
  --hero-logo-w:160px;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Comic Neue","Comic Sans MS",cursive,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:#fff;
  color:var(--clr-text);
}
img{ max-width:100%; height:auto; display:block; }

/* ---------- Sections (ancres + vagues) ---------- */
section{
  position:relative;
  scroll-margin-top:90px;     /* compense la navbar fixe */
  padding:90px 0 90px;
  overflow:visible;           /* laisse dépasser la vague du bas si besoin */
}
section + section{ margin-top:0; }
/* de la place pour la dernière vague */
section:last-of-type{ padding-bottom:calc(90px + var(--waveH)); }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; left:0; width:100%;
  z-index:1020;
  background:var(--clr-nav-bg);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:.75rem 0;
  backdrop-filter:saturate(180%) blur(6px);
}
.navbar .nav-link{ color:#444; }
.navbar .nav-link:hover{ color:#d14747; }

/* ---------- Hero ---------- */
#hero{
  min-height:100vh;
  padding:140px 16px 0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:linear-gradient(160deg,#FFD6DE 0%, #FFE6BF 35%, #CFEAFF 70%, #EAD6FF 100%);
  overflow:hidden;
}
.carte-hero{
  position:relative; z-index:1;
  max-width:980px; margin:0 auto;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.05);
  border-radius:1.25rem;
  padding:36px 22px 28px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
#hero .logo-hero{
  width:var(--hero-logo-w);
  max-width:45vw;
  height:auto;
  margin:0 auto 18px;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.08));
}
.txt-degrade{
  background:linear-gradient(90deg,#ff6b6b,#2ea5ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.separateur{
  width:84px; height:6px; border-radius:999px;
  background:linear-gradient(90deg,#ff8080,#7aa7ff); opacity:.5;
  margin:14px auto 18px;
}

/* ---------- Décor bulles (optionnel) ---------- */
.bulle{
  position:absolute; width:420px; height:420px; border-radius:50%;
  filter:blur(28px); opacity:.2; z-index:0;
  animation:flotter 14s ease-in-out infinite alternate;
}
.b1{ background:#ffb3c1; top:-120px; left:-120px; }
.b2{ background:#b3e0ff; bottom:18vh; right:-160px; animation-duration:16s; }
.b3{ background:#ffd9a0; top:22vh; right:32vw; width:320px; height:320px; animation-duration:18s; }
@keyframes flotter{ from{transform:translateY(0)} to{transform:translateY(16px)} }

/* ---------- Vagues (une seule : en bas de chaque section) ---------- */
.wave svg{
  display:block;
  width:100%;
  height:var(--waveH);
  vertical-align:top;
  pointer-events:none;
  transform:translateZ(0);     /* anti artefacts fins */
}
.wave-bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  line-height:0;
  z-index:20;
  isolation:isolate;
}

/* ---------- Fonds des sections ---------- */
#projet{         background:var(--clr-projet); }
#equipe{         background:var(--clr-equipe); }
#structures{     background:var(--clr-structures); }
#preinscription{ background:var(--clr-preins); }
#tarifs{         background:var(--clr-tarifs); }
#contact{        background:var(--clr-contact); }
#infos{          background:var(--clr-infos); }

/* ---------- Cartes & tableaux ---------- */
.carte-dp{ border:0; border-radius:1.25rem; box-shadow:var(--shadow-soft); background:#fff; }
.card-img-top{
  height:220px; object-fit:cover;
  border-top-left-radius:1.25rem; border-top-right-radius:1.25rem;
}
.table-rounded{ border-radius:1rem; overflow:hidden; }

/* ---------- Bouton remonter ---------- */
.btn-top{
  position:fixed; right:18px; bottom:18px; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.95);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  cursor:pointer; opacity:0; transform:translateY(10px); visibility:hidden;
  transition:opacity .2s ease, transform .2s ease; z-index:1080;
}
.btn-top.show{ opacity:1; transform:translateY(0); visibility:visible; }

/* ---------- Animations reveal ---------- */
.reveal, .reveal-left, .reveal-right{
  opacity:0; transition:all .6s ease; will-change:transform, opacity;
}
.reveal{ transform:translateY(16px); }
.reveal-left{ transform:translateX(-24px); }
.reveal-right{ transform:translateX(24px); }
.reveal.show, .reveal-left.show, .reveal-right.show{ opacity:1; transform:none; }

/* ---------- Footer ---------- */
footer{ background:#ffffff; text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  #hero{ padding-top:120px; }
}
@media (max-width: 575.98px){
  :root{ --hero-logo-w:120px; }
  .carte-hero{ padding:28px 18px 24px; }
  h1.display-5{ font-size:1.8rem; }
}

/* Centrer le contenu des cartes de la section #infos */
#infos .carte-dp .card-body{ text-align:center; }
#infos .card-body a, #infos .card-body .btn{ display:inline-block; }

/* ============================
 * Section : #equipe
 * ============================ */
#equipe .equipe-card{ border:1px solid rgba(0,0,0,.05); }
.equipe-pastille{
  width:12px; height:12px; border-radius:999px; display:inline-block;
  background:linear-gradient(135deg,#8fd3a7 0%,#b7e1c5 100%);
  box-shadow:0 0 0 3px rgba(143,211,167,.15);
}
.equipe-pastille-rose{
  background:linear-gradient(135deg,#f7b7c5 0%,#ffd6e0 100%);
  box-shadow:0 0 0 3px rgba(247,183,197,.15);
}
.equipe-roles{ max-width:900px; }
.equipe-roles .accordion-item{
  border:none; border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,.04);
  margin-bottom:12px; overflow:hidden;
}
.equipe-roles .accordion-button{ font-weight:600; background:#f9fbff; }
.equipe-roles .accordion-button:not(.collapsed){
  background:#f1f5ff; color:#0d6efd; box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);
}
.equipe-roles .accordion-body{ background:#fff; line-height:1.6; }
@media (max-width: 991.98px){
  #equipe .col-lg-6 + .col-lg-6{ margin-top:0 !important; }
}

/* Badges fallback (si variables BS absentes) */
.bg-success-subtle{ background-color:#e9f7ef !important; }
.text-success-emphasis{ color:#198754 !important; }
.bg-primary-subtle{ background-color:#ecf2ff !important; }
.text-primary-emphasis{ color:#0d6efd !important; }
.bg-warning-subtle{ background-color:#fff6e5 !important; }
.text-warning-emphasis{ color:#d68a00 !important; }
.bg-info-subtle{ background-color:#e6f7fb !important; }
.text-info-emphasis{ color:#0aa2c0 !important; }
.bg-rose-subtle{ background-color:#fde7f0 !important; }
.text-rose-emphasis{ color:#c2185b !important; }

/* ============================
 * Section : #structures
 * ============================ */
#structures .structures-infos li + li{ margin-top:.25rem; }
#structures .map-embed iframe{ border:0; width:100%; height:100%; }
#structures a.link-underline-opacity-0{ text-decoration:none; }
#structures a.link-underline-opacity-0:hover{ text-decoration:underline; }
@media (max-width: 991.98px){
  #structures .col-lg-6.mt-lg-5{ margin-top:0 !important; }
}