/* =========================
   PALETTE & BASE TYPO
========================= */
:root{
  --lec-orange:#f28c28;
  --lec-yellow:#f7b733;
  --lec-green:#a6d66a;
  --lec-brown:#6a3a2c;
  --lec-cream:#fff8ec;
  --shadow-card:0 10px 20px rgba(0,0,0,.08);
}
.text-lec-brown{ color:var(--lec-brown); }
.bg-lec-cream{ background:var(--lec-cream); }
.bg-lec-yellow{ background:var(--lec-yellow); }
.bg-lec-green{ background:var(--lec-green); }
.bg-lec-brown{ background:var(--lec-brown); }

.font-baloo{ font-family:"Baloo 2",system-ui,-apple-system,sans-serif; }
.font-inter{ font-family:"Inter",system-ui,-apple-system,sans-serif; }

/* =========================
   DÉCOR KENTE
========================= */
.kente-bar{
  height:12px;
  background:repeating-linear-gradient(90deg,
    #2b2b2b 0 10px,#f28c28 10px 20px,#e7e7e7 20px 24px,#6a3a2c 24px 34px,
    #a6d66a 34px 44px,#f7b733 44px 54px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
}

/* =========================
   NAV
========================= */
.navlink{ position:relative; color:var(--lec-brown); padding:.25rem 0; }
.navlink::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:3px;
  background:linear-gradient(90deg,var(--lec-orange),var(--lec-yellow));
  border-radius:999px; transition:width .25s ease;
}
.navlink:hover::after{ width:100%; }
.moblink{ display:block; padding:.5rem 0; color:var(--lec-brown); }

/* =========================
   BOUTONS (+ anim)
========================= */
.btn-primary{
  background: linear-gradient(90deg,var(--lec-orange),var(--lec-yellow));
  background-size: 200% 100%;
  color:#fff; border-radius:999px; padding:.7rem 1.2rem; font-weight:800;
  box-shadow:0 6px 14px rgba(242,140,40,.28);
  transition: transform .15s ease, filter .2s ease, background-position .8s ease;
}
.btn-primary:hover{ filter:brightness(.97); background-position: 100% 0; }
.btn-outline{
  background:#fff; color:var(--lec-orange);
  border:2px solid rgba(242,140,40,.35); border-radius:999px; padding:.65rem 1.1rem; font-weight:800;
  transition: transform .15s ease, background .2s ease;
}
.btn-outline:hover{ background:rgba(242,140,40,.06); }
.btn-white{
  background:#fff; color:var(--lec-brown); border-radius:999px;
  padding:.7rem 1.2rem; font-weight:800; box-shadow:var(--shadow-card);
  transition: transform .15s ease;
}
.btn-yellow{
  background:var(--lec-yellow); color:#432; border-radius:999px;
  padding:.5rem .9rem; font-weight:800; transition: transform .15s ease;
}
.btn-outline-white{
  background:transparent; color:#fff; border:2px solid #fff; border-radius:999px;
  padding:.5rem .9rem; font-weight:800; transition: transform .15s ease;
}
.btn-ghost{
  background:#fff; color:var(--lec-brown);
  border:2px solid rgba(0,0,0,.06); border-radius:14px; padding:.45rem .8rem;
  transition: transform .15s ease;
}
.btn-anim:hover{ transform: translateY(-2px) scale(1.02); }
.btn-anim:active{ transform: translateY(0) scale(.98); }

/* =========================
   CARDS & ICONES
========================= */
.card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:22px;
  padding:1.25rem; box-shadow:var(--shadow-card);
}
.card-title{ font-family:"Baloo 2"; font-size:1.3rem; color:var(--lec-brown); }
.card-text{ color:#5b4b45; margin-top:.35rem; }
.kid-icon{
  width:64px; height:64px; border-radius:20px; display:grid; place-items:center;
  box-shadow:0 8px 18px #f7b733; margin-bottom:.5rem;
}
.kid-icon svg{ width:40px; height:40px; }

/* =========================
   LIENS-CARTES
========================= */
.link-card{
  display:block; padding:1.2rem 1.1rem; border-radius:18px; background:#fff;
  border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow-card);
  color:var(--lec-brown); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.link-card h4{ font-family:"Baloo 2"; font-size:1.25rem; }
.link-card p{ color:#5b4b45; margin-top:.25rem; }
.link-card:hover{ transform: translateY(-2px); box-shadow:0 12px 22px rgba(0,0,0,.12); }

/* =========================
   CARROUSEL — 3 slides
   (clé : un SEUL bloc, pas de doublon)
========================= */
.carousel{
  position:relative; overflow:hidden;
  height:clamp(420px,62vh,680px);
}
.carousel-track{
  display:flex; height:100%;
  width:300%;                               /* 3 slides => 300% */
  animation: slider3 24s infinite ease-in-out;
  will-change: transform;
}
.slide{
  flex:0 0 33.3333%;                        /* 100/3 */
  height:100%;
  background-size:cover; background-position:center; position:relative;
}
.slide-mask{
  position:absolute; inset:0; display:grid; place-items:center; padding:1rem;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5));
}
.tag{
  display:inline-block; padding:.25rem .65rem; border-radius:999px;
  background:var(--lec-orange); color:#fff; font-weight:800; font-size:.9rem;
  box-shadow:0 6px 12px rgba(242,140,40,.25);
}
/* Pauses ~30% par slide, ~6% transition — ne va jamais au-delà de -200% */
@keyframes slider3{
  0%   { transform: translateX(0%); }        /* slide 1 */
  30%  { transform: translateX(0%); }
  36%  { transform: translateX(-100%); }     /* slide 2 */
  66%  { transform: translateX(-100%); }
  72%  { transform: translateX(-200%); }     /* slide 3 */
  98%  { transform: translateX(-200%); }
  100% { transform: translateX(0%); }        /* retour */
}
/* Pause au survol (pratique) */
.carousel:hover .carousel-track{ animation-play-state: paused; }

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .carousel-track{ animation: none; transform:none; }
}

/* =========================
   UTILITAIRES
========================= */
.drop-shadow-strong{ filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); }

.foot-title{ font-family:"Baloo 2"; font-size:1.1rem; }
.foot-link{ text-decoration: underline; text-underline-offset:2px; }

/* Révélations au scroll (couplé à l'IntersectionObserver) */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.delay-1{ transition-delay: .12s; }
.reveal.delay-2{ transition-delay: .24s; }
.in-view{ opacity:1; transform: translateY(0); }


/* === Bouton WhatsApp flottant === */
.whatsapp-float{
  position: fixed;
  z-index: 60;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 64px; height: 64px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: radial-gradient(ellipse at 30% 30%, #2ad24c, #0ea545);
  box-shadow: 0 10px 24px rgba(16,185,129,.45), 0 2px 6px rgba(0,0,0,.18);
  border: 3px solid #e6fff0;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.whatsapp-float img{
  width: 44px; height: 44px; display:block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}

/* Hover/Focus/Active */
.whatsapp-float:hover{ transform: translateY(-2px) scale(1.04); filter: saturate(1.05); }
.whatsapp-float:active{ transform: translateY(0) scale(.98); }
.whatsapp-float:focus-visible{ outline: 3px solid #f7b733; outline-offset: 3px; border-color:#fff; }

/* Petite pulsation douce pour attirer l’œil */
@keyframes wp-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(46,204,113,.45); }
  70%{ box-shadow: 0 0 0 16px rgba(46,204,113,0); }
  100%{ box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
.whatsapp-float{ animation: wp-pulse 2.4s infinite; }

/* Évite d’imprimer le bouton */
@media print{ .whatsapp-float{ display:none; } }

/* Option : ne pas gêner sur très petits écrans */
@media (max-width: 360px){
  .whatsapp-float{ width:56px; height:56px; }
  .whatsapp-float img{ width:40px; height:40px; }
}