/* Var coast, Gulf of Saint-Tropez and Estérel: shared layout for all locales. */
.var-guide { overflow-wrap: anywhere; }
.var-guide .header-inner { align-items: center; }
.var-guide main { font-size: 1.075rem; line-height: 1.75; }
.var-guide main [id] { scroll-margin-top: 1.2rem; }
.var-guide figure { margin: 0; min-width: 0; }
.var-guide img { display: block; width: 100%; height: auto; }
.var-guide figcaption { padding-top: .6rem; font-size: .87rem; line-height: 1.5; }
.var-guide .var-breadcrumb { padding-block: .7rem; border-bottom: 1px solid var(--line); }
.var-guide .var-breadcrumb a, .var-guide .var-onward > a, .var-guide .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.var-guide .var-hero { display: grid; gap: 1.8rem; padding-block: 2rem 2.4rem; }
.var-guide h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.08; margin: .4rem 0 1rem; }
.var-guide .var-intro { font: 1.55rem/1.4 var(--serif); color: var(--ink); }
.var-guide .var-hero p { max-width: 62ch; }
.var-guide .var-overview { border-block: 1px solid var(--line); padding-block: 2rem; }
.var-guide h2 { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.15; }
.var-guide h3 { font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.25; margin: 0 0 1rem; }
.var-guide .var-map-layout { display: grid; gap: 1.5rem; align-items: start; }
.var-guide .var-map svg { display: block; width: 100%; height: auto; border: 1px solid #bbcbc5; }
.var-guide .var-map text { font-family: Arial, sans-serif; }
.var-guide .var-map-label { font-size: 26px; fill: #345b5c; paint-order: stroke; stroke: #f5f0e3; stroke-width: 4px; stroke-linejoin: round; }
.var-guide .var-map-north { font-size: 23px; fill: #244e55; }
.var-guide .var-map-number { fill: #fff; font-size: 31px; }
.var-guide .var-map-leader { pointer-events: none; fill: none; stroke: #325d60; stroke-width: 1.7; }
.var-guide .var-map-anchor { pointer-events: none; fill: #244e55; stroke: #fff; stroke-width: 2; }
.var-guide .var-map-hit { fill: #fff; fill-opacity: .55; stroke: #719998; stroke-width: 1; }
.var-guide .var-map-disc { fill: #244e55; }
.var-guide .var-map a:hover .var-map-hit, .var-guide .var-map a:focus .var-map-hit { fill: #fff; fill-opacity: 1; stroke: #ad752c; stroke-width: 5; }
.var-guide .var-map a:focus { outline: none; }
.var-guide .var-directory { display: grid; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.var-guide .var-directory li { display: flex; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--line); padding: .5rem 0 .8rem; margin: 0; }
.var-guide .var-directory-number { flex: 0 0 1.55em; white-space: nowrap; font: italic 1.4rem var(--serif); color: var(--teal); }
.var-guide .var-directory li > div { min-width: 0; }
.var-guide .var-directory a { display: inline-flex; align-items: center; min-height: 44px; font: 1.3rem/1.35 var(--serif); }
.var-guide .var-directory p { font-size: 1rem; line-height: 1.55; margin: .15rem 0; }
.var-guide .var-context { max-width: 50rem; margin-top: 2rem; }
.var-guide .var-section { padding-block: 2.8rem; border-bottom: 1px solid var(--line); }
.var-guide .var-heading { max-width: 53rem; margin-bottom: 2rem; }
.var-guide .var-chapter { display: block; color: var(--teal); font: italic 1.4rem var(--serif); margin-bottom: .5rem; }
.var-guide .var-heading h2 { margin-top: 0; }
.var-guide .var-lede { font-size: 1.17rem; line-height: 1.65; }
.var-guide .var-story { display: grid; gap: 1.7rem; margin-block: 2.6rem; align-items: start; }
.var-guide .var-story p, .var-guide .var-practical p, .var-guide .var-onward p { max-width: 72ch; }
.var-guide .var-story > div > p:last-child { margin-bottom: 0; }
.var-guide .var-practical { background: #e8eee7; border-left: 3px solid #42736d; padding: 1.2rem 1.4rem; margin-block: 1.8rem 2.5rem; max-width: 55rem; }
.var-guide .var-practical h3 { font-size: 1.45rem; }
.var-guide .var-practical p { margin-bottom: 0; font-size: 1rem; }
.var-guide .var-map-links { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; margin-top: .45rem; }
.var-guide .var-map-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
.var-guide details { margin-block: .5rem; }
.var-guide summary { min-height: 44px; align-content: center; cursor: pointer; }
.var-guide details a { display: inline-flex; align-items: center; min-height: 44px; }
.var-guide .photo-credit { font-size: .8rem; }
.var-guide .photo-credit summary { color: var(--muted); }
.var-guide .photo-credit p { margin: 0; }
.var-guide .var-map-source { font-size: .9rem; }
@media (min-width: 760px) {
 .var-guide .var-story:has(> figure) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; }
 .var-guide .var-story:nth-of-type(even) > figure { order: 2; }
 .var-guide .var-story:not(:has(> figure)) { max-width: 52rem; }
}
@media (min-width: 1000px) {
 .var-guide .var-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 2.7rem; padding-block: 2.8rem; }
 .var-guide .var-map-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.7rem; }
 .var-guide .var-section { padding-block: 3.6rem; }
}

.var-guide .var-act { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #7a5238; margin-block: 2rem .4rem; }
.var-guide .var-back { display: inline-flex; align-items: center; min-height: 44px; }