/* ==========================================================================
   SAKU — Poudre de Sakura
   Feuille de style unique de la boutique. Reprend la structure du theme
   Matcham (hero + banderole, grille produits, section liquide avec mascotte,
   rituel sombre, fabrication, journal, FAQ) portee hors de Shopify : plus de
   Liquid, plus de portee `#MatchamLuxury-{{ section.id }}`, tout est en
   classes `saku-`. La charte verte devient une charte rose sakura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Socle
   -------------------------------------------------------------------------- */

/* 62,5 % : 1rem = 10px. Toutes les mesures du theme d'origine sont ecrites
   dans cette base, on la conserve pour ne rien avoir a reconvertir. */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

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

:root {
  /* Charte SAKU · ROSA (v2) : Rose fonce #CB787F, Rose mi-fonce #D8999E,
     Rose clair #F9CDCC, Noir, Blanc. Fond papier echantillonne sur la
     planche de marque : #FAF1E9. Les noms de variables sont conserves de
     la version precedente pour ne pas casser tout le CSS qui les utilise :
     seules les valeurs changent de charte. */
  --saku-the: #1C1B1A;
  --saku-the-nuit: #141312;
  --saku-bois: #CB787F;
  --saku-rose: #D8999E;
  --saku-sakura: #F9CDCC;
  --saku-creme: #FAF1E9;
  --saku-grege: #8A7A78;
  --saku-line: rgba(28, 27, 26, 0.14);
  --saku-hero-eyebrow: var(--saku-bois);
  --saku-mascotte-duree: 54s;
  --saku-mascotte-largeur: clamp(11rem, 15vw, 20rem);
  /* Course : la fenetre moins la mascotte et une marge de chaque cote. */
  --saku-mascotte-course: calc(100vw - var(--saku-mascotte-largeur) - 4rem);
  --saku-entete-hauteur: 6.4rem;
  /* "Bright", la police de titrage de la charte, est une police proprietaire
     non disponible publiquement : Bevan en reprend l'esprit (serif massive,
     condensee, empattements francs) parmi les polices Google Fonts. */
  --font-titre: 'Bevan', Georgia, 'Times New Roman', serif;
  --font-kanji: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-texte: 'Noto Serif', Georgia, 'Times New Roman', serif;
}

body {
  margin: 0;
  background: var(--saku-creme);
  color: var(--saku-the);
  font-family: var(--font-texte);
  font-size: 1.6rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 400;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--saku-bois);
  outline-offset: 3px;
}

[id] {
  scroll-margin-top: calc(var(--saku-entete-hauteur) + 2rem);
}

.saku-wrap {
  width: min(100% - 3rem, 1280px);
  margin: 0 auto;
}

.saku-eyebrow {
  margin: 0 0 1rem;
  color: var(--saku-grege);
  font-family: var(--font-texte);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
}

.saku-display,
.saku-heading {
  margin: 0;
  color: inherit;
  letter-spacing: 0;
}

.saku-display {
  /* Repli pour les navigateurs sans unites de conteneur. */
  font-size: clamp(5.6rem, 10vw, 13.8rem);
  /* La taille suit la largeur reelle de la colonne, pas celle de la fenetre :
     "de Kyoto" tient toujours sur une seule ligne. */
  font-size: clamp(4rem, 14.5cqw, 13rem);
  line-height: 1;
}

.saku-heading {
  font-size: clamp(3.4rem, 5vw, 7.2rem);
  line-height: 0.96;
}

.saku-copy {
  margin: 0;
  color: rgba(28, 27, 26, 0.72);
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  line-height: 1.6;
}

.saku-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 4.8rem;
  padding: 0 2.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--saku-the);
  color: var(--saku-creme);
  font-family: var(--font-texte);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.saku-button:hover {
  transform: translateY(-2px);
}

.saku-button--rose {
  background: var(--saku-bois);
  color: #FFFDFB;
}

.saku-button--ghost {
  border-color: rgba(28, 27, 26, 0.32);
  background: rgba(250, 241, 233, 0.55);
  color: var(--saku-the);
  backdrop-filter: blur(10px);
}

.saku-button--ligne {
  border-color: var(--saku-line);
  background: transparent;
  color: var(--saku-the);
}

.saku-button[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Entete et pied de page (la partie que Shopify fournissait)
   -------------------------------------------------------------------------- */

.saku-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--saku-line);
  background: rgba(250, 241, 233, 0.86);
  backdrop-filter: blur(14px);
}

.saku-entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--saku-entete-hauteur);
}

.saku-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-titre);
  font-size: 2.4rem;
  letter-spacing: 0.32rem;
  text-decoration: none;
  text-transform: uppercase;
}

.saku-logo img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
}

.saku-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.8rem);
}

.saku-nav a {
  font-size: 1.35rem;
  letter-spacing: 0.08rem;
  text-decoration: none;
  text-transform: uppercase;
  color: rgba(28, 27, 26, 0.74);
  transition: color 160ms ease;
}

.saku-nav a:hover,
.saku-nav a[aria-current='page'] {
  color: var(--saku-bois);
}

.saku-panier-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 4rem;
  padding: 0 1.6rem;
  border: 1px solid var(--saku-line);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font-family: var(--font-texte);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
}

.saku-panier-bouton__compte {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--saku-bois);
  color: #fff;
  font-size: 1.1rem;
}

.saku-burger {
  display: none;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid var(--saku-line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.saku-pied {
  border-top: 1px solid var(--saku-line);
  background: var(--saku-the-nuit);
  color: rgba(250, 241, 233, 0.78);
}

.saku-pied__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr));
  gap: clamp(2.4rem, 4vw, 5rem);
  padding: clamp(4rem, 6vw, 7rem) 0 3rem;
}

.saku-pied h3 {
  margin: 0 0 1.2rem;
  color: var(--saku-creme);
  font-size: 1.3rem;
  font-family: var(--font-texte);
  font-weight: 600;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
}

.saku-pied ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.saku-pied a {
  color: inherit;
  font-size: 1.4rem;
  text-decoration: none;
}

.saku-pied a:hover {
  color: var(--saku-rose);
}

.saku-pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid rgba(250, 241, 233, 0.14);
  font-size: 1.25rem;
}

.saku-pied__marque {
  font-family: var(--font-titre);
  font-size: 2.2rem;
  letter-spacing: 0.3rem;
  color: var(--saku-creme);
}

.saku-pied__infolettre {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.saku-pied__infolettre input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 4.4rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(250, 241, 233, 0.24);
  border-radius: 999px;
  background: rgba(250, 241, 233, 0.06);
  color: var(--saku-creme);
  font: inherit;
  font-size: 1.4rem;
}

.saku-pied__infolettre input::placeholder {
  color: rgba(250, 241, 233, 0.5);
}

/* --------------------------------------------------------------------------
   3. Hero — porte de `.mk-hero`
   -------------------------------------------------------------------------- */

.saku-hero {
  position: relative;
  min-height: auto;
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--saku-creme);
  color: var(--saku-the);
}

.saku-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.saku-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.saku-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 76%, rgba(247, 231, 232, 0.6), transparent 30%),
    linear-gradient(90deg, rgba(250, 241, 233, 0.94), rgba(250, 241, 233, 0.6) 46%, rgba(250, 241, 233, 0));
}

.saku-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: clamp(2.4rem, 5vw, 6.4rem);
  align-items: end;
  padding: clamp(4rem, 5vw, 6rem) 0 clamp(4rem, 6vw, 7rem);
}

.saku-hero__text {
  container-type: inline-size;
}

.saku-hero .saku-eyebrow {
  color: var(--saku-hero-eyebrow);
}

.saku-hero .saku-copy {
  max-width: 54rem;
  margin-top: 2.4rem;
  color: rgba(28, 27, 26, 0.76);
}

.saku-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3.2rem;
}

.saku-hero__proof {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid rgba(28, 27, 26, 0.12);
  border-radius: 6px;
  background: rgba(250, 241, 233, 0.74);
  backdrop-filter: blur(14px);
}

.saku-proof-row {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  color: rgba(28, 27, 26, 0.74);
}

.saku-proof-row strong {
  flex: 0 0 auto;
  /* Juste assez large pour aligner 1/2/3 entre eux, sans creuser d'ecart. */
  min-width: 2.6rem;
  color: var(--saku-the);
  font-family: var(--font-titre);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
}

/* Toile du hero : la branche de sakura de la charte drape le coin haut, le
   bocal photographie ancre la composition, Kaze regarde depuis pres de la
   carte de preuves. Ce sont les visuels reels de la planche de marque, plus
   d'illustration peinte a la main : c'est elle qui rendait le hero plat. */
.saku-hero__toile {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.saku-hero__branche {
  position: absolute;
  top: -3%;
  right: -4%;
  width: clamp(26rem, 34vw, 46rem);
  height: auto;
  opacity: 0.92;
  transform: scaleX(-1);
}

.saku-hero__bocal {
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: -6%;
  width: clamp(16rem, 20vw, 24rem);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(28, 27, 26, 0.18));
}

.saku-hero__kaze {
  position: absolute;
  /* A gauche de la carte de preuves, jamais dessous : aucune ambiguite de
     recouvrement, quelle que soit la hauteur de la fenetre. */
  z-index: 3;
  /* Valeur fixe plutot que vw : cette toile disparait sous 990px (regle
     plus bas), donc pas besoin d'echelle responsive ; juste degager la
     carte de preuves, dont la position ne bouge plus au-dela de ce seuil. */
  right: 40rem;
  bottom: 8%;
  width: clamp(7rem, 9vw, 10rem);
  height: auto;
  filter: drop-shadow(0 14px 20px rgba(28, 27, 26, 0.16));
  animation: sakuHeroFlotte 4.4s ease-in-out infinite;
}

@keyframes sakuHeroFlotte {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-1rem) rotate(1.5deg); }
}

/* Petales qui tombent en continu sur le hero : l'equivalent sakura de la
   poussiere doree du theme d'origine. Chaque petale porte ses propres delai,
   duree et derive, poses en style inline par app.js. */
.saku-petales {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.saku-petale {
  position: absolute;
  top: -8vh;
  width: var(--taille, 14px);
  height: auto;
  opacity: 0.85;
  animation: sakuChute var(--duree, 12s) linear var(--delai, 0s) infinite;
}

@keyframes sakuChute {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  50% { transform: translate3d(var(--derive, 6vw), 50vh, 0) rotate(180deg); }
  100% { transform: translate3d(0, 110vh, 0) rotate(360deg); }
}

/* --------------------------------------------------------------------------
   4. Banderole defilante — porte de `.mk-marquee`
   -------------------------------------------------------------------------- */

.saku-marquee {
  border-block: 1px solid rgba(28, 27, 26, 0.12);
  background: var(--saku-the);
  color: var(--saku-creme);
  overflow: hidden;
}

.saku-marquee__track {
  display: flex;
  width: max-content;
  /* Duree calee sur la longueur du ruban pour garder la vitesse de
     defilement d'origine (~53 px/s) malgre l'allongement de la piste. */
  animation: sakuMarquee 68s linear infinite;
}

.saku-marquee span {
  padding: 1.3rem 2.4rem;
  color: rgba(250, 241, 233, 0.86);
  font-size: 1.2rem;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes sakuMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   5. Rythme des sections
   -------------------------------------------------------------------------- */

.saku-section {
  position: relative;
  padding: clamp(6.4rem, 9vw, 12rem) 0;
}

.saku-section--flush-bottom {
  padding-bottom: clamp(2.4rem, 3vw, 3.6rem);
}

/* Le rituel est une grille dense : le rythme vertical des sections de texte
   y creuse des vides. Respiration reduite de moitie environ. */
.saku-section--serre {
  padding: clamp(3.6rem, 4.6vw, 5.6rem) 0;
}

.saku-section--dark {
  background: var(--saku-the-nuit);
  color: var(--saku-creme);
}

.saku-section--dark .saku-copy {
  color: rgba(250, 241, 233, 0.76);
}

/* --------------------------------------------------------------------------
   6. Section « infusion » — porte de `.mk-liquid` (mascotte qui nage)
   -------------------------------------------------------------------------- */

.saku-liquid {
  position: relative;
  min-height: auto;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--saku-creme);
  /* Le retrait haut est le couloir de nage de la mascotte, le bas est reduit
     au minimum : la hauteur suit le contenu au lieu d'un plancher fixe. */
  padding: clamp(7rem, 9vw, 10rem) 0 clamp(2.4rem, 3.5vw, 4rem);
}

.saku-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/saku-infusion.svg');
  background-position: center bottom;
  background-size: cover;
  opacity: 0.92;
  /* Le bord haut de l'illustration coupait net sur la section precedente.
     Le masque la dissout dans la couleur de fond au lieu d'un raccord franc. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  /* Le parallaxe au defilement passe par `translate`, la derive laterale par
     `transform` : les deux se composent sans se marcher dessus. */
  translate: 0 var(--saku-liquid-y, 0);
  transform: scale(1.08);
  animation: sakuWaveDrift 46s ease-in-out infinite alternate;
  will-change: transform, translate;
}

@keyframes sakuWaveDrift {
  from { transform: translate3d(-2%, 0, 0) scale(1.08); }
  to { transform: translate3d(2%, 0, 0) scale(1.08); }
}

.saku-mascotte {
  position: absolute;
  left: 0;
  top: clamp(1.2rem, 1.6vw, 2rem);
  z-index: 1;
  width: var(--saku-mascotte-largeur);
  pointer-events: none;
  animation: sakuMascotteTrajet var(--saku-mascotte-duree) linear infinite;
}

.saku-mascotte__flotte {
  position: relative;
  animation: sakuMascotteFlotte 4.6s ease-in-out infinite;
}

.saku-mascotte img {
  display: block;
  width: 100%;
  height: auto;
}

/* Elle part et revient completement hors cadre : le retournement a lieu
   pendant qu'elle est invisible, on ne voit jamais la rotation. */
@keyframes sakuMascotteTrajet {
  0% { transform: translateX(-100%) scaleX(-1); }
  46% { transform: translateX(100vw) scaleX(-1); }
  50% { transform: translateX(100vw) scaleX(1); }
  96% { transform: translateX(-100%) scaleX(1); }
  100% { transform: translateX(-100%) scaleX(-1); }
}

@keyframes sakuMascotteFlotte {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.9rem) rotate(-1.6deg); }
}

/* Une seule colonne centree : le titre est la piece maitresse de la section,
   le texte se range dessous plutot qu'a cote. */
.saku-liquid__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(1.8rem, 2.6vw, 3rem);
  text-align: center;
}

.saku-liquid__content .saku-heading {
  font-size: clamp(3.8rem, 5.8vw, 8.4rem);
}

.saku-liquid .saku-copy {
  max-width: 56rem;
}

/* --------------------------------------------------------------------------
   7. Grille produits — porte de `.mk-product-grid`
   -------------------------------------------------------------------------- */

.saku-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

.saku-product-grid__head {
  position: sticky;
  top: 9rem;
}

/* La colonne de gauche est etroite : sans ce plafond, un mot long ne tient
   pas et se coupe en plein milieu. */
.saku-product-grid__head .saku-heading {
  font-size: clamp(2.8rem, 4.2vw, 6rem);
}

/* Rose profond plutot que l'or : reprend la couleur des prix juste a cote. */
.saku-product-grid__head .saku-eyebrow,
.saku-journal__head .saku-eyebrow {
  color: var(--saku-bois);
}

/* Trait decoratif a l'encre, sous les cartes produit. Il est place dans la
   grille des cartes : sans cette portee il occuperait une seule colonne au
   lieu de courir sous les trois. */
.saku-products__trait {
  grid-column: 1 / -1;
  display: block;
  width: min(100%, 60rem);
  height: auto;
  margin: clamp(2.8rem, 4vw, 4.4rem) auto 0;
}

/* Visuel produit sous le texte, recadre au carre pour que la colonne
   collante ne deborde pas de l'ecran. */
.saku-product-grid__visuel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center bottom;
  margin-top: 2.8rem;
  border: 1px solid var(--saku-line);
  border-radius: 6px;
}

.saku-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.saku-products--large {
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
}

.saku-product {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
  border: 1px solid var(--saku-line);
  border-radius: 6px;
  background: #FDFBF8;
  color: var(--saku-the);
  overflow: hidden;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.saku-product:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 122, 130, 0.4);
  box-shadow: 0 20px 50px rgba(28, 27, 26, 0.1);
}

.saku-product__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, #F9CDCC, #ffffff);
  overflow: hidden;
}

.saku-product__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.saku-product:hover .saku-product__image img {
  transform: scale(1.045) rotate(-1deg);
}

.saku-product__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--saku-bois);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
}

.saku-product__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.8rem;
}

.saku-product__title {
  margin: 0;
  color: inherit;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: 0;
}

.saku-product__meta {
  color: rgba(28, 27, 26, 0.64);
  font-size: 1.3rem;
  line-height: 1.4;
}

.saku-product__price {
  margin-top: auto;
  padding-top: 0.6rem;
  color: var(--saku-bois);
  font-weight: 700;
}

.saku-product__price del {
  margin-left: 0.8rem;
  color: rgba(28, 27, 26, 0.4);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   8. Rituel — porte de `.mk-ritual`
   -------------------------------------------------------------------------- */

.saku-ritual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(250, 241, 233, 0.16);
  background: rgba(250, 241, 233, 0.16);
}

.saku-step {
  padding: 1.8rem 2.2rem 2.2rem;
  background: var(--saku-the-nuit);
}

.saku-ritual__intro {
  max-width: 72rem;
  margin-bottom: 2.2rem;
}

/* Kaze assise sur le filet du haut de la grille. `bottom: 100%` pose le bas
   de l'image pile sur ce filet, quelle que soit sa taille. */
.saku-ritual__mascotte {
  position: absolute;
  right: clamp(1.6rem, 5vw, 7rem);
  bottom: 100%;
  width: clamp(4.6rem, 6.5vw, 7.6rem);
  height: auto;
  pointer-events: none;
}

/* Rose clair et non le rose profond : sur le fond prune, le rose sombre de
   la charte tomberait sous le seuil de contraste, donc illisible. */
.saku-section--dark .saku-eyebrow,
.saku-step__num {
  color: var(--saku-rose);
}

.saku-step__num {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
}

.saku-step h3 {
  margin: 1.4rem 0 0.9rem;
  color: inherit;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.saku-step p {
  margin: 0;
  color: rgba(250, 241, 233, 0.74);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   9. Fabrication — porte de `.mk-fabrication`
   -------------------------------------------------------------------------- */

.saku-fabrication {
  position: relative;
  overflow: hidden;
}

.saku-fabrication__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* L'agrandissement evite que le flou ne laisse voir les bords du cadre. */
  transform: scale(1.12);
  filter: blur(36px);
  pointer-events: none;
}

/* Trait d'encre en tuile : une portion du trace suivie de son miroir, donc
   ses deux bords sont identiques et il se repete sans couture. Le vide au
   centre de la tuile ouvre la ligne tous les 416 px. */
.saku-fabrication__trait {
  position: relative;
  z-index: 2;
  display: block;
  height: 32px;
  background-image: url('../img/saku-trait-ouvert.svg');
  background-repeat: repeat-x;
  background-size: 416px 32px;
  /* Le papier est peint derriere l'encre : les vides du trace s'ouvrent sur
     le fond de page et non sur l'agrandissement flou qui deborde dessous. */
  background-color: var(--saku-creme);
}

/* Retourne et decale la tuile pour que le bas ne soit pas l'echo exact du
   haut : les ouvertures ne tombent pas en face. */
.saku-fabrication__trait--bas {
  transform: scaleY(-1);
  background-position: -137px 0;
}

.saku-fabrication__lien {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 1491px;
  margin-inline: auto;
}

/* Fondu vers le fond de page juste au-dessus du trait du bas, sur toute la
   largeur : le visuel net et son extension floue s'y eteignent ensemble. */
.saku-fabrication::after {
  content: "";
  position: absolute;
  inset: auto 0 32px;
  z-index: 3;
  /* Le bouton dessine dans l'illustration commence a 6,6 % du bas : au-dela
     de cette hauteur, le fondu le delaverait. */
  height: 7%;
  background: linear-gradient(to bottom, rgba(250, 241, 233, 0), var(--saku-creme));
  pointer-events: none;
}

.saku-fabrication__lien picture,
.saku-fabrication__lien img {
  display: block;
}

.saku-fabrication__visuel {
  display: block;
  width: 100%;
  height: auto;
}

/* Au-dela de la largeur reelle du fichier, le visuel net ne remplit plus la
   fenetre et son bord tranche net sur l'extension floue : ce fondu lateral
   fait disparaitre la jonction. */
@media screen and (min-width: 1492px) {
  .saku-fabrication__lien {
    mask-image: linear-gradient(to right, transparent, #000 3.5%, #000 96.5%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5%, #000 96.5%, transparent);
  }
}

/* --------------------------------------------------------------------------
   10. Journal — porte de `.mk-journal`
   -------------------------------------------------------------------------- */

.saku-journal {
  display: grid;
  /* Colonne de gauche elargie : elle porte le texte puis l'illustration, qui
     a besoin de place pour rester lisible. */
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

.saku-journal__head .saku-heading {
  font-size: clamp(2.8rem, 3.6vw, 5.2rem);
}

.saku-articles {
  display: grid;
  gap: 1rem;
}

/* Cartes resserrees : vignette plus petite et plus large que haute, pour que
   les trois tiennent dans une section nettement plus courte. */
.saku-article {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--saku-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease;
}

.saku-article:hover {
  transform: translateX(3px);
  border-color: rgba(201, 122, 130, 0.4);
}

.saku-article__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.saku-article h3 {
  margin: 0 0 0.5rem;
  color: inherit;
  font-size: 1.8rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.saku-article p {
  margin: 0;
  color: rgba(28, 27, 26, 0.7);
  font-size: 1.4rem;
  line-height: 1.4;
}

/* Kaze en meditation occupe le bas de la colonne de gauche, laissee vide par
   le texte. Deux animations de periodes premieres entre elles se superposent
   sans jamais se resynchroniser : le corps flotte, la silhouette respire. */
.saku-medite {
  margin: clamp(2.4rem, 4vw, 5rem) auto 0;
  width: clamp(13rem, 16vw, 22rem);
  animation: sakuLevite 7s ease-in-out infinite;
}

.saku-medite__corps {
  display: block;
  width: 100%;
  height: auto;
  /* Le point fixe est l'assise, pas le centre : la respiration souleve le
     buste et la tete sans faire glisser les jambes. */
  transform-origin: 50% 84%;
  animation: sakuRespire 4.2s ease-in-out infinite;
}

@keyframes sakuLevite {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-1.3rem) rotate(0.5deg); }
}

@keyframes sakuRespire {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* --------------------------------------------------------------------------
   11. FAQ et reveal — porte de `.mk-faq` / `[data-mk-reveal]`
   -------------------------------------------------------------------------- */

.saku-faq {
  display: grid;
  gap: 0.8rem;
}

.saku-faq details {
  border-top: 1px solid rgba(28, 27, 26, 0.16);
  padding: 1.6rem 0;
}

.saku-faq summary {
  cursor: pointer;
  color: var(--saku-the);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0;
}

.saku-faq p {
  max-width: 72rem;
  margin: 1rem 0 0;
  color: rgba(28, 27, 26, 0.72);
  line-height: 1.6;
}

[data-saku-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-saku-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   12. Intro animee — porte de la section `matcham-intro-overlay`
   -------------------------------------------------------------------------- */

.saku-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: var(--saku-creme);
  color: var(--saku-the);
  overflow: hidden;
}

.saku-intro[hidden] {
  display: none;
}

/* La signature de l'intro suit la planche de marque : le kanji, le
   mot-symbole, puis la baseline en capitales espacees. */
.saku-intro__brand {
  display: grid;
  justify-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.8rem);
  font-family: var(--font-titre);
  line-height: 0.9;
  text-align: center;
  transform-origin: center;
  will-change: transform, opacity;
}

.saku-intro__kanji {
  font-family: var(--font-kanji);
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  color: var(--saku-bois);
}

.saku-intro__mot {
  /* Chaque mot est un groupe insecable (voir .saku-intro__groupe) : sur un
     ecran etroit, le retour a la ligne ne peut tomber qu'entre les deux
     mots, jamais au milieu de l'un d'eux. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.28em;
  font-size: clamp(3.4rem, 13vw, 16rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.saku-intro__groupe {
  white-space: nowrap;
}

.saku-intro__tag {
  font-family: var(--font-texte);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--saku-grege);
}

.saku-intro__letter {
  display: inline-block;
  will-change: transform;
}

.saku-intro__fleur {
  position: absolute;
  top: -20vh;
  width: clamp(80px, 16vw, 180px);
  max-height: 28vh;
  filter: drop-shadow(0 18px 30px rgba(28, 27, 26, 0.18));
  will-change: transform, opacity;
}

.saku-intro__skip {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding: 1rem 1.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Pendant l'intro, la page ne defile pas derriere le voile. */
.saku-intro-active body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .saku-intro {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13. Panier lateral — la partie que Shopify fournissait (cart drawer)
   -------------------------------------------------------------------------- */

.saku-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr minmax(0, 42rem);
  visibility: hidden;
}

.saku-drawer[open],
.saku-drawer.is-open {
  visibility: visible;
}

.saku-drawer__voile {
  background: rgba(28, 27, 26, 0.42);
  opacity: 0;
  transition: opacity 260ms ease;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.saku-drawer.is-open .saku-drawer__voile {
  opacity: 1;
}

.saku-drawer__panneau {
  display: flex;
  flex-direction: column;
  background: var(--saku-creme);
  box-shadow: -20px 0 60px rgba(28, 27, 26, 0.18);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.saku-drawer.is-open .saku-drawer__panneau {
  transform: translateX(0);
}

.saku-drawer__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.4rem;
  border-bottom: 1px solid var(--saku-line);
}

.saku-drawer__tete h2 {
  margin: 0;
  font-size: 2.2rem;
}

.saku-drawer__fermer {
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--saku-line);
  border-radius: 999px;
  background: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.saku-drawer__corps {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.6rem 2.4rem;
}

.saku-drawer__pied {
  padding: 2rem 2.4rem 2.6rem;
  border-top: 1px solid var(--saku-line);
  background: #fff;
}

.saku-ligne {
  display: grid;
  grid-template-columns: 7.2rem 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--saku-line);
}

.saku-ligne__image {
  width: 7.2rem;
  height: 7.2rem;
  border: 1px solid var(--saku-line);
  border-radius: 6px;
  background: linear-gradient(145deg, #F9CDCC, #ffffff);
  object-fit: contain;
  padding: 6%;
}

.saku-ligne__titre {
  margin: 0 0 0.3rem;
  font-size: 1.6rem;
}

.saku-ligne__meta {
  margin: 0;
  color: rgba(28, 27, 26, 0.6);
  font-size: 1.3rem;
}

.saku-ligne__prix {
  font-weight: 700;
  color: var(--saku-bois);
  white-space: nowrap;
}

.saku-qte {
  display: inline-flex;
  align-items: center;
  margin-top: 0.6rem;
  border: 1px solid var(--saku-line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.saku-qte button {
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.6rem;
  cursor: pointer;
}

.saku-qte button:hover {
  background: var(--saku-sakura);
}

.saku-qte span {
  min-width: 3rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
}

.saku-supprimer {
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(28, 27, 26, 0.55);
  font: inherit;
  font-size: 1.25rem;
  text-decoration: underline;
  cursor: pointer;
}

.saku-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.4rem;
  font-size: 1.8rem;
}

.saku-total strong {
  font-size: 2.2rem;
}

.saku-vide {
  padding: 4rem 0;
  text-align: center;
  color: rgba(28, 27, 26, 0.6);
}

/* --------------------------------------------------------------------------
   14. Pages boutique, produit, panier, commande
   -------------------------------------------------------------------------- */

.saku-page-tete {
  padding: clamp(4rem, 6vw, 7rem) 0 clamp(2rem, 3vw, 3rem);
  border-bottom: 1px solid var(--saku-line);
}

.saku-page-tete .saku-heading {
  font-size: clamp(3.6rem, 6vw, 7.2rem);
}

.saku-fil {
  margin: 0 0 1.4rem;
  color: rgba(28, 27, 26, 0.55);
  font-size: 1.3rem;
}

.saku-fil a {
  text-decoration: none;
}

.saku-fil a:hover {
  color: var(--saku-bois);
}

.saku-produit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2.4rem, 5vw, 6rem);
  align-items: start;
  padding: clamp(3rem, 5vw, 6rem) 0;
}

.saku-produit__galerie {
  display: grid;
  gap: 1rem;
}

.saku-produit__visuel {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6%;
  border: 1px solid var(--saku-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #F9CDCC, #ffffff);
}

.saku-produit__vignettes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.saku-produit__vignettes img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 8%;
  border: 1px solid var(--saku-line);
  border-radius: 6px;
  background: #fff;
}

.saku-produit__titre {
  font-size: clamp(3.2rem, 4.4vw, 5.2rem);
  line-height: 1;
}

.saku-produit__prix {
  margin: 1.6rem 0 0;
  color: var(--saku-bois);
  font-size: 2.8rem;
  font-weight: 700;
}

.saku-produit__achat {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 2.4rem 0;
}

.saku-produit__achat .saku-qte {
  margin-top: 0;
  min-height: 4.8rem;
}

.saku-produit__achat .saku-qte button {
  height: 4.6rem;
  width: 4rem;
}

.saku-specs {
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid var(--saku-line);
  padding-top: 2rem;
}

.saku-specs li {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  font-size: 1.45rem;
}

.saku-specs span:first-child {
  color: rgba(28, 27, 26, 0.6);
}

.saku-notice {
  display: none;
  margin: 1.2rem 0 0;
  padding: 1.2rem 1.6rem;
  border-radius: 6px;
  background: var(--saku-sakura);
  color: var(--saku-the-nuit);
  font-size: 1.4rem;
}

.saku-notice.is-visible {
  display: block;
}

.saku-panier-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(3rem, 5vw, 6rem) 0 8rem;
}

.saku-recap {
  position: sticky;
  top: 9rem;
  padding: 2.4rem;
  border: 1px solid var(--saku-line);
  border-radius: 8px;
  background: #fff;
}

.saku-recap h2 {
  margin: 0 0 1.6rem;
  font-size: 2.2rem;
}

.saku-recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 0.6rem 0;
  font-size: 1.45rem;
}

.saku-recap__ligne--total {
  margin-top: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--saku-line);
  font-size: 1.9rem;
  font-weight: 700;
}

.saku-form {
  display: grid;
  gap: 1.6rem;
}

.saku-form__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.saku-champ {
  display: grid;
  gap: 0.6rem;
}

.saku-champ label {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
}

.saku-champ input,
.saku-champ select,
.saku-champ textarea {
  min-height: 4.8rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--saku-line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
}

.saku-champ textarea {
  min-height: 10rem;
  resize: vertical;
}

.saku-paiement {
  display: grid;
  gap: 1rem;
  margin-top: 0.6rem;
}

.saku-paiement label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--saku-line);
  border-radius: 6px;
  background: #fff;
  font-size: 1.45rem;
  cursor: pointer;
}

.saku-paiement label:has(input:checked) {
  border-color: var(--saku-bois);
  box-shadow: 0 0 0 1px var(--saku-bois);
}

.saku-article-page {
  padding: clamp(3rem, 5vw, 6rem) 0 clamp(4rem, 7vw, 8rem);
}

.saku-article-page__corps {
  max-width: 72rem;
  margin: 0 auto;
}

.saku-article-page__corps h2 {
  margin: 4rem 0 1.4rem;
  font-size: clamp(2.6rem, 3.4vw, 3.8rem);
}

.saku-article-page__corps p {
  color: rgba(28, 27, 26, 0.78);
  font-size: 1.7rem;
  line-height: 1.75;
}

.saku-article-page__banniere {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* --------------------------------------------------------------------------
   15. Compagnon flottant — porte de `sylvain-assistant.liquid`
   -------------------------------------------------------------------------- */

.saku-compagnon {
  position: fixed;
  right: clamp(1.2rem, 2vw, 2.8rem);
  bottom: clamp(1.2rem, 2vw, 2.8rem);
  z-index: 45;
  width: clamp(58px, 7vw, 92px);
  pointer-events: none;
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
  transition: opacity 180ms ease;
}

.saku-compagnon img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(28, 27, 26, 0.2));
  transform: translate3d(var(--saku-compagnon-x, 0), var(--saku-compagnon-y, 0), 0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Il s'efface des qu'un panneau s'ouvre : il ne doit jamais se retrouver
   par-dessus le panier ni une reponse de FAQ depliee. */
body:has(.saku-drawer.is-open) .saku-compagnon,
body:has(details[open]) .saku-compagnon {
  opacity: 0;
}

@media screen and (max-width: 749px) {
  .saku-compagnon {
    width: 54px;
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
   16. Adaptations — portees de `.mk-*`, memes seuils
   -------------------------------------------------------------------------- */

@media screen and (max-width: 989px) {
  .saku-hero {
    min-height: auto;
  }

  .saku-hero__content,
  .saku-liquid__content,
  .saku-product-grid,
  .saku-journal,
  .saku-produit,
  .saku-panier-page {
    grid-template-columns: 1fr;
  }

  .saku-hero__proof,
  .saku-product-grid__head,
  .saku-recap {
    position: relative;
    top: auto;
  }

  /* En dessous de ce seuil la carte passe sous le texte : la branche et le
     bocal, cales sur la position "carte a droite" du mode 2 colonnes, ne
     suivraient plus rien de precis. */
  .saku-hero__toile {
    display: none;
  }

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

  .saku-ritual {
    grid-template-columns: 1fr;
  }

  .saku-step h3 {
    margin-top: 1.4rem;
  }

  /* Le titre passe sur deux lignes pleine largeur : on degage la hauteur de
     Kaze sous lui, sinon elle recouvre la fin du titre. */
  .saku-ritual__intro {
    margin-bottom: 6rem;
  }

  .saku-ritual__mascotte {
    width: 4rem;
  }

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

@media screen and (max-width: 749px) {
  .saku-hero__content {
    padding-top: 4rem;
  }

  .saku-products {
    grid-template-columns: 1fr;
  }

  .saku-article {
    grid-template-columns: 1fr;
  }

  /* Pleine largeur, le ratio des vignettes ferait un pave : bandeau. */
  .saku-article__thumb {
    aspect-ratio: 2.4 / 1;
  }

  .saku-nav {
    display: none;
  }

  .saku-nav.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 1.2rem;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--saku-line);
    background: var(--saku-creme);
  }

  .saku-burger {
    display: block;
  }

  .saku-drawer {
    grid-template-columns: 0 1fr;
  }

  .saku-form__duo {
    grid-template-columns: 1fr;
  }

  /* Sur mobile l'illustration est minuscule : le trait est reduit d'autant
     pour garder le meme rapport de poids et le meme rythme d'ouvertures. */
  .saku-fabrication__trait {
    height: 21px;
    background-size: 273px 21px;
  }

  .saku-fabrication__trait--bas {
    background-position: -90px 0;
  }

  .saku-fabrication::after {
    inset: auto 0 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saku-marquee__track,
  .saku-petale,
  .saku-medite,
  .saku-medite__corps,
  .saku-liquid::before,
  .saku-mascotte,
  .saku-mascotte__flotte,
  .saku-hero__kaze {
    animation: none !important;
  }

  .saku-compagnon img {
    transition: none;
    transform: none;
  }

  [data-saku-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   17. Univers de marque — citation, valeurs, kanji
   Ces trois blocs viennent de la charte : la phrase de marque, les six
   valeurs avec leurs icones, et le kanji 咲く (fleurir) avec sa lecture.
   -------------------------------------------------------------------------- */

.saku-citation {
  background: var(--saku-sakura);
  text-align: center;
}

.saku-citation blockquote {
  max-width: 88rem;
  margin: 0 auto;
  font-family: var(--font-titre);
  font-size: clamp(2.8rem, 4.4vw, 5.6rem);
  font-style: italic;
  line-height: 1.16;
}

.saku-citation p {
  max-width: 56rem;
  margin: 2.4rem auto 0;
  color: rgba(28, 27, 26, 0.72);
  font-size: 1.6rem;
  line-height: 1.7;
}

.saku-valeurs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 3rem);
  margin-top: clamp(3rem, 5vw, 5rem);
}

.saku-valeur {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
}

.saku-valeur svg {
  width: 4.4rem;
  height: 4.4rem;
  stroke: var(--saku-the);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saku-valeur span {
  font-size: 1.25rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: rgba(28, 27, 26, 0.78);
}

/* Le kanji est la piece centrale : il porte la lecture juste dessous, comme
   sur la planche de marque. */
.saku-kanji {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  text-align: center;
}

.saku-kanji__signe {
  font-family: var(--font-kanji);
  font-size: clamp(5.6rem, 10vw, 12rem);
  line-height: 1;
  color: var(--saku-the);
}

.saku-kanji__lecture {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin: 0;
  color: var(--saku-bois);
  font-size: 1.25rem;
  letter-spacing: 0.22rem;
  text-transform: uppercase;
}

/* Signature de marque : le mot-symbole, puis la baseline en capitales
   espacees, exactement comme sur la charte. */
.saku-logo__mot {
  display: grid;
  gap: 0.2rem;
  line-height: 1;
}

.saku-logo__mot b {
  font-family: var(--font-titre);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.34rem;
}

.saku-logo__mot small {
  font-size: 0.82rem;
  letter-spacing: 0.24rem;
  color: var(--saku-grege);
}

@media screen and (max-width: 989px) {
  .saku-valeurs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 2.8rem;
  }
}

@media screen and (max-width: 560px) {
  .saku-valeurs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   18. Motifs de la charte — montagne et trio de feuilles
   -------------------------------------------------------------------------- */

/* Le Fuji veille derriere le texte de la section origine, comme sur le
   visuel de hero de la planche de marque. */
.saku-liquid__montagne {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: min(90vw, 70rem);
  height: auto;
  transform: translateX(-50%);
  opacity: 0.85;
  pointer-events: none;
}

.saku-marque-feuilles {
  display: block;
  width: clamp(14rem, 20vw, 20rem);
  height: auto;
  margin: clamp(2.4rem, 4vw, 3.6rem) auto 0;
}