/*
Theme Name: BEYLAG
Theme URI: https://beylag.art
Author: BEYLAG
Author URI: https://beylag.art
Description: Thème sur mesure pour BEYLAG — artiste contemporaine. Œuvres originales, tirages d'art en édition limitée, photographie, esquisses, peinture. Direction artistique : luxe discret, silence, matière, respiration.
Version: 2.7.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beylag
Tags: portfolio, photography, editorial, one-column, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   0. TOKENS
   ========================================================= */
:root {
  --ivory: #FFFEFC;
  --ivory-2: #FAF7F1;
  --ivory-3: #F4F0E8;
  --bordeaux: #45101B;
  --bordeaux-deep: #330B14;
  --ink: #16110E;
  --grey: #726D64;
  --grey-soft: #B5AEA4;
  --hairline: #E7E1D6;
  --hairline-dark: rgba(255, 254, 252, 0.18);

  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-editorial: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ls-wide: 0.32em;
  --ls-mid: 0.18em;

  --pad-section: clamp(6rem, 12vw, 11rem);
  --pad-x: clamp(1.5rem, 5vw, 5.5rem);
  --maxw: 1680px;
  --maxw-text: 44rem;

  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-editorial);
  font-size: 1.1875rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color 0.35s var(--ease), opacity 0.35s var(--ease); }
a:hover { color: var(--bordeaux); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

p { margin: 0 0 1.4em; }

::selection { background: var(--bordeaux); color: var(--ivory); }

figure { margin: 0; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute !important; word-wrap: normal !important;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ivory);
  padding: 0.75rem 1.25rem; z-index: 999;
  font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: var(--ls-mid); text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* =========================================================
   2. UTILITIES
   ========================================================= */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1.75rem;
}

.section-title {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.lead {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.65;
}

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 1.05rem 2.6rem;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--ivory); }

.btn--bordeaux { border-color: var(--bordeaux); color: var(--bordeaux); }
.btn--bordeaux:hover { background: var(--bordeaux); color: var(--ivory); }

.btn--ivory { border-color: var(--ivory); color: var(--ivory); }
.btn--ivory:hover { background: var(--ivory); color: var(--ink); }

/* Focus clavier visible sur tous les boutons (n'apparaît qu'au clavier,
   ne change pas le rendu à la souris ni au survol). */
.btn:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

/* v2.6.13 §1A — Bouton de la PAGE L'Œil de BEYLAG : survol bordeaux profond
   par défaut (#45101B / #FFFEFC). Reproduit, à la source, l'ancienne règle du
   « CSS additionnel » — désormais inutile. Réglable dans Personnaliser >
   BEYLAG > Accueil — L'Œil de BEYLAG (les mêmes contrôles pilotent la page).
   Ciblé sur .oeil-page uniquement : aucun autre bouton n'est touché. */
.oeil-page .btn:hover,
.oeil-page .btn:focus-visible,
.oeil-page .btn:active {
  background: #45101B;
  border-color: #45101B;
  color: #FFFEFC;
}

/* v2.6.13 §1B — Bouton « Découvrir » du Fonds BEYLAG — PAGE dédiée uniquement :
   à l'état normal il ÉPOUSE la couleur de texte de la section (ivoire sur fond
   sombre, encre sur fond clair) avec un fond transparent et une bordure de la
   même teinte. Reste entièrement personnalisable via les contrôles « Boutons
   Fonds ». Non modifié par la v2.7.0 (RC2) : voir bloc .front-fonds séparé
   ci-dessous pour la section d'accueil, dont le comportement diffère. */
.fonds-page .btn,
.fonds-page a.btn,
.fonds-page a.btn:link,
.fonds-page a.btn:visited {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

/* v2.7.0 §5B (RC2) — Bouton Fonds BEYLAG de la section ACCUEIL uniquement
   (.front-fonds) : état normal fond transparent / bordure et texte ivoire
   explicites (var(--ivory), indépendant du fond de la section) ; survol et
   focus clavier : fond et bordure ivoire, texte bordeaux. Comportement
   distinct de la page Fonds dédiée (.fonds-page, inchangée ci-dessus) et de
   L'Œil (bordeaux au survol). Reproduit, à la source, la règle du CSS
   additionnel — désormais inutile. */
.front-fonds .btn,
.front-fonds a.btn,
.front-fonds a.btn:link,
.front-fonds a.btn:visited {
  background: transparent;
  border-color: var(--ivory);
  color: var(--ivory);
}
.front-fonds .btn:hover,
.front-fonds .btn:focus-visible {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--bordeaux);
}

/* Boutons L'Œil de BEYLAG (section accueil + page dédiée) : survol bordeaux
   profond intégré au thème — plus besoin de CSS additionnel. Ces valeurs
   restent surchargeables depuis Personnaliser > BEYLAG > Accueil — L'Œil. */
.front-oeil .btn:hover,
.oeil-page .btn:hover { background: #45101B; border-color: #45101B; color: #FFFEFC; }

/* Bouton Le Fonds BEYLAG — PAGE dédiée uniquement : même survol bordeaux
   profond intégré au thème — surchargeable depuis Personnaliser > BEYLAG >
   Accueil — Fonds BEYLAG. La section d'accueil (.front-fonds) a son propre
   survol ivoire/bordeaux, défini ci-dessus. */
.fonds-page .btn:hover { background: #45101B; border-color: #45101B; color: #FFFEFC; }

/* v2.7.0 §5C — Bouton Acquisition (accueil) : au survol et au focus clavier,
   fond et bordure ivoire, texte bordeaux (le bouton utilise .btn--bordeaux,
   dont le survol par défaut est fond bordeaux / texte ivoire — ici surchargé
   par une spécificité supérieure, sans !important). Reproduit, à la source,
   la règle du CSS additionnel — désormais inutile. Le réglage Personnaliser >
   BEYLAG > Accueil — Acquisition (fond au survol) reste prioritaire s'il est
   renseigné. Aucun autre bouton n'est touché. */
.front-acquire .btn:hover,
.front-acquire .btn:focus-visible {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--bordeaux);
}

.text-link {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--grey-soft);
  padding-bottom: 0.45em;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.text-link:hover { border-color: var(--bordeaux); color: var(--bordeaux); }

.hairline-top { border-top: 1px solid var(--hairline); }

/* Révélation douce au scroll (uniquement si JS actif) */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* v2.6.13 §5 — pas de mouvement de survol sur les cartes ; le cadrage
     statique (--apz) est conservé, seule l'animation est neutralisée. */
  .work-card__media img { transition: none; }
  .work-card:hover .work-card__media img { transform: none; }
  .works-grid .work-card:hover .work-card__media.has-apz img { transform: scale(var(--apz, 1)); }
}

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 1.4rem var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.site-header__nav--left { justify-content: flex-start; }
.site-branding { min-width: 0; }
.site-branding .site-logo-text { white-space: nowrap; }
.header-cta {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.site-header__nav { display: flex; gap: 2.4rem; }
.site-header__nav--right { justify-content: flex-end; }

.site-header__nav ul {
  display: flex; gap: 2.4rem;
  list-style: none; margin: 0; padding: 0;
}

.site-header__nav a,
.site-header__nav .menu-toggle {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--ink);
}
.site-header__nav a:hover { color: var(--bordeaux); }

.site-branding { text-align: center; }
.site-branding a { display: inline-block; }

.site-logo-text {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* recentre optiquement */
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  line-height: 1;
  transition: color 0.5s var(--ease);
}
.site-branding .custom-logo { max-height: 44px; width: auto; margin: 0 auto; }

/* Header transparent au-dessus du hero (accueil) */
.header-transparent .site-header {
  background: transparent;
  border-bottom-color: transparent;
}
.header-transparent .site-header .site-logo-text,
.header-transparent .site-header .site-header__nav a,
.header-transparent .site-header .menu-toggle {
  color: var(--ivory);
}
.header-transparent .site-header .site-header__nav a:hover { opacity: 0.7; color: var(--ivory); }

/* Une fois scrollé : retour à l'ivoire */
.header-transparent .site-header.is-scrolled {
  background: var(--ivory);
  border-bottom-color: var(--hairline);
}
.header-transparent .site-header.is-scrolled .site-logo-text,
.header-transparent .site-header.is-scrolled .site-header__nav a,
.header-transparent .site-header.is-scrolled .menu-toggle {
  color: var(--ink);
}
.header-transparent .site-header.is-scrolled .site-header__nav a:hover { color: var(--bordeaux); opacity: 1; }

/* Bouton menu (hamburger) — visible à toutes les tailles */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.menu-toggle__lines {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.menu-toggle__lines span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: width 0.4s var(--ease);
}
.menu-toggle:hover .menu-toggle__lines span:last-child { width: 60%; }

.mobile-panel {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ivory);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
.mobile-panel.is-open { opacity: 1; visibility: visible; }

/* Voile discret derrière le panneau latéral (desktop) */
.panel-scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(22, 17, 14, 0.22);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.panel-scrim.is-open { opacity: 1; visibility: visible; }

/* Sur ordinateur : panneau latéral élégant, jamais plein écran */
@media (min-width: 901px) {
  .mobile-panel {
    inset: 0 auto 0 0;
    width: min(30rem, 42vw);
    align-items: flex-start;
    justify-content: center;
    padding: 6rem clamp(2.5rem, 4vw, 4.5rem);
    border-right: 1px solid var(--hairline);
    box-shadow: 40px 0 90px rgba(22, 17, 14, 0.08);
    opacity: 1; visibility: hidden;
    transform: translateX(-101%);
    transition: transform 0.6s var(--ease), visibility 0.6s var(--ease);
  }
  .mobile-panel.is-open { transform: translateX(0); visibility: visible; }
  .mobile-panel ul { text-align: left; }
  .mobile-panel nav { width: 100%; }
}
@media (max-width: 900px) {
  .panel-scrim { display: none; }
}

.mobile-panel ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.mobile-panel li {
  margin: 1.1rem 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.mobile-panel.is-open li { opacity: 1; transform: none; }
.mobile-panel.is-open li:nth-child(1) { transition-delay: 0.10s; }
.mobile-panel.is-open li:nth-child(2) { transition-delay: 0.16s; }
.mobile-panel.is-open li:nth-child(3) { transition-delay: 0.22s; }
.mobile-panel.is-open li:nth-child(4) { transition-delay: 0.28s; }
.mobile-panel.is-open li:nth-child(5) { transition-delay: 0.34s; }
.mobile-panel.is-open li:nth-child(6) { transition-delay: 0.40s; }
.mobile-panel.is-open li:nth-child(7) { transition-delay: 0.46s; }
.mobile-panel.is-open li:nth-child(8) { transition-delay: 0.52s; }
.mobile-panel.is-open li:nth-child(n+9) { transition-delay: 0.58s; }
.mobile-panel a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  letter-spacing: 0.02em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left calc(100% - 0.08em);
  padding-bottom: 0.12em;
  transition: color 0.55s var(--ease), background-size 0.55s var(--ease);
}
.mobile-panel a:hover { color: var(--bordeaux); background-size: 100% 1px; }
.mobile-panel nav + nav { margin-top: 1.1rem; }
.mobile-panel__close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.6875rem;
  letter-spacing: var(--ls-mid); text-transform: uppercase;
  color: var(--ink); padding: 0.5rem;
}

@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: 1fr auto 1fr; }
  .menu-toggle__label { display: none; }
  /* « Nous contacter » est masqué dans le header mobile (repris dans le
     panneau du menu) pour que le logo reste parfaitement centré. */
  .site-header .header-cta { display: none; }
}
/* Lien contact dans le panneau : visible sur mobile uniquement */
.mobile-panel__cta { display: none; }
@media (max-width: 900px) {
  .mobile-panel__cta {
    display: inline-block;
    margin-top: 2.2rem;
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--grey-soft);
    padding-bottom: 0.45em;
  }
}

/* Décalage du contenu sous le header fixe (pages intérieures) */
.site-main { padding-top: 5.2rem; }
.header-transparent .site-main { padding-top: 0; }

/* =========================================================
   4. HERO (ACCUEIL)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--bordeaux-deep);
  color: var(--ivory);
  overflow: hidden;
}

.hero__image {
  position: absolute; inset: 0;
}
.hero__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__image::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 12, 10, 0.28);
}

/* Fallback typographique sans image : matière sombre, silencieuse */
.hero--no-image { background: var(--bordeaux-deep); }
.hero--no-image::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(0,0,0,0.35), transparent 60%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad-x) clamp(3.5rem, 8vh, 6.5rem);
  max-width: var(--maxw);
  margin: 0 auto;
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 254, 252, 0.75);
  margin-bottom: 2rem;
  display: block;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  font-weight: 500;
  color: var(--ivory);
  max-width: 16em;
  margin-bottom: 2.5rem;
  overflow-wrap: break-word;
}
@media (max-width: 700px) {
  .hero__title { font-size: clamp(2rem, 8.5vw, 2.8rem); margin-bottom: 1.8rem; }
  .hero__eyebrow { margin-bottom: 1.4rem; }
  .hero__content { padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
}

.hero__actions { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; }

.hero__scroll {
  position: absolute;
  bottom: 2.25rem; right: var(--pad-x);
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 254, 252, 0.6);
  writing-mode: vertical-rl;
}

/* =========================================================
   5. SECTIONS ACCUEIL
   ========================================================= */
.section { padding: var(--pad-section) 0; }
.section--tight { padding: calc(var(--pad-section) * 0.62) 0; }
.section--ivory2 { background: var(--ivory-2); }
.section--bordeaux { background: var(--bordeaux); color: var(--ivory); }
.section--bordeaux h2, .section--bordeaux h3 { color: var(--ivory); }
.section--ink { background: var(--ink); color: var(--ivory); }
.section--ink h2, .section--ink h3 { color: var(--ivory); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head .section-title { margin-bottom: 0; }

/* --- Grille d'œuvres (accueil + archives) --- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: clamp(3.5rem, 6vw, 6rem);
}
.works-grid--4 { grid-template-columns: repeat(4, 1fr); }
.works-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1100px) {
  .works-grid, .works-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .works-grid, .works-grid--4, .works-grid--2 { grid-template-columns: 1fr; }
}

.work-card { position: relative; }
.work-card__media {
  position: relative;
  overflow: hidden;
  background: var(--ivory-3);
  aspect-ratio: 4 / 5;
  margin-bottom: 1.6rem;
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), opacity 1.4s var(--ease);
}
/* v2.6.13 §5 — Survol des cartes : amplitude RELATIVE identique pour toutes
   les cartes (peinture, dessin, photographie), via un facteur commun
   --hoverzoom (défaut 1.03 = +3%). Le cadrage statique propre à chaque image
   (--apz) est conservé ; c'est le mouvement de survol qui est uniformisé. */
.work-card:hover .work-card__media img { transform: scale(var(--hoverzoom, 1.03)); }

.work-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.work-card__title a:hover { color: var(--bordeaux); }

.work-card__meta {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
}

/* Placeholder élégant si pas d'image */
.ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ivory-3);
  border: 1px solid var(--hairline);
}
.ph span {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--grey-soft);
}

/* --- Manifeste --- */
.manifesto { text-align: center; }
.manifesto__text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.5;
  max-width: 28em;
  margin: 0 auto 2.5rem;
  color: var(--ink);
}
.section--bordeaux .manifesto__text { color: var(--ivory); }
.manifesto__signature {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--grey);
}
.section--bordeaux .manifesto__signature { color: rgba(255,254,252,0.65); }
/* v2.6.13 §4 — évite l'orpheline « retirent » : garde « les mots se retirent »
   sur une même ligne. Uniquement dans le manifeste, jamais globalement. */
.manifesto__text .beylag-nowrap { white-space: nowrap; }

/* --- Savoir-faire (accueil) --- */
.craft {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.craft__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-3); }
.craft__media img { width: 100%; height: 100%; object-fit: cover; }

.craft__list { list-style: none; margin: 2.5rem 0 3rem; padding: 0; }
.craft__list li {
  display: flex; gap: 1.5rem; align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.0625rem;
}
.craft__list li:first-child { border-top: 1px solid var(--hairline); }
.craft__list .num {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  color: var(--grey);
}

@media (max-width: 900px) {
  .craft { grid-template-columns: 1fr; }
}

/* --- Acquérir --- */
.acquire { text-align: center; }
.acquire__inner { max-width: var(--maxw-text); margin: 0 auto; }

/* --- Journal (cartes) --- */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; } }

.journal-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ivory-3);
  margin-bottom: 1.5rem;
}
.journal-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.journal-card:hover .journal-card__media img { transform: scale(1.03); }

.journal-card__date {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  display: block;
  margin-bottom: 0.7rem;
}
.journal-card__title {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.journal-card__excerpt {
  font-size: 1.0325rem;
  color: var(--grey);
  line-height: 1.65;
}
.journal-card__cta { margin-top: 1.25rem; }

/* --- Newsletter / invitation privée --- */
.newsletter { text-align: center; }
.newsletter__inner { max-width: 40rem; margin: 0 auto; }
.newsletter__form {
  display: flex;
  gap: 0;
  margin-top: 2.75rem;
  border-bottom: 1px solid var(--hairline-dark);
}
.section--ink .newsletter__form,
.section--bordeaux .newsletter__form { border-color: var(--hairline-dark); }

.newsletter__form input[type="email"] {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 0.9rem 0;
  font-family: var(--font-editorial);
  font-size: 1.1rem;
  color: inherit;
  outline: none;
}
.newsletter__form input[type="email"]::placeholder { color: var(--grey); opacity: 1; }
.newsletter__form input[type="email"]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.newsletter__form button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: inherit;
  padding: 0.9rem 0 0.9rem 1.5rem;
  transition: opacity 0.3s var(--ease);
}
.newsletter__form button:hover { opacity: 0.6; }

.newsletter__note {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: var(--grey-soft);
  font-style: italic;
}

/* --- Bandeau éditorial pleine largeur --- */
.editorial-banner {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
}
.editorial-banner__image { position: absolute; inset: 0; }
.editorial-banner__image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.editorial-banner__content { position: relative; z-index: 2; padding: var(--pad-section) var(--pad-x); max-width: 52rem; }
.editorial-banner .section-title { color: var(--ivory); }

/* =========================================================
   6. ARCHIVE ŒUVRES / GALERIE
   ========================================================= */
.page-hero {
  padding: calc(var(--pad-section) * 0.9) 0 calc(var(--pad-section) * 0.55);
  text-align: center;
}
.page-hero__title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin-bottom: 1rem; }
.page-hero__intro {
  max-width: 38rem; margin: 0 auto;
  font-size: 1.2rem; color: var(--grey);
}

.filters {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  flex-wrap: wrap;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.filters a {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: 0.5em;
  border-bottom: 1px solid transparent;
}
.filters a:hover { color: var(--ink); }
.filters a.is-active { color: var(--ink); border-bottom-color: var(--bordeaux); }

.archive-works { padding-bottom: var(--pad-section); }

/* Pagination */
.pagination {
  display: flex; justify-content: center; gap: 1.5rem;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.pagination .page-numbers {
  color: var(--grey); padding: 0.4em 0.2em;
  border-bottom: 1px solid transparent;
}
.pagination .page-numbers.current { color: var(--ink); border-bottom-color: var(--bordeaux); }
.pagination a.page-numbers:hover { color: var(--ink); }

/* =========================================================
   7. DÉTAIL ŒUVRE
   ========================================================= */
.oeuvre-single { padding-bottom: var(--pad-section); }

.oeuvre-hero {
  background: var(--ivory-2);
  padding: clamp(3rem, 7vw, 6rem) var(--pad-x);
  display: flex;
  justify-content: center;
}
.oeuvre-hero figure {
  max-width: 1100px;
  max-height: 82vh;
  display: flex; justify-content: center;
}
.oeuvre-hero img {
  max-height: 82vh; width: auto; max-width: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(22, 17, 14, 0.12);
}
.oeuvre-hero .ph { aspect-ratio: 4/5; width: min(560px, 80vw); height: auto; }

.oeuvre-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(3rem, 8vw, 9rem);
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
}
@media (max-width: 900px) { .oeuvre-body { grid-template-columns: 1fr; } }

.oeuvre-title { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 2rem; }
/* v2.7.0 RC2 — spécificité (.entry-content.oeuvre-text, deux classes) toujours
   supérieure à la règle générique .entry-content (une classe) ci-dessous, quel
   que soit l'ordre des règles : le texte des œuvres garde sa propre taille de
   base (1.2rem) tout en restant réglable par la même échelle proportionnelle. */
.entry-content.oeuvre-text { font-size: 1.2rem; }
.oeuvre-text p:last-child { margin-bottom: 0; }

.oeuvre-details { list-style: none; margin: 0 0 2.75rem; padding: 0; }
.oeuvre-details li {
  display: flex; justify-content: space-between; gap: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.0325rem;
}
.oeuvre-details li:first-child { border-top: 1px solid var(--hairline); }
.oeuvre-details .label {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 0.35em;
  flex-shrink: 0;
}
.oeuvre-details .value { text-align: right; }

.oeuvre-actions { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }

.oeuvre-nav {
  display: flex; justify-content: space-between; gap: 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
}
.oeuvre-nav a { color: var(--grey); }
.oeuvre-nav a:hover { color: var(--bordeaux); }

/* =========================================================
   8. PAGES ÉDITORIALES (À PROPOS, SAVOIR-FAIRE)
   ========================================================= */
.editorial-page { padding-bottom: var(--pad-section); }

.editorial-intro {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  padding: calc(var(--pad-section) * 0.9) var(--pad-x) calc(var(--pad-section) * 0.6);
}
.editorial-intro .page-hero__title { margin-bottom: 2rem; }

/* v2.6.12 — Page Contact & Acquisition : titre tenu sur une seule ligne
   sur desktop (nowrap ≥ 900px), fluide et sans débordement en dessous.
   Ciblé sur .contact-page uniquement : aucun autre titre n'est modifié. */
.contact-page .editorial-intro { max-width: 60rem; }
.contact-page .page-hero__title { font-size: clamp(2rem, 4.6vw, 3.35rem); }
.contact-page .editorial-intro .lead { max-width: 46rem; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .contact-page .page-hero__title { white-space: nowrap; }
}

.editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
}
.editorial-split--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
@media (max-width: 900px) {
  .editorial-split, .editorial-split--reverse { grid-template-columns: 1fr; }
}

.editorial-split__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ivory-3);
  position: sticky;
  top: 7rem;
}
.editorial-split__media img { width: 100%; height: 100%; object-fit: cover; }

.editorial-content { max-width: var(--maxw-text); }
.editorial-content h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 2.75em 0 0.9em;
}
.editorial-content h2:first-child { margin-top: 0; }
.editorial-content blockquote {
  margin: 2.5em 0;
  padding-left: 2rem;
  border-left: 1px solid var(--bordeaux);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--bordeaux);
}

/* Contenu WordPress générique */
/* v2.7.0 (RC3) — taille et largeur du texte éditorial : réglables dans
   Personnaliser > BEYLAG > Typographie & largeur de lecture, plus une
   dérogation facultative par contenu (metabox « Mise en page BEYLAG »).
   AUCUNE règle de taille n'est ajoutée ici par défaut : .entry-content et
   .editorial-content continuent d'HÉRITER la taille du body (1.1875rem),
   exactement comme avant la v2.7.0. Quand un réglage est renseigné, le CSS
   correspondant (taille calculée en PHP, sans calc() ni division/multipli-
   cation de longueurs) est ajouté par inc/dynamic-css.php (global) ou
   inc/layout-controls.php (par page, ciblé sur son <body>). --maxw-text
   reste une simple variable CSS (aucune arithmétique), vide = 44rem actuel. */
.entry-content > * { max-width: var(--maxw-text); margin-left: auto; margin-right: auto; }
.entry-content .alignwide { max-width: 1200px; }
.entry-content .alignfull { max-width: none; }
.entry-content img { margin: 2.5em auto; }

/* ---------------------------------------------------------
   Images de contenu ÉDITORIAL uniquement (pages classiques,
   articles / Notes d'atelier et tout template éditorial basé
   sur .entry-content). Affichage sobre et maîtrisé.
   NB : les fiches œuvres utilisent « .oeuvre-text entry-content »
   et sont explicitement exclues via :not(.oeuvre-text), tout
   comme les galeries, cartes et aperçus d'œuvres qui ne sont
   jamais rendus dans .entry-content.
   --------------------------------------------------------- */
.entry-content:not(.oeuvre-text) > figure.wp-block-image,
.entry-content:not(.oeuvre-text) > .wp-block-image,
.entry-content:not(.oeuvre-text) > p:has(> img) {
  max-width: min(100%, var(--edito-img-maxw, 940px));
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.entry-content:not(.oeuvre-text) img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--edito-img-maxw, 940px));
  max-height: var(--edito-img-maxh, 600px);
  margin: 2.75em auto;
  object-fit: cover;
}
.entry-content:not(.oeuvre-text) figure.wp-block-image {
  margin-top: 2.75em;
  margin-bottom: 2.75em;
}
.entry-content:not(.oeuvre-text) figure.wp-block-image img {
  margin-top: 0;
  margin-bottom: 0;
}
.entry-content:not(.oeuvre-text) figure.wp-block-image figcaption {
  text-align: center;
}
@media (max-width: 640px) {
  .entry-content:not(.oeuvre-text) > figure.wp-block-image,
  .entry-content:not(.oeuvre-text) > .wp-block-image,
  .entry-content:not(.oeuvre-text) > p:has(> img) {
    max-width: 100%;
  }
  .entry-content:not(.oeuvre-text) img {
    max-width: 100%;
    max-height: none;
    margin: 1.9em auto;
  }
}
.entry-content blockquote {
  margin: 2.5em auto;
  padding-left: 2rem;
  border-left: 1px solid var(--bordeaux);
  font-style: italic;
  font-size: 1.3rem;
}
.entry-content a { border-bottom: 1px solid var(--grey-soft); }
.entry-content a:hover { border-color: var(--bordeaux); }

/* =========================================================
   9. JOURNAL — LISTE & ARTICLE
   ========================================================= */
.journal-archive { padding-bottom: var(--pad-section); }

.single-article { padding-bottom: var(--pad-section); }
.single-article__header {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--pad-section) * 0.8) var(--pad-x) 3.5rem;
}
.single-article__media {
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 var(--pad-x);
}
.single-article__media img { width: 100%; }

/* ---------------------------------------------------------
   v2.6.12 — Images de COUVERTURE / mises en avant ÉDITORIALES.
   S'applique aux Notes d'atelier / articles (.single-article),
   aux pages classiques (.editorial-page = page.php) et aux
   événements. Mêmes limites que les images de contenu éditorial
   (variables --edito-img-* de la v2.6.11), pour un rendu contenu
   et non « monumental ».
   EXCLUSIONS volontaires : la page projet de L'Œil de BEYLAG
   (.projet-single) garde sa couverture inchangée, tout comme les
   œuvres (.oeuvre-hero), galeries, cartes, aperçus et le hero
   d'accueil, qui vivent hors de .single-article__media.
   --------------------------------------------------------- */
.single-article:not(.projet-single) .single-article__media img,
.editorial-page .single-article__media img {
  display: block;
  width: auto;
  max-width: min(100%, var(--edito-img-maxw, 940px));
  height: auto;
  max-height: var(--edito-img-maxh, 600px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px) {
  .single-article:not(.projet-single) .single-article__media img,
  .editorial-page .single-article__media img {
    max-width: 100%;
    max-height: none;
  }
}
.single-article .entry-content { padding: 0 var(--pad-x); }

.post-meta {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
}

/* =========================================================
   10. CONTACT / ACQUISITION
   ========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 9rem);
  padding-bottom: var(--pad-section);
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-aside p { color: var(--grey); }
.contact-aside .contact-line {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.beylag-form { max-width: 40rem; }
.beylag-form .form-row { margin-bottom: 2.25rem; }
.beylag-form label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.7rem;
}
.beylag-form input[type="text"],
.beylag-form input[type="email"],
.beylag-form select,
.beylag-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0.75rem 0;
  font-family: var(--font-editorial);
  font-size: 1.15rem;
  color: var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color 0.35s var(--ease);
}
.beylag-form input:focus,
.beylag-form select:focus,
.beylag-form textarea:focus { border-bottom-color: var(--bordeaux); }
.beylag-form input:focus-visible,
.beylag-form textarea:focus-visible {
  border-bottom-color: var(--bordeaux);
  box-shadow: 0 1px 0 0 var(--bordeaux);
}
.beylag-form textarea { min-height: 9rem; resize: vertical; }
.beylag-form select { appearance: none; cursor: pointer; }

.form-notice {
  border: 1px solid var(--hairline);
  background: var(--ivory-2);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}
.form-notice--ok { border-color: var(--bordeaux); }

/* v2.6.13 §8 — Panneaux de message (succès / erreur) Contact & Invitation.
   Sobres, aux couleurs BEYLAG, accessibles (aria-live + focus déplacé en JS).
   Couleurs pilotables dans Personnaliser > BEYLAG > Coordonnées & formulaires. */
.beylag-msg {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 1px solid var(--hairline);
  background: var(--ivory-2);
  color: var(--ink);
  padding: 1.35rem 1.6rem;
  margin-bottom: 2.5rem;
  border-radius: 2px;
  animation: beylag-msg-in 0.5s var(--ease) both;
}
.beylag-msg:focus { outline: none; }
.beylag-msg:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.beylag-msg--ok { border-left: 3px solid var(--bordeaux); }
.beylag-msg--error { border-left: 3px solid #8a2b2b; }
.beylag-msg__body { flex: 1 1 auto; min-width: 0; }
.beylag-msg__title {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.beylag-msg__text { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.beylag-msg__img { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.beylag-msg--visual { flex-direction: column; gap: 1rem; }
.beylag-msg--visual .beylag-msg__img { width: 100%; height: auto; max-height: 260px; }
.form-privacy { margin-top: 1.5rem; font-size: 0.8rem; line-height: 1.6; color: var(--grey); }
@keyframes beylag-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .beylag-msg { animation: none; }
}
@media (max-width: 560px) {
  .beylag-msg { flex-direction: column; }
  .beylag-msg__img { width: 100%; height: auto; max-height: 200px; }
}

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer {
  background: var(--bordeaux);
  color: var(--ivory);
  padding: calc(var(--pad-section) * 0.75) 0 3rem;
}
.site-footer a { color: var(--ivory); }
.site-footer a:hover { opacity: 0.65; color: var(--ivory); }

.site-footer__logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.9rem;
}
.site-footer__tagline {
  text-align: center;
  font-style: italic;
  color: rgba(255, 254, 252, 0.65);
  margin-bottom: 4.5rem;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 3rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--hairline-dark);
}
@media (max-width: 800px) { .site-footer__cols { grid-template-columns: 1fr; text-align: center; } }

.site-footer__col h4 {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 254, 252, 0.55);
  margin-bottom: 1.5rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 0.8rem; font-size: 1.0325rem; }

.site-footer__bottom {
  margin-top: 4.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: rgba(255, 254, 252, 0.5);
}
.site-footer__bottom a { color: rgba(255, 254, 252, 0.5); }
.site-footer__bottom a:hover { color: var(--ivory); opacity: 1; }

/* =========================================================
   12. DIVERS (404, recherche, commentaires)
   ========================================================= */
.error-404 {
  min-height: 60vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--pad-section) var(--pad-x);
}

.search-form-inline {
  display: flex;
  border-bottom: 1px solid var(--hairline);
  max-width: 26rem;
  margin: 2rem auto 0;
}
.search-form-inline input[type="search"] {
  flex: 1; border: 0; background: transparent;
  padding: 0.8rem 0; outline: none;
  font-family: var(--font-editorial); font-size: 1.1rem;
}
.search-form-inline input[type="search"]:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.search-form-inline button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.625rem;
  letter-spacing: var(--ls-mid); text-transform: uppercase;
}

.comments-area { max-width: var(--maxw-text); margin: 5rem auto 0; padding: 0 var(--pad-x); }
.comments-area .comment-list { list-style: none; padding: 0; }
.comments-area .comment { border-top: 1px solid var(--hairline); padding: 1.75rem 0; }

/* =========================================================
   13. ACCUEIL EN BLOCS (Gutenberg) — .front-canvas
   ========================================================= */
.front-canvas { overflow-x: clip; }
.front-canvas > * { margin-top: 0; margin-bottom: 0; }
.front-canvas .alignfull { width: 100%; max-width: none; }

/* Sections (groupes) : mêmes rythmes que le thème */
.front-canvas .section > .wrap > * + * { margin-top: 0; }
.front-canvas .section .eyebrow { margin-bottom: 1.75rem; }
.front-canvas .section .section-title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.front-canvas .manifesto .eyebrow { color: rgba(255, 254, 252, 0.5); }
.front-canvas .section--ink .eyebrow { color: rgba(255, 254, 252, 0.5); }
.front-canvas .manifesto .manifesto__text { margin: 0 auto 2.5rem; }
.front-canvas .acquire .lead { max-width: var(--maxw-text); margin-left: auto; margin-right: auto; }
.front-canvas .acquire .wp-block-buttons { margin-top: 2.5rem; justify-content: center; }
.front-canvas .newsletter__inner > p:not(.eyebrow) { max-width: 40rem; margin-left: auto; margin-right: auto; }
.section-more { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }

/* Hero en bloc Couverture */
.hero-cover.wp-block-cover {
  padding: 0 var(--pad-x) clamp(3.5rem, 8vh, 6.5rem);
  align-items: flex-end;
  justify-content: flex-start;
  background: var(--bordeaux-deep);
}
.hero-cover .wp-block-cover__inner-container {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  color: var(--ivory);
}
.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 254, 252, 0.75);
  margin-bottom: 2rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  font-weight: 500;
  color: var(--ivory);
  max-width: 16em;
  margin-bottom: 2.5rem;
  line-height: 1.12;
}
.hero-cover .wp-block-buttons { gap: 1.5rem 2.5rem; }

/* Boutons (blocs natifs) : sobriété BEYLAG */
.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 1.05rem 2.6rem;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.wp-block-button__link:hover { background: var(--ink); color: var(--ivory); }
.wp-block-button.btn-bordeaux .wp-block-button__link { border-color: var(--bordeaux); color: var(--bordeaux); }
.wp-block-button.btn-bordeaux .wp-block-button__link:hover { background: var(--bordeaux); color: var(--ivory); }
.hero-cover .wp-block-button .wp-block-button__link,
.section--bordeaux .wp-block-button .wp-block-button__link,
.section--ink .wp-block-button .wp-block-button__link {
  border-color: var(--ivory);
  color: var(--ivory);
  background: transparent;
}
.hero-cover .wp-block-button .wp-block-button__link:hover,
.section--bordeaux .wp-block-button .wp-block-button__link:hover,
.section--ink .wp-block-button .wp-block-button__link:hover { background: var(--ivory); color: var(--ink); }

/* Savoir-faire (colonnes natives) */
.craft-cols { gap: clamp(3rem, 7vw, 8rem); }
.craft-image img { width: 100%; height: auto; display: block; }
.craft-list {
  list-style: none;
  margin: 2.5rem 0 3rem;
  padding: 0;
  counter-reset: craft;
  border-top: 1px solid var(--hairline);
}
.craft-list li {
  counter-increment: craft;
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.0625rem;
}
.craft-list li::before {
  content: "0" counter(craft);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  color: var(--grey);
}
.section--bordeaux .craft-list li,
.section--bordeaux .craft-list { border-color: var(--hairline-dark); }

/* Citation native */
.front-canvas .wp-block-quote,
.entry-content .wp-block-quote {
  border-left: 1px solid var(--bordeaux);
  padding-left: 2rem;
  font-style: italic;
  color: var(--bordeaux);
}

/* Impression : sobre */
@media print {
  .site-header, .site-footer, .hero__scroll { display: none; }
}


/* =========================================================
   14. v2 — SOUS-TITRE COLLECTION, ARTISTE, ÉVÉNEMENTS,
       ACQUISITION, PROJETS (mêmes rythmes que le thème)
   ========================================================= */

/* Sous-titre de la section Œuvres choisies */
.collection-subtitle {
  max-width: 38rem;
  font-size: 1.2rem;
  color: var(--grey);
  margin: -1.5rem 0 0;
}
.section-head--stack { margin-bottom: clamp(3rem, 6vw, 5rem); }
.front-collection .section-more { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }

/* Page Artiste : hero immersif */
.artiste-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background: var(--bordeaux-deep);
  color: var(--ivory);
  overflow: hidden;
}
.artiste-hero__image { position: absolute; inset: 0; }
.artiste-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.artiste-hero__image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 9, 7, 0.55), rgba(15, 9, 7, 0.05) 55%);
}
.artiste-hero__content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(8rem, 18vh, 12rem) var(--pad-x) clamp(3.5rem, 8vh, 6rem);
}
.artiste-hero__content .page-hero__title,
.artiste-hero__content .lead { color: var(--ivory); }
.artiste-hero__content .eyebrow { color: rgba(255, 254, 252, 0.7); }
.artiste-hero__content .lead { max-width: 34rem; }

.artiste-content {
  padding: calc(var(--pad-section) * 0.7) var(--pad-x) 0;
}
.artiste-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: calc(var(--pad-section) * 0.5) var(--pad-x) 0;
}
/* Page Artiste : textes pilotés depuis le Customizer (additif, n'altère pas le rendu existant). */
.artiste-content .artiste-intro { margin: 0 auto; max-width: var(--maxw-text); }
.artiste-content .artiste-bloc { margin: clamp(1.75rem, 4vw, 3rem) auto 0; max-width: var(--maxw-text); }
.artiste-content .artiste-chute {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: var(--maxw-text);
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--grey);
}

/* Événements */
.events-archive { padding-bottom: var(--pad-section); }
.events-group + .events-group { margin-top: calc(var(--pad-section) * 0.8); }
.events-group > .section-title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.events-list { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

.event-card {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 800px) { .event-card { grid-template-columns: 1fr; } }
.event-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ivory-3);
}
.event-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.event-card:hover .event-card__media img { transform: scale(1.03); }
.event-card__date {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--bordeaux);
  display: block;
  margin-bottom: 0.8rem;
}
.event-card__title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 0.5rem; }
.event-card__place {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1rem;
}
.event-card__excerpt { color: var(--grey); margin-bottom: 1.5rem; }
.event-card--past { opacity: 0.72; }
.event-card--past .event-card__date { color: var(--grey); }

/* Acquisition : processus & réassurance */
.acq-process { max-width: var(--maxw-text); margin: 0 auto; }
.acq-reassurance { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.acq-reassurance li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.0325rem;
}
.acq-reassurance li:first-child { border-top: 1px solid var(--hairline); }

/* Projets — L'Œil de BEYLAG */
.projet-card__excerpt {
  font-size: 1.0325rem;
  color: var(--grey);
  line-height: 1.65;
  margin-top: 0.5rem;
}

/* Fiche œuvre : prix (mode boutique) */
.oeuvre-price {
  font-family: var(--font-editorial);
  font-size: 1.4rem;
  color: var(--bordeaux);
  margin-bottom: 0.5rem;
}


/* =========================================================
   15. v2.1 — APERÇU ARTISTE (accueil) & DIVERS
   ========================================================= */
.front-artist .craft__media img { width: 100%; height: 100%; object-fit: cover; }
.craft--reverse .craft__media { order: 2; }
@media (max-width: 900px) { .craft--reverse .craft__media { order: 0; } }
.front-artist p { max-width: 34em; }
.front-artist .btn { margin-top: 0.5rem; }

/* L'Œil de BEYLAG (accueil) : introduction */
.front-oeil .oeil-intro {
  max-width: 38rem;
  color: var(--grey);
  margin: -1.5rem 0 0;
}
.front-oeil .section-more { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.front-journal .section-more { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }


/* =========================================================
   16. v2.2 — SÉPARATEURS DE SECTIONS, RYTHME DE L'ACCUEIL,
       MENU DÉROULANT PREMIUM
   ========================================================= */

/* Séparateur premium entre sections de l'accueil */
.section-sep {
  padding: 0 var(--pad-x);
  display: flex;
  justify-content: center;
}
.section-sep span {
  display: block;
  width: 100%;
  max-width: 72px;
  border-top: 1px solid var(--hairline);
}

/* Rythme : l'aperçu L'Œil de BEYLAG se détache sur ivoire doux */
.front-oeil { background: var(--ivory-2); }

/* v2.6.13 §7 — Menu déroulant « Objet de la demande » : panneau ivoire, filet
   fin, flèche discrète, focus clavier visible — cohérent avec la DA BEYLAG et
   sans chrome bleu/gris du navigateur. Reste un <select> natif accessible.
   Entièrement pilotable dans Personnaliser > BEYLAG > Coordonnées &
   formulaires (texte, fond, bordure, flèche, taille, hauteur). */
.beylag-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 100%;
  background-color: var(--ivory-2);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.95rem 2.9rem 0.95rem 1rem;
  font-family: var(--font-editorial);
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C857C' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.beylag-form select:hover { border-color: var(--grey-soft); }
.beylag-form select:focus { border-color: var(--bordeaux); }
.beylag-form select:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 2px;
  border-color: var(--bordeaux);
}
.beylag-form select option {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--ivory);
}


/* =========================================================
   17. v2.4 — INVITATION PRIVÉE (champ e-mail) & ŒIL SPLIT
   ========================================================= */

/* Sur le fond brun par défaut, le placeholder et la saisie restent ivoire */
.front-newsletter .newsletter__form input[type="email"] { color: inherit; }
.front-newsletter .newsletter__form input[type="email"]::placeholder {
  color: rgba(255, 254, 252, 0.55);
  opacity: 1;
}
.front-newsletter .newsletter__form { border-bottom-color: rgba(255, 254, 252, 0.28); }

/* Aperçu L'Œil de BEYLAG : image + texte (même grille que l'aperçu artiste) */
.front-oeil .craft__media img { width: 100%; height: 100%; object-fit: cover; }
.front-oeil .oeil-text p { max-width: 34em; }
.front-oeil .oeil-text .btn { margin-top: 0.5rem; }
.front-oeil .works-grid { margin-top: clamp(3.5rem, 7vw, 6rem); }


/* =========================================================
   18. v2.6 — ZOOM/CADRAGE PAR FICHE, COUVERTURE ARTISTE,
       BANDEAU COOKIES, NOTES D'ATELIER ÉDITORIALES
   ========================================================= */

/* Zoom et cadrage propres à chaque fiche (spécificité supérieure aux
   réglages globaux ; l'animation de survol est conservée) */
.works-grid .work-card .work-card__media.has-apz img {
  transform: scale(var(--apz, 1));
  object-position: var(--appos, center);
}
.works-grid .work-card:hover .work-card__media.has-apz img {
  /* v2.6.13 §5 — survol = cadrage statique × facteur commun : même « pop »
     relatif que les cartes sans cadrage (au lieu d'un ancien delta additif
     qui rendait le mouvement du dessin plus faible). */
  transform: scale(calc(var(--apz, 1) * var(--hoverzoom, 1.03)));
}

/* Couverture de la page Artiste : le zoom réglable ne déborde pas */
.artiste-hero__image { overflow: hidden; }
.artiste-hero__image img { transition: none; }

/* Notes d'atelier (accueil) en disposition éditoriale */
.front-journal .craft .journal-card { margin: 0; }
.front-journal .journal-text p { max-width: 34em; }
.front-journal .journal-text .btn { margin-top: 0.5rem; }

/* Lien « Préférences cookies » du footer (bouton discret) */
.cookie-prefs-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: inherit;
  transition: opacity 0.35s var(--ease);
}
.cookie-prefs-link:hover { opacity: 0.65; }

/* Bandeau cookies : sobre, en pied d'écran */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--ivory);
  padding: 1.5rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  box-shadow: 0 -20px 60px rgba(22, 17, 14, 0.18);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
  margin: 0;
  font-size: 0.98rem;
  max-width: 46rem;
}
.cookie-banner__actions { display: flex; align-items: center; gap: 1.8rem; }
.cookie-banner .btn {
  border-color: var(--ivory);
  color: var(--ivory);
  padding: 0.7rem 1.8rem;
}
.cookie-banner .btn:hover { background: var(--ivory); color: var(--ink); }
.cookie-banner .text-link { color: inherit; border-color: rgba(255, 254, 252, 0.4); }

/* =========================================================
   19. v2.7.1 — NAVIGATION TACTILE EN UN SEUL APPUI
   ========================================================= */

/* Supprime le délai/zoom historique du double-tap sans modifier la navigation
   au clavier ni les animations des appareils équipés d'une vraie souris. */
a,
button,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

/* Sur un écran tactile, un premier appui ne doit jamais être consommé pour
   jouer le zoom ou le soulignement de survol d'une carte. Le cadrage manuel
   de l'œuvre (--apz) est conservé. */
@media (hover: none), (pointer: coarse) {
  .work-card:hover .work-card__media img,
  .journal-card:hover .journal-card__media img,
  .event-card:hover .event-card__media img {
    transform: none !important;
  }

  .works-grid .work-card:hover .work-card__media.has-apz img {
    transform: scale(var(--apz, 1)) !important;
  }

  .mobile-panel a:hover {
    background-size: 0% 1px;
  }
}