/* =========================================================
   L'ESCALE 207 — feuille de style principale
   Direction graphique : Proposition I — « Le Fil Conducteur »
   (carnet de voyage, polaroïds épinglés, sommaire-rivière en
   en-tête). Police d'affichage : Fraunces / Police de texte : Karla
   ========================================================= */

/* ---- Polices auto-hébergées ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Système de design ---- */
:root {
  --linen:#F3EBDD; --linen-light:#FBF7EF; --forest:#2C3A28; --forest-deep:#1F2A1D;
  --olive:#5B6349; --terracotta:#9C5B3F; --terracotta-light:#C08A64; --taupe:#A89377; --ink:#33291F;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---- Reset minimal ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--linen-light); color: var(--ink); font-family:'Karla',Arial,sans-serif; font-size: 16.5px; line-height: 1.66; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family:'Fraunces', serif; color: var(--forest); font-weight: 500; margin: 0; }
p { margin: 0 0 15px; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header : la rivière-navigation ---------- */
.fc-header { background: rgba(251,247,239,.92); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 200; border-bottom: 1px solid rgba(44,58,40,.14); }
.fc-header-row { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter) 8px; }
.fc-brand { text-decoration: none; color: var(--forest); font-family:'Fraunces',serif; font-size: 18px; flex: 0 0 auto; }

/* Le sommaire-rivière : toujours visible, en haut, sous l'en-tête — les
   points résument les sections, façon balises sur l'eau. La navigation
   complète reste accessible via les trois traits (menu). */
.fc-river-strip { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(14px,3.5vw,40px); padding: 8px var(--gutter) 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fc-strip-wave { position: absolute; left: var(--gutter); right: var(--gutter); top: 2px; height: 24px; pointer-events: none; z-index: 0; }
.fc-strip-link { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--olive); font-size: 11px; letter-spacing: .02em; white-space: nowrap; transform: translateY(var(--wy, 0)); transition: transform .2s ease, color .2s ease; }
.fc-strip-link:hover, .fc-strip-link:focus-visible { color: var(--terracotta); }
.fc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); opacity: .5; transition: opacity .2s ease, transform .2s ease; }
.fc-strip-link:hover .fc-dot, .fc-strip-link:focus-visible .fc-dot { opacity: 1; transform: scale(1.35); }
.fc-strip-cta { color: var(--terracotta) !important; font-weight: 600; }
.fc-strip-cta .fc-dot { opacity: .9; }
.nav-toggle { display: flex; width: 40px; height: 40px; border: none; background: none; cursor: pointer; position: relative; flex: 0 0 auto; }
.nav-toggle span { position: absolute; left: 8px; right: 8px; height: 1px; background: var(--forest); transition: transform 250ms, opacity 250ms; }
.nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 20px; } .nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav { display: none; flex-direction: column; position: fixed; inset: 0; background: var(--linen-light); z-index: 400; padding: 100px var(--gutter); }
.mobile-nav.is-open { display: flex; }
.mobile-nav a { font-family:'Fraunces',serif; font-size: 28px; color: var(--forest); text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(44,58,40,.15); }

/* ---------- Placeholders photo ---------- */
.ph-photo { position: relative; overflow: hidden; aspect-ratio: 4/3; background: repeating-linear-gradient(135deg, rgba(91,99,73,0.10) 0px, rgba(91,99,73,0.10) 2px, transparent 2px, transparent 14px), linear-gradient(160deg, #E4DAC6 0%, #D8CBAF 100%); }
.ph-label { position: absolute; left: 10px; bottom: 10px; z-index: 1; font-size: 10.5px; letter-spacing: .04em; color: var(--olive); background: rgba(251,247,239,.88); padding: 5px 9px; border-radius: 2px; }

/* ---------- Polaroid ---------- */
.polaroid { position: relative; background: var(--linen-light); padding: 14px 14px 44px; box-shadow: 0 10px 24px rgba(31,42,29,.18); max-width: 400px; margin: 0 auto; }
.polaroid-caption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family:'Fraunces',serif; font-style: italic; font-size: 14px; color: var(--forest); }
.tilt-1 { transform: rotate(-2.2deg); } .tilt-2 { transform: rotate(1.8deg); } .tilt-3 { transform: rotate(-1.2deg); }
/* Photo (ou carte) réelle dans un polaroid : le contenu remplit le cadre
   ph-photo (déjà en aspect-ratio 4/3 avec overflow:hidden), motif hachuré
   retiré. S'applique à la fois aux <img> (photos) et à l'<iframe> de la
   carte Google Maps (section Situation). */
.ph-photo.has-photo { background: none; }
.ph-photo.has-photo img, .ph-photo.has-photo iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.fc-hero-polaroid .ph-photo.has-photo img { object-position: center 22%; }
.fc-activite-polaroid { max-width: 190px; margin: 0 auto 16px; padding: 10px 10px 34px; }
.fc-activite-polaroid .polaroid-caption { font-size: 12px; bottom: 10px; }
.washi { position: absolute; top: -14px; left: 50%; width: 74px; height: 26px; background: rgba(156,91,63,.55); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 2px 4px rgba(31,42,29,.12); }
.washi-b { background: rgba(91,99,73,.5); transform: translateX(-50%) rotate(2deg); }

/* ---------- Hero ---------- */
.hero-fc { text-align: center; padding: clamp(50px,7vw,90px) var(--gutter) 0; max-width: 680px; margin: 0 auto; }
.fc-eyebrow { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin-bottom: 18px; }
.fc-hero-seal { width: min(140px, 36vw); margin: 0 auto 20px; filter: drop-shadow(0 0 3px rgba(251,247,239,.95)) drop-shadow(0 0 14px rgba(251,247,239,.85)) drop-shadow(0 6px 16px rgba(31,42,29,.16)); }
.hero-fc h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin-bottom: 20px; }
.fc-dek { font-size: 17px; max-width: 50ch; margin: 0 auto; }
.fc-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.btn-fc-primary { display: inline-block; background: var(--terracotta); color: var(--linen-light); text-decoration: none; padding: 14px 28px; font-size: 13px; letter-spacing: .04em; border-radius: 24px; }
.btn-fc-text { display: inline-block; color: var(--forest); text-decoration: none; padding: 14px 4px; font-size: 13px; border-bottom: 1px solid var(--forest); }
.fc-hero-polaroid { margin-top: clamp(34px,4.5vw,54px); }

/* ---------- Le fil conducteur ---------- */
.fc-river-body { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.fc-stop { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: clamp(36px,4.6vw,58px) 0; gap: 0 clamp(40px,6vw,90px); }
.fc-stop.text-right .fc-stop-text-side { grid-column: 2; }
.fc-stop.text-right .fc-stop-photo-side { grid-column: 1; }
.fc-stop.text-left .fc-stop-text-side { grid-column: 1; }
.fc-stop.text-left .fc-stop-photo-side { grid-column: 2; }
.fc-stop-text-side, .fc-stop-photo-side { min-width: 0; }
.fc-stop-photo-side .polaroid { width: 100%; }
.fc-stop-label { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin-bottom: 12px; }
.fc-stop-text-side h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.fc-stop-text-side h3 { font-size: 22px; margin-bottom: 10px; }
.fc-stop-text-side p { font-size: 15.5px; }
.fc-lead { font-family:'Fraunces',serif; font-style: italic; font-size: 19px; color: var(--forest); }
.fc-signature { font-family:'Fraunces',serif; font-style: italic; color: var(--terracotta); margin-top: 12px; }
.fc-address { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(44,58,40,.18); }
.fc-address dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin-top: 12px; }
.fc-address dt:first-child { margin-top: 0; }
.fc-address dd { margin: 3px 0 0; }

/* En-têtes de groupe (chambres / activités / accessibilité) */
.fc-stop-head { position: relative; padding: clamp(28px,3.6vw,46px) 0 10px; }
.fc-stop-head-text { text-align: center; max-width: 620px; margin: 0 auto; }
.fc-stop-head-text h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; }

/* L'en-tête (.fc-header) est sticky et mesure environ 110px de haut : sans
   cette compensation, un clic sur le sommaire-rivière ou le pied de page
   fait atterrir la section juste sous le bord supérieur de la fenêtre, et
   son titre se retrouve caché derrière l'en-tête. scroll-margin-top laisse
   la place nécessaire au-dessus de chaque ancre de navigation. */
.fc-stop, .fc-stop-head, .fc-arrival { scroll-margin-top: 140px; }

/* ---------- Activités ---------- */
.fc-activites { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.fc-activites > * { min-width: 0; }
.fc-activite { border-top: 1px solid rgba(44,58,40,.2); padding-top: 18px; }
.fc-activite h3 { font-size: 19px; margin-bottom: 8px; }
.fc-activite p { font-size: 14.5px; margin: 0; }

/* ---------- Accessibilité ---------- */
.fc-access { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.fc-access > * { min-width: 0; }
.fc-access-item { border-top: 1px solid rgba(44,58,40,.2); padding-top: 18px; }
.fc-access-item h3 { font-size: 19px; margin-bottom: 8px; }
.fc-access-item p { font-size: 14.5px; margin: 0; }
.fc-velo { position: relative; z-index: 1; max-width: 1180px; margin: clamp(24px,3.5vw,40px) auto clamp(40px,5vw,64px); padding: 0 var(--gutter); }
.fc-velo-card { background: var(--forest); border-radius: 8px; padding: clamp(28px,4vw,44px); color: var(--linen-light); }
.fc-velo-tag { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-light); font-weight: 600; margin-bottom: 10px; }
.fc-velo-card h3 { color: var(--linen-light); font-size: 22px; margin-bottom: 10px; }
.fc-velo-card p { font-size: 15px; opacity: .88; max-width: 640px; margin: 0; }
.fc-link-external { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--terracotta-light); text-decoration: none; border-bottom: 1px solid var(--terracotta-light); padding-bottom: 2px; }
.fc-link-external:hover { color: var(--linen-light); border-color: var(--linen-light); }
.fc-access-item .fc-link-external { color: var(--terracotta); border-color: var(--terracotta); }
.fc-access-item .fc-link-external:hover { color: var(--forest); border-color: var(--forest); }

/* ---------- Réservation — l'arrivée ---------- */
.fc-arrival { background: linear-gradient(180deg, var(--linen) 0%, var(--linen-light) 100%); padding: clamp(60px,7.5vw,100px) var(--gutter) clamp(70px,9vw,120px); margin-top: 6px; }
.fc-arrival-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.fc-arrival-inner > h2 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 14px; }
.fc-arrival-inner .fc-lead { max-width: 640px; margin: 0 auto; }
.fc-reservation-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px,4vw,60px); margin-top: 36px; text-align: left; }
.fc-reservation-grid > * { min-width: 0; }
.fc-booking { background: var(--linen-light); border: 1px solid rgba(44,58,40,.16); border-radius: 8px; padding: 30px; }
.fc-booking h3 { font-size: 20px; margin-bottom: 10px; }
.fc-booking p { font-size: 14.5px; }
.fc-airbnb-btn { display: inline-block; margin-top: 4px; }
.fc-booking .tag-todo { display: block; margin-top: 10px; }
.fc-availability-widget { margin-top: 16px; padding: 16px; border: 1px dashed rgba(44,58,40,.3); border-radius: 6px; display: flex; align-items: center; gap: 12px; background: rgba(44,58,40,.03); }
.fc-availability-widget-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--terracotta); }
.fc-availability-widget p { font-size: 13px; color: var(--olive); margin: 0; }
.fc-contact dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin-top: 16px; }
.fc-contact dt:first-child { margin-top: 0; }
.fc-contact dd { margin: 3px 0 0; }
.tag-todo { color: var(--terracotta-light); font-style: italic; font-size: 12.5px; }

/* ---------- Footer ---------- */
.fc-footer { background: var(--forest-deep); color: var(--linen-light); text-align: center; padding: clamp(60px,8vw,100px) var(--gutter) 40px; }
.fc-footer-mark { width: 84px; opacity: .92; margin: 0 auto 24px; }
.fc-footer-nav { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 13px; margin-bottom: 28px; }
.fc-footer-nav a { color: var(--linen); text-decoration: none; opacity: .85; }
.fc-footer-nav a:hover { opacity: 1; }
.fc-footer-address { font-size: 13px; opacity: .75; margin: 0 0 6px; }
.fc-footer-fine { font-size: 12px; opacity: .55; margin: 0; }
.fc-footer-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fc-footer-fine a:hover { color: var(--linen); }

/* ---------- Page mentions légales ---------- */
.fc-legal-main { max-width: 720px; margin: 0 auto; padding: clamp(56px,7vw,84px) var(--gutter) clamp(70px,9vw,110px); }
.fc-legal-eyebrow { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin-bottom: 14px; }
.fc-legal-main h1 { font-size: clamp(28px,3.4vw,40px); line-height: 1.15; margin-bottom: 10px; }
.fc-legal-updated { font-family:'Fraunces',serif; font-style: italic; font-size: 15px; color: var(--olive); margin: 0 0 44px; }
.fc-legal-main h2 { font-size: 20px; margin-top: 44px; margin-bottom: 0; }
.fc-legal-main h2:first-of-type { margin-top: 0; }
.fc-legal-main p { margin: 12px 0 0; font-size: 15px; color: var(--ink); line-height: 1.72; }
.fc-legal-main a { color: var(--terracotta); text-decoration: none; border-bottom: 1px solid currentColor; }
.fc-legal-main a:hover { color: var(--forest); }
.fc-legal-todo { display: block; font-style: italic; color: var(--taupe); background: rgba(156,91,63,.08); border: 1px dashed rgba(156,91,63,.35); border-radius: 4px; padding: 12px 16px; }

/* ---------- Réapparition douce ---------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .fc-stop { grid-template-columns: 1fr; gap: 0; }
  .fc-stop.text-right .fc-stop-text-side, .fc-stop.text-left .fc-stop-text-side,
  .fc-stop.text-right .fc-stop-photo-side, .fc-stop.text-left .fc-stop-photo-side { grid-column: 1; }
  .fc-stop-photo-side { margin-bottom: 18px; }
  .fc-activites { grid-template-columns: 1fr; gap: 20px; }
  .fc-access { grid-template-columns: 1fr; gap: 20px; }
  .fc-reservation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .tilt-1, .tilt-2, .tilt-3 { transform: rotate(0deg); }
  .fc-hero-seal { width: min(120px, 32vw); }
  .fc-river-strip { justify-content: flex-start; gap: 18px; }
}