/* ============================================================
   MAZETRAILS — DESIGN SYSTEM v1 · "Warm Editorial"
   Morocco travel blog · US audience · ads + affiliate
   Single source of truth for tokens and components.
   Class names kept compatible with blog-starter Astro components.
   ============================================================ */

/* -------------------- 0. FONTS (self-hosted) -------------------- */
/* Same families AND same weights as the former Google Fonts call (see fonts/README.md): Fraunces 400/600/700,
   Plus Jakarta Sans 400–800, JetBrains Mono 400/500. The variable files could do every weight, but the
   validated design was drawn with these faces — e.g. a 600 mono label is the 500 face emboldened by the
   browser — so the declared weights stay identical. "latin-ext" only downloads when a page needs it. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/fraunces-latin-opsz-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/fraunces-latin-opsz-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/fraunces-latin-opsz-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* -------------------- 1. TOKENS -------------------- */
:root {
  /* Surfaces — crisp white, cool light tints (colours pop) */
  --bg:            #FFFFFF;
  --bg-elev:       #FFFFFF;
  --surface-1:     #FFFFFF;
  --surface-2:     #E9F8FB;
  --surface-3:     #D6F0F6;
  --border:        #C6E9F1;
  --border-strong: #96D4E2;

  /* Text — deep teal charcoal.
     THREE readable tiers, all above 4.5:1 on white. Audit axe-core du 13/09/2026 :
     l'ancien --text-faint (#7A9AA4) ne tenait que 2,99:1 et l'ancien --text-dim
     (#A8C2CB) 1,85:1 — à eux deux, 459 violations sur 9 pages.
     Un quatrième palier lisible n'existe pas dans cette gamme : --decor n'est
     donc PAS un ton de texte, seulement du décor (séparateurs, désactivé). */
  --text:      #08252E;   /* 16.6:1 */
  --text-soft: #3E6470;   /*  6.4:1 */
  --text-faint:#54737E;   /*  5.1:1 sur blanc ET 4.6:1 sur --surface-2 teinté.
                              Un token de texte doit passer sur TOUTES les surfaces
                              où il peut atterrir, pas seulement sur le fond de page. */
  --decor:     #93AEB6;   /* décor uniquement — jamais de texte dessus */
  --text-dim:  #5A7A85;   /* alias conservé : pointe sur faint, pas sur du décor */

  /* Signature accent — vivid turquoise.
     Two tones on purpose:
       --accent       = vivid, for fills/borders/decoration (no text on top)
       --accent-ink   = deeper, for links and buttons carrying white text (AA 4.8:1)
     Never put white text on --accent: it only reaches 2.8:1. */
  --accent:        #00A9C9;
  --accent-bright: #00C9D6;
  --accent-ink:    #006A7E;   /* 6.1:1 sur blanc, et ≥5:1 sur TOUS les fonds teintés
                                 du système. L'ancien #00758C tombait à 4.48:1 sur
                                 --sec-tint : un lien y échouait de 0,02 point. */
  --accent-deep:   #005A6B;
  --accent-tint:   #DCF3F8;
  --accent-line:   rgba(0, 169, 201, .34);

  /* Secondary — coral */
  --sec:       #FF6B6B;
  --sec-bright:#FF8A8A;
  --sec-ink:   #B02E2E;   /* 6.4:1 sur blanc, 5.4:1 sur --sec-tint (l'ancien #CC3A3A échouait sur le tint) */
  --sec-tint:  #FFE5E5;

  /* Sun — ratings, decorative only (never as text on light bg) */
  --gold:      #FFD166;
  --gold-ink:  #8A6200;
  --gold-tint: #FFF6DC;

  /* Trust blue — fifth category hue (Safety & Insurance), taken from the hero
     gradient. -ink is 6:1 on white and 5:1 on its tint. */
  --blue:      #2A6FD6;
  --blue-ink:  #1F5FC4;
  --blue-tint: #E3ECFA;

  /* Gradients — the vivid signature of the brand */
  --grad-1: linear-gradient(135deg, #00C9D6, #00A9C9 50%, #2A6FD6);
  --grad-2: linear-gradient(135deg, #FFD166, #FFA53D);
  --grad-3: linear-gradient(135deg, #FF8A8A, #E14444);
  --grad-4: linear-gradient(135deg, #00A9C9, #00758C);
  --grad-5: linear-gradient(135deg, #2A6FD6, #00C9D6);
  --grad-6: linear-gradient(135deg, #00C9A7, #00A9C9);
  --grad-hero: linear-gradient(120deg, #008FAD 0%, #00A9C9 40%, #1F5FC4 100%);

  /* Semantic (status, not brand) */
  --success:#0C7A54; --success-tint:#D9F6EC;  /* 5.3:1 — l'ancien #0E8A5F plafonnait à 4.36:1 */
  --warning:#9A6B12; --warning-tint:#FFF3D4;
  --danger: #CC3A3A; --danger-tint: #FFE5E5;
  --info:   #00758C; --info-tint:   #DCF3F8;

  /* Fonts */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (fluid) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1.0625rem;
  /* Body copy shrinks on narrow screens: 19px in a 358px column gives only
     ~38 characters per line, below the 45-75 comfortable range. */
  --fs-lg:   clamp(1.0625rem, 0.95rem + 0.55vw, 1.1875rem);
  --fs-xl:   clamp(1.35rem, 1.1rem + 0.9vw, 1.6rem);
  --fs-2xl:  clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem);
  --fs-3xl:  clamp(2.1rem, 1.5rem + 2.6vw, 3rem);
  --fs-4xl:  clamp(2.5rem, 1.7rem + 3.6vw, 3.8rem);

  /* Spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  /* Shape — generous radii, as in the validated mockup */
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-xl: 22px; --r-full: 999px;

  /* Elevation — cool-tinted */
  --sh-1: 0 1px 3px rgba(8, 37, 46, .06);
  --sh-2: 0 3px 16px rgba(8, 37, 46, .08);
  --sh-3: 0 14px 34px rgba(8, 37, 46, .14);

  /* Layout */
  --container: 1200px;
  --measure: 68ch;      /* optimal reading width */
  --header-h: 64px;

  /* Article page — dimensions measured on the reference article
     (rigpeak.com/guides/where-winds-meet, 13/09/2026, built on the same
     blog-starter kit). See devbook/REFERENCE-ARTICLE.md. */
  --side-w:     300px;                          /* right column = one 300×250 */
  --col-gap:    48px;                           /* article ↔ right column */
  --prose-w:    720px;                          /* reading column */
  --fs-prose:   1.125rem;                       /* 18px body copy */
  --lh-prose:   1.75;
  --sticky-top: calc(var(--header-h) + 20px);   /* 20px under the header (84px on phones, 76px from 1200px) */
}

/* -------------------- 2. BASE -------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 1.15em; }

::selection { background: var(--accent-tint); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* -------------------- 3. LAYOUT -------------------- */
/* 1200px box with 44px inner margins leaves 1112px of content — exactly
   764 + 48 + 300, the reference article grid. 18px on phones, as measured. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 18px;
}
@media (min-width: 768px) { .container { padding-inline: 44px; } }

.stack > * + * { margin-top: var(--s5); }

.grid-cards {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

/* -------------------- 3b. ARTICLE PAGE -------------------- */
/* Structure taken from the reference article. Two stacked grids with the SAME
   columns (764 + 48 + 300 at full width), so the right-hand ads line up:
     .article-hero-split  title zone   | 300×250 beside the title
     .article-body        the article  | 300×250 · 160×600 · contents
   minmax(0, 1fr) — not plain 1fr — on every breakpoint: a bare `1fr` track
   refuses to shrink below its content's min-content width, so a wide table
   would blow the grid out and push the page sideways on a phone.
   Below 941px everything stacks: title, 300×250, contents, then the article. */
.article-wrap { padding-top: var(--s6); }

.article-hero-split,
.article-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.article-body { gap: var(--s7); margin-top: var(--s7); }
.article-hero-split > *,
.article-body > * { min-width: 0; }

@media (min-width: 941px) {
  .article-hero-split,
  .article-body {
    grid-template-columns: minmax(0, 1fr) var(--side-w);
    gap: var(--col-gap);
    align-items: start;
  }
  /* The right column comes first in the source — contents before the article
     for screen readers and on phones — and is placed on the right here. */
  .article-body > .article-side { grid-column: 2; grid-row: 1; }
  .article-body > .article-main { grid-column: 1; grid-row: 1; }
}

/* Title zone */
.article-head .breadcrumb { margin-bottom: var(--s4); }
.head-tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: 14px; }
/* .article-title lets the styleguide show this title without a second <h1> */
.article-head h1,
.article-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em;
  color: var(--text); text-wrap: balance;
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 2.875rem);   /* 30px phone → 46px */
  line-height: 1.08; margin: 0 0 var(--s4);
}
.article-head .dek {
  font-size: 1.3125rem; line-height: 1.5;                  /* 21px / 31.5px */
  color: var(--text-soft); margin: 0 0 20px;
}

/* 300×250 beside the title. Sticky inside the title zone only, so it travels
   the few pixels the title leaves it, then scrolls away with it. */
.hero-ad { display: flex; justify-content: center; }
@media (min-width: 941px) { .hero-ad { position: sticky; top: var(--sticky-top); } }

/* Reading column */
.article-main { max-width: var(--prose-w); }
.article-main .prose { max-width: none; }

/* Right column: 300×250, then 160×600, then the contents — the whole column
   sticks under the header. On phones the two ads are dropped (the 300×250 under
   the title is enough) and only the contents stay, above the article. */
.article-side { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 941px) { .article-side { position: sticky; top: var(--sticky-top); } }
@media (max-width: 940px) { .article-side .ad-slot { display: none; } }

/* Cover image — 16:9, credit underneath */
.article-cover { margin: 0 0 26px; }
.article-cover .frame { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); }
.article-cover .frame img { width: 100%; height: 100%; object-fit: cover; }
.article-cover figcaption {
  margin-top: var(--s2); font-family: var(--font-mono); font-size: 12px;
  line-height: 1.75; color: var(--text-faint);
}

/* Photo inside the text — one image at the point it explains something.
   Same 16:9 frame as the cover; the caption keeps the .prose figcaption rule. */
.article-figure { margin: var(--s6) 0; }
.article-figure .frame {
  aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface-3);
}
.article-figure .frame img { width: 100%; height: 100%; object-fit: cover; }
.article-figure figcaption .credit {
  display: block; margin-top: 4px;
  overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
}

/* Read next — full width, after the article and its column.
   64px above it, 64px + the footer's 96px below: the reference rhythm. */
.article-related { margin-top: 64px; padding-bottom: 64px; }
.article-related .section-head,
.section-head.is-ruled {
  align-items: center; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.article-related .section-head :is(h2, h3),
.section-head.is-ruled :is(h2, h3) { font-size: 1.625rem; }
.related-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 821px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -------------------- 3c. LISTING PAGE (category · tag · latest) -------------------- */
/* ONE template for the three archives, on the reference grid (764 + 48 + 300).
   Only the header changes with the mode:
     .hub-header            category — photo, stats, sub-topics, "start here" pillar
     .hub-header.is-tag     tag      — light, "#" before the name, related tags
     .hub-header.is-latest  latest   — light, date of the last update, grouped by month
   Three things the reference gets wrong and we don't copy: 480px-tall cards on
   phones (under two articles per screen), no unique text for Google, and no
   structured data describing the list. */
.listing-wrap { padding-block: var(--s6) 64px; }
.listing-wrap > .breadcrumb { margin-bottom: var(--s4); }

.hub-header {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 262px; padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--grad-hero); color: #fff;
}
.hub-header .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Dark veil, strongest where the text sits: white copy stays above 6:1
   even over a white photograph. */
.hub-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 37, 46, .9) 0%, rgba(8, 37, 46, .72) 55%, rgba(8, 37, 46, .35) 100%);
}
.hub-header .badge { align-self: flex-start; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
/* .hub-title lets the styleguide show a hub title without a second <h1> */
.hub-header :is(h1, .hub-title) {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance;
  color: #fff; max-width: 22ch;
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 2.875rem); line-height: 1.08;
  margin: var(--s3) 0 var(--s2);
}
.hub-header .h-desc { font-size: var(--fs-base); line-height: 1.55; color: rgba(255, 255, 255, .92); max-width: 58ch; margin: 0 0 var(--s4); }
.hub-stats { display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.hub-stats b { display: block; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.15; }
.hub-stats span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
/* Phones: the header must not push the first article below the first screen —
   tighter padding and the three figures kept on a single row. */
@media (max-width: 767px) {
  .hub-header { min-height: 0; padding: var(--s5); }
  .hub-stats { gap: var(--s4); }
  .hub-stats b { font-size: 1.125rem; }
  .hub-stats span { font-size: 10px; letter-spacing: .06em; }
}

.hub-header:is(.is-tag, .is-latest) { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); min-height: 0; }
.hub-header:is(.is-tag, .is-latest)::before { content: none; }
.hub-header:is(.is-tag, .is-latest) .badge { background: var(--surface-1); border-color: var(--border-strong); color: var(--accent-ink); }
.hub-header:is(.is-tag, .is-latest) :is(h1, .hub-title) { color: var(--text); }
.hub-header:is(.is-tag, .is-latest) .h-desc { color: var(--text-soft); }
.hub-header:is(.is-tag, .is-latest) .hub-stats b { color: var(--text); }
.hub-header:is(.is-tag, .is-latest) .hub-stats span { color: var(--text-faint); }
.hub-header.is-tag :is(h1, .hub-title)::before { content: "#"; color: var(--accent-ink); margin-right: .04em; }

/* Sub-topics, related tags or categories — plain links Google can crawl, never
   a JavaScript filter. One scrollable row on phones instead of three wrapped rows. */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.chip-row .chip .count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.chip-row .chip[aria-current="page"] { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.chip-row .chip[aria-current="page"] .count { color: rgba(255, 255, 255, .85); }
@media (max-width: 767px) {
  /* One scrolling line on phones. The fade on the right says "there is more" — without it the cut-off
     chip reads as a layout bug. The extra right padding lets the last chip clear the fade at the end. */
  .chip-row { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding: 0 48px 4px 18px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row li { flex: none; }
}

.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); margin-top: 32px; }
.listing-layout > * { min-width: 0; }
.listing-side { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 941px) {
  .listing-layout { grid-template-columns: minmax(0, 1fr) var(--side-w); gap: var(--col-gap); align-items: start; }
  .listing-side { position: sticky; top: var(--sticky-top); }
}
@media (max-width: 940px) { .listing-side .ad-slot { display: none; } }
.listing-side .section-head.is-ruled :is(h2, h3) { font-size: 1.3125rem; }
.section-head.is-ruled p {
  margin: 0; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}

.listing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 561px) { .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.listing-grid > .span-all { grid-column: 1 / -1; }
/* The pillar card sits in a 764px column, not full width: one size down */
.listing-grid .card-feature :is(h3, h4) { font-size: var(--fs-xl); }

/* Phones: the first card stays large, the others become compact rows — five
   articles per screen instead of 1.7 on the reference. More articles seen,
   more clicks, more pages viewed. */
@media (max-width: 560px) {
  .listing-grid .card:not(.card-feature) { flex-direction: row; }
  .listing-grid .card:not(.card-feature) .thumb { width: 112px; flex: none; aspect-ratio: auto; min-height: 112px; }
  .listing-grid .card:not(.card-feature) .thumb .cat { display: none; }
  .listing-grid .card:not(.card-feature) .body { padding: var(--s3) var(--s4); gap: 4px; }
  .listing-grid .card:not(.card-feature) :is(h3, h4) { font-size: 1.0625rem; }
  .listing-grid .card:not(.card-feature) .excerpt { display: none; }
  .listing-grid .card:not(.card-feature) .ph-img { font-size: 10px; letter-spacing: .06em; }
}

/* Month separator for the latest-articles mode */
.listing-group {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3);
  margin: var(--s4) 0 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.listing-grid > .listing-group:first-child { margin-top: 0; }
.listing-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* In-feed row: spans the grid after the 4th card (as on the reference) and
   again after the 10th. The standard 728×90 on desktop, a 300×250 on phones. */
.infeed-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--s4) 0; border-block: 1px solid var(--border); }
@media (max-width: 767px) { .infeed-row .ad-leaderboard { width: 300px; height: 250px; } }

/* Pagination — numbered links, crawlable. More pages means more page views,
   which is the revenue of an ad-funded site; infinite scroll hides both. */
.pager { display: flex; flex-direction: column; align-items: center; gap: var(--s3); margin-top: var(--s7); }
.pager-status { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.pagination .pg-step { padding: 0 14px; }

/* "Most read" — ranked list for the right column */
.trending { list-style: none; margin: 0; padding: 0; counter-reset: tr; }
.trending li { counter-increment: tr; border-bottom: 1px solid var(--border); }
.trending li:last-child { border-bottom: 0; }
.trending a { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 6px; text-decoration: none; color: var(--text); }
.trending a::before {
  content: counter(tr); flex: none; width: 30px; text-align: center;
  font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1; color: var(--text-faint);
}
.trending li:nth-child(-n+3) a::before { color: var(--accent-ink); }
.trending .t-title { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.trending .t-meta { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.trending a:hover .t-title { color: var(--accent-ink); }

/* Unique text for search engines, under the list: readers get the articles
   first, Google gets 150 words nobody else has on this page. */
.topic-about { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--border); }
.topic-about .prose > :first-child { margin-top: 0; }

/* Main column of the listing grid: a grid child must be allowed to shrink,
   or a long title or a 728×90 slot pushes the page wider than the screen. */
.listing-main { min-width: 0; }

.section { padding-block: var(--s7); }
.section + .section { border-top: 1px solid var(--border); }
/* A section that follows something other than a section still gets its rule */
.section.is-ruled { border-top: 1px solid var(--border); }

/* -------------------- 3d. SIMPLE PAGES — home details, hub, author, search, 404, legal --------------------
   Everything these templates used to set with style="…" lives here now: a page carries no style. */

/* Page opening: breadcrumb and title start the same distance under the header everywhere */
.page-body { padding-top: var(--s6); }
.page-body.is-doc { padding-bottom: var(--s8); }

/* Home + hub: the pillar card */
.card-feature .eyebrow { margin: 0; }
.card-cta { margin-top: var(--s3); }
.load-more { margin-top: var(--s6); text-align: center; }
.author-box.is-standalone { margin: 0; }
.newsletter .field { max-width: 440px; }

/* Destination hub */
.hub-page > h1 { max-width: 16ch; }
.hub-page > .lead { max-width: var(--measure); margin-top: var(--s4); }
.hub-page .card-feature { margin-bottom: var(--s7); }
.hub-page .takeaways { margin-top: var(--s8); }

/* Author page: the closing note sits clear of the footer */
.closing-note { margin-bottom: var(--s8); }

/* Search */
.search-form { max-width: 560px; margin: var(--s5) 0 var(--s6); }
.results-count { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; color: var(--text-faint); }
.results-list { display: flex; flex-direction: column; gap: var(--s4); margin: var(--s5) 0; }

/* 404 */
.error-hero { text-align: center; padding-block: var(--s8) var(--s7); max-width: 56ch; margin-inline: auto; }
.error-hero h1 { max-width: none; }
.error-hero .lead { margin: var(--s4) auto var(--s6); }
.error-hero .field { max-width: 420px; margin-inline: auto; }

/* Legal / about pages */
.doc-page > h1 { max-width: 20ch; }
.doc-page > .byline { margin: var(--s4) 0 var(--s6); }
.doc-page > .toc { max-width: var(--measure); }

/* -------------------- 4. HEADER / NAV -------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; gap: var(--s4); }

.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--text); }
/* Logo 01 — local trial, not final brand approval. Asset shared with Astro. */
.brand { flex-shrink: 0; }
/* Web logo (brand/logo.webp, 480 × 134, trimmed to the artwork — 25 KB instead of the 818 KB master).
   Same visible size and same layout box as the untrimmed master had (144 × 45 header, 180 × 57 footer). */
.brand-image { display: block; width: 141px; max-width: none; height: auto; margin: 2px 1.5px 4px; }
.site-footer .brand-image { width: 178px; margin: 3px 1px 4.6px; }
.brand .logo {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); border-radius: var(--r-sm);
}
.brand .logo svg { width: 18px; height: 18px; }
.logo-text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.logo-text b { color: var(--text); font-weight: 700; }
.logo-text span { color: var(--accent-ink); font-weight: 600; }

/* Marque à gauche, menu centré dans la barre, actions à droite (19/09/2026).
   Le centrage se fait en trois colonnes (voir le bloc ≥ 1200px) : les deux colonnes
   latérales ont la même largeur, donc le menu est au centre de l'écran et non au
   centre de l'espace qui reste. The menu shows the FIVE categories, then "Destinations ▾"
   set apart by a rule: the city hubs are a second axis, not a sixth category, and
   must not read as one. It fits the 1112px content width only with tight spacing
   (see the compact desktop header below), and only from 1200px; below
   that it lives behind a "Menu" button, which also gives phones a navigation. */
.main-nav { display: none; gap: 16px; margin-left: var(--s2); align-items: center; }
.main-nav a {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); white-space: nowrap;
  text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--accent-ink); }
.main-nav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* Destinations — a disclosure button, not a link: it opens the list of city hubs */
.nav-dest { position: relative; display: flex; align-items: center; padding-left: 12px; border-left: 1px solid var(--border-strong); }
.nav-dest-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; margin: 0;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft);
}
.nav-dest-toggle:hover { color: var(--accent-ink); }
.nav-dest-toggle.active { color: var(--text); border-bottom-color: var(--accent); }
.nav-dest-toggle .icon { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-dest-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-dest-list {
  display: none; list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 60; min-width: 210px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.nav-dest-list.is-open { display: block; }
.main-nav .nav-dest-list a {
  display: block; padding: 9px 12px; border: 0; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--text-soft);
}
.main-nav .nav-dest-list a:hover,
.main-nav .nav-dest-list a[aria-current] { background: var(--surface-2); color: var(--accent-ink); }
.main-nav .nav-dest-list .all { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0; font-weight: 600; color: var(--accent-ink); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
.nav-toggle .icon { width: 18px; height: 18px; }

/* Desktop header, compact (15/09/2026): on a 1280px screen — a 1920px laptop at 150% — the inline menu
   at 14px filled the whole bar and the 64px header took a sixth of the window height. From 1200px the
   header is 56px, the menu 13px with 14px between entries, and the search field becomes a square icon
   button (its "Search" label stays for screen readers — rule placed after .search-box, further down).
   Phones and tablets keep the 64px header. */
@media (min-width: 1200px) {
  :root { --header-h: 56px; }
  /* Trois colonnes : marque · menu centré · actions. Les colonnes latérales partagent
     l'espace à parts égales (1fr chacune), ce qui place le menu au centre de la barre. */
  .site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; }
  .main-nav { display: flex; gap: 14px; justify-self: center; margin-left: 0; }
  .main-nav > a, .nav-dest-toggle { font-size: 0.8125rem; }
  .nav-dest { padding-left: 10px; }
  .nav-toggle { display: none; }
  .header-actions { justify-self: end; margin-left: 0; }
}
@media (max-width: 1199px) {
  .main-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface-1); border-bottom: 1px solid var(--border); box-shadow: var(--sh-2);
  }
  .main-nav.is-open a {
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent; font-size: var(--fs-base);
  }
  .main-nav.is-open a.active { border-left-color: var(--accent); border-bottom-color: var(--border); }
  /* In the phone panel the cities unfold in place, under their own heading row */
  .main-nav.is-open .nav-dest { flex-direction: column; align-items: stretch; margin: 0; padding: 0; border-left: 0; }
  .main-nav.is-open .nav-dest-toggle {
    width: 100%; justify-content: space-between; padding: 14px 18px 14px 21px;
    border-bottom: 1px solid var(--border); font-size: var(--fs-base);
  }
  .main-nav.is-open .nav-dest-list { position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--surface-2); }
  .main-nav.is-open .nav-dest-list a { padding: 12px 18px 12px 36px; border-radius: 0; border-bottom: 1px solid var(--border); font-size: var(--fs-base); }
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

/* An ad slot never pushes the page wider than the screen: on a 320px window (303px once a desktop
   scrollbar is drawn) the standard 320×100 / 300×250 mobile slots shrink to the space available. */
.ad-slot { max-width: 100%; }

/* Narrow phones — under 400px, or a 375px phone-size window on a desktop where the scrollbar takes ~17px:
   logo + Subscribe + Menu pushed the header 13 to 53px past the screen edge. The Menu label becomes
   screen-reader-only (the button keeps its accessible name, the icon stays) and the gaps tighten. */
@media (max-width: 400px) {
  .site-header .container, .header-actions { gap: var(--s2); }
  .nav-toggle { padding: 0 9px; }
  .nav-toggle span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 340px) {
  .header-actions .btn-sm { padding: 8px 10px; }
  .logo-text { font-size: 1.02rem; }
}

/* Search entry in the header: a link to the search page dressed as a field.
   Desktop only — on a phone the header keeps a single action. */
.search-box {
  display: none; align-items: center; gap: var(--s2);
  width: 120px; height: 36px; padding: 0 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint);
  text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
}
.search-box:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.search-box .icon { width: 15px; height: 15px; }
@media (min-width: 860px) { .search-box { display: inline-flex; } }
/* Compact desktop header (see the 1200px rule above): the field becomes a square icon button */
@media (min-width: 1200px) {
  .search-box { width: 36px; padding: 0; justify-content: center; }
  .search-box span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Reading progress bar — sticks to the top edge once the page scrolls and
   fills with the article itself, not with the whole document. */
.reading-progress { position: sticky; top: 0; z-index: 60; height: 3px; background: var(--surface-3); }
.reading-progress > span { display: block; height: 100%; background: var(--accent); width: 0; transition: width .1s linear; }

/* -------------------- 4b. HERO -------------------- */
/* The vivid gradient is the brand signature. Gradient stops are chosen so that
   white text stays above 4.5:1 across the whole sweep. */
.hero {
  background: var(--grad-hero);
  color: #fff;
  padding: var(--s8) 0 var(--s9);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute;
  inset: auto -10% -55% 55%; width: 60%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(255, 255, 255, .10);
}
.hero > .container { position: relative; z-index: 2; }
.hero .eyebrow { color: rgba(255, 255, 255, .88); }
.hero h1, .hero h2 { color: #fff; font-size: var(--fs-4xl); max-width: 17ch; margin: 0; }
.hero p.hero-dek {
  font-size: var(--fs-lg); max-width: 52ch;
  margin: var(--s4) 0 var(--s6); color: rgba(255, 255, 255, .93);
}
.hero .btn-on-hero { background: #fff; color: var(--accent-ink); }
.hero .btn-on-hero:hover { background: var(--accent-tint); color: var(--accent-deep); }
.hero .btn-on-hero-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.hero .btn-on-hero-outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.hero-stats { display: flex; gap: var(--s7); flex-wrap: wrap; margin-top: var(--s7); }
.hero-stats b {
  display: block; font-family: var(--font-display);
  font-size: 2rem; line-height: 1; font-weight: 700;
}
.hero-stats span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .82); }

/* Photo variant. Every site in the competitor panel opens on a full-bleed
   photograph — the gradient hero is what we use while we have no photos.
   Set the image on --hero-photo; the scrim keeps white text above 4.5:1
   whatever the picture underneath. */
.hero--photo {
  background-image: var(--hero-photo);
  background-size: cover; background-position: center;
}
.hero--photo::after { display: none; }
.hero--morocco { --hero-photo: url("/wp-content/uploads/2026/09/21/generated-morocco-courtyard-hero-web.webp"); }
@media (max-width: 800px) {
  .hero--morocco { --hero-photo: url("/wp-content/uploads/2026/09/21/generated-morocco-courtyard-hero-web-800x450.webp"); }
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 37, 46, .42) 0%, rgba(8, 37, 46, .78) 100%);
}
.hero--photo .hero-credit {
  position: absolute; right: var(--s4); bottom: var(--s3); z-index: 2;
  font-size: 10.5px; color: rgba(255, 255, 255, .7);
}
.hero--morocco::before { background: linear-gradient(90deg, rgba(8, 37, 46, .78) 0%, rgba(8, 37, 46, .64) 43%, rgba(8, 37, 46, .08) 75%); }
@media (max-width: 800px) {
  .hero--morocco::before { background: rgba(8, 37, 46, .72); }
}

/* -------------------- 5. BUTTONS -------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1; padding: 12px 20px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }

/* Buttons carry text, so they use the -ink tones (AA ≥ 4.5:1 with white). */
.btn-primary { background: var(--accent-ink); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }

.btn-secondary { background: var(--sec-ink); color: #fff; }
.btn-secondary:hover { background: #A82D2D; color: #fff; }

/* Vivid variant: bright turquoise plate with dark text (5.7:1) — for heroes
   and CTA blocks where maximum punch is wanted without losing contrast. */
.btn-vivid { background: var(--accent); color: var(--text); }
.btn-vivid:hover { background: var(--accent-bright); color: var(--text); }

.btn-outline { background: transparent; color: var(--accent-ink); border-color: var(--accent-line); }
.btn-outline:hover { background: var(--accent-tint); color: var(--accent-deep); }

.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn-lg { padding: 15px 28px; font-size: var(--fs-base); }
.btn-block { width: 100%; }

/* -------------------- 6. BADGES / CHIPS -------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text-soft);
  text-decoration: none; line-height: 1;
}
/* The five categories (decided 13/09/2026, devbook/CATEGORIES.md) — classed by
   what the reader wants to book, not by topic. One fixed colour each, so a reader
   learns to spot a section at a glance. Listed in planning order.
   Destinations are not a category: they are hubs, a second axis. */
.badge-itineraries { background: var(--gold-tint);    color: var(--gold-ink); }
.badge-stay        { background: var(--accent-tint);  color: var(--accent-ink); }
.badge-tours       { background: var(--sec-tint);     color: var(--sec-ink); }
.badge-plan        { background: var(--success-tint); color: var(--success); }
.badge-safety      { background: var(--blue-tint);    color: var(--blue-ink); }
.badge-solid       { background: var(--accent-ink);   color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-soft); text-decoration: none;
  padding: 6px 13px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface-1);
}
.chip:hover { border-color: var(--accent-line); color: var(--accent-ink); }

/* -------------------- 7. CARDS -------------------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--sh-3); transform: translateY(-2px); border-color: var(--border-strong); }

.card .thumb { position: relative; aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb .cat { position: absolute; left: 12px; bottom: 12px; }

/* Badges sitting on top of an image need an opaque plate to stay legible
   whatever the photo behind them. Category colour moves to the text. */
.card .thumb .badge {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 9px rgba(8, 37, 46, .20);
}
.card .thumb .badge-itineraries { color: var(--gold-ink); }
.card .thumb .badge-stay        { color: var(--accent-ink); }
.card .thumb .badge-tours       { color: var(--sec-ink); }
.card .thumb .badge-plan        { color: var(--success); }
.card .thumb .badge-safety      { color: var(--blue-ink); }
.card .thumb .badge-solid       { background: var(--accent-ink); color: #fff; }

.card .body { padding: var(--s4) var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card .idx { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); }
/* h3 or h4 — the card title level follows the page outline, the look does not change */
.card :is(h3, h4) { font-size: 1.2rem; line-height: 1.25; }
.card :is(h3, h4) a { color: inherit; text-decoration: none; }
.card :is(h3, h4) a:hover { color: var(--accent-ink); }
.card .excerpt { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
.card .meta {
  margin-top: auto; padding-top: var(--s2);
  font-size: var(--fs-xs); color: var(--text-faint);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.card .meta .sep { color: var(--text-dim); }

/* Horizontal variant */
.card-h { flex-direction: row; align-items: stretch; }
.card-h .thumb { aspect-ratio: 1 / 1; width: 120px; flex: none; }
.card-h .body { padding: var(--s3) var(--s4); }
.card-h h3 { font-size: 1rem; }

/* Spotlight / featured */
.card-feature { border-radius: var(--r-lg); }
.card-feature .thumb { aspect-ratio: 16 / 9; }
.card-feature h3 { font-size: var(--fs-2xl); }
.card-feature .excerpt { font-size: var(--fs-base); }
@media (min-width: 820px) {
  .card-feature { flex-direction: row; }
  .card-feature .thumb { width: 55%; aspect-ratio: auto; }
  .card-feature .body { padding: var(--s6); justify-content: center; gap: var(--s3); }
}

/* Image placeholders (no external assets needed) */
.ph-img {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  /* the label stays inside even a 112px thumbnail */
  padding: 0 var(--s2); text-align: center; overflow: hidden; overflow-wrap: anywhere;
}
.ph-1 { background: var(--grad-1); }
.ph-2 { background: var(--grad-4); }
.ph-3 { background: var(--grad-2); }
.ph-4 { background: var(--grad-3); }
.ph-5 { background: var(--grad-5); }
.ph-6 { background: var(--grad-6); }

/* -------------------- 8. AD SLOTS -------------------- */
/* Designed in from the start. Fixed reserved space => zero CLS. */
.ad-slot {
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.ad-slot::before {
  content: "Advertisement";
  position: absolute; top: 6px; left: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
}
.ad-slot a { display: grid; place-items: center; width: 100%; height: 100%; text-decoration: none; }
.ad-inner { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }

/* In-feed: an ad shaped like a card so it sits in a grid without breaking
   the rhythm — and clearly labelled, so it never passes for editorial. */
.ad-infeed {
  min-height: 300px; border-radius: var(--r-lg);
  border-style: solid; border-color: var(--border);
  background: var(--surface-2);
}

/* A real creative drops the placeholder dressing (kit convention). */
.ad-slot.filled { background: none; border: 0; border-radius: 0; }
.ad-slot.filled::before { content: none; }
.ad-slot.filled img { display: block; width: 100%; height: auto; }

/* The article inventory — placements measured on the reference article,
   horizontal banners at the IAB standard 728×90 (decided 13/09/2026: the
   reference runs a 728×146 affiliate banner, a size display networks don't serve).
     .ad-leaderboard  728×90   top band + anchored dock · phones: 320×100 band, 320×50 dock
     .ad-rectangle    300×250  beside the title, and top of the right column
     .ad-sky          160×600  right column, under the 300×250 */
.ad-band { padding-top: 22px; }
.ad-sky         { width: 160px; height: 600px; margin-inline: auto; }

.ad-leaderboard { width: 100%; min-height: 90px; aspect-ratio: 728 / 90; max-width: 728px; margin-inline: auto; }
.ad-rectangle   { width: 300px; height: 250px; max-width: 100%; margin-inline: auto; flex: none; }
.ad-inarticle   { width: 100%; min-height: 250px; margin-block: var(--s6); }
.ad-sticky      { width: 300px; height: 600px; max-width: 100%; margin-inline: auto; }

@media (max-width: 767px) {
  /* 728px cannot fit a phone. The slot switches to the mobile standard 320×100
     and reserves exactly that, so nothing moves when the ad fills it. */
  .ad-leaderboard { width: 320px; max-width: 100%; height: 100px; min-height: 0; aspect-ratio: auto; }
  .ad-sticky { height: 250px; width: 300px; }
}

/* -------------------- 9. PROSE (article body) -------------------- */
/* Editorial house promotions: live text, one internal link, no tracking. */
.house-promo-wrap { min-width: 0; max-width: 100%; }
.house-promo { position: relative; display: block; isolation: isolate; overflow: hidden; border-radius: var(--r-md); background: var(--text); color: var(--bg); text-decoration: none; margin-inline: auto; max-width: 100%; }
.house-promo:hover { color: var(--bg); text-decoration: none; }
.house-promo:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
.house-promo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.house-promo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--text) 10%, rgba(8,37,46,.94) 48%, rgba(8,37,46,.08) 100%); }
.house-promo__content { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--s5); gap: var(--s2); }
.house-promo__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--bg); }
.house-promo__eyebrow { font-size: 10px; letter-spacing: .12em; font-weight: 700; color: var(--gold); }
.house-promo__title { font-family: var(--font-display); font-size: 30px; line-height: 1.05; text-wrap: balance; color: var(--bg); }
.house-promo__body { font-size: 14px; line-height: 1.5; color: var(--bg); }
.house-promo__cta { display: inline-flex; gap: var(--s3); align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--gold); color: var(--text); font-size: 13px; line-height: 1.3; font-weight: 700; margin-top: var(--s2); }
.house-promo:hover .house-promo__cta { background: var(--gold-tint); }
.house-promo--card { width: 300px; min-height: 360px; }
.house-promo--card .house-promo__content { padding-top: 118px; }
.house-promo--card .house-promo__label { position: absolute; top: 16px; left: 16px; background: var(--text); padding: 4px 8px; border-radius: var(--r-sm); }
.house-promo--tall { width: 160px; min-height: 600px; }
.house-promo--tall .house-promo__content { padding: var(--s4); padding-top: 230px; }
.house-promo--tall .house-promo__title { font-size: 26px; overflow-wrap: anywhere; }
.house-promo--tall .house-promo__label { font-size: 10px; }
.house-promo--wide { width: 728px; min-height: 150px; }
.house-promo--wide::before { background: linear-gradient(90deg, var(--text) 10%, rgba(8,37,46,.96) 45%, rgba(8,37,46,.15) 100%); }
.house-promo--wide .house-promo__image { object-position: right center; }
.house-promo--wide .house-promo__content { padding: var(--s4) var(--s5); width: 72%; }
.house-promo--wide .house-promo__eyebrow, .house-promo--wide .house-promo__body { display: none; }
.house-promo--wide .house-promo__title { font-size: 32px; }
.article-side .house-promo-wrap + .house-promo-wrap, .listing-side .house-promo-wrap + .house-promo-wrap { margin-top: var(--s5); }
.article-side:has(.house-promo-wrap), .listing-side:has(.house-promo-wrap) { position: static; }
@media (max-width: 767px) {
 .house-promo--wide { width: 100%; min-height: 175px; }
 .house-promo--wide .house-promo__content { width: 86%; padding: var(--s4); }
 .house-promo--wide .house-promo__title { font-size: 28px; }
 /* The top band sits between the menu and the title. A 728×90 ad belongs there;
    an editorial promotion does not — on a phone it fills the width, pushes the
    guide below the fold, and repeats word for word the recommendation docked at
    the bottom of the same screen. On phones the dock carries it alone. Paid
    banners (.ad-band > .ad-slot) are untouched. */
 .house-promo-wrap.ad-band { display: none; }
}
@media (max-width: 940px) { .article-side .house-promo-wrap, .listing-side .house-promo-wrap { display: none; } }
@media print { .house-promo-wrap { display: none; } }

/* 18px / 1.75 on every screen, as on the reference article.
   Two things NOT copied from it, both defects there:
   - its paragraphs have no gap between them — ours keep 1.15em;
   - its H2 stays 33px on phones, larger than its 30px H1 — ours shrink to 26px. */
.prose { max-width: var(--measure); font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--text-soft); }
.prose > * { margin-inline: auto; }
.prose h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.0625rem);   /* 26px phone → 33px */
  margin: var(--s7) 0 var(--s3); color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.prose h3 { font-size: 1.3125rem; margin: var(--s6) 0 var(--s3); color: var(--text); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose p { margin: 0 0 1.15em; }
.prose strong { color: var(--text); font-weight: 650; }
.prose a { color: var(--accent-ink); font-weight: 500; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--accent-ink); }
.prose figure { margin: var(--s6) 0; }
.prose figure img { border-radius: var(--r-md); width: 100%; }
.prose figcaption {
  font-size: var(--fs-sm); color: var(--text-faint);
  margin-top: var(--s2); padding-left: var(--s3);
  border-left: 2px solid var(--accent-line);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--s7) 0; }

/* Buttons inside the article text: .prose a would otherwise repaint their label
   in --accent-ink — invisible on the --accent-ink plate of .btn-primary. */
.prose a.btn { font-weight: 600; text-decoration: none; }
.prose a.btn-primary, .prose a.btn-primary:hover { color: #fff; }
.prose a.btn-outline { color: var(--accent-ink); }
.prose a.btn-outline:hover { color: var(--accent-deep); }
/* A line holding only a partner link ([Text →](/go/…) in Markdown) becomes a button */
.prose .cta-line { margin: var(--s4) 0 var(--s6); }

/* Plain quote in the text (not a pull quote) — also frames the
   [EXPÉRIENCE À AJOUTER] placeholders while an article is a draft */
.prose blockquote:not(.pullquote) {
  margin: var(--s5) 0; padding: var(--s3) var(--s4);
  border-left: 3px solid var(--border-strong); background: var(--surface-2);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-soft);
}
.prose blockquote:not(.pullquote) > :last-child { margin-bottom: 0; }

/* Working markers, PREVIEW ONLY — the import refuses to publish an article that still has one */
mark.todo {
  background: var(--warning-tint); color: var(--text); border: 1px dashed var(--warning);
  border-radius: 4px; padding: 0 .3em; font-family: var(--font-mono); font-size: .8em; font-style: normal;
}

/* Lead paragraph */
.lead { font-size: var(--fs-xl); line-height: 1.5; color: var(--text); font-family: var(--font-display); font-weight: 400; }

/* Pull quote */
.pullquote {
  margin: var(--s7) 0; padding: var(--s2) 0 var(--s2) var(--s5);
  border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-size: var(--fs-xl);
  line-height: 1.4; color: var(--text); font-style: italic;
}
.pullquote cite { display: block; margin-top: var(--s3); font-size: var(--fs-sm); font-style: normal; color: var(--text-faint); font-family: var(--font-sans); }

/* -------------------- 10. CALLOUTS -------------------- */
.callout {
  display: flex; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  /* L'encadré neutre était en corail — la couleur qui dit « attention » dans ce
     système. Un bloc « bon à savoir » n'a rien d'alarmant : il passe en teal info. */
  border-left: 3px solid var(--info);
  background: var(--info-tint);
  margin: var(--s6) 0;
  font-size: var(--fs-base); line-height: 1.6;
}
.callout .ico { flex: none; font-size: 1.1rem; line-height: 1.5; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }
.callout-tip     { border-left-color: var(--success); background: var(--success-tint); }
.callout-warning { border-left-color: var(--warning); background: var(--warning-tint); }
.callout-note    { border-left-color: var(--accent);  background: var(--accent-tint); }

/* -------------------- 11. TABLE OF CONTENTS -------------------- */
/* Reference layout: numbered 01, 02… with a rail on the left. The section being
   read lights up (.active, set by a scroll observer), so the contents double as
   a "you are here" marker in the right column. */
.toc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.toc h2, .toc .toc-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 13px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 1px; }
.toc li { counter-increment: toc; margin: 0; }
.toc a {
  display: flex; gap: 11px; padding: 8px 10px;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text-soft); text-decoration: none;
  border-left: 2px solid var(--border); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero); flex: none; padding-top: 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
}
.toc a:hover, .toc a.active { background: var(--surface-1); color: var(--accent-ink); border-left-color: var(--accent); }
.toc a.active { font-weight: 600; }
.toc a.active::before { color: var(--accent-ink); }

/* -------------------- 12. AUTHOR BOX (E-E-A-T) -------------------- */
.author-box {
  display: flex; gap: var(--s4); align-items: flex-start;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px;
  margin: var(--s7) 0 0;
}
.author-box .avatar {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-full);
  object-fit: cover; background: var(--grad-1);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: #fff;
}
.author-box .a-body { flex: 1; min-width: 0; }
.author-box .a-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; margin: 0 0 2px; }
.author-box .a-role { font-size: var(--fs-xs); color: var(--accent-ink); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 var(--s2); }
.author-box .a-bio { font-size: var(--fs-sm); color: var(--text-soft); margin: 0 0 var(--s3); }
.author-box .a-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); font-size: var(--fs-sm); }

/* Byline (inline meta under H1) */
.byline { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-faint); }
.byline .avatar-sm { width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--accent-ink); color: #fff; font-weight: 700; font-size: var(--fs-xs); flex: none; }
.byline a { color: var(--text-soft); font-weight: 600; text-decoration: none; }
.byline a:hover { color: var(--accent-ink); }
.byline .dot { color: var(--text-dim); }

/* Article byline — one ruled line under the dek, as on the reference article:
   avatar · author · date · reading time, set in mono. Share buttons ride on the
   same line, pushed right: travel gets planned in group chats (WhatsApp) and
   saved on Pinterest, so sharing stays where every travel competitor puts it. */
.article-byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: var(--s4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px; color: var(--text-faint);
}
.article-byline .who { display: flex; align-items: center; gap: 9px; color: var(--text-soft); }
.article-byline .who a { color: var(--text); font-weight: 700; text-decoration: none; }
.article-byline .who a:hover { color: var(--accent-ink); }
.article-byline .mini-av {
  width: 26px; height: 26px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--grad-1); color: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
}
.article-byline .meta { text-transform: uppercase; letter-spacing: .02em; }
.article-byline .sep { color: var(--text-dim); }
/* On a phone the meta line must fit one row, as on the reference (354px):
   the "Updated" label goes, and the share buttons take their own row. */
@media (max-width: 480px) {
  .article-byline .meta-label { display: none; }
  .article-byline .share-mini { flex-basis: 100%; margin-left: 0; margin-block: 0; }
}

/* -3px top and bottom: 32px buttons stay comfortable to hit while the ruled
   line keeps the reference height of 60px (the 26px avatar sets it). */
.share-mini { display: flex; gap: 6px; margin-left: auto; margin-block: -3px; }
.share-mini a, .share-mini button {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--text-soft); cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.share-mini .icon { width: 16px; height: 16px; }
.share-mini a:hover, .share-mini button:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-tint); }
.share-mini .s-whatsapp:hover { background: #25D366; border-color: #25D366; color: #08252E; }
.share-mini .s-pin:hover      { background: #E60023; border-color: #E60023; color: #fff; }
.share-mini button.is-done    { background: var(--success-tint); border-color: var(--success); color: var(--success); }

/* -------------------- 13. AFFILIATE / BOOKING BOX -------------------- */
.affiliate-box {
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--accent-tint), transparent 60%), var(--surface-1);
  padding: var(--s5);
  margin: var(--s6) 0;
}
.affiliate-box .a-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 var(--s2);
}
.affiliate-box h3, .affiliate-box h4 { font-size: var(--fs-lg); margin: 0 0 var(--s2); }
.affiliate-box p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0 0 var(--s4); }
.affiliate-box .a-foot { font-size: var(--fs-xs); color: var(--text-faint); margin: var(--s3) 0 0; }

/* Global affiliate disclosure — FTC compliance */
.disclosure {
  font-size: var(--fs-xs); color: var(--text-faint);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px var(--s3);
  margin: 0 0 var(--s5);
}
.disclosure strong { color: var(--text-soft); }

/* -------------------- 14. COMPARISON TABLE -------------------- */
.table-wrap { max-width: 100%; overflow-x: auto; margin: var(--s6) 0; border: 1px solid var(--border); border-radius: var(--r-lg); }
table.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface-1); }
table.cmp th, table.cmp td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--border); }
table.cmp thead th {
  background: var(--surface-2); font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft);
  white-space: nowrap;
}
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody tr:hover { background: var(--surface-2); }
table.cmp .best { color: var(--success); font-weight: 600; }

/* -------------------- 15. RATING / VERDICT -------------------- */
.rating { display: inline-flex; align-items: center; gap: 3px; }
.rating .star { width: 15px; height: 15px; fill: var(--gold); }
.rating .star.off { fill: var(--surface-3); }
.rating .score { margin-left: var(--s2); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-soft); }
/* Every published rating names its source and date: no rating without one */
.rating .src { margin-left: var(--s2); font-size: var(--fs-xs); color: var(--text-faint); }
.affiliate-box .rating { margin-bottom: var(--s3); }

.verdict {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); padding: var(--s5); margin: var(--s6) 0;
}
.verdict .v-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); }
.verdict .v-score {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
  color: var(--accent-ink); line-height: 1;
}
.verdict .v-head .eyebrow { margin: 0; }
.verdict .v-head h3 { margin: 4px 0 0; font-size: var(--fs-lg); }
.verdict .v-score small { font-size: 1rem; font-weight: 400; color: var(--text-faint); }
.verdict .v-summary { font-size: var(--fs-sm); color: var(--text-faint); margin: 0; }
.pros-cons { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 620px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros-cons ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--text-soft); }
.pros-cons h4, .pros-cons h5 { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--s2); }
.pros h4, .pros h5 { color: var(--success); }
.cons h4, .cons h5 { color: var(--danger); }
.pros li::marker { color: var(--success); }
.cons li::marker { color: var(--danger); }

/* -------------------- 16. FAQ (schema-ready) -------------------- */
.faq { margin: var(--s6) 0; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-1); margin-bottom: var(--s3);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s4) var(--s5); font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  font-size: var(--fs-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent-ink); font-size: 1.25rem; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq .faq-body { padding: var(--s4) var(--s5); font-size: var(--fs-base); color: var(--text-soft); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* -------------------- 17. BREADCRUMB -------------------- */
.breadcrumb { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); margin-bottom: var(--s4); }
.breadcrumb a { color: var(--text-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb .sep { color: var(--text-dim); }
.breadcrumb [aria-current] { color: var(--text-soft); }

/* -------------------- 18. NEWSLETTER -------------------- */
.newsletter {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5);
}
.newsletter h4 { font-size: var(--fs-lg); margin: 0 0 var(--s2); }
.newsletter p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0 0 var(--s4); }
.field {
  display: flex; gap: var(--s2); flex-wrap: wrap;
}
.input {
  flex: 1 1 180px; min-width: 0;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  padding: 11px var(--s3);
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.input::placeholder { color: var(--text-dim); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* -------------------- 19. PAGINATION -------------------- */
.pagination { display: flex; align-items: center; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: grid; place-items: center; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  border: 1px solid var(--border); color: var(--text-soft); background: var(--surface-1);
}
.pagination a:hover { border-color: var(--accent-line); color: var(--accent-ink); }
/* --accent-ink, not --accent: white on the vivid turquoise only reaches 2.8:1 */
.pagination .current { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.pagination .gap { border: 0; background: transparent; color: var(--text-dim); }

/* -------------------- 20. FOOTER -------------------- */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding-block: var(--s7) var(--s5);
  margin-top: 96px;
  font-size: var(--fs-sm);
}
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
/* Les colonnes du pied de page portaient des <h5> après un <h2> ou un <h3> :
   axe-core signalait un saut de niveau sur les 9 pages. Ce sont des <h2>
   désormais — le niveau est sémantique, la taille reste visuelle. */
.site-footer h2, .site-footer h5 {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--s3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.site-footer a { color: var(--text-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent-ink); }
.site-footer .tagline { color: var(--text-soft); max-width: 40ch; margin: var(--s3) 0 0; }
.footer-bottom {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-faint);
}

/* -------------------- 21. UTILITIES -------------------- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; margin: 0 0 var(--s3);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.section-head p { color: var(--text-faint); font-size: var(--fs-sm); margin: var(--s2) 0 0; }
.see-all {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-ink); text-decoration: none; white-space: nowrap;
}
.see-all:hover { color: var(--accent-deep); text-decoration: underline; }
.text-center { text-align: center; }
/* A row of buttons or chips: wraps on small screens, keeps its spacing */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.row.is-center { justify-content: center; }
.mt-6 { margin-top: var(--s6); }
.mb-5 { margin-bottom: var(--s5); }
.muted { color: var(--text-faint); }
.small { font-size: var(--fs-sm); }
/* The inline SVG icon sprite: present in the page, never rendered itself */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: block; } }
.show-mobile { display: block; }
@media (min-width: 768px) { .show-mobile { display: none; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Mockup ribbon — remove in production */
.mockup-flag {
  background: var(--warning-tint); border-bottom: 1px solid var(--border-strong);
  color: #6B4A0C; font-size: var(--fs-xs); text-align: center; padding: 7px var(--s4);
}

/* -------------------- 19a. ICONS -------------------- */
/* Inline SVG sprite instead of emoji: emoji render differently on every OS,
   can't take the theme colour, and read as amateur on a monetised site. */
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.18em;
}
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-solid { fill: currentColor; stroke: none; }

/* -------------------- 19f. QUICK FACTS STRIP -------------------- */
/* The three questions a traveller asks before reading anything:
   when to go, how long, what it costs. Answer them above the first scroll. */
.quickfacts {
  display: grid; gap: 1px; margin: var(--s5) 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.quickfacts > div {
  background: var(--surface-2); padding: var(--s4) var(--s4);
  display: flex; flex-direction: column; gap: 3px;
}
.quickfacts .qf-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.quickfacts .qf-value { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text); line-height: 1.2; }
.quickfacts .qf-note  { font-size: var(--fs-xs); color: var(--text-faint); }

/* -------------------- 19g. KEY TAKEAWAYS (GEO) -------------------- */
/* Written to be lifted whole by an AI answer: self-contained declarative
   sentences, no "as we saw above", no pronouns pointing elsewhere. */
.takeaways {
  margin: var(--s6) 0; padding: var(--s5);
  background: var(--accent-tint);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.takeaways h2, .takeaways h3 {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
  margin: 0 0 var(--s3);
}
.takeaways ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.takeaways li {
  position: relative; padding-left: var(--s5);
  font-size: var(--fs-base); line-height: 1.55; color: var(--text);
}
.takeaways li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--accent);
}

/* -------------------- 19h. GOOD TO KNOW -------------------- */
.factbox {
  margin: var(--s6) 0; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1);
}
.factbox > header {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.factbox dl { margin: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) { .factbox dl { grid-template-columns: 1fr 1fr; } }
.factbox dl > div {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border);
}
.factbox dt {
  flex: none; width: 96px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint);
}
.factbox dd { margin: 0; font-size: var(--fs-sm); color: var(--text); min-width: 0; }

/* -------------------- 19i. AFFILIATE TOP PICKS -------------------- */
/* The highest-converting affiliate format: a short ranked shortlist where
   every entry wins a different category, so nobody leaves without a click. */
.picks { display: grid; gap: var(--s4); margin: var(--s6) 0; }
@media (min-width: 760px) { .picks { grid-template-columns: repeat(3, 1fr); } }
.pick {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); overflow: hidden;
}
.pick.is-top { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pick .pick-flag {
  padding: 7px var(--s4); font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-soft); text-align: center;
}
.pick.is-top .pick-flag { background: var(--accent-ink); color: #fff; }
.pick .thumb { aspect-ratio: 16 / 10; background: var(--surface-3); }
.pick .pick-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.pick h3, .pick h4 { font-size: var(--fs-lg); margin: 0; font-family: var(--font-display); }
.pick .why { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; flex: 1; }
.pick .pick-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: var(--fs-xs); color: var(--text-faint); }

/* -------------------- 19j. PHOTO GALLERY + PINTEREST -------------------- */
/* Pinterest is the biggest travel referrer in the US, and it only accepts
   tall images. Every gallery carries one 2:3 pinnable frame. */
.gallery { display: grid; gap: var(--s3); margin: var(--s6) 0; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; }
.gallery .frame { aspect-ratio: 4 / 3; }
.gallery figure:first-child { grid-column: span 2; }
.gallery figure:first-child .frame { aspect-ratio: 16 / 10; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s4) var(--s3) var(--s2);
  font-size: var(--fs-xs); color: #fff; border: 0;
  background: linear-gradient(transparent, rgba(8, 37, 46, .78));
}

.pin-frame { aspect-ratio: 2 / 3; border-radius: var(--r-md); overflow: hidden; max-width: 300px; }
.btn-pin { background: #E60023; color: #fff; }
.btn-pin:hover { background: #AD081B; color: #fff; }

/* The pinnable image with its call to save — sits inside an article */
.pin-cta { display: flex; align-items: flex-start; gap: var(--s5); flex-wrap: wrap; margin: var(--s6) 0; }
.pin-cta figure { margin: 0; flex: 0 1 220px; }
.pin-cta .pin-copy { flex: 1 1 210px; min-width: 0; }
.pin-cta h3 { font-size: var(--fs-xl); margin: 0 0 var(--s2); }
.pin-cta p { font-size: var(--fs-sm); color: var(--text-faint); margin: 0 0 var(--s4); }

/* -------------------- 19k. ANCHORED AD (dock) -------------------- */
/* The reference article's dock: a banner fixed to the bottom of the screen,
   on desktop AND phones — 728×90 on desktop, the mobile standard 320×50 on
   phones. Hidden until the reader has scrolled past the byline (.is-visible),
   closable for good.
   Two rules added on top of the reference:
   - it waits for the cookie banner to be answered — there, both bars stacked
     and the cookie bar hid most of the ad;
   - its height is capped at ~25% of the screen. The Better Ads Standards count
     a sticky ad over 30% of the viewport as a violation, and Chrome filters
     ads on sites that fail them. */
.ad-anchor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; flex-direction: column; align-items: center;
  padding: 0 12px 12px;
  background: var(--surface-2); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 24px rgba(8, 37, 46, .12);
}
.ad-anchor.is-visible { display: flex; }
.ad-anchor .ad-slot { width: min(100%, 728px, calc((25vh - 47px) * 728 / 90)); min-height: 0; }
@media (max-width: 767px) { .ad-anchor .ad-slot { width: 320px; max-width: 100%; height: 50px; } }
.ad-anchor .ad-close {
  order: -1; align-self: flex-end; margin: 5px 0;
  width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--surface-1); border: 1px solid var(--border-strong);
  color: var(--text-soft); cursor: pointer; font-size: 13px; line-height: 1;
}
.ad-anchor .ad-close:hover { color: var(--accent-ink); border-color: var(--accent); }
/* While the dock shows, the page gains the same room at its foot, so the end
   of the footer can still be scrolled into view above it. */
body:has(> .ad-anchor.is-visible) { padding-bottom: 150px; }
@media (max-width: 767px) { body:has(> .ad-anchor.is-visible) { padding-bottom: 110px; } }

/* -------------------- 19l. COOKIE BANNER (CMP) -------------------- */
.house-anchor { padding: 8px 56px 8px 12px; background: var(--text); border-color: var(--accent-ink); }
.house-anchor__link { display: flex; align-items: center; gap: var(--s4); width: min(100%, 728px); color: var(--bg); text-decoration: none; }
.house-anchor__link:hover { color: var(--bg); }
.house-anchor__link img { width: 100px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.house-anchor__link > span { flex: 1; min-width: 0; }
.house-anchor__link small { display: block; font-size: 10px; color: var(--gold); }
.house-anchor__link strong { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.house-anchor__link b { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; background: var(--gold); color: var(--text); border-radius: var(--r-sm); font-size: 13px; }
.house-anchor .ad-close { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; margin: 0; font-size: 22px; }
.house-anchor__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.house-anchor-demo { display: flex; position: relative; }
@media (max-width: 600px) {
 .house-anchor__link { gap: 8px; }
 .house-anchor__link img { display: none; }
 .house-anchor__link strong { font-size: 17px; }
 .house-anchor__link small { font-size: 8px; }
 .house-anchor__link b { font-size: 11px; padding: 8px; max-width: 105px; }
}

/* Required to serve ads to EEA/UK visitors and to be accepted by premium
   networks. A full-width bar fixed to the bottom, as on the reference article.
   Declining must be exactly as easy as accepting — same size, no greyed-out
   button, no dark pattern. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--surface-1); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 24px rgba(8, 37, 46, .10);
}
/* Returning visitor: the head script flags <html> before the first paint, so the
   bar never flashes on while site.js loads. */
.has-consent .cookie-banner { display: none; }
.cookie-banner .cb-text { flex: 1 1 240px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }
.cookie-banner .cb-text b { color: var(--text); }
.cookie-banner .cb-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* -------------------- 19v. SOCIAL SHARE -------------------- */
/* WhatsApp first: travel gets planned in group chats, not on X.
   Position matters as much as the buttons — every competitor in the panel puts
   this bar directly under the byline, above the article body, not at the end
   where few readers ever arrive. */
.share { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s6) 0; }

/* Share count as social proof. Only render it once the number is real —
   "0 shares" is worse than no counter at all. */
.share .share-count {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding-right: var(--s3); margin-right: var(--s2);
  border-right: 1px solid var(--border);
}
.share .share-count b {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.share .share-count span {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 4px;
}
.share .share-label {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  margin-right: var(--s2);
}
.share a, .share button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
  padding: 9px 14px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-soft);
  text-decoration: none;
}
.share a:hover, .share button:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-tint); }
.share .s-pin:hover      { background: #E60023; border-color: #E60023; color: #fff; }
.share .s-whatsapp:hover { background: #25D366; border-color: #25D366; color: #08252E; }

/* -------------------- 19w. CLUSTER LINKS + PREV/NEXT -------------------- */
/* Internal linking inside one silo. Distinct from generic "related articles":
   these are the pieces that belong to the same pillar, so the links carry
   topical authority instead of scattering it. */
.cluster {
  margin: var(--s7) 0; border: 1px solid var(--accent-line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1);
}
.cluster > header {
  padding: var(--s3) var(--s5); background: var(--accent-tint);
  border-bottom: 1px solid var(--accent-line);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
  display: flex; align-items: center; gap: var(--s2);
}
.cluster ol { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.cluster li { border-bottom: 1px solid var(--border); }
.cluster li:last-child { border-bottom: 0; }
.cluster li a {
  display: flex; gap: var(--s4); align-items: baseline;
  padding: var(--s3) var(--s5); text-decoration: none; color: var(--text);
}
.cluster li a:hover { background: var(--surface-2); color: var(--accent-ink); }
.cluster li a::before {
  counter-increment: c; content: counter(c, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); flex: none;
}
.cluster .t { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 600; }
.cluster .m { flex: none; font-size: var(--fs-xs); color: var(--text-faint); }
.cluster li.is-current a { background: var(--surface-2); cursor: default; color: var(--text-faint); }
.cluster li.is-current .t::after { content: " — you are here"; font-weight: 400; color: var(--text-dim); }

.prevnext { display: grid; gap: var(--s3); margin: var(--s7) 0; }
@media (min-width: 640px) { .prevnext { grid-template-columns: 1fr 1fr; } }
.prevnext a {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); text-decoration: none; display: block; background: var(--surface-1);
}
.prevnext a:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.prevnext .dir {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint);
  letter-spacing: .08em; text-transform: uppercase;
}
.prevnext .t { display: block; margin-top: 5px; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; color: var(--text); line-height: 1.3; }
.prevnext .next { text-align: right; }

/* -------------------- 19x. INLINE NEWSLETTER -------------------- */
/* Mid-article, where the reader is actually engaged — the sidebar and the
   footer are the two least-read places on the page. */
.newsletter-inline {
  margin: var(--s7) 0; padding: var(--s5);
  border-radius: var(--r-lg); background: var(--grad-1); color: #fff;
}
.newsletter-inline h3, .newsletter-inline h4 { color: #fff; font-size: var(--fs-xl); margin: 0 0 var(--s2); }
.newsletter-inline p { color: rgba(255,255,255,.92); font-size: var(--fs-sm); margin: 0 0 var(--s4); max-width: 52ch; }
.newsletter-inline .field .input { border-color: transparent; }
.newsletter-inline .btn { background: #fff; color: var(--accent-ink); }
.newsletter-inline .btn:hover { background: var(--accent-tint); color: var(--accent-deep); }
.newsletter-inline .fine { font-size: var(--fs-xs); color: rgba(255,255,255,.8); margin: var(--s3) 0 0; }

/* -------------------- 19y. RSoC UNIT -------------------- */
/* Search-style ad unit: it must look like what it is and never imitate the
   site's own search field, or the reader is being tricked. */
.ad-rsoc {
  margin: var(--s6) 0; border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); background: var(--surface-2); padding: var(--s5);
}
.ad-rsoc .rsoc-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--s3);
}
.ad-rsoc h4 { font-size: var(--fs-lg); margin: 0 0 var(--s3); }
.ad-rsoc .rsoc-terms { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ad-rsoc .rsoc-terms a {
  font-size: var(--fs-sm); padding: 9px 15px; border-radius: var(--r-full);
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--accent-ink); text-decoration: none; font-weight: 600;
}
.ad-rsoc .rsoc-terms a:hover { border-color: var(--accent-line); background: var(--accent-tint); }

/* -------------------- 19z. PREFERENCES DIALOG + TOGGLE -------------------- */
/* Native <dialog>: focus trap, Esc to close and the backdrop come for free. */
dialog.prefs {
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: 0; max-width: 540px; width: calc(100% - 2 * var(--s4));
  box-shadow: var(--sh-3); color: var(--text); background: var(--surface-1);
}
dialog.prefs::backdrop { background: rgba(8, 37, 46, .45); }
dialog.prefs > header { padding: var(--s5) var(--s5) var(--s3); }
dialog.prefs h3 { font-size: var(--fs-xl); margin: 0 0 var(--s2); }
dialog.prefs > header p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
dialog.prefs .prefs-list { border-top: 1px solid var(--border); }
dialog.prefs .prefs-list > div { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); display: flex; gap: var(--s4); align-items: flex-start; justify-content: space-between; }
dialog.prefs .prefs-list h4 { font-size: var(--fs-base); margin: 0 0 3px; }
dialog.prefs .prefs-list p { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
dialog.prefs footer { padding: var(--s4) var(--s5); display: flex; gap: var(--s2); flex-wrap: wrap; }
dialog.prefs footer .btn { flex: 1 1 150px; }

.toggle { position: relative; flex: none; width: 46px; height: 26px; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .track {
  display: block; width: 46px; height: 26px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--border-strong);
  transition: background .16s ease, border-color .16s ease; pointer-events: none;
}
.toggle .track::after {
  content: ""; position: absolute; top: 4px; left: 4px;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--surface-1); box-shadow: var(--sh-1);
  transition: transform .16s ease;
}
.toggle input:checked + .track { background: var(--accent-ink); border-color: var(--accent-ink); }
.toggle input:checked + .track::after { transform: translateX(20px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle input:disabled + .track { opacity: .55; }

/* -------------------- 19p. SEASON CHART -------------------- */
/* One series, one hue (#00758C, 4.8:1 on white — the vivid accent fails the
   3:1 mark-contrast check, so it is not used for fills). The "comfortable"
   information is carried by a labelled band, never by colour alone. */
.chart { margin: var(--s6) 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); overflow: hidden; }
.chart > figcaption { order: 2; padding: var(--s3) var(--s5); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-faint); border-left: 0; margin: 0; }
.chart .chart-head { padding: var(--s4) var(--s5) 0; }
.chart .chart-head h3 { font-size: var(--fs-lg); margin: 0; }
.chart .chart-head p { font-size: var(--fs-sm); color: var(--text-faint); margin: 4px 0 0; }

.chart-plot { position: relative; padding: var(--s5) var(--s5) 0; }
.chart-band {
  position: absolute; left: var(--s5); right: var(--s5);
  background: var(--success-tint);
  border-top: 1px dashed var(--success); border-bottom: 1px dashed var(--success);
  pointer-events: none;
}
/* The band is named in a legend line outside the plot, never by text laid
   inside it — bars cross the band and made that label unreadable. */
.chart-legend {
  display: flex; align-items: center; gap: 8px;
  padding: var(--s2) var(--s5) 0;
  font-size: var(--fs-xs); color: var(--text-faint);
}
.chart-legend .swatch-band {
  width: 20px; height: 13px; flex: none; background: var(--success-tint);
  border-top: 1px dashed var(--success); border-bottom: 1px dashed var(--success);
}
.chart-bars {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  height: 190px; align-items: end;
}
.chart-bars li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.chart-bars .bar {
  display: block; height: var(--h); width: 76%; margin-inline: auto;
  background: #00758C; border-radius: 4px 4px 0 0;
  transition: background .14s ease;
}
.chart-bars li:hover .bar, .chart-bars li:focus-within .bar { background: #00A9C9; }
.chart-bars .val {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--h) + 6px);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chart-months {
  list-style: none; margin: 0; padding: var(--s2) var(--s5) var(--s5);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); text-align: center;
}
/* Tooltip au survol — un graphique HTML est interactif par nature */
.chart-bars li .tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 6px; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--text); color: #fff; font-size: 11.5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s ease; z-index: 5;
}
.chart-bars li:hover .tip, .chart-bars li:focus-within .tip { opacity: 1; }
.chart-table { padding: 0 var(--s5) var(--s5); }
.chart-table summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-ink); font-weight: 600; }
.chart-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: var(--s3); }
.chart-table th, .chart-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.chart-table td:last-child { font-variant-numeric: tabular-nums; }

/* -------------------- 19q. NEIGHBOURHOOD PICKER -------------------- */
.hoods { display: grid; gap: var(--s4); margin: var(--s6) 0; }
@media (min-width: 720px) { .hoods { grid-template-columns: repeat(2, 1fr); } }
.hood { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1); display: flex; flex-direction: column; }
.hood .thumb { aspect-ratio: 16 / 9; }
.hood .hood-body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.hood h3, .hood h4 { font-size: var(--fs-xl); margin: 0; font-family: var(--font-display); }
.hood .for { font-size: var(--fs-sm); color: var(--accent-ink); font-weight: 600; margin: 0; }
.hood ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-sm); color: var(--text-soft); }
.hood li { display: flex; gap: var(--s2); align-items: flex-start; }
.hood li.plus > svg  { color: var(--success); flex: none; margin-top: .2em; }
.hood li.minus > svg { color: var(--danger);  flex: none; margin-top: .2em; }

/* -------------------- 19r. CHECKLIST -------------------- */
/* State lives in the reader's browser only. It is a convenience, so the list
   must read correctly when nothing was ever saved. */
.checklist { margin: var(--s6) 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); overflow: hidden; }
.checklist > header { padding: var(--s4) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.checklist > header h3 { font-size: var(--fs-lg); margin: 0; }
.checklist .progress { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: 0; }
.checklist label { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s5); cursor: pointer; font-size: var(--fs-base); }
.checklist label:hover { background: var(--surface-2); }
.checklist input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: #00758C; }
.checklist input:checked + span { color: var(--text-dim); text-decoration: line-through; }
.checklist .note { display: block; font-size: var(--fs-xs); color: var(--text-faint); text-decoration: none !important; }

/* -------------------- 19s. TIMELINE -------------------- */
.timeline { list-style: none; margin: var(--s6) 0; padding: 0 0 0 var(--s5); position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.timeline li { position: relative; padding-bottom: var(--s5); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1 * var(--s5) + 2px); top: 6px;
  width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--surface-1); border: 3px solid #00758C;
}
.timeline .when { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-ink); letter-spacing: .04em; }
.timeline h4 { font-size: var(--fs-base); margin: 3px 0 4px; }
.timeline p { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }

/* -------------------- 19t. PHRASES -------------------- */
.phrases { margin: var(--s6) 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.phrases > header { padding: var(--s3) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--border); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: var(--s2); }
.phrases dl { margin: 0; }
.phrases dl > div { display: grid; gap: 2px var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border); background: var(--surface-1); }
@media (min-width: 620px) { .phrases dl > div { grid-template-columns: 1fr 1fr; align-items: baseline; } }
.phrases dl > div:last-child { border-bottom: 0; }
.phrases dt { font-size: var(--fs-sm); color: var(--text-soft); }
.phrases dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.phrases dd small { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-faint); }

/* -------------------- 19u. LOADING SKELETONS -------------------- */
/* For content streamed from D1: reserve the final geometry so nothing jumps
   when the data lands (CLS stays at 0). */
.skeleton { background: var(--surface-2); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%); animation: sk 1.3s infinite;
}
@keyframes sk { to { transform: translateX(100%); } }
.sk-line { height: 12px; margin-bottom: 9px; }
.sk-line.w80 { width: 80%; } .sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; }
.sk-thumb { aspect-ratio: 16 / 10; border-radius: 0; }
.sk-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1); }
.sk-card .sk-body { padding: var(--s4); }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* -------------------- 19n. AUTHOR HERO (E-E-A-T) -------------------- */
/* The page Google and the AI engines look at to decide whether the site is
   written by someone real. Credentials sit above the fold, not in a footer. */
.author-hero {
  display: grid; gap: var(--s6); align-items: start;
  grid-template-columns: 1fr; padding-block: var(--s7);
}
@media (min-width: 820px) { .author-hero { grid-template-columns: 220px 1fr; } }
.author-hero .portrait {
  width: 160px; height: 160px; border-radius: var(--r-full);
  background: var(--grad-1); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3.4rem; color: #fff; font-weight: 700;
}
@media (min-width: 820px) { .author-hero .portrait { width: 200px; height: 200px; font-size: 4.2rem; } }
.author-hero h1 { font-size: var(--fs-3xl); }
.author-hero .role {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
  margin: var(--s2) 0 var(--s4);
}
.author-hero .bio { font-size: var(--fs-lg); color: var(--text-soft); max-width: 62ch; }

/* Sidebar author card — the trust signal stays visible on every article,
   not only on the author page. Standard practice across the panel. */
.author-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-1); padding: var(--s5); text-align: center;
}
.author-card .portrait {
  width: 86px; height: 86px; border-radius: var(--r-full);
  margin: 0 auto var(--s3); display: grid; place-items: center;
  background: var(--grad-1); color: #fff;
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 700;
}
.author-card .a-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; margin: 0 0 3px; }
.author-card .a-role {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
  margin: 0 0 var(--s3);
}
.author-card .a-bio { font-size: var(--fs-sm); color: var(--text-soft); margin: 0 0 var(--s4); }
.author-card .a-proof {
  list-style: none; margin: 0 0 var(--s4); padding: var(--s3) 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
  font-size: var(--fs-xs); color: var(--text-soft); text-align: left;
}
.author-card .a-proof li { display: flex; gap: var(--s2); align-items: flex-start; }
.author-card .a-proof svg { color: var(--success); flex: none; margin-top: .15em; }

/* Light-ground counterpart of .hero-stats */
.stat-row {
  display: grid; gap: 1px; margin: var(--s5) 0;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.stat-row > div { background: var(--surface-1); padding: var(--s4); }
.stat-row b {
  display: block; font-family: var(--font-display);
  font-size: 1.9rem; line-height: 1; font-weight: 700; color: var(--accent-ink);
}
.stat-row span { display: block; font-size: var(--fs-xs); color: var(--text-faint); margin-top: 6px; }

/* Credentials — the concrete claims, one per line, each checkable */
.credentials { list-style: none; margin: var(--s5) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.credentials li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-base); color: var(--text-soft); }
.credentials li > svg { color: var(--success); margin-top: .28em; }

/* -------------------- 19o. EMPTY / ERROR STATES -------------------- */
.empty-state {
  text-align: center; padding: var(--s8) var(--s5);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.empty-state .glyph {
  width: 56px; height: 56px; margin: 0 auto var(--s4);
  border-radius: var(--r-full); background: var(--accent-tint);
  display: grid; place-items: center; color: var(--accent-ink);
}
.empty-state h3 { font-size: var(--fs-xl); margin: 0 0 var(--s2); }
.empty-state p { color: var(--text-soft); max-width: 46ch; margin: 0 auto var(--s5); font-size: var(--fs-base); }

.bignum {
  font-family: var(--font-display); font-weight: 700; line-height: .9;
  font-size: clamp(5rem, 18vw, 10rem);
  background: var(--grad-1); -webkit-background-clip: text; background-clip: text;
  color: transparent; margin: 0 0 var(--s4);
}

/* -------------------- 19m. SKIP LINK + FORM STATES -------------------- */
.skip-link {
  position: absolute; left: var(--s4); top: -60px; z-index: 200;
  background: var(--accent-ink); color: #fff; padding: 11px 18px;
  border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: var(--s3); color: #fff; }

.input.is-error   { border-color: var(--danger); }
.input.is-success { border-color: var(--success); }
.field-msg {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); margin: var(--s2) 0 0; width: 100%;
}
.field-msg.is-error   { color: var(--danger); }
.field-msg.is-success { color: var(--success); }

/* -------------------- 19b. ORIENTATION MAP -------------------- */
/* Inline SVG on purpose: no external tiles, no JS, no API key, works offline
   on a plane and prints cleanly. A traveller choosing between two districts
   needs relative position and walking times, not street-level detail. */
.map-fig {
  margin: var(--s6) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-1);
}
.map-fig svg { width: 100%; height: auto; display: block; background: var(--surface-2); }
.map-fig figcaption {
  font-size: var(--fs-sm); color: var(--text-faint);
  padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  border-left: 0; margin: 0;
}
.map-area      { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2; }
.map-area-alt  { fill: var(--sec-tint);    stroke: var(--sec-ink); stroke-width: 2; }
.map-label     { font-family: var(--font-sans); font-size: 15px; font-weight: 700; fill: var(--text); }
.map-sub       { font-family: var(--font-sans); font-size: 11.5px; fill: var(--text-faint); }
.map-pin       { fill: var(--sec-ink); }
.map-route     { stroke: var(--text-dim); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.map-time      { font-family: var(--font-mono); font-size: 11px; fill: var(--text-soft); }
.map-legend    { font-family: var(--font-sans); font-size: 11.5px; fill: var(--text-soft); }

/* -------------------- 19c. ITINERARY -------------------- */
/* Built to be screenshotted and shared: self-contained, branded, readable
   at phone width. That sharing is free distribution. */
.itinerary {
  margin: var(--s6) 0; padding: var(--s5);
  border-radius: var(--r-lg); background: var(--surface-2);
  border: 1px solid var(--border);
}
.itinerary > h3 {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  margin: 0 0 var(--s4);
}
.itinerary ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.itin-day { display: flex; gap: var(--s4); align-items: flex-start; }
.itin-day .n {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--grad-1); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.itin-day .d { min-width: 0; }
.itin-day h3, .itin-day h4 { font-size: var(--fs-lg); margin: 0 0 3px; }
.itin-day p  { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }
.itinerary .stamp {
  margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-faint);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}

/* -------------------- 19d. COSTS + VERIFICATION STAMP -------------------- */
/* A traveller's first question is what it costs. Publishing ranges with a
   visible checked-on date is both honest and usable; refusing to give any
   figure just sends them to a competitor. */
.cost-box {
  margin: var(--s6) 0; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1);
}
.cost-box > header {
  padding: var(--s4) var(--s5); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
}
.cost-box > header h3 { font-size: var(--fs-lg); margin: 0; }
.cost-rows { display: flex; flex-direction: column; }
.cost-row {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border);
}
.cost-row:last-child { border-bottom: 0; }
.cost-row .what { flex: 1; min-width: 0; font-size: var(--fs-base); }
.cost-row .what small { display: block; color: var(--text-faint); font-size: var(--fs-xs); }
/* Le montant garde sa colonne : même long (fourchette, devise, précision), il s'enroule
   à droite au lieu d'avaler la ligne et d'écraser le libellé. */
.cost-row .amt {
  flex: 0 1 auto; max-width: 42%; text-align: right; overflow-wrap: break-word;
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-base); color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Sur téléphone, le montant passe sous son libellé plutôt que de se réduire à deux mots par ligne. */
@media (max-width: 560px) {
  .cost-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cost-row .amt { max-width: 100%; text-align: left; }
}
.verified {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--success);
  background: var(--success-tint); padding: 5px 10px; border-radius: var(--r-full);
}

/* -------------------- 19e. SAVE / PRINT -------------------- */
.page-tools { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Travellers read these offline — on a plane, or on the ground with no data.
   Strip everything that is not the guide. */
@media print {
  .site-header, .reading-progress, .article-side, .hero-ad, .ad-band, .ad-slot, .ad-anchor,
  .cookie-banner, .share-mini, .newsletter, .article-related,
  .mockup-flag, .page-tools, .site-footer, .breadcrumb { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .article-hero-split, .article-body { display: block; margin: 0; }
  .article-wrap { padding: 0; }
  .article-main { max-width: none; }
  .prose { max-width: none; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .card, .callout, .itinerary, .cost-box, .map-fig, .author-box, .toc {
    break-inside: avoid; box-shadow: none;
  }
  h2, h3 { break-after: avoid; }
  .faq details { break-inside: avoid; }
  .faq .faq-body { display: block !important; }
}

/* -------------------- 22. TOUCH TARGETS -------------------- */
/* Most travel traffic is mobile. Navigation and in-page jump links are the
   controls readers actually use to find the bit they came for, and their text
   size alone leaves them ~18px tall — well under the ~44px a thumb needs. */
@media (hover: none) {
  .brand               { min-height: 44px; }
  .nav-toggle          { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .header-actions .btn-sm { min-height: 44px; }
  .main-nav a          { min-height: 44px; padding-block: 12px; }
  .toc a               { min-height: 44px; padding-block: 11px; align-items: center; }
  .share-mini a, .share-mini button { width: 44px; height: 44px; }
  .share a, .share button { min-height: 44px; }
  .ad-anchor .ad-close { width: 32px; height: 32px; margin: 4px 0; }
  .breadcrumb          { gap: var(--s3); }
  .breadcrumb a        { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; }
  .site-footer ul a    { display: inline-flex; align-items: center; min-height: 44px; padding-block: 7px; }
  .chip                { padding: 10px 15px; }
  .author-box .a-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .card h3 a           { display: block; padding-block: 2px; }
  .checklist label     { min-height: 44px; }
  .checklist input     { width: 24px; height: 24px; margin-top: 0; }
}

/* On phones the consent choices stay equally prominent, but the bar gives more
   of the first screen back to the article. The three actions remain 44px high
   and never wrap onto two rows at the supported 320px minimum viewport. */
@media (max-width: 767px) {
  .cookie-banner { gap: 10px; padding: 12px 16px; }
  .cookie-banner .cb-text { flex-basis: 100%; font-size: 12.5px; line-height: 1.4; }
  .cookie-banner .cb-actions { width: 100%; flex-wrap: nowrap; justify-content: center; gap: 8px; }
  .cookie-banner .cb-actions .btn { min-height: 44px; padding: 8px 14px; }
}

/* -------------------- 23. MOTION -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}