/*
Theme Name: Astra SNTM
Template: astra
Version: 1.0
Description: Thème enfant Astra pour le site SNTM
*/

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --clr-accent:  #066d16;
  --clr-river:   #1a6e82;
  --clr-text:    #172a19;
  --clr-muted:   #5a7260;
  --clr-ground:  #f4faf5;
  --clr-border:  #cde0cf;
  --ff-display:  'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --ff-body:     'Nunito Sans', system-ui, sans-serif;
}

/* ── Typographie globale ─────────────────────────────────────────────────── */
body, p {
  font-family: var(--ff-body);
  line-height: 1.75;
  color: var(--clr-text);
}

a {
  color: var(--clr-accent);
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ── H1 avec pagaie animée ───────────────────────────────────────────────── */
h1 {
  font-family:    var(--ff-display);
  font-size:      clamp(2.4rem, 5vw, 3.6rem);
  font-weight:    700;
  letter-spacing: -0.01em;
  line-height:    1.1;
  text-transform: uppercase;
  color:          var(--clr-text);
  position:       relative;
  display:        inline-block;
  padding-bottom: 20px;
}

h1::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             50%;
  transform:        translateX(-50%);
  width:            220px;
  height:           20px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 20'><path d='M38,9 L27,3 L5,3 Q1,3 1,10 Q1,17 5,17 L27,17 L38,11 Z' fill='%23066d16'/><rect x='38' y='9' width='144' height='2' rx='1' fill='%23066d16'/><path d='M182,9 L193,3 L215,3 Q219,3 219,10 Q219,17 215,17 L193,17 L182,11 Z' fill='%23066d16'/></svg>");
  background-repeat: no-repeat;
  background-size:   100% 100%;
}

.no-pagaie {
  h1::after {
    display: none;
  }
}


/* ── H2 avec pagaie verticale ────────────────────────────────────────────── */
h2 {
  font-family:    var(--ff-display);
  font-size:      clamp(1.5rem, 3vw, 2.1rem);
  font-weight:    700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color:          var(--clr-accent);
  display:        flex;
  align-items:    center;
  gap:            2px;
}

h2::before {
  content:           '';
  display:           block;
  flex-shrink:       0;
  width:             20px;
  height:            45px;
  background-image:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 32'><path d='M4,0 L6,0 Q7.5,0 7.5,1.5 L7.5,7 L6,11 L4,11 L2.5,7 L2.5,1.5 Q2.5,0 4,0 Z' fill='%23066d16'/><rect x='4' y='10' width='2' height='22' rx='1' fill='%23066d16'/></svg>");
  background-repeat: no-repeat;
  background-size:   100% 100%;
  transform: rotate(-10deg) translateY(-6px);
}

/* ── H3 ──────────────────────────────────────────────────────────────────── */
h3 {
  font-family:    var(--ff-display);
  font-size:      1.15rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--clr-river);
}


/* ── Boutons Elementor ───────────────────────────────────────────────────── */
.elementor-button {
  font-family:    var(--ff-display) !important;
  font-weight:    700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius:  6px !important;
  transition:     background .2s, transform .15s !important;
}

.elementor-button:hover {
  transform: translateY(-1px) !important;
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
  font-size: .9rem;
}

@media (max-width: 921px) {
    #ast-mobile-header .site-branding .ast-logo-svg-icon svg {
        width: 80px;
    }
}