/* =========================================================================
   YadeBus — feuille de style des vues « application mobile »
   -------------------------------------------------------------------------
   Chargée uniquement par views/layouts/mobile.php, servie aux téléphones.
   Elle habille un balisage écrit POUR le téléphone (layouts/mobile.php et
   site/index-mobile.php) : pas de media query, pas de correctifs contre le
   gabarit large du thème. Les pages restées en balisage desktop sont, elles,
   rattrapées par css/mobile-skin.css.

   Design repris de https://yade-transit-go.base44.app/ (palette Tailwind).
   Tout est porté par des sélecteurs yb-*, sauf le strict minimum imposé par
   les widgets tiers (Select2, datepicker Krajee, modale Bootstrap).
   ========================================================================= */

/* ---------- Base --------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body.yb-app {
  margin: 0;
  background: var(--yb-bg);
  color: var(--yb-body, #667085);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

.yb-app h1, .yb-app h2, .yb-app h3, .yb-app h4 {
  color: var(--yb-ink, #101828); font-weight: 700; margin: 0 0 8px;
}
.yb-app p { margin: 0 0 8px; }
.yb-app a { color: var(--yb-blue, #0d65c9); text-decoration: none; }
.yb-app img { max-width: 100%; height: auto; }

/* Le contenu vit entre les deux barres fixes. */
.yb-main {
  padding-top: var(--yb-appbar-h);
  padding-bottom: calc(var(--yb-tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

/* Libellé réservé aux lecteurs d'écran : l'information visible est portée par
   le placeholder, comme dans la maquette. */
.yb-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Héros -------------------------------------------------------- */

.yb-hero { position: relative; }
/* Le visuel et son voile sont dans une couche dédiée : le texte reste du HTML,
   donc traduisible et lisible aux lecteurs d'écran. */
.yb-hero__media {
  position: absolute; inset: 0;
  background: url("../images/back3.jpg") center 45% / cover no-repeat;
}
/* Voile appuyé : la photo comporte des zones très claires (le bus, le ciel) sur
   lesquelles un texte blanc devenait illisible. */
.yb-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,24,39,.62) 0%, rgba(17,24,39,.42) 45%, rgba(17,24,39,.72) 100%);
}
.yb-hero__inner {
  position: relative;
  /* La carte de recherche remonte de 34px : on réserve la place en bas. */
  padding: 15px 16px 58px;
}
/* Préfixé .yb-app : sinon la règle de couleur des titres (.yb-app h1) l'emporte
   par spécificité et le titre repasse en gris foncé sur la photo. */
.yb-app .yb-hero__title { margin: 2px; line-height: 1.06; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.yb-hero__light  { display: block; font-size: 24px; font-weight: 600; }
.yb-hero__strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.5px; }
.yb-hero__rule {
  display: block; width: 56px; height: 4px; border-radius: 4px;
  background: var(--yb-amber, #f59e0b); margin: 12px 0 10px;
}
.yb-hero__sub { margin: 0; color: rgba(255,255,255,.93); font-size: 14px; }

/* ---------- Cartes et sections ------------------------------------------- */

.yb-card {
  background: #fff;
  border-radius: var(--yb-radius);
  box-shadow: var(--yb-shadow-lg);
  padding: 4px 14px 14px;
}
/* La carte de recherche chevauche la photo, comme dans la maquette. */
.yb-search { position: relative; margin: -34px 14px 0; }

.yb-section { padding: 18px 14px 0; }
.yb-section__title { font-size: 17px; margin-bottom: 10px; }
/* Titre de section avec son lien « Voir tout » aligné à droite. */
.yb-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.yb-section__head .yb-section__title { margin-bottom: 10px; }
.yb-section__head a { font-size: 13px; font-weight: 600; flex: 0 0 auto; }

/* ---------- Onglets Billets / Colis -------------------------------------- */

.yb-tabs {
  display: flex; list-style: none; margin: 0 -14px 12px; padding: 0 14px;
  border-bottom: 1px solid var(--yb-line, #e7eaf0);
}
.yb-tabs__item { flex: 1 1 0; }
.yb-tabs__link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 6px;
  color: var(--yb-ink, #101828) !important;
  font-size: 15px; font-weight: 600;
  border-bottom: 3px solid transparent;
}
.yb-tabs__link i { font-size: 20px; color: var(--yb-blue, #0d65c9); }
.yb-tabs__link.active { color: var(--yb-blue, #0d65c9) !important; border-bottom-color: var(--yb-blue, #0d65c9); }

/* ---------- Champs ------------------------------------------------------- */

.yb-form { margin: 0; }

.yb-field { position: relative; margin-bottom: 10px; }
/* Le pictogramme est posé par-dessus le champ ; la réserve de place est
   assurée par le padding-left des contrôles ci-dessous. */
.yb-field__ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  z-index: 2; pointer-events: none;
  font-size: 18px; color: var(--yb-muted, #98a2b3);
}
.yb-field__ico--from { color: var(--yb-blue, #0d65c9); }
.yb-field__ico--to   { color: var(--yb-amber, #f59e0b); }

.yb-input,
.yb-field input[type=text],
.yb-field input[type=tel],
.yb-field input[type=number] {
  width: 100%; min-height: 48px;
  background: var(--yb-field);
  border: 1px solid #eceef2; border-radius: var(--yb-radius-sm);
  padding: 12px 14px 12px 42px;
  font-size: 15px; color: var(--yb-ink, #101828);
  -webkit-appearance: none; appearance: none;
}
/* Dans la modale colis, les champs n'ont pas de pictogramme. */
.modal .yb-input { padding-left: 14px; }

/* Le widget Krajee rend le <select> avec un style en ligne « display:none » et
   compte sur Select2 pour le révéler après initialisation. Quand cette
   initialisation n'a pas lieu — c'est le cas du champ Destination sur Safari
   iOS —, le champ ne devient pas seulement invisible : il n'occupe plus aucune
   place, et il ne reste que son pictogramme.
   On force donc l'affichage du <select>. Quand Select2 fonctionne, il ajoute à
   ce même élément la classe .select2-hidden-accessible, qui le réduit à 1px en
   position absolue avec clip — le tout en !important. Cette règle est donc sans
   effet dans le cas nominal, et sauve le cas dégradé. */
.yb-app .yb-field select { display: block !important; }

/* Apparence de la liste native, tant que Select2 ne l'a pas remplacée. */
.yb-app .yb-field select:not(.select2-hidden-accessible) {
  width: 100%; min-height: 48px;
  background: var(--yb-field);
  border: 1px solid #eceef2; border-radius: var(--yb-radius-sm);
  padding: 12px 34px 12px 42px;
  font-size: 15px; color: var(--yb-ink, #101828);
  -webkit-appearance: none; appearance: none;
}
.yb-input:focus,
.yb-field input:focus {
  background: #fff; border-color: var(--yb-blue, #0d65c9);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14); outline: none;
}
.yb-app ::placeholder { color: var(--yb-muted, #98a2b3); }

/* Aller simple / Aller-retour : une ligne, deux choix. */
.yb-options { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 4px 0 12px; }
.yb-options label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14px; font-weight: 500; color: var(--yb-ink, #101828); white-space: nowrap;
}
.yb-options input[type=radio] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--yb-blue, #0d65c9);
}
.field-optionBillet { margin: 0; }
.field-optionBillet .help-block { display: none; }

/* ---------- Départ / Destination et bouton d'inversion -------------------- */

.yb-trip { position: relative; }
/* Le bouton chevauche la limite entre les deux champs, comme dans la maquette. */
.yb-swap {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--yb-blue, #0d65c9);
  border: 1px solid var(--yb-line, #e7eaf0);
  box-shadow: var(--yb-shadow);
  font-size: 16px;
}
.yb-swap:active { background: var(--yb-blue-50, #ebf2fa); }

/* ---------- Select2 : aligné sur l'apparence des champs ------------------ */

/* css/select2.min.css a été retouché à la main dans ce projet : il impose, en
   !important et sous @media (max-width: 760px/1200px), une bordure et un
   rembourrage sur le conteneur ainsi que padding-left:15px/25px sur le libellé.
   Les !important ci-dessous ne visent que ces déclarations-là — sans eux, le
   texte du champ passe sous le pictogramme. */
.yb-app .select2-container { width: 100% !important; display: block; }
.yb-app .select2-container--default {
  border: 0 !important; padding: 0 !important; background: transparent !important;
}
.yb-app .select2-container--default .select2-selection--single {
  height: 48px !important; box-sizing: border-box;
  background: var(--yb-field);
  border: 1px solid #eceef2; border-radius: var(--yb-radius-sm);
  display: flex; align-items: center; padding: 0; overflow: hidden;
}
.yb-app .select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto; line-height: 1.3; height: auto;
  padding-left: 42px !important;   /* réserve du pictogramme */
  padding-right: 34px !important;  /* réserve de la flèche */
  color: var(--yb-ink, #101828);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yb-app .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--yb-muted, #98a2b3);
}
.yb-app .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: 6px;
}
/* Le bouton d'inversion flotte au-dessus de la fin des deux champs de ville :
   on dégage la place à droite. Déclaré APRÈS la règle générique ci-dessus, qui
   porte la même spécificité — à !important égal, c'est la dernière qui gagne. */
.yb-app .yb-trip .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 56px !important;
}
.yb-app .yb-trip .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;   /* la flèche tomberait sous le bouton d'inversion */
}

/* Contenu du colis : liste à choix multiple. */
.yb-app .select2-container--default .select2-selection--multiple {
  min-height: 48px; background: var(--yb-field) !important;
  border: 1px solid #eceef2 !important; border-radius: var(--yb-radius-sm);
  padding-left: 34px;
}
/* Select2 pose margin-left:40px sur le champ de saisie d'une liste multiple :
   ajouté au rembourrage du conteneur, le libellé partait 30px trop à droite. */
.yb-app .select2-container--default .select2-selection--multiple .select2-search__field {
  margin-left: 8px;
}
.select2-dropdown { border-radius: var(--yb-radius-sm); border-color: var(--yb-line, #e7eaf0); }
.select2-container--open .select2-dropdown { z-index: 1060; }

/* ---------- Datepicker Krajee -------------------------------------------- */

.yb-field--date .krajee-datepicker,
.yb-field--date .input-group { width: 100%; }
.yb-field--date input.form-control {
  width: 100%; min-height: 48px;
  background: var(--yb-field);
  border: 1px solid #eceef2; border-radius: var(--yb-radius-sm) !important;
  padding: 12px 14px 12px 42px;
  font-size: 15px; color: var(--yb-ink, #101828);
  box-shadow: none;
}
.yb-field--date input.form-control:focus {
  background: #fff; border-color: var(--yb-blue, #0d65c9);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.datepicker { z-index: 1060 !important; }
.datepicker td.highlight { font-weight: 700; color: var(--yb-blue, #0d65c9); }

/* ---------- Boutons ------------------------------------------------------ */

.yb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px;
  padding: 13px 20px;
  border: 0; border-radius: var(--yb-radius-sm);
  font-size: 15px; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.yb-btn--primary {
  background: linear-gradient(135deg, var(--yb-navy, #0d233e), var(--yb-blue-dark, #0a52a4));
  color: #fff;
}
.yb-btn--primary:active { filter: brightness(.94); }

/* ---------- Moyens de paiement ------------------------------------------- */

.yb-pay {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--yb-line, #e7eaf0);
}
.yb-pay__label { font-size: 12px; font-weight: 600; color: var(--yb-muted, #98a2b3); }
.yb-pay__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px;
  background: var(--yb-bg); border: 1px solid var(--yb-line, #e7eaf0); border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--yb-ink, #101828);
}
.yb-pay__chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ---------- Bus Urbain --------------------------------------------------- */

/* La carte est devenue un lien : il lui faut la couleur du texte, qu'un <a>
   remplacerait par le bleu des liens. */
.yb-urbain {
  color: #fff !important;
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: var(--yb-radius);
  background: linear-gradient(135deg, var(--yb-blue, #0d65c9), var(--yb-blue-dark, #0a52a4));
  color: #fff;
  box-shadow: var(--yb-shadow);
}
.yb-urbain__ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-size: 24px;
}
.yb-urbain__text { min-width: 0; }
.yb-urbain__text h3 { color: #fff; font-size: 16px; margin: 0 0 2px; }
.yb-urbain__text p  { color: rgba(255,255,255,.85); font-size: 12.5px; margin: 0; }
.yb-urbain__chev { margin-left: auto; font-size: 18px; color: rgba(255,255,255,.75); }
.yb-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--yb-amber, #f59e0b); color: #1f2937;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}

/* ---------- Tuiles « Pourquoi YadeBus » ---------------------------------- */

/* Chaque tuile porte sa propre teinte : quatre atouts distincts se distinguent
   mieux qu'un carré blanc répété quatre fois. Fond, pictogramme et titre
   partagent la même famille de couleur. */
.yb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yb-tile { border-radius: var(--yb-radius); padding: 14px 12px; }
.yb-tile__ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  background: #fff; font-size: 20px;
}
.yb-tile h4 { font-size: 14px; margin: 0 0 3px; }
.yb-tile p  { font-size: 12.5px; margin: 0; }

.yb-tile--bleu  { background: var(--yb-blue-50, #ebf2fa); }
.yb-tile--bleu  .yb-tile__ico, .yb-tile--bleu  h4 { color: var(--yb-blue, #0d65c9); }
.yb-tile--bleu  p { color: #79aae1; }

.yb-tile--ambre { background: #fef9e7; }
.yb-tile--ambre .yb-tile__ico, .yb-tile--ambre h4 { color: #d97706; }
.yb-tile--ambre p { color: #d9a441; }

.yb-tile--vert  { background: #ecfdf3; }
.yb-tile--vert  .yb-tile__ico, .yb-tile--vert  h4 { color: #059669; }
.yb-tile--vert  p { color: #5cb894; }

.yb-tile--rouge { background: #fdeeee; }
.yb-tile--rouge .yb-tile__ico, .yb-tile--rouge h4 { color: #dc2626; }
.yb-tile--rouge p { color: #e08585; }

/* ---------- Trajets populaires ------------------------------------------- */

.yb-routes { display: flex; flex-direction: column; gap: 10px; }
/* Deux lignes : villes et prix en haut, informations secondaires en dessous. */
.yb-route {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 10px;
  width: 100%; text-align: left;
  padding: 12px 14px;
  background: #fff; border: 0; border-radius: var(--yb-radius);
  box-shadow: var(--yb-shadow);
}
.yb-route:active { background: var(--yb-blue-50, #ebf2fa); }
.yb-route__villes {
  min-width: 0; font-size: 15px; font-weight: 700; color: var(--yb-ink, #101828);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yb-route__villes i { color: var(--yb-muted, #98a2b3); margin: 0 8px; }
/* Pastilles de couleur : bleu au départ, ambre à l'arrivée, comme les
   pictogrammes du formulaire juste au-dessus. */
.yb-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}
.yb-dot--from { background: var(--yb-blue, #0d65c9); }
.yb-dot--to   { background: var(--yb-amber, #f59e0b); }
.yb-route__prix {
  grid-column: 2; grid-row: 1;
  font-size: 16px; font-weight: 800; color: var(--yb-blue, #0d65c9); white-space: nowrap;
}
.yb-route__prix small { font-size: 11px; font-weight: 600; color: var(--yb-muted, #98a2b3); margin-left: 3px; }
.yb-route__meta {
  grid-column: 1 / -1;
  font-size: 12px; color: var(--yb-muted, #98a2b3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yb-route__meta i { margin-right: 5px; }

/* ---------- Bandeaux défilants (logements, voitures) --------------------- */

.yb-scroller {
  display: flex; gap: 12px;
  /* Marges négatives : les cartes défilent d'un bord à l'autre de l'écran,
     tout en gardant l'alignement du reste de la page au repos. */
  margin: 0 -14px; padding: 4px 14px 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.yb-scroller::-webkit-scrollbar { display: none; }
.yb-mini {
  flex: 0 0 232px; scroll-snap-align: start;
  background: #fff; border-radius: var(--yb-radius);
  box-shadow: var(--yb-shadow); overflow: hidden;
  display: block; color: inherit !important;
}
.yb-mini__img { height: 132px; background: var(--yb-field); }
.yb-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Beaucoup de fiches n'ont pas encore de photo : un aplat au pictogramme se lit
   mieux qu'une image de remplacement « 600x400 ». */
.yb-mini__img--vide {
  display: flex; align-items: center; justify-content: center;
  background: var(--yb-blue-50, #ebf2fa); color: #bfd3f5; font-size: 40px;
}
.yb-mini__body { padding: 10px 12px 12px; }
.yb-mini__nom {
  font-size: 14px; margin: 0 0 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yb-mini__lieu {
  font-size: 12px; color: var(--yb-muted, #98a2b3); margin: 0 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yb-mini__lieu i { margin-right: 4px; }
.yb-mini__pied { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.yb-mini__prix { font-size: 15px; font-weight: 800; color: var(--yb-blue, #0d65c9); white-space: nowrap; }
.yb-mini__prix small { font-size: 10.5px; font-weight: 600; color: var(--yb-muted, #98a2b3); margin-left: 3px; }
.yb-mini__prix--vide { font-size: 12.5px; font-weight: 600; color: var(--yb-muted, #98a2b3); }
.yb-mini__meta { flex: 0 0 auto; font-size: 12px; color: var(--yb-muted, #98a2b3); }
.yb-mini__meta i { margin-right: 4px; }

/* ---------- Encart application ------------------------------------------- */

.yb-promo {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--yb-radius);
  background: linear-gradient(135deg, var(--yb-blue, #0d65c9), var(--yb-blue-dark, #0a52a4));
  color: #fff; padding: 20px 16px;
}
.yb-promo__img {
  max-width: 150px; width: 100%; margin: 0 0 12px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.3));
}
.yb-promo h3 { color: #fff; font-size: 18px; margin: 0 0 6px; }
.yb-promo p  { color: rgba(255,255,255,.88); font-size: 13px; margin: 0 auto 16px; max-width: 320px; }
.yb-promo__btn {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  background: rgba(255,255,255,.18); color: #fff !important;
}
.yb-promo__btn--plein { background: #fff; color: var(--yb-blue, #0d65c9) !important; }

/* ---------- Encart « événement proche » -----------------------------------
   En superposition au bas du héros, juste au-dessus de la carte de recherche :
   hors du flux, donc le formulaire ne bouge pas.

   La place est comptée. Mesuré : le héros fait 200px, son titre occupe 86→147,
   le filet 159→163, le sous-titre 173→194, et la carte de recherche remonte
   jusqu'à 226. Il ne reste que 32px réellement libres. L'encart est donc calé
   pour préserver le TITRE — il passe par-dessus le filet et le sous-titre, seul
   arbitrage possible sans déplacer le formulaire ni rallonger le héros.

   Alimenté par frontend\components\EvenementVedette, rendu par
   views/site/_encart-event-mobile.php. */
.yb-ruban {
  position: absolute; left: 12px; right: 12px; bottom: 38px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 13px;
  /* background: linear-gradient(135deg, rgba(13,35,62,.95), rgba(28,78,147,.95)); */
  background: darkred;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(6,16,32,.42);
  backdrop-filter: blur(8px);
  color: #fff !important;
}

.yb-ruban__img { position: relative; flex: 0 0 auto; display: block; width: 48px; height: 48px;
  border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.14); }
/* mobile-app.css impose « .yb-app img { height: auto } » : sans sélecteur plus
   spécifique, une affiche en portrait ferait grandir l'encart. */
.yb-app .yb-ruban__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le décompte ne tient pas sur une vignette de 56px : il rejoint les pastilles. */
.yb-ruban__badge { display: none; }

/* min-width:0 : sans lui, un titre long empêcherait le rétrécissement et
   pousserait le bouton hors de l'encart. */
.yb-ruban__corps { flex: 1 1 auto; min-width: 0; display: block; }

/* Une seule ligne de pastilles : à cette largeur, deux lignes faisaient passer
   l'encart de 64 à 108px, et il recouvrait alors le titre du héros. */
.yb-ruban__puces { display: flex; gap: 5px; margin-bottom: 2px; flex-wrap: nowrap; overflow: hidden; }
.yb-ruban__puce {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.20); color: #fff;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.yb-ruban__puce--compte { background: var(--yb-cyan, #29abe2); color: #06233a; }
/* Rouge du logo : la rareté est le seul message qui doit presser. */
.yb-ruban__puce--rare { background: var(--yb-red, #ce130d); }
/* La catégorie saute en premier quand la place manque : le décompte et la
   rareté portent l'information utile. */
.yb-ruban__puce--categ { display: none; }

.yb-ruban__titre {
  display: block; color: #fff;
  font-size: 13.5px; font-weight: 800; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yb-ruban__meta {
  display: block; margin-top: 1px;
  color: rgba(255,255,255,.82); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yb-ruban__meta i, .yb-ruban__meta br { display: none; }

.yb-ruban__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 8px 13px; border-radius: 9px;
  background: #fff; color: var(--yb-navy, #0d233e) !important;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
}


/* ---------- Abonnement ---------------------------------------------------- */

.yb-news { padding: 16px 14px; }
.yb-news h3 { font-size: 16px; margin: 0 0 4px; }
.yb-news p  { font-size: 13px; margin: 0 0 12px; }
.yb-news__note { font-size: 11.5px; color: var(--yb-muted, #98a2b3); margin: 10px 0 0; }

/* ---------- Résultats de recherche --------------------------------------- */

/* site/find renvoie le balisage du thème (.route-item) : on le ramène à la
   largeur d'un téléphone sans le réécrire. */
.yb-loading { color: var(--yb-muted, #98a2b3); font-size: 13px; }
#result .route-item {
  background: #fff; border: 0 !important; border-radius: var(--yb-radius);
  box-shadow: var(--yb-shadow); padding: 12px 14px; margin-bottom: 10px;
}
#result .row { margin-left: -6px; margin-right: -6px; }
#result [class*="col-"] { padding-left: 6px; padding-right: 6px; }
#result img { max-width: 100%; height: auto; }
#result .theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; margin-top: 8px;
  border-radius: var(--yb-radius-sm);
  background: linear-gradient(135deg, var(--yb-blue, #0d65c9), var(--yb-blue-dark, #0a52a4));
  color: #fff; font-size: 14px; font-weight: 600;
}

/* ---------- Modale (colis) ----------------------------------------------- */

.modal-dialog { margin: 12px; }
.modal-content { border: 0; border-radius: var(--yb-radius); }
.modal-header { border-bottom: 1px solid var(--yb-line, #e7eaf0); padding: 14px; }
.modal-title { font-size: 16px; }
.modal-body { padding: 14px; }

/* ---------- Listes rafraîchies en AJAX ----------------------------------- */

/* Posé le temps de la requête par js/yb-liste-ajax.js : le contenu reste lisible
   mais visiblement en attente, et ne répond plus aux appuis — sans quoi deux
   appuis rapides sur la pagination lancent deux chargements concurrents. */
.yb-chargement {
  opacity: .45;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* ---------- Alertes ------------------------------------------------------ */

.yb-main .alert {
  margin: 12px 14px 0; border: 0; border-radius: var(--yb-radius-sm);
  padding: 12px 14px; font-size: 13px;
}
.yb-main .alert-success { background: #ecfdf5; color: #047857; }
.yb-main .alert-danger, .yb-main .alert-error { background: #fef2f2; color: #b91c1c; }
.yb-main .alert-warning { background: #fffbeb; color: #b45309; }
.yb-main .alert-info    { background: var(--yb-blue-50, #ebf2fa); color: var(--yb-blue-dark, #0a52a4); }