/* ==========================================================================
   EYNSO · Projets — mise en page v2 (« le papier reçoit l'encre »)
   Chargée seulement sur les pages qui contiennent la classe ep-v2.
   Chaque section porte « ep ep-v2 » ; les blocs portent des classes v2-…
   (onglet Avancé → Classes CSS). Les couleurs passent par les variables
   de ep.css (--ep-fg, --ep-body, --ep-muted, --ep-line, --ep-accent),
   donc les fonds sombres (ep--dark) et bleus fonctionnent tout seuls.
   ========================================================================== */

.ep.ep-v2 {
  --ep-gutter: clamp(20px, 5.2vw, 96px);
  --ep-max: 1480px;
  --ep-fg: var(--ep-ink);
  --ep-body: var(--ep-text);
  --ep-muted: var(--ep-wash);
  --ep-line: rgba(13, 12, 10, .16);
  --ep-accent: var(--ep-ink);
  color: var(--ep-body);
}
@media (min-width: 2200px) { .ep.ep-v2 { --ep-max: 1720px; } }
.ep.ep-v2.ep--dark {
  --ep-fg: var(--ep-paper);
  --ep-body: #E4DFD4;
  --ep-muted: #A39D91;
  --ep-line: rgba(242, 240, 233, .2);
}
/* Encre d'accent de chaque chapitre */
.ep.v2-acc-carmin { --ep-accent: var(--ep-carmin); }
.ep.v2-acc-ink { --ep-accent: var(--ep-ink); }
.ep.v2-acc-paper { --ep-accent: var(--ep-paper); }
.ep.v2-acc-water { --ep-accent: var(--ep-water); }
.ep.v2-acc-cobalt { --ep-accent: var(--ep-cobalt); }

/* Largeurs de lecture (passent devant le « max-width: 100% » d'Elementor) */
.ep.ep-v2 .e-con > .elementor-element.elementor-widget:is(.v2-lede, .v2-prose, .v2-statement__text, .v2-band__quote, .v2-band__thanks, .v2-def__d) { max-width: var(--ep-mw, 100%); }
/* Elementor passe les conteneurs en « wrap » sur mobile : une colonne ne doit jamais se replier */
.ep.ep-v2 .e-con { --flex-wrap: nowrap; }
.ep.ep-v2 .e-con.ep-actions, .ep.ep-v2 .e-con.v2-seq__head { --flex-wrap: wrap; }
.ep.ep-v2 .ep-btn-w { margin-top: 0; }
.ep.ep-v2 .ep-verse { margin-block: 0; }

/* -------------------------------------------------- Typographie */
.ep.ep-v2 .v2-kind, .ep.ep-v2 .v2-hint, .ep.ep-v2 .v2-mark {
  font-family: var(--ep-f-ui); font-weight: 400; font-size: 14px; line-height: 1.35; letter-spacing: .02em;
  color: var(--ep-muted);
}
.ep.ep-v2 .v2-mark { font-size: 15px; }
.ep.ep-v2 .v2-mark b, .ep.ep-v2 .v2-mark strong { font-weight: 500; color: var(--ep-fg); }
.ep.ep-v2 .v2-h1 {
  font-family: var(--ep-f-display); font-weight: 600;
  font-size: clamp(76px, 13.5vw, 228px); line-height: .8; letter-spacing: -.035em;
  color: var(--ep-fg);
  margin-left: -.05em; padding-bottom: .14em;
}
.ep.ep-v2 .v2-h2 {
  font-family: var(--ep-f-display); font-weight: 600;
  font-size: clamp(44px, 4.6vw + 14px, 100px); line-height: .96; letter-spacing: -.02em;
  color: var(--ep-fg); text-wrap: balance;
}
.ep.ep-v2 .v2-h3 {
  font-family: var(--ep-f-display); font-weight: 600;
  font-size: clamp(28px, 1.4vw + 18px, 42px); line-height: 1.08;
  color: var(--ep-fg); text-wrap: balance;
}
.ep.ep-v2 .v2-lede {
  --ep-mw: 26em;
  font-size: clamp(23px, .9vw + 17px, 31px); line-height: 1.32;
  color: var(--ep-fg); text-wrap: pretty;
}
.ep.ep-v2 .v2-prose { --ep-mw: 33em; text-wrap: pretty; }
.ep.ep-v2 .v2-prose p + p { margin-top: .9em; }
/* Grand numéro au trait : le numéro de catalogue de chaque trace */
.ep.ep-v2 .v2-num {
  font-family: var(--ep-f-display); font-weight: 300;
  font-size: clamp(76px, 7vw + 20px, 150px); line-height: .78; letter-spacing: -.02em;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  color: transparent; -webkit-text-stroke: 1px rgba(58, 52, 43, .5);
  user-select: none; -webkit-user-select: none;
}
.ep.ep-v2 .v2-num .elementor-heading-title { color: transparent; -webkit-text-stroke: inherit; }
.ep.ep-v2.ep--dark .v2-num { -webkit-text-stroke-color: rgba(242, 240, 233, .45); }

/* Citation (widget Vers) : italique le long d'un filet */
.ep.ep-v2 .v2-pull .ep-verse {
  gap: 0; max-width: 24em; padding-left: .9em; border-left: 2px solid var(--ep-accent);
  font-size: clamp(25px, 1.3vw + 18px, 38px);
}
.ep.ep-v2 .v2-pull .ep-verse > span {
  font-family: var(--ep-f-display); font-style: italic; font-weight: 500;
  font-size: inherit; line-height: 1.22; color: var(--ep-fg); text-wrap: balance;
}
.ep.ep-v2 .ep-verse .ep-cite { margin-top: .7em; font-size: 14px; letter-spacing: .02em; text-transform: none; color: var(--ep-muted); }
/* Lignes-manifeste (widget Vers, droit) */
.ep.ep-v2 .v2-lines .ep-verse { gap: 6px; padding-left: .9em; padding-right: 0; border-left: 2px solid var(--ep-accent); border-right: 0; justify-items: start; text-align: left; }
.ep.ep-v2 .v2-lines .ep-verse > span {
  font-family: var(--ep-f-display); font-style: normal; font-weight: 600;
  font-size: clamp(24px, .9vw + 18px, 32px); line-height: 1.22; color: var(--ep-fg);
}
/* Grande citation bleue (The Trace) */
.ep.ep-v2 .v2-bigquote .ep-verse { gap: 0; max-width: 14em; padding: 0; border: 0; font-size: clamp(32px, 2.6vw + 14px, 58px); }
.ep.ep-v2 .v2-bigquote .ep-verse > span {
  font-family: var(--ep-f-display); font-style: italic; font-weight: 500;
  font-size: inherit; line-height: 1.08; color: var(--ep-cobalt); text-wrap: balance;
}

/* -------------------------------------------------- Boutons : libellé + flèche, trait de pinceau au survol (brush.css) */
.ep.ep-v2 .ep-btn-w .elementor-button, .ep.ep-v2 .ep-btn:not(.ep-z) {
  min-height: 48px; padding: .7em 1.5em .7em 1.15em;
  font-size: 16px; letter-spacing: .01em; text-transform: none;
}
.ep.ep-v2 .ep-actions { gap: 12px 32px; margin-top: 6px; }
.ep.ep-v2 .v2-btn-box .elementor-button { padding: .8em 1.5em; }
/* Bouton « film » sous l'ensō */
.ep.ep-v2 .v2-filmbtn { align-self: center; }
.ep.ep-v2 .v2-filmbtn .elementor-button { min-height: 44px; font-size: 14px; letter-spacing: .02em; }
.ep.ep-v2 .v2-filmbtn .elementor-button-icon { width: auto; height: auto; border: 0; border-radius: 0; }
.ep.ep-v2 .v2-filmbtn .elementor-button-icon svg { width: 11px; height: 11px; margin: 0; }

/* -------------------------------------------------- 00 · Ouverture : ensō peint, vidéo dans le cercle */
.ep.ep-v2 .v2-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  grid-template-areas: "text figure";
  align-items: center;
  --column-gap: clamp(24px, 4vw, 72px); --row-gap: 32px;
  --padding-top: clamp(40px, 7vh, 96px); --padding-bottom: clamp(56px, 9vh, 120px);
}
.ep.ep-v2 .v2-hero__text { grid-area: text; position: relative; z-index: 3; --row-gap: clamp(22px, 3.2vh, 40px); }
.ep.ep-v2 .v2-hero__text .v2-lede { --ep-mw: 21em; }
.ep.ep-v2 .v2-hero__figure { grid-area: figure; position: relative; z-index: 1; --row-gap: 8px; }
.ep.ep-v2 .v2-hero__figure .ep-enso { width: min(100%, 660px); }
@media (max-width: 899px) {
  .ep.ep-v2 .v2-hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "figure" "text"; --padding-top: 28px; }
  .ep.ep-v2 .v2-hero__figure .ep-enso { width: min(100%, 520px); }
}

/* -------------------------------------------------- 01 · Prologue */
.ep.ep-v2 .v2-prologue__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "media text";
  align-items: center;
  --column-gap: clamp(32px, 6vw, 112px); --row-gap: 40px;
  --padding-top: clamp(80px, 12vh, 150px); --padding-bottom: clamp(80px, 12vh, 150px);
}
.ep.ep-v2 .v2-prologue__text { grid-area: text; --row-gap: 28px; }
.ep.ep-v2 .v2-prologue__grid > .v2-prologue__media { grid-area: media; }
@media (max-width: 899px) { .ep.ep-v2 .v2-prologue__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "media"; } }

/* -------------------------------------------------- 02 · Le rouleau des traces */
.ep.ep-v2 .ep-hs__pin { padding-block: clamp(72px, 10vh, 120px); }

/* -------------------------------------------------- Chapitres : ouverture (numéro, titre, image) */
.ep.ep-v2 .v2-open {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  --column-gap: clamp(16px, 2.2vw, 36px); --row-gap: 44px;
  --padding-top: clamp(88px, 13vh, 170px); --padding-bottom: clamp(56px, 9vh, 110px);
}
.ep.ep-v2 .v2-open > .v2-open__head { grid-column: 1 / span 6; --row-gap: 22px; }
.ep.ep-v2 .v2-open > .v2-open__media { grid-column: 8 / span 5; }
.ep.ep-v2 .v2-open--reverse > .v2-open__head { grid-column: 7 / span 6; }
.ep.ep-v2 .v2-open--reverse > .v2-open__media { grid-column: 1 / span 5; grid-row: 1; }
.ep.ep-v2 .v2-open__head .v2-kind { margin-top: 6px; }
.ep.ep-v2 .v2-open__media img { width: 100%; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ep-paper-2); }
.ep.ep-v2 .v2-open__media .widget-image-caption, .ep.ep-v2 .v2-open__media figcaption { margin-top: 10px; font-family: var(--ep-f-ui); font-size: 13px; color: var(--ep-muted); text-align: left; }
@media (max-width: 899px) {
  .ep.ep-v2 .v2-open > .v2-open__head, .ep.ep-v2 .v2-open > .v2-open__media,
  .ep.ep-v2 .v2-open--reverse > .v2-open__head, .ep.ep-v2 .v2-open--reverse > .v2-open__media { grid-column: 1 / -1; grid-row: auto; }
  .ep.ep-v2 .v2-open__media img { aspect-ratio: 4 / 4.4; }
}

/* Deux colonnes : texte + cartel, texte + questions… */
.ep.ep-v2 .v2-cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  --column-gap: clamp(36px, 6vw, 110px); --row-gap: 40px;
  --padding-top: clamp(56px, 9vh, 110px); --padding-bottom: clamp(56px, 9vh, 110px);
}
.ep.ep-v2 .v2-cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.ep.ep-v2 .v2-stack { --row-gap: 28px; }
@media (max-width: 899px) { .ep.ep-v2 .v2-cols, .ep.ep-v2 .v2-cols--even { grid-template-columns: minmax(0, 1fr); } }

/* Définition d'un état (Chromatic Sama) */
.ep.ep-v2 .v2-def {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline;
  --column-gap: 20px; --row-gap: 4px;
  max-width: 33em; padding-top: 18px; border-top: 1px solid var(--ep-line);
}
.ep.ep-v2 .v2-def__t { font-family: var(--ep-f-display); font-style: italic; font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--ep-fg); }
.ep.ep-v2 .v2-quote-wrap { --align-items: center; align-items: center; --padding-top: 8px; --padding-bottom: clamp(80px, 12vh, 150px); }

/* Champ / contrechamp */
.ep.ep-v2 .v2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ep.ep-v2 .v2-split__half {
  --justify-content: flex-end; justify-content: flex-end; --row-gap: 16px;
  min-height: clamp(320px, 46vh, 520px);
  --padding-top: clamp(48px, 7vw, 104px); --padding-bottom: clamp(48px, 7vw, 104px);
  --padding-left: max(var(--ep-gutter), env(safe-area-inset-left, 0px)); --padding-right: max(var(--ep-gutter), env(safe-area-inset-right, 0px));
}
.ep.ep-v2 .v2-split__half .elementor-widget-text-editor { max-width: 24em; }
.ep.ep-v2 .v2-split__half--champ { background-color: var(--ep-carmin); --ep-fg: var(--ep-sheet); --ep-body: #F3E7E3; --ep-muted: rgba(251, 250, 246, .74); color: var(--ep-body); }
.ep.ep-v2 .v2-split__half--contre { background-color: var(--ep-paper-2); --ep-fg: var(--ep-carmin); }
@media (max-width: 767px) { .ep.ep-v2 .v2-split { grid-template-columns: minmax(0, 1fr); } .ep.ep-v2 .v2-split__half { min-height: 0; } }

/* Phrase-manifeste */
.ep.ep-v2 .v2-statement { --align-items: center; align-items: center; text-align: center; --padding-top: clamp(88px, 15vh, 190px); --padding-bottom: clamp(88px, 15vh, 190px); }
.ep.ep-v2 .v2-statement__text {
  --ep-mw: 17em; margin-inline: auto;
  font-family: var(--ep-f-display); font-weight: 600;
  font-size: clamp(36px, 4.4vw + 10px, 88px); line-height: 1.04; letter-spacing: -.015em;
  color: var(--ep-accent); text-wrap: balance;
}
.ep.ep-v2 .v2-statement__text br { display: block; }

/* Sept états (Haft Rang) */
.ep.ep-v2 .v2-states-block { --row-gap: 36px; --padding-top: 8px; --padding-bottom: clamp(64px, 10vh, 120px); }
.ep.ep-v2 .v2-states-block__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; --column-gap: clamp(32px, 5vw, 96px); --row-gap: 24px; }
.ep.ep-v2 .v2-states-block__head .elementor-widget-text-editor { max-width: 32em; }
@media (max-width: 899px) { .ep.ep-v2 .v2-states-block__head { grid-template-columns: minmax(0, 1fr); } }
.ep.ep-v2 .v2-figure img { width: 100%; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; background: #1C1A17; }

/* -------------------------------------------------- Trace d'Eau */
.ep.ep-v2 .v2-qs .ep-qs li { font-style: normal; font-size: clamp(23px, .9vw + 17px, 30px); line-height: 1.25; }
.ep.ep-v2 .v2-qs .ep-qs li:hover { color: var(--ep-accent); }
.ep.ep-v2 .v2-padzone { --row-gap: 14px; --padding-top: 8px; --padding-bottom: clamp(48px, 7vh, 90px); }
.ep.ep-v2 .v2-padzone__cap > .elementor-widget-container, .ep.ep-v2 .v2-padzone__cap:not(:has(> .elementor-widget-container)) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.ep.ep-v2 .v2-padzone__cap p { font-family: var(--ep-f-ui); font-size: 14px; line-height: 1.5; color: var(--ep-muted); }
.ep.ep-v2 .v2-padzone .ep-pad-host { margin: 0; }
.ep.ep-v2 .v2-moves { --row-gap: clamp(64px, 10vh, 120px); --padding-top: clamp(40px, 6vh, 80px); --padding-bottom: clamp(72px, 10vh, 130px); }
.ep.ep-v2 .v2-move { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); --column-gap: clamp(16px, 2.2vw, 36px); }
.ep.ep-v2 .v2-move > .v2-move__body { grid-column: 1 / span 7; --row-gap: 22px; }
.ep.ep-v2 .v2-move--right > .v2-move__body { grid-column: 6 / span 7; }
@media (max-width: 899px) { .ep.ep-v2 .v2-move > .v2-move__body, .ep.ep-v2 .v2-move--right > .v2-move__body { grid-column: 1 / -1; } }
/* Fiche technique (widget Cartel en grille) */
.ep.ep-v2 .v2-spec .ep-facts { gap: 0; padding-top: 0; border-top: 1px solid var(--ep-line); }
.ep.ep-v2 .v2-spec .ep-facts > div { padding: 18px 20px 4px 0; }
.ep.ep-v2 .v2-spec .ep-facts dt { margin-bottom: 4px; font-size: 14px; letter-spacing: .02em; text-transform: none; color: var(--ep-muted); }
.ep.ep-v2 .v2-spec .ep-facts dd { font-family: var(--ep-f-display); font-size: 24px; line-height: 1.2; color: var(--ep-fg); }
@media (max-width: 479px) { .ep.ep-v2 .v2-spec .ep-facts { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------- The Trace : l'horizon, puis le bleu */
.ep.ep-v2 .v2-horizon {
  min-height: max(clamp(560px, 100vh, 1080px), 62.5vw);
  min-height: max(clamp(560px, 100svh, 1080px), 62.5vw);
  overflow: hidden; isolation: isolate;
  background-color: #C9B9A9; background-size: cover; background-repeat: no-repeat; background-position: 50% 62%;
}
.ep.ep-v2 .v2-horizon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, rgba(242, 236, 228, .5) 0%, rgba(242, 236, 228, 0) 42%);
}
.ep.ep-v2 .v2-horizon > .elementor-element { position: relative; z-index: 1; }
.ep.ep-v2 .v2-horizon__text { --row-gap: 12px; --padding-top: clamp(40px, 7vh, 110px); --padding-bottom: 40px; }
.ep.ep-v2 .v2-horizon__text .v2-num { font-size: clamp(56px, 4vw + 20px, 110px); -webkit-text-stroke-color: rgba(23, 47, 106, .7); }
.ep.ep-v2 .v2-horizon__text .v2-kind { font-size: 15px; color: var(--ep-cobalt-deep); }
.ep.ep-v2 .v2-horizon__title {
  font-family: var(--ep-f-display); font-weight: 600;
  font-size: clamp(60px, 6.4vw + 8px, 168px); line-height: .9; letter-spacing: -.03em;
  color: var(--ep-cobalt-deep);
}
@media (min-width: 900px) {
  .ep.ep-v2 .v2-horizon { background-position: 50% 56%; }
  .ep.ep-v2 .v2-horizon__text { --align-items: flex-end; align-items: flex-end; text-align: right; }
  .ep.ep-v2 .v2-horizon::after { background: linear-gradient(to bottom, rgba(242, 236, 228, .35) 0%, rgba(242, 236, 228, 0) 38%); }
}
.ep.ep-v2 .v2-seq { --padding-top: 8px; --padding-bottom: clamp(80px, 12vh, 140px); }
.ep.ep-v2 .v2-seq__head { align-items: baseline; justify-content: space-between; --row-gap: 12px; --column-gap: 32px; margin-bottom: 36px; }
.ep.ep-v2 .v2-seq__head > .elementor-widget { width: auto; }
.ep.ep-v2 .ep-seq__cap span { font-family: var(--ep-f-text); font-style: normal; font-size: 18px; line-height: 1.35; color: var(--ep-body); }
.ep.ep-v2 .ep-seq__cap b { font-size: 13px; letter-spacing: 0; color: var(--ep-cobalt); }
.ep.ep-v2 .ep-seq__link { border-radius: 0; background: var(--ep-paper-2); }

/* Bandeau bleu */
.ep.ep-v2 .v2-band {
  --ep-fg: var(--ep-sheet); --ep-body: rgba(251, 250, 246, .9); --ep-muted: rgba(251, 250, 246, .78); --ep-accent: var(--ep-sheet);
  background-color: var(--ep-cobalt); color: var(--ep-body);
  --padding-top: clamp(80px, 14vh, 170px); --padding-bottom: clamp(80px, 14vh, 170px);
}
.ep.ep-v2 .v2-band__inner { --row-gap: 28px; }
.ep.ep-v2 .v2-band__quote::before { content: ""; display: block; width: 56px; height: 3px; margin-bottom: 28px; border-radius: 2px; background: var(--ep-gold); }
.ep.ep-v2 .v2-band__quote {
  --ep-mw: 13em;
  font-family: var(--ep-f-display); font-weight: 600;
  font-size: clamp(40px, 5vw + 8px, 104px); line-height: 1; letter-spacing: -.02em;
  color: var(--ep-sheet); text-wrap: balance;
}
.ep.ep-v2 .v2-band__quote em { font-style: italic; font-weight: 500; color: #C9D6F5; }
.ep.ep-v2 .v2-band__src { margin-top: -10px; font-family: var(--ep-f-ui); font-size: 14px; color: var(--ep-muted); }
.ep.ep-v2 .v2-band__thanks { --ep-mw: 32em; font-size: 19px; }

/* -------------------------------------------------- Programmer une activation */
.ep.ep-v2 .v2-cta__inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end;
  --column-gap: clamp(28px, 5vw, 96px); --row-gap: 28px;
  --padding-top: clamp(80px, 12vh, 150px); --padding-bottom: clamp(80px, 12vh, 150px);
}
.ep.ep-v2 .v2-cta__inner .elementor-widget-text-editor { max-width: 30em; }
@media (max-width: 899px) { .ep.ep-v2 .v2-cta__inner { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------- Fiche et visionneuse (la page v2 les marque ep-v2) */
dialog.ep.ep-v2 .ep-fiche__head .ep-tag { font-size: 14px; letter-spacing: .02em; text-transform: none; color: var(--ep-wash); }
dialog.ep.ep-v2 .ep-fiche__title { font-weight: 600; }
dialog.ep.ep-v2 .ep-facts dt { font-size: 14px; letter-spacing: .02em; text-transform: none; color: var(--ep-wash); }
dialog.ep.ep-v2 .ep-verse { padding-left: .9em; border-left: 2px solid var(--ep-accent); }
dialog.ep.ep-v2 .ep-verse > span { font-style: italic; font-weight: 500; }
dialog.ep.ep-v2 .ep-fiche__nav small, dialog.ep.ep-v2 .ep-gal__count { font-size: 13px; letter-spacing: .02em; text-transform: none; }
dialog.ep.ep-v2 .ep-fiche__nav span { font-weight: 600; font-size: 22px; }