/* Deepverse · l'habillage commun des pages existantes (atelier « identité Deepverse », 27/10)
   TECHNICOLOR MARIN (27/10, 13 h 45, décisions de Tristan : dessin animé des années 30 MARIN, esprit Cuphead / Bendy, en COULEURS
   passées, fond « mer aquarelle », cartes de papier crème, aucune couleur fluo) : feuille réécrite par Claude.
   Copies d'avant : carnet orig-da30/dv/habillage.css (années 30 « vieux film + abysses ») et orig-style30/dv/habillage.css.
   Règle simple partout : la MER (le fond) et le PAPIER (cartes, barres, feuilles) portent un texte à l'ENCRE ; les TITRES sont
   crème bordés d'encre (lettres de cinéma) ; les BOUTONS et TUILES de couleur passée portent un mot crème bordé d'encre.
   À charger APRÈS les feuilles de la page (e5/conte.css, style.css…) et après dv/deepverse.css, avec dv/deepverse.js
   (ou <html class="dv">). Il ne change aucun balisage.
   1. les jetons de e5/conte.css ; 2. leurs pièces communes ; 3. Jouer, Lire, Monde, Moi ; 4. les pages « 4.x » ; 5. pièces de pages ;
   6. les titres de cinéma et le relief. Les poèmes gardent Newsreader ; la lecture d'un poème garde sa page de papier. */

/* ---------- 1. les jetons ---------- */
html.dv {
  --nacre: #6E9692; --sable: #F4E7C8; --papier: #F4E7C8; --ecume: rgba(95, 143, 150, .16);
  --encre: #1E1712; --texte: #1E1712; --texte-2: #2A2117; --encre-2: #2A2117;
  --lagon-f: #2A2117; --lien: #2A2117; --lagon-c: rgba(95, 143, 150, .18); --abysse-c: rgba(95, 143, 150, .16);
  --trait: rgba(30, 23, 18, .24); --voile: rgba(30, 23, 18, .5);
  --ombre: 0 14px 30px -14px rgba(30, 23, 18, .45); --ombre-haute: 0 -10px 30px -12px rgba(30, 23, 18, .4);
  --porte: var(--teinte); --porte-c: color-mix(in srgb, var(--teinte) 20%, transparent);
  --f-ui: var(--dv-rond); --f-titre: var(--dv-rond);
  --or-f: #A47A2C; --or-c: rgba(214, 168, 75, .2); --corail-f: #A8604F;
}
html.dv body { background: transparent !important; color: var(--dv-texte); }
html.dv body.a-portes, html.dv body.dv-fond-abysse { background-image: none; }
html.dv::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  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(150% 95% at 50% 42%, transparent 58%, rgba(60, 40, 18, .26) 100%),
    radial-gradient(55% 28% at 18% 16%, rgba(244, 231, 200, .32) 0%, transparent 72%),
    radial-gradient(48% 26% at 86% 52%, rgba(244, 231, 200, .2) 0%, transparent 72%),
    radial-gradient(60% 30% at 30% 82%, rgba(30, 50, 48, .12) 0%, transparent 72%),
    linear-gradient(180deg, var(--dv-mer-1) 0%, var(--dv-mer-2) 40%, var(--dv-mer-3) 75%, var(--dv-mer-4) 100%); }
html.dv :focus-visible { outline-color: var(--dv-encre); }

/* ---------- 2. les pièces communes ---------- */
/* la barre du haut : une bande de papier crème, filet d'encre dessous ; ‹ devient un gros médaillon rond */
html.dv .barre, html.dv .barre.roulee { background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; border-bottom: 3px solid var(--dv-encre) !important; min-height: calc(64px + var(--haut)); color: var(--dv-encre); }
html.dv .retour { min-height: 56px; gap: 6px; padding: 0 14px 0 6px; color: var(--dv-encre); font: 900 16px/1 var(--dv-rond); }
html.dv .retour svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; border: 3px solid var(--dv-encre); background: #FBF4E2; box-shadow: 2px 3px 0 var(--dv-encre); color: var(--dv-encre); }
html.dv .retour:active { background: none; transform: translateY(2px); }
html.dv .barre-titre { color: var(--dv-encre); font: 900 17px/1.2 var(--dv-rond); }
html.dv .barre .nv-reglages { width: 56px; height: 56px; color: var(--dv-encre); }
html.dv .barre .nv-reglages svg { width: 38px; height: 38px; }
html.dv .barre .nv-reglages:active { background: rgba(30, 23, 18, .08); }
/* les titres (la couleur et le contour : § 6) */
html.dv .page-tete h1, html.dv .p-tete h1 { font: 900 clamp(34px, 10vw, 46px)/1 var(--dv-rond) !important; letter-spacing: -.01em; }
html.dv .chapo, html.dv .p-tete p { font: 800 16px/1.35 var(--dv-rond) !important; color: var(--dv-texte-2); font-style: normal !important; }
html.dv .surtitre { font: 900 12.5px/1.2 var(--dv-rond); letter-spacing: .14em; color: var(--dv-encre); }
html.dv .section-titre { font: 900 21px/1.15 var(--dv-rond) !important; text-transform: uppercase; letter-spacing: .03em; }
html.dv .filet { display: none; }
/* les boutons : couleur passée pleine + bande d'ombre, mot crème bordé d'encre */
html.dv .btn { min-height: 56px; border: 3px solid var(--dv-encre); border-radius: 18px; color: var(--dv-creme); font: 900 18px/1 var(--dv-rond); text-transform: uppercase; letter-spacing: .02em;
  -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre);
  background: linear-gradient(180deg, var(--teinte) 0%, var(--teinte) 63%, var(--teinte-f) 63.5%, var(--teinte-f) 100%);
  box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 4px 5px 0 var(--dv-encre); }
html.dv .btn:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 1px 1px 0 var(--dv-encre); }
html.dv .btn-doux, html.dv .lien-doux { min-height: 56px; border-radius: 16px; border: 2.5px solid var(--dv-encre); background: #FBF4E2; color: var(--dv-encre); font: 800 16px/1.1 var(--dv-rond); -webkit-text-stroke: 0; text-shadow: none; }
/* la feuille du bas, la marque d'une découverte, le toast : du papier */
html.dv .feuille { background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)); color: var(--dv-encre); border-top: 3px solid var(--dv-encre); box-shadow: inset 0 4px 0 color-mix(in srgb, var(--teinte) 70%, transparent); }
html.dv .feuille h2 { font: 900 24px/1.15 var(--dv-rond); }
html.dv .feuille p { color: var(--dv-encre-2); }
html.dv .feuille-fond { background: rgba(30, 23, 18, .45); }
html.dv .decouverte { background: #FBF4E2; color: var(--dv-encre); border: 3px solid var(--dv-encre); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--dv-jaune) 80%, var(--dv-encre)), var(--dv-ombre-p); }
html.dv .decouverte span { color: var(--dv-encre-2); }
/* la marque « EN » et le lien « aller au contenu » de nav.js restent lisibles */
html.dv .signature { color: var(--dv-texte-3); font-family: var(--dv-rond); }

/* ---------- 3a. Jouer ---------- */
html.dv body.page-prof .abysse { display: none; }
html.dv body.page-prof #mer { opacity: .18 !important; }
html.dv .page-prof .p-tete { padding: 4px 0 14px; }
/* « ta prochaine plongée » : une grande carte de papier au cadre de laiton */
html.dv .plongee.rapide { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px; margin-bottom: 8px; border-radius: 26px; color: var(--dv-encre);
  background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; border: 4px solid var(--dv-encre) !important;
  box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 7px var(--dv-jaune), 6px 7px 0 var(--dv-encre) !important; }
html.dv .plongee.rapide::before { display: none; }
html.dv .plongee.rapide .surtitre { color: var(--dv-jaune-f); }
html.dv .plongee.rapide h2 { margin: 2px 0; font: 900 28px/1.05 var(--dv-rond) !important; }
html.dv .plongee.rapide .pl-ou { color: var(--dv-encre-2); font: 700 15px/1.3 var(--dv-rond); }
html.dv .plongee.rapide .pl-ou b { color: var(--dv-encre); }
html.dv .plongee.rapide .adv { grid-row: 1; grid-column: 2; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--dv-encre); background: #FBF4E2; box-shadow: 0 0 0 4px var(--dv-jaune), 3px 4px 0 4px var(--dv-encre); overflow: hidden; }
html.dv .plongee.rapide .adv img { width: 100%; height: 100%; object-fit: cover; }
html.dv .rapide .btn#plonger { grid-column: 1 / -1; grid-row: 2; order: 0; width: 100%; min-height: 76px; border-width: 4px; border-radius: 22px; font-size: clamp(22px, 6.8vw, 30px); white-space: nowrap; gap: 10px;
  background: linear-gradient(180deg, var(--dv-jaune) 0%, var(--dv-jaune) 64%, var(--dv-jaune-f) 64.5%, var(--dv-jaune-f) 100%) !important; color: var(--dv-creme) !important; -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-violet-f), 4px 4px 0 var(--dv-encre);
  font-family: var(--dv-titre) !important; font-synthesis: none; box-shadow: inset 0 0 0 3px rgba(250, 240, 214, .3), 5px 6px 0 var(--dv-encre) !important; }
html.dv .rapide .btn#plonger .pr-ic { flex: none; width: 36px; height: 36px; color: var(--dv-creme); stroke: var(--dv-encre); stroke-width: 1.6px; paint-order: stroke fill; }
html.dv .moment-t, html.dv .tous h2, html.dv .aussi-t { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px !important; font: 900 22px/1.1 var(--dv-rond) !important; text-transform: uppercase; letter-spacing: .03em; }
html.dv .moment-t::before, html.dv .tous h2::before, html.dv .aussi-t::before { content: ""; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: var(--teinte); border: 2.5px solid var(--dv-encre); box-shadow: 2px 2px 0 var(--dv-encre); flex: none; }
html.dv .tous-note { color: var(--dv-texte-2); font: 800 15px/1.3 var(--dv-rond); }
/* « du moment » : Les Îles perdues en grande carte de papier au cadre d'algue, puis les cartes du moment */
html.dv a.iles { border-radius: 24px !important; border: 3px solid var(--dv-encre) !important; color: var(--dv-encre) !important;
  background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important;
  box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 7px var(--dv-vert), 4px 5px 0 var(--dv-encre) !important; }
html.dv a.iles::before, html.dv a.iles::after { display: none !important; }
html.dv a.iles strong { font: 900 26px/1.05 var(--dv-rond) !important; }
html.dv a.iles .ch { color: var(--dv-encre-2) !important; font: 700 14.5px/1.35 var(--dv-rond) !important; font-style: normal !important; }
html.dv a.iles .neuf { background: var(--dv-violet) !important; color: var(--dv-creme) !important; border: 2.5px solid var(--dv-encre); font: 900 12px/1 var(--dv-rond) !important; -webkit-text-stroke: 2px var(--dv-encre); paint-order: stroke fill; }
html.dv a.iles .go { min-height: 52px; border: 3px solid var(--dv-encre) !important; border-radius: 16px !important; background: linear-gradient(180deg, var(--dv-vert) 0%, var(--dv-vert) 63%, var(--dv-vert-f) 63.5%, var(--dv-vert-f) 100%) !important; color: var(--dv-creme) !important; -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre); font: 900 16px/1 var(--dv-rond) !important; box-shadow: 3px 4px 0 var(--dv-encre) !important; }
html.dv .mo-carte { border-radius: 22px !important; border: 3px solid var(--dv-encre) !important; color: var(--dv-encre) !important; background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important;
  box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 6px var(--dv-violet), 4px 5px 0 var(--dv-encre) !important; }
html.dv .mo-carte.defi { box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 6px var(--dv-rose), 4px 5px 0 var(--dv-encre) !important; }
html.dv .mo-carte b { font: 900 18px/1.1 var(--dv-rond) !important; color: var(--dv-encre) !important; }
html.dv .mo-carte small { color: var(--dv-encre-2) !important; font-family: var(--dv-rond) !important; font-weight: 700 !important; }
/* tous les jeux : des vignettes de papier, cadre de couleur passée, gros contour d'encre, relief */
html.dv .grille-jeux .tuile { border-radius: 22px !important; border: 3px solid var(--dv-encre) !important; color: var(--dv-encre) !important; min-height: 116px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, #5F8F96) 30%, var(--dv-papier)) 0%, var(--dv-papier) 55%, var(--dv-papier-f) 100%) !important;
  box-shadow: inset 0 0 0 3px var(--dv-papier), inset 0 0 0 6px var(--c, #5F8F96), 4px 5px 0 var(--dv-encre) !important; }
html.dv .grille-jeux li:nth-child(5n+1) .tuile { --c: #D6A84B; } html.dv .grille-jeux li:nth-child(5n+2) .tuile { --c: #5F8F96; } html.dv .grille-jeux li:nth-child(5n+3) .tuile { --c: #D58D78; }
html.dv .grille-jeux li:nth-child(5n+4) .tuile { --c: #7F8F50; } html.dv .grille-jeux li:nth-child(5n+5) .tuile { --c: #C0604A; }
html.dv .grille-jeux .tuile:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px var(--dv-papier), inset 0 0 0 6px var(--c, #5F8F96), 1px 1px 0 var(--dv-encre) !important; }
html.dv .grille-jeux .tuile b { font: 900 16.5px/1.1 var(--dv-rond) !important; color: var(--dv-encre) !important; text-shadow: none; }
html.dv .grille-jeux .tuile small { color: var(--dv-encre-2) !important; font: 800 12.5px/1.2 var(--dv-rond) !important; }
html.dv .grille-jeux .tuile .ic { filter: none; }
html.dv .rappel-compte { border-radius: 22px !important; border: 3px solid var(--dv-encre) !important; background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; color: var(--dv-encre) !important; box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 7px var(--dv-rose), 4px 5px 0 var(--dv-encre) !important; }
html.dv .rappel-compte .rc-txt b { font: 900 18px/1.1 var(--dv-rond) !important; color: var(--dv-encre) !important; }
html.dv .rappel-compte .rc-txt small { color: var(--dv-encre-2) !important; }
html.dv .rappel-compte .rc-go { min-height: 56px; border: 3px solid var(--dv-encre) !important; border-radius: 16px !important; background: linear-gradient(180deg, var(--dv-rose) 0%, var(--dv-rose) 63%, var(--dv-rose-f) 63.5%, var(--dv-rose-f) 100%) !important; color: var(--dv-creme) !important; font: 900 16px/1 var(--dv-rond) !important; -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre); box-shadow: 3px 4px 0 var(--dv-encre) !important; }
html.dv .rappel-compte .rc-non { min-height: 56px; color: var(--dv-encre) !important; }
html.dv .autres, html.dv .autres.aussi { min-height: 56px; border-radius: 18px !important; border: 2.5px solid var(--dv-encre) !important; background: #FBF4E2 !important; color: var(--dv-encre) !important; font: 800 16px/1.2 var(--dv-rond) !important; }

/* ---------- 3b. Lire ---------- */
html.dv body.page-lire #mer { opacity: .16 !important; }
html.dv body.page-lire .eau-haut { display: none; }
html.dv body.page-lire .barre:not(.roulee) { background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; }
html.dv #vue-liste .une { border-radius: 26px; padding: 0 0 16px; overflow: hidden; border: 3px solid var(--dv-encre); background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)); color: var(--dv-encre);
  box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 7px var(--dv-violet), 5px 6px 0 var(--dv-encre); }
html.dv #vue-liste .une .planche { -webkit-mask: none; mask: none; border-radius: 22px 22px 0 0; }
html.dv #vue-liste .une-corps { padding: 0 16px; }
html.dv #vue-liste .une-titre { font: 900 26px/1.1 var(--dv-rond) !important; }
html.dv #vue-liste .une-accroche { font: italic 400 17px/1.4 var(--dv-poeme); color: var(--dv-encre) !important; }
html.dv #vue-liste .meta { color: var(--dv-encre-2); font-family: var(--dv-rond); font-weight: 700; }
html.dv #vue-liste .une .btn { width: 100%; }
html.dv #vue-liste .fiche { min-height: 76px; border-radius: 20px; padding: 8px; background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)); color: var(--dv-encre); }
html.dv #vue-liste .fiche b { font: 900 18px/1.15 var(--dv-rond) !important; color: var(--dv-encre); }
html.dv #vue-liste .fiche small { color: var(--dv-encre-2); font-family: var(--dv-rond); font-weight: 700; }
html.dv #vue-liste .fiche .planche { -webkit-mask: none; mask: none; border-radius: 14px; overflow: hidden; }
html.dv #vue-liste .liste li + li { margin-top: 10px; }
html.dv #vue-liste .ailleurs a { min-height: 64px; border-radius: 18px; padding: 10px 14px; background: #FBF4E2; color: var(--dv-encre); }
html.dv #vue-liste .ailleurs li + li { margin-top: 8px; border: 0; }
html.dv #vue-liste .ailleurs b { font: 900 17px/1.15 var(--dv-rond); color: var(--dv-encre); }
html.dv #vue-liste .ailleurs small { color: var(--dv-encre-2); font-family: var(--dv-rond); font-weight: 700; }
html.dv #vue-liste .attente i { background: rgba(30, 23, 18, .12); }
/* la lecture d'un poème : sa page de papier (crème, encre), dans le nouveau cadre */
html.dv .lecture { --encre: #1E1712; --texte: #1E1712; --texte-2: #3F3224; --encre-2: #3F3224; --papier: #FBF4E2; --nacre: #F4E7C8; --trait: rgba(30, 23, 18, .14); --lien: #8C412E; --lagon-f: #8C412E; --f-titre: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --f-ui: 'Instrument Sans', -apple-system, system-ui, sans-serif; color: var(--encre); }
html.dv.lecture-on body { background: #F4E7C8 !important; }
html.dv.en-scene.lecture-on body { background: transparent !important; }
html.dv.lecture-on .barre { background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; }
html.dv .lecture .l-papier { border-top: 3px solid var(--dv-violet); }
/* le poème du jour, en tête de Lire (une .dv-carte) */
.dv-pdj { --c: var(--dv-violet); display: grid; gap: 10px; margin: 0 0 18px; padding: 16px; border-radius: 24px; text-decoration: none; }
.dv-pdj-tete { display: flex; align-items: center; gap: 10px; }
.dv-pdj-tete .dv-ic { width: 46px; height: 46px; }
.dv-pdj-tete span { display: grid; }
.dv-pdj-tete small { font: 900 12px/1.1 var(--dv-rond); letter-spacing: .14em; text-transform: uppercase; color: var(--dv-violet-f); }
.dv-pdj-tete b { font: 900 20px/1.1 var(--dv-rond); color: var(--dv-encre); }
.dv-pdj blockquote { margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--dv-violet); font: italic 400 19px/1.45 var(--dv-poeme); color: var(--dv-encre); white-space: pre-line; }
.dv-pdj .dv-btn { justify-self: start; }

/* ---------- 3c. Monde ---------- */
html.dv .ex-monde { border-radius: 26px; border: 3px solid var(--dv-encre); background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)); color: var(--dv-encre);
  box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 7px var(--dv-cyan), 5px 6px 0 var(--dv-encre); }
html.dv .ex-monde { align-content: start; min-height: 0; }
html.dv .ex-monde > svg { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 360 / 250; }
html.dv .ex-monde-txt { margin-top: -26px; padding-top: 0; background: none; }
html.dv .ex-monde-txt small { color: var(--dv-cyan-f); font: 900 12.5px/1.2 var(--dv-rond); }
html.dv .ex-monde-txt b { font: 900 clamp(30px, 9vw, 40px)/1.02 var(--dv-rond) !important; }
html.dv .ex-monde-txt .go { min-height: 56px; border: 3px solid var(--dv-encre); border-radius: 18px; background: linear-gradient(180deg, var(--dv-cyan) 0%, var(--dv-cyan) 63%, var(--dv-cyan-f) 63.5%, var(--dv-cyan-f) 100%); color: var(--dv-creme); -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre); font: 900 18px/1 var(--dv-rond); text-transform: uppercase; box-shadow: 3px 4px 0 var(--dv-encre); }
html.dv .ex-grille { gap: 12px; }
html.dv .ex-lieu { --c: var(--dv-cyan); min-height: 136px; border-radius: 22px; border: 3px solid var(--dv-encre); color: var(--dv-encre); padding: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, var(--dv-papier)) 0%, var(--dv-papier) 55%, var(--dv-papier-f) 100%);
  box-shadow: inset 0 0 0 3px var(--dv-papier), inset 0 0 0 6px var(--c), 4px 5px 0 var(--dv-encre); }
html.dv .ex-lieu:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px var(--dv-papier), inset 0 0 0 6px var(--c), 1px 1px 0 var(--dv-encre); }
html.dv .ex-lieu .ic { width: 64px; height: 64px; background: none !important; box-shadow: none !important; }
html.dv .ex-lieu .ic .dv-ic { width: 58px; height: 58px; }
html.dv .ex-lieu b { font: 900 20px/1.1 var(--dv-rond) !important; color: var(--dv-encre); text-shadow: none; }
html.dv .ex-lieu small { color: var(--dv-encre-2); font: 800 13.5px/1.25 var(--dv-rond); }
html.dv .ex-lieu[href^="bouteilles"] { --c: #7F8F50; } html.dv .ex-lieu[href^="ocean-des-mots"] { --c: #5F8F96; } html.dv .ex-lieu[href^="tresor"] { --c: #D6A84B; }
html.dv .ex-lieu[href^="iles"] { --c: #C8664A; } html.dv .ex-lieu.cache { --c: #A1998A; } html.dv .ex-lieu.trouve { --c: #D6A84B; }
html.dv .ex-lieu.maison { --c: #D58D78; padding: 0 14px 0 0; }
html.dv .ex-lieu.maison .dv-duo { display: flex; align-items: flex-end; justify-content: center; gap: 0; height: 150px; padding: 10px 0 0 8px; }
html.dv .ex-lieu.maison .dv-duo .dv-mascotte-p { width: auto; height: 100%; }
html.dv .ex-lieu.maison .dv-duo .dv-mascotte-p + .dv-mascotte-p { height: 92%; margin-left: -10px; }
html.dv .ex-lieu.maison .dv-duo img { width: auto; height: 100%; }
html.dv .ex-lieu.cache .ic .dv-ic { opacity: .9; }

/* ---------- 3d. Moi ---------- */
html.dv body.dv-moi { background: transparent !important; }
html.dv body.dv-moi .entete { background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; }
.dv-moi-hero { position: relative; display: grid; justify-items: center; gap: 4px; margin: 4px 0 10px; text-align: center; }
.dv-moi-hero .dv-moi-scene { position: relative; width: min(64vw, 260px); height: min(66vw, 280px); }
.dv-moi-hero .dv-moi-nom { margin: 0; font: 900 clamp(28px, 8.6vw, 38px)/1.05 var(--dv-rond); overflow-wrap: anywhere; }
.dv-moi-hero .dv-moi-sous { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font: 800 15px/1.2 var(--dv-rond); color: var(--dv-texte-2); }
html.dv .mo-profil, html.dv .mo-compte-carte { border-radius: 24px !important; border: 3px solid var(--dv-encre) !important; color: var(--dv-encre) !important;
  background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 7px var(--dv-rose), 4px 5px 0 var(--dv-encre) !important;
  --dv-texte: #1E1712; --dv-texte-2: #3F3224; --dv-texte-3: #5E4D3A; }
html.dv .mo-compte-carte h2 { font: 900 22px/1.1 var(--dv-rond) !important; }
html.dv .mo-compte-carte .mcc-ic { color: var(--dv-encre) !important; background: var(--dv-papier-f) !important; box-shadow: inset 0 0 0 2.5px var(--dv-encre) !important; }
html.dv .mo-compte-carte p { color: var(--dv-encre-2) !important; font-family: var(--dv-rond) !important; font-weight: 700 !important; }
html.dv .mo-compte-carte #mo-creer { min-height: 64px !important; border: 3px solid var(--dv-encre) !important; border-radius: 18px !important; background: linear-gradient(180deg, var(--dv-rose) 0%, var(--dv-rose) 63%, var(--dv-rose-f) 63.5%, var(--dv-rose-f) 100%) !important; color: var(--dv-creme) !important;
  font: 900 20px/1 var(--dv-rond) !important; text-transform: uppercase; -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 4px 5px 0 var(--dv-encre) !important; }
html.dv .mo-compte-carte #mo-connexion { min-height: 56px !important; color: var(--dv-encre) !important; font: 800 16px/1.2 var(--dv-rond) !important; }
html.dv .mo-tuile { border-radius: 22px !important; border: 3px solid var(--dv-encre) !important; color: var(--dv-encre) !important; min-height: 96px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, #D58D78) 28%, var(--dv-papier)) 0%, var(--dv-papier) 55%, var(--dv-papier-f) 100%) !important;
  box-shadow: inset 0 0 0 3px var(--dv-papier), inset 0 0 0 6px var(--c, #D58D78), 4px 5px 0 var(--dv-encre) !important; }
html.dv .mo-tuile b { font: 900 17px/1.1 var(--dv-rond) !important; color: var(--dv-encre) !important; text-shadow: none; }
html.dv .mo-tuile small { color: var(--dv-encre-2) !important; font-family: var(--dv-rond) !important; font-weight: 700 !important; }
html.dv .mo-tuile.t-tro { --c: #D6A84B; } html.dv .mo-tuile.t-car { --c: #C0604A; } html.dv .mo-tuile.t-plo { --c: #5F8F96; } html.dv .mo-tuile.t-cla { --c: #C8664A; }
html.dv .mo-tuile.t-reg { --c: #A1998A; } html.dv .mo-tuile.t-arc { --c: #7F8F50; } html.dv .mo-tuile.t-ecrire { --c: #7F8F50; }
html.dv .mo-tuile .mo-ic .dv-ic { width: 46px; height: 46px; }
html.dv .mo-nom { font-family: var(--dv-rond) !important; font-weight: 900 !important; }
/* le bas de la carte de profil (27/10, 14 h 55) : la vitrine « Boss vaincus » devient un panneau d'encre de mer (texte crème),
   le titre, le niveau et les compteurs passent à l'encre sur le papier ; les sceaux des boss en couleurs passées */
html.dv .mo-vitrine { background: linear-gradient(180deg, #3E5F5E, #2E4749) !important; border: 2.5px solid var(--dv-encre) !important; border-radius: 16px !important;
  box-shadow: inset 0 0 0 2px rgba(244, 233, 207, .12), 3px 4px 0 var(--dv-encre) !important; color: #F4E9CF !important; }
html.dv .mo-v-tete { color: #D6A84B !important; font-family: var(--dv-rond) !important; font-weight: 900 !important; }
html.dv .mo-v-tete small { color: #F4E9CF !important; font-family: var(--dv-rond) !important; }
html.dv .mo-v-tete i { color: #E8B8A6 !important; font-family: var(--dv-rond) !important; }
html.dv .mo-fait { background: rgba(244, 233, 207, .08) !important; box-shadow: inset 0 0 0 1.5px rgba(244, 233, 207, .2) !important; }
html.dv .mo-fait small { color: #CFE0DC !important; font-family: var(--dv-rond) !important; }
html.dv .mo-fait b { color: #F4E9CF !important; font-family: var(--dv-rond) !important; }
html.dv .mo-fait.vide b { color: #CFE0DC !important; }
html.dv .mo-fait.leg { background: rgba(214, 168, 75, .16) !important; box-shadow: inset 0 0 0 1.5px rgba(214, 168, 75, .6) !important; }
html.dv .mo-fait.leg small { color: #E6C47E !important; }
html.dv .mo-fait.myt { background: rgba(192, 96, 74, .22) !important; box-shadow: inset 0 0 0 1.5px rgba(214, 168, 75, .7) !important; }
html.dv .mo-fait.myt small { color: #E8B8A6 !important; }
html.dv .mo-titre .sans { color: var(--dv-encre) !important; border: 2px dashed rgba(30, 23, 18, .5) !important; font-family: var(--dv-rond) !important; font-weight: 800 !important; }
html.dv .mo-titre .crayon { background: var(--dv-papier-f) !important; box-shadow: inset 0 0 0 2px var(--dv-encre) !important; color: var(--dv-encre); }
html.dv .mo-niv, html.dv .mo-niv small { color: var(--dv-encre-2) !important; font-family: var(--dv-rond) !important; }
html.dv .mo-niv b { color: var(--dv-encre) !important; }
html.dv .mo-niv .bar { background: var(--dv-papier-f) !important; box-shadow: inset 0 0 0 2px var(--dv-encre) !important; }
html.dv .mo-niv .bar i { background: linear-gradient(180deg, #D6A84B 0 60%, #A47A2C 60.5%) !important; box-shadow: none !important; }
html.dv .mo-stats a { background: var(--dv-papier-f) !important; border: 2px solid var(--dv-encre) !important; color: var(--dv-encre) !important; }
html.dv .mo-stats b em, html.dv .mo-stats small { color: var(--dv-encre-2) !important; font-family: var(--dv-rond) !important; }
html.dv .ex-sceau.vaincu.t-rare { background: radial-gradient(circle at 35% 28%, #CFE0DC, #5F8F96 62%, #2E4749) !important; box-shadow: 0 0 0 1.5px rgba(244, 233, 207, .7) !important; }
html.dv .ex-sceau.vaincu.t-legendaire { color: #1E1712 !important; background: radial-gradient(circle at 35% 28%, #F4E9CF, #D6A84B 55%, #8C6420) !important; box-shadow: 0 0 0 1.5px #F1E2BF !important; }
html.dv .ex-sceau.vaincu.t-mythe { color: #D6A84B !important; background: radial-gradient(circle at 50% 120%, #C0604A, #3A1A12 58%, #1E1712) !important; box-shadow: 0 0 0 1.5px #D6A84B !important; }
html.dv .ex-sceau.vu { color: rgba(244, 233, 207, .62) !important; background: rgba(244, 233, 207, .07) !important; box-shadow: inset 0 0 0 1.5px rgba(244, 233, 207, .32) !important; }
html.dv .ex-sceau.ombre { color: rgba(244, 233, 207, .42) !important; background: rgba(30, 23, 18, .2) !important; box-shadow: inset 0 0 0 1.5px rgba(244, 233, 207, .2) !important; }
html.dv .ex-sceau > i { background: #7F8F50 !important; color: #F4E9CF !important; }

@media (prefers-reduced-motion: reduce) { html.dv .btn, html.dv .ex-lieu, html.dv .grille-jeux .tuile { transition: none; } }

/* Moi : l'en-tête des anciennes pages, le nom une seule fois (sous le plongeur), les boutons */
html.dv body.dv-moi .entete .marque, html.dv body.dv-moi .entete .marque .nv-marque, html.dv body.dv-moi .entete .marque b, html.dv body.dv-moi .repere b { font-family: var(--dv-rond) !important; font-weight: 900 !important; font-style: normal !important; color: var(--dv-encre); }
html.dv body.dv-moi .entete .dv-marque-ic { width: 36px; height: 36px; flex: none; filter: none; }
html.dv body.dv-moi .repere small, html.dv body.dv-moi .marque .nv-esp { color: var(--dv-rose-f) !important; font-family: var(--dv-rond) !important; }
html.dv body.dv-moi .mo-id .mo-nom { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.dv body.dv-moi .mde-btn { min-height: 56px; border: 3px solid var(--dv-encre) !important; border-radius: 16px !important; background: linear-gradient(180deg, var(--dv-rose) 0%, var(--dv-rose) 63%, var(--dv-rose-f) 63.5%, var(--dv-rose-f) 100%) !important; color: var(--dv-creme) !important; font: 900 16px/1 var(--dv-rond) !important; -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre); box-shadow: 3px 4px 0 var(--dv-encre) !important; }
html.dv body.dv-moi .mo-vide p { font-family: var(--dv-rond) !important; font-style: normal !important; font-weight: 700; color: var(--dv-texte-2) !important; }
html.dv.contraste { --texte-2: #120D09; --encre-2: #120D09; --trait: rgba(0, 0, 0, .6); }
html.dv.contraste .lecture { --texte-2: #120D09; --encre-2: #120D09; --texte: #000; --encre: #000; --trait: rgba(0, 0, 0, .55); }

/* =====================================================================================================================
   4. Les autres pages (« 4.x » : style.css, .entete, .mur ; <html class="dv dv-4x">) dans la mer aquarelle, sans toucher leur balisage.
   Spécificité : « :root.dv.dv-4x » (0,3,0) passe devant « :root[data-theme="dark"] » (0,2,0) des feuilles 6.0.
   ===================================================================================================================== */
/* ---------- 4a. les titres, partout ---------- */
html.dv :is(h1, h2, h3):not(.lecture *):not(.l-papier *) { font-family: var(--dv-rond) !important; font-style: normal !important; }
html.dv h1:not(.lecture *):not(.l-papier *) { font-weight: 900 !important; letter-spacing: -.01em; }
html.dv :is(h2, h3):not(.lecture *):not(.l-papier *) { font-weight: 800 !important; letter-spacing: 0; }
html.dv h1 em, html.dv h2 em { font-style: normal; color: var(--teinte); }
html.dv #vue-liste .signature > svg { display: none; }

/* ---------- 4b. les jetons des pages 4.x (les pages calmes : la mer claire, le papier, l'encre) ---------- */
:root.dv.dv-4x, :root.dv.dv-4x[data-theme] {
  --fond: #6E9692; --surface: #F4E7C8; --papier: #F4E7C8; --encre: #1E1712; --brume: #2A2117; --trait: rgba(30, 23, 18, .24);
  --rose: var(--teinte-f); --rose-voile: color-mix(in srgb, var(--teinte) 18%, transparent); --sur-rose: #F1E2BF; --heure: #A47A2C; --plume: var(--teinte-f);
  --ombre: 0 1px 2px rgba(30, 23, 18, .3), 0 16px 34px -16px rgba(30, 23, 18, .5);
  --f-titre: var(--dv-rond); --f-ui: var(--dv-rond);
  --s-fond: #6E9692; --s-carte: #F4E7C8; --s-carte-2: #EAD7AF; --s-txt: #1E1712; --s-txt-2: #2A2117;
  --s-trait: rgba(30, 23, 18, .22); --s-trait-fort: rgba(30, 23, 18, .42);
  --s-action: var(--teinte); --s-action-2: var(--teinte-f); --s-sur-action: #1E1712; --s-action-voile: color-mix(in srgb, var(--teinte) 18%, transparent);
  --s-or: #A47A2C; --s-or-fond: rgba(214, 168, 75, .2); --s-focus: #1E1712; --s-porte: var(--teinte); --mde-nuit: #6E9692;
  --s-f-titre: var(--dv-rond); --s-f-ui: var(--dv-rond);
  color-scheme: light; background: var(--dv-mer-3);
}
:root.dv.dv-4x body { background: transparent !important; color: var(--dv-texte); font-family: var(--dv-rond); }
/* les décors clairs des anciennes pages (bandeaux, voiles de papier) : discrets sur la mer */
:root.dv.dv-4x div.decor:not(.decor-monde) { opacity: .35; }

/* ---------- 4c. l'en-tête : une bande de papier, « ‹ » en médaillon ---------- */
:root.dv.dv-4x .entete, :root.dv.dv-4x .mo-tete { background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; }
:root.dv.dv-4x .marque, :root.dv.dv-4x .marque #marque-txt, :root.dv.dv-4x .entete .marque span, :root.dv.dv-4x .marque .nv-marque b, :root.dv.dv-4x .repere b { font-family: var(--dv-rond) !important; font-weight: 900 !important; font-style: normal !important; color: var(--dv-encre); letter-spacing: 0; }
:root.dv.dv-4x .repere b { font-size: 17px !important; }
:root.dv.dv-4x .repere small, :root.dv.dv-4x .marque .nv-esp { color: var(--teinte-f) !important; font-family: var(--dv-rond) !important; font-weight: 900 !important; }
:root.dv.dv-4x .marque .marque-ic { visibility: visible !important; width: 36px !important; height: 36px !important; flex: none; filter: none; }
:root.dv.dv-4x .marque:has(.marque-ic)::before { content: none !important; display: none !important; -webkit-mask: none !important; mask: none !important; }
:root.dv.dv-4x .marque:has(.marque-ic) { gap: 8px; }
:root.dv.dv-4x .repere .rp-ret, :root.dv.dv-4x .mo-rond { width: 44px !important; height: 44px !important; }
:root.dv.dv-4x .repere .rp-ret svg { width: 22px; height: 22px; stroke-width: 3; }
html.dv .nv-reglages.nv-entete, html.dv .nv-reglages.nv-flottant { width: 48px; height: 48px; color: var(--dv-encre); }
html.dv .nv-reglages .dv-ic { width: 34px !important; height: 34px !important; }
html.dv .nv-reglages.nv-flottant { background: #FBF4E2; border: 3px solid var(--dv-encre); box-shadow: var(--dv-ombre-p); }
html.dv .nv-langue { background: #FBF4E2; color: var(--dv-encre); border: 2.5px solid var(--dv-encre); font-family: var(--dv-rond); font-weight: 900; }

/* ---------- 4d. les boutons : le bouton de jeu (teinte passée, mot crème bordé d'encre) ; les secondaires en papier ---------- */
:root.dv.dv-4x .btn.plein:not(.manque), :root.dv.dv-4x .btn.rose:not(.manque), :root.dv.dv-4x .mde-btn {
  min-height: 52px; border: 3px solid var(--dv-encre) !important; border-radius: 18px !important; color: var(--dv-creme) !important; font: 900 17px/1.1 var(--dv-rond) !important; letter-spacing: .02em;
  -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre) !important;
  background: linear-gradient(180deg, var(--teinte) 0%, var(--teinte) 63%, var(--teinte-f) 63.5%, var(--teinte-f) 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 4px 5px 0 var(--dv-encre) !important; }
:root.dv.dv-4x .btn.plein:not(.manque):active, :root.dv.dv-4x .btn.rose:not(.manque):active { transform: translateY(4px); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 1px 1px 0 var(--dv-encre) !important; }
:root.dv.dv-4x .btn:not(.plein):not(.rose):not(.manque) { min-height: 48px; border: 2.5px solid var(--dv-encre) !important; border-radius: 16px !important; color: var(--dv-encre) !important; font: 800 16px/1.15 var(--dv-rond) !important; text-transform: none; letter-spacing: 0;
  -webkit-text-stroke: 0; text-shadow: none !important; background: #FBF4E2 !important; box-shadow: 3px 4px 0 var(--dv-encre) !important; }
:root.dv.dv-4x .btn:not(.plein):not(.rose):not(.manque):active { transform: translateY(3px); box-shadow: 1px 1px 0 var(--dv-encre) !important; }
:root.dv.dv-4x .btn.manque { border-radius: 16px !important; font-family: var(--dv-rond) !important; font-weight: 800 !important; }
:root.dv.dv-4x .btn[aria-pressed="true"]:not(.plein):not(.rose), :root.dv.dv-4x .btn[aria-selected="true"]:not(.plein):not(.rose) { background: color-mix(in srgb, var(--teinte) 40%, #FBF4E2) !important; box-shadow: inset 0 0 0 2.5px var(--dv-encre), 3px 4px 0 var(--dv-encre) !important; }
:root.dv.dv-4x .rond { border: 2.5px solid var(--dv-encre); background: #FBF4E2; color: var(--dv-encre); box-shadow: 2px 3px 0 var(--dv-encre); }
:root.dv.dv-4x .puce { min-height: 44px; border: 2.5px solid var(--dv-encre); border-radius: 999px; background: #FBF4E2; color: var(--dv-encre); font: 800 15px/1.1 var(--dv-rond); box-shadow: 2px 2px 0 var(--dv-encre); }
:root.dv.dv-4x .puce[aria-pressed="true"] { background: var(--teinte); color: var(--dv-encre); }
:root.dv.dv-4x .champ, :root.dv.dv-4x textarea, :root.dv.dv-4x input[type="text"], :root.dv.dv-4x input[type="email"], :root.dv.dv-4x input[type="password"], :root.dv.dv-4x input[type="search"], :root.dv.dv-4x select {
  border: 2.5px solid var(--dv-encre); border-radius: 14px; background: #FBF4E2; color: var(--dv-encre); font-family: var(--dv-rond); }
:root.dv.dv-4x :is(.champ, textarea, input, select)::placeholder { color: var(--dv-encre-3); }
:root.dv.dv-4x :is(.champ, textarea, input, select):focus { border-color: var(--dv-encre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teinte) 60%, transparent); outline: none; }
:root.dv.dv-4x .pastille { border: 2px solid var(--dv-encre); background: linear-gradient(180deg, var(--dv-jaune) 0%, var(--dv-jaune) 63%, var(--dv-jaune-f) 63.5%, var(--dv-jaune-f) 100%); color: var(--dv-encre); font-family: var(--dv-rond); font-weight: 900; }
:root.dv.dv-4x .toast { background: #FBF4E2 !important; color: var(--dv-encre) !important; border-radius: 16px !important; box-shadow: 0 0 0 3px var(--dv-encre), 4px 5px 0 3px var(--dv-encre) !important; font-family: var(--dv-rond) !important; font-weight: 800; }

/* ---------- 4e. les cartes : du papier bordé d'encre, filet de la teinte dedans ---------- */
:root.dv.dv-4x .carte { border-radius: 22px; border: 3px solid var(--dv-encre) !important; background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)); color: var(--dv-encre);
  box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 6px color-mix(in srgb, var(--teinte) 80%, var(--dv-encre)), 4px 5px 0 var(--dv-encre) !important; }
:root.dv.dv-4x .sur { color: var(--dv-encre) !important; font: 900 12.5px/1.2 var(--dv-rond) !important; letter-spacing: .14em; }
:root.dv.dv-4x .pied-commun { color: var(--dv-texte-2); border-top-color: rgba(30, 23, 18, .2); font-family: var(--dv-rond); }
:root.dv.dv-4x .pied-commun a, :root.dv.dv-4x .pied-commun button { color: var(--dv-encre); }
:root.dv.dv-4x a:not([class]):not(nav a) { color: var(--dv-encre); text-decoration-color: var(--teinte-f); }   /* (27/10) pas la barre du bas : ses onglets n'ont pas de classe */

/* ---------- 4f. Moi : les feuilles (Mon profil, Trophées, Carnet, Ma plongée, Réglages, Archive) : des pages de papier ---------- */
html.dv .mo-feuille { background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; color: var(--dv-encre); --dv-texte: #1E1712; --dv-texte-2: #3F3224; --dv-texte-3: #5E4D3A; }
html.dv .mo-f-tete { border-bottom: 3px solid var(--dv-encre) !important; background: #FBF4E2; }
html.dv .mo-f-tete h2 { font: 900 24px/1.15 var(--dv-rond) !important; }
html.dv .mo-f-x { width: 48px !important; height: 48px !important; font: 900 28px/1 var(--dv-rond) !important; }
html.dv .mo-f-corps :is(.ex-carte, .m-sect, .mp-prive, .tro-carte) { border-radius: 20px; }
html.dv .mo-f-corps .ex-carte { background: #FBF4E2; color: var(--dv-encre); }
html.dv .mo-f-corps .mp-liens :is(a, button) { min-height: 52px; border: 2.5px solid var(--dv-encre); border-radius: 16px; background: #FBF4E2; color: var(--dv-encre); font: 800 15px/1.15 var(--dv-rond); box-shadow: 3px 4px 0 var(--dv-encre); }
html.dv .mo-f-corps p, html.dv .mp-note { font-family: var(--dv-rond); }

/* ---------- 5. les pièces de quelques pages (leurs boutons à elles prennent le bouton de jeu) ---------- */
:root.dv.dv-4x :is(.oc-gros, .dr-btn, .qz-btn.plein, .rc-btn.plein) {
  min-height: 56px; border: 3px solid var(--dv-encre) !important; border-radius: 18px !important; color: var(--dv-creme) !important; font: 900 17px/1.1 var(--dv-rond) !important; letter-spacing: .02em; text-transform: uppercase;
  -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre);
  background: linear-gradient(180deg, var(--teinte) 0%, var(--teinte) 63%, var(--teinte-f) 63.5%, var(--teinte-f) 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 4px 5px 0 var(--dv-encre) !important; }
:root.dv.dv-4x :is(.qz-btn, .rc-btn):not(.plein) { min-height: 48px; border: 2.5px solid var(--dv-encre) !important; border-radius: 16px !important; color: var(--dv-encre) !important; font: 800 16px/1.15 var(--dv-rond) !important;
  background: #FBF4E2 !important; box-shadow: 3px 4px 0 var(--dv-encre) !important; }
:root.dv.dv-4x :is(.oc-gros, .dr-btn, .qz-btn, .rc-btn):active { transform: translateY(3px); }
:root.dv.dv-4x .repere b { font-size: 15.5px !important; }
:root.dv.dv-4x .entete .marque .nv-marque > span, :root.dv.dv-4x .entete .marque > span:not(.nv-marque) { font-size: 17px !important; white-space: nowrap; }
/* jeu.html (l'ancien écran du jeu) : « Plonger » devient le bouton de laiton */
:root.dv.dv-4x .hub-plonger { border: 3px solid var(--dv-encre) !important; border-radius: 24px !important; color: var(--dv-encre) !important;
  background: linear-gradient(180deg, var(--dv-jaune) 0%, var(--dv-jaune) 63%, var(--dv-jaune-f) 63.5%, var(--dv-jaune-f) 100%) !important; box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .3), 4px 5px 0 var(--dv-encre) !important; }
:root.dv.dv-4x .hub-plonger b { font: 900 clamp(24px, 7vw, 30px)/1 var(--dv-titre) !important; font-synthesis: none; color: var(--dv-creme) !important; -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--dv-encre); }
:root.dv.dv-4x .hub-plonger small { color: var(--dv-encre) !important; font: 800 13px/1.2 var(--dv-rond) !important; }

/* =====================================================================================================================
   6. LES TITRES DE CINÉMA ET LE RELIEF (dessin animé des années 30 marin)
   ===================================================================================================================== */
/* les titres : des cartons de titre (lettres de cinéma crème, contour d'encre, ombre décalée de la teinte puis de l'encre) */
html.dv h1:not(.lecture *):not(.l-papier *), html.dv .page-tete h1, html.dv .p-tete h1 { font-family: var(--dv-titre) !important; font-weight: 900 !important; font-synthesis: none; letter-spacing: .01em;
  color: var(--dv-creme); -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--teinte-f), 5px 5px 0 var(--dv-encre); }
html.dv h1 em, html.dv h2 em { color: var(--teinte); }
html.dv .section-titre, html.dv .moment-t, html.dv .tous h2, html.dv .aussi-t, html.dv .feuille h2, html.dv .mo-f-tete h2, html.dv .mo-compte-carte h2,
html.dv .plongee.rapide h2, html.dv #vue-liste .une-titre, html.dv .ex-monde-txt b, html.dv a.iles strong { font-family: var(--dv-titre) !important; font-weight: 900 !important; font-synthesis: none;
  color: var(--dv-creme) !important; -webkit-text-stroke: 2px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--dv-encre) !important; letter-spacing: .02em; }
/* la barre du haut et les en-têtes : une bande de papier, filet d'encre dessous, un liseré de la teinte */
html.dv .barre, html.dv .barre.roulee, :root.dv.dv-4x .entete, :root.dv.dv-4x .mo-tete, html.dv body.dv-moi .entete { border-bottom: 3px solid var(--dv-encre) !important; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--teinte) 75%, transparent); }
html.dv .retour svg, :root.dv.dv-4x .repere .rp-ret, :root.dv.dv-4x .mo-rond, html.dv .mo-f-x { border: 3px solid var(--dv-encre) !important; background: #FBF4E2 !important; color: var(--dv-encre) !important; box-shadow: 2px 3px 0 var(--dv-encre) !important; }
/* les boutons : trait d'encre épais, rebond élastique au toucher (caoutchouc) */
html.dv .btn, :root.dv.dv-4x .btn, :root.dv.dv-4x .mde-btn, html.dv .grille-jeux .tuile, html.dv .ex-lieu, html.dv .mo-tuile, html.dv a.iles { transition: transform .42s var(--dv-ressort), box-shadow .2s ease; }
html.dv .btn:active, :root.dv.dv-4x .btn:active, html.dv .grille-jeux .tuile:active, html.dv .ex-lieu:active, html.dv .mo-tuile:active { transform: translate(3px, 4px) scale(.97, .94) !important; transition-duration: .07s; }
html.dv .btn-doux, html.dv .lien-doux, html.dv .autres, html.dv .autres.aussi, html.dv #vue-liste .ailleurs a { border: 2.5px solid var(--dv-encre) !important; box-shadow: 2px 3px 0 var(--dv-encre); }
/* les cartes : trait d'encre, filet de la teinte dedans, ombre décalée */
html.dv #vue-liste .fiche, html.dv .mo-f-corps .ex-carte { border: 3px solid var(--dv-encre) !important; box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 6px color-mix(in srgb, var(--teinte) 80%, var(--dv-encre)), 4px 5px 0 var(--dv-encre) !important; }
/* Moi : le nom sous le plongeur, en lettres de cinéma */
.dv-moi-hero .dv-moi-nom { font-family: var(--dv-titre); font-weight: 900; font-synthesis: none; color: var(--dv-creme); -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--dv-rose-f), 5px 5px 0 var(--dv-encre); }
:root.dv.dv-4x .marque .marque-ic, html.dv body.dv-moi .entete .dv-marque-ic { filter: drop-shadow(2px 2px 0 var(--dv-encre)); }