/* =========================================================
   Fleuve et Montagnes : couche « design » (proposition, 15 oct. 2026)
   Chargée APRÈS style.css. Pour revenir à la version actuelle,
   il suffit d'enlever la ligne qui appelle design.css.
   Aucun texte, aucune photo ni aucune couleur de marque changés.
   ========================================================= */

:root{
  /* échelle typographique (rapport 1,25) */
  --t-xs:14px; --t-s:15.5px; --t-b:17px; --t-m:19.5px; --t-l:24px; --t-xl:30px;
  /* rythme vertical, base 8 */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:88px;
  --sec:var(--sp-6);
  /* trois rayons seulement : grand média, carte, petit élément */
  --r-l:20px; --r-m:14px; --r-s:10px;
  --ombre:0 1px 2px rgba(21,46,67,.06), 0 12px 28px -14px rgba(21,46,67,.28);
}
@media (min-width: 900px){ :root{ --sec:var(--sp-7) } }

/* ---------- texte ---------- */
body{font-size:var(--t-b); line-height:1.6; font-variant-numeric:normal; text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-.022em; text-wrap:balance}
p{text-wrap:pretty}
.sec h2{font-size:clamp(32px, 6.4vw, 48px); line-height:1.04; letter-spacing:-.028em}
.sec-head p, .berge-head p{font-size:var(--t-m); line-height:1.55; color:var(--montagne)}

/* ---------- rythme des sections ---------- */
.sec{padding:var(--sec) 0}
.sec-head{margin-bottom:var(--sp-4)}
.berge-head{margin-bottom:var(--sp-4)!important}
.quotes h2{margin-bottom:var(--sp-4)}

/* ---------- boutons : une seule forme partout ---------- */
.btn{border-radius:12px; letter-spacing:-.005em; transition:background-color .15s, transform .15s, box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-sun{box-shadow:inset 0 -2px 0 rgba(21,46,67,.18)}
.btn-navy{box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.btn-sm{border-radius:12px}
@media (min-width: 1100px){
  .site-nav a.nav-cta{border-radius:12px}
  .site-nav a{letter-spacing:-.005em}
}
.sticky-book{border-radius:14px}

/* ---------- en-tête ---------- */
.site-head{box-shadow:0 1px 0 rgba(21,46,67,.18)}
.brand{border-color:rgba(21,46,67,.28)}

/* ---------- héros ---------- */
.hero-photo::after{background:
  linear-gradient(180deg, rgba(21,46,67,0) 42%, rgba(21,46,67,.62) 78%, rgba(21,46,67,.82) 100%)}
.hero h1{font-size:clamp(46px, 11.5vw, 104px); line-height:.92; letter-spacing:-.035em; text-shadow:0 2px 24px rgba(21,46,67,.35)}
.hero h1 span{font-size:max(19px, .3em); letter-spacing:-.005em; margin-top:var(--sp-2); font-weight:600}
.lead{font-size:clamp(18px, 2vw, 21px); line-height:1.45; margin-top:var(--sp-1); max-width:36ch; text-shadow:0 1px 12px rgba(21,46,67,.4)}
@media (min-width: 900px){
  .hero-photo{border-radius:var(--r-l)}
  .hero-txt{padding:0 64px 112px}
}

/* barre de réservation : plus nette, champs bien séparés */
.book{border-radius:var(--r-l)}
.book-hero{box-shadow:0 2px 4px rgba(21,46,67,.06), 0 30px 60px -24px rgba(21,46,67,.5), 0 0 0 1px rgba(21,46,67,.06)}
.bk-f{border-radius:var(--r-m); border-color:#D3DDE2; background:#fff}
.bk-f:hover{border-color:var(--marine); background:#FBFCFD}
.bk-lab{letter-spacing:.005em}
.bk-go{border-radius:var(--r-m)}
.book-inline{border:1px solid var(--line); box-shadow:var(--ombre)}

/* ---------- habitations (accueil) ---------- */
.kind{border-radius:var(--r-l); isolation:isolate}
.kind::after{background:linear-gradient(180deg, rgba(21,46,67,0) 40%, rgba(21,46,67,.88) 100%)}
.k-body{left:24px; right:24px; bottom:22px}
.k-name{font-size:clamp(24px, 3vw, 30px); letter-spacing:-.02em}
.k-meta{font-size:var(--t-s); color:#FCE9BC}
.more{margin-top:var(--sp-3); font-size:var(--t-b)}

/* les plaques de porte : l'élément signature du site */
.doors{margin-top:var(--sp-5); padding-top:var(--sp-4)}
.doors-t{font-size:var(--t-l); font-weight:700; letter-spacing:-.018em; margin-bottom:var(--sp-3)}
.door-cards{gap:16px}
@media (min-width: 1050px){ .door-cards{row-gap:28px; column-gap:18px} }
.dc-media{margin-bottom:10px}
.dc-media img{border-radius:var(--r-m)}
.dc-media .door{left:10px; top:10px; min-width:42px; height:42px; border-radius:9px; font-size:19px; box-shadow:0 2px 0 var(--nuit), 0 6px 14px -6px rgba(0,0,0,.45)}
.door-card:hover .dc-media img{transform:translateY(-3px)}
.door-card:hover .dc-name{text-decoration:underline; text-decoration-color:var(--soleil); text-decoration-thickness:3px; text-underline-offset:4px}
.dc-name{font-size:var(--t-b); line-height:1.3}
.dc-cap{font-size:var(--t-xs); line-height:1.4}

/* ---------- la berge ---------- */
.berge-row{gap:var(--sp-3)}
.berge-row img{border-radius:var(--r-l); margin-bottom:var(--sp-2)}
.bc-t{font-size:var(--t-m); letter-spacing:-.012em; line-height:1.25}
.bc-d{font-size:var(--t-b)}
/* ancienne mise en page (page anglaise) */
.berge-txt p{font-size:var(--t-m); line-height:1.55}
.berge-pics{gap:12px}
.berge-pics img{border-radius:var(--r-m)}

/* ---------- citations : blanches, guillemets jaunes ---------- */
.q-grid{gap:var(--sp-3)}
.q-card{background:#fff; border-radius:var(--r-l); box-shadow:var(--ombre); outline:1px solid rgba(21,46,67,.06)}
.q-card img{aspect-ratio:16/10}
.q-grid blockquote{position:relative; padding:var(--sp-3) var(--sp-3) var(--sp-3) 58px; border:0; background:none; border-radius:0;
  font-size:var(--t-m); line-height:1.4; font-weight:500; color:var(--nuit); letter-spacing:-.008em}
.q-grid blockquote::before{content:"\201C"; position:absolute; left:18px; top:10px; font:700 58px/1 var(--f); color:var(--soleil)}

/* ---------- bandeau Réserver ---------- */
.sec.cta-band{padding:var(--sp-5) 0}
.cta-band h2{font-size:clamp(30px, 5vw, 40px)}
.cta-in p{font-size:var(--t-m)}
.cta-band .btn{min-height:56px; padding-inline:28px}

/* ---------- trois liens ---------- */
.links3{padding-top:var(--sp-6); padding-bottom:var(--sp-6)}
.l3 a{padding:var(--sp-3) 0}
.l3-t{font-size:var(--t-l); letter-spacing:-.018em}
.l3-d{font-size:var(--t-b)}
@media (min-width: 800px){
  .l3{gap:var(--sp-3)}
  .l3 a, .l3 a:first-child{border-top:0; padding:var(--sp-3) var(--sp-3) 26px; border-radius:var(--r-m); background:var(--brume); box-shadow:inset 0 3px 0 var(--soleil); transition:background-color .15s}
  .l3 a:hover{background:#E4EDF1}
}

/* ---------- bas de page mince : on garde la hauteur, on aère le texte ---------- */
.site-foot{line-height:1.55}
.foot-gs{color:#B9C8D1}

/* =========================================================
   NOS HABITATIONS
   ========================================================= */
/* le titre s'aligne sur le reste de la page */
@media (min-width: 900px){
  .intro-slim .wrap.narrow{max-width:1180px!important; padding:0 var(--gut)!important}
  .intro-slim .book-inline{max-width:calc(1180px - 2 * var(--gut)); margin-left:auto; margin-right:auto}
}
.intro-slim{padding:var(--sp-5) 0}
.intro h1, .res-top h1{letter-spacing:-.032em; line-height:.98}
.intro .lead-p{font-size:var(--t-m); line-height:1.55; max-width:68ch; color:var(--ink)}
.intro-slim .book-inline{margin-top:var(--sp-3)}

.block{padding:var(--sec) 0}
.block h2{margin-bottom:var(--sp-3)}
.gal3{gap:12px}
.gal3 img{border-radius:var(--r-m)}
.gal3 img:first-child{border-radius:var(--r-l)}
@media (min-width: 900px){ .gal3{grid-template-rows:repeat(2,240px)} }
.block .body-p{margin-top:var(--sp-3); font-size:var(--t-m); line-height:1.55; max-width:62ch}

/* liste « ce qui est inclus » : rangées nettes, icône dans une pastille */
.incl{margin-top:var(--sp-3); gap:0 var(--sp-5); max-width:none; border-top:1px solid var(--line)}
.incl li{align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--t-b); line-height:1.4}
.incl li span{flex:0 0 32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--brume); font-size:17px; line-height:1}
.block.alt .incl li span{background:#fff}
@media (min-width: 760px){ .incl{grid-template-columns:1fr 1fr} }

/* ---------- mouvement : rien de plus, on respecte les réglages ---------- */
@media (prefers-reduced-motion: reduce){ .btn:active{transform:none} }

/* ---------- fenêtre infolettre : la photo au complet (le couple et la basilique) ---------- */
@media (min-width: 760px){
  .news-box{max-width:960px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:stretch}
  .news-img{height:100%; min-height:100%; object-fit:cover; object-position:50% 50%}
}

/* ---------- Instagram (photos à jour via Behold) ---------- */
.sec.insta{padding-top:var(--sp-6); padding-bottom:var(--sp-5)}
.insta-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px}
.insta-at{font-weight:600; color:var(--marine); text-decoration:underline; text-decoration-color:var(--soleil); text-decoration-thickness:3px; text-underline-offset:4px}
.insta-p{margin:var(--sp-1) 0 var(--sp-3); font-size:var(--t-m); color:var(--montagne)}
.insta-feed{min-height:220px; border-radius:var(--r-m); overflow:hidden}
.insta-feed behold-widget{display:block}
.insta-btn{margin-top:var(--sp-3)}
@media (min-width: 900px){ .insta-feed{min-height:420px} }

/* bas de page : plus d'espace vide sous les icônes sur téléphone
   (le bouton « Choisir mes dates » se cache déjà quand on arrive au bas de page) */
@media (max-width: 899px){ .site-foot{padding-bottom:calc(28px + env(safe-area-inset-bottom))} }