/*
Theme Name:  Festival d'Auvers
Theme URI:   https://www.festival-auvers.com
Author:      Audouin Réalisations
Description: Thème sur mesure pour le Festival d'Auvers-sur-Oise. Compatible WPBakery.
Version:     1.2.5
Text Domain: festival-auvers
License:     GNU General Public License v2 or later
*/

/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  --ink:       #1c1c1a;
  --paper:     #fbfaf6;
  --accent:    #008264;
  --gold:      #c7aa46;
  --gold-deep: #a98e34;
  --muted:     #8a857c;
  --line:      rgba(28, 28, 26, .14);
  --serif:     'Crimson Pro', Georgia, serif;
  --body:      'Crimson Pro', Georgia, serif;
  --maxw:      1240px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  background:   var(--paper);
  color:        var(--ink);
  font-family:  var(--body);
  font-size:    18px;
  line-height:  1.65;
  overflow-x:   hidden;
}
::selection { background: var(--accent); color: var(--paper); }
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
header.nav {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 40;
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.nav-logo { display: flex; align-items: center; gap: 13px; }
.nav-logo img { height: 60px; width: auto; }
.nav-logo .txt {
  font-family:    var(--serif);
  font-size:      1.1rem;
  line-height:    1.05;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--paper);
}
.nav-logo .txt em {
  display:        block;
  font-style:     italic;
  text-transform: none;
  color:          var(--gold);
  font-size:      .86rem;
  letter-spacing: .02em;
}
.nav-right   { display: flex; align-items: center; gap: 28px; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.pill {
  font-size:      .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding:        11px 20px;
  transition:     .25s;
  border:         1px solid transparent;
}
.pill-prog   { color: var(--paper); border-color: rgba(251,250,246,.5); }
.pill-prog:hover { background: var(--paper); color: var(--ink); }
.pill-billet { background: var(--gold); color: var(--ink); }
.pill-billet:hover { background: var(--paper); }
.pill-soutien { color: var(--ink); background: var(--paper); }
.pill-soutien:hover { background: var(--gold); }

.lang {
  color:          var(--paper);
  font-size:      .84rem;
  letter-spacing: .08em;
  border-left:    1px solid rgba(251,250,246,.4);
  padding-left:   20px;
}
.lang a { opacity: .6; transition: .2s; }
.lang a.on { opacity: 1; font-style: italic; }
.lang a:hover { opacity: 1; }

.menu-btn {
  background:    none;
  border:        none;
  color:         var(--paper);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           9px;
  font-family:   var(--body);
  font-size:     .86rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.menu-btn .bars          { display: flex; flex-direction: column; gap: 4px; }
.menu-btn .bars span     { width: 24px; height: 1.5px; background: var(--paper); display: block; }

/* ============================================================
   HERO BANNER
   ============================================================ */
.hero {
  position:      relative;
  height:        100vh;
  min-height:    640px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  text-align:    center;
  overflow:      hidden;
}
.hero-bg {
  position: absolute;
  inset:    0;
  z-index:  -2;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(199,170,70,.30), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(122,31,43,.55),  transparent 60%),
    linear-gradient(160deg, #241f17 0%, #1c1c1a 55%, #120d0a 100%);
}
/* Vidéo ou image de fond héro */
.hero-bg video,
.hero-bg .hero-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -1;
}
.hero-overlay {
  position:   absolute;
  inset:      0;
  z-index:    -1;
  background: linear-gradient(180deg, rgba(18,13,10,.65) 0%, rgba(18,13,10,.38) 45%, rgba(18,13,10,.8) 100%);
}
.hero-content {
  position:   relative;
  z-index:    1;
  color:      var(--paper);
  padding:    0 24px;
  max-width:  900px;
}
.hero-content .kicker {
  font-style:     italic;
  font-size:      1.7rem;
  color:          var(--gold);
  letter-spacing: .05em;
  margin-bottom:  24px;
  opacity:        0;
  animation:      fadeUp .9s .2s forwards;
}
.hero-content h1 {
  font-family:    var(--serif);
  font-weight:    500;
  font-size:      4.5rem;
  line-height:    .95;
  letter-spacing: .01em;
  opacity:        0;
  animation:      fadeUp .9s .35s forwards;
}
.hero-content h1 .sub {
  display:     block;
  font-style:  italic;
  font-weight: 400;
  font-size:   2.6rem;
  color:       var(--gold);
  margin-top:  10px;
}
.hero-content .dates {
  font-size:      1.7rem;
  letter-spacing: .04em;
  margin-top:     30px;
  opacity:        0;
  animation:      fadeUp .9s .5s forwards;
}
.hero-content .place {
  font-style: italic;
  opacity:    0;
  margin-top: 4px;
  animation:  fadeUp .9s .6s forwards;
}
.hero-cta {
  margin-top: 40px;
  display:    flex;
  gap:        16px;
  justify-content: center;
  opacity:    0;
  animation:  fadeUp .9s .7s forwards;
}
.btn {
  padding:        16px 38px;
  font-size:      .9rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition:     .25s;
  cursor:         pointer;
  display:        inline-block;
}
.btn-gold         { background: var(--gold); color: var(--ink); }
.btn-gold:hover   { background: var(--paper); }
.btn-outline      { border: 1px solid var(--paper); color: var(--paper); }
.btn-outline:hover{ background: var(--paper); color: var(--ink); }

/* Bouton "Téléchargez la brochure" (page Programmation) : icône + survol or éclairci */
.btn-brochure        { display: inline-flex; align-items: center; gap: 9px; padding: 12px 28px; font-size: .8rem; }
.btn-brochure svg    { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.btn-brochure:hover  { background: #e0c877; }

.scroll-cue {
  position:  absolute;
  bottom:    30px;
  left:      50%;
  transform: translateX(-50%);
  z-index:   1;
  color:     var(--paper);
  font-style:italic;
  font-size: .85rem;
  opacity:   .7;
  animation: bob 2s infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bob {
  0%,100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, 8px); }
}

/* ============================================================
   SECTIONS — BASE
   ============================================================ */
section { padding: 96px 0; }

.sec-head           { text-align: center; margin-bottom: 56px; }
.sec-head .kicker   { font-style: italic; color: var(--gold-deep); font-size: 1.05rem; letter-spacing: .05em; margin-bottom: 10px; }
.sec-head h2        { font-family: var(--serif); font-weight: 500; font-size: 3.2rem; letter-spacing: .01em; }
.sec-head p.lead    { max-width: 620px; margin: 14px auto 0; color: var(--muted); font-size: 1.08rem; }
/* Intro « L'ADN du Festival » — page DiscAuverS */
.disc-intro         { max-width: 1040px; margin: 4px auto 52px; }
.page-id-77 .sec-head p.lead { max-width: 900px; }
.disc-intro h3      { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--gold-deep); text-align: center; margin-bottom: 14px; }
.disc-intro p       { color: var(--ink); font-size: 1.05rem; line-height: 1.75; text-align: left; }

/* ============================================================
   4 BLOCS DE L'OPUS
   ============================================================ */
.opus-grid {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   28px;
}
.opus-card {
  background:      #ffffff;
  border-radius:   12px;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  text-align:      left;
  text-decoration: none;
  box-shadow:      0 2px 12px rgba(28,28,26,.05);
  transition:      transform .3s ease, box-shadow .3s ease;
}
.opus-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(28,28,26,.10); }

/* Image collée au contenu, sans gouttière */
.opus-card__media {
  display:    block;
  width:      100%;
  height:     150px;
  margin:     0;
  overflow:   hidden;
  background: #e7e3d8;
}
.opus-card__media img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  margin:     0;                       /* neutralise la marge WPBakery .vc_single_image-wrapper */
  transition: transform .4s ease;
}
.opus-card:hover .opus-card__media img { transform: scale(1.04); }

/* Corps de carte */
.opus-card__body { padding: 22px 24px 24px; }

/* Label « Mouvement … » masqué à la demande (sous-titre retiré) */
.opus-card .num {
  display:       none;
  align-items:   center;
  gap:           10px;
  font-family:   var(--serif);
  font-style:    italic;
  font-size:     15px;
  color:         #6b6456;
  margin-bottom: 10px;
}
.opus-card .num::before {
  content: '';
  width:   22px;
  height:  2px;
  flex:    0 0 auto;
}
/* Accent piloté par le champ ACF « Couleur d'accent » du CPT opus_bloc */
.opus-card--gold     .num::before { background: var(--gold); }   /* #c7aa46 */
.opus-card--bordeaux .num::before { background: var(--accent); } /* #008264 */

.opus-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size:   26px;
  color:       #2a2722;
  margin:      0 0 10px;
}
.opus-card p {
  font-size:   15.5px;
  color:       #6b6456;
  line-height: 1.6;
  margin:      0 0 16px;
}
.opus-card .more {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  color:          var(--accent);
  font-size:      .98rem;
  letter-spacing: .06em;
}
.opus-card .more::after       { content: '\2192'; transition: transform .25s ease; }
.opus-card:hover .more::after { transform: translateX(4px); }

/* ============================================================
   DISCAUVERS
   ============================================================ */
.disc-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   32px;
}
.disc-card { display: flex; flex-direction: column; }
.disc-cover {
  aspect-ratio: 1;
  background:   linear-gradient(135deg, #2a2520, #1c1c1a);
  display:      flex;
  align-items:  center;
  justify-content: center;
  position:     relative;
  overflow:     hidden;
  border:       1px solid var(--line);
  transition:   .3s;
  text-decoration: none;
}
.disc-cover img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.disc-cover .vinyl {
  width:        62%;
  aspect-ratio: 1;
  border-radius:50%;
  background:   radial-gradient(circle at center, var(--gold) 0 16%, #1c1c1a 17% 22%, #2a2520 23% 100%);
  transition:   .5s;
  position:     relative;
  z-index:      1;
}
.disc-card:hover .disc-cover { box-shadow: 0 16px 36px rgba(28,28,26,.18); }
.disc-card:hover .vinyl       { transform: rotate(120deg) scale(1.04); }
.disc-card h3                 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin-top: 18px; }
.disc-card h3 a               { color: inherit; text-decoration: none; transition: color .2s; }
.disc-card h3 a:hover         { color: var(--accent); }
.disc-card .meta              { color: var(--muted); font-size: .9rem; margin-top: 2px; }

/* Boutons d'action de la carte disque */
.disc-actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px;
  margin-top:  16px;
}
.disc-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  font-size:       .82rem;
  letter-spacing:  .03em;
  padding:         .55rem .95rem;
  border-radius:   6px;
  text-decoration: none;
  transition:      .25s;
  border:          1px solid transparent;
}
.disc-btn--listen        { background: var(--accent); color: var(--paper); }
.disc-btn--listen:hover  { background: #006a52; }
.disc-btn--listen::before {
  content: ''; width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.disc-btn--bio           { color: var(--ink); border-color: var(--line); }
.disc-btn--bio:hover     { border-color: var(--ink); background: rgba(28,28,26,.04); }
/* « Réserver en ligne » (boutique DiscAuverS) */
.disc-btn--buy           { background: var(--gold-deep); color: #fff; }
.disc-btn--buy:hover     { background: var(--gold); color: var(--ink); }
.disc-btn--buy svg       { width: 15px; height: 15px; flex: 0 0 auto; }
/* rangée de boutons de la fiche disque */
.disque-actions          { display: flex; flex-wrap: wrap; gap: 10px; }

/* Page single d'un disque */
.disque-single { padding: 80px 0; }
.disque-head {
  display:               grid;
  grid-template-columns: 320px 1fr;
  gap:                   48px;
  align-items:           center;
}
.disque-cover img {
  width:      100%;
  height:     auto;
  display:    block;
  border:     1px solid var(--line);
  box-shadow: 0 16px 36px rgba(28,28,26,.12);
}
.disque-info .kicker { font-style: italic; color: var(--gold-deep); letter-spacing: .05em; margin-bottom: 8px; }
.disque-info h1      { font-family: var(--serif); font-weight: 500; font-size: 2.8rem; line-height: 1.1; margin: 0 0 14px; }
.disque-prix         { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); margin-bottom: 22px; }
.disque-bio          { max-width: 760px; margin: 48px auto 0; }
.disque-bio p        { color: var(--ink); line-height: 1.8; margin-bottom: 1.2em; }

/* Blocs éditables de la fiche disque : Vie de l'artiste / Palmarès / Lien avec le Festival */
.disque-blocs        { max-width: 760px; margin: 40px auto 0; }
.disque-bloc         { margin-top: 0; padding: 20px 0; border-top: 1px solid var(--gold); }
.disque-bloc:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.disque-bloc h2      { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin-bottom: 10px; color: var(--gold); display: flex; align-items: center; gap: 10px; }
.disque-bloc__ico    { display: inline-flex; flex: 0 0 auto; color: var(--gold); }
.disque-bloc__ico svg { width: 22px; height: 22px; display: block; }
.disque-bloc__content p { color: var(--ink); line-height: 1.8; margin-bottom: 1.2em; }

.disque-back         { max-width: 760px; margin: 40px auto 0; }
.disque-back a       { color: var(--accent); text-decoration: none; font-size: .95rem; }
.disque-back a:hover { text-decoration: underline; }
@media (max-width: 680px) {
  .disque-head { grid-template-columns: 1fr; gap: 28px; }
}

/* Page single d'un concert */
.concert-single { padding: 80px 0; }
.concert-head {
  display:               grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap:                   48px;
  align-items:           center;
}
.concert-cover img {
  width:      100%;
  height:     auto;
  display:    block;
  border:     1px solid var(--line);
  box-shadow: 0 16px 36px rgba(28,28,26,.12);
}
.concert-info .prog-badge {
  position:      static;
  display:       inline-block;
  margin-bottom: 14px;
}
.concert-info h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size:   2.8rem;
  line-height: 1.1;
  margin:      0 0 16px;
}
.concert-meta        { list-style: none; margin: 0 0 18px; padding: 0; }
.concert-meta li     { color: var(--muted); font-size: 1.05rem; margin-bottom: 4px; }
.concert-meta__date  { text-transform: capitalize; }
.concert-meta__lieu  { color: var(--ink); }
/* lieu cliquable → Google Maps (même principe que les lieux de la page « À voir ») */
.concert-meta__map        { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.concert-meta__map:hover  { color: var(--accent); border-bottom-color: var(--accent); }
.concert-meta__map::after { content: " ↗"; font-size: .8em; color: var(--muted); }
.concert-meta__map:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.concert-prix        { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-deep); margin-bottom: 22px; }
.concert-body        { max-width: 760px; margin: 48px auto 0; }
.concert-body p      { color: var(--ink); line-height: 1.8; margin-bottom: 1.2em; }
.concert-back        { max-width: 760px; margin: 40px auto 0; }
.concert-back a      { color: var(--accent); text-decoration: none; font-size: .95rem; }
.concert-back a:hover { text-decoration: underline; }
@media (max-width: 680px) {
  .concert-head    { grid-template-columns: 1fr; gap: 28px; }
  .concert-info h1 { font-size: 2.2rem; }
}

/* ============================================================
   YOUTUBE
   ============================================================ */
.yt            { background: var(--ink); color: var(--paper); }
.yt .sec-head h2    { color: var(--paper); }
.yt .sec-head .kicker{ color: var(--gold); }
.yt .sec-head p.lead { color: rgba(251,250,246,.6); }

/* Section #artistes (fond doré) : kicker + lead en blanc pour lisibilité */
#artistes .sec-head .kicker { color: var(--paper); }
#artistes .sec-head p.lead  { color: var(--paper); }

/* Cartes artistes : h3 en noir, infos en dessous (role + date) en blanc */
#artistes .art-card h3    { color: var(--ink); }
#artistes .art-card .role { color: var(--paper); }
#artistes .art-card .inst { color: var(--paper); }

.yt-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   26px;
  margin-bottom:         40px;
}
.yt-card { cursor: pointer; display: block; color: var(--paper); }
.yt-thumb {
  aspect-ratio: 16/9;
  background:   linear-gradient(135deg, #2e2820, #1c1c1a);
  position:     relative;
  overflow:     hidden;
  border:       1px solid rgba(251,250,246,.12);
}
.yt-thumb img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.yt-thumb::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(circle at 40% 40%, rgba(199,170,70,.18), transparent 60%);
}
.yt-play {
  position:        absolute;
  top: 50%; left: 50%;
  transform:       translate(-50%, -50%);
  width:           64px;
  height:          64px;
  border-radius:   50%;
  background:      rgba(199,170,70,.92);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         2;
  transition:      .25s;
}
.yt-play::after {
  content:      '';
  border-left:  18px solid var(--ink);
  border-top:   11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:  4px;
}
.yt-card:hover .yt-play { transform: translate(-50%, -50%) scale(1.12); background: var(--paper); }
.yt-card h3              { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin-top: 16px; }
.yt-card .meta           { color: rgba(251,250,246,.55); font-size: .88rem; font-style: italic; margin-top: 2px; }

.yt-foot { text-align: center; }
.yt-foot a {
  background:     var(--gold);
  border:         1px solid var(--gold);
  color:          var(--ink);
  padding:        14px 34px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size:      .85rem;
  transition:     .25s;
  display:        inline-block;
}
.yt-foot a:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ============================================================
   ARTISTES INVITÉS
   ============================================================ */
.artistes {
  background:   #f6f4ec;
  border-top:   1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.art-grid {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             28px;
}
.art-card    { text-align: center; cursor: pointer; display: block; color: var(--ink); width: 260px; max-width: 100%; }
.art-portrait {
  aspect-ratio:    3/4;
  background:      linear-gradient(160deg, #d8d2c4, #bdb6a6);
  position:        relative;
  overflow:        hidden;
  border:          1px solid var(--line);
  transition:      .3s;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
}
.art-portrait img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.art-portrait .initials {
  font-family: var(--serif);
  font-size:   4rem;
  color:       rgba(28,28,26,.22);
  position:    absolute;
  top: 50%; left: 50%;
  transform:   translate(-50%, -50%);
}
.art-card:hover .art-portrait { box-shadow: 0 16px 34px rgba(28,28,26,.16); transform: translateY(-4px); }
.art-card h3   { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin-top: 16px; }
.art-card .role{ font-style: italic; color: var(--gold-deep); font-size: 1.05rem; }
.art-card .inst{ color: var(--muted); font-size: 1rem; }

/* Badge compositeur en résidence */
.art-card.is-resident .art-portrait::before {
  content:        attr(data-role);
  position:       absolute;
  top:            14px;
  left:           0;
  background:     var(--gold);
  color:          var(--ink);
  font-size:      .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        5px 12px;
  z-index:        2;
}

/* ============================================================
   FOOTER — NEWSLETTER
   ============================================================ */
.foot-news { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.foot-news-inner {
  max-width:   760px;
  margin:      0 auto;
  padding:     64px 40px;
  text-align:  center;
}
.foot-news h3 { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; margin-bottom: 8px; }
.foot-news p  { opacity: .85; margin-bottom: 26px; }

.news-field {
  display:    flex;
  max-width:  480px;
  margin:     0 auto;
  background: var(--paper);
  border:     1px solid var(--line);
  padding:    6px;
}
.news-field input {
  flex:        1;
  border:      none;
  background:  none;
  padding:     13px 16px;
  font-family: var(--body);
  font-size:   1rem;
  color:       var(--ink);
}
.news-field input:focus { outline: none; }
.news-field button {
  background:     var(--gold);
  color:          var(--ink);
  border:         none;
  padding:        0 28px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size:      .82rem;
  cursor:         pointer;
  font-family:    var(--body);
  transition:     .2s;
}
.news-field button:hover { background: var(--accent); color: var(--paper); }

/* --- Formulaire newsletter via Contact Form 7 ---------------
   CF7 rend un <input type="submit"> et non un <button> : sans ces
   règles il hériterait de `.news-field input` (fond transparent,
   flex:1) et le bouton doré disparaîtrait. Le sélecteur est plus
   spécifique, il l'emporte donc sur `.news-field input`.
   ------------------------------------------------------------ */
.news-field input[type="submit"] {
  flex:           0 0 auto;
  background:     var(--gold);
  color:          var(--ink);
  border:         none;
  padding:        0 28px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size:      .82rem;
  cursor:         pointer;
  font-family:    var(--body);
  transition:     .2s;
}
.news-field input[type="submit"]:hover { background: var(--accent); color: var(--paper); }

/* CF7 enveloppe chaque champ dans un <span class="wpcf7-form-control-wrap">.
   C'est donc ce span, et non l'input, qui est l'élément flexible ; l'input
   occupe alors toute sa largeur. (Volontairement pas de `display: contents`
   ici : le comportement serait moins prévisible.) */
.news-field .wpcf7-form-control-wrap {
  flex:      1;
  min-width: 0;
  display:   block;
}
.news-field .wpcf7-form-control-wrap input { width: 100%; }

/* Messages de validation et de confirmation.
   La section a un fond clair (--paper) : on reste sur l'encre.
   Sélecteurs préfixés par .wpcf7 form pour passer devant les règles
   du plugin (bordure bleue 2px, marges 2em) qui sont plus spécifiques. */
.foot-news .wpcf7 form .wpcf7-response-output {
  max-width:  480px;
  margin:     14px auto 0;
  padding:    10px 14px;
  border:     1px solid var(--line);
  color:      var(--ink);
  font-size:  .92rem;
  text-align: center;
}
.foot-news .wpcf7 form.sent .wpcf7-response-output    { border-color: var(--accent); color: var(--accent); }
.foot-news .wpcf7 form.invalid .wpcf7-response-output,
.foot-news .wpcf7 form.failed .wpcf7-response-output,
.foot-news .wpcf7 form.aborted .wpcf7-response-output { border-color: #a4302a; color: #a4302a; }

.foot-news .wpcf7-not-valid-tip {
  display:    block;
  margin:     4px 0 2px 16px;
  color:      #a4302a;
  font-size:  .85rem;
  text-align: left;
}
/* Au repos, CF7 laisse son spinner en visibility:hidden : invisible, mais
   il occupe 24px de large + 24px de marge de chaque côté, d'où un vide
   entre le bouton et la bordure. On le sort du flux jusqu'à l'envoi. */
.foot-news .wpcf7-spinner { display: none; }
.foot-news form.submitting .wpcf7-spinner {
  display:    inline-block;
  margin:     0 0 0 10px;
  align-self: center;
}

/* Libellé réservé aux lecteurs d'écran (absent du thème jusqu'ici). */
.screen-reader-text {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0, 0, 0, 0);
  white-space: nowrap;
  border:    0;
}

/* ============================================================
   FOOTER — BAS
   ============================================================ */
.foot-main { background: var(--ink); color: var(--paper); padding: 72px 0 36px; }
.foot-grid {
  display:               grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:                   46px;
  padding-bottom:        44px;
  border-bottom:         1px solid rgba(251,250,246,.14);
}
.foot-brand img       { width: 96px; margin-bottom: 18px; }
.foot-brand p         { color: rgba(251,250,246,.6); font-style: italic; max-width: 260px; font-size: .96rem; }
.foot-col h4          { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; margin-bottom: 18px; color: var(--gold); }
.foot-col ul          { list-style: none; }
.foot-col li          { margin-bottom: 11px; }
.foot-col a           { color: rgba(251,250,246,.7); font-size: .96rem; transition: .2s; }
.foot-col a:hover     { color: var(--paper); }
.foot-col .contact-line { color: rgba(251,250,246,.7); font-size: .96rem; margin-bottom: 11px; }
.foot-col .contact-line b { color: var(--paper); font-weight: 500; font-style: italic; }
.foot-col .contact-link { display: inline-flex; align-items: center; gap: 8px; }
.foot-col .contact-ico  { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; opacity: .85; }

.socials       { display: flex; gap: 16px; margin-top: 8px; }
.socials a {
  width:           40px;
  height:          40px;
  border:          1px solid rgba(251,250,246,.3);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .8rem;
  letter-spacing:  .02em;
  color:           rgba(251,250,246,.8);
  transition:      .25s;
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.socials a svg  { width: 18px; height: 18px; fill: currentColor; display: block; }

.foot-bottom { padding-top: 26px; text-align: center; color: rgba(251,250,246,.45); font-size: .86rem; }
.foot-bottom a { color: rgba(251,250,246,.45); transition: .2s; }
.foot-bottom a:hover { color: var(--paper); }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   DRAWER
   ============================================================ */
.overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(18,13,10,.55);
  z-index:        90;
  opacity:        0;
  pointer-events: none;
  transition:     .3s;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position:   fixed;
  top: 0; right: 0;
  height:     100%;
  width:      380px;
  max-width:  88%;
  z-index:    100;
  background: var(--ink);
  color:      var(--paper);
  transform:  translateX(100%);
  transition: .36s cubic-bezier(.66, 0, .2, 1);
  padding:    34px 40px;
  display:    flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer .close {
  align-self:  flex-end;
  background:  none;
  border:      none;
  color:       var(--paper);
  font-size:   2rem;
  cursor:      pointer;
  font-family: var(--serif);
  line-height: 1;
}
.drawer nav             { margin-top: 20px; display: flex; flex-direction: column; }
.drawer nav a {
  font-family:    var(--serif);
  font-size:      1.7rem;
  font-weight:    500;
  padding:        14px 0;
  border-bottom:  1px solid rgba(251,250,246,.12);
  transition:     .2s;
  display:        block;
}
.drawer nav a:hover     { color: var(--gold); padding-left: 8px; }
.drawer .dr-foot        { margin-top: auto; font-style: italic; color: rgba(251,250,246,.55); font-size: .9rem; }

/* Sélecteur de langue du drawer : le .lang de l'en-tête est masqué ≤ 780px,
   c'est donc le seul point de bascule FR/EN en mobile. */
.drawer .dr-lang {
  font-style:     normal;
  font-size:      .95rem;
  letter-spacing: .08em;
  color:          var(--paper);
  padding-bottom: 10px;
  margin-bottom:  14px;
  border-bottom:  1px solid rgba(251,250,246,.12);
}
.drawer .dr-lang a       { display: inline-block; padding: 10px 6px; opacity: .55; transition: .2s; }
.drawer .dr-lang a.on    { opacity: 1; font-style: italic; font-weight: 700; color: var(--gold); }
.drawer .dr-lang a:hover { opacity: 1; color: var(--gold); }

/* Header au scroll — fond semi-transparent */
header.nav.scrolled {
  position:   fixed;
  background: rgba(28, 28, 26, .92);
  backdrop-filter: blur(8px);
  transition: background .3s;
}

/* ============================================================
   PAGE / SINGLE (WPBakery)
   ============================================================ */
.page-content { padding-top: 100px; }
.entry-content { max-width: var(--maxw); margin: 0 auto; padding: 60px 40px; }

/* Bannière de page pleine largeur (derrière le menu) — ex. page « À voir » */
.page-banner {
  position:            relative;
  width:               100%;
  min-height:          350px;
  background-position: center center;
  background-size:     cover;
  background-repeat:   no-repeat;
}
.page-banner__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(18,13,10,.62) 0%, rgba(18,13,10,.30) 60%, rgba(18,13,10,.45) 100%);
}
/* Quand une bannière occupe déjà le haut, on annule le décalage du header */
.page-content.has-banner { padding-top: 40px; }

/* Sous-menu de section (dynamique) : sous la bannière, au-dessus du titre.
   Aligné sur la largeur du contenu ; item courant souligné en doré. */
.section-subnav {
  max-width: var(--maxw);
  margin:    0 auto;
  padding:   4px 40px 0;
}
.section-subnav__list {
  list-style:      none;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             6px 26px;
  margin:          0;
  padding:         0 0 14px;
  border-bottom:   1px solid var(--line);
}
.section-subnav__link {
  font-family:    var(--serif);
  font-size:      1.05rem;
  color:          var(--muted);
  text-decoration:none;
  padding-bottom: 3px;
  border-bottom:  2px solid transparent;
  transition:     color .18s ease, border-color .18s ease;
}
.section-subnav__link:hover { color: var(--ink); }
.section-subnav__link.is-current { color: var(--gold-deep); border-bottom-color: var(--gold); }
@media (max-width: 780px) {
  .section-subnav { padding-left: 24px; padding-right: 24px; }
}
/* Page DiscAuverS sous bannière : rapprocher le titre de la bannière (comme « À voir ») */
.has-banner .disc-page { padding-top: 0; }
@media (max-width: 780px) {
  .page-banner { min-height: 180px; }
}

/* ============================================================
   INTÉGRATION WPBAKERY
   ============================================================ */

/* Annule le padding par défaut des colonnes WPBakery pour nos sections */
.vc_row.vc_row-o-equal-height > .vc_column_container > .vc_column-inner {
  display: flex;
  flex-direction: column;
}

/* Centrage du contenu dans les lignes full-width WPBakery */
.vc_row-fluid > .vc_column_container {
  float: none !important;
  max-width: var(--maxw);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* Supprime le padding double quand la colonne WPBakery contient déjà un .wrap */
.vc_column_container > .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Supprime les marges par défaut WPBakery sur les lignes */
.vc_row {
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Colonnes 1/4 (Opus) : assure le gap entre les cartes */
.vc_row_inner > .vc_column_inner_container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.vc_row_inner {
  margin-left:  -12px !important;
  margin-right: -12px !important;
}

/* Retire les marges <p> injectées par wpautop dans vc_column_text */
.wpb_text_column .wpb_wrapper > p:empty { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .opus-grid, .art-grid          { grid-template-columns: 1fr 1fr; }
  .disc-grid, .yt-grid           { grid-template-columns: 1fr 1fr; }
  .foot-grid                     { grid-template-columns: 1fr 1fr; }
  .nav-actions .pill-prog,
  .nav-actions .pill-soutien     { display: none; }
}
@media (max-width: 680px) {
  body                           { font-size: 17px; }
  .nav-inner                     { padding: 16px 22px; }
  .nav-logo .txt                 { display: none; }
  .nav-logo img                  { height: 48px; }
  .hero-content h1               { font-size: 3.8rem; }
  .hero-content h1 .sub          { font-size: 1.8rem; }
  .hero-cta                      { flex-direction: column; }
  section                        { padding: 64px 0; }
  .wrap                          { padding: 0 22px; }
  .sec-head h2                   { font-size: 2.4rem; }
  .opus-grid, .art-grid,
  .disc-grid, .yt-grid,
  .foot-grid                     { grid-template-columns: 1fr; }
  .lang                          { display: none; }
  .entry-content                 { padding: 40px 22px; }
}

/* ============================================================
   NAVIGATION HORIZONTALE PRINCIPALE (#mainNav)
   Desktop : nav horizontale gérée depuis l'admin (emplacement primary).
   Mobile (≤780px) : masquée → le burger ouvre le drawer existant.
   ============================================================ */
.nav-inner { flex-wrap: wrap; }

/* Disposition : logo + CTA sur la 1re ligne, menu sur la 2e ligne */
.nav-logo  { order: 1; }
.nav-right { order: 2; margin-left: auto; }
.main-nav {
  order:           3;
  flex-basis:      100%;
  display:         flex;
  justify-content: center;
  margin-top:      14px;
  padding-top:     14px;
  border-top:      1px solid rgba(244, 239, 230, .16); /* trait très léger, plus fin que la bordure du bouton */
}
.main-nav ul         { list-style: none; display: flex; align-items: center; gap: 1.3rem; margin: 0; padding: 0; }
.main-nav li         { position: relative; }
.main-nav a {
  display:        block;
  color:          var(--paper);
  font-size:      1.1rem;
  letter-spacing: .02em;
  padding:        6px 2px;
  position:       relative;
  transition:     color .2s;
}
.main-nav a::after {
  content:          '';
  position:         absolute;
  left: 0; bottom: 0;
  width:            100%;
  height:           1px;
  background:       var(--gold);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .25s;
}
.main-nav a:hover,
.main-nav .current-menu-item > a { color: var(--gold); }
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after { transform: scaleX(1); }

/* Sous-menus déroulants */
.main-nav ul ul {
  position:        absolute;
  top: 100%; left: 0;
  min-width:       210px;
  flex-direction:  column;
  align-items:     stretch;
  gap:             0;
  background:      rgba(28, 28, 26, .97);
  backdrop-filter: blur(8px);
  border:          1px solid rgba(251, 250, 246, .14);
  padding:         8px 0;
  opacity:         0;
  visibility:      hidden;
  transform:       translateY(8px);
  transition:      opacity .25s, transform .25s, visibility .25s;
  z-index:         50;
}
.main-nav li:hover > ul,
.main-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.main-nav ul ul a            { padding: 9px 18px; font-size: .92rem; white-space: nowrap; }
.main-nav ul ul a::after     { display: none; }
.main-nav ul ul a:hover      { color: var(--gold); }

/* Boutons CTA en dur (hors menu WP) */
.nav-cta { display: flex; align-items: center; gap: 8px; }
.cta {
  display:        inline-block;
  font-family:    var(--serif);
  text-transform: uppercase;
  font-size:      .86rem;
  letter-spacing: .1em;
  line-height:    1;
  padding:        .7rem .95rem;
  border:         1px solid transparent;
  white-space:    nowrap;
  transition:     .25s;
}
.cta-ghost        { border-color: rgba(244, 239, 230, .35); color: #f4efe6; }
.cta-ghost:hover  { border-color: var(--gold); color: #fff; }
.cta-gold         { background: var(--gold); color: #2a2008; }
.cta-gold:hover   { background: #d8c07a; }
.cta-light        { background: #f4efe6; color: #1a1410; }
.cta-light:hover  { background: #fff; }

/* Sélecteur de langue : FR/EN actif en italique gras */
.lang a.on { font-style: italic; font-weight: 700; opacity: 1; }

/* Burger : masqué sur desktop, traits 26×2px crème */
.menu-btn               { display: none; }
.menu-btn .bars span    { width: 26px; height: 2px; }

/* Header sticky au scroll : on ne garde que la 1re ligne (logo + boutons),
   le menu (2e ligne) est masqué pour un header compact. */
header.nav.scrolled .main-nav { display: none; }

/* ≤780px : nav horizontale + CTA masqués, burger visible (ouvre le drawer) */
@media (max-width: 780px) {
  .main-nav { display: none; }
  .nav-cta  { display: none; }
  .menu-btn { display: flex; }
  .opus-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE INFORMATIONS PRATIQUES (À voir)
   ============================================================ */
.ip-head .sec-head { margin-bottom: 8px; }

.ip-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 8px 0 10px; }
.ip-card {
  background: #fff; border-radius: 14px; padding: 32px 28px;
  box-shadow: 0 2px 14px rgba(28,28,26,.06);
  display: flex; flex-direction: column;
}
.ip-card__ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,130,100,.12); color: var(--accent); margin-bottom: 16px;
}
.ip-card__ico svg { width: 24px; height: 24px; fill: currentColor; }
.ip-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; color: var(--ink); margin: 0 0 10px; }
.ip-card p  { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0 0 12px; }
.ip-card p:last-child { margin-bottom: 0; }
.ip-card a  { color: var(--accent); text-decoration: none; }
.ip-card a:hover { text-decoration: underline; }
.ip-card__sub { font-style: italic; font-size: .92rem; }
.ip-tarifs { list-style: none; margin: 0 0 8px; padding: 0; }
.ip-tarifs li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.ip-tarifs li:last-child { border-bottom: 0; }
.ip-tarifs b { color: var(--accent); white-space: nowrap; }

.ip-sec { margin-top: 60px; }
.ip-reduit { max-width: 880px; margin: 0 auto; }
.ip-reduit ul { columns: 2; column-gap: 44px; list-style: none; padding: 0; margin: 0 0 22px; }
.ip-reduit li { padding: 8px 0 8px 26px; position: relative; break-inside: avoid; color: var(--ink); }
.ip-reduit li::before { content: ''; position: absolute; left: 0; top: 15px; width: 13px; height: 2px; background: var(--accent); }
.ip-note { color: var(--muted); font-size: .95rem; line-height: 1.7; border-left: 3px solid var(--accent); padding-left: 18px; }

.ip-gourmand { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ip-gourmand__media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; display: block; }
.ip-gourmand__body .kicker { font-style: italic; color: var(--gold-deep); margin-bottom: 8px; }
.ip-gourmand__body h2 { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; margin: 0 0 14px; }
.ip-gourmand__body p  { color: var(--muted); line-height: 1.7; margin: 0 0 12px; }

/* ── Lieux emblématiques : cartes avec bloc Image WPBakery (un lieu = une colonne) ── */
/* .ip-venues = inner-row WPBakery ; chaque lieu = inner-column .ip-venue (bloc Image + bloc Texte) */
.ip-venues.vc_row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; align-items: stretch; }
/* neutralise le clearfix ::before/::after de WPBakery qui parasitait la grille flex */
.ip-venues.vc_row::before, .ip-venues.vc_row::after { content: none; display: none; }
.ip-venues > .ip-venue { float: none !important; width: calc(50% - 9px) !important; padding: 0 !important; margin: 0 !important; display: flex; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(28,28,26,.05); transition: box-shadow .2s ease, transform .2s ease; }
.ip-venues > .ip-venue:hover { box-shadow: 0 6px 18px rgba(28,28,26,.12); transform: translateY(-2px); }
.ip-venues > .ip-venue > .vc_column-inner { padding: 0 !important; width: 100%; display: flex; }
.ip-venues > .ip-venue > .vc_column-inner > .wpb_wrapper { width: 100%; display: flex; flex-direction: column; }
/* image (bloc Image WPBakery) en cover pleine largeur */
.ip-venue .wpb_single_image { margin: 0; }
.ip-venue .wpb_single_image .vc_figure,
.ip-venue .wpb_single_image figure,
.ip-venue .wpb_single_image .vc_single_image-wrapper { margin: 0; display: block; width: 100%; }
/* photos en 3:2 (format natif des visuels) : les monuments ne sont plus rognés */
.ip-venue .wpb_single_image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; }
/* texte (bloc Texte WPBakery) */
.ip-venue .wpb_text_column { margin: 0; padding: 16px 18px; }
.ip-venue .wpb_text_column p { margin: 0; }
.ip-venue__link { display: block; text-decoration: none; }
.ip-venue__link strong { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin-bottom: 4px; }
.ip-venue__link span   { display: block; color: var(--muted); font-size: .92rem; }
.ip-venue__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ip-acces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.ip-acces h4 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--accent); margin: 0 0 10px; }
.ip-acces p  { color: var(--muted); line-height: 1.7; margin: 0; }

@media (max-width: 860px) {
  .ip-cards, .ip-acces, .ip-gourmand { grid-template-columns: 1fr; }
  .ip-venues > .ip-venue { width: 100% !important; }
  .ip-reduit ul { columns: 1; }
}

/* Label DiscAuverS : nom de marque toujours en italique (liens de menu vers #disc) */
.main-nav a[href$="#disc"],
.drawer a[href$="#disc"],
.foot-nav a[href$="#disc"],
footer a[href$="#disc"] { font-style: italic; }

/* ============================================================
   PAGES ÉDITORIALES (WPBakery) — prose « Le Festival », etc.
   ============================================================ */
.page-prose {
  max-width:  820px;
  margin:     0 auto;
  text-align: left;
}
.page-prose p {
  color:         var(--ink);
  font-size:     1.08rem;
  line-height:   1.8;
  margin-bottom: 1.3em;
}
.page-prose h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size:   2rem;
  color:       var(--gold-deep);
  margin:      1.7em 0 .5em;
}
.page-prose h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size:   1.4rem;
  color:       var(--ink);
  margin:      1.4em 0 .3em;
}
.page-prose .prose-note {
  font-style:    italic;
  color:         var(--muted);
  font-size:     .98rem;
  margin-bottom: .9em;
}
.page-prose .talents-list {
  columns:     2;
  column-gap:  44px;
  list-style:  none;
  padding:     0;
  margin:      .4em 0 0;
}
.page-prose .talents-list li {
  padding:       7px 0;
  border-bottom: 1px solid var(--line);
  break-inside:  avoid;
  color:         var(--ink);
}
.page-prose .talents-list li em { color: var(--muted); font-size: .92em; }
/* Liste d'arguments/bénéfices rédigés (phrases) : une seule colonne pleine
   largeur, coche dorée en marge, séparateurs fins. À préférer à talents-list
   (2 colonnes, pour listes courtes) quand les items sont des phrases. */
.page-prose .check-list {
  list-style: none;
  padding:    0;
  margin:     .6em 0 0;
}
.page-prose .check-list li {
  position:      relative;
  padding:       12px 0 12px 2em;
  border-bottom: 1px solid var(--line);
  color:         var(--ink);
  line-height:   1.65;
}
.page-prose .check-list li:last-child { border-bottom: none; }
.page-prose .check-list li::before {
  content:     "\2713";
  position:    absolute;
  left:        0;
  top:         12px;
  color:       var(--gold-deep);
  font-weight: 700;
  line-height: 1.65;
}
/* Intitulés de catégories en doré (page « L'association » : Mécène,
   Grand Bienfaiteur… / page « Nos mécènes » : h3.tier) pour les distinguer. */
.page-id-197 .page-prose h3,
.page-prose h3.tier {
  color:          var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size:      1.15rem;
}
/* Mur de logos partenaires (page « Nos mécènes ») : tuiles blanches
   uniformes qui normalisent des logos aux fonds et formats variés. */
.partner-logos {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   18px;
  margin:                .6em 0 1.6em;
}
@media (max-width: 780px) { .partner-logos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .partner-logos { grid-template-columns: 1fr; } }
/* Garde-fou : neutralise les <br> que wpautop pourrait réinjecter entre
   les logos (sinon ils comptent comme des cases vides de la grille). */
.partner-logos br { display: none; }
.partner-logo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:       #fff;
  border:          1px solid var(--line);
  border-radius:   6px;
  padding:         18px 20px;
  min-height:      110px;
  transition:      box-shadow .2s ease, transform .2s ease;
}
a.partner-logo:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.partner-logo img {
  max-width:  100%;
  max-height: 72px;
  width:      auto;
  height:     auto;
  object-fit: contain;
  display:    block;
}
.page-figure { margin: 2.2em 0; }
/* Affiche/poster (portrait) : ne pas étirer en pleine largeur, centrer. */
.page-figure.affiche { text-align: center; }
.page-figure.affiche img { width: auto; max-width: min(100%, 480px); margin: 0 auto; }

/* Liste chiffrée (page « L'objectif » : achats/travaux pour l'église) + total. */
.page-prose ol.cost-list { margin: .6em 0 1.1em; padding-left: 1.4em; }
.page-prose ol.cost-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.page-prose .cost-total {
  font-family: var(--serif);
  font-size:   1.5rem;
  font-weight: 600;
  color:       var(--gold-deep);
  text-align:  right;
  margin:      .5em 0 0;
}

/* Grille de téléchargements (pages « Rapports d'activités » et « Anciens Opus ») :
   vignette d'affiche cliquable + titre + bouton vers le PDF. */
.download-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:                   28px;
  margin:                1em 0 1.4em;
}
.download-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.download-card__thumb { display: block; width: 100%; }
.download-card__thumb img {
  width:      100%;
  height:     auto;
  display:    block;
  border:     1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.download-card__thumb:hover img { transform: translateY(-3px); box-shadow: 0 9px 24px rgba(0,0,0,.17); }
.download-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin: .7em 0 .5em; }
.download-card__btn {
  display:         inline-block;
  background:      var(--gold);
  color:           var(--ink);
  text-decoration: none;
  font-size:       .9rem;
  letter-spacing:  .02em;
  padding:         8px 16px;
  border-radius:   4px;
  transition:      background .2s ease, color .2s ease;
}
.download-card__btn:hover { background: var(--gold-deep); color: var(--paper); }
.page-figure img {
  width:      100%;
  height:     auto;
  display:    block;
  border:     1px solid var(--line);
  box-shadow: 0 16px 36px rgba(28,28,26,.12);
}

/* Page « L'objectif de l'association » (#243) : ne pas étirer la petite image
   (portrait 245px), l'afficher à sa taille native et la centrer. */
.page-id-243 .page-figure img {
  width:     auto;
  max-width: 100%;
  margin:    0 auto;
}
.page-figure figcaption {
  margin-top: 8px;
  font-size:  .9rem;
  font-style: italic;
  color:      var(--muted);
  text-align: center;
}
@media (max-width: 680px) {
  .page-prose .talents-list { columns: 1; }
}

/* ============================================================
   PROGRAMMATION & RÉSERVATION  (shortcode [fa_concert_list])
   Grille de cartes concerts + onglets de filtre par mouvement.
   ============================================================ */
.prog-page { padding: 80px 0; }
.has-banner .prog-page { padding-top: 0; }

/* Onglets de filtre */
.prog-filters {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             10px;
  margin:          0 0 48px;
}
.prog-filter {
  font-family:     var(--serif);
  font-size:       1rem;
  letter-spacing:  .03em;
  padding:         .5rem 1.15rem;
  border:          1px solid var(--line);
  border-radius:   999px;
  background:      transparent;
  color:           var(--ink);
  cursor:          pointer;
  transition:      .25s;
}
.prog-filter:hover      { border-color: var(--ink); }
.prog-filter.is-active  { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Intro du mouvement sélectionné (affichée par le filtre) */
.prog-intros { }
.prog-intro {
  max-width:     900px;
  margin:        0 auto 44px;
  text-align:    center;
  animation:     progFade .4s ease;
}
.prog-intro[hidden] { display: none; }
.prog-intro__title {
  font-family:    var(--serif);
  font-weight:    500;
  font-size:      1.5rem;
  color:          var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  12px;
}
.prog-intro p {
  color:       var(--ink);
  font-size:   1.08rem;
  line-height: 1.75;
}
@keyframes progFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Grille */
.prog-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   32px;
}

/* Carte */
.prog-card {
  display:        flex;
  flex-direction: column;
  background:     var(--paper);
  border:         1px solid var(--line);
  border-radius:  10px;
  overflow:       hidden;
  transition:     transform .3s, box-shadow .3s;
}
.prog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(28,28,26,.16); }

/* Média (image à la une ou repli dégradé) */
.prog-media {
  position:      relative;
  aspect-ratio:  4 / 3;
  background:    linear-gradient(135deg, #2a2520, #1c1c1a);
  overflow:      hidden;
}
.prog-media img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.prog-media.is-placeholder::after {
  content:     '';
  position:    absolute;
  inset:       0;
  background:  radial-gradient(circle at 70% 30%, rgba(199,170,70,.28), transparent 60%);
}

/* Pastille date sur le média */
.prog-date {
  position:      absolute;
  left:          16px;
  bottom:        16px;
  z-index:       2;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  line-height:   1;
  padding:       10px 14px;
  background:    rgba(28,28,26,.55);
  backdrop-filter: blur(3px);
  border-radius: 8px;
  color:         var(--paper);
}
.prog-date__day   { font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.prog-date__month { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.prog-date__year  { font-size: .72rem; color: rgba(251,250,246,.7); margin-top: 1px; }

/* Badge mouvement */
.prog-badge {
  position:       absolute;
  top:            14px;
  right:          14px;
  z-index:        2;
  font-size:      .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding:        .32rem .7rem;
  border-radius:  999px;
  background:     var(--gold);
  color:          #1c1c1a;
  font-weight:    600;
}
.prog-badge--in       { background: var(--accent); color: var(--paper); }
.prog-badge--off      { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.prog-badge--prelude  { background: var(--gold); color: #1c1c1a; }
.prog-badge--postlude { background: var(--gold-deep); color: var(--paper); }

/* Corps de carte */
.prog-body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        22px 24px 24px;
}
.prog-meta {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px 12px;
  color:          var(--muted);
  font-size:      .9rem;
}
.prog-meta__date  { text-transform: capitalize; }
.prog-meta__time::before { content: '· '; }
.prog-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size:   1.5rem;
  margin:      8px 0 0;
  line-height: 1.2;
}
.prog-title a       { color: inherit; text-decoration: none; transition: color .2s; }
.prog-title a:hover { color: var(--accent); }
.prog-lieu    { color: var(--ink); font-size: 1rem; margin-top: 6px; }
.prog-excerpt { color: var(--muted); font-size: .95rem; margin-top: 8px; }

/* Actions (prix + boutons) */
.prog-actions {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            12px;
  margin-top:     auto;
  padding-top:    18px;
}
.prog-prix {
  font-family: var(--serif);
  font-size:   1.2rem;
  color:       var(--gold-deep);
}
.prog-btns {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}
.prog-btn {
  display:         inline-flex;
  align-items:     center;
  font-size:       .85rem;
  letter-spacing:  .03em;
  padding:         .55rem 1rem;
  border-radius:   6px;
  text-decoration: none;
  transition:      .25s;
  border:          1px solid transparent;
}
.prog-btn--book        { background: var(--accent); color: var(--paper); }
.prog-btn--book:hover  { background: #006a52; }
.prog-btn--more        { color: var(--ink); border-color: var(--line); }
.prog-btn--more:hover  { border-color: var(--ink); background: rgba(28,28,26,.04); }

/* Carte concert entièrement cliquable (stretched link) : le lien du titre s'étend
   sur toute la carte → clic n'importe où = page du concert. Les boutons Réserver /
   En savoir plus restent cliquables au-dessus grâce au z-index. */
.prog-card { position: relative; }
.prog-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prog-btn { position: relative; z-index: 2; }

@media (max-width: 1000px) {
  .prog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .prog-grid { grid-template-columns: 1fr; }
  .prog-prix { margin-right: 0; width: 100%; }
}