/*
 * Site 135901 — reference: https://www.accesculture.com/activite/PARLE_MOI_D_AMOUR
 * Palette, container width, column mechanism and heading language are the reference's own
 * (see _uniq/profiles/135901.json, categories A-E). Base type size is LIFTED from the
 * reference's 11px to the TEXT-READABLE floor (14px prose / 12px secondary / 14px heading);
 * see LOG.md "From the reference" for the exact ratios kept.
 */

:root {
  --bg: #fff;
  --surface: #f9f8f8;
  --surface-dark: #292c29;
  --text: #737373;
  --text-muted: #767676; /* lifted from the reference's #949494 for 4.5:1 on white, see LOG.md */
  --text-dark: #2d2d2d;
  --heading-bg: #565656;
  --accent: #d30f43;      /* buttons / interactive controls (reference's own) */
  --accent-title: #be1327;/* titles / selected state (reference's own) */
  --accent-link: #e91d25; /* in-text links (reference's own) */
  --accent-hover: #e32c43;/* hover / required (reference's own) */
  --border: #ccc;
  --border-alt: #bababa;
  --tag-bg: #dfe0e1;
  --tag-text: #2d2d2d;
}

* { margin: 0; padding: 0; }

body {
  font-family: Arial;    /* reference: body{font-family:Arial}, copied verbatim */
  font-size: 11px;       /* reference: body{font-size:11px}, copied verbatim - the lift is on .pageBody */
  color: var(--text);    /* reference: body{color:#737373}, copied verbatim (var(--text) = #737373) */
  width: 100%;           /* reference: body{width:100%}, copied verbatim */
  height: 100%;          /* reference: body{height:100%}, copied verbatim */
}

.pageBody {
  /* our own additions, scoped to a class on <body> rather than the bare tag itself —
     NO-BLANKET-RESET permits no un-scoped extras on a reference-matched bare selector */
  font-family: Arial, Helvetica, sans-serif; /* the reference's Arial, with fallbacks */
  font-size: 14px;       /* reference 11px lifted x1.27 to the prose floor, per TEXT-READABLE */
  line-height: 1.5;      /* needed for TEXT-READABLE's 1.4 prose floor */
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { border: none; } /* reference: img{border:none}, copied verbatim - NO-BLANKET-RESET. No logo <img> exists on this site (header is a CSS-only background band, see D.logo), so no scoped max-width override is needed. */

a { text-decoration: none; outline: none; color: var(--text); } /* reference: a{text-decoration:none;outline:none;color:#737373}, copied verbatim (var(--text) = #737373) - NO-BLANKET-RESET */
a:hover { color: var(--accent); } /* reference: a:hover{color:#d30f43}, copied verbatim (var(--accent) = #d30f43) */

/* links.decoration: underline-on-hover — our own choice, scoped to the anchors that actually
   appear on the page (TOC, breadcrumbs, in-text prose, recommendation cards), never the bare
   tag (NO-BLANKET-RESET) */
.sectionText a:hover, .hotelDesc a:hover,
.tocList a:hover, .tocHotelList a:hover,
.heroCrumbs a:hover, .recsCard:hover { text-decoration: underline; }


/* ===================== SITE HEADER (HEADER-PORT: partial — logo band kept, nav/lang/search/home link removed) ===================== */
.siteHeader {
  position: relative;
  height: 170px;                              /* reference: #header height:170px */
  background-image: url(headerbg.jpg);        /* reference: #header background-image: headerbg.jpg (1x170 tiling strip) */
}
.siteHeaderBanner {
  position: absolute;
  width: 100%;
  height: 170px;
  background-image: url(header.jpg);          /* reference: #header .banner, FR/Header.jpg, 1200x170 */
  background-position: center top;
  background-repeat: no-repeat;
}

/* ===================== SHELL / CONTAINER (CONTAINER-FIDELITY: reference's own fixed-width, centred, floated-column mechanism) ===================== */
.articleShell {
  position: relative;
  left: 50%;
  width: 980px;               /* reference: #mainContainer width:980px */
  margin: 12px 0 40px -490px; /* reference: margin: 12px 0 0 -490px */
}
.articleMain {
  float: left;
  width: 760px;                /* reference: #content width:760px */
}
.articleAside {
  float: right;
  width: 210px;                /* reference: #sideBar width:210px */
}
.clearRow::after { content: ""; display: block; clear: both; }

@media (max-width: 1020px) {
  .articleShell { position: static; left: auto; margin: 12px 16px 40px; width: auto; max-width: 980px; }
  .articleMain, .articleAside { float: none; width: 100%; }
  .articleAside { margin-top: 24px; }
}

/* ===================== HERO (split-photo-text, compact) ===================== */
.heroCrumbs {
  font-size: 12px;             /* secondary floor */
  line-height: 1.3;
  color: var(--text-muted);
  padding: 12px 0 8px;
}
.heroCrumbs a { color: var(--text-muted); }
.articleHero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.heroMedia {
  flex: 0 0 270px;
  border: 1px solid var(--border-alt); /* reference: .vignetteContainer border:1px solid #bababa */
}
.heroMedia table { width: 100%; }
.heroMedia td { text-align: center; vertical-align: middle; padding: 0; }
.heroMedia img { width: 100%; height: auto; display: block; }
.heroBody { flex: 1; min-width: 0; }
.heroTitle {
  font-size: 28px;
  line-height: 1.2;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--accent-title);   /* reference: .detailTitle color:#be1327 */
}
.heroSubtitle {
  margin-top: 8px;
  font-size: 14px;               /* prose floor */
  line-height: 1.4;
  color: var(--text);
}
.heroMeta {
  margin-top: 10px;
  font-size: 12px;                /* secondary floor */
  color: var(--text-muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===================== STATS PILL ===================== */
.statPills { display: flex; gap: 8px; margin-top: 10px; }
.statPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 0;              /* radius_family: sharp — reference has zero border-radius anywhere */
  padding: 3px 10px;
  font-size: 12px;
  color: #707070; /* TEXT-READABLE: darkened from var(--text) #737373, 4.47:1 on --surface, to 4.67:1 */
  background: var(--surface);
}
.statIcon { width: 14px; height: 14px; flex: none; }

/* ===================== AUTHOR CARD ===================== */
.authorCard {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.authorAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-alt);
  box-sizing: border-box;
  flex: none;
}
.authorName { font-size: 14px; font-weight: bold; color: var(--text-dark); }
.authorRole { font-size: 12px; color: #707070; margin-top: 2px; } /* TEXT-READABLE: darkened from --text-muted (#767676, 4.28:1 on --surface) to 4.67:1 */

/* ===================== TOC (collapsible-inline, aside-right) ===================== */
.articleToc {
  margin-top: 20px;
  border: 1px solid var(--border);
}
.tocToggle {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-dark);
  background: var(--surface);
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
}
.tocPanel { padding: 10px; }
.tocPanel[hidden] { display: none; }
.tocList { list-style: disc; margin-left: 18px; font-size: 12px; }
.tocHotelList { list-style: disc; margin-left: 18px; font-size: 14px; } /* TEXT-READABLE: hotel name tier, 14px floor */
.tocList > li { margin-bottom: 6px; }
.tocHotelList { margin-top: 4px; margin-bottom: 8px; } /* margins only now; size set above */
.tocList a, .tocHotelList a { color: var(--text); }

/* ===================== ARTICLE BODY / SECTIONS ===================== */
.articleBody { margin-top: 24px; }
.articleSection {
  padding: 20px 0;
  border-top: 1px solid var(--border); /* page.rhythm: boxed-sections */
}
.articleSection:first-child { border-top: 0; padding-top: 0; }
.sectionHead {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-dark);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent); /* page.section_headings: h2-with-rule */
  margin-bottom: 12px;
  display: inline-block;
}
.articleSection .articleSection .sectionHead { font-size: 16px; border-bottom-width: 1px; } /* h3-with-rule for a nested subsection */
.sectionRow { display: flex; gap: 16px; align-items: flex-start; }
.sectionMedia {
  flex: 0 0 240px;
  display: grid;                       /* media.treatment: grid */
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.sectionMedia:has(.mediaLink:only-of-type) { grid-template-columns: 1fr; } /* :only-of-type counts sibling <a> tags only, ignoring the <p class="sectionCaption"> sibling */
.mediaLink { display: block; border: 0; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; text-align: left; } /* LINKS-ALLOWLIST: a <button> trigger, not <a href>, for the fslightbox enlarge action; reset scoped to our own class, not the bare tag (NO-BLANKET-RESET) */
.sectionMedia img {
  box-sizing: border-box;
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border-alt); /* paragraph.figure_frame: border */
}
.sectionMedia:has(.mediaLink:only-of-type) img { height: 180px; }
.sectionCaption { font-size: 12px; color: var(--text-muted); padding: 6px; }
.sectionText { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--text-dark); }
.sectionText a { color: var(--accent-link); }
.articleSection:first-of-type .sectionText > p:first-child::first-line { font-size: 16px; }

/* ===================== MAP ===================== */
.mapBlock { margin-top: 24px; }
.mapHead { font-size: 20px; font-weight: bold; color: var(--text-dark); margin-bottom: 10px; }
.mapCanvas {
  width: 100%;
  height: 400px;                 /* map.aspect: square-ish at this container width */
  border: 1px solid var(--border);
  background: var(--surface);
  box-sizing: border-box;
}
.mapLegend { list-style: none; margin-top: 10px; font-size: 12px; }
.mapLegend li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.mapLegend li:first-child { border-top: 0; }
.mapLegendNum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: bold; border-radius: 50%;
}
.mapPinIcon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: bold; border: 2px solid #fff;
  box-sizing: border-box;
}
.mapPinIcon span { transform: rotate(45deg); }
.mapPopup { font-size: 12px; }
.mapPopup b { display: block; font-size: 13px; margin-bottom: 2px; }

/* ===================== HOTEL CARDS ===================== */
.hotelGrid { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.hotelCard {
  position: relative;
  display: flex;
  gap: 14px;
  border: 1px solid var(--border);  /* card.frame: hairline-border */
  padding: 18px;                    /* TEXT-SPACING: >= 16px floor at 1280 and 375 */
  border-radius: 0;                 /* card.radius: sharp */
}
.hotelBadge {
  position: absolute;
  top: -8px; left: -8px;
  width: 26px; height: 26px;
  border-radius: 50%;               /* card.number_badge: circle-left */
  background: var(--accent-title);
  color: #fff;
  font-size: 12px; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.hotelStrip { flex: 0 0 200px; position: relative; }
.hotelStrip .swiper { width: 200px; height: 150px; }
.hotelStrip img { width: 200px; height: 150px; object-fit: cover; display: block; border: 1px solid var(--border-alt); box-sizing: border-box; }
.hotelStripBtn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 1px solid var(--border); background: #fff;
  font-size: 12px; cursor: pointer; z-index: 2;
  box-sizing: border-box;
}
.hotelStripBtn.isPrev { left: 4px; } .hotelStripBtn.isNext { right: 4px; }
.hotelStripDots { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; z-index: 2; }
.hotelStripDots .swiper-pagination-bullet { background: #fff; opacity: .8; }
.hotelStripDots .swiper-pagination-bullet-active { background: var(--accent); opacity: 1; }
.hotelBody { flex: 1; min-width: 0; }
.hotelHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hotelName { font-size: 15px; font-weight: bold; color: var(--text-dark); }
.hotelReview { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.hotelReviewScore { font-weight: bold; color: var(--text-dark); }
.hotelBestTag {
  display: inline-block; font-size: 12px; font-weight: bold; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 2px 8px; margin-bottom: 8px;
}
.hotelMeta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.hotelDistance { display: inline-flex; align-items: center; gap: 4px; }
.hotelMapBtn { border: 1px solid var(--border); background: #fff; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.hotelFeatures { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hotelFeatureTag { font-size: 12px; background: var(--tag-bg); color: var(--tag-text); padding: 2px 8px; }
.hotelDesc { font-size: 14px; line-height: 1.5; color: var(--text-dark); margin-top: 8px; max-width: 46em; } /* full-text-narrow-measure */
.hotelDesc a { color: var(--accent-link); }
.hotelCheckRow { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.hotelFooter { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.hotelPrice { font-size: 14px; font-weight: bold; color: var(--text-dark); }
.hotelPrice small { font-size: 12px; font-weight: normal; color: var(--text-muted); }
.hotelCta { background: var(--accent); color: #fff; border: 0; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 8px 16px; cursor: pointer; }
.hotelCta:hover { background: var(--accent-hover); }

/* ===================== COMPARISON TABLE (card-rows) ===================== */
.cmpBlock { margin-top: 24px; }
.cmpHead { font-size: 20px; font-weight: bold; color: var(--text-dark); margin-bottom: 4px; }
.cmpKicker { font-size: 12px; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; }
.cmpTable { margin-top: 12px; border: 1px solid var(--border); }
.cmpRow { display: flex; flex-wrap: wrap; padding: 12px; border-top: 1px solid var(--border); }
.cmpRow:first-child { border-top: 0; }
.cmpRow:nth-child(even) { background: var(--surface); } /* table.zebra: row-stripes */
.cmpHotel { flex: 0 0 220px; font-size: 14px; font-weight: bold; color: var(--text-dark); }
.cmpHotel small { display: block; font-size: 12px; font-weight: normal; color: var(--text-muted); }
.cmpCells { flex: 1; display: flex; flex-wrap: wrap; gap: 16px; min-width: 220px; }
.cmpCell { flex: 1 1 160px; min-width: 0; }
.cmpCellLabel { font-size: 12px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.cmpCellValue { font-size: 12px; color: var(--text-dark); }
.cmpDot { color: var(--accent); font-weight: bold; }

/* ===================== FAQ ===================== */
.articleFaq { margin-top: 24px; }
.faqHead { font-size: 20px; font-weight: bold; color: var(--text-dark); margin-bottom: 10px; }
.faqItem { border-bottom: 1px solid var(--border); }
.faqItem summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 24px 12px 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
  position: relative;
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary::after {
  content: "\203A"; /* chevron */
  position: absolute; right: 4px; top: 10px;
  font-size: 18px; color: var(--accent);
  transition: transform .15s ease;
}
.faqItem[open] summary::after { transform: rotate(90deg); }
.faqA { font-size: 14px; line-height: 1.5; color: var(--text-dark); padding: 0 0 14px; }

/* ===================== HELPFUL / SHARE (floating-side — outside document flow, not in section_order) ===================== */
.helpfulBox {
  position: fixed;
  left: max(8px, calc(50% - 560px));
  top: 220px;
  width: 46px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 6px;
  text-align: center;
  z-index: 20;
  box-sizing: border-box;
}
.helpfulQ { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.helpfulBtns { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.helpfulBtn, .shareBtn {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.helpfulBtn:hover, .shareBtn:hover { background: var(--surface); }
@media (max-width: 1240px) { .helpfulBox { display: none; } } /* no room beside the fixed 980px shell */

/* ===================== RECOMMENDATIONS ===================== */
.recsBlock { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.recsHead { font-size: 20px; font-weight: bold; color: var(--text-dark); margin-bottom: 12px; }
.recsList { display: flex; gap: 16px; flex-wrap: wrap; }
.recsCard { flex: 1 1 220px; display: flex; gap: 10px; border: 1px solid var(--border); padding: 10px; }
.recsPhoto { width: 70px; height: 70px; object-fit: cover; flex: none; border: 1px solid var(--border-alt); box-sizing: border-box; }
.recsTitle { font-size: 13px; font-weight: bold; color: var(--text-dark); line-height: 1.3; }
.recsCard a { color: inherit; }
.recsCard a:hover .recsTitle { color: var(--accent-link); }

/* ===================== 404 ===================== */
.gonePage { padding: 60px 0; text-align: center; }
.gonePage h1 { font-size: 24px; color: var(--text-dark); }