/* Didatec — base layer: reset, layout primitives, buttons, utilities.
   Every value comes from theme.json presets. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg {
  display: block;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
blockquote,
figure {
  margin-block: 0;
}

ul,
ol {
  padding-inline-start: 0;
}

a {
  color: inherit;
  /* The underline is always laid out but transparent at rest: hovering fades
	   its colour in instead of snapping the line on, and it follows wrapped
	   text where a pseudo-element would not. */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition:
    color 0.2s ease,
    text-decoration-color 0.25s ease;
}

button {
  font: inherit;
  color: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Layout ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--70);
}

.container--wide {
  padding-inline: var(--wp--preset--spacing--90);
}

.section {
  padding-block: var(--wp--preset--spacing--100);
}
.section--tight {
  padding-block: var(--wp--preset--spacing--80);
}

.section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  margin-block-end: var(--wp--preset--spacing--60);
}

.section__title {
  margin: 0;
}

.grid {
  display: grid;
  gap: clamp(2.5rem, 1.9231rem + 1.5385vw, 3rem) var(--wp--preset--spacing--50);
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .grid--3,
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Typography helpers ------------------------------------------------------ */

.subheading {
  font-size: var(--wp--preset--font-size--subheading);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.title-h2 {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.title-h3 {
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.title-h4 {
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.text-muted {
  color: var(--wp--preset--color--black-80);
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 20px 14px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: var(--wp--preset--font-size--btn);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.btn--primary {
  background-color: var(--wp--preset--color--red);
  color: var(--wp--preset--color--white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.btn--secondary {
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--red);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--wp--preset--color--red);
  border-color: var(--wp--preset--color--red);
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.btn--light {
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--blue);
}

.btn--light:hover,
.btn--light:focus-visible {
  background-color: var(--wp--preset--color--blue);
  border-color: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.btn--blue {
  background-color: var(--wp--preset--color--blue);
  border-color: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--white);
}

.btn--blue:hover,
.btn--blue:focus-visible {
  background-color: var(--wp--preset--color--black);
  border-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

.btn--outline-blue {
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--black-20);
  color: var(--wp--preset--color--blue);
}

.btn--outline-blue:hover,
.btn--outline-blue:focus-visible {
  border-color: var(--wp--preset--color--blue);
  text-decoration: none;
}

.btn--outline {
  background-color: transparent;
  border-color: var(--wp--preset--color--black-20);
  color: var(--wp--preset--color--black);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--wp--preset--color--black);
  text-decoration: none;
}

.btn--block {
  width: 100%;
}

/* Tags ------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-family: var(--wp--preset--font-family--headline);
  border-radius: 5px;
  /* Teinte translucide : la puce reste lisible sur le gris comme sur le blanc,
     ce que ne permettait pas un aplat field. */
  background-color: var(--wp--preset--color--black-5);
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--black-80);
}

.tag:hover,
.tag:focus-visible {
  background-color: var(--wp--preset--color--blue-20);
  color: var(--wp--preset--color--blue);
  text-decoration: none;
}

/* Link-style CTA --------------------------------------------------------- */

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  /* .cta-link is used on buttons too, which the global `a` rule misses. */
  transition:
    color 0.2s ease,
    text-decoration-color 0.25s ease;
}

.cta-link:hover,
.cta-link:focus-visible {
  text-decoration-color: currentColor;
}

.cta-link__icon {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.2s ease;
}

.cta-link:hover .cta-link__icon {
  transform: translateX(3px);
}

.cta-link--back {
  color: var(--wp--preset--color--blue);
}
.cta-link--back:hover .cta-link__icon {
  transform: translateX(-3px);
}

/* Icons ------------------------------------------------------------------ */

.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.icon--xs {
  width: 10px;
  height: 10px;
}
.icon--sm {
  width: 14px;
  height: 14px;
}
.icon--md {
  width: 20px;
  height: 20px;
}
.icon--lg {
  width: 24px;
  height: 24px;
}

/* Ribbon ----------------------------------------------------------------- */

.ribbon {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  border-radius: 3px;
  font-family: var(--wp--preset--font-family--headline);
  width: fit-content;
  background-color: var(--wp--preset--color--blue-20);
  color: var(--wp--preset--color--blue);
  font-size: var(--wp--preset--font-size--ribbon);
  font-weight: 500;
  line-height: 1;
  /* letter-spacing inherits as a length: reset it or the 14px parent leaks in. */
  letter-spacing: 0;
  text-transform: uppercase;
}

/* On a coloured plate the ribbon turns white — Figma 12288:33838. */
.ribbon--light {
  background-color: var(--wp--preset--color--white);
}

.ribbon--red {
  background-color: var(--wp--preset--color--red);
  color: var(--wp--preset--color--white);
}

/* Forms ------------------------------------------------------------------ */

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: var(--wp--preset--color--field);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--wp--preset--color--field-text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
}

.field:focus-within {
  outline: 2px solid var(--wp--preset--color--blue);
  outline-offset: 2px;
}

/* Pagination ------------------------------------------------------------- */

.pagination {
  margin-block-start: var(--wp--preset--spacing--100);
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__list a,
.pagination__list .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 8px;
  border: 1px solid var(--wp--preset--color--black-20);
  border-radius: 5px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.pagination__list .current {
  background-color: var(--wp--preset--color--blue);
  border-color: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--white);
}

.pagination__list a:hover {
  border-color: var(--wp--preset--color--black);
}

/* Language switch — used in the header bar and at the foot of the page. */
.lang-switch {
  position: relative;
}

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.lang-switch__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  min-width: 64px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--black-20);
  border-radius: 5px;
}

.lang-switch__list a {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.lang-switch__list a:hover {
  background-color: var(--wp--preset--color--field);
}

/* At the bottom of the page the panel opens upwards, right-aligned. */
.lang-switch--up .lang-switch__list {
  top: auto;
  bottom: calc(100% + 8px);
  left: auto;
  right: 0;
}

/* Quantity stepper — Figma 12376:34896: white box, 12px inline padding,
   24px between the controls, the same 5px radius as the buttons beside it. */
.qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--wp--preset--color--black-20);
  border-radius: 5px;
  background-color: var(--wp--preset--color--white);
}

.qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--black);
  cursor: pointer;
  transition: color 0.2s ease;
}

.qty__btn:hover {
  color: var(--wp--preset--color--blue);
}

.qty__btn:disabled {
  color: var(--wp--preset--color--black-20);
  cursor: default;
}

.qty__input {
  /* Two digits wide: the field tops out at 99. */
  width: 2.5ch;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--black);
  font: inherit;
  font-size: var(--wp--preset--font-size--btn);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  -moz-appearance: textfield;
}

/* The native spinners would duplicate the -/+ buttons. */
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Carousels --------------------------------------------------------------- */

/* Mouse and pen drag the track (slider.js); touch keeps native panning. */
.is-scrollable [data-carousel-track] {
  cursor: grab;
}

/* Slider pagination: short dashes under the track, only when it scrolls. */
.carousel-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block-start: 16px;
}

.is-scrollable .carousel-dots {
  display: flex;
}

.carousel-dots__dot {
  position: relative;
  width: 14px;
  /* The dash is 3px tall; the button keeps a finger-sized target. */
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.2s ease;
}

.carousel-dots__dot::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  height: 3px;
  margin-block-start: -1.5px;
  border-radius: 2px;
  background-color: var(--wp--preset--color--black-20);
  transition: background-color 0.2s ease;
}

.carousel-dots__dot.is-active {
  width: 20px;
}

.carousel-dots__dot.is-active::before {
  background-color: var(--wp--preset--color--blue);
}

[data-carousel-track].is-dragging {
  cursor: grabbing;
  user-select: none;
  /* Snapping fights a scrollLeft written on every pointer move. */
  scroll-snap-type: none;
}

/* Accessibility ---------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--wp--preset--spacing--40);
  z-index: 1000;
  padding: 12px 20px;
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--btn);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--wp--preset--spacing--40);
}

[hidden] {
  display: none !important;
}

.is-visually-hidden-until-open[aria-expanded="false"] + * {
  display: none;
}

/* Product card — Figma 12288:33838: square visual on a light plate, ribbon
   and selection toggle laid over it, reference and title underneath. */

.product-grid {
  align-items: start;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-card__visual {
  position: relative;
}

.product-card__media {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--wp--preset--color--field);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  /* Room kept for the ribbon on top and the toggle at the bottom. */
  padding: 48px 16px;
  object-fit: contain;
  mix-blend-mode: darken;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__media img {
  transform: scale(1.03);
}

.product-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* The ribbon spans the visual, like the mockup's full-width band. */
.product-card__tag {
  position: absolute;
  inset-inline: 16px;
  inset-block-start: 16px;
  background-color: var(--wp--preset--color--white);
}

.product-card__visual .selection-icon {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 16px;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-card__ref {
  font-size: var(--wp--preset--font-size--subheading);
  font-weight: 500;
  line-height: 1;
}

.product-card__title {
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 400;
  line-height: 1.2;
}

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

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

/* Gamme tile — Figma 12106:36175: 432 x 279, radius 5, double gradient veil */

.gamme-card {
  min-width: 0;
}

.gamme-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 432 / 279;
  border-radius: 5px;
  overflow: hidden;
  text-decoration: none;
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--black);
}

.gamme-card__media {
  position: absolute;
  inset: 0;
}

.gamme-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Voile de la maquette, renforcé pour que le titre blanc garde un contraste
	   AA quelle que soit la photo chargée. */
  background-image:
    linear-gradient(-9.27deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.78) 96%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

.gamme-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gamme-card__link:hover .gamme-card__img {
  transform: scale(1.04);
}

.gamme-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--wp--preset--spacing--60);
  max-width: 262px;
}

.gamme-card__title {
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.gamme-card__count {
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1;
  color: var(--wp--preset--color--white);
}

/* Figma 12106:36179: a bare white chevron, no plate behind it and no arrow
   shaft. The 41x41 box is the 17px glyph plus the mockup's 12px padding, so
   the chevron lands 24px from the tile's edges. */
.gamme-card__link::after {
  content: "";
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  width: 41px;
  height: 41px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="none" stroke="%23ffffff" stroke-width="1.5"><path d="M6 3.54 10.96 8.5 6 13.46"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  transition: transform 0.2s ease;
}

.gamme-card__link:hover::after {
  transform: translateX(3px);
}