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

:root {
  /* Palette principale */
  --c-ivory: #f9f6ee;
  --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;

  /* 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(249, 246, 238, 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;
}

.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--bold {
  font-weight: 700;
  border-color: var(--c-rose-deep);
  color: var(--c-rose-deep);
  background: rgba(249, 246, 238, 0.9);
}
.btn-mini--bold:hover {
  background: var(--c-rose-deep);
  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; }
.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;
}

/* 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;
}

.snippet-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0 0 var(--s-sm);
  font-style: italic;
}

.snippet-signature {
  font-family: var(--f-typewriter);
  font-size: 0.8rem;
  color: var(--c-taupe);
  text-align: right;
  margin: 0;
}

/* 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);
}

.block-subtitle-latin {
  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-latin 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;
}
.form-label {
  font-size: 0.88rem;
  color: var(--c-taupe);
  margin-top: var(--s-sm);
}
.form-input {
  font-family: var(--f-body);
  font-size: 1rem;
  padding: 12px 16px;
  border: 1px solid rgba(43, 28, 20, 0.25);
  border-radius: 8px;
  background: var(--c-ivory);
  color: var(--c-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--c-rose-deep);
  box-shadow: 0 0 0 3px rgba(227, 100, 120, 0.18);
}
.cta-form {
  margin-top: var(--s-md);
  font-family: var(--f-typewriter);
  font-size: 1.05rem;
  padding: 14px 28px;
  background: var(--c-ink);
  color: var(--c-ivory);
  border: 1px solid var(--c-ink);
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.1s ease;
}
.cta-form:hover { background: #4d3120; }
.cta-form:active { transform: translateY(1px); }
.cta-form:focus-visible {
  outline: 3px solid var(--c-rose-deep);
  outline-offset: 3px;
}
.form-confirmation {
  margin-top: var(--s-md);
  padding: var(--s-sm);
  background: rgba(245, 157, 191, 0.18);
  border-left: 3px solid var(--c-rose-deep);
  color: var(--c-ink);
  font-size: 0.95rem;
  border-radius: 4px;
}

/* 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);
}
.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
   ============================================== */
/* PAGE 2 — CHRONIQUE
   Fond inspiré de la référence canva-jadis.css d'Iza :
   papier vintage sépia, doux et chaleureux.
   Pas d'image manquante — on utilise un dégradé CSS pur qui imite
   la texture d'un vieux papier jauni (tons sépia + ivoire + beige). */
.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%);
  background-attachment: fixed;
  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(249, 246, 238, 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 — repli progressif, 13/08/2026
   ============================================
   Mesuré à 375 px : 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 : l'œil mesure la hauteur, estime l'effort, et abandonne.
   On montre donc quatorze lignes, le bas se fond dans le papier, et un
   bouton déplie le reste.
   Le repli est posé par le JavaScript, jamais par le CSS seul : sans
   JavaScript, le texte reste entier et lisible. Il est de toute façon
   présent dans la page — les moteurs le lisent en entier. */
.chronique-body.est-repliee {
  max-height: 26em;
  overflow: hidden;
  position: relative;
}

/* Le dégradé se termine sur la couleur exacte du papier (--c-ivory),
   sinon on verrait une arête. */
.chronique-body.est-repliee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8em;
  background: linear-gradient(
    to bottom,
    rgba(249, 246, 238, 0) 0%,
    rgba(249, 246, 238, 0.75) 45%,
    var(--c-ivory) 100%);
  pointer-events: none;
}

.btn-lire-suite {
  display: inline-flex;
  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(249, 246, 238, 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); }
.btn-lire-suite::after {
  content: "↓";
  font-size: 0.95rem;
}
.btn-lire-suite[aria-expanded="true"]::after { content: "↑"; }

/* Le bouton est centré sous le texte. */
.chronique-paper { text-align: initial; }
.btn-lire-suite { display: flex; width: fit-content; }