/*
Theme Name: Hikma AI
Theme URI: https://hikmaai.org
Author: Hikma AI
Author URI: https://hikmaai.org
Description: Thème WordPress sur mesure pour HIKMA AI — palette or et crème, motif arabesque animé, sections héritage / vision / citation, entièrement éditable depuis le Customizer et les menus WordPress.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hikma-ai
Tags: custom-menu, custom-logo, featured-images, translation-ready, one-column
*/

/* ============ TOKENS ============ */
:root{
  --cream-deep:   #efe3bf;
  --cream:        #f6ecd2;
  --cream-light:  #fbf6e6;
  --paper:        #fffdf6;
  --ink:          #201a0f;
  --ink-soft:     #4d4330;
  --brown:        #7a6a45;
  --gold:         #b9902f;
  --gold-bright:  #d3a83e;
  --gold-line:    rgba(185,144,47,0.35);
  --shadow:       0 18px 50px -20px rgba(60,45,10,0.35);
  --radius-arch:  200px 200px 8px 8px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream-deep:  #241d10;
    --cream:       #2a2214;
    --cream-light: #302818;
    --paper:       #352c1a;
    --ink:         #f3e9cd;
    --ink-soft:    #d8c99e;
    --brown:       #c9b483;
    --gold:        #e0b448;
    --gold-bright: #f0c766;
    --gold-line:   rgba(224,180,72,0.28);
    --shadow:      0 18px 50px -18px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --cream-deep:  #241d10; --cream:#2a2214; --cream-light:#302818; --paper:#352c1a;
  --ink:#f3e9cd; --ink-soft:#d8c99e; --brown:#c9b483; --gold:#e0b448; --gold-bright:#f0c766;
  --gold-line: rgba(224,180,72,0.28); --shadow: 0 18px 50px -18px rgba(0,0,0,0.6);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top: calc(96px + var(--safe-t));}
body{
  background: var(--cream);
  color: var(--ink);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:19px; line-height:1.6; overflow-x:hidden;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.nav-font, button, .btn, .eyebrow, .topics-strip, .footer-links, .badge{ font-family:'Jost', sans-serif; }

/* ============ ARABESQUE BACKGROUND ============ */
.arabesque-field{ position:fixed; inset:0; z-index:-2; overflow:hidden; background: var(--cream); }
.arabesque-field::before{
  content:""; position:absolute; inset:-10%;
  background-image: var(--arabesque-svg);
  background-size: 420px; opacity:0.16;
  animation: driftPattern 140s linear infinite;
}
.arabesque-field::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 45% at 15% 8%, var(--gold-line), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 92%, var(--gold-line), transparent 60%);
  mix-blend-mode: multiply;
}
@keyframes driftPattern{ from{ transform: translate3d(0,0,0) rotate(0deg);} to{ transform: translate3d(-260px,-260px,0) rotate(1deg);} }
@media (prefers-reduced-motion: reduce){ .arabesque-field::before{ animation:none; } }

/* ============ NAV ============ */
#masthead{ position:sticky; top:var(--safe-t); z-index:50; display:flex; justify-content:center; padding:18px 20px 0; }
.nav-pill{
  width:100%; max-width:1180px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background: var(--paper); border:1px solid var(--gold-line); border-radius:999px;
  padding:10px 12px 10px 22px; box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.logo{ display:flex; align-items:center; gap:10px; font-family:'Amiri', serif; }
.logo .mark{ font-size:26px; color:var(--gold); line-height:1;}
.logo .mark img{ height:28px; width:auto; }
.logo .word{ display:flex; flex-direction:column; line-height:1; }
.logo .word b{ font-size:15px; letter-spacing:0.14em; font-style:normal;}
.logo .word span{ font-size:9px; letter-spacing:0.3em; color:var(--brown); }

.links{ display:flex; align-items:center; gap:26px; list-style:none; }
.links li{ list-style:none; }
.links a{ font-size:13.5px; letter-spacing:0.04em; color:var(--ink-soft); position:relative; padding:4px 0; transition:color .25s ease; }
.links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .3s ease; }
.links a:hover{ color:var(--ink); } .links a:hover::after{ right:0; }
.links .current-menu-item > a{ color:var(--gold); }

.cta-pill{
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#211705;
  font-size:13px; font-weight:600; letter-spacing:0.03em; padding:11px 22px; border-radius:999px;
  border:none; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 20px -8px rgba(185,144,47,0.7); white-space:nowrap; display:inline-block;
}
.cta-pill:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(185,144,47,0.85); }
.burger{ display:none; }
@media (max-width: 880px){
  .links{ display:none; }
  .burger{ display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--gold-line); border-radius:50%; background:transparent; cursor:pointer;}
  .burger span{ width:16px; height:1.5px; background:var(--ink); position:relative; }
  .burger span::before,.burger span::after{ content:""; position:absolute; width:16px; height:1.5px; background:var(--ink); left:0; }
  .burger span::before{ top:-5px; } .burger span::after{ top:5px; }
}

/* ============ HERO ============ */
.hero{ min-height: calc(88vh - 40px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:70px 20px 40px; position:relative; }
.eyebrow{ font-size:12px; letter-spacing:0.32em; color:var(--brown); display:flex; gap:10px; align-items:center; margin-bottom:26px; opacity:0; transform:translateY(10px); flex-wrap:wrap; justify-content:center;}
.eyebrow .ar{ font-family:'Amiri', serif; font-size:15px; color:var(--gold); letter-spacing:0; }
.eyebrow .dot{ color: var(--gold); }
h1.headline{ font-weight:500; color:var(--ink); font-size: clamp(2.6rem, 6.4vw, 5rem); line-height:1.06; max-width:16ch; }
h1.headline .line{ display:block; overflow:hidden; }
h1.headline .line span{ display:block; opacity:0; transform: translateY(60px); }
h1.headline em{ font-style:italic; color: var(--gold); font-weight:500; }
.sub{ font-style:italic; color:var(--brown); font-size:1.5rem; margin-top:18px; opacity:0; transform:translateY(10px); }
.desc{ max-width:640px; margin:26px auto 0; color:var(--ink-soft); font-size:1.15rem; opacity:0; transform:translateY(10px); }
.hero-cta{ margin-top:38px; opacity:0; transform:translateY(10px); }
.pill-btn{ display:inline-block; font-family:'Jost'; font-size:13px; letter-spacing:0.1em; font-weight:600; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#211705; padding:16px 38px; border-radius:999px; box-shadow: 0 14px 30px -12px rgba(185,144,47,0.75); transition: transform .3s ease; }
.pill-btn:hover{ transform:translateY(-3px) scale(1.02); }
.hero-foot{ margin-top:56px; font-size:13px; letter-spacing:0.05em; color:var(--brown); display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; opacity:0; }
.hero-foot b{ color:var(--gold); font-weight:600; }

.hero.reveal .eyebrow, .hero.reveal .sub, .hero.reveal .desc, .hero.reveal .hero-cta, .hero.reveal .hero-foot{ animation: floatIn .9s ease forwards; }
.hero.reveal .eyebrow{ animation-delay:.05s; }
.hero.reveal h1.headline .line:nth-child(1) span{ animation: lineUp .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.18s; }
.hero.reveal h1.headline .line:nth-child(2) span{ animation: lineUp .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.32s; }
.hero.reveal h1.headline .line:nth-child(3) span{ animation: lineUp .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.46s; }
.hero.reveal .sub{ animation-delay:.6s; } .hero.reveal .desc{ animation-delay:.72s; }
.hero.reveal .hero-cta{ animation-delay:.86s; } .hero.reveal .hero-foot{ animation-delay:1s; }
@keyframes floatIn{ to{ opacity:1; transform:translateY(0);} }
@keyframes lineUp{ to{ opacity:1; transform:translateY(0);} }

/* ============ TOPICS MARQUEE ============ */
.topics-strip{ border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); background: var(--cream-deep); overflow:hidden; padding:16px 0; }
.marquee{ display:flex; width:max-content; animation: scrollX 32s linear infinite; }
.marquee:hover{ animation-play-state: paused; }
.marquee span{ font-style:italic; font-size:1.05rem; color:var(--ink-soft); padding:0 30px; white-space:nowrap; position:relative; font-family:'Cormorant Garamond'; }
.marquee span::after{ content:"•"; position:absolute; right:-3px; color:var(--gold); font-style:normal; }
@keyframes scrollX{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ SECTION SHELL ============ */
section{ padding:110px 20px; position:relative; }
.wrap{ max-width:1180px; margin:0 auto; }
.section-head{ text-align:center; max-width:780px; margin:0 auto 60px; }
.kicker{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; letter-spacing:0.3em; color:var(--brown); margin-bottom:18px; flex-wrap:wrap;}
.kicker .ar{ font-family:'Amiri'; color:var(--gold); letter-spacing:0; font-size:14px; }
.kicker .rule{ width:34px; height:1px; background:var(--gold-line); }
h2.title{ font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight:500; color:var(--ink); line-height:1.15; }
h2.title em{ font-style:italic; color:var(--gold); }
.lead{ color:var(--ink-soft); font-size:1.2rem; margin-top:20px; }
.reveal-up{ opacity:0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-up.in-view{ opacity:1; transform:translateY(0); }

/* ============ HERITAGE ============ */
.heritage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:820px){ .heritage-grid{ grid-template-columns:1fr; } }
.heritage-card{ background: var(--paper); border:1px solid var(--gold-line); border-radius:18px; overflow:hidden; box-shadow: var(--shadow); transition: transform .4s ease; }
.heritage-card:hover{ transform: translateY(-6px); }
.arch-frame{ height:340px; border-radius: 130px 130px 0 0; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.arch-frame svg{ width:100%; height:100%; }
.arch-frame img{ width:100%; height:100%; object-fit:cover; object-position:center; transition: transform .6s ease; }
.heritage-card:hover .arch-frame img{ transform: scale(1.04); }
.heritage-body{ padding:28px 34px 36px; text-align:center; }
.tag{ font-family:'Jost'; font-size:11px; letter-spacing:0.24em; color:var(--brown); }
.heritage-body h3{ font-size:2rem; font-weight:600; margin:10px 0 2px; color:var(--ink); }
.heritage-body .ar-name{ font-family:'Amiri'; font-style:italic; color:var(--gold); font-size:1.15rem; margin-bottom:16px; }
.heritage-body p{ color:var(--ink-soft); font-size:1.02rem; }
.ghost-btn{ display:inline-block; margin-top:22px; font-family:'Jost'; font-size:12px; letter-spacing:0.14em; border:1px solid var(--gold); color:var(--gold); padding:11px 26px; border-radius:999px; transition: background .3s ease, color .3s ease; }
.ghost-btn:hover{ background:var(--gold); color:#211705; }

/* ============ STATS ============ */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:70px; }
@media (max-width:820px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
.stat-box{ background: var(--paper); border:1px solid var(--gold-line); border-radius:14px; padding:34px 12px; text-align:center; }
.stat-num{ font-size:2.6rem; font-weight:600; color:var(--ink); }
.stat-num sup{ color:var(--gold); font-size:0.6em; }
.stat-label{ font-family:'Jost'; font-size:11px; letter-spacing:0.16em; color:var(--brown); margin-top:8px; }

/* ============ VISION ============ */
.vision-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:900px){ .vision-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .vision-grid{ grid-template-columns:1fr; } }
.vision-card{ background: var(--paper); border:1px solid var(--gold-line); border-radius:14px; padding:32px 28px; transition: border-color .3s ease, transform .3s ease; }
.vision-card:hover{ border-color: var(--gold); transform:translateY(-4px); }
.vision-card .num{ font-size:1.9rem; color:var(--gold); font-weight:600; font-family:'Cormorant Garamond'; }
.vision-card h4{ font-size:1.35rem; margin:10px 0 10px; color:var(--ink); font-weight:600; }
.vision-card p{ color:var(--ink-soft); font-size:1rem; }

/* ============ QUOTE ============ */
.quote-section{ background: var(--cream-deep); text-align:center; }
.quote-text{ font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-style:italic; line-height:1.4; max-width:900px; margin:0 auto; color:var(--ink); }
.quote-text .hl{ color:var(--gold); font-style:italic; }
.quote-by{ margin-top:32px; font-family:'Jost'; font-size:12px; letter-spacing:0.2em; color:var(--brown); }
.quote-by::before, .quote-by::after{ content:"—"; margin:0 10px; color:var(--gold-line); }
.word-fade span{ display:inline-block; opacity:0; transform:translateY(14px); filter:blur(3px); }
.quote-section.in-view .word-fade span{ animation: wordIn .6s ease forwards; }
@keyframes wordIn{ to{ opacity:1; transform:translateY(0); filter:blur(0);} }

/* ============ PARTNER ============ */
.partner{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
.partner-mark{ width:150px; height:150px; flex:0 0 auto; border-radius:16px; background: var(--paper); border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.partner-mark img{ width:100%; height:100%; object-fit:contain; }
.partner-text{ flex:1; min-width:260px; }
.partner-text .tag{ margin-bottom:10px; display:block; }
.partner-text p{ color:var(--ink-soft); margin-top:12px; }

/* ============ BLOG / ARCHIVE / SINGLE ============ */
.content-wrap{ max-width:820px; margin:0 auto; padding:160px 20px 100px; }
.post-card{ background:var(--paper); border:1px solid var(--gold-line); border-radius:16px; padding:34px; margin-bottom:28px; }
.post-card h2{ font-size:1.8rem; font-weight:600; }
.post-card h2 a:hover{ color:var(--gold); }
.post-meta{ font-family:'Jost'; font-size:12px; letter-spacing:0.1em; color:var(--brown); margin:8px 0 14px; }
.post-card .excerpt{ color:var(--ink-soft); }
.pagination{ display:flex; gap:14px; justify-content:center; margin-top:20px; font-family:'Jost'; font-size:13px; }
.pagination a, .pagination span{ padding:8px 16px; border:1px solid var(--gold-line); border-radius:999px; }
.single-article h1{ font-size:2.6rem; font-weight:600; margin-bottom:14px; }
.single-article .post-meta{ margin-bottom:30px; }
.single-article .entry-content{ color:var(--ink-soft); font-size:1.1rem; }
.single-article .entry-content p{ margin-bottom:1.2em; }
.single-article .entry-content img{ border-radius:14px; margin:20px 0; }
.comments-area{ margin-top:60px; padding-top:40px; border-top:1px solid var(--gold-line); }

/* ============ FOOTER ============ */
#colophon{ padding: 90px 20px 40px; text-align:center; border-top:1px solid var(--gold-line); }
#colophon h3{ font-family:'Jost'; letter-spacing:0.3em; font-size:1.6rem; }
#colophon h3 .accent{ color:var(--gold); }
#colophon .mission{ max-width:640px; margin:22px auto 0; font-style:italic; color:var(--ink-soft); font-size:1.15rem; }
.social-row{ display:flex; gap:16px; justify-content:center; margin-top:34px; }
.social-row a{ width:42px; height:42px; border:1px solid var(--gold-line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: all .3s ease; color:var(--ink-soft);}
.social-row a svg{ width:18px; height:18px; fill:currentColor; }
.social-row a:hover{ background:var(--gold); border-color:var(--gold); color:#211705; }
.footer-links{ margin-top:34px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); list-style:none; }
.footer-links a:hover{ color:var(--gold); }
.badge-row{ display:flex; gap:16px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.badge{ border:1px solid var(--gold-line); border-radius:10px; padding:9px 18px 9px 12px; font-size:12px; display:flex; align-items:center; gap:9px; color:var(--ink-soft); }
.badge .dot{ width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.badge .dot svg{ width:13px; height:13px; }
.badge.apple .dot{ background:linear-gradient(135deg,#b24bd6,#7c3fe0); }
.badge.soundcloud .dot{ background:#ff5500; }
.copyright-row{ margin-top:50px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'Jost'; font-size:12px; color:var(--brown); max-width:1180px; margin-left:auto; margin-right:auto; }

/* ============ WORDPRESS CORE HELPERS ============ */
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); word-wrap:normal !important; height:1px; width:1px; overflow:hidden; }
.alignleft{ float:left; margin-right:20px; } .alignright{ float:right; margin-left:20px; } .aligncenter{ display:block; margin:0 auto; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-thumb{ background:var(--gold-line); border-radius:10px; }