/*
 * Colonne de lecture des blocs posés « à nu » dans une page (includes/modules/editor-flow.php).
 * Site : .hgs-flow enveloppe chaque suite de blocs hors section du kit.
 * Toile de l'éditeur : mêmes règles sur les enfants directs de .is-root-container
 * (chargée par editor-ui.php ; les sections du kit ne sont pas visées : seuls les blocs de texte,
 * image, tableau, boutons… le sont).
 * Couleurs et rayons : jetons du thème (palette du site), jamais en dur.
 */

.hgs-flow {
  --hgs-flow-w: 46rem;
  max-width: calc(var(--hgs-flow-w) + 2 * var(--kit-pad, 24px));
  margin-inline: auto;
  padding: clamp(48px, 7vw, 96px) var(--kit-pad, 24px);
  box-sizing: border-box;
  font-family: var(--hgs-flow-b, inherit);
  font-size: var(--hgs-fs-text, 1.0625rem);
  line-height: 1.65;
}
.hgs-flow + .hgs-flow { padding-top: 0; }

/* Rythme vertical : un seul espacement entre blocs, plus d'air avant un intertitre.
   Toile : les starters posent « .wp-block-post-content > * { margin-block: 0 !important } »
   (la racine de la toile porte cette classe) : les marges de la toile sont donc en !important. */
.hgs-flow > * { margin-block: 0; }
.hgs-flow > * + * { margin-top: 1.25em; }
.is-root-container > :where(p, ul, ol, h2, h3, h4, .wp-block-quote, .wp-block-table, .wp-block-image, .wp-block-gallery, .wp-block-buttons, .wp-block-separator, .wp-block-video, .wp-block-embed, .wp-block-details, .wp-block-spacer, .wp-block-columns) {
  margin-top: 1.25em !important;
  margin-bottom: 0 !important;
}
.is-root-container > :where(p, ul, ol, h2, h3, h4, .wp-block-quote, .wp-block-table, .wp-block-image, .wp-block-gallery, .wp-block-buttons, .wp-block-separator, .wp-block-video, .wp-block-embed, .wp-block-details, .wp-block-spacer, .wp-block-columns):first-child { margin-top: 0 !important; }
.hgs-flow > .wp-block-spacer { margin-top: 0; }
.is-root-container > .wp-block-spacer { margin-top: 0 !important; }
.hgs-flow > * + :is(.wp-block-quote, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-buttons) { margin-top: 2em; }
.is-root-container > * + :is(.wp-block-quote, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-buttons) { margin-top: 2em !important; }

/* Titres */
.hgs-flow > .hgs-flow__title {
  margin: 0 0 .5em;
  font-family: var(--hgs-flow-d, inherit);
  font-size: var(--hgs-fs-h1, clamp(2rem, 1.2rem + 2.6vw, 3.25rem));
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
:is(.hgs-flow, .is-root-container) > :is(h2, h3, h4) {
  font-family: var(--hgs-flow-d, inherit);
  line-height: 1.2;
  text-wrap: balance;
}
:is(.hgs-flow, .is-root-container) > h2 { font-size: var(--hgs-fs-h2, clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem)); }
:is(.hgs-flow, .is-root-container) > h3 { font-size: var(--hgs-fs-h3, 1.375rem); }
.hgs-flow > * + :is(h2, h3, h4) { margin-top: 1.9em; }
.is-root-container > * + :is(h2, h3, h4) { margin-top: 1.9em !important; }
.hgs-flow > .hgs-flow__title + * { margin-top: 0; }
.hgs-flow > :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: .6em; }
.is-root-container > :is(h2, h3, h4) + :is(p, ul, ol) { margin-top: .6em !important; }

/* Texte et listes : mesure 60-75 caractères */
:is(.hgs-flow, .is-root-container) > p { max-width: none; }
:is(.hgs-flow, .is-root-container) > :is(ul, ol) { padding-left: 1.3em; }
:is(.hgs-flow, .is-root-container) > :is(ul, ol) > li + li { margin-top: .4em; }
:is(.hgs-flow, .is-root-container) > :is(ul, ol) > li::marker { color: var(--wp--preset--color--primary); }

/* Citation : guillemet ouvrant de la couleur du site, auteur en petit */
:is(.hgs-flow, .is-root-container) > .wp-block-quote {
  position: relative;
  margin-inline: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--hgs-flow-d, inherit);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.4;
}
:is(.hgs-flow, .is-root-container) > .wp-block-quote::before {
  content: "\201C";
  display: block;
  height: .5em;
  margin-bottom: .1em;
  font-size: 3em;
  line-height: 1;
  color: var(--wp--preset--color--primary);
}
:is(.hgs-flow, .is-root-container) > .wp-block-quote p { margin: 0; font: inherit; }
:is(.hgs-flow, .is-root-container) > .wp-block-quote cite {
  display: block;
  margin-top: .75em;
  font-family: var(--hgs-flow-b, inherit);
  font-size: .9375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  opacity: .75;
}

/* Tableau : filets fins, chiffres alignés */
:is(.hgs-flow, .is-root-container) > .wp-block-table { overflow-x: auto; }
:is(.hgs-flow, .is-root-container) > .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
:is(.hgs-flow, .is-root-container) > .wp-block-table :is(th, td) {
  padding: .7em .9em .7em 0;
  border: 0;
  border-bottom: 1px solid var(--kit-line, color-mix(in srgb, currentColor 14%, transparent));
  text-align: left;
  vertical-align: top;
}
:is(.hgs-flow, .is-root-container) > .wp-block-table thead :is(th, td) {
  border-bottom: 2px solid var(--wp--preset--color--primary);
  font-weight: 600;
}
:is(.hgs-flow, .is-root-container) > .wp-block-table figcaption { margin-top: .6em; font-size: .875rem; opacity: .7; }

/* Images : dans la colonne, coins du site, jamais étirées */
:is(.hgs-flow, .is-root-container) > .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--wp--custom--radius, 8px);
}
:is(.hgs-flow, .is-root-container) > .wp-block-image figcaption,
:is(.hgs-flow, .is-root-container) > .wp-block-gallery figcaption { margin-top: .6em; font-size: .875rem; opacity: .7; text-align: left; }
.hgs-flow > .alignwide { width: min(72rem, 100vw - 2 * var(--kit-pad, 24px)); max-width: none; margin-inline: calc((var(--hgs-flow-w) - min(72rem, 100vw - 2 * var(--kit-pad, 24px))) / 2); }
.hgs-flow > .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.hgs-flow > .alignfull img { border-radius: 0; width: 100%; }
@media (max-width: 800px) { .hgs-flow > .alignwide { width: auto; margin-inline: 0; } }

/* Séparateur, boutons */
:is(.hgs-flow, .is-root-container) > .wp-block-separator {
  margin-block: 2.5em !important;
  border: 0;
  border-top: 1px solid var(--kit-line, color-mix(in srgb, currentColor 14%, transparent));
  opacity: 1;
}

@media (max-width: 600px) {
  .hgs-flow > .wp-block-buttons .wp-block-button,
  .hgs-flow > .wp-block-buttons .wp-block-button__link { width: 100%; }
}
.hgs-flow:not(:has(> *)) { display: none; }
.hgs-flow:has(> .hgs-flow__title):not(:has(> :not(.hgs-flow__title, .hgs-flow__surtitre, .hgs-flow__soustitre, .hgs-flow__crumb))) { padding-bottom: 0; }
:is(.hgs-flow, .is-root-container) > .wp-block-table :is(td, th) + :is(td, th) { white-space: nowrap; }

/* En-tête simple (modules/page-header.php) : sur-titre au-dessus du titre, sous-titre en dessous, facultatifs. */
.hgs-flow > .hgs-flow__surtitre {
  margin: 0 0 .75em;
  font-size: var(--wp--preset--font-size--small, .875rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--wp--preset--color--primary, currentColor);
}
.hgs-flow > .hgs-flow__surtitre + .hgs-flow__title { margin-top: 0; }
.hgs-flow > .hgs-flow__title + .hgs-flow__soustitre {
  margin: -.1em 0 1.5em;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.55;
  color: var(--wp--preset--color--muted, currentColor);
  max-width: 56ch;
}
.hgs-flow > .hgs-flow__soustitre + * { margin-top: 0; }

/* Fil d'Ariane de l'en-tête simple : couleur du texte atténuée (la règle générale le peint en blanc pour les bandeaux photo). */
.hgs-flow > .hgs-flow__crumb { margin: 0 0 1.25em; color: color-mix(in srgb, currentColor 72%, transparent); }
.hgs-flow > .hgs-flow__crumb a { color: inherit; border-bottom-color: color-mix(in srgb, currentColor 40%, transparent); }
.hgs-flow > .hgs-flow__crumb a:hover { color: inherit; border-bottom-color: currentColor; }
.hgs-flow > .hgs-flow__crumb + * { margin-top: 0; }