/* ============================================================
   MOVEXPRESS — UI kit Site web : classes de mise en page
   (Les composants gèrent leur propre style ; ici on gère la
   structure des pages : header, hero, grilles, footer.)
   ============================================================ */

.site { background: var(--surface-page); color: var(--text-body); min-height: 100%; }
.container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--surface-soft); }
.section--tint { background: var(--surface-tint); }
.section--ink { background: var(--gradient-ink); color: var(--text-on-dark); }

/* ---- Header ---------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 50; }
.hdr__bar {
  display: flex; align-items: center; gap: var(--space-5);
  height: 76px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-subtle);
}
.hdr__nav { display: flex; align-items: center; gap: var(--space-5); margin-left: var(--space-6); }
.hdr__brand { display:flex; flex-direction:column; gap:1px; line-height:1; }
.hdr__slogan { font-family:var(--font-display); font-weight:600; font-style:italic; font-size:10px; color:var(--neutral-900); letter-spacing:.01em; }
.hdr__link {
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  color: var(--text-body); text-decoration: none; padding: .4rem 0; position: relative; cursor: pointer;
  background: none; border: none; transition: color var(--dur-fast) var(--ease-out);
}
.hdr__link:hover { color: var(--brand); }
.hdr__link--active { color: var(--brand); }
.hdr__link--active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brand); border-radius:2px; }
.hdr__spacer { flex: 1; }
.hdr__actions { display: flex; align-items: center; gap: var(--space-3); }
.hdr__phone { display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--text-strong); text-decoration:none; white-space:nowrap; }
.hdr__phone svg { width:1.1em; height:1.1em; color:var(--brand); }
.hdr__burger { display:none; }
.hdr__cta-desktop { display:inline-flex; }

/* ---- Menu mobile ----------------------------------------- */
.hdr__mobile { display:none; }
.hdr__mobile-scrim { position:fixed; inset:0; top:76px; border:none; padding:0; background:rgba(10,42,74,.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); cursor:pointer; animation:mvxFade var(--dur-base) var(--ease-out); }
.hdr__mobile-panel {
  position:fixed; top:76px; left:0; right:0;
  background:var(--surface-page); border-bottom:1px solid var(--border-subtle);
  box-shadow:var(--shadow-lg); padding:var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-5);
  max-height:calc(100vh - 76px); overflow-y:auto;
  animation:mvxSlideDown var(--dur-base) var(--ease-out);
}
.hdr__mobile-nav { display:flex; flex-direction:column; }
.hdr__mobile-link {
  display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:var(--text-lg);
  color:var(--text-strong); padding:var(--space-4) var(--space-1);
  border-bottom:1px solid var(--border-subtle);
}
.hdr__mobile-link svg { width:1.1em; height:1.1em; color:var(--text-subtle); }
.hdr__mobile-link.is-active { color:var(--brand); }
.hdr__mobile-link.is-active svg { color:var(--brand); }
.hdr__mobile-actions { display:flex; flex-direction:column; gap:var(--space-4); align-items:center; }
.hdr__mobile-phone { display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); color:var(--text-strong); text-decoration:none; }
.hdr__mobile-phone svg { width:1.1em; height:1.1em; color:var(--brand); }
@keyframes mvxFade { from { opacity:0; } to { opacity:1; } }
@keyframes mvxSlideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

/* ---- Hero ------------------------------------------------ */
.hero { position: relative; overflow: hidden; background: var(--brand-ink); }
.hero__bg { position:absolute; inset:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }
.hero__scrim { position:absolute; inset:0; background: var(--scrim-ink-left); }
.hero__inner { position: relative; padding-block: var(--space-11); display:flex; }
.hero__copy { max-width: 38rem; display:flex; flex-direction:column; gap: var(--space-5); }
.hero__title { font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; line-height:1.04; color:#fff; margin:0; font-size: clamp(2.4rem, 5vw, var(--text-6xl)); }
.hero__title em { color: var(--brand-bright); font-style: normal; }
.hero__sub { font-size: var(--text-lg); line-height:1.6; color: #DCEAF6; margin:0; max-width: 34rem; }
.hero__slogan { font-family:var(--font-display); font-weight:600; font-style:italic; font-size:var(--text-sm); color:rgba(255,255,255,.88); margin:0; letter-spacing:.04em; }
.hero__cta { display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-2); }
.hero__chips { display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-4); }
.hero__chip { display:inline-flex; align-items:center; gap:.5em; padding:.5rem .85rem; border-radius:var(--radius-pill); background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:var(--text-sm); font-weight:600; }
.hero__chip svg { width:1.05em; height:1.05em; color: var(--brand-bright); }

/* ---- Grilles --------------------------------------------- */
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.stack-lg { display:flex; flex-direction:column; gap: var(--space-7); }
.center-head { margin-bottom: var(--space-8); }
.reassure { display:flex; justify-content:center; gap: var(--space-6); flex-wrap:wrap; margin-top: var(--space-5); }
.reassure__item { display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--text-strong); }
.reassure__item svg { width:1.15em; height:1.15em; color:var(--success); }
.presta-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }

/* ---- Bande secteurs -------------------------------------- */
.sectors { display:flex; align-items:center; justify-content:center; gap: var(--space-6); flex-wrap:wrap; }
.sectors__item { display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:700; font-size:var(--text-md); color:var(--text-muted); }
.sectors__item svg { width:1.2em; height:1.2em; color:var(--brand); }

/* ---- À propos -------------------------------------------- */
.about { display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items:center; }
.about__media { border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.about__media img { width:100%; height:100%; object-fit:cover; }
.about__list { display:flex; flex-direction:column; gap: var(--space-4); margin-top: var(--space-5); }
.about__row { display:flex; gap: var(--space-3); align-items:flex-start; }
.about__row .ic { width:40px; height:40px; flex:0 0 auto; border-radius:var(--radius-md); background:var(--surface-tint); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; }
.about__row .ic svg { width:20px; height:20px; }
.about__row b { font-family:var(--font-display); color:var(--text-strong); display:block; margin-bottom:2px; }
.about__row span { color:var(--text-muted); font-size:var(--text-sm); line-height:1.5; }

/* ---- Bande stats marine ---------------------------------- */
.statband { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }

/* ---- CTA band -------------------------------------------- */
.ctaband { display:flex; align-items:center; justify-content:space-between; gap: var(--space-6); flex-wrap:wrap;
  background: var(--gradient-brand); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-brand); }
.ctaband__t { font-family:var(--font-display); font-weight:800; font-size: var(--text-3xl); color:#fff; letter-spacing:-0.02em; margin:0; line-height:1.1; }
.ctaband__s { color: rgba(255,255,255,.9); margin:.4rem 0 0; font-size:var(--text-lg); }

/* ---- Contact --------------------------------------------- */
.contact { display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-7); align-items:start; }
.infolist { display:flex; flex-direction:column; gap: var(--space-4); }
.inforow { display:flex; gap: var(--space-3); align-items:flex-start; }
.inforow .ic { width:44px; height:44px; flex:0 0 auto; border-radius:var(--radius-md); background:rgba(255,255,255,.12); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.inforow .ic svg { width:20px; height:20px; }
.inforow b { font-family:var(--font-display); color:#fff; display:block; font-size:var(--text-sm); }
.inforow a, .inforow span { color: var(--text-on-dark-muted); text-decoration:none; font-size:var(--text-sm); line-height:1.5; }
.inforow a[href^="tel"] { white-space:nowrap; }
.inforow a:hover { color:#fff; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }

/* ---- Footer ---------------------------------------------- */
.ftr { background: var(--surface-ink-2); color: var(--text-on-dark-muted); padding-block: var(--space-9) var(--space-6); }
.ftr__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.ftr__col h4 { font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:#fff; margin:0 0 var(--space-4); letter-spacing:.02em; }
.ftr__col a { display:block; color:var(--text-on-dark-muted); text-decoration:none; font-size:var(--text-sm); padding:.3rem 0; cursor:pointer; }
.ftr__col a:hover { color:#fff; }
.ftr__about { font-size:var(--text-sm); line-height:1.6; color:var(--text-on-dark-muted); margin: var(--space-4) 0 0; max-width:26rem; }
.ftr__slogan { font-family:var(--font-display); font-weight:600; font-style:italic; font-size:var(--text-sm); color:var(--text-on-dark-muted); margin: var(--space-3) 0 0; letter-spacing:.02em; }
.ftr__bottom { display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-top: var(--space-8); padding-top: var(--space-5); border-top:1px solid rgba(255,255,255,.12); font-size:var(--text-xs); }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .hdr__nav, .hdr__phone, .hdr__cta-desktop { display:none; }
  .hdr__burger { display:inline-flex; }
  .hdr__mobile.is-open { display:block; }
  .grid-3, .grid-2, .about, .contact, .ftr__top, .form-grid { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr 1fr; }
  .hero__inner { padding-block: var(--space-9); }
  .ctaband { flex-direction:column; align-items:flex-start; padding: var(--space-6); }
  .about__media { order:-1; }
}
@media (max-width: 520px) {
  .statband { grid-template-columns: 1fr; }
  .reassure { gap: var(--space-4); }
  .hdr__slogan { display:none; }
}