/* mydesign.optimized.css */
/* Typographie & variables */
:root{
  --main: #0d6efd;
  --muted: #6c757d;
  --bg-dark: #212529;
  --card-radius: 12px;
  --max-width: 1200px;
  --hero-height: 40vh; /* réduit par rapport à la version initiale */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#222;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* NAV SHRINK (ajouté via JS) */
#mainNav.shrink{
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  transition:all .25s ease-in-out;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

/* HERO with parallax fallback */
.hero-section{
  position:relative;
  min-height:var(--hero-height);
  background-image: url("../img/hero/hero.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  padding:3rem 0;
  color:#fff;
}
.hero-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45));
  z-index:0;
}
.hero-section .container{position:relative; z-index:2}

/* Parallax only on non-mobile */
@media(min-width:992px){
  .hero-section{background-attachment:fixed}
}

/* Typography */
h1,h2,h3{font-weight:600}
h1{font-size:1.8rem}
.display-6{font-size:1.9rem}

/* Cards */
.card{
  border-radius: var(--card-radius);
  overflow:hidden;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(16,24,40,0.08);
}

/* Service card images consistent ratio */
.service-card .card-img-top{
  height:220px;
  object-fit:cover;
}

/* Buttons */
.btn-primary{
  background:var(--main);
  border:none;
}
.btn-outline-light{
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

/* Carousel caption tweak */
.carousel-caption{background:rgba(0,0,0,0.35); padding:12px; border-radius:8px;}

/* Footer */
footer{font-size:0.9rem}

/* Small screens: reduce hero height */
@media(max-width:767px){
  :root{--hero-height:32vh}
  .service-card .card-img-top{height:160px}
}

/* Accessibility focus */
a:focus, button:focus, input:focus, select:focus, textarea:focus{outline:3px solid rgba(13,110,253,0.18); outline-offset:3px}

/* Utility */
.text-light-strong{color:rgba(255,255,255,0.95)}