/* Carnelle Blues — « du bleu pour du blues » (charte, page 3).
   Une seule famille de bleus, un papier presque blanc, une encre sombre.
   Fraunces 900 pour les titres (axe optique 9, WONK), Inter pour le reste.
   Toutes les photos sont en bichromie bleu nuit, fabriquées en amont (scripts/images.mjs). */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --nuit: #0E1B33;        /* fond de tous les supports sombres */
  --nuit-clair: #192D57;  /* un seul usage : le signe en motif de fond */
  --electrique: #1F5FD6;  /* accents sur fond clair */
  --ciel: #7FA8FF;        /* accents sur fond nuit */
  --pale: #CDDAF5;        /* texte secondaire sur fond nuit */
  --papier: #F7F8FA;      /* fond clair, texte sur nuit */
  --encre: #141A26;       /* texte courant sur fond clair, QR codes */
  --gris: #3A4458;        /* chapôs sur fond clair */
  --ligne: #D5DAE3;
  --ligne-nuit: rgba(127, 168, 255, 0.28);
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "Inter", system-ui, Arial, sans-serif;
  --mesure: 64ch;
  --marge: clamp(1rem, 4vw, 2.5rem);
  --largeur: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nuit); color: var(--papier); font: 400 1.0625rem/1.55 var(--texte); font-feature-settings: "ss01"; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--ciel); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--papier); }
:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; line-height: 1.08; margin: 0 0 0.45em; text-wrap: balance; letter-spacing: -0.005em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--ciel); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
sup { font-size: 0.65em; line-height: 0; }
strong { font-weight: 700; }
.kicker { font-size: 0.8rem; font-weight: 600; color: var(--ciel); margin: 0 0 0.6rem; letter-spacing: 0.01em; }
.chapo { font-size: clamp(1.1rem, 1.8vw, 1.25rem); line-height: 1.5; color: var(--pale); max-width: var(--mesure); text-wrap: pretty; }
.credit { font-size: 0.78rem; color: var(--pale); opacity: 0.85; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 0; background: var(--ciel); color: var(--nuit); padding: 0.6rem 1rem; z-index: 10; font-weight: 600; }
.evitement:focus { left: 0.5rem; top: 0.5rem; }

/* Logo : une image unique (scripts/logo.mjs), seule la largeur change */
.logo { display: inline-block; line-height: 0; }
.logo__img { height: auto; display: block; }
.logo--entete .logo__img { height: 2.3rem; width: auto; }
.logo--pied .logo__img { height: 2.1rem; width: auto; margin-bottom: 0.8rem; }
.logo--hero .logo__img { width: min(100%, 34rem); }
@media (max-width: 480px) { .logo--entete .logo__img { height: 1.9rem; } }

/* En-tête */
.entete { background: var(--nuit); border-bottom: 1px solid var(--ligne-nuit); position: relative; z-index: 5; }
.entete__barre { max-width: var(--largeur); margin: 0 auto; padding: 0.8rem var(--marge); display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.marque { line-height: 0; margin-right: auto; }
.entete__date { margin: 0; font-size: 0.85rem; color: var(--pale); font-weight: 500; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.3rem 1.3rem; flex-wrap: wrap; align-items: center; }
.menu a:not(.bouton) { text-decoration: none; font-weight: 500; color: var(--papier); padding: 0.3rem 0; border-bottom: 2px solid transparent; font-size: 0.95rem; }
.menu a:not(.bouton):hover { border-bottom-color: var(--ciel); }
.menu a:not(.bouton)[aria-current="page"] { border-bottom-color: var(--ciel); color: var(--ciel); }
.menu__billetterie .bouton { padding: 0.5rem 1rem; font-size: 0.95rem; }
.menu-bouton { display: none; font: 600 1rem var(--texte); background: none; color: var(--papier); border: 2px solid var(--ciel); border-radius: 4px; padding: 0.45rem 0.9rem; cursor: pointer; }
@media (max-width: 900px) {
  .entete__date { display: none; }
  .js .menu-bouton { display: block; }
  .js .menu { display: none; width: 100%; }
  .js .menu.menu--ouvert { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; padding: 0.4rem 0 0.8rem; gap: 0; }
  .menu a:not(.bouton) { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--ligne-nuit); }
  .menu__billetterie { padding-top: 0.8rem; }
  .menu__billetterie .bouton { display: block; text-align: center; }
}

/* Boutons et liens */
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin: 1.4rem 0 0; }
.bouton { display: inline-block; text-decoration: none; font-weight: 600; padding: 0.8rem 1.3rem; border-radius: 4px; line-height: 1.2; border: 2px solid var(--ciel); background: var(--ciel); color: var(--nuit); }
.bouton:hover { background: var(--papier); border-color: var(--papier); color: var(--nuit); }
.bouton--contour { background: transparent; color: var(--papier); border-color: var(--pale); }
.bouton--contour:hover { background: var(--papier); color: var(--nuit); }
.bloc--papier .bouton--contour { color: var(--encre); border-color: var(--encre); }
.bloc--papier .bouton--contour:hover { background: var(--encre); color: var(--papier); }
.lien-fleche { font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; }
.lien-fleche::after { content: " →"; }
.lien-fleche:hover { color: var(--papier); }
.bloc--papier .lien-fleche, .bloc--papier a { color: var(--electrique); }
.bloc--papier .lien-fleche:hover, .bloc--papier a:hover { color: var(--encre); }

/* Blocs */
.bloc { max-width: var(--largeur); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--marge); }
.bloc--etroit { padding-top: 0; padding-bottom: 0; }
.bloc__titre { margin-bottom: 0.8em; }
.bloc--papier { max-width: none; background: var(--papier); color: var(--encre); }
.bloc--papier > * { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.bloc--papier .kicker { color: var(--electrique); }
.bloc--papier .chapo { color: var(--gris); }
.bloc--papier h2 em, .bloc--papier h3 em { color: var(--electrique); }
.bloc--papier .credit { color: var(--gris); }

/* L'affiche d'accueil */
.hero { max-width: var(--largeur); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0 clamp(1.5rem, 4vw, 3.5rem); padding: 0 var(--marge); }
.hero__photo { position: relative; margin: 0 calc(-1 * var(--marge)); line-height: 0; }
.hero__img { width: 100%; display: block; mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.hero__credit { position: absolute; left: var(--marge); bottom: 0.5rem; margin: 0; line-height: 1.3; }
.hero__texte { padding: 0 0 clamp(2rem, 5vw, 4rem); }
.hero__titre { margin: 0 0 0.6rem; line-height: 1; }
.hero__date { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 0.3em; }
.hero__accroche { font-family: var(--titre); font-style: italic; font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; color: var(--ciel); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.25; margin: 0 0 1.4rem; max-width: 24ch; }
.affiche { list-style: none; margin: 0; padding: 1.2rem 0 0; border-top: 1px solid var(--ligne-nuit); display: flex; flex-direction: column; gap: 0.9rem; }
.affiche__ligne { display: flex; flex-direction: column; gap: 0.15rem; }
.affiche__nom { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; color: var(--papier); text-decoration: none; line-height: 1.05; }
.affiche__nom:hover { color: var(--ciel); }
.affiche__ligne--1 .affiche__nom { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.affiche__ligne--2 .affiche__nom { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.affiche__ligne--3 .affiche__nom { font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
.affiche__detail { font-size: 0.9rem; font-weight: 600; color: var(--ciel); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding-top: clamp(1.5rem, 3vw, 3rem); }
  .hero__photo { margin: 0; order: 2; }
  .hero__img { mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, #000 80%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-composite: intersect; -webkit-mask-composite: source-in; }
  .hero__credit { left: auto; right: 0; bottom: -1.4rem; }
  .hero__texte { padding: 1rem 0 3rem; }
}

/* La journée en trois temps */
.temps { background: var(--nuit); border-top: 1px solid var(--ligne-nuit); border-bottom: 1px solid var(--ligne-nuit); position: relative; overflow: hidden; }
.temps::before { content: ""; position: absolute; inset: auto -12% -6% -12%; height: 70%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 111' fill='%23192D57' preserveAspectRatio='none'%3E%3Crect x='2.5' y='66' width='5' height='38' rx='2.5'/%3E%3Crect x='13.5' y='44' width='5' height='60' rx='2.5'/%3E%3Crect x='24.5' y='26' width='5' height='78' rx='2.5'/%3E%3Crect x='35.5' y='30' width='5' height='74' rx='2.5'/%3E%3Crect x='46.5' y='50' width='5' height='54' rx='2.5'/%3E%3Crect x='57.5' y='66' width='5' height='38' rx='2.5'/%3E%3Crect x='68.5' y='68' width='5' height='36' rx='2.5'/%3E%3Crect x='79.5' y='54' width='5' height='50' rx='2.5'/%3E%3Crect x='90.5' y='46' width='5' height='58' rx='2.5'/%3E%3Crect x='101.5' y='58' width='5' height='46' rx='2.5'/%3E%3Crect x='112.5' y='78' width='5' height='26' rx='2.5'/%3E%3Crect x='2.5' y='108' width='115' height='3' rx='1.5'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; opacity: 0.9; pointer-events: none; }
.temps__grille { position: relative; list-style: none; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--marge); max-width: var(--largeur); display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.temps__bloc { border-top: 2px solid var(--ciel); padding-top: 1rem; }
.temps__sous { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; font-size: 1.35rem; margin: 0 0 0.4rem; line-height: 1.15; }
.temps__texte { color: var(--pale); margin-bottom: 0.8rem; }

/* Chiffres */
.chiffres { max-width: var(--largeur); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--marge) 0; }
.chiffres__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.chiffres__liste li { display: flex; flex-direction: column; gap: 0.2rem; }
.chiffres__nombre { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--ciel); }
.chiffres__texte { color: var(--pale); font-size: 0.95rem; }

/* Cartes artistes */
.cartes { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.carte__photo { display: block; line-height: 0; margin-bottom: 1rem; }
.carte__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 25%; display: block; }
.carte__titre { font-size: 1.6rem; margin-bottom: 0.3em; }
.carte__titre a { color: inherit; text-decoration: none; }
.carte__titre a:hover { color: var(--ciel); }
.carte__texte { color: var(--pale); text-wrap: pretty; }
.carte__pied { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }

/* Tuiles (masterclass, conférence, expositions, presse) */
.tuiles { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin: 1.5rem 0 0; }
.tuile { background: #FFFFFF; border: 1px solid var(--ligne); padding: 1.4rem 1.5rem; color: var(--encre); display: flex; flex-direction: column; gap: 0.5rem; }
.tuile > * { margin: 0; }
.tuile ul { padding-left: 1.1em; display: flex; flex-direction: column; gap: 0.4rem; }
.tuile a:not(.bouton) { color: var(--electrique); }
.tuile a:not(.bouton):hover { color: var(--encre); }
.tuile__titre { font-size: 1.35rem; }
.tuile__cadre { border: 1px solid var(--ligne); padding: 0.55rem 0.8rem; font-size: 0.9rem; color: var(--gris); }
.tuile .lien-fleche { align-self: flex-start; margin-top: auto; }
.tuile--accent { border-top: 4px solid var(--electrique); }
.page .tuiles .tuile { color: var(--encre); }

/* Citation */
.citation__texte { margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); border-left: 4px solid var(--ciel); background: var(--nuit-clair); }
.citation__texte p { font-family: var(--titre); font-style: italic; font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--papier); margin-bottom: 0.8em; max-width: 40ch; text-wrap: pretty; }
.citation__auteur { color: var(--ciel); font-weight: 600; font-size: 0.9rem; }

/* Lieux */
.lieux { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.lieu__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 1rem; }
.lieu__titre { font-size: 1.6rem; margin-bottom: 0.3em; }
.lieu__adresse { color: var(--pale); font-weight: 500; }
.lieux-accueil .actions { justify-content: flex-start; }

/* Pages intérieures */
.page { max-width: var(--largeur); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--marge) clamp(3rem, 6vw, 5rem); }
.page__titre { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 18ch; }
.page__entete { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.texte { max-width: none; }
.texte > h2 { margin-top: 2rem; }
.texte > p, .texte > ul { max-width: var(--mesure); }
.texte > p a, .texte > ul a { color: var(--ciel); }
.annonce { background: var(--nuit-clair); border-left: 4px solid var(--ciel); padding: 1rem 1.2rem; max-width: var(--mesure); }

/* Programme heure par heure */
.horaires { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--ligne-nuit); }
.horaire { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: 1rem 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--ligne-nuit); }
.horaire__heure { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; font-size: 1.25rem; color: var(--ciel); margin: 0; line-height: 1.2; }
.horaire__titre { font-size: 1.35rem; margin-bottom: 0.2em; }
.horaire__titre a { color: inherit; text-decoration: none; }
.horaire__titre a:hover { color: var(--ciel); }
.horaire__lieu { font-weight: 600; font-size: 0.9rem; color: var(--ciel); margin-bottom: 0.3em; }
.horaire__detail { color: var(--pale); margin: 0; max-width: var(--mesure); }
@media (max-width: 560px) { .horaire { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }

/* Encarts (accès, tarifs, billetterie) */
.encart { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); background: var(--nuit-clair); padding: clamp(1.4rem, 4vw, 2.2rem); margin: 2rem 0 0; }
.encart > div > *:last-child { margin-bottom: 0; }
.encart p { color: var(--pale); }
.encart__titre { font-size: 1.3rem; margin-bottom: 0.4em; }
.encart .bouton { margin-top: 0.4rem; }

/* Tableau */
.tableau { border-collapse: collapse; width: 100%; margin: 0 0 1.5rem; font-size: 0.95rem; }
.tableau th, .tableau td { text-align: left; padding: 0.7rem 0.8rem 0.7rem 0; border-bottom: 1px solid var(--ligne-nuit); vertical-align: top; }
.tableau th { color: var(--ciel); font-weight: 600; }
@media (max-width: 640px) { .tableau { display: block; overflow-x: auto; } }

/* Fiche artiste */
.fiche { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge) clamp(2rem, 5vw, 4rem); }
.fiche__entete { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3.5rem); }
.fiche__photo { margin: 0 calc(-1 * var(--marge)); line-height: 0; }
.fiche__img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.fiche__credit { margin: 0.5rem var(--marge) 0; line-height: 1.3; }
.fiche__titre { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 14ch; margin-bottom: 0.2em; }
.fiche__ligne { font-weight: 600; color: var(--ciel); margin-bottom: 1rem; }
@media (min-width: 900px) {
  .fiche__entete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fiche__photo { margin: 0; }
  .fiche__credit { margin-left: 0; }
}
.fiche__colonnes { display: grid; gap: 2rem clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.fiche__colonnes p { color: var(--pale); max-width: var(--mesure); text-wrap: pretty; }
.rendez-vous { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne-nuit); }
.rendez-vous__ligne { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--ligne-nuit); }
.rendez-vous__heure { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; color: var(--ciel); margin: 0; font-size: 1.1rem; }
.rendez-vous__titre { font-size: 1.15rem; margin-bottom: 0.2em; }
.rendez-vous__titre a { color: inherit; text-decoration: none; }
.rendez-vous__titre a:hover { color: var(--ciel); }
.rendez-vous__texte { margin: 0; }
.galerie { padding-top: clamp(2rem, 5vw, 3.5rem); }
.galerie__grille { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.galerie__figure { margin: 0; }
.galerie__img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.galerie__legende { font-size: 0.85rem; color: var(--pale); margin: 0.5rem 0 0; }
.figure-large { margin: 0 0 2rem; }
.figure-large__img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.fiche__suite { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); border-top: 1px solid var(--ligne-nuit); padding-top: 1.5rem; margin-top: 1rem; }
.fiche__autre { text-decoration: none; display: flex; flex-direction: column; gap: 0.2rem; }
.fiche__autre .kicker { margin: 0; }
.fiche__autre-nom { font-family: var(--titre); font-weight: 900; font-variation-settings: "opsz" 9, "WONK" 1, "SOFT" 0; font-size: 1.4rem; color: var(--papier); }
.fiche__autre:hover .fiche__autre-nom { color: var(--ciel); }

/* Vidéos : vignette locale, lecteur chargé après le clic */
.videos__grille { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.video { margin: 0; }
.video__bouton { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: var(--nuit-clair); border: 1px solid var(--ligne-nuit); color: var(--papier); cursor: pointer; font: inherit; padding: 1rem; gap: 0.6rem; }
.video__bouton:hover { border-color: var(--ciel); }
.video__lecture { width: 56px; height: 56px; border-radius: 50%; background: var(--ciel); position: relative; }
.video__lecture::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 18px solid var(--nuit); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video__titre { font-weight: 600; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video__legende { font-size: 0.8rem; color: var(--pale); margin-top: 0.4rem; }
.videos__attente { color: var(--pale); max-width: var(--mesure); }

/* Masterclass et conférence */
.fiche-atelier { display: grid; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--ligne-nuit); }
.fiche-atelier:first-child { border-top: 0; padding-top: 0; }
.fiche-atelier p { color: var(--pale); max-width: var(--mesure); text-wrap: pretty; }
.fiche-atelier p.kicker { color: var(--ciel); }
.fiche-atelier__img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; }
.fiche-atelier__photo .fiche__credit { margin-left: 0; }
@media (min-width: 900px) {
  .fiche-atelier { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .fiche-atelier--inverse .fiche-atelier__photo { order: 2; }
}

/* Billetterie */
.produits { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.produit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; background: var(--papier); color: var(--encre); padding: clamp(1.2rem, 3vw, 1.8rem); border-left: 4px solid var(--electrique); scroll-margin-top: 2rem; }
.produit p { margin: 0 0 0.5rem; }
.produit__titre { font-size: 1.5rem; margin-bottom: 0.3em; }
.produit__detail { color: var(--gris); max-width: var(--mesure); }
.produit__prix { font-size: 1.15rem; }
.produit__attente { font-weight: 600; color: var(--electrique); }
.produit .actions { margin-top: 0.8rem; }
.produit .bouton { background: var(--electrique); border-color: var(--electrique); color: #FFFFFF; }
.produit .bouton:hover { background: var(--encre); border-color: var(--encre); }
.produit__qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--gris); }
.produit__qr svg { background: #FFFFFF; border: 1px solid var(--ligne); display: block; }
@media (min-width: 700px) { .produit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.gratuit { max-width: var(--mesure); }
.qr-site { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ligne-nuit); }
.qr-site__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; justify-self: start; }
.qr-site__figure svg { background: #FFFFFF; padding: 0; display: block; }
.qr-site p { color: var(--pale); max-width: var(--mesure); }
@media (min-width: 700px) { .qr-site { grid-template-columns: auto minmax(0, 1fr); } }

/* Bandeau des partenaires : toujours clair, deux lignes */
.partenaires { background: #FFFFFF; color: var(--encre); border-top: 1px solid var(--ligne); }
.partenaires__interieur { max-width: var(--largeur); margin: 0 auto; padding: 1.5rem var(--marge) 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.partenaires__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.partenaires__ligne--soutiens { padding-bottom: 1.2rem; border-bottom: 1px solid var(--ligne); }
.partenaires__mention { margin: 0; font-size: 0.85rem; color: var(--gris); max-width: 32ch; line-height: 1.4; }
.partenaires__mention strong { color: var(--encre); }
.partenaires__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.partenaires__logos a { display: block; line-height: 0; }
.partenaires__logos img { height: 2.6rem; width: auto; }
.partenaires__logos--grands img { height: 4.4rem; }
.partenaires__logos--grands li:nth-child(2) img { height: 4.8rem; }
.pastille { display: inline-flex; align-items: center; justify-content: center; background: var(--nuit); padding: 0.4rem 0.7rem; border-radius: 3px; }
.pastille img { height: 2.4rem; width: auto; }

/* Pied */
.pied { border-top: 1px solid var(--ligne-nuit); background: var(--nuit); }
.pied__grille { max-width: var(--largeur); margin: 0 auto; padding: 2rem var(--marge) 2.5rem; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); font-size: 0.92rem; }
.pied__intertitre { font-weight: 600; color: var(--ciel); margin: 0 0 0.3rem; }
.pied__texte { color: var(--pale); margin: 0; line-height: 1.5; }
.pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }

/* Impression : la page Billetterie s'imprime en encre sur blanc, QR compris */
@media print {
  body { background: #FFFFFF; color: #000; font-size: 11pt; }
  .entete, .menu-bouton, .partenaires, .pied, .evitement, .actions, .video, .hero__photo { display: none !important; }
  a { color: #000; text-decoration: none; }
  .kicker, .chapo, .produit__detail, .produit__attente, .qr-site p, .gratuit, .credit { color: #000; }
  h1 em, h2 em { color: #000; }
  .produit { border-left-color: #000; background: #FFFFFF; break-inside: avoid; padding: 0.8rem 0; border-bottom: 1px solid #000; }
  .produit__qr svg { width: 38mm; height: 38mm; border: 0; }
  .qr-site { border-top: 0; margin-top: 1rem; }
  .qr-site__figure svg { width: 60mm; height: 60mm; }
  .qr-site__figure::after { content: "www.carnelleblues.fr/billetterie/"; }
  .encart, .annonce, .citation__texte { background: #FFFFFF; border: 1px solid #000; }
}