/* Deepverse 2.0 · « Technicolor marin » (dessin animé des années 30) — LA PARTIE LECTURE (agent B2, 27/10)
   Lire (lire.html), le Recueil (recueil.html), la page des scènes (scene.html), l'en-tête du Monde (monde.html).
   À charger EN DERNIER (après dv/deepverse.css et dv/habillage.css quand la page les a). Aucun balisage ni texte n'est changé ici :
   seulement l'habit. Les poèmes gardent Newsreader, à l'encre sur le papier ou en crème sur la nuit de leur scène.
   Règle de lisibilité : le texte d'un poème a toujours un contraste d'au moins 7:1 (encre sur papier crème, crème sur nuit). */

:root {
  --b2-encre: var(--dv-encre, #1E1712);
  --b2-encre-2: #3F3224;
  --b2-papier: var(--dv-papier, #F4E7C8);
  --b2-papier-f: var(--dv-papier-f, #EAD7AF);
  --b2-papier-c: #FBF4E2;                     /* le papier clair des boutons calmes */
  --b2-creme: var(--dv-creme, #F1E2BF);
  --b2-brique: var(--dv-violet, #C0604A);     /* Lire = la brique */
  --b2-brique-f: var(--dv-violet-f, #8C412E);
  --b2-or: var(--dv-jaune, #D6A84B);
  --b2-or-f: var(--dv-jaune-f, #A47A2C);
  --b2-canard: var(--dv-cyan, #5F8F96);
  --b2-canard-f: var(--dv-cyan-f, #416B71);
  --b2-corail: var(--dv-rose, #D58D78);
  --b2-algue: var(--dv-vert, #7F8F50);
  --b2-ombre: 4px 5px 0 var(--b2-encre);
  --b2-ombre-p: 2px 3px 0 var(--b2-encre);
  --b2-ressort: cubic-bezier(.3, 1.9, .45, 1);
  --b2-titre: 'Erica One', 'Cooper Black', 'Cooper Std', 'Rockwell Extra Bold', 'Rockwell', 'Arial Black', ui-rounded, system-ui, sans-serif;
  --b2-rond: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Varela Round', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --b2-poeme: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  /* le mot « Fin » des vieux dessins animés, la crème des titres sur la nuit */
  --b2-nuit-txt: #F3E8CE;
  --b2-nuit-txt-2: #D7C8A6;
}

/* =====================================================================================================================
   1. LIRE (lire.html) — la liste
   ===================================================================================================================== */
/* les titres de section : un petit carton (losange de la teinte, lettres de cinéma crème bordées d'encre) */
html.dv body.page-lire #vue-liste .section-titre { display: flex; align-items: center; gap: 10px; margin: 34px 0 12px;
  font: 900 clamp(22px, 6.4vw, 26px)/1.1 var(--b2-titre) !important; font-synthesis: none; text-transform: none; letter-spacing: .02em;
  color: var(--b2-creme) !important; -webkit-text-stroke: 2px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-encre) !important; }
html.dv body.page-lire #vue-liste .section-titre::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg);
  background: var(--b2-brique); border: 2.5px solid var(--b2-encre); box-shadow: 2px 2px 0 var(--b2-encre); }
/* le champ de recherche (maree/recherche.js) : une seule bande de papier bordée d'encre (avant : un cadre dans un cadre) */
html.dv body.page-lire .mrc { --mrc-fond: var(--b2-papier-c); --mrc-tx: var(--b2-encre); --mrc-tx2: #4A3B2C; --mrc-trait: var(--b2-encre); --mrc-action: var(--b2-brique-f);
  --mrc-voile: rgba(192, 96, 74, .16); --mrc-mark: rgba(214, 168, 75, .45); }
html.dv body.page-lire .mrc-champ { border: 3px solid var(--b2-encre); border-radius: 16px; box-shadow: var(--b2-ombre-p); }
html.dv body.page-lire .mrc-champ:focus-within { box-shadow: 0 0 0 3px rgba(192, 96, 74, .45), var(--b2-ombre-p); }
html.dv body.page-lire .mrc-champ input[type="search"] { border: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--b2-encre) !important; font: 700 16px/1.2 var(--b2-rond); }
html.dv body.page-lire .mrc-l a { border: 2.5px solid var(--b2-encre); box-shadow: var(--b2-ombre-p); }
/* « Lire autrement » : des étiquettes de papier, une flèche à l'encre */
html.dv body.page-lire #vue-liste .ailleurs a { box-shadow: var(--b2-ombre-p); transition: transform .42s var(--b2-ressort); }
html.dv body.page-lire #vue-liste .ailleurs a:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--b2-encre); transition-duration: .07s; }
html.dv body.page-lire #vue-liste .ailleurs svg { color: var(--b2-brique-f); }
html.dv body.page-lire #vue-liste .fiche > svg { color: var(--b2-brique-f); }
html.dv body.page-lire #vue-liste .fiche { transition: transform .42s var(--b2-ressort); }
html.dv body.page-lire #vue-liste .fiche:active { transform: translate(2px, 3px) scale(.99); transition-duration: .07s; }
html.dv body.page-lire #vue-liste .fiche .planche, html.dv body.page-lire #vue-liste .une .planche { outline: 2.5px solid var(--b2-encre); outline-offset: -2.5px; }
html.dv body.page-lire #vue-liste .lue { border: 2px solid var(--b2-encre); background: #EAD49A; color: var(--b2-encre); font-family: var(--b2-rond); font-weight: 900; }
html.dv body.page-lire #vue-liste .une-avance { height: 8px; border: 2px solid var(--b2-encre); border-radius: 6px; background: var(--b2-papier-f); }
html.dv body.page-lire #vue-liste .une-avance i { background: linear-gradient(180deg, var(--b2-or) 0 60%, var(--b2-or-f) 60.5%); }
html.dv body.page-lire .signature { color: var(--b2-encre-2); font-weight: 700; }

/* =====================================================================================================================
   2. LIRE — la lecture d'un poème
   Le poème se lit sur une PAGE DE PAPIER crème (encre #1E1712 : contraste 15:1), posée sur la mer ; en scène, il se lit en
   crème sur la nuit de son image (contraste ≥ 12:1). Avant (habillage) : l'encre de la page de papier restait en scène →
   le texte noir sur la nuit était illisible. Les ouvertures (titre, minutes, Écouter, Cinéma) sont toujours sur la nuit du poème.
   ===================================================================================================================== */
/* la barre du haut en lecture : du papier ; « image » et « Aa » en médaillons d'encre (avant : crème pâle sur crème, invisibles) */
html.dv body.page-lire .barre .taille, html.dv body.page-lire .barre .bouton-image { width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0 2px; border-radius: 50%;
  border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre) !important; text-shadow: none !important; box-shadow: var(--b2-ombre-p);
  font: 900 19px/1 var(--b2-rond); transition: transform .42s var(--b2-ressort); }
html.dv body.page-lire .barre .taille small { font-size: 14px; }
html.dv body.page-lire .barre .bouton-image svg { width: 22px; height: 22px; filter: none !important; }
html.dv body.page-lire .barre .bouton-image[aria-pressed="true"] { background: var(--b2-or); }
html.dv body.page-lire .barre :is(.taille, .bouton-image):active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--b2-encre); transition-duration: .07s; }
html.dv.en-scene body.page-lire .retour { color: var(--b2-encre); text-shadow: none; }
html.dv.en-scene body.page-lire .retour svg { filter: none; }
html.dv body.page-lire .barre-droite { align-items: center; }
/* le fil d'encre (la progression) : il remplit le liseré de brique au bas de la barre de papier, à la brique foncée */
html.dv body.page-lire .l-progres { top: calc(60px + var(--haut)); height: 4px; z-index: 31; }
html.dv body.page-lire .l-progres i { background: var(--b2-brique-f); opacity: 1; }
html.dv .lecture .ol-carte { margin-top: 4px; }

/* les couleurs de la page en scène : la crème sur la nuit (les jetons de la page de papier ne s'appliquent plus) */
html.dv.en-scene .lecture { --encre: var(--b2-nuit-txt); --texte: var(--b2-nuit-txt); --encre-2: var(--b2-nuit-txt-2); --texte-2: var(--b2-nuit-txt-2);
  --trait: rgba(243, 232, 206, .2); --lien: #E6C47E; --lagon-f: #E6C47E; --papier: #1C1A1E; color: var(--b2-nuit-txt); }
html.dv.contraste.en-scene .lecture { --encre: #FFF8EA; --texte: #FFF8EA; --encre-2: #EFE3C6; --texte-2: #EFE3C6; }
/* l'ouverture (toujours sur la nuit de l'histoire) : le carton de titre */
html.dv .lecture .l-tete .surtitre { color: #E6C47E; font: 900 12.5px/1.2 var(--b2-rond); letter-spacing: .16em; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); }
html.dv .lecture .l-tete h1 { padding: 0 6px 6px 0; font: 900 clamp(32px, 9vw, 46px)/1.06 var(--b2-titre); font-synthesis: none; letter-spacing: .01em; color: var(--b2-creme);
  -webkit-text-stroke: 2.5px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-brique-f), 5px 5px 0 #0B0806; text-wrap: balance; }
html.dv .lecture .l-tete .meta { color: var(--b2-nuit-txt-2); font: 700 14.5px/1.3 var(--b2-rond); }
/* Écouter · Cinéma · le son : des boutons de papier crème bordés d'encre, posés sur la nuit (une seule rangée qui tient à 320 px) */
html.dv .lecture .l-sons { gap: 10px; }
html.dv .lecture .l-tete .ecouter, html.dv .lecture .l-sons .mde-son-btn { min-height: 46px; border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre);
  box-shadow: 0 0 0 1.5px rgba(243, 232, 206, .35), 2px 3px 0 #0B0806; font: 900 15px/1 var(--b2-rond); transition: transform .42s var(--b2-ressort); }
html.dv .lecture .l-tete .ecouter small, html.dv .lecture .l-tete .ecouter span { color: inherit; }
html.dv .lecture .l-sons .mde-son-btn { width: 46px; min-width: 46px; height: 46px; padding: 0; }
html.dv .lecture .l-sons .mde-son-btn[aria-pressed="true"] { background: var(--b2-or); color: var(--b2-encre); }
html.dv .lecture .l-tete .ecouter:active, html.dv .lecture .l-sons .mde-son-btn:active { transform: translate(2px, 3px); box-shadow: 0 0 0 1.5px rgba(243, 232, 206, .35); transition-duration: .07s; }
html.dv .lecture .ecouter.mde-cinema-btn svg .o, html.dv .lecture .geste.mde-cinema-btn svg .o { stroke: var(--b2-brique-f); }

/* la page de papier (lecture sans image, ou « Texte seul ») : la nuit du poème se termine par un bord de papier festonné,
   tracé à l'encre (téléphone) ; sur grand écran, un feuillet crème bordé d'encre posé sur la nuit et sur la mer */
html.dv.lecture-on:root:not(.en-scene) body.page-lire.avec-mer { background: transparent !important; }
html.dv:not(.en-scene) .lecture .l-ouverture::after { height: 24px; margin-top: 12px; margin-bottom: -1px; -webkit-mask: none; mask: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12C10 12 10 3 20 3s10 9 20 9 10-9 20-9V24z' fill='%23F7ECD2'/%3E%3Cpath d='M0 12C10 12 10 3 20 3s10 9 20 9 10-9 20-9' fill='none' stroke='%231E1712' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 60px 24px repeat-x; }
html.dv:not(.en-scene) .lecture .l-papier { position: relative; max-width: none; padding: 18px max(22px, var(--cote-d)) 10px max(22px, var(--cote));
  background: #F7ECD2 url(../e5/img/papier.png); background-blend-mode: multiply; color: var(--b2-encre); border-top: 0; border-bottom: 3px solid var(--b2-encre); }
html.dv:not(.en-scene) .lecture .l-papier > * { max-width: 640px; margin-left: auto; margin-right: auto; }
html.dv:not(.en-scene) .lecture .l-texte { max-width: 31em; }
@media (min-width: 720px) {
  html.dv:not(.en-scene) .lecture .l-ouverture { padding-bottom: 56px; }
  html.dv:not(.en-scene) .lecture .l-ouverture::after { display: none; }
  html.dv:not(.en-scene) .lecture .l-papier { max-width: 680px; margin: -40px auto 40px; padding: 38px 48px 14px; border: 3px solid var(--b2-encre); border-radius: 6px 6px 14px 14px;
    box-shadow: inset 0 0 0 6px #F7ECD2, inset 0 0 0 8px rgba(140, 65, 46, .6), 6px 7px 0 var(--b2-encre); }
}
/* le texte du poème : Newsreader, grand, l'encre pleine ; la lettrine à l'encre rouge des vieux livres (crème en scène) */
html.dv .lecture .l-texte { color: var(--encre); }
html.dv:not(.en-scene) .lecture .lettrine { color: var(--b2-brique-f); }
html.dv.en-scene .lecture .lettrine { color: #F1D7A6; }
html.dv .lecture .l-texte .v.ec-on { background: rgba(214, 168, 75, .35); box-shadow: 0 0 0 3px rgba(214, 168, 75, .35); }
html.dv.en-scene .lecture .l-texte .v.ec-on { background: rgba(214, 168, 75, .28); }

/* la fin : « Fin » en lettres de cinéma, comme le dernier carton d'un vieux dessin animé */
html.dv .lecture .l-fin { gap: 14px; }
html.dv .lecture .l-fin > svg { display: none; }
html.dv .lecture .l-fin-mot { position: relative; display: inline-block; margin: 6px 0 4px; padding: 6px 30px 12px; font: 900 clamp(44px, 13vw, 60px)/1 var(--b2-titre); font-style: normal; font-synthesis: none;
  letter-spacing: .03em; color: var(--b2-creme); -webkit-text-stroke: 3px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-brique-f), 6px 6px 0 var(--b2-encre); }
html.dv .lecture .l-fin-mot::before, html.dv .lecture .l-fin-mot::after { content: ""; position: absolute; top: 50%; width: 22px; height: 10px; margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M1 5h12' stroke='%231E1712' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M17 1.2 20.8 5 17 8.8 13.2 5z' fill='%23C99A3A' stroke='%231E1712' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
html.dv .lecture .l-fin-mot::before { left: 0; }
html.dv .lecture .l-fin-mot::after { right: 0; transform: scaleX(-1); }
html.dv.en-scene .lecture .l-fin-mot::before, html.dv.en-scene .lecture .l-fin-mot::after { filter: invert(.92) sepia(.4); }
/* aimer, commenter, envoyer, cinéma, story… : des boutons de papier crème bordés d'encre (lisibles sur le papier comme sur la nuit) */
html.dv .lecture .geste { min-height: 48px; padding: 0 16px 0 12px; border: 2.5px solid var(--b2-encre); border-radius: 16px; background: var(--b2-papier-c); color: var(--b2-encre);
  font: 900 15.5px/1 var(--b2-rond); box-shadow: var(--b2-ombre-p); transition: transform .42s var(--b2-ressort); }
html.dv.en-scene .lecture .geste { background: var(--b2-papier-c); border-color: var(--b2-encre); color: var(--b2-encre); box-shadow: 0 0 0 1.5px rgba(243, 232, 206, .3), 2px 3px 0 #0B0806; }
html.dv .lecture .geste b { font-weight: 900; }
html.dv .lecture .geste:active { transform: translate(2px, 3px) scale(.97); box-shadow: 0 0 0 var(--b2-encre); transition-duration: .07s; }
html.dv .lecture .geste[aria-pressed="true"], html.dv.en-scene .lecture .geste[aria-pressed="true"] { background: var(--b2-corail); color: var(--b2-encre); border-color: var(--b2-encre); }
html.dv .lecture .geste svg { color: var(--b2-encre); }
html.dv .lecture .geste[aria-pressed="true"] svg path { fill: var(--b2-brique-f); stroke: var(--b2-encre); }
/* l'histoire suivante : une carte de papier, cadre de brique, ombre décalée */
html.dv .lecture .suivante, html.dv.en-scene .lecture .suivante { border: 3px solid var(--b2-encre); border-radius: 18px; background: linear-gradient(180deg, var(--b2-papier), var(--b2-papier-f)); color: var(--b2-encre);
  box-shadow: inset 0 0 0 3px var(--b2-papier), inset 0 0 0 5px var(--b2-brique), var(--b2-ombre); transition: transform .42s var(--b2-ressort); }
html.dv .lecture .suivante::before, html.dv .lecture .suivante::after { display: none; }
html.dv .lecture .suivante:active { transform: translate(3px, 4px) scale(.99); box-shadow: inset 0 0 0 3px var(--b2-papier), inset 0 0 0 5px var(--b2-brique), 1px 1px 0 var(--b2-encre); transition-duration: .07s; }
html.dv .lecture .suivante small { color: var(--b2-brique-f); font: 900 12.5px/1.2 var(--b2-rond); letter-spacing: .12em; }
html.dv .lecture .suivante b { color: var(--b2-encre); font: 900 21px/1.15 var(--b2-rond); }
html.dv .lecture .suivante > svg { color: var(--b2-brique-f); }
html.dv .lecture .suivante .planche { -webkit-mask: none; mask: none; border-radius: 10px; overflow: hidden; outline: 2.5px solid var(--b2-encre); outline-offset: -2.5px; }
html.dv .lecture .l-fin .lien-doux { padding: 0 20px; text-decoration: none; box-shadow: var(--b2-ombre-p); }
html.dv.en-scene .lecture .l-fin .lien-doux { box-shadow: 0 0 0 1.5px rgba(243, 232, 206, .3), 2px 3px 0 #0B0806; }

/* la scène : un cadre de pellicule — un trait d'encre sous l'image (téléphone) ou à sa droite (ordinateur) */
html.dv.en-scene body.page-lire .l-affiche { box-shadow: 0 3px 0 var(--b2-encre), 0 7px 0 rgba(214, 168, 75, .55); }
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  html.dv.en-scene body.page-lire .l-affiche { box-shadow: 3px 0 0 var(--b2-encre), 7px 0 0 rgba(214, 168, 75, .55); }
}
/* la carte « objet trouvé » (objets-lecture.js) sur la nuit : du papier, comme le reste */
html.dv .lecture .ol-carte { color: var(--b2-encre); }

/* la nuit de l'iPhone (mode sombre) : Lire reste dans le même habit (le papier et l'encre), sans les couleurs d'avant */
@media (prefers-color-scheme: dark) {
  html.dv.lecture-on:not(.en-scene) .lecture { --nacre: #F4E7C8; --papier: #FBF4E2; --encre: #1E1712; --encre-2: #3F3224; --lien: #8C412E; }
}

/* =====================================================================================================================
   3. LE RECUEIL (recueil.html) — « l'accueil-plongée », repeint en Technicolor marin
   Avant : une nuit bleu marine (océan WebGL, ciel étoilé, cartes de verre sombre). Maintenant : un ciel de papier peint au-dessus
   d'une mer aquarelle, des cartes de papier crème bordées d'encre, des boutons de couleur passée, des titres en lettres de cinéma.
   La mer s'assombrit un peu en descendant (sur les bords seulement : le texte reste à l'encre, contraste ≥ 4,5:1 partout).
   L'océan calculé en WebGL (ocean-vivant.js) est remplacé par la mer peinte (CSS) : moins de calcul pour le téléphone.
   Le comportement ne change pas (profondimètre, secrets, montées, compagnons) : seulement l'habit.
   Préfixe « :root.dv.dv-4x body.recueil » : il passe devant l'habillage commun des pages 4.x (dv/habillage.css). */
:root.dv.dv-4x body.recueil { --rc-or: #8C412E; --rc-rose: #8C412E; --rc-texte: #1E1712; --rc-doux: #3F3224; --rc-verre: #F4E7C8;
  --b2-carte: linear-gradient(180deg, var(--b2-papier) 0%, var(--b2-papier-f) 100%);
  --b2-cadre: inset 0 0 0 4px var(--b2-papier), inset 0 0 0 6px var(--c, var(--b2-brique)); background: transparent !important; color: var(--b2-encre); }
html.dv.dv-4x:has(body.recueil) { background: var(--dv-mer-3, #6E9692); }
/* la mer peinte, derrière tout (à la place de l'océan WebGL bleu marine) ; plus on descend, plus ses bords s'assombrissent */
:root.dv.dv-4x body.recueil .rc-ocean { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 14 Q15 6 30 14 T60 14 T90 14 T120 14' fill='none' stroke='%231E1712' stroke-opacity='.07' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 120px 28px,
    radial-gradient(55% 28% at 18% 16%, rgba(244, 231, 200, .3) 0%, transparent 72%),
    radial-gradient(48% 26% at 86% 52%, rgba(244, 231, 200, .18) 0%, transparent 72%),
    linear-gradient(180deg, var(--dv-mer-1, #8AADA7) 0%, var(--dv-mer-2, #7BA29D) 40%, var(--dv-mer-3, #6E9692) 75%, var(--dv-mer-4, #678F8B) 100%); }
:root.dv.dv-4x body.recueil #rc-eau { display: none; }
:root.dv.dv-4x body.recueil .rc-ocean::after { background: radial-gradient(130% 90% at 50% 45%, transparent 52%, rgba(34, 55, 57, .75) 100%); opacity: calc(.25 + var(--rc-p, 0) * .75); }
/* les bêtes de passage : dessinées à l'encre (jamais de lueur) */
:root.dv.dv-4x body.recueil .rc-bete.b-meduse { color: #E8B8A6; }
:root.dv.dv-4x body.recueil .rc-bete.b-meduse2 { color: #EAD49A; }
:root.dv.dv-4x body.recueil .rc-bete .m > path:first-child { stroke: var(--b2-encre); stroke-width: 2.6; paint-order: stroke fill; opacity: 1; }
:root.dv.dv-4x body.recueil .rc-bete .m > path + path { stroke: var(--b2-encre); opacity: .6; }
:root.dv.dv-4x body.recueil .rc-bete.b-baleine { filter: none; }
:root.dv.dv-4x body.recueil .rc-bete.b-baleine img { filter: brightness(0) invert(.44) sepia(.55) hue-rotate(125deg) saturate(.5); opacity: .5; }
:root.dv.dv-4x body.recueil .rc-bete.b-lueur svg path:first-child { fill: #34504F; stroke: var(--b2-encre); stroke-width: 2.4; paint-order: stroke fill; }
:root.dv.dv-4x body.recueil .rc-bete.b-lueur svg path:nth-child(2) { stroke: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-bete.b-lueur .l { fill: #E6C47E; stroke: var(--b2-encre); stroke-width: 1.6; filter: none; }
:root.dv.dv-4x body.recueil .rc-bete.b-lueur svg circle:last-child { fill: #F4E9CF; }

/* le profondimètre : une étiquette de papier, la jauge au laiton */
:root.dv.dv-4x body.recueil .rc-prof { border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); box-shadow: var(--b2-ombre-p);
  -webkit-backdrop-filter: none; backdrop-filter: none; font: 900 .82rem/1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-prof-l { background: var(--b2-papier-f); box-shadow: inset 0 0 0 1.5px var(--b2-encre); width: 6px; }
:root.dv.dv-4x body.recueil .rc-prof-l i { background: linear-gradient(180deg, var(--b2-canard), var(--b2-brique)); }

/* l'en-tête : transparent sur le ciel, puis une bande de papier ; la marque à l'encre ; « Musique » en étiquette de papier */
:root.dv.dv-4x body.recueil .entete .marque, :root.dv.dv-4x body.recueil .entete .marque #marque-txt { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .musique { height: 44px; border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); font: 900 .9rem/1 var(--b2-rond); box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .musique[aria-pressed="true"] { background: var(--b2-or); color: var(--b2-encre); border-color: var(--b2-encre); }
html.rc-nuit.rc-haut:root.dv.dv-4x body.recueil .entete .marque, html.rc-nuit.rc-haut:root.dv.dv-4x body.recueil .entete .marque #marque-txt { color: var(--b2-creme); }
html.rc-haut:root.dv.dv-4x body.recueil .entete { box-shadow: none !important; border-bottom-color: transparent !important; }

/* ---------- LA SURFACE : un ciel de papier peint (jour) ou d'encre de mer (nuit, 22 h – 5 h) ---------- */
:root.dv.dv-4x body.recueil .rc-surface { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-ciel { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M18 46c-9 0-12-10-4-13 0-9 11-12 16-6 4-9 18-9 21 1 8-2 14 5 10 12 6 3 3 10-4 10z' fill='%23FBF4E2' stroke='%231E1712' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M27 39c2-3 6-4 9-2' fill='none' stroke='%231E1712' stroke-width='1.6' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") 8% 22% / clamp(92px, 26vw, 150px) auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M18 46c-9 0-12-10-4-13 0-9 11-12 16-6 4-9 18-9 21 1 8-2 14 5 10 12 6 3 3 10-4 10z' fill='%23FBF4E2' stroke='%231E1712' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 101% 36% / clamp(64px, 17vw, 104px) auto no-repeat,
    radial-gradient(120% 70% at 50% 100%, rgba(214, 141, 120, .35) 0%, transparent 60%),
    linear-gradient(180deg, #F5E8C8 0%, #F2DDB6 55%, #EBC9A0 100%); }
:root.dv.dv-4x body.recueil .rc-ciel::after { -webkit-mask: none; mask: none; height: 26px; bottom: 1px; animation: b2-houle 9s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v12c-20 0-20 10-40 10s-20-10-40-10-20 10-40 10-20-10-40-10-20 10-40 10S20 12 0 12z' fill='%23EBC9A0'/%3E%3Cpath d='M240 12c-20 0-20 10-40 10s-20-10-40-10-20 10-40 10-20-10-40-10-20 10-40 10S20 12 0 12' fill='none' stroke='%231E1712' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 240px 100% repeat-x; }
@keyframes b2-houle { to { background-position: 240px 0; } }
/* le soleil (le jour) : un disque de laiton bordé d'encre, ses rayons peints ; la lune (la nuit) : de la crème bordée d'encre */
:root.dv.dv-4x body.recueil .rc-lune { width: clamp(44px, 11vw, 74px); border: 3px solid var(--b2-encre); background: radial-gradient(circle at 36% 34%, #FBEFC8 0 18%, #F2CF7E 42%, #D6A84B 100%);
  box-shadow: 3px 4px 0 var(--b2-encre), 0 0 0 10px rgba(242, 207, 126, .28), 0 0 0 22px rgba(242, 207, 126, .14); }
html.rc-nuit:root.dv.dv-4x body.recueil .rc-ciel { background:
    radial-gradient(1.6px 1.6px at 12% 18%, #F4E9CF 70%, transparent), radial-gradient(1.3px 1.3px at 28% 8%, #F4E9CF 70%, transparent), radial-gradient(1.8px 1.8px at 44% 22%, #F4E9CF 70%, transparent),
    radial-gradient(1.3px 1.3px at 63% 12%, #F4E9CF 70%, transparent), radial-gradient(1.6px 1.6px at 78% 26%, #F4E9CF 70%, transparent), radial-gradient(1.3px 1.3px at 90% 9%, #F4E9CF 70%, transparent),
    radial-gradient(1.3px 1.3px at 6% 34%, #F4E9CF 70%, transparent), radial-gradient(1.4px 1.4px at 54% 36%, #F4E9CF 70%, transparent), radial-gradient(1.3px 1.3px at 86% 40%, #F4E9CF 70%, transparent),
    linear-gradient(180deg, #1F3335 0%, #2B4446 60%, #3E5F5E 100%); }
html.rc-nuit:root.dv.dv-4x body.recueil .rc-ciel::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0h240v12c-20 0-20 10-40 10s-20-10-40-10-20 10-40 10-20-10-40-10-20 10-40 10S20 12 0 12z' fill='%233E5F5E'/%3E%3Cpath d='M240 12c-20 0-20 10-40 10s-20-10-40-10-20 10-40 10-20-10-40-10-20 10-40 10S20 12 0 12' fill='none' stroke='%231E1712' stroke-width='3'/%3E%3C/svg%3E"); }
html.rc-nuit:root.dv.dv-4x body.recueil .rc-lune { background: radial-gradient(circle at 38% 36%, #FBF4E2, #F1E2BF 60%, #D9C597); box-shadow: 3px 4px 0 var(--b2-encre), 0 0 0 10px rgba(244, 233, 207, .12); }
html.rc-nuit:root.dv.dv-4x body.recueil .rc-constellation .tr { stroke: #F4E9CF; }
html.rc-nuit:root.dv.dv-4x body.recueil .rc-constellation .et { fill: #F4E9CF; }
/* le nom en lettres de cinéma, la devise, la ligne en capitales */
:root.dv.dv-4x body.recueil .rc-logo { filter: drop-shadow(3px 3px 0 var(--b2-encre)); }
:root.dv.dv-4x body.recueil .rc-titre { padding: 0 8px 8px 0; font: 900 clamp(2.9rem, 14vw, 6rem)/1 var(--b2-titre) !important; font-synthesis: none; letter-spacing: .01em; color: var(--b2-creme);
  -webkit-text-stroke: 3.5px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-brique-f), 6px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-devise { color: var(--b2-encre); font-weight: 500; }
:root.dv.dv-4x body.recueil .rc-sous { color: var(--b2-brique-f); font: 900 .86rem/1.4 var(--b2-rond); letter-spacing: .14em; text-shadow: none; }
html.rc-nuit:root.dv.dv-4x body.recueil .rc-devise { color: #F4E9CF; }
html.rc-nuit:root.dv.dv-4x body.recueil .rc-sous { color: #E6C47E; }
/* la loutre qui flotte : le même dessin, repassé à l'encre ; l'eau de la mer peinte */
:root.dv.dv-4x body.recueil :is(.rc-loutre, .rc-loutre-fond, .rc-nageuse) .corps > :is(path, ellipse, circle):not([opacity]):not([fill="none"]):not([stroke]) { stroke: var(--b2-encre); stroke-width: 2.2px; stroke-linejoin: round; paint-order: stroke fill; }
:root.dv.dv-4x body.recueil #eauL stop { stop-color: #7BA29D; }
:root.dv.dv-4x body.recueil .rc-loutre { filter: drop-shadow(2px 3px 0 rgba(30, 23, 18, .35)); }
:root.dv.dv-4x body.recueil .rc-loutre:focus-visible { outline: 3px solid var(--b2-encre); }
/* le petit requin (rare) : bleu canard, bordé d'encre */
:root.dv.dv-4x body.recueil .rc-requin .rq > path:not([stroke]) { stroke: var(--b2-encre); stroke-width: 2.2px; stroke-linejoin: round; paint-order: stroke fill; }
:root.dv.dv-4x body.recueil .rc-requin .rq > path:nth-child(1) { fill: #5F8F96; }
:root.dv.dv-4x body.recueil .rc-requin .rq > path:nth-child(2), :root.dv.dv-4x body.recueil .rc-requin .rq > path:nth-child(5) { fill: #416B71; }
:root.dv.dv-4x body.recueil .rc-requin .rq > path:nth-child(3) { fill: #F4E9CF; }

/* le vers du jour : une carte de papier, cadre de brique, ombre décalée */
:root.dv.dv-4x body.recueil .rc-vers { border-radius: 22px; border: 3px solid var(--b2-encre); background: var(--b2-carte); color: var(--b2-encre);
  box-shadow: var(--b2-cadre), 5px 6px 0 var(--b2-encre); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.dv.dv-4x body.recueil .rc-vers-sur { color: var(--b2-brique-f); font: 900 .78rem/1 var(--b2-rond); letter-spacing: .16em; }
:root.dv.dv-4x body.recueil .rc-vers-txt { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-vers-de { color: var(--b2-encre-2); font: 700 .95rem/1.35 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-vers-de cite { color: var(--b2-encre); font-weight: 900; }

/* les boutons du recueil : le bouton de jeu (brique) et le bouton calme (papier) */
:root.dv.dv-4x body.recueil .rc-btn { min-height: 48px; padding: .55rem 1.05rem; border: 2.5px solid var(--b2-encre); border-radius: 16px; background: var(--b2-papier-c); color: var(--b2-encre);
  font: 900 .98rem/1.1 var(--b2-rond); box-shadow: var(--b2-ombre-p); transition: transform .42s var(--b2-ressort), box-shadow .2s ease; }
:root.dv.dv-4x body.recueil .rc-btn:hover { background: #FFF9EA; }
:root.dv.dv-4x body.recueil .rc-btn:active { transform: translate(2px, 3px) scale(.97); box-shadow: 0 0 0 var(--b2-encre); transition-duration: .07s; }
:root.dv.dv-4x body.recueil .rc-btn.plein { min-height: 52px; border: 3px solid var(--b2-encre); border-radius: 18px; color: var(--b2-creme); text-transform: uppercase; letter-spacing: .03em;
  background: linear-gradient(180deg, var(--b2-brique) 0%, var(--b2-brique) 63%, var(--b2-brique-f) 63.5%, var(--b2-brique-f) 100%);
  -webkit-text-stroke: 3px var(--b2-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--b2-encre); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), var(--b2-ombre); }
:root.dv.dv-4x body.recueil .rc-btn.plein:active { box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 1px 1px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-btn:focus-visible { outline: 3px solid var(--b2-encre); outline-offset: 3px; }
:root.dv.dv-4x body.recueil .rc-descendre { color: var(--b2-encre); font: 900 .82rem/1 var(--b2-rond); }

/* les cotes de profondeur (« −10 m ») : à l'encre, entre deux traits */
:root.dv.dv-4x body.recueil .rc-cote { color: var(--b2-encre); opacity: .82; font: 900 .78rem/1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-cote::before, :root.dv.dv-4x body.recueil .rc-cote::after { height: 2px; opacity: .7; }
/* les petites lignes d'introduction, posées sur la mer : à l'encre (pas en italique fin : lisible sur l'eau) */
:root.dv.dv-4x body.recueil .rc-intro { color: var(--b2-encre); font: 700 1.04rem/1.45 var(--b2-rond); }
/* les titres de section : des cartons de cinéma (crème bordée d'encre, ombre décalée), sans le miroitement d'avant */
:root.dv.dv-4x body.recueil .titre-section h2, :root.dv.dv-4x body.recueil .rc-c-t, :root.dv.dv-4x body.recueil .rc-fond-t, :root.dv.dv-4x body.recueil .auteur h2 {
  padding: 0 6px 6px 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none;
  font: 900 clamp(2rem, 9vw, 3.4rem)/1.04 var(--b2-titre) !important; font-synthesis: none; letter-spacing: .01em; color: var(--b2-creme) !important;
  -webkit-text-stroke: 3px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-brique-f), 5px 5px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-c-t, :root.dv.dv-4x body.recueil .rc-fond-t { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; text-align: center; }
:root.dv.dv-4x body.recueil .titre-section .compte { color: var(--b2-encre); font: 900 .9rem/1 var(--b2-rond); }

/* ---------- PAR OÙ COMMENCER ---------- */
:root.dv.dv-4x body.recueil .rc-capsule { border: 3px solid var(--b2-encre); background: linear-gradient(180deg, #F2C9B6, #E8B8A6); color: var(--b2-encre); box-shadow: var(--b2-ombre); }
:root.dv.dv-4x body.recueil .rc-capsule b { border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); font-weight: 900; }
:root.dv.dv-4x body.recueil .rc-reprendre { border: 3px solid var(--b2-encre); background: var(--b2-carte); color: var(--b2-encre); box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .rc-reprendre i { color: var(--b2-brique-f); }
:root.dv.dv-4x body.recueil .tm-l { color: var(--b2-encre); font: 900 1rem/1.3 var(--b2-rond); }
:root.dv.dv-4x body.recueil .tm-champ { padding: .3rem; border: 3px solid var(--b2-encre); border-radius: 20px; background: var(--b2-papier-c); box-shadow: var(--b2-ombre); }
:root.dv.dv-4x body.recueil .tm-champ:focus-within { border-color: var(--b2-encre); box-shadow: 0 0 0 3px rgba(192, 96, 74, .5), var(--b2-ombre); }
:root.dv.dv-4x body.recueil .tm-champ input, :root.dv.dv-4x body.recueil .tm-champ input[type="search"] { border: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--b2-encre) !important; }
:root.dv.dv-4x body.recueil .tm-champ input::placeholder { color: #6A5842; }
:root.dv.dv-4x body.recueil .tm-champ .rc-btn { box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3); border-radius: 14px; }
:root.dv.dv-4x body.recueil .tm-idee { min-height: 44px; border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); box-shadow: var(--b2-ombre-p); font-weight: 500; }
:root.dv.dv-4x body.recueil .tm-idee:active { transform: translate(2px, 3px); box-shadow: none; }
/* les quatre portes : des vignettes de papier, chacune son cadre de couleur passée, une icône dessinée */
:root.dv.dv-4x body.recueil .rc-q { --c: var(--b2-brique); border: 3px solid var(--b2-encre); border-radius: 20px; color: var(--b2-encre);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, var(--b2-papier)) 0%, var(--b2-papier) 52%, var(--b2-papier-f) 100%);
  box-shadow: inset 0 0 0 3px var(--b2-papier), inset 0 0 0 6px var(--c), var(--b2-ombre); transition: transform .42s var(--b2-ressort); }
:root.dv.dv-4x body.recueil .rc-q:nth-child(2) { --c: var(--b2-or); } :root.dv.dv-4x body.recueil .rc-q:nth-child(3) { --c: var(--b2-algue); } :root.dv.dv-4x body.recueil .rc-q:nth-child(4) { --c: var(--b2-canard); }
:root.dv.dv-4x body.recueil .rc-q:active { transform: translate(3px, 4px) scale(.97); box-shadow: inset 0 0 0 3px var(--b2-papier), inset 0 0 0 6px var(--c), 1px 1px 0 var(--b2-encre); transition-duration: .07s; }
:root.dv.dv-4x body.recueil .rc-q b { font: 900 1.12rem/1.1 var(--b2-rond); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-q small { color: var(--b2-encre-2); font: 700 .84rem/1.3 var(--b2-rond); }
:root.dv.dv-4x body.recueil :is(.rc-q, .rc-porte) > span:first-child .dv-ic { width: 46px; height: 46px; }
:root.dv.dv-4x body.recueil :is(.rc-q, .rc-porte) > span:first-child:has(.dv-ic) { font-size: 0; line-height: 0; }

/* ---------- COMMENT TU TE SENS ? (les billes d'humeur) ---------- */
:root.dv.dv-4x body.recueil .carte { border-radius: 24px; border: 3px solid var(--b2-encre) !important; background: var(--b2-carte); color: var(--b2-encre);
  box-shadow: var(--b2-cadre), 5px 6px 0 var(--b2-encre) !important; }
:root.dv.dv-4x body.recueil .carte h3 { color: var(--b2-encre); font: 900 clamp(1.2rem, 4.6vw, 1.5rem)/1.2 var(--b2-rond) !important; }
:root.dv.dv-4x body.recueil .humeur { color: var(--b2-encre-2); font: 800 .9rem/1.1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .humeur[aria-pressed="true"] { color: var(--b2-encre); font-weight: 900; }
:root.dv.dv-4x body.recueil .bille { border: 3px solid var(--b2-encre); background: radial-gradient(circle at 34% 28%, rgba(251, 244, 226, .95) 0 9%, var(--c1) 30%, var(--c2) 100%);
  box-shadow: inset -4px -6px 0 rgba(30, 23, 18, .16), 3px 4px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .humeur[aria-pressed="true"] .bille { box-shadow: inset -4px -6px 0 rgba(30, 23, 18, .16), 0 0 0 4px var(--b2-papier), 0 0 0 7px var(--b2-encre), 3px 4px 0 7px var(--b2-encre); }
:root.dv.dv-4x body.recueil .humeur[data-humeur="tristesse"] { --c1: #9DBCC0 !important; --c2: #5F8F96 !important; }
:root.dv.dv-4x body.recueil .humeur[data-humeur="amour"] { --c1: #E8B8A6 !important; --c2: #C8664A !important; }
:root.dv.dv-4x body.recueil .humeur[data-humeur="fatigue"] { --c1: #C9BFD4 !important; --c2: #8E7FA0 !important; }
:root.dv.dv-4x body.recueil .humeur[data-humeur="nostalgie"] { --c1: #EBC9A0 !important; --c2: #B57A45 !important; }
:root.dv.dv-4x body.recueil .humeur[data-humeur="espoir"] { --c1: #F2D99A !important; --c2: #D6A84B !important; }
:root.dv.dv-4x body.recueil .humeur[data-humeur="joie"] { --c1: #C2CC95 !important; --c2: #7F8F50 !important; }
:root.dv.dv-4x body.recueil .bille svg :is(circle, ellipse, path)[fill="#1d1a3b"] { fill: var(--b2-encre); }
:root.dv.dv-4x body.recueil .bille svg path[stroke="#1d1a3b"] { stroke: var(--b2-encre); }
:root.dv.dv-4x body.recueil .reco-carte { border: 2.5px solid var(--b2-encre); border-radius: 16px; background: var(--b2-papier-c); box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .reco-art { border: 2.5px solid var(--b2-encre); border-radius: 12px; background: #2E4749; }
:root.dv.dv-4x body.recueil .reco-txt strong { font: 900 1.15rem/1.2 var(--b2-rond); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .reco-txt p { color: var(--b2-encre); opacity: 1; }

/* ---------- LE POÈME DU JOUR (#lire) ---------- */
:root.dv.dv-4x body.recueil .une-art { border: 3px solid var(--b2-encre); border-radius: 22px; background: #2E4749; box-shadow: 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .une-art::before { mix-blend-mode: normal; background: none; }
:root.dv.dv-4x body.recueil .une-art-boite .legende { border-radius: 0 0 19px 19px; background: linear-gradient(transparent, rgba(30, 23, 18, .78)); color: #F4E9CF; font: 800 .9rem/1.2 var(--b2-rond); }
:root.dv.dv-4x body.recueil .legende .lire { border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); font-weight: 900; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .chip-mvt { border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); font: 800 .85rem/1 var(--b2-rond); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .chip-mvt svg { stroke: var(--b2-encre); }
:root.dv.dv-4x body.recueil .une-jour { padding: 1.1rem 1.1rem 1.2rem; border: 3px solid var(--b2-encre); border-radius: 22px; background: var(--b2-carte); color: var(--b2-encre); box-shadow: var(--b2-cadre), 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .une-jour .sur { color: var(--b2-brique-f) !important; }
:root.dv.dv-4x body.recueil .une-jour h2 { font: 900 clamp(1.6rem, 6.6vw, 2.2rem)/1.08 var(--b2-titre) !important; font-synthesis: none; letter-spacing: .02em; color: var(--b2-creme); -webkit-text-stroke: 1.8px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .premiers-vers { color: var(--b2-encre); opacity: 1; }
:root.dv.dv-4x body.recueil .stats { color: var(--b2-encre-2); font-weight: 800; }
:root.dv.dv-4x body.recueil .cherche-hero { border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre-2); box-shadow: var(--b2-ombre-p); }

/* les illustrations peintes des poèmes (moteur.js : nuits bleu marine) : passées au vieux film, comme le reste (sépia léger, couleurs moins vives) */
:root.dv.dv-4x body.recueil :is(.une-art .dio, .case-art, .reco-art, .flux-couv, .flux-case) :is(canvas, img), :root.dv.dv-4x body.recueil .page.couverture > :is(canvas, img), :root.dv.dv-4x body.recueil .rc-sc img { filter: sepia(.45) saturate(.78) contrast(1.03); }

/* ---------- EN SCÈNE (le triptyque) ---------- */
:root.dv.dv-4x body.recueil .rc-sc { color: var(--b2-encre); transition: transform .42s var(--b2-ressort); }
:root.dv.dv-4x body.recueil .rc-sc img { border: 3px solid var(--b2-encre); border-radius: 14px; box-shadow: 4px 5px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-sc:hover img, :root.dv.dv-4x body.recueil .rc-sc:focus-visible img { border-color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-sc b { font: 900 1.02rem/1.15 var(--b2-rond); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-sc small { color: var(--b2-encre-2); font: 700 .8rem/1.3 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-sc:focus-visible { outline-color: var(--b2-encre); }

/* ---------- LES CHAPITRES ---------- */
:root.dv.dv-4x body.recueil .rc-ch { border: 3px solid var(--b2-encre); border-radius: 22px; background: var(--b2-carte); color: var(--b2-encre);
  box-shadow: inset 0 0 0 4px var(--b2-papier), inset 0 0 0 7px color-mix(in srgb, var(--c, var(--b2-brique)) 70%, var(--b2-encre)), 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-ch::before { display: none; }
:root.dv.dv-4x body.recueil .rc-ch-n { color: color-mix(in srgb, var(--c, var(--b2-brique)) 55%, var(--b2-encre)); font: 900 1.25rem/1 var(--b2-titre); font-synthesis: none; letter-spacing: .1em; }
:root.dv.dv-4x body.recueil .rc-ch-t { font: 900 clamp(1.5rem, 6.4vw, 2rem)/1.08 var(--b2-titre); font-synthesis: none; color: var(--b2-creme); -webkit-text-stroke: 2.5px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-ch-s { color: var(--b2-encre-2); font: 700 .95rem/1.35 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-ch-epi { border-left: 4px solid color-mix(in srgb, var(--c, var(--b2-brique)) 70%, var(--b2-encre)); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-ch-epi footer, :root.dv.dv-4x body.recueil .rc-ch-pensee span { color: var(--b2-encre-2); font-family: var(--b2-rond); font-weight: 800; }
:root.dv.dv-4x body.recueil .rc-ch-pensee { border: 2px dashed rgba(30, 23, 18, .45); background: rgba(251, 244, 226, .7); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-ch-poemes a { min-height: 50px; border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); box-shadow: var(--b2-ombre-p); transition: transform .42s var(--b2-ressort); }
:root.dv.dv-4x body.recueil .rc-ch-poemes a:hover { background: #FFF9EA; }
:root.dv.dv-4x body.recueil .rc-ch-poemes a:active { transform: translate(2px, 3px); box-shadow: none; transition-duration: .07s; }
:root.dv.dv-4x body.recueil .rc-ch-poemes b { font: 900 1.04rem/1.2 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-ch-poemes span { color: var(--b2-encre-2); font-weight: 800; }
:root.dv.dv-4x body.recueil .rc-ch-poemes i { color: var(--b2-brique-f); font-weight: 900; }
:root.dv.dv-4x body.recueil .rc-ch-suivre { min-height: 48px; padding: .55rem 1.1rem; border: 2.5px solid var(--b2-encre); border-radius: 16px; background: var(--b2-papier-c); color: var(--b2-encre);
  font: 900 .95rem/1.2 var(--b2-rond); box-shadow: var(--b2-ombre-p); text-align: left; transition: transform .42s var(--b2-ressort); }
:root.dv.dv-4x body.recueil .rc-ch-suivre > span[aria-hidden] { color: var(--b2-brique-f); }
:root.dv.dv-4x body.recueil .rc-ch-suivre:active { transform: translate(2px, 3px); box-shadow: none; transition-duration: .07s; }
:root.dv.dv-4x body.recueil .rc-ch-suivre:focus-visible { outline-color: var(--b2-encre); }
/* la pastille du parcours (parcours.js) : du papier bordé d'encre, le bouton de laiton */
body.recueil .pc-pilule { border: 3px solid var(--b2-encre) !important; background: var(--b2-papier-c) !important; color: var(--b2-encre) !important; box-shadow: 4px 5px 0 var(--b2-encre) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-family: var(--b2-rond) !important; font-weight: 800 !important; }
body.recueil .pc-pilule .pc-quoi b { color: var(--b2-brique-f) !important; font-weight: 900; }
body.recueil .pc-pilule button { border: 2.5px solid var(--b2-encre) !important; background: linear-gradient(180deg, #F2D99A 0 60%, var(--b2-or) 60.5%) !important; color: var(--b2-encre) !important; font-family: var(--b2-rond) !important; font-weight: 900 !important; }
body.recueil .pc-pilule button.pc-x { background: var(--b2-papier-f) !important; }
:root.dv.dv-4x body.recueil .rc-livre-porte { border: 3px solid var(--b2-encre); background: var(--b2-carte); color: var(--b2-encre); box-shadow: inset 0 0 0 4px var(--b2-papier), inset 0 0 0 7px var(--b2-or), 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-livre-porte b { color: var(--b2-encre); font: 900 1.15rem/1.15 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-livre-porte small { color: var(--b2-encre-2); font: 700 .88rem/1.35 var(--b2-rond); }
:root.dv.dv-4x body.recueil .rc-livre-porte i { color: var(--b2-brique-f); font-weight: 900; }
:root.dv.dv-4x body.recueil .rc-livre-mini { border: 2.5px solid var(--b2-encre); background: linear-gradient(90deg, #8C412E 0 16%, #C0604A 16.5%); box-shadow: 3px 4px 0 var(--b2-encre); }

/* ---------- UN VERS À LA MER ---------- */
:root.dv.dv-4x body.recueil .rc-bouteille .bt-boite { border: 3px solid var(--b2-encre); border-radius: 24px; background: var(--b2-carte); color: var(--b2-encre); box-shadow: inset 0 0 0 4px var(--b2-papier), inset 0 0 0 7px var(--b2-canard), 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .bt-n { color: var(--b2-brique-f); font: 900 .8rem/1.1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .bt-p { min-height: 44px; border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); font: 900 .98rem/1.1 var(--b2-rond); box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .bt-p[aria-pressed="true"] { background: var(--b2-canard); color: var(--b2-creme); border-color: var(--b2-encre); -webkit-text-stroke: 2px var(--b2-encre); paint-order: stroke fill; }
:root.dv.dv-4x body.recueil .bt-vers { border: 2.5px solid var(--b2-encre); background: #FBF4E2; }
:root.dv.dv-4x body.recueil .bt-l { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .bt-l:hover { background: rgba(95, 143, 150, .14); }
:root.dv.dv-4x body.recueil .bt-l[aria-pressed="true"] { background: rgba(214, 168, 75, .32); color: var(--b2-encre); box-shadow: inset 4px 0 0 var(--b2-brique); }
:root.dv.dv-4x body.recueil .bt-l.bt-pensee { border: 2px dashed rgba(30, 23, 18, .45); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .bt-l.bt-pensee small { color: var(--b2-brique-f); }
:root.dv.dv-4x body.recueil :is(.bt-compte, .bt-pourquoi, .bt-mots label) { color: var(--b2-encre-2); font-family: var(--b2-rond); font-weight: 700; }
:root.dv.dv-4x body.recueil .bt-mots input { border: 2.5px solid var(--b2-encre); background: #FBF4E2; color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .bt-apercu { border: 2.5px solid var(--b2-encre); box-shadow: 4px 5px 0 var(--b2-encre), inset 0 0 40px rgba(120, 80, 30, .2); }
:root.dv.dv-4x body.recueil .bt-ok, :root.dv.dv-4x body.recueil .mm-ok { color: #3E5A2A; font-family: var(--b2-rond); font-weight: 900; }

/* ---------- MES MOTS ---------- */
:root.dv.dv-4x body.recueil .mm-carte { border: 3px solid var(--b2-encre); border-radius: 22px; background: var(--b2-carte); color: var(--b2-encre); box-shadow: inset 0 0 0 4px var(--b2-papier), inset 0 0 0 7px var(--b2-or), 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .mm-carte.mm-lettre { box-shadow: inset 0 0 0 4px var(--b2-papier), inset 0 0 0 7px var(--b2-corail), 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .mm-carte h3 { color: var(--b2-encre); font: 900 1.22rem/1.15 var(--b2-rond) !important; }
:root.dv.dv-4x body.recueil .mm-carte > p { color: var(--b2-encre-2); font-family: var(--b2-rond); font-weight: 700; }
:root.dv.dv-4x body.recueil .mm-n { border: 2px solid var(--b2-encre); background: var(--b2-or); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .mm-vers li, :root.dv.dv-4x body.recueil .mm-capsules li { border: 2px solid rgba(30, 23, 18, .35); background: #FBF4E2; }
:root.dv.dv-4x body.recueil .mm-vers blockquote { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .mm-l a, :root.dv.dv-4x body.recueil .mm-dire { color: var(--b2-brique-f); font-weight: 900; }
:root.dv.dv-4x body.recueil .mm-x, :root.dv.dv-4x body.recueil .mm-noter { min-height: 40px; border: 2px solid var(--b2-encre); background: #FBF4E2; color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .mm-x { width: 40px; }
:root.dv.dv-4x body.recueil .mm-champ { color: var(--b2-encre-2); font-family: var(--b2-rond); }
:root.dv.dv-4x body.recueil :is(.mm-champ textarea, .mm-champ input, .mm-note-champ textarea) { border: 2.5px solid var(--b2-encre); background: #FBF4E2; color: var(--b2-encre); color-scheme: light; }
:root.dv.dv-4x body.recueil .mm-note-txt { border-left-color: var(--b2-brique); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .mm-c-ouvrir { border: 2px solid var(--b2-encre); background: var(--b2-or); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .mm-capsules li.arrivee { background: #F2C9B6; }
:root.dv.dv-4x body.recueil .mm-note { color: var(--b2-encre-2); }
:root.dv.dv-4x body.recueil .ml-bulle { border-color: var(--b2-encre); }

/* ---------- TOUS LES POÈMES (la bibliothèque) ---------- */
:root.dv.dv-4x body.recueil .biblio-ouvrir, :root.dv.dv-4x body.recueil #poemes.replie .biblio-ouvrir { border: 3px solid var(--b2-encre); background: var(--b2-carte); color: var(--b2-encre); box-shadow: var(--b2-cadre), 5px 6px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .biblio-ouvrir .bo-ic { border: 2.5px solid var(--b2-encre); background: linear-gradient(180deg, var(--b2-brique) 62%, var(--b2-brique-f) 62.5%); }
:root.dv.dv-4x body.recueil .biblio-ouvrir b { font: 900 1.2rem/1.1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .biblio-ouvrir small { color: var(--b2-encre-2); font-weight: 700; }
:root.dv.dv-4x body.recueil .biblio-ouvrir i { color: var(--b2-brique-f); }
:root.dv.dv-4x body.recueil .recherche .champ { border: 2.5px solid var(--b2-encre) !important; background: #FBF4E2 !important; box-shadow: var(--b2-ombre-p) !important; }
:root.dv.dv-4x body.recueil .recherche .ic { color: var(--b2-brique-f); }
:root.dv.dv-4x body.recueil .tri { border: 2.5px solid var(--b2-encre); background: #FBF4E2; box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .tri button { min-height: 40px; color: var(--b2-encre-2); font: 800 .9rem/1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .tri button[aria-pressed="true"] { background: var(--b2-brique); color: var(--b2-creme); -webkit-text-stroke: 2px var(--b2-encre); paint-order: stroke fill; box-shadow: inset 0 0 0 2px var(--b2-encre); }
:root.dv.dv-4x body.recueil .filtre-titre { color: var(--b2-encre); font: 900 .76rem/1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .cat { min-height: 40px; border: 2.5px solid var(--b2-encre); background: #FBF4E2; color: var(--b2-encre); font: 800 .88rem/1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .cat::before { border: 1.5px solid var(--b2-encre); }
:root.dv.dv-4x body.recueil .cat[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--b2-brique)) 40%, #FBF4E2); border-color: var(--b2-encre); box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .cat .n, :root.dv.dv-4x body.recueil .cat.zero { color: var(--b2-encre-2); }
:root.dv.dv-4x body.recueil .compris { color: var(--b2-encre-2); }
:root.dv.dv-4x body.recueil .case { border: 3px solid var(--b2-encre); border-radius: 20px; background: var(--b2-carte); color: var(--b2-encre); box-shadow: 4px 5px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .case:hover { box-shadow: 6px 8px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .case::after { display: none; }
:root.dv.dv-4x body.recueil .case-art { border-bottom: 3px solid var(--b2-encre); background: #2E4749; }
:root.dv.dv-4x body.recueil .case h3 { color: var(--b2-encre); font: 900 1.28rem/1.12 var(--b2-rond) !important; }
:root.dv.dv-4x body.recueil .case .meta { color: var(--b2-encre-2); font-weight: 700; }
:root.dv.dv-4x body.recueil .extrait { color: var(--b2-encre); opacity: 1; }
:root.dv.dv-4x body.recueil .etiquette { border: 2px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre); -webkit-backdrop-filter: none; backdrop-filter: none; font: 900 .7rem/1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .etiquette.neuf { background: var(--b2-brique); color: var(--b2-creme); }
:root.dv.dv-4x body.recueil .etiquette.lu { background: var(--b2-algue); color: var(--b2-creme); }
:root.dv.dv-4x body.recueil .vide { border: 2.5px dashed rgba(30, 23, 18, .5); background: rgba(251, 244, 226, .7); color: var(--b2-encre-2); }
:root.dv.dv-4x body.recueil .vide strong { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .ad-boite { border: 2.5px dashed var(--b2-encre); background: rgba(251, 244, 226, .85); color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .ad-boite .ad-t { font: 900 1.4rem/1.1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .ad-boite .ad-txt { color: var(--b2-encre-2); }
:root.dv.dv-4x body.recueil .ad-points i { border-color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .ad-points i.ok { background: var(--b2-brique); box-shadow: none; }
:root.dv.dv-4x body.recueil .ad-boite .ad-indice { color: var(--b2-brique-f); }

/* ---------- PLUS LOIN (la pioche, celui qui écrit) ---------- */
:root.dv.dv-4x body.recueil .pl-carte { border: 3px solid var(--b2-encre) !important; background: var(--b2-carte); color: var(--b2-encre); box-shadow: var(--b2-cadre), 5px 6px 0 var(--b2-encre) !important; }
:root.dv.dv-4x body.recueil .pl-carte h3 { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .plus-loin .titre-section h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
:root.dv.dv-4x body.recueil .cv-dos { border: 3px solid var(--b2-encre); background: linear-gradient(180deg, var(--b2-canard) 0 64%, var(--b2-canard-f) 64.5%); color: var(--b2-creme); box-shadow: 4px 5px 0 var(--b2-encre); font-weight: 800; }
:root.dv.dv-4x body.recueil .cv-dos::before { border: 2px dashed rgba(244, 233, 207, .55); }
:root.dv.dv-4x body.recueil .cv-face { border: 3px solid var(--b2-encre); background: #FBF4E2; color: var(--b2-encre); box-shadow: 4px 5px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .cv-face blockquote::before, :root.dv.dv-4x body.recueil .cv-face blockquote::after { color: var(--b2-brique); }
:root.dv.dv-4x body.recueil .auteur.pl-carte { color: #F4E9CF; background: radial-gradient(150% 95% at 50% 42%, transparent 55%, rgba(20, 14, 8, .45) 100%), linear-gradient(180deg, #34504F, #223739 75%); box-shadow: inset 0 0 0 4px #34504F, inset 0 0 0 6px var(--b2-or), 5px 6px 0 var(--b2-encre) !important; }
:root.dv.dv-4x body.recueil .auteur .auteur-encre { display: none; }
:root.dv.dv-4x body.recueil .auteur .sur { color: #E6C47E !important; }
:root.dv.dv-4x body.recueil .auteur h3, :root.dv.dv-4x body.recueil .auteur .signature { color: #F4E9CF; }
:root.dv.dv-4x body.recueil .auteur .bio { border-left-color: var(--b2-or); color: #F4E9CF; }
:root.dv.dv-4x body.recueil .auteur .btn:not(.plein) { color: var(--b2-encre) !important; }

/* ---------- TOUT AU FOND ---------- */
:root.dv.dv-4x body.recueil .rc-fond { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-porte { --c: var(--b2-canard); --c-f: var(--b2-canard-f); border: 3px solid var(--b2-encre); border-radius: 22px; color: var(--b2-creme);
  background: linear-gradient(180deg, var(--c) 0%, var(--c) 62%, var(--c-f) 62.5%, var(--c-f) 100%); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .28), var(--b2-ombre); transition: transform .42s var(--b2-ressort); }
:root.dv.dv-4x body.recueil .rc-porte.p-jeu { --c: var(--b2-or); --c-f: var(--b2-or-f); background: linear-gradient(180deg, var(--c) 0%, var(--c) 62%, var(--c-f) 62.5%, var(--c-f) 100%); }
:root.dv.dv-4x body.recueil .rc-porte:nth-child(3) { --c: var(--b2-brique); --c-f: var(--b2-brique-f); }
:root.dv.dv-4x body.recueil .rc-porte:hover { border-color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-porte:active { transform: translate(3px, 4px) scale(.97); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .2), 1px 1px 0 var(--b2-encre); transition-duration: .07s; }
:root.dv.dv-4x body.recueil .rc-porte b { font: 900 1.2rem/1.1 var(--b2-rond); color: var(--b2-creme); -webkit-text-stroke: 3px var(--b2-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-porte small { color: #FBF4E2; font: 800 .86rem/1.3 var(--b2-rond); text-shadow: 1px 1px 0 var(--b2-encre), -1px -1px 0 var(--b2-encre), 1px -1px 0 var(--b2-encre), -1px 1px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-perle { border: 3px solid var(--b2-encre); background: radial-gradient(circle at 35% 30%, #FFFDF4, #F4E9CF 32%, #E2CC98 64%, #B9A06A); box-shadow: 3px 4px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-perle.ouverte { box-shadow: 3px 4px 0 var(--b2-encre), 0 0 0 8px rgba(244, 233, 207, .35); }
:root.dv.dv-4x body.recueil .rc-perle:focus-visible { outline-color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .rc-perle-secret, :root.dv.dv-4x body.recueil .rc-loutre-fond p { padding: .9rem 1rem; border: 3px solid var(--b2-encre); border-radius: 18px; background: var(--b2-carte); box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .rc-loutre-fond p { padding: .4rem .8rem; }
:root.dv.dv-4x body.recueil .rc-ps-vers { color: var(--b2-encre); text-shadow: none; }
:root.dv.dv-4x body.recueil .rc-ps-src, :root.dv.dv-4x body.recueil .rc-loutre-fond p { color: var(--b2-encre-2); }
:root.dv.dv-4x body.recueil .rc-secrets { color: var(--b2-encre); font-weight: 800; }

/* ---------- les bulles des secrets, l'arrivée d'une bouteille ---------- */
.rc-bulle { border: 3px solid var(--dv-encre, #1E1712); background: #FBF4E2; color: var(--dv-encre, #1E1712); font: 800 .95rem/1.35 var(--b2-rond); box-shadow: 3px 4px 0 var(--dv-encre, #1E1712); }
:root.dv.dv-4x body.recueil .rc-arrivee { background: rgba(30, 23, 18, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.dv.dv-4x body.recueil .ar-sur { font: 900 1.6rem/1.15 var(--b2-titre); color: var(--b2-creme); -webkit-text-stroke: 2.5px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-encre); }
:root.dv.dv-4x body.recueil .ar-quand { color: #F4E9CF; }
:root.dv.dv-4x body.recueil .ar-papier { border: 3px solid var(--b2-encre); box-shadow: 5px 6px 0 var(--b2-encre); }

/* ---------- le pied de page, le lecteur, la feuille ---------- */
:root.dv.dv-4x body.recueil .pied { color: var(--b2-encre); border-top: 3px solid var(--b2-encre); }
:root.dv.dv-4x body.recueil .pied a, :root.dv.dv-4x body.recueil .pied button { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .symbole { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .lecteur { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cpath d='M0 14 Q15 6 30 14 T60 14 T90 14 T120 14' fill='none' stroke='%231E1712' stroke-opacity='.07' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 120px 28px,
    linear-gradient(180deg, var(--dv-mer-1, #8AADA7), var(--dv-mer-3, #6E9692)); }
:root.dv.dv-4x body.recueil .l-barre, :root.dv.dv-4x body.recueil .l-commandes { background: linear-gradient(180deg, var(--b2-papier), var(--b2-papier-f)); border-color: var(--b2-encre); border-width: 3px; }
:root.dv.dv-4x body.recueil .l-barre .l-titre { color: var(--b2-encre); font: 900 1.02rem/1.2 var(--b2-rond); }
:root.dv.dv-4x body.recueil .l-modes { border: 2.5px solid var(--b2-encre); background: #FBF4E2; }
:root.dv.dv-4x body.recueil .l-modes button, :root.dv.dv-4x body.recueil .l-modes a.l-mode-scene { min-height: 40px; color: var(--b2-encre); font: 800 .88rem/1 var(--b2-rond); }
:root.dv.dv-4x body.recueil .l-modes button[aria-pressed="true"] { background: var(--b2-brique); color: var(--b2-creme); box-shadow: inset 0 0 0 2px var(--b2-encre); }
:root.dv.dv-4x body.recueil .l-modes button[aria-pressed="true"] span { -webkit-text-stroke: 2px var(--b2-encre); paint-order: stroke fill; }
:root.dv.dv-4x body.recueil .pilule { min-height: 44px; border: 2.5px solid var(--b2-encre); background: #FBF4E2; color: var(--b2-encre); font-weight: 900; box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .l-jauge { height: 8px; border: 2px solid var(--b2-encre); background: var(--b2-papier-f); }
:root.dv.dv-4x body.recueil .l-jauge span { background: linear-gradient(180deg, var(--b2-brique) 0 60%, var(--b2-brique-f) 60.5%); border-radius: 0; }
:root.dv.dv-4x body.recueil .l-prog-texte { color: var(--b2-encre-2); font-weight: 800; }
:root.dv.dv-4x body.recueil .page.couverture { border: 3px solid var(--b2-encre); }
:root.dv.dv-4x body.recueil .fin-mot { color: var(--b2-encre); font: 900 2rem/1 var(--b2-titre); font-style: normal; font-synthesis: none; color: var(--b2-creme); -webkit-text-stroke: 2.5px var(--b2-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-brique-f); }
:root.dv.dv-4x body.recueil .fin-mot::before, :root.dv.dv-4x body.recueil .fin-mot::after { color: var(--b2-encre); -webkit-text-stroke: 0; text-shadow: none; }
:root.dv.dv-4x body.recueil .grand-coeur { border: 3px solid var(--b2-encre); background: #FBF4E2; box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .fe { border: 2.5px solid var(--b2-encre); background: #FBF4E2; color: var(--b2-encre); box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .fe-1 { background: linear-gradient(180deg, #DCE7DF, #FBF4E2); }
:root.dv.dv-4x body.recueil .fe-ic { border: 2px solid var(--b2-encre); background: var(--b2-papier-f); }
:root.dv.dv-4x body.recueil .fe-t, :root.dv.dv-4x body.recueil .fe i { color: var(--b2-brique-f); font-family: var(--b2-rond); font-weight: 900; }
:root.dv.dv-4x body.recueil .fe-tx b { font: 900 .95rem/1.2 var(--b2-rond); }
:root.dv.dv-4x body.recueil .fe-tx small { color: var(--b2-encre-2); }
:root.dv.dv-4x body.recueil .fin-trace { color: var(--b2-encre); }
:root.dv.dv-4x body.recueil .fin-trace .ft-ic { filter: drop-shadow(2px 2px 0 rgba(30, 23, 18, .5)); }
:root.dv.dv-4x body.recueil .fin-lieu { border: 2.5px solid var(--b2-encre); background: #FBF4E2; box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .fin-nav button { border: 2.5px solid var(--b2-encre); background: #FBF4E2; box-shadow: var(--b2-ombre-p); }
:root.dv.dv-4x body.recueil .coms .com { border: 2px solid rgba(30, 23, 18, .3); background: #FBF4E2; }

@media (prefers-reduced-motion: reduce) { :root.dv.dv-4x body.recueil .rc-ciel::after { animation: none; } }
html.mvt-reduit:root.dv.dv-4x body.recueil .rc-ciel::after { animation: none; }

/* =====================================================================================================================
   4. LA PAGE DES SCÈNES (scene.html, <html class="sc-30">) — la nuit du poème, en pellicule des années 30
   L'image (scenes/*.js) garde sa nuit ; tout autour devient papier crème, encre, laiton. Le texte reste crème sur la nuit.
   ===================================================================================================================== */
html.sc-30 { --fond: #120E0B; --texte: #F3E8CE; --argent: #D7C8A6; --brume: #BBAA88; --or: #E6C47E; --trait: rgba(243, 232, 206, .2); background: #120E0B; }
html.sc-30 body { background: #120E0B; }
html.sc-30 :focus-visible { outline-color: #E6C47E; }
/* le cadre de pellicule : un trait d'encre et un filet de laiton sous l'image (à droite sur grand écran) */
html.sc-30 .sc-fenetre { background: #120E0B; box-shadow: 0 3px 0 #000, 0 7px 0 rgba(214, 168, 75, .55); }
html.sc-30 .sc-fenetre::after { background: linear-gradient(to bottom, rgba(18, 14, 11, 0), var(--fond)); }
html.sc-30 .sc-prog { height: 4px; background: #D6A84B; }
@media (min-width: 900px) { html.sc-30 .sc-fenetre { box-shadow: 3px 0 0 #000, 7px 0 0 rgba(214, 168, 75, .55); } html.sc-30 .sc-fenetre::after { background: linear-gradient(to right, rgba(18, 14, 11, 0), var(--fond)); } }
@media (orientation: landscape) and (max-height: 520px) and (max-width: 899px) { html.sc-30 .sc-fenetre { box-shadow: 3px 0 0 #000, 7px 0 0 rgba(214, 168, 75, .55); } html.sc-30 .sc-fenetre::after { background: linear-gradient(to right, rgba(18, 14, 11, 0), var(--fond)); } }
/* les commandes : des médaillons de papier crème bordés d'encre (avant : du verre sombre) */
html.sc-30 .sc-barre a, html.sc-30 .sc-barre button { min-height: 46px; min-width: 46px; border: 2.5px solid var(--b2-encre); background: var(--b2-papier-c); color: var(--b2-encre);
  font: 900 .9rem/1 var(--b2-rond); box-shadow: 2px 3px 0 #000; -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .42s var(--b2-ressort); }
html.sc-30 .sc-barre a:active, html.sc-30 .sc-barre button:active { transform: translate(2px, 3px); box-shadow: 0 0 0 #000; transition-duration: .07s; }
html.sc-30 .sc-barre button[aria-pressed="true"] { background: var(--b2-or); color: var(--b2-encre); }
html.sc-30 .sc-barre .ec-bouton small, html.sc-30 .sc-barre .ec-bouton span { color: inherit; }
/* le carton de titre */
html.sc-30 .sc-sur { color: #E6C47E; opacity: 1; font: 900 .78rem/1 var(--b2-rond); letter-spacing: .2em; }
html.sc-30 .sc-tete h1 { padding: 0 8px 8px 0; font: 900 clamp(2.4rem, 11vw, 3.9rem)/1.02 var(--b2-titre); font-synthesis: none; letter-spacing: .01em; color: var(--b2-creme);
  -webkit-text-stroke: 3px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 var(--b2-brique-f), 6px 6px 0 #000; }
html.sc-30 .sc-tete .sc-auteur { color: var(--argent); }
html.sc-30 .sc-tete .sc-indice { color: var(--argent); font: 700 .9rem/1.35 var(--b2-rond); }
html.sc-30 .sc-tete .sc-indice i { background: linear-gradient(#E6C47E, transparent); width: 2px; }
/* le poème : crème sur la nuit (contraste ≥ 14:1) ; les paroles rapportées, plus chaudes ; le vers lu à voix haute, surligné (pas de lueur) */
html.sc-30 .sc-poeme { color: var(--texte); }
html.sc-30 .sc-strophe.dit .sc-v { color: #F1D9A8; }
html.sc-30 .sc-v.ec-ici { color: #FFF8EA; text-shadow: none; background: rgba(214, 168, 75, .28) !important; border-radius: 3px; box-shadow: 0 0 0 3px rgba(214, 168, 75, .28); }
/* la fin : « Fin » en lettres de cinéma, puis des boutons de papier et le bouton de brique */
html.sc-30 .sc-fin .sc-plume { filter: drop-shadow(2px 2px 0 #000); }
html.sc-30 .sc-fin .sc-sig { color: var(--argent); }
html.sc-30 .sc-fin a, html.sc-30 .sc-fin button { min-height: 50px; border: 2.5px solid var(--b2-encre); border-radius: 16px; background: var(--b2-papier-c); color: var(--b2-encre);
  font: 900 .98rem/1 var(--b2-rond); box-shadow: 2px 3px 0 #000; transition: transform .42s var(--b2-ressort); }
html.sc-30 .sc-fin a.fort { min-height: 56px; border: 3px solid var(--b2-encre); border-radius: 18px; color: var(--b2-creme); text-transform: uppercase; letter-spacing: .03em;
  background: linear-gradient(180deg, var(--b2-brique) 0%, var(--b2-brique) 63%, var(--b2-brique-f) 63.5%, var(--b2-brique-f) 100%);
  -webkit-text-stroke: 3px var(--b2-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--b2-encre); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 4px 5px 0 #000; }
html.sc-30 .sc-fin :is(a, button):active { transform: translate(2px, 3px) scale(.97); box-shadow: 0 0 0 #000; transition-duration: .07s; }
html.sc-30 .sc-note { color: var(--brume); font-family: var(--b2-rond); font-weight: 700; }
html.sc-30 .sc-vide { color: var(--argent); font-family: var(--b2-rond); font-weight: 700; }
html.sc-30 .sc-vide a { color: #E6C47E; }

/* =====================================================================================================================
   5. LE MONDE (monde.html) — SEULEMENT L'EN-TÊTE : une bande de papier crème (comme les autres pages), « ‹ » en médaillon,
   le nom à l'encre, l'exploration en étiquette de laiton ; la rangée Carte · Bestiaire · Bibliothèque · Sac · Exploration en
   onglets de papier (l'onglet choisi : médaillon crème, liseré bleu canard). La carte (monde2d.js) n'est pas touchée.
   Préfixe « #mo-app » : il passe devant maree/habillage-60.css (règles « :root[data-theme] … !important »).
   ===================================================================================================================== */
html body.mo-page #mo-app .mo-tete { background: linear-gradient(180deg, var(--b2-papier), var(--b2-papier-f)) !important; color: var(--b2-encre);
  border-bottom: 3px solid var(--b2-encre) !important; box-shadow: inset 0 -4px 0 rgba(95, 143, 150, .75) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body.mo-page #mo-app .mo-tete .mo-rond { width: 46px !important; height: 46px !important; min-width: 46px; border: 3px solid var(--b2-encre) !important; background: var(--b2-papier-c) !important;
  color: var(--b2-encre) !important; box-shadow: 2px 3px 0 var(--b2-encre) !important; font: 900 1.15rem/1 var(--b2-rond); transition: transform .42s var(--b2-ressort); }
html body.mo-page #mo-app .mo-tete .mo-rond:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--b2-encre) !important; transition-duration: .07s; }
html body.mo-page #mo-app .mo-tete { gap: .5rem; padding-left: .7rem; padding-right: .7rem; }
html body.mo-page #mo-app .mo-titre b { font: 900 1rem/1.15 var(--b2-rond) !important; color: var(--b2-encre); letter-spacing: -.005em; }
html body.mo-page #mo-app .mo-tete .nv-reglages { width: 44px; height: 44px; color: var(--b2-encre) !important; background: none; border: 0; }
html body.mo-page #mo-app .mo-tete .nv-reglages :is(svg, .mde-ic, .dv-ic) { color: var(--b2-encre); }
html body.mo-page #mo-app .mo-titre span, html body.mo-page #mo-app #mo-meteo { color: var(--b2-encre-2) !important; font: 800 13px/1.3 var(--b2-rond) !important; }
html body.mo-page #mo-app .mo-titre .mo-fil { color: var(--b2-canard-f); font: 900 12px/1.2 var(--b2-rond); }
html body.mo-page #mo-app .mo-pct { height: 40px; padding: 0 .6rem; border: 2.5px solid var(--b2-encre) !important; background: linear-gradient(180deg, #F2D99A 0 60%, var(--b2-or) 60.5%) !important; color: var(--b2-encre) !important;
  font: 900 .92rem/1 var(--b2-rond) !important; box-shadow: 2px 3px 0 var(--b2-encre); }
html body.mo-page #mo-app .mo-onglets { background: linear-gradient(180deg, #EAD7AF, #E2CB9C) !important; border-top: 0 !important; border-bottom: 3px solid var(--b2-encre); gap: 4px; padding: 6px 6px 7px; }
html body.mo-page #mo-app .mo-onglets button { min-height: 54px; color: var(--b2-encre-2) !important; font: 900 12.5px/1.1 var(--b2-rond) !important; border-radius: 14px; border: 2.5px solid transparent;
  transition: transform .42s var(--b2-ressort); }
html body.mo-page #mo-app .mo-onglets button span { opacity: 1; color: var(--b2-encre); }
html body.mo-page #mo-app .mo-onglets button span .mde-ic { stroke-width: 2.2; }
html body.mo-page #mo-app .mo-onglets button[aria-selected="true"] { color: var(--b2-encre) !important; background: var(--b2-papier-c) !important; border-color: var(--b2-encre);
  box-shadow: inset 0 -5px 0 rgba(95, 143, 150, .8), 2px 3px 0 var(--b2-encre); }
html body.mo-page #mo-app .mo-onglets button:active { transform: translate(1px, 2px) scale(.96); transition-duration: .07s; }
html body.mo-page #mo-app .mo-onglets button:focus-visible { outline: 3px solid var(--b2-encre); outline-offset: 1px; }
@media (min-width: 700px) {
  html body.mo-page #mo-app .mo-onglets { grid-template-columns: repeat(5, minmax(0, 168px)); justify-content: center; }
  html body.mo-page #mo-app .mo-onglets button { display: flex; align-items: center; justify-content: center; gap: 8px; }
}