/* ============================================================
   ROKAS — Bilingual showcase site
   Design tokens: noir + gold + terracotta, minimal / luxe editorial
   ============================================================ */

:root {
  --noir: #100d0b;
  --noir-2: #17130f;
  --noir-3: #141009;
  --cream: #f3ece0;
  --gold: #c99a5b;
  --terracotta: #c1663f;
  --on-cream: #100d0b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--noir);
}

body {
  font-family: 'Jost', sans-serif;
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--cream); }

::selection { background: var(--terracotta); color: var(--noir); }

@keyframes rk-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Pas d'animation permanente sur `main` : elle est posée par le routeur au
   moment de l'échange (voir TRANSITIONS DE PAGE, en bas). Un fondu ici en
   plus de celui de `body` donnait un flottement mou. `rk-fade` reste utilisé
   par le panier. */

img { max-width: 100%; }

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px clamp(20px, 5vw, 64px);
  background: rgba(16, 13, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 154, 91, 0.16);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: var(--cream);
}
.nav__brand:hover { color: var(--cream); }

.brand-mark { flex: none; }

.wordmark {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 48px);
  flex-wrap: wrap;
}

.nav__link {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s;
  padding-bottom: 2px;
  color: rgba(243, 236, 224, 0.55);
  border-bottom: 1px solid transparent;
}
.nav__link:hover { color: var(--cream); }
.nav__link--active {
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
}

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding-left: 12px;
  border-left: 1px solid rgba(201, 154, 91, 0.24);
}
.lang__sep { opacity: 0.35; }
.lang__link { color: rgba(243, 236, 224, 0.5); font-weight: 400; transition: color 0.25s; }
.lang__link:hover { color: var(--cream); }
.lang__link--active { color: var(--gold); font-weight: 500; }

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  font-weight: 500;
  background: var(--gold);
  color: var(--on-cream);
  padding: 15px 30px;
  border: 1px solid var(--gold);
}
.btn--primary:hover { color: var(--on-cream); background: #d6a968; }

.btn--ghost {
  font-weight: 400;
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(201, 154, 91, 0.5);
  padding: 14px 29px;
}
.btn--ghost:hover { color: var(--on-cream); background: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------
   HERO B — editorial split
   ------------------------------------------------------------ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: 130px clamp(20px, 5vw, 64px) 90px;
}
/* Packshot détouré : pas de plaque ni de cadre, le sachet flotte sur la page. */
.hero__media {
  position: relative;
  aspect-ratio: 687 / 768;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Le packshot source fait 687 px de large. Au-dela de ~460 px d'affichage
   il est etire sur les ecrans 2x et perd en nettete : on plafonne la
   largeur plutot que de laisser l'image remplir la colonne. */
.hero__media img {
  width: auto;
  height: auto;
  max-width: min(100%, 460px);
  max-height: 100%;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero .eyebrow {
  font-family: 'Marcellus', serif;
  font-size: 14px;
  letter-spacing: 0.32em;
}
.hero__title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(50px, 7.5vw, 98px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 22px 0 0;
}
.hero__sub {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.75;
  max-width: 480px;
  margin: 28px 0 0;
  color: rgba(243, 236, 224, 0.74);
  text-wrap: pretty;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.hero__tagline {
  font-family: 'Marcellus', serif;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(201, 154, 91, 0.7);
  margin-top: 52px;
}

/* ------------------------------------------------------------
   SECTIONS (home)
   ------------------------------------------------------------ */
.section-divider { border-top: 1px solid rgba(201, 154, 91, 0.14); }

.brand-intro {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(70px, 10vw, 140px) clamp(20px, 5vw, 64px);
  text-align: center;
}
.display-h2 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.08;
  margin: 24px 0 0;
}
.brand-intro__body {
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.75;
  max-width: 660px;
  margin: 30px auto 0;
  color: rgba(243, 236, 224, 0.72);
  text-wrap: pretty;
}

/* Product teaser (whole block clickable) */
.teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  cursor: pointer;
  color: var(--cream);
}
.teaser:hover { color: var(--cream); }
.teaser__media {
  position: relative;
  min-height: clamp(300px, 34vw, 460px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(24px, 3.5vw, 56px);
}
/* Taille pilotée par max-width/max-height, pas par width/height: 100%.
   Le conteneur n'ayant qu'un min-height, une hauteur en % retomberait sur
   `auto` et l'image s'afficherait à sa taille intrinsèque (822 px de haut). */
.teaser__media img {
  width: auto;
  height: auto;
  max-width: min(70%, 340px);
  max-height: clamp(220px, 26vw, 360px);
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  transition: transform 0.6s ease;
}
.teaser:hover .teaser__media img { transform: scale(1.03); }
.teaser__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 90px) clamp(24px, 5vw, 72px);
}
.teaser__name {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.05;
  margin: 20px 0 0;
}
.italic-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  color: rgba(243, 236, 224, 0.78);
  margin: 14px 0 0;
}
.teaser .italic-desc { font-size: clamp(20px, 2.4vw, 28px); }

.badge-row { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.badge-price {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  border: 1px solid rgba(201, 154, 91, 0.4);
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--gold);
}
.badge-label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.55);
}

.link-cta {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 38px;
  border-bottom: 1px solid rgba(201, 154, 91, 0.4);
  padding-bottom: 4px;
  width: fit-content;
}

.moments-teaser {
  padding: clamp(70px, 10vw, 140px) clamp(20px, 5vw, 64px);
  text-align: center;
}
.moments-teaser .display-h2 { margin: 22px 0 34px; }

/* ------------------------------------------------------------
   PRODUCT view
   ------------------------------------------------------------ */
.product { padding-top: 96px; }
.product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  padding-left: clamp(20px, 5vw, 64px);
}
.product__media {
  position: sticky;
  top: 96px;
  align-self: start;
  height: calc(100vh - 96px);
  min-height: clamp(420px, 60vw, 760px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product__media img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: clamp(24px, 4vw, 64px);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}
.product__body { padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 72px); }
.product__title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(46px, 6vw, 86px);
  line-height: 1.02;
  margin: 18px 0 0;
}
.product .italic-desc { font-size: clamp(21px, 2.6vw, 30px); color: rgba(243, 236, 224, 0.8); }
.product__long {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(243, 236, 224, 0.72);
  margin: 28px 0 0;
  max-width: 520px;
  text-wrap: pretty;
}
.product .badge-row { gap: 18px; margin: 34px 0 0; }

.info-block { margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(201, 154, 91, 0.18); }
.info-block--first { margin-top: 52px; }
.info-label {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.ingredients {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(243, 236, 224, 0.82);
  margin: 14px 0 0;
}
.allergens {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(243, 236, 224, 0.5);
  margin: 12px 0 0;
}

.nut { margin-top: 18px; }
.nut__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dotted rgba(201, 154, 91, 0.24);
}
.nut__label { font-weight: 300; font-size: 15px; color: rgba(243, 236, 224, 0.78); }
.nut__value { font-weight: 400; font-size: 15px; color: var(--cream); white-space: nowrap; }

.storage {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(243, 236, 224, 0.5);
  margin: 32px 0 0;
}
.tagline-small {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(201, 154, 91, 0.75);
  margin-top: 40px;
}

/* ------------------------------------------------------------
   MOMENTS / points of sale view
   ------------------------------------------------------------ */
.moments {
  padding: clamp(130px, 14vw, 190px) clamp(20px, 5vw, 64px) clamp(70px, 9vw, 120px);
}
.moments__header { max-width: 760px; margin: 0 auto; text-align: center; }
.moments__title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(46px, 7vw, 92px);
  line-height: 1.02;
  margin: 22px 0 0;
}
.moments__intro {
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.75;
  color: rgba(243, 236, 224, 0.72);
  margin: 26px auto 0;
  max-width: 560px;
  text-wrap: pretty;
}
.moments__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  max-width: 1160px;
  margin: clamp(48px, 6vw, 80px) auto 0;
}
.card {
  border: 2px solid rgba(201, 154, 91, 0.5);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  background: var(--noir-3);
}
/* Carte seule : sans plafond, auto-fit lui donne les 1160px de la grille.
   Le puits 4/3 ferait alors 810px de haut et vitrine-locale.png (580x747)
   serait agrandi au-delà de sa taille source. */
.card:only-child {
  max-width: 560px;
  margin-inline: auto;
}
.card__well {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--noir-2);
  background-image: repeating-linear-gradient(135deg, rgba(201, 154, 91, 0.06) 0 2px, transparent 2px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 10px;
}
.card__plate {
  position: absolute;
  inset: 0;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
}
.card__plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__placeholder {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 154, 91, 0.65);
}
.card__num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--gold); }
.card__title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  margin: 8px 0 0;
}
.card__desc {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(243, 236, 224, 0.68);
  margin: 14px 0 0;
  text-wrap: pretty;
}
/* Lien sortant d'une carte point de vente (« Visiter → »). */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 154, 91, 0.4);
  padding-bottom: 3px;
  width: fit-content;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.card__link:hover { color: var(--cream); border-color: var(--cream); }
.card__link span { transition: transform 0.25s ease; }
.card__link:hover span { transform: translateX(3px); }

.moments__foot { text-align: center; margin-top: clamp(56px, 7vw, 90px); }

/* ------------------------------------------------------------
   SHOP — product page purchase block
   ------------------------------------------------------------ */
.shop {
  margin: 36px 0 8px;
  padding: 28px 0 4px;
  border-top: 1px solid rgba(201, 154, 91, 0.18);
}
/* Hiérarchie inversée par rapport à la première version : la composition en
   tête et en gros, le total en dessous et étiqueté. Le montant reste bien le
   total réellement dû — le prix au sachet n'est pas payable et ne peut pas
   prendre sa place —, mais « 48,00 € » posé seul en corps 40 se lisait
   « cher » au premier regard, avant que l'œil n'atteigne la ligne de 12 px
   qui explique qu'il y a douze sachets à 4,00 € dedans. L'information qui
   justifie le prix doit arriver avant le prix, pas après. */
.shop__pricing { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.shop__compo {
  font-family: 'Marcellus', serif;
  font-size: clamp(24px, 2.9vw, 32px);
  color: var(--cream);
  line-height: 1.15;
}
.shop__meta {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.62);
}
.shop__total { display: flex; align-items: baseline; gap: 11px; margin-top: 5px; }
.shop__total-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.5);
}
.shop__price {
  font-family: 'Marcellus', serif;
  font-size: 22px;
  color: rgba(243, 236, 224, 0.92);
  line-height: 1;
}
.shop__controls { display: flex; align-items: stretch; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.shop__note {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(243, 236, 224, 0.55);
  margin-top: 14px;
  margin-bottom: 0;
}
.shop__note--shipping { margin-top: 6px; }

/* ---- Boutique fermée : « bientôt disponible » ----
   Le bloc garde la place et la hiérarchie du bloc d'achat — même prix au
   même endroit, même bouton au même endroit — pour que l'ouverture de la
   boutique ne déplace rien. Seul le badge s'ajoute au-dessus.

   Le badge est en terracotta et non en or : l'or est la couleur des boutons
   d'action ici, et un badge doré au-dessus d'un bouton doré se lit comme
   deux appels à l'action concurrents. */
.shop--soon .shop__badge {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  border: 1px solid rgba(193, 102, 63, 0.45);
  border-radius: 999px;
  padding: 7px 15px;
  margin-bottom: 20px;
}
/* Le prix reste lisible mais cesse d'être le point d'entrée : ce n'est plus
   un montant qu'on peut payer aujourd'hui. */
.shop--soon .shop__compo { color: rgba(243, 236, 224, 0.9); }
.shop--soon .shop__price { color: rgba(243, 236, 224, 0.78); }
/* Pas de règle pour un bouton ici : l'état fermé n'en a plus aucun. La marge
   basse du bloc suffit à le séparer des ingrédients. */
.shop--soon .shop__note { max-width: 46ch; margin-top: 18px; }
.shop--soon { padding-bottom: 10px; }

/* Tunnel fermé : même gabarit que les états de paiement, pour ne pas
   inventer une mise en page qui ne servira qu'une fois. */
.checkout__state { padding: 8px 0 24px; }
.checkout__state p {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: rgba(243, 236, 224, 0.72);
  max-width: 52ch;
  margin: 0;
}
.checkout__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(201, 154, 91, 0.5);
  border-radius: 999px;
  overflow: hidden;
}
.qty__btn {
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  color: var(--gold);
  border: 0;
  cursor: pointer;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.qty__btn:hover { background: rgba(201, 154, 91, 0.14); color: var(--cream); }
.qty__input {
  /* 3 chiffres : les quantités vont de 12 à 240 */
  width: 58px;
  height: 46px;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  -moz-appearance: textfield;
}
.qty__input:focus { outline: none; }
.shop__add { padding-left: 34px; padding-right: 34px; }
.shop__add.is-added { background: #8fae6a; border-color: #8fae6a; }

.qty--sm { border-color: rgba(201, 154, 91, 0.4); }
.qty--sm .qty__btn { width: 32px; height: 32px; font-size: 16px; }
.qty--sm .qty__val {
  min-width: 38px;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: var(--cream);
}

/* ------------------------------------------------------------
   CART — nav button + slide-in drawer
   ------------------------------------------------------------ */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  padding: 4px;
  transition: color 0.25s;
}
.cart-btn:hover { color: var(--cream); }
.cart-btn__count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--noir);
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 17px;
  text-align: center;
}

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 6, 5, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cart-overlay.is-open { opacity: 1; }

.cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;
  width: min(420px, 92vw);
  height: 100%;
  background: var(--noir-2);
  border-left: 1px solid rgba(201, 154, 91, 0.24);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45);
}
.cart.is-open { transform: none; }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 32px);
  border-bottom: 1px solid rgba(201, 154, 91, 0.16);
}
.cart__title {
  font-family: 'Marcellus', serif;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.cart__close {
  background: transparent;
  border: 0;
  color: rgba(243, 236, 224, 0.7);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}
.cart__close:hover { color: var(--cream); }

.cart__body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 32px);
}
.cart-empty {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: rgba(243, 236, 224, 0.6);
  text-align: center;
  margin-top: 40px;
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px dotted rgba(201, 154, 91, 0.2);
}
.cart-item__media {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--noir);
  border: 1px solid rgba(201, 154, 91, 0.24);
}
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.cart-item__name { font-family: 'Marcellus', serif; font-size: 18px; }
.cart-item__meta {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: rgba(243, 236, 224, 0.55);
  margin-top: 2px;
}
.cart-item__row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cart-item__remove {
  background: transparent;
  border: 0;
  color: rgba(243, 236, 224, 0.5);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
}
.cart-item__remove:hover { color: var(--terracotta); }
.cart-item__total {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: var(--cream);
  white-space: nowrap;
}

.cart__foot {
  padding: 22px clamp(20px, 4vw, 32px) clamp(24px, 4vw, 32px);
  border-top: 1px solid rgba(201, 154, 91, 0.16);
}
.cart__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Jost', sans-serif;
  gap: 16px;
  margin-bottom: 10px;
}
.cart__line span:first-child {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(243, 236, 224, 0.6);
}
.cart__line span:last-child {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: rgba(243, 236, 224, 0.85);
  white-space: nowrap;
}
/* Ligne Total : c'est le montant réellement dû, il domine le récapitulatif. */
.cart__line--total {
  margin-top: 14px;
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 154, 91, 0.16);
}
.cart__line--total span:first-child { color: rgba(243, 236, 224, 0.75); }
.cart__line--total span:last-child { font-size: 22px; color: var(--cream); }
.cart__hint {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gold);
  margin: 0 0 4px;
}
.cart__checkout { width: 100%; text-align: center; }

/* ------------------------------------------------------------
   TUNNEL DE COMMANDE
   ------------------------------------------------------------ */
.checkout { padding: 130px clamp(20px, 5vw, 64px) clamp(60px, 8vw, 110px); max-width: 1180px; margin: 0 auto; }
.checkout__header { margin-bottom: clamp(32px, 4vw, 52px); }
.checkout__title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  margin: 10px 0 0;
}
.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.fieldset { border: 0; padding: 0; margin: 0 0 clamp(24px, 3vw, 36px); }
.fieldset__legend {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0;
  margin-bottom: 16px;
}
/* Les champs se répartissent sur une grille de 3 : code postal étroit,
   ville large, tout le reste pleine largeur. */
.fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
.fieldset__legend { grid-column: 1 / -1; }
.field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.field--third { grid-column: span 1; }
.field--two-thirds { grid-column: span 2; }
.field__label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: rgba(243, 236, 224, 0.7);
}
.field__opt { color: rgba(243, 236, 224, 0.35); font-size: 12px; }
.field__input {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 154, 91, 0.3);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field__input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
}
.field__error {
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  color: #e0866b;
}
.checkout__error {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: #e0866b;
  margin: 0 0 16px;
}
.checkout__pay { width: 100%; text-align: center; }
.checkout__pay:disabled { opacity: 0.6; cursor: default; }
.checkout__secure {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(243, 236, 224, 0.5);
  margin: 14px 0 0;
}
.checkout__summary {
  position: sticky;
  top: 96px;
  border: 1px solid rgba(201, 154, 91, 0.24);
  border-radius: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--noir-2);
}
.checkout__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  color: rgba(243, 236, 224, 0.8);
  margin-top: 14px;
}
.checkout__row--total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 154, 91, 0.18);
  font-weight: 400;
  font-size: 20px;
  color: var(--cream);
}
.checkout__panel { max-width: 620px; padding: clamp(24px, 4vw, 48px) 0; }
.checkout__panel-title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  margin: 0 0 14px;
}
.checkout__panel-body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(243, 236, 224, 0.7);
  margin: 0 0 26px;
}

.cart-confirm { text-align: center; padding: 40px 4px; }
.cart-confirm__title { font-family: 'Marcellus', serif; font-size: 26px; margin-bottom: 16px; }
.cart-confirm__body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(243, 236, 224, 0.72);
  margin-bottom: 28px;
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer {
  border-top: 1px solid rgba(201, 154, 91, 0.16);
  padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer .wordmark { font-size: 18px; letter-spacing: 0.4em; padding-left: 0.4em; }
.footer__meta {
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(243, 236, 224, 0.55);
  text-align: right;
  line-height: 1.9;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: flex-end;
  margin-top: 10px;
}
.footer__legal a { color: rgba(243, 236, 224, 0.55); }
.footer__legal a:hover { color: var(--gold); }

/* ------------------------------------------------------------
   PAGES LÉGALES
   Colonne de lecture étroite : ces textes sont longs et se lisent en
   ligne. La largeur est plafonnée en `ch` pour rester lisible quelle
   que soit la taille de police du lecteur.
   ------------------------------------------------------------ */
.legal {
  padding: clamp(120px, 13vw, 170px) clamp(20px, 5vw, 64px) clamp(70px, 9vw, 110px);
  max-width: 78ch;
  margin: 0 auto;
}
.legal__title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  margin: 0;
}
.legal__intro {
  font-weight: 300;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: rgba(243, 236, 224, 0.72);
  margin: 20px 0 0;
  text-wrap: pretty;
}
.legal__updated {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 22px 0 0;
}
/* Bandeau d'alerte tant que les mentions obligatoires sont à trous.
   Volontairement impossible à confondre avec du contenu. */
.legal__banner {
  border: 1px solid var(--terracotta);
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(193, 102, 63, 0.12);
  padding: 16px 20px;
  margin: 34px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream);
}
.legal__doc { margin-top: clamp(38px, 5vw, 58px); }
.legal__section + .legal__section {
  margin-top: 42px;
  padding-top: 42px;
  border-top: 1px solid rgba(201, 154, 91, 0.14);
}
.legal__h2 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.3;
  margin: 0 0 16px;
}
.legal__p, .legal__ul {
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(243, 236, 224, 0.8);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.legal__ul { padding-left: 22px; }
.legal__ul li { margin-bottom: 8px; }
.legal__ul li::marker { color: var(--gold); }
.legal__dl { margin: 0 0 18px; }
.legal__dl-row {
  display: grid;
  grid-template-columns: minmax(160px, 34%) 1fr;
  gap: 4px 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201, 154, 91, 0.12);
  font-size: 15px;
  line-height: 1.7;
}
.legal__dl-row dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 3px;
}
.legal__dl-row dd { margin: 0; font-weight: 300; color: rgba(243, 236, 224, 0.86); }
/* Formulaire de rétractation : sa mise en forme fait partie du sens
   (lignes à compléter). Il déborde donc horizontalement plutôt que de
   se replier n'importe comment. */
.legal__pre {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.9;
  color: rgba(243, 236, 224, 0.8);
  background: var(--noir-2);
  border: 1px solid rgba(201, 154, 91, 0.18);
  border-radius: 10px;
  padding: 20px;
  margin: 6px 0 0;
  overflow-x: auto;
  white-space: pre;
}
.legal__todo {
  color: var(--terracotta);
  background: rgba(193, 102, 63, 0.14);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 400;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   ACCEPTATION DES CONDITIONS (tunnel de commande)
   ------------------------------------------------------------ */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  margin: 30px 0 4px;
}
/* Cible de clic d'au moins 20px : une case native de 13px est
   difficile à atteindre au doigt. */
.consent__box {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--gold);
  flex: none;
  cursor: pointer;
}
.consent__label {
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(243, 236, 224, 0.8);
  cursor: pointer;
}
.consent .field__error { grid-column: 2; }
/* Erreur de consentement : la case elle-même doit se signaler, sinon
   le message flotte sans cible visible. */
.consent.is-invalid .consent__box { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* ------------------------------------------------------------
   RESPONSIVE — stack columns below ~820px
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 120px;
    gap: 40px;
  }
  .hero__media { aspect-ratio: 687 / 768; max-height: 60vh; }
  .teaser { grid-template-columns: 1fr; }
  .teaser__media { min-height: clamp(280px, 70vw, 420px); }
  .product__grid { grid-template-columns: 1fr; padding-left: 0; }
  .product__media {
    position: static;
    height: auto;
    min-height: clamp(320px, 80vw, 520px);
  }
  .footer { justify-content: center; text-align: center; }
  .footer__meta { text-align: center; }
  /* Le récapitulatif passe au-dessus du formulaire : sur mobile, voir
     ce qu'on paie avant de saisir dix champs. */
  .checkout__grid { grid-template-columns: 1fr; }
  .checkout__summary { position: static; order: -1; }
}

@media (max-width: 520px) {
  .nav { gap: 12px; }
  .nav__links { gap: 16px; width: 100%; justify-content: flex-start; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; text-align: center; }
  /* Code postal et ville côte à côte deviennent illisibles sous 520px. */
  .fieldset { grid-template-columns: 1fr; }
  .field--third, .field--two-thirds { grid-column: 1 / -1; }
  /* Deux colonnes pour « Numéro d'entreprise (BCE) » ne tiennent plus :
     l'étiquette se casse en trois lignes contre une valeur courte. */
  .legal__dl-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------
   TRANSITIONS DE PAGE
   Le site reste pré-rendu et multi-pages : chaque URL existe en HTML sur le
   disque, et une arrivée directe est un vrai chargement. Mais la navigation
   interne ne recharge plus rien — app.js va chercher la page en `fetch` et
   remplace `<main>`. Deux chemins, donc deux animations :

     body → arrivée directe, la page entière monte ;
     main → navigation interne, seul le contenu bouge.

   Sans JavaScript, seul le premier chemin existe et tout fonctionne.
   ------------------------------------------------------------ */
/* Chorégraphie : la `default-transition` du Codrops « Page Transitions in
   Astro with Barba.js & GSAP », celle de sa page d'accueil, et non une de
   ses démonstrations à effet — la page quittée s'efface vers le haut, la
   page entrante monte du bas. 260 ms pour partir, 460 ms pour arriver.

   DEUX RÈGLES, chacune payée par une version livrée puis refaite :

   1. `transform` et `opacity`, jamais autre chose. Les deux premières
      versions découpaient la fenêtre avec `clip-path` (`polygon()` puis
      `shape()`). Mesuré au protocole DevTools pendant une vraie navigation,
      en 1728 × 1080 à 2× : médiane de 16,7 ms, mais deux gels de 117 ms,
      sept images perdues chacun, quand le décodage du packshot ou l'arrivée
      des polices tombait pendant la transition. `clip-path` animé n'est pas
      composé par le GPU : Chrome repeint toute la fenêtre à chaque image,
      ici 3456 × 2160 pixels soixante fois par seconde. Après réécriture en
      `transform` seul : zéro image perdue. Pas de `clip-path`, pas de
      `shape()`, pas de `filter`, pas de `background` animé.

   2. Pas de `@view-transition`. La troisième version l'utilisait et était
      juste ici — `pagereveal` portait bien un `viewTransition`, un vrai clic
      souris déclenchait bien l'animation, vérifié au protocole. Invisible
      chez le client malgré tout, cause non reproduite. Une API que le
      navigateur peut sauter en silence, sans erreur, ne convient pas pour la
      seule animation que le visiteur voit à chaque page.

   La quatrième version animait `body` puis rechargeait vraiment la page :
   correcte, mais avec un temps mort au milieu — le document est détruit, le
   CSS refait, tout repart de zéro. D'où le routeur : le `fetch` part avec
   l'animation de sortie, et seul `<main>` est remplacé. Le mouvement est
   continu, la nav ne clignote plus, le tiroir du panier survit. */
/* JAMAIS SUR `body`. Une version l'a fait, et la nav `position: fixed` s'est
   mise à défiler avec la page : Chrome traite un élément porteur d'une
   animation de `transform` comme bloc conteneur de ses descendants fixes, y
   compris après la fin de l'animation quand `fill` la retient. Mesuré, le
   lien « Accueil » se retrouvait à y = −576 après 600 px de défilement — la
   nav était devenue inatteignable, donc le site inutilisable, sans qu'aucune
   erreur ne soit levée. C'est `<main>` qui bouge, dans les deux cas.

   `animation-fill-mode: backwards` et non `both` pour la même raison : à la
   fin, l'état est celui du style de base, il n'y a rien à retenir — et une
   animation qui ne retient rien ne laisse pas de bloc conteneur derrière
   elle. Vérifié après correction : la nav reste à y = 34.

   Cette règle vaut pour les deux chemins. Sur une arrivée directe, `<main>`
   est nouveau donc l'animation joue. Sur une navigation interne, le routeur
   remplace `<main>` par un élément neuf : l'animation joue aussi, sans que
   personne n'ait à poser de classe. La nav et le pied de page, eux, ne
   bougent plus jamais.

   Le nom `rk-main-out` est lu par app.js, qui attend `animationend` avec ce
   nom précis : `animationend` remonte depuis les descendants, et les
   révélations au scroll en émettent aussi. Renommer ici sans renommer
   là-bas casse la navigation en silence. */
@keyframes rk-main-out {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-3vh); opacity: 0; }
}

@keyframes rk-main-in {
  from { transform: translateY(6vh); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* L'arrivée décélère longuement (`expo.out`), ce qui la fait paraître posée
   plutôt que jetée ; le départ accélère — c'est une page qu'on quitte. Le
   départ doit gagner sur l'arrivée, d'où le sélecteur plus spécifique. */
main { animation: rk-main-in 460ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.rk-leaving main { animation: rk-main-out 260ms cubic-bezier(0.5, 0, 0.75, 0) both; }

/* Pendant la sortie, plus rien n'est cliquable : deux clics en 260 ms
   lanceraient deux navigations. Le tiroir du panier, lui, est hors de
   `<main>` et reste utilisable dès l'arrivée. */
html.rk-leaving { pointer-events: none; }

/* Aucun élément n'est nommé, volontairement. Un packshot partagé qui
   voyage par-dessus la découpe se dessinerait hors du masque et casserait
   l'illusion du rideau : la démo n'a pas d'élément partagé non plus. Toute
   la page appartient donc au groupe `root`. */

/* ------------------------------------------------------------
   RÉVÉLATIONS AU SCROLL — CSS natif, aucune dépendance
   `animation-timeline: view()` : chaque bloc s'anime selon sa propre
   entrée dans le champ. Le décalage entre éléments vient du défilement,
   pas d'un `delay` à maintenir.

   Tout est sous @supports : un navigateur qui ignore la propriété
   affiche le contenu normalement. Une révélation ne doit jamais pouvoir
   laisser du texte invisible.

   `animation-duration: auto` est indispensable — la forme courte
   `animation:` remettrait la durée à 0s et rien ne bougerait.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes rk-rise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }

    .brand-intro,
    .teaser,
    .moments-teaser,
    .card,
    .info-block,
    .legal__section {
      animation-name: rk-rise;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 6% entry 62%;
    }

    /* Les valeurs nutritionnelles se révèlent ligne à ligne. */
    .nut__row {
      animation-name: rk-rise;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 10% entry 85%;
    }

    /* Le packshot produit est en position: sticky — il ne « rentre »
       jamais dans le champ, donc view() ne lui conviendrait pas. Il suit
       le scroll du document : une rotation de quelques degrés pendant
       qu'on lit la fiche, assez lente pour ne pas se remarquer.

       `scroll(root)` et non `scroll()` : `body` porte `overflow-x: hidden`,
       ce qui en fait un conteneur de défilement. `scroll()` prend le plus
       proche, tombe donc sur ce body qui ne défile pas, la timeline est
       inactive — et une animation sans timeline active ne s'applique pas
       du tout : le transform restait à `none`. `root` désigne
       explicitement le document. Mesuré, pas supposé. */
    .product__media { perspective: 1400px; }
    .product__media img {
      animation-name: rk-turn;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
    }
    @keyframes rk-turn {
      from { transform: rotateY(-7deg); }
      to   { transform: rotateY(7deg); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .teaser__media img { transition: none; }

  /* La transition de page reste, réduite à un fondu court sans
     déplacement : c'est un changement d'état, pas un mouvement.

     Elle n'est pas supprimée, et c'est volontaire : app.js attend
     `animationend` sur `body` avant de naviguer. Sans animation du tout,
     seul le filet de sécurité (le `setTimeout`) ferait partir la page —
     elle partirait quand même, mais avec 380 ms d'attente pour rien. Un
     fondu de 100 ms garde l'événement et supprime le mouvement. */
  @keyframes rk-main-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rk-main-out { from { opacity: 1; } to { opacity: 0; } }
  main { animation-duration: 140ms; animation-timing-function: linear; }
  html.rk-leaving main { animation-duration: 100ms; animation-timing-function: linear; }
}