/* KB2A EXPRESS V21.11.8 — design de la page d'accueil appliqué à toutes les rubriques.
   Chargé en dernier sur chaque page interne. Les valeurs reprennent celles de index.html. */

:root{--h-navy:#031a34;--h-navy2:#061f3f;--h-blue:#1198ff;--h-soft:#f3f7fc;--h-line:#dbe5f0;--h-muted:#64758a;
  --h-grad:linear-gradient(90deg,#0879ea,#16a0ff);--h-ink:#071c36}

body{font-family:Inter,Arial,sans-serif!important;color:var(--h-ink)!important;background:#061d39!important}
main,.main{background:#061d39}

/* La barre d'infos du haut n'existe pas sur l'accueil */
.topbar{display:none!important}

/* ---------- HERO : même fond, même gabarit que l'accueil ---------- */
.page-hero,.kb-header~main .page-hero{
  min-height:560px!important;display:flex!important;align-items:center!important;
  color:#fff!important;padding:62px 0!important;margin:0!important;
  background:linear-gradient(90deg,rgba(2,18,39,.96) 0%,rgba(3,25,52,.79) 47%,rgba(3,25,52,.20) 100%),
    url('transport-vehicule-kb2a.jpg') center/cover no-repeat!important}
.page-hero:before,.page-hero:after{display:none!important;content:none!important}
.page-hero>.container{width:min(1180px,calc(100% - 36px))!important;max-width:1180px!important;margin:auto!important}
.page-hero .kicker{font-size:12px!important;letter-spacing:.16em!important;font-weight:850!important;color:#d4e4f6!important;text-transform:uppercase}
.page-hero h1{font-size:clamp(40px,5.2vw,66px)!important;line-height:.98!important;letter-spacing:-.045em!important;
  margin:17px 0 22px!important;max-width:760px!important;text-shadow:none!important;color:#fff!important}
.page-hero p{font-size:18px!important;line-height:1.55!important;color:#d9e5f2!important;max-width:610px!important}

/* Boutons du hero = boutons de l'accueil */
.page-hero .hero-actions{display:flex!important;gap:11px!important;flex-wrap:wrap!important;margin-top:26px!important}
.page-hero .btn{padding:15px 20px!important;border-radius:11px!important;font-weight:900!important;font-size:13px!important;
  background:var(--h-grad)!important;border:0!important;color:#fff!important;box-shadow:none!important}
.page-hero .btn.wa{background:rgba(2,18,39,.46)!important;border:1px solid rgba(255,255,255,.38)!important}
.page-hero .btn.outline{background:rgba(2,18,39,.46)!important;border:1px solid rgba(255,255,255,.38)!important}
.page-hero .seo-hero-note{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.page-hero .seo-hero-note span{border:1px solid rgba(255,255,255,.24)!important;background:rgba(2,18,39,.38)!important;
  padding:10px 14px!important;border-radius:9px!important;font-size:12px!important;font-weight:800!important;color:#fff!important;backdrop-filter:none!important}

/* ---------- SECTIONS ---------- */
.section{padding:62px 0!important;background:#061d39!important;color:#eaf3ff!important}
.section.soft{background:#0b294b!important}
.section.dark{background:linear-gradient(180deg,#082443,#031a34)!important;color:#fff}
.container{width:min(1180px,calc(100% - 36px))!important}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px!important}
.section-head h2,.content-grid h2{font-size:clamp(28px,3vw,35px)!important;letter-spacing:-.03em!important;margin:0!important;line-height:1.1}
.section-head p{color:var(--h-muted)!important;font-size:14px!important;line-height:1.6!important;max-width:520px;margin:0}
.kicker{color:#0879ea!important;font-size:11px!important;letter-spacing:.16em!important;font-weight:850!important}
.content-grid p,.content-grid li{color:var(--h-muted);line-height:1.6}
.content-grid img{border-radius:18px!important;box-shadow:none!important;object-fit:cover}
.list div,.checks div{font-size:13px;font-weight:800}

/* ---------- CARTES ---------- */
.card,.seo-benefit,.seo-step,.case,.sector,.form-card,.related-links a,.seo-faq details{
  background:#102f52!important;color:#eef6ff!important;border:1px solid #315476!important;border-radius:17px!important;
  box-shadow:none!important;padding:25px!important}
.card:hover,.sector:hover,.case:hover,.related-links a:hover{transform:none!important;border-color:#0b91fa!important;box-shadow:none!important}
.case{padding:0!important;overflow:hidden}.case img{border-radius:0!important}.case-body{padding:20px}
.card h3,.seo-benefit h3,.seo-step h3{font-size:19px!important;color:#f5f9ff!important}
.card p,.seo-benefit p,.seo-step p,.case p{font-size:13px!important;line-height:1.6!important;color:#c4d4e5!important}
.num{border-radius:10px!important;background:var(--h-grad)!important;width:38px!important;height:38px!important}
.seo-faq details{padding:18px 22px!important}

/* ---------- BANDEAU D'APPEL (comme le bloc "Vous êtes transporteur ?") ---------- */
.cta{background:linear-gradient(90deg,rgba(8,55,102,.92),rgba(3,25,52,.80)),url('transport-vehicule-kb2a.jpg') center/cover!important;
  border:1px solid rgba(255,255,255,.16)!important;border-radius:17px!important;padding:26px!important;box-shadow:none!important;color:#fff}
.cta h3{font-size:25px!important;margin:0 0 5px!important}
.cta p{font-size:13px!important;color:#c6d6e7!important;margin:0!important}
.cta .btn,.cta a.btn{background:var(--h-grad)!important;border:0!important;border-radius:10px!important;padding:14px 20px!important;font-size:13px!important}
.cta .btn.wa,.cta .btn.outline{background:rgba(2,18,39,.46)!important;border:1px solid rgba(255,255,255,.38)!important}

/* ---------- BANDE DE CHIFFRES ---------- */
.stats{background:var(--h-navy2)!important;border:0!important;border-radius:0!important;color:#fff}
.stat{background:transparent!important;text-align:center;padding:25px 10px!important}
.stat strong{font-size:23px;color:#fff}.stat span{font-size:10px!important;color:#b9c9d9}
.quick-grid{border-radius:17px!important;box-shadow:none!important;border:1px solid #315476!important}

/* ---------- FORMULAIRES ---------- */
.form-card input,.form-card select,.form-card textarea{border-radius:10px!important;border:1px solid #315476!important}
.form-card .btn,.form-card button[type=submit]{background:var(--h-grad)!important;border:0!important;border-radius:11px!important;font-weight:900!important}

/* ---------- PIED DE PAGE : même fond que l'accueil ---------- */
.footer{background:#021327!important;color:#b8c8d9!important;padding:38px 0 26px!important;border-top:0!important}
.footer h4{color:#fff!important;font-size:13px}.footer a{color:#b8c8d9!important}.footer a:hover{color:#4db4ff!important}
.footer p{font-size:11px;line-height:1.6}.footer img{height:50px;width:auto}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)!important;color:#8fa4ba!important;font-size:10px}
.footer .version{font-size:10px}

/* ---------- BARRE MOBILE & WHATSAPP : couleurs de l'accueil ---------- */
.mobile-bar{background:var(--h-navy)!important;border-top:1px solid rgba(255,255,255,.14)!important}
.mobile-bar a{color:#fff!important;font-weight:800!important}
.mobile-bar a:last-child{background:var(--h-grad)!important}

/* ---------- PAGES LÉGALES (CGU, confidentialité, GPS) ---------- */
main.wrap{width:min(900px,calc(100% - 36px))!important;padding:46px 0 64px!important}
main.wrap>.card{padding:32px!important;border-radius:17px!important}
main.wrap h1{line-height:1.15!important;font-size:clamp(28px,4vw,35px)!important;letter-spacing:-.03em;color:#f5f9ff;margin:0 0 14px}
main.wrap h2{line-height:1.25!important;font-size:20px!important;color:#f5f9ff}
main.wrap p,main.wrap li{font-size:14px;line-height:1.7;color:#c4d4e5}
body:has(main.wrap){background:#061d39!important}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .page-hero,.kb-header~main .page-hero{min-height:560px!important;background-position:62% center!important;padding:55px 0!important}
  .page-hero h1{font-size:43px!important}.page-hero p{font-size:15px!important}
  .section-head{display:block!important}.section-head h2{margin-bottom:10px!important}
}
@media(max-width:600px){
  .page-hero .hero-actions .btn{width:100%!important;text-align:center}
  .section{padding:45px 0!important}
  .cta{padding:20px!important}.cta h3{font-size:24px!important}
  .main.wrap>.card,main.wrap>.card{padding:22px!important}
}

/* V21.11.9 : palette uniforme sur toutes les rubriques publiques.
   Les éléments de saisie restent clairs pour l'accessibilité. */
html{background:#061d39}
body{background:#061d39!important;color:#eaf3ff!important}
main,.main,.section,.section:not(.dark):not(.soft){background:#061d39!important;color:#eaf3ff!important}
.section.soft,.seo-section,.seo-section.alt,.content-section{background:#0b294b!important;color:#eaf3ff!important}
.section h1,.section h2,.section h3,.section h4,.section-head h2,.content-grid h2,
main.wrap h1,main.wrap h2,.seo-section h2,.seo-section h3{color:#f5f9ff!important}
.section p,.section li,.section-head p,.content-grid p,.content-grid li,
main.wrap p,main.wrap li,.seo-section p,.seo-section li{color:#c4d4e5!important}
.card,.seo-benefit,.seo-step,.case,.sector,.form-card,.related-links a,.seo-faq details,
main.wrap>.card,.quick-grid{background:#102f52!important;color:#eef6ff!important;border-color:#315476!important}
.card h1,.card h2,.card h3,.card h4,.seo-benefit h3,.seo-step h3,.case h3,.sector h3,
.form-card h2,.form-card h3,.seo-faq summary{color:#fff!important}
.card p,.seo-benefit p,.seo-step p,.case p,.sector p,.form-card p,
.related-links a,.seo-faq details p{color:#c4d4e5!important}
.num{color:#fff!important}
.form-card input,.form-card textarea,.form-card select,form input,form textarea,form select{
  background:#f6f9ff!important;color:#071c36!important;border-color:#9fb5cd!important}
.form-card input::placeholder,form input::placeholder,form textarea::placeholder{color:#56697e!important}
.form-card label,form label{color:#eaf3ff!important}
.page-hero,.page-hero h1,.page-hero p{color:#fff!important}
.mobile-bar{z-index:500!important}
@media(max-width:600px){
  .card,.seo-benefit,.seo-step,.case,.sector,.form-card{max-width:100%;min-width:0}
  .section-head h2{overflow-wrap:anywhere}
}