
:root{--blue:#075be8;--navy:#071b58;--orange:#ff7200;--ink:#0b1f4d;--muted:#62718f;--bg:#f5f9ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}a{text-decoration:none;color:inherit}
header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:12px 5.5%;position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);z-index:20;border-bottom:1px solid #e8eef8}
.brand img{width:220px;height:64px;object-fit:contain;object-position:left center}nav{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:700}nav a:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange),#ff8a18);color:#fff;padding:16px 25px;border-radius:13px;font-weight:800;box-shadow:0 10px 28px rgba(255,114,0,.2)}.btn.small{padding:12px 18px}.btn.secondary{background:#fff;color:var(--blue);border:1px solid #bfd5ff;box-shadow:none}
.hero{min-height:690px;display:grid;grid-template-columns:44% 56%;align-items:center;padding:65px 5.5%;overflow:hidden;background:radial-gradient(circle at 75% 40%,#dceeff 0,#f8fbff 43%,#fff 70%)}.hero-copy{z-index:2}.eyebrow{display:block;color:var(--blue);font-size:12px;letter-spacing:.16em;font-weight:900;margin-bottom:17px}.hero h1{font-size:54px;line-height:1.04;margin:0 0 24px;letter-spacing:-.04em}.hero h1 span{color:var(--blue)}.hero p{font-size:19px;line-height:1.65;color:var(--muted);max-width:650px}.actions{display:flex;gap:13px;margin:30px 0}.trust{display:flex;gap:12px;flex-wrap:wrap}.trust span{font-size:12px;font-weight:800;background:#fff;border:1px solid #dce8fa;padding:10px 12px;border-radius:999px}
.hero-visual{position:relative}.hero-visual img{width:112%;max-width:none;margin-left:-3%;border-radius:28px;box-shadow:0 32px 80px rgba(7,61,132,.18)}
.section{padding:95px 7%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.section h2,.events h2,.cta h2{font-size:42px;line-height:1.12;margin:0}.section>p,.section div>p{font-size:18px;line-height:1.7;color:var(--muted)}
.cards{padding:0 7% 100px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cards article,.event-grid article{padding:30px;border:1px solid #dfe9f7;border-radius:22px;background:linear-gradient(145deg,#fff,#f7fbff);box-shadow:0 14px 45px rgba(27,80,145,.06)}.cards b{color:var(--orange)}.cards h3{font-size:22px}.cards p{color:var(--muted);line-height:1.6}.cards em{color:var(--orange);font-style:normal;font-weight:800}
.media{background:var(--bg)}.video-box{background:#071b58;border-radius:25px;padding:12px;box-shadow:0 25px 60px rgba(7,27,88,.16)}video{width:100%;display:block;border-radius:16px;min-height:280px;background:#071b58}.text-link,.events a{color:var(--blue);font-weight:800}
.events{padding:95px 7%}.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:35px}.event-grid span{font-size:11px;font-weight:900;color:var(--orange);letter-spacing:.15em}.event-grid p{color:var(--muted)}
.cta{margin:25px 5.5% 75px;padding:55px 60px;border-radius:30px;background:linear-gradient(135deg,#05266e,#0769ef);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:40px}.cta h2{max-width:850px}.eyebrow.light{color:#a9ceff}.btn.white{background:#fff;color:var(--blue);box-shadow:none;white-space:nowrap}
footer{padding:35px 6%;border-top:1px solid #e5edf8;display:flex;align-items:center;gap:30px;color:var(--muted);font-size:13px}footer img{width:180px;height:55px;object-fit:contain;object-position:left center}footer a{margin-left:auto;color:var(--blue);font-weight:800}
@media(max-width:980px){nav>a:not(.btn){display:none}.hero{grid-template-columns:1fr;padding-top:45px}.hero h1{font-size:44px}.hero-visual{margin-top:35px}.hero-visual img{width:100%;margin:0}.cards{grid-template-columns:1fr 1fr}.section{grid-template-columns:1fr;gap:20px}.event-grid{grid-template-columns:1fr}.cta{align-items:flex-start;flex-direction:column}}
@media(max-width:580px){header{height:78px}.brand img{width:165px;height:54px}.btn.small{font-size:12px;padding:10px 12px}.hero{padding:45px 6%;min-height:auto}.hero h1{font-size:36px}.hero p{font-size:16px}.actions{flex-direction:column}.cards{grid-template-columns:1fr;padding-left:6%;padding-right:6%}.section,.events{padding:70px 6%}.section h2,.events h2,.cta h2{font-size:32px}.cta{margin:15px 4% 55px;padding:38px 28px}footer{flex-direction:column;align-items:flex-start}footer a{margin-left:0}}

/* V5 — nouveau visuel Hero Doc-ETIK */
.hero{grid-template-columns:42% 58%;min-height:700px}
.hero-visual{display:flex;align-items:center;justify-content:center;overflow:visible}
.hero-visual img{
  width:118%;
  max-width:none;
  margin-left:-4%;
  border-radius:22px;
  object-fit:contain;
  box-shadow:0 30px 80px rgba(7,61,132,.14);
}
@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-visual img{width:100%;margin-left:0}
}


/* =========================================================
   DOC-ETIK V6 — HERO VISUEL
   L'image occupe toute la zone droite du premier écran.
   ========================================================= */
.hero{
  grid-template-columns: 40% 60%;
  min-height: 700px;
  gap: 28px;
  padding-right: 3.5%;
}
.hero-copy{
  position: relative;
  z-index: 2;
}
.hero-visual{
  width: 100%;
  min-width: 0;
  height: 590px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 28px;
  background: #eef7ff;
  box-shadow: 0 28px 70px rgba(7,61,132,.12);
}
.hero-visual img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
  border-radius: 28px;
  box-shadow: none;
}
@media(max-width:1100px){
  .hero{grid-template-columns:44% 56%;gap:18px}
  .hero-visual{height:520px}
}
@media(max-width:980px){
  .hero{
    grid-template-columns:1fr;
    padding-right:6%;
  }
  .hero-visual{
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .hero-visual img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}
