/* baiedalong.com — design system "Jonque d'encre" */
/* Un lavis vietnamien : papier de riz, encre de Chine, jade des eaux,
   brume bleue des karsts, voile ocre, sceau rouge pour l'action. */
:root {
  --papier: #F2EFE4;      /* papier de riz, fond de page */
  --encre: #1F262B;       /* encre de Chine, texte */
  --encre-2: #5C676D;     /* encre diluee, texte secondaire */
  --jade: #3E7C6B;        /* l'eau de la baie */
  --brume: #8FA9B5;       /* karsts dans la brume */
  --voile: #C77F3A;       /* ocre des voiles de jonque */
  --sceau: #B03A2E;       /* sceau rouge, actions */
  --ligne: rgba(31, 38, 43, .16);
  --serif: "Spectral", Georgia, serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --mono: "Sometype Mono", ui-monospace, monospace;
  --r: 4px;
  --pad: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--papier); color: var(--encre); font: 400 17px/1.64 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--sceau); color: #fff; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hide-m { display: inline; }
@media (max-width: 760px) { .hide-m { display: none; } }

/* lavis : trois plans de karsts dans la brume */
.lavis { height: 56px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='56' viewBox='0 0 420 56'%3E%3Cpath d='M0 56 V40 C20 38 28 22 44 22 C58 22 62 34 76 34 C92 34 98 14 116 14 C132 14 138 30 152 30 C168 30 176 8 196 8 C214 8 220 26 236 26 C252 26 260 18 274 18 C290 18 296 36 312 36 C328 36 336 24 352 24 C368 24 378 40 398 40 L420 42 V56 Z' fill='%238FA9B5' fill-opacity='.28'/%3E%3Cpath d='M0 56 V46 C30 44 40 30 58 30 C74 30 80 40 96 40 C114 40 122 24 140 24 C156 24 164 38 180 38 C198 38 208 20 228 20 C246 20 254 36 272 36 C290 36 300 28 316 28 C334 28 344 44 366 44 L420 48 V56 Z' fill='%238FA9B5' fill-opacity='.45'/%3E%3Cpath d='M0 56 V50 C40 49 52 38 72 38 C90 38 98 46 116 46 C136 46 146 32 166 32 C184 32 194 44 214 44 C234 44 246 34 266 34 C286 34 296 46 318 46 C340 46 352 40 372 40 L420 50 V56 Z' fill='%233E7C6B' fill-opacity='.5'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: bottom; }

/* sceau carre rouge */
.seal { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--sceau); color: #fff; font: 700 12px/1 var(--mono); border-radius: 3px; transform: rotate(-3deg); }

.mockbar { position: fixed; inset: auto 0 0 0; z-index: 90; background: var(--encre); color: var(--papier); font: 400 12px/1.4 var(--mono); padding: 7px var(--pad); text-align: center; }
.mockbar a { color: inherit; }
body.has-mockbar { padding-bottom: 34px; }

.site-head { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--papier) 93%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); }
.head-in { display: flex; align-items: center; gap: 28px; padding: 13px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 38px; height: 38px; color: var(--jade); }
.brand .name { display: block; font: 600 19px/1 var(--serif); letter-spacing: .01em; }
.brand .tag { display: block; font: 400 9.5px/1 var(--mono); letter-spacing: .16em; color: var(--encre-2); margin-top: 4px; }
nav.main { display: flex; gap: 22px; margin-left: auto; }
nav.main a { text-decoration: none; font: 600 13.5px/1 var(--sans); color: var(--encre-2); padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
nav.main a:hover { color: var(--encre); border-color: var(--sceau); }
@media (max-width: 920px) { nav.main { display: none; } }
.btn { display: inline-flex; align-items: center; gap: 9px; border-radius: var(--r); padding: 12px 20px; font: 700 14px/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; transition: all .25s var(--ease); cursor: pointer; }
.btn:hover { transform: translateY(-1px); }
.btn-sceau { background: var(--sceau); color: #fff; }
.btn-sceau:hover { background: #93291F; }
.btn-encre { background: var(--encre); color: var(--papier); }
.btn-ligne { border-color: var(--encre); color: var(--encre); background: none; }

/* hero : rouleau horizontal, colonne verticale mono */
.hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.hero .ph { position: absolute; inset: 0; z-index: -2; }
.hero .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31,38,43,.3), rgba(31,38,43,.04) 40%, rgba(31,38,43,.82) 94%); }
.hero-vert { position: absolute; top: 108px; right: calc(var(--pad) + 2px); z-index: 2; writing-mode: vertical-rl; font: 400 11px/1.9 var(--mono); letter-spacing: .34em; color: rgba(242, 239, 228, .85); border-right: 1px solid rgba(242, 239, 228, .4); padding-right: 10px; text-transform: uppercase; }
@media (max-width: 760px) { .hero-vert { display: none; } }
.hero-in { position: relative; width: 100%; padding: 130px 0 clamp(30px, 6vh, 58px); color: #fff; }
.kicker { font: 400 11px/1.6 var(--mono); letter-spacing: .16em; color: #E8C98F; margin-bottom: 12px; text-transform: uppercase; }
.hero h1 { font: 600 clamp(40px, 6.6vw, 96px)/1.0 var(--serif); margin: 0 0 16px; max-width: 15ch; letter-spacing: -.01em; }
.hero h1 em { font-style: italic; font-weight: 300; color: #BFD8CE; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 40px; align-items: end; }
@media (max-width: 980px) { .hero-row { grid-template-columns: 1fr; } }
.lead { font-size: clamp(16.5px, 1.5vw, 19.5px); line-height: 1.62; max-width: 54ch; margin: 0 0 22px; }
.booking { display: flex; flex-wrap: wrap; gap: 10px; background: color-mix(in srgb, #ffffff 95%, transparent); border-radius: var(--r); padding: 12px; box-shadow: 0 18px 46px rgba(31, 38, 43, .35); color: var(--encre); }
.booking .field { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--r); background: var(--papier); border: 1px solid var(--ligne); flex: 1 1 135px; }
.booking .field .ico { color: var(--jade); }
.booking label { display: block; font: 400 9px/1 var(--mono); letter-spacing: .1em; color: var(--encre-2); text-transform: uppercase; margin-bottom: 3px; }
.booking input, .booking select { border: 0; background: none; color: var(--encre); font: 700 14px/1.2 var(--sans); width: 100%; outline: none; }
.booking .btn { flex: 1 1 100%; justify-content: center; }
@media (min-width: 700px) { .booking .btn { flex: 0 0 auto; } }

.credit { position: absolute; right: 12px; top: 10px; z-index: 5; font: 400 10px/1.3 var(--mono); color: #fff; background: rgba(31, 38, 43, .55); padding: 3px 8px; border-radius: 4px; }
.hero .credit, .cta-band .credit { top: auto; bottom: 10px; }

.sec { padding: clamp(60px, 8.5vw, 108px) 0; }
.sec-head { display: flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); margin-bottom: clamp(22px, 4vw, 40px); }
.sec-head .seal { font-size: 11px; }
.sec-head::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
h2 { font: 600 clamp(31px, 4.3vw, 54px)/1.08 var(--serif); margin: 0; letter-spacing: -.01em; }
h2 em { font-style: italic; font-weight: 300; color: var(--jade); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; margin-bottom: clamp(26px, 4vw, 46px); }
@media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; } }
.intro-grid p { color: var(--encre-2); max-width: 52ch; margin: 0 0 16px; }

/* croisieres : trois formules, verdict en pied */
.jonques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .jonques { grid-template-columns: 1fr; } }
.jonque { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.jonque:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(31, 38, 43, .14); }
.jonque .ph { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.jonque .ph img { width: 100%; height: 100%; object-fit: cover; }
.jonque .duree { position: absolute; left: 12px; top: 12px; background: var(--encre); color: var(--papier); font: 700 11px/1 var(--mono); letter-spacing: .1em; padding: 7px 10px; border-radius: 3px; }
.jonque .in { padding: 18px 20px 16px; display: grid; gap: 9px; }
.jonque h3 { font: 600 23px/1.12 var(--serif); margin: 0; }
.jonque .prix { font-family: var(--mono); font-size: 11.5px; color: var(--voile); font-weight: 700; letter-spacing: .06em; }
.jonque p { margin: 0; color: var(--encre-2); font-size: 14px; line-height: 1.55; }
.jonque ul { margin: 0; padding-left: 18px; color: var(--encre-2); font-size: 13.5px; display: grid; gap: 5px; }
.jonque .verdict { margin-top: auto; border-top: 1px dashed var(--ligne); padding: 13px 20px 16px; font-size: 13.5px; }
.jonque .verdict b { color: var(--sceau); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; display: block; margin-bottom: 4px; }

/* section sombre : Lan Ha, Cat Ba, Bai Tu Long */
.encre { background: var(--encre); color: var(--papier); }
.encre h2 { color: var(--papier); }
.encre h2 em { color: #BFD8CE; }
.encre .sec-head { color: #9AA6AC; }
.encre .sec-head::after { background: rgba(242, 239, 228, .2); }
.encre .intro-grid p { color: #ABB6BB; }
.baies { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.baie { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; border-radius: var(--r); overflow: hidden; text-decoration: none; isolation: isolate; grid-column: span 4; }
.baie.tall { grid-column: span 8; min-height: 400px; }
@media (max-width: 880px) { .baie, .baie.tall { grid-column: span 12 !important; } }
.baie .ph { position: absolute; inset: 0; z-index: -1; }
.baie .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.baie:hover .ph img { transform: scale(1.045); }
.baie .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 26, 30, .88) 0%, rgba(20, 26, 30, .05) 55%); }
.baie .in { position: relative; padding: 18px; color: var(--papier); }
.baie .frequentation { position: absolute; top: 14px; right: 14px; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; background: rgba(242, 239, 228, .93); color: var(--encre); border-radius: 3px; padding: 6px 9px; }
.baie .k { font: 400 10px/1 var(--mono); letter-spacing: .16em; color: #E8C98F; display: block; margin-bottom: 6px; }
.baie h3 { font: 600 25px/1.1 var(--serif); margin: 0 0 5px; }
.baie p { margin: 0; font-size: 13.5px; opacity: .92; max-width: 56ch; }

/* pieges : liste numerotee au sceau */
.pieges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 860px) { .pieges { grid-template-columns: 1fr; } }
.piege { background: #fff; border: 1px solid var(--ligne); border-radius: var(--r); padding: 20px 22px; display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.piege h3 { font: 600 18.5px/1.25 var(--serif); margin: 0 0 6px; }
.piege p { margin: 0; color: var(--encre-2); font-size: 14px; line-height: 1.58; }
.piege p b { color: var(--encre); }

/* saison : reglette */
.saisons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 880px) { .saisons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .saisons { grid-template-columns: 1fr; } }
.saison { border-top: 3px solid var(--brume); background: #fff; border-radius: 0 0 var(--r) var(--r); padding: 16px 18px 18px; }
.saison.haute { border-top-color: var(--jade); }
.saison.brumeuse { border-top-color: var(--encre-2); }
.saison.chaude { border-top-color: var(--voile); }
.saison .k { font: 700 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--encre-2); text-transform: uppercase; }
.saison h3 { font: 600 19px/1.2 var(--serif); margin: 8px 0 6px; }
.saison p { margin: 0; color: var(--encre-2); font-size: 13.5px; line-height: 1.55; }

.stays { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.stay { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; border-radius: var(--r); overflow: hidden; text-decoration: none; grid-column: span 4; isolation: isolate; }
@media (max-width: 880px) { .stay { grid-column: span 12 !important; } }
.stay .ph { position: absolute; inset: 0; z-index: -1; }
.stay .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.stay:hover .ph img { transform: scale(1.045); }
.stay .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 26, 30, .88) 0%, rgba(20, 26, 30, .05) 55%); }
.stay .in { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 18px; color: var(--papier); }
.stay .k { font: 400 10px/1 var(--mono); letter-spacing: .16em; color: #E8C98F; }
.stay h3 { font: 600 23px/1.1 var(--serif); margin: 5px 0 4px; }
.stay .meta { opacity: .88; font-size: 13.5px; }
.stay .go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; background: var(--papier); color: var(--encre); flex: none; transition: all .25s var(--ease); transform: rotate(-3deg); }
.stay:hover .go { background: var(--sceau); color: #fff; transform: rotate(0deg) translateX(3px); }

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .posts { grid-template-columns: 1fr; } }
.post { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; border: 1px solid var(--ligne); background: #fff; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
a.post:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(31, 38, 43, .14); }
.post .ph { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.post .ph img { width: 100%; height: 100%; object-fit: cover; }
.post .in { padding: 17px 18px 20px; display: grid; gap: 7px; }
.post .mono { color: var(--sceau); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.post h3 { font: 600 20px/1.22 var(--serif); margin: 0; }
.post p { margin: 0; color: var(--encre-2); font-size: 14px; line-height: 1.5; }
.post.soon { opacity: .55; }
.post.soon .mono { color: var(--encre-2); }

.faq details { border-bottom: 1px solid var(--ligne); padding: 15px 0; max-width: 820px; }
.faq summary { cursor: pointer; font: 700 16.5px/1.4 var(--sans); }
.faq p { margin: 10px 0 2px; color: var(--encre-2); }

.cta-band { position: relative; isolation: isolate; padding: clamp(74px, 10vw, 128px) 0; text-align: center; overflow: hidden; color: #fff; }
.cta-band .ph { position: absolute; inset: 0; z-index: -2; }
.cta-band .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 26, 30, .62); }
.cta-band h2 { color: #fff; margin-bottom: 26px; }
.cta-band h2 em { color: #E8C98F; }

footer { border-top: 1px solid var(--ligne); padding: 40px 0 46px; color: var(--encre-2); font-size: 13.5px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
footer a { color: inherit; }
footer .mono { font-size: 10.5px; }
#credits-list { margin: 10px 0 0; padding: 0 0 0 18px; display: grid; gap: 4px; max-width: 72ch; }
details > summary { cursor: pointer; }

.article-hero { position: relative; min-height: 62svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; color: #fff; }
.article-hero .ph { position: absolute; inset: 0; z-index: -2; }
.article-hero .ph img { width: 100%; height: 100%; object-fit: cover; }
.article-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31,38,43,.34), rgba(31,38,43,.85)); }
.article-hero .wrap { width: 100%; padding-bottom: 42px; padding-top: 120px; }
.article-hero h1 { font: 600 clamp(34px, 5.2vw, 70px)/1.04 var(--serif); margin: 10px 0 14px; letter-spacing: -.01em; }
.article-hero h1 em { font-style: italic; font-weight: 300; color: #BFD8CE; }
.article-body { max-width: 740px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) var(--pad) 30px; }
.article-body > p:first-child { font-size: clamp(18px, 1.9vw, 20.5px); line-height: 1.62; }
.article-body p { color: #434E54; line-height: 1.75; }
.article-body h2 { font-size: clamp(24px, 3vw, 33px); margin: 1.6em 0 .5em; }
.article-body figure { margin: 2em 0; position: relative; border-radius: var(--r); overflow: hidden; }
.article-body figcaption { font: 400 11.5px/1.6 var(--mono); color: var(--encre-2); padding: 10px 2px 0; }
.article-body .note { border-left: 4px solid var(--voile); background: #fff; border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; }
.article-body .note .mono { color: var(--voile); font-weight: 700; }
.aff-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: #fff; border-radius: var(--r); padding: 20px 22px; margin: 2.2em 0; box-shadow: 0 12px 32px rgba(31, 38, 43, .12); }
.aff-cta b { font: 600 18px/1.3 var(--serif); display: block; }
.aff-cta span { color: var(--encre-2); font-size: 13.5px; }

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

body.show-aff .aff { outline: 2px dashed var(--voile); outline-offset: 3px; position: relative; }
body.show-aff .aff::before { content: "Stay22 · " attr(data-n); position: absolute; top: -10px; left: -6px; z-index: 60; background: var(--voile); color: #fff; font: 700 10px/1 var(--mono); padding: 4px 7px; border-radius: 4px; }