/* accueil-fond.css — page d'accueil de tattoo-on-move.fr, chargée par le module 304 (le haut de l'accueil).
   Le fond d'hexagones qui monte en boucle derrière toute la page, l'emblème du haut, les cinq grandes cases
   photo et les boutons du haut rendus lisibles et animés.
   Source : Sites\tattoo-on-move\apercu-accueil\. Le mouvement est réglé par accueil-fond.js. */

/* ---------- Le fond ----------
   Fixé à l'écran, sous tout le contenu de la page (z-index négatif) : il ne passe jamais devant un texte,
   une photo ou un bouton. Haut et bas en fondu : une forme n'est jamais tranchée net par le bord de l'écran. */
.accueil-fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.accueil-fond-bande { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.accueil-fond-gauche { left: 0;  width: min(560px, 32vw); opacity: .2; }
.accueil-fond-droite { right: 0; width: min(560px, 32vw); opacity: .2; }
.accueil-fond-milieu { left: 50%; width: min(800px, 46vw); transform: translateX(-50%); }
.accueil-fond-train {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
  animation: accueil-fond-monte var(--duree, 300s) linear infinite;
}
.accueil-fond-train svg { display: block; width: 100%; height: auto; overflow: visible; }
.accueil-fond-train img { display: block; width: 100%; height: auto; max-width: none; }
@keyframes accueil-fond-monte {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--pas))); }
}
@media (max-width: 640px) {
  .accueil-fond-gauche, .accueil-fond-droite { width: 46vw; }
  .accueil-fond-milieu { width: 58vw; }
}

/* ---------- Le titre du haut ----------
   « TATTOO ON MOVE » au-dessus de l'emblème, dans la police Army (fichier fourni par Tof), sur l'accueil
   (entrée de menu 101). */
@font-face {
  font-family: 'Army';
  src: url(/templates/shaper_helixultimate/fonts/army-3.ttf) format('truetype');
  font-display: swap;
}
.itemid-101 .sp-page-title-heading { font-family: 'Army', 'Gentium Plus', sans-serif; font-weight: 400; letter-spacing: .04em; }

/* ---------- L'emblème du haut ----------
   La tête de mort seule, au milieu, à la place de l'ancienne bannière. Ses deux versions sont posées l'une sur
   l'autre : l'or sur noir dessous, le noir sur or dessus, qui apparaît et s'efface en boucle. Les images sont
   trois fois plus grandes que leur place, pour rester nettes sur téléphone. */
.accueil-embleme { position: relative; display: block; width: 150px; max-width: 100%; height: auto; margin: 0 auto; }
.accueil-embleme img { display: block; width: 100%; height: auto; }
.accueil-embleme .accueil-embleme-inverse {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: accueil-embleme-varie 8s ease-in-out infinite;
}
@keyframes accueil-embleme-varie {
  0%, 30%   { opacity: 0; }
  50%, 80%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* ---------- Les cinq grandes cases ----------
   Réservation sur toute la largeur, les quatre autres sur deux colonnes ; une seule photo derrière les cinq
   cases, vue par leurs fenêtres : la photo est le fond du bloc, les cases sont transparentes, et une ombre
   noire pleine autour de chaque case bouche les intervalles. Un voile sombre garde le texte lisible. Sur
   ordinateur, les quatre passent sur une seule rangée, pour ne pas repousser le reste de l'accueil trop bas. */
.accueil-tuiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 13px;
  overflow: hidden;
  background: #000 url(/images/accueil-fond/accueil-cases-photo.webp) center / cover no-repeat;
}
.accueil-boutons a.accueil-tuile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 8px;
  border: 1px solid #b7a680;
  border-radius: 5px;
  background-color: transparent;
  box-shadow: 0 0 0 6px #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
.accueil-boutons a.accueil-tuile-large { grid-column: 1 / -1; aspect-ratio: 4 / 1; font-size: 20px; }
/* le voile, sous le reflet d'or et sous le texte */
.accueil-boutons a.accueil-tuile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, .4) 100%);
  transition: background-color .3s ease, opacity .3s ease;
}
.accueil-boutons a.accueil-tuile::before { z-index: 1; }
.accueil-tuile-texte { position: relative; z-index: 2; }
/* au survol, la lueur d'or passe dedans : l'ombre noire du dehors doit rester, sinon la photo déborde */
.accueil-boutons a.accueil-tuile:hover,
.accueil-boutons a.accueil-tuile:focus-visible {
  background-color: transparent;
  color: #e2d3a6;
  box-shadow: 0 0 0 6px #000, inset 0 0 18px rgba(183, 166, 128, .55);
}
/* les cases n'entrent pas en scène : en glissant, leur ombre découvrirait la photo entre elles */
.accueil-boutons.accueil-boutons-attente a.accueil-tuile { opacity: 1; transform: none; }
.accueil-boutons a.accueil-tuile:hover::after,
.accueil-boutons a.accueil-tuile:focus-visible::after { opacity: .45; }
@media (min-width: 768px) {
  .accueil-tuiles { grid-template-columns: repeat(4, 1fr); }
  .accueil-boutons a.accueil-tuile { aspect-ratio: 2 / 1; font-size: 18px; }
  .accueil-boutons a.accueil-tuile-large { aspect-ratio: 8 / 1; font-size: 22px; }
}

/* ---------- Les réseaux ----------
   Un titre sépare les grandes cases des boutons des réseaux ; sur ordinateur, ces boutons passent à quatre
   par rangée (deux paires côte à côte), la lettre d'information reste seule sur sa ligne. */
.accueil-reseaux-titre {
  margin: 22px 0 0;
  font-family: 'Gentium Plus', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #b7a680;
  text-align: center;
}
@media (min-width: 768px) {
  .accueil-reseaux { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
}

/* ---------- Les boutons du haut ----------
   Un fond noir presque plein : le texte reste lisible quand un hexagone passe derrière.
   Un reflet d'or traverse les boutons l'un après l'autre ; au survol ou à l'appui, le bouton se remplit d'or. */
.accueil-boutons a {
  position: relative;
  overflow: hidden;
  /* un bouton qui rogne son contenu se pose sur sa base : sans cet alignement, chaque rangée gagne 7 px */
  vertical-align: top;
  background-color: rgba(0, 0, 0, .84);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .15s ease;
}
.accueil-boutons a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent 0, rgba(226, 211, 166, .38) 50%, transparent 100%);
  transform: translateX(-130%);
  pointer-events: none;
}
.accueil-boutons a.accueil-boutons-reflet::before { animation: accueil-boutons-reflet 1.1s ease-out; }
@keyframes accueil-boutons-reflet {
  from { transform: translateX(-130%); }
  to   { transform: translateX(330%); }
}
.accueil-boutons a:hover,
.accueil-boutons a:focus-visible {
  background-color: #b7a680;
  color: #000;
  box-shadow: 0 0 18px rgba(183, 166, 128, .45);
}
.accueil-boutons a:hover i,
.accueil-boutons a:focus-visible i { color: #000; }
.accueil-boutons a:active { transform: scale(.98); }
/* Entrée en scène : posée par le script, jamais par défaut — sans script, les boutons restent visibles */
.accueil-boutons.accueil-boutons-attente a { opacity: 0; transform: translateY(12px); }
.accueil-boutons.accueil-boutons-entree a {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease var(--retard, 0s), transform .6s ease var(--retard, 0s),
              background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .accueil-fond-train,
  .accueil-embleme .accueil-embleme-inverse,
  .accueil-boutons a.accueil-boutons-reflet::before { animation: none; }
  .accueil-boutons a { transition: none; }
}