/* ==============================================
   JADIS FEEL — Styles landing page
   Style : papier journal + interface rose/blush + tendresse
   ============================================== */

:root {
  /* Palette principale */
  /* Le même ivoire, en composantes séparées : le fondu du repli a besoin
     de cette couleur avec une transparence variable, et `rgba()` n'accepte
     pas une écriture hexadécimale. Les deux lignes doivent rester d'accord. */
  --c-ivory: #f9f6ee;
  --c-ivory-rgb: 249, 246, 238;

  --c-cream: #f3eee0;
  --c-ink: #2b1c14;
  --c-soft-black: #1a1a1a;
  --c-copper: #8B4513;
  --c-copper-soft: #b87139;
  --c-taupe: #6b5340;
  --c-paper: #e6dcc4;
  --c-paper-deep: #d4c6a5;

  /* Palette de l'interface Jadis (scène 1 : maison/intime) */
  --c-blush: #f59dbf;        /* rose blush */
  --c-blush-light: #fbc8da;  /* rose clair */
  --c-rose-deep: #e36478;    /* rose profond */
  --c-rose-pale: #c9c0af;    /* rose pâle / taupe */
  --c-offwhite: #fafbf8;     /* blanc cassé */

  /* Tendresse (état émotionnel par défaut de Jadis) */
  --c-tendresse-1: #f8c8d8;
  --c-tendresse-2: #f59dbf;
  --c-tendresse-3: #e36478;
  --c-tendresse-4: #fbc8da;

  /* Daguerréotype — tons argent/sépia pour le portrait Jadis
     (à modifier ici pour changer tout le look du portrait) */
  --c-daguerre-1: #3d342a;   /* bronze sombre */
  --c-daguerre-2: #6e5a45;   /* sépia moyen */
  --c-daguerre-3: #8a7558;   /* sépia clair */
  --c-daguerre-4: #b6a583;   /* beige argenté */
  --c-daguerre-5: #2a221b;   /* noir doux */
  /* Couleur de bordure du cadre portrait (à modifier ici) */
  --c-portrait-frame: #6e5a45;
  /* Couleur de bordure du snippet (extrait chronique, à modifier ici) */
  --c-snippet-accent: #8a6a3e;

  --c-vert-sourd: #4f6b42;   /* dernier palier du sablier */

  /* Typographies */
  --f-typewriter: 'Special Elite', 'Courier New', monospace;
  --f-serif: 'Prata', 'Georgia', serif;
  --f-display: 'Cormorant Garamond', 'Georgia', serif;
  --f-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Couleurs des sections */
  --c-section-light: rgba(250, 245, 232, 0.58);
  --c-section-dark: rgba(228, 210, 168, 0.68);
  --c-section-border: #b89968;
  --c-section-shadow: rgba(74, 52, 30, 0.18);

  /* Espacements */
  --s-xs: 0.5rem;
  --s-sm: 1rem;
  --s-md: 1.5rem;
  --s-lg: 2.5rem;
  --s-xl: 4rem;
  --s-2xl: 6rem;
}

/* Reset et base
   ---------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-ink);
  line-height: 1.6;
  min-height: 100vh;
  background-color: #f5ecd5;
  background-image: url('../imgs/journal-bg.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

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

a {
  color: var(--c-rose-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--c-ink); }

a:focus-visible {
  outline: 3px solid var(--c-rose-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* HERO
   ---------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-lg) var(--s-md) var(--s-xl);
  position: relative;
}

.video-frame {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  align-items: center;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--c-ink);
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 12px 40px rgba(43, 28, 20, 0.22),
    0 0 0 1px rgba(43, 28, 20, 0.08);
  border: 1px solid rgba(43, 28, 20, 0.15);
}

.jadis-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* CONTRÔLES VIDÉO — sous la vidéo */
.video-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--s-xs) var(--s-sm);
  background: rgba(var(--c-ivory-rgb), 0.7);
  border: 1px solid rgba(43, 28, 20, 0.15);
  border-radius: 28px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 100%;
}

.video-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--c-ink);
  color: var(--c-ivory);
  border: 1px solid var(--c-ink);
  border-radius: 22px;
  font-family: var(--f-typewriter);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.video-control-btn:hover { background: #4d3120; }
.video-control-btn:active { transform: translateY(1px); }
.video-control-btn[aria-pressed="true"] {
  background: var(--c-rose-deep);
  border-color: var(--c-rose-deep);
}
.video-control-btn .play-pause-icon { line-height: 1; font-size: 0.95rem; }
.video-control-btn .control-label { letter-spacing: 0.03em; }

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--c-ivory);
  color: var(--c-ink);
  border: 1px solid rgba(43, 28, 20, 0.25);
  border-radius: 22px;
  font-family: var(--f-typewriter);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.sound-toggle:hover { background: var(--c-paper); }
.sound-toggle:active { transform: translateY(1px); }
.sound-toggle[aria-pressed="true"] {
  background: var(--c-rose-deep);
  color: var(--c-ivory);
  border-color: var(--c-rose-deep);
}
.sound-toggle[aria-pressed="true"] .sound-icon::before { content: "🔊"; }
.sound-toggle[aria-pressed="true"] .sound-icon { font-size: 0; }
.sound-toggle[aria-pressed="true"] .sound-icon::before { font-size: 1rem; }

.hero-content {
  max-width: 720px;
  margin: var(--s-lg) auto 0;
}

.hero-title {
  font-family: var(--f-typewriter);
  font-size: clamp(2.8rem, 8vw, 4.4rem);
  font-weight: 400;
  margin: 0 0 var(--s-xs);
  color: var(--c-ink);
  letter-spacing: 0.02em;
}

/* Sous-titre discret : "Interface IA — écriture de chronique…"
   C'est un paragraphe depuis le 13/08/2026, plus un h3 : après le h1,
   un h3 sautait le niveau h2 et cassait la hiérarchie des titres. */
.hero-subtitle {
  font-family: var(--f-serif);
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  font-weight: 400;
  color: var(--c-taupe);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--s-sm);
  opacity: 0.85;
}

/* Mention d'inscription : à l'encre du corps de texte et non au cuivre — sur
   le beige du papier, le cuivre reste dans la même famille et ne se détache
   pas. La police est Cormorant, la seule des trois à charger un demi-gras
   réel : Prata n'a qu'une graisse, son gras serait fabriqué par le navigateur. */
.hero-inscription {
  font-family: var(--f-typewriter);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  color: var(--c-ink);
  margin: 0 0 var(--s-xs);
  letter-spacing: 0.01em;
}

.hero-inscription__delai {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1rem, 2.3vw, 1.2rem);
  font-weight: 500;
  color: var(--c-ink);
  font-style: italic;
  letter-spacing: 0.03em;
  margin-top: 4px;
}

.hero-tagline {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: var(--c-taupe);
  margin: 0 0 var(--s-md);
  letter-spacing: 0.05em;
  font-style: italic;
}

/* Bout de magazine — papier vintage, chapô + lettrine + suite
   Le fond est un ivoire très clair (presque blanc cassé) pour
   créer un vrai contraste avec le fond de page sable (#f5ecd5).
   Le contraste "papier clair sur fond chaud" est typique des
   magazines papier vintage. */
.hero-objective {
  font-family: var(--f-serif);
  color: var(--c-ink);
  margin: 0 auto var(--s-lg);
  max-width: 60ch;
  padding: var(--s-md) var(--s-lg) var(--s-md);
  /* Fond ivoire très clair, bien plus contrasté avec le fond de page */
  background: linear-gradient(180deg,
    #fdf8e7 0%,
    #f7eed4 100%);
  /* Bordure brun doré marquée + double filet pour effet "encadré magazine" */
  border: 2px solid #8a6a3e;
  outline: 1px solid rgba(110, 79, 41, 0.5);
  outline-offset: 5px;
  border-radius: 2px;
  text-align: justify;
  /* Ombre portée renforcée, dans les tons marron foncé */
  box-shadow:
    0 8px 24px rgba(43, 28, 20, 0.4),
    0 2px 4px rgba(43, 28, 20, 0.22),
    inset 0 0 0 1px rgba(184, 153, 104, 0.3);
  position: relative;
}

/* Chapô magazine : "LE MAGAZINE · DOSSIER SPÉCIAL" */
.hero-objective__masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--f-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-section-border);
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(184, 153, 104, 0.45);
}
.hero-objective__name { font-weight: 600; }
.hero-objective__sep  { opacity: 0.6; }
.hero-objective__section { font-style: italic; letter-spacing: 0.22em; }

/* Corps de texte avec lettrine — texte épaissi pour confort de lecture */
.hero-objective__text {
  font-size: 1.08rem;
  line-height: 1.8;
  margin: 0 0 0.8rem;
  color: var(--c-ink);
  text-align: justify;
  hyphens: auto;
  font-weight: 450;
  letter-spacing: 0.005em;
}

/* Lettrine "U" couleur cuivre doré, flottante à gauche */
.hero-objective__text .drop-cap {
  float: left;
  font-family: var(--f-display);
  font-size: 3.6em;
  line-height: 0.85;
  font-weight: 500;
  color: var(--c-section-border);
  padding: 0.05em 0.12em 0 0;
  margin: 0.05em 0.08em 0 0;
  font-style: normal;
}

.hero-objective__text em {
  color: var(--c-taupe);
  font-weight: 600;
  font-style: italic;
}

/* Pied du magazine : "Suite page 14 →" */
.hero-objective__footer {
  text-align: right;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(184, 153, 104, 0.3);
}
.hero-objective__suite {
  font-family: var(--f-typewriter);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-taupe);
  font-style: italic;
}

.hero-bio {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0 0 var(--s-lg);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* 3 boutons chronique (raccourcis) */
.hero-chronique-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  justify-content: center;
}

.btn-mini {
  display: inline-block;
  font-family: var(--f-typewriter);
  font-size: 0.92rem;
  padding: 12px 22px;
  border-radius: 24px;
  /* Bouton "secondaire" : blanc cassé opaque + bordure brun doré marquée
     pour rester visible sur le fond crème du hero */
  background: #fffaf0;
  color: var(--c-ink);
  border: 1.5px solid var(--c-section-border);
  /* Graisse augmentée pour améliorer la lisibilité du texte */
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(43, 28, 20, 0.1);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.btn-mini:hover {
  background: #fff5e0;
  color: var(--c-ink);
  box-shadow: 0 4px 12px rgba(43, 28, 20, 0.18);
  border-color: #8a6a3e;
}
.btn-mini:active { transform: translateY(1px); }
.btn-mini--primary {
  background: var(--c-ink);
  color: var(--c-ivory);
  border-color: var(--c-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.btn-mini--primary:hover { background: var(--c-soft-black); color: var(--c-ivory); }
.btn-mini--dark {
  font-weight: 700;
  background: var(--c-ink);
  color: var(--c-ivory);
  border-color: var(--c-ink);
}
.btn-mini--dark:hover {
  background: var(--c-soft-black);
  color: var(--c-ivory);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* CTA dans les blocs (un par bloc, sauf citation) */
.cta-block {
  display: inline-block;
  margin-top: var(--s-md);
  font-family: var(--f-typewriter);
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 24px;
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
  letter-spacing: 0.03em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.cta-block:hover {
  background: var(--c-ink);
  color: var(--c-ivory);
  transform: translateY(-1px);
}
.cta-block--primary {
  background: var(--c-ink);
  color: var(--c-ivory);
}
.cta-block--primary:hover {
  background: var(--c-soft-black);
  color: var(--c-ivory);
}
.cta-block--rose {
  /* Bouton "Rencontrer Jadis" — bordeaux/brun design (plus girly-rose)
     pour rester dans la palette magazine brun/bordeaux du site */
  background: #6b3a1c;
  color: #faf6ec;
  border-color: #6b3a1c;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cta-block--rose:hover {
  background: #4a2412;
  color: #faf6ec;
  border-color: #4a2412;
  box-shadow: 0 4px 12px rgba(75, 36, 18, 0.28);
}

/* ==============================================
   SECTIONS
   ============================================== */
.section {
  position: relative;
  padding: var(--s-2xl) var(--s-md);
  border-top: 1px solid var(--c-section-border);
  border-bottom: 1px solid var(--c-section-border);
  box-shadow: inset 0 6px 12px -6px var(--c-section-shadow);
}

.section--ivory { background: var(--c-section-light); }
.section--cream { background: var(--c-section-dark); }

.section::before {
  content: "❦";
  position: absolute;
  top: -0.9em;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(248, 240, 218, 0.9);
  color: var(--c-rose-deep);
  font-size: 1.5rem;
  padding: 0 14px;
  font-family: var(--f-display);
  font-style: italic;
  z-index: 2;
  border-left: 1px solid var(--c-section-border);
  border-right: 1px solid var(--c-section-border);
}
.section--cream::before { background: rgba(225, 205, 158, 0.92); }

.section__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.block-title {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 400;
  margin: 0 0 var(--s-md);
  color: var(--c-ink);
}

.block-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-ink);
  max-width: 50ch;
  margin: 0 auto var(--s-sm);
}
.block-text:last-child { margin-bottom: 0; }

/* Respiration après une liste, quand le paragraphe conclut le bloc. */
.block-text--espace { margin-top: 1.5rem; }
.block-text em {
  /* Bordeaux profond — bien plus lisible que le rose vif sur fond crème/jaune.
     Avant : var(--c-rose-deep) (#e36478) qui paraissait rose pâle/délavé
     sur le fond cream du site. On passe à un bordeaux magazine (#8b3a2e). */
  color: #8b3a2e;
  font-style: italic;
  font-weight: 500;
}

/* BLOC 1 — Citation George Sand — couleur sépia magazine (pas noir) */
.ode-citation {
  margin: 0;
  padding: 0 var(--s-md);
}

.ode-citation p {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4.4vw, 2.15rem);
  line-height: 1.4;
  /* Brun sépia foncé, plus chaud qu'un noir — évoque les citations
     en brun des magazines vintage (typographie InDesign) */
  color: #3d2418;
  font-style: italic;
  /* Graisse confortable pour la lecture */
  font-weight: 650;
  margin: 0 0 var(--s-md);
  position: relative;
  quotes: "«" "»";
  text-shadow: 0 1px 0 rgba(250, 245, 232, 0.5);
}

.ode-citation p::before {
  content: open-quote;
  font-size: 2.6em;
  /* Brun doré plus saturé, vraiment visible */
  color: #8a6a3e;
  opacity: 1;
  line-height: 0.1;
  vertical-align: -0.4em;
  margin-right: 0.1em;
  font-weight: 700;
}

.ode-citation p::after {
  content: close-quote;
  font-size: 2.6em;
  color: #8a6a3e;
  opacity: 1;
  line-height: 0.1;
  vertical-align: -0.4em;
  margin-left: 0.1em;
  font-weight: 700;
}

.ode-citation cite {
  display: block;
  font-family: var(--f-typewriter);
  font-size: 0.9rem;
  font-style: normal;
  letter-spacing: 0.18em;
  color: var(--c-taupe);
  margin-top: var(--s-md);
  text-transform: uppercase;
}

/* ========== LA CITATION QUI S'ÉCRIT ==========
   Posé le 16/08/2026. Cette variante s'ajoute à `.ode-citation` sans la
   remplacer : la citation de George Sand garde son italique de magazine,
   celle-ci passe à la machine à écrire — c'est quelqu'un qui écrit, pas une
   phrase d'auteur déjà imprimée. La police est `--f-typewriter`, déclarée
   une seule fois en tête du fichier et déjà utilisée par les signatures.
   La frappe elle-même est posée par `main.js`, qui ne réécrit le texte que
   lorsque le bloc entre dans l'écran. */
.ode-citation--frappe p {
  font-family: var(--f-typewriter);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.9vw, 1.45rem);
  line-height: 1.75;
}

/* Le trait qui suit la frappe, comme le chariot d'une machine. Il disparaît
   dès que la phrase est finie : `main.js` retire alors la classe. */
.ode-citation--frappe.est-en-train-d-ecrire p::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1.05em;
  margin-left: 0.06em;
  background: #3d2418;
  vertical-align: -0.18em;
  animation: curseurFrappe 0.9s steps(2, start) infinite;
}

@keyframes curseurFrappe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* BLOC 1 (refondu) — "Une chronique" : extrait à gauche, texte + CTA à droite */
.block-chronique__layout {
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-lg);
  align-items: start;
  text-align: left;
}

.block-chronique__snippet {
  background: var(--c-ivory);
  border: 1px solid rgba(43, 28, 20, 0.15);
  /* Bordure gauche : couleur modifiable via --c-snippet-accent */
  border-left: 3px solid var(--c-snippet-accent);
  padding: var(--s-md) var(--s-md);
  border-radius: 4px;
  font-family: var(--f-serif);
  position: relative;
  box-shadow: 0 4px 14px rgba(43, 28, 20, 0.08);
}

.snippet-tag {
  display: inline-block;
  position: absolute;
  top: -10px;
  left: var(--s-md);
  background: var(--c-rose-deep);
  color: var(--c-ivory);
  font-family: var(--f-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 12px;
}

/* Variante "fragment visuel" — on montre un bout (image) du PDF */
.block-chronique__snippet--image {
  padding: var(--s-md) var(--s-md) var(--s-sm);
}

.snippet-figure {
  margin: 0;
  padding: 0;
}

.snippet-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
  /* léger grain + ombre pour faire "vieux papier" */
  filter: sepia(0.18) contrast(1.04) saturate(0.95);
  box-shadow:
    0 6px 18px rgba(43, 28, 20, 0.18),
    inset 0 0 0 1px rgba(43, 28, 20, 0.08);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.snippet-image:hover {
  transform: scale(1.015);
  filter: sepia(0.12) contrast(1.06) saturate(1);
}

.snippet-caption {
  font-family: var(--f-typewriter);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-taupe);
  text-align: center;
  margin-top: var(--s-xs);
  opacity: 0.85;
}

.block-chronique__text { text-align: left; }
.block-chronique__text .block-title { text-align: left; }
.block-chronique__text .block-text {
  text-align: left;
  max-width: none;
  margin: 0 0 var(--s-sm);
}

/* BLOC 3 — JADIS (portrait + interface rose + tendresse) */
.jadis-card {
  max-width: 960px;
  margin: 0 auto;
  background: var(--c-offwhite);
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(227, 100, 120, 0.18),
    0 2px 8px rgba(43, 28, 20, 0.08),
    inset 0 0 0 1px rgba(43, 28, 20, 0.08);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(227, 100, 120, 0.15);
}

.jadis-card__inner {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--s-lg);
  align-items: center;
  padding: var(--s-lg);
  position: relative;
  z-index: 1;
}

.jadis-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--c-daguerre-3) 0%, var(--c-daguerre-2) 100%);
  /* Bordure du cadre : couleur modifiable via --c-portrait-frame */
  border: 1px solid var(--c-portrait-frame);
  border-radius: 14px;
  padding: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(245, 235, 215, 0.35),
    inset 0 8px 24px rgba(42, 34, 27, 0.35),
    0 4px 12px rgba(43, 28, 20, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.jadis-card__frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(245, 235, 215, 0.4);
  border-radius: 10px;
  pointer-events: none;
  z-index: 4;
}

/* LE TROMBONE — demandé par Iza le 13/08/2026.
   Dessiné en SVG, donc net à toutes les tailles et sans fichier en plus.
   Il mord sur le bord haut du tirage, comme un vrai trombone qui pince. */
.jadis-card__frame::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%) rotate(-1.4deg);
  width: 26px;
  height: 62px;
  z-index: 5;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 96'%3E%3Cg fill='none' stroke='%237d6543' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 14 v58 a9 9 0 0 1 -18 0 v-60 a6 6 0 0 1 12 0 v56 a3 3 0 0 1 -6 0 v-52'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 2px rgba(43, 28, 20, 0.45));
}

/* Fond "papier jauni ancien" du portrait — sépia/ivoire/sable
   ZÉRO trace de vert, conformément à ce qu'Iza veut ("JADIS" = "déjà le jour",
   on est dans une atmosphère de papier jauni, pas de studio photo).
   Aucun mouvement, aucune animation (effet "cabris" corrigé). */
.jadis-mood {
  position: absolute;
  inset: 14px;
  border-radius: 10px;
  background:
    /* Lueur centrale chaude, FIXE (pas d'animation) */
    radial-gradient(ellipse at 50% 45%,
      rgba(255, 244, 214, 0.55) 0%,
      transparent 70%),
    /* Texture papier vieilli — points sépia très diffus */
    radial-gradient(circle at 25% 30%,
      rgba(180, 140, 90, 0.08) 0%,
      transparent 35%),
    radial-gradient(circle at 75% 70%,
      rgba(180, 140, 90, 0.08) 0%,
      transparent 35%),
    /* Dégradé principal : SABLE → SÉPIA CLAIR → SABLE
       (papier jauni ancien, comme demandé) */
    linear-gradient(135deg,
      #f0dfb4 0%,
      #e6cf95 50%,
      #d9bc7c 100%);
  z-index: 0;
  /* Vignettage sépia doux (jamais de vert !) */
  box-shadow: inset 0 0 45px rgba(160, 110, 60, 0.18);
}

.mood-label {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Texte foncé sur fond crème clair */
  color: rgba(75, 50, 28, 0.85);
  background: rgba(255, 248, 230, 0.78);
  padding: 3px 10px;
  border-radius: 12px;
  z-index: 5;
  white-space: nowrap;
  border: 1px solid rgba(110, 79, 41, 0.3);
}

/* ============================================
   PORTRAIT JADIS — Clignement "regard doux"
   ============================================
   Même méthode que la modale d'accueil de l'application
   (public/modales/modale_accueil.html) :

   - 2 PNG superposés (yeux ouverts / yeux fermés)
   - Apparition douce : opacity 0 -> 1 en 4s
   - Clignement : blink.js inverse l'opacité des deux images
     (transition 0.8s ease — pas de keyframes,
     pas de scaleY, pas de transform, pas de flip)
   - Filtre d'Iza appliqué TEL QUEL sur l'image :
     img { filter: blur(1px) brightness(153%) contrast(122%) saturate(70%) sepia(37%) hue-rotate(345deg); }
   - Fond du cadre (.jadis-mood) = papier jauni ancien
     (sépia/crème/sable), AUCUNE trace de vert.
   - Le PNG a un fond blanc — pas de chromakey à neutraliser.
   ============================================ */

/* Apparition douce du portrait (4s, comme la référence) */
/* LE TIRAGE PHOTO — refait le 13/08/2026 sur les retours d'Iza.
   Trois défauts corrigés d'un coup :
   - le portrait était collé en haut (top: 3%) et laissait un grand vide
     sous lui : il est maintenant centré et occupe 74 % du cadre ;
   - le fond du cadre est le papier jauni, et non plus du blanc, pour
     que le tirage ne se détache pas comme une photo d'identité ;
   - il manquait une bordure de tirage : marge crème, plus large en bas
     comme un vieux tirage argentique, légère inclinaison et ombre portée. */
.jadis-face-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-1.4deg);
  width: 74%;
  max-width: none;
  aspect-ratio: 3 / 4;
  height: auto;
  z-index: 2;
  opacity: 0;
  transition: opacity 4s ease-in-out;
  /* Papier jauni : c'est sur lui que l'image se fond. */
  background: linear-gradient(135deg, #efdfb6 0%, #e6cf95 55%, #dcc086 100%);
  /* Marge du tirage — plus épaisse en bas, comme une photo d'époque. */
  border: 7px solid #f7efd8;
  border-bottom-width: 20px;
  border-radius: 2px;
  box-shadow:
    0 2px 4px rgba(43, 28, 20, 0.25),
    0 10px 26px rgba(43, 28, 20, 0.45);
  overflow: hidden;
}

/* LE VIEILLISSEMENT — 13/08/2026, deuxième correction.
   `mix-blend-mode: multiply` a été RETIRÉ. Il fondait bien le blanc du
   PNG dans le papier, mais il recouvrait le fond en parallaxe de la
   page — signalé deux fois par Iza. Un mode de fusion se compose avec
   ce qu'il y a derrière, et derrière il y a un fond fixe : le résultat
   n'est pas maîtrisable ici. **Ne pas le remettre.**
   Le vieillissement repose donc sur les portraits dont le sépia est
   incrusté dans l'image (`_sepia`), plus un léger ajustement CSS.
   Pour régler le rendu, une seule ligne à toucher : celle de `filter`. */
.jadis-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  border-radius: 2px;
  /* Le fondu doit rester plus court que la fermeture des yeux (140 ms),
     sinon les deux images se croisent sans finir de se croiser : le
     visage se dédouble et semble avancer d'un coup de tête.
     C'était la cause du mouvement de cabri signalé par Iza. */
  /* 160 ms : assez long pour que le croisement des deux paupières se
     voie — c'est lui qui tient lieu d'image à demi close — et assez
     court pour rester sous la durée de fermeture (380 ms, blink.js). */
  transition: opacity 160ms ease-in-out;
  filter: sepia(28%) contrast(106%) brightness(101%) saturate(88%) hue-rotate(350deg);
}

/* YEUX OUVERTS — toujours visible (opacity 1) */
#open {
  opacity: 1;
  z-index: 1;
}

/* YEUX FERMÉS — caché par défaut, AU-DESSUS de l'image ouverte */
#closed {
  opacity: 0;
  z-index: 2;
}

/* Le clignement se joue uniquement sur l'opacité des deux images :
   blink.js passe #open à 0 et #closed à 1, puis inverse 220 ms plus
   tard. La transition opacity 0.8s ease (déclarée sur .jadis-face)
   adoucit les deux passages. Aucune transformation, aucun keyframe :
   c'est la méthode de la modale d'accueil de l'application. */

.jadis-ornament {
  position: absolute;
  font-family: var(--f-serif);
  font-size: 1.6rem;
  color: rgba(245, 235, 215, 0.7);
  opacity: 0.7;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(42, 34, 27, 0.6);
}
.jadis-ornament--top { top: 18px; left: 50%; transform: translateX(-50%); }
.jadis-ornament--bottom { bottom: 18px; left: 50%; transform: translateX(-50%); }

.jadis-card__text {
  text-align: left;
  padding: var(--s-sm) 0;
}

.jadis-card__text .block-title {
  text-align: left;
  margin-bottom: var(--s-xs);
  color: var(--c-rose-deep);
}

/* ========== LE SABLIER, À DROITE DU TITRE ==========
   Posé le 16/08/2026. Les couleurs viennent de la charte — cuivre adouci
   pour le sablier, taupe pour le mot, la typo machine à écrire des mentions.
   Aucune bibliothèque d'animation : la goutte tombe en CSS. */
.hero-titre-ligne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}


.hero-titre-ligne .hero-title {
  margin-bottom: 0;
}

/* Le sablier et sa phrase d'attente. La légende « Bientôt » avait été retirée
   le 16/08/2026, un sablier se comprenant seul. Remise le 18/08/2026 : des
   visiteurs n'avaient pas saisi que la page attendait une ouverture. La phrase
   change chaque jour, elle est posée par main.js. */
.hero-bientot {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* La phrase se pose sur un fond clair opaque, comme un bout de correcteur
   blanc sur le papier : sans lui, le texte se noie dans le beige. */
.hero-bientot__mot {
  display: table;
  margin: 6px auto 0;
  font-family: var(--f-typewriter);
  font-size: 0.78rem;
  color: var(--c-ink);
  background: var(--c-offwhite);
  padding: 4px 10px;
  border-radius: 2px;
  text-align: center;
  line-height: 1.35;
}

/* L'encre du journal, la même que le corps de texte. Le cuivre adouci se
   noyait dans le beige du papier, et le rose de la charte détonnait sur une
   page qui imite l'imprimé ancien. */
.sablier {
  color: var(--c-ink);
  flex: none;
}

/* Les trois paliers d'attente. La classe est posée par main.js selon le
   nombre de semaines écoulées ; sans elle, le sablier garde son encre.
   Contrastes mesurés sur le fond #f5ecd5 : 6,03 et 5,08. */
.sablier--palier-2 { color: var(--c-copper); }
.sablier--palier-3 { color: var(--c-vert-sourd); }

/* Le cycle complet dure six secondes : le sable coule pendant les quatre
   premières, puis le sablier se retourne. Un tour entier plutôt qu'un
   demi-tour — un demi-tour obligerait le dessin à revenir d'un coup à sa
   position de départ à chaque reprise, et ce saut se voit. */
.sablier__corps {
  transform-origin: 12px 12px;
  animation: sablierQuiTourne 6s ease-in-out infinite;
}

/* L'ampoule haute se vide : le triangle s'écrase vers sa pointe. */
.sablier__sable-haut {
  transform-origin: 12px 4.2px;
  animation: sableQuiSeVide 6s ease-in-out infinite;
}

/* L'ampoule basse se remplit : le triangle grandit depuis le fond. */
.sablier__sable-bas {
  transform-origin: 12px 19.8px;
  animation: sableQuiSempile 6s ease-in-out infinite;
}

/* Le filet ne coule que pendant la chute, et disparaît au retournement. */
.sablier__filet {
  animation: filetQuiCoule 6s ease-in-out infinite;
}

@keyframes sablierQuiTourne {
  0%, 68%   { transform: rotate(0deg); }
  86%, 100% { transform: rotate(360deg); }
}

@keyframes sableQuiSeVide {
  0%        { transform: scaleY(1); }
  66%       { transform: scaleY(0.04); }
  80%       { transform: scaleY(0.04); }
  92%, 100% { transform: scaleY(1); }
}

@keyframes sableQuiSempile {
  0%        { transform: scaleY(0.04); }
  66%       { transform: scaleY(1); }
  80%       { transform: scaleY(1); }
  92%, 100% { transform: scaleY(0.04); }
}

@keyframes filetQuiCoule {
  0%, 66%   { opacity: 0.85; }
  70%, 100% { opacity: 0; }
}

/* ========== LA BARRE DE PARTAGE ==========
   Posée le 16/08/2026, aux trois emplacements choisis par Iza : sous les
   boutons de l'en-tête, sur le bloc « Ce que c'est », et dans le pied de
   page. Un seul dessin, décrit ici une seule fois. */
.partage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  list-style: none;
  margin: var(--s-md) 0 0;
  padding: 0;
}

.partage__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0;

  color: var(--c-taupe);
  background: none;
  border: 1px solid rgba(107, 83, 64, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.partage__lien:hover {
  color: var(--c-copper);
  border-color: var(--c-copper-soft);
  background: rgba(184, 113, 57, 0.09);
}

.partage__lien:focus-visible {
  outline: 2px solid var(--c-copper);
  outline-offset: 2px;
}

/* Le mot qui confirme la copie, à côté du bouton. Il n'existe que le temps
   d'être lu — `main.js` le retire ensuite. */
.partage__confirmation {
  font-family: var(--f-typewriter);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-copper);
  align-self: center;
}


/* Le réglage système « réduire les animations » fige le sablier : il reste
   dessiné, à demi coulé, et cesse simplement de bouger. */
@media (prefers-reduced-motion: reduce) {
  .sablier__corps,
  .sablier__sable-haut,
  .sablier__sable-bas,
  .sablier__filet {
    animation: none;
  }
  .sablier__sable-haut { transform: scaleY(0.5); }
  .sablier__sable-bas  { transform: scaleY(0.5); }
}

.block-subtitle-origine {
  font-family: var(--f-serif);
  font-size: 0.95rem;
  color: var(--c-taupe);
  margin: 0 0 var(--s-sm);
  letter-spacing: 0.05em;
}
.block-subtitle-origine strong {
  font-family: var(--f-typewriter);
  color: var(--c-ink);
  letter-spacing: 0.08em;
}

.jadis-card__text .block-text {
  text-align: left;
  margin: 0 0 var(--s-sm);
  max-width: none;
}

.block-subtext {
  font-family: var(--f-serif);
  font-size: 0.98rem;
  color: var(--c-taupe);
  margin: var(--s-sm) 0 0;
  font-style: italic;
  border-top: 1px solid rgba(227, 100, 120, 0.25);
  padding-top: var(--s-sm);
}

@media (max-width: 700px) {
  .jadis-card__inner {
    grid-template-columns: 1fr;
    gap: var(--s-md);
    padding: var(--s-md);
  }
  .jadis-card__frame { max-width: 280px; margin: 0 auto; }
  .jadis-card__text { text-align: center; }
  .jadis-card__text .block-title,
  .jadis-card__text .block-text { text-align: center; }
}

/* BLOC 4 — 3 mots-clés — cartes éditoriales (plus de liste pauvre) */
.keywords {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-md);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.keyword-card {
  position: relative;
  background: #fdf8e7;
  border: 1.5px solid #b89968;
  outline: 1px solid rgba(110, 79, 41, 0.25);
  outline-offset: 4px;
  border-radius: 2px;
  padding: var(--s-md) var(--s-sm) var(--s-sm);
  text-align: left;
  box-shadow:
    0 4px 12px rgba(43, 28, 20, 0.12),
    inset 0 0 0 1px rgba(184, 153, 104, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.keyword-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(43, 28, 20, 0.18),
    inset 0 0 0 1px rgba(184, 153, 104, 0.25);
}

.keyword-card__num {
  display: block;
  font-family: var(--f-display);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: #8a6a3e;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.keyword-card__title {
  font-family: var(--f-typewriter);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 0.6rem;
  letter-spacing: 0.02em;
  /* filet sous le titre, comme un sous-titre magazine */
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(184, 153, 104, 0.4);
}

.keyword-card__desc {
  font-family: var(--f-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a2412;
  margin: 0;
  font-style: italic;
}

@media (max-width: 700px) {
  .keywords {
    grid-template-columns: 1fr;
    gap: var(--s-sm);
  }
}

/* Bouton "Découvrir comment" dans la section block-what
   Plus contrasté et plus grand pour qu'il soit bien visible */
.block-what .cta-block {
  margin-top: var(--s-lg);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 28px;
  border: 2px solid var(--c-ink);
  background: var(--c-ivory);
  color: var(--c-ink);
  box-shadow: 0 2px 0 var(--c-ink);
}
.block-what .cta-block:hover {
  background: var(--c-ink);
  color: var(--c-ivory);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--c-ink);
}

/* BLOC 6 — Formulaire */
.beta-form {
  max-width: 420px;
  margin: var(--s-md) auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  text-align: left;
}
/* Les règles de la maquette du formulaire — `.form-label`, `.form-input`,
   `.cta-form`, `.form-confirmation` — ont été retirées le 15/08/2026.
   Le formulaire de démonstration a été remplacé par le formulaire Tally le
   13/08/2026 : elles ne s'appliquaient plus à rien. */

/* Mentions RGPD */
.rgpd-mentions {
  margin: var(--s-lg) auto 0;
  padding: var(--s-sm) var(--s-md);
  background: rgba(43, 28, 20, 0.05);
  border-left: 2px solid var(--c-rose-deep);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--c-taupe);
  text-align: left;
  max-width: 46ch;
}
.rgpd-mentions p { margin: 0 0 10px; }
.rgpd-mentions p:last-child { margin-bottom: 0; }
.rgpd-mentions strong { color: var(--c-ink); }
.rgpd-mentions a { color: var(--c-rose-deep); text-decoration: underline; }
.rgpd-mentions a:hover { color: var(--c-ink); }
.rgpd-liens { font-size: 0.8rem; letter-spacing: 0.04em; }

/* ENCADRE "DEAL" BÊTA — conditions claires de la phase 1
   ---------------------------------------------- */
.block-subtitle {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 3.6vw, 1.8rem);
  font-weight: 400;
  color: var(--c-ink);
  margin: var(--s-md) 0 var(--s-sm);
  text-align: center;
}
.beta-deal {
  max-width: 720px;
  margin: 0 auto var(--s-lg);
  padding: var(--s-md) var(--s-md);
  background: var(--c-ivory);
  border: 1.5px solid rgba(184, 153, 104, 0.6);
  outline: 1px solid rgba(110, 79, 41, 0.2);
  outline-offset: 4px;
  border-radius: 4px;
  text-align: left;
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink);
  box-shadow:
    0 2px 8px rgba(43, 28, 20, 0.08),
    inset 0 0 0 1px rgba(184, 153, 104, 0.15);
}
/* L'annonce d'attente, en tête de l'encadré. Un filet à gauche et un fond
   à peine teinté la détachent des conditions qui suivent, sans en faire
   un second encadré dans le premier. */
.beta-deal__attente {
  margin: 0 0 var(--s-sm);
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--c-copper);
  background: rgba(184, 153, 104, 0.12);
  border-radius: 2px;
  font-size: 0.95rem;
  color: var(--c-ink);
}

.beta-deal__intro {
  margin: 0 0 var(--s-sm);
  font-size: 1.02rem;
  font-weight: 500;
  text-align: center;
  color: var(--c-ink);
}
.beta-deal__list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
}
.beta-deal__list li {
  position: relative;
  margin: 0 0 var(--s-sm);
  padding-left: 0.4rem;
}
.beta-deal__list li::before {
  content: "❦";
  position: absolute;
  left: -1.1rem;
  top: 0.05em;
  color: var(--c-rose-deep);
  font-size: 0.9em;
}
.beta-deal__list li:last-child { margin-bottom: 0; }
.beta-deal strong { color: var(--c-ink); }
.beta-deal em { color: #8b3a2e; font-style: italic; font-weight: 500; }

/* FOOTER
   ---------------------------------------------- */
.site-footer {
  margin-top: 0;
  padding: var(--s-lg) var(--s-md);
  background: var(--c-paper-deep);
  border-top: 1px solid rgba(43, 28, 20, 0.18);
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-taupe);
}
.site-footer p { margin: 0 0 var(--s-xs); }
.site-footer a { color: var(--c-taupe); }
.site-footer a:hover { color: var(--c-ink); }
.footer-mention { font-size: 0.78rem; opacity: 0.8; margin-top: var(--s-sm); }

/* ==============================================
   PAGE 2 — CHRONIQUE
   ============================================== */
/* Papier vintage sépia, propre à cette page : elle n'a jamais porté le fond
   de journal des autres pages, c'est voulu depuis la livraison du 10/08/2026.

   UNE SEULE CHOSE A CHANGÉ LE 14/08/2026 : `background-attachment: fixed` a
   été retiré. Un fond collé à l'écran ne se peint que sur une hauteur d'écran,
   parce que ces dégradés sont déclarés sans répétition. Partout ailleurs sur
   la page, c'est la couleur pleine `#f2e7c7` qui apparaissait seule — les
   bandes beiges plates en haut et en bas de l'écran.
   Sans cette ligne, les dégradés se peignent sur toute la hauteur du texte. */
.page-chronique {
  background-color: #f2e7c7;
  background-image:
    /* Vignettage subtil sur les bords (papier vieilli) */
    radial-gradient(ellipse at center,
      rgba(254, 250, 235, 0.6) 0%,
      rgba(242, 231, 199, 0.0) 60%,
      rgba(139, 121, 94, 0.18) 100%),
    /* Grain léger — petits points sépia très diffus */
    radial-gradient(circle at 20% 30%,
      rgba(160, 82, 45, 0.04) 0%,
      transparent 40%),
    radial-gradient(circle at 80% 70%,
      rgba(160, 82, 45, 0.04) 0%,
      transparent 40%),
    /* Dégradé principal sépia -> ivoire -> sépia */
    linear-gradient(135deg,
      #ead9b6 0%,
      #f5ebd0 35%,
      #faf3df 50%,
      #f5ebd0 65%,
      #ead9b6 100%);
  color: var(--c-ink);
}

.page-header {
  padding: var(--s-md);
  max-width: 760px;
  margin: 0 auto;
}
.back-link {
  font-family: var(--f-typewriter);
  font-size: 0.9rem;
  color: var(--c-taupe);
}

.chronique-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-md) var(--s-md) var(--s-xl);
}

.exergue {
  text-align: center;
  margin: var(--s-lg) 0 var(--s-xl);
  padding: 0 var(--s-md);
}
.exergue blockquote {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 3.4vw, 1.55rem);
  line-height: 1.55;
  margin: 0;
  color: #3a2416;
  font-style: italic;
}
.exergue cite {
  display: block;
  margin-top: var(--s-sm);
  font-size: 0.85rem;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--c-taupe);
}

.example-tag {
  display: inline-block;
  font-family: var(--f-typewriter);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-taupe);
  background: rgba(227, 100, 120, 0.08);
  border: 1px dashed rgba(227, 100, 120, 0.4);
  padding: 4px 14px;
  border-radius: 14px;
  margin-bottom: var(--s-md);
}

.chronique-paper {
  background: var(--c-ivory);
  padding: var(--s-lg) var(--s-md);
  border-radius: 8px;
  /* Ombre papier — plus marquée pour que le papier se détache
     nettement du fond sépia de la page (manquait avant). */
  box-shadow:
    0 2px 4px rgba(43, 28, 20, 0.06),
    0 8px 24px rgba(43, 28, 20, 0.18),
    0 24px 60px rgba(43, 28, 20, 0.14),
    0 0 0 1px rgba(43, 28, 20, 0.08);
  position: relative;
}

.chronique-title {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 400;
  margin: 0 0 var(--s-xs);
  color: var(--c-ink);
  text-align: center;
}

.chronique-meta {
  font-size: 0.85rem;
  color: var(--c-taupe);
  text-align: center;
  margin: 0 0 var(--s-lg);
  font-style: italic;
}

.chronique-body p {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--c-ink);
  margin: 0 0 var(--s-md);
}
.chronique-body p:last-child { margin-bottom: 0; }
.chronique-body em {
  /* Bordeaux profond pour rester cohérent avec les autres <em> du site */
  color: #8b3a2e;
  font-style: italic;
  font-weight: 500;
}

.chronique-signature {
  font-family: var(--f-typewriter);
  font-size: 0.9rem;
  color: var(--c-taupe);
  text-align: right;
  margin: var(--s-lg) 0 0;
  font-style: italic;
}

.chronique-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
  padding: 0 var(--s-md);
}
.cta-secondary {
  font-family: var(--f-typewriter);
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 22px;
  background: rgba(var(--c-ivory-rgb), 0.7);
  color: var(--c-ink);
  border: 1px solid rgba(43, 28, 20, 0.2);
  transition: background 0.2s ease;
}
.cta-secondary:hover { background: var(--c-ivory); }
.cta-secondary--accent {
  background: var(--c-ink);
  color: var(--c-ivory);
  border-color: var(--c-ink);
}
.cta-secondary--accent:hover { background: #4d3120; color: var(--c-ivory); }

/* RESPONSIVE — Mobile
   ---------------------------------------------- */
@media (max-width: 700px) {
  .hero { padding: var(--s-md) var(--s-sm) var(--s-lg); }
  .video-wrapper { border-radius: 8px; }
  .video-controls { padding: 6px 10px; gap: 8px; }
  .video-control-btn, .sound-toggle { font-size: 0.78rem; padding: 6px 12px; }
  .hero-chronique-buttons { gap: 6px; }
  .btn-mini { font-size: 0.82rem; padding: 10px 16px; }
  .keywords { gap: var(--s-sm); }
  .chronique-paper { padding: var(--s-md) var(--s-sm); }
  .chronique-nav { flex-direction: column; align-items: stretch; }
  .chronique-nav a { text-align: center; }
  .section { padding: var(--s-xl) var(--s-sm); }
  .section::before { font-size: 1.1rem; }
  .block-chronique__layout {
    grid-template-columns: 1fr;
    gap: var(--s-md);
  }
  .block-chronique__text { text-align: center; }
  .block-chronique__text .block-title,
  .block-chronique__text .block-text { text-align: left; }
}

/* ACCESSIBILITÉ — prefers-reduced-motion
   ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jadis-face-container { opacity: 1; transition: none; }
  .jadis-face { transition: none; animation: none !important; }
  .jadis-mood { animation: none; }
  .btn-mini { transition: none; }
  .jadis-video { display: none; }
  .video-wrapper { background-image: url('../imgs/poster.jpg'); background-size: cover; background-position: center; }
  .sound-toggle { display: none; }
}

/* ============================================
   ZONES TACTILES — ajouté le 13/08/2026
   ============================================
   Mesuré à 375 px de large : les liens de navigation faisaient entre
   16 et 27 px de haut. En dessous de 44 px, le doigt rate la cible.
   `.cta-secondary` avait bien un rembourrage, mais un lien reste en
   ligne par défaut : le rembourrage vertical n'agrandit pas sa boîte.
   D'où le `display: inline-flex`.
   Les liens à l'intérieur d'un paragraphe ne sont pas concernés : ils
   se lisent dans le texte et s'agrandiraient au détriment de la ligne. */
.back-link,
.cta-secondary,
.retour a,
.rgpd-liens a,
.site-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

.cta-secondary {
  padding-top: 0;
  padding-bottom: 0;
}

/* Complément zones tactiles — mesuré page par page le 13/08/2026.
   Ces trois-là passaient juste en dessous des 44 px. */
.btn-mini,
.btn-back-mood,
.video-control-btn,
.sound-toggle {
  min-height: 44px;
}

/* ==============================================
   CHRONIQUE — LE REPLI PROGRESSIF
   ============================================== */

/* Posé le 13/08/2026. Mesuré à 375 px de large : le texte faisait 37 lignes
   et 1159 px de haut, soit près de trois écrans de téléphone. Un mur de
   texte se juge avant d'être lu.

   On montre quatorze lignes, le bas s'efface, un bouton déplie le reste. Le
   repli est posé par `chronique.js`, jamais par cette feuille seule : sans
   JavaScript, le texte reste entier et lisible.

   L'effacement est fait par un masque, et non par un voile de couleur posé
   par-dessus. Un voile suppose un fond uni derrière lui — c'est la limite que
   posent les deux références du procédé, CSS-Tricks et Polypane. Ici le fond
   n'est pas uni, c'est le papier journal : d'où la bande beige plate visible
   jusqu'au 14/08/2026.
   Le masque efface les lettres elles-mêmes en transparence. Il ne pose aucune
   couleur, ne dépend d'aucun fond, et ne peut donc plus produire de bande.

   L'autre technique répandue, `background-clip: text`, est écartée : elle
   remplace la couleur de tout ce qu'elle traverse. La chronique d'exemple
   n'a aucun passage en italique au 14/08/2026, mais la feuille prévoit un
   bordeaux pour eux (`.chronique-body em`) : la première chronique qui en
   contiendrait les verrait perdre leur couleur.

   Préfixe `-webkit-` conservé pour les anciennes versions de Safari et Edge. */
.chronique-body.est-repliee {
  position: relative;
  max-height: 26em;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* Le bouton « Lire la suite », déclaré ici une seule fois. Avant le
   14/08/2026 il l'était deux fois, le bloc de fin de fichier annulant
   l'affichage du premier.
   `width: fit-content` avec `margin: … auto` le centre sous le texte. */
.btn-lire-suite {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 44px;
  margin: var(--s-md) auto 0;
  padding: 0 24px;

  font-family: var(--f-typewriter);
  font-size: 0.9rem;
  color: var(--c-ink);

  background: rgba(var(--c-ivory-rgb), 0.7);
  border: 1px solid rgba(43, 28, 20, 0.25);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.btn-lire-suite:hover  { background: var(--c-paper); }
.btn-lire-suite:active { transform: translateY(1px); }

/* La flèche suit l'état du bouton, que `chronique.js` tient à jour
   dans `aria-expanded`. */
.btn-lire-suite::after { content: "↓"; font-size: 0.95rem; }
.btn-lire-suite[aria-expanded="true"]::after { content: "↑"; }

/* ==============================================
   PAGES LÉGALES — conditions d'utilisation et éthique
   ============================================== */

/* Ces deux pages portaient leurs styles à l'intérieur du fichier et ne
   chargeaient aucune feuille. Deux conséquences : toute règle globale devait
   y être recopiée à la main, et la politique de sécurité du contenu était
   obligée d'autoriser les styles internes sur tout le site.
   Ramenées ici le 15/08/2026.

   Tout est cadré sous `.page-legale` : sans ce cadre, le fond de journal et
   les liens roses de la feuille commune s'imposeraient à ces deux pages. */
.page-legale {
  margin: 0;
  padding: 0;
  font-family: serif;
  background-image: none;
}

.page-legale .cgu-container,
.page-legale .ethique-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}

.page-legale h1 { font-size: 32px; margin-bottom: 8px; }
.page-legale h2 { font-size: 20px; margin-bottom: 12px; }
.page-legale h3 { font-size: 16px; margin-top: 16px; }

.page-legale .subtitle { font-size: 16px; letter-spacing: 0.05em; }
.page-legale section  { margin-bottom: 32px; }
.page-legale p,
.page-legale li       { font-size: 15px; line-height: 1.6; }
.page-legale ul       { padding-left: 20px; }

/* Dans un texte juridique, un lien doit se voir sans hésitation : souligné,
   et non pas rose sans soulignement comme sur le reste du site. */
.page-legale a {
  color: #8B4513;
  text-decoration: underline;
}

/* --- Conditions d'utilisation --- */
.page-cgu {
  color: #1f1f1f;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(220, 225, 235, 0.35), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f3f4f7 45%, #eceff3 100%),
    repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.012) 0px,
      rgba(0, 0, 0, 0.012) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 7px);
}

.page-cgu header { margin-bottom: 48px; }
.page-cgu .meta  { font-size: 13px; margin-top: 8px; }

.page-cgu .important {
  margin: 16px 0;
  padding: 16px;
  background-color: rgba(139, 69, 19, 0.05);
  border-left: 4px solid #8B4513;
}

/* --- Éthique --- */
/* Fond papier posé le 29/07/2026, repris de la fenêtre d'accueil :
   #f9f6ee au centre, #e6dcc4 sur les bords. Aucune texture hachurée. */
.page-ethique {
  color: #2b1c14;
  background: radial-gradient(ellipse at 50% 30%, #f9f6ee 0%, #f3eee0 55%, #e6dcc4 100%);
  background-attachment: fixed;
}

.page-ethique header { margin-bottom: 40px; }
.page-ethique h1,
.page-ethique h2 { font-family: 'Prata', serif; }
.page-ethique li { margin-bottom: 8px; }

/* L'exergue ouvre la page avant toute règle. Écriture à la plume : le tracé
   se révèle de gauche à droite au chargement, comme une main qui écrit.
   Posé le 29/07/2026 ; le cadre coloré a été retiré, la citation repose
   directement sur le papier. */
.page-ethique .exergue { margin: 48px 0 56px; padding: 0 8px; }

.page-ethique .exergue blockquote {
  margin: 0;
  font-family: 'Petit Formal Script', 'Segoe Script', cursive;
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.55;
  color: #3a2416;
  /* Encre légèrement plus dense que le texte courant, comme une plume chargée. */
  text-shadow: 0 1px 0 rgba(58, 36, 22, 0.12);
  animation: trace-plume 2.8s cubic-bezier(0.33, 0, 0.15, 1) both;
}

.page-ethique .exergue cite {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: #6b5340;
  animation: venir-doucement 1s ease-out 2.4s both;
}

@keyframes trace-plume {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes venir-doucement {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Qui a demandé moins d'animation voit tout s'afficher d'emblée. */
@media (prefers-reduced-motion: reduce) {
  .page-ethique .exergue blockquote,
  .page-ethique .exergue cite {
    animation: none;
    clip-path: none;
    opacity: 1;
  }
}

.page-ethique .retour {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 15px;
}

/* Les 44 px de hauteur sont la cible tactile minimale sur téléphone. */
.page-ethique .retour a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
}

.page-ethique .retour a:focus-visible {
  outline: 2px solid #8B4513;
  outline-offset: 3px;
}

/* Description écrite de la vidéo, pour qui coupe le son, charge mal la
   vidéo, ou navigue à l'oreille. Les 46 caractères de large sont la
   longueur de ligne confortable à la lecture. */
.video-description {
  max-width: 46ch;
  margin: 10px auto 0;

  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  opacity: 0.75;
}

/* ==============================================
   SECTION DES HUMEURS — les six icônes
   ============================================== */

/* Ces règles remplacent quatorze attributs de style écrits en ligne dans
   index.html, retirés le 14/08/2026. Les six boutons d'humeur portaient
   six fois le même bloc, recopié à l'identique : une seule règle les tient
   désormais tous. */
.reaction { text-align: center; }

.reaction__titre  { margin: 0 0 8px; font-size: 1.35rem; }
.reaction__invite { margin: 0 0 24px; font-size: 0.95rem; opacity: 0.8; }

.reaction__choix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  max-width: 520px;
  margin: 0 auto;
}

/* Les 44 px de hauteur sont la cible tactile minimale : en dessous, le doigt
   rate le bouton sur téléphone. Mesuré le 13/08/2026. */
.reaction-humeur {
  min-height: 44px;
  padding: 10px 14px;

  font-size: 1.7rem;
  line-height: 1;
  background: #f5ecd5;
  border: 1px solid rgba(139, 58, 46, 0.25);
  border-radius: 12px;
  cursor: pointer;
}

/* `feedback-beta.js` pose cette classe au clic, pour marquer l'humeur choisie. */
.reaction-humeur.est-choisie {
  border-color: var(--c-rose-deep);
  background: var(--c-tendresse-1);
}

/* Hauteur réservée d'avance : sans elle, l'apparition du remerciement
   ferait sauter la page sous les yeux de la personne. */
.reaction__accuse {
  min-height: 1.4em;
  margin: 14px 0 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

.reaction__pied { margin: 18px 0 0; }

.reaction__ouvrir {
  display: inline-block;
  min-height: 44px;
  padding: 12px 18px;

  background: none;
  border: none;
  color: #8b3a2e;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
}

/* ==============================================
   FENÊTRE DE RETOUR BÊTA
   ============================================== */

/* Ces règles remplacent douze attributs de style écrits en ligne dans
   index.html, retirés le 14/08/2026. Une couleur ou un espacement se change
   désormais ici, à un seul endroit — et une politique de sécurité du contenu
   pourra interdire les styles en ligne, ce qui était impossible avant. */
.beta-modal {
  display: none;              /* feedback-beta.js passe à `flex` à l'ouverture */
  position: fixed;
  inset: 0;
  z-index: 9999;

  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(30, 20, 18, 0.6);
}

.beta-modal__carte {
  width: 100%;
  max-width: 420px;
  padding: 24px;

  background: #f5ecd5;
  color: #3a2b26;
  border-radius: 14px;
  text-align: center;
  font-family: inherit;
}

.beta-modal__titre { margin: 0 0 16px; font-size: 1.2rem; }

/* La couleur du texte saisi est déclarée le 16/08/2026, après le test d'Iza
   sur téléphone : elle voyait son prénom et son adresse s'écrire en blanc,
   illisibles. Le fond crème était imposé ici, mais aucune couleur de texte ne
   l'était — un téléphone en thème sombre choisissait alors la sienne, du
   blanc, sur ce fond clair. Les deux couleurs vont désormais ensemble. Le
   texte d'exemple reste plus pâle que le texte saisi, sans devenir illisible
   pour autant. */
.beta-modal__champ {
  width: 100%;
  padding: 8px;

  color: #3a2b26;
  background: #fffdf6;
  border: 1px solid rgba(139, 58, 46, 0.35);
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.9rem;
}

.beta-modal__champ::placeholder {
  color: rgba(58, 43, 38, 0.62);
  opacity: 1;
}

.beta-modal__ligne {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.beta-modal__ligne .beta-modal__champ { flex: 1; font-size: 0.85rem; }

/* L'accord de conservation. La case et son texte forment une seule cible :
   cliquer n'importe où sur la phrase coche la case. Alignement en haut,
   pour que la case reste devant la première ligne quand le texte se replie
   sur plusieurs lignes. */
.beta-modal__accord {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin: 14px 0 0;
  text-align: left;
  font-size: 0.75rem;
  opacity: 0.85;
  cursor: pointer;
}

/* La case est agrandie : à sa taille d'origine, elle se rate au doigt. */
.beta-modal__case {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #8b3a2e;
  cursor: pointer;
}

/* Reste vide tant que tout va bien. `role="status"` fait lire le message
   par les lecteurs d'écran au moment où il apparaît. */
.beta-modal__avertissement {
  margin: 8px 0 0;
  text-align: left;
  font-size: 0.75rem;
  color: #8b3a2e;
  font-weight: 600;
}

.beta-modal__actions { margin: 16px 0 0; }

/* Bouton d'envoi. Les 44 px de hauteur sont la cible tactile minimale
   mesurée sur téléphone le 13/08/2026. */
.beta-modal__envoyer {
  min-height: 44px;
  padding: 10px 28px;

  background: #8b3a2e;
  color: #f5ecd5;
  border: 1px solid #8b3a2e;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
}

.beta-modal__fermer {
  min-height: 44px;
  padding: 0 12px;

  background: none;
  border: none;
  color: #8b3a2e;
  opacity: 0.7;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
}