/*
Theme Name: Icario
Theme URI: https://icario.example
Author: Icario
Author URI: https://icario.example
Description: Thème sur mesure pour Icario, théâtre équestre. Design sombre, cinématographique et premium.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: icario
*/

:root{
  --noir:#08090A;
  --noir-bleu:#111419;
  --blanc:#F1EEE8;
  --bronze:#B9825B;
  --violet:#302044;
  --rouge:#641E22;
  --serif:'Cormorant Garamond', serif;
  --sans:'Work Sans', sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.05;}

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
  background:linear-gradient(to bottom, rgba(8,9,10,0.75), transparent);
  transition:background .4s ease, padding .4s ease, backdrop-filter .4s ease;
}
header.nav.scrolled{
  background:rgba(8,9,10,0.92);
  backdrop-filter:blur(10px);
  padding:12px 40px;
  border-bottom:1px solid rgba(185,130,91,0.15);
}
.logo-wrap{display:flex; align-items:center; gap:12px;}
.logo-wrap img{height:52px; width:52px; border-radius:50%; object-fit:cover;}
.logo-text{font-family:var(--serif); font-size:1.3rem; letter-spacing:0.08em;}
.logo-text span{color:var(--bronze);}
nav.links{display:flex; gap:34px; font-size:0.86rem; letter-spacing:0.04em;}
nav.links a{position:relative; padding-bottom:4px; opacity:.88; transition:opacity .25s;}
nav.links a:hover{opacity:1;}
nav.links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--bronze);
  transition:width .3s ease;
}
nav.links a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:22px;}
.socials{display:flex; gap:14px; font-size:0.8rem; opacity:.75;}
.btn-cta{
  border:1px solid var(--bronze); color:var(--bronze);
  padding:10px 20px; font-size:0.78rem; letter-spacing:0.06em;
  transition:background .3s, color .3s; white-space:nowrap;
}
.btn-cta:hover{background:var(--bronze); color:var(--noir);}
.menu-toggle{display:none; font-size:1.6rem; background:none; border:none; color:var(--blanc); cursor:pointer;}

/* ---------- HERO ---------- */
.hero{
  height:100vh; min-height:640px; position:relative; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,9,10,0.92) 0%, rgba(8,9,10,0.35) 55%, rgba(48,32,68,0.35) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(100,30,34,0.35), transparent 60%);
}
.hero-content{position:relative; padding:0 40px 100px; width:100%;}
.hero-content .eyebrow{font-size:0.95rem; letter-spacing:0.18em; color:var(--bronze); margin-bottom:18px; font-family:var(--serif); font-style:italic;}
.hero-content h1{font-size:clamp(3.2rem, 9vw, 7rem); letter-spacing:0.02em;}
.hero-content p.tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2vw,1.5rem);
  color:var(--blanc); opacity:.85; max-width:520px; margin-top:22px;
}
.hero-buttons{display:flex; gap:20px; margin-top:44px; flex-wrap:wrap;}
.btn-primary{
  background:var(--bronze); color:var(--noir); padding:16px 30px; font-size:0.85rem;
  letter-spacing:0.05em; transition:transform .3s, background .3s; display:inline-block;
}
.btn-primary:hover{background:#c99872; transform:translateY(-2px);}
.btn-secondary{
  border:1px solid rgba(241,238,232,0.4); padding:16px 30px; font-size:0.85rem; letter-spacing:0.05em;
  transition:border-color .3s, background .3s; display:inline-block;
}
.btn-secondary:hover{border-color:var(--bronze); background:rgba(185,130,91,0.08);}
.scroll-indicator{
  position:absolute; bottom:32px; left:40px; font-size:0.72rem; letter-spacing:0.12em;
  color:rgba(241,238,232,0.5); display:flex; align-items:center; gap:10px;
}
.scroll-line{width:1px; height:34px; background:linear-gradient(to bottom, var(--bronze), transparent); animation:scrollMove 2.2s infinite;}
@keyframes scrollMove{0%{opacity:0;} 40%{opacity:1;} 100%{opacity:0;}}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

section{padding:130px 0;}

/* ---------- UNIVERS ---------- */
.univers{background:var(--noir-bleu);}
.univers-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.univers-text h2{font-size:clamp(2.2rem,4vw,3.1rem); margin-bottom:26px;}
.univers-text p{max-width:480px; opacity:.85; margin-bottom:30px; font-size:1.02rem;}
.link-underline{color:var(--bronze); font-size:0.85rem; letter-spacing:0.05em; border-bottom:1px solid var(--bronze); padding-bottom:4px;}
.img-block{
  position:relative; border-radius:2px; overflow:hidden; background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
}
.univers-image{aspect-ratio:4/5;}
.img-block .caption{padding:26px; font-size:0.72rem; letter-spacing:0.05em; color:rgba(241,238,232,0.55); font-style:italic; font-family:var(--serif); background:linear-gradient(to top, rgba(8,9,10,0.75), transparent); width:100%;}
.four-words{display:flex; flex-direction:column; gap:0; margin-top:36px;}
.four-words span{
  font-family:var(--serif); font-size:1.5rem; padding:14px 0; border-bottom:1px solid rgba(185,130,91,0.18);
  color:var(--bronze); font-style:italic;
}
.four-words span:first-child{padding-top:0;}

/* ---------- SPECTACLES ---------- */
.spectacles{background:var(--noir);}
.section-head{text-align:left; margin-bottom:64px; max-width:640px;}
.section-head h2{font-size:clamp(2.2rem,4vw,3.1rem); margin-bottom:16px;}
.section-head p{opacity:.7; font-family:var(--serif); font-style:italic; font-size:1.1rem;}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.card{
  background:var(--noir-bleu); border:1px solid rgba(185,130,91,0.12);
  display:flex; flex-direction:column; transition:border-color .3s, transform .3s;
}
.card:hover{border-color:rgba(185,130,91,0.4); transform:translateY(-4px);}
.card-image{aspect-ratio:4/3; background-size:cover; background-position:center; display:flex; align-items:flex-end;}
.card-image .caption{padding:14px 18px; font-size:0.68rem; color:rgba(241,238,232,0.6); font-style:italic; font-family:var(--serif); background:linear-gradient(to top, rgba(8,9,10,0.75), transparent); width:100%;}
.card-body{padding:28px 26px 32px;}
.card-body h3{font-size:1.6rem; margin-bottom:12px;}
.card-body p{font-size:0.92rem; opacity:.75; margin-bottom:20px;}
.card-link{font-size:0.78rem; letter-spacing:0.05em; color:var(--bronze); border-bottom:1px solid transparent; transition:border-color .25s;}
.card:hover .card-link{border-color:var(--bronze);}
.note-example{font-size:0.72rem; opacity:.4; margin-top:40px; font-style:italic;}

/* ---------- CHEVAL ---------- */
.cheval{
  position:relative; padding:0; min-height:80vh; display:flex; align-items:center;
  background:linear-gradient(120deg, rgba(48,32,68,0.55), rgba(8,9,10,0.9)), linear-gradient(200deg,#14161c,#08090A 60%);
}
.cheval .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center; padding-top:110px; padding-bottom:110px;}
.cheval h2{font-size:clamp(2.2rem,4vw,3rem); margin-bottom:24px;}
.cheval p{max-width:480px; opacity:.85; margin-bottom:30px;}
.cheval-image{aspect-ratio:1/1;}

/* ---------- GALERIE ---------- */
.galerie{background:var(--noir-bleu);}
.gal-grid{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:220px; gap:14px;}
.gal-item{background-size:cover; background-position:center; display:flex; align-items:flex-end; overflow:hidden;}
.gal-item .caption{padding:14px 16px; font-size:0.66rem; color:rgba(241,238,232,0.65); font-style:italic; font-family:var(--serif); background:linear-gradient(to top, rgba(8,9,10,0.8), transparent); width:100%;}
.gal-item.tall{grid-row:span 2;}

/* ---------- TEMOIGNAGES ---------- */
.temoignages{background:var(--noir); text-align:center;}
.temoignages .section-head{margin:0 auto 60px; text-align:center;}
.temoin{max-width:680px; margin:0 auto; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem); opacity:.9;}
.temoin cite{display:block; margin-top:22px; font-family:var(--sans); font-style:normal; font-size:0.8rem; letter-spacing:0.05em; opacity:.55;}
.temoignage-flag{font-size:0.7rem; opacity:.35; margin-top:40px; letter-spacing:0.04em;}

/* ---------- CTA PROGRAMMER ---------- */
.cta-programmer{
  background:linear-gradient(120deg, var(--rouge), var(--violet) 70%);
  text-align:center; padding:150px 40px;
}
.cta-programmer h2{font-size:clamp(2.4rem,5vw,3.6rem); margin-bottom:22px;}
.cta-programmer p{max-width:520px; margin:0 auto 40px; opacity:.85;}
.cta-programmer .btn-primary{background:var(--blanc);}
.cta-programmer .btn-primary:hover{background:var(--bronze); color:var(--noir);}

/* ---------- FOOTER ---------- */
footer.site-footer{background:var(--noir); border-top:1px solid rgba(185,130,91,0.15); padding:70px 0 40px;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:50px;}
.footer-brand .logo-wrap{margin-bottom:10px;}
.footer-brand .sig{font-size:0.8rem; letter-spacing:0.1em; opacity:.6;}
.footer-nav{display:flex; gap:40px; flex-wrap:wrap;}
.footer-col h4{font-size:0.78rem; letter-spacing:0.08em; color:var(--bronze); margin-bottom:14px; font-family:var(--sans); font-weight:500;}
.footer-col a{display:block; font-size:0.86rem; opacity:.75; margin-bottom:10px;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:30px; border-top:1px solid rgba(241,238,232,0.08); font-size:0.75rem; opacity:.5;}
.footer-quote{font-family:var(--serif); font-style:italic; opacity:.7;}

@media (max-width:900px){
  .univers-grid, .cheval .wrap, .card-grid{grid-template-columns:1fr;}
  .card-grid{gap:22px;}
  nav.links, .socials{display:none;}
  .menu-toggle{display:block;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .gal-item.tall{grid-row:span 1;}
  section{padding:90px 0;}
  .wrap{padding:0 22px;}
  header.nav{padding:16px 22px;}
}

/* ---------- Fiche spectacle : vidéo, infos pratiques, notices admin ---------- */
.univers div[style*="padding-bottom:56.25%"] iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.card-body strong{font-weight:500; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;}
.logo-wrap{cursor:pointer;}
