@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--blue:#073b8e;--blue2:#0d58c8;--navy:#061b45;--ink:#0b214b;--muted:#596579;--line:#e2e7ef;--soft:#f7f9fc;--white:#fff;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);line-height:1.55;background:#fff}a{color:inherit}.container{width:min(var(--max),calc(100% - 64px));margin:auto}
.header{height:74px;background:#fff;border-bottom:0;position:sticky;top:0;z-index:100}.nav{height:74px;display:flex;align-items:center;justify-content:space-between}.brand img{display:block;width:198px;height:auto}.nav-links{display:flex;align-items:center;gap:31px;font-size:15px;font-weight:600}.nav-links a{text-decoration:none;color:#101d3a;position:relative}.nav-links a:not(.nav-quote):hover,.nav-links a.active{color:var(--blue)}.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-25px;height:2px;background:var(--blue2)}.nav-quote{background:var(--blue);color:#fff!important;border-radius:5px;padding:13px 20px;box-shadow:0 7px 15px rgba(7,59,142,.16)}.nav-quote span{font-size:18px;margin-left:10px}.menu-toggle{display:none;border:0;background:transparent;padding:7px}.menu-toggle span{display:block;width:26px;height:2px;background:var(--blue);margin:5px}
.hero{height:370px;position:relative;overflow:hidden;background:#102d63}.hero-bg{position:absolute;inset:0;background-image:url('hero-bg.jpg');background-size:cover;background-position:center right}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,26,67,.98) 0%,rgba(4,38,91,.91) 27%,rgba(4,41,95,.55) 43%,rgba(4,41,95,0) 70%)}.hero-inner{height:100%;display:flex;align-items:center;position:relative;z-index:2}.hero-copy{width:49%;color:#fff;padding:24px 0}.hero h1{font-size:34px;line-height:1.17;letter-spacing:-.02em;margin:0 0 10px;font-weight:800}.hero h2{font-size:18px;line-height:1.3;margin:0 0 14px;font-weight:700}.hero p{font-size:14px;line-height:1.55;margin:0 0 14px;max-width:445px;color:#eef3ff}.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;font-size:13px;margin-bottom:18px}.hero-points b{display:inline-grid;place-items:center;width:17px;height:17px;border:1.5px solid #fff;border-radius:50%;margin-right:7px;font-size:9px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;border-radius:4px;font-weight:700;cursor:pointer}.btn-hero{background:#0d62d8;color:#fff;padding:12px 20px;font-size:13px}.btn-hero span{font-size:17px;margin-left:12px}
.contact-bar{background:#073b8e;color:#fff}.contact-bar-grid{min-height:70px;display:grid;grid-template-columns:repeat(4,1fr)}.contact-bar-grid>a,.contact-bar-grid>div,.contact-bar-grid>span{display:flex;align-items:center;gap:13px;padding:12px 24px;border-right:1px solid rgba(255,255,255,.18);text-decoration:none}.contact-bar-grid>a:first-child,.contact-bar-grid>div:first-child,.contact-bar-grid>span:first-child{padding-left:0}.bar-icon{font-size:28px;font-weight:300;line-height:1}.contact-bar small,.contact-bar strong{display:block}.contact-bar small{font-size:13px;font-weight:700;margin-bottom:2px}.contact-bar strong{font-size:13px;font-weight:500}
.section{padding:48px 0}.section-title{text-align:center;margin-bottom:24px}.kicker{margin:0 0 7px;color:#0c55b8;font-size:13px;font-weight:800}.section-title h2,.company h2,.means h2,.zone h2,.quote-intro h2{font-size:28px;line-height:1.2;margin:0;letter-spacing:-.025em}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{border:1px solid var(--line);border-radius:8px;padding:0 20px 20px;text-align:center;min-height:170px;background:#fff;overflow:hidden;transition:.2s}.service-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(13,55,111,.08)}.service-image{display:block;width:calc(100% + 40px);height:150px;margin:0 -20px 16px;object-fit:cover;object-position:center}.service-icon{margin:0 auto 10px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e8f0ff;color:#0752b5;font-size:24px;font-weight:800}.service-card h3{font-size:15px;margin:0 0 8px}.service-card p{font-size:12px;line-height:1.5;margin:0;color:#333e50}
.company{padding-top:26px;padding-bottom:40px}.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px}.company-copy{padding-right:30px;border-right:1px solid var(--line)}.company p,.means>p{font-size:13px;color:#3e495a;max-width:470px}.check-list{padding:0;margin:15px 0 0;list-style:none;font-size:12px}.check-list li{margin:8px 0}.check-list li:before{content:"✓";display:inline-grid;place-items:center;width:13px;height:13px;border:1px solid #0d61d5;color:#0d61d5;border-radius:50%;margin-right:8px;font-size:8px}.vehicle-card{margin-top:18px;background:#f0f5fc;border:1px solid #dbe5f2;border-radius:5px;padding:17px;display:flex;align-items:center;gap:18px}.vehicle-icon{font-size:48px;color:#0752b5;line-height:1}.vehicle-card h3{font-size:15px;line-height:1.35;margin:0 0 6px}.vehicle-card p{margin:0;font-size:12px;color:#2e394a}
.zone{background:#eff6ff;border-top:1px solid #e1ebf8;border-bottom:1px solid #e1ebf8}.zone-grid{min-height:91px;display:grid;grid-template-columns:110px 1.5fr 180px 180px;align-items:center;gap:22px}.map-art{color:#7ba4dc}.map-art svg{width:105px;height:auto}.zone h2{font-size:22px}.zone p:not(.kicker){font-size:12px;color:#3e4c60;margin:4px 0 0}.zone-badge{height:64px;border-left:1px solid #d3deec;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px}.zone-badge span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d72b2b;color:#fff;font-size:23px;font-weight:700}.zone-badge.eu span{background:#0d3f9d;font-size:15px}
.quote-section{background:linear-gradient(100deg,#073b8e,#0b49a3);color:#fff;padding:43px 0}.quote-grid{display:grid;grid-template-columns:35% 65%;gap:42px}.quote-intro .kicker{color:#cfe0ff}.quote-intro h2{font-size:24px}.quote-intro>p:not(.kicker){font-size:13px;color:#e1ebff;max-width:330px}.quote-contact{margin-top:24px;display:grid;gap:14px}.quote-contact a,.quote-contact span{font-size:16px;text-decoration:none}.quote-contact em{font-style:normal;font-size:13px;margin-left:25px}.quote-form{background:transparent}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.quote-form label{display:block;font-size:12px;font-weight:500}.quote-form input,.quote-form select,.quote-form textarea{display:block;width:100%;margin-top:4px;padding:11px 12px;border:0;border-radius:4px;background:#fff;color:#18243a;font:inherit;font-size:12px;outline:none}.quote-form textarea{resize:vertical;min-height:67px}.form-btn{width:100%;background:#2d6bd6;color:#fff;padding:12px;margin-top:2px;font-size:12px}.privacy{font-size:8px!important;color:#c9d9f5!important;text-align:center;margin:8px 0 0}
.footer{background:#061a3f;color:#dce6f9;padding:38px 0 0}.footer-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr 1fr;gap:36px;padding-bottom:28px}.footer-logo{width:200px;height:auto;display:block;margin-bottom:12px}.footer p{font-size:12px;margin:0}.footer h3{font-size:13px;color:#fff;margin:0 0 10px}.footer-links{display:grid;gap:6px}.footer-links a,.footer-links span{font-size:12px;text-decoration:none;color:#dce6f9}.footer-links a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid rgba(255,255,255,.15);min-height:48px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#c3d0e7}.footer-bottom a{text-decoration:none}
.stats-band{position:relative;overflow:hidden;min-height:308px;background-image:url('hero-bg.jpg');background-size:cover;background-position:center 58%;color:#fff}.stats-overlay{position:absolute;inset:0;background:rgba(4,31,67,.84)}.stats-inner{position:relative;z-index:1;padding:30px 0 28px}.stats-title{text-align:center;margin-bottom:23px}.stats-title .kicker{color:#9fd5ff;margin-bottom:7px;font-size:11px;letter-spacing:.34em}.stats-title h2{font-size:30px;line-height:1.2;margin:0;letter-spacing:-.02em}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stat-item{min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:0 18px;position:relative}.stat-item+.stat-item:before{content:"";position:absolute;left:0;top:13px;height:120px;width:1px;background:rgba(255,255,255,.75)}.stat-icon{height:42px;color:#9fdcff;margin-bottom:4px}.stat-icon svg{width:40px;height:40px}.stat-item strong{font-size:42px;line-height:1.05;letter-spacing:-.03em;font-weight:800}.stat-item span{font-size:18px;line-height:1.28;margin-top:6px;color:#fff}
@media(max-width:900px){.stats-band{min-height:auto}.stats-inner{padding:34px 0}.stats-title h2{font-size:26px}.stats-grid{grid-template-columns:1fr 1fr;row-gap:28px}.stat-item{min-height:125px}.stat-item:nth-child(3):before{display:none}.stat-item:nth-child(3),.stat-item:nth-child(4){border-top:1px solid rgba(255,255,255,.25);padding-top:22px}.stat-item strong{font-size:36px}.stat-item span{font-size:15px}
.container{width:min(var(--max),calc(100% - 34px))}.nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;padding:18px 25px;flex-direction:column;align-items:stretch;gap:16px;box-shadow:0 10px 20px rgba(0,0,0,.1)}.nav-links.open{display:flex}.nav-links a.active:after{display:none}.nav-quote{text-align:center}.menu-toggle{display:block}.hero-copy{width:63%}.service-grid{grid-template-columns:1fr 1fr}.company-grid{gap:35px}.company-copy{padding-right:0;border-right:0}.zone-grid{grid-template-columns:80px 1fr 150px 150px}.quote-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.stats-title h2{font-size:23px}.stats-grid{grid-template-columns:1fr 1fr;gap:0}.stat-item{padding:0 7px;min-height:125px}.stat-item strong{font-size:30px}.stat-item span{font-size:13px}.stat-item+.stat-item:before{height:110px}.stat-item:nth-child(3),.stat-item:nth-child(4){padding-top:22px}.stats-inner{padding-bottom:26px}
.header,.nav{height:68px}.nav-links{top:68px}.brand img{width:175px}.hero{height:680px;min-height:0;background:#062454}.hero-bg{inset:auto 0 0 0;height:330px;background-size:cover;background-position:right center}.hero-shade{inset:auto 0 0 0;height:430px;background:linear-gradient(180deg,rgba(6,36,84,1) 0%,rgba(6,36,84,.82) 34%,rgba(6,36,84,.18) 68%,rgba(6,36,84,0) 100%)}.hero-inner{height:auto;min-height:380px;align-items:flex-start}.hero-copy{width:100%;padding:42px 0 30px}.hero h1{font-size:29px}.hero p{max-width:none}.hero-points{grid-template-columns:1fr;gap:7px}.btn-hero{padding:12px 19px;font-size:12px}.contact-bar-grid{grid-template-columns:1fr 1fr}.contact-bar-grid>a,.contact-bar-grid>div{padding:12px 10px!important;border-bottom:1px solid rgba(255,255,255,.18)}.service-grid{grid-template-columns:1fr}.company-grid{grid-template-columns:1fr}.zone-grid{grid-template-columns:1fr 1fr;padding:18px 0}.map-art{display:none}.zone-badge{border-left:0;border-top:1px solid #d3deec;padding-top:10px}.quote-grid{gap:25px}.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start;gap:7px;padding:12px 0}.section{padding:40px 0}}

/* Clients / partenaires */
.partners{background:#f7faff;border-top:1px solid #e7eef8;border-bottom:1px solid #e7eef8;padding-top:52px;padding-bottom:54px}.partners-intro{font-size:15px;color:#536176;max-width:720px;margin:10px auto 0}.partner-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:28px}.partner-card{min-height:150px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;transition:.2s}.partner-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(13,55,111,.08)}.partner-card img{width:100%;height:82px;object-fit:contain;display:block}
@media(max-width:1100px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.partners{padding:40px 0}.partners-intro{font-size:14px;line-height:1.55}.partner-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.partner-card{min-height:125px;padding:12px}.partner-card img{height:62px}.partner-card:last-child{grid-column:1/-1;max-width:calc(50% - 6px);justify-self:center;width:100%}}

/* Titre clients : formulation unique, même hiérarchie et bleu que les labels de section */
.clients-title{color:#0c55b8!important;text-transform:uppercase;font-size:28px!important;line-height:1.2;margin:0;letter-spacing:-.025em}

/* Harmonisation des titres de section */
.services-kicker{color:#0c55b8!important;text-transform:uppercase;font-size:28px!important;line-height:1.2;margin:0;letter-spacing:-.025em}

/* Ultra-wide desktop: preserve the full hero image without cropping, stretching or duplicate backgrounds. */
/* Desktop 15-22 inch: show the complete hero image at its natural aspect ratio.
   The image is 3840x1209, so the hero height follows that ratio instead of
   using a fixed height that would crop the lower part of the Jumper. */
@media (min-width: 901px) and (max-width: 2199px){
  .hero{height:auto;aspect-ratio:3840 / 1209;max-height:none;background:#0a2b5f}
  .hero:before{display:none!important}
  .hero-bg{inset:0;background-image:url('hero-bg-ultrawide-4k.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;z-index:1}
  .hero-shade{z-index:2}
  .hero-inner{z-index:3}
  .hero-copy{width:46%;max-width:650px;padding-top:34px;padding-bottom:34px}
  .hero h1{font-size:40px}
  .hero h2{font-size:21px}
  .hero p{font-size:16px;max-width:520px}
  .hero-points{font-size:15px;gap:10px 34px}
  .btn-hero{font-size:15px;padding:14px 23px}
  .contact-bar-grid{min-height:76px}
}
@media (min-width: 2200px){
  .hero{height:auto;aspect-ratio:3840 / 1209;max-height:none}
  .hero:before{display:none!important}
  .hero-bg{inset:0;background-image:url('hero-bg-ultrawide-4k.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;z-index:1}
  .hero-shade{z-index:2}
  .hero-inner{z-index:3}
}

/* V16 - orientation reset for mobile portrait after rotating from landscape.
   Prevents a stale/narrow layout from leaving a white strip on the right. */
@media (max-width:900px) and (orientation:portrait){
  html,body{width:100%;min-width:0;max-width:100%;overflow-x:hidden;}
  .header,.nav,.hero,.contact-bar,.section,.company,.zone,.quote-section,.partners,.footer{
    width:100%;max-width:100%;margin-left:0;margin-right:0;
  }
  .hero{overflow:hidden;}
  .hero-bg{left:0;right:0;width:100%;max-width:100%;}
  .hero-inner{width:100%;max-width:100%;}
}

/* V19: use a taller source on standard laptop/15-inch desktop screens.
   The standard hero image is 1717x916, so the full scene can be shown
   without cropping the lower part of the Jumper. Ultra-wide screens keep
   using the dedicated 3840x1209 image. */
@media (min-width:901px) and (max-width:1599px){
  .hero{width:100%;height:auto;aspect-ratio:1717 / 916;overflow:hidden;}
  .hero-bg{inset:0;width:100%;height:100%;background-image:url('hero-bg.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;}
  .hero-inner{height:100%;}
}

/* Le ratio est volontairement utilisé à la place de la largeur : Windows et
   les navigateurs peuvent réduire la largeur CSS avec la mise à l'échelle
   d'un moniteur 34 pouces. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero{width:100%;height:auto;aspect-ratio:3840 / 1209;overflow:hidden;}
  .hero-bg{inset:0;width:100%;height:100%;background-image:url('hero-bg-ultrawide-4k.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;}
  .hero-inner{height:100%;}
}

/* V20 - eliminate the visible seam between header and ultra-wide hero. */
@media (min-width:1600px){
  .header{border-bottom:0!important;box-shadow:none!important;}
  .hero{margin-top:0!important;border-top:0!important;}
  .hero-bg{top:0!important;}
}

/* V21 - ultra-wide hero: render the complete source image at its exact aspect ratio.
   No cover/cropping and no seam under the navigation. */
@media (min-width:1600px){
  .header{border-bottom:0!important;box-shadow:none!important;margin-bottom:0!important;}
  .nav-links a.active:after{display:none!important;}
  .hero{
    width:100%!important;
    height:calc(100vw * 1209 / 3840)!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  .hero-bg{
    position:absolute!important;
    top:0!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:100%!important;
    background-image:url('hero-bg-ultrawide-4k.jpg')!important;
    background-size:100% 100%!important;
    background-position:0 0!important;
    background-repeat:no-repeat!important;
  }
}

/* V22 - clean ultra-wide hero: full source frame, no crop, no stretch, no duplicate background.
   Source: 3840x1400, created from the taller full-van image and cropped only at the top
   to remove the source's 6px blue strip. */
@media (min-width:1600px){
  html,body{width:100%;max-width:none;overflow-x:hidden;}
  .header{border:0!important;box-shadow:none!important;margin:0!important;}
  .nav-links a.active:after{display:none!important;}
  .hero{width:100%!important;height:calc(100vw * 1400 / 3840)!important;aspect-ratio:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;background:#0b2d63!important;}
  .hero-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background-image:url('hero-bg-ultrawide-4k.jpg')!important;background-size:100% 100%!important;background-position:center top!important;background-repeat:no-repeat!important;}
  .hero-shade{inset:0!important;}
}

/* V27 - mobile portrait: match the approved mobile layout. */
@media (max-width:600px) and (orientation:portrait){
  .hero-copy{
    width:100%;
    padding:42px 40px 30px;
    box-sizing:border-box;
  }
  .contact-bar{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .contact-bar-grid{
    width:min(100%,320px);
    margin:0 auto;
    grid-template-columns:1fr;
    justify-items:stretch;
    box-sizing:border-box;
  }
  .contact-bar-grid>a,
  .contact-bar-grid>div,
  .contact-bar-grid>span{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:12px 0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.18);
    justify-content:flex-start;
    align-items:center;
    gap:13px;
  }
  .contact-bar-grid>a:first-child,
  .contact-bar-grid>div:first-child,
  .contact-bar-grid>span:first-child{padding-left:0!important;}
  .contact-bar-grid>a:last-child,
  .contact-bar-grid>div:last-child,
  .contact-bar-grid>span:last-child{border-bottom:0;}
}

/* V29 - mobile portrait hero: preserve the photographic proportions. */
@media (max-width:600px) and (orientation:portrait){
  /* V32 - mobile portrait: keep the hero image at its native proportions.
     The portrait source is 720x780, so the hero follows the same ratio. */
  .hero{
    height:calc(100vw * 780 / 720)!important;
    min-height:0!important;
    max-height:none!important;
    background:#062454!important;
  }
  .hero-bg{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-image:url('hero-bg-mobile-portrait.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#062454!important;
  }
  .hero-shade{
    inset:0!important;
    height:100%!important;
    background:linear-gradient(180deg,rgba(4,35,82,.90) 0%,rgba(4,35,82,.78) 30%,rgba(4,35,82,.28) 62%,rgba(4,35,82,.58) 100%)!important;
  }
  .hero-inner{height:100%!important;min-height:0!important;align-items:flex-start!important;}
  .hero-copy{width:100%!important;padding:42px 40px 30px!important;box-sizing:border-box!important;}
}

/* V33 - mobile portrait: match the supplied reference layout exactly. */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    height:calc(100vw * 780 / 460)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#0b4d9c!important;
  }
  .hero-bg{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-image:url('hero-bg-mobile-portrait.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  .hero-shade{
    inset:0!important;
    height:100%!important;
    background:linear-gradient(180deg,rgba(5,65,135,.10) 0%,rgba(5,50,105,.08) 52%,rgba(3,27,65,.68) 100%)!important;
  }
  .hero-inner{
    height:100%!important;
    min-height:0!important;
    align-items:flex-start!important;
  }
  .hero-copy{
    width:100%!important;
    padding:42px 40px 24px!important;
    box-sizing:border-box!important;
  }
  .hero h1{font-size:29px!important;line-height:1.18!important;margin-bottom:10px!important;}
  .hero h2{font-size:18px!important;line-height:1.32!important;margin-bottom:12px!important;}
  .hero p{font-size:14px!important;line-height:1.48!important;margin-bottom:14px!important;}
  .hero-points{
    grid-template-columns:1fr 1fr!important;
    gap:9px 16px!important;
    font-size:12px!important;
    margin-bottom:18px!important;
  }
  .hero-points b{width:17px!important;height:17px!important;margin-right:6px!important;}
  .btn-hero{display:flex!important;width:max-content!important;margin:0 auto!important;padding:12px 19px!important;font-size:12px!important;}

  .contact-bar{width:100%!important;max-width:100%!important;overflow:hidden!important;}
  .contact-bar-grid{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    grid-template-columns:1fr!important;
    box-sizing:border-box!important;
  }
  .contact-bar-grid>a,
  .contact-bar-grid>div,
  .contact-bar-grid>span{
    width:100%!important;
    max-width:100%!important;
    padding:12px 34px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.18)!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:13px!important;
    box-sizing:border-box!important;
  }
  .contact-bar-grid>a:last-child,
  .contact-bar-grid>div:last-child,
  .contact-bar-grid>span:last-child{border-bottom:0!important;}

  .service-grid{grid-template-columns:1fr 1fr!important;gap:12px!important;}
  .service-card{padding:0 12px 16px!important;} .service-image{width:calc(100% + 24px)!important;height:105px!important;margin:0 -12px 14px!important;}
  .service-card h3{font-size:15px!important;}
  .service-card p{font-size:12px!important;line-height:1.55!important;}
  .section{padding:30px 0!important;}
  .section-title h2{font-size:23px!important;}
  .company-grid{grid-template-columns:1fr!important;gap:20px!important;}
  .company-copy{padding-right:0!important;border-right:0!important;}
  .company-copy p{font-size:13px!important;line-height:1.55!important;}
  .company-copy li{font-size:12px!important;}
}

/* V34 - mobile portrait: reproduce the supplied reference composition.
   The hero copy stays at the top while the trust points and CTA are anchored
   near the bottom of the image, as in the reference phone mock-up. */
@media (max-width:600px) and (orientation:portrait){
  .hero{
    height:calc(100vw * 780 / 460)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#0b4d9c!important;
  }
  .hero-bg{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-image:url('hero-bg-mobile-portrait-v34.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  .hero-shade{
    inset:0!important;
    height:100%!important;
    /* Bright upper scene like the reference; strong darkening only at the bottom
       so the white text/CTA remain legible without making the sky muddy. */
    background:linear-gradient(180deg,
      rgba(5,35,75,.02) 0%,
      rgba(5,35,75,.03) 54%,
      rgba(3,24,55,.18) 72%,
      rgba(3,22,48,.62) 100%)!important;
  }
  .hero-inner{
    height:100%!important;
    min-height:0!important;
    align-items:flex-start!important;
  }
  .hero-copy{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    padding:61px 40px 0!important;
    box-sizing:border-box!important;
  }
  .hero h1{
    font-size:29px!important;
    line-height:1.18!important;
    margin-bottom:10px!important;
  }
  .hero h2{
    font-size:18px!important;
    line-height:1.32!important;
    margin-bottom:13px!important;
  }
  .hero p{
    font-size:14px!important;
    line-height:1.48!important;
    margin-bottom:0!important;
    max-width:none!important;
  }
  .hero-points{
    position:absolute!important;
    left:40px!important;
    right:40px!important;
    bottom:122px!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px 16px!important;
    font-size:12px!important;
    line-height:1.35!important;
    margin:0!important;
  }
  .hero-points b{
    width:17px!important;
    height:17px!important;
    margin-right:6px!important;
  }
  .btn-hero{
    position:absolute!important;
    left:50%!important;
    bottom:53px!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    width:58%!important;
    max-width:420px!important;
    min-width:230px!important;
    padding:13px 18px!important;
    font-size:13px!important;
    box-sizing:border-box!important;
  }
}


/* V36 - mobile portrait: increase separation between intro text and trust points,
   move the intro upward, and improve white-text readability over the bright sky. */
@media (max-width:600px) and (orientation:portrait){
  .hero-copy{
    padding-top:35px!important;
  }
  .hero-shade{
    background:linear-gradient(180deg,
      rgba(3,35,78,.20) 0%,
      rgba(3,35,78,.16) 34%,
      rgba(3,28,65,.10) 55%,
      rgba(3,24,55,.20) 72%,
      rgba(3,22,48,.62) 100%)!important;
  }
  .hero h1,.hero h2,.hero p{
    text-shadow:0 1px 3px rgba(0,20,50,.30)!important;
  }
  .hero-points{
    bottom:105px!important;
  }
}


/* V37 - mobile portrait: improve readability and separate the content zones. */
@media (max-width:600px) and (orientation:portrait){
  .hero-copy{
    padding-top:52px!important;
  }
  /* A subtle dark wash behind the upper copy keeps white text readable
     over the bright sky/clouds without making the whole photo dark. */
  .hero-shade{
    background:linear-gradient(180deg,
      rgba(3,30,70,.30) 0%,
      rgba(3,30,70,.24) 30%,
      rgba(3,30,70,.10) 54%,
      rgba(3,24,55,.20) 72%,
      rgba(3,22,48,.62) 100%)!important;
  }
  .hero h1,.hero h2,.hero p{
    text-shadow:0 2px 5px rgba(0,18,45,.72)!important;
  }
  .hero-points{
    bottom:185px!important;
  }
  .btn-hero{
    bottom:34px!important;
  }
}

/* V38 - mobile portrait: keep the CTA visible in the initial viewport,
   create a clearer gap between intro/points/CTA, and darken the upper
   hero area for stronger white-text contrast. */
@media (max-width:600px) and (orientation:portrait){
  .hero-shade{
    background:linear-gradient(180deg,
      rgba(3,30,68,.46) 0%,
      rgba(3,30,68,.38) 28%,
      rgba(3,28,64,.28) 52%,
      rgba(3,24,55,.26) 70%,
      rgba(3,22,48,.66) 100%)!important;
  }
  .hero h1,.hero h2,.hero p{
    text-shadow:0 2px 6px rgba(0,12,30,.88)!important;
  }
  .hero-copy{
    padding-top:28px!important;
  }
  .hero-points{
    bottom:228px!important;
    gap:14px 18px!important;
  }
  .btn-hero{
    bottom:92px!important;
  }
}

/* V39 - mobile portrait: strengthen trust-point readability and restore
   the first contact icon alignment with the other contact rows. */
@media (max-width:600px) and (orientation:portrait){
  .hero-points{
    color:#fff!important;
    text-shadow:0 2px 5px rgba(0,0,0,.95)!important;
  }
  .hero-points b{
    text-shadow:0 1px 3px rgba(0,0,0,.95)!important;
    box-shadow:0 1px 3px rgba(0,0,0,.45)!important;
  }
  .contact-bar-grid>a:first-child,
  .contact-bar-grid>div:first-child,
  .contact-bar-grid>span:first-child{
    padding-left:34px!important;
  }
}

/* V40 - mobile portrait: move the trust points below the Jumper logo and
   increase vertical spacing between the two rows, while keeping a clear gap
   before the CTA. */
@media (max-width:600px) and (orientation:portrait){
  .hero-points{
    bottom:160px!important;
    row-gap:28px!important;
    column-gap:18px!important;
  }
  .hero-points span{
    line-height:1.35!important;
  }
}

/* V41 - mobile portrait: bring only the first two trust points closer to the lower row. */
@media (max-width:600px) and (orientation:portrait){
  .hero-points > span:nth-child(1),
  .hero-points > span:nth-child(2){
    position:relative!important;
    top:20px!important;
  }
}

/* V42 - desktop only: crop 15% from the top of the hero image and
   shift the hero content upward accordingly. Mobile portrait is untouched. */
@media (min-width:901px){
  .hero-bg{
    top:-15%!important;
    bottom:auto!important;
    height:115%!important;
  }
  .hero-inner{
    transform:translateY(-7.5%)!important;
  }
}

/* V43 - mobile portrait: further darken the trust-point text for readability. */
@media (max-width:600px) and (orientation:portrait){
  .hero-points{
    color:#fff!important;
    text-shadow:0 2px 7px rgba(0,0,0,.98), 0 0 3px rgba(0,0,0,.90)!important;
  }
  .hero-points span{
    text-shadow:0 2px 7px rgba(0,0,0,.98), 0 0 3px rgba(0,0,0,.90)!important;
  }
  .hero-points b{
    text-shadow:0 1px 4px rgba(0,0,0,1)!important;
  }
}

.phone-contact>a,.phone-contact a{color:inherit;text-decoration:none}.phone-contact>a strong,.phone-contact a strong{display:block}.phone-contact{display:flex;align-items:center;gap:13px}

/* V49 - mobile adaptation for Nos services and Berbel en chiffres */
@media (max-width:600px) and (orientation:portrait){
  .services{padding:38px 0 34px!important;}
  .services .section-title{margin-bottom:20px!important;}
  .services .section-title h2{font-size:22px!important;line-height:1.25!important;padding:0 8px;}
  .service-grid{grid-template-columns:1fr!important;gap:16px!important;}
  .service-card{padding:0 16px 18px!important;min-height:0!important;border-radius:8px!important;}
  .service-image{width:calc(100% + 32px)!important;height:165px!important;margin:0 -16px 14px!important;object-fit:cover!important;}
  .service-icon{width:42px!important;height:42px!important;font-size:21px!important;margin-bottom:8px!important;}
  .service-card h3{font-size:16px!important;margin-bottom:7px!important;}
  .service-card p{font-size:12.5px!important;line-height:1.55!important;margin:0!important;}

  .stats-band{min-height:0!important;background-position:center center!important;}
  .stats-inner{padding:30px 0 28px!important;}
  .stats-title{margin-bottom:20px!important;padding:0 12px!important;}
  .stats-title .kicker{font-size:10px!important;letter-spacing:.16em!important;line-height:1.45!important;margin-bottom:7px!important;}
  .stats-title h2{font-size:21px!important;line-height:1.25!important;}
  .stats-grid{grid-template-columns:1fr 1fr!important;gap:0!important;}
  .stat-item{min-height:132px!important;padding:0 5px!important;}
  .stat-item+.stat-item:before{height:104px!important;top:12px!important;}
  .stat-item:nth-child(3),.stat-item:nth-child(4){border-top:1px solid rgba(255,255,255,.25)!important;padding-top:18px!important;}
  .stat-item:nth-child(3):before{display:none!important;}
  .stat-icon{height:35px!important;margin-bottom:3px!important;}
  .stat-icon svg{width:34px!important;height:34px!important;}
  .stat-item strong{font-size:27px!important;line-height:1.08!important;white-space:nowrap!important;}
  .stat-item span{font-size:12.5px!important;line-height:1.3!important;margin-top:5px!important;}
}

/* V51 - 15-inch desktop: keep the complete hero frame visible so the Swiss flag is not cropped. */
@media (min-width:901px) and (max-width:1599px){
  .hero-bg{
    top:0!important;
    bottom:0!important;
    height:100%!important;
  }
  .hero-inner{
    transform:none!important;
  }
}

/* V52 - small/medium desktop: show the complete standard hero frame.
   Use the taller 1717x916 source and fit the whole frame into the available
   viewport height so the van, road and Swiss flag remain visible at once. */
@media (min-width:901px) and (max-width:1599px){
  .hero{
    height:clamp(560px, calc(100vh - 74px), 730px)!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }
  .hero-bg{
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    background-image:url('hero-bg.jpg')!important;
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  .hero-inner{height:100%!important;transform:none!important;}
}

/* V53 - small/medium desktop: preserve the hero image proportions.
   Fit the complete standard frame inside the hero instead of stretching it. */
@media (min-width:901px) and (max-width:1599px){
  .hero{
    height:clamp(560px, calc(100vh - 74px), 730px)!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#0b2d63!important;
  }
  .hero-bg{
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    background-image:url('hero-bg.jpg')!important;
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#0b2d63!important;
  }
  .hero-inner{height:100%!important;transform:none!important;}
}

/* V54 - small/medium desktop: fill the entire hero without distortion or side bands.
   Preserve the source aspect ratio with cover; use the available viewport height. */
@media (min-width:901px) and (max-width:1599px){
  .hero{
    width:100%!important;
    height:calc(100vh - 74px)!important;
    min-height:620px!important;
    max-height:730px!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#0b2d63!important;
  }
  .hero-bg{
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    background-image:url('hero-bg.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#0b2d63!important;
  }
  .hero-inner{height:100%!important;transform:none!important;}
}

/* V57 - écrans ultra-larges (dont 34 pouces).
   L'original haute résolution mesure 4156 × 1514 px (et non 3840 × 1209).
   Le précédent ratio forçait background-size: cover à agrandir l'image puis à
   couper le haut et le bas. En faisant correspondre le conteneur au ratio réel,
   l'intégralité du visuel reste visible sans étirement ni recadrage. */
@media (min-width:1600px){
  .hero{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4156 / 1514!important;
  }
  .hero-bg{
    background-image:url('hero-bg-ultrawide-4k@2x.jpg')!important;
    background-size:100% 100%!important;
    background-position:center center!important;
  }
}

/* V58 - dedicated composition for ultrawide screens. The panoramic foreground
   is always fully visible; a blurred copy provides seamless side extension. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero{
    height:clamp(500px, 38vw, 690px)!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    isolation:isolate;
    background:#0b2d63!important;
  }
  .hero:before{
    content:"";
    display:block!important;
    position:absolute;
    inset:-22px;
    z-index:1;
    background:url('hero-bg-34-ultrawide.png') center center / cover no-repeat;
    filter:blur(18px);
    transform:scale(1.04);
  }
  .hero-bg{
    z-index:2!important;
    background-image:url('hero-bg-34-ultrawide.png')!important;
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:transparent!important;
  }
  .hero-shade{z-index:3!important;}
  .hero-inner{z-index:4!important;height:100%!important;transform:none!important;}
}

/* V59 - full-width ultrawide hero. Its height follows the genuine panoramic
   image ratio, which eliminates both the visible seam and any image cropping. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:2172 / 724!important;
    isolation:auto!important;
  }
  .hero:before{display:none!important;}
  .hero-bg{
    inset:0!important;
    z-index:1!important;
    background-image:url('hero-bg-34-ultrawide.png')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:#0b2d63!important;
  }
  .hero-shade{z-index:2!important;}
  .hero-inner{z-index:3!important;height:100%!important;}
}

/* V60 - keep the contact strip below the initial viewport on ultrawide displays. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero{min-height:calc(100dvh - 74px)!important;}
}

/* V61 - shift the ultrawide focal point left and upward: preserve the flag
   on the right edge while prioritising the road at the bottom. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero-bg{background-position:right bottom!important;}
}

/* V62 - panorama with extra foreground road below the van. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero-bg{background-image:url('hero-bg-34-ultrawide-road.png')!important;}
}

/* V63 - render the dedicated ultrawide artwork in full, so the added road
   foreground is never lost to the small crop introduced by background cover. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero-bg{background-size:100% 100%!important;}
}

/* V64 - preserve the image proportions while matching the ultrawide hero ratio. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero-bg{
    background-image:url('hero-bg-34-ultrawide-fitted.png')!important;
    background-size:cover!important;
    background-position:right bottom!important;
  }
}

/* V65 - lift the visual slightly while retaining a continuous road at the base. */
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero-bg{
    background-image:url('hero-bg-34-ultrawide-fitted.png'),url('hero-bg-34-ultrawide-fitted.png')!important;
    background-size:cover,cover!important;
    background-position:right bottom 28px,right bottom!important;
    background-repeat:no-repeat,no-repeat!important;
  }
}

/* V66 - standard desktop: use the complete first viewport below the header. */
@media (min-width:901px) and (max-aspect-ratio:1999/1000){
  .hero{
    height:calc(100dvh - 74px)!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
  }
  .hero:before{display:none!important;}
  .hero-bg{
    inset:0!important;
    width:auto!important;
    height:auto!important;
    z-index:1!important;
    background-image:url('hero-bg.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  .hero-shade{z-index:2!important;}
  .hero-inner{z-index:3!important;height:100%!important;}
}

/* V66 - restore the dedicated mobile image layer and its readable overlay. */
@media (max-width:900px){
  .hero{background:#062454!important;}
  .hero:before{display:none!important;}
  .hero-bg{
    display:block!important;
    z-index:1!important;
    background-image:url('hero-bg.jpg')!important;
    background-size:cover!important;
    background-position:right center!important;
    background-repeat:no-repeat!important;
  }
  .hero-shade{z-index:2!important;}
  .hero-inner{z-index:3!important;}
}
@media (max-width:600px){
  .hero-bg{inset:auto 0 0!important;width:100%!important;height:330px!important;}
}