/* ================================================
   ASOscar — Styles custom
   Bootstrap 5.3 + custom variables
   ================================================ */

:root {
  --ao-primary:      #0A2540;
  --ao-primary-rgb:  10, 37, 64;
  --ao-accent-tec:   #F59E0B;
  --ao-accent-tec-rgb: 245, 158, 11;
  --ao-accent-it:    #2563EB;
  --ao-accent-it-rgb: 37, 99, 235;
  --ao-success:      #10B981;
  --ao-light:        #EFF4FA;
  --ao-text:         #1F2937;
  --ao-white:        #FFFFFF;
  --ao-white-rgb:    255, 255, 255;
  --ao-font-title:   'Poppins', sans-serif;
  --ao-font-body:    'Inter', sans-serif;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--ao-font-body);
  color: var(--ao-text);
  background-color: var(--ao-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ao-font-title);
  font-weight: 700;
}

/* ── NAVBAR ── */
.ao-navbar {
  background-color: var(--ao-primary);
  padding-top: 6px;
  padding-bottom: 6px;
}

.ao-navbar .navbar-brand img {
  height: 80px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(245,158,11,0.35));
}

.ao-navbar .navbar-brand {
  font-family: var(--ao-font-title);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ao-white) !important;
}
.ao-navbar .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  transition: color 0.2s;
  font-size: 0.95rem;
}
.ao-navbar .nav-link:hover { color: var(--ao-accent-tec) !important; }
.ao-navbar .nav-link.active { color: var(--ao-accent-tec) !important; font-weight: 600; }
.ao-navbar .navbar-toggler { border-color: rgba(255,255,255,0.35); }
.ao-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(245,158,11,0.25); }
.ao-navbar .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }

/* ── HERO LANDING ── */
.ao-hero {
  background-color: var(--ao-primary);
  color: var(--ao-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 92px;
}
.ao-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; }
.ao-hero p.lead { color: rgba(255,255,255,0.8); }

/* ── HERO TEC — photo électricien pro ── */
.ao-hero-tec {
  background:
    linear-gradient(105deg,
      rgba(10,37,64,0.96) 0%,
      rgba(10,37,64,0.82) 55%,
      rgba(10,37,64,0.55) 100%),
    url('../assets/images/chantier-renovation-residentielle.png')
    center / cover no-repeat;
  color: var(--ao-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 92px;
}

/* ── HERO IT — bureau high-tech / code ── */
.ao-hero-it {
  background:
    linear-gradient(105deg,
      rgba(10,37,64,0.96) 0%,
      rgba(10,37,64,0.82) 55%,
      rgba(10,37,64,0.50) 100%),
    url('../assets/images/it-site-web.png')
    center / cover no-repeat;
  color: var(--ao-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 92px;
}

/* ── HERO LANDING — sécurité maison moderne ── */
.ao-hero-landing {
  background:
    linear-gradient(135deg,
      rgba(10,37,64,0.97) 0%,
      rgba(10,37,64,0.80) 60%,
      rgba(10,37,64,0.55) 100%),
    url('../assets/images/hero-maison-connectee.png')
    center / cover no-repeat;
  color: var(--ao-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 92px;
}

/* ── BOUTONS ── */
.ao-btn-tec {
  background-color: var(--ao-accent-tec);
  border-color: var(--ao-accent-tec);
  color: var(--ao-primary);
  font-family: var(--ao-font-title);
  font-weight: 700;
  padding: 0.9rem 2.2rem;
  border-radius: 8px;
  font-size: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ao-btn-tec:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(var(--ao-accent-tec-rgb), 0.4);
  color: var(--ao-primary);
  background-color: #f5a623;
}
.ao-btn-it {
  background-color: var(--ao-accent-it);
  border-color: var(--ao-accent-it);
  color: var(--ao-white);
  font-family: var(--ao-font-title);
  font-weight: 700;
  padding: 0.9rem 2.2rem;
  border-radius: 8px;
  font-size: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ao-btn-it:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(var(--ao-accent-it-rgb), 0.4);
  color: var(--ao-white);
  background-color: #1d4ed8;
}

/* ── CARDS ── */
.ao-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(var(--ao-primary-rgb), 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  height: 100%;
  background: var(--ao-white);
}
.ao-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(var(--ao-primary-rgb), 0.14);
}
.ao-card-tec { border-top: 4px solid var(--ao-accent-tec); }
.ao-card-it  { border-top: 4px solid var(--ao-accent-it); }
.ao-card-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.ao-card-tec .ao-card-icon { color: var(--ao-accent-tec); }
.ao-card-it  .ao-card-icon { color: var(--ao-accent-it); }

/* ── SECTIONS ── */
.ao-section { padding: 80px 0; }
.ao-section-dark { background-color: var(--ao-primary); color: var(--ao-white); }
.ao-section-light { background-color: var(--ao-light); }
.ao-section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.5rem; }
.ao-section-subtitle { color: rgba(31,41,55,0.6); margin-bottom: 3rem; }
.ao-section-dark .ao-section-subtitle { color: rgba(255,255,255,0.6); }

/* ── BADGES ── */
.ao-badge-tec {
  background-color: var(--ao-accent-tec);
  color: var(--ao-primary);
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  display: inline-block;
  margin: 0.2rem;
}
.ao-badge-it {
  background-color: var(--ao-accent-it);
  color: var(--ao-white);
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  display: inline-block;
  margin: 0.2rem;
}

/* ── FOOTER ── */
.ao-footer {
  background-color: var(--ao-primary);
  color: rgba(255,255,255,0.7);
  padding: 40px 0 20px;
  font-size: 0.9rem;
}
.ao-footer a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
.ao-footer a:hover { color: var(--ao-accent-tec); }
.ao-footer .ao-footer-brand {
  font-family: var(--ao-font-title);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ao-white);
}

/* ── DIVIDERS ── */
.ao-divider { width: 60px; height: 4px; border-radius: 2px; margin: 0 auto 2rem; }
.ao-divider-tec { background-color: var(--ao-accent-tec); }
.ao-divider-it  { background-color: var(--ao-accent-it); }

/* ── UTILITAIRES ── */
.text-ao-primary { color: var(--ao-primary) !important; }
.text-ao-tec     { color: var(--ao-accent-tec) !important; }
.text-ao-it      { color: var(--ao-accent-it) !important; }
.bg-ao-primary   { background-color: var(--ao-primary) !important; }
.bg-ao-light     { background-color: var(--ao-light) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .ao-navbar .navbar-brand img { height: 60px; }
  .ao-hero-tec, .ao-hero-it, .ao-hero-landing, .ao-hero {
    padding-top: 80px;
    min-height: auto;
    padding-bottom: 60px;
  }
}
@media (max-width: 576px) {
  .ao-navbar .navbar-brand img { height: 50px; }
}

/* Hero responsive sizing */
.ao-hero-landing h1,
.ao-hero-tec h1,
.ao-hero-it h1,
.ao-hero-sm h1,
.ao-cta-section h2 {
  font-size: clamp(2rem, 6vw, 4rem) !important;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.ao-hero-landing .lead,
.ao-hero-tec .lead,
.ao-hero-it .lead,
.ao-hero-sm .lead {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem) !important;
  overflow-wrap: break-word;
}

.btn {
  white-space: normal;
}

@media (max-width: 576px) {
  .ao-hero-landing .btn,
  .ao-hero-tec .btn,
  .ao-hero-it .btn,
  .ao-cta-section .btn {
    width: 100%;
    max-width: 340px;
  }

  .ao-section {
    padding: 56px 0;
  }
}
/* Mobile hero line wrapping */
@media (max-width: 576px) {
  .ao-hero-landing h1 {
    max-width: 230px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.6rem !important;
  }

  .ao-hero-tec h1,
  .ao-hero-it h1,
  .ao-hero-sm h1,
  .ao-cta-section h2 {
    font-size: 1.9rem !important;
  }

  .ao-hero-landing .lead,
  .ao-hero-tec .lead,
  .ao-hero-it .lead,
  .ao-hero-sm .lead {
    font-size: 1rem !important;
  }
}