/*
Theme Name: Kürdan Project
Theme URI: https://kurdan-project.fr/
Author: A Petits Mots
Author URI: https://apetitsmots.fr/
Description: Thème élégant pour le Kürdan Project — musiques kurde, turque, persane et grecque d'Anatolie. Palette « joaillerie » tirée du trio : cèdre chaud, magenta, pourpre, sarcelle et vert tilleul, rythmes impairs. Conçu pour l'association A Petits Mots et son agenda [apm_dates].
Version: 1.0.0
Requires at least: 6.2
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kurdan-apm
Tags: music, dark, elegant, one-column, custom-menu, featured-images
*/

/* ============================================================
   KÜRDAN PROJECT · Design system
   Palette : cèdre chaud + tons joaillerie tirés de la photo du trio
             — magenta, pourpre électrique, sarcelle, vert tilleul,
               miel d'oud, crème de saz.
   Typo    : Fraunces (titres) · Jost (texte & data)
   Signature : la « cadence impaire » — battue 2·2·2·3 (9/8 aksak),
               diamants colorés (sarcelle · pourpre · magenta · tilleul)
   ============================================================ */

:root{
  --oud:        #20120C;   /* fond cèdre profond               */
  --oud-2:      #2C1A11;   /* panneau                          */
  --oud-3:      #3B2417;   /* carte / relief (planche chaude)  */
  --ivory:      #F2E7CF;   /* texte principal (crème de saz)   */
  --bronze:     #CBA877;   /* texte secondaire (bois miel)     */
  --bronze-dim: #9A8157;   /* légendes, data discrète          */
  --saffron:    #E0992F;   /* accent miel-ambre (oud)          */
  --saffron-lo: #B97C26;   /* ambre sourd                      */
  --terra:      #C25A35;   /* terre cuite                      */
  --ember:      #9E2D2A;   /* braise (ombre du cèdre)          */

  /* tons joaillerie — pris sur les étoffes & les boucles d'oreille */
  --magenta:    #C24E86;   /* robe / chemise — accent vif      */
  --magenta-lo: #9C3A6A;   /* magenta sourd                    */
  --purple:     #8A57B8;   /* pourpre électrique (chemise)     */
  --teal:       #2C8C84;   /* sarcelle pétrole (henley, corde) */
  --lime:       #C3D24A;   /* vert tilleul (boucles d'oreille) */

  --line:       rgba(224,153,47,.20);
  --line-soft:  rgba(242,231,207,.10);

  --shell: min(1180px, 92vw);
  --shell-narrow: min(760px, 92vw);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Jost", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--oud);
  color:var(--ivory);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Atmosphère : voile chaud très discret, fixe */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 82% -12%, rgba(224,153,47,.10), transparent 55%),
    radial-gradient(80% 70% at 88% 38%, rgba(138,87,184,.10), transparent 60%),
    radial-gradient(90% 70% at 6% 10%, rgba(44,140,132,.10), transparent 62%);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--magenta); color:var(--ivory); }

:focus-visible{
  outline:2px solid var(--saffron);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:380;
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0;
  font-optical-sizing:auto;
}
.eyebrow{
  font-family:var(--f-body);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--saffron);
}
.lede{
  font-family:var(--f-display);
  font-weight:330;
  font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1.42;
  color:var(--bronze);
  font-style:italic;
}

/* ---------- Coquille / sections ---------- */
.shell{ width:var(--shell); margin-inline:auto; position:relative; z-index:1; }
.shell--narrow{ width:var(--shell-narrow); }
.section{ padding-block:clamp(4.5rem,9vw,8rem); position:relative; z-index:1; }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }

.section-head{ max-width:46ch; margin-bottom:2.6rem; }
.section-head .eyebrow{ display:block; margin-bottom:1rem; }
.section-head h2{ font-size:clamp(2rem,4.6vw,3.4rem); }

/* ---------- Cadence impaire (signature) ----------
   Une battue 2·2·2·3 — losanges, accents plus larges sur le 1er temps */
.cadence{
  display:flex; align-items:center; justify-content:center;
  gap:0; height:42px; position:relative;
}
.cadence::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent);
}
.cadence .grp{ display:flex; align-items:center; gap:18px; padding-inline:26px; position:relative; z-index:1; }
.cadence .grp + .grp{ box-shadow:none; }
.cadence i{
  width:6px; height:6px; rotate:45deg;
  display:block; opacity:.85;
  --beat:var(--bronze-dim);
  background:var(--beat);
}
.cadence i.x1{
  width:11px; height:11px; opacity:1;
  background:var(--beat);
  box-shadow:0 0 16px color-mix(in srgb, var(--beat) 55%, transparent);
}
/* chaque temps de la battue prend un ton de la photo ;
   le groupe long (3) — l'appui aksak — s'allume en vert tilleul */
.cadence .grp--1 i{ --beat:var(--teal); }
.cadence .grp--2 i{ --beat:var(--purple); }
.cadence .grp--3 i{ --beat:var(--magenta); }
.cadence .grp--4 i{ --beat:var(--lime); }

/* pulsation discrète : les temps forts battent en cascade le long de la mesure */
@keyframes kbeat{ 0%,100%{ scale:1; } 50%{ scale:1.16; } }
.cadence i.x1{ animation:kbeat 2.6s var(--ease) infinite; }
.cadence .grp--1 i.x1{ animation-delay:0s; }
.cadence .grp--2 i.x1{ animation-delay:.16s; }
.cadence .grp--3 i.x1{ animation-delay:.32s; }
.cadence .grp--4 i.x1{ animation-delay:.48s; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-weight:500; font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.92em 1.7em; border-radius:0;
  border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.arr{ display:inline-block; vertical-align:-2px; margin-left:.15em; }
.ext{ display:inline-block; vertical-align:-1px; margin-left:.25em; opacity:.5; transition:opacity .3s var(--ease); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--solid{ background:var(--saffron); color:#1a0f08; }
.btn--solid:hover{ background:var(--magenta); color:var(--ivory); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--ivory); }
.btn--ghost:hover{ border-color:var(--magenta); color:var(--magenta); transform:translateY(-2px); }

/* ---------- En-tête ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem clamp(1.1rem,4vw,3rem);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* voile sombre discret derrière le menu quand l'en-tête est transparent
   (lisibilité sur l'image claire du hero) ; s'efface une fois fixé */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,10,6,.62) 0%, rgba(18,10,6,.22) 58%, transparent 100%);
  transition:opacity .4s var(--ease);
}
.site-header.is-stuck::before{ opacity:0; }
.site-header.is-stuck{
  background:rgba(32,18,12,.84);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line-soft);
  padding-block:.8rem;
}
.brand{ display:flex; align-items:baseline; gap:.7rem; font-family:var(--f-display); }
.brand b{ font-weight:420; font-size:1.18rem; letter-spacing:.01em; }
.brand b .u{ color:var(--magenta); }
.brand small{
  font-family:var(--f-body); font-weight:400; font-size:.62rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--bronze);
}
.nav{ display:flex; align-items:center; gap:1.9rem; }
.nav a{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory); font-weight:400; position:relative; padding:.3rem 0;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--saffron); transition:width .35s var(--ease);
}
.nav a:hover{ color:var(--ivory); }
.nav a:hover::after{ width:100%; }
.nav .btn{ padding:.6em 1.2em; }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:clamp(6rem,12vh,9rem) 0 clamp(3rem,7vh,5rem);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.02); }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(32,18,12,.62) 0%, rgba(32,18,12,.34) 32%, rgba(32,18,12,.86) 86%, var(--oud) 100%),
    linear-gradient(90deg, rgba(32,18,12,.7), transparent 60%);
}
.hero__inner{ position:relative; z-index:2; }
.hero .eyebrow{ display:block; margin-bottom:1.5rem; }
.hero h1{
  font-size:clamp(3.4rem,12vw,9rem);
  font-weight:340; letter-spacing:-.02em; line-height:.92;
}
.hero h1 .u{ color:var(--magenta); font-style:italic; font-weight:300; }
.hero .lede{ margin-top:1.4rem; max-width:30ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero__scroll{
  position:absolute; right:clamp(1.1rem,4vw,3rem); bottom:2.4rem; z-index:2;
  writing-mode:vertical-rl; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--bronze-dim); display:flex; align-items:center; gap:1rem;
}
.hero__scroll::after{ content:""; width:1px; height:54px; background:linear-gradient(var(--saffron),transparent); }

/* ---------- Intro / récit ---------- */
.story{ position:relative; }
.story__banner{ position:relative; margin:0 0 clamp(2rem,5vw,3.5rem); }
.story__banner img{
  width:100%; height:auto; display:block; filter:saturate(.9);
}
.story__banner figcaption{
  margin-top:.85rem; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--saffron);
}
.story__copy .first{
  font-family:var(--f-display); font-size:clamp(1.2rem,2.2vw,1.55rem);
  color:var(--ivory); font-style:italic; max-width:60ch; margin:0 0 1.8rem;
}
.story__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.2rem); }
.story__cols p{ margin:0; color:var(--bronze); }
.story__cols p strong{ color:var(--ivory); font-weight:400; }

/* ---------- Formation (trio) ---------- */
.lineup{ background:var(--oud-2); border-block:1px solid var(--line-soft); }
.lineup__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:3rem; }
.player{ padding:2.4rem clamp(1rem,2.4vw,2.2rem); position:relative; transition:transform .4s var(--ease), background .4s var(--ease); }
.player:hover{ transform:translateY(-4px); background:rgba(242,231,207,.02); }
.player + .player{ border-left:1px solid var(--line-soft); }
.player .no{
  font-family:var(--f-display); font-size:.9rem; color:var(--saffron); font-style:italic;
}
.player--1 .no{ color:var(--magenta); }
.player--2 .no{ color:var(--teal); }
.player--3 .no{ color:var(--purple); }
.player h3{ font-size:1.7rem; margin:.7rem 0 1rem; }
.player .role{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-dim);
  display:flex; flex-wrap:wrap; gap:.4rem .9rem;
}
.player .role span{ position:relative; }
.player .role span + span::before{
  content:""; position:absolute; left:-.55rem; top:50%; width:3px; height:3px;
  background:var(--terra); rotate:45deg; transform:translateY(-50%);
}

/* ---------- Galerie ---------- */
.gallery__grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:200px; gap:14px; margin-top:2.4rem;
}
.gallery__grid figure{ margin:0; overflow:hidden; border-radius:0; position:relative; }
.gallery__grid img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s var(--ease); filter:saturate(.85); }
.gallery__grid figure:hover img{ transform:scale(1.05); filter:saturate(1); }
.gallery__grid .g1{ grid-column:span 4; grid-row:span 2; }
.gallery__grid .g2{ grid-column:span 2; grid-row:span 1; }
.gallery__grid .g3{ grid-column:span 2; grid-row:span 1; }

/* ---------- Vidéo ---------- */
.videos__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,290px),1fr));
  gap:clamp(1rem,2.2vw,1.7rem); margin-top:2.6rem;
}
.video{ margin:0; transition:transform .4s var(--ease); }
.video:hover{ transform:translateY(-5px); }
.video__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line-soft); background:var(--oud-2);
}
.video__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .4s var(--ease);
}
.video:hover .video__frame::after{ box-shadow:inset 0 0 0 1px var(--magenta); }
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.video figcaption{
  margin-top:.75rem; font-family:var(--f-display); font-style:italic;
  color:var(--bronze); font-size:1rem;
}

/* ---------- Agenda (le thème stylise le conteneur ; le shortcode apporte le détail) ---------- */
.agenda{ position:relative; }
.agenda__head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:2.4rem; }
.agenda__head h2{ font-size:clamp(2rem,4.6vw,3.4rem); }

/* ---------- Pied de page ---------- */
.site-footer{ background:var(--oud-2); border-top:1px solid var(--line); padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; position:relative; z-index:1; }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; }
.foot__brand b{ font-family:var(--f-display); font-size:1.5rem; font-weight:420; }
.foot__brand b .u{ color:var(--saffron); }
.foot__brand p{ color:var(--bronze); max-width:34ch; margin:1rem 0 1.3rem; font-size:.95rem; }
.foot__brand a.mail{ color:var(--saffron); border-bottom:1px solid var(--line); }
.foot__brand p a.apm{ color:var(--magenta); border-bottom:1px solid var(--line); transition:opacity .3s var(--ease); }
.foot__brand p a.apm:hover{ opacity:.75; }
.foot col-title, .foot__col h4{
  font-family:var(--f-body); font-weight:500; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--bronze-dim); margin-bottom:1.1rem;
}
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot__col a{ color:var(--bronze); font-size:.92rem; transition:color .3s var(--ease); }
.foot__col a:hover{ color:var(--saffron); }
.foot__col a .ext{ opacity:.45; }
.foot__col a:hover .ext{ opacity:.9; }
.foot__bottom{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; justify-content:space-between;
  font-size:.78rem; color:var(--bronze-dim); letter-spacing:.04em;
}
.foot__bottom a{ color:var(--bronze); }
.foot__bottom a:hover{ color:var(--saffron); }
.foot__bottom .host b{ color:var(--bronze); font-weight:500; }

/* ---------- Page intérieure / Mentions légales ---------- */
.page-hero{ padding:clamp(8rem,16vh,11rem) 0 clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line-soft); }
.page-hero .eyebrow{ display:block; margin-bottom:1.1rem; }
.page-hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); }
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.5rem,3vw,2rem); margin:2.6rem 0 1rem; color:var(--ivory); }
.prose h2 .num{ color:var(--saffron); font-style:italic; font-size:.8em; margin-right:.5rem; }
.prose p{ color:var(--bronze); margin:0 0 1.1rem; }
.prose p strong{ color:var(--ivory); font-weight:400; }
.prose a{ color:var(--saffron); border-bottom:1px solid var(--line); }
.prose ul{ color:var(--bronze); padding-left:1.1rem; }
.prose li{ margin-bottom:.5rem; }

/* ---------- Apparitions au défilement ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .story__cols{ grid-template-columns:1fr; gap:0; }
  .story__cols p{ margin:0 0 1.3rem; }
}
@media (max-width:900px){
  .lineup__grid{ grid-template-columns:1fr; }
  .player + .player{ border-left:none; border-top:1px solid var(--line-soft); }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .gallery__grid .g1{ grid-column:span 2; }
  .gallery__grid .g2,.gallery__grid .g3{ grid-column:span 1; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    background:var(--oud-2); padding:2rem 2.2rem; transform:translateX(100%);
    transition:transform .5s var(--ease); border-left:1px solid var(--line); }
  .nav.open{ transform:none; }
  .nav a{ font-size:1rem; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; z-index:60;
    background:none; border:0; cursor:pointer; padding:6px; }
  .nav-toggle span{ width:26px; height:2px; background:var(--ivory); transition:.4s var(--ease); }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .foot__top{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; }
}