/*
Theme Name: EvenTimeProd
Theme URI: https://eventimeprod.com
Author: EvenTimeProd
Description: Thème bloc sur mesure pour EvenTimeProd : concerts, groupes live et animations musicales. Tout le contenu est en blocs natifs, modifiable dans l'éditeur.
Version: 1.0.21
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: eventimeprod
*/

/* EvenTimeProd — maquette, registre relevé sur la référence « The Cool Studio » */

:root {
  --fond: #323232;          /* couleur unie choisie par le client, sans texture */
  --turquoise: #5CC3CC;
  --creme: #F0E9DD;
  --description: #DDD7CF;   /* textes courants : contraste 9,6:1 sur le fond */
  --ombre: #181414;
  --filet: rgba(240, 233, 221, .16);

  /* une famille d'affiche en deux chasses (extra-étroite pour le mot géant,
     étroite pour les titres) + une linéale pour le texte, comme la référence */
  --geant: 'Six Caps', 'League Gothic', 'Arial Narrow', sans-serif;
  --titre: 'League Gothic', 'Arial Narrow', sans-serif;
  --texte: 'DM Sans', system-ui, sans-serif;

  --gouttiere: clamp(16px, 4.2vw, 80px);
  --colonne: 43%;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--description);
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

h1, h2, h3, .logo, .nav, .accroche, .groupe-num, .groupe-nom, .etape-num, .scene-titre, .contact-accroche, .contact-mail, .pied-titre, .evenement-groupes a, .morceau-num, .morceau-nom, .autres-liste, .video figcaption, .photo-tuile-titre, .photo-tuile-lien a {
  font-family: var(--titre);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--creme);
  /* League Gothic épaissie : la graisse « affiche » des titres de la référence */
  -webkit-text-stroke: .035em currentColor;
  hyphens: none;
  text-wrap: balance;
}

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(18px, 1.9vw, 30px) var(--gouttiere) 0;
}

.logo { font-size: clamp(30px, 4.1vw, 64px); line-height: .8; }

.nav { display: flex; gap: clamp(18px, 2.4vw, 40px); font-size: clamp(19px, 1.75vw, 27px); line-height: 1; }
.nav a { transition: color .2s; }
.nav a:hover { color: var(--turquoise); }

/* ---------- Le mot géant : l'objet central de la référence ---------- */

/* Six Caps : capitale = .859em, ligne de base à 1.10em du haut de la boîte de police.
   line-height .88 ramène la boîte exactement sur la hauteur des capitales. */
.mot-geant {
  display: block;
  font-family: var(--geant);
  font-weight: 400;
  font-size: 37vw;                /* repli avant ajustement par app.js */
  line-height: .88;
  color: var(--turquoise);
  -webkit-text-stroke: .042em currentColor;
  text-shadow: .016em .012em 0 var(--ombre);
  text-transform: uppercase;
  letter-spacing: .018em;
  padding-bottom: .04em;          /* contour + ombre débordent sous la ligne de base */
  white-space: nowrap;
  text-wrap: nowrap;
}

/* ---------- Héros ---------- */

.hero { padding: clamp(6px, .6vw, 10px) var(--gouttiere) clamp(100px, 11vw, 180px); }

/* photo de concert derrière le mot géant : elle part du haut de la page
   et s'arrête avant le pied des lettres, qui débordent sur le fond */
.entete { position: relative; z-index: 2; }
.hero-scene { position: relative; }
.hero-scene .mot-geant { position: relative; z-index: 1; }
.hero-photo {
  position: absolute;
  z-index: 0;
  top: -16rem;
  bottom: 22%;
  left: calc(-1 * var(--gouttiere));
  right: calc(-1 * var(--gouttiere));
  overflow: hidden;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: grayscale(1) contrast(1.1) brightness(.5); }

.accroche {
  text-align: right;
  font-size: clamp(26px, 4.1vw, 66px);
  line-height: .8;
  margin-top: .3em;
}

.intro {
  display: grid;
  grid-template-columns: var(--colonne) 1fr;
  align-items: start;
  margin-top: clamp(4px, .6vw, 10px);
}

.intro-titre { font-size: clamp(52px, 6.6vw, 108px); line-height: .94; }

.intro-texte { max-width: 54ch; padding-top: clamp(60px, 6.6vw, 106px); }

.intro-lien { grid-column: 2; margin-top: 22px; }
.intro-lien a {
  font-family: var(--titre);
  -webkit-text-stroke: .035em currentColor;
  text-transform: uppercase;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1;
  color: var(--creme);
  border-bottom: 2px solid var(--turquoise);
  transition: color .2s;
}
.intro-lien a:hover { color: var(--turquoise); }

/* ---------- Titres de section ---------- */

.section-tete {
  display: grid;
  grid-template-columns: var(--colonne) 1fr;
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 64px);
}

.section-titre { font-size: clamp(64px, 10.4vw, 168px); line-height: .84; }

.section-chapo { max-width: 46ch; }

/* ---------- Line-up ---------- */

.line-up { padding: 0 var(--gouttiere) clamp(110px, 12vw, 200px); }

.groupes { border-bottom: 1px solid var(--filet); }

.groupe {
  display: grid;
  grid-template-columns: clamp(44px, 6vw, 96px) minmax(0, 1fr) minmax(0, 22rem) clamp(150px, 15vw, 240px);
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(14px, 1.5vw, 22px) 0;
  border-top: 1px solid var(--filet);
}

.groupe-num {
  align-self: start;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1;
  color: var(--turquoise);
  padding-top: .35em;
}

.groupe-nom {
  font-size: clamp(60px, 9.8vw, 158px);
  line-height: .84;
  transition: color .2s, transform .25s;
}

.groupe-style { font-size: 16px; line-height: 1.5; }
.groupe-style strong { display: block; color: var(--creme); font-weight: 500; margin-bottom: .2em; }

.groupe-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--turquoise);
  box-shadow: 10px 10px 0 var(--ombre);
  overflow: hidden;
}
.groupe-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: transform .4s;
}

.groupe:hover .groupe-nom { color: var(--turquoise); transform: translateX(.06em); }
.groupe:hover .groupe-photo img { mix-blend-mode: multiply; transform: scale(1.04); }

/* ---------- Événements ---------- */

.evenements { padding: 0 var(--gouttiere) clamp(110px, 12vw, 200px); }

.evenements-titre { margin-bottom: clamp(36px, 4vw, 64px); }

.evenements-corps {
  display: grid;
  grid-template-columns: var(--colonne) 1fr;
  align-items: start;
}

.evenements-chapo { position: sticky; top: 40px; padding-right: 40px; padding-top: clamp(26px, 2.8vw, 44px); }

.evenements-liste { border-top: 1px solid var(--filet); }

.evenement {
  display: grid;
  grid-template-columns: 1fr minmax(0, 20rem);
  column-gap: 40px;
  padding: clamp(26px, 2.8vw, 44px) 0;
  border-bottom: 1px solid var(--filet);
}

.evenement-titre { grid-row: span 2; font-size: clamp(38px, 4.4vw, 70px); line-height: .9; }

.evenement-texte { font-size: 16px; }

.evenement-groupes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.evenement-groupes a {
  font-size: 23px;
  color: var(--turquoise);
  line-height: 1.1;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.evenement-groupes a:hover { border-color: currentColor; }

/* ---------- La scène : photo pleine largeur, titre qui déborde ---------- */

.scene { position: relative; padding-bottom: clamp(100px, 11vw, 180px); }

.scene-photo { height: clamp(380px, 58vw, 840px); overflow: hidden; }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: grayscale(1) contrast(1.15) brightness(.85); }

.scene-titre {
  position: relative;
  margin: -.9em var(--gouttiere) 0;
  font-size: clamp(76px, 15vw, 240px);
  line-height: .84;
  text-shadow: .03em .025em 0 var(--ombre);
}

.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(56px, 6vw, 96px) var(--gouttiere) 0 0;
  margin-left: calc(var(--gouttiere) + (100% - 2 * var(--gouttiere)) * .43);
}

.etape-num { display: block; font-size: clamp(64px, 6.8vw, 108px); line-height: .8; color: var(--turquoise); text-shadow: .04em .03em 0 var(--ombre); }
.etape-titre { font-size: clamp(26px, 2.3vw, 36px); line-height: .95; margin: .7em 0 .45em; }
.etape-texte { font-size: 16px; }

/* ---------- Pages groupes : répertoire, reste du line-up ---------- */

.repertoire, .videos, .photos, .autres { padding: 0 var(--gouttiere) clamp(110px, 12vw, 200px); }

/* titre sur une ligne, pleine largeur ; le chapeau reste dans la colonne décalée */
:is(.repertoire, .videos, .photos) .section-tete { grid-template-columns: var(--colonne) 1fr; }
:is(.repertoire, .videos, .photos) .section-titre { grid-column: 1 / -1; margin-bottom: .25em; }
:is(.repertoire, .videos, .photos) .section-chapo { grid-column: 2; }

.morceaux {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--filet);
}

.morceau {
  display: grid;
  grid-template-columns: clamp(34px, 3vw, 48px) minmax(0, 1fr);
  align-items: baseline;
  padding: clamp(16px, 1.6vw, 24px) 0;
  border-bottom: 1px solid var(--filet);
}
.morceau-num { grid-row: span 2; font-size: 20px; line-height: 1; color: var(--turquoise); }
.morceau-nom { font-size: clamp(28px, 2.6vw, 42px); line-height: .95; }
.morceau-artiste { grid-column: 2; font-size: 15px; margin-top: 6px; }

/* « Et bien d'autres… » : ferme la grille en occupant les cases restantes,
   calculées d'après la position du dernier titre (grille de 3) */
.morceau-suite { grid-template-columns: minmax(0, 1fr); }
.morceau:nth-child(3n+1) + .morceau-suite { grid-column: span 2; }
.morceau:nth-child(3n+2) + .morceau-suite { grid-column: span 1; }
.morceau:nth-child(3n) + .morceau-suite { grid-column: 1 / -1; }
.morceau-suite .morceau-nom { color: var(--turquoise); }
.morceau-suite .morceau-artiste { grid-column: 1; max-width: 52ch; }

.autres-titre { font-size: clamp(24px, 2.2vw, 34px); line-height: 1; color: var(--turquoise); margin-bottom: .6em; }

.autres-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .02em .3em;
  font-size: clamp(46px, 6.6vw, 108px);
  line-height: .95;
}
.autres-liste li { display: flex; align-items: baseline; gap: .3em; }
.autres-liste li:not(:last-child)::after { content: "/"; color: var(--turquoise); }
.autres-liste a { transition: color .2s; }
.autres-liste a:hover { color: var(--turquoise); }

/* ---------- Pages groupes : vidéos et photos ---------- */

.videos-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 54px) clamp(24px, 3vw, 56px);
}
.video { margin: 0; }
.video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--ombre);
  box-shadow: 10px 10px 0 var(--ombre);
}
.video figcaption { margin-top: 22px; font-size: clamp(22px, 1.9vw, 30px); line-height: 1; }

.photos-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ombre); }
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .3s, transform .4s;
}
.photo:hover img { filter: none; transform: scale(1.03); }
/* cadrage d'une photo dont le sujet est sur le bord gauche */
.photo-gauche img { object-position: 12% 50%; }
/* pochette d'album : carrée pour ne rien rogner du visuel, et en couleur d'origine */
.photo.pochette { aspect-ratio: 1; }
.photo.pochette img { filter: none; }

/* la case turquoise ferme la grille et mène au contact : elle occupe les cases
   restantes de la dernière ligne (grille de 4), calculées d'après la dernière photo */
.photo:nth-child(4n+1) + .photo-tuile { grid-column: span 3; }
.photo:nth-child(4n+2) + .photo-tuile { grid-column: span 2; }
.photo:nth-child(4n+3) + .photo-tuile { grid-column: span 1; }
.photo:nth-child(4n) + .photo-tuile { grid-column: 1 / -1; min-height: 220px; }
/* case étirée : le titre grandit avec elle */
.photo:nth-child(4n+2) + .photo-tuile .photo-tuile-titre { font-size: clamp(48px, 6vw, 96px); }
:is(.photo:nth-child(4n+1), .photo:nth-child(4n)) + .photo-tuile .photo-tuile-titre { font-size: clamp(56px, 8vw, 128px); }

/* une seule vidéo : pleine largeur */
.video:only-child { grid-column: 1 / -1; }
.photo-tuile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.8vw, 28px);
  background: var(--turquoise);
}
.photo-tuile-titre { font-size: clamp(38px, 4.2vw, 68px); line-height: .9; color: var(--fond); }
.photo-tuile-lien a { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; color: var(--fond); border-bottom: 2px solid currentColor; }

/* ---------- Fonds de page : cuir (accueil), damas (Grand Soir), bois (Apollobugs), jack (ReeMake), Noël (Snowy), batterie (Riff Raff), platine (Even DJ) ----------
   La classe fond-…, posée sur le héros de la page, habille toute la page.
   L'image reste fixe à l'écran : pas de raccord visible, la vignette reste en place. */
body:has(.fond-cuir) { background-color: #1d1c1a; }
body:has(.fond-damas) { background-color: #0a0a0a; }
body:has(.fond-bois) { background-color: #2a2018; }
body:has(.fond-jack) { background-color: #161616; }
body:has(.fond-noel) { background-color: #1b2331; }
body:has(.fond-batterie) { background-color: #120806; }
body:has(.fond-platine) { background-color: #1a0b24; }
body:has(.fond-cuir, .fond-damas, .fond-bois, .fond-jack, .fond-noel, .fond-batterie, .fond-platine)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: center / cover no-repeat;
  pointer-events: none;
}
body:has(.fond-cuir)::before { background-image: url("assets/img/fond-cuir.jpg"); }
body:has(.fond-damas)::before { background-image: url("assets/img/fond-damas.jpg"); }
body:has(.fond-bois)::before { background-image: url("assets/img/fond-bois.jpg"); }
/* la brume violette est claire (texte à 2,2:1 par endroits) : voile violet sombre de 45 % */
body:has(.fond-platine)::before { background-image: linear-gradient(rgba(20, 8, 30, .45), rgba(20, 8, 30, .45)), url("assets/img/fond-platine.jpg"); }
/* accents en vert pâle à la demande du client (9,9:1 sur le bois ; texte foncé de la case de réservation : 7,7:1) */
body:has(.fond-bois) { --turquoise: #A8D5A0; }
body:has(.fond-jack)::before { background-image: url("assets/img/fond-jack.jpg"); }
/* accents en rose-violet pâle à la demande du client (10:1 sur le fond ; texte foncé de la case de réservation : 7,3:1) */
body:has(.fond-jack) { --turquoise: #E2B4E8; }
/* écran étroit : la prise jack (métal clair) passe derrière le texte de présentation et les liens
   du pied de page, voile sombre de 55 %. Sur ordinateur, elle tombe entre les colonnes. */
@media (max-width: 860px) {
  body:has(.fond-jack)::before { background-image: linear-gradient(rgba(10, 10, 10, .55), rgba(10, 10, 10, .55)), url("assets/img/fond-jack.jpg"); }
}
/* le projecteur et le halo orangé passent sous le texte en défilant : voile sombre de 40 % */
body:has(.fond-batterie)::before { background-image: linear-gradient(rgba(12, 6, 4, .4), rgba(12, 6, 4, .4)), url("assets/img/fond-batterie.jpg"); }
/* accents en rouge, accordés à la grosse caisse de la photo (#DB090C), éclaircis pour rester lisibles (5,2:1) */
body:has(.fond-batterie) { --turquoise: #F0412F; }
/* image plus haute que large : calée en haut pour garder les boules suspendues dans le cadre.
   Les boules dorées restent en haut de l'écran et le texte passe dessus en défilant :
   un voile bleu nuit, plus dense en haut, les assombrit juste assez pour le lire. */
body:has(.fond-noel)::before {
  background-image: linear-gradient(rgba(20, 27, 39, .55), rgba(20, 27, 39, .2)), url("assets/img/fond-noel.jpg");
  background-position: center top;
}

/* ---------- Couleur d'accent propre à une page sans fond photo ----------
   La classe accent-…, posée sur le héros, remplace le turquoise sur toute la page. */
/* jaune d'Even DJ, à la demande du client (8,5:1 sur le gris ; texte foncé d'une case de réservation : 8,5:1) */
body:has(.accent-jaune) { --turquoise: #F4D03F; }

/* ---------- Contact : le numéro devient l'objet géant de fin ---------- */

.contact { padding: 0 var(--gouttiere) clamp(90px, 9vw, 150px); }

.contact-accroche { font-size: clamp(34px, 5.4vw, 86px); line-height: .84; margin-bottom: .3em; }

.contact-tel { letter-spacing: .045em; transition: color .2s; }
.contact-tel:hover { color: var(--creme); }

.contact-bas {
  display: grid;
  grid-template-columns: var(--colonne) 1fr;
  align-items: start;
  margin-top: clamp(22px, 2.4vw, 38px);
}

.contact-texte { max-width: 40ch; }

.contact-mail {
  justify-self: end;
  font-size: clamp(30px, 4.2vw, 68px);
  line-height: 1;
  text-transform: none;
  border-bottom: 3px solid var(--turquoise);
  transition: color .2s;
}
.contact-mail:hover { color: var(--turquoise); }

/* ---------- Pied de page ---------- */

.pied { padding: clamp(48px, 5vw, 80px) var(--gouttiere) 32px; border-top: 1px solid var(--filet); font-size: 16px; }

.pied-haut { display: grid; grid-template-columns: var(--colonne) 1fr 1fr; gap: 40px; }

.pied-marque p { margin-top: 16px; max-width: 30ch; }

.pied-titre { font-size: 26px; line-height: 1; margin-bottom: 16px; }

.pied-groupes ul { columns: 2; column-gap: 24px; }
.pied-groupes li { line-height: 1.9; }
.pied a:hover { color: var(--turquoise); }

.pied-bas { margin-top: clamp(48px, 5vw, 80px); font-size: 14px; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  .nav > a:not(.nav-contact) { display: none; }   /* ">" : dans WordPress, la classe est sur le <li>, pas sur le lien */

  .intro, .section-tete, .evenements-corps, .contact-bas, .pied-haut { grid-template-columns: 1fr; }
  .intro-texte { padding-top: 22px; }
  .intro-lien { grid-column: auto; }
  .section-chapo { margin-top: 18px; }

  .groupe {
    grid-template-columns: auto minmax(0, 1fr) 92px;
    grid-template-areas: "num nom photo" "num style photo";
    row-gap: 8px;
  }
  .groupe-num { grid-area: num; padding-top: .2em; }
  .groupe-nom { grid-area: nom; }
  .groupe-style { grid-area: style; font-size: 14px; }
  .groupe-style strong { margin-bottom: 0; }
  .groupe-photo { grid-area: photo; aspect-ratio: 1; box-shadow: 6px 6px 0 var(--ombre); }

  .evenements-chapo { position: static; padding: 0 0 28px; }
  .evenement { grid-template-columns: 1fr; }
  .evenement-titre { grid-row: auto; margin-bottom: 12px; }

  .etapes { grid-template-columns: 1fr; margin-left: var(--gouttiere); }

  .morceaux { grid-template-columns: 1fr; }
  .morceaux .morceau + .morceau-suite { grid-column: auto; }
  :is(.repertoire, .videos, .photos) .section-tete { grid-template-columns: 1fr; }
  :is(.repertoire, .videos, .photos) .section-chapo { grid-column: 1; }
  .videos-grille { grid-template-columns: 1fr; }
  .photos-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos-grille .photo:nth-child(odd) + .photo-tuile { grid-column: span 1; min-height: 0; }
  .photos-grille .photo + .photo-tuile .photo-tuile-titre { font-size: clamp(30px, 9vw, 44px); }
  .photos-grille .photo:nth-child(even) + .photo-tuile { grid-column: 1 / -1; min-height: 180px; }

  .contact-mail { justify-self: start; margin-top: 24px; font-size: clamp(26px, 7.4vw, 36px); }

  .pied-haut { gap: 32px; }
}

/* ==========================================================================
   Adaptations WordPress — ajoutées après le CSS de la maquette.
   Le DOM des blocs diffère un peu de la maquette ; ces règles le rattrapent
   sans toucher au design.
   ========================================================================== */

/* Gutenberg insère des marges entre blocs. Elles sont coupées à la source dans
   theme.json (blockGap : 0px) ; ce filet de sécurité est à spécificité nulle
   pour ne jamais écraser les marges du design (voir blocs-gutenberg.md). */
:where(.wp-block-group) > :where(*) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
img { height: auto; }
ul.wp-block-list, ol.wp-block-list { margin: 0; padding: 0; }

/* Le CSS des blocs est imprimé après cette feuille : les cadrages d'images
   doivent battre « .wp-block-image img { height: auto } » en spécificité. */
.wp-block-image.groupe-photo img,
.wp-block-image.scene-photo img,
.wp-block-image.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Ligne du line-up : le lien est posé sur le nom et étendu à toute la ligne */
.groupe { position: relative; }
.groupe-nom a::after { content: ""; position: absolute; inset: 0; }

/* Navigation de l'en-tête (core/navigation) */
.wp-block-navigation.nav .wp-block-navigation__container { gap: clamp(18px, 2.4vw, 40px); }
.wp-block-navigation.nav .wp-block-navigation-item__content { padding: 0; transition: color .2s; }
.wp-block-navigation.nav .wp-block-navigation-item__content:hover { color: var(--turquoise); }

@media (max-width: 860px) {
  .wp-block-navigation.nav .wp-block-navigation-item:not(.nav-contact) { display: none; }
}

/* Vidéos (core/embed) et photos (core/image avec agrandissement au clic) */
.wp-block-image.photo img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-embed.video { margin: 0; }
.wp-block-embed.video .wp-block-embed__wrapper { position: static; }
.wp-block-embed.video figcaption { margin: 22px 0 0; text-align: left; color: var(--creme); }

/* Pied de page : dans la maquette, le logo est un lien posé dans un bloc en DM Sans 16 px,
   dont la ligne garde la hauteur de ce texte ; ici il a son propre paragraphe. Un élément
   vide aux mêmes réglages recrée cette ligne (6 px de plus sous le logo sur mobile). */
.pied-marque > .logo::after { content: ""; font: 16px/1.55 var(--texte); }

/* Le chapo des événements est le premier enfant de son groupe : la règle de mise en page
   de WordPress « :root :where(.is-layout-flow) > :first-child », plus spécifique, annule
   sa marge haute. On la rétablit sur mobile (18 px sous le titre). */
@media (max-width: 860px) {
  .evenements .evenements-corps > .section-chapo { margin-top: 18px; }
}