/* Présentation « De l'idée au script » — DA de la page montage (charbon, sauge, League Gothic,
   capitales espacées, angles droits), accent de l'univers écriture : ocre. */
:root {
  --bg: #141414; --surface: #1b1c1b; --paper: #eeebe5; --sage: #bac4b8; --sage-2: #8f988d;
  --line: rgba(186,196,184,.16); --accent: #cc9933;
  --sheet: #f6f4ef; --ink: #1e1e1e; --ink-2: #555a54; --rule: rgba(30,30,30,.14);
  --ease: cubic-bezier(.16,1,.3,1);
  --gutter: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--sage); font: 400 15px/1.55 'Geist', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
main { position: relative; z-index: 1; }

/* Fond dessiné : la page de script qui s'écrit (moteur FinalHook, scène écriture). */
.fh-background { position: fixed; inset: -40vh 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.fh-background canvas { display: block; width: 100%; height: 100%; opacity: .32; }

/* Navigation : identique à la page montage. */
.fh-nav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 32px; background: var(--bg); border-bottom: 1px solid var(--line); }
.fh-nav a { text-decoration: none; }
.fh-logo { display: inline-flex; align-items: baseline; color: var(--paper); text-decoration: none; white-space: nowrap; line-height: 1; }
.fh-logo .lf { font: 500 38px/.9 'Caveat', cursive; color: var(--accent); transform: rotate(-7deg); }
.fh-logo .lh { font: 400 37px/.9 'League Gothic', sans-serif; text-transform: uppercase; margin-left: 2px; }
.fh-nav nav, .fh-account { display: flex; align-items: center; gap: 32px; }
.fh-account { gap: 24px; }
.fh-nav nav a, .fh-account a { font: 500 12.5px/1 'Geist', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.fh-nav nav a { position: relative; padding: 8px 0; }
.fh-nav nav a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.fh-nav nav a:hover::after, .fh-nav nav a.is-current::after { transform: scaleX(1); }
.fh-nav nav a.is-current { color: var(--paper); }
.fh-account .fh-signup { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 1px solid var(--line); color: var(--paper); }
.fh-signup span { margin-left: 12px; color: var(--accent); }
a:focus-visible { outline: 1px solid var(--sage); outline-offset: 3px; }

/* Bouton principal : fond accent, texte charbon, lettres qui roulent. */
.fh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 24px; background: var(--accent); color: var(--bg); font: 500 13px/1 'Geist', sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .15s var(--ease); }
.fh-btn:active { transform: scale(.97); }
.fh-btn .roll { display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2em; }
.fh-btn .roll .rl { display: block; }
.fh-btn .roll .ch { display: inline-block; transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 18ms); }
.fh-btn__arrow { font-size: 16px; transition: transform .6s var(--ease); }
@media (hover: hover) { .fh-btn:hover .roll .ch { transform: translateY(-100%); } .fh-btn:hover .fh-btn__arrow { transform: translate(2px,-2px); } }


/* Mais aussi / Découvre aussi / pied de page */
.more, .outro { position: relative; display: grid; justify-items: center; gap: 48px; padding: 96px 24px; text-align: center; }
.eyebrow { margin: 0 0 -32px; font: 500 12.5px/1 'Geist', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-2); }
.sec-title { margin: 0; font: 400 clamp(56px, 7vw, 100px)/.95 'League Gothic', sans-serif; text-transform: uppercase; color: var(--paper); }
/* Cartes de fin : même matière que les cartes .card--rel de la page montage
   (coins de 10 px, liseré de 1 px, fond translucide), liseré ocre pour l'écriture. */
.feature-cards { display: grid; grid-template-columns: repeat(3, 300px); gap: 2rem; justify-content: center; }
.fcard { display: flex; flex-direction: column; gap: 16px; min-height: 245px; padding: 32px 25px 25px; text-align: left; border-radius: 10px; outline: 1px solid var(--accent); background: rgba(255,255,255,.1); }
.fcard-n { font: 400 10px/1 'Geist', sans-serif; letter-spacing: .16em; color: var(--accent); }
.fcard h3 { margin: 0; font: 400 32px/1.02 'League Gothic', sans-serif; text-transform: uppercase; color: var(--paper); }
.fcard p { margin: 0; font: 400 14px/1.5 'Geist', sans-serif; color: var(--sage); }
.mode-cards { display: grid; grid-template-columns: repeat(2, auto); gap: 2rem; justify-content: center; }
.mcard { --c: #00a8a9; display: grid; grid-template-rows: auto 1fr; width: 30vw; min-width: 150px; max-width: 255px; aspect-ratio: 2 / 3; padding: 5px; border-radius: 10px; outline: 1px solid var(--c); background: rgba(255,255,255,.1); }
.m-podcast { --c: #ae75e6; }
.mcard-img { aspect-ratio: 4 / 3; border-radius: 6px 6px 0 0; background: #000 50% 50% / cover no-repeat; filter: contrast(.8); }
.mcard-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px 16px; text-align: center; text-decoration: none; }
.mode-name { margin: 0; font: 500 20px/1.2 'Geist', sans-serif; letter-spacing: -.025em; color: var(--c); }
.mode-desc { margin: 0; min-height: 3em; font: 400 14px/1.5 'Geist', sans-serif; color: #eeebe5cf; transition: color .2s; }
.mcard-copy:hover .mode-name { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.mcard-copy:hover .mode-desc { color: var(--paper); }
.fh-footer { width: min(1100px, 90vw); margin: 0 auto; padding: 40px 0 48px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.fh-footer p { flex: 1; margin: 0; font-size: 12.5px; color: var(--sage-2); }
.fh-footer nav { display: flex; gap: 16px; font-size: 12.5px; }
.fh-footer a { text-decoration: none; }

@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .fh-nav { padding: 12px 16px; gap: 12px 16px; flex-wrap: wrap; }
  .fh-nav nav { order: 3; width: 100%; justify-content: center; gap: 24px; }
  .fh-account { margin-left: auto; gap: 12px; }
  .fh-account a { font-size: 13px; letter-spacing: 0; text-transform: none; }
  .fh-account .fh-signup { padding: 0 12px; }
  .fh-signup span { display: none; }
  .fh-logo .lf, .fh-logo .lh { font-size: 28px; }
  .feature-cards { grid-template-columns: repeat(2, 300px); }
  .feature-cards > .fcard:last-child { grid-column: 1 / -1; justify-self: center; width: 300px; }
}
@media (max-width: 680px) {
  .feature-cards { grid-template-columns: minmax(0, 320px); }
  .feature-cards > .fcard:last-child { grid-column: auto; width: auto; justify-self: stretch; }
}
@media (max-width: 600px) {
  .mode-cards { gap: 16px; }
  .mcard-copy { padding: 10px 8px; gap: 8px; }
  .mode-name { font-size: 16px; }
  .mode-desc { font-size: 11px; line-height: 1.45; min-height: 4.35em; }
}
@media (prefers-reduced-motion: reduce) { .fh-btn, .fh-btn .roll .ch, .fh-btn__arrow, .rail li::after, .fh-nav nav a::after { transition: none; } }