/* ====== Variables & Base ====== */
:root{
  --bg:#ffffff;
  --ink:#0b1020;
  --muted:#6b7280;
  --brand:#0d1dfd;
  --brand-ink:#fff;
  --ring:rgba(13,29,253,.25);
  --card:#fff;
  --shadow:0 14px 40px rgba(13,29,253,.08);
  --radius:16px;
  --radius-lg:22px;
  --w:clamp(280px,95vw,1200px);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  color:var(--ink);
  font:16px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#f7f7fb;
}
a{color:inherit;text-decoration:none}
.container{width:var(--w);margin:0 auto;padding:0 12px}

/* ====== Buttons / Utils ====== */
.btn{padding:12px 18px;border-radius:999px;font-weight:800}
.btn-primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 12px 28px var(--ring)}
.btn-ghost{background:#fff;border:1px solid #dfe3ff}
.btn-primary:hover{transform:translateY(-1px)}
.cta-row{display:flex;align-items:center;gap:14px;margin-top:18px}

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid #ececf5;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:900}
.logo-mark{font-size:1.25rem}
.logo-text{font-size:1.15rem;letter-spacing:.3px}
.nav{display:flex;align-items:center;gap:18px}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:#eff1ff}
.nav a.active{box-shadow:inset 0 -2px 0 var(--ink)}
.chip{display:flex;align-items:center;gap:8px;color:var(--muted)}
.chip .i{width:18px;height:18px;border-radius:999px;background:#eef0ff;color:#5b67ff;display:inline-grid;place-items:center;font-weight:800;font-size:.8rem}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:none}
.nav-toggle span{width:26px;height:2px;background:#111;display:block;border-radius:2px}

/* Dropdown */
.nav-dropdown{position:relative}
.dropdown-toggle::after{content:" ▼";font-size:.8em}
.dropdown-menu{
  display:none; position:absolute; left:0; top:100%;
  background:#fff; box-shadow:0 4px 16px rgba(13,29,253,.08);
  border-radius:10px; min-width:220px; z-index:100;
  flex-direction:column; padding:8px 0;
}
.dropdown-menu a{padding:8px 18px;display:block;color:var(--ink)}
.dropdown-menu a:hover{background:#eff1ff}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{display:flex}

/* Header responsive */
@media (max-width:900px){
  .nav{
    position:fixed; inset:64px 0 auto 0; background:#fff; box-shadow:var(--shadow);
    padding:14px 20px; display:none; flex-direction:column; gap:10px
  }
  .nav.show{display:flex}
  .nav-toggle{display:flex}
  .nav-dropdown{width:100%}
  .dropdown-menu{position:static; box-shadow:none; min-width:unset; border-radius:0; padding:0}
}

/* Logo sizing: keep aspect, fit header */
.logo img{
  display:block;
  height:60px;            /* fits inside your 64px header */
  width:auto;             /* preserve aspect */
  max-height:60px;
  aspect-ratio: 2 / 3;    /* hint the correct ratio */
  object-fit:contain;
}
@media (max-width:900px){
  .logo img{ height:36px; max-height:36px; }
}


/* ====== Footer ====== */
.site-footer{margin-top:70px;background:#0b0d17;color:#e8e9ff;position:relative}
.top-wave{height:10px;background:linear-gradient(90deg,#5b67ff,#00d4ff);opacity:.9}
.site-footer .grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:30px; padding:56px 0
}
.brand{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;margin-bottom:.4rem}
.logo-mark{font-size:1.2rem}
.muted{color:#b7bbd6}
.links{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.links a{color:#d9dbff}
.contact{list-style:none;margin:0 0 10px 0;padding:0;display:grid;gap:.35rem}
.social{display:flex;gap:10px;margin:8px 0 14px}
.social a{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:#161a2b;color:#dfe3ff;font-weight:900}
.newsletter .nl-row{display:flex;gap:8px;margin-top:6px}
.newsletter input{
  flex:1; min-width:140px; border-radius:999px; border:1px solid #2a2f47;
  background:#0e1224; color:#fff; padding:10px 14px; outline:none
}
.newsletter input:focus{border-color:#4250ff; box-shadow:0 0 0 4px rgba(66,80,255,.2)}
.stats{display:flex;gap:16px;margin-top:12px}
.stats div{background:#10152a;border:1px solid #202746;padding:10px 12px;border-radius:12px;text-align:center}
.stats b{font-size:1.1rem;display:block}
.stats span{font-size:.78rem;color:#a8add1}
.under{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid #23263b; padding:14px 0 24px
}
@media (max-width:1000px){
  .site-footer .grid{grid-template-columns:1fr;gap:22px}
  .stats{flex-wrap:wrap}
  .newsletter .nl-row{flex-direction:column}
  .under{flex-direction:column;gap:6px;text-align:center}
}

/* ====== Sections partagées (Home & pages) ====== */
.section{width:var(--w);margin:0 auto;padding:60px 12px}
.section h2{font-size:clamp(26px,3.2vw,40px);margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;display:grid;gap:10px}
.card .thumb{height:170px;border-radius:16px;background:#e7ecff center/cover no-repeat}

/* Deux colonnes (texte + image) */
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.media{min-height:320px;border-radius:22px;background:#edf0ff center/cover no-repeat;box-shadow:var(--shadow)}
.lead{color:var(--muted);margin:0 0 10px}
.hl{background:#eef0ff;border-radius:10px;padding:2px 8px}

/* Pilars / Pourquoi nous choisir */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.pillar{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:22px}
.icon{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:#0b0d17;color:#fff;font-weight:800;margin-bottom:10px}
.underline{width:96px;height:6px;border-radius:8px;background:#0b0d17;margin:14px 0}

/* CTA box */
.cta-box{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:26px;display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.cta-box .media{min-height:220px;border-radius:18px}
.cta-box-alt{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:26px;display:grid; gap:22px;align-items:center;text-align:center}

/* Grilles responsive partagées */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .two-col,.cta-box{grid-template-columns:1fr}
}
@media (max-width:700px){
  .cards{grid-template-columns:1fr}
}

/* ====== Home ====== */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1400px 520px at -8% -10%, #eef1ff 0, #fff 55%),
              linear-gradient(180deg,#ffffff 0,#f6f7ff 100%);
}
.hero .wrap{width:var(--w);margin:0 auto;padding:72px 12px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.kicker{display:flex;align-items:center;gap:8px;color:#5b67ff;font-weight:800}
.kicker::before{content:"•";font-size:1.1rem}
.hero h1{font-size:clamp(24px,3vw,40px);line-height:1;margin:.2rem 0 2rem}
.hero p{font-size:clamp(14px,1.5vw,16px);color:var(--muted);max-width:60ch}
.hero-media{min-height:360px;border-radius:28px;box-shadow:var(--shadow);background:#dfe4ff center/cover no-repeat}

/* ====== Hero Cover (centered) ====== */
.hero-cover{
  position:relative;
  min-height:420px;
  color:#fff;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 100%),
    var(--hero-bg);
  background-size:cover;
  background-position:center;
  border-bottom:1px solid #ececf5;
}
.hero-cover .container{ padding:56px 20px; }

/* Center the inner stack */
.hero-center{ display:grid; place-items:center; text-align:center; }
.hero-center .container{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}

/* Align edges + center the narrower paragraph */
.hero-title{ margin:0; }
.hero-sub{
  margin:0;
  max-width:70ch;
  margin-inline:auto;        /* centers the block */
}

/* Button row already exists; ensure centered */
.hero-cta{ justify-content:center; }

@media (max-width:900px){
  .hero-cover{ min-height:300px; }
  .hero-cover .container{ padding:40px 16px; }
}


/* Vignettes home (illustrations par défaut) */
.s1 .thumb{background-image:url("../img/service-maritime.jpg")}
.s2 .thumb{background-image:url("../img/service-aerien.jpg")}
.s3 .thumb{background-image:url("../img/service-terrestre.jpg")}
.s4 .thumb{background-image:url("../img/service-import-export.jpg")}
.t5{background-image:url("../img/service-groupage.jpg")}
.t6{background-image:url("../img/service-douane.jpg")}

/* Guide / info home */
.guide{background:linear-gradient(180deg,#ffffff 0,#f3f4ff 100%);padding:56px 0;margin-top:10px}
.guide .grid{width:var(--w);margin:0 auto;padding:0 12px;display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.guide .img{min-height:330px;border-radius:24px;background:#eaefff center/cover no-repeat;box-shadow:var(--shadow)}
.highlight{background:#eef0ff;border-radius:10px;padding:2px 8px}

/* Grille “Nos prestations” après Why Us */
.gallery{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.gallery{grid-template-columns:1fr}}

/* Feature banner “Explorez nos services…” */
.feature-banner{
  background: radial-gradient(1200px 480px at -10% -20%, #eef1ff 0, #fff 55%),
              linear-gradient(180deg,#ffffff 0,#f7f7fb 100%);
}
.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
.feature-copy h2{font-size:clamp(26px,3.2vw,40px);margin:0 0 12px}
.feature-media{min-height:340px;border-radius:28px;box-shadow:var(--shadow);background:#e6eaff center/cover no-repeat}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr}.feature-media{min-height:240px}}

/* Deuxième image guide (home bas) */
.guide-2{background:#eaefff center/cover no-repeat}

/* Avis */
.testimonials{text-align:center;background:linear-gradient(180deg,#f9faff 0,#ffffff 100%);border-top:1px solid #eceefc;border-bottom:1px solid #eceefc;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.reviews{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.review{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-align:left}
.review h3{margin:8px 0 4px;font-size:1rem}
.review p{color:var(--muted);margin:0 0 8px}
.review .date{font-size:.8rem;color:#9ca3af}
.stars{color:#facc15;font-size:1.1rem}
@media(max-width:1000px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.reviews{grid-template-columns:1fr}}

/* ====== Articles Carousel (compact style, not full hero) ====== */
.articles-carousel.hero-style{
  position:relative;
  padding:20px 0;
  background:linear-gradient(180deg,#ffffff 0,#f6f7ff 100%);
  border-bottom:1px solid #ececf5;
}

.ac-head{
  display:flex;align-items:baseline;gap:12px;justify-content:space-between;
  margin-bottom:12px;
}
.ac-title{margin:0}

.ac-viewport{
  position:relative;
  overflow:hidden;
  max-width:960px;     /* limit width */
  margin:0 auto;       /* center it */
  border-radius:12px;  /* optional: soften edges */
}

.ac-track{
  display:flex;
  transition:transform .45s ease;
  will-change:transform;
}
.ac-slide{
  min-width:100%;
  position:relative;
}

/* POST variant */
.ac-slide.is-post .ac-bg{
  width:100%;
  height:320px;
  background:#e7ecff center/cover no-repeat;
}
@media (max-width:900px){
  .ac-slide.is-post .ac-bg{height:200px}
}
.ac-slide.is-post .ac-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.00) 20%, rgba(0,0,0,.45) 80%);
  display:flex; align-items:flex-end; padding-bottom:14px;
}
.ac-slide.is-post .ac-content{color:#fff;}
.ac-slide.is-post .ac-hl{
  margin:0 0 8px;
  font-size:clamp(18px,2.6vw,26px);
  text-shadow:0 6px 20px rgba(0,0,0,.35);
}

/* VIDEO variant */
.ac-video-card{display:block;text-decoration:none;color:inherit}
.ac-video-thumb{
  width:100%;
  height:320px;
  background:#dfe4ff center/cover no-repeat;
  position:relative;
}
@media (max-width:900px){
  .ac-video-thumb{height:200px}
}
.ac-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:999px;display:grid;place-items:center;
  background:rgba(11,13,23,.78); color:#fff; font-weight:900; font-size:1rem;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.ac-video-title{
  margin:8px 12px 0;
  font-size:clamp(16px,2.2vw,20px);
}

/* Navigation & dots */
.ac-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; border:none; background:rgba(255,255,255,.95);
  box-shadow:0 6px 18px rgba(13,29,253,.08);
  width:34px;height:34px;border-radius:999px;font-size:18px;font-weight:900;cursor:pointer;
}
.ac-prev{left:8px}
.ac-next{right:8px}
.ac-nav:hover{background:#fff}

.ac-dots{
  display:flex;gap:6px;justify-content:center;margin:8px 0 10px;
}
.ac-dots button{
  width:8px;height:8px;border-radius:999px;border:none;background:#d9dcff;cursor:pointer;
}
.ac-dots button.active{background:#5b67ff}

/* ====== Unified Media System (images behave like on home) ====== */

/* Default: inline images are safe & responsive */
img{
  display:block;
  max-width:100%;
  height:auto;
}

/* All visual blocks clip overflow and get rounded corners */
.hero-media,
.media,
.feature-media,
.guide .img,
.card .thumb,
.cta-box .media,
.cta-box-alt .media,
.pic{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#eef0ff center/cover no-repeat; /* graceful fallback if <img> fails */
}

/* Any <img> directly inside visual blocks fills the frame and is cropped nicely */
.hero-media > img,
.media > img,
.feature-media > img,
.guide .img > img,
.card .thumb > img,
.cta-box .media > img,
.cta-box-alt .media > img,
.pic > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;      /* “home-like” look: well covered */
  border-radius:inherit;
}

/* Consistent heights (desktop → mobile via clamp) */
.hero-media{   height:clamp(240px, 34vw, 380px); }   /* hero image blocks on inner pages */
.media{        height:clamp(220px, 30vw, 340px); }   /* two-col image blocks */
.feature-media{height:clamp(220px, 32vw, 360px); }
.guide .img{   height:clamp(240px, 32vw, 360px); }
.pic{          min-height:240px; }                   /* if used as bg-only */

/* Cards thumbnails: stable aspect ratio like home */
.card .thumb{
  aspect-ratio:16 / 9;     /* avoids weird tall crops on some pages */
  height:auto;             /* aspect-ratio controls the height */
  background:#e7ecff center/cover no-repeat;
}

/* Utilities to opt-in containment for logos/diagrams (no cropping) */
.img-contain{
  object-fit:contain !important;
  background:#fff;         /* helps transparent PNGs */
}
.ratio-4x3{ aspect-ratio:4 / 3; }
.ratio-1x1{ aspect-ratio:1 / 1; }

/* Slightly smaller radius inside cards (keeps your design crisp) */
.card .thumb{ border-radius:16px; }