/* =========================================================================
   Ski Club Guebwiller — Charte graphique 2026
   Palette inspirée du refuge du Roedelen, de la forêt vosgienne et du
   logo historique du club (bleu marine / rouge des skis).
   ========================================================================= */

:root {
  /* Couleurs de marque */
  --scg-pine: #1f4739;        /* vert sapin - couleur principale */
  --scg-pine-dark: #143028;
  --scg-navy: #1c3552;        /* bleu du logo */
  --scg-coral: #d9603f;       /* rouge/corail des skis du logo */
  --scg-coral-dark: #b84c2f;
  --scg-snow: #f7f7f2;        /* blanc cassé "neige" - fond de page */
  --scg-ice: #eaf1f0;         /* fond de section alterné */
  --scg-ink: #1e2624;         /* texte principal */
  --scg-muted: #5b6b64;       /* texte secondaire */
  --scg-border: #dde3df;

  --scg-radius: 14px;
  --scg-shadow: 0 6px 24px rgba(20, 40, 32, 0.10);
  --scg-shadow-hover: 0 10px 30px rgba(20, 40, 32, 0.16);
  --scg-font-title: "Fraunces", "Georgia", serif;
  --scg-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

/* Filet de sécurité anti-débordement horizontal sur mobile : un mot très long
   (URL non coupée, nom de fichier, etc.) ne doit jamais forcer un scroll
   horizontal de toute la page. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  font-family: var(--scg-font-body);
  color: var(--scg-ink);
  background-color: var(--scg-snow);
  padding-top: 76px; /* hauteur de la nav fixe */
}

/* Tout texte issu du contenu des billets (BBcode) peut contenir un mot très
   long (URL de PDF, etc.) : on force la coupure pour qu'il ne déborde jamais
   de son conteneur, notamment sur petit écran. On couvre largement (titres,
   paragraphes, liens, listes, cellules de tableau) et on double la propriété
   moderne (overflow-wrap) avec l'ancienne (word-break) pour la compatibilité
   avec les navigateurs mobiles plus anciens. */
p, h1, h2, h3, h4, h5, h6, a, li, td, th, .scg-news-item, .billet-contenu, .carousel-caption {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Images et PDF embarqués dans le contenu des billets : ne jamais dépasser
   la largeur du conteneur, même si le HTML généré porte un attribut width
   en dur. */
.billet-contenu img,
.billet-contenu embed,
.scg-news-item img {
  max-width: 100% !important;
  height: auto;
}

h1, h2, h3, h4, .scg-serif {
  font-family: var(--scg-font-title);
  font-weight: 600;
  color: var(--scg-pine-dark);
}

a { color: var(--scg-navy); }
a:hover { color: var(--scg-coral); }

.scg-lead {
  color: var(--scg-muted);
  font-size: 1.1rem;
}

/* ---------- Navigation ---------- */
.scg-navbar {
  background-color: rgba(247, 247, 242, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(20, 40, 32, 0.08);
}

.scg-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--scg-font-title);
  font-weight: 700;
  color: var(--scg-pine-dark);
  font-size: 1.25rem;
}

.scg-navbar .navbar-brand img {
  height: 42px;
  width: auto;
}

.scg-navbar .nav-link {
  color: var(--scg-ink);
  font-weight: 500;
  margin: 0 0.15rem;
  border-radius: 8px;
  padding: 0.5rem 0.9rem !important;
  transition: background-color .15s ease, color .15s ease;
}

.scg-navbar .nav-link:hover,
.scg-navbar .nav-link.active {
  background-color: var(--scg-ice);
  color: var(--scg-pine-dark);
}

.scg-navbar .btn-scg-member {
  background-color: var(--scg-coral);
  color: #fff;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
}
.scg-navbar .btn-scg-member:hover { background-color: var(--scg-coral-dark); color: #fff; }

/* ---------- Boutons ---------- */
.btn-scg-primary {
  background-color: var(--scg-pine);
  border-color: var(--scg-pine);
  color: #fff;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-scg-primary:hover {
  background-color: var(--scg-pine-dark);
  border-color: var(--scg-pine-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-scg-outline {
  background-color: transparent;
  border: 2px solid var(--scg-pine);
  color: var(--scg-pine);
  border-radius: 999px;
  padding: 0.5rem 1.3rem;
  font-weight: 600;
}
.btn-scg-outline:hover { background-color: var(--scg-pine); color: #fff; }

/* ---------- Layout général ---------- */
.scg-main {
  min-height: 70vh;
}

.scg-page-content {
  background-color: #fff;
  border-radius: var(--scg-radius);
  box-shadow: var(--scg-shadow);
  padding: 2.5rem;
  margin-top: -3.5rem; /* chevauche légèrement le bandeau de tête */
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .scg-page-content { padding: 1.5rem; margin-top: -2rem; }
}

/* Bandeau d'en-tête de page (remplace le fond plein écran) */
.scg-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 5.5rem 1rem 7rem;
  text-align: center;
}
.scg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,48,40,0.35) 0%, rgba(20,48,40,0.75) 100%);
}
.scg-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.scg-hero h1 { color: #fff; font-size: 2.6rem; margin-bottom: 0.6rem; }
.scg-hero p { color: #f0f3f1; font-size: 1.1rem; }

.scg-hero-sm { padding: 3.5rem 1rem 5.5rem; }
.scg-hero-sm h1 { font-size: 2rem; }

/* ---------- Cartes ---------- */
.scg-card {
  border: none;
  border-radius: var(--scg-radius);
  overflow: hidden;
  box-shadow: var(--scg-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.scg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--scg-shadow-hover);
}
.scg-card img.card-img-top { aspect-ratio: 16/10; object-fit: cover; }
.scg-card .card-body { padding: 1.4rem; }
.scg-card .card-title { font-family: var(--scg-font-title); }

/* ---------- Actualités ---------- */
.scg-news-item {
  display: flex;
  gap: 1.2rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--scg-border);
}
.scg-news-item:last-child { border-bottom: none; }
/* Par défaut, un enfant flex ne peut pas rétrécir sous sa largeur de contenu
   (min-width: auto) : un mot très long (URL, nom de fichier) forçait donc le
   bloc à déborder de l'écran sur mobile au lieu de passer à la ligne. */
.scg-news-item > .flex-grow-1 { min-width: 0; }
.scg-news-badge {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--scg-ice);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.scg-news-badge img { max-width: 70%; max-height: 70%; }
.scg-news-item h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.scg-news-item h3 a { color: var(--scg-pine-dark); text-decoration: none; }
.scg-news-item h3 a:hover { color: var(--scg-coral); }

/* ---------- Formulaires ---------- */
.scg-form label { font-weight: 600; color: var(--scg-pine-dark); }
.scg-form .form-control, .scg-form .form-select {
  border-radius: 10px;
  border-color: var(--scg-border);
  padding: 0.6rem 0.9rem;
}
.scg-form .form-control:focus, .scg-form .form-select:focus {
  border-color: var(--scg-pine);
  box-shadow: 0 0 0 0.2rem rgba(31, 71, 57, 0.15);
}

.scg-alert-error {
  background-color: #fdecea;
  border: 1px solid #f2b9ae;
  color: #8a2c1c;
  border-radius: 10px;
  padding: 1rem 1.2rem;
}
.scg-alert-success {
  background-color: #e9f4ee;
  border: 1px solid #b9dcc6;
  color: #1f4739;
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

/* ---------- Footer ---------- */
.scg-footer {
  background-color: var(--scg-pine-dark);
  color: #dfe8e3;
  margin-top: 4rem;
}
.scg-footer h6 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}
.scg-footer a { color: #cfe0d8; text-decoration: none; }
.scg-footer a:hover { color: #fff; }
.scg-footer .scg-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1rem 0;
  font-size: 0.85rem;
  color: #b7c9c0;
  text-align: center;
}

/* ---------- Divers ---------- */
.scg-section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}
.scg-section-title h2 { font-size: 2rem; }
.scg-section-title .scg-kicker {
  display: inline-block;
  color: var(--scg-coral);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

#map { height: 420px; border-radius: var(--scg-radius); box-shadow: var(--scg-shadow); }