/* =============================================================================
   BOBSPORT.CI — page d'attente
   Monochrome, relevé sur le logotype : noir pur, blanc pur, gris de service.
   Montserrat, sans capitales forcées.
   ============================================================================= */

:root {
  --encre: #000000;
  --blanc: #FFFFFF;
  /* Gris de service, mesurés pour rester lisibles sur photographie sombre. */
  --brume: rgba(255, 255, 255, .80);
  --filet: rgba(255, 255, 255, .22);
  --texte: "Montserrat", system-ui, -apple-system, sans-serif;

  --marge: clamp(22px, 5vw, 72px);
  --doux: cubic-bezier(.22, 1, .36, 1);

  /* Un seul endroit pour la cadence du fond : le script lit ces valeurs,
     de sorte que le rythme visuel et le minuteur ne divergent jamais. */
  --duree-vue: 6s;      /* temps d'affichage d'une photographie */
  --duree-fondu: 1.6s;  /* recouvrement entre deux photographies */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.7;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blanc);
  outline-offset: 4px;
}

/* ---------- le héros ---------- */

.heros {
  position: relative;
  /* `dvh` suit la barre d'adresse mobile, qui se rétracte au défilement ;
     `vh` laisserait un saut de plusieurs dizaines de pixels. Le `min-height`
     en `vh` sert de repli aux navigateurs qui ignorent `dvh`. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Le retrait vertical suit la hauteur d'écran : sur un téléphone, 9vh en
     haut et en bas suffisaient à faire déborder le message hors de la
     fenêtre — or tout doit se lire d'un coup d'œil sur une page d'attente. */
  padding: clamp(34px, 5.5vh, 96px) var(--marge);
  overflow: hidden;
  isolation: isolate;
}

.heros__fonds {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--encre);
}

/* Les quatre photographies sont empilées : une seule est visible, les autres
   attendent à opacité nulle. Un fondu croisé ne demande alors qu'un échange
   de classe — aucun décalage de mise en page, donc aucun scintillement. */
.heros__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;   /* les silhouettes sont dans le tiers haut */
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--duree-fondu) var(--doux);
  will-change: opacity, transform;
}

.heros__fond.est-visible {
  opacity: 1;
  /* Lent recadrage pendant toute la durée d'affichage, fondu compris : la
     photographie respire au lieu de rester figée. */
  animation: respiration calc(var(--duree-vue) + var(--duree-fondu)) linear forwards;
}

@keyframes respiration {
  from { transform: scale(1.06); }
  to   { transform: scale(1.15); }
}

/* Voile sombre : sans lui, le texte blanc passe sur les zones claires des
   photographies — les intérieurs de boutique sont très lumineux. Dégradé
   plutôt qu'aplat, pour que les vêtements restent lisibles sur les bords.
   Le creux à 38 % est le point le plus clair du voile ; c'est là que tombe le
   chapeau, et il a fallu l'assombrir de .52 à .58 pour tenir le rapport de
   contraste 4,5:1 sur la photographie la plus lumineuse. */
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.82) 100%),
    rgba(0, 0, 0, .18);
}

.heros__contenu {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

/* ---------- identité et message ---------- */

.marque {
  display: block;
  width: clamp(190px, 34vw, 300px);
  height: auto;
  margin: 0 auto clamp(26px, 5vh, 44px);
}

.surtitre {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--brume);
}

.titre {
  margin: 0;
  font-size: clamp(30px, 7vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.chapeau {
  margin: 18px auto 0;
  max-width: 40ch;
  font-size: 14px;
  color: var(--brume);
}

/* ---------- coordonnées ---------- */

.contacts {
  margin-top: clamp(24px, 4.5vh, 52px);
  padding-top: clamp(20px, 3.5vh, 36px);
  border-top: 1px solid var(--filet);
}

.contacts__titre {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--brume);
}

/* E-mail et WhatsApp : les deux voies que l'on veut voir en premier, chacune
   sur toute la largeur — l'adresse est de toute façon trop longue pour une
   colonne. */
.contacts__liste {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Les trois boutiques, centrées en bloc. Une grille les aurait réparties sur
   des colonnes de largeur fixe, laissant un vide à droite dès que leur nombre
   ne tombe pas juste ; en flux centré, elles restent groupées au milieu quel
   que soit le nombre de numéros et quelle que soit la largeur d'écran —
   y compris lorsqu'un dernier numéro passe seul à la ligne. */
.contacts__boutiques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px clamp(20px, 4vw, 44px);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.contacts__etiquette {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--brume);
  margin-bottom: 4px;
}

.contacts__valeur {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 2px;
  /* Une adresse longue doit pouvoir se couper plutôt que déborder. */
  overflow-wrap: anywhere;
  transition: border-color .25s var(--doux);
}

.contacts__entree--large .contacts__valeur { font-size: clamp(17px, 3.4vw, 22px); }

.contacts__valeur:hover { border-bottom-color: var(--blanc); }

.contacts__social {
  margin: 26px 0 0;
  font-size: 13px;
}

.contacts__social a {
  text-decoration: none;
  color: var(--brume);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .25s var(--doux), border-color .25s var(--doux);
}

.contacts__social a:hover {
  color: var(--blanc);
  border-bottom-color: var(--filet);
}

/* ---------- pied ---------- */

.pied {
  position: relative;
  margin: clamp(36px, 7vh, 64px) 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--brume);
}

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

/* Le défilement est une décoration. Qui demande moins de mouvement garde une
   seule photographie, nette et fixe : le message et les coordonnées, eux, ne
   dépendent à aucun moment de l'animation. */
@media (prefers-reduced-motion: reduce) {
  .heros__fond {
    transition: none;
    transform: none;
    animation: none;
  }
  .heros__fond.est-visible { animation: none; transform: none; }
  .contacts__valeur, .contacts__social a { transition: none; }
}