/* ============================================================
   VARIABLES & BASE (identiques à la page d'accueil)
============================================================ */
: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;
}
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 black italique, 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!important; }
.excusages{ font-size: 20px!important; }
h3{ font-size: 35px!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; }

.accent-bar{ width:190px; height:4.5px; background:var(--ips-yellow); margin-top:.8rem; }
.accent-bar.blue{ background:var(--ips-blue); }

/* Sections à coins arrondis (comme la maquette) */
.section-round{ border-radius:28px 28px 0 0; }

/* ============================================================
   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 PHOTO + TITRE EN BAS À GAUCHE
============================================================ */
.hero-sub{
  min-height:70vh; display:flex; align-items:flex-end;
  background-color:#4d7c5f; /* fallback si la photo ne charge pas */
  background-image:
    linear-gradient(180deg, rgba(10,20,35,.10), rgba(10,20,35,.45)),
    url('../img/card-autonomie.jpg');
  background-size:cover; background-position:center;
}
.hero-sub h1{ animation:fadeUp .9s ease both; font-weight: 700}
@keyframes fadeUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }

/* ============================================================
   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; }

/* ============================================================
   STATS & CHIFFRES
============================================================ */
.stat-number{ font-weight:800; font-style:italic; color:var(--ips-yellow); font-size:2.8rem; line-height:1.1; }
.stat-label{ font-size: 1.2rem; font-weight: 500; color:var(--ips-blue); line-height:1.1; }
.big-stat{ font-size:1.9rem; }

/* ============================================================
   ICONES "BÉNÉFICES CLÉS"
============================================================ */
.icon-badge{
  width:120px; height:120px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--ips-blue); font-size:1.5rem;
  box-shadow:0 6px 18px rgba(18,35,77,.08);
}

/* ============================================================
   CARTES BÉNÉFICES / USAGES
============================================================ */
.benefit-card{ background:#e9edf6; border-radius:6px; padding:1.5rem; height:100%; }
.benefit-card h3{ font-size:1.1rem; }
.usage-card{ background:var(--ips-cream); height:100%; }
.usage-card img{ width:100%; height:140px; object-fit:cover; display:block; }
.usage-card .card-body{ padding:1rem; text-align:center; }
.usage-card h3{ font-size:.95rem; }
.usage-card p{ font-size:.8rem; font-style:italic; }

/* Images produit */
.block-media img{ width:100%; height:100%; min-height:260px; object-fit:cover; display:block; }

/* ============================================================
   SECTION CONTACT (fond quadrillé)
============================================================ */
#contact{
  background-color:#dfe9f5;
  background-image:
    linear-gradient(rgba(230,238,248,.88), rgba(230,238,248,.88)),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(62,92,151,.18) 120px 122px),
    repeating-linear-gradient(0deg,  transparent 0 60px,  rgba(62,92,151,.14) 60px 62px);
}
.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; }