/* Didatec — editorial pages, 404 and generic content. */

.page-header {
  padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}

.page-header__title {
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.page-content > .wp-block-group,
.page-content > .wp-block-columns {
  margin-block: var(--wp--preset--spacing--100);
}

/* 404 -------------------------------------------------------------------- */

.page-404 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--50);
  max-width: 720px;
}

.page-404__title {
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.page-404__text {
  color: var(--wp--preset--color--black-80);
}

.page-404__search {
  width: 100%;
  max-width: 480px;
}

.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Search results --------------------------------------------------------- */

.search-count {
  color: var(--wp--preset--color--black-80);
}

.search-form-wrap {
  max-width: 480px;
  margin-block-end: var(--wp--preset--spacing--60);
}

.search-empty {
  color: var(--wp--preset--color--black-80);
}

.result-card {
  position: relative;
  /* .product-grid top-aligns its items for the product cards; result cards
     fill their row so a row of mixed cards ends at the same height. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--wp--preset--spacing--50);
  border: 1px solid var(--wp--preset--color--black-20);
  border-radius: 5px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.result-card:hover,
.result-card:focus-within {
  border-color: var(--wp--preset--color--blue);
  background-color: var(--wp--preset--color--field);
}

.result-card__kind {
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--wp--preset--color--blue);
}

.result-card__title {
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.result-card__title a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
}

/* The title link covers the whole card: one link, one accessible name, and
   the card is clickable edge to edge. */
.result-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
}

.result-card:hover .result-card__title a,
.result-card:focus-within .result-card__title a {
  text-decoration-color: currentColor;
}

/* With the link stretched, the focus ring belongs to the card, not to the
   title text. Scoped to :has() so browsers without it keep the link's own ring. */
@supports selector(:has(*)) {
  .result-card:has(:focus-visible) {
    outline: 2px solid var(--wp--preset--color--blue);
    outline-offset: 2px;
  }

  .result-card__title a:focus-visible { outline: none; }
}

.result-card__excerpt {
  color: var(--wp--preset--color--black-80);
}

/* Les groupes de contenu portent déjà leur rythme vertical via .section : la
   marge de bloc que WordPress ajoute entre frères doublerait l'écart. */
.page-content > .wp-block-group.section {
  margin-block: 0;
}

/* Section « trois axes » — Figma 12106:35451 : fond gris, tuiles espacées de
   16px (et non du blockGap global de 24) et 48px sous le chapô. */
.axes .wp-block-columns:not(:first-child) {
  gap: 16px;
  margin-block-start: 48px;
}

/* Tuiles « trois axes » — Figma 12106:35587 : 416x468 en desktop, 311x206 en
   mobile. Un ratio plutôt qu'une hauteur fixe, que la maquette ferait déborder
   sur petit écran. */
.axis-card.wp-block-cover {
  min-height: 0;
  aspect-ratio: 416 / 468;
  padding: var(--wp--preset--spacing--60);
  border-radius: 8px;
}

/* La maquette n'assombrit que le bas de la tuile : un voile uniforme éteindrait
   la photo. Le dégradé y est à 0.6, calibré sur des photos sombres ; il est
   porté à 0.75 pour tenir le 4,5:1 du titre quelle que soit la photo déposée
   (même parti pris que le hero et les vignettes de gammes). */
/* Le voile natif du bloc « cover » pose sa couleur en style inline et son
   opacité via .has-background-dim-40 : il faut les neutraliser explicitement
   pour lui substituer le dégradé. */
.axis-card.wp-block-cover .wp-block-cover__background {
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.75) 85%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.axis-card.wp-block-cover .wp-block-cover__image-background {
  border-radius: 8px;
}

@media (min-width: 1024px) {
  .axis-card.wp-block-cover {
    aspect-ratio: auto;
    min-height: 468px;
  }
}

@media (max-width: 1023px) {
  .axis-card.wp-block-cover {
    aspect-ratio: 311 / 206;
  }
}

/* Bandeau photo « 1 600 m² » — Figma 12106:35467.
   La carte se cale sur le bord droit du conteneur (wide-size) et non sur une
   marge fixe au viewport : au-delà de 1440px elle reste alignée sur le reste
   du contenu de la page. */
.split-photo.wp-block-cover {
  justify-content: center;
  padding-inline: 0;
}

/* Le sélecteur reprend celui du cœur (…is-position-bottom-right
   .wp-block-cover__inner-container{width:auto}) pour passer devant lui. */
.split-photo.wp-block-cover.has-custom-content-position.is-position-bottom-right
  > .wp-block-cover__inner-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  padding-inline: var(--wp--preset--spacing--70);
}

/* 548px bord à bord : 468 de contenu (contentSize du groupe) + 2x40.
   Le layout « constrained » du cover pose margin-inline:auto sur ses enfants,
   qui l'emporterait sur justify-content : on le neutralise à droite. */
.split-photo .wp-block-group {
  width: 548px;
  max-width: 100%;
  margin-inline: auto 0;
}

/* Voile diagonal du haut gauche vers le bas droit, là où se pose la carte,
   plutôt qu'un voile uniforme. Porté à 0.85 (0.8 sur la maquette) pour tenir
   le 4,5:1 du texte courant sur une photo claire. */
.split-photo.wp-block-cover .wp-block-cover__background {
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    124deg,
    rgba(0, 0, 0, 0) 26%,
    rgba(0, 0, 0, 0.85) 91%
  );
}

@media (max-width: 1023px) {
  /* En mobile la carte occupe toute la largeur : le dégradé redevient vertical. */
  .split-photo.wp-block-cover .wp-block-cover__background {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.85) 60%
    );
  }
}


/* Page contact — Figma 12298:35601 ---------------------------------------- */

/* La maquette resserre cette page à 1184px (marge de 128), plus étroit que le
   conteneur du site : c'est un gabarit d'aiguillage, pas une page de contenu. */
.contact-choice.section {
  padding-block: clamp(48px, calc(48px + 50 * (100vw - 600px) / 520), 98px);
}

.contact-choice .wp-block-columns {
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(32px, calc(32px + 32 * (100vw - 600px) / 520), 64px);
}

.contact-choice .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* L'espacement est porté par les gap flex : les marges de flux de Gutenberg
   viendraient s'y ajouter et doubleraient chaque écart. */
.contact-choice .wp-block-column > *,
.contact-tiles > * {
  margin-block: 0;
}

/* 16 de gap + 24 = les 40px de la maquette entre le titre et la liste. */
.contact-choice h1 {
  margin-block-end: 24px;
}

/* Liste à coches — le picto reprend assets/icons/check.svg en masque, ce qui
   lui fait suivre la couleur du texte. */
.check-list {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, calc(16px + 8 * (100vw - 600px) / 520), 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--black);
}

.check-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url(../icons/check.svg) center / contain no-repeat;
  mask: url(../icons/check.svg) center / contain no-repeat;
}

/* Carte blanche : elle épouse la hauteur de la colonne de gauche et répartit
   ses deux tuiles — Figma 12298:35662. */
.contact-tiles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 5px;
  background-color: var(--wp--preset--color--white);
}

.contact-tile.wp-block-cover {
  flex: 1 1 auto;
  min-height: 105px;
  border-radius: 5px;
}

.contact-tile.wp-block-cover .wp-block-cover__inner-container {
  width: 100%;
}

.contact-tile .has-h-3-font-size {
  font-weight: 500;
  letter-spacing: -0.02em;
}

.contact-tile a {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

/* Un seul lien, cliquable sur toute la tuile. */
.contact-tile a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
}

/* Zoom au survol, comme les vignettes de gammes (.gamme-card). On ne touche pas
   au voile : l'éclaircir ferait repasser le libellé sous le 4,5:1 le temps du
   survol. La réduction de mouvement est gérée globalement dans base.css. */
.contact-tile .wp-block-cover__image-background {
  transition: transform 0.4s ease;
}

.contact-tile:hover .wp-block-cover__image-background,
.contact-tile:focus-within .wp-block-cover__image-background {
  transform: scale(1.04);
}

@supports selector(:has(*)) {
  .contact-tile:has(:focus-visible) {
    outline: 2px solid var(--wp--preset--color--blue);
    outline-offset: 2px;
  }

  .contact-tile a:focus-visible { outline: none; }
}

@media (min-width: 1024px) {
  .contact-tile.wp-block-cover { min-height: 79px; }
}

/* Pages formulaire contact / SAV — Figma 12105:34144 (desktop) et 12105:34076
   (mobile). Même ossature que la page d'aiguillage : seule la colonne de droite
   change. */
.contact-form-page .wp-block-column {
  /* 24px entre retour, libellé et formulaire — Figma 12105:34166. */
  gap: 24px;
}

@media (min-width: 1024px) {
  /* La colonne de gauche respire davantage sous le titre — Figma 12105:34153. */
  .contact-form-page .wp-block-column:first-child {
    gap: 40px;
  }
}

/* Lien de retour : le picto reprend assets/icons/arrow-left.svg en masque, la
   page étant composée en blocs (pas d'appel à axfrost_icon()). */
.contact-back {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: var(--wp--preset--font-size--btn);
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--blue);
}

.contact-back::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url(../icons/arrow-left.svg) center / contain no-repeat;
  mask: url(../icons/arrow-left.svg) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.contact-back a {
  color: inherit;
  text-decoration: none;
}

.contact-back:hover::before {
  transform: translateX(-3px);
}

.contact-back a:hover {
  text-decoration: underline;
}

/* Masqué en mobile, comme la maquette (12105:34076) qui ne le reprend pas. */
@media (max-width: 1023px) {
  .contact-back { display: none; }
}

/* Le formulaire Brevo occupe toute la colonne. */
.contact-form-page .brevo-form,
.contact-form-page .brevo-form__frame {
  width: 100%;
}