/* =========================================================================
   CAMPING AGATOS — site.css
   Archétype : « Mountain nature retreat / badge outdoors vintage » (parc naturel).
   Signature : BADGE D'ALTITUDE circulaire (emblème), fond en COURBES
   TOPOGRAPHIQUES (SVG), titres slab-serif, listes à puces sapin.
   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: #234e37;            /* vert pin (dominante) */
  --bs-primary-rgb: 35, 78, 55;
  --bs-warning: #e0a82e;            /* jaune-or soleil (accent) */
  --bs-warning-rgb: 224, 168, 46;

  --ag-pine: #234e37;
  --ag-pine-deep: #173524;
  --ag-pine-soft: #356b4d;
  --ag-gold: #e0a82e;
  --ag-gold-deep: #c08c1c;
  --ag-cream: #f4eee0;
  --ag-cream-deep: #ece2cd;
  --ag-bark: #231c12;
  --ag-ink: #2c2519;

  --bs-body-bg: var(--ag-cream);
  --bs-body-color: var(--ag-ink);
  --bs-body-font-family: 'Cabin', system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1.06rem;
  --bs-body-line-height: 1.75;

  --bs-heading-color: var(--ag-pine-deep);
  --bs-link-color: var(--ag-pine);
  --bs-link-color-rgb: 35, 78, 55;
  --bs-link-hover-color: var(--ag-gold-deep);
  --bs-border-color: #ddd0b4;

  --bs-dark: #173524;
  --bs-dark-rgb: 23, 53, 36;
  --bs-light: #fbf7ec;
  --bs-light-rgb: 251, 247, 236;

  --ag-shadow: 0 20px 44px -24px rgba(23, 53, 36, 0.4), 0 6px 14px -10px rgba(23, 53, 36, 0.25);
}

/* fond crème + courbes topographiques + halos chauds (signature de profondeur) */
body {
  background-color: var(--ag-cream);
  background-image:
    radial-gradient(1100px 540px at 88% -10%, rgba(224, 168, 46, 0.16), transparent 60%),
    radial-gradient(900px 480px at -6% 2%, rgba(35, 78, 55, 0.10), transparent 56%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='320' viewBox='0 0 480 320'%3E%3Cg fill='none' stroke='%23234e37' stroke-width='1.2' opacity='0.06'%3E%3Cpath d='M-20,120 C80,60 180,160 280,110 C380,60 460,140 520,100'/%3E%3Cpath d='M-20,160 C80,100 180,200 280,150 C380,100 460,180 520,140'/%3E%3Cpath d='M-20,200 C80,140 180,240 280,190 C380,140 460,220 520,180'/%3E%3Cpath d='M-20,240 C80,180 180,280 280,230 C380,180 460,260 520,220'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typographie slab outdoors ---------- */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.display-1, .display-2, .display-3 { font-weight: 800; }
.lead { font-weight: 500; font-size: 1.28rem; }
p { text-wrap: pretty; }
::selection { background: var(--ag-gold); color: var(--ag-pine-deep); }
a { transition: color 0.18s ease; }
.text-uppercase.fw-bold { letter-spacing: 0.16em; }

/* =========================================================================
   NAVBAR
   ========================================================================= */
.navbar.sticky-top {
  background-color: rgba(244, 238, 224, 0.92) !important;
  backdrop-filter: saturate(150%) blur(9px);
  -webkit-backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 3px solid var(--ag-pine);
  box-shadow: 0 8px 24px -20px rgba(23, 53, 36, 0.7);
}
.navbar-brand span.fw-bold { font-size: 1.3rem; color: var(--ag-pine-deep); }
#brand-badge {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--ag-pine); color: var(--ag-gold);
  border: 2px solid var(--ag-pine-deep);
  font-size: 1.15rem;
}
#brand-sub { color: var(--ag-gold-deep); letter-spacing: 0.1em; font-size: 0.7rem; }
.navbar .nav-link {
  font-weight: 600;
  color: var(--ag-ink) !important;
  position: relative;
  padding-inline: 0.9rem;
}
.navbar .nav-link::after {
  content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem;
  height: 3px; background: var(--ag-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .nav-link:hover::after, .navbar .nav-link:focus::after { transform: scaleX(1); }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--ag-pine) !important; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn {
  --bs-btn-font-family: 'Bitter', serif;
  --bs-btn-font-weight: 600;
  border-radius: 6px;
  border-width: 2px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn-lg { padding: 0.65rem 1.6rem; }
.btn-primary {
  --bs-btn-bg: var(--ag-pine);
  --bs-btn-border-color: var(--ag-pine);
  --bs-btn-hover-bg: var(--ag-pine-deep);
  --bs-btn-hover-border-color: var(--ag-pine-deep);
  --bs-btn-active-bg: var(--ag-pine-deep);
  box-shadow: 0 10px 22px -12px rgba(35, 78, 55, 0.7);
}
.btn-warning {
  --bs-btn-bg: var(--ag-gold);
  --bs-btn-color: var(--ag-pine-deep);
  --bs-btn-border-color: var(--ag-gold-deep);
  --bs-btn-hover-bg: var(--ag-gold-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--ag-gold-deep);
}
.btn-outline-dark { --bs-btn-border-color: var(--ag-pine); --bs-btn-color: var(--ag-pine); --bs-btn-hover-bg: var(--ag-pine); --bs-btn-hover-border-color: var(--ag-pine); }
.btn-light { --bs-btn-color: var(--ag-pine-deep); --bs-btn-bg: #fff; font-weight: 700; }
.btn-primary:hover, .btn-warning:hover { transform: translateY(-2px); }

/* =========================================================================
   HERO + BADGE D'ALTITUDE (signature)
   ========================================================================= */
#hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
#hero-eyebrow, #intro-eyebrow { color: var(--ag-gold-deep); }
#hero-figure, #intro-figure, #paese-figure {
  border: 4px solid #fff;
  border-radius: 14px;
  overflow: visible;
  box-shadow: var(--ag-shadow);
}
#hero-figure img, #intro-figure img, #paese-figure img { display: block; border-radius: 10px; }

#altitude-badge {
  position: absolute;
  left: -22px; bottom: -22px;
  width: 116px; height: 116px;
  border-radius: 50%;
  background: var(--ag-pine);
  color: #fff;
  border: 3px solid var(--ag-gold);
  box-shadow: 0 0 0 5px var(--ag-pine), var(--ag-shadow);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  transform: rotate(-8deg);
}
#altitude-num { font-family: 'Bitter', serif; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--ag-gold); }
#altitude-unit { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

/* =========================================================================
   CARTES
   ========================================================================= */
.card.border-0 {
  background: #fff;
  border-radius: 14px !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: var(--ag-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card.border-0:hover { transform: translateY(-5px); border-color: var(--ag-gold) !important; box-shadow: 0 28px 50px -26px rgba(23, 53, 36, 0.5); }

#tipologia-icon {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--ag-cream-deep);
  border: 2px dashed var(--ag-pine);
  color: var(--ag-pine);
  font-size: 1.7rem;
}
.card.border-0:hover #tipologia-icon { background: var(--ag-pine); color: var(--ag-gold); border-style: solid; }
#voce-icon { color: var(--ag-pine); font-size: 1.4rem; }
#recapito-label { color: var(--ag-gold-deep); }

/* =========================================================================
   SECTIONS / BLOCS
   ========================================================================= */
#page-head h1, #paese-hero h1 { position: relative; display: inline-block; padding-bottom: 0.5rem; }
#page-head h1::after, #paese-hero h1::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 62%; height: 5px; background: var(--ag-gold);
}
#tipologie h2 { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); }

#cta-block, #privacy-block {
  background: linear-gradient(135deg, var(--ag-pine), var(--ag-pine-deep)) !important;
  box-shadow: var(--ag-shadow);
}
#cta-block { border: 1px solid var(--ag-pine-deep); }
#cta-block::after {
  content: ''; position: absolute; right: -40px; bottom: -50px;
  width: 220px; height: 220px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cpath d='M110 30 L180 170 L40 170 Z' fill='none' stroke='%23e0a82e' stroke-width='4' opacity='0.25'/%3E%3C/svg%3E") no-repeat;
}
#cta-block h2, #cta-block p { color: #fff; position: relative; z-index: 1; }

#continua { color: var(--ag-gold-deep); letter-spacing: 0.04em; }
#paese-testo .fs-5 { text-align: justify; }

/* =========================================================================
   FORMULAIRES
   ========================================================================= */
.form-control {
  background: #fff;
  border: 2px solid var(--bs-border-color);
  border-radius: 6px;
}
.form-control:focus { border-color: var(--ag-pine); box-shadow: 0 0 0 0.2rem rgba(35, 78, 55, 0.18); }
.form-label { font-weight: 700; color: var(--ag-pine-deep); font-family: 'Bitter', serif; }
.form-check-input:checked { background-color: var(--ag-pine); border-color: var(--ag-pine); }
#privacy-block .form-check-label { color: #fff; }
#webmaster a { color: var(--ag-pine); }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer.bg-dark {
  background: linear-gradient(180deg, var(--ag-pine-deep), var(--ag-bark)) !important;
  border-top: 4px solid var(--ag-gold);
}
footer.bg-dark .h3 { color: var(--ag-cream); font-family: 'Bitter', serif; }
#footer-baseline { color: var(--ag-gold); }
footer.bg-dark .text-uppercase.fw-bold { color: var(--ag-gold) !important; }
footer.bg-dark a:hover { color: var(--ag-gold) !important; }
footer.bg-dark .bi { color: var(--ag-gold); }
footer.bg-dark hr { border-top-color: rgba(224, 168, 46, 0.3); }

/* =========================================================================
   divers
   ========================================================================= */
.bg-light { background-color: var(--ag-cream-deep) !important; }
hr { border-top: 2px solid var(--bs-border-color); opacity: 1; }
.text-warning { color: var(--ag-gold) !important; }

/* =========================================================================
   ACCESSIBILITÉ & RESPONSIVE
   ========================================================================= */
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible {
  outline: 3px solid var(--ag-gold);
  outline-offset: 2px;
}
@media (max-width: 991.98px) {
  .display-1 { font-size: 3rem; }
  .display-2 { font-size: 2.7rem; }
  #altitude-badge { width: 92px; height: 92px; left: 12px; bottom: -16px; }
  #altitude-num { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card.border-0:hover, .btn-primary:hover, .btn-warning:hover { transform: none; }
}