:root {
  --navy: #1B3A5C;
  --navy-dark: #0F2540;
  --navy-mid: #254B73;
  --steel: #2B6CA0;
  --sky: #4A9FD4;
  --sky-lt: #7EC4E8;
  --offwhite: #F5F7FA;
  --gray-light: #EEF1F5;
  --gray: #C8D0DB;
  --text: #1B3A5C;
  --text-muted: #5A7090;
  --font-h: 'Montserrat', sans-serif;
  --font-b: 'Open Sans', sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); color:var(--text); background:var(--offwhite); line-height:1.7; }

.m-nav {
  position:sticky; top:0; z-index:100; display:flex; justify-content:space-between; align-items:center;
  padding:1rem 5.5%; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--gray-light);
}
.m-nav a.brand { font-family:var(--font-h); font-weight:800; color:var(--navy); text-decoration:none; font-size:1.05rem; letter-spacing:.02em; }
.m-nav a.brand span { color:var(--steel); }
.m-nav a.back { font-family:var(--font-h); font-size:.88rem; font-weight:600; color:var(--text-muted); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.m-nav a.back:hover { color:var(--navy); }
.m-nav .m-nav-logo { display:flex; align-items:center; }
.m-nav .m-nav-logo img { height:42px; width:auto; transition:transform .25s var(--ease); }
.m-nav .m-nav-logo:hover img { transform:scale(1.05); }

.m-hero {
  position:relative; background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:white; padding:5rem 5.5% 4rem; overflow:hidden;
}
.m-hero::before {
  content:""; position:absolute; top:-100px; right:-100px; width:400px; height:400px;
  background:radial-gradient(circle, rgba(74,159,212,.18), transparent 70%); border-radius:50%;
}
.m-hero-inner { max-width:1100px; margin:0 auto; position:relative; display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; }
.m-hero-text { min-width:0; }
.m-eyebrow {
  display:inline-block; font-family:var(--font-h); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sky-lt); padding:.5rem 1rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:30px; margin-bottom:1.5rem;
}
.m-title { font-family:var(--font-h); font-size:clamp(1.9rem, 4vw, 2.6rem); font-weight:800; line-height:1.15; letter-spacing:-.02em; margin-bottom:1.25rem; text-wrap:balance; }
.m-sub { font-size:1.05rem; max-width:740px; color:rgba(255,255,255,.78); }
.m-client-logo {
  display:flex; align-items:center; justify-content:center; padding:2rem;
  background:white; border-radius:18px; box-shadow:0 18px 48px rgba(0,0,0,.25);
  width:220px; height:160px; flex-shrink:0;
}
.m-client-logo img { max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:880px) {
  .m-hero-inner { grid-template-columns:1fr; }
  .m-client-logo { width:160px; height:120px; padding:1.25rem; }
}

.m-meta {
  position:relative; z-index:1;
  max-width:1100px; margin:-2.25rem auto 0; padding:0 5.5%;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1rem;
}
.m-meta-card {
  background:white; padding:1.4rem 1.5rem; border-radius:14px; border:1px solid var(--gray-light);
  box-shadow:0 8px 28px rgba(15,37,64,.08);
}
.m-meta-l { font-family:var(--font-h); font-size:.8rem; font-weight:600; color:var(--text-muted); margin-bottom:.35rem; }
.m-meta-v { font-family:var(--font-h); font-size:1.05rem; font-weight:700; color:var(--navy); }

.m-body { max-width:1100px; margin:4rem auto; padding:0 5.5%; }
.m-section { margin-bottom:3rem; }
.m-section h2 {
  font-family:var(--font-h); font-size:1.6rem; font-weight:800; color:var(--navy);
  margin-bottom:1rem; padding-bottom:.6rem; border-bottom:3px solid var(--steel); display:inline-block;
}
.m-section p { color:var(--text-muted); margin-bottom:.9rem; }
.m-section ul { list-style:none; padding:0; }
.m-section li {
  position:relative; padding-left:1.8rem; margin-bottom:.7rem; color:var(--text-muted);
}
.m-section li::before {
  content:""; position:absolute; left:0; top:.65em; width:10px; height:10px;
  background:var(--steel); border-radius:50%; box-shadow:0 0 0 4px rgba(43,108,160,.15);
}
.m-client-card {
  display:flex; align-items:center; gap:1.75rem; padding:1.75rem 2rem;
  background:white; border:1px solid var(--gray-light); border-radius:14px;
  box-shadow:0 6px 22px rgba(15,37,64,.06); margin-bottom:1.5rem;
}
.m-client-card-logo {
  flex-shrink:0; width:120px; height:80px; display:flex; align-items:center; justify-content:center;
  padding:.5rem; border-right:1px solid var(--gray-light); padding-right:1.75rem;
}
.m-client-card-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.m-client-card-txt { color:var(--text-muted); font-size:.95rem; line-height:1.65; }
.m-client-card-txt strong { color:var(--navy); }
@media (max-width:680px) {
  .m-client-card { flex-direction:column; gap:1rem; padding:1.5rem; }
  .m-client-card-logo { border-right:none; border-bottom:1px solid var(--gray-light); padding-right:0; padding-bottom:1rem; width:auto; height:60px; }
}
.m-quote {
  position:relative; background:white; border:1px solid var(--gray-light);
  padding:2.25rem 2rem 1.75rem 4.25rem; border-radius:14px;
  font-size:1.05rem; line-height:1.7; color:var(--navy); margin:2.5rem 0;
}
.m-quote::before {
  content:"“"; position:absolute; left:1.4rem; top:.9rem;
  font-family:Georgia, serif; font-size:3.5rem; line-height:1; color:var(--sky);
}
.m-quote-author { display:block; margin-top:1rem; font-family:var(--font-h); font-weight:600; font-size:.88rem; color:var(--text-muted); }

.m-cta-box {
  background:linear-gradient(135deg, var(--navy) 0%, var(--steel) 100%); color:white;
  padding:3rem 2rem; border-radius:18px; text-align:center; margin:4rem auto;
  max-width:1100px;
}
.m-cta-box h2, .m-cta-box h3 { font-family:var(--font-h); font-size:1.6rem; font-weight:800; margin-bottom:.6rem; }
.m-cta-box p { color:rgba(255,255,255,.82); margin-bottom:1.5rem; }
.m-cta-btn {
  display:inline-block; padding:.9rem 1.8rem; background:white; color:var(--navy);
  font-family:var(--font-h); font-weight:700; font-size:.95rem;
  border-radius:8px; text-decoration:none; transition:background .2s var(--ease);
}
.m-cta-btn:hover { background:var(--gray-light); }

.m-footer { background:var(--navy-dark); color:rgba(255,255,255,.6); padding:2.5rem 5.5%; text-align:center; font-size:.85rem; }
.m-footer a { color:var(--sky-lt); text-decoration:none; }

@media (max-width:768px) {
  .m-title { font-size:1.85rem; }
  .m-hero { padding:3.5rem 5.5% 3rem; }
  .m-section h2 { font-size:1.3rem; }
}

/* ── Animations d'entrée ── */
@keyframes m-fade-up { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes m-fade-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }

.m-hero-text > * { animation:m-fade-up .65s cubic-bezier(.4,0,.2,1) both; }
.m-hero-text > *:nth-child(1) { animation-delay:.05s; }
.m-hero-text > *:nth-child(2) { animation-delay:.15s; }
.m-hero-text > *:nth-child(3) { animation-delay:.25s; }
.m-client-logo { animation:m-fade-in .7s .3s cubic-bezier(.4,0,.2,1) both; }
.m-meta-card { animation:m-fade-up .6s cubic-bezier(.4,0,.2,1) both; }
.m-meta-card:nth-child(1) { animation-delay:.35s; }
.m-meta-card:nth-child(2) { animation-delay:.45s; }
.m-meta-card:nth-child(3) { animation-delay:.55s; }
.m-meta-card:nth-child(4) { animation-delay:.65s; }

@media (prefers-reduced-motion: reduce) {
  .m-hero-text > *, .m-client-logo, .m-meta-card { animation:none; }
}

/* ── Accessibilité : focus clavier visible ── */
:focus-visible { outline:3px solid var(--sky); outline-offset:3px; border-radius:4px; }
.m-hero :focus-visible, .m-cta-box :focus-visible, .m-footer :focus-visible { outline-color:var(--sky-lt); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; }
}
