/* =========================================================
   Fouquet Studio — feuille de style personnalisée
   Base éditoriale (noir / blanc) + énergie « sport »
   (accent vermillon, motifs de terrain, typo scoreboard).
   Complète Tailwind (CDN) chargé dans le header.
   ========================================================= */

:root {
  --accent:        #ff3d17;   /* vermillon — énergie terrain */
  --accent-soft:   #ffe9e3;
  --ink-900:       #0a0a0a;
  --ink-700:       #262626;
  --ink-500:       #6e6e6e;
  --ink-300:       #cfcfcf;
  --ink-200:       #e6e6e6;
}

/* --- Base --- */
html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "cv11"; }

::selection { background: var(--accent); color: #fff; }

/* --- Titres display : Bricolage Grotesque --- */
.font-display {
  font-optical-sizing: auto;
  font-weight: 700;
  font-variation-settings: "opsz" 96;
}

/* --- Liens de navigation : soulignement animé --- */
.nav-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  color: var(--ink-700);
  transition: color .2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--ink-900); }

/* --- Apparition à l'arrivée --- */
.reveal { opacity: 0; transform: translateY(22px); animation: rise .9s cubic-bezier(.22,.61,.36,1) forwards; }
.reveal-delay-1 { animation-delay: .08s; }
.reveal-delay-2 { animation-delay: .16s; }
.reveal-delay-3 { animation-delay: .24s; }
.reveal-delay-4 { animation-delay: .32s; }
.reveal-delay-5 { animation-delay: .40s; }
.reveal-delay-6 { animation-delay: .48s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* --- Marqueur « n° » des sections --- */
.section-index {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-500);
}
.section-index .dot { color: var(--accent); }

/* --- Carte de service : remplissage au survol --- */
.service-card { position: relative; overflow: hidden; transition: color .4s ease; }
.service-card::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink-900);
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  z-index: 0;
}
.service-card:hover::before { transform: translateY(0); }
.service-card:hover { color: #fff; }
.service-card:hover .card-accent { color: var(--accent); }
.service-card > * { position: relative; z-index: 1; }

/* --- Carte « club » (variante accent) --- */
.sport-card { position: relative; overflow: hidden; transition: transform .35s ease, border-color .35s ease; }
.sport-card:hover { transform: translateY(-4px); border-color: var(--ink-900); }
.sport-card .sport-icon { transition: transform .4s cubic-bezier(.22,.61,.36,1), color .3s ease; }
.sport-card:hover .sport-icon { transform: translateY(-2px) rotate(-6deg); color: var(--accent); }

/* --- Ticker horizontal --- */
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee .sep { color: var(--accent); }

/* --- Lien souligné animé --- */
.link-line {
  position: relative; display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s ease;
}
.link-line:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* --- Champs du formulaire --- */
.field {
  border: 0; border-bottom: 1px solid var(--ink-300);
  padding: 14px 0; background: transparent; font: inherit;
  width: 100%; outline: none; transition: border-color .25s ease;
}
.field:focus { border-color: var(--accent); }
.field::placeholder { color: #9a9a9a; }

/* --- Menu déroulant (select) accordé au thème --- */
select.field {
  color: var(--ink-900);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
  /* Flèche sur-mesure (chevron) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 16px;
}
select.field:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff3d17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Options du menu déroulant : fond blanc, texte sombre uniforme */
select.field option {
  background-color: #ffffff;
  color: var(--ink-900);
}
select.field option:checked {
  background-color: var(--accent);
  color: #ffffff;
}

/* --- Fond : lignes de terrain pour le hero --- */
.court-bg {
  background-color: transparent;
  background-image:
    linear-gradient(to right,  rgba(10,10,10,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,10,.045) 1px, transparent 1px);
  background-size: 80px 80px;
}
/* Cercle central + ligne médiane, à la manière d'un terrain */
.court-lines {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.court-lines::before {
  content: ""; position: absolute;
  top: 50%; right: -120px; transform: translateY(-50%);
  width: 360px; height: 360px; border-radius: 50%;
  border: 1.5px solid rgba(255,61,23,.22);
}
.court-lines::after {
  content: ""; position: absolute;
  top: 0; bottom: 0; right: 60px; width: 1.5px;
  background: rgba(255,61,23,.16);
}

/* --- Pastille « live / dispo » --- */
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--accent); opacity: .6;
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%,100% { transform: scale(2.4); opacity: 0; } }

/* --- Numéro « maillot » (scoreboard) --- */
.jersey {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; font-variation-settings: "opsz" 96;
  letter-spacing: -.04em; line-height: .8;
}

/* --- Détails responsives / accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .marquee, .pulse-dot::after { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}