/* ============================================================
   style.css — Savonnerie de la Lune · « Éditorial Magazine »
   Layout paginé asymétrique (pivot margeSG ↔ margeDX, max 1120px).
   Zéro hex ici : tout vient de tokens.css (lint L3).
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--olive-primary); outline-offset: 3px; }

/* ── Typo générale ────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-hero);
  line-height: 1.12;
  margin: 0 0 var(--sp-4);
}
h2, h3 { font-family: var(--font-body); line-height: 1.2; }
h2 { font-size: var(--step-4); font-weight: 700; margin: 0 0 var(--sp-5); }
h3 { font-size: var(--step-2); font-weight: 600; margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); max-width: 38rem; }
.muted { color: var(--muted); }
.etiquette {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cendre-secondary);
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.prix {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--olive-primary);
  font-variant-numeric: tabular-nums;
}

/* Surlignage éditorial — micro-interaction (hover 3) */
.hl {
  color: var(--olive-primary);
  border-bottom: 2px solid var(--miel-warm);
  transition: color var(--dur-hover) var(--ease-overshoot),
              border-color var(--dur-hover) var(--ease-overshoot);
}
.hl:hover { color: var(--argile-detail); border-color: var(--argile-detail); }

/* ── Typographie cinétique 2 calques (mécanique signature) ──
   .k-base : encre, visible d'emblée. .k-tint : teinte matière,
   dévoilée mot par mot via clip-path 400ms ease-out au scroll. */
.kinetic { position: relative; max-width: 24ch; }
.kinetic .k-base { color: var(--fg); }
.kinetic .k-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.kinetic .k-word {
  display: inline-block;
  clip-path: inset(-10% 100% -20% 0);
  transition: clip-path var(--dur-unfold) var(--ease-out);
}
.kinetic.is-in .k-word { clip-path: inset(-10% -2% -20% 0); }
.tint-olive .k-tint    { color: var(--olive-primary); }
.tint-argile .k-tint   { color: var(--argile-detail); }
.tint-lavandin .k-tint { color: var(--lavandin-accent); }

/* ── Reveals hétérogènes ──────────────────────────────────── */
[data-reveal] {
  transition: opacity var(--dur-slide) var(--ease-overshoot),
              transform var(--dur-slide) var(--ease-overshoot);
}
[data-reveal="slide-l"] { opacity: 0; transform: translateX(calc(-1 * var(--sp-6) - 12px)) rotate(-0.5deg); }
[data-reveal="slide-r"] { opacity: 0; transform: translateX(calc(var(--sp-6) + 12px)) rotate(0.5deg); }
[data-reveal="rise"]    { opacity: 0; transform: translateY(var(--sp-5)); transition-duration: var(--dur-unfold); transition-timing-function: var(--ease-out); }
[data-reveal].is-in     { opacity: 1; transform: none; }

/* ── Header ───────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--marge) var(--sp-3) var(--marge);
  border-bottom: 1px solid var(--ivoire-pur);
}
.topbar .marque {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--fg);
  text-decoration: none;
  margin-right: auto;
}
.topbar nav { display: flex; gap: var(--sp-4); }
.topbar nav a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--cendre-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-hover) var(--ease-overshoot),
              border-color var(--dur-hover) var(--ease-overshoot);
}
.topbar nav a:hover,
.topbar nav a:focus-visible { color: var(--olive-primary); border-bottom-color: var(--miel-warm); }

/* ── Sections magazine : pivot asymétrique (JAMAIS centré) ── */
.sec { max-width: var(--container); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.sec--sg { margin-left: var(--marge); margin-right: auto; padding-right: var(--gutter); }
.sec--dx { margin-right: var(--marge); margin-left: auto; padding-left: var(--gutter); }

/* Rythme qui VARIE sans blancs morts (itération juge 1 : les min-height
   en vh + paddings s'additionnaient — le contenu donne la hauteur). */
.hero        { min-height: 70vh; padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.atelier     { padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
.ingredients { padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
.savons      { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.confiance   { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

/* ── Hero : bandeau éditorial, image en marge droite (bleed) ── */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--gutter); align-items: start; }
.hero-txt { padding-top: var(--sp-5); }
.hero h1 { position: relative; }
.hero .baseline-svg { display: block; width: min(28rem, 90%); height: 14px; color: var(--cendre-secondary); margin: var(--sp-2) 0 var(--sp-4); }
.hero-fig { margin: 0; position: relative; align-self: stretch; }
.hero-fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-right: calc(-1 * var(--gutter));
}
.hero-fig figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--cendre-secondary);
  margin-top: var(--sp-2);
}
.hero-preuve {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--cendre-secondary);
  margin-top: var(--sp-4);
}

/* ── CTA asymétriques (jamais margin:0 auto, jamais côte à côte) ── */
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.cta-stack > :nth-child(2) { margin-left: var(--sp-6); }
.cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  transition: transform var(--dur-hover) var(--ease-overshoot),
              background-color var(--dur-hover) var(--ease-overshoot),
              box-shadow var(--dur-hover) var(--ease-overshoot);
}
.cta--olive { background: var(--olive-primary); color: var(--ivoire-bg); }
.cta--olive:hover,
.cta--olive:focus-visible { transform: scale(1.05) rotate(1deg); background: var(--argile-detail); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.cta--lavandin { background: transparent; color: var(--fg); border: 2px solid var(--lavandin-accent); }
.cta--lavandin:hover,
.cta--lavandin:focus-visible { transform: scale(1.05) rotate(-1deg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }

/* ── Atelier : contenu 65% + marge grise 35% ─────────────── */
.atelier { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: calc(var(--gutter) * 2); }
.atelier .marge-notes { border-left: 1px solid var(--argile-detail); padding-left: var(--gutter); align-self: end; }
.atelier blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--olive-primary);
  margin: 0 0 var(--sp-4);
}
.compteur-avis { font-family: var(--font-mono); color: var(--fg); }
.compteur-avis .grand {
  display: block;
  font-size: var(--step-4);
  font-weight: 700;
  color: var(--olive-primary);
  font-variant-numeric: tabular-nums;
}

/* ── Ingrédients : micro-articles en composition libre ────── */
.micro-articles { columns: 3 16rem; column-gap: var(--gutter); }
.micro {
  break-inside: avoid;
  margin-bottom: var(--gutter);
  background: var(--surface);
  padding: var(--sp-3);
  border-top: 3px solid var(--argile-detail);
}
.micro:nth-child(2) { margin-top: var(--sp-6); border-top-color: var(--lavandin-accent); }
.micro:nth-child(3) { margin-top: var(--sp-4); border-top-color: var(--miel-warm); }
.micro img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: var(--sp-2);
  transition: transform var(--dur-hover) var(--ease-overshoot),
              box-shadow var(--dur-hover) var(--ease-overshoot);
}
.micro img:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }
.micro .fig-label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--cendre-secondary); margin-bottom: var(--sp-1); }

/* ── Savons : cartes éditoriales glissant des marges ──────── */
.liste-savons { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.produit {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  row-gap: 0;
  align-items: start;
  background: var(--surface);
  padding: var(--sp-3);
  border-left: 3px solid var(--olive-primary);
  max-width: 46rem;
  transition: transform var(--dur-hover) var(--ease-overshoot),
              box-shadow var(--dur-hover) var(--ease-overshoot);
}
.produit:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); }
.produit:nth-child(even) { margin-left: var(--sp-6); border-left-color: var(--lavandin-accent); }
.produit p { margin-bottom: 0; }
/* placement EXPLICITE (gotcha grid : jamais d'auto-placement au-delà de la rangée 1) */
.produit .swatch { grid-column: 1; grid-row: 1 / span 3; }
.produit .num    { grid-column: 2; grid-row: 1; font-family: var(--font-mono); font-size: var(--step--1); color: var(--cendre-secondary); margin: 0; }
.produit h3      { grid-column: 2; grid-row: 2; margin-bottom: var(--sp-1); }
.produit .desc   { grid-column: 2; grid-row: 3; }
.produit .prix   { grid-column: 3; grid-row: 1 / span 3; align-self: center; }

/* Pastilles savon — identité matière en CSS pur (itération juge 1) */
.swatch {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 1.1rem / 1.4rem;
  position: relative;
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.10);
}
.swatch::before { /* grain de coupe artisanale */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(0, 0, 0, 0.05) 7px 8px);
}
.swatch::after { /* estampille de l'atelier */
  content: "";
  position: absolute;
  inset: 0.45rem;
  border-radius: inherit;
  border: 1px dashed var(--ivoire-bg);
  opacity: 0.65;
}
.produit:nth-child(odd)  .swatch { transform: rotate(-2deg); }
.produit:nth-child(even) .swatch { transform: rotate(2deg); }
/* bicolores à coupe franche — les teintes des ingrédients réels */
.swatch--pleine-lune { background: linear-gradient(120deg, var(--olive-primary) 0 55%, var(--lavandin-accent) 55%); }
.swatch--maree-basse { background: linear-gradient(120deg, var(--argile-detail) 0 60%, var(--cendre-secondary) 60%); }
.swatch--nuit-ete    { background: linear-gradient(120deg, var(--miel-warm) 0 55%, var(--ivoire-pur) 55%); border: 1px solid var(--miel-warm); }
.swatch--coffret     { background: linear-gradient(90deg, var(--olive-primary) 0 25%, var(--lavandin-accent) 25% 50%, var(--argile-detail) 50% 75%, var(--miel-warm) 75%); }
.swatch--abo {
  background: var(--ivoire-pur);
  border: 2px dashed var(--miel-warm);
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(0, 0, 0, 0.045) 10px 14px);
}

/* ── Confiance (bande courte) ─────────────────────────────── */
.confiance { border-top: 1px solid var(--argile-detail); border-bottom: 1px solid var(--argile-detail); }
.confiance ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.confiance li { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg); max-width: 16rem; }
.confiance li strong { display: block; font-size: var(--step-2); color: var(--olive-primary); font-variant-numeric: tabular-nums; }

/* ── Footer ───────────────────────────────────────────────── */
footer {
  padding: var(--sp-6) var(--marge) var(--sp-5);
  color: var(--cendre-secondary);
  font-weight: 300;
}
footer .filet-svg { display: block; width: 100%; height: 10px; color: var(--argile-detail); margin-bottom: var(--sp-4); }
footer p { font-size: var(--step--1); }
footer a {
  color: var(--olive-primary);
  text-decoration-color: var(--miel-warm);
  text-underline-offset: 3px;
  transition: color var(--dur-hover) var(--ease-overshoot),
              text-decoration-color var(--dur-hover) var(--ease-overshoot);
}
footer a:hover,
footer a:focus-visible { color: var(--argile-detail); text-decoration-color: var(--argile-detail); }
footer .mono { font-family: var(--font-mono); }

/* ── Mobile-first adaptations (390 / 768 / 1440) ──────────── */
@media (max-width: 48rem) {
  .hero { grid-template-columns: 1fr; min-height: 85vh; }
  .hero-fig img { margin-right: 0; }
  .atelier { grid-template-columns: 1fr; }
  .atelier .marge-notes { border-left: none; border-top: 1px solid var(--argile-detail); padding-left: 0; padding-top: var(--sp-4); }
  .micro-articles { columns: 1; }
  .micro:nth-child(2), .micro:nth-child(3) { margin-top: 0; }
  .produit { grid-template-columns: 4.75rem minmax(0, 1fr) auto; }
  .produit .num { display: none; }
  .produit h3 { grid-row: 1; }
  .produit .desc { grid-row: 2 / span 2; }
  .produit .prix { grid-row: 1; align-self: start; }
  .produit:nth-child(even) { margin-left: var(--sp-3); }
  .topbar { flex-wrap: wrap; }
  .topbar nav { width: 100%; }
}