/* ============================================================
   LORIUS — styles du thème
   Les jetons de design (couleurs, typo, espacements) viennent de
   theme.json et sont disponibles en variables --wp--preset--*.
   Ce fichier ne contient que ce que theme.json ne sait pas exprimer :
   textures, bords déchirés, compositions de sections.
   ============================================================ */

:root {
  --lorius-papier: url("../img/papier-creme-gravures.webp");
  --lorius-sombre: url("../img/fond-sombre-1.webp");
  /* hauteur du bord déchiré entre deux sections */
  --lorius-dechirure: clamp(32px, 4.5vw, 86px);
}

/* ------------------------------------------------------------
   Fonds
   ------------------------------------------------------------ */

.lorius-papier {
  background-color: var(--wp--preset--color--warm-cream);
  background-image: var(--lorius-papier);
  background-size: cover;
  background-position: center top;
}

.lorius-sombre {
  background-color: var(--wp--preset--color--espresso-brown);
  background-image: var(--lorius-sombre);
  background-size: cover;
  background-position: center;
  color: var(--wp--preset--color--warm-cream);
}

.lorius-sombre :is(h1, h2, h3, h4) { color: var(--wp--preset--color--warm-cream); }

/* ------------------------------------------------------------
   Bords déchirés
   Le tracé vient de la maquette (assets/img/bord-hero-bas.svg).
   On l'utilise en masque : la section garde sa texture, seule
   sa découpe change. preserveAspectRatio="none" dans le SVG
   permet l'étirement sans déformation visible du grain.
   ------------------------------------------------------------ */

.lorius-section { position: relative; }

.lorius-section--dechire-bas {
  -webkit-mask-image: url("../img/bord-hero-bas.svg"), linear-gradient(#000, #000);
          mask-image: url("../img/bord-hero-bas.svg"), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--lorius-dechirure), 100% calc(100% - var(--lorius-dechirure));
          mask-size: 100% var(--lorius-dechirure), 100% calc(100% - var(--lorius-dechirure));
  -webkit-mask-position: bottom center, top center;
          mask-position: bottom center, top center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* le masque du bas est inversé : on garde le haut, on découpe le bas */
  -webkit-mask-composite: source-over;
          mask-composite: add;
  padding-bottom: var(--lorius-dechirure);
}

/* Repli pour les navigateurs sans mask-composite : bord droit plutôt que cassé */
@supports not (mask-composite: add) {
  .lorius-section--dechire-bas {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ------------------------------------------------------------
   Rythme vertical des sections
   ------------------------------------------------------------ */

.lorius-section > :where(.wp-block-group) {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
  padding-block: var(--wp--preset--spacing--60);
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.lorius-hero {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(560px, 51vw, 980px);
  padding-block: var(--wp--preset--spacing--70) calc(var(--lorius-dechirure) + var(--wp--preset--spacing--60));
}

.lorius-hero h1 { margin: 0 0 0.35em; }

/* l'accent doré sur la fin du titre, comme dans la maquette */
.lorius-hero h1 .lorius-accent { color: var(--wp--preset--color--golden); }

.lorius-hero p {
  max-width: 41ch;
  margin-inline: auto;
  color: var(--wp--preset--color--warm-cream);
  font-size: var(--wp--preset--font-size--body);
  letter-spacing: -0.03em;
}

/* ------------------------------------------------------------
   Surtitres ("Les permanentes", "Notre histoire")
   ------------------------------------------------------------ */

.lorius-eyebrow {
  font-family: var(--wp--preset--font-family--display-two);
  font-size: var(--wp--preset--font-size--eyebrow);
  color: var(--wp--preset--color--burnt-orange);
  letter-spacing: -0.03em;
  margin-bottom: 0.2em;
}

/* ------------------------------------------------------------
   Rangée de bières (carrousel)
   ------------------------------------------------------------ */

.lorius-gamme {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--wp--preset--spacing--40);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: var(--wp--preset--spacing--40);
}
.lorius-gamme::-webkit-scrollbar { display: none; }
.lorius-gamme > * { scroll-snap-align: center; text-align: center; }

.lorius-biere__visuel { position: relative; }
.lorius-biere__visuel img { width: 100%; height: auto; }

.lorius-biere__nom {
  font-family: var(--wp--preset--font-family--display-two);
  font-size: var(--wp--preset--font-size--beer-name);
  color: var(--wp--preset--color--burnt-orange);
  letter-spacing: -0.03em;
  margin: 0.6em 0 0.1em;
}

.lorius-biere__style {
  font-size: var(--wp--preset--font-size--xs);
  margin: 0 0 0.9em;
}

/* badge des bières éphémères */
.lorius-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--wp--preset--color--espresso-brown);
  color: var(--wp--preset--color--warm-cream);
  font-family: var(--wp--preset--font-family--display-two);
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45em 1em;
  border-radius: 4px;
  white-space: nowrap;
}

/* flèches de navigation du carrousel */
.lorius-fleche {
  width: 3rem; height: 3rem;
  border: 0; border-radius: 50%;
  background: var(--wp--preset--color--espresso-brown);
  color: var(--wp--preset--color--warm-cream);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.lorius-fleche:hover { background: var(--wp--preset--color--burnt-orange); transform: scale(1.08); }

/* ------------------------------------------------------------
   Accessibilité
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lorius-gamme { scroll-behavior: auto; }
}

:where(a, button):focus-visible {
  outline: 3px solid var(--wp--preset--color--golden);
  outline-offset: 3px;
}