/* Genere par app/site/scripts/feuille-o.ts depuis 2-CE-QU-ON-VA-CONSTRUIRE/maquettes/categorie.html (sha256 efe3f271e3537ef9a7e01539d76e630a64f261afcfa2a1ff7ad5ca575ad28dd5) : ne pas editer, regenerer (D-325). */


  /* ── FIL DE FER : aucune couleur, aucune police de marque. La DA viendra APRÈS, par sa propre méthode. ── */
  :root {
    --paper: var(--o-bloc); --surface: #F1F1F1; --ink: #222222; --muted: #6B6B6B; --line: #C9C9C9;
    --accent: #333333; --accent-strong: #111111; --on-accent: var(--o-bloc);
    --closed: #8A8A8A; --closed-bg: #F6F6F6; --note: #7A2E8F; --seo: #0B5FA5;
    --font-display: system-ui, "Segoe UI", Arial, sans-serif;
    --font-body: system-ui, "Segoe UI", Arial, sans-serif;
    --w-max: 1180px;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #1B1B1B; --surface: #262626; --ink: #EDEDED; --muted: #A3A3A3; --line: #444444;
      --accent: #DDDDDD; --accent-strong: var(--o-bloc); --on-accent: #1B1B1B;
      --closed: #8A8A8A; --closed-bg: #2A2A2A; --note: #D39BE3; --seo: #7FB3E6;
    }
  }
  :root[data-theme="dark"] {
    --paper: #1B1B1B; --surface: #262626; --ink: #EDEDED; --muted: #A3A3A3; --line: #444444;
    --accent: #DDDDDD; --accent-strong: var(--o-bloc); --on-accent: #1B1B1B;
    --closed: #8A8A8A; --closed-bg: #2A2A2A; --note: #D39BE3; --seo: #7FB3E6;
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body);
         font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0;
               text-wrap: balance; letter-spacing: -0.01em; }
  h2 { font-size: 22px; margin-bottom: 12px; }
  p { margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .num { font-variant-numeric: tabular-nums; }
  .wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 20px; }

  /* ── La barre de maquette : HORS site, volontairement laide ───────────────── */
  
  
  
  
  
  
  

  /* ── Bloc 1 : l'en-tête, UNE ligne ─────────────────────────────────────────── */
  .site { border-bottom: 1px solid var(--line); }
  .site .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--o-taille-geste); gap: 16px; }
  .mark { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; text-decoration: none; }
  .mark small { display: none; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
  .site nav { display: flex; gap: 18px; font-weight: 600; font-size: 15px; }
  .site nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--o-taille-touche); padding: 0 4px; }   /* zone de tap >= 44 px (U-9) */
  .crumb { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 0 0; }
  .crumb a { text-decoration: none; }

  /* ── La grille : mobile = une colonne, ordinateur = photo | décision ────────── */
  .grid { display: grid; gap: 28px; padding: 14px 0 40px; grid-template-columns: 1fr;
          grid-template-areas: "decide" "photo" "receive" "steps" "faq" "others" "store"; }
  .decide { grid-area: decide; } .photo { grid-area: photo; } .receive { grid-area: receive; }
  .steps { grid-area: steps; } .faq { grid-area: faq; } .others { grid-area: others; } .store { grid-area: store; }
  @media (min-width: 1024px) {
    .grid { grid-template-columns: 7fr 5fr; column-gap: 48px; row-gap: 40px; padding-top: 22px;
            grid-template-areas: "photo decide" "receive steps" "faq faq" "others store"; }
    .site .mark small { display: inline; }
    h2 { font-size: 26px; }
  }

  /* ── Bloc 2 : LE BLOC DE DÉCISION — la seule surface de la page ────────────── */
  .decide { background: var(--surface); border: 1px solid var(--line); border-radius: var(--o-rayon-doux); padding: 18px 18px 16px; }
  .decide h1 { font-size: 28px; margin: 6px 0 10px; }
  /* 06/09, Ruben : « l'acompte ne devrait pas être plus haut ? » — le prix en tête du bloc, avant la période et les options */
  .prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; margin: 0 0 10px; }
  .prix small { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--muted); }
  .when { font-size: 17px; }
  .when strong { font-weight: 700; }
  .when small { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
  .options { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
  .options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .option { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
            border: 1px solid var(--line); border-radius: var(--o-rayon-doux); padding: 10px 12px; background: var(--paper); cursor: pointer; }
  .option input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent); }
  .option strong { font-size: 18px; display: block; }
  .option span { display: block; font-size: 14px; color: var(--muted); }
  .option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .btn { display: block; width: 100%; height: var(--o-taille-geste); border: 0; border-radius: var(--o-rayon-doux); background: var(--accent);
         color: var(--on-accent); font: 600 18px/1 var(--font-body); margin-top: 12px; cursor: pointer; }
  .btn:hover { background: var(--accent-strong); }
  .btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .fine { font-size: 13px; color: var(--muted); margin-top: 10px; }
  .closed { display: none; background: var(--closed-bg); border: 1px solid var(--closed); border-radius: var(--o-rayon-doux); padding: 14px; margin-top: 12px; color: var(--ink); }
  .closed strong { display: block; font-size: 17px; }
  .closed form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
  .closed input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--o-rayon-doux); background: var(--paper); color: var(--ink); min-width: 0; }
  .closed .btn { height: var(--o-taille-touche); margin: 0; padding: 0 16px; width: auto; font-size: 16px; }
  body[data-etat="ferme"] .options, body[data-etat="ferme"] #reserver, body[data-etat="ferme"] .fine, body[data-etat="ferme"] .prix { display: none; }
  body[data-etat="ferme"] .closed { display: block; }

  /* ── Bloc 3 : la photo ──────────────────────────────────────────────────────── */
  .photo { margin: 0; }
  .photo img { display: block; width: 100%; height: auto; border-radius: var(--o-rayon-doux); aspect-ratio: 896 / 900; object-fit: cover; }
  .photo figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

  /* ── Bloc 4 : ce que vous emportez — les cinq cadres, dessinés ──────────────── */
  .frames { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 14px; }
  .frames span { display: grid; place-items: end center; min-height: 64px; border-radius: 3px; font-size: 11px; letter-spacing: .03em; line-height: 1.15; text-align: center;
                 text-transform: uppercase; padding: 8px 4px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }   /* 06/09 : « en construction » était de travers — centré, et il peut passer sur deux lignes */
  .frames .couvain { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--ink); border-color: transparent; }
  .frames .reserves { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--ink); }
  .frames .chantier { background: transparent; border-style: dashed; }
  .list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .list li { padding-left: 18px; position: relative; }
  .list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--accent); border-radius: 1px; }

  /* ── Bloc 5 : trois temps — c'est une séquence, donc numérotée ─────────────── */
  .steps ol { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 12px; }
  .steps li { counter-increment: t; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: baseline; }
  .steps li::before { content: counter(t); font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--accent); line-height: 1; }
  .steps b { display: block; }
  .steps span { color: var(--muted); font-size: 15px; }

  /* ── Bloc 6 : les questions ─────────────────────────────────────────────────── */
  .faq details { border-top: 1px solid var(--line); padding: 10px 0; }
  .faq details:last-of-type { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 700; color: var(--accent); }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { margin-top: 8px; max-width: 65ch; color: var(--ink); }

  /* ── Bloc 7 : autres dates — des liens, pas une grille de cartes ────────────── */
  .others ul { margin: 0; padding: 0; list-style: none; }
  .others li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 10px 0; }
  .others li:last-child { border-bottom: 1px solid var(--line); }
  .others a { text-decoration: none; font-weight: 600; }
  .others em { font-style: normal; color: var(--muted); display: block; font-size: 14px; font-weight: 400; }
  .others .num { white-space: nowrap; }

  /* ── Bloc 8 : le magasin ────────────────────────────────────────────────────── */
  .store address { font-style: normal; }
  .store dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; }
  .store dt { color: var(--muted); }
  .store dd { margin: 0; }
  .store .btn.secondary { display: inline-block; width: auto; height: var(--o-taille-touche); line-height: 44px; padding: 0 16px; font-size: 16px; text-decoration: none; text-align: center; }

  footer { border-top: 1px solid var(--line); padding: 20px 0 110px; font-size: 13px; color: var(--muted); }
  footer nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

  /* ── Le bandeau cookies : un volet en bas, avec Refuser, jamais 17 % de l'écran ── */
  .cookies { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); z-index: 5; }
  .cookies .wrap { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
  .cookies p { font-size: 13px; color: var(--muted); max-width: 60ch; }
  .cookies div { display: flex; gap: 8px; }
  .cookies button { font: 600 14px var(--font-body); height: var(--o-taille-touche); padding: 0 14px; border-radius: var(--o-rayon-doux); cursor: pointer;
                    background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .cookies[hidden] { display: none; }
  /* ── Les repères SEO : ce que la maquette de fond sert à valider ─────────── */
  
  
  
  
  
  
  
  
  
  .kw { border-bottom: 2px solid var(--seo); }
  @media (prefers-reduced-motion: no-preference) { .btn, .option, .cookies button { transition: background-color .15s, border-color .15s; } }
  /* -- Les zones de tap : 44 px au moins pour tout ce qui se touche (U-9) ; la barre de maquette est hors site -- */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, button, summary, .btn { min-height: var(--o-taille-touche); }
  
  .qte button { min-height: 0; }

  /* 05/09 (U-20) : dans la grille du bas, les sections se placent seules — sans ça, .steps et .store gardent leur zone du fil de fer commun et se superposent */
  .grille-basse > * { grid-area: auto; }
  /* ── propre à la catégorie ─────────────────────────────────────────────── */
  .tete { padding: 10px 0 0; }
  .tete h1 { font-size: 26px; margin: 6px 0 8px; }
  .tete p { max-width: 65ch; }
  .saison { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--o-rayon-doux); background: var(--surface); font-size: 15px; display: grid; gap: 4px; }
  .saison b { font-weight: 700; }
  .barre { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 16px 0 10px; font-size: 14px; }
  .barre .sous a { display: inline-block; border: 1px solid var(--line); border-radius: var(--o-rayon-doux); padding: 6px 10px; text-decoration: none; margin-right: 6px; font-weight: 600; }
  .barre .sous a[aria-current] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .barre label { color: var(--muted); }
  .barre select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--o-rayon-doux); background: var(--paper); color: var(--ink); }
  .marques[hidden] { display: none; }
  .marques { border: 1px dashed var(--line); border-radius: var(--o-rayon-doux); padding: 8px 12px 10px; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
  .marques legend { color: var(--muted); padding: 0 4px; }
  .marques button { font: 600 14px var(--font-body); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--o-rayon-doux); background: var(--paper); color: var(--ink); cursor: pointer; }
  .marques button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .marques .fine { flex-basis: 100%; }
  /* téléphone : une LISTE (photo à gauche, tout le reste à droite) — chaque réservation tient en 110 px,
     nom, date, prix et état lisibles sans défiler. Ordinateur : une grille de quatre. */
  .liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
  .tuile { display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "img nom" "img quand" "img prix" "img acompte" "img etat"; column-gap: 12px; row-gap: 2px; align-content: start; border-top: 1px solid var(--line); padding-top: 12px; }
  .tuile-lien { display: contents; text-decoration: none; }
  .tuile img { grid-area: img; width: 96px; height: 96px; object-fit: cover; border-radius: var(--o-rayon-doux); border: 1px solid var(--line); display: block; }
  .tuile-nom { grid-area: nom; } .tuile-quand { grid-area: quand; } .tuile-prix { grid-area: prix; } .acompte { grid-area: acompte; } .etat { grid-area: etat; }
  @media (min-width: 700px) {
    .liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
    .tuile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "img" "nom" "quand" "prix" "acompte" "etat"; row-gap: 4px; border-top: 0; padding-top: 0; }
    .tuile img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  }
  @media (min-width: 1024px) { .liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .tuile { min-width: 0; }
  .tuile .etat { white-space: normal; line-height: 1.3; }
  .tuile-nom { font-weight: 700; line-height: 1.25; }
  .tuile-quand { font-size: 13px; color: var(--muted); }
  .tuile-prix { font-size: 18px; font-weight: 700; }
  .acompte { font-size: 13px; color: var(--muted); }
  .etat { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 3px; padding: 3px 6px; width: auto; max-width: 100%; justify-self: start; white-space: normal; border: 1px solid var(--line); color: var(--muted); }
  .etat.ouvert { border-color: var(--ink); color: var(--ink); }
  .etat.ferme { border-style: dashed; }
  .texte { margin-top: 32px; }
  .texte p { max-width: 65ch; margin-bottom: 10px; }
  .grille-basse { display: grid; gap: 28px; margin-top: 32px; }
  @media (min-width: 1024px) { .grille-basse { grid-template-columns: 1fr 1fr; gap: 48px; } }
  /* 11/09, ICKO : les races expliquées sur la catégorie */
  .races { display: grid; gap: 12px; margin-top: 8px; }
  .deux-races { display: grid; gap: 12px; }
  @media (min-width: 640px) { .deux-races { grid-template-columns: 1fr 1fr; } }
  .race { border: 1px solid var(--line); border-radius: var(--o-rayon-doux); background: var(--surface); padding: 12px 14px; }
  .race h3 { margin: 0 0 6px; font-size: 18px; }
  /* 14/09 soir : la bande jaune aux lignes de niveau, pleine largeur, sous les deux blocs qui expliquent */
  html, body { overflow-x: clip; }
  .explications-o { background: transparent; margin-top: 40px; }
  .explications-bande { margin-inline: calc(50% - 50vw); padding: 56px calc(50vw - 50%); display: grid; gap: 18px; }
  .explications-bande .texte, .explications-bande .races { margin: 0; background: var(--o-bloc); border: 0; border-radius: var(--o-rayon-petit); padding: 28px 32px; box-shadow: 0 1px 0 rgba(85,37,19,.15); }
  .explications-bande .race { background: var(--o-cire); border: 0; border-radius: var(--o-rayon-champ); }
  .race p { margin: 0 0 6px; }
/* 24/09 — règles EMPRUNTÉES par machine à univers.html (outils/maquettes/regles_empruntees.py), non retapées */
.o .uv-familles-bande { padding: 60px 0 68px; }
.o .uv-familles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.o .uv-famille { background: var(--bloc); border-radius: var(--o-rayon-plaque); padding: 26px 28px 18px; box-shadow: 0 1px 0 rgba(42,18,9,.12); --fond-picto: var(--o-creux); }
.o .uv-f-tete { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 10px; }
.o .uv-picto { width: 64px; height: 64px; border-radius: var(--o-rayon-rond); background: var(--creux); display: grid; place-items: center; }
.o .uv-famille h2 { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 25px; line-height: 1.15; color: var(--brun); }
.o .uv-rayons { list-style: none; margin: 0; padding: 0; }
.o .uv-rayons li { border-top: 1px solid var(--trait); }
.o .uv-rayons a { display: grid; grid-template-columns: 14px minmax(0, 1fr) 18px; gap: 14px; align-items: center; min-height: 50px; padding: 6px 4px; text-decoration: none; color: var(--encre); font-size: 16.5px; font-weight: 600; }
.o .uv-rayons a svg:last-child { color: var(--ambre); transition: transform .15s; }
.o .uv-rayons a:hover span { color: var(--brun); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.o .uv-rayons a:hover svg:last-child { transform: translateX(3px); color: var(--brun); }
.o .uv-puce { width: 14px; height: 14px; flex: none; color: var(--brun); }
@media (max-width: 960px) { .o .uv-familles { grid-template-columns: 1fr; gap: 16px; } .o .uv-familles-bande { padding: 44px 0 50px; } .o .uv-famille { padding: 20px 20px 12px; } .o .uv-famille h2 { font-size: 22px; } .o .uv-f-tete { grid-template-columns: 56px minmax(0, 1fr); } .o .uv-picto { width: 56px; height: 56px; } }
/* 24/09 — règles EMPRUNTÉES par machine à marque-konigin.html (outils/maquettes/regles_empruntees.py), non retapées */
.o .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .k-questions { padding-top: 36px; display: grid; gap: 22px; }
.o .k-q-ligne { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: stretch; }
.o .k-q-tete { display: grid; align-content: center; gap: 8px; }
.o .k-q-tete h2 { margin: 0; font-size: 27px; line-height: 1.12; color: var(--brun); letter-spacing: -.012em; }
.o .k-q-num { width: 30px; height: 30px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brun); color: var(--sur-brun); border-radius: var(--o-rayon-rond); }
.o .k-choix-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.o .k-choix-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.o .k-choix { font: inherit; text-align: left; cursor: pointer; border: 0; border-radius: var(--o-rayon-petit); padding: 16px 18px; display: flex; gap: 16px; align-items: center; color: var(--brun);
  background: var(--o-bloc); box-shadow: inset 0 0 0 1px rgba(227,214,180,.8); transition: box-shadow .15s, background-color .15s; }
.o .k-choix:hover { box-shadow: inset 0 0 0 2px var(--ambre); }
.o .k-choix:focus-visible { outline: 3px solid var(--brun); outline-offset: 2px; }
.o .k-choix-v { flex-direction: column; align-items: flex-start; }
.o .k-choix-txt { display: grid; gap: 4px; }
.o .k-choix-txt b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; color: var(--brun); line-height: 1.1; }
.o .k-choix-txt span { font-size: 14px; color: var(--second); line-height: 1.45; }
.o .k-choix-txt em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--encre); margin-top: 4px; }
.o .k-q-tete { align-content: start; padding-top: 6px; }
.o .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .km-compte { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--second); }
.o .km-compte b { color: var(--encre); font-size: 16px; }
.o .km-choisir { padding-top: 60px; padding-bottom: 50px; }
.o .km-choisir .k-questions { padding-top: 4px; }
.o .k-q-tete h3 { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 25px; line-height: 1.15; color: var(--brun); }
.o a.k-choix { text-decoration: none; }
.o .km-gamme { padding: 64px 0 60px; background: var(--cire); }
.o .km-chemin { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.o .km-etape { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
.o .km-etape::before { content: ""; position: absolute; left: 25px; top: 0; bottom: -14px; width: 2px; background: repeating-linear-gradient(180deg, rgba(170,121,43,.55) 0 6px, transparent 6px 11px); }
.o .km-etape:last-child::before { bottom: 50%; }
.o .km-etape-num { position: relative; z-index: 1; align-self: start; margin-top: 26px; width: var(--o-taille-geste); height: var(--o-taille-geste); display: grid; place-items: center; background: var(--jaune); color: var(--nuit);
  font-weight: 800; font-size: 19px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .km-etape-carte { display: grid; grid-template-columns: 116px minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; align-items: start; background: var(--bloc); border-radius: var(--o-rayon-carte); padding: 20px 26px 16px 18px;
  box-shadow: 0 0 0 1px rgba(227,214,180,.9); }
.o .km-etape-img { width: 116px; height: 116px; display: grid; place-items: center; background: var(--o-bloc); }
.o .km-etape-img img { width: 108px; height: 108px; object-fit: contain; mix-blend-mode: multiply; }
.o .km-etape h3 { margin: 2px 0 4px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 26px; line-height: 1.12; color: var(--brun); }
.o .km-sous { margin: 0 0 10px; font-size: 15px; color: var(--second); }
.o .km-etape-tete .lien-brun { font-size: 14.5px; display: inline-block; padding: 8px 0; }
.o .km-etape .km-lignes li:first-child { border-top: 0; }
@media (max-width: 960px) { .o .km-etape { grid-template-columns: 1fr; } .o .km-etape::before, .o .km-etape-num { display: none; } .o .km-etape-carte { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 18px; } .o .km-etape-img, .o .km-etape-img img { width: 84px; height: 84px; } .o .km-etape .km-lignes { grid-column: 1 / -1; } .o .km-etape h3 { font-size: 22px; } .o .k-q-ligne { grid-template-columns: 1fr; gap: 12px; } .o .k-choix-2, .o .k-choix-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .o .k-choix-2, .o .k-choix-4, .o .k-aide-res, .o .km-types { grid-template-columns: 1fr; } }


/* ═══ L'HABILLAGE (temps ⑤) — vient après le fil de fer, ne touche ni aux blocs ni aux mots ═══ */
:root {
  --color-papier: #F4ECD6;
  --color-surface: #FDF9F0;
  --color-encre: #2A2117;
  --color-gris: #534839;
  --color-trait: #DCCFAE;
  --color-accent: #8F6420;
  --color-accent-fort: #674616;
  --color-sur-accent: #FDF9F0;
  --color-ferme: #635B50;
  --color-ferme-fond: #ECE4CF;
  --color-sombre: var(--o-brun);
  --color-sur-sombre: #F4ECD6;
  --color-erreur: #9B2D1B;
  --color-succes: #356024;
  --color-logo-jaune: var(--o-jaune);
  --color-logo-ambre: var(--o-ambre);
  --color-logo-brun: var(--o-brun);
  --color-logo-brun-rouge: #67321B;
  --color-logo-noir: #0A0807;
  --font-titres: "Fraunces", Georgia, "Times New Roman", serif;
  --font-texte: "Commissioner", "Segoe UI", Arial, sans-serif;
  --font-sous: "Commissioner", "Segoe UI", Arial, sans-serif;
  --text-titre: clamp(2rem, 1.2rem + 1.9vw, 3rem);
  --text-titre--line-height: 1.05;
  --text-sous-titre: clamp(1.5rem, 1.1rem + 1vw, 2.125rem);
  --text-sous-titre--line-height: 1.15;
  --text-intertitre: 1.25rem;
  --text-intertitre--line-height: 1.25;
  --text-prix: 2.5rem;
  --text-prix--line-height: 1;
  --text-texte: 1rem;
  --text-texte--line-height: 1.55;
  --text-fine: 0.875rem;
  --text-fine--line-height: 1.55;
  --text-etiquette: 0.75rem;
  --text-etiquette--line-height: 1.3;
  --text-etiquette--letter-spacing: 0.12em;
  --titres-graisse: 700;
  --titres-variation: "opsz" 96, "SOFT" 100, "WONK" 1;
  --sous-style: normal;
  --sous-variation: "slnt" -10;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --radius-doux: 4px;
  --radius-rond: 50%;
  --pan-x: 28px;
  --pan-y: 16px;
  --pan-coupe: polygon(0 var(--pan-y), var(--pan-x) 0, calc(100% - var(--pan-x)) 0, 100% var(--pan-y), 100% 100%, 0 100%);
  --duree-courte: 0ms;
  --duree: 100ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);
  --breakpoint-tuiles: 40rem;
  --breakpoint-large: 64rem;
  --breakpoint-poste: 80rem;
  --fond-page: var(--color-papier);
  --fond-bloc: var(--color-surface);
  --texte: var(--color-encre);
  --texte-second: var(--color-gris);
  --texte-titre: var(--color-sombre);
  --filet: var(--color-trait);
  --bord-champ: var(--color-gris);
  --geste: var(--color-accent);
  --geste-survol: var(--color-accent-fort);
  --sur-geste: var(--color-sur-accent);
  --texte-accentue: var(--color-accent-fort);
  --etat-ouvert: var(--color-accent);
  --etat-ferme: var(--color-ferme);
  --etat-ferme-fond: var(--color-ferme-fond);
  --etat-erreur: var(--color-erreur);
  --etat-succes: var(--color-succes);
  --bande-sombre: var(--color-sombre);
  --sur-bande-sombre: var(--color-sur-sombre);
  --largeur-page: 77.5rem;
  --largeur-lecture: 64ch;
  --tap: 44px;
  --bouton: 52px;
  --trait-fin: 1px;
  --trait-fort: 1.5px;
  --grain: 5%;
  --coulee: 34px;
  --separateur: 420px;
  --patch: 104px;
}

/* 1. les variables du fil de fer prennent les tokens — les trois sélecteurs du fond, pour battre ses blocs sombres (la DA est claire) */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  color-scheme: light;
  --paper: var(--fond-page); --surface: var(--fond-bloc); --ink: var(--texte); --muted: var(--texte-second); --line: var(--filet);
  --accent: var(--geste); --accent-strong: var(--geste-survol); --on-accent: var(--sur-geste);
  --closed: var(--etat-ferme); --closed-bg: var(--etat-ferme-fond); --note: #7A2E8F; --seo: #0B5FA5;
  --font-display: var(--font-titres); --font-body: var(--font-texte); --w-max: var(--largeur-page);
}
/* 2. le papier : le grain de cire, multiplié, sur toute la page ; la police du texte */
body { background-color: var(--fond-page); background-image: url("/o/feuille/994174a5a51e4d3c.svg"); background-blend-mode: multiply; color: var(--texte);
       font-family: var(--font-texte); font-size: var(--text-texte); line-height: var(--text-texte--line-height);
       /* LE PIED COLLE AU BAS. ✏️ 08/09 — trouvé par la planche-contact, mesuré sur les 21 rendus : quatre pages
          plus courtes que la fenêtre laissaient une bande de papier SOUS le pied — 285 px sur `connexion`, 136 sur
          `tunnel-suite`, 112 sur `cadre-commun`, 103 sur la 404. Le pied flottait au milieu du vide, et la page
          avait l'air inachevée. `min-height: 100dvh` (avec `100vh` en repli pour les navigateurs sans `dvh`) plus
          `margin-top: auto` sur le pied : la colonne remplit la fenêtre, le pied est poussé en bas, et rien ne
          bouge sur une page longue — c'est exactement là que `auto` ne fait rien. */
       min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > * { flex: none; }              /* les blocs gardent leur hauteur : seul le pied est poussé */
footer { margin-top: auto; }
/* Une grille de blocs étire chacun à la hauteur de sa rangée. C'est ce qu'on veut pour des tuiles
   comparables — et c'est un trou quand les contenus sont très inégaux. ✏️ 08/09, vu à la
   planche-contact : sur `univers`, « Traitements et protection » (deux rayons) était étiré à la
   hauteur de « Quincaillerie et protection du bois » (quatre rayons), et le tiers bas du bloc
   restait vide. Ici chaque famille prend sa hauteur. Les tuiles de catalogue, elles, gardent leur
   alignement : leurs contenus se ressemblent, et l'aligné y vaut mieux que le libre. */
.familles { align-items: start; }
h1, h2, h3 { font-family: var(--font-titres); color: var(--texte-titre); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); letter-spacing: -0.01em; }
h2 { font-size: var(--text-sous-titre); line-height: var(--text-sous-titre--line-height); margin-bottom: var(--spacing-3); }
@media (min-width: 1024px) { h2 { font-size: var(--text-sous-titre); } }
.titre h1, .decide h1 { font-size: var(--text-sous-titre); line-height: var(--text-sous-titre--line-height); }
@media (min-width: 1024px) { .titre h1 { font-size: var(--text-sous-titre); } }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--texte-accentue); }
:focus-visible { outline: 2px solid var(--texte-accentue); outline-offset: 2px; }
/* les sous-textes : la Commissioner penchée (la charte) */
.when small, .option > span > span, .fine, .photo figcaption, .steps span, .others em, .store dt, .degressif caption, .crumb, footer p, .cookies p { font-family: var(--font-sous); font-style: var(--sous-style); font-variation-settings: var(--sous-variation); }
.eyebrow { font-size: var(--text-etiquette); line-height: 1.45; letter-spacing: var(--text-etiquette--letter-spacing); font-weight: 700; color: var(--texte-second); }
/* 3. l'en-tête : le logo recomposé, les deux outils en icône + mot */
.site { background: var(--fond-bloc); border-bottom: var(--trait-fin) solid var(--filet); }
.site .wrap { height: auto; min-height: 60px; }
.site .mark { display: inline-flex; align-items: center; min-height: var(--tap); }
.site .mark .logo { display: block; height: 34px; width: 135px; }
.site .mark .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 1024px) { .site .wrap { min-height: 68px; } .site .mark .logo { height: 42px; width: 167px; } }
.site nav { gap: var(--spacing-2); font-size: 14px; }
.site nav a { gap: 6px; padding: 0 8px; border-radius: var(--radius-doux); }
.site nav a:hover { color: var(--texte-accentue); }
.site nav a svg { flex: none; }
.crumb { text-transform: none; letter-spacing: 0; font-size: var(--text-fine); color: var(--texte-second); padding-top: var(--spacing-3); }
/* 4. le bloc de décision : la surface crème, le filet, la barre d'ambre en tête (la charte) */
.decide { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); box-shadow: inset 0 3px 0 var(--geste); padding: 20px 20px 18px; }
.when { font-size: var(--text-texte); }
.fine { font-size: var(--text-fine); line-height: var(--text-fine--line-height); }
.photo figcaption, .steps span, .others em, .cookies p, .site nav { font-size: var(--text-fine); }
.closed strong, .faq summary { font-size: var(--text-texte); }
.option { border: var(--trait-fort) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-page); }
.option input { accent-color: var(--geste); width: 16px; height: 16px; margin-top: 4px; }
.option:has(input:checked) { border-color: var(--geste); box-shadow: none; }
.option strong { font-size: var(--text-texte); }
.btn { border: var(--trait-fort) solid var(--geste); border-radius: var(--radius-doux); background: var(--geste); color: var(--sur-geste); font: 600 18px/1 var(--font-texte); height: var(--bouton); transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); }
.btn:hover { background: var(--geste-survol); border-color: var(--geste-survol); color: var(--sur-geste); }
.btn.secondary { background: transparent; color: var(--texte); border-color: var(--texte); }
.btn.secondary:hover { background: var(--fond-bloc); color: var(--texte); }
.degressif { width: 100%; border-collapse: collapse; font-size: var(--text-fine); margin-top: var(--spacing-3); }
.degressif caption { text-align: left; color: var(--texte-second); padding-bottom: 4px; }
.degressif th, .degressif td { text-align: right; padding: 6px 8px; border-top: var(--trait-fin) solid var(--filet); }
.degressif th { color: var(--texte-second); font-weight: 600; font-size: var(--text-etiquette); letter-spacing: var(--text-etiquette--letter-spacing); text-transform: uppercase; }
.degressif td.num { font-weight: 600; }
.closed { background: var(--etat-ferme-fond); border: var(--trait-fin) solid var(--etat-ferme); border-radius: var(--radius-doux); }
.closed input { border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-bloc); font: 400 16px/1.4 var(--font-texte); }
.closed input:focus-visible { border-color: var(--texte-accentue); outline: 0; }
/* 5. la photo : le coin doux, le patch (un fait vrai, un seul) */
.photo { position: relative; }
.photo img { border-radius: var(--radius-doux); background: var(--fond-bloc); }
/* la photo principale passe par la règle de Marlenka : détourée sur la surface si le blanc part des quatre coins, sinon rognée de ses marges */
.cadre-photo { display: block; position: relative; overflow: hidden; border-radius: var(--radius-doux); background: var(--fond-bloc); }
.cadre-photo img { border-radius: var(--o-rayon-net); }   /* les marges blanches sont rognées à la construction (detourer_photo) : plus de cadrage à la main */
/* LE PAN COUPÉ — les deux coins du haut rabattus à la pente de l'arête de l'hexagone (16/28 = 0,571 ; tan 30° = 0,577).
   Ruben, 08/09 : « prends le badge blanc-cire et le pan coupé, applique-les ».
   Il est posé sur TOUTES LES IMAGES, à deux tailles : 28/16 sur les grandes, 14/8 sur les vignettes de 96 px — la même
   pente, jamais la même longueur, sinon le pan mange le sujet. Les blocs de texte gardent leur rayon de 4 px : un
   clip-path sur un bloc bordé couperait son filet en biais et laisserait le contenu s'échapper dans les angles.
   Le clip passe APRÈS le border-radius : les deux coins du BAS gardent leurs 4 px. */
.cadre-photo, .photo > img, .tuile img { clip-path: var(--pan-coupe); }
.tuile img { --pan-x: 14px; --pan-y: 8px; }
/* Les images qui portaient un FILET le gardent — mais peint en bordure transparente, sinon le clip le trancherait en
   biais et les deux pans resteraient nus. La couche du dedans garde le fond de l'image (blanc pour les packshots). */
.photo.detouree .cadre-photo, .photo.blanc .cadre-photo, .tuile img {
  border: var(--trait-fin) solid transparent;
  background: linear-gradient(var(--fond-image, var(--fond-bloc)), var(--fond-image, var(--fond-bloc))) padding-box,
              linear-gradient(var(--filet), var(--filet)) border-box; }
.photo.blanc .cadre-photo, .tuile.blanc img { --fond-image: var(--o-bloc); }
.photo.detouree .cadre-photo, .photo.blanc .cadre-photo { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); }
.photo.detouree img, .photo.blanc img { object-fit: contain; padding: 5%; background: transparent; }
.photo.blanc img { background: var(--o-bloc); padding: 0; }
.photo.blanc .cadre-photo { background: var(--o-bloc); }   /* 07/09 : sinon le letterbox du packshot laisse une bande crème au-dessus de la photo */   /* le packshot qu'on n'a pas su détourer garde son blanc, cerclé du filet — le repli des tuiles */
.photo .patch-pose { position: absolute; left: 12px; top: 12px; line-height: 0; }
@media (min-width: 1024px) { .photo .patch-pose { left: 16px; top: 16px; } }
/* 6. les cadres : le miel du logo, pas un gris */
.frames span { border-radius: var(--radius-doux); background: var(--fond-bloc); border-color: var(--filet); font-size: var(--text-etiquette); letter-spacing: .06em; font-weight: 600; }
.frames .couvain { background: color-mix(in srgb, var(--color-logo-ambre) 32%, var(--fond-bloc)); color: var(--texte); border-color: transparent; }
.frames .reserves { background: color-mix(in srgb, var(--color-logo-jaune) 34%, var(--fond-bloc)); color: var(--texte); border-color: transparent; }
.frames .chantier { background: transparent; border-style: dashed; }
.list li::before { background: var(--texte-accentue); width: 9px; height: 10px; border-radius: var(--o-rayon-net); top: .5em; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* 7. les trois temps, les questions, les autres dates */
.steps li::before { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); color: var(--texte-accentue); font-size: var(--text-intertitre); }
.faq details { border-top-color: var(--filet); }
.faq summary::after { color: var(--texte-accentue); font-size: 22px; line-height: 1; }
.faq .filet-goutte { display: block; width: 100%; max-width: var(--separateur); height: 16px; margin: 0 auto var(--spacing-6); color: var(--geste); }
.others li { border-top-color: var(--filet); }
.others .num { font-weight: 600; }
.store dl { row-gap: 6px; }
.store .btn.secondary { height: var(--tap); line-height: calc(var(--tap) - 4px); }
/* 8. la barre collée, les cookies : la surface crème */
.barre-geste { background: var(--fond-bloc); border-top-color: var(--filet); }
.barre-geste .btn { height: var(--tap); }
.cookies { background: var(--fond-bloc); border-top-color: var(--filet); }
.cookies button { font: 600 14px var(--font-texte); border-radius: var(--radius-doux); border: var(--trait-fort) solid var(--texte); }
.cookies button:hover { background: var(--fond-page); }
/* 9. le pied : la bande brune avec le logo en crème, et le miel qui coule dessous */
footer { border-top: 0; padding: 0 0 110px; font-size: var(--text-fine); color: var(--sur-bande-sombre); }
footer .bande { background: var(--bande-sombre); color: var(--sur-bande-sombre); padding: var(--spacing-8) 0 var(--spacing-6); }
footer .bande .wrap { display: grid; gap: var(--spacing-4); }
@media (min-width: 1024px) { footer .bande .wrap { grid-template-columns: auto 1fr; align-items: center; gap: var(--spacing-12); } }
footer .bande .logo { display: block; height: 40px; width: 159px; }
footer .bande p { color: color-mix(in srgb, var(--sur-bande-sombre) 78%, var(--bande-sombre)); }
footer nav { gap: var(--spacing-4); margin-top: var(--spacing-2); }
footer nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--sur-bande-sombre); }
footer nav a:hover { color: var(--color-logo-jaune); }
footer .coulee-miel { display: block; width: 100%; height: var(--coulee); color: var(--bande-sombre); }
/* 07/09 : le pied à quatre colonnes du cadre commun, sur la même bande — titres en jaune, liens et adresse en crème, la lettre sur papier */
footer .bande h2 { color: var(--color-logo-jaune); }
footer .bande address, footer .bande li, footer .bande .fine, footer .bande label, footer .bande .bas, footer .bande a, footer .bande .bas button { color: var(--sur-bande-sombre); }
footer .bande ul a:hover { color: var(--color-logo-jaune); }
footer .bande .lettre input { background: var(--paper); color: var(--ink); border-color: transparent; }
footer .bande .lettre button { color: var(--sur-bande-sombre); border-color: var(--sur-bande-sombre); background: transparent; }
footer .bande .bas { border-top-color: color-mix(in srgb, var(--sur-bande-sombre) 30%, transparent); }
footer .bande .colonnes { margin-top: var(--spacing-4); }
/* 10. la lisibilité — Ruben, 06/09 : « pas agréable à lire, pas assez de différence de couleur, l'important en gras ».
   Trois leviers : le brun des titres sur tout ce qui est important, le jaune du logo comme surligneur et comme fond de l'option
   choisie, les sous-textes droits (l'oblique reste aux légendes et aux lignes fines). */
.eyebrow { color: var(--texte-accentue); }
h2::after { content: ""; display: block; width: var(--o-taille-touche); height: 3px; background: var(--geste); margin-top: 8px; }
b, strong { font-weight: 700; color: var(--texte-titre); }
.maquette b, .seo-panel b, .note b, .cookies b { color: inherit; }
/* 🔴 MESURÉ le 12/09 : `<b>ApiSaveurs — Ondrasik Apiculture</b>` dans l'adresse du pied ressortait
   BRUN SUR BRUN — 1,00 : 1, c'est-à-dire INVISIBLE. `b, strong` pose le brun des titres partout ;
   sur la bande sombre, ce brun EST le fond. Sur un fond sombre, un gras hérite, il ne se recolore pas. */
footer .bande b, footer .bande strong, .barre-sombre b { color: inherit; }
/* l'en-tete n'est pas dans `main` : la permission de retrecir du §26 ne l'atteint pas, et le
   panier poussait la page de 2 px a 375. Mesure de `verifier_debordements.py`, 12/09. */
/* ⚠️ seulement le CONTENEUR : donne aussi aux enfants, elle laissait « Panier » sortir de son
   bouton de 10 px. Un conteneur a le droit de retrecir ; ce qu'il contient, non. */
.site .wrap { min-width: 0; }
.when small, .option > span > span, .steps span, .others em, .store dt, .degressif caption { font-style: normal; font-variation-settings: normal; color: var(--texte-second); }
.decide { border-color: color-mix(in srgb, var(--filet) 55%, var(--texte-second)); box-shadow: inset 0 4px 0 var(--geste), 0 10px 28px -18px rgba(42, 33, 23, .45); }
.when { font-size: 17px; line-height: 1.5; }
.when strong { color: var(--texte-titre); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--color-logo-jaune) 55%, transparent) 58%); padding: 0 2px; }
.option { border-color: color-mix(in srgb, var(--filet) 55%, var(--texte-second)); }
.option strong { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: 22px; line-height: 1.15; color: var(--texte-titre); }
.option > span > span { font-size: var(--text-fine); margin-top: 2px; }
.option:has(input:checked) { background: color-mix(in srgb, var(--color-logo-jaune) 22%, var(--fond-bloc)); border-color: var(--geste); box-shadow: inset 0 0 0 1px var(--geste); }
.chiffre, .steps b.chiffre { display: inline; font-weight: 700; color: var(--texte); }   /* le fond met .steps b en bloc : on le bat en specificite */
.degressif td.num { color: var(--texte-titre); font-size: var(--text-texte); }
.btn { font-weight: 700; font-size: 19px; letter-spacing: .01em; }
.frames span { color: var(--texte); font-weight: 700; }
.list li b, .steps b, .others a, .store address b { color: var(--texte-titre); font-weight: 700; }
.steps li { align-items: start; }
.steps li::before { font-size: var(--text-sous-titre); line-height: 1; margin-top: -2px; }
.faq summary { font-weight: 700; color: var(--texte-titre); }
.faq summary::after { font-size: 26px; }
.others .num { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-intertitre); color: var(--texte-titre); }
.store dd { font-weight: 600; }
.store dd i { font-weight: 400; color: var(--texte-second); font-style: normal; }
.barre-geste b { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: 22px; color: var(--texte-titre); }
.prix { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-prix); line-height: var(--text-prix--line-height); color: var(--texte-titre); }
.prix b { color: var(--texte-titre); }
.prix small { font-family: var(--font-texte); font-size: var(--text-fine); color: var(--texte-second); font-weight: 400; }
.fine a, .when a, .list a, .store a { color: var(--texte-accentue); text-decoration-color: var(--geste); font-weight: 600; }
.barre-geste .fine .chiffre { font-family: inherit; font-size: inherit; font-weight: 700; color: var(--texte); }   /* le total reste une mention fine, en gras */
/* 11. l'en-tête et les blocs du bas — Ruben, 06/09 : « les boutons rechercher et panier sont basiques », « ce qu'on nous demande est un peu
   chiant, pas un jeu de couleurs ? et les autres ? ». Le champ de recherche visible sur ordinateur (la recherche interne est la deuxième
   page la plus vue du site), le panier en bouton bordé ; l'alvéole pleine d'ambre comme marqueur (le numéro d'un temps, le + d'une
   question) ; les questions et les autres dates en rangées sur surface, jaunies au survol et à l'ouverture ; le magasin sur surface. */
.site .outils { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-2); }
.site .recherche { display: none; position: relative; }
.site .recherche input { width: 300px; min-height: var(--tap); padding: 0 46px 0 14px; border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); font: 400 15px var(--font-texte); color: var(--texte); }
.site .recherche input::placeholder { color: var(--texte-second); }
.site .recherche input:focus-visible { border-color: var(--texte-accentue); outline: 0; }
.site .recherche button { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 42px; min-height: 0; border: 0; background: transparent; color: var(--texte-accentue); display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-doux); }
.site .recherche button:hover { background: color-mix(in srgb, var(--color-logo-jaune) 25%, transparent); }
.site .recherche-bouton, .site .panier { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); padding: 0 12px; border-radius: var(--radius-doux); text-decoration: none; font-weight: 700; font-size: 15px; color: var(--texte-titre); }
.site .recherche-bouton { justify-content: center; padding: 0; }
.site .panier { border: var(--trait-fort) solid var(--texte-titre); background: var(--fond-page); transition: background-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe); }
.site .panier:hover { background: var(--texte-titre); color: var(--fond-page); }
.site .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 1024px) { .site .recherche { display: block; } .site .recherche-bouton { display: none; } }
/* 11/09, Jan : la porte du compte, entre la recherche et le panier — le pictogramme seul sur téléphone, les mots dès 640 px */
.site .compte { position: relative; }
.site .compte > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); padding: 0 10px; border-radius: var(--radius-doux); font-weight: 700; font-size: 15px; color: var(--texte-titre); cursor: pointer; }
.site .compte > summary::-webkit-details-marker { display: none; }
.site .compte > summary:hover, .site .compte[open] > summary { background: color-mix(in srgb, var(--color-logo-jaune) 25%, transparent); }
.site .compte .mot-large { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site .compte ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; list-style: none; margin: 0; padding: 6px; min-width: 220px; display: grid; gap: 2px; background: var(--fond-page); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); }
.site .compte ul a { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-doux); text-decoration: none; color: var(--texte-titre); font-weight: 600; }
.site .compte ul a:hover { background: color-mix(in srgb, var(--color-logo-jaune) 25%, transparent); }
@media (min-width: 640px) { .site .compte .mot-large { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
/* 11/09, la barre de services d'ICKO, dans la bande brune : l'aide, et l'espace pro en pastille jaune */
.site .services-haut { background: var(--bande-sombre); color: var(--sur-bande-sombre); font-size: 14px; }
.site .services-haut .wrap { display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-4); min-height: 0; height: auto; padding-top: 0; padding-bottom: 0; }
.site .services-haut a { display: inline-flex; align-items: center; min-height: var(--tap); color: inherit; text-decoration: none; font-weight: 600; }
.site .services-haut a:hover { text-decoration: underline; }
.site .services-haut .espace-pro { min-height: 32px; padding: 0 12px; margin: 6px 0; border-radius: var(--radius-doux); background: var(--color-logo-jaune); color: var(--color-logo-brun); font-weight: 700; }
.site .services-haut .espace-pro:hover { text-decoration: none; background: var(--fond-page); }
/* les cinq cadres */
.frames span { min-height: 68px; font-size: 11px; letter-spacing: .03em; }
/* les trois temps : le numéro dans une alvéole pleine */
.steps li { grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.steps li::before { width: 36px; height: 40px; display: grid; place-items: center; background: var(--geste); color: var(--sur-geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-size: 20px; margin-top: 0; }
/* les questions : des rangées sur surface, l'alvéole en +, jaunies à l'ouverture */
.faq details { border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-bloc); padding: 0; margin-bottom: 8px; transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); }
.faq details:last-of-type { border-bottom: var(--trait-fin) solid var(--filet); }
.faq summary { padding: 10px 12px 10px 14px; align-items: center; font-size: var(--text-texte); }
.faq summary:hover { color: var(--texte-accentue); }
.faq summary::after { content: "+"; width: 28px; height: 32px; display: grid; place-items: center; background: var(--geste); color: var(--sur-geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-size: 22px; line-height: 1; flex: none; font-family: var(--font-texte); }
.faq details[open] { border-color: var(--geste); background: color-mix(in srgb, var(--color-logo-jaune) 12%, var(--fond-bloc)); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 14px 14px; padding-left: 12px; border-left: 3px solid var(--geste); max-width: none; }

/* les autres dates : des rangées sur surface, le prix en ambre fort, jaunies au survol */
.others li { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 10px 14px; margin-bottom: 8px; align-items: center; transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); }
.others li:last-child { border-bottom: var(--trait-fin) solid var(--filet); }
.others li:hover { background: color-mix(in srgb, var(--color-logo-jaune) 12%, var(--fond-bloc)); border-color: var(--geste); }
.others li:hover a { color: var(--texte-accentue); }
.others .num { color: var(--texte-accentue); }
/* le magasin : sur surface, les horaires en rangées */
.store { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 18px 18px 16px; align-self: start; }
.store dl { border-top: var(--trait-fin) solid var(--filet); padding-top: 8px; row-gap: 0; }
.store dt, .store dd { padding: 5px 0; border-bottom: var(--trait-fin) solid color-mix(in srgb, var(--filet) 60%, transparent); }
/* 12. le brun et le jaune — Ruben, 06/09 : « comment ça se passe n'est pas bien lisible · le bouton Réserver n'est pas bien mis · jouer
   plus sur le marron et les jaunes, sans être moche ni too much ». Un liseré jaune en tête de page ; le bloc de décision ne s'étire plus
   sous son bouton ; LES TROIS TEMPS SUR BRUN (le seul bloc sombre de la page hors pied : crème sur brun 11 : 1, les numéros en jaune),
   ce qui répond aux deux premiers retours d'un coup. */
.site { border-top: 4px solid var(--color-logo-jaune); }
.decide { align-self: start; }
.decide .degressif { margin-top: var(--spacing-4); }
.steps:not(.texte) { background: var(--bande-sombre); color: var(--sur-bande-sombre); border-radius: var(--radius-doux); padding: 18px 18px 18px; align-self: start; }
.steps:not(.texte) h2 { color: var(--color-logo-jaune); }
.steps:not(.texte) h2::after { background: var(--color-logo-jaune); }
.steps ol { gap: 16px; }
.steps li::before { background: var(--color-logo-jaune); color: var(--bande-sombre); }
.steps:not(.texte) b { color: var(--sur-bande-sombre); font-size: 17px; }
.steps:not(.texte) span { color: var(--sur-bande-sombre); font-size: 15px; line-height: 1.5; }   /* 07/09 : le melange a 86 % faisait une nuance de creme de plus, invisible (A-6) */
.steps:not(.texte) .chiffre, .steps:not(.texte) b.chiffre { color: var(--color-logo-jaune); }

/* 13. la fiche produit (temps ⑤, page 2) — les classes que la réservation n'a pas : le prix TTC/HT, la disponibilité, la quantité,
   la livraison, la fiche technique, le texte long, les suggestions en tuiles */
.prix .ttc { font-size: inherit; font-weight: inherit; font-family: inherit; }
.prix .ht { font-family: var(--font-texte); font-size: var(--text-fine); font-weight: 400; color: var(--texte-second); }
.dispo { font-size: var(--text-texte); }
.dispo b { color: var(--etat-succes); }
.pro-cta { font-style: normal; font-variation-settings: normal; }
.qte-label { font-size: var(--text-fine); color: var(--texte-second); font-weight: 600; margin-top: var(--spacing-3); }
.qte { border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); }
.qte button { color: var(--texte-accentue); font: 700 20px var(--font-texte); }
.qte button:hover { background: color-mix(in srgb, var(--color-logo-jaune) 25%, transparent); }
.qte input { font: 700 16px var(--font-texte); color: var(--texte); }
.decide .degressif { border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-page); margin-top: var(--spacing-3); }
.decide .degressif th { border-top: 0; }
.decide .degressif th:first-child, .decide .degressif td:first-child { text-align: left; }
.decide .degressif td.num { color: var(--texte-titre); font-weight: 700; }
.livraison { margin-top: var(--spacing-4); padding-top: var(--spacing-3); border-top: var(--trait-fin) solid var(--filet); font-size: var(--text-fine); gap: 6px; }
.livraison > span { padding-left: 18px; position: relative; }
.livraison > span::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 10px; background: var(--texte-accentue); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.livraison > span.fine::before { display: none; }
#epuise label { font-size: var(--text-fine); color: var(--texte-second); font-weight: 600; }
#epuise input { min-height: var(--tap); padding: 0 12px; border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-bloc); font: 400 16px var(--font-texte); color: var(--texte); }
/* la fiche technique : des rangées filetées, la valeur en gras brun */
.spec dl { grid-template-columns: auto 1fr; gap: 0 var(--spacing-4); }
.spec dt, .spec dd { padding: 7px 0; border-bottom: var(--trait-fin) solid var(--filet); }
.spec dt { color: var(--texte-second); }
.spec dd { color: var(--texte-titre); }
/* le texte long : la lecture — Ruben, 06/09 : « difficile à lire, pas de gras, pas de rappel de couleur, trop monotone, mais cohérent ».
   La même hiérarchie que le reste de la page, rien de nouveau : un chapô, les faits en gras brun, LE fait en encadré sur surface avec
   la barre d'ambre (comme une réponse ouverte), l'intertitre avec l'alvéole pleine (comme un temps), un filet d'ambre sous le H2 */
.texte { font-size: 17px; background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 18px 18px 16px; align-self: start; }   /* Ruben : « dans un cadre, non ? » — comme le magasin */
.texte p { max-width: var(--largeur-lecture); margin-bottom: var(--spacing-3); line-height: 1.65; }
.texte .avantages { margin-bottom: 8px; }
.texte .list { gap: 10px; margin-bottom: var(--spacing-4); max-width: var(--largeur-lecture); }
.texte .list li { display: block; grid-template-columns: none; counter-increment: none; line-height: 1.55; padding-left: 22px; }   /* le fond met .steps li en grille numerotee : le texte long porte la meme classe */
.texte .list li::before { content: ""; position: absolute; left: 0; background: var(--texte-accentue); color: transparent; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-size: 0; }
.texte .list li::before { top: .5em; width: 11px; height: 12px; }
.texte .pas { position: relative; padding-left: 44px; min-height: 40px; }
.texte .pas::before { content: "1"; position: absolute; left: 0; top: 0; width: 32px; height: 36px; display: grid; place-items: center; background: var(--geste); color: var(--sur-geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: 18px; line-height: 1; }
.steps.texte b, .texte b { display: inline; color: var(--texte-titre); }   /* le fond met .steps b en bloc : le texte long porte la meme classe de grille */
.texte .chapo { font-size: 19px; line-height: 1.5; color: var(--texte-titre); }
.texte .fait { background: var(--fond-page); border: var(--trait-fin) solid var(--filet); border-left: 4px solid var(--geste); border-radius: var(--radius-doux); padding: 12px 14px; margin: var(--spacing-4) 0; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.steps.texte span, .texte span { font-size: inherit; color: inherit; }   /* le fond met .steps span en 15 px gris : le texte long porte la meme classe */
.fait-icone { width: 36px; height: 40px; display: grid; place-items: center; background: var(--geste); color: var(--sur-geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }   /* Ruben : « un logo vitesse » — le pictogramme du fait, dans l'alvéole pleine */
.texte .fait b { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-intertitre); color: var(--texte-accentue); }
.texte h3 { display: flex; align-items: center; gap: 10px; }
.texte h3::before { content: ""; flex: none; width: 14px; height: 16px; background: var(--geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.texte h3 { font-family: var(--font-texte); font-size: var(--text-intertitre); font-weight: 700; color: var(--texte-titre); margin: var(--spacing-4) 0 var(--spacing-2); }
.texte p b { color: var(--texte-titre); }
/* les suggestions : quatre tuiles sur surface, le prix en ambre fort, jaunies au survol */
.aussi li { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 12px; transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); }
.aussi li:hover { background: color-mix(in srgb, var(--color-logo-jaune) 12%, var(--fond-bloc)); border-color: var(--geste); }
.aussi a { color: var(--texte-titre); font-weight: 700; }
.aussi .num { color: var(--texte-accentue); font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-intertitre); }
/* 14. la largeur du téléphone — Ruben, sur son téléphone : « Ajouter au panier décalé ». MESURÉ avec la sonde (mesurer_maquette.rendre,
   la seule mesure vraie à 390 px : Edge ignore --window-size, une capture « à 390 » est une page de 500 rognée) : la page ne déborde pas ;
   le bouton d'achat et la quantité sont alignés au pixel. Ce qui clochait : la barre collée, où le prix passait sur deux lignes à 390 px
   (le bouton centré à côté d'un texte cassé), et le cinquième cadre de la réservation qui débordait de 4 px. Les garde-fous restent. */
.grid > * { min-width: 0; }
.degressif { max-width: 100%; overflow-x: auto; }
.decide .degressif th { letter-spacing: .04em; font-size: 11px; padding: 6px 6px; }
.decide .degressif td { padding: 6px 6px; }
form.achat { grid-template-columns: 104px 1fr; }
form.achat .btn { padding: 0 8px; font-size: 17px; height: auto; min-height: var(--bouton); line-height: 1.1; }
.qte { min-height: var(--bouton); }
.barre-geste > span { display: flex; flex-direction: column; line-height: 1.2; gap: 2px; }   /* le prix, puis la mention : deux lignes nettes, jamais un retour au milieu */
.barre-geste b { font-size: 20px; }
.frames { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.frames span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
/* 15. la catégorie (temps ⑤, page 3) — les tuiles par la règle de Marlenka (détourées sur surface, ou cerclées, ou en scène), l'état à
   l'hexagone, la barre des sous-catégories en jetons (l'actif en brun), le tri en champ, les filtres en jetons jaunis, la saison en encadré */
.tete h1 { font-size: var(--text-titre); line-height: var(--text-titre--line-height); margin: 6px 0 10px; }
.tete > p { font-size: 17px; max-width: var(--largeur-lecture); }
.saison { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-left: 4px solid var(--geste); border-radius: var(--radius-doux); gap: 6px; padding: 12px 14px; font-size: var(--text-texte); }
.saison span { position: relative; padding-left: 20px; }
.saison span::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 12px; background: var(--etat-ouvert); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.saison span:last-child::before { background: var(--etat-ferme); opacity: .55; }
.barre { gap: 10px 16px; margin: var(--spacing-4) 0 var(--spacing-3); }
.barre .sous { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.barre .sous a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; margin: 0; border: var(--trait-fort) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-bloc); color: var(--texte-titre); font-weight: 700; }
.barre .sous a:hover { border-color: var(--geste); color: var(--texte-accentue); }
.barre .sous a[aria-current] { background: var(--texte-titre); color: var(--fond-page); border-color: var(--texte-titre); box-shadow: none; }
.barre label { color: var(--texte-second); font-weight: 600; }
.barre select { min-height: var(--tap); padding: 0 10px; border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); color: var(--texte); font: 600 15px var(--font-texte); }
.marques { border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-bloc); padding: 10px 14px 12px; }
.marques legend { color: var(--texte-second); font-weight: 700; font-size: var(--text-etiquette); letter-spacing: var(--text-etiquette--letter-spacing); text-transform: uppercase; }
.marques button { min-height: 40px; padding: 0 12px; border: var(--trait-fort) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-page); color: var(--texte-titre); font: 700 14px var(--font-texte); }
.marques button[aria-pressed="true"] { background: color-mix(in srgb, var(--color-logo-jaune) 30%, var(--fond-bloc)); border-color: var(--geste); box-shadow: none; }
.marques .fine { font-style: normal; font-variation-settings: normal; }
/* les tuiles */
.tuile { border-top-color: var(--filet); }
.tuile img { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); }
.tuile.detouree img { object-fit: contain; padding: 7%; }
.tuile.blanc img { object-fit: contain; background: var(--o-bloc); }
.tuile.scene img { object-fit: cover; }
.tuile-lien:hover .tuile-nom, .tuile-lien:focus-visible .tuile-nom { color: var(--texte-accentue); }
.tuile-nom { color: var(--texte-titre); font-weight: 700; font-size: var(--text-texte); line-height: 1.25; }
.tuile-quand { font-size: var(--text-fine); color: var(--texte-second); }
.tuile-prix { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-intertitre); color: var(--texte-titre); }
.acompte { font-size: var(--text-fine); color: var(--texte-second); }
.etat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-etiquette); font-weight: 700; letter-spacing: var(--text-etiquette--letter-spacing); text-transform: uppercase; border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 4px 8px; color: var(--texte-second); margin-top: 2px; }
.etat svg { width: 11px; height: 12px; flex: none; }
.etat.ouvert { background: var(--etat-ouvert); color: var(--sur-geste); border-color: var(--etat-ouvert); }
.etat.ferme { border-style: dashed; color: var(--texte-second); }   /* 07/09 : --etat-ferme etait a 3 % du gris de texte — invisible, et une couleur de plus (A-6) */
@media (min-width: 700px) { .liste { gap: var(--spacing-8) var(--spacing-6); } }
.grille-basse { margin-top: var(--spacing-12); }
/* 16. l'accueil (temps ⑤, page 4) — la seule page où la matière réservée à l'accueil entre : la trame d'alvéoles en relief fondue
   derrière le bloc de saison, le sceau à côté du titre sur ordinateur, le filigrane derrière Jan ; les univers en rangées, Königin sur
   surface avec la machine détourée, le magasin sur surface */
.saison-bloc { position: relative; overflow: hidden; background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); box-shadow: inset 0 4px 0 var(--geste); padding: 22px 20px 20px; gap: 12px; }
.saison-bloc > * { position: relative; z-index: 2; }
.saison-bloc .fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.saison-bloc .trame svg { width: 100%; height: 100%; display: block; }
.saison-bloc .trame { -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 30%, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 90% at 85% 30%, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%); opacity: .9; }
.saison-bloc .trame .lumiere { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--fond-bloc) 85%, transparent) 50%, transparent 100%); mix-blend-mode: screen; animation: passage 22s linear infinite; }
@keyframes passage { 0% { transform: translateX(0); } 100% { transform: translateX(440%); } }
@media (prefers-reduced-motion: reduce) { .saison-bloc .trame .lumiere { animation: none; display: none; } }
.saison-bloc .sceau-pose { display: none; }
@media (min-width: 1024px) { .saison-bloc .sceau-pose { display: block; position: absolute; right: 20px; top: 18px; z-index: 1; } .saison-bloc h1, .saison-bloc .eyebrow { padding-right: 150px; } }
.saison-bloc .sceau { display: block; }
.saison-bloc h1 { font-size: var(--text-sous-titre); line-height: var(--text-sous-titre--line-height); }
.saison-bloc p { font-size: 17px; line-height: 1.55; max-width: var(--largeur-lecture); }
/* 08/09, Ruben : « le bouton voir la miellerie, le texte est mal centré ». En inline-flex avec une hauteur
   imposée, `align-items` vaut `stretch` par défaut : le texte devient un bloc de toute la hauteur et se pose
   EN HAUT. Il faut le centrer explicitement — comme le fait déjà `.konigin .gestes .btn`. */
.saison-bloc .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; height: var(--bouton); line-height: 1; padding: 0 20px; }
.saison-bloc .fine { font-size: var(--text-fine); line-height: var(--text-fine--line-height); }
.magasin { font-size: var(--text-texte); gap: 8px; }
@media (min-width: 1024px) { .magasin { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 20px 20px 18px; align-self: start; } }
@media (max-width: 1023px) { .magasin { border-top-color: var(--filet); } }
.magasin b { color: var(--texte-titre); }
.konigin { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 20px; gap: 14px; }
.konigin img { border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-page); }
.konigin.detouree img, .konigin.blanc img { object-fit: contain; padding: 4%; }
.konigin.blanc img { background: var(--o-bloc); }
.konigin .droite p:first-child { font-size: 17px; line-height: 1.55; }
.konigin .familles li { border-top-color: var(--filet); gap: 4px; }
.konigin .familles b { font-size: var(--text-etiquette); letter-spacing: var(--text-etiquette--letter-spacing); text-transform: uppercase; color: var(--texte-accentue); font-weight: 700; }
.konigin .familles a { color: var(--texte-titre); font-weight: 600; display: block; line-height: 1.3; }
.konigin .familles a:hover { color: var(--texte-accentue); }
.konigin .familles em { display: block; color: var(--texte-second); font-size: var(--text-fine); font-weight: 400; }
.konigin .gestes .btn { display: inline-flex; align-items: center; height: var(--tap); line-height: 1; padding: 0 16px; font-size: 16px; }
.btn.second { background: transparent; color: var(--texte); border: var(--trait-fort) solid var(--texte); }
.btn.second:hover { background: var(--fond-bloc); color: var(--texte); border-color: var(--texte); }
@media (min-width: 1024px) { .konigin .familles li { border-left-color: var(--geste); border-left-width: 3px; } }
.univers li { border-top: 0; background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); margin-bottom: 8px; transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); }
.univers li:last-child { border-bottom: var(--trait-fin) solid var(--filet); }
.univers li:hover { background: color-mix(in srgb, var(--color-logo-jaune) 12%, var(--fond-bloc)); border-color: var(--geste); }
.univers a { padding: 12px 14px; color: var(--texte-titre); font-weight: 700; flex-direction: column; gap: 2px; align-items: flex-start; }
.univers li:hover a { color: var(--texte-accentue); }
.univers em { font-size: var(--text-fine); color: var(--texte-second); }
.jan { position: relative; overflow: hidden; background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 20px; align-self: start; }
.jan > * { position: relative; z-index: 1; }
.jan .fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jan .filigrane { right: -12%; top: 50%; left: auto; width: 52%; transform: translateY(-50%); opacity: .09; mix-blend-mode: multiply; }
.jan .filigrane svg { width: 100%; height: auto; display: block; }
.jan img { border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); }
.jan h2 { font-size: var(--text-intertitre); line-height: 1.3; }
.jan p { font-size: var(--text-texte); }
/* 17. LES BLOCS DES DIX-SEPT AUTRES PAGES — Ruben, 07/09 : « les sous-titres n'ont pas de typo · les mots sont mal espacés ·
   pas de gras, difficile à lire · les textes trop serrés · il faudrait des cadres · les encarts ne ressortent pas du décor ».
   Aucun mot ne bouge : ces blocs étaient restés en fil de fer, faute d'être connus du module. Même vocabulaire que les quatre
   premières pages — la surface crème et son filet, l'alvéole d'ambre, le brun des titres, le jaune au survol, l'air. */

/* 17.1 le rythme : partout où la page se lit */
.article p, .article li, .offre li, .faits li, .niveau p, blockquote.jan p, .machine, .item, .avant li { line-height: 1.65; }
.familles, .faits, .deux, .refs, .produits { column-gap: var(--spacing-8); }
.familles { gap: var(--spacing-4) var(--spacing-8); }
.faits, .deux, .refs { gap: var(--spacing-3) var(--spacing-8); }

/* 17.2 l'appel au tarif pro — Ruben : « il faut que le truc pour pro ressorte comme une promo, une réduction » */
.pro-cta { display: block; position: relative; margin-top: var(--spacing-3); padding: 11px 14px 11px 44px;
           background: color-mix(in srgb, var(--color-logo-jaune) 26%, var(--fond-page)); border: var(--trait-fort) solid var(--geste);
           border-radius: var(--radius-doux); font-size: var(--text-texte); line-height: 1.55; color: var(--texte); }
.pro-cta::before { content: ""; position: absolute; left: 13px; top: 13px; width: 21px; height: 23px; background: var(--geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pro-cta b { color: var(--texte-titre); }
.pro-cta a { color: var(--texte-accentue); font-weight: 700; }

/* 17.3 la page d'univers : les familles en cartes, les rayons en rangées à l'alvéole, les produits à deux colonnes espacées */
.famille { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 16px 16px 12px; }
.famille h2 { font-size: var(--text-intertitre); line-height: 1.25; margin-bottom: 10px; }
.famille h2::after { width: 34px; height: 3px; margin-top: 7px; }
.rayons { gap: 0; font-size: var(--text-texte); }
.rayons a { display: flex; align-items: center; min-height: var(--tap); border: 0; border-radius: var(--o-rayon-net); padding: 6px 6px 6px 22px; position: relative;
            color: var(--texte-titre); font-weight: 600; border-bottom: var(--trait-fin) solid color-mix(in srgb, var(--filet) 65%, transparent); }
.rayons li:last-child a { border-bottom: 0; }
.rayons a::before { content: ""; position: absolute; left: 2px; top: 50%; margin-top: -5px; width: 9px; height: 10px; background: var(--geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.rayons a:hover { color: var(--texte-accentue); background: color-mix(in srgb, var(--color-logo-jaune) 14%, transparent); }
.produits li { border-top: var(--trait-fin) solid var(--filet); padding: 10px 0; font-size: var(--text-texte); align-items: center; gap: var(--spacing-4); }
.produits a { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--texte-titre); font-weight: 600; }
.produits a:hover { color: var(--texte-accentue); }
.produits .num { color: var(--texte-accentue); font-weight: 700; white-space: nowrap; }
/* la vignette : la place de la photo du produit (elle vient de la base au code — 97,6 % des fiches en ont une) */
.vignette { flex: none; display: block; position: relative; width: 46px; height: 46px; border: var(--trait-fin) solid var(--filet);
            border-radius: var(--radius-doux); background: var(--fond-page); }
.vignette::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 20px; margin: -10px 0 0 -9px;
                    background: color-mix(in srgb, var(--geste) 30%, transparent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.res .vignette { width: 56px; height: 56px; }

/* 17.4 la recherche : le champ en tête, les résultats en rangées sur surface */
.champ input { min-height: var(--bouton); border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-bloc); font-size: 17px; color: var(--texte); }
.champ input:focus-visible { border-color: var(--texte-accentue); outline: 0; }
.champ .btn { min-height: var(--bouton); height: var(--bouton); }
.recherche h1 { font-size: var(--text-titre); line-height: var(--text-titre--line-height); }
.res { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 10px 14px; margin-bottom: 8px;
       align-items: center; transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); }
.res:last-child { border-bottom: var(--trait-fin) solid var(--filet); }
.res:hover { background: color-mix(in srgb, var(--color-logo-jaune) 12%, var(--fond-bloc)); border-color: var(--geste); }
.res a { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--texte-titre); font-weight: 700; font-size: 17px; }
.res:hover a { color: var(--texte-accentue); }
.res .fine { white-space: nowrap; align-self: center; }
.vide { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-left: 4px solid var(--geste); border-radius: var(--radius-doux); padding: 18px; gap: 12px; font-size: var(--text-texte); }
.vide b { font-size: 19px; }
.vide li { margin-bottom: 6px; line-height: 1.6; }
.vide a { color: var(--texte-accentue); font-weight: 700; }

/* 17.5 l'espace client — Ruben : « c'est pareil, difficile à lire, il faudrait des cadres » */
.menu a { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; background: var(--fond-bloc); border: var(--trait-fort) solid var(--filet);
          border-radius: var(--radius-doux); color: var(--texte-titre); font-weight: 700; font-size: 15px; }
.menu a:hover { border-color: var(--geste); color: var(--texte-accentue); }
.menu a[aria-current] { background: var(--texte-titre); color: var(--fond-page); border-color: var(--texte-titre); box-shadow: none; }
.cartes { gap: var(--spacing-4); }
.carte { border-top: 0; background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 16px 16px 14px; }
.carte h2 { font-size: var(--text-intertitre); line-height: 1.25; margin-bottom: 6px; }
.carte h2::after { width: 34px; margin-top: 7px; }
.item { border-top: var(--trait-fin) solid var(--filet); padding: 12px 0 10px; font-size: var(--text-texte); row-gap: 6px; align-items: start; }
.item b { color: var(--texte-titre); font-size: 17px; line-height: 1.3; margin-bottom: 2px; }
.item .droite { font-weight: 700; color: var(--texte-titre); }
.item .droite a { display: inline-block; margin-top: 4px; color: var(--texte-accentue); font-weight: 700; }
.item .etat { margin-top: 6px; }
.idents { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--spacing-4); }
.idents dt, .idents dd { padding: 8px 0; border-bottom: var(--trait-fin) solid color-mix(in srgb, var(--filet) 65%, transparent); }
.idents dt { color: var(--texte-second); font-weight: 600; }
.idents dd { color: var(--texte); margin: 0; }
.grille-ref input { min-height: var(--tap); border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); color: var(--texte); }
.grille-ref label { color: var(--texte-second); font-weight: 600; }

/* 17.5bis les paramètres du compte, et la déconnexion qui doit se voir (07/09) */
/* la déconnexion : une sortie, pas une rubrique — sous un filet, en lien discret à pictogramme */
.menu .quitter { margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: var(--trait-fin) solid var(--filet); }
.menu .quitter a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 4px; border: 0;
                   background: transparent; color: var(--texte-second); font-weight: 600; font-size: 15px; }
.menu .quitter a:hover { color: var(--texte-accentue); background: transparent; }
.menu .quitter svg { flex: none; }
.param + .param { margin-top: var(--spacing-4); padding-top: var(--spacing-4); border-top: var(--trait-fin) solid var(--filet); }
.param h3 { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation);
            font-size: var(--text-intertitre); color: var(--texte-titre); margin-bottom: 8px; }
.param label { padding: 9px 0; border-bottom: var(--trait-fin) solid color-mix(in srgb, var(--filet) 65%, transparent); font-size: var(--text-texte); line-height: 1.5; }
.param label:last-of-type { border-bottom: 0; }
.param label input { width: 18px; height: 18px; accent-color: var(--geste); }
.param label b { color: var(--texte-titre); }
.param .btn.secondary { display: inline-flex; align-items: center; width: auto; height: var(--tap); line-height: 1; padding: 0 18px; font-size: 16px; }
.param a { color: var(--texte-accentue); font-weight: 700; }
/* 17.6 la connexion : une porte au centre, deux cartes, le choix particulier / professionnel montré (le fil de fer le cachait) */
.porte { max-width: 640px; margin: 0 auto; gap: var(--spacing-4); padding-top: var(--spacing-6); }
.porte > section { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux);
                   box-shadow: inset 0 4px 0 var(--geste); padding: 22px 22px 20px; }
.porte h1 { font-size: var(--text-sous-titre); line-height: var(--text-sous-titre--line-height); }
.porte .form input { min-height: var(--tap); border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); font-size: 16px; color: var(--texte); }
.porte .form label { color: var(--texte-second); font-weight: 600; font-size: var(--text-fine); }
.porte .options legend { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-family: var(--font-titres);
                         font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-intertitre);
                         color: var(--texte-titre); padding: 0 0 8px; }
.porte .consent { line-height: 1.5; }
.bascule { border-top: var(--trait-fin) solid var(--filet); margin-top: var(--spacing-2); padding-top: var(--spacing-3); font-size: var(--text-texte); color: var(--texte); line-height: 1.6; }
.bascule a { color: var(--texte-accentue); font-weight: 700; }

/* 17.7 le parrainage — Ruben : « pas de mot en gras pour faciliter la lecture ». Les deux offres en cartes à barre d'ambre,
   la parole de Jan en encadré, les sept références en rangées */
.offre { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-left: 4px solid var(--geste); border-radius: var(--radius-doux); padding: 16px 18px 14px; }
.offre h2 { font-size: var(--text-intertitre); line-height: 1.25; margin-bottom: 8px; }
.offre h2::after { width: 30px; margin-top: 6px; }
.offre ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: var(--text-texte); }
.offre li { position: relative; margin: 0; padding-left: 22px; }
.offre li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 11px; background: var(--texte-accentue); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.offre li b { color: var(--texte-titre); }
.demande input, .demande select { min-height: var(--tap); border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); color: var(--texte); }
.demande label { color: var(--texte-second); font-weight: 600; }
blockquote.jan { margin: var(--spacing-4) 0; padding: 16px 18px; background: var(--fond-page); border: var(--trait-fin) solid var(--filet);
                 border-left: 4px solid var(--geste); border-radius: var(--radius-doux); font-size: 18px; line-height: 1.6; color: var(--texte-titre); max-width: none; }
blockquote.jan p { margin-bottom: var(--spacing-3); }
blockquote.jan p:last-of-type { margin-bottom: 0; }
blockquote.jan b { color: var(--texte-accentue); }
blockquote.jan cite { color: var(--texte-second); font-weight: 600; font-size: var(--text-fine); margin-top: 10px; }
.refs li { border-top: 0; padding-top: 0; font-size: var(--text-texte); }
.refs li a { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 10px 12px; min-height: var(--tap);
             transition: background-color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe); }
.refs li a:hover { background: color-mix(in srgb, var(--color-logo-jaune) 12%, var(--fond-bloc)); border-color: var(--geste); }
.refs b { color: var(--texte-titre); font-weight: 700; line-height: 1.3; }
.refs .n { color: var(--texte-second); font-size: var(--text-fine); }
.refs .logo { border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); background: var(--fond-page); color: var(--texte-second); font-weight: 700; }

/* 17.8 les stages — Ruben : « les espaces entre les lignes sont trop serrés, le visuel est difficile à lire » */
.sessions { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); font-size: var(--text-texte); margin: 10px 0 6px; }
.sessions th { background: var(--fond-page); color: var(--texte-second); font-size: var(--text-etiquette); letter-spacing: var(--text-etiquette--letter-spacing); padding: 10px 12px; }
.sessions td { padding: 14px 12px; border-top-color: var(--filet); line-height: 1.5; }
.sessions td:first-child { font-weight: 700; color: var(--texte-titre); white-space: nowrap; }
.sessions .exemple { display: inline-block; margin-top: 4px; }
.decide:has(.sessions) { container-type: inline-size; }
@container (max-width: 460px) {
  .sessions, .sessions tbody, .sessions tr, .sessions td { display: block; width: 100%; }
  .sessions thead { display: none; }
  .sessions tr { border-top: var(--trait-fin) solid var(--filet); padding: 12px 12px 14px; }
  .sessions tbody tr:first-child { border-top: 0; }
  .sessions td { border: 0; padding: 2px 0; }
  .sessions td:first-child { font-size: var(--text-etiquette); letter-spacing: var(--text-etiquette--letter-spacing);
                             text-transform: uppercase; color: var(--texte-second); font-weight: 700; }
  .sessions td:nth-child(2) { font-size: 17px; font-weight: 700; color: var(--texte-titre); padding-bottom: 6px; }
}
.interet input, .interet select { min-height: var(--tap); border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); color: var(--texte); }
.interet label { color: var(--texte-second); font-weight: 600; }
.niveau { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-left: 4px solid var(--geste); border-radius: var(--radius-doux); padding: 16px 18px; }
.niveau h3 { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation);
             font-size: var(--text-intertitre); color: var(--texte-titre); margin-bottom: 6px; }
.niveau .fine { font-size: var(--text-texte); color: var(--texte-second); margin: 0; }

/* 17.9 la page de marque : les machines en rangées, le prix HT en tête, la chaîne en encadré */
.machine { padding: 14px 0 12px; border-top-color: var(--filet); font-size: var(--text-texte); row-gap: 8px; }
.machine > div:first-child b { color: var(--texte-titre); font-size: 17px; line-height: 1.35; }
.machine .ref { font-size: var(--text-fine); color: var(--texte-second); }
.machine .prix b { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation);
                   font-size: var(--text-intertitre); color: var(--texte-titre); }
.machine .prix span { color: var(--texte-second); font-size: var(--text-fine); }
.machine .gestes { gap: var(--spacing-4); padding-top: 2px; }
.machine .gestes a { color: var(--texte-accentue); font-weight: 700; }
.chaine { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-left: 4px solid var(--geste); border-radius: var(--radius-doux); padding: 18px 20px 16px; }
.chaine h2 { font-size: var(--text-intertitre); line-height: 1.25; }
.chaine p { line-height: 1.65; }

/* 17.10 le contact — Ruben : « les encarts n'ont pas de couleur plus claire pour ressortir du décor » */
.avant li { background: color-mix(in srgb, var(--color-logo-jaune) 20%, var(--fond-bloc)); border: var(--trait-fort) solid color-mix(in srgb, var(--geste) 40%, var(--filet));
            border-radius: var(--radius-doux); padding: 12px 14px; font-size: var(--text-texte); }
.avant { gap: 10px; }
.avant a { color: var(--texte-accentue); font-weight: 700; }
.avant li > a:first-child { display: inline-block; margin-bottom: 2px; color: var(--texte-titre); font-size: 17px; }
.joindre { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 18px 20px 16px; gap: 12px; }
.joindre h2 { font-size: var(--text-intertitre); line-height: 1.25; }
.joindre b { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-sous-titre); }
.joindre b a { color: var(--texte-titre); text-decoration: none; }
.joindre dl { font-size: var(--text-texte); gap: 0 var(--spacing-4); }
.joindre dt, .joindre dd { padding: 6px 0; border-bottom: var(--trait-fin) solid color-mix(in srgb, var(--filet) 60%, transparent); }
.joindre dt { color: var(--texte-second); }
.joindre address { line-height: 1.6; }
.contact .form input, .contact .form select, .contact .form textarea { border: var(--trait-fort) solid var(--bord-champ); border-radius: var(--radius-doux); background: var(--fond-page); color: var(--texte); min-height: var(--tap); }
.contact .form label { color: var(--texte-second); font-weight: 600; }
.contact h1 { font-size: var(--text-titre); line-height: var(--text-titre--line-height); }

/* 17.11 qui sommes-nous — Ruben : « illisible, chiant à lire, pas de grand, pas d'espacement » */
.faits li { border-top: 0; padding-top: 0; background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux); padding: 12px 14px; font-size: var(--text-texte); }
.faits b { color: var(--texte-titre); font-size: 17px; line-height: 1.3; margin-bottom: 3px; }
.faits span { color: var(--texte-second); font-size: var(--text-fine); line-height: 1.55; }

/* 17.12 la page de contenu : la colonne de lecture, les intertitres, les listes à l'alvéole, les liens de ressources en rangées */
.article { font-size: 17px; max-width: var(--largeur-lecture); }
.article p, .article li { line-height: 1.7; margin-bottom: var(--spacing-3); }
.article h1 { font-size: var(--text-titre); line-height: var(--text-titre--line-height); }
.article h2 { margin-top: var(--spacing-8); font-size: var(--text-sous-titre); line-height: var(--text-sous-titre--line-height); }
.article .chapo { font-size: 19px; line-height: 1.55; color: var(--texte-titre); }
.article .list { display: grid; gap: 10px; margin: 0 0 var(--spacing-4); padding: 0; list-style: none; }
.article .list li { position: relative; padding-left: 24px; margin: 0; }
.article .list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 12px; background: var(--texte-accentue); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.article ol { list-style: none; padding: 0; margin: 0 0 var(--spacing-4); display: grid; gap: 12px; counter-reset: avantage; }
.article ol > li { position: relative; padding-left: 46px; margin: 0; min-height: 40px; }
.article ol > li p { margin: 0; }
.article ol > li::before { counter-increment: avantage; content: counter(avantage); position: absolute; left: 0; top: 0; width: 34px; height: 38px;
                           display: grid; place-items: center; background: var(--geste); color: var(--sur-geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
                           font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: 18px; }
.article p b, .article li b { color: var(--texte-titre); }
.encadre { background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-left: 4px solid var(--geste); border-radius: var(--radius-doux); padding: 16px 18px; gap: 10px; font-size: var(--text-texte); }
.encadre > b { font-family: var(--font-titres); font-weight: var(--titres-graisse); font-variation-settings: var(--titres-variation); font-size: var(--text-intertitre); color: var(--texte-titre); }
.encadre a { color: var(--texte-accentue); font-weight: 700; }
.article > a { display: inline-flex; align-items: center; min-height: var(--tap); margin: var(--spacing-2) 0 2px; padding: 0 14px;
               background: var(--fond-bloc); border: var(--trait-fort) solid var(--filet); border-radius: var(--radius-doux);
               color: var(--texte-titre); font-weight: 700; text-decoration: none; }
.article > a:hover { border-color: var(--geste); color: var(--texte-accentue); }
.article > a + p { font-size: var(--text-fine); color: var(--texte-second); margin: 0 0 var(--spacing-4); }
.cote { gap: var(--spacing-6); }
/* 18. LE CONTRASTE — Ruben, 07/09 : « pas assez de contraste entre les textes et le fond ; ceux qui ont déjà leur cadre
   clair sont bien et lisibles, le reste est difficile ». Il a raison, et ce n'est pas l'encre : le texte sur le papier crème
   est à 13,4 : 1. C'est le BLOC qui manquait. Tout ce qui se lit passe donc sur la surface claire, comme le magasin. */
.article, .compte .cartes ~ *, .contact #nous-ecrire, .spec, #produits, #faisons, #equipe,
.panier > section:first-child, .tunnel > div:first-child {
  background: var(--fond-bloc); border: var(--trait-fin) solid var(--filet); border-radius: var(--radius-doux);
  padding: 20px 22px 18px; }
.article { max-width: none; }
.article > *:first-child { margin-top: 0; }
.article h2:first-of-type { margin-top: var(--spacing-2); }
.spec, #produits, #faisons, #equipe { align-self: start; }
#produits h2, #faisons h2, #equipe h2, .spec h2 { margin-top: 0; }
/* la 404 n’est pas une page de lecture : ses six univers sont déjà des cadres, un cadre de plus ferait trois niveaux (A-3) */
.erreur { max-width: 760px; }
.tunnel > div:first-child, .panier > section:first-child { align-self: start; }
.contact #nous-ecrire .form { margin-top: var(--spacing-2); }
/* la colonne de lecture reste une colonne de lecture, dans son cadre */
.article p, .article li, .article .chapo { max-width: var(--largeur-lecture); }
@media (min-width: 1024px) { .colonnes { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* 19. LES DEUX PORTES DE L'ACCUEIL — Ruben, 07/09 : « un truc kiffant sur l'ancien site, les deux séparations en image,
   matériel apicole et produits ». Ce sont EXACTEMENT les deux images mesurées le 22/08 sur l'accueil actuel :
   « ruches apisaveurs coucher soleil MATERIEL a.jpg » (7,3 Mo) et « univers gourmand .jpg » (5,4 Mo). Les deux portes
   reviennent ; le poids, lui, ne revient pas. */
/* ⚠️ Les regles `.porte-image` / `.porte-photo` / `.porte-mots` de ce paragraphe sont RETIREES le 09/09 :
   les deux portes ne sont plus deux cartes, elles sont une scene (§24). Elles ne visaient que l'accueil,
   et plus aucune balise ne les porte. Du CSS mort qui explique un probleme resolu ailleurs egare plus
   qu'il n'aide : il vit dans l'historique, pas dans la feuille. */
/* le bandeau pro : un bloc, pas une grille — sinon chaque lien devient un élément et le texte se casse (la leçon de .pro-cta) */
.porte-pro { display: block; position: relative; margin: 0 0 var(--spacing-4); padding: 11px 14px 11px 42px;
             background: color-mix(in srgb, var(--color-logo-jaune) 22%, var(--fond-page)); border: var(--trait-fort) solid var(--geste);
             border-radius: var(--radius-doux); font-size: var(--text-texte); line-height: 1.55; color: var(--texte); font-style: normal; }
.porte-pro::before { content: ""; position: absolute; left: 13px; top: 13px; width: 19px; height: 21px; background: var(--geste); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.porte-pro a { color: var(--texte-accentue); font-weight: 700; }

/* 20. L'AÉRATION — ce que `outils/verifier_aeration.py` a mesuré le 07/09, page par page, dans le navigateur.
   Ruben : « j'ai peur qu'on ait trop de cadres, trop d'éléments, que ce soit trop lourd ». La mesure dit non
   pour les cadres (1,0 à 5,6 par 1 000 px, le seuil est à 7) et OUI pour trois choses, corrigées ici. */
/* 20.1 l'interligne : le fil de fer posait 1,45 sur tout le corps ; un texte qui se lit demande 1,6 */
main p:not(.eyebrow):not(.fine):not(.note), main li:not(.fine), main dd, main blockquote { line-height: 1.6; }
/* 20.2 la colonne de lecture : un paragraphe de carte prenait 898 px, soit 90 caractères par ligne */
.carte p, .param p, .param label, .item, .joindre address, .chaine p, .niveau p, .droite p, .tete > p,
blockquote.jan p, .offre li { max-width: var(--largeur-lecture); }
/* 20.3 les tailles hors échelle : sept valeurs traînaient (10, 11, 13, 15, 18, 32 px) hors des jetons */
.degressif th, .decide .degressif th, .sessions th, .refs .logo, .logo-case { font-size: var(--text-etiquette); }
.site .panier, .site .recherche-bouton, .site .recherche input, .ligne .retirer,
.demande label, .interet label, .grille-ref label, .form label { font-size: var(--text-fine); }
blockquote.jan { font-size: var(--text-texte); }
.panier h1, .tunnel h1, .recherche h1, .erreur h1 { font-size: var(--text-titre); line-height: var(--text-titre--line-height); }
/* 21. L'ÉCHELLE REFERMÉE — mesuré le 07/09 par `verifier_aeration.py` (A-5), après avoir sorti
   l'en-tête et le pied du recensement et resserré le seuil de 9 à 7 tailles.
   QUATORZE tailles vivaient sur les maquettes : 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 30,
   40, 44 px. La DA n'en définit que SEPT — étiquette 12, fine 14, corps 16, intertitre 20,
   sous-titre 24→34, titre 32→48, prix 40. Les sept autres étaient des valeurs écrites à la main
   dans les composants, ce que la règle de design du dossier interdit noir sur blanc
   (« Tokens verrouillés = la DA. Valeurs arbitraires interdites dans les composants »).
   Elles sont ramenées sur l'échelle ici, en un seul endroit, plutôt que corrigées trente fois.
   Un 16 et un 17 côte à côte ne se distinguent pas : ils font du bruit, pas de la hiérarchie. */
.frames span { font-size: var(--text-etiquette); }                       /* 11 → 12 */
.steps:not(.texte) span, .menu .quitter a { font-size: var(--text-fine); } /* 15 → 14 */
.btn, form.achat .btn, .champ input, .site .recherche-bouton, .site .panier, .menu a,
.res a, .item b, .faits b, .machine > div:first-child b, .avant li > a:first-child,
.sessions td:nth-child(2), .steps:not(.texte) b, .texte, .article, .tete > p,
.saison-bloc p, .konigin .droite p:first-child, .when { font-size: var(--text-texte); }  /* 15, 17, 19 → 16 */
.texte .chapo, .article .chapo, .vide b, .option strong, .barre-geste b,
blockquote.jan { font-size: var(--text-intertitre); }                    /* 18, 19, 22 → 20 */
/* le chapô garde sa hiérarchie : il monte d'un cran au lieu d'un demi */
.texte .chapo, .article .chapo { line-height: 1.45; }
/* les annexes de maquette gardent leur violet et leur bleu : hors site */

@media (prefers-reduced-motion: no-preference) { .btn, .option, .cookies button { transition-duration: var(--duree-courte); } }

/* 22. L'ACCUEIL : LA COMPOSITION, PAS LES CASES — Ruben, 09/09, deux fois de suite.
   D'abord : « les cases, ça fait trop classique, trop basique ». J'ai répondu en peignant une case en brun.
   Puis : « ce marron n'est pas beau, ça pop comme une merde » ET « faut ARRÊTER DE JOUER SUR LES CASES, mais
   jouer sur l'agencement des mots, des images détourées, une hiérarchisation ». Il a raison sur le fond :
   UN BLOC SOMBRE EST UNE CASE. Le bloc sombre est retiré. Ce qui le remplace ne dessine aucun cadre. */

/* ── ① DEUX NIVEAUX DE TITRE. Le système avait les deux styles et n'en servait qu'un : tous les H2 de
   l'accueil sortaient à la même taille, donc la page n'avait aucun relief. Les MOMENTS montent au rang du
   H1 ; les SERVICES descendent au rang d'étiquette. C'est la hiérarchie, et elle ne coûte pas un pixel. ── */
#portes h2, #konigin h2 { max-width: 26ch; margin-bottom: var(--spacing-4); }
#magasin h2 {
    font-family: var(--font-texte); font-size: var(--text-etiquette); font-weight: 700;
    letter-spacing: var(--text-etiquette--letter-spacing); text-transform: uppercase;
    color: var(--texte-second); border-bottom: var(--trait-fin) solid var(--filet);
    padding-bottom: 8px; margin-bottom: var(--spacing-3); }
#magasin h2::after { display: none; }   /* le filet du H2 : l'étiquette a le sien */

/* ── ② KÖNIGIN PERD SON CADRE. Un filet en tête, de l'air, et trois colonnes de texte. ── */
.accueil-grille .konigin { background: transparent; border: 0; border-radius: var(--o-rayon-net);
                           border-top: var(--trait-fort) solid var(--texte-titre);
                           padding: var(--spacing-5) 0 var(--spacing-4); }
.accueil-grille .konigin img { border: 0; background: transparent; aspect-ratio: auto; object-fit: contain; }
.accueil-grille .konigin .familles li { border-left: 0; border-top: var(--trait-fin) solid var(--filet);
                                        padding: 10px 0 0; }
.accueil-grille .konigin .familles b { display: block; font-family: var(--font-texte);
                                       font-size: var(--text-etiquette); font-weight: 700;
                                       letter-spacing: var(--text-etiquette--letter-spacing);
                                       text-transform: uppercase; color: var(--texte-second);
                                       margin-bottom: 6px; }
.accueil-grille .konigin .familles a { display: block; margin-bottom: 8px; }

/* ── ③ LES DEUX PORTES : asymétriques, et détourées. Deux moitiés égales, ce sont deux cases ;
   deux poids différents, c'est une composition. La photo n'a plus ni boîte ni filet : elle est posée
   sur le crème, comme Marlenka pose ses gâteaux — c'est la règle du blanc, enfin outillée. ── */
/* le patch se pose SUR l'objet, jamais sur des mots (la regle apprise trois fois le 09/09).
   Sur telephone, la scene est le parent positionne ; sur ordinateur, le §24 le replace. */
.portes-bloc .patch-pose { position: absolute; left: 0; top: 6px; z-index: 2; }
/* ── ④ LA RANGÉE : les produits sur le crème, sans cadre. Le nom en Fraunces, le prix en tabulaire. ── */
.rangee .piste > a { border: 0; background: transparent; padding: 0; gap: 6px; }
.rangee .piste img { background: transparent; border: 0; object-fit: contain; }
.rangee .piste .case { background: transparent; border: var(--trait-fin) dashed var(--filet);
                       border-radius: var(--radius-doux); }
.rangee .piste b { font-family: var(--font-titres); font-weight: var(--titres-graisse);
                   font-variation-settings: var(--titres-variation); font-size: var(--text-texte);
                   line-height: 1.2; color: var(--texte-titre); }
.rangee .piste em { font-size: var(--text-fine); color: var(--texte-second); font-variant-numeric: tabular-nums; }
.rangee .piste > a:hover b { color: var(--texte-accentue); }
.rangee .fleches button { color: var(--texte); border-color: var(--filet); background: transparent;
                          border-radius: var(--radius-doux); }
.rangee .fleches button:hover { border-color: var(--geste); color: var(--texte-accentue); }

/* ── ⑥ LE MAGASIN, en bas : une adresse, pas un encadré de plus. ── */
#magasin { background: transparent; border: 0; border-top: var(--trait-fin) solid var(--filet);
           border-radius: var(--o-rayon-net); padding: var(--spacing-4) 0 0; }

/* 23. L'ACCUEIL REFAIT — Ruben, 09/09 : « depuis le début t'as rien changé, c'est quoi le problème ?
   l'organisation, la mise en scène… je dois faire quoi pour que tu changes les choses, arrêter la maquette
   et coder ? »
   Il a raison, et le diagnostic tient en une phrase : j'ai RAFFINÉ une mise en page qui demandait à être
   REFAITE. Bordures retirées, tailles de titre ajustées, photo détourée, patch posé — et la STRUCTURE n'a
   pas bougé depuis le premier jet : une pile de bandes de MÊME LARGEUR, chacune « un titre, puis son
   contenu », empilées dans une colonne centrée. C'est ça qui fait « catalogue », et aucun réglage de
   détail ne le répare. Coder n'y changerait rien : la même mise en page en Astro rendrait la même page.
   ➜ QUATRE CHANGEMENTS DE STRUCTURE. Aucun n'est un effet, aucun ne coûte un octet de plus. */

/* ── LA MARGE DE PAGE, nommée une fois. `.wrap` fait 1 180 px avec 20 px de gouttière : la distance entre
   le bord de l'écran et le début du texte vaut donc 20 px + la moitié de ce qui dépasse. La nommer permet
   à un bloc de SORTIR de la colonne (marge négative) et à son texte d'y RENTRER (marge positive) — sans
   ça, « pleine largeur » veut dire « le texte aussi », et un texte pleine largeur est illisible. ── */
.accueil-grille { --marge-page: calc(20px + max(0px, (100vw - var(--barre, 0px) - var(--largeur-page)) / 2)); }
/* `--barre` est la largeur de la barre de defilement, posee par un script de trois lignes (voir plus bas).
   MESURE du 09/09 par `outils/verifier_debordements.py` : sans elle, le titre, le chapo et le bouton du
   bloc de saison sortaient de HUIT PIXELS a gauche de l'ecran a 1 440 px de large. La cause : `100vw`
   compte la barre, `clientWidth` ne la compte pas, et la moitie de l'ecart se paie a gauche.
   Pourquoi pas de CSS pur : il n'existe aucune unite de fenetre SANS barre. `container-type: inline-size`
   la donnerait (`100cqi`), mais il faudrait la poser sur `body` -- et `contain: layout` ferait alors de
   `body` le bloc conteneur des elements fixes : le bandeau cookies tomberait au bas du DOCUMENT au lieu
   du bas de l'ECRAN. Le remede serait pire. Trois lignes de script, et un repli a 0 sans script. */
/* le conteneur vaut `--largeur-page` (1 240 px), pas 1 180 : le fil de fer posait 1 180, le module
   le remplace par le jeton a la ligne `--w-max: var(--largeur-page)`. Ecrire 1 180 en dur decalait
   toute la page de 30 px vers la gauche, et le premier mot du H1 sortait de l'ecran. */
/* `100vw` compte la barre de défilement, `100%` ne la compte pas : l'écart (≈8 px de chaque côté) suffit à
   faire apparaître une barre HORIZONTALE. `clip` la supprime sans créer de conteneur de défilement — donc
   sans casser la barre collée du téléphone, ce que `overflow: hidden` aurait fait. */
html { overflow-x: clip; }

@media (min-width: 900px) {

/* ── ① L'OUVERTURE. La saison était une CARTE : un rectangle arrondi, un filet, une ombre d'ambre, et un
   H1 à la taille d'un sous-titre. La trame d'alvéoles — la seule matière que la DA réserve à l'accueil —
   était enfermée dedans. Elle devient le SOL de la page : la bande traverse l'écran, le titre passe au
   rang de titre, et le texte descend à 46 signes. Un texte qui traverse la page se lit comme un tableau ;
   à 46 signes, il se lit. Ruben, 09/09 : « le fond est chiant, manque des assets de fond » — l'asset
   existait, il était dans une boîte. ── */
  .accueil-grille .saison-bloc {
      margin-left: calc(-1 * var(--marge-page)); margin-right: calc(-1 * var(--marge-page));
      padding: var(--spacing-6) var(--marge-page) var(--spacing-5);
      border: 0; border-bottom: var(--trait-fin) solid var(--filet); border-radius: var(--o-rayon-net);
      box-shadow: none; }
  .accueil-grille .saison-bloc h1 {
      font-size: clamp(2.3rem, 1.1rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.015em; }
  .accueil-grille .saison-bloc p { max-width: 46ch; }
  .accueil-grille .saison-bloc .sceau-pose { right: var(--marge-page); top: var(--spacing-5); }
  .accueil-grille .saison-bloc .trame {                       /* la lumière part maintenant du bord de l'écran */
      -webkit-mask-image: radial-gradient(ellipse 55% 95% at 78% 40%, #000 0%, rgba(0,0,0,.3) 60%, transparent 100%);
              mask-image: radial-gradient(ellipse 55% 95% at 78% 40%, #000 0%, rgba(0,0,0,.3) 60%, transparent 100%); }

/* ── ② LES DEUX MONDES : deux MOMENTS DÉCALÉS, plus deux colonnes côte à côte. Deux moitiés égales l'une
   à côté de l'autre, c'est la définition d'un catalogue — et c'est ce que la page faisait depuis le début.
   Ils passent l'un SOUS l'autre, en miroir : le premier ancré à gauche, l'image sortant du bord de l'écran,
   son texte en colonne étroite à droite ; le second inversé. La page cesse d'être symétrique, et c'est la
   symétrie qui faisait « grille de cartes ». ── */
  .portes-bloc { margin-left: calc(-1 * var(--marge-page)); margin-right: calc(-1 * var(--marge-page));
                 padding: var(--spacing-6) 0 var(--spacing-5); }
  .portes-bloc > h2, .portes-bloc > .note {
      margin-left: var(--marge-page); margin-right: var(--marge-page); }
  /* le decalage en miroir du §23 a vecu une heure : le §24 le remplace par UNE scene. Ce qui reste
     ici est ce qui sert encore — la bande pleine largeur et le retour du texte dans la colonne. */

/* ── ③ KÖNIGIN : une double page, plus « une image puis trois colonnes ». Le texte tient dans une colonne
   étroite à gauche, la machine part par la droite et sort du cadre. C'est la même mécanique qu'au ②, dans
   l'autre sens — et c'est ce qui donne à la page son alternance gauche / droite / gauche. ── */
  .accueil-grille .konigin {
      grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--spacing-5);
      align-items: center; padding-top: var(--spacing-5); }
  .accueil-grille .konigin h2 { grid-column: 1; grid-row: 1; max-width: 20ch; }
  .accueil-grille .konigin .droite { grid-column: 1; grid-row: 2; max-width: 46ch; }
  .accueil-grille .konigin img { grid-column: 2; grid-row: 1 / span 2; align-self: center;
                                 width: auto; max-width: none; height: 360px; justify-self: stretch;
                                 margin-right: calc(-1 * var(--marge-page)); object-position: right center; }
  
  /* la liste passe de trois colonnes a une : trois colonnes dans 46 signes, ce sont des mots coupes */
  .accueil-grille .konigin .familles { grid-template-columns: 1fr; gap: var(--spacing-3); }

/* ── ④ LE RYTHME. Des blancs INÉGAUX : serré à l'intérieur d'un moment, large entre deux. C'est ce qui
   remplace les filets pour dire « ici, on change de sujet » — et c'est la raison pour laquelle la page
   pouvait perdre ses cadres sans devenir une bouillie. ── */
  .accueil-grille { row-gap: var(--spacing-6); }
}

/* 24. LES DEUX UNIVERS S'ENTREMÊLENT — Ruben, 09/09 : « ya pas mieux à faire pour les deux univers ?
   genre les deux s'entremêlent. Il faudra quoi comme outils, car là c'est chiant. »
   Ce qui était chiant, et pourquoi : les deux univers restaient DEUX BLOCS. Même décalés en miroir par
   le §23, chacun gardait sa ligne, son image, son texte, son tour. Deux blocs l'un sous l'autre racontent
   une LISTE ; ils ne racontent pas deux mondes qui se touchent.
   ➜ Ils deviennent UNE SEULE SCÈNE. Et l'outil qu'il fallait pour ça : AUCUN de neuf — `detourer.py`
   du 09/09 suffisait, il manquait UNE PHOTO. Elle vient du catalogue (vin de miel Apimed 0,75 L,
   produit 3713, packshot sur blanc, détouré à 10,4 % de couverture, 31 Ko). */

@media (min-width: 900px) {
  .portes-bloc .scene { display: block; height: 540px; margin-top: var(--spacing-4); }

/* ── ① LE SOL COUPÉ EN DIAGONALE. C'est le « split » demandé le 09/09 (« un fond blanc vu contre-plongé
   et plongé qui split »). Un seul dégradé le fait : deux crèmes à arrêts durs et un filet d'ambre d'un
   pixel sur la coupe. Pas d'image de fond, pas de calque — et Ruben, le 09/09 : « les couleurs sont tout
   le temps les mêmes, c'est chiant ». En voilà une seconde, et elle reste sourde. ── */
  .portes-bloc .coupe { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: linear-gradient(96deg,
          var(--fond-page) 0 43%,
          color-mix(in srgb, var(--geste) 45%, transparent) 43% calc(43% + 1px),
          color-mix(in srgb, var(--color-logo-jaune) 8%, var(--fond-page)) calc(43% + 1px) 100%); }

/* ── ② LES DEUX OBJETS SE CROISENT SUR LA COUPE. L'extracteur derrière, la bouteille devant : ils se
   chevauchent vraiment, ils ne se rangent pas côte à côte. C'est ça, « s'entremêler ». Leur taille se
   prend sur la LARGEUR de la bande, jamais sur sa hauteur : en la prenant sur la hauteur, l'extracteur
   gardait 557 px à 1 024 comme à 1 600 et mangeait le titre de droite. ── */
  .portes-bloc .objet { position: absolute; bottom: 0; height: auto; max-height: 100%;
      transition: transform .28s var(--courbe), opacity var(--duree-courte) var(--courbe),
                  filter var(--duree-courte) var(--courbe); }
  .portes-bloc .o-materiel { left: 34%; width: 32%; z-index: 1; }
  /* 44 % et pas 55 % : a 55 % la bouteille se posait A COTE de l'extracteur, pas dessus -- deux objets
     cote a cote, c'est encore une liste. Mesure au rendu : l'extracteur s'arrete a 48,6 % (sa hauteur
     est plafonnee, donc sa largeur reelle est plus petite que les 32 % demandes). */
  .portes-bloc .o-gourmand { left: 50%; width: 7.5%; z-index: 2; }

/* ── ③ LES DEUX TITRES PARTENT AUX DEUX BORDS, à des hauteurs différentes : l'œil lit en diagonale, pas
   en colonnes. Ils sont posés là où aucun objet ne passe — la règle apprise trois fois dans la journée :
   ce qui se superpose se pose sur une image, jamais sur des mots.
   `clip-path` découpe AUSSI la zone cliquable : chaque monde ne reçoit que son côté de la coupe. Là où les
   deux objets se croisent, le clic revient au monde de ce côté-là — c'est la seule règle simple, et elle
   est la même pour l'œil et pour le doigt. ── */
  .portes-bloc .monde { position: absolute; inset: 0; z-index: 4; display: block;
                        background: transparent; }
  .portes-bloc .m-materiel { padding: 300px var(--marge-page) 0;
                             clip-path: polygon(0 0, 45% 0, 41% 100%, 0 100%); }
  .portes-bloc .m-gourmand { padding: 18px var(--marge-page) 0; text-align: right;
                             clip-path: polygon(45% 0, 100% 0, 100% 100%, 41% 100%); }
  .portes-bloc .monde b { display: block; font-family: var(--font-titres); font-weight: var(--titres-graisse);
      font-variation-settings: var(--titres-variation); font-size: var(--text-titre);
      line-height: var(--text-titre--line-height); color: var(--texte-titre); margin-bottom: 10px;
      max-width: 12ch; }
  .portes-bloc .monde em { display: block; font-style: normal; font-variation-settings: "slnt" -10;
      font-size: var(--text-texte); line-height: 1.6; color: var(--texte-second); max-width: 24ch; }
  .portes-bloc .m-gourmand b { max-width: 15ch; margin-left: auto; }
  .portes-bloc .m-gourmand em { max-width: 26ch; margin-left: auto; }
  .portes-bloc .monde:hover b { color: var(--texte-accentue); }

/* ── ④ LE SURVOL : le monde visé AVANCE, l'autre RECULE. Ruben, 09/09 : « quand on passe la souris ça met
   en valeur et incite à cliquer dessus ». Aucun script : les deux liens sont AVANT les objets dans le
   DOM, donc `~` suffit. Et rien ne se déplace de plus de 12 px — un objet qui saute fait peur, un objet
   qui avance donne envie. ── */
  .portes-bloc .m-materiel:hover ~ .o-materiel,
  .portes-bloc .m-materiel:focus-visible ~ .o-materiel { transform: translateY(-12px) scale(1.02); z-index: 3; }
  .portes-bloc .m-materiel:hover ~ .o-gourmand,
  .portes-bloc .m-materiel:focus-visible ~ .o-gourmand { opacity: .3; filter: saturate(.4); }
  .portes-bloc .m-gourmand:hover ~ .o-gourmand,
  .portes-bloc .m-gourmand:focus-visible ~ .o-gourmand { transform: translateY(-12px) scale(1.04); z-index: 3; }
  .portes-bloc .m-gourmand:hover ~ .o-materiel,
  .portes-bloc .m-gourmand:focus-visible ~ .o-materiel { opacity: .3; filter: saturate(.4); }
  .portes-bloc .monde:focus-visible { outline: var(--trait-fort) solid var(--geste); outline-offset: -4px; }

  /* le patch se pose SUR l'extracteur, dans le vide de son épaule gauche */
  /* a 20 % / 5 % le patch flottait sur du creme vide, a cote de l'extracteur : la regle de la journee
     dit qu'il se pose SUR une image. Il chevauche maintenant le bord gauche de la cuve. */
  /* le patch est en PIXELS (104 px) alors que la scene est en POURCENTS : a 1 440 il tenait dans le
     vide entre l'extracteur et la bouteille, a 900 il recouvrait le goulot. Il recule sur le bord
     gauche de la cuve, ou la place ne depend plus de la largeur de l'ecran. */
  .portes-bloc .scene .patch-pose { position: absolute; left: 30%; top: 30%; z-index: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .portes-bloc .objet { transition: opacity var(--duree-courte) var(--courbe); }
  .portes-bloc .m-materiel:hover ~ .o-materiel, .portes-bloc .m-gourmand:hover ~ .o-gourmand { transform: none; }
}

/* 25. LA SCÈNE MIEUX ENTREPOSÉE, ET LE TEXTE QUI CESSE D'ÊTRE COLLÉ À GAUCHE — Ruben, 09/09 :
   « travaille plus sur les deux univers, comment ils s'entremêlent. Faut que ça soit mieux entreposé,
   plus fluide, mieux fait. Le texte écrit est pas bien mis et trop sur côté gauche en pleine page. »
   Deux choses, et elles sont séparées. */

@media (min-width: 900px) {

/* ── Ⓐ LA SCÈNE. Deux objets posés côte à côte sur la même ligne de sol, sans ombre, ce n'est pas un
   entremêlement : c'est un ALIGNEMENT. Quatre choses manquaient. ── */

/* ①  DE LA PROFONDEUR : trois objets, trois plans, trois tailles qui descendent — la machine derrière,
   la bouteille au milieu, le pot devant. Deux objets ne font pas une profondeur, ils font un duo. */
  .portes-bloc .o-materiel  { left: 30%; width: 22%; bottom: 6%;  z-index: 1; }
  .portes-bloc .o-gourmand  { left: 45%; width: 6%;  bottom: 14%; z-index: 2; }
  .portes-bloc .o-gourmand2 { left: 49%; width: 13%; bottom: 0;   z-index: 3; }

/* ②  DES OMBRES PORTÉES. `drop-shadow` suit la SILHOUETTE alpha d'un PNG détouré, pas sa boîte : c'est
   ce qui fait qu'un objet SE POSE au lieu d'être collé. Ruben le demandait déjà le 09/09 — « deux
   éléments qui flottent un peu dans les airs ». Sans ombre, un objet qui flotte a l'air cassé ; avec
   l'ombre, il flotte. Plus l'objet est loin, plus son ombre est basse et diffuse. */
  .portes-bloc .o-materiel  { filter: drop-shadow(0 26px 26px color-mix(in srgb, var(--color-sombre) 22%, transparent)); }
  .portes-bloc .o-gourmand  { filter: drop-shadow(0 18px 18px color-mix(in srgb, var(--color-sombre) 26%, transparent)); }
  .portes-bloc .o-gourmand2 { filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--color-sombre) 30%, transparent)); }

/* ③  DES LIGNES DE SOL DIFFÉRENTES — 6 %, 14 %, 0. Trois objets alignés sur la même base, c'est une
   étagère ; trois objets à trois hauteurs, c'est une scène. */

/* ④  UNE COUPURE FONDUE. Le filet d'un pixel était net et dur ; la coupe se fait maintenant sur 10 %
   de la largeur, sans trait. « Plus fluide », c'est exactement ça : on ne voit plus la couture, on voit
   deux airs qui se rejoignent. */
  .portes-bloc .coupe {
      background: linear-gradient(96deg,
          var(--fond-page) 0 40%,
          color-mix(in srgb, var(--color-logo-jaune) 9%, var(--fond-page)) 50% 100%); }

/* le survol garde l'ombre : `filter` ne s'additionne pas, il se remplace — l'écrire deux fois est le
   seul moyen de désaturer SANS décoller l'objet de son sol. */
  .portes-bloc .m-materiel:hover ~ .o-gourmand, .portes-bloc .m-materiel:focus-visible ~ .o-gourmand,
  .portes-bloc .m-materiel:hover ~ .o-gourmand2, .portes-bloc .m-materiel:focus-visible ~ .o-gourmand2 {
      opacity: .3; filter: saturate(.4) drop-shadow(0 12px 14px color-mix(in srgb, var(--color-sombre) 18%, transparent)); }
  .portes-bloc .m-gourmand:hover ~ .o-materiel, .portes-bloc .m-gourmand:focus-visible ~ .o-materiel {
      opacity: .3; filter: saturate(.4) drop-shadow(0 20px 22px color-mix(in srgb, var(--color-sombre) 14%, transparent)); }
  .portes-bloc .m-gourmand:hover ~ .o-gourmand2, .portes-bloc .m-gourmand:focus-visible ~ .o-gourmand2 {
      transform: translateY(-12px) scale(1.04); z-index: 4; }

/* ── Ⓑ LE TEXTE. Le bloc de saison est pleine largeur depuis le §23, mais son texte était resté dans un
   rail de 46 signes COLLÉ AU BORD GAUCHE, avec un tiers de page vide à droite. Un texte qui occupe un
   huitième d'une bande pleine page n'est pas « aéré », il est ORPHELIN.
   ➜ Deux colonnes : le titre traverse, le texte de saison tient la colonne large, et la ligne de retrait
   — 53 % des commandes, 59 % du chiffre — remonte dans la colonne de droite, qui ne portait rien. ── */
  .accueil-grille .saison-bloc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
                                 column-gap: var(--spacing-5); align-items: start; }
  .accueil-grille .saison-bloc > .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .accueil-grille .saison-bloc > h1       { grid-column: 1 / -1; grid-row: 2; }
  /* `:not([hidden])` n'est pas une precaution, c'est une correction : `display: grid` ecrase le
     `display: none` que le navigateur donne a un element `hidden`, et les QUATRE saisons se sont
     empilees l'une sur l'autre au rendu. Une regle de mise en page ne doit jamais rallumer ce
     qu'un attribut a eteint. */
  .accueil-grille .saison-bloc > div[id]:not([hidden]) { grid-column: 1; grid-row: 3; display: grid; gap: 12px; }
  .accueil-grille .saison-bloc > .retrait { grid-column: 2; grid-row: 3; align-self: start;
      flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; padding-top: 14px;
      border-top: var(--trait-fort) solid var(--texte-titre); max-width: 32ch; }
  .accueil-grille .saison-bloc > .retrait b { font-size: var(--text-intertitre); line-height: 1.25;
      color: var(--texte-titre); }
  
  /* le H1 traverse la page : il ne se met plus au pas de la colonne de texte. `text-wrap: balance`
     évite la ligne orpheline d'un mot que donne un titre long sur deux lignes. */
  .accueil-grille .saison-bloc h1 { text-wrap: balance; }
}

/* 26. LES DÉBORDEMENTS DE TEXTE — Ruben, 09/09 : « arrange LES DÉBORDEMENTS DE TEXTE ».
   MESURÉS, pas cherchés à l'œil : `outils/verifier_debordements.py` rend les vingt-et-une maquettes à
   375, 1 024 et 1 440 px dans le navigateur et compare, pour chaque élément qui porte du texte, sa boîte
   à son contenu et à son conteneur. Ce défaut-là ne se lit PAS dans la source : il naît de la largeur,
   de la police et du contenu réunis. Aucun des trois autres vérificateurs ne pouvait le voir.

   CE QU'IL A TROUVÉ : quatre pages où LA PAGE ENTIÈRE défile horizontalement sur téléphone — jusqu'à
   865 px de trop sur la fiche de réservation. Et une seule cause pour les quatre.

   🔑 LA CAUSE : `min-width: auto`. Un élément de grille ou de flexbox refuse par défaut de descendre
   sous la largeur de son contenu. Un fil d'Ariane en `white-space: nowrap`, un bloc de JSON-LD, une URL
   sans espace : chacun impose sa largeur à sa colonne, la colonne l'impose à la grille, la grille à la
   page — et le téléphone se met à défiler de côté. L'`overflow: hidden` posé sur le fil d'Ariane ne
   servait à rien : il coupe la PEINTURE, il ne réduit pas la largeur MINIMALE.
   ➜ `min-width: 0` rend le droit de rétrécir. C'est la ligne qui manquait, et elle vaut pour tout le
     contenu, pas pour les quatre pages où le défaut s'est vu. */
/* ⚠️ ESSAYE ET RETIRE : `main *, aside * { min-width: 0 }` corrige bien les quatre pages, et en CASSE
   quarante autres — un élément de flexbox a alors le droit de descendre sous son texte, et « voir la
   fiche » ou « 5,28 € » sortent de leur boîte. Mesuré : 5 défauts deviennent 46. La permission de
   rétrécir se donne AU CONTENEUR qui porte le contenu large, jamais à tout le monde. */

/* ⓪ LA CAUSE RACINE, trouvée en remontant la chaîne des parents depuis le fil d'Ariane — et ce n'est
   PAS `min-width: auto`, qui était ma première hypothèse : la poser à 0 n'a rien changé, mesuré.
   🔑 `body` est une COLONNE flex, et `.wrap` porte `margin: 0 auto` pour se centrer. Or une marge
   automatique sur l'axe transversal d'une flexbox ANNULE l'étirement : l'élément cesse d'être tiré à
   la largeur du conteneur et se dimensionne en `fit-content`, dont le plancher est le MINIMUM DE SON
   CONTENU. Résultat : 401 px là où l'écran en fait 360. Tout ce qui est dedans hérite de cette largeur,
   et la page défile de côté.
   ➜ `width: 100%` redonne une largeur explicite : la marge automatique n'a plus rien à absorber, le
     centrage continue de marcher au-dessus de 1 240 px grâce au `max-width` qui était déjà là.
   Cette ligne règle les quatre pages d'un coup ; les trois réglages qui suivent ne sont plus que du soin. */
.wrap { min-width: 0; width: 100%; }
/* et la meme permission pour les BLOCS a l'interieur : une grille dont la colonne se dimensionne
   sur le minimum de son contenu (`.achat`, `.decide`, les listes) pousse ses enfants hors de sa
   boite. ⚠️ Elle s'arrete aux BLOCS : donnee a tout (`main *`), elle laisse les elements EN LIGNE
   descendre sous leur texte, et « voir la fiche » ou « 5,28 € » sortent de leur boite -- mesure du
   09/09 : 5 defauts deviennent 46. La liste ci-dessous ne nomme donc aucune balise en ligne. */
main div, main section, main article, main header, main aside, main figure, main fieldset,
main ul, main ol, main dl, main dd, main p, main table, main li,
main h1, main h2, main h3, main h4 { min-width: 0; }

/* ① le fil d'Ariane peut enfin faire ce que son CSS annonçait depuis le début : couper avec des points.
   Il portait `white-space: nowrap` ET `overflow: hidden` ET `text-overflow: ellipsis` — et il élargissait
   quand même la page, parce que `overflow` coupe la PEINTURE et ne réduit pas la largeur MINIMALE. */
.crumb { min-width: 0; }

/* ② l'annexe de maquette : la colonne de valeurs doit pouvoir rétrécir, et les mots techniques se couper.
   Un `<pre>` de JSON-LD imposait 865 px de trop à la fiche de réservation sur téléphone. */



/* ③ l'espace client sur téléphone : « acompte payé 30,00 € · solde 109,00 € au retrait » est en
   `white-space: nowrap` dans une colonne `auto` — la ligne imposait sa largeur à la grille, la grille
   à la page. Sur téléphone la ligne passe DESSOUS et se coupe ; sur ordinateur rien ne change. */
@media (max-width: 639px) {
  .compte .item { grid-template-columns: 1fr; }
  .compte .item .droite { text-align: left; white-space: normal; }
}

/* ④ la barre collée du téléphone : `grid-template-columns: 1fr auto` où la colonne `auto` porte un bouton
   large (« Ajouter au panier — taille 152 cm », 287 px) et la colonne `1fr` un texte qui ne se coupe pas.
   `1fr` vaut `minmax(auto, 1fr)` : son minimum est le contenu, donc la grille dépasse son conteneur, et
   la PAGE avec elle. `minmax(0, 1fr)` lui rend le droit de rétrécir ; sous 600 px, la barre s'empile. */
.barre-geste { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 599px) {
  .barre-geste { grid-template-columns: 1fr; }
  .barre-geste .btn { width: 100%; }
}

/* ⑤ un mot plus long que sa colonne se coupe. `break-word` (et pas `anywhere`) : il n'autorise la
   coupure que si le mot NE TIENT PAS, et il ne change rien au calcul des largeurs minimales -- donc
   il repare les adresses e-mail et les references (« réf. VC-64-230-SZ ») sans deregler une grille. */
body { overflow-wrap: break-word; }
/* le bloc d'achat de la page de location est une grille dont les enfants sont des elements EN LIGNE
   blockifies : ils gardent `min-width: auto` et poussaient de 3 px hors de leur cadre. La permission
   se donne ici, nommement, pas a toutes les balises en ligne du site. */
.achat > * { min-width: 0; }

/* ⑥ les deux listes en `1fr auto` dont la colonne `auto` est en `white-space: nowrap` : sur telephone
   le prix mangeait la place du nom, et le nom sortait de sa boite. Elles s'empilent sous 600 px --
   c'est ce que la page fait deja pour tout le reste a cette largeur. */
@media (max-width: 599px) {
  .machine { grid-template-columns: 1fr; }
  .machine .prix { text-align: left; white-space: normal; }
}

/* ⑦ `.others .num` posait `white-space: nowrap` sur TOUTE la ligne (« 250,00 € — 250,00 € l'un… ») pour
   qu'un prix ne se coupe pas en deux. L'intention est juste, la portee est trop large : c'est le MONTANT
   qui doit rester d'un bloc, pas la phrase. Le montant a deja son enveloppe -- `graisser_chiffres` pose
   un `<b class="chiffre">` autour de chacun -- alors c'est lui qui porte la regle. */
.others .num { white-space: normal; }
.others .num .chiffre, .others .num b { white-space: nowrap; }

/* 27. LE SCEAU, ET CINQ ÉTAPES À CINQ FONDS — Ruben, 09/09 : « grossis le badge ApiSaveurs et place-le
   mieux sur le côté, moins en haut. Ensuite entre les étapes des grandes pages, mets du texturing dans
   le fond, et chaque fond et étape doit être différente. » */

/* ── Ⓐ LE SCEAU. À 132 px collé en haut à droite, à la hauteur du titre, il ressemblait à une vignette
   posée dans un coin. À 210 px et à mi-hauteur, c'est un CACHET sur le côté — le geste qu'il imite.
   Le titre récupère au passage les 150 px de retrait qu'on lui prenait pour laisser passer la vignette :
   il traverse maintenant vraiment la page. ── */
@media (min-width: 900px) {
  /* ancre en BAS a droite, pas a mi-hauteur : « moins en haut », dit deux fois. Un cachet se pose au
     pied d'une page, pas a sa tete. */
  .accueil-grille .saison-bloc .sceau-pose { top: auto; bottom: var(--spacing-4); right: var(--marge-page); }
  .accueil-grille .saison-bloc .sceau { width: 210px; height: 210px; }
  .accueil-grille .saison-bloc h1, .accueil-grille .saison-bloc .eyebrow { padding-right: 0; }
  /* la ligne de retrait tient la colonne de droite : elle s'arrête AVANT le cachet, jamais dessous */
  .accueil-grille .saison-bloc > .retrait { max-width: 26ch; }
}

/* ── Ⓑ CINQ ÉTAPES, CINQ FONDS. La page était une trame en tête et du crème partout ailleurs : une seule
   matière, donc une seule étape. Chaque moment prend son sol, en pleine largeur, et AUCUN ne ressemble au
   précédent — c'est le SOL qui dit « ici, on change de sujet », pas un filet de plus.
   La bande déborde à droite de `-100vw` : `html { overflow-x: clip }` (§23) la coupe proprement, et ça
   évite de calculer la largeur d'une rangée à deux colonnes depuis un seul de ses deux enfants. ── */
.accueil-grille .konigin, .accueil-grille .magasin { position: relative; }
/* `:not(.fond)` : un `.fond` est par definition une couche de fond, posee en ABSOLU. Sans cette
   exception, la regle le repasse en `relative` et il redevient une case de la grille -- vu au rendu
   sur le bloc de Jan le 10/09 : le filigrane prenait la premiere case, le portrait glissait dans la
   deuxieme et le titre se retrouvait dans une colonne de 132 px, coupe au milieu des mots. */
.accueil-grille .konigin > *:not(.fond),
.accueil-grille .magasin > *:not(.fond) { position: relative; z-index: 1; }
.accueil-grille .konigin::before, .accueil-grille .magasin::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: calc(-1 * var(--marge-page)); right: calc(-1 * var(--marge-page));
    top: calc(-1 * var(--spacing-5)); bottom: calc(-1 * var(--spacing-5)); }
/* ⚠️ ESSAYE ET RETIRE : `right: -100vw`, pour ne pas avoir a calculer la colonne voisine. Mesure de
   `verifier_debordements.py` : la page se remettait a defiler de 401 px sur telephone. `overflow-x: clip`
   la cachait, il ne la supprimait pas -- et cacher un debordement n'est pas le corriger. Les bandes
   s'arretent donc au bord de l'ecran, au pixel. */

/* ④ Königin : le crème REFROIDI — c'est l'atelier, l'inox, la miellerie ; et le filigrane de l'abeille
   en très grand derrière la machine. C'est le motif qui avait échoué le matin dans `.portes-bloc` faute
   de parent positionné : ici il en a un, et il tient. */
.accueil-grille .konigin::before { background: color-mix(in srgb, var(--color-sombre) 4%, var(--fond-page)); }
/* ⚠️ pas d'`overflow: hidden` ici : a 44 % de large et debordant du cadre, l'abeille arrivait COUPEE et
   ne lisait plus comme un filigrane mais comme une tache. Reduite a 30 % et posee entierement dans le
   bloc, elle n'a plus besoin d'etre coupee -- un motif qu'il faut rogner est un motif mal dimensionne. */
.accueil-grille .konigin .filigrane { position: absolute; z-index: 0; right: 3%; top: 50%; left: auto;
    width: 30%; transform: translateY(-50%); opacity: .06; mix-blend-mode: multiply; pointer-events: none; }
.accueil-grille .konigin .filigrane svg { width: 100%; height: auto; display: block; }

/* ⑤ le magasin : le crème RÉCHAUFFÉ, et la coulée de miel en crête d'entrée — la même matière que le
   pied de page, parce que c'est le même geste : on arrive au bout, on pose l'adresse. */
.accueil-grille .magasin::before { background: color-mix(in srgb, var(--color-logo-ambre) 7%, var(--fond-page)); }
.accueil-grille .magasin { border-top: 0; padding-top: var(--spacing-4); }
/* ⚠️ `width` EXPLICITE, pas `left` + `right`. Un SVG est un element REMPLACE : en position absolue avec
   `width: auto`, il prend sa largeur INTRINSEQUE (ici 1 200 unites de viewBox, soit 776 px a 22 px de
   haut) et le `right` est ignore. Mesure : la page se remettait a defiler de 401 px sur telephone.
   La regle vaut pour toute image posee en absolu -- une balise remplacee ne se laisse pas tendre. */
.accueil-grille .magasin > .coulee-miel { position: absolute; z-index: 1; left: calc(-1 * var(--marge-page));
    right: auto; width: calc(100% + 2 * var(--marge-page)); top: calc(-1 * var(--spacing-5)); height: 22px;
    color: color-mix(in srgb, var(--color-logo-ambre) 22%, var(--fond-page)); transform: scaleY(-1); }

/* les PASSAGES, tous différents : la coupe commence sans filet (§24), le filet-goutte ouvre les univers
   (§16), un filet fort ouvre Königin (§22), la crête de miel ouvre le magasin. Quatre passages, quatre
   gestes — aucune bande ne commence comme la précédente. */
.accueil-grille .konigin { border-top-color: var(--texte-titre); }

/* 28. LE SENS DE LECTURE — Ruben, 10/09 : « le cadre qui parle de Jan est mal mis, le sens de lecture est
   difficile et cassé · ce qu'on trouve chez… chiant à lire, faut trouver mieux · une ligne de miel posée
   au pif, elle est belle mais elle n'a rien à faire là ».
   🔑 Le sens de lecture n'était pas cassé par hasard : une rangée à DEUX colonnes demande deux lectures
   en parallèle, et personne ne lit en parallèle. Jan descend, les univers prennent la page. */

/* ── ② JAN, EN SIGNATURE. Plus un cadre posé à côté d'une liste : une ligne de fin, pleine largeur, sur
   le même sol chaud que le magasin — l'adresse, puis l'homme. Le portrait grandit, le texte tient sa
   colonne de lecture, et le filigrane reste derrière lui : c'est son bloc depuis le 06/09. ── */
.accueil-grille .jan { background: transparent; border: 0; border-radius: var(--o-rayon-net);
                       border-top: var(--trait-fort) solid var(--texte-titre);
                       padding: var(--spacing-5) 0 var(--spacing-4); position: relative; }
.accueil-grille .jan::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: calc(-1 * var(--marge-page)); right: calc(-1 * var(--marge-page));
    top: 0; bottom: calc(-1 * var(--spacing-5));
    background: color-mix(in srgb, var(--color-logo-ambre) 7%, var(--fond-page)); }
.accueil-grille .jan > *:not(.fond) { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .accueil-grille .jan { grid-template-columns: 132px minmax(0, 62ch); column-gap: var(--spacing-5);
                         align-items: start; justify-content: start; }
  .accueil-grille .jan img { width: 132px; height: 132px; }
  .accueil-grille .jan h2 { font-size: var(--text-sous-titre); line-height: var(--text-sous-titre--line-height);
                            max-width: 28ch; }
  .accueil-grille .jan .filigrane { right: 4%; width: 26%; opacity: .07; }
}

/* ── ③ LE MAGASIN ET JAN NE FONT QU'UN SEUL SOL : la coulée ouvre le magasin, l'adresse suit, la
   signature ferme. Deux bandes de même crème collées l'une à l'autre, sans couture au milieu. ── */
.accueil-grille .magasin::before { bottom: calc(-1 * var(--spacing-6)); }

/* 29. CE QUE LA LARGEUR INTERMÉDIAIRE CASSAIT, ET LA MATIÈRE QU'ON NE VOYAIT PAS — Ruben, 10/09 :
   « il y a plein de bugs d'affichage et d'éléments qui sont bugés · il n'y a pas de différence de
   couleur ni de matière entre les sections ».

   🔴 LE BUG, TROUVÉ EN REGARDANT À 900 px. Toute la composition de l'accueil basculait à 1 024 px.
   ENTRE 700 ET 1023, la page repassait en pile de téléphone SUR UN GRAND ÉCRAN : l'extracteur au
   milieu d'un vide de 900 px, le patch « Loué à la semaine » posé tout seul à 300 px de sa photo, et
   le bloc de saison redevenu une carte pendant que le reste restait pleine largeur.
   ➜ La bascule descend à 900 px, et la pile est réparée pour tout ce qui reste en dessous.
   ⚠️ Un seuil de 1 024 px suppose qu'on regarde en plein écran. Une maquette se regarde dans un
     PANNEAU — et un panneau fait rarement 1 024 px. */

/* ── ① LA PILE, SOUS 900 px : les objets s'alignent À GAUCHE, pas au centre. Centrés, ils laissaient le
   patch — qui s'ancre en haut à gauche de la scène — flotter sur du vide. Un élément posé sur une image
   doit être posé sur l'image, pas à côté. ── */
@media (max-width: 899px) {
  .portes-bloc .objet { justify-self: start; }
  .portes-bloc .scene { gap: 6px; }
  .portes-bloc .o-materiel { max-width: min(320px, 78%); }
  .portes-bloc .o-gourmand { max-width: min(140px, 34%); margin-left: 12%; }
  .portes-bloc .o-gourmand2 { max-width: min(240px, 60%); margin-left: 6%; }
  .portes-bloc .m-materiel { margin-bottom: var(--spacing-5); }
}

/* ── ② LA MATIÈRE, ENFIN VISIBLE. Les cinq sols étaient posés à 4, 5, 7 et 8 % de teinte : mesurés au
   jeton, invisibles à l'œil. Ruben : « il n'y a pas de différence de couleur ni de matière entre les
   sections » — il a raison, et c'est une erreur de dosage, pas d'intention. Les écarts sont doublés, et
   chaque sol porte en plus SA matière, pas seulement sa teinte : la trame, le grain, le filigrane, la
   coulée. Un demi-ton se mesure ; il ne se voit pas. ── */
.accueil-grille .konigin::before { background: color-mix(in srgb, var(--color-sombre) 9%, var(--fond-page)); }
.accueil-grille .konigin .filigrane { opacity: .12; }
.accueil-grille .magasin::before, .accueil-grille .jan::before {
    background: color-mix(in srgb, var(--color-logo-ambre) 15%, var(--fond-page)); }
.accueil-grille .magasin > .coulee-miel { color: color-mix(in srgb, var(--color-logo-ambre) 45%, var(--fond-page)); }
/* la coupe des deux mondes suit le meme dosage, sinon elle disparait entre deux sols plus marques */
.portes-bloc .coupe {
    background: linear-gradient(96deg,
        var(--fond-page) 0 40%,
        color-mix(in srgb, var(--color-logo-jaune) 17%, var(--fond-page)) 50% 100%); }

/* 30. LES SIX UNIVERS REJOIGNENT LES DEUX MONDES — Ruben, 10/09 : « est-ce que la section “tout ce qui
   entre dans une ruche” est vraiment utile ? qu'apporte-t-elle par rapport aux sections adjacentes ? »

   LA QUESTION POSÉE, ET LA RÉPONSE LUE SUR LA PAGE ELLE-MÊME :
     ce qui précède : « Deux mondes » = matériel apicole / univers gourmand
     la section     : six univers    = Ruches · Miellerie · Essaims · Au rucher · Parrainage · Propolis
     ce qui suit    : Königin        = un zoom sur « Matériel de miellerie »
   ➜ QUATRE des six sont DANS le matériel, UN est dans le gourmand, et Königin est un zoom sur un
     septième : la page disait TROIS FOIS le même routage, à trois niveaux de détail. Et le menu du
     cadre commun porte déjà les six univers.

   ⚠️ Elle n'était pas inutile pour autant — et c'est là que la réponse se retourne. Elle portait les
   deux entrées que les deux portes ENTERRENT : « Essaims et reines » (45 % des commandes sont des
   réservations d'essaims) et « Parrainage de ruches » (position 2,74 sur Google).

   ➜ Ce n'était donc ni garder ni supprimer : c'était FUSIONNER. Les six remontent SOUS les deux mondes,
     en deux colonnes — à gauche ce qu'il y a derrière le matériel, à droite ce qu'il y a derrière le
     gourmand. Une étape au lieu de deux, aucune répétition, et les deux entrées qui comptent gagnent un
     niveau au lieu d'en perdre un. La page passe de cinq étapes à QUATRE, et chacune dit une chose. */
/* ⚠️ la classe s'appelle `derriere` et pas `rayons` : `.rayons a::before` existe DEJA au §17.3
   pour la page d'univers, et posait une alveole d'ambre sous la premiere lettre de chaque nom.
   Une classe generique reprise dans un autre contexte herite de tout ce qu'on lui a mis ailleurs. */
.derriere { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-6); }
.derriere-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.derriere-col li { border-top: var(--trait-fin) solid var(--filet); }
.derriere-col li:last-child { border-bottom: var(--trait-fin) solid var(--filet); }
.derriere-col a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-3);
           padding: 12px 2px; text-decoration: none; color: var(--texte-titre);
           font-family: var(--font-titres); font-weight: var(--titres-graisse);
           font-variation-settings: var(--titres-variation); font-size: var(--text-intertitre); line-height: 1.25; }
.derriere-col em { font-style: normal; font-family: var(--font-texte); font-weight: 400;
            font-variation-settings: "slnt" -10; font-size: var(--text-fine);
            color: var(--texte-second); text-align: right; flex: 0 1 26ch; line-height: 1.45; }
.derriere-col a:hover, .derriere-col a:focus-visible { color: var(--texte-accentue); }
.derriere-col a:hover em { color: var(--texte); }
.portes-bloc > .porte-pro { margin: var(--spacing-4) 0 0; }
@media (min-width: 900px) {
  /* deux colonnes qui se TOUCHENT ne sont pas deux colonnes : « …cire gaufrée » butait dans « Beauté et
     soins à la propolis ». Une vraie gouttière, et un filet vertical au milieu pour dire que ce sont
     bien deux mondes — le même filet que celui des lignes, pas un trait de plus. */
  .derriere { grid-template-columns: 1fr 1fr; column-gap: var(--spacing-6); align-items: start; }
  .derriere > .derriere-col:last-child { border-left: var(--trait-fin) solid var(--filet);
                                padding-left: var(--spacing-5); margin-left: calc(-1 * var(--spacing-4)); }
  .derriere-col em { flex: 0 1 22ch; }
  .portes-bloc > .derriere, .portes-bloc > .porte-pro {
      margin-left: var(--marge-page); margin-right: var(--marge-page); }
}


[hidden] { display: none !important; }
html, body { background: var(--o-cire); color: var(--o-encre); }
body { font: 16px/1.55 "Commissioner", "Segoe UI", Arial, sans-serif; }
.o :focus-visible { outline: 2px solid var(--brun); outline-offset: 3px; }
.o .repere { display: none; }













 
.cookies { position: fixed; left: 20px; bottom: 20px; z-index: 30; max-width: 400px; background: var(--o-bloc); border-top: 4px solid var(--o-jaune); padding: 16px 18px; font: 13.5px/1.5 "Commissioner", sans-serif; box-shadow: 0 10px 30px rgba(42,18,9,.12); }
.cookies p { margin: 0 0 10px; }
.cookies div { display: flex; gap: 10px; }
.cookies button { flex: 1; min-height: var(--o-taille-touche); font: 700 14px "Commissioner", sans-serif; background: var(--o-bloc); color: var(--o-brun); border: 1.5px solid var(--o-brun); cursor: pointer; }
.o .entete .marque { line-height: 0; flex: none; }
.o .entete .outils a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); text-decoration: none; color: var(--brun); }
.o .entete .outils svg { width: 20px; height: 20px; }
.o .entete details.compte { position: relative; }
.o .entete details.compte summary .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .entete details.compte summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); cursor: pointer; color: var(--brun); font-weight: 600; font-size: 14px; }
.o .entete details.compte summary::-webkit-details-marker { display: none; }
.o .entete details.compte ul { position: absolute; right: 0; top: 100%; z-index: 20; list-style: none; margin: 6px 0 0; padding: 8px 0; min-width: 220px; background: var(--bloc); box-shadow: 0 12px 30px -12px rgba(42,18,9,.35); border-top: 3px solid var(--jaune); }
.o .entete details.compte ul a { display: flex; min-height: var(--o-taille-touche); align-items: center; padding: 0 18px; font-size: 14px; }
.o .entete details.compte ul a:hover { background: var(--cire); }
.o .services a { text-decoration: none; color: var(--second); }
.o .services a.pro-lien { color: var(--nuit); }
.o h2.etiq-c { font-family: var(--corps); font-variation-settings: normal; font-weight: 700; font-size: 12px; letter-spacing: .14em; line-height: 1.3; color: var(--brun); }
.o .ouverture-claire h1 { font-size: 58px; max-width: 15ch; }
.o .ouverture-claire h1 .h1-suite { display: block; margin-top: 14px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--encre); max-width: 26ch; }
.o .ouv-photo { position: relative; }
.o .retrait-o { position: relative; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14.5px; color: var(--second); max-width: 46ch; }
.o .retrait-o b { color: var(--encre); }
.o .fine-saison { position: relative; margin: 22px 0 0; font-size: 14.5px; color: var(--second); max-width: 46ch; }
.o .rayons .aussi { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 22px 0 0; }
.o .rail-fleches { display: flex; gap: 8px; }
.o .rail-fleches button { width: var(--o-taille-touche); height: var(--o-taille-touche); border-radius: var(--o-rayon-rond); border: 0; background: var(--bloc); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font-size: 18px; cursor: pointer; }
.o .rail-fleches button:hover { background: var(--brun); color: var(--sur-brun); }
.o .btn-brun, .o .btn-nuit { border: 0; cursor: pointer; font-family: var(--corps); }
.o .pro-fait { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 14.5px; }
.o .konigin-o { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 10px; padding-bottom: 80px; }
.o .konigin-o .a-photographier { min-height: 520px; }
.o .konigin-o h2 { margin: 0 0 14px; font-size: 38px; line-height: 1.1; color: var(--brun); letter-spacing: -.018em; }
.o .konigin-o > div > p.intro-k { margin: 0 0 22px; color: var(--second); font-size: 17px; }
.o .konigin-o > div > p.intro-k b { color: var(--encre); }
.o .familles-o { margin: 0 0 26px; }
.o .familles-o .etiq-c { margin: 14px 0 6px; }
.o .deux-o { padding-top: 70px; padding-bottom: 20px; }
.o .deux-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.o .monde { background: var(--bloc); display: grid; grid-template-rows: auto 1fr; }
.o .monde > a { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; padding: 22px 26px; text-decoration: none; }
.o .monde .objet { height: 210px; }
.o .monde .objet > img { max-width: 70%; max-height: 80%; }
.o .monde h3 { margin: 0 0 8px; font-size: 28px; color: var(--brun); font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; }
.o .monde em { font-style: normal; color: var(--second); font-size: 15px; }
.o .monde .univers-liste { border-top: 1px solid var(--trait); }
.o .monde .univers-liste li { padding: 12px 26px; }
.o .monde .univers-liste li span { color: var(--second); font-size: 14px; text-align: right; }
.o .porte-pro { margin: 20px 0 0; font-size: 15px; color: var(--second); }
.o .a-photographier { position: relative; margin: 0; min-height: 300px; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1.5px #CDBB92; }
.o .ap-centre { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 26px 26px 120px; --fond-picto: var(--o-creux); }
.o .a-photographier:not(:has(.ap-avantage)) .ap-centre { padding-bottom: 26px; }
.o .ap-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--nuit); background: var(--jaune); padding: 3px 9px; }
.o .ap-sujet { font-size: 15px; color: var(--second); max-width: 30ch; }
.o .ap-avantage { position: absolute; left: 18px; right: 18px; bottom: 18px; background: var(--bloc); border-top: 4px solid var(--jaune); padding: 16px 18px; display: grid; gap: 4px; text-align: left; }
.o .ap-avantage small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--brun); }
.o .ap-avantage b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--brun); }
.o .ap-avantage > span { font-size: 14px; color: var(--second); }
.o .galerie-o { position: relative; background: var(--bloc); }
.o .galerie-piste { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.o .galerie-piste::-webkit-scrollbar { display: none; }
.o .galerie-piste > * { scroll-snap-align: start; height: 540px; }
.o .galerie-piste .objet-grand { height: 540px; }
.o .galerie-piste .a-photographier { min-height: 0; box-shadow: none; }
.o .galerie-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--trait); }
.o .vignettes { display: flex; gap: 8px; flex-wrap: wrap; }
.o .vignettes button { font: 600 13px var(--corps); color: var(--second); background: var(--cire); border: 0; box-shadow: inset 0 0 0 1px var(--trait); padding: 8px 12px; min-height: 40px; cursor: pointer; }
.o .vignettes button[aria-current="true"] { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .dc-pro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; font-size: 14.5px; color: var(--second); }
.o .dc-pro b { color: var(--encre); } .o .dc-pro a { color: var(--brun); font-weight: 600; }
.o .qte-ligne { display: flex; gap: 14px; align-items: end; margin: 0; }
.o .qte-ligne .btn-brun { flex: 1; text-align: center; padding: 16px 22px; font-size: 15px; }
.o .epuise-o { background: var(--creux); padding: 18px 20px; display: grid; gap: 8px; margin: 0 0 18px; font-size: 15px; }
.o .epuise-o form { display: grid; gap: 10px; }
.o .epuise-o label { display: grid; gap: 6px; font-size: 13px; color: var(--second); }
.o .epuise-o input { font: inherit; padding: 12px; border: 1.5px solid var(--second); background: var(--bloc); }
.o .bloc-faq details.faq-q { display: block; padding: 0; }
.o .bloc-faq details.faq-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 24px; }
.o .bloc-faq details.faq-q summary::-webkit-details-marker { display: none; }
.o .bloc-faq details.faq-q p { margin: 0; padding: 0 24px 18px; font-size: 15px; }
.o .avis-titre { margin: 0 0 14px; font-size: 26px; color: var(--brun); grid-column: 1 / -1; }
.o .barre-geste { position: sticky; bottom: 0; z-index: 8; display: none; background: var(--bloc); border-top: 4px solid var(--jaune); padding: 10px 20px; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.o .article-o { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding-top: 26px; padding-bottom: 60px; align-items: start; }
.o .article-o h1 { margin: 0 0 18px; font-size: 56px; line-height: 1.03; color: var(--brun); letter-spacing: -.02em; }
.o .deux-phrases { margin: 0 0 16px; font-size: 20px; line-height: 1.5; color: var(--encre); max-width: 60ch; }
.o .modeles { margin: 0 0 30px; font-size: 15px; color: var(--second); }
.o .modeles a { color: var(--brun); font-weight: 700; }
.o .photo-article { min-height: 340px; }
.o .schema-o { background: var(--bloc); padding: 26px 28px 22px; margin: 34px 0 40px; border-top: 4px solid var(--jaune); }
.o .schema-o h2 { margin: 0 0 12px; font-size: 30px; color: var(--brun); }
.o .schema-o > p { margin: 0 0 18px; color: var(--second); }
.o .schema-o figure { margin: 0; }
.o .schema-o figcaption { margin-top: 14px; font-size: 14px; color: var(--second); }
.o .schema-o figcaption b { color: var(--encre); }
.o .schema-o figcaption .source { display: block; margin-top: 8px; font-size: 12.5px; }
.o .corps-o { max-width: 70ch; font-size: 17px; line-height: 1.7; }
.o .corps-o h2 { margin: 44px 0 14px; font-size: 32px; line-height: 1.12; color: var(--brun); }
.o .corps-o p { margin: 0 0 18px; }
.o .corps-o p.chapo { font-size: 19px; color: var(--encre); }
.o .corps-o a { color: var(--brun); font-weight: 600; }
.o .corps-o > a { display: block; margin: 20px 0 4px; }
.o .corps-o ul.list { list-style: none; margin: 0 0 22px; padding: 18px 22px; background: var(--bloc); display: grid; gap: 10px; }
.o .corps-o ul.list li { position: relative; padding-left: 26px; }
.o .corps-o ul.list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 13px; background: var(--jaune); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .corps-o ol { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: av; display: grid; gap: 12px; }
.o .corps-o ol li { counter-increment: av; display: grid; grid-template-columns: 34px 1fr; gap: 16px; background: var(--bloc); padding: 18px 20px; }
.o .corps-o ol li::before { content: counter(av); width: 34px; height: 34px; border-radius: var(--o-rayon-rond); background: var(--jaune); color: var(--nuit); font: 700 15px/34px var(--corps); text-align: center; }
.o .corps-o ol li p { margin: 0; }
.o .citation-o { margin: 8px 0 30px; }
.o .citation-o blockquote { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--sur-brun); }
.o .cote-o { position: sticky; top: 20px; display: grid; gap: 18px; }
.o .cote-o .horaires h2 { margin: 0 0 4px; font-size: 22px; color: var(--brun); }
.o .cote-o h2.etiq-c { margin: 0 0 10px; }
.o .pied-article-o { padding-bottom: 70px; }
.o .pied-article-o h2 { margin: 0 0 18px; font-size: 34px; color: var(--brun); }
.o .pied-article-o ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.o .pied-article-o a { background: var(--bloc); padding: 20px 22px; text-decoration: none; display: flex; gap: 14px; align-items: center; border-left: 4px solid var(--jaune); height: 100%; --fond-picto: var(--o-bloc); }
.o .pied-article-o b { display: block; font-size: 17px; color: var(--encre); }
.o .pied-article-o em { font-style: normal; font-size: 14px; color: var(--second); }
.o .legal { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--brun); }
.o .legal a { display: inline; color: var(--second-brun); font-size: 13px; }
@media (max-width: 960px) {
  .o .w, .maquette .mw { padding-left: 20px; padding-right: 20px; }
  .o .ouverture-claire { overflow-x: clip; }
  .o .ouv-grille, .o .rayons-grille, .o .pro-grille, .o .jan-grille, .o .fiche-grille, .o .cartes-avantages, .o .fiche-bas2, .o .bloc-conseils,
  .o .fiche-avec, .o .bloc-avis-partage, .o .konigin-o, .o .deux-grille, .o .article-o, .o .pied-article-o ul, .o .magasin-carte { grid-template-columns: 1fr; gap: 22px; }
  .o .marques-rang, .o .reassurance, .o .chiffres-rang, .o .ft-3, .o .pied-grille { grid-template-columns: 1fr 1fr; }
  .o .chiffres-rang div:nth-child(3) { background: none; padding-left: 0; } .o .chiffres-rang b { font-size: 44px; }
  .o .ouv-texte { padding: 30px 0; } .o .ouv-photo { margin: 0 -20px; order: -1; } .o .ouv-photo > img { width: 100%; height: 340px; object-fit: cover; }
  .o .ouverture-claire h1, .o .article-o h1 { font-size: 40px; } .o .ouverture-claire h1 .h1-suite { font-size: 21px; }
  .o .rayon-grand { grid-row: auto; } .o .rail-piste { grid-auto-columns: 72%; } .o .rail-campagne { grid-column: span 1; grid-template-columns: 1fr; grid-template-rows: 200px auto; }
  .o .rail-fleches { display: none; } .o .monde > a { grid-template-columns: 1fr; } .o .monde .objet { height: 180px; } .o .konigin-o .a-photographier { min-height: 300px; }
  .o .galerie-piste > *, .o .galerie-piste .objet-grand { height: 380px; }
  .o .decision-o h1 { font-size: 34px; } .o .cote-o { position: static; } .o .barre-geste { display: grid; }
  body:has(.o .barre-geste) .cookies { bottom: 96px; }   /* 18/09 — relecture UX : le bandeau ne recouvre plus la barre d’achat */
  .o .pied-grille > img { display: none; }
  .o .bloc-logistique { grid-template-columns: 1fr; } .o .objet-grand { height: 360px; } .o .dc-prix { gap: 6px; } .o .prix-grand { font-size: 42px; }
  .o .fiche-grille, .o .fiche-bas2, .o .fiche-avec { overflow-wrap: anywhere; } .o .qte input { width: 72px; }
}

/* ═══ LA CHARTE O SUR LE FOND — jetons, puis composants ═══ */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --color-papier: var(--o-cire); --color-surface: var(--o-bloc); --color-encre: var(--o-encre); --color-gris: var(--o-second); --color-trait: var(--o-trait);
  --color-accent: var(--o-brun); --color-accent-fort: #3E1A0C; --color-sur-accent: var(--o-sur-sombre); --color-sombre: var(--o-brun); --color-sur-sombre: var(--o-sur-sombre);
  --color-ferme: var(--o-etat-attente); --color-ferme-fond: var(--o-etat-attente-fond); --color-succes: var(--o-etat-ok); --color-erreur: var(--o-etat-non);
  --pan-coupe: none; --sous-style: normal; --sous-variation: normal; --radius-doux: 4px;
  --font-titres: "Fraunces", Georgia, "Times New Roman", serif; --font-texte: "Commissioner", "Segoe UI", Arial, sans-serif; --font-sous: "Commissioner", "Segoe UI", Arial, sans-serif;
}
body { background: var(--o-cire); color: var(--o-encre); }
.o-cadre-haut, .o-cadre-bas { background: transparent; }
.o-cadre-bas { margin-top: auto; }
h1, h2, h3 { color: var(--o-brun); font-weight: 700; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
h1 { letter-spacing: -.02em; }
.crumb { font-style: normal; font-size: 14px; color: var(--o-second); }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--o-brun); }
a:hover { color: #3E1A0C; }
/* le bouton de la charte : brun plein, capitales espacées, angles droits ; le secondaire, bordé de brun */
.btn { background: var(--o-brun); border-color: var(--o-brun); color: var(--o-sur-sombre); border-radius: var(--o-rayon-net); font: 700 14px/1 "Commissioner", "Segoe UI", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.btn:hover { background: #3E1A0C; border-color: #3E1A0C; color: var(--o-sur-sombre); }
.btn.secondary { background: var(--o-bloc); color: var(--o-brun); border-color: var(--o-brun); }
.btn.secondary:hover { background: var(--o-cire); color: var(--o-brun); }
/* les blocs : blancs sur la cire, sans ombre ; la décision sous le filet jaune de la charte */
.decide { background: var(--o-bloc); border: 0; border-top: 4px solid var(--o-jaune); box-shadow: none; }
.option { background: var(--o-bloc); border-color: var(--o-trait); }
.option:has(input:checked) { border-color: var(--o-brun); background: #FFF8E1; }
.closed { background: var(--o-etat-attente-fond); border-color: transparent; }
/* l'état, en pastille comme dans la charte */
.etat { border-radius: var(--o-rayon-pilule); text-transform: none; letter-spacing: 0; font-size: 13px; padding: 4px 11px 4px 8px; border-color: transparent; background: var(--o-etat-attente-fond); color: var(--o-etat-attente); }
.etat.ouvert { background: var(--o-etat-ok-fond); color: var(--o-etat-ok); border-color: transparent; }
.etat.ferme { border: 1px dashed #B9AC95; background: transparent; color: var(--o-etat-attente); }
/* ce que la charte O a retiré : le patch posé sur les photos, le pan coupé, la coulée */
.patch-pose, .coulee-miel { display: none !important; }
.cadre-photo, .photo > img, .tuile img { clip-path: none; }
/* les planches de la charte (build_da_o) posent quelques règles sans .o : le fond garde les siennes */
.famille { margin: 0; font-size: inherit; letter-spacing: normal; }