/* ---------------------------------------------------------------------------
   Societe Marseillaise des Amis de Chopin
   Feuille de styles unique, versionnee par son nom (voir CLAUDE.md, section 6).
   Toute modification impose de renommer ce fichier (styles.v2.css) et de mettre
   a jour les references dans le HTML.
   --------------------------------------------------------------------------- */

/* Polices auto-hebergees, sous-ensembles latin et latin-ext (les programmes
   contiennent des noms polonais, tcheques et hongrois : Genius̊as, Dvor̊ák,
   Kodály). Aucun appel a un service externe : le contrat d'integration
   l'interdit (RGPD). Licence SIL Open Font License. */
@font-face { font-family: "Cormorant Garamond"; src: url("/polices/cormorant-garamond-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("/polices/cormorant-garamond-300-latin-ext.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; src: url("/polices/cormorant-garamond-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("/polices/cormorant-garamond-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; src: url("/polices/cormorant-garamond-400-italique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("/polices/cormorant-garamond-400-italique-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("/polices/archivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("/polices/archivo-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("/polices/archivo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("/polices/archivo-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --encre: #100F0D;
  --encre-panneau: #15130F;
  --encre-carte: #171512;
  --trait: #23211C;
  --trait-carte: #2A2823;
  --texte: #EDE7DA;
  --texte-doux: #B3AB9A;
  --texte-discret: #9A9282;
  --nav: #C8C1B2;
  --laiton: #C7A15C;
  --laiton-clair: #E3C48C;
  --bouton-trait: #6B6455;
  --titre: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --courant: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --etiquette: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --marge: clamp(1.25rem, 4vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--encre); color: var(--texte); font-family: var(--courant); font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--laiton); text-decoration: none; }
a:hover, a:focus-visible { color: var(--laiton-clair); }
:focus-visible { outline: 2px solid var(--laiton-clair); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 300; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }

.lien-evitement { position: absolute; left: -9999px; top: 0; background: var(--laiton); color: var(--encre); padding: 0.75rem 1.25rem; z-index: 100; }
.lien-evitement:focus { left: 0; }

.etiquette { font-family: var(--etiquette); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--laiton); margin: 0; }

.bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 1rem; padding: 0.7rem var(--marge); background: var(--laiton); color: var(--encre); font-size: 0.85rem; text-align: center; }
.bandeau strong { font-weight: 600; }
.bandeau a { color: var(--encre); border-bottom: 1px solid rgba(16,15,13,0.45); }
.bandeau a:hover { color: var(--encre); border-bottom-color: var(--encre); }

.entete { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem var(--marge); border-bottom: 1px solid var(--trait); position: sticky; top: 0; background: var(--encre); z-index: 20; }
.entete__logo img { height: 3.25rem; width: auto; max-width: none; object-fit: contain; filter: invert(1); mix-blend-mode: screen; }
.entete__nav { display: flex; flex-wrap: wrap; gap: 1.75rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.entete__nav a { color: var(--nav); }
.entete__nav a:hover, .entete__nav a:focus-visible { color: var(--texte); }
.entete__nav a[aria-current="page"] { color: var(--laiton); }

.bouton, .bouton--secondaire { display: inline-block; padding: 0.95rem 1.75rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; min-height: 44px; }
.bouton { background: var(--laiton); color: var(--encre); font-weight: 600; }
.bouton:hover, .bouton:focus-visible { background: var(--laiton-clair); color: var(--encre); }
.bouton--secondaire { border: 1px solid var(--bouton-trait); color: var(--texte); }
.bouton--secondaire:hover, .bouton--secondaire:focus-visible { border-color: var(--laiton); color: var(--texte); }
.boutons { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.hero { position: relative; min-height: min(42rem, 82vh); display: flex; align-items: flex-end; overflow: hidden; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.hero__image--couleur { filter: none; object-position: 55% 45%; }
.hero__voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,15,13,0.97) 16%, rgba(16,15,13,0.35) 72%); }
.hero::after { content: ""; position: absolute; right: var(--marge); bottom: 8%; height: 76%; aspect-ratio: 900 / 1156; background: url("images/monogramme-smac.png") center / contain no-repeat; opacity: 0.16; pointer-events: none; }
.hero__texte { position: relative; padding: 4rem var(--marge) 3.5rem; display: flex; flex-direction: column; gap: 1.35rem; max-width: 60rem; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: 0.95; }
.hero h1 em { color: var(--laiton); font-style: italic; }

.prochain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; padding: 1.35rem var(--marge); border-bottom: 1px solid var(--trait); background: var(--encre-panneau); }
.prochain__titre { font-family: var(--titre); font-size: clamp(1.3rem, 2.4vw, 1.75rem); flex: 1 1 20rem; }

.section { padding: clamp(3rem, 6vw, 5rem) var(--marge); }
.section--filet { border-top: 1px solid var(--trait); }
.section__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.section__tete h2 { font-size: clamp(1.9rem, 4vw, 3.5rem); line-height: 1.02; max-width: 42rem; }
.section__tete .etiquette { margin-bottom: 0.6rem; }

.concerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.875rem; list-style: none; margin: 0; padding: 0; }
.concert { display: flex; flex-direction: column; background: var(--encre-carte); border: 1px solid var(--trait-carte); }
.concert:hover { border-color: var(--laiton); }
.concert__image { width: 100%; height: 15.5rem; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.concert__corps { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.concert__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.concert__heure { font-family: var(--etiquette); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--texte-discret); }
.concert h3 { font-family: var(--titre); font-weight: 400; font-size: 1.85rem; line-height: 1.1; }
.concert__programme { font-size: 0.85rem; line-height: 1.6; color: var(--texte-doux); }
.concert__lien { margin-top: auto; padding-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); border-top: 1px solid var(--trait); }
.duo__texte { padding: clamp(2.75rem, 5vw, 4.5rem) var(--marge); display: flex; flex-direction: column; gap: 1.1rem; justify-content: center; }
.duo__texte h2 { font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.02; }
.duo__texte p { color: var(--texte-doux); max-width: 34rem; }
.duo__texte--panneau { background: var(--encre-panneau); }
.duo__image { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.lien-souligne { align-self: flex-start; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--laiton); padding-bottom: 3px; margin-top: 0.4rem; }

.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.875rem; list-style: none; margin: 0; padding: 0; }
.infos li { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--trait-carte); padding-top: 1.35rem; }
.infos h3 { font-family: var(--titre); font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.infos p { font-size: 0.9rem; color: var(--texte-doux); }
.texte-doux { color: var(--texte-doux); max-width: 34rem; }

.pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2.5rem; padding: clamp(2.75rem, 5vw, 4rem) var(--marge); border-top: 1px solid var(--trait); font-size: 0.85rem; color: var(--texte-discret); }
.pied img { height: 3rem; width: auto; max-width: none; object-fit: contain; filter: invert(1); mix-blend-mode: screen; }
.pied h2 { font-family: var(--courant); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte); margin-bottom: 0.75rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.pied a { color: var(--texte-discret); }
.pied a:hover, .pied a:focus-visible { color: var(--laiton-clair); }
.pied__identite { display: flex; flex-direction: column; gap: 0.9rem; }
.pied__identite p { max-width: 22rem; line-height: 1.7; }

@media (max-width: 60rem) {
  .entete { flex-wrap: wrap; row-gap: 1rem; }
  .entete__nav { order: 3; width: 100%; gap: 1rem 1.25rem; justify-content: flex-start; }
}
@media (max-width: 34rem) {
  .concert__image { height: 13rem; }
  .bouton, .bouton--secondaire { width: 100%; text-align: center; }
}

/* --- Pages interieures --------------------------------------------------- */

.page-tete { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 4.75rem) var(--marge) clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 1rem; }
.page-tete::after { content: ""; position: absolute; right: var(--marge); top: 50%; transform: translateY(-50%); height: 82%; aspect-ratio: 900 / 1156; background: url("images/monogramme-smac.png") center / contain no-repeat; opacity: 0.09; pointer-events: none; }
.page-tete > * { position: relative; }
@media (max-width: 46rem) { .page-tete::after { display: none; } .hero::after { opacity: 0.12; height: 46%; } }
.page-tete h1 { font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: 0.98; }
.chapo { color: var(--texte-doux); max-width: 44rem; }
.prose { display: flex; flex-direction: column; gap: 1.1rem; color: var(--texte-doux); }
.prose--etroite { max-width: 44rem; }
.prose h2 { font-size: 1.7rem; color: var(--texte); margin-top: 1rem; }
.programme { color: var(--texte-doux); line-height: 2; }
.courriel { font-family: var(--titre); font-size: clamp(1.5rem, 3vw, 2.1rem); }

.lien-reserver { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

.encart { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--trait-carte); }
.encart p:last-child { color: var(--texte-doux); flex: 1 1 24rem; font-size: 0.9rem; }

.portraits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
.portraits li { display: flex; flex-direction: column; gap: 0.6rem; }
.portraits img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.portraits h2 { font-family: var(--titre); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.portraits__attente { width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--trait-carte); background: var(--encre-carte); display: flex; align-items: flex-end; padding: 1rem; }
.portraits__attente span { font-family: var(--etiquette); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-discret); }
.noms { list-style: none; margin: 0; padding: 0; columns: 4 14rem; column-gap: 2.5rem; font-size: 0.9rem; color: var(--texte-doux); }
.noms li { break-inside: avoid; padding: 0.4rem 0; border-bottom: 1px solid var(--trait); }

.archive { padding-bottom: 3rem; }
.archive + .archive { border-top: 1px solid var(--trait); padding-top: 3rem; }
.archive__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; }
.archive__tete h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.archive__tete p { color: var(--texte-discret); font-size: 0.9rem; }
.archive__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 0 3.5rem; }
.archive__liste li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.25rem; padding: 0.875rem 0; border-bottom: 1px solid var(--trait); }
.archive__liste h3 { font-family: var(--titre); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.archive__liste li p:last-child { font-size: 0.85rem; color: var(--texte-discret); }

.cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.carte__prix { white-space: nowrap; }
@media (max-width: 60rem) { .cartes { grid-template-columns: repeat(2, 1fr); } }
.carte { border: 1px solid var(--trait-carte); background: var(--encre-carte); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.carte:hover { border-color: var(--laiton); }
.carte h3 { font-family: var(--titre); font-weight: 400; font-size: 1.8rem; line-height: 1.15; }
.carte__prix { font-family: var(--titre); font-size: 2.8rem; line-height: 1; }
.carte p:not(.etiquette):not(.carte__prix) { font-size: 0.9rem; color: var(--texte-doux); }
.carte .lien-reserver { margin-top: auto; padding-top: 0.75rem; }

.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 3.5rem; }
.deux-colonnes h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 0.98; margin-bottom: 1.25rem; }
.deux-colonnes h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 0.75rem; }
.reperes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.35rem; }
.reperes li { border-top: 1px solid var(--trait-carte); padding-top: 1.1rem; }
.reperes strong { font-family: var(--titre); font-weight: 400; font-size: 2.6rem; line-height: 1; }
.reperes li p:last-child { font-size: 0.85rem; color: var(--texte-discret); }

.citation { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.citation p { font-family: var(--titre); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-style: italic; line-height: 1.5; color: var(--texte); }
.citation p::before { content: '\00AB\00A0'; }
.citation p::after { content: '\00A0\00BB'; }
.citation footer { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--laiton); }

.citation--fine p { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.citation--fine { border-left: 1px solid var(--laiton); padding-left: 1.25rem; }
.pratique { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.5rem; font-size: 0.9rem; }
.pratique dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte); padding-top: 0.15rem; }
.pratique dd { margin: 0; color: var(--texte-doux); }
.portrait-nom { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; align-items: start; }
.portrait-nom--droite { grid-template-columns: minmax(0, 1fr) 16rem; }
@media (max-width: 60rem) { .portrait-nom--droite > img { order: -1; } }
.portrait-nom > img { width: 16rem; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.portrait-nom .prose { max-width: 46rem; }
.photo-moyenne { margin: 1.5rem auto 2rem; max-width: 34rem; }
.photo-moyenne img { width: 100%; filter: grayscale(1) contrast(1.05); }
.prose--large { max-width: 52rem; display: flex; flex-direction: column; gap: 1rem; }
.carte ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.9rem; line-height: 1.5; color: var(--texte-doux); }
.carte__note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--texte-discret); }
.palmares { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.palmares li { display: flex; flex-direction: column; font-family: var(--titre); font-size: 1.5rem; line-height: 1.2; }
.palmares span { font-family: var(--etiquette); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--laiton); margin-bottom: 0.2rem; }
.portrait-nom h2 { margin-bottom: 0.75rem; }
@media (max-width: 60rem) { .portrait-nom { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.dates-libres { list-style: none; margin: 0.25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.dates-libres li { font-family: var(--etiquette); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--laiton); border: 1px solid var(--trait-carte); padding: 0.45rem 0.75rem; }
.partenaires { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; color: var(--texte-doux); font-size: 0.9rem; }

.duo__texte--laiton { background: var(--laiton); color: var(--encre); }
.duo__texte--laiton p, .duo__texte--laiton .etiquette { color: var(--encre); }
.bouton--encre { background: var(--encre); color: var(--texte); }
.bouton--encre:hover, .bouton--encre:focus-visible { background: var(--encre-panneau); color: var(--texte); }



/* --- Saison en presentation typographique -------------------------------- */

.evenements { list-style: none; margin: 0; padding: 0; }
.evenement { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr) max-content; gap: 1.5rem 3rem; padding: 2.5rem 0; border-bottom: 1px solid var(--trait); }
.evenement:first-child { padding-top: 0.5rem; }
.evenement__tete { display: flex; flex-direction: column; gap: 0.5rem; }
.evenement__tete h2 { font-family: var(--titre); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.08; overflow-wrap: break-word; hyphens: auto; }
.evenement__portrait { width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); margin-top: 0.35rem; }
.evenement__portraits { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; max-width: 20rem; }
.evenement__portraits img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.evenement__portraits p { margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.35; color: var(--texte-doux); display: flex; flex-direction: column; }
.evenement__portraits span { font-family: var(--etiquette); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-discret); }

.bio-artiste { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--trait); }
.bio-artiste img { width: 9rem; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.bio-artiste h3 { font-family: var(--titre); font-weight: 400; font-size: 1.9rem; line-height: 1.1; margin-bottom: 0.75rem; }
.bio-artiste .citation--fine { margin-bottom: 1rem; }
.bio-artiste .citation--fine p { font-size: 1rem; }
.evenement__lieu { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-discret); }
.evenement > .lien-reserver { align-self: start; padding-top: 0.4rem; }

.seances { display: flex; flex-direction: column; gap: 1.75rem; }
.seance { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; }
.seance__heure { font-family: var(--etiquette); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--laiton); padding-top: 0.2rem; }
.seance h3 { font-family: var(--titre); font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.5rem; }
.oeuvres { list-style: none; margin: 0; padding: 0; color: var(--texte-doux); font-size: 0.95rem; line-height: 1.65; }
.oeuvres__entracte { color: var(--laiton); letter-spacing: 0.3em; font-size: 0.7rem; padding: 0.35rem 0; }
.interpretes { margin-top: 0.6rem; font-size: 0.85rem; color: var(--texte-discret); }

.apercu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: 0 3.5rem; }
.apercu li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.25rem; padding: 1.35rem 0; border-bottom: 1px solid var(--trait); }
.apercu h3 { font-family: var(--titre); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.apercu li p:not(.etiquette) { font-size: 0.9rem; color: var(--texte-doux); margin-top: 0.3rem; }
.apercu__detail { font-size: 0.8rem; color: var(--texte-discret); letter-spacing: 0.04em; }

@media (max-width: 84rem) {
  .portraits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 72rem) {
  .evenement { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .seance { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .apercu li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .bio-artiste { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .archive__liste li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

/* --- Fenetre de biographie, sans JavaScript (ouverture par :target) ------- */

.bio-appel { margin-top: 0.9rem; }
.bouton--bio { display: inline-block; border: 1px solid var(--bouton-trait); color: var(--texte); padding: 0.6rem 1.1rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; min-height: 44px; line-height: 1.9; }
.bouton--bio:hover, .bouton--bio:focus-visible { border-color: var(--laiton); color: var(--texte); }

.fenetre { display: none; }
.fenetre:target { display: block; position: fixed; inset: 0; z-index: 60; }
.fenetre__fond { position: absolute; inset: 0; background: rgba(10, 9, 8, 0.86); }
.fenetre__panneau { position: relative; margin: 4vh auto; width: min(46rem, calc(100% - 2.5rem)); max-height: 92vh; overflow-y: auto; background: var(--encre-panneau); border: 1px solid var(--trait-carte); padding: 0 clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; }
.fenetre__portrait { width: 100%; height: clamp(14rem, 34vh, 22rem); object-fit: cover; object-position: 50% 34%; filter: grayscale(1) contrast(1.05); }
.fenetre__panneau h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; }
.fenetre__fermer { order: -1; flex: none; position: sticky; top: 0; z-index: 2; margin: 0 clamp(-3rem, -4vw, -1.75rem); padding: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem) 1rem; background: var(--encre-panneau); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: right; min-height: 44px; }
.fenetre__fermer span { display: inline-block; border: 1px solid var(--trait-carte); padding: 0.55rem 1rem; min-height: 44px; line-height: 1.9; }
.fenetre__fermer:hover span, .fenetre__fermer:focus-visible span { border-color: var(--laiton); }

.seance__tarif { margin-top: 0.5rem; font-family: var(--etiquette); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--laiton); }

.mosaique { display: grid; grid-template-columns: repeat(3, 8.5rem); gap: 0.5rem; align-content: center; justify-content: center; padding: clamp(1.5rem, 4vw, 2.5rem); }
.mosaique img { width: 8.5rem; height: 8.5rem; object-fit: cover; object-position: 50% 22%; display: block; filter: grayscale(1) contrast(1.05); }
@media (max-width: 34rem) { .mosaique { grid-template-columns: repeat(3, 6rem); } .mosaique img { width: 6rem; height: 6rem; } }

.mecenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.mecenes li { border: 1px solid var(--trait-carte); background: var(--encre-carte); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; min-height: 9.5rem; }
.mecenes img { width: auto; max-width: 10rem; max-height: 3.25rem; height: auto; display: block; }
.mecenes img.mecenes__haut { max-height: 5rem; max-width: 6.5rem; }
.mecenes li p { font-family: var(--etiquette); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }

.note-tarif { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--trait); font-size: 0.85rem; color: var(--texte-doux); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.note-tarif span { font-family: var(--etiquette); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--laiton); }

#rdv-11-13-decembre .evenement__portrait { object-position: 62% 45%; }

.evenement--partenaire { border-left: 2px solid var(--laiton); padding-left: clamp(1rem, 2vw, 1.75rem); background: #1F1C17; }
.evenement--partenaire .etiquette { color: var(--laiton-clair); }
#rdv-16-octobre .evenement__tete { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1.75rem; }
#rdv-16-octobre .evenement__tete .etiquette { flex-basis: 100%; }
#rdv-16-octobre .evenement__tete h2 { flex: 1 1 20rem; }
.evenement__logo { width: 6rem; height: auto; align-self: center; opacity: 0.9; }
@media (max-width: 46rem) { #rdv-16-octobre .evenement__tete { flex-direction: column; align-items: flex-start; } }
.partenaire__texte { color: var(--texte-doux); max-width: 42rem; font-size: 0.95rem; line-height: 1.65; }

.jury { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem 2.5rem; margin-top: 2rem; }
.jury li { border-top: 1px solid var(--trait); padding-top: 1rem; font-family: var(--titre); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.15; color: var(--texte); }
.jury li span { display: block; font-family: var(--etiquette); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--laiton); margin-bottom: 0.45rem; }

.duo__image--portrait { max-height: 26rem; width: auto; max-width: 100%; height: auto; align-self: center; justify-self: center; margin: 0 auto; }

.evenement { scroll-margin-top: 7.5rem; }
.apercu li { position: relative; }
.apercu__lien { position: absolute; inset: 0; z-index: 1; border: 0; }
.apercu li:hover h3 { color: var(--laiton-clair); }
.apercu li:focus-within { outline: 1px solid var(--laiton); outline-offset: 0.5rem; }

.credit { font-family: var(--etiquette); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-discret); margin-top: 0.4rem; }
.duo__figure { margin: 0; display: flex; flex-direction: column; }
.duo__figure .duo__image { flex: 1 1 auto; min-height: 0; }
.duo__figure .credit { padding: 0.5rem var(--marge) 0 0; }
.duo__figure:has(.duo__image--portrait) { align-items: center; }
.duo__figure:has(.duo__image--portrait) .credit { padding: 0.6rem 0 0; text-align: center; }
.duo__figure .duo__image--portrait { flex: 0 1 auto; }
.duo__image--credit { display: block; }

.credit--portrait { width: 100%; max-width: 20rem; text-align: center; align-self: flex-start; margin-top: 0.4rem; }
.evenement__portraits .credit { margin-top: 0.25rem; }

.entete__actions { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.langues { display: flex; align-items: center; gap: 0.5rem; font-family: var(--etiquette); font-size: 0.68rem; letter-spacing: 0.14em; }
.langues span, .langues a { padding-bottom: 0.15rem; border-bottom: 1px solid transparent; }
.langues span { color: var(--laiton-clair); border-bottom-color: var(--laiton); }
.langues a { color: var(--texte-discret); }
.langues a:hover { color: var(--encre); border-bottom-color: var(--trait); }
.langues > * + *::before { content: "/"; margin-right: 0.5rem; color: var(--trait); border: 0; }
@media (max-width: 46rem) { .entete__actions { gap: 0.9rem; } }

.evenement__duo { width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); margin-top: 0.35rem; display: block; }

.fenetre__titre { font-family: var(--titre); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05; margin-bottom: 0.5rem; }
.fenetre__panneau .bio-artiste { grid-template-columns: 9rem minmax(0, 1fr); }
.fenetre__panneau .bio-artiste .etiquette { margin: -0.45rem 0 0.9rem; }
@media (max-width: 40rem) { .fenetre__panneau .bio-artiste { grid-template-columns: minmax(0, 1fr); } }

#rdv-2-juillet .evenement__portraits { max-width: 32rem; gap: 1rem; }
#rdv-2-juillet .evenement__portraits img { aspect-ratio: 3 / 5; }
@media (min-width: 72.01rem) { #rdv-2-juillet .evenement__portraits img { aspect-ratio: 4 / 5; } }
@media (max-width: 34rem) { #rdv-2-juillet .evenement__portraits { max-width: 20rem; } }

.seance__portraits { list-style: none; margin: 1.1rem 0 0.25rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; max-width: 34rem; }
.seance__portraits img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; }
.seance__portraits p { margin-top: 0.4rem; font-size: 0.76rem; line-height: 1.35; color: var(--texte-doux); display: flex; flex-direction: column; }
.seance__portraits span { font-family: var(--etiquette); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-discret); }
@media (max-width: 40rem) { .seance__portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; } }