/* CKWash catalogue headings - shared by the listing and category pages. */
.ckw-catalogue-heading,
.ckw-catalogue-subheading {
  box-sizing: border-box;
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Elementor conservait certains widgets de sous-titre a environ 500 px.
   Le widget parent doit suivre la meme largeur que la grille catalogue. */
.elementor-widget-html:has(> .elementor-widget-container > .ckw-catalogue-subheading) {
  flex: 0 0 100% !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ckw-catalogue-heading {
  --ckw-section-space-above: clamp(20px, 3vw, 34px);
  --ckw-section-space-below: clamp(14px, 2vw, 24px);
  --ckw-section-font-size: clamp(28px, 3.1vw, 38px);
  --ckw-page-font-size: clamp(32px, 3.8vw, 44px);

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  padding: var(--ckw-section-space-above) 16px var(--ckw-section-space-below);
  text-align: center;
}

.ckw-catalogue-heading__title {
  /* Certains titres sont encore rendus dans l'ancien wrapper Elementor
     `.custom-payment-header-section`. Les variables restent donc aussi
     définies sur le titre lui-même pendant la migration des pages catégorie. */
  --ckw-section-font-size: clamp(28px, 3.1vw, 38px);
  --ckw-page-font-size: clamp(32px, 3.8vw, 44px);

  max-width: 980px;
  margin: 0;
  color: #0c5895;
  font-size: var(--ckw-section-font-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ckw-catalogue-heading--page .ckw-catalogue-heading__title {
  font-size: var(--ckw-page-font-size);
  font-weight: 700;
}

.ckw-catalogue-subheading {
  --ckw-subheading-inline: 16px;
  --ckw-subheading-gap: 10px;
  --ckw-subheading-rule: 1px;
  --ckw-subheading-accent: 2px;
  /* L espace au-dessus reste plus grand que celui du dessous : le sous-titre
     appartient visuellement a la grille qu il introduit. */
  --ckw-subheading-space-above: clamp(24px, 3vw, 38px);
  --ckw-subheading-space-below: clamp(18px, 2vw, 26px);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--ckw-subheading-space-below);
  padding: var(--ckw-subheading-space-above) var(--ckw-subheading-inline) var(--ckw-subheading-gap);
}

/* Filet gris pleine largeur : porte la ligne de base du soulignement. */
.ckw-catalogue-subheading::after {
  position: absolute;
  right: var(--ckw-subheading-inline);
  bottom: 0;
  left: var(--ckw-subheading-inline);
  height: var(--ckw-subheading-rule);
  background: #dce5ee;
  content: "";
}

/* align-items: flex-start sur le parent = largeur du titre calee sur son texte. */
.ckw-catalogue-subheading__title {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #0c5895;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Accent bleu superpose au filet gris (meme ligne de base), largeur du texte. */
.ckw-catalogue-subheading__title::after {
  position: absolute;
  right: 0;
  bottom: calc(-1 * (var(--ckw-subheading-gap) + var(--ckw-subheading-accent) - var(--ckw-subheading-rule)));
  left: 0;
  height: var(--ckw-subheading-accent);
  border-radius: 2px;
  background: #3399ff;
  content: "";
}

@media (max-width: 767px) {
  .ckw-catalogue-heading,
  .ckw-catalogue-subheading {
    width: min(100% - 20px, 1200px);
  }

  /* Rythme vertical mobile, du plus grand au plus petit : 64px pour la rupture
     entre deux sections > 28px au-dessus d un sous-titre > 16px avant ses cartes.
     La hauteur d ecran est comptee : valeurs plus serrees qu en desktop. */
  .ckw-catalogue-heading {
    --ckw-section-space-above: 64px;
    --ckw-section-space-below: 0px;

    /* Taille fluide continue : la droite rejoint exactement la valeur desktop
       a 767px (28px pour une section, 32px pour un H1 de page), il n y a donc
       plus de saut au franchissement du breakpoint. Avant : 32px a 767px puis
       28px a 768px, soit un titre plus GROS sur un ecran plus PETIT. */
    --ckw-section-font-size: clamp(23px, 1.12vw + 19.42px, 28px);
    --ckw-page-font-size: clamp(26px, 1.34vw + 21.71px, 32px);

    min-height: 68px;
    padding-inline: 6px;
  }

  .ckw-catalogue-heading__title {
    --ckw-section-font-size: clamp(23px, 1.12vw + 19.42px, 28px);
    --ckw-page-font-size: clamp(26px, 1.34vw + 21.71px, 32px);
  }

  /* Premiere section de la page : elle suit le H1, pas une rangee de cartes.
     Sans cela l espace bas du H1 et la rupture de section s additionnent
     (25px + 64px) et detachent le H1 du contenu qu il annonce. */
  .elementor > :first-child:has(h1) + * .ckw-catalogue-heading {
    --ckw-section-space-above: 16px;
  }

  /* Le H1 de page n a pas de section au-dessus de lui : pas de sur-espacement. */
  .ckw-catalogue-heading--page {
    --ckw-section-space-above: clamp(20px, 3vw, 34px);
    --ckw-section-space-below: clamp(14px, 2vw, 24px);
  }

  /* Sous-titres centres en mobile, sous un titre de section lui-meme centre.
     Le filet gris pleine largeur est neutralise (--ckw-subheading-rule: 0) :
     a 390px il ne resterait qu un court accent bleu au milieu d une longue ligne
     grise, ce qui redonne l effet "barre de progression a moitie remplie".
     Seul l accent bleu centre est conserve, comme le faisait deja l ancien
     gabarit mobile du site (<hr> masque sous 768px). */
  .ckw-catalogue-subheading {
    --ckw-subheading-inline: 6px;
    --ckw-subheading-rule: 0px;
	--ckw-subheading-accent: 1px;
    --ckw-subheading-space-above: 28px;
    --ckw-subheading-space-below: 16px;

    align-items: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ckw-catalogue-heading *,
  .ckw-catalogue-subheading * {
    scroll-behavior: auto !important;
  }
}