/*
Theme Name: Blues Is Roots — Gestion éditable v5
Theme URI: https://bluesisroots.fr
Author: Blues is Roots
Description: Thème sur mesure pour la conférence-concert interactive "Blues is Roots" (Grégory Desgranges, Hugo Berrouet, Charlie Dales — Krakatoa / Association Transrock).
Version: 1.4.0
Requires at least: 6.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: blues-is-roots-editable
*/

/* ---------------------------------------------------------
   TOKENS — tirés du dossier de présentation (tintype photos,
   règles filaires dorées, fond bleu nuit / kaki / crème)
--------------------------------------------------------- */
:root{
  --ink:        #0d0734; /* bleu nuit — fond principal des sections sombres */
  --ink-soft:   #241a4d; /* variante pour cartes sur fond ink */
  --kaki:       #7c7350; /* kaki/olive — fond des sections "récit" */
  --kaki-soft:  #948a63;
  --gold:       #cdb867; /* doré — accent, titres, filets */
  --gold-dim:   #9c8e5e;
  --cream:      #f6f1e6; /* fond clair type papier */
  --cream-2:    #fffaf5;
  --line:       rgba(205,184,103,.35);

  /* Identité typographique retenue : Road Rage pour les titres,
     Rubik Dirt pour le logo/header. Les deux sont disponibles via Google Fonts
     sous licence SIL Open Font License. */
  --font-display: 'Road Rage', cursive;
  --font-logo: 'Rubik Dirt', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

@font-face{
  font-family:'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}


*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
.container{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }

h1,h2,h3,.brush{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.05;
  letter-spacing:.015em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.6rem,7vw,5rem); }
h2{ font-size:clamp(1.9rem,4.4vw,3rem); }
h3{ font-size:clamp(1.3rem,2.6vw,1.8rem); }
p{ margin:0 0 1.1em; max-width:68ch; }
.eyebrow{
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--gold-dim);
}

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:var(--ink);
  padding:.6em 1em; z-index:1000;
}
.skip-link:focus{ left:1em; top:1em; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ---------------------------------------------------------
   HEADER / NAV
--------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(13,7,52,.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.9rem;
}
.site-logo{ display:flex; align-items:center; gap:.6rem; margin-right:clamp(2rem,4vw,4.5rem); flex:0 0 auto; }
.site-logo img{ height:28px; width:auto; }
.site-logo-img{ height:26px; width:auto; display:block; }
.site-logo-text{
  font-family:var(--font-logo); color:var(--gold); font-size:clamp(1.35rem,2.4vw,2rem); letter-spacing:.035em; line-height:1; text-transform:uppercase;
  white-space:nowrap;
}
.primary-nav{ flex:0 1 auto; }
.primary-nav ul{
  list-style:none; display:flex; gap:1.25rem; margin:0; padding:0;
  font-size:.82rem; letter-spacing:.01em;
}
.primary-nav a{
  text-decoration:none; color:var(--cream-2); opacity:.8; position:relative; padding-block:.3rem;
}
.primary-nav a:hover, .primary-nav a.is-active{ opacity:1; color:var(--gold); }
.primary-nav a.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold);
}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); color:var(--cream-2);
  padding:.5em .7em; font-family:var(--font-mono); cursor:pointer;
}
@media (max-width:860px){
  .site-logo{ margin-right:0; }
  .site-logo-text{ font-size:1.2rem; }
  .nav-toggle{ display:inline-block; }
  .primary-nav{
    position:absolute; inset-inline:0; top:100%; background:var(--ink);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .primary-nav.is-open{ max-height:480px; }
  .primary-nav ul{ flex-direction:column; gap:0; padding:1rem clamp(1.25rem,4vw,3rem) 1.5rem; }
  .primary-nav li{ border-bottom:1px solid var(--line); }
  .primary-nav a{ display:block; padding:.9rem 0; }
}

/* ---------------------------------------------------------
   HERO — photo pleine largeur + texte en bas à gauche
--------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--cream-2);
  overflow:hidden;
}
.hero-grid{
  position:relative;
  display:block;
  min-height:min(92vh,940px);
}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  z-index:1;
}
.hero-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(.15) contrast(1.05);
}
.hero-photo::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(13,7,52,.06) 30%, rgba(13,7,52,.68) 100%);
  pointer-events:none;
}
.hero-photo figcaption{
  position:absolute;
  right:1rem;
  bottom:.8rem;
  z-index:2;
  font-size:.72rem;
  color:var(--cream-2);
  opacity:.7;
}
.hero-text{
  position:absolute;
  left:clamp(1.5rem,6vw,6rem);
  right:auto;
  top:auto;
  bottom:clamp(2.5rem,8vh,6.5rem);
  width:min(500px,42vw);
  max-width:500px;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:.75rem;
  text-align:left;
}
.hero-kicker{ display:none; }
.hero-title{
  color:var(--gold);
  font-size:clamp(2.4rem,4.3vw,4.1rem);
  margin:0;
}
.hero-sub{
  color:var(--cream-2);
  opacity:.92;
  max-width:46ch;
  font-size:.86rem;
  line-height:1.55;
  margin:0;
}
.hero-credits{
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--kaki-soft);
  margin:0;
}
.hero-text > .hero-anim:last-child{
  display:flex !important;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:.25rem;
}
.hero-anim{
  opacity:0;
  transform:translateY(14px);
  animation:rise .7s ease forwards;
}
.hero-anim:nth-child(2){ animation-delay:.12s; }
.hero-anim:nth-child(3){ animation-delay:.22s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (max-width:900px){
  .hero-grid{ min-height:760px; }
  .hero-text{
    left:1.5rem;
    right:1.5rem;
    bottom:2.5rem;
    width:auto;
    max-width:none;
  }
  .hero-title{ font-size:2.7rem; }
}

/* ---------------------------------------------------------
   SECTIONS générales
--------------------------------------------------------- */
section{ padding-block:clamp(3.5rem,8vw,7rem); position:relative; }
section[id]{ scroll-margin-top:88px; }
.on-ink{ background:var(--ink); color:var(--cream-2); }
.on-kaki{ background:var(--kaki); color:var(--cream-2); }
.on-cream{ background:var(--cream); color:var(--ink); }
.on-ink h2, .on-ink h3, .on-kaki h2, .on-kaki h3{ color:var(--gold); }
.on-ink p, .on-kaki p{ color:var(--cream-2); }
.rule{ border:none; border-top:1px solid var(--line); margin:2.2rem 0; }
.section-head{ max-width:52ch; margin-bottom:2.4rem; }

.quote-block{
  border-left:2px solid var(--gold); padding-left:1.4rem; margin:2rem 0;
  font-family:var(--font-display); font-size:clamp(1.2rem,2.4vw,1.7rem); color:var(--gold);
  line-height:1.3;
}
.quote-block cite{ display:block; font-family:var(--font-mono); font-style:normal; font-size:.78rem; color:var(--kaki-soft); margin-top:.6rem; }

.media-frame{ position:relative; border:1px solid var(--line); }
.media-frame img{ width:100%; }
.media-frame figcaption{ font-size:.72rem; color:var(--kaki-soft); padding:.6rem .1rem 0; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }
.two-col.reverse .media-frame{ order:2; }

/* formats list */
.formats{ list-style:none; padding:0; margin:1.6rem 0; display:grid; gap:1rem; }
.formats li{
  border-top:1px solid var(--line); padding-top:1rem; display:grid; grid-template-columns:auto 1fr; gap:1rem;
}
.formats strong{ color:var(--gold); font-family:var(--font-mono); font-size:.85rem; white-space:nowrap; }

/* liste ateliers / ressources */
.chip-list{ list-style:none; padding:0; margin:1.4rem 0; display:flex; flex-wrap:wrap; gap:.6rem; }
.chip-list li{
  border:1px solid var(--line); padding:.5em .9em; font-size:.82rem; color:var(--gold);
}

/* Artistes */
.artist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:900px){ .artist-grid{ grid-template-columns:1fr; } }
.artist-card .media-frame{ aspect-ratio:3/4; overflow:hidden; }
.artist-card .media-frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.artist-card h3{ margin-top:1rem; color:var(--gold); }
.artist-card p{ font-size:.92rem; }

/* Ressources */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:1rem; }
@media (max-width:900px){ .res-grid{ grid-template-columns:1fr; } }
.res-col h3{ font-size:1.1rem; color:var(--gold); }
.res-col ul{ padding-left:1.1rem; margin:0 0 1.4rem; font-size:.9rem; }
.res-col li{ margin-bottom:.5em; }

.playlist-card{
  display:flex; align-items:center; gap:1rem; border:1px solid var(--line); padding:1rem 1.2rem;
  text-decoration:none; color:var(--cream-2); max-width:26rem; margin-top:1rem;
}
.playlist-card:hover{ border-color:var(--gold); }
.play-dot{
  flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.playlist-card .pl-title{ font-family:var(--font-display); color:var(--gold); font-size:1.05rem; }
.playlist-card .pl-sub{ font-size:.75rem; opacity:.7; }

/* Tarifs / infos pratiques */
.rate-table{ width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.9rem; }
.rate-table th,.rate-table td{ text-align:left; padding:.7em .5em; border-bottom:1px solid var(--line); }
.rate-table th{ color:var(--gold); font-weight:400; }
.tech-list{ padding-left:1.1rem; }
.tech-list li{ margin-bottom:.5em; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--gap); margin-top:2rem; }
.contact-card{ border-top:1px solid var(--line); padding-top:1.2rem; }
.contact-card h3{ font-size:1rem; color:var(--gold); margin-bottom:.5em; }
.contact-card a{ text-decoration:none; }
.contact-card a:hover{ color:var(--gold); }

/* Footer */
.site-footer{ background:var(--ink); color:var(--kaki-soft); padding-block:2.4rem; font-size:.78rem; }
.site-footer .container{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.site-footer a{ color:var(--cream-2); text-decoration:none; }
.site-footer a:hover{ color:var(--gold); }

/* utility */
.small{ font-size:.82rem; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Contenu éditable de la rubrique Ressources */
.home-editable-resources > .wp-block-columns,
.home-editable-resources .wp-block-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-top:1rem; }
.home-editable-resources .wp-block-column h3 { font-size:1.1rem; color:var(--gold); }
.home-editable-resources .wp-block-column ul { padding-left:1.1rem; margin:0 0 1.4rem; font-size:.9rem; }
.home-editable-resources .wp-block-column li { margin-bottom:.5em; }
.home-editable-resources .wp-block-shortcode { margin:0 0 1.5rem; }
@media (max-width:900px){ .home-editable-resources > .wp-block-columns,
.home-editable-resources .wp-block-columns { grid-template-columns:1fr; } }