/* ============================================================ Nacre / Perle — système visuel partagé · Tariqa Boutchichiya Source unique d'identité pour les 4 pages (accueil + hikam + activités + médiathèque). Polices chargées via Google Fonts dans le de chaque page (Newsreader / Reem Kufi / Inter). ============================================================ */ :root{ --pearl:#F4F2ED; --pearl-lt:#F4ECD6; --pearl-lt2:#F8F1DD; --teal-deepest:#08201E; --teal-darkest:#0A2730; --teal:#0C3138; --teal-a:#103A40; --teal-mid:#1B5A56; --teal-acc:#2B9E91; --teal-acc2:#36B5A6; --gold:#E8C978; --gold-warm:#E3B765; --gold-deep:#C9A24B; --ochre:#9A6B2E; --ink:#16242C; --mut-d:#A9B8B0; --mut-d2:#B9C6BE; --mut-d3:#9FB3AA; --mut-l:#5C5847; --mut-l2:#3F4A40; } *{box-sizing:border-box} html{overflow-x:clip} body{ margin:0; color:var(--ink); font-family:'Newsreader',Georgia,serif; -webkit-font-smoothing:antialiased; overflow-x:clip; background:var(--pearl); /* Signature nacre : 3 halos radiaux très faibles, fixes au scroll */ background-image: radial-gradient(120% 60% at 18% 0%, rgba(232,201,120,.07), transparent 60%), radial-gradient(120% 70% at 100% 30%, rgba(43,158,145,.06), transparent 62%), radial-gradient(100% 80% at 50% 120%, rgba(201,162,75,.06), transparent 60%); background-attachment:fixed; } ::selection{background:var(--gold-warm);color:var(--teal)} a{color:inherit;text-decoration:none} /* — écritures — */ .ar{font-family:'Reem Kufi',sans-serif;direction:rtl} .lbl{font-family:'Inter',sans-serif;letter-spacing:.3em;text-transform:uppercase} /* — verre dépoli (3 paliers) — */ .glass{ background:linear-gradient(150deg,rgba(239,231,210,.18),rgba(239,231,210,.05)); backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6); border:1px solid rgba(232,201,120,.45); box-shadow:inset 0 1px 0 rgba(255,248,228,.4),inset 0 0 40px rgba(255,248,228,.04),0 20px 56px -22px rgba(7,28,30,.62); } .glassL{ background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.28)); backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 44px -26px rgba(124,110,70,.55); } .glassN{ background:linear-gradient(150deg,rgba(244,236,214,.14),rgba(12,49,56,.16)); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border:1px solid rgba(232,201,120,.32); box-shadow:inset 0 1px 0 rgba(255,248,228,.28); } /* — animations — */ @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes kb{0%{transform:scale(1.03)}100%{transform:scale(1.13)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes glowP{0%,100%{opacity:.55}50%{opacity:.9}} .kb{animation:kb 22s ease-in-out infinite alternate} .spin{transform-box:fill-box;transform-origin:center;animation:spin 120s linear infinite} /* — barre de progression de scroll — */ .scrollbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold-warm);z-index:90} /* — primitives de mise en page partagées — */ .nac-pad{padding:18px} .nac-teal{background:linear-gradient(160deg,var(--teal-a),var(--teal-darkest))} .nac-panel{position:relative;margin:0 18px;border-radius:26px;overflow:hidden} /* panneau teal pleine largeur, clippe les SVG décoratifs */ .nac-wrap{max-width:1200px;margin:0 auto;position:relative} .nac-pill{background:var(--teal);color:var(--pearl-lt);border-radius:30px;padding:13px 24px;transition:background .35s} .nac-pill:hover{background:var(--teal-a)} .nac-card-hover{transition:transform .35s,background .35s} .nac-card-hover:hover{transform:translateY(-6px)} /* — accessibilité mouvement — */ @media (prefers-reduced-motion:reduce){ .kb,.spin{animation:none} *{scroll-behavior:auto} } /* — responsive (desktop-first, on replie) — */ @media (max-width:860px){ .nac-grid4{grid-template-columns:repeat(2,1fr)!important} .nac-grid3{grid-template-columns:1fr!important} .nac-vidgrid{grid-template-columns:1fr 1fr!important} .nac-maitre{grid-template-columns:1fr!important} .nac-h1{font-size:44px!important} .nac-h2{font-size:30px!important} .nac-navlinks{display:none!important} /* la barre de liens du hero se masque en mobile */ } @media (max-width:560px){ .nac-grid4{grid-template-columns:1fr!important} .nac-vidgrid{grid-template-columns:1fr!important} }