/* AfroKids86 — feuille de style unique du site.
   Palette officielle : blanc, bleu très clair, rouge, jaune, orange, noir.
   Aucune autre couleur ne doit être introduite. Les variantes "-texte"
   sont les seules déclinaisons autorisées : elles existent uniquement
   pour garantir un contraste lisible sur fond blanc (≥ 4.5:1). */
:root{
  --bg:#FFFFFF;
  --bg-2:#EAF9FA;
  --ink:#0E0E0E;
  --ink-dim:rgba(14,14,14,.64);
  --rouge:#E01508;        /* rouge du logo, juste assez dense pour que le blanc
                             des boutons passe le contraste AA (4.9:1) */
  --rouge-texte:#C81409;  /* pour du texte < 24px sur fond clair */
  --rouge-fonce:#B71408;
  --orange:#F97F0C;
  --orange-texte:#A34A00;
  --jaune:#FDCB4A;
  --bleu:#2EC4CE;
  --bleu-texte:#00707A;
  --bleu-fonce:#00666E;
  --line:rgba(14,14,14,.12);
  --display:'Arial Black','Segoe UI Black','Helvetica Neue',system-ui,sans-serif;
  --body:system-ui,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
/* overflow-x:clip et non hidden : le bandeau incliné (.marquee) déborde de
   quelques pixels ; « clip » le masque sans créer de conteneur de défilement,
   ce qui préserve le position:sticky de la barre de navigation. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);line-height:1.6;overflow-x:clip;
}
::selection{background:var(--jaune);color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--bleu-texte);outline-offset:3px}
img{max-width:100%}

/* ---------- NAV ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#FFFFFF;padding:.7rem 1.1rem;border-radius:0 0 .8rem 0;
}
.skip-link:focus{left:0}
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--line);
}
.nav-inner{
  max-width:1150px;margin:0 auto;
  padding:.6rem clamp(1.1rem,4vw,4rem);
  display:flex;align-items:center;gap:1rem;
}
/* Logo officiel : image large à proportions fixes — ne jamais contraindre
   width ET height, la hauteur seule pilote la taille. */
.nav-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto}
.nav-brand img{height:46px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0;order:2}
.nav-links a{
  display:block;text-decoration:none;color:var(--ink-dim);
  font-size:.86rem;font-weight:700;
  padding:.5rem .7rem;border-radius:999px;
  transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--ink);background:rgba(14,14,14,.05)}
.nav-links a[aria-current="page"]{color:var(--rouge-texte);background:rgba(224,21,8,.09)}
.nav .btn{padding:.62rem 1.15rem;font-size:.8rem;box-shadow:0 4px 0 var(--rouge-fonce);order:3}
.nav .btn-solid:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--rouge-fonce)}
.nav-toggle{
  display:none;background:none;border:2px solid var(--ink);border-radius:999px;
  padding:.45rem .8rem;font-family:var(--display);font-style:italic;
  text-transform:uppercase;font-size:.75rem;cursor:pointer;color:var(--ink);
}
@media (max-width:1000px){
  .nav-inner{flex-wrap:wrap}
  .nav-toggle{display:block;order:3}
  .nav .btn{order:2}
  .nav-links{
    order:4;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:.1rem;padding:.4rem 0 .8rem;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.7rem .9rem;font-size:.95rem}
}

/* ---------- HERO (accueil) ---------- */
.hero{
  position:relative;min-height:88svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(60% 50% at 85% 8%,rgba(253,203,74,.28),transparent 60%),
    radial-gradient(50% 45% at 8% 90%,rgba(46,196,206,.16),transparent 60%),
    var(--bg);
}
#ribbons{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-inner{
  position:relative;z-index:2;
  padding:clamp(1.4rem,4vw,4rem);
  width:100%;max-width:1150px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  opacity:0;animation:fade .9s ease .1s forwards}
.eyebrow{
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:700;
}
@keyframes fade{to{opacity:1}}

/* Titre d'accueil : le logo lui-même, en grand — il porte déjà le nom, pas de
   texte en doublon. Seule la largeur est pilotée, la hauteur suit pour ne
   jamais déformer l'image. */
h1.title{margin:1.3rem 0 0;line-height:0}
h1.title img{
  width:min(620px,88%);height:auto;display:block;
  opacity:0;transform:translateY(30px) scale(.96);
  animation:logo-in .9s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes logo-in{to{opacity:1;transform:none}}

.hero p.lede{
  max-width:34rem;font-size:clamp(1.02rem,1.4vw,1.2rem);
  color:var(--ink-dim);margin-top:1.5rem;
  opacity:0;animation:fade 1s ease 1s forwards;
}
.hero p.lede strong{color:var(--ink)}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem;
  opacity:0;animation:fade 1s ease 1.2s forwards}
/* variante hors hero : pas d'animation d'apparition */
.cta-static{animation:none;opacity:1}
.btn{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.04em;
  padding:1rem 1.7rem;border-radius:999px;text-decoration:none;
  transition:transform .3s cubic-bezier(.2,1.4,.3,1),box-shadow .3s;
  will-change:transform;display:inline-block;
}
.btn-solid{background:var(--rouge);color:#FFFFFF;
  box-shadow:0 6px 0 var(--rouge-fonce)}
.btn-solid:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--rouge-fonce)}
.btn-bleu{background:var(--bleu);color:var(--ink);box-shadow:0 6px 0 var(--bleu-fonce)}
.btn-bleu:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--bleu-fonce)}
.btn-ghost{border:2px solid var(--ink);color:var(--ink);box-shadow:0 6px 0 rgba(14,14,14,.25)}
.btn-ghost:hover{transform:translateY(-4px);box-shadow:0 10px 0 rgba(14,14,14,.25)}
.scroll-hint{
  position:absolute;bottom:1.3rem;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--ink-dim);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* confettis flottants (générés en JS) */
.confetti{position:absolute;pointer-events:none;z-index:1;will-change:transform;
  rotate:var(--r,0deg);
  animation:floaty var(--d,7s) ease-in-out var(--dl,0s) infinite}
@keyframes floaty{
  0%,100%{translate:0 0;rotate:var(--r,0deg)}
  50%{translate:var(--tx,0px) -30px;rotate:calc(var(--r,0deg) + 24deg)}
}

/* ---------- HERO COMPACT (pages intérieures) ---------- */
.page-hero{
  background:
    radial-gradient(70% 120% at 88% -20%,rgba(253,203,74,.32),transparent 60%),
    radial-gradient(60% 110% at 0% 120%,rgba(46,196,206,.18),transparent 60%),
    var(--bg);
  border-bottom:1.5px solid var(--line);
}
.page-hero .page-hero-inner{
  max-width:1150px;margin:0 auto;
  padding:clamp(2.6rem,6vw,4.6rem) clamp(1.4rem,4vw,4rem);
}
.page-hero h1{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:clamp(2.1rem,5.5vw,3.6rem);line-height:1;
  margin:0 0 1.1rem;letter-spacing:-.015em;text-wrap:balance;
}
.page-hero h1 em{font-style:italic;color:var(--rouge);
  text-decoration:underline;text-decoration-color:var(--jaune);
  text-decoration-thickness:.14em;text-underline-offset:.12em}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--bleu);color:var(--ink);
  overflow:hidden;white-space:nowrap;
  transform:rotate(-1.4deg) scale(1.02);
  padding:.8rem 0;font-family:var(--display);font-style:italic;
  text-transform:uppercase;font-size:clamp(1rem,2.4vw,1.5rem);
  letter-spacing:.05em;
  box-shadow:0 10px 30px rgba(46,196,206,.3);
}
.marquee-track{display:inline-block;animation:slide 22s linear infinite}
.marquee span{margin:0 1.4rem}
.marquee b{color:#FFFFFF;font-weight:900}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{padding:clamp(3.2rem,7vw,6rem) clamp(1.4rem,4vw,4rem);
  max-width:1150px;margin:0 auto}
.kicker{
  font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--bleu-texte);font-weight:800;margin-bottom:.7rem;
}
h2{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1;
  margin:0 0 1.3rem;text-wrap:balance;letter-spacing:-.015em;
}
h2 em{font-style:italic;color:var(--rouge);
  text-decoration:underline;text-decoration-color:var(--jaune);
  text-decoration-thickness:.14em;text-underline-offset:.12em}
.prose{max-width:38rem;color:var(--ink-dim);font-size:1.05rem}
.prose strong{color:var(--ink)}
/* utilitaires (évitent les attributs style= inline, interdits par la CSP) */
.center{margin-left:auto;margin-right:auto}
.mt-s{margin-top:1.1rem}
.mt-0{margin-top:0}
.note{
  margin-top:2rem;padding:1rem 1.2rem;border-radius:1rem;
  background:var(--bg-2);border:1.5px dashed rgba(46,196,206,.5);
  color:var(--ink-dim);font-size:.95rem;max-width:42rem;
}
.note strong{color:var(--ink)}

.reveal{opacity:0;transform:translateY(36px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.d1.in{transition-delay:.12s}.reveal.d2.in{transition-delay:.24s}
.reveal.d3.in{transition-delay:.36s}

/* ---------- valeurs (pastilles) ---------- */
.values{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem;padding:0;list-style:none}
.values li{
  font-family:var(--display);font-style:italic;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.02em;
  border-radius:999px;padding:.6rem 1.1rem;
  border:1.5px solid var(--line);background:#fff;
  box-shadow:0 4px 0 rgba(14,14,14,.06);
}
.values li:nth-child(6n+1){color:var(--rouge-texte);border-color:rgba(224,21,8,.35)}
.values li:nth-child(6n+2){color:var(--bleu-texte);border-color:rgba(46,196,206,.45)}
.values li:nth-child(6n+3){color:var(--orange-texte);border-color:rgba(249,127,12,.4)}
.values li:nth-child(6n+4){color:var(--ink);border-color:rgba(14,14,14,.3)}
.values li:nth-child(6n+5){color:var(--bleu-texte);border-color:rgba(46,196,206,.45)}
.values li:nth-child(6n+6){color:var(--rouge-texte);border-color:rgba(224,21,8,.35)}

/* ---------- cartes 3D ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1.4rem;margin-top:2.8rem;perspective:1300px}
.card{
  position:relative;border-radius:1.5rem;padding:1.9rem 1.6rem 1.7rem;
  background:#fff;border:1.5px solid var(--line);
  transform-style:preserve-3d;
  transition:transform .15s ease-out,box-shadow .3s,border-color .3s;
  will-change:transform;overflow:hidden;
  box-shadow:0 8px 0 rgba(14,14,14,.06);
}
.card:hover{box-shadow:0 26px 50px rgba(14,14,14,.16)}
.card:nth-child(3n+1):hover{border-color:var(--rouge)}
.card:nth-child(3n+2):hover{border-color:var(--orange)}
.card:nth-child(3n+3):hover{border-color:var(--bleu)}
.card .glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),
    rgba(253,203,74,.25),transparent 55%);
  opacity:0;transition:opacity .3s;
}
.card:hover .glare{opacity:1}
.card .icon{
  width:3.3rem;height:3.3rem;border-radius:1.05rem;
  display:grid;place-items:center;margin-bottom:1.15rem;
  transform:translateZ(32px);
}
.card:nth-child(3n+1) .icon{background:rgba(224,21,8,.12);color:var(--rouge)}
.card:nth-child(3n+2) .icon{background:rgba(249,127,12,.14);color:var(--orange-texte)}
.card:nth-child(3n+3) .icon{background:rgba(46,196,206,.15);color:var(--bleu-texte)}
.card h3{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:1.15rem;margin:0 0 .55rem;transform:translateZ(24px);
}
.card p{color:var(--ink-dim);font-size:.95rem;margin:0;transform:translateZ(16px)}
.card p + p{margin-top:.7rem}
.card svg{width:1.6rem;height:1.6rem}
.card .age{
  display:inline-block;font-family:var(--display);font-style:italic;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  border-radius:999px;padding:.3rem .7rem;margin-bottom:.8rem;
  background:rgba(14,14,14,.06);color:var(--ink);transform:translateZ(20px);
}

/* ---------- SCÈNE (affiche 3D) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
@media (max-width:840px){.split{grid-template-columns:1fr}}
.poster-wrap{perspective:1100px;display:grid;place-items:center}
.poster{
  position:relative;width:min(335px,82vw);aspect-ratio:3/4.15;border-radius:1.3rem;
  background:
    radial-gradient(95% 55% at 85% -8%,rgba(253,203,74,.55),transparent 55%),
    radial-gradient(80% 55% at -10% 50%,rgba(46,196,206,.32),transparent 60%),
    radial-gradient(100% 65% at 60% 115%,rgba(224,21,8,.3),transparent 62%),
    #FFFFFF;
  border:2px solid var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.8rem;transform:rotateY(-13deg) rotateX(4deg);
  transform-style:preserve-3d;
  box-shadow:-24px 36px 60px rgba(14,14,14,.22);
  transition:transform .16s ease-out;will-change:transform;
  animation:float 5.5s ease-in-out infinite;overflow:hidden;
  color:var(--ink);
}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -13px}}
.poster::after{
  content:'';position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 43%,rgba(255,255,255,.55) 50%,transparent 57%);
  transform:translateX(-70%);animation:shine 5s ease-in-out infinite;
}
@keyframes shine{0%,58%{transform:translateX(-70%)}92%,100%{transform:translateX(70%)}}
.poster .p-top{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bleu-texte);font-weight:700;transform:translateZ(26px)}
.poster .p-title{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:clamp(2.1rem,7vw,2.9rem);line-height:.93;
  transform:translateZ(46px);
  background:linear-gradient(100deg,var(--orange-texte),var(--orange) 45%,var(--rouge));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.poster .p-foot{font-size:.83rem;color:var(--ink-dim);transform:translateZ(20px)}
.poster .p-foot b{color:var(--ink)}
.timeline{list-style:none;margin:2.1rem 0 0;padding:0;display:grid;gap:1.15rem}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.timeline .tag{
  font-family:var(--display);font-style:italic;font-size:.78rem;
  border-radius:.65rem;padding:.4rem .75rem;white-space:nowrap;
}
.timeline li:nth-child(3n+1) .tag{background:rgba(224,21,8,.12);color:var(--rouge-texte)}
.timeline li:nth-child(3n+2) .tag{background:rgba(46,196,206,.16);color:var(--bleu-texte)}
.timeline li:nth-child(3n+3) .tag{background:rgba(249,127,12,.16);color:var(--orange-texte)}
.timeline p{margin:.12rem 0 0;color:var(--ink-dim);font-size:.95rem}
.timeline b{color:var(--ink)}

/* ---------- placeholders visuels (partenaires, boutique, équipe) ---------- */
.ph{
  position:absolute;inset:0;display:grid;place-items:center;gap:.4rem;
  align-content:center;text-align:center;padding:1rem;
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.08em;color:rgba(14,14,14,.45);
  background:
    repeating-linear-gradient(45deg,rgba(46,196,206,.12) 0 12px,transparent 12px 24px),
    var(--bg-2);
}
.ph svg{width:2rem;height:2rem;opacity:.5}

/* ---------- PARTENAIRES ---------- */
.partners{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1.1rem;margin-top:2.6rem;
}
.partner{
  border-radius:1.2rem;border:1.5px solid var(--line);background:#fff;
  aspect-ratio:3/2;display:grid;place-items:center;padding:1.2rem;
  text-align:center;position:relative;overflow:hidden;
  box-shadow:0 6px 0 rgba(14,14,14,.06);
}
.partner img{max-height:100%;object-fit:contain}

/* ---------- BOUTIQUE ---------- */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.3rem;margin-top:2.6rem}
.product{
  border-radius:1.4rem;border:1.5px solid var(--line);background:#fff;
  overflow:hidden;box-shadow:0 8px 0 rgba(14,14,14,.06);opacity:.75;
}
.product .thumb{aspect-ratio:1;position:relative;background:var(--bg-2)}
.product .body{padding:1rem 1.1rem 1.2rem}
.product h3{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:1rem;margin:0 0 .3rem;
}
.product p{margin:0;color:var(--ink-dim);font-size:.88rem}
.badge-soon{
  display:inline-block;font-family:var(--display);font-style:italic;
  text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;
  background:rgba(46,196,206,.18);color:var(--bleu-texte);
  border-radius:999px;padding:.3rem .75rem;margin-top:.7rem;
}

/* ---------- ÉQUIPE ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1.3rem;margin-top:2.6rem}
.member{text-align:center}
.member .avatar{
  aspect-ratio:1;border-radius:1.4rem;overflow:hidden;position:relative;
  border:1.5px solid var(--line);background:var(--bg-2);
  box-shadow:0 8px 0 rgba(14,14,14,.06);
}
.member img{width:100%;height:100%;object-fit:cover;display:block}
.member h3{
  font-family:var(--display);font-style:italic;text-transform:uppercase;
  font-size:1rem;margin:.9rem 0 .15rem;
}
.member p{margin:0;color:var(--ink-dim);font-size:.87rem}

/* ---------- CONTACT ---------- */
.contact-box{
  position:relative;border-radius:2rem;padding:clamp(2.2rem,5vw,3.8rem);
  background:var(--bg-2);border:1.5px solid rgba(46,196,206,.35);
  text-align:center;overflow:hidden;
  box-shadow:0 10px 0 rgba(46,196,206,.14);
}
.contact-box .blob{position:absolute;border-radius:50%;filter:blur(60px);
  opacity:.35;pointer-events:none}
.blob.b1{width:300px;height:300px;background:var(--bleu);left:-80px;top:-100px;
  animation:blob1 10s ease-in-out infinite}
.blob.b2{width:280px;height:280px;background:var(--jaune);right:-70px;bottom:-110px;
  animation:blob2 12s ease-in-out infinite}
@keyframes blob1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,35px) scale(1.15)}}
@keyframes blob2{0%,100%{transform:translate(0,0)}50%{transform:translate(-45px,-40px) scale(1.18)}}
.contact-box>*{position:relative}
.contact-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.contact-note{margin-top:1.8rem;font-size:.87rem;color:var(--ink-dim)}

footer{
  padding:2.4rem 1.5rem 3rem;text-align:center;
  color:var(--ink-dim);font-size:.82rem;border-top:1.5px solid var(--line);
}
footer .logo-mark{height:52px;width:auto;margin:0 auto}
footer p{margin:.7rem 0 0}
.footer-links{
  display:flex;gap:.4rem 1.2rem;flex-wrap:wrap;justify-content:center;
  list-style:none;margin:1.4rem 0 0;padding:0;
}
.footer-links a{color:var(--ink-dim);text-decoration:none;font-weight:600}
.footer-links a:hover{color:var(--rouge-texte)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.brand,.hero p.lede,.cta-row,h1.title img{opacity:1;transform:none}
}