/* ============================================================
   Bana — surcouche de la rubrique informative (/bana).
   S'ajoute par-dessus site.css. Palette : vert nuit #173404
   (accents/structure) + orange #D85A30 (actions). Aucune couleur
   en dur dans les gabarits — tout passe par ces jetons.
   ============================================================ */
/* Couleurs de marque Bana (charte officielle) :
   vert trajet #1D9E75 · orange arrivée #D85A30 · jaune soleil #FAC775 · vert nuit #173404 */
body.bana{
  --blue:#1D9E75; --blue-600:#178A64; --blue-050:#E4F5EE;
  --orange:#D85A30; --orange-2:#E67A50;
  --bana-night:#173404; --bana-sun:#FAC775;
}
/* En thème sombre, l'accent vert doit rester lisible sur fond sombre. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.bana{
    --blue:#3FC896; --blue-600:#2FB585; --blue-050:#12291F;
    --orange:#E67A50; --orange-2:#F0916B;
  }
}
:root[data-theme="dark"] body.bana{
  --blue:#3FC896; --blue-600:#2FB585; --blue-050:#12291F;
  --orange:#E67A50; --orange-2:#F0916B;
}

/* ---- Logo Bana dans la nav (bascule clair/sombre) ---- */
.bana-logo{height:34px;width:auto;display:block}
.bana-logo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bana-logo-light{display:none}
  :root:not([data-theme="light"]) .bana-logo-dark{display:block}
}
:root[data-theme="dark"] .bana-logo-light{display:none}
:root[data-theme="dark"] .bana-logo-dark{display:block}

/* ---- Bandeau d'identité « Bana, un service de Le Coursier » ---- */
.bana-id{
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;
  text-align:center;padding:7px 16px;letter-spacing:.01em;
}
.bana-id a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ---- Marque Bana dans la nav (nom + mention de rattachement) ---- */
.brand.bana-brand{flex-direction:column;align-items:flex-start;gap:0;line-height:1.05}
.brand.bana-brand .bn{font-family:"Sora",sans-serif;font-weight:800;font-size:20px;color:var(--ink)}
.brand.bana-brand .bs{font-size:11px;font-weight:600;color:var(--muted)}

/* ---- Barre d'action persistante (mobile surtout) ---- */
.bana-cta-bar{
  position:sticky;bottom:0;z-index:55;display:none;gap:8px;
  padding:10px 16px;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(10,37,81,.5);
}
.bana-cta-bar .btn{flex:1;justify-content:center}
@media (max-width:720px){ .bana-cta-bar{display:flex} }

/* ---- Blocs de contenu informatif ---- */
.bana-section{padding:40px 0}
.bana-lead{max-width:760px;color:var(--body);font-size:18px;margin:0 0 8px}
.bana-reassure{
  display:inline-block;margin-top:6px;padding:8px 14px;border-radius:999px;
  background:var(--blue-050);color:var(--blue);font-weight:700;font-size:14px;
}
.bana-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.bana-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px}
.bana-card h3{font-size:17px;margin-bottom:6px}
.bana-card p{color:var(--body);font-size:15px}
.bana-note{
  border-left:4px solid var(--orange);background:var(--surface-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:16px 18px;margin:18px 0;
}
.bana-note b{color:var(--ink)}
.bana-steps{counter-reset:s;display:grid;gap:14px;margin:18px 0}
.bana-step{position:relative;padding-left:52px}
.bana-step::before{
  counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-family:"Sora",sans-serif;font-weight:800;
}
.bana-step h3{font-size:16px;margin-bottom:2px}
.bana-step p{color:var(--body);font-size:15px}
.bana-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.bana-ul{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.bana-ul li{position:relative;padding-left:26px;color:var(--body)}
.bana-ul li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.bana-faq{max-width:820px}

/* ---- Hero vert de la rubrique Bana (le site Le Coursier reste bleu) ---- */
body.bana .phero{
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(216,90,48,.30), transparent 62%),
    linear-gradient(158deg, #1D9E75, #17835F);
}
body.bana .phero .eyebrow{color:var(--orange)}
body.bana .phero .bana-lead{color:rgba(240,246,238,.92)}
body.bana .phero .bana-reassure{background:rgba(255,255,255,.14);color:#fff}
body.bana .phero .btn-outline{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
body.bana .phero .more{color:#fff}

/* ============================================================
   Refonte de la rubrique Bana — le symbole de marque « deux
   points reliés par un trajet » devient le langage visuel de la
   page, au lieu de rester cantonné au logo.
   ============================================================ */

/* Le fil d'Ariane est posé au-dessus du contenu, sur le fond clair de la
   page. Il héritait de la couleur claire de site.css — pensée pour un fil
   placé DANS le héros sombre — et restait donc invisible, en laissant une
   bande vide de 56 px sous la navigation. */
body.bana .crumb{color:var(--body)}
body.bana .crumb a{color:var(--blue);font-weight:700}
body.bana .crumb a:hover{text-decoration:underline}

/* ---- Héros sur deux colonnes ---- */
body.bana .phero .wrap{padding:52px 24px 56px}
.bhero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
@media (max-width:900px){.bhero{grid-template-columns:1fr;gap:32px}}
.bhero-copy h1{margin-bottom:14px}
.bhero-price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 4px;
  color:#fff;font-family:"Sora","Manrope",sans-serif
}
.bhero-price .bp-num{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bhero-price .bp-k{font-size:14px;font-weight:700;opacity:.82;letter-spacing:.02em}
.bhero-note{color:rgba(240,246,238,.82);font-size:14.5px;margin:0}

/* ---- Carte « trajet » : la signature de marque, en grand ---- */
.trip{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:26px 24px;backdrop-filter:blur(6px)
}
.trip-k{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:16px
}
.trip-svg{width:100%;height:auto;display:block;margin-bottom:6px}
.trip-svg .t-dot-a{fill:#fff}
.trip-svg .t-dot-b{fill:var(--bana-sun,#FAC775)}
.trip-svg .t-trail{stroke:var(--bana-sun,#FAC775);stroke-width:4;stroke-linecap:round;fill:none;opacity:.9}
.trip-ends{display:flex;justify-content:space-between;gap:12px;color:#fff}
.trip-ends .te-k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.trip-ends .te-v{font-size:16px;font-weight:700}
.trip-ends .te-b{text-align:right}
.trip-foot{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.86);font-size:13.5px;font-weight:600
}
.trip-foot span{display:inline-flex;align-items:center;gap:7px}
.trip-foot svg{width:15px;height:15px;flex:0 0 auto;opacity:.9}

/* ---- Sections sur deux colonnes : plus de moitié droite vide ---- */
.bsplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
@media (max-width:900px){.bsplit{grid-template-columns:1fr;gap:26px}}
.bsplit .title{font-size:24px;margin-bottom:8px}

/* ---- Liste d'itinéraires : chaque ligne rejoue le symbole ---- */
.routes{display:grid;gap:10px}
.route{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 18px
}
.route-city{font-weight:700;color:var(--ink);font-size:15.5px}
.route-city.to{text-align:right}
.route-link{
  display:flex;align-items:center;gap:8px;width:88px
}
.route-link .rl-a{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.route-link .rl-b{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:0 0 auto}
.route-link .rl-line{
  flex:1;height:2px;border-radius:2px;
  background-image:linear-gradient(90deg,var(--orange) 55%,transparent 0);
  background-size:7px 2px;background-repeat:repeat-x
}
@media (max-width:520px){.route{grid-template-columns:1fr;gap:8px;text-align:left}
  .route-city.to{text-align:left}.route-link{width:100%}}

/* ---- Cartes de service avec pictogramme ---- */
.bana-card .bc-ic{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-050);color:var(--blue);margin-bottom:12px
}
.bana-card .bc-ic svg{width:20px;height:20px}

/* ---- Contraintes du colis : des chiffres, pas un paragraphe ---- */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.spec{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px;text-align:center
}
.spec .sp-v{
  font-family:"Sora","Manrope",sans-serif;font-size:28px;font-weight:800;
  letter-spacing:-.03em;color:var(--blue);line-height:1
}
.spec .sp-u{font-size:13px;font-weight:700;color:var(--blue);opacity:.8}
.spec .sp-k{margin-top:7px;font-size:13px;color:var(--body);line-height:1.45}
.notice{
  display:flex;gap:12px;align-items:flex-start;margin-top:16px;
  background:color-mix(in srgb,var(--orange) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--orange) 28%,transparent);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:14.5px;color:var(--body)
}
.notice svg{width:18px;height:18px;flex:0 0 auto;color:var(--orange);margin-top:2px}