/* Guide Café — feuille de style de production (mobile-first, base 360 ; min-width 640 / 900 / 1024 / 1440) */

/* ---------- tokens ---------- */
:root {
  --bg: #F2F4EF;
  --ink: #14180F;
  --green: #3F7A4E;
  --green-deep: #2F5C3A;
  --green-ink: #6FB07E;
  --roast: #B4531E;
  --roast-deep: #8F4218;
  --roast-ink: #E27A3C;
  --roast-light: #BD6B3D;
  --cream: #EADFC8;
  --white: #FFFFFF;
  --ink85: rgba(20, 24, 15, .85);
  --ink8: rgba(20, 24, 15, .8);
  --ink75: rgba(20, 24, 15, .75);
  --ink7: rgba(20, 24, 15, .7);
  --ink65: rgba(20, 24, 15, .65);
  --ink6: rgba(20, 24, 15, .6);
  --ink55: rgba(20, 24, 15, .62);
  --ink5: rgba(20, 24, 15, .5);
  --line: rgba(20, 24, 15, .15);
  --line2: rgba(20, 24, 15, .25);
  --line3: rgba(20, 24, 15, .35);
  --bgline: rgba(242, 244, 239, .18);
  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --r: 6px;
  --r-s: 3px;
  --tabbar-h: 57px;
  --hatch: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 8px, transparent 8px 18px);
}
/* accent par type de page : brun (torréfaction) par défaut, vert (grain cru) sur les origines */
body { --accent: var(--roast); --accent-deep: var(--roast-deep); --accent-ink: var(--roast-ink); }
body.t-origine { --accent: var(--green); --accent-deep: var(--green-deep); --accent-ink: var(--green-ink); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::placeholder { color: var(--ink5); opacity: 1; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); font: 700 13px var(--mono); }
.skip:focus { top: 8px; }
.hp { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.n, .mono { font-family: var(--mono); }
.p .n, .chapeau .n, .calc-note .n, .calc-methnote .n, .etape p .n, .faq dd .n, .ll-d .n, .fdj-p .n, .approx .n, .sources .n, .prod-p .n, .f-note .n, .band-p .n, .idx-intro .n, .rech-q .n { font-size: .92em; color: inherit; }
.dim { opacity: .6; }
.pm { display: none; }
.js .pm { display: flex; }
.js .nojs { display: none; }
.print-only { display: none; }
/* cibles d'ancres : focus déplacé par site.js, sans cadre autour de toute la section */
.fs:focus, .degust:focus, .coupe:focus { outline: none; }
.wrap { padding-left: 20px; padding-right: 20px; max-width: 1440px; margin-left: auto; margin-right: auto; }
.wrap > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- typographie ---------- */
.lab { font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lab-acc { color: var(--accent-deep); }
.lab-dim { color: var(--ink6); font-weight: 400; }
.lab-h { margin-bottom: 12px; }
.h1 { font: 800 40px/.98 var(--display); font-stretch: 108%; letter-spacing: -.03em; text-wrap: pretty; overflow-wrap: anywhere; }
.h2 { font: 800 28px/1 var(--display); letter-spacing: -.02em; text-wrap: pretty; overflow-wrap: anywhere; }
.h3 { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.chapeau { font-size: 19px; line-height: 1.4; margin-top: 14px; color: var(--ink8); max-width: 640px; text-wrap: pretty; }
.p { margin-top: 12px; line-height: 1.5; text-wrap: pretty; }
.p a, .chapeau a, .ll-d a, .faq a, .sources a, .calc-note a, .f-note a, .prod-note a { color: var(--accent-deep); }
.pays { color: var(--green); }
.fond-roast { background: var(--roast); color: var(--bg); }
.fond-green { background: var(--green); color: var(--bg); }
.fond-cream { background: var(--cream); color: var(--ink); }
.fond-ink { background: var(--ink); color: var(--bg); }
.dots-on { color: var(--accent); }
.dots-off { opacity: .35; }
.vide { font-size: 19px; font-weight: 700; margin-top: 8px; overflow-wrap: anywhere; text-wrap: pretty; }
.vide-b { max-width: 640px; }

/* ---------- icônes ---------- */
.ic { width: 1em; height: 1em; flex: none; stroke-width: 2; }
.ic-mat { width: 28px; height: 28px; stroke-width: 1.75; }

/* ---------- barre haute ---------- */
.top { position: relative; z-index: 20; background: var(--bg); border-bottom: 1.5px solid var(--ink); }
.top-in { display: flex; align-items: center; gap: 6px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; margin-right: auto; padding: 12px 0; border-radius: var(--r); }
.brand-embleme { width: 24px; height: 24px; flex: none; }
.brand-wordmark { width: 127px; height: 16px; flex: none; }
.wordmark-t { font-family: 'Archivo', sans-serif; font-stretch: 110%; }
.top-in .top-search, .top-in .top-nav { display: none; }
.top-btn { width: 44px; height: 44px; display: none; align-items: center; justify-content: center; border-radius: var(--r); }
.js .top-btn { display: flex; }
.top-btn .ic { width: 22px; height: 22px; }
/* sans JS : le burger est remplacé par un lien vers le plan du site (pied de page) */
.menu-nojs { display: flex; width: auto; padding: 0 10px; font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--ink); }
.js .menu-nojs { display: none; }
.burger .ic-croix { display: none; }
.burger[aria-expanded="true"] .ic-menu { display: none; }
.burger[aria-expanded="true"] .ic-croix { display: block; }
.menu { border-top: 1px solid var(--line); background: var(--bg); padding: 16px 0 24px; }
.menu-open .tabbar { display: none; }
.menu-nav { margin-top: 20px; }
.menu-nav .lab { color: var(--accent-deep); margin-top: 18px; }
.menu-nav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.menu-nav li a[aria-current] { color: var(--accent-deep); }

/* panneau de recherche mobile (loupe + onglet « Recherche » de la tab bar) : plein écran sous la
   barre haute, indépendant du menu complet ; verrouille le défilement du fond pendant qu'il est ouvert */
.rech-panel { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--bg); padding-bottom: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rech-open { overflow: hidden; }
.rech-panel-in { padding-top: 12px; }
.rech-search { margin-top: 14px; }

/* recherche */
.search { position: relative; display: flex; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 0 14px; }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-ic { display: flex; color: var(--ink); }
.search-ic .ic { width: 18px; height: 18px; stroke-width: 2.5; }
.search-in { flex: 1; min-width: 0; border: 0; background: none; font-size: 17px; padding: 12px 0; outline: none; -webkit-appearance: none; appearance: none; border-radius: 0; }
.search-in::-webkit-search-cancel-button, .search-in::-webkit-search-decoration { -webkit-appearance: none; }
.search-kbd { display: none; font: 400 12px var(--mono); color: var(--ink55); border: 1px solid var(--line2); border-radius: var(--r-s); padding: 2px 6px; }
.search-page { padding-right: 6px; }
.search-btn { flex: none; min-height: 38px; padding: 8px 14px; }
.hero-search { margin-top: 18px; border-width: 2px; }
/* accueil mobile : le champ du hero est à l'écran, la loupe de la barre haute serait un doublon */
.js .t-home .top-loupe { display: none; }
.hero-search .search-in { padding: 13px 0; }
.sug { position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 4px); background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); z-index: 30; overflow: hidden; }
.sug a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; text-decoration: none; font-size: 16px; border-top: 1px solid var(--line); }
.sug a:first-child { border-top: 0; }
.sug a:hover, .sug a[aria-selected="true"] { background: var(--cream); }
.sug-m { font: 400 12px var(--mono); color: var(--ink55); flex: none; text-align: right; }
.sug-vide { padding: 12px 14px; font-size: 15px; color: var(--ink6); overflow-wrap: anywhere; }

/* ---------- chips, segments, boutons ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip, .seg { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 999px; font: 400 12px/1.2 var(--mono); text-decoration: none; background: transparent; transition: transform .12s ease-out, border-color .12s; }
.seg { border-color: var(--line3); }
.chip:hover, .seg:hover { border-color: var(--ink); }
.chip:active, .seg:active, .tuile:active, .carte-a:active { transform: scale(.98); }
.chip.is-on, .seg.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.segs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px; border-radius: var(--r); font: 700 13px/1.2 var(--mono); text-decoration: none; border: 1.5px solid transparent; transition: transform .12s ease-out; }
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-line { background: var(--white); border-color: var(--ink); color: var(--ink); }
.btn-acc { background: var(--accent-deep); color: var(--bg); border-color: var(--accent-deep); }
.btn .ic { width: 16px; height: 16px; }
.lien-fl { display: inline-flex; align-items: center; min-height: 44px; font: 400 12px var(--mono); text-decoration: none; padding: 12px 0; white-space: nowrap; }
.lien-fl:hover { color: var(--accent-deep); }

/* ---------- fil d'Ariane : « ← Parent » / repère à droite sous 640, liste complète au-delà ---------- */
.fil { padding-top: 12px; }
.fil-m { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 12px/1.3 var(--mono); color: var(--ink6); }
.fil-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 12px 0; text-decoration: none; letter-spacing: .02em; }
.fil-back:hover { color: var(--ink); }
.fil-num { font-weight: 700; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.fil ol { display: none; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 400 12px/1.3 var(--mono); color: var(--ink6); }
.fil li { display: flex; align-items: center; gap: 10px; }
.fil li + li::before { content: "/"; }
.fil a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 0; }
.fil a:hover { color: var(--ink); }
.fil [aria-current] { color: var(--ink); font-weight: 700; padding: 12px 0; }

/* ---------- accueil ---------- */
.hero { padding-top: 26px; }
.hero-cnt { margin: 0; }
.hero-h { font: 800 40px/.98 var(--display); font-stretch: 108%; letter-spacing: -.03em; margin-top: 10px; text-wrap: pretty; overflow-wrap: anywhere; }
.hero-p { display: none; font-size: 19px; line-height: 1.4; margin-top: 16px; max-width: 640px; color: var(--ink8); text-wrap: pretty; }
.hero-chips { margin-top: 12px; }
.fdj { display: grid; grid-template-columns: 120px minmax(0, 1fr); border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--white); text-decoration: none; margin-top: 34px; transition: transform .15s; }
.fdj:hover { transform: translateY(-2px); }
.fdj-top { position: relative; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; background-image: var(--hatch); }
.fdj-lab, .fdj-num { font: 700 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.fdj-num { font-weight: 400; }
.fdj-body { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fdj-body .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdj-nom { font: 800 24px/1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.fdj-p { font-size: 15px; line-height: 1.35; color: var(--ink75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fdj-meta { font: 400 12px var(--mono); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec { margin-top: 34px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sec-h .lab-h, .sec-h .h2 { margin-bottom: 0; }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tuiles > li { min-width: 0; }
.tuile { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 124px; height: 100%; padding: 14px 14px 12px; border-radius: var(--r); text-decoration: none; transition: transform .15s ease-out; }
a.tuile:hover { transform: translateY(-2px); }
.tuile-meta { font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.tuile-nom { font: 800 22px/1 var(--display); font-stretch: 105%; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tuile-ink { background: var(--ink); color: var(--bg); }
.tuile-cream { background: var(--cream); color: var(--ink); }
.tuile-roast { background: var(--roast); color: var(--bg); }
.tuile-roast-light { background: var(--roast-light); color: var(--ink); }
.tuile-green { background: var(--green); color: var(--bg); }
.tuile-white { background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); }
.tuile-white-light { background: var(--white); color: var(--ink); border: 1.5px solid var(--line2); }
.tuile-roast .tuile-meta, .tuile-roast-light .tuile-meta { opacity: 1; }
.tuile-green .tuile-meta { opacity: 1; }
.tuile-off { opacity: .5; }
/* tuile avec photo de la boisson phare : image en fond, voile vertical de la couleur de la famille
   (15 % en haut, 85 % en bas), texte par-dessus ; sans photo, la tuile reste un aplat */
.tuile { position: relative; overflow: hidden; }
.tuile-photo { --v0: rgba(20, 24, 15, .15); --v1: rgba(20, 24, 15, .85); --vb: multiply; }
.tuile-photo .tuile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .15s ease-out; }
.tuile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--v0), var(--v1)); mix-blend-mode: var(--vb); pointer-events: none; }
.tuile-photo .tuile-meta, .tuile-photo .tuile-nom { position: relative; z-index: 1; }
/* le méta (12 px mono) est en haut, là où le voile est le plus léger : plaque comme sur la fiche du jour */
.tuile-photo .tuile-meta { opacity: 1; align-self: flex-start; padding: 3px 7px; border-radius: var(--r-s); background: var(--ink85); color: var(--bg); }
.tuile-cream.tuile-photo .tuile-meta, .tuile-white.tuile-photo .tuile-meta, .tuile-white-light.tuile-photo .tuile-meta { background: rgba(242, 244, 239, .88); color: var(--ink); }
.tuile-photo:hover .tuile-img { transform: scale(1.03); }
/* voiles : sombres (encre, brun, brun clair, vert) en multiply avec texte fond ; clairs (crème, blanc) en normal avec texte encre.
   Sur les bruns, le bas du voile est le brun sombre (--roast-deep) pour tenir 4,5:1 sur le titre quelle que soit la photo. */
.tuile-cream.tuile-photo { --v0: rgba(234, 223, 200, .15); --v1: rgba(234, 223, 200, .85); --vb: normal; }
.tuile-white.tuile-photo, .tuile-white-light.tuile-photo { --v0: rgba(255, 255, 255, .15); --v1: rgba(255, 255, 255, .85); --vb: normal; }
.tuile-roast.tuile-photo { --v0: rgba(180, 83, 30, .15); --v1: rgba(143, 66, 24, .85); }
.tuile-roast-light.tuile-photo { --v0: rgba(189, 107, 61, .15); --v1: rgba(143, 66, 24, .85); color: var(--bg); }
.tuile-green.tuile-photo { --v0: rgba(63, 122, 78, .15); --v1: rgba(47, 92, 58, .85); }

/* ---------- bande horizontale à défilement (vitrine, boissons proches, préparations) ----------
   Un seul composant, un seul comportement : .bande sert d'ancre à deux fondus (::before à gauche,
   ::after à droite) et à deux flèches symétriques (.bande-p, .bande-fl) qui font défiler d'un cran.
   site.js pose .is-start (début de piste), .is-end (fin de piste) et .is-fixe (rien à défiler) ;
   la piste elle-même reçoit .bande-drag quand le glisser souris est actif. */
.bande { position: relative; margin: 0 -20px; }
.bande::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; }
.bande.is-end::after { display: none; }
/* fondu de gauche : symétrique du droit, mais uniquement une fois le défilement commencé (sans JS,
   la piste est toujours à son début et un fondu à gauche mentirait) */
.bande::before { content: ""; display: none; position: absolute; top: 0; left: 0; bottom: 0; width: 32px; background: linear-gradient(to left, transparent, var(--bg)); pointer-events: none; z-index: 1; }
.js .bande:not(.is-start)::before { display: block; }
/* plaque encre semi-opaque (même logique que carte-num) pour rester lisible sur une photo :
   filigrane par l'opacité du bouton entier, jamais du texte transparent seul */
.bande-fl { display: none; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r); background: var(--ink85); font: 400 18px/1 var(--mono); color: var(--bg); opacity: .45; transition: opacity .12s; }
.bande-p { display: none; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r); background: var(--ink85); font: 400 18px/1 var(--mono); color: var(--bg); opacity: .45; transition: opacity .12s; z-index: 2; }
.js .bande-fl { display: inline-flex; }
.js .bande:not(.is-start) .bande-p { display: inline-flex; }
.bande-fl:hover, .bande-fl:focus-visible, .bande-p:hover, .bande-p:focus-visible { opacity: .85; }
.bande.is-end .bande-fl { display: none; }
/* piste plus courte que sa colonne : ni flèche ni fondu, il n'y a rien à faire défiler */
.bande.is-fixe .bande-fl, .bande.is-fixe::after { display: none; }
/* glisser à la souris : le curseur annonce la prise, la sélection de texte et le calage par crans
   se coupent le temps du geste (sinon la piste se recale sous la souris à chaque pixel) */
.bande-drag { cursor: grab; }
.bande-drag.is-drag, .bande-drag.is-drag a { cursor: grabbing; }
.bande-drag.is-drag { scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
/* bande posée dans la colonne de texte d'un dossier : elle reste dans sa colonne (le débord plein
   cadre la faisait passer par-dessus le sommaire à gauche et les encadrés à droite) et s'aligne
   sur la gouttière du texte, comme les paragraphes qui l'encadrent */
.bande.bande-g { margin: 0; max-width: 100%; }

/* vitrine du jour : bande horizontale à crans, défile dans son conteneur (jamais le body) */
.vit-h { align-items: center; }
.vit-side { display: flex; align-items: center; gap: 16px; flex: none; }
.vit-nav { display: none; gap: 8px; }
.vit-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: var(--r); font: 400 16px/1 var(--mono); transition: background-color .12s, color .12s; }
.vit-btn:hover { background: var(--ink); color: var(--bg); }
.vit-l { display: flex; gap: 12px; padding: 4px 20px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.vit-l::-webkit-scrollbar { display: none; }
.vit-l > li { flex: none; width: 128px; scroll-snap-align: start; }
.vit-a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; border-radius: var(--r); }
.vit-ph { display: block; overflow: hidden; border-radius: var(--r); background: var(--cream); }
.vit-img { width: 128px; height: 128px; object-fit: cover; transition: transform .15s ease-out; }
.vit-a:hover .vit-img { transform: scale(1.03); }
.vit-nom { font: 800 15px/1.1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.vit-ratio { font: 400 12px/1.3 var(--mono); color: var(--ink6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outils-l { display: flex; flex-direction: column; gap: 8px; }
/* le chapeau d'un dossier est plus long qu'un sous-titre d'outil : on le coupe pour garder des cartes de hauteur comparable */
.dos-l .outil-s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.outil { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; background: var(--cream); border-radius: var(--r); text-decoration: none; transition: transform .15s ease-out; }
.outil:hover { transform: translateY(-2px); }
.outil-meta { display: none; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.outil-txt { flex: 1; min-width: 0; }
.outil-t { display: block; font-weight: 700; font-size: 17px; line-height: 1.2; }
.outil-s { display: block; font-size: 14px; color: var(--ink65); margin-top: 2px; }
.outil-fl .ic { width: 18px; height: 18px; }
.outils-g { display: grid; gap: 10px; }
.home-2col > section + section { margin-top: 34px; }

/* ---------- recherches associées ---------- */
.bloc-rech { margin-top: 48px; }
.rech { border-top: 1.5px solid var(--ink); }
.rech li a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.rech li a:hover .rech-q { color: var(--accent-deep); }
.rech-q { font-size: 17px; line-height: 1.3; }
.rech-r { font: 400 12px var(--mono); color: var(--ink55); }

/* ---------- newsletter ---------- */
.nl { margin-top: 48px; background: var(--cream); border-radius: var(--r); padding: 28px 20px; }
.nl-h { font: 800 28px/1 var(--display); letter-spacing: -.03em; margin-top: 8px; text-wrap: pretty; }
.nl-form { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nl-in { flex: 1; min-width: 0; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 12px 14px; font-size: 16px; min-height: 44px; }
.nl-msg { width: 100%; font-size: 15px; margin-top: 4px; font-weight: 600; }

/* ---------- pied de page ---------- */
/* le footer descend derrière la tab bar fixe (au lieu de réserver l'espace sur le body) : sa propre
   couleur (encre, identique à la tab bar) comble l'écart, la dernière ligne (email) reste au-dessus */
.foot { margin-top: 48px; background: var(--ink); color: var(--bg); padding: 36px 0 calc(32px + var(--tabbar-h) + env(safe-area-inset-bottom)); }
.foot-in { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.foot-brand { grid-column: 1 / -1; }
.foot-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.foot-embleme { width: 64px; height: 64px; flex: none; }
.foot-wordmark { width: 170px; height: 100px; flex: none; }
.foot-base { font-size: 15px; color: rgba(242, 244, 239, .6); margin-top: 12px; max-width: 320px; line-height: 1.45; }
.foot-col .lab { margin-bottom: 6px; color: var(--accent-ink); }
.foot-col ul { font-size: 15px; line-height: 1.4; }
.foot-col a { text-decoration: none; display: inline-block; padding: 10px 0; }
.foot-col a:hover { text-decoration: underline; }
.foot-low { grid-column: 1 / -1; border-top: 1px solid var(--bgline); padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font: 400 12px/1.4 var(--mono); color: rgba(242, 244, 239, .7); }
.foot-low a { text-decoration: none; overflow-wrap: anywhere; display: inline-block; padding: 10px 0; margin: -10px 0; }
.foot-low a:hover { text-decoration: underline; }
/* texture de grains derrière le pied de page : image dans une variable, opacité fine sur un pseudo-élément,
   le texte garde son contraste (remplaçable par une photo via --footer-grains sans toucher au reste) */
.footer-grains { position: relative; --footer-grains: url("/static/img/grains.svg"); }
.footer-grains::before { content: ""; position: absolute; inset: 0; background-image: var(--footer-grains); background-size: 480px; background-repeat: repeat; opacity: .06; pointer-events: none; }
.footer-grains > * { position: relative; }

/* ---------- tab bar mobile ---------- */
/* cinq entrées sans JS (l'onglet Recherche est alors le seul accès au champ), quatre avec :
   la loupe de la barre haute fait le même travail. Une seule rangée dans les deux cas :
   --tabbar-h (57px = 56 de contenu + le filet) sert au padding-bas du pied de page. */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ink); color: var(--bg); display: grid; grid-template-columns: repeat(5, 1fr); padding: 0 2px env(safe-area-inset-bottom); border-top: 1px solid var(--bgline); }
.js .tabbar { grid-template-columns: repeat(4, 1fr); padding-left: 4px; padding-right: 4px; }
.js .tab-rech { display: none; }
.tabbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 2px; font: 400 12px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; text-decoration: none; opacity: .7; white-space: nowrap; }
.js .tabbar a { letter-spacing: .04em; }
.tabbar a.is-on { color: var(--accent-ink); font-weight: 700; opacity: 1; }

/* ---------- bandeau de hub / index ---------- */
.band { background: var(--cream); }
.band .wrap { padding-bottom: 22px; }
.band-grid { margin-top: 26px; }
.band-cnt { color: var(--ink); font-weight: 400; letter-spacing: .06em; font-size: 12px; }
.band-h { font: 900 52px/.9 var(--display); font-stretch: 110%; letter-spacing: -.04em; margin-top: 8px; overflow-wrap: anywhere; text-wrap: balance; }
/* titre long (> 18 caractères) : corps réduit, deux lignes au plus sur grand écran */
.band-h-long { font-size: 40px; line-height: .95; }
.band-p { font-size: 17px; line-height: 1.4; margin-top: 14px; color: var(--ink8); text-wrap: pretty; }
.band .chips { margin-top: 14px; }
.hub { padding-top: 14px; }
.legende { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink6); }
.legende .n { font-weight: 700; color: var(--ink); }
.sw { display: inline-block; width: 8px; height: 8px; vertical-align: middle; margin: 0 4px 0 8px; }
.sw:first-child { margin-left: 0; }
.sw-cafe { background: var(--ink); }
.sw-lait { background: var(--cream); border: 1px solid var(--line3); }
.sw-eau { background: var(--bg); border: 1px solid var(--line3); }
.idx-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.idx-h .lab { color: var(--ink6); font-weight: 400; }
.idx-h .h2 { margin-top: 6px; }
.idx-h .h2 a { text-decoration: none; }
.idx-h .h2 a:hover { color: var(--accent-deep); }
.idx-intro { margin-top: 10px; color: var(--ink75); max-width: 640px; text-wrap: pretty; }
.idx-fam + .idx-fam { margin-top: 12px; }
.idx-more { display: flex; justify-content: flex-end; margin-top: -20px; padding-bottom: 8px; }

/* cartes de hub (aplat + numéro + barre de ratio, pas de photo) */
.cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding-bottom: 24px; }
.carte { min-width: 0; }
.carte-a { display: flex; flex-direction: column; height: 100%; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--white); text-decoration: none; transition: transform .15s ease-out; }
.carte-a:hover { transform: translateY(-2px); }
.carte-top { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; height: 88px; padding: 8px; }
.carte-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-top.has-img .carte-num, .carte-top.has-img .carte-int { position: relative; z-index: 1; }
.carte-top.has-img .carte-int { background: var(--ink85); color: var(--bg); padding: 3px 6px; border-radius: var(--r-s); }
/* tête de carte : rotation sur trois teintes par position (le tri JS réordonne les nœuds, la rotation suit) */
.cartes > .carte:nth-child(3n + 1) .carte-top { background: var(--ink); color: var(--bg); }
.cartes > .carte:nth-child(3n + 2) .carte-top { background: var(--roast); color: var(--bg); }
.cartes > .carte:nth-child(3n) .carte-top { background: var(--cream); color: var(--ink); }
.carte-num { font: 700 12px/1 var(--mono); padding: 4px 6px; border-radius: var(--r-s); background: var(--ink85); color: var(--bg); align-self: flex-start; }
/* sur une tête de carte encre, la plaque encre disparaîtrait : elle passe en fond clair */
.cartes > .carte:nth-child(3n + 1) .carte-num { background: rgba(242, 244, 239, .9); color: var(--ink); }
.carte-int { font: 400 12px/1 var(--mono); letter-spacing: .12em; }
.carte-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte-nom { font: 800 19px/1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.carte-pays { font-size: 13px; color: var(--ink6); line-height: 1.2; }
.rb { display: block; width: 100%; height: 8px; border: 1px solid var(--line2); border-radius: 2px; margin-top: auto; box-sizing: content-box; }
.rb-cafe { fill: var(--ink); }
.rb-autre { fill: var(--bg); }
.rb-lait .rb-autre { fill: var(--cream); }
.carte-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font: 400 12px/1.3 var(--mono); }
.carte-ratio { white-space: nowrap; }

/* ---------- fiche boisson ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "entete" "photo" "side" "corps"; padding-top: 26px; }
.fiche-entete { grid-area: entete; }
.fiche-photo { grid-area: photo; margin-top: 22px; }
.fiche-side { grid-area: side; margin-top: 22px; }
.sommaire { display: none; grid-area: som; }
.fiche-corps { grid-area: corps; }
.fiche-h { font: 900 64px/.9 var(--display); font-stretch: 110%; letter-spacing: -.04em; margin-top: 8px; overflow-wrap: anywhere; text-wrap: balance; }
.fiche-chapeau { font-size: 19px; line-height: 1.4; margin-top: 14px; text-wrap: pretty; }
.fiche-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
/* emplacement photo muet : aplat hachuré, numéro de fiche, ratio (aucune note de production) */
.ph { position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; border-radius: var(--r); min-height: 200px; aspect-ratio: 16 / 9; background-image: var(--hatch); display: flex; align-items: flex-end; padding: 12px 14px; }
.ph-num { font: 700 12px/1 var(--mono); letter-spacing: .1em; padding: 5px 7px; border-radius: var(--r-s); background: var(--ink85); color: var(--bg); }
.ph-att { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 clamp(15px, 3.6vw, 22px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .5; pointer-events: none; }
.ph-ratio { position: absolute; right: 14px; top: 12px; font: 400 12px var(--mono); opacity: .85; }
/* sommaire replié (mobile et tablette) */
.sommaire-m { margin-top: 18px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.sommaire-m summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sommaire-m summary::-webkit-details-marker { display: none; }
.sommaire-m summary::after { content: "+"; font-size: 18px; font-weight: 400; }
.sommaire-m[open] summary::after { content: "−"; }
.sommaire-m ol { padding-bottom: 8px; font-size: 16px; line-height: 1.3; }
.sommaire-m a { display: block; padding: 12px 0; text-decoration: none; color: var(--ink85); }
.sommaire-m a:hover, .sommaire-m a.is-on { color: var(--ink); font-weight: 700; }

/* fiche de dégustation (élément signature, en <dl>) */
.degust { background: var(--ink); color: var(--bg); border-radius: var(--r); padding: 18px 18px 16px; font-family: var(--mono); }
.degust-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1.5px solid rgba(242, 244, 239, .9); }
.degust-t { font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.degust-n { font-size: 12px; color: var(--accent-ink); letter-spacing: .08em; }
.degust-g { display: grid; grid-template-columns: 1fr 1fr; }
.dg { padding: 12px 0 12px 14px; border-bottom: 1px solid var(--bgline); min-width: 0; }
.dg:nth-child(odd) { padding-left: 0; padding-right: 12px; border-right: 1px solid var(--bgline); }
.dg dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; line-height: 1.3; }
.dt-court { display: none; }
.dg-v { display: block; font-size: 16px; font-weight: 700; margin-top: 4px; line-height: 1.25; overflow-wrap: break-word; }
.dg-v-l { font-size: 22px; }
.dg-v-s { font-size: 14px; letter-spacing: -.02em; }
.dg-u { font-size: 13px; font-weight: 400; opacity: .7; margin-left: 4px; }
.dg-s { display: block; font-size: 12px; opacity: .7; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.dg-dots { letter-spacing: .12em; }
.degust .dots-on { color: var(--accent-ink); }
.degust .dots-off { opacity: .3; }
.dg-notes, .dg-notes:nth-child(odd) { grid-column: 1 / -1; border: 0; padding: 12px 0 2px; }
.notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.notes li { font-size: 12px; padding: 5px 9px; border: 1px solid var(--accent-ink); border-radius: var(--r-s); }
.fiche-actions { display: flex; gap: 8px; margin-top: 12px; }
.fiche-actions .btn-acc { flex: 1; }
/* vue en coupe : image 4:5 + légende des couches (du haut vers le bas), sans image rien n'est rendu */
.coupe { margin-top: 28px; scroll-margin-top: 32px; }
.coupe-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.coupe-t { font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.coupe-r { font: 400 12px/1.3 var(--mono); letter-spacing: .06em; color: var(--ink6); white-space: nowrap; }
.coupe-g { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; margin-top: 14px; }
.coupe-img { flex: 3 1 168px; min-width: 0; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; }
.coupe-img img { width: 100%; height: 100%; object-fit: cover; }
.coupe-leg { flex: 2 1 112px; min-width: 0; }
.coupe-sens { font: 400 12px/1.3 var(--mono); letter-spacing: .04em; opacity: .6; }
.couches { position: relative; margin-top: 6px; }
.couche { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.couche::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.couche:first-child::before { top: 14px; }
.couche:last-child::before { bottom: auto; height: 14px; }
.cl { position: relative; z-index: 1; flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 2px; border: 1px solid var(--line2); background: var(--bg); }
.cl-mousse { background: color-mix(in srgb, var(--cream) 60%, var(--white)); }
.cl-lait { background: var(--cream); }
.cl-cafe { background: var(--ink); border-color: var(--ink); }
.cl-glace { background: var(--bg); }
.couche-n { font: 400 12px/1.4 var(--mono); min-width: 0; overflow-wrap: anywhere; }
.coupe-note { font-size: 14px; line-height: 1.45; color: var(--ink75); margin-top: 12px; text-wrap: pretty; }
.sommaire ol { border-left: 1.5px solid var(--line); font-size: 15px; line-height: 1.3; margin-top: 12px; }
.sommaire a { display: block; padding: 7px 0 7px 14px; margin-left: -1.5px; border-left: 1.5px solid transparent; color: var(--ink7); text-decoration: none; }
.sommaire a:hover { color: var(--ink); }
.sommaire a.is-on { color: var(--ink); font-weight: 700; border-left-color: var(--ink); }
.sommaire-meta { margin-top: 28px; font: 400 12px/1.7 var(--mono); color: var(--ink6); }
.som-maj { white-space: nowrap; }

/* sections de la fiche (scroll-margin large en mobile : la mise en page bouge encore au chargement des polices) */
.fs { margin-top: 36px; scroll-margin-top: 32px; }
.fs-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.fs-meta { font: 400 12px/1.5 var(--mono); color: var(--ink6); }
.fs-meta a { color: var(--ink); }
.fs .h3, .fs .lab { margin-top: 16px; }
.fs .lab-h { margin-top: 0; }
.ingr { margin-top: 8px; border-top: 1.5px solid var(--ink); }
.ingr li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.ingr li > span:first-child { flex: 1 1 auto; min-width: 0; }
/* quantité : ne rétrécit pas sous sa largeur naturelle, mais peut occuper 60 % et revenir à la ligne si elle est longue */
.ingr .n { flex: 0 0 auto; max-width: 60%; min-width: 0; font-size: 14px; text-align: right; white-space: normal; overflow-wrap: anywhere; }
.etapes { margin-top: 12px; }
.etape { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.etape:last-child { border-bottom: 0; }
.etape-n { font: 700 20px/1.2 var(--mono); color: var(--accent); }
.etape p { font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.mat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mat-i { background: var(--cream); border-radius: var(--r); padding: 12px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; }
.mat-n { font-size: 14px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.prod { margin-top: 20px; }
.prod-l { border-top: 1.5px solid var(--ink); margin-top: 8px; }
.prod-l a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: center; }
.prod-l a:hover .prod-n { color: var(--accent-deep); }
.prod-n { font-weight: 700; font-size: 16px; }
.prod-p { font-size: 14px; color: var(--ink65); grid-column: 1; }
.prod-fl { grid-column: 2; grid-row: 1 / 3; }
.prod-fl .ic { width: 18px; height: 18px; }
.prod-note { font-size: 13px; color: var(--ink6); margin-top: 8px; }
.liste-l { border-top: 1.5px solid var(--ink); }
.liste-l li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ll-txt { min-width: 0; }
.ll-n { font-size: 17px; }
.ll-n a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; display: inline-block; padding: 10px 0; margin: -10px 0; }
.ll-n a:hover { color: var(--accent-deep); }
.ll-d { font-size: 15px; color: var(--ink65); }
.ll-r { font: 400 12px var(--mono); flex: none; }
.proches { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 20px 4px; scroll-padding-inline: 20px; }
.proches::-webkit-scrollbar { display: none; }
.proches li { flex: none; width: 150px; scroll-snap-align: start; }
.proche { display: flex; flex-direction: column; height: 100%; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--white); text-decoration: none; transition: transform .15s; }
.proche:hover { transform: translateY(-2px); }
.proche-top { position: relative; overflow: hidden; height: 64px; padding: 8px; display: flex; align-items: flex-start; }
.proche-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proche-top.has-img .carte-num { position: relative; z-index: 1; }
.proche-body { padding: 10px 12px 12px; display: block; }
.proche-nom { display: block; font: 800 18px/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.proche-meta { display: block; font: 400 12px var(--mono); margin-top: 4px; color: var(--ink65); }
.faq { border-top: 1.5px solid var(--ink); margin-top: 16px; }
.faq-i { padding: 16px 0; border-bottom: 1px solid var(--line); }
.faq dt { font-size: 18px; font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.faq dd { font-size: 16px; line-height: 1.5; color: var(--ink75); margin-top: 6px; text-wrap: pretty; }
.sources { list-style: decimal; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.sources li { margin-top: 6px; overflow-wrap: anywhere; }
.sources a { color: var(--accent-deep); }
.approx { list-style: disc; padding-left: 22px; font-size: 14px; color: var(--ink65); margin-top: 6px; }
.fs .fs-meta:last-child { margin-top: 20px; }

/* ---------- pages : outils, système, recherche ---------- */
.entete-page { padding-top: 26px; }
.entete-page .h1 { margin-top: 8px; }
.entete-page .search-page { margin-top: 20px; max-width: 640px; }
.page-corps { max-width: 720px; }
.page .fs { margin-top: 32px; }
.err-page .chips { margin-top: 20px; }
.res-h { margin-top: 28px; }
.res { border-top: 1.5px solid var(--ink); }
.res li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.res li a:hover .res-n { color: var(--accent-deep); }
.res-n { font-weight: 700; font-size: 17px; }
.res-m { font: 400 12px var(--mono); color: var(--ink55); text-align: right; flex: none; }
.optout { padding: 20px; background: var(--cream); border-radius: var(--r); }
.optout .h2 { font-size: 22px; }

/* formulaire de contact */
.form { max-width: 560px; margin-top: 4px; }
.f-champ { margin-top: 18px; }
.f-champ label { display: block; font: 700 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.f-champ input, .f-champ textarea { display: block; width: 100%; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 12px 14px; font-size: 16px; min-height: 44px; }
.f-champ textarea { resize: vertical; line-height: 1.45; }
.is-err input, .is-err textarea { border-color: var(--roast-deep); box-shadow: none; outline: 2px solid var(--roast-deep); outline-offset: 0; }
.is-err label { color: var(--roast-deep); }
.f-err { font-size: 14px; color: var(--roast-deep); margin-top: 6px; font-weight: 600; }
.err-g { background: var(--white); border: 1.5px solid var(--roast-deep); border-radius: var(--r); padding: 12px 14px; margin-top: 16px; }
.err-g a { color: var(--roast-deep); }
.ok { background: var(--cream); border-radius: var(--r); padding: 20px; margin-top: 16px; }
.f-note { font-size: 14px; color: var(--ink6); margin: 16px 0; }

/* ---------- calculateur ---------- */
.calc { padding-top: 26px; }
.calc-h { font: 900 40px/.92 var(--display); font-stretch: 110%; letter-spacing: -.035em; margin-top: 8px; }
.calc-depuis { margin-top: 12px; font-size: 15px; color: var(--ink65); }
.calc-depuis a { color: var(--accent-deep); }
.calc-avert { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--roast-deep); }
.calc-form .lab-dim { margin-top: 20px; }
.chips-meth { margin-top: 10px; gap: 6px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; max-width: 560px; }
.champ { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 14px 14px 12px; min-width: 0; }
.champ-lab { display: block; font: 400 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink7); }
.champ-val { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; font: 700 34px/1.3 var(--mono); min-height: 44px; }
.champ-in { width: auto; min-width: 2ch; max-width: 100%; field-sizing: content; border: 0; background: none; font: inherit; padding: 0 2px; border-radius: var(--r-s); -moz-appearance: textfield; appearance: textfield; }
.champ-in:focus { outline: none; }
.champ-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.champ-err { font-size: 13px; line-height: 1.3; color: var(--roast-deep); font-weight: 600; margin-top: 6px; }
.is-inv .champ-in { color: var(--roast-deep); }
.champ-pre { font-size: inherit; font-weight: 700; flex: none; }
.champ-u { font-size: 15px; font-weight: 400; opacity: .6; flex: none; }
.pm { gap: 6px; margin-top: 12px; }
.pm-b { flex: 1; height: 44px; border-radius: 4px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); background: var(--white); }
.pm-plus { background: var(--ink); color: var(--bg); }
.pm-b .ic { width: 20px; height: 20px; }
.pm-b:active { transform: scale(.97); }
.pm-b:disabled { opacity: .35; cursor: not-allowed; }
.pm-b:disabled:active { transform: none; }
.calc-note { font-size: 14px; line-height: 1.45; color: var(--ink6); margin-top: 12px; max-width: 560px; text-wrap: pretty; }
.calc-droite { margin-top: 12px; }
.calc-res { background: var(--accent-deep); color: var(--bg); border-radius: var(--r); padding: 20px 18px 18px; font-family: var(--mono); }
.calc-res-h { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .95; }
.calc-res-t { font: inherit; }
.calc-eau { font: 900 76px/.95 var(--display); font-stretch: 110%; letter-spacing: -.04em; margin-top: 10px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.calc-eau .n { font-family: var(--display); }
.calc-eau-u { font-size: 28px; font-weight: 700; letter-spacing: 0; }
.calc-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(242, 244, 239, .35); }
.calc-specs > div { min-width: 0; }
.calc-specs dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.calc-specs dd { font-weight: 700; font-size: 15px; margin-top: 3px; overflow-wrap: anywhere; line-height: 1.3; }
.calc-tasses { margin-top: 26px; }
.tasses { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.tasses tr { border-bottom: 1px solid var(--line); }
.tasses th { text-align: left; font-weight: 400; font-size: 16px; padding: 11px 0; }
.tasses td { text-align: right; font-size: 13px; padding: 11px 0 11px 18px; white-space: nowrap; }
.calc-methnote { font-size: 14px; color: var(--ink6); margin-top: 12px; line-height: 1.45; }

/* ---------- guide de mouture ---------- */
.reperes { border-top: 1.5px solid var(--ink); }
.repere { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.repere-n { font: 700 16px/1.2 var(--mono); color: var(--accent); }
.repere-txt { font-size: 16px; line-height: 1.35; }
.repere-txt strong { display: block; }
.repere-um { font-size: 13px; white-space: nowrap; }
/* .tbl est défini une seule fois, plus bas (« tableau comparatif d'une page éditoriale ») */
.tbl-n { display: block; font-weight: 700; font-size: 16px; }
.tbl-s { display: block; font-size: 13px; color: var(--ink6); margin-top: 2px; font-weight: 400; }
.tbl .n { font-size: 13px; }
.td-l, .td-x { display: none; }

/* ---------- ≥ 640 ---------- */
@media (min-width: 640px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .top-in { gap: 16px; height: 64px; }
  .top-in .top-search { display: flex; flex: 1; min-width: 0; margin: 0 8px; padding: 0 12px; }
  .top-search .search-in { font-size: 16px; padding: 9px 0; }
  .top-search .search-ic .ic { width: 16px; height: 16px; }
  .top-loupe, .js .top-loupe { display: none; }
  .fil-m { display: none; }
  .fil ol { display: flex; }
  /* un seul champ de recherche par écran : celui de la barre haute (hero et panneau de recherche mobile masqués) */
  .hero-search { display: none; }
  .rech-panel { display: none !important; }
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  .foot { padding-bottom: 24px; }
  .hero-h { font-size: 72px; line-height: .9; letter-spacing: -.045em; font-stretch: 110%; font-weight: 900; }
  .hero-p { display: block; }
  .tuiles { grid-template-columns: repeat(3, 1fr); }
  .tuile { min-height: 150px; padding: 16px; }
  .tuile-nom { font-size: 24px; }
  .bande { margin: 0 -32px; }
  .vit-l { padding-left: 32px; padding-right: 32px; scroll-padding-inline: 32px; }
  .outils-g { grid-template-columns: 1fr 1fr; }
  .outil-big { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 150px; padding: 20px; }
  .outil-big .outil-meta { display: block; }
  .outil-big .outil-t { font: 800 24px/1 var(--display); letter-spacing: -.02em; }
  .outil-big .outil-s { font-size: 15px; margin-top: 6px; }
  .outil-big .outil-fl { display: none; }
  .rech li a { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; }
  .rech-r { flex: none; text-align: right; }
  .foot-in { grid-template-columns: repeat(3, 1fr); }
  .cartes { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .band-h { font-size: 72px; }
  .band-h-long { font-size: 52px; }
  .h1 { font-size: 56px; font-weight: 900; line-height: .92; letter-spacing: -.04em; font-stretch: 110%; }
  .page .h1 { font-size: 48px; }
  .fiche-h { font-size: 80px; letter-spacing: -.045em; }
  .fiche-chapeau { font-size: 20px; max-width: 640px; }
  .coupe-g { gap: 24px; }
  .coupe-img { flex: 0 0 280px; }
  .coupe-leg { flex: 1 1 200px; }
  .degust { padding: 20px 22px 18px; }
  /* bande sous la photo (tablette) : 6 colonnes comme la maquette 834 */
  .degust-g { grid-template-columns: repeat(6, 1fr); }
  .degust-g .dg { padding: 14px 10px; border-right: 1px solid var(--bgline); }
  .degust-g .dg:nth-child(6) { border-right: 0; }
  .degust-g .dg:first-child { padding-left: 0; }
  .degust-g .dg dt { letter-spacing: .04em; }
  .degust-g .dg-v { font-size: 15px; }
  .degust-g .dg-v-l { font-size: 18px; }
  .degust-g .dg-v-s { font-size: 13px; }
  .dt-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .dt-court { display: inline; }
  .degust-g .dg-notes { grid-column: 1 / -1; border-right: 0; padding: 12px 0 2px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .degust-g .dg-notes .notes { margin-top: 0; }
  .etapes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .etape:nth-last-child(2) { border-bottom: 0; }
  .mat { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .proches { padding: 0 32px 4px; scroll-padding-inline: 32px; }
  .champs { gap: 12px; }
  .calc-h { font-size: 64px; line-height: .9; letter-spacing: -.045em; }
  .calc-eau { font-size: 120px; line-height: .9; }
  .calc-eau-u { font-size: 40px; }
  .td-l { display: table-cell; }
  .tbl .n { white-space: nowrap; }
}

/* ---------- ≥ 900 : barre haute complète, plus de tab bar ---------- */
@media (min-width: 900px) {
  .top-in { height: 72px; gap: 40px; }
  .brand { margin-right: 0; }
  .top-in .top-search { max-width: 560px; margin: 0 auto; padding: 0 12px 0 14px; }
  .search-kbd { display: inline-block; }
  .top-in .top-nav { display: flex; gap: 28px; flex: none; }
  .top-nav a { font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 6px 0 4px; border-bottom: 2px solid transparent; }
  .top-nav a:hover { color: var(--accent-deep); }
  .top-nav a.is-on { font-weight: 700; border-bottom-color: var(--accent); }
  .top-btn, .js .top-btn, .menu-nojs { display: none; }
  .menu { display: none !important; }
  .chip, .seg { min-height: 36px; padding: 8px 12px; }
  .seg { padding: 8px 14px; }
  .vit-l { gap: 16px; }
  .vit-l > li { width: 160px; }
  .vit-img { width: 160px; height: 160px; }
  .js .vit-nav { display: flex; }
  /* la vitrine a déjà ses boutons ← → à cette largeur : les flèches filigranées deviennent redondantes */
  .bande:has(.vit-l) .bande-fl { display: none; }
  .js .bande:has(.vit-l) .bande-p { display: none; }
}

/* ---------- ≥ 1024 : grilles desktop, colonnes sticky ---------- */
@media (min-width: 1024px) {
  .wrap { padding-left: 48px; padding-right: 48px; }
  .lab-h { font-size: 12px; margin-bottom: 16px; }
  .fil { padding-top: 20px; }
  .fil ol { gap: 0 10px; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: end; padding-top: 64px; }
  .hero-h { font-size: clamp(64px, 7.2vw, 104px); margin-top: 16px; }
  .hero-p { font-size: 22px; margin-top: 24px; }
  .hero-search { max-width: 640px; margin-top: 24px; }
  .hero-chips { margin-top: 20px; }
  .hero-chips .chip { font-size: 13px; padding: 9px 14px; }
  .fdj { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .fdj-top { min-height: 260px; padding: 12px 14px; flex-direction: row; align-items: flex-start; }
  .fdj-lab { order: 2; }
  .fdj-lab, .fdj-num { font-size: 12px; letter-spacing: .08em; }
  .fdj-body { padding: 18px 20px 20px; }
  .fdj-nom { font-size: 32px; }
  .fdj-p { font-size: 16px; line-height: 1.4; }
  .fdj-meta { font-size: 12px; margin-top: 4px; }
  .sec { margin-top: 72px; }
  .bande { margin: 0 -48px; }
  .vit-l { padding-left: 48px; padding-right: 48px; scroll-padding-inline: 48px; }
  .tuiles { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .tuile { min-height: 200px; padding: 18px 18px 16px; }
  .tuile-meta { font-size: 12px; }
  .tuile-nom { font-size: 24px; }
  .home-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .home-2col > section + section { margin-top: 0; }
  .outils-l { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  /* les dossiers sont trois : une grille à deux colonnes laisserait un trou */
  .outils-l.dos-l { grid-template-columns: repeat(3, 1fr); }
  .dos-l .outil-s { -webkit-line-clamp: 6; }
  .outils-l .outil { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 150px; padding: 20px; }
  .outils-l .outil-meta { display: block; }
  .outils-l .outil-t { font: 800 24px/1 var(--display); letter-spacing: -.02em; }
  .outils-l .outil-s { font-size: 15px; margin-top: 6px; }
  .outils-l .outil-fl { display: none; }
  .rech-q { font-size: 18px; }
  .bloc-rech { margin-top: 72px; }
  .bloc-rech .rech { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .nl { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; padding: 40px 48px; margin-top: 72px; }
  .nl-h { font-size: 36px; }
  .nl-form { margin-top: 0; }
  .foot { padding: 48px 0 32px; margin-top: 72px; }
  .foot-in { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .foot-brand { grid-column: auto; }
  .foot-low { padding-top: 20px; }
  .band .wrap { padding-bottom: 40px; }
  .band-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: end; margin-top: 40px; }
  .band-h { font-size: clamp(72px, 6.6vw, 96px); letter-spacing: -.045em; margin-top: 12px; }
  .band-h-long { font-size: clamp(44px, 4.8vw, 64px); line-height: .92; }
  /* titre long : la colonne d'intro se resserre pour tenir le titre sur deux lignes (1024-1439) */
  .band-grid:has(.band-h-long) { grid-template-columns: minmax(0, 1fr) 340px; }
  .band-p { font-size: 20px; margin-top: 0; color: var(--ink85); }
  .segs { margin-top: 20px; }
  .hub { padding-top: 20px; }
  .legende { font-size: 12px; }
  .cartes { grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
  .carte-top { height: 112px; padding: 10px; }
  .carte-num { font-size: 12px; padding: 3px 7px; }
  .carte-body { padding: 14px 16px 16px; }
  .carte-nom { font-size: 24px; }
  .carte-pays { font-size: 14px; }
  .carte-meta { font-size: 12px; }
  .h1 { font-size: clamp(56px, 6vw, 80px); line-height: .9; letter-spacing: -.045em; }
  .page .h1 { font-size: 56px; }
  .chapeau { font-size: 20px; }
  .entete-page { padding-top: 48px; }
  .h2 { font-size: 36px; letter-spacing: -.03em; }
  .optout .h2 { font-size: 24px; }
  .fiche { grid-template-columns: 180px minmax(0, 1fr) 340px; grid-template-areas: "som entete side" "som photo side" "som corps side"; column-gap: 32px; align-items: start; padding-top: 40px; }
  .fiche-side { position: sticky; top: 24px; margin-top: 0; }
  .sommaire { display: block; position: sticky; top: 24px; align-self: start; padding-top: 6px; }
  .sommaire-m { display: none; }
  .fiche-h { font-size: clamp(72px, 8vw, 96px); margin-top: 10px; }
  .fiche-chapeau { font-size: 22px; margin-top: 20px; }
  .fiche-photo { margin-top: 28px; }
  .fiche-corps { max-width: 720px; }
  .degust { padding: 20px 20px 18px; }
  .degust-h { flex-wrap: nowrap; white-space: nowrap; }
  .degust-nom { display: none; }
  .dt-long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .dt-court { display: none; }
  .degust-g { grid-template-columns: 1fr 1fr; }
  .degust-g .dg { padding: 12px 0 12px 14px; border-right: 0; }
  .degust-g .dg dt { letter-spacing: .06em; }
  .degust-g .dg-v { font-size: 16px; }
  .degust-g .dg-v-s { font-size: 14px; }
  .degust-g .dg:nth-child(odd) { padding-left: 0; padding-right: 12px; border-right: 1px solid var(--bgline); }
  .degust-g .dg:nth-child(6) { border-right: 0; }
  .degust-g .dg-notes, .degust-g .dg-notes:nth-child(odd) { grid-column: 1 / -1; border-right: 0; padding: 12px 0 2px; display: block; }
  .degust-g .dg-notes .notes { margin-top: 8px; }
  .degust-g .dg-v-l { font-size: 24px; }
  .fs { margin-top: 48px; scroll-margin-top: 96px; }
  .coupe { scroll-margin-top: 24px; }
  .coupe-g { gap: 14px 16px; }
  .coupe-img { flex: 3 1 168px; }
  .coupe-leg { flex: 2 1 112px; }
  .fs-meta { font-size: 12px; }
  .etapes { display: block; margin-top: 8px; }
  .etape { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .etape:last-child { border-bottom: 0; }
  .etape-n { font-size: 24px; }
  .etape p { font-size: 19px; line-height: 1.5; }
  .ingr li { font-size: 17px; }
  .mat-i { min-height: 120px; padding: 16px; }
  .ic-mat { width: 32px; height: 32px; }
  .mat-n { font-size: 16px; }
  .ll-n { font-size: 18px; }
  .ll-d { font-size: 17px; }
  .ll-r { font-size: 13px; }
  .liste-l li { padding: 14px 0; gap: 16px; }
  .proches { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; }
  .proches li { width: auto; }
  /* plus de défilement : la bande redevient une grille pleine largeur, sans débord ni indice */
  .bande:has(.proches:not(.proches-g)) { margin: 0; }
  /* .proches-g (pages de dossier) reste une piste défilante : elle garde ses fondus et ses flèches */
  .bande:has(.proches:not(.proches-g))::after, .bande:has(.proches:not(.proches-g)) .bande-fl { display: none; }
  .js .bande:has(.proches:not(.proches-g))::before, .js .bande:has(.proches:not(.proches-g)) .bande-p { display: none; }
  .proche-top { height: 72px; padding: 10px; }
  .proche-body { padding: 12px 14px 14px; }
  .proche-nom { font-size: 19px; }
  .proche-meta { font-size: 12px; }
  .faq dt { font-size: 19px; }
  .faq dd { font-size: 17px; }
  .calc { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 48px; align-items: start; padding-top: 40px; }
  .calc-h { font-size: clamp(56px, 6vw, 80px); }
  .calc-droite { margin-top: 0; }
  .calc-form .lab-dim { margin-top: 40px; }
  .chips-meth { gap: 8px; }
  .chips-meth .chip { font-size: 13px; padding: 10px 16px; }
  .champs { margin-top: 28px; }
  .champ { padding: 18px 18px 16px; }
  .champ-val { font-size: 44px; margin-top: 8px; }
  .champ-u { font-size: 17px; }
  .pm { margin-top: 16px; }
  .calc-note { font-size: 15px; margin-top: 16px; }
  .calc-res { padding: 28px 28px 24px; }
  .calc-res-h { font-size: 12px; }
  .calc-eau { font-size: clamp(110px, 10vw, 160px); letter-spacing: -.05em; margin-top: 14px; gap: 10px; }
  .calc-eau-u { font-size: 44px; }
  .calc-specs { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; padding-top: 18px; }
  .calc-specs dt { font-size: 12px; }
  .calc-specs dd { font-size: 20px; }
  .calc-tasses { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 20px 24px 8px; margin-top: 12px; }
  .calc-tasses .lab-h { margin-bottom: 6px; }
  .tasses th { font-size: 17px; padding: 13px 0; }
  .tasses td { font-size: 14px; padding: 13px 0 13px 32px; min-width: 90px; }
  /* les six colonnes tiennent dans la grille : le tableau se répartit au lieu de déborder de 428 px */
  .mouture { table-layout: fixed; min-width: 0; }
  .mouture thead th:nth-child(1) { width: 19%; }
  .mouture thead th:nth-child(2) { width: 12%; }
  .mouture thead th:nth-child(3) { width: 11%; }
  .mouture thead th:nth-child(4) { width: 16%; }
  .mouture thead th:nth-child(5) { width: 9%; }
  .mouture thead th:nth-child(6) { width: 33%; }
  .repere { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 14px 0; }
  .repere-txt { font-size: 17px; }
  .repere-txt strong { display: inline; margin-right: 8px; }
  .td-x { display: table-cell; }
}

/* ---------- ≥ 1440 : grille de référence (sommaire 200 · texte 700 · fiche 372) ---------- */
@media (min-width: 1440px) {
  .fiche { grid-template-columns: 200px minmax(0, 700px) 372px; column-gap: 36px; }
  .fiche-corps { max-width: none; }
  .calc { grid-template-columns: minmax(0, 1fr) 640px; gap: 64px; }
  .tuile-nom { font-size: 26px; }
  .band-grid, .band-grid:has(.band-h-long) { grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; }
  .band-h-long { font-size: 72px; }
}

/* la fiche sticky se libère quand la fenêtre est trop basse */
@media (max-height: 820px) {
  .fiche-side, .sommaire { position: static; }
}
/* avec la vue en coupe, la colonne est plus haute : elle se libère plus tôt */
@media (max-height: 960px) {
  .fiche-side:has(.coupe) { position: static; }
}

/* ---------- impression : titre, chapeau, fiche, ingrédients, étapes ---------- */
@media print {
  @page { margin: 16mm; }
  .top, .tabbar, .foot, .nl, .bloc-rech, .sommaire, .sommaire-m, .fiche-actions, .coupe, .fil, .prod, .skip, .menu, .fiche-photo,
  .search, .chips { display: none !important; }
  /* périmètre de la feuille de la FICHE de préparation (titre, chapeau, fiche, ingrédients, étapes) :
     ces sections n'existent que là. Un dossier s'imprime en entier, sans trou dans sa numérotation. */
  .t-prep #definition, .t-prep #materiel, .t-prep #gout, .t-prep #histoire, .t-prep #variantes,
  .t-prep #erreurs, .t-prep #proches, .t-prep #faq, .t-prep #sources { display: none !important; }
  .print-only { display: block; margin-top: 24px; padding-top: 8px; border-top: 1px solid #000; font: 400 9pt/1.4 var(--mono); color: #000; overflow-wrap: anywhere; }
  .pays { color: #000; }
  body { padding: 0; background: #fff; color: #000; font-size: 12pt; }
  .fiche { display: block; }
  .fiche-h { font-size: 36pt; }
  .fiche-chapeau { font-size: 13pt; }
  .degust { background: #fff; color: #000; border: 1.5px solid #000; padding: 12px; margin-top: 16px; break-inside: avoid; }
  .degust-h { border-color: #000; }
  .degust-n, .degust .dots-on, .dg dt, .dg-s, .dg-u { color: #000; opacity: 1; }
  .notes li { border-color: #000; }
  .dg, .dg:nth-child(odd) { border-color: #bbb; }
  .etape-n { color: #000; }
  .lab-acc { color: #000; }
  a { text-decoration: none; color: inherit; }
  .fs { margin-top: 18px; }
}

/* fiche du jour : photo réelle quand elle existe (sinon aplat hachuré) */
.fdj-top { position: relative; overflow: hidden; }
.fdj-top.has-img { background-image: none; }
.fdj-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fdj-top.has-img .fdj-lab, .fdj-top.has-img .fdj-num { position: relative; z-index: 1; background: rgba(20, 24, 15, .78); color: var(--bg); padding: 3px 7px; border-radius: 3px; }

/* le badge du raccourci s'efface dès que le champ est actif ou rempli */
.search:focus-within .search-kbd { display: none; }

/* boisson sans café : une mention honnête à la place de la barre de ratio */
.carte-nocafe { display: block; font: 500 12px/1 var(--mono); color: var(--ink55); letter-spacing: .04em; padding: 3px 0; }

/* sources d'une page éditoriale (mêmes règles que celles des fiches) */
.srcs-l { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.srcs-i { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.srcs-n { font: 400 12px/1.4 var(--mono); color: var(--ink55); }
@media (min-width: 640px) { .srcs-i { flex-direction: row; justify-content: space-between; gap: 16px; } .srcs-n { text-align: right; flex: none; max-width: 45%; } }

/* ---------- gabarit éditorial (dossiers longs : rubrique Grains) ----------
   Bandeau d'accent pleine largeur, puis la grille de la fiche (sommaire sticky,
   texte, encadrés). Les pages système gardent .page / .page-corps. */
/* hero des dossiers : fond encre (la signature du site est le bloc encre), accent
   de couleur réservé aux libellés et au filet, texte crème sur fond sombre */
.edito-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); border-bottom: 3px solid var(--accent); --edito-grains: url("/static/img/grains.svg"); }
.edito-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--edito-grains); background-size: 420px; opacity: .07; pointer-events: none; }
.edito-hero-in { position: relative; padding-bottom: 28px; }
.edito-hero-txt { min-width: 0; }
.edito-hero-a { min-width: 0; margin-top: 26px; }
.edito-hero .fil { color: var(--bg); }
.edito-hero .fil-m, .edito-hero .fil ol { color: rgba(242, 244, 239, .8); }
.edito-hero .fil-num, .edito-hero .fil [aria-current], .edito-hero .fil a:hover, .edito-hero .fil-back:hover { color: var(--white); }
.edito-sur { color: var(--white); margin-top: 4px; }
.edito-h { font: 900 44px/.92 var(--display); font-stretch: 110%; letter-spacing: -.035em; margin-top: 10px; text-wrap: balance; overflow-wrap: anywhere; }
.edito-h-long { font-size: 38px; line-height: .95; }
/* aucune couleur en dur sur le texte du hero : tout hérite de .edito-hero (crème à l'écran,
   noir à l'impression). Une règle de couleur sur un descendant battrait l'héritage, y compris
   en @media print : c'est ce qui rendait le titre illisible sur la feuille (constat B3). */
.edito-chapeau { font-size: 18px; line-height: 1.45; margin-top: 16px; max-width: 640px; text-wrap: pretty; opacity: .92; }
.edito-jauge { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(242, 244, 239, .28); font: 400 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.edito-jauge .n { font-weight: 700; }
.edito-hero-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.edito-hero-img .ph { aspect-ratio: 4 / 3; min-height: 160px; background-color: rgba(255, 255, 255, .05); }
/* fiche de repères posée dans le hero : même bloc signature, en négatif sur l'encre du bandeau */
.degust-hero { background: transparent; border: 1.5px solid rgba(242, 244, 239, .45); }
/* plaque de repos (crème) du hero de hub : sommaire de la rubrique, chiffres à droite */
.edito-plaque { background: var(--cream); color: var(--ink); border-radius: var(--r); padding: 18px 20px 8px; }
.plaque-t { color: var(--accent-deep); }
.plaque-l { margin-top: 8px; }
.plaque-l a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(20, 24, 15, .28); text-decoration: none; }
.plaque-l li:first-child a { border-top: 0; }
.plaque-k { font-size: 16px; font-weight: 700; line-height: 1.3; min-width: 0; }
.plaque-n { font: 700 12px/1.3 var(--mono); letter-spacing: .08em; color: var(--accent-deep); flex: none; }
.plaque-l a:hover .plaque-k { color: var(--accent-deep); }

/* Une seule colonne sous 1024 : l'ordre de lecture se règle par `order`, pas par des zones
   nommées. Deux blocs qui partagent une même zone se superposeraient (« À lire ensuite » et
   « Pour s'équiper » l'un sur l'autre) ; avec `order`, ils s'empilent dans l'ordre du DOM. */
.edito { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
.edito-som { order: 1; }
/* sous 1024 le conteneur s'efface : les encadrés reprennent leur place dans le flux */
.edito-side { display: contents; }
.edito-brief { order: 2; margin-top: 20px; }
.edito-corps { order: 3; }
.edito-suite { order: 4; margin-top: 40px; }
.edito .sommaire a { display: flex; gap: 10px; }
.som-n { flex: none; font: 400 12px/1.5 var(--mono); color: var(--ink55); }  /* AA : ink5 tombait à 3,33:1 */
.som-t { min-width: 0; }
.edito .sommaire a.is-on .som-n { color: var(--accent-deep); }

/* titre de section : numéro mono dans la gouttière, filet sous le titre */
.edito-s-h { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
/* UN SEUL filet par titre de section : ici il appartient au titre, donc le composant qui suit
   (liste d'erreurs, FAQ, sources, ingrédients, produits) ne rajoute pas le sien en tête. Sans
   cette règle, « Questions fréquentes » affichait deux traits et « Erreurs classiques » un seul,
   selon que l'enfant avait ou non une marge haute. */
.edito-s-h + .liste-l, .edito-s-h + .faq, .edito-s-h + .srcs-l, .edito-s-h + .sources,
.edito-s-h + .ingr, .edito-s-h + .prod-l, .edito-s-h + .rech, .edito-s-h + .reperes { border-top: 0; margin-top: 16px; }
.edito-s-n { font: 700 18px/1.1 var(--mono); color: var(--accent); }
.edito-s .p:first-of-type { margin-top: 16px; }
.edito-fig { margin-top: 20px; }
.edito-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.edito-fig figcaption { font: 400 12px/1.5 var(--mono); color: var(--ink6); margin-top: 8px; }
.edito-note { background: var(--cream); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 16px 18px; margin-top: 22px; }
.edito-note .p:first-of-type { margin-top: 8px; }
.edito-src .sources { margin-top: 4px; }
.edito-src .fs-meta { margin-top: 16px; }

/* « En bref » : même bloc signature que la fiche de dégustation, alimenté par des repères libres */
.degust-brief .dg { border-right: 0; border-bottom: 1px solid var(--bgline); }
.degust-brief .dg:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }

/* « À lire ensuite » (colonne de droite) et « Poursuivre » (fin de page) */
.edito-suite + .edito-suite { margin-top: 28px; }
.edito-suite .lab-h { padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); margin-bottom: 0; }
/* mention d'affiliation : plus discrète que les liens qu'elle commente */
.aff-note { margin-top: 10px; font: 400 12px/1.5 var(--mono); color: var(--ink6); }
.suite-l li { border-bottom: 1px solid var(--line); }
.suite-l a { display: block; padding: 12px 0; text-decoration: none; }
.suite-n { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.suite-m { display: block; font: 400 12px/1.4 var(--mono); color: var(--ink6); margin-top: 3px; }
.suite-l a:hover .suite-n { color: var(--accent-deep); }
.pours-l { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pours-a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 64px; padding: 14px 16px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); text-decoration: none; transition: transform .15s ease-out; }
.pours-a:hover { transform: translateY(-2px); }
.pours-n { font: 800 19px/1.05 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pours-m { grid-column: 1; font: 400 12px/1.4 var(--mono); color: var(--ink65); }
.pours-fl { grid-column: 2; grid-row: 1 / -1; font: 400 18px/1 var(--mono); color: var(--accent); }
.pours-a:hover .pours-n { color: var(--accent-deep); }

@media (min-width: 640px) {
  .edito-hero-in { padding-bottom: 36px; }
  /* une seule ligne dès qu'il y a la place : le point médian sépare, sans jamais rester orphelin */
  .edito-jauge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
  .edito-jauge > li + li::before { content: "·"; margin-right: 22px; opacity: .5; }
  .edito-h { font-size: 64px; letter-spacing: -.045em; }
  .edito-h-long { font-size: 52px; }
  .edito-chapeau { font-size: 19px; }
  .edito-hero-img img, .edito-hero-img .ph { aspect-ratio: 16 / 9; }
  .edito-corps { max-width: 660px; }
  .degust-brief .degust-g { grid-template-columns: repeat(3, 1fr); }
  .degust-brief .dg, .degust-brief .dg:nth-child(odd) { padding: 12px 14px; border-right: 1px solid var(--bgline); border-bottom: 1px solid var(--bgline); }
  .degust-brief .dg:nth-child(3n) { border-right: 0; }
  .degust-brief .dg:nth-child(3n + 1) { padding-left: 0; }
  .pours-l { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  /* la colonne droite (fiche du grain, plaque de rubrique) est souvent plus haute que le texte :
     centrée, elle définit la hauteur de la rangée et venait toucher la barre haute. Le bandeau
     respire donc par le haut comme il respire par le bas, et les deux colonnes descendent ensemble. */
  .edito-hero-in { padding-top: 32px; padding-bottom: 56px; }
  .edito-hero-2c { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; }
  .edito-hero-a { margin-top: 0; }
  /* le fil d'Ariane portait seul la marge haute du bandeau : elle est désormais sur la grille */
  .edito-hero .fil { padding-top: 0; }
  .edito-hero-img img, .edito-hero-img .ph { aspect-ratio: 5 / 4; }
  .edito-h { font-size: clamp(56px, 5.8vw, 84px); margin-top: 14px; }
  .edito-h-long { font-size: clamp(44px, 4.6vw, 64px); }
  .edito-chapeau { font-size: 21px; margin-top: 20px; }
  .edito-jauge { margin-top: 28px; gap: 4px 24px; }
  .edito { grid-template-columns: 180px minmax(0, 1fr) 320px; grid-template-areas: "som corps side"; column-gap: 32px; align-items: start; padding-top: 40px; }
  .edito-som { grid-area: som; position: sticky; top: 24px; align-self: start; padding-top: 6px; }
  .edito-corps { grid-area: corps; max-width: 720px; }
  .edito-side { display: block; grid-area: side; position: sticky; top: 24px; }
  .edito-brief { margin-top: 0; }
  .edito-suite { margin-top: 24px; }
  .degust-brief .degust-g { grid-template-columns: 1fr 1fr; }
  .degust-brief .dg, .degust-brief .dg:nth-child(3n), .degust-brief .dg:nth-child(3n + 1) { padding: 12px 0 12px 14px; border-right: 0; border-bottom: 1px solid var(--bgline); }
  .degust-brief .dg:nth-child(odd) { padding-left: 0; padding-right: 12px; border-right: 1px solid var(--bgline); }
  .pours-l { grid-template-columns: minmax(0, 1fr); }
  .suite-n { font-size: 17px; }
}

@media (min-width: 1440px) {
  .edito { grid-template-columns: 200px minmax(0, 700px) 372px; column-gap: 36px; }
  .edito-corps { max-width: none; }
  .edito-hero-2c { grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; }
  .edito-h { font-size: 92px; }
  .edito-h-long { font-size: 72px; }
  .pours-l { grid-template-columns: 1fr 1fr; }
}

/* fenêtre basse : les colonnes de la page de dossier se libèrent comme celles des fiches */
@media (max-height: 820px) {
  .edito-som, .edito-side { position: static; }
}

@media print {
  .edito-hero-img, .edito-suite, .edito-pours, .edito-som { display: none !important; }
  .edito-side { display: block !important; }
  .edito-hero { background: #fff; color: #000; }
  .edito-hero::before { display: none; }
  .edito, .edito-hero-in { display: block; }
  .edito-h { font-size: 30pt; }
  .edito-chapeau { font-size: 13pt; }
  .edito-jauge { color: #000; border-color: #000; }
  .edito-s-n { color: #000; }
  .edito-note { background: #fff; border: 1px solid #000; }
  .degust-brief .dg { border-color: #bbb; }
}

/* ---------- rubrique Grains : hub et pages ---------- */
.grains-hub { padding-top: 28px; }
.grains-intro { max-width: 720px; }
/* Titres de rubrique du hub : des séparateurs qui structurent la page, pas des libellés perdus
   au-dessus des cartes. Filet d'accent en tête (même langage que le bandeau du hero), libellé en
   display comme les titres de section, compteur mono à droite. */
.grains-hub .fs { margin-top: 44px; }
.grp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px; margin-bottom: 14px; border-top: 3px solid var(--accent); }
.grp-t { font: 800 24px/1 var(--display); font-stretch: 105%; letter-spacing: -.02em; min-width: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.grp-n { flex: none; font: 700 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
/* les cartes remplissent toujours la largeur : 1 carte = pleine, 2 = moitiés, 3 = tiers */
.grains-l { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.grain-c { min-width: 0; }
.grain-a { display: block; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--white); color: inherit; text-decoration: none; }
/* rotation encre / brun / crème par position (comme les cartes de hub) : le vert reste
   l'accent sémantique du grain cru, il cesse d'être un aplat de remplissage */
.grain-top { display: block; position: relative; height: 88px; background-image: var(--hatch); background-color: var(--ink); color: var(--bg); }
.grains-l > .grain-c:nth-child(3n + 2) .grain-top { background-color: var(--cream); color: var(--ink); }
.grains-l > .grain-c:nth-child(3n) .grain-top { background-color: var(--roast); }
.grain-top.has-img { background-image: none; }
.grain-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.grain-b { display: block; padding: 12px 14px 14px; }
.grain-n { display: block; font: 800 20px/1.1 var(--display); font-stretch: 105%; letter-spacing: -.02em; }
.grain-p { display: block; margin-top: 6px; font-size: 15px; color: var(--ink75); }
.grain-a:hover .grain-img { filter: brightness(.95); }
.enc { margin: 18px 0 0; padding: 16px 18px; background: var(--cream); border-left: 3px solid var(--accent); border-radius: var(--r); }
.enc-p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.enc-p:last-child { margin-bottom: 0; }
.appr { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink75); }
.appr li { margin-bottom: 4px; }
.degust-lab { margin: 16px 0 0; font: 700 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
@media (min-width: 640px) { .grains-l { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grain-top { height: 96px; } .grp-t { font-size: 30px; }
  /* deux colonnes : la carte solitaire prend la largeur au lieu de rester orpheline à moitié */
  .grains-l > .grain-c:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .grains-l { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grain-top { height: 120px; }
  .grains-hub .fs { margin-top: 56px; } .grp-t { font-size: 34px; } .grp-h { padding-top: 14px; margin-bottom: 18px; }
  .grains-l > .grain-c:last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 1440px) { .grains-l { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }

/* tableau comparatif d'une page éditoriale : défile dans son conteneur, jamais la page */
/* le conteneur défile, la bande qui l'enveloppe porte le fondu et la flèche (même composant
   que la vitrine de l'accueil : .bande + [data-bande] + .bande-fl, .is-end en fin de piste) */
.bande-tbl { margin: 18px 0 0; }
.bande-tbl::after { top: 1.5px; bottom: 1.5px; right: 1.5px; width: 40px; border-radius: 0 var(--r) var(--r) 0; }
.bande-tbl::before { top: 1.5px; bottom: 1.5px; left: 1.5px; width: 40px; border-radius: var(--r) 0 0 var(--r); }
/* un tableau est haut : les flèches restent en haut, là où le regard arrive, au lieu d'attendre au
   milieu ; et elles passent au-dessus du fondu, qui les délaverait (sur la vitrine elles restent filigranées) */
.bande-tbl .bande-fl, .bande-tbl .bande-p { top: 46px; transform: none; z-index: 2; opacity: .8; }
.bande-tbl.is-fixe .bande-fl, .bande-tbl.is-fixe .bande-p { display: none; }
/* barre de défilement fine et contrastée : l'indice le plus honnête, en plus du fondu */
.tbl-w { scrollbar-width: thin; scrollbar-color: var(--ink) var(--cream); }
/* un tableau qui defile horizontalement doit pouvoir etre parcouru au clavier */
.tbl-w:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tbl-w { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1.5px solid var(--ink); border-radius: var(--r); }
.tbl { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
/* les tableaux de prose (diagnostic, codes d'erreur) se replient : leur imposer
   640 px créait un débordement de 22 px et une flèche posée sur du texte lisible */
.tbl-prose { min-width: 0; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--cream); position: sticky; top: 0; }
.tbl tbody th { font-weight: 700; }
.mouture tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg); border-right: 1px solid var(--line); }
.mouture thead th:first-child { left: 0; z-index: 2; border-right: 1px solid var(--line); }
/* la colonne de repères est de la prose : elle revient à la ligne (le nowrap de .tbl .n ne vaut
   que pour les valeurs chiffrées) */
.tbl td.td-x, .tbl td.td-x .n { white-space: normal; }
/* le guide de mouture met de la prose dans des cellules de données : elles reviennent à la ligne
   (sans quoi une cellule en nowrap fait déborder tout le tableau de 400 px) */
.mouture td, .mouture td.n, .mouture td .n { white-space: normal; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }

/* encadré comparatif : une ligne par item, terme détaché, filet de séparation */
.enc-t { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.enc-dl { margin: 0; }
.enc-r { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 11px 0; border-top: 1px solid rgba(20, 24, 15, .28); }
.enc-r:first-child { border-top: 0; }
.enc-k { font: 700 12px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.enc-v { margin: 0; font-size: 16px; line-height: 1.5; }
.enc-v strong { font-weight: 700; }
.enc-full { grid-column: 1 / -1; }
@media (min-width: 900px) { .enc-r { grid-template-columns: 200px 1fr; gap: 4px 16px; align-items: baseline; } }
/* « à lire ensuite » et « pour s'équiper » : libellé sous le lien, jamais collé */
.apres-i { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line); }
.apres-i:first-child { border-top: 0; padding-top: 0; }
.apres-i .apres-m { font: 400 12px/1.4 var(--mono); color: var(--ink55); }

/* page grain : la rangée de préparations reste une bande défilante au-delà de 4 cartes */
.proches-g { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
/* la bande d'un dossier ne déborde plus du cadre (.bande-g) : sa piste perd donc la gouttière
   intérieure qui compensait ce débord, et les cartes s'alignent pile sur le texte de la colonne */
.proches.proches-g { padding: 0 0 4px; scroll-padding-inline: 0; }
.proches-g::-webkit-scrollbar { display: none; }
.proches-g > li { flex: 0 0 clamp(150px, 42vw, 200px); scroll-snap-align: start; }
@media (min-width: 1024px) { .proches.proches-g { display: flex; grid-template-columns: none; margin: 0; padding: 0 0 4px; overflow-x: auto; } .proches-g > li { flex: 0 0 200px; } }


/* ---------- page pilier /cafes/ et tableaux comparatifs des hubs (SEO_GRAINS partie B) ---------- */
/* L'index ne montre plus 144 cartes : il porte du texte, deux tableaux et un index A→Z. */
.pil-p { max-width: 640px; }
.pil .h2 + .p { margin-top: 14px; }
.band-p-long { max-width: 560px; }
.segs-hub { margin-top: 12px; margin-bottom: 4px; }
.tbl-fam, .tbl-cmp { min-width: 760px; }
.tbl-fam th[scope="row"] a, .tbl-cmp th[scope="row"] a, .tbl-fam td a { color: inherit; }
.tbl-fam th[scope="row"] a:hover, .tbl-cmp th[scope="row"] a:hover, .tbl-fam td a:hover { color: var(--accent-deep); }
.tbl-fam td, .tbl-cmp td { color: var(--ink8); }
/* cinq colonnes ne tiennent pas en 360 : le nom de la boisson reste visible pendant
   que le reste de la ligne défile sous le doigt */
.tbl-fam tbody th, .tbl-cmp tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg); border-right: 1px solid var(--line); }
.tbl-fam thead th:first-child, .tbl-cmp thead th:first-child { left: 0; z-index: 2; border-right: 1px solid var(--line); }
.pil-out { list-style: none; margin: 14px 0 0; padding: 0; max-width: 640px; }

/* index texte A→Z : 144 liens en colonnes, sans carte ni vignette */
.az { margin-top: 16px; }
/* la lettre C pèse 66 des 144 fiches (café…, caffè…) : le groupe doit pouvoir passer
   d'une colonne à l'autre, sinon la première colonne fait deux fois la hauteur des autres */
.az-g { margin-bottom: 18px; }
.az-l { margin: 0; font: 700 12px/1 var(--mono); letter-spacing: .12em; color: var(--accent-deep); border-bottom: 1px solid var(--line); padding-bottom: 7px; break-after: avoid; }
.az-ul { list-style: none; margin: 8px 0 0; padding: 0; }
.az-ul li { margin-top: 2px; break-inside: avoid; }
.az-ul a { display: inline-block; font: 400 13px/1.5 var(--mono); color: var(--ink8); text-decoration: none; overflow-wrap: anywhere; }
.az-ul a:hover { color: var(--accent-deep); text-decoration: underline; }

@media (min-width: 640px) {
  .az { column-count: 2; column-gap: 32px; }
}
@media (min-width: 900px) {
  .az { column-count: 3; }
  /* un angle de famille tient en cinq phrases : le titre reste en haut, sinon le hero se creuse */
  .band-grid:has(.band-p-long) { align-items: start; grid-template-columns: minmax(0, 1fr) 400px; }
  .band-p-long { font-size: 17px; line-height: 1.45; }
}
@media (min-width: 1024px) {
  .az { column-count: 4; column-gap: 40px; }
}
@media (min-width: 1440px) {
  .band-grid:has(.band-p-long) { grid-template-columns: minmax(0, 1fr) 480px; }
}

/* ---------- impression des pages de dossier (constat B3 de la critique v2) ----------
   Le bandeau passe en blanc : chaque descendant qui portait une couleur claire doit repasser
   en noir, sinon il gagne contre la couleur héritée quelle que soit sa spécificité. */
@media print {
  .edito-hero .edito-sur, .edito-hero .lab, .edito-hero .lab-acc, .edito-hero .edito-h,
  .edito-hero .edito-chapeau, .edito-hero .edito-jauge, .edito-hero .degust,
  .edito-hero .degust-t, .edito-hero .degust-n, .edito-hero .degust-lab,
  .edito-hero .dg dt, .edito-hero .dg-v, .edito-hero .dg-s { color: #000; opacity: 1; }
  .degust-hero { background: #fff; border-color: #000; }
  .edito-hero .degust-h { border-color: #000; }
  .edito-hero .dg { border-color: #bbb; }
  /* nav de rubrique, bande de préparations et liens affiliés : hors périmètre de la feuille */
  .edito-plaque, .bande-g, .aff-note, .plaque-l { display: none !important; }
  /* un tableau ne peut pas défiler sur du papier */
  .bande-tbl::after, .bande-tbl::before, .bande-fl, .bande-p { display: none !important; }
  .tbl-w { overflow: visible; border-color: #000; }
  .tbl { min-width: 0; font-size: 9pt; table-layout: fixed; }
  .tbl th, .tbl td { padding: 6px 8px; }
  .tbl thead th { background: #fff; position: static; }
  .enc { background: #fff; border: 1px solid #000; }
}

/* fiche de dégustation : ligne « Grain conseillé » (maillage vers la rubrique Grains) */
.dg-grain { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bgline); }
.dg-grain-n { margin: 0 0 6px; font: 400 13px/1.5 var(--mono); color: rgba(242, 244, 239, .82); }
.dg-grain-l { margin: 0; font: 400 12.5px/1.5 var(--mono); }
.dg-grain-l a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* vignette vectorielle d'une carte : jamais recadrée ni agrandie, le fond de la
   carte prolonge celui du dessin */
.grain-top img[src$=".svg"] { object-fit: contain; background: var(--cream); }

/* schéma vectoriel d'une section de dossier */
.sch { margin: 16px 0 0; padding: 0; }
.sch img { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--bg); }
.sch-c { margin: 8px 0 0; font: 400 12px/1.5 var(--mono); color: var(--ink55); }

/* un item de matériel cliquable reste un item de matériel : souligné discret,
   jamais un bouton ni un encart */
.mat-l { color: inherit; text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 3px; }
.mat-l:hover { text-decoration-thickness: 2px; }

/* ============ référentiel machines : marques, modèles, réglages ============ */

/* --- grille des marques (hub) --- */
.marques-l { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.marque-a { display: block; text-decoration: none; color: inherit; background: var(--bg);
  border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden;
  transition: transform .15s ease-out; }
.marque-a:hover { transform: translateY(-2px); }
/* plaque typographique : le nom de la marque EST le visuel. Les logos sont des
   marques déposées, le site n'en redistribue pas (SPEC_MACHINES § 2). */
.marque-plaque { display: flex; align-items: center; min-height: 84px; padding: 0 20px;
  font: 800 26px/1 var(--display); letter-spacing: -.02em; }
.marque-a.fond-ink .marque-plaque { background: var(--ink); color: var(--bg); }
.marque-a.fond-roast .marque-plaque { background: var(--roast); color: var(--bg); }
.marque-a.fond-green .marque-plaque { background: var(--green); color: var(--bg); }
.marque-a.fond-cream .marque-plaque { background: var(--cream); color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.marque-b { display: block; padding: 14px 16px 16px; }
.marque-meta { display: block; font: 400 12px/1.4 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-deep); }
.marque-g { display: block; margin-top: 3px; font: 700 13px/1.4 var(--display); }
.marque-p { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink65); }
.marque-t { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { display: inline-block; padding: 3px 8px; border: 1.5px solid var(--ink); border-radius: 999px;
  font: 400 12px/1.4 var(--mono); letter-spacing: .04em; }

/* --- carte modèle dans une page marque --- */
.mach-ref { display: block; margin-top: 2px; font: 400 12px/1.4 var(--mono);
  letter-spacing: .04em; color: var(--ink55); }
.mach-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* un pictogramme n'est pas une photo : jamais recadré, sur son fond crème */
.mach-picto { object-fit: contain; background: var(--cream); }
.support-l { margin-top: 12px; }

/* --- hero d'une fiche machine --- */
.mach-hero { display: grid; gap: 12px; min-width: 0; }
.mach-hero .degust, .mach-hero .edito-brief { min-width: 0; }
/* la liste des references peut etre longue : elle passe a la ligne au lieu
   d elargir la colonne et de pousser la page hors de l ecran */
.mach-hero .degust-n { white-space: normal; overflow-wrap: anywhere; text-align: right; max-width: 60%; }
.mach-vis { margin: 0; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--cream); }
.mach-vis img { display: block; width: 100%; height: auto; }
.mach-vis-picto img { object-fit: contain; }
.mach-vis-c { padding: 8px 12px 10px; font: 400 12px/1.5 var(--mono); color: var(--ink55);
  background: var(--bg); border-top: 1.5px solid var(--ink); }
.mach-id { margin: 14px 0 0; padding: 12px 0 0; border-top: 1.5px solid var(--ink12); font-size: 13px; }
.mach-id > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.mach-id dt { color: var(--ink55); font: 400 12px/1.5 var(--mono); letter-spacing: .04em; }
.mach-id dd { margin: 0; text-align: right; font-weight: 600; }
.mach-ean-s { display: block; font: 400 12px/1.4 var(--mono); font-weight: 400; }

/* --- les réglages : le cœur de la fiche --- */
.regl { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.regl-i { padding: 14px 16px; background: var(--cream); border-radius: var(--r); }
.regl-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.regl-n { font: 400 12px/1 var(--mono); color: var(--accent-deep); letter-spacing: .06em; }
.regl-t { margin: 0; font: 700 17px/1.25 var(--display); flex: 1 1 auto; }
.regl-v { font: 700 13px/1.4 var(--mono); letter-spacing: .02em; padding: 3px 9px;
  background: var(--bg); border: 1.5px solid var(--ink); border-radius: 999px; }
/* un repère qui est une phrase ne tient pas dans une pastille : il prend sa
   propre ligne, en clair, plutôt que d'être coupé */
.regl-v-long { flex: 1 0 100%; margin-top: 8px; border-radius: var(--r); padding: 7px 11px;
  font-weight: 400; line-height: 1.5; }
.regl-p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; }
.regl-s { margin: 8px 0 0; font: 400 12px/1.5 var(--mono); color: var(--ink55); }
/* la provenance d'un réglage est visible : la notice ou l'usage, jamais implicite */
.regl-badge { display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 3px;
  background: var(--accent-deep); color: var(--bg); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; }
.regl-badge-a { background: var(--ink); }

.ent-2c { display: grid; gap: 16px; margin-top: 12px; }

@media (min-width: 640px) {
  .marques-l { grid-template-columns: 1fr 1fr; }
  .ent-2c { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (min-width: 900px) {
  .marques-l { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .marque-plaque { min-height: 104px; font-size: 30px; }
  .regl-i { padding: 18px 20px; }
  .regl-t { font-size: 19px; }
}