/* =========================================================================
   SURF TEAM TRIESTE — site.css
   Archétype : « Aquatic sport dynamic » (vento & onda, énergie mer/vent).
   Signature : séparateurs en VAGUE (SVG) + traits de vent + cadres image à
   ombre dure cyan + type condensée athlétique (Barlow Condensed).
   ANTI-FOOTPRINT : aucune classe custom — on ne style QUE des classes/ids
   Bootstrap existants, des éléments et des pseudo-éléments.
   ========================================================================= */

:root {
  --bs-primary: #0b3a5b;            /* bleu marine profond (dominante) */
  --bs-primary-rgb: 11, 58, 91;
  --bs-info: #16bbd0;               /* cyan spray (accent) */
  --bs-info-rgb: 22, 187, 208;

  --st-navy: #0b3a5b;
  --st-navy-deep: #06263c;
  --st-cyan: #16bbd0;
  --st-cyan-deep: #0f93a6;
  --st-sand: #f5b833;
  --st-foam: #eef5f8;
  --st-foam-deep: #dde9ef;
  --st-ink: #11242f;

  --bs-body-bg: var(--st-foam);
  --bs-body-color: var(--st-ink);
  --bs-body-font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1.05rem;
  --bs-body-line-height: 1.7;

  --bs-heading-color: var(--st-navy);
  --bs-link-color: var(--st-cyan-deep);
  --bs-link-color-rgb: 15, 147, 166;
  --bs-link-hover-color: var(--st-navy);
  --bs-border-color: #cfdfe7;

  --bs-dark: #06263c;
  --bs-dark-rgb: 6, 38, 60;
  --bs-light: #f4f9fb;
  --bs-light-rgb: 244, 249, 251;

  --st-shadow: 0 22px 44px -24px rgba(6, 38, 60, 0.45);
  --st-hard-cyan: 10px 10px 0 var(--st-cyan);
}

body {
  background-color: var(--st-foam);
  background-image:
    radial-gradient(1100px 540px at 88% -10%, rgba(22, 187, 208, 0.16), transparent 60%),
    radial-gradient(900px 480px at -6% 4%, rgba(11, 58, 91, 0.08), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typographie athlétique condensée ---------- */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
.display-1, .display-2, .display-3, .display-4 { font-weight: 800; }
.text-uppercase { letter-spacing: 0.04em; }
.lead { font-weight: 500; font-size: 1.3rem; }
p { text-wrap: pretty; }
::selection { background: var(--st-cyan); color: var(--st-navy-deep); }
a { transition: color 0.18s ease; }

/* =========================================================================
   NAVBAR
   ========================================================================= */
.navbar.navbar-dark.sticky-top {
  background: linear-gradient(180deg, var(--st-navy-deep), var(--st-navy)) !important;
  border-bottom: 3px solid var(--st-cyan);
  box-shadow: 0 8px 26px -18px rgba(6, 38, 60, 0.9);
}
.navbar-brand span:first-child { font-size: 1.55rem; letter-spacing: 0.06em; }
#brand-sub { color: var(--st-cyan); letter-spacing: 0.18em; font-size: 0.62rem; }
.navbar-dark .nav-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.82) !important;
  position: relative;
  padding-inline: 0.9rem;
}
.navbar-dark .nav-link::after {
  content: '';
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.35rem;
  height: 3px; background: var(--st-cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar-dark .nav-link:hover::after, .navbar-dark .nav-link:focus::after { transform: scaleX(1); }
.navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus { color: #fff !important; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn {
  --bs-btn-font-family: 'Barlow Condensed', sans-serif;
  --bs-btn-font-weight: 600;
  font-size: 1.1rem;
  border-radius: 3px;
  border-width: 2px;
  letter-spacing: 0.05em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn-lg { padding: 0.6rem 1.7rem; font-size: 1.25rem; }
.btn-primary {
  --bs-btn-bg: var(--st-cyan);
  --bs-btn-color: var(--st-navy-deep);
  --bs-btn-border-color: var(--st-cyan);
  --bs-btn-hover-bg: var(--st-cyan-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--st-cyan-deep);
  --bs-btn-active-bg: var(--st-cyan-deep);
  font-weight: 700;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(22, 187, 208, 0.8); }
.btn-outline-light { --bs-btn-border-color: rgba(255,255,255,0.6); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--st-navy); }
.btn-light { --bs-btn-color: var(--st-navy); --bs-btn-bg: #fff; font-weight: 700; }
.btn-outline-dark { --bs-btn-border-color: var(--st-navy); --bs-btn-hover-bg: var(--st-navy); }

/* =========================================================================
   HERO — bande marine + séparateur VAGUE (signature)
   ========================================================================= */
#hero {
  background:
    linear-gradient(150deg, var(--st-navy) 0%, var(--st-navy-deep) 100%);
  color: #fff;
  padding-bottom: 5.5rem;
}
#hero h1 { color: #fff; font-size: clamp(3rem, 7vw, 6rem); }
#hero .lead { color: rgba(255, 255, 255, 0.82); }
#hero-eyebrow, #intro-eyebrow { color: var(--st-cyan); letter-spacing: 0.22em; }
#hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
  background: var(--st-foam);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L0,40 C150,10 300,70 480,50 C660,30 820,0 1000,18 C1100,28 1160,45 1200,40 L1200,80 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80 L0,40 C150,10 300,70 480,50 C660,30 820,0 1000,18 C1100,28 1160,45 1200,40 L1200,80 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}

/* cadres image dynamiques à ombre dure cyan */
#hero-figure, #intro-figure, #gare-figure, #corso-figure {
  border: 3px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--st-hard-cyan);
}
#hero-figure { border-color: rgba(255,255,255,0.9); }
#gare-figure { box-shadow: 12px 12px 0 var(--st-sand); }
#hero-figure img, #intro-figure img, #gare-figure img, #corso-figure img { display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
#intro-figure:hover img, #corso-figure:hover img { transform: scale(1.04); }

/* =========================================================================
   CARTES
   ========================================================================= */
.card.border-0 {
  background: #fff;
  border-radius: 10px !important;
  border-top: 4px solid var(--st-cyan) !important;
  box-shadow: var(--st-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card.border-0:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -26px rgba(6, 38, 60, 0.55); }
a:hover .card.border-0 { border-top-color: var(--st-navy) !important; }
#dotazione-icon, #link-icon { color: var(--st-cyan-deep); }

/* eyebrows */
.text-uppercase.fw-bold { letter-spacing: 0.18em; }

/* =========================================================================
   SECTIONS / BLOCS
   ========================================================================= */
#page-head h1 { position: relative; display: inline-block; padding-bottom: 0.5rem; }
#page-head h1::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 64%; height: 5px; background: var(--st-cyan);
}
#intro-eyebrow { color: var(--st-cyan-deep); }

#affil-block {
  background: linear-gradient(135deg, var(--st-navy), var(--st-cyan-deep)) !important;
  box-shadow: var(--st-shadow);
  position: relative; overflow: hidden;
}
#affil-block::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border: 6px solid rgba(255,255,255,0.12); border-radius: 50%;
}
#affil-block h2, #affil-block .small { color: #fff; position: relative; z-index: 1; }
#info-block { background: var(--st-navy-deep) !important; box-shadow: var(--st-shadow); }
#info-block .h5 { color: var(--st-cyan); }
#corso-nota { color: var(--st-cyan-deep); letter-spacing: 0.08em; }

#extra .rounded-4 { background: linear-gradient(135deg, var(--st-navy), var(--st-navy-deep)) !important; }
#extra h2 { color: #fff; }

/* embeds */
.ratio iframe { border: 0; }
#windy-wrap, #map-wrap, #cam-wrap, #cam-placeholder {
  border: 3px solid var(--st-navy);
  box-shadow: var(--st-shadow);
}
#cam-placeholder { background: var(--st-foam-deep); color: var(--st-navy); }
#cam-placeholder .bi { color: var(--st-cyan-deep); }

/* =========================================================================
   FOOTER — marine + vague en tête
   ========================================================================= */
footer.bg-dark {
  background: linear-gradient(180deg, var(--st-navy), var(--st-navy-deep)) !important;
  border-top: 4px solid var(--st-cyan);
  position: relative;
}
footer.bg-dark .h3 { color: #fff; }
#footer-baseline { color: var(--st-cyan); letter-spacing: 0.14em; }
footer.bg-dark .text-uppercase.fw-bold { color: var(--st-cyan) !important; }
footer.bg-dark a:hover { color: var(--st-cyan) !important; }
footer.bg-dark .bi { color: var(--st-cyan); }
footer.bg-dark hr { border-top-color: rgba(22, 187, 208, 0.3); }

/* =========================================================================
   divers
   ========================================================================= */
.bg-light { background-color: var(--st-foam-deep) !important; }
hr { border-top: 2px solid var(--bs-border-color); opacity: 1; }
.text-info { color: var(--st-cyan) !important; }

/* =========================================================================
   ACCESSIBILITÉ & RESPONSIVE
   ========================================================================= */
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--st-cyan);
  outline-offset: 2px;
}
@media (max-width: 991.98px) {
  #hero { padding-bottom: 4rem; }
  .display-1 { font-size: 3.2rem; }
  #hero-figure, #intro-figure, #gare-figure, #corso-figure { box-shadow: 6px 6px 0 var(--st-cyan); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card.border-0:hover, .btn-primary:hover { transform: none; }
  #intro-figure:hover img, #corso-figure:hover img { transform: none; }
}