/* 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)); }

/* Sur mobile la carte reste compacte à ~52% de la colonne, alignée à gauche
   (comme les barils avant). */
.fab__item--barils  { grid-area: barils; width: 52%; justify-self: start; }
.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; }
/* Épaissi : à petite échelle (mobile), les flèches d'injection étaient à peine
   visibles. 16 donne un trait de ~6px en mobile, bien lisible. */
.a-thin  { fill: none; stroke: var(--alert); stroke-width: 16; }
.a-head  { fill: var(--alert); }

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

/* Coudes de flux desktop (carte→chaîne, chaîne→boîte) : affinés — à 26 ils
   écrasaient la scène. Le calque .elbows n'existe qu'en desktop (display:none
   ailleurs), donc cette réduction n'affecte que la vue large. */
.elbows .a-thick { stroke-width: 18; }

/* Carte des cocktails, à la place du tas de barils : c'est ce qu'on verse dans
   la chaîne. HTML/CSS plutôt qu'image : la photo source était en 123px de large,
   illisible même agrandie. Texte natif = net à toute taille et éditable. */
.fab__item--carte {
  container-type: inline-size;
  padding: 4% 5%;
  background: #F3EAD1;
  border: 1.5px solid #8D7F5A;
  border-radius: 5px;
  box-shadow: 0 10px 22px -10px rgba(42, 35, 32, 0.4);
}

.carte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4cqw;
  color: #2A1F14;
  text-align: center;
}

.carte h3 {
  margin: 0 0 0.15em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9cqw;
  line-height: 1.05;
  color: #2A1F14;
}

.carte p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 6.5cqw;
  line-height: 1.15;
  font-style: italic;
}

/* Sur une carte large (mobile), les cqw deviennent énormes : on plafonne pour
   garder un texte de taille raisonnable et éviter que le bloc déborde. */
/* Mobile uniquement : réduit la carte pour tenir dans la cascade. En desktop, on
   ne veut pas ce plafonnement — la carte a plus de place et le texte doit se lire. */
@media (max-width: 899px) {
  .carte h3 { font-size: 0.75rem; }
  .carte p  { font-size: 0.6rem; }
  .carte    { gap: 0.2rem; }
  .fab__item--carte { padding: 0.4rem 0.55rem; }
}

/* Desktop : la carte se dimensionne en cqw pour scaler AVEC la scène (comme la
   machine et ses additifs). En rem fixes, sur un viewport court la carte devenait
   plus haute que la machine et recouvrait le label « Protoxyde d'azote » posé en
   dessous ; en cqw, carte + machine + azote bougent d'un bloc à toute taille. */
@media (min-width: 900px) {
  .carte h3 { font-size: 6.9cqw; }
  .carte p  { font-size: 5.5cqw; }
  .carte    { gap: 2.8cqw; }
}

/* 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); }
/* Fiole desktop. La flèche étant son enfant, c'est la SEULE valeur à régler :
   la fiole se place, la flèche suit. Position calée par la mesure : la pointe
   touche le dôme du plutonium à 0px près. */
.inj--plutonium  { left: 74%;  top: -105%;  /* transform assigné plus bas */ }
/* Position d'origine, à gauche de la chaîne au niveau de la fumée rose. */
.inj--azote      { left: -14%;   top: 62%;   transform: rotate(-13deg); width: 15%;
                   white-space: normal; line-height: 1.15; }

/* Le Plutonium n'est plus un mot rouge mais une fiole d'apothicaire versée dans
   la chaîne. Le halo blanc du texte ne s'applique pas au SVG. */
.inj--plutonium {
  padding: 0;
  background: none;
  text-shadow: none;
  white-space: normal;
  transform: rotate(-24deg);
  transform-origin: center;
  width: 32cqw;   /* la fiole doit se lire, pas être un point */
  /* container ici : le label « Plutonium » se dimensionne en fonction de la fiole
     et non de la machine, sinon il déborde du flacon sur écran étroit. */
  container-type: inline-size;
  z-index: 4;
}

/* La flèche, enfant de la fiole : ancrée sous elle, contre-pivotée pour rester
   verticale malgré l'inclinaison du flacon. Sa longueur est en cqw de la fiole,
   donc tout le groupe fiole+flèche se déplace et se redimensionne d'un bloc. */
.fiole__fleche {
  position: absolute;
  /* Sous la fiole : top 100% place le haut du SVG au bas du flacon, le trait
     démarre donc en dessous sans mordre la photo. */
  top: 100%;
  left: 50%;
  /* Petite flèche : ~14cqw de large. transform-origin en haut pour qu'elle pende
     sous la fiole. La contre-rotation +24° annule l'inclinaison du flacon,
     la flèche reste verticale. */
  width: 14cqw;
  height: auto;
  transform: translateX(-50%) rotate(24deg);
  transform-origin: top center;
  pointer-events: none;
}

/* Le trait est une courbe : il doit être tracé (stroke) et non rempli, sinon
   la courbe se referme en une forme pleine. */
.fiole__trait {
  fill: none;
  stroke: var(--alert);
  stroke-width: 7;
  stroke-linecap: round;
}

.fiole__pointe { fill: var(--alert); }

.fiole {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

/* Étiquette « Plutonium » posée sur le CORPS (le liquide brun) de la fiole, pas
   sur le goulot : le flacon est couché bouchon en haut-gauche, le liquide occupe
   la partie droite/basse — d'où left:58% top:54%. Contre-rotation pour rester
   droite malgré l'inclinaison du flacon. */
.fiole__nom {
  position: absolute;
  top: 54%;
  left: 58%;
  transform: translate(-50%, -50%) rotate(24deg);
  font-family: var(--font-body);
  font-weight: 700;
  /* cqw = % de la LARGEUR DE LA FIOLE (grâce au container ci-dessus), donc le texte
     reste proportionné au flacon quel que soit l'écran. 11 pour tenir sur le corps. */
  font-size: 11cqw;
  color: #F5E9C8;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  white-space: nowrap;
}


/* 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; }
  /* Fiole mobile : descendue vers le dernier dôme (top −50 au lieu de −63.8) pour
     qu'elle se rattache à la chaîne au lieu de flotter au-dessus. La pl-arrow, en
     coordonnées machine, reste dessous et verse dans le dôme. */
  .inj--plutonium  { left: auto; right: -15.9%; top: -50%; width: 32cqw; }

  .inj--limoncello { left: 56%; }
}

/* Cascade « tablette » : viewport < 900 (donc pas la scène desktop) MAIS chaîne
   large (> 420px, donc hors container query téléphone). Sans cet override, la
   fiole retombait sur sa position de base (left:74% top:-105%) et flottait tout
   en haut, décrochée de la chaîne. On lui redonne EXACTEMENT la place qu'en
   cascade téléphone (mêmes valeurs → aucun saut à la transition).
   Téléphone (chaîne ≤420) et desktop (≥900) ne sont pas ciblés. */
@media (max-width: 899px) {
  @container (min-width: 421px) {
    .inj--plutonium { left: auto; right: -15.9%; top: -50%; width: 32cqw; }
  }
}

/* ---------- 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; }
  /* Carte devant les flèches (z-index 4) : le trait 1→2 démarre dans la carte
     (invisible car masqué) et ne devient visible qu'à sa sortie, comme sur la
     maquette. Élargie pour que le titre le plus long tienne sur une ligne. */
  .fab__item--barils  { left: 0%;    top: 3%;    width: 27%;  z-index: 4; }
  /* Machine décalée à 30% pour laisser la carte respirer à sa gauche.
     Les points d'injection restent en cqw de la machine, ils suivent tout seuls. */
  .fab__item--machine { left: 30%;   top: 31.6%; width: 57.6%; z-index: 1; }
  .fab__item--boite   { left: 82.5%; top: 74.4%; width: 14.8%; max-width: none; }
  .fab__item--machine img { filter: none; }

  /* Fiole desktop : décalée à droite (left:90%) pour amener son BOUCHON (à gauche du
     flacon) juste au-dessus de la pl-arrow (x≈772/93% de la machine) — le flacon
     semble alors se déverser par le goulot dans la flèche puis le dernier dôme.
     top:-46% pose la fiole légèrement plus bas, tout contre le départ de la flèche.
     (Tout est en repère machine, donc l'alignement tient à toute taille d'écran.) */
  .inj--plutonium { left: 90%; top: -46%; width: 28cqw; }

  /* « Protoxyde d'azote » posé au ras de la fumée rose du bas-gauche de la chaîne,
     comme en cascade (mobile) : la carte désormais en cqw est plus courte et libère
     cette zone, le label s'y glisse sans flèche. Le halo blanc le garde lisible
     par-dessus les traits fins du schéma. Override desktop uniquement. */
  .inj--azote { left: -12%; top: 60%; width: 22%; transform: rotate(-13deg); }

  .vidange { font-size: 1.5cqw; }

  /* Écarté du coude d'entrée, qui le traverse à cette échelle */
  /* Position identique à la base : plus besoin d'override desktop. */

  .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; }

  /* Chaque étape est accrochée à son élément (comme en cascade mobile) :
     1 au coin haut-droit de la CARTE, 2 juste au-dessus de la MACHINE, 3 au ras
     de la BOÎTE. Avant, les trois flottaient au centre sans lien visuel. */
  .step--1 { left: 28%; top: 5%;  width: 56%; }
  /* Posé juste au-dessus de la chaîne mais AU-DESSUS de la bande des additifs
     (Glyphosate/Limoncello, ~26%) : plus bas, le titre les percutait.
     Recentré (left:40%) au-dessus du corps de la machine. */
  .step--2 { left: 40%; top: 20%; width: 46%; }
  /* Décalé à droite (left:70%) pour venir au ras de la boîte. */
  .step--3 { left: 70%; top: 84%; width: 26%; }
}

/* Très grand écran : la scène est plafonnée par la hauteur (62dvh), il reste donc
   de la marge à gauche. On décale la carte dans cette marge (left:-5%) et on
   grossit sa police — sans l'élargir (la version élargie débordait/tassait). Le
   décalage l'écarte de la machine ET la sort de l'aplomb de « Protoxyde d'azote »
   (bord droit carte < bord gauche azote, mesuré), donc pas de recouvrement. */
@media (min-width: 1500px) {
  .fab__item--barils { left: -5%; }
  .carte h3 { font-size: 8.5cqw; }
  .carte p  { font-size: 6.8cqw; }
  .carte    { gap: 3cqw; }
  /* La carte ayant glissé à gauche, on rapproche l'étape 1 pour qu'elle reste
     collée à son coin haut-droit (l'écart réapparaissait sinon). */
  .step--1 { left: 23%; }
}


/* ---------- 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; }

/* ---------- Retour en haut de page ---------- */
/* Petite flèche ronde, posée en ABSOLU à gauche de la dernière slide : hors flux,
   elle ne rajoute pas de bloc/hauteur et laisse le panneau centré. */
#tire-bouchons { position: relative; }

.totop {
  position: absolute;
  left: clamp(0.9rem, 2.5vw, 2.25rem);
  bottom: clamp(1.5rem, 7vh, 3.5rem);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--bordeaux);
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: 50%;
  box-shadow: 0 6px 16px -10px rgba(42, 35, 32, 0.5);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.totop:hover,
.totop:focus-visible {
  background: var(--bordeaux);
  color: var(--cream);
}

.totop__arrow { width: 1.2rem; height: 1.2rem; }

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