/* ==========================================================================
   custom-v9.css — surcharges maison du theme Hummingbird (BikeBusters)
   Chargee apres theme.css via templates/_partials/head.tpl.
   Ne jamais editer theme.css : c'est un fichier genere, tout y serait perdu.
   Pense a incrementer le ?v= dans head.tpl a chaque modification.

   1. Slider d'accueil — recadrage sur mobile
   2. Bloc « Prendre rendez-vous » de la page d accueil\n   3. Grille « Nos univers »\n   4. Bloc « A l atelier »\n   5. Pave de texte ps_customtext : titre et corps calmes sur mobile
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Slider d'accueil — recadrage sur mobile
   --------------------------------------------------------------------------
   Probleme : sous 768px, le theme impose au conteneur
       .ratio-homeSlider { min-height: 300px; --bs-aspect-ratio: 42.85714%; }
   A 400px de large, le ratio donnerait 171px de haut, mais min-height:300px
   gagne. La boite devient donc du 1,33:1 alors que les bandeaux sont en
   3,26:1. Avec object-fit:cover, l'image est mise a l'echelle sur la hauteur
   et environ 59% de sa largeur sort du cadre : le texte incruste est coupe.

   Correction : sur mobile uniquement, on neutralise le ratio impose et on
   laisse chaque visuel prendre sa hauteur naturelle. Rien n'est recadre.
   Au-dessus de 768px on ne touche a rien, l'affichage y est correct.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  /* Bootstrap applique le ratio via un pseudo-element ::before qui pousse la
     hauteur, et positionne les enfants en absolute. On demonte les trois. */
  #home-slider.ratio-homeSlider {
    min-height: 0;
  }

  #home-slider.ratio-homeSlider::before {
    display: none;
  }

  #home-slider.ratio-homeSlider > * {
    position: static;
    height: auto;
  }

  /* Ces deux-la sont forces a height:100% par le theme. */
  #home-slider .carousel-link,
  #home-slider .carousel-content {
    height: auto;
  }

  /* <figure> : la marge par defaut du navigateur creerait un decalage. */
  #home-slider .carousel-content {
    margin: 0;
  }

  /* Le coeur du correctif : hauteur libre, donc plus de recadrage possible.
     object-fit n'a plus d'effet des lors que la boite suit le ratio natif,
     mais on le remet a sa valeur initiale pour ne rien laisser trainer. */
  #home-slider .carousel .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: initial;
  }
}


/* --------------------------------------------------------------------------
   2. Bloc « Prendre rendez-vous » de la page d accueil\n   3. Grille « Nos univers »\n   4. Bloc « A l atelier »\n   5. Pave de texte ps_customtext : titre et corps calmes sur mobile
   --------------------------------------------------------------------------
   Markup : templates/_partials/bb-mobile-rdv.tpl,
   inclus par index.tpl dans le block page_content_top.

   La regle .bb-only-mobile masque le bloc des 768px : la page d'accueil
   desktop reste strictement identique a ce qu'elle etait.

   Palette : noir et ivoire du logo, accent laiton (#D9A441).

   Note : index.tpl ne place AUCUN conteneur autour du contenu de l'accueil
   (contrairement a layout-full-width.tpl, dont il redefinit content_columns).
   Le bloc est donc bord a bord, comme le slider juste en dessous : pas
   d'arrondi, pas de marge laterale.
   -------------------------------------------------------------------------- */

.bb-only-mobile {
  display: block;
}

@media (min-width: 768px) {
  .bb-only-mobile {
    display: none !important;
  }
}

.bb-rdv {
  position: relative;
  overflow: hidden;
  background: #141414;
  min-height: 336px;
  display: flex;
}

.bb-rdv__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}

.bb-rdv__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0.92));
}

.bb-rdv__contenu {
  position: relative;
  width: 100%;
  padding: 26px 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bb-rdv__surtitre {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D9A441;
}

.bb-rdv__surtitre sup {
  font-size: 0.65em;
}

.bb-rdv__titre {
  margin: 0 0 16px;
  font-size: 1.85rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

/* Cible tactile : 56px, au-dessus du minimum de 44px. */
.bb-rdv__bouton,
.bb-rdv__appel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
}

.bb-rdv__bouton {
  height: 56px;
  margin-bottom: 10px;
  background: #D9A441;
  color: #141414;
  font-size: 1.125rem;
}

.bb-rdv__bouton:hover,
.bb-rdv__bouton:focus {
  background: #C8952F;
  color: #141414;
  text-decoration: none;
}

.bb-rdv__appel {
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 600;
}

.bb-rdv__appel:hover,
.bb-rdv__appel:focus {
  border-color: #FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
}

/* Bandeau adresse + horaires, juste sous le bloc. */
.bb-infos {
  margin: 0 0 4px;
  padding: 12px 12px 13px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E1D8;
  text-align: center;
}

.bb-infos__ligne {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4A463E;
}

.bb-infos__ligne svg {
  flex-shrink: 0;
  color: #8A5E12;
}


/* --------------------------------------------------------------------------
   3. Grille « Nos univers »
   --------------------------------------------------------------------------
   Markup : templates/_partials/bb-mobile-univers.tpl
   -------------------------------------------------------------------------- */

/* Titre et chapo communs aux blocs maison. */
.bb-bloc__titre {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #141414;
}

.bb-bloc__chapo {
  margin: -8px 0 14px;
  font-size: 0.875rem;
  color: #5A564E;
}

.bb-univers,
.bb-atelier {
  padding: 24px 16px 0;
}

.bb-univers__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bb-tuile {
  position: relative;
  display: block;
  height: 128px;
  border-radius: 8px;
  overflow: hidden;
  background: #141414;
  text-decoration: none;
}

.bb-tuile:hover,
.bb-tuile:focus {
  text-decoration: none;
}

.bb-tuile__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.bb-tuile__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 20, 20, 0.86) 34%, rgba(20, 20, 20, 0) 72%);
}

.bb-tuile__texte {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
}

.bb-tuile__titre {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
}

.bb-tuile__soustitre {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #D8D3C7;
}


/* --------------------------------------------------------------------------
   4. Bloc « A l'atelier »
   --------------------------------------------------------------------------
   Markup : templates/_partials/bb-mobile-atelier.tpl
   Reprend en 4 lignes les prestations noyees dans le pave de texte.
   -------------------------------------------------------------------------- */

.bb-presta {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid #E5E1D8;
  border-radius: 8px;
  overflow: hidden;
}

.bb-presta__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-bottom: 1px solid #EFECE4;
}

.bb-presta__item:last-child {
  border-bottom: 0;
}

.bb-presta__icone {
  flex-shrink: 0;
  color: #8A5E12;
}

.bb-presta__texte {
  flex-grow: 1;
}

.bb-presta__nom {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #141414;
}

.bb-presta__detail {
  display: block;
  margin-top: 1px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #5A564E;
}

/* Rappel du rendez-vous en bas de bloc : 48px de haut, cible confortable. */
.bb-atelier__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 12px;
  border: 1.5px solid #141414;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #141414;
  text-decoration: none;
}

.bb-atelier__lien:hover,
.bb-atelier__lien:focus {
  background: #141414;
  color: #FFFFFF;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   5. Pave « Bienvenue chez Bikebusters » (module ps_customtext)
   --------------------------------------------------------------------------
   Le texte reste en place : c'est du contenu indexe par Google, on ne le
   masque pas. Mais sur un ecran de 390px son titre occupait trois lignes
   enormes et le corps s'etalait sur plusieurs ecrans. On le calme.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  #custom-text {
    padding-top: 26px;
  }

  #custom-text h1,
  #custom-text h2 {
    font-size: 1.375rem;
    line-height: 1.2;
    text-align: left;
  }

  #custom-text .custom-text__content {
    font-size: 0.9375rem;
    line-height: 1.55;
    text-align: left;
  }

  #custom-text .custom-text__content p {
    margin-bottom: 0.75rem;
  }
}


/* --------------------------------------------------------------------------
   6. Bandeau de reassurance
   7. Mobile : on ne garde que la maquette (masquages + bande produits)
   --------------------------------------------------------------------------
   Markup : templates/_partials/bb-mobile-reassurance.tpl
   Pose dans le block page_footer d'index.tpl : il ferme la page d'accueil.
   -------------------------------------------------------------------------- */

.bb-reassurance {
  display: block;
  margin: 26px 16px 24px;
  padding: 16px 14px;
  background: #141414;
  border-radius: 8px;
}

.bb-reassurance__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
}

.bb-reassurance__item {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  color: #D9A441;
}

/* Filets de separation, sauf devant le premier. */
.bb-reassurance__item + .bb-reassurance__item {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.bb-reassurance__texte {
  display: block;
  margin-top: 6px;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: #D8D3C7;
}


/* --------------------------------------------------------------------------
   7. Mobile : on ne garde que la maquette
   --------------------------------------------------------------------------
   Sous 768px, la page d'accueil se reduit aux seuls blocs maison.
   Sont masques :
     #home-slider              slider promo (ps_imageslider)
     #custom-text              pave « Bienvenue chez Bikebusters » (ps_customtext)
     .featured-products        produits populaires (ps_featuredproducts)
     .best-sellers-products    meilleures ventes (ps_bestsellers)
     .email-subscription       newsletter (ps_emailsubscription)
     .block-social             Facebook / Instagram (ps_socialfollow)

   Conserves : les accordeons de liens du pied de page. Ils portent les
   CGV, CGU et mentions legales, qui doivent rester joignables partout.

   A savoir : masquer en CSS ne dispense pas du telechargement. Ici ca
   fonctionne quand meme pour le slider, parce que ses visuels portent
   loading="lazy" a partir du 2e : jamais visibles, donc jamais charges.
   Seul le 1er slide, en loading="eager", part encore sur le reseau.

   Desktop : rien de tout cela ne s'applique, la page reste complete.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  #home-slider,
  #custom-text,
  .featured-products,
  .best-sellers-products {
    display: none !important;
  }

  /* Pied de page du site : ces deux blocs s'affichent sur TOUTES les pages,
     pas seulement l'accueil. Le masquage vaut donc pour tout le mobile. */
  .email-subscription,
  .block-social {
    display: none !important;
  }

  /* Le grand blanc autour du bandeau venait de deux regles du theme :
       #content-wrapper .page-footer { margin-top: 3rem }   -> 48px au-dessus
       #content-wrapper             { padding-bottom: 4rem } -> 64px en dessous
     On les annule sur mobile. Meme specificite que le theme, et cette
     feuille est chargee apres : c'est elle qui l'emporte. */
  #content-wrapper .page-footer {
    margin-top: 0;
  }

  #content-wrapper {
    padding-bottom: 0;
  }

  .bb-reassurance {
    margin: 20px 16px 16px;
  }

}


/* --------------------------------------------------------------------------
   8. Facebook / Instagram, version mobile
   --------------------------------------------------------------------------
   Markup : templates/_partials/bb-mobile-reseaux.tpl, inclus depuis
   bb-mobile-reassurance.tpl. Remplace ps_socialfollow, masque sous 768px.
   -------------------------------------------------------------------------- */

.bb-reseaux {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 16px 24px;
}

/* 48px de cote : au-dessus du minimum de 44px pour une cible tactile. */
.bb-reseaux__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #E5E1D8;
  border-radius: 8px;
  color: #141414;
  text-decoration: none;
}

.bb-reseaux__lien:hover,
.bb-reseaux__lien:focus {
  background: #141414;
  border-color: #141414;
  color: #FFFFFF;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   9. Ligne « héros du quotidien » dans le bloc prestations
   --------------------------------------------------------------------------
   Markup : templates/_partials/bb-mobile-atelier.tpl, 1er <li> de la liste.
   Fond laiton pale pour la detacher des 4 prestations, et lien vers la page
   CMS qui porte le detail de l'offre.
   -------------------------------------------------------------------------- */

.bb-presta__item--offre {
  padding: 0;
  background: #FBF3E2;
}

.bb-presta__lien {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  color: #141414;
  text-decoration: none;
}

.bb-presta__lien:hover,
.bb-presta__lien:focus {
  background: #F6E9CE;
  color: #141414;
  text-decoration: none;
}

.bb-presta__item--offre .bb-presta__icone {
  color: #8A5E12;
}

.bb-presta__item--offre .bb-presta__nom {
  color: #6F4A0C;
}

.bb-presta__fleche {
  flex-shrink: 0;
  color: #8A5E12;
}