@charset "UTF-8";
/* //////////////////////////////////////////////////////////////////////////////////
*
* Global variables
*
/* /////////////////////////////////////////////////////////////////////////////////*/
/* New variables */
.search {
  position: relative;
  padding-top: 80px;
}
.search .results {
  min-height: 100vh;
}

.map {
  height: 100%;
}

footer {
  position: relative;
  z-index: 99;
}

.form-wrap {
  position: relative;
  bottom: unset;
  width: 100%;
  border-radius: 0;
  padding: 40px 0;
}

.form-wrap .label {
  display: block;
  color: #8dc3e0;
  margin-bottom: 15px;
  font-weight: 400;
}

.is-full-form button.main-cta {
  margin-top: 35px;
}

.is-full-form button.main-cta:hover {
  background-color: #4b7dc2;
}

#content .loader {
  margin-top: 100px !important;
}

.loader {
  margin-top: 0 !important;
}

.form-wrap #tool-info, .form-wrap #cities-info {
  position: absolute;
  bottom: -30px;
  left: 0px;
  font-size: 13px;
  font-weight: bold;
}

.form-wrap #cities-info {
  left: 27% !important;
}

.results-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* .res-wrapper{
    width: 80%;
} */
/* Grille plutôt que flex : avec des cartes en largeur fixe (23 %) et un gap, la
   rangée s'arrêtait avant le bord — 4 × 23 % + 3 × 16 px laissait une quarantaine
   de pixels vides à droite, et le bandeau de garanties, lui pleine largeur,
   paraissait déborder. Les pistes se répartissent maintenant exactement.
   auto-fill et non auto-fit : une recherche à deux résultats ne doit pas produire
   deux cartes géantes — la médiane est de 4 résultats. Le nombre de colonnes suit
   la largeur disponible, ce qui donne 1 colonne sur téléphone sans media query. */
.res-inner {
  padding: 40px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Le bandeau de garanties et la grille forment un même bloc : les 40px de retrait
   les dissociaient visuellement. Resserré uniquement quand le bandeau est là — sans
   lui (page sans résultat), .res-inner garde son retrait sous la barre de recherche. */
.search-guarantees + .res-wrapper .res-inner {
  padding-top: 14px;
}

/* Deux vignettes par ligne sur téléphone. minmax(0, 1fr) et non minmax(150px, 1fr) :
   le plancher à zéro autorise la piste à descendre sous la largeur minimale du
   contenu, sans quoi la grille déborderait au lieu de comprimer. La typographie
   compacte qui va avec est dans cards.scss. */
@media only screen and (max-width: 700px) {
  .res-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    /* Repris de _search.scss, qui devait le poser en !important faute d'arriver
       après cette feuille. Déclaré ici, il gagne sans forcer. Le retrait bas
       dégage la barre d'actions mobile. */
    padding: 20px 0 100px;
  }
}
/* Pavé publicitaire 300x250 : rendu UNIQUEMENT sur mobile (détection UA côté
   serveur), pleine largeur de la grille 1 colonne. SANS la classe .add-cart-wrap
   (sinon le JS MobileCart / les markers carte le traiteraient comme une annonce).
   Hauteur réservée par le wrapper .akcelo-wrapper (inline) → pas de CLS. */
.res-inner .ad-slot--pave {
  grid-column: 1/-1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Bannière 970x250 (desktop uniquement, tag duplicable Bricolib_ATF2_970x250) :
   toute la largeur de la grille, une bannière toutes les 8 annonces (2 lignes
   pleines de 4 cartes). Créa centrée horizontalement, hauteur réservée → pas de CLS. */
.res-inner .ad-slot--banner-wide {
  grid-column: 1/-1;
  width: 100%;
  box-sizing: border-box;
}

/* Page sans résultat : le message occupe sa ligne, la pub s'affiche dessous. */
.res-inner .empty {
  grid-column: 1/-1;
  width: 100%;
}

/* Rendu du placeholder tant que la régie n'a pas rempli l'emplacement (SLM ajoute
   .akcelo-loaded une fois la pub affichée). Sans ça, le fond quasi blanc par défaut
   d'Akcelo est invisible sur la page et le pavé paraît « vide / cassé ». On lui donne
   l'allure d'une carte (fond gris + bord arrondi) à la même hauteur réservée. */
.res-inner .ad-slot--pave .akcelo-wrapper,
.res-inner .ad-slot--banner-wide .akcelo-wrapper {
  width: 100%;
  border-radius: 7px;
  overflow: hidden;
  /* Créa (300x250 ou 970x250) centrée dans son emplacement,
     placeholder « Publicité » centré aussi. */
  display: flex;
  justify-content: center;
  align-items: center;
}

.res-inner .ad-slot--pave .akcelo-wrapper:not(.akcelo-loaded),
.res-inner .ad-slot--banner-wide .akcelo-wrapper:not(.akcelo-loaded) {
  background-color: #f4f4f4;
  border: 1px solid #ececec;
}

.res-inner .ad-slot--pave .akcelo-placeholder:not(.akcelo-loaded)::after,
.res-inner .ad-slot--banner-wide .akcelo-placeholder:not(.akcelo-loaded)::after {
  border-color: #c4c4c4;
  color: #8a8a8a;
  font-size: 12px;
  padding: 4px 8px;
}

.form-wrap button.datepicker-nav-next,
.form-wrap button.datepicker-nav-previous {
  padding: 0;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 100px;
}
.loader svg {
  width: 50px;
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.loader path {
  fill: #f1b60d;
}

.inner-grid.get-helped {
  display: block;
  padding: 0px 0 20px 0;
  max-width: 97%;
  width: 100%;
}
.inner-grid.get-helped h3 {
  font-size: 17px;
}

#mainsearch {
  position: relative;
  flex-wrap: wrap;
}

#tool-info,
#cities-info {
  width: 44%;
  font-size: 13px;
  color: #ed6f6f;
  font-weight: bold;
}

.noreviews {
  font-size: 12px;
  color: #434343;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* @media only screen and (max-width: 1650px)  {
    .res-wrapper {
        width: 78%;
    }
} */
@media only screen and (max-width: 1100px) {
  /* .res-wrapper {
      width: 75%;
  } */
  .form-wrap .br-boxed {
    width: 98%;
  }
}
@media only screen and (max-width: 980px) {
  /* .res-wrapper {
      width: 70%;
  } */
  /* .res-wrapper .add-cart-wrap{
      width: 47%;
  } */
  .form-wrap .label {
    font-size: 14px;
  }
  #RentalDateInterval .datetimepicker-dummy .datetimepicker-dummy-wrapper .datetimepicker-dummy-input {
    font-size: 13px;
  }
}
@media only screen and (max-width: 950px) {
  .filters form {
    flex-wrap: wrap;
  }
  .filters form .field {
    width: 100%;
    margin-right: 0;
  }
  .filter .main-cta {
    width: 100%;
    margin-bottom: 20px;
  }
  #tool-info, #cities-info {
    font-size: 13px;
    color: #ed6f6f;
    font-weight: bold;
    width: 100%;
    text-align: center;
    margin-top: 5px;
  }
  .inner-grid.get-helped {
    display: block;
    padding: 0px 0 20px 0;
    max-width: 100%;
  }
  .form-wrap .is-grouped {
    margin-bottom: 0;
    align-items: flex-start;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .is-full-form #RentalDateInterval, .is-full-form #loc, .is-full-form #req, .is-full-form button.main-cta {
    width: 100%;
  }
  .form-wrap #cities-info {
    left: 0 !important;
    bottom: -60px;
  }
  .is-full-form button.main-cta {
    margin-top: 0;
  }
  .form-wrap .auto-cities input {
    width: 90.5%;
    margin-bottom: 15px;
  }
  .form-wrap .br-boxed {
    width: 90%;
  }
}
.br-boxed {
  width: 90%;
}

.inner {
  padding: 50px 0 0 0;
  background: #fff;
  position: relative;
}

.tax-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.synonymes {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  list-style-type: none;
  margin-top: 25px;
  font-size: 13px;
}
.synonymes .is-head {
  color: #f1b60d;
}
.synonymes li {
  font-style: italic;
  margin-right: 5px;
  color: #666666;
}

h1 {
  color: #f1b60d;
}

.is-quest {
  padding: 50px 0;
}

.related-search {
  margin-bottom: 100px;
}

.overflo-patch {
  background-color: #fff;
  position: relative;
  z-index: 99;
}

.thema-unit {
  margin-bottom: 30px;
}
.thema-unit .form-title {
  margin-bottom: 0px;
}
.thema-unit .form-title .t-baseline {
  display: none;
}
.thema-unit .form-title h2 {
  color: #434343;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.tp-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
}

.tt-card {
  width: 18%;
  margin-right: 1%;
}

.page-search .tt-card {
  width: 200px;
  justify-content: flex-start;
}
.page-search .tt-card .tt-top {
  width: 48px;
  padding: 8px;
}
.page-search .tt-card .tt-top img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}
.page-search .tt-card .tt-bot {
  padding: 0;
  flex-direction: row;
  justify-content: flex-start;
}
.page-search .tt-card .tt-bot h3 {
  margin-bottom: 0;
}

.search-localisation-icon {
  max-width: 120px;
}

@media only screen and (max-width: 1024px) {
  /* Plus de largeur imposée à la vignette : reste de la grille en flex, cette
     règle contraignait la carte à 32 % de sa piste — 140 px sur un téléphone,
     d'où des cartes écrasées à gauche pendant que la piste, elle, faisait toute
     la largeur. Le nombre de colonnes est décidé par .res-inner. */
  button {
    color: #434343;
  }
}

/*# sourceMappingURL=page-search.output.css.map */