@charset "UTF-8";
/* //////////////////////////////////////////////////////////////////////////////////
*
* Global variables
*
/* /////////////////////////////////////////////////////////////////////////////////*/
/* New variables */
/* //////////////////////////////////////////////////////////////////////////////////
*
*  Vignette d'annonce — maquette v3.13
*
*  Cette feuille est le seul propriétaire du gabarit : page-search.scss ne pose que la
*  grille qui contient les vignettes. Trois feuilles se disputaient auparavant les mêmes
*  propriétés, dont deux avec des !important qui gagnaient par accident.
*
/* /////////////////////////////////////////////////////////////////////////////////*/
/* Le vert de la charte, $environment-green #1f975b, ne passe pas AA sur fond clair
   (3,3:1). Le fond reste celui de .reactivity-tag, le texte est assombri à 6,2:1. */
/* Rayons propres à la vignette : la carte est plus serrée que les blocs de page. */
.add-cart-wrap {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
  cursor: pointer;
  /* Image à fleur de carte : le rembourrage de la maquette v3 encadrait la photo
     d'un liseré blanc. Le bord à bord est plus net, et c'est le rendu d'origine. */
  overflow: hidden;
  box-sizing: border-box;
  /* Aucune largeur ici : c'est la grille du conteneur qui la donne, sans quoi la
     vignette ne suit plus le nombre de colonnes. La hauteur est étirée par la
     grille (align-items: stretch), le prix est ancré par margin-top: auto. */
}
.add-cart-wrap a {
  text-decoration: none;
  color: inherit;
}
.add-cart-wrap:hover h2 {
  color: #1c5878;
}

.acw-img {
  flex: none;
  /* Ni rayon ni découpe ici : la photo occupe toute la largeur et ce sont les
     angles de la carte, arrondis par overflow: hidden, qui la découpent. */
  background-color: #e2f5fc;
}
.acw-img img {
  display: block;
  width: 100%;
  height: 144px;
  object-fit: cover;
}

.c-head {
  display: flex;
  flex-direction: column;
  /* Occupe toute la hauteur restante pour que margin-top: auto du pied ait de quoi
     pousser : sans cette chaîne, le prix remonte sous les badges. */
  flex: 1;
  min-width: 0;
  /* Le texte porte son propre retrait, l'image n'en a plus. */
  padding: 12px 12px 14px;
}
.c-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 25px;
  font-weight: 700;
  color: #434343;
  /* Une seule ligne : deux titres de longueurs différentes décalaient tout le
     contenu des cartes voisines. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acw-loc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bloc loueur : photo à gauche, nom + vérification puis note + historique à droite.
   La hauteur minimale couvre la photo seule, pour les loueurs sans avis. */
.acw-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 8px 0 0;
  min-width: 0;
}
.acw-owner img {
  flex: none;
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #e2f5fc;
}

.acw-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.acw-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #434343;
  white-space: nowrap;
}
.acw-name .acw-nm {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* « Vérifié » : étiquette accolée au nom plutôt que badge pleine ligne. Le libellé
   complet est porté par l'infobulle et par le texte réservé aux lecteurs d'écran. */
.acw-vtag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 8px;
  background-color: #e2f5fc;
  color: #1c5878;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.acw-vtag svg {
  width: 10px;
  height: 10px;
  flex: none;
  fill: #1c5878;
}
.acw-vtag svg path {
  fill: #1c5878;
}

.acw-social {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 1px 0 0;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  color: #434343;
}
.acw-social .star-wrap {
  display: flex;
  align-items: center;
  margin-top: 0;
  flex: none;
}
.acw-social .star-wrap svg {
  width: 12px;
  height: 12px;
  margin-right: 0;
  /* L'ambre saturé est conservé : c'est la note chiffrée qui porte
     l'information, l'étoile n'est que le repère visuel. */
  fill: #f1b60d;
}
.acw-social .star-wrap svg path {
  fill: #f1b60d;
}
.acw-social .star-wrap svg.not-active {
  fill: #e0e0e0;
}
.acw-social .star-wrap svg.not-active path {
  fill: #e0e0e0;
}
.acw-social .noreviews {
  display: none;
}

.acw-note {
  white-space: nowrap;
}

.acw-rentals {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hauteur réservée d'une ligne : sans elle, les cartes d'une même ligne ne sont plus
   comparables et le pied remonte au milieu de la vignette. */
.acw-badges {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  min-height: 26px;
  margin: 12px 0 4px;
}

.acw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.acw-badge svg {
  width: 11px;
  height: 11px;
  flex: none;
}

/* Délai : vert, comme tous les signaux de réactivité à venir. Un délai et une
   vérification d'identité ne sont pas deux crans du même escalier — les couleurs les
   distinguent au lieu de les hiérarchiser. */
.acw-badge--delay {
  background-color: #dcf8db;
  color: #1f6b3a;
}
.acw-badge--delay svg {
  fill: none;
  stroke: #1f6b3a;
}
.acw-badge--delay svg path {
  fill: #1f6b3a;
}

.acw-foot {
  margin-top: auto;
  padding-top: 10px;
}

.add-cart-wrap p.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  line-height: 1.15;
  flex-wrap: wrap;
}

.acw-amt {
  font-size: 19px;
  font-weight: 700;
  color: #224050;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acw-per {
  font-size: 12px;
  color: #666666;
  white-space: nowrap;
}

/* Variante compacte : deux vignettes par ligne sur téléphone. La piste fait environ
   170 px, la typographie descend d'un cran pour que rien ne déborde. */
@media (max-width: 700px) {
  .acw-img img {
    height: 110px;
  }
  .c-head {
    padding: 9px 9px 11px;
  }
  .c-head h2 {
    font-size: 13.5px;
    line-height: 19px;
  }
  .acw-loc {
    font-size: 11px;
  }
  /* La ligne sociale passe sous la photo et le nom, et récupère toute la largeur
     de la carte : à côté de la photo il ne lui restait qu'une centaine de pixels,
     où « 15 locations » se faisait tronquer dès que les étoiles étaient là.
     `display: contents` sort le nom et la ligne sociale de leur conteneur pour en
     faire deux rangées du bloc loueur, sans toucher au gabarit. */
  .acw-owner {
    flex-wrap: wrap;
    gap: 0 6px;
    min-height: 26px;
    margin-top: 6px;
  }
  .acw-owner img {
    width: 22px;
    height: 22px;
  }
  .acw-who {
    display: contents;
  }
  .acw-name {
    flex: 1;
    min-width: 0;
  }
  .acw-name {
    gap: 4px;
    font-size: 11.5px;
  }
  .acw-vtag {
    padding: 0 5px;
    font-size: 10px;
  }
  .acw-vtag svg {
    width: 9px;
    height: 9px;
  }
  /* Sur deux colonnes la ligne sociale dispose d'environ 123 px : les étoiles, la
     note chiffrée et le compteur de locations n'y tiennent pas à trois. C'est la
     note chiffrée qui saute — les étoiles la disent déjà, et c'est le nombre de
     locations qui porte le signal. */
  .acw-social {
    width: 100%;
    gap: 4px;
    margin-top: 3px;
    font-size: 11px;
  }
  .acw-social .star-wrap svg {
    width: 10px;
    height: 10px;
  }
  /* Reste masquée : les étoiles disent déjà la note, et c'est le nombre de
     locations qui porte le signal. */
  .acw-note {
    display: none;
  }
  .acw-badges {
    min-height: 22px;
    gap: 4px;
    margin: 8px 0 3px;
  }
  .acw-badge {
    padding: 1px 6px;
    font-size: 10.5px;
  }
  .acw-badge svg {
    width: 9px;
    height: 9px;
  }
  .acw-foot {
    padding-top: 8px;
  }
  .acw-amt {
    font-size: 15px;
  }
  .acw-per {
    font-size: 10.5px;
  }
}
/* La fiche loueur affiche les mêmes vignettes dans .annonces, un conteneur flex
   sans gouttière qui sert aussi, sur la page « mes annonces », à des lignes pleine
   largeur d'un tout autre gabarit. On ne le convertit donc pas globalement : la
   grille ne s'applique que lorsqu'il contient réellement des vignettes. */
.annonces:has(.add-cart-wrap) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.annonces:has(.add-cart-wrap) .form-title {
  grid-column: 1/-1;
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Bandeau de garanties de la grille de résultats
*
*  Casse & vol et annulation avant réponse couvrent 100 % des locations. Répétées sur
*  chaque vignette elles ne départageaient aucune annonce et consommaient deux lignes
*  de badge : elles sont dites une fois, au-dessus de la grille.
*
/* /////////////////////////////////////////////////////////////////////////////////*/
/* Pas d'encadré : deux étiquettes de la même famille que les badges de vignette, une
   taille au-dessus. Un cadre supplémentaire aurait ajouté une boîte là où il ne s'agit
   que de deux mentions. */
.search-guarantees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 26px 0 0;
  /* Deux libellés dans le gabarit, un seul rendu à la fois. Le choix se fait à la
     largeur réelle et non sur l'agent utilisateur : les deux étiquettes tiennent
     côte à côte sur une ligne large, jamais sur un téléphone. */
}
.search-guarantees p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 13px 5px 10px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
}
.search-guarantees p:first-child {
  background-color: #e2f5fc;
  color: #1c5878;
}
.search-guarantees p:first-child svg {
  fill: #1c5878;
}
.search-guarantees p:first-child svg path {
  fill: #1c5878;
}
.search-guarantees p:last-child {
  background-color: #dcf8db;
  color: #1f6b3a;
}
.search-guarantees p:last-child svg {
  fill: #1f6b3a;
}
.search-guarantees p:last-child svg path {
  fill: #1f6b3a;
}
.search-guarantees svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.search-guarantees .sg-short {
  display: none;
}

@media (max-width: 700px) {
  .search-guarantees {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 18px 0 0;
  }
  .search-guarantees p {
    font-size: 12.5px;
    padding: 4px 11px 4px 9px;
  }
  .search-guarantees svg {
    width: 13px;
    height: 13px;
  }
  .search-guarantees .sg-long {
    display: none;
  }
  .search-guarantees .sg-short {
    display: inline;
  }
}
/* //////////////////////////////////////////////////////////////////////////////////
*
*  Add Related
*
/* /////////////////////////////////////////////////////////////////////////////////*/
.add-related .ar-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.add-related .ar-left {
  width: 100%;
  height: 120px;
  overflow: hidden;
  margin-bottom: 10px;
}
.add-related .ar-left .acw-img {
  border-radius: 10px;
  overflow: hidden;
}
.add-related .ar-left .acw-img img {
  display: block;
  width: 100%;
}
.add-related .ar-right {
  width: 100%;
}
.add-related .ar-right p, .add-related .ar-right a, .add-related .ar-right h2 {
  font-size: 15px;
  line-height: 20px;
}
.add-related .ar-right .price {
  display: initial;
  font-weight: bold;
  background-color: #40697f;
  padding: 3px 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  float: right;
}
.add-related .ar-right .rel-usr {
  font-size: 13px;
  line-height: 20px;
}
.add-related .ar-center p {
  font-size: 12px;
  line-height: 20px;
}
.add-related .noreviews {
  font-size: 12px;
  line-height: 20px;
}
.add-related .star-wrap svg {
  width: 10px;
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  User Messages
*
/* /////////////////////////////////////////////////////////////////////////////////*/
.success {
  padding: 20px;
  background-color: #5abb6f;
  border-radius: 7px;
  margin-bottom: 30px;
}
.success h2 {
  margin-bottom: 20px;
}
.success h2, .success p {
  color: #fff;
  line-height: 20px;
}

.error {
  padding: 20px;
  background-color: #ed6f6f;
  border-radius: 7px;
  margin-bottom: 30px;
}
.error h2 {
  margin-bottom: 20px;
}
.error h2, .error p {
  color: #fff;
  line-height: 20px;
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Taxo tool Wrap
*
/* /////////////////////////////////////////////////////////////////////////////////*/
.tt-card {
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
  margin-bottom: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.tt-card .tt-top {
  width: 30%;
}
.tt-card .tt-top img {
  width: 100%;
  display: block;
  margin: auto;
}
.tt-card .tt-bot {
  width: calc(70% - 30px);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tt-card .tt-bot h3 {
  font-size: 17px;
  color: #1c5878;
  text-align: center;
  line-height: 20px;
  white-space: nowrap;
  margin-bottom: 10px;
}
.tt-card .tt-bot span {
  color: #fff;
  font-weight: bold;
  background-color: #1c5878;
  padding: 2px 10px;
  border-radius: 5px;
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Reviews
*
/* /////////////////////////////////////////////////////////////////////////////////*/
.rev-unit .rev-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rev-unit .r-l {
  with: 12%;
  margin-right: 4%;
  max-width: 50px;
}
.rev-unit .r-l img {
  display: block;
  width: 100%;
  margin: auto;
  border-radius: 100%;
  overflow: hidden;
}
.rev-unit .r-r {
  width: 83%;
}
.rev-unit .r-r .r-info p, .rev-unit .r-r .r-info span {
  line-height: 15px;
}
.rev-unit .r-r .r-info span {
  font-size: 12px;
  color: #666666;
}
.rev-unit .r-stars svg {
  margin: 10px 2px 10px 0;
  max-width: 20px;
}
.rev-unit .r-stars svg path {
  fill: #f1b60d;
}

.r-info p {
  font-weight: bold;
}
.r-info span {
  font-size: 13px;
}

/* //////////////////////////////////////////////////////////////////////////////////
*
*  Card Main
*
/* /////////////////////////////////////////////////////////////////////////////////*/
.card-main {
  border-radius: 12px;
  overflow: hidden;
  border: solid 8px #fff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
  cursor: pointer;
  background-color: #f1b60d;
  transition: all 0.2s ease-in-out;
}
.card-main .cm-top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.card-main .cm-top img {
  width: 100%;
  transition: all 0.2s ease-in-out;
  height: 100%;
}
.card-main .cm-bot a {
  text-align: center;
  padding: 12px 0;
  width: 100%;
  background-color: #1c5878;
  display: block;
  color: #fff;
  font-weight: bold;
}
.card-main .cm-bot a h3 {
  color: #fff;
  font-weight: bold;
  font-size: 17px;
}

.card-main:hover {
  transform: translateY(-10px);
}

.card-main:hover .cm-top img {
  opacity: 0.3;
}

/*# sourceMappingURL=cards.output.css.map */