/* Cycles Blain — 1.9.36 : une photo par famille de vélos (Route, Gravel, VTT, Ville et VTC, Enfant, Cargo), photos libres de droits ;
   la montagne reste ailleurs. Fondu blanc plus court et plus léger ; sur téléphone, un petit bandeau pour voir les vélos tout de suite
   (maquette validée le 4 nov. 2026).
   1.9.35 : la photo de montagne de l'accueil derrière Pierre-Louis
   (page « Trouver mon vélo » et toutes les pages catégories de vélos — maquette validée le 3 nov. 2026).
   La photo est un simple décor (CSS) : aucun changement pour Google. Elle se fond vers le bas, avant les vélos. */

/* La photo déborde sur toute la largeur de l'écran : pas de barre de défilement horizontale */
body#category, body#module-cbavailability-recherche { overflow-x: clip; }

/* Le bloc du haut (titre + Pierre-Louis) devient le bandeau */
#cb-recherche .cb-r-bloc {
  position: relative; isolation: isolate; z-index: 0;
  align-self: stretch !important; width: 100% !important; max-width: none !important;
  background: none !important; border-radius: 0 !important;
  padding: 34px 0 54px !important; gap: 0 !important;
  align-items: stretch !important;
}
#cb-recherche .cb-r-bloc::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background-color: #bcd9ef;
  background-image: var(--cb-fond, url("../img/fond-montagne-1920.jpg"));
  background-position: var(--cb-fond-pos, center 30%); background-size: cover; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), rgba(0, 0, 0, .15) calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), rgba(0, 0, 0, .15) calc(100% - 12px), transparent 100%);
  pointer-events: none;
}

/* Le titre, dans une petite carte blanche pour qu'il se lise quelle que soit la photo derrière */
#module-cbavailability-recherche #cb-recherche .cb-r-titre,
#cb-recherche .cb-r-titre-cat {
  align-self: flex-start; display: inline-block; margin: 0 0 34px !important;
  padding: 10px 24px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(15, 46, 87, .14);
  font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif; font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 800; line-height: 1.2;
  color: #0f2e57 !important; text-transform: none; text-align: left !important;
}
/* Pages catégories : le nom est maintenant dans le bandeau, l'ancien titre au-dessus est retiré (le vrai H1 ne bouge pas) */
body#category #text-category { display: none !important; }
#cb-recherche:not(.cb-recherche-cat) .cb-r-titre-cat { display: none; }

/* Pierre-Louis : carte blanche légèrement transparente, posée sur la photo */
#cb-recherche .cb-r-bloc > .pl2b.pl2b-compact {
  background: rgba(255, 255, 255, .9) !important; border-color: rgba(255, 255, 255, .7) !important;
  box-shadow: 0 12px 32px rgba(15, 46, 87, .18) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  margin: 0 !important;
}
/* Si Pierre-Louis n'est pas là, la barre de recherche de la page reste lisible sur la photo */
#cb-recherche .cb-r-bloc > .cb-r-form { margin: 0; }

/* Téléphone (1.9.36) : la photo n'est qu'un petit bandeau en haut ; le titre dans une petite carte blanche,
   Pierre-Louis posé à cheval sur le bas de la photo, et les vélos juste dessous */
@media (max-width: 767px) {
  #cb-recherche .cb-r-bloc { padding: 14px 0 6px !important; }
  #cb-recherche .cb-r-bloc::before {
    bottom: auto; height: 140px;
    background-image: var(--cb-fond-tel, url("../img/fond-montagne-900.jpg"));
    background-position: center 40%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
  }
  #cb-recherche:not([style]) .cb-r-bloc::before { background-position: 18% center; }
  #module-cbavailability-recherche #cb-recherche .cb-r-titre,
  #cb-recherche .cb-r-titre-cat {
    margin: 0 0 46px !important; padding: 6px 14px 7px; border-radius: 12px;
    background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(15, 46, 87, .16); text-shadow: none;
    font-size: 21px !important;
  }
  #cb-recherche .cb-r-bloc > .pl2b {
    padding: 12px !important; border-radius: 18px !important;
    background: #ffffff !important; box-shadow: 0 8px 22px rgba(15, 46, 87, .14) !important;
  }
}