/*
 * Sections de mise en page, d'après la maquette.
 * Uniquement de la disposition et de la typographie : les couleurs de fond
 * et de texte se règlent bloc par bloc dans l'éditeur.
 */

/* ---------- Bandeau d'ouverture ---------- */

/* Le fond et la couleur du texte viennent des réglages du bloc, pas d'ici :
   modifiables dans l'éditeur, section par section. */
/* Astra applique un retrait à tout bloc pleine largeur, via un sélecteur plus
   spécifique que « .union-hero » seul : il faut le nommer avec son bloc pour
   l'emporter. Sans ça, la photo ne touche aucun bord. */
.entry-content > .wp-block-columns.union-hero {
  align-items: stretch;
  gap: 0;
  padding: 0;
  /* Sans cette remise à zéro, une bande blanche de 10 px sépare la barre de
     menu du bandeau : le fond du site apparaît entre les deux. */
  margin-block: 0;
}

/* Le bandeau occupe l'écran à l'arrivée : rien d'autre n'est visible avant
   d'avoir fait défiler. On retire la hauteur de la barre de menu, plus celle
   de la barre d'administration quand elle est affichée. */
@media (min-width: 782px) {
  .entry-content > .wp-block-columns.union-hero {
    min-height: calc(100svh - var(--union-hauteur-entete, 80px));
  }

  .admin-bar .entry-content > .wp-block-columns.union-hero {
    min-height: calc(100svh - var(--union-hauteur-entete, 80px) - 32px);
  }

  /* Le bandeau bêta mange aussi de la hauteur : sans ça, le bas de la photo
     passerait sous la ligne de flottaison. */
  .union-beta .entry-content > .wp-block-columns.union-hero {
    min-height: calc(100svh - var(--union-hauteur-entete, 80px) - 2.25rem);
  }

  .union-beta.admin-bar .entry-content > .wp-block-columns.union-hero {
    min-height: calc(100svh - var(--union-hauteur-entete, 80px) - 2.25rem - 32px);
  }
}

.union-hero.wp-block-columns {
  margin-block: 0;
}

.union-hero__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}

.union-hero__texte .union-surtitre {
  color: inherit;
  opacity: 0.8;
  margin: 0 0 1.4em;
}

.union-hero__titre {
  font-family: var(--union-titre);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  color: inherit;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.union-hero__accroche {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 42ch;
  color: inherit;
  opacity: 0.92;
  margin: 0 0 2.2em;
}

.union-hero__boutons {
  gap: 0.75rem 1.75rem;
  align-items: center;
}

/* L'image remplit sa colonne sans déformation */
.union-hero__image {
  padding: 0;
}

.union-hero__image .wp-block-image,
.union-hero__image figure {
  height: 100%;
  margin: 0;
}

.union-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Boutons ---------- */

.union-bouton .wp-block-button__link {
  border-radius: 0;
  font-family: var(--union-titre);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95em 1.8em;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.union-bouton--clair .wp-block-button__link {
  background: var(--union-creme);
  color: var(--union-terracotta);
  border-color: var(--union-creme);
}

.union-bouton--clair .wp-block-button__link:hover,
.union-bouton--clair .wp-block-button__link:focus-visible {
  background: var(--union-blanc);
  border-color: var(--union-blanc);
}

/* Action secondaire : un lien, pas un bouton. Deux boutons de poids égal
   obligeaient le visiteur à choisir son camp avant d'avoir compris l'offre. */
.union-bouton--lien .wp-block-button__link {
  background: transparent;
  border-color: transparent;
  color: var(--union-creme);
  padding-inline: 0.2em;
  border-bottom: 1px solid rgba(246, 239, 228, 0.45);
  opacity: 0.9;
}

.union-bouton--lien .wp-block-button__link:hover,
.union-bouton--lien .wp-block-button__link:focus-visible {
  background: transparent;
  color: var(--union-creme);
  border-bottom-color: var(--union-creme);
  opacity: 1;
  transform: none;
}

.union-bouton--terracotta .wp-block-button__link {
  background: var(--union-terracotta);
  color: var(--union-creme);
  border-color: var(--union-terracotta);
}

.union-bouton--terracotta .wp-block-button__link:hover,
.union-bouton--terracotta .wp-block-button__link:focus-visible {
  background: #7A3B26;
  border-color: #7A3B26;
}

/* ---------- Notre vision ---------- */

.entry-content > .wp-block-group.union-vision {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  padding-inline: 1.5rem;
  text-align: center;
}

.union-vision__surtitre {
  position: relative;
  display: block;
  margin: 0 auto 1.6em;
  width: fit-content;
  padding-block: 1.6em;
  color: var(--union-terracotta);
}

/* Les filets au-dessus et au-dessous, comme dans la brochure imprimée */
.union-vision__surtitre::before,
.union-vision__surtitre::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 1px;
  background: var(--union-terracotta);
  opacity: 0.5;
}

.union-vision__surtitre::before { top: 0; }
.union-vision__surtitre::after  { bottom: 0; }

.union-vision__texte {
  font-family: var(--union-titre);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  max-width: 46ch;
  margin-inline: auto;
  color: inherit;
  text-wrap: balance;
}

/* ---------- Comment ça marche ---------- */

.entry-content > .wp-block-group.union-etapes {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

.union-etapes__surtitre {
  color: inherit;
  opacity: 0.65;
  margin: 0 0 1em;
}

.union-etapes__titre {
  font-family: var(--union-titre);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.2;
  color: inherit;
  margin: 0 0 1.6em;
  max-width: 24ch;
  text-wrap: balance;
}

.union-etapes__liste {
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Un filet relie les trois numéros : la séquence se lit comme une séquence,
   pas comme trois éléments juxtaposés. */
.union-etapes__liste > .wp-block-column {
  position: relative;
  padding-top: 2.4rem;
}

.union-etapes__liste > .wp-block-column::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0;
  right: calc(-1 * clamp(1.5rem, 4vw, 3.5rem));
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}

.union-etapes__liste > .wp-block-column:last-child::before {
  right: 0;
}

/* Le point marque le départ de chaque étape sur le filet. */
.union-etapes__liste > .wp-block-column::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.union-etape__num {
  font-family: var(--union-titre);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  margin: 0 0 0.9em;
  font-variant-numeric: tabular-nums;
}

.union-etape__titre {
  font-family: var(--union-titre);
  font-size: 1.25rem;
  color: inherit;
  margin: 0 0 0.55em;
  line-height: 1.3;
}

.union-etape__texte {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: inherit;
  opacity: 0.8;
  margin: 0;
  max-width: 34ch;
}

@media (max-width: 781px) {
  .union-etapes__liste > .wp-block-column::before { right: 0; }
}

/* ---------- Appel aux artisans ---------- */

.entry-content > .wp-block-columns.union-appel {
  gap: 0;
  align-items: stretch;
  padding: 0;
}

.union-appel.wp-block-columns { margin-block: 0; }

.union-appel__image { padding: 0; }

.union-appel__image .wp-block-image,
.union-appel__image figure {
  height: 100%;
  margin: 0;
}

.union-appel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.union-appel__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}

.union-appel__texte .union-surtitre {
  margin: 0 0 1.2em;
}

.union-appel__titre {
  font-family: var(--union-titre);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 0.6em;
  max-width: 14ch;
  text-wrap: balance;
}

.union-appel__texte p:not(.union-surtitre) {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 46ch;
  margin: 0 0 2em;
}

/* ---------- Téléphone ---------- */

@media (max-width: 781px) {
  .union-hero__image img,
  .union-appel__image img {
    height: auto;
    max-height: 60vh;
  }

  .union-hero__titre { font-size: clamp(2rem, 9vw, 2.75rem); }

  .union-etapes__liste { gap: 2.5rem; }

  /* La photo passe sous le texte dans l'appel aux artisans */
  .union-appel { flex-direction: column-reverse; }
}