/* ==========================================================================
   Festival du Conte Africain — « Sous l'Arbre à Palabre » — feuille de style
   Direction : éditorial chaleureux panafricain, oralité & veillées
   (fond sombre + terracotta, accents vert & ocre, motifs discrets).
   Polices auto-hébergées (Cormorant Garamond + Outfit) — aucune requête externe.
   ========================================================================== */

/* ----- Polices auto-hébergées ----- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2018-201F,U+2022,U+2039-203A,U+20AC; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/cormorant-garamond-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url('../fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/outfit-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/outfit-500-latin.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/outfit-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/outfit-700-latin.woff2') format('woff2'); }

/* ----- Variables ----- */
:root {
  /* Fonds sombres */
  --black:#1a1a1a; --black-2:#161616; --black-3:#211a15; --black-card:#221b16;
  /* Accent principal : terracotta ; + vert & ocre panafricains */
  --gold:#C4704B; --gold-soft:#e0a184; --gold-deep:#9d5335;
  --green:#1f7a3d; --green-soft:#3a9d5a; --ocre:#c99a3f;
  --cream:#f4ede2; --cream-2:#efe4d3;
  --ink:#f2ebe0; --ink-dim:#d0c4b6; --muted:#a7998a;
  --line:rgba(196,112,75,.30); --line-soft:rgba(244,237,226,.10);
  --radius:4px; --maxw:1220px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ----- Base ----- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--black);
  line-height:1.68; font-size:17px; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:600; line-height:1.08; margin:0 0 .4em; }
h1 { font-size:clamp(2.7rem,7.5vw,5.4rem); letter-spacing:.5px; }
h2 { font-size:clamp(2rem,4.4vw,3.3rem); letter-spacing:.3px; }
h3 { font-size:clamp(1.4rem,2.4vw,1.9rem); }
p { margin:0 0 1.1em; }
strong { color:var(--cream); font-weight:600; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 26px; }
.container--narrow { max-width:820px; }

.eyebrow { font-family:var(--sans); text-transform:uppercase; letter-spacing:.34em;
  font-size:.72rem; font-weight:600; color:var(--gold); margin:0 0 1.1rem;
  display:inline-flex; align-items:center; gap:.7em; }
.eyebrow::before { content:""; width:34px; height:1px; background:var(--gold); opacity:.7; }
.eyebrow.center { justify-content:center; }
.lead { font-size:1.24rem; color:var(--ink-dim); max-width:62ch; line-height:1.6; }
.serif-accent { font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold-soft); }

/* Skip link (a11y) */
.skip-link { position:absolute; left:-999px; top:0; background:var(--gold); color:var(--black);
  padding:10px 16px; z-index:999; border-radius:0 0 6px 0; font-weight:600; }
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ----- Boutons ----- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:var(--sans);
  font-weight:600; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 34px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:.22s ease; text-align:center; }
.btn--gold { background:var(--gold); color:#fff; }
.btn--gold:hover { background:var(--gold-soft); transform:translateY(-2px); }
.btn--ghost { border-color:rgba(244,239,230,.4); color:var(--cream); }
.btn--ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn--outline-gold { border-color:var(--gold); color:var(--gold); }
.btn--outline-gold:hover { background:var(--gold); color:#fff; transform:translateY(-2px); }
.btn--dark { background:var(--cream); color:var(--black); }
.btn--dark:hover { background:#fff; transform:translateY(-2px); }
.btn--sm { padding:11px 22px; font-size:.74rem; }

/* ----- Navbar ----- */
.nav { position:sticky; top:0; z-index:100; background:rgba(10,10,10,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav__inner { display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:15px 26px; }
.nav__logo { display:flex; flex-direction:column; line-height:1; color:var(--cream); }
.nav__wordmark { font-family:var(--serif); font-weight:700; font-size:1.4rem; letter-spacing:1px;
  text-transform:uppercase; }
.nav__wordmark span { color:var(--gold); }
.nav__sub { font-family:var(--sans); font-size:.58rem; text-transform:uppercase;
  letter-spacing:.34em; color:var(--muted); margin-top:5px; }
.nav__links { display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav__links a { color:var(--ink-dim); font-size:.82rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; transition:color .2s; }
.nav__links a:hover { color:var(--gold); }
.nav__cta { letter-spacing:.14em; }
.nav__toggle { display:none; background:none; border:0; color:var(--cream); cursor:pointer; padding:6px; }
.nav__toggle svg { width:28px; height:28px; }

@media (max-width:960px) {
  .nav__toggle { display:block; }
  .nav__links { position:fixed; inset:66px 0 auto 0; flex-direction:column; gap:0;
    background:var(--black-2); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .nav__links.open { max-height:520px; }
  .nav__links li { width:100%; text-align:center; }
  .nav__links li a { display:block; padding:16px; border-top:1px solid var(--line-soft); }
  .nav__cta { margin:14px auto; }
}

/* ----- Hero ----- */
.hero { position:relative; color:var(--cream); background:var(--black); overflow:hidden;
  min-height:88vh; display:flex; align-items:flex-end; }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; object-position:center 22%; opacity:.72; }
.hero::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.30) 0%, rgba(10,10,10,.45) 45%, rgba(10,10,10,.92) 100%); }
.hero__inner { position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto;
  padding:0 26px clamp(48px,7vw,88px); }
.hero .eyebrow { color:var(--gold-soft); }
.hero h1 { max-width:15ch; text-transform:uppercase; margin-bottom:.3em; }
.hero h1 em { font-style:italic; text-transform:none; color:var(--gold-soft); font-weight:500; }
.hero__inner .lead { color:#e9e1d3; max-width:52ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__meta { margin-top:38px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:38px; }
.hero__meta div { font-size:.82rem; color:var(--ink-dim); letter-spacing:.04em; }
.hero__meta b { display:block; color:var(--gold); font-family:var(--serif); font-size:1.7rem;
  font-weight:700; letter-spacing:.5px; margin-bottom:2px; }

/* ----- Page hero (pages internes) ----- */
.pagehero { position:relative; background:var(--black-2); color:var(--cream);
  border-bottom:1px solid var(--line); overflow:hidden; }
.pagehero--img::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.9)); z-index:1; }
.pagehero__bg { position:absolute; inset:0; z-index:0; }
.pagehero__bg img { width:100%; height:100%; object-fit:cover; object-position:center 25%; opacity:.5; }
.pagehero__inner { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:clamp(60px,9vw,120px) 26px clamp(40px,6vw,70px); }
.pagehero h1 { font-size:clamp(2.3rem,5.5vw,4rem); text-transform:uppercase; letter-spacing:.5px; max-width:20ch; }
.pagehero .lead { max-width:60ch; }

/* ----- Sections ----- */
section { padding:clamp(64px,9vw,120px) 0; }
.section--soft { background:var(--black-2); }
.section--cream { background:var(--cream); color:var(--black); }
.section--cream h2, .section--cream h3 { color:var(--black); }
.section--cream .lead { color:#4a4438; }
.section--cream .eyebrow { color:var(--gold-deep); }
.section--cream .serif-accent { color:var(--gold-deep); }
.section__head { max-width:64ch; margin-bottom:52px; }
.section__head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section__head.center .eyebrow { justify-content:center; }

/* ----- Grille de cartes ----- */
.grid { display:grid; gap:28px; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid--3,.grid--4 { grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .grid--3,.grid--2,.grid--4 { grid-template-columns:1fr; } }

.card { background:var(--black-card); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.25s ease; }
.card:hover { transform:translateY(-4px); border-color:var(--line); }
.card__img { aspect-ratio:4/5; overflow:hidden; position:relative; }
.card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__img img { transform:scale(1.05); }
.card__body { padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.card__num { font-family:var(--serif); font-size:1rem; color:var(--gold); letter-spacing:.2em; margin-bottom:10px; }
.card__body h3 { color:var(--cream); }
.card__body p { color:var(--muted); font-size:.97rem; }
.card__link { margin-top:auto; padding-top:14px; color:var(--gold); font-weight:600;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; }
.card__link::after { content:"→"; transition:transform .2s; }
.card:hover .card__link::after { transform:translateX(5px); }
.section--cream .card { background:#fff; border-color:#e6ddcb; box-shadow:0 14px 40px rgba(0,0,0,.06); }
.section--cream .card__body h3 { color:var(--black); }
.section--cream .card__body p { color:#5b5445; }
.section--cream .card__link { color:var(--gold-deep); }

/* ----- Liste de features ----- */
.features { list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.features li { display:flex; gap:16px; align-items:flex-start; }
.features .tick { flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:rgba(196,112,75,.16); color:var(--gold-soft); display:grid; place-items:center;
  font-weight:700; font-size:.85rem; margin-top:3px; }
.features li span:last-child { color:var(--ink-dim); }
.section--cream .features li span:last-child { color:#4a4438; }

/* ----- Split (texte + image) ----- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,5vw,70px); align-items:center; }
.split--rev .split__media { order:2; }
.split__media { position:relative; }
.split__media img { border-radius:var(--radius); box-shadow:var(--shadow); }
.split__media--frame::after { content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid var(--gold); border-radius:var(--radius); z-index:-1; }
@media (max-width:860px){ .split { grid-template-columns:1fr; gap:34px; }
  .split--rev .split__media { order:0; } .split__media--frame::after { inset:10px -10px -10px 10px; } }

/* ----- Steps ----- */
.steps { display:grid; gap:0; grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .steps { grid-template-columns:1fr; } }
.step { padding:34px 28px; border-left:1px solid var(--line); }
.step:first-child { border-left:0; }
@media (max-width:860px){ .step { border-left:0; border-top:1px solid var(--line); } .step:first-child{border-top:0;} }
.step__n { font-family:var(--serif); font-size:2.6rem; color:var(--gold); font-weight:700;
  display:block; margin-bottom:12px; line-height:1; }
.step h3 { font-size:1.3rem; color:var(--cream); }
.step p { font-size:.95rem; color:var(--muted); margin:0; }

/* ----- Bandeau CTA ----- */
.cta-band { position:relative; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(135deg,var(--black-3) 0%,#241f16 100%);
  color:var(--cream); border-radius:var(--radius); padding:clamp(46px,7vw,80px); text-align:center; }
.cta-band h2 { color:var(--cream); }
.cta-band .lead { color:var(--ink-dim); margin:0 auto 30px; }
.cta-band .eyebrow { color:var(--gold-soft); justify-content:center; }

/* ----- Galerie ----- */
.gallery { columns:3 260px; column-gap:14px; }
.gallery figure { margin:0 0 14px; break-inside:avoid; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-soft); }
.gallery img { width:100%; transition:transform .5s ease, opacity .3s; }
.gallery figure:hover img { transform:scale(1.04); }

/* ----- Bandeau logos / partenaires ----- */
.marquee { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 44px;
  color:var(--muted); font-family:var(--serif); font-size:1.35rem; letter-spacing:.06em; }
.marquee span { opacity:.75; }

/* ----- Formulaire ----- */
.form { background:var(--black-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,4vw,46px); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form__row { grid-template-columns:1fr; } }
.field { margin-bottom:18px; }
.field label { display:block; font-weight:600; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:8px; color:var(--gold-soft); }
.field input, .field select, .field textarea { width:100%; padding:14px 15px;
  border:1px solid rgba(244,239,230,.18); border-radius:var(--radius); font-family:var(--sans);
  font-size:1rem; background:rgba(0,0,0,.35); color:var(--cream); transition:border-color .2s; }
.field input::placeholder, .field textarea::placeholder { color:#7d7566; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--gold); outline:none; }
.field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C4704B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.field textarea { min-height:140px; resize:vertical; }
.form__hp { position:absolute; left:-9999px; opacity:0; }
.form__note { font-size:.82rem; color:var(--muted); margin-top:14px; }
.form__note a { color:var(--gold-soft); text-decoration:underline; }
.form__status { margin-top:16px; font-weight:600; }
.form__status.ok { color:#7bd88f; }
.form__status.err { color:#ff8b8b; }

/* ----- FAQ ----- */
.faq { display:grid; gap:14px; max-width:840px; margin:0 auto; }
.faq details { background:var(--black-card); border-radius:var(--radius); padding:4px 24px;
  border:1px solid var(--line-soft); }
.faq details[open] { border-color:var(--line); }
.faq summary { cursor:pointer; font-weight:600; padding:20px 0; list-style:none; color:var(--cream);
  font-size:1.05rem; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold); font-size:1.6rem; line-height:1; font-weight:300; }
.faq details[open] summary::after { content:"–"; }
.faq details p { color:var(--muted); padding-bottom:20px; margin:0; }

/* ----- Fil d'Ariane ----- */
.breadcrumb { font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  padding:20px 0 0; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--gold); }

/* ----- Bandeau date / infos clés ----- */
.factbar { background:var(--gold); color:#fff; }
.factbar .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 30px; padding-top:16px; padding-bottom:16px; text-align:center; }
.factbar b { font-family:var(--serif); font-size:1.15rem; font-weight:700; letter-spacing:.03em; }
.factbar span { font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; }

/* ----- Prose ----- */
.prose { max-width:760px; }
.prose p { margin-bottom:1.2em; color:var(--ink-dim); }
.prose h2 { margin-top:1.7em; color:var(--cream); }
.prose h3 { margin-top:1.4em; color:var(--cream); }
.prose ul { padding-left:1.2em; margin-bottom:1.2em; color:var(--ink-dim); }
.prose li { margin-bottom:.5em; }
.prose a { color:var(--gold-soft); text-decoration:underline; }
.section--cream .prose p, .section--cream .prose ul { color:#4a4438; }
.section--cream .prose h2, .section--cream .prose h3 { color:var(--black); }

/* ----- Utilitaires ----- */
.text-center { text-align:center; }
.mt-0 { margin-top:0 !important; }
.tag { display:inline-block; border:1px solid var(--line); color:var(--gold-soft);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600;
  padding:6px 14px; border-radius:999px; margin:0 6px 8px 0; }
.sitemap-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.sitemap-list a { color:var(--ink-dim); border-bottom:1px solid var(--line-soft); padding-bottom:12px; display:block; }
.sitemap-list a:hover { color:var(--gold); }

/* ----- Footer ----- */
.footer { background:#060606; color:var(--muted); padding:72px 0 34px; border-top:1px solid var(--line); }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px){ .footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid { grid-template-columns:1fr; } }
.footer__brand .nav__wordmark { color:var(--cream); font-size:1.6rem; }
.footer__brand p { max-width:36ch; margin-top:16px; font-size:.94rem; }
.footer h4 { font-family:var(--sans); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--gold); margin-bottom:18px; }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li { margin-bottom:11px; font-size:.94rem; }
.footer a:hover { color:var(--gold); }
.footer__social { display:flex; gap:14px; margin-top:20px; }
.footer__social a { width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-dim); }
.footer__social a:hover { border-color:var(--gold); color:var(--gold); background:rgba(196,112,75,.12); }
.footer__social svg { width:18px; height:18px; fill:currentColor; }
.footer__bottom { border-top:1px solid var(--line-soft); margin-top:48px; padding-top:26px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.8rem; }
.footer__bottom a:hover { color:var(--gold); }

/* ----- Accents panafricains (Festival du Conte Africain) ----- */
/* Fine bande wax terracotta / ocre / vert en haut de page (sous la nav) */
.waxbar { height:5px; background:linear-gradient(90deg,
  var(--gold) 0 33%, var(--ocre) 33% 66%, var(--green) 66% 100%); }
.pill-green { display:inline-block; background:rgba(31,122,61,.16); color:var(--green-soft);
  border:1px solid rgba(31,122,61,.34); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; font-weight:600; padding:6px 14px; border-radius:999px; }
/* Numéros de pôle en pastille */
.pole-num { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:rgba(196,112,75,.14); color:var(--gold-soft); font-family:var(--serif);
  font-weight:700; font-size:1.25rem; margin-bottom:14px; border:1px solid var(--line); }
.card--pole .card__body { padding-top:28px; }
/* Liste d'infos pratiques */
.infolist { list-style:none; padding:0; margin:0; display:grid; gap:18px; }
.infolist li { display:flex; gap:16px; align-items:flex-start; padding-bottom:18px;
  border-bottom:1px solid var(--line-soft); }
.infolist b { display:block; color:var(--gold-soft); font-family:var(--sans); font-weight:600;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.infolist span:last-child { color:var(--ink-dim); }

/* ----- Maillage cluster Saison Culturelle Africaine ----- */
.footer__cluster { border-top:1px solid var(--line-soft); margin-top:40px; padding-top:26px; }
.footer__cluster h4 { font-family:var(--sans); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--gold); margin-bottom:16px; }
.footer__cluster-links { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer__cluster-links li { margin:0; font-size:.9rem; }
.footer__cluster-links a:hover { color:var(--gold); }