/* ==========================================================================
   Habillage Hotel le Midi. Chargee en dernier, cette feuille corrige le theme
   sans le reecrire. Identite conservee : Montserrat, Great Vibes, rouge
   #a11818, encre #3a3534, fonds #f7f7f7 / #333132, ornement calligraphique.
   ========================================================================== */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/montserrat-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/montserrat-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/montserrat-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/great-vibes-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --hm-rouge:#a11818;
  --hm-rouge-logo:#a11c1b;     /* releve au pixel dans Logo_Hotel-le-Midi_neg_ok.png */
  --hm-rouge-fonce:#7a0011;
  --hm-encre:#3a3534;
  --hm-texte:#5b5656;          /* 6,3:1 sur blanc */
  --hm-beige:#fcf3e9;
  --hm-gris:#f7f7f7;
  --hm-filet:#e6e0da;
  --hm-sombre:#333132;
  --hm-s1:48px; --hm-s2:64px; --hm-s3:96px;
}

/* ---------- Texte courant : a gauche, largeur de lecture, pas de cesure ---------- */
.wpb_wrapper p,.wpb_text_column p,.textwidget p,.stm_infobox_back p,.stm-single-room__description p,
.stm_titlebox__subtitle,.wpb_text_column li{
  text-align:left;max-width:34em;margin-inline:auto;text-wrap:pretty;hyphens:none;color:var(--hm-texte)}
p,.wpb_wrapper li,.textwidget li,.icon-list-1 li{line-height:1.75}
.hm-sombre .wpb_text_column p,.hm-sombre .wpb_wrapper p,.stm-footer .textwidget p{color:rgba(255,255,255,.82)}
.stm-footer .textwidget p{margin-inline:0}
a:hover,a:focus{color:var(--hm-rouge-fonce)}

/* ---------- Titres ---------- */
h1,h2,h3,h4,h5,h6,[class*="vc_custom_heading"],.stm_titlebox__title,.stm_infobox_front h4{
  text-wrap:balance;hyphens:none!important;-webkit-hyphens:none!important;overflow-wrap:normal;word-break:normal}
/* un groupe que la fin de ligne ne casse pas : mot compose, numero de telephone */
.hm-nb{white-space:nowrap}
/* les libelles en capitales espacees : l'approche de la derniere lettre pousse
   le texte hors de sa boite, on la reprend */
.hm-hero__i li span,.stm-navigation ul li a,.stm-images__category a,
.stm_infobox_front h4,.hm-etiquette{margin-right:-.1em}
h1,h2{font-weight:400}
.hm-etiquette,h3.hm-etiquette{font-family:"Montserrat",Arial,sans-serif;font-size:13px!important;line-height:1.5!important;font-weight:600;letter-spacing:3px;margin-right:-3px;text-transform:uppercase;color:var(--hm-encre);margin-top:0;margin-bottom:18px;margin-left:0}
.vc_icon_element .stmicon-haircut{color:var(--hm-rouge)!important}
.hm-sombre .vc_icon_element-color-white .stmicon-haircut{color:rgba(255,255,255,.7)!important}

/* ---------- Boutons : un seul systeme ---------- */
body.stm_layout_esperanza .btn,body .btn.btn_outline.btn_primary,.stm-load-more,.wpcf7-submit{
  font-family:"Montserrat",Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  line-height:20px;padding:15px 28px 15px 30px;border-radius:3px;border:1px solid var(--hm-rouge);
  color:var(--hm-rouge);background:transparent;transition:background .2s,color .2s,border-color .2s;box-shadow:none}
body.stm_layout_esperanza .btn:hover,body .btn.btn_outline.btn_primary:hover,body.stm_layout_esperanza .btn:focus-visible,.stm-load-more:hover{
  background:var(--hm-rouge)!important;border-color:var(--hm-rouge)!important;color:#fff!important}
html body.stm_layout_esperanza .btn.hm-btn-plein,html body .btn.hm-btn-plein,.wpcf7-submit.hm-btn-plein,.hm-btn--plein,html body.stm_layout_esperanza .btn.hm-btn-plein .btn__label,html body .btn.hm-btn-plein .btn__label{background:var(--hm-rouge)!important;color:#fff!important;border-color:var(--hm-rouge)!important}
body.stm_layout_esperanza .btn.hm-btn-plein .btn__label{background:transparent!important;border:0!important}
html body.stm_layout_esperanza .btn.hm-btn-plein:hover,html body .btn.hm-btn-plein:hover,.wpcf7-submit.hm-btn-plein:hover,.hm-btn--plein:hover,html body .btn.hm-btn-plein:focus-visible{background:var(--hm-rouge-fonce)!important;border-color:var(--hm-rouge-fonce)!important;color:#fff!important}
body.stm_layout_esperanza .btn.btn_lg{padding:15px 28px 15px 30px}
.btn:focus-visible,.hm-btn:focus-visible{outline:2px solid var(--hm-rouge);outline-offset:3px}
/* Les libelles de bouton portent 2 px d'approche, dont la moitie decale le texte
   d'un pixel vers la gauche dans sa boite. Non compense : la doctrine du skill
   typographie-web dit de ne pas poser ces valeurs a l'aveugle, et un pixel sur un
   bouton en capitales ne se voit pas. */
/* boutons sur fond sombre */
.hm-sombre .btn.btn_outline{color:#fff;border-color:rgba(255,255,255,.7)}
/* les fleches rondes des cartes */
.stm-button.icon-only .btn{width:48px;height:48px;padding:0!important;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;text-indent:0}
.stm-button.icon-only .btn .btn__icon{position:static;margin:0;width:auto;font-size:18px;line-height:1}
.stm-button.icon-only .btn .btn__label{display:none}
.hm-btn{display:inline-block;font-family:"Montserrat",Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;line-height:20px;padding:15px 28px 15px 30px;border-radius:3px;border:1px solid var(--hm-rouge);color:#fff;text-decoration:none;transition:background .2s,border-color .2s}

/* ---------- En-tete de bureau ----------
   L'en-tete est pose sur la photo, sans fond : des que la photo est claire, le
   menu blanc devient illisible. Il gagne donc une ombre courte, et le haut du
   hero est assombri (plus bas, .hm-hero__s::after).

   Le voile n'est PAS pose sur l'en-tete lui-meme : il deborderait sur le
   contenu des pages interieures et grisait leur titre de banniere. Ces pages
   ont deja le voile noir de leur propre banniere. */
.stm-header__row_color_bottom .stm-navigation ul li a{
  letter-spacing:1.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.stm-header__row_color_bottom .stm-navigation ul li a:hover,
.stm-header__row_color_bottom .stm-navigation ul li:hover>a{color:#fff;opacity:.82}
.stm-header__row_color_bottom .stm-navigation>ul>li.current-menu-item>a{color:#fff}
.stm-header__row_color_center .stm-icontext__text,.stm-header__row_color_center .hm-meteo,
.stm-header__row_color_center .stm-socials__icon{text-shadow:0 1px 4px rgba(0,0,0,.55)}
.stm-header__row_color_top a:hover,.stm-header__row_color_top li:hover a{color:var(--hm-rouge)}
.hm-meteo{font-size:13px;letter-spacing:.3px;white-space:nowrap}
.hm-meteo__t{font-weight:600}

/* le choix de langue, en fin de menu : lisible, et l'active se voit.
   Le <li> et le <div> portent tous deux la classe : seul le <div> est la boite,
   sinon l'espacement se compte deux fois. */
.stm-navigation li.hm-langues{padding-left:6px}
.stm-navigation li.hm-langues::before,.stm-navigation li.hm-langues::after{content:none!important}
.stm-navigation div.hm-langues{display:inline-flex;align-items:baseline;gap:8px}
.stm-navigation div.hm-langues span,.stm-navigation div.hm-langues a{
  font-size:13px;font-weight:600;letter-spacing:1.5px;color:#fff;text-decoration:none;
  text-shadow:0 1px 4px rgba(0,0,0,.55);margin-right:-1.5px}
.stm-navigation div.hm-langues [aria-current]{border-bottom:2px solid #fff;padding-bottom:2px}
.stm-navigation div.hm-langues a{opacity:.78}
.stm-navigation div.hm-langues a:hover,.stm-navigation div.hm-langues a:focus-visible{opacity:1;color:#fff}
.stm-navigation div.hm-langues .hm-sep{opacity:.6;font-weight:400;margin-right:0;letter-spacing:0}

/* la barre compacte, bureau, apparait apres le hero */
.hm-barre{position:fixed;top:0;left:0;right:0;z-index:1050;background:rgba(51,49,50,.96);backdrop-filter:blur(6px);
  transform:translateY(-100%);transition:transform .3s ease;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hm-barre.is-on{transform:none}
.hm-barre__in{max-width:1200px;margin:0 auto;padding:0 15px;height:64px;display:flex;align-items:center;gap:32px}
.hm-barre__logo img{display:block;width:72px;height:auto}
.hm-barre__nav{flex:1}
.hm-barre__nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;justify-content:center}
.hm-barre__nav li{margin:0;padding:0}
.hm-barre__nav li::before,.hm-barre__nav li::after{content:none!important}
.hm-barre__nav a,.hm-barre__nav span{font-family:"Montserrat",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-decoration:none}
.hm-barre__nav a:hover{color:#fff;opacity:.75}
.hm-barre__nav .current-menu-item > a{border-bottom:2px solid #fff;padding-bottom:4px}
.hm-barre__nav .hm-langues{display:inline-flex;gap:8px;align-items:center}
.hm-barre__nav .hm-sep{opacity:.5}
.hm-barre__tel{font-family:"Montserrat",Arial,sans-serif;font-size:13px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap}
.hm-barre__tel:hover{color:#fff;opacity:.75}
@media (max-width:1023px){.hm-barre{display:none}}

/* ---------- En-tete mobile : plus bas, avec le bouton d'appel ---------- */
@media (max-width:1023px){
  .stm_mobile__header{padding:14px 15px;margin-bottom:0}
  .stm_mobile__logo{min-width:0;max-width:112px}
  .stm_mobile__logo img{display:block;width:112px;height:auto}
  .stm_mobile__header .stm_flex{align-items:center}
  .hm-tel{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;margin-right:18px;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:#fff}
  .hm-tel:hover,.hm-tel:focus{color:#fff;border-color:#fff}
  .stm_mobile__switcher{padding:8px 0}
  .stm-header{margin-bottom:0!important}
  /* la zone tactile qui ouvre un sous-menu depassait de 15 px a droite de son
     lien ; elle rentre dans la boite, ses 65 px de large suffisent */
  .stm-navigation__default>ul>li .stm_mobile__dropdown,
  .stm-navigation__fullwidth>ul>li .stm_mobile__dropdown{right:0}
}

/* ---------- Hero ---------- */
.hm-hero{position:relative;width:100vw;left:50%;margin-left:-50vw;height:min(88vh,840px);min-height:560px;background:var(--hm-sombre);overflow:hidden;isolation:isolate}
.hm-hero__s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hm-hero__s.is-active{opacity:1;pointer-events:auto;z-index:1}
.hm-hero__s img{display:block;width:100%;height:100%;object-fit:cover}
/* Deux zones a tenir sur la photo : le haut, ou l'en-tete blanc se pose, et le
   bas, ou le titre porte le rouge du logo. Le milieu garde la lumiere. */
.hm-hero__s::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,16,16,.72) 0,rgba(18,16,16,.60) 18%,rgba(18,16,16,.34) 33%,rgba(18,16,16,.08) 45%,rgba(18,16,16,.44) 60%,rgba(18,16,16,.80) 78%,rgba(18,16,16,.93) 100%)}
.hm-hero__c{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 24px 64px;max-width:1200px;margin:0 auto;color:#fff}
.hm-hero__t{font-family:"Montserrat",Arial,sans-serif;font-weight:300;font-size:clamp(30px,4.4vw,60px);line-height:1.15;letter-spacing:-.01em;color:#fff;margin:0 0 28px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
/* Le mot calligraphie reprend le rouge du logo, pas le blanc. Le degrade du
   bas du hero est assez sombre pour qu'il tienne : mesure avant livraison. */
.hm-hero__t em{font-family:"Great Vibes",cursive;font-style:normal;font-weight:400;font-size:1.6em;line-height:1;color:var(--hm-rouge-logo);display:inline-block;padding:0 .08em;vertical-align:-.06em;
  text-shadow:0 2px 20px rgba(0,0,0,.75),0 0 4px rgba(0,0,0,.55)}
.hm-hero__i{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px}
/* L'approche de 2 px suit la derniere lettre : la boite l'englobe par un
   padding, et la marge negative la remet en place. Sans cela le texte sort de
   sa boite de 2 px. */
.hm-hero__i li span{padding-right:2px;margin-right:-2px;flex:0 0 auto;width:max-content}
.hm-hero__i li{display:flex;flex-direction:row;align-items:center;gap:12px;white-space:nowrap;font-family:"Montserrat",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;line-height:1.5;color:#fff}
.hm-hero__i li::before,.hm-hero__i li::after{content:none!important}
.hm-hero__i i{font-size:36px;line-height:1;color:#fff}
.hm-hero__nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.18);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.hm-hero__nav:hover,.hm-hero__nav:focus-visible{background:rgba(0,0,0,.45);border-color:#fff;outline:none}
.hm-hero__nav--p{left:24px}.hm-hero__nav--n{right:24px}
.hm-hero__dots{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;justify-content:center;gap:10px}
.hm-hero__dot{width:10px;height:10px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;cursor:pointer;opacity:.8}
.hm-hero__dot.is-active{background:#fff}
@media (prefers-reduced-motion:reduce){.hm-hero__s{transition:none}}
@media (max-width:767px){
  .hm-hero{height:auto;min-height:0;aspect-ratio:auto}
  .hm-hero__s{position:relative;display:none}
  .hm-hero__s.is-active{display:block}
  .hm-hero__s img{position:absolute;inset:0;height:100%}
  .hm-hero__c{position:relative;min-height:600px;justify-content:flex-end;align-items:flex-start;text-align:left}
  .hm-hero__t{text-wrap:balance}
  .hm-hero__t em{font-size:1.45em}
  .hm-hero__i{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:10px}
  .hm-hero__c{padding:0 20px 56px}
  .hm-hero__t{margin-bottom:20px}
  .hm-hero__i{gap:10px 22px;margin-bottom:24px}
  .hm-hero__i li{font-size:11px;letter-spacing:1.5px}
  .hm-hero__i i{font-size:34px}
  .hm-hero__nav{display:none}
  .hm-hero .hm-btn{width:100%;text-align:center}
}

/* ---------- « Un petit mot sur notre hotel » ----------
   Un seul bloc de lecture au lieu de deux colonnes : le bloc est centre dans la
   page, son texte reste a gauche. */
.hm-presentation{max-width:38em;margin-inline:auto}
.hm-presentation .wpb_wrapper p,.hm-presentation p{max-width:none;margin-inline:0;margin-bottom:0}
.hm-presentation p + p{margin-top:1.5em}
@media (max-width:767px){.hm-presentation{max-width:none}}

/* ---------- Rythme des sections ---------- */
[style="height: 73px;"],[style="height: 75px;"],[style="height: 60px;"]{height:var(--hm-s1)!important}
[style="height: 50px;"]{height:32px!important}
.stm_titlebox__inner{padding-top:28px}

/* ---------- « Pourquoi nous choisir » : 4 colonnes, cercles plats ---------- */
@media (min-width:768px){
  .hm-pictos{display:flex;flex-wrap:wrap}
  .hm-pictos > .wpb_column.vc_col-sm-4{flex:0 0 50%;max-width:50%;width:50%;float:none}
}
@media (min-width:992px){
  .hm-pictos > .wpb_column.vc_col-sm-4{flex:0 0 25%;max-width:25%;width:25%}
}
.stm_icon_styled_bg i,.stm_icon.stm_icon_styled_bg i{box-shadow:none!important;background:#fff!important;border:1px solid var(--hm-filet)!important;color:var(--hm-encre)!important;transition:border-color .2s,color .2s}
.stm_icon_styled_bg::before,.stm_icon_styled_bg::after,.stm_icon_styled_bg i::before,.stm_icon_styled_bg i::after{box-shadow:none!important;filter:none!important}
.stm_icon_styled_bg:hover i{border-color:var(--hm-rouge)!important;color:var(--hm-rouge)!important}
.hm-pictos .hm-etiquette{font-size:11px!important;letter-spacing:2px;margin-right:-2px;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;padding:0}
@media (min-width:768px){.hm-pictos .hm-etiquette{white-space:nowrap}}
@media (max-width:767px){
  .hm-pictos > .wpb_column{width:100%;float:none}
  .hm-pictos .wpb_wrapper{display:flex;align-items:center;gap:20px}
  .hm-pictos .stm_icon{margin:0!important;flex:0 0 auto}
  .hm-pictos .stm_icon i{width:72px!important;height:72px!important;line-height:72px!important;font-size:34px!important}
  .hm-pictos .hm-etiquette{text-align:left!important;margin:0;letter-spacing:1.5px;padding:0;white-space:normal;font-size:12px!important}
  .hm-pictos .stm_spacer{display:none}
}
/* la carte sans photo du restaurant : un aplat sombre plutot qu'un gris vide */
.stm_infobox .stm_infobox_bg{background-color:#3a3534}

/* ---------- Cartes « Nos services » ---------- */
.vc_custom_1581092158747 p{margin-inline:0}

/* ---------- Cartes restaurant et padel : titre en bas a gauche sur voile ---------- */
.stm_infobox{position:relative}
.stm_infobox .stm_infobox_bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.66) 0,rgba(0,0,0,.05) 55%)}
.stm_infobox .stm_infobox_front{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;text-align:left!important;padding:28px 28px 56px!important}
.stm_infobox .stm_infobox_front h4{font-size:15px!important;line-height:1.45!important;letter-spacing:2px;font-weight:600;text-transform:uppercase;margin:0;text-align:left!important;text-wrap:balance;color:#fff}
.stm_infobox .stm_infobox_back{text-align:left}
.stm_infobox .stm_infobox_back h2{font-size:22px;letter-spacing:0;text-transform:none}

/* ---------- Fleches des carrousels ----------
   Le theme les dessinait avec un glyphe de la police d'icones, ecrit en clair
   dans son CSS : la reduction de police l'a emporte, et les fleches ont disparu.
   Elles sont refaites ici en CSS pur, sans police, sur le meme dessin que
   celles du hero : un cercle sobre et un chevron. */
/* Le theme masque la navigation et ne la revele qu'au survol de la souris :
   sur un ecran tactile, elle n'apparait donc jamais. Elle reste visible. */
.stm_carousel_style_1 .owl-nav{opacity:1}
/* La classe est doublee pour passer devant .stm_carousel_style_1.stm_carousel__
   navigation_style_1 du theme, plus specifique que le selecteur simple. */
.owl-carousel.owl-carousel .owl-nav button.owl-prev,
.owl-carousel.owl-carousel .owl-nav button.owl-next{
  width:56px;height:56px;border-radius:50%;
  background:rgba(18,16,16,.52)!important;border:1px solid rgba(255,255,255,.72)!important;
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  transition:background .2s,border-color .2s}
.owl-carousel.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel.owl-carousel .owl-nav button.owl-prev:focus-visible,
.owl-carousel.owl-carousel .owl-nav button.owl-next:focus-visible{
  background:var(--hm-rouge-logo)!important;border-color:var(--hm-rouge-logo)!important;outline:none}
.owl-carousel.owl-carousel .owl-nav button.owl-prev::before,
.owl-carousel.owl-carousel .owl-nav button.owl-next::before{
  content:""!important;display:block;width:14px;height:14px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  font-size:0;line-height:0;transform:rotate(-45deg);margin-left:-5px}
.owl-carousel.owl-carousel .owl-nav button.owl-prev::before{transform:rotate(135deg);margin-left:0;margin-right:-5px}
.owl-carousel.owl-carousel .owl-nav .owl-prev{left:28px}
.owl-carousel.owl-carousel .owl-nav .owl-next{right:28px}
@media (max-width:767px){
  .owl-carousel.owl-carousel .owl-nav button.owl-prev,
  .owl-carousel.owl-carousel .owl-nav button.owl-next{width:46px;height:46px}
  .owl-carousel.owl-carousel .owl-nav .owl-prev{left:14px}
  .owl-carousel.owl-carousel .owl-nav .owl-next{right:14px}
}

/* ---------- Galerie : onglets ---------- */
/* Un libelle d'onglet tient sur une ligne entiere : « Toutes les photos » et
   « Padel & Fitness » se cassaient en deux, une phrase a cheval. */
.stm-images__categories ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 34px}
.stm-images__categories ul li{margin:0;padding:0}
.stm-images__category a{font-family:"Montserrat",Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;margin-right:-2px;text-transform:uppercase;color:var(--hm-encre);white-space:nowrap}
@media (max-width:479px){
  .stm-images__categories ul{gap:8px 20px}
  .stm-images__category a{font-size:12px;letter-spacing:1.4px;margin-right:-1.4px}
}
.stm-images__category.active a,.stm-images__category a:hover{color:var(--hm-rouge)}
.stm-load-more{background:transparent!important;color:var(--hm-rouge)!important}

/* ---------- Formulaire ---------- */
.stm_cf7 .wpcf7-form-control,.stm_cf7 input.wpcf7-text,.stm_cf7 textarea{border:1px solid var(--hm-filet);background:var(--hm-gris);border-radius:3px;box-shadow:none;transition:border-color .2s,background .2s}
.stm_cf7 .wpcf7-form-control:focus,.stm_cf7 textarea:focus,.form-control:focus{border-color:var(--hm-rouge);background:#fff;outline:none;box-shadow:none}
.hm-reponse{max-width:none;text-align:left}

/* ---------- Page chambre ----------
   Le theme fige ses colonnes « sm » a 25 % a toutes les largeurs. En tablette,
   la colonne tombe a 115 px : les libelles d'equipement sortaient de leur boite
   (« TELEVI: », « TELEPH »), et le titre de la carte de reservation debordait de
   86 px. Ces colonnes se comportent desormais comme le veut leur nom. */
@media (max-width:991px){
  .wpb_column.vc_col-sm-3{width:50%}
  .wpb_column.vc_col-sm-2{width:33.333%}
}
@media (max-width:575px){
  .wpb_column.vc_col-sm-3,.wpb_column.vc_col-sm-2,.wpb_column.vc_col-sm-4{width:100%}
}
.stm_iconbox__desc h6{white-space:normal;overflow-wrap:break-word}
@media (max-width:991px){
  /* le titre de la carte de reservation est mis a la largeur de sa colonne */
  .stm-single-room__sidebar .widgettitle,.widget_contacts .widgettitle{width:auto;max-width:none}
  .stm-single-room__sidebar .widgettitle h4,.widget_contacts .widgettitle h4,
  .widgettitle.widget-footer-title h4{
    font-size:15px!important;line-height:1.45!important;letter-spacing:1px!important;
    margin-right:-1px;text-wrap:balance;overflow-wrap:break-word}
}
.stm-single-room__sidebar .widget_contacts_style_1{background:var(--hm-beige)}
.stm-single-room__sidebar .widgettitle h4{letter-spacing:2px;font-size:13px;font-weight:600}

/* ---------- Pied de page ---------- */
.stm-footer{padding-top:var(--hm-s2)}
.stm-footer aside.widget .widgettitle.widget-footer-title h4{font-size:12px;letter-spacing:2.5px;font-weight:600;margin-bottom:28px}
.stm-footer__bottom{border-top-color:rgba(255,255,255,.14)}
.stm-footer .stm_bottom_copyright{color:rgba(255,255,255,.7);font-size:13px}
.stm-footer .textwidget a,.stm-footer .widget a{color:rgba(255,255,255,.78)}
.stm-footer .textwidget a:hover,.stm-footer .widget a:hover{color:#fff}
.stm-footer .stm_bottom_copyright a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.stm-footer .stm_bottom_copyright a:hover{border-bottom-color:#fff;color:#fff}

/* ---------- Video en boite de dialogue ---------- */
.hm-video{border:0;padding:0;background:#000;width:min(92vw,1100px);max-width:none;border-radius:4px;overflow:visible}
.hm-video::backdrop{background:rgba(0,0,0,.82)}
.hm-video__c{position:relative;aspect-ratio:16/9;width:100%}
.hm-video__c iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hm-video__x{position:absolute;top:-44px;right:0;width:40px;height:40px;border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer}
a[href*="youtube.com/embed/"]{cursor:pointer}

/* ---------- Divers ---------- */
.rev-scroll-btn{display:none!important}
.skip-link:focus{background:var(--hm-rouge);color:#fff}

/* ---------- Petits ecrans : tout a gauche, y compris les titres de section ---------- */
@media (max-width:991px){
  #content h1,#content h2,#content h3,#content h4,.stm_titlebox__title,.stm_titlebox.text-center{text-align:left!important}
  .vc_icon_element-align-center{text-align:left!important}
  .stm-button_center{text-align:left!important}
  .stm-page .btn_center{margin-left:0}
  .hm-etiquette{margin-right:0}
  .hm-hero__t{text-align:left}
}