/*
  eo-editorial.css
  Bloc éditorial générique, compact et réutilisable.

  Contrat HTML :
  .eo-editorial-stack
    .eo-lang-panel[data-lang]
      .eo-editorial[data-cols][data-layout][data-theme][data-background][data-template]
        .eo-editorial__grid
          .eo-editorial__item
*/

.eo-editorial-stack {
  width: 100%;
  margin: 0 auto;
}

.eo-lang-panel {
  display: none;
}

.eo-lang-panel.active {
  display: block;
}

.eo-editorial {
  --eo-ed-max: 1180px;
  --eo-ed-pad: clamp(1rem, 2.3vw, 2rem);
  --eo-ed-gap: clamp(.85rem, 1.7vw, 1.25rem);
  --eo-ed-paper: #f9f7f1;
  --eo-ed-ink: #2f2f2f;
  --eo-ed-muted: rgba(47, 47, 47, .72);
  --eo-ed-line: rgba(47, 47, 47, .92);
  --eo-ed-soft-line: rgba(47, 47, 47, .3);
  --eo-ed-chart-bg: rgba(47, 47, 47, .1);
  --eo-ed-chart-bar: rgba(47, 47, 47, .72);
  --eo-ed-body-font: Georgia, "Times New Roman", serif;
  --eo-ed-title-font: Georgia, "Times New Roman", serif;

  width: min(var(--eo-ed-max), calc(100% - 2rem));
  margin: clamp(1.6rem, 4vw, 3.2rem) auto;
  padding: var(--eo-ed-pad);
  color: var(--eo-ed-ink);
  background: var(--eo-ed-paper);
  font-family: var(--eo-ed-body-font);
  font-size: 14px;
  line-height: 1.45;
  box-sizing: border-box;
}

.eo-editorial,
.eo-editorial * {
  box-sizing: border-box;
}

.eo-editorial p {
  margin: 0 0 1rem;
  font-size: inherit;
  line-height: inherit;
}

.eo-editorial[data-theme="dark"] {
  --eo-ed-paper: rgba(18, 26, 34, .94);
  --eo-ed-ink: #f5f0e7;
  --eo-ed-muted: rgba(245, 240, 231, .72);
  --eo-ed-line: rgba(245, 240, 231, .9);
  --eo-ed-soft-line: rgba(245, 240, 231, .28);
  --eo-ed-chart-bg: rgba(245, 240, 231, .14);
  --eo-ed-chart-bar: rgba(245, 240, 231, .72);
}

.eo-editorial[data-background="transparent"] {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.eo-editorial__head {
  text-align: center;
}

.eo-editorial__title {
  margin: 0 0 .9rem;
  font-family: var(--eo-ed-title-font);
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  line-height: .88;
  font-weight: 900;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.eo-editorial__subtitle {
  padding: .7rem 0;
  border-top: 2px solid var(--eo-ed-line);
  border-bottom: 2px solid var(--eo-ed-line);
  color: var(--eo-ed-muted);
  font-size: clamp(.72rem, 1.2vw, .92rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.eo-editorial__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.eo-editorial__head + .eo-editorial__grid {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.eo-editorial--no-head .eo-editorial__grid {
  margin-top: 0;
}

.eo-editorial[data-cols="1"] .eo-editorial__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.eo-editorial[data-cols="2"] .eo-editorial__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eo-editorial[data-cols="3"] .eo-editorial__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eo-editorial[data-cols="4"] .eo-editorial__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eo-editorial[data-cols="5"] .eo-editorial__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.eo-editorial[data-cols="6"] .eo-editorial__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.eo-editorial[data-cols="1"] .eo-editorial__item {
  padding-left: 0;
  padding-right: 0;
  border-left: 0;
}

.eo-editorial__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 var(--eo-ed-gap);
  border-left: 1px solid var(--eo-ed-soft-line);
}

.eo-editorial__item:first-child {
  border-left: 0;
}

@media (min-width: 901px) {
  .eo-editorial:not([data-cols="1"])[data-layout="lead_left"] .eo-editorial__item:first-child,
  .eo-editorial:not([data-cols="1"])[data-layout="lead_right"] .eo-editorial__item:last-child {
    grid-column: span 2;
  }

  .eo-editorial:not([data-cols="1"])[data-layout="lead_wide"] .eo-editorial__item:first-child {
    grid-column: 1 / -1;
    padding-bottom: 1.15rem;
    margin-bottom: 1.15rem;
    border-left: 0;
    border-bottom: 1px solid var(--eo-ed-soft-line);
  }

  .eo-editorial:not([data-cols="1"])[data-layout="lead_wide"] .eo-editorial__item:first-child .eo-editorial__body {
    column-count: 2;
    column-gap: 2rem;
  }
}

.eo-editorial__headline {
  order: 1;
  display: block;
  margin: 0 auto .65rem;
  text-align: center;
  font-family: var(--eo-ed-title-font);
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  font-weight: 700;
}

.eo-editorial__headline--upper {
  text-transform: uppercase;
  font-weight: 900;
}

.eo-editorial__headline--italic {
  font-style: italic;
  font-weight: 400;
}

.eo-editorial__headline--small {
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.eo-editorial__deck {
  order: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 0 0 1rem;
  text-align: center;
  color: var(--eo-ed-muted);
  font-size: clamp(1rem, 1.65vw, 1.25rem);
  line-height: 1.35;
}

.eo-editorial__deck::before,
.eo-editorial__deck::after {
  content: "";
  flex: 1 1 1.4rem;
  max-width: 2.2rem;
  border-top: 1px solid var(--eo-ed-soft-line);
}

.eo-editorial__kicker {
  order: 0;
  display: block;
  margin: 0 auto 1rem;
  text-align: center;
  color: var(--eo-ed-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.eo-editorial__kicker::before,
.eo-editorial__kicker::after {
  content: "";
  display: block;
  width: 90px;
  height: 7px;
  margin: 0 auto;
}

.eo-editorial__kicker::before { border-top: 1px solid var(--eo-ed-line); }
.eo-editorial__kicker::after { border-bottom: 1px solid var(--eo-ed-line); }

.eo-editorial__body {
  order: 3;
  text-align: left;
}

.eo-editorial__quote {
  display: block;
  margin: 1.6rem 0;
  text-align: center;
  font-family: var(--eo-ed-title-font);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.16;
  font-style: italic;
}

.eo-editorial__quote::before,
.eo-editorial__quote::after {
  content: "";
  display: block;
  width: 90px;
  height: 12px;
  margin: 0 auto;
}

.eo-editorial__quote::before { border-top: 1px solid var(--eo-ed-line); }
.eo-editorial__quote::after { border-bottom: 1px solid var(--eo-ed-line); }

.eo-editorial__figure {
  order: 2;
  margin: 0 0 1rem;
}

.eo-editorial__img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.eo-editorial__figure[data-tone="editorial"] .eo-editorial__img {
  filter: sepia(80%) grayscale(1) contrast(1) opacity(.82);
  mix-blend-mode: multiply;
}

.eo-editorial[data-theme="dark"] .eo-editorial__figure[data-tone="editorial"] .eo-editorial__img {
  filter: grayscale(1) contrast(1.05) opacity(.86);
  mix-blend-mode: screen;
}

.eo-editorial__caption {
  margin-top: .35rem;
  color: var(--eo-ed-muted);
  font-size: .78rem;
  font-style: italic;
}

.eo-editorial__chart {
  margin: 1rem 0;
  padding: .85rem;
  border: 1px solid var(--eo-ed-soft-line);
}

.eo-editorial__chart-title {
  margin: 0 0 .7rem;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--eo-ed-muted);
}

.eo-editorial__chart-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, .8fr) minmax(0, 2fr) auto;
  gap: .55rem;
  align-items: center;
  margin: .45rem 0;
}

.eo-editorial__chart-label,
.eo-editorial__chart-value {
  font-size: .82rem;
  color: var(--eo-ed-muted);
}

.eo-editorial__chart-value {
  min-width: 3.5rem;
  text-align: right;
}

.eo-editorial__chart-track {
  height: .55rem;
  background: var(--eo-ed-chart-bg);
  overflow: hidden;
}

.eo-editorial__chart-bar {
  display: block;
  height: 100%;
  width: var(--eo-ed-chart-width, 0%);
  background: var(--eo-ed-chart-bar);
}

@media (max-width: 1100px) {
  .eo-editorial[data-cols="4"] .eo-editorial__grid,
  .eo-editorial[data-cols="5"] .eo-editorial__grid,
  .eo-editorial[data-cols="6"] .eo-editorial__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .eo-editorial[data-cols="4"] .eo-editorial__item:nth-child(3n + 1),
  .eo-editorial[data-cols="5"] .eo-editorial__item:nth-child(3n + 1),
  .eo-editorial[data-cols="6"] .eo-editorial__item:nth-child(3n + 1) {
    border-left: 0;
  }
}

@media (max-width: 800px) {
  .eo-editorial:not([data-cols="1"]) .eo-editorial__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eo-editorial:not([data-cols="1"]) .eo-editorial__item {
    border-left: 1px solid var(--eo-ed-soft-line);
  }

  .eo-editorial:not([data-cols="1"]) .eo-editorial__item:nth-child(2n + 1) {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .eo-editorial {
    width: min(100% - 1rem, var(--eo-ed-max));
    padding: 1rem;
  }

  .eo-editorial[data-background="transparent"] {
    padding-left: 0;
    padding-right: 0;
  }

  .eo-editorial[data-cols] .eo-editorial__grid {
    grid-template-columns: 1fr;
  }

  .eo-editorial[data-cols] .eo-editorial__item {
    padding: 1rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--eo-ed-soft-line);
  }

  .eo-editorial[data-cols] .eo-editorial__item:last-child {
    border-bottom: 0;
  }

  .eo-editorial[data-layout="lead_wide"] .eo-editorial__item:first-child .eo-editorial__body {
    column-count: auto;
  }

  .eo-editorial__chart-row {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .eo-editorial__chart-value {
    min-width: 0;
    text-align: left;
  }
}


/* Quote block, citation d'auteur sobre. */
.eo-editorial__quote-block {
  --eo-quote-block-text-max: 760px;
  --eo-quote-block-image-size: clamp(104px, 10vw, 130px);
  width: 100%;
  max-width: var(--eo-quote-block-text-max);
  margin: 2.8rem auto 1.8rem;
  color: #fff;
  text-align: left;
  text-shadow: none;
}

.eo-editorial__quote-block--with-image {
  max-width: calc(var(--eo-quote-block-text-max) + var(--eo-quote-block-image-size) + 2rem);
}

.eo-editorial__quote-block-inner {
  width: 100%;
}

.eo-editorial__quote-block-content {
  max-width: var(--eo-quote-block-text-max);
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 2px solid rgba(255,255,255,.64);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.eo-editorial__quote-block-text {
  margin: 0;
  max-width: var(--eo-quote-block-text-max);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.55vw, 23px);
  line-height: 1.48;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .003em;
  color: rgba(255,255,255,.94);
}

.eo-editorial__quote-block-text::before {
  content: "“";
  display: inline;
  opacity: .38;
  font-size: 1.45em;
  line-height: 0;
  margin-right: .04em;
}

.eo-editorial__quote-block-text::after {
  content: "”";
  display: inline;
  opacity: .38;
  font-size: 1.15em;
  margin-left: .02em;
}

.eo-editorial__quote-block-reference {
  margin-top: .75rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(10px, .78vw, 12px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: .145em;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
}

.eo-editorial__quote-block-note {
  margin-top: .9rem;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.45;
  color: rgba(255,255,255,.76);
}

.eo-editorial__quote-block-media {
  position: relative;
  display: block;
  width: var(--eo-quote-block-image-size);
  height: var(--eo-quote-block-image-size);
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.eo-editorial__quote-block-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--eo-quote-block-focus-x, 50%) var(--eo-quote-block-focus-y, 50%);
}

.eo-editorial__quote-block-media[data-tone="editorial"] .eo-editorial__quote-block-img {
  filter: grayscale(1) contrast(1.04) opacity(.86);
  mix-blend-mode: screen;
}

.eo-editorial__quote-block-image-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: currentColor;
}

.eo-editorial__quote-block-link-icon {
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.22);
  opacity: .72;
  mix-blend-mode: screen;
}

.eo-editorial__quote-block-link-icon svg {
  width: .82rem;
  height: .82rem;
  fill: currentColor;
}

@media (min-width: 900px) {
  .eo-editorial__quote-block--with-image .eo-editorial__quote-block-inner {
    display: grid;
    grid-template-columns: var(--eo-quote-block-image-size) minmax(0, var(--eo-quote-block-text-max));
    gap: 2rem;
    align-items: start;
  }
}

@media (max-width: 899px) {
  .eo-editorial__quote-block--with-image {
    max-width: var(--eo-quote-block-text-max);
  }

  .eo-editorial__quote-block--with-image .eo-editorial__quote-block-media {
    margin: 0 0 1rem 1.2rem;
  }

  .eo-editorial__quote-block--with-image[data-mobile-image="hide"] .eo-editorial__quote-block-media {
    display: none;
  }
}