/* ---------------------------------------------------------------------------
   Complements au theme Constrc : moteur de recherche, barre d'appel mobile,
   formulaire de devis. Aucune regle du theme n'est modifiee ici, on ajoute.
   Couleurs reprises du theme : orange #ff5e14, noir #191919.
   --------------------------------------------------------------------------- */

:root {
  --lp-orange: #ff5e14;
  --lp-noir: #191919;
  --lp-gris: #f3f3f3;
  --lp-bord: #e2e2e2;
}

/* Etiquette lue par les lecteurs d'ecran mais pas affichee. Un champ sans
   etiquette est inutilisable pour une personne malvoyante. */
.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;
}

/* --- Barre de recherche en en-tete --------------------------------------- */
/* Reprend le croquis : prestation, departement, ville, bouton orange, le tout
   dans une carte blanche arrondie posee sous le menu. Le fond est gris clair
   pour que la carte se detache du bandeau photo qui suit. */

/* Elle vit A L'INTERIEUR de la carte blanche de l'en-tete, sous le menu :
   un simple trait la separe, elle ne redessine pas une deuxieme carte. */
.lp-barre {
  border-top: 1px solid var(--lp-bord);
  padding: 16px 40px 20px;
}

.lp-barre_in { margin: 0; }

.lp-barre_corps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

/* Le bouton de repli ne sert que sur telephone. */
.lp-barre_ouvrir { display: none; }

/* L'en-tete du theme est en position:absolute : il flotte au-dessus du bandeau
   photo, dont le retrait haut est fige a 240 px. La barre ajoute de la hauteur
   a cet en-tete, donc le titre H1 passait DESSOUS. On redescend le bandeau
   d'autant. Mesure au navigateur : bas de l'en-tete a 333 px. */
.page-title { padding-top: 380px; }

.lp-barre_champ { flex: 1 1 200px; min-width: 0; }
.lp-barre_pre { flex: 1.6 1 260px; }

.lp-barre_champ label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a7a7a;
  margin: 0 0 6px;
}

.lp-barre select {
  font: inherit;
  font-size: 16px;               /* < 16px : iOS zoome tout seul au focus */
  width: 100%;
  height: 52px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--lp-bord);
  border-radius: 10px;
  background: #fff;
  color: var(--lp-noir);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23191919' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  /* sans cela, un nom de commune long elargit le select et casse la ligne */
  text-overflow: ellipsis;
}

.lp-barre select:focus {
  outline: none;
  border-color: var(--lp-orange);
  box-shadow: 0 0 0 3px rgba(255, 94, 20, .15);
}

.lp-barre select:disabled { background-color: #f7f7f7; color: #9a9a9a; }

.lp-barre_go {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: 10px;
  background: var(--lp-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.lp-barre_go:hover { background: var(--lp-noir); }

@media (max-width: 991px) {
  .lp-barre { padding: 12px 18px 14px; }
  .lp-barre_corps { gap: 12px; display: none; padding-top: 14px; }
  .lp-barre.ouverte .lp-barre_corps { display: flex; }
  .lp-barre_champ { flex: 1 1 100%; }
  .lp-barre_go { flex: 1 1 100%; }

  .lp-barre_ouvrir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--lp-bord);
    border-radius: 10px;
    background: #fff;
    color: var(--lp-noir);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .lp-barre_ouvrir svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .lp-barre.ouverte .lp-barre_ouvrir { border-color: var(--lp-orange); color: var(--lp-orange); }

  /* repliee, la barre n'ajoute que ~60 px : le bandeau reste raisonnable.
     Bas de l'en-tete mesure a 313 px, on laisse respirer. */
  .page-title { padding-top: 350px; }
}

/* --- Moteur de recherche ------------------------------------------------- */

.lp-recherche {
  background: var(--lp-noir);
  border-radius: 16px;
  padding: 32px 28px;
  margin: 0 0 45px;
  color: #fff;
}

.lp-recherche_titre {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #fff;
}

.lp-recherche_sous {
  font-size: 15px;
  color: #b9b9b9;
  margin: 0 0 22px;
}

.lp-recherche_champs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.lp-recherche select,
.lp-recherche input[type="search"] {
  font: inherit;
  font-size: 16px;               /* < 16px : iOS zoome tout seul au focus */
  height: 56px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 40px;
  background: #fff;
  color: var(--lp-noir);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.lp-recherche select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23191919' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}

.lp-recherche select:focus,
.lp-recherche input[type="search"]:focus {
  outline: none;
  border-color: var(--lp-orange);
}

.lp-champ-dep { flex: 1 1 210px; }
.lp-champ-pre { flex: 1 1 240px; }
.lp-champ-ville { flex: 2 1 260px; position: relative; }

.lp-go {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 34px;
  border: 0;
  border-radius: 40px;
  background: var(--lp-orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.lp-go:hover { background: #fff; color: var(--lp-noir); }

/* Liste de suggestions */
.lp-suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  overflow: hidden;
  display: none;
  max-height: 340px;
  overflow-y: auto;
}

.lp-suggestions.ouverte { display: block; }

.lp-suggestions li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  cursor: pointer;
  color: var(--lp-noir);
  border-bottom: 1px solid var(--lp-bord);
}

.lp-suggestions li:last-child { border-bottom: 0; }
.lp-suggestions li.actif,
.lp-suggestions li:hover { background: var(--lp-gris); }
.lp-suggestions .lp-n { font-weight: 600; }
.lp-suggestions .lp-cp { color: #7a7a7a; font-size: 14px; white-space: nowrap; }
.lp-suggestions .lp-vide { cursor: default; color: #7a7a7a; justify-content: flex-start; }
.lp-suggestions .lp-vide:hover { background: #fff; }

/* Rappel "vous cherchiez X" sur une page departement */
.lp-rappel {
  background: #fff4ee;
  border-left: 4px solid var(--lp-orange);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 0 30px;
}

.lp-rappel strong { color: var(--lp-noir); }

/* --- Barre d'appel fixe (mobile) ----------------------------------------- */

.lp-barre-appel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  background: var(--lp-noir);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .3);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}

.lp-barre-appel a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

.lp-barre-appel .lp-appel { background: var(--lp-orange); color: #fff; }
.lp-barre-appel .lp-devis { background: #fff; color: var(--lp-noir); }
.lp-barre-appel svg { width: 19px; height: 19px; flex: 0 0 auto; }

@media (max-width: 991px) {
  .lp-barre-appel { display: flex; }
  /* sans cela, la barre masque la fin du pied de page */
  body { padding-bottom: 78px; }
}

/* Sur un telephone etroit, "Appeler maintenant" passait sur deux lignes.
   Un bouton d'appel qui se casse en deux inspire mal confiance. */
@media (max-width: 430px) {
  .lp-barre-appel { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .lp-barre-appel a { font-size: 15px; gap: 7px; white-space: nowrap; }
  .lp-barre-appel svg { width: 17px; height: 17px; }
}

@media (max-width: 360px) {
  .lp-barre-appel a { font-size: 14px; }
}

/* Numero toujours visible en haut de page */
.lp-tel-bandeau {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 24px;
  border-radius: 40px;
  background: var(--lp-orange);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}

.lp-tel-bandeau:hover { background: #fff; color: var(--lp-noir); }
.lp-tel-bandeau svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
  .lp-tel-bandeau { font-size: 18px; padding: 10px 18px; }
  .lp-recherche { padding: 24px 18px; }
  .lp-recherche_titre { font-size: 20px; }
  .lp-go { width: 100%; }
}

/* --- Formulaire de devis -------------------------------------------------- */

.lp-devis-form {
  background: #fff;
  border: 1px solid var(--lp-bord);
  border-radius: 16px;
  padding: 34px 30px;
}

.lp-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.lp-grille .lp-pleine { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .lp-grille { grid-template-columns: 1fr; }
  .lp-devis-form { padding: 24px 18px; }
}

.lp-champ label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  margin: 0 0 7px;
}

.lp-champ .lp-oblig { color: var(--lp-orange); }

.lp-champ input,
.lp-champ select,
.lp-champ textarea {
  font: inherit;
  font-size: 16px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--lp-bord);
  border-radius: 10px;
  background: #fff;
  color: var(--lp-noir);
}

.lp-champ textarea { min-height: 130px; resize: vertical; }

.lp-champ input:focus,
.lp-champ select:focus,
.lp-champ textarea:focus {
  outline: none;
  border-color: var(--lp-orange);
  box-shadow: 0 0 0 3px rgba(255, 94, 20, .15);
}

.lp-champ input[aria-invalid="true"],
.lp-champ select[aria-invalid="true"],
.lp-champ textarea[aria-invalid="true"] { border-color: #d33; }

.lp-erreur {
  display: none;
  color: #d33;
  font-size: 13px;
  margin-top: 6px;
}

.lp-champ.en-erreur .lp-erreur { display: block; }

/* Zone photos */
.lp-photos {
  border: 2px dashed var(--lp-bord);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  background: #fafafa;
}

.lp-photos.survol { border-color: var(--lp-orange); background: #fff4ee; }
.lp-photos input[type="file"] { display: none; }

.lp-photos_bouton {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 40px;
  background: var(--lp-noir);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.lp-photos_aide { display: block; margin-top: 10px; font-size: 13px; color: #7a7a7a; }

.lp-apercus {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}

.lp-apercus figure {
  position: relative;
  margin: 0;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: #ddd;
}

.lp-apercus img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-apercus button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.lp-envoyer {
  width: 100%;
  height: 60px;
  border: 0;
  border-radius: 40px;
  background: var(--lp-orange);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.lp-envoyer:hover { background: var(--lp-noir); }
.lp-envoyer[disabled] { opacity: .6; cursor: progress; }

.lp-note {
  font-size: 13px;
  color: #7a7a7a;
  margin-top: 16px;
  text-align: center;
}

.lp-message {
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 24px;
  font-size: 16px;
}

.lp-message.ok { background: #eaf7ed; border-left: 4px solid #2e9e4f; }
.lp-message.ko { background: #fdecec; border-left: 4px solid #d33; }

/* le piege a robots : invisible pour l'humain, rempli par les automates */
.lp-tonneau {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Bandeau de demonstration (uniquement sur la copie de presentation) --- */

.lp-demo-bandeau {
  background: #191919;
  color: #fff;
  text-align: center;
  padding: 13px 18px;
  font-size: 15px;
  line-height: 1.45;
  position: relative;
  z-index: 1000;
}

.lp-demo-bandeau strong { color: var(--lp-orange); }

@media (max-width: 767px) {
  .lp-demo-bandeau { font-size: 13px; padding: 10px 12px; }
}

/* ===================================================================
   Page de resultats et inscription des professionnels

   Le theme remet list-style:none et des marges a zero un peu partout ;
   tout ce qui suit est donc ecrit sans dependre de lui.
   =================================================================== */

.lp-resultats { margin: 0 0 46px; }

.lp-res-attente { color: #777; font-style: italic; }

.lp-res_titre {
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--lp-noir);
}

.lp-res_compte { color: #666; margin: 0 0 22px; }

.lp-res_liste { display: grid; gap: 18px; }

.lp-pro {
  border: 1px solid var(--lp-bord);
  border-left: 4px solid var(--lp-orange);
  border-radius: 8px;
  padding: 22px 24px;
  background: #fff;
}

.lp-pro_tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.lp-pro_nom { font-size: 20px; margin: 0; color: var(--lp-noir); }

.lp-pro_verif {
  background: #eaf7ed;
  color: #1d7a3a;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 600;
}

.lp-pro_depuis { color: #777; font-size: 14px; margin: 0 0 10px; }
.lp-pro_texte { margin: 0 0 12px; line-height: 1.6; }
.lp-pro_machines { margin: 0 0 16px; font-size: 15px; }

.lp-pro_actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.lp-res_bouton {
  display: inline-block;
  background: var(--lp-orange);
  color: #fff !important;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none !important;
}

.lp-res_bouton:hover { background: var(--lp-noir); color: #fff !important; }

.lp-res_lien {
  display: inline-block;
  color: var(--lp-noir) !important;
  padding: 12px 4px;
  font-weight: 600;
  text-decoration: underline !important;
}

.lp-res_lien:hover { color: var(--lp-orange) !important; }

.lp-res_dediee,
.lp-res_vide,
.lp-res_pro {
  border-radius: 8px;
  padding: 24px 26px;
  margin: 0 0 22px;
}

.lp-res_dediee { background: #eaf7ed; border: 1px solid #cbe6d3; }
.lp-res_vide { background: var(--lp-gris); border: 1px solid var(--lp-bord); }

.lp-res_vide h3,
.lp-res_pro h3 { margin: 0 0 10px; font-size: 19px; color: var(--lp-noir); }

.lp-res_vide p,
.lp-res_dediee p { margin: 0 0 16px; line-height: 1.6; }

.lp-res_pro {
  background: var(--lp-noir);
  margin-top: 34px;
}

.lp-res_pro h3 { color: #fff; }
.lp-res_pro p { color: #cfcfcf; margin: 0 0 16px; line-height: 1.6; }
.lp-res_pro .lp-res_lien { color: #fff !important; }
.lp-res_pro .lp-res_lien:hover { color: var(--lp-orange) !important; }

/* --- inscription des professionnels --- */

.lp-intro-pro { margin: 0 0 30px; }
.lp-intro-pro p { line-height: 1.7; margin: 0 0 14px; }

.lp-cases {
  border: 1px solid var(--lp-bord);
  border-radius: 8px;
  padding: 18px 20px 20px;
  margin: 6px 0 4px;
}

.lp-cases legend {
  font-weight: 700;
  color: var(--lp-noir);
  padding: 0 8px;
  font-size: 16px;
  width: auto;
  border: 0;
  margin: 0;
}

.lp-cases .lp-note { margin: 0 0 12px; }

.lp-case {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 10px 0;
  font-weight: 400;
  cursor: pointer;
}

.lp-case input { width: auto; margin: 0; }

@media (max-width: 767px) {
  .lp-res_titre { font-size: 21px; }
  .lp-pro { padding: 18px 16px; }
  .lp-res_dediee, .lp-res_vide, .lp-res_pro { padding: 18px 16px; }
  /* sur telephone les deux actions se suivent au lieu de se serrer */
  .lp-pro_actions { flex-direction: column; align-items: stretch; }
  .lp-pro_actions .lp-res_bouton { text-align: center; }
  .lp-case { display: flex; margin-right: 0; }
}

/* --- Debordement horizontal de 7 px sur telephone -------------------------
   Le theme laisse les champs de formulaire en box-sizing:content-box : la
   largeur demandee s'AJOUTE au padding et a la bordure. Un champ a 100 % dans
   un conteneur de 266 px occupe donc 300 px, et toute la page glisse de 7 px
   a 320 px de large.

   Mesure au navigateur : deja le cas sur devis.html AVANT cette livraison,
   donc sur le site en ligne. Ce n'est pas une regression, c'est un defaut
   existant qu'on corrige au passage.

   Correction volontairement limitee a MES formulaires : passer tout le theme
   en border-box deplacerait des elements qui ne m'appartiennent pas.
   ------------------------------------------------------------------------- */
.lp-grille input,
.lp-grille select,
.lp-grille textarea,
.lp-devis-form input,
.lp-devis-form select,
.lp-devis-form textarea,
.lp-barre_champ select {
  box-sizing: border-box;
  max-width: 100%;
}

/* la case a cocher garde sa taille propre : border-box ne doit pas l'etirer */
.lp-case input { box-sizing: content-box; max-width: none; }

/* --- mentions legales + declarations professionnelles --------------------- */
/* Ajout du 18/08 : le site est un service de mise en relation, il doit dire
   qui l'edite et ce qu'il fait des donnees. Pages de texte, donc largeur de
   lecture limitee : au-dela de ~75 caracteres par ligne l'oeil se perd. */
.lp-legal { max-width: 46rem; margin: 0 auto; padding: 10px 0 40px; }
.lp-legal h2 { font-size: 22px; margin: 34px 0 12px; line-height: 1.3; }
.lp-legal h2:first-child { margin-top: 0; }
.lp-legal p { margin: 0 0 14px; line-height: 1.7; }
.lp-legal a { text-decoration: underline; }
.lp-legal_liste { list-style: none; margin: 0 0 14px; padding: 0; }
.lp-legal_liste li { padding: 7px 0; border-bottom: 1px solid rgba(128,128,128,.22); line-height: 1.6; }
.lp-legal_liste li:last-child { border-bottom: 0; }

.lp-declarations .lp-case { align-items: flex-start; line-height: 1.55; margin-bottom: 12px; }
.lp-declarations .lp-case input { margin-top: 4px; flex: 0 0 auto; }
.lp-declarations .lp-erreur { display: none; }
.lp-declarations.en-erreur { outline: 2px solid #c0392b; outline-offset: 6px; }
.lp-declarations.en-erreur .lp-erreur { display: block; margin-top: 6px; }

.lp-note_rgpd { opacity: .85; }

.lp-pro_siret, .lp-pro_assurance { margin: 4px 0 0; font-size: 14px; opacity: .9; }
.lp-atrou { background: #ffe08a; color: #4a3600; padding: 1px 8px; border-radius: 3px; font-style: italic; }
/* L'asterisque doit suivre le texte de la case, pas partir a droite du bloc :
   .lp-case est un flex, l'element libre etait pousse en bout de ligne. */
.lp-declarations .lp-case { flex-wrap: nowrap; }
.lp-declarations .lp-case .lp-oblig { order: -1; margin: 0 4px 0 0; align-self: flex-start; }

/* Liste complete des communes du departement (methode validee par Victor sur
   annoncesservices.fr). Texte brut volontairement : 500 liens internes sur une
   page, c'est le signal « page satellite ». Plus discret que la liste
   principale, qui elle sert vraiment a naviguer. */
.lp-communes_autres { font-size: 14px; line-height: 1.9; opacity: .72; }

/* ------------------------------------------------------------------
   Le champ de lieu unique de la barre d'en-tete.

   Il remplace les deux listes « Département » et « Ville » : on tape une
   ville, un departement, une region ou un code postal, et les propositions
   arrivent en dessous. Il reprend exactement l'aspect des listes qu'il
   remplace, sans la fleche (ce n'est plus un menu).
   ------------------------------------------------------------------ */
.lp-barre_lieu {
  flex: 2 1 300px;
  /* les propositions sont en position absolue : sans ce repere, elles se
     placeraient par rapport a la page et non sous le champ */
  position: relative;
}

.lp-barre input.lp-barre-lieu {
  font: inherit;
  font-size: 16px;               /* < 16px : iOS zoome tout seul au focus */
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--lp-bord);
  border-radius: 10px;
  background: #fff;
  color: var(--lp-noir);
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}

.lp-barre input.lp-barre-lieu::placeholder { color: #9a9a9a; }

.lp-barre input.lp-barre-lieu:focus {
  outline: none;
  border-color: var(--lp-orange);
  box-shadow: 0 0 0 3px rgba(255, 94, 20, .15);
}

/* Chrome ajoute sa propre croix dans les champs de type search : elle double
   celle du clavier sur telephone et decale le texte. */
.lp-barre input.lp-barre-lieu::-webkit-search-decoration,
.lp-barre input.lp-barre-lieu::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* La barre vit dans un en-tete a fond sombre : la liste doit passer au-dessus
   du bandeau photo qui suit, et rester lisible. */
.lp-barre_lieu .lp-suggestions { z-index: 60; }


/* Le bandeau collant (.header-lower, position:fixed) avait un fond blanc a
   87 % d'opacite et aucun flou : au defilement, le texte de la page se lisait
   a travers le menu. Fond plein + une ombre pour detacher le bandeau. */
.main-header .header-lower{background:#fff}
.main-header.fixed-header .header-lower{box-shadow:0 2px 18px rgba(0,0,0,.10)}