/* Moteur de recherche (v2) — barre de recherche partagée.
   Historique : d'abord ajoutée sur l'accueil (scopée sous .mrv2), puis
   réutilisée sur les pages thème / produit (nationales) et région x thème /
   région x produit. N'affecte pas les pages qui réutilisent
   #grandeImageAccueil / #recherche sans la classe .mrv2. */

#grandeImageAccueil.mrv2 {
    height: auto;
    max-height: none;
    padding: 0 0 40px;
}

.mrv2-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.mrv2-head {
    padding-bottom: 20px;
}

h1.mrv2-titre {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -.01em;
    color: #242320;
}

p.mrv2-sous {
    margin: 0;
    color: var(--gris-foncee);
    font-size: 15px;
}

.mrv2-hero {
    position: relative;
    width: 100%;
    height: var(--height-grande-image, 320px);
    max-height: 400px;
}

.mrv2-hero #slideur {
    height: 100%;
    overflow: hidden;
}

/* Pages thème / produit : bannière unique (pas de slideur) directement dans le hero. */
.mrv2-hero > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mrv2-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 18, 12, .28) 0%, rgba(20, 18, 12, 0) 38%, rgba(20, 18, 12, .10) 70%, rgba(20, 18, 12, .35) 100%);
}

.mrv2-search-wrap {
    position: relative;
    margin-top: -65px;
    z-index: 2;
}

.mrv2-search-wrap #recherche {
    position: static;
    height: auto;
    display: block;
}

.mrv2-search-wrap #recherche .content {
    background: #fff;
    min-width: 0;
    width: 100%;
    display: block;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 12px 30px -12px rgba(36, 35, 32, .35);
}

.mrv2-search-wrap #recherche form {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    justify-content: flex-start;
    margin: 0;
}

.mrv2-search-wrap #recherche .input {
    display: flex;
    flex: 1;
    gap: 12px;
    border: 0;
    align-items: stretch;
}

.mrv2-search-wrap #recherche #recherche_ville {
    position: relative;
    flex: 1;
    min-width: 0;
}

.mrv2-search-wrap #recherche .bloc_input_form {
    margin: 0;
    height: 100%;
}

.mrv2-search-wrap #recherche .recherche_ville_input {
    height: 100%;
    border: 1px solid var(--gris);
    border-radius: 10px;
    padding: 12px 14px 12px 44px;
    font: 600 15px 'Open Sans', sans-serif;
    color: #242320;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E9B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11z'/><circle cx='12' cy='10' r='2.6'/></svg>") no-repeat 14px center / 20px 20px;
    transition: border-color .15s, box-shadow .15s;
}

.mrv2-search-wrap #recherche .recherche_ville_input:focus {
    border-color: var(--vert);
    box-shadow: 0 0 0 3px var(--vert-soft);
    outline: none;
}

.mrv2-search-wrap #recherche .new_form_aff {
    left: 44px;
    font-size: 12px;
    color: var(--gris-foncee);
}

.mrv2-search-wrap #recherche #gps_icon {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mrv2-search-wrap #recherche #ville_sugg.sugg {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    border: 1px solid var(--gris);
    border-radius: 12px;
    box-shadow: 0 20px 40px -16px rgba(36, 35, 32, .35);
    padding: 6px;
}

.mrv2-search-wrap #recherche #ville_sugg.sugg .select {
    padding: 9px 10px;
    border-radius: 8px;
}

.mrv2-search-wrap #recherche #ville_sugg.sugg .select:hover {
    background: var(--vert-soft);
    color: #242320;
}

.mrv2-search-wrap #recherche #rayon_gps {
    box-sizing: border-box;
    position: relative;
    flex: none;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--gris);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E9B47' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='7'/><circle cx='12' cy='12' r='1.6' fill='%234E9B47' stroke='none'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3'/></svg>") no-repeat 14px center / 20px 20px;
    padding: 8px 34px 8px 44px;
}

.mrv2-search-wrap #recherche #rayon_gps::before {
    content: "Rayon";
    font-size: 12px;
    color: var(--gris-foncee);
    line-height: 1.2;
}

.mrv2-search-wrap #recherche #rayon_gps::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23535353' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / 16px 16px;
}

.mrv2-search-wrap #recherche #rayon_gps > select#rayon {
    border: 0 !important;
    outline: 0;
    background: none;
    appearance: none;
    font: 600 15px 'Open Sans', sans-serif;
    color: #242320;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
}

.mrv2-search-wrap #recherche form > button[type="submit"] {
    flex: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--vert);
    color: #fff;
    font: 700 15px 'Open Sans', sans-serif;
    white-space: nowrap;
}

.mrv2-search-wrap #recherche form > button[type="submit"]:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M16.5 16.5L21 21'/></svg>") no-repeat center / 18px 18px;
    position: static;
    margin: 0;
    transform: none;
    padding: 0;
}

.mrv2-search-wrap #recherche form > button[type="submit"]:hover {
    background: #437f39;
}

/* Bandeau moteur v2 des pages région x thème / région x produit : rendu hors
   de #body-content (cf. views/region.php) pour occuper toute la largeur, comme
   #grandeImageAccueil.mrv2 sur l'accueil. On y rétablit les règles du fil
   d'Ariane qui étaient scopées sous #body-content dans global.css. */
.mrv2-topband {
    width: 100%;
}

.mrv2-topband #fil_ariane {
    max-width: 1200px;
    margin: 0 auto 5px;
    padding: 10px 10px 0;
    box-sizing: border-box;
}

.mrv2-topband #fil_ariane > div {
    margin: 0;
}

.mrv2-topband #fil_ariane > div > div {
    display: inline-block;
}

/* Fil d'Ariane superposé en haut de la bannière (desktop). Le dégradé
   .mrv2-scrim assombrit déjà le haut de la photo ; on ajoute une ombre de
   texte pour la lisibilité. Sous 820px la bannière est masquée : le fil
   d'Ariane repasse dans le flux normal (aucune règle absolue ici). */
.mrv2-topband.has-hero {
    position: relative;
}

@media all and (min-width: 821px) {
    .mrv2-topband.has-hero #fil_ariane {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 3;
        padding-top: 12px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }

    .mrv2-topband.has-hero #fil_ariane,
    .mrv2-topband.has-hero #fil_ariane a {
        color: #fff;
    }

    .mrv2-topband.has-hero #fil_ariane span[style] {
        color: rgba(255, 255, 255, .7) !important;
    }
}

@media all and (max-width: 550px) {
    .mrv2-topband #fil_ariane {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mrv2-topband #fil_ariane::-webkit-scrollbar {
        display: none;
    }

    .mrv2-topband #fil_ariane > div {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Variante « inline » : moteur v2 posé sous le fil d'Ariane, sans bandeau photo
   quand aucune bannière n'est disponible (cf. views/include/fil_ariane.php). */
.mrv2-inline {
    margin: 12px 0 24px;
}

.mrv2-inline .mrv2-search-wrap {
    margin-top: 0;
}

/* Avec bannière : on retrouve le chevauchement carte / photo de l'accueil.
   Uniquement au-dessus de 820px : en dessous le bandeau photo est masqué
   (cf. media query plus bas) et la carte doit rester sous le fil d'Ariane. */
.mrv2-inline.has-hero {
    margin-top: 0;
}

@media all and (min-width: 821px) {
    .mrv2-inline.has-hero .mrv2-search-wrap {
        margin-top: -65px;
    }
}

.mrv2-inline .mrv2-head .mrv2-sous {
    margin-top: 8px;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.mrv2-inline #recherche #nav_carte_liste {
    margin-top: 10px;
}

@media all and (max-width: 820px) {

    #grandeImageAccueil.mrv2 {
        padding: 0 0 40px;
    }

    .mrv2-inner {
        padding: 0 16px;
        margin-bottom: 10px;
    }

    h1.mrv2-titre {
        font-size: 24px;
    }

    /* Sur mobile, pas d'image de fond : le bandeau photo est retiré et le texte n'est plus encarté dans un bloc superposé à l'image. */
    .mrv2-hero {
        display: none;
    }

    .mrv2-search-wrap {
        margin-top: 0;
    }

    .mrv2-search-wrap #recherche .content {
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }


    /* Ville sur sa propre ligne ; rayon + bouton "Rechercher" partagent la ligne suivante. */
    .mrv2-search-wrap #recherche form {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mrv2-search-wrap #recherche .input {
        display: contents;
    }

    .mrv2-search-wrap #recherche #recherche_ville {
        flex: 1 1 100%;
    }

    .mrv2-search-wrap #recherche #rayon_gps {
        flex: 1 1 0;
        width: auto;
    }

    .mrv2-search-wrap #recherche form > button[type="submit"] {
        flex: 1 1 0;
        padding: 14px;
    }
}

@media all and (max-width: 820px) {
    .mrv2-inline {
        margin: 8px 0 16px;
    }
}