/* valprod.fr : le programme de salle (23 octobre 2026). Papier ivoire, filets dorés, une frange de rideau, des billets à souche. */
:root {
  --ivoire: #fbf8f1;
  --velin: #fffdf8;
  --encre: #2a2124;
  --gris: #6d6266;
  --or: #b08a3e;
  --or-pale: #e9dcc0;
  --grenat: #7d1f2b;
  --rose: #f4e6e2;
  --filet: #e6dccb;
  --titre: 'Cormorant Upright', Georgia, serif;
  --texte: 'Tenor Sans', 'Segoe UI', sans-serif;
  --capitales: 'Spectral SC', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); font: 400 17px/1.7 var(--texte); background: var(--ivoire); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 9; }

/* --- la salle : fronton, actes, frange */
.salle { background: var(--velin); border-top: 4px solid var(--grenat); }
.salle__in { max-width: 1160px; margin: 0 auto; padding: 20px 24px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; }
.fronton { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; padding: 4px 22px 8px; border-top: 1px solid var(--or); border-bottom: 1px solid var(--or); position: relative; }
.fronton::before, .fronton::after { content: '◆'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--or); font-size: 10px; }
.fronton::before { left: 4px; }
.fronton::after { right: 4px; }
.fronton__nom { font: 700 46px/1 var(--titre); color: var(--grenat); letter-spacing: .02em; }
.fronton__ligne { font: 400 15px/1.2 var(--capitales); letter-spacing: .12em; color: var(--gris); margin-top: 4px; }
.fronton--petit .fronton__nom { font-size: 36px; }
.actes { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.acte { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 2px; text-decoration: none; font: 600 22px/1.1 var(--titre); border-bottom: 2px solid transparent; }
.acte__n { font: 400 14px/1 var(--capitales); color: var(--or); }
.acte:hover, .acte[aria-current] { border-bottom-color: var(--grenat); color: var(--grenat); }
.frange { height: 16px; background: radial-gradient(circle at 50% 0, var(--grenat) 0 11px, transparent 12px) 0 0 / 28px 16px repeat-x; opacity: .9; border-top: 3px solid var(--grenat); }

main { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.filet-t { font: 600 32px/1.15 var(--titre); margin: 0; }

/* --- lever de rideau : mot d'accueil et programme */
.lever { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding: 44px 0 36px; align-items: start; }
.lever > * { min-width: 0; }
.lever__sur { font: 400 15px/1 var(--capitales); letter-spacing: .16em; color: var(--or); margin: 0 0 14px; }
.lever__mot h1 { font: 600 clamp(28px, 2.9vw, 36px)/1.2 var(--titre); margin: 0 0 18px; color: var(--encre); }
.lever__mot p { margin: 0 0 14px; }
.lever__lien a { color: var(--grenat); text-underline-offset: 5px; }
.programme { background: var(--velin); border: 1px solid var(--or); outline: 1px solid var(--or); outline-offset: 5px; padding: 26px 28px 22px; margin: 6px; }
.programme__haut { text-align: center; font: 400 13px/1 var(--capitales); letter-spacing: .2em; color: var(--gris); margin: 0 0 6px; }
.programme__t { text-align: center; font: 700 34px/1.1 var(--titre); color: var(--grenat); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--or-pale); }
.programme__actes { list-style: none; margin: 0; padding: 0; }
.ligne-acte { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px dotted var(--or-pale); color: var(--gris); }
.ligne-acte:last-child { border-bottom: 0; }
.ligne-acte__n { font: 400 15px/1.2 var(--capitales); color: var(--or); }
.ligne-acte__c { display: flex; flex-direction: column; min-width: 0; }
.ligne-acte__nom { font: 600 24px/1.15 var(--titre); color: var(--encre); }
.ligne-acte__nom a { color: var(--grenat); text-underline-offset: 4px; }
.ligne-acte__desc { font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ligne-acte__etat { font: 400 13px/1 var(--capitales); letter-spacing: .06em; white-space: nowrap; }
.ligne-acte--ouverte .ligne-acte__etat { color: var(--grenat); font-weight: 600; }
.ligne-acte:not(.ligne-acte--ouverte) .ligne-acte__nom { color: var(--gris); }

/* --- au guichet : les billets */
.guichet { padding: 14px 0 44px; }
.guichet__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--or); }
.guichet__tout { color: var(--grenat); text-underline-offset: 5px; }
.billets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.billet { display: grid; grid-template-columns: 150px minmax(0, 1fr) 112px; align-items: stretch; height: 100%; text-decoration: none; background: var(--velin); border: 1px solid var(--filet); border-radius: 6px; overflow: hidden; }
.billet__img { display: block; background: var(--rose); }
.billet__img img { width: 150px; height: 100%; min-height: 110px; object-fit: cover; }
.billet__c { display: flex; align-items: center; padding: 12px 16px; min-width: 0; }
.billet__t { font: 600 21px/1.2 var(--titre); overflow-wrap: anywhere; }
.billet:hover .billet__t { color: var(--grenat); }
.souche { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; background: var(--rose); border-left: 2px dashed var(--or); text-align: center; }
.souche__acte { font: 400 13px/1.2 var(--capitales); letter-spacing: .06em; color: var(--grenat); }
.souche__nom { font: 600 18px/1.1 var(--titre); }
.souche__date { font: 400 13px/1.3 var(--capitales); color: var(--gris); }

.affichettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.affichette { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--velin); border: 1px solid var(--filet); padding: 10px 10px 16px; }
.affichette__img { display: block; background: var(--rose); }
.affichette__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92); transition: filter .3s; }
.affichette:hover .affichette__img img { filter: none; }
.affichette__c { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 0; text-align: center; }
.affichette__t { font: 600 22px/1.2 var(--titre); overflow-wrap: anywhere; }
.affichette:hover .affichette__t { color: var(--grenat); }

/* --- rubrique : l'annonce de l'acte */
.annonce { margin: 40px auto 30px; max-width: 820px; text-align: center; padding: 10px 20px 24px; border-bottom: 1px solid var(--or); }
.annonce__acte { font: 400 16px/1 var(--capitales); letter-spacing: .2em; color: var(--or); margin: 0 0 6px; }
.annonce h1 { font: 700 clamp(40px, 5vw, 58px)/1.05 var(--titre); color: var(--grenat); margin: 0 0 10px; }
.annonce p:last-child { margin: 0; color: var(--gris); }
.entracte { padding: 10px 0 44px; }
.entracte .filet-t { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--or); }

/* --- article : le feuillet de salle */
.feuillet { max-width: 800px; margin: 34px auto 18px; padding: 34px 44px 32px; background: var(--velin); border: 1px solid var(--filet); box-shadow: 0 0 0 6px var(--ivoire), 0 0 0 7px var(--or-pale); }
.feuillet__acte { margin: 0; text-align: center; }
.feuillet__acte a { font: 400 15px/1.2 var(--capitales); letter-spacing: .12em; color: var(--or); text-decoration: none; }
.feuillet__tete h1 { font: 700 clamp(32px, 3.8vw, 46px)/1.12 var(--titre); margin: 12px 0 14px; text-align: center; overflow-wrap: anywhere; }
.feuillet__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font: 400 14.5px/1.4 var(--capitales); color: var(--gris); margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--or-pale); }
.feuillet--page .feuillet__tete h1 { text-align: left; }
.feuillet__img { margin: 0 0 26px; }
.texte { overflow-wrap: anywhere; }
.texte h2 { font: 700 30px/1.2 var(--titre); margin: 1.6em 0 .45em; color: var(--grenat); }
.texte h3 { font: 700 23px/1.25 var(--titre); margin: 1.4em 0 .4em; }
.texte a { color: var(--grenat); text-underline-offset: 3px; }
.texte a:hover { color: var(--or); }
.texte img { margin: 1em 0; }
.texte blockquote { margin: 1.4em 0; padding: 12px 20px; background: var(--rose); border-left: 3px solid var(--or); font-style: italic; }
.texte table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15.5px; display: block; overflow-x: auto; }
.texte th, .texte td { border: 1px solid var(--filet); padding: 8px 10px; text-align: left; vertical-align: top; }
.texte th { background: #f6efe1; }

/* --- formulaire */
.formulaire { margin-top: 26px; background: #f7f0e4; border: 1px solid var(--or-pale); padding: 20px 22px; }
.formulaire label { display: block; margin-bottom: 4px; }
.formulaire input, .formulaire textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid #d6c8ad; border-radius: 2px; background: #fff; }
.formulaire button { font: 400 16px/1 var(--capitales); letter-spacing: .08em; background: var(--grenat); color: #fff; border: 0; padding: 14px 24px; cursor: pointer; }
.formulaire button:hover { background: var(--or); }
.formulaire__ok { background: #edf3e6; padding: 10px 14px; }
.formulaire__piege { position: absolute; left: -9999px; }

/* --- le tomber de rideau */
.tomber { margin-top: 30px; background: var(--velin); border-top: 1px solid var(--or); box-shadow: inset 0 4px 0 var(--ivoire), inset 0 5px 0 var(--or-pale); }
.tomber__in { max-width: 1160px; margin: 0 auto; padding: 34px 24px 18px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.tomber__in > * { min-width: 0; }
.tomber__nom p { color: var(--gris); max-width: 380px; margin: 16px 0 0; }
.tomber__t { font: 400 14px/1 var(--capitales); letter-spacing: .16em; color: var(--or); margin: 8px 0 14px; }
.tomber__liste { list-style: none; margin: 0; padding: 0; }
.tomber__liste li { margin: 0 0 8px; }
.tomber__liste a { text-decoration: none; }
.tomber__liste a:hover { color: var(--grenat); text-decoration: underline; }
.tomber__avis { max-width: 1160px; margin: 0 auto; padding: 12px 24px 26px; font-size: 14px; color: var(--gris); border-top: 1px dotted var(--or-pale); }

@media (max-width: 1000px) {
  .lever { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .billets { grid-template-columns: minmax(0, 1fr); }
  .affichettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tomber__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tomber__nom { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .salle__in, main, .tomber__in, .tomber__avis { padding-left: 16px; padding-right: 16px; }
  .fronton__nom { font-size: 40px; }
  .acte { font-size: 20px; }
  .programme { padding: 20px 16px 16px; }
  .ligne-acte { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .billet { grid-template-columns: 96px minmax(0, 1fr); }
  .billet__img img { width: 96px; min-height: 96px; }
  .billet__t { font-size: 19px; }
  .souche { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; border-left: 0; border-top: 2px dashed var(--or); }
  .affichettes { grid-template-columns: minmax(0, 1fr); }
  .feuillet { padding: 24px 16px; margin-top: 22px; }
  .tomber__in { grid-template-columns: minmax(0, 1fr); }
}