/* =====================================================================
   Festi'Eid — DESIGN SYSTEM PARTAGÉ « Carnaval d'Orient »
   Charte officielle (extraite du logo). Source unique pour index / galerie /
   partenaires. Police à charger dans chaque page (Fredoka, Fraunces, Mulish,
   Baloo Bhaijaan 2, Tajawal).
   ===================================================================== */
:root{
  --cream:#fdf6e8; --cream2:#fff9ef; --paper:#fffdf8;
  --navy:#000745; --navy2:#0b1457; --ink:#2c2942;
  --gold:#d9a148; --gold2:#ec9726;
  --magenta:#ce256f; --rose:#d93d5c;
  --teal:#0b6973; --teal2:#43977e;
  --orange:#e7703e; --olive:#5b7b5b; --violet:#8a4fbf;
  --display:'Fredoka',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --body:'Mulish',system-ui,sans-serif;
  --r:24px; --rs:16px;
  --shadow:0 18px 50px -18px rgba(0,7,69,.35);
  --shadow-sm:0 10px 26px -12px rgba(0,7,69,.28);
  --ring:0 0 0 1px rgba(0,7,69,.06);
  --maxw:1180px;
}
[dir="rtl"]{--display:'Baloo Bhaijaan 2',sans-serif;--body:'Tajawal',sans-serif;--serif:'Baloo Bhaijaan 2',sans-serif}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);line-height:1.7;overflow-x:hidden;
  background:
    radial-gradient(120% 60% at 80% -10%, rgba(217,161,72,.16), transparent 55%),
    radial-gradient(90% 50% at 0% 0%, rgba(206,37,111,.10), transparent 50%),
    var(--cream);
}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;color:var(--navy);font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative;padding:84px 0}
::selection{background:var(--magenta);color:#fff}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1.04rem;padding:14px 30px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;will-change:transform}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-pink{background:linear-gradient(135deg,var(--magenta),var(--rose));color:#fff;box-shadow:0 14px 30px -8px rgba(206,37,111,.6)}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:var(--navy);box-shadow:0 14px 30px -8px rgba(217,161,72,.6)}
.btn-orange{background:linear-gradient(135deg,var(--orange),#d85a28);color:#fff;box-shadow:0 14px 30px -8px rgba(231,112,62,.55)}
.btn-ghost{background:rgba(255,255,255,.7);border:2px solid var(--navy);color:var(--navy);backdrop-filter:blur(4px)}

/* ---------- Kicker + titres ---------- */
.kick{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--magenta);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}
.kick::before,.kick::after{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))}
.kick::after{background:linear-gradient(90deg,var(--gold),transparent)}
.stitle{font-size:clamp(1.9rem,4.5vw,3rem);margin-bottom:10px}
.ssub{font-size:1.06rem;max-width:620px;color:#5b5775}
.center{text-align:center}.center .kick{justify-content:center}.center .ssub{margin-inline:auto}

/* ---------- Banderoles ---------- */
.bunting{display:flex;height:30px;width:100%;overflow:hidden;position:relative;z-index:3;filter:drop-shadow(0 4px 4px rgba(0,7,69,.12))}
.bunting i{flex:1;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:26px solid}
.bunting i:nth-child(6n+1){border-top-color:var(--magenta)}
.bunting i:nth-child(6n+2){border-top-color:var(--gold)}
.bunting i:nth-child(6n+3){border-top-color:var(--teal)}
.bunting i:nth-child(6n+4){border-top-color:var(--orange)}
.bunting i:nth-child(6n+5){border-top-color:var(--violet)}
.bunting i:nth-child(6n+6){border-top-color:var(--teal2)}

/* ---------- Header / nav ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(253,246,232,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,7,69,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--navy)}
.brand .brand-logo{height:52px;width:auto;display:block}
.brand .moon{width:26px;height:26px;flex:none}
.brand .m{color:var(--magenta)}
.nav-links{display:flex;gap:26px;font-weight:700;font-size:.92rem}
.nav-links a{color:var(--navy);opacity:.78;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--magenta);transition:width .25s}
.nav-links a:hover,.nav-links a.on{opacity:1}.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.back{color:var(--magenta);font-family:var(--display);font-weight:600;font-size:.92rem}
.lang{background:var(--navy);color:#fff;border:none;border-radius:999px;padding:8px 18px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.86rem;transition:background .2s}
.lang:hover{background:var(--magenta)}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- Footer ---------- */
footer{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;text-align:center;padding:60px 0 36px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 6a18 18 0 1 0 12 31A22 22 0 1 1 30 6z' fill='%23d9a148' opacity='0.05'/%3E%3C/svg%3E");}
footer .emer{height:50px;margin:0 auto 12px;filter:brightness(0) invert(1);opacity:.95}
footer h2{color:#fff}
footer a.mail,footer a{color:var(--gold)}
.social{display:flex;gap:14px;justify-content:center;margin:18px 0}
.social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;
  background:rgba(255,255,255,.1);transition:background .2s,transform .2s}
.social a:hover{background:var(--magenta);transform:translateY(-3px)}
.muted{opacity:.7;font-size:.86rem;margin-top:10px}

/* ---------- Révélations au scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}