/* ========== Design Système — LE Transporteurs ========== */
:root{
  --orange:#ff9900;
  --orange-2:#ff7a00;
  --red:#ff3300;
  --black:#0d0d0d;
  --text:#1b1b1b;
  --muted:hwb(220 32% 57%);
  --bg:#ffffff;
  --bg-alt:#f6f6f7;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Containers */
.container{width:min(1100px, 92%); margin-inline:auto}

/* Typography */
h1,h2,h3{font-family:'Montserrat', sans-serif; line-height:1.2; margin:0 0 .5rem}
h1{font-size:clamp(2rem,3.5vw,3rem); font-weight:800}
h2{font-size:clamp(1.6rem,2.4vw,2.1rem); font-weight:800}
h3{font-size:clamp(1.15rem,1.6vw,1.25rem); font-weight:700}
.lead{font-size:clamp(1.05rem,1.2vw,1.15rem); color:#ffffff}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--orange-2); font-weight:700; font-size:.85rem}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--black)}
.brand__logo{width:46px; height:46px; object-fit:contain}
.brand__name{font-weight:800; letter-spacing:.02em}

.nav{display:flex}
.nav__list{display:flex; gap:1rem; list-style:none; margin:0; padding:0; align-items:center}
.nav__list a{display:inline-block; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--black); font-weight:600}
.nav__list a:hover{background:#0000000e}
.nav__cta{margin-left:.25rem}

/* Mobile nav */
.nav-toggle{display:none; background:transparent; border:0; padding:8px; cursor:pointer}
.nav-toggle__bar{display:block; width:24px; height:2px; background:var(--black); margin:5px 0; border-radius:2px}
@media (max-width:880px){
  .nav{position:fixed; inset:60px 0 auto 0; background:rgba(255,255,255,.98); transform:translateY(-120%); transition:transform .3s ease; border-bottom:1px solid #00000010}
  .nav--open{transform:translateY(0)}
  .nav__list{flex-direction:column; padding:18px 0}
  .nav-toggle{display:block}
}

/* Buttons */
.btn{--btn-bg:var(--orange-2); --btn-color:#fff; --btn-shadow:0 8px 20px rgba(255,122,0,.28);
  display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700;
  background:var(--btn-bg); color:var(--btn-color); box-shadow:var(--btn-shadow); transition:.2s transform, .2s opacity, .2s box-shadow; border:2px solid transparent}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,122,0,.35)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:linear-gradient(135deg,var(--orange),var(--red))}
.btn--ghost{--btn-bg:#ffffff; --btn-color:var(--black); border-color:#00000020; box-shadow:0 8px 20px rgba(0,0,0,.08)}
.btn--outline{--btn-bg:transparent; --btn-color:var(--black); border-color:#00000020; box-shadow:none}
.btn--dark{--btn-bg:#111; --btn-color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.btn--light{--btn-bg:#fff; --btn-color:#111}
.btn--sm{padding:8px 14px; font-size:.9rem}
.btn--lg{padding:14px 24px; font-size:1.05rem}

/* Hero */
.hero{position:relative; min-height:88vh; display:grid; align-items:center}
.hero__bg{position:absolute; inset:0; background:url('camion2.jpg') center/cover no-repeat; filter:contrast(1.05) saturate(1.02)}
.hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25) 40%, rgba(255,255,255,.0) 100%), linear-gradient(120deg, rgba(255,153,0,.28), rgba(255,51,0,.22))}
.hero__content{position:relative; color:#fff; text-align:center; padding:88px 0}
.hero__actions{margin-top:1rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.trust-badges{display:flex; gap:1rem; list-style:none; padding:0; margin:18px 0 0; justify-content:center; opacity:.95}
.gradient-text{background:linear-gradient(135deg,var(--orange),var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Sections */
.section{padding:72px 0}
.section--alt{background:var(--bg-alt)}
.section__header{margin-bottom:26px; text-align:center}
.small{font-size:.9rem}
.muted{color:var(--muted)}

/* Grids & cards */
.grid{display:grid; gap:18px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:990px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cards-4,.cards-3{grid-template-columns:1fr}}

.card, .badge, .review, .contact__card{
  background:#fff; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover, .badge:hover, .review:hover, .contact__card:hover{ transform:translateY(-6px); box-shadow:0 14px 38px rgba(0,0,0,.16) }
.card__icon{font-size:30px; line-height:1; margin-bottom:6px}

/* Gallery */
.section--gallery{padding-top:0}
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.gallery__item{overflow:hidden; border-radius:20px; box-shadow:var(--shadow)}
.gallery img{width:100%; display:block; transition:transform .5s ease}
.gallery img:hover{transform:scale(1.05)}
@media (max-width:700px){.gallery{grid-template-columns:1fr}}

/* Reviews */
.review__text{font-size:1.05rem}
.review .stars{color:#ffb400; margin-right:.5rem}
.review .author{color:#222; font-weight:700}

/* CTA */
.cta{
  background:linear-gradient(135deg,var(--orange),var(--red));
  color:#fff;
}
.cta__inner{display:grid; gap:.6rem; text-align:center; padding:52px 0}
.cta__actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* Contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.contact__list{list-style:none; padding:0; margin:0}
.contact__list a{color:var(--black); text-decoration:none}
.contact__list a:hover{text-decoration:underline}
@media (max-width:780px){.contact{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:#111; color:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:10px; flex-wrap:wrap}
.site-footer a{color:#fff; opacity:.9; text-decoration:none; margin-right:12px}
.site-footer a:hover{opacity:1}

/* Forms */
.form{background:#fff; border-radius:22px; padding:24px; box-shadow:var(--shadow)}
.form__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.form__field--full{grid-column:1/-1}
label{font-weight:700; display:block; margin:2px 0 6px}
input,select,textarea{width:100%; padding:12px 14px; border:2px solid #e5e7eb; border-radius:14px; font:inherit; outline:none; background:#fff; transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--orange-2); box-shadow:0 0 0 4px #ff7a0022}
.form__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.toast{margin-top:12px; padding:12px 14px; background:#ecfdf5; border:2px solid #10b981; color:#065f46; border-radius:12px}
@media (max-width:720px){.form__grid{grid-template-columns:1fr}}

/* Visually hidden */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0}