/* =====================================================================================================
   TITRE « DOVION » DE L'ACCUEIL (refonte 2026-10-23, demande Simon : « ce sont les LETTRES qui s'animent, pas le logo,
   pas toutes en même temps, plus lentement »).
   Le titre n'est plus une image : médaillon « cité engloutie » (brand-icon.svg, généré par tools/gen-logo.mjs) + le mot
   en VRAIES lettres Cinzel (une <span class="dv-l"> par lettre, aria-hidden ; le nom accessible est l'aria-label du bloc).
   js/logo-wave.js pose deux classes :
     · .dv-wait  → lettres cachées tant que l'écran de chargement couvre l'accueil ;
     · .dv-intro → apparition ÉCHELONNÉE, lettre après lettre (0,18 s d'écart, 1,1 s chacune) ;
     · .dv-swell → de temps en temps (toutes les 9 à 14 s), une lente houle : chaque lettre se soulève et prend un reflet
                   d'or, l'une après l'autre (0,2 s d'écart, 1,6 s chacune). Le médaillon, lui, ne bouge pas.
   Sans JS : lettres visibles, aucune animation. prefers-reduced-motion : rien ne bouge.
   Sélecteurs volontairement lourds (2 id + 3 classes) : les feuilles d'accueil (accueil-arcade, menus-epures, menu-refonte)
   posent leurs tailles et la police arcade en !important sur #menu.
   ===================================================================================================== */
html body #menu #menu-main h1 .menu-logo-wrap.dv-logo {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: .22em; width: auto !important; max-width: 96vw !important; margin: 0 auto 6px !important;
  font-size: min(112px, 12.6vw, 15vh); line-height: 1; position: relative;
  filter: drop-shadow(0 .1em .14em rgba(0, 0, 0, .28));
}
html body #menu #menu-main h1 .dv-logo .dv-emblem {
  display: block; flex: 0 0 auto; width: 1.32em !important; height: 1.32em !important; max-width: none !important;
  margin: 0 !important; transform: none !important; filter: none !important;
}
html body.ui-arcade #menu #menu-main h1 .dv-logo .dv-word, html body #menu #menu-main h1 .dv-logo .dv-word {
  display: flex; align-items: baseline; white-space: nowrap;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important; font-weight: 900; font-size: 1em; letter-spacing: .03em;
}
html body.ui-arcade #menu #menu-main h1 .dv-logo .dv-l, html body #menu #menu-main h1 .dv-logo .dv-l {
  display: inline-block; font-family: inherit !important;
  font-size: 1em; font-weight: 900; letter-spacing: .03em; text-transform: none;   /* style.css « #menu h1 span » = 13 px gris */
  color: #fbf5e6;                                          /* marbre ivoire */
  -webkit-text-stroke: .08em #2f2619; paint-order: stroke fill;   /* trait d'encre (charte crayon) */
  text-shadow: 0 .075em 0 #2f2619;                          /* ombre plate d'encre */
  transform-origin: 50% 80%;
}
html body.ui-arcade #menu #menu-main h1 .dv-logo .dv-l.dv-io, html body #menu #menu-main h1 .dv-logo .dv-l.dv-io {
  font-size: .46em; margin-left: .06em; color: #e8c46a; letter-spacing: .02em;   /* « .io » en or patiné */
}
.dv-logo .dv-l:nth-child(1) { --i: 0; } .dv-logo .dv-l:nth-child(2) { --i: 1; } .dv-logo .dv-l:nth-child(3) { --i: 2; }
.dv-logo .dv-l:nth-child(4) { --i: 3; } .dv-logo .dv-l:nth-child(5) { --i: 4; } .dv-logo .dv-l:nth-child(6) { --i: 5; }
.dv-logo .dv-l:nth-child(7) { --i: 6; }

/* --- 1. attente (l'écran de chargement couvre encore l'accueil) --- */
html body #menu .dv-logo.dv-wait .dv-l { opacity: 0; }

/* --- 2. apparition échelonnée --- */
html body #menu .dv-logo.dv-intro .dv-emblem { animation: dv-emblem-in 1.2s cubic-bezier(.22, 1, .36, 1) both; }
html body #menu .dv-logo.dv-intro .dv-l {
  animation: dv-letter-in 1.1s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(.4s + var(--i, 0) * .18s);
}
@keyframes dv-emblem-in { from { opacity: 0; transform: scale(.8) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes dv-letter-in {
  0%   { opacity: 0; transform: translateY(.42em) rotate(-5deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* --- 3. houle lente, lettre après lettre --- */
html body #menu .dv-logo.dv-swell .dv-l {
  animation: dv-swell 1.6s ease-in-out both;
  animation-delay: calc(var(--i, 0) * .2s);
}
html body #menu .dv-logo.dv-swell .dv-l.dv-io { animation-name: dv-swell-io; }
@keyframes dv-swell {
  0%, 100% { transform: none; color: #fbf5e6; }
  45%      { transform: translateY(-.13em) rotate(-2deg); color: #f6e3a4; }
}
@keyframes dv-swell-io {
  0%, 100% { transform: none; color: #e8c46a; }
  45%      { transform: translateY(-.13em) rotate(-2deg); color: #fff3c8; }
}

/* Paysage mobile bas : titre plus compact pour garder « Prendre la mer » visible. */
@media (max-height: 520px) {
  html body #menu #menu-main h1 .menu-logo-wrap.dv-logo { font-size: min(76px, 9vw, 14vh); }
}
@media (prefers-reduced-motion: reduce) {
  html body #menu .dv-logo .dv-l, html body #menu .dv-logo .dv-emblem { animation: none !important; opacity: 1 !important; }
}