/* ============================================================
 * css_public.css
 *
 * Site public (home, fiches annonces, recherche, ville, dpt, recherche_pour_vous, dispos) + banner d'impersonation + badge admin (visibles SI admin connecté)
 * ============================================================ */

/* =====================================================================
   CSS CUSTOM PROPERTIES — design tokens partagés
   ---------------------------------------------------------------------
   Variables définies une fois ici, réutilisables dans les <style> des
   partials via var(--mh-…). Rebrand = 1 seule ligne à changer.
   Compatible IE11+ (Edge, Chrome, FF, Safari = 100% du parc 2025).
   ===================================================================== */
:root {
    /* Couleurs marque ----------------------------------------------- */
    --mh-blue:        #0E5B95;   /* couleur principale, menu, liens, h1ville */
    --mh-blue-light:  #1B8DCC;   /* hover / accent */
    --mh-blue-dark:   #0a4a7a;   /* hover de boutons */
    --mh-pink:        #d63862;   /* cœur favoris */
    --mh-pink-dark:   #b32f5c;   /* tag ville sur les cards annonce */
    --mh-orange:      #e07b00;   /* puce annonces dans l'autocomplétion */
    --mh-gold:        #d4a017;   /* badge "tête de liste" (star=8) */
    --mh-green:       #5e8a3a;   /* badge "sponsorisée" (star=6) */
    --mh-red:         #B20606;   /* CTA contact (legacy) */

    /* Tons neutres -------------------------------------------------- */
    --mh-text:        #222;      /* texte principal */
    --mh-text-muted:  #666;      /* texte secondaire */
    --mh-text-faint:  #999;      /* placeholder, italique */
    --mh-bg:          #fff;
    --mh-bg-soft:     #f4f6f8;   /* fond filtres, sections */
    --mh-bg-softer:   #f7f9fc;   /* fond légende carte, badges */
    --mh-bg-header:   #e5e5e5;   /* header gris des cards annonce */
    --mh-border:      #e2e2e2;   /* border standard des cards */
    --mh-border-soft: #dde3e8;   /* border filtres / carte */
    --mh-gray-tag:    #6e6e6e;   /* fond gris des tags type / prix */

    /* Espacements --------------------------------------------------- */
    --mh-gap-xs:      6px;
    --mh-gap-sm:      8px;
    --mh-gap-md:      14px;
    --mh-gap-lg:      18px;
    --mh-gap-xl:      24px;

    /* Coins arrondis ------------------------------------------------ */
    --mh-radius-sm:   4px;       /* boutons, inputs */
    --mh-radius:      6px;       /* tags, boutons principaux */
    --mh-radius-lg:   8px;       /* cards, blocs */
    --mh-radius-pill: 22px;      /* tabs pill (insolite) */

    /* Ombres -------------------------------------------------------- */
    --mh-shadow-card: 0 4px 16px rgba(0,0,0,.18);
    --mh-shadow-soft: 0 1px 3px rgba(0,0,0,.15);
}

.bouton_contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: var(--mh-red);
    font-weight: bold;
    font-size: 17px;
    padding: 15px 30px;
    border: 3px solid var(--mh-red);
    border-radius: var(--mh-radius-lg);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 260px;
    margin-left: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box; /* Ajout important */
}

.bouton_contact:hover {
    background: var(--mh-red);
    color: white;
    transform: scale(1.05);
}

.bouton_contact i {
    margin-right: 10px;
    font-size: 20px;
}

@media (max-width: 768px) {
    .bouton_contact {
        width: calc(100% - 20px);
        max-width: 320px;
        min-width: unset;
        margin-left: 10px;
        margin-right: 10px;
        font-size: 16px;
        padding: 12px 20px;
    }
}


.form_n {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 300px;
  margin:auto;
  text-align:left;
}


@media (min-width:640px){
	
	.form_n {
  width: 70%;
  max-width: 70%
}
	
}

.form_n label {
  margin-top: 1rem;
  font-weight: bold;
  color: #2f3640;
}

.form_n input,
.form_n textarea {
  margin-top: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #dcdde1;
  border-radius: 5px;
  font-size: 1rem;
}


.form_n button {
  margin-top: 1.5rem;
  padding: 0.8rem;
  border: none;
  background-color: #40729e;
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form_n button:hover {
  background-color: #273c70;
}

.form_n select {margin-top:10px;padding:10px;border:3px solid #E4E4E4}

.rec{font-weight:bold !important;background-color:var(--mh-blue-light);color:#FFF;border-radius:7px;font-size:16px;padding-top:8px;padding-bottom:8px}
.rec:hover{color:#000;cursor:pointer}
.gri{text-align:center;margin:auto;width:165px;margin-top:10px;font-size:16px;background-color:#545759;font-weight:bold !important;}
.retuu{display:inline}
.retuu2{display:block}
.a_mm{color:white;text-decoration:none;font-weight:bold !important;font-size:16px;position: relative; display: block; text-align: center; padding-left: 30px;}
.a_mm i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.annonce2{font-size:11px}
.tello{font-weight:bold;font-size:14px}
.cocoo{text-align:center;margin:auto;margin-top:25px;font-size:14px;background:white;width:85%;padding-top:10px;padding-bottom:10px}
@media (max-width:640px){
	.cocoo{margin-top:15px;width:95%}

}
.col_choix{margin:auto;text-align:center}
.col_gauche_choix{display: inline-block;padding-left:0px}
.col_droit_choix{display: inline-block;margin-left:20px}
.rouge{background-color:#B20606}
.tab_pho{width:100%}
.tab_bou{width:100%}

h1{display:block;font-size:32px;font-weight: 700;line-height: 1.2;color #1a1a1a;margin: 20px 0 16px 0;letter-spacing: -0.5px;word-wrap: break-word;overflow-wrap: break-word;max-width:100%}
.bread{display:inline}
a{color:var(--mh-blue);text-decoration:none}
a:hover{color:red}
blockquote:before,blockquote:after,q:before,q:after{content:""}
#backgroundPopup{display:none;position:fixed;height:100%;width:100%;top:0;left:0;background:#000;border:1px solid #cecece;z-index:1}
#popupContact{display:none;position:fixed;height:200px;width:508px;background:#FFF;border:2px solid #cecece;z-index:2;font-size:13px;padding:12px}
#popupContact h1{text-align:left;color:#6FA5FD;font-size:22px;font-weight:700;border-bottom:1px dotted #D3D3D3;padding-bottom:2px;margin-bottom:20px}
#popupContactClose{font-size:14px;line-height:14px;right:6px;top:4px;position:absolute;color:#6fa5fd;font-weight:700;display:block}
#screenshot{position:absolute;border:1px solid #ccc;background:#333;display:none;color:#fff;padding:5px}
#preview{position:absolute;border:1px solid #ccc;background:#333;display:none;color:#fff;font-size:15px;border-radius:7px;padding:5px}
#tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;color:#333;display:none;padding:2px 5px}
.ui-helper-hidden-accessible{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0}
.ui-helper-reset{border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none;margin:0;padding:0}
.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}
.ui-helper-clearfix{min-height:0}
.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0}
.ui-front{z-index:100}
.ui-state-disabled{cursor:default!important}
.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat;width:16px;height:16px;background-position:16px 16px}
.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#aaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3}
.ui-accordion .ui-accordion-header{display:block;cursor:pointer;position:relative;margin-top:2px;min-height:0;padding:.5em .5em .5em .7em}
.ui-accordion .ui-accordion-noicons{padding-left:.7em}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon{position:absolute;left:.5em;top:50%;margin-top:-8px}
.ui-accordion .ui-accordion-content{border-top:0;overflow:auto;padding:1em 2.2em}
.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}
.ui-button{display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;overflow:visible;padding:0}
.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}
.ui-button-icon-only{width:2.2em}
button.ui-button-icon-only{width:2.4em}
.ui-button-icons-only{width:3.4em}
button.ui-button-icons-only{width:3.7em}
.ui-button .ui-button-text{display:block;line-height:normal}
.ui-button-icon-only .ui-button-text,.ui-button-icons-only .ui-button-text{text-indent:-9999999px;padding:.4em}
.ui-button-text-icon-primary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 1em .4em 2.1em}
.ui-button-text-icon-secondary .ui-button-text,.ui-button-text-icons .ui-button-text{padding:.4em 2.1em .4em 1em}
.ui-button-text-icons .ui-button-text{padding-left:2.1em;padding-right:2.1em}
.ui-button-icon-only .ui-icon,.ui-button-text-icon-primary .ui-icon,.ui-button-text-icon-secondary .ui-icon,.ui-button-text-icons .ui-icon,.ui-button-icons-only .ui-icon{position:absolute;top:50%;margin-top:-8px}
.ui-button-icon-only .ui-icon{left:50%;margin-left:-8px}
.ui-button-text-icon-primary .ui-button-icon-primary,.ui-button-text-icons .ui-button-icon-primary,.ui-button-icons-only .ui-button-icon-primary{left:.5em}
.ui-button-text-icon-secondary .ui-button-icon-secondary,.ui-button-text-icons .ui-button-icon-secondary,.ui-button-icons-only .ui-button-icon-secondary{right:.5em}
.ui-buttonset{margin-right:7px}
.ui-buttonset .ui-button{margin-left:0;margin-right:-.3em}
input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner{border:0;padding:0}
.ui-datepicker{background-color:#FFF;width:17em;display:none;padding:.2em .2em 0}
.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}
.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}
.ui-datepicker .ui-datepicker-prev{left:2px}
.ui-datepicker .ui-datepicker-next{right:2px}
.ui-datepicker .ui-datepicker-prev-hover{left:1px}
.ui-datepicker .ui-datepicker-next-hover{right:1px}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}
.ui-datepicker .ui-datepicker-title{line-height:1.8em;text-align:center;margin:0 2.3em}
.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:49%}
.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}
.ui-datepicker th{text-align:center;font-weight:bold;border:0;padding:.7em .3em}
.ui-datepicker td{border:0;padding:1px}
.ui-datepicker td span,.ui-datepicker td a{display:block;text-align:right;text-decoration:none;padding:.2em}
.ui-datepicker .ui-datepicker-buttonpane{background-image:none;border-left:0;border-right:0;border-bottom:0;margin:.7em 0 0;padding:0 .2em}
.ui-datepicker .ui-datepicker-buttonpane button{float:right;cursor:pointer;width:auto;overflow:visible;margin:.5em .2em .4em;padding:.2em .6em .3em}
.ui-datepicker.ui-datepicker-multi{width:auto}
.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}
.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}
.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}
.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}
.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}
.ui-datepicker-row-break{clear:both;width:100%;font-size:0}
.ui-datepicker-rtl{direction:rtl}
.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}
.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}
.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}
.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}
.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}
.ui-dialog{position:absolute;top:0;left:0;outline:0;padding:.2em}
.ui-dialog .ui-dialog-titlebar{position:relative;padding:.4em 1em}
.ui-dialog .ui-dialog-title{float:left;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis;margin:.1em 0}
.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:21px;height:20px;margin:-10px 0 0;padding:1px}
.ui-dialog .ui-dialog-content{position:relative;border:0;background:none;overflow:auto;padding:.5em 1em}
.ui-dialog .ui-dialog-buttonpane{text-align:left;background-image:none;margin-top:.5em;border-width:1px 0 0;padding:.3em 1em .5em .4em}
.ui-dialog .ui-dialog-buttonpane button{cursor:pointer;margin:.5em .4em .5em 0}
.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}
.ui-draggable .ui-dialog-titlebar{cursor:move}
.ui-menu{list-style:none;display:block;outline:none;margin:0;padding:2px}
.ui-menu .ui-menu{margin-top:-3px;position:absolute}
.ui-menu .ui-menu-item{width:100%;margin:0;padding:0}
.ui-menu .ui-menu-divider{height:0;font-size:0;line-height:0;border-width:1px 0 0;margin:5px -2px}
.ui-menu .ui-menu-item a{text-decoration:none;display:block;line-height:1.5;min-height:0;font-weight:normal;padding:2px .4em}
.ui-menu .ui-menu-item a.ui-state-focus,.ui-menu .ui-menu-item a.ui-state-active{font-weight:normal;margin:-1px}
.ui-menu .ui-state-disabled{font-weight:normal;line-height:1.5;margin:.4em 0 .2em}
.ui-menu .ui-state-disabled a{cursor:default}
.ui-menu-icons .ui-menu-item a{position:relative;padding-left:2em}
.ui-menu .ui-icon{position:absolute;top:.2em;left:.2em}
.ui-menu .ui-menu-icon{position:static;float:right}
.ui-progressbar{height:2em;text-align:left;overflow:hidden}
.ui-progressbar .ui-progressbar-value{height:100%;margin:-1px}
.ui-progressbar .ui-progressbar-overlay{background:url(images/animated-overlay.gif);height:100%;opacity:0.25}
.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}
.ui-resizable-handle{position:absolute;font-size:.1px;display:block}
.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}
.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}
.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}
.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}
.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}
.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}
.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}
.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}
.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted #000}
.ui-slider{position:relative;text-align:left}
.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default}
.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}
.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}
.ui-slider-horizontal{height:.8em}
.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}
.ui-slider-horizontal .ui-slider-range{top:0;height:100%}
.ui-slider-horizontal .ui-slider-range-max{right:0}
.ui-slider-vertical{width:.8em;height:100px}
.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}
.ui-slider-vertical .ui-slider-range{left:0;width:100%}
.ui-spinner{position:relative;display:inline-block;overflow:hidden;vertical-align:middle;padding:0}
.ui-spinner-input{border:none;background:none;color:inherit;vertical-align:middle;margin:.2em 22px .2em .4em;padding:0}
.ui-spinner-button{width:16px;height:50%;font-size:.5em;text-align:center;position:absolute;cursor:default;display:block;overflow:hidden;right:0;margin:0;padding:0}
.ui-spinner a.ui-spinner-button{border-top:none;border-bottom:none;border-right:none}
.ui-spinner .ui-icon{position:absolute;margin-top:-8px;top:50%;left:0}
.ui-spinner .ui-icon-triangle-1-s{background-position:-65px -16px}
.ui-tabs{position:relative;padding:.2em}
.ui-tabs .ui-tabs-nav{margin:0;padding:.2em .2em 0}
.ui-tabs .ui-tabs-nav li{list-style:none;float:left;position:relative;top:0;border-bottom:0;white-space:nowrap;margin:1px .2em 0 0;padding:0}
.ui-tabs .ui-tabs-nav li a{float:left;text-decoration:none;padding:.5em 1em}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{margin-bottom:-1px;padding-bottom:1px}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,.ui-tabs .ui-tabs-nav li.ui-state-disabled a,.ui-tabs .ui-tabs-nav li.ui-tabs-loading a{cursor:text}
.ui-tabs .ui-tabs-panel{display:block;background:none;border-width:0;padding:1em 1.4em}
.ui-tooltip{position:absolute;z-index:9999;max-width:300px;box-shadow:0 0 5px #aaa;padding:8px}
.body .ui-tooltip{border-width:2px}
.ui-widget{font-size:12px}
.ui-widget .ui-widget{font-size:1em}
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-size:1em}
.ui-widget-content{border:1px solid #aaa;color:#222}
.ui-widget-header{border:1px solid #aaa;color:#222;font-weight:bold}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;font-weight:normal;color:#555}
.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#555;text-decoration:none}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #999;background:#dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;font-weight:normal;color:#212121}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #aaa;background:#fff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;font-weight:normal;color:#212121}
.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fcefa1;background:#fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;color:#363636}
.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}
.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;color:#cd0a0a}
.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;font-weight:normal}
.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;background-image:none}
.ui-state-default .ui-icon{background-image:url(images/ui-icons_888888_256x240.png)}
.ui-state-highlight .ui-icon{background-image:url(images/ui-icons_2e83ff_256x240.png)}
.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(images/ui-icons_cd0a0a_256x240.png)}
.ui-icon-triangle-1-n{background-position:0 -16px}
.ui-icon-triangle-1-ne{background-position:-16px -16px}
.ui-icon-triangle-1-e{background-position:-32px -16px}
.ui-icon-triangle-1-se{background-position:-48px -16px}
.ui-icon-triangle-1-s{background-position:-64px -16px}
.ui-icon-triangle-1-sw{background-position:-80px -16px}
.ui-icon-triangle-1-w{background-position:-96px -16px}
.ui-icon-triangle-1-nw{background-position:-112px -16px}
.ui-icon-triangle-2-n-s{background-position:-128px -16px}
.ui-icon-triangle-2-e-w{background-position:-144px -16px}
.ui-icon-arrow-1-n{background-position:0 -32px}
.ui-icon-arrow-1-ne{background-position:-16px -32px}
.ui-icon-arrow-1-e{background-position:-32px -32px}
.ui-icon-arrow-1-se{background-position:-48px -32px}
.ui-icon-arrow-1-s{background-position:-64px -32px}
.ui-icon-arrow-1-sw{background-position:-80px -32px}
.ui-icon-arrow-1-w{background-position:-96px -32px}
.ui-icon-arrow-1-nw{background-position:-112px -32px}
.ui-icon-arrow-2-n-s{background-position:-128px -32px}
.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}
.ui-icon-arrow-2-e-w{background-position:-160px -32px}
.ui-icon-arrow-2-se-nw{background-position:-176px -32px}
.ui-icon-arrowstop-1-n{background-position:-192px -32px}
.ui-icon-arrowstop-1-e{background-position:-208px -32px}
.ui-icon-arrowstop-1-s{background-position:-224px -32px}
.ui-icon-arrowstop-1-w{background-position:-240px -32px}
.ui-icon-arrowthick-1-n{background-position:0 -48px}
.ui-icon-arrowthick-1-ne{background-position:-16px -48px}
.ui-icon-arrowthick-1-e{background-position:-32px -48px}
.ui-icon-arrowthick-1-se{background-position:-48px -48px}
.ui-icon-arrowthick-1-s{background-position:-64px -48px}
.ui-icon-arrowthick-1-sw{background-position:-80px -48px}
.ui-icon-arrowthick-1-w{background-position:-96px -48px}
.ui-icon-arrowthick-1-nw{background-position:-112px -48px}
.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}
.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}
.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}
.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}
.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}
.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}
.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}
.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}
.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}
.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}
.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}
.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}
.ui-icon-arrowreturn-1-w{background-position:-64px -64px}
.ui-icon-arrowreturn-1-n{background-position:-80px -64px}
.ui-icon-arrowreturn-1-e{background-position:-96px -64px}
.ui-icon-arrowreturn-1-s{background-position:-112px -64px}
.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}
.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}
.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}
.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}
.ui-icon-arrow-4{background-position:0 -80px}
.ui-icon-arrow-4-diag{background-position:-16px -80px}
.ui-icon-extlink{background-position:-32px -80px}
.ui-icon-newwin{background-position:-48px -80px}
.ui-icon-refresh{background-position:-64px -80px}
.ui-icon-shuffle{background-position:-80px -80px}
.ui-icon-transfer-e-w{background-position:-96px -80px}
.ui-icon-transferthick-e-w{background-position:-112px -80px}
.ui-icon-folder-collapsed{background-position:0 -96px}
.ui-icon-folder-open{background-position:-16px -96px}
.ui-icon-document{background-position:-32px -96px}
.ui-icon-document-b{background-position:-48px -96px}
.ui-icon-note{background-position:-64px -96px}
.ui-icon-mail-closed{background-position:-80px -96px}
.ui-icon-mail-open{background-position:-96px -96px}
.ui-icon-suitcase{background-position:-112px -96px}
.ui-icon-comment{background-position:-128px -96px}
.ui-icon-person{background-position:-144px -96px}
.ui-icon-print{background-position:-160px -96px}
.ui-icon-trash{background-position:-176px -96px}
.ui-icon-locked{background-position:-192px -96px}
.ui-icon-unlocked{background-position:-208px -96px}
.ui-icon-bookmark{background-position:-224px -96px}
.ui-icon-tag{background-position:-240px -96px}
.ui-icon-home{background-position:0 -112px}
.ui-icon-flag{background-position:-16px -112px}
.ui-icon-calendar{background-position:-32px -112px}
.ui-icon-cart{background-position:-48px -112px}
.ui-icon-pencil{background-position:-64px -112px}
.ui-icon-clock{background-position:-80px -112px}
.ui-icon-disk{background-position:-96px -112px}
.ui-icon-calculator{background-position:-112px -112px}
.ui-icon-zoomin{background-position:-128px -112px}
.ui-icon-zoomout{background-position:-144px -112px}
.ui-icon-search{background-position:-160px -112px}
.ui-icon-wrench{background-position:-176px -112px}
.ui-icon-gear{background-position:-192px -112px}
.ui-icon-heart{background-position:-208px -112px}
.ui-icon-star{background-position:-224px -112px}
.ui-icon-link{background-position:-240px -112px}
.ui-icon-cancel{background-position:0 -128px}
.ui-icon-plus{background-position:-16px -128px}
.ui-icon-plusthick{background-position:-32px -128px}
.ui-icon-minus{background-position:-48px -128px}
.ui-icon-minusthick{background-position:-64px -128px}
.ui-icon-close{background-position:-80px -128px}
.ui-icon-closethick{background-position:-96px -128px}
.ui-icon-key{background-position:-112px -128px}
.ui-icon-lightbulb{background-position:-128px -128px}
.ui-icon-scissors{background-position:-144px -128px}
.ui-icon-clipboard{background-position:-160px -128px}
.ui-icon-copy{background-position:-176px -128px}
.ui-icon-contact{background-position:-192px -128px}
.ui-icon-image{background-position:-208px -128px}
.ui-icon-video{background-position:-224px -128px}
.ui-icon-script{background-position:-240px -128px}
.ui-icon-alert{background-position:0 -144px}
.ui-icon-info{background-position:-16px -144px}
.ui-icon-notice{background-position:-32px -144px}
.ui-icon-help{background-position:-48px -144px}
.ui-icon-check{background-position:-64px -144px}
.ui-icon-bullet{background-position:-80px -144px}
.ui-icon-radio-on{background-position:-96px -144px}
.ui-icon-radio-off{background-position:-112px -144px}
.ui-icon-pin-w{background-position:-128px -144px}
.ui-icon-pin-s{background-position:-144px -144px}
.ui-icon-play{background-position:0 -160px}
.ui-icon-pause{background-position:-16px -160px}
.ui-icon-seek-next{background-position:-32px -160px}
.ui-icon-seek-prev{background-position:-48px -160px}
.ui-icon-seek-end{background-position:-64px -160px}
.ui-icon-stop{background-position:-96px -160px}
.ui-icon-eject{background-position:-112px -160px}
.ui-icon-volume-off{background-position:-128px -160px}
.ui-icon-volume-on{background-position:-144px -160px}
.ui-icon-power{background-position:0 -176px}
.ui-icon-signal-diag{background-position:-16px -176px}
.ui-icon-signal{background-position:-32px -176px}
.ui-icon-battery-0{background-position:-48px -176px}
.ui-icon-battery-1{background-position:-64px -176px}
.ui-icon-battery-2{background-position:-80px -176px}
.ui-icon-battery-3{background-position:-96px -176px}
.ui-icon-circle-plus{background-position:0 -192px}
.ui-icon-circle-minus{background-position:-16px -192px}
.ui-icon-circle-close{background-position:-32px -192px}
.ui-icon-circle-triangle-e{background-position:-48px -192px}
.ui-icon-circle-triangle-s{background-position:-64px -192px}
.ui-icon-circle-triangle-w{background-position:-80px -192px}
.ui-icon-circle-triangle-n{background-position:-96px -192px}
.ui-icon-circle-arrow-e{background-position:-112px -192px}
.ui-icon-circle-arrow-s{background-position:-128px -192px}
.ui-icon-circle-arrow-w{background-position:-144px -192px}
.ui-icon-circle-arrow-n{background-position:-160px -192px}
.ui-icon-circle-zoomin{background-position:-176px -192px}
.ui-icon-circle-zoomout{background-position:-192px -192px}
.ui-icon-circle-check{background-position:-208px -192px}
.ui-icon-circlesmall-plus{background-position:0 -208px}
.ui-icon-circlesmall-minus{background-position:-16px -208px}
.ui-icon-circlesmall-close{background-position:-32px -208px}
.ui-icon-squaresmall-plus{background-position:-48px -208px}
.ui-icon-squaresmall-minus{background-position:-64px -208px}
.ui-icon-squaresmall-close{background-position:-80px -208px}
.ui-icon-grip-dotted-vertical{background-position:0 -224px}
.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}
.ui-icon-grip-solid-vertical{background-position:-32px -224px}
.ui-icon-grip-solid-horizontal{background-position:-48px -224px}
.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}
.ui-icon-grip-diagonal-se{background-position:-80px -224px}
.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}
.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}
.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}
.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}
.ui-widget-shadow{background:#aaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;opacity:.3;border-radius:8px;margin:-8px 0 0 -8px;padding:8px}
.ratingblock{display:inline;padding-top:3px;text-align:left;margin-left:10px}
.loading{height:30px;background:url(../../../images/rating/working.gif) 50% 50% no-repeat}
.unit-rating{list-style:none;height:30px;position:relative;background:url(../../../images/rating/starrating.gif) top left repeat-x;padding:0}
.unit-rating li{text-indent:-90000px;float:left;margin:0;padding:0}
.unit-rating li a{outline:none;display:block;width:30px;height:30px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0}
.unit-rating li a:hover{background:url(../../../images/rating/starrating.gif) left center;z-index:2;left:0}
.unit-rating a.r1-unit:hover{width:30px}
.unit-rating a.r2-unit{left:30px}
.unit-rating a.r2-unit:hover{width:60px}
.unit-rating a.r3-unit{left:60px}
.unit-rating a.r3-unit:hover{width:90px}
.unit-rating a.r4-unit{left:90px}
.unit-rating a.r4-unit:hover{width:120px}
.unit-rating a.r5-unit{left:120px}
.unit-rating a.r5-unit:hover{width:150px}
.unit-rating a.r6-unit{left:150px}
.unit-rating a.r6-unit:hover{width:180px}
.unit-rating a.r7-unit{left:180px}
.unit-rating a.r7-unit:hover{width:210px}
.unit-rating a.r8-unit{left:210px}
.unit-rating a.r8-unit:hover{width:240px}
.unit-rating a.r9-unit{left:240px}
.unit-rating a.r9-unit:hover{width:270px}
.unit-rating a.r10-unit{left:270px}
.unit-rating a.r10-unit:hover{width:300px}
.unit-rating li.current-rating{background:url(../../../images/rating/starrating.gif) left bottom;position:absolute;height:30px;display:block;text-indent:-9000px;z-index:1}
.voted{color:#999}
.thanks{color:#36AA3D}
.static{color:#5D3126}
.date{font-size:18px;color:#000;font-weight:bold;vertical-align:middle}
.jours{font-size:12px;color:#000;font-weight:bold}
.tab_numero{background:url(img/icone.jpg);background-repeat:no-repeat;background-position:bottom right;font-size:12px;color:#000;font-weight:normal}
.tab_cal{background-repeat:no-repeat}
.reserve{background-color:red;font-size:12px;color:#000}
.libre{background-color:#afa;font-size:12px;color:#000}
.descriptif{font-size:12px;color:#000;padding-left:10px}
.div_top_rf{width:100%;background:#FFF;border:none;}
.tab_prin{width:100%;margin:auto auto 10px}
.foot_vers_haut{margin-bottom:10px;text-align:center}
.foot_vers_haut a{font-size:10px;color:#5A5E62}
.foot_dw{margin-bottom:10px;text-align:center;font-size:10px;color:#5A5E62}
.tableaudptdroite{vertical-align:top;text-align:center;padding-left:10px;width:270px}
.droite_ville2{font-size:10px;text-align:left}
.div_map_droit{overflow:hidden;width:100%}
.item_a{font-weight:bold;color:var(--mh-blue);text-decoration:none;font-size:14px}
.item_b{font-weight:bold;color:#000;text-decoration:none;font-size:14px}
.favplus{background:url(/im/i/heart.png);display:block;width:16px;height:16px}
.activeold{background:url(/im/i/cross.png);display:block;width:16px;height:16px}
.annonce1{text-align:left;width:100%;margin:0 auto auto}
.annonce2{font-weight:bold;font-size:15px}
.annonce3{width:100%;background-repeat:no-repeat;text-decoration:none;font-weight:bold;font-size:14px}
.annonce4{width:200px;background-repeat:no-repeat;text-decoration:none;font-weight:bold;font-size:14px}
.annonce10{height:100%;padding:10px 0 10px 10px}
.annonce12{padding-top:0;text-align:center}
.carte_annonce{width:auto;height:250px;border:1px solid #B8D6C2;margin-top:-12px}
.annonce13{padding:10px 0}
.annonce16{color:#B77B3F;font-weight:bold}
.annonce17{font-size:10px}
.annonce18{width:137px;height:102px}
.annonce22{background-size:100%;background-repeat:no-repeat;background-color:#CCC;background-position:center center;border-radius:7px}
body{overflow-x: hidden;max-width: 100vw;font-family: Tahoma,Arial;font-size:16px;line-height: 1.6;text-align:left;margin:0;}
.suggestionsBox{position:relative;left:0;width:520px;background-color:#212427;border-radius:7px;border:2px solid #000;color:#fff;text-align:left;margin:30px 0 0}
.suggestionList{margin:0;padding:0}
.suggestionList li{cursor:pointer;margin:0 0 3px;padding:3px}
.suggestionList li:hover{background-color:#659CD8}
.tableau_de_gauche{background-color:#cad7d3;text-align:left;width:195px;vertical-align:top;background:#FFF;border-right:1px solid #ccc;padding-right:10px}
.tableau1{width:100%;background:#FFF;border:1px solid #A6B8C1;border-top:none;margin:0 auto 10px}
.tableau2{border-collapse:collapse;text-align:center;background-color:#FFF;width:100%}
.tableau3{width:1230px;margin:auto auto 10px}
.update{position:absolute;width:250px;background-color:#FFF;border:1px solid #888;margin:0;padding:0}
ul.villes,ul.payss{list-style-type:none;text-align:left;margin:0;padding:0}
ul.villes li.selected,ul.payss li.selected{background-color:#ffb;cursor:pointer}
li.ville,li.pays{list-style-type:none;display:block;height:15px;margin:0;padding:2px}
li.ville div.nom,li.pays div.nom{font-weight:bold;font-size:12px;line-height:1.2em}
.lien_favoris{font-size:11px;text-decoration:none;color:var(--mh-blue);font-weight:bold;padding-right:8px}
.tableau_recherche_accueil{text-align:left;font-size:10px;border:1px solid #ccc;background-color:#F9F9F9;width:725px;margin:auto auto 25px 10px;padding:7px 10px 7px 20px}
.tableauxcompades{text-align:left;font-size:11px;font-weight:bold}
.annonce{font-size:15px;color:#555;text-align:center;padding-bottom:5px;padding-top:5px;border-bottom:1px dashed #555;text-decoration:none}
.interieur_cadre_annonce { font-size: 15px; line-height: 1.6;color: #333;margin:10px;word-wrap: break-word !important; word-break: break-word !important; overflow-wrap: anywhere !important; max-width: 100% !important;}
@media (max-width: 768px) { .interieur_cadre_annonce { font-size: 15px; line-height: 1.5; } }
.cadremilieu{text-align:left;background-color:#FFF;width:95%;font-size:12px;margin:auto;padding:10px}
.haut_annonce {
    background: linear-gradient(135deg, var(--mh-blue) 0%, var(--mh-blue-light) 100%);
    color: #FFF;
    text-align: center;
    width: 95%;
    padding: 30px 20px 25px 20px;
    position: relative;
    overflow: hidden;
}
.haut_annonce::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.haut_annonce h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 25px 0;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}

.amenities-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 25px 0 20px 0;
    position: relative;
    z-index: 1;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.2);
}

.amenity-item:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.amenity-item i {
    font-size: 18px;
    color: #fff;
}

.location-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.3);
}

.location-badge i {
    font-size: 16px;
}

.tagline {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.95);
    margin-top: 20px;
    font-weight: 400;
    letter-spacing: 0.3px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .haut_annonce {
        padding: 30px 15px 25px 15px;
    }
   
    .haut_annonce h1 {
        font-size: 26px;
        margin-bottom: 20px;
        letter-spacing: -0.2px;
    }
   
    .amenities-container {
        gap: 12px;
        margin: 20px 0 15px 0;
    }
   
    .amenity-item {
        padding: 10px 16px;
        font-size: 14px;
    }
   
    .amenity-item i {
        font-size: 16px;
    }
   
    .location-badge {
        padding: 7px 14px;
        font-size: 13px;
        margin-top: 12px;
    }
   
    .tagline {
        font-size: 15px;
        margin-top: 15px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .haut_annonce h1 {
        font-size: 22px;
    }
   
    .amenity-item {
        font-size: 13px;
        padding: 8px 14px;
    }
   
    .tagline {
        font-size: 14px;
    }
}

.tableau_info{border-collapse:collapse;text-align:center;background-color:var(--mh-blue);width:100%;color:#FFF}
.tableauhorisurvol{background-color:#000;text-decoration:none;color:#FFF;font-size:15px;border-collapse:collapse;font-weight:bold;text-align:center;width:100%;margin-bottom:6px;height:78px}
.tableauhorisurvol td{width:178px}
.tableauhorisurvol tr{height:20px}
.tableaugauche{text-decoration:none;color:#FFF;font-size:15px;border-collapse:collapse;font-weight:bold;text-align:left;width:100%}
.tableaugauche td{border-bottom:1px dotted #9F9EA0;text-align:left}
.tableaugauche td:hover{background:#E2EDB8}
.iconedpt{width:20px;height:20px;vertical-align:top}
.test{background:url(../../../inc/arr.gif)}
.inttab{font-size:12px;border-collapse:collapse}
.input{background-color:#fff;font:11px/14px "Lucida Grande","Trebuchet MS",Arial,Helvetica,sans-serif;color:#5a698b;border:1px solid #8595b2;margin:4px 0 5px 8px;padding:1px}
.foot{border-collapse:collapse;font-size:12px}
.tableaux{font-size:10px;border:1px dotted #000;background-color:#eee}
.tableaux_comparatif{font-size:11px;border:1px dotted #6495ed;width:75%;margin-left:auto;margin-right:auto;background-color:#FFF}
.data_tableaux_comparatif{background-color:#FFF;width:25%;padding:5px}
titre{border-left:5px solid #458eff;border-bottom:2px dotted #458eff;padding:5px}
.barrehori{background-color:#545759;border-collapse:collapse;color:#FFF;text-decoration:none;font-size:13px;font-weight:bold}
.barrehori.d_s{width:100%;margin:auto auto 5px}
.barrehori.d_a{width:100%;margin:10px auto 5px}

.bandeau{background:url(../../../fond.jpg);background-position:top left;background-repeat:no-repeat;background-color:#3f7ab7}
.textemenu{text-decoration:none;font-size:16px;text-transform:uppercase;letter-spacing:-.8px}
.textemenu_bas{text-decoration:none;font-size:13px;text-align:center;color:#5A5E62;margin:10px auto}
.textemenu_bas a{text-decoration:none;color:#000;font-weight:bold}
.textepre{text-decoration:none;color:#fff;font-size:12px;text-align:center;width:130px;border:1px solid #ccc;background-color:#000;margin:auto auto 10px}
.textepre span{color:#FFF;border:none;font-weight:bold}
.textepre2{text-decoration:none;font-size:12px;text-align:center}
.textepre2 img{width:130px;height:87px}
.textepre2 span{display:block;padding-top:4px;font-weight:bold;color:#000;background-color:#FFF}
.categoriemilieu{text-decoration:none;color:#000;font-weight:bold;font-size:14px}
.categoriegauche{text-decoration:none;font-size:12px;text-align:justify}
.categoriegauchepays{text-decoration:none;font-weight:bold;color:#000;font-size:11px;text-align:center}
.lien_1{font-size:12px;font-weight:bold;text-decoration:none;font-style:normal;color:#009}
.lien_2{font-size:11px;font-weight:bold;text-decoration:none;font-style:normal;color:#009}
.lien_3{font-size:11px;font-weight:bold;text-decoration:none;font-style:normal;color:#900}
.lienp{font-size:11px;color:#06c}
.liencom{font-size:9px;color:#006}
.lien_part{font-size:11px;color:#c03}
.T2{font-size:12px;color:#dc143c;font-weight:normal;margin-right:35px;vertical-align:middle;padding-top:3px;padding-bottom:3px}
.texte{font-size:16px;border:#c5ccd2;left:20px;text-align:left;color:#333}
.texte_menu_gauche{border:#c5ccd2;left:20px;text-align:center;color:#333}
.textetarif{font-size:12px;border:#c5ccd2;left:20px;text-align:center;color:#333}
.textefin{font-size:11px;border:#c5ccd2;left:20px;color:#333}
.textedescat{font-size:11px;border:#c5ccd2;left:20px;text-align:center;color:#333}
.textepetit{font-size:8px;border:#c5ccd2;left:20px;text-align:justify;color:#333}
.textecent{font-size:11px;text-align:center;font-weight:bold;color:#003}
.barre1{font-size:12px;border:1px solid #999;background-color:#eee;width:80%}
.barre2{font-size:12px;font-weight:normal;text-align:left;vertical-align:middle;padding:4px}
.cad_info{text-align:left;font-size:14px;background-color:#f9f9f9;width:100%}
.cad_info_spon{text-align:left;font-size:10px;border:1px solid #ccc;background-color:#FF0;width:95%}
.sel_page{font-size:12px;border:1px solid #ccc;background-color:#eee;width:95%;text-align:center}
.tableaudptgauche{background-color:#cad7d3;text-align:left;border-collapse:collapse}
.tableaudptgauche_spon{background-color:#FF0;text-align:left;border-collapse:collapse}
.cad_info2{border:thin solid #88cfff;width:80%;padding:3px}
.cad_info3{border:thin solid #88cfff;padding:2px}
.leftFloatingDiv{float:left;width:160px;height:110px}
.imageSlideshowHolder img{position:absolute;left:0;top:0}
#DHTMLgoodies_formTooltipDiv{color:#fff;font-weight:bold;font-size:.4em;line-height:120%}
.DHTMLgoodies_formTooltip_closeMessage{color:#fff;font-weight:normal;font-size:.7em}
#lightbox{position:absolute;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#outerImageContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}
#imageContainer{padding:10px}
#loading{position:absolute;top:40%;left:0;height:25%;width:100%;text-align:center;line-height:0}
#hoverNav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#hoverNav a{outline:none}
#prevLink,#nextLink{width:49%;height:100%;background:transparent url(../../../images/blank.gif) no-repeat;display:block}
#prevLink{left:0;float:left}
#nextLink{right:0;float:right}
#prevLink:hover,#prevLink:visited:hover{background:url(../../../images/prevlabel.gif) no-repeat left 15%}
#nextLink:hover,#nextLink:visited:hover{background:url(../../../images/nextlabel.gif) no-repeat right 15%}
#imageDataContainer{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;line-height:1.4em;overflow:auto;width:100%;margin:0 auto}
#imageData{color:#666;padding:0 10px}
#imageData #imageDetails{width:70%;float:left;text-align:left}
#imageData #numberDisplay{display:block;clear:left;padding-bottom:1em}
#imageData #bottomNavClose{width:66px;float:right;padding-bottom:.7em}
#overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;background-color:#000}
.flag{width:16px;height:11px;background:url(/template/mh/images/flag.png) no-repeat}
.flag.flag-ar{background-position:-160px 0}
.flag.flag-as{background-position:-176px 0}
.flag.flag-at{background-position:-192px 0}
.flag.flag-au{background-position:-208px 0}
.flag.flag-aw{background-position:-224px 0}
.flag.flag-az{background-position:-240px 0}
.flag.flag-ba{background-position:0 -11px}
.flag.flag-bb{background-position:-16px -11px}
.flag.flag-bd{background-position:-32px -11px}
.flag.flag-be{background-position:-48px -11px}
.flag.flag-bf{background-position:-64px -11px}
.flag.flag-bg{background-position:-80px -11px}
.flag.flag-bh{background-position:-96px -11px}
.flag.flag-bi{background-position:-112px -11px}
.flag.flag-bj{background-position:-128px -11px}
.flag.flag-bm{background-position:-144px -11px}
.flag.flag-bn{background-position:-160px -11px}
.flag.flag-bo{background-position:-176px -11px}
.flag.flag-br{background-position:-192px -11px}
.flag.flag-bs{background-position:-208px -11px}
.flag.flag-bt{background-position:-224px -11px}
.flag.flag-bv{background-position:-240px -11px}
.flag.flag-bw{background-position:0 -22px}
.flag.flag-by{background-position:-16px -22px}
.flag.flag-bz{background-position:-32px -22px}
.flag.flag-ca{background-position:-48px -22px}
.flag.flag-catalonia{background-position:-64px -22px}
.flag.flag-cd{background-position:-80px -22px}
.flag.flag-cf{background-position:-96px -22px}
.flag.flag-cg{background-position:-112px -22px}
.flag.flag-ch{background-position:-128px -22px}
.flag.flag-ci{background-position:-144px -22px}
.flag.flag-ck{background-position:-160px -22px}
.flag.flag-cl{background-position:-176px -22px}
.flag.flag-cm{background-position:-192px -22px}
.flag.flag-cn{background-position:-208px -22px}
.flag.flag-co{background-position:-224px -22px}
.flag.flag-cr{background-position:-240px -22px}
.flag.flag-cu{background-position:0 -33px}
.flag.flag-cv{background-position:-16px -33px}
.flag.flag-cw{background-position:-32px -33px}
.flag.flag-cy{background-position:-48px -33px}
.flag.flag-cz{background-position:-64px -33px}
.flag.flag-de{background-position:-80px -33px}
.flag.flag-dj{background-position:-96px -33px}
.flag.flag-dk{background-position:-112px -33px}
.flag.flag-dm{background-position:-128px -33px}
.flag.flag-do{background-position:-144px -33px}
.flag.flag-dz{background-position:-160px -33px}
.flag.flag-ec{background-position:-176px -33px}
.flag.flag-ee{background-position:-192px -33px}
.flag.flag-eg{background-position:-208px -33px}
.flag.flag-eh{background-position:-224px -33px}
.flag.flag-england{background-position:-240px -33px}
.flag.flag-er{background-position:0 -44px}
.flag.flag-es{background-position:-16px -44px}
.flag.flag-et{background-position:-32px -44px}
.flag.flag-eu{background-position:-48px -44px}
.flag.flag-fi{background-position:-64px -44px}
.flag.flag-fj{background-position:-80px -44px}
.flag.flag-fk{background-position:-96px -44px}
.flag.flag-fm{background-position:-112px -44px}
.flag.flag-fo{background-position:-128px -44px}
.flag.flag-fr{background-position:-144px -44px}
.flag.flag-ga{background-position:-160px -44px}
.flag.flag-en{background-position:-176px -44px}
.flag.flag-gd{background-position:-192px -44px}
.flag.flag-ge{background-position:-208px -44px}
.flag.flag-gf{background-position:-224px -44px}
.flag.flag-gg{background-position:-240px -44px}
.flag.flag-gh{background-position:0 -55px}
.flag.flag-gi{background-position:-16px -55px}
.flag.flag-gl{background-position:-32px -55px}
.flag.flag-gm{background-position:-48px -55px}
.flag.flag-gn{background-position:-64px -55px}
.flag.flag-gp{background-position:-80px -55px}
.flag.flag-gq{background-position:-96px -55px}
.flag.flag-gr{background-position:-112px -55px}
.flag.flag-gs{background-position:-128px -55px}
.flag.flag-gt{background-position:-144px -55px}
.flag.flag-gu{background-position:-160px -55px}
.flag.flag-gw{background-position:-176px -55px}
.flag.flag-gy{background-position:-192px -55px}
.flag.flag-hk{background-position:-208px -55px}
.flag.flag-hm{background-position:-224px -55px}
.flag.flag-hn{background-position:-240px -55px}
.flag.flag-hr{background-position:0 -66px}
.flag.flag-ht{background-position:-16px -66px}
.flag.flag-hu{background-position:-32px -66px}
.flag.flag-ic{background-position:-48px -66px}
.flag.flag-id{background-position:-64px -66px}
.flag.flag-ie{background-position:-80px -66px}
.flag.flag-il{background-position:-96px -66px}
.flag.flag-im{background-position:-112px -66px}
.flag.flag-in{background-position:-128px -66px}
.flag.flag-io{background-position:-144px -66px}
.flag.flag-iq{background-position:-160px -66px}
.flag.flag-ir{background-position:-176px -66px}
.flag.flag-is{background-position:-192px -66px}
.flag.flag-it{background-position:-208px -66px}
.flag.flag-je{background-position:-224px -66px}
.flag.flag-jm{background-position:-240px -66px}
.flag.flag-jo{background-position:0 -77px}
.flag.flag-jp{background-position:-16px -77px}
.flag.flag-ke{background-position:-32px -77px}
.flag.flag-kg{background-position:-48px -77px}
.flag.flag-kh{background-position:-64px -77px}
.flag.flag-ki{background-position:-80px -77px}
.flag.flag-km{background-position:-96px -77px}
.flag.flag-kn{background-position:-112px -77px}
.flag.flag-kp{background-position:-128px -77px}
.flag.flag-kr{background-position:-144px -77px}
.flag.flag-kurdistan{background-position:-160px -77px}
.flag.flag-kw{background-position:-176px -77px}
.flag.flag-ky{background-position:-192px -77px}
.flag.flag-kz{background-position:-208px -77px}
.flag.flag-la{background-position:-224px -77px}
.flag.flag-lb{background-position:-240px -77px}
.flag.flag-lc{background-position:0 -88px}
.flag.flag-li{background-position:-16px -88px}
.flag.flag-lk{background-position:-32px -88px}
.flag.flag-lr{background-position:-48px -88px}
.flag.flag-ls{background-position:-64px -88px}
.flag.flag-lt{background-position:-80px -88px}
.flag.flag-lu{background-position:-96px -88px}
.flag.flag-lv{background-position:-112px -88px}
.flag.flag-ly{background-position:-128px -88px}
.flag.flag-ma{background-position:-144px -88px}
.flag.flag-mc{background-position:-160px -88px}
.flag.flag-md{background-position:-176px -88px}
.flag.flag-me{background-position:-192px -88px}
.flag.flag-mg{background-position:-208px -88px}
.flag.flag-mh{background-position:-224px -88px}
.flag.flag-mk{background-position:-240px -88px}
.flag.flag-ml{background-position:0 -99px}
.flag.flag-mm{background-position:-16px -99px}
.flag.flag-mn{background-position:-32px -99px}
.flag.flag-mo{background-position:-48px -99px}
.flag.flag-mp{background-position:-64px -99px}
.flag.flag-mq{background-position:-80px -99px}
.flag.flag-mr{background-position:-96px -99px}
.flag.flag-ms{background-position:-112px -99px}
.flag.flag-mt{background-position:-128px -99px}
.flag.flag-mu{background-position:-144px -99px}
.flag.flag-mv{background-position:-160px -99px}
.flag.flag-mw{background-position:-176px -99px}
.flag.flag-mx{background-position:-192px -99px}
.flag.flag-my{background-position:-208px -99px}
.flag.flag-mz{background-position:-224px -99px}
.flag.flag-na{background-position:-240px -99px}
.flag.flag-nc{background-position:0 -110px}
.flag.flag-ne{background-position:-16px -110px}
.flag.flag-nf{background-position:-32px -110px}
.flag.flag-ng{background-position:-48px -110px}
.flag.flag-ni{background-position:-64px -110px}
.flag.flag-nl{background-position:-80px -110px}
.flag.flag-no{background-position:-96px -110px}
.flag.flag-np{background-position:-112px -110px}
.flag.flag-nr{background-position:-128px -110px}
.flag.flag-nu{background-position:-144px -110px}
.flag.flag-nz{background-position:-160px -110px}
.flag.flag-om{background-position:-176px -110px}
.flag.flag-pa{background-position:-192px -110px}
.flag.flag-pe{background-position:-208px -110px}
.flag.flag-pf{background-position:-224px -110px}
.flag.flag-pg{background-position:-240px -110px}
.flag.flag-ph{background-position:0 -121px}
.flag.flag-pk{background-position:-16px -121px}
.flag.flag-pl{background-position:-32px -121px}
.flag.flag-pm{background-position:-48px -121px}
.flag.flag-pn{background-position:-64px -121px}
.flag.flag-pr{background-position:-80px -121px}
.flag.flag-ps{background-position:-96px -121px}
.flag.flag-pt{background-position:-112px -121px}
.flag.flag-pw{background-position:-128px -121px}
.flag.flag-py{background-position:-144px -121px}
.flag.flag-qa{background-position:-160px -121px}
.flag.flag-re{background-position:-176px -121px}
.flag.flag-ro{background-position:-192px -121px}
.flag.flag-rs{background-position:-208px -121px}
.flag.flag-ru{background-position:-224px -121px}
.flag.flag-rw{background-position:-240px -121px}
.flag.flag-sa{background-position:0 -132px}
.flag.flag-sb{background-position:-16px -132px}
.flag.flag-sc{background-position:-32px -132px}
.flag.flag-scotland{background-position:-48px -132px}
.flag.flag-sd{background-position:-64px -132px}
.flag.flag-se{background-position:-80px -132px}
.flag.flag-sg{background-position:-96px -132px}
.flag.flag-sh{background-position:-112px -132px}
.flag.flag-si{background-position:-128px -132px}
.flag.flag-sk{background-position:-144px -132px}
.flag.flag-sl{background-position:-160px -132px}
.flag.flag-sm{background-position:-176px -132px}
.flag.flag-sn{background-position:-192px -132px}
.flag.flag-so{background-position:-208px -132px}
.flag.flag-somaliland{background-position:-224px -132px}
.flag.flag-sr{background-position:-240px -132px}
.flag.flag-ss{background-position:0 -143px}
.flag.flag-st{background-position:-16px -143px}
.flag.flag-sv{background-position:-32px -143px}
.flag.flag-sx{background-position:-48px -143px}
.flag.flag-sy{background-position:-64px -143px}
.flag.flag-sz{background-position:-80px -143px}
.flag.flag-tc{background-position:-96px -143px}
.flag.flag-td{background-position:-112px -143px}
.flag.flag-tf{background-position:-128px -143px}
.flag.flag-tg{background-position:-144px -143px}
.flag.flag-th{background-position:-160px -143px}
.flag.flag-tj{background-position:-176px -143px}
.flag.flag-tk{background-position:-192px -143px}
.flag.flag-tl{background-position:-208px -143px}
.flag.flag-tm{background-position:-224px -143px}
.flag.flag-tn{background-position:-240px -143px}
.flag.flag-to{background-position:0 -154px}
.flag.flag-tr{background-position:-16px -154px}
.flag.flag-tt{background-position:-32px -154px}
.flag.flag-tv{background-position:-48px -154px}
.flag.flag-tw{background-position:-64px -154px}
.flag.flag-tz{background-position:-80px -154px}
.flag.flag-ua{background-position:-96px -154px}
.flag.flag-ug{background-position:-112px -154px}
.flag.flag-um{background-position:-128px -154px}
.flag.flag-us{background-position:-144px -154px}
.flag.flag-uy{background-position:-160px -154px}
.flag.flag-uz{background-position:-176px -154px}
.flag.flag-va{background-position:-192px -154px}
.flag.flag-vc{background-position:-208px -154px}
.flag.flag-ve{background-position:-224px -154px}
.flag.flag-vg{background-position:-240px -154px}
.flag.flag-vi{background-position:0 -165px}
.flag.flag-vn{background-position:-16px -165px}
.flag.flag-vu{background-position:-32px -165px}
.flag.flag-wales{background-position:-48px -165px}
.flag.flag-wf{background-position:-64px -165px}
.flag.flag-ws{background-position:-80px -165px}
.flag.flag-ye{background-position:-96px -165px}
.flag.flag-yt{background-position:-112px -165px}
.flag.flag-za{background-position:-128px -165px}
.flag.flag-zanzibar{background-position:-144px -165px}
.flag.flag-zm{background-position:-160px -165px}
.flag.flag-zw{background-position:-176px -165px}
.hh{display:inline;color:#FFF;margin:0;padding:0}
.mg{margin:-30px 0 0;padding:0}
.mg1{color:red;font-weight:bold;text-decoration:none}
.mg2{color:green;font-weight:bold;text-decoration:none}
.mg3{color:#254D7A;font-weight:bold;text-decoration:none}
.mg4{text-align:center;margin:auto}
.mg5{text-align:center;margin:10px auto 0}
.mg6{margin-top:10px;margin-bottom:2px;background-color:#C80D0D}
.mg7{margin-bottom:7px}

.h2plus {  color: var(--mh-blue); font-size: 28px; margin-bottom: 35px; border-bottom: 3px solid var(--mh-blue); padding-bottom: 10px; text-align: left; }
 

 
 
@media (max-width: 768px) { .h2plus { font-size: 17px; margin-bottom: 25px; } }


@media (max-width:640px){.cad_info{padding-left:0px;padding-right:0px}}
.ville_rpc{display:inline;position:relative;left:400px}
.ville_rpc2{display:inline;text-align:left}
.vib_rpc{display:inline;position:relative;left:-20px}
.vib_rpc2{display:inline;position:relative;left:-70px}
.vib_rpc3{display:inline;position:relative;left:-74px}
.vib_rpc4{display:inline;position:absolute;left:404px;text-align:left}
.barrehoribleu{background-color:var(--mh-blue-light);border-collapse:collapse;color:#FFF;text-decoration:none;font-size:13px;font-weight:bold;width:570px;border-radius:7px;margin:auto auto 10px;padding:5px}
.sousbarrehoribleu{text-decoration:none;font-size:12px;text-align:justify;background-color:#545759;border-radius:7px;margin:5px auto auto;width:50%}
.h1accueil{text-align:center;margin-bottom:10px;color:#000;font-size:20px;font-weight:bold}
.texteta{font-weight:bold;color:#FFF;font-size:17px}
.mobile{display:none!important}
.lita{margin-right:15px}
.item15{margin-top:0;margin-left:10px}
.item40{margin-top:0;margin-bottom:5px;margin-left:10px}
.item13{margin-top:10px;margin-left:10px}
.tableco{text-align:center;margin:10px auto auto}
.resa{background-color:#F5F5F5}
.contactproprio{background:none;background-color:red;font-size:16px;color:#FFF;border:none}
.avisproprio{background:none;background-color:green;font-size:16px;color:#FFF;border:none}
.bobleu{text-align:left;background-color:#FFF;width:50%;border:1px solid #CCC;border-radius:7px;padding-left:15px;margin:auto auto 15px}
.bobleu2{font-weight:bold;color:var(--mh-blue);text-decoration:none;font-size:17px}
.affsite1{text-align:center;margin:auto auto 10px}
.affsite2{font-size:14px;border:1px solid #CCC;border-radius:7px;margin:5px 5px 20px;padding:5px}
.affsite2 a{color:#009;font-weight:bold}
.affsite4{vertical-align:top;text-align:left;font-size:11px}
.affsite6{text-align:center;width:100%;margin:auto auto 0}
.affsite7{width:1%}
.affsite8{width:79%;text-align:center}
.affsite9{float:left;margin-left:5px}
.affsite10{display:inline}
.affsite11{font-size:17px}
.affsite12{float:right;vertical-align:middle;margin-top:auto;margin-bottom:auto}
.affsite15{margin-top:8px}
.affsite16{display:inline;background-color:#B50051;font-size:12px;color:#FFF;border-radius:5px;margin:auto}
.affsite17{margin-left:10px}
.affsite18{background-color:green}
.affsite19{background-color:#5C5B60}
.affsite20{text-align:center;width:100%;border-top:0 solid #000;margin:0 auto 10px}
.affsite21{font-size:14px}
.ic_gn{background:url(/marquer/gs.png) no-repeat top left}
.ic_n{width:32px;height:37px}
.gn-number_1{background-position:0 -87px}
.gn-number_10{background-position:0 -174px}
.gn-number_100{background-position:0 -261px}
.gn-number_11{background-position:0 -348px}
.gn-number_12{background-position:0 -435px}
.gn-number_13{background-position:0 -522px}
.gn-number_14{background-position:0 -609px}
.gn-number_15{background-position:0 -696px}
.gn-number_16{background-position:0 -783px}
.gn-number_17{background-position:0 -870px}
.gn-number_18{background-position:0 -957px}
.gn-number_19{background-position:0 -1044px}
.gn-number_2{background-position:0 -1131px}
.gn-number_20{background-position:0 -1218px}
.gn-number_21{background-position:0 -1305px}
.gn-number_22{background-position:0 -1392px}
.gn-number_23{background-position:0 -1479px}
.gn-number_24{background-position:0 -1566px}
.gn-number_25{background-position:0 -1653px}
.gn-number_26{background-position:0 -1740px}
.gn-number_27{background-position:0 -1827px}
.gn-number_28{background-position:0 -1914px}
.gn-number_29{background-position:-82px 0}
.gn-number_3{background-position:-82px -87px}
.gn-number_30{background-position:-82px -174px}
.gn-number_31{background-position:-82px -261px}
.gn-number_32{background-position:-82px -348px}
.gn-number_33{background-position:-82px -435px}
.gn-number_34{background-position:-82px -522px}
.gn-number_35{background-position:-82px -609px}
.gn-number_36{background-position:-82px -696px}
.gn-number_37{background-position:-82px -783px}
.gn-number_38{background-position:-82px -870px}
.gn-number_39{background-position:-82px -957px}
.gn-number_4{background-position:-82px -1044px}
.gn-number_40{background-position:-82px -1131px}
.gn-number_41{background-position:-82px -1218px}
.gn-number_42{background-position:-82px -1305px}
.gn-number_43{background-position:-82px -1392px}
.gn-number_44{background-position:-82px -1479px}
.gn-number_45{background-position:-82px -1566px}
.gn-number_46{background-position:-82px -1653px}
.gn-number_47{background-position:-82px -1740px}
.gn-number_48{background-position:-82px -1827px}
.gn-number_49{background-position:-82px -1914px}
.gn-number_5{background-position:-164px 0}
.gn-number_50{background-position:-164px -87px}
.gn-number_51{background-position:-164px -174px}
.gn-number_52{background-position:-164px -261px}
.gn-number_53{background-position:-164px -348px}
.gn-number_54{background-position:-164px -435px}
.gn-number_55{background-position:-164px -522px}
.gn-number_56{background-position:-164px -609px}
.gn-number_57{background-position:-164px -696px}
.gn-number_58{background-position:-164px -783px}
.gn-number_59{background-position:-164px -870px}
.gn-number_6{background-position:-164px -957px}
.gn-number_60{background-position:-164px -1044px}
.gn-number_61{background-position:-164px -1131px}
.gn-number_62{background-position:-164px -1218px}
.gn-number_63{background-position:-164px -1305px}
.gn-number_64{background-position:-164px -1392px}
.gn-number_65{background-position:-164px -1479px}
.gn-number_66{background-position:-164px -1566px}
.gn-number_67{background-position:-164px -1653px}
.gn-number_68{background-position:-164px -1740px}
.gn-number_69{background-position:-164px -1827px}
.gn-number_7{background-position:-164px -1914px}
.gn-number_70{background-position:-246px 0}
.gn-number_71{background-position:-246px -87px}
.gn-number_72{background-position:-246px -174px}
.gn-number_73{background-position:-246px -261px}
.gn-number_74{background-position:-246px -348px}
.gn-number_75{background-position:-246px -435px}
.gn-number_76{background-position:-246px -522px}
.gn-number_77{background-position:-246px -609px}
.gn-number_78{background-position:-246px -696px}
.gn-number_79{background-position:-246px -783px}
.gn-number_8{background-position:-246px -870px}
.gn-number_80{background-position:-246px -957px}
.gn-number_81{background-position:-246px -1044px}
.gn-number_82{background-position:-246px -1131px}
.gn-number_83{background-position:-246px -1218px}
.gn-number_84{background-position:-246px -1305px}
.gn-number_85{background-position:-246px -1392px}
.gn-number_86{background-position:-246px -1479px}
.gn-number_87{background-position:-246px -1566px}
.gn-number_88{background-position:-246px -1653px}
.gn-number_89{background-position:-246px -1740px}
.gn-number_9{background-position:-246px -1827px}
.gn-number_90{background-position:-246px -1914px}
.gn-number_91{background-position:-328px 0}
.gn-number_92{background-position:-328px -87px}
.gn-number_93{background-position:-328px -174px}
.gn-number_94{background-position:-328px -261px}
.gn-number_95{background-position:-328px -348px}
.gn-number_96{background-position:-328px -435px}
.gn-number_97{background-position:-328px -522px}
.gn-number_98{background-position:-328px -609px}
.gn-number_99{background-position:-328px -696px}
.log_m{height:110px}
.m_prin{background:#FFF;display:inline;}
.ins_m{margin-left:50px}
.ins_m:after{content:" --"}
.ins_m:before{content:"-- "}
.header_rf{position:relative;margin-top:0;width:100%;min-height:20px;height:20px;padding:0}
.navmenu_rf{width:100%;margin-top:-40px;display:block;float:left}
.menu_rf > li{list-style:none;float:left;margin-top:0}
.clearfix_rf:before,.clearfix_rf:after{display:table;content:""}
.menu_rf{background:var(--mh-blue);padding-top:4px;padding-bottom:4px}
.navmenu_rf,.menu_rf,.menu_rf > li,.menu_rf > li > a{height:17px}
.menu_rf > li > a{display:block;text-decoration:none;font-weight:normal;font-size:16px;line-height:1;box-sizing:border-box;transition:all .25s linear;padding:0 20px}
.toggle_rf{z-index:2}
.container2_rf{z-index:1002;right:0;left:0;width:100%}
.rattrap{height:132px;margin-top:20px}
.h1ville{color:var(--mh-blue)}
.tableaux_h1ville{width:95%;border:0;text-align:center;border-radius:10px;margin:10px auto auto}
.h2ville{display:inline;margin-right:10px;margin-left:10px}
.t1{font-weight:bold;color:#FFF;text-align:left;font-size:13px}
.pli{min-width:95%;width:100%}
.sousbarrehoribleuold{text-decoration:none;font-size:12px;text-align:justify;background-color:#7C8184;border-radius:7px;margin:15px auto auto;padding:0 5px 10px}
.me1{display:inline-block;text-align:center;max-width:35%;margin-left:0;vertical-align:middle;border-radius:0;border-top-left-radius:7px;border-top-right-radius:7px;border-bottom:2px solid #7C8184;padding:5px 15px}
.me2{display:inline-block;text-align:center;max-width:45%;margin-left:1%;vertical-align:middle;border-radius:0;border-top-left-radius:7px;border-top-right-radius:7px;border:1px solid #eee;border-bottom:none;background-color:#CAD7D3;padding:5px 15px}
.eff_tab{margin-top:0;border-radius:0px}
.a_m_col{color:#0E5BA0;text-decoration:none}
.bord_inp{border:none;border-radius:3px}
.int_date{color:#A9A9A9;padding:5px}
.tab_suiv{width:40%;text-align:center;margin:auto}
.gchiffre{font-size:15px}
.gact{color:#7C8184}
.rr1{margin-left:auto;margin-right:auto;width:75%}
.rr2{margin-top:5px;margin-bottom:5px;font-size:10px}
.cont1{text-align:center;overflow:hidden;position:relative;margin:15px auto 10px}
.cont2{overflow:hidden;position:relative;display:inline-block;text-align:left;min-width:30%;padding-left:12%;vertical-align:top}
.dec{margin-left:0}
.entrecatmilieu{margin-bottom:5px}
.esp_drap{display:inline;text-overflow: ellipsis;word-wrap: break-word}
.esp_drap>.categoriegauchepays{margin-right:13px;line-height:2}
.p_accueil{text-align:left;font-size:13px;width:65%;height:0;margin:10px auto}
.mil{font-size:12px;font-weight:bold;margin-right:15px}
.td_acc{width:33%;text-align:left;vertical-align:top;padding-left:7px}
.categoriemilieu_s{color:#000;font-size:14px}
.ti_me{position:absolute;opacity:0.75;background:#000;width:130px;height:35px}
.ti_me2{color:#FFF;font-weight:bold}
.dtpl1{padding-bottom:5px;border-bottom:2px dotted #D3D3D3}
.dtpl2{padding-left:5px}
.dtpl3{margin-top:10px}
.u_a{color:#000;font-weight:bold;cursor:help}
a,.ui-tabs .ui-tabs-nav li a,.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a{cursor:pointer}
br.both,.ui-helper-clearfix:after,.affsite_both,.clearfix_rf:after{clear:both}
.ui-helper-hidden,.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle,#toggle_rf,.toggle_rf{display:none}
.ui-accordion .ui-accordion-icons,.ui-accordion .ui-accordion-icons .ui-accordion-icons{padding-left:2.2em}
.ui-button-text-only .ui-button-text,input.ui-button{padding:.4em 1em}
.ui-datepicker select.ui-datepicker-month-year,.affsite3{width:100%}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-multi .ui-datepicker-group,.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group,.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset,.div_droite{float:right}
.ui-menu-icons,.ui-resizable{position:relative}
.ui-slider-horizontal .ui-slider-range-min,.unit-rating a.r1-unit,#imageContainer >#hoverNav{left:0}
.ui-slider-vertical .ui-slider-range-min,.ui-spinner-down{bottom:0}
.ui-slider-vertical .ui-slider-range-max,.ui-spinner-up{top:0}
.ui-widget-content a,.ui-widget-header a{color:#222}
.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#212121;text-decoration:none}
.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a,.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a}
.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary,#imageData #caption,.cri_lien,.gact2{font-weight:bold}
.ui-icon,.ui-widget-content .ui-icon,.ui-widget-header .ui-icon{background-image:url(images/ui-icons_222222_256x240.png)}
.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-state-active .ui-icon{background-image:url(images/ui-icons_454545_256x240.png)}
.ui-icon-carat-1-n,.gn-number_0{background-position:0 0}
.ui-icon-carat-1-ne,.flag.flag-ad{background-position:-16px 0}
.ui-icon-carat-1-e,.flag.flag-ae{background-position:-32px 0}
.ui-icon-carat-1-se,.flag.flag-af{background-position:-48px 0}
.ui-icon-carat-1-s,.flag.flag-ag{background-position:-64px 0}
.ui-icon-carat-1-sw,.flag.flag-ai{background-position:-80px 0}
.ui-icon-carat-1-w,.flag.flag-al{background-position:-96px 0}
.ui-icon-carat-1-nw,.flag.flag-am{background-position:-112px 0}
.ui-icon-carat-2-n-s,.flag.flag-an{background-position:-128px 0}
.ui-icon-carat-2-e-w,.flag.flag-ao{background-position:-144px 0}
.ui-icon-seek-start,.ui-icon-seek-first{background-position:-80px -160px}
.space_gauche,.mg8{margin-bottom:10px}
.annonce5,.annonce14,.annonce19{font-weight:bold;font-size:14px}
.annonce6,.annonce20{color:green;font-weight:bold;font-size:12px}
.annonce7,.annonce21{color:red;font-weight:bold;font-size:12px}
.annonce8,.lien_favoris:hover{color:red;font-weight:bold}
.annonce9,.textemenu0:hover,.lien_1:hover,.lien_2:hover,.affsite22:hover{color:red}
.annonce11,to{padding:0}
.annonce15,.nom_rpc,.affsite5{font-size:14px;font-weight:bold}
.img_ann,.td_img_ann,.td_img_ann img{width:158px;height:113px;object-fit: cover}
.textemenu0,.textemenu1{color:#FFF}
.textemenu1:hover,.col_tta{color:#CCC}
.textemenu_bas a:hover,a .textemenu_bas:hover,.categoriemilieu:hover{text-decoration:underline}
.lien_3:hover,.affsite22{color:green}
.visit,.affsite14{font-size:9px}
img,#lightbox a img{border:none}
.affsite13,.t2{text-align:left}
@media (min-width:1030px) {
.div_top_rf{margin:0 auto}
.barre_haut_1{background-color:var(--mh-blue);width:100%;height:7px}
.tab_bandeau{border-collapse:collapse;text-align:center;background-color:#FFF;width:100%}
.tab_bandeau td{padding:0}
.tab_bandeau_td_1{text-align:left;width:10%}
.tab_bandeau_td_2{vertical-align:bottom;background-color:#FFF;text-align:left;width:355px;margin-left:20px;margin-bottom:10px}
.tab_bandeau_td_3{text-align:left}
.tab_bandeau_td_3 span{font-weight:bold;font-size:11px}
}
@media (max-width:768px) {
h1 {font-size:24px;line-height: 1.3;margin: 16px 0 12px 0;}
.categoriegauchepays{display:block;margin-bottom:10px}
.categoriemilieu_s{display:block}
.mil{display:block;margin-top:10px;margin-bottom:3px}
.imgp{width:120px}
.pimg{float:left;padding-right:5px;margin-top:0}
.mobilehaut{font-weight:bold;font-size:12px;padding-top:5px;padding-bottom:5px;width:100%}
.h1annoncemobile{font-size:14px}
.h2annoncemobile{margin-top:0;margin-bottom:0}
.intmobile{margin-top:0;padding:5px}
.car{width:100%;height:150px}
.mo{margin-top:0;border-top:none}
.bouton_mobile{width:100%;font-weight:bold;font-size:20px}
.dernier_item{display:none}
body{width:auto;background:#FFF;margin:0;padding:0}
img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video{max-width:100%}
img{height:auto;width:auto;box-sizing:border-box}
textarea,table,td,th,code,pre,samp{word-wrap:break-word;hyphens:auto}
code,pre,samp{white-space:pre-wrap}
element1,element2{float:none;width:auto}
.hide_mobile{display:none!important}
.mobile{display:block!important}
.imgdiv{width:95%;max-width:350px;margin:auto}
.h1accueil{font-size:25px;margin-top:0}
.barrehoribleu{width:100%;font-size:15px;margin:0;padding:0}
.texteta{font-size:17px;margin-left:15px}
.tableau_de_gauche{border:none}
.tab_prin{width:100%;margin:0}
.lita{display:block;margin-right:0;margin-bottom:10px}
.nom_rpc{font-size:15px;font-weight:bold}
.ville_rpc{display:inline;position:relative;left:800px}
.ville_rpc2{display:inline;text-align:left}
.vib_rpc{display:inline;position:relative;left:0}
.vib_rpc2{display:inline;position:relative;left:-70px}
.vib_rpc3{display:inline;position:relative;left:-74px}
.vib_rpc4{display:inline;position:absolute;left:800px;text-align:left}
.carte_mobile{border:1px solid #B8D6C2;width:100%;height:300px;margin-top:10px}
a{font-size:13px}
.td_img_ann{width:158px;height:113px;margin-left:0;padding-left:0}

.affsite3{border-collapse:collapse;margin:auto}
header:after{content:"";display:block;color:#777;text-align:center;font-style:italic;font-size:14px;padding-top:0;padding-bottom:5px}
.champ_mobile,.tableco,.div_top_rf,.tableau1,.sousbarrehoribleu,.sousbarrehoribleu table,.imgbanniere img{width:100%}
.item15,.item40,.item13{margin-left:0}
#top,.inttab{border:none;width:100%}
.sousbarrehoribleu input[type=text],.suggestionsBox{width:100%;font-size:15px}

.img_ann,.td_img_ann img{width:158px;height:113px;object-fit: cover}
}
@media (max-device-width:768px) and (orientationlandscape) {
html{-webkit-text-size-adjust:100%}
}
@media only screen and (max-width:768px) {
.proder{display:block;margin-bottom:10px}
.m_prin{text-align:center;margin:auto}
.ins_m{margin-left:0}
.menu_rf{display:none;opacity:0;width:100%;position:absolute;right:0;top:122px;background:#000;margin-top:45px;}
.menu_rf > li{display:block;width:100%;margin:0;}
.menu_rf > li > a{display:block;width:100%;text-decoration:none;box-sizing:border-box;font-size:16px;padding:8px 5px 8px 13px}
.toggle_rf{display:block;position:relative;cursor:pointer;user-select:none}
#toggle_rf:checked ~ .menu_rf{display:block;opacity:1}
.navmenu_rf{margin-top:-60px}
.menu_rf,.menu_rf > li,.menu_rf > li > a{height:auto}
.menu_rf > li > a:hover,.menu_rf > li > a:focus{background:#F2F2F2;box-shadow:inset 5px 0 #51C1F1;color:#000;padding:8px}
.header_rf{min-height:18px}
.toggle_rf:after{content:'Menu';font-weight:bold;display:block;background:var(--mh-blue);border-radius:2px;font-size:16px;color:#FFF;transition:all .5s linear;box-sizing:border-box;text-align:center;width:100%;margin:10px 0;padding:10px 50px}
.toggle_rf:hover:after{background:#51C1F1}
#toggle_rf:checked + .toggle_rf:after{content:'X Menu'}
.header_rf > h1{text-align:center}
.header_rf > h1,.navmenu_rf,.toggle_rf:after{float:none}
.container2_rf{position:relative}
.rattrap{height:142px;margin-top:10px}
.tab_suiv{width:100%}
.gchiffre{font-size:20px}
.ins_m:after,.ins_m:before{content:""}
}
@media (max-width:767px) {
.me1,.me2{padding:5px}
.texteta{font-size:15px}
}
@media (max-width:640px) {
.p_accueil{width:95%;height:10px}
.esp_drap{margin-right:4px;display:block}
.entrecatmilieu{margin-top:10px}
.cont2{display:block;padding-left:5px}
.deb_reg{display:inline}
.deb_reg:after{content:' - '}
.hh{font-size:15px}
}
.pk{font-size:14px}
.newdroite{display: table-cell;padding-right:15px;padding-left:15px;width:265px;vertical-align:top;text-align:center}




.fi{width:11px}
.ensemble_chambre{float:left;width:65px;min-width:65px;padding-left:15px;padding-top:0px;margin-top:4px}
.det_chambre{margin-left:10px;margin-bottom:10px;background:#EEEEEE;padding-left:5px;padding-bottom:5px;padding-top:5px}
.both_chambre{clear:both}

h3{font:bold 100% Arial,sans-serif;font-size:18px;font-weight:bold;margin:5px 0 0;padding:0}
.h3_chambre{margin-left:1px;font-size: 18px;letter-spacing:1px;display: inline;border-bottom: 1px dashed #555;color:#545759}
.h3_chambre,.di_per{position:relative;text-decoration:none}
.h3_presta{color: #2F8143;font-weight: bold;margin-bottom:15px;font-size:18px}
@media (max-width:640px){
    .h3_presta{
        font-size: 17px;
    }
	h3{
        font-size: 17px;
    }
}


@media (min-width:640px){

	.h3_chambre:hover,.di_per:hover{}
	.h3_chambre:hover span,.di_per:hover span{display:block;position:absolute;top:1.5em;left: 4em;width:17px;border: 1px solid #CCC;background-color:#EEEEEE;color:#0E5B95;text-align:center;font-weight:none;padding:3px;}
}
.h3_chambre span,.di_per span{display:none}
				.table_div {display: block}
				.cell{display:block;padding:0;width:100%;max-width:100%}
				.cell2{display:block;padding:0;width:100%}
				.espa_ppp{text-decoration: none;margin-bottom:5px}
				.espa_ppp i{margin-right:15px}
				.div_presta{margin-bottom:20px}
				.div_ppp{display:table-cell;padding-left:10px;width:25%}
				.bloc_infos{float:left;margin-top:2px;width:25%}
				@media (max-width:640px){
					.div_ppp{display:block;padding-left:10px;width:100%}
					.bloc_ppp{clear:both}
					.bloc_infos{padding-left:10px;width:100%;margin-bottom:15px}
				}
						.fullscreen-icon {background-image: url(/leaflet/icon-fullscreen.png)}
						#map:-webkit-full-screen {width: 100% !important; height: 100% !important; z-index: 99999}
						#map:-moz-full-screen {width: 100% !important; height: 100% !important; z-index: 99999}
						#map:full-screen {width: 100% !important; height: 100% !important; z-index: 99999}
						.leaflet-pseudo-fullscreen {position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999}
						.leaflet-google-layer{z-index: 0 !important}
						.leaflet-map-pane{z-index: 100}
						#map{width: 100%;height: 400px}
.null{margin-left:15px}

				.inp_con{width:95%;}
				.inp_hei{margin-bottom:5px;margin-top:0px}
				.tab1{display: table-cell}
				.tab2{display: table-cell;vertical-align:top;padding-left:5px}
				
@media (max-width: 768px) {
    #map {
        width: 100% !important;
        height: 250px !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
   
   
    .leaflet-container {
        max-width: 100% !important;
        width: 100% !important;
    }
	
	.cad_info{padding-left:0px;padding-right:0px}
   
    .interieur_cadre_annonce {
        margin: 10px 5px !important;
    }
   
}


.pho_ann {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .pho_ann {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}


/* =====================================================================
   COMPOSANTS — styles migrés des <style> inline des partials/pages
   ---------------------------------------------------------------------
   Convention : 1 section par fichier source. Préfixe `mh-` pour ne
   pas rentrer en conflit avec les classes legacy de ce fichier.
   Tous les <style> blocks ont été extraits et regroupés ici pour
   bénéficier du cache HTTP du navigateur (1 seul fichier .css).
   ===================================================================== */

/* ---------- partial_head.php ---------- */
.barre_proprio {
    display: inline-flex;
    align-items: center;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #d4d4d4;
    border: 1px solid #b0b0b0;
    border-radius: 4px;
    padding: 11px 13px 5px;
    font-size: 14px;
    z-index: 1003;
    color: #444;
    text-align: right;
}
.barre_proprio a {
    color: #444;
    text-decoration: none;
    display: block;
    line-height: 1.6;
    white-space: nowrap;
}
.barre_proprio a:hover {
    color: #0E5B95;
    text-decoration: underline;
}
.sep_proprio { display: none; }
.barre_proprio a { display: inline; }

/* Bouton "Déconnecter" — même style que les autres liens de la barre,
   juste un peu plus opacifié pour ne pas concurrencer "Espace propriétaire". */
.barre_proprio .mh-topbar-logout {
    opacity: .85;
}
.barre_proprio .mh-topbar-logout:hover {
    opacity: 1;
    text-decoration: underline;
}
.sep_proprio { display: inline; color: #aaa; margin: 0 8px; }

@media (max-width: 769px) {
    .barre_proprio {
        right: 1px;
        padding-top: 25px;
        padding-bottom: 0px;
        margin-bottom: -20px;
        display: block;
        position: static;
    }
    .plus_prop { display: none; }
}

.mh-nav-search {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 0;
}
li.mh-nav-search {
    height: auto !important;
    float: none !important;
}
@media (min-width: 770px) {
    .menu_rf {
        position: relative !important;
    }
}
.mh-nav-search input {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    background: #fff;
    border: none;
    border-radius: 3px;
    padding: 0 28px 0 9px;
    height: 24px;
    width: 255px;
    outline: none;
    box-sizing: border-box;
    vertical-align: middle;
}
.mh-nav-search input::placeholder { color: #999; font-size: 16px; }
.mh-nav-search-ico {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    user-select: none;
}
.mh-nav-search-ico:hover { color: #0E5B95; }

.mh-ac-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: #0E5B95;
    border-radius: 50%;
    animation: mh-spin .6s linear infinite;
    vertical-align: middle;
}
@keyframes mh-spin { to { transform: rotate(360deg); } }

.mh-nav-ac {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    left: 0;
    background: #fff;
    border: 1px solid #0E5B95;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    z-index: 99999;
    overflow: hidden;
    display: none;
    min-width: 240px;
}
.mh-nav-ac.open { display: block; }
.mh-nav-ac-item {
    padding: 7px 12px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mh-nav-ac-item:last-child { border-bottom: none; }
.mh-nav-ac-item:hover, .mh-nav-ac-item.mh-active {
    background: #eef5fc;
}
.mh-nav-ac-item::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0E5B95;
    flex-shrink: 0;
    align-self: center;
}
.mh-nav-ac-item.mh-ac-annonce::before {
    background: #e07b00;
}
.mh-nav-ac-item.mh-ac-cat::before {
    background: #5a2d82;
}
.mh-ac-section-label {
    padding: 5px 12px 3px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #f7f9fc;
    border-bottom: 1px solid #eef2f7;
}
.mh-ac-section-label.mh-ac-section-annonce,
.mh-ac-section-label.mh-ac-section-cat {
    border-top: 2px solid #eef2f7;
}
.mh-ac-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mh-ac-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.mh-ac-nom { font-size: 13px; font-weight: bold; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ac-nom mark { background: none; color: #0E5B95; font-weight: bold; padding: 0; }
.mh-ac-annonce .mh-ac-nom mark { color: #e07b00; }
.mh-ac-cat .mh-ac-nom mark { color: #5a2d82; }
.mh-ac-cp { font-size: 11px; color: #999; white-space: nowrap; flex-shrink: 0; }
.mh-ac-dept { font-size: 11px; color: #777; margin-top: 1px; }
.mh-ac-noresult {
    padding: 10px 12px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #999;
    font-style: italic;
    text-align: center;
}

.mh-mobile-search-wrap {
    display: none;
}
@media (max-width: 769px) {
    .header_rf {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .mh-logo-link {
        display: block;
        line-height: 0;
    }
    .mh-mobile-search-wrap {
        display: block;
        width: 100%;
        padding: 6px 10px;
        background: #0a4a7a;
        box-sizing: border-box;
        position: relative;
        order: 2;
        z-index: 99999;
    }
    .navmenu_rf {
        order: 3;
        margin-top: 0 !important;
        float: none !important;
        position: relative;
        z-index: 9999;
    }
    .menu_rf {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
    }
    #toggle_rf:checked ~ .menu_rf {
        position: absolute !important;
        top: calc(100% + 35px) !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        z-index: 9999;
    }
    .mh-mobile-search-wrap input {
        width: 100%;
        font-family: Arial, sans-serif;
        font-size: 16px;
        color: #1a1a1a;
        background: #fff;
        border: none;
        border-radius: 3px;
        padding: 7px 32px 7px 10px;
        outline: none;
        box-sizing: border-box;
    }
    .mh-mobile-search-ico {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #0E5B95;
        font-size: 14px;
        cursor: pointer;
        padding: 4px;
        user-select: none;
    }
    .mh-mob-ac {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #0E5B95;
        border-top: none;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 4px 16px rgba(0,0,0,.15);
        z-index: 99999;
        max-height: 260px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: none;
    }
    .mh-mob-ac.open { display: block; }
    .rattrap {
        height: 55px !important;
        margin-top: 0 !important;
    }
}

/* ---------- partial_topbar.php ---------- */
/* === Override du padding des liens du menu desktop ============
   Le CSS legacy (css_new.css ligne 1176) impose `padding: 0 20px` sur
   chaque lien du menu = 40 px d'écart total entre 2 liens. Trop large,
   le lien "Favoris" passait sous la barre de recherche. On réduit à 10 px
   par côté. En mobile (≤ 769 px), le menu est déplié verticalement par
   le legacy → pas de souci, on ne touche pas. */
@media (min-width: 770px) {
    .menu_rf > li > a {
        padding: 0 10px !important;
    }
}

/* Compteur de favoris dans le menu — chiffre entre parenthèses + caché par
   défaut, JS le révèle si > 0. */
.mh-fav-link-count:empty { display: none; }
.mh-fav-link-count {
    background: #d63862;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 5px;
    line-height: 1.4;
    vertical-align: middle;
}

/* === Toast global : "Favori ajouté" / "Favori retiré" =================
   Position fixed bottom-right, fond foncé. Affiché via window.mhToast(msg).
   Disparaît automatiquement au bout de 2,5s par défaut. */
.mh-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #222;
    color: #fff;
    padding: 12px 22px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    z-index: 99999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .25s, transform .25s;
    /* pointer-events: none → on bascule à 'auto' en JS quand on a un lien,
       sinon les liens ne seraient pas cliquables. */
    pointer-events: none;
    font-size: 14px;
    font-weight: bold;
    max-width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.mh-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.mh-toast.has-actions { pointer-events: auto; }
.mh-toast-msg { line-height: 1.3; }
.mh-toast-actions {
    display: flex;
    gap: 12px;
    font-size: 13px;
    font-weight: normal;
}
.mh-toast-actions a,
.mh-toast-actions .mh-toast-btn {
    color: #6cb8f7;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.mh-toast-actions a:hover,
.mh-toast-actions .mh-toast-btn:hover { color: #fff; }
@media (max-width: 600px) {
    .mh-toast {
        left: 10px;
        right: 10px;
        bottom: 10px;
        text-align: center;
    }
}

/* ---------- partial_carte_leaflet.php ---------- */
.mh-map-wrap {
    position: relative;
    margin-bottom: 18px;
}
#mh-map {
    height: 250px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #dde3e8;
    background: #eee;
}
.mh-map-wrap.is-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: 0;
    z-index: 99999;
    background: #fff;
}
.mh-map-wrap.is-fullscreen #mh-map {
    height: 100% !important;
    border-radius: 0;
    border: 0;
}
.mh-map-fs-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: #fff;
    color: #222;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mh-map-fs-btn:hover { background: #f0f0f0; }
.mh-map-fs-btn::before { content: '⛶'; font-size: 16px; line-height: 1; }
.mh-map-wrap.is-fullscreen .mh-map-fs-btn::before { content: '✕'; }
.leaflet-popup-content { margin: 8px 12px; font-size: 13px; line-height: 1.4; }
.leaflet-popup-content img { display: block; width: 160px; height: 100px; object-fit: cover; border-radius: 4px; margin-bottom: 6px; }
.leaflet-popup-content .mh-popup-nom { font-weight: bold; color: #0E5B95; font-size: 14px; text-decoration: none; display: block; }
.leaflet-popup-content .mh-popup-nom:hover { text-decoration: underline; }
.leaflet-popup-content .mh-popup-ville { color: #666; display: block; }
.leaflet-popup-content .mh-popup-prix { color: #222; font-weight: bold; margin-top: 4px; display: block; }
.leaflet-popup-content .mh-popup-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #555;
    font-size: 12px;
    font-style: italic;
    margin-top: 4px;
}
.leaflet-popup-content .mh-popup-cat::before {
    content: '';
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--mh-cat-color, #666);
    flex-shrink: 0;
}

/* === Markers colorés (via L.divIcon) ============================
   Goutte CSS pure, centrée sur les coords (anchor = bas-centre). */
.mh-pin {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* === Légende sous la carte ===================================== */
.mh-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: -8px 0 18px 0;
    padding: 8px 12px;
    background: #f7f9fc;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    font-size: 12px;
    color: #444;
}
.mh-map-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.mh-map-legend-swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    flex-shrink: 0;
}

/* ---------- partial_annonce_card.php ---------- */
.mh-annonce {
    background: #fff;
    border: 1px solid #e2e2e2;
    margin-bottom: 14px;
    font-size: 14px;
}
.mh-annonce-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e5e5e5;
    padding: 6px 14px;
}
.mh-annonce-hd-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.mh-annonce-hd-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.mh-fav-btn {
    background: none;
    border: 0;
    padding: 2px;
    cursor: pointer;
    color: #777;
    line-height: 0;
    transition: color .15s, transform .15s;
}
.mh-fav-btn:hover { color: #d63862; transform: scale(1.15); }
.mh-annonce.is-favorite .mh-fav-btn { color: #d63862; }
.mh-annonce.is-favorite .mh-fav-btn svg path { fill: currentColor; }
.mh-map-btn {
    background: none;
    border: 0;
    padding: 2px;
    cursor: pointer;
    color: #0E5B95;
    line-height: 0;
    transition: color .15s, transform .15s;
}
.mh-map-btn:hover { color: #1a8fd6; transform: scale(1.15); }
.mh-capacite {
    display: inline-block;
    font-size: 13px;
    color: #555;
    margin-left: 4px;
    white-space: nowrap;
}
.mh-annonce-hd a {
    color: #0E5B95;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
}
.mh-annonce-hd a:hover { text-decoration: underline; }
.mh-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
}
.mh-badge-tete  { background: #d4a017; }
.mh-badge-spons { background: #5e8a3a; }
.mh-annonce-vu {
    font-size: 12px;
    color: #888;
    display: none;
    align-items: center;
    gap: 6px;
}
.mh-annonce.is-visualised .mh-annonce-vu { display: flex; }
.mh-annonce-bd { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
.mh-annonce-img {
    width: 200px; height: 135px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
    background: #eee;
}
.mh-annonce-img-placeholder {
    width: 200px; height: 135px;
    flex-shrink: 0;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
    font-style: italic;
}
.mh-annonce-info { flex: 1; min-width: 0; }
.mh-annonce-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.mh-annonce-row:last-child { margin-bottom: 0; }
.mh-tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
}
.mh-tag-type  { background: #6e6e6e; }
.mh-tag-ville { background: #b32f5c; }
.mh-tag-prix  { background: #6e6e6e; }
.mh-tag-prix-num {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    margin-right: 4px;
}
.mh-tag-prix-rest {
    font-size: 12px;
    font-weight: normal;
    opacity: .85;
    line-height: 1;
}
.mh-annonce-acroche { margin-top: 4px; color: #222; }
.mh-dist-vol {
    color: #0E5B95;
    font-size: 12px;
    font-style: italic;
    margin-left: 4px;
}

/* ---------- partial_alaune_card.php ---------- */
/* Style aligné sur la page favoris (.mh-fav-card) — variante sans le bouton
   "retirer". Préfixe .mh-alaune-card pour éviter tout conflit avec .mh-fav-card. */
.mh-alaune-card {
    background: #fff;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;        /* permet aux conteneurs flex/table de NE PAS expanser */
    max-width: 100%;
    box-sizing: border-box;
}
.mh-alaune-card-hd {
    background: #e5e5e5;
    padding: 6px 14px;
    /* Crucial : sans min-width:0 + overflow:hidden + display:block sur l'<a>,
       un nom d'hébergement très long peut pousser la carte à grandir
       (text-overflow: ellipsis n'agit que sur les block/inline-block, pas
       sur les <a> inline natifs). */
    display: block;
    min-width: 0;
    overflow: hidden;
}
.mh-alaune-card-hd a {
    display: block;
    width: 100%;
    max-width: 100%;
    color: #0E5B95;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
/* L'arbre est <a><picture><source><img></picture></a>. Pour éviter qu'un
   élément inline (le <a>) ne se base sur la taille intrinsèque de l'image
   pour calculer sa largeur (ce qui pouvait pousser la cellule table-cell
   .newdroite à grossir et coller la home en mode "colonne droite mangée"),
   on force TOUS les conteneurs de l'image à être block + width:100%. */
.mh-alaune-card > a {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 0;     /* supprime l'espace fantôme inline-baseline sous l'<img> */
}
.mh-alaune-card picture {
    display: block;
    width: 100%;
    max-width: 100%;
}
.mh-alaune-card img {
    width: 100%;
    max-width: 100%;     /* l'image NE force PAS son parent à grandir */
    height: 170px;
    object-fit: cover;
    display: block;
}
.mh-alaune-card-img-empty {
    width: 100%; height: 170px;
    background: #eee;
    display: flex; align-items: center; justify-content: center;
    color: #999; font-style: italic;
}
.mh-alaune-card-body {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #444;
    /* Sécurité : un nom de ville/département très long (sans espaces) ne doit
       pas déborder de la carte (cas légitime + cas data sale). */
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.mh-alaune-card-loc { font-weight: bold; color: #222; }
.mh-alaune-card-prix { color: #6e6e6e; margin-top: 4px; font-weight: bold; }

/* ---------- Titre commun "À LA UNE" (centre home + aside droite) ----------
   Remplace l'ancien bandeau gris .barrehori .d_s par un titre moderne :
   liseré bleu sous le texte, étoile en accent, typographie alignée sur le
   reste du site (var --mh-blue). */
.mh-alaune-title {
    margin: 0 0 14px 0;
    padding: 0 0 8px 0;
    color: var(--mh-blue, #0E5B95);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 2px solid var(--mh-blue, #0E5B95);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mh-alaune-title::before {
    content: '⭐';
    font-size: 18px;
    line-height: 1;
    /* Garde le ratio du texte propre quand la police bascule */
    font-weight: normal;
    letter-spacing: 0;
}
/* Variante compacte pour l'aside droite (265px de large) */
.mh-alaune-title-aside {
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom-width: 1px;
}
.mh-alaune-title-aside::before {
    font-size: 15px;
}

/* ---------- partial_a_la_une.php ---------- */
.mh-alaune-section {
    width: 95%;
    margin: 16px auto;
}
.mh-alaune-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.mh-alaune-grid > .mh-alaune-card {
    flex: 1 1 0;
    min-width: 0;        /* permet l'ellipsis du titre */
}
@media (max-width: 700px) {
    .mh-alaune-grid > .mh-alaune-card { flex: 1 1 100%; }
}

/* ---------- partial_aside_droite.php ---------- */
/* === Verrou strict de largeur de l'aside =================================
   .newdroite (legacy) déclare width:265px en table-cell mais l'algo
   table-cell agrandit la cellule si le contenu interne le demande
   (image sans width explicite, float qui se redimensionne, etc.).
   On verrouille min+max width et on coupe tout overflow horizontal pour
   ne JAMAIS dépasser 265 px, quoi qu'il arrive dans les cartes. */
.newdroite{
    min-width: 265px !important;
    max-width: 265px !important;
    width: 265px !important;
    box-sizing: border-box;
    overflow-x: hidden;
}
.newdroite aside{
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}
/* Nouveau wrapper SANS la classe .div_droite legacy (qui a float:right).
   Le float échappait au flow → la largeur ne suivait plus celle de
   .newdroite et les cartes prenaient leur largeur naturelle (image),
   ce qui faisait paraître la colonne droite "disparue" sur certaines
   annonces aux photos plus larges. */
.mh-aside-alaune-wrap{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Reset si jamais un parent .div_droite legacy traîne en cascade */
    float: none !important;
}
.mh-aside-alaune {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    width: 100%;
}
.mh-aside-alaune .mh-alaune-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- partial_alaune_sidebar.php ---------- */
.mh-alaune-cat {
    margin-bottom: 16px;
}
.mh-alaune-cat-h2 {
    font-size: 13px;
    font-weight: bold;
    background: #6e6e6e;
    color: #fff;
    padding: 5px 12px;
    display: inline-block;
    border-radius: 3px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mh-alaune-cat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mh-alaune-cat-card {
    background: #fff;
    border: 1px solid #ddd;
    overflow: hidden;
}
.mh-alaune-cat-card-title {
    background: #6e6e6e;
    color: #fff;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 13px;
}
/* Titre tronqué avec ellipsis si trop long pour la carte */
.mh-alaune-cat-card-title a {
    color: #fff;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mh-alaune-cat-card-title a:hover { text-decoration: underline; }
.mh-alaune-cat-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.mh-alaune-cat-card-img-empty {
    width: 100%; height: 140px;
    background: #eee;
    display: flex; align-items: center; justify-content: center;
    color: #999; font-style: italic; font-size: 13px;
}
.mh-alaune-cat-card-meta {
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.mh-alaune-cat-card-ville { font-weight: bold; color: #222; }
.mh-alaune-cat-card-dpt   { color: #666; }

/* ---------- partial_chips_filtres.php ---------- */
.mh-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 95%;
    margin: 0 auto 12px;
    padding: 8px 0;
}
.mh-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef4f8;
    color: #0E5B95;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
}
.mh-chip a {
    color: #b32f5c;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
    padding: 0 2px;
}
.mh-chip a:hover { color: #7a1f3d; }
.mh-chips-reset {
    color: #b32f5c;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    margin-left: 4px;
}
.mh-chips-reset:hover { text-decoration: underline; }

/* ---------- partial_filtres_form.php ---------- */
.mh-filters {
    background: #f4f6f8;
    border: 1px solid #dde3e8;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
}
.mh-filter-row { margin-bottom: 14px; }
.mh-filter-row:last-of-type { margin-bottom: 0; }
.mh-filter-label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #222;
    margin-bottom: 6px;
}
.mh-filter-slider-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mh-filter-value {
    font-size: 22px;
    font-weight: bold;
    color: #222;
    min-width: 60px;
    text-align: left;
}
.mh-filter-value.is-zero { color: #aaa; font-weight: normal; font-style: italic; font-size: 14px; }
input[type=range].mh-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #dadfe4;
    outline: none;
    cursor: pointer;
}
input[type=range].mh-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: pointer;
    margin-top: -7px;
}
input[type=range].mh-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: pointer;
}
input[type=range].mh-slider::-moz-range-track { background: transparent; }
.mh-filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.mh-filter-reset {
    color: #b32f5c;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}
.mh-filter-reset:hover { text-decoration: underline; }
.mh-filter-submit { display: none; }
.no-js .mh-filter-submit { display: inline-block; }

/* === Prestations (checkboxes par groupe) ============================ */
.mh-prestations { margin-top: 18px; }
.mh-prestations-title {
    font-size: 15px;
    font-weight: bold;
    color: #222;
    margin: 16px 0 8px 0;
}
.mh-prestations-title:first-child { margin-top: 0; }
.mh-presta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    line-height: 1.3;
}
.mh-presta-item:hover .mh-presta-nom { color: #0E5B95; }
.mh-presta-item input[type=checkbox] {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: #0E5B95;
    flex-shrink: 0;
}
.mh-presta-nom { flex: 1; min-width: 0; }
.mh-presta-count { color: #999; font-size: 11px; flex-shrink: 0; }
.mh-presta-more {
    background: none;
    border: none;
    color: #0E5B95;
    font-size: 13px;
    padding: 6px 0;
    cursor: pointer;
    font-weight: bold;
}
.mh-presta-more:hover { text-decoration: underline; }
.mh-presta-more::before { content: '+ '; }

/* ---------- partial_insolite_tabs.php ---------- */
.mh-ins-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 95%;
    margin: 0 auto 14px auto;
}
.mh-ins-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border-radius: 22px;
    background: #cfd8de;
    color: #0E5B95;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.2;
}
.mh-ins-tab:hover { background: #b8c4cd; }
.mh-ins-tab.is-active {
    background: #0E5B95;
    color: #fff;
    cursor: default;
}
.mh-ins-tab .mh-ins-count {
    font-weight: normal;
    opacity: .85;
    margin-left: 3px;
}
/* Vignette ronde à gauche de chaque tab (image categorie_insolite.img). */
.mh-ins-tab-ico {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
}
/* Tab "Tous" sans icône : on remet du padding gauche pour aligner avec les
   tabs à vignette (sinon le texte colle au bord du pill). */
.mh-ins-tab.mh-ins-tab-plain {
    padding-left: 14px;
}

/* ---------- partial_pagination.php ---------- */
.mh-pagination {
    width: 95%;
    margin: 24px auto;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}
.mh-pag-item {
    display: inline-block;
    min-width: 32px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 2px;
    text-decoration: none;
    color: #0E5B95;
    background: #fff;
}
.mh-pag-item:hover { background: #f0f6fb; }
.mh-pag-item.is-current {
    background: #0E5B95;
    color: #fff;
    font-weight: bold;
    border-color: #0E5B95;
    cursor: default;
}
.mh-pag-gap {
    display: inline-block;
    padding: 6px 4px;
    color: #999;
}
.mh-pag-nav { font-weight: bold; }

/* ---------- partial_sort_bar.php ---------- */
.mh-sort-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    color: #555;
}
.mh-sort-bar select {
    font: inherit;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid #c4cdd5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

/* ---------- partial_type_tabs.php ---------- */
.mh-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px 0;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.mh-type-tab {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    background: #cfd8de;
    color: #0E5B95;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    line-height: 1;
}
.mh-type-tab:hover { background: #b8c4cd; }
.mh-type-tab.is-active {
    background: #6e6e6e;
    color: #fff;
    cursor: default;
}
.mh-type-tab .mh-type-count {
    font-weight: normal;
    opacity: .85;
}

/* ---------- partial_villes_dpt.php ---------- */
.mh-villes-dpt {
    width: 95%;
    margin: 18px auto;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 16px 20px;
}
.mh-villes-dpt h2 {
    font-size: 16px;
    color: #0E5B95;
    margin: 0 0 10px 0;
}
.mh-villes-dpt ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 3;
    column-gap: 20px;
}
.mh-villes-dpt li {
    break-inside: avoid;
    line-height: 1.8;
    padding: 2px 0;
}
.mh-villes-dpt a {
    color: #0E5B95;
    text-decoration: none;
    font-size: 15px;
}
.mh-villes-dpt a:hover { text-decoration: underline; }
.mh-villes-dpt .mh-villes-dpt-cp {
    color: #888;
    font-size: 13px;
    margin-left: 4px;
}
.mh-villes-dpt .mh-villes-dpt-dist {
    color: #0E5B95;
    font-size: 12px;
    font-style: italic;
    margin-left: 4px;
}
@media (max-width: 700px) {
    .mh-villes-dpt ul { column-count: 2; }
}
@media (max-width: 480px) {
    .mh-villes-dpt ul { column-count: 1; }
}

/* ---------- page_home.php ---------- */
        #table_div { display: table; width:100% }
        .cell  { display: table-cell; padding-left:5px;  width:55%; vertical-align:top; text-align:center }
        .cell2 { display: table-cell; padding-right:15px; padding-left:15px; width:45% }
        li { text-align:left; line-height:22px; }
        @media (max-width:640px){
            #table_div { display: block }
            .cell  { display: block; padding: 0; width: 100%; max-width: 100% }
            .cell2 { display: block; padding: 0; width: 100% }
        }

/* ---------- page_category.php ---------- */
        /* Layout responsive (alignement legacy 95% + sticky sidebar) */
        .mh-cat-layout {
            width: 95%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        .mh-cat-left {
            width: 280px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 10px;
            align-self: flex-start;
            max-height: calc(100vh - 20px);
            overflow-y: auto;
        }
        .mh-cat-main { flex: 1 1 auto; min-width: 0; }
        .mh-mobile-filter-toggle { display: none; }
        @media (max-width: 900px) {
            .mh-cat-layout { flex-direction: column; }
            .mh-cat-left { display: contents; }
            .mh-cat-sidebar {
                width: 95%;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
                display: none;
            }
            .mh-cat-sidebar.is-open { display: block; }
            .mh-alaune-cat {
                order: 99;
                width: 100%;
                max-width: 420px;
                margin-left: auto;
                margin-right: auto;
                box-sizing: border-box;
                padding: 0 10px;
            }
            .mh-mobile-filter-toggle {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: #0E5B95;
                color: #fff;
                border: none;
                border-radius: 6px;
                padding: 10px 18px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                margin: 0 15px 14px;
            }
            .mh-mobile-filter-toggle:hover { background: #0a4978; }
            .mh-mobile-filter-toggle::before { content: '⚙'; font-size: 16px; line-height: 1; }
        }

/* ---------- page_ville.php ---------- */
        .mh-cat-layout {
            width: 95%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        .mh-cat-left {
            width: 280px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 10px;
            align-self: flex-start;
            max-height: calc(100vh - 20px);
            overflow-y: auto;
        }
        .mh-cat-main { flex: 1 1 auto; min-width: 0; }
        .mh-mobile-filter-toggle { display: none; }
        @media (max-width: 900px) {
            .mh-cat-layout { flex-direction: column; }
            .mh-cat-left { display: contents; }
            .mh-cat-sidebar {
                width: 95%;
                margin: 0 auto;
                box-sizing: border-box;
                display: none;
            }
            .mh-cat-sidebar.is-open { display: block; }
            .mh-mobile-filter-toggle {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: #0E5B95;
                color: #fff;
                border: none;
                border-radius: 6px;
                padding: 10px 18px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                margin: 0 15px 14px;
            }
            .mh-mobile-filter-toggle::before { content: '⚙'; font-size: 16px; line-height: 1; }
        }

/* ---------- page_insolite.php ---------- */
        .mh-cat-layout {
            width: 95%;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        .mh-cat-left {
            width: 280px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 10px;
            align-self: flex-start;
            max-height: calc(100vh - 20px);
            overflow-y: auto;
        }
        .mh-cat-main { flex: 1 1 auto; min-width: 0; }
        .mh-mobile-filter-toggle { display: none; }
        @media (max-width: 900px) {
            .mh-cat-layout { flex-direction: column; }
            .mh-cat-left { display: contents; }
            .mh-cat-sidebar {
                width: 95%;
                margin: 0 auto;
                box-sizing: border-box;
                display: none;
            }
            .mh-cat-sidebar.is-open { display: block; }
            .mh-mobile-filter-toggle {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: #0E5B95;
                color: #fff;
                border: none;
                border-radius: 6px;
                padding: 10px 18px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                margin: 0 15px 14px;
            }
            .mh-mobile-filter-toggle::before { content: '⚙'; font-size: 16px; line-height: 1; }
        }

/* ---------- page_favoris.php ---------- */
.mh-fav-page { width: 95%; margin: 20px auto; }
.mh-fav-page h1 { color: #0E5B95; font-size: 24px; margin: 0 0 6px; }
.mh-fav-page .mh-fav-count { color: #666; font-size: 14px; margin-bottom: 18px; }

.mh-fav-empty {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    color: #555;
}
.mh-fav-empty h2 { color: #0E5B95; margin: 0 0 8px; }
.mh-fav-empty p { margin: 0 0 14px; }
.mh-fav-empty .mh-fav-back {
    display: inline-block;
    background: #0E5B95;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
}
.mh-fav-empty .mh-fav-back:hover { background: #0a4a7a; }

.mh-fav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.mh-fav-card {
    flex: 0 1 280px;
    background: #fff;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mh-fav-card-hd {
    background: #e5e5e5;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.mh-fav-card-hd a {
    color: #0E5B95;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.mh-fav-card-remove {
    background: none;
    border: 0;
    color: #b32f5c;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
}
.mh-fav-card-remove:hover { color: #7a1f3d; }
.mh-fav-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.mh-fav-card-img-empty {
    width: 100%; height: 170px;
    background: #eee;
    display: flex; align-items: center; justify-content: center;
    color: #999; font-style: italic;
}
.mh-fav-card-body {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #444;
}
.mh-fav-card-loc { font-weight: bold; color: #222; }
.mh-fav-card-prix { color: #6e6e6e; margin-top: 4px; font-weight: bold; }

/* ---------- page_diagnostic.php ---------- */
/* Styles autonomes du diagnostic — ne dépend pas de css_new.css.
   Why: css_new.css est le CSS legacy du site public, il peut imposer des
   règles sur table/h1/etc. qui rendraient le diagnostic illisible. On
   préfère isoler le diagnostic dans un .diag-wrap. */
.diag-wrap { max-width: 1100px; margin: 1.5em auto; padding: 0 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #222; line-height: 1.5; background: #fff; }
.diag-wrap h1 { color: #b35; }
.diag-wrap h2 { border-bottom: 2px solid #0E5B95; padding-bottom: .3em; margin-top: 2em; color: #0E5B95; }
.diag-wrap table.countries { width: 100%; border-collapse: collapse; background: #fff; margin-top: .8em; }
.diag-wrap table.countries th, .diag-wrap table.countries td { padding: .5em .7em; border: 1px solid #eee; text-align: left; font-size: .92em; vertical-align: top; }
.diag-wrap table.countries th { background: #f4f4f4; font-weight: 600; }
.diag-wrap code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; font-size: .85em; }
.diag-wrap ul { columns: 2; }

/* ---------- page_carte.php ---------- */
.mh-carte-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
}
.mh-carte-header {
    width: 95%;
    margin: 12px auto 10px;
    text-align: center;
}
.mh-carte-header h1 {
    color: var(--mh-blue);
    font-size: 22px;
    margin: 0 0 4px;
}
.mh-carte-count {
    color: var(--mh-text-muted);
    font-size: 13px;
    margin: 0;
}
.mh-carte-count strong { color: var(--mh-text); }
.mh-carte-hint { color: var(--mh-text-faint); font-style: italic; }
.mh-carte-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
#mh-carte-global {
    width: 100%;
    height: calc(100vh - 240px);
    min-height: 460px;
    border-top: 1px solid var(--mh-border);
    border-bottom: 1px solid var(--mh-border);
    background: #eee;
}
/* Plein écran : fixe la carte sur tout l'écran, z-index au-dessus de tout. */
.mh-carte-wrap.is-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    background: #fff;
}
.mh-carte-wrap.is-fullscreen #mh-carte-global {
    height: 100% !important;
    border: 0;
    border-radius: 0;
}
.mh-carte-fs-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: #fff;
    color: var(--mh-text);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: var(--mh-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--mh-shadow-soft);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mh-carte-fs-btn:hover { background: #f0f0f0; }
.mh-carte-fs-btn::before { content: '⛶'; font-size: 16px; line-height: 1; }
.mh-carte-wrap.is-fullscreen .mh-carte-fs-btn::before { content: '✕'; }

@media (max-width: 768px) {
    #mh-carte-global { height: calc(100vh - 220px); }
    .mh-carte-header h1 { font-size: 18px; }
    .mh-carte-hint { display: none; }
}

/* États de chargement / erreur dans les popups carte globale */
.leaflet-popup-content .mh-popup-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mh-text-muted);
    font-style: italic;
    padding: 4px 0;
}
.leaflet-popup-content .mh-popup-error {
    color: #b32f5c;
    font-size: 13px;
    padding: 4px 0;
}
.leaflet-popup-content .mh-popup-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: var(--mh-blue);
    border-radius: 50%;
    animation: mh-popup-spin .6s linear infinite;
}
@keyframes mh-popup-spin { to { transform: rotate(360deg); } }

/* ---------- page_contact.php ---------- */
.mh-contact-page {
    width: 95%;
    max-width: 800px;
    margin: 16px auto 32px;
    color: var(--mh-text);
    font-size: 15px;
    line-height: 1.6;
}
.mh-contact-page h1 {
    color: var(--mh-blue);
    font-size: 26px;
    margin: 6px 0 18px;
    border-bottom: 2px solid var(--mh-blue);
    padding-bottom: 6px;
}
.mh-contact-page h2 {
    color: var(--mh-blue);
    font-size: 19px;
    margin: 0 0 12px;
}
.mh-contact-page h3 {
    color: var(--mh-text);
    font-size: 15px;
    font-weight: bold;
    margin: 14px 0 6px;
}
.mh-contact-block {
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
    padding: 18px 22px;
    margin-bottom: 18px;
}
.mh-contact-warn {
    background: #fff8e1;
    border: 1px solid #f0c674;
    border-radius: var(--mh-radius);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
}
.mh-contact-coords p { margin: 0 0 10px; }
.mh-contact-coords p:last-child { margin-bottom: 0; }
.mh-contact-small { color: var(--mh-text-muted); font-size: 13px; }
.mh-contact-mail-at {
    color: var(--mh-pink-dark);
    font-weight: bold;
    font-size: 12px;
    padding: 0 4px;
    vertical-align: middle;
}
.mh-contact-list { padding-left: 22px; margin: 6px 0; }
.mh-contact-list li { margin-bottom: 4px; }

/* === Formulaire ====================================================== */
.mh-contact-form { display: flex; flex-direction: column; gap: 14px; }
.mh-contact-row { display: flex; flex-direction: column; gap: 4px; }
.mh-contact-row label {
    font-weight: bold;
    font-size: 14px;
    color: var(--mh-text);
}
.mh-contact-req { color: var(--mh-pink-dark); }
.mh-contact-opt { color: var(--mh-text-muted); font-weight: normal; font-size: 13px; }
.mh-contact-form input[type=email],
.mh-contact-form input[type=text],
.mh-contact-form input[type=tel],
.mh-contact-form input[type=number],
.mh-contact-form textarea {
    font-family: inherit;
    font-size: 15px;
    padding: 9px 12px;
    border: 1px solid var(--mh-border-soft);
    border-radius: var(--mh-radius-sm);
    background: #fff;
    color: var(--mh-text);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.mh-contact-form input:focus,
.mh-contact-form textarea:focus {
    outline: 2px solid var(--mh-blue);
    outline-offset: -1px;
    border-color: var(--mh-blue);
}
.mh-contact-form textarea { min-height: 140px; resize: vertical; }
.mh-contact-submit {
    background: var(--mh-blue);
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    border: 0;
    border-radius: var(--mh-radius);
    padding: 12px 24px;
    cursor: pointer;
    align-self: flex-start;
    transition: background .15s;
}
.mh-contact-submit:hover { background: var(--mh-blue-dark); }

/* === Honeypot anti-bot (invisible aux humains) ======================== */
.mh-contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* === Messages succès / erreur ========================================= */
.mh-contact-success {
    background: #e8f5e9;
    border: 1px solid #66bb6a;
    color: #1b5e20;
    padding: 12px 16px;
    border-radius: var(--mh-radius);
    margin-bottom: 14px;
    font-weight: bold;
}
.mh-contact-errors {
    background: #ffebee;
    border: 1px solid #ef5350;
    color: #b71c1c;
    padding: 12px 16px;
    border-radius: var(--mh-radius);
    margin-bottom: 14px;
}
.mh-contact-errors ul { margin: 6px 0 0; padding-left: 22px; }

@media (max-width: 600px) {
    .mh-contact-block { padding: 14px 16px; }
    .mh-contact-page h1 { font-size: 22px; }
    .mh-contact-page h2 { font-size: 17px; }
}

/* ---------- page_site.php (fiche annonce) ---------- */
.mh-site-page {
    width: 95%;
    max-width: 1200px;
    margin: 12px auto 32px;
    color: var(--mh-text);
    line-height: 1.6;
}
.mh-site-breadcrumb {
    background: var(--mh-bg-soft);
    padding: 8px 14px;
    border-radius: var(--mh-radius);
    font-size: 14px;
    color: var(--mh-text-muted);
    margin-bottom: 14px;
}
.mh-site-breadcrumb a { color: var(--mh-blue); text-decoration: none; }
.mh-site-breadcrumb a:hover { text-decoration: underline; }

/* Header bleu (hero) — hiérarchisé en 3 niveaux + chips floating top-right */
.mh-site-hero {
    position: relative;             /* ancre les chips top-right */
    background: linear-gradient(135deg, var(--mh-blue) 0%, var(--mh-blue-light) 100%);
    color: #fff;
    padding: 28px 26px 22px;
    border-radius: var(--mh-radius-lg);
    margin-bottom: 18px;
}
.mh-site-hero h1 {
    font-size: 36px;        /* agrandi pour mieux capter l'œil */
    margin: 0 0 14px;
    color: #fff;
    line-height: 1.2;
    font-weight: bold;
    /* Réserve de la place à droite si les chips sont rendus en absolute
       (on laisse 180px pour ne pas chevaucher sur desktop) */
    padding-right: 180px;
}

/* Chips top-right : star + insolite + numéro enregistrement.
   Mis en absolute pour ne pas se mélanger avec les badges principaux. */
.mh-site-hero-chips {
    position: absolute;
    top: 16px;
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 220px;
}
.mh-site-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 22px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.mh-site-chip-star {
    /* hérite la couleur de .mh-badge-tete / .mh-badge-spons (fond doré/rose).
       On force juste padding + font pour matcher les autres chips. */
    padding: 4px 11px;
    font-size: 12px;
    line-height: 1.2;
}
.mh-site-chip-insolite {
    background: rgba(233,30,99,.92);
    color: #fff;
}
.mh-site-chip-enreg {
    background: rgba(46,125,50,.85);
    color: #fff;
    cursor: help;
}

/* === Niveau 1 : type + ville (badges principaux, format gros) ============ */
.mh-site-hero-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}
.mh-site-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 22px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.mh-site-badge-primary {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.5);
    padding: 8px 18px;
    font-size: 15px;
    font-weight: bold;
}

/* === Niveau 2 : stats (capacité, chambres, surface) — discret =========== */
.mh-site-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin: 0 0 10px;
    font-size: 14px;
    color: rgba(255,255,255,.92);
}
.mh-site-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* === Niveau 3 : presde (ligne pleine largeur, généralement long) ======== */
.mh-site-hero-presde {
    margin: 6px 0 0;
    font-size: 14px;
    color: rgba(255,255,255,.95);
    line-height: 1.5;
}
.mh-site-hero-presde-lbl {
    font-weight: bold;
    margin-right: 4px;
}

.mh-site-acroche {
    margin: 12px 0 0;
    font-size: 16px;
    color: rgba(255,255,255,.95);
    line-height: 1.5;
    font-style: italic;
}

/* Indicateur de fraîcheur (date dermodif) sous le hero */
.mh-site-hero-fresh {
    margin: 12px 0 0;
    padding: 6px 12px;
    background: rgba(0,0,0,.18);
    border-radius: var(--mh-radius-sm);
    font-size: 12px;
    color: rgba(255,255,255,.9);
    display: inline-block;
    cursor: help;
}

/* Responsive : sur petit écran les chips passent en haut (flow normal) */
@media (max-width: 640px) {
    .mh-site-hero h1 { padding-right: 0; font-size: 22px; }
    .mh-site-hero-chips {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        max-width: none;
        margin-bottom: 12px;
    }
    .mh-site-hero-stats { gap: 8px 16px; font-size: 13px; }
}
/* Layout 2 colonnes */
.mh-site-layout {
    display: flex;
    gap: 32px;                /* espace entre contenu principal et sidebar
                                 (desktop only ; en mobile passe en column,
                                 gap géré par override media query) */
    align-items: flex-start;
}
.mh-site-main {
    flex: 1 1 auto;
    min-width: 0;
}
.mh-site-aside {
    /* Aside élargi à 360px → la card prix/capacité/chambre prend toute
       cette largeur (plus aérée, infos lisibles). Le bloc EXTRAS en
       dessous reste limité à 280px pour conserver la calibration des
       cards "à la une / plus proches" (cf. règle dédiée plus bas). */
    width: 360px;
    flex-shrink: 0;
    /* Pas de sticky : avec les extras (À LA UNE + plus proches), l'aside
       devient haut et le sticky cacherait le contenu sous le pli. La card
       prix/contact reste accessible en scrollant normalement. */
}

/* Sidebar card */
.mh-site-aside-card {
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.mh-site-aside-prix {
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mh-border);
}
.mh-site-aside-prix-num {
    font-size: 36px;
    font-weight: bold;
    color: var(--mh-blue);
    line-height: 1;
}
.mh-site-aside-prix-dev {
    font-size: 16px;
    color: var(--mh-blue);
    margin-left: 4px;
    text-transform: lowercase;
}
.mh-site-aside-prix-rest {
    font-size: 12px;
    color: var(--mh-text-muted);
    margin-top: 4px;
}
.mh-site-aside-info {
    font-size: 14px;
    color: var(--mh-text);
    margin-bottom: 8px;
}
/* === Sidebar : 1 SEUL CTA principal coloré, le reste discret ============
   Logique : l'œil doit savoir où aller. Le bouton primary (Contacter) est
   plein bleu plein largeur ; les téléphones sont des liens texte discrets
   en haut ; "Réserver" externe est outline rose (secondary, moins lourd). */

/* Téléphones = liens texte (vert subtil), pas de boutons */
.mh-site-aside-tels {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 14px;
    padding: 10px 0;
    border-top: 1px dashed var(--mh-border);
    border-bottom: 1px dashed var(--mh-border);
}
.mh-site-aside-tel-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1b5e20;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    padding: 4px 0;
}
.mh-site-aside-tel-link:hover { text-decoration: underline; }

/* CTA primary : Contacter — le seul gros bouton coloré de la sidebar */
.mh-site-aside-cta-primary {
    display: block;
    text-align: center;
    padding: 14px 16px;
    margin-top: 12px;
    background: var(--mh-blue);
    color: #fff;
    border-radius: var(--mh-radius);
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(14,91,149,.25);
    transition: background .15s, transform .12s, box-shadow .15s;
}
.mh-site-aside-cta-primary:hover {
    background: var(--mh-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14,91,149,.35);
}

/* CTA secondary : Réserver externe — outline rose, moins prioritaire */
.mh-site-aside-cta-secondary {
    display: block;
    text-align: center;
    padding: 10px 14px;
    margin-top: 8px;
    background: #fff;
    color: var(--mh-pink);
    border: 1.5px solid var(--mh-pink);
    border-radius: var(--mh-radius);
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.mh-site-aside-cta-secondary:hover {
    background: var(--mh-pink);
    color: #fff;
}

/* Favori (rappel discret — le ♥ principal est en overlay galerie) */
.mh-site-aside-fav {
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    color: var(--mh-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .15s, border-color .15s;
}
.mh-site-aside-fav:hover { color: var(--mh-pink); border-color: var(--mh-pink); }
.mh-site-aside-fav.is-active { color: var(--mh-pink); border-color: var(--mh-pink); }
.mh-site-aside-fav.is-active svg path { fill: currentColor; }

/* Galerie */
.mh-site-gallery {
    margin-bottom: 22px;
}
.mh-site-gallery-main {
    border-radius: var(--mh-radius-lg);
    overflow: hidden;
    background: #eee;
    margin-bottom: 8px;
}
.mh-site-gallery-img,
.mh-site-gallery-main img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}
.mh-site-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
}
.mh-site-thumb {
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--mh-radius-sm);
    overflow: hidden;
    transition: border-color .12s;
    aspect-ratio: 4 / 3;
}
.mh-site-thumb:hover { border-color: var(--mh-blue-light); }
.mh-site-thumb.is-active { border-color: var(--mh-blue); }
.mh-site-thumb-img,
.mh-site-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bouton "+N photos" : overlay sur la dernière vignette visible */
.mh-site-thumb-more {
    background: linear-gradient(135deg, rgba(14,91,149,.92), rgba(33,134,213,.92));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mh-blue);
    transition: background .12s, transform .12s;
    aspect-ratio: 4 / 3;
}
.mh-site-thumb-more:hover {
    background: linear-gradient(135deg, var(--mh-blue), #2186d5);
    transform: scale(1.02);
}

/* Lightbox : grille complète de toutes les photos */
.mh-site-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mh-site-lightbox[hidden] { display: none; }
.mh-site-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    animation: mh-confirm-fade .18s ease-out;
}
.mh-site-lightbox-box {
    position: relative;
    background: var(--mh-bg);
    border-radius: var(--mh-radius-lg);
    max-width: 1100px;
    max-height: 92vh;
    width: 95%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
    animation: mh-confirm-pop .2s ease-out;
}
.mh-site-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mh-border);
    background: var(--mh-bg-soft);
}
.mh-site-lightbox-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mh-blue);
}
.mh-site-lightbox-close {
    background: transparent;
    border: none;
    font-size: 30px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 6px;
}
.mh-site-lightbox-close:hover { background: rgba(0,0,0,.08); color: #000; }
.mh-site-lightbox-grid {
    overflow-y: auto;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.mh-site-lightbox-thumb {
    background: none;
    border: 2px solid transparent;
    border-radius: var(--mh-radius-sm);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .12s, transform .12s;
    position: relative;
}
.mh-site-lightbox-thumb:hover {
    border-color: var(--mh-blue);
    transform: scale(1.02);
}
.mh-site-lightbox-img,
.mh-site-lightbox-thumb img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}
.mh-site-lightbox-cap {
    display: block;
    padding: 6px 8px;
    font-size: 11.5px;
    color: var(--mh-text-muted);
    text-align: center;
    background: var(--mh-bg-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .mh-site-lightbox-grid { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 8px; }
    .mh-site-lightbox-img,
    .mh-site-lightbox-thumb img { height: 130px; }
}

/* Sections */
.mh-site-section {
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
    padding: 18px 22px;
    margin-bottom: 14px;
}
.mh-site-section h2 {
    margin: 0 0 12px;
    font-size: 19px;
    color: var(--mh-blue);
}
.mh-site-section-insolite {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border-color: #f9a8d4;
}
.mh-site-section-insolite h2 { color: #be185d; }
.mh-site-rich {
    font-size: 15px;
    line-height: 1.65;
}
.mh-site-rich p { margin: 0 0 10px; }
.mh-site-rich a { color: var(--mh-blue); }

/* Prestations groupées */
/* Wrap repliable quand trop d'items : max-height + fade en bas + bouton */
.mh-site-prestas-wrap {
    position: relative;
}
.mh-site-prestas-wrap.is-collapsed .mh-site-prestas-grid {
    /* Hauteur visible au collapse : ~tiers de moins que l'origine (320px)
       pour pousser plus fortement à cliquer "Voir tous les X équipements"
       et raccourcir la fiche par défaut. */
    max-height: 220px;
    overflow: hidden;
}
.mh-site-prestas-wrap.is-collapsed::after {
    /* Fade blanc → transparent en bas de la grille collapsed pour
       signaler visuellement qu'il y a plus de contenu en dessous. */
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 56px;            /* au-dessus du bouton */
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}
.mh-site-prestas-toggle {
    display: block;
    margin: 16px auto 0;
    background: var(--mh-blue);
    color: #fff;
    border: 0;
    border-radius: var(--mh-radius);
    padding: 9px 22px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}
.mh-site-prestas-toggle:hover { background: var(--mh-blue-dark); }

/* Grille des groupes : 2 colonnes auto-fit (au lieu de stack vertical)
   → gain ~50% de hauteur visible sur la fiche. */
.mh-site-prestas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px 24px;
}
.mh-site-presta-group {
    margin: 0;       /* géré par le `gap` du parent grid */
}
.mh-site-presta-type {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 6px;
    color: var(--mh-text);
    border-left: 3px solid var(--mh-blue);
    padding-left: 10px;
}
.mh-site-presta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 14px;
    font-size: 14px;
}
.mh-site-presta-list li { color: var(--mh-text); }

/* Tarifs */
.mh-site-tarifs {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.mh-site-tarifs th,
.mh-site-tarifs td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--mh-border-soft);
}
.mh-site-tarifs th {
    background: var(--mh-bg-soft);
    font-weight: bold;
    color: var(--mh-text);
}
.mh-site-tarifs tr.is-main {
    background: #fff8e1;
    font-weight: bold;
}
.mh-site-tarif-price { text-align: right; white-space: nowrap; }
.mh-site-tarif-des {
    margin-top: 12px;
    font-size: 13px;
    color: var(--mh-text-muted);
}
.mh-site-promo {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff3cd;
    border-radius: var(--mh-radius);
    font-size: 14px;
}
.mh-site-promo code {
    background: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
    color: var(--mh-pink-dark);
}

/* Contact */
.mh-site-contact-section {
    background: #f0f9ff;
    border-color: var(--mh-blue-light);
}
.mh-site-contact-section p { margin: 8px 0; font-size: 15px; }
.mh-site-tel  { color: #1b5e20; font-weight: bold; text-decoration: none; }
.mh-site-mail {
    display: inline-block;
    background: var(--mh-blue);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--mh-radius);
    text-decoration: none;
    font-weight: bold;
}
.mh-site-mail:hover { background: var(--mh-blue-dark); }
.mh-site-resa-btn {
    display: inline-block;
    background: var(--mh-pink);
    color: #fff;
    padding: 11px 22px;
    border-radius: var(--mh-radius);
    text-decoration: none;
    font-weight: bold;
}
.mh-site-resa-btn:hover { background: var(--mh-pink-dark); }
.mh-site-address {
    font-size: 14px;
    color: var(--mh-text);
    margin: 0 0 8px;
}
.mh-site-pos-approx {
    /* Mention "position approximative" SOUS la carte → margin-top + centré */
    font-size: 13px;
    color: var(--mh-text-muted);
    margin: 10px 0 0;
    text-align: center;
}
/* Lien externe vers la grille tarifaire complète du proprio (lien_prix) */
.mh-site-tarif-lien-ext {
    margin: 12px 0 0;
    font-size: 14px;
}
.mh-site-tarif-lien-ext a {
    color: var(--mh-blue);
    font-weight: bold;
    text-decoration: underline;
}
.mh-site-tarif-lien-ext a:hover { color: var(--mh-blue-dark); }

/* Numéro enregistrement (mention légale) */
.mh-site-legal {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: var(--mh-text-faint);
    margin-top: 10px;
}
.mh-site-legal code {
    background: var(--mh-bg-soft);
    padding: 2px 8px;
    border-radius: 3px;
    color: var(--mh-text);
}

/* === Bloc footer notice de la fiche annonce =========================
   Contient : tip d'attribution + mentions légales d'intermédiation +
   date de mise à jour. Visuellement séparé du reste par un fond léger
   + bordure haute, pour signaler que c'est de l'information secondaire
   (à valeur légale et de confiance) qui n'interrompt pas la lecture. */
.mh-site-footer-notice {
    margin-top: 28px;
    padding: 18px 22px;
    background: var(--mh-bg-soft);
    border-top: 2px solid var(--mh-border);
    border-radius: 0 0 var(--mh-radius) var(--mh-radius);
    font-size: 13px;
    color: var(--mh-text);
    line-height: 1.55;
}
.mh-site-footer-tip {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #fffbea;
    border-left: 3px solid #f0a020;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    color: #5a3d00;
}
.mh-site-footer-tip code {
    background: rgba(0,0,0,.06);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--mh-text);
    font-size: 13px;
}
.mh-site-footer-mentions {
    margin: 0 0 12px;
    color: var(--mh-text-muted);
    font-size: 12px;
}
.mh-site-footer-mentions strong {
    color: var(--mh-text);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mh-site-footer-mentions ul {
    margin: 6px 0 0;
    padding-left: 22px;
}
.mh-site-footer-mentions li {
    margin-bottom: 3px;
}
.mh-site-footer-fresh {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--mh-border);
    text-align: right;
    font-size: 12px;
    color: var(--mh-text-muted);
    font-style: italic;
}

/* === Responsive ====================================================== */
@media (max-width: 900px) {
    .mh-site-layout {
        flex-direction: column;
        /* En column, le gap devient l'écart VERTICAL entre flex-items.
           On revient au 22px d'avant — sinon les 40px du desktop
           cumulés au margin-top:35px des extras = ~75px d'espace
           trop important en mobile. */
        gap: 22px;
    }
    .mh-site-aside {
        width: 100%;
        position: static;
        order: -1; /* sidebar AVANT le contenu en mobile (prix + tel rapidement accessibles) */
    }
    .mh-site-aside-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    .mh-site-aside-prix {
        flex: 1 1 auto;
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        text-align: left;
    }
    .mh-site-aside-btn { flex: 1 1 140px; margin-top: 0; }
    .mh-site-aside-fav { flex: 1 1 100%; margin-top: 6px; }
    .mh-site-hero h1 { font-size: 26px; }
}
@media (max-width: 600px) {
    .mh-site-hero { padding: 20px 16px; }
    .mh-site-section { padding: 14px 16px; }
    .mh-site-presta-list { grid-template-columns: 1fr 1fr; }
}

/* === Galerie : boutons prev/next + compteur (page_site) ============== */
.mh-site-gallery-main { position: relative; }
.mh-site-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.15);
    color: var(--mh-text);
    font-size: 32px;
    line-height: 0;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, transform .12s;
    padding-bottom: 4px;  /* compense l'optique du chevron */
}
.mh-site-gallery-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.mh-site-gallery-nav:focus-visible {
    outline: 3px solid var(--mh-blue);
    outline-offset: 2px;
}
.mh-site-gallery-prev { left: 12px; }
.mh-site-gallery-next { right: 12px; }

.mh-site-gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 600px) {
    .mh-site-gallery-nav { width: 36px; height: 36px; font-size: 26px; }
    .mh-site-gallery-prev { left: 6px; }
    .mh-site-gallery-next { right: 6px; }
}

/* === Formulaire contact propriétaire (dans la fiche) ================= */
.mh-site-contact-form-wrap {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--mh-border);
}
.mh-site-contact-form-wrap h3 {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--mh-text);
}
.mh-site-contact-privacy {
    margin-top: 8px;
    font-size: 12px;
    color: var(--mh-text-muted);
    font-style: italic;
}

/* === Formulaire "Aller à une annonce" (sidebar home) ================= */
.mh-go-annonce {
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.mh-go-annonce-label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: var(--mh-blue);
    margin-bottom: 8px;
}
.mh-go-annonce-row {
    display: flex;
    gap: 6px;
}
.mh-go-annonce input[type=number] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--mh-border-soft);
    border-radius: var(--mh-radius-sm);
    background: #fff;
    color: var(--mh-text);
    box-sizing: border-box;
    /* Cache les flèches up/down du number input */
    -moz-appearance: textfield;
}
.mh-go-annonce input[type=number]::-webkit-outer-spin-button,
.mh-go-annonce input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mh-go-annonce input[type=number]:focus {
    outline: 2px solid var(--mh-blue);
    outline-offset: -1px;
    border-color: var(--mh-blue);
}
.mh-go-annonce button {
    flex: 0 0 auto;
    background: var(--mh-blue);
    color: #fff;
    border: 0;
    border-radius: var(--mh-radius-sm);
    padding: 0 14px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background .15s;
}
.mh-go-annonce button:hover { background: var(--mh-blue-dark); }
.mh-go-annonce-hint {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--mh-text-muted);
    line-height: 1.4;
}

/* === FAQ accordéon (fiche annonce) =================================== */
.mh-site-faq-group {
    margin-bottom: 10px;
}
.mh-site-faq-group:last-child { margin-bottom: 0; }
.mh-site-faq-cat {
    font-size: 13px;
    color: var(--mh-blue);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 12px 0 6px;
}
.mh-site-faq-cat:first-child { margin-top: 0; }
.mh-site-faq-item {
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    margin-bottom: 6px;
    background: #fff;
    overflow: hidden;
}
.mh-site-faq-item summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: bold;
    color: var(--mh-text);
    font-size: 15px;
    line-height: 1.45;
    list-style: none;          /* retire le triangle natif */
    position: relative;
    padding-right: 40px;
    transition: background .12s;
}
.mh-site-faq-item summary::-webkit-details-marker { display: none; }
.mh-site-faq-item summary:hover { background: var(--mh-bg-soft); }
.mh-site-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 18px;
    text-align: center;
    color: var(--mh-blue);
    font-size: 22px;
    font-weight: normal;
    border-radius: 50%;
    background: var(--mh-bg-soft);
    transition: transform .18s, background .12s, color .12s;
}
.mh-site-faq-item[open] summary {
    background: var(--mh-bg-soft);
    color: var(--mh-blue);
}
.mh-site-faq-item[open] summary::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
    background: var(--mh-blue);
    color: #fff;
}
.mh-site-faq-item summary:focus-visible {
    outline: 2px solid var(--mh-blue);
    outline-offset: -2px;
}
.mh-site-faq-answer {
    padding: 4px 16px 14px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--mh-text);
}
.mh-site-faq-answer p { margin: 0 0 8px; }
.mh-site-faq-answer p:last-child { margin-bottom: 0; }
.mh-site-faq-answer a { color: var(--mh-blue); }

/* === Unités d'hébergement (fiche annonce) ============================ */
.mh-site-units {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mh-site-unit {
    background: var(--mh-bg);
    border: 1px solid var(--mh-border);
    border-left: 4px solid var(--mh-blue);
    border-radius: var(--mh-radius);
    padding: 14px 18px;
}
.mh-site-unit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 8px;
}
.mh-site-unit-head h3 {
    margin: 0;
    font-size: 22px;            /* +30% par rapport à 17 */
    color: var(--mh-blue);
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}
.mh-site-unit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mh-site-unit-badge {
    display: inline-flex;
    align-items: center;
    background: var(--mh-bg-soft);
    color: var(--mh-text);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.mh-site-unit-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mh-text);
    margin-bottom: 10px;
}
.mh-site-unit-desc p { margin: 0 0 6px; }

.mh-site-unit-lits {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--mh-border);
}
.mh-site-unit-lits h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--mh-text);
    font-weight: bold;
}
.mh-site-unit-lits ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 14px;
    font-size: 14px;
}
.mh-site-unit-lits li { color: var(--mh-text); padding: 2px 0; }
.mh-site-unit-lit-dim {
    color: var(--mh-text-muted);
    font-size: 13px;
    margin-left: 6px;
}
.mh-site-unit-lit-place {
    color: var(--mh-text-faint);
    font-size: 12px;
    margin-left: 6px;
    font-style: italic;
}

.mh-site-unit-bain {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--mh-bg-softer);
    border-radius: var(--mh-radius-sm);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.mh-site-unit-bain strong { color: var(--mh-blue); }

.mh-site-unit-equips {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 3px 10px;
    font-size: 13px;
}
.mh-site-unit-equips li { color: var(--mh-text); padding: 2px 0; }

.mh-site-unit-num {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--mh-border);
    font-size: 11px;
    color: var(--mh-text-faint);
}
.mh-site-unit-num code {
    background: var(--mh-bg-soft);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--mh-text);
}

/* === Mini-galerie des photos d'une unité (im_client.type_nuit > 0) === */
.mh-site-unit-photos {
    display: flex;
    gap: 8px;
    overflow-x: auto;          /* scroll horizontal si beaucoup de photos */
    -webkit-overflow-scrolling: touch;
    margin: 4px 0 12px;
    padding-bottom: 4px;       /* pour la scrollbar */
    scrollbar-width: thin;
}
.mh-site-unit-photo-link {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
    border-radius: var(--mh-radius-sm);
    overflow: hidden;
    transition: transform .12s, box-shadow .12s;
}
.mh-site-unit-photo-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--mh-shadow-soft);
}
.mh-site-unit-photo {
    width: 213px;          /* +1/3 par rapport à 160 */
    height: 147px;         /* +1/3 par rapport à 110 (ratio préservé) */
    object-fit: cover;
    display: block;
}

/* === Tarifs spécifiques à une unité (dans la card unité) ============== */
.mh-site-unit-tarifs {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--mh-border);
}
.mh-site-unit-tarifs h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--mh-text);
    font-weight: bold;
}
.mh-site-unit-tarifs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mh-site-unit-tarifs li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--mh-border-soft);
    gap: 14px;
}
.mh-site-unit-tarifs li:last-child { border-bottom: 0; }
.mh-site-unit-tarifs li.is-main {
    background: #fff8e1;
    border-radius: var(--mh-radius-sm);
    font-weight: bold;
}
.mh-site-unit-tarif-lbl {
    color: var(--mh-text);
    flex: 0 0 auto;
}
.mh-site-unit-tarif-val {
    color: var(--mh-text);
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
}
.mh-site-unit-tarif-val strong {
    font-size: 16px;
    color: var(--mh-blue);
}

/* === Période saison sous le libellé tarif ============================ */
.mh-site-tarif-periode {
    display: block;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    color: var(--mh-text-muted);
    margin-top: 2px;
}
/* Dans la liste unité (inline) : sur sa propre ligne mais pas de margin */
.mh-site-unit-tarif-lbl .mh-site-tarif-periode {
    margin-top: 1px;
}

/* === Calendrier de disponibilités (fiche annonce) ==================== */
/* Taille fixe des cellules (26 × 26 px) → le calendrier n'occupe que la
   largeur strictement nécessaire (pas d'étirement par 1fr). Avec 7 colonnes
   et gap de 2 px, chaque grille mensuelle fait ~194 px. Les 2 mois côte à
   côte tiennent dans ~420 px → laisse de la marge dans n'importe quel
   conteneur (card unité, section principale, etc.). */
.mh-cal {
    /* width: fit-content → composant occupe JUSTE la largeur de son contenu
       (les 2 grilles + gap = ~420px max). margin: 0 auto centre quand même. */
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}
.mh-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.mh-cal-title-range {
    font-size: 15px;
    font-weight: bold;
    color: var(--mh-text);
    text-align: center;
    flex: 1 1 auto;
}
/* Les 2 mois côte à côte — chacun est en inline-block de largeur intrinsèque */
.mh-cal-months {
    display: flex;
    flex-wrap: wrap;          /* passe en colonne si pas la place */
    justify-content: center;
    gap: 12px;
    transition: opacity .15s;
}
.mh-cal-month {
    /* Largeur intrinsèque = 7 cellules de 26px + 6 gaps de 2px = 194px */
    flex: 0 0 auto;
}
.mh-cal-month-title {
    margin: 0 0 6px;
    font-size: 13px;
    text-align: center;
    color: var(--mh-text-muted);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mh-cal-nav {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mh-bg-soft);
    border: 1px solid var(--mh-border);
    color: var(--mh-blue);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: background .12s, transform .12s;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mh-cal-nav:hover { background: var(--mh-blue); color: #fff; }
.mh-cal-nav:focus-visible {
    outline: 2px solid var(--mh-blue);
    outline-offset: 2px;
}
.mh-cal-grid {
    display: grid;
    /* Cellules de TAILLE FIXE (40px). Per mois : 7×40 + 6×3 = 298px.
       2 mois côte à côte + 12px gap = ~608px (rentre dans la colonne main
       de la fiche annonce, typiquement 700-900px de large). */
    grid-template-columns: repeat(7, 40px);
    gap: 3px;
}
/* Pendant le chargement AJAX : opacité + spinner centré */
.mh-cal-loading .mh-cal-months {
    opacity: .35;
    pointer-events: none;
}
.mh-cal-loading::before {
    content: '';
    position: absolute;
    inset: 48px 0 50px;
    background: rgba(255,255,255,.5);
    border-radius: var(--mh-radius);
    z-index: 5;
}
.mh-cal-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #cfd8de;
    border-top-color: var(--mh-blue);
    border-radius: 50%;
    animation: mh-cal-spin .7s linear infinite;
    z-index: 6;
}
@keyframes mh-cal-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.mh-cal-dow {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--mh-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 0;
}
.mh-cal-day {
    /* Dimensions fixes — pas d'aspect-ratio (qui dépend du 1fr) */
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: var(--mh-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
    border: 1px solid transparent;
}
.mh-cal-empty {
    width: 40px;
    height: 40px;
}
/* États : 1=OCCUPÉ (rouge), 2=DISPO ANNONCÉE (vert), 0=NON INDIQUÉ
   Cohérent avec la légende espace proprio :
   - 0 (non indiqué) = carré blanc avec contour noir (pas confondre avec libre/passé)
   - 1 (occupé)    = rouge
   - 2 (dispo)     = vert */
.mh-cal-day-0 {
    background: #fff;
    color: #999;
    /* Cases "non indiqué" sur le calendrier : contour gris discret
       (la légende, elle, utilise un contour noir plus contrasté
       cf. .mh-cal-sw-0 — visibilité du symbole) */
    border: 1px solid #ccc;
    cursor: default;
}
.mh-cal-day-1 {
    background: #f8d7da;
    color: #842029;
    border-color: #ee9aa0;
    font-weight: bold;
    text-decoration: line-through;
}
.mh-cal-day-2 {
    background: #d4edda;
    color: #155724;
    border-color: #a3d9a5;
    font-weight: bold;
}
/* Jours passés : forcent l'affichage en gris (priorité sur le statut),
   pour qu'on voit clairement qu'ils sont derrière nous. */
.mh-cal-day-past {
    background: #e9ecef !important;
    color: #adb5bd !important;
    border-color: #ced4da !important;
    text-decoration: none !important;
    font-weight: normal !important;
    cursor: default;
}
/* Légende */
.mh-cal-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--mh-border);
    font-size: 11px;
    color: var(--mh-text-muted);
}
.mh-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mh-cal-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid transparent;
}
.mh-cal-sw-0 { background: #fff; border-color: #000; }                    /* non indiqué = blanc + contour noir */
.mh-cal-sw-1 { background: #f8d7da; border-color: #ee9aa0; }              /* occupé = rouge */
.mh-cal-sw-2 { background: #d4edda; border-color: #a3d9a5; }              /* dispo annoncée = vert */

/* Message sous le calendrier : explique le sens des jours grisés
   (anti-confusion "Non renseigné" ≠ "Libre"). */
.mh-cal-note {
    margin: 8px 0 0;
    padding: 8px 12px;
    background: var(--mh-bg-soft);
    border-left: 3px solid var(--mh-border);
    border-radius: 0 var(--mh-radius-sm) var(--mh-radius-sm) 0;
    font-size: 12px;
    color: var(--mh-text-muted);
    line-height: 1.45;
}

@media (max-width: 400px) {
    .mh-cal-day { font-size: 12px; }
}

/* === Mini-calendrier dans une card unité ============================== */
.mh-site-unit-cal {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--mh-border);
}
.mh-site-unit-cal h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--mh-text);
    font-weight: bold;
}
/* Calendrier scopé à une unité : prend la largeur de la card (max 720px)
   pour afficher les 2 mois côte à côte. En mobile bascule en empilé via
   le media query générique .mh-cal-months. */
.mh-site-unit-cal .mh-cal {
    max-width: 100%;
    margin: 0;            /* aligné à gauche dans la card, pas centré */
}
.mh-site-unit-cal .mh-cal-months { gap: 10px; }

/* Texte d'intro quand un calendrier principal coexiste avec calendriers d'unités */
.mh-cal-intro {
    font-size: 13px;
    color: var(--mh-text-muted);
    margin: 0 0 12px;
    text-align: center;
    font-style: italic;
}

/* === Debug SQL sous chaque calendrier ============================== */
.mh-cal-sql {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--mh-border);
    font-size: 12px;
}
.mh-cal-sql summary {
    cursor: pointer;
    color: var(--mh-text-muted);
    font-weight: bold;
    padding: 4px 0;
    user-select: none;
    list-style: none;
}
.mh-cal-sql summary::-webkit-details-marker { display: none; }
.mh-cal-sql summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform .15s;
}
.mh-cal-sql[open] summary::before { transform: rotate(90deg); }
.mh-cal-sql summary:hover { color: var(--mh-blue); }
.mh-cal-sql-pre {
    margin: 6px 0 0;
    padding: 10px 12px;
    background: #1e1e1e;
    color: #e0e0e0;
    border-radius: var(--mh-radius-sm);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
}

/* === Sidebar EXTRAS (À LA UNE dpt + plus proches) ====================
   margin-top généreux pour bien isoler visuellement les blocs "À la une"
   de la card prix/contact ci-dessus — sinon visuellement collés. */
.mh-site-aside-extras {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* L'aside fait 340px mais on garde les cards "à la une / plus proches"
       à 280px (calibration originale : largeur images, padding, etc.).
       Centrage horizontal dans le wrapper aside élargi. */
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.mh-site-aside-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mh-site-aside-block-title {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--mh-text);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--mh-blue);
}
.mh-site-aside-dist {
    font-size: 11px;
    color: var(--mh-blue);
    text-align: center;
    margin: -4px 0 0;
    font-style: italic;
}
/* Cards favoris-style à 100% de la colonne aside (280 - padding ~250px) */
.mh-site-aside-extras .mh-alaune-card { width: 100%; }

/* === Mobile : extras EN BAS de page (sous le contenu principal) ====== */
@media (max-width: 900px) {
    /* display: contents fait disparaître l'aside du flow → ses enfants
       deviennent enfants directs de .mh-site-layout (qui est flex column
       en mobile). On peut alors leur donner des `order:` différents. */
    .mh-site-aside { display: contents; }
    .mh-site-aside-card   { order: -1; }   /* prix/contact EN HAUT en mobile */
    .mh-site-main         { order:  0; }   /* contenu principal au milieu */
    .mh-site-aside-extras {
        order: 1;                /* À la une + plus proches EN BAS */
        margin-top: 35px;        /* moins agressif qu'en desktop (48px) */
        /* Centre le bloc dans la page : largeur limitée (~sidebar)
           + margin auto. Sinon, étiré sur 100% du viewport mobile,
           les cards perdent leur calibration et paraissent éparpillées. */
        max-width: 320px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        align-items: center;     /* centre les enfants block aussi */
    }
    /* Les blocs internes (À la une / Les plus proches) prennent toute la
       largeur du wrapper centré pour rester homogènes. */
    .mh-site-aside-extras .mh-site-aside-block { width: 100%; }
}

/* === Caption galerie principale (im_client.designation) ============== */
.mh-site-gallery-caption {
    margin: 6px 0 8px;
    font-size: 13px;
    color: var(--mh-text-muted);
    font-style: italic;
    text-align: center;
    min-height: 1.2em;          /* évite le reflow quand vide */
}
/* Caption sous chaque photo d'unité (im_client.designation) */
.mh-site-unit-photo-cap {
    font-size: 11px;
    color: var(--mh-text-muted);
    text-align: center;
    margin: 4px 0 0;
    padding: 0 4px;
    line-height: 1.3;
    /* tronque sur 2 lignes max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 213px;
}

/* === Présentation du propriétaire (refonte UX) =======================
   Layout vertical : en-tête (avatar rond + prénom) → texte avec collapse
   line-clamp:5 → galerie horizontale scrollable (snap). Beaucoup plus
   ordonné que l'ancien flex où photos en pile à droite. */
.mh-site-presentation {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* En-tête : avatar 80×80 rond + prénom + rôle */
.mh-site-presentation-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mh-site-presentation-avatar {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    background: var(--mh-bg-soft);
}
.mh-site-presentation-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--mh-text-muted);
}
.mh-site-presentation-who {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.mh-site-presentation-name {
    font-size: 17px;
    color: var(--mh-blue);
    font-weight: bold;
}
.mh-site-presentation-role {
    font-size: 13px;
    color: var(--mh-text-muted);
    font-style: italic;
}

/* Corps texte : collapse à 5 lignes par défaut.
   line-clamp non standard mais supporté partout (-webkit-line-clamp). */
.mh-site-presentation-body {
    position: relative;
}
.mh-site-presentation-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--mh-text);
}
.mh-site-presentation-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Fade en bas pour suggérer qu'il y a plus de texte */
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.mh-site-presentation-more {
    margin-top: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--mh-blue);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}
.mh-site-presentation-more:hover { color: var(--mh-blue-dark); }

/* Galerie photos : strip horizontale scrollable avec snap */
.mh-site-presentation-photos {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 10px;
    scroll-snap-type: x mandatory;
    /* Scrollbar discrète */
    scrollbar-width: thin;
    scrollbar-color: var(--mh-border) transparent;
}
.mh-site-presentation-photos::-webkit-scrollbar { height: 6px; }
.mh-site-presentation-photos::-webkit-scrollbar-thumb {
    background: var(--mh-border);
    border-radius: 3px;
}
.mh-site-presentation-photo {
    margin: 0;
    flex: 0 0 auto;
    width: 180px;
    scroll-snap-align: start;
}
.mh-site-presentation-photo img {
    width: 180px;
    height: 135px;
    object-fit: cover;
    display: block;
    border-radius: var(--mh-radius-sm);
    border: 1px solid var(--mh-border);
}
.mh-site-presentation-photo figcaption {
    margin-top: 4px;
    font-size: 11px;
    color: var(--mh-text-muted);
    font-style: italic;
    line-height: 1.3;
    text-align: center;
    /* Tronque à 2 lignes pour garder le strip homogène */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .mh-site-presentation-avatar { flex-basis: 64px; width: 64px; height: 64px; }
    .mh-site-presentation-photo { width: 140px; }
    .mh-site-presentation-photo img { width: 140px; height: 105px; }
}

/* === Infos pratiques (heures arrivée/départ, période d'ouverture) ==== */
.mh-site-infos-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px 18px;
    font-size: 15px;
}
.mh-site-infos-list li {
    color: var(--mh-text);
    padding: 6px 12px;
    background: var(--mh-bg-soft);
    border-radius: var(--mh-radius-sm);
}
.mh-site-infos-list strong { color: var(--mh-blue); }

/* === Bouton ♥ favori en overlay sur la galerie (pattern Airbnb) ====== */
.mh-site-gallery-fav {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    color: var(--mh-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s, transform .12s;
    z-index: 2;
}
.mh-site-gallery-fav:hover {
    color: var(--mh-pink);
    background: #fff;
    transform: scale(1.08);
}
.mh-site-gallery-fav.is-active { color: var(--mh-pink); }
.mh-site-gallery-fav.is-active svg path { fill: currentColor; }
.mh-site-gallery-fav:focus-visible {
    outline: 2px solid var(--mh-blue);
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .mh-site-gallery-fav { width: 36px; height: 36px; top: 10px; right: 10px; }
}

/* === CTA flottante "Contacter" (bottom-right au scroll) =============
   Pattern Booking/Airbnb. Apparaît après 800px de scroll, disparaît
   quand la section contact est visible à l'écran (sinon doublon).
   Cachée par défaut + tabindex=-1 → ne pollue pas le tab order. */
.mh-site-floating-cta {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100;
    padding: 14px 22px;
    background: var(--mh-blue);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(14,91,149,.35);
    opacity: 0;
    transform: translateY(20px) scale(.95);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background .15s;
}
.mh-site-floating-cta.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.mh-site-floating-cta:hover {
    background: var(--mh-blue-dark);
    color: #fff;
    text-decoration: none;
}
.mh-site-floating-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .mh-site-floating-cta {
        right: 12px;
        bottom: 12px;
        padding: 12px 18px;
        font-size: 14px;
    }
}

/* === Modal de confirmation envoi message =========================== */
.mh-site-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mh-site-confirm-modal[hidden] { display: none; }
.mh-site-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    /* Anim d'entrée légère pour adoucir l'apparition */
    animation: mh-confirm-fade .15s ease-out;
}
@keyframes mh-confirm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mh-site-confirm-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--mh-radius-lg);
    padding: 24px 26px 20px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    animation: mh-confirm-pop .2s ease-out;
}
@keyframes mh-confirm-pop {
    from { opacity: 0; transform: scale(.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
.mh-site-confirm-box h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--mh-blue);
}
.mh-site-confirm-msg {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--mh-text);
    line-height: 1.5;
}
.mh-site-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.mh-site-confirm-cancel,
.mh-site-confirm-ok {
    padding: 10px 18px;
    border-radius: var(--mh-radius);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    transition: background .12s, color .12s;
}
.mh-site-confirm-cancel {
    background: var(--mh-bg-soft);
    color: var(--mh-text);
}
.mh-site-confirm-cancel:hover { background: var(--mh-border); }
.mh-site-confirm-ok {
    background: var(--mh-blue);
    color: #fff;
}
.mh-site-confirm-ok:hover { background: var(--mh-blue-dark); }
.mh-site-confirm-ok:focus-visible,
.mh-site-confirm-cancel:focus-visible {
    outline: 2px solid var(--mh-blue);
    outline-offset: 2px;
}

/* =====================================================================
   PAGE /dispo — Dernières disponibilités
   ===================================================================== */

.mh-dispo-page {
    width: 100%;
    margin: 0 auto;
    color: var(--mh-text);
}

/* ----- Hero bleu (pleine largeur, comme le mockup) ----- */
.mh-dispo-hero {
    background: linear-gradient(135deg, var(--mh-blue) 0%, var(--mh-blue-light) 100%);
    color: #fff;
    padding: 28px 16px 32px;
    text-align: center;
}
.mh-dispo-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.mh-dispo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    background: #2bbd76;
    color: #fff;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 12px rgba(43,189,118,.35);
    margin-bottom: 18px;
}
.mh-dispo-badge-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    /* Pulsation discrète pour signaler "live" */
    animation: mh-dispo-pulse 1.6s ease-in-out infinite;
}
@keyframes mh-dispo-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}
.mh-dispo-hero h1 {
    margin: 0 0 6px;
    font-size: 30px;
    color: #fff;
    line-height: 1.2;
}
.mh-dispo-subtitle {
    margin: 0 0 22px;
    font-size: 15px;
    color: rgba(255,255,255,.92);
}

/* ----- Onglets mois ----- */
.mh-dispo-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}
.mh-dispo-tab {
    padding: 9px 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, transform .12s, border-color .15s;
}
.mh-dispo-tab:hover {
    background: rgba(255,255,255,.28);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.mh-dispo-tab.is-active {
    background: #fff;
    color: var(--mh-blue);
    border-color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ----- Sélecteur "Jour précis" ----- */
.mh-dispo-day-form {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    color: #fff;
    font-size: 14px;
}
.mh-dispo-day-form select {
    padding: 8px 30px 8px 14px;
    background: rgba(255,255,255,.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23fff' d='M6 8L0 0h12z'/></svg>") no-repeat right 10px center;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.mh-dispo-day-form select option {
    color: var(--mh-text);
    background: #fff;
}
.mh-dispo-day-form select:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.mh-dispo-day-go {
    padding: 8px 14px;
    background: #fff;
    color: var(--mh-blue);
    border: 0;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

/* Toggle "calendrier obsolète" — checkbox stylée inline avec le select */
.mh-dispo-stale-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding: 6px 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    transition: background .15s;
}
.mh-dispo-stale-toggle:hover {
    background: rgba(255,255,255,.22);
}
.mh-dispo-stale-toggle input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #fff;
}
.mh-dispo-stale-text {
    line-height: 1.3;
}
@media (max-width: 600px) {
    .mh-dispo-stale-toggle {
        display: flex;
        margin-left: 0;
        margin-top: 10px;
        font-size: 12px;
    }
}

/* Bandeau d'info sous le compteur — 2 variantes selon le mode */
.mh-dispo-stale-notice {
    max-width: 1180px;
    margin: 8px auto 12px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
/* Mode "stale activé" : avertissement (orange clair) */
.mh-dispo-stale-notice-on {
    background: #fff5e6;
    border-left: 3px solid #f0a020;
    color: #5a3d00;
}
/* Mode "filtre actif, X masqués" : info neutre (gris bleuté) */
.mh-dispo-stale-notice-info {
    background: var(--mh-bg-soft);
    border-left: 3px solid var(--mh-blue);
    color: var(--mh-text);
}
.mh-dispo-stale-link {
    margin-left: 8px;
    color: var(--mh-blue);
    font-weight: bold;
    text-decoration: underline;
}
.mh-dispo-stale-link:hover {
    color: var(--mh-blue-dark);
}

/* Pill "obsolète" dans la cellule "Mis à jour" du tableau */
.mh-dispo-stale-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: #fff5e6;
    color: #b16700;
    border: 1px solid #f0a020;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: help;
}

/* Rangs/cards obsolètes : visuellement grisés mais lisibles
   (l'user a CHOISI de les voir → on ne les cache pas, on les marque) */
.mh-dispo-row.is-stale {
    background: linear-gradient(to right, #fff8ec 0%, #fafbfd 60%);
    opacity: .88;
}
.mh-dispo-row.is-stale:hover {
    opacity: 1;
    background: #fff8ec;
}
.mh-dispo-card-wrap.is-stale .mh-dispo-card {
    border-color: #f0c878;
    opacity: .85;
}
.mh-dispo-card-wrap.is-stale .mh-dispo-card:hover {
    opacity: 1;
}
.mh-dispo-card-wrap.is-stale::before {
    content: 'obsolète';
    position: absolute;
    top: 10px;
    right: 56px;            /* avant le bouton map */
    z-index: 3;
    padding: 2px 8px;
    background: #fff5e6;
    color: #b16700;
    border: 1px solid #f0a020;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .03em;
    pointer-events: none;
}
.mh-dispo-card-wrap.is-stale:not(:has(.mh-dispo-card-mapbtn))::before {
    right: 10px;            /* pas de bouton map → on prend le coin */
}

/* ----- Carte Leaflet ----- */
.mh-dispo-map-wrap { margin: 0; }
.mh-dispo-map-wrap .leaflet-container { border-radius: 0; }

/* ----- Compteur "X disponibilités en Mai 2026" ----- */
.mh-dispo-count {
    max-width: 1180px;
    margin: 22px auto 12px;
    padding: 14px 22px;
    background: var(--mh-bg-soft);
    border-left: 4px solid var(--mh-blue);
    border-radius: 4px 6px 6px 4px;
    font-size: 17px;
    color: var(--mh-text);
}
.mh-dispo-count strong {
    color: var(--mh-blue);
    font-size: 22px;
    margin-right: 4px;
}
.mh-dispo-disclaimer {
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 0 22px;
    font-size: 13px;
    color: var(--mh-text-muted);
    font-style: italic;
}

/* ----- Toolbar (filtre + toggle vue) ----- */
.mh-dispo-toolbar {
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: 0 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mh-dispo-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 460px;
}
.mh-dispo-search-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mh-text-muted);
    font-size: 14px;
}
.mh-dispo-search input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    background: #fff;
    border: 1px solid var(--mh-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--mh-text);
    transition: border-color .15s, box-shadow .15s;
}
.mh-dispo-search input:focus {
    outline: 0;
    border-color: var(--mh-blue);
    box-shadow: 0 0 0 3px rgba(14,91,149,.15);
}
.mh-dispo-view-toggle {
    display: inline-flex;
    gap: 6px;
}
.mh-dispo-view-btn {
    padding: 10px 18px;
    background: #fff;
    border: 1.5px solid var(--mh-blue);
    color: var(--mh-blue);
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.mh-dispo-view-btn:hover { background: var(--mh-bg-soft); }
.mh-dispo-view-btn.is-active {
    background: var(--mh-blue);
    color: #fff;
}

/* ----- Tableau ----- */
.mh-dispo-results {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px 40px;
}
.mh-dispo-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.mh-dispo-table thead {
    background: linear-gradient(135deg, var(--mh-blue) 0%, var(--mh-blue-light) 100%);
}
.mh-dispo-table th {
    padding: 14px 14px;
    text-align: left;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    user-select: none;
}
.mh-dispo-table th[data-sort]::after {
    content: ' ⇅';
    opacity: .55;
    font-size: 12px;
}
.mh-dispo-table th.is-sorted-asc::after  { content: ' ↑'; opacity: 1; }
.mh-dispo-table th.is-sorted-desc::after { content: ' ↓'; opacity: 1; }
.mh-dispo-table tbody tr {
    border-bottom: 1px solid var(--mh-bg-soft);
    transition: background .12s;
}
.mh-dispo-table tbody tr:hover { background: #fafbfd; }
.mh-dispo-table tbody tr:last-child { border-bottom: 0; }
.mh-dispo-table td {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--mh-text);
    vertical-align: middle;
}

/* Cellule photo */
.mh-dispo-photo-link { display: block; }
.mh-dispo-photo {
    width: 90px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--mh-border);
    display: block;
}
.mh-dispo-photo-empty {
    background: var(--mh-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* Wrapper de la cellule date : permet d'empiler le badge + le label
   "+X autres jours" en dessous. */
.mh-dispo-date-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
/* Pour la vue cartes (overlay sur image), on conserve l'alignement gauche
   mais on garde le wrap pour empiler badge + extra. */
.mh-dispo-card-badge-wrap .mh-dispo-date-cell {
    align-items: flex-start;
}
/* Label "+X autres jours dispo" — gris discret sous le badge, indique
   qu'il y a d'autres jours dispos après un trou (la plage du badge est
   contiguë, pas le total). */
.mh-dispo-date-extra {
    padding: 2px 8px;
    background: var(--mh-bg-soft);
    color: var(--mh-text-muted);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: help;
    border: 1px dashed var(--mh-border);
}
/* En overlay sur les cartes, on inverse les couleurs pour que ce soit
   lisible sur fond image (variable selon photo). */
.mh-dispo-card-badge-wrap .mh-dispo-date-extra {
    background: rgba(255,255,255,.92);
    color: var(--mh-text);
    backdrop-filter: blur(3px);
}

/* Badge date "17 MAI" (cas 1 seul jour dispo) */
.mh-dispo-date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    padding: 8px 4px;
    background: var(--mh-blue);
    color: #fff;
    border-radius: 10px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(14,91,149,.25);
}
.mh-dispo-date-day {
    font-size: 22px;
    font-weight: bold;
}
.mh-dispo-date-mon {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Badge plage MÊME MOIS : "17→30 MAI" — plus large pour absorber la flèche */
.mh-dispo-date-badge-range {
    width: auto;
    min-width: 70px;
    padding: 8px 10px;
}
.mh-dispo-date-badge-range .mh-dispo-date-day {
    font-size: 16px;       /* un peu plus petit que single — 2 nombres + flèche */
    letter-spacing: -.5px; /* compact */
    white-space: nowrap;
}
/* Compteur "8 j" en dessous (gris clair pour rester discret) */
.mh-dispo-date-count {
    display: block;
    margin-top: 4px;
    padding: 1px 6px;
    background: rgba(255,255,255,.22);
    border-radius: 8px;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Badge plage CROSS-MOIS : empilement vertical "17 mai ↓ 02 juin" */
.mh-dispo-date-badge-multi {
    width: auto;
    min-width: 80px;
    padding: 6px 10px;
    gap: 1px;
}
.mh-dispo-date-multi-from,
.mh-dispo-date-multi-to {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.15;
    white-space: nowrap;
}
.mh-dispo-date-multi-sep {
    font-size: 11px;
    opacity: .75;
    line-height: 1;
}

/* Nom hébergement + lien */
.mh-dispo-name-link {
    color: var(--mh-text);
    font-weight: bold;
    text-decoration: none;
}
.mh-dispo-name-link:hover {
    color: var(--mh-blue);
    text-decoration: underline;
}

/* Pill type */
.mh-dispo-type-pill {
    display: inline-block;
    padding: 4px 12px;
    background: #e8f4fb;
    color: var(--mh-blue);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Cellule localisation */
.mh-dispo-cell-loc { color: var(--mh-text); }
.mh-dispo-cp {
    margin-left: 4px;
    font-size: 12px;
    color: var(--mh-text-muted);
}
/* Bouton "Centrer sur la carte" dans la cellule localisation du tableau.
   Hérite du style .mh-map-btn (couleur bleu, hover scale). Aligné vertical
   avec le texte ville. */
.mh-dispo-map-btn {
    margin-left: 6px;
    vertical-align: middle;
    /* Tweak du padding (mh-map-btn par défaut a 2px partout) pour mieux
       coller à la ligne de texte */
    padding: 0 2px;
}

/* Cellule téléphone */
.mh-dispo-cell-tel { white-space: nowrap; }
.mh-dispo-tel {
    display: block;
    color: #1b5e20;
    font-weight: 500;
    text-decoration: none;
    font-size: 13px;
}
.mh-dispo-tel:hover { text-decoration: underline; }
.mh-dispo-tel-na {
    color: var(--mh-text-muted);
    font-style: italic;
    font-size: 13px;
    text-decoration: none;
}
.mh-dispo-tel-na:hover { color: var(--mh-blue); }

/* Cellule mise à jour */
.mh-dispo-cell-upd {
    font-size: 13px;
    color: var(--mh-text-muted);
    white-space: nowrap;
}

/* ----- Vue Cartes (mode alternatif) -----
   ⚠️ Le `display: grid` ci-dessous a plus de spécificité que l'attribut
   HTML `hidden` (= display:none). Sans le sélecteur `[hidden]` explicite
   ci-dessous, la vue cartes resterait visible même quand on bascule sur
   la vue tableau. Idem pour la table en sens inverse. */
.mh-dispo-cards[hidden],
.mh-dispo-table[hidden] {
    display: none !important;
}
.mh-dispo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
/* Wrapper : conteneur grid-item qui héberge le <a class="mh-dispo-card">
   + le bouton "Centrer sur la carte" en overlay top-right. Position
   relative pour ancrer le bouton en absolute. */
.mh-dispo-card-wrap {
    position: relative;
}
.mh-dispo-card {
    background: #fff;
    border: 1px solid var(--mh-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--mh-text);
    transition: transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    /* La card occupe 100% du wrapper */
    height: 100%;
}
.mh-dispo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    text-decoration: none;
    color: var(--mh-text);
}
/* Bouton "Centrer sur la carte" en overlay top-right de la carte.
   Pastille blanche pour rester visible sur photo. Hors du <a> = pas
   d'invalid HTML5, et le clic ne propage pas vers la navigation grâce
   au handler global (preventDefault + stopPropagation). */
.mh-dispo-card-mapbtn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mh-blue);
    cursor: pointer;
    transition: background .15s, transform .12s;
    z-index: 3;
    padding: 0;
}
.mh-dispo-card-mapbtn:hover {
    background: #fff;
    transform: scale(1.08);
}
.mh-dispo-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--mh-bg-soft);
}
.mh-dispo-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Wrap absolu de positionnement de l'overlay date sur les cards.
   Le badge interne est rendu par renderDateBadge() — l'overlay est juste
   un wrapper qui le positionne en absolute, sans changer son style. */
.mh-dispo-card-badge-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}
.mh-dispo-card-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mh-dispo-card-name {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: var(--mh-blue);
    /* Tronque à 2 lignes pour homogénéité */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mh-dispo-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: var(--mh-text-muted);
    margin-top: auto;
}

/* ----- État vide ----- */
.mh-dispo-empty {
    padding: 40px 22px;
    text-align: center;
    color: var(--mh-text-muted);
    font-size: 15px;
    background: var(--mh-bg-soft);
    border-radius: 12px;
    line-height: 1.6;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .mh-dispo-hero h1 { font-size: 22px; }
    .mh-dispo-subtitle { font-size: 13px; }
    .mh-dispo-tab { padding: 7px 14px; font-size: 13px; }
    /* Tableau : on cache la photo et la date "upd" en mobile (gain de
       place — l'info reste dispo via clic sur l'annonce). */
    .mh-dispo-table .mh-dispo-col-photo,
    .mh-dispo-table .mh-dispo-cell-photo,
    .mh-dispo-table .mh-dispo-col-upd,
    .mh-dispo-table .mh-dispo-cell-upd {
        display: none;
    }
    .mh-dispo-table th, .mh-dispo-table td { padding: 10px 8px; font-size: 13px; }
    .mh-dispo-date-badge { width: 44px; padding: 6px 2px; }
    .mh-dispo-date-day { font-size: 17px; }
    .mh-dispo-date-badge-range { min-width: 60px; padding: 6px 6px; }
    .mh-dispo-date-badge-range .mh-dispo-date-day { font-size: 13px; }
    .mh-dispo-date-badge-multi { min-width: 70px; padding: 5px 6px; }
    .mh-dispo-date-multi-from, .mh-dispo-date-multi-to { font-size: 11px; }
    .mh-dispo-toolbar { flex-direction: column; align-items: stretch; }
    .mh-dispo-view-toggle { justify-content: center; }
    /* En mode column, le flex-basis "280px" de .mh-dispo-search devient
       la HAUTEUR initiale du wrapper → bloc géant + icône loupe isolée
       au milieu du vide + tableau rejeté loin en dessous. Fix : on
       désactive l'étirement vertical et on prend toute la largeur. */
    .mh-dispo-search { flex: 0 0 auto; max-width: 100%; }
}
@media (max-width: 480px) {
    .mh-dispo-hero { padding: 18px 12px 22px; }
    .mh-dispo-results { padding: 0 10px 30px; }
    .mh-dispo-count, .mh-dispo-disclaimer, .mh-dispo-toolbar { padding-left: 10px; padding-right: 10px; }
    /* En très petit : cache aussi le type (info redondante avec le nom) */
    .mh-dispo-table .mh-dispo-col-type,
    .mh-dispo-table .mh-dispo-cell-type { display: none; }
}

/* =====================================================================
   PAGE /recherche_pour_vous — formulaire mass-demande
   ===================================================================== */
.mh-rech-page {
    width: 95%;
    max-width: 880px;
    margin: 18px auto 40px;
    color: var(--mh-text);
    line-height: 1.6;
}

/* Hero */
.mh-rech-hero {
    background: linear-gradient(135deg, var(--mh-blue) 0%, var(--mh-blue-light) 100%);
    color: #fff;
    padding: 26px 28px;
    border-radius: var(--mh-radius-lg);
    margin-bottom: 22px;
    text-align: center;
}
.mh-rech-hero h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
}
.mh-rech-subtitle {
    margin: 0;
    font-size: 15px;
    color: rgba(255,255,255,.92);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Confirmation succès */
.mh-rech-success {
    background: #e7f7ee;
    border: 1px solid #2bbd76;
    border-radius: var(--mh-radius-lg);
    padding: 24px 28px;
    color: #1b5e20;
    text-align: center;
}
.mh-rech-success h2 {
    margin: 0 0 14px;
    color: #1b5e20;
}
.mh-rech-success code {
    background: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    color: var(--mh-blue);
    font-weight: bold;
}
.mh-rech-new-btn,
.mh-rech-home-btn {
    display: inline-block;
    margin: 0 6px;
    padding: 10px 20px;
    border-radius: var(--mh-radius);
    font-weight: bold;
    text-decoration: none;
    transition: opacity .15s, transform .12s;
}
.mh-rech-new-btn  { background: var(--mh-blue);   color: #fff; }
.mh-rech-home-btn { background: #fff; color: var(--mh-blue); border: 1.5px solid var(--mh-blue); }
.mh-rech-new-btn:hover,
.mh-rech-home-btn:hover { opacity: .9; transform: translateY(-1px); text-decoration: none; }

/* Erreurs */
.mh-rech-errors {
    background: #fee;
    border: 1px solid #f5b3b3;
    border-left: 4px solid #c53030;
    border-radius: var(--mh-radius);
    padding: 12px 18px;
    color: #842029;
    margin-bottom: 18px;
}
.mh-rech-errors ul { margin: 6px 0 0; padding-left: 22px; }
.mh-rech-errors li { margin-bottom: 3px; }

/* Honeypot caché */
.mh-rech-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

/* Form layout */
.mh-rech-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mh-rech-section {
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
    padding: 18px 22px 16px;
    background: #fff;
}
.mh-rech-section legend {
    padding: 0 8px;
    font-weight: bold;
    color: var(--mh-blue);
    font-size: 16px;
}
.mh-rech-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.mh-rech-row:last-child { margin-bottom: 0; }
.mh-rech-row label {
    font-weight: bold;
    font-size: 14px;
    color: var(--mh-text);
}
.mh-rech-req { color: var(--mh-pink-dark); }
.mh-rech-opt { color: var(--mh-text-muted); font-weight: normal; font-size: 12px; }
.mh-rech-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--mh-text-muted);
    line-height: 1.4;
    font-style: italic;
}
.mh-rech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.mh-rech-row-full { grid-column: 1 / -1; }

.mh-rech-form input[type=text],
.mh-rech-form input[type=email],
.mh-rech-form input[type=tel],
.mh-rech-form input[type=number],
.mh-rech-form input[type=date],
.mh-rech-form select,
.mh-rech-form textarea {
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--mh-text);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.mh-rech-form input:focus,
.mh-rech-form select:focus,
.mh-rech-form textarea:focus {
    outline: none;
    border-color: var(--mh-blue);
    box-shadow: 0 0 0 3px rgba(14,91,149,.15);
}
.mh-rech-form textarea { resize: vertical; min-height: 90px; }

/* Ligne LIEU : ville (1fr) + rayon (auto) côte à côte en desktop,
   empilés en mobile. */
.mh-rech-row-lieu {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 14px;
    align-items: end;       /* aligne les inputs en bas même si les labels
                                ont des longueurs différentes */
    margin-bottom: 6px;
}
.mh-rech-row-lieu .mh-rech-row { margin-bottom: 0; }
@media (max-width: 540px) {
    .mh-rech-row-lieu {
        grid-template-columns: 1fr;
    }
}

/* Autocomplete ville */
.mh-rech-ville-wrap {
    position: relative;
}
.mh-rech-ville-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.mh-rech-ville-list.open { display: block; }
.mh-rech-ville-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--mh-bg-soft);
    transition: background .12s;
}
.mh-rech-ville-item:hover {
    background: var(--mh-bg-soft);
}
.mh-rech-ville-item:last-child { border-bottom: 0; }
.mh-rech-ville-nom { font-weight: bold; color: var(--mh-text); }
.mh-rech-ville-cp  { color: var(--mh-text-muted); font-size: 12px; margin-left: 4px; }
.mh-rech-ville-dpt { font-size: 12px; color: var(--mh-text-muted); margin-top: 2px; }
.mh-rech-ville-empty {
    padding: 12px;
    color: var(--mh-text-muted);
    font-style: italic;
    text-align: center;
    font-size: 13px;
}

/* Options avancées (details) */
.mh-rech-advanced {
    background: var(--mh-bg-soft);
    border: 1px dashed var(--mh-border);
    border-radius: var(--mh-radius);
    padding: 10px 18px;
}
.mh-rech-advanced summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--mh-text-muted);
    padding: 6px 0;
    list-style: none;
}
.mh-rech-advanced summary::-webkit-details-marker { display: none; }
.mh-rech-advanced summary::before {
    content: '▸ ';
    transition: transform .15s;
    display: inline-block;
}
.mh-rech-advanced[open] summary::before { transform: rotate(90deg); }
.mh-rech-advanced[open] summary { color: var(--mh-blue); margin-bottom: 8px; }

/* Submit row */
.mh-rech-submit-row {
    text-align: center;
    margin-top: 6px;
}
.mh-rech-submit {
    background: var(--mh-blue);
    color: #fff;
    border: 0;
    border-radius: var(--mh-radius);
    padding: 14px 36px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(14,91,149,.3);
    transition: background .15s, transform .12s, box-shadow .15s;
}
.mh-rech-submit:hover {
    background: var(--mh-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(14,91,149,.4);
}
.mh-rech-privacy {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--mh-text-muted);
    font-style: italic;
}

@media (max-width: 600px) {
    .mh-rech-hero h1 { font-size: 22px; }
    .mh-rech-subtitle { font-size: 13px; }
    .mh-rech-section { padding: 14px 16px; }
    .mh-rech-grid { grid-template-columns: 1fr; }
    .mh-rech-submit { width: 100%; }
    .mh-rech-new-btn, .mh-rech-home-btn { display: block; margin: 8px 0; }
}

/* =====================================================================
   CTA "Nous recherchons pour vous" sur les pages liste (ville + cat)
   ===================================================================== */
.mh-cta-recherche {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Centré + largeur 95% (alignement sur .mh-cat-layout qui sert de
       repère visuel sur les pages catégorie/ville). Sans ça, le callout
       collait aux bords du viewport sur page_category. */
    width: 95%;
    max-width: 1200px;
    margin: 22px auto 18px;
    padding: 16px 22px;
    background: #f5fafd;                /* bleu très pâle, discret */
    border: 1px solid #d6e8f3;
    border-left: 4px solid var(--mh-blue);
    border-radius: var(--mh-radius);
    color: var(--mh-text);
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}
.mh-cta-recherche-ico {
    font-size: 28px;
    flex-shrink: 0;
}
.mh-cta-recherche-txt {
    flex: 1 1 auto;
    min-width: 0;
}
.mh-cta-recherche-txt strong {
    color: var(--mh-blue);
    display: block;
    margin-bottom: 2px;
}
.mh-cta-recherche-btn {
    flex-shrink: 0;
    display: inline-block;
    padding: 10px 18px;
    background: var(--mh-blue);
    color: #fff;
    text-decoration: none;
    border-radius: var(--mh-radius);
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    transition: background .15s, transform .12s;
}
.mh-cta-recherche-btn:hover {
    background: var(--mh-blue-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .mh-cta-recherche {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }
    .mh-cta-recherche-ico { font-size: 24px; }
    .mh-cta-recherche-btn { width: 100%; text-align: center; }
}

/* === Modal de confirmation /recherche_pour_vous ====================== */
.mh-rech-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mh-rech-confirm-modal[hidden] { display: none; }
.mh-rech-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    animation: mh-rech-fade .15s ease-out;
}
@keyframes mh-rech-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mh-rech-confirm-box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--mh-radius-lg);
    padding: 24px 28px 22px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    animation: mh-rech-pop .2s ease-out;
}
@keyframes mh-rech-pop {
    from { opacity: 0; transform: scale(.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
.mh-rech-confirm-box h3 {
    margin: 0 0 10px;
    font-size: 19px;
    color: var(--mh-blue);
}
.mh-rech-confirm-msg {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--mh-text);
}
.mh-rech-confirm-recap {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 13px;
    color: var(--mh-text);
    line-height: 1.6;
}
.mh-rech-confirm-recap li { margin-bottom: 4px; }
.mh-rech-confirm-recap strong { color: var(--mh-blue); }
.mh-rech-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.mh-rech-confirm-cancel,
.mh-rech-confirm-ok {
    padding: 10px 18px;
    border-radius: var(--mh-radius);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    transition: background .12s, color .12s;
}
.mh-rech-confirm-cancel {
    background: var(--mh-bg-soft);
    color: var(--mh-text);
}
.mh-rech-confirm-cancel:hover { background: var(--mh-border); }
.mh-rech-confirm-ok {
    background: var(--mh-blue);
    color: #fff;
}
.mh-rech-confirm-ok:hover { background: var(--mh-blue-dark); }
.mh-rech-confirm-ok:focus-visible,
.mh-rech-confirm-cancel:focus-visible {
    outline: 2px solid var(--mh-blue);
    outline-offset: 2px;
}


/* === Banner global d'impersonation (injecté dans layout_default) === */
.mh-impers-banner {
    background: linear-gradient(90deg, #f59e0b, #f97316);
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    position: sticky;
    top: 0;
    z-index: 9000;
}
.mh-impers-exit {
    margin-left: 14px;
    color: #fff;
    background: rgba(0,0,0,.18);
    padding: 4px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12.5px;
}
.mh-impers-exit:hover { background: rgba(0,0,0,.32); }

/* === Badge admin flottant (visible sur le site public quand admin connecté) === */
.mh-admin-badge {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 9050;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    background: linear-gradient(135deg, #1e3a5f, #0e5b95);
    color: #fff;
    border-radius: 30px;
    box-shadow: 0 6px 18px rgba(14,91,149,.4), 0 0 0 1px rgba(255,255,255,.08) inset;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: transform .15s, box-shadow .15s;
}
.mh-admin-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(14,91,149,.5), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.mh-admin-badge-icon {
    font-size: 14px;
    line-height: 1;
}
.mh-admin-badge-label {
    color: rgba(255,255,255,.92);
    white-space: nowrap;
}
.mh-admin-badge-label strong { color: #fff; }
.mh-admin-badge-link {
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.18);
    padding: 5px 11px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    transition: background .12s;
    white-space: nowrap;
}
.mh-admin-badge-link:hover {
    background: rgba(255,255,255,.32);
    color: #fff;
}
.mh-admin-badge-logout {
    padding: 5px 9px;
    background: rgba(220,38,38,.35);
}
.mh-admin-badge-logout:hover { background: #dc2626; }

@media (max-width: 600px) {
    .mh-admin-badge {
        bottom: 10px;
        left: 10px;
        padding: 6px 8px 6px 10px;
        font-size: 11px;
    }
    .mh-admin-badge-label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
    .mh-admin-badge-link { padding: 4px 8px; font-size: 10.5px; }
}

/* ===========================================================================
   /inscription_proprietaire — Wizard d'inscription (3 étapes)
   =========================================================================== */

/* === Layout commun à toutes les pages du wizard === */
.mh-insc-wizard,
.mh-insc-landing {
    max-width: 920px;
    margin: 26px auto;
    padding: 0 16px 56px;
}
.mh-insc-card {
    background: #fff;
    border-radius: var(--mh-radius);
    box-shadow: 0 4px 14px rgba(14,91,149,.06);
    padding: 28px 30px 32px;
    border: 1px solid var(--mh-border);
}
.mh-insc-card-head {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--mh-bg-soft);
}
.mh-insc-card-head h1 {
    margin: 0 0 4px;
    font-size: 22px;
    color: var(--mh-blue);
    font-weight: 700;
}
.mh-insc-card-head p {
    margin: 0;
    color: var(--mh-text-muted);
    font-size: 14px;
}

/* === Progress bar 3 étapes === */
.mh-insc-progress { margin: 0 0 24px; }
.mh-insc-progress ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0;
}
.mh-insc-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 14px 8px 10px;
    color: var(--mh-text-muted);
    font-size: 13px;
    font-weight: 600;
}
.mh-insc-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--mh-bg-soft);
    color: var(--mh-text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    border: 2px solid var(--mh-border);
    transition: background .15s, color .15s, border-color .15s;
}
.mh-insc-step-label { display: block; font-size: 12.5px; }
.mh-insc-step-link {
    color: var(--mh-blue) !important;
    text-decoration: underline;
    cursor: pointer;
    transition: color .15s;
}
.mh-insc-step-link:hover { color: var(--mh-blue-dark, #0a4775) !important; }
.mh-insc-step.is-active .mh-insc-step-num {
    background: var(--mh-blue);
    color: #fff;
    border-color: var(--mh-blue);
    box-shadow: 0 0 0 4px rgba(14,91,149,.15);
}
.mh-insc-step.is-active .mh-insc-step-label,
.mh-insc-step.is-done .mh-insc-step-label { color: var(--mh-text); }
.mh-insc-step.is-done .mh-insc-step-num {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}
.mh-insc-step::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--mh-border);
    z-index: -1;
}
.mh-insc-step:last-child::after { display: none; }
.mh-insc-step.is-done::after,
.mh-insc-step.is-active::after { background: var(--mh-blue-light); }

/* === Forms communs === */
.mh-insc-row { margin-bottom: 16px; }
.mh-insc-row label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--mh-text);
    margin-bottom: 5px;
}
.mh-insc-row input[type=text],
.mh-insc-row input[type=email],
.mh-insc-row input[type=url],
.mh-insc-row input[type=tel],
.mh-insc-row input[type=number],
.mh-insc-row input[type=password],
.mh-insc-row select,
.mh-insc-row textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.mh-insc-row input:focus,
.mh-insc-row select:focus,
.mh-insc-row textarea:focus {
    outline: none;
    border-color: var(--mh-blue);
    box-shadow: 0 0 0 3px rgba(14,91,149,.15);
}
.mh-insc-row textarea { resize: vertical; min-height: 110px; }
.mh-insc-row-hint {
    display: block;
    color: var(--mh-text-muted);
    font-size: 12px;
    margin-top: 4px;
    font-style: italic;
}
.mh-insc-req { color: #dc2626; }
.mh-insc-row-check label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}
.mh-insc-row-check input[type=checkbox] {
    margin-top: 3px;
    cursor: pointer;
    flex-shrink: 0;
}
.mh-insc-row-check label > span { font-size: 13.5px; line-height: 1.5; color: var(--mh-text); }
.mh-insc-row-check a { color: var(--mh-blue); text-decoration: underline; }
.mh-insc-row input.is-valid { border-color: #10b981; }
.mh-insc-row input.is-invalid { border-color: #dc2626; }
.mh-insc-field-err input,
.mh-insc-field-err select,
.mh-insc-field-err textarea { border-color: #dc2626 !important; }
.mh-insc-field-msg {
    display: block;
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 600;
}

.mh-insc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mh-insc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 600px) {
    .mh-insc-grid-2, .mh-insc-grid-3 { grid-template-columns: 1fr; }
}

.mh-insc-fieldset { border: none; padding: 0; margin: 0 0 28px; }
.mh-insc-fieldset legend {
    font-size: 15px;
    font-weight: 700;
    color: var(--mh-blue);
    padding: 0;
    margin-bottom: 12px;
}

.mh-insc-alert {
    padding: 12px 16px;
    border-radius: var(--mh-radius-sm);
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.5;
}
.mh-insc-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}
.mh-insc-resume {
    background: #fff5d6;
    border-left: 4px solid #f59e0b;
    padding: 14px 18px;
    border-radius: var(--mh-radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    color: #78350f;
}
.mh-insc-resume p { margin: 0 0 10px; }

.mh-insc-btn-primary {
    background: linear-gradient(135deg, var(--mh-blue), #1e3a5f);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: var(--mh-radius);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(14,91,149,.25);
    transition: transform .12s, box-shadow .15s;
}
.mh-insc-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(14,91,149,.4);
}
.mh-insc-btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: .75;
}

/* Récapitulatif "il manque ceci" sous le formulaire étape 2 */
.mh-insc-missing-recap {
    margin: 20px 0 12px;
    padding: 14px 18px;
    background: #fef3c7;        /* jaune doux */
    border-left: 4px solid #f59e0b;
    border-radius: var(--mh-radius-sm, 6px);
    color: #78350f;
    font-size: 14px;
}
.mh-insc-missing-recap strong { display: block; margin-bottom: 8px; font-size: 15px; }
.mh-insc-missing-recap ul     { margin: 0; padding: 0; list-style: none; }
.mh-insc-missing-recap li     {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(120, 53, 15, .25);
}
.mh-insc-missing-recap li:last-child { border-bottom: none; }
.mh-insc-missing-label {
    flex: 1;
    line-height: 1.3;
}
.mh-insc-missing-btn {
    flex-shrink: 0;
    background: #f59e0b;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: var(--mh-radius-sm, 6px);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s;
}
.mh-insc-missing-btn:hover  { background: #d97706; }
.mh-insc-missing-btn:active { background: #b45309; }

/* Flash de surlignage quand on clique sur "Remplir" pour situer le champ */
.mh-insc-row-flash {
    animation: mh-insc-flash 1.4s ease-out;
    border-radius: var(--mh-radius-sm, 6px);
}
@keyframes mh-insc-flash {
    0%   { background: rgba(245, 158, 11, .35); }
    100% { background: transparent; }
}
.mh-insc-btn-secondary {
    background: #fff;
    color: var(--mh-blue);
    border: 1.5px solid var(--mh-blue);
    padding: 10px 18px;
    border-radius: var(--mh-radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.mh-insc-btn-secondary:hover { background: var(--mh-blue); color: #fff; }
.mh-insc-btn-back {
    color: var(--mh-text-muted);
    text-decoration: none;
    font-size: 13px;
    padding: 10px 14px;
}
.mh-insc-btn-back:hover { color: var(--mh-blue); text-decoration: underline; }
.mh-insc-actions { margin-top: 22px; text-align: center; }
.mh-insc-actions small {
    display: block;
    margin-top: 8px;
    color: var(--mh-text-muted);
    font-size: 12px;
}
.mh-insc-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    margin-top: 26px;
}
.mh-insc-back { text-align: center; margin: 18px 0; }
.mh-insc-back a { color: var(--mh-text-muted); text-decoration: none; font-size: 13px; }
.mh-insc-back a:hover { color: var(--mh-blue); }

.mh-insc-err-recap {
    background: #fee2e2;
    border-left: 4px solid #dc2626;
    padding: 12px 18px;
    border-radius: var(--mh-radius-sm);
    margin: 16px 0;
    color: #991b1b;
    font-size: 13.5px;
}
.mh-insc-err-recap ul { margin: 6px 0 0 20px; padding: 0; }

/* === Pays bloc révélé après email valide === */
.mh-insc-row-pays {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease-out, opacity .25s, margin-bottom .35s;
    margin-bottom: 0;
}
.mh-insc-row-pays.is-visible {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 16px;
}

/* === Mot de passe : œil + entropy + critères === */
.mh-insc-pwd-wrap { position: relative; }
.mh-insc-pwd-wrap input { padding-right: 38px !important; }
.mh-insc-pwd-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    color: var(--mh-text-muted);
    cursor: pointer;
    padding: 4px 6px;
}
.mh-insc-pwd-meter { margin: 8px 0 6px; }
.mh-insc-pwd-bar {
    height: 6px;
    background: var(--mh-border);
    border-radius: 99px;
    overflow: hidden;
}
.mh-insc-pwd-bar > div {
    height: 100%;
    width: 0;
    background: #ccc;
    border-radius: 99px;
    transition: width .25s, background .25s;
}
#mh-insc-pwd-label {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--mh-text-muted);
}
.mh-insc-pwd-crit {
    list-style: none;
    padding: 0;
    margin: 8px 0 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: 12px;
}
.mh-insc-pwd-crit li { color: #aaa; }
.mh-insc-pwd-crit li.is-ok { color: #059669; font-weight: 600; }
.mh-insc-pwd-suggest {
    background: var(--mh-bg-soft);
    border: 1px dashed var(--mh-blue-light);
    color: var(--mh-blue);
    padding: 6px 12px;
    border-radius: var(--mh-radius-sm);
    font-size: 12.5px;
    cursor: pointer;
    margin-top: 4px;
}
.mh-insc-pwd-suggest:hover { background: var(--mh-blue); color: #fff; border-style: solid; }

/* === Toggles oui/non équipements === */
.mh-insc-toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0 4px;
}
@media (max-width: 600px) { .mh-insc-toggles { grid-template-columns: 1fr; } }
.mh-insc-toggle {
    background: var(--mh-bg-soft);
    border-radius: var(--mh-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mh-insc-toggle-label { font-size: 13.5px; font-weight: 600; color: var(--mh-text); }
.mh-insc-toggle-btns {
    display: inline-flex;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mh-border);
}
.mh-insc-tbtn {
    background: transparent;
    border: none;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    color: var(--mh-text-muted);
    transition: background .12s, color .12s;
}
.mh-insc-tbtn-yes.is-on { background: #d1fae5; color: #065f46; }
.mh-insc-tbtn-no.is-on  { background: #fee2e2; color: #991b1b; }

/* === Tarifs collapsible === */
.mh-insc-tarifs-details summary {
    cursor: pointer;
    background: var(--mh-bg-soft);
    padding: 10px 14px;
    border-radius: var(--mh-radius-sm);
    color: var(--mh-blue);
    font-weight: 700;
    font-size: 13.5px;
    list-style: none;
    margin-bottom: 14px;
}
.mh-insc-tarifs-details summary::before { content: '▸ '; }
.mh-insc-tarifs-details[open] summary::before { content: '▾ '; }
.mh-insc-tarifs-details summary::-webkit-details-marker { display: none; }
.mh-insc-tarifs-details summary:hover { background: var(--mh-blue-light); color: #fff; }

/* === Modal RGPD === */
.mh-insc-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mh-insc-modal[hidden] { display: none; }
.mh-insc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
}
.mh-insc-modal-box {
    position: relative;
    background: #fff;
    border-radius: var(--mh-radius);
    max-width: 600px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.mh-insc-modal-box h2 { margin: 0 0 14px; color: var(--mh-blue); font-size: 18px; }
.mh-insc-modal-box p { margin: 6px 0; font-size: 13.5px; line-height: 1.5; }
.mh-insc-modal-box ul { margin: 8px 0 8px 22px; font-size: 13.5px; }
.mh-insc-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--mh-text-muted);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
}
.mh-insc-modal-close:hover { background: var(--mh-bg-soft); color: var(--mh-text); }

/* ===========================================================================
   Landing page (sales) — /inscription_proprietaire
   =========================================================================== */
.mh-insc-hero {
    text-align: center;
    background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
    border-radius: var(--mh-radius-lg);
    padding: 48px 24px 38px;
    margin-bottom: 32px;
    border: 1px solid var(--mh-border);
}
.mh-insc-hero h1 {
    margin: 0 0 12px;
    font-size: 30px;
    color: var(--mh-blue);
    font-weight: 700;
}
.mh-insc-hero-sub {
    max-width: 620px;
    margin: 0 auto 28px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mh-text);
}
.mh-insc-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}
.mh-insc-cta {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: transform .12s, box-shadow .15s;
}
.mh-insc-cta-primary {
    background: linear-gradient(135deg, var(--mh-blue), #1e3a5f);
    color: #fff;
    box-shadow: 0 6px 18px rgba(14,91,149,.3);
}
.mh-insc-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14,91,149,.45);
}
.mh-insc-hero-foot { margin: 0; font-size: 13px; color: var(--mh-text-muted); }
.mh-insc-hero-foot a { color: var(--mh-blue); }

.mh-insc-formulas { margin: 36px 0 32px; }
.mh-insc-formulas h2 {
    text-align: center;
    color: var(--mh-blue);
    font-size: 22px;
    margin: 0 0 8px;
}
.mh-insc-formulas-intro {
    text-align: center;
    color: var(--mh-text-muted);
    margin: 0 0 24px;
    font-size: 14px;
}
.mh-insc-formulas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.mh-insc-formula {
    background: #fff;
    border: 1.5px solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
    padding: 22px 24px;
    position: relative;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mh-insc-formula:hover {
    transform: translateY(-3px);
    border-color: var(--mh-blue-light);
    box-shadow: 0 10px 24px rgba(14,91,149,.12);
}
.mh-insc-formula-pop {
    border-color: var(--mh-blue);
    background: linear-gradient(180deg, #f0f7ff, #fff);
}
.mh-insc-formula-premium {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #fff5d6, #fff);
}
.mh-insc-formula-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mh-blue);
    color: #fff;
    padding: 4px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mh-insc-formula-head {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mh-bg-soft);
}
.mh-insc-formula-head h3 { margin: 0 0 8px; color: var(--mh-blue); font-size: 17px; }
.mh-insc-formula-price { font-size: 13px; color: var(--mh-text-muted); }
.mh-insc-formula-price strong {
    font-size: 26px;
    color: var(--mh-text);
    font-weight: 700;
}
.mh-insc-formula-features {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--mh-text);
}
.mh-insc-formula-features li { padding: 2px 0; }
.mh-insc-formulas-foot {
    text-align: center;
    margin: 22px 0 0;
    font-size: 12.5px;
    color: var(--mh-text-muted);
    font-style: italic;
}

.mh-insc-trust {
    margin: 36px 0;
    padding: 26px 24px;
    background: var(--mh-bg-soft);
    border-radius: var(--mh-radius-lg);
}
.mh-insc-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}
.mh-insc-trust-item { text-align: center; }
.mh-insc-trust-icon { font-size: 32px; margin-bottom: 8px; }
.mh-insc-trust-item h3 { margin: 0 0 6px; color: var(--mh-blue); font-size: 15px; }
.mh-insc-trust-item p { margin: 0; font-size: 13px; color: var(--mh-text); line-height: 1.5; }

.mh-insc-cta-bottom {
    text-align: center;
    padding: 32px 16px;
    background: linear-gradient(135deg, var(--mh-blue) 0%, #1e3a5f 100%);
    border-radius: var(--mh-radius-lg);
    color: #fff;
}
.mh-insc-cta-bottom p { margin: 0 0 18px; font-size: 17px; }
.mh-insc-cta-bottom .mh-insc-cta-primary {
    background: #fff;
    color: var(--mh-blue);
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.mh-insc-cta-bottom .mh-insc-cta-primary:hover { background: var(--mh-bg-soft); }

/* ===========================================================================
   Étape 3 — Drag&drop photos
   =========================================================================== */
.mh-insc-quota {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mh-insc-quota-count { font-size: 13.5px; color: var(--mh-text-muted); white-space: nowrap; }
.mh-insc-quota-count strong { color: var(--mh-blue); font-size: 16px; }
.mh-insc-quota-bar {
    flex: 1;
    height: 8px;
    background: var(--mh-bg-soft);
    border-radius: 99px;
    overflow: hidden;
}
.mh-insc-quota-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--mh-blue), var(--mh-blue-light));
    border-radius: 99px;
    transition: width .3s;
}

.mh-insc-dropzone {
    border: 2.5px dashed var(--mh-blue-light);
    background: var(--mh-bg-soft);
    border-radius: var(--mh-radius);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    margin-bottom: 22px;
}
.mh-insc-dropzone:hover,
.mh-insc-dropzone.is-drag {
    background: #f0f7ff;
    border-color: var(--mh-blue);
    transform: scale(1.005);
}
.mh-insc-dz-icon { font-size: 42px; margin-bottom: 8px; opacity: .6; }
.mh-insc-dz-title { margin: 0 0 14px; font-size: 14.5px; color: var(--mh-text); font-weight: 600; }
.mh-insc-dz-title small {
    display: block;
    font-size: 12px;
    color: var(--mh-text-muted);
    font-weight: normal;
    margin: 4px 0;
}

.mh-insc-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.mh-insc-photo {
    background: #fff;
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    overflow: hidden;
    transition: opacity .2s, transform .15s;
    position: relative;
}
.mh-insc-photo:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.mh-insc-photo-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--mh-bg-soft);
    overflow: hidden;
}
.mh-insc-photo-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.mh-insc-photo-desig {
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-top: 1px solid var(--mh-bg-soft);
    font-size: 12px;
    background: #fff;
    box-sizing: border-box;
}
.mh-insc-photo-desig:focus { outline: none; background: #fffae0; }
/* Bouton supprimer photo — ROUGE par défaut (visible sans hover) */
.mh-insc-photo-del {
    display: block;
    width: 100%;
    margin-top: 6px;
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 7px 10px;
    border-radius: var(--mh-radius-sm, 6px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    transition: background .12s, transform .08s;
}
.mh-insc-photo-del:hover  { background: #b91c1c; }
.mh-insc-photo-del:active { transform: scale(.97); }
.mh-insc-photo-del-ico    { margin-right: 4px; }

/* Boutons rotation (overlay en haut de la vignette) */
.mh-insc-photo-rotates {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.mh-insc-photo:hover .mh-insc-photo-rotates,
.mh-insc-photo:focus-within .mh-insc-photo-rotates { opacity: 1; }
.mh-insc-photo-rot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, transform .15s;
}
.mh-insc-photo-rot:hover    { background: #0e639c; }
.mh-insc-photo-rot:disabled { opacity: .5; cursor: wait; }
.mh-insc-photo.is-rotating .mh-insc-photo-img img { animation: mh-insc-rot-spin .8s linear infinite; }
@keyframes mh-insc-rot-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Overlay drag&drop pleine page */
.mh-insc-fullpage-dz {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(14, 99, 156, .85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;          /* laisse passer les events pour drop natif */
    animation: mh-insc-fullpage-in .15s ease-out;
}
/* IMPORTANT : l'attribut HTML `hidden` doit gagner contre `display: flex`.
   Sans ce !important, l'overlay s'affiche dès le chargement de la page. */
.mh-insc-fullpage-dz[hidden] { display: none !important; }
.mh-insc-uploads-queue[hidden] { display: none !important; }
@keyframes mh-insc-fullpage-in {
    from { opacity: 0; } to { opacity: 1; }
}
.mh-insc-fullpage-dz-inner {
    text-align: center;
    color: #fff;
    padding: 40px 60px;
    border: 3px dashed #fff;
    border-radius: 18px;
    max-width: 600px;
}
.mh-insc-fullpage-dz-icon  { font-size: 64px; line-height: 1; margin-bottom: 16px; }
.mh-insc-fullpage-dz-title { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
.mh-insc-fullpage-dz-sub   { font-size: 15px; opacity: .85; margin: 0; }
body.mh-insc-dragging      { cursor: copy; }

/* Queue d'uploads en cours (barres de progression) */
.mh-insc-uploads-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
    padding: 12px;
    background: var(--mh-bg-soft, #f7f8fa);
    border-radius: var(--mh-radius-sm, 6px);
    border: 1px solid var(--mh-border, #e5e7eb);
}
.mh-insc-upload-item {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    transition: opacity .25s;
}
.mh-insc-upload-item.is-success { color: #059669; }
.mh-insc-upload-item.is-error   { color: #dc2626; }
.mh-insc-upload-name {
    font-size: 13px;
    color: var(--mh-text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh-insc-upload-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.mh-insc-upload-fill {
    height: 100%;
    background: linear-gradient(90deg, #0e639c, #2563eb);
    transition: width .15s ease-out;
}
.mh-insc-upload-fill.is-processing {
    background: linear-gradient(90deg, #f59e0b, #f97316, #f59e0b);
    background-size: 200% 100%;
    width: 100% !important;
    animation: mh-insc-processing 1.2s linear infinite;
}
@keyframes mh-insc-processing {
    from { background-position:   0% 0%; }
    to   { background-position: 200% 0%; }
}
.mh-insc-upload-pct {
    font-size: 12px;
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}

.mh-insc-photos-empty {
    text-align: center;
    color: var(--mh-text-muted);
    font-style: italic;
    padding: 28px 16px;
    background: var(--mh-bg-soft);
    border-radius: var(--mh-radius-sm);
    margin-bottom: 14px;
}
.mh-insc-foot-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--mh-text-muted);
    text-align: center;
    line-height: 1.5;
}

/* =====================================================================
   PAIEMENT — Page de devis & récap (Controller_Paiement)
   ===================================================================== */
.mh-pay-wrap {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}
.mh-pay-head {
    text-align: center;
    margin-bottom: 24px;
}
.mh-pay-head h1 { font-size: 28px; margin: 0 0 6px; color: var(--mh-text, #111827); }
.mh-pay-head p  { margin: 0; color: var(--mh-text-muted, #6b7280); font-size: 15px; }
.mh-pay-head-email { font-size: 13px; opacity: .8; margin-top: 4px !important; }
.mh-pay-head-actions {
    margin-top: 10px !important;
    font-size: 13.5px;
    color: var(--mh-text-muted, #6b7280);
}
.mh-pay-link-back {
    color: var(--mh-blue, #0e639c);
    text-decoration: none;
    font-weight: 600;
}
.mh-pay-link-back:hover { text-decoration: underline; }

.mh-pay-alert {
    padding: 12px 16px;
    border-radius: var(--mh-radius-sm, 6px);
    margin: 14px 0;
    font-size: 14px;
}
.mh-pay-alert-error { background: #fee2e2; color: #991b1b; border-left: 4px solid #dc2626; }

#mh-pay-form {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    #mh-pay-form { grid-template-columns: 1fr; }
}

.mh-pay-catalog { display: flex; flex-direction: column; gap: 18px; }

.mh-pay-section {
    background: #fff;
    border: 1px solid var(--mh-border, #e5e7eb);
    border-radius: 10px;
    padding: 18px 20px;
}
.mh-pay-section h2 {
    font-size: 17px;
    margin: 0 0 4px;
    color: var(--mh-blue, #0e639c);
}
.mh-pay-section-desc {
    font-size: 13.5px;
    color: var(--mh-text-muted, #6b7280);
    margin: 0 0 14px;
}

.mh-pay-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.mh-pay-product {
    position: relative;
    display: block;
    cursor: pointer;
}
.mh-pay-product input { position: absolute; opacity: 0; pointer-events: none; }
.mh-pay-product-inner {
    display: block;
    padding: 14px 14px 12px;
    background: var(--mh-bg-soft, #f7f8fa);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: background .12s, border-color .12s, transform .08s;
}
.mh-pay-product:hover .mh-pay-product-inner {
    background: #eef4fb;
}
.mh-pay-product input:checked + .mh-pay-product-inner {
    background: #dbeafe;
    border-color: var(--mh-blue, #0e639c);
    box-shadow: 0 2px 8px rgba(14,99,156,.18);
}
.mh-pay-product input:checked + .mh-pay-product-inner::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px; height: 22px;
    line-height: 22px; text-align: center;
    background: var(--mh-blue, #0e639c);
    color: #fff; border-radius: 50%;
    font-size: 13px; font-weight: 700;
}
.mh-pay-product-name   { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; margin-bottom: 6px; color: var(--mh-text, #111827); }
.mh-pay-product-duree  { display: inline-block; font-size: 12px; color: var(--mh-text-muted, #6b7280); margin-right: 8px; }
.mh-pay-product-photos {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}
.mh-pay-product-price  { display: block; font-size: 18px; font-weight: 700; color: var(--mh-blue, #0e639c); margin-top: 4px; }
.mh-pay-product-price small { font-size: 11px; opacity: .7; font-weight: 500; margin-left: 2px; }
.mh-pay-free { color: #059669; font-size: 14px; }

/* Coordonnées */
.mh-pay-coords {
    background: #fff;
    border: 1px solid var(--mh-border, #e5e7eb);
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 18px;
}
.mh-pay-coords h2 { font-size: 17px; margin: 0 0 14px; color: var(--mh-blue, #0e639c); }
.mh-pay-grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mh-pay-grid-3    { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
    .mh-pay-grid-2, .mh-pay-grid-3 { grid-template-columns: 1fr; }
}
.mh-pay-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.mh-pay-row label { font-size: 13.5px; font-weight: 600; color: var(--mh-text, #111827); }
.mh-pay-row input {
    padding: 9px 12px;
    border: 1px solid var(--mh-border, #d1d5db);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--mh-text, #111827);
}
.mh-pay-row input:focus { outline: 2px solid var(--mh-blue, #0e639c); outline-offset: -1px; border-color: var(--mh-blue, #0e639c); }
.mh-pay-row.is-error input { border-color: #dc2626; background: #fef2f2; }
.mh-pay-msg { color: #dc2626; font-size: 12.5px; }
.mh-req { color: #dc2626; font-weight: 700; }

/* Récap sticky (sidebar) */
.mh-pay-summary {
    position: sticky;
    top: 16px;
    background: #fff;
    border: 1px solid var(--mh-border, #e5e7eb);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.mh-pay-summary h3 { font-size: 16px; margin: 0 0 12px; color: var(--mh-text, #111827); }
#mh-pay-summary-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
#mh-pay-summary-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--mh-border, #e5e7eb);
    font-size: 13.5px;
}
#mh-pay-summary-list li:last-child { border-bottom: none; }
#mh-pay-summary-list li strong { color: var(--mh-blue, #0e639c); white-space: nowrap; }
.mh-pay-summary-empty {
    text-align: center;
    font-style: italic;
    color: var(--mh-text-muted, #6b7280);
    padding: 16px 0 !important;
    border: none !important;
}
.mh-pay-summary-totals {
    border-top: 2px solid var(--mh-border, #e5e7eb);
    padding-top: 12px;
    margin-top: 12px;
}
.mh-pay-totals-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
}
.mh-pay-totals-line-muted { color: var(--mh-text-muted, #6b7280); font-size: 12.5px; }
.mh-pay-totals-line-ttc {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--mh-border, #e5e7eb);
    font-size: 16px;
    font-weight: 700;
    color: var(--mh-blue, #0e639c);
}
.mh-pay-btn-primary {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 13px 18px;
    background: var(--mh-blue, #0e639c);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s;
}
.mh-pay-btn-primary:hover    { background: #084d7c; }
.mh-pay-btn-primary:disabled { background: #9ca3af; cursor: not-allowed; opacity: .7; }
.mh-pay-btn-secondary {
    display: inline-block;
    padding: 10px 16px;
    background: #fff;
    color: var(--mh-blue, #0e639c);
    border: 1.5px solid var(--mh-blue, #0e639c);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.mh-pay-btn-secondary:hover { background: var(--mh-blue, #0e639c); color: #fff; }
.mh-pay-foot-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--mh-text-muted, #6b7280);
    text-align: center;
    line-height: 1.5;
}

/* Bloc "Quota photos incluses" dans la sidebar récap */
.mh-pay-photo-quota {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    background: #ecfdf5;            /* vert très doux */
    border-left: 3px solid #059669; /* vert */
    border-radius: 6px;
    font-size: 13.5px;
    color: #065f46;
    line-height: 1.35;
}
.mh-pay-photo-quota-ico { font-size: 20px; flex-shrink: 0; }
.mh-pay-photo-quota strong {
    font-size: 18px;
    color: #047857;
    margin-right: 2px;
}

/* Récap (page après création du bon de commande) */
.mh-pay-wrap-recap { max-width: 800px; }
.mh-pay-bc-id     { font-size: 18px !important; color: var(--mh-blue, #0e639c) !important; }
.mh-pay-recap-card {
    background: #fff;
    border: 1px solid var(--mh-border, #e5e7eb);
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 18px;
}
.mh-pay-recap-card h2 { font-size: 17px; margin: 0 0 14px; color: var(--mh-blue, #0e639c); }
.mh-pay-recap-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}
.mh-pay-recap-table th,
.mh-pay-recap-table td {
    padding: 10px;
    border-bottom: 1px solid var(--mh-border, #e5e7eb);
    text-align: left;
    font-size: 14px;
}
.mh-pay-recap-table th     { background: var(--mh-bg-soft, #f7f8fa); font-weight: 600; }
/* Colonne numérique (Montant HT) alignée à droite — TH et TD */
.mh-pay-recap-table .mh-pay-col-num { text-align: right; font-weight: 600; }
.mh-pay-recap-totals       { margin-top: 12px; }
.mh-pay-recap-actions      { text-align: center; }
.mh-pay-wrap-err           { max-width: 600px; }

/* Ligne "Pour l'annonce N°xx — Nom" au-dessus du tableau récap */
.mh-pay-recap-annonce-line {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #f5f9ff;
    border-left: 3px solid #1565c0;
    border-radius: 4px;
    font-size: 14px;
    color: #0d47a1;
}
.mh-pay-recap-annonce-line strong { color: #0d47a1; }

/* Bouton "Modifier ma commande" — version discrète (link-like) */
.mh-pay-recap-actions-discreet { text-align: center; }
.mh-pay-btn-discreet {
    display: inline-block;
    color: #888;
    background: transparent;
    border: 1px dashed #ccc;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    transition: all .15s;
}
.mh-pay-btn-discreet:hover {
    color: #333;
    border-color: #888;
    border-style: solid;
}

/* Bandeau "déjà réglé" en haut de la page récap */
.mh-pay-paid-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ecfdf5;
    border: 1px solid #2ea44f;
    border-left: 4px solid #2ea44f;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 0 18px;
}
.mh-pay-paid-banner-ico {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.mh-pay-paid-banner-body {
    display: flex;
    flex-direction: column;
    color: #14532d;
    font-size: 15px;
    line-height: 1.4;
}
.mh-pay-paid-banner-body strong { font-size: 16px; }
.mh-pay-paid-banner-detail { font-size: 14px; color: #1f7a3a; margin-top: 2px; }

/* Variante "pending" (orange) — paiement en cours de vérification */
.mh-pay-paid-banner-pending {
    background: #fff4ec;
    border-color: #ea580c;
    border-left-color: #ea580c;
}
.mh-pay-paid-banner-pending .mh-pay-paid-banner-body {
    color: #7c2d12;
}
.mh-pay-paid-banner-pending .mh-pay-paid-banner-detail {
    color: #9a3412;
}

/* ============================================================
   /paiement/cb/cancel — Page d'abandon de paiement CB
   ============================================================ */
.mh-pay-wrap-cancel { max-width: 680px; }
.mh-pay-cancel-card {
    background: #fff;
    border: 1px solid var(--mh-bg-soft, #e5e8f0);
    border-top: 4px solid #d4a015;
    border-radius: 8px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(14,91,149,.06);
}
.mh-pay-cancel-ico {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 12px;
}
.mh-pay-cancel-card h2 {
    margin: 0 0 14px;
    color: var(--mh-blue, #0E5B95);
    font-size: 22px;
    font-weight: 700;
}
.mh-pay-cancel-lead {
    color: #444;
    line-height: 1.55;
    margin: 0 0 18px;
    font-size: 15px;
}
.mh-pay-cancel-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 20px;
    background: #fff8e1;
    border: 1px dashed #d4a015;
    border-radius: 6px;
    margin: 0 0 22px;
}
.mh-pay-cancel-amount-label { color: #6b4e00; font-size: 14px; }
.mh-pay-cancel-amount-val   { color: #6b4e00; font-size: 22px; font-weight: 700; }

.mh-pay-cancel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
}
.mh-pay-cancel-hint {
    margin: 0;
    padding: 14px 16px;
    background: #f0f7ff;
    border-left: 3px solid var(--mh-blue, #0E5B95);
    border-radius: 4px;
    font-size: 13.5px;
    color: #333;
    text-align: left;
    line-height: 1.55;
}
.mh-pay-cancel-hint a { color: var(--mh-blue, #0E5B95); }

/* Variantes par état (refused = orange vif, error = rouge, success = vert) */
.mh-pay-cancel-card.is-refused { border-top-color: #ea580c; }
.mh-pay-cancel-card.is-error   { border-top-color: #c53030; }
.mh-pay-cancel-card.is-success { border-top-color: #2ea44f; }

.mh-pay-cancel-card.is-refused h2 { color: #c2410c; }
.mh-pay-cancel-card.is-error   h2 { color: #c53030; }
.mh-pay-cancel-card.is-success h2 { color: #1f7a3a; }

.mh-pay-cancel-card.is-refused .mh-pay-cancel-amount {
    background: #fff4ec; border-color: #ea580c;
}
.mh-pay-cancel-card.is-refused .mh-pay-cancel-amount-label,
.mh-pay-cancel-card.is-refused .mh-pay-cancel-amount-val { color: #9a3412; }

.mh-pay-cancel-card.is-error .mh-pay-cancel-amount {
    background: #fef2f2; border-color: #c53030;
}
.mh-pay-cancel-card.is-error .mh-pay-cancel-amount-label,
.mh-pay-cancel-card.is-error .mh-pay-cancel-amount-val { color: #991b1b; }

.mh-pay-cancel-amount.is-success,
.mh-pay-cancel-card.is-success .mh-pay-cancel-amount {
    background: #ecfdf5; border-color: #2ea44f; border-style: solid;
}
.mh-pay-cancel-card.is-success .mh-pay-cancel-amount-label,
.mh-pay-cancel-card.is-success .mh-pay-cancel-amount-val { color: #14532d; }

/* Bloc "raisons fréquentes" sur refused */
.mh-pay-cancel-reasons {
    text-align: left;
    margin: 0 auto 18px;
    padding: 14px 18px;
    background: #fafafa;
    border-radius: 6px;
    max-width: 480px;
    font-size: 14px;
    color: #333;
}
.mh-pay-cancel-reasons p { margin: 0 0 6px; }
.mh-pay-cancel-reasons ul { margin: 0; padding-left: 22px; }
.mh-pay-cancel-reasons li { margin-bottom: 3px; }

/* Info carte utilisée (success) */
.mh-pay-cancel-card-info {
    margin: 0 0 18px;
    font-size: 14px;
    color: #555;
}
.mh-pay-cancel-card-info code {
    font-family: 'Menlo', 'Consolas', monospace;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Hint en vert quand success (au lieu du bleu par défaut) */
.mh-pay-cancel-hint.is-success {
    background: #ecfdf5;
    border-left-color: #2ea44f;
    color: #14532d;
}
.mh-pay-cancel-hint.is-success a { color: #1f7a3a; }

/* Code retour debug (refused/error) */
.mh-pay-cancel-debug {
    margin: 20px 0 0;
    text-align: center;
    color: #888;
}
.mh-pay-cancel-debug code {
    font-family: 'Menlo', 'Consolas', monospace;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
}

@media (max-width: 600px) {
    .mh-pay-cancel-card { padding: 24px 16px; }
    .mh-pay-cancel-card h2 { font-size: 18px; }
    .mh-pay-cancel-actions a { width: 100%; text-align: center; }
}

/* ============================================================
   partial_methodes_paiement.php — 4 méthodes empilées
   (CB à venir, PayPal, Chèque, Virement)
   ============================================================ */
.mh-pay-methods-stacked {
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mh-pay-method {
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--mh-bg-soft, #e5e8f0);
    border-radius: 8px;
}
.mh-pay-method-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mh-blue, #0E5B95);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mh-bg-soft, #e5e8f0);
}
.mh-pay-method-ico {
    font-size: 22px;
    line-height: 1;
}
.mh-pay-method-badge {
    margin-left: auto;
    padding: 3px 10px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mh-pay-method-disabled {
    opacity: .7;
    background: #fafbfc;
}
.mh-pay-method-disabled .mh-pay-method-title { color: #6c7280; }
.mh-pay-method p { margin: 0 0 12px; line-height: 1.5; }
.mh-pay-method-foot {
    margin-top: 16px;
    padding: 12px 14px;
    background: #f0f7ff;
    border-left: 3px solid var(--mh-blue, #0E5B95);
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

/* === Carte bancaire (SystemPay) === */
.mh-pay-cb-form {
    text-align: center;
    margin-top: 18px;
}
.mh-pay-cb-btn {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--mh-blue, #0E5B95) 0%, #0a4775 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: transform .12s ease, box-shadow .15s, background .15s;
    min-width: 280px;
}
.mh-pay-cb-btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    transform: translateY(-1px);
}
.mh-pay-cb-btn:active { transform: translateY(0); }
.mh-pay-cb-test-warn {
    margin: 12px 0 0;
    padding: 8px 12px;
    background: #fff3cd;
    border-left: 3px solid #d4a015;
    border-radius: 4px;
    font-size: 13px;
    color: #856404;
}

/* === PayPal === */
.mh-pay-paypal-form {
    text-align: center;
    margin-top: 18px;
}
.mh-pay-paypal-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: #ffc439; /* PayPal yellow */
    border: 2px solid #f5b800;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    color: #002e7f;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .15s, background .15s;
    min-width: 280px;
}
.mh-pay-paypal-btn:hover {
    background: #f5b800;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transform: translateY(-1px);
}
.mh-pay-paypal-btn:active { transform: translateY(0); }
.mh-pay-paypal-btn-logo {
    height: 48px;
    width: auto;
    border-radius: 4px;
    background: #fff;
    padding: 4px;
}
.mh-pay-paypal-btn-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.mh-pay-paypal-btn-sub {
    font-size: 12px;
    font-weight: 500;
    color: #003087;
    opacity: .85;
    margin-top: 3px;
}

/* Chèque — étapes numérotées */
.mh-pay-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: mh-pay-step;
}
.mh-pay-steps > li {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    align-items: flex-start;
}
.mh-pay-step-num {
    flex: 0 0 32px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: var(--mh-blue, #0E5B95);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.mh-pay-step-body { flex: 1; min-width: 0; }
.mh-pay-step-list {
    margin: 8px 0 0;
    padding-left: 20px;
}
.mh-pay-step-list li { margin-bottom: 4px; }

/* Référence (chèque + virement) */
.mh-pay-ref {
    margin: 6px 0 0;
}
.mh-pay-ref code {
    display: inline-block;
    padding: 6px 12px;
    background: #fff8e1;
    border: 1px dashed #d4a015;
    border-radius: 4px;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #6b4e00;
    user-select: all;
}

/* Adresse postale (chèque) */
.mh-pay-addr {
    margin: 8px 0 0;
    padding: 12px 14px;
    background: #f7f8fa;
    border-radius: 4px;
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
}

/* Tableau coordonnées bancaires (virement) */
.mh-pay-bank-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    background: #f7f8fa;
    border-radius: 4px;
    overflow: hidden;
}
.mh-pay-bank-table th,
.mh-pay-bank-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #fff;
    font-size: 14px;
}
.mh-pay-bank-table th {
    width: 130px;
    color: #555;
    font-weight: 600;
}
.mh-pay-bank-table td {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mh-pay-bank-table td code {
    font-family: 'Menlo', 'Consolas', monospace;
    user-select: all;
    flex: 1;
}
.mh-pay-bank-table td span { flex: 1; }
.mh-pay-bank-table tr:last-child th,
.mh-pay-bank-table tr:last-child td { border-bottom: none; }

/* Bouton copier (📋) — version discrète : juste un icône, fond transparent */
.mh-pay-copy-btn {
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 2px 6px;
    background: transparent;
    color: #888;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.2;
    transition: all .15s;
    white-space: nowrap;
    opacity: 0.6;
}
.mh-pay-copy-btn:hover {
    background: #f5f5f5;
    border-color: #aaa;
    color: #333;
    opacity: 1;
}
.mh-pay-copy-btn.is-copied {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #66bb6a;
    opacity: 1;
}
.mh-pay-ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mh-pay-virement-msg {
    padding: 12px 14px;
    background: #fff3cd;
    border-left: 3px solid #d4a015;
    border-radius: 4px;
    font-size: 14px;
}

@media (max-width: 600px) {
    .mh-pay-method { padding: 18px 16px; }
    .mh-pay-method-title { font-size: 16px; }
    .mh-pay-cb-btn { min-width: 0; width: 100%; padding: 12px 16px; font-size: 15px; }
    .mh-pay-paypal-btn { min-width: 0; width: 100%; padding: 12px 16px; }
    .mh-pay-paypal-btn-logo { height: 40px; }
    .mh-pay-paypal-btn-txt { font-size: 15px; }
    .mh-pay-bank-table th { width: 100px; font-size: 13px; }
    .mh-pay-bank-table td { font-size: 13px; flex-wrap: wrap; }
    .mh-pay-copy-btn { font-size: 11px; padding: 3px 8px; }
}