/* riskr.cartae.app : l'« édition sage » du fanzine cartae.app. Même papier, mêmes encres (marine, vermillon pour Riskr,
   rose, jaune), mêmes typographies (Anton, Archivo, Special Elite, Permanent Marker, Rubik Mono One), ombres franches et
   scotch ; mais pages droites et texte long lisible : c'est une documentation. Polices servies localement (polices.css). */
@import url("/assets/polices.css");
:root {
  --papier: #F4EEE1; --papier2: #E9E0CC; --blanc: #FFFBF2; --creme: #FFF4D6;
  --marine: #1D2B7A; --vermillon: #FF5B2E; --rose: #FF4FA3; --jaune: #FFD53D; --turquoise: #3FC7B3; --ciel: #33B5E5;
  --doux: #4a5382;
  --titre: "Anton", Impact, sans-serif; --texte: "Archivo", system-ui, sans-serif; --machine: "Special Elite", "Courier New", monospace;
  --main: "Permanent Marker", cursive; --tampon: "Rubik Mono One", sans-serif;
  --trame: radial-gradient(circle, rgba(29,43,122,.16) 1.4px, transparent 1.7px) 0 0/8px 8px;
}
* { box-sizing: border-box; }
html { background: var(--papier); color: var(--marine); font: 18px/1.62 var(--texte); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a { color: var(--marine); text-decoration: underline; text-decoration-color: var(--vermillon); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--vermillon); }
:focus-visible { outline: 4px solid var(--rose); outline-offset: 3px; }
.cadre { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.cadre.large { max-width: 1080px; }

/* ---------- en-tête : le bandeau manuscrit du fanzine, puis la marque ---------- */
.surtete { background: var(--marine); color: var(--creme); font-size: 14px; }
.surtete .cadre { max-width: 1080px; display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.surtete a { color: var(--jaune); font-family: var(--main); text-decoration: none; letter-spacing: .02em; }
.surtete span { font-family: var(--machine); opacity: .85; }
.haut { position: sticky; top: 0; z-index: 5; background: var(--papier); border-bottom: 3px solid var(--marine); }
.haut .cadre { max-width: 1080px; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 66px; }
.marque { font-family: var(--texte); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 24px; letter-spacing: -.02em;
  background: var(--vermillon); color: var(--creme); padding: .08em .4em 0; box-shadow: 4px 4px 0 var(--marine); transform: rotate(-2deg); text-decoration: none; }
.marque:hover { color: var(--creme); transform: rotate(0); }
.haut nav { display: flex; gap: 6px; overflow-x: auto; }
.haut nav a { font-family: var(--titre); text-transform: uppercase; font-size: 18px; letter-spacing: .02em; text-decoration: none; padding: 6px 12px 4px; white-space: nowrap; }
.haut nav a[aria-current] { background: var(--marine); color: var(--creme); box-shadow: 3px 3px 0 var(--vermillon); }
.haut nav a.ext::after { content: " ↗"; }

main { padding: 44px 24px 70px; }
h1 { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 6.4vw, 66px); line-height: .95; letter-spacing: 0; margin: .15em 0 .35em; }
h2 { font-family: var(--texte); font-weight: 800; font-size: 27px; line-height: 1.2; letter-spacing: -.01em; margin: 2.2em 0 .6em; }
h2::before { content: ""; display: block; width: 46px; height: 6px; background: var(--vermillon); margin-bottom: 12px; }
h3 { font-family: var(--texte); font-weight: 800; font-size: 20px; margin: 1.8em 0 .4em; }
.chapo { font-size: 21px; line-height: 1.5; margin: 0 0 1.4em; max-width: 44em; }
.fil, .meta { font-family: var(--machine); font-size: 15px; color: var(--doux); margin: 0; }
.fil a { text-decoration: none; }
p, li { max-width: 68ch; }
li { margin: .25em 0; }
strong { font-weight: 800; }
hr { border: 0; border-top: 2px dashed var(--doux); margin: 2.4em 0; opacity: .5; }

/* ---------- images et films « collés » ---------- */
figure { margin: 2em 0; position: relative; }
figure img, .film video { display: block; width: 100%; background: var(--blanc); border: 10px solid var(--blanc); box-shadow: 7px 7px 0 rgba(29,43,122,.85); }
figure:not(.film)::before { content: ""; position: absolute; top: -12px; left: 34px; width: 110px; height: 28px; background: rgba(255,213,61,.72); mix-blend-mode: multiply; transform: rotate(-4deg); z-index: 2;
  clip-path: polygon(0 8%,4% 0,8% 10%,12% 0,16% 8%,84% 0,88% 10%,92% 0,96% 8%,100% 0,100% 92%,96% 100%,92% 90%,88% 100%,84% 92%,16% 100%,12% 90%,8% 100%,4% 92%,0 100%); }
figcaption { font-family: var(--machine); font-size: 15px; color: var(--doux); margin-top: .8em; }
.film { margin: 0 0 1.6em; }
.film video { aspect-ratio: 16 / 9; background: #000; border-color: var(--marine); }

/* ---------- chapitres et « ce que vous allez voir » ---------- */
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 1.2em 0 1.6em; }
@media (max-width: 800px) { .deux { grid-template-columns: 1fr; } }
.deux h2 { margin-top: 0; font-family: var(--tampon); font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.deux h2::before { display: none; }
.chapitres ol { list-style: none; padding: 0; margin: 0; }
.chapitres button { all: unset; cursor: pointer; display: flex; gap: 12px; width: 100%; padding: 6px 10px; font-size: 16px; }
.chapitres button span { font-family: var(--machine); min-width: 3.2em; color: var(--doux); }
.chapitres button:hover { background: var(--creme); }
.chapitres button.actif { background: var(--marine); color: var(--creme); }
.chapitres button.actif span { color: var(--jaune); }

/* ---------- encadrés ---------- */
.au-quotidien, .methode, .piege, .retenir { background: var(--blanc); padding: 20px 24px; margin: 1.8em 0; box-shadow: 6px 6px 0 var(--marine); border: 2px solid var(--marine); }
.au-quotidien > :first-child, .methode > :first-child, .piege > :first-child, .retenir > :first-child { margin-top: 0; }
.au-quotidien > :last-child, .methode > :last-child, .piege > :last-child, .retenir > :last-child { margin-bottom: 0; }
.methode { box-shadow: 6px 6px 0 var(--vermillon); }
.piege { box-shadow: 6px 6px 0 var(--jaune); }
.retenir { background: var(--marine); color: var(--creme); box-shadow: 6px 6px 0 var(--vermillon); }
.retenir a { color: var(--jaune); }
.etiquette { display: inline-block; font-family: var(--tampon); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--marine); color: var(--creme); padding: 5px 9px 4px; margin-bottom: .6em; }
.methode .etiquette { background: var(--vermillon); }
.piege .etiquette { background: var(--jaune); color: var(--marine); }
.retenir .etiquette { background: var(--vermillon); }

/* ---------- tableaux ---------- */
.tableau { overflow-x: auto; margin: 1.6em 0; }
table { border-collapse: collapse; width: 100%; font-size: 16px; background: var(--blanc); border: 2px solid var(--marine); box-shadow: 6px 6px 0 rgba(29,43,122,.85); }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--papier2); }
th { font-family: var(--tampon); font-weight: 400; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; background: var(--marine); color: var(--creme); }

/* ---------- grille des épisodes ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; margin: 1.8em 0; }
.carte { display: flex; flex-direction: column; gap: 6px; background: var(--blanc); border: 2px solid var(--marine); box-shadow: 6px 6px 0 var(--marine); color: var(--marine); padding-bottom: 18px; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.carte:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--vermillon); color: var(--marine); }
.carte img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-bottom: 2px solid var(--marine); }
.carte > span, .carte > b { padding: 0 16px; }
.carte .num { font-family: var(--machine); font-size: 14px; color: var(--doux); margin-top: 8px; }
.carte b { font-size: 19px; line-height: 1.25; font-weight: 800; }
.carte > span:last-child { font-size: 15px; color: var(--doux); }

/* ---------- boutons : ceux du fanzine ---------- */
.bouton { display: inline-flex; align-items: center; gap: 8px; font-family: var(--titre); text-transform: uppercase; font-size: 22px; letter-spacing: .02em; text-decoration: none;
  background: var(--marine); color: var(--creme); padding: 10px 20px 7px; box-shadow: 6px 6px 0 var(--vermillon); margin: .4em 1em .6em 0; transition: transform .12s, box-shadow .12s; }
.bouton:hover { color: var(--creme); transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--vermillon); }
.bouton.second { background: var(--jaune); color: var(--marine); box-shadow: 6px 6px 0 var(--marine); }
.note-main { font-family: var(--main); color: var(--rose); font-size: 20px; transform: rotate(-2deg); display: inline-block; }

/* ---------- bas de page ---------- */
.transcription { margin: 2.6em 0; border-top: 2px dashed var(--doux); padding-top: 1em; }
.transcription summary { cursor: pointer; font-family: var(--tampon); font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
.transcription p { font-size: 16px; color: var(--doux); }
.suite { display: flex; justify-content: space-between; gap: 20px; margin-top: 3em; padding-top: 1.4em; border-top: 3px solid var(--marine); font-weight: 800; }
.suite a { text-decoration: none; }
.bas { background: var(--marine); color: var(--creme); font-size: 15px; padding: 30px 0 44px; margin-top: 30px; }
.bas .cadre { max-width: 1080px; }
.bas a { color: var(--jaune); }
.bas b { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 20px; letter-spacing: .02em; }

main.cadre { padding-top: 48px; padding-bottom: 72px; }