/* ==========================================================================
   DAVE VIP CARGO — Feuille de style publique (page d'accueil)
   Palette: noir #090B0D, anthracite #11171B, or #C9860B / #A96A00 / #E3A52A
   Typo: Roboto Condensed (titres) + Roboto (texte)
   ========================================================================== */

:root{
  --black:#090B0D;
  --anthracite:#11171B;
  --gold:#C9860B;
  --gold-dark:#A96A00;
  --gold-light:#E3A52A;
  --text-gray:#565B60;
  --border-gray:#D9DDE1;
  --bg-light:#F6F7F7;
  --white:#FFFFFF;

  --gold-gradient:linear-gradient(90deg,#B87505,#D09319);

  --container-max:1310px;
  --gutter:clamp(20px,4.5vw,65px);

  --font-title:"Roboto Condensed",Arial,sans-serif;
  --font-text:"Roboto",Arial,sans-serif;

  --radius-sm:5px;
  --radius-md:7px;
  --radius-lg:14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
input,select,textarea{ font:inherit; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-text);
  font-weight:400;
  color:var(--black);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-title{
  font-family:var(--font-title);
  line-height:1.12;
  letter-spacing:-0.2px;
  color:var(--black);
}

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:56px;
  padding:0 26px;
  border-radius:6px;
  font-family:var(--font-text);
  font-weight:700;
  font-size:16px;
  border:1.5px solid transparent;
  white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-gold{
  background:var(--gold-gradient);
  color:var(--white);
  box-shadow:0 6px 16px rgba(176,112,0,.18);
}
.btn-gold:hover{ box-shadow:0 8px 20px rgba(176,112,0,.28); }

.btn-outline-dark{
  background:var(--white);
  color:#141719;
  border:1.5px solid #2F3336;
}
.btn-outline-dark:hover{ background:var(--bg-light); }

.btn-dark{
  background:var(--black);
  color:var(--white);
  border-radius:5px;
}
.btn-dark:hover{ background:#1c2226; }

.btn-block{ width:100%; }

/* ==========================================================================
   TOPBAR (barre utilitaire)
   ========================================================================== */
.topbar{
  background:var(--black);
  color:var(--white);
  min-height:41px;
}
.topbar .container{
  height:41px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.topbar-item{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:400;
  white-space:nowrap;
}
.topbar-item svg{ width:17px;height:17px;flex:none; color:var(--gold-light); }
.topbar-item.right{ margin-left:auto; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  background:var(--white);
  border-bottom:1px solid #E4E6E8;
  box-shadow:0 2px 10px rgba(12,18,22,.035);
  position:sticky;
  top:0;
  z-index:100;
}
.navbar .container{
  display:flex;
  align-items:center;
  min-height:108px;
  gap:24px;
}
.navbar-logo{
  flex:none;
  width:285px;
  height:82px;
  display:flex;
  align-items:center;
}
.navbar-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:auto;
}
.nav-links a{
  position:relative;
  font-family:var(--font-text);
  font-weight:500;
  font-size:15px;
  color:#141719;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 0;
}
.nav-links a svg{ width:13px;height:13px; }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:42px;height:2px;
  background:var(--gold);
  border-radius:2px;
}
.nav-item-dropdown{ position:relative; }
.nav-dropdown-menu{
  position:absolute;
  top:100%;left:0;
  margin-top:10px;
  background:var(--white);
  border:1px solid var(--border-gray);
  border-radius:8px;
  box-shadow:0 14px 30px rgba(20,25,29,.12);
  min-width:230px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-dropdown-menu a{
  display:block;
  padding:9px 12px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
}
.nav-dropdown-menu a:hover{ background:var(--bg-light); color:var(--gold-dark); }

.lang-select{
  position:relative;
  flex:none;
}
.lang-select-btn{
  width:112px;
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  background:var(--white);
  border:1px solid #D8DCE0;
  border-radius:5px;
  font-size:13px;
  font-weight:500;
  color:#141719;
}
.lang-select-btn .flag-icon{ flex:none; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.lang-select-btn span{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lang-select-btn svg{ width:12px;height:12px;flex:none; transition:transform .15s ease; }
.lang-select.open .lang-select-btn svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--white);
  border:1px solid var(--border-gray);
  border-radius:8px;
  box-shadow:0 14px 30px rgba(20,25,29,.14);
  width:210px;
  padding:6px;
  z-index:50;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.lang-select.open .lang-menu{ opacity:1;visibility:visible;transform:translateY(0); }
.lang-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  color:#141719;
}
.lang-menu a:hover{ background:var(--bg-light); }
.lang-menu a.is-active{ color:var(--gold-dark); background:#FBF3E4; }
.lang-menu a .soon{ margin-left:auto; font-size:11px; font-weight:400; color:var(--text-gray); }

.navbar-cta{ flex:none; width:178px; height:48px; padding:0; font-size:15px; }

.navbar-burger{
  display:none;
  flex:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--border-gray);border-radius:6px;
}
.navbar-burger svg{ width:22px;height:22px; }

/* ==========================================================================
   MENU MOBILE
   ========================================================================== */
.mobile-menu{
  position:fixed;
  inset:0 0 0 auto;
  width:min(340px,86vw);
  height:100vh;
  background:var(--white);
  z-index:200;
  transform:translateX(100%);
  transition:transform .25s ease;
  box-shadow:-10px 0 30px rgba(0,0,0,.15);
  display:flex;
  flex-direction:column;
  padding:24px;
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mobile-menu-close{ width:38px;height:38px; border:1px solid var(--border-gray); border-radius:6px; background:none; display:flex;align-items:center;justify-content:center; }
.mobile-menu-close svg{ width:18px;height:18px; }
.mobile-menu nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 2px;
  border-bottom:1px solid var(--bg-light);
  font-family:var(--font-text);font-weight:600;font-size:16px;
  color:var(--black);
}
.mobile-menu .btn{ margin-top:22px; }
.mobile-backdrop{
  position:fixed;inset:0;background:rgba(9,11,13,.55);
  z-index:190; opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
}
.mobile-backdrop.open{ opacity:1;visibility:visible; }
body.no-scroll{ overflow:hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:var(--white);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:45% 55%;
  align-items:stretch;
  min-height:620px;
}
.hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:56px;
  padding-inline-start:var(--gutter);
  padding-inline-end:40px;
  max-width:640px;
}
.hero-right{
  position:relative;
  min-height:380px;
}
.hero-right img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  position:absolute;inset:0;
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 14px;
  border:1.5px solid #D88E0B;
  border-radius:7px;
  background:var(--white);
  color:#B87400;
  font-size:14px;
  font-weight:500;
  width:fit-content;
}

.hero-title{
  font-family:var(--font-title);
  font-weight:800;
  color:#080A0B;
  font-size:clamp(34px,4.3vw,62px);
  line-height:1.03;
  letter-spacing:-1.4px;
  max-width:550px;
  margin-top:22px;
}

.hero-text{
  font-family:var(--font-text);
  font-weight:400;
  font-size:17px;
  color:#41464A;
  line-height:1.65;
  max-width:520px;
  margin-top:24px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:30px;
}
.hero-actions .btn-gold{ width:235px; }
.hero-actions .btn-outline-dark{ width:250px; }

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-top:38px;
}
.hero-trust-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:170px;
}
.hero-trust-item svg{ width:28px;height:28px;flex:none;color:var(--gold);stroke-width:1.6; }
.hero-trust-item span{
  font-family:var(--font-text);
  font-weight:600;
  font-size:13px;
  color:#181B1D;
  line-height:1.35;
}

/* ==========================================================================
   CARTE "QUE SOUHAITEZ-VOUS FAIRE ?"
   ========================================================================== */
.action-card-wrap{ position:relative; z-index:10; }
.action-card{
  max-width:1140px;
  margin:0 auto;
  margin-top:-70px;
  background:var(--white);
  border:1px solid rgba(205,209,212,.8);
  border-radius:var(--radius-lg);
  box-shadow:0 14px 38px rgba(22,28,32,.13),0 3px 8px rgba(22,28,32,.06);
  padding:34px 40px 40px;
}
.action-card-title{
  text-align:center;
  font-family:var(--font-title);
  font-weight:700;
  font-size:32px;
  margin-bottom:28px;
}
.action-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
}
.action-col{
  padding:6px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-left:1px solid #C9CDD1;
}
.action-col:first-child{ border-left:none; }
.action-col-icon{ width:40px;height:40px;color:var(--gold);stroke-width:1.6;margin-bottom:14px; }
.action-col.ramassage .action-col-icon{ width:46px;height:46px; }
.action-col.suivi .action-col-icon{ width:44px;height:44px; }
.action-col h3{ font-size:18px;font-weight:700;font-family:var(--font-text);margin-bottom:8px; }
.action-col p{ font-size:14px;color:#5A5E62;line-height:1.5;max-width:230px;margin-bottom:20px; }
.action-col .btn{ width:240px;height:58px; }
.tracking-field{
  display:flex;
  gap:10px;
  width:100%;
  max-width:335px;
}
.tracking-field input{
  flex:1;
  height:58px;
  border:1px solid #D4D7DA;
  border-radius:5px;
  padding:0 16px;
  font-size:14px;
  color:var(--black);
  background:var(--white);
  min-width:0;
}
.tracking-field input::placeholder{ color:#A7ABAE; }
.tracking-field .btn-dark{ width:115px;height:58px;padding:0; }

/* ==========================================================================
   TITRES DE SECTION
   ========================================================================== */
.section{ padding-block:65px; }
.section-head{ text-align:center; margin-bottom:44px; }
.section-title{
  font-family:var(--font-title);
  font-weight:700;
  font-size:34px;
}
.section-underline{
  width:70px;height:3px;
  background:var(--gold);
  border-radius:3px;
  margin:14px auto 0;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:23px;
}
.service-card{
  position:relative;
  background:var(--white);
  border:1px solid #E2E4E6;
  border-radius:9px;
  box-shadow:0 3px 13px rgba(27,31,34,.075);
  overflow:visible;
  display:flex;
  flex-direction:column;
}
.service-card-media{
  position:relative;
  height:205px;
  border-radius:7px 7px 0 0;
  overflow:hidden;
}
.service-card-media img{ width:100%;height:100%;object-fit:cover; }
.service-card-icon{
  position:absolute;
  left:28px;top:205px;
  transform:translateY(-50%);
  width:60px;height:60px;
  border-radius:50%;
  background:var(--gold-gradient);
  border:4px solid var(--white);
  box-shadow:0 4px 10px rgba(120,75,0,.18);
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.service-card-icon svg{ width:26px;height:26px;color:var(--white);stroke-width:1.8; }
.service-card-body{
  padding:28px 28px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.service-card-body h3{
  font-family:var(--font-title);
  font-weight:700;
  font-size:21px;
  min-height:56px;
}
.service-card-body p{
  font-size:14px;
  line-height:1.6;
  color:#555B60;
  margin-top:8px;
  flex:1;
}
.service-card-body .more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  font-size:14px;
  font-weight:500;
  color:#C47A00;
}
.service-card-body .more svg{ width:14px;height:14px; }

/* ==========================================================================
   DESTINATIONS
   ========================================================================== */
.destinations{
  display:grid;
  grid-template-columns:24% 76%;
  gap:40px;
  align-items:center;
}
.destinations-text h2{
  font-family:var(--font-title);
  font-weight:700;
  font-size:31px;
  line-height:1.15;
}
.destinations-text p{
  font-size:15px;
  line-height:1.65;
  color:var(--text-gray);
  max-width:260px;
  margin-top:14px;
}
.destinations-map{
  position:relative;
  height:270px;
  background:#F7F8F8;
  border:1px solid #E0E3E5;
  border-radius:10px;
  overflow:hidden;
}
.destinations-map svg{ position:absolute;inset:0;width:100%;height:100%; }
.destinations-map .map-flag{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--black);
}
.destinations-map .flag-icon{ width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08); background-size:cover; }

/* ==========================================================================
   COMMENT ÇA FONCTIONNE
   ========================================================================== */
.steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:14px;
}
.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.step-num{
  width:34px;height:34px;
  border:2px solid #CF880B;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-text);font-weight:700;font-size:18px;
  color:var(--black);
  margin-bottom:14px;
}
.step-tile{
  width:82px;height:82px;
  background:#F7F7F7;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.step-tile svg{ width:45px;height:45px;color:var(--black);stroke-width:1.6; }
.step h3{ font-size:15px;font-weight:700;font-family:var(--font-text); }
.step p{ font-size:13px;color:#575C60;margin-top:6px;max-width:150px; }
.step-arrow{ align-self:center; margin-top:44px; color:#141719; }
.step-arrow svg{ width:28px;height:28px; }

/* ==========================================================================
   SECTION SOMBRE — POURQUOI NOUS CHOISIR
   ========================================================================== */
.why-section{
  position:relative;
  background:#0A0F12;
  min-height:360px;
  overflow:hidden;
}
.why-bg{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.why-bg::before{
  content:"";
  background:linear-gradient(90deg,#080D10 0%,#10171A 70%,rgba(16,23,26,.75) 100%);
  position:relative;z-index:2;
}
.why-bg-media{ position:relative; }
.why-bg-media img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover;object-position:center center; }
.why-bg-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,13,16,.9) 0%,rgba(8,13,16,.15) 45%,rgba(8,13,16,0) 100%);
}
.why-content{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:360px;
  gap:20px;
  padding-block:44px;
}
.why-left{ max-width:420px; }
.why-left h2{
  font-family:var(--font-title);
  font-weight:800;
  font-size:34px;
  color:var(--gold-light);
  line-height:1.14;
}
.why-left .section-underline{ margin:14px 0 26px; }
.why-list{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.why-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px 14px 0;
  position:relative;
}
.why-item:nth-child(odd)::after{
  content:"";
  position:absolute;right:0;top:8px;bottom:8px;
  width:1px;background:rgba(255,255,255,.25);
}
.why-item:nth-child(-n+2)::before{
  content:"";
  position:absolute;left:0;right:18px;bottom:0;
  height:1px;background:rgba(255,255,255,.25);
}
.why-item svg{ width:38px;height:38px;color:var(--gold);flex:none;stroke-width:1.5; }
.why-item span{ font-size:15px;font-weight:500;color:var(--white); }

.why-right{ position:relative; display:flex; justify-content:flex-end; }
.phone-mockup{
  width:150px;
  height:270px;
  background:#0B0E10;
  border-radius:20px;
  border:2px solid #2A3237;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  padding:8px;
  overflow:hidden;
}
.phone-mockup-screen{
  width:100%;height:100%;
  background:var(--white);
  border-radius:13px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  font-family:var(--font-text);
}
.phone-mockup .p-top{ background:var(--black); color:var(--white); font-size:5.5px; padding:5px 8px; display:flex; justify-content:space-between; }
.phone-mockup .p-nav{ display:flex;align-items:center;gap:4px;padding:7px 8px;border-bottom:1px solid #eee; }
.phone-mockup .p-nav img{ width:38px; }
.phone-mockup .p-hero{ padding:12px 10px; flex:1; }
.phone-mockup .p-badge{ font-size:5px;border:1px solid var(--gold);color:var(--gold-dark);border-radius:4px;padding:2px 6px;display:inline-block;margin-bottom:6px; }
.phone-mockup .p-title{ font-family:var(--font-title);font-weight:800;font-size:11px;line-height:1.05;letter-spacing:-.2px; }
.phone-mockup .p-text{ font-size:5px;color:#666;margin-top:5px;line-height:1.4; }
.phone-mockup .p-btn{ margin-top:8px;background:var(--gold-gradient);color:#fff;font-size:5.5px;font-weight:700;border-radius:3px;padding:5px 0;text-align:center; }
.phone-mockup .p-btn2{ margin-top:5px;border:1px solid #222;border-radius:3px;padding:5px 0;text-align:center;font-size:5.5px;font-weight:700; }

/* ==========================================================================
   BANDE CTA
   ========================================================================== */
.cta-band{
  background:#FBFBFA;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(45deg,rgba(201,134,11,.05) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(201,134,11,.05) 25%,transparent 25%);
  background-size:44px 44px;
  opacity:.5;
}
.cta-band .container{
  position:relative;
  min-height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding-block:26px;
  text-align:center;
}
.cta-band h2{ font-size:25px;font-weight:700;font-family:var(--font-text); }
.cta-band .cta-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.cta-band .btn{ height:50px;padding:0 26px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:#0C1114;
  color:#D8DADC;
  padding-block:46px 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.footer-col{
  padding:0 26px;
  position:relative;
}
.footer-col:not(:first-child)::before{
  content:"";
  position:absolute;left:0;top:4px;bottom:4px;
  width:1px;background:rgba(255,255,255,.25);
}
.footer-col:first-child{ padding-left:0; }
.footer-logo{ width:200px; }
.footer-logo-chip{
  display:inline-flex;
  background:var(--white);
  padding:10px 14px;
  border-radius:8px;
}
.footer-logo-chip img{ width:180px;display:block; }
.footer-col p{ font-size:13px;color:#D0D3D4;margin-top:14px;line-height:1.7; }
.footer-col h4{ font-family:var(--font-text);font-weight:700;font-size:16px;color:var(--white);margin-bottom:14px; }
.footer-col ul li{ line-height:1.7; }
.footer-col ul a{ font-size:12px;color:#C7CACB; }
.footer-col ul a:hover{ color:var(--gold-light); }
.footer-contact-item{ display:flex;align-items:center;gap:10px;margin-bottom:12px; font-size:13px; }
.footer-contact-item svg{ width:18px;height:18px;flex:none;color:var(--white); }
.footer-contact-item.whatsapp svg{ color:#25D366; }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  text-align:center;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;
  color:#D8DADC;
}
.footer-separator{ color:rgba(255,255,255,.35); }
.footer-usdot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#D8DADC;
  font-weight:600;
  letter-spacing:.3px;
}
.footer-usdot img{ width:30px;height:30px;flex:none; }

/* ==========================================================================
   SUIVI — résultat inline
   ========================================================================== */
.tracking-result{
  margin-top:16px;
  text-align:left;
  font-size:13px;
  color:var(--text-gray);
}
.tracking-result .tr-card{
  background:var(--bg-light);
  border:1px solid var(--border-gray);
  border-radius:8px;
  padding:14px 16px;
}
.tracking-result .tr-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-text);
  font-weight:700;
  font-size:13px;
  color:var(--gold-dark);
  margin-bottom:6px;
}
.tracking-result .tr-status .dot{ width:8px;height:8px;border-radius:50%;background:var(--gold); }
.tracking-result .tr-route{ font-size:13px;color:var(--black);font-weight:500; }
.tracking-result .tr-desc{ font-size:12.5px;margin-top:4px;line-height:1.5; }
.tracking-result.error{ color:#B3271C; }

/* ==========================================================================
   MODALES (devis / ramassage)
   ========================================================================== */
dialog.modal{
  border:none;
  border-radius:14px;
  padding:0;
  width:min(640px,92vw);
  max-height:90vh;
  box-shadow:0 24px 60px rgba(9,11,13,.35);
}
dialog.modal::backdrop{
  background:rgba(9,11,13,.6);
  backdrop-filter:blur(2px);
}
.modal-form{ padding:34px 32px 30px; position:relative; overflow-y:auto; max-height:90vh; }
.modal-close{
  position:absolute; top:18px; right:18px;
  width:36px;height:36px;
  border:1px solid var(--border-gray);
  border-radius:50%;
  background:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.modal-close svg{ width:16px;height:16px; }
.modal-title{ font-family:var(--font-title);font-weight:700;font-size:26px; }
.modal-subtitle{ font-size:14px;color:var(--text-gray);margin-top:6px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:24px;
  margin-bottom:24px;
}
.form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#2A2E31;
}
.form-grid label.full{ grid-column:1 / -1; }
.form-grid input,.form-grid select,.form-grid textarea{
  border:1px solid var(--border-gray);
  border-radius:6px;
  padding:11px 13px;
  font-size:14px;
  font-weight:400;
  color:var(--black);
  background:var(--white);
  width:100%;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,134,11,.15);
}
.form-grid textarea{ resize:vertical; }

.btn .btn-loader{ margin-left:2px; }
.btn.is-loading .btn-label{ opacity:.55; }

@media (max-width:600px){
  .form-grid{ grid-template-columns:1fr; }
  .modal-form{ padding:26px 20px 24px; }
}

/* ==========================================================================
   PAGES INTERNES — bannière + contenu éditorial (prose)
   ========================================================================== */
.page-hero{
  background:linear-gradient(120deg,#0A0F12,#171F26);
  padding-block:52px;
  color:var(--white);
}
.page-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#B9BEC2;
}
.page-hero-eyebrow a{ color:#B9BEC2; }
.page-hero-eyebrow a:hover{ color:var(--gold-light); }
.page-hero-eyebrow svg{ width:12px;height:12px; }
.page-hero h1{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(30px,4vw,42px);
  margin-top:12px;
  letter-spacing:-.5px;
  color:var(--gold-light);
}
.page-hero p{
  color:#C7CBCE;
  font-size:15px;
  margin-top:10px;
  max-width:640px;
  line-height:1.6;
}

.content-section{ padding-block:60px; }
.content-narrow{ max-width:780px; margin-inline:auto; }

.prose{ font-size:16px; line-height:1.75; color:#33383B; }
.prose h2{
  font-family:var(--font-title);
  font-weight:700;
  font-size:24px;
  color:var(--black);
  margin-top:38px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--border-gray);
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-family:var(--font-title);
  font-weight:700;
  font-size:19px;
  color:var(--black);
  margin-top:26px;
  margin-bottom:10px;
}
.prose p{ margin-bottom:14px; }
.prose ul{ margin:0 0 16px; padding-left:0; }
.prose li{
  position:relative;
  list-style:none;
  padding-left:26px;
  margin-bottom:10px;
}
.prose li::before{
  content:"";
  position:absolute;
  left:0;top:9px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--gold);
}
.prose strong{ color:var(--black); }
.prose a{ color:var(--gold-dark); text-decoration:underline; text-underline-offset:2px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:50px;
  align-items:start;
}
.contact-info{
  background:var(--bg-light);
  border:1px solid var(--border-gray);
  border-radius:12px;
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.contact-info-item{ display:flex; align-items:flex-start; gap:14px; }
.contact-info-icon{
  width:42px;height:42px;flex:none;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--border-gray);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.contact-info-icon svg{ width:19px;height:19px; }
.contact-info-icon i{ font-size:16px; }
.contact-info-item h4{ font-size:13px;font-weight:700;color:var(--black);margin-bottom:3px; }
.contact-info-item span,.contact-info-item a{ font-size:14px;color:#3E4347; }
.contact-info-item a:hover{ color:var(--gold-dark); }
.contact-form{
  background:var(--white);
  border:1px solid var(--border-gray);
  border-radius:12px;
  padding:34px;
  box-shadow:0 3px 13px rgba(27,31,34,.05);
}

/* ==========================================================================
   EMPLOI
   ========================================================================== */
.jobs-list{ display:flex; flex-direction:column; gap:16px; }
.job-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--white);
  border:1px solid #E2E4E6;
  border-radius:10px;
  padding:22px 26px;
  box-shadow:0 3px 13px rgba(27,31,34,.05);
  transition:box-shadow .15s ease,border-color .15s ease;
}
.job-card:hover{ border-color:var(--gold); box-shadow:0 6px 20px rgba(27,31,34,.1); }
.job-card-main h3{ font-family:var(--font-title);font-weight:700;font-size:19px;color:var(--black); }
.job-card-meta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.job-card-meta span{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-gray); }
.job-card-meta svg{ width:14px;height:14px;color:var(--gold); }
.job-card-cta{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px;font-weight:600;color:var(--gold-dark);
  white-space:nowrap;
}
.job-card-cta svg{ width:14px;height:14px; }

.job-detail-meta{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:30px;
}
.job-detail-meta span{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bg-light);
  border:1px solid var(--border-gray);
  border-radius:20px;
  padding:8px 14px;
  font-size:13px;font-weight:500;color:#2A2E31;
}
.job-detail-meta svg{ width:14px;height:14px;color:var(--gold); }

/* ==========================================================================
   FAQ (accordéon natif <details>)
   ========================================================================== */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border:1px solid var(--border-gray);
  border-radius:10px;
  background:var(--white);
  overflow:hidden;
}
.faq-item[open]{ border-color:#D8C08A; }
.faq-item summary{
  cursor:pointer;
  padding:18px 50px 18px 22px;
  font-family:var(--font-text);
  font-weight:600;
  font-size:15.5px;
  color:var(--black);
  list-style:none;
  position:relative;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"";
  position:absolute;
  right:22px;top:50%;
  width:11px;height:11px;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-answer{
  padding:0 22px 20px;
  font-size:14.5px;
  color:#44494C;
  line-height:1.7;
}

.empty-state{
  text-align:center;
  padding:60px 20px;
  border:1px dashed var(--border-gray);
  border-radius:12px;
  background:var(--bg-light);
}
.empty-state svg{ width:44px;height:44px;color:var(--gold);margin-bottom:16px; }
.empty-state h3{ font-family:var(--font-title);font-weight:700;font-size:20px;margin-bottom:8px; }
.empty-state p{ color:var(--text-gray);font-size:14px;max-width:420px;margin-inline:auto; }

/* ==========================================================================
   BOUTON WHATSAPP FLOTTANT
   ========================================================================== */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:58px;height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  z-index:150;
  transition:transform .15s ease,box-shadow .15s ease;
}
.whatsapp-float:hover{ transform:scale(1.07); box-shadow:0 8px 22px rgba(0,0,0,.35); }
.whatsapp-float i{ color:var(--white); font-size:30px; line-height:1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1199px){
  .navbar .container{ min-height:96px; }
  .navbar-logo{ width:230px;height:66px; }
  .nav-links{ gap:24px; }
  .nav-links a{ font-size:14px; }
  .hero-title{ letter-spacing:-1px; }
  .action-card{ padding:28px 24px 32px; }
  .why-left h2{ font-size:29px; }
}

@media (max-width:1023px){
  .hero-grid{ grid-template-columns:1fr; min-height:auto; }
  .hero-left{ max-width:none; padding-inline-end:var(--gutter); padding-block:44px 36px; }
  .hero-right{ min-height:340px; order:-1; }
  .hero-title{ max-width:none; }
  .hero-text{ max-width:none; }
  .action-card{ margin-top:-40px; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .destinations{ grid-template-columns:1fr; }
  .destinations-text p{ max-width:none; }
  .why-item span{ font-size:14px; }
}

@media (max-width:991px){
  .navbar .container{ min-height:80px; }
  .navbar-logo{ width:190px;height:56px; }
  .nav-links,.navbar-cta{ display:none; }
  .navbar-burger{ display:flex; margin-left:auto; }
  .lang-select{ margin-left:0; }

  .topbar .container{ flex-wrap:wrap; height:auto; padding-block:8px; gap:6px; row-gap:2px; }
  .topbar-item{ font-size:12px; }
  .topbar-item.right{ margin-left:0; }

  .hero-left{ text-align:center; align-items:center; }
  .badge-pill,.hero-title,.hero-text{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-actions .btn{ flex:1 1 220px; }
  .hero-trust{ justify-content:center; }

  .action-card-grid{ grid-template-columns:1fr; gap:30px; }
  .action-col{ border-left:none !important; }
  .action-col::before{ display:none; }

  .steps{ grid-template-columns:1fr; }
  .step-arrow{ transform:rotate(90deg); margin:6px 0; }

  .why-content{ grid-template-columns:1fr; text-align:center; }
  .why-left{ max-width:none; margin-inline:auto; }
  .why-list{ max-width:420px;margin-inline:auto; }
  .why-item{ text-align:left; }
  .why-right{ justify-content:center; margin-top:24px; }
  .why-bg{ grid-template-columns:1fr; }
  .why-bg-media{ display:none; }
  .why-content{ min-height:auto; padding-block:40px; }

  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px 20px; }
  .footer-col:nth-child(3)::before{ display:none; }
  .footer-col:nth-child(odd){ padding-left:0; }
}

@media (max-width:767px){
  .section{ padding-block:48px; }
  .section-title{ font-size:28px; }
  .services-grid{ grid-template-columns:1fr; }
  .action-card-title{ font-size:26px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-col::before{ display:none !important; }
  .footer-col{ padding:0; text-align:center; }
  .footer-logo{ margin-inline:auto; }
  .footer-contact-item{ justify-content:center; }
  .cta-band h2{ font-size:21px; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form{ padding:24px; }
}

@media (max-width:640px){
  .action-card{ border-radius:10px; }
  .tracking-field{ flex-direction:column; }
  .tracking-field .btn-dark{ width:100%; }
}

@media (max-width:479px){
  :root{ --gutter:20px; }
  .hero-title{ font-size:clamp(38px,11vw,48px); }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100% !important; }
  .service-card-media{ border-radius:8px 8px 0 0; }
  .service-card,.service-card-media{ border-radius:8px; }
  .btn,.tracking-field input,.tracking-field .btn-dark{ min-height:44px; }
  .navbar-cta,.hero-actions .btn,.cta-band .btn{ min-height:44px; }
  .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .whatsapp-float i{ font-size:26px; }
}