:root{
      --bg:#0B1F3B;
      --ink:#e9eef7;
      --muted:#b7c3d6;
      --line:rgba(255,255,255,.12);
      --accent:#2ad69f;
      --shadow:0 18px 45px rgba(0,0,0,.35);
      --radius:18px;
      --blue2:#1E6BFF;
      --orange2:#FF6A3A;
    }

    /* =========================
   TITRES MENU
   ========================= */

.titre-smart{ color:#1d4ed8; font-weight:700; }
.titre-main{ color:#1d4ed8; font-weight:700; }
.titre-stat{ color:#d97706; font-weight:700; }
.titre-scale{ color:#4f46e5; font-weight:700; }
.titre-indus{ color:#4b5563; font-weight:700; }
.titre-resil{ color:#c2410c; font-weight:700; }
.titre-raptor{ color:#dc2626; font-weight:700; }
.titre-eco{ color:#16a34a; font-weight:700; }
.titre-doc{ color:#1f8a8a; font-weight:700; }
.titre-badge{ color:#b7c3d6; font-weight: 700;}

    *{ box-sizing:border-box; }

    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:
        radial-gradient(1200px 650px at 20% -10%, rgba(42,214,159,.22), transparent 60%),
        linear-gradient(180deg,#071833,var(--bg));
      color:var(--ink);
      line-height:1.65;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    .navbar.cert-nav{
      background:rgba(7,19,38,.85);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .navbar.cert-nav .nav-link{
      color:rgba(255,255,255,.75);
      font-weight:500;
    }

    .navbar.cert-nav .nav-link:hover{
      color:#fff;
    }

    .wrap{
      max-width:1100px;
      margin:0 auto;
      padding:56px 18px 70px;
    }

    .hero{
      max-width:820px;
      margin-bottom:30px;
    }

    .hero-kicker{
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:.82rem;
      color:var(--muted);
      margin-bottom:10px;
    }

    .hero h1{
      font-size:clamp(2rem, 5vw, 3.4rem);
      line-height:1.08;
      margin:0 0 16px;
      font-weight:700;
      color:#ffffff;
    }

    .hero p{
      margin:0;
      color:var(--muted);
      font-size:1.08rem;
    }

    .grid{
      display:grid;
      gap:20px;
      margin-top:28px;
    }

    @media(min-width:860px){
      .grid{
        grid-template-columns:1.05fr .95fr;
      }
    }

    .card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
      box-shadow:var(--shadow);
      padding:24px;
    }

    .card h2{
      margin:0 0 12px;
      font-size:1.25rem;
      color:#ffffff;
    }

    .card p{
      margin:0 0 16px;
      color:var(--muted);
    }

    .tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(0,0,0,.15);
      font-size:13px;
      color:#eef4ff;
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 3px rgba(42,214,159,.18);
      flex:0 0 auto;
    }

    .cols{
      display:grid;
      gap:15px;
    }

    @media(min-width:560px){
      .cols{
        grid-template-columns:1fr 1fr;
      }
    }

    .sub{
      border:1px solid var(--line);
      border-radius:14px;
      padding:16px;
      background:rgba(0,0,0,.12);
    }

    .sub h3{
      font-size:14px;
      margin:0 0 10px;
      color:#d7e1f2;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    .note{
      margin-top:18px;
      border:1px dashed rgba(42,214,159,.35);
      background:rgba(42,214,159,.05);
      border-radius:14px;
      padding:14px;
      color:var(--muted);
    }

    .footer{
      margin-top:34px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      font-size:12px;
      color:rgba(255,255,255,.6);
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:10px;
    }
    
    /* =========================
   FOOTER
   ========================= */

footer{
  text-align:center;
  padding:24px;
  font-size:14px;
  color:#e9eef7;
  border-top:1px solid #d9d9d9;
  margin-top:40px;
}

footer a{
  color:var(--main-color) !important;
  text-decoration:none;
  font-weight:500;
}

footer a:hover{
  opacity:.8;
}

/* =========================
   IMAGE BADGE
   ========================= */

.eco-icon-center{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:20px 0;
}

.eco-icon-center img{
  width:90px;
  height:90px;
  object-fit:contain;
  display:block;
  background:#ffffff;
  border-radius:50%;
  padding:10px;
  border:4px solid var(--title-color);
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
}

img.img-fluid{
  display:block;
  max-width:100%;
  height:auto;
}

.logo-menu{
  width:72px;
  height:72px;
  object-fit:contain;
}

/* NAVIGATION – soulignement animé */

.nav-link{
  position: relative;
  display: inline-block;
  padding-bottom:4px;
}

/* ligne invisible */
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background-color:currentColor;
  transition:width .25s ease;
}

/* animation au hover */
.nav-link:hover::after{
  width:100%;
}

/* page active */
.nav-link.active::after{
  width:100%;
}