/* ============================================================
   V10 DESIGN OVERRIDES
   ============================================================ */

:root {
  --color-read-beige: #f2ead8;
  --text-hero-home:   clamp(3.2rem, 8vw, 8rem);
  --text-hero-page:   clamp(3.2rem, 8vw, 8rem);
  --text-display:     clamp(1.36rem, 2.08vw, 2.4rem);
  --text-closing:     clamp(1.2rem, 1.76vw, 2.24rem);
  --text-card-title:  clamp(1.52rem, 1.92vw, 2.24rem);
  --text-label:       clamp(0.92rem, 0.874rem + 0.23vw, 1.035rem);
  --text-baseline:    clamp(1.6rem, 1.44rem + 0.56vw, 2rem);
  --text-h4:          0.92rem;
  --text-quote:       clamp(1.04rem, 0.88rem + 0.56vw, 1.36rem);
}

body.page-parchemin {
  --page-accent: var(--color-cyan);
  --page-rgb: var(--rgb-cyan);
}

body.page-conversations {
  --page-accent: var(--color-cobalt);
  --page-rgb: var(--rgb-cobalt);
}

body.page-organisations {
  --page-accent: var(--color-orange);
  --page-rgb: var(--rgb-orange);
}

body.page-home,
body.page-charte,
body.page-forge,
body.page-les-bancs,
body.page-soutenir,
body.page-auteur {
  --page-accent: var(--color-magenta);
  --page-rgb: var(--rgb-magenta);
}

main :where(
  .page-intro p,
  .intro-copy-right p,
  .home-fracture .fracture-copy p,
  .entries-intro,
  .entries-intro p,
  .text-section .section-body p,
  .text-section .section-body li,
  .entry-card .home-read,
  .entry-card .entry-date,
  blockquote,
  .conversation-entry p:not(.conversation-topic)
) {
  color: var(--color-read-beige) !important;
}

body.page-home .home-fracture .fracture-copy p,
body .page-intro .intro-copy-right p,
body .text-section .section-body p:not(.voice-line):not(.cta-spaced):not(.conversation-person):not(.conversation-topic):not(.conversation-watch):not(.price-line):not(.machine-lines),
body .text-section .section-body li,
body.page-home .entry-card .home-read,
body.page-home .entry-card .entry-date,
body.page-conversations .conversations-list .section-body p:not(.conversation-person):not(.conversation-topic):not(.conversation-watch):not(.cta-spaced) {
  color: var(--color-read-beige) !important;
}

main :where(
  .brand-word,
  .voice,
  .voice-line,
  .voice-inline,
  strong,
  b,
  .conversation-topic,
  .page-kicker,
  .title-article,
  .title-name,
  .text-link,
  .home-read-link,
  .entry-card h3,
  .section-body h3,
  .section-body h4
),
.logo,
.site-nav,
.site-nav a,
.footer-brand,
.footer-links,
.footer-links a,
.footer-email {
  color: var(--color-white) !important;
}

main em {
  color: var(--color-read-beige) !important;
  font-family: var(--font-read) !important;
  font-style: italic !important;
  font-weight: inherit !important;
}

main :where(
  .micro,
  .section-label,
  .card-label,
  .field-label,
  .entry-status,
  .state-name,
  .conversation-person,
  .intro-label,
  .entry-eyebrow
) {
  font-weight: 800 !important;
  text-shadow: 0.018em 0 0 currentColor;
}

main :where(
  .micro,
  .section-label,
  .card-label,
  .field-label,
  .entry-status,
  .state-name,
  .conversation-person,
  .intro-label,
  .entry-eyebrow
) {
  color: var(--page-accent) !important;
}

main .entry-card :where(.micro, .section-label, .card-label, .field-label, .entry-status, .state-name) {
  color: var(--card-accent) !important;
}

.section-label .brand-word {
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  text-transform: inherit !important;
}

.site-nav a[data-nav-id="parchemin"]:hover,
.footer-links a[data-nav-id="parchemin"]:hover {
  color: var(--color-cyan) !important;
}

.site-nav a[data-nav-id="conversations"]:hover,
.footer-links a[data-nav-id="conversations"]:hover {
  color: var(--color-cobalt) !important;
}

.site-nav a[data-nav-id="organisations"]:hover,
.footer-links a[data-nav-id="organisations"]:hover {
  color: var(--color-orange) !important;
}

.site-nav a:hover,
.footer-links a:hover {
  color: var(--color-magenta) !important;
}

.brand-word {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.page-home .entry-card .home-read-link {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-weight: 700 !important;
}

.page-home {
  --home-lift: 2.35rem;
}

.page-home .hero-baseline::before {
  content: "";
  display: block;
  height: 1.05em;
}

.page-home .hero-baseline {
  bottom: calc(clamp(7.1rem, 13vh, 9.8rem) + var(--home-lift));
}

.page-home .home-fracture {
  margin-top: calc(-17rem - var(--home-lift));
  padding-top: calc(17rem - clamp(0.8rem, 2.2vw, 1.8rem) - 2.55rem);
}

.page-home .fracture-copy p:not(:last-child) {
  margin-bottom: 1.05em !important;
}

.page-home .fracture-copy p:nth-child(2) {
  margin-top: 0 !important;
}

.page-home #le-mouvement .section-body a {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

.page-home #le-mouvement .section-body a:hover {
  color: var(--page-accent) !important;
}

.entries-section .section-label.full {
  width: var(--measure-text);
  margin-left: var(--label-left);
  margin-right: 0;
  margin-bottom: 2.6rem;
  text-align: left;
}

.page-home .entries-grid {
  grid-template-columns: repeat(2, minmax(18rem, 24rem));
  justify-content: center;
  width: min(52rem, calc(100% - (var(--site-pad) * 2)));
  margin-left: auto;
  margin-right: auto;
}

.page-home .entry-card {
  grid-template-rows: auto auto auto 1fr;
  text-align: left;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.page-home .entry-card .card-visual {
  margin-top: 0;
}

body.page-home .entry-card .entry-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  line-height: 1.35;
  text-align: center;
  text-shadow: 0.018em 0 0 currentColor;
  text-transform: uppercase;
}

.page-home .entry-card h3 {
  display: block !important;
  min-height: 6.1rem;
  line-height: 1.08 !important;
  text-wrap: balance;
}

.page-home .entry-card h3 .brand-word {
  display: inline !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  text-shadow: none !important;
}

.page-home .entry-card .entry-copy {
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
}

.page-home .entry-card .home-read {
  min-height: 5.8em;
}

.page-home .entry-card .home-read-link {
  margin-top: auto;
  justify-self: start;
}

.page-organisations .page-hero h1 .brand-word {
  font-weight: inherit !important;
  text-shadow: none !important;
}

.mobile-break {
  display: none;
}

.price-line,
.section-body p.price-line,
.section-body p.price-line:first-of-type {
  font-size: clamp(0.86rem, 0.8rem + 0.28vw, 1.02rem) !important;
  line-height: 1.35 !important;
}

.page-parchemin #deux-formats .section-body h3:not(:first-child) {
  margin-top: 2.4em;
}

.page-parchemin #deux-acces .section-body h3:not(:first-child) {
  margin-top: 1.35em;
}

.conversations-list {
  padding-top: clamp(1.8rem, 3vw, 3rem);
}

.conversations-list .section-body {
  margin-top: 0;
}

.conversation-person {
  margin-top: 2.1rem !important;
  margin-bottom: 0.7rem !important;
}

/* Les noms des conversations sont des <h2> sémantiques.
   Neutralise .section-body h2 (display blanc, plus spécifique) pour
   conserver le rendu label : petite capitale Special Elite, accent de page. */
.section-body h2.conversation-person {
  margin: 2.1rem 0 0.7rem;
  font-size: var(--text-label);
  font-family: var(--font-voice);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.conversation-topic,
.section-body p.conversation-topic {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-size: var(--text-display) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  margin-top: 0 !important;
  margin-bottom: 0.8rem !important;
}

.conversation-watch,
.section-body p.conversation-watch {
  margin-top: 0.25rem !important;
  margin-bottom: 2.35rem !important;
}

.page-conversations .intro-copy-right p.cta-before {
  margin-top: 2.6em !important;
}

.machine-lines {
  font-size: var(--text-lead) !important;
  line-height: var(--leading-read) !important;
}

.machine-side {
  color: var(--color-read-beige) !important;
  font-family: var(--font-read) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.human-side {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.page-soutenir #trois-manieres-d-aider .section-body h3:not(:first-child) {
  margin-top: 1.35em !important;
}

.page-soutenir .section-body p.cta-spaced.cta-before {
  margin-top: 1.55em !important;
}

@media (min-width: 981px) {
  .conversations-list > .section-body {
    width: 100%;
    margin-left: 0;
  }

  .conversations-list .conversation-person {
    width: var(--measure-text);
    margin-left: var(--label-left) !important;
  }

  .conversations-list .section-body > p:not(.conversation-person) {
    width: min(58rem, calc(100% - var(--space-copy-shift)));
    margin-left: var(--space-copy-shift);
  }
}

main :where(.section-body a, .page-intro a, .intro-copy-right a) {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-weight: 700 !important;
}

/* Structure commune à la Home : une accroche courte à gauche, le second
   bloc d'introduction à droite, puis toutes les sections reviennent à gauche. */
@media (min-width: 901px) {
  .page-hero .page-intro.split-intro {
    width: 100%;
    max-width: none;
  }

  .page-hero .intro-copy-right {
    margin-right: var(--space-right-copy-inset);
  }
}

@media (max-width: 900px) {
  .hero-copy h1 { font-size: clamp(1.8rem, 10vw, 3.28rem); }
  .page-hero h1 { font-size: clamp(1.88rem, 10vw, 3.48rem); }

  .entries-section .section-label.full {
    width: min(100%, calc(100% - (var(--site-pad) * 2)));
    margin-left: var(--site-pad);
  }

  .page-home .entries-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(28rem, calc(100% - (var(--site-pad) * 2)));
  }

  .page-home .hero-baseline {
    bottom: calc(clamp(5.7rem, 12vh, 7.8rem) + var(--home-lift));
  }

  .page-home .hero-baseline .mobile-break {
    display: block;
  }

  .page-home .home-fracture {
    margin-top: calc(-11rem - var(--home-lift));
    padding-top: calc(11rem - clamp(0.8rem, 2.2vw, 1.8rem) - 2.25rem);
  }
}

/* ============================================================
   CRITICAL OVERRIDES, ex-bloc <style> inline de head.njk.
   Doit rester en fin de fichier : il gagne la cascade par ordre.
   ============================================================ */

:root { --color-read-beige: #f2ead8; }
body.page-home .home-fracture .fracture-copy p,
body .page-intro .intro-copy-right p,
body .text-section .section-body p:not(.voice-line):not(.cta-spaced):not(.conversation-person):not(.conversation-topic):not(.conversation-watch):not(.price-line):not(.machine-lines),
body .text-section .section-body li,
body.page-home .entry-card .home-read,
body.page-home .entry-card .entry-date,
body.page-conversations .conversations-list .section-body p:not(.conversation-person):not(.conversation-topic):not(.conversation-watch):not(.cta-spaced) {
  color: var(--color-read-beige) !important;
}
body.page-home .entry-card .entry-eyebrow {
  color: var(--color-white) !important;
  text-align: center !important;
}

.page-home .text-section .section-body p.home-signature {
  margin-top: 2.4em;
  font-size: clamp(0.92rem, 0.85rem + 0.2vw, 1.08rem);
  font-style: italic;
  line-height: 1.55;
}

/* Mobile : garde le fond image visible avec un voile sombre proche desktop.
   Le url() simple sert de secours aux navigateurs qui ignorent image-set(). */
@media (max-width: 900px) {
  html,
  body {
    background: #030005;
  }

  body::before {
    inset: -1rem;
    background:
      linear-gradient(90deg, rgba(2,0,5,0.76) 0%, rgba(3,0,6,0.34) 50%, rgba(2,0,5,0.76) 100%),
      linear-gradient(180deg, rgba(2,0,5,0.86) 0%, rgba(2,0,5,0.42) 36%, rgba(2,0,5,0.48) 64%, rgba(2,0,5,0.86) 100%),
      url("incalculable-bg.jpeg") center 50% / cover no-repeat;
    filter: blur(1.1px) saturate(1.18) brightness(0.78) contrast(1.06);
    transform: none;
  }

  @supports (background-image: image-set(url("incalculable-bg.webp") type("image/webp"))) {
    body::before {
      background:
        linear-gradient(90deg, rgba(2,0,5,0.76) 0%, rgba(3,0,6,0.34) 50%, rgba(2,0,5,0.76) 100%),
        linear-gradient(180deg, rgba(2,0,5,0.86) 0%, rgba(2,0,5,0.42) 36%, rgba(2,0,5,0.48) 64%, rgba(2,0,5,0.86) 100%),
        image-set(url("incalculable-bg.webp") type("image/webp"), url("incalculable-bg.jpeg") type("image/jpeg")) center 50% / cover no-repeat;
    }
  }

  .home-hero {
    background:
      radial-gradient(ellipse 62% 46% at 52% 44%, rgba(216, 5, 135, 0.055), transparent 70%),
      linear-gradient(180deg, rgba(3,0,6,0.82) 0%, rgba(3,0,6,0.50) 16%, rgba(3,0,6,0.18) 48%, rgba(3,0,6,0.50) 100%);
  }

  .page-home .hero-copy h1 {
    width: min(100%, calc(100vw - (var(--site-pad) * 2)));
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.35rem, 6.4vw, 2.05rem) !important;
    transform: none !important;
  }

  .home-hero::after {
    background:
      radial-gradient(ellipse 52% 38% at 54% 46%, rgba(216, 5, 135, 0.035), transparent 72%),
      linear-gradient(180deg, rgba(3,0,6,0.78) 0%, rgba(3,0,6,0.52) 16%, rgba(3,0,6,0.16) 48%, rgba(3,0,6,0.22) 64%, rgba(3,0,6,0.30) 78%, rgba(3,0,6,0.38) 90%, rgba(3,0,6,0.46) 100%);
  }

  .home-hero::before {
    height: clamp(19rem, 46vh, 34rem);
    background: linear-gradient(180deg, transparent 0%, rgba(3,0,6,0.035) 22%, rgba(3,0,6,0.09) 48%, rgba(3,0,6,0.14) 72%, rgba(3,0,6,0.18) 100%);
  }

  .page-hero {
    background:
      radial-gradient(ellipse 92% 58% at 58% 78%, rgba(var(--page-rgb), 0.055), transparent 84%),
      linear-gradient(180deg, rgba(3,0,6,0.84) 0%, rgba(3,0,6,0.62) 22%, rgba(3,0,6,0.42) 54%, rgba(3,0,6,0.30) 100%);
  }

  .text-section,
  .text-section.is-alt,
  .entries-section,
  .closing-line,
  .armature-panel {
    background: rgba(3,0,6,0.16);
  }

  .page-home .home-fracture {
    background:
      linear-gradient(180deg,
        rgba(3,0,6,0) 0%,
        rgba(3,0,6,0.025) 18%,
        rgba(3,0,6,0.075) 42%,
        rgba(3,0,6,0.13) 68%,
        rgba(3,0,6,0.16) 100%);
  }
}