/* Deepverse · le système graphique de la 2.0 — STYLE ANNÉES 30 (atelier « style années 30 », 27/10, décision de Tristan de 11 h 05)
   Un seul style pour tout le site : le dessin animé 2D des années 1930 (« cartoon caoutchouc »), en couleurs « vieux film + abysses » :
   traits d'encre noire épais, couleurs un peu passées (bleus profonds, turquoise, touches dorées, crème), grain de vieux film,
   petites rayures, léger scintillement ; ombres décalées pleines (jamais de lueur) ; petit rebond élastique au toucher ;
   titres en lettres de cinéma ancien (Erica One, Google Fonts, licence OFL ; repli Cooper Black / Rockwell / Arial Black).
   Inspiration de style seulement : aucun personnage, décor, lettrage ni élément d'un dessin animé existant n'est repris.
   Les classes sont les mêmes qu'avant (atelier identité) : rien à changer dans les pages. Les poèmes gardent Newsreader.
   Toutes les zones à toucher : 56 px au moins. À charger avec dv/deepverse.js (html.dv, html[data-onglet], le grain, la police).
   Copie de la version précédente (bioluminescente) : carnet orig-style30/dv/deepverse.css. */

:root {
  /* l'encre et le papier (TECHNICOLOR MARIN, 27/10 13 h 45 : papier crème jauni, encre chaude) */
  --dv-encre: #1E1712;
  --dv-contour: #1E1712;                 /* (ancien nom, gardé : toutes les feuilles le lisent) */
  --dv-encre-2: #3F3224;
  --dv-encre-3: #5E4D3A;
  --dv-creme: #F1E2BF;
  --dv-creme-2: #E4D0A6;
  --dv-creme-3: #C9AF80;
  --dv-papier: #F4E7C8;                  /* le papier des cartes */
  --dv-papier-f: #EAD7AF;
  /* la mer aquarelle (fond clair, couleurs passées) et l'encre de mer (barre du bas, fenêtres sombres) */
  --dv-mer-1: #8AADA7; --dv-mer-2: #7BA29D; --dv-mer-3: #6E9692; --dv-mer-4: #678F8B;
  --dv-nuit: #223739;
  --dv-abysse: #2B4446;
  --dv-fond: #6E9692;
  /* les surfaces : du papier crème bordé d'encre (le texte y est à l'encre) */
  --dv-surface: #F4E7C8;
  --dv-surface-2: #EAD7AF;
  --dv-surface-3: #DCC596;
  --dv-trait: rgba(30, 23, 18, .26);
  /* le texte : à l'encre, sur la mer comme sur le papier (contraste ≥ 4,5:1 vérifié) ; les titres restent crème bordés d'encre */
  --dv-texte: #1E1712;
  --dv-texte-2: #2A2117;
  --dv-texte-3: #4A3B2C;
  /* une couleur passée par onglet (vieille affiche marine) : Jouer = laiton, Lire = brique, Monde = bleu mer, Moi = corail ;
     les noms des jetons (jaune, violet, cyan, rose, vert) sont ceux d'avant : seules leurs VALEURS ont changé */
  --dv-jaune: #D6A84B;   --dv-jaune-f: #A47A2C;
  --dv-violet: #C0604A;  --dv-violet-f: #8C412E;
  --dv-cyan: #5F8F96;    --dv-cyan-f: #416B71;
  --dv-rose: #D58D78;    --dv-rose-f: #A8604F;
  --dv-vert: #7F8F50;    --dv-vert-f: #5A673A;
  --dv-corail: #C8664A;
  --dv-or: #C99A3A;
  --dv-rouge: #B04A34;
  /* les lettres */
  --dv-rond: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Varela Round', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dv-titre: 'Erica One', 'Cooper Black', 'Cooper Std', 'Rockwell Extra Bold', 'Rockwell', 'Arial Black', ui-rounded, system-ui, sans-serif;
  --dv-poeme: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  /* les formes */
  --dv-r: 20px;
  --dv-r-l: 28px;
  --dv-toucher: 56px;
  --dv-t: 3px;                                            /* l'épaisseur du trait d'encre */
  --dv-ombre: 4px 5px 0 var(--dv-encre);                  /* l'ombre décalée, pleine (années 30) */
  --dv-ombre-p: 2px 3px 0 var(--dv-encre);
  --dv-ressort: cubic-bezier(.3, 1.9, .45, 1);            /* le retour élastique (caoutchouc) */
  /* le cadre d'un carton de titre (papier, filet d'encre fin dedans) */
  --dv-cadre: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 5.5px rgba(30, 23, 18, .5);
  --teinte: var(--dv-cyan);
  --teinte-f: var(--dv-cyan-f);
}
html.dv[data-onglet="jouer"] { --teinte: var(--dv-jaune); --teinte-f: var(--dv-jaune-f); }
html.dv[data-onglet="lire"] { --teinte: var(--dv-violet); --teinte-f: var(--dv-violet-f); }
html.dv[data-onglet="explorer"] { --teinte: var(--dv-cyan); --teinte-f: var(--dv-cyan-f); }
html.dv[data-onglet="moi"] { --teinte: var(--dv-rose); --teinte-f: var(--dv-rose-f); }

/* ---------- le fond : LA MER AQUARELLE (décision de Tristan, 27/10 13 h 26) ----------
   L'eau peinte en couleurs passées : un lavis clair de bleu-vert délavé, des taches plus claires et plus sombres comme une
   aquarelle, des vagues gravées très fines (comme sur une vieille affiche marine), des coins à peine assombris (vieux projecteur). */
html.dv { background: var(--dv-mer-3); color-scheme: light; }
.dv-fond-abysse {
  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, .28) 100%),
    radial-gradient(55% 28% at 18% 16%, rgba(244, 231, 200, .32) 0%, transparent 72%),
    radial-gradient(48% 26% at 86% 48%, 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%);
  background-color: var(--dv-mer-3);
}
/* les rayons de lumière (crème, peints ; une lente respiration) */
.dv-rayons { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dv-rayons::before { content: ""; position: absolute; left: -20%; right: -20%; top: -10%; height: 80%;
  background: repeating-linear-gradient(100deg, transparent 0 7%, rgba(250, 240, 214, .16) 9% 11.5%, transparent 13.5% 22%);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 85%); mask: linear-gradient(180deg, #000 0%, transparent 85%);
  animation: dv-respire 10s ease-in-out infinite alternate; }
@keyframes dv-respire { from { opacity: .55; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }

/* le « plancton » (DV.plancton) : de petites bulles dessinées à l'encre qui montent doucement */
.dv-plancton { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dv-pl { position: absolute; width: calc(var(--s) + 4px); height: calc(var(--s) + 4px); border-radius: 50%; border: 1.5px solid rgba(30, 23, 18, .6);
  background: radial-gradient(circle at 35% 32%, #FBF4E2 0 22%, rgba(244, 231, 200, .55) 26%, rgba(244, 231, 200, .15) 70%);
  opacity: .7; animation: dv-derive var(--du) ease-in-out var(--de) infinite alternate; will-change: transform; }
@keyframes dv-derive { 0% { transform: translate3d(0, 0, 0); opacity: .2; } 40% { opacity: .8; } 100% { transform: translate3d(12px, -64px, 0); opacity: .3; } }

/* ---------- LE VIEUX FILM : grain, petites rayures, léger scintillement (DV pose <div class="dv-film">) ----------
   Un seul calque de grain (une image de bruit fixe, rendue une fois) que l'on déplace par sauts (transformations seulement :
   aucune image recalculée) ; deux rayures fines de 2 px qui passent de temps en temps ; le scintillement fait varier très peu
   la force du grain, au plus 2,5 fois par seconde (jamais plus de 3 éclairs par seconde). Le texte reste net : le grain est très faible.
   Coupé en mode léger, avec « réduire les animations » et prefers-reduced-motion. */
.dv-film { position: fixed; inset: -64px; z-index: 2147483600; pointer-events: none; opacity: .2;
  background:
    linear-gradient(rgba(255, 238, 200, .035), rgba(255, 238, 200, .035)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .06 0 0 0 0 .02 0 0 0 -3.2 1.62'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .84 0 0 0 -4.4 2.25'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23a)'/%3E%3Crect width='220' height='220' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: auto, 220px 220px;
  animation: dv-grain .84s steps(1) infinite, dv-scint 1.2s steps(1) infinite; will-change: transform, opacity; }
@keyframes dv-grain { 0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-37px, 23px, 0); } 33% { transform: translate3d(29px, -41px, 0); } 50% { transform: translate3d(-13px, 52px, 0); } 67% { transform: translate3d(47px, 11px, 0); } 83% { transform: translate3d(-51px, -27px, 0); } }
@keyframes dv-scint { 0% { opacity: .2; } 33% { opacity: .16; } 67% { opacity: .22; } }
.dv-film::before, .dv-film::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; opacity: 0; }
.dv-film::before { left: 31%; background: linear-gradient(180deg, transparent, rgba(255, 244, 214, .5) 20%, rgba(255, 244, 214, .3) 70%, transparent); animation: dv-rayure 5.3s steps(1) infinite; }
.dv-film::after { left: 74%; width: 1.5px; background: linear-gradient(180deg, transparent 10%, rgba(20, 12, 4, .55) 40%, rgba(20, 12, 4, .4) 85%, transparent); animation: dv-rayure 7.9s steps(1) 2.1s infinite; }
@keyframes dv-rayure { 0%, 100% { opacity: 0; transform: translateX(0); } 40% { opacity: 1; transform: translateX(0); } 44% { opacity: 1; transform: translateX(-9vw); } 48% { opacity: 0; } 76% { opacity: .8; transform: translateX(14vw); } 79% { opacity: 0; } }
html.dv-leger .dv-film, html.mvt-reduit .dv-film, html.dv-sans-film .dv-film { display: none; }
@media (prefers-reduced-motion: reduce) { .dv-film { display: none; } }
@media print { .dv-film { display: none; } }

/* ---------- les traits qui tremblent (seulement les éléments clés : titres, logo, gros boutons, personnages) ----------
   .dv-tremble : la pièce saute d'un rien, image par image (transformations seulement) ;
   .dv-bout : le trait « bout » (3 dessins du même trait, alternés 7 fois par seconde : filtres SVG fixes posés par deepverse.js,
   sur de petits dessins seulement). Tout s'arrête en mode léger et en mouvement réduit. */
@keyframes dv-tremble { 0% { transform: translate(0, 0) rotate(-.35deg); } 33% { transform: translate(.6px, -.5px) rotate(.3deg); } 67% { transform: translate(-.5px, .4px) rotate(-.05deg); } }
.dv-tremble { animation: dv-tremble .48s steps(1) infinite; }
@keyframes dv-bout { 0% { filter: url(#dv-tr1); } 33.3% { filter: url(#dv-tr2); } 66.6% { filter: url(#dv-tr3); } }
html.dv-traits .dv-bout { animation: dv-bout .42s steps(1) infinite; }
html.dv-traits .dv-ic > .dv-g { filter: url(#dv-trace); }
html.dv-leger .dv-tremble, html.mvt-reduit .dv-tremble, html.dv-leger .dv-bout, html.mvt-reduit .dv-bout { animation: none !important; }
html.dv-leger .dv-ic > .dv-g, html.dv-leger .dv-bout { filter: none !important; }
@media (prefers-reduced-motion: reduce) { .dv-tremble, .dv-bout { animation: none !important; } }

/* ---------- les logos (DV.ic) : encre épaisse, couleurs passées de vieille affiche marine ; aucune lueur ---------- */
.dv-ic { display: block; flex: none; overflow: visible; filter: none; }

/* ---------- la marque : le nom en lettres de cinéma, sur une banderole (logo : DV.logo) ---------- */
.dv-marque { display: inline-flex; align-items: center; gap: 10px; color: var(--dv-texte); text-decoration: none; min-width: 0; }
.dv-marque .dv-logo { flex: none; filter: drop-shadow(3px 3px 0 var(--dv-encre)); }
.dv-marque-txt { display: grid; min-width: 0; line-height: 1; }
.dv-marque-txt b { font: 900 clamp(24px, 7vw, 32px)/1.05 var(--dv-titre); font-synthesis: none; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px 6px 2px;
  color: var(--dv-creme); -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--dv-violet-f), 5px 5px 0 var(--dv-encre); }
.dv-marque-txt small { margin-top: 2px; font: 900 12.5px/1.1 var(--dv-rond); letter-spacing: .2em; text-transform: uppercase; color: var(--dv-creme); text-shadow: 1.5px 1.5px 0 var(--dv-encre), -1px -1px 0 var(--dv-encre), 1px -1px 0 var(--dv-encre), -1px 1px 0 var(--dv-encre); }

/* la banderole (DV.banderole, DV.marque({ banderole: true })) : l'ancre et le ruban de papier, le nom en lettres de cinéma ; le slogan dessous */
.dv-marque-banderole { display: inline-grid; justify-items: center; gap: 0; }
.dv-marque-banderole .dv-banderole { display: block; width: min(68vw, 280px); height: auto; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(30, 23, 18, .85)); }
.dv-marque-slogan { margin-top: -4px; font: 900 12.5px/1.1 var(--dv-rond); letter-spacing: .22em; text-transform: uppercase; color: var(--dv-creme);
  text-shadow: 1.5px 1.5px 0 var(--dv-encre), -1px -1px 0 var(--dv-encre), 1px -1px 0 var(--dv-encre), -1px 1px 0 var(--dv-encre); }

/* ---------- les boutons de jeu : couleur passée pleine, bande d'ombre, trait d'encre épais, ombre décalée, rebond élastique ----------
   Le mot est en crème bordé d'encre (lisible sur toutes les couleurs passées, comme les lettres d'un carton de cinéma). */
.dv-btn {
  --c: var(--teinte); --c-f: var(--teinte-f);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--dv-toucher); padding: 0 22px;
  border: var(--dv-t) solid var(--dv-encre); border-radius: 18px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, var(--c) 0%, var(--c) 64%, var(--c-f) 64.5%, var(--c-f) 100%);
  color: var(--dv-creme); font: 900 19px/1 var(--dv-rond); letter-spacing: .03em; text-decoration: none; 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), var(--dv-ombre);
  transition: transform .42s var(--dv-ressort), box-shadow .2s ease;
}
/* le reflet dessiné : un petit trait crème en haut à gauche, comme sur les objets des vieux dessins animés */
.dv-btn::before { content: ""; position: absolute; left: 12px; top: 7px; width: 14px; height: 5px; border-radius: 4px; background: rgba(250, 240, 214, .7); transform: rotate(-12deg); pointer-events: none; }
.dv-btn:active { transform: translate(3px, 4px) scale(.97, .93); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .2), 1px 1px 0 var(--dv-encre); transition-duration: .07s; }
.dv-btn:focus-visible { outline: 3px solid var(--dv-encre); outline-offset: 4px; }
.dv-btn.dv-jaune { --c: var(--dv-jaune); --c-f: var(--dv-jaune-f); }
.dv-btn.dv-violet { --c: var(--dv-violet); --c-f: var(--dv-violet-f); }
.dv-btn.dv-cyan { --c: var(--dv-cyan); --c-f: var(--dv-cyan-f); }
.dv-btn.dv-rose { --c: var(--dv-rose); --c-f: var(--dv-rose-f); }
.dv-btn.dv-vert { --c: var(--dv-vert); --c-f: var(--dv-vert-f); }
/* le bouton calme : du papier crème, le mot à l'encre (secondaire) */
.dv-btn.dv-sombre, .dv-btn.dv-papier { --c: var(--dv-papier); --c-f: var(--dv-papier-f); color: var(--dv-encre); -webkit-text-stroke: 0; text-shadow: none; }
.dv-btn.dv-sombre::before, .dv-btn.dv-papier::before { opacity: 0; }
.dv-brille { overflow: visible; }
.dv-brille::after { content: none; }

/* ---------- les cartes : du papier crème, trait d'encre, filet fin dedans (un carton de titre), ombre décalée ----------
   Le texte y est à l'encre ; les jetons de texte sont redonnés ici pour tout ce qui est posé dedans. */
.dv-carte {
  --c: var(--teinte);
  --dv-texte: #1E1712; --dv-texte-2: #3F3224; --dv-texte-3: #5E4D3A; --dv-trait: rgba(30, 23, 18, .26);
  position: relative; display: block; border-radius: var(--dv-r); padding: 16px; color: var(--dv-encre); text-decoration: none;
  background: linear-gradient(180deg, var(--dv-papier) 0%, var(--dv-papier-f) 100%);
  border: var(--dv-t) solid var(--dv-encre);
  box-shadow: inset 0 0 0 4px var(--dv-papier), inset 0 0 0 6px color-mix(in srgb, var(--c) 75%, var(--dv-encre)), var(--dv-ombre);
}
a.dv-carte, button.dv-carte { cursor: pointer; touch-action: manipulation; transition: transform .42s var(--dv-ressort); }
a.dv-carte:active, button.dv-carte:active { transform: translate(2px, 3px) scale(.98); transition-duration: .07s; }
.dv-carte:focus-visible { outline: 3px solid var(--dv-encre); outline-offset: 3px; }

/* la grande tuile de jeu : couleur passée pleine, trait épais, ombre décalée, rebond (les portes du salon, les vignettes) */
.dv-tuile {
  --c: var(--teinte); --c-f: var(--teinte-f);
  position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 96px; padding: 10px 6px 12px;
  border: var(--dv-t) solid var(--dv-encre); border-radius: 22px; color: var(--dv-creme); text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation;
  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(--dv-ombre);
  transition: transform .42s var(--dv-ressort), box-shadow .2s ease;
}
.dv-tuile:active { transform: translate(3px, 4px) scale(.96, .93); box-shadow: inset 0 0 0 2px rgba(250, 240, 214, .2), 1px 1px 0 var(--dv-encre); transition-duration: .07s; }
.dv-tuile:focus-visible { outline: 3px solid var(--dv-encre); outline-offset: 4px; }
.dv-tuile b, .dv-mot { font: 900 19px/1.05 var(--dv-rond); letter-spacing: .01em; color: var(--dv-creme); -webkit-text-stroke: 4px var(--dv-encre); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--dv-encre); }
.dv-tuile .dv-ic { width: 52px; height: 52px; }

/* la pastille (niveau, nombre) : un petit médaillon de laiton */
.dv-pastille { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: 2.5px solid var(--dv-encre); border-radius: 999px;
  background: linear-gradient(180deg, #E8C36E 0%, var(--dv-or) 60%, #9C7428 60.5%); color: var(--dv-encre); font: 900 14px/1 var(--dv-rond); box-shadow: var(--dv-ombre-p); }

/* le titre d'une page d'onglet : un carton de titre (grosses lettres de cinéma crème, contour d'encre, ombre décalée, filet orné dessous) */
.dv-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 6px 0 18px; }
.dv-tete > .dv-ic { grid-row: 1 / span 2; width: 64px; height: 64px; }
.dv-tete > :not(.dv-ic) { grid-column: 2; }
.dv-tete h1 { margin: 0; padding: 0 6px 6px 0; font: 900 clamp(34px, 10vw, 46px)/1.02 var(--dv-titre) !important; font-synthesis: none; letter-spacing: .01em; color: var(--dv-creme);
  -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--teinte-f), 6px 6px 0 var(--dv-encre); }
.dv-tete p { margin: 4px 0 0; font: 800 16px/1.3 var(--dv-rond); color: var(--dv-texte-2); }
.dv-tete p::before { content: ""; display: block; width: 132px; height: 10px; margin: 0 0 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 10'%3E%3Cpath d='M2 5h52M78 5h52' stroke='%231E1712' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M66 .8 70.2 5 66 9.2 61.8 5z' fill='%23C99A3A' stroke='%231E1712' stroke-width='1.4'/%3E%3Ccircle cx='57' cy='5' r='1.8' fill='%231E1712'/%3E%3Ccircle cx='75' cy='5' r='1.8' fill='%231E1712'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.dv-section-t { margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; font: 900 22px/1.1 var(--dv-titre) !important; font-synthesis: none; color: var(--dv-creme); letter-spacing: .03em;
  -webkit-text-stroke: 2px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--dv-encre); }
.dv-section-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; }

/* ---------- le plongeur 2D « caoutchouc » (DV.plongeurScene) ----------
   Le dessin : un casque de scaphandre rond et opaque (aucun visage), un corps rond, des bras et des jambes en courbes caoutchouc.
   Sans dv/anime30.js : un rebond en rythme en CSS. Avec : la boucle d'animation plie les bras et les jambes (salut, danse du poulpe,
   salto, victoire) et cette animation CSS s'arrête (.dv-anime). */
.dv-plongeur { position: relative; display: block; width: 100%; height: 100%; }
.dvp-corps { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 96%; animation: dvp-rebond .62s cubic-bezier(.4, 0, .6, 1) infinite alternate; will-change: transform; }
.dv-plongeur-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes dvp-rebond { from { transform: translateY(0) scale(1.04, .95); } to { transform: translateY(-5%) scale(.98, 1.03); } }
.dv-plongeur.dv-anime .dvp-corps { animation: none; }
.dvp-lampe { animation: dvp-lampe 2.4s steps(2) infinite; }
@keyframes dvp-lampe { 0% { fill: #E8C36E; } 50% { fill: #F6E7B8; } }
.dvp-coeur { animation: none; }
.dvp-bras-d { transform: none; animation: none; }
/* le décor du plongeur : un projecteur de scène (ovale crème au sol) et son ombre d'encre ; ses bulles montent du casque */
.dvp-halo { position: absolute; left: 50%; bottom: -2%; width: 96%; height: 30%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(250, 240, 214, .38) 0%, rgba(250, 240, 214, .14) 50%, transparent 72%); }
.dvp-anneau { position: absolute; left: 50%; bottom: 1%; width: 58%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: rgba(30, 23, 18, .32); box-shadow: none; }
.dvp-bulles { position: absolute; left: 50%; top: 6%; width: 0; height: 0; }
.dvp-bulles i { position: absolute; left: var(--x); top: 0; width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid var(--dv-encre); background: radial-gradient(circle at 34% 30%, #FBF4E2 0 22%, rgba(244, 231, 200, .55) 28%, rgba(244, 231, 200, .15) 72%);
  opacity: 0; animation: dvp-bulle 3.6s ease-in calc(var(--i) * .52s) infinite; }
@keyframes dvp-bulle { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: .95; } 50% { transform: translate(8px, -70px) scale(1); } 100% { transform: translate(-6px, -150px) scale(1.15); opacity: 0; } }
/* le petit tour quand on le touche (sans dv/anime30.js) */
.dv-plongeur.tourne .dvp-corps { animation: dvp-tour .9s cubic-bezier(.3, 1.4, .5, 1) 1; }
@keyframes dvp-tour { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(0) scale(1.1, .86); } 55% { transform: translateY(-18%) rotate(-200deg) scale(.95, 1.05); } 85% { transform: translateY(0) rotate(-360deg) scale(1.08, .9); } 100% { transform: translateY(0) rotate(-360deg) scale(1); } }

/* Octave et Mousse en image (DV.mascotte : leurs versions « années 30 ») : posés sur le décor, une ombre d'encre au sol, sans lueur */
.dv-mascotte-p { display: block; width: 100%; height: 100%; pointer-events: none; }
.dv-mascotte { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(3px 3px 0 rgba(30, 23, 18, .5)); -webkit-user-select: none; user-select: none; pointer-events: none; }
/* un ami qu'on touche (DV.toucherAmi) : il rebondit (écrasé, étiré) et dit sa phrase dans une bulle de bande dessinée */
.dv-ami { position: relative; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.dv-ami::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -3px; height: 9%; border-radius: 50%; background: rgba(30, 23, 18, .3); z-index: -1; }
.dv-ami:focus-visible { outline: 3px solid var(--dv-encre); outline-offset: 2px; border-radius: 20px; }
.dv-ami.rebond .dv-mascotte { animation: dv-rebond .62s var(--dv-ressort) 1; transform-origin: 50% 100%; }
@keyframes dv-rebond { 0% { transform: scale(1, 1); } 22% { transform: scale(1.16, .82); } 52% { transform: scale(.9, 1.14) translateY(-10px); } 78% { transform: scale(1.06, .95); } 100% { transform: scale(1, 1); } }
.dv-bulle { position: absolute; left: 50%; bottom: 96%; z-index: 4; transform: translateX(-50%); padding: 8px 14px; white-space: nowrap; border: 3px solid var(--dv-encre); border-radius: 20px; background: #FBF4E2; color: var(--dv-encre);
  font: 900 15.5px/1.1 var(--dv-rond); box-shadow: var(--dv-ombre-p); pointer-events: none; animation: dv-bulle-in .3s var(--dv-ressort) 1; }
.dv-bulle::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #FBF4E2; border: solid var(--dv-encre); border-width: 0 3px 3px 0; transform: rotate(45deg); }
@keyframes dv-bulle-in { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ---------- l'écran de fin et la salle d'attente ---------- */
.dv-etoiles { display: inline-flex; gap: 6px; }
.dv-etoiles .dv-ic { width: 54px; height: 54px; }
.dv-etoiles .eteinte { filter: grayscale(1) brightness(.7); opacity: .6; }

/* ---------- les animations s'arrêtent sur demande ---------- */
@media (prefers-reduced-motion: reduce) {
  .dv-rayons::before, .dv-pl, .dvp-corps, .dvp-lampe, .dvp-bulles i, .dv-ami.rebond .dv-mascotte { animation: none !important; }
  .dvp-bulles i { opacity: .7; transform: translateY(calc(var(--i) * -18px)); }
  .dv-btn, .dv-tuile, a.dv-carte { transition: none; }
}
html.mvt-reduit .dv-rayons::before, html.mvt-reduit .dv-pl, html.mvt-reduit .dvp-corps, html.mvt-reduit .dvp-lampe, html.mvt-reduit .dvp-bulles i, html.mvt-reduit .dv-ami.rebond .dv-mascotte { animation: none !important; }
html.mvt-reduit .dvp-bulles i { opacity: .7; transform: translateY(calc(var(--i) * -18px)); }
html.mvt-reduit .dv-btn, html.mvt-reduit .dv-tuile { transition: none; }
html.dv-leger .dv-rayons::before { animation: none; }
html.dv-leger .dv-pl:nth-child(n+10) { display: none; }

/* ---------- « contraste élevé » (Réglages) : la mer plus claire, l'encre pure, les traits nets, pas de grain ---------- */
html.dv.contraste { --dv-texte: #000; --dv-texte-2: #120D09; --dv-texte-3: #241A12; --dv-trait: rgba(0, 0, 0, .6); --dv-mer-1: #A8C4BF; --dv-mer-2: #9DBCB7; --dv-mer-3: #93B4AF; --dv-mer-4: #8DAFAA; }
html.dv.contraste .dv-carte, html.dv.contraste .dv-tuile { box-shadow: inset 0 0 0 2px var(--dv-encre), var(--dv-ombre); }
html.dv.contraste .dv-film { display: none; }

/* ---------- la petite fenêtre du bas (Nav.feuille : Réglages, Soutenir…) : une page calme, en papier crème ---------- */
html.dv .fg { --fond: var(--dv-papier); --surface: #FBF4E2; --encre: #1E1712; --brume: #3F3224; --trait: rgba(30, 23, 18, .28); --rose: var(--teinte-f); --f-ui: var(--dv-rond); --f-titre: var(--dv-titre);
  --dv-texte: #1E1712; --dv-texte-2: #3F3224; --dv-texte-3: #5E4D3A;
  background: linear-gradient(180deg, var(--dv-papier), var(--dv-papier-f)) !important; color: var(--dv-encre);
  border-top: var(--dv-t) solid var(--dv-encre); box-shadow: inset 0 4px 0 color-mix(in srgb, var(--teinte) 70%, transparent), 0 -16px 40px -18px rgba(30, 23, 18, .6); }
html.dv .fg-tete h2 { font: 900 clamp(22px, 6.4vw, 28px)/1.1 var(--dv-titre) !important; font-synthesis: none; color: var(--dv-creme); -webkit-text-stroke: 2px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--dv-encre); }
html.dv .fg-x { width: 48px; height: 48px; border: 3px solid var(--dv-encre); background: #FBF4E2; color: var(--dv-encre); font-weight: 900; box-shadow: var(--dv-ombre-p); }
html.dv .fg-voile { background: rgba(30, 23, 18, .45); }
html.dv .fg .rg h3 { font: 900 12.5px/1.2 var(--dv-rond); letter-spacing: .16em; color: var(--dv-violet-f); }
html.dv .fg .rg-bloc { background: rgba(251, 244, 226, .7); border: 2px solid var(--dv-trait); }
html.dv .fg .rg-l > span:first-child, html.dv .fg .rg-act { font-family: var(--dv-rond); font-weight: 800; color: var(--dv-encre); }
html.dv .fg .rg-ch, html.dv .fg .rg-q { background: #FBF4E2; border: 2.5px solid var(--dv-encre); color: var(--dv-encre); font-family: var(--dv-rond); font-weight: 800; box-shadow: var(--dv-ombre-p); }
html.dv .fg .rg-ch[aria-pressed="true"], html.dv .fg .rg-q[aria-pressed="true"] { color: var(--dv-encre); background: var(--teinte); box-shadow: inset 0 0 0 2px #FBF4E2, var(--dv-ombre-p); }
html.dv .fg .rg-sw { background: rgba(30, 23, 18, .18); border: 2px solid var(--dv-encre); }
html.dv .fg .rg-sw[aria-checked="true"] { background: var(--teinte); }

/* =====================================================================================================================
   LA BARRE DES 4 ONGLETS (nav.js) : une bande d'encre de mer, logos dessinés, l'onglet choisi dans un médaillon crème
   (il monte, prend un trait d'encre et un trait dessous : la forme le dit aussi, pas seulement la couleur).
   ===================================================================================================================== */
html.dv nav.onglets-mde { background: linear-gradient(180deg, #2E4A4C, var(--dv-nuit)) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-top: 3px solid var(--dv-encre) !important; box-shadow: inset 0 3px 0 color-mix(in srgb, var(--teinte-onglet, var(--teinte)) 70%, transparent), 0 -10px 24px -12px rgba(30, 23, 18, .6) !important; }
html.dv nav.onglets-mde a { color: #E4D0A6; font-family: var(--dv-rond); }
html.dv nav.onglets-mde a[data-onglet="jouer"] { --t: var(--dv-jaune); } html.dv nav.onglets-mde a[data-onglet="lire"] { --t: var(--dv-violet); }
html.dv nav.onglets-mde a[data-onglet="explorer"] { --t: var(--dv-cyan); } html.dv nav.onglets-mde a[data-onglet="moi"] { --t: var(--dv-rose); }
html.dv nav.onglets-mde svg { filter: none; }
html.dv nav.onglets-mde a[aria-current="page"] { color: var(--dv-creme); text-shadow: 1.5px 1.5px 0 var(--dv-encre); }
html.dv nav.onglets-mde a[aria-current="page"] .om-ic { transform: translateY(-4px) rotate(-2deg); background: var(--dv-creme); box-shadow: inset 0 0 0 2.5px var(--dv-encre), inset 0 -7px 0 color-mix(in srgb, var(--t) 55%, var(--dv-creme)), 3px 4px 0 var(--dv-encre); }
html.dv nav.onglets-mde a[aria-current="page"] svg { filter: none; }
html.dv nav.onglets-mde a[aria-current="page"] .om-nom::after { width: 22px; height: 5px; border-radius: 3px; background: var(--t); box-shadow: 0 0 0 2px var(--dv-encre); }
html.dv nav.onglets-mde a:active .om-ic { transform: scale(.9, .84); background: rgba(241, 226, 191, .14); transition: transform .07s; }
html.dv nav.onglets-mde .om-ic { transition: transform .42s var(--dv-ressort), background-color .2s; }
html.dv nav.onglets-mde a i { background: var(--dv-or); box-shadow: 0 0 0 2.5px var(--dv-encre); }

/* =====================================================================================================================
   LE SALON (index.html) : le plateau d'un vieux dessin animé sous la mer, en aquarelle.
   (Spécificité « :root.dv … » : passe devant les règles écrites dans la page, sans toucher la page.)
   ===================================================================================================================== */
:root.dv body.accueil.dv-fond-abysse { 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% 40%, transparent 56%, rgba(60, 40, 18, .3) 100%),
    radial-gradient(90% 40% at 50% 64%, rgba(250, 240, 214, .22) 0%, transparent 70%),
    radial-gradient(55% 28% at 16% 14%, rgba(244, 231, 200, .3) 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%) var(--dv-mer-3) !important; }
:root.dv .mer-prete #mer { opacity: .12; }
:root.dv .sl-marque .dv-marque-txt b { font-size: clamp(26px, 8vw, 36px); }
:root.dv .sl-marque .dv-logo { filter: drop-shadow(3px 3px 0 var(--dv-encre)); }
/* Octave et Mousse (images « -30s ») : proportions de leurs nouvelles images */
:root.dv .sl-ami.g { aspect-ratio: .973; }
:root.dv .sl-ami.d { aspect-ratio: .692; }
:root.dv .sl-ami { animation: sl-ami30 .62s cubic-bezier(.4, 0, .6, 1) infinite alternate; transform-origin: 50% 100%; }
:root.dv .sl-ami.d { animation-delay: -.31s; }
@keyframes sl-ami30 { from { transform: scale(1.03, .96); } to { transform: scale(.99, 1.02); } }
/* JOUER : le grand carton de laiton, en lettres de cinéma */
:root.dv .porte-grande { border-width: 4px; box-shadow: inset 0 0 0 3px rgba(250, 240, 214, .32), 6px 7px 0 var(--dv-encre); animation: sl-temps 2.6s var(--dv-ressort) infinite; }
@keyframes sl-temps { 0%, 84%, 100% { transform: none; } 88% { transform: scale(1.04, .92); } 93% { transform: scale(.98, 1.05); } 97% { transform: scale(1.01, .99); } }
:root.dv .porte-grande:active { transform: translate(4px, 5px) scale(.97, .92); box-shadow: inset 0 0 0 3px rgba(250, 240, 214, .25), 1px 1px 0 var(--dv-encre); animation: none; }
:root.dv .porte-grande b { font: 900 clamp(42px, 13.5vw, 58px)/1 var(--dv-titre); font-synthesis: none; letter-spacing: .04em; color: var(--dv-creme);
  -webkit-text-stroke: 3.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--dv-violet-f), 6px 6px 0 var(--dv-encre); }
:root.dv .porte-grande .porte-ic { width: 58px; height: 58px; }
:root.dv .porte-petite[href="lire.html"] { --c: var(--dv-violet); --c-f: var(--dv-violet-f); }
:root.dv .porte-petite[href="explorer.html"] { --c: var(--dv-cyan); --c-f: var(--dv-cyan-f); }
:root.dv .porte-petite[href="creer.html"] { --c: var(--dv-vert); --c-f: var(--dv-vert-f); }
/* le poème du jour : une carte de papier, le vers à l'encre */
:root.dv .sl-poeme { --c: var(--dv-violet); }
:root.dv .sl-poeme-txt small { color: var(--dv-violet-f); letter-spacing: .1em; }
:root.dv .sl-poeme-txt q { color: var(--dv-encre); }
:root.dv .sl-poeme-go { border: 3px solid var(--dv-encre); background: linear-gradient(180deg, var(--dv-violet) 62%, var(--dv-violet-f) 62.5%); color: var(--dv-creme); -webkit-text-stroke: 2.5px var(--dv-encre); paint-order: stroke fill; text-shadow: 1.5px 1.5px 0 var(--dv-encre); box-shadow: var(--dv-ombre-p); }
/* la Boutique : une étiquette de papier crème (vrais objets, vrai argent), à part des portes du jeu, avec une corde */
:root.dv .sl-boutique { border: 2.5px dashed var(--dv-encre); outline: 2.5px solid var(--dv-encre); outline-offset: -8px; background: #FBF4E2; color: var(--dv-encre); box-shadow: var(--dv-ombre-p); transition: transform .42s var(--dv-ressort); }
:root.dv .sl-boutique b { color: var(--dv-encre); }
:root.dv .sl-boutique small { color: var(--dv-violet-f); }
:root.dv .sl-boutique:active { transform: translate(2px, 2px) scale(.98); transition-duration: .07s; }
:root.dv .deja a, :root.dv .acc-maree button { color: var(--dv-encre); text-decoration-color: var(--dv-violet-f); }
/* en haut : Réglages, « ? » et Moi en médaillons crème à l'encre */
:root.dv body.accueil .nv-reglages.nv-flottant, :root.dv .acc-aide, :root.dv .acc-moi { border: 3px solid var(--dv-encre); background: #FBF4E2; color: var(--dv-encre);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--dv-ombre-p); transition: transform .42s var(--dv-ressort); }
:root.dv .acc-moi:active, :root.dv .acc-aide:active, :root.dv body.accueil .nv-reglages.nv-flottant:active { transform: translate(2px, 2px) scale(.92); transition-duration: .07s; }
:root.dv .acc-moi i { background: var(--dv-or); box-shadow: 0 0 0 2.5px var(--dv-encre); }
:root.dv .mp-passer { font-family: var(--dv-rond) !important; }

/* =====================================================================================================================
   LES ÉCRANS DES AUTRES ATELIERS, repeints sans toucher à leurs fichiers :
   progression (Quêtes, Passe, Marché, Classe, rangée du salon, fin de partie), compte (choix du compte), fin de partie, boutique.
   ===================================================================================================================== */
/* les titres de leurs feuilles : lettres de cinéma */
html.dv :is(.mp-feuille, .mca, .mfp-carte, .bq) :is(h1, h2) { 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: .01em; }
/* les traits qui tremblent : les titres clés (le nom du salon, le titre des pages d'onglet, JOUER) */
.sl-marque .dv-marque-txt b, .dv-tete h1, :root.dv .porte-grande b { animation: dv-tremble .48s steps(1) infinite; }
html.dv-leger :is(.sl-marque .dv-marque-txt b, .dv-tete h1, .porte-grande b), html.mvt-reduit :is(.sl-marque .dv-marque-txt b, .dv-tete h1, .porte-grande b) { animation: none; }
@media (prefers-reduced-motion: reduce) { .sl-marque .dv-marque-txt b, .dv-tete h1, :root.dv .porte-grande b, :root.dv .porte-grande, :root.dv .sl-ami { animation: none !important; } }
html.mvt-reduit :root.dv .porte-grande, html.mvt-reduit .porte-grande, html.mvt-reduit .sl-ami { animation: none !important; }
/* les pastilles de progression (salon, Moi) : des étiquettes de papier crème à l'encre */
html.dv :is(.mp-hb, .mp-chip, .mp-solde, .mp-niv) { border: 3px solid var(--dv-encre) !important; background: linear-gradient(180deg, #FBF4E2 0 62%, var(--dv-papier-f) 62.5%) !important; color: var(--dv-encre) !important; box-shadow: var(--dv-ombre-p) !important; }
html.dv :is(.mp-hb, .mp-chip) { transition: transform .42s var(--dv-ressort); }
html.dv :is(.mp-hb, .mp-chip):active { transform: translate(2px, 2px) scale(.95, .92); transition-duration: .07s; }
/* les feuilles des ateliers (Quêtes, Passe, Marché, Classe, fin de partie, choix du compte) : un panneau d'ENCRE DE MER (sombre et chaud,
   comme un carton de titre de vieux film), le texte en crème ; leurs propres couleurs ont été passées au Technicolor marin */
html.dv .mp-feuille { background: radial-gradient(150% 95% at 50% 42%, transparent 55%, rgba(20, 14, 8, .45) 100%), linear-gradient(180deg, #34504F, var(--dv-nuit) 75%) !important;
  --dv-texte: #F4E9CF; --dv-texte-2: #E4D0A6; --dv-texte-3: #C9B48A; --dv-trait: rgba(241, 226, 191, .28); color: var(--dv-texte); }
html.dv :is(.mp-carte, .mp-t, .mca-age, .mfp-carte) { border-color: var(--dv-encre) !important; }
/* sur ces panneaux d'encre de mer, le texte reste crème (les jetons de texte de la page sont à l'encre) */
html.dv :is(.mca, .mca-toast, .mfp-ecran, .mfp-score, .mde-pause, #dv-lancement, .mfp-carte) { --dv-texte: #F4E9CF; --dv-texte-2: #E4D0A6; --dv-texte-3: #C9B48A; --dv-trait: rgba(241, 226, 191, .28); }
html.dv .mca { background: radial-gradient(150% 95% at 50% 42%, transparent 55%, rgba(20, 14, 8, .45) 100%), linear-gradient(180deg, #34504F, var(--dv-nuit) 75%) !important; }
/* la bannière d'un trophée gagné (trophees.js) : un petit carton de papier */
html.dv .tro-pop { background: #FBF4E2 !important; color: var(--dv-encre) !important; border: 3px solid var(--dv-encre) !important; border-radius: 18px !important; box-shadow: inset 0 0 0 4px #FBF4E2, inset 0 0 0 6px color-mix(in srgb, var(--rc, var(--dv-or)) 70%, var(--dv-encre)), var(--dv-ombre) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.dv .tro-pop small { color: var(--dv-violet-f) !important; }
html.dv .tro-pop strong { font-family: var(--dv-titre) !important; font-weight: 900 !important; font-synthesis: none; color: var(--dv-encre) !important; letter-spacing: .01em; }
html.dv .tro-pop span { color: var(--dv-encre-2) !important; }
html.dv .tro-pop .ic { background: var(--dv-creme) !important; border: 2.5px solid var(--dv-encre); }
/* les champs de recherche (Lire) : une bande de papier bordée d'encre, texte à l'encre */
html.dv input[type="search"] { border: 3px solid var(--dv-encre) !important; background: #FBF4E2 !important; color: var(--dv-encre) !important; box-shadow: var(--dv-ombre-p); }
html.dv input[type="search"]::placeholder { color: var(--dv-encre-3); }
/* les avatars ronds (bustes « années 30 ») : le visage dans le rond */
html.dv img[src*="-30s-buste"] { object-fit: cover; object-position: 50% 30%; }

/* =====================================================================================================================
   PIÈCES RÉUTILISABLES (pour toute page nouvelle : la vitrine, l'écran entre les parties…) — sans dépendre de habillage.css
   .dv-titre : un titre « carton de cinéma » (lettres Erica One, contour d'encre, ombre décalée de la teinte puis de l'encre) ;
   .dv-titre.dv-titre-s : la même chose, en petit (titre de section) ; .dv-surtitre : la petite ligne en capitales au-dessus ;
   .dv-etiquette : une étiquette de papier crème bordée d'encre (prix, mention « vrai argent », badge) ;
   avec .dv-btn (+ .dv-jaune .dv-violet .dv-cyan .dv-rose .dv-vert .dv-papier), .dv-carte, .dv-tuile, .dv-pastille, .dv-tete, .dv-section-t.
   ===================================================================================================================== */
.dv-titre { margin: 0; padding: 0 6px 6px 0; font: 900 clamp(32px, 9.5vw, 46px)/1.04 var(--dv-titre); font-synthesis: none; letter-spacing: .01em; color: var(--dv-creme);
  -webkit-text-stroke: 3px var(--dv-encre); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--teinte-f), 6px 6px 0 var(--dv-encre); }
.dv-titre.dv-titre-s { font-size: clamp(21px, 6vw, 26px); -webkit-text-stroke-width: 2px; text-shadow: 3px 3px 0 var(--dv-encre); }
.dv-surtitre { margin: 0; font: 900 12.5px/1.2 var(--dv-rond); letter-spacing: .18em; text-transform: uppercase; color: var(--dv-encre); }
.dv-carte .dv-surtitre { color: var(--dv-violet-f); }
.dv-etiquette { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 2.5px solid var(--dv-encre); border-radius: 10px; background: #FBF4E2; color: var(--dv-encre);
  font: 900 14px/1.1 var(--dv-rond); box-shadow: var(--dv-ombre-p); transform: rotate(-1.5deg); }