/* ════════════════════════════════════════════════════════════════════════
   Contact — bandes typographiques plein cadre, lettres « domino » au survol.
   Découpe en lettres + mise à l'échelle horizontale gérées en JS (contact.html).
   ════════════════════════════════════════════════════════════════════════ */

#domino {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg);               /* crème du site */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;                          /* plein cadre */
}

/* Une bande = une ligne, hauteur égale, remplie sur toute la largeur. */
.drow {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;                          /* plein cadre */
  text-decoration: none;
  color: var(--text);
  border-top: 7px solid var(--text);   /* traits épais */
}
.drow:first-child { border-top: none; }

.drow-inner {
  display: inline-block;
  white-space: nowrap;
  transform-origin: left center;       /* le scaleX s'étire depuis la gauche */
  /* Police du bandeau 3D (cube.js) */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17vh;                     /* desktop : la hauteur commande */
  line-height: 0.82;
  letter-spacing: -0.03em;
}

.dl {
  display: inline-block;
  will-change: transform;
}

/* ── Mode physique (matter.js) ─────────────────────────────────────────────
   Les lettres sont déplacées dans cet overlay plein écran et pilotées par le
   moteur (position + rotation). Le fond reste #domino (bandes + traits). */
#phys {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: auto;
  color: var(--text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.82;
}
#phys .dl {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  white-space: pre;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Anneau de texte « CLICK » rotatif autour du curseur. */
#click-hint {
  position: fixed;
  top: 0;
  left: 0;
  width: 78px;
  height: 78px;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#click-hint svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: ch-spin 6s linear infinite;
}
#click-hint text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  fill: #b9b9b5;                       /* gris clair */
}
@keyframes ch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #click-hint svg { animation: none; } }

/* Bouton de relance. */
.reset {
  position: fixed;
  top: 1.6vh;
  right: 1.8vw;
  z-index: 60;
  font: 600 0.78rem/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--text);
  padding: 0.5em 0.8em;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablette / mobile : traits plus fins, bouton reset plus compact. */
@media (max-width: 768px) {
  /* La largeur commande : les mots (jusqu'à « WHITE MONKEY* ») tiennent sans
     écrasement, avec une marge à droite. */
  .drow-inner { font-size: 11vw; }
  .drow { border-top-width: 4px; }
  .reset { top: auto; bottom: 2vh; right: 4vw; padding: 0.45em 0.7em; }
}

/* Appareils tactiles (sans survol) : l'indice « CLICK » n'a pas de sens
   (pas de curseur qui se balade) → on le masque. Les bandes restent des liens
   que l'on tape normalement. */
@media (hover: none), (pointer: coarse) {
  #click-hint { display: none; }
}