/*
 * Calendrier Oz 2027, feuille de style de la page publique.
 *
 * Un seul fichier, sans étape de construction. Le nom porte la version : à la
 * retouche suivante, renommer et incrémenter `VuePublique::VERSION_CSS`.
 *
 * Les valeurs viennent du handoff de `docs/design-handoff/`. Deux règles y
 * sont tenues sans exception : le dégradé jaune, orange, rouge n'habille
 * jamais un fond de bloc, et le texte posé sur le rouge est SOMBRE (en blanc,
 * il tomberait à 3,9:1, sous le seuil de 4,5:1 du projet).
 *
 * Plan : 1 jetons et polices, 2 base, 3 formes et décor, 4 boutons et champs,
 * 5 en-tête et hero, 6 sections courantes, 7 la collecte, 8 le formulaire,
 * 9 pourquoi et pied, 10 autres pages, 11 documents légaux, 12 mouvement
 * réduit et impression.
 */

/* ═══════════════════════════════════════════ 1. Jetons et polices */

:root {
  /* Les neuf couleurs du handoff. Les trois premières sont aussi dans
     `Corde::TEINTES` ; un test vérifie qu'elles ne divergent pas. */
  --oz-encre: #1F0E07;
  --oz-jaune: #FFC417;
  --oz-orange: #FF801A;
  --oz-rouge: #FF2659;
  --oz-creme: #FFF6DF;
  --oz-creme-clair: #FFEDBE;
  --oz-peche: #FFDCC0;
  --oz-rose: #FFD3DC;
  --oz-blanc: #FFFFFF;
  /* Le rouge en texte courant, assombri : 5:1 sur blanc, contre 3,7:1. */
  --oz-rouge-texte: #E00035;

  --oz-degrade: linear-gradient(95deg, #FFC417 0%, #FF801A 45%, #FF2659 100%);
  --oz-voile: rgba(31, 14, 7, .22);
  --oz-voile-fort: rgba(31, 14, 7, .35);

  --oz-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --oz-courant: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --oz-technique: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --oz-trait: 2px solid var(--oz-encre);
  --oz-marge: clamp(20px, 5vw, 72px);
  --oz-large: 1180px;
  --oz-rayon: 12px;
  --oz-rayon-bloc: 14px;

  color-scheme: light;
}

/*
 * Les deux familles sont hébergées ici, sous-ensemblées : aucune police
 * servie par un tiers, Google Fonts compris. Tant que les `.woff2` ne sont
 * pas déposés, la page tombe sur Georgia et sur la police système ; les
 * tailles et les rythmes restent justes.
 */
@font-face {
  font-family: 'Fraunces';
  src: url('fraunces-1.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('montserrat-1.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════ 2. Base et utilitaires */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sans cette marge, l'en-tête collant recouvre la cible d'une ancre. */
  scroll-padding-top: 88px;
}

/*
 * Le fond de la page de vente est BLANC : les fonds pastel sont des cartes
 * posées dessus, et une carte crème disparaît sur un fond crème. Les pages
 * que le handoff ne dessine pas, tunnel et documents légaux, gardent le
 * crème : elles n'ont pas de cartes de couleur à faire ressortir.
 */
body {
  margin: 0;
  background: var(--oz-blanc);
  color: var(--oz-encre);
  font-family: var(--oz-courant);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.oz-corps--creme { background: var(--oz-creme); }

img, svg { max-width: 100%; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 3px; }

/* Le focus se voit partout, et de la même façon partout. */
:focus-visible {
  outline: 3px solid var(--oz-encre);
  outline-offset: 3px;
}

.oz-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.oz-visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le lien d'évitement est hors champ, pas caché : il revient au premier
   coup de tabulation. */
.oz-evitement {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 40;
  background: var(--oz-blanc);
  border: var(--oz-trait);
  border-radius: 0 0 10px 10px;
  padding: 10px 18px;
  font-weight: 700;
  text-decoration: none;
  transition: top .12s;
}

.oz-evitement:focus { top: 0; }

.oz-titre1, .oz-titre2, .oz-titre3 {
  margin: 0;
  font-family: var(--oz-titre);
  line-height: 1.05;
  text-wrap: pretty;
}

/* Trois tailles de titre de section, non interchangeables : le handoff
   hiérarchise les sections par le corps de leur titre. Les uniformiser
   aplatit la page. */
.oz-titre1 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.01em;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
}

.oz-titre2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  max-width: 24ch;
  font-variation-settings: 'SOFT' 70, 'WONK' 1, 'opsz' 48;
}

.oz-titre2--moyen { font-size: clamp(26px, 3.4vw, 42px); max-width: 28ch; }
.oz-titre2--petit { font-size: clamp(26px, 3.2vw, 38px); max-width: none; }
.oz-titre2--serre { max-width: 22ch; }

.oz-titre2--fleche {
  display: flex;
  align-items: center;
  gap: 14px;
}

.oz-titre3 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  font-variation-settings: 'SOFT' 70, 'WONK' 1, 'opsz' 34;
}

/* Le dégradé sur un seul mot, jamais sur un bloc. */
.oz-flamboyant {
  background-image: var(--oz-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.oz-surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.oz-surtitre--jaune { color: var(--oz-jaune); }

.oz-texte { margin: 0; font-size: 17px; line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
.oz-texte--fort { font-weight: 600; }
.oz-texte-court { margin: 0; font-size: 14px; line-height: 1.55; max-width: 64ch; }
.oz-mention { margin: 0; font-size: 13px; line-height: 1.6; opacity: .8; max-width: 80ch; }

.oz-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.oz-colonne--large { gap: 18px; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.6; }

.oz-avis {
  margin: 0;
  border: var(--oz-trait);
  border-radius: var(--oz-rayon);
  background: var(--oz-creme-clair);
  padding: 14px 18px;
  font-size: 15px;
}

.oz-tableau { overflow-x: auto; }

/* ═══════════════════════════════════════════ 3. Formes et décor */

.oz-forme, .oz-puce {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--oz-jaune);
}

.oz-puce { width: 11px; height: 11px; background: var(--oz-encre); }
.oz-puce--rouge { background: var(--oz-rouge); }
.oz-puce--jaune { background: var(--oz-jaune); }

.oz-forme--triangle { background: var(--oz-orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.oz-forme--hexagone { background: var(--oz-jaune); clip-path: polygon(50% 0, 100% 33%, 100% 67%, 50% 100%, 0 67%, 0 33%); }
.oz-forme--rond { background: var(--oz-jaune); border-radius: 50%; }
.oz-forme--carre { background: var(--oz-orange); }
.oz-forme--fleche { background: var(--oz-rouge); clip-path: polygon(0 8%, 100% 50%, 0 92%); }
.oz-forme--orange { background: var(--oz-orange); }

.oz-titre2--fleche .oz-forme--fleche { width: 28px; height: 22px; }

/* Les formes en débord, détourées au `clip-path` plutôt qu'en SVG : le même
   dessin, sans un octet de balisage. */
.oz-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.oz-decor--octogone {
  background: var(--oz-couleur, var(--oz-orange));
  clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%);
}

.oz-decor--losange {
  background: var(--oz-couleur, var(--oz-rouge));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.oz-decor--double::before,
.oz-decor--double::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--oz-couleur, var(--oz-orange));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.oz-decor--double::before { left: 0; }
.oz-decor--double::after { right: 0; }

.oz-trait {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 10px;
  border-radius: 5px;
  background-image: var(--oz-degrade);
}

/* ═══════════════════════════════════════════ 4. Boutons et champs */

.oz-bouton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: var(--oz-trait);
  border-radius: 26px 8px 26px 8px;
  background: var(--oz-rouge);
  /* Sombre sur le rouge : en blanc, le contraste tomberait à 3,9:1. */
  color: var(--oz-encre);
  font-family: var(--oz-titre);
  font-size: 20px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 24;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  padding: 18px 34px;
  min-height: 56px;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--oz-encre);
  transition: transform .12s, box-shadow .12s;
}

.oz-bouton:hover {
  text-decoration: none;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--oz-encre);
}

.oz-bouton:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--oz-encre);
}

.oz-bouton:focus-visible { outline-offset: 4px; }

.oz-bouton--petit {
  font-size: 15px;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: 18px 6px 18px 6px;
  box-shadow: 3px 3px 0 var(--oz-encre);
  font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 18;
}

.oz-bouton--petit:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--oz-encre); }
.oz-bouton--petit:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--oz-encre); }

.oz-bouton--sobre {
  background: var(--oz-blanc);
  font-size: 16px;
  padding: 12px 22px;
  min-height: 48px;
  border-radius: 18px 6px 18px 6px;
  box-shadow: 3px 3px 0 var(--oz-encre);
}

/* Le bouton éteint dit lui-même ce qui manque, juste à côté : hachuré, sans
   ombre, sans curseur d'action. */
.oz-bouton:disabled,
.oz-bouton[disabled] {
  border: 2px dashed var(--oz-voile-fort);
  background: var(--oz-blanc);
  color: rgba(31, 14, 7, .6);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.champ { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.champ label { font-size: 14px; font-weight: 700; }
.champ .aide { font-size: 13px; line-height: 1.5; opacity: .85; }

/* Coches et boutons radio exclus : la hauteur de cinquante-deux pixels les
   déformait. Le champ d'un compteur aussi, pour une autre raison : ses coins
   et son filet de droite appartiennent au groupe « moins, champ, euro,
   plus ». Ce sélecteur pèse une classe de plus que le sien, un `:not`
   d'attribut comptant comme une classe, et reprenait donc la main sur des
   bordures que le compteur venait d'enlever. */
.champ input:not([type='checkbox'], [type='radio'], .oz-compteur__champ),
.champ select,
.champ textarea {
  font-family: var(--oz-courant);
  font-size: 16px;
  min-height: 52px;
  padding: 12px 14px;
  border: var(--oz-trait);
  border-radius: var(--oz-rayon);
  background: var(--oz-blanc);
  color: var(--oz-encre);
  max-width: 34rem;
}

.champ--erreur input,
.champ--erreur select { border-color: var(--oz-rouge); border-width: 3px; }

.champ .erreur { font-size: 14px; color: #A3123A; }

.erreurs {
  border: 3px solid var(--oz-rouge);
  border-radius: var(--oz-rayon-bloc);
  background: var(--oz-blanc);
  padding: 18px 22px;
  margin: 0 0 24px;
}

.erreurs h2 { margin: 0 0 8px; font-family: var(--oz-titre); font-size: 20px; }
.erreurs ul { margin: 0; padding-left: 20px; }

/* Le compteur : moins, le champ, plus. Les deux boutons n'existent qu'avec
   un script et arrivent donc masqués ; sans lui, le champ numérique se
   saisit et s'incrémente seul. */
.oz-compteur { display: flex; align-items: stretch; }

.oz-compteur__pas {
  appearance: none;
  flex: none;
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  border: var(--oz-trait);
  background: var(--oz-blanc);
  color: var(--oz-encre);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.oz-compteur__pas[data-pas="-1"] { border-radius: 14px 0 0 14px; }
.oz-compteur__pas[data-pas="1"] { border-radius: 0 14px 14px 0; }
.oz-compteur__pas:hover { background: var(--oz-jaune); }
.oz-compteur__pas:focus-visible { outline-offset: 2px; z-index: 1; }

.oz-compteur__champ {
  flex: 1 1 auto;
  width: 100%;
  min-width: 48px;
  min-height: 52px;
  border: var(--oz-trait);
  border-radius: 14px;
  background: var(--oz-blanc);
  color: var(--oz-encre);
  font-family: var(--oz-titre);
  font-size: 26px;
  font-weight: 900;
  text-align: center;
}

.js .oz-compteur__champ { border-radius: 0; border-left: none; border-right: none; }
.oz-compteur__champ:focus-visible { outline-offset: 2px; z-index: 1; position: relative; }

/* ═══════════════════════════════════════════ 5. En-tête et hero */

.oz-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  background: var(--oz-blanc);
  border-bottom: var(--oz-trait);
  padding: 14px clamp(16px, 4vw, 40px);
}


/* Sous 820 pixels, l'en-tête se replie sur trois lignes : il cesse alors
   d'être collant plutôt que de manger le tiers d'un écran de téléphone. */
@media (max-width: 820px) {
  .oz-entete { position: static; }
  html { scroll-padding-top: 12px; }
}

/* Le menu et le bouton d'action forment un bloc calé à droite, poussé par
   la marge automatique du logo. Répartis par un `space-between`, le bouton
   se détachait du menu. */
.oz-entete__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-inline-end: auto;
}
.oz-logo { display: block; height: auto; }

.oz-entete__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oz-entete__nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-family: var(--oz-titre);
  font-size: 15px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 18;
  text-decoration: none;
}

.oz-entete__nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.oz-hero {
  position: relative;
  overflow: hidden;
  background: var(--oz-jaune);
  padding: 56px var(--oz-marge) 60px;
}

.oz-hero__decor-a { top: -70px; right: -40px; width: 200px; height: 200px; opacity: .5; }
.oz-hero__decor-b { bottom: -50px; left: -30px; width: 140px; height: 140px; opacity: .5; }

.oz-hero__grille {
  position: relative;
  z-index: 1;
  max-width: var(--oz-large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}

.oz-hero__texte { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* Le sur-titre du hero est d'un point plus gros que celui des sections, et
   son carré d'un pixel plus large : c'est le premier mot de la page. */
.oz-hero .oz-surtitre { font-size: 13px; }
.oz-hero .oz-puce { width: 12px; height: 12px; }

.oz-hero__titre { margin: 0; display: flex; flex-direction: column; }

.oz-hero__titre-sur {
  font-family: var(--oz-titre);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 36;
}

.oz-hero__titre-fort {
  font-family: var(--oz-titre);
  font-size: clamp(104px, 17vw, 228px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.03em;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
}

.oz-hero__chapeau {
  margin: 0;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: pretty;
}

.oz-hero__tarif { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.45; max-width: 38ch; }
.oz-hero__livraison { margin: 0; font-size: 14px; line-height: 1.5; opacity: .85; max-width: 44ch; }

.oz-hero__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }

/* Le compteur du hero. Un seul chiffre à la fois, et c'est `Etat` qui
   tranche lequel. L'unité s'aligne sur le HAUT du chiffre : `line-height: 1`
   d'un côté et .86 de l'autre, sans quoi elle flotte au milieu. */
.oz-compte {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  border-top: var(--oz-trait);
  border-bottom: var(--oz-trait);
  padding: 14px 0;
}

.oz-compte__valeur {
  font-family: var(--oz-titre);
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 900;
  line-height: .86;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 96;
}

.oz-compte__dit { display: flex; flex-direction: column; gap: 3px; max-width: 24ch; }

.oz-compte__unite {
  font-family: var(--oz-titre);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 24;
}

.oz-compte__legende { font-size: 14px; font-weight: 600; line-height: 1.35; }

.oz-serigraphie {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  border: var(--oz-trait);
  border-radius: 18px 4px 18px 4px;
  background: var(--oz-blanc);
  padding: 10px 20px;
  min-width: 0;
}

.oz-serigraphie__nombre {
  font-family: var(--oz-titre);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 48;
}

.oz-serigraphie span { font-size: 13px; font-weight: 600; line-height: 1.35; max-width: 16ch; }

.oz-epuise {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--oz-encre);
  color: var(--oz-blanc);
  padding: 18px 22px;
}

.oz-epuise--bloc { border-radius: var(--oz-rayon-bloc); padding: clamp(18px, 2.6vw, 26px); }

.oz-epuise__titre {
  font-family: var(--oz-titre);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 30;
}

.oz-epuise__texte { font-size: 15px; line-height: 1.45; max-width: 46ch; }

/* ── Les vues du calendrier ─────────────────────────────────────────
 * Sans script, une liste : des cadres légendés qui se suivent. Avec, ils
 * se superposent dans la même case de grille. Seule la case change. */

.oz-diapo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Le cadre épouse la hauteur de la colonne de texte, sans ratio fixe. La
   chaîne doit s'étirer du cadre à la figure : le premier maillon qui ne
   s'étire pas arrête tout, et la légende ne tient plus le bas. */
.oz-diapo__cadre { position: relative; min-width: 0; flex: 1 1 auto; }

.oz-diapo__vues {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sans script les vues se suivent ; avec, elles se superposent dans une
   seule case, qui prend toute la place. */
.js .oz-diapo__vues { height: 100%; }

.oz-diapo__vue figure { display: flex; flex-direction: column; gap: 14px; margin: 0; height: 100%; }

.oz-diapo__vue figcaption {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  max-width: 34ch;
  min-height: 42px;
}

.js .oz-diapo__vues > * { grid-area: 1 / 1; }

.js .oz-diapo__vue {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
}

.js .oz-diapo__vue[data-diapo-actif] { opacity: 1; visibility: visible; }

.oz-diapo__fleche {
  position: absolute;
  top: 0;
  bottom: 56px;
  margin-block: auto;
  z-index: 3;
  appearance: none;
  width: 44px;
  height: 44px;
  border: var(--oz-trait);
  border-radius: 50%;
  background: var(--oz-blanc);
  color: var(--oz-encre);
  cursor: pointer;
  padding: 0;
  /* Le triangle est un bloc : sans centrage sur les deux axes, il se colle
     en haut du bouton. */
  display: grid;
  place-items: center;
}

.oz-diapo__fleche:hover { background: var(--oz-jaune); }
.oz-diapo__fleche:focus-visible { outline-offset: 2px; }
.oz-diapo__fleche--prec { left: 10px; }
.oz-diapo__fleche--suiv { right: 10px; }

.oz-diapo__fleche::before {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  background: var(--oz-encre);
}

/* Le triangle rempli son carré, et se décale d'un pixel vers sa pointe : le
   centre optique d'un triangle n'est pas le centre de sa boîte. */
.oz-diapo__fleche--prec::before {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  transform: translateX(-1px);
}

.oz-diapo__fleche--suiv::before {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  transform: translateX(1px);
}

.oz-diapo__puces { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* La légende à gauche, les puces à droite, sur une seule ligne au ras du bas
   du bloc. Les puces sortent du flux et le cadre d'image récupère leur
   hauteur : il finit à la hauteur de la colonne de texte, en face. Sous
   560 pixels, elles repassent à la ligne.

   Les 214 pixels laissés à droite de la légende sont la place de sept
   puces. Au-delà, elles passent sous la légende, comme sur téléphone, et
   la légende reprend toute sa largeur. Décision 170. */
@media (min-width: 560px) {
  .js .oz-diapo { position: relative; }
  .js .oz-diapo__puces { position: absolute; right: 0; bottom: 0; }
  .js .oz-diapo__vue figcaption { max-width: min(34ch, 100% - 214px); }

  .js .oz-diapo:has(.oz-diapo__puce:nth-child(8)) .oz-diapo__puces { position: static; }
  .js .oz-diapo:has(.oz-diapo__puce:nth-child(8)) .oz-diapo__vue figcaption { max-width: 34ch; }
}

.oz-diapo__puce {
  appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: var(--oz-trait);
  border-radius: 50%;
  background: var(--oz-blanc);
  cursor: pointer;
}

.oz-diapo__puce[aria-selected="true"] { background: var(--oz-encre); }
.oz-diapo__puce:focus-visible { outline-offset: 3px; }

/* La photographie d'une vue. Une vue sans photographie ne s'affiche pas
   (décision 158), et plus aucun cadre hachuré n'annonce celles qui
   manquent (décision 167).

   L'image garde ses proportions et la bordure l'épouse : ni fond, ni
   bandes, ni rognage. Elle se centre dans la place que laisse la légende,
   qui reste au ras du bas avec les puces : d'une vue à l'autre, seule
   l'image change de taille. Sa hauteur est plafonnée, pour qu'un portrait
   ne repousse pas tout le hero. Décision 170. */
.oz-diapo__image {
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(300px, 40vw, 560px);
  margin: auto;
  border: var(--oz-trait);
}

/* Après la première, une vue attend que le script charge son image
   (décision 176). Sans script, c'est la copie de `<noscript>` qui se
   montre, à la place exacte de l'image en attente dans la figure. Jamais
   hors de `.sans-js` : avec un script, le contenu de `<noscript>` n'est
   que du texte, et il s'afficherait tel quel. */
.sans-js .oz-diapo__image[data-src] { display: none; }
.sans-js .oz-diapo__vue noscript { display: contents; }

/* `width`/`height` en attributs HTML portent les pixels réels du fichier,
   pour que le navigateur réserve la bonne place avant chargement ; l'image
   garde son ratio naturel, seule sa largeur est contrainte. */
.oz-merci__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════ 6. Sections courantes */

.oz-section { padding: clamp(44px, 6vw, 80px) var(--oz-marge); }
.oz-section--oz { border-bottom: var(--oz-trait); }
.oz-section--themes { padding-top: 0; }

.oz-section__grille,
.oz-section__entete,
.oz-cartes,
.oz-jauge > *,
.oz-merci__grille {
  max-width: var(--oz-large);
  margin-inline: auto;
}

.oz-section__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.oz-section__entete {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}

.oz-section__chapeau { margin: 0; font-size: 16px; line-height: 1.55; max-width: 44ch; }

.oz-lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--oz-titre);
  font-size: 16px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 18;
}

.oz-lien-fleche .oz-forme--fleche { width: 11px; height: 11px; }

.oz-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin: 0;
}

.oz-chiffre {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 10px;
  padding: 20px;
  background: var(--oz-creme-clair);
}

.oz-chiffre--2 { background: var(--oz-peche); }
.oz-chiffre--3 { background: var(--oz-rose); }

.oz-chiffre dt {
  font-family: var(--oz-titre);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 40;
}

.oz-chiffre dd { margin: 0; font-size: 14px; line-height: 1.5; }

/* `margin-block` et non `margin` : le raccourci écrasait le `margin-inline:
   auto` posé plus haut, et décalait la grille de cartes de cinquante-huit
   pixels sous un titre resté centré. */
.oz-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.oz-cartes--trois { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.oz-carte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 10px;
  padding: 26px 24px;
  min-height: 250px;
  background: var(--oz-creme-clair);
}

.oz-carte__titre,
.oz-carte__texte { position: relative; margin: 0; }

.oz-carte__titre {
  font-family: var(--oz-titre);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 24;
}

.oz-carte__texte { font-size: 15px; line-height: 1.55; }

.oz-carte__forme { position: absolute; z-index: 0; }

/* Six cartes, six compositions : la couleur, la forme en débord, le bord de
   calage. C'est ce qui empêche la grille de ressembler à un tableau. */
.oz-carte--1 { background: var(--oz-rose); justify-content: flex-end; }
.oz-carte--1 .oz-carte__forme {
  top: -28px; left: -24px; width: 96px; height: 96px; opacity: .85;
  background: var(--oz-rouge);
  clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%);
}

.oz-carte--2 { background: var(--oz-creme-clair); text-align: right; }
.oz-carte--2 .oz-carte__forme {
  bottom: -26px; right: -22px; width: 92px; height: 92px;
  background: var(--oz-jaune); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.oz-carte--3 { background: var(--oz-peche); text-align: right; }
.oz-carte--3 .oz-carte__forme {
  bottom: 0; left: 24px; width: 72px; height: 99px;
  background: var(--oz-orange); border-radius: 36px 36px 0 0;
}

/* Deux losanges côte à côte : un seul `clip-path` ne sait pas découper deux
   formes disjointes, ce sont donc deux pseudo-éléments. */
.oz-carte--4 { background: var(--oz-creme); justify-content: flex-end; }
.oz-carte--4 .oz-carte__forme { top: 26px; right: -30px; width: 130px; height: 73px; }

.oz-carte--4 .oz-carte__forme::before,
.oz-carte--4 .oz-carte__forme::after {
  content: '';
  position: absolute;
  top: 0;
  width: 56%;
  height: 100%;
  background: var(--oz-jaune);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.oz-carte--4 .oz-carte__forme::before { left: 0; }
.oz-carte--4 .oz-carte__forme::after { right: 0; }

.oz-carte--5 { background: var(--oz-rose); }
.oz-carte--5 .oz-carte__forme {
  bottom: -24px; right: -20px; width: 88px; height: 88px; opacity: .9;
  background: var(--oz-rouge);
}

.oz-carte--6 { background: var(--oz-creme-clair); text-align: right; justify-content: flex-end; }
.oz-carte--6 .oz-carte__forme {
  top: -22px; right: -18px; width: 86px; height: 86px;
  background: var(--oz-orange); border-radius: 50%;
}

/* La section du financement n'a que trois cartes : elle réutilise les trois
   premières compositions, sans les surcharger. */
.oz-cartes--trois .oz-carte--1 { background: var(--oz-peche); text-align: left; }
.oz-cartes--trois .oz-carte--1 .oz-carte__forme {
  top: -24px; right: -20px; left: auto; width: 92px; height: 92px; opacity: 1;
  background: var(--oz-orange); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.oz-cartes--trois .oz-carte--2 { background: var(--oz-rose); }
.oz-cartes--trois .oz-carte--2 .oz-carte__forme {
  bottom: -30px; left: -26px; right: auto; width: 96px; height: 96px; opacity: .85;
  background: var(--oz-rouge);
  clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%);
}

.oz-cartes--trois .oz-carte--3 { background: var(--oz-creme-clair); text-align: left; }
.oz-cartes--trois .oz-carte--3 .oz-carte__forme {
  bottom: 0; right: 22px; left: auto; width: 72px; height: 99px;
  background: var(--oz-jaune); border-radius: 36px 36px 0 0;
}

.oz-section .oz-mention { max-width: var(--oz-large); margin: 26px auto 0; }

/* ── Les douze thèmes ─────────────────────────────────────────────── */

.oz-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le contour parcourt le dégradé de marque, du premier thème au douzième. La
   teinte vient de `Corde::teinte()` : la même interpolation que la corde. */
.oz-theme {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--oz-blanc);
  border: 3px solid var(--oz-teinte, var(--oz-jaune));
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--oz-titre);
  font-size: 16px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 18;
}

.oz-theme__num { font-family: var(--oz-technique); font-size: 11px; opacity: .7; }

.oz-extrait {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  background: var(--oz-creme);
  border: var(--oz-trait);
  border-radius: var(--oz-rayon);
  padding: clamp(22px, 3vw, 32px);
}

.oz-extrait__chapo {
  font-family: var(--oz-technique);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.oz-extrait__mot { margin: 0; }

.oz-extrait__mot dt {
  font-family: var(--oz-titre);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 900;
  line-height: 1;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 48;
}

.oz-extrait__mot dt abbr {
  display: block;
  font-family: var(--oz-courant);
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  text-decoration: none;
}

.oz-extrait__mot dd {
  margin: 12px 0 0;
  font-family: var(--oz-titre);
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
  font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 22;
}

.oz-extrait__texte { margin: 0; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.oz-extrait__chute { margin: 0; font-size: 14px; line-height: 1.55; opacity: .85; }

/* ═══════════════════════════════════════════ 7. La collecte */

.oz-jauge__texte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: baseline;
  margin: 0 auto;
  border: var(--oz-trait);
  background: var(--oz-blanc);
  padding: 18px 22px;
}

.oz-jauge__texte strong {
  font-family: var(--oz-titre);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 48;
}

.oz-jauge__texte span { font-size: 15px; font-weight: 600; line-height: 1.4; }

.oz-jauge__corde { overflow: visible; margin: 30px auto; }

.oz-corde {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* Les maillons sont des tracés vides : seul leur contour porte la couleur,
     et elle vient du serveur, maillon par maillon. */
  fill: none;
}

/* La mèche prend feu du départ vers la flamme. Le retard de chaque maillon
   est posé par le serveur, qui seul connaît sa place sur la corde.
   L'animation tourne une fois, ne boucle pas, et ne coûte rien ensuite. */
@keyframes ozAllume { from { stroke: #DCD1C7; } }
@keyframes ozAllumeMarque { from { fill: #E4DAD1; stroke: #CFC3B8; } }
@keyframes ozArrive { from { opacity: 0; } }

/*
 * L'ondulation. Une seule série d'images clefs pour tous les maillons : ce
 * qui les distingue arrive du serveur en propriétés personnalisées, la
 * normale du maillon, la constante qui ramène le départ à zéro, et le retard
 * négatif qui donne la phase. Voir `Corde::ondulation()`.
 *
 * À l'instant zéro, l'écart vaut exactement zéro : rien ne saute au
 * chargement, et rien ne dépend d'une mesure du navigateur. Sous
 * `prefers-reduced-motion`, la section 12 ramène le maillon à sa position de
 * base : la corde garde sa forme et cesse seulement de bouger.
 */
@keyframes ozOnde {
  0%, 50%, 100% { translate: calc(var(--oz-ax) * var(--oz-c)) calc(var(--oz-ay) * var(--oz-c)); }
  25%  { translate: calc(var(--oz-ax) * (var(--oz-c) - 1)) calc(var(--oz-ay) * (var(--oz-c) - 1)); }
  75%  { translate: calc(var(--oz-ax) * (var(--oz-c) + 1)) calc(var(--oz-ay) * (var(--oz-c) + 1)); }
}

.oz-chainon { animation: ozOnde 4398ms ease-in-out infinite var(--oz-onde, 0ms); }

.oz-chainon--vif {
  animation:
    ozAllume .5s ease-out backwards var(--oz-retard, 0ms),
    ozOnde 4398ms ease-in-out infinite var(--oz-onde, 0ms);
}

.oz-chainon--palier.oz-chainon--vif { animation-name: ozAllumeMarque, ozOnde; }

.oz-corde__flamme {
  animation:
    ozArrive .6s ease-out backwards 700ms,
    ozOnde 4398ms ease-in-out infinite var(--oz-onde, 0ms);
}

/* Hors de l'écran, plus rien ne bouge : une page qu'on laisse ouverte une
   heure n'a pas à faire onduler une corde que personne ne regarde. C'est le
   script qui pose la classe, comme pour le diaporama. */
.oz-corde--dort .oz-chainon,
.oz-corde--dort .oz-corde__flamme { animation-play-state: paused; }

.oz-corde__feu-souffle {
  animation: ozBurst .9s cubic-bezier(.2, 1.3, .4, 1) both;
  transform-box: fill-box;
  transform-origin: 50% 80%;
}

.oz-paliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.oz-palier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--oz-blanc);
  border: 2px dashed var(--oz-encre);
  margin: 0 -2px -2px 0;
  padding: 18px 20px;
}

.oz-palier--atteint { border-style: solid; }

.oz-palier__entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oz-palier__marque { flex: none; display: block; }

.oz-palier__montant {
  font-family: var(--oz-titre);
  font-size: 22px;
  font-weight: 900;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 24;
}

.oz-palier__etat {
  white-space: nowrap;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1.5px solid var(--oz-encre);
}

.oz-palier--atteint .oz-palier__etat {
  background: var(--oz-encre);
  color: var(--oz-blanc);
  border-color: var(--oz-encre);
}

/* Le titre passe en gras depuis qu'un texte le suit : sans cela, les deux
   lignes se lisent comme un seul paragraphe. */
.oz-palier__titre { font-size: 15px; font-weight: 700; line-height: 1.45; }
.oz-palier__texte { font-size: 14px; line-height: 1.5; }

/* ═══════════════════════════════════════════ 8. Le formulaire */

.oz-commande {
  position: relative;
  overflow: hidden;
  background: var(--oz-encre);
  padding: clamp(56px, 7vw, 96px) clamp(12px, 3vw, 40px);
}

.oz-commande__decor-a {
  top: 18px; left: -60px; width: 190px; height: 190px;
  --oz-couleur: var(--oz-jaune);
}

.oz-commande__decor-b {
  bottom: 26px; right: -50px; width: 170px; height: 96px;
  --oz-couleur: var(--oz-orange);
}

/* Le panneau crème, coupé en biais haut et bas. La coupe mange 26 pixels de
   chaque côté, que le rembourrage rend : sinon le premier titre passe sous
   le biseau. */
.oz-commande__panneau {
  position: relative;
  background: var(--oz-creme);
  color: var(--oz-encre);
  clip-path: polygon(0 26px, 100% 0, 100% calc(100% - 26px), 0 100%);
  padding: calc(clamp(40px, 5vw, 72px) + 26px) clamp(20px, 4vw, 56px);
}

.oz-commande__dedans {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.oz-formulaire { display: flex; flex-direction: column; gap: 22px; margin: 0; }

.oz-bloc {
  border: var(--oz-trait);
  border-radius: var(--oz-rayon-bloc);
  background: var(--oz-blanc);
  padding: clamp(20px, 3vw, 28px);
  margin: 0;
  min-width: 0;
}

.oz-bloc--nu { border: none; background: none; padding: 0; }

.oz-bloc--deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

/* Un `legend` se pose DANS la bordure du `fieldset` et déborde au-dessus.
   `float` le ramène dans le flux, et le frère suivant nettoie derrière. */
.oz-bloc > legend,
.oz-don > legend,
.oz-lieux > legend {
  float: left;
  width: 100%;
}

.oz-bloc > legend + *,
.oz-don > legend + *,
.oz-lieux > legend + * { clear: both; }

.oz-bloc__titre {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--oz-titre);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--oz-rouge);
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 24;
}

.oz-reception .oz-bloc__titre { color: var(--oz-encre); }

/* ── Les trois tarifs ─────────────────────────────────────────────── */

.oz-tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr));
  gap: 16px;
}

.oz-tarif {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--oz-blanc);
  border: 2px solid var(--oz-voile-fort);
  border-radius: var(--oz-rayon);
  padding: 22px;
}

.oz-tarif--actif { border-color: var(--oz-encre); box-shadow: inset 0 0 0 2px var(--oz-encre); }

.oz-tarif__perso {
  position: absolute;
  right: -30px;
  bottom: 152px;
  width: 164px;
  height: 206px;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  color: var(--oz-perso, var(--oz-jaune));
}

.oz-tarif--rond { --oz-perso: var(--oz-jaune); }
.oz-tarif--losange { --oz-perso: var(--oz-orange); }
.oz-tarif--sapin { --oz-perso: var(--oz-rouge); }

/* Le personnage saute quand un exemplaire entre au panier, et à ce
   moment-là seulement : un saut au survol se déclenche en passant la souris
   pour aller ailleurs. C'est le script qui pose la classe, en alternant A et
   B, une animation ne se rejouant pas sous le nom qu'elle porte déjà.

   Les animations vivent dans l'arbre d'ombre du `<use>`, où aucun sélecteur
   n'entre : elles s'y pilotent par propriétés personnalisées, qui, elles,
   s'héritent. */
.oz-tarif--saute-a .oz-tarif__perso use {
  --ozChar: ozPopA .9s cubic-bezier(.34, 1.35, .5, 1) 1;
}

.oz-tarif--saute-b .oz-tarif__perso use {
  --ozChar: ozPopB .9s cubic-bezier(.34, 1.35, .5, 1) 1;
}

/* Au survol, le personnage lève les bras, lui seul, et sans sauter.

   Le survol seul ne suffit pas : une animation attachée à `:hover` est
   retirée net quand la souris part, et le bras revient d'un coup à sa pose
   de repos. Avec script, c'est donc une classe qui porte le geste, posée à
   l'entrée et retirée à la fin du geste, pas à la sortie : partir en cours
   de route ne coupe plus rien. Sans script, `:hover` reste, faute de mieux. */
:root:not(.js) .oz-tarif--rond:hover .oz-tarif__perso use,
.oz-tarif--rond.oz-tarif--leve .oz-tarif__perso use {
  --ozArmG: ozRaiseOnceG 2.1s cubic-bezier(.34, 1.1, .4, 1) 1;
  --ozArmD: ozRaiseOnceD 2.1s cubic-bezier(.34, 1.1, .4, 1) 1;
}

/* Le losange tient quelque chose à deux mains : il lève, et il tremble.
   Celui-là tient sa pose tant qu'on le survole : il lui faut un geste de
   retour, la même animation jouée à l'envers, le temps de reposer les
   bras. */
:root:not(.js) .oz-tarif--losange:hover .oz-tarif__perso use,
.oz-tarif--losange.oz-tarif--tient .oz-tarif__perso use {
  --ozArmG: ozHoldG .55s cubic-bezier(.3, 1.25, .45, 1) both;
  --ozArmD: ozHoldD .55s cubic-bezier(.3, 1.25, .45, 1) both;
  --ozVib: ozVib .1s ease-in-out infinite;
}

.oz-tarif--losange.oz-tarif--lache .oz-tarif__perso use {
  --ozArmG: ozHoldG .55s cubic-bezier(.3, 1.25, .45, 1) reverse both;
  --ozArmD: ozHoldD .55s cubic-bezier(.3, 1.25, .45, 1) reverse both;
}

/* Le sapin n'anime qu'un bras : celui qui porte la flamme. */
:root:not(.js) .oz-tarif--sapin:hover .oz-tarif__perso use,
.oz-tarif--sapin.oz-tarif--leve .oz-tarif__perso use {
  --ozArmG: ozRaiseOnceG 2.1s cubic-bezier(.34, 1.1, .4, 1) 1;
}

.oz-tarif__nom {
  position: relative;
  z-index: 1;
  font-family: var(--oz-titre);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  min-height: 54px;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 28;
}

.oz-tarif__prix {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--oz-titre);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 60;
}

.oz-tarif__detail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: auto 0 0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 19ch;
}

.oz-tarif__detail strong { font-weight: 700; }

.oz-tarif .oz-compteur {
  position: relative;
  z-index: 1;
  padding-top: 16px;
  border-top: 1px solid var(--oz-voile);
}

.oz-tarif__sous-total,
.oz-lots__sous-total {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  min-height: 34px;
  font-size: 14px;
  font-weight: 600;
}

.oz-tarif__sous-total strong,
.oz-lots__sous-total strong {
  font-family: var(--oz-titre);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: var(--oz-rouge);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 28;
}

/* ── Les lots de cartes ───────────────────────────────────────────── */

/* `overflow-anchor: none` n'est pas un détail : sans lui, l'ancrage de
   défilement recale la page quand le bloc s'ouvre, et le titre qui le
   précède a l'air de sauter. */
.oz-lots {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-anchor: none;
}

/* Le bloc arrive quand le panier n'est plus vide. L'animation ne tourne
   qu'une fois, à l'ouverture : la classe est posée par le script, jamais au
   chargement. */
@keyframes ozDeplie { from { opacity: 0; transform: translateY(-10px); } }

.oz-lots--ouvre { animation: ozDeplie .28s ease-out 1; }

.oz-lots__entete {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.oz-lots__sous-total { display: flex; align-items: baseline; gap: 12px; }
.oz-lots__sous-total strong { font-size: 30px; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 36; }

.oz-lots__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: 14px;
}

.oz-lot {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--oz-blanc);
  border: 2px dashed var(--oz-encre);
  border-radius: var(--oz-rayon);
  padding: 14px;
}

.oz-lot--actif { border-style: solid; box-shadow: inset 0 0 0 2px var(--oz-encre); }

.oz-lot__vignettes { --oz-vignette: 104px; position: relative; display: block; height: 104px; }

/* Les cinq cartes en éventail. Au survol, elles s'ouvrent sur toute la
   largeur de la carte du lot : la première contre le bord gauche, la
   dernière contre le bord droit. */
.oz-lot__vignette {
  position: absolute;
  left: calc(var(--oz-rang) * 11px);
  top: calc(18px + var(--oz-rang) * 2px);
  width: var(--oz-vignette);
  height: 74px;
  transform: rotate(calc((var(--oz-rang) - 2) * 1.6deg));
  transition: left .22s ease, top .22s ease, transform .22s ease;
  z-index: calc(var(--oz-rang) + 1);
  perspective: 420px;
}

/* La carte a deux faces, le recto et le verso commun. Le cadre et l'ombre
   sont portés par chaque face, pour tourner avec elle. L'image couvre la
   face, recadrée au besoin : la carte garde le format A6. */
.oz-lot__carte { position: absolute; inset: 0; transform-style: preserve-3d; }

.oz-lot__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1.5px solid var(--oz-encre);
  border-radius: 4px;
  background: var(--oz-blanc);
  box-shadow: 1px 2px 0 var(--oz-voile-fort);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.oz-lot__face--verso { transform: rotateY(180deg); }

/* Quand un lot entre au panier, ses cinq cartes se retournent l'une après
   l'autre, de gauche à droite. Un tour complet : on aperçoit le verso, la
   carte s'y arrête un instant, puis revient d'elle-même sur son recto. Rien
   ne reste retourné. La classe est posée par le script ; sous
   `prefers-reduced-motion`, il ne la pose pas. Voir la décision 168. */
@keyframes ozRetourne {
  0%       { transform: rotateY(0); }
  38%, 62% { transform: rotateY(180deg); }
  100%     { transform: rotateY(360deg); }
}

.oz-lot--vague .oz-lot__carte {
  animation: ozRetourne .9s calc(var(--oz-rang) * 90ms) ease-in-out 1 both;
}

.oz-lot:hover .oz-lot__vignette {
  left: calc(var(--oz-rang) * (100% - var(--oz-vignette)) / 4);
  top: 12px;
  transform: rotate(calc((var(--oz-rang) - 2) * 4.5deg));
}

.oz-lot__nom {
  font-family: var(--oz-titre);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 20;
}

.oz-lot__detail { margin: 0; font-size: 13px; line-height: 1.45; }
.oz-lot .oz-compteur { margin-top: auto; }
.oz-lot .oz-compteur__pas { width: 46px; min-width: 46px; min-height: 46px; }
.oz-lot .oz-compteur__champ { min-height: 46px; font-size: 22px; }

/* ── Le don et le récapitulatif ───────────────────────────────────── */

.oz-don { border: none; padding: 0; margin: 0; min-width: 0; }
.oz-don__champ { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.oz-don__champ > label { font-size: 14px; line-height: 1.55; font-weight: 400; }

/* Le compteur du don : moins, le champ, l'euro, plus. L'euro est une case de
   la rangée, pas un ornement collé au champ : il porte les deux filets
   horizontaux et laisse le bouton plus fermer le groupe. */
.oz-compteur--don .oz-compteur__champ {
  flex: 1 1 auto;
  width: 86px;
  min-width: 48px;
  max-width: 110px;
  border-right: none;
  text-align: right;
  padding-right: 6px;
}

.oz-compteur__suffixe {
  display: flex;
  align-items: center;
  padding-right: 12px;
  border-top: var(--oz-trait);
  border-bottom: var(--oz-trait);
  background: var(--oz-blanc);
  font-family: var(--oz-titre);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

/* Sans script, les deux boutons ne sont pas là : le champ et son euro
   forment le groupe entier, et ce sont eux qui portent les coins. */
.oz-don__champ .oz-compteur__champ { border-radius: var(--oz-rayon) 0 0 var(--oz-rayon); }
.oz-don__champ .oz-compteur__suffixe {
  border-right: var(--oz-trait);
  border-radius: 0 var(--oz-rayon) var(--oz-rayon) 0;
}

.js .oz-don__champ .oz-compteur__champ { border-radius: 0; }
.js .oz-don__champ .oz-compteur__suffixe { border-right: none; border-radius: 0; }

.oz-recap-bloc { min-width: 0; }

.oz-recap { width: 100%; border-collapse: collapse; }

.oz-recap th,
.oz-recap td {
  text-align: left;
  padding: 9px 0;
  font-weight: 400;
  vertical-align: baseline;
}

.oz-recap tbody th { font-size: 15px; line-height: 1.45; }
.oz-recap tbody small { display: block; font-size: 13px; opacity: .8; }

.oz-recap td {
  text-align: right;
  white-space: nowrap;
  font-family: var(--oz-titre);
  font-size: 19px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 22;
}

.oz-recap tbody tr { border-bottom: 1px solid var(--oz-voile); }

.oz-recap__total th { font-size: 16px; font-weight: 700; padding-top: 12px; }

.oz-recap__total td {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  color: var(--oz-rouge);
  padding-top: 12px;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 48;
}

.oz-recap tfoot tr:not(.oz-recap__total) th,
.oz-recap tfoot tr:not(.oz-recap__total) td {
  font-family: var(--oz-courant);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  padding: 2px 0;
}

.oz-recap tfoot tr:nth-child(2) th,
.oz-recap tfoot tr:nth-child(2) td { padding-top: 10px; border-top: 1px solid var(--oz-voile); }

.oz-recap__vide { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 0; }
.oz-recap__vide span { font-size: 15px; line-height: 1.5; }
.oz-recap__perso { flex: none; color: var(--oz-orange); }

/* ── La réception ─────────────────────────────────────────────────── */

.oz-reception { display: flex; flex-direction: column; gap: 18px; }

.oz-reception__choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}

/* Deux vraies cases radio : le choix se fait au clavier, se poste sans
   script, et la carte n'est que le vêtement du bouton. */
.oz-choix { position: relative; display: block; }

.oz-choix input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.oz-choix label {
  display: grid;
  grid-template-areas: 'nom nom' 'detail prix';
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: baseline;
  height: 100%;
  min-height: 52px;
  border: 2px solid var(--oz-voile-fort);
  border-radius: var(--oz-rayon);
  background: var(--oz-blanc);
  padding: 16px;
  cursor: pointer;
}

.oz-choix input:checked + label {
  border-color: var(--oz-encre);
  box-shadow: inset 0 0 0 2px var(--oz-encre);
}

.oz-choix input:focus-visible + label {
  outline: 3px solid var(--oz-encre);
  outline-offset: 3px;
}

.oz-choix__nom {
  grid-area: nom;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--oz-titre);
  font-size: 19px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 22;
}

.oz-choix__nom::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: var(--oz-trait);
  background: transparent;
}

.oz-choix input:checked + label .oz-choix__nom::before { background: var(--oz-encre); }

.oz-choix__detail { grid-area: detail; font-size: 13px; line-height: 1.45; }

.oz-choix__prix {
  grid-area: prix;
  font-family: var(--oz-titre);
  font-size: 22px;
  font-weight: 900;
  white-space: nowrap;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 24;
}

/* Tant qu'aucun poids n'est connu, le port n'est pas un montant : il se
   compose comme une phrase. */
.oz-choix__prix--texte {
  font-family: var(--oz-courant);
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
  max-width: 10ch;
  text-align: right;
}

/* Des cartes, pas un menu déroulant : un lieu se choisit sur son adresse et
   ses créneaux, qu'une option de `select` ne sait pas montrer. Vraies cases
   radio, donc au clavier et sans script. Voir la décision 106. */

.oz-lieux {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--oz-voile);
  padding-top: 18px;
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* Le titre de la liste est un libellé, pas un titre de bloc : le bloc, ici,
   c'est la réception, et il a déjà le sien. */
.oz-lieux__titre {
  padding: 0;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* Dix lieux déroulés repoussent le bouton de commande hors de l'écran : la
   liste défile dans sa propre fenêtre. Le `padding` laisse la place au
   contour de focus, que `overflow` couperait. Pas d'`overscroll-behavior` :
   arrivé en bout de liste, le défilement repasse à la page. */
.oz-lieux__defilement {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 390px;
  overflow-y: auto;
  padding: 5px;
}

.oz-lieux__departement { display: flex; flex-direction: column; gap: 10px; }

/* Le département colle en haut pendant que sa section défile : sans quoi on
   ne sait plus, à mi-liste, dans quel département on lit. Le fond est opaque,
   les cartes passent dessous. */
.oz-lieux__nom-departement {
  position: sticky;
  top: -5px;
  z-index: 1;
  background: var(--oz-blanc);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.oz-lieux__nom-departement::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--oz-orange);
}

.oz-lieux__ville { display: flex; flex-direction: column; gap: 8px; }

.oz-lieux__nom-ville {
  font-family: var(--oz-titre);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 20;
}

.oz-lieu { position: relative; display: block; }

.oz-lieu input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.oz-lieu label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  border: 2px solid var(--oz-voile-fort);
  border-radius: var(--oz-rayon);
  background: var(--oz-blanc);
  padding: 12px 14px;
  cursor: pointer;
}

.oz-lieu label:hover { border-color: var(--oz-encre); }
.oz-lieu input:checked + label { border-color: var(--oz-encre); box-shadow: inset 0 0 0 2px var(--oz-encre); }
.oz-lieu input:focus-visible + label { outline: 3px solid var(--oz-encre); outline-offset: 2px; }

.oz-lieu label::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: var(--oz-trait);
  background: transparent;
}

.oz-lieu input:checked + label::before { background: var(--oz-encre); }

.oz-lieu__dit { display: flex; flex-direction: column; gap: 3px; }
.oz-lieu__nom { font-size: 15px; font-weight: 700; line-height: 1.3; }
.oz-lieu__detail { font-size: 13px; line-height: 1.45; }
.oz-lieu__detail--dates { color: var(--oz-rouge-texte); }

.oz-grille-port { border-top: 1px solid var(--oz-voile); padding-top: 14px; }
.oz-grille-port summary { cursor: pointer; font-size: 14px; font-weight: 700; min-height: 44px; padding: 10px 0; }
.oz-grille-port table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.oz-grille-port caption { text-align: left; font-size: 13px; opacity: .8; padding-bottom: 8px; }
.oz-grille-port th, .oz-grille-port td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--oz-voile); }
.oz-grille-port td { text-align: right; white-space: nowrap; font-weight: 700; }

/*
 * Chaque mode de réception ne montre que ce qui le concerne. C'est écrit en
 * NÉGATIF, on masque sur le mode choisi au lieu d'afficher, pour qu'un
 * navigateur sans `:has()` montre les deux plutôt qu'aucun : un bloc de trop
 * se lit, un bloc manquant ferme la commande.
 */
.oz-reception:has(#reception-expedition:checked) .oz-lieux,
.oz-reception:has(#reception-retrait:checked) .oz-grille-port { display: none; }

/* ── L'envoi ──────────────────────────────────────────────────────── */

.oz-recalculer { margin: 0; }
.js .oz-recalculer { margin: 0; }

/* Le bouton et ce qu'il dit s'alignent par le haut : centrés, la première
   ligne du texte flottait entre le haut du bouton et son libellé. */
.oz-envoi { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

.oz-blocage { display: flex; flex-direction: column; gap: 4px; margin: 0; max-width: 46ch; }
.oz-blocage__titre { font-size: 15px; font-weight: 700; line-height: 1.4; }
.oz-blocage__detail { font-size: 14px; line-height: 1.5; }
/* Le rappel du lieu n'éteint rien : il se lit comme une confirmation, pas
   comme un avertissement. */
.oz-blocage--rappel .oz-blocage__titre { font-family: var(--oz-titre); font-size: 17px; }

.oz-blocage__lien { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; }

.oz-mention-paiement { margin: 0; font-size: 13px; line-height: 1.55; opacity: .8; max-width: 70ch; }

/* ═══════════════════════════════════════════ 9. Pourquoi, merci, pied */

.oz-pourquoi {
  position: relative;
  overflow: hidden;
  background: var(--oz-encre);
  color: var(--oz-blanc);
  padding: clamp(52px, 7vw, 92px) var(--oz-marge);
}

.oz-pourquoi__decor-a { top: -126px; right: -64px; width: 180px; height: 180px; --oz-couleur: var(--oz-rouge); }
.oz-pourquoi__decor-b { bottom: -98px; left: -52px; width: 140px; height: 140px; --oz-couleur: var(--oz-orange); }
.oz-pourquoi .oz-section__grille { position: relative; z-index: 1; isolation: isolate; }
.oz-pourquoi .oz-texte { max-width: none; }

.oz-merci {
  position: relative;
  border-top: var(--oz-trait);
  background: var(--oz-creme);
  padding: clamp(40px, 6vw, 84px) var(--oz-marge) 0;
}

.oz-merci__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2vw, 24px);
}

.oz-merci__texte { gap: 14px; }
.oz-merci .oz-titre1 {
  max-width: 22ch;
  font-size: clamp(28px, 3.6vw, 46px);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 52;
}

/* Pleine largeur de la section, comme le reste du contenu : l'équipe est
   le dernier visage de la page, elle n'a pas à tenir dans une colonne. */
.oz-merci__montage { width: 100%; margin-bottom: 0; }

.oz-pied {
  position: relative;
  overflow: hidden;
  background: var(--oz-encre);
  color: var(--oz-blanc);
  padding: clamp(40px, 5vw, 64px) var(--oz-marge);
}

.oz-pied__decor { top: -112px; right: -46px; width: 150px; height: 150px; --oz-couleur: var(--oz-jaune); }

.oz-pied__grille {
  position: relative;
  z-index: 1;
  max-width: var(--oz-large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 32px;
}

.oz-pied__colonne { display: flex; flex-direction: column; gap: 10px; }
.oz-pied__colonne p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 34ch; }
.oz-pied__discret { font-size: 13px !important; opacity: .85; }
.oz-pied__villes { font-weight: 600; padding-top: 4px; }

.oz-pied__colonne h2 {
  margin: 0;
  font-family: var(--oz-titre);
  font-size: 17px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 20;
}

.oz-pied__colonne ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.oz-pied__colonne a { color: var(--oz-jaune); font-size: 14px; }
.oz-pied__logo { display: block; width: fit-content; color: var(--oz-blanc); }
.oz-pied :focus-visible { outline-color: var(--oz-jaune); }
.oz-pourquoi :focus-visible { outline-color: var(--oz-jaune); }
.oz-commande > :focus-visible { outline-color: var(--oz-jaune); }

/* ═══════════════════════════════════════════ 10. Les autres pages */

/* `commander.php` et `merci.php` ne sont pas dessinés par le handoff : ils
   reprennent les mêmes jetons, sobrement. */

.oz-simple { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--oz-marge); }

.oz-simple h1 {
  margin: 0 0 12px;
  font-family: var(--oz-titre);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.05;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 48;
}

.oz-simple h2 {
  margin: 0 0 12px;
  font-family: var(--oz-titre);
  font-size: 21px;
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 24;
}

.oz-simple fieldset {
  border: var(--oz-trait);
  border-radius: var(--oz-rayon-bloc);
  background: var(--oz-blanc);
  padding: clamp(18px, 3vw, 26px);
  margin: 0 0 22px;
}

.oz-simple legend {
  font-family: var(--oz-titre);
  font-size: 21px;
  font-weight: 700;
  padding: 0 8px;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 24;
}

/* La zone de commentaire, hors de tout bloc, prend la largeur des blocs
   au-dessus d'elle, et non celle d'un champ de saisie. Elle ne s'agrandit
   qu'en hauteur : étirée en largeur, elle sortirait de la colonne.
   Décision 174. */
.oz-simple .champ textarea { max-width: none; resize: vertical; }

.oz-simple section { margin: 0 0 26px; }
.oz-simple .oz-recap { max-width: 34rem; }

/* L'adresse d'un point de retrait, en carte comme dans le tunnel. */
.oz-adresse {
  max-width: 34rem;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 2px solid var(--oz-voile-fort);
  border-radius: var(--oz-rayon);
  background: var(--oz-blanc);
}
.oz-adresse p { margin: 0; line-height: 1.5; }
.oz-adresse .oz-adresse__dates { margin-top: 6px; font-size: 14px; color: var(--oz-rouge-texte); }

.oz-fil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--oz-trait);
  background: var(--oz-blanc);
  padding: 12px clamp(16px, 4vw, 40px);
}

.oz-fil p { margin: 0; font-size: 14px; }
.oz-fil a { font-family: var(--oz-titre); font-weight: 700; text-decoration: none; }
.oz-fil a:hover { text-decoration: underline; }

.oz-case { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0 0 18px; }
.oz-case input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--oz-rouge); }
.oz-case label { font-size: 15px; line-height: 1.5; font-weight: 400; }
.oz-case .erreur { grid-column: 2; font-size: 14px; color: #A3123A; }

/* ═══════════════════════════════════════════ 11. Les documents légaux */

.document {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--oz-marge) clamp(48px, 6vw, 80px);
}

.document h1 {
  margin: 0 0 14px;
  font-family: var(--oz-titre);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 52;
}

.document h2 {
  margin: 40px 0 12px;
  font-family: var(--oz-titre);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.15;
  font-variation-settings: 'SOFT' 70, 'WONK' 1, 'opsz' 30;
}

.document h3 { margin: 24px 0 8px; font-size: 17px; }
.document p, .document li { font-size: 16px; line-height: 1.65; }
.document__chapeau { font-size: 18px !important; font-weight: 600; }
.document__maj { opacity: .8; }

.document__sommaire {
  border: var(--oz-trait);
  border-radius: var(--oz-rayon-bloc);
  background: var(--oz-blanc);
  padding: 20px 24px;
  margin: 28px 0 8px;
}

.document__sommaire h2 { margin: 0 0 10px; font-size: 17px; }
.document__sommaire ol { margin: 0; padding-left: 20px; }
.document__sommaire li { margin-bottom: 6px; }

.document dl { margin: 12px 0; }
.document dt { font-weight: 700; margin-top: 12px; }
.document dd { margin: 2px 0 0; }
.document table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.document th, .document td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--oz-voile); }
.document mark { background: var(--oz-jaune); padding: 1px 5px; }

/* ═══════════════════════════════════════════ 12. Mouvement, impression */

/*
 * `prefers-reduced-motion` doit tout éteindre, y compris les animations
 * portées en attribut de style dans les symboles SVG. Un sélecteur n'entre
 * pas dans l'arbre d'ombre d'un `<use>`, mais une propriété personnalisée
 * s'y hérite : c'est à quoi sert `--oz-arret`, que `Symboles` a posée autour
 * de chaque animation.
 */
@media (prefers-reduced-motion: reduce) {
  :root { --oz-arret: none; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    /* Le retard aussi : sans lui, la corde resterait grise sept cents
       millisecondes avant de s'allumer d'un coup. */
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .oz-entete, .oz-diapo, .oz-decor, .oz-commande__decor-a, .oz-commande__decor-b,
  .oz-evitement, .oz-recalculer, .oz-envoi { display: none !important; }

  body { background: #fff; font-size: 12pt; }
  .oz-hero, .oz-commande, .oz-pourquoi, .oz-pied { background: #fff; color: #000; }
  .oz-pied a { color: #000; }
  .oz-commande__panneau { clip-path: none; padding: 0; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 10pt; }
}

/* ── Les animations du prototype. Elles sont nommées par les symboles du
      sprite : les renommer demande de relancer
      `php outils/engendrer-symboles.php`. */

@keyframes ozBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes ozFlicker { 0%, 100% { transform: scale(.97) } 38% { transform: scale(1.05) } 64% { transform: scale(.995) } }
@keyframes ozFl1 { 0% { opacity: 1 } 33.333% { opacity: 0 } 100% { opacity: 0 } }
@keyframes ozFl2 { 0% { opacity: 0 } 33.333% { opacity: 1 } 66.667% { opacity: 0 } 100% { opacity: 0 } }
@keyframes ozFl3 { 0% { opacity: 0 } 66.667% { opacity: 1 } }
@keyframes ozBreathe { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.022, .984) } }
@keyframes ozLegA { 0%, 100% { transform: rotate(-2.4deg) } 50% { transform: rotate(2.4deg) } }
@keyframes ozLegB { 0%, 100% { transform: rotate(2.4deg) } 50% { transform: rotate(-2.4deg) } }
@keyframes ozLegS1 { 0%, 100% { transform: rotate(-1.4deg) } 50% { transform: rotate(1.4deg) } }
@keyframes ozLegS2 { 0%, 100% { transform: rotate(1.4deg) } 50% { transform: rotate(-1.4deg) } }
@keyframes ozArmD { 0%, 100% { transform: rotate(-4deg) } 50% { transform: rotate(4.5deg) } }
@keyframes ozArmG { 0%, 100% { transform: rotate(3deg) } 50% { transform: rotate(-7deg) } }
@keyframes ozBlink { 0%, 91%, 100% { transform: scaleY(1) } 95.5% { transform: scaleY(.06) } }
@keyframes ozVib { 0%, 100% { transform: rotate(-1.5deg) } 50% { transform: rotate(1.5deg) } }
@keyframes ozHoldG { to { transform: rotate(-27deg) } }
@keyframes ozHoldD { to { transform: rotate(34deg) } }
@keyframes ozRaiseOnceG { 0% { transform: rotate(3deg) } 14% { transform: rotate(-26deg) } 30% { transform: rotate(2deg) } 46% { transform: rotate(-20deg) } 62% { transform: rotate(0deg) } 100% { transform: rotate(3deg) } }
@keyframes ozRaiseOnceD { 0% { transform: rotate(0deg) } 14% { transform: rotate(-40deg) } 30% { transform: rotate(-14deg) } 46% { transform: rotate(-34deg) } 62% { transform: rotate(-6deg) } 100% { transform: rotate(0deg) } }
/* ozPopA et ozPopB sont le MÊME saut, sous deux noms : c'est ce qui permet
   de le rejouer deux fois de suite. */
@keyframes ozPopA { 0% { transform: translateY(0) scale(1, 1) } 22% { transform: translateY(-16px) scale(1.03, .97) } 52% { transform: translateY(0) scale(.96, 1.05) } 76% { transform: translateY(-4px) scale(1.01, .99) } 100% { transform: translateY(0) scale(1, 1) } }
@keyframes ozPopB { 0% { transform: translateY(0) scale(1, 1) } 22% { transform: translateY(-16px) scale(1.03, .97) } 52% { transform: translateY(0) scale(.96, 1.05) } 76% { transform: translateY(-4px) scale(1.01, .99) } 100% { transform: translateY(0) scale(1, 1) } }
@keyframes ozBurst { 0% { transform: scale(.2); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }