/*
Theme Name: Fred Louisor
Author: Fred Louisor
Description: Thème bloc sur mesure pour le site de Fred Louisor, artiste, écrivain et auteur-compositeur.
Version: 1.0.4
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fred-louisor
Tags: block-theme, full-site-editing, one-column
*/

:root {
  --rouge: #bb0105;
  --magenta: #ab019b;
  --violet: #9523eb;
  --bordeaux: #4b0119;
  --noir: #20070f;
  --fumee: #f6dccb;
  --titre: "Archivo", "Arial Narrow", sans-serif;
  --vers: "Spectral", Georgia, serif;
  --marge: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }

html { background: var(--noir); }

body {
  position: relative;
  margin: 0;
  background: var(--noir);
  color: var(--fumee);
  font-family: var(--titre);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.5;
  overflow-x: hidden;
  hyphens: none;
}

img, video { display: block; max-width: 100%; }

img { height: auto; } /* obligatoire : sinon l'attribut height des blocs image l'emporte sur aspect-ratio */

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--titre);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  text-wrap: balance;
}

h2 { font-size: clamp(64px, 11.5vw, 200px); }

/* Gutenberg applique margin-block-start entre frères : coupé dans theme.json
   (blockGap: "0px") et, en filet de sécurité, ici à spécificité nulle. */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }

figure.wp-block-image, figure.wp-block-video { margin: 0; }

/* En-tête */
.entete {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2vw, 28px) var(--marge);
}

.wp-block-site-logo.marque { display: block; line-height: 0; }

.wp-block-site-logo.marque img {
  width: auto;
  height: clamp(62px, 6.6vw, 96px);
  max-width: none;
}

.menu .wp-block-navigation__container { gap: clamp(20px, 3vw, 44px); }

.menu .wp-block-navigation-item__content,
.pied-menu .wp-block-navigation-item__content {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}

.menu .wp-block-navigation-item__content:hover,
.pied-menu .wp-block-navigation-item__content:hover,
.menu .wp-block-navigation-item__content[aria-current="page"],
.pied-menu .wp-block-navigation-item__content[aria-current="page"] {
  border-color: var(--fumee);
  text-decoration: none;
}

.menu .wp-block-navigation__responsive-container-open {
  color: inherit;
  font: inherit;
  font-weight: 500;
}

/* Le panneau mobile s'ouvre blanc sur blanc sans ceci : le CSS du bloc est
   imprimé après cette feuille. Seul endroit où !important est justifié. */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(16px, 2vw, 28px) var(--marge);
  background-color: var(--noir) !important;
  color: var(--fumee) !important;
  font-size: 22px;
}

.menu .wp-block-navigation__responsive-container-close {
  color: inherit;
  font: inherit;
  font-weight: 500;
  font-size: 18px;
}

/* Ouverture */
.ouverture {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.wp-block-image.ouverture-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.wp-block-image.ouverture-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 22%;
}

.ouverture::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: url("assets/img/fumee-claire.jpg") center / cover;
  mix-blend-mode: screen;
  opacity: .28;
  -webkit-mask-image: radial-gradient(55% 75% at 88% 55%, #000 0, transparent 72%);
  mask-image: radial-gradient(55% 75% at 88% 55%, #000 0, transparent 72%);
  animation: derive 26s ease-in-out infinite alternate;
}

@keyframes derive {
  from { transform: translate3d(-3%, 2%, 0) scale(1); }
  to { transform: translate3d(3%, -3%, 0) scale(1.08); }
}

.ouverture::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 26%;
  background: linear-gradient(to top, var(--noir), transparent);
}

.ouverture-texte {
  padding: 0 var(--marge) clamp(24px, 3.4vw, 52px);
}

h1 { font-size: clamp(96px, 13.4vw, 250px); }

.metier {
  margin: .5em 0 0;
  font-family: var(--vers);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.3vw, 38px);
  line-height: 1.15;
}

/* Parole */
.parole {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  padding: clamp(96px, 12vw, 190px) var(--marge);
  background:
    radial-gradient(52% 74% at 100% 58%, var(--magenta) 0, transparent 74%),
    var(--noir);
  isolation: isolate;
}

.parole::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/img/fumee-rouge.jpg") left center / cover;
  -webkit-mask-image: linear-gradient(to right, #000 22%, transparent 78%);
  mask-image: linear-gradient(to right, #000 22%, transparent 78%);
}

.parole::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--noir), transparent 26%, transparent 72%, var(--noir));
}

.accroche {
  margin: 0;
  font-family: var(--vers);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(38px, 6.4vw, 110px);
  line-height: 1.04;
}

.presentation {
  justify-self: end;
  max-width: 25em;
  margin: 0;
  font-weight: 500;
}

/* Gilet */
.wp-block-image.gilet img {
  width: 100%;
  height: clamp(220px, 32vw, 560px);
  object-fit: cover;
  object-position: 50% 45%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 74%, transparent);
}

/* Réalisations */
.realisations {
  position: relative;
  display: flow-root;
  padding: 0 var(--marge) clamp(110px, 13vw, 200px);
  background: linear-gradient(180deg, var(--noir) 0, var(--rouge) 15%, var(--magenta) 56%, var(--violet) 86%, var(--noir) 100%);
  isolation: isolate;
}

.realisations::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/img/fumee-claire.jpg") center / cover;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

/* WordPress met à zéro la marge du premier et du dernier enfant d'un groupe
   avec une spécificité de (0,2,0) : ces marges-là doivent la dépasser. */
.realisations:not(.realisations-page) > h2.wp-block-heading { margin-top: -.48em; }

.oeuvres {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  margin: clamp(32px, 4vw, 64px) 0 clamp(28px, 3vw, 44px);
}

.oeuvre {
  grid-column: span 2;
  padding: clamp(14px, 1.5vw, 22px) 0;
  border-top: 1px solid rgb(246 220 203 / .4);
}

.oeuvres .oeuvre-livre {
  --vignette: clamp(96px, 12.5vw, 190px);
  grid-column: span 3;
}

.oeuvres .oeuvre-cd { --vignette: clamp(96px, 10vw, 160px); }

.oeuvre-livre, .oeuvre-cd {
  display: grid;
  grid-template-columns: var(--vignette) minmax(0, 1fr);
  column-gap: clamp(14px, 1.8vw, 28px);
  align-items: center;
}

.oeuvre .wp-block-image img {
  width: 100%;
  height: auto;
  box-shadow: 0 14px 34px rgb(13 3 7 / .55);
}

@media (max-width: 1100px) {
  .oeuvre { grid-column: span 3; }
}

.oeuvre-titre {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(28px, 3.1vw, 52px);
  line-height: 1;
  text-transform: uppercase;
}

.oeuvre-nature {
  margin: .35em 0 0;
  font-family: var(--vers);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.25;
}

.lien { margin: 0; }

.lien a {
  display: inline-block;
  padding-bottom: .15em;
  border-bottom: 2px solid currentColor;
  font-weight: 600;
  text-decoration: none;
}

/* Services */
.services { position: relative; padding-top: clamp(72px, 9vw, 130px); }

.services h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 -.3em;
  padding: 0 var(--marge);
}

.volets {
  display: grid;
  grid-template-columns: .8fr 1.2fr 1.2fr;
}

.volet {
  position: relative;
  height: clamp(460px, 56vw, 820px);
  overflow: hidden;
}

.volet .wp-block-image { height: 100%; }

.volet .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 18%);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 18%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.volet::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(to top, var(--noir) 8%, transparent);
}

.volet-texte {
  position: absolute;
  inset: auto clamp(16px, 2.4vw, 36px) clamp(20px, 2.4vw, 36px);
  z-index: 1;
}

.volet h3 { font-size: clamp(44px, 5vw, 84px); }

.volet p {
  margin: .5em 0 0;
  font-family: var(--vers);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.25;
}

/* Événements */
.evenements {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(72px, 8vw, 120px) var(--marge);
  overflow: hidden;
  isolation: isolate;
}

.wp-block-video.evenements-video {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.wp-block-video.evenements-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 8% 50%;
}

.evenements::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--noir), transparent 18%, transparent 82%, var(--noir));
}

.evenements::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(270deg, var(--noir) 0, rgb(32 7 15 / .94) 58%, transparent 80%);
}

.evenements-corps { width: min(100%, 44em); }

.annonce {
  margin: 1em 0 0;
  font-family: var(--vers);
  font-style: italic;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.2;
}

.dates { margin: clamp(24px, 3vw, 44px) 0 clamp(24px, 3vw, 40px); }

.date-ligne {
  display: grid;
  grid-template-columns: 11em 1fr;
  column-gap: 1.5em;
  padding: .8em 0;
  border-top: 1px solid rgb(246 220 203 / .35);
}

.date { grid-row: span 2; font-weight: 600; }

.date-titre {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 1;
  text-transform: uppercase;
}

.date-lieu {
  font-family: var(--vers);
  font-style: italic;
  line-height: 1.3;
}

/* Contact */
.contact {
  position: relative;
  padding: clamp(80px, 11vw, 170px) var(--marge);
  background: linear-gradient(180deg, var(--noir) 0, rgb(75 1 25 / .35) 34%, rgb(149 35 235 / .45) 72%, var(--noir) 100%), url("assets/img/fumee-claire.jpg") center / cover;
}

.contact > p.contact-adresse {
  margin: .22em 0 0;
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(26px, 7.8vw, 150px);
  line-height: 1;
}

.contact-adresse a {
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color .2s;
}

.contact-adresse a:hover { border-color: var(--fumee); }

/* Pied de page */
.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px) var(--marge);
}

.pied-menu .wp-block-navigation__container { gap: 8px clamp(18px, 2.4vw, 32px); }

.pied-credit { font-size: .85em; opacity: .8; }

.services-lien { margin: clamp(24px, 3vw, 44px) var(--marge) 0; }

/* Pages internes */
.page-ouverture {
  position: relative;
  min-height: 74svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.wp-block-image.page-ouverture-image {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.wp-block-image.page-ouverture-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.page-ouverture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(32 7 15 / .55), transparent 26%, transparent 52%, var(--noir));
}

.page-ouverture-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--rouge), var(--magenta) 50%, var(--violet));
  mix-blend-mode: multiply;
}

.page-ouverture-realisations .wp-block-image.page-ouverture-image img,
.page-ouverture-evenements .wp-block-image.page-ouverture-image img { object-position: 50% 0; }

.page-ouverture h1 { font-size: clamp(64px, 11.5vw, 200px); }

.page-ouverture-texte { padding: 0 var(--marge) clamp(24px, 3.4vw, 52px); }

.prestation {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(520px, 58vw, 860px);
  isolation: isolate;
}

.prestation-rouge { background: radial-gradient(60% 80% at 100% 50%, var(--rouge), transparent 76%); }
.prestation-magenta { background: radial-gradient(60% 80% at 0% 50%, var(--magenta), transparent 76%); }
.prestation-violet { background: radial-gradient(60% 80% at 100% 50%, var(--violet), transparent 76%); }

.prestation > .wp-block-image { align-self: stretch; }

.prestation > .wp-block-image img {
  width: 100%;
  height: 100%;
  min-height: clamp(520px, 58vw, 860px);
  object-fit: cover;
  object-position: 50% 22%;
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, #000 62%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.prestation-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

.prestation-inverse > .wp-block-image { order: 2; }

.prestation-inverse > .wp-block-image img {
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to left, #000 62%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.prestation-texte { padding: clamp(32px, 4vw, 64px) var(--marge); }

.prestation h2 { font-size: clamp(56px, 7.4vw, 124px); }

.chapo {
  margin: .6em 0 0;
  font-family: var(--vers);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.15;
}

.prestation-texte > p:last-child { max-width: 34em; margin: 1.2em 0 0; font-weight: 500; }

.appel {
  display: grid;
  justify-items: start;
  gap: clamp(20px, 2.4vw, 36px);
  padding: clamp(72px, 9vw, 140px) var(--marge);
}

.realisations.realisations-page { padding-top: clamp(48px, 6vw, 90px); }

.realisations.realisations-page h2 {
  margin: clamp(56px, 7vw, 110px) 0 clamp(24px, 3vw, 44px);
  font-size: clamp(56px, 7.4vw, 124px);
}

.realisations.realisations-page h2:first-child { margin-top: 0; }

.realisations-page h3, .spectacle h3 { font-size: clamp(34px, 3.8vw, 64px); line-height: 1; }

.realisations-page .oeuvre-nature { margin: .35em 0 1em; }

.fiches { display: grid; gap: clamp(32px, 4vw, 64px); }

.fiche {
  display: grid;
  grid-template-columns: clamp(110px, 22vw, 340px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}

.fiche > .wp-block-image { grid-row: span 2; }

.fiche > .wp-block-image img {
  width: 100%;
  height: auto;
  box-shadow: 0 18px 44px rgb(13 3 7 / .55);
}

.fiche-texte { max-width: 38em; font-weight: 500; }

.fiche-texte.fiche-texte p { margin: 0 0 .9em; }

.fiche-texte em {
  font-family: var(--vers);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
}

.fiches-cd { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fiches-cd .fiche {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
}

.fiches-cd .fiche > .wp-block-image { grid-row: auto; }

.realisations-page .fiches-cd h3 { font-size: clamp(28px, 2.7vw, 44px); }

.spectacles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.spectacle { padding-top: 1em; border-top: 1px solid rgb(246 220 203 / .4); }

.spectacle p:last-child { margin: .8em 0 0; font-weight: 500; }

.archives { padding: clamp(56px, 7vw, 110px) var(--marge); }

.archives .dates { margin-bottom: 0; }

.archives h2, .affiches h2 { font-size: clamp(56px, 7.4vw, 124px); }

.affiches {
  padding: clamp(56px, 7vw, 110px) var(--marge) clamp(72px, 9vw, 140px);
  background: linear-gradient(180deg, var(--noir), var(--rouge) 18%, var(--magenta) 58%, var(--violet) 86%, var(--noir));
  isolation: isolate;
}

.affiches-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 22px);
  margin-top: clamp(24px, 3vw, 44px);
}

.affiches-grille .wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  object-position: top;
  mix-blend-mode: luminosity;
  box-shadow: 0 14px 34px rgb(13 3 7 / .5);
}

.affiches-grille .wp-block-image img:hover { mix-blend-mode: normal; }

.contact-page { padding-top: clamp(48px, 6vw, 90px); }

/* Mentions légales : pas de photo d'ouverture, le texte passe sous l'en-tête. */
.mentions {
  padding: clamp(140px, 14vw, 220px) var(--marge) clamp(56px, 7vw, 110px);
}

.mentions h1 { font-size: clamp(56px, 8vw, 128px); }

.mentions h2 {
  margin-top: clamp(40px, 4.5vw, 64px);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1;
}

.mentions p { max-width: 68ch; margin: .75em 0 0; }

.mentions a, .pied-credit a { text-underline-offset: .18em; }

/* Formulaire Contact Form 7 : les classes sont dans le gabarit du formulaire. */
.formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 62em;
  margin-top: clamp(32px, 4vw, 64px);
}

.formulaire label { display: grid; gap: .4em; font-weight: 600; }

.formulaire-large { grid-column: 1 / -1; }

.formulaire .wpcf7-form-control-wrap { display: block; }

.formulaire input:not([type="submit"]), .formulaire textarea {
  display: block;
  width: 100%;
  padding: .7em 0;
  border: 0;
  border-bottom: 2px solid var(--fumee);
  border-radius: 0;
  background: transparent;
  color: var(--fumee);
  font: inherit;
  font-weight: 500;
  resize: vertical;
}

.formulaire input:not([type="submit"]):focus, .formulaire textarea:focus { outline: 2px solid var(--fumee); outline-offset: 4px; }

.formulaire .bouton {
  justify-self: start;
  padding: .75em 1.6em;
  border: 2px solid var(--fumee);
  border-radius: 0;
  background: var(--fumee);
  color: var(--noir);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.formulaire .bouton:hover { background: transparent; color: var(--fumee); }

.wpcf7-spinner { display: none; }

.wpcf7-not-valid-tip { margin-top: .4em; color: var(--fumee); font-family: var(--vers); font-style: italic; }

.wpcf7 form .wpcf7-response-output {
  margin: clamp(20px, 2.4vw, 36px) 0 0;
  padding: .8em 1em;
  border: 2px solid var(--fumee);
  font-family: var(--vers);
  font-style: italic;
}

/* Pages sans mise en page propre : article, résultats, page introuvable */
.page-simple { min-height: 70svh; padding: clamp(150px, 16vw, 220px) var(--marge) clamp(56px, 7vw, 110px); }

.page-simple h1 { margin-bottom: .4em; font-size: clamp(56px, 7.4vw, 124px); }

@media (prefers-reduced-motion: reduce) {
  .ouverture::before { animation: none; }
}

@media (max-width: 760px) {
  .wp-block-image.ouverture-photo img { object-position: 42% 30%; }

  .ouverture::after { height: 48%; }

  h1 { font-size: 27.5vw; }

  .presentation { justify-self: start; }

  .realisations { padding-top: 0; }

  .realisations:not(.realisations-page) > h2.wp-block-heading { margin-top: -.3em; }

  .oeuvres { grid-template-columns: minmax(0, 1fr); }

  .oeuvre, .oeuvres .oeuvre-livre { grid-column: auto; }

  .volets { grid-template-columns: minmax(0, 1fr); }

  .volet { height: auto; aspect-ratio: 4 / 3.4; }

  .services h2 { margin-bottom: -.28em; }

  .evenements {
    display: block;
    min-height: 0;
    padding-top: 0;
  }

  .wp-block-video.evenements-video {
    position: relative;
    inset: auto;
    z-index: 0;
    width: calc(100% + 2 * var(--marge));
    max-width: none;
    margin: 0 calc(-1 * var(--marge));
    aspect-ratio: 16 / 10;
  }

  .wp-block-video.evenements-video video {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 66%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 66%, transparent);
  }

  .evenements::before, .evenements::after { display: none; }

  .evenements-corps {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: -.42em;
  }

  .date-ligne { grid-template-columns: minmax(0, 1fr); row-gap: .15em; }

  .date { grid-row: auto; }

  .pied { flex-direction: column; align-items: flex-start; }

  .page-ouverture { min-height: 66svh; }

  .prestation, .prestation-inverse { grid-template-columns: minmax(0, 1fr); min-height: 0; }

  .prestation > .wp-block-image, .prestation-inverse > .wp-block-image { order: 0; }

  .prestation > .wp-block-image img, .prestation-inverse > .wp-block-image img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 74%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 74%, transparent);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .prestation-texte { padding: 0 var(--marge) clamp(40px, 10vw, 64px); }

  .fiche { grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto auto; }

  .fiche > .wp-block-image { grid-row: auto; }

  .fiche-tete { align-self: center; }

  .fiche-texte { grid-column: 1 / -1; }

  .fiches-cd { grid-template-columns: minmax(0, 1fr); }

  .fiches-cd .fiche { grid-template-columns: 110px minmax(0, 1fr); }

  .spectacles { grid-template-columns: minmax(0, 1fr); }

  .affiches-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .formulaire { grid-template-columns: minmax(0, 1fr); }
}