/* ==========================================================================
   La Parare – shared responsive layer
   Loaded last on every page (see data-ui="…" on <html> for the template).
   ========================================================================== */

/* ---------- Global baseline (all templates) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; }
img { height: auto; }
iframe, embed, object { max-width: 100%; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-wrap: break-word; }
p, li, td, h1, h2, h3, h4, h5, h6, a { overflow-wrap: break-word; }

/* Divi icon font (its @font-face lived in the missing et-cache files) */
@font-face {
  font-family: "ETmodules";
  src: url("../wp-content/themes/Divi/core/admin/fonts/modules.woff") format("woff"),
       url("../wp-content/themes/Divi/core/admin/fonts/modules.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: block;
}

/* ==========================================================================
   DIVI pages
   ========================================================================== */
html[data-ui="divi"] .et_pb_row,
html[data-ui="divi"] .container { max-width: 1080px; }
html[data-ui="divi"] #main-header .logo_container img,
html[data-ui="divi"] #logo { max-width: 100%; }
html[data-ui="divi"] .et_pb_image_wrap img,
html[data-ui="divi"] .et_pb_gallery_image img { width: 100%; }
html[data-ui="divi"] .et_mobile_nav_menu .mobile_menu_bar::before { color: #c9874a; }
html[data-ui="divi"] .et_pb_text_inner,
html[data-ui="divi"] .et_pb_text { overflow-wrap: break-word; }

@media (max-width: 980px) {
  html[data-ui="divi"] .et_pb_row { width: 88%; }
  html[data-ui="divi"] .et_pb_column { margin-bottom: 24px; }
  html[data-ui="divi"] .et_pb_slide_description { padding: 12% 6%; }
  html[data-ui="divi"] .et_pb_slide_description .et_pb_slide_title { font-size: 26px; line-height: 1.25; }
}
@media (max-width: 600px) {
  html[data-ui="divi"] .et_pb_row { width: 92%; }
  html[data-ui="divi"] h1 { font-size: 26px; line-height: 1.25; }
  html[data-ui="divi"] h2 { font-size: 22px; line-height: 1.3; }
  html[data-ui="divi"] .et_pb_slide_description .et_pb_slide_title { font-size: 22px; }
  html[data-ui="divi"] #top-header .container { text-align: center; }
  html[data-ui="divi"] #et-info { float: none; }
}

/* ==========================================================================
   GUESTHOUSE theme (pressbook WordPress, fixed 1260px layout)
   ========================================================================== */
html[data-ui="guesthouse"] body { margin: 0; }
html[data-ui="guesthouse"] #content img { max-width: 100% !important; height: auto !important; }
html[data-ui="guesthouse"] #content .wp-caption { max-width: 100% !important; }

@media (max-width: 1365px) {
  html[data-ui="guesthouse"] #wrapper,
  html[data-ui="guesthouse"] #main,
  html[data-ui="guesthouse"] #masthead,
  html[data-ui="guesthouse"] #branding,
  html[data-ui="guesthouse"] #colophon,
  html[data-ui="guesthouse"] #header { width: auto !important; max-width: 100%; }
  html[data-ui="guesthouse"] #wrapper { padding: 0 12px; }

  /* header: logo + top menu side by side, wrapping */
  html[data-ui="guesthouse"] #masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  html[data-ui="guesthouse"] #masthead > * { float: none !important; }
  html[data-ui="guesthouse"] div.logo { float: none; margin: 8px 0; width: auto; }
  html[data-ui="guesthouse"] #fourth { flex: 1 1 300px; min-width: 0; }
  html[data-ui="guesthouse"] div.menu-h,
  html[data-ui="guesthouse"] div#nav {
    position: static !important; left: auto !important; top: auto !important;
    float: none; width: auto !important; height: auto; margin: 0;
  }
  html[data-ui="guesthouse"] div.menu-h ul,
  html[data-ui="guesthouse"] div#nav ul.level1 {
    display: flex; flex-wrap: wrap; gap: 6px; width: auto !important; margin: 0; padding: 0;
  }
  html[data-ui="guesthouse"] div.menu-h li,
  html[data-ui="guesthouse"] div#nav li { float: none; margin: 0; }
  html[data-ui="guesthouse"] #branding img { position: static; margin-left: 0; }

  /* body: sidebar + content */
  html[data-ui="guesthouse"] #main { display: flex; align-items: flex-start; gap: 20px; }
  html[data-ui="guesthouse"] #access { float: none; flex: 0 0 210px; margin: 0; position: static; }
  html[data-ui="guesthouse"] #container {
    float: none !important; position: static !important; flex: 1 1 auto; min-width: 0;
    width: auto !important; margin: 0 !important; left: auto !important; top: auto !important;
  }
  html[data-ui="guesthouse"] #content,
  html[data-ui="guesthouse"] .one-column #content { width: auto !important; margin: 0 0 36px !important; float: none; }
  html[data-ui="guesthouse"] #primary,
  html[data-ui="guesthouse"] #secondary { float: none; width: auto; }
  html[data-ui="guesthouse"] #footer-widget-area .widget-area,
  html[data-ui="guesthouse"] #site-info { width: auto; float: none; margin: 0; }
}

@media (max-width: 767px) {
  html[data-ui="guesthouse"] #masthead { justify-content: center; text-align: center; }
  html[data-ui="guesthouse"] div.logo { width: 100%; text-align: center; }
  html[data-ui="guesthouse"] div.logo img { max-width: 200px; }
  html[data-ui="guesthouse"] #fourth { flex-basis: 100%; }
  html[data-ui="guesthouse"] div.menu-h ul,
  html[data-ui="guesthouse"] div#nav ul.level1 { justify-content: center; }

  html[data-ui="guesthouse"] #main { flex-direction: column; gap: 0; }
  html[data-ui="guesthouse"] #access { flex: none; width: 100% !important; }
  html[data-ui="guesthouse"] div.bloc-G { float: none; width: 100%; margin: 0; }
  html[data-ui="guesthouse"] div.menu-v ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 8px 0 16px; padding: 0;
  }
  html[data-ui="guesthouse"] div.menu-v li { padding: 0; }
  html[data-ui="guesthouse"] #content .alignleft,
  html[data-ui="guesthouse"] #content .alignright,
  html[data-ui="guesthouse"] #content img.alignleft,
  html[data-ui="guesthouse"] #content img.alignright { float: none; display: block; margin: 0 auto 16px; }
  html[data-ui="guesthouse"] #content .gallery .gallery-item { width: 50%; }
  html[data-ui="guesthouse"] .nav-previous,
  html[data-ui="guesthouse"] .nav-next { width: auto; }
}

/* ==========================================================================
   BLOGGER pressbook / links (530 + 150px fixed columns)
   ========================================================================== */
html[data-ui="blogger"] #wrap { max-width: 900px; }
@media (max-width: 900px) {
  html[data-ui="blogger"] #wrap { width: auto !important; }
  html[data-ui="blogger"] #inner-wrap { padding: 0 16px; }
}
@media (max-width: 700px) {
  html[data-ui="blogger"] #main,
  html[data-ui="blogger"] #sidebar { float: none !important; width: auto !important; }
  html[data-ui="blogger"] #sidebar { border-top: 1px solid #e5dcc0; margin-top: 16px; padding-top: 16px; }
  html[data-ui="blogger"] #inner-wrap { padding: 0 8px; display: flex; flex-direction: column; }
  html[data-ui="blogger"] #inner-wrap > * { order: 2; }
  html[data-ui="blogger"] #blog-header { order: 0; }
  html[data-ui="blogger"] #main { order: 1; }
  html[data-ui="blogger"] #sidebar { order: 3; }
  html[data-ui="blogger"] #footer { order: 4; }
}

/* ==========================================================================
   ARTISTEER theme (lapararefr2505v1, already partly responsive)
   ========================================================================== */
@media (max-width: 960px) {
  html[data-ui="artisteer"] .art-sheet,
  html[data-ui="artisteer"] .art-header,
  html[data-ui="artisteer"] .art-nav,
  html[data-ui="artisteer"] .art-footer-inner { width: auto !important; max-width: 100%; }
  html[data-ui="artisteer"] .art-content-layout,
  html[data-ui="artisteer"] .art-content-layout-row,
  html[data-ui="artisteer"] .art-layout-cell { display: block; width: auto !important; }
}

/* ==========================================================================
   LEGACY hand-built pages (tables, absolute layers, frames children)
   ========================================================================== */
html[data-ui="legacy"] body,
html[data-ui="wp"] body { margin: 0 auto; padding: 0 12px; max-width: 1100px; }

@media (max-width: 767px) {
  html[data-ui="legacy"] body,
  html[data-ui="wp"] body { padding: 0 10px; font-size: 15px; line-height: 1.5; }

  /* absolutely placed "Layer" divs from Dreamweaver */
  html[data-ui="legacy"] div[id^="Layer"],
  html[data-ui="legacy"] div[style*="position:absolute"],
  html[data-ui="legacy"] div[style*="position: absolute"] {
    position: static !important; width: auto !important; height: auto !important;
  }

  /* layout tables (those holding images) stack their cells */
  html[data-ui="legacy"] table,
  html[data-ui="wp"] table { width: 100% !important; height: auto !important; }
  html[data-ui="legacy"] table:has(img) > tbody > tr > td,
  html[data-ui="legacy"] table:has(img) > tr > td,
  html[data-ui="wp"] table:has(img) > tbody > tr > td {
    display: block; width: 100% !important; height: auto !important; text-align: center;
  }
  html[data-ui="legacy"] td[width], html[data-ui="legacy"] th[width] { width: auto !important; }
  html[data-ui="legacy"] [width] { max-width: 100%; }
  html[data-ui="legacy"] img[width] { width: auto; }

  html[data-ui="legacy"] ul,
  html[data-ui="legacy"] ol { padding-left: 1.2em; }
  html[data-ui="legacy"] h1 { font-size: 1.5em; }
  html[data-ui="legacy"] h2 { font-size: 1.3em; }
  html[data-ui="legacy"] marquee { white-space: normal; }
}

/* ==========================================================================
   SHELL – replaces the old framesets (fr/index, en/index, …)
   ========================================================================== */
html[data-ui="shell"] { background: #ffffcc; }
.lp-shell, .lp-shell *, .lp-shell *::before, .lp-shell *::after { box-sizing: border-box; }
.lp-shell { margin: 0; color: #4a3b2a; font-family: "Century Gothic", Arial, Helvetica, sans-serif; background: #ffffcc; }
.lp-shell a { color: #8a4b1c; }
.lp-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  max-width: 1200px; margin: 0 auto; padding: 16px 20px; border-bottom: 1px solid #e3d9a8;
}
.lp-brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.lp-name { font-size: 30px; font-weight: bold; color: #8a4b1c; letter-spacing: .5px; }
.lp-tag { font-size: 14px; color: #7a6a4a; font-style: italic; }
.lp-sub { flex: 1 1 260px; font-size: 14px; color: #6b5a3a; }
.lp-flags { display: flex; gap: 8px; }
.lp-flags img { width: 24px; height: auto; border: 0; display: block; }

.lp-body { display: flex; align-items: flex-start; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 16px 20px; }
.lp-nav { flex: 0 0 190px; position: sticky; top: 12px; }
.lp-nav summary { display: none; }
.lp-nav ul { list-style: none; margin: 0; padding: 0; }
.lp-nav li { margin: 0 0 4px; }
.lp-nav a {
  display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none;
  font-weight: bold; font-size: 14px; color: #6b3a14; background: #fbf3c4;
}
.lp-nav a:hover, .lp-nav a.is-active { background: #8a4b1c; color: #fff; }
.lp-navframe { width: 100%; height: 480px; border: 0; }
.lp-main { flex: 1 1 auto; min-width: 0; }
.lp-main iframe { display: block; width: 100%; min-height: 600px; border: 0; background: #fff; border-radius: 6px; }

.lp-foot { max-width: 1200px; margin: 0 auto; padding: 16px 20px 28px; font-size: 13px; text-align: center; border-top: 1px solid #e3d9a8; }
.lp-news { font-size: 13px; color: #6b5a3a; }

@media (max-width: 767px) {
  .lp-top { padding: 12px 14px; gap: 8px 14px; }
  .lp-name { font-size: 24px; }
  .lp-sub { flex-basis: 100%; order: 3; font-size: 13px; }
  .lp-flags { margin-left: auto; }
  .lp-body { flex-direction: column; gap: 12px; padding: 10px 10px; }
  .lp-nav { position: static; width: 100%; flex: none; }
  .lp-nav summary {
    display: block; cursor: pointer; list-style: none; padding: 10px 14px; border-radius: 6px;
    background: #8a4b1c; color: #fff; font-weight: bold;
  }
  .lp-nav summary::-webkit-details-marker { display: none; }
  .lp-nav summary::after { content: "\2630"; float: right; }
  .lp-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
  .lp-nav li { margin: 0; }
  .lp-main { width: 100%; }
}

/* ==========================================================================
   "Conteneur" template (en/, fr/, nl/, de/, it/ … stylenew.css, 1260px fixed)
   ========================================================================== */
html[data-ui="legacy"] body:has(#conteneur) { max-width: none; padding: 0; margin: 0; }
#conteneur .texte a, #conteneur .princ a { overflow-wrap: anywhere; }

@media (max-width: 1365px) {
  div#conteneur { width: auto; max-width: 100%; margin: 0 auto; padding: 10px 12px; }
  div#conteneur div.mini { width: calc(100% - 230px); }
  div#conteneur div.mini img.long { width: 100%; height: auto; }
  div#conteneur .mini img:not(.long) { width: 96px; height: 96px; object-fit: cover; padding: 0 3px; }
  div#conteneur div.menu-h,
  div#conteneur div#nav { clear: both; width: 100% !important; max-width: 100%; float: none; height: auto; margin: 10px 0; overflow: hidden; }
  div#conteneur div.menu-h ul { width: auto; }
  div#conteneur .princ { width: calc(100% - 230px); }
  div#conteneur div.photo1, div#conteneur div.contenu { width: calc(100% - 280px); }
  div#conteneur div.photo1 img { max-width: 100%; height: auto; }
  div#conteneur h2.top { margin-left: 230px; }
}

@media (max-width: 767px) {
  div#conteneur { padding: 8px 10px; text-align: center; }
  div#conteneur > div.logo { float: none; width: auto; margin: 0 auto 8px; }
  div#conteneur > div.logo img { max-width: 200px; }

  /* thumbnail strip: one swipeable row */
  div#conteneur div.mini {
    float: none; width: 100%; display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scroll-snap-type: x proximity;
  }
  div#conteneur div.mini > a { flex: 0 0 auto; scroll-snap-align: start; }
  div#conteneur .mini img { width: 84px; height: 84px; padding: 0; object-fit: cover; }
  div#conteneur .mini img.long { width: 100%; height: auto; }
  div#conteneur div.mini > br { display: none; }

  /* top menu as wrapping pills; flags + slideshow on their own row */
  div#conteneur div.menu-h,
  div#conteneur div#nav { flex: 0 0 100%; text-align: center; line-height: normal; }
  div#conteneur div.menu-h ul,
  div#conteneur div#nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; margin: 0 0 8px; }
  div#conteneur div.menu-h li, div#conteneur div#nav li { float: none; margin: 0; }
  div#conteneur a.hote, div#conteneur a.hotel {
    float: none; display: inline-block; width: auto; height: auto; margin: 0;
    padding: 6px 12px; font-size: 13px; line-height: 1.3; background-size: 100% 100%; border-radius: 4px;
  }
  div#conteneur .drapo { display: inline-flex; gap: 6px; align-items: center; margin-right: 8px; }
  div#conteneur h2.top { margin: 10px 0 4px; padding-top: 0; text-align: center; }

  /* left block becomes a full-width panel */
  div#conteneur div.bloc-G { float: none; width: auto; margin: 0 0 12px; text-align: center; }
  div#conteneur div.menu-v ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; }
  div#conteneur div.menu-v li { padding: 0; }
  div#conteneur a.hotes { width: auto; display: inline-block; padding: 4px 12px; background-size: 100% 100%; }
  div#conteneur div.bloc-G h1 { font-size: 18px; }

  /* main area: photo then text, both full width */
  div#conteneur .princ { float: none; width: auto; padding: 0; overflow: visible; font-size: 14px; }
  div#conteneur div.photo1, div#conteneur div.contenu { float: none; width: auto; }
  div#conteneur div.texte, div#conteneur div.scroll-Pane {
    float: none; width: auto; height: auto !important; overflow: visible; font-size: 14px; line-height: 1.55; padding: 8px 0;
  }
  div#conteneur .texte h3, div#conteneur .texte p { margin-left: 0; }
  div#conteneur .legende, div#conteneur #filtre { width: auto; }
  div#conteneur img.photo { width: 100%; height: auto; }
  div#conteneur .bottom { font-size: 13px; }
}

/* ==========================================================================
   Wide tables on phones (all non-Divi templates)
   ========================================================================== */
@media (max-width: 767px) {
  html:not([data-ui="divi"]) table:not(:has(img)) {
    display: block; width: auto !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  html:not([data-ui="divi"]) table:has(img),
  html:not([data-ui="divi"]) table:has(img) > tbody,
  html:not([data-ui="divi"]) table:has(img) > tbody > tr { display: block; width: 100% !important; height: auto !important; }
  html:not([data-ui="divi"]) table:has(img) > tbody > tr > td,
  html:not([data-ui="divi"]) table:has(img) > tbody > tr > th {
    display: block; width: 100% !important; height: auto !important;
  }
  html:not([data-ui="divi"]) td[width], html:not([data-ui="divi"]) th[width] { width: auto !important; }
  html:not([data-ui="divi"]) td[nowrap] { white-space: normal; }
  html:not([data-ui="divi"]) iframe[width] { width: 100% !important; }
}

/* fleXcroll custom scrollbars: native scrolling below desktop, natural flow on phones */
@media (max-width: 1365px) {
  .flexcroll { overflow: auto !important; }
  .flexcroll .mcontentwrapper, .flexcroll .contentwrapper {
    position: static !important; width: auto !important; height: auto !important; overflow: visible !important; top: 0 !important;
  }
  .flexcroll .scrollgeneric, .flexcroll .vscrollerbase, .flexcroll .hscrollerbase,
  .flexcroll [class*="scrollerbar"], .flexcroll [class*="scrollerbase"] { display: none !important; }
}
@media (max-width: 767px) {
  .flexcroll, .flexcroll .mcontentwrapper, .flexcroll .contentwrapper {
    height: auto !important; width: auto !important; overflow: visible !important; top: 0 !important;
  }
  .flexcroll .scrollgeneric, .flexcroll .vscrollerbase, .flexcroll .hscrollerbase,
  .flexcroll [class*="scrollerbar"], .flexcroll [class*="scrollerbase"] { display: none !important; }
}

/* ==========================================================================
   Frame-content pages whose original style.css is gone (en/, fr/, nl/ …)
   ========================================================================== */
html[data-ui-bare] body {
  background: #fffef2; color: #4a3b2a; max-width: 960px; margin: 0 auto; padding: 16px 20px 32px;
  font-family: "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.6;
}
html[data-ui-bare] h1, html[data-ui-bare] h2, html[data-ui-bare] h3 { color: #8a4b1c; line-height: 1.25; text-align: center; margin: 1.2em 0 .6em; }
html[data-ui-bare] h2 { font-size: 22px; }
html[data-ui-bare] a { color: #8a4b1c; }
html[data-ui-bare] ul { padding-left: 1.3em; }
html[data-ui-bare] li { margin: .25em 0; }
html[data-ui-bare] table { margin-left: auto; margin-right: auto; border-collapse: collapse; }
html[data-ui-bare] td { padding: 6px 8px; vertical-align: top; }
html[data-ui-bare] img { border: 0; }
html[data-ui-bare] .centre { text-align: center; }
@media (max-width: 767px) {
  html[data-ui-bare] body { padding: 10px 12px 24px; font-size: 15px; }
  html[data-ui-bare] h2 { font-size: 19px; }
}

/* ==========================================================================
   Misc. widgets
   ========================================================================== */
.soliloquy-outer-container, .soliloquy-container, .soliloquy-wrapper,
.soliloquy-viewport, .soliloquy-slider { max-width: 100% !important; }
.soliloquy-container img { max-width: 100% !important; height: auto !important; }
textarea, input[type="text"], input[type="email"], input[type="tel"], select { max-width: 100%; }

/* Tables inside Divi text modules (activity lists etc.) */
html[data-ui="divi"] .et_pb_text_inner table { width: 100% !important; height: auto !important; table-layout: fixed; }
html[data-ui="divi"] .et_pb_text_inner td { height: auto !important; }
@media (max-width: 600px) {
  html[data-ui="divi"] .et_pb_text_inner table:has(img) td { display: block; width: 100% !important; }
}
/* Tables that wrap a Soliloquy slider must not grow with the slide strip */
table:has(.soliloquy-container) { table-layout: fixed; width: 100% !important; }