/* ============================================================
   VARIABLES & BASE
============================================================ */
:root{
  --ips-blue:        #3e5c97;
  --ips-blue-dark:   #2f4a7c;
  --ips-navy:        #12234d;
  --ips-yellow:      #efa717;
  --ips-yellow-dark: #d18f06;
  --ips-light:       #f7f9fc;
  --ips-grey:        #edf1f7;
  --ips-cream:       #f8efdf;
  --ips-text:        #66707d;
  --ips-blanc:       #ffffff;
}
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ font-family:'Poppins',sans-serif; color:var(--ips-text); font-weight:400; overflow-x:hidden; }
::selection{ background:var(--ips-yellow); color:#fff; }

/* ----- Graisses typo : titres très gras italiqués, textes légers ----- */
h1,h2,h3,h5{ font-weight:800; font-style:italic; letter-spacing:-.02em; }
p, li{ font-weight:300; }

h2{ font-size: 40px; }
h3{ font-size: 30px; }

.fs-5 { font-size: 1.7rem !important; font-weight:900!important; }

/* Utilitaires couleurs */
.text-ips-yellow{ color:var(--ips-yellow)!important; }
.text-ips-blue  { color:var(--ips-blue)!important; }
.text-ips-navy  { color:var(--ips-navy)!important; }
.bg-ips-blue  { background-color:var(--ips-blue)!important; }
.bg-ips-yellow{ background-color:var(--ips-yellow)!important; }
.bg-ips-grey  { background-color:var(--ips-grey)!important; }
.bg-ips-light { background-color:var(--ips-light)!important; }
.text-white-50 { --bs-text-opacity: 1; color: rgba(255, 255, 255, 1) !important; font-size: 25px; }

/* Barre d'accent sous les titres */
.accent-bar{ width:190px; height:4.5px; background:var(--ips-yellow); margin-top:.8rem; }
.accent-bar.blue{ background:var(--ips-blue); }
.accent-bar.tight{ margin-top:-.41rem; }

/* ============================================================
   NAVBAR
============================================================ */
#mainNav{ padding:1rem 0; transition:background .3s, padding .3s, box-shadow .3s; }
#mainNav.scrolled{ background:#fff; padding:.5rem 0; box-shadow:0 6px 24px rgba(18,35,77,.12); }
#mainNav .nav-link{ color:#fff; font-weight:600; font-size:.95rem; margin-left:1rem; }
#mainNav .nav-link.active{ color:var(--ips-yellow); }
#mainNav.scrolled .nav-link{ color:var(--ips-navy); }
#mainNav.scrolled .nav-link.active{ color:var(--ips-yellow); }
.brand-text{ font-style:italic; font-weight:800; font-size:1.6rem; line-height:1; color:#fff; }
.brand-sub{ display:block; font-style:normal; font-weight:600; font-size:.5rem; letter-spacing:.45em; opacity:.8; }
#mainNav.scrolled .brand-text{ color:var(--ips-navy); }

/* ============================================================
   HERO
============================================================ */
#hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background-color:#0c1a2c; /* couleur de secours si l'image ne charge pas */
  background-image:
    linear-gradient(180deg, rgba(6,12,24,.45), rgba(6,12,24,.70)), /* voile sombre pour lisibilité du texte */
    url('../img/hero-home-bg.jpg');                                      /* votre photo */
  background-size:cover;       /* l'image couvre tout le hero */
  background-position:center;  /* centrée */
  background-repeat:no-repeat;
}
#hero .container{ animation:fadeUp 1s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }
.hero-title{ letter-spacing:-1px; font-weight: bold; }
.hero-indicator{
  position:absolute; bottom:26px; left:50%; color:#fff; font-size:1.4rem; opacity:.85;
  animation:bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* ============================================================
   BOUTONS
============================================================ */
.btn{ border-radius:3px; }
.btn-ips-yellow{ background:var(--ips-yellow); color:#fff; font-weight:600; padding:.65rem 1.7rem; }
.btn-ips-yellow:hover{ background:var(--ips-yellow-dark); color:#fff; }
.btn-ips-blue{ background:var(--ips-blue); color:#fff; font-weight:600; padding:.65rem 1.7rem; }
.btn-ips-blue:hover{ background:var(--ips-blue-dark); color:#fff; }
.btn-outline-ips-yellow{ border:2px solid var(--ips-yellow); color:var(--ips-yellow); font-weight:600; }
.btn-outline-ips-yellow:hover{ background:var(--ips-yellow); color:#fff; }
.btn-outline-ips-blue{ border:2px solid var(--ips-blue); color:var(--ips-blue); font-weight:600; }
.btn-outline-ips-blue:hover{ background:var(--ips-blue); color:#fff; }
.btn-outline-white{ border:2px solid #fff; color:#fff; font-weight:600; background:transparent; }
.btn-outline-white:hover{ background:#fff; color:var(--ips-blue); }

/* ============================================================
   CARTES "POTENTIEL SOLAIRE"
============================================================ */

.small, small {
    font-size: 1.05em;
    font-weight: 500;
    color: var(--ips-navy) ;
}

.smallwhite{
   color: var(--ips-blanc);
}
/* ============================================================
   CARTES "BESOINS"
============================================================ */
.need-card{ border:none; background:#fff; box-shadow:0 10px 30px rgba(18,35,77,.08); }
.need-card .card-img-top{ height:210px; object-fit:cover; }

/* Carte financement */
.finance-card{ background:#e9edf6; border-radius:6px; padding:1.25rem 1.5rem; }

/* ============================================================
   BLOCS PRODUITS : texte et image COLLÉS,
   l'image est plus haute que le panneau (centré verticalement)
============================================================ */
.product-media img{ width:100%; height:300px; object-fit:cover; display:block; }
@media (min-width:992px){ .product-media img{ height:520px; } }
.check-list li i{ font-weight:700; }

/* ============================================================
   SECTION MISSION
============================================================ */
/* Fond crème pleine largeur (appliqué sur la section) */
.mission-wrap{ background:var(--ips-cream); }

/* Tuiles : toutes mêmes dimensions, texte centré */
.mission-tile{
  background:#fff; border-radius:8px; padding:1rem 1.25rem;
  height:100px;                     /* règle la hauteur à ta guise */
  width: 200px;
  display:flex; align-items:center; /* texte centré verticalement */
  font-weight:700; font-size:.9rem; color:var(--ips-blue);
  box-shadow:0 6px 18px rgba(18,35,77,.06);
}
.mission-tile.active{ background:var(--ips-blue); color:#fff; }
.d-block{ font-weight:400 }

/* Stats filiale */
.stat-number {
    font-weight: 800;
    font-style: italic;
    color: var(--ips-yellow);
    font-size: 2.8rem;
    line-height: 1.1;
}
.stat-label{ font-size:.8rem; color:var(--ips-blue); }

/* ============================================================
   SECTION CONTACT
============================================================ */
#contact{
  background-color:#fff; /* couleur de secours */
  background-image:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.25)), /* voile blanc */
    url('assets/img/hero-home-bg.jpg');                                   /* votre image */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.portrait{
  width:230px; height:230px; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#7ea8d8,#4f74ad);
}
.portrait i{ font-size:11rem; color:#f4f7fb; line-height:1; position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); }

/* ============================================================
   FOOTER
============================================================ */
.footer-link, .footer-link-light{ text-decoration:none; }
.footer-link{ color:var(--ips-text); }
.footer-link:hover{ color:var(--ips-blue); }
.footer-link-light{ color:var(--ips-blue); }
.footer-link-light:hover{ color:#fff; }

/* ============================================================
   ANIMATIONS AU SCROLL
============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.15s; }
.reveal-delay-2{ transition-delay:.3s; }

/* ============================================================
   ANIMATION "SORTIE DES IMAGES" (blocs produits)
============================================================ */
.reveal-slide {
  opacity: 0;
  transition: opacity .8s ease, transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Panneau qui sort de la droite (quand l'image est à gauche) */
.reveal-slide.from-right {
  transform: translateX(80px);
}

/* Panneau qui sort de la gauche (quand l'image est à droite) */
.reveal-slide.from-left {
  transform: translateX(-80px);
}

/* Image qui arrive en sens inverse */
.reveal-slide.from-image-right {
  transform: translateX(-60px);
}

.reveal-slide.from-image-left {
  transform: translateX(60px);
}

/* État visible (déclenché par le JS existant) */
.reveal-slide.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Délais échelonnés pour un effet fluide */
.reveal-slide.delay-1 { transition-delay: .15s; }
.reveal-slide.delay-2 { transition-delay: .3s; }
.reveal-slide.delay-3 { transition-delay: .45s; }

/* Désactiver pour les utilisateurs qui préfèrent réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .reveal-slide {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
CORRECTION MOBILE - BLOC "VOTRE ENERGIE NOTRE MISSION"
Force tous les parents de tuiles en pleine largeur
============================================================ */
@media (max-width: 991.98px) {
  /* Force TOUS les divs contenant une mission-tile à être full width */
  .mission-wrap .row > div:has(.mission-tile) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 0.5rem;
  }

  /* Les tuiles elles-mêmes */
  .mission-tile {
    width: 100% !important;
    height: 50px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Masque les colonnes vides sur mobile */
  .mission-wrap .row > div.d-none {
    display: none !important;
  }
}

/* ============================================================
CORRECTION MOBILE - BLOC "VOTRE ENERGIE NOTRE MISSION"
Fix overflow + box-sizing
============================================================ */
@media (max-width: 991.98px) {
  /* Empêche tout débordement horizontal sur mobile */
  body, html {
    overflow-x: hidden !important;
  }

  /* Force TOUS les divs contenant une mission-tile à être full width SANS déborder */
  .mission-wrap .row > div:has(.mission-tile) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 0.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box !important; /* Inclut le padding dans le calcul de largeur */
  }

  /* Les tuiles elles-mêmes */
  .mission-tile {
    width: 100% !important;
    height: 50px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Masque les colonnes vides sur mobile */
  .mission-wrap .row > div.d-none {
    display: none !important;
  }

  /* S'assure que le conteneur de la row n'a pas de padding excessif */
  .mission-wrap .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}