/*
 * WordPress blocks inside Delpann sections: the same look as the Etch components they replace
 * (etch/css). Our own blocks print the Etch markup, so etch/css styles them already; this file
 * covers headings, paragraphs, columns, images, galleries, lists, buttons and quotes in context.
 * Colors and type come only from the brand tokens.
 */

/* ---------- Shared ---------- */

.dp-accent { color: var(--c-accent); }

:is(.dp-section, .dp-hero, .dp-pagehead, .dp-ctaband) :is(h1, h2).wp-block-heading,
.dp-legal h1.wp-block-heading { /* legal text's H2s are text headings (.dp-prose h2) */
  font-family: var(--f-display);
  font-weight: var(--w-display);
  text-transform: var(--tt-display);
  font-stretch: var(--fx-display);
  font-variant-caps: var(--fv-display);
  letter-spacing: var(--ls-display);
  text-shadow: var(--sh-off) var(--sh-off) 0 var(--c-sh);
  line-height: 0.95;
  text-wrap: balance;
  color: var(--c-display);
}
:is(.dp-section, .dp-hero, .dp-pagehead) h3.wp-block-heading {
  font-family: var(--f-head); font-weight: var(--w-head); font-size: 19px; line-height: 1.25; color: var(--c-ink);
}

/* Heading style "Filet dessous": the brand rule under the title. */
.wp-block-heading.is-style-rule::after {
  content: ""; display: block; width: 160px; height: var(--rule-h); margin-top: 14px; background: var(--rule);
}

.dp-lead { font-size: 20px; line-height: 1.6; }
.wp-block-image, .wp-block-gallery, .wp-block-quote, .wp-block-columns, .wp-block-buttons { margin: 0; }
.wp-block-image img { display: block; width: 100%; height: auto; }

/* Lists written in a section (not tags). */
:is(.dp-section, .dp-pagehead) .wp-block-list:not(.dp-chips__list) { display: flex; flex-direction: column; gap: 6px; padding-left: 1.2em; }

/* "Étiquettes": a list shown as tags. */
.wp-block-list.dp-chips__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wp-block-list.dp-chips__list > li { font-size: 14px; font-weight: 800; padding: 8px 12px; border: 2px solid color-mix(in srgb, currentColor 60%, transparent); border-radius: 2px; }
.wp-block-list.dp-chips__list + p { margin-top: -6px; font-size: 15px; line-height: 1.5; opacity: 0.85; } /* 14px under the tags (.dp-chips gap) */

/* ---------- Buttons (look of .dp-btn, large) ---------- */

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 28px; border: 2px solid transparent; border-radius: 2px;
  font-family: var(--f-head); font-weight: var(--w-head); font-size: 15px; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; text-align: center;
  background: var(--c-btn); color: var(--c-btn-fg);
}
.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover,
.wp-block-button.is-style-solid .wp-block-button__link:hover { filter: brightness(1.12); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--c-surface); }
.wp-block-button.is-style-photo .wp-block-button__link { background: var(--c-btnd); color: var(--c-btnd-fg); }
.wp-block-button.is-style-photo-outline .wp-block-button__link { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.wp-block-button.is-style-photo-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); }
/* "Lien": the arrow link under an intro (.dp-link). */
.wp-block-button.is-style-link .wp-block-button__link {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-link);
  font-family: inherit; font-weight: 800; font-size: 15px; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Section (DpSection): .dp-stack is our Section's content (PosTeaser also uses .dp-section) ---------- */

.dp-section > .dp-stack { display: flex; flex-direction: column; gap: 14px; }
.dp-section > .dp-stack > h2.wp-block-heading { font-size: clamp(34px, 3.6vw, 54px); max-width: 20ch; }
.dp-section > .dp-stack > p:not(.dp-eyebrow, .dp-lead),
.dp-section .is-style-heading > .wp-block-column:last-child > p {
  font-size: 18px; line-height: 1.5; max-width: 46ch; text-wrap: pretty;
  & a { color: inherit; text-decoration: underline; }
}
/* The content after the heading (tiles, steps, catalogs, gallery…) sits 36px below it. */
.dp-section > .dp-stack > :is(p, h1, h2, h3, .wp-block-buttons, .is-style-heading) + :not(p, h1, h2, h3, .wp-block-buttons, .is-style-heading) { margin-top: 22px; }
.dp-section[data-tone="band"] > .dp-wrap > :is(h1, h2).wp-block-heading,
.dp-section[data-tone="band"] .is-style-heading h2.wp-block-heading { color: var(--c-band-display); }
.dp-section[data-tone="band"] > .dp-wrap > p:not(.dp-eyebrow),
.dp-section[data-tone="band"] .is-style-heading > .wp-block-column:last-child > p { color: #F0F0F0; }
.dp-section[data-spacing="compact"] { padding-block: clamp(32px, 4vw, 56px); }
.dp-section[data-spacing="none"] { padding-block: 0; }
.dp-section[data-width="full"] > .dp-wrap { max-width: none; padding-inline: 0; }
/* Pale photo background (was the Image et texte "Photo pâle" tone). */
.dp-section[data-tone="photo"] {
  position: relative;
  background: var(--c-surface) var(--dp-section-img) center bottom / cover no-repeat;
  &::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-surface) 94%, transparent) 0%, color-mix(in srgb, var(--c-surface) 82%, transparent) 55%, color-mix(in srgb, var(--c-surface) 40%, transparent) 100%); }
  & > .dp-wrap { position: relative; }
}
/* Two sections in a row on the page background: the second one doesn't double the gap (About). */
.dp-section:not([data-tone]) + .dp-section:not([data-tone]):has(> .dp-wrap > .is-style-aside),
.dp-section[data-tone="paper"] + .dp-section[data-tone="paper"]:has(> .dp-wrap > .is-style-aside) { padding-top: 0; }

/* Colonnes "Titre et intro" (.dp-heading split): title on the left; intro (and link) at the bottom
   right. On the site the right column dissolves so intro and link line up as in Etch. */
.wp-block-columns.is-style-heading {
  flex-wrap: wrap !important; align-items: flex-end !important; justify-content: space-between; gap: 16px 64px;
  & > .wp-block-column { display: flex; flex-direction: column; gap: 14px; }
  & > .wp-block-column:first-child { flex: 1 1 420px !important; }
  & > .wp-block-column:last-child { flex: 0 1 46ch !important; font-size: 18px; }
  & h2.wp-block-heading { font-size: clamp(34px, 3.6vw, 54px); max-width: 20ch; }
}
:where(body:not(.editor-styles-wrapper)) .wp-block-columns.is-style-heading > .wp-block-column:last-child {
  display: contents;
  & > p { flex: 0 1 46ch; }
  & > .wp-block-buttons { flex: 0 0 auto; }
}

/* ---------- Colonnes "Image et texte" (DpSplit) ---------- */

.wp-block-columns.is-style-split {
  flex-wrap: wrap !important; align-items: center !important; gap: 40px 64px;
  & > .wp-block-column { flex: 1 1 340px !important; display: flex; flex-direction: column; gap: 20px; }
  & > .wp-block-column:has(> .wp-block-image.is-style-photo) { flex: 1.2 1 380px !important; }
  & > .wp-block-column:has(> .wp-block-image.is-style-circle) { flex: 0 1 380px !important; max-width: 380px; margin-inline: auto; }
  & > .wp-block-column:has(> .wp-block-gallery) { flex: 2 1 480px !important; max-width: 760px; }
  & h2.wp-block-heading { font-size: clamp(34px, 3.8vw, 56px); }
  & > .wp-block-column > p:not(.dp-eyebrow) { font-size: 18px; line-height: 1.55; max-width: 48ch; text-wrap: pretty; & a { color: inherit; text-decoration: underline; } }
}
/* Image on the right: on phones it still comes first, above the text (Etch's row-reverse). */
.wp-block-columns.is-style-split:has(> .wp-block-column:last-child > :is(.wp-block-image, .wp-block-gallery)) { flex-wrap: wrap-reverse !important; }
.dp-section[data-tone="band"] .is-style-split h2.wp-block-heading { color: var(--c-band-display); }
.dp-section[data-tone="band"] .is-style-split > .wp-block-column > p:not(.dp-eyebrow) { color: #F0F0F0; }

/* Image styles: "Photo 3:2" and "Détouré dans un cercle". */
.wp-block-image.is-style-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-band); }
.wp-block-image.is-style-photo img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.is-style-circle {
  width: 100%; max-width: 380px; margin-inline: auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 6px solid #FFFFFF; background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, var(--c-surface) 70%);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-hl) 35%, transparent);
  & img { width: 78%; height: 78%; object-fit: contain; }
}

/* ---------- Colonnes "Principale et côté" (DpColumns, About) ---------- */

.wp-block-columns.is-style-aside {
  flex-wrap: wrap !important; gap: 48px 80px;
  & > .wp-block-column:first-child { flex: 1.4 1 420px !important; max-width: 68ch; display: flex; flex-direction: column; gap: 18px; }
  & > .wp-block-column:last-child { flex: 1 1 320px !important; align-self: flex-start; display: flex; flex-direction: column; gap: 32px; }
  & > .wp-block-column:first-child > h2.wp-block-heading { font-size: clamp(32px, 3.2vw, 46px); line-height: 1; }
  & > .wp-block-column:first-child > :is(h2, .wp-block-quote):not(:first-child) { margin-top: 22px; }
  & > .wp-block-column:first-child > p { font-size: 18px; line-height: 1.65; text-wrap: pretty; }
  & > .wp-block-column:first-child > p.dp-lead { font-size: 20px; line-height: 1.6; }
}

/* Citation (DpQuote). */
.wp-block-quote {
  display: flex; flex-direction: column; gap: 14px; padding: 28px 0 0; border: 0; border-top: 4px solid var(--c-accent);
  & p { font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--c-ink); text-wrap: balance; }
  & cite { font-size: 15px; font-style: normal; color: var(--c-muted); }
}

/* ---------- Bannière (DpHero) ---------- */

.dp-hero__content {
  & > .dp-eyebrow { color: var(--c-band-display); }
  & > h1.wp-block-heading { font-size: clamp(46px, 5vw, 96px); line-height: 0.92; max-width: 12ch; color: #FFFFFF; }
  & > p:not(.dp-eyebrow) { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 44ch; color: #F0F0F0; text-wrap: pretty; & a { color: inherit; text-decoration: underline; } }
  & > .wp-block-buttons { padding-top: 8px; @media (width < 768px) { & > .wp-block-button { flex: 1 1 auto; } & .wp-block-button__link { width: 100%; } } }
  /* The line under the buttons (.dp-hero__proof). */
  & > .wp-block-buttons ~ p {
    display: flex; align-items: center; gap: 10px; max-width: none; font-size: 14px; font-weight: 700; line-height: 1.4; color: inherit;
    &::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-hl); }
  }
}

/* ---------- En-tête de page (DpPageHead) ---------- */

.dp-pagehead__inner {
  & > .dp-eyebrow, & .is-style-heading .dp-eyebrow { color: #C0C0C0; }
  & h1.wp-block-heading { font-size: clamp(48px, 6vw, 92px); line-height: 0.9; color: var(--c-band-display); }
  & > p:not(.dp-eyebrow), & .is-style-heading > .wp-block-column:last-child > p {
    font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 52ch; color: #F0F0F0; text-wrap: pretty;
    & a { color: inherit; text-decoration: underline; }
  }
  & .wp-block-columns.is-style-heading { gap: 24px 64px; }
  & .is-style-heading > .wp-block-column:first-child { gap: 16px; }
  & .is-style-heading > .wp-block-column:last-child { flex: 1 1 340px !important; max-width: 48ch; }
  & .is-style-heading h1.wp-block-heading { font-size: clamp(44px, 5.6vw, 86px); line-height: 0.92; max-width: 13ch; }
  & .is-style-heading > .wp-block-column:last-child > p { line-height: 1.55; flex: 1 1 340px; max-width: 48ch; }
}
.dp-pagehead[data-tone="light"] .dp-pagehead__inner {
  padding-block: clamp(28px, 3.6vw, 52px) 24px; gap: 12px 32px;
  & > .dp-eyebrow, & .is-style-heading .dp-eyebrow { color: var(--c-link); }
  & .is-style-rule::after { margin-top: 10px; }
  & h1.wp-block-heading, & .is-style-heading h1.wp-block-heading { font-size: clamp(38px, 4.4vw, 64px); line-height: 0.95; max-width: none; color: var(--c-display); }
  & .is-style-heading > .wp-block-column:first-child { gap: 10px; flex: 0 1 auto !important; }
  & > p:not(.dp-eyebrow), & .is-style-heading > .wp-block-column:last-child > p { font-size: 16px; color: var(--c-text); }
  & .is-style-heading > .wp-block-column:last-child { flex: 0 1 52ch !important; max-width: none; }
  & .is-style-heading > .wp-block-column:last-child > p { flex: 0 1 52ch; max-width: none; }
  & .wp-block-columns.is-style-heading { gap: 12px 32px; }
}

/* ---------- Appel à l'action (DpCtaBand) ---------- */

.dp-ctaband__inner > h2.wp-block-heading { font-size: clamp(28px, 2.8vw, 40px); line-height: 1; max-width: 20ch; }

/* ---------- Texte juridique (DpLegal) ---------- */

.dp-legal__prose {
  & > h1.wp-block-heading { font-size: clamp(30px, 4.4vw, 64px); line-height: 1; overflow-wrap: break-word; hyphens: auto; }
  /* Etch's header block: 14px between title, date and note; 28px down to the text. */
  & > h1.wp-block-heading + p, & > .dp-legal__meta + .dp-legal__note { margin-top: -4px; }
  & > :is(.dp-legal__meta, .dp-legal__note) + h2 { margin-top: 10px; }
}

/* ---------- Galerie (DpGallery): Rangée, Avec légendes, Mosaïque avant / après, Bande ---------- */

/* "body": WordPress prints its gallery CSS after ours, with selectors as specific as these. */
body .wp-block-gallery.has-nested-images {
  display: grid; gap: 12px; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 220px), 1fr));
  /* WordPress sizes nested images by column count (.columns-default: a third); the grid does it here. */
  & figure.wp-block-image:not(#individual-image) { position: relative; width: auto !important; margin: 0; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 1; border: 2px solid var(--c-ink); background: var(--c-ink); }
  & figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; flex: 1 1 auto; }
  & figure.wp-block-image figcaption {
    position: static; margin: 0; padding: 10px 12px; max-height: none; overflow: visible;
    background: var(--c-ink); color: #FFFFFF; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; text-shadow: none;
  }
  & figure.wp-block-image:has(figcaption)::before { content: none; }
  &.is-style-row:not(:first-child) { margin-top: 10px; } /* 24px below what comes before it, as in Etch */
  &.is-style-labeled {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    &:has(> figure:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & figure.wp-block-image:not(#individual-image) { aspect-ratio: auto; border-color: #FFFFFF; background: #FFFFFF; }
    /* Square from its width: WordPress's lazy images with several sizes (sizes="auto") get "contain: size",
       so the photo has no height of its own to grow from and would shrink to its padding. */
    & figure.wp-block-image:not(#individual-image) img { flex: none; height: auto; aspect-ratio: 1; object-fit: contain; object-position: center bottom; padding: 14px 14px 10px; background: linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--c-surface) 45%, #FFFFFF) 100%); }
  }
  &.is-style-mosaic {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    & figure.wp-block-image:not(#individual-image) { border: 4px solid #FFFFFF; background: #FFFFFF; box-shadow: 0 10px 30px rgba(20, 32, 79, 0.16); }
    & figure.wp-block-image:nth-of-type(1):not(#individual-image) { grid-area: 1 / 1 / 3 / 2; aspect-ratio: auto; }
    & figure.wp-block-image:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; }
    & figure.wp-block-image:nth-of-type(3) { grid-area: 2 / 2 / 3 / 3; }
    & figure.wp-block-image img { position: absolute; inset: 0; }
  }
  &.is-style-strip {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; height: clamp(280px, 34vw, 520px); background: var(--c-band);
    & figure.wp-block-image:not(#individual-image) { aspect-ratio: auto; border: 0; }
    & figure.wp-block-image + figure.wp-block-image { border-left: 4px solid var(--c-accent); }
  }
}