/* Don Ritón — page unique, un bloc par écran. Palette relevée sur les visuels du deck source. */
:root {
  --cream: #EDEAE0;
  --cream-deep: #DFDBCE;
  --sage: #A9B3A8;
  --sage-band: #B6BEB5;   /* la bande verte du packaging, éclaircie à hauteur de page */
  --bordeaux: #4A282B;
  --teal: #75AAAA;
  --ink: #2A2320;
  --alert: #D8232A;
  --green: #2E9E4F;

  /* Le deck utilisait Calibri (police bureautique) : un garamond sert mieux
     l'huile d'olive de terroir, un grotesque humaniste assure la lisibilité. */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Largeur relevée sur l'image de fond du PPT : une paire crème+vert occupe
     9,22% de la largeur de la diapo, soit 4,61% par bande. En vw, la proportion
     de la marque est donc conservée à toute taille. Bornée pour rester crédible
     sur très petit et très grand écran. */
  --stripe: clamp(16px, 4.61vw, 72px);
  --measure: 62ch;
  --wrap: 1120px;
  --bar-h: 50px;
}

@media (min-width: 700px) {
  :root { --bar-h: 60px; }
}

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

html {
  /* proximity par défaut : sur écran court ou en paysage, un bloc peut dépasser
     la vue et l'accrochage forcé empêcherait d'en lire le bas */
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  /* PAS de scroll-padding-top : chaque bloc réserve déjà la hauteur du bandeau
     dans son propre padding. En ajouter ici la compterait deux fois et
     repousserait chaque bloc de 50px sous le bas de l'écran. */
  scroll-padding-top: 0;
}

@media (min-height: 640px) {
  html { scroll-snap-type: y mandatory; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  /* Rayures relevées sur la boîte : bandes de largeur égale (mesuré 25px de crème
     pour 24px de vert, soit un ratio de 1.04 — j'appliquais 1.62), et le vert
     dérivé de la crème selon le rapport exact de la photo (0.77 / 0.81 / 0.81). */
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    90deg,
    var(--cream) 0 var(--stripe),
    var(--sage-band) var(--stripe) calc(var(--stripe) * 2)
  );
}

img { max-width: 100%; height: auto; display: block; }

/* min-width:0 — sans lui, cet élément de grille refuse de descendre sous la
   largeur de son contenu (min-width:auto par défaut) et un enfant large, comme
   la scène de fabrication, élargirait la page au lieu de défiler dans son cadre. */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; min-width: 0; }
@media (min-width: 700px) { .wrap { padding: 0 1.5rem; } }

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

.skip { position: absolute; left: -9999px; background: var(--bordeaux); color: #fff; padding: 0.75rem 1rem; z-index: 20; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Un bloc = un écran ---------- */
.view {
  min-height: 100vh;   /* repli sans unités dynamiques */
  min-height: 100dvh;  /* iOS : suit la barre d'URL */
  display: grid;
  align-content: center;
  /* center plutôt que start : on arrive au milieu du bloc. always empêche
     d'enjamber un bloc d'un seul geste — chaque défilement en cale un. */
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* border-box : la réserve pour la barre est incluse dans les 100dvh */
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top) + 0.75rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

/* ---------- Bandeau ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  background: var(--bordeaux);
  border-bottom: 3px solid var(--teal);
  padding-top: env(safe-area-inset-top);
}

.topbar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  min-height: var(--bar-h);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;   /* la marque est seule : elle se place au centre */
  gap: 1rem;
}

.topbar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}

/* ---------- Marque : l'olive et le nœud papillon ---------- */
/* L'olive tient la place du « o » : sa hauteur est calée sur celle d'un o,
   et le fruit repose sur la ligne de base, la feuille dépassant au-dessus. */
.brand__olive {
  height: 0.72em;
  width: auto;
  display: inline-block;
  vertical-align: -0.055em;
  margin: 0 0.03em;
}

.brand__fruit { fill: #93A45C; }
.brand__shine { fill: #C9D49E; opacity: 0.5; }
.brand__leaf  { fill: #5E7F3C; }
.brand__stem  { stroke: #46612C; stroke-width: 3.5; fill: none; stroke-linecap: round; }


@media (min-width: 700px) {
  .topbar__inner { padding: 0 1.5rem; }
  .topbar__brand { font-size: 1.5rem; letter-spacing: 0.08em; }
}

/* ---------- Cartes ---------- */
.panel {
  --panel-pad: clamp(1.1rem, 3.5vw, 2.75rem);
  background: rgba(253, 252, 248, 0.97);
  border: 1px solid var(--cream-deep);
  border-radius: 4px;
  padding: var(--panel-pad);
  box-shadow: 0 18px 44px -28px rgba(42, 35, 32, 0.5);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4.5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--bordeaux);
  margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--teal);
  overflow-wrap: break-word;
}

/* ---------- Accueil ---------- */
/* Le bloc entier était centré, ce qui plaçait le logo au-dessus du milieu.
   Des espaceurs déséquilibrés (1.8 / 1) le ramènent vers le centre optique et
   repoussent le sommaire vers le bas. */
.hero { text-align: center; align-content: stretch; }

.hero .wrap {
  display: grid;
  grid-template-rows: 1.8fr auto auto 1fr;
  justify-items: center;
  align-items: center;
}

.hero__logo { grid-row: 2; }
.hero nav    { grid-row: 3; }

/* Chaque ligne du lettrage sur sa plaque crème rectangulaire, comme sur l'étiquette.
   Les rayures du fond reprennent au-delà des plaques. */
.hero__logo {
  display: grid;
  justify-items: center;
  width: min(760px, 90%);
  margin: 0 auto clamp(2rem, 6vh, 3.5rem);
  filter: drop-shadow(0 12px 26px rgba(42, 35, 32, 0.3));
}

/* Le padding en % se rapporte à la largeur du bloc, donc les deux plaques ont la
   même marge et restent proportionnelles à toute taille d'écran. */
.hero__logo-line {
  background: var(--cream);
  padding: 3.4%;
  width: 100%;
  height: auto;
}

/* « DON » est plus court que « RITÓN » (708 contre 1018 dans l'image) : à largeur
   égale ses lettres seraient plus hautes et les deux plaques n'en feraient qu'une.
   71% est la largeur qui égalise la hauteur des lettres, padding compris. */
.hero__logo-line--don { width: 71%; }

/* Centré à toutes les tailles : aligné à gauche, le sommaire décrochait du logo */
.hero__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 1.75rem);
}

/* Le tiret est porté par le li, pas par le lien : ainsi le lien reste du texte pur
   et son soulignement suit les lignes. En bordure du lien, le trait courait sur
   toute la largeur de la boîte dès que le libellé passait à la ligne. */
.hero__menu li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.hero__menu li::before {
  content: "—";
  color: var(--teal);
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 2.1rem);
}

.hero__menu a {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 2.1rem);
  font-weight: 600;
  color: var(--bordeaux);
  text-decoration: underline;
  text-decoration-color: rgba(74, 40, 43, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.hero__menu a:hover,
.hero__menu a:focus-visible { color: var(--teal); text-decoration-color: var(--teal); }

/* ---------- Histoire ---------- */
.prose { font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.7; }
/* text-wrap: pretty — évite les lignes finales orphelines et les coupures ingrates */
.prose p { margin: 0 0 clamp(1.25rem, 3vh, 2rem); max-width: var(--measure); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--bordeaux); font-weight: 700; }
.prose a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--teal); }

/* La chute du paragraphe : elle doit trancher avec le texte courant, sinon on la
   lit comme une ligne parmi d'autres. */
.prose .pull {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  color: var(--bordeaux);
  text-align: center;
  text-wrap: balance;
  max-width: none;
  margin: clamp(1.5rem, 4vh, 3rem) 0;
  padding: clamp(1rem, 3vh, 2rem);
  border-top: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
}

/* ---------- Fabrication ----------
   Deux dispositions, un seul balisage :
   - par défaut (portrait) : la cascade — barils, chaîne, boîte se déplient
     verticalement en grand, reliés par des flèches vers le bas ;
   - au-delà de 900px : la scène de la diapo, chaque élément aux coordonnées
     d'origine.
   Les additifs et leurs flèches vivent dans le repère de la MACHINE, pas de la
   diapo : ils la suivent donc dans les deux cas, sans second jeu de coordonnées. */
/* Portrait : les légendes se rangent SUR LE CÔTÉ des figures. Empilées dessous,
   elles s'intercalaient entre les étapes et les flèches ne reliaient plus rien. */
.fab {
  display: grid;
  /* colonne 2 dimensionnée par la boîte : tout le reste va au texte, pour que
     « Process breveté de fabrication » tienne sur une seule ligne */
  grid-template-columns: 1fr auto;
  /* La légende 1 passe au-dessus des barils : à côté, elle leur mangeait la
     moitié de la largeur alors que la place manque surtout à l'horizontale. */
  grid-template-areas:
    "cap1    cap1"
    "barils  barils"
    "arr1    ."
    "machine machine"
    "cap2    arr2"
    "cap3    boite";
  align-items: center;
  column-gap: 0.6rem;
  row-gap: clamp(0.15rem, 0.6vh, 0.4rem);
}

.elbows { display: none; }            /* coudes réservés à la scène */

.fab__item { margin: 0; position: relative; }
.fab__item img { width: 100%; height: auto; filter: drop-shadow(0 10px 22px rgba(42, 35, 32, 0.28)); }

.fab__item--barils  { grid-area: barils; width: 100%; }
.fab__item--machine { grid-area: machine; width: 84%; justify-self: center; }  /* marge pour les additifs qui débordent */
/* 6rem et pas plus : la colonne 2 est calée sur la boîte, et les pixels qu'on lui
   laisse manquent au texte de la colonne 1, qui doit tenir sur une ligne. */
.fab__item--boite   { grid-area: boite; width: 6rem; justify-self: end; }
.fab__item--boite img {
  border-radius: 3px;
  box-shadow: 0 14px 30px -16px rgba(42, 35, 32, 0.75);
}

/* Flèches de cascade (portrait). Elles portent le sens du flux, donc elles se
   calent sur les extrémités de la chaîne : entrée en haut à gauche, sortie en
   bas à droite. Centrées, elles ne désignaient rien. */
.down {
  width: clamp(16px, 4vw, 26px);
  height: auto;
  flex: none;
}

/* Calées sur les extrémités de la chaîne : l'entrée est à gauche, la sortie à droite.
   Les marges négatives font mordre la flèche dans les deux figures — les découpes
   ont du vide transparent (4% sous les barils, 6% au-dessus du dôme) qui creusait
   un écart et donnait une flèche flottant entre les deux sans rien toucher.
   Le décalage horizontal vise le centre du dôme d'entrée, à 9,3% de la chaîne. */
.down--1 {
  grid-area: arr1;
  justify-self: start;
  margin-left: calc(25.5% - 10px);
  margin-top: -13px;
  margin-bottom: -15px;
}

/* La sortie du convoyeur s'arrête à 84% de la hauteur de la chaîne : les 16%
   de vide transparent restants détachaient la flèche. On les rattrape. */
.down--2 {
  grid-area: arr2;
  justify-self: end;
  margin-right: calc(22% + 10px);
  margin-top: -24px;
  margin-bottom: -6px;
}

.step--1 { grid-area: cap1; }
.step--2 { grid-area: cap2; }
.step--3 { grid-area: cap3; justify-self: end; text-align: right; }

/* La chaîne de production est le repère des additifs : ils se dimensionnent
   en cqw de la machine, donc ils la suivent à toute taille. */
.fab__item--machine { container-type: inline-size; }

.inj-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;   /* azote et plutonium visent depuis l'extérieur du cadre */
  z-index: 3;
}

.a-thick { fill: none; stroke: var(--alert); stroke-width: 26; stroke-linecap: butt; }
.a-thin  { fill: none; stroke: var(--alert); stroke-width: 11; }
.a-head  { fill: var(--alert); }

.down .a-thick { stroke-width: 14; }

/* Texte de la diapo écrit à même le baril bleu, centré sur lui et pivoté.
   Sur deux lignes comme sur la diapo : d'un seul tenant il mesure près du double
   de la hauteur du baril et le déborde largement. */
.vidange {
  position: absolute;
  /* centre de la TÊTE du baril — le disque circulaire, pas le corps.
     Repéré visuellement : la détection par couleur mordait sur le flanc du fût. */
  left: 88.6%;
  top: 75.7%;
  width: 4em;
  transform: translate(-50%, -50%) rotate(74deg);
  color: #F2F4F3;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.6rem, 1.9vw, 0.95rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

/* Additifs : mots rouges posés sur la chaîne, comme sur la diapo (pas des
   pastilles). Le halo blanc les décolle des traits du schéma.
   display:contents efface la liste mais pas les puces de ses items :
   list-style doit donc être neutralisé sur l'item lui-même. */
.inj { display: contents; }

.inj__item {
  position: absolute;
  list-style: none;
  color: var(--alert);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 3.6cqw;
  white-space: nowrap;
  text-shadow:
     0 0 4px #FDFCF8, 0 0 4px #FDFCF8,
     1px 1px 0 #FDFCF8, -1px -1px 0 #FDFCF8;
  z-index: 4;
}

/* Positions relevées sur la diapo, converties dans le repère de la machine.
   Les mots sont posés en retrait du schéma, au départ de leur trait : au contact,
   on ne distinguait plus le mot du composant qu'il désigne. */
.inj--glyphosate { left: 27%;    top: -15%;  transform: rotate(-9deg); }
.inj--limoncello { left: 63%;    top: -13%;  transform: rotate(-9deg); }
.inj--plutonium  { left: 105%;   top: 1%;    transform: rotate(-9deg); }
.inj--azote      { left: -21%;   top: 15%;   transform: rotate(-13deg); width: 15%;
                   white-space: normal; line-height: 1.15; }

.p-narrow { display: none; }   /* la flèche par le haut est réservée aux écrans étroits */

/* Chaîne étroite : tout est en cqw, les mots rétréciraient avec elle jusqu'à
   l'illisible. On rehausse leur part relative. */
@container (max-width: 420px) {
  .inj__item { font-size: 4.6cqw; }
  /* Sur la diapo, Plutonium vise la chaîne depuis l'extérieur droit ; à cette
     largeur ça sortirait de l'écran. Il passe donc par le haut, comme ses voisins. */
  .p-wide   { display: none; }
  .p-narrow { display: block; }
  .inj--plutonium  { left: auto; right: -4%; top: -15%; }
  .inj--limoncello { left: 56%; }
}

/* ---------- Légendes d'étape ---------- */
.step {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--bordeaux);
  text-align: left;
}

.step em {
  display: block;
  font-weight: 500;
  font-size: 0.85em;
  color: #5C534E;
}

.step__num {
  flex: none;
  align-self: flex-start;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
}

/* ---------- La scène de la diapo, au-delà de 900px ---------- */
@media (min-width: 900px) {
  .fab {
    display: block;
    position: relative;
    width: 100%;
    max-width: calc(62dvh * 1068 / 743);
    aspect-ratio: 1068 / 743;
    margin: 0 auto;
    container-type: inline-size;
  }

  .down { display: none; }            /* la cascade cède la place aux coudes */

  .elbows {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 3;
  }

  /* les zones de grille ne valent que pour la cascade : ici tout est placé en absolu */
  .fab__item { position: absolute; width: auto; justify-self: auto; }
  .fab__item--barils  { left: 1.9%;  top: 3.8%;  width: 35.6%; }
  .fab__item--machine { left: 18.4%; top: 31.6%; width: 57.6%; z-index: 1; }
  .fab__item--boite   { left: 70.9%; top: 74.4%; width: 14.8%; max-width: none; }
  .fab__item--machine img { filter: none; }

  .vidange { font-size: 1.5cqw; }

  /* Écarté du coude d'entrée, qui le traverse à cette échelle */
  .inj--azote { left: -25%; top: 24%; }

  .step {
    position: absolute;
    margin: 0;
    font-size: 2.5cqw;
    gap: 0.5em;
    z-index: 4;
    justify-self: auto;
    text-align: left;
  }
  .step__num { width: 2.3cqw; height: 2.3cqw; font-size: 1.4cqw; }
  .step em { font-size: 0.82em; }

  .step--1 { left: 39%; top: 3.5%;  width: 56%; }
  /* remontée : les mots des additifs, éloignés de la chaîne, occupent maintenant
     la bande juste au-dessus d'elle */
  .step--2 { left: 49%; top: 17.5%; width: 46%; }
  .step--3 { left: 56%; top: 79.5%; width: 26%; }
}


/* ---------- Tire-bouchons ---------- */
.range { display: grid; gap: clamp(1rem, 3vh, 3rem); }

@media (min-width: 780px) {
  .range { grid-template-columns: 1fr 1fr; gap: 0; }
  /* Retrait et bordure identiques des deux côtés — la bordure du premier est
     transparente. Sans ça, seule la 2e colonne était rognée, donc plus étroite,
     et les deux produits ne pouvaient pas s'afficher à la même taille. */
  .range__item {
    padding-inline: clamp(1rem, 2vw, 2rem);
    border-left: 3px solid transparent;
  }
  .range__item + .range__item { border-left-color: var(--teal); }
}

.range__shot { display: grid; place-items: center; margin-bottom: 0.85rem; }

/* Deux produits empilés doivent tenir dans une seule vue sur mobile — le texte
   agrandi leur reprend un peu de hauteur */
.range__shot img {
  max-height: 23dvh;
  width: auto;
  filter: drop-shadow(0 18px 30px rgba(42, 35, 32, 0.3));
}

/* En colonnes, les deux produits n'ont pas le même format : le limonadier est en
   portrait, le couteau en paysage. À hauteur max égale, le couteau butait sur la
   largeur de sa colonne et restait bien plus court. On donne donc à la boîte le
   ratio du couteau : il la remplit pile, et le limonadier s'aligne sur sa hauteur. */
@media (min-width: 780px) {
  .range__shot {
    position: relative;
    aspect-ratio: 939 / 771;
    max-height: 46dvh;
  }
  /* L'image est sortie du flux : en flux, elle poussait la boîte au lieu d'être
     contrainte par elle, et sa hauteur en % n'avait alors aucune référence. */
  .range__shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;   /* sinon le plafond mobile (25dvh) s'applique encore */
    object-fit: contain;
  }
}

/* Légendes centrées sous chaque produit, comme sur la diapo */
.range__item { text-align: center; }

.range__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--bordeaux);
  margin: 0 0 0.4rem;
  text-wrap: balance;   /* évite « Ritón » seul sur la seconde ligne */
}

/* Ⓡ est un « alphanumérique encerclé », dessiné pleine chasse : à taille égale il
   fait près du double d'une capitale. On le ramène à leur hauteur et on le relève
   au rang de marque. */
.rmark {
  font-size: 0.56em;
  vertical-align: 0.28em;
  line-height: 1;
}

/* Soulignement de la diapo. Porté par un span et non par le titre entier :
   le ® et le point final en restent exclus, comme sur l'original. */
.range__name .u {
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.range__desc {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  text-wrap: pretty;
}

.range__desc em { color: var(--bordeaux); font-style: normal; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}