/* ============================================================
   BUPA Architectures — Pages /ecrits/
   Charte fusionnée Option 1 (terre cuite + lavande)
   Styles éditoriaux pour essais théoriques + tribunes
   ============================================================ */

/* ============== Nav XTU — transparente sur hero, opaque au scroll ============== */
.nav-xtu {
  background: transparent;
  border-bottom: 1px solid transparent;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out), backdrop-filter 400ms var(--ease-out);
}
.nav-xtu.is-scrolled {
  background: rgba(246, 242, 236, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-line);
}
.nav-xtu__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--container-padding);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-6);
  align-items: center;
}
.nav-xtu__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav-xtu__brand em { color: var(--color-lavande); font-style: italic; font-weight: 300; }
.nav-xtu__menu {
  display: flex; align-items: center; justify-content: center;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-xtu__menu li:not(:last-child)::after {
  content: "|"; margin: 0 var(--sp-4); color: var(--color-line); font-weight: 300;
}
.nav-xtu__menu a {
  color: var(--color-ink-soft); text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.nav-xtu__menu a:hover, .nav-xtu__menu a.is-active { color: var(--color-lavande); }
.nav-xtu__social { display: flex; gap: var(--sp-3); align-items: center; }
.nav-xtu__social a {
  color: var(--color-mute); border: 1px solid var(--color-line);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.05em; text-decoration: none;
  transition: all var(--dur-fast);
}
.nav-xtu__social a:hover { border-color: var(--color-lavande); color: var(--color-lavande); }
@media (max-width: 980px) {
  .nav-xtu__menu { display: none; }
  .nav-xtu__inner { grid-template-columns: auto auto; }
}

/* ============== Hero éditorial sobre — fond crème, marge sup pour nav ============== */
.essai-hero {
  padding: calc(96px + var(--sp-8)) 0 var(--sp-8);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}
.essai-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.essai-hero__breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-mute);
  margin-bottom: var(--sp-5);
}
.essai-hero__breadcrumb a { color: var(--color-ink-soft); text-decoration: none; }
.essai-hero__breadcrumb a:hover { color: var(--color-lavande); }
.essai-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-lavande);
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.essai-hero__eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--color-lavande);
}
.essai-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-5);
  max-width: 920px;
}
.essai-hero__title em { color: var(--color-lavande); font-style: italic; font-weight: 300; }
.essai-hero__lede {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 300;
  color: var(--color-ink-soft);
  line-height: 1.5;
  max-width: 760px;
  margin: 0 0 var(--sp-6);
}
.essai-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.essai-hero__meta-item { display: flex; flex-direction: column; gap: var(--sp-1); }
.essai-hero__meta-label { color: var(--color-lavande); }
.essai-hero__meta-value { color: var(--color-ink); font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }

/* ============== Corps éditorial — colonne 720px ============== */
.essai-main {
  padding: var(--sp-9) 0 var(--sp-8);
  background: var(--color-paper);
}
.essai-col {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.essai-col p {
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin: 0 0 var(--sp-5);
  text-align: justify;
}
.essai-col p strong { color: var(--color-ink); font-weight: 600; }
.essai-col p em { color: var(--color-lavande); font-style: italic; }
.essai-col p a {
  color: var(--color-lavande);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.essai-col p a:hover { color: var(--color-lavande-ink); }

.essai-lede {
  font-family: var(--font-display) !important;
  font-size: var(--fs-xl) !important;
  font-weight: 300 !important;
  color: var(--color-ink) !important;
  line-height: 1.45 !important;
  margin: var(--sp-3) 0 var(--sp-7) !important;
  text-align: left !important;
}

.essai-section { margin-bottom: var(--sp-8); }

.essai-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-ink);
  margin: var(--sp-9) 0 var(--sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  letter-spacing: -0.01em;
}
.essai-h2 em { color: var(--color-lavande); font-style: italic; }
.essai-h2-num {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-lavande);
  display: inline-block;
  margin-right: var(--sp-3);
  letter-spacing: 0.1em;
}
.essai-section:first-child .essai-h2 { margin-top: 0; }

.essai-picto {
  flex-shrink: 0;
  width: 56px; height: 56px;
  color: var(--color-lavande);
  margin-top: 4px;
}
.essai-picto svg { width: 100%; height: 100%; }

.essai-ol, .essai-ul {
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-6);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--color-ink-soft);
}
.essai-ol li, .essai-ul li { margin-bottom: var(--sp-3); }
.essai-ol { list-style: none; counter-reset: lcount; padding-left: 0; }
.essai-ol li {
  counter-increment: lcount;
  padding-left: var(--sp-7);
  position: relative;
}
.essai-ol li::before {
  content: counter(lcount, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-lavande);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Citation / pitch */
.pitch p {
  margin: 0;
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* Bloc partenaires fin d'essai */
.essai-bottom {
  margin-top: var(--sp-9);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-line);
}
.essai-bottom__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-lavande);
  margin: 0 0 var(--sp-4);
}
.essai-bottom__sign {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--color-ink);
  margin: 0 0 var(--sp-2);
}
.essai-bottom__sign em { color: var(--color-lavande); font-style: italic; }
.essai-bottom__note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-mute);
  line-height: 1.55;
}

/* Pour aller plus loin — liens internes */
.essai-related {
  margin-top: var(--sp-9);
  padding: var(--sp-7);
  background: var(--color-lavande-wash);
  border-radius: var(--radius-md);
}
.essai-related__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-lavande-ink);
  margin: 0 0 var(--sp-5);
  font-weight: 600;
}
.essai-related__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.essai-related__item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(107, 107, 214, 0.18);
  text-decoration: none;
  color: var(--color-ink);
  transition: color var(--dur-fast);
}
.essai-related__item:last-child a { border-bottom: 0; }
.essai-related__item a:hover { color: var(--color-lavande-ink); }
.essai-related__item-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  flex: 1;
}
.essai-related__item-arrow {
  font-family: var(--font-mono);
  color: var(--color-lavande);
  font-size: var(--fs-md);
}

/* Retour index */
.essai-back {
  margin-top: var(--sp-7);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-mute);
  text-decoration: none;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast);
}
.essai-back:hover { border-color: var(--color-lavande); color: var(--color-lavande); }

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-9);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
}
.site-footer h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--color-paper);
  margin: 0 0 var(--sp-4);
}
.site-footer h4 em { color: var(--color-lavande); font-style: italic; }
.site-footer p, .site-footer li { color: rgba(246,242,236,0.75); font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 var(--sp-2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: rgba(246,242,236,0.85); text-decoration: none; }
.site-footer a:hover { color: var(--color-lavande); }
.site-footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(246,242,236,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(246,242,236,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============== Index pages ============== */
.ecrits-page {
  padding: calc(96px + var(--sp-7)) 0 var(--sp-9);
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
.ecrits-head {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.ecrits-head__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-lavande);
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.ecrits-head__eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--color-lavande);
}
.ecrits-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-5);
  max-width: 1000px;
  color: var(--color-ink);
}
.ecrits-head h1 em { color: var(--color-lavande); font-style: italic; }
.ecrits-head__lede {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 300;
  color: var(--color-ink-soft);
  line-height: 1.5;
  max-width: 760px;
  margin: 0 0 var(--sp-6);
}
.ecrits-head__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ecrits-head__meta strong { color: var(--color-lavande); font-weight: 500; }

.filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.filter-chip {
  background: transparent;
  border: 1px solid var(--color-line);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.filter-chip:hover { border-color: var(--color-lavande); color: var(--color-lavande); }
.filter-chip.is-active {
  background: var(--color-lavande);
  border-color: var(--color-lavande);
  color: var(--color-white);
}

.ecrits-section {
  margin-bottom: var(--sp-9);
  scroll-margin-top: 90px;
}
.ecrits-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--color-ink);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.01em;
}
.ecrits-section__title em { color: var(--color-lavande); font-style: italic; }
.ecrits-section__desc {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 var(--sp-7);
}

.ecrits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-5);
}
.ecrit-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  position: relative;
}
.ecrit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-lavande);
  color: inherit;
}
.ecrit-card--tribune { background: var(--color-lavande-wash); }
.ecrit-card__num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ecrit-card__num span { color: var(--color-lavande); font-weight: 600; }
.ecrit-card__num--tribune { color: var(--color-lavande-ink); }
.ecrit-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-lavande);
  margin: 0 0 var(--sp-3);
  padding-right: 80px;
}
.ecrit-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 400;
  color: var(--color-ink);
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.01em;
}
.ecrit-card__sub {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-mute);
  margin: 0 0 var(--sp-4);
  line-height: 1.4;
}
.ecrit-card__sub em { color: var(--color-lavande); font-style: italic; }
.ecrit-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--sp-5);
  flex: 1;
  text-align: justify;
}
.ecrit-card__footer {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}
.ecrit-card__arrow { color: var(--color-accent); font-size: var(--fs-md); transition: transform var(--dur-fast); }
.ecrit-card:hover .ecrit-card__arrow { transform: translateX(4px); }

.manifeste-block {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--sp-8);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
@media (min-width: 880px) {
  .manifeste-block { grid-template-columns: 1fr 1fr; align-items: center; }
}
.manifeste-block h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 300;
  color: var(--color-paper);
  margin: 0 0 var(--sp-3);
  line-height: 1.15;
}
.manifeste-block h3 em { color: var(--color-lavande); font-style: italic; }
.manifeste-block p { color: rgba(246,242,236,0.78); font-size: var(--fs-md); line-height: 1.65; margin: 0 0 var(--sp-4); }
.manifeste-block .btn {
  background: var(--color-lavande);
  color: var(--color-white);
}
.manifeste-block .btn:hover {
  background: var(--color-lavande-ink);
}

.ecrit-card.is-hidden { display: none; }