/* =============================================================================
   MediaBay.fr — Le Cahier
   Mobile-first · Vanilla CSS · Self-hosted · Editorial manifesto aesthetic
   ============================================================================= */

/* ---------- 01. Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, pre {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- 02. Design tokens ------------------------------------------ */
:root {
  /* — Ink & paper — */
  --ink:         #1a1814;
  --ink-mute:    #5b554a;
  --ink-soft:    #8a8275;
  --paper:       #f4ede0;
  --paper-warm:  #ede4d1;
  --paper-deep:  #dfd3b8;
  --paper-pure:  #faf6ec;
  --rule:        rgba(26, 24, 20, .92);
  --rule-soft:   rgba(26, 24, 20, .14);
  --rule-faint:  rgba(26, 24, 20, .06);

  /* — Accents — */
  --vermilion:      #c8472e;
  --vermilion-deep: #a13822;
  --vermilion-soft: rgba(200, 71, 46, .12);
  --olive:          #5a623b;
  --success:        #4d6a3a;

  /* — Type — */
  --ff-serif: Georgia, "Iowan Old Style", "Apple Garamond", "Hoefler Text",
              "Times New Roman", Times, serif;
  --ff-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
              "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono:  ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
              "Roboto Mono", Menlo, Consolas, monospace;

  /* — Fluid type ramp — */
  --t-xs:    .6875rem;
  --t-sm:    .8125rem;
  --t-base:  1.0625rem;
  --t-md:    1.1875rem;
  --t-lg:    1.4375rem;
  --t-xl:    clamp(1.625rem, 4vw + .25rem, 2.5rem);
  --t-2xl:   clamp(2rem, 6vw + .5rem, 3.5rem);
  --t-display: clamp(2.625rem, 11vw + .25rem, 6.5rem);
  --t-numeral: clamp(4rem, 18vw, 9rem);

  /* — Space — */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-7: 2rem;
  --s-8: 2.5rem;
  --s-10: 3.5rem;
  --s-12: 4.5rem;
  --s-16: 6rem;
  --s-20: 8rem;

  /* — Containers — */
  --w-narrow: 38rem;
  --w-prose:  44rem;
  --w-wide:   72rem;
  --pad-x: 1.25rem;

  /* — Motion — */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.5, 0, .9, 1);
  --d-1: 180ms;
  --d-2: 320ms;
  --d-3: 600ms;
}

@media (min-width: 640px) { :root { --pad-x: 2rem; } }
@media (min-width: 1024px) { :root { --pad-x: 3rem; } }

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f4ede0;
    --ink-mute:   #c2b8a4;
    --ink-soft:   #807769;
    --paper:      #14130f;
    --paper-warm: #1c1a14;
    --paper-deep: #28251c;
    --paper-pure: #0e0d09;
    --rule:       rgba(244, 237, 224, .9);
    --rule-soft:  rgba(244, 237, 224, .18);
    --rule-faint: rgba(244, 237, 224, .08);
    --vermilion:      #e26241;
    --vermilion-deep: #c8472e;
    --vermilion-soft: rgba(226, 98, 65, .14);
  }
}

/* ---------- 03. Base ---------------------------------------------------- */
html {
  background: var(--paper);
  color-scheme: light dark;
}
body {
  font-family: var(--ff-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  /* Subtle paper grain */
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(26, 24, 20, .025) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 32%, rgba(26, 24, 20, .02)  0 1px, transparent 2px),
    radial-gradient(circle at 42% 78%, rgba(26, 24, 20, .025) 0 1px, transparent 2px);
  background-size: 220px 220px, 180px 180px, 260px 260px;
  overflow-x: hidden;
}

::selection { background: var(--vermilion); color: var(--paper-pure); }

:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: var(--s-2);
}
.skip-link:focus {
  left: var(--s-2); z-index: 999;
  padding: var(--s-2) var(--s-4);
  background: var(--ink); color: var(--paper-pure);
  font-family: var(--ff-mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- 04. Typography --------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.05;
  color: var(--ink);
}
p { line-height: 1.65; }

.display {
  font-family: var(--ff-serif);
  font-size: var(--t-display);
  line-height: .96;
  letter-spacing: -.025em;
  font-weight: 400;
}
.display em {
  font-style: italic;
  color: var(--vermilion);
  font-feature-settings: "kern";
}

.lede {
  font-family: var(--ff-serif);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-mute);
  font-weight: 400;
}

.dropcap::first-letter {
  font-family: var(--ff-serif);
  font-size: 4.5em;
  font-weight: 400;
  float: left;
  line-height: .85;
  margin: .08em .12em -.05em 0;
  color: var(--vermilion);
}

.eyebrow,
.mono-label,
.tag {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

.serif-italic { font-family: var(--ff-serif); font-style: italic; }

.rule {
  display: block;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule--soft { background: var(--rule-soft); }

/* ---------- 05. Layout primitives -------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.wrap--prose  { max-width: var(--w-prose); }
.wrap--narrow { max-width: var(--w-narrow); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

/* ---------- 06. Manifesto ticker bar ----------------------------------- */
.manifesto-bar {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  position: relative;
  z-index: 30;
}
.manifesto-bar__track {
  display: flex;
  white-space: nowrap;
  padding-block: .65rem;
  animation: ticker 38s linear infinite;
  will-change: transform;
}
.manifesto-bar__group {
  display: inline-flex; align-items: center; gap: var(--s-6);
  padding-inline: var(--s-4);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.manifesto-bar__group span { display: inline-flex; align-items: center; gap: .5rem; }
.manifesto-bar__group b { color: var(--vermilion); font-weight: 600; }
.manifesto-bar__group::after {
  content: "✦";
  color: var(--vermilion);
  margin-left: var(--s-6);
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.manifesto-bar:hover .manifesto-bar__track { animation-play-state: paused; }

/* ---------- 07. Site header -------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 25;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
}
.brand {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--ff-serif);
  font-size: var(--t-lg);
  letter-spacing: -.015em;
}
.brand__sigil {
  display: inline-block;
  width: 1.2em; height: 1.2em;
  border: 1px solid var(--ink);
  border-radius: 50%;
  text-align: center;
  line-height: 1.1em;
  font-style: italic;
  font-size: .85em;
  color: var(--vermilion);
  transform: translateY(.1em);
}
.brand__name { font-weight: 400; }
.brand__name em { font-style: italic; }
.brand__tld {
  font-family: var(--ff-mono);
  font-size: .55em;
  letter-spacing: .15em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-left: .15em;
}

.site-nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav__link {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--d-1) var(--ease);
}
.site-nav__link:hover { color: var(--vermilion); }
.site-nav__link--mobile-hide { display: none; }
@media (min-width: 640px) {
  .site-nav__link--mobile-hide { display: inline; }
}

.privacy-stamp {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .6rem;
  border: 1px solid var(--ink);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  background: var(--paper-pure);
}
.privacy-stamp::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--vermilion);
  border-radius: 50%;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.6); opacity: .55; }
}

/* ---------- 08. Hero --------------------------------------------------- */
.hero {
  padding-top: var(--s-8);
  padding-bottom: var(--s-10);
  position: relative;
}
.hero__inner {
  display: grid;
  gap: var(--s-8);
}
.hero__head { display: grid; gap: var(--s-5); }
.hero__meta {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.hero__meta-rule {
  flex: 1; min-width: 2rem;
  height: 1px; background: var(--rule);
}
.hero__title {
  font-size: var(--t-display);
  line-height: .95;
  letter-spacing: -.025em;
  margin-block: var(--s-2);
}
.hero__title em {
  font-style: italic;
  color: var(--vermilion);
}
.hero__lede {
  font-family: var(--ff-serif);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 38ch;
}
.hero__pledge {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) 0;
  display: grid; gap: var(--s-3);
}
.hero__pledge-title {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vermilion);
}
.hero__pledge-text {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.3;
  color: var(--ink);
}

/* Mobile (< 920px) : remonte la dropzone juste sous le titre.
   `.hero__head` passe en display:contents pour que ses enfants deviennent
   des items flex de `.hero__inner` et soient réordonnés via `order` — le
   convertisseur s'insère ainsi entre la note et l'intro, sans toucher au DOM
   (ordre de lecture/SEO préservé). Au-delà, le grid 2 colonnes reprend. */
@media (max-width: 919.98px) {
  .hero__inner { display: flex; flex-direction: column; gap: var(--s-5); }
  .hero__head  { display: contents; }

  .hero__meta   { order: 1; }
  .hero__title  { order: 2; }
  .hero__rating { order: 3; }
  .converter    { order: 4; }
  .hero__lede   { order: 5; }
  .hero__pledge { order: 6; }
}

@media (min-width: 920px) {
  .hero { padding-top: var(--s-12); padding-bottom: var(--s-16); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--s-12);
    align-items: start;
  }
  .hero__title { font-size: clamp(3rem, 6.5vw + .5rem, 5.5rem); }
}

/* ---------- 09. Section markers (N°01, N°02…) -------------------------- */
.section {
  padding-block: var(--s-10);
  border-top: 1px solid var(--rule);
}
.section__inner { display: grid; gap: var(--s-6); }
.section__marker {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section__marker-num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--vermilion);
  letter-spacing: -.02em;
  line-height: 1;
  font-feature-settings: "onum" 1;
}
.section__title {
  font-size: var(--t-2xl);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.section__title em { color: var(--vermilion); font-style: italic; }
.section__intro {
  font-family: var(--ff-serif);
  font-size: var(--t-md);
  color: var(--ink-mute);
  max-width: 42ch;
}

@media (min-width: 920px) {
  .section { padding-block: var(--s-16); }
  .section__inner {
    grid-template-columns: 12rem 1fr;
    gap: var(--s-10);
    align-items: start;
  }
  .section__marker {
    flex-direction: column; align-items: flex-start; gap: var(--s-2);
    position: sticky; top: 6rem;
  }
  .section__marker-num { font-size: clamp(3rem, 5vw, 4.5rem); }
}

/* ---------- 10. Converter card & states -------------------------------- */
.converter {
  position: relative;
  background: var(--paper-pure);
  border: 1px solid var(--ink);
  padding: var(--s-2);
  box-shadow: 6px 6px 0 var(--ink);
}
@media (min-width: 640px)  { .converter { padding: var(--s-3); box-shadow: 8px 8px 0 var(--ink); } }
@media (min-width: 1024px) { .converter { box-shadow: 12px 12px 0 var(--ink); } }

.converter::before {
  content: "FICHIER · LOCAL · 100%";
  position: absolute; top: -10px; left: var(--s-4);
  background: var(--paper);
  padding: 0 var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .22em;
  color: var(--ink);
}
.converter__panel { padding: var(--s-5); }
@media (min-width: 640px) { .converter__panel { padding: var(--s-7); } }

/* — IDLE: drop zone — */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-4);
  min-height: 18rem;
  border: 1px dashed var(--ink);
  outline: 1px dashed var(--ink);
  outline-offset: 6px;
  cursor: pointer;
  background: var(--paper-warm);
  transition: background var(--d-2) var(--ease),
              outline-color var(--d-2) var(--ease),
              border-color var(--d-2) var(--ease),
              transform var(--d-2) var(--ease);
  position: relative;
}
.dropzone:hover,
.dropzone:focus-visible {
  background: var(--paper-deep);
  outline-color: var(--vermilion);
}
.dropzone.is-dragging {
  background: var(--vermilion-soft);
  border-color: var(--vermilion);
  outline-color: var(--vermilion);
  transform: scale(1.01);
}
.dropzone__input {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden;
}
.dropzone__icon {
  width: 56px; height: 56px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--vermilion);
  background: var(--paper-pure);
  transition: transform var(--d-2) var(--ease);
}
.dropzone:hover .dropzone__icon,
.dropzone.is-dragging .dropzone__icon { transform: translateY(-4px); }
.dropzone__title {
  font-family: var(--ff-serif);
  font-size: var(--t-xl);
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--ink);
}
.dropzone__title em { font-style: italic; color: var(--vermilion); }
.dropzone__cta {
  font-family: var(--ff-mono); font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.dropzone__cta strong {
  color: var(--vermilion);
  text-decoration: underline; text-underline-offset: 3px;
  font-weight: 500;
}
.dropzone__formats {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center;
  margin-top: var(--s-2);
}
.dropzone__formats span {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  padding: .2rem .5rem;
  background: var(--paper-pure);
  border: 1px solid var(--rule-soft);
  color: var(--ink-mute);
}
.dropzone__assurance {
  margin-top: var(--s-3);
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  letter-spacing: .08em;
}
.dropzone__assurance svg { color: var(--vermilion); }

/* Subtle scan line on idle */
.dropzone::after {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--vermilion), transparent);
  opacity: 0;
  pointer-events: none;
  animation: scanline 4s ease-in-out infinite;
}
@keyframes scanline {
  0%, 100% { opacity: 0; transform: translateY(-40%); }
  50%      { opacity: .35; transform: translateY(40%); }
}

/* — LOADED — */
.preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
  margin-bottom: var(--s-6);
}
.preview--summary {
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: stretch;
}
.preview__thumb {
  width: 72px; height: 72px;
  object-fit: cover;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}
.preview__meta { min-width: 0; }
.preview__summary {
  display: flex; flex-direction: column; gap: var(--s-1);
}
.preview__count {
  font-family: var(--ff-serif);
  font-size: var(--t-lg);
  letter-spacing: -.01em;
}
.preview__count em { font-style: italic; color: var(--vermilion); }
.preview__name {
  font-family: var(--ff-serif);
  font-size: var(--t-md);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preview__info {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: var(--s-1);
}
.preview__files {
  list-style: none;
  margin: 0; padding: var(--s-3) 0 0;
  border-top: 1px dashed var(--rule-soft);
  display: flex; flex-direction: column; gap: var(--s-1);
  max-height: 168px; overflow-y: auto;
}
.preview__file {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.preview__file-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-soft);
}
.preview__file-size {
  flex: 0 0 auto;
  color: var(--ink-mute);
}
.preview__file--more {
  font-style: italic;
  color: var(--vermilion);
  text-align: center;
  justify-content: center;
}
.link-btn {
  margin-top: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--d-1) var(--ease);
}
.link-btn:hover { color: var(--vermilion); }

.options { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); }
@media (min-width: 560px) { .options { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (min-width: 820px) { .options { grid-template-columns: 1fr 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: baseline; justify-content: space-between;
}
.field__label output {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-md);
  letter-spacing: -.01em;
  color: var(--vermilion);
  text-transform: none;
}

/* Select styled to look hand-set */
.field__control {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  padding: .7rem var(--s-4);
  padding-right: 2.5rem;
  background: var(--paper-pure);
  border: 1px solid var(--ink);
  font-family: var(--ff-serif);
  font-size: var(--t-base);
  color: var(--ink);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--d-1) var(--ease);
}
.field__control:focus { outline: none; border-color: var(--vermilion); }

/* Range styled as a manual dial */
.field__range {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  background: transparent;
  height: 24px;
  cursor: pointer;
}
.field__range::-webkit-slider-runnable-track {
  height: 2px; background: var(--ink); border: 0;
}
.field__range::-moz-range-track { height: 2px; background: var(--ink); border: 0; }
.field__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  background: var(--vermilion);
  border: 2px solid var(--paper-pure);
  border-radius: 0;
  margin-top: -8px;
  cursor: grab;
  box-shadow: 0 0 0 1px var(--ink);
  transition: transform var(--d-1) var(--ease);
}
.field__range::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--vermilion);
  border: 2px solid var(--paper-pure);
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--ink);
  cursor: grab;
}
.field__range:active::-webkit-slider-thumb,
.field__range:hover::-webkit-slider-thumb { transform: scale(1.15); }

/* — SUCCESS / ERROR — */
.success, .error {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-4);
}
.success__stamp {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .35rem var(--s-4);
  border: 2px solid var(--vermilion);
  color: var(--vermilion);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-lg);
  letter-spacing: .04em;
  transform: rotate(-2deg);
  animation: stamp .6s var(--ease) both;
}
@keyframes stamp {
  0%   { transform: rotate(-2deg) scale(1.4); opacity: 0; }
  60%  { transform: rotate(-2deg) scale(.92); opacity: 1; }
  100% { transform: rotate(-2deg) scale(1); }
}
.success__title, .error__title {
  font-family: var(--ff-serif);
  font-size: var(--t-2xl);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.success__info {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.8;
}
.success__info strong { color: var(--ink); font-weight: 500; }

/* — Stats du Dwell Time — */
.success__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  width: 100%;
  max-width: 520px;
  margin: var(--s-4) 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: var(--s-4);
}
@media (min-width: 640px) {
  .success__stats { grid-template-columns: repeat(4, 1fr); }
}
.success__stat {
  display: flex; flex-direction: column; gap: var(--s-1);
  text-align: left;
  padding: 0 var(--s-2);
  border-left: 1px dashed var(--rule-soft);
}
.success__stat:first-child { border-left: 0; }
.success__stat dt {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.3;
}
.success__stat dd {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: var(--t-lg);
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.1;
}
.success__stat dd small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-style: normal;
}
.success__stat--highlight dd {
  color: var(--vermilion);
  font-style: italic;
}

.actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-3);
}
.error__title { color: var(--vermilion); }
.error__msg {
  font-family: var(--ff-serif);
  font-size: var(--t-md);
  color: var(--ink-mute);
  max-width: 36ch;
  line-height: 1.5;
}

/* ---------- 11. Buttons ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .9rem 1.4rem;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-pure);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform var(--d-1) var(--ease),
              background var(--d-1) var(--ease),
              color var(--d-1) var(--ease),
              box-shadow var(--d-1) var(--ease);
  position: relative;
}
.btn:hover {
  background: var(--ink); color: var(--paper-pure);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--vermilion);
}
.btn:active { transform: translate(0, 0); box-shadow: 0 0 0 transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary {
  background: var(--vermilion); color: var(--paper-pure);
  border-color: var(--vermilion);
}
.btn--primary:hover {
  background: var(--vermilion-deep); color: var(--paper-pure);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn--lg {
  width: 100%;
  padding: 1.1rem 1.5rem;
  font-size: var(--t-sm);
}
.btn--ghost {
  background: transparent;
}

/* ---------- 12. Features grid (numbered cards) ------------------------- */
.features {
  display: grid; gap: 0;
}
.feature {
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  display: grid; gap: var(--s-3);
}
.feature:first-child { border-top: 1px solid var(--rule); }
.feature__num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--vermilion);
  letter-spacing: -.01em;
}
.feature__title {
  font-family: var(--ff-serif);
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.feature__text {
  font-family: var(--ff-serif);
  font-size: var(--t-base);
  color: var(--ink-mute);
  line-height: 1.6;
  max-width: 40ch;
}
@media (min-width: 720px) {
  .features { grid-template-columns: 1fr 1fr; column-gap: var(--s-10); }
  .feature { padding: var(--s-7) 0; }
}

/* ---------- 13. Pull-quote / verifier callout -------------------------- */
.verify {
  display: grid; gap: var(--s-3);
  padding: var(--s-6) 0;
  border-block: 1px solid var(--rule);
}
.verify__quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 32ch;
}
.verify__quote::before {
  content: "« ";
  color: var(--vermilion);
}
.verify__quote::after {
  content: " »";
  color: var(--vermilion);
}
.verify__how {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.verify__how kbd {
  display: inline-block;
  padding: .15rem .4rem;
  border: 1px solid var(--ink);
  background: var(--paper-pure);
  font-family: var(--ff-mono);
  letter-spacing: 0;
  font-size: var(--t-xs);
}

/* ---------- 14. FAQ ---------------------------------------------------- */
.faq__item {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-4);
}
.faq__item:last-of-type { border-bottom: 1px solid var(--rule); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  align-items: baseline;
  font-family: var(--ff-serif);
  font-size: var(--t-lg);
  letter-spacing: -.015em;
  line-height: 1.25;
  padding-right: var(--s-2);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-family: var(--ff-serif); font-style: italic;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--vermilion);
  transition: transform var(--d-2) var(--ease);
}
.faq__item[open] .faq__q::after { content: "—"; }
.faq__a {
  margin-top: var(--s-3);
  font-family: var(--ff-serif);
  font-size: var(--t-base);
  color: var(--ink-mute);
  line-height: 1.65;
  max-width: 56ch;
}

/* ---------- 15. Related pairs grid (SEO) ------------------------------- */
.related {
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.related__item {
  background: var(--paper);
  padding: var(--s-5);
  display: grid; gap: var(--s-1);
  transition: background var(--d-1) var(--ease);
}
.related__item:hover { background: var(--paper-warm); }
.related__pair {
  font-family: var(--ff-serif);
  font-size: var(--t-xl);
  letter-spacing: -.015em;
}
.related__pair em { color: var(--vermilion); font-style: italic; padding-inline: .3rem; }
.related__hint {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (min-width: 640px) { .related { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .related { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 16. Ad slots ----------------------------------------------- */
.ad-block {
  display: grid; gap: var(--s-2);
  padding-block: var(--s-8);
  border-block: 1px dashed var(--rule-soft);
}
.ad-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.ad-block__label,
.ad-block__note {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm);
  border: 1px dashed var(--rule-soft);
  color: var(--ink-soft);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
}
.ad-slot::before {
  content: "ESPACE  PUBLICITAIRE";
  letter-spacing: .25em;
}
.ad-slot:has(*)::before { content: ""; }
.ad-slot--in-content {
  display: block;            /* réserve un bloc stable (anti-CLS) avant Adsterra */
  width: 100%;
  min-height: 90px;          /* hauteur bannière 728x90 réservée dès le rendu */
  max-width: 728px;
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 768px) { .ad-slot--in-content { min-height: 120px; } }
.ad-slot--modal {
  display: block;            /* idem : stabilise la modale avant l'injection */
  width: 300px;
  min-height: 250px;         /* emplacement 300x250 réservé (anti-CLS) */
  margin-inline: auto;
  flex-shrink: 0;
  background: var(--paper-pure);
}

/* ---------- 17. Modal de traitement ------------------------------------ */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--s-4);
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 19, 15, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade-in var(--d-2) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 56rem;
  max-height: 95vh;
  overflow: auto;
  background: var(--paper-pure);
  border: 1px solid var(--ink);
  box-shadow: 16px 16px 0 var(--vermilion);
  animation: rise var(--d-3) var(--ease);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px) rotate(-.3deg); }
  to   { opacity: 1; transform: none; }
}

.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.modal__head-label {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .25em;
  text-transform: uppercase;
}
.modal__head-status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  color: var(--vermilion);
}
.modal__head-status::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--vermilion);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.modal__body {
  display: grid; gap: var(--s-6);
  padding: var(--s-6) var(--s-5);
}
@media (min-width: 720px) {
  .modal__body {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--s-8);
    padding: var(--s-8);
    align-items: center;
  }
}

.modal__progress { display: grid; gap: var(--s-4); align-items: end; }
.modal__numeral {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-numeral);
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--vermilion);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .15em;
}
.modal__numeral-sign {
  font-size: .35em;
  color: var(--ink);
  font-style: normal;
  letter-spacing: 0;
  transform: translateY(-.4em);
  font-family: var(--ff-mono);
}
.progress {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px;
  border: 0;
  background: var(--paper-deep);
  overflow: hidden;
}
.progress::-webkit-progress-bar { background: var(--paper-deep); }
.progress::-webkit-progress-value {
  background: var(--ink);
  transition: width var(--d-2) var(--ease);
}
.progress::-moz-progress-bar { background: var(--ink); }
.modal__stage {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.modal__stage-msg { color: var(--ink); }
.modal__pledge {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: 32ch;
}

.modal__ad {
  display: grid; gap: var(--s-2); justify-items: center;
  padding: var(--s-4);
  background: var(--paper-warm);
  border: 1px solid var(--rule-soft);
}
.modal__ad-label {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-self: start;
  width: 100%;
}
.modal__ad-note {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  text-align: center;
  max-width: 28ch;
  line-height: 1.5;
}

/* ---------- 18. Breadcrumbs ------------------------------------------- */
.breadcrumbs {
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
}
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: .35rem;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.breadcrumbs li + li::before {
  content: "/"; padding-inline: .35rem; color: var(--vermilion);
}
.breadcrumbs a:hover { color: var(--vermilion); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ---------- 19. Site footer -------------------------------------------- */
.site-footer {
  margin-top: var(--s-16);
  border-top: 1px solid var(--rule);
  padding-block: var(--s-10);
}
.site-footer__inner {
  display: grid; gap: var(--s-8);
}
.site-footer__brand {
  display: grid; gap: var(--s-2);
}
.site-footer__pledge {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink-mute);
  max-width: 32ch;
  line-height: 1.45;
}
.site-footer__cols {
  display: grid; gap: var(--s-5);
}
.site-footer__col-title {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-2);
}
.site-footer__col ul { display: grid; gap: .35rem; }
.site-footer__col a {
  font-family: var(--ff-serif);
  font-size: var(--t-base);
  transition: color var(--d-1) var(--ease);
}
.site-footer__col a:hover { color: var(--vermilion); }
.site-footer__meta {
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-footer__meta b { color: var(--vermilion); font-weight: 500; }

@media (min-width: 720px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr); align-items: start; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .site-footer__meta { grid-column: 1 / -1; }
}

/* ---------- 19a. Page header (pages secondaires standard) -------------- */
/* En-tête sobre, centré, pour les pages-outils (embed) et listes (guides
   index). Plus calme que le Hero éditorial de la landing : tailles
   ramenées à des dimensions raisonnables sur desktop, pas de grille
   split-screen, pas de dropcap. */
.page-header {
  text-align: center;
  padding-block: var(--s-12) var(--s-6);
  margin-bottom: var(--s-8);
}
.page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-4);
}
.page-header__eyebrow::before,
.page-header__eyebrow::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--rule-soft);
}
.page-title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.page-title em { color: var(--vermilion); font-style: italic; }
.page-header__lede {
  font-family: var(--ff-serif);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 58ch;
  margin: var(--s-5) auto 0;
}

/* ---------- 19b. Prose (pages éditoriales) ----------------------------- */
/* Conteneur typographique des pages longues (guides, articles, mentions).
   Centré, largeur de lecture confortable (65ch ≈ 600-680px), rythme
   serif académique — volontairement plus calme que les titres "display"
   de la landing pour ne pas écraser le corps de texte. */
.prose {
  font-family: var(--ff-serif);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink);
  max-width: 65ch;
  margin: 0 auto;
  padding-block: var(--s-8);
}
.prose > * + * { margin-top: var(--s-4); }
.prose h1 {
  font-family: var(--ff-serif);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: var(--s-5);
  color: var(--ink);
}
.prose h2 {
  font-family: var(--ff-serif);
  font-size: clamp(1.375rem, 1.05rem + 1vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
  margin-top: var(--s-10);
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.prose h3 {
  font-family: var(--ff-serif);
  font-size: var(--t-lg);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin-top: var(--s-7);
  color: var(--ink);
}
.prose p { color: var(--ink-mute); max-width: 60ch; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--vermilion); font-style: italic; }
.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--vermilion);
  transition: color var(--d-1) var(--ease);
}
.prose a:hover { color: var(--vermilion); }
.prose ul, .prose ol { padding-left: var(--s-5); max-width: 60ch; }
.prose ul { list-style: none; }
.prose ul li {
  position: relative;
  padding-left: var(--s-4);
  color: var(--ink-mute);
  line-height: 1.65;
}
.prose ul li + li { margin-top: var(--s-2); }
.prose ul li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--vermilion);
  font-family: var(--ff-mono);
}
.prose ol { list-style: none; counter-reset: prose; }
.prose ol li {
  counter-increment: prose;
  position: relative;
  padding-left: 2rem;
  color: var(--ink-mute);
}
.prose ol li + li { margin-top: var(--s-2); }
.prose ol li::before {
  content: counter(prose, decimal-leading-zero) ".";
  position: absolute; left: 0;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--vermilion);
  top: .3em;
}
.prose dl { display: grid; gap: var(--s-4); max-width: 60ch; }
.prose dt {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.prose dd {
  margin: var(--s-1) 0 0;
  color: var(--ink);
  font-family: var(--ff-serif);
}
.prose .callout {
  margin-block: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--vermilion);
  background: var(--vermilion-soft);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink);
  max-width: 56ch;
}

/* ---------- 20. Reveal animations -------------------------------------- */
.reveal { animation: rise var(--d-3) var(--ease) both; }
.r-1 { animation-delay: .05s; }
.r-2 { animation-delay: .18s; }
.r-3 { animation-delay: .32s; }
.r-4 { animation-delay: .46s; }
.r-5 { animation-delay: .6s; }

/* ---------- 20b. Cookie consent banner --------------------------------- */
.cookie-banner {
  position: fixed;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 200;
  max-width: 58rem;
  margin-inline: auto;
  background: var(--paper-pure);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-2) var(--ease),
              transform var(--d-2) var(--ease);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner.is-hidden  { opacity: 0; transform: translateY(24px); pointer-events: none; }

.cookie-banner::before {
  content: "Cookies";
  position: absolute;
  top: -10px;
  left: var(--s-4);
  padding: 0 var(--s-2);
  background: var(--paper);
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}

.cookie-banner__inner {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
}
.cookie-banner__text {
  font-family: var(--ff-serif);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
  max-width: 60ch;
}
.cookie-banner__text strong { color: var(--ink); font-weight: 600; }
.cookie-banner__link {
  color: var(--vermilion);
  border-bottom: 1px solid currentColor;
  font-style: italic;
  white-space: nowrap;
}
.cookie-banner__link:hover { color: var(--vermilion-deep); }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.cookie-banner__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: .8rem 1.1rem;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--paper-pure);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--d-1) var(--ease),
              background var(--d-1) var(--ease),
              color var(--d-1) var(--ease),
              box-shadow var(--d-1) var(--ease);
}
.cookie-banner__btn--ghost:hover {
  background: var(--ink);
  color: var(--paper-pure);
}
.cookie-banner__btn--primary {
  background: var(--vermilion);
  color: var(--paper-pure);
  border-color: var(--vermilion);
}
.cookie-banner__btn--primary:hover {
  background: var(--vermilion-deep);
  border-color: var(--vermilion-deep);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.cookie-banner__btn:active { transform: translate(0, 0); box-shadow: none; }

@media (min-width: 720px) {
  .cookie-banner { left: var(--s-5); right: var(--s-5); bottom: var(--s-5); }
  .cookie-banner__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--s-5) var(--s-6);
    gap: var(--s-6);
  }
  .cookie-banner__actions { flex-wrap: nowrap; }
  .cookie-banner__btn { flex: 0 0 auto; }
}

/* ---------- 21. Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .manifesto-bar__track { animation: none; }
  .dropzone::after { display: none; }
}

/* ---------- 22. Comparatif (MediaBay vs autres convertisseurs) --------- */
.compare {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ink);
  background: var(--paper-pure);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: var(--t-base);
}
.compare__caption {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.compare th,
.compare td {
  padding: var(--s-4);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

.compare__head th {
  vertical-align: bottom;
  border-bottom: 1px solid var(--ink);
}
.compare__brand {
  font-family: var(--ff-serif);
  font-size: var(--t-lg);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.compare__col--us { background: var(--vermilion-soft); }
.compare__col--us .compare__brand { color: var(--vermilion); font-style: italic; }

.compare__criterion {
  width: 1%;
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.compare__cell--us { background: var(--vermilion-soft); }

.compare__icon {
  display: inline-flex; flex: none;
  align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem;
  margin-right: .55rem;
  border-radius: 50%;
  font-size: .72rem; font-weight: 700; line-height: 1;
  vertical-align: -.28rem;
}
.compare__icon--yes { background: var(--success); color: var(--paper-pure); }
.compare__icon--no  { background: var(--rule);    color: var(--paper-pure); }

/* Étiquette de colonne par cellule — masquée en table, révélée en pile mobile. */
.compare__side { display: none; }

@media (max-width: 640px) {
  .compare {
    display: block;
    border: 0; box-shadow: none;
  }
  .compare__head { display: none; }
  .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tbody tr {
    margin-bottom: var(--s-5);
    background: var(--paper-pure);
    border: 1px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .compare tbody tr:last-child { margin-bottom: 0; }
  .compare__criterion {
    width: auto;
    padding: var(--s-2) var(--s-4);
    color: var(--paper-pure);
    background: var(--ink);
  }
  .compare th, .compare td { border-bottom: 1px solid var(--rule-soft); }
  .compare tbody td:last-child { border-bottom: 0; }
  .compare__side {
    display: block;
    margin-bottom: var(--s-1);
    font-family: var(--ff-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
}