/* ============================================================
   accueil_houle.css — variante « La houle » (accueil_houle.php)

   Parti pris : on est sur l'eau, au ras des vagues, un matin de régate.
   La scène 3D porte tout l'effet ; le texte reste posé et lisible par-dessus.

   Palette
     --h-fond    #0b3d4f  mer profonde (bleu pétrole)
     --h-brume   #d9e7ea  brume d'horizon, fond de page
     --h-ciel    #8fbcd0  haut du ciel
     --h-ecume   #fbfaf4  voiles, texte sur la mer
     --h-bouee   #f04e1f  orange du logo : bouée au vent, action principale
   Typographie
     Bricolage Grotesque : titres    Poppins : texte courant (police du site)
   ============================================================ */

body {
  background: #eef4f5;
}

.accueil-houle {
  --h-fond: #0b3d4f;
  --h-brume: #d9e7ea;
  --h-ciel: #8fbcd0;
  --h-ecume: #fbfaf4;
  --h-bouee: #f04e1f;
  --ac-encre: #0b3d4f;
  --ac-texte: #20404b;
  --ac-doux: #567078;
  --ac-trait: #d3e0e3;
  --ac-accent: #f04e1f;
  --ac-lien: #0f6f8c;
  --ac-titre: 'Bricolage Grotesque', 'Poppins', sans-serif;
}

/* ── Scène ── */
.h-scene {
  position: relative;
  height: min(86vh, 780px);
  min-height: 560px;
  overflow: hidden;
  /* ciel : sert aussi de repli quand WebGL n'est pas disponible */
  background: linear-gradient(180deg, var(--h-ciel) 0%, var(--h-brume) 38%, var(--h-brume) 100%);
  display: flex;
  flex-direction: column;
}

.h-scene.h-sans-webgl {
  background: linear-gradient(180deg, var(--h-ciel) 0%, var(--h-brume) 34%, #2f7388 34.2%, var(--h-fond) 100%);
}

#hMer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Voile sombre côté texte, pour la lisibilité */
.h-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 40, 53, .62) 0%, rgba(6, 40, 53, .28) 38%, rgba(6, 40, 53, 0) 62%);
  pointer-events: none;
}

/* ── Flotte : liens posés sur les voiliers ── */
.h-flotte {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.accueil .h-voilier {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: auto;
  border-radius: 10px;
  text-decoration: none;
}

.h-etiquette {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(calc(-50% + var(--dx, 0px)), 4px);
  padding: 6px 12px 7px;
  border-radius: 10px;
  background: var(--h-ecume);
  color: var(--h-fond);
  font-size: .8rem;
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 6px 18px rgba(4, 32, 43, .28);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

.h-etiquette::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--dx, 0px));
  top: 100%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--h-ecume);
}

.h-etiquette b {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.h-voilier.h-proche .h-etiquette,
.h-voilier:hover .h-etiquette,
.h-voilier:focus-visible .h-etiquette {
  opacity: 1;
  transform: translate(calc(-50% + var(--dx, 0px)), -4px);
}

.h-voilier:hover,
.h-voilier:focus-visible {
  z-index: 100000 !important;
}

.h-voilier.h-prochaine .h-etiquette {
  background: var(--h-bouee);
  color: #fff;
}

.h-voilier.h-prochaine .h-etiquette::after {
  border-top-color: var(--h-bouee);
}

/* ── Texte ── */
.h-contenu {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.h-accroche {
  max-width: 560px;
  pointer-events: auto;
}

.accueil .h-accroche h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.3rem);
  letter-spacing: -.02em;
  line-height: .98;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(4, 32, 43, .45);
}

.h-accroche p {
  max-width: 32em;
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .92);
  font-size: 1.05rem;
  text-shadow: 0 1px 12px rgba(4, 32, 43, .5);
}

.accueil .h-btn-second {
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  background: rgba(6, 40, 53, .25);
}

.accueil .h-btn-second:hover {
  background: #fff;
  color: var(--h-fond);
  border-color: #fff;
}

/* ── Bandeau bas de scène ── */
.h-pied {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, rgba(6, 40, 53, 0), rgba(6, 40, 53, .78) 55%);
  color: rgba(255, 255, 255, .9);
  pointer-events: none;
}

.h-pied-int {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  padding-top: 44px;
  padding-bottom: 18px;
}

.h-pied-int > * {
  pointer-events: auto;
}

.h-compte {
  font-family: var(--ac-titre);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.h-pied-texte {
  flex: 1 1 320px;
}

/* Défilement vertical des régates partant le même jour (cf. script de index.php) */
.h-defile {
  overflow: hidden;
}

.h-defile-piste {
  display: block;
}

.h-defile-item {
  display: block;
}

.h-defile.est-actif .h-defile-piste {
  transition: transform 1.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .h-defile.est-actif .h-defile-piste {
    transition: none;
  }
}

.h-pied-texte strong {
  color: #fff;
}

.accueil .h-pied a {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.h-legende {
  font-size: .82rem;
  color: rgba(255, 255, 255, .75);
}

/* ── Écrans étroits ── */
@media (max-width: 900px) {
  .h-scene {
    height: auto;
    min-height: 620px;
  }

  .h-scene::after {
    background: linear-gradient(180deg, rgba(6, 40, 53, 0) 30%, rgba(6, 40, 53, .6) 62%);
  }

  .h-contenu {
    align-items: flex-end;
    padding-top: 250px;
  }

  .h-etiquette b {
    max-width: 170px;
  }
}