/* Ô Dragon · lot DRAGON · couche du dragon, repli SVG, zone cliquable, bouton de rugissement.
   Aucun halo, aucun glow, aucune ombre colorée, aucun dégradé décoratif.
   Chargé par le lot PAGE : <link rel="stylesheet" href="/css/dragon.css"> */

/* --------------------------------------------------------------- la couche

   Trois plans se superposent au-dessus des fonds de section :
     z-index 1  la couche quand le dragon passe derrière (classe is-back)
     z-index 2  les éléments de page qui doivent occulter le dragon (.dragon-over)
     z-index 3  la couche quand le dragon passe devant

   Les sections gardent leur z-index automatique : leurs fonds se peignent
   sous les trois plans, donc le dragon reste visible sur le papier comme sur l'encre. */

#dragon-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  contain: layout style paint;
}

#dragon-layer.is-back {
  z-index: 1;
}

#dragon-layer[hidden] {
  display: none;
}

#dragon-canvas,
#dragon-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

#dragon-svg-path {
  fill: var(--lacquer, #e2341b);
}

/* Élément de page qui occulte le dragon quand il passe derrière.
   À poser par le lot PAGE sur : la figurine Luffy, la piste des stations,
   la photo « à la une », les cadres de reels, le deck d'avis, la carte Leaflet.
   L'élément ne doit pas se trouver dans un ancêtre qui crée un contexte
   d'empilement (transform, filter, opacity < 1, will-change). */
.dragon-over {
  position: relative;
  z-index: 2;
}

/* Les blocs de TEXTE ne se laissent jamais repeindre. z-index 2 ne suffit pas :
   entre deux arrets la couche est encore en plan avant, a z-index 3, et le
   dragon amputait le « 4 » de la note Google et la ligne des avis. Ce plan-ci
   passe au-dessus des deux plans de la couche, la bascule vers l'arriere reste
   ce qu'elle est. */
.dragon-text-over {
  position: relative;
  z-index: 4;
}

/* --------------------------------------------------------------- zone cliquable

   Bouton transparent calé sur le dragon par le module, hors de l'ordre de tabulation :
   l'accès clavier passe par le bouton [data-od-roar], visible et libellé. */

.dragon-hit {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  pointer-events: auto;
  cursor: grab;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.dragon-hit:focus {
  outline: none;
}

/* on peut le prendre et le faire tourner */
.dragon-hit.est-tourne {
  cursor: grabbing;
}

.dragon-hit[hidden] {
  display: none;
}

/* --------------------------------------------------------------- emblème figé

   Mode prefers-reduced-motion : le dragon ne voyage pas, il se pose
   dans le hero et dans le pied de page, à l'échelle de son ancre. */

.dragon-static {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.dragon-static svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dragon-static path {
  fill: var(--lacquer, #e2341b);
}

/* --------------------------------------------------------------- bouton de rugissement

   Bouton texte du hero. Cible tactile de 44 px, libellé lisible,
   filet lanterne dessiné par clip-path au survol (320 ms) et repris en 160 ms. */

.dragon-roar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 0.15rem;
  margin: 0;
  border: 0;
  background: none;
  color: var(--text-on-ink, #f4ebdd);
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* Pastille laque : le seul repère visuel, plein aplat, jamais un halo. */
.dragon-roar::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lacquer, #e2341b);
}

/* Filet lanterne sous le libellé. */
.dragon-roar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--lantern, #f2b33a);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@media (hover: hover) and (pointer: fine) {
  .dragon-roar:hover {
    color: var(--lantern, #f2b33a);
  }

  .dragon-roar:hover::after {
    clip-path: inset(0 0 0 0);
    transition-duration: 320ms;
  }
}

.dragon-roar:focus-visible {
  outline: 2px solid var(--focus-on-ink, #f2b33a);
  outline-offset: 3px;
}

.dragon-roar:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

.dragon-roar:active {
  transform: scale(0.97);
}

.dragon-roar[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

/* --------------------------------------------------------------- mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .dragon-roar,
  .dragon-roar::after {
    transition: none;
  }

  .dragon-roar:active {
    transform: none;
  }
}

/* --------------------------------------------------------------- impression */

@media print {
  #dragon-layer {
    display: none;
  }
}