/* ============================================================
   THÈME « APPLICATION » POUR TOUT LE SITE TONCOLIS
   Fond sombre et fumée colorée, titres en italique,
   cartes blanches arrondies sur fond gris clair.
   Ce fichier est chargé en dernier : il prime sur le reste.
   ============================================================ */
:root{
  --mono:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Inter Tight','Inter',system-ui,sans-serif;
  --fond-app:#EEF1F5;
  --ombre-app:0 10px 30px rgba(7,27,61,.08);
  --fumee:
    radial-gradient(60% 55% at 0% 0%, rgba(111,130,168,.45), transparent 70%),
    radial-gradient(45% 60% at 100% 25%, rgba(47,99,184,.55), transparent 70%),
    radial-gradient(55% 60% at 5% 100%, rgba(224,48,76,.6), transparent 70%),
    radial-gradient(60% 55% at 100% 105%, rgba(242,193,78,.5), transparent 70%),
    #071B3D;
}

/* ---------- Ton général ---------- */
html body{background:var(--fond-app)}
body *{letter-spacing:normal !important}
body :not(.codes):not(.aero b):not(.logo-carre b){text-transform:none !important}
.etiquette,.eyebrow,.b-eyebrow{display:none !important}

/* ---------- Titres en italique ---------- */
h1,h2.grand,h2.titre,.chapeau h1,.introuvable h2,.reste h2,main section h2,
.banniere h3,.avis-texte,.encart-non h3,.etape h3,.ville-texte h3{
  font-family:var(--serif) !important;font-style:normal;font-weight:800 !important;letter-spacing:-0.03em !important;
}
h2.grand{font-size:clamp(1.9rem,5.4vw,2.7rem) !important;line-height:1.12 !important}
.titre-bloc{text-align:left}

/* ---------- En-tête sombre ---------- */
body > header{
  background:#071B3D !important;border-bottom:0 !important;
  backdrop-filter:none !important;
}
body > header .logo img{filter:brightness(0) invert(1)}
body > header nav a{color:rgba(255,255,255,.72) !important;font-size:.9rem !important}
body > header nav a:hover{color:#fff !important;border-bottom-color:#F2C14E !important}
body > header .burger span{background:#fff !important}
body > header .retour{
  color:#fff !important;background:rgba(255,255,255,.12);
  padding:9px 16px;border-radius:12px;
}
.bande-avion{display:none !important}

/* ---------- Bandeaux des pages (fumée) ---------- */
.chapeau{
  background:var(--fumee) !important;color:#fff !important;border:0 !important;
  padding:64px 0 70px !important;text-align:center;
}
.chapeau h1{color:#fff !important;font-size:clamp(2rem,7vw,3.2rem) !important;line-height:1.1 !important;text-wrap:balance}
.chapeau p{color:rgba(255,255,255,.78) !important;margin-left:auto !important;margin-right:auto !important}
.chapeau .grand-code{color:#F2C14E !important;font-family:var(--serif) !important;font-style:normal}

.reste,.zone-sombre{background:var(--fumee) !important;border-radius:22px !important}

/* ---------- Sections : fond gris clair, cartes blanches ---------- */
section,.tarifs,.etapes,.regles,.destinations,.carrousel-zone,.zone-devis,
.depot-zone,.confiance,.avis,.faq{
  background:var(--fond-app) !important;border-top:0 !important;border-bottom:0 !important;
}

.carte,.ville,details,.carte-depot,.etiquette-colis,.billet,.encart-transit,.encart-non,
.conf-cadre,.introuvable,.lien-404,.fiche,.resultat > *,
main.enveloppe > section,.suite.piste-g .etape{
  background:#fff !important;border:0 !important;border-radius:22px !important;
  box-shadow:var(--ombre-app) !important;overflow:hidden;
}
.carte:hover,.ville:hover{transform:none !important;box-shadow:0 14px 36px rgba(7,27,61,.12) !important}
.carte::before{height:5px !important}
details{margin-bottom:12px !important}
details summary{font-weight:700 !important;padding:20px 22px !important}
main.enveloppe > section{padding:24px 22px !important}
.encart-transit,.encart-non{border-left:0 !important;position:relative}
.encart-transit::before,.encart-non::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rouge)}
.encart-transit,.encart-non{padding-left:26px !important}

/* Étapes : une carte chacune */
.etape{background:#fff;border:0 !important;border-radius:22px;padding:24px 22px !important;box-shadow:var(--ombre-app)}
.suite{gap:14px !important}

/* Listes de la page transport */
.liste-ok,.liste-non{background:#fff;border-radius:22px;padding:6px 22px;box-shadow:var(--ombre-app);margin-bottom:22px}
.encart-non .liste-non{box-shadow:none;padding:0}

/* ---------- Champs et boutons ---------- */
.champ select,.champ input[type=text],.champ input[type=number],.recherche input{
  border-radius:14px !important;background:#fff !important;border:1px solid #DCE2EC !important;
}
.champ label.depot{border-radius:18px !important}
.btn-primaire,.bouton-envoi,.bouton-pdf,.b-action,.btn-carte,.recherche button,
.fermer-boite,.lien-404,.haut-page{border-radius:14px !important}
.btn-wa{border-radius:14px !important}
.recherche button,.btn-primaire,.fermer-boite{background:var(--marine) !important;color:#fff !important}
.lien-404.plein{background:var(--marine) !important;color:#fff !important}

/* Bordereau et billet : en-têtes à la fumée */
.etiquette-haut,.billet-haut,.carte-depot-haut{background:var(--fumee) !important}
.perfo,.perfo-billet{display:none !important}
.total{border-radius:0 0 22px 22px}

/* Bannières d'avis et carrousel : coins arrondis et fumée */
.avis-carrousel,.carrousel,.conf-fenetre{border-radius:22px !important}
.avis-banniere,.banniere:not(.or):not(.rouge){background:var(--fumee) !important}

/* Annonce */
.annonce{background:#0C2B5E !important}

/* ---------- Pied de page ---------- */
.haut-page{border-radius:0 !important;background:#0C2B5E !important}
footer{background:#071B3D !important}

/* ---------- Téléphone ---------- */
@media (max-width:900px){
  section{padding:48px 0 !important}
  .chapeau{padding:46px 0 54px !important}
  body > header .barre{height:64px !important}
  .enveloppe{padding-left:18px !important;padding-right:18px !important}
}
@media (prefers-reduced-motion:reduce){ body *{transition:none !important} }

/* Espacement sous les bandeaux */
main.enveloppe{padding-top:30px !important}

/* Suivi : carte de recherche blanche qui chevauche le bandeau */
.recherche{
  background:#fff;border-radius:22px;padding:12px;box-shadow:0 20px 44px rgba(7,27,61,.18);
  flex-direction:column;gap:10px !important;margin-top:-58px;position:relative;z-index:2;
}
.recherche input{border:0 !important;font-size:1.05rem !important;padding:14px 12px !important}
.recherche input:focus{outline:2px solid var(--marine-clair) !important}
.recherche button{width:100%;padding:16px !important;font-size:1.05rem !important}
.aide{text-align:center}