/* ============================================================
   EXTRATIME — Blocs de page
   Chaque bloc a un rôle éditorial distinct : rien n'est une
   répétition d'un autre.
   ============================================================ */

/* ---------------- Hero ----------------
   Mobile d'abord : marque, titre, dernier épisode et WATCH sont
   atteints sans scroll long. Pas de 100vh imposé. */

/* Hero documentaire : photographie pleine largeur, titre posé en bas,
   dernier épisode ancré à droite. Le texte reste dans .container. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(560px, 88svh, 880px);
  border-bottom: 1px solid var(--et-ink-line);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 38% 30%;
  filter: grayscale(1) contrast(1.05);
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.42) 0%, rgba(10,10,10,0.08) 32%, rgba(10,10,10,0.55) 62%, rgba(10,10,10,0.96) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.5) 0%, transparent 55%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  align-items: end;
  gap: clamp(28px, 4vw, 72px);
  padding-block: clamp(120px, 16vw, 200px) clamp(24px, 3vw, 44px);
}
.hero-copy .eyebrow { margin-bottom: clamp(18px, 2.4vw, 30px); }
.hero-copy h1 { font-size: var(--et-d1); line-height: 0.88; }
.hero-copy .support {
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.7rem);
  color: var(--et-on-ink);
  max-width: 30ch;
  line-height: 1.3;
}
.hero-actions { display: flex; gap: var(--et-3); flex-wrap: wrap; margin-top: clamp(24px, 3vw, 36px); }

/* Carte « dernier épisode » : une porte d'entrée, pas une deuxième couverture. */
.hero-latest {
  display: grid;
  gap: var(--et-3);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(245,244,239,0.22);
  background: color-mix(in srgb, var(--et-ink) 62%, transparent);
  backdrop-filter: blur(8px);
  transition: border-color var(--et-fast) var(--et-ease);
}
.hero-latest:hover { border-color: var(--et-accent); }
.hero-latest-top { display: flex; align-items: center; gap: var(--et-2); font-family: var(--et-font-mono); font-size: var(--et-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--et-on-ink-soft); }
.hero-latest-top .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--et-accent); }
.hero-latest strong { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1; }
.hero-latest .who { font-family: var(--et-font-mono); font-size: var(--et-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--et-on-ink-soft); }
.hero-latest .who .sep { opacity: 0.4; }
.hero-latest .text-link { justify-self: start; }
.hero-credit { grid-column: 1 / -1; font-family: var(--et-font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(168,166,156,0.7); }

@media (max-width: 920px) {
  .hero { min-height: clamp(560px, 92svh, 800px); }
  .hero-bg img { object-position: 40% 25%; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--et-5); padding-block: clamp(200px, 48vw, 300px) var(--et-5); }
  .hero-latest { padding: var(--et-4); }
}
@media (max-width: 480px) {
  /* Les <br> du titre sont éditoriaux et portent les seules césures
     entre les lignes : les masquer souderait « CONVERSATIONBEYOND ». */
  .hero-actions .btn { flex: 1 1 220px; }
  .hero-latest strong { font-size: 1.2rem; }
}

/* Bande photographique partagée (accueil partenaires, page Partners). */
.band-img { position: absolute; inset: 0; z-index: -2; }
.band-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.05); }
/* Pastille en haut à droite : jamais sur les boutons ancrés en bas. */
.band-img .cover-chip { left: auto; right: var(--et-gutter); top: var(--et-4); bottom: auto; z-index: 1; }
.hero-copy, .partner-hero-inner { text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.partner-band-wrap { position: relative; isolation: isolate; color: var(--et-on-ink); }
.partner-band-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.82) 45%, rgba(10,10,10,0.45) 100%); }
.partner-band-wrap .partner-modes li { border-top-color: rgba(245,244,239,0.2); }

.partner-hero {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  min-height: clamp(480px, 70svh, 720px);
  border-bottom: 1px solid var(--et-ink-line);
  overflow: hidden;
}
.partner-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.15) 40%, rgba(10,10,10,0.95) 100%); }
.partner-hero-inner { padding-block: clamp(120px, 14vw, 180px) clamp(28px, 3vw, 48px); }
.partner-hero-inner h1 { font-size: var(--et-d1); margin-top: clamp(18px, 2.4vw, 30px); }
.partner-hero-inner .support { margin-top: clamp(18px, 2.2vw, 28px); font-size: clamp(1.1rem, 1rem + 0.7vw, 1.6rem); max-width: 34ch; line-height: 1.3; }

/* ---------------- Bloc « the latest » ----------------
   Grille asymétrique : la couverture porte, le texte accompagne. */

.latest-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}
.latest-copy .index {
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: transparent;
  -webkit-text-stroke: 1px var(--et-ink-line);
  margin-bottom: var(--et-4);
}
.latest-copy h3 { font-size: var(--et-d3); margin-bottom: var(--et-4); }
.latest-copy .byline { margin-bottom: var(--et-4); }
.latest-copy .byline b { font-weight: 600; }
.latest-copy p { color: var(--et-on-ink-soft); font-size: var(--et-t2); max-width: 46ch; }
.latest-copy p.lead-ed { color: var(--et-on-ink); }
.latest-grid .cover-words { font-size: clamp(22px, 7cqi, 60px); }
.latest-copy .actions { display: flex; gap: var(--et-3); flex-wrap: wrap; margin-top: var(--et-5); }
@media (max-width: 900px) { .latest-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Manifeste ---------------- */

.manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.lead-xl {
  font-family: var(--et-font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.2rem + 1.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lead-xl.editorial { font-weight: 400; letter-spacing: 0; line-height: 1.25; }
.manifesto p { margin-top: var(--et-4); color: var(--on-surface-soft); font-size: var(--et-t2); }
.wordline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--et-3) var(--et-4);
  margin-top: clamp(28px, 3.5vw, 48px);
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.wordline .plus { color: var(--et-accent); font-size: 0.7em; }
@media (max-width: 860px) { .manifesto { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Question « extra minute » ---------------- */

.question-band {
  display: grid;
  gap: var(--et-4);
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--surface-line, var(--et-ink-line));
  margin-bottom: clamp(24px, 3vw, 40px);
}
.question-band q {
  font-family: var(--et-font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 1.2rem + 2.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  quotes: "\201C" "\201D";
}

/* ---------------- Bande partenaires (accueil) ---------------- */

.partner-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.partner-band h2 { font-size: var(--et-d3); }
.partner-band p { margin-top: var(--et-4); color: var(--on-surface-soft); }
.partner-modes { display: grid; gap: 0; margin-top: var(--et-5); }
.partner-modes li {
  display: flex; align-items: baseline; gap: var(--et-4);
  padding-block: var(--et-3);
  border-top: 1px solid var(--surface-line, var(--et-ink-line));
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.partner-modes li .n { font: 400 var(--et-label)/1 var(--et-font-mono); letter-spacing: 0.16em; color: var(--et-accent); flex: none; }
@media (max-width: 860px) { .partner-band { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Newsletter ---------------- */

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 64px);
  align-items: center;
  padding-block: clamp(36px, 4.5vw, 64px);
  border-top: 1px solid var(--surface-line, var(--et-ink-line));
}
.newsletter h2 { font-size: var(--et-d4); }
.newsletter .sub { margin-top: var(--et-3); color: var(--on-surface-soft); font-size: var(--et-t3); }
@media (max-width: 760px) { .newsletter { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Tête de page (archives et fiches) ---------------- */

.page-head { padding-block: clamp(32px, 4.5vw, 72px) clamp(24px, 3vw, 44px); }
.page-head .eyebrow { margin-bottom: clamp(16px, 2.2vw, 26px); }
.page-head h1 { font-size: var(--et-d2); }
.page-head .lead { margin-top: clamp(16px, 2vw, 24px); }

.breadcrumb { display: flex; align-items: center; gap: var(--et-2); flex-wrap: wrap; padding-block: var(--et-4); }
.breadcrumb a { font-family: var(--et-font-mono); font-size: var(--et-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--et-on-ink-soft); border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--et-on-ink); border-bottom-color: var(--et-accent); }
.breadcrumb .sep { color: #55534C; }
.breadcrumb .current { font-family: var(--et-font-mono); font-size: var(--et-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--et-accent); }

/* ---------------- Fiche épisode ---------------- */

.episode-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 960px) { .episode-layout { grid-template-columns: minmax(0, 1fr); } }

.panel {
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--surface-line, var(--et-ink-line));
  display: grid;
  gap: var(--et-4);
  align-content: start;
}
.panel h2 {
  font-family: var(--et-font-mono);
  font-size: var(--et-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
  font-weight: 400;
}

.body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 960px) { .body-grid { grid-template-columns: minmax(0, 1fr); } }

.guest-strip { display: flex; gap: var(--et-4); align-items: center; }
.guest-strip .chip {
  width: 64px; height: 64px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--surface-line, var(--et-ink-line));
  font-family: var(--et-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.04em;
  object-fit: cover; object-position: 50% 20%; filter: grayscale(1);
}

/* ---------------- Profil invité ---------------- */

.profile {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(32px, 4vw, 64px);
}
.profile h1 { font-size: var(--et-d2); margin-block: var(--et-4); }
.profile .role { font-family: var(--et-font-mono); font-size: var(--et-label-lg); letter-spacing: 0.16em; text-transform: uppercase; color: var(--et-accent); }
.profile .bio { margin-top: var(--et-5); color: var(--et-on-ink); font-family: var(--et-font-editorial); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.4; max-width: 40ch; }
.profile .portrait { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .profile { grid-template-columns: minmax(0, 1fr); } .profile .portrait { aspect-ratio: 3 / 2; } }

.qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--et-5); }
.qa-grid > li { border-top: 1px solid var(--surface-line, var(--et-ink-line)); padding-top: var(--et-4); display: grid; gap: var(--et-2); }
.qa-grid .n { font: 400 var(--et-label)/1 var(--et-font-mono); letter-spacing: 0.16em; color: var(--et-accent); }
.qa-grid h3 { font-family: var(--et-font-display); font-weight: 800; font-size: var(--et-t1); text-transform: uppercase; letter-spacing: -0.03em; }
.qa-grid p { font-size: var(--et-t3); color: var(--on-surface-soft, var(--et-on-ink-soft)); }
@media (max-width: 760px) { .qa-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- The Show ---------------- */

.format-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.format-grid > li { container-type: inline-size; padding: clamp(24px, 3vw, 40px) clamp(18px, 2.2vw, 32px); border-left: 1px solid var(--surface-line, var(--et-paper-line)); display: grid; gap: var(--et-3); align-content: start; }
.format-grid > li:first-child { border-left: 0; padding-left: 0; }
/* « REAL CONVERSATIONS. » est le mot le plus long du site : taille
   réglée sur la colonne pour qu'il ne soit jamais coupé. */
.format-grid strong { font-family: var(--et-font-display); font-weight: 800; font-size: clamp(20px, 8.5cqi, 42px); letter-spacing: -0.055em; line-height: 0.95; text-transform: uppercase; }
.format-grid p { font-size: var(--et-t3); color: var(--on-surface-soft); }
@media (max-width: 760px) {
  .format-grid { grid-template-columns: minmax(0, 1fr); }
  .format-grid > li { border-left: 0; border-top: 1px solid var(--surface-line, var(--et-paper-line)); padding-inline: 0; }
  .format-grid > li:first-child { border-top: 0; padding-top: 0; }
}

.topic-cloud { display: flex; flex-wrap: wrap; gap: var(--et-2) var(--et-3); }
.topic-cloud li {
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(20px, 3.2vw, 44px);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.topic-cloud li:nth-child(3n) { color: var(--et-accent); }
.topic-cloud li::after { content: " /"; opacity: 0.3; }
.topic-cloud li:last-child::after { content: ""; }

/* ---------------- Partners ---------------- */

.arg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.arg-grid > li { padding: clamp(22px, 2.6vw, 34px) clamp(16px, 2vw, 28px); border-left: 1px solid var(--surface-line, var(--et-ink-line)); display: grid; gap: var(--et-3); align-content: start; }
.arg-grid > li:first-child { border-left: 0; padding-left: 0; }
.arg-grid .n { font: 400 var(--et-label)/1 var(--et-font-mono); letter-spacing: 0.16em; color: var(--et-accent); }
.arg-grid h3 { font-family: var(--et-font-display); font-weight: 800; font-size: var(--et-t1); letter-spacing: -0.03em; text-transform: uppercase; }
.arg-grid p { font-size: var(--et-t3); color: var(--on-surface-soft, var(--et-on-ink-soft)); }
@media (max-width: 900px) { .arg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arg-grid > li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 520px) {
  .arg-grid { grid-template-columns: minmax(0, 1fr); }
  .arg-grid > li { border-left: 0; padding-inline: 0; border-top: 1px solid var(--surface-line, var(--et-ink-line)); }
  .arg-grid > li:first-child { border-top: 0; padding-top: 0; }
}

.formats { display: grid; gap: 0; }
.formats > li {
  display: grid;
  grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr);
  gap: var(--et-4) var(--et-5);
  align-items: baseline;
  padding-block: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--surface-line, var(--et-ink-line));
}
.formats > li:last-child { border-bottom: 1px solid var(--surface-line, var(--et-ink-line)); }
.formats .n { font: 400 var(--et-label)/1 var(--et-font-mono); letter-spacing: 0.16em; color: var(--et-accent); }
.formats strong { font-family: var(--et-font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.045em; text-transform: uppercase; line-height: 1; }
.formats p { font-size: var(--et-t3); color: var(--on-surface-soft, var(--et-on-ink-soft)); }
@media (max-width: 760px) { .formats > li { grid-template-columns: auto minmax(0, 1fr); } .formats p { grid-column: 2; } }

.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .contact-wrap { grid-template-columns: minmax(0, 1fr); } }

.contact-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--et-5); }
.contact-paths > li { border-top: 1px solid var(--surface-line, var(--et-ink-line)); padding-top: var(--et-4); display: grid; gap: var(--et-2); align-content: start; }
.contact-paths h3 { font-family: var(--et-font-display); font-weight: 800; font-size: var(--et-t1); letter-spacing: -0.03em; text-transform: uppercase; }
.contact-paths p { font-size: var(--et-t3); color: var(--on-surface-soft, var(--et-on-ink-soft)); }
@media (max-width: 860px) { .contact-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .contact-paths { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- About ---------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

.eco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.eco > div { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--surface-line, var(--et-ink-line)); display: grid; gap: var(--et-3); align-content: start; }
.eco > div + div { border-left: 0; }
.eco strong { font-family: var(--et-font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.045em; text-transform: uppercase; }
.eco p { font-size: var(--et-t3); color: var(--on-surface-soft, var(--et-on-ink-soft)); }
@media (max-width: 700px) { .eco { grid-template-columns: minmax(0, 1fr); } .eco > div + div { border-left: 1px solid var(--surface-line, var(--et-ink-line)); border-top: 0; } }

/* ---------------- Story / article ---------------- */

.story-body { max-width: 68ch; margin-inline: auto; }
.story-body p { font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1875rem); line-height: 1.66; }
.story-body p + p { margin-top: 1.1em; }

/* Corps d'article riche (CMS) : intertitres, listes, citations, liens, séparateurs. */
.story-rich > * + * { margin-top: 1.1em; }
.story-rich h2,
.story-rich h3 {
  font-family: var(--et-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--et-track-display);
  line-height: 1;
  overflow-wrap: break-word;
  margin-top: 1.8em;
}
.story-rich h2 { font-size: var(--et-d4); }
.story-rich h3 { font-size: var(--et-t1); letter-spacing: -0.02em; }
.story-rich ul,
.story-rich ol { padding-left: 1.3em; font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1875rem); line-height: 1.66; }
.story-rich ul { list-style: square; }
.story-rich ol { list-style: decimal; }
.story-rich li + li { margin-top: 0.4em; }
.story-rich li::marker { color: var(--et-accent); }
.story-rich blockquote {
  padding-left: var(--et-5);
  border-left: 2px solid var(--et-accent);
  font-family: var(--et-font-editorial);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  line-height: 1.3;
}
.story-rich a {
  color: var(--on-surface, var(--et-on-ink));
  text-decoration: underline;
  text-decoration-color: var(--et-accent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.story-rich a:hover { color: var(--et-accent); }
.story-rich hr { border: 0; height: 1px; background: var(--surface-line, var(--et-ink-line)); margin-block: 2em; }
/* Couverture pleine largeur du conteneur, alignée sur le titre (comme la fiche de la démo). */
.story-cover { margin: 0; }
.story-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.story-cover figcaption { margin-top: var(--et-2); font-family: var(--et-font-mono); font-size: var(--et-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-soft, var(--et-on-ink-soft)); }
.pull {
  margin-block: clamp(28px, 4vw, 52px);
  padding-left: var(--et-5);
  border-left: 2px solid var(--et-accent);
  font-family: var(--et-font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.pull .attr { display: block; margin-top: var(--et-3); font: 400 var(--et-label)/1.4 var(--et-font-mono); letter-spacing: 0.16em; color: var(--on-surface-soft, var(--et-on-ink-soft)); }

/* ---------------- Notes de prévisualisation ---------------- */

.notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--et-5); }
@media (max-width: 760px) { .notes-grid { grid-template-columns: minmax(0, 1fr); } }
.note-card { border: 1px solid var(--surface-line, var(--et-ink-line)); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: var(--et-3); align-content: start; }
.note-card h3 { font-family: var(--et-font-mono); font-size: var(--et-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--et-accent); font-weight: 400; }
.note-card p { font-size: var(--et-t3); color: var(--on-surface-soft, var(--et-on-ink-soft)); }

/* ---------------- 404 ---------------- */

.error-page { display: grid; place-items: center; text-align: center; gap: var(--et-5); padding-block: clamp(72px, 12vw, 160px); }
.error-page .code { font-family: var(--et-font-display); font-weight: 800; font-size: clamp(80px, 18vw, 220px); line-height: 0.8; letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1px var(--et-ink-line); }

/* ---------------- Partenaires publiés (CMS) ---------------- */

/* Plaque claire : la plupart des logos sont dessinés pour un fond blanc. */
.partner-roster { display: grid; gap: var(--et-8); }
.partner-group-title {
  display: flex; align-items: baseline; gap: var(--et-3);
  padding-bottom: var(--et-3);
  border-bottom: 1px solid var(--surface-line, var(--et-ink-line));
  font: 400 var(--et-label-lg)/1 var(--et-font-mono);
  letter-spacing: var(--et-track-label);
  text-transform: uppercase;
  color: var(--on-surface-soft, var(--et-on-ink-soft));
}
.partner-group-title .n { color: var(--et-accent); }
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--et-6) var(--et-5);
  margin-top: var(--et-5);
}
.partner-card { container-type: inline-size; display: grid; gap: var(--et-3); align-content: start; min-width: 0; }
/* Un élément de grille à aspect-ratio ne s'étire pas : largeur imposée, sinon elle serait
   déduite de la hauteur du contenu (débordement constaté sur mobile avec un nom long). */
.partner-logo {
  width: 100%; min-width: 0;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  padding: 10cqi 14cqi;
  background: var(--et-paper);
  color: var(--et-on-paper);
  border: 1px solid var(--surface-line, var(--et-ink-line));
}
.partner-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partner-logo-type {
  font-family: var(--et-font-display); font-weight: 800;
  font-size: clamp(1.1rem, 8cqi, 2.25rem);
  letter-spacing: var(--et-track-display);
  line-height: 1; text-transform: uppercase; text-align: center;
  overflow-wrap: break-word; hyphens: auto;
}
/* Nom long : corps réduit, pour ne pas couper un mot au milieu. */
.partner-logo-type.is-long { font-size: clamp(0.95rem, 5.4cqi, 1.6rem); line-height: 1.05; }
.partner-name {
  font-family: var(--et-font-display); font-weight: 800;
  font-size: clamp(1.05rem, 6.5cqi, 1.6rem);
  letter-spacing: -0.035em; line-height: 1.05; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.partner-summary { font-size: var(--et-t3); color: var(--on-surface-soft, var(--et-on-ink-soft)); }

/* Accueil : bande de logos sous les formats. */
.partner-strip { margin-top: var(--et-6); }
.partner-strip ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  gap: var(--et-3);
  margin-top: var(--et-4);
}
/* Le padding ne peut pas être en cqi ici : un conteneur ne s'interroge pas lui-même (il
   prendrait la largeur d'un ancêtre). Les unités cqi servent au nom composé, à l'intérieur. */
.partner-strip li {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  padding: var(--et-3);
  background: var(--et-paper);
  color: var(--et-on-paper);
  min-width: 0;
}
.partner-strip img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.partner-strip .partner-logo-type { font-size: clamp(0.7rem, 10cqi, 1.1rem); }
.partner-strip .partner-logo-type.is-long { font-size: clamp(0.6rem, 7cqi, 0.85rem); }

/* Coordonnées publiques (réglages du CMS), page Contact. */
.contact-direct { display: grid; gap: var(--et-3); }
.contact-direct li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--et-3); font-size: var(--et-t2); overflow-wrap: anywhere; }
.contact-direct .meta { min-width: 9ch; }
.contact-direct a { text-decoration: underline; text-decoration-color: var(--et-accent); text-underline-offset: 3px; }